/* 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;
  }

  #searchModal .modal-close-button {
    position: static !important;
    grid-row: 1;
    grid-column: 2;
    justify-self: end;
    align-self: center;
    margin: 0 !important;
    transform: none !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    z-index: 10001 !important;
  }

  /* Center both mobile panels inside the visible viewport, including the keyboard. */
  #searchModal {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    top: var(--mobile-viewport-top, 0px) !important;
    bottom: auto !important;
    height: var(--mobile-viewport-height, 100dvh) !important;
    padding: 16px 12px !important;
    background: rgba(0, 0, 0, .36) !important;
    -webkit-backdrop-filter: blur(0) saturate(1.08) !important;
    backdrop-filter: blur(0) saturate(1.08) !important;
    transition: opacity 180ms ease, backdrop-filter 220ms cubic-bezier(.22, 1, .36, 1), -webkit-backdrop-filter 220ms cubic-bezier(.22, 1, .36, 1) !important;
  }

  #searchModal:not(.hidden) {
    display: flex !important;
  }

  #searchModal.is-open {
    -webkit-backdrop-filter: blur(8px) saturate(1.08) !important;
    backdrop-filter: blur(8px) saturate(1.08) !important;
  }

  #searchModal.is-closing {
    -webkit-backdrop-filter: blur(0) saturate(1.08) !important;
    backdrop-filter: blur(0) saturate(1.08) !important;
  }

  #searchModal .search-modal {
    display: grid !important;
    flex: 0 1 auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    grid-template-columns: minmax(0, 1fr) 42px;
    grid-template-rows: max-content max-content max-content minmax(0, 1fr);
    align-items: center;
    gap: 12px 10px;
    padding-top: 14px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(460px, max(320px, 56dvh), calc(var(--mobile-viewport-height, 100dvh) - 32px)) !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    transform: none !important;
    transition: opacity 220ms ease !important;
  }

  #searchModalTitle {
    grid-row: 1;
    grid-column: 1;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #searchModal .search-input-row,
  #searchModal .search-status,
  #searchModal .search-results {
    grid-column: 1 / -1;
    margin-block: 0 !important;
  }

  #searchModal .search-results {
    align-self: stretch;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    grid-auto-rows: max-content;
    align-content: start;
  }

  #searchModal.is-open .search-modal {
    opacity: 1 !important;
    transform: none !important;
  }

  #searchModal.is-closing .search-modal {
    opacity: 0 !important;
    transform: none !important;
  }

  .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;
  }

  #composerCard:not(.mobile-compose-open):not(.mobile-compose-closing) {
    display: none !important;
  }

  #composerCard.mobile-compose-open,
  #composerCard.mobile-compose-closing {
    position: fixed !important;
    z-index: 1400 !important;
    left: 12px !important;
    right: 12px !important;
    top: var(--mobile-viewport-center, 50dvh) !important;
    bottom: auto !important;
    translate: 0 -50% !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(var(--mobile-viewport-height, 100dvh) - 32px) !important;
    margin: 0 !important;
    padding: 22px 16px 18px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-radius: var(--ui-radius-surface, 42px) !important;
    box-sizing: border-box !important;
    animation: mobileComposeCardIn 220ms cubic-bezier(.22, 1, .36, 1) both;
  }

  #composerCard.mobile-compose-closing {
    animation: mobileComposeCardOut 190ms ease both;
    pointer-events: none !important;
  }

  body.mobile-compose-open::before,
  body.mobile-compose-closing::before {
    content: "";
    position: fixed;
    z-index: 1300;
    inset: 0;
    background: rgba(0, 0, 0, .36);
    backdrop-filter: blur(8px) saturate(1.08);
    -webkit-backdrop-filter: blur(8px) saturate(1.08);
    animation: mobileComposeBackdropIn 180ms ease both;
  }

  body.mobile-compose-closing::before {
    animation: mobileComposeBackdropOut 190ms ease both;
  }

  #composerCard.mobile-compose-open > h2 {
    padding-right: 46px !important;
  }

  .mobile-compose-close-button {
    position: absolute !important;
    display: inline-grid !important;
    place-items: center !important;
    top: 13px !important;
    right: 13px !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 50% !important;
    background: var(--glass-control) !important;
    color: var(--text) !important;
    z-index: 2;
  }

  .mobile-compose-close-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    pointer-events: none;
  }

  /* iOS can move the visual viewport while an input is focused. Keep the
     close controls in their existing visual positions, but make their touch
     layer stable and prevent the dimming layer from ever stealing a tap. */
  body.mobile-compose-open::before,
  body.mobile-compose-closing::before {
    pointer-events: none !important;
  }

  #composerCard.mobile-compose-open {
    isolation: isolate !important;
    pointer-events: auto !important;
  }

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

  .mobile-compose-close-button::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
  }

  #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;
  }
}