/* Token del sistema visivo: copiati da pipe-reference/token.css (stessi nomi e valori).
   Un tema cambia i valori, mai le regole. Il font "Inter Pipe" non è incluso: la pila
   di font ricade sui caratteri di sistema. */
:root {
  --marchio: #ef5223;
  --scuro-marchio: #28282b;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;
  --r1: 4px; --r2: 6px; --r3: 8px;

  --font: "Acumin Pro", "acumin-pro", "Inter Pipe", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-codice: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --t-micro: 11px; --t-piccolo: 12px; --t-base: 13px; --t-medio: 14px; --t-titolo: 16px; --t-pagina: 20px;

  --colonna-l: 224px; --colonna-chiusa-l: 52px; --testata-h: 44px; --riga-h: 36px; --bersaglio: 32px;
  --pagina-m: 20px;

  /* tema Chiaro */
  color-scheme: light;
  --fondo: #f4f4f5;
  --superficie: #ffffff;
  --superficie-2: #fafafa;
  --passaggio: #f1f1f3;
  --bordo: #e3e3e6;
  --bordo-forte: #c4c4ca;
  --testo: #1f1f22;
  --testo-2: #55555d;
  --testo-3: #6b6b74;

  --azione: #cf3f12;
  --azione-sopra: #b23510;
  --azione-testo: #ffffff;
  --accento: #c23a10;
  --accento-tenue: #fdeee8;
  --fuoco: #ef5223;

  --ok: #14702e;      --ok-tenue: #e4f3e8;
  --ambra: #8a5000;   --ambra-tenue: #fbefdb;
  --rosso: #b72a15;   --rosso-tenue: #fbe6e2;
  --info: #1d5ea8;    --info-tenue: #e5eef9;
  --neutro-tenue: #ececee;

  /* presenti per fedeltà ai token originali; questa interfaccia non mostra prezzi */
  --prezzo-recente: #0b7a3b;
  --prezzo-medio: #47801f;
  --prezzo-vecchio: #a85f00;
  --prezzo-listino: #c0281b;

  --colonna-fondo: #28282b;
  --colonna-testo: #f3f3f4;
  --colonna-testo-2: #b4b4bb;
  --colonna-passaggio: rgba(255, 255, 255, .08);
  --colonna-bordo: rgba(255, 255, 255, .12);

  --bianco-foto: #ffffff;
  --velo: rgba(20, 20, 22, .45);
  --ombra-finestra: 0 8px 28px rgba(20, 20, 22, .24);

  /* locali a questa interfaccia */
  --r-composer: 14px;
  --t-messaggio: 16px;
  --colonna-lettura: 768px;
  --bordo-campo: #858590; /* bordo dei campi su mobile: >= 3:1 (il desktop usa --bordo-forte) */
}

html[data-tema] {
  color-scheme: dark;
  --azione: #cf3f12;
  --azione-sopra: #e0491a;
  --azione-testo: #ffffff;
  --fuoco: #ff7a50;
  --velo: rgba(0, 0, 0, .6);
  --ombra-finestra: 0 8px 28px rgba(0, 0, 0, .5);
  --ok: #86dca6;      --ok-tenue: rgba(134, 220, 166, .14);
  --ambra: #f2c75c;   --ambra-tenue: rgba(242, 199, 92, .14);
  --rosso: #ff9f90;   --rosso-tenue: rgba(255, 159, 144, .14);
  --info: #9cc6ff;    --info-tenue: rgba(156, 198, 255, .14);
  --prezzo-recente: #6fdc9b;
  --prezzo-medio: #b9e07a;
  --prezzo-vecchio: #f5b65a;
  --prezzo-listino: #ff8d80;
  --accento: #ff9a78;
  --colonna-testo: #f3f0ec;
  --colonna-testo-2: #b8b0a8;
  --colonna-bordo: rgba(255, 255, 255, .1);
}

html[data-tema="grafite"] {
  --fondo: #1c1d20; --superficie: #2a2b2f; --superficie-2: #232428; --passaggio: #33343a;
  --bordo: #3a3b41; --bordo-forte: #55565e;
  --testo: #e7e7ea; --testo-2: #bcbdc4; --testo-3: #a2a3ab;
  --accento-tenue: #4a2a20; --neutro-tenue: #3a3b41;
  --colonna-fondo: #131417;
  --bordo-campo: #80818a;
}
html[data-tema="moka"] {
  --fondo: #1d1612; --superficie: #2e231d; --superficie-2: #261d18; --passaggio: #392c25;
  --bordo: #47362b; --bordo-forte: #66503f;
  --testo: #f0e6dd; --testo-2: #cfbfb2; --testo-3: #b8a596;
  --accento-tenue: #55301f; --neutro-tenue: #47362b;
  --colonna-fondo: #150e0a;
  --bordo-campo: #8c7461;
}
html[data-tema="ardesia"] {
  --fondo: #18181b; --superficie: #2a2522; --superficie-2: #221f1d; --passaggio: #352f2b;
  --bordo: #3c3532; --bordo-forte: #5a504b;
  --testo: #ece6e1; --testo-2: #c6bdb6; --testo-3: #a99f98;
  --accento-tenue: #4d2c21; --neutro-tenue: #3c3532;
  --colonna-fondo: #1b1715;
  --bordo-campo: #877b74;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--font); background: var(--fondo); color: var(--testo); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-width: 320px; font-size: var(--t-medio); line-height: 1.5; background: var(--fondo); color: var(--testo); }
h1, h2, p { margin-top: 0; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
a { color: var(--accento); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
.sidebar :focus-visible { outline-color: var(--colonna-testo); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; fill: currentColor; flex: none; }
.skip { position: absolute; left: var(--s4); top: -6rem; z-index: 20; padding: var(--s3); background: var(--superficie); color: var(--testo); border: 1px solid var(--bordo-forte); border-radius: var(--r3); }
.skip:focus { top: var(--s4); }

/* Struttura: colonna laterale + pagina */
.app { display: grid; grid-template-columns: var(--colonna-l) minmax(0, 1fr); height: 100vh; height: 100dvh; }
.app[data-colonna="chiusa"] { grid-template-columns: var(--colonna-chiusa-l) minmax(0, 1fr); }
body:not([data-view="chat-view"]) .app { grid-template-columns: minmax(0, 1fr); }
body:not([data-view="chat-view"]) .sidebar { display: none; }
.page { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--superficie); }
.main { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
.main:focus { outline: none; }

/* Colonna laterale */
.sidebar { display: flex; flex-direction: column; min-height: 0; padding: var(--s3) var(--s2); background: var(--colonna-fondo); color: var(--colonna-testo); border-right: 1px solid var(--colonna-bordo); }
.sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: var(--testata-h); padding: 0 var(--s1) 0 var(--s2); margin-bottom: var(--s3); }
.sidebar-logo { display: block; width: 120px; height: auto; }
.sidebar-nav { flex: 1; min-height: 0; overflow-y: auto; }
.sidebar-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.sidebar-foot { padding-top: var(--s3); border-top: 1px solid var(--colonna-bordo); }
.nav-item { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: var(--riga-h); padding: 0 var(--s3); border: 0; border-radius: var(--r3); background: transparent; color: var(--colonna-testo-2); font-size: var(--t-base); font-weight: 500; text-align: left; text-decoration: none; }
button.nav-item:hover { background: var(--colonna-passaggio); color: var(--colonna-testo); }
.nav-item.is-current { background: var(--colonna-passaggio); color: var(--colonna-testo); cursor: default; }
.nav-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app[data-colonna="chiusa"] .sidebar { padding-left: var(--s1); padding-right: var(--s1); }
.app[data-colonna="chiusa"] .sidebar-logo, .app[data-colonna="chiusa"] .nav-text { display: none; }
.app[data-colonna="chiusa"] .sidebar-head { justify-content: center; padding: 0; }
.app[data-colonna="chiusa"] .nav-item { justify-content: center; padding: 0; }

/* Pulsanti */
.icon-btn { display: inline-grid; place-items: center; width: var(--bersaglio); height: var(--bersaglio); padding: 0; border: 1px solid transparent; border-radius: var(--r3); background: transparent; color: var(--testo-2); }
.icon-btn:hover:not(:disabled) { background: var(--passaggio); color: var(--testo); }
.sidebar .icon-btn { color: var(--colonna-testo-2); }
.sidebar .icon-btn:hover { background: var(--colonna-passaggio); color: var(--colonna-testo); }
.primary, .outline { min-height: 40px; padding: 0 var(--s4); border-radius: var(--r3); font-weight: 600; font-size: var(--t-medio); }
.primary { border: 1px solid var(--azione); background: var(--azione); color: var(--azione-testo); }
.primary:hover:not(:disabled) { background: var(--azione-sopra); border-color: var(--azione-sopra); }
.outline { border: 1px solid var(--bordo-forte); background: transparent; color: var(--testo); }
.outline:hover { background: var(--passaggio); }

/* Testata della pagina e tema */
.topbar { position: relative; z-index: 5; display: flex; align-items: center; gap: var(--s4); min-height: var(--testata-h); padding: 0 var(--pagina-m); background: var(--superficie); border-bottom: 1px solid var(--bordo); }
.topbar-logo { display: none; width: 120px; height: auto; }
body:not([data-view="chat-view"]) .topbar-logo { display: block; }
body:not([data-view="chat-view"]) .topbar-title { display: none; }
.topbar-title { margin: 0; display: flex; align-items: center; gap: var(--s2); font-size: var(--t-base); font-weight: 600; color: var(--testo); }
.tag { padding: 2px var(--s2); border-radius: var(--r1); background: var(--accento-tenue); color: var(--accento); font-size: var(--t-piccolo); font-weight: 600; white-space: nowrap; }
.theme { position: relative; margin-left: auto; }
.theme-panel { position: absolute; right: 0; top: calc(100% + var(--s1)); width: 264px; padding: var(--s3); background: var(--superficie); border: 1px solid var(--bordo-forte); border-radius: var(--r3); box-shadow: var(--ombra-finestra); }
.theme-panel fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.theme-panel legend { padding: 0; margin-bottom: var(--s2); font-size: var(--t-piccolo); font-weight: 600; color: var(--testo-2); }
.theme-options { display: grid; gap: var(--s1); }
.theme-option { position: relative; display: flex; align-items: center; gap: var(--s2); min-height: var(--riga-h); padding: 0 var(--s3); border-radius: var(--r2); font-size: var(--t-base); cursor: pointer; }
.theme-option:hover { background: var(--passaggio); }
.theme-option input { margin: 0; accent-color: var(--azione); }
.theme-option:has(input:checked) { background: var(--accento-tenue); color: var(--accento); font-weight: 600; }
.theme-option:has(input:focus-visible) { outline: 2px solid var(--accento); outline-offset: 1px; }
.theme-note { margin: var(--s3) 0 0; font-size: var(--t-piccolo); line-height: 1.45; color: var(--testo-3); }

/* Accesso, caricamento, errore di collegamento */
.auth-shell { flex: 1; display: grid; place-items: center; padding: var(--s8) var(--s4); }
.auth-panel { width: min(100%, 400px); padding: var(--s8); background: var(--superficie); border: 1px solid var(--bordo-forte); border-radius: var(--r3); }
.auth-panel h1 { margin-bottom: var(--s2); font-size: var(--t-pagina); line-height: 1.25; }
.lead { margin-bottom: var(--s6); color: var(--testo-2); }
.auth-panel p { color: var(--testo-2); }
.auth-panel label { display: block; margin-bottom: var(--s1); font-size: var(--t-base); font-weight: 600; }
.auth-panel input { width: 100%; height: 40px; margin-bottom: var(--s4); padding: 0 var(--s3); border: 1px solid var(--bordo-forte); border-radius: var(--r3); background: var(--superficie-2); color: var(--testo); }
.login-button { width: 100%; margin-top: var(--s1); }
.form-error { margin: var(--s2) 0; color: var(--rosso); font-size: var(--t-base); line-height: 1.4; }

/* Conversazione */
.workspace { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.conversation { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; scroll-behavior: smooth; }
.conversation:focus-visible { outline-offset: -2px; }
.thread { width: 100%; max-width: var(--colonna-lettura); margin: 0 auto; padding: var(--s8) var(--pagina-m) var(--s4); }
.empty { max-width: 560px; margin: 12vh auto 0; text-align: center; }
.empty h2 { margin-bottom: var(--s2); font-size: 28px; line-height: 1.2; font-weight: 650; }
.empty p { color: var(--testo-2); font-size: var(--t-titolo); line-height: 1.55; }
.examples { list-style: none; margin: var(--s6) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }
.example { min-height: var(--bersaglio); padding: 0 var(--s4); border: 1px solid var(--bordo-forte); border-radius: 999px; background: transparent; color: var(--testo); font-size: var(--t-base); }
.example:hover { background: var(--passaggio); }

.messages { list-style: none; margin: 0; padding: 0; }
.message { margin: 0 0 var(--s8); }
.message-role { margin-bottom: var(--s1); font-size: var(--t-piccolo); font-weight: 600; color: var(--accento); }
.message-content { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-messaggio); line-height: 1.65; }
.message.user { display: flex; justify-content: flex-end; }
.message.user .message-body { max-width: 85%; padding: var(--s3) var(--s4); background: var(--passaggio); border: 1px solid var(--bordo); border-radius: var(--r-composer); }
.message.assistant .message-body { max-width: 100%; }
.message[data-stato="attesa"] .message-content { color: var(--testo-2); }
.message-status { margin-top: var(--s1); font-size: var(--t-piccolo); font-style: italic; color: var(--testo-3); }
.message-footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin-top: var(--s2); }
.copy { display: inline-flex; align-items: center; gap: var(--s1); min-height: 28px; padding: 0 var(--s2); border: 1px solid transparent; border-radius: var(--r2); background: transparent; color: var(--testo-2); font-size: var(--t-piccolo); font-weight: 500; }
.copy .icon { width: 16px; height: 16px; }
.copy:hover { background: var(--passaggio); color: var(--testo); }
.metrics { display: flex; flex-wrap: wrap; gap: 2px var(--s4); margin: 0; font-size: var(--t-piccolo); color: var(--testo-3); }
.metrics div { display: flex; gap: var(--s1); }
.metrics dt::after { content: ":"; }
.metrics dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--testo-2); }

.wait { margin: 0 0 var(--s6); }
.bar { display: block; width: 100%; max-width: 240px; height: 4px; margin-bottom: var(--s2); border: 0; border-radius: 2px; background: var(--neutro-tenue); accent-color: var(--azione); }
.progress { margin: 0; color: var(--testo-2); font-size: var(--t-base); }

/* Composer ancorato in basso */
.composer-dock { flex: none; padding: 0 var(--pagina-m) var(--s3); background: var(--superficie); }
.composer { max-width: var(--colonna-lettura); margin: 0 auto; }
.composer-box { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3) var(--s3) var(--s2); background: var(--superficie-2); border: 1px solid var(--bordo-forte); border-radius: var(--r-composer); }
.composer-box:focus-within { border-color: var(--accento); outline: 2px solid var(--accento); outline-offset: 0; }
.composer textarea { display: block; width: 100%; min-height: 28px; max-height: 200px; padding: var(--s1) var(--s1); border: 0; outline: 0; resize: none; background: transparent; color: var(--testo); font-size: var(--t-messaggio); line-height: 1.5; }
.composer textarea::placeholder { color: var(--testo-3); }
.composer-bar { display: flex; align-items: center; gap: var(--s3); }
.round { width: 36px; height: 36px; border-color: var(--bordo-forte); border-radius: 50%; background: var(--superficie); }
.composer-hint { margin-right: auto; font-size: var(--t-piccolo); color: var(--testo-3); }
.chars { font-size: var(--t-piccolo); color: var(--testo-3); font-variant-numeric: tabular-nums; }
.send { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--azione); color: var(--azione-testo); }
.send:hover:not(:disabled) { background: var(--azione-sopra); }
.attachment { display: flex; align-items: center; gap: var(--s2); align-self: flex-start; max-width: 100%; margin: 0 0 var(--s1); padding: var(--s1) var(--s3); background: var(--accento-tenue); color: var(--accento); border-radius: var(--r2); font-size: var(--t-base); overflow-wrap: anywhere; }
.attachment .icon { width: 16px; height: 16px; }
.composer-foot { margin: var(--s2) 0 0; text-align: center; font-size: var(--t-piccolo); line-height: 1.4; color: var(--testo-3); }

/* Conferma */
dialog { width: min(440px, calc(100% - 2rem)); padding: var(--s6); border: 1px solid var(--bordo-forte); border-radius: var(--r3); background: var(--superficie); color: var(--testo); box-shadow: var(--ombra-finestra); }
dialog::backdrop { background: var(--velo); }
dialog h2 { margin-bottom: var(--s2); font-size: var(--t-titolo); }
dialog p { margin-bottom: var(--s5); color: var(--testo-2); line-height: 1.5; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--s3); }

/* Preferenze: le statistiche si nascondono senza toccare Copia né il testo */
html[data-metriche="nascoste"] .metrics { display: none; }

/* Comando «Vai in fondo»: ancorato al composer, mai fuori dal viewport */
.composer-dock { position: relative; }
.jump { position: absolute; z-index: 4; left: 50%; bottom: calc(100% + var(--s2)); transform: translateX(-50%); display: inline-flex; align-items: center; gap: var(--s2); max-width: calc(100% - 2 * var(--pagina-m)); min-height: 36px; padding: var(--s1) var(--s4); border: 1px solid var(--bordo-forte); border-radius: 999px; background: var(--superficie); color: var(--testo); font-size: var(--t-base); font-weight: 600; box-shadow: var(--ombra-finestra); text-align: left; }
.jump:hover { background: var(--passaggio); }

/* Finestre Impostazioni ed Esporta */
.panel-dialog { width: min(480px, calc(100% - 2rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))); max-height: calc(100dvh - 2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; }
.panel-dialog h2 { font-size: var(--t-titolo); }
.panel-note { margin-bottom: var(--s4); font-size: var(--t-base); }
.panel-dialog .form-error { margin: 0 0 var(--s4); }
.setting { margin: 0 0 var(--s4); padding: 0; border: 0; min-width: 0; }
.setting:disabled .setting-row { opacity: .6; cursor: not-allowed; }
.setting-name { display: block; font-size: var(--t-base); font-weight: 600; color: var(--testo); }
.setting-desc { display: block; margin: var(--s1) 0 0; font-size: var(--t-piccolo); line-height: 1.45; color: var(--testo-2); }
fieldset.setting > legend { padding: 0; margin-bottom: var(--s1); }
.setting-row { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s2) var(--s2); border-radius: var(--r2); cursor: pointer; }
.setting-row:hover { background: var(--passaggio); }
.setting-row:has(input:focus-visible) { outline: 2px solid var(--accento); outline-offset: 1px; }
.setting-row input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--azione); }
.setting-text { min-width: 0; }
.panel-dialog fieldset .setting-desc#d-invio { margin-bottom: var(--s2); }
#export-fallback { display: block; width: 100%; margin: 0 0 var(--s4); padding: var(--s2) var(--s3); border: 1px solid var(--bordo-campo); border-radius: var(--r2); background: var(--superficie-2); color: var(--testo); font-family: var(--font-codice); font-size: var(--t-piccolo); resize: vertical; }

/* Elementi solo mobile: nascosti sul desktop */
.menu-btn, #drawer-close, .scrim, .swatch, .hint-tocco { display: none; }

/* Schermi stretti (telefoni e tablet in verticale): colonna laterale come pannello a scomparsa */
@media (max-width: 800px) {
  :root {
    --pagina-m: 16px; --bersaglio: 44px; --riga-h: 44px; --testata-h: 52px;
    --t-micro: .75rem; --t-piccolo: .8125rem; --t-base: .9375rem; --t-medio: 1rem; --t-titolo: 1.0625rem;
    --safe-t: env(safe-area-inset-top, 0px); --safe-r: env(safe-area-inset-right, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px);
  }
  html, body { overscroll-behavior: none; }
  body { min-width: 0; }
  /* L'altezza segue il viewport dinamico; con la tastiera aperta (iOS) --vv-h lo sostituisce */
  .app, .app[data-colonna] { grid-template-columns: minmax(0, 1fr); height: 100vh; height: 100dvh; height: var(--vv-h, 100dvh); overflow: hidden; }
  .page { overflow: hidden; }

  /* Pannello laterale: ignora lo stato "compressa" del desktop */
  .sidebar, .app[data-colonna] .sidebar {
    position: fixed; z-index: 30; top: 0; bottom: 0; left: 0; width: max(280px, min(85vw, 340px));
    padding: calc(var(--s3) + var(--safe-t)) var(--s3) calc(var(--s3) + var(--safe-b)) calc(var(--s3) + var(--safe-l));
    box-shadow: var(--ombra-finestra); overscroll-behavior: contain;
    transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s;
  }
  .app[data-menu="aperto"] .sidebar { transform: none; visibility: visible; transition: transform .2s ease, visibility 0s; }
  .app[data-colonna] .sidebar-logo, .app[data-colonna] .nav-text { display: block; }
  .app[data-colonna] .sidebar-head { justify-content: space-between; padding: 0 0 0 var(--s2); }
  .app[data-colonna] .nav-item { justify-content: flex-start; padding: 0 var(--s3); font-size: var(--t-medio); }
  #sidebar-toggle { display: none; }
  #drawer-close { display: inline-grid; }
  .scrim { display: block; position: fixed; inset: 0; z-index: 25; background: var(--velo); }
  .menu-btn { display: inline-grid; margin-left: calc(var(--s2) * -1); }
  body:not([data-view="chat-view"]) .menu-btn { display: none; }
  .sidebar :focus-visible { outline-width: 3px; }

  /* Testata */
  .topbar { gap: var(--s2); padding: var(--safe-t) calc(var(--pagina-m) + var(--safe-r)) 0 calc(var(--pagina-m) + var(--safe-l)); min-height: calc(var(--testata-h) + var(--safe-t)); }
  .topbar-title { min-width: 0; font-size: var(--t-medio); }
  .topbar-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; }
  .tag { display: none; }
  .theme-panel { width: min(280px, calc(100vw - 2 * var(--pagina-m))); max-height: calc(100dvh - var(--testata-h) - var(--safe-t) - var(--s4)); overflow-y: auto; }
  .theme-option { min-height: 44px; font-size: var(--t-medio); }
  .theme-option input { width: 20px; height: 20px; }
  .swatch { display: inline-block; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--bordo-forte); }
  .swatch[data-tema="chiaro"] { background: linear-gradient(135deg, #ffffff 50%, #f4f4f5 50%); }
  .swatch[data-tema="grafite"] { background: linear-gradient(135deg, #2a2b2f 50%, #1c1d20 50%); }
  .swatch[data-tema="moka"] { background: linear-gradient(135deg, #2e231d 50%, #1d1612 50%); }
  .swatch[data-tema="ardesia"] { background: linear-gradient(135deg, #2a2522 50%, #18181b 50%); }

  /* Accesso */
  .auth-shell { place-items: start center; padding: var(--s6) calc(var(--pagina-m) + var(--safe-r)) var(--s6) calc(var(--pagina-m) + var(--safe-l)); overflow-y: auto; }
  .auth-panel { padding: var(--s5); }
  .auth-panel input { height: 48px; font-size: 1rem; }
  .primary, .outline { min-height: 48px; }

  /* Messaggi */
  .thread { padding: var(--s5) calc(var(--pagina-m) + var(--safe-r)) var(--s4) calc(var(--pagina-m) + var(--safe-l)); }
  .conversation, .sidebar-nav, .theme-panel { scrollbar-width: thin; scrollbar-color: var(--bordo-campo) transparent; }
  .conversation { overscroll-behavior: contain; scroll-padding-bottom: var(--s4); }
  .empty { margin-top: 4vh; }
  .empty h2 { font-size: 1.5rem; }
  .examples { flex-direction: column; align-items: stretch; }
  .example { width: 100%; min-height: 44px; padding: var(--s2) var(--s4); text-align: left; font-size: var(--t-medio); }
  .message { margin-bottom: var(--s6); }
  .message-body { min-width: 0; }
  .message.user .message-body { max-width: 92%; }
  .message-content { overflow-wrap: anywhere; word-break: break-word; }
  .message-footer { gap: 0 var(--s3); }
  .copy { min-height: 44px; padding: 0 var(--s3); gap: var(--s2); font-size: var(--t-base); }
  .copy .icon { width: 20px; height: 20px; }
  .metrics div:not([data-metrica="total_seconds"]) { display: none; }
  .metrics { font-size: var(--t-base); }

  /* Barra di composizione: nel flusso, sempre sopra la safe area */
  .composer-dock { padding: 0 calc(var(--pagina-m) + var(--safe-r)) calc(var(--s2) + var(--safe-b)) calc(var(--pagina-m) + var(--safe-l)); border-top: 1px solid var(--bordo); padding-top: var(--s2); }
  .composer-box { padding: var(--s2) var(--s2) var(--s2) var(--s3); }
  .composer textarea { font-size: 1rem; max-height: min(200px, 30dvh); padding: var(--s2) var(--s1); min-height: 44px; }
  .composer-bar { gap: var(--s2); }
  .round, .send { width: 44px; height: 44px; }
  .composer-hint { display: none; }
  .chars { margin-left: auto; font-size: var(--t-base); }
  .attachment { font-size: var(--t-base); }
  .attachment-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-width: 0; overflow-wrap: anywhere; }
  .composer-foot { font-size: var(--t-piccolo); line-height: 1.3; text-align: left; margin-top: var(--s1); }
  .hint-tastiera { display: none; }
  .composer-box:focus-within { outline-offset: -1px; }
  .composer-box, .auth-panel input, .round, .example, .outline { border-color: var(--bordo-campo); }
  .composer-box:focus-within { border-color: var(--accento); }

  .setting-row { min-height: 44px; padding: var(--s3) var(--s2); }
  .setting-row input { width: 22px; height: 22px; }
  .setting-desc { font-size: var(--t-base); }
  .jump { min-height: 44px; }

  /* Conferma: pulsanti a tutta larghezza */
  dialog { width: min(440px, calc(100% - 2rem)); padding: var(--s5); }
  .dialog-actions { flex-direction: column; align-items: stretch; }
  .dialog-actions button { min-height: 48px; }
}

/* Telefono in orizzontale o schermo molto basso: spazio verticale per il campo di testo */
@media (max-width: 800px) and (max-height: 520px) {
  :root { --testata-h: 44px; }
  .composer-foot, .empty p, .examples { display: none; }
  .empty { margin-top: var(--s2); }
  .empty h2 { font-size: 1.25rem; margin: 0; }
  .thread { padding-top: var(--s3); }
  .composer textarea { max-height: min(200px, 40dvh); min-height: 40px; }
}
body[data-tastiera="aperta"] .composer-foot { display: none; }

/* Dispositivi touch a qualsiasi larghezza: bersagli da 44 px e testo dei campi da 16 px */
@media (pointer: coarse) {
  :root { --bersaglio: 44px; --riga-h: 44px; }
  .icon-btn, .nav-item, .theme-option, .example, .copy, .primary, .outline, .jump { min-height: 44px; }
  .round, .send { width: 44px; height: 44px; }
  .auth-panel input { height: 48px; font-size: 1rem; }
  .composer textarea { font-size: 1rem; min-height: 44px; }
}
@media (hover: none) and (pointer: coarse) {
  .hint-tastiera { display: none; }
  .hint-tocco { display: inline; }
  button:active:not(:disabled) { filter: brightness(.92); }
}
@media (prefers-reduced-motion: reduce) {
  .conversation { scroll-behavior: auto; }
  .sidebar, .app[data-menu="aperto"] .sidebar { transition: none !important; }
}
@media (forced-colors: active) {
  .composer-box, .send, .icon-btn, .nav-item { border: 1px solid ButtonText; }
  .nav-item.is-current { outline: 2px solid Highlight; }
}