/* stile.css — aggiunte specifiche del centralino (il resto è in kit.css) */

/* Il QR resta su bianco vero a prescindere dal tema: i lettori lo vogliono così.
   Sul fondo chiaro serve un bordo, se no il riquadro si confonde col pannello. */
.qr-box { text-align: center; padding: 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-s); }
.qr-box img { max-width: 260px; width: 100%; }
.qr-box pre { color: #111; font-size: .55rem; line-height: 1; text-align: left; overflow-x: auto; }

.link-uscita { display: block; word-break: break-all; font-size: .8rem; color: var(--accent);
  background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius-s); padding: .6rem .7rem; }

.consegna { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; color: var(--mut); }
.consegna + .consegna { margin-left: .5rem; }

.evento-testo { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; max-width: 380px; }

/* ---------- conversazioni ----------
   Elenco a sinistra, filo a destra: la forma che tutti hanno già in mano.
   I colori escono tutti dalle variabili di kit.css. Dal 24/09/2026 la suite è
   chiara: le velature delle bolle usano gli accenti scuri del kit
   (#1f5fd0, #c9302c), perché quelli pastello del vecchio tema scuro sul
   bianco quasi spariscono. */
.chat-split { display: grid; grid-template-columns: 320px 1fr; gap: 1.2rem; align-items: start; }
@media (max-width: 860px) { .chat-split { grid-template-columns: 1fr; } }

.chat-elenco { padding: .4rem; max-height: 70vh; overflow-y: auto; }
.chat-voce { display: block; width: 100%; text-align: left; border: 0; background: transparent;
  color: var(--ink); padding: .6rem .7rem; border-radius: var(--radius-s); }
.chat-voce:hover { background: var(--panel2); }
.chat-voce.attiva { background: var(--panel2); box-shadow: inset 3px 0 0 var(--accent); }
.chat-voce .capo { display: flex; align-items: center; gap: .5rem; }
.chat-voce .numero { font-weight: 600; font-size: .9rem; }
.chat-voce .quando { margin-left: auto; color: var(--mut2); font-size: .72rem; white-space: nowrap; }
.chat-voce .anteprima { color: var(--mut); font-size: .8rem; margin-top: .15rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-voce.nuova .numero { color: var(--ok); }   /* accent2 sul chiaro è 3.4:1: troppo poco per un testo */

/* Il pallino sul menù: il solo motivo per cui vale la pena aprire la pagina. */
.pallino { display: inline-flex; align-items: center; justify-content: center; min-width: 18px;
  height: 18px; padding: 0 .3rem; margin-left: .35rem; border-radius: 100px;
  background: var(--accent); color: #fff; font-size: .7rem; font-weight: 700; }

.chat-messaggi { display: flex; flex-direction: column; gap: .5rem; max-height: 56vh;
  overflow-y: auto; padding: .3rem; }
.bolla { max-width: 78%; padding: .5rem .75rem; border-radius: var(--radius-s); font-size: .9rem;
  white-space: pre-wrap; word-break: break-word; }
.bolla .quando { display: block; margin-top: .3rem; font-size: .68rem; color: var(--mut2); }
.bolla.in { align-self: flex-start; background: var(--panel2); border: 1px solid var(--line); }
.bolla.out { align-self: flex-end; background: rgba(31, 95, 208, .08); border: 1px solid rgba(31, 95, 208, .30); }
/* Un messaggio che NON è partito non deve somigliare a uno partito: qui il
   colore è l'unica cosa che impedisce di credere di aver scritto a qualcuno. */
.bolla.mancato { align-self: flex-end; background: rgba(201, 48, 44, .07); border: 1px dashed var(--err); }
.bolla .nota { display: block; margin-top: .3rem; font-size: .7rem; color: var(--warn); }
/* sulla velatura rossa l'ambra del kit scende a 4.4:1: la nota del mancato va in rosso pieno */
.bolla.mancato .nota { color: var(--err); }

.chat-risposta { display: flex; gap: .6rem; align-items: flex-end; margin-top: .9rem;
  border-top: 1px solid var(--line); padding-top: .9rem; }
.chat-risposta textarea { flex: 1; resize: vertical; min-height: 64px; }