/* Painel "Jarvis ao lado": as cores do Jarvis (styles.css, "Identidade visual" do CLAUDE.md), estreito (320 a 400 px).
   Sem fonte da web (a CSP so deixa o proprio site): o nome e o estado no estilo do HUD, com a fonte do sistema. */
:root {
  --abismo: #050B14;
  --espaco: #03060D;
  --gelo: #E6F3F8;
  --bruma: #7FA6B8;
  --ciano: #3FD4FF;
  --ciano-claro: #8FE6FF;
  --ambar: #FF9F30;
  --vermelho: #FF5A5F;
  --ouro: #F2C98A;
  --superficie: rgb(63 212 255 / 0.06);
  --vidro: rgb(3 7 15 / 0.78);
  --fundo-vidro: linear-gradient(var(--superficie), var(--superficie)), var(--vidro);
  --borda: rgb(63 212 255 / 0.5);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--abismo);
  color: var(--gelo);
  font-family: system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.painel {
  --cor-estado: var(--bruma);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  padding: 8px 12px 0;
}
.painel[data-estado="pronto"] { --cor-estado: var(--ciano); }
.painel[data-estado="buscando"] { --cor-estado: var(--ambar); }
.painel[data-estado="erro"] { --cor-estado: var(--vermelho); }

.topo {
  display: flex;
  flex: none;
  align-items: baseline;
  gap: 8px;
}
.nome, .estado {
  margin: 0;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.nome { font-size: 1.1rem; color: var(--ciano-claro); }
.estado {
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  font-size: 0.8rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--cor-estado);
}

/* O cerebro: a nebulosa do Jarvis atras do emblema (o nucleo da imagem, a 30% da altura dela, no centro da caixa de
   180 px: com 420 px de largura, a imagem tem 746,7 px de altura e o nucleo fica a 224 px do topo dela) */
.cerebro {
  position: relative;
  flex: none;
  height: 180px;
  margin: 4px -12px 0;
  background: var(--espaco) url("visual/fundo-retrato.webp") 50% -134px / 420px auto no-repeat;
}
.cerebro::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 36px;
  background: linear-gradient(rgb(5 11 20 / 0), var(--abismo));
}
.cerebro svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}
/* Apagado (IA nao permitida para o paciente): cinza e parado */
.cerebro[data-cerebro="apagado"] { filter: grayscale(1) brightness(0.75); }
/* Aceso: um pulso discreto nos halos; parado com "reduzir movimento" (e ai o emblema nem tem halo, como no Jarvis) */
@keyframes pulso {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.cerebro[data-cerebro="aceso"] .pulso { animation: pulso 3.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .cerebro .pulso { animation: none; }
}

.modo {
  flex: none;
  margin: 2px 0 6px;
  color: var(--bruma);
  font-size: 0.85rem;
  text-align: center;
}
.aviso {
  flex: none;
  margin: 0 0 6px;
  color: var(--vermelho);
  font-size: 0.9rem;
  text-align: center;
}

.login {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0 8px;
}
.login-titulo { margin: 0 0 4px; }
.login label { color: var(--bruma); font-size: 0.9rem; }
.login input {
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--borda);
  border-radius: 22px;
  background: var(--fundo-vidro);
  color: var(--gelo);
  font: inherit;
}
.botao {
  height: 44px;
  margin-top: 6px;
  border: 1px solid var(--ciano);
  border-radius: 22px;
  background: var(--fundo-vidro);
  color: var(--ciano-claro);
  font: inherit;
  cursor: pointer;
}
.botao:disabled { opacity: 0.5; cursor: default; }
.erro-login { margin: 0; min-height: 1.5em; color: var(--vermelho); }

.resultados {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 2px 12px;
}
.vazio { margin: 8px 0; color: var(--bruma); }
.busca { padding: 10px 0; border-top: 1px solid rgb(63 212 255 / 0.25); }
.busca:first-child { border-top: 0; }
.pergunta { margin: 0 0 4px; overflow-wrap: anywhere; }
.rotulo { color: var(--bruma); }
.aguarde { margin: 6px 0 0; color: var(--ambar); }
.trecho {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid rgb(63 212 255 / 0.3);
  border-radius: 12px;
  background: var(--fundo-vidro);
}
.trecho .titulo {
  margin: 0;
  color: var(--ciano-claro);
  font-size: 0.95rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.trecho .ref { margin: 2px 0 6px; color: var(--bruma); font-size: 0.85rem; overflow-wrap: anywhere; }
.trecho .texto { margin: 0; font-size: 0.95rem; white-space: pre-line; overflow-wrap: anywhere; }
.aviso-busca {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-left: 3px solid var(--ambar);
  background: var(--fundo-vidro);
}
.falha { margin: 10px 0 0; color: var(--vermelho); }

.rodape {
  display: flex;
  flex: none;
  justify-content: flex-end;
  padding: 2px 0 6px;
}
.acao {
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  border: none;
  background: none;
  color: var(--bruma);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

:focus-visible { outline: 2px solid var(--ciano); outline-offset: 2px; }