/* =========================================================================
   TalkAcross — foglio di stile unico.
   Tema scuro; layout a due colonne su desktop, una schermata alla volta
   sul telefono. Le safe-area servono per l'uso come app in schermata Home.
   ========================================================================= */

:root {
  /* ---- Superfici ----
     Grigio neutro #222 scelto da Matteo come sfondo dell'app. Le altre
     superfici sono lo stesso grigio più chiaro o più scuro, non colori
     scelti a parte: così il gradino fra area messaggi, barre e menu resta
     leggibile senza che nessuna delle tre tiri verso una tinta diversa.
     Prima la famiglia era blu-ardesia, e un grigio neutro accanto a barre
     bluastre si sarebbe visto subito. */
  --bg:        #222222;   /* area messaggi: la superficie più estesa */
  --panel:     #1a1a1a;   /* barre: intestazione, schede, casella scrittura */
  --panel2:    #2c2c2c;   /* superfici sollevate: menu, modali */
  --line:      rgba(255,255,255,.09);

  --text:      #ededed;
  --muted:     #9b9b9b;

  --accent:    #5b7cfa;   /* marchio, azioni principali */
  --accent2:   #38bdf8;   /* stato attivo, link, sottolineature */

  /* ---- Fumetti ----
     Il ricevuto è grigio come il resto; l'inviato resta blu profondo, e non
     è una scelta estetica: è l'unico fondo su cui le spunte lette azzurre
     si distinguono da quelle consegnate (5,76:1 contro 1,85:1 del vecchio
     azzurro chiaro). */
  --bubble-th: #2f2f2f;   /* ricevuto */
  --bubble-me: #1d3a5e;   /* inviato  */
  --tick-read: #4fc3f7;   /* spunte lette */

  --green:     #3ddc97;
  --red:       #f0575c;
  --amber:     #f2b544;

  /* Altezza delle barre. Le due colonne hanno intestazioni e barre in basso
     indipendenti: finché l'altezza la decideva il contenuto, le righe di
     separazione non si incontravano a metà schermo (65 contro 63 in alto,
     58 contro 63 in basso). Qui si decide una volta sola. */
  --bar:       64px;

  --radius:    16px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Lo sfondo della pagina è quello delle barre, non quello generale.
   Motivo: su iPhone, con l'app aperta dall'icona in schermata Home, il
   sistema riserva le zone della status bar e del gesto Home e le dipinge
   con lo sfondo della pagina. Con il colore generale (quasi nero) restava
   una barra scura sopra e sotto, staccata dal resto. Le barre che
   confinano con quelle zone — intestazione, schede, casella di scrittura —
   sono tutte --panel, quindi con questo colore le fasce spariscono dentro
   la barra a cui sono attaccate. Il resto dell'app copre comunque tutto:
   questo sfondo si vede solo lì. */
html, body {
  height: 100%; background: var(--panel); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 15px; overflow: hidden; overscroll-behavior: none;
}
input, select, button, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }

/* Chi naviga da tastiera deve vedere dov'è.
   Prima qui c'era outline:none su tutti i campi e i pulsanti: comodo per il
   mouse, ma rendeva l'app inutilizzabile senza vedere lo schermo o senza
   mouse. :focus-visible risolve il motivo per cui era stato tolto — compare
   solo per tastiera, non al clic. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
  border-radius: 4px;
}
a { color: #9db6ff; }
[hidden] { display: none !important; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 4px; }

/* =========================== Elementi comuni ============================ */
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.center-text { text-align: center; }
.spacer { height: 40px; }
.error { color: #ff8b8f; font-size: 13px; background: rgba(229,72,77,.12);
  border: 1px solid rgba(229,72,77,.35); padding: 9px 12px; border-radius: 12px; }

.btn { padding: 12px 18px; border-radius: 13px; font-weight: 650; font-size: 15px;
  transition: transform .1s, filter .15s, background .15s; }
.btn:active { transform: scale(.98); }
.btn.primary { background: linear-gradient(115deg, var(--accent), var(--accent2)); color: #fff;
  box-shadow: 0 10px 26px rgba(91,124,250,.35); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: rgba(255,255,255,.07); border: 1px solid var(--line); }
.btn.danger { background: var(--red); color: #fff; }
.btn.block { display: block; width: 100%; }
.btn:disabled { opacity: .55; cursor: default; box-shadow: none; }
.btn.small-btn { padding: 9px 14px; font-size: 14px; border-radius: 11px; }
.link-btn { color: var(--accent2); font-size: 13px; font-weight: 600; }

.icon-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  color: var(--muted); flex-shrink: 0; transition: background .15s, color .15s; }
.icon-btn:hover { background: rgba(255,255,255,.08); color: var(--text); }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn.send { color: #fff; background: var(--accent); }
.icon-btn.send:hover { background: #6d8bff; color: #fff; }
.icon-btn.send svg { width: 20px; height: 20px; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > label { font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .7px; font-weight: 700; }
.field input, .field textarea, .select {
  width: 100%; padding: 12px 14px; border-radius: 13px; background: rgba(255,255,255,.05);
  border: 1px solid var(--line); transition: border-color .15s, box-shadow .15s; }
/* 16px preciso: sotto questa misura iOS ingrandisce da solo la pagina appena
   tocchi il campo, e resta ingrandita. È il motivo per cui prima lo zoom era
   disattivato del tutto; così invece si risolve senza togliere lo zoom a chi
   ne ha bisogno per leggere. */
.field input, .field textarea, .select,
#msgInput, .side-search input, .modal-input { font-size: 16px; }
.field input:focus, .select:focus { border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(91,124,250,.2); }
.field input::placeholder { color: #5c5c7d; }
.select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238f8fae' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; }
.select option { color: #111; }

/* Interruttori delle impostazioni */
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 2px; border-bottom: 1px solid var(--line); cursor: pointer; }
.toggle-row span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.toggle-row small { font-size: 12px; }
.switch { appearance: none; -webkit-appearance: none; width: 46px; height: 27px; flex-shrink: 0;
  border-radius: 14px; background: #33334a; position: relative; cursor: pointer;
  transition: background .18s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px;
  border-radius: 50%; background: #fff; transition: transform .18s; }
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(19px); }

.notice { background: rgba(91,124,250,.12); border: 1px solid rgba(91,124,250,.35);
  border-radius: 14px; padding: 13px; margin: 12px 0; display: flex;
  flex-direction: column; gap: 10px; align-items: flex-start; }

.list-title { font-size: 11px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--muted); margin: 26px 0 10px; font-weight: 700;
  padding-top: 18px; border-top: 1px solid var(--line); }
/* Il primo titolo non ha bisogno della riga di separazione sopra */
.view-body > .list-title:first-of-type { padding-top: 0; border-top: none; }
#friendsPanes .list-title { padding-top: 0; border-top: none; margin: 18px 0 6px; }

/* "sta scrivendo…" — in evidenza rispetto all'anteprima normale */
.typing { color: var(--accent2) !important; font-style: italic; }

/* Avatar */
.avatar { border-radius: 50%; object-fit: cover; display: block; flex-shrink: 0; background: var(--panel2); }
.avatar.fallback { display: grid; place-items: center; font-weight: 700; color: #fff; }

/* =============================== Schermate ============================== */
.screen { position: fixed; inset: 0; z-index: 40; overflow-y: auto;
  background: linear-gradient(165deg,#262626 0%, #1e1e1e 55%, #171717 100%); }
.screen.center { display: flex; align-items: center; justify-content: center; padding: 20px; }
.screen::before, .screen::after { content: ""; position: fixed; border-radius: 50%;
  filter: blur(90px); opacity: .4; pointer-events: none; }
.screen::before { width: 380px; height: 380px; background: var(--accent); top: -120px; left: -90px; }
.screen::after  { width: 320px; height: 320px; background: var(--accent2); bottom: -110px; right: -80px; }

.card { position: relative; z-index: 1; width: 100%; max-width: 400px;
  background: rgba(21,21,36,.72); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255,255,255,.1); border-radius: 24px; padding: 30px 26px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55); animation: cardIn .45s cubic-bezier(.2,.8,.2,1); }
@keyframes cardIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Schermata di avvio: si vede finché l'app non sa cosa mostrare */
.boot { position: relative; z-index: 1; display: flex; flex-direction: column;
  align-items: center; gap: 20px; text-align: center; max-width: 320px; }
.spinner { width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.14); border-top-color: var(--accent2);
  animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Chi ha chiesto meno animazioni al sistema (spesso per nausea o vertigini)
   non deve vedere fumetti che entrano, schede che scivolano, cerchi che
   pulsano. Restano le transizioni brevissime di colore, che non muovono
   nulla, e il giro dello spinner rallentato perché deve dire "sto lavorando". */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .spinner { animation-duration: 2s !important; animation-iteration-count: infinite !important; }
}

.brand { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 6px 0 20px; }
.brand h1 { font-size: 26px; font-weight: 800; letter-spacing: -.5px;
  background: linear-gradient(110deg,#a5b8ff,#7dd3fc); -webkit-background-clip: text;
  background-clip: text; -webkit-text-fill-color: transparent; }
.brand p { text-align: center; font-size: 13px; max-width: 280px; }
.logo { width: 56px; height: 56px; border-radius: 17px; display: grid; place-items: center;
  /* Stesso fondo dell'icona dell'app: dentro e fuori devono coincidere */
  background: #0d1219;
  border: 1px solid rgba(255,255,255,.12); box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.logo svg { width: 30px; height: 30px; color: #fff; }
.logo.big { width: 84px; height: 84px; border-radius: 26px; margin-bottom: 14px; }
.logo.big svg { width: 44px; height: 44px; }

/* Selettore Accedi / Registrati */
.segmented { display: flex; background: rgba(255,255,255,.05); border-radius: 13px;
  padding: 4px; margin-bottom: 20px; border: 1px solid var(--line); }
.seg { flex: 1; padding: 9px; border-radius: 10px; font-weight: 650; color: var(--muted);
  transition: background .18s, color .18s; }
.seg.active { background: rgba(255,255,255,.1); color: var(--text); }

/* ========================= Applicazione (griglia) ======================= */
/* minmax(0, 1fr) sull'altezza: senza, la riga della griglia si dimensiona sul
   contenuto e la colonna laterale diventa più alta della finestra, mandando
   il fondo (impostazioni, tasto Esci) fuori dallo schermo. */
.app { position: fixed; inset: 0; display: grid;
  grid-template-columns: 380px 1fr; grid-template-rows: minmax(0, 1fr); }

#sidebar { display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: var(--panel); border-right: 1px solid var(--line);
  padding-top: var(--safe-t); }

#sideHead { display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  min-height: var(--bar); border-bottom: 1px solid var(--line); flex-shrink: 0; }
#meBox { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.who b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who small { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.side-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* Intestazione di una vista (es. Profilo) con il tasto per tornare indietro */
.view-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px;
  border-bottom: 1px solid var(--line); flex-shrink: 0; }
.view-head b { font-size: 17px; font-weight: 700; }

/* Corpo scorrevole. Il fondo ha aria a sufficienza per non finire sotto la
   barra delle schede né sotto la zona gesti del telefono. */
.view-body { flex: 1; min-height: 0; overflow-y: auto;
  padding: 18px 16px calc(32px + var(--safe-b));
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

.side-search { position: relative; padding: 10px 12px; flex-shrink: 0; }
.side-search input { width: 100%; padding: 10px 12px 10px 38px; border-radius: 12px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.side-search input:focus { border-color: var(--accent); }
.s-ico { position: absolute; left: 24px; top: 50%; transform: translateY(-50%);
  color: var(--muted); display: flex; pointer-events: none; }
.s-ico svg { width: 17px; height: 17px; }

.list { overflow-y: auto; }
#viewFriends { overflow-y: auto; padding-bottom: 16px; }
#friendsPanes { padding: 0 12px; }

/* Riga di una chat o di un amico */
.row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; cursor: pointer;
  transition: background .12s; position: relative; }
.row:hover { background: rgba(255,255,255,.04); }
.row.active { background: rgba(91,124,250,.13); }
.row.active::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.row .body { flex: 1; min-width: 0; }
.row .top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.row .name { font-weight: 620; font-size: 15px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.row .when { font-size: 11.5px; color: var(--muted); flex-shrink: 0; }
.row .preview { font-size: 13.5px; color: var(--muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; margin-top: 2px; flex: 1; }
/* Spunta dell'ultimo messaggio, davanti all'anteprima */
.row .ticks { display: inline-flex; flex-shrink: 0; margin-top: 2px;
  color: var(--muted); opacity: .8; }
.row .ticks svg { width: 15px; height: 15px; stroke-width: 2.6; }
.row .ticks.read { opacity: 1; color: var(--tick-read); }
.row .actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

/* Azioni a icona nelle righe (elenco amici) */
.row-act { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  color: var(--muted); flex-shrink: 0; transition: background .15s, color .15s; }
.row-act svg { width: 19px; height: 19px; }
.row-act:hover { background: rgba(255,255,255,.08); color: var(--text); }
/* L'eliminazione si colora di rosso solo quando ci passi sopra: rossa
   sempre, in una lista di amici, urlerebbe senza motivo. */
.row-act.pericolo:hover { background: rgba(240,87,92,.15); color: var(--red); }

/* Stato dell'amico: verde se è online, altrimenti l'ultimo accesso in grigio */
.row .preview.stato { font-size: 12.5px; }
.row .preview.stato.online { color: var(--green); }
.pill { padding: 7px 13px; border-radius: 11px; font-size: 13px; font-weight: 650; }
.pill.ok  { background: var(--accent); color: #fff; }
.pill.no  { background: rgba(255,255,255,.09); }
.pill.dim { background: transparent; color: var(--muted); border: 1px solid var(--line); }

.avatar-wrap { position: relative; flex-shrink: 0; }
.dot-online { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px;
  border-radius: 50%; background: var(--green); border: 2.5px solid var(--panel); }

.badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 700;
  display: grid; place-items: center; flex-shrink: 0; }

.empty { flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: 6px; padding: 40px 24px; color: var(--muted); }
.empty.big p { max-width: 260px; }

/* Barra delle schede */
#tabbar { display: flex; align-items: center; border-top: 1px solid var(--line);
  flex-shrink: 0; min-height: calc(var(--bar) + var(--safe-b));
  padding-bottom: var(--safe-b); background: var(--panel); }
.tab { flex: 1; padding: 9px 4px 7px; display: flex; flex-direction: column; align-items: center;
  gap: 3px; color: var(--muted); position: relative; transition: color .15s; }
.tab small { font-size: 10.5px; font-weight: 600; }
.tab .ti { display: flex; }
.tab .ti svg { width: 22px; height: 22px; }
.tab.active { color: var(--accent2); }
.tab .badge { position: absolute; top: 4px; right: 50%; margin-right: -22px; }

/* ============================= Area chat ================================ */
#chatPane { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg);
  background-image: radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 22px 22px; }
#chatBox { display: flex; flex-direction: column; height: 100%; min-height: 0; }

#chatHead { display: flex; align-items: center; gap: 11px; padding: 8px 14px;
  padding-top: calc(8px + var(--safe-t)); background: var(--panel);
  min-height: calc(var(--bar) + var(--safe-t));
  border-bottom: 1px solid var(--line); flex-shrink: 0; }
#chatHead .who { flex: 1; }
#chatHead .who b { font-size: 16px; }

#messages { flex: 1; overflow-y: auto; padding: 16px 14px 8px;
  display: flex; flex-direction: column; gap: 3px; overscroll-behavior: contain; }
/* Con pochi messaggi restano appoggiati in basso, come in Telegram, senza
   rompere lo scorrimento quando invece sono tanti. */
#messages::before { content: ""; margin-top: auto; }

.day-sep { align-self: center; margin: 16px 0 10px; padding: 4px 13px; border-radius: 11px;
  background: rgba(255,255,255,.06); font-size: 11.5px; color: var(--muted); font-weight: 600; }

/* Fumetti.
   La larghezza massima sta sulla riga (.msg-row), non qui: il fumetto vive
   dentro la riga, quindi una percentuale scritta su di lui si calcolerebbe
   sulla riga stessa — che è larga quanto il fumetto. Il risultato era che
   con un contenuto di misura fissa (il videomessaggio circolare) il fumetto
   restava più stretto del suo contenuto e il cerchio ne usciva fuori. */
.bubble { max-width: 100%; padding: 7px 12px 6px; border-radius: 17px;
  position: relative; word-wrap: break-word; overflow-wrap: anywhere; line-height: 1.42;
  animation: bubbleIn .22s ease-out; }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.bubble.them { align-self: flex-start; background: var(--bubble-th); border-bottom-left-radius: 6px; }
.bubble.me   { align-self: flex-end;   background: var(--bubble-me); border-bottom-right-radius: 5px; }
.bubble + .bubble { margin-top: 2px; }
.bubble .text { white-space: pre-wrap; }
.bubble .meta { display: flex; align-items: center; gap: 5px; justify-content: flex-end;
  font-size: 10.5px; margin-top: 2px; }
/* L'opacità sta sui singoli pezzi, non sulla riga: così le spunte del
   messaggio letto restano vive invece di uscire slavate. Sul fumetto
   azzurro serve più opacità che su quello scuro, altrimenti l'orario
   scende sotto il minimo leggibile. */
.bubble .meta .when, .bubble .meta .edited { opacity: .72; }
.bubble.me .meta .when, .bubble.me .meta .edited { opacity: .78; }
.bubble .meta .edited { font-style: italic; }
.bubble .meta .ticks { display: inline-flex; margin-left: 1px; opacity: .75; }
.bubble.me .meta .ticks { opacity: .8; }
.bubble .meta .ticks svg { width: 15px; height: 15px; stroke-width: 2.6; }
.bubble .meta .ticks.read { opacity: 1; color: var(--tick-read); }
/* Azzurro chiaro invece che acceso: sul fondo del fumetto quello acceso
   scendeva a 1,85:1, praticamente invisibile. */
.bubble.me .meta .ticks.read { color: var(--tick-read); }
.bubble .orig { display: block; margin-top: 5px; padding-top: 5px; font-size: 12.5px;
  opacity: .72; font-style: italic; border-top: 1px solid rgba(255,255,255,.14); }
.bubble .tr-tag { font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
  opacity: .6; cursor: pointer; }
.bubble .tr-tag:hover { opacity: 1; text-decoration: underline; }
.bubble.pending { opacity: .55; }
.bubble.deleted .text { font-style: italic; opacity: .6; }

/* Allegati dentro i fumetti */
.bubble .att-img, .bubble .att-vid { display: block; max-width: 100%; width: 260px;
  border-radius: 12px; margin: 2px 0 4px; cursor: pointer; background: #000; }
.bubble .att-file { display: flex; align-items: center; gap: 10px; padding: 8px 4px;
  text-decoration: none; color: inherit; }
.bubble .att-file .fi { width: 40px; height: 40px; border-radius: 11px; display: grid;
  place-items: center; background: rgba(255,255,255,.16); flex-shrink: 0; }
.bubble .att-file .fi svg { width: 20px; height: 20px; }
.bubble .att-file .fn { min-width: 0; display: flex; flex-direction: column; }
.bubble .att-file b { font-size: 14px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 200px; }
.bubble .att-file small { font-size: 11.5px; opacity: .65; }

/* --- Riga del messaggio: fumetto + icona "traduci" a fianco --- */
/* La riga è figlia diretta di #messages: qui la percentuale si calcola
   davvero sulla larghezza dell'area messaggi, come serve. */
.msg-row { display: flex; align-items: flex-end; gap: 6px; max-width: min(660px, 82%); }
.msg-row.them { align-self: flex-start; }
.msg-row.me   { align-self: flex-end; flex-direction: row-reverse; }
.msg-row .bubble { align-self: auto; }

.msg-translate { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; color: var(--muted); opacity: .5;
  transition: opacity .15s, color .15s, background .15s; margin-bottom: 3px; }
.msg-translate svg { width: 16px; height: 16px; }
.msg-translate:hover { opacity: 1; background: rgba(255,255,255,.08); }
.msg-translate.on { opacity: 1; color: var(--accent2); background: rgba(56,189,248,.15); }
.msg-translate.loading { animation: spin .8s linear infinite; opacity: 1; }
/* Col dito il bersaglio deve essere grande 44px, ma il tondino disegnato
   deve restare piccolo: allargo l'area sensibile oltre il bordo visibile
   invece di ingrassare l'icona. */
@media (pointer: coarse) {
  .msg-translate { opacity: .8; position: relative; }
  .msg-translate::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
}

/* Messaggio citato dentro il fumetto della risposta */
.bubble .quote { display: flex; flex-direction: column; gap: 1px; cursor: pointer;
  margin-bottom: 5px; padding: 5px 9px; border-radius: 9px;
  border-left: 3px solid var(--accent2);
  background: rgba(255,255,255,.09); max-width: 100%; }
.bubble.them .quote { border-left-color: var(--accent); }
.bubble .quote:hover { background: rgba(0,0,0,.32); }
.bubble .quote-who { font-size: 12px; font-weight: 650; opacity: .95; }
.bubble .quote-text { font-size: 13px; opacity: .82; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }

/* Lampeggio del messaggio raggiunto toccando una citazione */
.bubble.evidenzia { animation: evidenzia 1.4s ease-out; }
@keyframes evidenzia {
  0%, 60% { box-shadow: 0 0 0 3px rgba(91,124,250,.65); }
  100%    { box-shadow: 0 0 0 3px rgba(91,124,250,0); }
}

/* Provenienza di un messaggio salvato */
.bubble .fwd { display: flex; align-items: center; gap: 5px; font-size: 11.5px;
  opacity: .75; margin-bottom: 4px; padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,.13); }
.bubble .fwd svg { width: 12px; height: 12px; flex-shrink: 0; }

/* Menu che compare sul messaggio (tasto destro / tocco prolungato) */
.msg-menu { position: fixed; z-index: 96; background: var(--panel2);
  border: 1px solid var(--line); border-radius: 14px; padding: 6px;
  box-shadow: 0 16px 44px rgba(0,0,0,.65); min-width: 210px;
  animation: cardIn .14s ease-out; }
.msg-menu button { display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 12px; border-radius: 10px; text-align: left; font-size: 14.5px; }
.msg-menu button:hover { background: rgba(255,255,255,.08); }
.msg-menu button.pericolo { color: #ff8b8f; }
.msg-menu svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .85; }

/* Tasto scarica sopra foto e video */
.att-wrap { position: relative; display: inline-block; max-width: 100%; }
.att-dl { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px;
  border-radius: 50%; background: rgba(0,0,0,.55); backdrop-filter: blur(6px);
  color: #fff; display: grid; place-items: center; opacity: 0; transition: opacity .15s; }
.att-wrap:hover .att-dl, .att-audio:hover .att-dl { opacity: 1; }
@media (pointer: coarse) {
  .att-dl { opacity: .85; }
  /* Stessa cosa per il tasto scarica e la X della citazione: area sensibile
     a 44px, cerchio disegnato invariato. */
  .att-dl, #replyCancel, .row-act { position: relative; }
  .att-dl::after, #replyCancel::after, .row-act::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
}
.att-dl svg { width: 17px; height: 17px; }

/* Messaggio vocale */
.att-audio { position: relative; display: flex; align-items: center; gap: 8px;
  padding: 2px 0 4px; }
.att-audio > svg { width: 18px; height: 18px; opacity: .8; flex-shrink: 0; }
.att-audio audio { width: 230px; max-width: 52vw; height: 36px; }
.att-audio .att-dl { position: static; opacity: .6; width: 28px; height: 28px;
  background: rgba(255,255,255,.12); }

/* Videomessaggio circolare */
/* Resta rotondo a qualsiasi misura: se il fumetto è stretto si rimpicciolisce
   invece di uscirne fuori (l'aspetto quadrato lo tiene l'aspect-ratio). */
.vnote { position: relative; width: 220px; max-width: 100%; aspect-ratio: 1;
  border-radius: 50%; overflow: hidden; cursor: pointer;
  background: #000; margin: 2px 0 4px; border: 2px solid rgba(255,255,255,.15); }
.vnote video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vnote-play { position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(0,0,0,.3); transition: opacity .2s; }
.vnote-play svg { width: 46px; height: 46px; color: #fff; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.vnote.playing .vnote-play { opacity: 0; pointer-events: none; }

/* Senza fumetto dietro: resta il solo cerchio, con orario e spunte sotto */
.bubble.vnote-msg { background: none; padding: 0; }
.bubble.vnote-msg .vnote { margin: 0; }
.bubble.vnote-msg .meta { margin-top: 5px; padding: 0 2px; }
.msg-row.them .bubble.vnote-msg .meta { justify-content: flex-start; }

/* Messaggio di sistema (chiamate) */
.sys { align-self: center; background: rgba(0,0,0,.35); color: var(--muted);
  padding: 6px 14px; border-radius: 13px; font-size: 12.5px; margin: 6px 0;
  display: flex; align-items: center; gap: 7px; }
.sys svg { width: 14px; height: 14px; }

/* Barra di caricamento allegato */
#uploadBar { position: relative; height: 26px; background: var(--panel);
  border-top: 1px solid var(--line); display: flex; align-items: center;
  padding: 0 14px; font-size: 12px; color: var(--muted); flex-shrink: 0; }
#uploadFill { position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: rgba(91,124,250,.28); transition: width .2s; }
#uploadText { position: relative; }

/* Barra della citazione, sopra quella di scrittura */
#replyBar { display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding: 8px 14px; background: var(--panel); border-top: 1px solid var(--line); }
#replyBar .reply-mark { display: flex; color: var(--accent2); flex-shrink: 0; }
#replyBar .reply-mark svg { width: 18px; height: 18px; }
#replyBar .reply-body { flex: 1; min-width: 0; display: flex; flex-direction: column;
  border-left: 3px solid var(--accent2); padding-left: 9px; line-height: 1.3; }
#replyBar .reply-who { font-size: 12.5px; font-weight: 650; color: var(--accent2); }
#replyBar .reply-text { font-size: 13px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#replyCancel { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; color: var(--muted); }
#replyCancel:hover { background: rgba(255,255,255,.08); color: var(--text); }
#replyCancel svg { width: 17px; height: 17px; }

/* Barra di scrittura */
/* 9 sopra e 10 sotto, non 10 e 10: la casella è alta 44 e il bordo
   superiore ne aggiunge 1, quindi con 10+10 la barra veniva 65 contro i 64
   di quella delle schede e le due righe di separazione non combaciavano. */
#composer { display: flex; align-items: flex-end; gap: 8px; padding: 9px 12px;
  padding-bottom: calc(10px + var(--safe-b)); background: var(--panel);
  min-height: calc(var(--bar) + var(--safe-b));
  border-top: 1px solid var(--line); flex-shrink: 0; position: relative; }
/* Altezza di partenza fissa, non "quanto serve al contenuto": è lei a
   decidere l'altezza della barra di scrittura, e se cambia di un pixel la
   riga di separazione non combacia più con quella della barra a fianco.
   Cresce comunque scrivendo, fin dove lo consente max-height. */
/* Il campo e il tasto emoji al suo interno: il tasto è appoggiato in basso
   a destra, così resta al suo posto anche quando il campo cresce su più
   righe. Il padding destro del testo gli lascia il posto. */
#msgWrap { flex: 1; min-width: 0; position: relative; display: flex; }
#msgInput { flex: 1; height: 44px; max-height: 130px; padding: 10px 46px 10px 14px;
  border-radius: 20px; background: rgba(255,255,255,.06);
  border: 1px solid var(--line); resize: none; line-height: 1.4; }
#btnEmoji { position: absolute; right: 5px; bottom: 4px; width: 36px; height: 36px;
  border-radius: 50%; display: grid; place-items: center; color: var(--muted);
  transition: background .15s, color .15s; }
#btnEmoji svg { width: 21px; height: 21px; }
#btnEmoji:hover { background: rgba(255,255,255,.08); color: var(--text); }
#btnEmoji.on { color: var(--accent2); background: rgba(56,189,248,.15); }
/* Niente barra di scorrimento nella casella di scrittura.
   Le regole generali su ::-webkit-scrollbar danno a ogni elemento
   scorrevole una barra "classica", che occupa spazio invece di
   sovrapporsi: dentro una casella alta 44px diventava una striscia chiara
   appiccicata al bordo destro, visibile anche senza testo da scorrere.
   Il testo resta raggiungibile: la casella cresce da sola fino a 130px e
   oltre quella misura il cursore si porta dietro la vista. */
#msgInput, .modal-input { scrollbar-width: none; }
#msgInput::-webkit-scrollbar, .modal-input::-webkit-scrollbar { width: 0; height: 0; }
#msgInput:focus { border-color: var(--accent); }

/* Tasto unico vocale/videomessaggio: mentre lo tieni premuto si colora e
   cresce, così si vede che sta per partire qualcosa. */
#btnRec { transition: background .15s, color .15s, transform .2s; }
#btnRec.pronto { color: var(--red); background: rgba(240,87,92,.16); transform: scale(1.12); }

/* ---- Pannello emoji e GIF ----
   Appoggiato sopra la barra di scrittura, non dentro: così può essere alto
   quanto serve senza spostare la barra né la conversazione. */
.emoji-pan { position: absolute; left: 8px; right: 8px; bottom: calc(100% - 1px);
  height: 380px; max-height: 58vh; display: flex; flex-direction: column;
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: 16px 16px 0 0; overflow: hidden; z-index: 30;
  box-shadow: 0 -14px 40px rgba(0,0,0,.5); animation: cardIn .16s ease-out; }
@media (min-width: 821px) { .emoji-pan { left: auto; right: 12px; width: 360px; } }

.emoji-tabs { display: flex; flex-shrink: 0; border-bottom: 1px solid var(--line); }
.emoji-tabs button { flex: 1; padding: 11px 8px; font-size: 13.5px; font-weight: 650;
  color: var(--muted); border-bottom: 2px solid transparent; transition: color .15s; }
.emoji-tabs button.on { color: var(--accent2); border-bottom-color: var(--accent2); }

.emoji-corpo { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.emoji-gruppi { display: flex; gap: 2px; padding: 6px 8px; flex-shrink: 0;
  border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.emoji-gruppi::-webkit-scrollbar { height: 0; }
.emoji-gruppi button { width: 34px; height: 32px; border-radius: 9px; font-size: 18px;
  flex-shrink: 0; opacity: .55; transition: opacity .15s, background .15s; }
.emoji-gruppi button.on { opacity: 1; background: rgba(255,255,255,.08); }

.emoji-griglia { flex: 1; min-height: 0; overflow-y: auto; padding: 6px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); }
.emoji-griglia button { height: 40px; border-radius: 9px; font-size: 24px; line-height: 1;
  transition: background .12s; }
.emoji-griglia button:hover { background: rgba(255,255,255,.1); }

.gif-cerca { padding: 8px; flex-shrink: 0; }
.gif-cerca input { width: 100%; padding: 9px 13px; border-radius: 12px; font-size: 16px;
  background: rgba(255,255,255,.06); border: 1px solid var(--line); }
/* L'altezza delle righe è scritta a mano, non dedotta dal contenuto.
   Due motivi, scoperti misurando:
   1. le colonne sono "1fr", quindi la loro larghezza non è ancora nota quando
      la griglia calcola le righe: un aspect-ratio sulla cella non si può
      risolvere e viene ignorato;
   2. la cella ha overflow:hidden per ritagliare la GIF, e questo azzera il
      contributo di altezza che darebbe alla riga.
   Risultato: righe alte 16px con dentro celle da 123px, cioè otto GIF
   sovrapposte l'una sull'altra. Con un'altezza esplicita il conto torna. */
.gif-griglia { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 8px;
  display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 124px;
  gap: 6px; align-content: start; }
.gif-griglia button { border-radius: 10px; overflow: hidden; height: 100%;
  background: rgba(255,255,255,.05); }
.gif-griglia img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gif-griglia button.caricando { opacity: .45; }
.gif-avviso { grid-column: 1 / -1; padding: 22px 14px; text-align: center;
  color: var(--muted); font-size: 13.5px; line-height: 1.5; }

/* Barra di registrazione del messaggio vocale (copre la barra di scrittura) */
#composer.recording > *:not(.rec-bar) { visibility: hidden; }
.rec-bar { position: absolute; inset: 0; display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; padding-bottom: calc(9px + var(--safe-b)); background: var(--panel); }
.rec-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--red);
  flex-shrink: 0; animation: pulseRec 1.1s ease-in-out infinite; }
@keyframes pulseRec { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.rec-time { font-variant-numeric: tabular-nums; font-weight: 650; min-width: 46px; }
.rec-hint { flex: 1; color: var(--muted); font-size: 13.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-bar button { width: 40px; height: 40px; border-radius: 50%; display: grid;
  place-items: center; flex-shrink: 0; }
.rec-bar svg { width: 20px; height: 20px; }
.rec-cancel { color: #ff8b8f; background: rgba(229,72,77,.14); }
.rec-send { color: #fff; background: linear-gradient(115deg, var(--accent), var(--accent2)); }

/* Registrazione del videomessaggio circolare */
.vnote-overlay { position: fixed; inset: 0; z-index: 88; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 24px; background: rgba(6,6,12,.94); backdrop-filter: blur(14px); }
.vnote-ring { position: relative; width: min(290px, 74vw); aspect-ratio: 1; }
.vnote-preview { width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  background: #000; transform: scaleX(-1); }   /* a specchio, come allo specchio */
.vnote-progress { position: absolute; inset: -6px; transform: rotate(-90deg); }
.vnote-progress circle { fill: none; stroke: var(--red); stroke-width: 3;
  stroke-linecap: round; transition: stroke-dashoffset .1s linear; }
.vnote-time { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vnote-hint { text-align: center; font-size: 13.5px; }
.vnote-actions { display: flex; gap: 30px; margin-top: 6px; }
/* Selettore più specifico: altrimenti vince il colore neutro di .ctrl,
   che nel foglio di stile viene definito più avanti */
.vnote-actions .vnote-rec { background: var(--red); }
.vnote-actions .vnote-rec::after { content: ""; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; }
.vnote-actions .vnote-send { background: linear-gradient(115deg, var(--accent), var(--accent2)); }
.vnote-actions .vnote-cancel { background: rgba(255,255,255,.14); }
.vnote-overlay.rec .vnote-preview { border: 3px solid var(--red); }

/* Menu della conversazione (in alto a destra) */
#chatMenu { position: absolute; top: calc(100% - 4px); right: 10px; z-index: 6;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 14px;
  padding: 6px; box-shadow: 0 14px 40px rgba(0,0,0,.6); min-width: 210px; }
#chatMenu button { display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 12px; border-radius: 10px; text-align: left; font-size: 14.5px; }
#chatMenu button:hover { background: rgba(255,255,255,.08); }
#chatMenu svg { width: 17px; height: 17px; opacity: .85; }
#chatHead { position: relative; }

/* Avatar della chat "Messaggi salvati" */
.avatar.fallback.saved { background: linear-gradient(135deg, var(--accent), var(--accent2)); }
.avatar.fallback.saved svg { width: 55%; height: 55%; color: #fff; }

#attachMenu { position: absolute; bottom: calc(100% + 8px); left: 12px; z-index: 5;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 15px;
  padding: 6px; box-shadow: 0 14px 40px rgba(0,0,0,.6); min-width: 178px; }
#attachMenu button { display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 12px; border-radius: 11px; text-align: left; }
#attachMenu button:hover { background: rgba(255,255,255,.07); }
#attachMenu svg { width: 19px; height: 19px; color: var(--accent2); }

/* ========================== Chiamata a schermo intero =================== */
#callOverlay { position: fixed; inset: 0; z-index: 60; background: #000; }
#remoteVideo { width: 100%; height: 100%; object-fit: cover; background: #000; }
#localVideo { position: absolute; top: calc(16px + var(--safe-t)); right: 16px;
  width: 108px; height: 148px; object-fit: cover; border-radius: 14px;
  border: 2px solid rgba(255,255,255,.25); box-shadow: 0 6px 20px rgba(0,0,0,.5);
  z-index: 5; background: #111; transform: scaleX(-1); }  /* anteprima a specchio */
#callOverlay.audio #remoteVideo, #callOverlay.audio #localVideo { display: none; }
#callAvatarBig { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; z-index: 2;
  background: linear-gradient(160deg,#242424,#1b1b1b); }
#callAvatarBig b { font-size: 24px; font-weight: 700; }

#callStatusBar { position: absolute; top: calc(16px + var(--safe-t)); left: 16px; z-index: 6;
  display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 13px;
  background: rgba(0,0,0,.5); backdrop-filter: blur(8px); border-radius: 20px; }
#callDot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
#callDot.on { background: var(--green); }
#callTimer { font-variant-numeric: tabular-nums; font-weight: 600; }
#callTimer::before { content: "·"; margin: 0 7px; opacity: .5; }

#callInfo { position: absolute; top: calc(16px + var(--safe-t)); left: 50%;
  transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 12px;
  padding: 7px 16px; max-width: 62vw; background: rgba(0,0,0,.5);
  backdrop-filter: blur(8px); border-radius: 22px; }
#callInfo .party { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
#callInfo .party b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#callInfo .party span { font-size: 11px; opacity: .65; }
#callInfo .party.right { text-align: right; }
#callInfo .swap { opacity: .5; display: flex; flex-shrink: 0; }
#callInfo .swap svg { width: 16px; height: 16px; }
.langsel { appearance: none; -webkit-appearance: none; border: none; cursor: pointer;
  background: transparent; color: #9db6ff; font-size: 11px; font-weight: 600;
  padding: 0 13px 0 0; max-width: 120px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239db6ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right center; }
.langsel option { color: #111; }

#captions { position: absolute; left: 0; right: 0; bottom: calc(100px + var(--safe-b));
  padding: 0 18px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  z-index: 6; pointer-events: none; }
.caption { max-width: 92%; padding: 10px 16px; border-radius: 16px; background: rgba(0,0,0,.62);
  backdrop-filter: blur(8px); font-size: 20px; line-height: 1.35; text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.caption .who-tag { font-weight: 700; margin-right: 8px; color: #ffd9a8; }
.caption .orig { display: block; font-size: 13px; color: #b8b8d0; margin-top: 3px; font-style: italic; }

#callControls { position: absolute; bottom: calc(22px + var(--safe-b)); left: 0; right: 0;
  z-index: 7; display: flex; justify-content: center; gap: 13px; flex-wrap: wrap; }
.ctrl { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.14);
  backdrop-filter: blur(8px); display: grid; place-items: center; color: #fff;
  transition: background .15s, transform .1s; }
.ctrl:hover { background: rgba(255,255,255,.22); }
.ctrl:active { transform: scale(.92); }
.ctrl svg { width: 24px; height: 24px; }
.ctrl.off { background: var(--red); }
.ctrl.hang { background: var(--red); }
.ctrl.hang:hover { background: #f26065; }
.ctrl.answer { background: var(--green); }
.ctrl.answer:hover { background: #4ae08d; }

/* Pannello chat durante la chiamata */
#callPanel { position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 86vw);
  background: rgba(14,14,24,.94); backdrop-filter: blur(12px); z-index: 8;
  display: flex; flex-direction: column; transform: translateX(100%);
  transition: transform .25s ease; border-left: 1px solid var(--line);
  padding-top: var(--safe-t); }
#callPanel.open { transform: none; }
#callPanelHead { padding: 14px 16px; font-weight: 650; display: flex;
  justify-content: space-between; border-bottom: 1px solid var(--line); }
#callPanelClose { cursor: pointer; opacity: .7; }
#callLog { flex: 1; overflow-y: auto; padding: 14px; display: flex;
  flex-direction: column; gap: 8px; }
#callLog .bubble { max-width: 92%; font-size: 14.5px; }

/* ========================== Chiamata in arrivo ========================== */
#incomingCall { position: fixed; inset: 0; z-index: 70; display: flex;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(6,6,12,.9); backdrop-filter: blur(16px); }
.ring-card { display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; animation: cardIn .3s ease-out; }
.ring-card b { font-size: 23px; font-weight: 700; margin-top: 6px; }
.ring-card .avatar { animation: pulse 1.7s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(91,124,250,.55); }
                   50%     { box-shadow: 0 0 0 22px rgba(91,124,250,0); } }
.ring-actions { display: flex; gap: 46px; margin-top: 34px; }
.ring-actions .ctrl { width: 66px; height: 66px; }
.ring-actions .ctrl svg { width: 28px; height: 28px; }

/* ================================ Extra ================================= */
#toast { position: fixed; left: 50%; bottom: calc(90px + var(--safe-b));
  transform: translate(-50%, 20px); background: rgba(0,0,0,.88); color: #fff;
  padding: 11px 18px; border-radius: 13px; font-size: 14px; z-index: 90;
  max-width: 90vw; text-align: center; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; border: 1px solid var(--line); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

.modal-back { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center;
  justify-content: center; padding: 24px; background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px); }
.modal { background: var(--panel2); border: 1px solid var(--line); border-radius: 20px;
  padding: 24px; max-width: 340px; width: 100%; animation: cardIn .22s ease-out; }
.modal-msg { line-height: 1.5; margin-bottom: 20px; }
.modal-input { width: 100%; margin-bottom: 18px; padding: 11px 13px; border-radius: 13px;
  background: var(--panel); border: 1px solid var(--line); color: inherit;
  font: inherit; font-size: 15px; line-height: 1.45; resize: vertical;
  min-height: 76px; max-height: 40vh; }
.modal-input:focus { outline: none; border-color: var(--accent2); }
.modal-actions { display: flex; gap: 10px; }
.modal-actions .btn { flex: 1; }

#lightbox { position: fixed; inset: 0; z-index: 92; background: rgba(0,0,0,.94);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
#lbClose { position: absolute; top: calc(16px + var(--safe-t)); right: 20px;
  font-size: 26px; cursor: pointer; opacity: .8; }
#lbBody img, #lbBody video { max-width: 96vw; max-height: 88vh; border-radius: 10px; }

.username-box { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-radius: 13px; background: rgba(255,255,255,.05);
  border: 1px solid var(--line); }
.username-box span { font-weight: 650; }

.profile-head { display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin-bottom: 22px; }
.avatar-btn { position: relative; border-radius: 50%; }
.avatar-btn .avatar { width: 92px; height: 92px; font-size: 34px; }
.avatar-btn::after { content: ""; position: absolute; right: 2px; bottom: 2px;
  width: 28px; height: 28px; border-radius: 50%; background: var(--accent);
  border: 3px solid var(--panel);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; }

.only-mobile { display: none; }

/* ============================== Telefono ================================ */
@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  /* Una schermata alla volta: la chat copre la lista quando è aperta */
  #chatPane { position: fixed; inset: 0; z-index: 20; transform: translateX(100%);
    transition: transform .25s ease; }
  .app.show-chat #chatPane { transform: none; }
  .app.show-chat #sidebar { visibility: hidden; }
  #noChat { display: none; }
  .only-mobile { display: grid; }
  .msg-row { max-width: 90%; }
  #sidebar { border-right: none; }
  #toast { bottom: calc(120px + var(--safe-b)); }
}

@media (min-width: 821px) {
  /* Su desktop la barra schede resta in basso ma più compatta */
  #tabbar { padding-bottom: 4px; }
}