/* Scrollbar hide utility */
:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Avatar ring transitions */
[data-controller="friend-filter"] .avatar-ring {
  transition: all 0.15s ease-out;
}

/* Ensure map is visible and positioned correctly */
#map {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Friend toggle transitions */
.friend-toggle .ring-2 {
  transition: all 0.2s ease-out;
}

/* Hide Mapbox's default GeolocateControl button. The control itself still
 * runs (for the user-location dot, accuracy circle, and tracking state);
 * only its UI is hidden — the city-selector dropdown is the single visible
 * trigger surface and dispatches `cerca:map:locate-me` to the map controller.
 */
#map .mapboxgl-ctrl-geolocate {
  display: none !important;
}
#map .mapboxgl-ctrl-group:has(> .mapboxgl-ctrl-geolocate:only-child) {
  display: none !important;
}

@keyframes cerca-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.cerca-skeleton {
  --cerca-skeleton-base: #e5e7eb;
  --cerca-skeleton-highlight: #f3f4f6;
  background: linear-gradient(90deg, var(--cerca-skeleton-base) 25%, var(--cerca-skeleton-highlight) 50%, var(--cerca-skeleton-base) 75%);
  background-size: 200% 100%;
  animation: cerca-shimmer 1.5s ease-in-out infinite;
}

@media (prefers-color-scheme: dark) {
  .cerca-skeleton {
    --cerca-skeleton-base: #374151;
    --cerca-skeleton-highlight: #4b5563;
  }
}

/* Flash toast notifications */
@keyframes appear-then-fade {
  0%, 100% { opacity: 0; transform: translateY(0.5rem); }
  5%, 60%  { opacity: 1; transform: translateY(0); }
}

.flash {
  animation: appear-then-fade 3s 300ms both;
  pointer-events: auto;
}

.profile-canvas {
  background: #ffffff;
}

/* Consistent tab-panel content sections */
.profile-panel-section {
  padding: 1rem;
}

.profile-panel-section--bordered {
  border-bottom: 1px solid #e5e7eb;
}

.profile-panel-heading {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9ca3af;
}

.profile-panel-list {
  margin-top: 0.75rem;
}

.profile-panel-section + .profile-panel-section {
  padding-top: 0.5rem;
}

@media (min-width: 1024px) {
  .profile-panel-section {
    padding: 1.5rem 0;
  }
}

@media (prefers-color-scheme: dark) {
  .profile-panel-heading {
    color: #6b7280;
  }

  .profile-panel-section--bordered {
    border-bottom-color: #1f2937;
  }
}

@keyframes row-highlight {
  0% {
    background-color: rgba(239, 246, 255, 0.6);
  }
  100% {
    background-color: transparent;
  }
}

.user-row--accepted {
  animation: row-highlight 1.2s ease-out;
}

@media (prefers-color-scheme: dark) {
  @keyframes row-highlight {
    0% {
      background-color: rgba(30, 64, 175, 0.2);
    }
    100% {
      background-color: transparent;
    }
  }
}

.profile-place-row {
  transition: background-color 150ms ease, border-color 150ms ease;
}

.profile-place-row--active {
  background: rgba(239, 246, 255, 0.75);
  border-bottom-color: #bfdbfe;
}

.profile-place-row--active .profile-place-title {
  color: #2563eb;
}

/* When a row is expanded, keep its content from touching the highlighted
   background edges (the body drops to px-0 at the sm breakpoint). */
.profile-place-row--active .profile-place-row__body {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Clamp place names to two lines on mobile to keep row heights reasonable
   without cutting off context. Safe cross-browser fallback via line-clamp. */
.profile-place-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.profile-map-panel[hidden] {
  display: none;
}

.profile-map-accordion {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 200ms ease-out;
  position: relative;
}

.profile-map-accordion--open {
  grid-template-rows: 1fr;
}

.profile-map-accordion:not(.profile-map-accordion--open) {
  transition-duration: 150ms;
}

.profile-map-accordion__inner {
  overflow: hidden;
}

/* Floating "Save / Saved" action overlaid in the top-right corner of the
   expanded place map (friend profiles only). It is anchored to the accordion
   (not the clipped inner) and revealed only when open, so it is immediately
   clickable rather than being clipped during the expand animation. */
.profile-map-save-action {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 10;
  display: none;
}

.profile-map-accordion--open > .profile-map-save-action {
  display: block;
}

.profile-map-save-action form {
  margin: 0;
}

.profile-map-save-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 2rem;
  padding: 0 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  color: #111827;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.06);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: background-color 150ms ease, color 150ms ease;
}

.profile-map-save-pill:hover {
  background: #ffffff;
}

.profile-map-save-pill--saved {
  color: #ffffff;
  background: #2563eb;
  border-color: transparent;
}

.profile-map-save-pill--saved:hover {
  background: #1d4ed8;
}

@media (prefers-color-scheme: dark) {
  .profile-map-save-pill {
    color: #ffffff;
    background: rgba(17, 24, 39, 0.85);
    border-color: rgba(255, 255, 255, 0.12);
  }

  .profile-map-save-pill:hover {
    background: rgba(17, 24, 39, 0.95);
  }

  .profile-map-save-pill--saved {
    background: #2563eb;
    border-color: transparent;
  }

  .profile-map-save-pill--saved:hover {
    background: #1d4ed8;
  }
}

.profile-map-card {
  overflow: hidden;
  border: none;
  border-radius: 0;
  background: #ffffff;
}

.profile-map-canvas {
  height: min(42vh, 20rem);
}

@media (prefers-color-scheme: dark) {
  .profile-canvas {
    background: #0a0a0a;
  }

  .profile-place-row--active {
    background: rgba(30, 64, 175, 0.16);
    border-bottom-color: rgba(96, 165, 250, 0.45);
  }

  .profile-place-row--active .profile-place-title {
    color: #60a5fa;
  }

  .profile-map-card {
    background: #030712;
  }
}

/* Dismiss row animation (replaces inline style manipulation in dismiss_row_controller.js) */
.dismiss-row--leaving {
  opacity: 0;
  transform: translateX(-8px);
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

[data-controller="dismiss-row"] {
  transition: opacity 0.25s ease, transform 0.25s ease, max-height 0.3s ease, padding 0.3s ease;
  overflow: hidden;
}

/* Dismiss nudge animation (replaces inline style manipulation in dismiss_nudge_controller.js) */
.dismiss-nudge--leaving {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Clipboard fallback: visually hidden textarea for execCommand copy */
.clipboard-fallback {
  position: fixed;
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}