* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; overflow: hidden; }

#map { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; width: 100%; height: 100%; }

/* --- Bottom bar (mobile nav) --- */
#bottom-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
    background: white; display: flex; justify-content: space-around;
    padding: 6px 0 max(6px, env(safe-area-inset-bottom));
    box-shadow: 0 -2px 8px rgba(0,0,0,0.15);
    border-top: 1px solid #e5e7eb;
}
.bar-btn {
    background: none; border: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    font-size: 11px; color: #555; padding: 4px 12px;
}
.bar-btn:active { color: #2563eb; }
.bar-btn svg { stroke: currentColor; }
.bar-btn.loc-searching { color: #4285f4; animation: loc-blink 0.8s ease-in-out infinite; }
.bar-btn.loc-found { color: #16a34a; }
.bar-btn.loc-error { color: #dc2626; }
@keyframes loc-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

/* --- Panels (slide up from bottom) --- */
.panel {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1100;
    background: white; border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
    max-height: 70vh; display: flex; flex-direction: column;
    transition: transform 0.25s ease;
}
.panel.hidden { transform: translateY(100%); pointer-events: none; }
.panel-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 16px 8px; border-bottom: 1px solid #eee;
}
.panel-header h3 { font-size: 16px; color: #111; }
.close-btn {
    background: none; border: none; font-size: 24px; color: #888;
    cursor: pointer; padding: 0 4px; line-height: 1;
}
.panel-body { padding: 12px 16px 16px; overflow-y: auto; }

/* --- Route inputs --- */
.route-inputs { display: flex; flex-direction: column; gap: 8px; }
.route-inputs input {
    padding: 10px 12px; border: 1px solid #ddd; border-radius: 8px;
    font-size: 15px; width: 100%; outline: none;
}
.route-inputs input:focus { border-color: #2563eb; }
.btn-row { display: flex; gap: 8px; }
.primary-btn {
    flex: 1; padding: 10px; border: none; border-radius: 8px;
    background: #2563eb; color: white; font-size: 15px; font-weight: 600; cursor: pointer;
}
.primary-btn:active { background: #1d4ed8; }
.secondary-btn {
    padding: 10px 16px; border: 1px solid #ddd; border-radius: 8px;
    background: white; color: #333; font-size: 15px; cursor: pointer;
}
.secondary-btn:active { background: #f3f4f6; }

/* Search dropdown */
.search-wrap { position: relative; }
.search-results {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: white; border: 1px solid #ddd; border-top: none;
    border-radius: 0 0 8px 8px; max-height: 160px; overflow-y: auto;
    z-index: 2000; box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.search-results.active { display: block; }
.search-results .result {
    padding: 10px 12px; font-size: 13px; cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}
.search-results .result:last-child { border-bottom: none; }
.search-results .result:active { background: #e8f0fe; }
.search-results .no-results { padding: 10px 12px; font-size: 13px; color: #888; font-style: italic; }

.poi-result-cat { color: #6b7280; font-size: 11px; text-transform: capitalize; }
#route-info { margin-top: 10px; font-size: 14px; line-height: 1.5; }
#route-info .stat { font-weight: 600; color: #2563eb; }
.click-hint { font-size: 13px; color: #888; font-style: italic; margin-top: 8px; }

/* --- Directions list --- */
.directions { margin-top: 10px; }
.directions.hidden { display: none; }
.directions ol { list-style: none; counter-reset: step; padding: 0; }
.directions li {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 4px; border-bottom: 1px solid #f0f0f0;
    font-size: 14px; line-height: 1.4; cursor: pointer;
}
.directions li:last-child { border-bottom: none; }
.directions li:active { background: #e8f0fe; }
.directions .step-num {
    flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
    background: #2563eb; color: white; font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.directions .step-num.arrive { background: #dc2626; }
.directions .step-text { flex: 1; }
.directions .step-dist { color: #888; font-size: 12px; margin-top: 2px; }

/* --- Layer toggles --- */
.layer-toggles { display: flex; flex-direction: column; gap: 2px; }
.layer-toggle {
    font-size: 15px; cursor: pointer; display: flex; align-items: center;
    gap: 10px; padding: 10px 4px; border-bottom: 1px solid #f5f5f5;
}
.layer-toggle input { width: 18px; height: 18px; margin: 0; }
.layer-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
#layer-status { margin-top: 8px; font-size: 13px; color: #888; font-style: italic; }

/* --- Camera popup --- */
.cam-popup video { width: 100%; max-width: 320px; background: #000; border-radius: 4px; }
.cam-popup .cam-snapshot { width: 100%; max-width: 320px; background: #000; border-radius: 4px; }
.cam-popup .cam-title { font-weight: 600; font-size: 13px; margin-bottom: 6px; }

/* --- Layer markers --- */
.layer-icon {
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; color: white; font-weight: bold;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* --- Location dot --- */
.loc-dot { background: none !important; border: none !important; }
.loc-center {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 16px; height: 16px; background: #4285f4;
    border: 3px solid white; border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,.4);
    z-index: 2;
}
.loc-pulse {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 40px; height: 40px; background: rgba(66,133,244,0.25);
    border-radius: 50%; animation: loc-ping 2s ease-out infinite;
}
@keyframes loc-ping {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; }
}

/* --- Navigation mode --- */
.nav-hidden { display: none !important; }

#nav-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 2000; pointer-events: none;
}
#nav-overlay > * { pointer-events: auto; }

#nav-instruction {
    position: absolute; top: 0; left: 0; right: 0;
    background: rgba(0,0,0,0.85); color: white;
    padding: 16px 20px max(16px, env(safe-area-inset-top));
    font-size: 18px; font-weight: 600; line-height: 1.3;
}
#nav-step-dist { font-size: 28px; font-weight: 700; color: #60a5fa; margin-top: 4px; }
#nav-next {
    position: absolute; top: 110px; left: 10px; right: 10px;
    background: rgba(0,0,0,0.6); color: #ccc; padding: 8px 14px;
    border-radius: 8px; font-size: 13px;
}

#nav-eta-bar {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,0.85); color: white;
    padding: 14px 20px max(14px, env(safe-area-inset-bottom));
    display: flex; justify-content: space-between; font-size: 16px;
}
#nav-eta { font-weight: 700; color: #34d399; }
#nav-remaining { color: #9ca3af; }

#nav-controls {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 6px;
}
.nav-ctrl {
    width: 44px; height: 44px; border-radius: 50%; border: none;
    background: rgba(255,255,255,0.95); color: #333; font-size: 13px; font-weight: 700;
    cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    display: flex; align-items: center; justify-content: center;
}
.nav-ctrl:active { background: #e5e7eb; }
.nav-ctrl.active { background: #2563eb; color: white; }
.nav-ctrl-exit { background: #dc2626; color: white; font-size: 11px; }
.nav-ctrl-exit:active { background: #b91c1c; }

/* Camera PIP */
#nav-cam-pip {
    position: absolute; bottom: 60px; left: 10px;
    width: 240px; background: #000; border-radius: 8px;
    overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
#nav-cam-pip video, #nav-cam-pip img { width: 100%; display: block; }
#nav-cam-title {
    position: absolute; top: 0; left: 0; right: 0;
    background: rgba(0,0,0,0.7); color: white; font-size: 11px;
    padding: 4px 8px; z-index: 1;
}
#nav-cam-none { color: #888; font-size: 12px; padding: 20px; text-align: center; }

/* Map wrapper for tilt/perspective */
#map-wrapper { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; }
#map-wrapper.tilted {
    perspective: 800px;
    perspective-origin: center 80%;
}
#map-wrapper.tilted #map {
    transform-origin: center 70%;
}

/* Map rotation for heading-up mode — rotate entire map, counter-rotate overlay */
#map { transition: transform 0.3s ease; }
#nav-overlay { transition: none; }

/* Navigation arrow (replaces blue dot during nav) */
.nav-arrow-wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.nav-arrow-svg { transition: transform 0.15s ease-out; }

/* Hide controls in nav mode */
body.nav-active #bottom-bar,
body.nav-active .panel,
body.nav-active .leaflet-control-container { display: none !important; }

/* --- Desktop: side panel instead of bottom sheet --- */
@media (min-width: 768px) {
    #bottom-bar { display: none; }

    .panel {
        position: fixed; top: 10px; right: 10px; bottom: auto; left: auto;
        width: 340px; max-height: calc(100vh - 20px);
        border-radius: 12px; transform: none !important;
        pointer-events: auto !important;
    }
    .panel.hidden { display: none; }
    .panel.desktop-show { display: flex; }

    /* Show both panels stacked on desktop */
    #search-panel { top: 10px; }
    #layers-panel { top: auto; bottom: 10px; right: 10px; }
}