/* Graphorum — aspetto comune a dashboard, Posta e Chat (linguaggio «Graphorum 2026»).
   Caratteri inclusi nell'app (nessun font da Internet): DM Sans per il testo, Space Grotesk per titoli e numeri grandi.
   Colori come token: chiaro e scuro scelti a mano. Tutte le misure in rem: la dimensione del testo (Impostazioni → Aspetto)
   ingrandisce o riduce tutto insieme. */
@font-face { font-family: "DM Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/static/fonts/dm-sans-400.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("/static/fonts/dm-sans-500.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("/static/fonts/dm-sans-600.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 700 800; font-style: normal; font-display: swap; src: url("/static/fonts/dm-sans-700.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 300; font-style: normal; font-display: swap; src: url("/static/fonts/space-grotesk-300.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 400; font-style: normal; font-display: swap; src: url("/static/fonts/space-grotesk-400.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 500; font-style: normal; font-display: swap; src: url("/static/fonts/space-grotesk-500.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 600; font-style: normal; font-display: swap; src: url("/static/fonts/space-grotesk-600.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700 800; font-style: normal; font-display: swap; src: url("/static/fonts/space-grotesk-700.woff2") format("woff2"); }
/* altri caratteri da scegliere in Impostazioni › Aspetto (inclusi: si scaricano solo se li scegli) */
@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url("/static/fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-style: normal; font-display: swap; src: url("/static/fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap; src: url("/static/fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 700 800; font-style: normal; font-display: swap; src: url("/static/fonts/editor/barlow-700.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("/static/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("/static/fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("/static/fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap; src: url("/static/fonts/inter-700.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 400; font-style: normal; font-display: swap; src: url("/static/fonts/nunito-400.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 500; font-style: normal; font-display: swap; src: url("/static/fonts/nunito-500.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 600; font-style: normal; font-display: swap; src: url("/static/fonts/nunito-600.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 700; font-style: normal; font-display: swap; src: url("/static/fonts/nunito-700.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 400; font-style: normal; font-display: swap; src: url("/static/fonts/lato-400.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 700; font-style: normal; font-display: swap; src: url("/static/fonts/lato-700.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-style: normal; font-display: swap; src: url("/static/fonts/source-sans-3-400.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 500; font-style: normal; font-display: swap; src: url("/static/fonts/source-sans-3-500.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 600; font-style: normal; font-display: swap; src: url("/static/fonts/source-sans-3-600.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 700; font-style: normal; font-display: swap; src: url("/static/fonts/source-sans-3-700.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/static/fonts/ibm-plex-sans-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("/static/fonts/ibm-plex-sans-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("/static/fonts/ibm-plex-sans-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("/static/fonts/ibm-plex-sans-700.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 400; font-style: normal; font-display: swap; src: url("/static/fonts/manrope-400.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 500; font-style: normal; font-display: swap; src: url("/static/fonts/manrope-500.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 600; font-style: normal; font-display: swap; src: url("/static/fonts/manrope-600.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 700; font-style: normal; font-display: swap; src: url("/static/fonts/manrope-700.woff2") format("woff2"); }

:root {
  --ground: #f1f2f5;
  --surface: #ffffff;
  --surface-2: #f6f7fa;
  --surface-3: #eceef3;
  --ink: #12141c;
  --ink-2: #3a3f4f;
  --muted: #5b6070;
  --line: #e6e8f0;
  --line-strong: #d4d8e3;
  --accent: #2f6bff;            /* il blu di Graphorum (come la landing) */
  --accent-hover: #2459e0;
  --accent-ink: #ffffff;
  --accent-soft: #eaf1ff;
  --accent-tile: #2f6bff;
  --accent-tile-ink: #ffffff;
  --brand-grad: linear-gradient(135deg, #2f6bff 0%, #7c5cff 100%);
  --amber: #f5b941; --amber-ink: #2a1e00; --mint: #3ddc97; --mint-ink: #12a56a;
  --navy: #1f2333; --navy-ink: #ffffff;
  --tile: #ffffff;
  --tile-2: #f6f7fa;
  --tile-ink: #12141c;
  --tile-muted: #5b6070;
  --tile-num: #12141c;
  --ok: #12a56a;
  --warn: #a8690a;
  --danger: #d6343f;
  --user-bubble: #f1f2f5;
  /* chip tenui: fondo e testo */
  --t-lav: #eef0ff; --t-lav-ink: #3f49d8; --t-orange: #fff0e4; --t-orange-ink: #b9500d; --t-green: #e3f7ee; --t-green-ink: #0b7f50;
  --t-red: #fdeced; --t-red-ink: #c22d38; --t-blue: #e6f0ff; --t-blue-ink: #1d5bc9; --t-amber: #fef4dc; --t-amber-ink: #8a5a00;
  --shadow: 0 1px 2px rgba(17, 20, 40, .04), 0 10px 28px -16px rgba(31, 35, 51, .14);
  --shadow-lift: 0 1px 2px rgba(17, 20, 40, .05), 0 18px 40px -14px rgba(47, 107, 255, .24);
  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Space Grotesk", "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --radius: 8px;                 /* un solo arrotondamento in tutta la piattaforma (pulsanti, caselle, schede, popup) */
  --radius-sm: 8px;
  --sidebar: 16.5rem;
  --ui-scale: 1;
  /* LA SCALA UNICA dell'interfaccia (guscio nuovo e pagine di sempre, docs/ui-coerenza.md): ogni scritta e ogni icona
     usa una di queste misure, mai un numero suo. In rem: Impostazioni › Aspetto le fa crescere tutte insieme.
     Fra parentesi i px alla misura «Normale» (1 rem = 14 px). */
  --fs-2xs: .786rem;   /* (11) i numerini nei tondi, le scritte sotto le icone della barra */
  --fs-xs: .857rem;    /* (12) etichette maiuscole, didascalie, numerini */
  --fs-sm: .929rem;    /* (13) la seconda riga, orari, aiuti sotto i campi */
  --fs-base: 1rem;     /* (14) pulsanti piccoli, filtri, etichette dei campi */
  --fs-md: 1.071rem;   /* (15) il testo, i pulsanti, le linguette, le caselle */
  --fs-lg: 1.143rem;   /* (16) il titolo di una riga, il testo in evidenza */
  --fs-xl: 1.286rem;   /* (18) i titoli dei gruppi */
  --fs-2xl: 1.429rem;  /* (20) i titoli delle sezioni e delle pagine dentro un foglio */
  --fs-3xl: 1.643rem;  /* (23) il titolo del foglio */
  --fs-4xl: 1.857rem;  /* (26) numeri e frasi grandi */
  --fs-5xl: 2.214rem;  /* (31) il saluto di Oggi */
  --fs-6xl: 2.857rem;  /* (40) l'ora del prossimo appuntamento */
  --ic-xs: .929rem;    /* (13) icone nel testo piccolo */
  --ic-sm: 1.143rem;   /* (16) icone nei pulsanti, nei link e nelle caselle */
  --ic-md: 1.286rem;   /* (18) icone da sole: pulsanti a icona, righe */
  --ic-lg: 1.429rem;   /* (20) icone nei tondi delle righe e delle testate */
  --ic-xl: 1.643rem;   /* (23) la barra in basso e la barra di icone */
  --ic-2xl: 2rem;      /* (28) icone grandi (schede, stati vuoti) */
  --ctl-h: 2.75rem;    /* pulsanti e caselle: alti uguali sulla stessa riga */
  --ctl-h-sm: 2.15rem;
  --row-h: 4.143rem;   /* una riga di elenco con icona e due righe di testo */
  --row-h-sm: 3.571rem;
  --head-h: 3.714rem;  /* la testata di un foglio o di un pannello */
  --pad-x: 1.429rem;   /* il margine ai lati delle pagine (telefono); sul computer 1.714rem */
  /* le tre superfici: la pagina (aree, fogli, chat, notifiche), le zone laterali (barra di icone, menu), i pezzi che
     stanno sopra (caselle, pulsanti, menu, finestre: --surface). In chiaro la pagina è bianca come prima; in scuro i grigi
     caldi di Claude sul web: pagina #262624, zone laterali #1f1e1d, sopra #30302e (poi #383835, #41403d) */
  --page: var(--surface);
  --side: var(--ground);
  /* grafici: slot categoriali (blu-viola, ambra, menta, cielo, rosa) */
  --series-1: #2f6bff; --series-2: #f5a524; --series-3: #1fae78; --series-4: #2fa8e0; --series-5: #e66fa2;
  --grid: #eceef3; --axis: #d4d8e3;
  color-scheme: light;
}
/* il tema scuro (scelto, o «Automatico» con il sistema in scuro: le due copie sono uguali): i grigi caldi di Claude sul
   web, mai il nero o il blu notte; il blu di Graphorum resta l'accento; le tinte (accent-soft, chip) sono il loro colore
   appena posato sul grigio caldo. Contrasto AA: testo 14,4:1, secondario 8,3:1, tenue 5,4:1 sulla pagina. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #262624; --page: #262624; --side: #1f1e1d; --surface: #30302e; --surface-2: #383835; --surface-3: #41403d;
    --ink: #faf9f5; --ink-2: #c2c0b6; --muted: #9c9a92; --line: #3d3d3a; --line-strong: #4a4945;
    --accent: #4d86ff; --accent-hover: #6b9bff; --accent-ink: #ffffff; --accent-soft: #353e50;
    --accent-tile: #2f6bff; --accent-tile-ink: #ffffff;
    --navy: #30302e;
    --tile: #30302e; --tile-2: #383835; --tile-ink: #faf9f5; --tile-muted: #9c9a92; --tile-num: #faf9f5;
    --ok: #3ddc97; --warn: #f5b941; --danger: #ff6b72; --user-bubble: #383835;
    --t-lav: #3b3c52; --t-lav-ink: #b3b9ff; --t-orange: #45372c; --t-orange-ink: #ffb07a; --t-green: #2d4038; --t-green-ink: #5fe3a8;
    --t-red: #47312f; --t-red-ink: #ff9aa0; --t-blue: #313d4d; --t-blue-ink: #8ebcff; --t-amber: #453c2a; --t-amber-ink: #f7cb69;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px -14px rgba(0, 0, 0, .5);
    --shadow-lift: 0 2px 6px rgba(0, 0, 0, .35), 0 20px 44px -14px rgba(0, 0, 0, .6);
    --series-1: #5c8fff; --series-2: #f5b941; --series-3: #3ddc97; --series-4: #5cc8f0; --series-5: #f08db8;
    --grid: #353533; --axis: #4a4945;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #262624; --page: #262624; --side: #1f1e1d; --surface: #30302e; --surface-2: #383835; --surface-3: #41403d;
  --ink: #faf9f5; --ink-2: #c2c0b6; --muted: #9c9a92; --line: #3d3d3a; --line-strong: #4a4945;
  --accent: #4d86ff; --accent-hover: #6b9bff; --accent-ink: #ffffff; --accent-soft: #353e50;
  --accent-tile: #2f6bff; --accent-tile-ink: #ffffff;
  --navy: #30302e;
  --tile: #30302e; --tile-2: #383835; --tile-ink: #faf9f5; --tile-muted: #9c9a92; --tile-num: #faf9f5;
  --ok: #3ddc97; --warn: #f5b941; --danger: #ff6b72; --user-bubble: #383835;
  --t-lav: #3b3c52; --t-lav-ink: #b3b9ff; --t-orange: #45372c; --t-orange-ink: #ffb07a; --t-green: #2d4038; --t-green-ink: #5fe3a8;
  --t-red: #47312f; --t-red-ink: #ff9aa0; --t-blue: #313d4d; --t-blue-ink: #8ebcff; --t-amber: #453c2a; --t-amber-ink: #f7cb69;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px -14px rgba(0, 0, 0, .5);
  --shadow-lift: 0 2px 6px rgba(0, 0, 0, .35), 0 20px 44px -14px rgba(0, 0, 0, .6);
  --series-1: #5c8fff; --series-2: #f5b941; --series-3: #3ddc97; --series-4: #5cc8f0; --series-5: #f08db8;
  --grid: #353533; --axis: #4a4945;
  color-scheme: dark;
}

@media (min-width: 861px) { :root { --pad-x: 1.714rem; } }
* { box-sizing: border-box; }
html { font-size: calc(87.5% * var(--ui-scale)); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { height: 100%; }
/* telefono: la pagina non si sposta di lato e non resta ingrandita (niente scorrimento orizzontale né rimbalzo) */
html, body { overflow-x: clip; overscroll-behavior-x: none; max-width: 100%; }
@media (max-width: 860px) {
  /* sotto i 16px l'iPhone ingrandisce la pagina quando tocchi un campo, e poi resta spostabile */
  body:not(.chat-window) :is(input, select, textarea) { font-size: max(16px, 1rem) !important; }
}
/* caratteri nitidi su ogni schermo: solo i pesi veri del carattere (mai grassetti o corsivi «finti», che sgranano),
   numeri tutti larghi uguali nelle tabelle e nei conteggi */
html { font-synthesis: none; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 var(--fs-md)/1.5 var(--font); background: var(--ground); color: var(--ink); -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; }
table, .num, .badge, .count, time { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; text-wrap: balance; font-weight: 600; }
h2 { font-size: var(--fs-3xl); letter-spacing: -.005em; }
h3 { font-size: var(--fs-lg); }
p { margin: 0; }
a { color: var(--accent); }
svg { width: var(--ic-md); height: var(--ic-md); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ---------- controlli ---------- */
button {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font: 500 var(--fs-md)/1.2 var(--font); cursor: pointer; min-height: 2.5rem;
  padding: .55rem 1.05rem; border-radius: var(--radius-sm); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink); transition: background .15s, border-color .15s, color .15s;
}
button:hover { border-color: var(--muted); }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button.primary:hover { filter: brightness(1.06); }
button.ghost { background: transparent; }
button.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); background: transparent; }
button.small { min-height: 2.1rem; padding: .35rem .8rem; font-size: var(--fs-base); }
button:disabled { opacity: .5; cursor: progress; }
.icon-btn { min-height: 2.5rem; min-width: 2.5rem; padding: .45rem; border: 0; background: transparent; color: var(--ink-2); border-radius: var(--radius-sm); }
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn:disabled { opacity: .35; cursor: default; }
.icon-btn.on { color: var(--accent); }
.icon-btn.on svg { fill: currentColor; }

input, textarea, select {
  font: 400 var(--fs-md)/1.4 var(--font); color: var(--ink); background: var(--surface); width: 100%; min-width: 0;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: .6rem .8rem;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
textarea { resize: vertical; }
label { font-size: var(--fs-base); font-weight: 500; color: var(--ink-2); }
label.check { display: flex; align-items: flex-start; gap: .6rem; color: var(--ink); font-size: var(--fs-md); font-weight: 400; line-height: 1.4; }
label.check input { width: 1.1rem; height: 1.1rem; margin-top: .1rem; accent-color: var(--accent); flex: none; }
.hint, .sub, .meta { color: var(--muted); }
.hint { font-size: var(--fs-md); }
.sub { margin: .3rem 0 0; font-size: var(--fs-md); max-width: 70ch; }
.meta { font-size: var(--fs-sm); }
.error { color: var(--danger); min-height: 1.2em; font-size: var(--fs-md); }
code { font: .85em var(--mono); }

/* ---------- login ---------- */
.login { min-height: 100%; display: grid; place-items: center; padding: 16px; }
.login-card { width: min(23rem, 100%); display: grid; gap: .65rem; background: var(--surface); padding: 2rem; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line); }
.login-card h1 { font-size: var(--fs-2xl); }
.login-card .hint { margin: 0 0 .6rem; }
.mark { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: var(--radius); background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: var(--fs-lg); flex: none; }

/* ---------- guscio dell'app ---------- */
.app { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); height: 100%; }
.topbar, .bottombar { display: none; }
.sidebar { display: flex; flex-direction: column; gap: 1rem; padding: 1.1rem .8rem .9rem; background: var(--surface); border-right: 1px solid var(--line); overflow-y: auto; min-width: 0; }
.brand { display: flex; align-items: center; gap: .65rem; font-weight: 600; font-size: var(--fs-lg); padding: .1rem .45rem; }
.nav { display: grid; gap: 2px; }
.nav button { justify-content: flex-start; gap: .75rem; border: 0; background: transparent; color: var(--ink-2); padding: .55rem .75rem; min-height: 2.6rem; font-weight: 500; font-size: var(--fs-md); border-radius: var(--radius-sm); }
.nav button:hover { background: var(--surface-2); color: var(--ink); }
.nav button.active { background: var(--accent-soft); color: var(--accent); }
.nav button span:not(.badge) { flex: 1; text-align: left; }
.nav-label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 .75rem .3rem; }
.nav a { display: flex; align-items: center; gap: .75rem; padding: .55rem .75rem; min-height: 2.6rem; border-radius: var(--radius-sm); color: var(--ink-2); text-decoration: none; font-size: var(--fs-md); font-weight: 500; }
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav a span:not(.dot) { flex: 1; }
.nav a .dot { margin: 0; background: var(--line-strong); }
.nav a .ext { width: .95rem; height: .95rem; opacity: .55; }
.badge { min-width: 1.45rem; padding: .05rem .4rem; border-radius: var(--radius); background: var(--danger); color: #fff; font-size: var(--fs-xs); font-weight: 600; text-align: center; line-height: 1.35; }
.side-foot { margin-top: auto; display: grid; gap: .75rem; }
.status { display: grid; gap: .35rem; font-size: var(--fs-sm); color: var(--muted); padding: .2rem .75rem; }
.status .st { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.status .st span:last-child { overflow-wrap: anywhere; }
.dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; flex: none; margin-right: .5rem; vertical-align: middle; }
.status .st .dot { margin-right: 0; }
.dot.ok { background: var(--ok); } .dot.ko { background: var(--danger); }
.company-card { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .7rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); text-align: left; min-height: 3.6rem; justify-content: flex-start; }
.company-card:hover { border-color: var(--line-strong); }
.logo-box { width: 2.6rem; height: 2.6rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; flex: none; font-weight: 600; color: var(--accent); }
.logo-box img { width: 100%; height: 100%; object-fit: contain; padding: .2rem; }
.logo-box.logo-light { background: #1b2321; border-color: transparent; }       /* logo bianco: fondo scuro, si vede */
.company-card .cc-text { display: grid; min-width: 0; line-height: 1.25; }
.company-card strong { font-weight: 600; font-size: var(--fs-md); overflow-wrap: anywhere; }
.company-card small { color: var(--muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.scrim { display: none; }

main { min-width: 0; height: 100%; overflow: hidden; }
.tab { height: 100%; overflow-y: auto; overflow-x: hidden; padding: 1.75rem clamp(16px, 3vw, 2.75rem) 2.5rem; display: flex; flex-direction: column; gap: 1.1rem; }
.tab > * { flex: none; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: .75rem 1rem; flex-wrap: wrap; }
.head-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.head-actions select { width: auto; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); min-width: 0; }
.panel h3 { margin-bottom: .1rem; }
.form-grid { display: grid; gap: .55rem; align-content: start; }
.form-grid > button, .form-grid > .check { margin-top: .35rem; justify-self: start; }
.row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end; }
.field { display: grid; gap: .35rem; flex: 1 1 10rem; min-width: 0; }
.field.grow { flex: 3 1 13rem; } .field.narrow { flex: 0 1 7rem; }
.inline-form { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end; }
.list { display: grid; gap: .75rem; align-content: start; min-width: 0; }
.split { display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.btn-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.button-link { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.5rem; padding: .55rem 1.05rem; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); color: var(--ink); text-decoration: none; font-size: var(--fs-md); font-weight: 500; }
.button-link:hover { border-color: var(--muted); }
.button-link.small-link { min-height: 2.1rem; padding: .35rem .8rem; font-size: var(--fs-base); }
.ok-text { color: var(--ok); } .ko-text { color: var(--danger); }
.state-line { display: inline-flex; align-items: center; gap: .4rem; }
.state-line svg { width: var(--ic-sm); height: var(--ic-sm); }

.item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.15rem; display: grid; gap: .45rem; box-shadow: var(--shadow); min-width: 0; }
.item .actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .25rem; }
.item.done { opacity: .72; }
.item pre, pre { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; background: var(--surface-2); border: 1px solid var(--line); padding: .7rem .85rem; border-radius: var(--radius-sm); margin: 0; font: var(--fs-sm)/1.55 var(--mono); }
.tag { display: inline-flex; align-items: center; font-size: var(--fs-sm); font-weight: 500; padding: .08rem .55rem; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); margin-right: .25rem; white-space: nowrap; }
.tag.importante { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.tag.delete, .tag.deleted { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.tag.notify, .tag.mine { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

.table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.table th, .table td { text-align: left; padding: .75rem .9rem; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: break-word; }
/* etichette e pulsanti delle tabelle restano su una riga (mai «ces-tin-ata», mai «Anteprim-a») */
.table .tag, .table td button, .table td .btn-row button { white-space: nowrap; }
.table td .btn-row { flex-wrap: nowrap; }
.table td button.linkish, .table td .subj { white-space: normal; text-align: left; overflow-wrap: anywhere; }
.table tr:last-child td { border-bottom: 0; }
.table th { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); }
.table select { width: auto; max-width: 100%; padding: .3rem .5rem; }
.table a { color: var(--accent); text-decoration: none; font-weight: 500; }
.table-empty { padding: 2rem 1rem; text-align: center; color: var(--muted); }
.search-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.log { display: grid; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .4rem 1.1rem; box-shadow: var(--shadow); font-size: var(--fs-md); }
.log > div { display: grid; grid-template-columns: 10.5rem 7.5rem minmax(0, 1fr); gap: .9rem; padding: .6rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.log > div > span:last-child { overflow-wrap: anywhere; }
.log > div:last-child { border-bottom: 0; }
.settings { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 23rem); gap: 1.1rem; align-items: start; }
.settings-form { display: grid; gap: 1.1rem; min-width: 0; }
fieldset.panel { margin: 0; }
legend { font-weight: 600; font-size: var(--fs-lg); }
fieldset.panel > legend { float: left; width: 100%; padding: 0; margin: 0 0 .5rem; }
fieldset.panel > legend + * { clear: both; }
.save-bar { position: sticky; bottom: 0; padding: .9rem 0 .2rem; background: linear-gradient(transparent, var(--ground) 40%); z-index: 2; }
.settings-side { display: grid; gap: 1.1rem; position: sticky; top: 0; min-width: 0; }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.seg button { border: 0; border-radius: 0; min-height: 2.3rem; padding: .4rem .8rem; background: transparent; color: var(--ink-2); font-size: var(--fs-base); }
.seg button + button { border-left: 1px solid var(--line-strong); }
.seg button.on { background: var(--accent-soft); color: var(--accent); }

/* ---------- panoramica ---------- */
.home-head .date { color: var(--muted); font-size: var(--fs-md); }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.kpi { position: relative; overflow: hidden; isolation: isolate; border: 0; border-radius: var(--radius); padding: 1.15rem 1.25rem 1.2rem; min-height: 8.6rem;
  background: var(--tile); color: var(--tile-ink); display: grid; align-content: start; gap: .3rem; text-align: left; justify-content: stretch; font: inherit; cursor: pointer; }
.kpi::before, .kpi::after { content: ""; position: absolute; border-radius: 50%; z-index: -1; }
.kpi::before { width: 11rem; height: 11rem; right: -3.5rem; top: -3.5rem; background: color-mix(in srgb, var(--tile-num) 12%, transparent); }
.kpi::after { width: 7rem; height: 7rem; left: -2.5rem; bottom: -3.5rem; background: color-mix(in srgb, var(--tile-ink) 6%, transparent); }
.kpi { box-shadow: var(--shadow); }
.kpi:hover { border: 0; box-shadow: var(--shadow-lift); }
.kpi .k-label { font-size: var(--fs-lg); font-weight: 500; color: var(--tile-muted); }
.kpi .k-value { font-size: var(--fs-6xl); font-weight: 600; line-height: 1.05; color: var(--tile-num); letter-spacing: -.01em; }
.kpi .k-sub { font-size: var(--fs-md); color: var(--tile-muted); overflow-wrap: anywhere; }
.kpi.accent { background: var(--accent-tile); color: var(--accent-tile-ink); }
.kpi.accent::before { background: color-mix(in srgb, #ffffff 16%, transparent); }
.kpi.accent::after { background: color-mix(in srgb, #ffffff 12%, transparent); }
.kpi.accent .k-label, .kpi.accent .k-sub { color: color-mix(in srgb, var(--accent-tile-ink) 78%, transparent); }
.kpi.accent .k-value { color: var(--accent-tile-ink); }

.dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.span-8 { grid-column: span 8; } .span-6 { grid-column: span 6; } .span-4 { grid-column: span 4; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .9rem; flex-wrap: wrap; }
.card-head h3 { font-size: var(--fs-lg); }
/* con testo grande e schede strette il pulsante va a capo e si stringe, non esce dalla scheda */
.card-head > *, .card-head > button { min-width: 0; max-width: 100%; }
.card-head > button { overflow-wrap: anywhere; }
.card-head .meta { font-size: var(--fs-base); }
.filters { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }

/* grafici */
.chart { position: relative; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; stroke: none; fill: none; }
.chart text { fill: var(--muted); stroke: none; font: 400 var(--fs-xs) var(--font); font-variant-numeric: tabular-nums; }
.chart .gridline { stroke: var(--grid); stroke-width: 1; }
.chart .baseline { stroke: var(--axis); stroke-width: 1; }
.chart .bar { transition: opacity .12s; }
.chart .col-hit { fill: transparent; cursor: default; }
.chart .col-hit:hover + .col-marks .bar, .chart .col:focus-within .bar { opacity: .82; }
.chart .col:focus { outline: none; }
.chart .col:focus-visible .col-hit { stroke: var(--accent); stroke-width: 2; }
.legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: 0 0 .75rem; padding: 0; list-style: none; font-size: var(--fs-base); color: var(--ink-2); }
.legend li { display: inline-flex; align-items: center; gap: .45rem; }
.legend .sw { width: .8rem; height: .8rem; border-radius: var(--radius); flex: none; }
.donut-wrap { display: grid; grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr); gap: 1.1rem; align-items: center; }
.donut-wrap svg { width: 100%; height: auto; display: block; stroke: none; fill: none; }
.span-4 .donut-wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.span-4 .donut-wrap svg { max-width: 11rem; }
.span-4 .donut-wrap .dtable { width: 100%; }
.donut-wrap .seg-arc { transition: opacity .12s; cursor: default; }
.donut-wrap .seg-arc:hover, .donut-wrap .seg-arc:focus { opacity: .8; outline: none; }
.chart .donut-center { fill: var(--ink); stroke: none; font: 600 var(--fs-3xl) var(--font); }
.chart .donut-center-sub { fill: var(--muted); stroke: none; font: 400 var(--fs-xs) var(--font); }
.dtable { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.dtable td { padding: .32rem 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.dtable tr:last-child td { border-bottom: 0; }
.dtable td.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500; padding-left: .6rem; white-space: nowrap; }
.dtable td.pct { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); width: 3.2rem; white-space: nowrap; }
.dtable .sw { display: inline-block; width: .7rem; height: .7rem; border-radius: var(--radius); margin-right: .5rem; vertical-align: -.05rem; }
.viz-tip { position: absolute; pointer-events: none; z-index: 5; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); box-shadow: var(--shadow-lift); border-radius: var(--radius); padding: .55rem .7rem; font-size: var(--fs-sm); min-width: 10rem; }
.viz-tip .tt-title { color: var(--muted); margin-bottom: .25rem; }
.viz-tip .tt-row { display: grid; grid-template-columns: .9rem auto 1fr; align-items: center; gap: .45rem; }
.viz-tip .tt-row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.viz-tip .tt-row span:last-child { color: var(--ink-2); }
.viz-tip .key { width: .8rem; height: 2px; border-radius: var(--radius); }
.table-toggle { font-size: var(--fs-sm); }
.viz-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); margin-top: .6rem; }
.viz-table th, .viz-table td { padding: .3rem .4rem; border-bottom: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; }
.viz-table th:first-child, .viz-table td:first-child { text-align: left; }
.viz-table th { color: var(--muted); font-weight: 500; }

/* righe elenco (come "Ultimi pubblicati") */
.rows { display: grid; }
.rowi { display: grid; grid-template-columns: 2.8rem minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.rowi:first-child { padding-top: .2rem; }
.rowi:last-child { border-bottom: 0; padding-bottom: .1rem; }
.rowi .ico { width: 2.8rem; height: 2.8rem; border-radius: var(--radius); display: grid; place-items: center; background: var(--surface-2); color: var(--accent); border: 1px solid var(--line); }
.rowi .ico svg { width: var(--ic-md); height: var(--ic-md); }
.rowi .r-meta { color: var(--muted); font-size: var(--fs-base); }
.rowi .r-title { font-size: var(--fs-md); font-weight: 500; overflow-wrap: anywhere; }
.rowi .r-sub { color: var(--muted); font-size: var(--fs-base); overflow-wrap: anywhere; }
.rows-empty { color: var(--muted); padding: .6rem 0; }

/* ---------- chat ---------- */
.tab-chat { padding: 0; gap: 0; flex-direction: row; }
.hist-panel { width: 18rem; flex: none; border-right: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; min-height: 0; }
.hist-head { display: grid; gap: .6rem; padding: 1.1rem .9rem .8rem; }
.hist-head .cp-title { display: flex; align-items: center; justify-content: space-between; }
.hist-head h3 { font-size: var(--fs-lg); }
.hist-list { flex: 1; overflow-y: auto; padding: 0 .55rem .8rem; display: grid; gap: 2px; align-content: start; }
.hist-group { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: .8rem .45rem .3rem; }
.hist { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .25rem; border-radius: var(--radius-sm); padding: .15rem .15rem .15rem .6rem; }
.hist:hover { background: var(--surface-2); }
.hist.active { background: var(--accent-soft); }
.hist .c-open { all: unset; cursor: pointer; display: grid; gap: .05rem; min-width: 0; padding: .45rem 0; }
.hist .c-open:focus-visible { outline: 2px solid var(--accent); border-radius: var(--radius); }
.hist .c-title { font-size: var(--fs-md); font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.hist.active .c-title { color: var(--accent); }
.hist .c-meta { font-size: var(--fs-xs); color: var(--muted); display: flex; align-items: center; gap: .3rem; }
.hist .c-meta svg { width: var(--ic-xs); height: var(--ic-xs); }
.hist .c-more { opacity: 0; min-height: 2.1rem; min-width: 2.1rem; }
.hist:hover .c-more, .hist.active .c-more, .hist .c-more:focus-visible, .hist .c-more[aria-expanded="true"] { opacity: 1; }
/* elenco delle conversazioni compatto: righe basse, testo più piccolo, più conversazioni in vista */
@media (min-width: 861px) {
  .hist-panel { width: 16rem; }
  .hist-head { padding: .8rem .7rem .55rem; gap: .45rem; }
  .hist-list { padding: 0 .4rem .6rem; gap: 1px; }
  .hist-group { font-size: var(--fs-xs); padding: .55rem .4rem .15rem; }
  .hist { padding: 0 .1rem 0 .45rem; }
  .hist .c-open { padding: .28rem 0; gap: 0; }
  .hist .c-title { font-size: var(--fs-md); }
  .hist .c-meta { font-size: var(--fs-sm); }
  .hist .c-more { min-height: 1.7rem; min-width: 1.7rem; }
}
.menu { position: fixed; z-index: 75;   /* sopra i fogli, la chat e le notifiche, sotto le finestre (.sheet 80) */ background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-lift); padding: .3rem; display: grid; min-width: 11rem; }
.menu button { justify-content: flex-start; border: 0; background: transparent; min-height: 2.4rem; font-weight: 400; }
.menu button:hover { background: var(--surface-2); }
.menu button.danger { color: var(--danger); }
.chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .8rem; padding: 1.1rem clamp(16px, 3vw, 2.75rem) 1.1rem; min-height: 0; }
.chat-head { display: flex; align-items: center; gap: .5rem; min-height: 2.6rem; }
.chat-head h2 { font-size: var(--fs-xl); flex: 1; min-width: 0; overflow-wrap: anywhere; }
.app .only-mobile { display: none; }
.chat-log { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 1.2rem; padding: .5rem calc((100% - min(62.86rem, 100%)) / 2) 1rem; min-height: 0; }
.msg { max-width: min(54.29rem, 88%); border-radius: var(--radius); overflow-wrap: anywhere; }
.msg.user { align-self: flex-end; background: var(--user-bubble); padding: .65rem 1rem; white-space: pre-wrap; }
.msg.assistant { align-self: flex-start; padding: .15rem 0; max-width: min(58.57rem, 100%); }
.msg.assistant .body { line-height: 1.6; }
.msg .body > :first-child { margin-top: 0; } .msg .body > :last-child { margin-bottom: 0; }
.msg .body p { margin: .5rem 0; }
.msg .body ul, .msg .body ol { margin: .4rem 0; padding-left: 1.3rem; }
.msg .body strong { font-weight: 600; }
.msg .body code { font: var(--fs-sm) var(--mono); background: var(--surface-2); border: 1px solid var(--line); padding: .05rem .3rem; border-radius: var(--radius); }
.msg .body pre code { border: 0; padding: 0; background: none; }
.msg .body h4 { margin: .8rem 0 .3rem; font-size: 1.05em; }
.msg .body .md-table { overflow-x: auto; margin: .5rem 0; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.msg .body .md-table table { border-collapse: collapse; width: 100%; font-size: .92em; }
.msg .body .md-table th, .msg .body .md-table td { text-align: left; vertical-align: top; padding: .45rem .6rem; border-bottom: 1px solid var(--line); }
.msg .body .md-table tr:last-child td { border-bottom: 0; }
.msg .body .md-table th { background: var(--surface-2); font-weight: 600; }
.callout { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr); gap: .55rem; align-items: start; margin: .6rem 0 0; padding: .65rem .8rem; border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line)); background: color-mix(in srgb, var(--warn) 8%, var(--surface)); }
.callout svg { color: var(--warn); margin-top: .1rem; }
.telemetry { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin-top: .55rem; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.telemetry span { display: inline-flex; align-items: center; gap: .3rem; }
.telemetry svg { width: var(--ic-xs); height: var(--ic-xs); }
.telemetry b { font-weight: 600; color: var(--ink-2); }
.telemetry .tools { color: var(--accent); }

.empty-chat { margin: auto; display: grid; gap: 1rem; justify-items: center; text-align: center; max-width: 34rem; padding: 2rem 0; }
.empty-chat h3 { font-size: var(--fs-2xl); }

.composer { display: flex; flex-direction: column; gap: .15rem; width: min(62.86rem, 100%); margin: 0 auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: .35rem .45rem .4rem; box-shadow: var(--shadow); flex: none; }
.composer textarea { border: 0; resize: none; max-height: 40vh; min-height: 2.3rem; padding: .45rem .5rem .2rem; background: transparent; box-shadow: none; width: 100%; }
.composer-bar { display: flex; align-items: center; gap: .2rem; min-width: 0; }
.composer-gap { flex: 1; min-width: .25rem; }
.composer .attach { flex: none; width: 2.2rem; height: 2.2rem; min-height: 0; padding: 0; display: inline-grid; place-items: center; }
.composer .attach svg { width: var(--ic-sm); height: var(--ic-sm); }
.composer .send { border-radius: var(--radius); width: 2.3rem; height: 2.3rem; min-width: 0; min-height: 0; padding: 0; display: inline-grid; place-items: center; flex: none; }
.composer .send svg { width: var(--ic-sm); height: var(--ic-sm); }
/* chi risponde (Impostazioni › AI › Chi fa cosa): si legge qui, si cambia lì */
.chat-model { flex: 0 1 auto; min-width: 0; max-width: 13rem; width: auto; height: 2rem; min-height: 0; padding: 0 .6rem; font-size: var(--fs-sm);
  display: inline-flex; align-items: center; gap: .35rem; font-weight: 500;
  border-radius: var(--radius); border: 1px solid var(--line); background-color: transparent; color: var(--muted); }
.chat-model svg { width: var(--ic-xs); height: var(--ic-xs); flex: none; fill: var(--accent); }
.chat-model span { min-width: 0; overflow-wrap: anywhere; }
.chat-model:not(:disabled):hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.chat-model:disabled { opacity: 1; cursor: default; }
.composer .mic.is-rec { color: #fff; background: var(--danger, #c62828); border-radius: var(--radius); animation: rec-pulse 1.2s ease-in-out infinite; }
.composer .mic.busy { opacity: .6; pointer-events: none; }
.rec-time { font-size: var(--fs-xs); color: var(--danger, #c62828); font-variant-numeric: tabular-nums; }
/* mentre registri: la casella diventa una barra rossa ben visibile con il tempo, «Annulla» e ■ per finire */
.composer.recording { border-color: var(--danger, #c62828); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger, #c62828) 18%, transparent); }
.composer.recording textarea, .composer.transcribing textarea { display: none; }
.composer.recording .composer-bar > :not(.rec-time):not(.rec-cancel):not(.mic):not(.send),
.composer.transcribing .composer-bar > :not(.rec-time):not(.mic):not(.send) { display: none; }
.composer.recording .rec-time, .composer.transcribing .rec-time { flex: 1; min-width: 0; font-size: var(--fs-base); font-weight: 600;
  padding-left: .4rem; overflow-wrap: anywhere; }
.composer.recording .rec-time::before { content: ""; display: inline-block; width: .6rem; height: .6rem; margin-right: .45rem;
  border-radius: 50%; background: var(--danger, #c62828); vertical-align: middle; animation: rec-blink 1s infinite;
  transform: scale(calc(1 + var(--lvl, 0) * 1.2)); transition: transform .1s; }
.composer.transcribing .rec-time { color: var(--muted); }
.composer .rec-cancel { flex: none; min-height: 2rem; padding: .2rem .7rem; }
.composer.recording .send { opacity: .35; pointer-events: none; }
@keyframes rec-blink { 50% { opacity: .2; } }
@keyframes rec-pulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--danger, #c62828) 25%, transparent); } }
@media (max-width: 720px) {
  .composer { padding: .25rem .35rem .3rem; }
  .composer textarea { font-size: max(16px, 1rem); }  /* sotto i 16px iOS ingrandisce la pagina al tocco */
  .chat-model { max-width: 8.5rem; }
}

/* risposta in corso: passaggi con tempi */
.msg.live { min-width: min(40rem, 100%); }
.activity { display: grid; gap: .25rem; font-size: var(--fs-base); color: var(--muted); margin-bottom: .5rem; padding: .6rem .8rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.act { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr) auto; align-items: start; gap: .45rem; }
.act .t { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.act .ic { display: grid; place-items: center; height: 1.3rem; }
.act .ic svg { width: var(--ic-xs); height: var(--ic-xs); }
.act.running .ic::before { content: ""; display: inline-block; width: .7rem; height: .7rem; border: 2px solid var(--accent); border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
.act.running .ic svg { display: none; }
.act.ok .ic { color: var(--ok); }
.act.ko .ic { color: var(--danger); }
.act.ko .tx { color: var(--danger); }
.act.act-thought .tx { font-style: italic; }
.act.running .tx { color: var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }
.answer:empty { display: none; }
.live-meta { margin-top: .5rem; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.activity-done { font-size: var(--fs-base); color: var(--muted); margin-bottom: .45rem; }
.activity-done summary { cursor: pointer; width: fit-content; }
.activity-done .activity { margin-top: .4rem; }

.toast { position: fixed; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); right: 1rem; background: var(--ink); color: var(--ground); padding: .7rem 1.05rem; border-radius: var(--radius-sm); max-width: min(28rem, calc(100% - 2rem)); box-shadow: var(--shadow-lift); z-index: 70; font-size: var(--fs-md); }

/* scheda Azienda */
.co-field { display: grid; gap: .35rem; margin-bottom: .9rem; }
.co-field .co-label { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.co-field textarea { min-height: 5.5rem; }
/* cosa dice il sito sotto un campo tuo diverso: testo su due righe al massimo e «Usa questo» */
.co-site-val { display: flex; align-items: center; gap: .6rem; min-width: 0; padding-left: .6rem;
  border-left: 2px solid var(--accent); font-size: .86em; color: var(--muted); }
.co-site-val .co-sv-text { flex: 1; min-width: 0; white-space: pre-line; overflow-wrap: anywhere; }
.co-site-val .co-sv-text b { font-weight: 600; color: var(--ink-2); }
.co-site-val button { flex: none; }
.prompt-preview { max-height: 22rem; overflow: auto; }
.site-pages { display: grid; gap: .5rem; max-height: 28rem; overflow: auto; }
.site-pages .pg { border-bottom: 1px solid var(--line); padding-bottom: .5rem; min-width: 0; }
.site-pages .pg a { overflow-wrap: anywhere; }
.site-pages pre { margin-top: .4rem; max-height: 16rem; overflow: auto; }
.logo-edit { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.logo-edit .logo-box { width: 4.5rem; height: 4.5rem; border-radius: var(--radius); font-size: var(--fs-2xl); }

/* ---------- procedure ---------- */
.guide { padding: 0; }
.guide > summary { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.25rem; cursor: pointer; font-weight: 600; font-size: var(--fs-lg); list-style: none; }
.guide > summary::-webkit-details-marker { display: none; }
.guide > summary svg { color: var(--accent); }
.guide > summary::after { content: ""; margin-left: auto; width: .55rem; height: .55rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; }
.guide[open] > summary::after { transform: rotate(225deg); }
.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.6rem; padding: 0 1.25rem 1.25rem; color: var(--ink-2); font-size: var(--fs-md); }
.guide-grid h4 { font-size: var(--fs-md); margin-bottom: .35rem; color: var(--ink); }
.guide-grid p { margin: .3rem 0; }
.guide-grid ul { margin: .2rem 0; padding-left: 1.1rem; display: grid; gap: .2rem; }
blockquote { margin: .4rem 0; padding: .6rem .8rem; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 var(--radius) var(--radius) 0; color: var(--ink); }
.proc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.proc-card { display: grid; gap: .6rem; }
.proc-card.off { opacity: .78; }
.pc-head { display: flex; align-items: flex-start; gap: .75rem; }
.pc-head h3 { flex: 1; min-width: 0; font-size: var(--fs-lg); overflow-wrap: anywhere; }
.pc-desc { color: var(--ink-2); font-size: var(--fs-md); }
.pc-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
/* un'etichetta lunga va a capo invece di allargare la scheda (con ogni carattere e misura) */
.proc-card, .proc-card > * { min-width: 0; }
.proc-card .tag { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.pc-last { display: flex; align-items: center; gap: .45rem; font-size: var(--fs-base); color: var(--muted); }
.pc-last svg { width: var(--ic-sm); height: var(--ic-sm); }
.pc-last.ok svg { color: var(--ok); } .pc-last.ko svg { color: var(--danger); }
.pc-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.pc-actions .spacer { flex: 1; }
.pc-steps { white-space: pre-wrap; font-size: var(--fs-md); color: var(--ink-2); background: var(--surface-2); border-radius: var(--radius-sm); padding: .65rem .8rem; max-height: 9.5rem; overflow: auto; }
.pc-run-input { display: flex; gap: .5rem; flex-wrap: wrap; }
.pc-run-input input { flex: 1 1 12rem; }
.runs { display: grid; gap: .5rem; border-top: 1px solid var(--line); padding-top: .7rem; }
.run { display: grid; gap: .3rem; padding: .6rem .7rem; border-radius: var(--radius-sm); background: var(--surface-2); }
.run-top { display: flex; align-items: center; gap: .45rem; font-size: var(--fs-base); color: var(--muted); flex-wrap: wrap; }
.run-top svg { width: var(--ic-sm); height: var(--ic-sm); }
.run.done .run-top svg { color: var(--ok); } .run.error .run-top svg { color: var(--danger); } .run.queued .run-top svg, .run.running .run-top svg { color: var(--warn); }
.run-answer { font-size: var(--fs-md); overflow-wrap: anywhere; }
.run-answer.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.run-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.run-detail { display: grid; gap: .4rem; font-size: var(--fs-base); }
.run-detail .rd { padding: .45rem .6rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; }
.run-detail .rd b { font-weight: 600; }
.switch { position: relative; display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; font-size: var(--fs-sm); color: var(--muted); flex: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { width: 2.6rem; height: 1.5rem; border-radius: var(--radius); background: var(--line-strong); position: relative; transition: background .15s; }
.switch .track::after { content: ""; position: absolute; top: .18rem; left: .18rem; width: 1.14rem; height: 1.14rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(1.1rem); }
.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; padding-top: .5rem; }
.chips button { border-radius: var(--radius); min-height: 2rem; padding: .25rem .7rem; font-size: var(--fs-sm); font-weight: 400; }
.chips button.ext { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.abilities > summary { cursor: pointer; color: var(--accent); font-size: var(--fs-md); width: fit-content; }
.choice { display: grid; gap: .45rem; }
.summary-line { padding: .65rem .8rem; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--ink); font-size: var(--fs-md); }
.summary-line:empty { display: none; }
.teach { background: var(--surface-2); box-shadow: none; display: grid; gap: .5rem; margin-bottom: 1rem; }
.spacer { flex: 1; }

/* finestra sopra la pagina (su telefono a tutto schermo) */
.sheet { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .45); display: grid; place-items: center; padding: 16px; }
.sheet-card { width: min(46rem, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lift); overflow: hidden; }
.sheet-head, .sheet-foot { display: flex; align-items: center; gap: .6rem; padding: .9rem 1.25rem; border-bottom: 1px solid var(--line); }
.sheet-head h3 { flex: 1; font-size: var(--fs-xl); }
.sheet-foot { border-bottom: 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.sheet-body { overflow-y: auto; padding: 1.1rem 1.25rem; flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; }
.sheet-head, .sheet-foot { flex: none; }   /* titolo e pulsanti sempre visibili: scorre solo il contenuto */
body.sheet-open { overflow: hidden; }

/* ---------- automazioni: credenziali ---------- */
.vault-list { display: grid; gap: .6rem; }
.cred { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.cred .ico { width: 2.6rem; height: 2.6rem; border-radius: var(--radius); display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--accent); }
.cred .c-name { font-weight: 600; font-size: var(--fs-md); overflow-wrap: anywhere; }
.cred .c-sub { color: var(--muted); font-size: var(--fs-base); overflow-wrap: anywhere; }
.cred .c-actions { display: flex; gap: .3rem; }
.cred.err { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.otp { display: flex; align-items: center; gap: .6rem; margin-top: .25rem; }
.otp-code { font-size: var(--fs-3xl); font-weight: 600; letter-spacing: .12em; font-variant-numeric: tabular-nums; color: var(--ink); }
.otp-bar { flex: 1; max-width: 7rem; height: .35rem; border-radius: var(--radius); background: var(--line); overflow: hidden; }
.otp-bar i { display: block; height: 100%; background: var(--accent); transition: width 1s linear; }
.otp-bar.low i { background: var(--warn); }
.otp-secs { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; min-width: 2.2rem; }
.howto { margin: .5rem 0; padding-left: 1.2rem; display: grid; gap: .25rem; color: var(--ink-2); font-size: var(--fs-md); }
#tab-automations > .callout { margin: 0; }

/* ---------- schermi medi ---------- */
@media (max-width: 1280px) {
  .span-8, .span-4 { grid-column: span 12; }
  .span-6 { grid-column: span 6; }
}
@media (max-width: 1100px) {
  .settings, .split, .search-row, .proc-grid { grid-template-columns: minmax(0, 1fr); }
  .settings-side { position: static; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span-6 { grid-column: span 12; }
  .hist-panel { width: 15.5rem; }
}

/* ---------- telefono: barra in basso come un'app ---------- */
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .topbar { display: flex; align-items: center; gap: .6rem; padding: calc(.55rem + env(safe-area-inset-top, 0px)) 16px .55rem; background: var(--surface); border-bottom: 1px solid var(--line); min-width: 0; }
  .topbar .logo-box { width: 2.1rem; height: 2.1rem; border-radius: var(--radius); font-size: var(--fs-base); }
  .topbar-title { font-weight: 600; font-size: var(--fs-lg); flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: min(19rem, 86vw); z-index: 40; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow-lift); padding-top: calc(1rem + env(safe-area-inset-top, 0px)); padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .scrim { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 30; }
  :root { --sab: max(6px, calc(env(safe-area-inset-bottom, 0px) - 20px)); }   /* barra in basso vicina al bordo, sopra la lineetta di iPhone */
  .bottombar { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .1rem; position: fixed; left: 10px; right: 10px; bottom: var(--sab); z-index: 35;
    background: var(--tile); border: 1px solid var(--line); border-radius: var(--radius); padding: .25rem; box-shadow: var(--shadow-lift); }
  .bottombar button { position: relative; display: grid; justify-items: center; align-content: center; gap: .1rem; border: 0; background: transparent; color: var(--tile-muted); min-height: 2.85rem; padding: .2rem .05rem; border-radius: var(--radius); font-size: var(--fs-2xs); font-weight: 500; line-height: 1.1; }
  .bottombar button span:not(.badge) { max-width: 100%; overflow-wrap: anywhere; }
  .bottombar button svg { width: var(--ic-md); height: var(--ic-md); }
  .bottombar button.active { background: var(--accent-tile); color: var(--accent-tile-ink); }
  .bottombar .badge { position: absolute; top: .1rem; right: calc(50% - 1.35rem); font-size: var(--fs-2xs); min-width: 1.15rem; padding: 0 .3rem; }
  .tab { padding: 1.1rem 16px calc(5rem + var(--sab)); gap: 1rem; }
  .toast { bottom: calc(var(--bb-top, 4.4rem) + .5rem); left: 16px; right: 16px; max-width: none; }
  h2 { font-size: var(--fs-2xl); }
  .page-head { align-items: flex-start; }
  .panel { padding: 1.1rem; }
  .kpi-grid { gap: .75rem; }
  .kpi { min-height: 7.4rem; padding: 1rem 1.05rem; }
  .kpi .k-label { font-size: var(--fs-md); }
  .kpi .k-value { font-size: var(--fs-5xl); }
  .kpi .k-sub { font-size: var(--fs-base); }
  .dash-grid { gap: .75rem; }
  .donut-wrap { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: .9rem; }
  .log > div { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .guide-grid { grid-template-columns: minmax(0, 1fr); }
  .sheet { padding: 0; place-items: stretch; }
  .sheet-card { width: 100%; max-height: 100dvh; height: 100dvh; border-radius: 0; padding-top: env(safe-area-inset-top, 0px); }
  .sheet-foot { padding-bottom: calc(.9rem + env(safe-area-inset-bottom, 0px)); }
  .sheet-foot .ghost { order: 3; }
  .log > div > span:first-child { order: 2; }
  /* tabelle come schede, senza scorrimento orizzontale */
  .table-wrap { background: transparent; border: 0; box-shadow: none; border-radius: 0; }
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem 1rem; margin-bottom: .75rem; box-shadow: var(--shadow); }
  .table td { border: 0; padding: .35rem 0; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .6rem; align-items: start; }
  .table td::before { content: attr(data-label); font-size: var(--fs-sm); font-weight: 500; color: var(--muted); padding-top: .1rem; }
  .table td[data-label=""] { grid-template-columns: minmax(0, 1fr); }
  .table td[data-label=""]::before { display: none; }
  /* chat: la cronologia diventa un pannello che si apre */
  .tab-chat { padding: 0; }
  .hist-panel { position: fixed; inset: 0 auto 0 0; width: min(20rem, 88vw); z-index: 45; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow-lift); padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
  body.hist-open .hist-panel { transform: none; }
  body.hist-open .scrim { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 44; }
  .hist .c-more { opacity: 1; }
  .chat-main { padding: .75rem 16px calc(5.9rem + var(--sab)); gap: .6rem; }
  .app .only-mobile { display: inline-flex; }
  .chat-head h2 { font-size: var(--fs-lg); }
  .msg { max-width: 94%; }
}
@media (max-width: 420px) {
  .kpi .k-value { font-size: var(--fs-4xl); }
  .donut-wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .donut-wrap svg { max-width: 10rem; }
  .donut-wrap .dtable { width: 100%; }
  .rowi { grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: .7rem; }
  .rowi .ico { width: 2.5rem; height: 2.5rem; }
}

/* accesso da Internet: stato e QR del codice Authenticator */
.access-checks { display: grid; gap: .35rem; }

/* Posta, WhatsApp e Telegram dentro la dashboard */
.tab.tab-embed { padding: 0; gap: 0; overflow: hidden; }
.tab-embed iframe { flex: 1; width: 100%; min-height: 0; border: 0; display: block; background: var(--bg); }
/* pallino "collegato" sull'angolo dell'icona: non sposta il numerino dei non letti */
.nav button span.dot { position: absolute; left: 1.95rem; top: .5rem; margin: 0; width: .55rem; height: .55rem;
  box-shadow: 0 0 0 2px var(--surface); }
.nav button span.dot:not(.ok) { display: none; }
@media (max-width: 900px) {
  .tab.tab-embed { padding: 0 0 calc(5.4rem + var(--sab)); }
}

/* ---------- automazioni nei portali */
.spacer { flex: 1; }
.au-panel .card-head { align-items: flex-start; }
.au-panel .card-head .primary svg { width: var(--ic-xs); height: var(--ic-xs); color: var(--danger); }
.pc-last.wait svg { color: var(--warn); }
.pc-actions button svg { width: var(--ic-sm); height: var(--ic-sm); }

.rec { position: fixed; inset: 0; z-index: 90; background: var(--bg); display: flex; flex-direction: column; }
.rec-bar { display: flex; align-items: center; gap: .6rem; padding: .6rem 1rem; border-bottom: 1px solid var(--line); background: var(--surface); flex-wrap: wrap; }
.rec-live { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.rec-live svg { width: var(--ic-xs); height: var(--ic-xs); color: var(--danger); animation: rec-blink 1.4s ease-in-out infinite; }
@keyframes rec-blink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .rec-live svg { animation: none; } }
.rec-url { flex: 1 1 22rem; display: flex; gap: .4rem; min-width: 0; }
.rec-url input { flex: 1; min-width: 0; }
#rec-secret { flex: 0 1 18rem; min-width: 0; }
.rec-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 21rem; }
.rec-screen { position: relative; min-width: 0; min-height: 0; overflow: auto; display: grid; place-items: start center; padding: .75rem; background: var(--surface-2); outline: none; }
.rec-screen:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.rec-screen img { display: block; width: 100%; max-width: 1280px; height: auto; aspect-ratio: 1280 / 800; background: #fff; border-radius: var(--radius-sm); box-shadow: var(--shadow); cursor: default; user-select: none; }
.rec-screen img:not([src]) { visibility: hidden; }
.rec-wait { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); pointer-events: none; }
.rec-side { border-left: 1px solid var(--line); background: var(--surface); padding: 1rem; display: flex; flex-direction: column; gap: .75rem; min-height: 0; overflow-y: auto; }
.rec-side h4 { margin: 0; }
.rec-steps { margin: 0; padding-left: 1.3rem; display: grid; gap: .3rem; font-size: var(--fs-base); max-height: 40vh; overflow-y: auto; }
.rec-steps li { display: flex; gap: .4rem; align-items: flex-start; }
.rec-steps li span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rec-steps .icon-btn { min-width: 1.8rem; min-height: 1.8rem; padding: .25rem; flex: none; }
.rec-files { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.rec-files:empty { display: none; }
.rec-pick { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); display: grid; place-items: center; padding: 16px; z-index: 2; }
.rec-pick .panel { width: min(28rem, 100%); max-height: 80vh; overflow-y: auto; }
.rec-pick-list { display: grid; gap: .4rem; }
.rec-pick-list button { justify-content: flex-start; text-align: left; }

.au-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.au-step { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .55rem .7rem; background: var(--surface); }
.au-step.off { opacity: .55; }
.au-step-head { display: flex; align-items: center; gap: .45rem; }
.au-n { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.au-label { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-md); }
.au-step-head .icon-btn { min-width: 2.1rem; min-height: 2.1rem; padding: .3rem; flex: none; }
.au-opts { display: flex; flex-wrap: wrap; gap: .3rem .9rem; padding: .35rem 0 0 2.1rem; font-size: var(--fs-base); color: var(--ink-2); }
.au-opts label:not(.check) { display: inline-flex; align-items: center; gap: .35rem; }
.au-opts input:not([type=checkbox]) { width: auto; min-width: 0; max-width: 14rem; padding: .25rem .45rem; }
.au-run { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: .6rem; }
.au-run summary { display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; cursor: pointer; }
.au-run summary svg { width: var(--ic-sm); height: var(--ic-sm); flex: none; }
.au-run.ok summary svg { color: var(--ok); } .au-run.ko summary svg { color: var(--danger); } .au-run.wait summary svg { color: var(--warn); }
.au-run-body { padding: 0 .8rem .8rem; display: grid; gap: .6rem; }
.au-files { display: flex; flex-wrap: wrap; gap: .4rem; }
.au-files .button-link svg { width: var(--ic-sm); height: var(--ic-sm); }
.au-log { margin: 0; padding-left: 1.3rem; font-size: var(--fs-base); display: grid; gap: .2rem; }
.au-log li.ok::marker { color: var(--ok); } .au-log li.error { color: var(--danger); }
.au-log li.skipped, .au-log li.off { color: var(--muted); }
.au-shot { width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }

@media (max-width: 900px) {
  .rec-main { grid-template-columns: 1fr; grid-template-rows: auto auto; overflow-y: auto; }
  .rec-screen { padding: .5rem; overflow: visible; }
  .rec-side { border-left: 0; border-top: 1px solid var(--line); overflow: visible; }
  .rec-bar { padding: .5rem 16px; padding-top: calc(.5rem + env(safe-area-inset-top, 0px)); }
  #rec-secret { flex: 1 1 100%; }
  .au-opts { padding-left: 0; }
}

/* pulsante chiaro/scuro in alto (menu laterale su computer, barra in alto sul telefono) */
.brand .theme-toggle { min-width: 2.3rem; min-height: 2.3rem; padding: .4rem; border-radius: var(--radius-sm); }
.theme-toggle svg { width: var(--ic-md); height: var(--ic-md); }
/* scelta delle voci della barra in basso */
/* Aspetto › barra del telefono: l'anteprima com'è davvero, poi una tendina per posto (3 in fila sul computer) */
.bar-pick { display: grid; gap: .7rem; max-width: 46rem; }
.bp-preview { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; max-width: 24rem; padding: .35rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 4px 14px -8px rgba(17, 20, 40, .25); }
.bp-it { display: grid; justify-items: center; gap: .1rem; color: var(--ink-2); padding: .2rem 0; min-width: 0; }
.bp-it svg { width: var(--ic-sm); height: var(--ic-sm); }
.bp-it small { font-size: var(--fs-2xs); max-width: 100%; overflow-wrap: anywhere; }
.bp-it.bp-ask svg { width: var(--ic-xl); height: var(--ic-xl); margin-top: -.6rem; }
.bp-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.bp-slot { display: grid; gap: .25rem; min-width: 0; }
.bp-slot select { width: 100%; min-width: 0; }
@media (max-width: 640px) { .bp-slots { grid-template-columns: minmax(0, 1fr); } }

/* impostazioni: schede e stato del salvataggio */
.subtabs { display: flex; gap: .35rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: .5rem; }
.subtabs button { border: 1px solid transparent; background: transparent; color: var(--ink-2); border-radius: var(--radius);
  padding: .4rem .9rem; min-height: 2.4rem; font-weight: 500; }
.subtabs button:hover { background: var(--surface-2); }
.subtabs button.on { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.set-pane { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.set-pane > * { min-width: 0; }
.save-state { margin-left: .4rem; font-weight: 500; color: var(--ok); }
.save-state:empty { display: none; }
.field-error { font-size: var(--fs-sm); margin: -.1rem 0 .2rem; }
input.invalid, textarea.invalid, select.invalid { border-color: var(--danger); }
.lm-bar { grid-column: 1 / -1; height: .35rem; border-radius: var(--radius); background: var(--line); overflow: hidden; }
.lm-bar > i { display: block; height: 100%; background: var(--accent); transition: width .4s; }
#lm-other input { flex: 1; min-width: 0; }

.rec-tip { margin-top: -.3rem; }
@media (max-width: 860px) { .set-pane { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .subtabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px .5rem; }
  .subtabs button { flex: none; }
}

/* verifica AI */
.check-panel { grid-column: 1 / -1; }
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.check-item { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.check-item .ci-icon svg { width: var(--ic-sm); height: var(--ic-sm); margin-top: .15rem; }
.check-item.ok .ci-icon { color: var(--ok); } .check-item.fail .ci-icon { color: var(--danger); }
.check-item.warn .ci-icon, .check-item.running .ci-icon { color: var(--warn); }
.check-item > div { min-width: 0; }
.ci-detail { font-size: var(--fs-base); color: var(--ink-2); overflow-wrap: anywhere; white-space: pre-wrap; }

/* ---- barra laterale: card dell'azienda in cima, modelli / VM / provider in basso */
.brand { padding: 0; gap: .45rem; }
.brand .company-card { flex: 1; min-width: 0; }
.sys-box { display: grid; gap: .4rem; width: 100%; padding: .65rem .7rem; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--surface-2); color: var(--muted); font-size: var(--fs-sm); text-align: left; justify-content: stretch; min-height: 0; font-weight: 400; }
.sys-box:empty { display: none; }
.sys-box:hover { border-color: var(--line-strong); }
.sys-head { display: flex; align-items: center; gap: .45rem; color: var(--ink); min-width: 0; }
.sys-head strong { font-weight: 600; font-size: var(--fs-base); overflow-wrap: anywhere; }
.sys-head .dot, .sys-line .dot { margin: 0; }
.sys-line { display: flex; align-items: baseline; gap: .45rem; line-height: 1.35; }
.sys-line .dot { transform: translateY(-.05rem); }
.meter { display: grid; grid-template-columns: auto 1fr; gap: .15rem .5rem; align-items: center; }
.meter .m-label { color: var(--ink); font-weight: 500; }
.meter .m-val { text-align: right; font-variant-numeric: tabular-nums; }
.meter .m-bar { grid-column: 1 / -1; height: .3rem; border-radius: var(--radius); background: var(--line); overflow: hidden; }
.meter .m-bar i { display: block; height: 100%; border-radius: var(--radius); background: var(--ok); }
.meter .m-bar i.warn { background: var(--warn, #d9a21b); } .meter .m-bar i.ko { background: var(--danger); }
/* processi in esecuzione (barra laterale): una riga di testo, sotto la barra dell'avanzamento */
.procs { display: grid; gap: .4rem; margin-top: .2rem; padding-top: .45rem; border-top: 1px solid var(--line); }
.proc { display: grid; gap: .22rem; min-width: 0; }
.proc-t { color: var(--ink); font-size: var(--fs-sm); line-height: 1.3; overflow-wrap: anywhere; }
.proc.idle .proc-t { color: var(--muted); }
.proc.ko .proc-t { color: var(--danger); }
.proc-bar { position: relative; height: .22rem; border-radius: var(--radius); background: var(--line); overflow: hidden; }
.proc-bar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--accent); transition: width .6s ease; }
.proc-bar.busy i { width: 34%; animation: proc-run 1.4s ease-in-out infinite; }
@keyframes proc-run { 0% { left: -34%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .proc-bar.busy i { animation: none; left: 0; width: 100%; opacity: .45; } }
.sys-line.muted { color: var(--muted); font-size: var(--fs-sm); }

/* ---- provider esterni */
.warn-callout { margin: 0; }
.pv-routes { display: grid; gap: .6rem; }
.pv-route { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: .6rem; align-items: center;
  padding: .55rem 0; border-bottom: 1px solid var(--line); }
.pv-route:last-child { border-bottom: 0; }
.pv-role { display: grid; gap: .1rem; min-width: 0; }
.pv-role small { color: var(--muted); font-size: var(--fs-sm); }
.pv-route select, .pv-route input { width: 100%; min-width: 0; }
.pv-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.pv-card.on { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.pv-card h3 { margin: 0; }
.pv-card .chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.pv-card .chip { font-size: var(--fs-xs); padding: .1rem .5rem; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line); }
.pv-card label { display: grid; gap: .3rem; }
.pv-status { font-size: var(--fs-base); }
.pv-total { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .8rem; margin-bottom: .6rem; }
.pv-usage-prov summary { cursor: pointer; padding: .35rem 0; }
.pv-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); display: block; overflow-x: auto; }
.pv-table th, .pv-table td { padding: .3rem .45rem; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.pv-price { width: 5.2rem; min-height: 2rem; padding: .2rem .4rem; }
button.danger { color: var(--danger); }
.row-item { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .4rem 0; border-bottom: 1px solid var(--line); }
.row-item > span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 720px) { .pv-route { grid-template-columns: 1fr; } }

/* ---- panoramica: provider AI esterni */
.home-ai { margin-bottom: 1rem; display: grid; gap: .8rem; }
.ai-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .7rem; }
.ai-kpi { display: grid; gap: .15rem; padding: .6rem .75rem; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); }
.ai-kpi strong { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.ai-bars { display: flex; align-items: flex-end; gap: .3rem; height: 5rem; }
.ai-bars span { flex: 1; max-width: 2.6rem; display: grid; grid-template-rows: 1fr auto; height: 100%; text-align: center; min-width: 0; }
.ai-bars i { align-self: end; display: block; background: var(--accent); border-radius: var(--radius) var(--radius) 0 0; }
.ai-bars small { font-size: var(--fs-2xs); color: var(--muted); }

/* ---- allegati della chat */
.chat-files { display: flex; flex-wrap: wrap; gap: .4rem; padding: .5rem 1rem 0; }
.file-chip { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; padding: .25rem .3rem .25rem .6rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface-2); font-size: var(--fs-sm); }
.file-chip span { max-width: 16rem; overflow-wrap: anywhere; }
.file-chip svg { width: var(--ic-sm); height: var(--ic-sm); flex: none; }
.file-chip.busy { opacity: .7; } .file-chip.err { border-color: var(--danger); color: var(--danger); }
.file-chip .x { min-height: 1.6rem; min-width: 1.6rem; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: var(--fs-lg); line-height: 1; }
.chat-main.drop { outline: 2px dashed var(--accent); outline-offset: -6px; }
button.linkish { display: block; min-height: 0; padding: .15rem 0 0; border: 0; background: transparent; font-size: var(--fs-sm); text-align: left; text-decoration: underline dotted; font-weight: 400; }

/* ---- altre caselle e regole di inoltro */
.mb-form { display: grid; gap: .6rem; padding: .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.mb-form h4 { margin: 0; }
.mb-form label { display: grid; gap: .3rem; }
.mb-form label.check { display: flex; }
.rule-group h4 { margin: .6rem 0 .2rem; font-size: var(--fs-base); color: var(--muted); }
.row-item.off { opacity: .6; }
.row-item .btn-row { flex: none; }

/* ---- smistamento: casella e anteprima */
.acc-badge { display: inline-block; font-size: var(--fs-xs); padding: .05rem .45rem; border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 15%, var(--surface));
  color: var(--ink); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); margin-bottom: .15rem; white-space: nowrap; }
#em-accounts { margin-bottom: .6rem; }
button.linkish.subj { font-size: inherit; text-decoration: none; color: var(--ink); font-weight: 500; }
button.linkish.subj:hover { text-decoration: underline; }
.em-head { display: grid; gap: .2rem; margin-bottom: .8rem; overflow-wrap: anywhere; }
.em-text { white-space: pre-wrap; font: inherit; background: var(--surface-2); padding: .8rem; border-radius: var(--radius-sm); max-height: 50vh; overflow: auto; }
.em-atts { display: grid; gap: .5rem; }
.em-att { display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; align-items: center; padding: .5rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.em-att img { width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: var(--radius); }
.em-att > div { min-width: 0; overflow-wrap: anywhere; }

/* ---- rubrica */
#ct-q { width: 100%; margin-bottom: 1rem; }
.ct-list { display: block; }
/* rubrica come quella del telefono: lettere, righe con iniziali, azioni rapide a destra */
.ct-letter { position: sticky; top: 0; z-index: 1; margin: .9rem 0 .25rem; padding: .25rem .9rem; font-size: var(--fs-xs);
  font-weight: 700; letter-spacing: .06em; color: var(--accent); background: var(--ground); }
.ct-letter:first-child { margin-top: 0; }
.ct-group { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); overflow: hidden; }
.ct-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: .4rem;
  border-top: 1px solid var(--line); }
.ct-row:first-child { border-top: 0; }
.ct-main { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: .75rem; min-width: 0;
  padding: .6rem .9rem; cursor: pointer; border-radius: var(--radius-sm); }
.ct-main:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (hover: hover) { .ct-main:hover { background: var(--surface-2); } }
/* i dipendenti (La tua azienda): righe sottili, il nome e sotto come lo chiamate e il numero; niente riquadri */
.emp-list { list-style: none; margin: 0; padding: 0; }
.emp-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .85rem; padding: .75rem 0;
  border-top: 1px solid var(--line); }
.emp-row:first-child { border-top: 0; }
.emp-av { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: var(--fs-base); color: #fff;
  background: linear-gradient(160deg, hsl(var(--h) 62% 58%), hsl(var(--h) 55% 44%)); }
.emp-t { display: grid; gap: .15rem; min-width: 0; }
.emp-t strong { font-weight: 600; overflow-wrap: anywhere; }
.emp-sub { display: flex; flex-wrap: wrap; gap: .2rem .75rem; color: var(--muted); font-size: var(--fs-base); }
.emp-acc { display: inline-flex; align-items: center; gap: .35rem; color: var(--ink-2); font-size: var(--fs-sm); }
.emp-acc svg { width: var(--ic-xs); height: var(--ic-xs); }
.emp-acts { display: flex; gap: .35rem; }
.emp-empty { padding: .5rem 0; }
@media (max-width: 600px) {
  .emp-row { grid-template-columns: auto minmax(0, 1fr); }
  .emp-acts { grid-column: 2; }
}
/* «Dipendente» in rubrica: come le etichette della scheda, un punto e la parola, niente riquadro */
.ct-tag { margin-right: .6rem; font-weight: 600; color: var(--accent); }
.ct-tag::before { content: ""; display: inline-block; width: .38rem; height: .38rem; border-radius: 50%; background: currentColor;
  margin-right: .32rem; vertical-align: .12em; }
.ct-av.has-pic { overflow: hidden; background: var(--surface-2); }
.ct-av.has-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ct-av.has-pic.logo { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.ct-av.has-pic.logo img { object-fit: contain; padding: 12%; }
.ct-av { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center;
  font-size: var(--fs-sm); font-weight: 700; color: #fff; background: hsl(var(--h) 45% 48%); }
.ct-txt { display: grid; min-width: 0; }
.ct-txt strong, .ct-line { overflow-wrap: anywhere; }
.ct-txt strong { font-weight: 600; }
.ct-line { font-size: var(--fs-sm); color: var(--muted); }
.ct-acts { display: flex; gap: .15rem; padding-right: .5rem; }
.ct-act { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: var(--radius); border: 0;
  background: transparent; color: var(--accent); cursor: pointer; padding: 0; }
.ct-act:hover, .ct-act:focus-visible { background: var(--surface-2); }
.ct-act svg { width: var(--ic-md); height: var(--ic-md); }
.ct-detail { grid-column: 1 / -1; display: grid; gap: .1rem; padding: 0 .9rem .7rem 4.15rem; }
.ct-dl { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: .7rem; padding: .45rem .5rem;
  border-radius: var(--radius-sm); cursor: pointer; color: var(--ink); overflow-wrap: anywhere; }
.ct-dl:hover, .ct-dl:focus-visible { background: var(--surface-2); }
.ct-dl svg { flex: none; width: var(--ic-sm); height: var(--ic-sm); color: var(--accent); }
.ct-dl span { display: grid; min-width: 0; }
.ct-dl small { font-size: var(--fs-xs); color: var(--muted); }
.ct-detail .meta { margin: .3rem .5rem 0; }
@media (max-width: 560px) {
  .ct-main { padding: .55rem .6rem; gap: .6rem; }
  .ct-av { width: 2.25rem; height: 2.25rem; }
  .ct-acts { padding-right: .25rem; }
  .ct-act { width: 2.2rem; height: 2.2rem; }
  /* sul telefono restano le due azioni più usate: il resto è nel dettaglio */
  .ct-acts .ct-act:nth-child(n+3) { display: none; }
  .ct-detail { padding-left: .6rem; }
}
.set-pane[data-pane="providers"] { grid-template-columns: minmax(0, 1fr); }

/* ---- diario (Attività) */
.jr-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.jr-filters input[type=search] { flex: 1; min-width: 12rem; }
.jr-list { display: grid; gap: .1rem; }
.jr-day { margin: 1rem 0 .3rem; font-size: var(--fs-md); color: var(--muted); text-transform: capitalize; }
.jr-item { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: .6rem; padding: .55rem .2rem; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.jr-item .dot { margin: 0 .25rem 0 .4rem; }
.jr-item pre { white-space: pre-wrap; font: inherit; font-size: var(--fs-sm); background: var(--surface-2); padding: .5rem; border-radius: var(--radius); max-height: 16rem; overflow: auto; }
.jr-item summary { cursor: pointer; font-size: var(--fs-sm); color: var(--muted); }
.jr-tech { margin-top: 1.4rem; }
.dot.warn { background: var(--warn); }
.autonomy h4 { margin: .6rem 0 0; font-size: var(--fs-md); color: var(--muted); }

.side-foot { margin-top: auto; }
.sys-box { display: grid; gap: .45rem; }
#sys-info { display: grid; gap: .4rem; }
.sys-gear { display: flex; align-items: center; justify-content: center; gap: .45rem; width: 100%; min-height: 2.3rem; padding: .35rem .6rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-weight: 500; font-size: var(--fs-base); }
.sys-gear svg { width: var(--ic-sm); height: var(--ic-sm); }
.sys-gear:hover, .sys-gear.active { border-color: var(--accent); color: var(--accent); }
.set-pane[data-pane="company"] { grid-template-columns: minmax(0, 1fr); }
.company-intro { margin: 0; }

/* ---- Panoramica: titolo e pulsanti del periodo sulla stessa riga */
.home-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: .4rem 1rem; }
.home-head h2 { line-height: calc(2.3rem + 2px); margin: 0; }
.home-head .filters { justify-self: end; }
.home-head .date, .home-head .seg button { white-space: nowrap; }
@media (max-width: 700px) {
  .home-head { grid-template-columns: minmax(0, 1fr); gap: .7rem; }
  .home-head .date { white-space: normal; }
  .home-head .filters { justify-self: stretch; grid-row: 2; }
  .home-head .seg { display: flex; width: 100%; }
  .home-head .seg button { flex: 1; }
}

/* ---- aspetto personalizzato */
.lk-presets { display: flex; flex-wrap: wrap; gap: .4rem; }
.lk-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: .7rem; }
.lk-colors label { display: grid; gap: .3rem; font-size: var(--fs-base); }
.lk-color { display: flex; align-items: center; gap: .6rem; }
.lk-color input[type=color] { width: 3rem; height: 2.3rem; padding: .15rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); }
.lk-color:not(.set) input[type=color] { opacity: .55; }
.lk-color:not(.set) .linkish { visibility: hidden; }
.lk-range { display: grid; grid-template-columns: 1fr auto; gap: .3rem .6rem; align-items: center; font-size: var(--fs-base); }
.lk-range input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); }
.lk-range output { color: var(--muted); font-variant-numeric: tabular-nums; }
.lk-mode { width: fit-content; }
.lk-tint { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: .7rem; align-items: end; }
.lk-tint > label:first-child { display: grid; gap: .3rem; font-size: var(--fs-base); }

/* ---- attività dell'assistente: riquadro in basso nella barra laterale, pillola al centro in alto sul telefono */
.act-box, .act-pill { display: flex; align-items: center; gap: .5rem; min-width: 0; border: 1px solid var(--line); background: var(--surface-2);
  color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500; text-align: left; cursor: pointer; }
.act-box { width: 100%; padding: .5rem .7rem; border-radius: var(--radius-sm); min-height: 2.4rem; }
.act-box:hover, .act-pill:hover { border-color: var(--line-strong); color: var(--ink); }
.act-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.act-count:empty { display: none; }
.act-count { flex: none; min-width: 1.3rem; padding: 0 .35rem; border-radius: var(--radius); background: var(--accent); color: var(--accent-ink);
  font-size: var(--fs-xs); font-weight: 600; text-align: center; line-height: 1.3rem; }
.act-ico { flex: none; width: .95rem; height: .95rem; border-radius: 50%; background: var(--line-strong); }
.act-running .act-ico, .act-row.running .act-ico { background: none; border: 2px solid var(--accent-soft); border-top-color: var(--accent); animation: spin .9s linear infinite; }
.act-done .act-ico, .act-row.done .act-ico { background: var(--ok); }
.act-error .act-ico, .act-row.error .act-ico { background: var(--danger); }
/* finite e non ancora guardate: lampeggiano finché non le apri */
@keyframes act-blink { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); border-color: var(--accent); }
  50% { box-shadow: 0 0 0 .35rem color-mix(in srgb, var(--accent) 0%, transparent); border-color: var(--line); } }
.act-box.blink, .act-pill.blink { animation: act-blink 1.4s ease-in-out infinite; color: var(--ink); }
.act-pop { position: fixed; z-index: 70; left: calc(var(--sidebar) + .6rem); bottom: 1rem; width: min(26rem, calc(100vw - 32px));
  max-height: min(34rem, calc(100dvh - 2rem)); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lift); overflow: hidden; }
.act-pop-head, .act-pop-foot { flex: none; display: flex; align-items: center; gap: .5rem; padding: .55rem .6rem .55rem .9rem; border-bottom: 1px solid var(--line); }
.act-pop-head strong { flex: 1; }
.act-pop-foot { border-bottom: 0; border-top: 1px solid var(--line); justify-content: space-between; padding: .5rem .6rem; }
.act-pop-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .35rem; }
.act-pop-list h4 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: .55rem .55rem .25rem; font-weight: 600; }
.act-row-wrap { display: flex; align-items: center; gap: .15rem; }
.act-row { display: flex; align-items: flex-start; gap: .55rem; width: 100%; padding: .5rem .55rem; border: 0; background: transparent;
  border-radius: var(--radius-sm); text-align: left; color: var(--ink); font-weight: 400; cursor: pointer; }
.act-row:hover { background: var(--surface-2); }
.act-row .act-ico { margin-top: .2rem; }
.act-row .act-main { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.act-row .act-title { font-weight: 500; font-size: var(--fs-base); overflow-wrap: anywhere; }
.act-row .act-sub { font-size: var(--fs-xs); color: var(--muted); overflow-wrap: anywhere; }
.act-row.unseen .act-title::after { content: ""; display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--accent); margin-left: .4rem; vertical-align: middle; animation: rec-blink 1.2s infinite; }
.act-row .act-go { flex: none; align-self: center; min-width: 2rem; min-height: 2rem; padding: .3rem; }
.act-empty { padding: 1rem; color: var(--muted); font-size: var(--fs-base); text-align: center; }
.act-steps { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; font-size: var(--fs-base); }
.act-steps .meta { margin-right: .35rem; }
.act-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem .8rem; font-size: var(--fs-base); margin-bottom: 1rem; }
.act-facts dt { color: var(--muted); }
.act-facts dd { margin: 0; overflow-wrap: anywhere; }
.act-state { display: flex; align-items: center; gap: .45rem; margin: 0 0 .9rem; font-size: var(--fs-md); color: var(--ink-2); }
.act-state.error strong { color: var(--danger); }
.act-asked { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.act-steps-box, .act-tech { margin-top: 1rem; }
.act-steps-box > summary, .act-tech > summary { cursor: pointer; color: var(--muted); font-size: var(--fs-base); margin-bottom: .5rem; }
.act-tech pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-sm); color: var(--muted); margin: 0; }
.act-row .act-when { color: var(--ink-2); }
.act-row .reg-new { align-self: center; flex: none; }
.act-result { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .75rem .9rem; background: var(--surface-2); overflow-wrap: anywhere; }
.act-sheet-sec { margin: 1rem 0 .4rem; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.chat-pending { align-self: flex-start; display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: var(--fs-base); }
.chat-pending .act-ico { background: none; border: 2px solid var(--accent-soft); border-top-color: var(--accent); animation: spin .9s linear infinite; }
@media (max-width: 860px) {
  .act-box { display: none; }
  .topbar { position: relative; }
  .act-pill { position: absolute; left: 50%; top: calc(50% + env(safe-area-inset-top, 0px) / 2); transform: translate(-50%, -50%);
    max-width: calc(100vw - 9.5rem); height: 2.1rem; padding: 0 .75rem; border-radius: var(--radius); box-shadow: var(--shadow); }
  body.act-on .topbar-title { visibility: hidden; }
  .act-pop { left: 50%; right: auto; transform: translateX(-50%); top: calc(3.6rem + env(safe-area-inset-top, 0px)); bottom: auto;
    max-height: calc(100dvh - 11rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
}
/* chat: cosa ha letto/visto l'assistente negli allegati di un messaggio */
.msg.user .att-seen { margin-top: .5rem; font-size: .84em; }
.msg.user .att-seen summary { cursor: pointer; color: var(--muted); }
.msg.user .att-seen > div { margin-top: .35rem; white-space: pre-wrap; color: var(--ink-2); max-height: 16rem; overflow-y: auto; }

/* ---- visore degli allegati (viewer.js): dashboard, Posta, WhatsApp e Telegram */
.viewer { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .85); display: flex; flex-direction: column; }
.viewer-bar { display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; color: #fff; background: rgba(0, 0, 0, .4); flex-wrap: wrap; }
.viewer-bar #viewer-name { min-width: 0; max-width: 60vw; overflow-wrap: anywhere; }
.viewer-bar .spacer { flex: 1; }
.viewer-bar .icon-btn { color: #fff; }
.viewer-body { flex: 1; display: grid; place-items: center; padding: 1rem; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.viewer-body img, .viewer-body video { max-width: 100%; max-height: calc(100dvh - 6rem); object-fit: contain; border-radius: var(--radius); }
.viewer-body iframe { width: min(1000px, 100%); height: calc(100dvh - 9.5rem); border: 0; background: #fff; border-radius: var(--radius); }
.viewer-doc { background: var(--surface); color: var(--ink); padding: 1.2rem; border-radius: var(--radius); max-width: 30rem; }
.viewer-body:has(.viewer-text) { place-items: start center; }
/* fogli di calcolo nel visore: tabella modificabile */
.sheet-view { width: min(1400px, 100%); height: 100%; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: .5rem; background: var(--surface); color: var(--ink); border-radius: var(--radius); padding: .7rem; align-self: stretch; }
.sheet-bar { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.sheet-q { flex: 1 1 12rem; min-height: 2.1rem; }
.sheet-n { margin-left: auto; }
.sheet-note { margin: 0; }
.sheet-tabs { display: flex; gap: .25rem; flex-wrap: wrap; width: 100%; }
.sheet-tabs button { min-height: 1.9rem; padding: .2rem .7rem; font-size: var(--fs-sm); border-radius: var(--radius) var(--radius) 0 0; background: var(--surface-2); }
.sheet-tabs button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.sheet-wrap { overflow: auto; min-height: 0; border: 1px solid var(--line); border-radius: var(--radius); overscroll-behavior: contain; }
.sheet-table { border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); min-width: 100%; }
.sheet-table th, .sheet-table td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: .3rem .5rem; max-width: 22rem; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.sheet-table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); font-weight: 700; }
.sheet-table thead th span { outline: none; }
.sheet-table td[contenteditable]:focus, .sheet-table th span:focus { outline: 2px solid var(--accent); outline-offset: -2px;
  white-space: pre-wrap; overflow: visible; background: var(--surface); }
.sheet-rn { position: sticky; left: 0; background: var(--surface-2); color: var(--muted); font-size: var(--fs-xs); text-align: right !important; z-index: 1; }
.sheet-table thead .sheet-rn { z-index: 2; }
.sheet-sort { all: unset; cursor: pointer; margin-left: .3rem; font-size: var(--fs-2xs); color: var(--muted); }
.sheet-del { all: unset; cursor: pointer; color: var(--muted); padding: 0 .3rem; font-size: var(--fs-md); line-height: 1; }
.sheet-del:hover { color: #dc2626; }
.sheet-more { justify-self: center; }
@media (max-width: 760px) {
  .sheet-view { padding: .5rem; }
  .sheet-n { margin-left: 0; width: 100%; }
  .sheet-table { font-size: var(--fs-sm); }
}
.viewer-text { width: min(900px, 100%); background: var(--surface); color: var(--ink); border-radius: var(--radius); padding: 1rem 1.2rem; }
.viewer-text pre { white-space: pre-wrap; overflow-wrap: anywhere; font: var(--fs-base)/1.55 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; margin: .5rem 0 0; }
.viewer-foot .button-link { color: #fff; border-color: rgba(255, 255, 255, .45); }
.viewer-foot .button-link.hidden { display: none; }
.em-thumb { padding: 0; border: 0; background: none; min-height: 0; cursor: zoom-in; }

/* ---- Registro (Automazioni, Procedure, Smistamento, Promemoria, Attività) */
.registry { display: grid; gap: .6rem; }
.reg-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .6rem 1rem; }
.reg-head h3 { font-size: var(--fs-lg); }
.reg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.reg-days-l { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-sm); color: var(--muted); }
.reg-actions select { width: auto; min-width: 7.5rem; padding: .35rem .5rem; font-size: var(--fs-sm); }
.reg-list { display: grid; gap: 2px; }
.reg-row { display: flex; align-items: center; gap: .2rem; border-radius: var(--radius-sm); }
.reg-row .act-row { flex: 1; min-width: 0; }
.reg-row.unseen { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.reg-row .act-sub { overflow-wrap: anywhere; }
.reg-del { flex: none; color: var(--muted); }
.reg-del:hover { color: var(--danger); }
.reg-del-ph { flex: none; width: 2.5rem; }
.reg-new { margin-left: .35rem; font-size: var(--fs-2xs); }
@media (max-width: 860px) { .reg-actions { width: 100%; } .reg-days-l { flex: 1 1 100%; justify-content: space-between; } .reg-del-seen { margin-left: auto; } }
.reg-more { justify-self: start; }

/* «File da caricare» delle automazioni e caricamento dal computer durante la registrazione */
.au-inbox-list { display: grid; gap: .35rem; margin-top: .8rem; }
.au-inbox-row { display: flex; align-items: center; gap: .55rem; padding: .45rem .55rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.au-inbox-row > svg { flex: none; color: var(--muted); }
.au-inbox-name { flex: 1; min-width: 0; display: grid; overflow-wrap: anywhere; }
.rec-upload { justify-content: center; cursor: pointer; }
.rec-files a.tag { text-decoration: none; gap: .3rem; }
.rec-files a.tag svg { width: var(--ic-xs); height: var(--ic-xs); }
.jr-diary { margin-top: 1rem; }
.jr-diary > summary { cursor: pointer; font-weight: 600; }
.jr-diary[open] > summary { margin-bottom: .9rem; }

/* Nuovi clienti: barra di selezione e azioni, tabella ordinata */
.lead-panel { padding: 0; overflow: hidden; margin-top: 1.1rem; }
.lead-panel .table-wrap { border: 0; border-radius: 0; box-shadow: none; }
.lead-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .8rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
.lead-bar input[type=search] { flex: 1 1 14rem; min-width: 0; width: auto; }
.lead-bar > select { width: auto; flex: 0 0 auto; }
.lead-all { white-space: nowrap; font-weight: 500; min-width: 9.5rem; }
.lead-bulk { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin-left: auto; }
.lead-bulk.off { opacity: .55; }
.lead-bulk select { width: auto; }
.lead-bar button, .lead-btns button { white-space: nowrap; }
.lead-table { table-layout: fixed; }
.lead-table td { overflow-wrap: anywhere; }   /* colonne fisse: un nome lungo va a capo, non esce sopra la colonna accanto */
.lead-table th.lead-chk, .lead-table td.lead-chk { width: 2.8rem; padding-right: 0; }
.lead-table th:nth-child(3) { width: 16rem; }
.lead-table th.lead-score { width: 4.6rem; text-align: center; }
.lead-table td.lead-score { text-align: center; }
.lead-table td.lead-score .score { justify-self: start; }
#tab-leads .search-row { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
#tab-leads .search-row .inline-form { flex-wrap: nowrap; }
#tab-leads .search-row .field.grow { flex: 1 1 0; min-width: 0; }
#tab-leads .search-row .field.narrow { flex: 0 0 6.5rem; }
#tab-leads .search-row button { white-space: nowrap; flex: 0 0 auto; }
.lead-table th:nth-child(5) { width: 10.5rem; }
.lead-table th.lead-act { width: 11.5rem; }
.lead-table tr.sel td { background: var(--accent-soft); }
.lead-table td { vertical-align: middle; }
.lead-name { font-weight: 600; }
.lead-links { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.lead-links a { font-size: var(--fs-xs); font-weight: 600; padding: .12rem .5rem; border-radius: var(--radius); text-decoration: none;
  color: var(--c-sky); background: color-mix(in srgb, var(--c-sky) 12%, transparent); }
.lead-links a:hover { background: color-mix(in srgb, var(--c-sky) 22%, transparent); }
.lead-desc { font-size: var(--fs-sm); color: var(--muted); margin-top: .2rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lead-contacts { display: flex; flex-direction: column; gap: .15rem; font-size: var(--fs-base); }
.lead-contacts .consent { font-size: var(--fs-xs); text-align: left; }
.lead-btns { display: flex; gap: .35rem; align-items: center; justify-content: flex-end; }
.score { display: inline-grid; place-items: center; min-width: 2.2rem; height: 1.7rem; padding: 0 .45rem; border-radius: var(--radius);
  font-weight: 600; font-size: var(--fs-sm); background: var(--surface-2); color: var(--ink-2); }
.score.s2, .score.s3 { background: color-mix(in srgb, var(--ok) 16%, var(--surface)); color: var(--ok); }
.score.s1 { background: color-mix(in srgb, var(--warn) 14%, var(--surface)); color: var(--warn); }
@media (max-width: 860px) {
  .lead-panel { background: transparent; border: 0; box-shadow: none; overflow: visible; }
  .lead-bar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: .75rem; }
  .lead-bulk { margin-left: 0; width: 100%; }
  .lead-table { table-layout: auto; }
  .lead-table tr { position: relative; }
  .lead-table td.lead-chk { position: absolute; top: .55rem; right: .7rem; width: auto; padding: 0; display: block; }
  .lead-table td.lead-chk input { width: 1.25rem; height: 1.25rem; }
  .lead-table td:nth-child(2) { padding-right: 2rem; }
  .lead-table td.lead-score { text-align: left; }
  .lead-btns { justify-content: flex-start; }
  #tab-leads .search-row .inline-form { flex-wrap: wrap; }
  #tab-leads .search-row .field.grow { flex: 1 1 100%; }
}
/* Aggiornamenti (Impostazioni › Sicurezza e backup) */
.update-state { display: grid; gap: .4rem; }
.update-state p { margin: 0; }
.update-state pre { margin: .25rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: var(--fs-base); }
.update-state pre.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-sm); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .6rem .75rem; }
.update-changes { background: var(--surface-2); border-radius: var(--radius-sm); padding: .55rem .75rem; }
.warn-text { color: var(--warn); font-weight: 500; }
.update-changes pre { border: 0; background: none; padding: 0; }
.upd-tech { margin-top: .5rem; }
.upd-tech pre { max-height: 9rem; overflow: auto; white-space: pre-wrap; word-break: break-all; font-size: var(--fs-xs); }

/* ------------------------------------------------------------------ barra delle notifiche e fumetti */
.app { --rail: 3.6rem; grid-template-columns: var(--sidebar) minmax(0, 1fr) var(--rail); }
body.nr-open .app { --rail: 23rem; }
/* aperta passandoci sopra col mouse: si appoggia sopra la pagina, senza spostarla */
@media (min-width: 861px) {
  body.nr-open.nr-float .app { --rail: 3.6rem; }
  body.nr-open.nr-float .notif-rail { position: fixed; top: 0; right: 0; bottom: 0; width: 23rem; z-index: 55;
    box-shadow: -18px 0 40px -18px rgba(0, 0, 0, .35); }
}
.sidebar .act-box, .act-pill { display: none !important; }      /* le attività ora stanno nelle notifiche */
.notif-rail { grid-column: 3; grid-row: 1; height: 100%; display: flex; min-width: 0; border-left: 1px solid var(--line);
  background: var(--surface); overflow: hidden; }
.nr-strip { flex: 0 0 3.6rem; display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .8rem 0; }
.nr-app { position: relative; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink-2); padding: 0; }
.nr-app:hover, .nr-app.on { background: var(--surface-2); color: var(--ink); }
.nr-app svg { width: var(--ic-md); height: var(--ic-md); }
.nr-app .badge { position: absolute; top: .05rem; right: .05rem; font-size: var(--fs-2xs); min-width: 1.1rem; padding: 0 .28rem; }
.nr-bell { margin-bottom: .45rem; }
.nr-bell.ring svg { animation: nr-ring .9s ease 2; transform-origin: 50% 10%; }
@keyframes nr-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }
.nr-app.busy::after { content: ""; position: absolute; inset: .1rem; border-radius: 50%; border: 2px solid var(--accent);
  border-right-color: transparent; border-bottom-color: transparent; animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.nr-panel { display: none; flex: 1 1 auto; min-width: 0; flex-direction: column; border-left: 1px solid var(--line); }
body.nr-open .nr-panel { display: flex; }
.nr-head { display: flex; align-items: center; justify-content: space-between; padding: .8rem .8rem .4rem 1rem; }
.nr-head strong { font-size: var(--fs-lg); }
/* una riga sola: filtri a icone a sinistra, azioni a icone a destra */
.nr-bar { display: flex; align-items: center; gap: .5rem; padding: .15rem .9rem .55rem; border-bottom: 1px solid var(--line); }
.nr-filters { display: flex; gap: .15rem; padding: .18rem; border-radius: var(--radius); background: var(--seg-track); }
#nr-panel .nr-filters button { width: 2.1rem; height: 2rem; padding: 0; display: grid; place-items: center; border: 0; border-radius: var(--radius);
  background: transparent; color: var(--muted); box-shadow: none; transition: background .15s, color .15s; }
#nr-panel .nr-filters button svg { width: var(--ic-sm); height: var(--ic-sm); }
#nr-panel .nr-filters button:hover { background: var(--seg-hover); color: var(--ink); }
#nr-panel .nr-filters button.on { background: var(--seg-on); color: var(--accent); box-shadow: var(--seg-shadow); }
.nr-bulk { display: flex; gap: .15rem; margin-left: auto; }
.nr-bulk .icon-btn { min-width: 2.2rem; min-height: 2.2rem; padding: .4rem; color: var(--muted); }
.nr-bulk .icon-btn:hover:not(:disabled) { color: var(--ink); background: var(--surface-2); }
.nr-bulk .icon-btn.danger { background: transparent; border: 0; }
.nr-bulk .icon-btn:disabled { opacity: .35; }
.nr-bulk .icon-btn.danger:not(:disabled):hover { color: var(--danger, #E5484D); }
.nr-list { flex: 1 1 auto; overflow-y: auto; padding: .4rem .5rem; overscroll-behavior: contain; }
.nr-sec { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: .7rem .5rem .3rem; }
.nr-item { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) auto; gap: .55rem; align-items: start; padding: .55rem .5rem;
  border-radius: var(--radius-sm); cursor: pointer; }
.nr-item:hover { background: var(--surface-2); }
.nr-item.unread { background: color-mix(in srgb, var(--accent-soft) 70%, transparent); }
.nr-ico { width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--muted); }
.nr-ico svg { width: var(--ic-sm); height: var(--ic-sm); }
.nr-ico.k-mail { background: #3b6fd8; } .nr-ico.k-whatsapp { background: #1fa855; } .nr-ico.k-telegram { background: #2aa3de; }
.nr-ico.k-activity { background: var(--accent); } .nr-ico.k-activity.err { background: var(--danger); }
.nr-txt { min-width: 0; display: grid; gap: .1rem; }
.nr-title { font-weight: 600; font-size: var(--fs-base); overflow-wrap: anywhere; }
.nr-body { font-size: var(--fs-sm); color: var(--ink-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.nr-meta { font-size: var(--fs-xs); color: var(--muted); }
.nr-acts { display: flex; flex-direction: column; gap: .1rem; opacity: .55; }
.nr-item:hover .nr-acts, .nr-item:focus-within .nr-acts { opacity: 1; }
.nr-acts .icon-btn { width: 1.9rem; height: 1.9rem; }
.nr-empty { text-align: center; color: var(--muted); padding: 2.5rem 1rem; font-size: var(--fs-md); }
.nr-run { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); gap: .55rem; padding: .5rem; align-items: center; cursor: pointer; border-radius: var(--radius-sm); }
.nr-run:hover { background: var(--surface-2); }
.nr-run .nr-ico { background: transparent; border: 2px solid var(--accent); border-right-color: transparent; animation: spin 1.1s linear infinite; }
/* fumetti in alto, come sul telefono */
.nr-balloons { position: fixed; top: calc(.8rem + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 90;
  display: grid; gap: .5rem; width: min(26rem, calc(100% - 24px)); pointer-events: none; }
.nr-balloon { pointer-events: auto; display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) auto; gap: .6rem; align-items: start;
  padding: .7rem .75rem; border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line); box-shadow: var(--shadow-lift);
  cursor: pointer; animation: nr-in .28s ease; }
.nr-balloon.out { animation: nr-out .25s ease forwards; }
@keyframes nr-in { from { opacity: 0; transform: translateY(-1rem) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes nr-out { to { opacity: 0; transform: translateY(-1rem); } }
.nr-balloon .icon-btn { width: 1.8rem; height: 1.8rem; }
.nr-bell-m { position: relative; display: none; }
.nr-bell-m .badge { position: absolute; top: .1rem; right: .1rem; font-size: var(--fs-2xs); min-width: 1.05rem; padding: 0 .25rem; }
@media (max-width: 860px) {
  .app, body.nr-open .app { grid-template-columns: minmax(0, 1fr); }
  .nr-bell-m { display: inline-grid; }
  .notif-rail { display: none; }
  body.nr-open .notif-rail { display: flex; position: fixed; inset: 0; z-index: 60; border: 0; padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px); }
  body.nr-open .nr-strip { display: none; }
  body.nr-open .nr-panel { border: 0; }
  .nr-acts { flex-direction: row; opacity: 1; }
}

/* =====================================================================================================
   IDENTITÀ: colori per area, superfici a livelli con luce e ombra, pulsanti per importanza.
   Tutto parte dai token (anche --accent scelto in Aspetto): chiaro e scuro restano coerenti.
   ===================================================================================================== */
:root {
  --c-mail: #2f6fe4; --c-wa: #17a34a; --c-tg: #1f9bd8; --c-ai: #7457e8; --c-amber: #d98a0b; --c-rose: #db3f73;
  --c-teal: #0f9a93; --c-indigo: #4f5fe0; --c-orange: #e8702a; --c-sky: #2596d6; --c-slate: #62708a; --c-social: #d6336c;
  --hl: inset 0 1px 0 rgba(255, 255, 255, .75);                         /* luce sul bordo alto */
  --e1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 1px rgba(16, 24, 40, .03);
  --e2: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 18px -6px rgba(16, 24, 40, .12);
  --e3: 0 2px 4px rgba(16, 24, 40, .06), 0 18px 40px -12px rgba(16, 24, 40, .24);
  --press: inset 0 1px 3px rgba(16, 24, 40, .14);
  --glass: color-mix(in srgb, var(--surface) 82%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-mail: #6b9bff; --c-wa: #34d178; --c-tg: #4cc0f2; --c-ai: #a28bff; --c-amber: #f2b33d; --c-rose: #ff6f9a;
    --c-teal: #2fd0c5; --c-indigo: #8d98ff; --c-orange: #ff9a55; --c-sky: #5ec2ff; --c-slate: #9aa7bd; --c-social: #ff6b9d;
    --hl: inset 0 1px 0 rgba(255, 255, 255, .06);
    --e1: 0 1px 2px rgba(0, 0, 0, .4);
    --e2: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 22px -8px rgba(0, 0, 0, .6);
    --e3: 0 2px 6px rgba(0, 0, 0, .4), 0 22px 48px -14px rgba(0, 0, 0, .75);
    --press: inset 0 1px 3px rgba(0, 0, 0, .5);
  }
}
:root[data-theme="dark"] {
  --c-mail: #6b9bff; --c-wa: #34d178; --c-tg: #4cc0f2; --c-ai: #a28bff; --c-amber: #f2b33d; --c-rose: #ff6f9a;
  --c-teal: #2fd0c5; --c-indigo: #8d98ff; --c-orange: #ff9a55; --c-sky: #5ec2ff; --c-slate: #9aa7bd; --c-social: #ff6b9d;
  --hl: inset 0 1px 0 rgba(255, 255, 255, .06);
  --e1: 0 1px 2px rgba(0, 0, 0, .4);
  --e2: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 22px -8px rgba(0, 0, 0, .6);
  --e3: 0 2px 6px rgba(0, 0, 0, .4), 0 22px 48px -14px rgba(0, 0, 0, .75);
  --press: inset 0 1px 3px rgba(0, 0, 0, .5);
}

/* sfondo: due aloni leggerissimi (colore principale e viola) invece di un grigio piatto */
body { background:
  radial-gradient(1100px 620px at 108% -12%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 62%),
  radial-gradient(900px 560px at -12% 112%, color-mix(in srgb, var(--c-ai) 7%, transparent), transparent 60%),
  var(--ground); background-attachment: fixed; }

/* ---------- superfici: pannelli, tabelle, schede ---------- */
.panel, .table-wrap, .registry, .login-card, .lead-panel {
  border-color: color-mix(in srgb, var(--line) 85%, transparent);
  box-shadow: var(--hl), var(--shadow);
}
.panel h3, .panel legend { letter-spacing: -.005em; }
.page-head h2 { font-size: var(--fs-4xl); letter-spacing: -.02em; font-weight: 600; }
.table th { background: linear-gradient(180deg, var(--surface-2), color-mix(in srgb, var(--surface-2) 60%, var(--surface))); }
.table tbody tr { transition: background .15s; }
.table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 4%, transparent); }

/* ---------- pulsanti: quattro livelli d'importanza ---------- */
button { transition: background .15s, border-color .15s, color .15s, box-shadow .18s, transform .12s; }
/* 2. secondario: in rilievo, neutro (regola generica: qualunque componente con il suo stile la sovrascrive) */
button { background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface-2) 75%, var(--surface)));
  box-shadow: var(--hl), var(--e1); }
button:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line-strong)); box-shadow: var(--hl), var(--e2); }
/* elementi di navigazione ed elenchi: niente rilievo da pulsante */
.nav button, .icon-btn, .linkish, .nr-app, .act-row, .row-main, .chat-row, .subtabs button, .bottombar button,
.folder-list button, .nr-filters button, .reg-row button, .act-box, .hist button, .seg button, .tabs button { box-shadow: none; }
.nav button:hover { box-shadow: none; }
/* 1. principale: pieno, sfumato, con alone del suo colore */
button.primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 86%, #fff) 0%, var(--accent) 55%, color-mix(in srgb, var(--accent) 88%, #000) 100%);
  border-color: color-mix(in srgb, var(--accent) 78%, #000);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 1px 2px rgba(0, 0, 0, .14), 0 8px 18px -8px color-mix(in srgb, var(--accent) 80%, transparent);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .08);
}
button.primary:hover:not(:disabled) { filter: none; transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 2px 4px rgba(0, 0, 0, .14), 0 12px 24px -10px color-mix(in srgb, var(--accent) 90%, transparent); }
/* 3. discreto: piatto, per annullare e azioni secondarie */
button.ghost { background: transparent; border-color: var(--line); box-shadow: none; }
button.ghost:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 5%, transparent); border-color: var(--line-strong); }
/* 4. pericolo: rosso tenue, mai pieno */
button.danger { background: color-mix(in srgb, var(--danger) 8%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 32%, var(--line));
  color: var(--danger); box-shadow: var(--hl), var(--e1); }
button.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 55%, var(--line)); }
button:active:not(:disabled):not(.icon-btn):not(.kpi) { transform: translateY(1px); }
button:active:not(:disabled) { box-shadow: var(--press); }
.nav button:active, .kpi:active, .nr-app:active, .chat-row:active { box-shadow: none; }
button:disabled { opacity: .45; box-shadow: none; transform: none; }
.icon-btn:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }

/* campi: leggermente incassati, anello colorato quando li usi */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), textarea, select {
  box-shadow: inset 0 1px 2px rgba(16, 24, 40, .06); transition: border-color .15s, box-shadow .15s; }
input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent) !important; }

/* etichette di stato e numeri */
.badge { background: linear-gradient(180deg, color-mix(in srgb, var(--danger) 88%, #fff), var(--danger));
  box-shadow: 0 0 0 2px var(--surface), 0 2px 6px -1px color-mix(in srgb, var(--danger) 60%, transparent); }
.tag { box-shadow: var(--hl); }

/* ---------- barra laterale: ogni sezione con il suo colore ---------- */
.sidebar { background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface-2) 55%, var(--surface)) 100%); }
[data-tab="home"] { --ic: var(--accent); } [data-tab="chat"] { --ic: var(--c-ai); } [data-tab="mail"] { --ic: var(--c-mail); }
[data-tab="whatsapp"] { --ic: var(--c-wa); } [data-tab="telegram"] { --ic: var(--c-tg); } [data-tab="emails"] { --ic: var(--c-indigo); }
[data-tab="approvals"] { --ic: var(--c-amber); } [data-tab="reminders"] { --ic: var(--c-orange); } [data-tab="procedures"] { --ic: var(--c-teal); }
[data-tab="automations"] { --ic: var(--c-ai); } [data-tab="leads"] { --ic: var(--c-rose); } [data-tab="contacts"] { --ic: var(--c-sky); }
[data-tab="files"] { --ic: var(--c-slate); } [data-tab="memory"] { --ic: var(--c-indigo); } [data-tab="activity"] { --ic: var(--accent); }
[data-tab="company"] { --ic: var(--c-amber); } [data-tab="settings"] { --ic: var(--c-slate); }
.sidebar .nav button[data-space] > svg { width: var(--ic-2xl); height: var(--ic-2xl); padding: .4rem; border-radius: var(--radius); box-sizing: border-box;
  color: var(--ic, var(--ink-2)); background: color-mix(in srgb, var(--ic, var(--muted)) 13%, transparent); transition: background .15s, color .15s, box-shadow .15s; }
.sidebar .nav button[data-space] { gap: .65rem; padding: .35rem .6rem; }
.sidebar .nav button[data-space]:hover { background: color-mix(in srgb, var(--ic, var(--accent)) 7%, transparent); }
.sidebar .nav button[data-space].active { background: color-mix(in srgb, var(--ic, var(--accent)) 12%, transparent); color: var(--ink); font-weight: 600;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ic, var(--accent)) 18%, transparent); }
.sidebar .nav button[data-space].active > svg { background: linear-gradient(160deg, color-mix(in srgb, var(--ic) 82%, #fff), var(--ic));
  color: #fff; box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--ic) 85%, transparent); }
.nav button span.dot { left: 2.15rem; top: .3rem; box-shadow: 0 0 0 2px var(--surface); }
.company-card { box-shadow: var(--hl), var(--e1); }
.sys-box { box-shadow: var(--hl), var(--e1); }

/* ---------- Panoramica: ogni riquadro con il suo colore ---------- */
.kpi { --kc: var(--accent); box-shadow: var(--hl), var(--shadow); transition: transform .18s, box-shadow .18s; }
.kpi:hover { transform: translateY(-2px); box-shadow: var(--hl), var(--e3); }
.kpi:nth-child(2) { --kc: var(--c-amber); } .kpi:nth-child(3) { --kc: var(--c-mail); } .kpi:nth-child(4) { --kc: var(--c-rose); }
.kpi:not(.accent) { background: linear-gradient(160deg, color-mix(in srgb, var(--kc) 7%, var(--tile)) 0%, var(--tile) 55%); }
.kpi:not(.accent) .k-value { color: var(--kc); }
.kpi:not(.accent)::before { background: color-mix(in srgb, var(--kc) 13%, transparent); }
.kpi.accent { background: linear-gradient(150deg, color-mix(in srgb, var(--accent-tile) 80%, #fff) 0%, var(--accent-tile) 45%, color-mix(in srgb, var(--accent-tile) 80%, var(--c-ai)) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 14px 30px -14px color-mix(in srgb, var(--accent-tile) 90%, transparent); }

/* ---------- chat con l'assistente ---------- */
.msg.user { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), color-mix(in srgb, var(--accent) 9%, var(--surface)));
  box-shadow: var(--hl), var(--e1); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); border-bottom-right-radius: var(--radius); }
.composer { box-shadow: var(--hl), var(--e3); border-color: color-mix(in srgb, var(--line-strong) 80%, transparent); }
.composer:focus-within { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong));
  box-shadow: var(--hl), var(--e3), 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }

/* ---------- schede delle Impostazioni: selettore a segmenti in rilievo ---------- */
.subtabs { border-bottom: 0; background: color-mix(in srgb, var(--ink) 4%, transparent); padding: .3rem; border-radius: var(--radius); gap: .2rem; }
.subtabs button { border-radius: var(--radius-sm); }
.subtabs button.on { background: var(--surface); color: var(--ink); border-color: transparent; box-shadow: var(--hl), var(--e2); font-weight: 600; }

/* ---------- telefono: barre in vetro ---------- */
@media (max-width: 860px) {
  /* barra in alto piena e nitida (il vetro su iPhone sfocava icone e logo) */
  .topbar { background: var(--surface); box-shadow: 0 1px 0 var(--line); }
  .bottombar { background: var(--glass); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6);
    border-color: color-mix(in srgb, var(--line) 70%, transparent);
    box-shadow: var(--hl), 0 10px 28px -6px rgba(0, 0, 0, .32), 0 3px 10px rgba(0, 0, 0, .16); }
  .bottombar button[data-tab] svg { color: var(--ic, currentColor); }
  .bottombar button.active { background: linear-gradient(160deg, color-mix(in srgb, var(--ic, var(--accent)) 80%, #fff), var(--ic, var(--accent)));
    color: #fff; box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--ic, var(--accent)) 90%, transparent); }
  .bottombar button.active svg { color: #fff; }
}

/* ---------- notifiche ---------- */
.notif-rail { background: var(--glass); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); }
[data-nr-kind="mail"] { --ic: var(--c-mail); } [data-nr-kind="whatsapp"] { --ic: var(--c-wa); }
[data-nr-kind="telegram"] { --ic: var(--c-tg); } [data-nr-kind="activity"] { --ic: var(--c-ai); }
.nr-app[data-nr-kind] svg { color: var(--ic); }
.nr-app[data-nr-kind]:hover, .nr-app[data-nr-kind].on { background: color-mix(in srgb, var(--ic) 13%, transparent); }
.nr-bell { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), color-mix(in srgb, var(--accent) 8%, var(--surface)));
  color: var(--accent); box-shadow: var(--hl), var(--e1); }
.nr-ico.k-mail { background: linear-gradient(160deg, color-mix(in srgb, var(--c-mail) 75%, #fff), var(--c-mail)); }
.nr-ico.k-whatsapp { background: linear-gradient(160deg, color-mix(in srgb, var(--c-wa) 75%, #fff), var(--c-wa)); }
.nr-ico.k-telegram { background: linear-gradient(160deg, color-mix(in srgb, var(--c-tg) 75%, #fff), var(--c-tg)); }
.nr-ico.k-activity { background: linear-gradient(160deg, color-mix(in srgb, var(--c-ai) 75%, #fff), var(--c-ai)); }
.nr-ico.k-system { background: linear-gradient(160deg, color-mix(in srgb, var(--c-teal) 75%, #fff), var(--c-teal)); }
.nr-ico.k-system.err { background: var(--danger); }
.nr-balloon:has(.k-system) { border-left-color: var(--c-teal); }
.nr-do { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.nr-do button { min-height: 2rem; padding: .25rem .7rem; font-size: var(--fs-sm); }
/* la riga per scrivere sotto una notifica (correggi, rispondi, commenta) */
.nr-write { display: grid; gap: .35rem; margin-top: .45rem; }
.nr-write textarea { width: 100%; box-sizing: border-box; min-height: 2.6rem; resize: vertical; font: inherit; font-size: var(--fs-base);
  padding: .45rem .6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
.nr-write-acts { display: flex; justify-content: flex-end; gap: .35rem; }
.nr-write-acts button { min-height: 2rem; padding: .25rem .8rem; font-size: var(--fs-sm); }
.nr-balloon.writing { pointer-events: auto; }
.nr-balloon .nr-write { grid-column: 2 / -1; }
.nr-ico { box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .35); }
.nr-item.unread { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); box-shadow: var(--hl), var(--e1); }
.nr-balloon { box-shadow: var(--hl), var(--e3); border-left: 3px solid var(--accent); }
.nr-balloon:has(.k-mail) { border-left-color: var(--c-mail); } .nr-balloon:has(.k-whatsapp) { border-left-color: var(--c-wa); }
.nr-balloon:has(.k-telegram) { border-left-color: var(--c-tg); } .nr-balloon:has(.k-activity) { border-left-color: var(--c-ai); }
.toast { box-shadow: var(--e3); border-radius: var(--radius); padding: .7rem 1.2rem; }

/* quello che fa l'assistente (suggerisci, bozza, analizza…) ha sempre il suo viola, ovunque */
button:not(.primary):not([data-set]):has(> svg use[href="#i-spark"]) { color: var(--c-ai); border-color: color-mix(in srgb, var(--c-ai) 35%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-ai) 9%, var(--surface)), color-mix(in srgb, var(--c-ai) 5%, var(--surface))); }
button:not(.primary):not([data-set]):has(> svg use[href="#i-spark"]):hover { border-color: color-mix(in srgb, var(--c-ai) 60%, var(--line)); }

/* selettori a segmenti: incassati, con il segmento scelto in rilievo */
.seg { border: 0; background: color-mix(in srgb, var(--ink) 5%, transparent); padding: .2rem; gap: .15rem; border-radius: var(--radius);
  box-shadow: inset 0 1px 2px rgba(16, 24, 40, .08); overflow: visible; }
.seg button { border-radius: var(--radius); background: transparent; box-shadow: none; }
.seg button + button { border-left: 0; }
.seg button.on { background: var(--surface); color: var(--accent); font-weight: 600; box-shadow: var(--hl), var(--e2); }

/* scuro: i pannelli si staccano dallo sfondo con una luce dall'alto */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .panel, :root:not([data-theme="light"]) .table-wrap, :root:not([data-theme="light"]) .lead-panel,
  :root:not([data-theme="light"]) .registry { background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 93%, #fff), var(--surface) 140px); }
}
:root[data-theme="dark"] .panel, :root[data-theme="dark"] .table-wrap, :root[data-theme="dark"] .lead-panel,
:root[data-theme="dark"] .registry { background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 93%, #fff), var(--surface) 140px); }

/* ===================================================================== GALLERIA MEDIA */
:root { --c-studio: #c026d3; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-studio: #e879f9; } }
:root[data-theme="dark"] { --c-studio: #e879f9; }
[data-tab="studio"] { --ic: var(--c-studio); }
[data-tab="social"], [data-tab="social-create"] { --ic: #e1306c; }
.g-add { display: flex; gap: .45rem; flex-wrap: wrap; }
.g-add .button-link, .g-add button { white-space: nowrap; }
.g-add .button-link { background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface-2) 75%, var(--surface)));
  box-shadow: var(--hl), var(--e1); cursor: pointer; }
.g-bar { display: grid; gap: .7rem; margin-top: 1.1rem; padding: .85rem 1rem; }
.g-n { font-size: var(--fs-xs); color: var(--muted); font-weight: 500; margin-left: .15rem; }
.g-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.g-tools input[type=search] { flex: 1 1 14rem; width: auto; }
.g-tools select { width: auto; }
.g-dates { display: inline-flex; gap: .35rem; } .g-dates input { width: auto; }
.g-zoom { margin-left: auto; }
.g-count { margin: .8rem .2rem .2rem; }
/* la banda del giorno (Oggi, Ieri…) resta al suo posto: niente fascia ferma in alto con il suo fondo (il capo, 15/10) */
.g-group { font-size: var(--fs-sm); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 1.3rem .2rem .6rem;
  padding: .35rem 0; }
.gallery { --tile: 11rem; }
.gallery.zoom-s { --tile: 7.5rem; } .gallery.zoom-l { --tile: 17rem; }
.g-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--tile), 100%), 1fr)); gap: .7rem; }
.g-tile, .st-tile { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-rows: auto auto; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--line) 85%, transparent); overflow: hidden;
  box-shadow: var(--hl), var(--e1); transition: transform .15s, box-shadow .15s; min-width: 0; }
.g-tile:hover, .st-tile:hover { transform: translateY(-2px); box-shadow: var(--hl), var(--e3); }
.g-tile:focus-visible, .st-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.g-thumb { position: relative; aspect-ratio: 1; background: color-mix(in srgb, var(--ink) 5%, var(--surface-2)); overflow: hidden; display: grid; }
.g-thumb img, .g-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-play { position: absolute; inset: auto auto .5rem .5rem; width: 2rem; height: 2rem; border-radius: var(--radius); display: grid; place-items: center;
  background: rgba(0, 0, 0, .55); color: #fff; backdrop-filter: blur(4px); }
.g-play svg { width: var(--ic-xs); height: var(--ic-xs); fill: currentColor; }
.g-ph { display: grid; place-items: center; align-content: center; gap: .3rem; color: var(--muted); padding: .5rem; text-align: center; }
.g-ph svg { width: var(--ic-2xl); height: var(--ic-2xl); }
.g-ph b { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; }
.g-ph.g-audio { background: linear-gradient(160deg, color-mix(in srgb, var(--c-orange) 16%, var(--surface)), color-mix(in srgb, var(--c-orange) 6%, var(--surface))); color: var(--c-orange); }
.g-ph.g-doc { background: linear-gradient(160deg, color-mix(in srgb, var(--c-mail) 12%, var(--surface)), color-mix(in srgb, var(--c-mail) 4%, var(--surface))); color: var(--c-mail); }
.g-badge { position: absolute; top: .45rem; right: .45rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: linear-gradient(160deg, color-mix(in srgb, var(--c-studio) 75%, #fff), var(--c-studio)); box-shadow: 0 3px 8px -2px rgba(0, 0, 0, .35); }
.g-badge svg { width: var(--ic-xs); height: var(--ic-xs); }
.g-cap { display: grid; gap: .1rem; padding: .5rem .6rem .6rem; min-width: 0; }
.g-name { font-size: var(--fs-sm); font-weight: 600; overflow-wrap: anywhere; }
.g-meta { font-size: var(--fs-xs); color: var(--muted); overflow-wrap: anywhere; }
.g-sum { display: none; font-size: var(--fs-sm); color: var(--ink-2); overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.gallery.zoom-l .g-sum, .st-list .g-sum { display: -webkit-box; }
.gallery.zoom-s .g-cap { padding: .35rem .45rem; } .gallery.zoom-s .g-meta { display: none; } .gallery.zoom-s .g-name { font-size: var(--fs-xs); }
.g-empty { display: grid; place-items: center; gap: .6rem; padding: 3rem 1rem; color: var(--muted); text-align: center; }
.g-empty svg { width: var(--ic-2xl); height: var(--ic-2xl); opacity: .6; }
/* i colori dei tipi di file (icone i-ft-*): gli stessi in griglia e in elenco */
.ft-pdf { --ft: var(--c-rose); } .ft-word { --ft: var(--c-mail); } .ft-sheet { --ft: var(--c-wa); } .ft-slides { --ft: var(--c-amber); }
.ft-text { --ft: var(--c-slate); } .ft-zip { --ft: var(--c-indigo); } .ft-audio { --ft: var(--c-orange); } .ft-other { --ft: var(--muted); }
.g-ph[class*="ft-"] { color: var(--ft); background: linear-gradient(160deg, color-mix(in srgb, var(--ft) 13%, var(--surface)),
  color-mix(in srgb, var(--ft) 4%, var(--surface))); }

/* Galleria · vista e selezione: Griglia/Elenco e «Seleziona» stanno nella barra; la barra della selezione è sul foglio
   (una riga sottile sotto), resta in vista scorrendo */
.g-tools .seg button { min-height: var(--ctl-h); }   /* stessa altezza di ricerca, periodo e «Seleziona» */
.g-mode { flex: none; }
.g-mode button { padding: 0 .55rem; }
.g-mode button svg { width: var(--ic-sm); height: var(--ic-sm); }
.g-zoom.hidden { display: none; }
.g-zoom.hidden + .g-mode { margin-left: auto; }
.g-select { gap: .4rem; }
.g-select svg { width: var(--ic-sm); height: var(--ic-sm); }
.g-select.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong)); background: var(--accent-soft); }
.g-selbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; position: sticky; top: 0; z-index: 3;
  margin-top: .6rem; padding: .55rem .1rem; background: var(--ground); border-bottom: 1px solid var(--line); }
.g-selbar.hidden { display: none; }
.g-sel-all { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-weight: 600; font-size: var(--fs-md); cursor: pointer; }
.g-sel-all input { margin: 0; width: 1.1rem; height: 1.1rem; accent-color: var(--accent); cursor: pointer; }
.g-sel-n { font-variant-numeric: tabular-nums; }
.g-sel-acts { display: flex; gap: .5rem; margin-left: auto; }
.g-sel-acts button { gap: .4rem; white-space: nowrap; }
.g-sel-acts button svg { width: var(--ic-sm); height: var(--ic-sm); }
/* la spunta: un cerchio in alto a sinistra sulla foto (o all'inizio della riga), pieno di blu quando è scelto */
.g-check { display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; flex: none;
  border: 2px solid color-mix(in srgb, #fff 92%, transparent); background: rgba(9, 13, 22, .32); color: transparent;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: background .12s, border-color .12s, color .12s; }
.g-check svg { width: var(--ic-xs); height: var(--ic-xs); stroke-width: 2.6; }
.g-thumb .g-check { position: absolute; top: .45rem; left: .45rem; z-index: 1; }
.selecting .sel .g-check { background: var(--accent); border-color: var(--accent); color: #fff; }
.selecting .g-tile.sel { outline: 2px solid var(--accent); outline-offset: -2px; }
.selecting .g-tile.sel .g-thumb img { transform: scale(.94); border-radius: calc(var(--radius) - 2px); }
.g-thumb img { transition: transform .15s; }
.selecting .g-tile:hover { transform: none; }
/* «Elenco»: righe sul foglio separate da una riga sottile; miniatura piccola per foto e video, icona del tipo per gli altri */
.g-rows { display: grid; }
.g-row { all: unset; box-sizing: border-box; display: grid; cursor: pointer; padding: .45rem .5rem; min-width: 0;
  border-bottom: 1px solid var(--line); border-radius: 0; transition: background .12s; }
.g-row, .g-rhead { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) minmax(7rem, 11rem) 9.5rem 5.5rem; gap: .9rem;
  align-items: center; }
.selecting .g-row { grid-template-columns: 1.45rem 2.75rem minmax(0, 1fr) minmax(7rem, 11rem) 9.5rem 5.5rem; }
.g-rhead { padding: .1rem .5rem .45rem; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--line); }
.selecting .g-rhead { grid-template-columns: 1.45rem 2.75rem minmax(0, 1fr) minmax(7rem, 11rem) 9.5rem 5.5rem; }
.selecting .g-rhead::before { content: ""; }
.g-rhead > span:last-child, .g-rsize { text-align: right; }
.g-row:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.g-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius); }
.g-row.sel { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.g-row .g-check { border-color: var(--line-strong); background: var(--surface); box-shadow: none; }
.g-rthumb { position: relative; width: 2.75rem; height: 2.75rem; border-radius: var(--radius); overflow: hidden; display: grid; place-items: center;
  background: color-mix(in srgb, var(--ink) 5%, var(--surface-2)); }
.g-rthumb img, .g-rthumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-rplay { position: absolute; inset: auto auto .2rem .2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0, 0, 0, .6); color: #fff; }
.g-rplay svg { width: .55rem; height: .55rem; fill: currentColor; }
.g-ficon { width: 100%; height: 100%; display: grid; place-items: center; color: var(--ft);
  background: color-mix(in srgb, var(--ft) 11%, var(--surface)); }
.g-ficon svg { width: var(--ic-xl); height: var(--ic-xl); stroke-width: 1.6; }
.g-rname { display: grid; gap: .1rem; min-width: 0; }
.g-row .g-name { font-size: var(--fs-base); font-weight: 500; color: var(--ink); }
.g-rmeta { display: none; font-size: var(--fs-xs); color: var(--muted); overflow-wrap: anywhere; }
.g-rtype, .g-rdate, .g-rsize { font-size: var(--fs-sm); color: var(--ink-2);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.g-rtype { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; }
.g-rstudio { display: inline-grid; color: var(--c-studio); flex: none; }
.g-rstudio svg { width: var(--ic-xs); height: var(--ic-xs); }
.g-listview .g-group { margin: 1.1rem .2rem .2rem; }
@media (max-width: 720px) {
  /* telefono: nome sopra, tipo · data · peso sotto; niente intestazione a colonne */
  .g-row, .selecting .g-row { grid-template-columns: 2.75rem minmax(0, 1fr); gap: .75rem; padding: .5rem .2rem; }
  .selecting .g-row { grid-template-columns: 1.45rem 2.75rem minmax(0, 1fr); }
  .g-rhead, .g-rtype, .g-rdate, .g-rsize { display: none; }
  .g-rmeta { display: block; }
  .g-sel-acts { margin-left: 0; width: 100%; }
  .g-sel-acts button { flex: 1 1 0; }
}
.g-more, .st-more { display: block; margin: 1.2rem auto 0; }
.g-view-card { width: min(60rem, 100%); }
.g-view-body { display: grid; gap: .8rem; align-content: start; }
.g-big { width: 100%; max-height: min(64vh, 42rem); object-fit: contain; border-radius: var(--radius-sm); background: #000; }
img.g-big { background: color-mix(in srgb, var(--ink) 6%, var(--surface-2)); }
.g-audio { width: 100%; }
.g-pdf { width: 100%; height: 60vh; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.g-docbox { display: flex; align-items: center; gap: .7rem; padding: 1.2rem; border-radius: var(--radius-sm); background: var(--surface-2); }
.g-docbox svg { width: var(--ic-2xl); height: var(--ic-2xl); color: var(--c-mail); }
.g-view-sum { white-space: pre-wrap; color: var(--ink-2); overflow-wrap: anywhere; }
.g-ask { display: flex; gap: .45rem; } .g-ask button { white-space: nowrap; }
.g-ask-a { white-space: pre-wrap; margin: 0; padding: .7rem .85rem; border-radius: var(--radius-sm); background: var(--surface-2); font: inherit; }
.g-view-foot { gap: .45rem; }
.g-view-foot .button-link, .g-view-foot button { white-space: nowrap; }
.g-rec-card { width: min(26rem, 100%); }
.g-rec-body { display: grid; justify-items: center; gap: 1rem; padding: 1.6rem 1.25rem; }
.g-rec-time { font-size: var(--fs-6xl); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.g-rec-wave { display: flex; align-items: center; gap: 3px; height: 4rem; width: 100%; justify-content: center; }
.g-rec-wave i { display: block; width: 5px; height: 8%; border-radius: var(--radius); background: linear-gradient(180deg, var(--c-orange), var(--c-rose)); transition: height .08s; }
#g-rec-go.rec-on { background: linear-gradient(180deg, color-mix(in srgb, var(--danger) 85%, #fff), var(--danger)); border-color: var(--danger); }
.chat-media { max-width: min(28rem, 100%); max-height: 24rem; border-radius: var(--radius-sm); display: block; margin: .4rem 0; box-shadow: var(--e2); }
.chat-media-link { display: inline-block; }

/* ===================================================================== STUDIO */
.st-setup { margin-top: 1.1rem; display: grid; gap: .8rem; border-color: color-mix(in srgb, var(--c-studio) 30%, var(--line)); }
.st-on span { line-height: 1.45; }
.st-prov { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.st-prov li { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.st-set-row { display: flex; gap: .8rem; flex-wrap: wrap; } .st-set-row .field { flex: 1 1 16rem; } .st-set-row .field.narrow { flex: 0 0 9rem; }
/* un terzo della pagina per la richiesta e le scelte, due terzi per le creazioni (il capo, 15/10). Sulla pagina, niente
   scheda dietro: i gruppi si separano con lo spazio e una riga sottile */
.st-grid { display: grid; grid-template-columns: minmax(19rem, 1fr) minmax(0, 2fr); gap: 1.6rem; align-items: start; margin-top: 1.1rem; }
.st-form { display: grid; gap: .6rem; position: sticky; top: 1rem; min-width: 0; padding: 0; background: none; }
.st-top { display: flex; align-items: center; gap: .5rem; }
.st-kind { flex: 1; min-width: 0; } .st-kind button { flex: 1; gap: .4rem; }
.st-kind button.on { color: var(--c-studio); }
.st-set-btn { flex: none; width: var(--ctl-h); height: var(--ctl-h); }
/* la descrizione: tre righe che crescono mentre scrivi (stGrow), «Migliora» sulla riga del titolo */
.st-form textarea { min-height: 5.4rem; max-height: 16rem; resize: none; overflow-y: auto; }
.st-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.st-desc-h { justify-content: flex-start; flex-wrap: wrap; row-gap: .3rem; margin-bottom: -.15rem; }
.st-desc-h > label { margin: 0; }
.st-desc-h > #st-chars { margin-right: auto; font-size: var(--fs-xs); }
.st-model-note { margin-top: -.2rem; }
/* le scelte su due colonne (il capo, 16/10: «formato, quante e tutto quello che si può mettere in 2 colonne»): Formato |
   Quante, Durata | Risoluzione, Da evitare | Foto di partenza; la velocità su tutta la riga, con la spiegazione accanto.
   Un gruppo: una riga sottile sopra e lo spazio */
.st-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1rem; align-items: start;
  padding-top: .75rem; margin-top: .15rem; border-top: 1px solid var(--line); }
.st-opts > div { min-width: 0; }
.st-opts > .hidden { display: none; }
.st-opts .st-lbl { margin-bottom: .3rem; }
.st-opts #st-q-box { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; }
.st-opts #st-q-box > .st-lbl { flex-basis: 100%; margin: 0; }
.st-opts #st-q-box > :is(.st-hint, .st-unsup) { flex: 1 1 9rem; margin: 0; }
#tab-studio .st-opts .st-chips button { padding-inline: .4rem; gap: .3rem; }
.st-opts .st-ref-row { gap: .35rem; }
.st-opts .st-ref-row .button-link { padding-inline: .5rem; gap: .3rem; }
/* colonna stretta (lo Studio sul computer): «Scegli» e «Scatta» restano affiancati, con la sola icona (il nome nel title) */
.st-opts > div { container-type: inline-size; }
@container (max-width: 11rem) { .st-opts .st-chips .st-ar { display: none; } }   /* colonna stretta: il formato col solo rapporto */
@container (max-width: 11.8rem) {
  .st-opts .st-ref-row .button-link { width: var(--ctl-h-sm); padding: 0; justify-content: center; }
  .st-opts .st-ref-row .button-link > span { display: none; }
}
.st-hint { display: block; margin-top: .35rem; font-size: var(--fs-xs); line-height: 1.45; color: var(--muted); }
.st-hint.hidden { display: none; }
.st-fix { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.st-fix.hidden { display: none; }
#st-engine.st-off { display: none; }
.st-fix .st-pbar { flex: 1; max-width: 14rem; }
.st-lbl { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); margin-bottom: .3rem; }
.st-ref-row { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.st-ref-row .button-link { cursor: pointer; }
.st-ref-prev { display: flex; align-items: center; gap: .5rem; padding: .3rem .4rem .3rem .3rem; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); min-width: 0; }
.st-ref-prev img { width: 2.6rem; height: 2.6rem; object-fit: cover; border-radius: var(--radius); }
.st-ref-prev span { font-size: var(--fs-sm); max-width: 10rem; overflow-wrap: anywhere; }
.st-ref-prev .st-ref-x { margin-left: auto; flex: none; }
.st-ref-prev .st-ref-x span { max-width: none; overflow: visible; }
/* la foto scelta con un modello che non la usa: si vede, si toglie, e c'è scritto perché */
.st-ref-note { margin: .4rem 0 0; font-size: var(--fs-xs); color: var(--warn, var(--danger)); }
.st-ref-note.st-ref-info { color: var(--muted); }
.st-ref-note { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.st-ref-note.hidden { display: none; }
/* una scelta che il modello non sa fare: resta in vista, sotto la riga che lo dice */
.st-unsup { display: block; margin-top: .3rem; font-size: var(--fs-xs); line-height: 1.45; color: var(--muted); }
.st-unsup.hidden { display: none; }
#st-neg:disabled { opacity: .55; }
/* «Scarica» nel riquadro ⚙: il catalogo a righe (spazio e righe sottili, niente riquadri) */
.st-shop { margin: 0; padding: 0; }
.st-shop-h { display: flex; align-items: center; gap: .5rem; padding: 0 0 .2rem; }
.st-shop-h b { flex: 1; min-width: 0; font-size: var(--fs-md); }
.st-shop-pc { margin: 0 0 .3rem; }
.st-shop-list { list-style: none; margin: 0; padding: 0; }
.st-shop-list li { display: flex; align-items: center; gap: .8rem; padding: .6rem 0; border-top: 1px solid var(--line); }
.st-shop-list li:first-child { border-top: 0; }
.st-shop-n { flex: 1; min-width: 0; display: grid; gap: .15rem; }
.st-shop-n b { font-weight: 600; }
.st-shop-n small { overflow-wrap: anywhere; }
.st-shop-rec { margin-left: .45rem; font: 600 var(--fs-xs)/1 var(--font); color: var(--c-accent-text, var(--accent)); }
.st-shop-a { flex: none; display: flex; align-items: center; gap: .45rem; min-width: 7.5rem; justify-content: flex-end; }
.st-shop-a .st-pbar { width: 6rem; }
.st-shop-pct { font-variant-numeric: tabular-nums; min-width: 2.6rem; text-align: right; }
.st-pc-swap { display: flex; align-items: center; gap: .6rem; margin: .4rem 0; }
.st-pc-swap .st-pbar { flex: 1; max-width: 14rem; }
.st-ref-ko .st-ref-prev { border-color: color-mix(in srgb, var(--warn, var(--danger)) 55%, var(--line)); }
/* costo e tempo su una riga, la spesa del mese e dove va la richiesta sotto in piccolo; poi «Crea» */
.st-cost { display: grid; gap: .2rem; padding: .75rem 0 .1rem; border-top: 1px solid var(--line); margin-top: .15rem; }
.st-cost-main { display: block; line-height: 1.45; }
.st-cost-main svg { color: var(--c-studio); width: var(--ic-sm); height: var(--ic-sm); vertical-align: -.2em; margin-right: .3rem; }
.st-cost-main > .meta::before { content: "·"; margin: 0 .35rem; }
.st-cost-more { display: flex; flex-wrap: wrap; gap: 0 .4rem; font-size: var(--fs-xs); line-height: 1.45; color: var(--muted); }
.st-cost-more:empty { display: none; }
.st-privacy { font-size: var(--fs-xs); }
.st-go { min-height: 3rem; font-size: var(--fs-md); }
#tab-studio button.primary.st-go { background: linear-gradient(180deg, color-mix(in srgb, var(--c-studio) 82%, #fff), var(--c-studio) 55%, color-mix(in srgb, var(--c-studio) 85%, #000));
  border-color: color-mix(in srgb, var(--c-studio) 75%, #000); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 22px -10px color-mix(in srgb, var(--c-studio) 90%, transparent); }
.st-head-row { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .7rem; }
.st-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .65rem; }
.st-list .g-cap { padding-top: .35rem; } .st-list .g-meta { font-size: var(--fs-2xs); }
.st-list .g-name { white-space: normal; font-weight: 500; overflow-wrap: anywhere; }
.st-list .st-p { display: block; }
.st-list .st-pmore { display: inline-grid; place-items: center; vertical-align: middle; margin-left: .2rem; width: 1.6rem; height: 1.6rem;
  border-radius: var(--radius); color: var(--muted); cursor: pointer; }
.st-list .st-pmore:hover, .st-list .st-pmore:focus-visible { color: var(--accent); background: var(--hover, transparent); }
.st-list .st-pmore svg { width: 1rem; height: 1rem; transition: transform .15s ease; }
.st-list .st-pmore[aria-expanded="true"] svg { transform: rotate(180deg); }
.st-run { background: linear-gradient(160deg, color-mix(in srgb, var(--c-studio) 12%, var(--surface)), var(--surface)); color: var(--ink-2); gap: .6rem; }
.st-run b { font-weight: 500; font-size: var(--fs-sm); }
.st-spin { width: 2rem; height: 2rem; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--c-studio) 25%, transparent); border-top-color: var(--c-studio); animation: spin 1s linear infinite; }
/* nome suo: «.st-bar» è delle Statistiche Social, la cui regola la dipingeva di grigio (barra «vuota») */
.st-pbar { width: 70%; height: 4px; border-radius: var(--radius); background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.st-pbar i { display: block; height: 100%; background: var(--c-studio); transition: width .6s; }
/* sul PC: i passaggi del motore in colonna, la barra vera e il testo del passaggio in corso */
.st-run-pc { justify-items: stretch; align-content: center; gap: .5rem; padding: .7rem .8rem; text-align: left; }
.st-run-pc .st-pbar { width: 100%; height: 5px; }
.st-run-pc > b { font-size: var(--fs-xs); letter-spacing: 0; color: var(--ink); overflow-wrap: anywhere; }
.st-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: var(--fs-xs); color: var(--muted); }
.st-steps li { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.st-steps li > span:last-child { overflow-wrap: anywhere; }
.st-steps svg { width: var(--ic-sm); height: var(--ic-sm); flex: none; color: var(--c-studio); }
.st-steps .st-n { flex: none; width: 1rem; height: 1rem; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-2xs);
  font-weight: 600; border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); }
.st-steps li.done { color: var(--ink-2); }
.st-steps li.on { color: var(--ink); font-weight: 600; }
.st-steps li.on .st-n { border-color: var(--c-studio); color: var(--c-studio); position: relative; }
.st-steps li.on .st-n::after { content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid transparent; border-top-color: var(--c-studio); animation: spin 1s linear infinite; }
@media (prefers-reduced-motion: reduce) { .st-steps li.on .st-n::after { animation: none; border-color: var(--c-studio); } }
/* l'immagine che si forma (anteprima della rifinitura veloce): riempie la casella, sotto restano la barra e il passaggio
   su una sfumatura del fondo che li tiene leggibili; i passaggi in colonna non servono più, l'immagine dice dove siamo */
.st-run-pc.st-has-live { position: relative; isolation: isolate; align-content: end; background: var(--surface); }
.st-has-live .st-live { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.st-has-live::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, color-mix(in srgb, var(--surface) 94%, transparent) 0, color-mix(in srgb, var(--surface) 70%, transparent) 26%, transparent 52%); }
.st-has-live .st-steps { display: none; }
.st-err { color: var(--danger); }
.st-count { position: absolute; top: .45rem; right: .45rem; min-width: 1.6rem; padding: 0 .4rem; border-radius: var(--radius); background: rgba(0, 0, 0, .6); color: #fff; font-size: var(--fs-xs); font-weight: 600; text-align: center; line-height: 1.6; }
.st-fav { position: absolute; top: .45rem; left: .45rem; color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.st-fav svg { fill: var(--c-rose); stroke: #fff; }
#st-v-fav.on svg { fill: var(--c-rose); color: var(--c-rose); }
.st-view { display: grid; }
.st-thumbs { display: flex; gap: .4rem; flex-wrap: wrap; }
.st-thumbs button { padding: 0; width: 4.2rem; height: 4.2rem; overflow: hidden; border-radius: var(--radius); box-shadow: none; }
.st-thumbs button.on { outline: 2px solid var(--c-studio); outline-offset: 1px; }
.st-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.st-send-card { width: min(30rem, 100%); }
/* il riquadro ⚙ dello Studio: tre parti (modelli sul PC, Scarica, servizi online) separate da una riga sottile */
.st-set-card { width: min(46rem, 100%); }
.st-set-body { display: grid; gap: 0; padding-top: .4rem; }
.st-set-sec { padding: 1rem 0; display: grid; gap: .55rem; min-width: 0; }
.st-set-sec + .st-set-sec { border-top: 1px solid var(--line); }
.st-set-sec.hidden { display: none; }
.st-set-sec > h4 { margin: 0; font-size: var(--fs-md); font-weight: 600; }
.st-set-sec > .hint { margin: 0; font-size: var(--fs-sm); }
.st-set-note { flex: 1 1 16rem; font-size: var(--fs-xs); }
.st-pcl { list-style: none; margin: 0; padding: 0; }
.st-pcl > li { display: flex; align-items: center; gap: .8rem; padding: .6rem 0; border-top: 1px solid var(--line); min-width: 0; }
.st-pcl > li:first-child { border-top: 0; }
.st-pcl > li.on .st-pcl-n > b { color: var(--accent); }
.st-pcl-n { flex: 1; min-width: 0; display: grid; gap: .15rem; }
.st-pcl-n > b { font-weight: 600; overflow-wrap: anywhere; }
.st-pcl-n small { overflow-wrap: anywhere; }
.st-pcl-cur { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--fs-xs); font-weight: 600; color: var(--accent); }
.st-pcl-cur svg { width: var(--ic-xs); height: var(--ic-xs); }
.st-pcl-st { flex: none; font-size: var(--fs-xs); font-weight: 600; }
.st-pcl-st.ok { color: var(--ok); } .st-pcl-st.warn { color: var(--warn); } .st-pcl-st.ko { color: var(--danger); }
.st-pcl-a { flex: none; display: flex; gap: .4rem; }
.st-set-sec .st-pc { margin: 0 0 .4rem; }
.st-pcl > li.st-pcl-more { display: block; border-top: 0; padding: 0 0 .6rem; }
.st-web-row { display: flex; gap: .5rem; flex-wrap: wrap; }
@media (max-width: 560px) {
  .st-pcl > li { flex-wrap: wrap; } .st-pcl-n { flex-basis: 100%; } .st-pcl-a { margin-left: auto; }
}
/* il modello scaricato sul PC: che tipo è, cosa manca, «Prova». Sul foglio, aperto da una riga sottile (niente riquadro) */
.st-pc { display: grid; gap: .45rem; border-top: 1px solid var(--line); padding-top: .75rem; margin-top: .1rem; min-width: 0; }
.st-pc.hidden { display: none; }
.st-pc > label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); margin: .15rem 0 -.15rem; }
.st-pc-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem .8rem; }
.st-pc-fam { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; }
.st-pc-fam > svg { width: var(--ic-sm); height: var(--ic-sm); flex: none; color: var(--c-studio); align-self: center; }
.st-pc-fam b { font-weight: 600; }
.st-pc-mem { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.st-pc-mem.fit-limite { color: var(--warn); } .st-pc-mem.fit-no { color: var(--danger); }
.st-pc-row { display: flex; gap: .45rem; align-items: stretch; min-width: 0; }
.st-pc-row select { flex: 1 1 auto; min-width: 0; width: auto; }
.st-pc-row button { flex: none; gap: .35rem; }
.st-pc-row button svg { width: var(--ic-sm); height: var(--ic-sm); }
.st-pc .hint { margin: 0; font-size: var(--fs-sm); line-height: 1.45; }
.st-pc-why { margin: 0; font-size: var(--fs-sm); }
.st-pc-trial { display: flex; gap: .7rem; align-items: center; padding: .1rem 0 .1rem .75rem; border-left: 2px solid var(--line); min-width: 0; }
.st-pc-trial.hidden { display: none; }
.st-pc-trial.ok { border-left-color: var(--ok); } .st-pc-trial.ko { border-left-color: var(--danger); }
.st-pc-trial.run { border-left-color: var(--c-studio); }
.st-pc-trial img { width: 4.6rem; height: 4.6rem; object-fit: cover; border-radius: var(--radius); flex: none; }
.st-pc-trial > div { display: grid; gap: .35rem; min-width: 0; flex: 1; }
.st-pc-res { margin: 0; display: flex; gap: .45rem; align-items: flex-start; font-size: var(--fs-sm); line-height: 1.45; overflow-wrap: anywhere; }
.st-pc-res > svg { width: var(--ic-sm); height: var(--ic-sm); flex: none; margin-top: .12rem; }
.st-pc-trial.ok .st-pc-res > svg { color: var(--ok); } .st-pc-trial.ko .st-pc-res > svg { color: var(--danger); }
.st-pc-res .st-spin { width: 1rem; height: 1rem; border-width: 2px; flex: none; margin-top: .15rem; }
.st-pc-trial .st-pbar { width: 100%; }
@media (max-width: 480px) { .st-pc-row { flex-wrap: wrap; } .st-pc-row select { flex-basis: 100%; } .st-pc-row button { flex: 1 1 0; } }
@media (max-width: 980px) { .st-grid { grid-template-columns: minmax(0, 1fr); } .st-form { position: static; } }
@media (max-width: 860px) {
  .g-zoom { margin-left: 0; }
  .gallery { --tile: 9rem; } .gallery.zoom-s { --tile: 5.6rem; } .gallery.zoom-l { --tile: 100%; }
  .g-grid { gap: .5rem; }
  .st-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* registratore e invio: pannello dal basso, alto quanto serve */
  .sheet.compact { align-items: end; }
  .sheet.compact .sheet-card { height: auto; max-height: 92dvh; border-radius: var(--radius) var(--radius) 0 0; padding-top: 0; }
  .g-rec-body { padding: 1.4rem 1rem; }
}

/* catena dei provider */
.pv-chain { display: grid; gap: .5rem; }
.pv-step { display: grid; grid-template-columns: 1.8rem minmax(8rem, 1fr) minmax(9rem, 1.3fr) minmax(9rem, 1fr) auto auto; gap: .5rem;
  align-items: center; padding: .55rem .7rem; border-radius: var(--radius-sm); background: var(--surface-2, var(--bg)); }
.pv-step .pv-c-state { grid-column: 2 / -1; font-size: var(--fs-sm); }
.pv-step.pv-last { grid-template-columns: 1.8rem auto 1fr; opacity: .85; }
.pv-n { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm);
  background: color-mix(in srgb, var(--c-teal) 16%, transparent); color: var(--c-teal); }
.pv-mode { margin-left: auto; flex-wrap: wrap; }
.pv-mode button { white-space: nowrap; }
.pv-step.pv-off { opacity: .55; }
.pv-step.pv-off strong { text-decoration: line-through; text-decoration-thickness: 1px; }
@media (max-width: 860px) {
  .pv-step { grid-template-columns: 1.8rem minmax(0, 1fr) auto; }
  .pv-step > select, .pv-step > input { grid-column: 2 / 3; }
}

/* Panoramica compatta: tre colonne, card più basse, elenchi con scorrimento interno */
#tab-home { gap: .8rem; }
#tab-home .kpi-grid { gap: .7rem; }
#tab-home .kpi { min-height: 5.4rem; padding: .75rem 1rem .8rem; }
#tab-home .kpi .k-label { font-size: var(--fs-sm); }
#tab-home .kpi .k-value { font-size: var(--fs-3xl); }
#tab-home .kpi .k-sub { font-size: var(--fs-xs); }
#tab-home .dash-grid { gap: .7rem; }
#tab-home .dash-grid .panel { padding: .8rem .95rem; font-size: var(--fs-base); }
#tab-home .dash-grid .card-head { margin-bottom: .45rem; }
#tab-home .dash-grid .card-head h3 { font-size: var(--fs-md); }
#tab-home .dash-grid .card-head .meta { font-size: var(--fs-xs); }
#tab-home .dash-grid .card-head button { min-height: 1.9rem; padding: .2rem .65rem; font-size: var(--fs-sm); }
#tab-home .dash-grid .rows { max-height: 11.5rem; overflow-y: auto; overscroll-behavior: contain; }
#tab-home .legend { font-size: var(--fs-xs); margin-bottom: .2rem; }
#tab-home .donut-wrap { gap: .6rem; font-size: var(--fs-sm); }
#tab-home .donut-wrap svg { max-width: 6.5rem; }
#tab-home .span-4 .donut-wrap { grid-template-columns: minmax(0, 6rem) minmax(0, 1fr); justify-items: stretch; }
@media (max-width: 1100px) { #tab-home .dash-grid .span-4, #tab-home .dash-grid .span-8 { grid-column: span 6; } }
/* telefono: due colonne, testi piccoli, grafico basso */
@media (max-width: 860px) {
  #tab-home .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  #tab-home .kpi { min-height: 4.6rem; padding: .6rem .75rem; }
  #tab-home .kpi .k-value { font-size: var(--fs-2xl); }
  #tab-home .kpi .k-label { font-size: var(--fs-xs); } #tab-home .kpi .k-sub { font-size: var(--fs-xs); }
  #tab-home .dash-grid { gap: .5rem; }
  #tab-home .dash-grid .span-4 { grid-column: span 6; }
  #tab-home .dash-grid .span-8 { grid-column: span 12; }
  #tab-home .dash-grid .panel { padding: .6rem .65rem; font-size: var(--fs-sm); }
  #tab-home .dash-grid .card-head { flex-wrap: nowrap; }
  #tab-home .dash-grid .card-head h3 { font-size: var(--fs-base); }
  #tab-home .dash-grid .card-head .meta { display: none; }
  #tab-home .dash-grid .card-head button { min-height: 1.7rem; padding: .1rem .5rem; font-size: var(--fs-xs); }
  #tab-home .dash-grid .rows { max-height: 9rem; }
  #tab-home .span-4 .donut-wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  #tab-home .donut-wrap svg { max-width: 5rem; }
  #tab-home .donut-wrap .dtable { font-size: var(--fs-xs); }
}
.st-model-row { display: flex; gap: .5rem; align-items: center; } .st-model-row select { flex: 1; min-width: 0; }
.st-model-row button { white-space: nowrap; }

/* Impostazioni e Provider esterni su più colonne (a mattoncini: niente buchi tra riquadri di altezza diversa) */
@media (min-width: 861px) {
  /* 2 o 3 colonne da sole secondo lo spazio (almeno ~21rem l'una), a mattoncini: ogni riquadro alto quanto il suo
     contenuto e messo dove c'è posto (le righe da 4px le calcola masonry() in app.js), niente spazi vuoti */
  .set-pane:not(.hidden) { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(22rem, calc(50% - .45rem)), 1fr)); max-width: 1320px;
    grid-auto-rows: 4px; grid-auto-flow: dense; column-gap: .9rem; row-gap: 0; align-items: start; }
  .set-pane:not(.hidden) > * { margin: 0 0 .9rem; }
  .set-pane[data-pane="company"]:not(.hidden) { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .set-pane[data-pane="providers"]:not(.hidden) > .pv-list { grid-column: 1 / -1; }
  .set-pane:not(.hidden) > .check-panel { grid-column: auto; }
  #tab-approvals .list, #tab-memory .list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); }   /* auto-fit: poche schede si allargano, niente colonne vuote a destra */
}
#tab-settings .set-pane .panel { padding: .95rem 1.05rem; }
#tab-settings .set-pane .form-grid { gap: .55rem; }
#tab-settings .set-pane h3, #tab-settings .set-pane legend { font-size: var(--fs-md); margin-bottom: .1rem; }
#tab-settings .set-pane .hint { font-size: var(--fs-base); line-height: 1.5; }
/* campi affiancati: vanno a capo prima di diventare così stretti da tagliare testo e scelte */
#tab-settings .set-pane .row > .field { flex: 1 1 11rem; min-width: 0; }
#tab-settings .set-pane .row > .field > * { width: 100%; }
#tab-settings .set-pane .row > .field:has(select) { flex-basis: 13.5rem; }
#tab-settings .set-pane select { text-overflow: ellipsis; }
/* le caselle di testo si allungano col contenuto (autoGrow in app.js): niente testo nascosto */
#tab-settings .set-pane textarea { resize: vertical; overflow-y: hidden; min-height: 4.2rem; }
#tab-settings .set-pane textarea.tall { overflow-y: auto; }
.check-list:empty { display: none; }
/* schede dei provider: 3 colonne, compatte */
.pv-card { padding: .85rem .95rem; font-size: var(--fs-base); }
.pv-card .btn-row, .pv-card .row { gap: .4rem; }
.pv-card button { min-height: 2.1rem; padding: .3rem .7rem; font-size: var(--fs-sm); }

/* ---------------------------------------------------------------- mappa del cervello (Memoria) */
#tab-memory { gap: .8rem; }
.brain { display: flex; flex-direction: column; gap: .6rem; min-height: 0; flex: 1 1 auto; }
.brain-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; }
.brain-bar input[type="search"] { flex: 1 1 18rem; min-width: 0; max-width: 34rem; }
.bc-dot { width: .6rem; height: .6rem; border-radius: 50%; flex: none; display: inline-block; }
.brain-wrap { position: relative; flex: 1 1 auto; min-height: 420px; height: calc(100dvh - 15rem); border-radius: var(--radius);
  overflow: hidden; background-color: color-mix(in srgb, var(--surface) 70%, var(--ground));
  background-image: radial-gradient(circle, color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1.2px),
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 70%);
  background-size: 22px 22px, 100% 100%;
  border: 1px solid var(--line); touch-action: none; }
.brain-wrap canvas { display: block; cursor: grab; }
.brain-tools { position: absolute; left: .7rem; bottom: .7rem; display: flex; flex-direction: column; gap: .3rem; }
.brain-tools .icon-btn { width: 2.2rem; height: 2.2rem; font-size: var(--fs-lg); font-weight: 600; background: var(--glass, var(--surface));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--e1, 0 1px 3px rgba(0,0,0,.15)); }
.brain-hint { position: absolute; left: 50%; bottom: .55rem; transform: translateX(-50%); margin: 0; font-size: var(--fs-xs);
  pointer-events: none; white-space: nowrap; opacity: .75; }
.brain-card { position: absolute; top: .7rem; right: .7rem; width: min(22rem, calc(100% - 1.4rem)); max-height: calc(100% - 1.4rem);
  overflow-y: auto; padding: .8rem .9rem; border-radius: var(--radius); background: var(--glass, var(--surface));
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: var(--e3, 0 12px 32px rgba(0,0,0,.25)); border: 1px solid var(--line); display: grid; gap: .45rem; font-size: var(--fs-base); }
.bc-head { display: flex; align-items: center; gap: .45rem; }
.bc-kind { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); flex: 1; }
.brain-card h4 { margin: 0; font-size: var(--fs-md); line-height: 1.3; }
.bc-text { margin: 0; white-space: pre-wrap; color: var(--ink-2); max-height: 12rem; overflow-y: auto; }
.bc-acts { display: flex; gap: .4rem; flex-wrap: wrap; } .bc-acts:empty { display: none; }
.bc-more { display: grid; gap: .45rem; min-width: 0; }
.bc-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem .7rem; margin: 0; font-size: var(--fs-sm); }
.bc-facts dt { color: var(--muted); } .bc-facts dd { margin: 0; overflow-wrap: anywhere; }
.bc-sub { margin: .2rem 0 0; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.bc-items { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; max-height: 15rem; overflow-y: auto; }
.bc-items li { padding: .35rem .5rem; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); font-size: var(--fs-sm); }
.bc-items li.me { background: color-mix(in srgb, var(--accent) 9%, var(--surface-2)); }
.bc-items .bc-who { font-weight: 600; } .bc-items .bc-at { float: right; font-size: var(--fs-xs); color: var(--muted); }
.bc-items p { margin: .1rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
/* pannello del nodo chiaro: riassunto, cosa sa (con data e fonte), collegamenti detti a parole con il mini-schema,
   «Approfondisci» con il percorso (A › B › C) */
@media (min-width: 861px) { .brain-card { width: min(25rem, calc(100% - 1.4rem)); } }
.bk-trail { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .3rem; font-size: var(--fs-xs); }
.bk-trail .bk-back { display: inline-flex; align-items: center; gap: .2rem; margin-right: .3rem; font-weight: 600; }
.bk-trail .bk-back svg { width: var(--ic-xs); height: var(--ic-xs); }
.bk-crumb { all: unset; cursor: pointer; color: var(--accent); max-width: 9rem; overflow-wrap: anywhere; }
.bk-crumb:hover, .bk-crumb:focus-visible { text-decoration: underline; }
.bk-crumb.on { cursor: default; color: var(--ink); font-weight: 600; text-decoration: none; }
.bk-sep { color: var(--muted); }
.bk-facts, .bk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.bk-facts li { padding: .4rem .55rem; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); }
.bk-facts li > p:first-child { margin: 0; overflow-wrap: anywhere; }
.bk-det { margin: .15rem 0 0; font-size: var(--fs-xs); color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .4rem; }
.bk-go { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--fs-xs); }
.bk-go svg { width: var(--ic-xs); height: var(--ic-xs); }
.bk-schema { width: 100%; height: auto; display: block; border-radius: var(--radius-sm);
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%), var(--surface-2);
  border: 1px solid var(--line); }
.bk-schema .bk-ln.rel { stroke: var(--accent); stroke-linecap: round; }
.bk-schema .bk-ln.tog { stroke: var(--muted); stroke-dasharray: 3 4; stroke-linecap: round; opacity: .8; }
.bk-schema .bk-me { fill: var(--accent); stroke: var(--surface); stroke-width: 3; }
.bk-schema circle.rel { fill: var(--surface); stroke: var(--accent); stroke-width: 2.2; }
.bk-schema circle.tog { fill: var(--surface); stroke: var(--muted); stroke-width: 1.6; }
.bk-schema text { font-size: var(--fs-xs); fill: var(--ink); paint-order: stroke; stroke: var(--surface-2); stroke-width: 3px; stroke-linejoin: round; }
.bk-schema .bk-me-t { font-weight: 700; font-size: var(--fs-xs); }
.bk-schema .bk-sn { cursor: pointer; outline: none; }
.bk-schema .bk-sn:hover circle, .bk-schema .bk-sn:focus-visible circle { fill: var(--accent); }
.bk-schema .bk-sn:hover text, .bk-schema .bk-sn:focus-visible text { fill: var(--accent); font-weight: 600; }
.bk-legend { margin: -.1rem 0 0; font-size: var(--fs-2xs); color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .8rem; }
.bk-legend span { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.bk-legend i { display: inline-block; width: 1.1rem; height: 0; border-top: 2px solid var(--accent); }
.bk-legend i.tog { border-top: 2px dashed var(--muted); }
.bk-row { padding: .45rem .55rem .5rem; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); display: grid; gap: .1rem; }
.bk-row.medio { border-left-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.bk-row.debole, .bk-row.tog { border-left-color: var(--line-strong, var(--line)); }
.bk-sent { margin: 0; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.bk-row.tog .bk-sent { font-weight: 500; }
.bk-force { padding: 0 .4rem; border-radius: var(--radius); font-weight: 600; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .04em;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.bk-row.debole .bk-force { color: var(--muted); background: color-mix(in srgb, var(--muted) 14%, transparent); }
.bk-next { margin: 0; font-size: var(--fs-xs); color: var(--ink-2); }
.bk-acts { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .25rem; }
.bk-acts .small { min-height: 1.9rem; padding: .15rem .6rem; font-size: var(--fs-xs); display: inline-flex; align-items: center; gap: .25rem; }
.bk-acts svg { width: var(--ic-xs); height: var(--ic-xs); }
.mem-list-head { margin-bottom: .6rem; }
@media (max-width: 860px) {
  .brain-wrap { height: calc(100dvh - 17rem); min-height: 360px; }
  .brain-card { top: auto; bottom: .6rem; right: .6rem; left: .6rem; width: auto; max-height: 55%; }
  .brain-tools { top: .6rem; bottom: auto; left: .6rem; flex-direction: row; }   /* la scheda dei dettagli sta in basso */
  .brain-hint { display: none; }
}

/* barre di scorrimento nascoste in tutta l'app (lo scorrimento resta: rotella, dito, tastiera) */
* { scrollbar-width: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ---------------------------------------------------------------- anteprime a tutto schermo (come il socialbot)
   sfondo scuro sfocato, il contenuto grande al centro, niente riquadro bianco, pulsanti scuri sotto */
.sheet.lightbox, .viewer { background: rgba(6, 8, 11, .86); backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); }
.sheet.lightbox { padding: 1rem 1.2rem; place-items: center; }
.lightbox .sheet-card { background: transparent; box-shadow: none; border: 0; width: min(1180px, 100%);
  max-height: calc(100dvh - 2rem); color: #eef1f4; overflow: hidden; border-radius: 0; }
.lightbox .sheet-head { background: transparent; border: 0; padding: .35rem 3rem .6rem; min-height: 3.1rem; justify-content: center;
  align-items: center; position: relative; }
.lightbox .sheet-head h3 { color: #fff; font-size: var(--fs-md); font-weight: 600; text-align: center; max-width: calc(100% - 4rem); overflow-wrap: anywhere; }
.lightbox .sheet-head .icon-btn, .viewer-bar .icon-btn { position: absolute; right: .2rem; top: .2rem; width: 2.3rem; height: 2.3rem;
  border-radius: var(--radius); background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .16); box-shadow: none; }
.lightbox .sheet-head .icon-btn:hover, .viewer-bar .icon-btn:hover { background: rgba(255, 255, 255, .2); }
.lightbox .sheet-body { padding: 0; display: flex; flex-direction: column; align-items: center; gap: .6rem; overflow-y: auto;
  background: transparent; min-height: 0; }
.lightbox .g-big { max-width: 100%; max-height: calc(100dvh - 15rem); width: auto; height: auto; object-fit: contain;
  border-radius: var(--radius); background: #000; box-shadow: 0 24px 70px rgba(0, 0, 0, .55); }
.lightbox video.g-big { min-width: min(100%, 22rem); }
.lightbox .st-view { display: flex; justify-content: center; width: 100%; }
.lightbox .st-thumbs { justify-content: center; }
.lightbox .st-thumbs button { border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); }
.lightbox .g-audio { width: min(34rem, 100%); margin: 2rem 0; }
.lightbox .g-pdf { width: min(960px, 100%); height: calc(100dvh - 12rem); border: 0; border-radius: var(--radius); background: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55); flex: none; }
.g-paper, .viewer-text { width: min(860px, 100%); background: #fff; color: #1d2126; border-radius: var(--radius); padding: 2rem 2.2rem;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55); max-height: calc(100dvh - 12rem); overflow-y: auto; flex: none; }
.g-paper pre, .viewer-text pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0;
  font: var(--fs-md)/1.65 Georgia, "Iowan Old Style", "Times New Roman", serif; color: inherit; }
.g-paper .meta, .viewer-text .meta { color: #5d6570; }
/* una notizia letta dentro Graphorum (oggi.js, newsHTML): il foglio delle anteprime, con la foto o il video in cima */
.g-news { display: flex; flex-direction: column; gap: .6rem; }
.g-news > * { flex: none; }
.g-news .g-news-media { display: block; width: 100%; max-height: min(26rem, 42vh); object-fit: cover; border-radius: var(--radius); background: #eef0f3; }
.g-news video.g-news-media { object-fit: contain; background: #000; }
.g-news-yt { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; }
.g-news-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.g-news-h { margin: .4rem 0 0; font: 700 var(--fs-2xl)/1.25 var(--font-display, var(--font)); color: #14181d; overflow-wrap: anywhere; }
.lightbox .g-news .meta { margin: 0; font-size: var(--fs-sm); color: #5d6570; }
.lightbox .g-news .g-news-ab { margin: .2rem 0 0; font-size: var(--fs-sm); font-weight: 600; color: #2f6bff; }
.g-news-text p, .g-news-desc { margin: 0 0 .9em; font: var(--fs-lg)/1.7 Georgia, "Iowan Old Style", "Times New Roman", serif; color: #1d2126;
  overflow-wrap: anywhere; }
.g-news-text { margin-top: .4rem; }
.g-news-note { margin: .2rem 0 0; color: #5d6570; font-size: var(--fs-sm); }
.g-news-by { margin: 0 0 .6rem; color: #3a4048; font-size: var(--fs-sm); font-weight: 600; }
.g-news-wait { animation: g-news-wait 1.4s ease-in-out infinite; }
@keyframes g-news-wait { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .g-news-wait { animation: none; } }
.g-news-tech { margin-top: .4rem; color: #5d6570; font-size: var(--fs-xs); }
.g-news-tech summary { cursor: pointer; }
.g-news-tech pre { margin: .4rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font: var(--fs-xs)/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.lightbox .g-view-meta { color: rgba(255, 255, 255, .6); font-size: var(--fs-xs); margin: 0; text-align: center; }
.lightbox .g-view-sum { color: rgba(255, 255, 255, .82); font-size: var(--fs-base); line-height: 1.45; margin: 0; max-width: 62rem;
  text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.lightbox .g-view-sum.open { -webkit-line-clamp: unset; }
.lightbox .ko-text { color: #ff8f8f; }
.lightbox .meta { color: rgba(255, 255, 255, .6); }
.lightbox .g-ask { width: min(46rem, 100%); display: flex; gap: .4rem; }
.lightbox .g-ask input { flex: 1; min-width: 0; background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid rgba(255, 255, 255, .16); }
.lightbox .g-ask input::placeholder { color: rgba(255, 255, 255, .45); }
.lightbox .g-ask-a { width: min(46rem, 100%); background: rgba(255, 255, 255, .08); color: #eef1f4; border-radius: var(--radius); padding: .7rem .9rem;
  white-space: pre-wrap; margin: 0; }
.lightbox .sheet-foot { background: transparent; border: 0; padding: .8rem 0 0; justify-content: center; flex-wrap: wrap; gap: .45rem; }
.lightbox .sheet-foot > a, .lightbox .sheet-foot > button, .lightbox .g-ask button, .viewer-foot .button-link {
  background: rgba(22, 26, 31, .92); color: #f2f4f7; border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35); min-height: 2.35rem; padding: .35rem .95rem; font-size: var(--fs-sm); font-weight: 600; }
.lightbox .sheet-foot > a:hover, .lightbox .sheet-foot > button:hover, .lightbox .g-ask button:hover, .viewer-foot .button-link:hover {
  background: rgba(40, 46, 54, .95); }
.lightbox .sheet-foot > .danger { color: #ff7b7b; }
.lightbox .sheet-foot > .on svg { color: var(--c-rose); fill: var(--c-rose); }
.lightbox .sheet-foot svg, .lightbox .g-ask button svg { color: inherit; }
/* visore di chat e posta: stessa aria */
.viewer-bar { background: transparent; justify-content: center; position: relative; padding: .8rem 3.4rem .4rem; text-align: center; }
.viewer-bar .spacer { display: none; }                /* il nome al centro, come il titolo delle altre anteprime */
.viewer { justify-content: center; }                  /* nome, contenuto e pulsanti insieme al centro, come in Galleria */
.viewer > .viewer-body { flex: 0 1 auto; }
.viewer-bar #viewer-name { color: #fff; font-weight: 600; font-size: var(--fs-md); }
.viewer-bar .icon-btn { right: .8rem; top: .6rem; }
.viewer-body { padding: .6rem 1rem; }
.viewer-body img, .viewer-body video { border-radius: var(--radius); box-shadow: 0 24px 70px rgba(0, 0, 0, .55); max-height: calc(100dvh - 10rem); }
/* i pulsanti sotto il contenuto, come in tutte le anteprime (Galleria, Studio) */
.viewer-foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .45rem;
  padding: .4rem 1rem calc(.9rem + env(safe-area-inset-bottom, 0px)); }
.viewer-body iframe { border-radius: var(--radius); box-shadow: 0 24px 70px rgba(0, 0, 0, .55); }
@media (max-width: 860px) {
  .sheet.lightbox { padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom, 0px)); }
  .lightbox .sheet-card { height: auto; max-height: calc(100dvh - 1rem); border-radius: 0; padding-top: env(safe-area-inset-top, 0px); }
  .lightbox .g-big { max-height: calc(100dvh - 17rem); border-radius: var(--radius); }
  .lightbox .g-pdf, .g-paper { height: calc(100dvh - 13rem); }
  .g-paper, .viewer-text { padding: 1.1rem 1.1rem; }
  .lightbox .sheet-foot > a, .lightbox .sheet-foot > button { min-height: 2.2rem; padding: .3rem .75rem; font-size: var(--fs-sm); }
  .viewer-bar { padding: calc(.6rem + env(safe-area-inset-top, 0px)) 3.2rem .4rem; }
  .viewer-body img, .viewer-body video { max-height: calc(100dvh - 13rem); }
  .viewer-foot .button-link { min-height: 2.2rem; padding: .3rem .75rem; }
}

/* Panoramica: Andamento e Provider AI esterni affiancati (se i provider non ci sono, l'andamento prende tutta la riga) */
#tab-home .dash-grid:has(#home-ai.hidden) #dash-trend { grid-column: span 12; }
#tab-home .home-ai { margin-bottom: 0; gap: .5rem; align-content: start; }
#tab-home .home-ai .card-head { margin-bottom: .2rem; }
#tab-home .home-ai .ai-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
#tab-home .home-ai .ai-kpis > * { padding: .45rem .6rem; font-size: var(--fs-xs); }
#tab-home .home-ai .ai-kpis strong, #tab-home .home-ai .ai-kpis b { font-size: var(--fs-md); }
#tab-home #home-ai-sub { font-size: var(--fs-xs); overflow-wrap: anywhere; }
#tab-home .home-ai .ai-bars { height: 2.8rem; }
#tab-home .home-ai .rows { font-size: var(--fs-sm); }
@media (max-width: 1100px) { #tab-home .dash-grid #dash-trend, #tab-home .dash-grid .home-ai { grid-column: span 12; } }
@media (max-width: 860px) { #tab-home .home-ai .ai-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Aspetto: i colori in più colonne, etichetta e colore sulla stessa riga (il riquadro occupa due colonne) */

#look-custom .lk-colors { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: .35rem 1rem; }
#look-custom .lk-colors label { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .6rem;
  padding: .25rem 0; border-bottom: 1px solid var(--line); }
#look-custom .lk-color input[type=color] { width: 2.4rem; height: 1.9rem; }
/* ---- Memoria, elenco: sezioni pulite, testi interi, fonte e data in piccolo */
.mem { display: grid; gap: .8rem; }
.mem-add { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .5rem; padding: .7rem; align-items: center; }
.mem-add select { width: auto; }
.mem-bar { display: grid; gap: .5rem; }
.mem-sections { display: grid; gap: .8rem; }
/* sul computer due colonne: le sezioni una sotto l'altra in ogni colonna, senza buchi */
@media (min-width: 1101px) {
  .mem-sections { display: block; column-count: 2; column-gap: .9rem; }
  .mem-sections > .mem-sec { break-inside: avoid; margin-bottom: .9rem; display: block; }
  .mem-add, .mem-bar { max-width: none; }
}
.mem-sec { padding: .9rem 1.1rem .4rem; scroll-margin-top: 1rem; }
.mem-sec > header { display: grid; gap: .1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.mem-sec h3 { font-size: var(--fs-lg); display: flex; align-items: baseline; gap: .45rem; }
.mem-n { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); }
.mem-rows { display: grid; }
.mem-row { padding: .6rem 0; border-bottom: 1px solid var(--line); display: grid; gap: .2rem; }
.mem-row:last-child { border-bottom: 0; }
.mem-text { margin: 0; font-size: var(--fs-md); line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; white-space: pre-line; }
.mem-sub { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.mem-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; font-size: var(--fs-xs); color: var(--muted); }
.mem-meta .linkish { font-size: var(--fs-xs); color: var(--muted); }
.mem-meta .linkish:hover { color: var(--danger); }
.mem-day > summary { list-style: none; cursor: pointer; display: grid; gap: .15rem; }
.mem-day > summary::-webkit-details-marker { display: none; }
.mem-day[open] .mem-sub { display: none; }
.mem-empty { color: var(--muted); padding: 1rem 0; }
@media (max-width: 860px) {
  .mem-add { grid-template-columns: minmax(0, 1fr) auto; }
  .mem-add input { grid-column: 1 / -1; }
}
/* ---- WhatsApp e Telegram in finestra: pulsanti in basso a destra e finestre ridimensionabili */
.chat-dock { position: fixed; right: calc(3.6rem + 16px); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  display: flex; gap: .4rem; }
.chat-dock.in-rail { flex-direction: column; gap: .35rem; bottom: 12px; }
.chat-dock.phone-hide { display: none; }
/* stessi pulsanti delle icone della barra delle notifiche (colore dell'app, sfondo tenue al passaggio), con un
   fondo leggero in più per distinguerli come «apri la chat» */
.cd-btn { background: color-mix(in srgb, var(--ic) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ic) 22%, var(--line)); }
.cd-btn svg { color: var(--ic); }
.cd-btn:hover, .cd-btn.on { background: color-mix(in srgb, var(--ic) 18%, var(--surface)); }
.cd-btn.on { border-color: var(--ic); }
.chat-pop { position: fixed; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); right: calc(3.6rem + 12px); z-index: 61;
  width: 420px; height: 620px; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius);
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--ic) 22%, var(--line));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 22px 48px -12px rgba(0, 0, 0, .28), 0 4px 12px rgba(0, 0, 0, .08);
  animation: cp-in .16s ease-out; }
.cp-whatsapp { --ic: var(--c-wa); } .cp-telegram { --ic: var(--c-tg); }
@keyframes cp-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.chat-pop.resizing iframe { pointer-events: none; }            /* il trascinamento non si perde dentro la chat */
/* intestazione sottile: puntino colorato dell'app, nome, due azioni discrete; una riga di colore in alto */
.cp-head { flex: none; display: flex; align-items: center; gap: .5rem; height: 2.5rem; padding: 0 .35rem 0 .8rem;
  color: var(--ink); background: linear-gradient(180deg, color-mix(in srgb, var(--ic) 9%, var(--surface)), var(--surface));
  border-bottom: 1px solid var(--line); box-shadow: inset 0 3px 0 var(--ic); }
.cp-head > svg { width: var(--ic-sm); height: var(--ic-sm); fill: none; stroke: var(--ic); stroke-width: 2.1; flex: none; }
.cp-head strong { flex: 1; font-size: var(--fs-base); font-weight: 600; letter-spacing: .005em; }
.cp-act { width: 1.9rem; height: 1.9rem; min-height: 0; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent;
  color: var(--muted); display: grid; place-items: center; box-shadow: none; }
.cp-act:hover { background: color-mix(in srgb, var(--ic) 12%, transparent); color: var(--ink); }
.cp-act svg { width: var(--ic-sm); height: var(--ic-sm); fill: none; stroke: currentColor; stroke-width: 2; }
.chat-pop iframe { flex: 1; width: 100%; border: 0; background: var(--ground); }
.cp-grip { position: absolute; left: 0; top: 0; width: 22px; height: 22px; cursor: nwse-resize; z-index: 3; touch-action: none; }
/* l'angolo si prende e si trascina: due archi sottili che seguono l'arrotondamento della finestra */
.cp-grip::before, .cp-grip::after { content: ""; position: absolute; border-left: 1.5px solid rgba(255, 255, 255, .5);
  border-top: 1.5px solid rgba(255, 255, 255, .5); pointer-events: none; transition: border-color .15s; }
.cp-grip::before { left: 4px; top: 4px; width: 14px; height: 14px; border-top-left-radius: var(--radius); }
.cp-grip::after { left: 8px; top: 8px; width: 8px; height: 8px; border-top-left-radius: var(--radius); }
.cp-grip:hover::before, .cp-grip:hover::after { border-color: rgba(255, 255, 255, .95); }
@media (max-width: 860px) {
  .chat-dock { right: 12px; bottom: calc(var(--bb-top, 4.4rem) + 30px); gap: .5rem; }
  .cd-btn { box-shadow: 0 6px 16px rgba(0, 0, 0, .16); background: var(--surface); }
  .chat-pop { inset: calc(8px + env(safe-area-inset-top, 0px)) 8px calc(var(--bb-top, 4.4rem) + 2px) 8px;
    width: auto !important; height: auto !important; border-radius: var(--radius); }
  .cp-grip { display: none; }
  body.pop-open .chat-dock { display: none; }
}

/* ---- Impostazioni: due colonne ordinate. Ogni scheda: titolo, una spiegazione, poi i campi; i gruppi dentro la
   scheda hanno un sottotitolo piccolo con una riga sopra; le schede con tabelle o elenchi larghi prendono tutta la riga */
@media (min-width: 861px) {
  .set-pane:not(.hidden) > .set-wide { grid-column: 1 / -1; }
}
#tab-settings .set-pane .panel { padding: 1.15rem 1.3rem 1.2rem; }
#tab-settings .set-pane .form-grid { gap: .6rem; }
#tab-settings .set-pane h3, #tab-settings .set-pane legend { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.005em; }
#tab-settings .set-pane legend { float: left; width: 100%; padding: 0; margin-bottom: .15rem; }
#tab-settings .set-pane legend + * { clear: both; }
#tab-settings .set-pane .hint { max-width: 72ch; }
#tab-settings .set-pane .panel > .hint:first-of-type, #tab-settings .set-pane .card-head .hint { margin-bottom: .35rem; }
#tab-settings .set-pane h4 { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  margin: .55rem 0 0; padding-top: .75rem; border-top: 1px solid var(--line); }
#tab-settings .set-pane label:not(.check) { font-size: var(--fs-base); font-weight: 550; color: var(--ink-2); }
#tab-settings .set-pane .card-head { align-items: flex-start; gap: 1rem; }
/* Chi fa cosa: una tabella a tre colonne (lavoro · provider · modello) */
.set-wide .pv-route { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 1rem; padding: .7rem 0; }
.set-wide .pv-routes { gap: 0; }

/* ---- barra laterale compatta: voci più basse e testo più piccolo, tutte le sezioni aperte, sistema in poco spazio */
@media (min-width: 861px) {
  .sidebar { gap: .55rem; padding: .8rem .6rem .7rem; }
  .sidebar .nav { gap: 1px; }
  .sidebar .nav button[data-space] { min-height: 2.05rem; padding: .18rem .5rem; gap: .55rem; font-size: var(--fs-md); }
  .sidebar .nav button[data-space] > svg { width: var(--ic-xl); height: var(--ic-xl); padding: .33rem; border-radius: var(--radius); }
  .sidebar .nav button span.dot { left: 1.55rem; top: .3rem; width: .45rem; height: .45rem; }
  .sidebar .badge { font-size: var(--fs-2xs); min-width: 1.1rem; }
  .side-foot { gap: .5rem; }
  .sys-box { gap: .3rem; padding: .5rem .55rem; font-size: var(--fs-sm); }
  .sys-head strong { font-size: var(--fs-base); }
  .sys-line { line-height: 1.3; }
  .meter { grid-template-columns: 2.8rem minmax(0, 1fr) 2.4rem; gap: .45rem; font-size: var(--fs-sm); }
  .meter .m-bar { grid-column: auto; height: .28rem; }
  .meter .m-val { color: var(--muted); }
  .sys-btns { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; margin-top: .15rem; }
  .sys-gear { min-height: 2.1rem; padding: .2rem .4rem; font-size: var(--fs-base); gap: .3rem; }
  .sys-gear svg { width: var(--ic-xs); height: var(--ic-xs); }
}
.sys-btns { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }

/* il menu scorre da solo (tutte le sezioni aperte), il riquadro del sistema resta sempre in fondo, in vista */
.sidebar { overflow: hidden; }
.sidebar > .nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; align-content: start; }
.sidebar > .side-foot { flex: none; }
@media (min-width: 861px) {
  .sidebar .nav button[data-space] { min-height: 1.9rem; }
}

/* invito ad attivare le notifiche push, in cima all'elenco delle notifiche */
.nr-push-ask { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin: .2rem .8rem .5rem; padding: .55rem .7rem;
  border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); font-size: var(--fs-sm); }
.nr-push-ask span { flex: 1 1 12rem; }

/* ---- barra delle notifiche: una scheda arrotondata (come le altre, segue l'arrotondamento scelto) alta metà schermo;
   sotto restano liberi i pulsanti di WhatsApp e Telegram, che così non aprono la barra passandoci sopra */
@media (min-width: 861px) {
  .app { --rail: 4.1rem; }
  body.nr-open .app { --rail: 24rem; }
  body.nr-open.nr-float .app { --rail: 4.1rem; }
  .notif-rail { align-self: start; height: calc(50dvh - .6rem); margin: .6rem .5rem 0 0; border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--hl), var(--e1, 0 4px 14px rgba(0,0,0,.06)); }
  body.nr-open:not(.nr-float) .notif-rail { height: calc(100dvh - 1.2rem); }
  /* chiusa: il riquadro abbraccia solo i pulsanti (campanella, posta, lavori), non mezzo schermo */
  body:not(.nr-open) .notif-rail { height: auto; }
  body:not(.nr-open) .notif-rail .nr-strip { padding: .45rem 0; }
  body.nr-open.nr-float .notif-rail { position: fixed; top: .6rem; right: .5rem; bottom: auto; margin: 0; width: 23rem;
    height: calc(100dvh - 7.5rem); }
  .nr-strip { flex-basis: 3.5rem; }
}

/* chat: dimensione del testo scelta con A− / A+ */
#chat-log .msg { font-size: var(--fs-md); }
.chat-fs { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--radius-sm); background: var(--surface-2);
  border: 1px solid var(--line); margin-left: auto; }
.chat-fs button { min-height: 0; height: 1.8rem; min-width: 2.1rem; padding: 0 .45rem; border: 0; background: transparent;
  box-shadow: none; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); border-radius: var(--radius); }
.chat-fs button:hover:not(:disabled) { background: var(--surface); color: var(--ink); }
.chat-fs button:disabled { opacity: .4; }
.chat-head #chat-title { min-width: 0; overflow-wrap: anywhere; }
/* clic col mouse: niente cornice scura sulle voci; da tastiera resta un segno leggero, dentro la voce */
:focus:not(:focus-visible) { outline: none; }
.sidebar .nav button:focus-visible, .nr-app:focus-visible, .bottombar button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: -2px; }
/* telefono: in fondo alla pagina c'è spazio anche per i pulsanti di WhatsApp e Telegram (non coprono i campi);
   nella chat il titolo resta leggibile (Rinomina e Fissa sono nel menu «…» della conversazione) */
@media (max-width: 860px) {
  .tab:not(.tab-chat):not(.tab-embed) { padding-bottom: calc(10rem + var(--sab)); }
  .chat-head #chat-rename, .chat-head #chat-pin { display: none; }
  .chat-head #chat-title { flex: 1 1 auto; font-size: var(--fs-md); }
  .chat-fs button { height: 1.7rem; min-width: 1.9rem; padding: 0 .3rem; font-size: var(--fs-xs); }
  .chat-fs { margin-left: 0; }
}

/* WhatsApp e Telegram più discreti: pulsanti piccoli, finestre compatte; sul telefono un pannello dal basso (non tutto
   lo schermo), così la pagina sotto resta riconoscibile */
.cd-btn.nr-app { width: 2.25rem; height: 2.25rem; }
.cd-btn.nr-app svg { width: var(--ic-sm); height: var(--ic-sm); }
.cd-btn .badge { top: -.3rem; right: -.3rem; font-size: var(--fs-2xs); min-width: 1rem; height: 1rem; padding: 0 .22rem; border-width: 1.5px; }
.chat-dock.in-rail { gap: .3rem; }
@media (max-width: 860px) {
  .chat-dock { bottom: calc(var(--bb-top, 4.4rem) + 6px); gap: .35rem; }   /* appena sopra la barra in basso */
  /* telefono: ogni chat (Graphorum, WhatsApp, Telegram) parte dal basso, dalla stessa altezza e larghezza della
     barra, e la copre: un pannello che sale dal fondo, mai appeso a metà schermo */
  .chat-pop { inset: auto 10px var(--sab, 6px) 10px; height: min(78dvh, 42rem) !important; width: auto !important;
    z-index: 70; animation: cp-rise .24s cubic-bezier(.2, .8, .2, 1); }
  @keyframes cp-rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* ---- finestre di WhatsApp e Telegram come il widget del sito: testata sfumata con l'onda, avatar con lo stato,
   pulsanti tondi; il colore è quello dell'app */
.chat-pop { border-radius: var(--radius); border: 0; background: color-mix(in srgb, var(--ic) 4%, var(--ground));
  box-shadow: 0 24px 60px -16px rgba(10, 20, 40, .38), 0 6px 18px rgba(10, 20, 40, .12); }
.cp-whatsapp { --ic2: #0f8a7e; } .cp-telegram { --ic2: #3a63d8; }
.chat-pop .cp-head { position: relative; height: auto; min-height: 4.4rem; padding: .7rem .6rem 1.55rem .8rem; gap: .55rem; color: #fff;
  border: 0; box-shadow: none; background: linear-gradient(115deg, var(--ic), var(--ic2)); }
.chat-pop .cp-head > svg.cp-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 24px; stroke: none;
  fill: color-mix(in srgb, var(--ic) 4%, var(--ground)); pointer-events: none; }
.cp-av { position: relative; flex: none; width: 2.35rem; height: 2.35rem; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .95); box-shadow: 0 0 0 2px rgba(255, 255, 255, .45); color: var(--ic); font-weight: 700; font-size: var(--fs-sm); }
.cp-av svg { width: var(--ic-sm); height: var(--ic-sm); fill: none; stroke: var(--ic); stroke-width: 2.1; }
.cp-dot { position: absolute; right: -1px; bottom: -1px; width: .7rem; height: .7rem; border-radius: 50%; background: #9aa3ad;
  border: 2px solid #fff; }
.cp-dot.on { background: #22c55e; }
.cp-title { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.cp-title strong { font-size: var(--fs-md); font-weight: 700; color: #fff; overflow-wrap: anywhere; }
.cp-title small { font-size: var(--fs-xs); color: rgba(255, 255, 255, .85); overflow-wrap: anywhere; }
.chat-pop .cp-act { width: 2rem; height: 2rem; border-radius: var(--radius); color: #fff; background: rgba(255, 255, 255, .16); flex: none; }
.chat-pop .cp-act:hover { background: rgba(255, 255, 255, .3); color: #fff; }
.chat-pop .cp-act svg { width: var(--ic-xs); height: var(--ic-xs); }
.chat-pop iframe { background: color-mix(in srgb, var(--ic) 4%, var(--ground)); }
/* «Altro» della barra in basso: le altre sezioni in una finestrella sopra la barra (come nel Social Bot) */
.more-menu { position: fixed; right: 12px; bottom: calc(var(--bb-top, 4.4rem) + 6px); z-index: 66;
  width: min(15.5rem, calc(100vw - 24px)); max-height: calc(100dvh - 7rem); overflow-y: auto; padding: .4rem;
  display: grid; gap: .1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .35), 0 4px 12px rgba(0, 0, 0, .1); animation: more-in .14s ease-out; }
.more-menu.hidden { display: none; }
@keyframes more-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
.more-menu button { display: flex; align-items: center; justify-content: flex-start; gap: .75rem; width: 100%; min-height: 2.7rem; padding: .4rem .75rem;
  border: 0; border-radius: var(--radius); background: transparent; box-shadow: none; color: var(--ink); font-size: var(--fs-md);
  font-weight: 500; text-align: left; }
.more-menu button:hover, .more-menu button.on { background: var(--surface-2); }
.more-menu button.on { color: var(--accent); font-weight: 600; }
.more-menu svg { width: var(--ic-md); height: var(--ic-md); flex: none; color: var(--muted); }
.more-menu button.on svg { color: var(--accent); }
.more-menu hr { border: 0; border-top: 1px solid var(--line); margin: .3rem .4rem; }
/* con una finestra aperta la pagina dietro si scurisce come per le anteprime: l'attenzione resta sulla chat
   (un clic sullo sfondo la chiude) */
body.pop-open::after { content: ""; position: fixed; inset: 0; z-index: 58; background: rgba(0, 0, 0, .45);
  animation: pop-dim .16s ease-out; }
@keyframes pop-dim { from { opacity: 0; } to { opacity: 1; } }
/* miniatura della foto allegata (chat, WhatsApp/Telegram, posta): un controllo al volo prima di inviare */
.att-thumb { width: 2.4rem; height: 2.4rem; border-radius: var(--radius); object-fit: cover; flex: none; display: block;
  border: 1px solid var(--line); background: var(--surface-2); }
.file-chip:has(.att-thumb) { padding-left: .25rem; }
@media (max-width: 860px) {
  .chat-pop .cp-act[data-pop-full] { display: none; }
  /* telefono: Telegram a sinistra, WhatsApp a destra, più grandi; l'altezza la calcola la pagina (sopra la barra o
     sopra la casella di scrittura), così non spariscono mai e non coprono niente */
  .chat-dock, .chat-dock.in-rail { left: 10px; right: 10px !important; flex-direction: row; justify-content: space-between;
    pointer-events: none; }
  .chat-dock .cd-btn.nr-app { pointer-events: auto; width: 2.9rem; height: 2.9rem; border-radius: var(--radius);
    box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .12); }
  .chat-dock .cd-btn.nr-app svg { width: var(--ic-md); height: var(--ic-md); }
  .chat-dock .cd-btn .badge { top: -.25rem; right: -.25rem; font-size: var(--fs-2xs); min-width: 1.15rem; height: 1.15rem; }
}
/* rubrica: le righe e le icone non sono «pulsanti» (niente rilievo, ombra o spostamento) */
#ct-list button.ct-main, #ct-list button.ct-act, #ct-list button.ct-dl { box-shadow: none; border: 0; transform: none;
  background-image: none; }
#ct-list button.ct-act, #ct-list button.ct-dl, #ct-list button.ct-main { background-color: transparent; }
@media (hover: hover) { #ct-list button.ct-main:hover { background-color: var(--surface-2); } }
#ct-list button.ct-act:hover, #ct-list button.ct-dl:hover { background-color: var(--surface-2); }
#ct-list .ct-main[aria-expanded="true"] { background-color: transparent; }
/* sul computer due colonne indipendenti, come un elenco del telefono che continua a destra: aprire un contatto
   allunga solo la sua colonna, mai la riga accanto */
@media (min-width: 1100px) {
  .ct-group { columns: 2; column-gap: 0; column-rule: 1px solid var(--line); }
  .ct-row { break-inside: avoid; border-top: 0; border-bottom: 1px solid var(--line); }
}
/* Panoramica: la fascia Social (stesse card della Panoramica, sotto le principali) */
.home-social { display: grid; gap: .8rem; margin-top: 1.4rem; }
.home-social > .card-head { margin: 0; }
.home-social > .card-head h3 { display: flex; align-items: center; gap: .45rem; }
.kpi.alert { box-shadow: inset 3px 0 0 var(--danger), var(--shadow); }

/* Social › Pubblicati: i post usciti, come una galleria di post */
.sp-views { align-self: flex-start; }
/* Pubblicati: la stessa barra dei filtri della Galleria (riquadro, tipi a icone, ricerca e menu uguali) */
.sp-bar { margin: .9rem 0 1rem; }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); gap: 1rem; }
.sp-card { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow); }
.sp-card.failed { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.sp-media { position: relative; aspect-ratio: 4 / 5; background: var(--surface-2); overflow: hidden; }
.sp-media img, .sp-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }
.sp-ph svg { width: var(--ic-2xl); height: var(--ic-2xl); }
.sp-count, .sp-play { position: absolute; top: .5rem; right: .5rem; min-width: 1.6rem; height: 1.6rem; padding: 0 .4rem;
  display: grid; place-items: center; border-radius: var(--radius); font-size: var(--fs-xs); font-weight: 700;
  background: rgba(0, 0, 0, .55); color: #fff; }
.sp-play { right: auto; left: .5rem; }
.sp-play svg { width: var(--ic-xs); height: var(--ic-xs); fill: #fff; }
.sp-body { display: grid; gap: .35rem; padding: .7rem .85rem .85rem; min-width: 0; }
.sp-meta { display: flex; justify-content: space-between; gap: .5rem; font-size: var(--fs-xs); color: var(--muted); }
.sp-body h3 { margin: 0; font-size: var(--fs-md); line-height: 1.3; overflow-wrap: anywhere; }
.sp-cap { margin: 0; font-size: var(--fs-base); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.sp-links { display: flex; flex-wrap: wrap; gap: .3rem; }
.sp-links .chip { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--fs-xs); padding: .15rem .55rem;
  border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.sp-links .chip svg { width: var(--ic-xs); height: var(--ic-xs); }
/* pezzi del Social Bot dentro le nostre pagine (Statistiche, Impostazioni › Social) */
.soc-set-tabs { display: flex; flex-wrap: wrap; gap: .25rem; }
@media (max-width: 560px) { .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .sp-body { padding: .55rem .6rem .7rem; } .sp-body h3 { font-size: var(--fs-base); } .sp-cap { -webkit-line-clamp: 2; } }
.set-pane[data-pane="social"]:not(.hidden) { display: flex; flex-direction: column; gap: .8rem; }
.set-pane[data-pane="social"] > .soc-set-tabs { align-self: center; justify-content: center; max-width: 100%; }
/* riquadro modelli / risorse: mai più largo della barra laterale, i testi lunghi vanno a capo */
.side-foot, .sys-box, #sys-info { grid-template-columns: minmax(0, 1fr); min-width: 0; max-width: 100%; box-sizing: border-box; }
.sys-box { overflow: hidden; }
.sys-box *, #sys-info * { min-width: 0; }
.sys-line { overflow-wrap: anywhere; }
.sys-line { flex-wrap: wrap; }
.sys-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.sys-btns button { min-width: 0; overflow: hidden; }
.sys-btns button span { overflow-wrap: anywhere; }

/* ---- Provider esterni: gruppi (Testo e AI, Foto e video, Foto stock, Altro), ognuno una tabella a due colonne
   (una sul telefono). Ogni cella: nome e stato, a cosa serve, la chiave, i pulsanti sotto, i modelli a scomparsa */
.pv-group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem 1.1rem; min-width: 0; }
.pv-ghead { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.pv-ghead h3 { margin: 0; }
.pv-group > .hint { margin: .25rem 0 .75rem; }
.pv-grid { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--line); gap: 1px; }
@media (min-width: 861px) { .pv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pv-cell { background: var(--surface); padding: .8rem .9rem .85rem; display: grid; gap: .45rem; align-content: start; min-width: 0; }
.pv-cell.on { background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.pv-top { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.pv-top strong { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.pv-top .dot { flex: 0 0 auto; width: .6rem; height: .6rem; border-radius: 50%; background: var(--line); }
.pv-top .dot.ok { background: var(--ok); } .pv-top .dot.ko { background: var(--danger); }
.pv-get { flex: 0 0 auto; font-size: var(--fs-sm); white-space: nowrap; }
.pv-note { margin: 0; font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; }
.pv-uses { display: flex; flex-wrap: wrap; gap: .25rem; }
.pv-uses span { font-size: var(--fs-xs); padding: .05rem .45rem; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line); }
.pv-cell input { width: 100%; min-width: 0; }
.pv-btns { display: flex; flex-wrap: wrap; gap: .35rem; }
.pv-btns button { min-height: 2.1rem; padding: .3rem .75rem; font-size: var(--fs-sm); }
.pv-cell .pv-status { font-size: var(--fs-sm); overflow-wrap: anywhere; }
.pv-mods { border-top: 1px dashed var(--line); padding-top: .4rem; }
.pv-mods summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; }
.pv-mods[open] { display: grid; gap: .45rem; }
.pv-mlist { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .2rem; font-size: var(--fs-sm); }
.pv-mlist li { display: flex; justify-content: space-between; gap: .6rem; min-width: 0; }
.pv-mlist li span { min-width: 0; overflow-wrap: anywhere; } .pv-mlist small { color: var(--muted); white-space: nowrap; }
.pv-mods select { min-width: 0; width: 100%; }
.pv-st-row { gap: .7rem; flex-wrap: wrap; } .pv-st-row .field { flex: 1 1 14rem; min-width: 0; } .pv-st-row .field.narrow { flex: 0 1 11rem; }

/* Pubblicati: il post si apre in anteprima (foto o reel, carosello a scorrimento, testo intero, link) */
.sp-card[data-sp-open] { cursor: pointer; }
.sp-card[data-sp-open]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sp-view { display: grid; gap: 1rem; }
@media (min-width: 861px) { .sp-view { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } }
.sp-view-media { position: relative; background: #000; border-radius: var(--radius-sm); overflow: hidden; display: grid;
  place-items: center; min-height: 12rem; }
.sp-view-media img, .sp-view-media video { width: 100%; max-height: 70vh; object-fit: contain; display: block; }
/* con più foto il riquadro ha un'altezza fissa: cambiando foto le frecce non si spostano */
.sp-view-media:has(.sp-nav) { height: min(70vh, 44rem, calc(100dvh - 10rem)); display: flex; align-items: center;
  justify-content: center; }
.sp-view-media:has(.sp-nav) > img, .sp-view-media:has(.sp-nav) > video { width: auto; height: auto; max-width: 100%;
  max-height: 100%; object-fit: contain; }
@media (max-width: 860px) { .sp-view-media:has(.sp-nav) { height: min(58vh, 34rem); } }
.sp-nav { cursor: pointer; z-index: 2; }
.sp-nav:hover { background: rgba(0, 0, 0, .65); }
/* Galleria: le frecce per guardare i file in fila, ferme ai lati dello schermo */
.g-nav { position: fixed; top: 50%; transform: translateY(-50%); z-index: 5; width: 2.8rem; height: 2.8rem; border-radius: var(--radius);
  border: 0; background: rgba(0, 0, 0, .5); color: #fff; font-size: var(--fs-3xl); line-height: 1; display: grid; place-items: center;
  cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.g-nav:hover { background: rgba(0, 0, 0, .7); }
.g-nav.prev { left: max(.6rem, env(safe-area-inset-left)); } .g-nav.next { right: max(.6rem, env(safe-area-inset-right)); }
@media (max-width: 860px) { .g-nav { width: 2.4rem; height: 2.4rem; font-size: var(--fs-2xl); top: auto; bottom: 5.2rem; transform: none; } }
.sp-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 2.4rem; height: 2.4rem; border-radius: var(--radius);
  border: 0; background: rgba(0, 0, 0, .45); color: #fff; font-size: var(--fs-2xl); line-height: 1; display: grid; place-items: center; }
.sp-nav.prev { left: .5rem; } .sp-nav.next { right: .5rem; }
.sp-dots { position: absolute; bottom: .5rem; left: 0; right: 0; display: flex; justify-content: center; gap: .3rem; }
.sp-dots i { width: .45rem; height: .45rem; border-radius: 50%; background: rgba(255, 255, 255, .5); }
.sp-dots i.on { background: #fff; }
.sp-view-text { display: grid; gap: .5rem; min-width: 0; }
.sp-view-text h3 { margin: 0; overflow-wrap: anywhere; }
.sp-view-cap { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 55vh; overflow: auto; }

/* chat: miniature delle foto mandate, nel messaggio */
.msg-pics { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.msg-pic { padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; width: 7.5rem;
  height: 7.5rem; background: var(--surface-2); cursor: zoom-in; box-shadow: none; }
.msg-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 600px) { .msg-pic { width: 5.5rem; height: 5.5rem; } }

/* il modello in uso si legge per intero (va a capo, mai tagliato con i puntini) */
.sys-head { align-items: flex-start; }
.sys-head .dot { margin-top: .35rem; flex: 0 0 auto; }
.sys-head strong { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.3; }

/* allegati prima di mandarli: un'anteprima vera (foto o primo fotogramma del video), non un francobollo */
.att-thumb, .chip .att-thumb { width: 4.5rem !important; height: 4.5rem !important; border-radius: var(--radius); object-fit: cover;
  background: #000; }
@media (max-width: 600px) { .att-thumb, .chip .att-thumb { width: 3.8rem !important; height: 3.8rem !important; } }

/* Panoramica › Social: le 4 card (2×2) e «Prossime uscite» affiancate; sul telefono una sotto l'altra */
.hs-cols { display: grid; gap: .8rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
#hs-next .row-item { min-width: 0; }
@media (min-width: 1000px) {
  .hs-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .hs-cols:has(#hs-next-box.hidden) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  #hs-next .row-item { flex-wrap: wrap; }
}

/* riquadro del computer richiudibile: chiuso resta la riga del modello (con la CPU), aperto tutto il resto */
.sys-box .sys-head { all: unset; box-sizing: border-box; display: flex; align-items: flex-start; gap: .45rem; width: 100%;
  cursor: pointer; color: var(--ink); border-radius: var(--radius); }
.sys-box .sys-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sys-box .sys-head strong { flex: 1 1 auto; }
.sys-mini { display: none; font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; margin-top: .1rem; }
.sys-chev { flex: none; width: .95rem; height: .95rem; margin-top: .2rem; color: var(--muted); transition: transform .2s; transform: rotate(180deg); }
.sys-box.collapsed .sys-chev { transform: none; }
.sys-box.collapsed .sys-mini { display: inline; }
.sys-box.collapsed #sys-info > :not(.sys-head) { display: none !important; }
.sys-box.collapsed { gap: .4rem; padding-top: .5rem; padding-bottom: .5rem; }

/* ---- Crea e programma (nativa) ---- */
.sc-views { align-self: flex-start; }
.sc-progress { display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.sc-view { display: grid; gap: 1rem; min-width: 0; }
.sc-view.hidden { display: none; }
.sc-auto { display: grid; gap: .7rem; }
.sc-auto .card-head { margin: 0; }
.sc-row { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: flex-end; }
.sc-row .field { flex: 1 1 16rem; min-width: 0; display: grid; gap: .3rem; }
.sc-row .field.narrow { flex: 0 1 9rem; }
.sc-cols { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .sc-cols { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.sc-mine, .sc-bot { display: grid; gap: .8rem; }
.sc-mine .card-head, .sc-bot .card-head { margin: 0; }
.sc-mine .field { display: grid; gap: .3rem; min-width: 0; }
.sc-drop { display: grid; justify-items: center; gap: .3rem; padding: 1.4rem 1rem; border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-sm); cursor: pointer; text-align: center; color: var(--ink); background: var(--surface-2); }
.sc-drop svg { width: var(--ic-xl); height: var(--ic-xl); color: var(--accent); }
.sc-drop.over, .sc-drop:hover { border-color: var(--accent); background: var(--accent-soft); }
.sc-thumbs { display: flex; flex-wrap: wrap; gap: .5rem; }
.sc-thumbs:empty { display: none; }
.sc-thumb { position: relative; width: 5.5rem; height: 5.5rem; border-radius: var(--radius-sm); overflow: hidden; background: #000;
  border: 1px solid var(--line); }
.sc-thumb img, .sc-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-thumb-busy { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .45); }
.sc-x { position: absolute; top: .2rem; right: .2rem; min-height: 0; width: 1.5rem; height: 1.5rem; padding: 0; border-radius: var(--radius);
  border: 0; background: rgba(0, 0, 0, .6); color: #fff; font-size: var(--fs-md); line-height: 1; }
.sc-mode { justify-self: start; max-width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.sc-gen { display: grid; gap: .5rem; }
.sc-gen button { justify-content: flex-start; text-align: left; gap: .8rem; padding: .7rem .9rem; min-height: 3.4rem; }
.sc-gen button svg { width: var(--ic-lg); height: var(--ic-lg); color: var(--accent); flex: none; }
.sc-gen button span { display: grid; gap: .1rem; }
.sc-gen button small { color: var(--muted); font-weight: 400; font-size: var(--fs-sm); }
.sc-card { position: relative; }
.sc-state { position: absolute; left: .5rem; top: .5rem; padding: .15rem .55rem; border-radius: var(--radius); font-size: var(--fs-xs); font-weight: 600;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.sc-card.pending_approval .sc-state { background: var(--warn); color: #fff; }
.sc-card.draft .sc-state { background: var(--surface-2); color: var(--muted); }
.sc-days { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); align-items: start; }
.sc-day { display: grid; gap: .1rem; padding: .9rem 1rem; }
.sc-day h3 { margin: 0 0 .4rem; font-size: var(--fs-md); text-transform: capitalize; }
.sc-day.sc-wait h3 { text-transform: none; }
.sc-day.today { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.sc-slot { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; gap: .5rem; align-items: center; padding: .4rem 0;
  border-top: 1px solid var(--line); min-width: 0; }
.sc-slot:first-of-type { border-top: 0; }
.sc-slot.past { opacity: .55; }
.sc-tm { font-weight: 600; font-variant-numeric: tabular-nums; }
.sc-what { min-width: 0; overflow-wrap: anywhere; }
.sc-what .linkish { text-align: left; }
.sc-act { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.sc-assign { max-width: 11rem; min-height: 2.1rem; padding: .25rem .5rem; font-size: var(--fs-sm); }
.sp-view-text textarea { min-height: 10rem; }
@media (max-width: 600px) {
  .sc-slot { grid-template-columns: 3rem minmax(0, 1fr); }
  .sc-act { grid-column: 1 / -1; justify-content: flex-start; }
  .sc-thumb { width: 4.6rem; height: 4.6rem; }
}
.sc-what .linkish { font-size: inherit; text-decoration: none; color: var(--ink); font-weight: 500; padding: 0; }
.sc-auto .badge { background: var(--surface-2); color: var(--muted); padding: .15rem .6rem; }
.sc-auto .badge.ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
#g-view .sp-view-text label { color: rgba(255, 255, 255, .82); font-weight: 600; }
#g-view .sp-view-text .sc-chip { color: var(--ink); }

/* backup completo */
.fb-sizes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.fb-sizes > div { display: grid; gap: .1rem; padding: .7rem .85rem; border-radius: var(--radius-sm); background: var(--surface-2); min-width: 0; }
.fb-sizes strong { font-size: var(--fs-xl); font-weight: 600; }
.fb-row { gap: .8rem; flex-wrap: wrap; align-items: flex-end; } .fb-row .field { flex: 1 1 14rem; min-width: 0; }
.fb-row .field.narrow { flex: 0 1 8rem; }

/* ---- scheda di un post dei social nella chat: foto a sinistra, testo e pulsanti a destra (sul telefono in colonna) */
.post-card { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .9rem; margin: .6rem 0; padding: .7rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.post-card.gone { display: block; box-shadow: none; }
.post-card > .meta:only-child { grid-column: 1 / -1; margin: 0; }
.pc-media { position: relative; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4 / 5; background: var(--surface-2); min-height: 0; cursor: zoom-in; }
.pc-media img, .pc-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-count { position: absolute; top: .35rem; right: .35rem; background: rgba(0, 0, 0, .6); color: #fff; font-size: var(--fs-xs);
  padding: .05rem .45rem; border-radius: var(--radius); }
.pc-body { min-width: 0; display: flex; flex-direction: column; gap: .45rem; }
.pc-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pc-state { font-size: var(--fs-xs); font-weight: 600; padding: .1rem .5rem; border-radius: var(--radius); background: var(--surface-2); color: var(--ink-2); }
.pc-state.draft { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--ink); }
.pc-state.posted { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ink); }
.pc-cap { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-md); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.pc-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; }
@media (max-width: 560px) {
  .post-card { grid-template-columns: 1fr; }
  .pc-media { aspect-ratio: 4 / 5; max-height: 22rem; }
  .pc-actions button, .pc-actions .button-link { flex: 1 1 auto; }
}

/* «Ferma»: il pulsante di invio della chat mentre l'assistente lavora, e accanto ai lavori in corso */
/* «Ferma»: rosso pieno, con l'ombra dello stesso rosso (non quella del colore del tema) e un quadratino pieno */
#chat-form button[type=submit].stop, #chat-form button[type=submit].stop:hover {
  background: var(--danger); background-image: none; border-color: var(--danger); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 14px -6px color-mix(in srgb, var(--danger) 75%, transparent); }
#chat-form button[type=submit].stop:hover { filter: brightness(1.06); }
#chat-form button[type=submit].stop svg { width: var(--ic-xs); height: var(--ic-xs); fill: currentColor; stroke: none; }
.act-stop { color: var(--danger); }
.chat-pending button { margin-left: auto; }
.live .stopped .ic { color: var(--muted); }

/* ---- Memoria › Registro: tutto quello che succede, in un grafico e in una linea del tempo */
.blog { display: flex; flex-direction: column; gap: .8rem; }
.blog-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; }
.blog-bar input[type="search"] { flex: 1 1 18rem; min-width: 0; max-width: 34rem; }
.blog-bar .seg button { white-space: nowrap; }
.blog-chart-box { display: flex; flex-direction: column; gap: .7rem; padding: 1rem; }
.blog-tiles { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.4rem; }
.blog-tiles div { display: flex; align-items: baseline; gap: .4rem; }
.blog-tiles b { font-size: var(--fs-xl); font-weight: 600; color: var(--ink); }
.blog-tiles span { color: var(--muted); font-size: var(--fs-sm); }
.blog-tiles .bad b { color: var(--danger, #c0392b); }
.blog-tiles button { margin-left: auto; }
.blog-chart { overflow-x: auto; }
.blog-bars { display: grid; grid-template-columns: repeat(var(--n), minmax(9px, 1fr)); gap: 3px; align-items: end;
  height: 150px; min-width: calc(var(--n) * 12px); }
.blog-col { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 100%; padding: 0; border: 0;
  background: transparent; box-shadow: none; min-height: 0; border-radius: var(--radius); cursor: pointer; gap: 3px; }
.blog-col:hover, .blog-col:focus-visible { background: color-mix(in srgb, var(--accent) 7%, transparent); outline: none; }
.blog-stack { flex: 1 1 auto; width: 100%; display: flex; flex-direction: column-reverse; justify-content: flex-start; min-height: 0;
  border-radius: var(--radius); overflow: hidden; }
.blog-stack i { display: block; width: 100%; flex: none; min-height: 2px; }
.blog-col.has-bad small { color: var(--danger, #c0392b); }
.blog-col small { font-size: var(--fs-2xs); color: var(--muted); line-height: 1; height: .8rem; text-align: center; white-space: nowrap; }
.blog-list { display: flex; flex-direction: column; }
.blog-day { margin: 1rem 0 .3rem; font-size: var(--fs-sm); font-weight: 600; text-transform: capitalize; color: var(--muted); }
.blog-row { display: grid; grid-template-columns: 3.2rem 9.5rem minmax(0, 1fr) auto; gap: .6rem; align-items: start;
  padding: .55rem .2rem; border-bottom: 1px solid var(--line); }
.blog-row.low { opacity: .7; }
.blog-time { color: var(--muted); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); padding-top: .05rem; }
.blog-sec { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-sm); color: var(--ink-2); min-width: 0; padding-top: .1rem; overflow-wrap: anywhere; }
.blog-what { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; }
.blog-title { overflow-wrap: anywhere; }
.blog-detail { flex-basis: 100%; color: var(--muted); font-size: var(--fs-sm); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-st { font-size: var(--fs-xs); padding: .05rem .5rem; border-radius: var(--radius); white-space: nowrap;
  background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--ink-2); }
.blog-st.st-fatto { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.blog-st.st-errore, .blog-st.st-rifiutato { background: color-mix(in srgb, var(--danger, #c0392b) 14%, transparent);
  color: var(--danger, #c0392b); }
.blog-st.st-attesa { background: color-mix(in srgb, var(--c-amber, #d9a400) 18%, transparent); color: var(--ink); }
.blog-go { min-height: 1.9rem; padding: .15rem .7rem; font-size: var(--fs-sm); white-space: nowrap; }
.blog-more { align-self: center; }
@media (max-width: 860px) {
  .blog-bar .seg { display: flex; width: 100%; }
  .blog-bar .seg button { flex: 1; padding-inline: .3rem; }
  .blog-bars { height: 120px; }
  .blog-row { grid-template-columns: 2.9rem minmax(0, 1fr) auto; }
  .blog-sec { grid-column: 2; grid-row: 1; }
  .blog-what { grid-column: 2 / 4; grid-row: 2; }
  .blog-go { grid-column: 3; grid-row: 1; }
}

/* finestre WhatsApp e Telegram: A− / A+ nella testata */
.cp-font, .chat-pop .cp-font { display: inline-flex; align-items: baseline; justify-content: center; font-weight: 600;
  font-size: var(--fs-sm); letter-spacing: -.02em; line-height: 1; padding-top: .55rem; }
.cp-font small { font-size: .75em; margin-left: .05em; }

/* Email smistate: colonne proporzionate; il motivo prende lo spazio che resta */
.em-table { table-layout: fixed; }
.em-table th:nth-child(1) { width: 17%; } .em-table th:nth-child(2) { width: 23%; }
.em-table th:nth-child(3) { width: 9.5rem; } .em-table th:nth-child(4) { width: 7.5rem; }
.em-table th:nth-child(6) { width: 7.5rem; }
.em-table td { overflow-wrap: anywhere; }
.em-table td[data-label="Azione"] .tag, .em-table td[data-label="Categoria"] select { max-width: 100%; }
.em-table td .btn-row { flex-direction: column; align-items: stretch; gap: .4rem; }
.em-table td .btn-row button { width: 100%; justify-content: center; }
.em-table .subj { text-align: left; font-weight: 500; }
@media (max-width: 860px) {
  .em-table { table-layout: auto; }
  .em-table th { width: auto !important; }
  .em-table td .btn-row { flex-direction: row; }
  .em-table td .btn-row button { width: auto; flex: 1; }
}

/* Panoramica › Prossime uscite: la piccola anteprima del post, che si apre al clic */
.rowi .ico.hs-thumb { padding: 0; overflow: hidden; background: var(--surface-2); }
.rowi .ico.hs-thumb img, .rowi .ico.hs-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Memoria › Mappa: pulsanti 2D/3D e rotazione automatica, come gli altri della mappa */
.brain-tools .br3-btn { font-weight: 700; font-size: var(--fs-xs); letter-spacing: .02em; }
.brain-tools .br3-btn svg { width: var(--ic-sm); height: var(--ic-sm); }

/* ================= barra laterale e barra in basso con il colore del tema =================
   La barra laterale ha il colore principale (quello scelto in Aspetto); la voce aperta si «ritaglia» e si fonde con la
   pagina, con gli angoli concavi. Si riduce a sole icone (freccia in alto). Sul telefono la barra in basso è colorata e
   la voce aperta sale in un cerchio. */
/* la barra ha lo stesso colore dell'interfaccia; la voce aperta è una scheda di tinta leggera che arriva al bordo */
:root {
  --sb-bg: var(--surface); --sb-ink: var(--ink); --sb-muted: var(--muted); --sb-soft: var(--surface-2); --sb-line: var(--line);
  --sb-notch: color-mix(in srgb, var(--accent) 13%, var(--surface));
}
:root[data-theme="dark"] { --sb-notch: color-mix(in srgb, var(--accent) 17%, var(--surface)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --sb-notch: color-mix(in srgb, var(--accent) 17%, var(--surface)); }
}
.sidebar { background: var(--sb-bg); background-color: var(--surface); border-right: 1px solid var(--sb-line); color: var(--sb-ink); }
.sidebar .company-card { background: transparent; border-color: transparent; color: var(--sb-ink); box-shadow: none; padding-left: .2rem; }
.sidebar .company-card:hover { background: var(--sb-soft); border-color: transparent; }
.sidebar .company-card small { color: var(--sb-muted); }
.sidebar .theme-toggle, .sidebar .sb-collapse { color: var(--ink-2); background: var(--sb-soft); border: 1px solid var(--sb-line); box-shadow: none; }
.sidebar .theme-toggle:hover, .sidebar .sb-collapse:hover { background: var(--sb-notch); color: var(--ink); }
.sidebar .nav button[data-space] { color: var(--ink-2); }
.sidebar .nav button[data-space] > svg { color: var(--ink-2); background: transparent; box-shadow: none; padding: .3rem; }
.sidebar .nav button[data-space]:hover { background: var(--sb-soft); color: var(--ink); }
.sidebar .nav button[data-space].active { background: var(--sb-notch); color: var(--ink); font-weight: 600; box-shadow: none; }
.sidebar .nav button[data-space].active > svg { background: transparent; color: var(--ic, var(--accent)); box-shadow: none; }
.sidebar .nav button span.dot { box-shadow: 0 0 0 2px var(--surface); }
/* i numeri non toccano il bordo (la voce arriva fino in fondo) e non vengono tagliati */
.sidebar .nav button[data-space] > .badge { flex: none; margin-right: .75rem; box-shadow: none; }
.sidebar .sys-box { background: var(--sb-soft); border-color: var(--sb-line); color: var(--sb-ink); box-shadow: none; }
.sidebar #sys-info, .sidebar #sys-info * { color: var(--sb-muted); }
.sidebar #sys-info strong, .sidebar #sys-info b { color: var(--sb-ink); }
.sb-collapse { display: none; }

/* la voce aperta arriva al bordo e si fonde con la pagina (computer e menu del telefono) */
.sidebar { padding-right: 0; }
.sidebar > .brand, .sidebar > .side-foot { margin-right: .8rem; }
.sidebar > .nav { padding: .9rem 0 .9rem 0; }
.sidebar .nav button[data-space] { border-radius: var(--radius) 0 0 var(--radius); position: relative; }
.sidebar .nav button[data-space].active::before, .sidebar .nav button[data-space].active::after {
  content: ""; position: absolute; right: 0; width: 1.1rem; height: 1.1rem; pointer-events: none; background: transparent; }
.sidebar .nav button[data-space].active::before { top: -1.1rem; border-bottom-right-radius: var(--radius);
  box-shadow: .45rem .45rem 0 .45rem var(--sb-notch); }
.sidebar .nav button[data-space].active::after { bottom: -1.1rem; border-top-right-radius: var(--radius);
  box-shadow: .45rem -.45rem 0 .45rem var(--sb-notch); }
@media (min-width: 861px) {
  .sidebar { position: relative; }
  /* stessa forma e misura del pulsante del tema accanto */
  .sb-collapse { display: grid; place-items: center; flex: none; width: 2.3rem; height: 2.3rem; min-width: 2.3rem; min-height: 2.3rem; padding: .4rem; border-radius: var(--radius-sm); }
  .sb-collapse svg { width: var(--ic-md); height: var(--ic-md); transition: transform .2s; }
  /* solo icone */
  body.sb-mini .app { --sidebar: 4.9rem; }
  body.sb-mini .sidebar > .brand { flex-direction: column; margin-right: .6rem; gap: .5rem; }
  body.sb-mini .sidebar .company-card { padding: .45rem; min-height: 0; justify-content: center; }
  body.sb-mini .sidebar .company-card .cc-text { display: none; }
  body.sb-mini .sb-collapse svg { transform: rotate(180deg); }
  body.sb-mini .sidebar .nav button[data-space] > span:not(.badge):not(.dot) { display: none; }
  body.sb-mini .sidebar .nav button[data-space] { justify-content: flex-start; padding-left: .95rem; }
  body.sb-mini .sidebar .nav button[data-space] .badge { position: absolute; top: .1rem; left: 2.3rem; }
  body.sb-mini .sidebar > .side-foot { margin-right: .6rem; }
  body.sb-mini .sidebar #sys-info, body.sb-mini .sidebar .sys-gear span { display: none; }
  body.sb-mini .sidebar .sys-box { padding: .35rem; }
  body.sb-mini .sidebar .sys-btns { display: grid; grid-template-columns: 1fr; gap: .3rem; }
  body.sb-mini .sidebar .sys-gear { justify-content: center; padding: .4rem; }
}

/* telefono: la barra in basso col colore dell'interfaccia; la voce aperta sale in un cerchio di tinta leggera */
@media (max-width: 860px) {
  .bottombar { background: var(--surface); border: 1px solid var(--line); overflow: visible;
    box-shadow: 0 8px 22px -8px rgba(0, 0, 0, .22), 0 2px 8px rgba(0, 0, 0, .08); }
  .bottombar button, .bottombar button[data-tab] svg { color: var(--ink-2); }
  .bottombar button { transition: transform .2s; }
  .bottombar button.active { background: transparent; box-shadow: none; color: var(--ink); font-weight: 600; }
  .bottombar button.active svg { width: 2.7rem; height: 2.7rem; padding: .7rem; box-sizing: border-box; margin-top: -1.55rem;
    border-radius: var(--radius); color: var(--ic, var(--accent)); background: var(--sb-notch);
    box-shadow: 0 0 0 .35rem var(--ground), 0 6px 14px -6px color-mix(in srgb, var(--ic, var(--accent)) 45%, transparent); }
  .bottombar .badge { box-shadow: 0 0 0 2px var(--surface); }
}

/* WhatsApp, Telegram e «Torna su» in basso a destra: stessa misura dei pulsanti delle notifiche, nello stesso riquadro */
.cd-top { display: none; }
@media (min-width: 861px) {
  .chat-dock.in-rail { width: 3.6rem; padding: .45rem 0; gap: .35rem; align-items: center; border-radius: var(--radius);
    border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: var(--hl), var(--e1, 0 4px 14px rgba(0,0,0,.06)); }
  .chat-dock.in-rail .nr-app, .chat-dock.in-rail .cd-btn.nr-app { width: 2.6rem; height: 2.6rem; border: 0;
    border-radius: var(--radius-sm); background: transparent; box-shadow: none; }
  .chat-dock.in-rail .cd-btn.nr-app svg, .chat-dock.in-rail .nr-app svg { width: var(--ic-md); height: var(--ic-md); }
  .chat-dock.in-rail .cd-btn:hover, .chat-dock.in-rail .cd-btn.on { background: color-mix(in srgb, var(--ic) 14%, transparent); }
  .chat-dock.in-rail .cd-top { display: grid; color: var(--ink-2); }
  .chat-dock.in-rail .cd-top:hover { background: var(--surface-2); color: var(--ink); }
  .chat-dock.in-rail .cd-btn .badge { top: .05rem; right: .05rem; }
}

/* telefono: barra in alto con menu e tema a sinistra, logo dell'azienda al centro, notifiche, Telegram e WhatsApp a destra;
   i pulsanti fluttuanti di WhatsApp e Telegram lasciano il posto a «Torna su», che compare solo quando hai scorso */
.tb-side, .tb-brand, .tb-dock { display: none; }
@media (max-width: 860px) {
  .topbar { display: grid; grid-template-columns: 1fr auto 1fr; gap: .4rem; padding-left: 10px; padding-right: 10px; }
  .topbar .tb-side { display: flex; align-items: center; gap: .15rem; min-width: 0; }
  .topbar .tb-right { justify-content: flex-end; }
  .topbar .icon-btn { width: 2.35rem; height: 2.35rem; min-height: 0; padding: 0; display: grid; place-items: center; position: relative; }
  .topbar .icon-btn svg { width: var(--ic-md); height: var(--ic-md); }
  .topbar .tb-dock svg { color: var(--ic); }
  .topbar .tb-dock.on { background: color-mix(in srgb, var(--ic) 14%, transparent); }
  .topbar .icon-btn .badge { position: absolute; top: .05rem; right: .05rem; font-size: var(--fs-2xs); min-width: 1.05rem; padding: 0 .25rem;
    box-shadow: 0 0 0 2px var(--surface); }
  .topbar .tb-brand { display: grid; place-items: center; grid-column: 2; grid-row: 1; border: 0; background: transparent; padding: 0;
    min-height: 0; box-shadow: none; }
  .topbar .tb-brand .logo-box { width: 2.3rem; height: 2.3rem; }
  /* un logo largo (scritta) si legge intero: la casella segue la sua forma */
  .topbar .tb-brand .logo-box:has(img) { display: flex; align-items: center; justify-content: center; width: auto; min-width: 2.3rem;
    max-width: 9.5rem; padding: 0 .35rem; }
  .topbar .tb-brand .logo-box img { width: auto; max-width: 100%; height: 100%; padding: .25rem 0; box-sizing: border-box; object-fit: contain; }
  .topbar .tb-brand .topbar-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .topbar .act-pill { grid-column: 2; grid-row: 1; }
  .chat-dock .cd-btn { display: none !important; }
  .chat-dock, .chat-dock.in-rail { justify-content: flex-end; }
  .chat-dock .cd-top { display: none; pointer-events: auto; width: 2.6rem; height: 2.6rem; border-radius: var(--radius); border: 1px solid var(--line);
    background: var(--surface); color: var(--ink-2); box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .12); }
  .chat-dock .cd-top svg { width: var(--ic-md); height: var(--ic-md); }
  body.scrolled .chat-dock .cd-top { display: grid; place-items: center; }
  /* «Torna su» nell'angolo in basso a sinistra: a destra resta «Parla», così non si toccano */
  .chat-dock .cd-top { order: -1; margin-right: auto; }
  body.nav-open .chat-dock { display: none; }
}

/* un file consegnato dall'assistente nella chat: scheda con nome, Apri e Scarica */
.file-card { display: flex; align-items: center; gap: .6rem; max-width: 26rem; margin: .4rem 0; padding: .55rem .6rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--e1, none); }
.file-card .fc-ico { flex: none; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: var(--radius);
  background: var(--accent-soft); color: var(--accent); }
.file-card .fc-ico svg { width: var(--ic-sm); height: var(--ic-sm); }
.file-card .fc-name { flex: 1; min-width: 0; display: grid; font-weight: 600; font-size: var(--fs-md); overflow-wrap: anywhere; }
.file-card .fc-name small { font-weight: 500; color: var(--muted); font-size: var(--fs-xs); }
.file-card .fc-btn { flex: none; padding: .3rem .7rem; border-radius: var(--radius); border: 1px solid var(--line); font-size: var(--fs-sm);
  font-weight: 600; color: var(--ink); text-decoration: none; background: var(--surface-2); }
.file-card .fc-btn:hover { background: var(--surface-3); }
.file-card .fc-dl { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #fff); }
.file-card .fc-dl:hover { background: var(--accent); filter: brightness(1.07); }

/* i concetti del secondo cervello (persone, aziende, targhe, documenti…) */
:root { --c-concept: #b7791f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-concept: #f6c453; } }
:root[data-theme="dark"] { --c-concept: #f6c453; }

/* il passato nel cervello: numeri in griglia */
.past-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem; }
.past-grid > div { display: grid; gap: .1rem; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); min-width: 0; }
.past-grid strong { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.past-grid .meta { font-size: var(--fs-sm); }

/* maniglia per allargare o stringere la barra laterale (computer): il bordo destro si trascina */
.sb-resize { display: none; }
@media (min-width: 861px) {
  .sb-resize { display: block; position: absolute; top: 0; right: 0; bottom: 0; width: 7px; cursor: col-resize; z-index: 6;
    touch-action: none; }
  .sb-resize::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 2px; border-radius: var(--radius);
    background: transparent; transition: background .15s; }
  .sb-resize:hover::after, .sb-resize:focus-visible::after, body.sb-resizing .sb-resize::after {
    background: color-mix(in srgb, var(--accent) 55%, transparent); }
  .sb-resize:focus-visible { outline: none; }
  body.sb-resizing, body.sb-resizing * { cursor: col-resize !important; user-select: none !important; }
  body.sb-resizing .app { transition: none !important; }
  /* i contenuti si adattano: nomi delle voci, dell'azienda e del riquadro in basso tagliati con i puntini */
  .sidebar .nav button[data-space] > span:not(.badge):not(.dot) { min-width: 0; overflow-wrap: anywhere; }
  .sidebar .company-card { min-width: 0; }
  .sidebar .company-card .cc-text { min-width: 0; overflow: hidden; }
  .sidebar .company-card .cc-text > * { display: block; overflow-wrap: anywhere; }
}

/* Danger zone: l'autodistruzione, ben separata e in rosso */
.set-danger-tab { color: var(--danger) !important; }
.danger-panel { border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--line)) !important;
  background: color-mix(in srgb, var(--danger) 5%, var(--surface)) !important; }
.danger-panel h3 { color: var(--danger); }
.danger-lead { margin: 0; font-size: var(--fs-md); }
.danger-list { margin: .2rem 0 .2rem 1.1rem; padding: 0; display: grid; gap: .25rem; color: var(--ink-2); }
.danger-big { width: 100%; min-height: 3.4rem; font-size: var(--fs-lg); font-weight: 700; letter-spacing: .01em;
  background: var(--danger) !important; border-color: var(--danger) !important; color: #fff !important; }
.danger-big:disabled { opacity: .45; cursor: not-allowed; }

/* voce aperta della barra: rilievo — un'ombra che segue tutta la forma (anche gli angoli concavi) e luce in alto */
.sidebar .nav button[data-space].active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  filter: drop-shadow(0 6px 10px rgba(20, 30, 45, .17)) drop-shadow(0 2px 3px rgba(20, 30, 45, .13)); }
:root[data-theme="dark"] .sidebar .nav button[data-space].active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, .55)) drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sidebar .nav button[data-space].active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, .55)) drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); } }
.sidebar .nav button[data-space].active { z-index: 1; }
.past-eta { display: block; font-weight: 600; color: var(--ink); margin-bottom: .35rem; }
.past-ws { display: flex; flex-wrap: wrap; gap: .3rem; }
.past-ws > span { font-size: var(--fs-xs); padding: .15rem .55rem; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface-2); color: var(--muted); max-width: 100%; overflow-wrap: anywhere; }
.past-ws > span.on { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
.past-ws > span.off { text-decoration: line-through; opacity: .65; }

/* il passato nel cervello: fasi, barra e log in tempo reale */
.past-phases { display: flex; flex-wrap: wrap; gap: .35rem .5rem; list-style: none; margin: 0; padding: 0; }
.past-phases li { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-sm); color: var(--muted); }
.past-phases li > span { display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; font-size: var(--fs-xs);
  font-weight: 700; border: 1.5px solid var(--line-strong, var(--line)); background: var(--surface); }
.past-phases li.done { color: var(--ink-2); }
.past-phases li.done > span { background: var(--ok); border-color: var(--ok); color: #fff; }
.past-phases li.now { color: var(--ink); font-weight: 600; }
.past-phases li.now > span { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.past-phases li + li::before { content: ""; width: 1.1rem; height: 1.5px; background: var(--line); margin-right: .1rem; }
.past-bar { position: relative; height: 1.7rem; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line);
  overflow: hidden; }
.past-bar-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: var(--radius); transition: width .6s ease;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 75%, #fff), var(--accent));
  background-size: 200% 100%; animation: pastflow 2.4s linear infinite; }
@keyframes pastflow { from { background-position: 0 0; } to { background-position: -200% 0; } }
.past-bar-text { position: relative; display: block; text-align: center; line-height: 1.7rem; font-size: var(--fs-sm); font-weight: 600;
  color: var(--ink); text-shadow: 0 0 6px var(--surface); padding: 0 .6rem; overflow-wrap: anywhere; }
.past-logbox > summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.past-log { margin-top: .4rem; max-height: 17rem; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: .35rem .5rem; font-size: var(--fs-xs); line-height: 1.45; font-variant-numeric: tabular-nums; }
.past-log .pl { display: flex; gap: .45rem; padding: .12rem 0; border-bottom: 1px dashed color-mix(in srgb, var(--line) 60%, transparent);
  min-width: 0; }
.past-log .pl:last-child { border-bottom: 0; }
.past-log time { flex: none; color: var(--muted); }
.past-log b { flex: none; max-width: 14rem; font-weight: 600; overflow-wrap: anywhere;
  color: var(--ink-2); }
.past-log span { min-width: 0; overflow-wrap: anywhere; color: var(--ink-2); }
.past-log .pl-ok span { color: var(--ink); }
.past-log .pl-errore span, .past-log .pl-stop span { color: var(--danger); }
.past-log .pl-riposo span { color: var(--warn); }
.past-log .pl-salto span { color: var(--muted); }
@media (max-width: 600px) { .past-log b { max-width: 7rem; } .past-phases li + li::before { display: none; } }

/* ---------------------------------------------------------------- Editor (immagini, PDF, video) */
.ed-head .ed-modes button { display: inline-flex; align-items: center; gap: .4rem; }
.ed-modes svg { width: var(--ic-sm); height: var(--ic-sm); }
.ed-pane { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; min-width: 0; }
.ed-pane > * { min-width: 0; }
.ed-bar { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; padding: .5rem .6rem; }
.ed-bar select { width: auto; max-width: 17rem; min-height: 2.2rem; }
.ed-bar .icon-btn { width: 2.2rem; height: 2.2rem; font-size: var(--fs-lg); font-weight: 700; }
.ed-bar button svg { width: var(--ic-sm); height: var(--ic-sm); }
.ed-sep { width: 1px; height: 1.6rem; background: var(--line); margin: 0 .15rem; }
.ed-grow { flex: 1; }
.ed-zoom { min-width: 4rem; font-variant-numeric: tabular-nums; }
.ed-canvas-wrap { box-shadow: 0 18px 50px rgba(0, 0, 0, .22); line-height: 0; }
.ed-loading { position: absolute; inset: auto 0 1rem; text-align: center; color: var(--muted); margin: 0; }
.ed-loading.hidden { display: none; }
.ed-row { display: flex; align-items: center; gap: .5rem; justify-content: flex-start; text-align: left; width: 100%; padding: .6rem .7rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); box-shadow: none; }
.ed-row:hover { border-color: var(--accent); }
.ed-row svg { width: var(--ic-sm); height: var(--ic-sm); flex: none; }
.ed-row.t1 { font-size: var(--fs-xl); font-weight: 700; }
.ed-row.t2 { font-size: var(--fs-md); font-weight: 700; }
.ed-row.t4 { justify-content: center; background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #fff); border-radius: var(--radius); font-weight: 700; }
.ed-tog { min-width: 2.2rem; min-height: 2.1rem; padding: .25rem .5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  color: var(--ink); box-shadow: none; font-size: var(--fs-base); }
.ed-tog.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.ed-picker { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 1rem; background: rgba(6, 8, 11, .6); backdrop-filter: blur(8px); }
.ed-picker.hidden { display: none; }
.ed-picker > div { width: min(860px, 100%); max-height: calc(100dvh - 2rem); display: grid; grid-template-rows: auto auto 1fr; gap: .6rem;
  background: var(--surface); border-radius: var(--radius); padding: 1rem; box-shadow: 0 30px 80px rgba(0, 0, 0, .4); min-height: 0; }
.ed-picker-grid, #ed-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .6rem; overflow: auto; min-height: 0; }
.ed-pick { display: grid; gap: .3rem; padding: .35rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--ink); box-shadow: none; min-height: 0; text-align: left; }
.ed-pick:hover { border-color: var(--accent); }
.ed-pick img, .ed-pick video, .ed-pick-doc { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); background: var(--surface-2); display: grid; place-items: center; }
.ed-pick-doc svg { width: var(--ic-2xl); height: var(--ic-2xl); color: var(--accent); }
.ed-pick > span:last-child { font-size: var(--fs-xs); overflow-wrap: anywhere; }

@media (max-width: 860px) {
  .ed-bar select { max-width: 100%; flex: 1 1 100%; }
  .ed-bar .ed-grow { display: none; }
}

/* popup dei contenuti: pulsanti contestuali (Modifica nell'Editor, Condividi…) e PDF pagina per pagina sul telefono */
.viewer-acts { display: contents; }
.viewer-foot .viewer-edit { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #fff); }
.viewer-body:has(.viewer-pdf) { place-items: start center; }
.viewer-pdf, .g-pdf-box .viewer-pdf { width: min(1000px, 100%); display: grid; gap: .6rem; padding-bottom: 1rem; }
.viewer-page { width: 100%; background: #fff; border-radius: var(--radius); box-shadow: 0 12px 34px rgba(0, 0, 0, .4); overflow: hidden; }
.viewer-page canvas { display: block; width: 100%; height: auto; }
.viewer-pages-n { margin: 0; text-align: center; font-size: var(--fs-sm); color: rgba(255, 255, 255, .75); }
.viewer-pdf > .meta { color: rgba(255, 255, 255, .8); text-align: center; }
.g-pdf-box { width: min(960px, 100%); margin: 0 auto; }
.g-pdf-box:has(.viewer-pdf) { max-height: calc(100dvh - 13rem); overflow: auto; overscroll-behavior: contain; }
.lightbox [data-ed-open] svg, .viewer-foot [data-ed-open] svg { width: var(--ic-sm); height: var(--ic-sm); }
/* la scheda di un file in chat: sul telefono i pulsanti vanno sotto il nome, sempre visibili */
.file-card .fc-acts { display: flex; gap: .4rem; flex: none; }
.file-card button.fc-btn { min-height: 0; box-shadow: none; cursor: pointer; }
@media (max-width: 560px) {
  .file-card { flex-wrap: wrap; max-width: 100%; }
  .file-card .fc-name { flex: 1 1 calc(100% - 3rem); }
  .file-card .fc-acts { flex: 1 1 100%; }
  .file-card .fc-acts .fc-btn { flex: 1; text-align: center; padding: .5rem .7rem; }
}
.ed-picker-row { display: flex; gap: .5rem; align-items: center; }
.ed-picker-row input { flex: 1; min-width: 0; }
.ed-picker-row button svg { width: var(--ic-sm); height: var(--ic-sm); }

/* Editor PDF: pagine in griglia, menù, pagina da vicino */
#ed-pdf { position: relative; }
.ed-bar button:disabled { opacity: .45; }
.pd-sel-acts { display: inline-flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.pd-count { font-size: var(--fs-sm); white-space: nowrap; }
.pd-name { width: 13rem; min-height: 2.2rem; }
.pd-menu { position: absolute; z-index: 30; min-width: 16rem; max-width: calc(100% - 1rem); display: grid; gap: .1rem; padding: .35rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: 0 18px 48px rgba(0, 0, 0, .22); }
.pd-menu.hidden { display: none; }
.pd-menu button { display: flex; align-items: center; gap: .6rem; justify-content: flex-start; text-align: left; border: 0; box-shadow: none;
  background: transparent; color: var(--ink); padding: .6rem .7rem; border-radius: var(--radius); min-height: 0; font-size: var(--fs-md); }
.pd-menu button:hover { background: var(--surface-2); }
.pd-menu svg { width: var(--ic-sm); height: var(--ic-sm); color: var(--accent); flex: none; }
.pd-pages { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 1rem; padding: 1rem;
  min-height: 22rem; align-content: start; }
.pd-pages.busy::after { content: attr(data-busy); position: absolute; inset: 0; display: grid; place-items: center; font-weight: 600;
  background: color-mix(in srgb, var(--surface) 75%, transparent); border-radius: inherit; }
.pd-hint { grid-column: 1 / -1; margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.pd-tile { display: grid; gap: .35rem; align-content: start; border-radius: var(--radius-sm); padding: .35rem; border: 2px solid transparent; }
.pd-tile.on { border-color: var(--accent); background: var(--accent-soft); }
.pd-tile.drop { outline: 2px dashed var(--accent); outline-offset: 2px; }
.pd-tile.dragging { opacity: .4; }
.pd-thumb { position: relative; display: block; width: 100%; padding: 0; min-height: 0; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; overflow: hidden; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); cursor: pointer; aspect-ratio: 210 / 297; }
.pd-thumb canvas { display: block; width: 100%; height: 100%; }
.pd-check { position: absolute; top: .35rem; right: .35rem; width: 1.5rem; height: 1.5rem; border-radius: var(--radius); display: grid; place-items: center;
  background: rgba(255, 255, 255, .9); border: 1px solid var(--line-strong); color: transparent; }
.pd-check svg { width: var(--ic-xs); height: var(--ic-xs); }
.pd-tile.on .pd-check { background: var(--accent); border-color: var(--accent); color: #fff; }
.pd-tile-bar { display: flex; align-items: center; gap: .15rem; }
.pd-tile-bar .icon-btn { width: 1.9rem; height: 1.9rem; font-size: var(--fs-lg); }
.pd-num { min-width: 1.4rem; text-align: center; font-weight: 700; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.pd-write { margin-left: auto; padding: .25rem .55rem; min-height: 0; }
.pd-write svg { width: var(--ic-xs); height: var(--ic-xs); }
.pd-empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: .5rem; text-align: center; padding: 3rem 1rem;
  border: 2px dashed var(--line-strong); border-radius: var(--radius); }
.pd-empty h3 { margin: .2rem 0 0; }
.pd-empty-ico { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); }
.pd-empty-ico svg { width: var(--ic-xl); height: var(--ic-xl); }
.pd-empty-acts { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: .4rem; }
.pd-empty-acts svg { width: var(--ic-sm); height: var(--ic-sm); }
.pd-edit { position: fixed; inset: 0; z-index: 88; display: grid; grid-template-rows: auto 1fr; background: rgba(6, 8, 11, .88); backdrop-filter: blur(10px); }
.pd-edit.hidden { display: none; }
.pd-edit-bar { border-radius: 0; background: var(--surface); border-bottom: 1px solid var(--line); }
.pd-edit-bar .ed-tog { display: inline-flex; align-items: center; gap: .35rem; }
.pd-edit-bar .ed-tog svg { width: var(--ic-sm); height: var(--ic-sm); }
.pd-edit-bar input[type=color] { width: 2.3rem; height: 2.1rem; padding: .1rem; border-radius: var(--radius); }
.pd-edit-bar select { width: auto; min-height: 2.1rem; }
.pd-mark-ico, .pd-cover-ico { width: 1rem; height: .7rem; border-radius: var(--radius); background: #ffe14d; }
.pd-cover-ico { background: #fff; border: 1px solid var(--line-strong); }
.pd-edit-stage { display: grid; place-items: center; overflow: auto; padding: .75rem; min-height: 0; }
.pd-edit-stage .canvas-container { box-shadow: 0 24px 70px rgba(0, 0, 0, .55); }
@media (max-width: 860px) {
  .pd-pages { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; padding: .6rem; }
  .pd-name { flex: 1 1 100%; width: 100%; }
  .ed-bar .pd-count { order: 5; }
  .pd-edit-bar { gap: .3rem; padding: .45rem; }
  .pd-edit-bar .ed-tog span:not([class]) { display: none; }
  .pd-edit-bar #pd-edit-title, .pd-edit-bar .ed-sep, .pd-edit-bar .ed-grow { display: none; }
}
.pd-pages { align-items: start; }
.pd-tile { grid-template-columns: minmax(0, 1fr); min-width: 0; }
@media (max-width: 860px) { .pd-edit-bar select { flex: 0 0 auto; max-width: 5rem; } .pd-edit-bar .ed-grow { display: block; flex: 1; } }

/* Editor video: anteprima nel formato scelto, fila delle clip, pannello Clip / Testi / Musica */
#ed-video { position: relative; }
.vd-note { padding: .8rem 1rem; margin: 0; }
.vd-work { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: .75rem; align-items: start; }
.vd-left { display: grid; gap: .75rem; min-width: 0; }
.vd-stage { display: grid; justify-items: center; gap: .5rem; padding: .8rem; }
.vd-frame { position: relative; height: min(62dvh, 34rem); max-width: 100%; aspect-ratio: 9 / 16; background: #0d0f12; border-radius: var(--radius);
  overflow: hidden; box-shadow: 0 18px 50px rgba(0, 0, 0, .25); container-type: size; }
.vd-frame video, .vd-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.vd-frame[data-fit="fill"] video, .vd-frame[data-fit="fill"] img { object-fit: cover; }
.vd-frame video.hidden, .vd-frame img.hidden { display: none; }
.vd-empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 1.5rem; margin: 0; color: rgba(255, 255, 255, .7); font-size: var(--fs-base); }
.vd-empty.hidden { display: none; }
.vd-texts { position: absolute; inset: 0; pointer-events: none; }
.vd-text { position: absolute; left: 8%; right: 8%; text-align: center; font-weight: 700; line-height: 1.25; font-family: "DejaVu Sans", Verdana, sans-serif;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .6); overflow-wrap: anywhere; }
.vd-text.box { text-shadow: none; }
.vd-text.box { background: rgba(0, 0, 0, .47); border-radius: var(--radius); padding: .3em .45em; left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: 84%; }
.vd-text.top { top: 8%; }
.vd-text.center { top: 50%; transform: translateY(-50%); }
.vd-text.center.box { transform: translate(-50%, -50%); }
.vd-text.bottom { bottom: 14%; }
.vd-transport { display: flex; align-items: center; gap: .6rem; width: 100%; flex-wrap: wrap; }
.vd-transport .icon-btn { width: 2.6rem; height: 2.6rem; border-radius: var(--radius); background: var(--accent); color: var(--accent-ink, #fff); }
.vd-transport .icon-btn.on { background: var(--ink); }
.vd-time { font-variant-numeric: tabular-nums; font-weight: 600; }
.vd-hint { font-size: var(--fs-xs); margin-left: auto; }
.vd-timeline { display: flex; gap: .6rem; overflow-x: auto; padding: .7rem; align-items: flex-start; scrollbar-width: thin; }
.vd-timeline > p { margin: 0; align-self: center; }
.vd-total { white-space: nowrap; padding: 0 .4rem; }
.vd-clip { flex: 0 0 9.5rem; display: grid; gap: .3rem; padding: .3rem; border: 2px solid transparent; border-radius: var(--radius-sm); }
.vd-clip.on { border-color: var(--accent); background: var(--accent-soft); }
.vd-clip-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; padding: 0; min-height: 0; border: 0; border-radius: var(--radius);
  overflow: hidden; background: #0d0f12; box-shadow: none; }
.vd-clip-thumb img, .vd-clip-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vd-clip-len { position: absolute; left: .3rem; bottom: .3rem; padding: .1rem .4rem; border-radius: var(--radius); background: rgba(0, 0, 0, .65); color: #fff;
  font-size: var(--fs-xs); font-weight: 600; }
.vd-clip-bar { display: flex; align-items: center; gap: .1rem; }
.vd-clip-bar .icon-btn { width: 1.9rem; height: 1.9rem; font-size: var(--fs-lg); }
.vd-clip-bar .danger { margin-left: auto; }
.vd-clip-bar svg { width: var(--ic-sm); height: var(--ic-sm); }
.vd-side { padding: .8rem; display: grid; gap: .7rem; position: sticky; top: .75rem; }
.vd-tabs { width: 100%; }
.vd-tabs button { flex: 1; }
.vd-pane h4 { margin: .1rem 0 .5rem; font-size: var(--fs-md); overflow-wrap: anywhere; }
.vd-pane .hint { font-size: var(--fs-sm); color: var(--muted); }
.vd-pane > button svg, .vd-pane .ed-row svg { width: var(--ic-sm); height: var(--ic-sm); }
.vd-text-card { display: grid; gap: .4rem; padding: .55rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.vd-text-card textarea { width: 100%; resize: vertical; min-height: 3.2rem; }
.vd-text-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: var(--fs-sm); }
.vd-text-row input[type=number] { width: 4.2rem; min-height: 2rem; }
.vd-text-row select { width: auto; min-height: 2rem; }
.vd-text-row input[type=color] { width: 2.2rem; height: 2rem; padding: .1rem; border-radius: var(--radius); }
.vd-text-row .check { display: flex; align-items: center; gap: .3rem; margin: 0; }
.vd-text-row .icon-btn { margin-left: auto; width: 2rem; height: 2rem; }
.vd-text-row svg { width: var(--ic-sm); height: var(--ic-sm); }
.vd-job { display: grid; gap: .5rem; padding: .8rem 1rem; }
.vd-job.hidden { display: none; }
.vd-job-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.vd-job-row svg { width: var(--ic-sm); height: var(--ic-sm); }
.vd-bar { height: .5rem; border-radius: var(--radius); background: var(--surface-2); overflow: hidden; }
.vd-bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width .4s; }
.vd-job.err .vd-bar i { background: var(--danger, #c0392b); }
@media (max-width: 1100px) { .vd-work { grid-template-columns: minmax(0, 1fr); } .vd-side { position: static; } }
@media (max-width: 860px) {
  .vd-frame { height: auto; width: 100%; max-height: 62dvh; }
  .vd-frame[style*="9 / 16"], .vd-frame[style*="4 / 5"] { width: auto; height: 58dvh; }
  .vd-hint { margin-left: 0; flex-basis: 100%; }
  .ed-bar #vd-aspect, .ed-bar #vd-fit { flex: 1 1 100%; max-width: 100%; }
  .ed-bar #vd-quality { flex: 1 1 auto; }
}

/* barra laterale: ogni voce con la sua icona di un colore diverso (chiaro e scuro), anche quando è attiva */
.sidebar .nav [data-space="home"] { --ic: #2f6fe4; } .sidebar .nav [data-space="assistant"] { --ic: #0f9a6c; }
.sidebar .nav [data-space="mail"] { --ic: #1f9bd8; } .sidebar .nav [data-space="create"] { --ic: #7457e8; }
.sidebar .nav [data-space="clients"] { --ic: #e0463a; } .sidebar .nav [data-space="ext"] { --ic: #12a08f; }
.sidebar .nav [data-space="brain"] { --ic: #b7791f; }
.sidebar .nav button[data-space] > svg, .sidebar .nav button[data-space].active > svg { color: var(--ic, var(--ink-2)); }
:root[data-theme="dark"] .sidebar .nav button[data-space] > svg { color: color-mix(in srgb, var(--ic, var(--ink-2)) 72%, #fff); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sidebar .nav button[data-space] > svg { color: color-mix(in srgb, var(--ic, var(--ink-2)) 72%, #fff); }
}
.sidebar .nav button[data-space] > span:not(.badge):not(.dot) { min-width: 0; overflow-wrap: anywhere; }

/* riquadro del computer: se la barra è stretta la CPU va sotto il nome del modello, mai sopra la freccetta */
.sys-box { container-type: inline-size; }
.sys-box .sys-head strong { min-width: 0; }
.sys-mini { flex: 0 0 auto; }
.sys-chev { order: 2; }
@container (max-width: 15.5rem) {
  .sys-box .sys-head { flex-wrap: wrap; }
  .sys-box .sys-head strong { flex: 1 1 0; }
  .sys-box.collapsed .sys-mini { order: 3; flex-basis: 100%; padding-left: 1.05rem; white-space: normal; margin-top: 0; }
}
.sidebar .nav { min-width: 0; max-width: 100%; }
.sidebar .nav button[data-space] { min-width: 0; max-width: 100%; }

/* utenti e permessi: quello che non si può usare non si vede */
.perm-hidden { display: none !important; }
.company-card.no-click { pointer-events: none; }
.link-btn { background: none; border: 0; box-shadow: none; padding: .2rem 0; min-height: 0; color: var(--accent); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; justify-self: center; }
.login-note { display: grid; gap: .6rem; padding: .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); font-size: var(--fs-base); }
.login-note p { margin: 0; }
.login-qr { display: grid; place-items: center; }
.login-qr svg { width: min(12rem, 70vw); height: auto; background: #fff; padding: .5rem; border-radius: var(--radius); }
.error.ok-text { color: var(--ok, #17a34a); }

/* Impostazioni › Utenti e permessi */
.us-head { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.us-head h3 { margin: 0 0 .3rem; }
.us-head .hint { margin: 0; max-width: 46rem; }
.us-head-acts { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.us-head-acts button svg { width: var(--ic-sm); height: var(--ic-sm); }
#us-body { margin-top: .9rem; }
.us-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .9rem; }
.us-card { display: grid; gap: .6rem; align-content: start; }
.us-card.off { opacity: .6; }
.us-card.owner { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.us-top { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.us-av { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: var(--fs-md);
  color: #fff; background: linear-gradient(150deg, hsl(var(--h) 62% 52%), hsl(calc(var(--h) + 30) 58% 40%)); }
.us-id { display: grid; min-width: 0; flex: 1; }
.us-id strong, .us-id .meta { overflow-wrap: anywhere; }
.us-kind { flex: none; font-size: var(--fs-xs); font-weight: 600; padding: .15rem .55rem; border-radius: var(--radius); background: var(--surface-2);
  color: var(--ink-2); border: 1px solid var(--line); }
.us-kind.pending { background: color-mix(in srgb, var(--c-amber, #d98a0b) 16%, transparent); color: var(--c-amber, #b36b00); border-color: transparent; }
.us-kind.approved { background: color-mix(in srgb, #17a34a 14%, transparent); color: #128a3e; border-color: transparent; }
.us-kind.denied { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); border-color: transparent; }
.us-perms { display: flex; flex-wrap: wrap; gap: .3rem; }
.us-chip { font-size: var(--fs-xs); padding: .12rem .5rem; border-radius: var(--radius); border: 1px solid var(--line); color: var(--ink-2); }
.us-chip.edit { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 600; }
.us-chip.more { font-weight: 600; }
.us-state { margin: 0; font-size: var(--fs-sm); }
.us-card .btn-row { margin: 0; }
.us-card .btn-row svg { width: var(--ic-xs); height: var(--ic-xs); }
.us-empty { display: grid; gap: .6rem; justify-items: start; grid-column: 1 / -1; }
.us-card { min-width: 0; }
#us-sheet .sheet-card { width: min(52rem, 100%); }
.us-h { margin: 1.2rem 0 .5rem; font-size: var(--fs-md); }
.us-h .meta { font-weight: 400; }
.us-sec { gap: .55rem; }
.us-active { align-self: end; margin-bottom: .4rem; }
.us-mailboxes { display: grid; gap: .25rem; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.us-mailboxes > label:first-child { font-weight: 600; font-size: var(--fs-base); }
#us-form-foot .ed-grow { flex: 1; }
#us-form-msg { color: var(--danger); }
.us-acc svg { width: var(--ic-xs); height: var(--ic-xs); }
.us-reqs { display: grid; gap: .7rem; }
.us-req { display: grid; gap: .5rem; }
.us-req.pending { border-color: color-mix(in srgb, var(--c-amber, #d98a0b) 45%, var(--line)); }
.us-q { margin: 0; font-size: var(--fs-md); }
.us-req textarea { width: 100%; }
.us-req .btn-row { margin: 0; align-items: center; }
.us-req .btn-row svg { width: var(--ic-xs); height: var(--ic-xs); }
.us-audit { display: grid; gap: .6rem; }
.us-audit-bar { display: flex; gap: .5rem; flex-wrap: wrap; }
.us-audit-bar select { width: auto; min-width: 12rem; }
.us-audit-bar input { flex: 1; min-width: 12rem; }
.us-audit-list { display: grid; }
.us-log { display: grid; grid-template-columns: 9.5rem 9rem minmax(0, 1fr) auto; gap: .6rem; align-items: baseline; padding: .4rem .2rem;
  border-bottom: 1px solid var(--line); font-size: var(--fs-base); }
.us-log.ko .us-log-s { color: var(--danger); font-weight: 600; }
.us-log-t { color: var(--muted); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }
.us-log-a { min-width: 0; overflow-wrap: anywhere; }
.us-log code { font-size: var(--fs-sm); }
#acc-who .us-top { margin-bottom: .3rem; }
@media (max-width: 700px) {
  .us-log { grid-template-columns: 1fr auto; gap: .15rem .6rem; }
  .us-log-t { grid-column: 1 / -1; }
  .us-log-a { grid-column: 1 / -1; }
  .us-head-acts { width: 100%; }
  .us-head-acts .seg { flex: 1; }
  .us-head-acts .seg button { flex: 1; }
}
@media (min-width: 861px) { .set-pane[data-pane="users"]:not(.hidden) { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; } }
:root { --c-team: #0e7490; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-team: #5fd3e8; } }
:root[data-theme="dark"] { --c-team: #5fd3e8; }

/* ---------------------------------------------------------------- chat rapida */
.cp-assistant { --ic: var(--accent); --ic2: color-mix(in srgb, var(--accent) 55%, var(--c-ai, #7457e8)); }
.qc-body { flex: 1; min-height: 0; display: flex; flex-direction: column; background: color-mix(in srgb, var(--ic) 4%, var(--ground)); }
.qc-body .chat-main { flex: 1; min-height: 0; display: flex; flex-direction: column; width: 100%; max-width: none; }
.qc-body .chat-head { display: none; }                 /* titolo e azioni sono nell'intestazione del popup */
/* dentro il popup niente margini della pagina Chat (sul telefono lasciano spazio alla barra in basso): la casella
   sta in fondo al popup, come in WhatsApp */
.qc-body .chat-main { padding: .3rem .55rem .55rem; gap: .45rem; }
.qc-body .chat-log { flex: 1; min-height: 0; overflow-y: auto; padding: .4rem .35rem .5rem; gap: 1rem; }
.qc-body .composer { margin: 0; width: 100%; }
.qc-body .empty-chat .quick, .qc-body .empty-chat .chips { justify-content: center; }
/* computer: la barra per le domande veloci, una pillola di vetro che esce dalla G in basso a destra (alla sua sinistra,
   alla sua altezza: app.js la mette lì) e ci rientra; sopra la pagina, non la sposta */
.qc-bar { --qc-glass: color-mix(in srgb, var(--surface, #fff) 62%, transparent); --qc-rim: rgba(255, 255, 255, .78);
  --qc-ink: #0B1220; --qc-on-ink: #fff;
  position: fixed; z-index: 58; left: auto; right: 5.2rem; bottom: 1rem; width: var(--qc-w, 540px); height: 3.25rem;
  display: flex; align-items: center; gap: .45rem; padding: .3rem; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(105deg, rgba(125, 211, 252, .16), rgba(47, 107, 255, .07) 55%, rgba(255, 255, 255, 0)), var(--qc-glass);
  backdrop-filter: blur(22px) saturate(1.7); -webkit-backdrop-filter: blur(22px) saturate(1.7);
  border: 1px solid var(--qc-rim);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(17, 20, 40, .06), 0 14px 32px -16px rgba(20, 38, 92, .34);
  transition: border-color .2s, box-shadow .2s; }
.qc-bar.hidden { display: none; }
.qc-bar:focus-within { border-color: color-mix(in srgb, #2F6BFF 42%, var(--qc-rim));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 0 3px color-mix(in srgb, #38BDF8 22%, transparent), 0 14px 32px -16px rgba(20, 38, 92, .34); }
.qc-bar input { flex: 1; min-width: 0; height: 2.6rem; min-height: 0; border: 0; background: transparent; box-shadow: none;
  padding: 0 .35rem; font-size: var(--fs-md); color: var(--ink); }
.qc-bar input::placeholder { color: color-mix(in srgb, var(--ink) 48%, transparent); }
.qc-bar input:focus { outline: none; box-shadow: none !important; }   /* l'anello è della pillola, non della casella */
.qc-plus, .qc-bar .qc-send { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; min-height: 0; padding: 0;
  border-radius: var(--radius); cursor: pointer; transition: background .18s, color .18s, transform .18s; }
.qc-plus { color: var(--ink-2, #5B6070); background: color-mix(in srgb, var(--surface, #fff) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--line, #E6E8F0) 80%, transparent); }
.qc-plus:hover { color: #2F6BFF; background: var(--surface, #fff); }
.qc-plus svg { width: var(--ic-md); height: var(--ic-md); }
.qc-bar .qc-send { border: 0; color: var(--qc-on-ink); background: var(--qc-ink); box-shadow: 0 6px 14px -6px rgba(11, 18, 32, .55); }
.qc-bar .qc-send:hover { background: #2F6BFF; color: #fff; }
.qc-bar .qc-send:active, .qc-plus:active { transform: scale(.94); }
.qc-bar .qc-send svg { width: var(--ic-sm); height: var(--ic-sm); }
.qc-bar .qc-ic-send, .qc-bar.has-text .qc-ic-mic { display: none; }
.qc-bar.has-text .qc-ic-send { display: block; }
.qc-bar input:focus-visible { outline: none; }
.qc-bar button:focus-visible { outline: 2px solid #38BDF8; outline-offset: 2px; }
:root[data-theme="dark"] .qc-bar { --qc-glass: color-mix(in srgb, #30302e 72%, transparent); --qc-rim: rgba(255, 255, 255, .11);
  --qc-ink: #faf9f5; --qc-on-ink: #1f1e1d; }
:root[data-theme="dark"] .qc-bar, :root[data-theme="dark"] .qc-bar:focus-within { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 48px -18px rgba(0, 0, 0, .7); }
:root[data-theme="dark"] .qc-bar:focus-within { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 0 3px rgba(56, 189, 248, .22), 0 24px 48px -18px rgba(0, 0, 0, .7); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .qc-bar { --qc-glass: color-mix(in srgb, #30302e 72%, transparent); --qc-rim: rgba(255, 255, 255, .11);
    --qc-ink: #faf9f5; --qc-on-ink: #1f1e1d; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 48px -18px rgba(0, 0, 0, .7); }
  :root:not([data-theme="light"]) .qc-bar:focus-within { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 0 3px rgba(56, 189, 248, .22), 0 24px 48px -18px rgba(0, 0, 0, .7); }
}
/* telefono: il pulsante «Chiedi» al centro della barra in basso apre la chat sopra la pagina */
@media (max-width: 860px) {
  .qc-bar { display: none !important; }
  .bottombar { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }   /* tante colonne quante voci */
  .qc-body .chat-main { padding: .25rem .4rem .45rem; }
  body.qc-on .chat-dock { display: none; }
}
.bottombar .bb-chat { color: var(--ink); font-weight: 600; }
.bb-chat-ico { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; margin-top: -1.5rem; border-radius: var(--radius); color: #fff;
  background: linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--c-ai, #7457e8)));
  box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 0 4px var(--surface); }
.bottombar .bb-chat .bb-chat-ico svg { width: var(--ic-md); height: var(--ic-md); margin: 0; padding: 0; color: #fff; }
.bottombar .bb-chat.qc-open .bb-chat-ico { transform: scale(.94); filter: brightness(1.1);
  box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px color-mix(in srgb, var(--accent) 35%, transparent); }

/* Editor › Strumenti */
#ed-tools { position: relative; }
.et-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); gap: .9rem; align-items: start; }
.et-card { display: grid; gap: .7rem; align-content: start; min-width: 0; }
.et-head { display: flex; gap: .7rem; align-items: flex-start; }
.et-head h3 { margin: 0 0 .15rem; font-size: var(--fs-lg); }
.et-head .hint { margin: 0; }
.et-ico { flex: none; width: 2.4rem; height: 2.4rem; border-radius: var(--radius); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.et-ico svg { width: var(--ic-md); height: var(--ic-md); }
.et-picks, .et-presets { display: flex; flex-wrap: wrap; gap: .4rem; }
.et-compare { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.et-compare figure { margin: 0; display: grid; gap: .25rem; }
.et-compare img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line); }
.et-checker img { background: repeating-conic-gradient(#d9dde2 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
.et-compare figcaption { font-size: var(--fs-xs); color: var(--muted); text-align: center; }
#et-ocr-text { width: 100%; font: var(--fs-base)/1.5 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; resize: vertical; }
.et-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; }
.et-row label { display: grid; gap: .2rem; font-size: var(--fs-sm); flex: 1 1 6rem; min-width: 0; }
.et-row input, .et-row select { width: 100%; }
#et-dl-form input { flex: 1 1 14rem; }
.et-list { display: grid; gap: .4rem; }
.et-card .btn-row { margin: 0; }
.et-rs-form { display: grid; gap: .5rem; }
.ed-rmbg { margin-top: .3rem; width: 100%; justify-content: center; }
.ed-rmbg svg { width: var(--ic-sm); height: var(--ic-sm); }

/* ---------------------------------------------------------------- lavori in corso, visibili in ogni pagina */
.work-line { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 96; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent), transparent) no-repeat; background-size: 40% 100%;
  animation: work-slide 1.5s ease-in-out infinite; }
@keyframes work-slide { from { background-position: -60% 0; } to { background-position: 160% 0; } }
/* computer: una linguetta appesa al bordo in alto (sta nel margine sopra i titoli, non copre i pulsanti);
   telefono: al centro della barra in alto, al posto del logo */
.work-pill { position: fixed; z-index: 57; transform: translateX(-50%); display: flex; align-items: center; gap: .45rem; width: max-content;
  max-width: min(30rem, calc(100vw - 32px)); height: auto; min-height: 1.571rem; padding: .143rem .857rem .143rem .571rem; border-radius: 0 0 var(--radius) var(--radius);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-top: 0; background: var(--surface); color: var(--ink);
  box-shadow: 0 10px 24px -16px rgba(10, 20, 40, .5); font-size: var(--fs-sm); line-height: 1.2; cursor: pointer; text-align: left;
  animation: work-in .25s ease-out; }
@media (max-width: 860px) {
  .work-pill { height: auto; min-height: 2rem; border-radius: var(--radius); border-top: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
    max-width: calc(100vw - 13.5rem); padding: .143rem .714rem .143rem .5rem; font-size: var(--fs-base); transform: translate(-50%, -50%); animation: none; }
  body.work-on:not(.work-below) .topbar .tb-brand { visibility: hidden; }
  /* non ci sta fra le icone (notify.js, workPlace): subito sotto la barra, larga quanto la pagina, mai tagliata */
  .work-pill.below { transform: translateX(-50%); max-width: calc(100vw - 24px); }
  html:not(.c-shell) body.work-on.work-below main > .tab.tab:not(.tab-chat):not(.tab-embed) { padding-top: calc(1.1rem + var(--work-h, 2.5rem)); }
}
.work-pill:hover { border-color: var(--accent); }
.work-spin { flex: none; width: .929rem; height: .929rem; border-radius: 50%; border: 2px solid var(--accent-soft);
  border-top-color: var(--accent); animation: spin .9s linear infinite; }
.work-label { min-width: 0; overflow-wrap: anywhere; }
.work-more { flex: none; font-weight: 700; color: var(--accent); }
.work-more:empty { display: none; }
.work-pill.hidden, .work-line.hidden { display: none; }
@keyframes work-in { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .work-line, .work-pill { animation: none; } .work-line { background-size: 100% 100%; opacity: .6; } }

/* chat rapida chiusa mentre l'assistente risponde: lo si vede sulla barra e sul pulsante; a risposta pronta, il puntino */
.qc-bar.qc-busy .qc-send { position: relative; overflow: visible; }
.qc-bar.qc-busy .qc-send::after, .bb-chat.qc-busy .bb-chat-ico::after { content: ""; position: absolute; inset: -4px;
  border-radius: 50%; border: 2px solid transparent; border-top-color: var(--accent); border-right-color: var(--accent);
  animation: spin .9s linear infinite; pointer-events: none; }
.bb-chat.qc-busy .bb-chat-ico { position: relative; }
.qc-bar .qc-status { flex: none; font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.qc-bar .qc-status:empty { display: none; }
.qc-bar.qc-new .qc-send, .bb-chat.qc-new .bb-chat-ico { position: relative; }
.qc-bar.qc-new .qc-send::before, .bb-chat.qc-new .bb-chat-ico::before { content: ""; position: absolute; top: -2px; right: -2px;
  width: .6rem; height: .6rem; border-radius: 50%; background: var(--danger); border: 2px solid var(--surface); }

/* Collegamenti: le sottosezioni (Email, chat e notifiche · Social) */
.set-pane[data-pane="links"] > .links-tabs { grid-column: 1 / -1; justify-self: center; justify-content: center; max-width: 100%; }
.set-pane[data-pane="links"] > .links-social { grid-column: 1 / -1; display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.set-pane[data-pane="links"] > .links-social.hidden { display: none; }
.set-pane[data-pane="links"].links-social-on > :not(.links-tabs):not(.links-social) { display: none; }
.links-social > .hint { margin: 0; }

/* ---------------------------------------------------------------- Editor immagini (editor-image.js) */
.ix-top { display: flex; align-items: center; gap: .5rem .75rem; flex-wrap: wrap; padding: .5rem .7rem; }
.ix-group { display: flex; align-items: center; gap: .3rem; }
.ix-group + .ix-group:not(.ed-grow) { padding-left: .75rem; border-left: 1px solid var(--line); }
.ix-top .ed-grow + .ix-group { border-left: 0; padding-left: 0; }
.ix-top select { width: auto; max-width: 18rem; min-height: 2.3rem; }
.ix-top .icon-btn { width: 2.3rem; height: 2.3rem; font-size: var(--fs-lg); font-weight: 700; }
.ix-top .icon-btn:disabled { opacity: .35; }
.ix-top button svg { width: var(--ic-sm); height: var(--ic-sm); }
.ix-tog { min-height: 2.1rem; padding: .3rem .65rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  color: var(--ink); font-size: var(--fs-sm); font-weight: 600; box-shadow: none; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; }
.ix-tog:hover { border-color: var(--line-strong); }
.ix-tog.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.ix-work { --ixh: calc(100dvh - 12.8rem); display: grid; grid-template-columns: 4.6rem 19rem minmax(0, 1fr) 18.5rem; gap: .75rem;
  height: var(--ixh); min-height: 30rem; position: relative; }
.ix-rail { display: flex; flex-direction: column; gap: .25rem; }
.ix-rail button { display: grid; justify-items: center; gap: .25rem; padding: .6rem .2rem; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink-2); font-size: var(--fs-xs); font-weight: 600; box-shadow: none; min-height: 0; }
.ix-rail button svg { width: var(--ic-md); height: var(--ic-md); }
.ix-rail button:hover { background: var(--surface-2); color: var(--ink); }
.ix-rail button.on { background: var(--accent-soft); color: var(--accent); }
.ix-panel, .ix-props { position: relative; padding: .9rem; overflow: auto; min-width: 0; min-height: 0; scrollbar-width: thin; }
.ix-panel-x { display: none; position: absolute; top: .5rem; right: .5rem; width: 2rem; height: 2rem; z-index: 2; }
.ix-ph { margin-bottom: .7rem; }
.ix-ph h3 { margin: 0; font-size: var(--fs-md); }
.ix-ph .hint { margin: .25rem 0 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.4; }
.ix-panel h4, .ix-props h4 { margin: 1rem 0 .45rem; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ix-panel .hint, .ix-props .hint { font-size: var(--fs-sm); color: var(--muted); margin: .45rem 0; line-height: 1.4; }
.ix-stage { position: relative; display: grid; place-items: center; overflow: auto; min-width: 0; min-height: 0; border-radius: var(--radius);
  background: repeating-conic-gradient(color-mix(in srgb, var(--ink) 6%, transparent) 0 25%, transparent 0 50%) 0 0 / 22px 22px, var(--surface-2); }
.ix-stage .ed-canvas-wrap { box-shadow: 0 20px 55px rgba(0, 0, 0, .25); line-height: 0; }
.ix-float { position: absolute; z-index: 5; display: flex; gap: .15rem; padding: .25rem; border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--line); box-shadow: 0 10px 30px -10px rgba(10, 20, 40, .45); }
.ix-float.hidden, .ix-float .hidden { display: none; }
.ix-float button { min-height: 2rem; min-width: 2rem; padding: .2rem .45rem; border: 0; background: transparent; box-shadow: none; border-radius: var(--radius);
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.ix-float button:hover { background: var(--surface-2); }
.ix-float button.danger { color: var(--danger); }
.ix-float svg { width: var(--ic-sm); height: var(--ic-sm); }
/* pannello: modelli */
.ix-chips { margin-bottom: .7rem; }
.ix-tpls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.ix-tpl { display: grid; gap: .3rem; padding: .3rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  box-shadow: none; min-height: 0; align-content: start; }
.ix-tpl:hover { border-color: var(--accent); transform: translateY(-1px); }
.ix-tpl img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: var(--radius); background: var(--surface-2); display: block; }
.ix-tpl span { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); line-height: 1.2; text-align: center; }
/* pannello: testo */
.ix-list { display: grid; gap: .4rem; }
.ix-row { display: flex; align-items: center; gap: .55rem; width: 100%; justify-content: flex-start; text-align: left; padding: .6rem .75rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: none; color: var(--ink); min-height: 0; font-size: var(--fs-base); }
.ix-row:hover { border-color: var(--accent); }
.ix-row svg { width: var(--ic-sm); height: var(--ic-sm); flex: none; color: var(--accent); }
.ix-row.busy, .ix-stock-item.busy { opacity: .5; pointer-events: none; }
.ix-t1 { font-size: var(--fs-xl); font-weight: 700; font-family: Poppins, var(--ff, sans-serif); }
.ix-t2 { font-size: var(--fs-lg); font-weight: 700; font-family: Poppins, var(--ff, sans-serif); }
.ix-t3 { font-size: var(--fs-base); }
.ix-t5 { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-size: var(--fs-md); }
.ix-t6 { font-size: var(--fs-xs); color: var(--muted); }
.ix-duo { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.ix-t4 { justify-content: center; background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #fff); border-radius: var(--radius); font-weight: 700; }
.ix-t7 { justify-content: center; background: #e5484d; border-color: #e5484d; color: #fff; font-weight: 700; letter-spacing: .08em; font-size: var(--fs-xs); }
.ix-combos { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.ix-combo { display: grid; gap: .15rem; justify-items: center; align-content: center; padding: .6rem .3rem; min-height: 5rem; border: 1px solid var(--line);
  border-radius: var(--radius); background: #fff; box-shadow: none; overflow: hidden; }
.ix-combo:hover { border-color: var(--accent); }
.ix-combo span { font-size: var(--fs-xl); line-height: 1.05; max-width: 100%; overflow-wrap: anywhere; }
.ix-combo small { font-size: var(--fs-xs); line-height: 1.1; max-width: 100%; overflow-wrap: anywhere; }
.ix-fontgroup { display: grid; gap: .2rem; margin-bottom: .6rem; }
.ix-sub { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); margin: .2rem 0; }
.ix-font { text-align: left; justify-content: flex-start; padding: .45rem .6rem; min-height: 0; border: 1px solid transparent; border-radius: var(--radius);
  background: transparent; box-shadow: none; font-size: var(--fs-lg); color: var(--ink); }
.ix-font:hover { background: var(--surface-2); border-color: var(--line); }
/* pannello: elementi */
.ix-shapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
.ix-shape { display: grid; place-items: center; aspect-ratio: 1; padding: .4rem; min-height: 0; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: none; }
.ix-shape:hover { border-color: var(--accent); }
.ix-sh { display: block; width: 2.3rem; height: 2.3rem; background: var(--c); }
.ix-sh-rect { height: 1.6rem; } .ix-sh-round { height: 1.7rem; border-radius: var(--radius); } .ix-sh-pill { height: 1.1rem; border-radius: var(--radius); }
.ix-sh-circle { border-radius: 50%; } .ix-sh-ellipse { height: 1.5rem; border-radius: 50%; }
.ix-sh-triangle { clip-path: polygon(50% 0, 100% 100%, 0 100%); } .ix-sh-diamond { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.ix-sh-hexagon { clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
.ix-sh-star { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.ix-sh-burst { background: #ffcf3a; clip-path: polygon(50% 0, 58% 18%, 75% 7%, 75% 26%, 93% 25%, 82% 42%, 100% 50%, 82% 58%, 93% 75%, 75% 74%, 75% 93%, 58% 82%, 50% 100%, 42% 82%, 25% 93%, 25% 74%, 7% 75%, 18% 58%, 0 50%, 18% 42%, 7% 25%, 25% 26%, 25% 7%, 42% 18%); }
.ix-sh-heart { clip-path: path("M 18 33 C 7 26 0 18 0 11 C 0 4.4 5 0 11 0 C 14.6 0 16.8 2.2 18 5 C 19.2 2.2 21.4 0 25 0 C 31 0 36 4.4 36 11 C 36 18 29 26 18 33 Z"); width: 36px; height: 33px; }
.ix-sh-bubble { border-radius: var(--radius); clip-path: polygon(0 0, 100% 0, 100% 75%, 40% 75%, 22% 100%, 25% 75%, 0 75%); }
.ix-sh-arrow { clip-path: polygon(0 35%, 60% 35%, 60% 10%, 100% 50%, 60% 90%, 60% 65%, 0 65%); }
.ix-sh-chevron { clip-path: polygon(0 0, 60% 0, 100% 50%, 60% 100%, 0 100%, 40% 50%); }
.ix-sh-plus { clip-path: polygon(35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%); }
.ix-sh-band { height: .7rem; width: 2.6rem; }
.ix-lines { display: grid; gap: .35rem; }
.ix-ln { display: inline-block; width: 2.6rem; height: 0; border-top: 3px solid var(--ink); flex: none; }
.ix-ln-dashed { border-top-style: dashed; } .ix-ln-dotted { border-top-style: dotted; border-top-width: 4px; }
.ix-ln-arrowline { position: relative; } .ix-ln-arrowline::after { content: ""; position: absolute; right: -2px; top: -7px; border: 5.5px solid transparent; border-left: 8px solid var(--ink); }
.ix-frames { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .35rem; }
.ix-frame { display: grid; justify-items: center; gap: .2rem; padding: .35rem .15rem; min-height: 0; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: none; }
.ix-frame small { font-size: var(--fs-2xs); color: var(--muted); }
.ix-fr { display: block; width: 2rem; height: 2rem; background: linear-gradient(135deg, var(--accent-soft), var(--accent)); }
.ix-fr-round { border-radius: var(--radius); } .ix-fr-circle { border-radius: 50%; } .ix-fr-arch { border-radius: var(--radius) var(--radius) 0 0; height: 2.3rem; }
.ix-fr-wide { height: 1.3rem; margin: .35rem 0; }
.ix-emoji { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .2rem; }
.ix-emoji button { font-size: var(--fs-xl); aspect-ratio: 1; min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none; border-radius: var(--radius); }
.ix-emoji button:hover { background: var(--surface-2); }
/* pannello: foto stock */
.ix-stock-form { display: flex; gap: .35rem; }
.ix-stock-form input { flex: 1; min-width: 0; }
.ix-stock { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; margin-top: .6rem; }
.ix-stock > p { grid-column: 1 / -1; }
.ix-stock-item { position: relative; padding: 0; min-height: 0; border: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 1; box-shadow: none; background: var(--surface-2); }
.ix-stock-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ix-stock-item span { position: absolute; left: .25rem; bottom: .25rem; padding: .05rem .35rem; border-radius: var(--radius); background: rgba(0, 0, 0, .6); color: #fff; font-size: var(--fs-2xs); }
/* pannello: sfondo */
.ix-swatches { display: flex; flex-wrap: wrap; gap: .35rem; }
.ix-sw { width: 2rem; height: 2rem; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid var(--line-strong); box-shadow: none; }
.ix-sw:hover { transform: scale(1.1); }
.ix-sw-g { border-radius: var(--radius); width: 2.4rem; }
.ix-mini .ix-sw { width: 1.55rem; height: 1.55rem; }
.ix-pat { width: 2.6rem; height: 2.6rem; border-radius: var(--radius); background-color: var(--accent-soft); }
.ix-pat-dots { background-image: radial-gradient(var(--accent) 18%, transparent 20%); background-size: 10px 10px; }
.ix-pat-grid { background-image: linear-gradient(var(--accent) 1px, transparent 1px), linear-gradient(90deg, var(--accent) 1px, transparent 1px); background-size: 10px 10px; }
.ix-pat-stripes { background-image: repeating-linear-gradient(45deg, var(--accent) 0 3px, transparent 3px 9px); }
.ix-pat-check { background-image: repeating-conic-gradient(var(--accent) 0 25%, transparent 0 50%); background-size: 12px 12px; }
.ix-gradbox { display: grid; grid-template-columns: auto auto 1fr; gap: .4rem; align-items: center; margin-top: .6rem; }
.ix-gradbox input[type=color] { width: 2.4rem; height: 2rem; padding: .1rem; border-radius: var(--radius); }
.ix-gradbox .ix-field { grid-column: 1 / -1; }
.ix-gradbox button { grid-column: 1 / -1; }
/* pannello: livelli */
.ix-layers { display: grid; gap: .3rem; }
.ix-layer { display: flex; align-items: center; gap: .15rem; border: 1px solid var(--line); border-radius: var(--radius); padding: .15rem .2rem; background: var(--surface); }
.ix-layer.on { border-color: var(--accent); background: var(--accent-soft); }
.ix-layer.off .ix-lname { opacity: .45; }
.ix-lico { width: 1.6rem; flex: none; text-align: center; font-weight: 700; color: var(--muted); font-size: var(--fs-sm); }
.ix-lname { flex: 1; min-width: 0; text-align: left; justify-content: flex-start;
  border: 0; background: transparent; box-shadow: none; padding: .35rem .2rem; min-height: 0; font-size: var(--fs-sm); color: var(--ink); overflow-wrap: anywhere; }
.ix-layer .icon-btn { width: 1.8rem; height: 1.8rem; font-size: var(--fs-sm); flex: none; }
.ix-layer .icon-btn svg { width: var(--ic-xs); height: var(--ic-xs); }
/* proprietà (a destra) */
.ix-sec { border-top: 1px solid var(--line); }
.ix-sec:first-of-type { border-top: 0; }
.ix-sec > summary { list-style: none; cursor: pointer; padding: .65rem 0; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-2); display: flex; align-items: center; justify-content: space-between; }
.ix-sec > summary::-webkit-details-marker { display: none; }
.ix-sec > summary::after { content: "›"; font-size: var(--fs-lg); transform: rotate(90deg); transition: transform .15s; color: var(--muted); }
.ix-sec:not([open]) > summary::after { transform: rotate(0); }
.ix-secb { padding-bottom: .8rem; display: grid; gap: .5rem; }
.ix-field { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .25rem .5rem; font-size: var(--fs-sm); color: var(--ink-2); min-width: 0; }
.ix-field > span { min-width: 0; overflow-wrap: anywhere; }
.ix-field input[type=color] { width: 2.4rem; height: 2rem; padding: .1rem; border-radius: var(--radius); }
.ix-field.ix-col { grid-template-columns: 1fr; }
.ix-field select { width: 100%; min-height: 2.2rem; }
.ix-range output { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.ix-range input { grid-column: 1 / -1; width: 100%; }
.ix-two { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .7rem; align-items: end; }
.ix-btns { display: flex; flex-wrap: wrap; gap: .3rem; }
.ix-btns .ix-tog { flex: 1 1 auto; }
.ix-seg { flex-wrap: nowrap; }
.ix-al span { display: block; width: 1rem; height: .75rem; background: linear-gradient(currentColor 0 0) 0 0 / 100% 2px no-repeat,
  linear-gradient(currentColor 0 0) 0 50% / 60% 2px no-repeat, linear-gradient(currentColor 0 0) 0 100% / 85% 2px no-repeat; }
.ix-al-center span { background-position: 50% 0, 50% 50%, 50% 100%; }
.ix-al-right span { background-position: 100% 0, 100% 50%, 100% 100%; }
.ix-al-justify span { background-size: 100% 2px; }
.ix-fx { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .3rem; }
.ix-fxb { display: grid; gap: .1rem; justify-items: center; padding: .35rem .1rem; min-height: 0; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: none; }
.ix-fxb.on { border-color: var(--accent); background: var(--accent-soft); }
.ix-fxb span { font: 700 var(--fs-lg)/1.1 Poppins, sans-serif; color: #111418; }
.ix-fxb small { font-size: var(--fs-2xs); color: var(--muted); white-space: nowrap; }
.ix-fx-shadow span { text-shadow: 0 3px 5px rgba(0, 0, 0, .45); } .ix-fx-lift span { text-shadow: 2px 2px 0 var(--accent); }
.ix-fx-outline span { -webkit-text-stroke: 1.5px #111418; color: #ffcf3a; } .ix-fx-hollow span { -webkit-text-stroke: 1.2px #111418; color: transparent; }
.ix-fx-neon span { color: #fff; text-shadow: 0 0 4px var(--accent), 0 0 9px var(--accent); background: #111418; border-radius: var(--radius); padding: 0 .15rem; }
.ix-fx-echo span { text-shadow: 3px 2px 0 rgba(236, 72, 153, .6); } .ix-fx-box span { background: var(--accent); color: #fff; padding: 0 .2rem; border-radius: var(--radius); }
.ix-fx-highlight span { background: #ffe066; padding: 0 .15rem; } .ix-fx-gradient span { background: linear-gradient(135deg, var(--accent), #7b2ff7); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ix-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
.ix-pre { display: grid; gap: .15rem; padding: .2rem; min-height: 0; border: 2px solid transparent; border-radius: var(--radius); background: transparent; box-shadow: none; }
.ix-pre img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); background: var(--surface-2); display: block; }
.ix-pre small { font-size: var(--fs-2xs); color: var(--ink-2); overflow-wrap: anywhere; }
.ix-pre.on { border-color: var(--accent); }
.ix-masks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
.ix-mask { display: grid; gap: .15rem; justify-items: center; padding: .35rem .1rem; min-height: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: none; }
.ix-mask.on { border-color: var(--accent); background: var(--accent-soft); }
.ix-mask span { display: block; width: 1.8rem; height: 1.8rem; background: linear-gradient(135deg, var(--accent-soft), var(--accent)); }
.ix-mask small { font-size: var(--fs-2xs); color: var(--muted); }
.ix-mask-circle span { border-radius: 50%; } .ix-mask-round span { border-radius: var(--radius); } .ix-mask-arch span { border-radius: var(--radius) var(--radius) 0 0; }
.ix-mask-hexagon span { clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
.ix-mask-star span { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.ix-mask-heart span { clip-path: path("M 14 26 C 6 20 0 14 0 8.5 C 0 3.5 4 0 8.5 0 C 11 0 13 1.5 14 4 C 15 1.5 17 0 19.5 0 C 24 0 28 3.5 28 8.5 C 28 14 22 20 14 26 Z"); }
.ix-wide { width: 100%; justify-content: center; }
.ix-wide svg { width: var(--ic-sm); height: var(--ic-sm); }
.ix-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.ix-actions button { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; padding: .4rem .3rem; font-size: var(--fs-sm); }
.ix-actions svg { width: var(--ic-xs); height: var(--ic-xs); }
.ix-actions .danger { color: var(--danger); }
.ix-props .check { display: flex; align-items: center; gap: .45rem; font-size: var(--fs-sm); margin: 0; }
.ix-keys { margin-top: 1rem !important; }
#ei-export-menu small { color: var(--muted); font-weight: 400; }
.ix-hires { display: flex; align-items: center; gap: .45rem; padding: .5rem .6rem; font-size: var(--fs-sm); border-top: 1px solid var(--line); margin-top: .2rem; }
/* finestra di scelta: Galleria o stock */
.ed-picker-src { width: 100%; }
.ed-picker-src button { flex: 1; }
.ed-picker-src.hidden { display: none; }
.ed-pick-stock.busy { opacity: .5; }
/* schermi medi: il pannello degli strumenti si apre sopra la tela */
@media (max-width: 1280px) and (min-width: 861px) {
  .ix-work { grid-template-columns: 4.6rem minmax(0, 1fr) 17rem; }
  .ix-panel { position: absolute; z-index: 8; left: 5.35rem; top: 0; bottom: 0; width: 19rem; box-shadow: 0 20px 50px -20px rgba(10, 20, 40, .45); display: none; }
  #ed-image.ix-panel-open .ix-panel { display: block; }
  .ix-panel-x { display: grid; place-items: center; }
}
/* telefono: tela in alto, strumenti in fila sotto, pannelli che si aprono dal basso */
@media (max-width: 860px) {
  .ix-top { gap: .4rem; padding: .45rem; }
  .ix-top .ix-group:first-child { flex: 1 1 100%; min-width: 0; }
  .ix-top .ix-group:first-child select { flex: 1 1 auto; min-width: 0; max-width: none; }
  .ix-top .ix-group:first-child button { flex: none; }
  .ix-group + .ix-group:not(.ed-grow) { padding-left: 0; border-left: 0; }
  .ix-zoomg { margin-left: auto; }
  .ix-top .ed-grow { display: none; }
  .ix-top .ix-group:last-child { flex: 1 1 100%; border-left: 0; padding-left: 0; }
  .ix-top .ix-group:last-child button { flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap; }
  #ei-guides { display: none; }
  .ix-work { display: flex; flex-direction: column; height: auto; min-height: 0; gap: .6rem; }
  .ix-stage { height: 56dvh; min-height: 18rem; order: 1; }
  .ix-rail { order: 2; flex-direction: row; overflow-x: auto; gap: .2rem; padding: .25rem; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); scrollbar-width: none; }
  .ix-rail button { flex: 1 0 4rem; padding: .45rem .2rem; }
  .ix-props { order: 3; overflow: visible; }
  #ed-image:not(.ix-has-sel) .ix-props { display: none; }
  .ix-panel { position: fixed; z-index: 72; left: 0; right: 0; bottom: 0; height: min(62dvh, 34rem); border-radius: var(--radius) var(--radius) 0 0;
    padding: 1rem .9rem calc(1rem + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -20px 50px -20px rgba(10, 20, 40, .5); display: none; }
  #ed-image.ix-panel-open .ix-panel { display: block; }
  .ix-panel-x { display: grid; place-items: center; position: sticky; top: 0; margin-left: auto; margin-bottom: -2rem; background: var(--surface-2); }
  .ix-tpls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ix-stock { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ix-fx { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ix-float { max-width: calc(100% - 8px); overflow-x: auto; }
}
.ix-field textarea { width: 100%; min-height: 3rem; resize: vertical; font-size: var(--fs-base); }
.ix-props select, .ix-panel select { max-width: 100%; }
.ix-field > * { min-width: 0; }

/* ---------------------------------------------------------------- Editor video (editor-video.js) */
#ed-video .ix-top select { max-width: 16rem; }
#ed-video .vd-make-g .pd-name { width: 12rem; }
.vd-work { grid-template-columns: minmax(0, 1fr) 21rem; }
.vd-side { max-height: calc(100dvh - 11rem); overflow: auto; scrollbar-width: thin; }
.vd-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.vd-tabs button { flex: 1 0 auto; padding-left: .55rem; padding-right: .55rem; font-size: var(--fs-sm); }
.vd-frame { container-type: size; }
.vd-color { position: absolute; inset: 0; }
.vd-color.hidden { display: none; }
.vd-frame.vd-vig::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55)); }
.vd-frame img { transform-origin: center; }
.vd-m-zoomin { animation: vd-zin linear forwards; } .vd-m-zoomout { animation: vd-zout linear forwards; }
.vd-m-left { animation: vd-left linear forwards; } .vd-m-right { animation: vd-right linear forwards; }
@keyframes vd-zin { from { transform: scale(1); } to { transform: scale(1.22); } }
@keyframes vd-zout { from { transform: scale(1.22); } to { transform: scale(1); } }
@keyframes vd-left { from { transform: scale(1.18) translateX(7%); } to { transform: scale(1.18) translateX(-7%); } }
@keyframes vd-right { from { transform: scale(1.18) translateX(-7%); } to { transform: scale(1.18) translateX(7%); } }
.vd-ovl { position: absolute; inset: 0; z-index: 2; }
.vd-ov { position: absolute; transform: translate(-50%, -50%); cursor: grab; touch-action: none; user-select: none; }
.vd-ov.sel { outline: 2px dashed #1f6feb; outline-offset: 3px; }
.vd-texts { z-index: 3; }
.vd-texts .vd-text { position: absolute; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); width: max-content; max-width: 84%;
  text-align: center; font-weight: 700; line-height: 1.2; pointer-events: auto; cursor: grab; touch-action: none; user-select: none;
  text-shadow: none; padding: 0; background: none; border-radius: 0; }
.vd-text.sel { outline: 2px dashed #1f6feb; outline-offset: 4px; }
.vd-text.vt-box { background: color-mix(in srgb, var(--bg) 55%, transparent); border-radius: var(--radius); padding: .25em .45em; }
.vd-text.vt-label { background: var(--bg); border-radius: var(--radius); padding: .2em .5em; }
.vd-text.vt-shadow { text-shadow: .05em .08em .12em rgba(0, 0, 0, .75); }
.vd-text.vt-outline { -webkit-text-stroke: .08em var(--bg); paint-order: stroke fill; }
.vd-text.vt-neon { color: #fff !important; text-shadow: 0 0 .15em currentColor, 0 0 .4em var(--nc, #fff); }
.vd-text.va-fade { animation: vd-afade .5s ease-out; }
.vd-text.va-slideup { animation: vd-aup .5s ease-out; }
.vd-text.va-slideleft { animation: vd-aleft .5s ease-out; }
@keyframes vd-afade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vd-aup { from { opacity: 0; transform: translate(-50%, calc(-50% + 1.2em)); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes vd-aleft { from { opacity: 0; transform: translate(calc(-50% + 2em), -50%); } to { opacity: 1; transform: translate(-50%, -50%); } }
.vd-frame.vd-snap-x::before, .vd-frame.vd-snap-y::before { content: ""; position: absolute; z-index: 4; background: #ff1f3d; pointer-events: none; }
.vd-frame.vd-snap-x::before { left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; }
.vd-frame.vd-snap-y::before { top: 50%; left: 0; right: 0; height: 2px; margin-top: -1px; }
.vd-frame.vd-snap-x.vd-snap-y::before { width: 2px; left: 50%; top: 0; bottom: 0; box-shadow: 0 0 0 0 transparent; }
/* fila delle clip con le transizioni in mezzo */
.vd-timeline { align-items: center; gap: .35rem; }
.vd-clip { flex: 0 0 8.8rem; }
.vd-clip-color { display: block; width: 100%; height: 100%; }
.vd-clip-kind { position: absolute; left: .3rem; top: .3rem; padding: .05rem .4rem; border-radius: var(--radius); background: rgba(0, 0, 0, .55); color: #fff; font-size: var(--fs-2xs); font-weight: 600; }
.vd-clip-bar .icon-btn svg { width: var(--ic-xs); height: var(--ic-xs); }
.vd-tr { flex: 0 0 4.2rem; display: grid; justify-items: center; gap: .1rem; padding: .35rem .2rem; min-height: 0; border: 1px dashed var(--line-strong);
  border-radius: var(--radius); background: var(--surface); box-shadow: none; align-self: center; margin-top: -1.6rem; }
.vd-tr.on { border-style: solid; border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.vd-tr-ico { font-size: var(--fs-lg); font-weight: 700; line-height: 1; }
.vd-tr small { font-size: var(--fs-2xs); line-height: 1.1; text-align: center; color: inherit; max-width: 4rem; overflow-wrap: anywhere; }
.vd-clip-add { flex: 0 0 5.2rem; align-self: stretch; display: grid; place-items: center; align-content: center; gap: .3rem; min-height: 5rem;
  border: 2px dashed var(--line-strong); border-radius: var(--radius); background: transparent; box-shadow: none; color: var(--muted); font-size: var(--fs-xs); margin-top: -1.6rem; }
.vd-clip-add svg { width: var(--ic-md); height: var(--ic-md); }
.vd-clip-add:hover { border-color: var(--accent); color: var(--accent); }
#vd-tr-menu { width: 17rem; max-height: min(70dvh, 30rem); overflow: auto; }
.vd-tr-head { margin: .2rem .4rem .4rem; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
#vd-tr-menu button.on { background: var(--accent-soft); color: var(--accent); }
.vd-tr-demo { width: 1.6rem; height: 1.1rem; border-radius: var(--radius); flex: none; background: linear-gradient(90deg, #2a9d8f 50%, #f4a261 50%); }
.vd-td-none { background: #2a9d8f; border-right: 3px solid #f4a261; } .vd-td-fade, .vd-td-dissolve, .vd-td-hblur { background: linear-gradient(90deg, #2a9d8f, #f4a261); }
.vd-td-fadeblack { background: linear-gradient(90deg, #2a9d8f, #111 50%, #f4a261); } .vd-td-fadewhite { background: linear-gradient(90deg, #2a9d8f, #fff 50%, #f4a261); }
.vd-td-circleopen, .vd-td-circleclose, .vd-td-radial, .vd-td-zoomin { background: radial-gradient(circle, #f4a261 40%, #2a9d8f 42%); }
.vd-td-slideup { background: linear-gradient(180deg, #2a9d8f 50%, #f4a261 50%); } .vd-td-pixelize { background: repeating-conic-gradient(#2a9d8f 0 25%, #f4a261 0 50%) 0 0 / 6px 6px; }
.vd-tr-dur { padding: .5rem .5rem .2rem; }
#vd-tr-menu > .small { margin: .3rem .5rem .5rem; width: calc(100% - 1rem); }
/* pannello a destra */
.vd-name { margin: .1rem 0 .7rem; font-size: var(--fs-md); overflow-wrap: anywhere; }
.vd-pane { display: grid; gap: .55rem; }
.vd-pane .ix-sub { margin: .5rem 0 .1rem; }
.vd-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.vd-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; }
.vd-flt { display: grid; gap: .15rem; padding: .2rem; min-height: 0; border: 2px solid transparent; border-radius: var(--radius); background: transparent; box-shadow: none; }
.vd-flt.on { border-color: var(--accent); }
.vd-flt img, .vd-flt span { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); display: block; }
.vd-flt small { font-size: var(--fs-2xs); color: var(--ink-2); }
.vd-actions { grid-template-columns: 1fr 1fr; }
.vd-text-card { gap: .45rem; }
.vd-text-card.on { border-color: var(--accent); }
.vd-text-top { display: flex; gap: .35rem; align-items: flex-start; }
.vd-text-top textarea { flex: 1; min-width: 0; }
.vd-text-row select { flex: 1 1 7rem; min-width: 0; }
.vd-col { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--fs-sm); }
.vd-now { margin-left: auto; }
.vd-ov-top { display: flex; align-items: center; gap: .5rem; }
.vd-ov-top img { width: 2.6rem; height: 2.6rem; object-fit: contain; border-radius: var(--radius); background: var(--surface-2); }
.vd-ov-top strong { flex: 1; min-width: 0; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.vd-tpls { display: grid; gap: .5rem; }
.vd-tpl { display: flex; align-items: center; gap: .7rem; padding: .45rem; min-height: 0; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: none; text-align: left; justify-content: flex-start; }
.vd-tpl:hover { border-color: var(--accent); }
.vd-tpl-prev { flex: none; display: grid; place-items: center; width: 2.6rem; height: 4.6rem; border-radius: var(--radius); color: #fff;
  background: linear-gradient(160deg, var(--a), #111418); font-size: var(--fs-2xs); font-weight: 700; text-align: center; padding: .2rem; }
.vd-tpl-1x1 { width: 3.6rem; height: 3.6rem; } .vd-tpl-16x9 { width: 4.6rem; height: 2.6rem; }
.vd-tpl-txt { display: grid; gap: .1rem; min-width: 0; }
.vd-tpl-txt strong { font-size: var(--fs-base); }
.vd-tpl-txt small { font-size: var(--fs-xs); color: var(--muted); }
@media (max-width: 860px) {
  #ed-video .ix-top .ix-group:first-child { flex: 0 0 auto; }
  #ed-video .vd-opts { flex: 1 1 100%; display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; }
  #ed-video .vd-opts #vd-aspect { grid-column: 1 / -1; }
  #ed-video .vd-opts select { max-width: none; width: 100%; min-width: 0; }
  #ed-video .vd-make-g { flex: 1 1 100%; }
  #ed-video .vd-make-g .pd-name { flex: 1; width: auto; min-width: 0; }
  #ed-video .ix-top .ix-group:last-child button { flex: 0 0 auto; }
  .vd-side { max-height: none; overflow: visible; }
  .vd-tr { margin-top: -1.4rem; }
}
@media (max-width: 1100px) { .vd-work { grid-template-columns: minmax(0, 1fr); } .vd-side { position: static; max-height: none; overflow: visible; } }
.vd-text-row .vd-anim { flex: 1 1 100%; }

/* Editor PDF: «Altro» (spunte, forme, timbri, firma), riassunto «su tutte le pagine», modelli di documento */
#pd-more-menu { min-width: 0; width: min(24rem, calc(100vw - 1.5rem)); padding: .5rem .6rem .6rem; }
.pd-more-row { display: flex; flex-wrap: wrap; gap: .3rem; }
.pd-menu .pd-more-row button { flex: 0 0 auto; justify-content: center; min-height: 2.2rem; padding: .3rem .65rem; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface); font-size: var(--fs-base); }
.pd-menu .pd-more-row button:hover { border-color: var(--accent); background: var(--accent-soft); }
.pd-stamps button { font: 700 var(--fs-xs)/1 var(--font); letter-spacing: .08em; }
.pd-menu .pd-stamps .st-g { color: #1e8e3e; border-color: #1e8e3e; }
.pd-menu .pd-stamps .st-b { color: #1f4fbf; border-color: #1f4fbf; }
.pd-menu .pd-stamps .st-r { color: #c0392b; border-color: #c0392b; }
.pd-opts { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; padding: .55rem .8rem; }
.pd-opts.hidden { display: none; }
.pd-opts > .meta { font-size: var(--fs-sm); }
.pd-opt { display: inline-flex; align-items: stretch; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent-soft); overflow: hidden; }
.pd-opt button { border: 0; box-shadow: none; background: transparent; min-height: 1.9rem; color: var(--ink); }
.pd-opt-edit { padding: .2rem .35rem .2rem .75rem; font-size: var(--fs-sm); font-weight: 600; }
.pd-opt-off { display: grid; place-items: center; width: 1.9rem; padding: 0; }
.pd-opt-off svg { width: var(--ic-xs); height: var(--ic-xs); }
.pd-opt button:hover { background: rgba(0, 0, 0, .06); }
.pd-form { display: grid; gap: .8rem; }
.pd-form label:not(.check) { display: grid; gap: .3rem; }
.pd-form input[type=color] { height: 2.6rem; padding: .2rem; }
.pd-form input[type=range] { padding: 0; accent-color: var(--accent); min-height: 2.6rem; }
.pd-form-row { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: .8rem; align-items: end; }
.pd-form-sep { padding-top: .7rem; border-top: 1px solid var(--line); }
.pd-form .hint { margin: 0; font-size: var(--fs-sm); }
.pd-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pd-form-grid .wide { grid-column: 1 / -1; }
.pd-tpl-card { width: min(50rem, 100%); }
.pd-tpl-card .sheet-body > .meta { margin: 0 0 .9rem; }
.pd-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: .6rem; }
.pd-tpl { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .7rem; row-gap: .1rem; align-items: center;
  text-align: left; padding: .75rem .85rem; min-height: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
  box-shadow: none; white-space: normal; }
.pd-tpl:hover { border-color: var(--accent); background: var(--accent-soft); }
.pd-tpl-ico { grid-row: 1 / 3; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); }
.pd-tpl-ico svg { width: var(--ic-md); height: var(--ic-md); }
.pd-tpl strong { font-size: var(--fs-md); }
.pd-tpl .meta { font-size: var(--fs-sm); line-height: 1.3; font-weight: 400; }
.pd-tpl-h { margin: 1.2rem 0 .5rem; font-size: var(--fs-md); }
.pd-tpl-h .meta { font-weight: 400; font-size: var(--fs-sm); }
.pd-print-row { display: flex; flex-wrap: wrap; gap: .4rem; }
@media (max-width: 640px) {
  .pd-form-grid { grid-template-columns: minmax(0, 1fr); }
  .pd-tpl-grid { grid-template-columns: minmax(0, 1fr); }
}

/* anteprima a tutto schermo: la didascalia da modificare in tinta con lo sfondo scuro */
.lightbox textarea, .lightbox input[type=text] { background: rgba(255, 255, 255, .08); color: #eef1f4; border-color: rgba(255, 255, 255, .22); }
.lightbox textarea:focus { border-color: var(--accent); }
/* le miniature arrivano in fretta: mentre caricano, un fondo leggero e uniforme (niente blocchi grigi pesanti) */
.g-thumb img, .sp-media img, .pc-media img { background: transparent; }

/* l'elemento aperto da una notifica si illumina un momento, così si vede subito qual è */
@keyframes flash-item { 0%, 60% { box-shadow: 0 0 0 3px var(--accent), 0 0 0 9px color-mix(in srgb, var(--accent) 22%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; } }
.flash-item { animation: flash-item 2.4s ease-out; border-radius: var(--radius-sm); }

/* Agenti: la barra live in cima (computer: linguetta appesa al bordo, i lavori in corso scendono sotto; telefono:
   subito sotto la barra in alto) e l'ufficio a tutto schermo con i personaggi, le schede e le domande.
   Tutto nei colori del tema (chiaro o scuro). */
.agents-bar { position: fixed; z-index: 58; transform: translateX(-50%); display: flex; align-items: center; gap: .5rem; width: max-content;
  max-width: min(36rem, calc(100vw - 32px)); height: auto; min-height: 1.714rem; padding: .143rem .857rem .143rem .643rem; border-radius: 0 0 var(--radius) var(--radius);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-top: 0; background: var(--surface);
  color: var(--ink); box-shadow: 0 10px 24px -16px rgba(10, 20, 40, .5); font-size: var(--fs-sm); line-height: 1.2; cursor: pointer; text-align: left; }
.agents-bar.hidden { display: none; }
.agents-bar:hover { border-color: var(--accent); }
.ag-dots { display: inline-flex; gap: 3px; flex: none; }
.ag-dots i { width: .429rem; height: .429rem; border-radius: 50%; background: color-mix(in srgb, var(--c) 35%, var(--surface-2)); }
.ag-dots i.on { background: var(--c); box-shadow: 0 0 6px var(--c); animation: ag-pulse 1.1s ease-in-out infinite; }
@keyframes ag-pulse { 50% { transform: scale(1.5); } }
.ag-text { min-width: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.agents-bar.busy .ag-text { color: var(--ink); }
.ag-q { flex: none; font-weight: 700; color: #d97706; }
.ag-q:empty { display: none; }
@media (max-width: 860px) {
  .agents-bar { min-height: 1.571rem; font-size: var(--fs-sm); max-width: calc(100vw - 24px); }
}
@media (prefers-reduced-motion: reduce) { .ag-dots i.on { animation: none; } }

/* Agenti: «Oggi» (ti chiedono e la squadra | adesso); ufficio, sala, ragionamenti, lavori, registro e salute nelle schede */
.ag-head { align-items: center; }
.ag-head-btns { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ag-how { position: relative; }
.ag-how > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; min-height: 2.2rem; padding: 0 .85rem;
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600; }
.ag-how > summary::-webkit-details-marker { display: none; }
.ag-how > summary svg { width: var(--ic-sm); height: var(--ic-sm); color: var(--accent); }
.ag-how[open] > summary, .ag-how > summary:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); color: var(--ink); }
.ag-how-pop { position: absolute; right: 0; top: calc(100% + .45rem); z-index: 30; width: min(24rem, calc(100vw - 2rem)); padding: .85rem 1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lift, 0 12px 32px rgba(0, 0, 0, .16)); }
.ag-how-pop ol { margin: 0; padding-left: 1.15rem; display: grid; gap: .4rem; font-size: var(--fs-sm); line-height: 1.45; }
.ag-new { margin-bottom: 1rem; }
.ag-today { display: grid; gap: 1rem; align-items: start; }
.ag-today-main { display: grid; gap: 1rem; min-width: 0; align-content: start; }
.ag-today > .panel, .ag-today-main > .panel { padding: .2rem 1rem 1rem; min-width: 0; }
.ag-q-none { margin: 0 0 .2rem; }
#ag-questions:has(.ag-qa:not(.hidden)) + .ag-q-none { display: none; }
.ag-pane.ag-office:not(.hidden) { display: grid; gap: 1rem; }
.ag-office > .panel.ag-team { padding: .2rem 1rem 1rem; }
.ag-pane.ag-today { padding: 0; }
#gov-card { margin-top: 1.2rem; padding-top: .3rem; border-top: 1px solid var(--line); }
.ag-all { margin-top: .7rem; font-size: var(--fs-sm); }
@media (min-width: 1100px) {
  .ag-today { grid-template-columns: minmax(0, 1.5fr) minmax(19rem, 1fr); }
  .ag-now-panel { position: sticky; top: 1rem; }
  /* nelle altre schede i contenuti si dividono su due colonne */
  .ag-pane:not(.ag-today) .ag-rs, .ag-pane .ag-work, .ag-pane:not(.ag-today) .ag-log, .ag-pane .ag-asks, .ag-hgroups {
    grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.2rem; align-items: start; }
  .ag-pane .ag-rs > :not(.ag-rs-item) { grid-column: 1 / -1; }
}
.ag-hgroups { display: grid; gap: .4rem 1.2rem; }
.ag-answered-box { margin-top: 1rem; }
.ag-answered-box > summary { cursor: pointer; }
.ag-asks-box { margin-bottom: .4rem; }
.ag-stage { position: relative; width: 100%; min-width: 0; min-height: 200px; height: auto; aspect-ratio: 3 / 1; max-height: calc(100dvh - 14rem); padding: 0; overflow: hidden; margin: 0;
  background: var(--surface-2); }   /* il palazzo è largo (2 piani lunghi): il riquadro ne segue la forma */
.ag-stage.tall { aspect-ratio: 1.55 / 1; max-height: 62dvh; }   /* riquadro stretto: 3 piani, quasi quadrato */
.ag-stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; cursor: pointer; }
.ag-hint { position: absolute; left: .6rem; bottom: .5rem; font-size: var(--fs-xs); color: var(--muted); background: color-mix(in srgb, var(--surface) 85%, transparent);
  padding: .15rem .5rem; border-radius: var(--radius); pointer-events: none; }
/* la scheda del personaggio toccato: a destra nell'ufficio (sul telefono in basso) */
.ag-detail { position: fixed; top: .8rem; right: calc(3.6rem + 28px); bottom: .8rem; width: min(30rem, calc(100vw - 2rem)); display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto; background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-top: 3px solid var(--c); border-radius: var(--radius); box-shadow: var(--shadow-lift, 0 10px 30px rgba(0,0,0,.18)); overflow: hidden; z-index: 62; }
.ag-detail.hidden { display: none; }
.ag-detail header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .6rem .7rem;
  border-bottom: 1px solid var(--line); }
.ag-detail header > span:nth-child(2) { display: grid; min-width: 0; font-size: var(--fs-base); }
.ag-detail header .meta { font-size: var(--fs-xs); }
.agd-body { overflow-y: auto; overscroll-behavior: contain; padding: .6rem .8rem; font-size: var(--fs-sm); }
.agd-now { margin: 0 0 .5rem; padding: .45rem .6rem; border-radius: var(--radius); background: var(--surface-2); overflow-wrap: anywhere; }
.agd-now.on { background: color-mix(in srgb, var(--c) 14%, var(--surface)); }
.agd-now.on b { color: var(--c); }
.agd-facts { margin: 0; display: grid; gap: .35rem; }
.agd-facts div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .4rem; }
.agd-facts dt { color: var(--muted); font-size: var(--fs-xs); }
.agd-facts dd { margin: 0; overflow-wrap: anywhere; }
.ag-detail h5 { margin: .8rem 0 .35rem; font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.agd-log, .agd-rs { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.agd-log li, .agd-rs li { display: grid; gap: .1rem; padding: .3rem .45rem; border-radius: var(--radius); background: var(--surface-2); overflow-wrap: anywhere; }
.agd-rs .linkish { font-size: var(--fs-sm); text-decoration: none; font-weight: 600; color: var(--ink); padding: 0; }
.agd-now.paused { background: color-mix(in srgb, #f59e0b 14%, var(--surface)); }
.agd-manage { display: grid; gap: .5rem; }
.agd-btns { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.agd-every { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-sm); color: var(--muted); }
.agd-every select { min-height: 2rem; padding: .2rem .4rem; }
/* l'orario di lavoro degli agenti tuoi: la scelta, i giorni (le voci da sole, senza binario) e le ore con «Salva»
   sulla stessa riga, tutti alla stessa altezza (select.small e button.small, polish.css) */
.agd-hours { display: grid; gap: .45rem; justify-items: start; min-width: 0; }
.agd-hours > select { width: auto; max-width: 100%; }
.agd-hours-pick { display: grid; gap: .45rem; justify-items: start; min-width: 0; max-width: 100%; }
.agd-hours:not([data-mode="custom"]) .agd-hours-pick { display: none; }
.agd-hours .days { max-width: 100%; }
.agd-hours-time { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.agd-hours-time label { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-sm); color: var(--muted); }
/* sul telefono le caselle hanno il testo a 16 px (niente ingrandimento dell'iPhone): l'altezza resta quella dei pulsanti */
.agd-hours :is(select.small, button.small) { box-sizing: border-box; height: var(--ctl-h-sm); }
.agd-hours .meta { margin: 0; }
.agd-now.off { background: color-mix(in srgb, #64748b 12%, var(--surface)); }
.agd-resume { color: var(--ink-2); }
/* fuori orario: grigio ardesia (la pausa resta ambra), con quando riprende sotto il nome */
.ag-hours { font-size: var(--fs-xs); color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
/* nella tessera l'orario prende tutta la riga sotto il nome (anche sotto lo stato): «Riprende lunedì alle 8» intero */
.ag-card > .ag-hours { grid-column: 2 / -1; }
.ag-card:has(> .ag-hours) { row-gap: .2rem; }
.ag-card:has(> .ag-hours) > .ag-av { grid-row: span 2; }
.ag-st-off .ag-st { color: var(--ink-2); background: color-mix(in srgb, #64748b 14%, var(--surface)); }
.ag-st-off .ag-st i { background: #64748b; }
.ag-st-off .ag-av { opacity: .72; }
.agd-rules { display: grid; gap: .3rem; }
.agd-rules label { font-size: var(--fs-xs); color: var(--muted); }
.agd-rules textarea { width: 100%; min-height: 4.5rem; resize: vertical; font: inherit; font-size: var(--fs-sm); padding: .4rem .5rem; }
.agd-rules button { justify-self: start; }
.agd-manage p { margin: 0; }
.ag-detail footer { display: flex; flex-wrap: wrap; gap: .4rem; padding: .55rem .7rem; border-top: 1px solid var(--line); }
@media (max-width: 960px) {
  .ag-detail { top: auto; left: .5rem; right: .5rem; bottom: calc(.5rem + env(safe-area-inset-bottom, 0px)); width: auto; max-height: 86dvh; }
}
.ag-pane h4 { margin: .9rem 0 .55rem; font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ag-running, .ag-work, .ag-answered { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: var(--fs-sm); }
.ag-running li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .45rem; align-items: baseline; overflow-wrap: anywhere; }
.ag-running li > i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); align-self: center; animation: ag-pulse 1.1s ease-in-out infinite; }
.ag-running li.live, .ag-running li.meta { grid-template-columns: minmax(0, 1fr); }
.ag-running li > .meta:empty { display: none; }
.ag-work li button, .ag-running li button { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .5rem; align-items: baseline; padding: .4rem .5rem; border-radius: var(--radius); overflow-wrap: anywhere; }
.ag-work li button:hover, .ag-running li button:hover { background: var(--surface-2); }
.ag-spin { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; border: 2px solid var(--accent); border-right-color: transparent;
  animation: spin .9s linear infinite; }
.ag-answered li { padding: .4rem .5rem; border-radius: var(--radius); background: var(--surface-2); overflow-wrap: anywhere; }
/* la squadra: una tessera per agente (chi è, in che stato, cosa fa adesso); il resto nella sua scheda */
.ag-cards { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.ag-card { all: unset; box-sizing: border-box; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; align-items: center;
  padding: .75rem .85rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); cursor: pointer; min-width: 0;
  transition: border-color .2s, box-shadow .2s, background .2s; }
.ag-card:hover { border-color: color-mix(in srgb, var(--c) 45%, var(--line)); box-shadow: var(--shadow); }
.ag-card.sel { border-color: var(--c); box-shadow: 0 0 0 1px var(--c); background: color-mix(in srgb, var(--c) 6%, var(--surface)); }
.ag-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ag-who { display: grid; gap: .15rem; min-width: 0; }
.ag-who strong { font-size: var(--fs-md); line-height: 1.25; overflow-wrap: anywhere; }
.ag-who .ag-temp { font-style: normal; font-weight: 600; font-size: var(--fs-2xs); letter-spacing: .02em; padding: .05rem .4rem; margin-left: .3rem;
  border-radius: var(--radius); vertical-align: middle; color: #2F6BFF; background: color-mix(in srgb, #2F6BFF 12%, transparent); }
.ag-now { font-size: var(--fs-sm); color: var(--ink-2); overflow-wrap: anywhere; }
.ag-now .meta { font-size: inherit; }
.ag-st { align-self: start; display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; font-size: var(--fs-2xs); font-weight: 600;
  color: var(--muted); padding: .15rem .5rem; border-radius: var(--radius); background: var(--surface-2); }
.ag-st i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong, var(--muted)); }
.ag-st-working .ag-st { color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--surface)); }
.ag-st-working .ag-st i { background: var(--c); animation: ag-pulse 1.1s ease-in-out infinite; }
.ag-st-paused .ag-st { color: #b45309; background: color-mix(in srgb, #f59e0b 14%, var(--surface)); }
.ag-st-paused .ag-st i { background: #f59e0b; }
.ag-av { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: var(--radius); background: color-mix(in srgb, var(--c) 16%, var(--surface));
  color: var(--c); }
.ag-st-working .ag-av { box-shadow: 0 0 0 2px var(--c); }
.ag-av svg { width: var(--ic-sm); height: var(--ic-sm); }
.ag-tabs { margin-bottom: .5rem; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ag-tabs button { white-space: nowrap; }
.ag-tq:not(:empty) { display: inline-grid; place-items: center; min-width: 1.2rem; height: 1.2rem; padding: 0 .3rem; margin-left: .25rem; border-radius: var(--radius);
  background: #f59e0b; color: #fff; font-size: var(--fs-xs); font-weight: 700; }
.ag-pane { padding: .9rem 1rem; }
.ag-health-head { display: flex; gap: 1rem; align-items: center; margin-bottom: .6rem; flex-wrap: wrap; }
.ag-health-head > div:last-child { flex: 1 1 18rem; display: grid; gap: .4rem; justify-items: start; }
.ag-score { width: 5.2rem; height: 5.2rem; border-radius: 50%; display: grid; place-content: center; text-align: center;
  border: 5px solid var(--line); background: var(--surface-2); }
.ag-score b { font-size: var(--fs-3xl); line-height: 1; }
.ag-score span { font-size: var(--fs-2xs); color: var(--muted); }
.ag-score.good { border-color: #16a34a; } .ag-score.mid { border-color: #f59e0b; } .ag-score.bad { border-color: #dc2626; }
.ag-th:not(:empty) { display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem; margin-left: .25rem; border-radius: 50%;
  background: #dc2626; color: #fff; font-size: var(--fs-2xs); font-weight: 700; }
.ag-issues { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .4rem; }
.ag-issues li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .6rem; align-items: start; padding: .55rem .7rem;
  border-radius: var(--radius); border: 1px solid var(--line); border-left-width: 3px; background: var(--surface); overflow-wrap: anywhere; }
.ag-issues li.sev3 { border-left-color: #dc2626; } .ag-issues li.sev2 { border-left-color: #f59e0b; } .ag-issues li.sev1 { border-left-color: var(--line-strong, var(--line)); }
.ag-issues p { margin: .15rem 0 0; }
.ag-sev { font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); white-space: nowrap; padding-top: .15rem; }
.ag-issues li.sev3 .ag-sev { color: #dc2626; } .ag-issues li.sev2 .ag-sev { color: #b45309; }
.ag-issue-btns { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
.ag-healed { margin-top: .6rem; }
@media (max-width: 960px) {
  .ag-issues li { grid-template-columns: minmax(0, 1fr); }
  .ag-issue-btns { justify-content: flex-start; }
}
.ag-explain { margin: 0 0 .7rem; max-width: 70rem; }
.ag-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; }
.ag-filters select, .ag-filters input { flex: 1 1 11rem; min-height: 2.3rem; }
.ag-filters input { flex: 2 1 16rem; }
.ag-rs { display: grid; gap: .6rem; }
.ag-rs-item { border: 1px solid var(--line); border-left: 3px solid var(--c); border-radius: var(--radius); padding: .65rem .8rem; background: var(--surface);
  display: grid; gap: .4rem; }
.ag-rs-item.fixed { background: color-mix(in srgb, var(--ok, #16a34a) 6%, var(--surface)); }
.ag-rs-item header { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: var(--fs-sm); }
.ag-rs-item header i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.ag-rs-item .chip { font-size: var(--fs-xs); padding: .05rem .5rem; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); }
.ag-rs-item .chip.ok { color: #15803d; border-color: color-mix(in srgb, #16a34a 45%, var(--line)); }
.ag-rs-title { margin: 0; font-weight: 600; font-size: var(--fs-md); overflow-wrap: anywhere; }
.ag-why, .ag-note { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.45; overflow-wrap: anywhere; }
.ag-note { color: var(--ink); }
.ag-rs-items { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.ag-rs-items li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .5rem; align-items: center; font-size: var(--fs-sm);
  padding: .3rem .45rem; border-radius: var(--radius); background: var(--surface-2); }
.ag-rs-items li.off .ag-it-t { text-decoration: line-through; color: var(--muted); }
.ag-it-k svg { width: var(--ic-xs); height: var(--ic-xs); color: var(--c); display: block; }
.ag-it-t { overflow-wrap: anywhere; }
.ag-it-t small { color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; margin-right: .2rem; }
.ag-src { display: grid; gap: .3rem; font-size: var(--fs-sm); }
.ag-src-h { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ag-src-item { display: grid; gap: .15rem; padding-left: .6rem; border-left: 2px solid var(--line-strong, var(--line)); overflow-wrap: anywhere; }
.ag-src-item .linkish { text-align: left; }
.ag-src-item q { color: var(--ink-2); font-style: italic; }
.ag-rs-item footer { display: flex; flex-wrap: wrap; gap: .4rem; }
.ag-fix { display: flex; flex-wrap: wrap; gap: .4rem; }
.ag-fix input { flex: 1 1 16rem; min-height: 2.2rem; }
.ag-qa { display: grid; gap: .5rem; padding: .75rem .8rem; border-radius: var(--radius); background: color-mix(in srgb, #f59e0b 7%, var(--surface));
  border: 1px solid color-mix(in srgb, #f59e0b 30%, var(--line)); margin-bottom: .55rem; }
.ag-qa:last-child { margin-bottom: 0; }
.ag-qa p { margin: 0; font-size: var(--fs-base); line-height: 1.45; overflow-wrap: anywhere; }
.ag-q-t { font-weight: 600; font-size: var(--fs-md) !important; }
.ag-qwhy > summary { list-style: none; cursor: pointer; width: fit-content; font-size: var(--fs-xs); font-weight: 600; color: var(--accent); }
.ag-qwhy > summary::-webkit-details-marker { display: none; }
.ag-qwhy[open] { display: grid; gap: .45rem; }
.ag-qwhy .ag-why { font-size: var(--fs-sm); }
.ag-qa-row { display: flex; gap: .35rem; flex-wrap: wrap; }
.ag-qa-row input { flex: 1 1 12rem; min-height: 2.2rem; padding: .35rem .6rem; }
@media (max-width: 640px) {        /* telefono: la risposta a tutta larghezza, i due pulsanti affiancati sotto */
  .ag-qa-row input { flex-basis: 100%; }
  .ag-qa-row button { flex: 1 1 0; }
}
.ag-asks, .ag-log { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: var(--fs-sm); }
.ag-log li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .45rem; align-items: baseline; }
.ag-log li i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); align-self: center; }
.ag-log li b { margin-right: .25rem; }
.ag-live-log li { grid-template-columns: auto minmax(0, 1fr) auto; }
.ag-live-log li > .meta, .ag-running li > .meta { white-space: nowrap; font-size: var(--fs-xs); }
.ag-now-panel .ag-running:not(:empty) { margin-bottom: .55rem; padding-bottom: .55rem; border-bottom: 1px dashed var(--line); }
.ag-log li, .ag-asks li { overflow-wrap: anywhere; }
@media (max-width: 960px) {
  .ag-stage { aspect-ratio: 1.55 / 1; min-height: 0; max-height: 62dvh; }   /* telefono: 3 piani, quasi quadrato */
  .ag-hint { display: none; }
  .ag-pane { padding: .75rem; }
  .ag-rs-items li { grid-template-columns: auto minmax(0, 1fr); }
  .ag-rs-items li > button, .ag-rs-items li > .meta { grid-column: 2; justify-self: start; }
}
/* Panoramica: le domande per te, in cima */
.home-questions { margin-bottom: 1rem; padding: .9rem 1rem; display: grid; gap: .5rem; }
.home-questions.hidden { display: none; }
.hq-head { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.hq-head h3 { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: var(--fs-md); }
.hq-head h3 svg { width: var(--ic-sm); height: var(--ic-sm); color: #d97706; }
.home-questions .ag-qa { background: color-mix(in srgb, #f59e0b 8%, var(--surface)); border-color: color-mix(in srgb, #f59e0b 35%, var(--line)); }

/* Servizi esterni: impostazioni (collega, analizza, scegli) e la sezione Esterni (dati, filtri, riepilogo) */
.ex-form { display: grid; gap: .6rem; padding: .8rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.ex-form.hidden { display: none; }
.ex-form .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .6rem; }
.ex-list { display: grid; gap: .8rem; margin-top: .6rem; }
.ex-card { border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem; background: var(--surface); display: grid; gap: .6rem; min-width: 0; }
.ex-card header { display: flex; gap: .8rem; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.ex-card h4 { margin: 0; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.ex-card p { margin: .2rem 0 0; }
.ex-desc { font-size: var(--fs-base); color: var(--ink-2); }
.ex-err, .ex-ko { color: #dc2626; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.ex-ok { color: #15803d; font-weight: 600; }
.chip.ok { color: #15803d; border-color: color-mix(in srgb, #16a34a 45%, var(--line)); }
.chip.warn { color: #b45309; border-color: color-mix(in srgb, #f59e0b 45%, var(--line)); }
.ex-card .chip { font-size: var(--fs-xs); padding: .05rem .5rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface-2); font-weight: 600; }
.ex-eps { overflow-x: auto; }
.ex-table { font-size: var(--fs-sm); min-width: 52rem; }
.ex-table td { vertical-align: top; }
.ex-table td p { margin: .15rem 0 0; }
.ex-table code { font-size: var(--fs-xs); color: var(--muted); overflow-wrap: anywhere; }
.ex-table input[data-k="params"] { min-width: 9rem; width: 100%; }
.ex-table tr.ex-ro { opacity: .6; }
.ex-try td { background: var(--surface-2); }
.ex-mini { overflow-x: auto; max-height: 16rem; }
.ex-raw { white-space: pre-wrap; font-size: var(--fs-xs); max-height: 14rem; overflow: auto; margin: 0; }
.ext-nav.active { background: var(--accent-soft); color: var(--accent); }
.xe-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .8rem; }
.xe-svc { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: .3rem; padding: 1rem; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); }
.xe-svc:hover { border-color: var(--accent); }
.xe-eps { margin-bottom: .7rem; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.xe-eps button { white-space: nowrap; }
.xe-panel { padding: .8rem; display: grid; gap: .7rem; min-width: 0; }
.xe-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.xe-bar #xe-q { flex: 1 1 14rem; min-height: 2.2rem; }
.xe-bar label { display: inline-flex; gap: .3rem; align-items: center; }
.xe-totals { display: flex; flex-wrap: wrap; gap: .5rem; }
.xe-totals span { display: grid; padding: .4rem .7rem; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line); }
.xe-totals small { font-size: var(--fs-xs); color: var(--muted); }
.xe-totals b { font-size: var(--fs-lg); }
.xe-report, .xe-wrap { overflow: auto; max-height: 60vh; border: 1px solid var(--line); border-radius: var(--radius); }
.xe-report { max-height: 40vh; }
.xe-table, .xe-report table { font-size: var(--fs-sm); min-width: 100%; }
.xe-table th, .xe-report th { position: sticky; top: 0; background: var(--surface-2); z-index: 1; white-space: nowrap; }
.xe-table td { max-width: 22rem; overflow-wrap: anywhere; }
.xt { border-collapse: separate; border-spacing: 0; width: 100%; }
.xt th, .xt td { padding: .4rem .55rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.xt th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.xt tbody tr:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
#tab-settings .set-pane .ex-card h4 { text-transform: none; letter-spacing: 0; border: 0; padding: 0; margin: 0; font-size: var(--fs-md); color: var(--ink); }
#tab-settings .set-pane .ex-card h4::before, #tab-settings .set-pane .ex-card h4::after { display: none; }
/* agenti creati dal capo: «+ Nuovo agente» e la scheda del compito */
.ag-new, .agd-custom { display: grid; gap: .45rem; margin: 0 0 .7rem; padding: .7rem; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface-2); font-size: var(--fs-sm); }
.agd-custom { padding: 0; border: 0; background: none; }
.ag-new p { margin: 0; }
.ag-new label, .agd-custom label { display: grid; gap: .2rem; font-size: var(--fs-xs); color: var(--muted); }
.ag-new input, .ag-new select, .ag-new textarea, .agd-custom input, .agd-custom select, .agd-custom textarea {
  width: 100%; min-width: 0; font: inherit; font-size: var(--fs-base); color: var(--ink); }
.ag-new textarea, .agd-custom textarea { resize: vertical; min-height: 6rem; padding: .4rem .5rem; }
.ag-presets { display: flex; flex-wrap: wrap; gap: .3rem; }
.ag-presets .chip { font: inherit; font-size: var(--fs-xs); padding: .2rem .6rem; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); cursor: pointer; }
.ag-presets .chip:hover { border-color: var(--accent); }
.ag-new-btns { display: flex; flex-wrap: wrap; gap: .4rem; }
/* il visualizzatore tiene sempre lo spazio della barra di scorrimento: niente spostamenti di lato cambiando foto */
.g-view-body { scrollbar-gutter: stable; }
.lightbox .sp-view { width: 100%; }     /* larghezza fissa: non segue la forma della foto (le frecce restano ferme) */

/* Esterni › MiniPOS: reparti, pagine, filtri, tabella con i nomi veri, scheda, statistiche */
.xp-groups { margin-bottom: .55rem; }
.xp-views { margin-bottom: .6rem; overflow-x: auto; flex-wrap: nowrap; max-width: 100%; }
.xp-views button { flex: none; }
.xp-panel { display: grid; gap: .6rem; min-width: 0; }
.xp-desc { margin: 0; }
.xp-panel { grid-template-columns: minmax(0, 1fr); }
.xp-panel > * { min-width: 0; }
.xp-filters { display: flex; flex-wrap: wrap; gap: .5rem .7rem; align-items: flex-end; }
.xp-filters label, .xp-range { display: grid; gap: .15rem; font-size: var(--fs-xs); color: var(--muted); min-width: 0; }
.xp-filters select, .xp-filters input { font: inherit; font-size: var(--fs-base); min-height: 2.1rem; max-width: 100%; }
.xp-filters .xp-q { flex: 1 1 16rem; min-width: 12rem; }
.xp-flag { display: flex !important; align-items: center; gap: .35rem; font-size: var(--fs-sm) !important; color: var(--ink) !important;
  min-height: 2.1rem; }
.xp-filters .xp-flag input { width: 1.05rem; height: 1.05rem; min-height: 0; flex: none; margin: 0; }
.xp-range { border: 0; padding: 0; margin: 0; grid-template-columns: auto auto auto auto; align-items: center; column-gap: .3rem; }
.xp-range legend { padding: 0; margin-bottom: .15rem; font-size: var(--fs-xs); }
.xp-tools { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.xp-exp { display: flex; gap: .35rem; }
.xp-wrap { overflow: auto; max-width: 100%; border: 1px solid var(--line); border-radius: var(--radius); }
.xp-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.xp-table th { position: sticky; top: 0; background: var(--surface-2); text-align: left; white-space: nowrap; font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding: .45rem .6rem; z-index: 1; }
.xp-table th.sort { cursor: pointer; user-select: none; }
.xp-table th.sort:hover, .xp-table th.on { color: var(--ink); }
.xp-table td { padding: .45rem .6rem; border-top: 1px solid var(--line); vertical-align: top; max-width: 18rem; overflow-wrap: anywhere; }
.xp-table td.xp-long { white-space: normal; min-width: 14rem; max-width: 26rem; overflow-wrap: anywhere; }
.xp-table tbody tr { cursor: pointer; }
.xp-table tbody tr:hover, .xp-table tbody tr:focus-visible { background: color-mix(in srgb, var(--accent) 7%, transparent); outline: none; }
.xp-strong { font-weight: 600; }
.xp-num { text-align: right; font-variant-numeric: tabular-nums; }
.xp-red { color: #dc2626; font-weight: 600; } .xp-amber { color: #b45309; font-weight: 600; } .xp-green { color: #15803d; }
.xp-type { display: inline-flex; align-items: center; gap: .35rem; }
.xp-type i { width: .6rem; height: .6rem; border-radius: 50%; flex: none; }
.xp-pill { display: inline-block; padding: .08rem .5rem; border-radius: var(--radius); font-size: var(--fs-xs); font-weight: 600;
  background: var(--surface-2); color: var(--ink); }
.xp-pill.green { background: color-mix(in srgb, #16a34a 15%, var(--surface)); color: #15803d; }
.xp-pill.red { background: color-mix(in srgb, #dc2626 14%, var(--surface)); color: #b91c1c; }
.xp-pill.amber { background: color-mix(in srgb, #f59e0b 18%, var(--surface)); color: #b45309; }
.xp-pill.blue { background: color-mix(in srgb, #2563eb 14%, var(--surface)); color: #1d4ed8; }
.xp-pill.purple { background: color-mix(in srgb, #7c3aed 14%, var(--surface)); color: #6d28d9; }
.xp-pill.slate { background: var(--surface-2); color: var(--muted); }
#xp-out.xp-busy { opacity: .55; transition: opacity .2s; }
.xp-pager { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.xp-pager select { min-height: 1.9rem; }
.xp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .6rem; }
.xp-card { border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .85rem; display: grid; gap: .2rem; background: var(--surface); }
.xp-card small { color: var(--muted); font-size: var(--fs-xs); }
.xp-card b { font-size: var(--fs-2xl); font-variant-numeric: tabular-nums; }
.xp-card.red b { color: #dc2626; } .xp-card.green b { color: #15803d; } .xp-card.amber b { color: #b45309; } .xp-card.blue b { color: #2563eb; }
.xp-charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: .8rem; }
.xp-chart { border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .85rem; min-width: 0; }
.xp-chart h4 { margin: 0 0 .5rem; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.xp-chart ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.xp-chart li { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) auto; gap: .5rem; align-items: center; font-size: var(--fs-sm); }
.xp-bl { overflow-wrap: anywhere; }
.xp-bar { height: .55rem; background: var(--surface-2); border-radius: var(--radius); overflow: hidden; }
.xp-bar i { display: block; height: 100%; background: var(--accent); border-radius: var(--radius); }
.xp-chart li b { font-variant-numeric: tabular-nums; }
.xp-sheet { position: fixed; inset: 0 0 0 auto; width: min(36rem, 100%); background: var(--surface); box-shadow: -12px 0 40px rgba(0,0,0,.18);
  transform: translateX(105%); transition: transform .22s ease; z-index: 60; display: flex; }
.xp-sheet.open { transform: none; }
.xp-sheet-in { display: flex; flex-direction: column; width: 100%; min-width: 0; }
.xp-sheet header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .8rem 1rem;
  border-bottom: 1px solid var(--line); font-size: var(--fs-md); }
.xp-sheet-body { overflow-y: auto; padding: .6rem 1rem 1.4rem; display: grid; gap: .9rem; align-content: start; }
.xp-sheet h5 { margin: .2rem 0 .4rem; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.xp-sheet dl { margin: 0; display: grid; gap: .3rem; }
.xp-sheet dl div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: .6rem; font-size: var(--fs-base); }
.xp-sheet dt { color: var(--muted); }
.xp-sheet dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.ex-prof { display: grid; gap: .5rem; }
.ex-prof p { margin: 0; }
.ex-prof-intro { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: var(--fs-base); }
.ex-prof-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-top: .3rem; }
.ex-prof-groups { display: grid; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.ex-prof-row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .8rem; align-items: center; padding: .55rem .8rem; }
.ex-prof-row + .ex-prof-row { border-top: 1px solid var(--line); }
.ex-prof-g { font-weight: 600; font-size: var(--fs-base); }
.ex-prof .ex-chip { display: inline-flex; align-items: center; gap: 0; margin: 0; cursor: pointer; position: relative; text-align: left; }
.ex-prof .ex-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ex-prof .ex-chip span::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; border: 1.5px solid currentColor; opacity: .55; }
.ex-prof .ex-chip input:checked + span::before { background: var(--accent); border-color: var(--accent); opacity: 1; }
.ex-prof-all { font-size: var(--fs-xs); color: var(--muted); margin-left: .2rem; }
@media (max-width: 700px) {
  .ex-prof-row { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
}
@media (max-width: 860px) {
  .xp-sheet { width: 100%; }
  .xp-sheet dl div { grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); }
  .xp-filters > * { flex: 1 1 100%; min-width: 0; }
  .xp-filters .xp-q { min-width: 0; }
  .xp-filters label { flex: 1 1 calc(50% - .35rem); }
  .xp-filters select, .xp-filters input:not([type=checkbox]) { width: 100%; min-width: 0; box-sizing: border-box; }
  .xp-range { width: 100%; min-inline-size: 0; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .xp-range select { grid-column: 1 / -1; }
}
.ex-shots { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .4rem; }
.ex-shots figure { position: relative; margin: 0; }
.ex-shots img { width: 9rem; height: 5.5rem; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); display: block; }
.ex-shots .icon-btn { position: absolute; top: .2rem; right: .2rem; width: 1.6rem; height: 1.6rem; background: rgba(0,0,0,.55); color: #fff; }

/* In cima alla barra laterale solo il logo: il nome resta per lettori di schermo e per il titolo */
.sidebar .company-card .cc-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sidebar .company-card { position: relative; min-width: 0; }
.sidebar .company-card .logo-box:has(img) { width: auto; min-width: 2.6rem; max-width: 100%; padding: 0 .35rem; display: flex; align-items: center; justify-content: flex-start; }
.sidebar .company-card .logo-box img { width: auto; max-width: 100%; height: 100%; padding: .25rem 0; box-sizing: border-box; object-fit: contain; }

/* ===== MiniPOS › Reportistica e Finanze come in MiniPOS (minipos-pages.js) ===== */
.xp-panel.xp-page { background: transparent; border: 0; box-shadow: none; padding: 0; }
.mp-page { display: grid; gap: .9rem; min-width: 0; }
.mp-page .meta { margin: 0; }
.mp-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.mp-head h2 { margin: 0; font-size: var(--fs-2xl); font-weight: 600; }
.mp-filters, .mp-fbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.mp-filters select, .mp-fbar select { width: auto; min-width: 9.5rem; }
.mp-push { margin-left: auto; display: flex; gap: .9rem; align-items: center; }
.mp-range { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .3rem; border: 1px solid var(--line); border-radius: var(--radius); }
.mp-range.on { border-color: var(--accent); }
.mp-range input { width: auto; padding: .25rem .35rem; border: 0; min-height: 0; background: transparent; }
.mp-month { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-sm); color: var(--muted); }
.mp-month input { width: auto; }
.mp-custom { font-size: var(--fs-sm); }
.mp-tabs { display: grid; gap: .25rem; padding: .25rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); }
.mp-tabs-2 { grid-template-columns: 1fr 1fr; } .mp-tabs-5 { grid-template-columns: repeat(5, 1fr); }
.mp-tabs > button { min-height: 0; padding: .5rem .4rem; border: 0; background: transparent; color: var(--muted); font-weight: 500;
  border-radius: var(--radius); box-shadow: none; font-size: var(--fs-base); overflow-wrap: anywhere; }
.mp-tabs > button.on { background: var(--surface); color: var(--ink); box-shadow: var(--e1); }
.mp-subtabs > button.on { color: var(--accent); background: var(--accent-soft); }
.mp-stats { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.mp-stat, .mp-card, .mp-box, .mp-kpi, .mp-mini, .mp-tech, .mp-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.mp-stat { padding: .9rem 1rem; } .mp-stat small { font-weight: 500; font-size: var(--fs-sm); } .mp-stat b { display: block; font-size: var(--fs-3xl); margin-top: .3rem; }
.mp-card { padding: 1rem; display: grid; gap: .8rem; }
.mp-card-h { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; }
.mp-card-h h3 { margin: 0; font-size: var(--fs-lg); }
.mp-tools { display: flex; gap: .45rem; align-items: center; }
.mp-search { width: min(16rem, 100%); }
.mp-blocks { display: grid; gap: .8rem; max-height: 60vh; overflow: auto; overscroll-behavior: contain; }
.mp-block { padding: .9rem; background: var(--surface-2); display: grid; gap: .45rem; }
.mp-block-h { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8rem; font-size: var(--fs-base); padding-bottom: .6rem;
  border-bottom: 1px solid var(--line); }
.mp-block-h small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.mp-wide b { text-transform: capitalize; }
.mp-inline { display: inline-flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.mp-order, .mp-uv { background: var(--surface); border-radius: var(--radius); padding: .5rem .6rem; font-size: var(--fs-sm); }
.mp-uv, .mp-badge.mp-or { background: color-mix(in srgb, #f97316 12%, var(--surface)); }
.mp-uv { border: 1px solid color-mix(in srgb, #f97316 35%, var(--line)); }
.mp-order-h { display: flex; justify-content: space-between; gap: .6rem; align-items: center; flex-wrap: wrap; }
.mp-order-h > div:first-child { display: grid; min-width: 0; }
.mp-oid { font-weight: 700; padding: 0; text-align: left; }
.mp-mono { font-family: var(--mono); color: var(--muted); font-size: var(--fs-xs); }
.mp-badge { font-size: var(--fs-2xs); padding: .05rem .4rem; border-radius: var(--radius); border: 1px solid color-mix(in srgb, #f97316 45%, var(--line));
  color: #c2410c; white-space: nowrap; }
.mp-orx { color: #c2410c; margin: .15rem 0 0; }
:root[data-theme="dark"] .mp-badge, :root[data-theme="dark"] .mp-orx { color: #fb923c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mp-badge, :root:not([data-theme="light"]) .mp-orx { color: #fb923c; } }
.mp-sub { border-top: 1px dashed var(--line); margin-top: .35rem; padding-top: .3rem; }
.mp-notes { border-top: 1px solid var(--line); padding-top: .4rem; font-size: var(--fs-sm); color: var(--muted); }
.mp-notes b { color: var(--ink); } .mp-notes p { margin: .1rem 0 0; }
.mp-empty { text-align: center; padding: 2.5rem 1rem; color: var(--muted); }
.mp-dashed { border: 2px dashed var(--line); border-radius: var(--radius); }
.mp-exp-top { display: flex; justify-content: space-between; gap: .8rem; align-items: center; flex-wrap: wrap; }
.mp-right { text-align: right; } .mp-big { font-size: var(--fs-2xl); font-weight: 700; display: block; margin: .1rem 0; }
.mp-mob { display: none; }
.mp-row { display: flex; gap: .7rem; align-items: center; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); margin-top: .3rem; }
.mp-row p { margin: .1rem 0 0; }
.mp-grow { flex: 1; min-width: 0; }
.mp-arrow { font-weight: 700; }
.mp-pos { color: var(--ok); } .mp-neg { color: var(--danger); } .mp-blue { color: var(--series-1); } .mp-orange { color: #ea580c; }
/* barra del mese: segmenti obliqui come in MiniPOS */
.mp-bar { display: flex; border-radius: var(--radius); overflow: hidden; box-shadow: var(--e1); }
.mp-bar > div { flex: 1; display: flex; align-items: center; justify-content: center; padding: .55rem .4rem; color: #fff; font-size: var(--fs-xs);
  font-weight: 600; white-space: nowrap; transform: skewX(-12deg); margin-left: -.7rem; padding-left: 1.1rem; }
.mp-bar > div:first-child { margin-left: -.5rem; padding-left: 1rem; }
.mp-bar > div > span { transform: skewX(12deg); display: inline-flex; gap: .3rem; align-items: center; }
.mp-bar em { font-style: normal; font-size: var(--fs-2xs); } .mp-bar em.up { color: #bbf7d0; } .mp-bar em.down { color: #fecaca; }
.mp-bar .cap { text-transform: capitalize; }
.mp-s0 { background: #334155; } .mp-s1 { background: #059669; } .mp-s2 { background: #ef4444; } .mp-s3 { background: #0284c7; }
.mp-s4 { background: #f59e0b; } .mp-s5 { background: #047857; }
.mp-kpis { display: grid; gap: .75rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mp-kpi { padding: .9rem 1rem; display: grid; gap: .25rem; align-content: start; }
.mp-kpi small, .mp-mini small { text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-2xs); font-weight: 600; color: var(--muted); }
.mp-kpi b { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.mp-kpi.mp-center { text-align: center; } .mp-kpi.mp-center small { text-transform: none; letter-spacing: 0; font-size: var(--fs-xs); }
.mp-kd { font-size: var(--fs-xs); color: var(--muted); border-top: 1px solid var(--line); padding-top: .35rem; margin: .2rem 0 0; }
.mp-kpi.green { border-color: color-mix(in srgb, var(--ok) 30%, var(--line)); background: color-mix(in srgb, var(--ok) 6%, var(--surface)); }
.mp-kpi.red { border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); background: color-mix(in srgb, var(--danger) 6%, var(--surface)); }
.mp-kpi.blue { border-color: color-mix(in srgb, var(--series-1) 30%, var(--line)); background: color-mix(in srgb, var(--series-1) 6%, var(--surface)); }
.mp-kpi.orange b { color: #ea580c; } .mp-kpi.amber b { color: #b45309; } .mp-kpi.blue.mp-center b { color: var(--series-1); }
.mp-kpi.green.mp-center b { color: var(--ok); } .mp-kpi.red.mp-center b { color: var(--danger); }
.mp-strip { display: grid; gap: .75rem; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.mp-mini { padding: .7rem .8rem; } .mp-mini b { display: block; font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.mp-mini .meta { font-size: var(--fs-2xs); }
.mp-grid3 { display: grid; gap: .9rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mp-grid3.mp-tight { gap: .6rem; margin: .6rem 0; }
.mp-grid2 { display: grid; gap: .9rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mp-grid-pl { display: grid; gap: .9rem; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.mp-span2 { grid-column: span 2; } .mp-span3 { grid-column: span 3; }
.mp-box { padding: 1rem; min-width: 0; }
.mp-box h4 { margin: 0 0 .6rem; font-size: var(--fs-md); }
.mp-box-h { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
.mp-box-h h4 { margin: 0; }
.mp-amber { border-color: color-mix(in srgb, #f59e0b 35%, var(--line)); background: color-mix(in srgb, #f59e0b 6%, var(--surface)); }
.mp-amber hr { border: 0; border-top: 1px solid var(--line); }
.mp-donut { display: flex; gap: .8rem; align-items: center; }
.mp-donut svg { width: 8.5rem; height: 8.5rem; flex: none; }
.mp-donut ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; flex: 1; min-width: 0; font-size: var(--fs-xs); }
.mp-donut li { display: flex; gap: .35rem; align-items: center; }
.mp-donut li i { width: .6rem; height: .6rem; border-radius: 50%; flex: none; }
.mp-donut li span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mp-donut li em { font-style: normal; color: var(--muted); width: 2.4rem; text-align: right; }
.mp-chart { width: 100%; height: 13rem; display: block; }
.mp-ax { font-size: var(--fs-2xs); fill: var(--muted); }
.mp-legend { display: flex; justify-content: center; gap: 1rem; font-size: var(--fs-2xs); color: var(--muted); margin: .4rem 0 0; }
.mp-legend i { display: inline-block; width: .7rem; height: .7rem; border-radius: var(--radius); margin-right: .25rem; vertical-align: -1px; }
.mp-legend i.dash { border: 1px dashed var(--series-3); background: color-mix(in srgb, var(--series-3) 40%, transparent); }
.mp-tbl { font-size: var(--fs-xs); } .mp-tbl td, .mp-tbl th { padding: .35rem .5rem; white-space: nowrap; }
.mp-past { opacity: .5; } .mp-curr { font-weight: 600; background: color-mix(in srgb, #f59e0b 6%, transparent); }
.mp-click { cursor: pointer; } .mp-click:hover { background: var(--surface-2); }
.mp-sec { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .06em; color: var(--muted); margin: .9rem 0 .2rem; }
.mp-pl { display: flex; justify-content: space-between; gap: .8rem; padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.mp-pl > div span:last-child { color: var(--muted); }
.mp-pl .meta { font-size: var(--fs-2xs); padding-left: 1rem; }
.mp-pl.tot > div span:last-child { color: var(--ink); font-weight: 600; } .mp-pl.tot b { font-size: var(--fs-md); }
.mp-sign { display: inline-block; width: 1rem; font-family: var(--mono); font-weight: 700; }
.mp-sign.sp { color: var(--ok); } .mp-sign.sm { color: var(--danger); } .mp-sign.se { color: var(--muted); }
.mp-foot { font-size: var(--fs-2xs); margin: .4rem 0 .6rem !important; }
.mp-pill { display: inline-flex; gap: .25rem; align-items: center; font-size: var(--fs-2xs); padding: .1rem .45rem; border-radius: var(--radius);
  border: 1px solid var(--line); color: var(--muted); white-space: nowrap; font-weight: 500; }
.mp-pill.green { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.mp-pill.amber { color: #b45309; background: color-mix(in srgb, #f59e0b 14%, transparent); border-color: color-mix(in srgb, #f59e0b 30%, transparent); }
.mp-pill.orange { color: #c2410c; background: color-mix(in srgb, #f97316 14%, transparent); border-color: color-mix(in srgb, #f97316 30%, transparent); }
.mp-alert { border-radius: var(--radius); padding: .7rem .9rem; border: 1px solid; }
.mp-alert.orange { border-color: color-mix(in srgb, #f97316 35%, transparent); background: color-mix(in srgb, #f97316 6%, transparent); }
.mp-alert.amber { border-color: color-mix(in srgb, #f59e0b 35%, transparent); background: color-mix(in srgb, #f59e0b 6%, transparent); }
.mp-alert b { color: #c2410c; }
.mp-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.mp-chip { font-size: var(--fs-2xs); padding: .1rem .5rem; border-radius: var(--radius); border: 1px dashed color-mix(in srgb, #f59e0b 50%, var(--line)); color: #b45309; }
.mp-chip.amber, .mp-chip.orange { border-style: solid; }
.mp-indent { padding-left: 2.4rem; }
.mp-cat { display: grid; gap: .25rem; margin-bottom: .5rem; font-size: var(--fs-sm); }
.mp-cat > div { display: flex; justify-content: space-between; }
.mp-meter { height: .35rem; background: var(--surface-3); border-radius: var(--radius); overflow: hidden; }
.mp-meter i { display: block; height: 100%; background: color-mix(in srgb, var(--danger) 75%, transparent); border-radius: var(--radius); }
.mp-miss { border-top: 1px solid var(--line); margin-top: .8rem; padding-top: .7rem; font-size: var(--fs-sm); }
.mp-miss b { color: #b45309; }
.mp-tech { padding: .75rem 1rem; margin-top: .45rem; }
.mp-tech-h { display: flex; gap: .75rem; align-items: center; }
.mp-rank { width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700;
  font-size: var(--fs-sm); display: grid; place-items: center; flex: none; }
.mp-cells { display: flex; gap: 1rem; } .mp-cells span { display: grid; text-align: center; }
.mp-cells small { font-size: var(--fs-2xs); color: var(--muted); } .mp-cells b { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.mp-bd { border-top: 1px solid var(--line); margin-top: .6rem; padding-top: .4rem; }
.mp-bd-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; }
.mp-bd-g > span { display: flex; justify-content: space-between; background: var(--surface-2); border-radius: var(--radius); padding: .3rem .6rem;
  font-size: var(--fs-xs); text-transform: capitalize; }
.mp-set { display: grid; gap: .6rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.mp-set h3 { margin: 0; font-size: var(--fs-lg); }
.mp-tgrid { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.mp-tcard { border: 1px solid var(--line); border-radius: var(--radius); padding: .55rem .7rem; display: grid; gap: .15rem; }
.mp-tcard small { font-weight: 600; text-transform: capitalize; font-size: var(--fs-xs); }
.mp-tcard.amber small { color: #b45309; }
.mp-tcard b { color: var(--accent); font-variant-numeric: tabular-nums; }
.mp-fiscal { display: grid; gap: .7rem; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
.mp-field { display: grid; gap: .3rem; font-size: var(--fs-sm); }
.mp-rec, .mp-save { grid-column: 1 / -1; }
.mp-rec { display: grid; gap: .4rem; }
.mp-rec-row { display: flex; gap: .4rem; align-items: center; }
.mp-rec-row input:first-child { flex: 1; } .mp-rec-row input[type=number] { width: 8rem; }
@media (max-width: 1100px) {
  .mp-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mp-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-grid-pl { grid-template-columns: 1fr; } .mp-span2, .mp-span3 { grid-column: auto; }
  .mp-fiscal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .mp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-grid3, .mp-grid2 { grid-template-columns: 1fr; }
  .mp-block-h { grid-template-columns: 1fr 1fr; } .mp-wide { grid-column: span 2; }
  .mp-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem; box-shadow: none; }
  .mp-bar > div, .mp-bar > div:first-child { transform: none; margin: 0; padding: .4rem .3rem; border-radius: var(--radius); white-space: normal;
    text-align: center; font-size: var(--fs-2xs); line-height: 1.2; }
  .mp-bar > div > span { transform: none; flex-wrap: wrap; justify-content: center; }
  .mp-tabs-5 > button { font-size: var(--fs-xs); padding: .45rem .15rem; }
  .mp-desk { display: none; } .mp-mob { display: block; }
  .mp-tech-h { flex-wrap: wrap; } .mp-cells { width: 100%; padding-left: 2.6rem; justify-content: flex-start; }
  .mp-bd-g { grid-template-columns: 1fr 1fr; }
  .mp-fiscal { grid-template-columns: 1fr; }
  .mp-filters select { flex: 1; min-width: 0; }
  .mp-presets { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: .2rem; }
  .mp-presets > button { flex: none; font-size: var(--fs-xs); padding: .3rem .55rem; }
  .mp-search { width: 100%; } .mp-tools { width: 100%; }
  .mp-donut svg { width: 7rem; height: 7rem; }
}
.mp-uv .mp-order-h > div:first-child { display: block; }
.mp-tabs-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mp-tabs-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.xp-page, .xp-page #xp-out, .mp-page > * { min-width: 0; max-width: 100%; }
@media (max-width: 720px) {
  .mp-month { flex: 1 1 45%; } .mp-month input { width: 100%; min-width: 0; }
  .mp-fbar select { flex: 1 1 45%; min-width: 0; } .mp-push { margin-left: 0; flex-wrap: wrap; }
  .mp-range { flex: none; } .mp-range input { width: 8.4rem; }
  .mp-head .ghost span { display: none; }
}
/* i tre agenti: quanta AI usa ognuno, e il nome che gli dai tu */
.agd-name { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto auto; gap: .45rem; align-items: end; margin: .4rem 0 .7rem; }
.agd-name label { display: grid; gap: .2rem; font-size: var(--fs-xs); color: var(--muted); min-width: 0; }
.agd-name input { width: 100%; min-width: 0; padding: .35rem .5rem; font: inherit; font-size: var(--fs-sm); }
@media (max-width: 640px) { .agd-name { grid-template-columns: minmax(0, 1fr); } .agd-name button { justify-self: start; } }
/* i prompt degli agenti: uno per riquadro, si aprono al tocco */
.agd-pr { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); margin: 0 0 .45rem; }
.agd-pr > summary { cursor: pointer; padding: .55rem .7rem; display: grid; gap: .1rem; list-style: none; font-size: var(--fs-base); }
.agd-pr > summary::-webkit-details-marker { display: none; }
.agd-pr > summary .meta { font-size: var(--fs-xs); }
.agd-pr[open] > summary { border-bottom: 1px solid var(--line); }
.agd-pr form { display: grid; gap: .45rem; padding: .6rem .7rem .7rem; }
.agd-pr textarea { width: 100%; min-width: 0; min-height: 14rem; resize: vertical; font: 400 var(--fs-sm)/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: .55rem .6rem; color: var(--ink); background: var(--surface); }
.agd-pr-mod { font-size: var(--fs-2xs); font-weight: 600; color: #b45309; background: color-mix(in srgb, #f59e0b 16%, var(--surface));
  border-radius: var(--radius); padding: .05rem .45rem; margin-left: .3rem; }
/* profilo del PC (modelli sempre in memoria) */
.lm-profile { display: grid; gap: .5rem; padding: .75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.lm-gpu { margin: 0 0 .75rem; } .lm-gpu ol { margin: .3rem 0; padding-left: 1.2rem; } .lm-gpu p { margin: .25rem 0; overflow-wrap: anywhere; }
.lm-gpu-ok { margin: 0 0 .6rem; color: var(--ok, inherit); }
/* scheda agente: quale AI usa, le mansioni */
.agd-ai { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .3rem 0 .6rem; }
.agd-ai select, .agd-ai input { min-width: 0; flex: 1 1 11rem; font: inherit; font-size: var(--fs-sm); padding: .3rem .45rem; }
.agd-ai .agd-ai-local, .agd-ai .agd-ai-prov { display: none; }
.agd-ai[data-mode="local"] .agd-ai-local, .agd-ai[data-mode="provider"] .agd-ai-prov { display: block; }
.agd-jobs { list-style: none; margin: 0 0 .7rem; padding: 0; display: grid; gap: .45rem; }
.agd-jobs > li { border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem .6rem; background: var(--surface-2); display: grid; gap: .3rem; }
.agd-job-head { display: grid; gap: .05rem; }
.agd-job-head .meta { font-size: var(--fs-xs); }
.agd-job-acts { display: grid; gap: .2rem; }
.agd-job-acts .agd-ai { margin: 0; }
.agd-color { display: flex; align-items: center; gap: .35rem; font-size: var(--fs-xs); color: var(--muted); }
.agd-color input { width: 2.2rem; height: 1.8rem; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: none; }
/* tutti i modelli del motore dell'AI: ricerca, misure da toccare, versioni */
.lm-auto { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; }
.lm-sizes { display: flex; flex-wrap: wrap; gap: .3rem; }
.lm-sizes .chip { font: inherit; font-size: var(--fs-xs); padding: .18rem .6rem; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); cursor: pointer; }
.lm-sizes .chip:hover { border-color: var(--accent); }
/* «Come lavorano gli agenti» */

/* ================= Impostazioni: menu a macro-sezioni + pagina con schede interne =================
   computer: la pagina a sinistra, l'indice a destra (sempre visibile); telefono: prima l'elenco, poi la pagina */
#tab-settings { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 16.5rem); column-gap: 1.6rem; align-items: start; }
#tab-settings > .page-head { grid-column: 1 / -1; }
#tab-settings > .set-nav { grid-column: 2; grid-row: 2 / span 40; position: sticky; top: .8rem; display: grid; gap: .1rem;
  padding: .55rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
#tab-settings > :not(.page-head):not(.set-nav) { grid-column: 1; min-width: 0; }
.set-nav .set-grp { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  padding: .7rem .55rem .25rem; }
.set-nav .set-grp:first-child { padding-top: .2rem; }
.set-nav button { box-shadow: none !important; display: grid; grid-template-columns: 1.15rem minmax(0, 1fr) auto; gap: .55rem; align-items: center; text-align: left;
  border: 0; background: transparent; color: var(--ink-2); border-radius: var(--radius); padding: .45rem .55rem; min-height: 2.3rem; cursor: pointer; font: inherit; }
.set-nav button > svg { width: var(--ic-sm); height: var(--ic-sm); color: var(--muted); }
.set-nav button .set-t { display: grid; min-width: 0; }
.set-nav button .set-t b { font-weight: 500; font-size: var(--fs-base); overflow-wrap: anywhere; }
.set-nav button .set-t small { display: none; }
.set-nav button .set-go { display: none; }
.set-nav button:hover { background: var(--surface-2); }
.set-nav button.on { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--ink); }
.set-nav button.on > svg { color: var(--accent); }
.set-nav button.on .set-t b { font-weight: 600; }
.set-nav .set-danger-tab .set-t b { color: #dc2626; }
.set-page-head { display: flex; gap: .8rem; align-items: center; margin: 0 0 .7rem; }
.set-page-head h3 { margin: 0; font-size: var(--fs-xl); }
.set-page-head .hint { margin: .1rem 0 0; }
.set-back { display: none; }
.set-subtabs { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0 0 .9rem; width: max-content; max-width: 100%; }
#tab-settings .set-pane:not(.hidden) { display: grid; grid-template-columns: minmax(0, 1fr) !important; grid-auto-rows: auto !important;
  grid-auto-flow: row !important; max-width: 60rem; gap: .9rem !important; }
#tab-settings .set-pane:not(.hidden) > * { margin: 0 !important; }
#tab-settings .set-pane > * { grid-row-end: auto !important; }
#tab-settings .set-pane > .sub-off { display: none !important; }
@media (max-width: 860px) {
  #tab-settings { display: block; }
  #tab-settings > .set-nav { position: static; padding: .3rem; border-radius: var(--radius); }
  .set-nav button { grid-template-columns: 1.35rem minmax(0, 1fr) 1rem; min-height: 3.3rem; padding: .55rem .6rem; }
  .set-nav button .set-t b { font-size: var(--fs-md); }
  .set-nav button .set-t small { display: block; font-size: var(--fs-xs); color: var(--muted); overflow-wrap: anywhere; }
  .set-nav button .set-go { display: block; width: 1rem; height: 1rem; color: var(--muted); }
  .set-nav button.on { background: transparent; }
  #tab-settings[data-view="list"] > :not(.page-head):not(.set-nav) { display: none !important; }
  #tab-settings[data-view="pane"] > .set-nav { display: none; }
  #tab-settings[data-view="pane"] .set-back { display: inline-flex; }
  .set-page-head { flex-direction: column; align-items: flex-start; gap: .35rem; }
  .set-subtabs { width: auto; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .set-subtabs::-webkit-scrollbar { display: none; }
  .set-subtabs button { flex: none; }
}

/* ---------------------------------------------------------------- spazi: le schede in alto (es. Studio · Editor · Social)
   la barra laterale sceglie lo spazio, le schede la pagina; il titolo della pagina non si ripete sotto le schede */
main { display: flex; flex-direction: column; }
main > .tab { flex: 1 1 auto; height: auto; min-height: 0; }
.space-bar { flex: none; display: flex; align-items: flex-end; gap: .15rem; padding: .9rem clamp(16px, 3vw, 2.75rem) 0;
  border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; background: var(--bg); }
.space-bar::-webkit-scrollbar { display: none; }
.space-bar button, .space-bar .sp-ext button { position: relative; flex: none; display: inline-flex; align-items: center; gap: .4rem;
  min-height: 2.6rem; padding: .5rem .85rem; border: 0; border-radius: var(--radius) var(--radius) 0 0; background: transparent !important;
  box-shadow: none !important; color: var(--muted); font-size: var(--fs-md); font-weight: 500; white-space: nowrap; }
.space-bar button:hover { color: var(--ink); }
.space-bar button svg { width: var(--ic-sm); height: var(--ic-sm); }
.space-bar button.on, .space-bar .ext-nav.active { color: var(--ink); font-weight: 600; }
.space-bar button.on::after, .space-bar .ext-nav.active::after { content: ""; position: absolute; left: .7rem; right: .7rem; bottom: 0;
  height: 2px; border-radius: var(--radius); background: var(--accent); }
.space-bar .sp-ext { display: contents; }
.space-bar .badge { position: static; margin: 0; }
body.in-space main > .tab > .page-head h2:not(#home-hello):not(#xe-title) { display: none; }
body.in-space main > .tab:not(.tab-chat):not(.tab-embed) { padding-top: 1.1rem; }
body.in-space.agents-on main > .tab:not(.tab-chat):not(.tab-embed) { padding-top: 2.1rem; }   /* spazio per la linguetta degli agenti */
@media (max-width: 960px) {
  .space-bar { padding: .35rem 10px 0; gap: 0; }
  .space-bar button, .space-bar .sp-ext button { min-height: 2.5rem; padding: .45rem .7rem; font-size: var(--fs-base); }
  body.in-space main > .tab:not(.tab-chat):not(.tab-embed) { padding-top: .9rem; }
  body.in-space.agents-on main > .tab:not(.tab-chat):not(.tab-embed) { padding-top: 1.9rem; }
}
body.in-space.agents-on main > .tab.tab-chat, body.in-space.agents-on main > .tab.tab-embed { padding-top: 1.6rem; }

/* Registro: filtri in riga, voci con tipo colorato, dettaglio leggibile */
.au-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin-bottom: .6rem; }
.au-filters select, .au-filters input[type=search] { min-height: 2.3rem; }
.au-filters input[type=search] { flex: 1 1 14rem; }
.au-date { display: grid; gap: .1rem; font-size: var(--fs-xs); color: var(--muted); }
.au-list { list-style: none; margin: 0; padding: 0; display: grid; }
.au-list li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; gap: .3rem .8rem; align-items: start; padding: .55rem .2rem;
  border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.au-k { justify-self: start; font-size: var(--fs-2xs); font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent);
  border-radius: var(--radius); padding: .1rem .5rem; }
.au-main { min-width: 0; overflow-wrap: anywhere; }
.au-d { display: block; font-size: var(--fs-xs); color: var(--muted); font-family: ui-monospace, monospace; margin-top: .15rem; }
.au-bad { color: #dc2626; font-weight: 700; font-size: var(--fs-xs); }
.au-when { text-align: right; font-size: var(--fs-xs); white-space: nowrap; }
@media (max-width: 640px) {
  .au-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .au-k { grid-column: 1 / -1; }
}

/* backup cifrato */
.bk-sizes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bk-sizes strong { font-size: var(--fs-lg); overflow-wrap: anywhere; }
#bk-panel .badge { background: var(--surface-2); color: var(--muted); padding: .15rem .6rem; }
#bk-panel .badge.ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
#bk-panel .badge.ko { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.bk-pass-set { display: flex; align-items: center; gap: .5rem; padding: .55rem .8rem; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--ok) 10%, transparent); color: var(--ink); }
.bk-pass-set svg { width: var(--ic-sm); height: var(--ic-sm); flex: none; fill: none; stroke: var(--ok); stroke-width: 2; }
.bk-pass-set span { flex: 1; min-width: 0; }
.bk-clouds { display: grid; gap: .5rem; }
.bk-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; }
.bk-remotes, .bk-files { display: grid; gap: .35rem; }
.bk-remote, .bk-file { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; padding: .5rem .7rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm); min-width: 0; }
.bk-remote > label { flex: 1 1 14rem; min-width: 0; display: flex !important; align-items: center; gap: .55rem; margin: 0; }
.bk-remote > label span, .bk-file > span:first-child { display: grid; min-width: 0; flex: 1 1 12rem; }
.bk-remote b, .bk-file b { font-weight: 600; overflow-wrap: anywhere; }
.bk-acts { display: flex; gap: .3rem; flex-wrap: wrap; }
.bk-state { font-size: var(--fs-sm); padding: .1rem .55rem; border-radius: var(--radius); background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.bk-state.ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.bk-state.ko { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.bk-err { flex-basis: 100%; }
.bk-check { padding: .65rem .8rem; border-radius: var(--radius-sm); background: var(--surface-2); line-height: 1.5; overflow-wrap: anywhere; }
#bk-r-fields textarea { font-family: ui-monospace, monospace; font-size: var(--fs-sm); }
@media (max-width: 600px) { .bk-sizes { grid-template-columns: 1fr 1fr; } .bk-sizes > div:last-child { grid-column: 1 / -1; } }
.bk-note { margin-top: -.35rem; }

/* I miei canali */
#pc-body { display: grid; gap: .6rem; }
.pc-row { display: grid; gap: .5rem; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); min-width: 0; }
.pc-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; min-width: 0; }
.pc-ico { width: 1.5rem; height: 1.5rem; flex: none; }
.pc-name { display: grid; flex: 1 1 10rem; min-width: 0; }
.pc-name b { font-weight: 600; }
.pc-st { font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; }
.pc-st.ok { color: var(--ok); } .pc-st.warn { color: var(--warn, #b45309); }
.pc-acts { display: flex; gap: .35rem; flex-wrap: wrap; }
.pc-opts { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; padding-top: .45rem; border-top: 1px dashed var(--line); }
.pc-opt { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0; font-size: var(--fs-base); }
.pc-opt select { min-width: 0; max-width: 100%; }
.pc-mail { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; padding: .45rem .1rem; border-top: 1px solid var(--line); }
.pc-mail > span:first-child { display: grid; flex: 1 1 12rem; min-width: 0; }
.pc-mail b { overflow-wrap: anywhere; font-weight: 600; }
.pc-mform { padding-top: .5rem; border-top: 1px dashed var(--line); }
.pc-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.ar-agent { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .7rem; }
.ar-agent .field { flex: 1 1 14rem; min-width: 0; }
.brain-model { display: grid; gap: .35rem; padding: .6rem .75rem; border-radius: var(--radius-sm); background: var(--surface-2); }
.brain-tools .br-view-btn { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; }

/* configurazione iniziale */
body.setup-open { overflow: hidden; }
.setup { position: fixed; inset: 0; z-index: 2147482000; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(1200px 600px at 20% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent),
  color-mix(in srgb, var(--ground) 82%, #000 18%); backdrop-filter: blur(6px); overflow: auto; }
.setup-card { width: min(46rem, 100%); max-height: calc(100dvh - 32px); overflow: auto; display: grid; gap: .9rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.4rem;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.45); }
.setup-head { display: flex; gap: .9rem; align-items: center; }
.setup-head h2 { margin: 0; font-size: var(--fs-xl); }
.setup-logo { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: var(--radius); flex: none;
  background: #070E1A; color: #2F6BFF; }
.setup-logo svg { width: 2.6rem; fill: #2F6BFF; }
.setup-steps { display: flex; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.setup-steps li { flex: 1; display: flex; align-items: center; gap: .45rem; padding: .45rem .6rem; border-radius: var(--radius);
  background: var(--surface-2); color: var(--muted); font-size: var(--fs-sm); min-width: 0; }
.setup-steps li b { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; flex: none;
  background: var(--surface); border: 1px solid var(--line); font-size: var(--fs-sm); }
.setup-steps li.on { color: var(--ink); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.setup-steps li.on b, .setup-steps li.done b { background: var(--accent); color: #fff; border-color: transparent; }
.setup-steps li span { overflow-wrap: anywhere; }
.setup-pane { display: grid; gap: .45rem; }
.setup-pane label { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.setup-foot { display: flex; align-items: center; gap: .5rem; }
.setup-foot .grow { flex: 1; }
.invisible { visibility: hidden; }
.link-btn { background: none; border: 0; padding: 0; min-height: 0; color: var(--accent); font: inherit; font-size: var(--fs-sm);
  font-weight: 600; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.link-btn:disabled { opacity: .6; cursor: wait; }
.setup-todo, .ht-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.setup-todo li, .ht-list li { display: flex; align-items: center; gap: .6rem; padding: .5rem .65rem; border-radius: var(--radius);
  border: 1px solid var(--line); min-width: 0; flex-wrap: wrap; }
.setup-todo li > span:nth-child(2), .ht-txt { display: grid; flex: 1 1 14rem; min-width: 0; }
.setup-todo li.done, .ht-list li.done { opacity: .6; }
.setup-todo li.done b, .ht-list li.done b { text-decoration: line-through; }
.st-dot { width: .8rem; height: .8rem; border-radius: 50%; border: 2px solid var(--accent); flex: none; }
li.done .st-dot { background: var(--accent); }
.ht-acts { display: flex; gap: .3rem; }
.home-todo .card-head { align-items: center; }
.ht-bar { width: 8rem; height: .45rem; border-radius: var(--radius); background: var(--surface-2); overflow: hidden; }
.ht-bar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width .4s; }
@media (max-width: 600px) {
  .setup { padding: 0; place-items: stretch; }
  .setup-card { max-height: 100dvh; border-radius: 0; padding: 1rem; }
  .setup-steps li span { display: none; }
  .ht-bar { width: 4.5rem; }
}
.link-btn { display: inline-flex; align-items: center; gap: .3rem; }
.link-btn svg { width: var(--ic-xs); height: var(--ic-xs); fill: none; stroke: currentColor; stroke-width: 1.8; }
.setup-logo svg { width: 2.4rem; height: auto; }
@media (min-width: 1100px) { .ht-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =====================================================================================================
   GRAPHORUM 2026 — il linguaggio visivo della piattaforma (sopra a tutto il resto).
   Fondo grigio chiarissimo, card bianche con bordo sottile e ombre morbidissime, pulsanti a pillola, chip tenui,
   titoli in Space Grotesk, testo in DM Sans. Tutto dai token: chiaro e scuro restano coerenti.
   ===================================================================================================== */
:root { --sb-bg: #ffffff; --bubble-in: #f1f2f5; --bubble-me: #1f2333; --bubble-in-ink: var(--ink); --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  --c-ai: #7c5cff; --c-indigo: #2f6bff; --hl: inset 0 0 0 transparent;
  --e1: 0 1px 2px rgba(17, 20, 40, .04); --e2: 0 1px 2px rgba(17, 20, 40, .04), 0 8px 22px -12px rgba(31, 35, 51, .16);
  --e3: 0 2px 4px rgba(17, 20, 40, .05), 0 22px 44px -16px rgba(31, 35, 51, .26); --glass: var(--surface); }
:root[data-theme="dark"] { --sb-bg: #1f1e1d; --bubble-in: #30302e; --bubble-me: #384868; --c-ai: #a28bff; --c-indigo: #8d98ff;
  --e1: 0 1px 2px rgba(0, 0, 0, .4); --e2: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 26px -12px rgba(0, 0, 0, .6);
  --e3: 0 2px 6px rgba(0, 0, 0, .4), 0 24px 48px -14px rgba(0, 0, 0, .75); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --sb-bg: #1f1e1d; --bubble-in: #30302e; --bubble-me: #384868; --c-ai: #a28bff; --c-indigo: #8d98ff;
    --e1: 0 1px 2px rgba(0, 0, 0, .4); --e2: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 26px -12px rgba(0, 0, 0, .6);
    --e3: 0 2px 6px rgba(0, 0, 0, .4), 0 24px 48px -14px rgba(0, 0, 0, .75); }
}

/* ---------- base ---------- */
body { background: var(--ground); background-attachment: scroll; letter-spacing: -.003em; }
h1, h2, h3, legend, .k-value, .otp-code, .g-rec-time { font-family: var(--font-display); }
h1, h2 { font-weight: 500; letter-spacing: -.02em; }
h3, legend { font-weight: 600; letter-spacing: -.012em; }
h4 { font-weight: 600; }
.page-head h2 { font-size: var(--fs-4xl); font-weight: 500; letter-spacing: -.025em; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
a { color: var(--accent); text-underline-offset: 3px; }
::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }
:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 2px; }

/* ---------- pulsanti: pillole ---------- */
button { border-radius: var(--radius); background: var(--surface); background-image: none; border: 1px solid var(--line-strong); color: var(--ink);
  box-shadow: none; font-weight: 500; padding: .55rem 1.15rem; }
button:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong)); background: var(--surface-2); box-shadow: none; }
button:active:not(:disabled) { box-shadow: none; }
button:active:not(:disabled):not(.icon-btn):not(.kpi) { transform: translateY(.5px); }
button.small { padding: .35rem .9rem; }
/* principale: viola pieno */
button.primary { background: var(--accent); background-image: none; border-color: var(--accent); color: var(--accent-ink); text-shadow: none;
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent) 75%, transparent); font-weight: 600; }
button.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); transform: none;
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--accent) 85%, transparent); filter: none; }
/* terziario / filtri: contorno, lavanda al passaggio */
button.ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); }
button.ghost:hover:not(:disabled) { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--ink); }
/* pericolo: rosso tenue, a pillola */
button.danger { background: var(--t-red); border-color: color-mix(in srgb, var(--danger) 28%, transparent); color: var(--t-red-ink); box-shadow: none; }
button.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 16%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 55%, transparent); }
/* secondario ambra: le prove («Prova», «Testa connessione») */
#test-email, #mb-test, #push-test, #pv-st-test, button.pv-test, button[data-bk-test], button[data-ex-try] {
  background: var(--amber); border-color: var(--amber); color: var(--amber-ink); font-weight: 600; }
#test-email:hover, #mb-test:hover, #push-test:hover, #pv-st-test:hover, button.pv-test:hover, button[data-bk-test]:hover, button[data-ex-try]:hover {
  background: color-mix(in srgb, var(--amber) 88%, #000); border-color: color-mix(in srgb, var(--amber) 88%, #000); color: var(--amber-ink); }
/* pulsante firma: pillola piena e cerchio staccato con la freccia */
button.cta { display: inline-flex; align-items: stretch; gap: 4px; padding: 0; border: 0; background: transparent; box-shadow: none; min-height: 2.6rem; }
button.cta:hover { background: transparent; }
button.cta > span { display: inline-flex; align-items: center; padding: 0 1.25rem; border-radius: var(--radius); background: var(--accent); color: var(--accent-ink);
  font-weight: 600; letter-spacing: .01em; transition: background .15s; white-space: nowrap; }
button.cta > i { display: grid; place-items: center; width: 2.6rem; border-radius: var(--radius); background: var(--accent); color: var(--accent-ink);
  transition: background .15s, transform .2s; }
button.cta > i svg { width: var(--ic-sm); height: var(--ic-sm); transition: transform .2s; }
button.cta:hover > span, button.cta:hover > i { background: var(--accent-hover); }
button.cta:hover > i svg { transform: rotate(-45deg); }
/* l'assistente (suggerisci, bozza, analizza…): lavanda */
button:not(.primary):not([data-set]):has(> svg use[href="#i-spark"]) { color: var(--t-lav-ink); background: var(--t-lav);
  border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
button:not(.primary):not([data-set]):has(> svg use[href="#i-spark"]):hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.icon-btn { border-radius: var(--radius); border: 0; background: transparent; box-shadow: none; }
.icon-btn:hover { background: var(--accent-soft); color: var(--accent); }
.button-link { border-radius: var(--radius); border-color: var(--line-strong); }
.button-link:hover { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.g-add .button-link { background: var(--surface); box-shadow: none; }

/* ---------- campi ---------- */
input, textarea, select { border-radius: var(--radius-sm); border-color: var(--line-strong); background-color: var(--surface); }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), textarea, select { box-shadow: none; }
input:hover:not(:focus):not([type=checkbox]):not([type=radio]):not([type=range]), textarea:hover:not(:focus), select:hover:not(:focus) {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line-strong)); }
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: var(--ring) !important; }
input[type=search] { border-radius: var(--radius); padding-left: 1rem; }
label.check input, input[type=checkbox], input[type=radio] { accent-color: var(--accent); }

/* ---------- superfici ---------- */
.panel, .table-wrap, .registry, .lead-panel, .item, .log, .pv-group, .sp-card, .post-card, .xe-svc, .ex-card, .mp-stat, .mp-card, .mp-box, .mp-kpi, .mp-mini {
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.panel, .table-wrap, .registry, .lead-panel, .item, .log { border-radius: var(--radius); }
:root[data-theme="dark"] .panel, :root[data-theme="dark"] .table-wrap, :root[data-theme="dark"] .lead-panel, :root[data-theme="dark"] .registry { background: var(--surface); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .panel, :root:not([data-theme="light"]) .table-wrap, :root:not([data-theme="light"]) .lead-panel,
  :root:not([data-theme="light"]) .registry { background: var(--surface); }
}
.panel { padding: 1.35rem 1.4rem; }
.card-head h3 { font-size: var(--fs-lg); }
.card-head .meta, .meta { color: var(--muted); }
.login-card { border-radius: var(--radius); box-shadow: var(--shadow-lift); border-color: var(--line); padding: 2.2rem 2rem 1.8rem; }
.sheet { background: rgba(14, 16, 24, .42); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.sheet-card { border-radius: var(--radius); border: 1px solid var(--line); }
.sheet-head h3 { font-size: var(--fs-lg); }
.menu { border-radius: var(--radius-sm); border-color: var(--line); padding: .35rem; }
.menu button { border-radius: var(--radius); }
.menu button:hover { background: var(--surface-2); }
.toast { background: var(--navy); color: #fff; border-radius: var(--radius); }
pre, .item pre { border-radius: var(--radius-sm); }

/* ---------- chip e badge: piccole, fondi tenui ---------- */
.tag { background: var(--surface-2); border: 1px solid transparent; color: var(--ink-2); box-shadow: none; font-weight: 600; font-size: var(--fs-xs);
  padding: .14rem .6rem; }
.tag.importante { background: var(--t-red); color: var(--t-red-ink); border-color: transparent; }
.tag.delete, .tag.deleted { background: var(--t-amber); color: var(--t-amber-ink); border-color: transparent; }
.tag.notify, .tag.mine { background: var(--t-lav); color: var(--t-lav-ink); border-color: transparent; }
.badge { background: #e5484d; background-image: none; box-shadow: 0 0 0 2px var(--surface); font-weight: 700; }
.chip.ok, .ag-rs-item .chip.ok { color: var(--t-green-ink); background: var(--t-green); border-color: transparent; }
.chip.warn { color: var(--t-amber-ink); background: var(--t-amber); border-color: transparent; }
.us-chip.edit { background: var(--t-lav); color: var(--t-lav-ink); }
.us-kind.pending, .pc-state.draft { background: var(--t-amber); color: var(--t-amber-ink); }
.us-kind.approved, .pc-state.posted { background: var(--t-green); color: var(--t-green-ink); }
.us-kind.denied { background: var(--t-red); color: var(--t-red-ink); }
.score { background: var(--surface-2); }
.score.s2, .score.s3 { background: var(--t-green); color: var(--t-green-ink); }
.score.s1 { background: var(--t-amber); color: var(--t-amber-ink); }
.xp-pill.green { background: var(--t-green); color: var(--t-green-ink); } .xp-pill.red { background: var(--t-red); color: var(--t-red-ink); }
.xp-pill.amber { background: var(--t-amber); color: var(--t-amber-ink); } .xp-pill.blue { background: var(--t-blue); color: var(--t-blue-ink); }
.xp-pill.purple { background: var(--t-lav); color: var(--t-lav-ink); }
.blog-st.st-fatto { background: var(--t-lav); color: var(--t-lav-ink); }
.blog-st.st-errore, .blog-st.st-rifiutato { background: var(--t-red); color: var(--t-red-ink); }
.blog-st.st-attesa { background: var(--t-amber); color: var(--t-amber-ink); }
#bk-panel .badge.ok, .sc-auto .badge.ok, .bk-state.ok { background: var(--t-green); color: var(--t-green-ink); box-shadow: none; }
#bk-panel .badge.ko, .bk-state.ko { background: var(--t-red); color: var(--t-red-ink); box-shadow: none; }
#bk-panel .badge, .sc-auto .badge { box-shadow: none; }
/* delta: «+11% ↑» */
.delta { display: inline-flex; align-items: center; gap: .2rem; padding: .1rem .5rem; border-radius: var(--radius); font-size: var(--fs-xs); font-weight: 700;
  background: var(--t-green); color: var(--t-green-ink); }
.delta.down { background: var(--t-red); color: var(--t-red-ink); }

/* ---------- tabelle ---------- */
.table th { background: transparent; background-image: none; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .07em; color: var(--muted);
  padding: .85rem 1rem .7rem; border-bottom: 1px solid var(--line); }
.table td { padding: .95rem 1rem; border-bottom-color: var(--line); }
.table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.xt th, .xp-table th, .xe-table th, .sheet-table thead th { font-size: var(--fs-2xs); letter-spacing: .06em; }

/* ---------- niente pillole: un solo linguaggio per filtri, scelte, etichette e suggerimenti (come le Notifiche) ----------
   · gruppi di filtri e di scelte: UNA riga in un binario tenue (raggio 11px), voci quasi quadrate (raggio 8px), la scelta
     in rilievo; se non ci stanno scorrono di lato, senza barra, e non vanno mai a capo. Icone dove il senso è chiaro
     (il nome resta nel title e nell'aria-label), testo corto dove un'icona sarebbe ambigua.
   · etichette di stato: rettangolini (raggio 6px), fondo tinto, niente contorno.
   · suggerimenti e voci da aggiungere: card morbide (raggio 10px), niente contorno. */
:root { --seg-track: var(--surface-3); --seg-on: var(--surface); --seg-hover: color-mix(in srgb, var(--accent) 10%, transparent);
  --seg-shadow: 0 1px 2px rgba(17, 20, 40, .1), 0 3px 8px -5px rgba(17, 20, 40, .25); }
:root[data-theme="dark"] { --seg-on: color-mix(in srgb, #fff 7%, var(--surface-3)); --seg-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 3px 8px -5px rgba(0, 0, 0, .6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --seg-on: color-mix(in srgb, #fff 7%, var(--surface-3));
  --seg-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 3px 8px -5px rgba(0, 0, 0, .6); } }
/* selettori a segmenti e schede */
.seg { background: var(--seg-track); border: 0; box-shadow: none; padding: .18rem; border-radius: var(--radius); gap: .15rem; }
.seg button { border-radius: var(--radius); padding: .38rem .95rem; color: var(--muted); font-weight: 500; }
.seg button:hover { color: var(--ink); background: var(--seg-hover); }
.seg button.on, .seg button.on:hover { background: var(--seg-on); color: var(--ink); font-weight: 600; box-shadow: var(--seg-shadow); }
.seg button > svg { width: var(--ic-sm); height: var(--ic-sm); }
.seg button.on > svg { color: var(--accent); }
/* nei selettori l'icona dell'assistente non colora la voce di lavanda: vale la regola del rilievo */
.seg button:has(> svg use[href="#i-spark"]):not(.on) { background: transparent; color: var(--muted); border-color: transparent; }
.seg button:has(> svg use[href="#i-spark"]):not(.on):hover { background: var(--seg-hover); color: var(--ink); }
.seg button:has(> svg use[href="#i-spark"]).on { background: var(--seg-on); color: var(--ink); border-color: transparent; }
.subtabs { background: var(--seg-track); border: 0; border-radius: var(--radius); padding: .18rem; gap: .15rem; flex-wrap: nowrap; max-width: 100%;
  overflow-x: auto; scrollbar-width: none; }
.subtabs::-webkit-scrollbar { display: none; }
.subtabs button { flex: none; white-space: nowrap; border: 0; border-radius: var(--radius); color: var(--muted); }
.subtabs button:hover { color: var(--ink); background: var(--seg-hover); }
.subtabs button.on, .subtabs button.on:hover { background: var(--seg-on); color: var(--ink); box-shadow: var(--seg-shadow); }
.chat-fs { border-radius: var(--radius); }
.chat-fs button { border-radius: var(--radius); }

/* gruppi di filtri e di scelte: il binario */
:is(.g-types, .st-filters, .st-chips, .brain-legend, .blog-legend, .days, .sc-targets, .xp-groups, .mp-presets, .mem-jump,
  .ix-chips, .vd-chips, .ex-prof-chips) {
  display: flex; flex-wrap: nowrap; align-items: center; gap: .15rem; padding: .18rem; border-radius: var(--radius); background: var(--seg-track);
  width: max-content; max-width: 100%; min-width: 0; margin-inline: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  overscroll-behavior-x: contain; }
:is(.g-types, .st-filters, .st-chips, .brain-legend, .blog-legend, .days, .sc-targets, .xp-groups, .mp-presets, .mem-jump,
  .ix-chips, .vd-chips, .ex-prof-chips)::-webkit-scrollbar { display: none; }
:is(.g-types, .st-filters, .st-chips, .brain-legend, .blog-legend, .days, .sc-targets, .xp-groups, .mp-presets, .mem-jump,
  .ix-chips, .vd-chips, .ex-prof-chips):empty { display: none; }
/* le voci */
:is(.g-types button, .st-filters button, .st-chips button, .brain-legend button, .blog-legend button, .days label, .sc-chip,
  .xp-groups button, .mp-presets > button, .mem-jump a, .ix-chips .ix-chip, .vd-chips .ix-chip, .ex-prof .ex-chip span) {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-width: 2.1rem; height: 2rem; min-height: 0;
  padding: 0 .7rem; margin: 0; border: 0; border-radius: var(--radius); background: transparent; color: var(--muted); box-shadow: none; opacity: 1;
  font: inherit; font-size: var(--fs-sm); font-weight: 500; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer;
  transform: none; transition: background .15s, color .15s, box-shadow .15s; }
:is(.g-types button, .st-filters button, .st-chips button, .brain-legend button, .blog-legend button, .days label, .sc-chip,
  .xp-groups button, .mp-presets > button, .mem-jump a, .ix-chips .ix-chip, .vd-chips .ix-chip, .ex-prof .ex-chip span):hover {
  background: var(--seg-hover); color: var(--ink); border-color: transparent; }
/* la scelta: in rilievo, icona nel colore d'accento */
:is(.g-types button.on, .st-filters button.on, .st-chips button.on, .xp-groups button.on, .mp-presets > button.on, .ix-chips .ix-chip.on,
  .vd-chips .ix-chip.on, .days label:has(input:checked), .sc-chip:has(input:checked), .ex-prof .ex-chip input:checked + span),
:is(.g-types button.on, .st-filters button.on, .st-chips button.on, .xp-groups button.on, .mp-presets > button.on, .ix-chips .ix-chip.on,
  .vd-chips .ix-chip.on, .days label:has(input:checked), .sc-chip:has(input:checked), .ex-prof .ex-chip input:checked + span):hover {
  background: var(--seg-on); color: var(--ink); font-weight: 600; border-color: transparent; box-shadow: var(--seg-shadow); }
/* scelte multiple (giorni, social, profili): ogni voce scelta è in rilievo e nel colore d'accento */
:is(.days label:has(input:checked), .sc-chip:has(input:checked), .ex-prof .ex-chip input:checked + span),
:is(.days label:has(input:checked), .sc-chip:has(input:checked), .ex-prof .ex-chip input:checked + span):hover { color: var(--t-lav-ink); }
/* filtri a sola icona (Galleria, Social, Studio): quadrati come nelle Notifiche, il conteggio piccolo accanto */
:is(.g-types, .st-filters) button { padding: 0 .52rem; }
:is(.g-types, .st-filters) button > svg { width: var(--ic-sm); height: var(--ic-sm); flex: none; }
:is(.g-types, .st-filters) button.on > svg { color: var(--accent); }
:is(.g-types, .st-filters) button .g-n { margin: 0; font-size: var(--fs-2xs); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
:is(.g-types, .st-filters) button.on .g-n { color: var(--ink-2); }
/* Social › Coda: una lineetta divide lo stato (da approvare, bozze, in coda) dal tipo (caroselli, reel, post) */
#sc-filters [data-sc-f="CAROUSEL"] { margin-left: .5rem; position: relative; overflow: visible; }
#sc-filters [data-sc-f="CAROUSEL"]::before { content: ""; position: absolute; left: -.35rem; top: .5rem; bottom: .5rem; width: 1px;
  background: var(--line-strong); }
/* Galleria e Pubblicati sul computer: tipi, ricerca e menu su una riga sola */
@media (min-width: 1100px) {
  .g-bar { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .8rem; }
}
/* «Lo inventa il bot»: scelte grandi su due righe, a card (non pillole giganti) */
.sc-gen button { border-radius: var(--radius); }
/* legende (Cervello, Registro): ogni tipo si accende e si spegne; acceso = colore pieno, spento = attenuato */
:is(.brain-legend, .blog-legend) button { color: var(--ink-2); }
:is(.brain-legend, .blog-legend) button:not(.on) { color: var(--muted); }
:is(.brain-legend, .blog-legend) button:not(.on) .bc-dot { background: transparent !important; box-shadow: inset 0 0 0 1.5px currentColor; opacity: .7; }
:is(.brain-legend, .blog-legend) button:not(.on) :is(.g-n, b) { opacity: .7; }
:is(.brain-legend, .blog-legend) button .g-n, .blog-legend b { margin: 0; font-weight: 600; color: var(--muted); }
.brain-legend .br-restore { color: var(--accent); }
/* spunte nascoste (giorni, social, profili): resta l'anello quando ci si arriva con la tastiera */
.days input, .sc-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.days label, .sc-chip { position: relative; }
.days label:has(input:focus-visible), .sc-chip:has(input:focus-visible), .ex-prof .ex-chip input:focus-visible + span {
  outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 1px; }
.days label { min-width: 2.7rem; padding: 0 .55rem; }
.ex-prof .ex-chip { flex: none; }
.ex-prof .ex-chip span::before { width: .45rem; height: .45rem; }
/* Studio: il formato col rettangolino delle proporzioni */
.st-chips button .st-ar { display: inline-block; flex: none; border: 1.5px solid currentColor; border-radius: var(--radius); opacity: .8; }
.st-chips button.on .st-ar { color: var(--accent); opacity: 1; }
/* Cervello › Elenco: i salti alle sezioni */
.mem-jump a span { color: var(--muted); font-size: var(--fs-2xs); font-weight: 600; }
.mem-jump a:hover { border-color: transparent; }

/* suggerimenti e voci da aggiungere: card morbide */
:is(.suggestions button, .chips button, .lk-presets button, .ag-presets .chip) {
  border: 0; border-radius: var(--radius); background: color-mix(in srgb, var(--ink) 4.5%, var(--surface)); color: var(--ink-2); box-shadow: none;
  font-weight: 500; transform: none; }
:is(.suggestions button, .chips button, .lk-presets button, .ag-presets .chip):hover:not(:disabled) {
  background: var(--accent-soft); color: var(--t-lav-ink); border-color: transparent; }
/* chat vuota: quattro spunti in una griglia di card, il testo a sinistra */
.suggestions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; width: 100%; }
.suggestions button { display: flex; align-items: center; justify-content: flex-start; min-height: 3.3rem; padding: .6rem .9rem; font-size: var(--fs-base);
  text-align: left; line-height: 1.3; white-space: normal; color: var(--ink); }
.chips button { min-height: 2rem; padding: .3rem .7rem; font-size: var(--fs-sm); }
.chips button.ext { display: inline-flex; align-items: center; gap: .4rem; }
.chips button.ext::before { content: ""; flex: none; width: .4rem; height: .4rem; border-radius: 50%; background: var(--warn); }   /* verso altri */
.lk-presets button { min-height: 2.2rem; padding: .35rem .85rem; font-size: var(--fs-sm); }
.ag-presets .chip { padding: .3rem .65rem; font-size: var(--fs-xs); }

/* etichette di stato: rettangolini con il fondo tinto, niente contorno */
:is(.tag, .xp-pill, .mp-pill, .mp-chip, .blog-st, .pc-state, .sc-state, .us-kind, .us-chip, .pv-uses span, .bk-stats span, .bk-state,
  .bk-force, .lead-links a, .past-ws > span, .ag-rs-item .chip, .ex-card .chip, .sp-links .chip, .bc-link, .ag-ai, .ag-paused, .agd-pr-mod,
  .au-k, .delta, .score, .ag-n, .ag-hint, .pd-opt, .vd-clip-len, .vd-clip-kind, .ix-stock-item span, .sc-auto .badge) { border-radius: var(--radius); }
#bk-panel .badge { border-radius: var(--radius); }
:is(.tag, .mp-pill, .mp-chip, .past-ws > span, .ag-rs-item .chip, .ex-card .chip, .sp-links .chip, .pv-uses span, .bk-stats span, .us-chip, .ag-n) {
  border-color: transparent; }
.mp-chip { border-style: solid; background: color-mix(in srgb, #f59e0b 14%, transparent); }
.past-ws > span.on { background: color-mix(in srgb, var(--ok) 14%, transparent); }
.pd-opt { border-color: transparent; }

/* ---------- interruttori: pillola, viola acceso ---------- */
.switch .track { width: 2.75rem; height: 1.6rem; background: var(--line-strong); }
.switch .track::after { top: .2rem; left: .2rem; width: 1.2rem; height: 1.2rem; box-shadow: 0 1px 3px rgba(17, 20, 40, .3); }
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(1.15rem); }

/* ---------- scelte a card (radio): la scelta ha il bordo ambra e la spunta ---------- */
.choice { gap: .5rem; }
label.check:has(> input[type=radio]) { position: relative; padding: .8rem 2.6rem .8rem .9rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s; align-items: center; }
label.check:has(> input[type=radio]):hover { border-color: var(--line-strong); }
label.check:has(> input[type=radio]:checked) { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 7%, var(--surface)); }
label.check:has(> input[type=radio]:checked)::after { content: ""; position: absolute; right: .8rem; top: 50%; width: 1.15rem; height: 1.15rem;
  margin-top: -.575rem; border-radius: 50%; background: var(--amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a1e00' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 72% no-repeat; }
label.check > input[type=radio] { accent-color: var(--amber); margin-top: 0; }

/* ---------- barra laterale ---------- */
.sidebar { background: var(--sb-bg); border-right: 1px solid var(--line); padding: 1.1rem .85rem .85rem; gap: .5rem; }
.sidebar > .brand, .sidebar > .side-foot { margin-right: 0; }
.sidebar > .brand { display: flex; align-items: center; gap: .3rem; padding: .1rem .2rem .55rem .45rem; min-height: 2.6rem; }
.gx-brand { flex: 1; min-width: 0; display: flex; align-items: center; height: 2.2rem; color: var(--ink); }
/* il logo ufficiale (marchio G con la freccia + GRAPHORUM): monocromatico, quasi nero in chiaro e bianco in scuro */
.gx-logo, .gx-mark { display: block; fill: currentColor; stroke: none; flex: none; }
.gx-logo { width: auto; height: 1.6rem; aspect-ratio: 1476.89 / 280.6; max-width: 100%; }
.gx-mark { width: 1.9rem; height: 1.9rem; display: none; }
:root[data-theme="dark"] .gx-brand { color: #ffffff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gx-brand { color: #ffffff; } }
.gx-brand { color: #12141c; }
.sidebar .theme-toggle, .sidebar .sb-collapse { width: 2.2rem; height: 2.2rem; min-width: 2.2rem; min-height: 2.2rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface); color: var(--muted); }
.sidebar .theme-toggle:hover, .sidebar .sb-collapse:hover { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.sidebar > .nav { padding: .3rem 0; gap: 2px; }
.sidebar .nav-label { padding: .95rem .75rem .35rem; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .1em; color: color-mix(in srgb, var(--muted) 85%, transparent); }
.sidebar .nav-label:first-child { padding-top: .2rem; }
.sidebar .nav button[data-space] { border-radius: var(--radius-sm); min-height: 2.55rem; padding: .4rem .7rem; gap: .7rem; color: var(--ink-2);
  font-weight: 500; filter: none; box-shadow: none; }
.sidebar .nav button[data-space]::before, .sidebar .nav button[data-space]::after { display: none; }
.sidebar .nav button[data-space] > svg, .sidebar .nav button[data-space].active > svg,
:root[data-theme="dark"] .sidebar .nav button[data-space] > svg { width: var(--ic-md); height: var(--ic-md); padding: 0; background: transparent; box-shadow: none;
  color: var(--muted); stroke-width: 1.7; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sidebar .nav button[data-space] > svg { color: var(--muted); } }
.sidebar .nav button[data-space]:hover { background: var(--surface-2); color: var(--ink); }
.sidebar .nav button[data-space]:hover > svg { color: var(--ink); }
.sidebar .nav button[data-space].active, :root[data-theme="dark"] .sidebar .nav button[data-space].active {
  background: var(--accent-soft); color: var(--t-lav-ink); font-weight: 600; box-shadow: none; filter: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sidebar .nav button[data-space].active { box-shadow: none; filter: none; } }
.sidebar .nav button[data-space].active > svg, :root[data-theme="dark"] .sidebar .nav button[data-space].active > svg { color: var(--accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sidebar .nav button[data-space].active > svg { color: var(--accent); } }
.sidebar .nav button[data-space] > .badge { margin-right: 0; }
.sidebar .nav button span.dot { box-shadow: 0 0 0 2px var(--sb-bg); }
/* in fondo: l'azienda del cliente e il computer */
.side-foot { gap: .55rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.sidebar .company-card { display: flex; align-items: center; gap: .65rem; padding: .45rem .5rem; min-height: 3.1rem; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid transparent; box-shadow: none; }
.sidebar .company-card:hover { background: var(--surface-2); border-color: transparent; }
.sidebar .company-card .cc-text { position: static; width: auto; height: auto; overflow: hidden; clip: auto; white-space: normal; display: grid; min-width: 0; }
.sidebar .company-card .cc-text > * { display: block; overflow-wrap: anywhere; }
.sidebar .company-card .logo-box { width: 2.3rem; height: 2.3rem; border-radius: var(--radius); background: var(--surface-2); border-color: var(--line); }
.sidebar .company-card .logo-box:has(img) { width: 2.3rem; min-width: 2.3rem; padding: .15rem; justify-content: center; background: #fff; }
.sidebar .company-card .logo-box.logo-light:has(img) { background: #1b1f2c; }
.sidebar .company-card .logo-box img { width: 100%; height: 100%; padding: 0; }
.sidebar .company-card strong { font-size: var(--fs-base); }
.sidebar .sys-box { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: none; }
.sys-gear { border-radius: var(--radius); background: var(--surface); border-color: var(--line); }
.sys-gear:hover, .sys-gear.active { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.meter .m-bar i { background: var(--accent); }
@media (min-width: 861px) {
  .sidebar { padding: 1rem .8rem .8rem; }
  .sidebar .nav button[data-space] { min-height: 2.45rem; padding: .35rem .7rem; gap: .7rem; }
  .sidebar .nav button[data-space] > svg { width: var(--ic-md); height: var(--ic-md); padding: 0; border-radius: 0; }
  .sidebar .nav button span.dot { left: 1.55rem; top: .45rem; }
  body.sb-mini .sidebar > .brand { flex-direction: column; padding: 0 0 .4rem; }
  body.sb-mini .gx-logo { display: none; }
  body.sb-mini .gx-mark { display: block; margin: 0 auto; }
  body.sb-mini .gx-brand { flex: none; height: 2.2rem; }
  body.sb-mini .sidebar .nav-label { font-size: 0; padding: .5rem 0 .2rem; margin: 0 .6rem; border-top: 1px solid var(--line); }
  body.sb-mini .sidebar .nav-label:first-child { border-top: 0; }
  body.sb-mini .sidebar .nav button[data-space] { justify-content: center; padding-left: .4rem; padding-right: .4rem; }
  body.sb-mini .sidebar .company-card { justify-content: center; padding: .35rem; }
  body.sb-mini .sidebar .company-card .cc-text { display: none; }
}

/* ---------- schede in alto (spazi) ---------- */
.space-bar { background: transparent; border-bottom: 1px solid var(--line); gap: .35rem; }
.space-bar button, .space-bar .sp-ext button { color: var(--muted); font-weight: 500; padding: .55rem .8rem; border-radius: 0 !important; }
.space-bar button:hover { color: var(--ink); }
.space-bar button.on, .space-bar .ext-nav.active { color: var(--ink); font-weight: 600; }
.space-bar button.on::after, .space-bar .ext-nav.active::after { left: .55rem; right: .55rem; height: 2.5px; border-radius: var(--radius) var(--radius) 0 0; background: var(--accent); }

/* ---------- Panoramica ---------- */
.home-head { align-items: center; }
.home-head h2 { font-size: var(--fs-5xl); line-height: 1.15; }
.home-head .filters { gap: .75rem; }
.home-head .date { margin-top: .25rem; font-size: var(--fs-md); }
.home-head .date::first-letter { text-transform: uppercase; }
.kpi, #tab-home .kpi { background: var(--tile); color: var(--tile-ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.1rem 1.2rem 1.15rem; gap: .2rem; min-height: 7.4rem; }
.kpi::before, .kpi::after, .kpi:not(.accent)::before { display: none; }
.kpi:not(.accent) { background: var(--tile); }
.kpi:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.kpi .k-label, #tab-home .kpi .k-label { display: flex; align-items: center; gap: .45rem; font-size: var(--fs-sm); font-weight: 500; color: var(--tile-muted); }
.kpi:not(.accent) .k-label::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--kc, var(--accent)); flex: none; }
.kpi:nth-child(1) { --kc: var(--accent); } .kpi:nth-child(2) { --kc: var(--amber); } .kpi:nth-child(3) { --kc: #2fa8e0; } .kpi:nth-child(4) { --kc: var(--mint); }
.kpi .k-value, .kpi:not(.accent) .k-value, #tab-home .kpi .k-value { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-5xl); letter-spacing: -.03em;
  color: var(--tile-num); line-height: 1.1; margin-top: .35rem; }
.kpi .k-sub, #tab-home .kpi .k-sub { font-size: var(--fs-sm); color: var(--tile-muted); }
.kpi.accent, #tab-home .kpi.accent { background: var(--brand-grad); border-color: transparent; color: #fff;
  box-shadow: 0 18px 36px -18px rgba(47, 107, 255, .75); overflow: hidden; }
.kpi.accent::after { display: block; content: ""; position: absolute; width: 12rem; height: 12rem; right: -4rem; top: -5rem; left: auto; bottom: auto; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 68%); z-index: -1; }
.kpi.accent .k-label, .kpi.accent .k-sub, #tab-home .kpi.accent .k-label, #tab-home .kpi.accent .k-sub { color: rgba(255, 255, 255, .82); }
.kpi.accent .k-value, #tab-home .kpi.accent .k-value { color: #fff; }
.kpi.alert { box-shadow: inset 3px 0 0 var(--danger), var(--shadow); }
#tab-home { gap: 1.1rem; }
#tab-home .kpi-grid, #tab-home .dash-grid { gap: 1rem; }
#tab-home .dash-grid .panel { padding: 1.15rem 1.25rem; }
#tab-home .dash-grid .card-head h3 { font-size: var(--fs-lg); }
#tab-home .dash-grid .card-head { margin-bottom: .7rem; }
.rowi { border-bottom-color: var(--line); }
.rowi .ico { border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); border: 0; }
.rowi .r-meta { font-size: var(--fs-xs); }
.ai-kpi { background: var(--surface-2); border: 0; border-radius: var(--radius-sm); }
.home-questions { border-color: color-mix(in srgb, var(--amber) 45%, var(--line)); }
.chart .donut-center { font-family: var(--font-display); font-weight: 500; }
.legend .sw, .dtable .sw { border-radius: 50%; }
@media (max-width: 860px) {
  .home-cta { display: none !important; }
  .kpi, #tab-home .kpi { min-height: 5.6rem; padding: .8rem .9rem; }
  .kpi .k-value, #tab-home .kpi .k-value { font-size: var(--fs-3xl); margin-top: .15rem; }
  .kpi .k-label, #tab-home .kpi .k-label { font-size: var(--fs-2xs); }
  #tab-home .kpi-grid, #tab-home .dash-grid { gap: .6rem; }
  #tab-home .dash-grid .panel { padding: .85rem .9rem; }
  .page-head h2, .home-head h2 { font-size: var(--fs-3xl); }
}

/* ---------- Impostazioni: colonna a sinistra, pannelli a destra ---------- */
#tab-settings > .set-nav { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem; box-shadow: var(--shadow); }
.set-nav .set-grp { font-size: var(--fs-2xs); letter-spacing: .1em; padding: .9rem .6rem .35rem; }
.set-nav button { border-radius: var(--radius); color: var(--ink-2); }
.set-nav button > svg { color: var(--muted); stroke-width: 1.7; }
.set-nav button:hover { background: var(--surface-2); color: var(--ink); }
.set-nav button.on { background: var(--surface-3); color: var(--ink); }
.set-nav button.on > svg { color: var(--ink); }
.set-page-head h3 { font-size: var(--fs-2xl); font-weight: 500; letter-spacing: -.02em; }
#tab-settings .set-pane h3, #tab-settings .set-pane legend { font-size: var(--fs-lg); font-weight: 600; }
#tab-settings .set-pane h4 { font-size: var(--fs-2xs); letter-spacing: .09em; }
#tab-settings .set-pane .panel { padding: 1.3rem 1.4rem; }
@media (max-width: 860px) { .set-nav button.on { background: transparent; } }

/* ---------- chat con l'assistente ---------- */
.tab-chat { background: var(--surface); }
.hist-panel { background: var(--surface-2); border-right: 1px solid var(--line); }
.hist-head h3 { font-size: var(--fs-lg); }
.hist { border-radius: var(--radius-sm); }
.hist:hover { background: var(--surface-3); }
.hist.active { background: var(--accent); }
.hist.active .c-title { color: #fff; }
.hist.active .c-meta { color: rgba(255, 255, 255, .8); }
.hist.active .c-more { color: #fff; }
.hist.active .c-more:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.chat-main { background: var(--surface); }
.chat-head h2 { font-size: var(--fs-xl); font-weight: 500; }
/* bolle: le tue grigio chiaro, quelle dell'assistente blu notte con testo bianco */
.msg.user { background: var(--bubble-in); color: var(--ink); border: 0; box-shadow: none; border-radius: var(--radius); padding: .7rem 1.05rem; }
.msg.assistant { --ink: #ffffff; --ink-2: #d5d8e4; --muted: #a9aec0; --line: rgba(255, 255, 255, .12); --line-strong: rgba(255, 255, 255, .2);
  --surface: #2a2f45; --surface-2: #2b3046; --surface-3: #343a52; --accent: #a7aeff; --accent-soft: rgba(167, 174, 255, .16); --accent-ink: #12141c;
  --warn: #f5c35a; --ok: #5fe3a8; --danger: #ff8d93; --t-lav: rgba(167, 174, 255, .18); --t-lav-ink: #d3d7ff;
  background: var(--bubble-me); color: #fff; padding: .85rem 1.15rem; border-radius: var(--radius); max-width: min(54.29rem, 92%);
  box-shadow: 0 10px 24px -16px rgba(31, 35, 51, .6); color-scheme: dark; }
.msg.assistant.live { min-width: min(30rem, 100%); }
.msg.assistant .activity { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); }
.msg.assistant .body code { background: rgba(255, 255, 255, .1); border-color: transparent; }
.msg.assistant .body a { color: #c3c8ff; }
.msg.assistant .md-table th { background: rgba(255, 255, 255, .06); }
.msg.assistant input, .msg.assistant textarea, .msg.assistant select { background: #1a1e2e; color: #fff; }
.msg.assistant button:not(.primary) { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .2); }
.msg.assistant button.primary { background: #fff; border-color: #fff; color: #1f2333; box-shadow: none; }
.empty-chat h3 { font-size: var(--fs-3xl); font-weight: 500; }
.composer { border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--surface); box-shadow: 0 1px 2px rgba(17, 20, 40, .04), 0 12px 30px -18px rgba(31, 35, 51, .3); }
.composer:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, var(--line-strong)); box-shadow: var(--ring), 0 12px 30px -18px rgba(31, 35, 51, .3); }
.composer .send { border-radius: var(--radius); }
.chat-model { border-radius: var(--radius); }

.chat-fs { border-radius: var(--radius); }
.chat-fs button { border-radius: var(--radius); }
.qc-body { background: var(--surface); }
.bb-chat-ico { background: var(--brand-grad); }
.file-card { border-radius: var(--radius-sm); }
.file-card .fc-ico { background: var(--accent-soft); color: var(--accent); }

/* ---------- notifiche ---------- */
.notif-rail { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--shadow); border-color: var(--line); }
.nr-bell { background: var(--accent-soft); color: var(--accent); box-shadow: none; }
.nr-item { border-radius: var(--radius-sm); }
.nr-item.unread { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent); }
.nr-ico, .nr-ico.k-mail, .nr-ico.k-whatsapp, .nr-ico.k-telegram, .nr-ico.k-activity, .nr-ico.k-system { box-shadow: none; }
.nr-ico.k-mail { background: var(--c-mail); } .nr-ico.k-whatsapp { background: var(--c-wa); } .nr-ico.k-telegram { background: var(--c-tg); }
.nr-ico.k-activity { background: var(--brand-grad); } .nr-ico.k-system { background: var(--c-teal); }
.nr-balloon { border-radius: var(--radius); background: var(--surface); backdrop-filter: none; border: 1px solid var(--line); border-left: 3px solid var(--accent); }
.chat-dock.in-rail { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--shadow); border-color: var(--line); }

/* ---------- WhatsApp e Telegram in finestra ---------- */
.chat-pop { border-radius: var(--radius); background: var(--surface); box-shadow: 0 1px 2px rgba(17, 20, 40, .06), 0 28px 60px -18px rgba(17, 20, 40, .45); }
.chat-pop .cp-head { background: var(--navy); min-height: 4rem; padding-bottom: .7rem; }
.chat-pop .cp-head > svg.cp-wave { display: none; }
.cp-av { background: var(--ic); color: #fff; box-shadow: none; }
.cp-av svg { stroke: #fff; }
.cp-dot { border-color: var(--navy); }
.cp-dot.on { background: var(--mint); }
.chat-pop iframe { background: var(--surface); }
.qc-body .chat-main { background: var(--surface); }
body.pop-open::after { background: rgba(14, 16, 24, .38); }

/* ---------- telefono: barra in alto e in basso ---------- */
@media (max-width: 860px) {
  .topbar { background: var(--sb-bg); box-shadow: 0 1px 0 var(--line); border-bottom: 0; }
  .bottombar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: 0 1px 2px rgba(17, 20, 40, .06), 0 14px 32px -12px rgba(17, 20, 40, .28); }
  .bottombar button, .bottombar button[data-tab] svg { color: var(--muted); }
  .bottombar button.active { color: var(--t-lav-ink); font-weight: 600; }
  .bottombar button.active svg { color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 .35rem var(--ground); }
  .bottombar .bb-chat { color: var(--ink); }
  .bb-chat-ico { box-shadow: 0 8px 18px -6px rgba(47, 107, 255, .6), 0 0 0 4px var(--surface); }
  .sidebar { box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .35); }
}

/* ---------- pagine varie ---------- */
.us-av { background: var(--brand-grad); }
.ct-letter { color: var(--accent); }
.ct-group { border-radius: var(--radius); box-shadow: var(--shadow); }
.g-tile, .st-tile { border-radius: var(--radius-sm); border-color: var(--line); box-shadow: var(--e1); }
.g-tile:hover, .st-tile:hover { box-shadow: var(--shadow-lift); }
.g-badge { background: var(--brand-grad); }
#tab-studio button.primary.st-go { background: var(--brand-grad); border-color: transparent; box-shadow: 0 10px 22px -10px rgba(47, 107, 255, .8); }
.st-form { background: var(--surface); }
.st-kind button.on { color: var(--ink); }
.brain-wrap { border-radius: var(--radius); background-color: var(--surface);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--ink) 8%, transparent) 1px, transparent 1.2px),
    radial-gradient(circle at 50% 45%, color-mix(in srgb, #7c5cff 9%, transparent), transparent 70%); }
.brain-card { background: var(--surface); backdrop-filter: none; border-radius: var(--radius); }
.brain-tools .icon-btn { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e1); }
.ag-stage { border-radius: var(--radius); }
.ag-card:hover, .ag-card.sel { border-radius: var(--radius-sm); }
.agents-bar, .work-pill { border-color: var(--line); box-shadow: 0 8px 22px -14px rgba(31, 35, 51, .45); }
.ix-stage { border-radius: var(--radius); }
.ix-rail button.on { background: var(--accent-soft); color: var(--accent); }
.ix-tog.on, .ed-tog.on, .ix-fxb.on, .ix-mask.on, .ix-layer.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.mp-stat, .mp-card, .mp-box, .mp-kpi, .mp-mini, .xp-card, .xp-chart { border-radius: var(--radius); }
.setup-card { border-radius: var(--radius); }
.setup-logo { background: var(--navy); }

/* ---------- accesso ---------- */
.login { background: radial-gradient(900px 520px at 85% -10%, rgba(124, 92, 255, .12), transparent 60%),
  radial-gradient(800px 520px at -10% 110%, rgba(47, 107, 255, .1), transparent 60%), var(--ground); }
.gx-login { flex: none; justify-content: center; height: 3rem; margin: .2rem 0 .3rem; }
.gx-login .gx-logo { height: 2.4rem; }
.login-card .hint { text-align: center; margin: 0 0 .9rem; }
.login-card > button.primary { min-height: 2.9rem; margin-top: .4rem; }
/* il marchio Graphorum negli altri punti: barra in alto del telefono, chat vuota, configurazione, nuova password */
.gx-mark-i { display: block; width: 2.6rem; height: 2.6rem; fill: currentColor; stroke: none; }
.gx-login .gx-mark-i { width: 2.4rem; height: 2.4rem; margin: 0 auto; }
.gx-chat-mark { width: 2.8rem; height: 2.8rem; fill: currentColor; stroke: none; color: var(--ink); }
.setup-logo { background: var(--navy); color: #fff; }
.setup-logo svg { width: var(--ic-2xl); height: var(--ic-2xl); fill: currentColor; stroke: none; }
@media (max-width: 860px) {
  .topbar .tb-brand .gx-brand { flex: none; height: 2.3rem; }
  .topbar .tb-brand .gx-logo { height: 1.05rem; }
}
/* scuro: le prove in ambra tenue (un'ambra piena abbaglia sul fondo scuro) */
:root[data-theme="dark"] :is(#test-email, #mb-test, #push-test, #pv-st-test, button.pv-test, button[data-bk-test], button[data-ex-try]) {
  background: var(--t-amber); border-color: color-mix(in srgb, var(--amber) 55%, transparent); color: var(--t-amber-ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(#test-email, #mb-test, #push-test, #pv-st-test, button.pv-test, button[data-bk-test], button[data-ex-try]) {
    background: var(--t-amber); border-color: color-mix(in srgb, var(--amber) 55%, transparent); color: var(--t-amber-ink); }
}

/* ================= Tutta la larghezza disponibile: le Impostazioni non restano una colonna stretta con una banda vuota
   a destra. Su computer le schede si dispongono da sole su più colonne (almeno ~24rem l'una: 1 su portatile piccolo,
   2-3 su 1440-1920, 4 o più su 2560); una scheda sola prende tutta la riga; le «set-wide» restano a tutta riga.
   I testi lunghi (.hint) tengono la loro misura in ch per restare leggibili. «Modelli sul PC» ha un suo foglio. */
@media (min-width: 861px) {
  #tab-settings .set-pane:not(.hidden):not([data-pane="models"]) { max-width: none;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)) !important; align-items: start; }
  #tab-settings .set-pane:not([data-pane="models"]) > :is(.set-wide, .pv-list, .links-tabs, .soc-set-tabs, .links-social, .set-embed, .hint) {
    grid-column: 1 / -1; }
  /* pagine con un impaginato loro (scheda unica, elenco, modulo incorporato): una colonna, ma larga quanto lo schermo */
  #tab-settings .set-pane:is([data-pane="company"], [data-pane="users"], [data-pane="social"], [data-pane="providers"]):not(.hidden) {
    grid-template-columns: minmax(0, 1fr) !important; }
  /* Email e chat: tante schede di altezza diversa, a mattoncini (colonne di giornale): niente buchi sotto le schede corte */
  #tab-settings .set-pane[data-pane="links"]:not(.hidden) { display: block; columns: 3 24rem; column-gap: .9rem; }
  #tab-settings .set-pane[data-pane="links"]:not(.hidden) > * { break-inside: avoid; margin: 0 0 .9rem !important; }
  #tab-settings .set-pane[data-pane="links"]:not(.hidden) > :is(.links-tabs, .links-social) { column-span: all; }
  #tab-settings .set-pane[data-pane="links"]:not(.hidden) > .links-tabs { display: flex; width: max-content; margin: 0 auto .9rem !important; }
  /* i selettori a pulsanti (Tema, Dimensione…) restano della loro misura invece di diventare una barra lunga e vuota */
  #tab-settings .set-pane > .panel.form-grid > .seg { justify-self: start; }
}
/* dentro una scheda larga le spunte si mettono in colonne (ognuna ~22rem) invece di lasciare vuota la metà destra;
   titoli, spiegazioni, campi e pulsanti restano a tutta riga, come prima */
#tab-settings .set-pane:not([data-pane="models"]) > .panel.form-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  column-gap: 1.4rem; }
#tab-settings .set-pane:not([data-pane="models"]) > .panel.form-grid > * { grid-column: 1 / -1; }
#tab-settings .set-pane:not([data-pane="models"]) > .panel.form-grid > label.check { grid-column: auto; }

/* Cervello › Schema: lo schema del capo (Capo → Graphorum, il cervello → Agenti) con i dati veri (cervello.py) */
.scm { display: flex; flex-direction: column; gap: 1rem; }
.scm-tree { display: flex; flex-direction: column; align-items: stretch; max-width: 68rem; width: 100%; margin: 0 auto; }
.scm-tier { position: relative; display: flex; flex-direction: column; gap: .7rem; padding: 1rem 1.15rem; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.scm-capo { align-self: center; width: min(100%, 30rem); }
.scm-cervello { border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface) 60%); }
.scm-head { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.scm-head svg { width: var(--ic-md); height: var(--ic-md); color: var(--accent); flex: none; }
.scm-head b { font-size: var(--fs-lg); font-weight: 600; }
.scm-live { margin-left: auto; color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.scm-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; }
.scm-tier:not(.scm-capo) .scm-body { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.scm-do { margin: 0; padding: 0 0 0 1.1rem; display: flex; flex-direction: column; gap: .3rem; color: var(--ink-2); font-size: var(--fs-base); }
.scm-do li::marker { color: var(--accent); }
.scm-parts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: .35rem .9rem; align-content: start; }
.scm-parts li { display: flex; align-items: center; gap: .45rem; font-size: var(--fs-sm); color: var(--ink-2); min-width: 0; }
.scm-parts li span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.scm-parts li i { width: .5rem; height: .5rem; border-radius: 50%; flex: none; background: var(--accent); }
.scm-parts li.off i { background: var(--danger, #c0392b); }
.scm-parts li small { color: var(--muted); font-variant-numeric: tabular-nums; font-size: var(--fs-xs); }
.scm-phases { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.scm-phase { display: flex; flex-direction: column; gap: .3rem; padding-top: .55rem; border-top: 1px solid var(--line); }
.scm-phase:first-child { padding-top: 0; border-top: 0; }
.scm-phase > small { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; }
.scm-link { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .7rem; height: 2.6rem;
  color: var(--muted); font-size: var(--fs-sm); }
.scm-link span:first-child { justify-self: end; }
.scm-link i { width: 2px; height: 100%; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--line), color-mix(in srgb, var(--accent) 55%, transparent), var(--line)); }
.scm-h { margin: .4rem 0 0; font-size: var(--fs-md); font-weight: 600; }
.scm-path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; }
.scm-path li { display: flex; flex-direction: column; gap: .2rem; padding: .6rem .7rem; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface); min-width: 0; }
.scm-path b { font-size: var(--fs-base); font-weight: 600; }
.scm-path small { color: var(--muted); font-size: var(--fs-xs); line-height: 1.3; }
.scm-path small::first-letter { text-transform: uppercase; }
.scm-n { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; font-size: var(--fs-2xs);
  font-weight: 600; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.scm-tiles { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; }
.scm-tiles div { display: flex; align-items: baseline; gap: .4rem; }
.scm-tiles b { font-size: var(--fs-xl); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.scm-tiles span { color: var(--muted); font-size: var(--fs-sm); }
.scm-tiles .bad b { color: var(--danger, #c0392b); }
.scm-turns { display: flex; flex-direction: column; }
.scm-turn { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: .7rem; align-items: start;
  padding: .55rem .2rem; border-bottom: 1px solid var(--line); }
.scm-time { color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; padding-top: .05rem; }
.scm-req { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.scm-said { overflow-wrap: anywhere; }
.scm-meta { color: var(--muted); font-size: var(--fs-sm); }
.scm-flags { display: inline-flex; gap: .35rem; padding-top: .1rem; }
.scm-f { width: 1rem; height: 1rem; color: var(--ink-2); }
@media (max-width: 1100px) { .scm-path { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); } }
@media (max-width: 860px) {
  .scm-tier:not(.scm-capo) .scm-body { grid-template-columns: minmax(0, 1fr); }
  .scm-parts { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
  .scm-turn { grid-template-columns: minmax(0, 1fr) auto; }
  .scm-time { grid-column: 1; grid-row: 1; }
  .scm-flags { grid-column: 2; grid-row: 1; }
  .scm-req { grid-column: 1 / 3; grid-row: 2; }
}

/* A− / A+ come gli altri pulsanti della testata della chat (matita, puntina, cestino): niente pillola, stessa misura */
.chat-head .chat-fs { background: none; padding: 0; gap: 0; border-radius: 0; }
.chat-head .chat-fs button { height: 2.5rem; min-width: 2.5rem; padding: 0 .35rem; border-radius: var(--radius-sm);
  color: var(--ink-2); font-weight: 600; letter-spacing: -.02em; }
.chat-head .chat-fs button[data-chat-fs="-1"] { font-size: var(--fs-sm); }
.chat-head .chat-fs button[data-chat-fs="1"] { font-size: var(--fs-md); }
.chat-head .chat-fs button:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
@media (max-width: 720px) { .chat-head .chat-fs button { height: 2.25rem; min-width: 2.1rem; } }

/* Il passato nel cervello: i servizi collegati con lo storico «più tardi» */
.past-later ul { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .35rem; }
.past-later li { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .45rem .6rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.past-later li span { min-width: 0; overflow-wrap: anywhere; }
/* ==============================================================================================================
   ALLINEAMENTI. Giro di controllo di tutte le schermate (computer 1440×900 e telefono 390×844, chiaro e scuro):
   in ogni riga gli elementi stanno centrati in verticale, i pulsanti della stessa barra hanno lo stesso stile,
   caselle e pallini stanno accanto alla loro etichetta, niente sborda. Solo misure e allineamenti: colori e
   comportamento non cambiano. Lo ricontrolla tests/test_ui_alignment.py.
   ============================================================================================================== */
/* radio e caselle: «input { width: 100% }» le allargava e le staccava dalla loro etichetta. :where() tiene la
   specificità di «input», così le misure dei singoli componenti (interruttori, celle delle tabelle) restano */
input:where([type=radio], [type=checkbox]) { width: auto; }
.gov-form label:has(> input[type=checkbox]) { display: flex; align-items: center; gap: .5rem; }

/* chat: A− / A+ senza riquadro né bordo, alla stessa altezza di matita, puntina e cestino */
.chat-head .chat-fs { border: 0; align-self: center; align-items: center; }

/* testata delle pagine negli spazi (il titolo è già nella barra in alto): la frase e i pulsanti a destra sulla
   stessa linea, al centro, su computer e telefono */
body.in-space main > .tab > .page-head:has(> div > h2:not(#home-hello):not(#xe-title)) { align-items: center; }
body.in-space main > .tab > .page-head > div > h2:not(#home-hello):not(#xe-title) + .sub { margin-top: 0; }
/* Impostazioni sul computer: «Esci» al centro di titolo e sottotitolo, non sul fondo */
@media (min-width: 861px) { #tab-settings > .page-head { align-items: center; } }
/* telefono: le schede della testata (Cervello: Mappa/Registro/Schema/Elenco; Editor: Immagine/PDF/Video/Strumenti)
   stanno nello schermo invece di uscire a destra */
@media (max-width: 860px) {
  .page-head > .seg { display: flex; max-width: 100%; min-width: 0; }
  .page-head > .seg > button { flex: 1 1 auto; min-width: 0; padding-inline: .5rem; white-space: nowrap; justify-content: center; }
}

/* intestazioni dei registri (Attività, Automazioni, Procedure, Smistamento, Promemoria): filtri al centro del titolo */
.reg-head { align-items: center; }

/* Aspetto › Colori ed effetti: «Ripristina» alla stessa altezza del titolo */
#look-custom > .card-head { align-items: center; }

/* Editor video › Modelli: l'anteprima sta in una colonna fissa (i testi partono tutti dallo stesso punto) e la
   scritta va a capo dentro l'anteprima invece di uscirne («Prima/dopo», «Evento») */
.vd-tpl { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); }
.vd-tpl-prev { justify-self: center; overflow: hidden; overflow-wrap: anywhere; line-height: 1.15; font-size: var(--fs-2xs); }

/* Impostazioni › Registro: i due elenchi affiancati, campi e «CSV» della stessa altezza */
.au-filters > select { width: auto; flex: 1 1 10rem; padding-block: 0; }
.au-filters > select, .au-filters input, .au-filters > #au-csv { height: 2.5rem; min-height: 0; }

/* telefono: «Torna su» (a sinistra) e «Parla» (a destra) alla stessa altezza */
@media (max-width: 860px) { .chat-dock { align-items: center; } }

/* tabelle come schede sul telefono: l'etichetta al centro del menu o del pulsante che ha accanto */
@media (max-width: 860px) {
  .table td:has(> select, > button, > input) { align-items: center; }
  .table td:has(> select, > button, > input)::before { padding-top: 0; }
}
/* Smistamento: il menu della categoria usa tutta la colonna (prima «importante» si tagliava) */
#tab-emails .table td > select { width: 100%; }

/* Editor: nella barra in alto tutti i pulsanti sono pillole («Guide» era un rettangolo); lo zoom è un valore fra
   − e +, senza cornice come loro */
.ix-top .ix-tog { border-radius: var(--radius); }
.ix-zoomg .ed-zoom { border-color: transparent; background: transparent; box-shadow: none; }
.ix-zoomg .ed-zoom:hover:not(:disabled) { border-color: transparent; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }

/* Social › Crea: «Quando crea un contenuto» e «Social di serie» con le etichette sulla stessa riga; niente
   lineetta quando lo stato dell'Autopilot è vuoto */
.sc-auto .sc-row { align-items: flex-start; }
.sc-auto .badge:empty { display: none; }

/* ==============================================================================================================
   NUMERINI (badge, contatori). Nitidi su ogni schermo: misure intere in pixel (niente mezzi pixel che sfocano le
   cifre), peso medio (non grassetto), testo levigato, colore pieno senza sfumature, bagliori o ombre. L'anello del
   colore dello sfondo resta solo dove il numerino sta sopra un'icona, per staccarlo.
   ============================================================================================================== */
.badge, .act-count, .ag-tq:not(:empty) {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  height: 1.286rem; min-width: 1.286rem; padding: 0 .357rem; border-radius: var(--radius);
  font-family: var(--font); font-size: var(--fs-xs); font-weight: 500; line-height: 1; letter-spacing: .01em;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: geometricPrecision;
  text-shadow: none; background-image: none; filter: none;
}
.badge, .sidebar .badge, .sidebar .nav button[data-space] > .badge { background: #e5484d; color: #fff; box-shadow: none; font-size: var(--fs-xs); }
.badge.hidden { display: none !important; }
.act-count:empty { display: none; }
.ag-tq:not(:empty) { background: #d97706; color: #fff; }
.ag-q { font-weight: 600; }
/* sopra un'icona (barra in basso, campanella, WhatsApp/Telegram, barra laterale stretta): più piccolo e staccato */
.bottombar .badge, .nr-app .badge, .nr-bell-m .badge, .cd-btn .badge, .topbar .icon-btn .badge, .chat-dock .cd-btn .badge,
body.sb-mini .sidebar .nav button[data-space] .badge, .qc-orb .badge {
  height: 1.143rem; min-width: 1.143rem; padding: 0 .286rem; border-radius: var(--radius); font-size: var(--fs-2xs);
  box-shadow: 0 0 0 2px var(--surface);
}
/* stati nelle card (Backup, Feedback, Autopilota): etichette di testo, non numerini */
#bk-panel .badge, .sc-auto .badge { height: auto; min-width: 0; padding: .15rem .6rem; font-size: var(--fs-xs); box-shadow: none; }

/* ---------------------------------------------------------------- lingua [TRADUZIONI]
   Impostazioni › Lingua: una scheda per lingua, il nome scritto nella sua lingua; nelle pagine pubbliche (accesso,
   primo avvio) il selettore piccolo di static/i18n.js (.lang-mini) */
.lang-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .55rem; }
.lang-pick button { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 3.1rem;
  padding: .6rem .85rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--ink); text-align: left; font-size: var(--fs-md); transition: border-color .15s, background-color .15s, box-shadow .15s; }
.lang-pick button b { font-weight: 600; }
.lang-pick button small { font: 500 var(--fs-2xs)/1 var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); letter-spacing: .08em;
  color: var(--muted); border: 1px solid var(--line); border-radius: var(--radius); padding: .25rem .45rem; }
.lang-pick button:hover { border-color: var(--accent); }
.lang-pick button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lang-pick button.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.lang-pick button.on small { color: var(--accent); border-color: currentColor; }
.lang-pick[aria-busy="true"] { opacity: .65; pointer-events: none; }
.lang-panel .hint { margin-top: 0; }
.login-lang { display: flex; justify-content: center; margin-top: .35rem; }
.setup-head .su-lang { margin-left: auto; flex: none; align-self: flex-start; }
@media (max-width: 520px) {
  .lang-pick { grid-template-columns: 1fr 1fr; }
  .setup-head { flex-wrap: wrap; }
}

/* ---- Cervello · atlante 2D (brain2d.js): pannelli di vetro sopra la mappa, chiaro e scuro */
#brain-map:not(.b2-on) .b2-side, #brain-map:not(.b2-on) .b2-an, #brain-map:not(.b2-on) .b2-ask,
#brain-map:not(.b2-on) .b2-back { display: none; }
#brain-map.b2-on .brain-hint { display: none; }
#brain-map.b2-on .brain-wrap { background-image: radial-gradient(circle, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1.2px); }
.brain-card { z-index: 4; }
.b2-glass { position: absolute; z-index: 3; color: var(--ink);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter: blur(14px) saturate(1.35); -webkit-backdrop-filter: blur(14px) saturate(1.35);
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent); border-radius: var(--radius);
  box-shadow: 0 14px 34px -14px rgba(10, 16, 32, .28), 0 1px 0 rgba(255, 255, 255, .35) inset; }
.b2-side { left: .7rem; top: .7rem; width: 13.75rem; max-height: calc(100% - 9.5rem); overflow-y: auto; padding: .75rem .6rem .6rem;
  scrollbar-width: thin; }
.b2-side h5, .b2-an h5 { display: flex; align-items: center; gap: .35rem; margin: .1rem .35rem .45rem; font: 600 var(--fs-2xs)/1 var(--font);
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.b2-an h5 svg { width: var(--ic-xs); height: var(--ic-xs); color: var(--accent); }
.b2-side h5 + * { margin-bottom: .75rem; }
.b2-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: .08rem; }
.b2-cats li { display: grid; grid-template-columns: .62rem minmax(0, 1fr) auto 2.5rem; align-items: center; gap: .45rem;
  padding: .34rem .45rem; border-radius: var(--radius); cursor: pointer; font-size: var(--fs-sm); transition: background .15s; }
.b2-cats li span { overflow-wrap: anywhere; }
.b2-cats li:hover, .b2-cats li:focus-visible { background: color-mix(in srgb, var(--accent) 8%, transparent); outline: none; }
.b2-cats li.on { background: color-mix(in srgb, var(--accent) 15%, transparent); font-weight: 600; }
.b2-cats i { width: .62rem; height: .62rem; border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 0%, transparent), 0 0 10px -1px currentColor; }
.b2-cats small { color: var(--muted); font-size: var(--fs-2xs); font-variant-numeric: tabular-nums; }
.b2-cats b { text-align: right; font: 600 var(--fs-xs)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.b2-years { display: grid; gap: .1rem; }
.b2-years button { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) 2.3rem; align-items: center; gap: .45rem; min-height: 0;
  background: none; border: 0; box-shadow: none; padding: .26rem .45rem; border-radius: var(--radius); font-size: var(--fs-xs); color: var(--ink); cursor: pointer; }
.b2-years button:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.b2-years button.on { background: color-mix(in srgb, var(--accent) 15%, transparent); font-weight: 600; }
.b2-years span { font-variant-numeric: tabular-nums; text-align: left; }
.b2-years i { height: .36rem; border-radius: var(--radius); background: color-mix(in srgb, var(--ink) 9%, transparent); overflow: hidden; }
.b2-years em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #38BDF8); }
.b2-years small { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.b2-years .meta { margin: 0 .45rem; font-size: var(--fs-xs); }
.b2-an { right: .7rem; top: .7rem; width: 16.5rem; max-height: calc(100% - 9.5rem); overflow-y: auto; padding: .75rem .55rem .6rem;
  transition: opacity .2s ease, transform .2s ease; scrollbar-width: thin; }
.brain-wrap:has(.brain-card:not(.hidden)) .b2-an { opacity: 0; transform: translateX(8px); pointer-events: none; }
.b2-ins { display: grid; gap: .12rem; }
.b2-row { display: grid; grid-template-columns: .55rem minmax(0, 1fr); gap: .55rem; align-items: start; width: 100%; min-height: 0;
  text-align: left; background: none; border: 0; box-shadow: none; padding: .42rem .45rem; border-radius: var(--radius); font-size: var(--fs-sm);
  line-height: 1.38; color: var(--ink); cursor: pointer; font-weight: 400; }
.b2-row:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.b2-row i { width: .55rem; height: .55rem; border-radius: 50%; margin-top: .32rem; box-shadow: 0 0 9px -1px currentColor; }
.b2-row b { font-weight: 600; }
.b2-note { margin: .45rem .45rem .1rem; font-size: var(--fs-2xs); line-height: 1.4; color: var(--muted); }
.b2-ask { left: 50%; bottom: .75rem; transform: translateX(-50%); width: min(46rem, calc(100% - 7.5rem)); display: flex; align-items: center;
  gap: .7rem; padding: .38rem .38rem .38rem .95rem; border-radius: var(--radius); margin: 0; }
.b2-stats { display: flex; gap: .95rem; font-size: var(--fs-2xs); color: var(--muted); white-space: nowrap; }
.b2-stats b { color: var(--ink); font: 600 var(--fs-sm)/1 var(--font-display); margin-right: .28rem; font-variant-numeric: tabular-nums; }
.b2-q { flex: 1 1 auto; display: flex; align-items: center; gap: .5rem; min-width: 0; margin: 0; padding-left: .8rem;
  border-left: 1px solid var(--line); font-weight: 400; }
.b2-q svg { width: var(--ic-sm); height: var(--ic-sm); color: var(--accent); flex: none; }
.b2-q input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; box-shadow: none !important; outline: none !important;
  padding: .45rem 0; font-size: var(--fs-md); color: var(--ink); }
.b2-send { width: 2.4rem; height: 2.4rem; min-height: 0; border-radius: var(--radius); padding: 0; display: grid; place-items: center; flex: none; }
.b2-send svg { width: var(--ic-sm); height: var(--ic-sm); }
.b2-back { left: 50%; top: .75rem; transform: translateX(-50%); display: flex; align-items: center; gap: .45rem; min-height: 0;
  padding: .48rem 1rem; border-radius: var(--radius); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; max-width: calc(100% - 2rem); }
.b2-back span { overflow-wrap: anywhere; }
.b2-back svg { width: var(--ic-xs); height: var(--ic-xs); flex: none; }
.brain-tools .br-lens-btn svg { width: var(--ic-sm); height: var(--ic-sm); }
.brain-tools .br-lens-btn.on { background: var(--accent); color: #fff; border-color: var(--accent); }
@media (max-width: 1180px) { .b2-an { display: none; } }
@media (max-width: 860px) {
  .b2-side { display: none; }
  .b2-ask { width: calc(100% - 1.2rem); bottom: .6rem; padding-left: .7rem; }
  .b2-stats { display: none; }
  .b2-q { border-left: 0; padding-left: 0; }
  .brain-tools .br-lens-btn { display: none; }
  .b2-back { top: 3.4rem; }
}