/*
 * Local responsive safety audit.
 * This final cascade layer protects the newer trip surfaces from late CSS
 * overrides that can otherwise reintroduce iOS focus zoom or let a keyboard
 * pan a dialog outside the visible viewport.
 */

/* The trip styles load after the global Safari guard and set 0.8rem inputs.
   Restore a true 16px floor on phones and touch tablets. */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  /*
   * This is intentionally broader than the older release guard. Several
   * feature styles load late and use inherited sub-16px typography, which
   * lets iPhone Safari magnify the whole app when a field receives focus.
   * Keep every genuinely editable control at Safari's safe floor while
   * leaving toggles, sliders, file pickers, and action buttons unchanged.
   */
  html body :is(
    input:not([type]),
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    select,
    textarea,
    [contenteditable="true"]
  ) {
    font-size: 16px !important;
  }

  html body .active-trip-fields :is(input, select, textarea),
  html body .app-shell #memoryForm.memory-editor :is(
    input:not([type]),
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    select,
    textarea,
    [contenteditable="true"]
  ),
  html body .app-shell .trip-import-step :is(input[type="text"], input[type="date"], textarea),
  html body .app-shell #pinSearchPanel :is(input, select) {
    font-size: 16px !important;
  }
}

/* Keep trip creation and past-trip import inside Safari's visible viewport
   while the keyboard is open. The body variables are maintained by the same
   visualViewport controller already used by Capture this moment. */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 1366px) {
  html body.keyboard-open .active-trip-dialog[open],
  html body.keyboard-open .app-shell .trip-import-dialog[open] {
    position: fixed !important;
    top: max(8px, env(safe-area-inset-top, 0px)) !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    bottom: auto !important;
    left: max(8px, env(safe-area-inset-left, 0px)) !important;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    height: calc(
      var(--mymappi-visible-height, 100dvh) -
      max(16px, env(safe-area-inset-top, 0px)) -
      max(8px, env(safe-area-inset-bottom, 0px))
    ) !important;
    min-height: 0 !important;
    max-height: calc(
      var(--mymappi-visible-height, 100dvh) -
      max(16px, env(safe-area-inset-top, 0px)) -
      max(8px, env(safe-area-inset-bottom, 0px))
    ) !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    transform: translate3d(0, var(--mymappi-visual-offset-top, 0px), 0) !important;
    translate: none !important;
  }

  html body.keyboard-open .active-trip-dialog[open] .active-trip-panel,
  html body.keyboard-open .app-shell .trip-import-dialog[open] .trip-import-panel {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
  }

  html body.keyboard-open .active-trip-dialog[open] .active-trip-body,
  html body.keyboard-open .app-shell .trip-import-dialog[open] .trip-import-body {
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scroll-padding-block: 24px !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: auto !important;
  }

  html body.keyboard-open .app-shell #pinSearchPanel.pin-search-panel.open,
  html body.keyboard-open main.app-shell section.map-stage #pinSearchPanel.pin-search-panel.open {
    max-height: calc(
      var(--mymappi-visible-height, 100dvh) -
      max(80px, env(safe-area-inset-top, 0px)) -
      max(8px, env(safe-area-inset-bottom, 0px))
    ) !important;
    transform: translate3d(0, var(--mymappi-visual-offset-top, 0px), 0) !important;
    translate: none !important;
  }

  html body.keyboard-open .app-shell #pinSearchPanel .pin-search-results,
  html body.keyboard-open main.app-shell section.map-stage #pinSearchPanel .pin-search-results {
    min-height: 0 !important;
  }
}

/* A modal owns the entire interaction lane. This also prevents the Explore
   depth switch or gadget from visually competing with the import close button. */
html body:has(.trip-import-dialog[open]) .app-shell :is(
  .map-depth-switch,
  .map-navigation-gadget,
  .active-trip-bar,
  .memory-peek-card
) {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Keep compact trip controls readable without growing their established
   footprint or disturbing the Life Chapters card rhythm. */
html body .app-shell #homeJourney .life-chapter-trip-start {
  font-size: 0.76rem !important;
}

html body .app-shell #homeJourney .life-chapter-trip-end {
  font-size: 0.68rem !important;
}

html body .app-shell section.map-stage.map-focus #mapEmptyState.is-visible.is-active-trip-empty > :is(strong, span),
html body main.app-shell section.map-stage.map-focus #mapEmptyState.is-visible.is-active-trip-empty > :is(strong, span) {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

/*
 * One visual-viewport-safe lane for global confirmations. Using the live
 * width and horizontal offset keeps the notice inside the actual phone
 * screen even if Safari is still finishing a focus-zoom animation.
 */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
  html body .app-shell section.map-stage #memorySaveConfirmation.memory-save-confirmation[data-kind],
  html body main.app-shell section.map-stage #memorySaveConfirmation.memory-save-confirmation[data-kind] {
    top: auto !important;
    right: auto !important;
    bottom: calc(var(--bottom-nav-height, 78px) + env(safe-area-inset-bottom, 0px) + 132px) !important;
    left: calc(
      var(--mymappi-visual-offset-left, 0px) +
      (var(--mymappi-visible-width, 100vw) / 2)
    ) !important;
    box-sizing: border-box !important;
    grid-template-columns: 40px minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    width: min(390px, calc(var(--mymappi-visible-width, 100vw) - 28px)) !important;
    min-width: 0 !important;
    max-width: calc(var(--mymappi-visible-width, 100vw) - 28px) !important;
    min-height: 78px !important;
    max-height: 112px !important;
    padding: 12px 13px !important;
    gap: 3px 10px !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    translate: none !important;
    transform: translate(-50%, 16px) scale(0.985) !important;
    transform-origin: 50% 100% !important;
  }

  html body .app-shell section.map-stage #memorySaveConfirmation.memory-save-confirmation[data-kind].show,
  html body main.app-shell section.map-stage #memorySaveConfirmation.memory-save-confirmation[data-kind].show {
    transform: translate(-50%, 0) scale(1) !important;
  }

  html body .app-shell section.map-stage #memorySaveConfirmation.memory-save-confirmation[data-kind] strong,
  html body main.app-shell section.map-stage #memorySaveConfirmation.memory-save-confirmation[data-kind] strong {
    display: -webkit-box !important;
    overflow: hidden !important;
    font-size: 0.9rem !important;
    line-height: 1.16 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  html body .app-shell section.map-stage #memorySaveConfirmation.memory-save-confirmation[data-kind] small,
  html body main.app-shell section.map-stage #memorySaveConfirmation.memory-save-confirmation[data-kind] small {
    display: -webkit-box !important;
    overflow: hidden !important;
    font-size: 0.72rem !important;
    line-height: 1.24 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  html body .app-shell section.map-stage #memorySaveConfirmation.memory-save-confirmation[data-kind] .memory-confirmation-status,
  html body main.app-shell section.map-stage #memorySaveConfirmation.memory-save-confirmation[data-kind] .memory-confirmation-status {
    display: none !important;
  }

  html body .app-shell section.map-stage #memorySaveConfirmation.memory-save-confirmation[data-kind] :is(.memory-confirmation-view, .memory-confirmation-undo),
  html body main.app-shell section.map-stage #memorySaveConfirmation.memory-save-confirmation[data-kind] :is(.memory-confirmation-view, .memory-confirmation-undo) {
    grid-column: 3 !important;
    grid-row: 1 / span 2 !important;
    align-self: center !important;
    justify-self: end !important;
    min-width: 58px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 9px 12px !important;
  }

  html body.global-notice-active .app-shell :is(
    .memory-journey-toast,
    .mappi-guide-bubble,
    .you-are-here-message,
    .memory-peek-card,
    .map-empty-state
  ) {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

@media (max-width: 360px) {
  html body .app-shell #homeJourney .life-chapter-trip-end {
    font-size: 0.64rem !important;
  }

  html body .app-shell section.map-stage.map-focus #mapEmptyState.is-visible.is-active-trip-empty > span,
  html body main.app-shell section.map-stage.map-focus #mapEmptyState.is-visible.is-active-trip-empty > span {
    font-size: 0.62rem !important;
  }

  html body .app-shell section.map-stage #memorySaveConfirmation.memory-save-confirmation[data-kind],
  html body main.app-shell section.map-stage #memorySaveConfirmation.memory-save-confirmation[data-kind] {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    max-height: 144px !important;
  }

  html body .app-shell section.map-stage #memorySaveConfirmation.memory-save-confirmation[data-kind] :is(.memory-confirmation-view, .memory-confirmation-undo),
  html body main.app-shell section.map-stage #memorySaveConfirmation.memory-save-confirmation[data-kind] :is(.memory-confirmation-view, .memory-confirmation-undo) {
    grid-column: 2 !important;
    grid-row: 3 !important;
    justify-self: start !important;
    margin-top: 5px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.keyboard-open .active-trip-dialog[open],
  html body.keyboard-open .app-shell .trip-import-dialog[open],
  html body.keyboard-open .app-shell #pinSearchPanel.pin-search-panel.open {
    transition: none !important;
  }
}