/* IDLE SYNC — la web app, direzione B «Compagno» (design/webapp-v4-direzioni.md).
   Parli con qualcuno: la mascotte sul palco, un riquadro di dialogo da gioco che contiene la
   conversazione, un bottone lungo per parlare. In alto un header fluttuante, staccato dai bordi.
   Palette «Studio Crema» (26.09.2026): crema, schermo verde bosco con testo menta, terracotta per
   l'azione. Pixelify Sans (pixel moderno) per titoli, etichette e bottoni; Figtree per leggere.
   Ogni trasparenza ha un nome; tre durate e una curva sola. */


@font-face { font-family: "Figtree"; font-weight: 400 800; font-display: swap; src: url(fonts/figtree-latin-ext-var.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-weight: 400 800; font-display: swap; src: url(fonts/figtree-latin-var.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Pixelify Sans"; font-weight: 400 700; font-display: swap; src: url(fonts/pixelify-sans-latin-ext-var.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Pixelify Sans"; font-weight: 400 700; font-display: swap; src: url(fonts/pixelify-sans-latin-var.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* colori pieni — gli stessi della landing */
  --shell: #f3eee6;
  --shell-2: #e9e2d6;
  --shell-3: #dcd3c4;
  --shell-4: #c7bca9;
  --ink: #1c2320;
  --screen: #0c1f1a;
  --bezel: #1c2320;
  --dmg-0: #bdf2d5;
  --dmg-1: #5fb58c;
  --dmg-2: #1d4a3e;
  --dmg-3: #123a30;
  --phos: #5fe0a8;
  --ab: #d9502b;
  --ab-2: #aa3c1e;
  --ab-3: #74280f;
  --amber: #e8a33a;
  --err: #b3261e;

  /* trasparenze nominate */
  --ink-20: rgb(28 35 32 / 0.2);
  --ink-60: rgb(28 35 32 / 0.6);
  --ink-88: rgb(28 35 32 / 0.88);
  --shell-20: rgb(243 238 230 / 0.2);
  --shell-60: rgb(243 238 230 / 0.6);
  --shell-88: rgb(243 238 230 / 0.88);
  --dmg0-12: rgb(189 242 213 / 0.12);
  --phos-20: rgb(95 224 168 / 0.2);
  --phos-60: rgb(95 224 168 / 0.6);
  --amber-20: rgb(232 163 58 / 0.2);
  --black-50: rgb(0 0 0 / 0.5);

  --f-pixel: "Pixelify Sans", ui-rounded, system-ui, sans-serif; /* pixel moderno: la voce della marca */
  --f-sans: "Figtree", -apple-system, system-ui, sans-serif;
  --f-round: "Pixelify Sans", ui-rounded, system-ui, sans-serif;
  --f-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --curve: cubic-bezier(0.2, 0.8, 0.1, 1);
  --t-press: 0.06s;
  --t-fast: 0.18s;
  --t: 0.45s;
  /* dai componenti di 21st.dev (vedi js/motion.js): la curva del cassetto di vaul e due molle.
     linear() dove Safari lo conosce (17.2+); altrove la variabile non vale e resta «ease». */
  --curve-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --t-sheet: 0.5s;
  --spring: linear(0, 0.179, 0.456, 0.675, 0.817, 0.902, 0.949, 0.974, 0.987, 0.994, 0.997, 0.999, 1); /* Sliding Number: rigidità 280, smorzamento 18, massa 0,3 */
  --spring-bounce: linear(0, 0.079, 0.26, 0.478, 0.686, 0.857, 0.982, 1.061, 1.099, 1.108, 1.098, 1.078, 1.054, 1.032, 1.014, 1.001, 0.993, 0.989, 0.988, 0.99, 0.994, 0.999, 1);

  --grid-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Cpath d='M0 3.5h4M3.5 0v4' stroke='%230f380f' stroke-opacity='.07'/%3E%3C/svg%3E");
  --grid-dot-neg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Cpath d='M0 3.5h4M3.5 0v4' stroke='%23bdf2d5' stroke-opacity='.06'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");

  --app-h: 100dvh;

  /* chiaro: il guscio del Game Boy */
  --bg: var(--shell);
  --fg: var(--ink);
  --muted: var(--dmg-1);
  --panel: var(--shell-2);
  --edge: var(--shell-4);
  --drop: var(--shell-3);
  --floor-a: var(--shell-3);
  --floor-b: var(--shell-2);
  --dlg-bg: var(--dmg-3);
  --dlg-ink: var(--dmg-0);
  --dlg-dot: var(--grid-dot-neg);
  --dlg-sel: var(--dmg0-12);
  --key: var(--ink);
  --on-key: var(--shell);
  --float-bg: var(--shell-88);
  --sheet-bg: var(--shell);
  --code-bg: var(--dmg-0);
  --code-fg: var(--dmg-3);
  color-scheme: light;
}
:root[data-theme="dark"] {
  /* scuro: «luci spente», lo schermo retroilluminato sul divano */
  --bg: var(--ink);
  --fg: var(--shell);
  --muted: var(--dmg-3);
  --panel: #26302b;
  --edge: #0e1411;
  --drop: #080c0a;
  --floor-a: #26302b;
  --floor-b: #202925;
  --dlg-bg: var(--screen);
  --dlg-ink: var(--phos);
  --dlg-dot: var(--grid-dot-neg);
  --dlg-sel: var(--phos-20);
  --key: var(--bezel);
  --on-key: var(--shell);
  --float-bg: var(--ink-88);
  --sheet-bg: #161d1a;
  --code-bg: var(--screen);
  --code-fg: var(--phos);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  position: fixed; inset: 0 0 auto 0; height: var(--app-h);
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--fg);
  font: 400 17px / 1.45 var(--f-sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden; overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  padding: 0 0 env(safe-area-inset-bottom);
}
/* la grana della plastica, 5% */
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: var(--grain); opacity: 0.05; z-index: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; touch-action: manipulation; }
p, h1, h2, h3, ol, ul, pre { margin: 0; }
ol, ul { padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--phos); outline-offset: 2px; }
input, textarea, pre, .reply-text, .history-list, .clip-box { -webkit-user-select: text; user-select: text; }
svg { fill: currentColor; }
.px-ico { width: 20px; height: 20px; flex: none; shape-rendering: crispEdges; fill: currentColor; }

/* solo per i lettori di schermo: il testo intero accanto ai frammenti animati */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ——— notifiche impilate (idea di Sonner): l'ultima davanti, le altre dietro come sagome ——— */
.toaster { position: fixed; z-index: 90; left: 16px; right: 16px; top: calc(env(safe-area-inset-top) + 80px); margin: 0; padding: 0; transition: height var(--t) var(--curve); pointer-events: none; }
.toaster:empty { display: none; }
.toast {
  position: absolute; left: 0; right: 0; top: 0; pointer-events: auto; touch-action: none; overflow: hidden;
  padding: 12px 18px; border-radius: 24px; background: var(--fg); color: var(--bg);
  font: 500 14px / 1.4 var(--f-mono); box-shadow: 0 4px 0 var(--drop);
  transform-origin: 50% 100%;
  transform: translateY(calc(var(--y, 0px) + var(--swipe, 0px))) scale(var(--s, 1));
  opacity: 0;
  transition: transform 0.4s var(--curve), opacity 0.4s var(--curve), height 0.4s var(--curve), color var(--t-fast) linear;
}
.toast:not([data-mounted]) { transform: translateY(-100%) scale(var(--s, 1)); }
.toast[data-mounted="true"] { opacity: 1; }
.toaster:not(.open) .toast[data-front="false"] { color: transparent; box-shadow: 0 3px 0 var(--drop); }
.toast[data-swiping="true"] { transition: none; }
.toast[data-removed] { pointer-events: none; opacity: 0; }
.toast[data-removed="up"] { transform: translateY(calc(-100% - 24px)) scale(var(--s, 1)); }
.toast.bump { animation: bump 0.32s var(--curve); }
@keyframes bump { 35% { scale: 1.035; } }
@keyframes drop { from { transform: translateY(-14px); opacity: 0; } }

/* ——— l'header fluttuante ——— */
.float {
  position: absolute; z-index: 30; top: calc(env(safe-area-inset-top) + 10px); left: 10px; right: 10px;
  height: 60px; display: flex; align-items: center; gap: 4px; padding: 0 8px 0 14px;
  background: var(--float-bg); border-radius: 30px;
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: inset 0 0 0 2px var(--edge), 0 4px 0 var(--drop);
}
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--shell-4); }
body:not([data-state="offline"]) .dot { background: var(--phos); box-shadow: 0 0 0 3px var(--phos-20); }
body[data-state="offline"] .dot { animation: blink 1.2s steps(1) infinite; }
body[data-state="listening"] .dot { animation: led 0.5s steps(2) infinite; }
@keyframes led { 50% { box-shadow: 0 0 0 6px var(--phos-60); } }
@keyframes blink { 50% { opacity: 0; } }
.host-wrap { min-width: 0; flex: 0 1 auto; margin-left: 4px; display: flex; align-items: baseline; gap: 4px; overflow: hidden; }
.host { font: 650 13px / 1 var(--f-round); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.host-count { font: 400 12px / 1 var(--f-mono); white-space: nowrap; }
.health-btn { position: relative; flex: none; width: 40px; min-height: 44px; height: 44px; font: 750 17px / 1 var(--f-round); color: var(--ink); z-index: 0; }
.health-btn::before { content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--amber); z-index: -1; box-shadow: 0 0 0 3px var(--amber-20); }
.chip {
  margin-left: auto; min-width: 0; flex: 0 1 auto; height: 44px; display: flex; align-items: center; gap: 5px; padding: 0 10px; border-radius: 22px;
  background: var(--panel); box-shadow: inset 0 -2px 0 var(--edge); font: 500 13px / 1 var(--f-mono); white-space: nowrap;
}
.chip-icon { display: grid; }
.chip-icon .px-ico { width: 14px; height: 14px; }
.chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; max-width: 84px; }
.chip-batt:empty { display: none; }
.chip-text:empty + .chip-batt::before { content: none; }
.chip-text:not(:empty) + .chip-batt::before { content: "· "; }
.float .menu-btn { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 22px; margin-left: auto; }
.chip:not([hidden]) ~ .menu-btn { margin-left: 0; }
.float .menu-btn svg { width: 22px; height: 22px; shape-rendering: crispEdges; }
.float .menu-btn:active, .float .menu-btn[aria-expanded="true"] { background: var(--panel); }

/* i permessi: un pannello sotto la capsula */
.health {
  position: absolute; z-index: 29; top: calc(env(safe-area-inset-top) + 78px); left: 10px; right: 10px;
  padding: 14px 16px; border-radius: 18px; background: var(--sheet-bg); box-shadow: inset 0 0 0 2px var(--amber), 0 4px 0 var(--drop);
  animation: drop var(--t) var(--curve);
}
.health-title { font: 600 16px / 1.35 var(--f-sans); }
.health-list li { margin-top: 10px; font: 400 15px / 1.45 var(--f-sans); }
.health-list li strong { display: block; font: 650 15px / 1.2 var(--f-round); text-transform: uppercase; margin-bottom: 2px; }
.health-list li.hint { font: 400 14px / 1.45 var(--f-mono); padding-top: 10px; border-top: 1px dashed var(--fg); }

/* ——— il palco ——— */
.stage { position: relative; z-index: 1; flex: 1 1 auto; min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-top: calc(env(safe-area-inset-top) + 78px); }
.buddy-slot { position: relative; z-index: 2; width: var(--bsize, 200px); height: var(--bsize, 200px); margin-bottom: -8px; display: grid; place-items: center; transition: width var(--t) var(--curve), height var(--t) var(--curve); }
.buddy-slot .mark { width: 58%; height: auto; }
.has-buddy .buddy-slot .mark { display: none; }
.buddy { position: absolute; inset: 0; display: block; border-radius: 16px; overflow: hidden; }
/* buddy.js misura il suo contenitore: la tela segue il posto, mai il contrario */
.buddy canvas { display: block; width: 100% !important; height: 100% !important; }
.buddy-px { position: absolute; left: 50%; top: 40%; width: 6px; height: 6px; background: var(--phos); animation: px 0.6s steps(6) forwards; pointer-events: none; }
@keyframes px { to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
.floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 30px; z-index: 1;
  background-image: linear-gradient(90deg, var(--floor-a) 50%, var(--floor-b) 50%), linear-gradient(90deg, var(--floor-b) 50%, var(--floor-a) 50%);
  background-size: 16px 8px, 16px 8px; background-position: 0 0, 8px 8px; background-repeat: repeat-x;
  border-top: 2px solid var(--edge);
}
/* il logo a monitor, finché la mascotte non è pronta (o senza WebGL e senza 2D) */
.mark { border-radius: 24%; }

/* ——— il riquadro di dialogo, doppio bordo pixel ——— */
.dialog {
  position: relative; z-index: 2; flex: none; margin: 8px 12px 0; min-height: 150px; max-height: 42%;
  display: flex; flex-direction: column;
  background-color: var(--dlg-bg); background-image: var(--dlg-dot); color: var(--dlg-ink);
  border: 3px solid var(--dlg-ink); border-radius: 3px;
  box-shadow: inset 0 0 0 3px var(--dlg-bg), inset 0 0 0 5px var(--dlg-ink), 4px 4px 0 var(--edge);
  padding: 8px;
  transition: max-height var(--t) var(--curve);
}
.home { padding: 8px 10px 4px; }
.greet { font: 400 20px / 1.1 var(--f-pixel); text-transform: uppercase; }
.quip { margin-top: 8px; font: 500 18px / 1.4 var(--f-sans); }
.greet-sub { margin-top: 8px; font: 400 14px / 1.45 var(--f-mono); }
.dlg-foot { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.dlg-foot:not(:has(:not([hidden]))) { display: none; }
.dlg-btn { min-width: 44px; height: 44px; padding: 0 10px; font: 650 15px / 1 var(--f-round); text-decoration: underline; text-underline-offset: 4px; }
.dlg-more { width: 44px; height: 44px; display: grid; place-items: center; }
.dlg-more i { border: 8px solid transparent; border-top: 10px solid currentColor; border-bottom: 0; animation: blink 1s steps(1) infinite; }

/* la conversazione della sessione: un registro, niente fumetti; si scorre dentro il riquadro */
.thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 10px 10px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.msg + .msg.user { margin-top: 14px; padding-top: 14px; border-top: 2px dashed var(--dlg-ink); }
.msg.user { display: block; }
.msg.user .who { font: 650 13px / 1 var(--f-round); text-transform: uppercase; margin-bottom: 4px; }
.msg.user .bubble { display: block; width: 100%; text-align: left; font: 500 15px / 1.45 var(--f-mono); padding: 4px 0; border-radius: 2px; overflow-wrap: anywhere; }
.msg.user .bubble::before { content: "> "; }
.msg.user.mine .bubble { cursor: pointer; }
.msg.user.mine .bubble:active { background: var(--dlg-sel); }
.msg.user.draft .bubble::after { content: ""; display: inline-block; width: 0.55em; height: 1.05em; margin-left: 2px; vertical-align: -0.15em; background: currentColor; animation: blink 1s steps(1) infinite; }
.msg.bot { margin-top: 6px; }
.msg.bot .bubble { display: flex; flex-direction: column-reverse; gap: 8px; }
.reply-text { font: 400 17px / 1.45 var(--f-sans); white-space: pre-wrap; overflow-wrap: anywhere; }
.reply-text.pending { font: 400 14px / 1.45 var(--f-mono); }
.reply-text.pending::after { content: " ▌"; animation: blink 0.8s steps(1) infinite; } /* cursore: i testi di attesa finiscono già con «…» */
/* attesa: una luce passa sulle lettere, a scatti come su un LCD (Text Shimmer, motion-primitives) */
.shim i { font-style: normal; opacity: 0.55; animation: shim var(--shim-d, 1.6s) steps(3, end) infinite; animation-delay: calc(var(--i) * 45ms); }
@keyframes shim { 0% { opacity: 1; } 16%, 100% { opacity: 0.55; } }
/* risposta nuova: parola per parola (Text Effect, motion-primitives), poi torna testo semplice */
.reply-text.words .w { display: inline-block; animation: word 0.38s var(--curve) both; animation-delay: calc(var(--i) * 28ms); }
@keyframes word { from { opacity: 0; transform: translateY(0.3em); } }
.steps { display: grid; gap: 2px; }
.steps:empty { display: none; }
.steps li { display: grid; grid-template-columns: 18px 1fr 16px; align-items: start; column-gap: 8px; padding: 2px 0; }
.steps .tile { display: grid; place-items: center; padding-top: 2px; }
.steps .tile svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.step-text { display: flex; flex-direction: column; min-width: 0; }
.step-title { font: 500 14px / 1.35 var(--f-sans); }
.step-detail { font: 400 12px / 1.35 var(--f-mono); overflow-wrap: anywhere; }
.step-detail:empty { display: none; }
/* il testo tecnico di un comando: solo a riquadro espanso */
body:not(.reading) .step-detail.code { display: none; }
.step-state { display: grid; place-items: center; padding-top: 3px; }
.step-state svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: square; }
.step-state.spin { width: 12px; height: 12px; margin-top: 4px; background: conic-gradient(currentColor 0 25%, transparent 0 50%, currentColor 0 75%, transparent 0); animation: quad 0.5s steps(4) infinite; }
@keyframes quad { to { transform: rotate(360deg); } }
.steps li.err { color: var(--err); }
.files { display: grid; gap: 6px; margin-top: 8px; }
.files:empty { display: none; }
.file { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border: 2px solid currentColor; border-radius: 30px; color: inherit; text-decoration: none; }
.file .tile { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bg); }
.file-text { display: flex; flex-direction: column; min-width: 0; }
.file-name { font: 500 14px / 1.3 var(--f-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-size { font: 400 12px / 1.3 var(--f-mono); opacity: 0.7; }
.file-open { font: 600 13px / 1 var(--f-sans); padding: 8px 12px; border-radius: 999px; color: var(--bg); background: var(--fg); }
.file:active { transform: translateY(1px); }
:root[data-theme="dark"] .steps li.err { color: var(--amber); }

/* il campo di testo: la stessa cornice diventa il tuo riquadro */
.composer { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 4px 10px 6px; }
.composer-head { display: flex; justify-content: space-between; align-items: center; min-height: 22px; font: 650 13px / 1 var(--f-round); }
.composer-info { font: 400 12px / 1 var(--f-mono); }
#text {
  flex: 1 1 auto; width: 100%; min-height: calc(2 * 1.45em); resize: none; border: 0; background: transparent; color: var(--dlg-ink);
  padding: 6px 0 0; font: 500 18px / 1.45 var(--f-sans); caret-color: var(--ab); overflow-y: auto;
}
:root[data-theme="dark"] #text { caret-color: var(--phos); }
#text::placeholder { color: var(--dlg-ink); opacity: 0.72; }
#text:focus-visible { outline: none; }

/* ——— azioni rapide: un menu da console dentro lo schermo ——— */
.qa-menu { margin-top: 10px; display: grid; }
.qa-menu:empty { display: none; }
.home:has(.qa-menu:not(:empty)) .greet-sub { display: none; } /* il menu dice già cosa si può fare */
/* sulla schermata iniziale col menu: il riquadro prende l'altezza che serve, la mascotte si adatta
   all'altezza dello schermo e, se proprio non c'è posto, il menu scorre dentro il riquadro */
body:not(.chatting):not(.writing):has(.qa-menu:not(:empty)) .dialog { max-height: none; min-height: 0; flex: 0 1 auto; }
body:not(.chatting):not(.writing):has(.qa-menu:not(:empty)) .buddy-slot { --bsize: clamp(110px, 24vh, 200px); }
.home { min-height: 0; overflow-y: auto; scrollbar-width: none; }
.qa-row { min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 4px; text-align: left; color: var(--dlg-ink); font: 500 16px / 1.2 var(--f-sans); border-radius: 4px; }
.qa-cur { flex: none; width: 14px; font-size: 13px; visibility: hidden; }
.qa-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* il cursore sta sulla prima riga e segue il dito o il mouse, come nel menu di un gioco */
.qa-menu:not(:hover):not(:focus-within) .qa-row:first-child .qa-cur, .qa-row:hover .qa-cur, .qa-row:focus-visible .qa-cur, .qa-row:active .qa-cur { visibility: visible; }
.qa-row:active { background: var(--dlg-ink); color: var(--dlg-bg); }
.qa-row:focus-visible { outline: 2px solid var(--dlg-ink); outline-offset: -2px; }
.qa-row.instant .qa-name::after { content: ""; display: inline-block; width: 8px; height: 10px; margin-left: 6px; background: currentColor; clip-path: polygon(40% 0, 100% 0, 60% 45%, 100% 45%, 20% 100%, 45% 55%, 0 55%); }
.qa-row.add { font: 650 14px / 1 var(--f-round); text-transform: uppercase; opacity: 0.8; }
body[data-state="thinking"] .qa-row:not(.add), body[data-state="offline"] .qa-row:not(.add) { opacity: 0.45; pointer-events: none; }

/* ——— la console: un grande tasto tondo al centro (primario), due tondi neutri ai lati ——— */
.bar { position: relative; z-index: 2; flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 12px 14px; }
.talk-cap { display: flex; justify-content: center; gap: 10px; font: 650 12px / 1 var(--f-round); letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg); opacity: 0.72; text-align: center; min-height: 11px; }
/* in ascolto: un contatore da registratore accanto al verbo (AI Voice Input, Kokonut UI) */
.talk-time { font-variant-numeric: tabular-nums; }
.talk-time:empty { display: none; }
.talk-time::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; vertical-align: 1px; background: var(--ab); animation: blink 1s steps(1) infinite; }
:root[data-theme="dark"] .talk-time::before { background: var(--phos); }
.deck { width: 100%; max-width: 360px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center; }
.talk {
  position: relative; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: var(--ab); color: var(--shell); box-shadow: inset 0 -6px 0 var(--ab-2), 0 5px 0 var(--edge), 0 0 0 6px var(--ab-10, transparent);
  touch-action: none; -webkit-touch-callout: none;
  transition: transform var(--t-fast) var(--curve), background var(--t-fast) linear, box-shadow var(--t-fast) linear;
}
.talk:active, .talk.down { transform: translateY(4px); box-shadow: inset 0 -2px 0 var(--ab-2), 0 1px 0 var(--edge); transition-duration: var(--t-press); }
.talk-ico { position: relative; z-index: 2; width: 34px; height: 34px; fill: currentColor; shape-rendering: crispEdges; }
/* in ascolto: barre a scatti dentro il tasto e anelli che si allargano fuori (Ripple, Magic UI).
   Solo transform e opacity: prima erano height e box-shadow, cioè ridisegno a ogni fotogramma. */
.talk-wrap { position: relative; display: grid; place-items: center; }
.rings { position: absolute; inset: 0; z-index: -1; pointer-events: none; } /* sotto i tasti ai lati */
.rings i { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--ab); opacity: 0; }
body[data-state="listening"] .rings i { animation: ripple 1.8s cubic-bezier(0.2, 0.6, 0.4, 1) infinite; }
.rings i:nth-child(2) { animation-delay: 0.6s; } .rings i:nth-child(3) { animation-delay: 1.2s; }
@keyframes ripple { from { transform: scale(1); opacity: 0.6; } to { transform: scale(1.5); opacity: 0; } }
/* ogni pezzo di frase riconosciuto: un colpo (le parole arrivano solo mentre si parla) */
.talk-wrap.heard .rings { animation: heard 0.34s var(--curve); }
.talk-wrap.heard .lvl { animation: heard 0.34s var(--curve); }
@keyframes heard { 30% { transform: scale(1.1); } }
.lvl { position: absolute; inset: 0; display: flex; gap: 4px; justify-content: center; align-items: center; opacity: 0; }
.lvl i { width: 7px; height: 44px; background: var(--shell); border-radius: 2px; transform: scaleY(0.23); }
body[data-state="listening"] .lvl { opacity: 1; }
body[data-state="listening"] .talk-ico { opacity: 0; }
body[data-state="listening"] .lvl i { animation: eq 0.42s steps(3) infinite alternate; }
.lvl i:nth-child(2) { animation-delay: -0.12s !important; } .lvl i:nth-child(3) { animation-delay: -0.3s !important; } .lvl i:nth-child(4) { animation-duration: 0.3s !important; }
@keyframes eq { to { transform: scaleY(1); } }
/* pensa: il tasto diventa «ferma» (quadrato al posto del microfono) */
body[data-state="thinking"] .talk { background: var(--bezel); box-shadow: inset 0 -6px 0 var(--ink), 0 5px 0 var(--edge); }
body[data-state="thinking"] .talk-ico { opacity: 0; }
body[data-state="thinking"] .talk::after { content: ""; position: absolute; width: 26px; height: 26px; border-radius: 4px; background: var(--shell); }
body[data-state="offline"] .talk, body[data-state="approval"] .talk { background: var(--panel); color: var(--fg); box-shadow: inset 0 -6px 0 var(--edge); }
/* i tasti secondari: tondi, neutri, più piccoli; non competono con quello al centro */
.round-btn { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); color: var(--fg); box-shadow: inset 0 0 0 2px var(--edge), 0 3px 0 var(--edge); transition: transform var(--t-fast) var(--curve); }
.round-btn:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px var(--edge); transition-duration: var(--t-press); }
.round-btn svg { width: 24px; height: 24px; fill: currentColor; shape-rendering: crispEdges; }
body[data-state="offline"] #deckScreen { opacity: 0.4; pointer-events: none; }

.writebar { flex-direction: row; align-items: center; }
.wb-x { flex: none; width: 56px; height: 56px; border-radius: 28px; background: var(--panel); display: grid; place-items: center; box-shadow: inset 0 -3px 0 var(--edge); }
.wb-x svg { width: 18px; height: 18px; shape-rendering: crispEdges; }
.send { flex: 1 1 auto; height: 56px; border-radius: 28px; background: var(--ab); color: var(--shell); font: 650 17px / 1 var(--f-round); box-shadow: inset 0 -4px 0 var(--ab-2); }
.send:active { transform: translateY(2px); box-shadow: none; }
.send[aria-disabled="true"] { background: var(--panel); color: var(--fg); box-shadow: inset 0 -3px 0 var(--edge); }

/* ——— conversazione, scrittura, lettura: il palco cede spazio al riquadro ——— */
body.chatting .stage { flex: 0 0 auto; min-height: 0; }
body.chatting .buddy-slot { --bsize: 96px; }
body.chatting .dialog { flex: 1 1 auto; max-height: none; min-height: 0; }
body.writing .stage { flex: 0 0 auto; min-height: 0; }
body.writing .buddy-slot { --bsize: 72px; }
body.writing .dialog { flex: 1 1 auto; max-height: none; min-height: 140px; }
body.writing #bar { display: none; }
body.reading .stage { display: none; }
body.reading .dialog { margin-top: calc(env(safe-area-inset-top) + 80px); }
@media (max-height: 700px) {
  .talk { width: 84px; height: 84px; }
  .round-btn { width: 54px; height: 54px; }
  .dialog { min-height: 132px; }
  .quip { font-size: 17px; }
  .greet-sub { display: none; }
  body.chatting .buddy-slot { --bsize: 76px; }
}

/* ——— telefoni stretti (iPhone SE, mini): meno cose in testa, pulsante su una riga ——— */
@media (max-width: 380px) {
  .float { gap: 2px; padding-left: 12px; }
  .float:has(.chip:not([hidden])) .host-wrap { display: none; } /* il pallino dice già «collegato» */
  .chip-text { max-width: 110px; }

}

/* ——— proposta di scorciatoia (il compagno impara) ——— */
.msg.suggest { margin-top: 12px; }
.sg { padding: 12px 14px; border: 2px dashed var(--dlg-ink); border-radius: 14px; }
.sg-kicker { font: 650 12px / 1 var(--f-round); text-transform: uppercase; }
.sg-text { margin-top: 8px; font: 600 16px / 1.3 var(--f-sans); }
.sg-ask { margin-top: 4px; font: 400 15px / 1.4 var(--f-sans); }
.sg-actions { display: flex; gap: 8px; margin-top: 10px; }
.sg-actions button { min-height: 40px; padding: 0 16px; border-radius: 20px; font: 600 14px / 1 var(--f-sans); }
.sg-yes { background: var(--dlg-ink); color: var(--dlg-bg); }
.sg-no { box-shadow: inset 0 0 0 2px var(--dlg-ink); color: var(--dlg-ink); }

/* ——— Impostazioni: la scheda di Pixel in cima ——— */
.pixel-card { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 24px; text-align: left; color: var(--dlg-ink); background: var(--dlg-bg); background-image: var(--dlg-dot); box-shadow: 0 4px 0 var(--edge); transition: transform var(--t-fast) var(--curve); }
.pixel-card:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--edge); }
.pc-face img { width: 64px; height: 64px; border-radius: 18px; display: block; }
.pc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pc-name { font: 400 24px / 1 var(--f-pixel); text-transform: uppercase; }
.pc-sub { font: 500 15px / 1.3 var(--f-sans); opacity: 0.9; }
.pc-go { font: 400 28px / 1 var(--f-sans); opacity: 0.8; }
.cell-chevron { font: 400 22px / 1 var(--f-sans); opacity: 0.5; margin-left: -4px; }
.group-gap { margin-top: 12px; }
.group.about { margin-top: 28px; opacity: 0.85; }

/* ——— il mestiere ——— */
.profile-sub { font: 400 16px / 1.45 var(--f-sans); margin: -8px 4px 18px; }
.profile-suggest { padding: 16px; border-radius: 22px; background: var(--dlg-bg); background-image: var(--dlg-dot); color: var(--dlg-ink); box-shadow: inset 0 0 0 3px var(--dlg-ink); margin-bottom: 18px; }
.ps-kicker { font: 650 13px / 1 var(--f-round); text-transform: uppercase; }
.ps-text { margin-top: 8px; font: 500 17px / 1.4 var(--f-sans); }
.profile-suggest .primary-btn { margin-top: 14px; }
.profile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 8px; }
.pg-item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 0; font: 500 14px / 1.2 var(--f-sans); text-align: center; color: var(--fg); }
.pg-dot { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); box-shadow: inset 0 0 0 2px var(--edge), 0 3px 0 var(--edge); transition: transform var(--t-fast) var(--curve); }
.pg-dot svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pg-item:active .pg-dot { transform: translateY(3px); box-shadow: inset 0 0 0 2px var(--edge); }
.pg-item[aria-current="true"] .pg-dot { background: var(--ab); color: var(--shell); box-shadow: inset 0 -4px 0 var(--ab-2), 0 3px 0 var(--edge); }
.pg-item[aria-current="true"] { font-weight: 600; }
.profile-custom { margin-top: 18px; }
.profile-custom textarea { width: 100%; padding: 12px 14px; border-radius: 18px; border: 2px solid var(--edge); background: var(--panel); color: var(--fg); font: 400 16px / 1.4 var(--f-sans); resize: none; }
.profile-status { margin: 14px 4px 0; font: 500 15px / 1.4 var(--f-mono); min-height: 1em; }
.profile-status.working::after { content: " ▌"; animation: blink 0.8s steps(1) infinite; }
#profileRow .cell-label { flex: 1; }

/* ——— menu ——— */
.scrim { position: fixed; inset: 0; z-index: 40; background: var(--black-50); }
.scrim.clear { background: transparent; }
.menu {
  position: fixed; z-index: 41; top: calc(env(safe-area-inset-top) + 78px); right: 10px; width: min(290px, calc(100vw - 20px));
  padding: 6px; border-radius: 18px; background: var(--sheet-bg); box-shadow: inset 0 0 0 2px var(--edge), 0 4px 0 var(--drop);
  animation: drop var(--t-fast) var(--curve);
}
.menu-row { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 0 12px; border-radius: 12px; text-align: left; font: 500 16px / 1.2 var(--f-sans); }
.menu-row:active { background: var(--panel); }
.menu-row + .menu-row { border-top: 1px dashed var(--edge); }
.menu-row.danger { color: var(--ab); }
:root[data-theme="dark"] .menu-row.danger { color: var(--amber); }
.menu-icon { display: grid; place-items: center; width: 22px; }
#voiceBtn.off .menu-icon { opacity: 0.5; }

/* ——— fogli dal basso ——— */
.sheet {
  position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; max-height: 88%; overflow-y: auto;
  padding: 6px 18px calc(18px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0;
  background: var(--sheet-bg); color: var(--fg); box-shadow: 0 -4px 0 var(--edge);
  overscroll-behavior: contain;
  animation: up var(--t-sheet) var(--curve-sheet);
  transition: transform var(--t-sheet) var(--curve-sheet);
}
@keyframes up { from { transform: translateY(100%); } }
/* cassetto (vaul): si trascina giù per chiudere; dalla maniglia sempre, da tutto il foglio se non scorre */
.drawer .grabber, .drawer .sheet-head, .drawer:not(.scrolls) { touch-action: none; }
.drawer.dragging { transition: none; }
.drawer.closing { transition-duration: 0.36s; pointer-events: none; }
.scrim:not(.clear) { animation: fade var(--t-sheet) var(--curve-sheet); transition: opacity 0.36s var(--curve-sheet); }
@keyframes fade { from { opacity: 0; } }
.grabber { position: relative; display: block; width: 44px; height: 5px; margin: 6px auto 8px; border-radius: 3px; background: var(--edge); }
.grabber::after { content: ""; position: absolute; inset: -12px -48px; } /* la maniglia si prende anche un po' fuori */
.sheet-head { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
.sheet-h { font: 650 17px / 1.1 var(--f-round); text-transform: uppercase; }
.sheet-kicker { font: 650 15px / 1.2 var(--f-round); margin-top: 4px; }
.sheet-title { margin-top: 6px; font: 600 20px / 1.3 var(--f-sans); }
.sheet-sub { margin-top: 6px; font: 400 15px / 1.45 var(--f-sans); }
.sheet-note { font: 400 14px / 1.45 var(--f-mono); margin: 8px 0; }
.code { margin-top: 12px; max-height: 38vh; overflow: auto; padding: 12px 14px; border-radius: 4px; background: var(--code-bg); color: var(--code-fg); font: 400 14px / 1.5 var(--f-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.choice { display: flex; gap: 8px; margin-top: 16px; }
.no-btn { flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--key); color: var(--on-key); font: 650 19px / 1 var(--f-round); box-shadow: 0 4px 0 var(--edge); }
.no-btn:active { transform: translateY(3px); box-shadow: none; }
.slider { position: relative; flex: 1 1 auto; height: 64px; border-radius: 32px; background: var(--dmg-0); color: var(--dmg-3); overflow: hidden; touch-action: none; }
.slider-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-left: 64px; font: 650 15px / 1.15 var(--f-round); text-transform: uppercase; text-align: center; }
.knob { position: absolute; left: 5px; top: 5px; width: 54px; height: 54px; border-radius: 50%; background: var(--ab); color: var(--shell); display: grid; place-items: center; box-shadow: inset 0 -3px 0 var(--ab-2); cursor: grab; touch-action: none; }
.knob svg { width: 20px; height: 20px; }
.slider.back .knob { transition: transform var(--t-fast) var(--curve); }
.text-btn { min-height: 44px; min-width: 44px; padding: 0 16px; font: 500 16px / 1 var(--f-sans); color: var(--fg); border-radius: 22px; }
.text-btn.strong { font: 650 15px / 1 var(--f-round); text-transform: uppercase; background: var(--panel); box-shadow: inset 0 -2px 0 var(--edge); }
.primary-btn { width: 100%; min-height: 56px; margin-top: 16px; border-radius: 28px; background: var(--ab); color: var(--shell); font: 650 17px / 1 var(--f-round); text-transform: uppercase; box-shadow: inset 0 -4px 0 var(--ab-2); }
.primary-btn:disabled { opacity: 0.6; }

/* stato del Mac nel foglio */
.mac-card { display: grid; gap: 16px; padding: 6px 0 4px; }
.lab { font: 650 13px / 1 var(--f-round); text-transform: uppercase; margin-bottom: 8px; }
.np-title { font: 650 19px / 1.25 var(--f-round); text-transform: uppercase; overflow-wrap: anywhere; }
.np-artist { font: 400 15px / 1.35 var(--f-sans); }
.np-controls { display: flex; gap: 10px; margin-top: 12px; }
.np-btn { width: 56px; height: 56px; border-radius: 50%; background: var(--key); color: var(--on-key); display: grid; place-items: center; box-shadow: 0 3px 0 var(--edge); }
.np-btn:active { transform: translateY(2px); box-shadow: none; }
.np-btn svg { width: 22px; height: 22px; shape-rendering: crispEdges; }
.np-btn .i-pause, #wPlaying.playing .np-btn .i-play { display: none; }
#wPlaying.playing .np-btn .i-pause { display: block; }
.mac-row { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; }
.pile { display: flex; gap: 3px; width: 112px; height: 26px; padding: 3px; border: 2px solid var(--fg); position: relative; }
.pile::after { content: ""; position: absolute; right: -7px; top: 6px; width: 4px; height: 10px; background: var(--fg); }
.pile i { flex: 1; background: var(--fg); opacity: 0; }
.pile i.on { opacity: 1; transition: opacity 0s calc(var(--i) * 45ms); } /* all'apertura si accendono una a una */
.batt.low .pile i.on { background: var(--err); }
.batt-text { display: flex; align-items: flex-start; white-space: pre; margin-top: 6px; font: 500 14px / 1.3 var(--f-mono); }
/* numeri che scorrono (Sliding Number, motion-primitives): una colonna 0-9 per cifra, su una molla */
.num { display: inline-flex; vertical-align: top; --roll-h: 1.3em; }
.lab .num { --roll-h: 1em; }
.roll { display: inline-flex; }
.roll-d { display: inline-block; height: var(--roll-h); overflow: hidden; }
.roll-col { display: flex; flex-direction: column; transform: translateY(calc(var(--v, 0) * -1 * var(--roll-h))); transition: transform 0.6s var(--spring); }
.roll-col span { height: var(--roll-h); line-height: var(--roll-h); text-align: center; }
.vol-row { display: flex; align-items: center; gap: 10px; }
.mute-btn { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); }
.mute-btn svg { width: 20px; height: 20px; shape-rendering: crispEdges; }
.mute-btn .i-off, .vol.muted .mute-btn .i-on { display: none; }
.vol.muted .mute-btn .i-off { display: block; }
.sheet-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.link-tile { min-height: 56px; display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 28px; font-size: 15px; background: var(--panel); box-shadow: inset 0 -3px 0 var(--edge); font: 500 15px / 1.2 var(--f-sans); text-align: left; }

/* range a tacche */
.range { -webkit-appearance: none; appearance: none; flex: 1 1 auto; width: 100%; height: 44px; background: transparent; --p: 50%; }
.range::-webkit-slider-runnable-track { height: 14px; border: 2px solid var(--fg); border-radius: 7px; background: linear-gradient(90deg, var(--fg) var(--p), transparent var(--p)); }
.range::-moz-range-track { height: 10px; border: 2px solid var(--fg); border-radius: 7px; background: linear-gradient(90deg, var(--fg) var(--p), transparent var(--p)); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -9px; border-radius: 50%; background: var(--ab); box-shadow: inset 0 -3px 0 var(--ab-2); }
.range::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--ab); }
.range-lab { font: 650 17px / 1 var(--f-round); width: 16px; text-align: center; }

/* ——— pagine: opzioni, cronologia, schermo, appunti ——— */
.page { position: fixed; z-index: 45; inset: 0; background: var(--bg); color: var(--fg); display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); animation: page-in var(--t) var(--curve); }
/* Il mestiere si apre da Impostazioni: deve stare sopra la pagina che lo apre (nel DOM viene prima). */
#profile { z-index: 46; }
@keyframes page-in { from { transform: translateY(24px); opacity: 0; } }
.page-bar { flex: none; display: flex; justify-content: space-between; align-items: center; min-height: 60px; padding: 8px 12px; }
.page-scroll { flex: 1 1 auto; overflow-y: auto; padding: 0 16px calc(32px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.large-title { font: 750 32px / 1.1 var(--f-round); letter-spacing: -0.01em; margin: 4px 0 18px; }
.group-header { font: 650 13px / 1 var(--f-round); text-transform: uppercase; margin: 22px 4px 8px; }
.group { border-radius: 14px; background: var(--panel); box-shadow: inset 0 0 0 2px var(--edge); overflow: hidden; }
.group-footer { margin: 8px 4px 0; font: 400 14px / 1.45 var(--f-sans); }
.page-footer { margin: 28px 0 8px; text-align: center; font: 650 13px / 1.4 var(--f-round); }
.cell { width: 100%; min-height: 52px; display: flex; align-items: center; gap: 12px; padding: 8px 14px; text-align: left; font: 400 16px / 1.3 var(--f-sans); }
.cell + .cell, #deviceList .cell + .cell, #qaList .cell, #qaSuggested .cell + .cell, #deviceList + .cell, #qaList + .cell { border-top: 1px dashed var(--edge); }
#qaList .cell:first-child { border-top: 0; }
.cell.stack { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 14px; }
.cell-label { flex: 1 1 auto; }
.cell-value { font: 500 14px / 1.3 var(--f-mono); }
.cell-input { flex: 1 1 auto; min-width: 0; height: 40px; border: 0; background: transparent; text-align: right; font: 500 16px / 1 var(--f-sans); }
.cell-input.full { width: 100%; text-align: left; padding: 0 14px; border-bottom: 1px dashed var(--edge); height: 52px; }
.cell-textarea { width: 100%; resize: vertical; min-height: 88px; border: 0; padding: 12px 14px; background: transparent; font: 400 16px / 1.45 var(--f-sans); }
.cell.stack .cell-textarea { padding: 10px 12px; border: 2px solid var(--edge); border-radius: 8px; }
.cell-select { max-width: 60%; height: 40px; border: 2px solid var(--edge); border-radius: 8px; background: var(--bg); padding: 0 8px; font: 500 15px / 1 var(--f-sans); }
.tint-row { font-weight: 500; }
.tint-row [data-px] { display: grid; }
.cell.destructive { color: var(--err); font-weight: 600; }
:root[data-theme="dark"] .cell.destructive { color: var(--amber); }
.hero { gap: 14px; padding: 14px; }
.hero-icon { width: 56px; height: 56px; border-radius: 12px; }
.hero-title { font: 650 17px / 1.2 var(--f-round); }
.hero-sub { font: 400 13px / 1.4 var(--f-mono); }
/* interruttore pixel */
.switch { -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 56px; height: 32px; border: 2px solid var(--fg); border-radius: 16px; background: transparent; cursor: pointer; margin: 0; }
.switch::after { content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform 0.12s steps(3); }
.switch:checked { background: var(--dmg-1); border-color: var(--dmg-1); }
.switch:checked::after { background: var(--shell); transform: translateX(24px); }
.switch:disabled { opacity: 0.4; }
/* scelte a segmenti */
.segmented { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: 22px; background: var(--bg); box-shadow: inset 0 0 0 2px var(--edge); }
.seg-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n, 3)); border-radius: 19px; background: var(--key); transition: transform 0.55s var(--spring-bounce); }
.segmented button { position: relative; z-index: 1; min-height: 44px; font: 650 13px / 1 var(--f-round); text-transform: uppercase; }
.segmented button[aria-checked="true"] { color: var(--on-key); }
/* dispositivi */
.dev-icon svg, .tile svg, .qa-plus svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
.dev-text, .qa-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.dev-name, .qa-label { font: 500 16px / 1.3 var(--f-sans); }
.dev-sub, .qa-prompt { font: 400 13px / 1.4 var(--f-mono); overflow-wrap: anywhere; }
.live-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--phos); }
.tag { font: 650 13px / 1 var(--f-round); padding: 6px 10px 5px; border-radius: 12px; background: var(--key); color: var(--on-key); }
.text-btn.danger { color: var(--err); font-weight: 600; }
:root[data-theme="dark"] .text-btn.danger { color: var(--amber); }
.qa-del { width: 44px; height: 44px; display: grid; place-items: center; color: var(--err); }
.qa-del svg { width: 22px; height: 22px; }
.qa-del svg path { stroke: var(--shell) !important; }
.qa-plus { color: var(--dmg-1); }
:root[data-theme="dark"] .qa-plus { color: var(--phos); }
.qa-plus svg path { stroke: var(--shell); }
.qa-suggest .tile, #qaList .tile { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: var(--bg); flex: none; }
.qa-form { padding: 0 0 8px; border-top: 1px dashed var(--edge); }
.qa-icons { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; }
.qa-icons button { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 2px var(--edge); }
.qa-icons button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.qa-icons button[aria-checked="true"] { background: var(--key); color: var(--on-key); }
.qa-buttons { display: flex; justify-content: flex-end; gap: 8px; padding: 0 12px; }
/* cronologia */
.history-list li { padding: 14px 4px; border-bottom: 2px dashed var(--edge); }
.history-list .meta { font: 400 13px / 1.4 var(--f-mono); }
.history-list .u { margin-top: 4px; font: 500 15px / 1.45 var(--f-mono); color: var(--muted); }
.history-list .u::before { content: "> "; }
.history-list .a { margin-top: 4px; font: 400 16px / 1.45 var(--f-sans); white-space: pre-wrap; }
.history-list .tools { margin-top: 6px; }
.history-list .empty { font: 400 15px / 1.45 var(--f-sans); border: 0; }
/* schermo del Mac */
.screen-frame { position: relative; min-height: 180px; display: grid; place-items: center; border-radius: 6px; overflow: hidden; background: var(--screen); box-shadow: 0 0 0 3px var(--fg); margin-bottom: 16px; }
.screen-frame img { display: block; width: 100%; height: auto; }
.screen-frame.loading::after { content: ""; position: absolute; right: 10px; top: 10px; width: 12px; height: 12px; background: var(--phos); animation: blink 0.6s steps(1) infinite; }
.screen-empty { padding: 24px; color: var(--phos); font: 400 14px / 1.45 var(--f-mono); text-align: center; }
/* appunti e file */
.clip-box { min-height: 72px; max-height: 40vh; overflow: auto; padding: 12px 14px; font: 400 15px / 1.45 var(--f-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.clip-box:empty::before { content: attr(data-empty); opacity: 0.8; }
.clip-actions { justify-content: space-between; }
.file-pick { cursor: pointer; }
.upload-list li { padding: 10px 14px; border-top: 1px dashed var(--edge); }
.up-name { display: flex; justify-content: space-between; gap: 10px; font: 400 14px / 1.3 var(--f-mono); }
.up-name span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-bar { margin-top: 6px; height: 8px; border: 2px solid var(--fg); }
.up-bar i { display: block; height: 100%; width: 0; background: var(--fg); }
.upload-list li.fail .up-state { color: var(--err); }
/* abbinamento */
.qr { width: 200px; margin: 16px auto 8px; padding: 10px; border-radius: 8px; background: #fff; }
.qr svg { display: block; width: 100%; height: auto; }
.pair-code { text-align: center; font: 650 33px / 1.1 var(--f-round); letter-spacing: 0; }
.home-steps { list-style: none; margin: 18px 0 20px; padding: 0; display: grid; gap: 14px; }
.home-steps li { display: flex; align-items: center; gap: 12px; font: 400 16px / 1.45 var(--f-sans); }
.home-steps b { font-weight: 650; }
.step-n { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid currentColor; font: 600 15px / 1 var(--f-round); }
.ios-share { width: 22px; height: 22px; vertical-align: -5px; margin: 0 2px; color: var(--ab-2); }
.home-later { display: block; margin: 10px auto 0; min-height: 44px; }
.pair-url, .pair-expiry { text-align: center; font: 400 14px / 1.4 var(--f-mono); overflow-wrap: anywhere; margin-top: 6px; }
.pairing { z-index: 60; align-items: center; justify-content: center; }
.pair-form { width: min(380px, 100%); padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: stretch; }
.pair-form .mark { width: 96px; align-self: center; border-radius: 24px; box-shadow: 0 4px 0 var(--edge); }
.pair-logo { align-self: center; margin-top: 10px; font: 400 28px / 1 var(--f-pixel); }
.pair-title { margin-top: 18px; font: 650 21px / 1.2 var(--f-round); text-transform: uppercase; text-align: center; }
.pair-sub { margin-top: 10px; font: 400 15px / 1.45 var(--f-sans); text-align: center; }
.code-input {
  margin-top: 22px; height: 72px; border-radius: 6px; border: 3px solid var(--dlg-ink); background-color: var(--dlg-bg); background-image: var(--dlg-dot); color: var(--dlg-ink);
  text-align: center; font: 650 31px / 1 var(--f-round); text-transform: uppercase; caret-color: var(--ab);
}
.code-input::placeholder { color: var(--dlg-ink); opacity: 0.45; }
.pair-name { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; font: 650 13px / 1 var(--f-round); text-transform: uppercase; }
.pair-name input { height: 52px; border-radius: 26px; border: 2px solid var(--edge); background: var(--panel); padding: 0 14px; font: 500 17px / 1 var(--f-sans); text-transform: none; }
.pair-error { min-height: 22px; margin-top: 12px; color: var(--err); font: 500 15px / 1.4 var(--f-sans); text-align: center; }
:root[data-theme="dark"] .pair-error { color: var(--amber); }
.over-page { z-index: 70; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; animation-delay: 0s !important; transition-delay: 0s !important; }
  /* in ascolto resta un anello fermo: lo stato si vede anche senza movimento */
  body[data-state="listening"] .rings i:first-child { animation: none; opacity: 0.6; transform: scale(1.18); }
}
@media (min-width: 700px) {
  /* sul desktop e sull'iPad: una colonna da telefono, centrata */
  body { left: 50%; right: auto; width: min(560px, 100%); transform: translateX(-50%); }
  .float { left: 10px; right: 10px; }
}

/* Mac non raggiungibile */
.offline-card {
  position: fixed; z-index: 40; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 104px);
  max-width: 520px; margin: 0 auto; padding: 16px 16px 8px;
  background-color: var(--dlg-bg); background-image: var(--dlg-dot); color: var(--dlg-ink);
  border: 3px solid var(--dlg-ink); border-radius: 3px;
  box-shadow: inset 0 0 0 3px var(--dlg-bg), inset 0 0 0 5px var(--dlg-ink), 4px 4px 0 var(--edge);
  animation: offIn 0.28s var(--curve) both;
}
@keyframes offIn { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .offline-card { animation: none; } }
.off-title { font: 650 19px / 1.15 var(--f-round); text-transform: uppercase; }
.off-status { margin-top: 6px; font: 400 14px / 1.4 var(--f-mono); }
.off-tips { margin: 10px 0 0; padding-left: 18px; font: 500 15px / 1.45 var(--f-sans); }
.off-tips li + li { margin-top: 4px; }
.offline-card .primary-btn { margin-top: 14px; }
.off-pair, .pair-cancel { display: block; width: 100%; margin-top: 4px; color: var(--dlg-ink); text-decoration: underline; text-underline-offset: 3px; }
.pair-cancel { color: var(--fg); }