/* Graphorum · il guscio «Tre pulsanti», tappa 2: Messaggi in una lista sola (c-messaggi.js), la scheda del cliente
   (c-cliente.js), la Squadra degli agenti e il Diario del cervello (c-agenti.js), le Impostazioni per domande in Tu
   (c-tu.js) e la voce dentro la pagina.
   Le regole di sempre (polish.css): la pagina è il foglio, righe sottili e spazio, nessun riquadro dietro caselle e
   pulsanti, un solo arrotondamento; i colori delle aree e le ombre del guscio (guscio.css); tutte le misure in rem. */

/* ------------------------------------------------------------------ pezzi comuni */
.c-field { display: grid; gap: .5rem; margin: 1rem 0 0; font: 500 var(--fs-base)/1.3 var(--font); color: var(--ink-2); }
.c-field textarea { min-height: 6.5rem; line-height: 1.55; }
.c-row-sm { min-height: 3.571rem; }
.c-row-sm .c-rico { width: 2.286rem; height: 2.286rem; }
.c-rows-more { margin-top: .571rem; border-top: 1px solid var(--line); }
.c-rows-more > li:first-child > .c-row { border-top: 0; }
.c-flash { animation: c-flash 1.8s ease-out; border-radius: var(--radius); }
@keyframes c-flash { 0%, 35% { background: color-mix(in srgb, var(--accent) 16%, transparent); } 100% { background: transparent; } }
mark { background: color-mix(in srgb, var(--c-t-amber, #f5b941) 28%, transparent); color: inherit; border-radius: .214rem; padding: 0 .07rem; }
/* l'avatar di una persona o di un'azienda: la sua foto o il suo logo, se c'è; altrimenti le iniziali nel tondo tinto */
.c-pav { position: relative; width: 2.571rem; height: 2.571rem; border-radius: 50%; display: grid; place-items: center; flex: none; overflow: hidden;
  font: 700 var(--fs-sm)/1 var(--font); letter-spacing: .02em; color: var(--ac, var(--c-accent-text));
  background: linear-gradient(180deg, color-mix(in srgb, var(--ac, var(--accent)) var(--c-bub-mix, 13%), var(--surface)),
    color-mix(in srgb, var(--ac, var(--accent)) var(--c-bub-mix2, 21%), var(--surface)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ac, var(--accent)) 16%, transparent); }
.c-pav img { width: 100%; height: 100%; object-fit: cover; display: block; background: #fff; }
.c-pav.logo { box-shadow: 0 0 0 1px var(--line); }
.c-pav.logo img { object-fit: contain; padding: 12%; }
.c-av.c-pav-on { padding: 0; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--c-photo-sh); }
.c-av.c-pav-on img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-av.c-pav-on.logo img { object-fit: contain; padding: 12%; }
/* la G del brand nei pezzi nuovi: piena, senza il tratto delle icone */
svg.ca-g, svg.cd-g, svg.c-vx-g, .ca-root use { fill: currentColor; stroke: none; }
/* i pezzi di una riga (quando, dove, chi): ognuno si traduce da solo, il punto in mezzo lo mette il foglio di stile */
.cc-meta > span + span::before, .cc-tl-m > span + span::before, .ca-work-t > span::before {
  content: "·"; margin: 0 .5rem; color: var(--muted); }

/* ------------------------------------------------------------------ Impostazioni per domande (c-tu.js) */
html.c-shell #set-tabs .q-off { display: none !important; }
html.c-shell .set-pane > .q-hide, html.c-shell #set-back.q-hide { display: none !important; }
html.c-shell #tab-settings[data-q] > .page-head h2 { display: none; }   /* la domanda è già in testa al foglio; «Si salvano da sole» resta */
.c-tu-find { margin: 0 0 .571rem; }
.c-find { display: flex; align-items: center; gap: .571rem; height: var(--c-ctl); padding: 0 .857rem; border: 1px solid var(--line-strong);
  border-radius: var(--radius); background: transparent; color: var(--muted); }
.c-find:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.c-find svg { width: var(--ic-sm); height: var(--ic-sm); flex: none; }
.c-find input { flex: 1; min-width: 0; height: 100%; border: 0 !important; background: transparent !important; box-shadow: none !important;
  padding: 0; font: 400 var(--fs-md)/1 var(--font); color: var(--ink); outline: none; }
.c-find-res { margin-top: .286rem; }
.c-find-none { padding: .857rem 0; }

/* ------------------------------------------------------------------ Messaggi in una lista sola (c-messaggi.js) */
.cm-page { padding-left: 1.429rem; padding-right: 1.429rem; }
.cm-tools { display: flex; align-items: center; gap: .571rem; flex-wrap: wrap; padding: 0 0 .714rem; border-bottom: 1px solid var(--line); }
.cm-only.on { color: var(--c-accent-text); border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong)); }
.cm-only .c-badge-n { min-width: 1.286rem; height: 1.286rem; font-size: var(--fs-2xs); background: var(--accent); color: #fff; }
.cm-apps { display: flex; gap: 1rem; flex-wrap: wrap; }
.cm-apps .c-link svg:first-child { width: var(--ic-sm); height: var(--ic-sm); }
.cm-list { list-style: none; margin: 0; padding: 0; }
.cm-row { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; padding: .857rem 0; border-top: 1px solid var(--line); }
.cm-row > .cm-av { grid-row: span 2; }
.cm-row > .cm-flags { grid-column: 2; }
.cm-row:first-child { border-top: 0; }
.cm-av { position: relative; width: 2.857rem; height: 2.857rem; min-height: 0; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: none; box-shadow: none; cursor: pointer; align-self: start; }
.cm-av .c-pav { width: 2.857rem; height: 2.857rem; }
.cm-av:hover .c-pav { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ac, var(--accent)) 40%, transparent); }
.cm-ch { position: absolute; right: -.214rem; bottom: -.214rem; width: 1.286rem; height: 1.286rem; border-radius: 50%; display: grid; place-items: center;
  color: #fff; box-shadow: 0 0 0 2px var(--page); }
.cm-ch svg { width: var(--ic-xs); height: var(--ic-xs); stroke-width: 2.2; }
.cm-ch.mail { background: var(--c-t-blue); } .cm-ch.whatsapp { background: #12a56a; } .cm-ch.telegram { background: #0b8ecf; } .cm-ch.social { background: #c27c0e; }
.cm-main { display: grid; gap: .214rem; min-width: 0; width: 100%; height: auto; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none;
  text-align: left; color: var(--ink); cursor: pointer; justify-content: stretch; }
.cm-main:hover { background: none; }
.cm-main:hover .cm-name { color: var(--c-accent-text); }
.cm-top { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.cm-name { font: 600 var(--fs-lg)/1.3 var(--font); overflow-wrap: anywhere; min-width: 0; }
.cm-dot { width: .571rem; height: .571rem; border-radius: 50%; background: var(--accent); flex: none; }
.cm-when { margin-left: auto; flex: none; color: var(--muted); font: 500 var(--fs-sm)/1 var(--font); }
.cm-row.unread .cm-when { color: var(--c-accent-text); }
.cm-txt { font: 400 var(--fs-md)/1.4 var(--font); color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere; }
.cm-row.unread .cm-txt { color: var(--ink-2); }
.cm-flags { display: flex; flex-wrap: wrap; gap: .429rem .857rem; margin-top: .214rem; }
.cm-flag { display: inline-flex; align-items: center; gap: .3rem; height: auto; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none;
  color: var(--muted); font: 500 var(--fs-sm)/1.3 var(--font); }
.cm-flag svg { width: var(--ic-xs); height: var(--ic-xs); }
.cm-flag.hi { color: var(--danger); }
.cm-flag.ok { color: var(--c-t-mint); }
button.cm-flag { cursor: pointer; }
button.cm-flag:hover { text-decoration: underline; background: none; }
.cm-wait, .cm-err { padding: 1rem 0; }
.cm-err { display: flex; gap: .571rem; align-items: center; border-top: 2px solid var(--danger); }
.cm-quote { margin: .286rem 0 .571rem; }
@media (min-width: 861px) { .cm-page { padding-left: 1.714rem; padding-right: 1.714rem; } }

/* ------------------------------------------------------------------ la scheda del cliente (c-cliente.js) */
.cc-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; padding: .286rem 0 1rem; }
.cc-pic { position: relative; width: 4.571rem; height: 4.571rem; }
.cc-pic .c-pav { width: 4.571rem; height: 4.571rem; font-size: var(--fs-2xl); box-shadow: var(--c-photo-sh); }
.cc-pic-btn { position: absolute; right: -.286rem; bottom: -.286rem; width: 1.857rem; height: 1.857rem; min-height: 0; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface); color: var(--ink-2); box-shadow: 0 0 0 1px var(--line-strong), 0 2px 6px -2px rgba(16, 24, 40, .3); cursor: pointer; }
.cc-pic-btn svg { width: var(--ic-sm); height: var(--ic-sm); }
.cc-pic-btn:hover { color: var(--c-accent-text); background: var(--surface); }
.cc-reach { margin: 0; font: 400 var(--fs-md)/1.4 var(--font); color: var(--muted); overflow-wrap: anywhere; }
.cc-tags { display: flex; flex-wrap: wrap; gap: .286rem .857rem; margin: .429rem 0 0; }
.cc-tags span { font: 600 var(--fs-xs)/1.2 var(--font); color: var(--c-accent-text); }
.cc-tags span::before { content: ""; display: inline-block; width: .429rem; height: .429rem; border-radius: 50%; background: currentColor; margin-right: .357rem; vertical-align: .1em; }
.cc-btns { display: flex; flex-wrap: wrap; gap: .571rem; padding: 0 0 1rem; }
.cc-btns .c-btn svg { width: var(--ic-sm); height: var(--ic-sm); }
.cc-btns a.c-btn, .cc-btns a.c-btn:hover { text-decoration: none; }
.cc-sec { border-top: 1px solid var(--line); padding: .857rem 0 .571rem; }
.cc-sec .c-sec-h { min-height: 2rem; }
.cc-lead { margin: .286rem 0 .143rem; font: 400 var(--fs-md)/1.45 var(--font); }
.cc-facts { list-style: none; margin: .286rem 0 0; padding: 0; display: grid; gap: .714rem; }
.cc-facts li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .714rem; align-items: start; font: 400 var(--fs-md)/1.45 var(--font); }
.cc-facts li > svg { width: var(--ic-sm); height: var(--ic-sm); color: var(--c-t-violet); margin-top: .143rem; }
.cc-facts small { display: block; color: var(--muted); font-size: var(--fs-sm); margin-top: .143rem; }
.cc-tl { list-style: none; margin: .286rem 0 0; padding: 0 0 0 .5rem; border-left: 1px solid var(--line); }
.cc-tl-row { position: relative; display: grid; gap: .143rem; width: 100%; height: auto; min-height: 0; padding: .571rem 0 .571rem 1rem; border: 0;
  background: none; box-shadow: none; text-align: left; color: var(--ink); cursor: pointer; }
.cc-tl-row:hover { background: none; }
.cc-tl-row:hover .cc-tl-t { color: var(--c-accent-text); }
.cc-tl-dot { position: absolute; left: -.857rem; top: .929rem; width: .643rem; height: .643rem; border-radius: 50%; background: var(--page);
  box-shadow: 0 0 0 2px var(--accent); }
.cc-tl-m { display: inline-flex; align-items: center; gap: .357rem; color: var(--muted); font: 500 var(--fs-sm)/1.2 var(--font); }
.cc-tl-m svg { width: var(--ic-xs); height: var(--ic-xs); }
.cc-tl-t { font: 400 var(--fs-md)/1.4 var(--font); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ------------------------------------------------------------------ la Squadra degli agenti (c-agenti.js) */
.ca-page, .cd-page { padding-left: 1.429rem; padding-right: 1.429rem; }
@media (min-width: 861px) { .ca-page, .cd-page { padding-left: 1.714rem; padding-right: 1.714rem; } }
.ca-wait { padding: 1.429rem 0; }
.ca-g { width: 1.429rem; height: 1.429rem; display: block; color: var(--ink); }
.ca-sum { display: flex; flex-wrap: wrap; gap: .286rem 1.143rem; padding: .143rem 0 .571rem; color: var(--muted); font: 500 var(--fs-base)/1.3 var(--font); }
.ca-sum b { color: var(--ink); font-weight: 700; margin-right: .214rem; }
.ca-graph { display: block; width: 100%; height: auto; max-width: 54rem; overflow: visible; margin: .286rem 0 .571rem; }
.ca-graph text { font: 600 var(--fs-2xs) var(--font); fill: var(--muted); stroke: none; }
.ca-graph .n { font: 700 var(--fs-xs) var(--font); fill: var(--ink-2); }
.ca-arc { fill: none; stroke: var(--line-strong); stroke-width: 1.2; }
.ca-arc.working { stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 5 6; animation: ca-flow 1.1s linear infinite; }
.ca-arc.asks { stroke: var(--c-t-amber); stroke-width: 1.6; }
.ca-arc.error { stroke: var(--danger); }
.ca-arc.paused, .ca-arc.off { stroke-dasharray: 2 5; }
@keyframes ca-flow { to { stroke-dashoffset: -22; } }
@media (prefers-reduced-motion: reduce) { .ca-arc.working { animation: none; } }
.ca-node { cursor: pointer; outline: none; }
.ca-node .ring { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.2; transition: stroke .15s; }
.ca-node use { color: var(--ink-2); }
.ca-node.working .ring { stroke: var(--accent); stroke-width: 2; }
.ca-node.working use { color: var(--c-accent-text); }
.ca-node.asks .ring { stroke: var(--c-t-amber); stroke-width: 2; }
.ca-node.asks use { color: var(--c-t-amber); }
.ca-node.error .ring { stroke: var(--danger); }
.ca-node.paused, .ca-node.off { opacity: .6; }
.ca-node:hover .ring, .ca-node:focus-visible .ring { stroke: var(--accent); stroke-width: 2.4; }
.ca-root circle { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; filter: drop-shadow(0 2px 4px rgba(16, 24, 40, .18)); }
.ca-root use { color: var(--ink); }
.ca-root text { font-weight: 700; fill: var(--ink); }
.ca-work { display: flex; align-items: center; gap: .714rem; width: 100%; height: auto; min-height: var(--c-ctl); padding: .571rem 0; border: 0;
  border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; color: var(--ink); text-align: left; cursor: pointer; }
.ca-work > svg:first-child { color: var(--accent); width: var(--ic-md); height: var(--ic-md); }
.ca-work span { flex: 1; font: 400 var(--fs-md)/1.3 var(--font); }
.ca-work:hover { background: none; color: var(--c-accent-text); }
.ca-rows, .ca-jobs, .ca-log { list-style: none; margin: 0; padding: 0; }
.ca-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 1rem; width: 100%; height: auto;
  min-height: 4.286rem; padding: .714rem 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none;
  color: var(--ink); text-align: left; cursor: pointer; justify-content: stretch; }
.ca-rows > li:first-child > .ca-row { border-top: 0; }
.ca-row:hover { background: none; }
.ca-row:hover b { color: var(--c-accent-text); }
.ca-row > svg { color: var(--c-faint); }
.ca-av { position: relative; width: 2.857rem; height: 2.857rem; border-radius: 50%; display: grid; place-items: center; flex: none; --ac: var(--ag, var(--accent));
  color: var(--ac); background: linear-gradient(180deg, color-mix(in srgb, var(--ac) var(--c-bub-mix, 13%), var(--surface)),
    color-mix(in srgb, var(--ac) var(--c-bub-mix2, 21%), var(--surface)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 0 0 1px color-mix(in srgb, var(--ac) 16%, transparent); }
.ca-av svg { width: var(--ic-lg); height: var(--ic-lg); }
.ca-av.lg { width: 4.286rem; height: 4.286rem; }
.ca-av.lg svg { width: var(--ic-2xl); height: var(--ic-2xl); }
.ca-av.root { --ac: var(--ink); background: var(--surface); box-shadow: 0 0 0 1.5px var(--ink), 0 .286rem .857rem -.286rem rgba(16, 24, 40, .35); }
.ca-av.working::after { content: ""; position: absolute; inset: -.214rem; border-radius: 50%; border: 2px solid var(--accent); border-right-color: transparent;
  animation: c-spin 1.4s linear infinite; }
.ca-av.asks::after { content: ""; position: absolute; top: 0; right: 0; width: .714rem; height: .714rem; border-radius: 50%; background: var(--c-warn-dot);
  box-shadow: 0 0 0 2px var(--page); }
.ca-av.paused, .ca-av.off { filter: grayscale(.7); opacity: .75; }
@media (prefers-reduced-motion: reduce) { .ca-av.working::after { animation: none; } }
.ca-tx { display: grid; gap: .214rem; min-width: 0; }
.ca-top { display: flex; align-items: center; gap: .714rem; min-width: 0; flex-wrap: wrap; }
.ca-top b { font: 600 var(--fs-lg)/1.3 var(--font); transition: color .15s; }
.ca-st { font: 600 var(--fs-xs)/1.2 var(--font); color: var(--muted); display: inline-flex; align-items: center; gap: .357rem; }
.ca-st::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.ca-st.working { color: var(--c-accent-text); } .ca-st.asks { color: var(--c-t-amber); } .ca-st.error { color: var(--danger); }
.ca-st.idle { color: var(--c-t-mint); }
.ca-line { font: 400 var(--fs-md)/1.4 var(--font); color: var(--muted); overflow-wrap: anywhere; }
.ca-sec { border-top: 1px solid var(--line); padding: 1rem 0 .429rem; margin-top: .571rem; }
.ca-sec h3 { margin: 0; display: flex; align-items: baseline; gap: .571rem; font: 500 var(--fs-xl)/1.2 var(--font-display); letter-spacing: -.01em; }
.ca-n { color: var(--muted); font: 500 var(--fs-sm)/1 var(--font); letter-spacing: 0; }
.ca-note { margin: 0 0 .286rem; }
.ca-more { display: flex; flex-wrap: wrap; gap: .286rem 1.429rem; border-top: 1px solid var(--line); padding: .857rem 0 1.429rem; margin-top: .571rem; }
.ca-more .c-link svg:first-child { color: var(--muted); }
/* la carta d'identità */
.ca-chead { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; padding: .286rem 0 .857rem; }
.ca-role { margin: 0 0 .286rem; font: 400 var(--fs-lg)/1.4 var(--font); color: var(--ink-2); }
.ca-chead .ca-st { font-size: var(--fs-sm); }
.ca-btns { display: flex; flex-wrap: wrap; gap: .571rem; padding: 0 0 .857rem; }
.ca-csec { border-top: 1px solid var(--line); padding: .857rem 0 .571rem; }
.ca-csec .c-sec-h { min-height: 2rem; }
.ca-csec p { margin: .286rem 0; font: 400 var(--fs-md)/1.5 var(--font); }
.ca-now b { font-weight: 600; }
.ca-kv { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .714rem; padding: .429rem 0; font: 400 var(--fs-md)/1.4 var(--font); }
.ca-kv span:first-child { color: var(--muted); }
.ca-rules { white-space: pre-line; color: var(--ink-2); }
.ca-form { padding: 0 0 .857rem; }
.ca-fbtn { display: flex; justify-content: flex-end; gap: .571rem; margin-top: .714rem; }
.ca-log li { display: grid; grid-template-columns: 3.571rem minmax(0, 1fr); gap: .714rem; padding: .429rem 0; font: 400 var(--fs-md)/1.4 var(--font); }
.ca-log li .num { color: var(--muted); }
.ca-danger { border-top: 1px solid var(--line); padding: 1rem 0; }
.ca-danger .c-btn { color: var(--danger); }
.ca-pre { display: flex; flex-wrap: wrap; gap: .429rem; margin: .429rem 0 .571rem; }
.ca-jobs li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .857rem 0; border-top: 1px solid var(--line); }
.ca-jobs li:first-child { border-top: 0; }
.ca-jobs .t1 { margin: 0; font: 600 var(--fs-md)/1.3 var(--font); }
.ca-jobs .t2 { margin: .143rem 0 .429rem; font: 400 var(--fs-base)/1.4 var(--font); color: var(--muted); }
.ca-bar { height: 3px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.ca-bar i { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, var(--accent), var(--c-sky)); animation: ca-run 1.6s ease-in-out infinite; }
@keyframes ca-run { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .ca-bar i { animation: none; } }

/* ------------------------------------------------------------------ il Diario del cervello (c-agenti.js) */
.cd-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; padding: .571rem 0 1rem; }
.cd-g { width: 2.857rem; height: 2.857rem; color: var(--c-t-violet); }
.cd-big { margin: .286rem 0 .429rem; font: 400 var(--fs-3xl)/1.3 var(--font-display); letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.cd-big b { font-weight: 600; color: var(--c-t-violet); }
.cd-bits { display: inline; }
.cd-bit + .cd-bit::before { content: " · "; color: var(--muted); }
.cd-list { list-style: none; margin: 0; padding: 0; }
.cd-row { padding: .857rem 0; border-top: 1px solid var(--line); }
.cd-list > .cd-row:first-child { border-top: 0; }
.cd-t { margin: 0; font: 500 var(--fs-lg)/1.45 var(--font); color: var(--ink); overflow-wrap: anywhere; }
.cd-why { margin: .214rem 0 0; font: 400 var(--fs-base)/1.45 var(--font); color: var(--ink-2); }
.cd-m { display: flex; align-items: center; justify-content: space-between; gap: .857rem; margin: .429rem 0 0; color: var(--muted); font: 500 var(--fs-sm)/1.3 var(--font); flex-wrap: wrap; }
.cd-m > span { display: inline-flex; flex-wrap: wrap; gap: 0 .5rem; }
.cd-m > span > span + span::before { content: "·"; margin-right: .5rem; }
.cd-sec { margin-top: .857rem; }

/* ------------------------------------------------------------------ la voce dentro la pagina */
/* nel guscio la voce non è una finestra sopra tutto: occupa la pagina (sul telefono sopra la pillola, che ha Muto e
   Fine; sul computer accanto alla barra di icone), con la G dentro il cerchio */
.c-vx-g { position: absolute; left: 50%; top: 50%; width: 34%; height: 34%; transform: translate(-50%, -50%); color: #fff; opacity: .92;
  filter: drop-shadow(0 2px 8px rgba(11, 18, 32, .35)); pointer-events: none; }
html.c-shell .vx { background: color-mix(in srgb, var(--ground) 97%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html.c-shell .vx-panel { background: transparent; box-shadow: none; border: 0; }
html.c-shell .vx-title { visibility: hidden; }   /* la G è nel cerchio; resta l'ingranaggio delle impostazioni della voce */
@media (max-width: 860px) {
  html.c-shell .vx-ctrl [data-vx="mute"], html.c-shell .vx-ctrl [data-vx="end"] { display: none; }   /* sono nella pillola */
  html.c-shell .vx-ctrl { justify-content: center; border-top: 0; }
}
@media (min-width: 861px) {
  html.c-shell body.vx-on .c-rail { z-index: 86; }          /* la barra di icone resta in vista (e Parla la chiude) */
}

/* Graphorum · i testi chiari degli agenti (chiaro.js): la sintesi in due-tre righe, i «Dettagli» che si aprono con un
   clic (il markdown lì si vede bene), le fonti come piccoli link. Le regole di polish.css: niente riquadri dietro
   pulsanti, caselle o linguette (la pagina è il foglio), un solo arrotondamento. */
.ch-sum { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ch-rep { margin: 0; font-size: .76rem; }
.ch-det { margin: 0; }
.ch-det > summary { list-style: none; cursor: pointer; width: fit-content; font-size: .78rem; font-weight: 600; color: var(--accent); }
.ch-det > summary::-webkit-details-marker { display: none; }
.ch-det > summary::after { content: " ▸"; }
.ch-det[open] > summary::after { content: " ▾"; }
.ch-md { display: grid; gap: .4rem; margin-top: .4rem; font-size: .84rem; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.ch-md p, .ch-md ul, .ch-md ol { margin: 0; }
.ch-md ul, .ch-md ol { padding-left: 1.15rem; display: grid; gap: .15rem; }
.ch-md strong, .ch-md .ch-h { color: var(--ink); font-weight: 600; }
.ch-md a { color: var(--accent); overflow-wrap: anywhere; }
.ch-md code { font-size: .92em; }
.ch-q { margin: 0; font-style: italic; }
.ch-src { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .65rem; font-size: .76rem; color: var(--muted); }
.ch-src-h::after { content: ":"; }
.ch-src .ch-src-a { font-size: .76rem; text-align: left; overflow-wrap: anywhere; }