/* Build 663: one intentional lane for global action confirmations.
   Contextual map cards keep their own gadget-safe lanes; save, update, delete,
   restore, and error notices always sit centered above navigation. */

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] {
  position: fixed !important;
  top: auto !important;
  right: auto !important;
  bottom: calc(var(--bottom-nav-height, 78px) + env(safe-area-inset-bottom) + 42px) !important;
  left: 50% !important;
  z-index: 1700 !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto auto !important;
  box-sizing: border-box !important;
  width: min(420px, calc(100vw - 28px - env(safe-area-inset-left) - env(safe-area-inset-right))) !important;
  max-width: calc(100vw - 28px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 78px !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 13px 14px !important;
  gap: 3px 12px !important;
  align-items: center !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  text-align: left !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;
}

/* A confirmation temporarily owns the transient lane. Persistent map context
   returns automatically after the confirmation leaves, without stacking. */
html body:has(#memorySaveConfirmation.memory-save-confirmation[data-kind].show) .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;
}

html body .app-shell section.map-stage #memorySaveConfirmation.memory-save-confirmation[data-kind] > span,
html body main.app-shell section.map-stage #memorySaveConfirmation.memory-save-confirmation[data-kind] > span {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !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 {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  overflow: visible !important;
  line-height: 1.16 !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !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: block !important;
  grid-column: 2 !important;
  grid-row: 2 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
  line-height: 1.3 !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  -webkit-line-clamp: unset !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 {
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: end !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;
  align-self: center !important;
  justify-self: end !important;
  box-sizing: border-box !important;
  min-width: 58px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 9px 12px !important;
}

html body .app-shell section.map-stage #memorySaveConfirmation.memory-save-confirmation[data-kind] .memory-confirmation-view,
html body main.app-shell section.map-stage #memorySaveConfirmation.memory-save-confirmation[data-kind] .memory-confirmation-view {
  grid-row: 2 !important;
}

html body .app-shell section.map-stage #memorySaveConfirmation.memory-save-confirmation[data-kind] .memory-confirmation-undo,
html body main.app-shell section.map-stage #memorySaveConfirmation.memory-save-confirmation[data-kind] .memory-confirmation-undo {
  grid-row: 1 / span 2 !important;
}

/* Phones and touch-first tablets use the same centered lane. Raising it above
   the map gadget also places it directly above the primary + action. */
@media (max-width: 720px), (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] {
    right: auto !important;
    bottom: calc(var(--bottom-nav-height, 78px) + env(safe-area-inset-bottom) + 132px) !important;
    left: 50% !important;
    grid-template-columns: 40px minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto !important;
    width: min(390px, calc(100vw - 28px - env(safe-area-inset-left) - env(safe-area-inset-right))) !important;
    max-width: calc(100vw - 28px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
    height: auto !important;
    min-height: 78px !important;
    max-height: none !important;
    padding: 12px 13px !important;
    gap: 3px 10px !important;
    overflow: hidden !important;
    border-radius: 22px !important;
  }

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

/* At the narrowest supported width, actions move beneath the copy instead of
   squeezing or clipping the message. */
@media (max-width: 360px) {
  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;
  }

  html body .app-shell section.map-stage #memorySaveConfirmation.memory-save-confirmation[data-kind] > span,
  html body main.app-shell section.map-stage #memorySaveConfirmation.memory-save-confirmation[data-kind] > span {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !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,
  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;
    justify-self: start !important;
    margin-top: 7px !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,
  html body .app-shell section.map-stage #memorySaveConfirmation.memory-save-confirmation[data-kind] .memory-confirmation-undo,
  html body main.app-shell section.map-stage #memorySaveConfirmation.memory-save-confirmation[data-kind] .memory-confirmation-undo {
    grid-row: 3 !important;
  }

  html body .app-shell section.map-stage #memorySaveConfirmation.memory-save-confirmation[data-kind] .memory-confirmation-view,
  html body main.app-shell section.map-stage #memorySaveConfirmation.memory-save-confirmation[data-kind] .memory-confirmation-view {
    grid-row: 4 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  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] {
    transition: none !important;
  }
}