/* MyMappi v703 — product-wide reliability and responsive polish. */

/* A hidden media viewer must be absent from layout and the accessibility tree. */
html body .app-shell #photoLightbox[hidden],
html body main.app-shell #photoLightbox[hidden] {
  display: none !important;
}

/* Hidden account/trip controls must not retain author-level display rules. */
html body #betaAdminDashboardLink[hidden],
html body #activeTripEditorChip[hidden] {
  display: none !important;
}

/* Dynamic icon-only controls keep a dependable visual box while Lucide hydrates. */
html body main.app-shell .notification-settings-button > [data-icon] {
  display: grid !important;
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 15px !important;
  place-items: center !important;
}

@media (max-width: 640px) {
  /* Center the full-screen capsule scrim; previous rules left a 20px strip on one side. */
  html body .app-shell .memory-bottom-sheet.open,
  html body main.app-shell .memory-bottom-sheet.open {
    right: 10px !important;
    left: 10px !important;
    width: auto !important;
    max-width: none !important;
    margin-inline: 0 !important;
  }

  /* Filters own a full row so Sort never covers the final filter chips. */
  html body main.app-shell > section.map-stage.memories-focus > section.memory-database-page.side-panel .memory-lane-controls {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  html body main.app-shell > section.map-stage.memories-focus > section.memory-database-page.side-panel .memory-lane-filter-chips {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 2px 2px 0 !important;
    scroll-padding-inline: 2px !important;
    scroll-snap-type: inline proximity !important;
  }

  html body main.app-shell > section.map-stage.memories-focus > section.memory-database-page.side-panel .memory-lane-filter-chip {
    scroll-snap-align: start !important;
  }

  html body main.app-shell > section.map-stage.memories-focus > section.memory-database-page.side-panel .memory-lane-sort {
    width: 100% !important;
    min-width: 0 !important;
  }

  html body main.app-shell > section.map-stage.memories-focus > section.memory-database-page.side-panel .memory-lane-sort > select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding-inline: 13px 36px !important;
    font-size: 0.72rem !important;
  }
}

@media (max-width: 360px) {
  /* Give the privacy status and Archive settings their own readable lines. */
  html body main.app-shell > section.map-stage.memories-focus > section.memory-database-page.side-panel #memoryList .memory-lane-overview-footer {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 9px !important;
    height: auto !important;
  }

  html body main.app-shell > section.map-stage.memories-focus > section.memory-database-page.side-panel #memoryList .memory-lane-archive-status {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  html body main.app-shell > section.map-stage.memories-focus > section.memory-database-page.side-panel #memoryList .memory-lane-tools {
    justify-self: start !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body main.app-shell > section.map-stage.memories-focus > section.memory-database-page.side-panel .memory-lane-filter-chips {
    scroll-behavior: auto !important;
  }
}