/* V300 — new mobile dock only; desktop keeps its legacy navigation. */
.mobile-dock-position-preference {
  display: none !important;
}

/* Preserve the menu's measured height; only its options scroll. */
#customizationMenu.customization-scroll-ready {
  display: flex !important;
  flex-direction: column;
  height: var(--customization-menu-height) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
#customizationMenu.customization-scroll-ready > .device-preferences-modal-heading {
  flex: 0 0 auto;
}
#customizationMenu.customization-scroll-ready > #customizationSettingsSection {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  align-content: start;
  grid-auto-rows: max-content;
}

@media (max-width: 700px) {
  /* Keep the header attached to the same viewport in every navigation state.
     body.modal-open's legacy overflow:hidden creates a new sticky ancestor,
     sending the header back to its unscrolled position. Lock the root instead. */
  body[data-auth-state="authenticated"][data-mobile-dock-position="top"] {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }
  html:has(> body[data-auth-state="authenticated"][data-mobile-dock-position="top"]:is(.modal-open, .mobile-compose-open, .mobile-compose-closing)) {
    overflow-y: hidden !important;
  }

  .mobile-dock-position-preference:not([hidden]) {
    display: grid !important;
  }

  body[data-auth-state="authenticated"][data-mobile-dock-position="top"] .mobile-dock {
    top: var(--mobile-dock-header-bottom, 0px);
    bottom: auto;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  body[data-mobile-dock-position="top"] .mobile-dock-rail {
    transform-origin: 50% 0%;
  }

  /* Make room below the original header. Its geometry and backing stay intact.
     Reserve the expanded height, so shrinking never shifts the feed. */
  body[data-auth-state="authenticated"][data-mobile-dock-position="top"] #appSection {
    padding-top: var(--mobile-dock-top-space, 72px) !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }

  /* Keep tall dialogs and their close buttons below the top dock. */
  body[data-auth-state="authenticated"][data-mobile-dock-position="top"] :is(.modal-overlay, .dm-overlay, #searchModal, #dmModal) {
    padding-top: calc(var(--mobile-dock-panel-inset, 180px) + 12px) !important;
  }
  body[data-auth-state="authenticated"][data-mobile-dock-position="top"] :is(.modal-overlay, .dm-overlay, #searchModal, #dmModal) > :is(.modal-surface, .dm-modal) {
    max-height: calc(var(--mobile-viewport-height, 100dvh) - var(--mobile-dock-panel-inset, 180px) - max(12px, env(safe-area-inset-bottom)) - 12px) !important;
  }
  body[data-mobile-dock-position="top"] #composerCard:is(.mobile-compose-open, .mobile-compose-closing) {
    top: calc(var(--mobile-viewport-center, 50dvh) + var(--mobile-dock-panel-inset, 180px) / 2) !important;
    max-height: calc(var(--mobile-viewport-height, 100dvh) - var(--mobile-dock-panel-inset, 180px) - 32px) !important;
  }
}

/* V303 — menu/header stability in every mobile dock mode.
   Opening a modal used to apply body.modal-open { overflow:hidden }, which
   turns the body into a new scrolling/sticky containing block on iOS. The
   sticky brand header then snaps back to its unscrolled layout position even
   though the user never moved the page. Keep body geometry untouched and put
   the background-scroll lock on the root viewport instead. This intentionally
   applies to Bottom, Top and Legacy. */
@media (max-width: 700px) {
  body[data-auth-state="authenticated"]:is(.modal-open, .mobile-compose-open, .mobile-compose-closing) {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  html:has(> body[data-auth-state="authenticated"]:is(.modal-open, .mobile-compose-open, .mobile-compose-closing)) {
    overflow-y: hidden !important;
  }
}

/* V305 — don't reserve a blank status row under Dock position. The section
   grows naturally only while a save/error message actually exists. */
#dockPositionMessage:empty {
  display: none !important;
  min-height: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
#dockPositionMessage:not(:empty) {
  min-height: 0 !important;
  height: auto !important;
}