/* IGOOR cloud — UI CSS (wired port of mockup/index.html).
   Dark theme only for v1 (the light-theme role overrides and the topbar switch
   stay in the mockup). Tokens: css/app.less + mobile/index.html of desktop IGOOR.

   INDICE — le sezioni, nell'ordine, marcate dai banner «---- sezione ----»:
     1.  token (:root), reset/base, #shell
     2.  scala root font per breakpoint (accessibilità)
     3.  topbar
     4.  bottone stato/mic (#stateBtn) + badge speaker
     5.  toast/hint
     6.  area contenuti (#content) + tasto nuova conversazione (#railNewConv)
     7.  conversazione (#conv, .bubble)
     8.  suggerimenti 3 mood (#phrases, .phrase) + chips affina (#keywords)
     9.  compose (#inputArea, #completions, #textRow)
     10. scorciatoie (#shortcuts)
     11. overlay impostazioni (.overlay, .panel, .tabs, .card, .btn, switch…) + voice cloning (#cloneOverlay)
     12. chi parlava? (#whoPanel)
     13. onboarding (#onboarding, .ob-*)
     14. Google sign-in (#google-btn) + backup cifrato voci (.syncrow)
     15. feature tour (#tour, #tourHole, #tourCard)
     16. breakpoint: telefono ≤480 · tablet ≥481 · landscape/desktop ≥900 */
:root{
  /* marca — costanti */
  --accent-100:#0095c0; --accent-500:#216776; --accent-700:#23515b;
  --def-green:#1D6634; --master-teal:#2F535B; --basecolor-accent-500:#3d6c76;
  --warning:#a8351b; --sos-hover:#c4431f; --ok:#1a9e44; --amber:#d9a441;
  --on-accent:#fff;         /* testo su accento scuro, bolle, warning */
  --on-accent-ink:#121617;  /* testo su accento chiaro (hover, primary) */
  --chip-on-bubble:rgba(0,0,0,.28);
  --google-bg:#fff; --google-fg:#1f1f1f; --google-border:#747775;  /* bottone Google ufficiale (brand sign-in) */
  --google-hover:#f8f9fa; --google-active:#f1f3f4;
  --rounded:10px;
  --bevel:inset 0 1px 1px 0 rgba(255,255,255,.25);  /* il rilievo dei .btn di app.less */
  /* ruoli — tema scuro */
  --text:#edeee7; --text-soft:#a6bfbf; --border:#556265;
  --basecolor-gray-100:#afbfbf;  /* etichette dei campi delle impostazioni */
  --bg-grad-a:#374d52; --bg-grad-b:#1e2223;  /* i --basecolor-bggrad-0/1 di app.less */
  --topbar-grad-a:#182022; --topbar-grad-b:#263437;  /* gradiente della topbar */
  --conv-bg:#28373b; --panel-bg:#1a2223; --panel-border:#2d3233;
  --popover-bg:#1d1d1d; --input-bg:#121617;
  --inputfocus-bg:#25393D;  /* fondo di focus degli input (accent-900 della uikit) */
  --scrim:#121617; --modal-scrim:rgba(0,0,0,.6);
  --wash:#fff; --on-wash:#fff;
  --surface-strong:#3e5e65; --on-surface-strong:#fff;
  --listening:#396350;  /* sfondo del mic in ascolto (#stateBtn listening) */
  --link:#56c1ef; --link-hover:#8ad8f8;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
/* iPadOS/Safari scrolla il visual viewport alla tastiera ignorando l'overflow:hidden
   del solo body (WebKit 153852): la shell è fissa, il lock serve anche sull'html */
html{ height:100%; overflow:hidden; }
body{
  font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--text); background:linear-gradient(180deg,var(--bg-grad-a) 0%,var(--bg-grad-b) 100%) fixed;
  height:100vh; height:100dvh; overflow:hidden;
}
button{ font-family:inherit; cursor:pointer; border:none; color:inherit; background:none; }
input,select{ font-family:inherit; font-size:16px; } /* 16px = niente zoom iOS */
[hidden]{ display:none !important; }

#shell{
  height:100vh; height:100dvh; margin:0 auto;
  display:flex; flex-direction:column;
  padding-top:env(safe-area-inset-top);
}

/* ---- scala root font (accessibilità) ----
   root font scalato per breakpoint — tutto il testo cresce con lo schermo
   (utenti ALS/MND, eye-tracking: bersagli grandi e testo leggibile).
   L'ordine qui è la cascata: a ≥1400px in landscape vince 20px (il blocco
   landscape ≥900 segue quello ≥1400) — comportamento storico; cambiarlo
   è una decisione visiva, non di refactoring. */
html{ font-size:16px; }
@media (min-width:481px){ html{ font-size:18px; } }
@media (min-width:1400px){ html{ font-size:21px; } }
@media (min-width:900px) and (orientation:landscape){ html{ font-size:20px; } }

/* ---- topbar ---- */
#topbar{
  display:flex; align-items:center; gap:10px; position:relative;
  padding:3px 12px 3px 0; background:linear-gradient(to bottom, var(--topbar-grad-a), var(--topbar-grad-b));
}
#conn{ display:flex; align-items:center; gap:6px; font-size:.78rem; color:var(--text); min-width:86px;
  background:color-mix(in srgb,var(--scrim) 60%,transparent); border-radius:999px; padding:2px 10px; }
#connDot{ width:9px; height:9px; border-radius:50%; background:var(--border); flex:none; }
#conn.on #connDot{ background:var(--ok); }
#conn.wait #connDot{ background:var(--amber); animation:blink 1s infinite; }
@keyframes blink{ 50%{ opacity:.3; } }
/* il grande tasto «Termina» dentro #conn è solo telefono (max-width:480):
   qui, e su tablet/desktop, resta spento */
#connEnd{ display:none; }
/* tag sandbox (strumento operatore): compatto, zona sinistra della topbar —
   «Clone di: <id> — Reinizializza», il GoogleID si accorcia con ellissi e la
   data di clonazione vive nel tooltip */
#sandboxTag{ display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--warning);
  max-width:34vw; white-space:nowrap; overflow:hidden; }
#sandboxTag[hidden]{ display:none; }
#sandboxTagSrc{ overflow:hidden; text-overflow:ellipsis; }
#sandboxTagReset{ color:var(--warning); font-weight:600; text-decoration:underline; text-underline-offset:3px; flex:none; }
#sandboxTagReset:hover{ color:var(--sos-hover); }
/* logo SEMPRE al centro della topbar, qualunque sia la larghezza dei lati */
.brand{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; line-height:0; }
.brand img{ height:1.25rem; width:auto; object-fit:contain; }
#topbarRight{ display:flex; align-items:center; gap:6px; min-width:86px; justify-content:flex-end; margin-left:auto; }
.iconbtn{
  width:44px; height:44px; border-radius:var(--rounded); display:flex; align-items:center; justify-content:center;
  font-size:25px; color:var(--text-soft); transition:background .2s,color .2s;
}
.iconbtn:hover,.iconbtn:active{ background:color-mix(in srgb,var(--accent-100) 18%,transparent); color:var(--accent-100); }
/* l'icona cursori di #userChip: em-sized come le icone phosphor che sostituisce
   (scala col font-size del bottone a ogni breakpoint); il file sorgente è
   static/settings.svg, geometria nello sprite di aac.html */
#userChip svg.chipicon{ width:1.2em; height:1.2em; stroke:currentColor; fill:none; }
.iconbtn:disabled{ opacity:.4; cursor:default; }
.iconbtn:disabled:hover,.iconbtn:disabled:active{ background:none; color:var(--text-soft); }

/* ---- bottone unico stato/mic (pattern #stateBtn di IGOOR mobile) ---- */
#stateRow{ display:flex; gap:8px; padding:0; align-items:stretch; }
#stateBtn{
  flex:1; min-height:60px; border-radius:12px; display:flex; align-items:center; justify-content:center; gap:12px;
  font-size:1.15rem; font-weight:700; color:var(--on-accent); background:var(--accent-100);
  transition:background .3s; padding:8px 14px; overflow:hidden; border-radius:0;
}
#stateBtn i{ font-size:24px; }
/* il "greyed out" (grigio + spinner) solo durante la connessione al server:
   da lì in poi lo sfondo è costante ed è l'icona del mic a indicare lo stato */
#stateBtn[data-state="connecting"]{ background:var(--surface-strong); color:var(--on-surface-strong); }
#stateBtn[data-state="listening"], #stateBtn[data-state="thinking"], #stateBtn[data-state="speaking"],
#stateBtn[data-state="recording"], #stateBtn[data-state="idle"], #stateBtn[data-state="ended"]{
  background:color-mix(in srgb,var(--wash) 5%,transparent); color:var(--on-wash);
}
#stateBtn[data-state="listening"]{ background:var(--listening); }  /* il verde d'ascolto: il mic fluttuante su fondo pieno */
#stateBtn[data-state="listening"] i{ animation:float 2.8s ease-in-out infinite; }
#stateBtn[data-state="idle"], #stateBtn[data-state="ended"]{ opacity:.55; cursor:default; }
#stateBtn[data-state="speaking"]{ opacity:.55; }
#stateBtn[data-state="idle"] span, #stateBtn[data-state="ended"] span, #stateBtn[data-state="listening"] span{ display:none; }
/* push-to-talk: in attesa il microfono è FISSO con l'invito a premere (l'etichetta
   si vede), mentre si parla (tasto tenuto, recording) fluttua */
body.ptt-mode #stateBtn[data-state="listening"] i{ animation:none; }
body.ptt-mode #stateBtn[data-state="listening"] span{ display:block; }
body.ptt-mode #stateBtn[data-state="recording"] i{ animation:float 2.8s ease-in-out infinite; }
#stateBtn:disabled{ cursor:default; }
@keyframes float{ 50%{ transform:translateY(-7px); } }
#speakerBadge{
  display:flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px;
  background:color-mix(in srgb,var(--wash) 7%,transparent); font-size:.85rem; color:var(--text-soft);
  border:1px solid color-mix(in srgb,var(--wash) 9%,transparent); white-space:nowrap;
}
#speakerBadge i{ font-size:17px; }
/* l'attributo [hidden] (fuori conversazione) deve battere il display:flex sopra */
#speakerBadge[hidden]{ display:none; }
#speakerBadge.on{ color:var(--on-wash); border-color:var(--ok); animation:pop .5s; }
@keyframes pop{ 40%{ transform:scale(1.08); } }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---- toast/hint ---- */
#hint{
  position:fixed; top:calc(env(safe-area-inset-top) + 64px); left:50%; transform:translateX(-50%);
  background:var(--popover-bg); border:1px solid var(--border); border-radius:999px;
  padding:7px 16px; font-size:.83rem; z-index:150; opacity:0; pointer-events:none;  /* sopra l'overlay parametri: il «Salvato ✓» deve vedersi anche lì */
  transition:opacity .3s; max-width:88vw; text-align:center;
}
#hint.show{ opacity:1; }

/* ---- area contenuti (colonna in portrait, 2 colonne in landscape) ---- */
#content{ flex:1; display:flex; flex-direction:column; min-height:0; }
/* riga riconoscimento [mic | conversazione | parlo-con-uno-strumento]:
   su telefono si dissolve nel flusso della colonna, su tablet/desktop è la riga dell'header */
#recogRow{ display:contents; }
/* parte centrale [abbandona | flow-autocomplete + chips]:
   su telefono si dissolve nel flusso della colonna, su tablet/desktop è il container centrale */
#central{ display:contents; }
#centralRight{ display:contents; }
#railNewConv{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  background:var(--accent-700); color:var(--on-accent); border-radius:0;
  padding:12px 8px; min-height:96px; font-size:.82rem; font-weight:600; flex:none;
  text-align:center; line-height:1.25; transition:background .15s;
}
#railNewConv i{ font-size:28px; }
#railNewConv:hover{ background:var(--accent-100); color:var(--on-accent-ink); }
/* su telefono il bottone nuova/termina conversazione è solo in topbar (dopo lo stile, per la cascata) */
#railNewConv{ display:none; }

body.ob #shell{ display:none; }  /* primo paint: il server marca «ob» quando l'onboarding possiede lo schermo — la UI dietro non deve lampeggiare prima che il JS riveli il wizard (reti lente) */

/* link leggibili sul tema scuro (contrasto elevato) */
a{ color:var(--link); text-decoration:underline; text-underline-offset:3px; }
a:hover, a:focus{ color:var(--link-hover); }

/* ---- conversazione ---- */
#conv{
  flex:1; overflow-y:auto; min-height:0; margin:0; padding:14px 24px;
  background:transparent; border-radius:0;  /* si vede il gradiente pagina, come la conversazione desktop */
  display:flex; flex-direction:column; gap:10px;
  /* niente scrollbar-width/scrollbar-color qui: da Chrome 121 le proprietà
     standard disattivano gli ::-webkit-scrollbar* qui sotto (lo stile custom
     a 36px perderebbe contro l'auto del browser) */
}
/* due volte più larga (era 18px): bersaglio grande per il trascinamento —
   su Firefox scrollbar-width accetta solo auto/thin/none, il raddoppio è
   effetettivo su Chromium/WebKit (Android, desktop) */
#conv::-webkit-scrollbar{ width:36px; }
#conv::-webkit-scrollbar-track{ background:transparent; }
#conv::-webkit-scrollbar-thumb{ background:var(--border); border-radius:18px; border:8px solid transparent; background-clip:padding-box; }
#conv::-webkit-scrollbar-thumb:hover{ background:var(--text-soft); }
.bubble{
  max-width:82%; padding:12px 14px; border-radius:.5rem; line-height:1.2; font-size:1.25rem;
  position:relative; word-wrap:break-word; animation:up .25s ease-out;
  color:var(--on-accent);  /* proporzioni .msg della uikit, scalate ai breakpoint */
}
@keyframes up{ from{ opacity:0; transform:translateY(6px); } }
/* fumetti «comic strip» del desktop (conversation_component.vue): utente a destra
   su #2F535B con angolo/coda in basso a dx, interlocutore a sinistra su #1D6634 */
.bubble.def{ align-self:flex-start; background:var(--def-green); border-radius:.5rem .5rem .5rem 0; }
.bubble.def::after{
  content:""; position:absolute; left:calc(-1rem + 1px); bottom:0; width:0; height:0;  /* 1px di aggancio: niente cucitura anti-alias */
  border-style:solid; border-width:0 0 1rem 1rem;
  border-color:transparent transparent var(--def-green) transparent;
}
.bubble.master{ align-self:flex-end; background:var(--master-teal); border-radius:.5rem .5rem 0 .5rem; }
.bubble.master::after{
  content:""; position:absolute; right:calc(-1rem + 1px); bottom:0; width:0; height:0;  /* 1px di aggancio: come .def::after */
  border-style:solid; border-width:1rem 0 0 1rem;
  border-color:transparent transparent transparent var(--master-teal);
}
.bubble.msg-small{ font-size:.86rem; opacity:.88; padding:7px 12px; }
.bubble .who{
  /* riga propria sopra il testo: allineamento costante qualunque sia la
     taglia della bolla, e nessun contatto con il testo trascritto */
  display:block; width:fit-content; font-size:.7rem; background:var(--chip-on-bubble); border-radius:999px;
  padding:2px 9px; margin:0 0 8px;
}
.bubble.master{ cursor:pointer; }
/* i tre punti durante la trascrizione: bolla comic strip verde come le
   trascrizioni dell'interlocutore (.bubble.def), punti bianchi che pulsano
   in sequenza (typing-indicator di IGOOR desktop dentro la bolla) */
.typing{
  align-self:flex-start; position:relative; background:var(--def-green);
  border-radius:.5rem .5rem .5rem 0; padding:14px 16px; display:flex; align-items:center;
}
.typing::after{
  content:""; position:absolute; left:calc(-1rem + 1px); bottom:0; width:0; height:0;  /* 1px di aggancio: come .def::after */
  border-style:solid; border-width:0 0 1rem 1rem;
  border-color:transparent transparent var(--def-green) transparent;
}
.typing span{ width:12px; height:12px; margin:0 4px; border-radius:50%; background-color:var(--on-accent); display:inline-block; opacity:.6; animation:typing 1.2s infinite; }
.typing span:nth-child(2){ animation-delay:.2s; } .typing span:nth-child(3){ animation-delay:.4s; }
@keyframes typing{ 0%{ opacity:.6; transform:scale(1); } 20%{ opacity:1; transform:scale(1.2); } 100%{ opacity:.6; transform:scale(1); } }
@media (prefers-reduced-motion:reduce){ .typing span{ animation:none; } }

/* area vuota = unico grande bottone di avvio finché il canale non è aperto */
#emptyState{
  margin:auto; width:calc(100% - 20px); height:calc(100% - 16px); padding:20px;
  display:flex; align-items:center; justify-content:center;
  text-align:center; color:var(--text-soft);
  border:2px dashed transparent; border-radius:12px; background:transparent;
}
#emptyState span{ font-size:1.25rem; font-weight:700; }
#emptyState.clickable{ cursor:pointer; border-color:color-mix(in srgb,var(--accent-100) 40%,transparent); color:var(--text); }
#emptyState.clickable:hover{ background:color-mix(in srgb,var(--accent-100) 8%,transparent); }
#icebreaker{
  display:flex; align-items:center; justify-content:center; gap:9px; padding:13px 20px;
  margin:0; order:1; border-radius:0;
  background:var(--accent-700); color:var(--on-accent); font-size:.95rem; font-weight:600;
}
#icebreaker i{ font-size:20px; }
#icebreaker:hover{ background:var(--accent-100); color:var(--on-accent-ink); }

/* ---- suggerimenti 3 mood ---- */
#phrases{ padding:2px 16px 4px 12px; display:flex; flex-direction:column; gap:8px; min-height:0; }
#moodGrid{ display:flex; flex-direction:column; gap:2.5rem; }
.mood{ display:flex; align-items:center; gap:10px; }
/* fumetto «comic strip» di app.less (.msg): angolo basso-dx quadro + coda a
   triangolo, fondo --master-teal (= --color-msg del desktop). --bubble tiene
   sfondo e coda sincronizzati anche su hover/disabled */
.phrase{
  --bubble:var(--basecolor-accent-500);
  flex:1; min-height:62px; border-radius:12px 12px 0 12px; background:var(--bubble);
  color:var(--on-accent); font-size:1.12rem; text-align:left; padding:12px 16px; line-height:1.3;
  position:relative; transition:background .15s, border-color .15s, transform .1s;
  box-shadow: none;
}
.phrase::after{
  content:""; position:absolute; right:-13px; bottom:0; width:0; height:0;  /* 1px di aggancio: niente cucitura anti-alias */
  border-style:solid; border-width:14px 0 0 14px;
  border-color:transparent transparent transparent var(--bubble);
  transition:border-color .15s;  /* senza, la coda salta sul colore hover prima della bolla: flicker */
}
/* tag v4 ElevenLabs: pill con la direzione interpretativa SOPRA il testo —
   mai dentro: il testo parlato resta pulito (pattern .bubble .who) */
.phrase .tag{
  display:block; width:fit-content; font-size:.7rem;
  background:var(--chip-on-bubble); border-radius:999px; padding:2px 9px; margin:0 0 6px;
}
.phrase:hover{ --bubble:var(--accent-100); }
.phrase:active{ transform:scale(.985); }
/* disabilitate mentre una frase parla (e sulla griglia pubblicata a metà
   pronuncia): devono LEGGERSI come inattive — il click dwell non deve
   sembrare accolto e poi ignorato */
.phrase:disabled,.kwchip:disabled{ opacity:.45; cursor:default; }
.phrase:disabled:hover,.phrase:disabled:active{ --bubble:var(--basecolor-accent-500); transform:none; }
.kwchip:disabled:hover{ background:var(--master-teal); color:var(--on-accent); }
#repeatBtn{
  min-height:54px; border-radius:var(--rounded); border:1.5px dashed var(--accent-100);
  color:var(--accent-100); font-size:1.05rem; font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:9px; padding:8px;
}
#repeatBtn:hover{ background:color-mix(in srgb,var(--accent-100) 12%,transparent); }
/* chips «affina»: il gruppo-card di IGOOR (la colonna «WHEN?», qui in orizzontale):
   intestazione piccola bianca maiuscola + card traslucida arrotondata con i chip */
#keywords{ display:flex; align-items:center; gap:12px; padding:4px 0 6px; }
#keywords .klabel{ flex:none; font-size:.72rem; font-weight:700; color:var(--text); text-transform:uppercase; letter-spacing:.05em; }
.kwcard{
  flex:1; min-width:0; display:flex; gap:2px; padding:8px;
  border-radius:12px;
}
.kwchip{
  flex:1; min-height:44px;  background:var(--master-teal); color:var(--on-accent);
  font-size:.92rem; font-weight:400; text-align:left; padding:6px 14px; transition:background .15s;
}
.kwchip:first-child{ border-radius:8px 0 0 8px; }
.kwchip:last-child{ border-radius:0 8px 8px 0; }
.kwchip:hover{ background:var(--accent-100); color:var(--on-accent-ink); }
.kwchip.on{ background:var(--basecolor-accent-500); color:var(--on-accent); }  /* steering attivo del round */

/* ---- compose ---- */
#inputArea{ padding:8px 0 6px; }
/* mentre digiti: i 3 suggerimenti IA piatti dell'autocomplete (niente mood) al posto dei mood.
   Su telefono in colonna; su tablet/desktop su una riga orizzontale compatta che lascia
   spazio alla tastiera virtuale. Toccarli pronuncia direttamente la frase. */
#completions{
  display:flex; flex-direction:column; gap:8px; padding:2px 14px 4px 0;
}
/* anche i completamenti sono fumetti .msg (un tono più chiaro: --surface-strong):
   resta «tutta bianca» la distinzione scritto/predetto, senza bordo */
.comp{
  --bubble:var(--surface-strong);
  min-height:62px; border-radius:12px 12px 0 12px; background:var(--bubble);
  color:var(--on-surface-strong); font-size:1.02rem; text-align:left; padding:11px 15px; line-height:1.35;
  position:relative; transition:background .15s, border-color .15s;
  box-shadow:none;  /* piatte come le .phrase: niente rilievo da bottone */
}
.comp::after{
  content:""; position:absolute; right:-13px; bottom:0; width:0; height:0;  /* 1px di aggancio: come .phrase::after */
  border-style:solid; border-width:14px 0 0 14px;
  border-color:transparent transparent transparent var(--bubble);
  transition:border-color .15s;  /* come .phrase::after */
}
.comp:hover{ --bubble:var(--accent-700); color:var(--on-accent); }
/* scheletro dei completamenti: la predizione LLM è in volo (effetto shimmer
   delle SPA) — blocchi non cliccabili, animazione ferma senza movimento */
.comp.skel{
  flex:1; pointer-events:none; border:1px solid transparent;
  background:
    linear-gradient(100deg, transparent 30%, color-mix(in srgb,var(--wash) 10%,transparent) 50%, transparent 70%)
    color-mix(in srgb,var(--wash) 4%,transparent);
  background-size:200% 100%;
  animation:skel-shimmer 1.2s linear infinite;
}
.comp.skel::after{ display:none; }
@keyframes skel-shimmer{ to{ background-position:-200% 0; } }
@media (prefers-reduced-motion:reduce){ .comp.skel{ animation:none; } }
#textRow{
  display:flex; gap:0;  /* colonne contigue come la riga input di IGOOR desktop */
  box-shadow:0 -8px 16px -4px rgba(0,0,0,.45);  /* l'ombra verso l'alto della tastiera desktop: scurisce la zona sopra il campo e lo fa risaltare */
}
/* Effacer: svuota la casella di composizione — grigia finché l'input è vuoto;
   su tablet/desktop occupa la colonna del mic (140/160px) */
#clearBtn{
  flex:none; display:flex; align-items:center; justify-content:center; gap:8px;
  width:58px; height:58px; border:none; border-radius:0;
  background:var(--master-teal); color:var(--on-accent); font-size:.9rem; font-weight:600;  /* «EFFACER» desktop */
}
#clearBtn i{ font-size:20px; }
#clearBtn:disabled{ opacity:.4; cursor:default; }
#clearBtn span{ display:none; }
#textInput{
  flex:1; align-self:stretch; border-radius:0; color:var(--text); padding:0 16px; outline:none; font-size:1.05rem;
  background:var(--conv-bg); border:none;  /* pannello #28373b: prende tutta l'altezza della riga, come «Effacer» */
  -webkit-appearance:none; appearance:none;  /* niente stile nativo da type=search */
}
#textInput::placeholder{ color:#999; font-style:italic; }  /* «dire quelque chose…» del desktop */
/* type=search (vedi il markup): Chrome/Android non propone l'autofill delle
   credenziali sui campi di ricerca — il foglio «salva password» non deve
   comparire sotto i completamenti. Le decorazioni native di search vanno
   soppresse a mano. */
#textInput::-webkit-search-cancel-button,
#textInput::-webkit-search-decoration{ -webkit-appearance:none; appearance:none; display:none; }
#textInput:focus{ border-color:var(--accent-100); }
#sendBtn{
  width:88px; height:58px; border-radius:0; background:var(--master-teal);
  color:var(--on-accent); font-size:24px; display:flex; align-items:center; justify-content:center;  /* «DIRE LA PHRASE» desktop: niente ciano */
}
#sendBtn:disabled{ opacity:.4; cursor:default; }

/* ---- scorciatoie (icone SVG originali di IGOOR) ---- */
#shortcuts{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  padding:8px 12px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--scrim) 55%,transparent);
  box-shadow:0 -2px 6px rgba(0,0,0,.4);  /* stacco dal contenuto, come la footer di IGOOR desktop */
}
.shortcut{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:var(--accent-700); border-radius:var(--rounded); padding:12px 4px;
  color:var(--on-accent); transition:background .15s;
  box-shadow:var(--bevel);
}
svg.igooricon{ width:42px; height:42px; stroke:currentColor; fill:none; }
.shortcut i.ph-light{ font-size:42px; line-height:1; }  /* phosphor al posto delle igooricon (fullscreen) */
.shortcut span{ font-size:11px; font-weight:400; text-transform:uppercase; letter-spacing:2px; }  /* il labelling delle scorciatoie desktop (h3: .8em, 400, 2px) */
.shortcut:hover{ background:var(--accent-100); color:var(--on-accent-ink); }
/* il posto del «Réduire» del desktop: nel browser (niente finestra da ridurre)
   ospita il toggle schermo intero — stesso #3e5e65 del minimize desktop */
#fullscreenBtn{ background:var(--surface-strong); }
.shortcut.sos{ background:var(--warning); }
.shortcut.sos:hover{ background:var(--sos-hover); color:var(--on-accent); }
/* l'allerta sta suonando: la pulsazione SOS di IGOOR desktop (shortcuts_component.vue) */
.shortcut.sos.alerting{ animation:pulse-alert 1.5s ease-in-out infinite; }
@keyframes pulse-alert{
  0%,100%{ background-color:#ff4500; transform:scale(1); box-shadow:0 0 15px rgba(255,69,0,.8); }
  50%{ background-color:#ff6b35; transform:scale(1.08); box-shadow:0 0 20px rgba(255,107,53,.9); }
}
@media (prefers-reduced-motion:reduce){ .shortcut.sos.alerting{ animation:none; } }

/* ---- overlay (impostazioni / chi parlava?) ---- */
.overlay{ position:fixed; inset:0; background:var(--modal-scrim); z-index:100; display:flex; align-items:center; justify-content:center; padding:16px; }
.panel{
  width:min(560px,100%); max-height:calc(100dvh - 32px); overflow-y:auto;
  background:var(--panel-bg); border:1px solid var(--panel-border); border-radius:14px;
  scrollbar-width:thin; scrollbar-color:var(--panel-border) transparent;
}
/* la finestra parametri riempie TUTTO lo schermo (100dvh × 100%: su iPad lo
   spazio è poco): header, tab e footer sempre visibili, le schede scorrono
   dentro. Il modal «chi parlava?» resta a misura di contenuto: la regola vale
   solo per #settings. */
#settings.overlay{ padding:0; align-items:stretch; }
#settings .panel{
  width:100%; height:100dvh; max-height:100dvh;
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:0; border:none;
}
#settings .panel > .cards{
  flex:1; min-height:0; overflow-y:auto;
  display:flex; flex-direction:column;
  scrollbar-width:thin; scrollbar-color:var(--panel-border) transparent;
}
/* Bio (tutte le larghezze): colonna singola — il contesto prende tutto lo spazio
   verticale della finestra; min-content: su schermi bassi .cards scorre invece di tagliare */
/* Documents (tutte le larghezze): stessa idea della Bio — la card riempie la
   finestra e la textarea dell'editor cresce nella colonna destra, con la riga
   Enregistrer/Supprimer sempre visibile in fondo */
.card[data-tab="docs"].active{
  display:flex; flex-direction:column; align-items:stretch;
  flex:1; min-height:min-content;
}
.card[data-tab="docs"].active .docs-layout{ flex:1; min-height:0; }
#docsEditor{ display:flex; flex-direction:column; }
#docBody{ flex:1; min-height:230px; }
.card[data-tab="bio"].active{
  display:flex; flex-direction:column; align-items:stretch;
  flex:1; min-height:min-content;
}
.card[data-tab="bio"].active .field{ display:flex; flex-direction:column; }
.card[data-tab="bio"].active .field:last-of-type{ flex:1; }  /* il campo del contesto cresce */
.card[data-tab="bio"].active #prefContext{ flex:1; min-height:300px; }
.panel::-webkit-scrollbar{ width:10px; }
.panel::-webkit-scrollbar-thumb{ background:var(--panel-border); border-radius:999px; }
/* tab delle impostazioni (organizzazione del cloud settings.html / onboarding IGOOR) */
.tabs{ display:flex; gap:2px; padding:10px 12px 0; overflow-x:auto; }
.tabs button{
  flex:1; min-height:52px; background:var(--master-teal);
  color:#9EB1B2; font-size:1rem; font-weight:600; padding:0 12px;
  border:none; white-space:nowrap;
}
.tabs button:first-child{ border-radius: 8px 0 0 8px; }
.tabs button:last-child{ border-radius: 0 8px 8px 0; }
.tabs button.on{ background:var(--basecolor-accent-500); color:var(--on-accent); }
.card{ display:none; margin:12px; }
.card.active{ display:block; }
/* tablet: pannello al 100%; desktop: 80% — su schermi larghi i campi della tab su 2 colonne */
@media (min-width:481px){
  .panel{ width:100%; max-height:calc(100dvh - 24px); }
  .overlay{ padding:12px; }
  .cards{ min-height:300px; }
}
@media (min-width:900px){
  .card.active{ display:grid; grid-template-columns:1fr 1fr; gap:0 48px; align-items:start; }
  .card.active h3, .card.active > .hint, .card.active > .docs-layout{ grid-column:1 / -1; }
  /* variante a COLONNA UNICA centrata: per le schede che non sfruttano le due
     colonne (es. Preferenze) — il .single rinuncia al grid e si restringe.
     width:100% esplicito: in un flex column i margini auto evitano lo stretch,
     e una card dal contenuto corto (Account) collasserebbe a fit-content */
  .card.active.single{ display:block; width:100%; max-width:560px; margin-inline:auto; }
  .card{ margin:10px 14px; }
}
@media (min-width:1400px){
  .panel{ width:80%; }
  .cards{ min-height:56vh; }
}
.btn.small{ height:44px; padding:0 16px; font-size:1rem; }
.field textarea{
  width:100%; border-radius:1rem; border:none; background:rgba(0,0,0,.25);
  color:var(--text); padding:1rem; outline:.125rem solid transparent; font-family:inherit; font-size:1.2rem; line-height:1.25; resize:vertical;
  transition:all .25s;  /* skin input della uikit */
}
.field textarea:focus{ outline-color:var(--accent-100); background-color:var(--inputfocus-bg); }
.meter{ height:8px; border-radius:999px; background:color-mix(in srgb,var(--wash) 10%,transparent); overflow:hidden; margin-top:8px; }
.meter div{ height:100%; width:0; background:var(--accent-100); transition:width .25s; }
.docs-layout{ display:flex; gap:12px; align-items:stretch; }
#docsList{ flex:0 0 240px; display:flex; flex-direction:column; gap:6px; min-width:0; }
#docsList button{ text-align:left; padding:10px 12px; border-radius:8px; background:color-mix(in srgb,var(--wash) 5%,transparent); color:var(--text); font-size:.9rem; border:1px solid transparent; }
#docsList button.on{ border-color:var(--accent-100); background:color-mix(in srgb,var(--accent-100) 15%,transparent); }
#docsEditor{ flex:1; min-width:0; }
#docsEditor input, #docsEditor textarea{
  width:100%; border-radius:1rem; border:none; background:rgba(0,0,0,.25);
  color:var(--text); padding:1rem; outline:.125rem solid transparent; font-family:inherit; font-size:1.2rem; line-height:1.25; margin-bottom:10px; resize:vertical;
  transition:all .25s;  /* skin input della uikit */
}
#docsEditor textarea{ min-height:230px; }
#docsEditor input:focus, #docsEditor textarea:focus{ outline-color:var(--accent-100); background-color:var(--inputfocus-bg); }
/* consent rows con switch sliding di IGOOR (app.less .switch/.slider, tema scuro):
   bersagli grandi per utenti con gravi problemi motori */
.consentrow{ display:flex; gap:14px; align-items:center; cursor:pointer; margin-top:10px; }
.consentrow span{ font-size:1.02rem; line-height:1.45; }
.switch{ position:relative; display:inline-block; width:60px; height:34px; flex:none; cursor:pointer; }
.switch input{ opacity:0; width:0; height:0; position:absolute; }
.slider{ position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:var(--border); transition:.4s; }
.slider::before{ content:""; position:absolute; height:26px; width:26px; left:4px; bottom:4px; background-color:var(--on-accent); border-radius:50%; transition:.4s; }
input:checked + .slider{ background:var(--accent-100); }
input:focus-visible + .slider{ box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-100) 40%,transparent); }
input:checked + .slider::before{ transform:translateX(26px); }
.slider.round{ border-radius:34px; }
.panel > header{
  position:sticky; top:0; display:flex; align-items:center; gap:10px;
  background:var(--panel-bg); padding:14px 18px; border-bottom:1px solid var(--panel-border); z-index:2;
}
.panel > header h2{ flex:1; margin:0; font-size:1.05rem; }
.card{ background:color-mix(in srgb,var(--wash) 4%,transparent); border-radius:12px; padding:14px 16px; margin:12px; }
.card h3{ margin:0 0 12px; font-size:.92rem; color:var(--basecolor-gray-100); display:flex; align-items:center; gap:8px; }  /* label dei campi */
.card h3 i{ font-size:18px; }
.field{ margin-bottom:12px; }
.field:last-child{ margin-bottom:0; }
.field label{ display:block; font-size:.9rem; color:var(--basecolor-gray-100); margin-bottom:6px; }
/* etichetta-azione in blu (es. «Aggiungi interlocutore» sopra il campo del nome) */
.field label.lbl-accent{ color:var(--accent-100); font-weight:600; }
.field input[type=text],.field input[type=password],.field select{
  width:100%; border-radius:1rem; border:none;
  background:rgba(0,0,0,.25); color:var(--text); padding:1rem; outline:.125rem solid transparent;
  font-size:1.2rem; line-height:1.25; transition:all .25s;  /* skin input della uikit */
  -webkit-appearance:none; appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M18%209a1%201%200%200%201%20.8%201.6v.1l-6%206a1%201%200%200%201-1.4%200h-.1l-6-6-.1-.2H5V10.1L5%2010v-.5l.2-.1v-.2h.2v-.1l.2-.1h.2L6%209H18Z%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.3%22%20%2F%3E%3C%2Fsvg%3E");
  background-size:1.5rem; background-position:calc(100% - 1rem) center; background-repeat:no-repeat;
  padding-right:3rem;  /* il testo non scivola sotto la freccia */
  cursor:pointer;
}
.field input:focus,.field select:focus{ outline-color:var(--accent-100); background-color:var(--inputfocus-bg); }
/* placeholder della uikit: gray-100 pieno, non corsivo */
.field input::placeholder,.field textarea::placeholder,#docsEditor input::placeholder,
#docsEditor textarea::placeholder,.syncrow input::placeholder,#obName::placeholder{ color:var(--basecolor-gray-100); opacity:1; }
.seg{ display:flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.seg button{ flex:1; height:52px; font-size:1rem; color:var(--text-soft); }
.seg button.on{ background:var(--accent-100); color:var(--on-accent-ink); font-weight:700; }
.hint{ font-size:.85rem; color:var(--text-soft); opacity:.75; margin:6px 0 14px; line-height:1.45; }
/* callout nelle impostazioni: istruzioni che devono salire all'occhio (es. «Aggiungi a Home» su iPad/iPhone) */
.callout{
  display:flex; gap:10px; align-items:flex-start; margin:0 0 14px;
  padding:12px 14px; border:1px solid var(--accent-100); border-radius:var(--rounded);
  background:color-mix(in srgb,var(--accent-100) 9%,transparent);
  color:var(--text); font-size:.92rem; line-height:1.5;
}
.callout i{ font-size:22px; color:var(--accent-100); flex:none; }
.callout.danger{ border-color:var(--warning); background:color-mix(in srgb,var(--warning) 10%,transparent); }
span.callout{ flex:1; }  /* lo status del Test vive in una riga flex: da errore riempie lo spazio tra i bottoni */
.callout.danger i{ color:var(--warning); }
#elKeyRemoveConfirm{ margin-top:14px; }  /* staccato dalla riga Tester/Retirer */
.callout-actions{ display:flex; gap:10px; margin-top:10px; }
.btn.danger{ background:var(--warning); color:var(--on-accent); }
.btn.danger:hover{ background:var(--sos-hover); color:var(--on-accent); }
.btn{
  height:46px; padding:0 18px; border-radius:.25rem; background:var(--accent-700);
  color:var(--on-accent); font-size:1rem; font-weight:600; display:inline-flex; align-items:center; gap:8px;
  box-shadow:var(--bevel);  /* il rilievo dei .btn della uikit */
}
.btn:hover{ background:var(--accent-100); color:var(--on-accent-ink); }
.btn.primary{ background:var(--accent-100); color:var(--on-accent-ink); font-weight:700; font-size:1.3125rem; }  /* taglia .btn-primary della uikit */
.btn.primary:hover{ filter:brightness(1.1); color:var(--on-accent-ink); }
/* disabilitato solo da ≥900 (com'era nel blocco ≥900 delle impostazioni):
   sotto questa soglia un .btn disabled non cambia veste */
@media (min-width:900px){
  .btn:disabled{ opacity:.45; cursor:default; }
}
/* azioni pericolose (rimuovere la chiave, disattivare il backup…): link
   piccolo rosso — non un bottone, per non invitare il click */
.dangerlink{
  background:none; border:none; padding:4px 6px; cursor:pointer;
  color:var(--warning); font-size:.88rem; font-weight:600;
  text-decoration:underline; text-underline-offset:3px;
}
.dangerlink:hover{ color:var(--sos-hover); }
.panel > footer{ position:sticky; bottom:0; background:var(--panel-bg); padding:12px 16px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--panel-border); }
.panel > footer .btn{ width:100%; height:52px; justify-content:center; }
/* parametri: Enregistrer sempre verde IGOOR (#1D6634, testo bianco) —
   il dirty-tracking resta nel codice ma non cambia più la veste del bottone */
#savePrefs{ background:var(--def-green); color:var(--on-accent); }
#savePrefs:hover{ background:var(--ok); filter:none; }  /* hover .btn-form della uikit */
/* dialogo «modifiche non salvate» (costruito da aac-settings.js sopra l'overlay) */
#unsavedDlg .unsaved-box{ width:min(420px, calc(100vw - 48px)); background:var(--panel-bg); border:1px solid var(--panel-border); border-radius:14px; padding:22px; display:flex; flex-direction:column; gap:14px; }
#unsavedDlg h3{ margin:0; font-size:1.15rem; }
#unsavedDlg .unsaved-what{ margin:0; color:var(--text-soft); font-size:.95rem; }
#unsavedDlg .callout-actions{ flex-direction:column; margin-top:4px; }
#unsavedDlg .callout-actions .btn{ width:100%; justify-content:center; height:52px; }
#spkProgress{ height:6px; border-radius:999px; background:color-mix(in srgb,var(--wash) 10%,transparent); overflow:hidden; margin-top:8px; }
#spkProgress div{ height:100%; width:0; background:var(--accent-100); transition:width 1s linear; }
.spkRow{ display:flex; align-items:center; gap:8px; background:color-mix(in srgb,var(--wash) 6%,transparent); border-radius:8px; padding:8px 12px; font-size:.88rem; margin-top:8px; }
.spkRow i{ margin-left:auto; color:var(--text-soft); font-size:16px; cursor:pointer; }
.spkRow i:hover{ color:var(--warning); }
/* frase da leggere durante la registrazione: stessa taglia del testo privacy (1.02rem), pieno contrasto */
.spk-read-who{ font-size:1.02rem; font-weight:600; color:var(--text); margin:6px 0 4px; }
.spk-sentence{ font-size:1.02rem; line-height:1.45; color:var(--text); margin:6px 0 14px; }
/* nome già presente in lista: errore in rosso subito sotto il campo */
/* la voce appena salvata entra in lista da sinistra */
.spkRow.new{ animation:spk-in .7s ease-out; }
@keyframes spk-in{ from{ opacity:0; transform:translateX(-28px); } }
@media (prefers-reduced-motion:reduce){ .spkRow.new{ animation:none; } }

/* voice cloning (#cloneOverlay): consenso → campioni → invio → esito */
#clonePanel{ width:min(560px,100%); }
#clonePanel header h3{ flex:1; margin:0; font-size:1.05rem; }
.vcBody{ padding:18px; display:flex; flex-direction:column; gap:16px; }
.vcStep{ display:flex; flex-direction:column; gap:14px; }
.vcStep p{ margin:0; }
.vcConsent{ display:flex; gap:10px; align-items:flex-start; cursor:pointer; }
.vcConsent input{ width:1.35rem; height:1.35rem; flex:none; margin-top:.15rem; accent-color:var(--accent-100); }
/* il selettore file è una <label for> vestita da .btn: la regola ribatte
   .field label (display:block, .9rem, grigio) che altrimenti la sminuzza —
   layout e colori restano quelli di .btn, come il bottone Registra */
.field label.vcFilesBtn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-size:1rem; color:var(--on-accent); margin-bottom:0;
}
.vcClip{ display:flex; flex-direction:column; gap:6px; padding:10px 0; border-bottom:1px solid var(--panel-border); }
.vcClipMeta{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.9rem; }
.vcClip audio{ width:100%; height:40px; }
.vcProg{ height:10px; border-radius:6px; background:var(--panel-border); overflow:hidden; }
.vcProg > div{ height:100%; width:0%; background:var(--def-green); transition:width .2s; }
#vcRec.recording{ background:var(--warning); color:var(--on-accent); }

/* chi parlava? */
#whoPanel{ width:min(430px,100%); padding:22px; text-align:center; }
#whoPanel h3{ margin:0 0 18px; font-size:1.08rem; line-height:1.4; }
#whoBtns{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.whoBtn{ min-height:62px; border-radius:var(--rounded); background:var(--accent-700); color:var(--on-accent); font-size:1rem; font-weight:600; }
.whoBtn:hover{ background:var(--accent-100); color:var(--on-accent-ink); }
.whoBtn.unknown{ background:transparent; border:1.5px solid var(--border); color:var(--text-soft); }
#whoCd{ margin-top:14px; font-size:.78rem; color:var(--text-soft); }
#whoCd b{ color:var(--accent-100); }

/* ---- onboarding (stile desktop IGOOR): full-screen, contenuto al centro.
   Card larga e ariosa; su telefono diventa una pagina a schermo intero con la
   navigazione ancorata in fondo (stesso comportamento dei pannelli impostazioni) ---- */
#onboarding{
  position:fixed; inset:0; z-index:200; overflow-y:auto;
  background:linear-gradient(160deg,var(--bg-grad-a) 0%,var(--bg-grad-b) 100%) fixed;
  /* flex-start + margin:auto sulla card (sotto): center taglierebbe l'alto di
     una card più alta del viewport, rendendolo irraggiungibile anche scrollando */
  display:flex; align-items:flex-start; justify-content:center; padding:32px;
}
.ob-card{
  width:min(680px,100%); background:var(--panel-bg); border:1px solid var(--panel-border);
  border-radius:16px; padding:56px 64px; text-align:center;
  display:flex; flex-direction:column; gap:26px;
  margin:auto;  /* centra quando c'è spazio, si annulla quando la card traborda (scroll dall'alto) */
}
.ob-logos{ text-align:center; }
.ob-logo{ position:static; transform:none; display:block; height:2.6rem; width:auto; margin:0 auto; }
.ob-card h2{ margin:0; font-size:1.6rem; line-height:1.25; }
.ob-sub{ margin:0 0 10px; color:var(--text-soft); font-size:1.05rem; line-height:1.55; }
/* la nota private beta sul passo auth (al posto dell'invito al login):
   testo a sinistra, link waitlist in evidenza sotto */
#obBetaNote{ text-align:left; margin:0; }
#obBetaNote .beta-waitlist{ display:inline-block; margin-top:6px; font-weight:600; }
/* ogni fase è una colonna flex: gap uniforme e generoso tra gli elementi,
   niente contenuto "impilato" */
.ob-step{ display:flex; flex-direction:column; justify-content:center; gap:26px; }
.ob-account{ display:flex; align-items:center; justify-content:center; gap:8px; color:var(--ok); font-size:.98rem; }
#obLangs{ display:flex; flex-direction:column; gap:12px; }
#obLangs button{
  min-height:68px; border-radius:var(--rounded); background:var(--surface-strong);
  border:1.5px solid transparent; color:var(--text); font-size:1.12rem; font-weight:600;
  transition:background .15s, border-color .15s;
}
#obLangs button.on{
  border-color:var(--accent-100); color:var(--accent-100);
  background:color-mix(in srgb,var(--accent-100) 15%,transparent);
}
#obLangSub{ font-size:.85rem; margin:0; text-align:center; }  /* la nota sotto le lingue: più piccola del .ob-sub standard */
#obName{
  width:100%; border-radius:1rem; border:none;
  background:rgba(0,0,0,.25); color:var(--text); padding:1rem; outline:.125rem solid transparent; font-size:1.2rem; line-height:1.25;
  transition:all .25s;  /* skin input della uikit */
}
#obName:focus{ outline-color:var(--accent-100); background-color:var(--inputfocus-bg); }
.ob-microw{ display:flex; gap:12px; align-items:center; }
.ob-microw select{
  flex:1; min-width:0; border-radius:1rem; border:none;
  background:rgba(0,0,0,.25); color:var(--text); padding:1rem 3rem 1rem 1rem; outline:.125rem solid transparent; font-size:1.2rem; line-height:1.25;
  -webkit-appearance:none; appearance:none; cursor:pointer; transition:all .25s;  /* skin input della uikit */
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M18%209a1%201%200%200%201%20.8%201.6v.1l-6%206a1%201%200%200%201-1.4%200h-.1l-6-6-.1-.2H5V10.1L5%2010v-.5l.2-.1v-.2h.2v-.1l.2-.1h.2L6%209H18Z%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.3%22%20%2F%3E%3C%2Fsvg%3E");
  background-size:1.5rem; background-position:calc(100% - 1rem) center; background-repeat:no-repeat;
}
.ob-microw select:focus{ outline-color:var(--accent-100); background-color:var(--inputfocus-bg); }
.ob-microw .btn{ height:58px; flex:none; }
#obMicMeter{ height:10px; }
.ob-transcript{
  min-height:88px; border-radius:12px; background:var(--input-bg); border:1px solid var(--border);
  padding:14px 16px; text-align:left; font-size:1.02rem; line-height:1.5; color:var(--text);
}
.ob-transcript.empty{ color:var(--text-soft); font-style:italic; }
.ob-nav{ display:flex; align-items:center; gap:12px; margin-top:6px; }
#obNext{ margin-left:auto; }  /* il contatore (flex:1) spinge già: da solo, il bottone resta a destra */
.ob-nav .btn{ height:54px; padding:0 26px; font-size:1rem; }
/* i bottoni dell'onboarding seguono la uikit: fondo accent-700 con bevel e
   label bianca; il primario si distingue solo dalla taglia (.btn-primary) */
.ob-card .btn.primary{ background:var(--accent-700); color:var(--on-accent); font-size:1.3125rem; }
.ob-card .btn.primary:hover{ background:var(--accent-100); color:var(--on-accent-ink); filter:none; }
.ob-count{ flex:1; text-align:center; color:var(--text-soft); font-size:.95rem; }
/* logout dall'onboarding (visibile solo da connessi — decide obRender): la
   procedura deve poter essere abbandonata. Tablet/desktop: fisso in basso a dx
   dello schermo; telefono: in flusso sotto la nav, per non coprire Continua */
#obLogout{
  align-self:flex-end; padding:8px 2px; font-size:.85rem; color:var(--text-soft);
  text-decoration:underline; text-underline-offset:3px;
}
@media (min-width:481px){
  #obLogout{ position:fixed; right:18px; bottom:14px; }
}

/* ---- Google sign-in dentro la card onboarding (#google-btn: link nativo a
   /auth/google/start — OAuth redirect, nessuno script Google nella pagina;
   consenso prima-login iniettato in #auth-consent) ---- */
#onboarding #google-btn{
  display:flex; align-items:center; justify-content:center; gap:12px;
  width:100%; min-height:44px;
  border:1px solid var(--google-border); border-radius:var(--rounded);
  background:var(--google-bg); color:var(--google-fg);
  font-size:1rem; font-weight:600; text-decoration:none; cursor:pointer;
}
#onboarding #google-btn:hover{ background:var(--google-hover); }
#onboarding #google-btn:active{ background:var(--google-active); }
#onboarding #google-btn svg{ flex:none; }
/* tablet/desktop: come il mockup, dove il bottone GIS 400×40 era scalato a 540×54 */
@media (min-width:481px){
  #onboarding #google-btn{ min-height:60px; font-size:1.15rem; }
  #onboarding #google-btn svg{ width:24px; height:24px; }
}
#onboarding .auth-error{ display:none; color:var(--warning); font-size:.9rem; margin-top:14px; }
#onboarding #auth-consent{ text-align:left; margin-top:4px; }
#onboarding #auth-consent .consent-row{ display:flex; gap:10px; align-items:flex-start; font-size:.92rem; color:var(--text); line-height:1.5; margin-bottom:16px; }
#onboarding #auth-consent .consent-row input{ margin-top:3px; flex:none; width:18px; height:18px; }
#onboarding #auth-consent .consent-btn{
  display:block; width:100%; min-height:52px; border:none; border-radius:var(--rounded);
  background:var(--accent-100); color:var(--on-accent); font-size:.98rem; font-weight:700; cursor:pointer;
}
#onboarding #auth-consent .consent-btn:disabled{ opacity:.5; cursor:not-allowed; }
#onboarding #auth-consent .consent-back{ display:block; text-align:center; margin-top:12px; font-size:.85rem; }

/* ---- backup cifrato voci (codice di sincronizzazione) ---- */
.syncrow{ display:flex; gap:10px; align-items:center; margin-top:8px; flex-wrap:wrap; }
.syncrow input[type=text]{
  border-radius:1rem; border:none; background:rgba(0,0,0,.25);
  color:var(--text); padding:1rem; outline:.125rem solid transparent; min-width:0;
  font-size:1.2rem; line-height:1.25; transition:all .25s;  /* skin input della uikit */
}
.syncrow input[type=text]:focus{ outline-color:var(--accent-100); background-color:var(--inputfocus-bg); }
code.spk-code{
  display:block; margin:10px 0 0; padding:10px 12px; border-radius:8px;
  background:var(--input-bg); border:1px solid var(--border); color:var(--text);
  font-size:.95rem; letter-spacing:.06em; word-break:break-all;
}
#spkSyncMsg.ok{ color:var(--ok); }
#spkSyncMsg.err{ color:var(--warning); }

/* ---- feature tour (dopo l'onboarding di configurazione) ----
   Presentazione delle parti dell'interfaccia al primo ingresso (si rilancia
   dalla card Tutorial in Preferenze). Il «buco di luce» è #tourHole, un div
   posizionato dal JS sopra l'elemento del passo: lo scurimento è il suo
   box-shadow gigante — le ombre non catturano i pointer events, così ogni
   click/dwell finisce su #tour che copre tutto: l'elemento evidenziato è
   MAI interattivo. La card si appoggia sopra/sotto il bersaglio (JS, con
   flip se lo spazio manca). z-index ladder: 2 pannello · 100 overlay ·
   150 toast · 200 onboarding · 250 tour. */
#tour{ position:fixed; inset:0; z-index:250; }
#tourHole{
  position:absolute; border-radius:12px; pointer-events:none;
  box-shadow:0 0 0 2px var(--accent-100), 0 0 0 200vmax var(--modal-scrim);  /* l'anello accent sopra lo scuro */
  transition:top .3s ease, left .3s ease, width .3s ease, height .3s ease;
}
@media (prefers-reduced-motion:reduce){ #tourHole{ transition:none; } }
#tourCard{
  position:absolute; width:min(28rem, calc(100vw - 32px));
  background:var(--panel-bg); border:1px solid var(--panel-border); border-radius:16px;
  padding:22px 24px; text-align:center;
  display:flex; flex-direction:column; gap:12px;
  box-shadow:0 8px 30px rgba(0,0,0,.5);
}
#tourCard h3{ margin:0; font-size:1.35rem; line-height:1.25; }
#tourCard p{ margin:0; color:var(--text-soft); font-size:1.02rem; line-height:1.55; }
.tour-nav{ display:flex; align-items:center; gap:12px; margin-top:4px; }
#tourNext{ margin-left:auto; }
.tour-nav .btn{ height:54px; padding:0 26px; font-size:1rem; }
/* gerarchia bianco/nero dell'onboarding: Continua riempito, Salta trasparente bordato */
#tourCard .btn.primary, #tourCard .btn.primary:hover{ color:var(--on-accent); }
#tourCard .btn:not(.primary){
  background:transparent; border:1px solid var(--border); color:var(--text); padding:0 18px; box-shadow:none;
}
#tourCard .btn:not(.primary):hover{ background:color-mix(in srgb,var(--wash) 6%,transparent); color:var(--text); }

/* ---- breakpoint primario: tablet portrait è il layout base; telefono ≤480 ---- */
@media (max-width:480px){
  #shell{ max-width:none; }
  .brand img{ height:1.05rem; }
  /* topbar telefono fitta: badge solo icona, cluster destro compatto per non invadere il logo centrato */
  #spkLabel{ display:none; } #speakerBadge{ padding:6px 8px; }
  .iconbtn{ width:44px; height:44px; font-size:24px; }
  #stateBtn{ min-height:56px; font-size:1.02rem; }
  /* «Puoi ripetere per l'IA?» tra i mood e «Parlo con uno strumento»:
     su telefono non ci stanno */
  #repeatBtn, #icebreaker{ display:none; }
  /* a conversazione attiva il badge di stato lascia il posto al grande tasto
     «Termina conversazione»: da telefono la colonna sn (#railNewConv) non
     esiste, questa è l'unica via d'uscita. Larghezza tetto 38vw per non
     invadere il logo centrato. */
  #conn.on{ background:none; padding:0; gap:0; min-width:0; }
  #conn.on #connDot, #conn.on #connLabel{ display:none; }
  #connEnd{
    align-items:center; gap:8px; height:44px; padding:0 14px; max-width:38vw;
    border-radius:999px; background:var(--accent-700); color:var(--on-accent);
    font-size:.75rem; font-weight:700; line-height:1.15; text-align:left;
  }
  #conn.on #connEnd{ display:flex; }
  #connEnd i{ font-size:24px; flex:none; }
  #connEnd span{ overflow-wrap:anywhere; }
  #connEnd:active{ background:var(--accent-100); color:var(--on-accent-ink); }
  /* telefono: ordine del mobile IGOOR — conversazione, mood, input in fondo;
     niente barra scorciatoie (come IGOOR mobile, dove sopravvive solo «Ripeti») */
  #conv{ order:1; } #completions{ order:2; } #phrases{ order:2; } #inputArea{ order:3; }
  #keywords{ order:2; padding:4px 12px 6px; }  /* la card «affina» si allinea ai fumetti (le sezioni qui si paddano da sole) */
  /* niente riordino quando l'autocomplete è aperto (kb-open): la tastiera Android
     porta già l'input sopra di sé — spostare i completamenti in alto peggiora solo */
  /* le chips di affinamento restano visibili anche mentre si digita (order 2
     di base: compaiono subito sotto i completamenti, sopra la tastiera) —
     durante la composizione aggiungono la parola alla frase */
  #shortcuts{ display:none; }
  /* telefono: niente etichetta «affina:» — le chips (max 3, vedi renderKeywords) bastano da sole */
  #keywords .klabel{ display:none; }
  /* telefono: le chips di affinamento vanno a capo invece di uscire dai bordi */
  #keywords{ flex-wrap:wrap; }
  .kwchip{ flex:1 1 84px; }
  #inputArea{ padding-bottom:calc(12px + env(safe-area-inset-bottom)); }
  .mood .phrase:not(:first-of-type){ display:none; } /* telefono: una frase per mood, il consumo rivela la successiva */
  .bubble{ max-width:88%; font-size:1.05rem; }
  .phrase{ font-size:1rem; min-height:52px; }
  svg.igooricon{ width:26px; height:26px; }
  /* onboarding a schermo intero su telefono: contenuto centrato, nav ancorata in fondo */
  #onboarding{ padding:0; align-items:stretch; }
  .ob-card{ width:100%; height:100dvh; border-radius:0; border:none;
    padding:30px 26px calc(20px + env(safe-area-inset-bottom)); gap:22px; }
  .ob-logo{ height:2.2rem; }
  .ob-card h2{ font-size:1.45rem; }
  .ob-step{ gap:22px; }
  /* telefono: i bottoni lingua (prima schermata) in griglia 2×2 */
  #obLangs{ flex-direction:row; flex-wrap:wrap; }
  #obLangs button{ flex:1 1 45%; }
  .ob-nav{ margin-top:auto; }
  .overlay{ padding:0; align-items:stretch; }
  .panel{ width:100%; max-height:none; height:100dvh; border-radius:0; border:none; }
  /* telefono: Bio, Voce, Interlocutore, Preferenze — Documenti e Microfono restano su tablet/desktop */
  .tabs button[data-tab="docs"], .tabs button[data-tab="mic"]{ display:none; }
}
/* ---- tablet (target primario): verso il modello desktop IGOOR ----
   microfono grande e chiaro stile asrjs + flow a 3 colonne senza filtro */
@media (min-width:481px){
  #stateRow{ gap:16px; align-items:center; padding:0; }
  #speakerBadge{ font-size:.95rem; padding:9px 16px; }
  .brand img{ height:1.5rem; }
  /* topbar: pulsanti-icona più ampi (l'ingranaggio impostazioni era troppo piccolo) */
  .iconbtn{ width:46px; height:46px; font-size:26px; }
  /* struttura a 3 parti dell'header desktop IGOOR: mic (sx) | conversazione (altezza limitata, scrollabile) | tasto laterale (dx) */
  #recogRow{ display:flex; flex-direction:row; align-items:stretch; gap:0; flex:none; height:min(200px,20vh); padding:0; }
  #stateRow{ flex-direction:column; align-items:center; gap:12px; padding:0; flex:none; width:140px; }
  /* il mic riempie la colonna: massima superficie di click */
  #stateBtn{ flex:1 1 auto; width:100%; height:auto; min-height:0; border-radius:0; flex-direction:column; overflow:hidden; }
  #stateBtn i{ font-size:58px; }
  #stateBtn span{ font-size:.8rem; line-height:1.15; max-width:130px; overflow-wrap:anywhere; text-align:center; }
  #stateBtn[data-state="connecting"] i, #stateBtn[data-state="thinking"] i{ font-size:46px; animation:spin 1.1s linear infinite; }
  #conv{ flex:1; min-height:0; margin:0; }
  .bubble{ font-size:1.25rem; padding:14px 18px; }
  .bubble.msg-small{ font-size:1rem; }
  #icebreaker{
    flex:none; align-self:stretch; width:122px; min-height:0; margin:0;  /* tutta altezza, come la barra */
    flex-direction:column; justify-content:center; gap:12px; padding:18px 10px; border-radius:0; text-align:center; font-size:.85rem;
  }
  #icebreaker i{ font-size:30px; }
  /* un solo bottone «Puoi ripetere per l'IA»: su tablet/desktop resta la scorciatoia «Ripeti» */
  #repeatBtn{ display:none; }
  /* parte centrale (come IGOOR): la colonna di sn è RISERVATA — «termina
     conversazione» la riempie a tutta altezza solo a conversazione attiva, e
     fuori conversazione resta un gutter vuoto: suggerimenti e chips non
     transitano mai da lì, qualunque sia l'ordine di arrivo degli eventi.
     Effacer occupa la colonna del mic nella riga input. */
  #central{ display:flex; flex-direction:row; gap:0; flex:1; min-height:0; padding:0 0 8px; position:relative; }
  #railNewConv{
    position:absolute; left:0; top:58px; bottom:0;  /* flush sotto la fascia di Effacer (riga input 58) */
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    width:140px;
    padding:16px 10px; font-size:.88rem; border-radius:0;
  }
  #railNewConv i{ font-size:36px; }
  #centralRight{ flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; gap:8px; margin-left:140px; }
  #inputArea{ flex:none; padding:0; margin-left:-140px; width:calc(100% + 140px); }  /* 100% della RIGA: esce dal gutter, Effacer all'origine */
  /* le aree suggerimenti restano dentro il gutter riservato da centralRight:
   la riga input è l'unica a uscirne (100% della riga) */
  /* simmetria con la riga sopra: l'input è lungo quanto «Nouvelle conversation»
     (parte dove parte la conversazione, a filo di colonna) e l'invio riempie la
     colonna dell'icebreaker (122px, la stessa larghezza) */
  #textRow{ gap:0; }
  #sendBtn{ width:122px; }
  #clearBtn{ width:140px; }
  #clearBtn span{ display:inline; }
  #clearBtn i{ font-size:22px; }
  /* i 3 suggerimenti dell'autocomplete su una riga: resta posto alla tastiera virtuale */
  #completions{ flex-direction:row; align-items:stretch; gap:2rem; padding:2px 14px 4px 24px; }  /* gap ≥ coda del fumetto */
  .comp{ min-height:64px; font-size:1rem; }
  /* flow: le 3 colonne nello spazio superiore */
  #phrases{ flex:1; min-height:0; overflow-y:auto; padding:2px 0 4px 24px; }  /* aria dal tasto termina */
  /* le chips stanno SEMPRE in fondo al container: quando i mood cedono
     all'autocomplete la colonna si svuota e, senza auto-margin, la riga
     «affina:» salterebbe su — così resta inchiodata allo stesso posto */
  #keywords{ margin-top:auto; padding-left:24px; }  /* stacca «affiner:» dalla colonna del tasto termina */
  #moodGrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem; align-items:start; }
  .mood{ flex-direction:column; align-items:stretch; gap:6px; background:color-mix(in srgb,var(--wash) 3.5%,transparent); border-radius:var(--rounded); padding:8px 22px 8px 8px; }  /* destra: spazio per la coda dei fumetti dentro la card */
  .phrase{ min-height:66px; font-size:.98rem; padding:10px 12px; }
}

/* tablet landscape / desktop (modalità operativa): header compatto a 3 parti,
   riga nuova-conversazione + autocomplete, e tutto il resto al flow largo su 3 colonne.
   Principio: MASSIMIZZAZIONE della superficie di click — nessun tetto di larghezza:
   la UI cresce con la finestra e ogni bersaglio scala verso l'alto. */
@media (min-width:900px) and (orientation:landscape){
  #shell{ max-width:none; }
  #recogRow{ height:min(224px,20vh); padding:0; }
  #stateRow{ width:160px; }
  #stateBtn{ border-radius:0; }
  #stateBtn i{ font-size:72px; }
  #stateBtn[data-state="connecting"] i, #stateBtn[data-state="thinking"] i{ font-size:56px; }
  #stateBtn span{ font-size:.95rem; max-width:130px; overflow-wrap:anywhere; text-align:center; }
  .bubble{ font-size:1.375rem; padding:16px 20px; }
  .bubble.msg-small{ font-size:1.08rem; }
  #speakerBadge{ font-size:1.05rem; padding:11px 18px; }
  #central{ padding:0 0 10px; gap:14px; }
  #railNewConv{ width:160px; top:60px; padding:20px 12px; font-size:.95rem; }  /* flush: riga input 60 */

  #railNewConv i{ font-size:42px; }
  #centralRight{ margin-left:160px; }
  #textInput{ font-size:1.05rem; padding:0 18px; }
  #sendBtn{ width:122px; height:60px; font-size:26px; }
  #clearBtn{ width:160px; height:60px; }
  #inputArea{ margin-left:-160px; width:calc(100% + 160px); }
  #moodGrid{ gap:2.5rem; }
  .phrase{ min-height:76px; font-size:1.08rem; padding:14px 18px; }
  .comp{ min-height:76px; font-size:1.08rem; padding:14px 18px; }
  #repeatBtn{ min-height:58px; font-size:1.05rem; }
  #keywords{ gap:14px; padding:4px 0 6px 24px; }  /* le chips restano compatte: non scalano con le frasi */
  #keywords .klabel{ font-size:.78rem; }
  #emptyState span{ font-size:1.25rem; }
  #icebreaker{ width:122px; min-height:160px; font-size:.92rem; }  /* 122 = colonna dell'invio, per la simmetria */
  /* 9 bottoni in riga unica: fullscreen a sinistra, SOS a destra — come la
     barra di IGOOR desktop (minimize … help) */
  #shortcuts{ grid-template-columns:repeat(9,1fr); gap:10px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .shortcut{ padding:16px 6px; gap:6px; }
  svg.igooricon{ width:50px; height:50px; }
  .shortcut i.ph-light{ font-size:50px; }
  .shortcut span{ font-size:11px; }
}