/* Phase Two mobile contract: one stable viewport and safe-area model. */
:root {
  --mymappi-visible-height: 100dvh;
  --mymappi-keyboard-inset: 0px;
}

.memory-media-retry {
  display: block;
  min-height: 38px;
  margin: 10px auto 0;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 7px;
  background: rgba(6, 54, 69, 0.9);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.memory-media-retry[hidden] {
  display: none !important;
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
  html,
  body,
  main.app-shell,
  main.app-shell > .map-stage {
    height: var(--mymappi-visible-height, 100dvh) !important;
    min-height: var(--mymappi-visible-height, 100dvh) !important;
    max-height: var(--mymappi-visible-height, 100dvh) !important;
  }

  button,
  input,
  select,
  textarea,
  a[role="button"] {
    touch-action: manipulation;
  }

  button,
  .icon-button,
  .bottom-nav-item,
  .account-menu-item {
    min-height: 44px;
  }

  html body main.app-shell .memory-editor.open,
  html body .app-shell .memory-editor.open {
    top: calc(max(6px, env(safe-area-inset-top)) + 58px) !important;
    bottom: calc(var(--bottom-nav-height, 78px) + env(safe-area-inset-bottom) + 8px) !important;
    height: auto !important;
    max-height: calc(var(--mymappi-visible-height, 100dvh) - 72px - var(--bottom-nav-height, 78px) - env(safe-area-inset-bottom)) !important;
    padding-bottom: 96px !important;
    scroll-padding-bottom: 112px !important;
  }

  html body.keyboard-open .app-shell .bottom-nav {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(14px) !important;
  }

  html body.keyboard-open main.app-shell .memory-editor.open,
  html body.keyboard-open .app-shell .memory-editor.open {
    top: max(4px, env(safe-area-inset-top)) !important;
    bottom: max(4px, env(safe-area-inset-bottom)) !important;
    max-height: calc(var(--mymappi-visible-height, 100dvh) - max(8px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom))) !important;
    padding-bottom: 96px !important;
    scroll-padding-bottom: 120px !important;
  }

  html body main.app-shell .memory-editor.open .editor-actions,
  html body .app-shell .memory-editor.open .editor-actions {
    position: fixed !important;
    right: 16px !important;
    bottom: calc(var(--bottom-nav-height, 78px) + env(safe-area-inset-bottom) + 14px) !important;
    left: 16px !important;
    z-index: 2200 !important;
    width: auto !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 34px rgba(4, 33, 45, 0.22) !important;
  }

  html body.keyboard-open main.app-shell .memory-editor.open .editor-actions,
  html body.keyboard-open .app-shell .memory-editor.open .editor-actions {
    bottom: max(6px, env(safe-area-inset-bottom)) !important;
    padding-bottom: max(9px, env(safe-area-inset-bottom)) !important;
  }

  html body .app-shell .memory-database-page,
  html body .app-shell .memory-bottom-sheet.open,
  html body .app-shell .photo-lightbox,
  html body .app-shell .account-menu.open {
    max-height: var(--mymappi-visible-height, 100dvh) !important;
  }

  html body .app-shell .photo-lightbox {
    padding-top: max(10px, env(safe-area-inset-top)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  html body .app-shell .photo-lightbox img,
  html body .app-shell .photo-lightbox video {
    max-width: 100% !important;
    max-height: calc(var(--mymappi-visible-height, 100dvh) - 72px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    object-fit: contain !important;
  }

  html body .app-shell .map-navigation-gadget {
    display: grid !important;
    grid-template-columns: repeat(2, 44px) !important;
    grid-template-rows: repeat(2, 44px) !important;
    width: 88px !important;
    height: 88px !important;
    min-width: 88px !important;
    min-height: 88px !important;
    gap: 0 !important;
  }

  html body .app-shell .map-navigation-gadget > button {
    box-sizing: border-box !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    transform: none !important;
  }

  html body .app-shell #map,
  html body .app-shell #map canvas {
    contain: strict;
    touch-action: none;
  }

  html body .app-shell .map-stage.map-interacting .memory-pin-marker,
  html body .app-shell .map-stage.map-interacting .memory-cluster-marker,
  html body .app-shell .map-stage.map-interacting .memory-marker {
    animation: none !important;
    filter: none !important;
    transition: none !important;
  }

  html body .app-shell .memory-media-progress {
    width: 100% !important;
    padding: 11px !important;
  }

  html body .app-shell .memory-media-retry {
    width: min(100%, 220px);
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .memory-media-retry,
  html body .app-shell .bottom-nav {
    transition: none !important;
  }
}