/* La voce di Vera — i colori della sua plancia (UI.MAGI): blu scuro ELAN42 e verde acido.
   Niente font esterni: caricarli da Google manderebbe l'IP di ogni visitatore a un terzo. */
:root {
  --fondo: #112337;
  --pannello: #0C1A2B;
  --rilievo: #15294A;
  --acc: #07E3BB;
  --acc-40: rgba(7, 227, 187, .40);
  --acc-18: rgba(7, 227, 187, .18);
  --testo: #C2CCD6;
  --bianco: #F7F3F2;
  --debole: #8FA0B3;
  --rosso: #F65C80;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--fondo);
  color: var(--testo);
  font: 14px/1.55 var(--mono);
}
a { color: var(--acc); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

header {
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--acc-40);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
}
.marca { font-size: 26px; line-height: 1; color: var(--acc); letter-spacing: .04em; }
.cursore { animation: batti 1.05s step-end infinite; }
@keyframes batti { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursore { animation: none; } }
.sotto { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--debole); }
.ia {
  margin: 0 0 0 auto;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--bianco);
  border: 1px solid var(--acc-40);
  padding: 2px 8px;
}

#cancello { flex: 1; overflow-y: auto; padding: 16px 18px 24px; max-width: 760px; }
#cancello h1 { margin: 0 0 8px; font-size: 16px; color: var(--bianco); }
#cancello h2 { margin: 18px 0 6px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--acc); }
#cancello ul { margin: 0; padding-left: 18px; }
#cancello li { margin: 4px 0; }
#cancello b { color: var(--bianco); font-weight: 600; }
.eta { display: flex; gap: 10px; align-items: center; margin: 18px 0 12px; color: var(--bianco); cursor: pointer; }
.eta input { width: 18px; height: 18px; accent-color: var(--acc); }

button {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--acc);
  background: rgba(7, 227, 187, .08);
  color: var(--acc);
  padding: 9px 16px;
  letter-spacing: .08em;
}
button:hover:not(:disabled) { background: var(--acc-18); }
button:disabled { opacity: .45; cursor: not-allowed; }

main { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#log { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 82%; padding: 9px 12px; overflow-wrap: anywhere; }
.msg p { margin: 0 0 6px; }
.msg p:last-child { margin-bottom: 0; }
.msg ul { margin: 4px 0; padding-left: 18px; }
.bot { align-self: flex-start; background: var(--pannello); border-left: 2px solid var(--acc); color: var(--testo); }
.user { align-self: flex-end; background: var(--rilievo); color: var(--bianco); white-space: pre-wrap; }
.note { align-self: center; max-width: 90%; color: var(--debole); font-size: 12px; text-align: center; }
.attesa span {
  display: inline-block; width: 6px; height: 6px; margin: 0 2px; background: var(--acc);
  animation: puntini 1.2s infinite ease-in-out;
}
.attesa span:nth-child(2) { animation-delay: .15s; }
.attesa span:nth-child(3) { animation-delay: .3s; }
@keyframes puntini { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }

form { display: flex; gap: 8px; padding: 10px 18px; border-top: 1px solid var(--acc-18); }
textarea {
  flex: 1;
  resize: none;
  font: inherit;
  color: var(--bianco);
  background: var(--pannello);
  border: 1px solid var(--acc-40);
  padding: 8px 10px;
  max-height: 140px;
}
#nuova { margin: 0 18px 10px; align-self: flex-start; }
#spenta { flex: 1; display: grid; place-items: center; padding: 24px; color: var(--bianco); text-align: center; }

footer { padding: 6px 18px 10px; font-size: 11px; color: var(--debole); border-top: 1px solid var(--acc-18); }
footer a { color: var(--debole); }

@media (max-width: 600px) {
  header, #cancello, #log, form, footer { padding-left: 12px; padding-right: 12px; }
  .msg { max-width: 100%; }
  .ia { margin-left: 0; }
}

/* Dentro la plancia di Vera: la testata grande c'è già fuori, resta l'etichetta dell'IA. */
.incorporata header { padding: 8px 14px; border-bottom-color: var(--acc-18); }
.incorporata .marca, .incorporata .sotto { display: none; }
.incorporata .ia { margin-left: 0; }