/* ── Base ──────────────────────────────────────────────────────── */
html, body { margin: 0; height: 100%; overflow: hidden; font-family: sans-serif; background: #16213e; }
#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

/* ── Header ───────────────────────────────────────────────────── */
#header {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px; background: #0f3460; color: #fff;
    /* 1700: l'header e i suoi pannelli (menu metrica) devono stare sopra
       QUALSIASI decorazione della mappa — legenda verticale (900), pannello
       dei livelli (1100), flash (1500) — e sotto le modali (2000+). A pari
       z-index vinceva l'elemento piu' avanti nel DOM, cioe' la legenda. */
    font-size: 13px; z-index: 1700; flex-shrink: 0;
}
/* header-left era un div senza display:flex (solo la media query mobile lo
   impostava). Con la pillola e i chip, che sono blocchi, andavano a capo e
   la barra diventava alta due righe. */
#header .header-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
#header select {
    background: #1a1a2e; color: #fff; border: 1px solid #0f3460;
    border-radius: 4px; padding: 4px 8px; font-size: 13px;
}
/* Sorgente dei decolli (DHV / ParaglidingEarth): sta nel menu in alto a
   destra, accanto al badge del modello. Su telefono il resto della colonna
   destra sparisce ma questo resta: e' l'unico modo per cambiare i pin. */
#pins-label { font-size: 12px; opacity: .8; }
#pins-select { font-size: 12px; padding: 2px 4px; }
#model-badge {
    background: #e94560; color: #fff; border-radius: 4px;
    padding: 2px 8px; font-size: 12px; font-weight: bold;
}
#model-badge.eu { background: #1f4e9c; }
#model-badge.model-ch2 { background: #6a4c93; }
#net-badge { background: #ff8c00; color: #fff; border-radius: 4px;
    padding: 2px 8px; font-size: 12px; font-weight: bold; }
#net-badge.hidden { display: none; }

/* ── Guscio PWA (standalone) ────────────────────────────────────────── */
/* In app installata la finestra non ha barra del browser: il notch e la
   barra di sistema si evitano con le safe-area (iPhone) e con l'env(). */
#header, #legend-dock, #timeslider-container {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
}
#timeslider-container { padding-bottom: max(6px, env(safe-area-inset-bottom)); }
/* iPhone in app installata: la pagina gira sotto barra di stato e notch.
   La classe ios-sf viene messa dal JS SOLO li' (Android non la riceve),
   e --sa-top e' l'inset reale misurato, con fallback se env() restituisce 0. */
html.ios-sf #header {
    padding-top: calc(var(--sa-top, 0px) + 6px);
}
/* iPhone: anche le modali (punto, installazione, avviso) scendono sotto
   la barra di stato. Su XS la modale punto e' align-start con 2vh di
   padding: senza questo la X finisce sotto batteria e orologio. */
html.ios-sf #pointModal.open {
    padding-top: calc(var(--sa-top, 0px) + 10px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
}
html.ios-sf #pointModal.open .pm-box {
    max-height: calc(88vh - var(--sa-top, 0px) - 18px);
}
html.ios-sf #geoModal,
html.ios-sf #install-done {
    padding-top: calc(var(--sa-top, 0px) + 12px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
}
html.ios-sf .pm-cam-fab { bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); }
/* i controlli Leaflet stanno dentro la mappa, che gia' scende sotto
   l'header: nessun doppio scorrimento. */
.leaflet-control-container .leaflet-top { top: 4px; }
.leaflet-control-container .leaflet-bottom { bottom: max(4px, env(safe-area-inset-bottom)); }
/* iOS standalone: niente selezione/testo sul tap, niente rimbalzo */
html { -webkit-tap-highlight-color: transparent; }
body { overscroll-behavior: none; }

/* ── Map ──────────────────────────────────────────────────────── */
#map { flex: 1; cursor: pointer; position: relative; }  /* contesto per l'anello long-press */
#map:active { cursor: grabbing; }  /* dito normalmente, manina chiusa durante il trascinamento */

/* Mirino del centro: e' il punto da cui si leggono le condizioni dei chip
   data (aggiornaQualitaHeader usa map.getCenter()). Compare dopo un pan e
   resta 5 s, poi sfuma. pointer-events:none per non intercettare i tap. */
#map-center-target {
    position: absolute; left: 50%; top: 50%; width: 34px; height: 34px;
    transform: translate(-50%, -50%);
    z-index: 850; pointer-events: none; opacity: 0;
    transition: opacity .9s ease;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .85));
}
#map-center-target.show { opacity: .95; transition-duration: .12s; }
#map-center-target::before,
#map-center-target::after { content: ''; position: absolute; }
#map-center-target::before {
    inset: 0;
    background:
        linear-gradient(#fff, #fff) center top / 2px 8px no-repeat,
        linear-gradient(#fff, #fff) center bottom / 2px 8px no-repeat,
        linear-gradient(#fff, #fff) left center / 8px 2px no-repeat,
        linear-gradient(#fff, #fff) right center / 8px 2px no-repeat;
}
#map-center-target::after {
    left: 50%; top: 50%; width: 15px; height: 15px;
    margin: -7.5px 0 0 -7.5px; box-sizing: border-box;
    border: 1.5px solid #fff; border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
}

/* ── Timeslider ───────────────────────────────────────────────── */
#timeslider-container {
    padding: 4px 12px 8px; background: #0f3460;
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
#timeslider-container label { color: #a0a0c0; font-size: 12px; white-space: nowrap; }
#timeslider-container button {
    background: #1a1a2e; color: #fff; border: 1px solid #0f3460;
    border-radius: 4px; padding: 4px 8px; font-size: 13px; cursor: pointer;
}
#timeslider-container button:hover { background: #e94560; }
/* Frecce giorno: stessa punta delle frecce ora + barra verticale */
#btn-day-prev, #btn-day-next {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 3px; line-height: 1;
}
#btn-day-prev::before, #btn-day-next::after {
    content: ''; display: block; width: 2px; height: 11px;
    background: currentColor; border-radius: 1px;
}
/* Frecce giorno: spente ai bordi della finestra t-1..t+4 */
#timeslider-container button:disabled { opacity: .35; cursor: default; }
#timeslider-container button:disabled:hover { background: #1a1a2e; }
#slider-track { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#slider-labels {
    position: relative; height: 14px;
    font-size: 10px; color: #a0a0c0; margin-top: 2px; user-select: none;
}
#slider-labels span { position: absolute; top: 0; white-space: nowrap; }
/* Flash orario in sovraimpressione alla mappa (50% -> svanisce in 3s) */
#date-flash {
    position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
    z-index: 1500; pointer-events: none;
    background: rgba(15, 52, 96, .9); color: #fff;
    font-size: 32px; font-weight: bold; padding: 6px 22px; border-radius: 9px;
    opacity: 0; transition: opacity 3s ease; white-space: nowrap;
}
#date-flash.show { opacity: .5; transition: none; }
#time-flash {
    position: absolute; top: 70px; left: 50%; transform: translateX(-50%);
    z-index: 1500; pointer-events: none;
    background: rgba(15, 52, 96, .9); color: #fff;
    font-size: 40px; font-weight: bold; padding: 8px 26px; border-radius: 10px;
    opacity: 0; transition: opacity 3s ease;
}
#time-flash.show { opacity: .5; transition: none; }
/* Flash selezione combo: stesso comportamento, sotto l'orario */
#param-flash {
    position: absolute; top: 156px; left: 50%; transform: translateX(-50%);
    z-index: 1500; pointer-events: none;
    background: rgba(15, 52, 96, .9); color: #fff;
    font-size: 32px; font-weight: bold; padding: 6px 22px; border-radius: 9px;
    opacity: 0; transition: opacity 3s ease; white-space: nowrap;
}
#param-flash.show { opacity: .5; transition: none; }
/* Flash messaggi (es. geoloc bloccata): stesso comportamento, testo a capo */
#msg-flash {
    position: absolute; top: 240px; left: 50%; transform: translateX(-50%);
    z-index: 1500; pointer-events: none; max-width: 80%;
    background: rgba(15, 52, 96, .9); color: #fff;
    font-size: 20px; font-weight: bold; padding: 8px 22px; border-radius: 10px;
    opacity: 0; transition: opacity 3s ease; text-align: center;
}
#msg-flash.show { opacity: .85; transition: none; }
#time-slider {
    width: 100%; accent-color: #e94560;
}
/* Barra avanzamento prefetch: un segmento per ora/step.
   Tratteggio = download attivo (max 2); grigio pieno = caricato/prefetchato;
   le ore non ancora in coda restano vuote. */
#slider-buffer {
    position: relative; height: 6px; margin: 0 2px;
}
#slider-buffer .pf-seg {
    position: absolute; top: 0; height: 6px; box-sizing: border-box;
    background: transparent; border-radius: 1px; opacity: .25;
    transition: background-color .15s ease, opacity .15s ease;
}
#slider-buffer .pf-seg.loading {
    background: repeating-linear-gradient(90deg,
        rgba(255, 255, 255, .88) 0 3px, transparent 3px 6px);
    opacity: .9;
}
#slider-buffer .pf-seg.on {
    background: #b0bec5; opacity: .95;
}
/* Ora della griglia 00-23 senza dato: quasi invisibile */
#slider-buffer .pf-seg.na {
    background: rgba(255, 255, 255, .10); opacity: .25;
}

/* ── Legend + Chat AI (stessa altezza, in basso a dx) ─────────── */
#legend-dock {
    position: absolute; bottom: 58px; right: 16px; z-index: 1000;
    display: flex; align-items: stretch; gap: 8px;
    /* contiene solo i due bottoni: niente barra a tutta larghezza, quindi
       non blocca piu' i tap su quella striscia di mappa */
    width: auto; max-width: calc(100vw - 32px); justify-content: flex-end;
}
/* ── Scala verticale (a sinistra, dal centro mappa in giu') ──────────
   Stile "sample scale 2": i valori sono scritti sul colore a cui
   corrispondono.
   top:50% = il "mirino" (centro della mappa), bottom:0 = tutto lo spazio
   fino al fondo. Larghezza 36px = pulsanti zoom/mirino, e left:0 per stare
   nella stessa colonna: e' la continuita' del controllo. Il lato sinistro
   e' a filo (niente raggio) per appoggiarsi al bordo.
   pointer-events:none = i tap passano alla mappa.

   Niente flex per la barra: prima la barra era un div vuoto con
   flex:1 dentro il pannello, e la sua altezza dipendeva dal flex-grow. Se il
   pannello non ha altezza definita, la barra resta a 0 e si vede solo il
   riquadro semitrasparente (e' successo). Qui tutto e' posizionato in
   assoluto: top/bottom sono calcolati sul alto REALE di titolo e unita'
   (misurato in updateLegend), quindi l'altezza non dipende da nessun layout
   indiretto. */
#legend-v {
    position: absolute; left: 0; top: 50%; bottom: 0; width: 36px;
    /* 900, non 1000: la legenda sta DENTRO #map (che viene dopo #header nel
       DOM), quindi a pari z-index vinceva lei e il menu della metrica le
       finiva sotto. Con 900 resta sopra le tile e sotto l'header e i suoi
       pannelli (1000/1600), che devono sempre coprirla. */
    z-index: 900; pointer-events: none;
    background: rgba(22, 33, 62, 0.55);
    border: 1px solid rgba(160, 200, 255, .35);
    border-left: none;
    border-radius: 0 10px 10px 0;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, .4);
}
#legend-v-title {
    position: absolute; top: 4px; left: 0; right: 0;
    font-size: 8px; line-height: 1.1; color: #dce9ff; text-align: center;
    font-weight: 600;
    overflow-wrap: anywhere;      /* parole lunghe vanno a capo, non fuori */
}
/* Il gradiente e' CSS (sempre visibile, non dipende dal canvas); il canvas
   e' solo lo strato dei NUMERI, trasparente sopra la barra. */
#legend-v-bar {
    position: absolute; left: 2px; right: 2px; top: 30px; bottom: 16px;
    border-radius: 2px;
}
#legend-v-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#legend-v-unit {
    position: absolute; bottom: 3px; left: 0; right: 0;
    font-size: 8px; color: #a9c6ea; text-align: center; font-weight: 600;
}

/* ── Status overlay (bottom-left) ─────────────────────────────── */
/* Lo stato sta a sinistra, ma la scala verticale occupa quella striscia
   (12px + 68px + 12px): senza questo scatto finirebbe sotto la legenda. */
#status-overlay {
    position: absolute; bottom: 58px; left: 96px; z-index: 1000;
    background: rgba(22, 33, 62, 0.9); border: 1px solid #0f3460;
    border-radius: 8px; padding: 6px 12px; font-size: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.4);
    color: #e0e0e0;
}

/* ── Site panel (old site style) ─────────────────────────────── */
#panel {
    position: fixed; top: 10px; right: 10px; z-index: 1000;
    background: rgba(255,255,255,0.97); padding: 12px 16px; border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,.3);
    width: min(440px, calc(100vw - 20px));
    max-width: calc(100vw - 20px);
    box-sizing: border-box; overflow: hidden;
    font-size: 13px; display: none;
}

#panel h3 { margin: 0 0 6px; font-size: 16px; }
#panel .sub { color: #555; margin-bottom: 8px; }
#panel img { max-width: 100%; border: 1px solid #ccc; border-radius: 4px; }
/* Modale consenso geolocalizzazione */
#geoModal.hidden { display: none; }
#geoModal { position: fixed; inset: 0; z-index: 4000; background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center; padding: 16px;
    box-sizing: border-box; }
.geo-box { background: #fff; border-radius: 14px; padding: 18px 16px 14px; width: 100%;
    max-width: 420px; box-shadow: 0 8px 30px rgba(0,0,0,.4); }
/* Icona dell'app in testa alla modale (stesso file del launcher) */
.geo-logo { display: block; width: 96px; height: 96px; margin: 0 auto 10px;
    border-radius: 22%; box-shadow: 0 4px 14px rgba(0,0,0,.28); }
.geo-title { font-size: 22px; font-weight: bold; margin-bottom: 4px; text-align: center; }
.geo-sub { font-size: 13px; color: #555; margin-bottom: 14px; text-align: center; }
.geo-btns { display: flex; gap: 8px; }
.geo-btns button { flex: 1; padding: 10px 4px; border-radius: 8px; font-size: 14px;
    cursor: pointer; }
#geoOk { background: #1976d2; color: #fff; border: none; font-weight: bold; }
/* unica azione sotto il filetto: larghezza piena, aspetto neutro */
#geoSkip { background: #f0f0f0; border: 1px solid #ccc; flex: 1 1 auto;
    padding: 11px 4px; font-size: 15px; }
/* filetto tra installazione e vie di fuga */
.geo-sep { height: 1px; background: #e0e0e0; margin: 14px 0 10px; }
.geo-note { font-size: 11px; color: #777; text-align: center; margin-top: 10px; line-height: 1.35; }
/* Installazione PWA: pulsante grande in alto */
#geoInstall { margin-bottom: 2px; }
#geoInstallBtn { width: 100%; padding: 13px 4px; border-radius: 10px; font-size: 16px;
    font-weight: bold; cursor: pointer; background: #1b5e20; color: #fff; border: none;
    box-shadow: 0 3px 10px rgba(27,94,32,.35); }
#geoInstallBtn:active { background: #14521b; }
#geoInstallIos { font-size: 12px; color: #555; line-height: 1.4; text-align: center; padding: 8px 4px; }
/* L'onboarding (installazione + prima posizione) e' roba da cellulare:
   su schermo largo non compare MAI, nemmeno se il JS sbaglia. */
@media (min-width: 1001px) {
    #geoModal { display: none !important; }
}

/* ── Avviso "installata" ──���────────────────────────────────────────── */
#install-done.hidden { display: none; }
#install-done { position: fixed; inset: 0; z-index: 4100; background: rgba(0,0,0,.6);
    display: flex; align-items: center; justify-content: center; padding: 16px;
    box-sizing: border-box; }
.id-box { background: #fff; border-radius: 14px; padding: 18px 16px 14px; width: 100%;
    max-width: 400px; box-shadow: 0 8px 30px rgba(0,0,0,.45); }
.id-title { font-size: 17px; font-weight: bold; margin: 4px 0 8px; text-align: center; }
.id-text { font-size: 13px; color: #444; line-height: 1.5; margin-bottom: 14px; text-align: center; }
.id-btns { display: flex; gap: 8px; }
.id-btns button { flex: 1; padding: 11px 4px; border-radius: 8px; font-size: 14px;
    cursor: pointer; }
#idOpen { background: #1b5e20; color: #fff; border: none; font-weight: bold; }
#idClose { background: #f0f0f0; border: 1px solid #ccc; }
.geo-box button { touch-action: manipulation; }
/* Pulsante compatto nel dock legenda */
#install-btn { margin-left: 6px; border-radius: 8px; border: 1px solid #1b5e20;
    background: rgba(27, 94, 32, 0.9); color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.4);
    font-size: 13px; font-weight: bold; padding: 6px 12px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    flex: 0 0 auto; white-space: nowrap; }
#install-btn:hover { background: #2e7d32; }
#install-btn.hidden { display: none; }
#imgWrap.wg-full { position: fixed; inset: 0; z-index: 3000;
    background: rgba(0,0,0,.93); display: flex; align-items: center;
    justify-content: center; padding: 12px; box-sizing: border-box; }
#imgWrap.wg-full img { max-width: 96vw; max-height: 94vh; width: auto;
    border: none; cursor: zoom-out; }
#panel .dates { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
#panel .dates button {
    padding: 3px 8px; border: 1px solid #999; border-radius: 4px;
    background: #fff; cursor: pointer; font-size: 12px;
}
#panel .dates button.active { background: #e8402e; color: #fff; border-color: #e8402e; }
#panel .close { float: right; cursor: pointer; font-size: 20px; color: #666; }
#panel .loading { color: #666; font-style: italic; }
/* Spinner per il caricamento windgram (schermo chiaro del panel) */
#panel .wg-spinner {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; padding: 40px 0; color: #666; font-size: 13px;
}
#panel .wg-spinner .spin-dk {
    width: 28px; height: 28px; border: 3px solid rgba(60, 60, 60, .2);
    border-top-color: #e8402e; border-radius: 50%;
    animation: wgSpin .9s linear infinite;
}
@keyframes wgSpin { to { transform: rotate(360deg); } }

/* ── Webcam carosello ────────────────────────────────────────── */
.webcams { display: flex; gap: 8px; overflow-x: auto; padding: 6px 2px; margin: 4px 0; scrollbar-width: thin; }
.webcams .cam { flex: 0 0 auto; border: 1px solid #ccc; border-radius: 6px; overflow: hidden; background: #fafafa; }
.webcams .cam a { display: block; padding: 6px 10px; font-size: 12px; color: #1f4e9c; text-decoration: none; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.webcams .cam a:active { background: #e8f0fa; }
.webcams .cam .cam-icon { display: block; text-align: center; font-size: 18px; padding-top: 6px; }

/* ── Webcam modal ─────────────────────────────────────────────── */
#webcamModal { position: fixed; inset: 0; z-index: 3000; display: none; background: rgba(0,0,0,.6); }
#webcamModal.open { display: block; }
#webcamModal .box { position: absolute; inset: 4vh 2vw; background: #fff; border-radius: 10px; display: flex; flex-direction: column; overflow: hidden; }
#webcamModal .head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #ddd; font-size: 14px; font-weight: 600; }
#webcamModal .head .x { margin-left: auto; cursor: pointer; font-size: 22px; color: #666; line-height: 1; padding: 0 4px; }
#webcamModal .head #wcOpenNew { font-size: 12px; color: #1f4e9c; text-decoration: none; padding: 3px 8px; border: 1px solid #1f4e9c; border-radius: 4px; margin-left: 8px; }
#webcamModal iframe { flex: 1; width: 100%; border: 0; }
#webcamModal #wcNote { padding: 24px; text-align: center; color: #ddd; font-size: 14px; background: #111; flex: 1; }
#webcamModal .imgwrap { flex: 1; overflow: auto; display: flex; background: #111; }
#webcamModal img { max-width: 100%; max-height: 100%; margin: auto; object-fit: contain; cursor: zoom-in; }
#webcamModal img.max { max-width: none; max-height: none; margin: 0; cursor: zoom-out; }
@media (max-width: 600px) { #webcamModal .box { inset: 2vh 0 0 0; border-radius: 10px 10px 0 0; } }

/* ── Point modal (HTML windgram) ─────────────────────────── */
#pointModal { position: fixed; inset: 0; z-index: 2000; display: none; background: rgba(0,0,0,.5); }
#pointModal.open { display: flex; align-items: center; justify-content: center; overflow-y: auto; }
.pm-box { background: #1a1a2e; color: #e0e0e0; border-radius: 10px; width: min(600px, 92vw);
           max-height: 88vh; overflow-y: auto; box-shadow: 0 4px 20px rgba(0,0,0,.6);
           font-family: monospace; font-size: 13px; margin: 0 auto; }
/* Su mobile il grafico (562px+) supera width 92vw: con align-items:center
   il box slitta fuori centro e i bordi vengono tagliati dall'overflow del
   flex container. Align top + margin:auto = centratura robusta. */
@media (max-width: 600px) {
    #pointModal.open { align-items: flex-start; padding: 2vh 0; }
    #pointModal.open .pm-box { width: 96vw; max-width: 96vw; }
    /* Recupero spazio verticale su XS: titolo +2pt piu' piccolo, spazi ridotti.
       Specificita' #pointModal.open serve per battere le regole base (dopo). */
    #pointModal.open .pm-head { font-size: 12px; padding: 6px 12px 3px; }
    #pointModal.open .pm-head .x { font-size: 18px; }
    #pointModal.open .pm-body { padding: 6px 10px; }
    /* Chip mobili: data compatta sopra, icona sotto, larghezza minima. */
    #pointModal.open .pm-dates { padding: 0 10px 0; gap: 5px; }
    #pointModal.open .pm-dates .pm-date { padding: 1px 3px 5px; font-size: 10px;
        min-width: 48px; min-height: 58px; flex-direction: column-reverse;
        gap: 0; border-radius: 10px; }
    #pointModal.open .pm-dates .pm-date-box { align-items: center; margin-top: -1px; }
    #pointModal.open .pm-dates .pm-wind-badge { bottom: 7px; }
    #pointModal.open .pm-dates .pm-fill { left: 3px; right: 3px; bottom: 2px;
        height: 4px; border-radius: 0 0 7px 7px; }
    #pointModal.open .pm-dates .pm-txt { display: none; }
    #pointModal.open .pm-dates .pm-dow { font-size: 8px; margin-top: 0; }
    #pointModal.open .pm-dates .pm-txt-c { display: block; font-size: 9px;
        font-weight: 700; line-height: 1; }
    #pointModal.open .pm-dates .pm-ico { width: 30px; height: 30px; }
    #pointModal.open .pm-dates .pm-ico svg { width: 30px; height: 30px; }
}
/* Header sticky: la X resta raggiungibile anche dopo lo scroll della
   modale (webcam in fondo). Serve anche al tour per il passo "indietro". */
.pm-head { position: sticky; top: 0; z-index: 6; background: #1a1a2e;
           display: flex; align-items: center; gap: 8px; padding: 10px 14px;
           border-bottom: 1px solid #333; font-size: 14px; font-weight: bold; color: #fff; }
.pm-head .x { margin-left: auto; cursor: pointer; font-size: 22px; color: #888; }
.pm-body { padding: 12px 14px; }
/* Run dei dati usata per compilare la modale: piccolo, in basso a destra. */
.pm-run { padding: 0 14px 9px; text-align: right; color: #7f88a8;
          font-size: 10px; line-height: 1.2; font-family: monospace;
          letter-spacing: .03em; user-select: text; }
.pm-run:empty { display: none; }
/* padding-bottom 10px -> 5px e .pm-date padding-bottom 4px -> 0px: si
   recupera esattamente lo spazio che occupa la barra (2px di margine +
   7px di altezza = 9px), quindi il riempimento NON sposta in basso il
   resto della modale. Sta dentro il chip, quindi se i chip vanno a capo
   su schermi stretti non si sovrappone alla riga sotto. */
.pm-dates { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 5px; }
.pm-dates .pm-date { position: relative; cursor: pointer; display: inline-flex;
    align-items: center; justify-content: center; gap: 5px; box-sizing: border-box;
    padding: 4px 10px 9px; border-radius: 14px;
    border: 2px solid var(--q, #3a3a5e); color: #aab; font-size: 13px;
    line-height: 1; user-select: none; }
.pm-ico { display: inline-flex; width: 20px; height: 20px; flex: 0 0 20px; }
.pm-ico svg { width: 20px; height: 20px; display: block; }
.pm-date-box { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.pm-txt-c { display: none; }
.pm-dow { font-size: 8px; line-height: 1; color: #9fb2c7; margin-top: 1px; letter-spacing: .15px; }
.pm-wind-badge { position: absolute; right: 1px; bottom: 7px; font-size: 10px; line-height: 1; }
.pm-fill { position: absolute; left: 4px; right: 4px; bottom: 3px;
           height: 5px; border-radius: 0 0 10px 10px;
           background: var(--q, transparent); pointer-events: none; }
/* Fill colorato della parte bassa del tasto.
   Il margine orizzontale è NEGATIVO e vale il padding del chip MENO 3px:
   il padding (12px) serve a non far toccare il testo al bordo, ma se il
   fill lo rispetta resta un blocchetto al centro (misurato 61px dentro un
   chip di 93px, rientro 16px). Il margine negativo lo annulla e i 3px
   finali sono il rientro richiesto: il fill arriva quasi al bordo ma
   resta DENTRO, e la curva non lo morde piu'.
   Rientro effettivo = 1px di bordo + 3px = 4px per lato.
   Raggio 10px = 14px della pillola meno i 4px di rientro.
   Margini verticali 1px+1px invece di 2px+0px: stessa altezza totale
   (9px), quindi il layout non si sposta. */
.pm-qual { display: none; }
.pm-qual-nodato { display: none; }
.pm-dates .pm-date:hover { background: #2a2a48; }
.pm-dates .pm-date.active { background: #e94560; border-color: var(--q, #e94560); color: #fff; font-weight: bold; }
.pm-body h4 { margin: 10px 0 4px; color: #e94560; font-size: 12px; text-transform: uppercase; }
.pm-body .row { display: flex; justify-content: space-between; padding: 2px 0; border-bottom: 1px solid #222; }
.pm-body .row .lbl { color: #888; }
.pm-body .row .val { color: #fff; font-weight: bold; }
.pm-body .row .val.good { color: #4caf50; }
.pm-body .row .val.marginal { color: #ff9800; }
.pm-body .row .val.poor { color: #f44336; }
.pm-body .row .val.excellent { color: #2196f3; }
.pm-wind { display: flex; align-items: flex-end; gap: 6px; margin: 6px 0; height: 120px; padding: 4px 0; }
.pm-wind .bar { display: flex; flex-direction: column; align-items: center; flex: 1; }
.pm-wind .bar .shaft { width: 2px; background: #4fc3f7; position: relative; }
.pm-wind .bar .flag { position: absolute; top: 0; width: 8px; height: 6px; background: #4fc3f7; left: 0; }
.pm-wind .bar .spd { font-size: 10px; color: #4fc3f7; margin-top: 2px; }
.pm-wind .bar .alt { font-size: 9px; color: #666; }
.pm-profile { display: flex; align-items: flex-end; gap: 1px; margin: 6px 0; height: 100px; }
.pm-profile .tbar { flex: 1; background: #e94560; min-width: 3px; border-radius: 1px 1px 0 0; }
.pm-thermal-bar { height: 20px; border-radius: 4px; margin: 4px 0; }

/* ── Point modal: grafico giorno (sfondo chiaro) ─────────────── */
.pm-box.chart { background: #fff; color: #222; font-family: sans-serif; }
.pm-box.chart .pm-head { border-bottom: 1px solid #ddd; color: #222; }
.pm-chart-wrap { display: flex; flex-direction: column; background: #fff;
                 border: 1px solid #ccc; border-radius: 6px;
                 padding-bottom: 22px;
                 overflow-x: auto; }  /* scroll orizzontale: 13 colonne non stanno in mobile */
.chart-head { display: flex; border-bottom: 1px solid #ccc; background: #f4f7fb;
              min-width: max-content; }  /* resta largo anche quando scrolli */
.chart-head-legend { width: 42px; text-align: center; font-size: 9px; color: #15508a;
                     font-weight: bold; display: flex; align-items: center; justify-content: center;
                     flex-shrink: 0;
                     /* due righe volute ("Ascend." / "m/s"): interlinea
                        stretta, altrimenti la spaziatura si mangia il
                        poco spazio in verticale della testata */
                     line-height: 1.02; }  /* non comprimere: sennò sparisce */
.chart-head-cols { display: flex; flex: 1; }
.chart-head-col { flex: 1 1 0; min-width: 40px; text-align: center; font-size: 10px;
                  font-weight: bold; color: #12337f; border-left: 1px solid #e5e5e5; padding: 1px 0; }
.chart-head-col:first-child { border-left: none; }
.chart-body { display: flex; min-width: max-content; }
.chart-grid { display: flex; flex: 1; position: relative; }
.chart-col { position: relative; flex: 1 1 0; min-width: 40px; border-left: 1px solid #e5e5e5;
             height: 504px; }  /* 560 - 10%: allineato a H nel JS (renderDailyChart) */
.chart-col:first-child { border-left: none; }
.chart-axis { position: relative; width: 42px; height: 504px; border-right: 1px solid #999;
              flex-shrink: 0; }  /* non comprimere: sennò sparisce */
.chart-y { position: absolute; right: 4px; font-size: 9px; color: #666; transform: translateY(50%); }
/* Quota del suolo: linea trasversale + etichetta. Sotto non c'e' profilo:
   senza, l'asse che parte da 0 sembra "la modale si apre a 0 m slm". */
.chart-ground { position: absolute; left: 0; right: 0; border-top: 1px dashed #8a8a8a;
                pointer-events: none; z-index: 2; }
/* Sotto la quota del suolo: grigio appena percepibile (non "cielo"). */
.chart-sotto-suolo { position: absolute; left: 0; right: 0; bottom: 0;
                     background: #f4f4f2; pointer-events: none; }
.chart-ground-lbl { position: absolute; left: 2px; top: -11px; font-size: 8px; color: #777;
                    background: rgba(255,255,255,.8); padding: 0 2px; }
.chart-unit { position: absolute; bottom: -15px; right: 4px; font-size: 8px; color: #777; }
.chart-h { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center;
           font-size: 10px; color: #444; }
/* ── Striscia sotto la linea delle ore (copertura per livello, pioggia,
      temperatura). Stesse misure di .chart-head-legend/.chart-head-col
      (42px + min-width 40px) così le celle cadono sulle colonne del
      grafico e scorrono con lui dentro .pm-chart-wrap. ────────────── */
.chart-strip { min-width: max-content; border-top: 1px solid #ccc;
               background: #fbfcfe;
               /* I testi delle ore sono .chart-h a bottom:-18px, quindi
                  sbordano 18px SOTTO .chart-body, nella zona dove partiva
                  la prima riga della striscia: "% alta" finiva sopra le
                  ore (misurato: 11px di sovrapposizione, tutta l'altezza
                  del testo). 22px = 18 di sbordamento + 4 di respiro. */
               padding-top: 22px; }
.strip-row { display: flex; }
.strip-lbl { width: 42px; flex-shrink: 0; font-size: 8px; color: #15508a;
             font-weight: bold; display: flex; align-items: center;
             justify-content: center; text-align: center; line-height: 1.1;
             /* "nuv. media" e' largo 41,2 px su 42: ci sta, ma l'elemento
                flex lo comprimeva e andava a capo. nowrap lo tiene su una
                riga senza toccare larghezze (l'allineamento con le colonne
                del grafico resta 42px). */
             white-space: nowrap; }
.strip-cells { display: flex; flex: 1; }
.strip-cell { flex: 1 1 0; min-width: 40px; height: 15px; border-left: 1px solid #e5e5e5;
              font-size: 8px; font-weight: bold; color: #fff; display: flex;
              align-items: center; justify-content: center;
              /* Contorno scuro di 1 px in 4 direzioni: e' l'equivalente CSS
                 della path_effects withStroke(linewidth=1.8) con cui
                 charts.py disegna il numero bianco sulle celle. Con un
                 semplice text-shadow sfocato il "%" diventava illeggibile
                 sotto il 15%: la cella chiara e il testo bianco sparivano
                 insieme. */
              text-shadow: -1px 0 0 #444, 1px 0 0 #444, 0 -1px 0 #444, 0 1px 0 #444; }
.strip-cell:first-child { border-left: none; }
.strip-cell.vuota { background: transparent !important; }
.cloud { position: absolute; left: 50%; margin-left: -10px; font-size: 15px; transform: translateY(50%); }
.bl-line { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid #1a6feb; }
.bl-line::after { content: 'BL'; position: absolute; right: 2px; top: -9px; font-size: 8px; color: #1a6feb; }
.ml-line { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px dashed #9c27b0; }
.ml-line::after { content: 'ML'; position: absolute; right: 2px; top: -9px; font-size: 8px; color: #9c27b0; }
.pm-summary { margin: 8px 0 4px; padding: 6px 10px; background: #f4f8ff; border-radius: 6px;
              font-size: 12px; color: #15508a; }
.pm-summary b { color: #0d3b6e; }

/* Diagramma modale: bande gradiente + frecce vento con km/h */
.grad-band { position: absolute; left: 0; right: 0; }
.wind-arrow { position: absolute; left: 50%; transform: translate(-50%, -50%); display: flex;
              align-items: center; gap: 2px; }
.wind-arrow svg { flex-shrink: 0; }
.wind-arrow .wspd { font-size: 9px; color: #12337f; font-weight: bold; }

/* Marker modale: triangolo tetto, nuvoletta cumulo, nuvoletta sovrasviluppi */
.red-tri { position: absolute; left: 50%; margin-left: -7px; transform: translateY(-50%); }
.thunder { position: absolute; left: 50%; margin-left: -12px; transform: translateY(-50%); }
.cloud svg, .thunder svg { display: block; }

/* Fiocco zero termico: bianco pieno, posizionato, con ombra per il contrasto */
.snow { position: absolute; left: 50%; margin-left: -7px; transform: translateY(-50%);
        filter: drop-shadow(0 0 2px rgba(0,0,0,.55)); }
.snow svg { display: block; }

/* Ascendenza m/s sopra la colonna oraria */
.asc-top { position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
           background: #fff; border: 1px solid #9ab; border-radius: 8px;
           padding: 0 5px; font-size: 10px; font-weight: bold; color: #12337f;
           z-index: 3; white-space: nowrap; }


/* Legenda in calce al grafico, analogamente al windgram notturno. */
.pm-chart-legend { display: flex; flex-wrap: wrap; align-items: flex-end;
    gap: 8px 16px; margin: 10px 12px 6px; padding: 8px 0 4px;
    border-top: 1px solid #e3e8ef; color: #333; font: 10px/1.25 sans-serif; }
.pm-legend-symbols { flex: 1 1 210px; display: flex; flex-wrap: wrap;
    align-items: center; gap: 7px 16px; }
.pm-legend-symbol { display: inline-flex; align-items: center; gap: 4px;
    white-space: nowrap; }
.pm-legend-tri { display: inline-block; width: 0; height: 0;
    border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-bottom: 9px solid #d42020; }
.pm-legend-cloud { width: 18px; height: 12px; display: block; flex: 0 0 18px; }
.pm-legend-gradient { flex: 1 1 240px; max-width: 360px; }
.pm-legend-title { color: #15508a; font-weight: bold; font-size: 9px;
    margin-bottom: 2px; }
.pm-legend-bar { height: 10px; border: 1px solid #999; border-radius: 2px;
    background: linear-gradient(90deg, #6d8fc4 0%, #93b3d4 18%,
        #7fc0a8 36%, #e0c341 65%, #ef8436 82%, #c0392b 100%); }
.pm-legend-scale { display: flex; justify-content: space-between;
    font-size: 8px; color: #555; margin-top: 1px; }
@media (max-width: 600px) {
    .pm-chart-legend { margin-left: 10px; margin-right: 10px; }
    .pm-legend-gradient { max-width: none; }
}

/* Sotto-titolo modale (come le immagini: data, ore, modello) */
/* Sotto-titolo modale (come le immagini: data, ore, modello) */
.pm-sub { padding: 4px 14px 6px; font-size: 11px; color: #556; background: #f7fafd;
          border-bottom: 1px solid #e3e8ef; }

/* Carosello webcam nella modale punto */
.pm-cams { border-bottom: 1px solid #e3e8ef; background: #fafbfe; padding: 8px 10px; }
.pm-cams-head { display: flex; justify-content: space-between; font-size: 12px;
                color: #0d3b6e; margin-bottom: 6px; }
.pm-cam-count { color: #667; font-size: 11px; }


/* Spinner + loader iniziale cartina e loading grafico modale */
#appLoader { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center;
             justify-content: center; gap: 10px; background: #16213e; color: #eee;
             font: 600 15px sans-serif; }
.spin { width: 22px; height: 22px; border: 3px solid rgba(255,255,255,.25);
        border-top-color: #4fc3f7; border-radius: 50%;
        animation: spin 0.8s linear infinite; display: inline-block; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.pm-loading { display: flex; align-items: center; justify-content: center; gap: 10px;
              padding: 28px 0; color: #15508a; font: 600 14px sans-serif; }

/* Toggle overlay topografico (sopra i colori) */
#topo-toggle-wrap { display: inline-flex; align-items: center; gap: 5px;
                    font-size: 12px; font-weight: bold; color: #cfe3ff; cursor: pointer;
                    user-select: none; white-space: nowrap;
                    border: 1px solid #2a5c9a; border-radius: 4px; padding: 3px 8px;
                    background: rgba(20,60,110,.5); }
#topo-toggle { accent-color: #4fc3f7; cursor: pointer; }

/* Badge livello di zoom */
#zoom-label { font: 700 13px monospace; color: #8fd3ff; background: rgba(15,52,96,.85);
              border: 1px solid #2a5c9a; border-radius: 4px; padding: 3px 8px;
              user-select: none; white-space: nowrap; }

/* Bottone "mia posizione": terzo tasto della barra zoom (continuo, senza spazi) */
/* Toggle layer sempre visibile e cliccabile anche a pannello aperto:
   la lista slitta a sx e lascia spazio al pulsante in alto a dx */
/* Anello long-press 3s: si allarga e sfuma, poi ricentra sulla posizione */
.longpress-ring { position: absolute; width: 64px; height: 64px; margin: -32px 0 0 -32px;
                  border: 3px solid #1976d2; border-radius: 50%;
                  opacity: 0.9; pointer-events: none; z-index: 800; transform: scale(0.3); }
.longpress-ring.go { transition: transform 3s linear, opacity 3s linear;
                     transform: scale(1.6); opacity: 0.15; }
.leaflet-control-layers-expanded { position: relative; padding-right: 54px !important; }
.leaflet-control-layers-expanded .leaflet-control-layers-toggle { display: block !important;
    position: absolute; top: 6px; right: 6px; }
.leaflet-control-zoom .leaflet-control-zoom-out { border-bottom-left-radius: 0 !important;
                                                  border-bottom-right-radius: 0 !important; }
.leaflet-control-zoom .locate-btn { border-top: 1px solid #ccc;
                                    border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;
                                    display: flex !important; align-items: center; justify-content: center; }
.leaflet-control-zoom .locate-btn svg { width: 22px; height: 22px; }
.leaflet-control-zoom .locate-btn.locating { pointer-events: none; opacity: 0.5; }
/* Pulsanti zoom/mirino grandi come il toggle layer (36px) e al 50%;
   opachi solo al passaggio sopra */
.leaflet-control-zoom a { width: 36px !important; height: 36px !important;
                          line-height: 36px !important; font-size: 22px !important; }
.leaflet-control-zoom { opacity: 0.5; transition: opacity 5s ease; }
@media (hover: hover) {
    .leaflet-control-zoom:hover { opacity: 1; transition-duration: 0.15s; }
}
/* Tap/click (anche touch, dove l'hover resta incollato): opaco subito, fade 5s */
.leaflet-control-zoom.lit { opacity: 1; transition-duration: 0.15s; }

/* ── Chat AI panel ── */
#chat-btn { margin-left: 10px; padding: 4px 10px; border-radius: 6px; border: 1px solid #2a6fb5;
            background: #12406b; color: #dcebff; cursor: pointer; font-size: 12px; }
/* Pannello layer custom: icona sempre togglabile anche su touch.
   Chiuso e' semitrasparente come lo zoom (+/-/geoloc); aperto torna
   opaco, cosi' il pannello resta leggibile. */
.m2-layers { background: #fff; border: 2px solid rgba(0,0,0,0.2); border-radius: 5px;
    background-clip: padding-box; opacity: 0.5; transition: opacity 5s ease; }
.m2-layers:hover, .m2-layers.open { opacity: 1; transition-duration: 0.15s; }
.m2-layers-toggle { display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; }
.m2-layers-panel { display: none; padding: 4px 10px 8px 6px; }
.m2-layers.open .m2-layers-panel { display: block; }
.m2-layers-head { font-size: 12px; font-weight: bold; color: #666;
    padding: 8px 4px 4px 4px; cursor: pointer; }
/* Opzioni dentro il menu Livelli: decolli, lingua e (solo xs) info. */
.m2-layers-extra { border-bottom: 1px solid #e2e2e2; margin: 0 4px 4px;
    padding: 2px 0 4px; }
.m2-extra-row { display: flex; align-items: center; gap: 8px;
    padding: 6px 2px; font-size: 13px; color: #333; }
.m2-layers-extra #pins-label { font-size: 12px; opacity: .8; }
.m2-layers-extra #pins-select { flex: 1 1 auto; min-width: 0;
    font-size: 13px; padding: 3px 5px; }
/* Combo "Weather data" nel menu Livelli (spostata dal header). */
.m2-layers-extra .m2-model-row { display: flex; align-items: center; gap: 8px; }
.m2-layers-extra .m2-model-row label { font-size: 12px; opacity: .8; }
.m2-layers-extra .m2-model-row select { flex: 1 1 auto; min-width: 0;
    font-size: 13px; padding: 3px 5px; }
.m2-extra-lbl { font-size: 12px; color: #444; font-weight: 600; }
.m2-layers-extra #lang-btn { margin-left: auto; }
#lang-menu.m2-lang-inline { position: static; top: auto; right: auto;
    z-index: auto; width: 100%; min-width: 0; padding: 2px 0 4px;
    box-shadow: none; border-radius: 6px; }
.m2-extra-info { display: none; }
.m2-extra-mirror { font-size: 11px; line-height: 1.2; }
@media (max-width: 600px) {
    .m2-extra-info { display: flex; flex-wrap: wrap; align-items: center;
        gap: 6px; padding: 7px 2px 2px; border-top: 1px solid #eee; }
    .m2-extra-mirror.m2-info-zoom { font: 700 11px monospace; color: #15508a; }
    .m2-extra-mirror.model-badge { background: #e94560; color: #fff;
        border-radius: 3px; padding: 2px 6px; font-weight: 700; }
    .m2-extra-mirror.model-badge.model-eu { background: #1f4e9c; }
    .m2-extra-mirror.m2-info-count { color: #333; }
}
.m2-layers-panel label { display: flex; align-items: center; gap: 8px;
    padding: 8px 4px; font-size: 14px; white-space: nowrap; cursor: pointer; }
/* Ultima riga del menu Livelli: apre l'About (crediti e licenze). */
/* La barra attribuzioni di Leaflet e' nascosta: il suo contenuto vive nell'About. */
.leaflet-control-attribution { display: none !important; }
.m2-about-row { display: flex; align-items: center; width: 100%;
    margin-top: 6px; padding: 8px 4px; font-size: 14px; cursor: pointer;
    background: none; border: none; border-top: 1px solid #ddd; color: #333; }
#aboutModal { position: fixed; inset: 0; z-index: 2000; display: none; background: rgba(0,0,0,.5); }
#aboutModal.open { display: flex; align-items: center; justify-content: center; overflow-y: auto; }
.about-box { font-family: sans-serif; }
.about-body p { margin: 8px 14px; line-height: 1.5; font-size: 13px; }
.about-body a { color: #8fd3ff; }
/* Intestazione di una sezione tematica in fondo al pannello (es. TERMICHE). */
.m2-layers-section { margin: 10px 4px 2px; padding-top: 8px;
    border-top: 1px solid #ddd; font-size: 10px; font-weight: bold;
    letter-spacing: .08em; color: #8a8a8a; }
.m2-layers-panel input[type="checkbox"] { width: 20px; height: 20px; }
.m2-layers-panel label.m2-pin-alt-row { padding-left: 4px; font-size: 13px; }
#chat-btn:hover { background: #1a5590; }
/* Buca di ricerca stile Google: stessa su desktop e XS. */
.chat-search { display: flex; align-items: center; gap: 4px; height: 44px;
    width: 360px; max-width: calc(100vw - 32px); padding: 0 14px;
    box-sizing: border-box; border: 1px solid #dfe3e8; border-radius: 22px;
    background: #fff; color: #202124;
    box-shadow: 0 2px 8px rgba(0,0,0,.18); flex: 0 0 auto; }
.chat-search-ico { order: 2; display: inline-flex; align-items: center;
    justify-content: center; width: 26px; height: 26px; background: none;
    border: 0; padding: 0; color: #5f6368; opacity: 1; cursor: pointer;
    flex: 0 0 26px; line-height: 1; }
.chat-search-ico svg { width: 24px; height: 24px; display: block; }
.chat-search-ico:hover { transform: scale(1.08); }
#chat-search-input { order: 1; flex: 1 1 auto; width: auto; min-width: 0;
    border: 0; outline: none; background: transparent; color: #202124;
    font-size: 15px; padding: 0 2px; }
#chat-search-input::placeholder { color: #70757a; opacity: 1; }
#chat-search-mic { order: 3; display: inline-flex; align-items: center;
    justify-content: center; width: 30px; height: 30px; background: none;
    border: 0; color: #5f6368; cursor: pointer; padding: 0; line-height: 1;
    flex: 0 0 30px; }
#chat-search-mic svg { width: 27px; height: 27px; display: block; }
#chat-search-mic.rec { color: #e94560; animation: micPulse 1s infinite; }
#chat-search-mic:hover { transform: scale(1.12); }
.chat-search-tip { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px);
    z-index: 1001; padding: 9px 12px; border: 1px solid #d6dbe1;
    border-radius: 12px; background: #fff; color: #3c4043;
    box-shadow: 0 4px 14px rgba(0,0,0,.2); font: 12px/1.35 sans-serif;
    pointer-events: none; }
.chat-search-tip::after { content: ''; position: absolute; left: 24px;
    top: 100%; border: 7px solid transparent; border-top-color: #fff;
    filter: drop-shadow(0 1px 0 #d6dbe1); }
/* Chat AI nel dock legenda: stessa altezza/grafica/trasparenza */
#legend-dock #chat-btn {
    margin-left: 0; border-radius: 8px; border: 1px solid #0f3460;
    background: rgba(22, 33, 62, 0.9); color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.4);
    font-size: 13px; font-weight: bold; padding: 6px 14px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    flex: 0 0 auto; white-space: nowrap;
}
#legend-dock #chat-btn:hover { background: rgba(35, 55, 95, 0.95); }
#chat-panel { position: absolute; left: 50%; transform: translateX(-50%);
              bottom: calc(58px + 44px + 8px);
              width: min(420px, calc(100vw - 24px)); max-height: 60vh;
              background: #fff; border: 1px solid #d6dbe1; border-radius: 12px;
              box-shadow: 0 5px 20px rgba(0,0,0,.24);
              display: flex; flex-direction: column; z-index: 1100; }
#chat-panel.hidden { display: none; }
#chat-head { padding: 9px 12px; font-weight: 700; color: #1a73e8;
             border-bottom: 1px solid #e5e7eb; display: flex;
             justify-content: space-between; align-items: center; }
.chat-close { cursor: pointer; color: #5f6368; font-weight: 400; }
.chat-close:hover { color: #202124; }
#chat-msgs { padding: 10px; overflow-y: auto; flex: 1; min-height: 120px; max-height: 40vh;
             font-size: 13px; line-height: 1.45; color: #202124; white-space: pre-wrap; }
.chat-msg { margin-bottom: 8px; padding: 7px 9px; border-radius: 8px; }
.chat-msg.user { background: #e8f0fe; color: #202124; margin-left: 24px; }
.chat-msg.bot { background: #f1f3f4; color: #202124; margin-right: 24px; white-space: pre-line; }
.chat-open-point { display: inline-block; margin-top: 5px; color: #1a73e8;
    font-weight: 600; text-decoration: none; }
.chat-open-point:hover { text-decoration: underline; }
/* Puntini che ballano mentre la chat attende la risposta */
.chat-typing { display: inline-flex; gap: 6px; padding: 2px 0; }
.chat-typing span { width: 8px; height: 8px; border-radius: 50%; background: #9fc2e8;
    animation: chatBounce 1.2s infinite ease-in-out; }
.chat-typing span:nth-child(2) { animation-delay: -0.4s; }
.chat-typing span:nth-child(3) { animation-delay: -0.2s; }
@keyframes chatBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .5; }
    30% { transform: translateY(-6px); opacity: 1; }
}
.chat-msg.err { background: #fce8e6; color: #a50e0e; }
#chat-input-row { display: none !important; }
#chat-input { flex: 1; padding: 7px 9px; border-radius: 6px; border: 1px solid #2a6fb5;
              background: #0b2847; color: #e8f2fc; font-size: 13px; }
#chat-mic { background: transparent; border: none; font-size: 18px; cursor: pointer;
    transition: transform .15s; }
#chat-mic:hover { transform: scale(1.15); }
#chat-mic.rec { color: #e94560; animation: micPulse 1s infinite; }
@keyframes micPulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
#chat-input-row button { padding: 6px 12px; border-radius: 6px; border: 1px solid #2a6fb5;
                         background: #12406b; color: #dcebff; cursor: pointer; }

/* Galleggiante webcam: nascosto di default (desktop e modale senza webcam),
   attivo solo su XS nella media query sotto. */
#pmCamFab { display: none; }

/* Nome sito sotto la bandierina: tooltip PERMANENTI, nascosti di default;
   visibili solo quando il container mappa ha .z11plus (zoom >= 11, JS). */
.leaflet-container .leaflet-tooltip.site-label { visibility: hidden; opacity: 0; }
.leaflet-container.z11plus .leaflet-tooltip.site-label { visibility: visible; opacity: 1; }
.leaflet-tooltip.site-label {
    background: rgba(15, 52, 96, 0.92); color: #fff;
    border: 1px solid #0f3460; border-radius: 4px;
    padding: 2px 7px; font-size: 11px; font-weight: bold;
    box-shadow: 0 1px 4px rgba(0,0,0,.4); white-space: nowrap;
}

/* Nomi delle montagne: testo centrato sulla vetta, senza riquadro (solo
   alone chiaro per restare leggibile su tutti i colori del modello). */
.peak-label-icon { background: none !important; border: 0 !important;
                   pointer-events: none !important; }
.peak-label {
    position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
    white-space: nowrap; pointer-events: none;
    font: 600 10px/1.15 system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #1b2a38;
    text-shadow: 0 0 2px #fff, 0 0 3px #fff, 0 1px 2px rgba(0,0,0,.55);
}
.peak-label::before {
    content: ''; display: inline-block; width: 4px; height: 4px;
    margin-right: 3px; border-radius: 50%; vertical-align: middle;
    background: #263238; box-shadow: 0 0 0 1px rgba(255,255,255,.9);
}
@media (max-width: 600px) {
    .peak-label { font-size: 9px; }
}
/* NB: visibility (non display:none) perche' Leaflet calcola la posizione
   del tooltip con le dimensioni reali: con display:none il primo frame a
   z11 risulta disassato (dims 0) e si allinea solo al frame successivo. */
.leaflet-tooltip.site-label::before {
    border-top-color: rgba(15, 52, 96, 0.92);  /* freccia che punta alla bandierina (tooltip in alto) */
}

/* Solo XS: galleggiante tondo semitrasparente in basso a sx → webcam */
@media (max-width: 600px) {
    #pmCamFab {
        position: fixed; left: 14px; bottom: 86px; z-index: 2900;
        display: flex; align-items: center; gap: 5px;
        padding: 12px 14px; border: none; cursor: pointer;
        border-radius: 999px; background: rgba(15, 52, 96, 0.65);
        color: #fff; font-size: 12px; font-weight: bold;
        backdrop-filter: blur(2px); box-shadow: 0 2px 8px rgba(0,0,0,.35);
        /* abbassato di un'altezza pari alla sua */
        transform: translateY(100%);
    }
    #pmCamFab:active { background: rgba(233, 69, 96, 0.8); }
}

/* ── Mobile (max 600px) ───────────────────────────────────────── */
@media (max-width: 600px) {
    #header { flex-wrap: nowrap; row-gap: 0; gap: 6px; }
    #header .header-left { display: flex; flex: 1 1 auto; min-width: 0; gap: 6px; }
    #header .header-right { display: flex; flex: 0 0 auto; align-items: center; }
    #header select { padding: 4px 6px; font-size: 24px; min-width: 0; }
    #param-select { flex: 2.2 1 0; }
    #date-select { flex: 1 1 0; }
    #header .header-right { display: flex; }
    #header .header-right #pins-label { display: none; }
    #header .header-right #pins-select { font-size: 11px; padding: 2px 3px; }
    /* Il dock contiene solo Chat e Installazione (la legenda e' la scala
       verticale a sinistra): resta in basso a destra, altrimenti sui
       telefoni finirebbe sotto la scala. */
    /* Lascia libera la colonna della legenda verticale a sinistra. */
    #legend-dock { position: fixed; left: 42px; right: 10px;
        bottom: calc(58px + env(safe-area-inset-bottom, 0px)); width: auto;
        display: block; max-width: none; z-index: 1800;
        padding-left: 0; padding-right: 0; }
    #legend-dock #chat-btn { font-size: 12px; padding: 4px 10px; }
    /* Stessa buca Google, a tutta larghezza nello spazio disponibile. */
    #chat-search { width: 100%; max-width: none; height: 52px; padding: 0 16px;
        gap: 6px; border-radius: 26px; }
    #chat-search-input { font-size: 16px; }
    .chat-search-ico { width: 28px; height: 28px; flex-basis: 28px; }
    .chat-search-ico svg { width: 26px; height: 26px; }
    #chat-search-mic { width: 32px; height: 32px; flex-basis: 32px; }
    #chat-search-mic svg { width: 29px; height: 29px; }
    #legend-dock #install-btn { position: absolute; right: 0;
        bottom: calc(100% + 8px); }
    #chat-panel { bottom: calc(58px + 52px + 8px); width: calc(100vw - 20px); }
    #zoom-label, #model-badge, #info-label { display: none; }
    /* #net-badge resta: su telefono e' l'unico avviso di rete assente */
    #chat-btn { margin-left: 0; font-size: 14px; padding: 6px 8px; white-space: nowrap; }
    #timeslider-container { flex-wrap: wrap; padding: 4px 8px 6px; }
    #slider-track { min-width: 120px; }
    #map { min-height: 0; }
}

/* ── Barra in alto (21/10/2026): pillola metrica + chip dei giorni ──────
   Sostituiscono i due <select> visibili. I select restano nel DOM,
   nascosti (.hdr-sr): sono la fonte dei valori per il resto del codice. */
.hdr-sr { position: absolute !important; width: 1px; height: 1px;
          padding: 0 !important; margin: -1px; overflow: hidden;
          clip-path: inset(50%); border: 0 !important; white-space: nowrap; }

.hdr-ctl { position: relative; flex: 0 0 auto; display: flex;
           flex-direction: column; align-items: flex-start; justify-content: center;
           gap: 3px; height: 48px; }
.hdr-loc { display: block; width: 150px; max-width: 150px;
           font-size: 14px; line-height: 1; font-weight: 400; color: #fff;
           padding-left: 12px; overflow: hidden; text-overflow: ellipsis;
           white-space: nowrap; opacity: .95; }
.hdr-loc-spin { position: absolute; right: 4px; top: 50%; width: 12px; height: 12px;
                transform: translateY(-50%); border: 2px solid rgba(255,255,255,.28);
                border-top-color: #fff; border-radius: 50%; pointer-events: none;
                animation: hdr-loc-spin .7s linear infinite; }
.hdr-loc-spin[hidden] { display: none; }
@keyframes hdr-loc-spin {
    from { transform: translateY(-50%) rotate(0deg); }
    to   { transform: translateY(-50%) rotate(360deg); }
}
.hdr-pill { display: inline-flex; align-items: center; gap: 8px;
            background: rgba(255,255,255,.08); color: #fff;
            border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
            padding: 6px 12px; font-size: 14px; cursor: pointer;
            transition: background .15s, border-color .15s; }
.hdr-pill:hover { background: rgba(255,255,255,.15); }
.hdr-pill-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
                opacity: .65; }
.hdr-chev { opacity: .7; font-size: 10px; }

.hdr-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 1600;
             display: none; min-width: 250px; max-height: 60vh; overflow: auto;
             background: #16213e; border: 1px solid rgba(255,255,255,.14);
             border-radius: 14px; padding: 6px;
             box-shadow: 0 16px 40px rgba(0,0,0,.45); }
.hdr-panel.open { display: block; }
.hdr-grp { font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
           color: rgba(255,255,255,.62); padding: 8px 10px 4px; }
.hdr-opt { display: flex; align-items: center; gap: 10px; width: 100%;
           border: 0; background: transparent; color: #fff; text-align: left;
           padding: 9px 10px; border-radius: 9px; font-size: 14px; cursor: pointer; }
.hdr-opt:hover { background: rgba(255,255,255,.08); }
.hdr-opt .ico { width: 20px; text-align: center; opacity: .9; }
.hdr-opt .ok { margin-left: auto; color: #e94560; font-weight: 700; opacity: 0; }
.hdr-opt.sel { background: rgba(233,69,96,.14); }
.hdr-opt.sel .ok { opacity: 1; }

.hdr-dates { display: flex; gap: 4px; background: rgba(0,0,0,.18); padding: 4px 6px;
             border-radius: 999px; overflow-x: auto; max-width: 40vw;
             scrollbar-width: none; scroll-padding-inline: 6px; }
.hdr-dates::-webkit-scrollbar { display: none; }
.hdr-chip { position: relative; display: inline-flex; align-items: center;
            justify-content: center; gap: 5px; box-sizing: border-box;
            border: 2px solid var(--q, transparent);
            background: rgba(0,0,0,.08); color: rgba(255,255,255,.82); cursor: pointer;
            padding: 4px 9px 9px; border-radius: 12px; font-size: 13px;
            line-height: 1; white-space: nowrap; }
.hdr-chip:hover { color: #fff; }
.hdr-chip.on { background: #e94560; color: #fff; font-weight: 600;
               border-color: var(--q, #e94560); }
.hdr-chip-ico { display: inline-flex; width: 22px; height: 22px; flex: 0 0 22px; }
.hdr-chip-ico svg { width: 22px; height: 22px; display: block; }
.hdr-chip-date { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.hdr-chip-txt-c { display: none; }
.hdr-chip-dow { font-size: 9px; line-height: 1; color: #a9bdd0; margin-top: 1px; letter-spacing: .15px; }
.hdr-chip-temp { font-size: 11px; color: #d8e8f5; }
.hdr-chip-wind { position: absolute; right: 1px; bottom: 7px; font-size: 10px; line-height: 1; }
/* Bordo + area fillata in basso: entrambi con il colore qualita'. */
.hdr-chip-fill { position: absolute; left: 4px; right: 4px; bottom: 3px;
                 height: 4px; border-radius: 0 0 8px 8px;
                 background: var(--q, transparent); pointer-events: none; }
.hdr-chip-qual { display: none; }

@media (max-width: 600px) {
  .hdr-pill { padding: 6px 9px; font-size: 13px; gap: 5px; }
  .hdr-pill-lbl { display: none; }
  .hdr-ctl { height: 48px; }
  .hdr-loc { width: 118px; max-width: 118px; padding-left: 9px; font-size: 13px; }
  .hdr-loc-spin { right: 2px; width: 11px; height: 11px; }
  /* I chip prendono lo spazio che resta e scorrono; la sfumatura a destra
     fa capire che ce ne sono altri (prima si vedeva un pezzo di chip
     tagliato a meta', che sembrava un difetto). */
  .hdr-dates { max-width: none; flex: 1 1 auto; min-width: 0;
               padding: 5px 7px; border-radius: 14px;
               -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
               mask-image: linear-gradient(to right, #000 88%, transparent); }
  /* Mobile: data compatta sopra, icona sotto; niente testo di condizione. */
  .hdr-chip { min-width: 48px; min-height: 58px; padding: 2px 3px 6px;
              flex-direction: column-reverse; gap: 0; border-radius: 10px;
              font-size: 10px; }
  .hdr-chip-date { align-items: center; margin-top: -1px; }
  .hdr-chip-txt { display: none; }
  .hdr-chip-temp { display: none; }
  .hdr-chip-txt-c { display: block; font-size: 9px; font-weight: 700;
                    line-height: 1; white-space: nowrap; }
  .hdr-chip-dow { font-size: 8px; margin-top: 0; }
  .hdr-chip-ico { width: 30px; height: 30px; flex-basis: 30px; }
  .hdr-chip-ico svg { width: 30px; height: 30px; }
  .hdr-chip-wind { right: 1px; bottom: 7px; font-size: 10px; }
  .hdr-chip-fill { left: 3px; right: 3px; bottom: 2px; height: 4px;
                   border-radius: 0 0 7px 7px; }
  .hdr-panel { min-width: 84vw; }
}

/* ── Selettore lingua (26/10/2026) ───────────────────────────────── */
#lang-btn{background:none;border:0;font-size:17px;line-height:1;cursor:pointer;
  padding:2px 4px;border-radius:6px;vertical-align:middle}
#lang-btn:hover{background:rgba(255,255,255,.15)}
#lang-menu{position:fixed;top:44px;right:10px;z-index:1400;background:#fff;
  border-radius:8px;box-shadow:0 3px 14px rgba(0,0,0,.28);padding:4px;display:none;
  min-width:140px}
#lang-menu.open{display:block}
#lang-menu button{display:block;width:100%;text-align:left;background:none;border:0;
  padding:7px 10px;font:13px/1.2 sans-serif;color:#222;cursor:pointer;border-radius:5px}
#lang-menu button:hover{background:#eef2f8}
#lang-menu button.sel{background:#e3ecf7;font-weight:600}

/* ── Fondo "Strade": MapLibre trasparente sopra i colori meteo ──────
   Il canvas non deve intercettare tap/pan: la mappa resta Leaflet. */
.leaflet-strade-pane,
.leaflet-strade-pane .maplibregl-map,
.leaflet-strade-pane .maplibregl-canvas-container,
.leaflet-strade-pane .maplibregl-canvas {
  pointer-events: none !important;
  background: transparent !important;
}

/* ── Personalizzazione Strade nel menu Livelli (produzione, 31/10/2026) ──
   Pannello compatto: colori, stile cartina, alone nomi, laghi. Le modifiche
   sono live e restano nel browser; si vede solo quando Strade è attivo. */
.m2-strade-box { margin: 2px 0 6px; padding: 4px 2px 6px; }
.m2-strade-row { display: flex !important; align-items: center; justify-content: space-between;
    gap: 8px; padding: 5px 4px !important; font-size: 12px !important;
    white-space: nowrap; cursor: default; }
.m2-strade-row > span:first-child { flex: 1 1 auto; color: #333; }
.m2-strade-row select { max-width: 128px; font-size: 12px; padding: 3px 4px;
    border: 1px solid #bbb; border-radius: 4px; background: #fff; color: #222; }
.m2-strade-row input[type="color"] { width: 34px; height: 24px; padding: 1px;
    border: 1px solid #bbb; border-radius: 4px; background: #fff; cursor: pointer; }
.m2-strade-row input[type="range"] { width: 88px; accent-color: #1976d2; }
.m2-strade-row input[type="checkbox"] { width: 18px; height: 18px; margin: 0; }
.m2-strade-val { min-width: 28px; text-align: right; color: #666;
    font-size: 11px; font-variant-numeric: tabular-nums; }
.m2-strade-actions { display: flex; gap: 6px; margin: 5px 4px 0; }
.m2-strade-actions button { border: 1px solid #bbb; border-radius: 4px;
    background: #f4f6f8; color: #333; font-size: 11px; padding: 5px 9px; cursor: pointer; }
.m2-strade-actions button:hover { background: #e8eef5; }
.m2-strade-hint { margin: 5px 4px 0; font-size: 10px; color: #888; line-height: 1.3;
    white-space: normal; }
/* Il pannello con tutti i controlli Strade può superare l'altezza dello
   schermo: resta dentro la viewport e scrolla, senza tagliare le ultime righe. */
.m2-layers.open .m2-layers-panel {
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ── Tour una tantum (spotlight sulle funzioni principali) ────────── */
#tourOverlay { position: fixed; inset: 0; z-index: 3900; pointer-events: none; }
#tourOverlay.hidden { display: none; }
#tourOverlay .tour-block {
    position: fixed; background: rgba(5, 10, 20, .60); pointer-events: auto;
}
#tourOverlay .tour-hole {
    position: fixed; background: transparent; pointer-events: auto; display: none;
}
#tourOverlay .tour-ring {
    position: fixed; display: none; pointer-events: none;
    border: 2px solid #e94560; border-radius: 12px;
    box-shadow: 0 0 0 3px rgba(233, 69, 96, .22), 0 0 20px rgba(0, 0, 0, .35);
}
#tourOverlay .tour-card {
    position: fixed; width: min(350px, calc(100vw - 24px)); box-sizing: border-box;
    background: #fff; color: #1a1a2e; border-radius: 14px;
    padding: 13px 14px 12px; box-shadow: 0 12px 36px rgba(0, 0, 0, .5);
    pointer-events: auto; font-family: system-ui, sans-serif;
}
#tourOverlay .tour-count {
    font-size: 11px; font-weight: 700; letter-spacing: .08em;
    color: #e94560; text-transform: uppercase; margin-bottom: 3px;
}
#tourOverlay .tour-title {
    font-size: 17px; font-weight: 800; line-height: 1.2; margin-bottom: 5px;
}
#tourOverlay .tour-text { font-size: 13px; line-height: 1.4; color: #33415c; }
#tourOverlay .tour-actions {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 8px; margin-top: 11px;
}
#tourOverlay .tour-actions button {
    border-radius: 8px; font-size: 13px; font-weight: 700;
    padding: 7px 12px; cursor: pointer;
}
#tourOverlay .tour-skip {
    border: 1px solid #d5dbe5; background: #fff; color: #667;
}
#tourOverlay .tour-next {
    border: 1px solid #e94560; background: #e94560; color: #fff;
}
#tourOverlay .tour-next:active, #tourOverlay .tour-skip:active {
    transform: translateY(1px);
}
#tourOverlay .tour-skip[hidden] { display: none; }
/* Step 2 (pin): sotto la modale punto (z 2000), cosi' si apre sopra. */
#tourOverlay.tour-step-pin { z-index: 1900; }
/* Step 3 (modale): sopra la modale punto (2000), sotto la webcam (3000). */
#tourOverlay.tour-step-modal { z-index: 2900; }
@media (max-width: 600px) {
    #tourOverlay .tour-card { width: calc(100vw - 20px); padding: 12px 13px 11px; }
    #tourOverlay .tour-title { font-size: 16px; }
    #tourOverlay .tour-text { font-size: 12.5px; }
}