/* css/agente.css — Central do Agente (Passo 10). Sem WebGL, só CSS. */

/* Entrada dedicada da Central do Agente — cabeçalho/abas encolhem e ficam
   discretos (nunca escondem/travam clique) pra dar mais foco visual ao
   núcleo; o conteúdo entra com leve slide-up + fade. */
#app.modo-agente .header {
  padding: 8px 24px;
  transition: padding 0.35s ease;
}
#app.modo-agente .header-title { font-size: 20px; transition: font-size 0.35s ease; }
#app.modo-agente .header-subtitle { font-size: 11px; }
#app.modo-agente .main-tabs {
  opacity: 0.6;
  transform: translateY(-2px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
#app.modo-agente .main-tabs:hover,
#app.modo-agente .main-tabs:focus-within {
  opacity: 1;
  transform: none;
}
@keyframes agenteEntradaConteudo {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
#agenteContainer.agente-entrando { animation: agenteEntradaConteudo 0.5s ease; }

.agente-voltar-mapa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid #333;
  color: #ccc;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  margin-bottom: 10px;
}
.agente-voltar-mapa:hover { border-color: #ef4444; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  #agenteContainer.agente-entrando { animation: none; }
  #app.modo-agente .header, #app.modo-agente .main-tabs { transition: none; }
}

.agente-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  background:
    radial-gradient(circle at 15% 0%, rgba(56, 189, 248, 0.10), transparent 55%),
    radial-gradient(circle at 85% 100%, rgba(239, 68, 68, 0.12), transparent 60%),
    linear-gradient(160deg, #171313 0%, #121212 55%, #0e1416 100%);
}
.agente-topo-centralizado {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* Detalhes (nome configurável, última atualização, origem) só aparecem ao
   passar o mouse/focar o núcleo — cabeçalho de entrada fica limpo, só
   "AGENTE ZONA SUL" + status. */
.agente-meta-extra {
  max-width: 480px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.25s ease, opacity 0.2s ease;
}
.agente-meta-extra.visivel { max-height: 160px; opacity: 1; margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .agente-meta-extra { transition: none; } }

.agente-status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid #ef4444;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}
.agente-status-badge.status-resultado { border-color: #22c55e; color: #22c55e; background: rgba(34,197,94,0.08); }
.agente-status-badge.status-analisando { border-color: #eab308; color: #eab308; background: rgba(234,179,8,0.08); }

/* Cena do núcleo — VIEWPORT FIXO, nunca expande/recolhe/tela cheia. Toda
   exploração acontece dentro dela (zoom/pan do SVG interno); o retângulo em
   si nunca muda de tamanho. */
.agente-nucleo {
  position: relative;
  width: 100%;
  height: 620px;
  overflow: hidden;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  background: #0a0a0a;
  margin-bottom: 10px;
}
@media (max-width: 700px) {
  .agente-nucleo { height: 460px; }
}

/* Núcleo do Agente — malha energética SVG. NUNCA uma esfera 3D sólida: a
   forma principal é feita de linhas/paths finos, nós luminosos, núcleo
   pequeno e órbitas elípticas — nada de fill sólido grande. Paleta: preto/
   grafite como base, vermelho Zona Sul como energia, branco pra pulso/foco,
   âmbar só pra pendência — sem azul/ciano/violeta genérico. */
.agente-orbe {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
}
.agente-orbe-svg {
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}
.agente-orbe-svg.arrastando { cursor: grabbing; }

/* Brilho suave atrás de tudo — nunca a forma principal, só profundidade. */
.agente-orbe::before {
  content: "";
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 68, 68, 0.16) 0%, rgba(239, 68, 68, 0.04) 55%, transparent 75%);
  filter: blur(2px);
  pointer-events: none;
}

/* Campos eletromagnéticos — linhas de força curvas e IRREGULARES, nunca
   círculo perfeito nem spinner. Sutil, atrás da malha/órbitas. */
.agente-campo {
  fill: none;
  stroke: rgba(239, 68, 68, 0.32);
  stroke-width: 0.5;
  stroke-dasharray: 5 7;
  animation: agenteFluxoCampo 6s linear infinite;
}
.agente-campo.campo-2 { stroke: rgba(255, 255, 255, 0.22); animation-duration: 8s; animation-direction: reverse; }
.agente-campo.campo-3 { stroke: rgba(234, 179, 8, 0.16); animation-duration: 9.5s; }
@keyframes agenteFluxoCampo {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -120; }
}

/* Fios que ligam o núcleo a cada conceito — ao menos 6 (aqui 8), cada um
   com um pulso viajando em velocidade própria via SMIL (leve, sem JS). */
.agente-fio {
  fill: none;
  stroke: rgba(127, 29, 29, 0.55);
  stroke-width: 0.5;
}
.agente-fio-pulso {
  fill: #fff;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 8px rgba(239, 68, 68, 0.8));
}

/* Malha esférica (meridianos) — 3 elipses finas giradas simulando um globo
   de arame. Cada uma gira devagar em repouso. */
.agente-malha-anel {
  fill: none;
  stroke: #7f1d1d;
  stroke-width: 0.6;
  opacity: 0.6;
  transform-origin: 100px 100px;
  animation: agenteGiroLento 14s linear infinite;
}
.agente-malha-anel.anel-2 { animation-duration: 19s; animation-direction: reverse; opacity: 0.45; stroke: #991b1b; }
.agente-malha-anel.anel-3 { animation-duration: 24s; opacity: 0.35; }

/* Nós luminosos nas linhas — pulsam em sequência (mais visível analisando).
   Cada nó representa uma função real do agente (ver _conceitosNucleo) e é
   clicável/hover-ável — por isso usa azul claro brilhante, se destacando do
   resto (vermelho) como "aqui tem informação". Exceção deliberada de cor. */
.agente-no {
  fill: #38bdf8;
  filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.95));
  animation: agenteNoPulso 3s ease-in-out infinite;
}
.agente-no-halo {
  fill: transparent;
  cursor: pointer;
}
.agente-no-grupo { outline: none; }
.agente-no-grupo:focus-visible .agente-no-halo { stroke: #fff; stroke-width: 0.6; fill: rgba(255,255,255,0.06); }

/* Cada um dos 8 nós tem cor própria + "carga elétrica" (flicker irregular),
   nunca todos iguais — ajuda a diferenciar de longe qual conceito é qual. */
.agente-no-grupo[data-concept="identidade"] .agente-no { fill: #ef4444; filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.95)); animation: agenteEletricidade 1.8s ease-in-out infinite; }
.agente-no-grupo[data-concept="inteligencia"] .agente-no { fill: #38bdf8; filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.95)); animation: agenteEletricidade 2.1s ease-in-out infinite 0.15s; }
.agente-no-grupo[data-concept="dados"] .agente-no { fill: #22c55e; filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.95)); animation: agenteEletricidade 1.6s ease-in-out infinite 0.3s; }
.agente-no-grupo[data-concept="validacao"] .agente-no { fill: #eab308; filter: drop-shadow(0 0 4px rgba(234, 179, 8, 0.95)); animation: agenteEletricidade 2.4s ease-in-out infinite 0.45s; }
.agente-no-grupo[data-concept="analise"] .agente-no { fill: #a78bfa; filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.95)); animation: agenteEletricidade 1.9s ease-in-out infinite 0.6s; }
.agente-no-grupo[data-concept="pendencias"] .agente-no { fill: #f97316; filter: drop-shadow(0 0 4px rgba(249, 115, 22, 0.95)); animation: agenteEletricidade 2.2s ease-in-out infinite 0.75s; }
.agente-no-grupo[data-concept="achados"] .agente-no { fill: #22d3ee; filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.95)); animation: agenteEletricidade 1.7s ease-in-out infinite 0.9s; }
.agente-no-grupo[data-concept="fontes"] .agente-no { fill: #ec4899; filter: drop-shadow(0 0 4px rgba(236, 72, 153, 0.95)); animation: agenteEletricidade 2.3s ease-in-out infinite 1.05s; }

/* Hover/foco: a cor própria do nó estoura mais forte (em vez de virar
   branco genérico) — reforça "esse aqui tem carga". */
.agente-no-grupo:hover .agente-no, .agente-no-grupo:focus-visible .agente-no { filter: brightness(1.8) saturate(1.3); animation-play-state: paused; }

@keyframes agenteEletricidade {
  0%, 100% { opacity: 0.55; r: 1.8; }
  35% { opacity: 1; r: 2.6; }
  50% { opacity: 0.7; r: 2; }
  62% { opacity: 1; r: 2.8; }
  80% { opacity: 0.6; r: 1.9; }
}

/* Rótulos/detalhes só aparecem por nível de zoom real (nunca decoração fixa
   que atrapalha em 1x). */
.agente-no-rotulo, .agente-no-detalhe {
  fill: #e8e8e8;
  font-size: 5.4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  font-family: inherit;
}
.agente-no-detalhe { fill: #999; font-size: 4.2px; }
/* Sem zoom: rótulo/detalhe do nó aparecem no hover/foco daquele nó
   específico, nunca fixos (poluiria a cena em repouso). */
.agente-no-grupo:hover .agente-no-rotulo,
.agente-no-grupo:focus-visible .agente-no-rotulo,
.agente-no-grupo:hover .agente-no-detalhe,
.agente-no-grupo:focus-visible .agente-no-detalhe {
  opacity: 1;
}

/* Passar o mouse pela cena inteira intensifica a molécula — nós, partículas
   e malha reagem juntos (interação viva, sem zoom). */
.agente-orbe-svg.interagindo .agente-no { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.9)); }
.agente-orbe-svg.interagindo .agente-particula { filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1)); }
.agente-orbe-svg.interagindo .agente-malha-anel { opacity: 0.85; }
.agente-orbe-svg.interagindo .agente-campo { stroke-width: 0.8; }

/* Onda elétrica ao clicar num nó — parte do ponto clicado, nunca some
   instantânea. */
.agente-onda {
  fill: none;
  stroke: #fff;
  stroke-width: 1;
  opacity: 0.9;
  animation: agenteOnda 0.9s ease-out forwards;
}
@keyframes agenteOnda {
  from { r: 2; opacity: 0.9; stroke-width: 1.4; }
  to { r: 40; opacity: 0; stroke-width: 0.1; }
}

/* Barra de zoom — FORA da cena, abaixo dela. Mexe só no transform do grupo
   interno do SVG, nunca no tamanho do card/página/aba. */
.agente-zoom-barra {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 0 4px;
}
.agente-zoom-barra button {
  min-width: 28px;
  height: 28px;
  border-radius: 5px;
  border: 1px solid #333;
  background: #1a1a1a;
  color: #ddd;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0 8px;
}
.agente-zoom-barra button:hover { background: #2a2a2a; color: #fff; }
.agente-girar-dica { font-size: 11px; color: #777; }
#agenteNucleoGirarAuto[aria-pressed="true"] { border-color: #ef4444; color: #fff; background: rgba(239, 68, 68, 0.12); }

.agente-secao-titulo {
  margin: 4px 0 10px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: #ef4444;
  border-bottom: 1px solid #2a2a2a;
  padding-bottom: 6px;
}

/* Inspeção em 2 painéis livres — um na esquerda, um na direita, base da
   cena sempre livre (nunca um bloco cobrindo a parte de baixo). */
.agente-inspecao {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
  z-index: 3;
}
.agente-inspecao-painel {
  pointer-events: auto;
  position: relative;
  width: 42%;
  max-width: 260px;
  background: rgba(8, 8, 8, 0.92);
  border: 1px solid #2a2a2a;
  border-left: 3px solid #ef4444;
  border-radius: 6px;
  padding: 12px 14px;
  text-align: left;
}
.agente-inspecao-painel.direita { border-left: none; border-right: 3px solid #ef4444; padding-right: 30px; }
.agente-inspecao.oculto { display: none; }
.agente-inspecao h4 { margin: 0 0 6px; font-size: 13px; color: #fff; letter-spacing: 0.03em; }
.agente-inspecao p { margin: 0 0 5px; font-size: 12px; color: #ccc; line-height: 1.4; }
.agente-inspecao .agente-inspecao-origem { color: #888; font-size: 11px; }
.agente-inspecao-fechar {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  font-size: 12px;
}
.agente-nucleo-microtexto {
  font-size: 11px;
  color: #777;
  margin: 2px 0 0;
  text-align: center;
  max-width: 420px;
}

/* Núcleo central — único ponto "sólido", pequeno, vermelho-elétrico com
   pulsação lenta em repouso. */
.agente-nucleo-svg {
  fill: #7f1d1d;
  filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.85)) drop-shadow(0 0 16px rgba(239, 68, 68, 0.4));
  animation: agenteNucleoPulso 2.6s ease-in-out infinite;
}

/* Órbitas — anéis elípticos inclinados (Vênus/Saturno), nunca spinner comum:
   giram inteiras (elipse + partícula presa) em velocidades diferentes. */
.agente-orbita {
  fill: none;
  stroke: rgba(239, 68, 68, 0.4);
  stroke-width: 0.8;
  stroke-dasharray: 2 4;
}
.agente-orbita-grupo {
  transform-origin: 100px 100px;
  animation: agenteGiroLento 10s linear infinite;
}
.agente-orbita-grupo.orbita-2 { animation-duration: 15s; animation-direction: reverse; }
.agente-orbita-grupo.orbita-3 { animation-duration: 21s; }

.agente-particula {
  fill: #fff;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9));
}

@keyframes agenteGiroLento {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes agenteNoPulso {
  0%, 100% { opacity: 0.35; r: 1.6; }
  50% { opacity: 1; r: 2.4; }
}
@keyframes agenteNucleoPulso {
  0%, 100% { r: 7; opacity: 0.9; }
  50% { r: 9; opacity: 1; }
}

/* estado-espera: já é o ritmo base acima (lento, discreto). */

/* estado-analisando: energia percorre a malha rápido, nós acendem em
   sequência, órbitas aceleram — nunca finge pesquisa externa, só indica
   processamento local. */
.agente-orbe.estado-analisando .agente-malha-anel { animation-duration: 2.4s; opacity: 0.8; }
.agente-orbe.estado-analisando .agente-malha-anel.anel-2 { animation-duration: 3.1s; }
.agente-orbe.estado-analisando .agente-malha-anel.anel-3 { animation-duration: 3.6s; }
.agente-orbe.estado-analisando .agente-no { animation-duration: 0.7s; }
.agente-orbe.estado-analisando .agente-fio-pulso { filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1)); }
.agente-orbe.estado-analisando .agente-nucleo-svg { animation-duration: 0.6s; filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 24px rgba(239, 68, 68, 0.8)); }
.agente-orbe.estado-analisando .agente-orbita-grupo { animation-duration: 2.5s; }
.agente-orbe.estado-analisando .agente-orbita-grupo.orbita-2 { animation-duration: 3.5s; }
.agente-orbe.estado-analisando .agente-orbita-grupo.orbita-3 { animation-duration: 4.5s; }

/* estado-resultado: estabiliza em vermelho profundo Zona Sul + acento
   branco — nunca verde dominando, nunca fica preso na cor de análise. */
.agente-orbe.estado-resultado .agente-malha-anel { animation-duration: 16s; opacity: 0.55; stroke: #7f1d1d; }
.agente-orbe.estado-resultado .agente-nucleo-svg { animation-duration: 3.4s; fill: #ef4444; filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.85)) drop-shadow(0 0 18px rgba(255, 255, 255, 0.35)); }
.agente-orbe.estado-resultado .agente-orbita-grupo { animation-duration: 12s; }
.agente-orbe.estado-resultado .agente-orbita { stroke: rgba(239, 68, 68, 0.45); }

/* Sem dados publicados: preto/grafite calmo, sem alarmismo — nunca parece
   erro, ainda com movimento lento (nunca estático). */
.agente-orbe.sem-dados .agente-nucleo-svg { fill: #3f3f3f; filter: drop-shadow(0 0 6px rgba(63, 63, 63, 0.6)); animation-duration: 5s; }
.agente-orbe.sem-dados .agente-malha-anel { opacity: 0.28; stroke: #4a4a4a; }
.agente-orbe.sem-dados .agente-no { fill: #6b6b6b; }
.agente-orbe.sem-dados .agente-fio-pulso { opacity: 0.5; }

/* Reações temporárias de interação — SEPARADAS dos 3 estados oficiais.
   Duram 1.2-2.5s e depois estabilizam sozinhas (setTimeout remove a
   classe). Nunca implicam fonte externa/IA conectada. */
.agente-orbe.reacao-clique .agente-nucleo-svg { fill: #fff; filter: drop-shadow(0 0 16px rgba(255, 255, 255, 1)); transition: fill 0.15s; }
.agente-orbe.reacao-clique .agente-malha-anel { opacity: 0.9; }
.agente-orbe.reacao-clique::after { background: radial-gradient(circle, rgba(255, 255, 255, 0.55), transparent 70%); opacity: 1; animation: agenteFlashReacao 1.2s ease-out forwards; }

/* Dado válido: vermelho vivo + branco (nunca violeta) — nós acendem em
   sequência. */
.agente-orbe.reacao-valido .agente-nucleo-svg { fill: #ef4444; filter: drop-shadow(0 0 18px rgba(239, 68, 68, 1)) drop-shadow(0 0 30px rgba(255, 255, 255, 0.5)); }
.agente-orbe.reacao-valido .agente-no { fill: #fff; animation-duration: 0.5s; }
.agente-orbe.reacao-valido::after { background: radial-gradient(circle, rgba(239, 68, 68, 0.55), rgba(255, 255, 255, 0.3) 45%, transparent 75%); opacity: 1; animation: agenteFlashReacao 1.4s ease-out forwards; }

/* Pendência/erro: âmbar LOCALIZADO (só um traço da malha), nunca o agente
   inteiro vira alerta vermelho. */
.agente-orbe.reacao-alerta .agente-malha-anel.anel-1 { stroke: #eab308; opacity: 0.9; }
.agente-orbe.reacao-alerta .agente-no:nth-of-type(1) { fill: #eab308; }
.agente-orbe.reacao-alerta::after { background: radial-gradient(circle at 30% 20%, rgba(234, 179, 8, 0.45), transparent 55%); opacity: 1; animation: agenteFlashReacao 1.5s ease-out forwards; }

/* Análise: pulsos vermelho/branco mais frequentes e claros — não pesquisa
   externa, só processamento local mais visível. */
.agente-orbe.estado-analisando .agente-nucleo-svg { fill: #fff; }
.agente-orbe.estado-analisando .agente-fio { stroke: rgba(239, 68, 68, 0.75); }

/* Resultado consolidado (após analisar/ver pendências): vermelho profundo
   + acento branco, estabiliza sozinho. */
.agente-orbe.reacao-final .agente-nucleo-svg { fill: #b91c1c; filter: drop-shadow(0 0 16px rgba(185, 28, 28, 0.9)) drop-shadow(0 0 24px rgba(255, 255, 255, 0.4)); }
.agente-orbe.reacao-final .agente-malha-anel { stroke: #7f1d1d; opacity: 0.5; animation-duration: 18s; }
.agente-orbe.reacao-final::after { background: radial-gradient(circle, rgba(127, 29, 29, 0.6), rgba(255, 255, 255, 0.25) 45%, transparent 75%); opacity: 1; animation: agenteFlashReacao 2.2s ease-out forwards; }

.agente-orbe::after {
  content: "";
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
@keyframes agenteFlashReacao {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}

@media (max-width: 600px) {
  .agente-zoom-barra button { min-width: 32px; height: 32px; font-size: 14px; }
  .agente-inspecao { max-width: 100%; }
}

/* Fundo tecnológico exclusivo da Central do Agente — atrás de tudo, nunca
   disputa atenção com formulários/dados. Sem imagem externa. */
.agente-fundo-tecnologico {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(circle at 50% 30%, rgba(239, 68, 68, 0.05), transparent 60%),
              linear-gradient(180deg, #0a0a0a 0%, #0d0d10 100%);
}
#agenteBody { position: relative; }
#agenteBody > *:not(.agente-fundo-tecnologico) { position: relative; z-index: 1; }
.agente-fundo-linha {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(153, 27, 27, 0.18), transparent);
  animation: agenteFundoDeslizar 22s linear infinite;
}
.agente-fundo-linha.linha-1 { top: 15%; width: 60%; left: -60%; animation-duration: 24s; }
.agente-fundo-linha.linha-2 { top: 45%; width: 50%; left: -50%; animation-duration: 30s; animation-delay: -8s; }
.agente-fundo-linha.linha-3 { top: 75%; width: 70%; left: -70%; animation-duration: 26s; animation-delay: -14s; }
@keyframes agenteFundoDeslizar {
  from { transform: translateX(0); }
  to { transform: translateX(220vw); }
}
.agente-fundo-particula {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  filter: blur(0.5px);
  animation: agenteFundoFlutuar 14s ease-in-out infinite;
}
.agente-fundo-particula.p1 { top: 20%; left: 10%; animation-duration: 16s; }
.agente-fundo-particula.p2 { top: 60%; left: 80%; background: rgba(239, 68, 68, 0.5); animation-duration: 19s; animation-delay: -5s; }
.agente-fundo-particula.p3 { top: 80%; left: 30%; animation-duration: 21s; animation-delay: -10s; }
@keyframes agenteFundoFlutuar {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(-24px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .agente-malha-anel,
  .agente-no,
  .agente-nucleo-svg,
  .agente-orbita-grupo,
  .agente-campo,
  .agente-fundo-linha,
  .agente-fundo-particula,
  .agente-fio-pulso,
  .agente-orbe.estado-analisando .agente-malha-anel,
  .agente-orbe.estado-analisando .agente-no,
  .agente-orbe.estado-analisando .agente-nucleo-svg,
  .agente-orbe.estado-analisando .agente-orbita-grupo,
  .agente-orbe.estado-resultado .agente-malha-anel,
  .agente-orbe.estado-resultado .agente-nucleo-svg,
  .agente-orbe.estado-resultado .agente-orbita-grupo {
    animation: none !important;
  }
  /* animateMotion (SMIL) não para com "animation: none" — some o pulso. */
  .agente-fio-pulso { display: none; }
}

.agente-grid-painel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 900px) {
  .agente-grid-painel { grid-template-columns: 1fr; }
}

.agente-painel {
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 14px;
  background: #111;
}
.agente-painel h4 {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ef4444;
  border-bottom: 1px solid #222;
  padding-bottom: 8px;
}
.agente-painel ul { margin: 0; padding-left: 18px; font-size: 12px; color: #ccc; }
.agente-painel li { margin-bottom: 4px; }

.agente-lista-check { list-style: none; padding-left: 0; }
.agente-lista-check li {
  padding-left: 20px;
  position: relative;
  font-size: 12px;
  color: #ddd;
  margin-bottom: 7px;
  line-height: 1.4;
}
.agente-lista-check li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #ef4444;
  font-weight: 700;
}
.agente-painel-limite { font-size: 11px; color: #888; margin-top: 10px; line-height: 1.5; }

.agente-fontes-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}
.agente-fontes-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #0d0d0d;
  border: 1px solid #222;
  border-radius: 6px;
  padding: 8px 4px;
}
.agente-fontes-valor { font-size: 16px; font-weight: 700; color: #fff; }
.agente-fontes-label { font-size: 10px; color: #888; margin-top: 2px; line-height: 1.3; }

.agente-legenda-tags { font-size: 11px; color: #777; line-height: 1.6; margin-top: 4px; }

.agente-tag-fato { color: #22c55e; font-weight: 600; }
.agente-tag-hipotese { color: #eab308; font-weight: 600; }
.agente-tag-acao { color: #3a9aef; font-weight: 600; }