/* ══════════════════════════════════════════════════════════════════════
   LA CHAT CON LE MASCOTTE  (#mascot-chat-screen)
   ══════════════════════════════════════════════════════════════════════

   La schermata la aprono DUE fasce con due pelli diverse: i bambini nel
   fumetto (contorni neri, ombre dure, carta bianca) e i ragazzi nella pelle
   normale, che segue i tre temi. Quindi il foglio e' scritto in due strati:

     1. la base, tutta su TOKEN del tema (--text, --card-bg, --bg-secondary):
        e' quella che vedono i ragazzi, e funziona in chiaro, carta e scuro
        senza ritocchi;
     2. il blocco `html[data-age="kids"]`, che rimette le superfici FISSE del
        fumetto — e allora anche il testo dev'essere fisso.

   E' la regola gia' pagata due volte in questo progetto: se il testo segue
   il tema, la superficie sotto deve seguirlo; se la superficie e' fissa (una
   nuvoletta di carta), e' il TESTO a dover essere fisso. Mescolarli e' come
   sono spariti i titoli della fascia junior nel tema scuro.

   Niente opacita' per spegnere una riga secondaria: si spegne col COLORE,
   o il contrasto finisce per dipendere da cio' che c'e' sotto. */

#mascot-chat-content { display: flex; flex-direction: column; gap: 12px; }

/* ─── Chi ti sta parlando ─────────────────────────────────────────────── */
.mc-testa {
  display: flex; align-items: center; gap: 12px;
  background: var(--card-bg, #fff); border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--r-lg, 20px); padding: 12px;
}
.mc-ritratto { width: 92px; height: 92px; object-fit: contain; flex: none; }
.mc-chi { min-width: 0; }
.mc-nome { margin: 0 0 4px; font-size: 1.15rem; font-weight: 800; color: var(--text); }
.mc-nota { margin: 0; font-size: .86rem; line-height: 1.35; color: var(--text-muted); }

/* ─── La striscia delle sette facce ───────────────────────────────────── */
/* Scorre in orizzontale: sette cerchi leggibili non stanno in 420px, e
   stringerli fino a farceli stare li renderebbe indistinguibili — che e'
   tutto cio' che devono fare. */
.mc-cast {
  display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 8px;
  scrollbar-width: none;
  /* Il bordo destro SFUMA: senza, a 390px la striscia finiva esattamente
     sulla quinta faccia e sembrava che i personaggi fossero cinque
     (revisione 2026-08-30, condivisa da Ciro). La sfumatura + la faccia
     mezza tagliata sono il segnale che si scorre. */
  mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
}
.mc-cast::-webkit-scrollbar { display: none; }
.mc-faccia {
  /* 72 e non 68: a 390px sette per 78 faceva ESATTAMENTE cinque facce piene
     — il taglio a meta' della sesta e' voluto, e' lui che dice «continua». */
  flex: none; width: 72px; background: none; border: 0; padding: 0;
  cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px;
  font: inherit; color: var(--text);
}
.mc-faccia img {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  background: var(--bg-secondary, #f8fafc);
  border: 3px solid var(--border-strong, #cbd5e1);
}
.mc-faccia.is-on img { border-color: var(--bh-red, #e4002b); }
.mc-faccia-nome { font-size: .72rem; font-weight: 700; color: var(--text); }

/* ─── Il filo ─────────────────────────────────────────────────────────── */
.mc-filo {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 46vh; overflow-y: auto; padding: 4px;
}
.mc-bolla { display: flex; gap: 8px; align-items: flex-end; max-width: 88%; }
.mc-bolla.is-sua { align-self: flex-start; }
.mc-bolla.is-mia {
  align-self: flex-end; background: var(--bh-red, #e4002b); color: #fff;
  border-radius: 16px 16px 4px 16px; padding: 9px 13px;
}
.mc-bolla-faccia {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none;
  background: var(--bg-secondary, #f8fafc);
}
.mc-bolla-corpo {
  background: var(--bg-secondary, #f8fafc); color: var(--text);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 16px 16px 16px 4px; padding: 9px 13px;
}
.mc-testo { margin: 0; font-size: 1rem; line-height: 1.4; }
.mc-bolla.is-mia .mc-testo { color: #fff; }

/* Il tip: la correzione si VEDE ma non interrompe la frase. */
.mc-tip {
  margin: 8px 0 0; padding-top: 7px; font-size: .86rem; line-height: 1.35;
  border-top: 1px solid var(--border-strong, #cbd5e1); color: var(--text);
}
.mc-tip-et {
  font-weight: 800; text-transform: uppercase; font-size: .72rem;
  letter-spacing: .04em; color: var(--primary-testo, #c8102e);
}

.mc-ascolta {
  margin-top: 7px; background: none; border: 1px solid var(--border-strong, #cbd5e1);
  border-radius: 999px; padding: 3px 11px; font: inherit; font-size: .78rem;
  font-weight: 700; color: var(--text); cursor: pointer;
}
.mc-attesa .mc-testo { color: var(--text-muted); font-style: italic; }
.mc-errore .mc-bolla-corpo { border-color: var(--primary-testo, #c8102e); }
.mc-riprova {
  margin-top: 8px; background: var(--bh-red, #e4002b); color: #fff; border: 0;
  border-radius: 999px; padding: 6px 14px; font: inherit; font-weight: 700; cursor: pointer;
}

/* ─── Le tre risposte pronte ──────────────────────────────────────────── */
.mc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mc-chip {
  background: var(--card-bg, #fff); color: var(--text);
  border: 2px solid var(--border-strong, #cbd5e1); border-radius: 999px;
  padding: 8px 15px; font: inherit; font-size: .95rem; font-weight: 700; cursor: pointer;
}

/* ─── Scrivere ────────────────────────────────────────────────────────── */
.mc-scrivi { display: flex; gap: 8px; align-items: center; }
.mc-input {
  flex: 1; min-width: 0; background: var(--bg, #fff); color: var(--text);
  border: 2px solid var(--border-strong, #cbd5e1); border-radius: 999px;
  padding: 10px 15px; font: inherit; font-size: 1rem;
}
.mc-micro {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--card-bg, #fff); color: var(--text);
  border: 2px solid var(--border-strong, #cbd5e1); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.mc-micro.is-on { background: var(--bh-red, #e4002b); color: #fff; border-color: var(--bh-red, #e4002b); }
.mc-invia {
  flex: none; background: var(--bh-red, #e4002b); color: #fff; border: 0;
  border-radius: 999px; padding: 11px 20px; font: inherit; font-weight: 800; cursor: pointer;
}

/* ══ La pelle FUMETTO ═══════════════════════════════════════════════════
   Superfici di carta, contorni d'inchiostro, ombre dure. `--cm-ink-carta`
   NON gira col tema, ed e' esattamente il punto: sopra una superficie
   bianca fissa il testo dev'essere sempre scuro, in tutti e tre i temi. */
html[data-age="kids"] .mc-testa,
html[data-age="kids"] .mc-bolla-corpo,
html[data-age="kids"] .mc-chip,
html[data-age="kids"] .mc-input,
html[data-age="kids"] .mc-micro {
  background: #fff; color: var(--cm-ink-carta, #10202f);
  border: 3px solid var(--cm-ink-carta, #10202f);
  box-shadow: 3px 4px 0 var(--cm-ink-carta, #10202f);
}
html[data-age="kids"] .mc-testa { border-radius: 18px; }
/* Solo cio' che sta DENTRO una superficie di carta prende l'inchiostro fisso.
   I nomi sotto le facce NO, e il motivo e' un difetto vero visto in uno
   scatto: la striscia sta sul FONDO DELLA PAGINA, che il tema scuro
   scurisce, e con `--cm-ink-carta` (che non gira col tema) i sette nomi
   sparivano — navy su navy. E' la regola gia' scritta in CLAUDE.md, presa
   dal verso sbagliato: se la superficie segue il tema, il testo deve
   seguirlo. Restano quindi su `--text`, come nella base. */
html[data-age="kids"] .mc-nome,
html[data-age="kids"] .mc-nota,
html[data-age="kids"] .mc-testo,
html[data-age="kids"] .mc-tip,
html[data-age="kids"] .mc-ascolta { color: var(--cm-ink-carta, #10202f); }
html[data-age="kids"] .mc-attesa .mc-testo { color: #3b4a5a; }
html[data-age="kids"] .mc-tip-et { color: #a3001f; }
html[data-age="kids"] .mc-ascolta { border: 2px solid var(--cm-ink-carta, #10202f); }
html[data-age="kids"] .mc-faccia img { border-color: var(--cm-ink-carta, #10202f); }
html[data-age="kids"] .mc-faccia.is-on img {
  border-color: var(--bh-red, #e4002b); box-shadow: 3px 4px 0 var(--cm-ink-carta, #10202f);
}
html[data-age="kids"] .mc-bolla.is-mia,
html[data-age="kids"] .mc-invia,
html[data-age="kids"] .mc-riprova,
html[data-age="kids"] .mc-micro.is-on {
  background: var(--bh-red, #e4002b); color: #fff;
  border: 3px solid var(--cm-ink-carta, #10202f);
  box-shadow: 3px 4px 0 var(--cm-ink-carta, #10202f);
}
html[data-age="kids"] .mc-nome { font-size: 1.3rem; }
html[data-age="kids"] .mc-testo { font-size: 1.05rem; font-weight: 600; }
html[data-age="kids"] .mc-chip { font-size: 1rem; }

/* Da tablet in su la testa puo' crescere: il personaggio e' meta' del motivo
   per cui un bambino apre questa schermata. */
@media (min-width: 700px) {
  .mc-ritratto { width: 128px; height: 128px; }
  .mc-filo { max-height: 52vh; }
}