/* Sala: chat di squadra. Geist e Geist Mono, icone Phosphor, un solo accento (vermiglio: cio' che aspetta Mattia).
   Tema chiaro o scuro (data-tema su <html>): segue il sistema finche' non si tocca l'icona sole/luna.
   Raggi: pulsanti a pillola, ritratti 28%, schede 16 dentro un guscio di 20, caselle 16 dentro 20. */

@font-face { font-family: 'Geist'; src: url('/vendor/geist/Geist-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/vendor/geist/GeistMono-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --fondo: #eceef2;
  --lato: #e6e9ee;
  --carta: #fcfcfd;
  --carta-2: #f3f4f7;
  --carta-3: #e9ebf0;
  --inchiostro: #15171c;
  --inchiostro-2: #474d58;
  --inchiostro-3: #6b7280;
  --filo: #e1e4ea;
  --filo-2: #d2d6de;
  --accento: #c9401a;
  --accento-vivo: #e4532b;
  --accento-testo: #ffffff;
  --accento-tenue: #fbe9e3;
  --accento-filo: #f2c9bb;
  --ok: #23885a;
  --ombra: 0 1px 2px rgb(21 23 28 / .04), 0 12px 32px -16px rgb(21 23 28 / .18);
  --ombra-menu: 0 2px 4px rgb(21 23 28 / .06), 0 24px 48px -20px rgb(21 23 28 / .32);
  --luce: inset 0 1px 0 rgb(255 255 255 / .7);
  --curva: cubic-bezier(.32, .72, 0, 1);
  color-scheme: light;
}
:root[data-tema='scuro'] {
  --fondo: #090b0f;
  --lato: #0d1015;
  --carta: #13161c;
  --carta-2: #191d24;
  --carta-3: #20252e;
  --inchiostro: #eceef2;
  --inchiostro-2: #b6bcc7;
  --inchiostro-3: #8b929e;
  --filo: #222730;
  --filo-2: #2d333d;
  --accento: #ff6b47;
  --accento-vivo: #ff7a59;
  --accento-testo: #1a0b06;
  --accento-tenue: rgb(255 107 71 / .13);
  --accento-filo: rgb(255 107 71 / .34);
  --ok: #4cc28a;
  --ombra: 0 1px 2px rgb(0 0 0 / .3), 0 12px 32px -16px rgb(0 0 0 / .6);
  --ombra-menu: 0 2px 4px rgb(0 0 0 / .3), 0 24px 48px -16px rgb(0 0 0 / .7);
  --luce: inset 0 1px 0 rgb(255 255 255 / .04);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 15px/1.5 var(--font); color: var(--inchiostro); background: var(--fondo);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: background-color .6s var(--curva), color .6s var(--curva);
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; text-align: inherit; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; border-radius: 6px; }
img { max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0; }
time, .chip-id, .tag, small { font-variant-numeric: tabular-nums; }
.ph { font-size: 1.15em; line-height: 1; }

/* ----------------------------------------------------------------- ritratti */
.av { --m: 36px; width: var(--m); height: var(--m); flex: none; border-radius: 28%; object-fit: cover; display: inline-block;
  background: var(--carta-3); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06); }
.av-sala { background: #17212d; }
.av-iniziali { display: inline-grid; place-items: center; background: var(--inchiostro); color: var(--carta);
  font: 600 calc(var(--m) * .38)/1 var(--font); letter-spacing: .02em; }

/* ----------------------------------------------------------------- impianto */
#app { height: 100dvh; }
.app { display: grid; grid-template-columns: 284px minmax(0, 1fr); height: 100dvh; }
.app.con-filo { grid-template-columns: 284px minmax(0, 1fr) minmax(380px, 440px); }
.lato { display: flex; flex-direction: column; min-height: 0; background: var(--lato); }
.centro, .filo { min-height: 0; display: flex; flex-direction: column; background: var(--carta);
  margin: 8px 8px 8px 0; border-radius: 18px; box-shadow: 0 0 0 1px var(--filo), var(--ombra); overflow: hidden; position: relative; }
.filo:empty { display: none; }

/* ----------------------------------------------------------------- marchio in cima alla barra */
.marchio { display: flex; align-items: center; gap: 10px; padding: 16px 12px 10px 18px; flex: none; }
.marchio > div { flex: 1; min-width: 0; line-height: 1.25; }
.marchio b { font-size: 17px; font-weight: 650; letter-spacing: -.02em; }
.marchio p { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--inchiostro-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marchio-icona { width: 34px; height: 34px; border-radius: 10px; flex: none; box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 2px 6px -2px rgb(0 0 0 / .2); }
.marchio .btn-tondo .ph { font-size: 18px; }
.spia { width: 7px; height: 7px; border-radius: 50%; background: var(--filo-2); flex: none; }
.spia.accesa { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ok) 20%, transparent); }

/* ----------------------------------------------------------------- barra laterale */
.voci { flex: 1; overflow-y: auto; padding: 6px 10px 12px; scrollbar-width: thin; }
.voci h3 { font-size: 12px; font-weight: 600; color: var(--inchiostro-3); padding: 16px 10px 6px; }
.voce { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 10px; border-radius: 10px;
  color: var(--inchiostro-2); font-size: 14.5px; transition: background-color .2s var(--curva), color .2s; }
.voce:hover { background: rgb(0 0 0 / .045); color: var(--inchiostro); }
:root[data-tema='scuro'] .voce:hover { background: rgb(255 255 255 / .05); }
.voce.attiva { background: var(--carta); color: var(--inchiostro); box-shadow: 0 0 0 1px var(--filo), 0 1px 2px rgb(0 0 0 / .05); }
.voce.nuovi .voce-nome { color: var(--inchiostro); font-weight: 600; }
.voce-ic { position: relative; width: 22px; display: grid; place-items: center; flex: none; color: var(--inchiostro-3); }
.voce-ic .ph { font-size: 17px; }
.voce-nome { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.presenza { position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px var(--lato); }
.conta { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; display: inline-grid; place-items: center;
  font: 600 11.5px var(--mono); background: var(--carta-3); color: var(--inchiostro-2); }
.conta.forte { background: var(--accento); color: var(--accento-testo); }
.voce-decidere { margin-top: 2px; }
.voce-decidere .voce-ic { color: var(--inchiostro-2); }

.io { position: relative; display: flex; align-items: center; gap: 6px; padding: 10px 12px 12px; border-top: 1px solid var(--filo); }
.io-chi { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 12px; }
.io-chi:hover { background: rgb(0 0 0 / .045); }
.io-chi > .ph { color: var(--inchiostro-3); }
.io-chi > span:not(.av) { flex: 1; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.io-chi b { font-size: 14px; font-weight: 600; }
.io-chi small { font-size: 12px; color: var(--inchiostro-3); }

/* ----------------------------------------------------------------- pulsanti */
.btn { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 99px; white-space: nowrap;
  font-size: 13.5px; font-weight: 600; transition: transform .25s var(--curva), background-color .2s, box-shadow .2s; }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn-primario { background: var(--inchiostro); color: var(--carta); padding-right: 5px; }
.btn-primario:hover { background: color-mix(in oklab, var(--inchiostro) 88%, var(--accento)); }
.btn-icona { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / .14);
  transition: transform .3s var(--curva); }
:root[data-tema='scuro'] .btn-icona { background: rgb(0 0 0 / .1); }
.btn-primario:hover .btn-icona { transform: translateX(2px) scale(1.05); }
.btn-secondario { background: var(--carta); box-shadow: inset 0 0 0 1px var(--filo-2); }
.btn-secondario:hover { background: var(--carta-2); }
.btn-fantasma { color: var(--inchiostro-2); padding: 0 10px; }
.btn-fantasma:hover { background: var(--carta-2); color: var(--inchiostro); }
.btn.grande { height: 46px; font-size: 15px; padding-left: 20px; padding-right: 7px; }
.btn.grande .btn-icona { width: 32px; height: 32px; }
.btn-tondo { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--inchiostro); color: var(--carta); transition: transform .25s var(--curva), background-color .2s; }
.btn-tondo:active { transform: scale(.94); }
.btn-tondo.leggero { background: transparent; color: var(--inchiostro-3); }
.btn-tondo.leggero:hover { background: rgb(0 0 0 / .05); color: var(--inchiostro); }
:root[data-tema='scuro'] .btn-tondo.leggero:hover { background: rgb(255 255 255 / .06); }
.chip-id { font: 500 11.5px var(--mono); color: var(--inchiostro-2); padding: 2px 7px; border-radius: 7px; background: var(--carta-2);
  box-shadow: inset 0 0 0 1px var(--filo); white-space: nowrap; }
button.chip-id:hover { color: var(--inchiostro); box-shadow: inset 0 0 0 1px var(--filo-2); }

/* ----------------------------------------------------------------- testata del canale */
.testata { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 10px 20px 10px 24px; border-bottom: 1px solid var(--filo); flex: none; }
.testata-titolo { flex: 1; min-width: 0; }
.testata h1 { display: flex; align-items: center; gap: 7px; font-size: 17px; letter-spacing: -.015em; }
.testata h1 .ph { color: var(--inchiostro-3); font-size: 17px; }
.testata p { font-size: 13px; color: var(--inchiostro-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70ch; }
.indietro { display: none; width: 36px; height: 36px; border-radius: 50%; place-items: center; margin-left: -10px; color: var(--inchiostro-2); }
.indietro .ph { font-size: 20px; }
.facce { display: flex; align-items: center; padding-left: 8px; }
.facce .av { margin-left: -8px; box-shadow: 0 0 0 2px var(--carta); }
.facce-piu { margin-left: 6px; font: 500 12px var(--mono); color: var(--inchiostro-3); }

/* ----------------------------------------------------------------- flusso dei messaggi */
.flusso { flex: 1; overflow-y: auto; padding: 4px 0 16px; scrollbar-width: thin; overscroll-behavior: contain; }
.giorno { position: sticky; top: 8px; z-index: 2; display: flex; justify-content: center; margin: 14px 0 6px; pointer-events: none; }
.giorno span { pointer-events: auto; font-size: 12.5px; font-weight: 600; padding: 4px 12px; border-radius: 99px; background: var(--carta);
  box-shadow: 0 0 0 1px var(--filo), 0 2px 8px -4px rgb(0 0 0 / .12); color: var(--inchiostro-2); }

.msg { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 0 12px; padding: 8px 24px 6px; transition: background-color .15s; }
.msg:hover { background: color-mix(in oklab, var(--carta-2) 70%, transparent); }
.msg.seguito { padding-top: 1px; }
.msg-av { padding-top: 2px; }
.msg-av .av { --m: 38px !important; }
.msg-av time { display: block; visibility: hidden; font: 500 10.5px var(--mono); color: var(--inchiostro-3); text-align: right; padding-top: 4px; }
.msg.seguito:hover .msg-av time { visibility: visible; }
.msg-testa { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.nome { font-weight: 650; font-size: 15px; letter-spacing: -.005em; }
.msg-testa time { font: 500 11.5px var(--mono); color: var(--inchiostro-3); }
.tag { font: 500 10.5px var(--mono); padding: 1px 6px; border-radius: 6px; background: var(--carta-3); color: var(--inchiostro-3); align-self: center; }
.tag-persone { background: transparent; box-shadow: inset 0 0 0 1px var(--filo-2); }
.testo { color: var(--inchiostro); overflow-wrap: anywhere; }
.testo.chiuso { max-height: 9.2em; overflow: hidden; mask: linear-gradient(180deg, #000 60%, transparent); }
.leggi { margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--accento); }
.leggi:hover { text-decoration: underline; }
.msg-corpo > .chip-id { display: inline-block; margin-top: 4px; }

.evento { display: flex; align-items: center; gap: 8px; padding: 3px 24px 3px 74px; font-size: 13.5px; color: var(--inchiostro-3); }
.evento b { color: var(--inchiostro-2); font-weight: 600; }
.evento > span:not(.av) { flex: 1; min-width: 0; }
.evento time { font: 500 11px var(--mono); opacity: 0; transition: opacity .15s; }
.evento:hover time { opacity: 1; }
.evento .chip-id { margin-left: 4px; font-size: 11px; padding: 0 6px; }

/* markdown */
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p, .md ul, .md ol { margin: 0 0 .6em; }
.md ul, .md ol { padding-left: 1.3em; }
.md h1, .md h2, .md h3, .md h4 { font-size: 1em; margin: 1em 0 .4em; }
.md h1 { font-size: 1.15em; }
.md code { font: .88em var(--mono); background: var(--carta-2); padding: 1px 5px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--filo); }
.md pre { background: var(--carta-2); padding: 12px 14px; border-radius: 12px; overflow-x: auto; box-shadow: inset 0 0 0 1px var(--filo); }
.md pre code { background: none; box-shadow: none; padding: 0; }
.md a { color: var(--accento); text-underline-offset: 2px; }
.md blockquote { margin: 0 0 .6em; padding-left: 12px; border-left: 3px solid var(--filo-2); color: var(--inchiostro-2); }
.md table { border-collapse: collapse; display: block; overflow-x: auto; font-size: .93em; margin-bottom: .8em; }
.md th, .md td { padding: 6px 10px; border-bottom: 1px solid var(--filo); text-align: left; vertical-align: top; }
.md hr { border: 0; border-top: 1px solid var(--filo); margin: 1em 0; }
.md img { border-radius: 10px; }

/* ----------------------------------------------------------------- scheda di una consegna */
.scheda { margin-top: 6px; max-width: 640px; padding: 4px; border-radius: 20px; background: var(--carta-2); box-shadow: inset 0 0 0 1px var(--filo); }
.scheda.tocca { background: color-mix(in oklab, var(--accento-tenue) 70%, var(--carta-2)); box-shadow: inset 0 0 0 1px var(--accento-filo); }
.scheda-nucleo { border-radius: 16px; background: var(--carta); padding: 12px 16px 12px; box-shadow: var(--luce), 0 1px 2px rgb(0 0 0 / .04); }
.scheda header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.scheda header .quadrante { margin-left: auto; }
.scheda-chi { display: flex; align-items: center; gap: 7px; font-size: 14px; margin-right: 4px; }
.scheda-dove { display: inline-flex; align-items: center; gap: 2px; color: var(--inchiostro-3); font-size: 13px; }
.tldr { margin-top: 8px; font-size: 15.5px; line-height: 1.5; font-weight: 500; letter-spacing: -.005em; text-wrap: pretty; }
.tldr.grande { font-size: 17px; margin-top: 12px; }
.tldr.muto { color: var(--inchiostro-3); font-weight: 400; }
.domanda { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--accento-tenue); box-shadow: inset 0 0 0 1px var(--accento-filo); }
.domanda span { display: block; font-size: 12px; font-weight: 650; color: var(--accento); margin-bottom: 1px; }
.domanda p { font-size: 15px; font-weight: 550; text-wrap: pretty; }
.guarda { display: flex; gap: 8px; margin-top: 9px; font-size: 13.5px; color: var(--inchiostro-2); }
.guarda .ph { margin-top: 2px; color: var(--inchiostro-3); }
.scheda footer { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.apri { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--inchiostro-3); padding: 6px 4px; }
.apri:hover { color: var(--inchiostro); }
.apri .ph { transition: transform .3s var(--curva); }
.apri:hover .ph { transform: translateX(3px); }
.fatto { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ok); }
.risposta-rapida { flex: 1 1 280px; display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 4px 0 14px; border-radius: 99px;
  background: var(--carta-2); box-shadow: inset 0 0 0 1px var(--filo-2); }
.risposta-rapida:focus-within { box-shadow: inset 0 0 0 1.5px var(--inchiostro-3); }
.risposta-rapida input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 14.5px; }
.risposta-rapida .btn-tondo { width: 32px; height: 32px; }

.passaggio { display: block; margin-top: 4px; max-width: 560px; width: 100%; padding: 9px 12px; border-radius: 14px; background: var(--carta-2);
  box-shadow: inset 0 0 0 1px var(--filo); transition: box-shadow .2s; }
.passaggio:hover { box-shadow: inset 0 0 0 1px var(--filo-2); }
.passaggio-testa { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--inchiostro-2); }
.passaggio-testa .quadrante { margin-left: auto; }
.passaggio-tldr { display: block; margin-top: 4px; font-size: 14px; color: var(--inchiostro); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* stato del lavoro */
.pillola { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 99px; font-size: 12px; font-weight: 600;
  background: var(--carta-2); color: var(--inchiostro-2); box-shadow: inset 0 0 0 1px var(--filo); white-space: nowrap; }
.pillola.serve { background: var(--accento); color: var(--accento-testo); box-shadow: none; }
.pillola.chiuso { color: var(--inchiostro-3); }
.pulsa { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }

/* il voto del Revisore: arco = voto, tacca = soglia 8 */
.quadrante { --m: 28px; position: relative; width: var(--m); height: var(--m); flex: none; display: inline-grid; place-items: center; }
.quadrante svg { position: absolute; inset: 0; }
.quadrante b { font: 600 calc(var(--m) * .38)/1 var(--mono); }
.q-fondo { fill: none; stroke: var(--filo); stroke-width: 3; }
.q-arco { fill: none; stroke: var(--inchiostro); stroke-width: 3; stroke-linecap: round; }
.quadrante.basso .q-arco { stroke: var(--accento); }
.quadrante.basso b { color: var(--accento); }
.q-soglia { stroke: var(--inchiostro-3); stroke-width: 1.6; stroke-linecap: round; }

/* allegati */
.allegato { display: flex; align-items: center; gap: 10px; margin-top: 6px; max-width: 520px; padding: 8px 8px 8px 12px; border-radius: 14px;
  background: var(--carta-2); box-shadow: inset 0 0 0 1px var(--filo); }
.allegato > .ph { font-size: 22px; color: var(--inchiostro-3); }
.allegato > span:not(.av) { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.allegato b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.allegato small { font: 500 11.5px var(--mono); color: var(--inchiostro-3); }
.allegato .btn { height: 30px; }
.foto { display: inline-block; margin-top: 6px; max-width: 360px; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px var(--filo); }
.foto img { display: block; }

/* chi sta lavorando, sopra la casella */
.lavorano { display: flex; align-items: center; gap: 6px; padding: 2px 26px 6px; font-size: 12.5px; color: var(--inchiostro-3); }
.lavorano .av { margin-right: -2px; }
.lavorano > span:not(.puntini) { margin-left: 6px; }
.puntini { display: inline-flex; gap: 3px; margin-left: 2px; }
.puntini i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: puntino 1.2s infinite var(--curva); }
.puntini i:nth-child(2) { animation-delay: .15s; }
.puntini i:nth-child(3) { animation-delay: .3s; }
@keyframes puntino { 0%, 60%, 100% { opacity: .25; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }

/* ----------------------------------------------------------------- casella per scrivere */
.scrivi { position: relative; padding: 0 20px 18px; flex: none; }
.scrivi .guscio { padding: 4px; border-radius: 20px; background: var(--carta-2); box-shadow: inset 0 0 0 1px var(--filo); transition: box-shadow .2s; }
.scrivi:focus-within .guscio { box-shadow: inset 0 0 0 1px var(--filo-2), 0 0 0 4px color-mix(in oklab, var(--filo) 55%, transparent); }
.scrivi .nucleo { border-radius: 16px; background: var(--carta); box-shadow: var(--luce), 0 1px 2px rgb(0 0 0 / .05); }
.scrivi textarea { display: block; width: 100%; border: 0; outline: 0; resize: none; background: transparent; padding: 12px 14px 2px;
  font-size: 15px; line-height: 1.5; min-height: 46px; max-height: 220px; }
.scrivi textarea::placeholder, .risposta-rapida input::placeholder, .accesso input::placeholder { color: var(--inchiostro-3); }
.barra { display: flex; align-items: center; gap: 8px; padding: 4px 6px 6px 8px; }
.a-chi { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px 0 5px; border-radius: 99px; font-size: 13px; font-weight: 600;
  color: var(--inchiostro-2); background: var(--carta-2); box-shadow: inset 0 0 0 1px var(--filo); }
.a-chi:hover { color: var(--inchiostro); box-shadow: inset 0 0 0 1px var(--filo-2); }
.a-chi .ph { color: var(--inchiostro-3); }
.aiuto { margin-left: auto; font-size: 12px; color: var(--inchiostro-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.manda { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--accento); color: var(--accento-testo);
  transition: transform .25s var(--curva), background-color .2s, opacity .2s; }
.manda:hover:not(:disabled) { background: var(--accento-vivo); }
.manda:active:not(:disabled) { transform: scale(.92); }
.manda:disabled { background: var(--carta-3); color: var(--inchiostro-3); }

/* menu che si aprono */
.menu-posto { position: absolute; left: 20px; right: 20px; bottom: calc(100% - 12px); pointer-events: none; }
.menu { pointer-events: auto; position: absolute; bottom: 0; left: 0; width: min(340px, 100%); max-height: min(420px, 60dvh); overflow-y: auto; padding: 6px;
  background: var(--carta); border-radius: 16px; box-shadow: 0 0 0 1px var(--filo), var(--ombra-menu); z-index: 20;
  animation: sale .28s var(--curva); scrollbar-width: thin; }
.menu-io { left: 10px; right: auto; bottom: calc(100% + 6px); width: 300px; }
.menu-titolo { font-size: 12px; font-weight: 600; color: var(--inchiostro-3); padding: 6px 10px 4px; }
.menu-voce { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; font-size: 14px; min-height: 38px; }
.menu-voce .ph { font-size: 18px; color: var(--inchiostro-3); width: 22px; text-align: center; }
.menu-voce > span { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.menu-voce small { font-size: 12px; color: var(--inchiostro-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-voce:hover, .menu-voce.scelta { background: var(--carta-2); }
.menu-voce.scelta { box-shadow: inset 0 0 0 1px var(--filo); }
.menu-nota { display: flex; gap: 10px; padding: 8px 10px; font-size: 13px; color: var(--inchiostro-2); }
.menu-nota .ph { margin-top: 2px; color: var(--inchiostro-3); }
@keyframes sale { from { opacity: 0; transform: translateY(6px) scale(.98); } }

/* ----------------------------------------------------------------- "Da decidere" e stati vuoti */
.decidere { display: grid; gap: 14px; padding: 20px 24px 28px; align-content: start; }
.decidere .scheda { max-width: 760px; margin: 0; }
.vuoto { min-height: 100%; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 40px 24px; text-align: center; }
.vuoto h2 { font-size: 20px; letter-spacing: -.02em; margin-top: 8px; }
.vuoto p { max-width: 42ch; color: var(--inchiostro-3); }
.vuoto-icona { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; font-size: 28px; color: var(--inchiostro-2);
  background: var(--carta-2); box-shadow: inset 0 0 0 1px var(--filo), var(--luce); }


/* ----------------------------------------------------------------- filo di un lavoro */
.filo { animation: entraFilo .45s var(--curva); }
@keyframes entraFilo { from { opacity: 0; transform: translateX(16px); } }
.filo-testa { display: flex; align-items: center; gap: 10px; min-height: 62px; padding: 10px 14px 10px 20px; border-bottom: 1px solid var(--filo); flex: none; }
.filo-testa > div { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.filo-testa b { font-size: 15px; font-weight: 650; }
.filo-testa span { font: 500 12px var(--mono); color: var(--inchiostro-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filo-testa .indietro { display: none; }
.filo-scorre { flex: 1; overflow-y: auto; padding: 18px 20px 20px; scrollbar-width: thin; }
.filo-scorre > * + * { margin-top: 18px; }
.in-breve-testa { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.voto-esteso { display: inline-flex; align-items: center; gap: 9px; }
.voto-esteso > span:not(.quadrante) { display: flex; flex-direction: column; line-height: 1.25; font-size: 13px; font-weight: 600; }
.voto-esteso small { font-size: 12px; font-weight: 400; color: var(--inchiostro-3); }
.azioni { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.azioni:empty { display: none; }
.traccia { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.traccia li { display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; color: var(--inchiostro-3); }
.traccia li span { height: 3px; border-radius: 3px; background: var(--filo); }
.traccia li.fatta span { background: var(--inchiostro-3); }
.traccia li.ora { color: var(--inchiostro); font-weight: 600; }
.traccia li.ora span { background: var(--inchiostro); }
.filo-scorre h4 { font-size: 12.5px; font-weight: 600; color: var(--inchiostro-3); margin-bottom: 6px; }
.collega { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; }
.collega:hover { background: var(--carta-2); }
.collega > span:not(.quadrante) { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.collega b { font-size: 14px; font-weight: 600; }
.collega small { font: 500 11.5px var(--mono); color: var(--inchiostro-3); }
.piega { border-radius: 14px; background: var(--carta-2); box-shadow: inset 0 0 0 1px var(--filo); }
.piega summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 11px 14px; font-size: 14px; font-weight: 600; cursor: pointer; }
.piega summary::-webkit-details-marker { display: none; }
.piega summary .ph { color: var(--inchiostro-3); }
.piega summary small { margin-left: auto; font: 500 12px var(--mono); color: var(--inchiostro-3); }
.piega summary::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid var(--inchiostro-3); border-bottom: 1.5px solid var(--inchiostro-3);
  rotate: -45deg; transition: rotate .3s var(--curva); margin-left: 6px; }
.piega:not(:has(small)) summary::after { margin-left: auto; }
.piega[open] summary::after { rotate: 45deg; }
.piega > .md, .piega > .problemi { padding: 0 16px 14px; font-size: 14.5px; }
.foglio { max-height: 60dvh; overflow-y: auto; }
.problemi { margin: 0; padding-left: 32px !important; color: var(--inchiostro-2); }
.problemi li + li { margin-top: 6px; }
.conversa .msg { padding-left: 0; padding-right: 0; }
.conversa .evento { padding-left: 50px; padding-right: 0; }
.conversa .msg:hover { background: none; }
.scrivi-filo { padding: 0 14px 14px; }

/* ----------------------------------------------------------------- accesso */
.accesso { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, 1fr); }
.accesso-scena { position: relative; margin: 10px 0 10px 10px; border-radius: 26px; overflow: hidden; display: flex; flex-direction: column;
  justify-content: space-between; padding: 40px; background: var(--lato); box-shadow: inset 0 0 0 1px var(--filo); }
.accesso-testo .marchio-icona { width: 52px; height: 52px; border-radius: 15px; display: block; margin-bottom: 22px; }
.accesso-testo b { font-size: clamp(40px, 5vw, 60px); font-weight: 650; letter-spacing: -.04em; line-height: 1; }
.accesso-testo p { margin-top: 12px; font-size: 18px; max-width: 26ch; color: var(--inchiostro-2); }
.accesso-squadra { display: grid; grid-template-columns: repeat(5, minmax(0, 72px)); gap: 12px; }
.accesso-squadra .av { --m: 100% !important; aspect-ratio: 1; height: auto; box-shadow: 0 0 0 1px rgb(0 0 0 / .06), var(--ombra); }
.accesso-modulo { display: grid; place-items: center; padding: 32px; }
.accesso form { width: min(380px, 100%); display: flex; flex-direction: column; }
.accesso h1 { font-size: 30px; letter-spacing: -.03em; }
.accesso .sotto { color: var(--inchiostro-3); margin: 6px 0 26px; }
.accesso label { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.accesso input { height: 46px; padding: 0 14px; border-radius: 14px; border: 0; background: var(--carta); box-shadow: inset 0 0 0 1px var(--filo-2); margin-bottom: 16px; font-size: 15px; outline: 0; }
.accesso input:focus { box-shadow: inset 0 0 0 1.5px var(--inchiostro-2), 0 0 0 4px var(--carta-3); }
.accesso .btn { align-self: flex-start; margin-top: 6px; }
.errore { color: var(--accento); font-size: 14px; font-weight: 500; margin: -4px 0 12px; }

.avviso { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); translate: -50% 0; z-index: 50; max-width: min(520px, 92vw);
  padding: 10px 16px; border-radius: 14px; background: var(--inchiostro); color: var(--carta); font-size: 14px; font-weight: 500;
  box-shadow: var(--ombra-menu); animation: sale .3s var(--curva); }

/* ----------------------------------------------------------------- movimento */
.entra { animation: entra .42s var(--curva) both; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }
.pillola .pulsa { animation: pulsa 1.8s infinite var(--curva); }
@keyframes pulsa { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ----------------------------------------------------------------- tablet: il filo si apre sopra la conversazione */
@media (max-width: 1180px) {
  .app.con-filo { grid-template-columns: 264px minmax(0, 1fr); }
  .app { grid-template-columns: 264px minmax(0, 1fr); }
  .filo { position: fixed; top: 8px; right: 8px; bottom: 8px; width: min(440px, calc(100vw - 32px)); margin: 0; z-index: 30; box-shadow: 0 0 0 1px var(--filo), var(--ombra-menu); }
}

/* ----------------------------------------------------------------- telefono: una cosa alla volta */
@media (max-width: 760px) {
  .app, .app.con-filo { display: block; height: 100dvh; }
  .lato, .centro, .filo { position: fixed; inset: 0; margin: 0; border-radius: 0; box-shadow: none; width: auto; }
  .app[data-pannello='home'] .centro, .app[data-pannello='home'] .filo { display: none; }
  .app[data-pannello='stanza'] .lato, .app[data-pannello='stanza'] .filo { display: none; }
  .app[data-pannello='filo'] .lato, .app[data-pannello='filo'] .centro { display: none; }
  .lato { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .marchio { padding-top: 14px; }
  .voce { height: 44px; font-size: 16px; }
  .voce-ic .ph { font-size: 19px; }
  .indietro, .filo-testa .indietro { display: grid; }
  .filo-testa .chiudi { display: none; }
  .testata, .filo-testa { padding-top: calc(10px + env(safe-area-inset-top)); padding-left: 16px; padding-right: 12px; }
  .testata p { max-width: 100%; }
  .facce .av:nth-child(n + 4) { display: none; }
  .msg { padding-left: 14px; padding-right: 14px; grid-template-columns: 34px minmax(0, 1fr); gap: 0 10px; }
  .msg-av .av { --m: 34px !important; }
  .evento { padding-left: 58px; padding-right: 14px; }
  .scrivi { padding: 0 10px calc(10px + env(safe-area-inset-bottom)); }
  .scrivi textarea { font-size: 16px; }
  .aiuto { display: none; }
  .a-chi { margin-right: auto; }
  .menu-posto { left: 10px; right: 10px; }
  .decidere { padding: 14px 12px 24px; }
  .scheda footer .btn { height: 38px; }
  .filo-scorre { padding: 16px 16px 20px; }
  .accesso { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .accesso-scena { margin: 8px 8px 0; border-radius: 22px; padding: 24px; gap: 24px; }
  .accesso-squadra { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
  .accesso-squadra .av:nth-child(n + 9) { display: none; }
  .accesso-modulo { place-items: start center; padding: 28px 22px 40px; }
  .accesso .btn { align-self: stretch; justify-content: space-between; }
}