/* Build 739 v2: every save/update confirmation belongs in the established
   Explore notice lane beside the navigation gadget, including the first
   memory milestone. */
html:not(#save-gadget-lane-a):not(#save-gadget-lane-b):not(#save-gadget-lane-c) body main.app-shell section.map-stage.map-focus #memorySaveConfirmation.memory-save-confirmation[data-kind][data-presentation="map-lane"]:is([data-variant="standard"], [data-variant="first-memory"]) {
  position: absolute !important;
  top: auto !important;
  right: calc(
    var(--map-notice-edge, var(--map-safe-edge, clamp(18px, 3vw, 28px))) +
    var(--map-notice-gadget-size, var(--map-safe-gadget-size, 88px)) +
    var(--map-notice-gadget-gap, var(--map-safe-gadget-gap, 12px))
  ) !important;
  bottom: var(--map-notice-bottom, var(--map-safe-bottom, clamp(104px, 12vh, 122px))) !important;
  left: auto !important;
  width: min(
    420px,
    calc(
      100% -
      var(--map-notice-gadget-size, var(--map-safe-gadget-size, 88px)) -
      var(--map-notice-gadget-gap, var(--map-safe-gadget-gap, 12px)) -
      (2 * var(--map-notice-edge, var(--map-safe-edge, clamp(18px, 3vw, 28px))))
    )
  ) !important;
  max-width: calc(
    100% -
    var(--map-notice-gadget-size, var(--map-safe-gadget-size, 88px)) -
    var(--map-notice-gadget-gap, var(--map-safe-gadget-gap, 12px)) -
    (2 * var(--map-notice-edge, var(--map-safe-edge, clamp(18px, 3vw, 28px))))
  ) !important;
  min-width: 0 !important;
  margin: 0 !important;
  translate: none !important;
  transform: translateY(12px) scale(0.985) !important;
  transform-origin: 100% 100% !important;
}

html:not(#save-gadget-lane-a):not(#save-gadget-lane-b):not(#save-gadget-lane-c) body main.app-shell section.map-stage.map-focus #memorySaveConfirmation.memory-save-confirmation[data-kind][data-presentation="map-lane"]:is([data-variant="standard"], [data-variant="first-memory"]).show {
  transform: translateY(0) scale(1) !important;
}

/* Native phone chrome can shift the visual viewport independently. Reuse the
   same viewport-safe side lane as the other Explore notices. */
@media (hover: none) and (pointer: coarse), (max-width: 520px) {
  html:not(#save-gadget-lane-a):not(#save-gadget-lane-b):not(#save-gadget-lane-c) body main.app-shell section.map-stage.map-focus #memorySaveConfirmation.memory-save-confirmation[data-kind][data-presentation="map-lane"]:is([data-variant="standard"], [data-variant="first-memory"]) {
    position: fixed !important;
    right: calc(
      100vw -
      var(--mymappi-visual-offset-left, 0px) -
      var(--mymappi-visible-width, 100vw) +
      max(14px, env(safe-area-inset-right, 0px)) +
      var(--map-notice-gadget-size, var(--map-safe-gadget-size, 88px)) +
      var(--map-notice-gadget-gap, var(--map-safe-gadget-gap, 12px))
    ) !important;
    bottom: var(
      --map-notice-bottom,
      calc(var(--bottom-nav-height, 78px) + env(safe-area-inset-bottom, 0px) + 18px)
    ) !important;
    left: auto !important;
    width: min(
      420px,
      calc(
        var(--mymappi-visible-width, 100vw) -
        var(--map-notice-gadget-size, var(--map-safe-gadget-size, 88px)) -
        var(--map-notice-gadget-gap, var(--map-safe-gadget-gap, 12px)) -
        max(14px, env(safe-area-inset-left, 0px)) -
        max(14px, env(safe-area-inset-right, 0px))
      )
    ) !important;
    max-width: calc(
      var(--mymappi-visible-width, 100vw) -
      var(--map-notice-gadget-size, var(--map-safe-gadget-size, 88px)) -
      var(--map-notice-gadget-gap, var(--map-safe-gadget-gap, 12px)) -
      max(14px, env(safe-area-inset-left, 0px)) -
      max(14px, env(safe-area-inset-right, 0px))
    ) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body main.app-shell section.map-stage.map-focus #memorySaveConfirmation.memory-save-confirmation[data-presentation="map-lane"]:is([data-variant="standard"], [data-variant="first-memory"]) {
    transition: none !important;
  }
}
