/* Tipty — assistenza. Si appoggia a stile.css: stessi colori, stessi riquadri. */

.lang a{font-size:13px;font-weight:600;padding:5px 12px;border-radius:999px;text-decoration:none;
  border:1px solid var(--border);background:var(--surface);color:var(--muted)}
.lang a[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}

/* ── Moduli ──────────────────────────────────────────────────────────────── */
.modulo{margin:14px 0 8px}
.campo{margin:0 0 18px}
.campo label{display:block;font-weight:700;margin:0 0 6px}
textarea,input[type="text"]{display:block;width:100%;font:inherit;color:var(--ink);background:var(--surface);
  border:1px solid var(--border);border-radius:10px;padding:11px 13px}
textarea{resize:vertical;min-height:120px;line-height:1.5}
input[type="text"]{max-width:26em;letter-spacing:.04em}
input[type="file"]{display:block;font:inherit;font-size:14px;color:var(--muted);max-width:100%}
textarea:focus-visible,input:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.aiuto{display:block;color:var(--muted);font-size:14px;margin-top:6px}
.aiuto.attenzione{color:var(--ink)}
/* Il campo-trappola: fuori dallo schermo, non "nascosto" (i robot lo fiutano). */
.trappola{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.bottone{font:inherit;font-weight:700;padding:10px 22px;border-radius:999px;cursor:pointer;
  border:1px solid var(--accent);background:var(--accent);color:#fff}
.bottone-secondo{background:var(--surface);color:var(--ink);border-color:var(--border)}
.bottone-pericolo{background:var(--surface);color:#c0392b;border-color:#c0392b}
.piccolo{font:inherit;font-size:13px;font-weight:600;padding:4px 12px;border-radius:999px;cursor:pointer;
  border:1px solid var(--border);background:var(--surface);color:var(--ink);text-decoration:none;display:inline-block}

/* ── Avvisi ──────────────────────────────────────────────────────────────── */
.avviso{border-radius:12px;padding:14px 18px;margin:18px 0;border:1px solid var(--border);background:var(--surface)}
.avviso p{margin:0}
.avviso-errore{border-left:3px solid #c0392b}
.avviso-ok{border-left:3px solid var(--good)}
.nota{color:var(--muted);font-size:14.5px}
.torna-su{margin:22px 0 0;font-size:14px;font-weight:600}
.torna-su a{text-decoration:none}
.torna-su + h1{margin-top:8px}

/* ── Numero e chiave ─────────────────────────────────────────────────────── */
.credenziali .etichetta{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin:14px 0 2px}
.credenziali .etichetta:first-child{margin-top:0}
.credenziali .valore{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0}
.credenziali code{font-size:clamp(18px,4.4vw,24px);font-weight:700;letter-spacing:.05em;padding:4px 10px;
  background:var(--bg)}
.credenziali code.lungo{font-size:13px;font-weight:400;letter-spacing:0;overflow-wrap:anywhere}

/* ── Conversazione ───────────────────────────────────────────────────────── */
.stato{display:inline-block;font-size:12.5px;font-weight:700;padding:2px 11px;border-radius:999px;
  border:1px solid var(--border);background:var(--surface);color:var(--muted);vertical-align:middle}
.stato-attesa{color:var(--accent);border-color:var(--accent)}
.stato-risposto{color:var(--good);border-color:var(--good)}
.conversazione{list-style:none;padding:0;margin:22px 0;display:flex;flex-direction:column;gap:14px}
.msg{border:1px solid var(--border);border-radius:14px;padding:14px 18px;background:var(--surface);max-width:92%}
.msg-utente{align-self:flex-end;border-bottom-right-radius:4px}
.msg-supporto{align-self:flex-start;border-bottom-left-radius:4px;border-left:3px solid var(--accent)}
.msg-testa{margin:0 0 6px;font-size:13.5px;color:var(--muted)}
.msg-testa strong{color:var(--ink)}
.msg-testo{overflow-wrap:anywhere}
.msg-allegati{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;align-items:flex-end}
.miniatura{display:block;padding:0;border:1px solid var(--border);border-radius:10px;background:var(--bg);
  cursor:pointer;overflow:hidden;line-height:0}
.miniatura img{display:block;max-width:180px;max-height:180px;width:auto;height:auto}
.chiudi{margin-top:26px;padding-top:18px;border-top:1px solid var(--border)}
.chiudi p{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap}
.chiudi .aiuto{margin:0;flex:1 1 220px}

/* ── Backoffice ──────────────────────────────────────────────────────────── */
.wrap-largo{max-width:1180px}
.gestione{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:26px;align-items:start;margin-top:18px}
.g-elenco ul{list-style:none;padding:0;margin:0;border:1px solid var(--border);border-radius:14px;overflow:hidden;
  background:var(--surface)}
.g-elenco li + li{border-top:1px solid var(--border)}
.g-elenco a{display:block;padding:12px 14px;text-decoration:none;color:var(--ink)}
.g-elenco li.attivo a{background:var(--bg);box-shadow:inset 3px 0 0 var(--accent)}
.g-riga{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.g-nuovo{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#fff;
  background:var(--accent);border-radius:999px;padding:1px 8px}
.g-testo{display:block;color:var(--muted);font-size:14px;margin-top:4px;overflow-wrap:anywhere}
.g-quando{display:block;color:var(--muted);font-size:12.5px;margin-top:4px;font-variant-numeric:tabular-nums}
.g-ticket h2{margin-top:0}
@media (max-width:760px){ .gestione{grid-template-columns:1fr} }