/* Safe areas for notched phones */
.safe-top {
    padding-top: env(safe-area-inset-top, 0px);
}
.safe-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Bump the root font-size so every rem-based Tailwind size scales up.
   Default is 16px; 18px makes all text, padding, and tap targets ~12% larger
   for easier reading on phones (especially with the user's default font at max). */
html {
    font-size: 18px;
}

/* Prevent overscroll bounce */
html, body {
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

/* Map fills viewport */
#map {
    width: 100%;
    height: 100%;
}

/* Pin detail slide-up */
#pin-detail {
    max-height: 75vh;
}

/* Leaflet circle marker pulse on urgent */
.leaflet-interactive {
    cursor: pointer;
}

/* Glowing user location dot */
.user-glow {
    position: relative;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-dot {
    width: 14px;
    height: 14px;
    background: #3b82f6;
    border: 2.5px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.6);
    animation: glow-pulse 2s ease-out infinite;
}

@keyframes glow-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.6);
    }
    70% {
        box-shadow: 0 0 0 14px rgba(59, 130, 246, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}