/* Dots: le mascotte di OpenDots al posto dei volti (2026-10-04, cc-dots-opus). Vedi dots.js e INTEGRA-DOTS.md.
   <html data-avatar="dots|volti|iniziali">: ogni avatar contiene il contenuto di prima + .dot-img + .dot-ini,
   e qui si decide quale si vede. Con «volti» nessuna regola cambia un pixel: si nascondono solo le aggiunte.
   Movimento: solo transform e opacity, solo con prefers-reduced-motion: no-preference e senza data-dots-fermi. */

/* ---------------------------------------------------------------- cosa si vede */
.dot-img, .dot-ini, .dot-extra { display: none; }
:root[data-avatar="dots"] .dot-host > .dot-img { display: block; }
:root[data-avatar="dots"] .dot-extra { display: inline-block; }
:root[data-avatar="iniziali"] .dot-host > .dot-ini { display: block; }

/* dots: il contenuto di prima sparisce (svg, emoji, lettera); i testi nudi con font-size 0 */
:root[data-avatar="dots"] :is(.dot-av, .dot-lav) > :not(.dot-img) { display: none; }
:root[data-avatar="dots"] :is(.dot-av, .dot-lav) { font-size: 0; }
:root[data-avatar="dots"] .dot-aj > b, :root[data-avatar="dots"] .dot-chm > .chm-j { display: none; }
/* iniziali: solo le lettere (Jarvis nella barra e nella chiamata ha già la sua J) */
:root[data-avatar="iniziali"] :is(.dot-av, .dot-lav) > :not(.dot-ini) { display: none; }
:root[data-avatar="iniziali"] :is(.dot-av, .dot-lav) { font-size: 0; container-type: size; }
.dot-ini { font-size: 40cqmin; font-weight: 600; line-height: 1; letter-spacing: -.02em; color: var(--testo); }
:root[data-avatar="iniziali"] .dot-lav .dot-ini { font-size: 12px; }

/* ---------------------------------------------------------------- il Dot dentro un avatar */
:root[data-avatar="dots"] .dot-av {
  background: none; border-color: transparent; overflow: visible; padding: 0; box-shadow: none; animation: none;
}
.dot-host > .dot-img {
  width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none;
  /* ombra morbida sotto, nessun alone: si vede sul fondo chiaro e non sporca quello scuro */
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .38));
  transform-origin: 50% 85%;
}
:root:is([data-tema="chiaro"], [data-tema="claude"], [data-tema="auto"][data-auto="chiaro"]) .dot-host > .dot-img {
  filter: drop-shadow(0 1px 1.5px rgba(40, 30, 20, .28));
}
/* chi lavora: niente anello che gira attorno al Dot (app.css), resta il pallino verde e il Dot si muove */
:root[data-avatar="dots"] :is([data-agente].attivo .dot-av, .catena li.attivo .dot-av, .dot-av.al-lavoro) {
  padding: 0; background: none; box-shadow: none; animation: none;
}

/* Jarvis: il viola, dentro un anello sottile del colore d'accento */
:root[data-avatar="dots"] .dot-av.dot-jarvis {
  border: 1.5px solid var(--accento-linea, rgba(89, 156, 231, .6)); background: var(--accento-fondo, rgba(89, 156, 231, .12));
  padding: 2px;
}
:root[data-avatar="dots"] .dot-av.dot-jarvis > .dot-img { width: 100%; height: 100%; }

/* barra in alto: il Dot di Jarvis dentro il cerchio di stato (36 px) */
.dot-aj > .dot-img, .dot-chm > .dot-img { position: absolute; z-index: 1; }
.dot-aj > .dot-img { inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); }
:root[data-avatar="dots"] .avatar-jarvis.spenta .dot-aj { opacity: 1; }
:root[data-avatar="dots"] .avatar-jarvis.spenta .dot-aj > .dot-img { opacity: .9; }

/* chiamata: il Dot grande al centro del cerchio, le onde restano attorno */
.dot-chm > .dot-img { inset: 12%; width: 76%; height: 76%; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }

/* avatarino dei lavori: il cerchio che gira lascia il posto al Dot */
:root[data-avatar="dots"] .dot-lav { background: none; border-color: transparent; animation: none; overflow: visible; }
:root[data-avatar="dots"] .dot-lav::before, :root[data-avatar="dots"] .dot-lav::after { content: none; }
:root[data-avatar="iniziali"] .dot-lav.in-corso .dot-ini { position: relative; z-index: 1; }

/* aggiunte: scheda di approvazione, registro, nota «Jarvis» della lavagna */
.dot-extra.dot-host { position: relative; flex: none; vertical-align: middle; }
.dot-apv { width: 24px; height: 24px; }
.dot-rg { width: 22px; height: 22px; }
.dot-nota-jarvis { position: absolute !important; left: -12px; top: -30px; width: 32px; height: 32px; pointer-events: none; z-index: 2; }
.dot-extra > .dot-img { display: block; }

/* fuori servizio (agente spento, archiviato, orfano): desaturato al 40% e fermo */
:root[data-avatar="dots"] :is(.agente.spento, .nodo.spento, .scheda-agente.spento, .agente.archiviato) .dot-av,
:root[data-avatar="dots"] .dot-av.dot-spento { filter: none; opacity: 1; }
:root :is(.agente.spento, .nodo.spento, .scheda-agente.spento, .agente.archiviato) .dot-host > .dot-img,
:root .dot-host.dot-spento > .dot-img { filter: saturate(.4) drop-shadow(0 1px 1.5px rgba(0, 0, 0, .3)); opacity: .8; }

/* allarme: puntino rosso col «!» (forma, non solo colore) in alto a destra */
:root[data-avatar="dots"] .dot-host.dot-allarme::before,
:root[data-avatar="dots"] .dot-lav.errore::before,
:root[data-avatar="dots"] dialog.chiamata[data-fase="fermo"] .dot-chm::before {
  content: "!"; position: absolute; z-index: 3; top: -2px; right: -3px; width: 13px; height: 13px; border-radius: 50%;
  display: grid; place-items: center; font: 700 9px/1 system-ui, sans-serif; color: #fff;
  background: var(--rosso, #e34671); border: 1.5px solid var(--chrome, #141414); box-sizing: border-box;
}
:root[data-avatar="dots"] dialog.chiamata[data-fase="fermo"] .dot-chm::before { top: 10%; right: 10%; width: 26px; height: 26px; font-size: 16px; }

/* ---------------------------------------------------------------- movimento */
@media (prefers-reduced-motion: no-preference) {
  /* riposo: un respiro lentissimo (non nei messaggi della chat, che possono essere centinaia) */
  :root[data-avatar="dots"]:not([data-dots-fermi]) .dot-host:not(.dot-spento) > .dot-img { animation: dot-respiro 7s ease-in-out infinite; }
  :root[data-avatar="dots"]:not([data-dots-fermi]) :is(.msg, .rg-evento) .dot-host > .dot-img { animation: none; }
  /* lavora: oscillazione leggera */
  :root[data-avatar="dots"]:not([data-dots-fermi]) :is([data-agente].attivo .dot-av, .catena li.attivo .dot-av, .dot-av.al-lavoro,
    .nodo.al-lavoro .dot-av, .dot-lav.in-corso, .avatar-jarvis.thinking .dot-aj, dialog.chiamata[data-fase="lavora"] .dot-chm) > .dot-img {
    animation: dot-lavora 1.8s ease-in-out infinite;
  }
  /* ascolta: respiro più ampio */
  :root[data-avatar="dots"]:not([data-dots-fermi]) :is(.avatar-jarvis.listening .dot-aj, dialog.chiamata[data-fase="ascolto"] .dot-chm,
    dialog.chiamata[data-fase="sente"] .dot-chm) > .dot-img {
    animation: dot-ascolta 2.6s ease-in-out infinite;
  }
  /* parla: dondola */
  :root[data-avatar="dots"]:not([data-dots-fermi]) :is(.avatar-jarvis.speaking .dot-aj, dialog.chiamata[data-fase="parla"] .dot-chm) > .dot-img {
    animation: dot-parla .9s ease-in-out infinite;
  }
  /* fuori servizio: fermo (vince anche su «lavora») */
  :root[data-avatar="dots"] :is(.agente.spento, .nodo.spento, .scheda-agente.spento, .agente.archiviato) .dot-host > .dot-img,
  :root[data-avatar="dots"] .dot-host.dot-spento.dot-spento > .dot-img { animation: none; }
  /* allarme: uno scuotimento solo (dots.js mette .dot-scuoti la prima volta) */
  :root[data-avatar="dots"]:not([data-dots-fermi]) :is(.dot-host.dot-scuoti, dialog.chiamata[data-fase="fermo"] .dot-chm) > .dot-img {
    animation: dot-scuoti .6s ease-in-out 1;
  }
}
@keyframes dot-respiro { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes dot-lavora { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-7%) rotate(-3deg); } 75% { transform: translateY(-3%) rotate(3deg); } }
@keyframes dot-ascolta { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06) translateY(-2%); } }
@keyframes dot-parla { 0%, 100% { transform: rotate(-3deg) scale(1.02); } 50% { transform: rotate(3deg) scale(1.05); } }
@keyframes dot-scuoti { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8%) rotate(-4deg); } 40% { transform: translateX(7%) rotate(3deg); }
  60% { transform: translateX(-5%) rotate(-2deg); } 80% { transform: translateX(3%); } }

/* ---------------------------------------------------------------- il controllo «Avatar» */
.dots-sezione { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--linea); }
.dots-anteprima { display: inline-flex; align-items: center; flex: none; min-width: 34px; }
.dots-anteprima img { width: 18px; height: 18px; margin-left: -6px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.dots-anteprima img:first-child { margin-left: 0; }
.dots-volto { display: block; width: 20px; height: 20px; border-radius: 50%; overflow: hidden; }
.dots-volto svg { display: block; width: 100%; height: 100%; }
.dots-lettere { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 600 9.5px/1 system-ui, sans-serif; font-style: normal;
  color: var(--testo); background: color-mix(in srgb, var(--accento) 18%, transparent); border: 1px solid color-mix(in srgb, var(--accento) 40%, transparent); }
.dots-fermi { display: flex; align-items: center; gap: 8px; padding: 6px 8px 4px; font-size: 12px; color: var(--testo-2); cursor: pointer; }
.dots-btn { display: inline-flex; align-items: center; padding: 4px 6px; }
.dots-btn img { width: 18px; height: 18px; }
@media (max-width: 820px) { .barra .dots-btn { display: none; } }
/* foglio «Altro» del telefono: come la riga «Tema» di temi.css */
.dots-foglio { grid-column: 1 / -1; display: grid; gap: 6px; padding: 10px 10px 8px; border: 1px solid var(--linea); border-radius: var(--r-xl); background: var(--fondo); }
.dots-foglio > b { font-size: 13.5px; }
.dots-foglio-scelte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.dots-foglio-scelte .tema-voce { grid-template-columns: auto minmax(0, 1fr); min-height: 44px; padding: 6px 8px; font-size: 13px; gap: 6px; }
.dots-foglio-scelte .tema-voce small, .dots-foglio-scelte .tema-segno { display: none; }
.dots-foglio-scelte .dots-anteprima { min-width: 0; }
.dots-foglio-scelte .dots-anteprima img + img { display: none; }
.dots-foglio .dots-fermi { min-height: 44px; padding: 0 2px; font-size: 13px; }