/* =========================================================================
   GDM CHAT 2.0 — IL DESIGN SYSTEM
   Fase 01: tavolozza, carattere, spaziature, componenti di base.
   24/08/2026

   COME SI SPEGNE
   Tutto sta sotto `html.chat2`. Senza quella classe questo foglio non cambia
   NIENTE e la chat è quella di ieri: `style.css` non è stato toccato di una
   riga. Si accende con `?chat2=1`, si spegne con `?chat2=0` o con il tasto
   nel profilo, e la scelta resta su quel telefono.

   MA È UN PONTEGGIO, NON UN BALCONE.
   Sul CRM la doppia strada l'hai chiesta tu ed è definitiva. Qui no: tenere
   due aspetti per sempre vuol dire scrivere ogni cosa due volte. Quando la
   Chat 2.0 convince, `style.css` si aggiorna e questo file sparisce dentro
   di lui.

   PERCHÉ VINCE
   `html.chat2` è una classe più un tipo (0,1,1); le variabili di `style.css`
   stanno su `:root` (0,1,0). Quindi questo foglio vince per precisione, non
   perché arriva dopo — e resta vero anche se un giorno l'ordine dei fogli
   cambia.
   ========================================================================= */

/* =========================================================================
   1. I GETTONI — la tua tavolozza
   ========================================================================= */
html.chat2{
  /* marchio */
  --c2-blu:       #075a91;   /* blu GDM — bianco sopra fa 7,29:1 */
  --c2-blu-scuro: #064a78;   /* bianco sopra fa 9,30:1 */
  --c2-blu-chiaro:#eaf3fa;   /* fondi tenui, bolle, selezione */
  --c2-blu-bordo: #cfe3f2;

  /* superfici */
  --c2-fondo:   #f7f8fa;
  --c2-bianco:  #ffffff;
  --c2-fondo-2: #f1f3f6;   /* campi a riposo, righe alternate */
  --c2-bordo:   #e2e6e2;

  /* testo */
  --c2-testo:   #1d241d;   /* 15,88:1 su bianco */

  /* IL TESTO SECONDARIO È STATO SCURITO DI POCO, E VOLUTAMENTE.
     Il #7A827B che mi hai dato su fondo #F7F8FA fa **3,72:1**: sotto la
     soglia di leggibilità del testo normale (4,5:1). Non è una pignoleria
     da manuale — quel colore nella chat scrive le ANTEPRIME dei messaggi,
     gli orari e gli @nomeutente, cioè roba che si legge davvero, piccola,
     spesso al sole o su uno schermo sporco di polvere.
     #6B736C è lo stesso grigio-verde spostato di un soffio: 4,60:1 sul
     fondo e 4,89:1 sul bianco. A occhio non si distingue dall'originale;
     con la luce del magazzino sì. */
  --c2-testo-2: #6b736c;
  --c2-testo-3: #8b938c;   /* solo decorativo, mai per leggere */

  /* significati — verde, rosso e arancio SOLO quando vogliono dire qualcosa */
  --c2-ok:     #1f7a4d;   --c2-ok-bg:#e9f6ee;
  --c2-warn:   #9a5b04;   --c2-warn-bg:#fdf3e3;
  --c2-errore: #b3261e;   --c2-errore-bg:#fdecea;
  --c2-online: #22a06b;   /* il pallino verde: presenza */

  /* forma — iOS moderno: raggi generosi ma non pastiglie */
  --c2-r-xs: 8px;
  --c2-r-sm: 12px;
  --c2-r:    16px;
  --c2-r-lg: 24px;        /* finestre, come nel mockup */
  --c2-r-full: 999px;

  --c2-om-1: 0 1px 2px rgba(16,24,32,.05);
  --c2-om-2: 0 2px 8px rgba(16,24,32,.07);
  --c2-om-3: 0 8px 24px rgba(16,24,32,.10);
  --c2-om-4: 0 20px 48px rgba(16,24,32,.20);

  --c2-t: 180ms cubic-bezier(.32,.72,0,1);   /* la curva di iOS */

  --c2-font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text",
             "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---- le variabili di `style.css`, rilette ----
     Questo blocco è la leva: la chat è costruita su queste, quindi
     ridefinirle ricolora conversazioni, bolle, campi, finestre e barre
     tutte insieme, senza toccare un solo selettore. */
  --primary:      var(--c2-blu);
  --primary-dark: var(--c2-blu-scuro);
  --accent:       var(--c2-blu);
  --danger:       var(--c2-errore);
  --bg:           var(--c2-fondo);
  --panel:        var(--c2-bianco);
  --border:       var(--c2-bordo);
  --text:         var(--c2-testo);
  --muted:        var(--c2-testo-2);
  --mine:         var(--c2-blu);   /* le bolle diventano chiare alla fase 06,
                                      insieme al colore del testo dentro:
                                      cambiarle adesso le lascerebbe bianche
                                      su azzurro, cioè illeggibili */
  --radius:       var(--c2-r);
  --shadow-sm:    var(--c2-om-1);
  --shadow:       var(--c2-om-2);
  --shadow-lg:    var(--c2-om-4);
}

/* -------- TEMA SCURO --------
   Non è una seconda interfaccia: sono gli stessi gettoni con altri valori. */
html.chat2 body.dark{
  --c2-bianco:   #141a21;
  --c2-fondo:    #0b1015;
  --c2-fondo-2:  #1b232c;
  --c2-bordo:    #263039;
  --c2-testo:    #e8edf0;
  --c2-testo-2:  #97a3ad;
  --c2-testo-3:  #77838d;
  --c2-blu:      #5aaee0;
  --c2-blu-scuro:#8cc9ef;
  --c2-blu-chiaro:#152a3a;
  --c2-blu-bordo:#22415a;
  --c2-ok:#5fd39a;  --c2-ok-bg:#123024;
  --c2-warn:#e8b661; --c2-warn-bg:#302512;
  --c2-errore:#ff8a80; --c2-errore-bg:#331b19;

  --bg:     var(--c2-fondo);
  --panel:  var(--c2-bianco);
  --border: var(--c2-bordo);
  --text:   var(--c2-testo);
  --muted:  var(--c2-testo-2);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 2px 8px rgba(0,0,0,.45);
  --shadow-lg: 0 20px 48px rgba(0,0,0,.6);
}

/* =========================================================================
   2. IL CARATTERE
   Titoli 700 · nomi 600/700 · testo 400 · etichette 500/600 · orari 400/500,
   come chiesto. Inter lo carica `chat2.js` senza bloccare il disegno: se la
   rete non lo lascia passare resta San Francisco sull'iPhone, che è il
   carattere di sistema e va benissimo.
   ========================================================================= */
html.chat2 body,
html.chat2 input,
html.chat2 textarea,
html.chat2 button,
html.chat2 .msg,
html.chat2 .msg .txt,
html.chat2 .msg .sender,
html.chat2 .composer #msg-input{
  font-family: var(--c2-font) !important;
  -webkit-font-smoothing: antialiased;
}
html.chat2 body{
  color: var(--c2-testo);
  background: var(--c2-fondo);
  font-feature-settings: "cv05" 1;
}
html.chat2 h1, html.chat2 h2, html.chat2 .cp-head h2{
  font-weight: 700; letter-spacing: -.02em;
}
/* i nomi: 600 in elenco, 700 quando c'è da leggere per primi */
html.chat2 .conv-name .nm,
html.chat2 .urow-name,
html.chat2 .me-name,
html.chat2 .chat-head-text strong{ font-weight: 700; letter-spacing: -.012em; }
/* anteprime e @nomi: testo secondario, non decorazione */
html.chat2 .conv-preview,
html.chat2 .urow-sub{ color: var(--c2-testo-2); font-weight: 400; }
/* orari: numeri incolonnati, così le ore non ballano da riga a riga */
html.chat2 .conv-name .time,
html.chat2 .msg .time,
html.chat2 .ltime{
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--c2-testo-2);
}

/* =========================================================================
   3. I TRE LIVELLI DI BOTTONE
   Oggi ce n'erano sei nati in momenti diversi (.ghost .mini .icon-btn
   .btn-primary .btn-cancel .dbtn). Restano tutti a funzionare: cambia solo
   che adesso dicono tutti la stessa cosa nello stesso modo.
     pieno      = l'azione principale, una per schermata
     contornato = le altre
     spoglio    = le terziarie e le icone
   ========================================================================= */
html.chat2 .btn-primary,
html.chat2 .modal-actions .btn-primary{
  background: var(--c2-blu) !important;
  color: #fff !important;
  border: 1px solid var(--c2-blu) !important;
  border-radius: var(--c2-r-sm) !important;
  font-weight: 600 !important;
  box-shadow: var(--c2-om-1) !important;
  transition: background var(--c2-t), transform var(--c2-t) !important;
}
html.chat2 .btn-primary:hover{ background: var(--c2-blu-scuro) !important; }
html.chat2 .btn-primary:active{ transform: scale(.98); }
html.chat2 .btn-primary.danger-btn{
  background: var(--c2-errore) !important; border-color: var(--c2-errore) !important;
}

html.chat2 .ghost,
html.chat2 .mini,
html.chat2 .btn-cancel{
  background: var(--c2-bianco) !important;
  color: var(--c2-blu) !important;
  border: 1px solid var(--c2-bordo) !important;
  border-radius: var(--c2-r-sm) !important;
  font-weight: 600 !important;
  box-shadow: var(--c2-om-1) !important;
  transition: background var(--c2-t), border-color var(--c2-t), transform var(--c2-t) !important;
}
html.chat2 .ghost:hover,
html.chat2 .mini:hover,
html.chat2 .btn-cancel:hover{
  background: var(--c2-blu-chiaro) !important;
  border-color: var(--c2-blu-bordo) !important;
}
html.chat2 .ghost:active,
html.chat2 .mini:active{ transform: scale(.98); }
html.chat2 .btn-cancel{ color: var(--c2-testo) !important; background: var(--c2-fondo-2) !important; border-color: transparent !important; }
html.chat2 .mini.danger{ color: var(--c2-errore) !important; }

html.chat2 .icon-btn{
  border-radius: var(--c2-r-sm) !important;
  color: var(--c2-testo-2) !important;
  transition: background var(--c2-t), color var(--c2-t) !important;
}
html.chat2 .icon-btn:hover{ background: var(--c2-blu-chiaro) !important; color: var(--c2-blu) !important; }

/* IL FUOCO SI DEVE VEDERE — vale anche qui, non solo sul CRM.
   Campi e aree di testo esclusi: quelli il fuoco lo dicono già col bordo
   blu e l'alone, e il contorno in più faceva un doppio anello che sulla
   riga di scrittura si vedeva subito. */
html.chat2 :focus-visible{
  outline: 2px solid var(--c2-blu) !important;
  outline-offset: 2px !important;
}
html.chat2 input:focus-visible,
html.chat2 textarea:focus-visible,
html.chat2 .composer #msg-input:focus-visible{ outline: none !important; }

/* =========================================================================
   4. CAMPI
   ========================================================================= */
html.chat2 .search{
  background: var(--c2-fondo-2) !important;
  border: 1px solid transparent !important;
  border-radius: var(--c2-r-full) !important;
  box-shadow: none !important;
  transition: background var(--c2-t), border-color var(--c2-t), box-shadow var(--c2-t) !important;
}
html.chat2 .search:focus-within{
  background: var(--c2-bianco) !important;
  border-color: var(--c2-blu) !important;
  box-shadow: 0 0 0 4px rgba(7,90,145,.14) !important;
}
html.chat2 .search svg{ color: var(--c2-testo-2) !important; }

html.chat2 .modal input[type=text],
html.chat2 .modal input[type=password],
html.chat2 .modal textarea,
html.chat2 .field input{
  background: var(--c2-fondo-2) !important;
  border: 1px solid var(--c2-bordo) !important;
  border-radius: var(--c2-r-sm) !important;
  color: var(--c2-testo) !important;
  transition: border-color var(--c2-t), background var(--c2-t), box-shadow var(--c2-t) !important;
}
html.chat2 .modal input:focus,
html.chat2 .modal textarea:focus,
html.chat2 .field input:focus{
  background: var(--c2-bianco) !important;
  border-color: var(--c2-blu) !important;
  box-shadow: 0 0 0 4px rgba(7,90,145,.14) !important;
}
/* SOLO LE INTESTAZIONI SONO BLU. `\.modal label` prendeva anche le righe
   dei partecipanti e dei destinatari — che sono `<label>` perché contengono
   la casella — e i nomi delle persone uscivano in blu come se fossero
   titoli. Il nome di un collega è contenuto, non etichetta. */
html.chat2 .modal > label{ color: var(--c2-blu-scuro) !important; font-weight: 600 !important; }
html.chat2 .modal .pick label{ color: var(--c2-testo) !important; font-weight: 500 !important; }
html.chat2 ::placeholder{ color: var(--c2-testo-3) !important; }

/* =========================================================================
   5. CHIP E FILTRI
   ========================================================================= */
html.chat2 .chip{
  background: var(--c2-fondo-2) !important;
  color: var(--c2-testo-2) !important;
  border: 1px solid transparent !important;
  border-radius: var(--c2-r-full) !important;
  font-weight: 600 !important;
  transition: background var(--c2-t), color var(--c2-t) !important;
}
html.chat2 .chip:hover{ background: var(--c2-blu-chiaro) !important; color: var(--c2-blu) !important; }
html.chat2 .chip.on{
  background: var(--c2-blu) !important;
  color: #fff !important;
  border-color: var(--c2-blu) !important;
}
html.chat2 .chip.on b{ color: #fff !important; }

/* =========================================================================
   6. LE FINESTRE — una sola, ventisei volte
   Tutte le finestre della chat (Nuovo messaggio, Nuovo gruppo, Annuncio,
   Membri, Sondaggio, Programma, Preferiti, Galleria, Profilo, Pannello di
   controllo…) scrivono dentro lo stesso `#modal`. Quindi queste venti righe
   le vestono TUTTE, e nessuna resterà indietro a sembrare di un'altra app.
   ========================================================================= */
html.chat2 .modal-bg{
  background: rgba(13,22,32,.42) !important;
  backdrop-filter: blur(14px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.1) !important;
}
html.chat2 .modal{
  border-radius: var(--c2-r-lg) !important;
  background: var(--c2-bianco) !important;
  border: 1px solid var(--c2-bordo) !important;
  box-shadow: var(--c2-om-4) !important;
  padding: 22px !important;
  animation: c2Entra 220ms cubic-bezier(.32,.72,0,1) !important;
}
@keyframes c2Entra{
  from{ opacity:0; transform: translateY(14px) scale(.985); }
  to  { opacity:1; transform:none; }
}
html.chat2 .cp-head h2{ font-size: 22px !important; letter-spacing: -.02em !important; }
html.chat2 .cp-x{
  color: var(--c2-testo-2) !important;
  border-radius: var(--c2-r-full) !important;
  width: 34px !important; height: 34px !important;
  transition: background var(--c2-t), color var(--c2-t) !important;
}
html.chat2 .cp-x:hover{ background: var(--c2-fondo-2) !important; color: var(--c2-testo) !important; }
html.chat2 .modal .pick,
html.chat2 .modal .row{ border-radius: var(--c2-r-sm) !important; }
html.chat2 .modal .pick{ border-color: var(--c2-bordo) !important; }
html.chat2 .modal .row:hover,
html.chat2 .modal .pick label:hover{ background: var(--c2-blu-chiaro) !important; }
html.chat2 .modal-actions button{
  border-radius: var(--c2-r-sm) !important;
  padding: 13px !important;
  min-height: 48px;      /* si preme col pollice, non col mouse */
}

/* le caselle di spunta del mockup: quadrate, blu, con la spunta bianca */
html.chat2 .modal input[type=checkbox]{
  appearance: none; -webkit-appearance: none;
  width: 21px; height: 21px; flex: 0 0 21px;
  border: 2px solid var(--c2-bordo);
  border-radius: 6px;
  background: var(--c2-bianco);
  cursor: pointer;
  transition: background var(--c2-t), border-color var(--c2-t);
  position: relative;
}
html.chat2 .modal input[type=checkbox]:checked{
  background: var(--c2-blu); border-color: var(--c2-blu);
}
html.chat2 .modal input[type=checkbox]:checked::after{
  content:""; position:absolute; left:6px; top:2px;
  width:5px; height:10px; border:solid #fff; border-width:0 2.5px 2.5px 0;
  transform: rotate(43deg);
}

/* =========================================================================
   7. LE RIGHE: CONVERSAZIONI, PERSONE
   ========================================================================= */
html.chat2 .conv{
  border-radius: var(--c2-r-sm) !important;
  margin: 0 8px !important;
  transition: background var(--c2-t) !important;
}
html.chat2 .conv:hover{ background: var(--c2-fondo-2) !important; }
html.chat2 .conv.active{ background: var(--c2-blu-chiaro) !important; }
html.chat2 .conv-avatar{ box-shadow: var(--c2-om-1) !important; }
html.chat2 .urow{ border-radius: var(--c2-r-sm) !important; transition: background var(--c2-t) !important; }
html.chat2 .urow:hover{ background: var(--c2-fondo-2) !important; }
/* il pallino di presenza: verde perché vuol dire «c'è», non per decorare */
html.chat2 .dot-online,
html.chat2 .story-av .on{ background: var(--c2-online) !important; }

/* =========================================================================
   8. GLI AVVISI
   Oggi gli errori escono con la finestrella grigia del browser (`alert`),
   che su iPhone dice pure il nome del sito. `chat2.js` li dirotta qui.
   ========================================================================= */
.c2-toast-zona{
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(22px + env(safe-area-inset-bottom));
  z-index: 900; display: flex; flex-direction: column; gap: 8px;
  width: min(420px, calc(100vw - 32px)); pointer-events: none;
}
.c2-toast{
  background: #1d242c; color: #fff;
  border-radius: var(--c2-r, 16px);
  padding: 13px 16px; font-size: 15px; line-height: 1.35;
  box-shadow: 0 12px 32px rgba(0,0,0,.28);
  animation: c2ToastEntra 220ms cubic-bezier(.32,.72,0,1);
  pointer-events: auto;
}
.c2-toast.errore{ background: #8c1d18; }
.c2-toast.uscita{ animation: c2ToastEsce 180ms ease-in forwards; }
@keyframes c2ToastEntra{ from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
@keyframes c2ToastEsce { to{opacity:0;transform:translateY(8px)} }

/* =========================================================================
   9. IL TASTO PER SPEGNERE — nel profilo, non in mezzo al lavoro
   ========================================================================= */
.c2-sw{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; margin-top: 10px; padding: 12px 14px;
  border: 1px solid var(--border, #e2e6e2); border-radius: 12px;
  background: transparent; font: inherit; font-size: 15px; font-weight: 600;
  color: inherit; cursor: pointer; text-align: left;
}
.c2-sw .st{ font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
html.chat2 .c2-sw .st{ color: #075a91; }
html:not(.chat2) .c2-sw .st{ color: #8b938c; }

/* CHI NON VUOLE ANIMAZIONI NON LE HA. */
@media (prefers-reduced-motion: reduce){
  html.chat2 *{ transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* =========================================================================
   10. LA HOME — fase 02
   ========================================================================= */

/* -------- intestazione più compatta, come chiesto -------- */
html.chat2 .sidebar-head{
  padding: 10px 14px 10px !important;
  border-radius: 0 0 22px 22px !important;
  background: linear-gradient(160deg, var(--c2-blu) 0%, var(--c2-blu-scuro) 100%) !important;
  box-shadow: 0 4px 16px rgba(6,74,120,.22) !important;
  padding-top: calc(10px + env(safe-area-inset-top)) !important;
}
html.chat2 .head-top{ margin-bottom: 9px !important; }
html.chat2 .head-logo{ border-radius: 10px !important; }
html.chat2 .hello{ font-weight: 700 !important; letter-spacing: -.015em !important; }
html.chat2 .welcome{ opacity: .82 !important; }
html.chat2 .head-search-btn{
  background: rgba(255,255,255,.18) !important;
  border-radius: var(--c2-r-full) !important;
  transition: background var(--c2-t) !important;
}
html.chat2 .head-search-btn:hover{ background: rgba(255,255,255,.30) !important; }

/* -------- contatti rapidi: sei, poi «+N Altri» -------- */
html.chat2 .story-av{ box-shadow: 0 2px 6px rgba(0,0,0,.16) !important; }
html.chat2 .c2-altri-av{
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.16) !important;
  border: 2px dashed rgba(255,255,255,.55) !important;
  color: #fff !important; font-weight: 700; font-size: 14px;
}
html.chat2 .c2-altri{ cursor: pointer; }

/* -------- le tre azioni: icona + parola, stessa forma -------- */
html.chat2 .sidebar-actions{ gap: 8px !important; }
html.chat2 .sidebar-actions .ghost{
  display: inline-flex !important; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 8px !important; font-size: 13.5px !important; min-height: 44px;
}
html.chat2 .sidebar-actions .ghost svg{ flex: 0 0 18px; }
/* SULLA COLONNA DEL COMPUTER I TASTI USCIVANO FUORI.
   La colonna è larga **340 px fissi**, ma le regole strette stavano dietro
   una `@media (max-width:420px)`, che guarda la finestra — e su un Mac la
   finestra è larga. Risultato: sul telefono ci stavano, sul computer no.
   Le misure strette adesso valgono SEMPRE, e l'etichetta si accorcia con i
   puntini invece di sfondare: una scritta tagliata si legge lo stesso, un
   tasto che esce dalla colonna no. */
html.chat2 .sidebar-actions{ gap: 6px !important; }
html.chat2 .sidebar-actions .ghost{
  min-width: 0 !important;
  padding: 10px 6px !important; gap: 6px;
  flex: 1 1 0 !important;
}
html.chat2 .sidebar-actions .ghost span{
  font-size: 12.5px; letter-spacing: -.012em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
/* al terzo serve un filo in più, è quello con la parola lunga */
html.chat2 #btn-broadcast{ flex: 1.35 1 0 !important; }
@media (max-width: 380px){
  html.chat2 .sidebar-actions .ghost span{ font-size: 12px; }
  html.chat2 .sidebar-actions .ghost{ padding: 10px 4px !important; gap: 5px; }
}

/* -------- filtri --------
   SU UNA RIGA SOLA. Con quattro filtri più la stellina, su uno schermo da
   390 px andavano a capo e la seconda riga rubava spazio all'elenco. Adesso
   la fila scorre di lato come i contatti rapidi, e la stellina resta
   incollata a destra invece di sparire nello scorrimento. */
html.chat2 .conv-filters{
  gap: 7px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-right: 2px !important;
}
html.chat2 .conv-filters::-webkit-scrollbar{ display: none; }
html.chat2 .conv-filters .chip{ flex: 0 0 auto; white-space: nowrap; }
html.chat2 .chip.c2-segna{
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0 !important; flex: 0 0 34px;
}
/* Incollata a destra SEMPRE: sul Mac l'avevo lasciata scorrere via, ma con
   la colonna larga come il telefono le due schermate devono comportarsi
   allo stesso modo — e una stellina che sparisce dallo schermo è peggio di
   una stellina appoggiata sopra la coda della fila. */
html.chat2 .chip.c2-segna{
  position: sticky; right: 0;
  background: var(--c2-bianco) !important;
  box-shadow: -12px 0 12px -6px var(--c2-bianco);
}

/* -------- righe: un filo più compatte, ma leggibili -------- */
html.chat2 .conv{ padding: 9px 11px !important; gap: 11px !important; }
html.chat2 .conv-avatar{ width: 48px !important; height: 48px !important; }
html.chat2 .conv-preview{ font-size: 14.2px !important; }
html.chat2 .badge{
  background: var(--c2-blu) !important; color: #fff !important;
  font-weight: 700 !important; border-radius: var(--c2-r-full) !important;
}
/* l'etichetta che distingue un assistente da un collega */
html.chat2 .c2-ai-tag{
  display: inline-block; margin-left: 7px; vertical-align: 2px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
  padding: 2px 6px; border-radius: var(--c2-r-full);
  background: var(--c2-blu-chiaro); color: var(--c2-blu);
  border: 1px solid var(--c2-blu-bordo);
}
html.chat2 .c2-vuoto{
  padding: 26px 18px; text-align: center;
  color: var(--c2-testo-2); font-size: 14.5px;
}

/* -------- il pannello Contatti (stessa lista di «Nuovo messaggio») -------- */
.c2-lista{ display: none; }
html.c2-contatti .c2-lista{
  display: block; flex: 1 1 auto; overflow-y: auto;
  padding-bottom: 84px;
}
html.c2-contatti #conv-list{ display: none !important; }
html.c2-contatti .conv-filters,
html.c2-contatti #folders-bar{ display: none !important; }

/* -------- LA BARRA IN BASSO --------
   Solo sul telefono: sul computer la colonna è sempre in vista e una barra
   in basso sarebbe una scorciatoia per qualcosa che è già lì.
   Sparisce quando si apre una conversazione, altrimenti coprirebbe la riga
   di scrittura. */
/* =========================================================================
   LA BARRA A QUATTRO VOCI — ANCHE SUL COMPUTER
   «Su Mac deve essere uguale al cellulare» — Francesco.
   Sul telefono è larga quanto lo schermo; sul computer è larga quanto la
   COLONNA (340 px fissi), perché di fianco c'è la conversazione e una barra
   che ci passa sotto sarebbe fuori posto. Stesse quattro voci, stesse
   icone, stesso comportamento.
   Il vecchio piede (nome, ingranaggio, pannello, esci) si nasconde ovunque:
   «Impostazioni» apre lo stesso profilo, e dentro il profilo `chat2.js`
   aggiunge Pannello di controllo ed Esci — che premono i tasti veri, quelli
   di sempre.
   ========================================================================= */
.c2-nav{ display: none; }
@media (min-width: 761px){
  html.chat2 .c2-nav{
    display: flex; position: fixed; left: 0; bottom: 0; z-index: 300;
    width: 340px;                      /* la larghezza della colonna */
    background: var(--c2-bianco);
    border: 0; border-top: 1px solid var(--c2-bordo);
    border-right: 1px solid var(--c2-bordo);
    box-shadow: 0 -4px 18px rgba(16,24,32,.06);
    padding: 5px 4px;
  }
  html.chat2 #conv-list,
  html.c2-contatti .c2-lista{ padding-bottom: 70px !important; }
  html.chat2 .sidebar-foot{ display: none !important; }
}
@media (max-width: 760px){
  /* ATTACCATA AL BORDO, LARGA QUANTO LO SCHERMO.
     Prima era una pastiglia staccata di 10 px per lato e 8 dal fondo: i nomi
     delle conversazioni si vedevano **di fianco e sotto** la barra, e
     sembrava rotta. Adesso è appoggiata al bordo e piena, così quello che
     scorre le passa dietro e sparisce, come su qualunque app.
     Lo spazio per il dito sotto (la tacca dell'iPhone) sta DENTRO la barra,
     non fra la barra e il bordo. */
  html.chat2 .c2-nav{
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
    background: var(--c2-bianco);
    border: 0; border-top: 1px solid var(--c2-bordo);
    border-radius: 0;
    box-shadow: 0 -4px 18px rgba(16,24,32,.07);
    padding: 5px 4px calc(5px + env(safe-area-inset-bottom));
  }
  /* CON UNA CONVERSAZIONE APERTA LA BARRA SPARISCE, altrimenti copre la
     riga di scrittura. La regola scritta come `.app.show-chat .c2-nav` NON
     funzionava: la barra sta in `body`, non dentro `.app`. Qui si guarda la
     classe su `<html>` (la mette `chat2.js`, che osserva `.app`), e `:has`
     fa da seconda strada sui browser che ce l'hanno. */
  html.chat2.c2-in-chat .c2-nav,
  html.chat2 body:has(.app.show-chat) .c2-nav{ display: none; }
  /* l'ultima conversazione deve restare raggiungibile: si tiene libero
     tanto spazio quanto è alta la barra, tacca compresa */
  html.chat2 #conv-list,
  html.c2-contatti .c2-lista{
    padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
  }
  /* il piede della colonna finirebbe sotto la barra: le sue funzioni sono
     nella voce Impostazioni, e l'interruttore è dentro il profilo */
  html.chat2 .sidebar-foot{ display: none !important; }
}
.c2-nav-v{
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
  align-items: center; gap: 3px; padding: 7px 2px 5px;
  background: none; border: 0; cursor: pointer;
  color: var(--c2-testo-2); font: inherit; font-size: 10.5px; font-weight: 600;
  border-radius: 14px; transition: color var(--c2-t), background var(--c2-t);
  min-height: 52px;                       /* si preme col pollice */
}
.c2-nav-v.on{ color: var(--c2-blu); }
.c2-nav-v.on .c2-nav-ic{ background: var(--c2-blu-chiaro); }
.c2-nav-ic{
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 26px; border-radius: var(--c2-r-full);
  transition: background var(--c2-t);
}
.c2-nav-t{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.c2-nav-b{
  position: absolute; top: -4px; right: 4px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: var(--c2-r-full);
  background: #d33a2f; color: #fff;
  font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
  box-shadow: 0 0 0 2px var(--c2-bianco);
}
.c2-nav-b[hidden]{ display: none; }

/* =========================================================================
   11. LE FINESTRE — fasi 03, 04, 05
   Nuovo messaggio · Nuovo gruppo · Annuncio.
   La forma della finestra è già vestita in fase 01 (una sola, ventisei
   volte): qui si sistema quello che c'è DENTRO.
   ========================================================================= */

/* -------- la casella di ricerca dentro «Nuovo messaggio» -------- */
html.chat2 .ms-box{ margin-bottom: 12px !important; }
/* La regola dei campi della fase 01 usa la scorciatoia `background:`, che
   azzera anche l'immagine di sfondo — e vince perché più precisa. Qui il
   selettore è più preciso ancora e il colore si scrive separato, così la
   lente non viene cancellata. */
html.chat2 .modal .ms-box input[type=text]{
  background-color: var(--c2-fondo-2) !important;
  border: 1px solid var(--c2-bordo) !important;
  border-radius: var(--c2-r-sm) !important;
  font-size: 15.5px !important;
  padding: 12px 14px 12px 40px !important;   /* spazio per la lente */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b736c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 13px center !important;
  background-size: 17px 17px !important;
}
html.chat2 .modal .ms-box input[type=text]:focus{
  background-color: var(--c2-bianco) !important;
  border-color: var(--c2-blu) !important;
  box-shadow: 0 0 0 4px rgba(7,90,145,.14) !important;
}

/* -------- le righe di scelta (colleghi, destinatari) -------- */
html.chat2 #nm-list .conv{
  margin: 0 !important; border-radius: var(--c2-r-sm) !important;
  padding: 10px 10px !important;
}
html.chat2 #nm-list .conv + .conv{
  border-top: 1px solid var(--c2-bordo);
  border-radius: 0 !important;
}
html.chat2 #nm-list .conv:hover{ background: var(--c2-blu-chiaro) !important; }
html.chat2 #nm-list .conv-name{ font-weight: 700; }
html.chat2 #nm-list .conv-preview{ color: var(--c2-testo-2) !important; }

/* -------- l'elenco con le caselle (Nuovo gruppo, Annuncio) -------- */
html.chat2 .modal .pick{
  border: 1px solid var(--c2-bordo) !important;
  border-radius: var(--c2-r-sm) !important;
  background: var(--c2-bianco) !important;
  max-height: 46vh !important;
}
html.chat2 .modal .pick label{
  gap: 12px !important; padding: 12px 14px !important;
  min-height: 50px;                      /* si tocca col dito */
  border-bottom: 1px solid var(--c2-bordo) !important;
  font-weight: 500 !important;
  transition: background var(--c2-t);
}
html.chat2 .modal .pick label:last-child{ border-bottom: 0 !important; }
html.chat2 .modal .pick label small{ color: var(--c2-testo-2) !important; }
html.chat2 .modal .conv-avatar.small{ box-shadow: var(--c2-om-1) !important; }
html.chat2 .modal .em-body,
html.chat2 .modal textarea{
  width: 100%; min-height: 96px; resize: vertical;
  padding: 12px 14px !important; font-size: 15.5px !important; line-height: 1.45;
}
html.chat2 .modal .err{
  color: var(--c2-errore) !important; background: var(--c2-errore-bg);
  border-radius: var(--c2-r-xs); padding: 9px 12px; font-size: 14px; margin-top: 10px;
}
/* il tasto principale a destra e più largo dell'Annulla, come nel mockup */
html.chat2 .modal-actions{ gap: 10px !important; margin-top: 18px !important; }
html.chat2 .modal-actions .btn-primary{ flex: 1.3 !important; }

/* -------- la ✕ anche dove non c'era --------
   «Nuovo gruppo» apriva con un semplice <h2>, senza tasto per chiudere: si
   usciva solo toccando fuori, che su un telefono non si indovina.
   `chat2.js` gli mette l'intestazione giusta; qui si veste. */
html.chat2 .modal > h2{ margin-bottom: 14px; }

/* =========================================================================
   12. LA CONVERSAZIONE — fase 06
   ========================================================================= */
html.chat2{
  --c2-bolla-in:  #f1f3f6;   /* testo #1d241d sopra: 14,3:1 */
  --c2-bolla-mia: #eaf3fa;   /* testo #1d241d sopra: 14,1:1 */
  /* L'ORARIO DENTRO LE BOLLE HA UN GRIGIO SUO.
     Il testo secondario normale (#6b736c) sulle bolle fa 4,35:1 — appena
     sotto la soglia. Le ore si leggono di sfuggita, di solito controluce:
     #5b625c fa 5,6:1 e resta discreto. */
  --c2-ora: #5b625c;
}
html.chat2 body.dark{
  --c2-bolla-in:  #1b232c;
  --c2-bolla-mia: #16334a;
  --c2-ora: #97a3ad;
}

/* la testata della conversazione, nel blu del marchio come nel mockup */
html.chat2 .chat-head{
  background: var(--c2-blu) !important;
  border-bottom: 0 !important;
  box-shadow: 0 2px 10px rgba(6,74,120,.20) !important;
  padding-top: calc(11px + env(safe-area-inset-top)) !important;
}
html.chat2 .chat-head-text strong{ color: #fff !important; }
html.chat2 .chat-head-text small{ color: rgba(255,255,255,.82) !important; }
html.chat2 .chat-head-text .online{ color: #7ee2b0 !important; font-weight: 600 !important; }
html.chat2 .chat-head-text .typing{ color: #cfe6f7 !important; }
html.chat2 .back-btn{ color: #fff !important; }
html.chat2 .chat-call, html.chat2 .chat-piu,
html.chat2 .chat-mute, html.chat2 .chat-info, html.chat2 .chat-del{
  color: rgba(255,255,255,.92) !important;
}
html.chat2 .chat-call:hover, html.chat2 .chat-piu:hover{
  background: rgba(255,255,255,.16) !important; color: #fff !important;
}
html.chat2 .chat-avatar{ box-shadow: 0 0 0 2px rgba(255,255,255,.35) !important; }

/* LE BOLLE
   Chiare tutte e due, testo scuro dentro: è il modo in cui si legge meglio
   su un telefono al sole, e distingue la chat da WhatsApp senza inventare
   niente. La codina (`::before`) segue il fondo da sola. */
html.chat2 .msg{
  background: var(--c2-bolla-in) !important;
  color: var(--c2-testo) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 1px rgba(16,24,32,.06) !important;
  padding: 7px 11px !important;
}
html.chat2 .msg:not(.cont)::before{ border-top-color: var(--c2-bolla-in) !important; }
html.chat2 .msg.mine{
  background: var(--c2-bolla-mia) !important;
  color: var(--c2-testo) !important;
}
html.chat2 .msg.mine:not(.cont)::before{ border-top-color: var(--c2-bolla-mia) !important; }
html.chat2 .msg .sender{ color: var(--c2-blu) !important; font-weight: 700 !important; }
html.chat2 .msg .time,
html.chat2 .msg .txt .time{ color: var(--c2-ora) !important; opacity: 1 !important; }
/* le spunte: grigie quando è partito, blu quando è stato letto */
html.chat2 .msg .tick{ color: var(--c2-ora) !important; }
html.chat2 .msg .tick.read, html.chat2 .ltick.read{ color: var(--c2-blu) !important; }
html.chat2 .reply-quote{
  background: rgba(7,90,145,.07) !important;
  border-left: 3px solid var(--c2-blu) !important;
  border-radius: 8px !important;
}
html.chat2 body.dark .reply-quote{ background: rgba(255,255,255,.07) !important; }

/* la striscia del giorno */
html.chat2 .day-sep span,
html.chat2 .daysep span{
  background: var(--c2-bianco) !important; color: var(--c2-testo-2) !important;
  border: 1px solid var(--c2-bordo) !important;
  border-radius: var(--c2-r-full) !important;
  font-weight: 600 !important; font-size: 12.5px !important;
}

/* l'allegato-documento: una scheda, non un link con l'emoji */
html.chat2 .att-wrap.file-wrap{
  background: rgba(255,255,255,.6);
  border: 1px solid var(--c2-bordo);
  border-radius: var(--c2-r-sm);
  padding: 8px 10px;
}
html.chat2 body.dark .att-wrap.file-wrap{ background: rgba(255,255,255,.06); }
html.chat2 a.file{
  color: var(--c2-testo) !important; font-weight: 600 !important;
  text-decoration: none !important;
}
html.chat2 .att-wrap img{ border-radius: var(--c2-r-sm) !important; }

/* il messaggio vocale */
html.chat2 .voice-msg{
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.55);
  border: 1px solid var(--c2-bordo);
  border-radius: var(--c2-r-full);
  padding: 5px 9px;
}
html.chat2 body.dark .voice-msg{ background: rgba(255,255,255,.06); }
html.chat2 .v-speed{
  background: var(--c2-blu) !important; color: #fff !important;
  border-radius: var(--c2-r-full) !important; font-size: 11.5px !important;
  font-weight: 700 !important; padding: 3px 8px !important; border: 0 !important;
}

/* i messaggi fissati in cima */
html.chat2 .pinned-bar, html.chat2 .pin-bar{
  background: var(--c2-blu-chiaro) !important;
  border-bottom: 1px solid var(--c2-blu-bordo) !important;
  color: var(--c2-blu) !important;
}

/* LA RIGA DI SCRITTURA — il «+» in tondo blu e il microfono pieno */
html.chat2 .composer{
  background: var(--c2-bianco) !important;
  border-top: 1px solid var(--c2-bordo) !important;
  gap: 7px !important; padding: 9px 10px !important;
  padding-bottom: calc(9px + env(safe-area-inset-bottom)) !important;
}
html.chat2 .composer #msg-input{
  background: var(--c2-fondo-2) !important;
  border: 1px solid var(--c2-bordo) !important;
  border-radius: 22px !important;
  font-size: 16.5px !important;      /* sotto i 16 px iOS ingrandisce la pagina */
}
html.chat2 .composer #msg-input:focus{
  background: var(--c2-bianco) !important;
  border-color: var(--c2-blu) !important;
  box-shadow: 0 0 0 3px rgba(7,90,145,.13) !important;
}
html.chat2 #piu-btn{
  background: var(--c2-blu-chiaro) !important;
  color: var(--c2-blu) !important;
  border-radius: 50% !important;
  width: 38px !important; height: 38px !important;
}
html.chat2 body.dark #piu-btn{ background: rgba(90,174,224,.18) !important; }
html.chat2 .send-btn, html.chat2 .mic-btn{
  background: var(--c2-blu) !important; color: #fff !important;
  border-radius: 50% !important; box-shadow: var(--c2-om-2) !important;
}
html.chat2 .send-btn:hover, html.chat2 .mic-btn:hover{ background: var(--c2-blu-scuro) !important; }
html.chat2 #emoji-btn{ color: var(--c2-testo-2) !important; }

/* =========================================================================
   13. L'INVITO — «sul cellulare vedo la versione vecchia anche aggiornando»
   Non era la cache: su iPhone l'app installata sulla schermata home ha una
   memoria separata da Safari, e dentro un'app a schermo intero non si può
   nemmeno scrivere un indirizzo. Serviva una maniglia dentro.
   Sta FUORI da `html.chat2` perché deve vedersi proprio quando il livello è
   spento. Lo vede solo chi amministra.
   ========================================================================= */
.c2-invito{
  margin: 8px 10px 4px; padding: 12px 14px;
  border: 1px solid #cfe3f2; border-radius: 14px;
  background: #eaf3fa; color: #1d241d;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.c2-invito-t{ flex: 1 1 150px; min-width: 0; line-height: 1.35; }
.c2-invito-t b{ display: block; font-size: 14.5px; font-weight: 700; color: #064a78; }
.c2-invito-t span{ font-size: 12.8px; color: #4a5a66; }
.c2-invito-b{ display: flex; gap: 8px; flex: 0 0 auto; }
.c2-invito-b button{
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  border-radius: 10px; padding: 9px 14px; min-height: 40px; border: 1px solid transparent;
}
.c2-inv-no{ background: rgba(255,255,255,.75); color: #4a5a66; border-color: #cfe3f2 !important; }
.c2-inv-si{ background: #075a91; color: #fff; }
.c2-inv-si:hover{ background: #064a78; }
body.dark .c2-invito{ background: #152a3a; border-color: #22415a; color: #e8edf0; }
body.dark .c2-invito-t b{ color: #8cc9ef; }
body.dark .c2-invito-t span{ color: #97a3ad; }
body.dark .c2-inv-no{ background: rgba(255,255,255,.07); color: #cbd6de; border-color: #22415a !important; }

/* =========================================================================
   14. LA RIGA DELLE CARTELLE
   È una funzione a sé (`folders.js`), con una tavolozza sua: il rosso scuro
   #9E1B1B della cartella attiva accanto al blu dei filtri sembrava un
   pezzo di un'altra applicazione. Stessa forma dei filtri, stesso blu:
   diventa la seconda riga della stessa cosa, non una cosa diversa.
   Le cartelle continuano a funzionare esattamente come prima.
   ========================================================================= */
html.chat2 #folders-bar{
  padding: 0 12px 8px !important;
  border-bottom: 1px solid var(--c2-bordo) !important;
}
html.chat2 #folders-bar .folder-chips{
  flex-wrap: nowrap !important;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  gap: 7px !important;
}
html.chat2 #folders-bar .folder-chips::-webkit-scrollbar{ display: none; }
html.chat2 .folder-chip{
  flex: 0 0 auto;
  background: var(--c2-fondo-2) !important;
  border: 1px solid transparent !important;
  color: var(--c2-testo-2) !important;
  font-size: 12.5px !important; font-weight: 600 !important;
  padding: 7px 12px !important; line-height: 1.1 !important;
  min-height: 32px;
  transition: background var(--c2-t), color var(--c2-t);
}
html.chat2 .folder-chip:hover{ background: var(--c2-blu-chiaro) !important; color: var(--c2-blu) !important; }
html.chat2 .folder-chip.active{
  background: var(--c2-blu) !important;
  border-color: var(--c2-blu) !important;
  color: #fff !important;
}
html.chat2 .folder-chip.folder-add{
  opacity: 1 !important;
  width: 32px; padding: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px dashed var(--c2-bordo) !important;
  background: transparent !important; color: var(--c2-testo-2) !important;
}
html.chat2 .folder-editbtn{
  border: 1px solid var(--c2-bordo) !important;
  border-radius: 9px !important;
  color: var(--c2-testo-2) !important;
  font-weight: 600 !important;
}
html.chat2 .folder-editbtn.on{
  background: var(--c2-blu) !important; border-color: var(--c2-blu) !important; color: #fff !important;
}
html.chat2 #conv-list .conv.in-folder{ box-shadow: inset 3px 0 0 var(--c2-blu) !important; }
html.chat2 .folder-hint{ color: var(--c2-testo-2) !important; opacity: 1 !important; }

/* =========================================================================
   15. IL PIEDE DELLA COLONNA — sul computer
   «Sotto è vecchio» — Francesco, guardando il Mac.
   Sul telefono il piede si nasconde e al suo posto c'è la barra a quattro
   voci. Sul computer la barra in basso NON ha senso — la colonna è sempre
   in vista, sarebbe una scorciatoia per qualcosa che si vede già — quindi il
   piede resta, ma vestito come il resto invece di essere l'ultimo pezzo
   rimasto indietro. Profilo, pannello, esci e pennello restano quelli.
   ========================================================================= */
html.chat2 .sidebar-foot{
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
  border-top: 1px solid var(--c2-bordo) !important;
  background: var(--c2-bianco) !important;
  gap: 10px;
}
html.chat2 .me{ gap: 10px !important; min-width: 0; }
html.chat2 .me-avatar{
  width: 34px !important; height: 34px !important;
  border-radius: 11px !important;      /* come gli avatar dell'elenco */
  box-shadow: var(--c2-om-1) !important;
}
html.chat2 .me-avatar::after{ background: var(--c2-online) !important; }
html.chat2 .me-name{
  font-size: 14px !important; font-weight: 600 !important;
  color: var(--c2-testo) !important;
}
html.chat2 .foot-actions{ gap: 4px !important; }
html.chat2 .foot-actions .icon-btn{
  width: 36px !important; height: 36px !important;
  border-radius: 10px !important;
  color: var(--c2-testo-2) !important;
}
html.chat2 .foot-actions .icon-btn:hover{
  background: var(--c2-blu-chiaro) !important; color: var(--c2-blu) !important;
}
/* il pennello dice da solo che il nuovo aspetto è acceso */
html.chat2 #c2-sw-btn{ color: var(--c2-blu) !important; }
html.chat2 #c2-sw-btn:hover{ background: var(--c2-blu-chiaro) !important; }

/* =========================================================================
   16. IL BLOCCO «WA-LOOK» — neutralizzato, non cancellato
   In `style.css` (righe 779-786) c'è un pezzo che rende la chat una copia di
   WhatsApp con i colori scritti a mano e `!important`:
       .msg.mine        → verde  #d9fdd3
       :root --bg       → beige  #ece5dd
       .chat,.messages  → beige  #ece5dd
   È il motivo del campo beige che si vedeva sul Mac accanto alla colonna
   nuova, ed è anche l'opposto di «non deve sembrare una copia di WhatsApp».
   Le bolle erano già coperte (il mio selettore è più preciso); mancavano il
   fondo e la variabile, perché quelle regole hanno `!important` e le mie no.
   Qui si coprono, senza togliere una riga: a livello spento la chat resta
   beige e verde esattamente come oggi.
   ========================================================================= */
html.chat2{ --bg: var(--c2-fondo) !important; }
html.chat2 .chat,
html.chat2 .messages{ background-color: var(--c2-fondo) !important; }
html.chat2 body.dark .chat,
html.chat2 body.dark .messages{ background-color: var(--c2-fondo) !important; }
/* il disegno di fondo (rulli e pennelli: è il mestiere) resta, ma appena
   accennato — deve farsi notare solo se lo si cerca */
html.chat2 .messages{ background-size: 260px 260px !important; opacity: 1; }
html.chat2 .messages::before{ content: none; }

/* la schermata «Seleziona una conversazione» sul computer */
html.chat2 .chat-empty{ color: var(--c2-testo-2) !important; }
html.chat2 .empty-logo{ opacity: .38 !important; width: 168px !important; }
html.chat2 .chat-empty p{ font-size: 15px; line-height: 1.55; }

/* le spunte del blocco WA-LOOK erano ingrandite e strizzate a mano
   (15,5 px, peso 800, lettere a -1 px): dentro una bolla chiara diventano
   una macchia. Qui tornano della misura del testo che accompagnano. */
html.chat2 .msg.mine .tick.read,
html.chat2 .ltick.read{
  font-size: 12.5px !important; font-weight: 700 !important;
  letter-spacing: -2px !important;
}

/* la bolla «Altri» resta al bordo destro della fila, a qualunque larghezza:
   il fondo dietro è l'azzurro dell'intestazione, con una sfumatura a
   sinistra che dice «la fila continua» invece di sembrare tagliata */
html.chat2 .c2-altri{
  position: sticky; right: 0; z-index: 2;
  background: linear-gradient(90deg, rgba(6,74,120,0) 0%, #0a538a 22%, #0a538a 100%);
  padding-left: 14px; margin-left: -4px;
}
html.chat2 .stories{ scroll-padding-right: 66px; }

/* le due righe che tornano dentro il profilo al posto del piede */
.c2-az{
  display: flex; align-items: center; gap: 11px; width: 100%;
  margin-top: 8px; padding: 12px 14px; min-height: 48px;
  border: 1px solid var(--border, #e2e6e2); border-radius: 12px;
  background: transparent; font: inherit; font-size: 15px; font-weight: 600;
  color: inherit; cursor: pointer; text-align: left;
}
.c2-az svg{ flex: 0 0 18px; opacity: .8; }
html.chat2 .c2-az:hover{ background: var(--c2-blu-chiaro); border-color: var(--c2-blu-bordo); }
html.chat2 .c2-az.pericolo{ color: var(--c2-errore); border-color: var(--c2-errore-bg); }
html.chat2 .c2-az.pericolo:hover{ background: var(--c2-errore-bg); border-color: var(--c2-errore); }

/* =========================================================================
   17. L'INTESTAZIONE — deve stare dentro la colonna, come sul telefono
   «La barra superiore è oltre, falla rientrare tutta come nel cellulare.»

   Misurato: nella colonna del Mac (340 px) la riga in alto diventava alta
   **62 px** invece di 38, perché «Ciao Franco» andava a capo. Il perché è
   tutto in due righe di `style.css`: il logo ha `flex-shrink: 0` e il
   blocco del saluto non ha `min-width: 0`. Un elemento flex, di suo, non
   scende sotto la larghezza del proprio contenuto: senza quella riga il
   testo non può stringersi e spinge, e la sola cosa che può cedere è andare
   a capo.

   Rimedio: il saluto può stringersi e, se proprio non ci sta, si accorcia
   con i puntini; il logo non supera il 42% della riga. Nessuna `@media`:
   questa regola vale a qualunque larghezza abbia la colonna, e sul telefono
   non cambia niente perché lì ci stava già.
   ========================================================================= */
html.chat2 .head-top{ gap: 8px !important; min-width: 0; }
/* Lo spazio fra il logo e il saluto: 9 px erano troppo pochi (poi 17, ancora pochi), il marchio e
   la scritta si toccavano e sembravano una cosa sola. 26 li separano senza
   togliere spazio al nome — verificato che «Ciao …» resta su una riga. */
html.chat2 .head-left{ flex: 1 1 auto; min-width: 0; gap: 26px !important; }
html.chat2 .head-left > div{ min-width: 0; }
html.chat2 .hello,
html.chat2 .welcome{
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block; max-width: 100%;
}
html.chat2 .hello{ font-size: 18.5px !important; line-height: 1.22 !important; }
html.chat2 .welcome{ font-size: 13.2px !important; }
/* IL LOGO SENZA RIQUADRO, E PIÙ GRANDE.
   La pastiglia bianca era una toppa chiara in mezzo al blu: toglierla fa
   sembrare il marchio più grande ancora prima di ingrandirlo. Da 30 px di
   altezza si passa a 40, cioè il doppio dell'area, e resta comunque metà
   della riga perché il saluto deve poter stare accanto.
   Se il file bianco non arrivasse, `chat2.js` rimette il nero e questa
   classe fa ricomparire il riquadro — altrimenti sarebbe scritta bianca su
   niente. */
html.chat2 .head-logo{
  height: auto !important; max-height: 40px;
  max-width: 50%; width: auto;
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: contain;
}
html.chat2.c2-logo-nero .head-logo{
  background: #fff !important; padding: 5px 9px !important;
  border-radius: 10px !important; max-height: 34px;
}
html.chat2 .head-search-btn{ flex: 0 0 38px; }

/* =========================================================================
   18. LA COLONNA DEL COMPUTER LARGA COME IL TELEFONO
   «Su Mac deve essere uguale al cellulare.»

   Finché la colonna è larga 340 px e il telefono 390, *identico* non può
   esserlo: 50 px in meno vogliono dire etichette tagliate, contatti che si
   accavallano, filtri che spariscono. Rattoppare pezzo per pezzo avrebbe
   prodotto due interfacce simili, non la stessa.
   Quindi la colonna sul computer diventa **390 px**: la stessa larghezza di
   un iPhone. Da lì in poi tutto quello che ci sta sul telefono ci sta anche
   sul Mac, con le stesse regole e senza eccezioni.
   ========================================================================= */
@media (min-width: 761px){
  html.chat2 .sidebar{ width: 390px !important; min-width: 390px !important; }
  html.chat2 .c2-nav{ width: 390px; }
}

/* I CONTATTI RAPIDI: quanti ne stanno, senza accavallamenti.
   Con la bolla «+N Altri» incollata a destra, l'ultimo avatar le finiva
   dietro — mezza faccia sotto la sfumatura. Adesso le bolle sono un filo
   più piccole e `chat2.js` ne mostra tante quante ne entrano DAVVERO, così
   «Altri» è l'ultima della fila e non copre nessuno. */
html.chat2 .stories{ gap: 9px !important; }
html.chat2 .story{ width: 48px !important; }
html.chat2 .story-av{ width: 46px !important; height: 46px !important; font-size: 15px !important; }
html.chat2 .story-lbl{ font-size: 11px !important; }
html.chat2 .c2-altri{
  position: static; background: none; padding-left: 0; margin-left: 0;
}
html.chat2 .c2-altri-av{ font-size: 13.5px; }

/* =========================================================================
   19. I FILTRI CI DEVONO STARE, NON SCORRERE
   Misurato nella colonna da 390: la fila chiedeva 413 px e ne aveva 389.
   Ventiquattro in meno, e bastavano per far finire «Assistenti AI» sotto la
   stellina — che è il pezzo tagliato nella tua schermata.
   Il carattere passa da 14,4 a 13 px e il riempimento si stringe di un
   pelo: adesso i quattro filtri più la stellina stanno dentro con margine,
   e la fila non ha più bisogno di scorrere.
   ========================================================================= */
html.chat2 .conv-filters{ gap: 5px !important; }
html.chat2 .conv-filters .chip{
  font-size: 13px !important;
  padding: 6px 10px !important;
  letter-spacing: -.005em;
}
/* un po' di margine di sicurezza serve davvero: quando ci sono messaggi da
   leggere, «Non lette» si porta dietro il numero in grassetto e cresce. Con
   la fila al millimetro sarebbe tornata a scorrere proprio quando conta. */
html.chat2 .conv-filters .chip b{ font-size: 12.5px !important; }

/* LA RIGA DELLE CARTELLE, distinta a colpo d'occhio.
   Sotto «Tutte» dei filtri c'era un secondo «Tutte» — quello delle
   cartelle — e due parole uguali una sotto l'altra sembrano un errore.
   Una cartellina davanti alla fila dice di cosa si tratta senza aggiungere
   parole, e le pastiglie qui sono più piccole: è una riga secondaria e si
   deve vedere che lo è. */
html.chat2 #folders-bar .folder-chips::before{
  content: "";
  flex: 0 0 16px; width: 16px; height: 16px; margin-right: 2px;
  background: no-repeat center / 16px 16px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b736c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z'/%3E%3C/svg%3E");
  align-self: center;
}
html.chat2 .folder-chip{
  font-size: 12px !important;
  padding: 6px 11px !important;
  min-height: 30px;
}

/* le tre bolle fisse: si distinguono appena dalle altre — un anello chiaro
   dice «questa sta sempre qui», senza gridare */
html.chat2 .story.c2-sp .story-av{
  box-shadow: 0 0 0 2px rgba(255,255,255,.55), 0 2px 6px rgba(0,0,0,.18) !important;
  background-size: cover; background-position: center;
}
html.chat2 .story.c2-sp .story-lbl{ font-weight: 600; }

/* «Commerciale» e «Assistente» non stanno in 48 px: alle tre bolle fisse si
   dà uno spazio un po' più largo (il tondo resta uguale, centrato) e un
   carattere appena più piccolo. Meglio una fila con tre caselle un po' più
   larghe che tre parole tagliate a metà. */
html.chat2 .story.c2-sp{ width: 72px !important; }
html.chat2 .story.c2-sp .story-lbl{ font-size: 10px !important; letter-spacing: -.02em; }
html.chat2 .c2-sp-note .story-av{ background-size: cover !important; }