/* Keep the planner inside the visible viewport, including Android browser UI. */
.planner-page {
  --planner-safe-top: env(safe-area-inset-top, 0px);
  --planner-safe-right: env(safe-area-inset-right, 0px);
  --planner-safe-bottom: env(safe-area-max-inset-bottom, env(safe-area-inset-bottom, 0px));
  --planner-safe-left: env(safe-area-inset-left, 0px);
  box-sizing: border-box;
  min-height: 0;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  padding: var(--planner-safe-top) var(--planner-safe-right) var(--planner-safe-bottom) var(--planner-safe-left);
  overflow: hidden;
  overscroll-behavior: none;
}
.planner-page .app-shell { min-height: 0; min-width: 0; }
.planner-page .planner-controls { scroll-padding: 14px; }
.planner-page .trip-navigation { max-height: calc(100% - 32px); overflow-y: auto; overscroll-behavior: contain; }

/* Native dialogs live outside the padded app shell, so give them their own safe bounds. */
.planner-page :is(.flight-alert-dialog, .replace-trip-dialog) {
  inset: var(--planner-safe-top) var(--planner-safe-right) var(--planner-safe-bottom) var(--planner-safe-left);
  max-width: calc(100vw - var(--planner-safe-left) - var(--planner-safe-right) - 24px);
  max-height: calc(100vh - var(--planner-safe-top) - var(--planner-safe-bottom) - 24px);
  max-height: calc(100dvh - var(--planner-safe-top) - var(--planner-safe-bottom) - 24px);
  margin: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.planner-page .flight-alert-dialog { padding: 0; }
.planner-page .flight-alert-dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
.planner-page .flight-alert-body { flex: 1 1 auto; min-height: 0; padding: 24px; overflow-y: auto; overscroll-behavior: contain; scroll-padding: 12px; }
.planner-page .flight-alert-dialog .flight-alert-actions { position: static; flex: 0 0 auto; margin: 0; padding: 16px 24px 24px; }
@media (max-width: 400px) {
  .planner-page .flight-alert-body { padding: 18px; }
  .planner-page .flight-alert-dialog .flight-alert-actions { margin: 0; padding: 14px 18px 18px; }
}
.planner-page .mobile-menu {
  inset: var(--planner-safe-top) var(--planner-safe-right) var(--planner-safe-bottom) var(--planner-safe-left);
  width: auto;
  height: auto;
  max-height: calc(100vh - var(--planner-safe-top) - var(--planner-safe-bottom));
  max-height: calc(100dvh - var(--planner-safe-top) - var(--planner-safe-bottom));
  overscroll-behavior: contain;
}
@media (max-width: 860px) {
  .planner-page .control-panel, .planner-page.sheet-collapsed .control-panel {
    bottom: 12px;
    max-height: min(62dvh, 480px, calc(100% - 24px));
  }
  .planner-page .control-panel.is-collapsed { max-height: 44px; }
  .planner-page .trip-navigation { max-height: calc(100% - 148px); }
}
/* A keyboard or landscape screen can leave too little room for pinned panel actions. */
@media (max-width: 860px) and (max-height: 540px) {
  .planner-page .planner-header { min-height: 56px; padding: 4px 0; }
  .planner-page .planner-header .brand-logo { width: 40px; height: 40px; }
  .planner-page .planner-header :is(.mobile-menu-trigger, .theme-control[data-theme-control]) { top: 50%; }
  .planner-page .planner-drawer { max-height: calc(100% - 64px); }
  .planner-page .trip-navigation { bottom: 12px; max-height: calc(100% - 24px); }
  .planner-page .flight-watch { bottom: clamp(12px, calc(100% - 54px), 72px); }
  .planner-page .map-stage:has(.planner-drawer:not([hidden]):not(.is-collapsed)) .flight-watch { display: none; }
  .planner-page:has(.trip-navigation:not([hidden])).sheet-collapsed .control-panel,
  .planner-page .map-stage:has(.trip-navigation:not([hidden])) :is(.flight-watch, .planner-drawer.is-collapsed) { display: none; }
  .planner-page .drawer-content { overflow-y: auto; overscroll-behavior: contain; }
  .planner-page .planner-drawer :is(.results-panel, .trip-builder-panel) { flex: 0 0 auto; overflow: visible; }
  .planner-page .planner-drawer :is(.results-list, .trip-content) { flex: 0 0 auto; overflow: visible; }
}

@media (max-width: 400px) and (max-height: 540px) {
  .planner-page .flight-alert-dialog .flight-alert-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px 12px 12px;
  }
  .planner-page .flight-alert-actions button { min-width: 0; padding: 8px; font-size: 13px; }
  .planner-page .flight-alert-actions [data-alert-skip] { grid-column: 1 / -1; }
}