/* stile-ritocchi — foglio di stile di RitMo Coach.
   Stava dentro coach.html. */
/* L'ASSISTENTE È UNA SEZIONE, NON UN RIQUADRO CHE GALLEGGIA.
   Prima era una casella appoggiata sopra il gestionale: si apriva, il resto
   restava scorrevole sotto, la tastiera la spostava, e sul telefono sembrava
   un errore. Adesso occupa tutto lo schermo (sul telefono) o una colonna a
   destra (sul computer), e finché è aperto sotto non si scorre. */
#aiPanel{position:fixed;inset:0;z-index:999;
  background:var(--scheda);color:var(--inchiostro);
  display:none;flex-direction:column;overflow:hidden;
  padding-top:var(--sat);padding-bottom:var(--sab)}
#aiPanel.open{display:flex}
/* Sul telefono, con la tastiera alzata: il pannello si accorcia quanto la
   finestra visibile e si sposta con lei. Senza, la casella di scrittura
   finiva a mezz'aria e sotto si vedeva scorrere la pagina. */
@media(max-width:900px){
  body.tastiera-aperta #aiPanel{
    /* LA TESTA NON SI MUOVE. Jacopo, 27 agosto: «il tastierino mi butta tutto
       in alto e non vedo la riga “Sono qui” con il torna indietro».
       Prima il pannello si spostava con «transform». Un transform sposta il
       disegno ma lascia la scatola dov'era, e su iOS, che con la tastiera fa
       scorrere la PAGINA invece di rimpicciolirla, i due movimenti si
       sommavano: la riga in cima usciva sopra il bordo dello schermo.
       Adesso il pannello si ancora davvero alla finestra visibile — «top» e
       «height», niente transform — e la testa resta dov'è. Quello che si
       accorcia è la chat: la roba scritta scende, l'intestazione no. */
    top:var(--vvtop, 0px);
    height:var(--vvh, calc(100% - var(--tastiera, 0px)));
    transform:none;
    padding-top:0;
    padding-bottom:0;
  }
}
/* sul computer resta una colonna a destra, con lo stesso comportamento */
@media(min-width:901px){
  #aiPanel{left:auto;width:min(460px,42vw);border-left:1px solid var(--filo);
    box-shadow:-24px 0 60px color-mix(in srgb, var(--nero-pece) 55%, transparent)}
}
/* niente scorrimento sotto: si scorre solo la chat */
body.assistente-aperto{overflow:hidden;position:fixed;width:100%;left:0;right:0}
@media(max-width:900px){
  body.assistente-aperto .tabbar{opacity:0;pointer-events:none}
}
/* testa e riga di stato restano incollate in cima al pannello, sempre: sono
   la via d'uscita, e una via d'uscita che scompare non è una via d'uscita */
#aiHead{display:flex;align-items:center;gap:11px;padding:13px 14px;
  border-bottom:1px solid var(--filo);
  position:sticky;top:0;z-index:3;background:var(--scheda);flex:0 0 auto}
/* IL SEGNO DELL'ASSISTENTE, uno solo. Nella testa della chat e nel tasto in
   alto e' identico: stesso fondo, stesso colore, stesso alone. Prima uno era
   verde su nero e l'altro nero su verde, e sembravano due cose diverse. */
#aiHead .aidot{position:relative;flex:0 0 38px;width:38px;height:38px;border-radius:50%;
  background:#0A0C0B; color:color-mix(in srgb, var(--accento) 92%, #FFFFFF);
  display:grid;place-items:center;font-size:15px;
  box-shadow:0 0 14px -4px color-mix(in srgb, var(--accento) 55%, transparent)}
/* niente overflow:hidden qui: l'alone del respiro esce di 3px dal bollo e
   verrebbe tagliato via — il segno smetterebbe di pulsare come quello in cima */
/* anche dentro la chat il segno respira: si vede che sta lì sveglio */
#aiHead .aidot::after{content:"";position:absolute;inset:-3px;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 0 color-mix(in srgb, var(--accento) 55%, transparent);
  animation:respiroAI 2.9s cubic-bezier(.4,0,.6,1) infinite}
@media (prefers-reduced-motion: reduce){ #aiHead .aidot::after{animation:none} }
#aiHead .ait{min-width:0}
#aiHead .ait b{display:block;font-size:14px;font-weight:800;line-height:1.2}
#aiHead .ait i{display:block;font-style:normal;font-size:11.5px;color:var(--grigio)}
/* la crocetta tonda in alto a destra non c'è più: al suo posto «‹ Oggi» in
   alto a sinistra (vedi .aiesci più sotto). Questa regola restava e spingeva
   il tasto nuovo nell'angolo destro, dove veniva pure tagliato. */
#aiLog{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:14px;display:flex;flex-direction:column;gap:9px;background:var(--fondo)}
.aib{max-width:88%;padding:10px 13px;border-radius:15px;font-size:13.5px;line-height:1.5;
  background:var(--campo);color:var(--inchiostro);border:1px solid var(--filo);
  white-space:pre-wrap;word-break:break-word}
.aib.me{background:var(--accento);color:var(--su-accento);border:0;margin-left:auto;
  border-bottom-right-radius:5px;font-weight:600}
.aisugg{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.aisugg button{background:var(--campo);border:1px solid var(--filo);color:var(--inchiostro);
  font-size:12.5px;font-weight:600;border-radius:999px;padding:8px 13px;cursor:pointer;font-family:inherit;
  transition:border-color .15s ease}
.aisugg button:hover{border-color:var(--accento)}
/* «Cos'altro so fare»: si vede che non e' una domanda ma una porta */
.aisugg .aisugg-altro{ background:none; border-style:dashed; color:var(--grigio) }
.aisugg .aisugg-altro:hover{ color:var(--accento-testo) }
/* l'elenco: una riga per cosa, con la stellina per tenersela */
.aisugg-elenco{ flex-direction:column; align-items:stretch; gap:6px }
.aisugg-riga{ display:flex; align-items:stretch; gap:6px }
.aisugg-riga > button:first-child{ flex:1; text-align:left; border-radius:12px }
.aisugg .aisugg-stella{ flex:0 0 40px; padding:0; border-radius:12px;
  font-size:15px; line-height:1; color:var(--grigio) }
.aisugg .aisugg-stella.si{ color:var(--accento); border-color:var(--accento) }
.aiprop{background:var(--scheda);border:1.5px solid var(--accento);border-radius:14px;padding:12px 14px;
  font-size:13px;max-width:94%;color:var(--inchiostro)}
.aiprop b{display:block;margin-bottom:6px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--accento-testo)}
.aiprop .aid{color:var(--inchiostro);margin-bottom:10px;white-space:pre-wrap;line-height:1.5}
.aiprop button{background:var(--accento);border:0;color:var(--su-accento);font-weight:800;font-size:12.5px;
  border-radius:999px;padding:9px 16px;cursor:pointer;font-family:inherit}
.aiprop button:disabled{opacity:.7;cursor:default}
#aiFoot{display:flex;gap:7px;align-items:center;padding:10px;border-top:1px solid var(--filo);background:var(--scheda)}
#aiGraffa,#aiMic{flex:0 0 36px;width:36px;height:36px;border-radius:50%;border:1px solid var(--filo);
  background:var(--campo);color:var(--grigio);display:grid;place-items:center;cursor:pointer;
  transition:color .18s ease,border-color .18s ease}
#aiGraffa svg,#aiMic svg{width:18px;height:18px}
#aiGraffa:hover,#aiMic:hover{color:var(--inchiostro);border-color:var(--accento)}
#aiMic.ascolta{color:var(--su-accento);background:var(--accento);border-color:var(--accento)}
#aiMic.ascolta svg{animation:micBatte 1.4s ease-in-out infinite}

/* ---------- ASCOLTO ATTIVO ---------- */
/* altezza fissa: se il pannello cresce mentre parli, tutto quello che ha
   sotto si sposta, e il segno con la pulsazione sembra scappare via */
/* larghezza piena, sempre: il pannello prendeva la misura del testo, quindi
   con una frase lunga si allargava — e il segno, che sta al centro, scivolava
   a destra insieme al bordo. Era quello lo scorrimento che si vedeva. */
/* LA BARRETTA SI VEDE SOLO MENTRE SCRIVI.
   Jacopo: «quando invece o lo usi toccandolo e parlandoci, o è lì in attesa,
   il bannerino non lo voglio». Giusto — serve a rimediare a un problema che
   esiste solo con la tastiera alzata: la faccia grande finisce fuori schermo
   e non vedi piu' cosa sta facendo. Se la faccia grande si vede, la barretta
   e' la stessa cosa detta due volte, e ruba una riga.
   «scrive» vuol dire esattamente: casella toccata, o con dentro del testo —
   cioe' i due momenti in cui la tastiera e' fuori. */
#aiCompatto{ display:none; align-items:center; gap:11px; flex:0 0 auto;
  padding:8px 16px 10px; background:var(--scheda); position:sticky; top:0; z-index:2;
  border-bottom:1px solid var(--filo) }
#aiCompatto .aic-t{ font-size:13px; color:var(--grigio); font-weight:600;
  letter-spacing:.005em; transition:color .2s ease }
/* SOLO SUL TELEFONO, E SOLO MENTRE SCRIVI (6 settembre 2026).
   La regola diceva «open e non dettando», cioe' SEMPRE: la barretta stava li'
   anche col nucleo grande in vista, che e' esattamente la stessa faccia due
   volte — la cosa che il commento qui sopra diceva di non voler fare.
   Jacopo, dal computer: «quello di fianco a "sono qui" non lo voglio nella
   chat da computer; lui deve rimanere com'e', con "tocca per parlare", anche
   quando scrivo non deve sparire. Se proprio, fallo su telefono».
   Sul computer non c'e' nessuna tastiera che si alza e nessuno spazio da
   contendere: la faccia grande resta, e la barretta non serve mai. */
@media(max-width:760px){
  #aiPanel.open.scrive:not(.dettando) #aiCompatto{ display:flex }
}
@media(min-width:761px){ #aiCompatto{ display:none !important } }
/* col nucleo grande acceso sarebbe la stessa faccia due volte */
#aiPanel.dettando #aiCompatto{ display:none }
@media (prefers-reduced-motion: reduce){ #aiCompatto .aic-t{ transition:none } }

#aiNucleo{display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:18px 10px 10px;min-height:210px;width:100%;align-self:stretch;box-sizing:border-box}
#aiPanel.dettando #aiNucleo{display:flex}
#aiPanel.dettando .aicomp{display:none}
/* IL TESTO CHE ARRIVA MENTRE PARLI.
   Era centrato riga per riga: a ogni parola nuova tutta la frase si
   ricentrava, quindi le parole gia' scritte scivolavano a sinistra mentre la
   nuova compariva a destra. Da fuori sembra che il testo scorra di lato, e
   l'occhio insegue invece di leggere.
   Adesso il blocco sta al centro del pannello — e li' resta — ma dentro il
   blocco le parole sono allineate a sinistra: una parola nuova non muove
   quelle di prima. E l'altezza e' fissa, cosi' nemmeno il segno qui sotto si
   sposta quando la frase diventa due righe. */
#aiNucleo .asc-testo{height:76px;overflow-y:auto;width:100%;max-width:22em;margin:0 auto;
  display:flex;flex-direction:column;justify-content:flex-end;text-align:left;
  font-size:17px;line-height:1.4;font-weight:600;color:var(--inchiostro);letter-spacing:-.01em}
/* finche' non hai ancora detto niente, «Ti ascolto…» sta al centro: e' un
   invito, non un testo da leggere */
#aiNucleo .asc-testo.attesa{text-align:center;justify-content:center}
#aiNucleo .asc-testo.attesa{color:var(--grigio);font-weight:500}
#aiNucleo .asc-segno{position:relative;width:88px;height:88px;border-radius:50%;border:0;padding:0;
  background:transparent;color:color-mix(in srgb, var(--accento) 92%, #FFFFFF);
  display:grid;place-items:center;cursor:pointer}
#aiNucleo .asc-segno svg{width:88px;height:88px;display:block;
  filter:drop-shadow(0 0 12px color-mix(in srgb, var(--accento) 75%, transparent));
  animation:respiroSegno 1.5s cubic-bezier(.4,0,.6,1) infinite}
#aiNucleo .asc-segno::after{content:"";position:absolute;inset:-6px;border-radius:50%;pointer-events:none;
  animation:respiroAI 1.5s cubic-bezier(.4,0,.6,1) infinite}
html.tema-chiaro #aiNucleo .asc-segno{background:transparent}
html.tema-chiaro #aiNucleo .asc-segno svg{filter:none}

/* LE ONDE: cerchi che partono dal nucleo e si allargano, come il wifi.
   Sono cinque, sfasate fra loro; la loro vita dipende dal volume della voce,
   come tutto il resto. Stanno sotto il segno e non intercettano il dito. */
#aiNucleo .asc-scena{position:relative;display:grid;place-items:center;
  width:88px;height:88px;flex:0 0 auto}
#aiNucleo .asc-onda{position:absolute;width:88px;height:88px;border-radius:50%;
  border:1px solid var(--accento);opacity:0;pointer-events:none;
  transform:scale(.85);will-change:transform,opacity}
#aiNucleo .asc-scena .asc-segno{position:relative;z-index:1}
/* IL BAGLIORE: non un anello ma una luce che sfuma, sotto il nucleo. Il bordo
   netto di un cerchio dice «elemento grafico»; una luce senza bordo dice
   «questa cosa è accesa». Respira col nucleo e fiorisce quando c'è la voce. */
#aiNucleo .asc-bagliore{position:absolute;width:176px;height:176px;border-radius:50%;
  pointer-events:none;opacity:0;will-change:transform,opacity;
  background:radial-gradient(circle,
    color-mix(in srgb, var(--accento) 42%, transparent) 0%,
    color-mix(in srgb, var(--accento) 22%, transparent) 18%,
    color-mix(in srgb, var(--accento)  9%, transparent) 34%,
    color-mix(in srgb, var(--accento)  2%, transparent) 48%,
    transparent 62%)}
#aiPanel.dettando:not(.voce-attiva) .asc-bagliore{opacity:.55}
@media (prefers-reduced-motion: reduce){ #aiNucleo .asc-bagliore{opacity:.4} }
/* riserva: senza misuratore del suono le onde vanno lo stesso, piano */
/* GLI ANELLI ERANO STORTI, ed è il difetto che si vede nella registrazione:
   uscivano dal basso a destra del segno invece che dal centro. Il motivo:
   gli anelli si centrano con «left:50% top:50%» PIÙ «translate(-50%,-50%)»,
   e questa animazione di riserva scriveva solo «scale()», buttando via la
   traslazione. Adesso ce l'ha dentro.
   E non parte più mentre il ciclo del codice sta girando: le due cose si
   sovrascrivevano a vicenda a ogni fotogramma, ed è da lì che veniva lo
   scatto. La riserva serve solo se il ciclo non c'è. */
@keyframes ondaFuori{
  0%   {transform:translate(-50%,-50%) scale(.85);opacity:0}
  22%  {opacity:.34}
  100% {transform:translate(-50%,-50%) scale(1.8);opacity:0}
}
#aiPanel.senza-ciclo.dettando:not(.voce-attiva) .asc-onda{animation:ondaFuori 4.2s linear infinite}
#aiPanel.senza-ciclo.dettando:not(.voce-attiva) .asc-onda:nth-of-type(2){animation-delay:.84s}
#aiPanel.senza-ciclo.dettando:not(.voce-attiva) .asc-onda:nth-of-type(3){animation-delay:1.68s}
#aiPanel.senza-ciclo.dettando:not(.voce-attiva) .asc-onda:nth-of-type(4){animation-delay:2.52s}
#aiPanel.senza-ciclo.dettando:not(.voce-attiva) .asc-onda:nth-of-type(5){animation-delay:3.36s}
@media (prefers-reduced-motion: reduce){ #aiNucleo .asc-onda{animation:none;opacity:0} }
/* MENTRE ASCOLTA la spirale gira, con la stessa calma di quando pensa:
   il giro sta sul bottone, il respiro sul disegno dentro — due elementi,
   niente litigi fra le due animazioni. Questa è la RISERVA: vale quando il
   misuratore del suono non c'è (microfono negato, browser vecchio, o chi ha
   chiesto meno movimento). Quando invece il misuratore è acceso il movimento
   lo comanda la voce, e queste animazioni si spengono. */
#aiPanel.dettando #aiNucleo .asc-segno{animation:giraSegno 6s linear infinite}

/* IL NUCLEO ATTACCATO ALLA VOCE.
   Quando il misuratore del suono è acceso (classe «voce-attiva»), il movimento
   non viene più da un'animazione a tempo fisso: lo scrive un numero, «--voce»
   da 0 a 1, che il codice aggiorna sessanta volte al secondo leggendo quanto
   suono c'è. Qui si spengono le animazioni a orologio e si lascia comandare
   quel numero: rotazione e scala le muove il codice sul segno; l'alone qui
   sotto lo accende la voce — più forte parli, più si allarga e si accende.
   Silenzio → «--voce» torna a zero e resta il respiro lento scritto dal codice. */
#aiPanel.voce-attiva #aiNucleo .asc-segno,
#aiPanel.voce-attiva #aiNucleo .asc-segno svg{animation:none}
#aiPanel.voce-attiva #aiNucleo .asc-segno::after{
  animation:none;
  opacity:calc(.12 + var(--voce,0) * .7);
  transform:scale(calc(1 + var(--voce,0) * .32));
  box-shadow:0 0 calc(6px + var(--voce,0) * 26px)
    color-mix(in srgb, var(--accento) calc(35% + var(--voce,0) * 55%), transparent);
  transition:opacity .09s linear, transform .09s linear, box-shadow .09s linear}
#aiNucleo .asc-nota{font-size:12.5px;color:var(--grigio)}
.ai-crediti{margin:0 12px 8px;padding:9px 12px;border-radius:12px;font-size:12.5px;font-weight:600;
  background:color-mix(in srgb, var(--attesa) 16%, transparent); color:var(--attesa);
  border:1px solid color-mix(in srgb, var(--attesa) 34%, transparent)}
.ai-crediti.finiti{background:color-mix(in srgb, var(--ritardo) 16%, transparent);
  color:var(--ritardo); border-color:color-mix(in srgb, var(--ritardo) 34%, transparent)}
@media (prefers-reduced-motion: reduce){
  #aiNucleo .asc-segno svg, #aiNucleo .asc-segno::after,
  #aiPanel.dettando #aiNucleo .asc-segno{animation:none}
}
@keyframes micBatte{0%,100%{transform:scale(1)}50%{transform:scale(1.16)}}
#aiAllegati{display:flex;flex-wrap:wrap;gap:7px;padding:0 10px;background:var(--scheda)}
#aiAllegati:not(:empty){padding:10px 10px 0}
.alleg{display:flex;align-items:center;gap:7px;background:var(--campo);border:1px solid var(--filo);
  border-radius:12px;padding:5px 7px 5px 5px;font-size:11.5px;color:var(--inchiostro);max-width:180px}
.alleg img{width:30px;height:30px;border-radius:8px;object-fit:cover;flex:0 0 30px}
.alleg .pdfic{width:30px;height:30px;border-radius:8px;flex:0 0 30px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accento) 18%,transparent);color:var(--accento-testo);
  font-size:9px;font-weight:800}
.alleg b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.alleg button{border:0;background:none;color:var(--grigio);cursor:pointer;font-size:15px;
  line-height:1;padding:0 2px;font-family:inherit}
.aicomp{flex:1;min-width:0;border:1px solid var(--filo);background:var(--campo);border-radius:20px;
  padding:8px 8px 8px 12px;transition:border-color .18s ease}
.aicomp:focus-within{border-color:var(--accento)}
.aicomp-b{display:flex;align-items:center;gap:6px;margin-top:4px}
.aicomp-sp{flex:1}
#aiInput{display:block;width:100%;border:0;background:none;color:var(--inchiostro);resize:none;
  padding:4px 2px;font-size:15px;line-height:1.45;font-family:inherit;outline:none;max-height:132px;overflow-y:auto}
#aiInput::placeholder{color:var(--grigio-tenue)}
#aiSend{flex:0 0 36px;width:36px;height:36px;background:var(--accento);border:0;color:var(--su-accento);
  border-radius:50%;cursor:pointer;font-family:inherit;display:grid;place-items:center;transition:opacity .18s ease}
#aiSend svg{width:17px;height:17px}
#aiSend[disabled]{opacity:.4}
#aiHead .aidot .segnoAI{width:38px;height:38px;display:block;
  filter:drop-shadow(0 0 5px color-mix(in srgb, var(--accento) 65%, transparent));
  animation:respiroSegno 2.9s cubic-bezier(.4,0,.6,1) infinite}
@media (prefers-reduced-motion: reduce){ #aiHead .aidot .segnoAI{animation:none} }
.ainote{font-size:11px;color:var(--grigio);text-align:center;padding:0 12px 9px;background:var(--scheda)}

/* chi ha chiesto meno movimento nelle impostazioni del telefono non deve vedere animazioni */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* ============================================================
   LA REGOLA DEI 16 PIXEL
   Su iPhone, se tocchi una casella il cui testo è più piccolo di 16px, il
   telefono INGRANDISCE la pagina da solo. E dopo non torna: resta storta, si
   scorre di lato, i tasti finiscono fuori. È esattamente quello che si vedeva
   nell'app installata. Non è una preferenza di stile: è un vincolo della
   piattaforma, e per questo vince su tutto.
   ============================================================ */
@media (hover: none) and (pointer: coarse){
  input, select, textarea { font-size: 16px !important; }
}

/* La tastiera. L'assistente occupa tutto lo schermo: quando la tastiera sale
   non deve finirci sotto, quindi il fondo del pannello si alza di quanto se ne
   mangia la tastiera. Il menù in basso si toglie di mezzo. */
@media (max-width:900px){
  #aiPanel{ padding-bottom: calc(var(--sab) + var(--tastiera, 0px)); }
}
body.tastiera-aperta .tabbar{ opacity:0; pointer-events:none; }

/* il bollo col numero accanto ai titoli dei riquadri («Cosa ha sollevato 4»).
   Le regole delle pillole del calendario sono andate con il calendario vecchio
   (24 settembre 2026): quello nuovo sta in «calendario.css». */
.pill{display:flex;flex-wrap:wrap;gap:4px;margin-top:0;align-items:center}

/* scheda del singolo appuntamento */
.dt-riga{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}
.dt-riga:last-child{border-bottom:0}
.dt-riga span{color:var(--gray);font-size:13px}
.dt-riga b{font-size:13.5px;font-weight:600;text-align:right}
.btn.pericolo{color:var(--warn,#EF4444)}

/* ==========================================================================
   25 AGOSTO, SERA — LA PAGINA DELL'ASSISTENTE RIFATTA
   ==========================================================================
   Prima era una chat con un microfono piccolo in fondo: sembrava WhatsApp con
   un assistente incollato dentro. Adesso il nucleo è la parte alta e sta lì
   sempre — lo tocchi, parli, lo ritocchi e il messaggio parte. La
   conversazione scorre sotto, senza fumetti né cornici, e la casella in fondo
   è appoggiata sul fondo invece di stare dentro un riquadro.
   ========================================================================== */

#aiNucleo{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:14px; padding:26px 16px 20px;
  background:var(--scheda);
  transition:padding .42s cubic-bezier(.22,.8,.3,1);
}
#aiNucleo .asc-scena{
  width:150px; height:150px;
  transition:width .42s cubic-bezier(.22,.8,.3,1), height .42s cubic-bezier(.22,.8,.3,1);
}
#aiNucleo .asc-segno{
  width:126px; height:126px; background:none; border:0; cursor:pointer;
  transition:width .42s cubic-bezier(.22,.8,.3,1), height .42s cubic-bezier(.22,.8,.3,1);
}
#aiNucleo .asc-segno svg{ width:100%; height:100%; }
/* LA GIRELLA NEL NUCLEO GRANDE ERA STORTA E PICCOLA.
   Jacopo: «quella grande dove c'è scritto "tocca per parlare" è tutta
   sfasata, piccolina, tutta a sinistra».
   Colpa di due regole generiche più su — «#aiNucleo .asc-segno svg{width:88px}»
   e «{width:100%}» — che prendono QUALSIASI svg dentro il nucleo, quindi
   anche la girella del volto, che invece si posiziona da sola con «inset».
   Larghezza e altezza imposte + inset = disegno fuori posto e fuori misura.
   Qui la girella si riprende le sue misure: piena e centrata, come nel bollo
   piccolo dove infatti funzionava già. */
#aiNucleo .asc-segno svg.vv-girella,
#aiNucleo .volto-ai svg.vv-girella{
  width:auto; height:auto; inset:-14%; position:absolute; }
/* e deve GIRARE: più su c'è una regola «body.ai-pensa … svg{animation:none}»
   che spegneva tutti gli svg del nucleo, girella compresa. Proprio mentre
   pensa, cioè l'unico momento in cui la girella serve. */
body.ai-pensa #aiNucleo .asc-segno .volto-ai.v-pensa svg.vv-girella,
body.ai-pensa #aiNucleo .asc-segno .volto-ai.v-scheda svg.vv-girella{
  animation:vvGira 2.4s linear infinite }
#aiNucleo .asc-onda{ width:145px; height:145px; margin:-72.5px 0 0 -72.5px }
#aiNucleo .asc-bagliore{ width:270px; height:270px; opacity:.5; }
#aiPanel.dettando:not(.voce-attiva) #aiNucleo .asc-bagliore{ opacity:.7 }
/* niente cerchio nero attorno al segno: è un segno, non un bottone */
#aiNucleo .asc-segno::after{ display:none }
#aiNucleo .asc-nota{ font-size:12.5px; color:var(--grigio); text-align:center }
#aiNucleo .asc-testo[hidden]{ display:none }
/* l'altezza è fissa apposta: se la casella crescesse mentre parli, il nucleo
   si sposterebbe su e giù a ogni frase */
#aiNucleo .asc-testo{ height:74px; overflow-y:auto }

/* QUANDO SI SCRIVE, IL NUCLEO SI FA DA PARTE.
   Su uno schermo di telefono metà pagina al nucleo lascia tre righe alla
   conversazione. Appena tocchi la casella o cominci a scrivere si rimpicciolisce
   — resta visibile, smette di essere il protagonista. */
/* MENTRE SI SCRIVE IL NUCLEO SE NE VA.
   Prima si rimpiccioliva ma restava lì, duecento pixel: col telefono e la
   tastiera alzata si mangiava metà di quel che resta, e la conversazione —
   che è la cosa che stai guardando — spariva. Adesso esce di scena del tutto
   e l'assistente resta in cima nella barra compatta: la faccia si vede, lo
   stato si legge, e lo spazio va tutto ai messaggi. */
/* ...ma solo dove lo spazio manca davvero. Sul computer la conversazione ha
   la sua colonna e la tastiera non copre niente: far sparire la faccia mentre
   si scrive toglieva l'unica cosa che dice cosa sta succedendo, e lasciava al
   suo posto una barretta alta una riga. */
@media(max-width:760px){
  #aiPanel.scrive #aiNucleo{ display:none }
  #aiPanel.scrive #aiNucleo.mai{ padding:14px 16px 10px; gap:8px }
  #aiPanel.scrive #aiNucleo .asc-scena{ width:74px; height:74px }
  #aiPanel.scrive #aiNucleo .asc-segno{ width:62px; height:62px }
  #aiPanel.scrive #aiNucleo .asc-onda{ width:71px; height:71px; margin:-35.5px 0 0 -35.5px }
  #aiPanel.scrive #aiNucleo .asc-bagliore{ width:150px; height:150px }
  #aiPanel.scrive #aiNucleo .asc-nota{ display:none }
}

/* MENTRE RAGIONA: gira, come il segno in alto. */
body.ai-pensa #aiNucleo .asc-segno{ animation:giraSegno 2.4s linear infinite }
body.ai-pensa #aiNucleo .asc-segno svg{ animation:respiroSegno 1.1s cubic-bezier(.4,0,.6,1) infinite }
body.ai-pensa #aiNucleo .asc-nota::after{ content:"Sto guardando i tuoi dati…" }
body.ai-pensa #aiNucleo .asc-nota{ font-size:0 }
body.ai-pensa #aiNucleo .asc-nota::after{ font-size:12.5px }

/* LA CONVERSAZIONE, SENZA FUMETTI.
   Niente bolle contrapposte: quello che dici tu è a destra e in accento,
   quello che risponde lui è testo normale, largo quanto la colonna. */
#aiLog{ padding:6px 16px 16px; gap:14px; background:var(--scheda) }
.aib{ max-width:100%; padding:0; border:0; background:none; border-radius:0;
  font-size:14.5px; line-height:1.55; color:var(--inchiostro) }
.aib.me{ background:none; border:0; color:var(--accento); font-weight:600;
  max-width:82%; margin-left:auto; text-align:right; border-radius:0; padding:0 }

/* LA CASELLA: appoggiata sul fondo, non dentro un riquadro. */
#aiFoot{ border-top:0; background:var(--scheda); padding:2px 14px 6px }
.ainote{ padding-top:6px }
.aicomp{ border:0 !important; background:none !important; border-radius:0 !important;
  padding:10px 0 0 !important; border-top:1px solid var(--filo) !important; box-shadow:none !important }
.aicomp:focus-within{ border-top-color:var(--accento) !important }
/* la casella resta anche mentre il nucleo ascolta: chi vuole scrivere non
   deve prima spegnere la voce */
#aiPanel.dettando .aicomp{ display:block }
#aiMic[hidden]{ display:none !important }
#aiInput{ font-size:15.5px; padding:6px 2px; max-height:38vh }
.aicomp-b{ margin-top:2px }
#aiGraffa,#aiSend{ border:0; background:none; box-shadow:none }
#aiGraffa{ color:var(--grigio) }
#aiSend{ background:var(--accento); color:var(--su-accento) }

@media(max-width:760px){
  #aiNucleo{ padding:18px 14px 14px }
  #aiNucleo .asc-scena{ width:132px; height:132px }
  #aiNucleo .asc-segno{ width:110px; height:110px }
  #aiNucleo .asc-onda{ width:127px; height:127px; margin:-63.5px 0 0 -63.5px }
  #aiNucleo .asc-bagliore{ width:236px; height:236px }
}
@media (prefers-reduced-motion: reduce){
  #aiNucleo, #aiNucleo .asc-scena, #aiNucleo .asc-segno{ transition:none }
  body.ai-pensa #aiNucleo .asc-segno, body.ai-pensa #aiNucleo .asc-segno svg{ animation:none }
}

/* ---- IL SEGNO IN ALTO A DESTRA ----
   Faceva avanti e indietro perché aveva DUE animazioni addosso: un anello che
   pulsava per conto suo e il disegno che respirava per conto suo. Adesso ne
   ha una sola, la stessa del nucleo, col bagliore invece dell'anello. E il
   cerchio nero dietro non c'è più: deve sembrare un segno appoggiato lì. */
.ph .tasto-ai{ background:none; box-shadow:none }
.ph .tasto-ai::after{
  animation:aloneAccesso 2.9s cubic-bezier(.4,0,.6,1) infinite;
  inset:-16px; border-radius:50%; box-shadow:none;
  background:radial-gradient(circle,
    color-mix(in srgb, var(--accento) 36%, transparent) 0%,
    color-mix(in srgb, var(--accento) 18%, transparent) 20%,
    color-mix(in srgb, var(--accento) 7%, transparent) 38%,
    transparent 62%);
}
.ph .tasto-ai:hover{ box-shadow:none }
#aiHead .aidot{ background:none; box-shadow:none; position:relative; overflow:visible }
#aiHead .aidot::after{
  content:""; position:absolute; inset:-14px; border-radius:50%; pointer-events:none; z-index:-1;
  animation:aloneAccesso 2.9s cubic-bezier(.4,0,.6,1) infinite;
  background:radial-gradient(circle,
    color-mix(in srgb, var(--accento) 34%, transparent) 0%,
    color-mix(in srgb, var(--accento) 16%, transparent) 20%,
    color-mix(in srgb, var(--accento) 6%, transparent) 38%,
    transparent 62%);
}
@media (prefers-reduced-motion: reduce){ #aiHead .aidot::after{ animation:none; opacity:.5 } }
@media (prefers-reduced-motion: reduce){ .ph .tasto-ai::after{ animation:none; opacity:.55 } }

/* ==========================================================================
   25 AGOSTO, TARDA SERA — L'ASSISTENTE SENZA CORNICE
   ==========================================================================
   Jacopo: «toglierei tutto, anche la nota che è ripetitiva; lascerei nero
   bello scuro con una sfumatura verde, e il segno che pulsa dove lo attivo
   per parlare».
   Quindi: niente titolo, niente sottotitolo, niente nota in fondo. Il fondo
   è il nero pece con una luce verde che scende da dietro il segno, e l'unica
   scritta è «Tocca il segno e parla».
   ========================================================================== */

#aiPanel{
  background:
    radial-gradient(120% 62% at 50% 4%,
      color-mix(in srgb, var(--accento) 15%, transparent) 0%,
      color-mix(in srgb, var(--accento) 7%, transparent) 26%,
      color-mix(in srgb, var(--accento) 2%, transparent) 46%,
      transparent 68%),
    var(--nero-pece);
}
#aiNucleo, #aiLog, #aiFoot{ background:transparent }

/* LA VIA D'USCITA. Freccia e nome della pagina da cui sei entrato, in alto a
   sinistra: quella la capiscono tutti. La barretta da tirare giù è sparita —
   il gesto resta, ma non ha più bisogno di un disegno che lo annunci. */
#aiHead{ border-bottom:0; justify-content:flex-start; padding:8px 8px 2px;
  background:transparent }
#aiCompatto{ background:transparent; border-bottom:0 }
/* la casella di scrittura non ha piu' il filo sopra: era l'ultima riga
   grigia rimasta, e la casella si vede benissimo da sola */
.aicomp{ border-top:0 !important }
.aicomp:focus-within{ border-top-color:transparent !important }
.ainote{ background:transparent }
.aiesci{
  -webkit-appearance:none; appearance:none; border:0; background:none;
  display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  padding:9px 14px 9px 8px; border-radius:12px;
  color:var(--accento-testo); font-family:inherit; font-size:15px; font-weight:600;
  -webkit-tap-highlight-color:transparent;
  transition:background var(--fast) ease;
}
.aiesci svg{ width:20px; height:20px; flex:0 0 20px }
.aiesci:hover, .aiesci:active{ background:color-mix(in srgb, var(--accento) 12%, transparent) }
.aiesci:focus-visible{ outline:2px solid var(--accento); outline-offset:2px }

/* la sola scritta rimasta, nel verde del marchio */
#aiNucleo .asc-nota{
  color:var(--accento-testo); font-size:13px; font-weight:550;
  letter-spacing:.01em; text-align:center;
}
body.ai-pensa #aiNucleo .asc-nota::after{ color:var(--accento-testo) }

/* I DUE TASTI IN FONDO, tutti e due tondi: la graffetta grigia, l'invio
   verde. Prima la graffetta era un'icona nuda e sembrava spenta. */
#aiGraffa, #aiSend{
  flex:0 0 40px; width:40px; height:40px; border-radius:999px; border:0;
  display:grid; place-items:center; cursor:pointer;
}
#aiGraffa{ background:var(--campo); color:var(--grigio) }
#aiGraffa:hover{ background:color-mix(in srgb, var(--campo) 70%, #FFFFFF 8%); color:var(--inchiostro) }
#aiSend{ background:var(--accento); color:var(--su-accento) }
#aiGraffa svg{ width:19px; height:19px }
#aiSend svg{ width:18px; height:18px }
.aicomp-b{ gap:10px }

/* ==========================================================================
   IL NUCLEO DI IACOPO — misure della specifica, in scala col gestionale
   ==========================================================================
   La specifica descrive una scena da 520 px con un nucleo da 200. Qui il
   nucleo è più piccolo (dentro l'applicativo le misure erano già giuste),
   quindi tutto il resto scende in proporzione dal nucleo:
     anelli 1,15×   ·   bagliore d'ambiente 2,3×   ·   velo del pensiero 1,7×
   I due bagliori sono assoluti e centrati: escono dal riquadro e va bene,
   sono luce. Il gradiente d'ambiente muore esattamente dove muore l'ultimo
   anello: allargarlo lo farebbe sembrare una palla appoggiata sul fondo.
   ========================================================================== */
#aiNucleo .asc-segno{
  position:relative; display:grid; place-items:center;
  will-change:transform; background:none; border:0;
}
#aiNucleo .asc-logo{
  position:relative; z-index:3; width:100%; height:100%; display:block;
  will-change:opacity; color:var(--accento);
}
/* l'alone-silhouette: una SECONDA copia del segno, sotto quella vera, con
   tre ombre luminose ferme. È questo che fa partire la luce dai bracci
   della spirale invece che da un cerchio dietro. Le ombre non si animano
   MAI: si anima solo la sua opacità. */
#aiNucleo .asc-alone{
  position:absolute; inset:0; z-index:2; width:100%; height:100%; display:block;
  color:var(--accento); pointer-events:none; will-change:opacity;
  filter:drop-shadow(0 0 5px rgba(0,255,154,.9))
         drop-shadow(0 0 16px rgba(0,255,154,.55))
         drop-shadow(0 0 44px rgba(0,255,154,.35));
}
/* bagliore d'ambiente — 2,3 volte il nucleo */
#aiNucleo .asc-bagliore{
  position:absolute; left:50%; top:50%; z-index:0; pointer-events:none;
  width:230%; height:230%; margin:-115% 0 0 -115%; border-radius:50%;
  opacity:.38; will-change:transform,opacity;
  background:radial-gradient(circle,
    rgba(0,255,154,.42) 0%, rgba(0,255,154,.22) 18%,
    rgba(0,255,154,.09) 34%, rgba(0,255,154,.025) 48%, rgba(0,255,154,0) 62%);
}
/* velo del pensiero — 1,7 volte il nucleo, verde-bianco freddo.
   Mai giallo: nel gestionale il giallo vuol dire «attenzione». */
#aiNucleo .asc-pensiero{
  position:absolute; left:50%; top:50%; z-index:1; pointer-events:none;
  width:170%; height:170%; margin:-85% 0 0 -85%; border-radius:50%;
  opacity:0; will-change:opacity;
  background:radial-gradient(circle,
    rgba(190,255,228,.5) 0%, rgba(150,255,214,.22) 26%,
    rgba(120,255,200,.07) 44%, rgba(120,255,200,0) 60%);
}
/* gli anelli — 1,15 volte il nucleo, fratelli e non figli */
#aiNucleo .asc-onda{
  position:absolute; left:50%; top:50%; border-radius:50%;
  border:1px solid var(--accento); background:none;
  opacity:0; pointer-events:none; will-change:transform,opacity;
}
/* niente più animazioni CSS sul nucleo: adesso comanda il ciclo del codice,
   che gira sempre finché il pannello è aperto */
#aiNucleo .asc-segno, #aiNucleo .asc-logo,
#aiPanel.dettando #aiNucleo .asc-segno,
#aiPanel.voce-attiva #aiNucleo .asc-segno,
#aiPanel.voce-attiva #aiNucleo .asc-segno svg,
body.ai-pensa #aiNucleo .asc-segno,
body.ai-pensa #aiNucleo .asc-segno svg{ animation:none }
#aiNucleo .asc-segno::after{ display:none }
@media (prefers-reduced-motion: reduce){
  #aiNucleo .asc-onda{ opacity:0 !important }
  #aiNucleo .asc-segno{ transform:none !important }
  #aiNucleo .asc-bagliore{ opacity:.38 !important; transform:none !important }
  #aiNucleo .asc-pensiero{ opacity:0 !important }
  #aiNucleo .asc-alone{ opacity:.6 !important }
  #aiNucleo .asc-logo{ opacity:1 !important }
}

/* LE MISURE, tutte legate alla scena.
   Nella specifica la scena è 2,6 volte il nucleo perché l'anello più largo
   arriva a 1,15 × 1,8 = poco più di due volte: se la scena è più stretta,
   gli anelli escono dal riquadro e si tagliano sul bordo del pannello — che
   è esattamente quello che succedeva. Qui la scena comanda e tutto il resto
   è una percentuale sua: nucleo 45,5%, anelli 52,3%. */
#aiNucleo .asc-scena{ width:248px; height:248px; flex:0 0 auto }
#aiNucleo .asc-segno{ width:68%; height:68% }
/* LA FACCIA RIEMPIE IL SUO POSTO (6 settembre 2026).
   Stava a 88 pixel dentro un tondo da 113: venticinque pixel di aria che
   nessuno aveva deciso, e che a occhio facevano sembrare Mo perso in mezzo
   agli anelli. Con la polvere dentro non e' piu' solo una questione di
   proporzioni: il granello e' largo due pixel comunque sia grande la sfera,
   quindi su una sfera piccola la stessa polvere si accavalla e si legge come
   una massa. Sessantaquattro per cento di area in piu' e' la differenza fra
   «un disco verde» e «una nuvola». */
#aiNucleo .volto-ai{ --vd:100px }   /* 7 settembre 2026: «100 grandezza massima Mo» (era 168) */
#aiNucleo .asc-onda{
  width:74%; height:74%; margin:0;
  transform:translate(-50%,-50%) scale(.85);
}
#aiNucleo{ padding:10px 16px 14px; gap:2px }
#aiNucleo .asc-nota{ order:-1; margin-bottom:6px }
/* IL RIMPICCIOLIMENTO E' ROBA DA TELEFONO.
   Sul computer la faccia non deve muoversi di un pixel quando si scrive:
   Jacopo, 6 settembre 2026, «voglio che lui rimanga esattamente com'e', con
   "tocca per parlare", anche quando scrivo non deve sparire». E infatti sul
   computer non c'e' nessuna tastiera che si alza a rubare mezzo schermo —
   la ragione per cui questo rimpicciolimento esiste. */
@media(max-width:760px){
  #aiNucleo .asc-scena{ width:212px; height:212px }
  #aiNucleo .volto-ai{ --vd:100px }
  #aiPanel.scrive #aiNucleo .asc-scena{ width:112px; height:112px }
  #aiPanel.scrive #aiNucleo .volto-ai{ --vd:50px }
  #aiPanel.scrive #aiNucleo .asc-segno,
  #aiPanel.scrive #aiNucleo .asc-onda,
  #aiPanel.scrive #aiNucleo .asc-bagliore{ width:auto; height:auto }
  #aiPanel.scrive #aiNucleo .asc-segno{ width:45.5%; height:45.5% }
  #aiPanel.scrive #aiNucleo .asc-onda{ width:52.3%; height:52.3% }
  #aiPanel.scrive #aiNucleo .asc-bagliore{ width:230%; height:230%; margin:-115% 0 0 -115% }
  #aiPanel.scrive #aiNucleo{ padding:4px 16px 8px }
}

/* ====== IL DISEGNO DELLA SCHERMATA CHE SPAVENTA ======
   Il punto 4 del collegamento ai fogli è quello dove si ferma la gente:
   Google dice «non ha verificato questa app» e il tasto per andare avanti è
   nascosto dietro un «Avanzate» piccolo, in basso a sinistra, che non sembra
   un tasto. Descriverlo a parole non basta: chi si spaventa smette di leggere.
   Quindi qui c'è la schermata disegnata, con segnato dove premere.
   È disegnata e non fotografata di proposito: una foto invecchia col giorno
   in cui Google cambia un colore, questa no, e pesa duecento byte. */
.gfig{ margin:10px 0 2px; }
.gfig>summary{ cursor:pointer; list-style:none; color:var(--accento);
  font-size:13.5px; padding:6px 0; }
.gfig>summary::-webkit-details-marker{ display:none }
.gfig>summary::before{ content:"▸ "; }
.gfig[open]>summary::before{ content:"▾ "; }
.gfin{ border:1px solid var(--filo); border-radius:14px; overflow:hidden;
  background:var(--campo); max-width:340px; }
.gfin .gbar{ display:flex; gap:5px; padding:8px 10px; border-bottom:1px solid var(--filo); }
.gfin .gbar i{ width:8px; height:8px; border-radius:50%; background:var(--grigio); opacity:.45; }
.gfin .gcorpo{ padding:14px 16px 16px; }
.gfin .gtit{ font-size:14px; font-weight:650; color:var(--inchiostro); line-height:1.35; }
.gfin .griga{ height:7px; border-radius:99px; background:var(--grigio); opacity:.28; margin-top:9px; }
.gfin .griga.corta{ width:62% }
.gfin .gsotto{ display:flex; align-items:center; gap:8px; margin-top:16px; }
.gfin .gav{ font-size:13px; color:#5b8def; position:relative; padding:3px 7px;
  border-radius:7px; outline:2px solid var(--accento); outline-offset:1px; }
.gfin .gann{ margin-left:auto; font-size:12.5px; color:var(--grigio); }
.gfin .gapri{ margin-top:12px; padding-top:12px; border-top:1px dashed var(--filo); }
.gfin .gapri .gav{ display:inline-block }
.gnum{ display:inline-flex; align-items:center; justify-content:center;
  width:19px; height:19px; border-radius:50%; background:var(--accento);
  color:var(--su-accento); font-size:11.5px; font-weight:700; flex:none; }
.gfig .gdida{ font-size:12.5px; color:var(--grigio); margin:8px 0 0; line-height:1.5; max-width:340px; }

/* ================= LEGGIBILITA' (13 settembre 2026) =================
   Da una revisione esterna: «diverse etichette sono piccole, grigie e molto
   spaziate». Erano vere tutte e tre le cose insieme, ed e' la combinazione a
   fare il danno: sotto gli undici pixel, in grigio, con un decimo di spazio
   fra le lettere, una parola in maiuscolo si guarda invece di leggersi.
   Qui si alza il testo secondario di mezzo punto e si stringe la spaziatura
   delle etichette: restano etichette — piccole, quiete, in mono — ma si
   leggono senza avvicinare il telefono. Le pillole del mese non si toccano:
   li' lo spazio e' quello che e', e la cura e' un'altra (il numero al posto
   dei nomi, piu' su). */
.meta, .modal .msub{ font-size:13.5px; }
.cl-f i{ font-size:11px; letter-spacing:.045em; }
.mini .l{ font-size:11px; letter-spacing:.04em; }
.appunt .via{ font-size:10.5px; letter-spacing:.035em; }
.og-g .sg{ font-size:10.5px; letter-spacing:.07em; }
.strum-tit, .soon-tit{ font-size:11.5px; letter-spacing:.075em; }
.setrow .st i, .strum-v .st i{ font-size:13px; }