/* Scrollbar hide utility */
.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;
}

.dark .cerca-skeleton {
  --cerca-skeleton-base: #374151;
  --cerca-skeleton-highlight: #4b5563;
}