/* ============================================================
   Zid — la mascotte, disegnata per l'interfaccia
   ------------------------------------------------------------
   Questo è Zid in vettoriale: pesa pochi KB, resta nitido a
   32px come a 200px, funziona su chiaro e scuro e si anima.
   I render ufficiali restano la fonte di verità del personaggio
   e si usano dove c'è spazio e fondo scuro (benvenuto, momenti
   grandi); questo è la sua versione da interfaccia.

   Le espressioni si cambiano con una classe sola sul contenitore:
     .zid--neutro      sta lì
     .zid--felice      qualcosa è andato bene
     .zid--pensieroso  sta ragionando
     .zid--ascolta     hai la parola
     .zid--attento     c'è una soglia, un limite, un rischio
   ============================================================ */

.zid{
  --zid-corpo:#e9cda4;
  --zid-ombra:#d3b184;
  --zid-scuro:#8a6a45;
  --zid-pannello:#0e1520;
  --zid-luce:#F18E17;
  --zid-luce-2:#FFE843;
  display:inline-block;flex:none;
  width:64px;height:64px;
  line-height:0;
}
.zid svg{width:100%;height:100%;overflow:visible;}

.zid--xs{width:32px;height:32px;}
.zid--s{width:44px;height:44px;}
.zid--m{width:64px;height:64px;}
.zid--l{width:112px;height:112px;}
.zid--xl{width:168px;height:168px;}

/* ---------- le parti ---------- */
.zid .z-corpo,.zid .z-testa,.zid .z-zampa,.zid .z-orecchio-fuori{fill:var(--zid-corpo);}
.zid .z-muso{fill:#f6e6cd;}
.zid .z-zoccolo{fill:var(--zid-scuro);}
.zid .z-ciuffo{fill:var(--zid-scuro);}
.zid .z-orecchio-dentro{fill:url(#zid-luce);}
.zid .z-pannello{fill:var(--zid-pannello);}
.zid .z-pixel{fill:url(#zid-luce);}
.zid .z-narice{fill:var(--zid-ombra);}
.zid .z-coda-ciuffo{fill:var(--zid-scuro);}
.zid .z-bocca-felice{fill:none;stroke:url(#zid-luce);stroke-width:2.2;stroke-linecap:round;}

/* l'alone caldo sotto, come nei render */
.zid .z-alone{fill:url(#zid-alone);opacity:.55;}

/* ---------- respiro: il movimento continuo, piccolissimo ---------- */
.zid .z-tutto{
  transform-origin:50% 62%;
  animation:zid-respiro 5.5s ease-in-out infinite;
}
@keyframes zid-respiro{
  0%,100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-1.6%) scale(1.012);}
}

/* ---------- batte le palpebre ---------- */
.zid .z-occhio{transform-origin:center;animation:zid-palpebra 6.5s ease-in-out infinite;}
.zid .z-occhio--d{animation-delay:.04s;}
@keyframes zid-palpebra{
  0%,92%,100%{transform:scaleY(1);}
  95%{transform:scaleY(.12);}
}

/* ---------- espressioni ---------- */
/* neutro: occhi pieni, bocca piccola */
.zid .z-bocca-felice,.zid .z-bocca-pensiero,.zid .z-pixel-pensiero,.zid .z-sopracciglia{display:none;}

.zid--felice .z-bocca-neutra{display:none;}
.zid--felice .z-bocca-felice{display:block;}
.zid--felice .z-tutto{animation:zid-salto 2.8s cubic-bezier(.32,.72,0,1) infinite;}
@keyframes zid-salto{
  0%,72%,100%{transform:translateY(0);}
  80%{transform:translateY(-7%);}
  88%{transform:translateY(0);}
}

.zid--pensieroso .z-bocca-neutra{display:none;}
.zid--pensieroso .z-bocca-pensiero{display:block;}
.zid--pensieroso .z-pixel-pensiero{display:block;}
.zid--pensieroso .z-pixel-pensiero rect{animation:zid-pensiero 1.6s ease-in-out infinite;}
.zid--pensieroso .z-pixel-pensiero rect:nth-child(2){animation-delay:.2s;}
.zid--pensieroso .z-pixel-pensiero rect:nth-child(3){animation-delay:.4s;}
@keyframes zid-pensiero{
  0%,100%{opacity:.25;transform:translateY(0);}
  50%{opacity:1;transform:translateY(-2px);}
}

/* ascolta: un orecchio si orienta */
.zid--ascolta .z-orecchio-d{transform-origin:64% 44%;animation:zid-orecchio 3.2s ease-in-out infinite;}
@keyframes zid-orecchio{
  0%,70%,100%{transform:rotate(0);}
  80%{transform:rotate(-9deg);}
}

/* attento: orecchie più basse, occhi più stretti */
.zid--attento .z-orecchio-s{transform-origin:38% 46%;transform:rotate(12deg);}
.zid--attento .z-orecchio-d{transform-origin:62% 46%;transform:rotate(-12deg);}
.zid--attento .z-occhio{transform:scaleY(.62);}
.zid--attento .z-occhio{animation:none;}

/* fermo: per chi chiede di ridurre il movimento, e nelle liste */
.zid--fermo .z-tutto,.zid--fermo .z-occhio,.zid--fermo .z-pixel-pensiero rect,
.zid--fermo .z-orecchio-d{animation:none !important;}

@media (prefers-reduced-motion:reduce){
  .zid .z-tutto,.zid .z-occhio,.zid .z-pixel-pensiero rect,.zid .z-orecchio-d{animation:none !important;}
}

/* ============================================================
   Zid dentro l'interfaccia
   ============================================================ */

/* la riga di Zid: mascotte + una frase. Il modo più economico
   per dire "sei qui, e qui si fa questo". */
.zid-riga{
  display:flex;gap:var(--s4);align-items:flex-start;
  padding:var(--s4);border-radius:var(--rs);
  background:var(--zona-capire-bg,var(--card));
  border:1px solid var(--ln);
}
.zid-riga .testo{flex:1;min-width:0;}
.zid-riga .nome{
  font-size:var(--t-3xs);font-family:var(--mono);color:var(--mu);
  display:block;margin-bottom:2px;
}
.zid-riga p{font-size:var(--t-sm);color:var(--tx);max-width:62ch;}
.zid-riga .azioni{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3);}

/* la bolla: Zid parla dentro una conversazione */
.zid-bolla{display:flex;gap:var(--s3);align-items:flex-start;}
.zid-bolla .dice{
  flex:1;min-width:0;
  border:1px solid var(--ln);border-radius:var(--rs);
  background:var(--cs);box-shadow:var(--ombra-1);
  padding:var(--s3) var(--s4);font-size:var(--t-sm);line-height:1.65;
}

/* il ritratto: il render ufficiale, su fondo scuro come chiede la guida */
.zid-ritratto{
  position:relative;border-radius:var(--r);overflow:hidden;
  background:
    radial-gradient(120% 100% at 50% 100%, rgba(241,142,23,.22), transparent 62%),
    #090d12;
  display:grid;place-items:center;padding:var(--s5);
  border:1px solid rgba(255,255,255,.08);
}
.zid-ritratto img{width:100%;max-width:320px;height:auto;}

/* le scelte guidate: Zid chiede, tu tocchi una risposta pronta */
.scelte-zid{display:grid;gap:var(--s3);}
.scelta-zid{
  display:flex;gap:var(--s4);align-items:center;
  padding:var(--s4) var(--s5);text-align:left;width:100%;
  background:var(--cs);border:1.5px solid var(--ln-forte);border-radius:var(--rs);
  box-shadow:var(--ombra-1);transition:var(--ease);cursor:pointer;
  text-decoration:none;
}
.scelta-zid:hover{border-color:var(--dec-piano);box-shadow:var(--ombra-2);transform:translateY(-1px);}
.scelta-zid[aria-pressed="true"]{border-color:var(--dec-piano);background:var(--dec-bg);}
.scelta-zid .segno{
  width:44px;height:44px;flex:none;border-radius:var(--rs);
  display:grid;place-items:center;
  background:var(--card);border:1px solid var(--ln);color:var(--dec);
}
.scelta-zid .segno svg{width:20px;height:20px;}
.scelta-zid .t{display:block;font-size:var(--t-lead);font-weight:700;}
.scelta-zid .s{display:block;font-size:var(--t-sm);color:var(--mu);margin-top:2px;}
.scelta-zid .freccia{margin-left:auto;color:var(--mu);}
.scelta-zid .freccia svg{width:18px;height:18px;}

@media (max-width:768px){
  .zid-riga{gap:var(--s3);padding:var(--s3);}
  .scelta-zid{padding:var(--s4);gap:var(--s3);}
  .scelta-zid .segno{width:40px;height:40px;}
}

/* Zid come volto dell'assistente, nella testa della conversazione */
.conv-testa .zid{width:40px;height:40px;}

/* la riga di Zid dentro una zona già colorata: niente cornice sopra cornice */
.zid-riga--nuda{background:none;border:none;padding:0;}

/* Zid al gate: è una soglia, sta fermo e guarda */
.gate{position:relative;}
.gate-zid{position:absolute;top:var(--s4);right:var(--s4);}
.gate-zid .zid{width:52px;height:52px;}
.gate h3,.gate > p{max-width:min(60ch,calc(100% - 68px));}
.gate-zid-dice{font-size:var(--t-xs);color:var(--mu);margin-top:var(--s3);
  border-left:2px solid var(--dec-piano);padding-left:var(--s3);}
.gate-zid-dice strong{color:var(--tx);font-family:var(--mono);font-weight:500;}
@media (max-width:768px){
  .gate-zid{position:static;display:block;margin-bottom:var(--s2);}
  .gate h3,.gate > p{max-width:60ch;}
}

/* ── la scena: Zid grande, su una superficie che vive in tutti e due i temi ── */
.zid--xxl{width:240px;height:240px;}

.zid-scena{
  display:grid;place-items:center;gap:2px;
  padding:var(--s6) var(--s5) var(--s5);
  border:1px solid var(--ln);border-radius:var(--r);
  background:
    radial-gradient(120% 90% at 50% 88%, color-mix(in srgb,var(--A) 14%,transparent), transparent 64%),
    var(--cs);
  box-shadow:var(--ombra-1);
}
.zid-scena .zid{margin-bottom:var(--s3);}
.zid-scena .zid-nome{font-family:var(--mono);font-size:var(--t-sm);color:var(--tx);}
.zid-scena .zid-ruolo{font-size:var(--t-xs);color:var(--mu);text-align:center;max-width:26ch;}

@media (max-width:900px){
  .zid--xxl{width:180px;height:180px;}
  .zid-scena{padding:var(--s5) var(--s4) var(--s4);}
}

/* la scena in orizzontale: dentro la conversazione, dove lo spazio è largo e basso */
.zid-scena--larga{
  grid-template-columns:auto minmax(0,1fr);
  justify-items:start;align-items:center;
  gap:0 var(--s5);padding:var(--s4) var(--s5);
  background:
    radial-gradient(70% 140% at 12% 100%, color-mix(in srgb,var(--A) 13%,transparent), transparent 62%),
    var(--cs);
}
.zid-scena--larga .zid{margin-bottom:0;}
.zid-scena--larga .zid-ruolo{text-align:left;max-width:46ch;font-size:var(--t-sm);}
@media (max-width:600px){
  .zid-scena--larga{grid-template-columns:1fr;justify-items:center;gap:2px;padding:var(--s5) var(--s4);}
  .zid-scena--larga .zid{margin-bottom:var(--s3);}
  .zid-scena--larga .zid-ruolo{text-align:center;}
}