/* ═══════════════════════════════════════════
   J.A.R.V.I.S. (FLUQ): visual do reator.
   Paleta, barra de status, linha de varredura e estados derivados de Debddj/project-jarvis (MIT),
   public/css/*.css. Reescrito para animar só transform/opacity (camadas na GPU), sem filtro animado.
   ═══════════════════════════════════════════ */
:root {
  --bg-void: #030508;
  --cyan-300: #66d9ff; --cyan-400: #33ccff; --cyan-500: #00d4ff; --cyan-700: #0099cc; --cyan-900: #005577;
  --amber: #ffaa00; --green: #33ffaa; --red: #ff3344;
  --text: #c8d6e5; --text-dim: #6e8898;
  --cor: #00d4ff;                         /* cor do reator; muda por estado */
  --border: rgba(0, 212, 255, .2);
  --mono: "Share Tech Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --hud: "Orbitron", var(--mono);
  --R: min(74vmin, 600px);                /* lado do reator */
}
body[data-estado="pensando"], body[data-estado="transcrevendo"] { --cor: #ffaa00; }
body[data-estado="falando"] { --cor: #7df9ff; }
body[data-estado="ouvindo"] { --cor: #00d4ff; }
body[data-estado="parado"] { --cor: #3d8ea3; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: radial-gradient(ellipse at 50% 46%, #07202c 0%, var(--bg-void) 62%);
  color: var(--text); font: 15px/1.5 var(--mono); overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.oculto { display: none !important; }

/* ── fundo ── */
#particle-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.grade {
  position: fixed; inset: -60px; z-index: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(0, 212, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, .045) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 46%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse at 50% 46%, #000 20%, transparent 75%);
  animation: deriva 22s linear infinite;
}
@keyframes deriva { to { transform: translate(60px, 60px); } }

.cantos i { position: fixed; z-index: 2; width: 46px; height: 46px; border: 0 solid var(--cor); opacity: .55; pointer-events: none; transition: border-color .6s; }
.cantos i:nth-child(1) { top: 52px; left: 14px; border-top-width: 2px; border-left-width: 2px; }
.cantos i:nth-child(2) { top: 52px; right: 14px; border-top-width: 2px; border-right-width: 2px; }
.cantos i:nth-child(3) { bottom: 14px; left: 14px; border-bottom-width: 2px; border-left-width: 2px; }
.cantos i:nth-child(4) { bottom: 14px; right: 14px; border-bottom-width: 2px; border-right-width: 2px; }

/* ── barra de status ── */
#jarvis-interface { position: fixed; inset: 0; z-index: 1; opacity: 0; transition: opacity .9s ease; }
#jarvis-interface.visivel { opacity: 1; }
#status-bar {
  position: relative; height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px;
  background: linear-gradient(180deg, rgba(0, 20, 40, .8), rgba(0, 10, 25, .3)); border-bottom: 1px solid rgba(0, 212, 255, .1);
  font-family: var(--mono); font-size: 12px; z-index: 3; overflow: hidden;
}
#status-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--cor), transparent); opacity: .5; }
.status-left, .status-center, .status-right { display: flex; align-items: center; gap: 14px; }
.system-name { font-family: var(--hud); font-weight: 700; letter-spacing: .3em; color: var(--cyan-500); text-shadow: 0 0 8px rgba(0, 212, 255, .6); }
.system-version { color: var(--text-dim); border: 1px solid rgba(0, 212, 255, .15); padding: 1px 8px; border-radius: 3px; font-size: 10px; }
#clock { letter-spacing: .12em; color: var(--text); }
#system-state { letter-spacing: .18em; font-size: 11px; padding: 3px 10px; border: 1px solid rgba(110, 136, 152, .25); color: var(--text-dim); border-radius: 3px; transition: color .4s, border-color .4s; }
body[data-estado="ouvindo"] #system-state { color: var(--cyan-400); border-color: rgba(0, 212, 255, .4); }
body[data-estado="pensando"] #system-state, body[data-estado="transcrevendo"] #system-state { color: var(--amber); border-color: rgba(255, 170, 0, .4); }
body[data-estado="falando"] #system-state { color: var(--green); border-color: rgba(51, 255, 170, .4); }
.scan-line { position: absolute; top: 0; left: 0; width: 50%; height: 100%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(0, 212, 255, .05), transparent); animation: varre 8s linear infinite; will-change: transform; }
@keyframes varre { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } }

/* ── palco do reator ── */
#reactor-stage { position: absolute; inset: 42px 0 70px 0; display: grid; place-items: center; }
#arc-reactor-container { position: relative; width: var(--R); height: var(--R); color: var(--cor); transition: color .6s ease; }
#arc-reactor-container > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.anel { will-change: transform; }
.halo {
  background: radial-gradient(circle, var(--cor) 0%, transparent 62%); opacity: .4; mix-blend-mode: screen;
  will-change: transform, opacity; transform-origin: 50% 50%; border-radius: 50%;
}
.nucleo { pointer-events: none; }
.radar {
  position: absolute; width: calc(var(--R) * 1.12); height: calc(var(--R) * 1.12); border-radius: 50%; pointer-events: none; will-change: transform;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 300deg, color-mix(in srgb, var(--cor) 38%, transparent) 358deg, var(--cor) 360deg);
  -webkit-mask-image: radial-gradient(circle, transparent 54%, #000 55%, #000 99%, transparent 100%);
  mask-image: radial-gradient(circle, transparent 54%, #000 55%, #000 99%, transparent 100%);
  opacity: .35;
}
#waveform-ring { position: absolute; width: calc(var(--R) * 1.5); height: calc(var(--R) * 1.5); pointer-events: none; }

.lateral { position: absolute; top: 50%; width: calc(var(--R) * .62); height: calc(var(--R) * .62); color: var(--cor); opacity: .55; will-change: transform; transition: color .6s; }
.lateral.esq { left: max(-6vw, calc(50% - var(--R) * .98)); margin-top: calc(var(--R) * -.31); animation: gira 70s linear infinite; }
.lateral.dir { right: max(-6vw, calc(50% - var(--R) * .98)); margin-top: calc(var(--R) * -.31); animation: gira 55s linear infinite reverse; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (max-width: 760px) { .lateral { display: none; } }

/* a Fê técnica em segundo plano: pontos âmbar orbitando */
.trabalhando { position: absolute; width: calc(var(--R) * 1.2); height: calc(var(--R) * 1.2); pointer-events: none; opacity: 0; transition: opacity .6s; animation: gira 3.2s linear infinite; will-change: transform; }
body.trabalhando-fundo .trabalhando { opacity: 1; }
.trabalhando i { position: absolute; left: 50%; top: 0; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.trabalhando i:nth-child(2) { transform: rotate(120deg); transform-origin: 3.5px calc(var(--R) * .6); }
.trabalhando i:nth-child(3) { transform: rotate(240deg); transform-origin: 3.5px calc(var(--R) * .6); }

/* ignição do reator ao ligar */
#arc-reactor-container.ignicao { animation: ignicao 1.9s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes ignicao { 0% { opacity: 0; transform: scale(.55); } 30% { opacity: .9; } 55% { opacity: .55; } 75% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }

/* ── barras de voz na base e controles ── */
#onda-base { position: absolute; left: 50%; bottom: 74px; width: min(520px, 80vw); height: 46px; transform: translateX(-50%); pointer-events: none; opacity: .9; }
.controles { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 18px max(16px, env(safe-area-inset-bottom)); display: flex; gap: 12px; justify-content: center; z-index: 4; }
.icone { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: rgba(0, 30, 60, .35); border: 1px solid var(--border); color: var(--cyan-400); transition: background .2s, border-color .2s, transform .1s; }
.icone:hover { background: rgba(0, 212, 255, .12); border-color: var(--cyan-500); }
.icone:active { transform: scale(.94); }
.icone svg { width: 20px; height: 20px; fill: currentColor; }
.icone .corte { stroke: currentColor; stroke-width: 2.4; fill: none; opacity: 0; }
.icone.mudo { color: var(--red); border-color: rgba(255, 51, 68, .5); }
.icone.mudo .corte { opacity: 1; }
.icone:focus-visible { outline: 2px solid var(--cyan-500); outline-offset: 3px; }

#painel-autorizar { position: absolute; left: 50%; bottom: 132px; transform: translateX(-50%); z-index: 5; padding: 10px; background: rgba(30, 14, 0, .85); border: 1px solid var(--amber); box-shadow: 0 0 22px rgba(255, 170, 0, .25); }
#painel-autorizar input { width: 190px; text-align: center; letter-spacing: .6em; font-size: 22px; color: var(--amber); background: transparent; border: 0; outline: 0; font-family: var(--mono); }

/* ── painel de memória (escondido; abre pelo botão do rodapé) ── */
#painel-memoria {
  position: absolute; z-index: 5; right: 12px; top: 54px; bottom: 74px; width: min(380px, calc(100vw - 24px));
  display: flex; flex-direction: column; gap: 10px; padding: 14px;
  background: rgba(2, 12, 20, .9); border: 1px solid var(--border); backdrop-filter: blur(6px);
  box-shadow: 0 0 30px rgba(0, 229, 255, .08); animation: entra .25s ease-out;
}
@keyframes entra { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
#painel-memoria header { display: flex; justify-content: space-between; align-items: center; font: 700 12px var(--hud); letter-spacing: .18em; color: var(--cyan-500); }
#painel-memoria #memoria-vazia { color: var(--text-dim); margin: 0; }
#memoria-lista { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
#memoria-lista li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: start; padding: 10px; border: 1px solid rgba(0, 212, 255, .15); background: rgba(0, 30, 60, .3); }
#memoria-lista .fato { color: var(--text); line-height: 1.4; }
#memoria-lista small { grid-column: 1; color: var(--text-dim); font-size: 11px; letter-spacing: .1em; }
#memoria-lista button { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: 700 11px var(--hud); letter-spacing: .1em; cursor: pointer; color: var(--red); background: transparent; border: 1px solid rgba(255, 51, 68, .45); padding: 6px 10px; }
#memoria-lista button:hover { background: rgba(255, 51, 68, .12); }
#memoria-lista button:disabled { opacity: .5; cursor: wait; }
.icone.pequeno { width: 30px; height: 30px; font-size: 20px; line-height: 1; }
@media (max-width: 560px) { #painel-memoria { top: 48px; right: 8px; left: 8px; width: auto; } }

/* ── acesso (login e código) ── */
.painel {
  position: fixed; z-index: 6; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(380px, calc(100vw - 32px));
  padding: 26px 22px; display: flex; flex-direction: column; gap: 12px; text-align: center;
  background: rgba(2, 12, 20, .86); border: 1px solid var(--border); backdrop-filter: blur(6px);
  box-shadow: 0 0 40px rgba(0, 229, 255, .08), inset 0 0 30px rgba(0, 229, 255, .04);
}
.painel h1 { font: 700 14px var(--hud); letter-spacing: .2em; color: var(--cyan-500); margin-bottom: 4px; }
.painel form { display: flex; flex-direction: column; gap: 12px; }
.dica { color: var(--text-dim); }
.erro { color: var(--red); min-height: 1.2em; font-size: 13px; }
.painel input { width: 100%; padding: 12px 14px; font: inherit; color: var(--text); background: rgba(0, 229, 255, .05); border: 1px solid var(--border); outline: none; }
.painel input:focus { border-color: var(--cyan-500); box-shadow: 0 0 12px rgba(0, 212, 255, .18); }
#codigo { text-align: center; letter-spacing: .5em; font-size: 22px; }
.painel button { font: 700 13px var(--hud); letter-spacing: .16em; cursor: pointer; color: var(--bg-void); background: var(--cyan-500); border: 0; padding: 12px 18px; }
.painel button:hover { filter: brightness(1.15); }

@media (max-width: 560px) { #status-bar { padding: 0 12px; } .system-version, #clock { display: none; } }
@media (prefers-reduced-motion: reduce) { .grade, .scan-line, .lateral, .trabalhando { animation: none !important; } }