/* MyMappi v698 — Monthly Recap story and cross-device video guidance */

html body .app-shell #monthlyRecapDialog.monthly-recap-dialog {
  width: min(560px, calc(100vw - 28px)) !important;
  max-width: 560px !important;
  height: min(780px, calc(100dvh - 34px)) !important;
  max-height: min(780px, calc(100dvh - 34px)) !important;
  overflow: hidden !important;
  border-radius: 30px !important;
  box-shadow: 0 42px 110px rgba(0, 24, 32, 0.42) !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-panel {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  padding: 16px !important;
  padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  gap: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(213, 255, 244, 0.22) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 12% -8%, rgba(68, 212, 178, 0.2), transparent 34%),
    linear-gradient(165deg, #063c47, #052c38 58%, #031f2a) !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-close {
  position: absolute !important;
  top: 27px !important;
  right: 25px !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  z-index: 12 !important;
  color: #f4fffb !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: rgba(3, 35, 43, 0.48) !important;
  box-shadow: 0 8px 22px rgba(0, 20, 27, 0.2) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-progress {
  position: relative !important;
  z-index: 10 !important;
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(10px, 1fr) !important;
  height: 4px !important;
  margin: 2px 58px 0 2px !important;
  gap: 5px !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-progress i {
  display: block !important;
  height: 4px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: rgba(224, 255, 247, 0.18) !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-progress i::after {
  display: block !important;
  width: 0 !important;
  height: 100% !important;
  content: "" !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #7ee3c6, #f5ca78) !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-progress i.is-complete::after,
html body .app-shell #monthlyRecapDialog .monthly-recap-progress i.is-current::after {
  width: 100% !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-story {
  position: relative !important;
  display: grid !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(225, 255, 248, 0.14) !important;
  border-radius: 24px !important;
  outline: none !important;
  background: #073c46 !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 22px 48px rgba(0, 22, 29, 0.24) !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-story:focus-visible {
  outline: 3px solid rgba(115, 235, 202, 0.4) !important;
  outline-offset: 3px !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-slide {
  position: relative !important;
  display: grid !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  color: #f7fffc !important;
  background:
    radial-gradient(circle at 82% 12%, rgba(99, 217, 183, 0.28), transparent 34%),
    linear-gradient(155deg, #0b5962, #06333f 62%, #042632) !important;
  transform: translateX(16px) scale(0.992) !important;
  transition: opacity 320ms ease, transform 420ms cubic-bezier(0.2, 0.75, 0.25, 1) !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-story[data-direction="prev"] .monthly-recap-slide {
  transform: translateX(-16px) scale(0.992) !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-slide.is-visible {
  opacity: 1 !important;
  transform: translateX(0) scale(1) !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-slide-photo {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: var(--home-photo-position, center 38%) !important;
  transform: scale(1.015) !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-atmosphere-art {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-atmosphere-art i {
  position: absolute !important;
  top: 17% !important;
  left: 50% !important;
  width: min(70vw, 340px) !important;
  aspect-ratio: 1 !important;
  border: 1px solid rgba(197, 255, 238, 0.13) !important;
  border-radius: 50% !important;
  transform: translateX(-50%) !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-atmosphere-art i:nth-child(2) {
  top: 24% !important;
  width: min(52vw, 250px) !important;
  border-color: rgba(246, 202, 120, 0.14) !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-atmosphere-art strong {
  position: absolute !important;
  top: 27% !important;
  left: 50% !important;
  color: rgba(229, 255, 248, 0.21) !important;
  font-size: clamp(4rem, 18vw, 7.8rem) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  transform: translate(-50%, -50%) !important;
  filter: saturate(0.78) !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-atmosphere-art.is-cover-art strong {
  color: rgba(246, 202, 120, 0.2) !important;
  font-size: clamp(5rem, 22vw, 9rem) !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-slide-shade {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background:
    linear-gradient(180deg, rgba(1, 20, 27, 0.08) 4%, rgba(2, 25, 32, 0.12) 35%, rgba(2, 24, 31, 0.92) 100%),
    linear-gradient(90deg, rgba(1, 24, 31, 0.24), transparent 62%) !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-slide-copy {
  position: relative !important;
  z-index: 3 !important;
  display: grid !important;
  width: min(100%, 470px) !important;
  padding: clamp(28px, 6vw, 46px) !important;
  align-self: end !important;
  gap: 10px !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-slide-copy > span:first-child {
  color: rgba(221, 255, 246, 0.76) !important;
  font-size: 0.68rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-slide h2 {
  max-width: 440px !important;
  margin: 0 !important;
  color: #fffef8 !important;
  font-size: clamp(2rem, 6.4vw, 3.25rem) !important;
  font-weight: 820 !important;
  line-height: 0.98 !important;
  letter-spacing: -0.052em !important;
  text-wrap: balance !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-slide p {
  max-width: 420px !important;
  margin: 2px 0 0 !important;
  color: rgba(235, 255, 249, 0.8) !important;
  font-size: clamp(0.86rem, 2.4vw, 1rem) !important;
  font-weight: 580 !important;
  line-height: 1.5 !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-slide-copy > button {
  display: inline-flex !important;
  width: max-content !important;
  min-height: 44px !important;
  margin-top: 7px !important;
  padding: 10px 16px !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.26) !important;
  border-radius: 999px !important;
  color: #073a43 !important;
  background: linear-gradient(135deg, #ecfff9, #c9f4e7) !important;
  box-shadow: 0 12px 28px rgba(0, 22, 28, 0.24) !important;
  font: inherit !important;
  font-size: 0.76rem !important;
  font-weight: 830 !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-slide-copy > button svg {
  width: 16px !important;
  height: 16px !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-slide.is-cover .monthly-recap-slide-copy {
  padding-bottom: clamp(42px, 8vw, 68px) !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-slide.is-pulse {
  color: #083f48 !important;
  background:
    radial-gradient(circle at 84% 13%, rgba(246, 196, 99, 0.28), transparent 30%),
    radial-gradient(circle at 10% 84%, rgba(67, 189, 163, 0.2), transparent 38%),
    linear-gradient(150deg, #fffdf5, #eaf8f3) !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-slide.is-pulse .monthly-recap-slide-copy,
html body .app-shell #monthlyRecapDialog .monthly-recap-slide.is-map .monthly-recap-slide-copy {
  width: 100% !important;
  align-self: center !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-slide.is-pulse .monthly-recap-slide-copy > span:first-child {
  color: #268879 !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-slide.is-pulse h2 {
  color: #083f48 !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-slide.is-pulse p {
  color: #58787b !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-stat-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  margin-top: 18px !important;
  gap: 10px !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-stat-grid > div {
  display: grid !important;
  min-height: 112px !important;
  padding: 18px 12px !important;
  align-content: center !important;
  gap: 4px !important;
  border: 1px solid rgba(31, 125, 115, 0.13) !important;
  border-radius: 20px !important;
  text-align: center !important;
  background: rgba(255, 255, 255, 0.62) !important;
  box-shadow: 0 12px 28px rgba(19, 84, 82, 0.07) !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-stat-grid strong {
  color: #0b675f !important;
  font-size: clamp(1.65rem, 5vw, 2.25rem) !important;
  font-weight: 860 !important;
  line-height: 1 !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-stat-grid small {
  color: #627f80 !important;
  font-size: 0.68rem !important;
  font-weight: 760 !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-moods {
  display: flex !important;
  margin-top: 4px !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-moods span {
  padding: 7px 11px !important;
  border: 1px solid rgba(22, 121, 108, 0.13) !important;
  border-radius: 999px !important;
  color: #2f6d69 !important;
  background: rgba(255, 255, 255, 0.65) !important;
  font-size: 0.68rem !important;
  font-weight: 760 !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-slide.is-map {
  background:
    radial-gradient(circle at 88% 13%, rgba(245, 201, 111, 0.18), transparent 30%),
    linear-gradient(150deg, #0a5661, #063640 60%, #042631) !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-map-art {
  position: relative !important;
  width: 100% !important;
  margin-top: 14px !important;
  padding: 18px !important;
  overflow: hidden !important;
  border: 1px solid rgba(215, 255, 244, 0.15) !important;
  border-radius: 24px !important;
  background: rgba(2, 33, 42, 0.34) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05) !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-map-art svg {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-map-coast {
  fill: none !important;
  stroke: rgba(204, 245, 235, 0.1) !important;
  stroke-width: 0.8 !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-map-route {
  fill: none !important;
  stroke: url(#monthlyRecapPathGradient) !important;
  stroke-width: 1.55 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-dasharray: 4 2 !important;
  stroke-dashoffset: 0 !important;
  animation: monthly-recap-route-drift 3s linear infinite !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-map-point {
  fill: #f5ca78 !important;
  stroke: #eafff8 !important;
  stroke-width: 0.85 !important;
  opacity: 1 !important;
  transform-box: fill-box !important;
  transform-origin: center !important;
  animation: monthly-recap-point-pulse 1.8s var(--point-delay, 520ms) ease-in-out infinite alternate !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-place-cloud {
  display: flex !important;
  margin-top: 16px !important;
  padding: 26px 8px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-place-cloud span {
  display: inline-flex !important;
  min-height: 44px !important;
  padding: 9px 14px !important;
  align-items: center !important;
  gap: 7px !important;
  border: 1px solid rgba(223, 255, 247, 0.16) !important;
  border-radius: 999px !important;
  color: rgba(240, 255, 251, 0.88) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  font-size: 0.76rem !important;
  font-weight: 720 !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-place-cloud svg {
  width: 15px !important;
  height: 15px !important;
  color: #f4c878 !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-slide.is-closing {
  background: linear-gradient(150deg, #0a545f, #032832) !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-closing-collage {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  grid-template-columns: 1.2fr 0.8fr !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 3px !important;
  opacity: 0.78 !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-closing-collage img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-closing-collage img:first-child {
  grid-row: 1 / 3 !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-controls {
  display: flex !important;
  min-height: 48px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-controls > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: rgba(220, 248, 241, 0.62) !important;
  font-size: 0.68rem !important;
  font-weight: 680 !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-controls > span svg {
  width: 14px !important;
  height: 14px !important;
  color: #73d9bd !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-navigation {
  display: flex !important;
  align-items: center !important;
  justify-content: end !important;
  gap: 8px !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-navigation small {
  min-width: 43px !important;
  color: rgba(226, 250, 244, 0.66) !important;
  text-align: center !important;
  font-size: 0.65rem !important;
  font-weight: 740 !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-navigation button {
  display: inline-flex !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 9px 15px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  border: 1px solid rgba(221, 255, 247, 0.17) !important;
  border-radius: 999px !important;
  color: #ecfff9 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
  font: inherit !important;
  font-size: 0.72rem !important;
  font-weight: 810 !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-navigation .monthly-recap-next {
  color: #073b44 !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, #ecfff9, #bfeeda) !important;
  box-shadow: 0 10px 24px rgba(0, 23, 30, 0.2) !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-navigation .monthly-recap-previous {
  width: 44px !important;
  padding: 0 !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-navigation button[hidden] {
  display: none !important;
}

html body .app-shell #monthlyRecapDialog .monthly-recap-navigation svg {
  width: 16px !important;
  height: 16px !important;
}

html body .app-shell .memory-video-device-note {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) !important;
  width: 100% !important;
  padding: 16px !important;
  align-items: center !important;
  gap: 12px !important;
  border: 1px solid rgba(35, 132, 119, 0.16) !important;
  border-radius: 19px !important;
  color: #174c54 !important;
  background: linear-gradient(145deg, rgba(239, 251, 247, 0.96), rgba(255, 251, 240, 0.96)) !important;
}

html body .app-shell .memory-video-device-icon {
  display: grid !important;
  width: 46px !important;
  height: 46px !important;
  grid-row: 1 / 3 !important;
  place-items: center !important;
  border-radius: 15px !important;
  color: #0d7c71 !important;
  background: rgba(47, 168, 144, 0.12) !important;
}

html body .app-shell .memory-video-device-icon svg {
  width: 21px !important;
  height: 21px !important;
}

html body .app-shell .memory-video-device-note > span:nth-child(2) {
  display: grid !important;
  min-width: 0 !important;
  gap: 4px !important;
}

html body .app-shell .memory-video-device-note strong {
  color: #104952 !important;
  font-size: 0.8rem !important;
  line-height: 1.25 !important;
}

html body .app-shell .memory-video-device-note small {
  color: #637d7f !important;
  font-size: 0.69rem !important;
  font-weight: 580 !important;
  line-height: 1.45 !important;
}

html body .app-shell .memory-video-device-note > button {
  grid-column: 2 !important;
  width: max-content !important;
  min-height: 42px !important;
  padding: 8px 13px !important;
  border: 1px solid #168577 !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: #137d72 !important;
  font: inherit !important;
  font-size: 0.7rem !important;
  font-weight: 790 !important;
}

@keyframes monthly-recap-route-drift {
  from { stroke-dashoffset: 12; }
  to { stroke-dashoffset: 0; }
}

@keyframes monthly-recap-point-pulse {
  from { transform: scale(0.84); }
  to { transform: scale(1.12); }
}

@media (max-width: 640px) {
  html body .app-shell #monthlyRecapDialog.monthly-recap-dialog {
    width: calc(100vw - 16px) !important;
    height: calc(100dvh - 18px) !important;
    max-height: calc(100dvh - 18px) !important;
    border-radius: 25px !important;
  }

  html body .app-shell #monthlyRecapDialog .monthly-recap-panel {
    padding: 10px !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
    gap: 9px !important;
    border-radius: 25px !important;
  }

  html body .app-shell #monthlyRecapDialog .monthly-recap-close {
    top: 18px !important;
    right: 17px !important;
  }

  html body .app-shell #monthlyRecapDialog .monthly-recap-progress {
    margin: 3px 57px 0 3px !important;
  }

  html body .app-shell #monthlyRecapDialog .monthly-recap-story {
    border-radius: 20px !important;
  }

  html body .app-shell #monthlyRecapDialog .monthly-recap-slide-copy {
    padding: 28px 24px !important;
  }

  html body .app-shell #monthlyRecapDialog .monthly-recap-slide h2 {
    font-size: clamp(2rem, 11vw, 2.85rem) !important;
  }

  html body .app-shell #monthlyRecapDialog .monthly-recap-stat-grid > div {
    min-height: 92px !important;
    padding: 14px 7px !important;
  }

  html body .app-shell #monthlyRecapDialog .monthly-recap-controls {
    min-height: 50px !important;
  }

  html body .app-shell #monthlyRecapDialog .monthly-recap-controls > span {
    display: none !important;
  }

  html body .app-shell #monthlyRecapDialog .monthly-recap-navigation {
    width: 100% !important;
    justify-content: space-between !important;
  }

  html body .app-shell #monthlyRecapDialog .monthly-recap-navigation .monthly-recap-next {
    min-width: 126px !important;
  }

  html body .app-shell .memory-video-device-note {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    padding: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .app-shell #monthlyRecapDialog .monthly-recap-slide,
  html body .app-shell #monthlyRecapDialog .monthly-recap-map-route,
  html body .app-shell #monthlyRecapDialog .monthly-recap-map-point {
    animation: none !important;
    transition: none !important;
  }

  html body .app-shell #monthlyRecapDialog .monthly-recap-slide,
  html body .app-shell #monthlyRecapDialog .monthly-recap-map-point {
    opacity: 1 !important;
    transform: none !important;
  }

  html body .app-shell #monthlyRecapDialog .monthly-recap-map-route {
    stroke-dashoffset: 0 !important;
  }
}