/* ── CHAT ─────────────────────────────────────────────────────
   Schermo intero: intestazione ferma in alto, campo di scrittura
   fermo in basso, e in mezzo l'unica cosa che scorre. I messaggi
   si accumulano verso l'alto e l'ultimo resta sempre a portata di
   pollice, senza dover scorrere.                                 */
/* Selettore con l'id davanti, altrimenti perde contro
   #app>* {position:relative} — e senza position:fixed il
   contenitore non si estende alla finestra: il campo di scrittura
   si accolla all'ultimo messaggio e sotto resta il vuoto. */
#app>.chatwrap,.chatwrap{position:fixed;inset:0;z-index:45;display:flex;flex-direction:column;
  background:var(--bg);height:100dvh}
#app.chatmode{padding:0;min-height:0}
#app.chatmode::before{display:none}
.inchat #tabbar{display:none}
.chat-head{flex:none;display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--b-weak);
  padding:calc(10px + env(safe-area-inset-top)) max(14px,calc(50% - 216px)) 10px;background:var(--s2)}
.chat-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:14px 14px 6px;
  max-width:460px;width:100%;margin:0 auto}
/* justify-content:flex-end da solo taglia l'inizio quando i
   messaggi superano l'altezza: questo lo evita. */
.chat-body>*{flex:none}
.chat-spacer{flex:1 1 auto;min-height:0}
.chat-foot{flex:none;display:flex;align-items:center;gap:8px;border-top:1px solid var(--b-weak);
  background:var(--s2);
  padding:9px max(12px,calc(50% - 218px)) calc(9px + env(safe-area-inset-bottom))}
.chat-foot .attach{width:38px;height:38px;flex:none;font-size:21px;color:var(--acc);border:1px solid var(--b-med);border-radius:12px}
.msgin{flex:1;min-width:0;background:var(--field);border:1px solid var(--b-input);border-radius:19px;
  height:38px;padding:0 15px;font-size:16px;color:var(--t1)}
.msgin::placeholder{color:var(--off)}
.chat-foot .send{width:38px;height:38px;flex:none;border-radius:50%;background:var(--grad);color:#fff;
  font-size:15px;display:flex;align-items:center;justify-content:center;box-shadow:var(--glow)}

/* Fumetti stretti al testo, come in una chat vera: niente riquadri
   larghi con dentro tre parole. */
.bubrow{display:flex}
.bubrow.me{justify-content:flex-end}
.bubrow.you{justify-content:flex-start}
.bub{position:relative;max-width:80%;border-radius:15px;padding:7px 11px;font-size:15px;line-height:1.35;
  cursor:pointer;word-break:break-word}
.bub.me{background:var(--grad);color:#fff;border-bottom-right-radius:5px}
.bub.you{background:var(--s1);color:var(--t2);border:1px solid var(--b-strong);border-bottom-left-radius:5px}
.bub.card-share{background:var(--s1);color:var(--t2);border:1px solid var(--b-strong);max-width:88%;padding:11px 12px 7px}
.bubt{display:block;font-family:var(--mono);font-size:9.5px;opacity:.6;text-align:right;margin-top:2px}
.bub.card-share .bubt{color:var(--dim3)}