/* FZ Calor – stile unico per sito pubblico e area di gestione. Nessuna dipendenza esterna.
   Grafica "fuoco e ghiaccio": arancio/rosso per il caldo, azzurro per il freddo, fiamma FZ in trasparenza. */
:root {
  --fuoco: #f28c1b;
  --fuoco-scuro: #c45f07;
  --fuoco-chiaro: #fff3e4;
  --fuoco-bordo: #ffdcb4;
  --brace: #d3202a;
  --ghiaccio: #1f5fae;
  --ghiaccio-vivo: #1f8fe0;
  --ghiaccio-chiaro: #eaf5ff;
  --verde: #0f8a5f;
  --verde-chiaro: #e3f6ec;
  --testo: #1b1d22;
  --testo-tenue: #62676e;
  --sfondo: #fff8f1;
  --carta: #ffffff;
  --bordo: #eee3d6;
  --raggio: 22px;
  --raggio-piccolo: 14px;
  --ombra: 0 1px 2px rgba(27, 29, 34, .06), 0 12px 32px -14px rgba(27, 29, 34, .2);
  --ombra-calda: 0 14px 30px -12px rgba(226, 88, 20, .55);
  --grad-fuoco: linear-gradient(135deg, #fbab4a 0%, #f28c1b 38%, #d3202a 100%);
  --grad-ghiaccio: linear-gradient(135deg, #5fc3ff 0%, #1f8fe0 45%, #1f5fae 100%);
  --grad-bolla: linear-gradient(135deg, #f7a03c, #e8611a);
  /* barra "fuoco e ghiaccio" (chat e area riservata): blu che sfuma nell'arancione, come la fiamma del logo */
  --grad-barra: linear-gradient(90deg, #1f5fae 0%, #1f8fe0 30%, #f28c1b 72%, #d3202a 100%);
  --puntini: rgba(242, 140, 27, .12);
  /* nomi storici, usati ancora da qualche pagina */
  --blu: var(--ghiaccio);
  --blu-scuro: #174a8b;
  --arancio: var(--fuoco);
  --rosso: var(--brace);
  color-scheme: light;
}
/* Tema scuro sempre, su telefono come su computer (scelta di FZ Calor, non dipende dalle impostazioni del dispositivo) */
:root {
  --testo: #f3eee8; --testo-tenue: #aaa39b; --sfondo: #131417; --carta: #1d1f25; --bordo: #30333b;
  --fuoco-chiaro: #2b2016; --fuoco-bordo: #5a3a1c; --ghiaccio-chiaro: #142335; --verde-chiaro: #11291d;
  --ghiaccio: #6aa8f0; --blu-scuro: #9cc4f5; --verde: #3fcf8e; --fuoco-scuro: #ffb366;
  --puntini: rgba(242, 140, 27, .09);
  --ombra: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -14px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.55 "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
       color: var(--testo); background: var(--sfondo); -webkit-font-smoothing: antialiased; }
a { color: var(--ghiaccio); }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .6em; letter-spacing: -.015em; font-weight: 800; }
h1 { font-size: clamp(1.7rem, 4vw, 2.1rem); } h2 { font-size: 1.3rem; } h3 { font-size: 1.05rem; }
.contenitore { width: min(1120px, 100% - 32px); margin-inline: auto; }
.tenue { color: var(--testo-tenue); } .piccolo { font-size: .875rem; }
.nascosto { display: none !important; }
.nascosto-vista { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.distanziato { margin-top: 24px; }
.centrato { text-align: center; }
.larghezza-stretta { max-width: 420px; margin-inline: auto; }
.senza-margine { margin: 0; }
.inline { display: inline; }
.testo-grad { background: linear-gradient(90deg, #f28c1b 0%, #d3202a 50%, #1f5fae 100%); -webkit-background-clip: text;
              background-clip: text; color: transparent; }
.occhiello { display: block; font-size: .75rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--fuoco-scuro); margin-bottom: .6em; }

/* Fiamma FZ in trasparenza (simbolo SVG definito in base.html) */
.fiamma-wm { position: absolute; pointer-events: none; z-index: 0; }
.con-fiamma { position: relative; overflow: hidden; isolation: isolate; }
.con-fiamma > :not(.fiamma-wm) { position: relative; z-index: 1; }

/* Intestazione: resta chiara anche in tema scuro, il logo ha le lettere "FZ" scure */
.testata { position: sticky; top: 0; z-index: 40; background: rgba(255, 248, 241, .88); color: #1b1d22;
           border-bottom: 1px solid rgba(27, 29, 34, .06); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.testata .contenitore { display: flex; align-items: center; gap: 12px 16px; padding: 10px 0; flex-wrap: wrap; }
.testata img { height: 46px; width: auto; display: block; }
.marchio { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.marchio span { font-weight: 800; font-size: 1.05rem; line-height: 1.1; letter-spacing: -.01em; }
.marchio span em { font-style: normal; color: #d3202a; }
.marchio small { display: block; font-weight: 600; font-size: .72rem; letter-spacing: 0; color: #62676e; }
.navigazione { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.navigazione a, .navigazione button { padding: 8px 13px; border-radius: 99px; text-decoration: none; color: #1b1d22; font: inherit;
  font-size: .92rem; font-weight: 650; background: none; border: 0; cursor: pointer; }
.navigazione a:hover, .navigazione button:hover { background: rgba(242, 140, 27, .12); }
.navigazione .btn-scarica { margin-left: 4px; background: var(--grad-fuoco); color: #fff; padding: 7px 14px; }
.navigazione .btn-scarica:hover { background: var(--grad-fuoco); }

/* Area riservata (accesso e pagine del gestore): la stessa testata «notte e fuoco» della chat (vedi più sotto: anello del logo, «ASSISTENZA / FZ Calor»,
   fascia fuoco-ghiaccio in fondo). Qui resta su UNA riga sola per non rubare spazio alle pagine di lavoro; la pubblica (privacy, errori) non cambia.
   --alt-testata = altezza di questa testata: la usano l'elenco dei messaggi (menu-telefono.css, chat-telefono.css) e il promemoria (promemoria.css) per riempire lo schermo senza scorrere o mettersi sotto la testata. */
:root { --alt-testata: 83px; }
.testata.testata-colore { color: #fff; border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none;
                          box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .65);
                          background: radial-gradient(34% 160% at 0% 0%, rgba(31, 143, 224, .6), transparent 70%),
                                      radial-gradient(38% 180% at 100% 100%, rgba(242, 140, 27, .7), transparent 70%),
                                      radial-gradient(22% 120% at 100% 0%, rgba(211, 32, 42, .45), transparent 70%), #0a1d3b; }
.testata.testata-colore::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--grad-barra);
                                 box-shadow: 0 0 14px 1px rgba(242, 140, 27, .9); }
.testata-colore .contenitore { padding: 12px 0 15px; gap: 10px 14px; }
.testata-colore .marchio { gap: 11px; min-width: 0; }
.testata-colore .anello { width: 56px; height: 56px; }
.testata-colore .marchio-notte { display: block; min-width: 0; }
.testata-colore .marchio-notte .chat-sopra { display: block; font-size: .62rem; font-weight: 800; letter-spacing: .22em; line-height: 1.3; }
.testata-colore .marchio-notte .chat-nome { display: block; font-size: 1.6rem; font-weight: 900; line-height: 1.02; letter-spacing: -.01em; }
.testata-colore .navigazione a, .testata-colore .navigazione button { color: #fff; }
.testata-colore .navigazione a { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); font-weight: 750; }
.testata-colore .navigazione a:hover, .testata-colore .navigazione button:hover { background: rgba(255, 255, 255, .22); }
/* «Scarica l'app» con un fuoco più scuro: il bianco sulla sfumatura chiara di prima non si leggeva (contrasto sotto 4,5:1) */
.testata-colore .navigazione .btn-scarica { border: 0; background: linear-gradient(135deg, #c9461a, #b3261e); box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .5); }
.testata-colore .navigazione .btn-scarica:hover { filter: brightness(1.1); }
/* Area del gestore: nessun menu in testata. A destra, sulla riga del logo, tre pulsanti a pillola che non vanno mai a capo:
   «Ritorna al cruscotto» (bianco, il principale, leggibile su tutta la sfumatura), «Vai alla chat» (scuro, secondario: la chat del cliente serve a Fabio solo per provarla)
   e «Ritorno al login» (scuro, come «Vai alla chat»: riporta alla schermata della password).
   Ordine: «Vai alla chat», «Ritorna al cruscotto», «Ritorno al login» — l'ultimo sta sempre all'estrema destra. */
.azioni-testata { margin-left: auto; flex: none; display: flex; align-items: center; gap: 10px; }
.torna-home, .vai-chat, .torna-login { flex: none; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px;
                         border-radius: 99px; font-size: .92rem; font-weight: 750; text-decoration: none; white-space: nowrap; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .45); }
.torna-home { background: #fff; color: #1b1d22; }
.torna-home:hover { background: #fff3e3; }
.vai-chat, .torna-login { background: rgba(255, 255, 255, .12); color: #fff; border: 1.5px solid rgba(255, 255, 255, .42); padding: 0 16px; box-shadow: none; }
.vai-chat:hover, .torna-login:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }
.torna-home:focus-visible, .vai-chat:focus-visible, .torna-login:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.torna-home svg, .vai-chat svg, .torna-login svg { width: 18px; height: 18px; flex: none; }
/* Sotto i 640 px logo + tre pulsanti con la scritta non ci stanno più su una riga: «Vai alla chat» e «Ritorno al login» diventano solo l'icona
   (il testo resta per lo screen reader e nel suggerimento al tocco prolungato) */
@media (max-width: 640px) {
  .vai-chat, .torna-login { width: 40px; padding: 0; }
  .vai-chat span, .torna-login span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
/* Nelle pagine interne il marchio con la scritta e i tre pulsanti con l'etichetta chiedono 711 px di spazio: da 641 a 760 px anche lì
   «Vai alla chat» e «Ritorno al login» restano la sola icona (altrimenti la testata andrebbe su due righe) */
@media (min-width: 641px) and (max-width: 760px) {
  .testata-gestore:not(.testata-cruscotto) .vai-chat, .testata-gestore:not(.testata-cruscotto) .torna-login { width: 40px; padding: 0; }
  .testata-gestore:not(.testata-cruscotto) .vai-chat span, .testata-gestore:not(.testata-cruscotto) .torna-login span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (max-width: 560px) {
  .azioni-testata { gap: 8px; }
  .torna-home { min-height: 38px; padding: 0 14px; gap: 6px; font-size: .88rem; }
  .vai-chat, .torna-login { min-height: 38px; width: 38px; }
  .testata img { height: 40px; }
  .marchio small { display: none; }
  .navigazione { margin-left: 0; width: 100%; flex-wrap: nowrap; gap: 2px; overflow-x: auto; scrollbar-width: none; }
  .navigazione a, .navigazione button { padding: 7px 10px; font-size: .85rem; white-space: nowrap; }
  .navigazione .btn-scarica { margin-left: auto; }
}
/* Telefoni stretti: logo e pulsanti devono restare sulla stessa riga, senza andare a capo */
@media (max-width: 400px) {
  .testata .contenitore { column-gap: 8px; }
  .torna-home { padding: 0 12px; gap: 5px; font-size: .82rem; }
  .torna-home svg { width: 16px; height: 16px; }
}
@media (max-width: 560px) {
  .testata-colore .anello { width: 50px; height: 50px; }
  :root { --alt-testata: 77px; }
  /* nelle pagine interne, con tre pulsanti, resta il solo logo (la scritta «FZ Calor» è già dentro l'immagine); nel cruscotto i pulsanti sono due e la scritta ci sta sempre */
  .testata-gestore:not(.testata-cruscotto) .marchio-notte { display: none; }
}
@media (max-width: 360px) {
  .testata-colore .anello { width: 44px; height: 44px; }
  :root { --alt-testata: 71px; }
  .azioni-testata { gap: 6px; }
  .torna-home { min-height: 34px; padding: 0 10px; gap: 4px; font-size: .78rem; }
  .vai-chat, .torna-login { min-height: 34px; width: 34px; }
}
/* Schermo basso (telefono girato): testata compatta come prima (64px), così il cruscotto e le pagine non scorrono per colpa della testata più alta */
@media (max-height: 480px) {
  :root { --alt-testata: 64px; }
  .testata-colore .contenitore { padding: 9px 0 12px; }
  .testata-colore .anello { width: 43px; height: 43px; }
}

main { padding: 28px 0 56px; overflow-x: clip; }
.finestra-testa .fiamma-wm { right: -10px; top: -30px; opacity: .3; transform: rotate(12deg); }
.piede { background: #141519; color: rgba(255, 255, 255, .7); padding: 28px 0 36px; font-size: .9rem; }
.piede a { color: #fff; }
.piede .contenitore { display: flex; gap: 10px 24px; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.piede-marchio { display: flex; align-items: center; gap: 12px; }
.piede-marchio img { width: 44px; height: 44px; background: #fff; border-radius: 14px; padding: 3px; }
.piede-marchio b { color: #fff; display: block; }

/* Schede e griglie */
.scheda { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 22px; box-shadow: var(--ombra); }
.scheda + .scheda { margin-top: 16px; }
.griglia > .scheda + .scheda { margin-top: 0; }
.griglia.due { align-items: start; }
.contenitore form > div + .scheda, .contenitore form > .scheda { margin-top: 16px; }
.griglia { display: grid; gap: 18px; }
.griglia.due { grid-template-columns: repeat(2, 1fr); }
.griglia.tre { grid-template-columns: repeat(3, 1fr); }
.griglia.quattro { grid-template-columns: repeat(4, 1fr); }
.griglia.sidebar { grid-template-columns: 2fr 1fr; align-items: start; }
@media (max-width: 960px) { .griglia.quattro { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 800px) { .griglia.due, .griglia.tre, .griglia.sidebar { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .griglia.quattro { grid-template-columns: 1fr; } }
.passo { display: flex; gap: 12px; }
.passo b { flex: none; width: 34px; height: 34px; border-radius: 12px; background: var(--grad-fuoco); color: #fff; display: grid; place-items: center; }
.passo:nth-child(2) b { background: var(--grad-ghiaccio); }
.passo:nth-child(3) b { background: #1b1d22; }

/* Pulsanti */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border-radius: 14px;
       border: 0; background: var(--grad-fuoco); color: #fff; font: inherit; font-weight: 750; text-decoration: none; cursor: pointer;
       min-height: 44px; box-shadow: var(--ombra-calda); transition: transform .15s, filter .15s; }
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .6; cursor: default; transform: none; }
.btn.secondario { background: var(--carta); color: var(--testo); border: 1px solid var(--bordo); box-shadow: 0 1px 2px rgba(27, 29, 34, .06); }
.btn.secondario:hover { border-color: var(--fuoco); filter: none; }
.btn.pericolo { background: transparent; border: 1px solid var(--brace); color: var(--brace); box-shadow: none; }
.btn.pericolo:hover { background: var(--brace); color: #fff; filter: none; }
.btn.verde { background: linear-gradient(135deg, #2bb673, #0f8a5f); box-shadow: 0 14px 30px -14px rgba(15, 138, 95, .6); }
.btn.grande { padding: 15px 28px; font-size: 1.08rem; border-radius: 18px; }
.btn.piccolo { padding: 6px 13px; min-height: 34px; font-size: .88rem; border-radius: 11px; box-shadow: none; }
.btn svg { width: 1.2em; height: 1.2em; flex: none; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .blocco:focus-visible,
.icona-btn:focus-visible, .invia-tondo:focus-visible, a:focus-visible { outline: 3px solid var(--fuoco); outline-offset: 2px; }
.azioni { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Moduli */
label { display: block; font-weight: 650; margin-bottom: 5px; font-size: .95rem; }
input[type=text], input[type=tel], input[type=email], input[type=date], input[type=time], input[type=number], input[type=password], select, textarea {
  width: 100%; padding: 10px 14px; border: 1px solid var(--bordo); border-radius: 13px; background: var(--carta); color: var(--testo);
  font: inherit; min-height: 46px; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--fuoco); box-shadow: 0 0 0 4px rgba(242, 140, 27, .16); outline: none; }
textarea { min-height: 110px; resize: vertical; }
.campo { margin-bottom: 14px; }
.campo.errore input, .campo.errore select, .campo.errore textarea { border-color: var(--brace); }
/* Accesso all'area riservata: password una sotto l'altra, con l'occhio per mostrarle/nasconderle */
.modulo-accesso .campo { margin-bottom: 16px; }
/* Mentre parte l'accesso la scheda si dissolve (login.js): la schermata di benvenuto compare subito dopo con la sua dissolvenza in entrata */
.scheda.uscita-login { opacity: 0; transform: translateY(-8px); transition: opacity .22s ease, transform .22s ease; }
@media (prefers-reduced-motion: reduce) { .scheda.uscita-login { transition: none; } }
.campo-password { position: relative; }
.campo-password input { padding-right: 52px; }
.occhio { position: absolute; top: 3px; right: 3px; bottom: 3px; width: 44px; display: grid; place-items: center; padding: 0;
          border: 0; border-radius: 10px; background: transparent; color: var(--testo-tenue); cursor: pointer; }
.occhio[hidden] { display: none; }
.occhio:hover { color: var(--testo); background: var(--fuoco-chiaro); }
.occhio:focus-visible { outline: 3px solid var(--ghiaccio-vivo); outline-offset: -2px; }
.occhio svg { width: 22px; height: 22px; }
.occhio .occhio-chiuso, .occhio[aria-pressed=true] .occhio-aperto { display: none; }
.occhio[aria-pressed=true] .occhio-chiuso { display: block; }
.scheda-chat .campo.errore input { box-shadow: 0 0 0 1px var(--brace); }   /* nella chat il bordo rosso si vede meglio anche sul fondo scuro */
.msg-errore { color: var(--brace); font-size: .9rem; margin-top: 4px; font-weight: 600; }
.aiuto { color: var(--testo-tenue); font-size: .86rem; margin-top: 4px; }
.riga-campi { display: grid; gap: 0 14px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .riga-campi { grid-template-columns: 1fr; } }
.casella { display: flex; gap: 10px; align-items: flex-start; font-weight: 450; }
.casella input { margin-top: 4px; width: 19px; height: 19px; flex: none; accent-color: var(--fuoco); }
.trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
fieldset { border: 0; padding: 0; margin: 0; }
.giorni-sett { display: flex; gap: 8px; flex-wrap: wrap; }
.giorni-sett label { font-weight: 550; display: flex; gap: 6px; align-items: center; padding: 6px 12px; border: 1px solid var(--bordo); border-radius: 99px; margin: 0; cursor: pointer; }

/* Avvisi e badge */
.avviso { padding: 13px 16px; border-radius: var(--raggio-piccolo); margin-bottom: 16px; border: 1px solid var(--bordo); background: var(--carta); }
.avviso.ok { border-color: #8fdcb5; background: var(--verde-chiaro); }
.avviso.errore { border-color: var(--brace); background: color-mix(in srgb, var(--brace) 7%, var(--carta)); }
.badge { display: inline-block; padding: 2px 11px; border-radius: 99px; font-size: .8rem; font-weight: 750; background: var(--sfondo); border: 1px solid var(--bordo); }
.badge.nuova { background: #fff1d6; border-color: #f6c46b; color: #8a4b00; }
.badge.confermata { background: var(--verde-chiaro); border-color: #8fdcb5; color: var(--verde); }
.badge.annullata { color: var(--testo-tenue); }
.badge.completata { background: var(--ghiaccio-chiaro); border-color: #a9cff5; color: var(--ghiaccio); }
.badge.alta { background: #fde4e5; border-color: var(--brace); color: var(--brace); }

/* Tabelle */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 8px; border-bottom: 1px solid var(--bordo); vertical-align: top; }
th { font-size: .78rem; color: var(--testo-tenue); text-transform: uppercase; letter-spacing: .06em; }
.scorrevole { overflow-x: auto; }

/* Importazione WhatsApp */
.importa { border: 2px dashed var(--fuoco); border-radius: var(--raggio); padding: 16px; background: var(--carta); }
.riepilogo-import { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.riepilogo-import:empty { display: none; }
.etichetta-import { background: var(--verde-chiaro); border: 1px solid #8fdcb5; border-radius: 99px; padding: 2px 12px; font-size: .82rem; font-weight: 600; }

/* Foto */
.anteprime { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.anteprime:empty { display: none; }
.anteprima { position: relative; width: 84px; height: 84px; border-radius: 16px; overflow: hidden; border: 1px solid var(--bordo); }
.anteprima img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anteprima button { position: absolute; top: 3px; right: 3px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(27, 29, 34, .8); color: #fff; cursor: pointer; font-size: 16px; line-height: 1; }
.foto-elenco { display: flex; flex-wrap: wrap; gap: 10px; }
.foto-elenco img { width: 150px; height: 112px; object-fit: cover; border-radius: 14px; border: 1px solid var(--bordo); }

/* Calendario a settimana */
.cal { background: var(--carta); border: 1px solid var(--bordo); border-radius: 18px; box-shadow: var(--ombra); overflow: hidden; }
.cal-barra { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--bordo); flex-wrap: wrap; }
.cal-titolo { font-weight: 800; flex: 1; text-align: center; min-width: 160px; text-transform: capitalize; }
.cal-legenda { display: flex; gap: 14px; flex-wrap: wrap; padding: 8px 12px; border-top: 1px solid var(--bordo); font-size: .82rem; color: var(--testo-tenue); }
.cal-legenda i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 5px; vertical-align: -1px; }
.cal-corpo { display: grid; grid-template-columns: 52px repeat(7, 1fr); }
.cal-ore { position: relative; border-right: 1px solid var(--bordo); }
.cal-ore span { position: absolute; right: 6px; transform: translateY(-50%); font-size: .75rem; color: var(--testo-tenue); }
.cal-giorno { border-right: 1px solid var(--bordo); min-width: 0; }
.cal-giorno:last-child { border-right: 0; }
.cal-testa { height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-bottom: 1px solid var(--bordo); font-size: .85rem; background: var(--sfondo); }
.cal-testa b { font-size: 1.05rem; }
.cal-giorno.oggi .cal-testa { background: var(--grad-fuoco); color: #fff; }
.cal-colonna { position: relative; background-image: linear-gradient(var(--bordo) 1px, transparent 1px); }
.blocco { position: absolute; left: 3px; right: 3px; border-radius: 9px; border: 1px solid; padding: 2px 6px; font-size: .8rem; line-height: 1.25; text-align: left; cursor: pointer; overflow: hidden; font-family: inherit; color: inherit; }
.blocco.libero { background: var(--verde-chiaro); border-color: #6fcf9f; color: var(--verde); font-weight: 700; }
.blocco.libero:hover { background: var(--verde); border-color: var(--verde); color: #fff; }
.blocco.principale { background: var(--grad-fuoco); border-color: transparent; color: #fff; font-weight: 800; }
.blocco.alternativa { background: var(--ghiaccio-chiaro); border-color: var(--ghiaccio-vivo); color: var(--ghiaccio); font-weight: 750; }
.blocco.richiesto { background: #fff1d6; border-color: #f6c46b; color: #8a4b00; }
.blocco.confermato { background: var(--grad-ghiaccio); border-color: transparent; color: #fff; }
.blocco.selezionato { box-shadow: 0 0 0 3px var(--fuoco); }
.cal-vuoto { padding: 24px; text-align: center; color: var(--testo-tenue); }
.sel-elenco { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.sel-elenco li { display: flex; gap: 8px 10px; align-items: center; flex-wrap: wrap; padding: 9px 12px; border: 1px solid var(--bordo); border-radius: 14px; background: var(--carta); }
.sel-elenco li b { flex: 1; min-width: 170px; }

/* Calendario su telefono: un elenco per giorno al posto della griglia oraria */
@media (max-width: 800px) {
  .cal-corpo { display: block; }
  .cal-ore { display: none; }
  .cal-giorno { border-right: 0; border-bottom: 1px solid var(--bordo); }
  .cal-testa { height: auto; flex-direction: row; justify-content: flex-start; gap: 8px; padding: 8px 12px; }
  .cal-colonna { height: auto !important; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; background-image: none; min-height: 12px; }
  .blocco { position: static; width: auto; min-width: 84px; min-height: 44px; font-size: .95rem; display: flex; align-items: center; justify-content: center; top: auto !important; height: auto !important; }
  .blocco .sec { display: none; }
}

.proposta { display: flex; gap: 12px; align-items: flex-start; padding: 11px 13px; border: 1px solid var(--bordo); border-radius: 14px; margin-bottom: 8px; }
.proposta input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--fuoco); }
.proposta label { font-weight: 500; margin: 0; flex: 1; cursor: pointer; }
.km { font-weight: 800; color: var(--verde); }
.km.alto { color: var(--brace); }
dl.dati { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
dl.dati dt { color: var(--testo-tenue); } dl.dati dd { margin: 0; }
.testo-chat { white-space: pre-wrap; background: var(--sfondo); border-radius: 14px; padding: 12px 14px; font-size: .95rem; }

/* ============ Chat ============ */
.chat-testa { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: #fff; color: #1b1d22; border-bottom: 1px solid rgba(27, 29, 34, .06); }
.chat-testa img { width: 38px; height: 38px; object-fit: contain; }
.chat-testa .indietro { color: rgba(27, 29, 34, .35); font-size: 1.6rem; line-height: 1; margin-top: -4px; text-decoration: none; }
.chat-testa b { display: block; font-weight: 800; font-size: .98rem; line-height: 1.2; }
.chat-testa small { color: #0f8a5f; font-weight: 750; font-size: .72rem; }
.chat-filo { display: flex; flex-direction: column; gap: 12px; padding: 18px 12px; background-color: var(--sfondo);
             background-image: radial-gradient(var(--puntini) 1px, transparent 1px); background-size: 18px 18px; position: relative; }
.bolla { align-self: flex-start; max-width: 88%; background: var(--carta); padding: 10px 14px; border-radius: 20px 20px 20px 6px;
         box-shadow: 0 1px 2px rgba(27, 29, 34, .08), 0 6px 16px -8px rgba(27, 29, 34, .18); font-size: .95rem; line-height: 1.42; }
.bolla p { margin: 0; } .bolla p + p { margin-top: 5px; }
.bolla.io { align-self: flex-end; background: var(--grad-bolla); color: #fff; border-radius: 20px 20px 6px 20px; white-space: pre-wrap; overflow-wrap: anywhere; }
.bolla .modifica { display: block; margin-top: 4px; text-align: right; font-size: .75rem; color: rgba(255, 255, 255, .85); background: none; border: 0; padding: 0; cursor: pointer; font: inherit; text-decoration: underline; }
.bolla-wa { align-self: flex-end; max-width: 88%; background: var(--verde-chiaro); border: 1px solid #8fdcb5; border-radius: 16px; padding: 8px 12px; font-size: .86rem; }
.bolla-wa b { color: #047857; }
.foto-chat { align-self: flex-end; display: grid; grid-template-columns: repeat(3, 72px); gap: 5px; }
.foto-chat img { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; display: block; }
.passo-chat { display: flex; flex-direction: column; gap: 10px; }
.scheda-chat { background: var(--carta); border: 1px solid var(--bordo); border-radius: 20px 20px 20px 8px; padding: 16px 14px 14px; box-shadow: var(--ombra); }
.scheda-chat .campo:last-of-type { margin-bottom: 10px; }
.scheda-chat .riga-campi { grid-template-columns: 1fr; }
.scheda-chat details summary { cursor: pointer; font-weight: 650; font-size: .9rem; color: var(--ghiaccio); margin-bottom: 8px; }
.digita { display: inline-flex; gap: 5px; align-self: flex-start; background: var(--carta); padding: 13px 16px; border-radius: 20px 20px 20px 6px; box-shadow: var(--ombra); }
.digita span { width: 7px; height: 7px; border-radius: 9px; background: var(--fuoco); animation: puntino 1.2s infinite; }
.digita span:nth-child(2) { animation-delay: .15s; } .digita span:nth-child(3) { animation-delay: .3s; }
@keyframes puntino { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes entra { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.entra { animation: entra .35s cubic-bezier(.2, .8, .2, 1) both; }
.in-attesa { display: none !important; }

.chat-composer { position: sticky; bottom: 0; z-index: 3; background: #fff; color: #1b1d22; border-top: 1px solid rgba(27, 29, 34, .06); padding: 9px 10px 10px; }
.composer-riga { display: flex; align-items: flex-end; gap: 6px; }
.icona-btn { flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; border: 0; cursor: pointer; margin: 0; padding: 0; }
.icona-btn svg { width: 21px; height: 21px; }
.icona-btn.foto { background: #eaf5ff; color: #174a8b; }
.icona-btn.foto:hover { background: #d9efff; }
.icona-btn.wa { background: #e3f6ec; color: #047857; }
.icona-btn.wa:hover { background: #cdeedd; }
.chat-composer textarea.composer-testo { flex: 1; min-width: 0; min-height: 42px; max-height: 160px; resize: none; overflow-y: hidden;
  border-radius: 21px; background: #fff8f1; color: #1b1d22; border: 1px solid transparent; padding: 9px 16px; font-size: .95rem; line-height: 1.4; }
.chat-composer textarea.composer-testo:focus { background: #fff; border-color: var(--fuoco); }
.invia-tondo { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--grad-fuoco); color: #fff; display: grid;
               place-items: center; cursor: pointer; box-shadow: var(--ombra-calda); }
.invia-tondo svg { width: 19px; height: 19px; margin-left: 2px; }
.invia-tondo:active { transform: scale(.94); }
.file-nascosto { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Messaggio vocale: microfono dentro la barra di scrittura e pannello di registrazione (vedi voce.js) */
.composer-campo { position: relative; flex: 1; min-width: 0; display: flex; }
.mic-btn { position: absolute; right: 5px; bottom: 5px; width: 32px; height: 32px; border-radius: 50%; border: 0; margin: 0; padding: 0;
           display: grid; place-items: center; background: transparent; color: #c4401a; cursor: pointer; }
.mic-btn svg { width: 20px; height: 20px; }
.mic-btn:hover { background: #ffe9d6; }
.mic-btn:focus-visible { outline: 3px solid var(--fuoco); outline-offset: 1px; }
.composer-campo.con-mic textarea.composer-testo { padding-right: 42px; }
.voce { background: #fff; color: #1b1d22; border-radius: 18px; padding: 12px; margin-bottom: 8px; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .35); }
.voce[hidden] { display: none; }
.voce-testa { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.voce-pallino { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--rosso); animation: pulsa 1.1s ease-in-out infinite; }
.voce[data-pausa="1"] .voce-pallino { animation: none; background: #a8adb5; }
@keyframes pulsa { 0%, 100% { transform: scale(.8); opacity: .6; } 50% { transform: scale(1.15); opacity: 1; } }
.voce-tempo { font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.voce-max { color: #62676e; font-size: .85rem; }
.voce-livello { flex: 1; height: 8px; border-radius: 8px; background: #eceef1; overflow: hidden; }
.voce-livello i { display: block; width: 100%; height: 100%; transform-origin: left; transform: scaleX(0); transition: transform .08s linear;
                  background: linear-gradient(90deg, #6aa8f0, #f28c1b, #d3202a); }
.voce-stato { margin: 0 0 8px; font-size: .88rem; line-height: 1.35; color: #3d4148; }
.voce-stato:empty { display: none; }
.voce-audio { display: block; width: 100%; height: 40px; margin-bottom: 6px; }
.voce-azioni { display: flex; flex-wrap: wrap; gap: 8px; }
.voce-btn { flex: 1 1 auto; min-height: 44px; margin: 0; padding: 0 16px; border: 0; border-radius: 22px; background: #f1f3f6; color: #1b1d22;
            display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: .92rem; font-weight: 750; cursor: pointer; }
.voce-btn svg { width: 18px; height: 18px; flex: none; }
.voce-btn[hidden] { display: none; }   /* «Riprova» / «Apri in Chrome»: li accende voce.js solo quando servono */
.voce-btn.rosso { background: var(--rosso); color: #fff; }
.voce-btn:active { transform: scale(.97); }
.voce-btn:focus-visible { outline: 3px solid var(--fuoco); outline-offset: 2px; }
/* «Scrivi il testo»: il passo importante dopo il riascolto, sempre in cima e a tutta larghezza */
.voce-btn.principale { order: -1; flex: 1 1 100%; background: var(--grad-fuoco); color: #fff; box-shadow: var(--ombra-calda); }
.voce-attesa { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 1rem; }
.voce-gira { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 3px solid #ffdcb4; border-top-color: var(--fuoco); animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.voce-esito { margin: 0 0 6px; padding: 8px 12px; border-radius: 12px; background: var(--verde-chiaro); color: var(--verde); font-weight: 650; line-height: 1.35; }
.voce-esito:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .voce-gira { animation-duration: 2.4s; } }
/* Guida al messaggio: pillola con tre frecce a cascata sopra la barra di scrittura. Solo con JavaScript (sparisce da sola). */
.guida-msg { display: none; position: absolute; left: 10px; right: 10px; bottom: 100%; gap: 6px; padding-bottom: 3px;
             pointer-events: none; transition: opacity .3s, visibility .3s; }
.js .guida-msg { display: flex; }
.js .guida-msg.spenta { opacity: 0; visibility: hidden; }
.guida-vuoto { flex: none; width: 42px; }
.guida-centro { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.guida-pillola { background: var(--grad-fuoco); color: #fff; font-size: .88rem; font-weight: 800; line-height: 1.25; text-align: center; white-space: nowrap;
                 padding: 8px 16px; border-radius: 14px; box-shadow: var(--ombra-calda); margin-bottom: 4px; }
.guida-pillola small { display: block; font-size: .75rem; font-weight: 500; color: rgba(255, 255, 255, .92); margin-top: 1px; }
.guida-chev { width: 24px; height: 10px; margin-top: 1px; animation: cascata 1.5s ease-in-out infinite; }
.guida-chev:nth-of-type(2) { animation-delay: .18s; } .guida-chev:nth-of-type(3) { animation-delay: .36s; }
@keyframes cascata { 0%, 100% { opacity: .12; transform: translateY(-3px); } 35% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .guida-chev { animation: none; } }
@media (max-height: 520px) { .js .guida-msg { display: none; } }
.pannello-wa { border: 1px solid #8fdcb5; background: #e3f6ec; color: #064e3b; border-radius: 16px; padding: 10px 12px; margin-bottom: 8px; }
.pannello-wa summary { cursor: pointer; font-weight: 750; font-size: .9rem; }
.js .pannello-wa:not([open]) { display: none; }
.js .pannello-wa summary { list-style: none; }
.js .pannello-wa summary::-webkit-details-marker { display: none; }
.pannello-wa textarea { min-height: 90px; margin-top: 6px; font-size: .88rem; background: #fff; color: #1b1d22; }
.pannello-wa .aiuto { color: rgba(6, 78, 59, .75); }
.chat-composer .anteprime { margin: 0 0 8px; }
.chat-composer .anteprima { width: 64px; height: 64px; border-radius: 14px; }
.chat-composer .aiuto { margin: 0 0 6px; }
.chat-composer .aiuto:empty, .chat-composer .msg-errore:empty { display: none; }
.allegato-wa { display: inline-flex; gap: 6px; align-items: center; background: #e3f6ec; border: 1px solid #8fdcb5; color: #064e3b; border-radius: 12px; padding: 5px 10px; font-size: .82rem; font-weight: 650; margin-bottom: 8px; }

/* ============ Il sito è la chat: pagina intera, intestazione e barra di scrittura sempre visibili ============ */
.app-chat { background-color: var(--sfondo); background-image: radial-gradient(var(--puntini) 1px, transparent 1px); background-size: 18px 18px; }
.chat { --alt-testa-chat: calc(136px + env(safe-area-inset-top, 0px));   /* altezza della testata (vedi .chat-testa): il saluto di Zaza riempie il resto dello schermo */
        container-type: inline-size; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
        width: min(780px, 100%); margin-inline: auto; background: var(--sfondo); }
.chat .chat-testa { position: sticky; top: 0; z-index: 5; padding: calc(12px + env(safe-area-inset-top)) 12px 15px;
                   display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: 11px; }
/* logo con anello e titolo a sinistra, "Scarica l'app" a destra, sotto le pillole «online · caldaie · clima» */
.chat-marchio { grid-column: 1; display: flex; align-items: center; gap: 11px; min-width: 0; }
.chat-chi { min-width: 0; }
.logo-ingresso, .anello { position: relative; display: block; flex: none; width: 70px; height: 70px; padding: 3px; border-radius: 50%; overflow: hidden;
                          cursor: default; -webkit-tap-highlight-color: transparent; }
.anello { cursor: pointer; }   /* l'anello della testata del gestore è il collegamento al cruscotto */
.chat-chi h1 { margin: 0; font-size: 1.85rem; line-height: 1.02; font-weight: 900; letter-spacing: -.01em; }
.chat-testa-azioni { grid-column: 2; display: flex; align-items: center; }
.chat-info { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
/* «Scarica app» a forma di conchiglia (markup in _scarica.html): valva bianca, coste e cerniera color fuoco,
   la scritta sta nel disegno. Pulsa veloce da solo, con un'onda chiara che si allarga dietro. */
.chat-testa .btn-scarica { position: relative; width: 68px; height: 61px; padding: 0; border: 0; background: none; cursor: pointer;
                           animation: conchiglia-pulsa .9s ease-in-out infinite; }
.chat-testa .btn-scarica svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); }
.chat-testa .btn-scarica::before { content: ''; position: absolute; left: 50%; top: 54%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
                                   border-radius: 50%; z-index: -1; animation: conchiglia-onda .9s ease-out infinite; }
.sc-valva { fill: #fff; stroke: url(#g-conchiglia); stroke-width: 4; stroke-linejoin: round; }
.sc-coste { fill: none; stroke: url(#g-conchiglia); stroke-width: 3; stroke-linecap: round; opacity: .45; }
.sc-cerniera { fill: url(#g-conchiglia); }
.sc-testo { font-family: inherit; font-size: 21px; font-weight: 900; letter-spacing: .5px; text-anchor: middle;
            fill: #c4401a; paint-order: stroke; stroke: #fff; stroke-width: 6; stroke-linejoin: round; }
@keyframes conchiglia-pulsa { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes conchiglia-onda { 0% { box-shadow: 0 0 0 0 rgba(255, 224, 170, .95); } 100% { box-shadow: 0 0 0 15px rgba(255, 224, 170, 0); } }
@media (prefers-reduced-motion: reduce) { .chat-testa .btn-scarica, .chat-testa .btn-scarica::before, .logo-ingresso::before, .anello::before, .chat-testa .pallino { animation: none; } }

/* Testata «notte e fuoco»: blu notte con bagliori di ghiaccio (in alto a sinistra) e di fiamma (a destra), fascia fuoco-ghiaccio in fondo.
   Il logo gira dentro un anello blu-arancio-rosso, su un disco bianco, altrimenti la fiamma blu/arancio sparirebbe nello sfondo. */
.chat .chat-testa { color: #fff; border-bottom: 0; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .65);
                    background: radial-gradient(220px 130px at 0% 0%, rgba(31, 143, 224, .6), transparent 70%),
                                radial-gradient(240px 140px at 100% 100%, rgba(242, 140, 27, .7), transparent 70%),
                                radial-gradient(130px 90px at 100% 0%, rgba(211, 32, 42, .45), transparent 70%), #0a1d3b; }
.chat .chat-testa::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--grad-barra);
                           box-shadow: 0 0 14px 1px rgba(242, 140, 27, .9); }
.logo-ingresso::before, .anello::before { content: ''; position: absolute; inset: -50%; background: conic-gradient(#1f8fe0, #5fc3ff, #f28c1b, #d3202a, #1f8fe0);
                                          animation: anello-gira 3.5s linear infinite; }
.chat .logo-ingresso img, .testata .anello img { position: relative; display: block; width: 100%; height: 100%; padding: 3px; border-radius: 50%; background: #fff; object-fit: contain; }
@keyframes anello-gira { to { transform: rotate(360deg); } }
.chat-sopra { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: #9fd2ff; line-height: 1.3; }
.chat-nome { background: linear-gradient(90deg, #ffd166, #f28c1b 55%, #ff6a3d); -webkit-background-clip: text; background-clip: text;
             -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 2px 8px rgba(242, 140, 27, .45)); }
.chat-info .chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; font-size: .7rem; font-weight: 800; white-space: nowrap;
                   background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); }
.chat-info .chip-online { background: rgba(61, 255, 158, .16); border-color: rgba(61, 255, 158, .6); color: #8cffc6; }
.chat-testa .pallino { width: 9px; height: 9px; border-radius: 50%; background: #3dff9e; flex: none; animation: pallino-onda 1.5s ease-out infinite; }
@keyframes pallino-onda { 0% { box-shadow: 0 0 0 0 rgba(61, 255, 158, .75); } 100% { box-shadow: 0 0 0 9px rgba(61, 255, 158, 0); } }
.chat .chat-testa .btn-scarica:hover { filter: none; background: none; }
.chat .chat-testa .btn-scarica:hover svg { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)) brightness(1.04); }
@media (max-width: 360px) { .logo-ingresso { width: 58px; height: 58px; } .chat-chi h1 { font-size: 1.55rem; } .chat { --alt-testa-chat: calc(124px + env(safe-area-inset-top, 0px)); } }
/* schermo basso (telefono piccolo, telefono girato, tastiera aperta): niente pillole, logo e «Scarica app» più piccoli: la chat e il saluto hanno bisogno dello spazio.
   Senza rete la pillola gialla resta, perché dice cosa succede ai messaggi. */
@media (max-height: 700px) {
  .chat .chat-testa { padding-bottom: 12px; row-gap: 0; }
  .chat-info .chip { display: none; }
  .chat-info .chip#chat-rete[data-stato="offline"] { display: inline-flex; margin-top: 8px; }
  .logo-ingresso { width: 54px; height: 54px; }
  .chat-chi h1 { font-size: 1.5rem; }
  .chat-testa .btn-scarica { width: 60px; height: 54px; }
  .chat { --alt-testa-chat: calc(78px + env(safe-area-inset-top, 0px)); }
}
.chat .chat-filo { flex: 1; padding: 14px 14px 28px; }
.chat .chat-filo > * { scroll-margin: 140px 0 120px; }
.chat .chat-filo > .avviso { margin: 0; }
/* Privacy: quadrato bianco al centro dello schermo, chat oscurata dietro; sparisce appena spuntato */
.velo-privacy { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px;
                background: rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.quadrato-privacy { width: min(280px, 100%); aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
                    gap: 12px; padding: 22px 20px; text-align: center; background: #fff; color: #1b1d22; border-radius: 18px;
                    box-shadow: 0 20px 50px -18px rgba(0, 0, 0, .7); }
.icona-privacy { width: 44px; height: 44px; border-radius: 50%; background: #fff3e4; display: grid; place-items: center; font-size: 1.3rem; }
.quadrato-privacy p { margin: 0; font-size: .8rem; color: #62676e; }
.quadrato-privacy a { color: #1f5fae; font-weight: 700; }
.casella-nota { display: flex; gap: 10px; align-items: flex-start; text-align: left; font-weight: 650; font-size: .86rem; line-height: 1.35; cursor: pointer; }
.casella-nota input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--fuoco); }
/* Rete di sicurezza senza JavaScript: spuntata la casella, la nota si dissolve da sola (lo script la nasconde del tutto) */
.velo-privacy:has(#privacy:checked) { animation: velo-via .01s .3s forwards; }
@keyframes velo-via { to { opacity: 0; visibility: hidden; pointer-events: none; } }
/* Già accettata su questo dispositivo (app.js mette la classe, richiesta.js spunta la casella): la finestra non compare per niente */
.privacy-ok .velo-privacy:not(.errore) { display: none; }
.velo-privacy.errore .quadrato-privacy { aspect-ratio: auto; min-height: 280px; box-shadow: 0 0 0 3px var(--brace), 0 20px 50px -18px rgba(0, 0, 0, .7); }
.quadrato-privacy .msg-errore { margin: 0; font-size: .78rem; color: #8f1d24; }
.chat .chat-composer { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
/* Barra di scrittura "fuoco e ghiaccio", identica alla testata: stessa sfumatura, pulsanti bianchi leggibili sul colore */
.chat .chat-composer { background: var(--grad-barra); border-top: 0; box-shadow: 0 -6px 18px -8px rgba(0, 0, 0, .6); }
.chat .chat-composer .icona-btn { background: #fff; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .35); }
.chat .chat-composer .icona-btn.foto { color: #174a8b; } .chat .chat-composer .icona-btn.foto:hover { background: #eaf5ff; }
.chat .chat-composer .icona-btn.wa { color: #047857; } .chat .chat-composer .icona-btn.wa:hover { background: #e3f6ec; }
.chat .chat-composer .invia-tondo { background: #fff; color: #c4401a; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .35); }
.chat .chat-composer textarea.composer-testo { box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .35); }
.chat .chat-composer textarea.composer-testo:focus { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .55); }
.chat .chat-composer .aiuto { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.chat .chat-composer .pannello-wa .aiuto { color: rgba(6, 78, 59, .8); text-shadow: none; }   /* dentro il riquadro verde chiaro resta scuro */
.chat .chat-composer .msg-errore { color: #fff; background: #8f1d24; border-radius: 10px; padding: 5px 10px; }
.chat .chat-composer .anteprima { border: 2px solid #fff; }
.chat .chat-composer .etichetta-import { color: #064e3b; }
@media (min-width: 800px) {
  .chat { border-inline: 1px solid var(--bordo); box-shadow: 0 0 60px -20px rgba(27, 29, 34, .25); }
  .chat .chat-filo { padding: 22px 26px 36px; }
}
@media (max-width: 420px) { .chat-testa .btn-scarica { width: 60px; height: 54px; } }

/* Freccia curva animata dal saluto al pulsante «Scarica l'app»: il tratto si disegna, la punta «salta», il pulsante manda onde.
   Senza animazioni (movimento ridotto) la freccia resta ferma e interamente visibile. */
.freccia-installa { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
.freccia-installa svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fi-tratto { stroke-dasharray: 1; animation: fi-disegna 3.2s cubic-bezier(.5, 0, .3, 1) infinite; }
.fi-punta { transform-box: fill-box; transform-origin: center; animation: fi-pop 3.2s infinite; }
@keyframes fi-disegna { 0% { stroke-dashoffset: 1; opacity: 1; } 38% { stroke-dashoffset: 0; } 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes fi-pop { 0%, 34% { opacity: 0; transform: scale(.3); } 42% { opacity: 1; transform: scale(1.25); } 50%, 85% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
/* Dal link (browser) il cliente non scrive: vede solo l'invito a installare l'app, con VIRTUAL ZAZA e la freccia.
   Nell'app installata (display-mode diverso da «browser», oppure classe app-installata su iPhone) resta la chat di sempre.
   «Continua senza installare» (v1.5.23): chi non riesce a installare lo sceglie nella finestra «Scarica l'app»; il dispositivo lo ricorda
   (classe senza-app, messa da app.js) e dal link compare la chat come nell'app. */
@media (display-mode: browser) {
  html:not(.app-installata):not(.senza-app) .solo-app { display: none !important; }
  html:not(.app-installata):not(.senza-app) .chat-filo { background: #131417; padding: 0; }
}
@media not all and (display-mode: browser) { .solo-browser { display: none !important; } }
html.app-installata .solo-browser, html.senza-app .solo-browser { display: none !important; }

.eroe { position: relative; display: flex; flex-direction: column; min-height: calc(100vh - var(--alt-testa-chat, 76px)); min-height: calc(100dvh - var(--alt-testa-chat, 76px));
        padding: clamp(18px, 4vh, 40px) 22px 0; color: #fff; overflow: hidden; }
.eroe-testo { width: calc(100% - 104px); max-width: 340px; }   /* a destra resta il «corridoio» in cui sale la freccia */
.eroe-testo p { margin: 0; }
.eroe .e1 { font-size: clamp(18px, 5.6vw, 23px); font-weight: 700; opacity: .92; }
.eroe .e2 { font-size: clamp(32px, min(12vw, 6.6vh), 47px); font-weight: 900; line-height: 1; letter-spacing: -.5px; margin-top: 2px;
            background: linear-gradient(90deg, #ffc15a, #ff5a36); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eroe .e3 { font-size: clamp(24px, min(8.4vw, 4.7vh), 33px); font-weight: 800; line-height: 1.1; margin-top: clamp(12px, 2.6vh, 20px); }
.eroe .e3 mark { color: inherit; background: linear-gradient(transparent 62%, rgba(242, 140, 27, .6) 62%); }
.eroe .e4 { font-size: clamp(16px, min(5vw, 3.1vh), 20px); line-height: 1.25; font-weight: 600; margin-top: clamp(10px, 2.2vh, 18px); color: #e7e1da; }

/* VIRTUAL ZAZA: disegno fermo + occhi, palpebre e bocca animati (markup in _zaza.html) */
.zaza { margin: auto 0 -8px -6px; align-self: flex-start; width: min(54vw, 36vh, 250px); pointer-events: none;
        transform-origin: 50% 100%; animation: zaza-dondola 3.6s ease-in-out infinite; }
.zaza-svg { display: block; width: 100%; height: auto; overflow: visible; }
@keyframes zaza-dondola { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg) translateY(-3px); } }
.zaza-sguardo { animation: zaza-sguardo 7s ease-in-out infinite; }
@keyframes zaza-sguardo { 0%, 8% { transform: translate(0, 0); } 14%, 30% { transform: translate(-5px, 1px); } 38%, 52% { transform: translate(5px, -1px); } 60%, 72% { transform: translate(2px, 3.5px); } 80%, 100% { transform: translate(0, 0); } }
.zaza-palpebra { transform: scaleY(0); animation: zaza-batti 4.2s infinite; }
.zaza-palpebra-sx { transform-origin: 103.5px 135px; } .zaza-palpebra-dx { transform-origin: 182.5px 137px; }   /* in CSS e non nel markup: la CSP blocca gli stili «inline» */
@keyframes zaza-batti { 0%, 88% { transform: scaleY(0); } 91%, 95% { transform: scaleY(1); } 98%, 100% { transform: scaleY(0); } }
.zaza-bocca { transform: scale(1, 0); transform-origin: 142px 205px; animation: zaza-parla 2.8s infinite; }
@keyframes zaza-parla { 0% { transform: scale(1, 0); } 6% { transform: scale(.9, .9); } 14% { transform: scale(.78, .35); } 22% { transform: scale(1, .75); } 30% { transform: scale(.7, .2); } 40% { transform: scale(.95, 1); } 50% { transform: scale(.82, .4); } 58% { transform: scale(1, .8); } 66% { transform: scale(.78, .25); } 74% { transform: scale(.9, .6); } 82% { transform: scale(1, 0); } 100% { transform: scale(1, 0); } }
/* Zaza parla a voce (zaza-voce.js): pulsante «Ascolta Zaza» a destra, in basso; mentre parla Zaza «saltella» e il pulsante si illumina */
.eroe { cursor: pointer; }
.ascolta-zaza { position: absolute; right: 16px; bottom: 26px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px;
                border: 0; border-radius: 999px; font: inherit; font-weight: 800; font-size: .95rem; color: #fff; cursor: pointer;
                background: linear-gradient(90deg, #f28c1b, #ff3d2e); box-shadow: 0 8px 20px -8px rgba(255, 61, 46, .8);
                animation: ascolta-onda 2.2s ease-out infinite; }
.ascolta-zaza svg { width: 22px; height: 22px; flex: none; }
.ascolta-zaza[aria-pressed="true"] { animation: none; background: #fff; color: #d3202a; }
.ascolta-esito { position: absolute; left: 22px; right: 22px; bottom: 6px; margin: 0; font-size: .85rem; font-weight: 600; color: #ffd9a0; text-align: center; }
.ascolta-esito:empty { display: none; }
.zaza-parla .zaza { animation: zaza-salta .55s ease-in-out infinite; }
@keyframes zaza-salta { 0%, 100% { transform: rotate(-1.6deg) translateY(0); } 50% { transform: rotate(1.6deg) translateY(-7px); } }
@keyframes ascolta-onda { 0% { box-shadow: 0 8px 20px -8px rgba(255, 61, 46, .8), 0 0 0 0 rgba(255, 193, 90, .85); } 100% { box-shadow: 0 8px 20px -8px rgba(255, 61, 46, .8), 0 0 0 14px rgba(255, 193, 90, 0); } }
@media (prefers-reduced-motion: reduce) { .ascolta-zaza, .zaza-parla .zaza { animation: none; } }
/* la conchiglia pulsa già sempre da sola: quando la freccia la richiama non serve altro */

/* Dati del cliente e «dove dobbiamo venire» (una riga sola): tutti obbligatori, l'avviso rosso compare solo dopo un tentativo di invio */
.avviso-campi { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 16px; padding: 12px 14px; border-radius: 14px;
                background: var(--brace); color: #fff; box-shadow: 0 8px 20px -10px rgba(211, 32, 42, .9);
                font-weight: 800; font-size: .98rem; line-height: 1.3; text-align: center; }
.avviso-campi .smile { flex: none; font-size: 1.6rem; line-height: 1; }
.avviso-campi.scuoti { animation: scuoti .4s; }
@keyframes scuoti { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .avviso-campi.scuoti { animation: none; } }

/* Calendario dentro la chat: sempre in formato elenco quando lo spazio è stretto */
@container (max-width: 700px) {
  .cal-corpo { display: block; }
  .cal-ore { display: none; }
  .cal-giorno { border-right: 0; border-bottom: 1px solid var(--bordo); }
  .cal-testa { height: auto; flex-direction: row; justify-content: flex-start; gap: 8px; padding: 8px 12px; }
  .cal-colonna { height: auto !important; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; background-image: none; min-height: 12px; }
  .blocco { position: static; width: auto; min-width: 76px; min-height: 42px; font-size: .92rem; display: flex; align-items: center; justify-content: center; top: auto !important; height: auto !important; }
  .blocco .sec { display: none; }
}

/* Stato della richiesta */

/* Finestra "installa l'app" */
dialog.finestra { border: 0; padding: 0; border-radius: 26px; width: min(430px, calc(100vw - 32px)); background: var(--carta); color: var(--testo);
                  box-shadow: 0 40px 80px -20px rgba(27, 29, 34, .5); }
dialog.finestra::backdrop { background: rgba(27, 29, 34, .55); backdrop-filter: blur(4px); }
dialog.finestra[open] { animation: entra .3s cubic-bezier(.2, .8, .2, 1); }
.finestra-testa { background: var(--grad-fuoco); color: #fff; padding: 24px 22px 20px; position: relative; overflow: hidden; }
.finestra-testa img { width: 62px; height: 62px; background: #fff; border-radius: 20px; padding: 4px; position: relative; }
.finestra-testa h2 { margin: 12px 0 2px; position: relative; }
.finestra-testa p { margin: 0; position: relative; opacity: .9; font-size: .9rem; }
.finestra-testa .chiudi { position: absolute; top: 10px; right: 14px; background: none; border: 0; color: #fff; font-size: 1.8rem; cursor: pointer; line-height: 1; z-index: 2; }
.finestra-corpo { padding: 20px 22px 22px; }
.schede-os { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: var(--sfondo); border-radius: 14px; }
.schede-os button { border: 0; background: none; padding: 8px; border-radius: 11px; font: inherit; font-weight: 750; color: var(--testo-tenue); cursor: pointer; }
.schede-os button[aria-selected=true] { background: var(--carta); color: var(--testo); box-shadow: 0 1px 3px rgba(27, 29, 34, .12); }
.guida-os { padding-left: 20px; margin: 14px 0 0; display: grid; gap: 6px; font-size: .93rem; }
.guida-os li.tenue { list-style: none; margin-left: -20px; font-size: .86rem; }
.installa-ora { width: 100%; margin-bottom: 14px; }
.avviso-app { background: #fff1d6; color: #6b4a1a; border-radius: 14px; padding: 11px 13px; margin-bottom: 14px; font-size: .9rem; }
.avviso-app b { display: block; }
.avviso-app .btn { margin-top: 8px; }

/* Cruscotto di Fabio: avvisi sul telefono e invito dell'app a un cliente */
.avvisi-telefono, .invito-app { display: flex; align-items: center; justify-content: space-between; gap: 14px 22px; flex-wrap: wrap; }
.avvisi-telefono { margin-bottom: 18px; }
.avvisi-telefono[hidden] { display: none; }
.avvisi-telefono > div:first-child, .invito-app > div:first-child { flex: 1 1 260px; }
.avvisi-telefono h2, .invito-app h2 { font-size: 1.1rem; margin-bottom: 4px; }
.avvisi-telefono .tenue, .invito-app .tenue { font-size: .92rem; }
.avvisi-telefono [hidden] { display: none; }
.avvisi-telefono.attivi { border-color: #8fdcb5; background: var(--verde-chiaro); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media print { .testata, .piede, .azioni { display: none; } }

/* ============ Chat con messaggi (cliente e gestore): bolle, giorni, stato dell'invio ============ */
.riapro-chat body { visibility: hidden; }   /* chat già avviata: il modulo vuoto non deve lampeggiare prima del cambio pagina */
.chat-conversazione .chat-composer { display: none; }
.js .chat-conversazione .chat-composer { display: block; }
.chat-cancella { margin-left: auto; }
.chat-stato { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 14px; background: var(--carta); border-bottom: 1px solid var(--bordo); }
.chat-avviso { margin: 12px 14px 0; }
/* «Avvisami quando FZ Calor risponde» (v1.4.7) */
.chat-avvisi { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; padding: 9px 14px; background: #fff1d6; color: #6b4a1a; font-size: .9rem; border-bottom: 1px solid var(--bordo); }
.chat-avvisi[hidden], .chat-avvisi [hidden] { display: none; }
.chat-avvisi p { margin: 0; flex: 1 1 220px; }
.chat-avvisi.attivi { background: var(--verde-chiaro); color: inherit; }
.chat-avvisi-guida { flex-basis: 100%; font-size: .86rem; }
.chat-avvisi-guida summary { cursor: pointer; font-weight: 700; }
.chat-avvisi-guida ol { margin: 8px 0 2px; padding-left: 20px; display: grid; gap: 6px; }
/* Barra in basso dell'area del gestore: gli avvisi dei nuovi messaggi non sono attivi (gestore-avvisi.js) */
.barra-avvisi { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
                background: #fff1d6; color: #6b4a1a; font-size: .9rem; border-top: 1px solid var(--bordo); box-shadow: 0 -4px 14px rgba(0,0,0,.12); }
.barra-avvisi[hidden] { display: none; }
.barra-avvisi span { flex: 1 1 220px; }
.barra-avvisi button { flex: none; border: 0; background: transparent; color: inherit; font-size: 1.5rem; line-height: 1; padding: 2px 8px; cursor: pointer; }
.barra-avvisi .azione { font-size: .9rem; font-weight: 700; line-height: 1.2; padding: 7px 12px; border: 1.5px solid currentColor; border-radius: 8px; }
.barra-avvisi .azione[hidden] { display: none; }
@media (max-width: 520px) { .barra-avvisi span { flex-basis: 100%; } .barra-avvisi button:last-child { margin-left: auto; } }
/* senza rete: la pillola diventa gialla, dice cosa succede e le altre pillole lasciano posto */
.chat-info .chip#chat-rete[data-stato="offline"] { color: #ffd166; background: rgba(255, 209, 102, .16); border-color: rgba(255, 209, 102, .6); white-space: normal; }
#chat-rete[data-stato="offline"] .pallino { background: #ffd166; animation: none; }
#chat-rete[data-stato="offline"] ~ .chip { display: none; }
.chat-conversazione .chat-filo { gap: 6px; }
.giorno-sep { align-self: center; margin: 10px 0 4px; padding: 3px 12px; border-radius: 99px; background: color-mix(in srgb, var(--testo) 9%, transparent);
              color: var(--testo-tenue); font-size: .76rem; font-weight: 700; text-transform: capitalize; }
.msg { display: flex; max-width: 100%; }
.msg.mio { justify-content: flex-end; }
.msg-corpo { max-width: min(88%, 520px); padding: 8px 13px 6px; border-radius: 20px 20px 20px 6px; background: var(--carta); font-size: .95rem; line-height: 1.42;
             box-shadow: 0 1px 2px rgba(27, 29, 34, .08), 0 6px 16px -8px rgba(27, 29, 34, .18); overflow-wrap: anywhere; }
.msg.mio .msg-corpo { background: var(--grad-bolla); color: #fff; border-radius: 20px 20px 6px 20px; }
.msg.sistema .msg-corpo { background: var(--ghiaccio-chiaro); border: 1px dashed color-mix(in srgb, var(--ghiaccio) 55%, transparent); }
.msg-testo { margin: 0; white-space: pre-wrap; }
.msg-etichetta { display: block; margin-bottom: 2px; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--fuoco-scuro); }
.msg.mio .msg-etichetta { color: rgba(255, 255, 255, .85); }
.msg.sistema .msg-etichetta { color: var(--ghiaccio); }
/* «Fabio Zaza sta scrivendo…» (v1.7.11): tre puntini che saltano uno dopo l'altro; con «riduci animazioni» restano fermi */
.msg.scrive .msg-corpo { padding-bottom: 10px; }
.scrive-puntini { display: inline-flex; align-items: center; gap: 4px; height: 14px; }
.scrive-puntini i { width: 7px; height: 7px; border-radius: 50%; background: var(--testo-tenue); opacity: .4; animation: scrive-salto 1.1s infinite ease-in-out; }
.scrive-puntini i:nth-child(2) { animation-delay: .18s; }
.scrive-puntini i:nth-child(3) { animation-delay: .36s; }
@keyframes scrive-salto { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .scrive-puntini i { animation: none; opacity: .7; } }
.msg-vocale { display: block; margin-bottom: 2px; font-size: .74rem; font-weight: 650; opacity: .85; }
.msg-meta { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 3px; font-size: .7rem; opacity: .75; }
.msg.in-corso .msg-corpo { opacity: .8; }
.msg.errore .msg-corpo { opacity: 1; outline: 2px solid var(--brace); }
.msg-errore-testo { font-weight: 700; opacity: 1; }
.msg-azione { border: 0; background: rgba(255, 255, 255, .22); color: inherit; font: inherit; font-weight: 700; padding: 2px 9px; border-radius: 99px; cursor: pointer; }
.msg .foto-chat { align-self: auto; margin-top: 6px; }
.chat .chat-composer .aiuto:empty { display: none; }

/* Segnalazioni nell'area riservata: URGENTE / NON URGENTE */
.chip { display: inline-block; margin: 0 6px 3px 0; padding: 1px 9px; border-radius: 99px; font-size: .68rem; font-weight: 850; letter-spacing: .06em; vertical-align: 1px; }
.chip-urgente { background: var(--brace); color: #fff; }
.chip-non-urgente { background: var(--ghiaccio-chiaro); color: var(--ghiaccio); border: 1px solid color-mix(in srgb, var(--ghiaccio) 60%, transparent); }
.chip-motivo { display: inline-block; margin: 0 6px 3px 0; font-size: .74rem; font-weight: 650; opacity: .9; }
.msg.urgente .msg-corpo { outline: 2px solid var(--brace); background: color-mix(in srgb, var(--brace) 14%, var(--carta)); }
.msg.non-urgente .msg-corpo { outline: 1px solid color-mix(in srgb, var(--ghiaccio) 60%, transparent); }

/* Pagina Messaggi del gestore: elenco a sinistra, conversazione a destra (sul telefono una alla volta) */
.mess { display: grid; grid-template-columns: minmax(320px, 440px) 1fr;   /* v1.5.14: più larga (era 280–360): con il quarto pallino le scritte prendono ~250px e il nome deve restare leggibile */
        gap: 0; height: calc(100dvh - var(--alt-testata, 66px) - 84px); min-height: 460px;
        border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; background: var(--carta); box-shadow: var(--ombra); }
.mess-elenco { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--bordo); }
.mess-filtri { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px; border-bottom: 1px solid var(--bordo); }
.mess-filtri button { border: 1px solid var(--bordo); background: var(--sfondo); color: var(--testo); font: inherit; font-size: .82rem; font-weight: 700; padding: 5px 12px; border-radius: 99px; cursor: pointer; }
.mess-filtri button[aria-pressed="true"] { background: var(--testo); color: var(--sfondo); border-color: var(--testo); }
.mess-righe { flex: 1; overflow-y: auto; min-height: 0; list-style: none; margin: 0; padding: 0; }
.mess-riga { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--bordo); border-left: 5px solid transparent; background: none; color: inherit;
            font: inherit; padding: 10px 12px; cursor: pointer; }
.mess-riga:hover { background: color-mix(in srgb, var(--testo) 5%, transparent); }
.mess-riga[aria-current="true"] { background: color-mix(in srgb, var(--fuoco) 14%, transparent); }
.mess-riga.urgente { border-left-color: var(--brace); background: color-mix(in srgb, var(--brace) 10%, transparent); }
.mess-riga.non-urgente { border-left-color: var(--ghiaccio-vivo); }
.mess-riga-alto { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mess-riga-chi { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mess-riga-cestino { flex: none; display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 50%; color: #b3261e; cursor: pointer; }
.mess-riga-cestino svg { width: 18px; height: 18px; }
.mess-riga-cestino:hover, .mess-riga-cestino:focus-visible { background: rgba(179, 38, 30, .14); outline: none; }
.mess-riga-nome { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mess-riga-ora { flex: none; font-size: .74rem; color: var(--testo-tenue); }
.mess-riga-testo { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: .86rem; color: var(--testo-tenue); }
.mess-riga-testo span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mess-riga.non-letto .mess-riga-testo { color: var(--testo); font-weight: 650; }
.mess-contatore { flex: none; min-width: 22px; padding: 0 7px; border-radius: 99px; background: var(--brace); color: #fff; font-size: .74rem; font-weight: 800; text-align: center; }
.mess-riga:not(.urgente) .mess-contatore { background: var(--fuoco); }
.mess-vuoto { padding: 26px 16px; text-align: center; color: var(--testo-tenue); }
.mess-conv { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.mess-testa { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--bordo); }
.mess-testa h2 { margin: 0; font-size: 1.1rem; flex: 1 1 200px; }
.mess-testa .azioni { gap: 6px; }
.mess-testa select { width: auto; min-height: 34px; padding: 4px 10px; font-size: .86rem; }
.mess-indietro { display: none; }
/* La «X» della chat aperta (v1.4.33): chiude la chat e torna all'elenco, senza cambiare niente */
.mess-testa { position: relative; }
.mess-testa-alto { flex: 1 1 100%; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding-right: 44px; }   /* 44 = la «X» (34) + il respiro: solo la prima riga le lascia posto */
.mess-chiudi { position: absolute; top: 10px; right: 14px; display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--bordo); border-radius: 50%; background: var(--carta);
               color: var(--testo-tenue); cursor: pointer; transition: color .12s, border-color .12s, background-color .12s; }
.mess-chiudi svg { width: 16px; height: 16px; }
.mess-chiudi:hover, .mess-chiudi:focus-visible { color: var(--brace); border-color: var(--brace); background: color-mix(in srgb, var(--brace) 10%, var(--carta)); }
.mess-chiudi:focus-visible { outline: 3px solid var(--testo); outline-offset: 2px; }
@media (pointer: coarse) { .mess-chiudi { width: 44px; height: 44px; } .mess-testa-alto { padding-right: 54px; } }
.mess-sotto { flex-basis: 100%; font-size: .84rem; color: var(--testo-tenue); }
.mess-filo { flex: 1; overflow-y: auto; min-height: 0; padding: 14px; display: flex; flex-direction: column; gap: 6px; background-color: var(--sfondo);
             background-image: radial-gradient(var(--puntini) 1px, transparent 1px); background-size: 18px 18px; }
.mess-comp { padding: 10px; border-top: 1px solid var(--bordo); background: var(--sfondo); }
.mess-comp .composer-riga { align-items: flex-end; }
.mess-comp textarea.composer-testo { flex: 1; min-height: 42px; max-height: 160px; resize: none; border-radius: 21px; padding: 9px 16px; overflow-y: hidden; }
.mess-comp .invia-tondo { background: var(--grad-fuoco); }
.mess-pannello { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.mess-seleziona { flex: 1; display: grid; place-items: center; color: var(--testo-tenue); padding: 24px; text-align: center; }
.mess-rete { padding: 6px 12px; font-size: .8rem; font-weight: 700; color: #8a4b00; background: #fff1d6; display: none; }
.mess-rete.attiva { display: block; }
.mess-rete a { color: inherit; font-weight: 850; text-underline-offset: 3px; }   /* «Ricarica la pagina» nel banner «Sessione rinnovata» (v1.6.0), come .int-rete a negli Interventi */

/* Chat «da classificare»: il sistema non ha riconosciuto il caso, decidono Fabio o Daniela (ambra, tra il rosso e il blu) */
.chip-da-classificare { background: #fff1d6; color: #8a4b00; border: 1px solid #f6c46b; }
.mess-riga.da-classificare { border-left-color: #f2a516; background: color-mix(in srgb, #f2a516 9%, transparent); }
.mess-conta { display: inline-block; min-width: 20px; margin-left: 6px; padding: 0 6px; border-radius: 99px; background: #f2a516; color: #3d2600; font-size: .74rem; font-weight: 850; text-align: center; }
.mess-conta[hidden] { display: none; }
.mess-classifica { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 10px 14px; background: #fff1d6; color: #5e3500; border-bottom: 1px solid #f6c46b; }
.mess-classifica-testo { margin: 0; flex: 1 1 260px; font-size: .9rem; }
.mess-classifica-scelte { display: flex; gap: 8px; flex: 0 0 auto; }
.mess-scelta { min-height: 40px; padding: 7px 18px; border: 0; border-radius: 12px; font: inherit; font-size: .92rem; font-weight: 800; cursor: pointer; color: #fff; }
.mess-scelta.urgente { background: var(--brace); }
.mess-scelta.non-urgente { background: #1565b8; }   /* fisso: il blu del tema si schiarisce di sera e il bianco non si leggerebbe */
.mess-scelta:hover { filter: brightness(1.08); }
.mess-scelta:focus-visible { outline: 3px solid var(--testo); outline-offset: 2px; }
.mess-esito { margin: 0; padding: 7px 14px; background: color-mix(in srgb, var(--brace) 12%, var(--carta)); color: var(--brace); font-size: .86rem; font-weight: 700; border-bottom: 1px solid var(--bordo); }
.mess-esito[hidden] { display: none; }

/* Cestino delle chat: un cestino di fianco a ogni chat; la sezione «Cestino» è segnata da un cestino gigante */
.mess-voce { display: flex; align-items: stretch; border-bottom: 1px solid var(--bordo); }
.mess-voce .mess-riga { flex: 1; width: auto; min-width: 0; border-bottom: 0; }
.mess-lato { flex: none; width: 48px; display: grid; place-items: center; border: 0; border-left: 1px solid var(--bordo); background: none; color: var(--testo-tenue); cursor: pointer; }
.mess-lato svg { width: 21px; height: 21px; }
.mess-lato.cestina:hover, .mess-lato.cestina:focus-visible { background: color-mix(in srgb, var(--brace) 14%, transparent); color: var(--brace); }
.mess-lato.ripristina:hover, .mess-lato.ripristina:focus-visible { background: color-mix(in srgb, var(--ghiaccio-vivo) 16%, transparent); color: var(--ghiaccio-vivo); }
.mess-lato:focus-visible { outline: 3px solid var(--testo); outline-offset: -3px; }
.mess-riga.cestinata { border-left-color: transparent; background: none; opacity: .72; }
/* Stato dell'intervento (v1.4.30): di fianco a ogni chat tre pallini da riempire («in attesa di appuntamento» dalla v1.5.14, «in corso», «terminato») e il cestino («abbandonato / rinunciato»).
   Dalla v1.4.31 ognuno ha la sua scritta sopra, nel suo colore: tutta la colonna (scritta + pallino) si tocca. */
.mess-lato-gruppo { flex: none; display: flex; align-items: center; padding: 0 2px; border-left: 1px solid var(--bordo); }   /* ~250px in tutto: quanto serve alle quattro scritte (v1.5.14), il resto va al nome */
.mess-pallino, .mess-lato-gruppo .mess-lato { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; width: auto; height: 72px; padding: 4px 2px;
                                              border: 0; border-radius: 8px; background: none; cursor: pointer; font: inherit; color: var(--testo-tenue); --colore: var(--testo-tenue); }
.mess-pallino.attesa-appuntamento { --colore: var(--ghiaccio-vivo); }   /* v1.5.14: in attesa di appuntamento, azzurro */
.mess-pallino.in-corso { --colore: #f2a516; }
.mess-pallino.terminato { --colore: var(--verde); }
.mess-lato-gruppo .mess-lato.cestina:hover, .mess-lato-gruppo .mess-lato.cestina:focus-visible { --colore: var(--brace); }
.mess-lato-gruppo .mess-lato svg { width: 20px; height: 20px; }
.mess-etichetta { display: flex; align-items: flex-end; justify-content: center; min-height: 27px; font-size: .7rem; line-height: 1.2; text-align: center; white-space: nowrap; color: var(--colore); }
.mess-punto { width: 34px; height: 34px; display: grid; place-items: center; }
.mess-pallino-tondo { box-sizing: border-box; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--colore); background: transparent; transition: background-color .12s, box-shadow .12s; }
.mess-pallino:hover { background: color-mix(in srgb, var(--colore) 16%, transparent); }
.mess-pallino[aria-pressed="true"] .mess-pallino-tondo { background: var(--colore); box-shadow: 0 0 0 3px color-mix(in srgb, var(--colore) 28%, transparent); }
.mess-pallino:focus-visible { outline: 3px solid var(--testo); outline-offset: -2px; }
.mess-pallino.bloccato { cursor: default; }                                      /* v1.5.21: intervento terminato, i tre pallini non si toccano più */
.mess-pallino.bloccato:hover { background: none; }
.mess-pallino.bloccato:not([aria-pressed="true"]) { opacity: .4; }               /* i due spenti sbiadiscono, il verde pieno resta ben visibile */
.mess-filtri .mess-filtro-cestino { display: inline-flex; align-items: center; gap: 6px; }
.mess-filtro-cestino svg { width: 15px; height: 15px; }
.mess-conta.cestino { background: var(--testo-tenue); color: var(--sfondo); margin-left: 0; }
.mess-cestino-testa { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 18px 16px; text-align: center; border-bottom: 1px solid var(--bordo);
                      background: color-mix(in srgb, var(--testo) 4%, transparent); }
.mess-cestino-testa[hidden] { display: none; }
.cestino-gigante { width: 104px; height: 104px; color: var(--testo-tenue); }
.mess-cestino-titolo { margin: 0; font-size: 1.1rem; font-weight: 800; }
.mess-cestino-aiuto { margin: 0; max-width: 290px; font-size: .8rem; color: var(--testo-tenue); }
.mess-nel-cestino { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--bordo);
                    background: color-mix(in srgb, var(--testo) 7%, var(--carta)); font-weight: 700; }
.mess-nel-cestino p { margin: 0; font-size: .9rem; }
/* «Casi simili» (v1.6.1): riquadro di SOLA LETTURA sopra i messaggi della chat del gestore. Sobrio e silenzioso: nessun rosso, nessun lampeggio, nessun suono.
   Di serie nascosto (class nascosto): lo mostra admin-messaggi.js solo quando l'ultimo messaggio del cliente somiglia a un caso passato. Sul telefono parte raccolto
   (una riga); aperto non supera il 38% dell'altezza e scorre da solo, così i messaggi restano sempre in vista. Lo STATO di ogni caso è scritto a parole, col suo colore. */
.mess-simili { flex: none; display: flex; flex-direction: column; max-height: 38vh; max-height: min(38dvh, 340px); border-bottom: 1px solid var(--bordo);
               background: color-mix(in srgb, var(--ghiaccio-vivo) 7%, var(--carta)); }
.mess-simili-testa { display: flex; align-items: center; flex-wrap: wrap; gap: 0 10px; padding: 2px 6px 2px 8px; }
.mess-simili-apri { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 8px 4px 4px; border: 0; border-radius: 8px; background: none; color: var(--testo);
                    font: inherit; font-size: .92rem; font-weight: 800; cursor: pointer; }
.mess-simili-apri:focus-visible, .mess-simili-chiudi:focus-visible { outline: 3px solid var(--testo); outline-offset: 1px; }
.mess-simili-freccia { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid currentColor; transition: transform .12s; }
.mess-simili.raccolto .mess-simili-freccia { transform: rotate(-90deg); }
.mess-simili-conta { min-width: 20px; padding: 0 6px; border-radius: 99px; background: var(--testo-tenue); color: var(--carta); font-size: .74rem; font-weight: 850; text-align: center; }   /* grigio: nessun numero rosso */
.mess-simili-nota { flex: 1 1 auto; font-size: .76rem; color: var(--testo-tenue); }
.mess-simili-chiudi { flex: none; margin-left: auto; display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none;
                      color: var(--testo-tenue); cursor: pointer; }
.mess-simili-chiudi svg { width: 15px; height: 15px; }
.mess-simili-chiudi:hover { background: color-mix(in srgb, var(--testo) 10%, transparent); color: var(--testo); }
@media (pointer: coarse) { .mess-simili-chiudi { width: 44px; height: 44px; } .mess-simili-apri { min-height: 44px; } }
.mess-simili-lista { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 0 8px 8px; }
.mess-simili.raccolto .mess-simili-lista, .mess-simili.raccolto .mess-simili-nota { display: none; }
.simile { flex: none; border: 1px solid var(--bordo); border-radius: 12px; background: var(--carta); }
.simile-sommario { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-height: 40px; padding: 6px 10px; list-style: none; cursor: pointer; }
.simile-sommario::-webkit-details-marker { display: none; }
.simile-sommario:focus-visible { outline: 3px solid var(--testo); outline-offset: -3px; border-radius: 12px; }
.simile[open] > .simile-sommario { border-bottom: 1px solid var(--bordo); }
.simile-stato { --c: var(--testo-tenue); flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 1.5px solid var(--c); border-radius: 99px;
                background: color-mix(in srgb, var(--c) 16%, var(--carta)); color: var(--testo); font-size: .76rem; font-weight: 850; white-space: nowrap; }
.simile-stato::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.simile-stato.s-risolto { --c: var(--verde); }
.simile-stato.s-regola { --c: #8f72dc; }   /* glicine: è una risposta che hai approvato tu (v1.7.21), non la storia di un caso */
.simile-stato.s-tamponato, .simile-stato.s-parziale, .simile-stato.s-aperto { --c: #d98a00; }   /* ambra: il problema può non essere chiuso, e si vede */
.simile-stato.s-fissato, .simile-stato.s-in_attesa { --c: var(--ghiaccio-vivo); }
.simile-titolo { flex: 1 1 180px; min-width: 0; font-size: .9rem; font-weight: 700; overflow-wrap: anywhere; }
.simile-corpo { padding: 2px 12px 10px; font-size: .86rem; }
.simile-sottotitolo { margin: 10px 0 2px; font-size: .72rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; color: var(--testo-tenue); }
.simile-testo { margin: 0; overflow-wrap: anywhere; }
.simile-passi, .simile-elenco { margin: 0; padding-left: 20px; overflow-wrap: anywhere; }
.simile-passi li, .simile-elenco li { margin: 2px 0; }
.simile-periodo { margin: 10px 0 0; font-size: .76rem; color: var(--testo-tenue); }
.mess-simili-nota { flex-basis: 100%; order: 3; padding: 0 4px 4px; }
/* Il contenitore .mess ha un'altezza minima (460px) e l'intestazione della chat è già alta: il riquadro, che prende altro spazio, NON deve spingere la barra di scrittura
   fuori. Finché c'è il riquadro l'altezza minima cresce di quanto serve (la pagina scorre comunque: sopra c'è il menu). Dalla v1.7.0 vale a ogni larghezza (prima solo sotto gli 800 px). */
.mess:has(.mess-simili:not(.nascosto)) { min-height: 530px; }                                                         /* raccolto: una riga di ~50px */
.mess:has(.mess-simili:not(.nascosto):not(.raccolto)) { min-height: calc(490px + 38vh); min-height: calc(490px + min(38dvh, 340px)); }   /* aperto: fino al 38% dell'altezza */
/* «Appuntamento riconosciuto» (v1.7.8): la proposta nata da una data scritta da Zaza, tra i messaggi e la scrittura. Sta nella colonna (flex: none): non copre mai il campo di
   scrittura, al massimo accorcia i messaggi; azzurro tenue come i «Casi simili» (è un suggerimento, non un allarme). I due pulsanti sono alti almeno 44 px e, se la riga è
   stretta, vanno a capo uno sotto l'altro. Compare con una dissolvenza breve, che chi ha chiesto meno movimento non vede. */
.mess-proposta { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 10px 14px 12px; border-top: 1px solid var(--bordo); background: color-mix(in srgb, var(--ghiaccio-vivo) 9%, var(--carta));
                 animation: mess-proposta-entra .18s ease-out; }
@keyframes mess-proposta-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mess-proposta { animation: none; } }
.mess-proposta-titolo { margin: 0; font-size: .72rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; color: var(--ghiaccio); }
.mess-proposta-testo { margin: 0; font-size: .92rem; line-height: 1.4; overflow-wrap: anywhere; }
.mess-proposta-frammento { font-style: italic; }
.mess-proposta-quando { font-weight: 850; white-space: nowrap; }
.mess-proposta-sposta { margin: 0; font-size: .84rem; font-weight: 700; color: var(--fuoco-scuro); overflow-wrap: anywhere; }
.mess-proposta-sposta[hidden] { display: none; }
.mess-proposta-azioni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.mess-proposta-azioni .btn { flex: 1 1 150px; min-height: 44px; padding: 8px 16px; font-size: .92rem; box-shadow: none; }
.mess-proposta-azioni .btn.secondario { flex: 0 1 110px; }
.mess-proposta-azioni .btn:focus-visible { outline: 3px solid var(--testo); outline-offset: 2px; }
/* Come per i «Casi simili»: finché c'è il riquadro l'altezza minima della pagina cresce, così la barra di scrittura non esce dallo schermo */
.mess:has(.mess-proposta:not(.nascosto)) { min-height: 600px; }
/* Finestra di conferma del cestino e dei pallini (v1.4.32) */
dialog.conferma { width: min(400px, calc(100vw - 32px)); }
.conferma h2 { margin: 0 0 4px; font-size: 1.15rem; }
.conferma-chat { margin: 0 0 12px; font-size: .85rem; font-weight: 700; color: var(--testo-tenue); overflow-wrap: anywhere; }
.conferma-chat:empty { display: none; }
.conferma-testo { margin: 0 0 20px; font-size: 1rem; line-height: 1.45; }
.conferma .azioni .btn { flex: 1 1 140px; }
.mess-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 24px);
              padding: 11px 16px; border-radius: 14px; background: var(--testo); color: var(--sfondo); font-size: .9rem; font-weight: 650; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .55); }
.mess-toast[hidden] { display: none; }
.mess-toast button { border: 0; background: none; color: var(--fuoco); font: inherit; font-weight: 850; cursor: pointer; padding: 4px 6px; }
/* Telefono (v1.5.14): quattro scelte rotonde accanto al nome lo ridurrebbero a quattro lettere. Le chat con i pallini vanno su due righe:
   in alto il nome e l'anteprima a tutta larghezza, sotto i pallini distribuiti. Il cestino (chat già buttate) resta di fianco, come prima. */
.mess-voce:has(.mess-lato-gruppo) { flex-wrap: wrap; }
.mess-voce:has(.mess-lato-gruppo) .mess-riga { flex: 1 1 100%; }
.mess-voce .mess-lato-gruppo { flex: 1 1 100%; justify-content: space-around; padding: 0 6px; border-left: 0; border-top: 1px solid var(--bordo); }
.mess { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - var(--alt-testata, 66px) - 84px); }   /* minmax(0, …): l'anteprima lunga si tronca, non allarga la lista; 84 = margini della pagina; la testata è --alt-testata */
.mess-elenco { min-width: 0; }
.mess .mess-conv { display: none; }
.mess.apri-chat .mess-elenco { display: none; }
.mess.apri-chat .mess-conv { display: flex; }
.mess-indietro { display: inline-flex; }
.mess-testa h2 { flex-basis: 110px; min-width: 0; overflow-wrap: anywhere; }   /* «‹ Chat», nome e «X» stanno sulla stessa riga; il nome lungo va a capo */
/* v1.5.41 – Chat aperta da «Apri chat» degli Interventi (?da=interventi → class mess-solo, la mette il server): solo la chat di quel cliente, a tutta larghezza,
   senza l'elenco delle altre e senza la «X»; in testata «‹ Torna a Interventi» (collegamento vero). Sta DOPO i blocchi per il telefono: a parità di specificità vince
   l'ultimo, così la conversazione resta in vista anche prima che la chat si apra. */
.mess.mess-solo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.mess.mess-solo .mess-elenco { display: flex; min-width: 0; border-right: 0; }
.mess.mess-solo .mess-elenco > :not(.mess-rete) { display: none; }   /* dell'elenco resta solo l'avviso «Senza connessione» / «Sessione scaduta», che abita in questa colonna */
.mess.mess-solo .mess-conv { display: flex; }
.mess.mess-solo .mess-indietro, .mess.mess-solo .mess-chiudi { display: none; }   /* «Torna a Interventi» fa da uscita: niente «‹ Chat» né «X» doppie */
.mess.mess-solo .mess-seleziona .btn { margin-top: 12px; }   /* il segnaposto «Apro la chat…» (finché non si apre) ha la sua uscita */
.mess.mess-solo .mess-testa-alto { padding-right: 0; }   /* senza «X» non serve lasciarle il posto */
.mess-torna { flex: none; }

/* Sezione CLIENTI */
.clienti-barra { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.clienti-barra input[type=search] { flex: 1 1 240px; width: auto; padding: 10px 14px; border: 1px solid var(--bordo); border-radius: 13px; background: var(--carta); color: var(--testo); font: inherit; min-height: 44px; }
.clienti-sospesi { display: flex; gap: 12px 18px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 16px; border-color: var(--fuoco); background: var(--fuoco-chiaro); }
.clienti-sospesi[hidden] { display: none; }
.cliente-riga.nascosta-ricerca { display: none; }
.cliente-nome { font-weight: 800; }
.cliente-cestino { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; margin-left: 6px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px;
                   background: transparent; color: var(--fuoco); cursor: pointer; }
.cliente-cestino:hover, .cliente-cestino:focus-visible { background: var(--fuoco-chiaro); color: var(--fuoco-scuro); }
.cliente-cestino:disabled { opacity: .5; cursor: wait; }
@media (pointer: coarse) { .cliente-cestino { width: 44px; height: 44px; } }
.cliente-nota { font-size: .8rem; color: var(--testo-tenue); max-width: 340px; white-space: pre-wrap; }
.badge.da-verificare { background: #fff1d6; border-color: #f6c46b; color: #8a4b00; }
/* v1.5.32: elenco a schede diviso per lettera (iniziale del cognome). Titolo con il conteggio, indice A–Z (lettere vuote spente,
   quella in vista arancione), per ogni gruppo una lettera grande in gradiente e una griglia di schede: tondo azzurro con le
   iniziali, cognome sopra e nome sotto, dati con le icone, pillola «N · apri chat». I gruppi senza risultati spariscono (classe vuoto). */
.clienti-titolo { display: flex; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.clienti-titolo h1 { margin: 0; }
.clienti-sotto { font-size: .9rem; }
.clienti-indice { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 20px; }
.clienti-indice a, .clienti-indice span { min-width: 32px; height: 32px; padding: 0 6px; display: grid; place-items: center; border-radius: 10px; font-weight: 800; font-size: .85rem;
                                          text-decoration: none; color: var(--testo); background: var(--carta); border: 1px solid var(--bordo); }
.clienti-indice a:hover { border-color: var(--fuoco); color: var(--fuoco-scuro); }
.clienti-indice a.attuale { background: var(--fuoco); border-color: var(--fuoco); color: #fff; }
.clienti-indice .spenta { opacity: .3; }
.sc-gruppo { margin-bottom: 28px; scroll-margin-top: 96px; }
.sc-gruppo.vuoto { display: none; }
.sc-lettera { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.sc-grande { font-size: 2.7rem; font-weight: 900; line-height: 1; letter-spacing: -.02em; background: var(--grad-fuoco); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sc-conta { font-size: .85rem; font-weight: 650; }
.sc-lettera i { flex: 1; height: 1px; background: linear-gradient(90deg, var(--fuoco-bordo), var(--bordo) 45%, transparent); }
.sc-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 12px; }
.sc-carta { display: flex; gap: 14px; background: var(--carta); border: 1px solid var(--bordo); border-radius: 18px; padding: 16px; box-shadow: var(--ombra); min-width: 0; }
.sc-carta.nascosta-ricerca { display: none; }
.sc-carta:hover { border-color: var(--fuoco-bordo); }
.sc-carta.evidenzia { border-color: var(--fuoco); box-shadow: 0 0 0 3px var(--fuoco-bordo), var(--ombra); }   /* arrivo da un link #c123 (dalla chat) */
.sc-tondo { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 1rem; letter-spacing: .02em; color: #fff;
            background: var(--grad-ghiaccio); box-shadow: 0 8px 18px -8px rgba(31, 143, 224, .8); }
.sc-corpo { flex: 1; min-width: 0; }
.sc-nome { display: flex; align-items: flex-start; gap: 6px; }
.sc-nome .cliente-nome { display: flex; flex-direction: column; line-height: 1.15; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.sc-nome .cliente-nome b { font-size: 1.08rem; font-weight: 800; }
.sc-nome .cliente-nome span { font-size: .95rem; color: var(--testo-tenue); }
.sc-nome .cliente-cestino { margin-left: auto; }
.sc-dati { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; font-size: .92rem; }
.sc-dati a, .sc-dati > span { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.sc-dati svg { width: 15px; height: 15px; flex: none; color: var(--testo-tenue); }
.sc-dati a { text-decoration: none; }
.sc-dati a:hover { text-decoration: underline; }
.sc-carta .cliente-nota { margin-top: 6px; max-width: none; }
.sc-piede { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--bordo); }
.cliente-chat { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 99px; background: var(--ghiaccio-chiaro); border: 1px solid rgba(106, 168, 240, .35);
                text-decoration: none; font-weight: 700; font-size: .82rem; }
.sc-ric .tenue { font-size: .85rem; }
.clienti-indice .spenta { display: none; }   /* come sul telefono: solo le lettere con clienti, una riga invece di tre */
dialog.doppione { border: 0; padding: 0; border-radius: 22px; width: min(720px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); background: var(--carta); color: var(--testo);
                  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .6); overflow: auto; }
dialog.doppione::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(3px); }
.doppione-testa { background: var(--grad-fuoco); color: #fff; padding: 18px 22px; }
.doppione-testa h2 { margin: 0 0 4px; font-size: 1.2rem; }
.doppione-testa p { margin: 0; font-size: .9rem; opacity: .95; }
.doppione-corpo { padding: 18px 22px 22px; }
.doppione-confronto { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.doppione-confronto { grid-template-columns: 1fr; }   /* le due schede una sotto l'altra (v1.7.0: a ogni larghezza, come sul telefono) */
.doppione-scheda { border: 1px solid var(--bordo); border-radius: 16px; padding: 12px 14px; background: var(--sfondo); }
.doppione-scheda h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--testo-tenue); margin-bottom: 6px; }
.doppione-scheda.scelta { border: 2px solid var(--fuoco); }
.doppione-scheda dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 3px 10px; font-size: .9rem; }
.doppione-scheda dt { color: var(--testo-tenue); } .doppione-scheda dd { margin: 0; overflow-wrap: anywhere; }
.doppione-motivi { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 5px; }
.doppione-motivi li { background: #fff1d6; color: #8a4b00; border-radius: 99px; padding: 1px 10px; font-size: .74rem; font-weight: 750; }
.doppione-scelte { display: grid; gap: 8px; }
.doppione-scelte .btn { flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; height: auto; padding: 10px 16px; }
.doppione-scelte .btn small { display: block; font-weight: 500; opacity: .85; }
.doppione-errore { color: var(--brace); font-weight: 700; margin: 8px 0 0; }
.doppione-errore:empty { display: none; }

/* ---------- Preventivi (v1.5.28): le tre schede dentro la sezione (Tutti, Caldaie, Climatizzazioni) e il segno di chi ha chiesto un preventivo ---------- */
.mess-sezioni { display: flex; gap: 6px; padding: 10px 10px 0; flex-wrap: wrap; }
.mess-sezioni a { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 99px; border: 1px solid var(--bordo); background: var(--sfondo); color: var(--testo); font-size: .86rem; font-weight: 800; text-decoration: none; }
.mess-sezioni a:hover { border-color: var(--testo-tenue); }
.mess-sezioni a[aria-current="page"] { background: #d63a3a; border-color: #d63a3a; color: #fff; }
.mess-sezioni a:focus-visible { outline: 3px solid var(--ghiaccio); outline-offset: 2px; }
.mess-sezioni .mess-conta { margin-left: 7px; }
.mess-sezioni a[aria-current="page"] .mess-conta { background: #fff; color: #8f1d1d; }
.chip-preventivo { background: #ffe3e0; color: #8f1d1d; border: 1px solid #f2a6a0; }
.chip-accettato { background: #dff5e7; color: #0f6b3a; border: 1px solid #8fd4ab; }   /* nei Preventivi: preventivo accettato (sul server «terminato»), la chat resta come archivio in fondo (v1.5.31-33) */
.chip-fissato { background: #efe6fb; color: #43237a; border: 1px solid #b38cf0; }   /* chat con un appuntamento fissato (v1.7.3): testata della conversazione e barra del telefono */
#mess-sezione { max-width: 100%; }
@media (forced-colors: active) { .mess-sezioni a[aria-current="page"] { border: 3px solid CanvasText; } }

/* ---------- Foto e video nei messaggi (v1.7.12) ---------- */
.anteprima video { width: 100%; height: 100%; object-fit: cover; display: block; background: #1b1d22; }
.anteprima.video::after { content: "▶"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
                          font-size: 12px; padding-left: 2px; background: rgba(27, 29, 34, .65); color: #fff; pointer-events: none; }
.msg .allegati-chat { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.msg .allegati-chat .foto-allegata { display: block; width: 96px; height: 96px; border-radius: 12px; overflow: hidden; }
.msg .allegati-chat .foto-allegata img { width: 100%; height: 100%; object-fit: cover; display: block; }
.msg .allegati-chat .video-chat { display: block; width: min(100%, 260px); max-height: 260px; border-radius: 12px; background: #1b1d22; }
.msg .allegati-chat .video-in-invio { display: inline-block; padding: 6px 10px; border-radius: 12px; background: rgba(255, 255, 255, .22); font-size: .82rem; font-weight: 650; }

/* Nelle chat (la conversazione del cliente e la pagina Messaggi di Fabio e Daniela) nessuna barra di scorrimento verticale visibile, nemmeno quella della pagina:
   si scorre lo stesso con rotella, dito e tastiera (richiesta dell'utente, v1.7.10 per l'elenco e la conversazione larghi; v1.7.12 per tutta la pagina). */
html:has(.mess), html:has(.chat-conversazione) { scrollbar-width: none; -ms-overflow-style: none; }
html:has(.mess)::-webkit-scrollbar, html:has(.chat-conversazione)::-webkit-scrollbar { display: none; }