/* V290 — centered mobile panels, balanced dock icons and independent desktop layout. */

.mobile-dock,
.mobile-compose-close-button {
  display: none;
}

@media (max-width: 700px) {
  body {
    --mobile-panel-bottom: calc(88px + env(safe-area-inset-bottom));
  }

  /* The old authenticated actions remain available to the existing handlers;
     their visible mobile home is the dock. Keep the guest login action above. */
  #authenticatedAccountButtons,
  body[data-auth-state="authenticated"] #authenticatedAccountButtons,
  body[data-auth-state="authenticated"] .card.account-bar #authenticatedAccountButtons,
  body[data-auth-state="authenticated"] .card.account-bar.account-bar-stacked-mobile #authenticatedAccountButtons {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* The legacy account bar is the old mobile dock shell. Remove the shell as
     well as its buttons so authenticated home has no empty leftover capsule. */
  body[data-auth-state="authenticated"] .card.account-bar {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    min-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  /* Older account-bar rules carry more class specificity and can otherwise
     resurrect the identity row after it has been stacked. The authenticated
     mobile dock owns this space completely; guest account controls stay intact. */
  body[data-auth-state="authenticated"] #appSection > .card.account-bar {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    min-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  /* Search uses the original shared modal layout. */

  .modal-overlay:not(.hidden) .modal-close-button {
    box-sizing: border-box !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    z-index: 20 !important;
  }

  body[data-auth-state="authenticated"] #appSection {
    padding-bottom: calc(106px + env(safe-area-inset-bottom)) !important;
  }

  /* The composer remains inline; there is no mobile compose sheet. */

  #searchModal .search-modal {
    isolation: isolate !important;
    pointer-events: auto !important;
  }

  #searchModal .modal-close-button {
    z-index: 80 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent;
  }

  #searchModal .modal-close-button svg {
    pointer-events: none !important;
  }

  .mobile-dock {
    position: fixed;
    z-index: 15000;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    padding: 8px 14px max(9px, env(safe-area-inset-bottom));
    pointer-events: none;
  }

  body[data-auth-state="authenticated"] .mobile-dock {
    display: block;
  }

  .mobile-dock-rail {
    --mobile-dock-tab-size: 42px;
    --mobile-dock-height: calc(var(--mobile-dock-tab-size) + 8px);
    display: grid;
    grid-template-columns: var(--mobile-dock-height) max-content var(--mobile-dock-height);
    align-items: center;
    gap: 6px;
    width: max-content;
    margin: 0 auto;
    pointer-events: auto;
    transform: scale(var(--mobile-dock-motion-scale, var(--mobile-dock-expanded-scale, 1)));
    transform-origin: 50% 100%;
    transition: transform 1250ms cubic-bezier(.16, 1, .3, 1);
    will-change: transform;
  }

  /* V300 — Instagram/iOS-style dock breathing. This scales the existing rail
     as one unit, so its geometry, glass styling and icon proportions stay intact. */
  .mobile-dock[data-scroll-compact="true"] {
    --mobile-dock-motion-scale: .76;
  }

  .mobile-dock[data-scroll-compact="false"] {
    --mobile-dock-motion-scale: var(--mobile-dock-expanded-scale, 1);
  }

  .mobile-dock-edge-button,
  .mobile-dock-tabs {
    box-sizing: border-box;
    border: 1px solid color-mix(in srgb, var(--glass-border) 92%, white 8%);
    background: color-mix(in srgb, var(--card) 72%, transparent);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .13);
    backdrop-filter: blur(24px) saturate(1.35);
    -webkit-backdrop-filter: blur(24px) saturate(1.35);
  }

  .mobile-dock-edge-button {
    display: inline-grid;
    place-items: center;
    flex: 0 0 var(--mobile-dock-height);
    width: var(--mobile-dock-height);
    min-width: var(--mobile-dock-height);
    max-width: var(--mobile-dock-height);
    aspect-ratio: 1 / 1;
    height: var(--mobile-dock-height);
    min-height: var(--mobile-dock-height);
    max-height: var(--mobile-dock-height);
    padding: 0;
    border-radius: 50%;
    color: var(--text);
    -webkit-tap-highlight-color: transparent;
    transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
  }

  .mobile-dock-edge-button[data-active="true"] {
    border-color: color-mix(in srgb, var(--primary) 56%, var(--glass-border));
    background: color-mix(in srgb, var(--primary) 27%, var(--card));
    color: var(--text);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--primary) 20%, transparent), inset 0 1px 0 rgba(255,255,255,.17);
  }

  .mobile-dock-edge-button:active {
    transform: scale(.92);
  }

  .mobile-dock-edge-button:hover,
  .mobile-dock-edge-button:active,
  .mobile-dock-edge-button:focus,
  .mobile-dock-edge-button:focus-visible {
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
    border-color: color-mix(in srgb, var(--glass-border) 92%, white 8%) !important;
    background: color-mix(in srgb, var(--card) 72%, transparent) !important;
    color: var(--text) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .13) !important;
  }

  .mobile-dock-edge-button[data-active="true"],
  .mobile-dock-edge-button[data-active="true"]:hover,
  .mobile-dock-edge-button[data-active="true"]:active,
  .mobile-dock-edge-button[data-active="true"]:focus,
  .mobile-dock-edge-button[data-active="true"]:focus-visible {
    border-color: color-mix(in srgb, var(--primary) 56%, var(--glass-border)) !important;
    background: color-mix(in srgb, var(--primary) 27%, var(--card)) !important;
    color: var(--text) !important;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--primary) 20%, transparent), inset 0 1px 0 rgba(255,255,255,.17) !important;
  }

  .mobile-dock-edge-button svg,
  .mobile-dock-tab svg,
  .mobile-dock-create-button svg {
    width: clamp(30px, 8.5vw, 32px);
    height: clamp(30px, 8.5vw, 32px);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-dock-create-button {
    border-color: color-mix(in srgb, var(--glass-border) 92%, white 8%);
    background: color-mix(in srgb, var(--card) 72%, transparent);
    color: var(--text);
  }

  .mobile-dock-create-button svg {
    stroke-width: 1.65;
  }

  .mobile-dock-tabs {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    min-width: 0;
    height: var(--mobile-dock-height);
    min-height: var(--mobile-dock-height);
    max-height: var(--mobile-dock-height);
    padding: 3px;
    border-radius: 9999px;
    isolation: isolate;
  }

  .mobile-dock-tabs[data-active="false"] .mobile-dock-highlight {
    opacity: 0;
  }

  .mobile-dock-highlight {
    position: absolute;
    z-index: 1;
    box-sizing: border-box;
    top: 0;
    left: 0;
    width: var(--mobile-dock-highlight-width, var(--mobile-dock-tab-size));
    height: var(--mobile-dock-highlight-height, var(--mobile-dock-tab-size));
    border: 1px solid color-mix(in srgb, var(--primary) 56%, white 14%);
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 27%, transparent);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--primary) 20%, transparent), inset 0 1px 0 rgba(255,255,255,.17);
    transform: translate3d(var(--mobile-dock-highlight-x, 3px), var(--mobile-dock-highlight-y, 3px), 0) scale(var(--mobile-dock-highlight-scale, 1));
    transition: transform 540ms cubic-bezier(.16, 1, .3, 1), opacity 260ms ease, background 260ms ease, border-color 260ms ease, box-shadow 300ms ease;
    transform-origin: center;
    opacity: 1;
    pointer-events: none;
  }

  /* V312.5 — iOS-like press + scrub. The selector grows visibly instead of
     teleporting, gets substantially larger while held, follows the finger
     continuously during a drag, then eases down onto the released route. */
  .mobile-dock-tabs[data-dock-pressed="true"] {
    --mobile-dock-highlight-scale: 1.34;
  }

  .mobile-dock-tabs[data-dock-pressed="true"] .mobile-dock-highlight {
    transition: transform 430ms cubic-bezier(.16, 1, .3, 1), opacity 260ms ease, background 260ms ease, border-color 260ms ease, box-shadow 430ms cubic-bezier(.16, 1, .3, 1);
    box-shadow: 0 15px 36px color-mix(in srgb, var(--primary) 31%, transparent), inset 0 1px 0 rgba(255,255,255,.22);
  }

  .mobile-dock-tabs[data-dock-dragging="true"] .mobile-dock-highlight {
    /* JS performs a soft frame-by-frame follow while dragging. Keeping CSS x
       transitions out of the way avoids the old icon-to-icon snapping. */
    transition: opacity 260ms ease, background 260ms ease, border-color 260ms ease, box-shadow 300ms ease;
  }

  .mobile-dock-tab[data-dock-scrub-hover="true"] {
    color: var(--text) !important;
  }

  .mobile-dock-tab {
    position: relative;
    z-index: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--mobile-dock-tab-size);
    width: var(--mobile-dock-tab-size);
    height: var(--mobile-dock-tab-size);
    min-height: var(--mobile-dock-tab-size);
    overflow: visible !important;
    align-self: center;
    justify-self: center;
    gap: 0;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--glass-border) 92%, white 8%);
    border-radius: 50%;
    background: color-mix(in srgb, var(--card) 72%, transparent);
    color: var(--muted-text);
    font-size: 0;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.01em;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: color 220ms ease, transform 180ms ease;
  }

  .mobile-dock-tab[aria-selected="true"] {
    color: var(--text);
  }

  /* Preserve every gray circle during selection, focus, and slider travel. */
  .mobile-dock-tab:hover,
  .mobile-dock-tab:active,
  .mobile-dock-tab:focus,
  .mobile-dock-tab:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border-color: color-mix(in srgb, var(--glass-border) 92%, white 8%) !important;
    background: color-mix(in srgb, var(--card) 72%, transparent) !important;
    color: var(--muted-text) !important;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-dock-tab[aria-selected="true"]:hover,
  .mobile-dock-tab[aria-selected="true"]:active,
  .mobile-dock-tab[aria-selected="true"]:focus,
  .mobile-dock-tab[aria-selected="true"]:focus-visible {
    color: var(--text) !important;
  }

  .mobile-dock-tab:active {
    transform: scale(.93);
  }

  .mobile-dock-tab svg {
    position: relative;
    z-index: 2;
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Match the visible drawings, whose SVG bounds differ by icon. */
  #mobileDockProfile svg { width: 24px; height: 24px; }
  #mobileDockMessages svg { width: 30px; height: 30px; }
  #mobileDockNotifications svg { width: 32px; height: 32px; }

  .mobile-dock-icon-wrap {
    width: 32px;
    height: 32px;
    position: relative;
    z-index: 2;
    display: inline-grid;
    place-items: center;
  }

  .mobile-dock-badge {
    position: absolute;
    z-index: 4;
    top: -6px;
    right: -7px;
    min-width: 19px;
    width: auto;
    height: 18px;
    padding: 0 5px;
    border: 1.5px solid var(--card);
    border-radius: 9999px;
    background: var(--primary);
    display: grid;
    place-items: center;
    color: var(--primary-text);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
  }

  .mobile-dock-badge[hidden],
  .mobile-dock-badge.hidden,
  .mobile-dock-badge:empty {
    display: none !important;
  }

  /* The dock is an icon rail. Keep labels available to assistive technology,
     but do not let them squeeze or overlap the five touch targets. */
  .mobile-dock-tab > span:last-child {
    display: none !important;
  }

  /* Attachment choices must escape the scrollable composer card. Keep the
     public picker at its original compact size while making it fully tappable. */
  #composerCard.mobile-compose-open .composer-attachment-wrap,
  #composerCard.mobile-compose-closing .composer-attachment-wrap {
    position: static !important;
  }

  #composerCard.mobile-compose-open .composer-attachment-menu,
  #composerCard.mobile-compose-closing .composer-attachment-menu,
  #composerAttachmentMenu[data-mobile-portal="true"] {
    position: fixed !important;
    z-index: 16000 !important;
    top: auto !important;
    left: auto !important;
    right: 14px !important;
    bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    width: 192px !important;
    min-width: 192px !important;
    max-width: 192px !important;
    min-height: 186px !important;
    padding: 14px 12px !important;
    border-radius: 32px !important;
    max-height: min(54dvh, 420px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #composerCard.mobile-compose-open #composerAttachmentMenu:not([data-mobile-positioned="true"]),
  #composerCard.mobile-compose-closing #composerAttachmentMenu:not([data-mobile-positioned="true"]),
  #composerAttachmentMenu[data-mobile-portal="true"]:not([data-mobile-positioned="true"]) {
    visibility: hidden !important;
  }

  #composerAttachmentMenu[data-mobile-portal="true"]:not(.hidden)[data-mobile-positioned="true"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* iOS keeps the date control's intrinsic inline box unless every ancestor
     can shrink. Mirror the working Messages countdown geometry here. */
  #snippetEditorModal .snippet-editor-modal,
  #snippetEditorModal .snippet-editor-modal > *,
  #snippetEditorModal .snippet-editor-heading,
  #snippetEditorModal .snippet-editor-message,
  #snippetEditorModal .snippet-editor-actions,
  #snippetEditorModal .snippet-editor-fields,
  #snippetEditorModal .snippet-editor-fields > *,
  #snippetEditorModal .snippet-editor-field,
  #snippetEditorModal .snippet-editor-field > span,
  #countdownSnippetFields,
  #countdownSnippetFields > *,
  #countdownSnippetFields .snippet-editor-field,
  #countdownSnippetFields .snippet-editor-field > input {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #snippetEditorModal .snippet-editor-modal {
    width: min(520px, calc(100vw - 24px)) !important;
    max-width: min(520px, calc(100vw - 24px)) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 24px) !important;
    padding: 20px 16px 16px !important;
    border-radius: var(--ui-radius-surface, 38px) !important;
  }

  #snippetEditorModal .snippet-editor-fields:not(.hidden) {
    width: 100% !important;
    min-height: 0 !important;
    padding: 13px !important;
    border-radius: 30px !important;
  }

  #countdownSnippetFields {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    overflow-x: clip !important;
    contain: inline-size !important;
  }

  #countdownSnippetFields > *,
  #countdownSnippetFields .snippet-editor-field {
    width: 100% !important;
    grid-column: 1 !important;
    overflow: clip !important;
  }

  #countdownTitleInput,
  #countdownStartInput,
  #countdownEndInput {
    display: block !important;
    inline-size: 100% !important;
    width: 100% !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
    max-inline-size: 100% !important;
    max-width: 100% !important;
    block-size: 46px !important;
    height: 46px !important;
    min-block-size: 46px !important;
    min-height: 46px !important;
    max-block-size: 46px !important;
    max-height: 46px !important;
    margin: 0 !important;
    padding-block: 0 !important;
    padding-inline: 14px 10px !important;
    overflow: clip !important;
    line-height: 1.2 !important;
    border-radius: 9999px !important;
  }

  #countdownStartInput::-webkit-date-and-time-value,
  #countdownEndInput::-webkit-date-and-time-value {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    line-height: 44px;
    text-align: left;
  }

  #countdownStartInput::-webkit-datetime-edit,
  #countdownEndInput::-webkit-datetime-edit {
    box-sizing: border-box;
    min-width: 0;
    margin: 0;
    padding: 0;
    line-height: 1.2;
  }

  #countdownStartInput::-webkit-calendar-picker-indicator,
  #countdownEndInput::-webkit-calendar-picker-indicator {
    flex: 0 0 auto;
    margin: 0;
    padding: 4px;
  }

  /* Keep WebKit's native date editor usable without allowing its intrinsic
     segment row to establish a width wider than the public editor. */
  #countdownStartInput,
  #countdownEndInput {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    font-size: 16px !important;
    text-align: left !important;
    vertical-align: middle !important;
    color: var(--text) !important;
    background-color: var(--glass-control) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 7%, transparent) !important;
  }

  /* Posted countdown cards must also shrink their day pill on narrow phones. */
  .yap-snippet-countdown,
  .yap-snippet-countdown .yap-snippet-header,
  .yap-snippet-countdown .yap-countdown-body,
  .yap-snippet-countdown .yap-countdown-dates {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .yap-snippet-countdown {
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .yap-snippet-countdown .yap-countdown-time {
    max-width: 100% !important;
    font-size: clamp(18px, 6.8vw, 26px) !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #snippetEditorModal .snippet-editor-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #snippetEditorModal .snippet-editor-actions #saveSnippetEditorButton {
    grid-row: auto !important;
  }

  /* The example question remains a one-line pill; only an entered newline
     should turn it into a multiline answer field. */
  #questionSnippetInput:not(.bubble-multiline) {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 52px !important;
    height: 52px !important;
    max-height: 52px !important;
    padding: 14px 18px !important;
    overflow: hidden !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    resize: none !important;
    border-radius: 9999px !important;
  }

  #questionSnippetInput:not(.bubble-multiline)::placeholder {
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  /* Secondary editors sit above the composer backdrop and dock. */
  #snippetEditorModal,
  #plusProfileEditorOverlay {
    z-index: 17000 !important;
  }

  #plusProfileEditorModal .plus-editor-header {
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }

  #plusProfileEditorModal .plus-editor-header > .plus-editor-heading-row {
    grid-template-columns: minmax(0, 1fr) 42px !important;
    align-items: center !important;
    column-gap: 10px !important;
  }

  #plusProfileEditorModal .plus-editor-header > .plus-editor-heading-row > div:first-child {
    grid-column: 1 / -1;
  }

  #plusProfileEditorModal .plus-editor-preview-modes {
    grid-column: 1;
    grid-row: 2;
    min-width: 0 !important;
  }

  #plusProfileEditorModal .plus-editor-heading-row > #closePlusProfileEditorButton {
    position: static !important;
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    justify-self: end;
    margin: 0 !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    transform: none !important;
    z-index: 50 !important;
  }

  @keyframes mobileComposeBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes mobileComposeCardIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes mobileComposeCardOut {
    from { opacity: 1; }
    to { opacity: 0; }
  }

  @keyframes mobileComposeBackdropOut {
    from { opacity: 1; }
    to { opacity: 0; }
  }
}

@media (max-width: 370px) {
  .mobile-dock-rail {
    --mobile-dock-tab-size: clamp(34px, calc((100vw - 138px) / 5), 39px);
    gap: 5px;
  }

  .mobile-dock { padding-inline: 8px; }

  .mobile-dock-tab { font-size: 0; }
}

/* The desktop picker can extend beyond its card, but the whole composer
   stays below dialogs instead of promoting its paperclip above them. */
@media (min-width: 701px) {
  #composerCard {
    position: relative;
    z-index: 1 !important;
    isolation: isolate;
    overflow: visible !important;
  }

  #composerCard .composer-attachment-wrap {
    position: relative;
    z-index: auto;
  }

  #composerCard .composer-attachment-menu:not(.hidden) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 40 !important;
  }
}

/* Main Settings ends at its account actions. Keep the header and those
   actions visible while the four entries scroll on shorter screens. */
#settingsModal {
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
}

@media (max-width: 700px) {
#settingsModal > #settingsMenu {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  flex: 0 1 auto !important;
  width: min(580px, 100%) !important;
  min-width: 0 !important;
  max-width: 580px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: min(650px, 82dvh, calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom))) !important;
  margin: 0 !important;
  padding: 20px !important;
  overflow: hidden !important;
  border-radius: 34px !important;
}

#settingsMenu > #settingsModalTitle {
  min-height: 42px !important;
  margin: 0 !important;
  padding: 8px 52px 0 0 !important;
}

#settingsMenu > .settings-main-sections {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#settingsMenu .settings-main-sections > .settings-section {
  min-height: 0 !important;
  margin: 0 0 10px !important;
  padding: 12px 14px !important;
}

#settingsMenu .settings-main-sections > .settings-section:last-child {
  margin-bottom: 0 !important;
}

#settingsMenu > .settings-account-actions {
  margin: 0 !important;
}

}

/* Desktop keeps the original modal width, padding and section spacing.
   Its natural content height ends at Switch accounts / Log out. */
@media (min-width: 701px) {
  #settingsModal > #settingsMenu {
    height: auto !important;
    min-height: 0 !important;
    max-height: min(90dvh, 860px) !important;
    overflow-y: auto !important;
  }
  #settingsMenu > .settings-main-sections { display: contents; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-dock-rail,
  .mobile-dock-highlight,
  .mobile-dock-tab,
  .mobile-dock-edge-button,
  #composerCard.mobile-compose-open,
  #composerCard.mobile-compose-closing,
  body.mobile-compose-open::before,
  body.mobile-compose-closing::before {
    transition: none !important;
    animation: none !important;
  }
}


/* V295 — keep generated hit-area artwork transparent to WebKit hit testing.
   The button itself remains the touch target; layout is unchanged. */
@media (max-width: 700px) {
  .mobile-compose-close-button::before,
  #searchModal .modal-close-button::before,
  #searchModal .modal-close-button::after {
    pointer-events: none !important;
  }
}