/* ══════════════════════════════════════════════════════════════════════════
   APP DEGLI OPERATORI SUL TELEFONO · app.css (solo app.html)
   --------------------------------------------------------------------------
   tavolozza di Max Bill col blu cobalto, come la console, ma impaginato da
   telefono (docs/DESIGN.md §2, §3.3, §4; riferimenti app-inizio.html e
   app-richiesta.html in docs/design/riferimento/). Colonna da 430 px, centrata
   anche sul PC; barra in basso Inizio · Coda · Mie · Per te sempre presente.
   Livelli: fondo --paper (L0), carte bianche --e1 (L1), il pulsante grande (L2),
   barra della chiamata e fogli dal basso (L3). Un solo pulsante pieno per vista.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  color-scheme:light;
  --font:'IBM Plex Sans','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  --mono:'IBM Plex Mono','SFMono-Regular',ui-monospace,Menlo,monospace;
  --paper:#F1EEE6; --white:#FFFFFF; --pearl:#F5F3EE; --light:#F8F7F3; --hairline:#E8E4DA; --border:#D9D4C8;
  --bordo-campo:#8494A6;
  --ink:#131A24; --mid:#414A57; --gray:#5F6B7A;
  --canale:#1F4FA3; --canale-scuro:#163A78; --canale-chiaro:#E8EEF9;
  --amber:#E07A10; --amber-scuro:#9A4B00; --amber-light:#FDEDD8;
  --violet:#7B2D78; --violet-scuro:#5A1F57; --violet-light:#F5E7F3;
  --green:#2E8A3F; --green-scuro:#247032; --green-light:#E3F2E5; --green-testo:#1A4D25;
  --red:#D3291F; --red-scuro:#A61D15; --red-light:#FBE5E2;
  --slate-scuro:#475569;
  --notte:#172046; --notte-2:#2B3868; --notte-testo:#B5BEDB; --notte-campo:#1E2A55;
  --nota-fondo:#FFF9E6; --nota-anello:#F3D27A; --nota-testo:#6B4700;
  --sh:21,38,62;
  --e1:0 0 0 1px rgba(var(--sh),.06), 0 1px 2px rgba(var(--sh),.06);
  --e2:0 0 0 1px rgba(var(--sh),.05), 0 2px 4px rgba(var(--sh),.05), 0 8px 20px rgba(var(--sh),.08);
  --e3:0 8px 28px rgba(var(--sh),.18);
  --r-chip:999px; --r-btn:12px; --r-pozzetto:12px; --r-carta:14px; --r-l2:16px; --r-l3:18px; --r-foglio:20px;
  --barra-h:64px;
  --sicuro:env(safe-area-inset-bottom, 0px);
  --fondo-h:0px;   /* altezza del compositore o della barra della chiamata (la scrive app.html) */
  --kb:0px;        /* la tastiera di iOS sopra il fondo (visualViewport) */
  /* Tavolozza Max Bill (15/10/2026): colori pieni e puri su carta calda. */
  --turchese:#00968C; --turchese-scuro:#00534D; --turchese-light:#DDF3F0; --giallo:#F2B705;
  --magenta:#B3245C; --magenta-scuro:#7D1740; --magenta-light:#FAE6EE;
  --fascia:linear-gradient(90deg, #1F4FA3 0 24%, #D3291F 24% 36%, #E07A10 36% 54%, #F2B705 54% 62%,
          #2E8A3F 62% 74%, #00968C 74% 88%, #7B2D78 88% 100%);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ background:#E3DED2; -webkit-text-size-adjust:100%; text-size-adjust:100%; }   /* carta più scura intorno alla colonna */
body{ margin:0; font-family:var(--font); color:var(--ink); font-size:15px; line-height:1.4; -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent; }
h1,h2,h3,p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; font-size:inherit; color:inherit; cursor:pointer; border:0; background:none; padding:0; margin:0; }
button:disabled{ cursor:default; }
input,textarea,select{ font-family:inherit; color:inherit; }
img{ display:block; max-width:100%; }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
:focus-visible{ outline:2px solid var(--canale); outline-offset:2px; }
.sr{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
[hidden]{ display:none !important; }

/* Le icone di console-icone.js: <span class="ui-ic"><svg/></span> */
.ui-ic{ display:inline-flex; width:20px; height:20px; flex:none; }
.ui-ic svg{ width:100%; height:100%; display:block; }

/* Avatar degli operatori: colori fissi della console (iniziali bianche, AA) */
.av{ --op:var(--slate-scuro); width:40px; height:40px; border-radius:50%; background:var(--op); color:#fff; display:inline-grid; place-items:center;
  font-size:14px; font-weight:700; position:relative; flex:none; letter-spacing:.01em; }
.av.piccolo{ width:32px; height:32px; font-size:12px; }
.av .pres{ position:absolute; right:-1px; bottom:-1px; width:12px; height:12px; border-radius:50%; background:var(--green); box-shadow:0 0 0 2px #fff; }
.av .pres.spento{ background:#fff; box-shadow:0 0 0 2px #fff, inset 0 0 0 2px var(--bordo-campo); }
.op-0{--op:#1D4ED8}.op-1{--op:#B45309}.op-2{--op:#BE185D}.op-3{--op:#0E7490}.op-4{--op:#4D7C0F}.op-5{--op:#6D28D9}.op-6{--op:#9A3412}.op-7{--op:#475569}

/* ── L0: la colonna dell'app (sul PC resta larga come un telefono) ───────── */
.app{ position:relative; max-width:430px; min-height:100vh; min-height:100dvh; margin:0 auto; background:var(--paper);
  padding-bottom:calc(var(--barra-h) + var(--sicuro) + var(--fondo-h) + 20px); }
@media (min-width:600px){ .app{ box-shadow:0 0 0 1px rgba(var(--sh),.06), 0 28px 72px rgba(var(--sh),.16); } }

.demo-strip{ display:flex; align-items:center; justify-content:center; gap:6px; min-height:24px; padding:2px 12px; background:var(--amber-light);
  color:var(--amber-scuro); font-size:12px; font-weight:600; }
.demo-strip .ui-ic{ width:14px; height:14px; }

/* ── Testata come portale.html: logo 64 px, sotto la fascia di Bill ─────────── */
.testa{ background:#fff; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px 10px 16px;
  position:relative; z-index:20; }
.testa::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:4px; background:var(--fascia); pointer-events:none; }
.testa .logo{ height:64px; width:auto; display:block; flex:none; }
.testa .dx{ display:flex; align-items:center; gap:8px; min-width:0; }
.testa .nome-app{ font-size:13px; font-weight:700; color:var(--canale-scuro); white-space:nowrap; }
.avatar-btn{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; flex:none; }
@media (max-width:359.98px){ .testa .nome-app{ display:none; } }

/* Testata compatta della richiesta: indietro · chi · ⋯ (niente logo) */
.testa.compatta{ position:sticky; top:0; z-index:30; justify-content:flex-start; gap:4px; padding:6px 4px; }
.ico44{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:var(--canale-scuro); flex:none; }
.ico44:hover{ background:var(--light); }
.ico44 .ui-ic{ width:22px; height:22px; }
.chi{ flex:1; min-width:0; }
.chi-r1{ display:flex; align-items:center; gap:8px; min-width:0; }
.chi h1{ font-size:17px; font-weight:600; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.chi-r1 .stato{ flex:none; }
.chi p{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--gray); white-space:nowrap; overflow:hidden; min-width:0; }
.chi p span:last-child{ overflow:hidden; text-overflow:ellipsis; }
.chi .n{ font-family:var(--mono); font-weight:600; color:var(--canale-scuro); flex:none; }

/* Riga d'errore di rete sotto la testata (§4.12) */
.rete{ display:flex; align-items:center; gap:8px; padding:8px 16px; background:var(--amber-light); color:var(--amber-scuro); font-size:13px; font-weight:600; }
.rete .ui-ic{ width:16px; height:16px; }

.corpo{ padding:16px; display:flex; flex-direction:column; gap:12px; }
.corpo:focus{ outline:none; }

/* ── Chip di stato: forma + parola (§2.3, §4.2) ─────────────────────────── */
.chip{ display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px; border-radius:var(--r-chip); font-size:12px; font-weight:600;
  white-space:nowrap; background:var(--pearl); color:var(--slate-scuro); flex:none; }
.chip .segno{ width:8px; height:8px; flex:none; border-radius:50%; border:1.5px solid var(--bordo-campo); }
.chip.risolta{ background:var(--green-light); color:var(--green-testo); }
.chip.risolta .segno{ border:0; border-radius:0; width:10px; height:10px; background:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  background-color:currentColor; }
.chip.urg{ background:var(--red-light); color:var(--red-scuro); }
.chip.urg .segno{ background:var(--red); border:0; }
.chip.tel{ background:var(--canale-chiaro); color:var(--canale-scuro); }
.chip.tel .ui-ic{ width:14px; height:14px; }
.stato{ display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 8px; border-radius:var(--r-chip); font-size:12px; font-weight:600;
  background:var(--canale-chiaro); color:var(--canale-scuro); white-space:nowrap; }
.stato::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--canale); flex:none; }
.stato.attesa{ background:var(--pearl); color:var(--slate-scuro); }
.stato.attesa::before{ background:none; box-shadow:inset 0 0 0 1.5px var(--bordo-campo); }
.stato.cliente{ background:var(--violet-light); color:var(--violet-scuro); }
.stato.cliente::before{ background:none; border-radius:2px; box-shadow:inset 0 0 0 1.5px currentColor; }
.stato.risolta{ background:var(--green-light); color:var(--green-testo); }
.stato.risolta::before{ background:var(--green-scuro); }
.stato.chiusa{ background:var(--pearl); color:var(--slate-scuro); }
.stato.chiusa::before{ background:var(--bordo-campo); }

/* ── Inizio ─────────────────────────────────────────────────────────────── */
.saluto{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:2px 2px 0; min-height:32px; }
.saluto h1{ font-size:22px; font-weight:600; letter-spacing:-.02em; line-height:1.2; min-width:0; }
.servizio{ display:inline-flex; align-items:center; gap:7px; height:28px; padding:0 11px; border-radius:var(--r-chip); background:var(--green-light);
  color:var(--green-testo); font-size:13px; font-weight:600; white-space:nowrap; flex:none; }
.servizio::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--green-scuro); }
.servizio.chiuso{ background:var(--pearl); color:var(--slate-scuro); }
.servizio.chiuso::before{ background:none; box-shadow:inset 0 0 0 1.5px var(--bordo-campo); }

/* L2: il pulsante grande, l'unico pieno della schermata */
.grande{ display:flex; align-items:center; gap:14px; width:100%; min-height:92px; padding:14px 12px 14px 18px; border-radius:var(--r-l2);
  background:var(--canale); color:#fff; text-align:left;
  box-shadow:0 1px 2px rgba(var(--sh),.2), 0 8px 20px rgba(31,79,163,.24); transition:transform .12s ease-out, background-color .15s ease-out; }
.grande:active{ transform:scale(.99); }
.grande[disabled]{ opacity:.6; }
.grande > .ui-ic:first-child{ width:28px; height:28px; }
.grande > .ui-ic:last-child{ opacity:.85; }
.grande .t{ flex:1; min-width:0; }
.grande b{ display:block; font-size:17px; font-weight:600; letter-spacing:-.01em; line-height:1.25; }
.grande .chi-g{ display:flex; align-items:center; gap:8px; margin-top:6px; font-size:14px; color:#E8EEF9; flex-wrap:wrap; }
.grande .urg{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px; border-radius:var(--r-chip); background:#fff; color:var(--red-scuro);
  font-size:13px; font-weight:600; }
.grande .urg::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--red); }
.past{ font-family:var(--mono); font-size:13.5px; font-weight:600; background:var(--canale-scuro); color:#fff; border-radius:8px; padding:3px 8px; white-space:nowrap; }
/* coda vuota: niente da prendere, niente pieno */
.grande.vuota{ background:#fff; color:var(--ink); box-shadow:var(--e2); cursor:default; }
.grande.vuota > .ui-ic:first-child{ color:var(--canale); }
.grande.vuota .chi-g{ color:var(--gray); }

/* Tre tessere, ognuna si tocca */
.tessere{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.tessera{ background:#fff; border-radius:var(--r-carta); box-shadow:var(--e1); padding:12px 10px 12px 14px; min-height:96px; display:flex; flex-direction:column;
  justify-content:space-between; text-align:left; min-width:0; }
.tessera .v{ font-family:var(--mono); font-size:34px; font-weight:600; line-height:1; }
.tessera .e{ font-size:14px; font-weight:600; color:var(--mid); line-height:1.25; }
.tessera .x{ font-family:var(--mono); font-size:13px; font-weight:600; white-space:nowrap; }
.tessera.tocca{ background:var(--amber-light); box-shadow:inset 0 0 0 1.5px #F2B871; }
/* Max Bill: ogni tessera ha la sua banda di colore pieno, nel colore del suo significato. */
.tessera{ position:relative; overflow:hidden; padding-top:16px; }
.tessera::before{ content:""; position:absolute; left:0; right:0; top:0; height:5px; background:var(--k, transparent); }
.tessera.k-coda{ --k:var(--canale); } .tessera.k-lav{ --k:var(--turchese); } .tessera.tocca, .tessera.k-tocca{ --k:var(--amber); }
.tessera.tocca .v, .tessera.tocca .e, .tessera.tocca .x{ color:var(--amber-scuro); }
.tessera .riga-v{ display:flex; align-items:baseline; justify-content:space-between; gap:4px; min-width:0; }
@media (max-width:374.98px){ .tessera{ padding-left:12px; } .tessera .x{ font-size:12px; } }

.sez{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gray); margin:6px 2px -4px; min-height:32px; }
.sez .conta{ font-family:var(--mono); letter-spacing:0; }
.sez .link-sez{ text-transform:none; letter-spacing:0; font-size:14px; color:var(--canale-scuro); min-height:44px; display:inline-flex; align-items:center;
  padding:0 2px 0 10px; margin:-6px 0; }
.info{ font-size:14px; color:var(--mid); padding:0 2px; }
.info b{ font-weight:600; color:var(--ink); }

/* ── Righe (Inizio, Coda, Mie): bordo-segnale a sinistra, almeno 64 px ───── */
.riga{ --edge:transparent; display:flex; align-items:center; gap:12px; background:#fff; border-radius:var(--r-carta);
  box-shadow:var(--e1), inset 4px 0 0 var(--edge); padding:8px 10px 8px 16px; min-height:64px; width:100%; text-align:left; }
.riga.alta{ min-height:72px; }
.riga.e-amber{ --edge:var(--amber); }
.riga.e-canale{ --edge:var(--canale); }
.riga.e-attesa{ --edge:var(--bordo-campo); }
.riga .corpo-r{ flex:1; min-width:0; align-self:stretch; display:flex; flex-direction:column; justify-content:center; min-height:48px; }
.riga .t1{ font-size:16px; font-weight:600; display:flex; gap:8px; align-items:baseline; white-space:nowrap; overflow:hidden; min-width:0; }
.riga .t1 .nome{ overflow:hidden; text-overflow:ellipsis; min-width:0; }
.riga .t1 .n{ font-family:var(--mono); font-size:15px; font-weight:600; color:var(--canale-scuro); flex:none; }
.riga .t2{ font-size:14px; color:var(--gray); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:6px; min-width:0; }
.riga .t2 > span{ overflow:hidden; text-overflow:ellipsis; min-width:0; }
.riga .t2 > .chip{ flex:none; }
.riga .t2 b{ color:var(--amber-scuro); font-weight:600; }
.riga .t2 b.forte{ background:var(--amber-scuro); color:#fff; border-radius:var(--r-chip); padding:0 7px; }
.riga .dx-ic{ color:var(--gray); display:grid; place-items:center; width:28px; flex:none; }
.riga .freccia{ color:var(--bordo-campo); flex:none; }
.pos{ width:36px; height:36px; border-radius:10px; background:var(--pearl); color:var(--slate-scuro); font-family:var(--mono); font-size:14px;
  font-weight:600; display:grid; place-items:center; flex:none; }
.pos.urg{ background:var(--red-light); color:var(--red-scuro); }
.tondo{ width:52px; height:52px; border-radius:50%; background:var(--canale-chiaro); color:var(--canale-scuro); display:grid; place-items:center; flex:none;
  box-shadow:inset 0 0 0 1px #BCCBEA; }
.tondo .ui-ic{ width:22px; height:22px; }
.tondo:active{ background:#D5E1F5; }
.lista{ display:flex; flex-direction:column; gap:8px; }

/* §39: i tre flussi, come nella console: Assistenza CAD blu (in diretta), Riconoscimenti
   turchese e Assistenza commerciale viola (per messaggio). Il segno del flusso e' il
   quadratino pieno con l'icona bianca. */
.fl-cad{ --fl:var(--canale); --fl-chiaro:var(--canale-chiaro); --fl-scuro:var(--canale-scuro); }
.fl-ric{ --fl:var(--turchese); --fl-chiaro:var(--turchese-light); --fl-scuro:var(--turchese-scuro); }
.fl-com{ --fl:var(--violet); --fl-chiaro:var(--violet-light); --fl-scuro:var(--violet-scuro); }
.fl-ic{ display:inline-grid; place-items:center; width:20px; height:20px; border-radius:6px; flex:none; align-self:center;
  background:var(--fl, var(--slate-scuro)); color:#fff; }
.fl-ic .ui-ic{ width:13px; height:13px; }
.fl-ic.fl-grande{ width:40px; height:40px; border-radius:11px; }
.fl-ic.fl-grande .ui-ic{ width:22px; height:22px; }
/* Inizio: una riga per flusso, il bordo-segnale nel suo colore. */
.riga.fl-riga{ --edge:var(--fl); }
.riga.fl-riga .t1 .nome{ color:var(--fl-scuro); }
.riga .t2 .n-fl{ font-family:var(--mono); font-weight:600; color:var(--ink); }
/* Coda: la testa di ogni flusso. */
.fl-testa{ display:flex; align-items:center; gap:10px; margin:12px 0 -2px; padding:12px 12px 10px; border-radius:var(--r-carta);
  background:var(--fl-chiaro); color:var(--fl-scuro); box-shadow:inset 0 4px 0 var(--fl); }
.fl-testa:first-child{ margin-top:0; }
.fl-testa .fl-ic{ width:28px; height:28px; border-radius:8px; }
.fl-testa .fl-ic .ui-ic{ width:16px; height:16px; }
.fl-testa b{ font-size:16px; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fl-testa .come{ font-size:13px; font-weight:500; color:var(--mid); white-space:nowrap; }
.fl-testa .conta{ margin-left:auto; font-family:var(--mono); font-size:15px; font-weight:600; }
.riga .t1 .fl-ic{ width:18px; height:18px; border-radius:5px; }
.riga .t1 .fl-ic .ui-ic{ width:12px; height:12px; }

/* La chiamata in corso fuori dalla sua richiesta: carta scura col tempo */
.scura{ display:flex; align-items:center; gap:12px; width:100%; min-height:64px; padding:10px 12px 10px 16px; border-radius:var(--r-l3); background:var(--notte);
  color:#fff; box-shadow:var(--e3); text-align:left; }
.scura .sc-t{ flex:1; min-width:0; display:flex; flex-direction:column; }
.scura .sc-t b{ font-size:15px; font-weight:600; }
.scura .sc-t span{ font-size:13px; color:var(--notte-testo); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.scura .bc-tempo{ font-size:22px; }
.scura .ui-ic{ color:var(--notte-testo); }

/* §37b, in cima alla richiesta che nessuno segue: «Nessuno la segue · in attesa da 6 min» e
   «Prendo io» pieno a tutta larghezza (l'unico pieno della vista: «Chiama» resta bianco) */
.prendo{ display:flex; flex-direction:column; gap:10px; background:#fff; border-radius:var(--r-carta);
  box-shadow:var(--e1), inset 4px 0 0 var(--amber); padding:12px 12px 12px 16px; }
.prendo-t{ font-size:15px; color:var(--mid); overflow-wrap:anywhere; }
.prendo-t b{ color:var(--ink); font-weight:600; }

/* «Gabriele ti ha chiamato: «puoi guardare lo STL?»» con «Rispondi con una nota» (§37b) */
.richiamo{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px 10px; background:var(--nota-fondo); color:var(--nota-testo);
  box-shadow:inset 0 0 0 1px var(--nota-anello); border-radius:var(--r-carta); padding:12px; }
.richiamo > .ui-ic{ width:18px; height:18px; margin-top:1px; }
.richiamo p{ flex:1; min-width:0; font-size:14px; overflow-wrap:anywhere; }
.richiamo p b{ font-weight:600; }
.richiamo .btn{ width:100%; min-height:44px; }

/* ── Richiesta: tre azioni grandi ───────────────────────────────────────── */
.azioni{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.az{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:72px; border-radius:var(--r-carta); background:#fff;
  box-shadow:var(--e1); font-size:15px; font-weight:600; text-align:center; padding:6px; transition:background-color .15s ease-out; }
.az .ui-ic{ width:24px; height:24px; color:var(--canale); }
.az.wa .ui-ic{ color:var(--green-scuro); }
.az.pieno{ background:var(--canale); color:#fff; box-shadow:0 1px 2px rgba(var(--sh),.2), 0 6px 14px rgba(31,79,163,.22); }
.az.pieno .ui-ic{ color:#fff; }
.az.in-chiamata{ background:var(--canale-chiaro); color:var(--canale-scuro); box-shadow:inset 0 0 0 1.5px var(--canale); }
.az .ic-riga{ display:flex; align-items:center; gap:6px; }
.az .vivo{ width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(46,138,63,.2); }
.az[aria-disabled="true"]{ opacity:.5; }
.az:active{ transform:scale(.99); }

/* «La richiesta»: due righe e le miniature; «Tutto» apre il resto */
.carta{ background:#fff; border-radius:var(--r-carta); box-shadow:var(--e1); padding:14px 16px; }
.lr-testa{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--gray); min-height:20px; }
.lr-testa .ui-ic{ width:16px; height:16px; }
.lr-testa .tutto{ margin-left:auto; display:inline-flex; align-items:center; gap:2px; min-height:44px; margin-top:-12px; margin-bottom:-12px;
  padding:0 2px 0 10px; font-size:14px; color:var(--canale-scuro); }
.lr-testa .tutto .ui-ic{ width:16px; height:16px; transition:transform .15s ease-out; }
.lr-testa .tutto[aria-expanded="true"] .ui-ic{ transform:rotate(90deg); }
.lr-tit{ font-size:16px; font-weight:600; margin-top:4px; overflow-wrap:anywhere; }
.lr-txt{ font-size:15px; color:var(--mid); margin-top:2px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  white-space:pre-line; overflow-wrap:anywhere; }
.carta.aperta .lr-txt{ display:block; -webkit-line-clamp:unset; }
.lr-campi{ display:grid; grid-template-columns:auto 1fr; gap:6px 12px; margin-top:12px; padding:12px; background:var(--pearl); border-radius:var(--r-pozzetto);
  font-size:14px; }
.lr-campi dt{ color:var(--gray); font-weight:600; }
.lr-campi dd{ margin:0; color:var(--ink); overflow-wrap:anywhere; }
.lr-campi a{ color:var(--canale-scuro); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
/* Il numero apre il foglio «Chiamo…?» (§26a.1): bersaglio da 44 px senza allargare la riga. */
.lr-campi .lr-tel{ display:inline-flex; align-items:center; min-height:44px; margin:-12px 0; font-weight:600; color:var(--canale-scuro);
  text-decoration:underline; text-underline-offset:2px; text-align:left; }
.mini{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.th{ width:60px; height:60px; border-radius:12px; overflow:hidden; box-shadow:0 0 0 1px rgba(var(--sh),.08); display:grid; place-items:center; flex:none;
  background:var(--pearl); color:var(--slate-scuro); position:relative; }
.th img{ width:100%; height:100%; object-fit:cover; display:block; }
.th svg.demo-img{ width:100%; height:100%; display:block; }
.th.piu{ font-family:var(--mono); font-size:15px; font-weight:600; color:var(--mid); }
.th .tipo{ font-size:12px; font-weight:700; color:var(--mid); text-transform:uppercase; }
.th.sk{ animation:skPulse 1.2s ease-in-out infinite; }

/* ── Messaggi ───────────────────────────────────────────────────────────── */
.msgs{ display:flex; flex-direction:column; gap:8px; }
.prec{ align-self:center; min-height:44px; padding:0 14px; font-size:14px; font-weight:600; color:var(--canale-scuro); }
.sis{ align-self:center; text-align:center; font-size:13px; color:var(--mid); background:rgba(255,255,255,.7); border-radius:var(--r-chip); padding:4px 12px;
  max-width:92%; overflow-wrap:anywhere; }
.sis time{ font-family:var(--mono); font-size:12px; color:var(--gray); margin-left:4px; white-space:nowrap; }
.msg{ max-width:84%; border-radius:16px; padding:9px 14px; font-size:15px; line-height:1.45; overflow-wrap:anywhere; }
.msg .testo{ white-space:pre-wrap; }
.msg time, .msg .meta{ display:block; font-family:var(--mono); font-size:12px; margin-top:2px; }
.msg .meta .chi-m{ font-family:var(--font); font-weight:600; }
.msg.cliente{ align-self:flex-start; background:#fff; box-shadow:var(--e1); border-top-left-radius:5px; }
.msg.cliente .meta{ color:var(--gray); }
.msg.noi{ align-self:flex-end; background:var(--canale); color:#fff; border-top-right-radius:5px; }
.msg.noi .meta{ color:#E8EEF9; text-align:right; }
.msg.noi a{ color:#fff; }
.nota{ align-self:stretch; background:var(--nota-fondo); box-shadow:inset 0 0 0 1px var(--nota-anello); color:var(--nota-testo); border-radius:12px; padding:9px 12px;
  font-size:14px; overflow-wrap:anywhere; }
.nota .meta{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; margin-bottom:2px; }
.nota .meta .ui-ic{ width:14px; height:14px; }
.nota .testo{ white-space:pre-wrap; }
.msg-file{ display:flex; align-items:center; gap:10px; min-height:44px; margin-top:6px; padding:6px 10px; border-radius:10px; background:rgba(255,255,255,.14);
  font-size:14px; font-weight:600; text-align:left; width:100%; }
.msg.cliente .msg-file, .nota .msg-file{ background:var(--pearl); }
.msg-file .ui-ic{ width:18px; height:18px; }
.msg-file .nome-f{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msg-file .dim{ font-family:var(--mono); font-size:12px; font-weight:500; opacity:.85; }
.msg-imgs{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.msg-imgs .th{ width:120px; height:120px; }
.msg-link{ display:flex; align-items:center; justify-content:center; gap:6px; min-height:44px; margin-top:6px; padding:0 12px; border-radius:10px;
  background:rgba(255,255,255,.16); font-weight:600; font-size:14px; }
.msg.cliente .msg-link{ background:var(--canale-chiaro); color:var(--canale-scuro); }
.msg-link .ui-ic{ width:16px; height:16px; }
.scaduto{ font-size:13px; opacity:.85; font-style:italic; }

/* ── Fondo fisso: o il compositore o la barra della chiamata ────────────── */
/* §37h: le linguette «Al cliente | Nota» sopra la casella; la nota ha il colore delle note */
.modi{ display:flex; gap:4px; width:max-content; max-width:100%; margin:0 0 6px 4px; padding:3px; background:#fff; border-radius:var(--r-chip);
  box-shadow:var(--e1), 0 4px 14px rgba(var(--sh),.08); }
.modo{ position:relative; display:inline-flex; align-items:center; gap:6px; min-height:38px; padding:0 14px; border-radius:var(--r-chip);
  font-size:14px; font-weight:600; color:var(--mid); white-space:nowrap; }
.modo::after{ content:""; position:absolute; left:0; right:0; top:-3px; bottom:-3px; }   /* bersaglio da 44 px */
.modo .ui-ic{ width:16px; height:16px; }
.modo[aria-selected="true"]{ background:var(--canale-chiaro); color:var(--canale-scuro); }
.modo.m-nota[aria-selected="true"]{ background:var(--nota-fondo); color:var(--nota-testo); box-shadow:inset 0 0 0 1px var(--nota-anello); }
.modo[aria-disabled="true"]{ opacity:.45; }
.fondo{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(var(--barra-h) + var(--sicuro)); z-index:35; width:100%; max-width:430px;
  padding:8px 10px; }
body.tastiera .fondo{ bottom:var(--kb); }
body.tastiera .barra{ display:none; }
.composer{ display:flex; align-items:flex-end; gap:4px; background:#fff; border-radius:26px; box-shadow:var(--e1), 0 4px 14px rgba(var(--sh),.08); padding:4px 4px 4px 6px; }
.composer .ico44{ color:var(--mid); border-radius:50%; }
.composer .campo{ flex:1; min-width:0; font-size:16px; line-height:1.35; color:var(--ink); padding:12px 6px; border:0; background:none; resize:none; min-height:48px;
  max-height:132px; outline:none; }
.composer .campo::placeholder{ color:var(--gray); }
.composer:focus-within{ box-shadow:var(--e1), 0 0 0 3px rgba(31,79,163,.25); }
.composer.interno{ background:var(--nota-fondo); box-shadow:inset 0 0 0 1px var(--nota-anello), 0 4px 14px rgba(var(--sh),.08); }
.composer.interno:focus-within{ box-shadow:inset 0 0 0 1px var(--nota-anello), 0 0 0 3px rgba(243,210,122,.6); }
.composer.interno .campo::placeholder{ color:var(--nota-testo); }
.composer.interno .invia{ background:var(--nota-testo); }
.invia{ width:48px; height:48px; border-radius:50%; background:var(--canale); color:#fff; display:grid; place-items:center; flex:none; opacity:.45;
  transition:opacity .15s ease-out; }
.invia.pronto{ opacity:1; }
.invia .ui-ic{ width:22px; height:22px; }
.sopra{ display:flex; flex-direction:column; gap:8px; margin-bottom:6px; padding:8px; background:#fff; border-radius:16px;
  box-shadow:var(--e1), 0 4px 14px rgba(var(--sh),.08); }
.allegati{ display:flex; gap:8px; overflow-x:auto; padding:2px 2px 4px; }
.allegato{ position:relative; width:56px; height:56px; border-radius:12px; overflow:hidden; background:#fff; box-shadow:var(--e1); flex:none; display:grid; place-items:center; }
.allegato img{ width:100%; height:100%; object-fit:cover; }
.allegato .togli{ position:absolute; top:0; right:0; width:24px; height:24px; display:grid; place-items:center; background:rgba(20,32,46,.7); color:#fff;
  border-bottom-left-radius:10px; }
.allegato .togli .ui-ic{ width:14px; height:14px; }
.allegato .barra-car{ position:absolute; left:0; bottom:0; height:4px; background:var(--canale); width:0; transition:width .12s linear; }
.allegato.errore{ box-shadow:inset 0 0 0 2px var(--red-scuro); }
.link-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.link-chip{ display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 12px; border-radius:var(--r-chip); background:var(--canale-chiaro);
  box-shadow:inset 0 0 0 1px #BCCBEA; font-size:14px; font-weight:600; color:var(--canale-scuro); max-width:100%; }
.link-chip span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.link-chip .ui-ic{ width:16px; height:16px; }
.link-chip .ui-ic.x{ color:var(--gray); }
.mancanti{ background:var(--amber-light); color:var(--amber-scuro); font-size:13px; font-weight:600; border-radius:10px; padding:6px 10px; }
.mancanti .mono{ font-weight:600; }
/* «Prendo e invio» detto in parole (§37b): il pulsante d'invio è solo un'icona */
.prende{ display:flex; align-items:center; gap:6px; background:var(--canale-chiaro); color:var(--canale-scuro); font-size:13px; font-weight:600;
  border-radius:10px; padding:6px 10px; }
.prende .ui-ic{ width:16px; height:16px; }

/* Barra della chiamata (L3): prende il posto del compositore */
.barra-chiamata{ background:var(--notte); color:#fff; border-radius:var(--r-l3); box-shadow:var(--e3); padding:8px 10px 10px; }
.bc-r1{ display:flex; align-items:center; gap:10px; padding:0 2px 0 8px; min-height:44px; }
.bc-vivo{ width:10px; height:10px; border-radius:50%; background:#4ADE80; box-shadow:0 0 0 4px rgba(74,222,128,.2); flex:none; }
.bc-r1 .eti{ font-size:14px; color:var(--notte-testo); white-space:nowrap; }
.bc-tempo{ font-family:var(--mono); font-size:26px; font-weight:600; letter-spacing:.02em; font-variant-numeric:tabular-nums; }
.bc-r1 .dx{ margin-left:auto; display:flex; align-items:center; }
.bc-r1 .ico44{ color:var(--notte-testo); }
.bc-r1 .ico44:hover{ background:var(--notte-2); }
.bc-r1 .ico44[aria-pressed="true"]{ background:var(--notte-2); color:#fff; }
.bc-nota{ margin:4px 0 2px; }
.bc-nota textarea{ width:100%; min-height:48px; max-height:110px; resize:none; border:0; border-radius:10px; background:var(--notte-campo); color:#fff; font-size:16px;
  padding:12px; line-height:1.35; }
.bc-nota textarea::placeholder{ color:var(--notte-testo); }
.bc-nota textarea:focus{ outline:2px solid #4ADE80; outline-offset:0; }
.bc-esiti{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:4px; }
.bc-esiti button{ height:52px; padding:0 8px; border-radius:var(--r-btn); font-size:14.5px; font-weight:600; display:flex; align-items:center; justify-content:center;
  gap:6px; color:#fff; background:var(--notte-2); white-space:nowrap; }
.bc-esiti .fatta{ background:var(--green-scuro); }
/* §26a.2: «Ha risposto?» con Occupato e Annulla piccoli accanto, sotto Sì · No grandi;
   col sì il solo «Ho chiuso la telefonata» */
.bc-domanda{ display:flex; align-items:center; gap:2px; min-height:44px; margin:2px 0 0 8px; }
.bc-dom{ flex:1; min-width:0; font-size:15px; font-weight:600; color:#fff; }
.bc-piccolo{ min-height:44px; padding:0 10px; border-radius:var(--r-btn); font-size:14px; font-weight:600; color:var(--notte-testo); white-space:nowrap; }
.bc-piccolo:active{ background:var(--notte-2); }
.bc-esiti.uno{ grid-template-columns:1fr; }
.bc-esiti .ui-ic{ width:18px; height:18px; }
.bc-esiti button:disabled{ opacity:.6; }
@media (max-width:374.98px){ .bc-esiti{ gap:6px; } .bc-esiti button{ font-size:13.5px; padding:0 4px; gap:4px; }
  .bc-esiti .ui-ic{ width:16px; height:16px; } .bc-r1{ gap:8px; } .bc-piccolo{ padding:0 8px; } }

/* ── Barra in basso: Inizio · Coda · Mie · Per te (sempre presente) ─────── */
.barra{ position:fixed; left:50%; transform:translateX(-50%); bottom:0; z-index:40; width:100%; max-width:430px; height:calc(var(--barra-h) + var(--sicuro));
  display:flex; background:#fff; box-shadow:0 -1px 0 var(--border), 0 -2px 14px rgba(var(--sh),.08); padding-bottom:var(--sicuro); }
.bvoce{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-size:12px; font-weight:600; color:var(--gray);
  position:relative; min-height:44px; }
.bvoce .ic-wrap{ width:58px; height:30px; border-radius:var(--r-chip); display:grid; place-items:center; transition:background-color .15s ease-out; }
.bvoce .ui-ic{ width:21px; height:21px; }
.bvoce[aria-current="page"]{ color:var(--canale-scuro); }
.bvoce[aria-current="page"] .ic-wrap{ background:var(--canale-chiaro); }
.bvoce .pall{ position:absolute; top:6px; left:calc(50% + 8px); min-width:18px; height:18px; border-radius:9px; font-size:11px; font-weight:700;
  display:grid; place-items:center; padding:0 5px; box-shadow:0 0 0 2px #fff; background:var(--slate-scuro); color:#fff; font-family:var(--font); }
.bvoce .pall.rosso{ background:var(--red-scuro); }
.bvoce .pall.punto{ min-width:10px; width:10px; height:10px; padding:0; top:8px; left:calc(50% + 12px); background:var(--amber); border-radius:2px; }

/* ── Foglio dal basso (L3) col velo: «⋯», risposte pronte, colleghi, avatar ─ */
.velo{ position:fixed; inset:0; z-index:60; background:rgba(15,25,35,.45); opacity:0; transition:opacity .15s ease-out; }
.velo.su{ opacity:1; }
.foglio{ position:fixed; left:50%; bottom:0; z-index:70; width:100%; max-width:430px; max-height:88vh; max-height:88dvh; display:flex; flex-direction:column;
  background:#fff; border-radius:var(--r-foglio) var(--r-foglio) 0 0; box-shadow:0 -8px 28px rgba(var(--sh),.18);
  padding:8px 0 calc(8px + var(--sicuro)); transform:translate(-50%, 16px); opacity:0; transition:transform .18s ease-out, opacity .15s ease-out; }
.foglio.su{ transform:translate(-50%, 0); opacity:1; }
.foglio:focus{ outline:none; }
/* Si scrive in un foglio: resta sopra la tastiera (su iPhone la pagina non si accorcia). */
body.tastiera-foglio .foglio{ bottom:var(--kb); max-height:calc(88vh - var(--kb)); max-height:calc(88dvh - var(--kb)); }
.maniglia{ width:40px; height:4px; border-radius:2px; background:var(--border); margin:2px auto 10px; flex:none; }
.foglio .f-tit{ font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--gray); padding:0 20px 8px; flex:none; }
/* La domanda è il titolo (Chiamo…?, Prima chiudi…, Fine della telefonata) */
.foglio .f-tit.tit-grande{ font-size:18px; letter-spacing:-.01em; text-transform:none; color:var(--ink); line-height:1.3; padding:0 20px 10px; }
.foglio .f-corpo{ overflow-y:auto; overscroll-behavior:contain; flex:1; min-height:0; }
.voce{ display:flex; align-items:center; gap:14px; width:100%; min-height:54px; padding:0 20px; font-size:16px; font-weight:500; text-align:left;
  box-shadow:inset 0 1px 0 var(--hairline); }
.voce > .ui-ic{ color:var(--canale); }
.voce.prima{ font-weight:600; color:var(--canale-scuro); }
.voce:active{ background:var(--light); }
.voce .dx-v{ margin-left:auto; font-size:14px; font-weight:600; color:var(--gray); display:flex; align-items:center; gap:6px; }
.voce .dx-v.ok{ color:var(--green-testo); }
.voce .dx-v.az{ color:var(--canale-scuro); }
.voce .eti-v{ flex:1; min-width:0; display:flex; flex-direction:column; }
.voce .eti-v small{ font-size:13px; color:var(--gray); font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* occupato: al telefono (una chiamata in corso, dal PC o dal telefono) */
.voce .eti-v small.occ{ color:var(--canale-scuro); font-weight:600; }
.voce[aria-checked="true"]{ background:var(--canale-chiaro); }
.voce:disabled{ opacity:.55; }   /* «la segue già» (§37b) */
.chiudi{ display:flex; align-items:center; justify-content:center; width:100%; min-height:54px; font-size:16px; font-weight:600; color:var(--mid);
  box-shadow:inset 0 1px 0 var(--hairline); flex:none; }
.f-riga{ padding:8px 20px 12px; font-size:14px; color:var(--gray); box-shadow:inset 0 1px 0 var(--hairline); }
.f-chi{ display:flex; align-items:center; gap:12px; padding:4px 20px 14px; }
.f-chi-t{ display:flex; flex-direction:column; min-width:0; }
.f-chi-t b{ font-size:17px; font-weight:600; }
.f-chi-s{ font-size:14px; color:var(--gray); }
.f-cerca{ padding:0 16px 10px; flex:none; }
.f-cerca input, .f-campo textarea{ width:100%; height:48px; border:1px solid var(--bordo-campo); border-radius:12px; padding:0 14px; font-size:16px; background:#fff; }
.f-campo{ padding:10px 16px 6px; }
.f-campo label{ display:block; font-size:13px; font-weight:600; color:var(--mid); margin-bottom:6px; }
.f-campo textarea{ height:auto; min-height:72px; padding:12px 14px; resize:vertical; }
.f-cerca input:focus, .f-campo textarea:focus{ outline:none; border-color:var(--canale); box-shadow:0 0 0 3px rgba(31,79,163,.25); }
.f-schede{ display:flex; gap:6px; padding:0 16px 10px; flex:none; }
.f-schede button{ flex:1; min-height:44px; border-radius:var(--r-btn); font-size:15px; font-weight:600; color:var(--mid); background:var(--pearl); }
.f-schede button[aria-selected="true"]{ background:var(--canale-chiaro); color:var(--canale-scuro); box-shadow:inset 0 0 0 1px #BCCBEA; }
.f-azioni{ display:flex; gap:10px; padding:10px 16px 4px; flex:none; }
.f-azioni:last-child{ padding-bottom:12px; }   /* niente «Chiudi» sotto: il foglio ha il suo «No» */
.f-azioni .btn:not(.largo){ flex:none; }
/* §26a, §26b: la conferma della chiamata, la fine della telefonata, il rapporto */
.f-chiama{ display:flex; flex-direction:column; gap:2px; padding:2px 20px 12px; }
.f-chiama .mono{ font-size:24px; font-weight:600; color:var(--ink); letter-spacing:.01em; }
.f-chiama span{ font-size:14px; color:var(--gray); }
.f-durata{ padding:4px 20px 12px; font-size:16px; line-height:1.45; }
.f-durata b{ font-weight:600; }
.f-campo input{ width:100%; height:48px; border:1px solid var(--bordo-campo); border-radius:12px; padding:0 14px; font-size:16px; background:#fff;
  font-family:var(--mono); }
.f-campo input:focus{ outline:none; border-color:var(--canale); box-shadow:0 0 0 3px rgba(31,79,163,.25); }
.f-aiuto{ margin-top:6px; font-size:13px; color:var(--gray); line-height:1.45; }
.f-riga.f-sopra{ box-shadow:none; padding-top:0; }
/* §37b: «La prendi in carico tu.» sotto il numero, nella conferma della chiamata */
.f-riga.f-prende{ box-shadow:none; padding-top:0; font-size:15px; font-weight:600; color:var(--canale-scuro); }
/* «Avvisi su questo telefono» (§37h): lo stato, e l'esito della «Prova» */
.f-stato{ padding:0 20px 10px; }
.f-stato .stato-avv{ font-size:15px; font-weight:600; color:var(--canale-scuro); }
.f-stato .stato-avv.ok{ color:var(--green-testo); }
.f-stato .stato-avv.no{ color:var(--gray); }
.f-riga.f-esito{ color:var(--ink); font-weight:600; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:52px; padding:0 16px; border-radius:var(--r-btn); font-size:15px;
  font-weight:600; background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1px var(--border); }
.btn.primario{ background:var(--canale); color:#fff; box-shadow:0 1px 2px rgba(22,58,120,.25); }
.btn.tenue{ background:var(--canale-chiaro); color:var(--canale-scuro); box-shadow:inset 0 0 0 1px #BCCBEA; }
.btn.largo{ width:100%; }
.btn[disabled]{ opacity:.45; }
.btn .ui-ic{ width:18px; height:18px; }

/* ── Per te: «Da fare» e «Già visti» (§37h) ─────────────────────────────── */
.avv{ display:flex; align-items:center; gap:8px; width:100%; background:#fff; border-radius:var(--r-carta); box-shadow:var(--e1); min-height:64px; }
.avv .avv-apri{ flex:1; min-width:0; align-self:stretch; display:flex; align-items:flex-start; gap:12px; padding:12px 12px 12px 14px; text-align:left;
  border-radius:var(--r-carta); }
.avv .avv-prendo{ flex:none; min-height:44px; padding:0 12px; margin-right:10px; }
.avv.visto .avv-t{ color:var(--mid); }
.avv .avv-m .conta{ color:var(--canale-scuro); font-weight:600; }
.avv .avv-ic{ width:36px; height:36px; border-radius:50%; background:var(--pearl); color:var(--slate-scuro); display:grid; place-items:center; flex:none; position:relative; }
.avv .avv-ic .ui-ic{ width:18px; height:18px; }
.avv.nuovo .avv-ic{ background:var(--canale-chiaro); color:var(--canale-scuro); }
.avv.nuovo .avv-ic::after{ content:""; position:absolute; top:-1px; right:-1px; width:10px; height:10px; border-radius:50%; background:var(--red); box-shadow:0 0 0 2px #fff; }
.avv .avv-c{ flex:1; min-width:0; }
.avv .avv-t{ font-size:15px; font-weight:500; display:block; }
.avv.nuovo .avv-t{ font-weight:600; }
.avv .avv-b{ font-size:14px; color:var(--mid); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:1px; }
.avv .avv-m{ font-size:13px; color:var(--gray); display:flex; gap:6px; margin-top:2px; white-space:nowrap; overflow:hidden; }
.avv .avv-m > span{ flex:none; }
.avv .avv-m > .ogg{ flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.piede{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.piede .riga-avvisi{ display:flex; align-items:center; gap:12px; width:100%; min-height:56px; background:#fff; border-radius:var(--r-carta); box-shadow:var(--e1);
  padding:6px 8px 6px 14px; text-align:left; font-size:15px; font-weight:600; }
.piede .riga-avvisi > .ui-ic{ color:var(--canale); }
.piede .riga-avvisi .stato-avv{ margin-left:auto; font-size:14px; font-weight:600; color:var(--canale-scuro); min-height:44px; display:flex; align-items:center;
  padding:0 8px; }
.piede .riga-avvisi .stato-avv.ok{ color:var(--green-testo); }
.piede .riga-avvisi .stato-avv.no{ color:var(--gray); }
.piede .pc{ font-size:14px; color:var(--mid); padding:2px 4px; display:flex; align-items:center; gap:8px; }
.piede .pc .ui-ic{ width:18px; height:18px; color:var(--slate-scuro); }

/* ── Vuoti (§4.10) e caricamenti (§4.11) ────────────────────────────────── */
.vuoto{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:28px 16px; background:#fff; border-radius:var(--r-carta);
  box-shadow:var(--e1); color:var(--mid); }
.vuoto .ui-ic{ width:32px; height:32px; color:var(--slate-scuro); }
.vuoto p{ font-size:15px; font-weight:600; color:var(--ink); }
.vuoto .btn{ margin-top:6px; }
.sk{ background:var(--pearl); border-radius:var(--r-carta); animation:skPulse 1.2s ease-in-out infinite; }
@keyframes skPulse{ 50%{ opacity:.45; } }

/* ── Accesso ─────────────────────────────────────────────────────────────── */
.accesso{ background:#fff; border-radius:var(--r-l2); box-shadow:var(--e2); padding:20px 16px; display:flex; flex-direction:column; gap:14px; }
.accesso h1{ font-size:22px; font-weight:600; letter-spacing:-.02em; }
.accesso .sotto{ font-size:14px; color:var(--mid); margin-top:-8px; }
.campo-l label{ display:block; font-size:13px; font-weight:600; color:var(--mid); margin-bottom:6px; }
.campo-l input{ width:100%; height:48px; border:1px solid var(--bordo-campo); border-radius:12px; padding:0 14px; font-size:16px; background:#fff; }
.campo-l input:focus{ outline:none; border-color:var(--canale); box-shadow:0 0 0 3px rgba(31,79,163,.25); }
.errore{ display:flex; align-items:flex-start; gap:8px; color:var(--red-scuro); font-size:14px; font-weight:600; }
.errore .ui-ic{ width:18px; height:18px; flex:none; margin-top:1px; }
.plancia{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:32px 16px; }
.plancia p{ font-size:15px; color:var(--mid); }
.rotella{ display:inline-block; width:16px; height:16px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent;
  animation:gira .8s linear infinite; vertical-align:-3px; }
@keyframes gira{ to{ transform:rotate(360deg); } }

/* ── Toast (§4.13): in basso al centro, sopra la barra e il fondo ────────── */
.toast{ position:fixed; left:50%; bottom:calc(var(--barra-h) + var(--sicuro) + var(--fondo-h) + 12px); z-index:90; transform:translate(-50%, 8px);
  width:max-content; max-width:min(398px, calc(100vw - 32px)); background:var(--notte); color:#fff; font-size:14px; font-weight:600; border-radius:12px;
  box-shadow:var(--e3); padding:12px 14px; display:flex; align-items:center; gap:12px; opacity:0; pointer-events:none;
  transition:opacity .15s ease-out, transform .15s ease-out; }
.toast.su{ opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
.toast.err{ background:#7F1D1D; }
/* «Annulla», «Non chiudere», «Spegni»: bersaglio da 44 px, bianco su notte-2 come la console */
.toast .toast-az{ min-height:44px; padding:0 12px; margin:-10px -8px -10px 0; border-radius:8px; background:var(--notte-2); color:#fff; font-weight:700;
  white-space:nowrap; }
body.tastiera .toast{ bottom:calc(var(--kb) + var(--fondo-h) + 12px); }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition:none !important; animation:none !important; }
}