/* ── Map/List Toggle ── */
body.map-active { overflow: hidden; }
body.map-active #app-main,
body.map-active .scroll-btn,
body.map-active #route-progress { display: none !important; }
body:not(.map-active) #map-view,
body:not(.map-active) .map-float-btns,
body:not(.map-active) .poi-panel { display: none !important; }

/* ── Toggle Button ── */
#view-toggle {
    height: 32px;
    background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    cursor: pointer; padding: 0 10px;
    display: flex; align-items: center; justify-content: center;
    color: #F0F0F0; font-family: var(--font); font-size: 13px; font-weight: 600;
    letter-spacing: 0.02em;
}

/* ── Full-screen map layout ── */
#map-view {
    position: fixed;
    top: var(--header-height);
    left: 0; right: 0;
    bottom: 0;
    z-index: 50;
}
.gps-inaccurate #map-view { top: calc(var(--header-height) + 36px); }

#map {
    width: 100%; height: 100%;
    background: #1a1a2e;
}

/* ── Map Markers ── */
.poi-marker-icon {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 12px;
    font-family: 'Inter', sans-serif;
    border: 2px solid;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    transition: all 0.3s;
}
.poi-marker-icon.state-default   { background:#2A2A2A; border-color:#666; color:#B0B0B0; }
.poi-marker-icon.state-nearest    { background:#4ADE80; border-color:#4ADE80; color:#000; box-shadow:0 0 12px rgba(74,222,128,0.5); }
.poi-marker-icon.state-playing    { background:#FBBF24; border-color:#FBBF24; color:#000; animation:marker-pulse 1s ease-in-out infinite; }
.poi-marker-icon.state-played     { background:#444; border-color:#666; color:#999; }
.poi-marker-icon.state-inrange    { background:#2A2A2A; border-color:#F5C518; color:#F5C518; }
@keyframes marker-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }

/* User location dot */
.user-location-dot {
    width:20px; height:20px; border-radius:50%;
    background:rgba(66,133,244,0.25);
    display:flex; align-items:center; justify-content:center;
    animation:user-pulse 2s ease-in-out infinite;
}
.user-location-inner {
    width:12px; height:12px; border-radius:50%;
    background:#4285F4; border:2.5px solid #fff;
    box-shadow:0 1px 4px rgba(0,0,0,0.4);
}
@keyframes user-pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.3);opacity:0.7} }

/* ── Bottom control panel (over map) ── */
.map-controls {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    pointer-events: none;
}
.map-controls > * { pointer-events: auto; }

/* Right-side floating buttons (center + mode toggle) */
.map-float-btns {
    position: fixed;
    bottom: 90px; right: 16px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
body.panel-open .map-float-btns { bottom: 320px; }
body.is-playing .map-float-btns { bottom: 160px; }
body.is-playing.panel-open .map-float-btns { bottom: 390px; }

.map-fab {
    width: 44px; height: 44px;
    border-radius: 50%; border: 1px solid var(--border);
    background: var(--bg-dark);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.5);
    transition: background 0.2s;
}
.map-fab:active { background: var(--bg-surface); }
.map-fab svg { width: 22px; height: 22px; }
.map-fab.active { background: var(--yellow); border-color: var(--yellow); }
.map-fab.active svg { stroke: #000; }

/* ── POI Button Panel ── */
.poi-panel {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 200;
    background: var(--bg-dark);
    border-top: 1px solid var(--border);
    padding: 6px 0;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform 0.3s ease;
}
.poi-panel.visible {
    transform: translateY(0);
}

/* Horizontal scroll row */
.poi-panel-grid {
    display: flex;
    gap: 8px;
    padding: 6px 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.poi-panel-grid::-webkit-scrollbar { display: none; }

.poi-btn {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 10px;
    border: 2px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 64px;
    min-height: 52px;
    text-align: center;
    line-height: 1.2;
}
.poi-btn .poi-btn-num {
    font-size: 16px;
    font-weight: 700;
}
.poi-btn .poi-btn-name {
    font-size: 9px;
    font-weight: 400;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70px;
    margin-top: 1px;
}
.poi-btn:active { transform: scale(0.95); }
.poi-btn.nearest  { border-color: #4ADE80; background: rgba(74,222,128,0.15); }
.poi-btn.playing  { border-color: #FBBF24; background: rgba(251,191,36,0.2); animation: marker-pulse 1s ease-in-out infinite; }
.poi-btn.played   { opacity: 0.5; }

@media (min-width: 768px) {
    .poi-btn { min-width: 80px; min-height: 58px; padding: 10px 14px; }
    .poi-btn .poi-btn-num { font-size: 18px; }
    .poi-btn .poi-btn-name { font-size: 10px; max-width: 90px; }
}

/* ── Now Playing bar offset for map ── */
body.map-active #now-playing {
    position: fixed;
    left: 0; right: 0;
    z-index: 250;
    bottom: 0;
}
body.is-playing .poi-panel {
    padding-bottom: calc(var(--footer-height) + 6px + env(safe-area-inset-bottom, 0px));
}

/* Leaflet overrides for dark theme */
.leaflet-control-attribution { background:rgba(0,0,0,0.6)!important; color:#666!important; font-size:9px!important; }
.leaflet-control-attribution a { color:#888!important; }
.leaflet-control-zoom a { background:var(--bg-dark)!important; color:var(--text-primary)!important; border-color:var(--border)!important; }
.leaflet-popup-content-wrapper { background:var(--bg-dark)!important; color:var(--text-primary)!important; border-radius:10px!important; box-shadow:0 4px 20px rgba(0,0,0,0.5)!important; }
.leaflet-popup-tip { background:var(--bg-dark)!important; }
.leaflet-popup-content { font-family:'Inter',sans-serif; font-size:13px; margin:10px 14px; }
.map-popup-name { font-weight:600; font-size:14px; margin-bottom:4px; }
.map-popup-dist { color:var(--text-muted); font-size:12px; }