/* Graphorum · la rifinitura unica, caricata per ultima su ogni pagina (dashboard, Posta, WhatsApp e Telegram).
   - Un solo arrotondamento (--radius, in style.css) per pulsanti, caselle, schede e popup: niente più angoli diversi.
   - Pulsanti, caselle e popup disegnati allo stesso modo ovunque, in chiaro e in scuro.
   - I moduli senza la scheda bianca intorno: i campi stanno sulla pagina, i gruppi si separano con una riga sottile.
   - La fascia della voce aperta nel menu: una rete di nodi che si compone e si scompone, come la G del logo (polish.js).
   Le regole sono a bassa specificità dove possono (:where), così i componenti con un loro disegno restano com'erano. */

:root {
  --btn-hl: inset 0 1px 0 rgba(255, 255, 255, .7);
  --btn-sh: 0 1px 2px rgba(16, 24, 40, .06);
  --field-sh: inset 0 1px 1px rgba(16, 24, 40, .035);
  --pop-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 24px 56px -18px rgba(16, 24, 40, .34);
  --pop-backdrop: rgba(9, 13, 22, .42);
  --mesh-line: rgba(47, 107, 255, .55);
  --mesh-node: #2f6bff;
}
:root[data-theme="dark"] {
  --btn-hl: inset 0 1px 0 rgba(255, 255, 255, .05);
  --btn-sh: 0 1px 2px rgba(0, 0, 0, .35);
  --field-sh: inset 0 1px 2px rgba(0, 0, 0, .25);
  --pop-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 28px 64px -18px rgba(0, 0, 0, .8);
  --pop-backdrop: rgba(15, 15, 14, .62);
  --mesh-line: rgba(56, 189, 248, .6);
  --mesh-node: #7dd3fc;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --btn-hl: inset 0 1px 0 rgba(255, 255, 255, .05);
    --btn-sh: 0 1px 2px rgba(0, 0, 0, .35);
    --field-sh: inset 0 1px 2px rgba(0, 0, 0, .25);
    --pop-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 28px 64px -18px rgba(0, 0, 0, .8);
    --pop-backdrop: rgba(15, 15, 14, .62);
    --mesh-line: rgba(56, 189, 248, .6);
    --mesh-node: #7dd3fc;
  }
}

/* ------------------------------------------------------------------ misure uguali */
/* pulsanti e caselle della stessa riga hanno la stessa altezza (prima i pulsanti erano 3 px più bassi delle caselle);
   i piccoli hanno tutti la stessa misura piccola */
/* (le misure --ctl-h e --ctl-h-sm stanno con la scala unica, in style.css) */
button, .button-link { min-height: var(--ctl-h); }
button.small, .button-link.small-link { min-height: var(--ctl-h-sm); }
input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"])),
select { min-height: var(--ctl-h); }
select.small, select.reg-days, select.reg-kind { min-height: var(--ctl-h-sm); padding-top: .25rem; padding-bottom: .25rem; font-size: var(--fs-base); }
/* nella barra dei clienti la ricerca e i filtri sono grandi: anche le azioni sui selezionati */
.lead-bar :is(button.small, select.small) { min-height: var(--ctl-h); }

/* ------------------------------------------------------------------ pulsanti */
/* il pulsante normale (secondario): pieno, bordo netto, una luce sottile in alto; al passaggio si scurisce appena */
button:where(:not([class])), button:where(.small, .ghost):where(:not(.primary, .danger, .icon-btn)), .button-link {
  border-radius: var(--radius); border-color: var(--line-strong); font-weight: 500; letter-spacing: -.003em;
  box-shadow: var(--btn-hl), var(--btn-sh); transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .08s;
}
button:where(:not([class])):hover:not(:disabled), button:where(.small):where(:not(.primary, .danger, .ghost, .icon-btn)):hover:not(:disabled),
.button-link:hover {
  background: var(--surface-2); border-color: color-mix(in srgb, var(--ink) 24%, var(--line-strong));
}
button.ghost { background: transparent; box-shadow: none; border-color: var(--line); color: var(--ink-2); }
button.ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); border-color: var(--line-strong); }
/* il principale: il blu di Graphorum, con una luce in alto e un'ombra colorata leggera */
button.primary {
  border-radius: var(--radius); border-color: color-mix(in srgb, var(--accent) 80%, #000); font-weight: 600;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(16, 24, 40, .16),
    0 6px 14px -8px color-mix(in srgb, var(--accent) 80%, transparent);
}
button.primary:hover:not(:disabled) { filter: none; background: var(--accent-hover); }
button.danger { border-radius: var(--radius); box-shadow: var(--btn-sh); }
button.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }
button:where(:not(.icon-btn)):active:not(:disabled) { transform: translateY(1px); }
button:focus-visible, .button-link:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px color-mix(in srgb, var(--accent) 60%, transparent);
}
.icon-btn { border-radius: var(--radius); }
/* ogni tocco su un pulsante si vede: un'onda del colore del pulsante (rossa per «elimina») e una leggera pressione;
   mentre l'operazione lavora, una rotellina nel pulsante (busy() aggiunge .is-busy) */
button:where(:not(.icon-btn)):active:not(:disabled) { transform: translateY(1px) scale(.985); }
@media (prefers-reduced-motion: no-preference) {
  .tap-ring { animation: tap-ring .5s cubic-bezier(.2,.8,.2,1); }
}
.tap-ring { --tap: var(--accent); }
:is(.danger, .ask-ok.danger).tap-ring { --tap: var(--danger); }
@keyframes tap-ring {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tap) 45%, transparent); }
  to { box-shadow: 0 0 0 9px color-mix(in srgb, var(--tap) 0%, transparent); }
}
button.is-busy:not(.icon-btn) { cursor: progress; opacity: 1 !important; }
button.is-busy:not(.icon-btn)::after {
  content: ""; width: .85em; height: .85em; margin-left: .5em; flex: none; display: inline-block; vertical-align: -.1em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: busy-spin .7s linear infinite;
}
@keyframes busy-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ caselle */
input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"])),
select, textarea {
  border-radius: var(--radius); box-shadow: var(--field-sh); transition: border-color .15s, box-shadow .15s, background .15s;
}
input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"])):hover:not(:focus):not(:disabled),
select:hover:not(:focus):not(:disabled), textarea:hover:not(:focus):not(:disabled) {
  border-color: color-mix(in srgb, var(--ink) 22%, var(--line-strong));
}
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
::placeholder { color: color-mix(in srgb, var(--muted) 85%, transparent); }
/* campi file («Scegli file», es. il ripristino del backup): la casella come le altre, dentro un pulsante nostro */
input[type="file"]:not([hidden]) {
  box-sizing: border-box; width: 100%; height: var(--ctl-h); padding: .3rem; border-radius: var(--radius);
  box-shadow: var(--field-sh); color: var(--muted); font: inherit; font-size: var(--fs-base); line-height: 1; cursor: pointer;
}
input[type="file"]::file-selector-button {
  height: 100%; margin: 0 .75rem 0 0; padding: 0 .95rem; border: 1px solid var(--line-strong);
  border-radius: calc(var(--radius) - 2px); background: var(--surface); color: var(--ink); font: inherit;
  font-size: var(--fs-base); font-weight: 500; box-shadow: var(--btn-hl), var(--btn-sh); cursor: pointer;
  transition: background .15s, border-color .15s;
}
input[type="file"]:hover:not(:disabled)::file-selector-button {
  background: var(--surface-2); border-color: color-mix(in srgb, var(--ink) 24%, var(--line-strong));
}

/* ------------------------------------------------------------------ moduli senza la scheda intorno */
/* i gruppi di campi (Impostazioni, console, schede) non stanno più dentro un riquadro bianco con il bordo: i campi sono
   sulla pagina, ogni gruppo comincia con una riga sottile e il suo titolo. Più spazio, più pulito, uguale ovunque. */
fieldset.panel, .panel.form-grid, .panel.inline-form {
  background: none !important; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 1.15rem 0 .35rem;
}
.sheet-body fieldset.panel:first-child, .sheet-body .panel.form-grid:first-child { border-top: 0; padding-top: 0; }

/* ------------------------------------------------------------------ popup e finestre */
/* tutte uguali: fondo pieno (mai trasparente), lo stesso bordo, la stessa ombra, lo stesso velo dietro */
.sheet:not(.lightbox) { background: var(--pop-backdrop); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.sheet:not(.lightbox) > .sheet-card, .menu, .emoji-pop, .viz-tip {
  background: var(--surface) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--pop-shadow);
}
.ask-wrap { background: var(--pop-backdrop) !important; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.ask-box { border-radius: var(--radius) !important; box-shadow: var(--pop-shadow) !important; }
.ask-box button, .ask-in { border-radius: var(--radius) !important; }
.nr-balloon { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--pop-shadow); }

/* ------------------------------------------------------------------ la chat rapida: la G come le altre icone */
.qc-orb .gx-orb { font-size: 1.35rem; width: 1em; height: 1em; }
.qc-orb::after { display: none; }

/* ------------------------------------------------------------------ la fascia della voce aperta */
/* la voce aperta arriva fino al bordo del menu e si fonde con la pagina (la «scheda ritagliata», con i due raccordi
   in alto e in basso); dentro, una rete di nodi e fili che si compone quando la apri e si scompone quando cambi pagina,
   come la G del logo. Il disegno della rete lo mette polish.js; qui forma, colori e tempi. */
.sidebar .nav button[data-space] { position: relative; isolation: isolate; }
.sidebar .nav button[data-space].active { color: var(--ink) !important; font-weight: 600; }
.sidebar .nav button[data-space].active > svg:not(.nav-band) { color: var(--accent); }
@media (min-width: 861px) {
  /* il bordo del menu diventa un filo dipinto sotto le voci: la voce aperta ci passa sopra e si fonde con la pagina */
  .sidebar { border-right: 0 !important; box-shadow: inset -1px 0 0 var(--sb-line, var(--line)) !important; }
  .sidebar > .nav { margin-right: -.8rem; padding-right: .8rem; max-width: none; }
  .sidebar .nav button[data-space] { transition: background .25s, margin .25s, border-radius .25s, color .15s; }
  .sidebar .nav button[data-space].active {
    width: calc(100% + .8rem); max-width: none; margin-right: -.8rem;
    border-radius: var(--radius) 0 0 var(--radius); background: var(--ground) !important;
    box-shadow: none !important; z-index: 2;
  }
  .sidebar .nav button[data-space].active::before, .sidebar .nav button[data-space].active::after {
    display: block !important; content: ""; position: absolute; right: 0; width: var(--radius); height: var(--radius);
    pointer-events: none; background: transparent; z-index: 1;
  }
  .sidebar .nav button[data-space].active::before { top: calc(-1 * var(--radius)); border-bottom-right-radius: var(--radius);
    box-shadow: calc(var(--radius) / 2) calc(var(--radius) / 2) 0 calc(var(--radius) / 2) var(--ground); }
  .sidebar .nav button[data-space].active::after { bottom: calc(-1 * var(--radius)); border-top-right-radius: var(--radius);
    box-shadow: calc(var(--radius) / 2) calc(var(--radius) / 2 * -1) 0 calc(var(--radius) / 2) var(--ground); }
  .sidebar .nav button[data-space] > .badge { position: relative; z-index: 1; }
}
@media (max-width: 860px) {
  .sidebar .nav button[data-space].active { background: color-mix(in srgb, var(--accent) 10%, transparent); }
}
.nav-band { position: absolute; inset: 0; width: 100% !important; height: 100% !important; z-index: -1; pointer-events: none;
  overflow: hidden; stroke: none; fill: none; padding: 0 !important; margin: 0 !important; background: none !important;
  box-shadow: none !important; border-radius: 0 !important;
  /* la rete sta a destra, dove non c'è scritto niente: a sinistra sfuma, così il nome della voce resta pulito */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 38%, #000 70%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 38%, #000 70%, #000 100%); }
.nav-band line { stroke: var(--mesh-line); stroke-width: .9; stroke-linecap: round; opacity: .55;
  stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len);
  transition: stroke-dashoffset .5s cubic-bezier(.2, .8, .2, 1) var(--d), opacity .4s var(--d); }
.nav-band circle { fill: var(--mesh-node); opacity: 0; transform: translate(var(--fx), var(--fy)); transform-box: fill-box;
  transition: transform .55s cubic-bezier(.2, .8, .2, 1) var(--d), opacity .35s var(--d); }
.nav-band.on line { stroke-dashoffset: 0; }
.nav-band.on circle { opacity: var(--o, .75); transform: none; }
.nav-band.off line { stroke-dashoffset: var(--len); opacity: 0; transition-delay: 0s; transition-duration: .3s; }
.nav-band.off circle { opacity: 0; transform: translate(var(--fx), var(--fy)); transition-delay: 0s; transition-duration: .3s; }
.nav-band .pulse { animation: band-pulse 3.2s ease-in-out infinite; animation-delay: var(--p); }
@keyframes band-pulse { 0%, 100% { opacity: var(--o, .75); } 50% { opacity: .2; } }

/* il titolo di ogni pagina: sotto, un filo di rete sottile che si disegna quando la pagina si apre (lo stesso tratto) */
.page-head h2, .tab-head h2 { position: relative; }
.g-rule { display: block; height: 10px; width: min(220px, 60%); margin-top: .35rem; overflow: visible; }
.g-rule line { stroke: var(--mesh-line); stroke-width: 1; stroke-dasharray: 220; stroke-dashoffset: 220;
  animation: g-rule-draw .9s cubic-bezier(.2, .8, .2, 1) forwards .1s; opacity: .55; }
/* i nodi come nella fascia della barra laterale: arrivano da fuori al loro posto, poi respirano piano (sfalsati) */
.g-rule circle { fill: var(--mesh-node); opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: g-rule-in .55s cubic-bezier(.2, .8, .2, 1) var(--d, .3s) forwards,
    g-rule-pulse 3.2s ease-in-out calc(var(--d, .3s) + .6s + var(--p, 0s)) infinite; }
.g-rule circle:nth-of-type(1) { --fx: -9px; --fy: 6px; }
.g-rule circle:nth-of-type(2) { --fx: 7px; --fy: -7px; --p: 1.1s; }
.g-rule circle:nth-of-type(3) { --fx: 11px; --fy: 5px; --p: 2.2s; }
/* il titolo della pagina, con il suo filo animato, c'è ovunque: anche sotto le linguette in alto (scelta del capo) */
body.in-space main > .tab > .page-head h2:not(#home-hello):not(#xe-title) { display: block; }
body.in-space main > .tab > .page-head:has(> div > h2:not(#home-hello):not(#xe-title)) { align-items: flex-end; }
body.in-space main > .tab > .page-head > div > h2:not(#home-hello):not(#xe-title) + .sub { margin-top: .35rem; }
/* ridisegnato dalla pagina (non riaperto): subito al suo posto, niente animazione da capo */
.g-rule.still line { animation: none; stroke-dashoffset: 0; }
.g-rule.still circle { opacity: .8; animation: g-rule-pulse 3.2s ease-in-out var(--p, 0s) infinite; }
@keyframes g-rule-draw { to { stroke-dashoffset: 0; } }
@keyframes g-rule-in { from { opacity: 0; transform: translate(var(--fx, 0), var(--fy, 0)); } to { opacity: .8; transform: none; } }
@keyframes g-rule-pulse { 0%, 100% { opacity: .8; } 50% { opacity: .22; } }
/* a riposo (html.g-rest, favicon-spin.js) i fili smettono di respirare; l'entrata dei nodi finisce comunque */
html.g-rest :is(.nav-band .pulse, .g-rule.still circle) { animation-play-state: paused; }
html.g-rest .g-rule:not(.still) circle { animation-play-state: running, paused; }

@media (prefers-reduced-motion: reduce) {
  .nav-band line, .nav-band circle, .g-rule line, .g-rule circle { transition: none !important; animation: none !important;
    stroke-dashoffset: 0 !important; opacity: .6 !important; transform: none !important; }
}

/* ------------------------------------------------------------------ chat: le tue conversazioni, sotto le automatiche */
.hist-panel { display: flex; flex-direction: column; min-height: 0; }
.hist-panel > .hist-list { flex: 1 1 auto; min-height: 0; }
.hist-auto { flex: none; margin: .4rem .55rem .7rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2); display: flex; flex-direction: column; min-height: 0; max-height: 46%; }
.hist-auto[open] { flex: 0 1 auto; }
.hist-auto > summary { list-style: none; display: flex; align-items: center; gap: .5rem; padding: .6rem .7rem; cursor: pointer;
  color: var(--ink); font-size: var(--fs-base); user-select: none; border-radius: var(--radius); }
.hist-auto > summary::-webkit-details-marker { display: none; }
.hist-auto > summary:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.hist-auto > summary > svg:first-child { width: var(--ic-sm); height: var(--ic-sm); color: var(--accent); }
.hist-auto > summary strong { font-weight: 600; flex: 1; min-width: 0; }
.hist-auto-n { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.hist-auto-chev { width: 1rem; height: 1rem; color: var(--muted); transition: transform .2s; transform: rotate(180deg); }
.hist-auto[open] .hist-auto-chev { transform: rotate(0deg); }
.hist-auto-list { overflow-y: auto; padding: 0 .3rem .4rem; border-top: 1px solid var(--line); min-height: 0; }
.hist-auto.hidden { display: none; }

/* il pulsante di invio della chat rapida: il blu di Graphorum come tutti gli altri pulsanti principali (non più nero in
   chiaro e bianco in scuro) */
.qc-bar .qc-send { background: var(--accent); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22),
  0 6px 14px -8px color-mix(in srgb, var(--accent) 80%, transparent); }
.qc-bar .qc-send:hover { background: var(--accent-hover); color: #fff; }

/* ------------------------------------------------------------------ niente schede dietro caselle e pulsanti */
/* Regola del capo, vale per tutto quello che c'è e che si aggiunge: la pagina è il foglio. Gruppi di campi, liste,
   tabelle, barre degli strumenti, filtri e linguette stanno direttamente sulla pagina, separati da una riga sottile e
   dallo spazio: nessun riquadro con fondo, bordo e ombra dietro caselle e pulsanti. Restano «sopra» solo le finestre
   che si aprono (popup, menu, la scheda del cervello) e l'accesso. */
.panel, .table-wrap, .registry, .lead-panel, #tab-settings > .set-nav {
  background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.panel, .registry, .lead-panel { border-top: 1px solid var(--line) !important; padding-inline: 1rem !important; }
@media (max-width: 860px) { .panel, .registry, .lead-panel { padding-inline: .7rem !important; } }
/* dentro un riquadro che ha già il suo margine (un pannello nel pannello) niente margine doppio */
:is(.panel, .registry, .lead-panel) :is(.panel, .registry, .lead-panel) { padding-inline: 0 !important; }
.rec-pick .panel {                                     /* qui il pannello È la finestra che si apre */
  background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important;
  box-shadow: var(--pop-shadow) !important; padding-inline: 1.25rem !important;
}
@media (min-width: 861px) { #tab-settings > .set-nav { border-left: 1px solid var(--line) !important; padding-left: .9rem; } }
/* linguette e filtri: le voci da sole, quella scelta tinta del blu del brand (niente binario grigio dietro) */
.seg, .subtabs, :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) {
  background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important;
}
.subtabs button.on { border-color: transparent !important; box-shadow: none !important; }
/* linguette e filtri a scelta unica (periodo, vista, tipo, modo): come le linguette dell'area nel guscio (.c-tabs). Le voci
   da sole, in grigio; quella scelta nel blu del brand, più decisa, con il filo blu sotto. Niente fondo dietro (regola del
   capo), alte quanto i pulsanti della stessa riga, vanno a capo invece di uscire dallo schermo. */
:is(.seg, .g-types, .st-filters) { display: inline-flex; flex-wrap: wrap; align-items: stretch; gap: 0 .143rem !important; overflow: visible !important;
  max-width: 100%; border-radius: 0 !important; }
:is(.seg, .g-types, .st-filters) > :is(button, a) { position: relative; flex: 0 0 auto; min-height: var(--ctl-h); height: auto; padding: .2rem .714rem;
  border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--muted);
  font: 500 var(--fs-base)/1.2 var(--font); transform: none; }
:is(.seg, .g-types, .st-filters) > :is(button, a):hover:not(.on) { color: var(--ink) !important; background: transparent !important; }
:is(.seg, .g-types, .st-filters, .ix-rail) > :is(button, a).on, :is(.seg, .g-types, .st-filters, .ix-rail) > :is(button, a).on:hover {
  background: transparent !important; color: var(--c-accent-text, var(--accent)) !important; font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent) !important; }
:is(.seg, .g-types, .st-filters) > button > svg { width: var(--ic-sm); height: var(--ic-sm); }
:is(.seg, .g-types, .st-filters) > button.on > svg { color: currentColor; }
/* le scelte fra più voci (velocità, formato, quante, giorni, social, profili, gruppi): come i «chip» del guscio, un filo
   intorno; quella scelta con il filo blu, mai un fondo */
:is(.st-chips button, .xp-groups button, .mp-presets > button, .ix-chips .ix-chip, .vd-chips .ix-chip, .days label, .sc-chip, .ex-prof .ex-chip span) {
  min-height: var(--ctl-h-sm); height: auto !important; border: 1px solid var(--line-strong) !important; background: transparent !important;
  color: var(--ink-2); font-size: var(--fs-base) !important; }
:is(.st-chips button, .xp-groups button, .mp-presets > button, .ix-chips .ix-chip, .vd-chips .ix-chip, .days label, .sc-chip, .ex-prof .ex-chip span):hover {
  background: transparent !important; color: var(--ink); border-color: var(--c-faint, var(--muted)) !important; }
:is(.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(.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: transparent !important; color: var(--c-accent-text, var(--accent)) !important; border-color: var(--accent) !important;
  box-shadow: inset 0 0 0 1px var(--accent) !important; font-weight: 600; }
:is(.st-chips, .xp-groups, .mp-presets, .ix-chips, .vd-chips, .days, .sc-targets, .ex-prof-chips) { flex-wrap: wrap !important; overflow: visible !important; }
/* le domande degli agenti: niente riquadro color sabbia, una riga ambra a sinistra dice «tocca a te» */
.ag-qa, .home-questions .ag-qa {
  background: transparent !important; border: 0 !important; border-left: 2px solid #f59e0b !important; border-radius: 0 !important;
  box-shadow: none !important; padding: .35rem 0 .35rem .85rem !important;
}
/* la rubrica: le righe sulla pagina, una riga sottile tra un contatto e l'altro (niente scheda bianca per lettera) */
.ct-group { background: transparent !important; border: 0 !important; border-top: 1px solid var(--line) !important;
  border-radius: 0 !important; box-shadow: none !important; }
/* Studio: un'etichetta senza scelte sotto (nessun servizio collegato) non resta da sola */
div:has(> .st-lbl + .st-chips:empty):not(:has(> .st-unsup:not(.hidden))) { display: none; }   /* resta se dice perché è vuoto */

/* ------------------------------------------------------------------ scritte nitide */
/* ovunque la stessa resa: crenatura e legature del font, niente spaziatura stretta sul testo normale (a 14 px stringe
   le lettere e le impasta); i titoli tengono il loro passo. Le linguette centrate stanno su pixel interi (agents.js,
   notify.js) e le scritte del cervello pure (brain2d.js, brain3d.js). */
html { font-kerning: normal; font-feature-settings: "kern" 1, "liga" 1, "calt" 1; text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { letter-spacing: 0; }

/* ------------------------------------------------------------------ notifiche come la chat */
/* il pannello delle notifiche si apre con lo stesso tempo e lo stesso movimento della chat (0,16 s; sul telefono sale
   dal basso in 0,24 s come le chat) */
@media (prefers-reduced-motion: no-preference) {
  body.nr-open .nr-panel, body.nr-open.nr-float .notif-rail { animation: cp-in .16s ease-out; }
  @media (max-width: 860px) {
    body.nr-open .notif-rail { animation: nr-rise .24s cubic-bezier(.2, .8, .2, 1); }
    body.nr-open .nr-panel { animation: none; }
  }
}
@keyframes nr-rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ------------------------------------------------------------------ aggiornamento: barra in percentuale */
.upd-progress { position: relative; height: .55rem; margin: .6rem 0 .35rem; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); }
.upd-progress > i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; transition: width .6s ease;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #7c5cff)); }
.upd-progress.indeterminate > i { animation: upd-slide 1.4s ease-in-out infinite; }
@keyframes upd-slide { from { left: -35%; } to { left: 100%; } }
.upd-progress-note { margin: 0; font-size: var(--fs-base); color: var(--ink-2); }
.upd-progress-note b { color: var(--ink); font-variant-numeric: tabular-nums; margin-right: .2rem; }
.upd-checking { display: flex; align-items: center; gap: .45rem; margin: 0 0 .4rem; color: var(--ink-2); }
.upd-checking .dot { animation: busy-spin 0s; background: var(--accent); }
@media (prefers-reduced-motion: reduce) { .upd-progress.indeterminate > i { animation: none; left: 0; } }

/* chat: il fondo bianco sta solo nel riquadro della conversazione, non su tutta la pagina (con la linguetta degli
   agenti in cima la pagina scende e restava una striscia bianca sopra la conversazione ma non sopra lo storico) */
.tab-chat { background: transparent !important; }

/* ------------------------------------------------------------------ Impostazioni: indice dall'alto, «Esci» in fondo */
/* computer: l'indice parte alla stessa altezza del titolo «Impostazioni»; «Esci» è l'ultima voce dell'indice
   (sul telefono l'ultima voce dell'elenco delle impostazioni); non sta più in nessun'altra schermata */
@media (min-width: 861px) {
  #tab-settings > .page-head { grid-column: 1; }
  #tab-settings > .set-nav { grid-row: 1 / span 41; max-height: calc(100dvh - 1.6rem); overflow-y: auto;
    padding-bottom: 5.5rem !important; }   /* l'ultima voce («Esci») sopra la barra della chat */
}
.set-nav .set-logout { margin-top: .6rem; border-top: 1px solid var(--line) !important; border-radius: 0 0 var(--radius) var(--radius);
  padding-top: .75rem; color: var(--muted); }
.set-nav .set-logout > svg { color: var(--muted); }
.set-nav .set-logout:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, transparent); }
.set-nav .set-logout:hover > svg { color: var(--danger); }

/* Cervello › scheda del nodo: «In breve» in frasi intere (chi è, cosa sa, quando, come, perché), le informazioni con
   la matita per correggerle, righe sottili al posto dei riquadri; date, fonti, forza dei legami e schema solo con
   «Dettagli» (.bc-tech-on) */
.brain-card:not(.bc-tech-on) .bc-tech { display: none !important; }
.bc-story { display: grid; grid-template-columns: minmax(4.4rem, auto) minmax(0, 1fr); gap: .55rem .85rem; margin: 0; }
.bc-story dt { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; line-height: 1.45; padding-top: .05rem; }
.bc-story dd { margin: 0; display: grid; gap: .3rem; min-width: 0; }
.bc-story dd > p { margin: 0; line-height: 1.45; overflow-wrap: anywhere; color: var(--ink); }
.bc-story ~ .bc-facts, .bc-story ~ .bc-sub, .brain-card .bc-acts { border-top: 1px solid var(--line); padding-top: .55rem; margin-top: .1rem; }
.bc-pen.icon-btn { width: 1.65rem; height: 1.65rem; min-height: 0; padding: 0; margin-left: .2rem; vertical-align: -.35rem;
  color: var(--muted); background: none; box-shadow: none; }
.bc-pen.icon-btn:hover, .bc-pen.icon-btn:focus-visible { color: var(--accent); }
.bc-pen svg { width: var(--ic-xs); height: var(--ic-xs); }
.brain-card .bk-facts { gap: 0; }
.brain-card .bk-facts li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: .1rem .3rem;
  padding: .32rem 0; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.brain-card .bk-facts li:first-child { border-top: 0; padding-top: 0; }
.brain-card .bk-facts li > p:first-child { margin: 0; line-height: 1.45; }
.bc-fact-acts { display: inline-flex; gap: 0; margin-top: -.2rem; }
.bc-fact-acts .bc-pen.icon-btn { margin-left: 0; vertical-align: 0; }
.brain-card .bk-facts .bk-det { grid-column: 1 / -1; }
.bc-add { display: inline-flex; align-items: center; gap: .3rem; justify-self: start; font-size: var(--fs-sm); }
.bc-add svg { width: var(--ic-xs); height: var(--ic-xs); }
.brain-card .bk-list { gap: 0; }
.brain-card .bk-row { padding: .45rem 0; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.brain-card .bk-row:first-child { border-top: 0; padding-top: .1rem; }
.brain-card .bk-sent { font-weight: 500; }
.brain-card .bc-items { gap: 0; }
.brain-card .bc-items li { padding: .35rem 0; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.brain-card .bc-items li:first-child { border-top: 0; }
.brain-card .bc-items li.me { background: none; }
.brain-card .bc-items li.me .bc-who { color: var(--accent); }
.bc-techbox { display: grid; gap: .45rem; border-top: 1px solid var(--line); padding-top: .55rem; }
.bc-techbox .bc-sub { border: 0; padding: 0; margin: 0; }
.bc-before { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: var(--fs-sm); }
.bc-before p { margin: 0; } .bc-before li > p:first-child { color: var(--muted); text-decoration: line-through; }
#bc-tech[aria-pressed="true"] { color: var(--accent); }

/* Niente barre di scorrimento in tutta l'app (indice delle Impostazioni, pannelli, liste, finestre): si scorre lo
   stesso con la rotella, il dito e la tastiera; la regola vince su quelle «sottili» dei singoli pannelli */
*, *::before, *::after { scrollbar-width: none !important; }
*::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }

/* ------------------------------------------------------------------ accesso: occhio della password e «Ricordami» */
/* l'occhio sta dentro la casella, a destra, senza riquadro: un tocco mostra la password, un altro la nasconde (pweye.js) */
.pw-eye { position: relative; display: block; min-width: 0; }
.pw-eye > input { width: 100%; box-sizing: border-box; padding-right: 2.9rem; }
.pw-eye > .pw-eye-btn {
  position: absolute; top: 0; right: 0; bottom: 0; width: 2.75rem; min-height: 0; height: auto; padding: 0; margin: 0;
  display: grid; place-items: center; border: 0; background: none; box-shadow: none !important; color: var(--muted);
  border-radius: var(--radius); cursor: pointer; transform: none !important;
}
.pw-eye > .pw-eye-btn:hover { color: var(--ink); background: none; }
.pw-eye > .pw-eye-btn[aria-pressed="true"] { color: var(--accent); }
.pw-eye > .pw-eye-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent) !important; }
.pw-eye-btn svg { width: var(--ic-sm); height: var(--ic-sm); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
input::-ms-reveal, input::-ms-clear { display: none; }            /* niente secondo occhio di Edge */
/* «Ricordami»: la casella di spunta sotto la password, allineata a sinistra */
.login-card .lg-remember { align-items: center; margin: .15rem 0 0; font-size: var(--fs-base); color: var(--ink-2); cursor: pointer; width: max-content; }
.login-card .lg-remember input { margin-top: 0; cursor: pointer; }

/* ------------------------------------------------------------------ Collega account: tutto sul foglio */
/* sezioni, modi di WhatsApp, social e app del creatore stanno sulla pagina: niente riquadri, ogni gruppo comincia con
   una riga sottile; il modo consigliato e i social collegati si riconoscono dalla riga colorata in cima */
.cn-section { background: transparent !important; border: 0 !important; border-top: 1px solid var(--line) !important;
  border-radius: 0 !important; box-shadow: none !important; padding: 1.15rem 0 0 !important; }
.cn-methods, .cn-grid { gap: 1.1rem 1.6rem; }
.cn-method, .cn-net { background: transparent !important; border: 0 !important; border-top: 1px solid var(--line) !important;
  border-radius: 0 !important; box-shadow: none !important; padding: .9rem 0 .2rem !important; }
.cn-method.main { border-top: 2px solid var(--accent) !important; }
.cn-net.on { border-top: 2px solid var(--ok) !important; }
.cn-alts { border-top: 0; padding-top: .2rem; }
.cn-reqs { gap: 0; }
.cn-reqs li { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: .6rem 0; }
.cn-app { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: .95rem 0 .45rem; margin: 0; }
.cn-app legend { float: left; width: 100%; padding: 0; margin: 0 0 .55rem; font: 500 var(--fs-md)/1.25 var(--font-display); }
.cn-app legend + * { clear: both; }
.cn-once { background: transparent; border: 0; border-left: 2px solid #f59e0b; border-radius: 0; padding: .35rem 0 .35rem .85rem; }
/* i pulsanti della stessa riga (Mostra il QR · Registra con Meta · Chiedi all'assistenza) su una riga sola, stessa altezza */
.cn-actions button { white-space: nowrap; }

/* ------------------------------------------------------------------ linguette: sottolineate, mai un riquadro dietro */
/* Regola del capo: dietro la linguetta scelta nessun fondo colorato. Come le linguette dell'area nel guscio (Studio ·
   Editor · Social): la voce scelta nel blu del brand, più decisa, con un filo blu sotto, le altre in grigio; una riga
   sottile sotto tutta la fila. Sul telefono vanno a capo invece di uscire dallo schermo. */
:is(.subtabs, .set-subtabs) { border-bottom: 1px solid var(--line) !important; gap: 0 .2rem !important; row-gap: .1rem !important; }
:is(.subtabs, .set-subtabs) button {
  background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  color: var(--muted); font-weight: 500; padding: .5rem .75rem; min-height: 2.5rem; white-space: nowrap;
}
:is(.subtabs, .set-subtabs) button:hover:not(.on) { color: var(--ink); background: transparent !important; }
:is(.subtabs, .set-subtabs) button.on, :is(.subtabs, .set-subtabs) button.on:hover {
  background: transparent !important; color: var(--c-accent-text, var(--accent)) !important; font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--accent) !important; border-color: transparent !important;
}
:is(.subtabs, .set-subtabs) button:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent) !important; }
@media (max-width: 860px) {
  :is(.subtabs, .set-subtabs) { flex-wrap: wrap !important; overflow: visible !important; margin-inline: 0 !important; width: auto; }
  :is(.subtabs, .set-subtabs) button { padding: .45rem .6rem; }
}

/* ------------------------------------------------------------------ la pillola degli agenti al lavoro (telefono) */
/* sul telefono, fuori dagli spazi con le linguette (es. Impostazioni), la pillola «Supervisore: …» sta subito sotto la
   barra in alto: la pagina le lascia il suo spazio, così non copre il titolo */
@media (max-width: 860px) {
  html:not(.c-shell) body.agents-on:not(.in-space) main > .tab:not(.tab-chat):not(.tab-embed) { padding-top: calc(1.1rem + var(--ag-h, 1.571rem)); }   /* la pillola (agents.js la misura: anche su due righe) */
  /* anche nella chat la pillola (e quella dei lavori, quando scende sotto la barra) non copre la testata */
  html:not(.c-shell) body.agents-on main > .tab-chat .chat-main { padding-top: calc(.75rem + var(--ag-h, 1.571rem)); }
  html:not(.c-shell) body.work-on.work-below main > .tab-chat .chat-main { padding-top: calc(.75rem + var(--work-h, 2.5rem)); }
  /* la barra in alto: le icone ai lati sempre intere, il marchio in mezzo si stringe se il testo è molto grande */
  html:not(.c-shell) .topbar { grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr); }
  html:not(.c-shell) .topbar .tb-brand { min-width: 0; }
  html:not(.c-shell) .topbar .tb-brand :is(.gx-brand, .gx-logo, .logo-box) { max-width: 100%; }
}

/* Da approvare: deciso, la riga sparisce subito (scivola e si richiude); se il server dice di no, torna (app.js) */
#appr-list > .item { transition: max-height .26s cubic-bezier(.4, 0, .2, 1), opacity .18s ease-out, transform .26s cubic-bezier(.4, 0, .2, 1),
  padding .26s, margin .26s; }
#appr-list > .item.appr-leave { max-height: 0 !important; opacity: 0; transform: translateX(1.5rem); overflow: hidden; padding-top: 0; padding-bottom: 0;
  margin-top: 0; margin-bottom: 0; border-color: transparent; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { #appr-list > .item { transition: none; } }

/* ------------------------------------------------------------------ misura di tutta l'interfaccia (Impostazioni › Aspetto)
   Una scelta sola, sei misure (look.js, UI_SCALES): --ui-scale sulla radice → html { font-size } (style.css) e tutto è in
   rem, nel guscio nuovo e nelle pagine di sempre. Testi interi a ogni misura (regola del capo): titoli, etichette,
   pulsanti, linguette e pillole vanno a capo, mai i puntini. */
/* la scelta: sei pulsanti della stessa altezza, ognuno con «Aa» alla misura che darà; sul telefono tre per riga */
.look-sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 7.2rem), 1fr)); gap: .429rem; }
.look-sizes button { display: grid; grid-template-rows: calc(1.25rem * 1.4 / var(--ui-scale, 1)) auto; justify-items: center; align-content: center;
  gap: .25rem; min-height: 4.4rem; padding: .45rem .4rem;
  text-align: center; line-height: 1.2; overflow-wrap: anywhere; background: transparent; box-shadow: none; color: var(--ink-2); }
.look-sizes button:hover:not(.on) { background: var(--surface-2); color: var(--ink); }
.look-sizes button.on { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 600; }
.look-sizes .ls-aa { align-self: end; font: 500 calc(1.25rem * var(--k, 1) / var(--ui-scale, 1)) / 1 var(--font-display); letter-spacing: -.01em; }
.look-sizes [data-scale="0.8"] { --k: .8; } .look-sizes [data-scale="0.9"] { --k: .9; } .look-sizes [data-scale="1"] { --k: 1; }
.look-sizes [data-scale="1.1"] { --k: 1.1; } .look-sizes [data-scale="1.2"] { --k: 1.2; } .look-sizes [data-scale="1.35"] { --k: 1.35; }
/* le linguette degli spazi (Studio · Editor · Social…) e degli account di WhatsApp e Telegram: vanno a capo, mai
   nascoste oltre il bordo */
:is(.space-bar, .account-tabs) { flex-wrap: wrap; overflow: visible; }

/* ------------------------------------------------------------------ la chat sul telefono: pulsanti grandi da toccare
   Allega, Foto, Studio, Detta, Parla, Invia: almeno 44 px (crescono con la misura del testo), tutti alti uguali sulla
   stessa riga; «Chi risponde» va sulla sua riga sotto, intero. La testata va a capo invece di tagliare il titolo. */
@media (max-width: 860px) {
  :root { --chat-tap: max(44px, 2.6rem); }
  .composer-bar { flex-wrap: wrap; gap: .2rem .25rem; }
  .composer :is(.attach, .send, .vx-talk) { width: var(--chat-tap); height: var(--chat-tap); min-width: 0; min-height: 0; flex: none; }
  .composer :is(.attach, .send, .vx-talk) svg { width: var(--ic-md); height: var(--ic-md); }
  .composer .rec-cancel { min-height: var(--chat-tap); }
  .composer textarea { min-height: var(--chat-tap); }
  .composer .chat-model { order: 9; flex: 0 1 auto; max-width: 100%; height: auto; min-height: 2.15rem; padding: .25rem .6rem; text-align: left; }
  .chat-head { flex-wrap: wrap; row-gap: .25rem; justify-content: flex-end; }
  .chat-head #chat-title { flex: 1 1 7rem; }
  .chat-head :is(.icon-btn, .chat-fs button) { width: var(--chat-tap); height: var(--chat-tap); min-width: 0; min-height: 0; flex: none; }
  .chat-head .icon-btn svg { width: var(--ic-md); height: var(--ic-md); }
  /* WhatsApp e Telegram (la finestra e la pagina): stessi tocchi grandi, la casella alta quanto i pulsanti */
  .chat-pop .cp-act { width: var(--chat-tap); height: var(--chat-tap); }
  .conv-compose { align-items: flex-end; }
  .conv-compose :is(.file-btn, .send), .in-pop .conv-compose :is(.file-btn, .send) { width: var(--chat-tap); height: var(--chat-tap);
    min-height: 0; padding: 0; display: inline-grid; place-items: center; flex: none; }
  .conv-compose :is(.file-btn, .send) svg { width: var(--ic-md); height: var(--ic-md); }
  .conv-compose textarea, .in-pop .conv-compose textarea { min-height: var(--chat-tap); }
}

/* ================================================================== LE PAGINE DI SEMPRE DENTRO IL GUSCIO
   Regola del capo: la UI nuova ovunque. Le pagine di prima (Posta, Rubrica, Studio, Calendario, Attività, Procedure,
   Cervello…) aperte da un'area stanno nel foglio del guscio con la sua testata (titolo, ✕, linguette dell'area) e
   prendono le sue misure: lo stesso margine ai lati (--pad-x), la scala unica del testo e delle icone (style.css,
   --fs-*, --ic-*), i titoli di pagina come quelli del guscio, le righe sulla pagina separate da un filo (niente schede),
   linguette e filtri come le linguette dell'area. L'elenco completo in docs/ui-coerenza.md. */
html.c-shell main > .tab:not(.tab-chat):not(.tab-embed) { padding-left: var(--pad-x); padding-right: var(--pad-x); padding-top: 1.143rem; gap: 1.143rem; }
/* il titolo della pagina (sotto le linguette dell'area): un gradino sotto il titolo del foglio, con il suo filo di rete */
html.c-shell main .page-head h2 { font: 500 var(--fs-2xl)/1.2 var(--font-display); letter-spacing: -.01em; }
html.c-shell main .page-head .sub { font-size: var(--fs-md); line-height: 1.45; }
html.c-shell main .page-head .g-rule { width: min(150px, 50%); height: 8px; margin-top: .214rem; }

/* i pulsanti a icona delle pagine: grandi come quelli del guscio (un tocco comodo), l'icona della scala */
html.c-shell :is(main, .c-sheet) .icon-btn:not(.c-ibtn, .bc-pen) { min-width: var(--ctl-h); min-height: var(--ctl-h); }
/* i gruppi della pagina (pannelli, registri, la barra dei clienti nuovi) cominciano con il loro filo, allineati al
   margine della pagina: niente rientro in più dentro il foglio */
html.c-shell main > .tab :is(.panel, .registry, .lead-panel) { padding-inline: 0 !important; }
/* le righe degli elenchi (Da approvare, Calendario, Procedure…): sulla pagina, un filo fra l'una e l'altra, niente schede */
html.c-shell :is(main, .c-sheet) .list { gap: 0; }
html.c-shell :is(main, .c-sheet) .list > .item { background: none !important; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none !important;
  padding: 1rem 0; gap: .5rem; }
html.c-shell :is(main, .c-sheet) .list > .item:first-child { border-top: 0; padding-top: .286rem; }
/* i numeri della Panoramica come quelli di Oggi: sulla pagina, separati da righe sottili, il numero grande (niente schede) */
html.c-shell main .kpi-grid { gap: 0 !important; padding: .857rem 0 1rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
html.c-shell main .kpi-grid > .kpi { background: none !important; box-shadow: none !important; transform: none !important; border: 0 !important;
  border-left: 1px solid var(--line) !important; border-radius: 0 !important; min-height: 0 !important; padding: .143rem .857rem !important;
  color: var(--ink) !important; overflow: visible; display: grid; justify-items: start; align-content: start; gap: .214rem; text-align: left; }
html.c-shell main .kpi-grid > .kpi::before, html.c-shell main .kpi-grid > .kpi::after { display: none !important; }
html.c-shell main .kpi-grid > .kpi:first-child { border-left: 0 !important; padding-left: 0 !important; }
html.c-shell main .kpi-grid > .kpi .k-label { font-size: var(--fs-sm) !important; color: var(--muted) !important; }
html.c-shell main .kpi-grid > .kpi .k-value { font: 500 var(--fs-4xl)/1.1 var(--font-display) !important; letter-spacing: -.02em; color: var(--ink) !important; }
html.c-shell main .kpi-grid > .kpi.accent .k-value { color: var(--c-accent-text) !important; }
html.c-shell main .kpi-grid > .kpi .k-sub { font-size: var(--fs-sm) !important; color: var(--muted) !important; }
html.c-shell main .kpi-grid > .kpi:hover .k-value { color: var(--c-accent-text) !important; }
@media (max-width: 1100px) {
  html.c-shell main .kpi-grid { row-gap: 1rem !important; }
  html.c-shell main .kpi-grid > .kpi:nth-child(odd) { border-left: 0 !important; padding-left: 0 !important; }
}
/* la barra dei clienti nuovi, gli avvisi, le lettere della rubrica: sulla pagina, senza riquadro */
html.c-shell main .lead-bar { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: .714rem 0; margin-bottom: 0; }
html.c-shell main .ct-letter { background: var(--page); padding: .429rem 0 .286rem; color: var(--c-accent-text); }
html.c-shell main .ct-main { padding-inline: 0; }   /* le righe della rubrica allineate alle lettere e al margine */
html.c-shell main .callout { background: none; border: 0; border-left: 2px solid var(--warn); border-radius: 0; padding: .286rem 0 .286rem .857rem; }

/* l'Editor sul telefono: gli strumenti vanno a capo sulla pagina (niente striscia che scorre di lato dentro un riquadro) */
@media (max-width: 860px) {
  .ix-rail { flex-wrap: wrap; overflow: visible !important; background: none !important; border: 0 !important; border-top: 1px solid var(--line) !important;
    border-radius: 0 !important; padding: .286rem 0 0 !important; }
  .ix-rail button { flex: 1 0 4.286rem; }
}

/* WhatsApp e Telegram (le finestre che si aprono dai filtri di Messaggi e dalle notifiche): la testata come quella dei
   fogli del guscio (fondo della pagina, titolo e pulsanti a icona alti uguali), non più la fascia blu notte */
html.c-shell .chat-pop[data-app] .cp-head { min-height: var(--head-h); height: auto; padding: .571rem .571rem .571rem var(--pad-x); gap: .286rem;
  background: var(--page); color: var(--ink); border-bottom: 1px solid var(--line); }
html.c-shell .chat-pop[data-app] .cp-head > svg.cp-wave { display: none; }
html.c-shell .chat-pop[data-app] .cp-title strong { font: 500 var(--fs-xl)/1.25 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
html.c-shell .chat-pop[data-app] .cp-title small { font-size: var(--fs-sm); color: var(--muted); opacity: 1; }
html.c-shell .chat-pop[data-app] .cp-av { width: 2.571rem; height: 2.571rem; margin-right: .429rem; font-size: var(--fs-sm); }
html.c-shell .chat-pop[data-app] .cp-act { width: var(--ctl-h); height: var(--ctl-h); min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: var(--radius);
  background: transparent; color: var(--ink-2); box-shadow: none; }
html.c-shell .chat-pop[data-app] .cp-act:hover { background: var(--surface-2); color: var(--ink); }
html.c-shell .chat-pop[data-app] .cp-act svg { width: var(--ic-md); height: var(--ic-md); }
html.c-shell .chat-pop[data-app] .cp-font { font: 600 var(--fs-base)/1 var(--font); align-items: center; }
html.c-shell .chat-pop[data-app] .cp-font small { font-size: var(--fs-base); }
html.c-shell .chat-pop[data-app] .cp-dot { box-shadow: 0 0 0 2px var(--surface); }

/* ------------------------------------------------------------------ le notifiche come un foglio del guscio
   Testata come quella dei fogli (titolo, «segna tutte come lette», «elimina tutte», chiudi), i filtri come linguette
   (icona sopra e nome sotto, la scelta in blu con il filo sotto, tutte nella stessa riga), le notifiche come righe della
   pagina (le nuove con il puntino blu), l'invito alle notifiche sul telefono una riga con il filo blu a sinistra.
   Sul computer un pannello a destra alto quanto la finestra, come la chat; sul telefono una pagina intera. */
html.c-shell .nr-panel { background: var(--page); }
html.c-shell .nr-head { gap: .143rem; min-height: var(--head-h); padding: .714rem .571rem .429rem var(--pad-x); }
html.c-shell .nr-head strong { flex: 1; min-width: 0; font: 500 var(--fs-3xl)/1.2 var(--font-display); letter-spacing: -.015em; color: var(--ink); }
html.c-shell .nr-head .nr-bulk { margin: 0; gap: .143rem; }
html.c-shell .nr-head .icon-btn, html.c-shell .nr-bulk .icon-btn { width: var(--ctl-h); height: var(--ctl-h); min-width: 0; min-height: 0; padding: 0;
  display: inline-grid; place-items: center; color: var(--ink-2); background: transparent; border: 0; box-shadow: none; }
html.c-shell .nr-head .icon-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
html.c-shell .nr-head .icon-btn svg { width: var(--ic-md); height: var(--ic-md); }
html.c-shell .nr-head .icon-btn.danger:not(:disabled):hover { color: var(--danger); }
html.c-shell .nr-bar { display: block; padding: 0 var(--pad-x); border-bottom: 1px solid var(--line); }
html.c-shell .nr-filters { display: flex !important; flex-wrap: wrap; justify-content: space-between; gap: 0 .286rem; padding: 0 !important;
  background: none !important; border: 0; border-radius: 0; box-shadow: none !important; }
html.c-shell #nr-panel .nr-filters button { position: relative; width: auto; height: auto; min-height: 3.571rem; padding: .429rem .143rem .5rem; display: grid;
  grid-auto-flow: row; justify-items: center; align-content: center; gap: .214rem; border: 0; border-radius: 0; background: none !important;
  box-shadow: none !important; color: var(--muted); font: 500 var(--fs-sm)/1.15 var(--font); text-align: center; white-space: nowrap; flex: 0 1 auto;
  min-width: 2.75rem; }
html.c-shell #nr-panel .nr-filters button svg { width: var(--ic-md); height: var(--ic-md); }
html.c-shell #nr-panel .nr-filters button:hover { color: var(--ink); background: none !important; }
html.c-shell #nr-panel .nr-filters button.on { color: var(--c-accent-text); font-weight: 600; }
html.c-shell #nr-panel .nr-filters button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 1px; background: var(--accent); }
html.c-shell .nr-push-ask { margin: .286rem var(--pad-x) .571rem; padding: .286rem 0 .286rem .857rem; border-radius: 0; background: none;
  border-left: 2px solid var(--accent); font-size: var(--fs-md); gap: .571rem; }
html.c-shell .nr-push-ask button { min-height: var(--ctl-h-sm); }
html.c-shell .nr-list { padding: .286rem var(--pad-x) 2rem; }
html.c-shell .nr-sec { margin: 1rem 0 .286rem; font: 600 var(--fs-xs)/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
html.c-shell .nr-item, html.c-shell .nr-item.unread, html.c-shell .nr-run { grid-template-columns: 2.571rem minmax(0, 1fr) auto; gap: .857rem; padding: .857rem 0;
  border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }
html.c-shell .nr-sec + :is(.nr-item, .nr-run) { border-top: 0; }
html.c-shell .nr-item:hover, html.c-shell .nr-run:hover { background: none; }
html.c-shell .nr-item:hover .nr-title { color: var(--c-accent-text); }
/* l'icona nel suo tondo tinto, come le righe di Oggi; il puntino blu dice «nuova» */
html.c-shell .nr-ico, html.c-shell .nr-ico:is(.k-mail, .k-whatsapp, .k-telegram, .k-activity, .k-system) { position: relative; width: 2.571rem; height: 2.571rem;
  color: var(--ic, var(--accent)); background: color-mix(in srgb, var(--ic, var(--accent)) 14%, var(--surface)); box-shadow: none; }
html.c-shell .nr-ico.k-mail { --ic: var(--c-mail); } html.c-shell .nr-ico.k-whatsapp { --ic: var(--c-wa); } html.c-shell .nr-ico.k-telegram { --ic: var(--c-tg); }
html.c-shell .nr-ico.k-activity { --ic: var(--c-ai); } html.c-shell .nr-ico.k-system { --ic: var(--c-teal); }
html.c-shell .nr-ico.err { --ic: var(--danger); }
html.c-shell .nr-ico svg { width: var(--ic-lg); height: var(--ic-lg); }
html.c-shell .nr-item.unread .nr-ico::after { content: ""; position: absolute; top: -.071rem; right: -.071rem; width: .714rem; height: .714rem; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 2px var(--page); }
html.c-shell .nr-run .nr-ico { background: transparent; }
html.c-shell .nr-title { font: 600 var(--fs-lg)/1.3 var(--font); color: var(--ink); transition: color .15s; }
html.c-shell .nr-item:not(.unread) .nr-title { font-weight: 500; }
html.c-shell .nr-body { font: 400 var(--fs-md)/1.4 var(--font); color: var(--ink-2); }
html.c-shell .nr-meta { font: 500 var(--fs-sm)/1.3 var(--font); color: var(--muted); }
html.c-shell .nr-do { gap: .429rem; margin-top: .571rem; }
html.c-shell .nr-do button { min-height: var(--ctl-h-sm); padding: .2rem .857rem; font-size: var(--fs-base); }
html.c-shell .nr-acts { gap: .143rem; opacity: 1; }
html.c-shell .nr-acts .icon-btn { width: var(--ctl-h-sm); height: var(--ctl-h-sm); min-width: 0; min-height: 0; padding: 0; color: var(--muted); }
html.c-shell .nr-acts .icon-btn:hover { color: var(--ink); background: var(--surface-2); }
html.c-shell .nr-acts .icon-btn svg { width: var(--ic-sm); height: var(--ic-sm); }
html.c-shell .nr-empty { padding: 2.857rem 0; font-size: var(--fs-md); color: var(--muted); text-align: center; }
@media (min-width: 861px) {
  html.c-shell body.nr-open .notif-rail, html.c-shell body.nr-open.nr-float .notif-rail { top: 0; right: 0; bottom: 0; height: auto; align-self: stretch; margin: 0; width: 26rem;
    border-radius: 0; border: 0; border-left: 1px solid var(--line); background: var(--page); }
  @media (prefers-reduced-motion: no-preference) { html.c-shell body.nr-open .notif-rail { animation: c-chat-in .26s cubic-bezier(.2, .8, .2, 1) both; } }
  html.c-shell body.nr-open .nr-panel { animation: none; }
}
@media (max-width: 860px) {
  html.c-shell .nr-head { padding-top: calc(env(safe-area-inset-top, 0px) + .714rem); }
  html.c-shell body.nr-open .notif-rail { padding-top: 0; }
}

/* la chat: la casella non ha un suo riquadro acceso dentro quello della barra per scrivere (si accende la barra) */
.composer textarea:focus, .composer textarea:focus-visible { box-shadow: none !important; outline: none; border: 0; }

/* ------------------------------------------------------------------ tema scuro: i grigi caldi di Claude sul web
   I token stanno in style.css (--ground, --page, --side, --surface…); qui solo quello che non è un token: il menu
   dell'interfaccia classica sulla zona laterale (un tono sotto la pagina) */
:root[data-theme="dark"] .sidebar { background-color: var(--side); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sidebar { background-color: var(--side); } }