/* Feature layer v716: one authoritative Explore transient lane beside the map gadget. */
html body .app-shell .map-stage.map-focus {
  --map-safe-gadget-size: 84px;
  --map-safe-gadget-gap: 12px;
  --map-safe-edge: clamp(18px, 3vw, 28px);
  --map-safe-bottom: clamp(104px, 12vh, 122px);
}

html body .app-shell .map-stage.map-focus .map-navigation-gadget,
html body main.app-shell section.map-stage.map-focus .map-navigation-gadget {
  right: var(--map-safe-edge) !important;
  bottom: var(--map-safe-bottom) !important;
}

html body .app-shell .map-stage.map-focus :is(
  #memorySaveConfirmation.memory-save-confirmation[data-kind],
  .memory-journey-toast,
  #memoryPeekCard.memory-peek-card,
  #mappiGuideBubble.mappi-guide-bubble,
  #youAreHereMessage.you-are-here-message,
  .chapter-journey-resume-dock:not([hidden])
),
html body main.app-shell section.map-stage.map-focus :is(
  #memorySaveConfirmation.memory-save-confirmation[data-kind],
  .memory-journey-toast,
  #memoryPeekCard.memory-peek-card,
  #mappiGuideBubble.mappi-guide-bubble,
  #youAreHereMessage.you-are-here-message,
  .chapter-journey-resume-dock:not([hidden])
) {
  position: fixed !important;
  top: auto !important;
  right: calc(var(--map-safe-edge) + var(--map-safe-gadget-size) + var(--map-safe-gadget-gap)) !important;
  bottom: var(--map-safe-bottom) !important;
  left: auto !important;
  z-index: 1680 !important;
  box-sizing: border-box !important;
  width: min(420px, calc(100vw - var(--map-safe-gadget-size) - var(--map-safe-gadget-gap) - (2 * var(--map-safe-edge)))) !important;
  max-width: calc(100vw - var(--map-safe-gadget-size) - var(--map-safe-gadget-gap) - (2 * var(--map-safe-edge))) !important;
  min-width: 0 !important;
  max-height: 96px !important;
  margin: 0 !important;
  overflow: hidden !important;
  transform-origin: 100% 100% !important;
}

html body .app-shell .map-stage.map-focus #memorySaveConfirmation.memory-save-confirmation[data-kind] {
  grid-template-columns: 40px minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  min-height: 84px !important;
  padding: 11px 12px !important;
  gap: 3px 10px !important;
  border-radius: 22px !important;
  text-align: left !important;
  translate: none !important;
  transform: translateY(14px) scale(0.985) !important;
}

html body .app-shell .map-stage.map-focus #memorySaveConfirmation.memory-save-confirmation[data-kind].show {
  transform: translateY(0) scale(1) !important;
}

html body .app-shell .map-stage.map-focus #memorySaveConfirmation.memory-save-confirmation[data-kind] > span {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
}

html body .app-shell .map-stage.map-focus #memorySaveConfirmation.memory-save-confirmation[data-kind] strong,
html body .app-shell .map-stage.map-focus #memorySaveConfirmation.memory-save-confirmation[data-kind] small {
  grid-column: 2 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  -webkit-box-orient: vertical !important;
}

html body .app-shell .map-stage.map-focus #memorySaveConfirmation.memory-save-confirmation[data-kind] strong {
  display: -webkit-box !important;
  grid-row: 1 !important;
  font-size: 0.88rem !important;
  line-height: 1.14 !important;
  -webkit-line-clamp: 1 !important;
}

html body .app-shell .map-stage.map-focus #memorySaveConfirmation.memory-save-confirmation[data-kind] small {
  display: -webkit-box !important;
  grid-row: 2 !important;
  font-size: 0.7rem !important;
  line-height: 1.2 !important;
  -webkit-line-clamp: 2 !important;
}

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

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

/* Follow-up confirmations expose one clear action in the compact map lane. */
html body .app-shell .map-stage.map-focus #memorySaveConfirmation.memory-save-confirmation.has-followup .memory-confirmation-view {
  display: none !important;
}

html body .app-shell .map-stage.map-focus :is(.memory-journey-toast, #memoryPeekCard.memory-peek-card) {
  min-height: 84px !important;
  border-radius: 22px !important;
}

html body .app-shell .map-stage.map-focus :is(.memory-journey-copy, .peek-copy) {
  min-width: 0 !important;
}

html body .app-shell .map-stage.map-focus :is(.memory-journey-copy, .peek-copy) :is(strong, small, em) {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body .app-shell .map-stage.map-focus #memoryPeekCard .center-memory-preview-open {
  min-width: 44px !important;
  min-height: 44px !important;
}

/* Global confirmations own the lane; contextual surfaces return afterward. */
html body.global-notice-active .app-shell :is(
  .memory-journey-toast,
  #memoryPeekCard,
  #mappiGuideBubble,
  #youAreHereMessage,
  #locationBanner,
  #mapEmptyState,
  #mapWakeOverlay,
  .chapter-journey-resume-dock
) {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body:has(.memory-journey-toast.show) .app-shell :is(
  #memoryPeekCard,
  #mappiGuideBubble,
  #youAreHereMessage,
  #mapEmptyState
),
html body:has(#memoryPeekCard.show) .app-shell :is(
  #mappiGuideBubble,
  #youAreHereMessage,
  #mapEmptyState
) {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Animate only the marker's inner artwork; MapLibre owns the outer transform. */
html body .app-shell .map-stage.map-focus .is-removing-memory-marker {
  z-index: 1900 !important;
  pointer-events: none !important;
}

html body .app-shell .map-stage.map-focus .is-removing-memory-pin {
  transform-origin: 50% 86% !important;
  animation: mymappi-pin-remove 480ms cubic-bezier(0.3, 0.76, 0.35, 1) both !important;
}

@keyframes mymappi-pin-remove {
  0% {
    opacity: 1;
    filter: saturate(1) blur(0);
    transform: translateY(0) scale(1);
  }
  32% {
    opacity: 1;
    filter: saturate(1.12) blur(0);
    transform: translateY(-5px) scale(1.08);
  }
  100% {
    opacity: 0;
    filter: saturate(0.7) blur(2px);
    transform: translateY(12px) scale(0.28);
  }
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
  html body .app-shell .map-stage.map-focus {
    --map-safe-edge: max(14px, env(safe-area-inset-right));
    --map-safe-bottom: calc(var(--bottom-nav-height, 78px) + env(safe-area-inset-bottom) + 18px);
  }

  html body .app-shell .map-stage.map-focus :is(
    #memorySaveConfirmation.memory-save-confirmation[data-kind],
    .memory-journey-toast,
    #memoryPeekCard.memory-peek-card,
    #mappiGuideBubble.mappi-guide-bubble,
    #youAreHereMessage.you-are-here-message,
    .chapter-journey-resume-dock:not([hidden])
  ) {
    right: calc(max(14px, env(safe-area-inset-right)) + var(--map-safe-gadget-size) + var(--map-safe-gadget-gap)) !important;
    left: max(14px, env(safe-area-inset-left)) !important;
    width: auto !important;
    max-width: none !important;
  }
}

@media (max-width: 420px) {
  html body .app-shell .map-stage.map-focus #memorySaveConfirmation.memory-save-confirmation[data-kind] {
    grid-template-columns: 36px minmax(0, 1fr) auto !important;
    padding: 9px 10px !important;
    gap: 2px 8px !important;
  }

  html body .app-shell .map-stage.map-focus #memorySaveConfirmation.memory-save-confirmation[data-kind] > span {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
  }

  html body .app-shell .map-stage.map-focus #memorySaveConfirmation.memory-save-confirmation[data-kind] small {
    font-size: 0.66rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .app-shell .map-stage.map-focus .is-removing-memory-pin {
    animation: none !important;
    opacity: 0 !important;
  }
}

/*
 * A delete can close a capsule/editor during the same frame that its notice
 * opens. Keep the notice in the map lane from the presentation state captured
 * by JavaScript instead of relying on a transient ancestor class.
 */
html body main.app-shell section.map-stage #memorySaveConfirmation.memory-save-confirmation[data-kind][data-presentation="map-lane"] {
  --map-safe-gadget-size: 84px;
  --map-safe-gadget-gap: 12px;
  --map-safe-edge: clamp(18px, 3vw, 28px);
  --map-safe-bottom: clamp(104px, 12vh, 122px);
  position: fixed !important;
  top: auto !important;
  right: calc(var(--map-safe-edge) + var(--map-safe-gadget-size) + var(--map-safe-gadget-gap)) !important;
  bottom: var(--map-safe-bottom) !important;
  left: auto !important;
  z-index: 1680 !important;
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  width: min(420px, calc(100vw - var(--map-safe-gadget-size) - var(--map-safe-gadget-gap) - (2 * var(--map-safe-edge)))) !important;
  max-width: calc(100vw - var(--map-safe-gadget-size) - var(--map-safe-gadget-gap) - (2 * var(--map-safe-edge))) !important;
  min-width: 0 !important;
  min-height: 84px !important;
  max-height: 96px !important;
  margin: 0 !important;
  padding: 11px 12px !important;
  gap: 3px 10px !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  text-align: left !important;
  translate: none !important;
  transform: translateY(14px) scale(0.985) !important;
  transform-origin: 100% 100% !important;
}

html body main.app-shell section.map-stage #memorySaveConfirmation.memory-save-confirmation[data-kind][data-presentation="map-lane"].show {
  transform: translateY(0) scale(1) !important;
}

html body main.app-shell section.map-stage #memorySaveConfirmation.memory-save-confirmation[data-kind][data-presentation="map-lane"] > span {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
}

html body main.app-shell section.map-stage #memorySaveConfirmation.memory-save-confirmation[data-kind][data-presentation="map-lane"] :is(strong, small) {
  grid-column: 2 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  -webkit-box-orient: vertical !important;
}

html body main.app-shell section.map-stage #memorySaveConfirmation.memory-save-confirmation[data-kind][data-presentation="map-lane"] strong {
  display: -webkit-box !important;
  grid-row: 1 !important;
  font-size: 0.88rem !important;
  line-height: 1.14 !important;
  -webkit-line-clamp: 1 !important;
}

html body main.app-shell section.map-stage #memorySaveConfirmation.memory-save-confirmation[data-kind][data-presentation="map-lane"] small {
  display: -webkit-box !important;
  grid-row: 2 !important;
  font-size: 0.7rem !important;
  line-height: 1.2 !important;
  -webkit-line-clamp: 2 !important;
}

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

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

@media (max-width: 720px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
  html body main.app-shell section.map-stage #memorySaveConfirmation.memory-save-confirmation[data-kind][data-presentation="map-lane"] {
    --map-safe-edge: max(14px, env(safe-area-inset-right));
    --map-safe-bottom: calc(var(--bottom-nav-height, 78px) + env(safe-area-inset-bottom) + 18px);
    right: calc(max(14px, env(safe-area-inset-right)) + var(--map-safe-gadget-size) + var(--map-safe-gadget-gap)) !important;
    left: max(14px, env(safe-area-inset-left)) !important;
    width: auto !important;
    max-width: none !important;
  }
}

@media (max-width: 420px) {
  html body main.app-shell section.map-stage #memorySaveConfirmation.memory-save-confirmation[data-kind][data-presentation="map-lane"] {
    grid-template-columns: 36px minmax(0, 1fr) auto !important;
    padding: 9px 10px !important;
    gap: 2px 8px !important;
  }

  html body main.app-shell section.map-stage #memorySaveConfirmation.memory-save-confirmation[data-kind][data-presentation="map-lane"] > span {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
  }

  html body main.app-shell section.map-stage #memorySaveConfirmation.memory-save-confirmation[data-kind][data-presentation="map-lane"] small {
    font-size: 0.66rem !important;
  }
}