/* LA VIGNETTA DEL LOCALE (11/11/2026) — il tondo in basso a destra, col colore
   del locale (`--loc-colore`), e sopra di lui il foglio della conversazione.
   Non copre la pagina e non la blocca: si legge il menu e si scrive insieme.
   Campi a 16px (sotto, l'iPhone ingrandisce). Prefisso `vgn-`. */
.vgn{ position:fixed; z-index:900; right:max(14px, env(safe-area-inset-right, 0px));
  bottom:calc(14px + env(safe-area-inset-bottom, 0px)); display:flex; flex-direction:column; align-items:flex-end; gap:10px;
  font-family:inherit; }
/* DUE FILI (11/11/2026): uno bianco dentro e uno del colore della pagina fuori,
   un pixel ciascuno: si stacca sia dalle foto scure sia dal fondo chiaro. */
.vgn-tondo{ display:flex; align-items:center; justify-content:center; width:58px; height:58px; border:1px solid #fff; border-radius:50%;
  background:var(--loc-colore, #0a3d62); color:#fff; cursor:pointer;
  box-shadow:0 0 0 1px var(--loc-colore, #0a3d62), 0 10px 24px -8px rgba(0,0,0,.5); }
.vgn-tondo svg{ width:28px; height:28px; }
.vgn-tondo:active{ transform:scale(.94); }

/* Alto quanto serve per nome e codice; grande quando si parla. */
.vgn-foglio{ width:min(360px, calc(100vw - 28px)); max-height:calc(100svh - 120px); display:flex; flex-direction:column;
  border-radius:20px; overflow:hidden; background:#fff; color:#161f27; border:1px solid #fff;
  box-shadow:0 0 0 1px var(--loc-colore, #0a3d62), 0 24px 60px -20px rgba(0,0,0,.55); }
.vgn-foglio[hidden]{ display:none; }
.vgn-parlando .vgn-foglio{ height:min(520px, calc(100svh - 120px)); }

.vgn-testa{ display:flex; align-items:center; gap:.6rem; padding:.85rem .9rem; background:var(--loc-colore, #0a3d62); color:#fff; }
.vgn-chi{ flex:1; min-width:0; display:grid; }
.vgn-chi b{ font-size:1.02rem; }
.vgn-chi small{ font-size:.78rem; opacity:.85; }
.vgn-x{ width:36px; height:36px; border:0; border-radius:50%; background:rgba(255,255,255,.18); color:#fff; font-size:1.4rem; line-height:1; cursor:pointer; }

.vgn-passo{ display:flex; flex-direction:column; gap:.6rem; padding:1rem; }
.vgn-passo[hidden]{ display:none; }
.vgn-detto{ margin:0; font-size:.9rem; line-height:1.45; color:#3a4450; }
.vgn-campo{ width:100%; padding:.7rem .8rem; border:1px solid rgba(16,32,48,.18); border-radius:12px; font:inherit; font-size:16px; color:#161f27; background:#fff; }
.vgn-cifre{ letter-spacing:.3em; text-align:center; font-weight:700; }
.vgn-vai{ min-height:46px; border:0; border-radius:999px; background:var(--loc-colore, #0a3d62); color:#fff; font:inherit; font-weight:800; cursor:pointer; }

.vgn-parla{ flex:1; min-height:0; padding:0; gap:0; }
.vgn-fili{ flex:1; min-height:0; overflow-y:auto; list-style:none; margin:0; padding:.9rem; display:flex; flex-direction:column; gap:.4rem;
  background:#f3f5f7; overscroll-behavior:contain; }
.vgn-bolla{ max-width:82%; padding:.5rem .75rem; border-radius:16px; font-size:.95rem; line-height:1.4; white-space:pre-wrap; overflow-wrap:anywhere; }
.vgn-mia{ align-self:flex-end; background:var(--loc-colore, #0a3d62); color:#fff; border-bottom-right-radius:4px; }
.vgn-sua{ align-self:flex-start; background:#fff; color:#161f27; border-bottom-left-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.vgn-vuoto{ margin:auto; max-width:85%; text-align:center; font-size:.88rem; color:#5f6b78; }
.vgn-scrivi{ display:flex; align-items:flex-end; gap:.5rem; padding:.6rem; border-top:1px solid rgba(16,32,48,.1); }
.vgn-testo{ resize:none; max-height:120px; }
.vgn-manda{ flex:none; width:44px; height:44px; border:0; border-radius:50%; background:var(--loc-colore, #0a3d62); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; }
.vgn-manda svg{ width:20px; height:20px; }
.vgn-errore{ margin:0; padding:.5rem 1rem .8rem; font-size:.86rem; color:#b03330; }
.vgn-errore[hidden]{ display:none; }

/* OPPURE WHATSAPP (11/11/2026): il verde di WhatsApp, sotto il nostro modo; e un
   tondo nella testa, a portata in ogni passo. */
.vgn-oppure{ display:flex; align-items:center; gap:.6rem; margin:.2rem 0 0; font-size:.8rem; color:#5f6b78; }
.vgn-oppure::before, .vgn-oppure::after{ content:''; flex:1; height:1px; background:rgba(16,32,48,.14); }
.vgn-oppure[hidden], .vgn-wa[hidden], .vgn-wa-tondo[hidden]{ display:none; }
.vgn-wa{ display:flex; align-items:center; justify-content:center; gap:.5rem; min-height:46px; border-radius:999px;
  background:#25d366; color:#fff; font-weight:800; text-decoration:none; }
.vgn-wa i{ font-size:1.2rem; }
.vgn-wa-tondo{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%;
  background:#25d366; color:#fff; font-size:1.15rem; text-decoration:none; }