/* ── 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;
    font-size: 13px; z-index: 1000; flex-shrink: 0;
}
#header select {
    background: #1a1a2e; color: #fff; border: 1px solid #0f3460;
    border-radius: 4px; padding: 4px 8px; font-size: 13px;
}
#model-badge {
    background: #e94560; color: #fff; border-radius: 4px;
    padding: 2px 8px; font-size: 12px; font-weight: bold;
}
#model-badge.eu { background: #1f4e9c; }
#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 */

/* ── 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; }
#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 step (bianco = da caricare,
   grigio chiaro = in cache). Larghezze proporzionali come da specifica. */
#slider-buffer {
    display: flex; gap: 1px; height: 6px; margin: 0 2px;
}
#slider-buffer .pf-seg {
    flex: 1 1 0; background: #fff; border-radius: 1px; opacity: .9;
}
#slider-buffer .pf-seg.on { background: #b0bec5; }

/* ── 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;
    z-index: 1000; 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; }
    /* stessi 9px recuperati: 4px -> 0px sul contenitore, 3px -> 0px sul chip */
    #pointModal.open .pm-dates { padding: 0 10px 0; gap: 5px; }
    #pointModal.open .pm-dates .pm-date { --pm-pad-x: 10px;
        padding: 3px var(--pm-pad-x) 0; font-size: 12px; }
}
.pm-head { 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; }
/* 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 { cursor: pointer; --pm-pad-x: 12px;
    padding: 4px var(--pm-pad-x) 0; border-radius: 14px;
    border: 1px solid #3a3a5e; color: #aab; font-size: 13px; user-select: 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: block; height: 7px; margin: 1px calc(3px - var(--pm-pad-x));
    border-radius: 0 0 10px 10px; background: transparent; }
.pm-qual-nodato { background: repeating-linear-gradient(45deg,
    #3a3a5e 0 2px, transparent 2px 4px) !important; }
.pm-dates .pm-date:hover { background: #2a2a48; }
.pm-dates .pm-date.active { background: #e94560; border-color: #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; }  /* 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%); }
.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; }
.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; }


/* 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 */
.m2-layers { background: #fff; border: 2px solid rgba(0,0,0,0.2); border-radius: 5px;
    background-clip: padding-box; }
.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; }
.m2-layers-panel label { display: flex; align-items: center; gap: 8px;
    padding: 8px 4px; font-size: 14px; white-space: nowrap; cursor: pointer; }
.m2-layers-panel input[type="checkbox"] { width: 20px; height: 20px; }
#chat-btn:hover { background: #1a5590; }
/* 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: 90px;
              width: min(420px, calc(100vw - 24px)); max-height: 60vh;
              background: rgba(13, 32, 56, .96); border: 1px solid #2a6fb5; border-radius: 10px;
              display: flex; flex-direction: column; z-index: 1100; }
#chat-panel.hidden { display: none; }
#chat-head { padding: 8px 12px; font-weight: 700; color: #8fd3ff; border-bottom: 1px solid #2a6fb5;
             display: flex; justify-content: space-between; align-items: center; }
.chat-close { cursor: pointer; color: #7fa8d0; font-weight: 400; }
.chat-close:hover { color: #fff; }
#chat-msgs { padding: 10px; overflow-y: auto; flex: 1; min-height: 120px; max-height: 40vh;
             font-size: 13px; line-height: 1.45; color: #e8f2fc; white-space: pre-wrap; }
.chat-msg { margin-bottom: 8px; padding: 7px 9px; border-radius: 8px; }
.chat-msg.user { background: #1a5590; margin-left: 24px; }
.chat-msg.bot { background: #0b2847; margin-right: 24px; white-space: pre-line; }
/* 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: #5a1f1f; color: #ffd8d8; }
#chat-input-row { display: flex; gap: 6px; padding: 8px; border-top: 1px solid #2a6fb5; }
#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;
}
/* 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: none; }
    /* 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. */
    #legend-dock { left: auto; right: 12px; width: auto; }
    #legend-dock #chat-btn { font-size: 12px; padding: 4px 10px; }
    #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; }
}