/* Immersive memory gallery + one-at-a-time transient layer contract. */

/* The full gallery is one continuous photo theater, not a stack of cards. */
html body .app-shell .photo-lightbox:not(.video-mode),
html body main.app-shell .photo-lightbox:not(.video-mode) {
  box-sizing: border-box !important;
  display: grid !important;
  width: 100vw !important;
  height: var(--mymappi-visible-height, 100dvh) !important;
  min-height: var(--mymappi-visible-height, 100dvh) !important;
  max-height: var(--mymappi-visible-height, 100dvh) !important;
  padding: 0 !important;
  place-items: stretch !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 22% 8%, rgba(54, 197, 171, 0.16), transparent 34%),
    radial-gradient(circle at 86% 92%, rgba(49, 142, 183, 0.13), transparent 38%),
    linear-gradient(155deg, #03161f, #082c35 56%, #041a24) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overscroll-behavior: none !important;
}

html body .app-shell .photo-lightbox:not(.video-mode) .photo-lightbox-backdrop,
html body main.app-shell .photo-lightbox:not(.video-mode) .photo-lightbox-backdrop {
  background: rgba(2, 15, 22, 0.36) !important;
  backdrop-filter: blur(8px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.05) !important;
}

html body .app-shell .photo-lightbox:not(.video-mode) .photo-lightbox-frame,
html body main.app-shell .photo-lightbox:not(.video-mode) .photo-lightbox-frame {
  position: relative !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  width: 100vw !important;
  height: var(--mymappi-visible-height, 100dvh) !important;
  max-width: none !important;
  max-height: var(--mymappi-visible-height, 100dvh) !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

html body .app-shell .photo-lightbox:not(.video-mode) .photo-lightbox-gallery,
html body main.app-shell .photo-lightbox:not(.video-mode) .photo-lightbox-gallery {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scroll-snap-type: y mandatory !important;
  scroll-padding: 0 !important;
  scrollbar-width: none !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

html body .app-shell .photo-lightbox:not(.video-mode) .photo-lightbox-gallery::-webkit-scrollbar,
html body main.app-shell .photo-lightbox:not(.video-mode) .photo-lightbox-gallery::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

html body .app-shell .photo-lightbox:not(.video-mode) .photo-lightbox-gallery-item,
html body main.app-shell .photo-lightbox:not(.video-mode) .photo-lightbox-gallery-item {
  box-sizing: border-box !important;
  position: relative !important;
  display: grid !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding:
    calc(max(12px, env(safe-area-inset-top)) + 52px)
    max(12px, env(safe-area-inset-right))
    14px
    max(12px, env(safe-area-inset-left)) !important;
  place-items: center !important;
  overflow: hidden !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .app-shell .photo-lightbox:not(.video-mode) .photo-lightbox-gallery-item img,
html body main.app-shell .photo-lightbox:not(.video-mode) .photo-lightbox-gallery-item img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  border: 1px solid rgba(235, 255, 248, 0.14) !important;
  border-radius: clamp(12px, 3vw, 20px) !important;
  background: transparent !important;
  box-shadow: 0 18px 48px rgba(0, 10, 18, 0.24) !important;
}

html body .app-shell .photo-lightbox:not(.video-mode) .photo-lightbox-gallery-count,
html body main.app-shell .photo-lightbox:not(.video-mode) .photo-lightbox-gallery-count {
  position: absolute !important;
  top: calc(max(12px, env(safe-area-inset-top)) + 8px) !important;
  left: max(14px, env(safe-area-inset-left)) !important;
  display: inline-grid !important;
  min-width: 52px !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  place-items: center !important;
  border: 1px solid rgba(239, 255, 250, 0.22) !important;
  border-radius: 999px !important;
  color: rgba(248, 255, 252, 0.92) !important;
  font-size: 0.75rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.02em !important;
  background: rgba(4, 31, 40, 0.66) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
}

html body .app-shell .photo-lightbox:not(.video-mode) .photo-lightbox-gallery[data-photo-count="1"] .photo-lightbox-gallery-count,
html body main.app-shell .photo-lightbox:not(.video-mode) .photo-lightbox-gallery[data-photo-count="1"] .photo-lightbox-gallery-count {
  display: none !important;
}

html body .app-shell .photo-lightbox:not(.video-mode) .photo-lightbox-close,
html body main.app-shell .photo-lightbox:not(.video-mode) .photo-lightbox-close {
  position: absolute !important;
  top: calc(max(12px, env(safe-area-inset-top)) + 4px) !important;
  right: max(14px, env(safe-area-inset-right)) !important;
  left: auto !important;
  z-index: 12 !important;
  display: grid !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 0 2px !important;
  place-items: center !important;
  border: 1px solid rgba(239, 255, 250, 0.24) !important;
  border-radius: 50% !important;
  color: #f7fffb !important;
  font-size: 1.35rem !important;
  font-weight: 520 !important;
  line-height: 1 !important;
  background: rgba(4, 31, 40, 0.68) !important;
  box-shadow: 0 5px 16px rgba(0, 9, 16, 0.15) !important;
  backdrop-filter: blur(14px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
  -webkit-tap-highlight-color: transparent !important;
}

html body .app-shell .photo-lightbox:not(.video-mode) .photo-lightbox-close:focus-visible,
html body main.app-shell .photo-lightbox:not(.video-mode) .photo-lightbox-close:focus-visible {
  outline: 2px solid rgba(239, 255, 250, 0.94) !important;
  outline-offset: 2px !important;
}

html body .app-shell .photo-lightbox:not(.video-mode) #photoLightboxCaption,
html body main.app-shell .photo-lightbox:not(.video-mode) #photoLightboxCaption {
  box-sizing: border-box !important;
  z-index: 8 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: calc(58px + env(safe-area-inset-bottom)) !important;
  margin: 0 !important;
  padding: 13px max(18px, env(safe-area-inset-right)) calc(13px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)) !important;
  overflow: hidden !important;
  border-top: 1px solid rgba(231, 255, 247, 0.1) !important;
  color: rgba(245, 255, 251, 0.86) !important;
  background: linear-gradient(180deg, rgba(5, 31, 40, 0.74), rgba(3, 21, 29, 0.94)) !important;
  font-size: 0.82rem !important;
  font-weight: 720 !important;
  line-height: 1.35 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  text-shadow: none !important;
  white-space: normal !important;
}

/* Remove the inherited decorative halo from the capsule X. */
html body .app-shell .memory-sheet-card.full-memory-capsule
  .sheet-close-button.sheet-mappi-close.memory-capsule-close,
html body main.app-shell .memory-sheet-card.full-memory-capsule
  .sheet-close-button.sheet-mappi-close.memory-capsule-close {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: static !important;
  inset: auto !important;
  flex: 0 0 auto !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  color: #ffffff !important;
  background: rgba(3, 31, 40, 0.46) !important;
  box-shadow: 0 4px 12px rgba(2, 21, 29, 0.14) !important;
  -webkit-tap-highlight-color: transparent !important;
}

html body .app-shell .memory-sheet-card.full-memory-capsule
  .sheet-close-button.sheet-mappi-close.memory-capsule-close::before,
html body .app-shell .memory-sheet-card.full-memory-capsule
  .sheet-close-button.sheet-mappi-close.memory-capsule-close::after,
html body main.app-shell .memory-sheet-card.full-memory-capsule
  .sheet-close-button.sheet-mappi-close.memory-capsule-close::before,
html body main.app-shell .memory-sheet-card.full-memory-capsule
  .sheet-close-button.sheet-mappi-close.memory-capsule-close::after {
  display: none !important;
  content: none !important;
}

@media (hover: hover) {
  html body .app-shell .memory-sheet-card.full-memory-capsule
    .sheet-close-button.sheet-mappi-close.memory-capsule-close:hover,
  html body main.app-shell .memory-sheet-card.full-memory-capsule
    .sheet-close-button.sheet-mappi-close.memory-capsule-close:hover {
    background: rgba(3, 31, 40, 0.58) !important;
    box-shadow: 0 5px 14px rgba(2, 21, 29, 0.16) !important;
  }
}

html body .app-shell .memory-sheet-card.full-memory-capsule
  .sheet-close-button.sheet-mappi-close.memory-capsule-close:focus-visible,
html body main.app-shell .memory-sheet-card.full-memory-capsule
  .sheet-close-button.sheet-mappi-close.memory-capsule-close:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.92) !important;
  outline-offset: 2px !important;
  box-shadow: 0 5px 14px rgba(2, 21, 29, 0.16) !important;
}

/* Editor failures stay in the editor flow instead of floating over controls. */
html body .app-shell .memory-editor .memory-editor-inline-notice,
html body main.app-shell .memory-editor .memory-editor-inline-notice {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 0 12px !important;
  padding: 10px 12px !important;
  gap: 10px !important;
  border: 1px solid rgba(194, 91, 77, 0.18) !important;
  border-radius: 16px !important;
  color: #743832 !important;
  background: linear-gradient(135deg, #fff6f1, #fffaf7) !important;
  box-shadow: none !important;
}

html body .app-shell .memory-editor .memory-editor-inline-notice[hidden],
html body main.app-shell .memory-editor .memory-editor-inline-notice[hidden] {
  display: none !important;
}

html body .app-shell .memory-editor .memory-editor-inline-notice > span:first-child,
html body main.app-shell .memory-editor .memory-editor-inline-notice > span:first-child {
  display: grid !important;
  width: 34px !important;
  height: 34px !important;
  place-items: center !important;
  border-radius: 12px !important;
  color: #a9463d !important;
  background: rgba(196, 78, 65, 0.1) !important;
}

html body .app-shell .memory-editor .memory-editor-inline-notice.is-info,
html body main.app-shell .memory-editor .memory-editor-inline-notice.is-info {
  border-color: rgba(29, 126, 128, 0.16) !important;
  color: #174f58 !important;
  background: linear-gradient(135deg, #f1fbf8, #f5fcfb) !important;
}

html body .app-shell .memory-editor .memory-editor-inline-notice.is-info > span:first-child,
html body main.app-shell .memory-editor .memory-editor-inline-notice.is-info > span:first-child {
  color: #157e7d !important;
  background: rgba(31, 144, 134, 0.1) !important;
}

html body .app-shell .memory-editor .memory-editor-inline-notice strong,
html body .app-shell .memory-editor .memory-editor-inline-notice small,
html body main.app-shell .memory-editor .memory-editor-inline-notice strong,
html body main.app-shell .memory-editor .memory-editor-inline-notice small {
  display: block !important;
}

html body .app-shell .memory-editor .memory-editor-inline-notice strong,
html body main.app-shell .memory-editor .memory-editor-inline-notice strong {
  font-size: 0.85rem !important;
  font-weight: 880 !important;
  line-height: 1.2 !important;
}

html body .app-shell .memory-editor .memory-editor-inline-notice small,
html body main.app-shell .memory-editor .memory-editor-inline-notice small {
  margin-top: 3px !important;
  color: #7f5b55 !important;
  font-size: 0.74rem !important;
  font-weight: 620 !important;
  line-height: 1.3 !important;
}

/* Capsule feedback and its More menu never compete for the same dock space. */
html body .app-shell .full-memory-capsule .memory-capsule-heart-confirmation.is-error,
html body main.app-shell .full-memory-capsule .memory-capsule-heart-confirmation.is-error {
  color: #fff7f3 !important;
  background: rgba(92, 35, 32, 0.94) !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-more:has(.memory-capsule-more-menu:not([hidden]))
  ~ .memory-capsule-heart-confirmation,
html body main.app-shell .full-memory-capsule .memory-capsule-more:has(.memory-capsule-more-menu:not([hidden]))
  ~ .memory-capsule-heart-confirmation {
  visibility: hidden !important;
  opacity: 0 !important;
}

/* The global notice owns one centered lane above navigation. */
html body .app-shell .memory-save-confirmation,
html body main.app-shell section.map-stage .memory-save-confirmation {
  position: fixed !important;
  top: auto !important;
  right: auto !important;
  bottom: calc(var(--bottom-nav-height, 78px) + env(safe-area-inset-bottom) + 14px) !important;
  left: 50% !important;
  z-index: 1700 !important;
  width: min(420px, calc(100vw - 28px)) !important;
  max-width: calc(100vw - 28px) !important;
  transform: translate(-50%, 16px) scale(0.985) !important;
  transform-origin: 50% 100% !important;
}

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

/* Blocking surfaces temporarily own the screen; transients wait off-canvas. */
html body.photo-lightbox-open .app-shell :is(
  .memory-save-confirmation,
  .memory-journey-toast,
  .mappi-guide-bubble,
  .you-are-here-message,
  .memory-peek-card,
  .location-banner
),
html body.first-time-onboarding-open .app-shell :is(
  .memory-save-confirmation,
  .memory-journey-toast,
  .mappi-guide-bubble,
  .you-are-here-message,
  .memory-peek-card,
  .location-banner
),
html body:has(dialog[open]) .app-shell :is(
  .memory-save-confirmation,
  .memory-journey-toast,
  .mappi-guide-bubble,
  .you-are-here-message,
  .memory-peek-card,
  .location-banner
),
html body:has(.memory-bottom-sheet.open) .app-shell :is(
  .memory-save-confirmation,
  .memory-journey-toast,
  .mappi-guide-bubble,
  .you-are-here-message,
  .memory-peek-card,
  .location-banner
),
html body:has(.memory-editor.open) .app-shell :is(
  .memory-save-confirmation,
  .memory-journey-toast,
  .mappi-guide-bubble,
  .you-are-here-message,
  .memory-peek-card,
  .location-banner
),
html body:has(.notification-hub.open) .app-shell :is(
  .memory-save-confirmation,
  .memory-journey-toast,
  .mappi-guide-bubble,
  .you-are-here-message,
  .memory-peek-card,
  .location-banner
),
html body:has(.category-menu.open) .app-shell :is(
  .memory-save-confirmation,
  .memory-journey-toast,
  .mappi-guide-bubble,
  .you-are-here-message,
  .memory-peek-card,
  .location-banner
),
html body:has(.account-menu.open) .app-shell :is(
  .memory-save-confirmation,
  .memory-journey-toast,
  .mappi-guide-bubble,
  .you-are-here-message,
  .memory-peek-card,
  .location-banner
),
html body:has(.pin-search-panel.open) .app-shell :is(
  .memory-save-confirmation,
  .memory-journey-toast,
  .mappi-guide-bubble,
  .you-are-here-message,
  .memory-peek-card,
  .location-banner
),
html body:has(.directions-panel.open) .app-shell :is(
  .memory-save-confirmation,
  .memory-journey-toast,
  .mappi-guide-bubble,
  .you-are-here-message,
  .memory-peek-card,
  .location-banner
),
html body:has(.map-wake-overlay.is-visible) .app-shell :is(
  .memory-save-confirmation,
  .memory-journey-toast,
  .mappi-guide-bubble,
  .you-are-here-message,
  .memory-peek-card,
  .location-banner
) {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Keep the useful chapter count, but let the story title remain dominant. */
html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-count-badge,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-count-badge {
  min-height: 25px !important;
  padding: 5px 8px !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: rgba(3, 31, 42, 0.5) !important;
  box-shadow: none !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-count-badge strong,
html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-count-badge small,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-count-badge strong,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-count-badge small {
  font-size: 0.63rem !important;
  font-weight: 760 !important;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
  html body .app-shell .photo-lightbox:not(.video-mode) .photo-lightbox-gallery-item,
  html body main.app-shell .photo-lightbox:not(.video-mode) .photo-lightbox-gallery-item {
    padding-right: max(8px, env(safe-area-inset-right)) !important;
    padding-bottom: 10px !important;
    padding-left: max(8px, env(safe-area-inset-left)) !important;
  }

  html body .app-shell .photo-lightbox:not(.video-mode) #photoLightboxCaption,
  html body main.app-shell .photo-lightbox:not(.video-mode) #photoLightboxCaption {
    min-height: calc(54px + env(safe-area-inset-bottom)) !important;
    padding-top: 11px !important;
    padding-bottom: calc(11px + env(safe-area-inset-bottom)) !important;
    font-size: 0.78rem !important;
  }

  html body .app-shell .memory-editor .memory-editor-inline-notice,
  html body main.app-shell .memory-editor .memory-editor-inline-notice {
    position: relative !important;
    z-index: 2 !important;
    margin: 0 0 10px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .app-shell .photo-lightbox,
  html body .app-shell .photo-lightbox-frame,
  html body .app-shell .photo-lightbox-gallery,
  html body .app-shell .memory-save-confirmation {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}