/* CLARA — il vestito del widget (HUM-050). File SUO, fuori da vetrina.css:
   componente nuovo, i fogli storici non si toccano (regola del muro). Colori
   e spazi dai token della pagina che lo ospita; le misure del glifo-widget
   vivono qui, dichiarate in testa. */
.clara {
  --clara-larghezza: 340px;
  --clara-altezza: 480px;
  --clara-avatar: 40px;
  --clara-avatar-biscotto: 48px;
  --clara-raggio: 24px;
  --clara-margine: 20px;
  --clara-ombra: 0 12px 40px rgba(23, 22, 20, 0.25);
  position: fixed; right: var(--clara-margine); bottom: var(--clara-margine);
  z-index: 40;
  font-size: var(--t-body, 16px);
}

/* LA REGOLA CHE FA FUNZIONARE APERTO/CHIUSO: l'attributo hidden deve vincere
   sui display dichiarati qui sotto — senza questa riga il pannello nasceva
   APERTO E VUOTO accanto al biscottino (bug visto dal boss, 2/8 sera) */
.clara [hidden] { display: none !important; }

/* il biscottino */
.clara-biscotto {
  display: flex; align-items: center; gap: 10px;
  border: none; cursor: pointer;
  background: var(--dark, #171614); color: var(--chiaro, #fff);
  border-radius: 999px; padding: 8px 18px 8px 8px;
  box-shadow: var(--clara-ombra);
  font: inherit; font-weight: 500;
}
.clara-biscotto img {
  width: var(--clara-avatar-biscotto); height: var(--clara-avatar-biscotto);
  border-radius: 50%; object-fit: cover; display: block;
  border: 2px solid var(--giallo, #F2E63F);
}

/* il pannello */
.clara-pannello {
  width: var(--clara-larghezza); max-width: calc(100vw - var(--clara-margine) * 2);
  /* IL PANNELLO CRESCE COL CONTENUTO, non parte gia' alto (rilievo boss 3/8:
     "sotto il bubble c'e' uno spazio vuoto inutile sopra l'input... aumenta
     l'height del widget su mobile"). Con l'altezza FISSA l'area dei messaggi
     si allargava per riempirla: con un saluto solo restavano 99 pixel di
     niente sopra il campo. Ora l'altezza e' un TETTO: si arriva li' solo
     quando la conversazione lo merita, e da quel punto scorre. */
  max-height: min(var(--clara-altezza), calc(100dvh - var(--clara-margine) * 2));
  display: flex; flex-direction: column;
  background: var(--chiaro, #fff); border-radius: var(--clara-raggio);
  box-shadow: var(--clara-ombra); overflow: hidden;
}
.clara-testa {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; background: var(--dark, #171614); color: var(--chiaro, #fff);
}
.clara-testa img {
  width: var(--clara-avatar); height: var(--clara-avatar);
  border-radius: 50%; object-fit: cover;
  border: 2px solid var(--giallo, #F2E63F);
}
.clara-testa div { display: flex; flex-direction: column; line-height: 1.2; }
/* L'ETICHETTA CHE NON SI TOCCA: Clara parla come una persona, ma l'interfaccia
   dice che e' un'AI (ordine boss 2/8: esporlo, 'altrimenti sono cazzi') */
.clara-testa small { opacity: 0.75; font-size: var(--t-etichetta, 12px); }
.clara-chiudi {
  margin-left: auto; border: none; background: none; cursor: pointer;
  color: inherit; font-size: var(--t-titolo, 22px); line-height: 1;
}

.clara-messaggi { flex: 0 1 auto; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.clara-bolla { margin: 0; padding: 8px 12px; border-radius: 14px; max-width: 85%; line-height: 1.4; }
.clara-bolla--clara { background: var(--greige, #E7E4DE); align-self: flex-start; }
.clara-bolla--user { background: var(--giallo, #F2E63F); align-self: flex-end; }

.clara-modulo { display: flex; gap: 8px; padding: 0 16px 12px; }
.clara-modulo input {
  flex: 1; font: inherit; padding: 8px 12px;
  border: 1.5px solid var(--bordo, #ccc); border-radius: 10px; min-width: 0;
}
.clara-piede {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 10px 16px; background: var(--greige, #E7E4DE);
  font-size: var(--t-etichetta, 12px); color: var(--gray-testo, #555);
}