/* Copiado SEM ALTERAÇÕES de referencia/jarvis_visual_pc.html (visual aprovado). */
:root{
  --bg:#050B12; --panel:rgba(10,24,34,.78); --line:rgba(63,216,242,.22);
  --cyan:#3FD8F2; --cyan-soft:#9BEBFA; --orange:#FF8A2A;
  --text:#D7E9F2; --text-strong:#E6F7FC; --muted:#8DA6B5; --ok:#34D399;
}
body{margin:0;background:var(--bg)}
.hud{position:relative;overflow:hidden;min-height:100vh;box-sizing:border-box;padding:24px 32px 28px;background:var(--bg);color:var(--text);font-family:'Rajdhani',sans-serif;display:flex;flex-direction:column;gap:22px}
.hud::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(63,216,242,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(63,216,242,.045) 1px,transparent 1px);background-size:48px 48px;pointer-events:none}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:6px}
.lbl{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tag{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1px solid rgba(141,166,181,.35);border-radius:3px;padding:1px 6px}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{transform:scale(.92)}50%{transform:scale(1.03)}}
@keyframes talk{0%,100%{transform:scale(.94)}50%{transform:scale(1.08)}}
@keyframes bar{0%,100%{transform:scaleY(.18)}50%{transform:scaleY(1)}}
@keyframes blink{50%{opacity:.35}}
@keyframes scan{0%{top:-12%}100%{top:112%}}
.stage{position:relative;width:440px;max-width:100%;aspect-ratio:1/1}
.ring{position:absolute;border-radius:50%}
.ring svg{width:100%;height:100%;display:block}
.r1{inset:0;animation:spin 40s linear infinite}
.r2{inset:9%;animation:spin 26s linear infinite reverse}
.r3{inset:19%;animation:spin 16s linear infinite}
.core{position:absolute;inset:31%;border-radius:50%;background:radial-gradient(circle at 50% 45%,#E9FBFF 0%,#7FE6F7 18%,#1FA8C9 45%,rgba(14,80,104,.45) 69%,rgba(5,11,18,0) 72%);box-shadow:0 0 70px rgba(63,216,242,.42),inset 0 0 30px rgba(255,255,255,.22);animation:breathe 4s ease-in-out infinite}
.orbit{position:absolute;inset:25%;opacity:0;transition:opacity .4s}
.dot{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--cyan-soft);box-shadow:0 0 12px var(--cyan)}
.acc{stroke:var(--cyan);transition:stroke .4s}
.st-listening .r1{animation-duration:14s}.st-listening .r2{animation-duration:10s}.st-listening .r3{animation-duration:6s}
.st-thinking .r1{animation-duration:5s}.st-thinking .r2{animation-duration:3s}.st-thinking .r3{animation-duration:1.6s}
.st-thinking .orbit{opacity:1;animation:spin 1.3s linear infinite}
.st-speaking .core{animation:talk .42s ease-in-out infinite}
.st-confirm .acc{stroke:var(--orange)}
.st-confirm .core{background:radial-gradient(circle at 50% 45%,#FFF1E3 0%,#FFB877 18%,#E06A12 45%,rgba(120,50,8,.45) 69%,rgba(5,11,18,0) 72%);box-shadow:0 0 70px rgba(255,138,42,.42),inset 0 0 30px rgba(255,255,255,.22)}
.wave{display:flex;align-items:center;justify-content:center;gap:4px;height:56px}
.bar{width:4px;border-radius:2px;background:var(--cyan);transform:scaleY(.12);transform-origin:50% 50%}
.st-listening .bar{animation:bar .9s ease-in-out infinite}
.st-speaking .bar{animation:bar .5s ease-in-out infinite;background:var(--cyan-soft)}
.st-confirm .bar{background:var(--orange)}
.livedot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);animation:blink 2.2s infinite}
.chip{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#B8CCD6;background:transparent;border:1px solid rgba(63,216,242,.3);border-radius:999px;padding:0 16px;height:44px;cursor:pointer}
.chip:hover{border-color:var(--cyan);color:var(--text-strong)}
.chip.on{background:rgba(63,216,242,.16);border-color:var(--cyan);color:var(--text-strong)}
.tier{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:4px;border:1px solid rgba(141,166,181,.3);color:var(--muted)}
.tier.on{color:var(--bg);background:var(--cyan);border-color:var(--cyan)}
.st-confirm .tier.on{background:var(--orange);border-color:var(--orange)}
.scan{position:absolute;left:0;right:0;height:90px;background:linear-gradient(rgba(63,216,242,0),rgba(63,216,242,.05),rgba(63,216,242,0));animation:scan 8s linear infinite;pointer-events:none}
.mic{width:72px;height:72px;border-radius:50%;border:2px solid var(--cyan);background:rgba(63,216,242,.12);color:var(--text-strong);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 0 24px rgba(63,216,242,.35)}
.mic:hover{background:rgba(63,216,242,.24)}
.st-confirm .mic{border-color:var(--orange);box-shadow:0 0 24px rgba(255,138,42,.35)}
.btn-ok{height:44px;padding:0 22px;border-radius:4px;border:none;background:var(--orange);color:#1A0A00;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:16px;letter-spacing:.06em;cursor:pointer}
.btn-no{height:44px;padding:0 22px;border-radius:4px;border:1px solid rgba(141,166,181,.45);background:transparent;color:var(--text);font-family:'Rajdhani',sans-serif;font-weight:600;font-size:16px;letter-spacing:.06em;cursor:pointer}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-top:1px solid rgba(63,216,242,.1)}
.row:first-of-type{border-top:none}
.mono-time{font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--cyan)}
header,main,footer{position:relative}
main{display:flex;flex-wrap:wrap;gap:24px;align-items:stretch;flex:1}
aside{flex:0 1 300px;min-width:260px;display:flex;flex-direction:column;gap:16px}
.center{flex:1 1 560px;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.hidden{display:none}

/* ---- Acréscimos da versão real (aprovados por demonstração) ---- */
.hud{font-family:'Inter',sans-serif}            /* textos: Inter (legível em tamanho pequeno) */
.titulo{font-family:'Rajdhani',sans-serif}      /* títulos e números grandes: Rajdhani */
.livedot.off{background:rgba(141,166,181,.45);box-shadow:none;animation:none}  /* cinza: não ligado */
.sist{display:flex;align-items:center;gap:10px}
.muted{color:var(--muted)}
#line{max-height:38vh;overflow-y:auto;white-space:pre-wrap}
#line.erro{color:var(--muted)}
#confirmBox.hidden{display:none !important}
#askInput:focus{outline:none;border-color:var(--cyan)}

/* Ajustes de voz */
.ajustes{position:fixed;inset:0;z-index:20;background:rgba(5,11,18,.35);display:flex;align-items:center;justify-content:flex-end;padding:16px 32px}
.ajustes.hidden{display:none}
.ajustes-caixa{width:100%;max-width:460px;box-sizing:border-box;padding:22px 24px;background:rgba(10,24,34,.97)}
.campo{width:100%;height:42px;box-sizing:border-box;padding:0 10px;background:var(--bg);border:1px solid var(--line);border-radius:4px;color:var(--text-strong);font-family:'Inter',sans-serif;font-size:14px}
.campo:focus{outline:none;border-color:var(--cyan)}
.campo optgroup{color:var(--muted)}
.cfg-linha{display:flex;justify-content:space-between;align-items:center;margin:16px 0 6px}
.cfg-valor{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--cyan)}
.ajustes input[type=range]{width:100%;accent-color:var(--cyan)}
.cfg-aviso{font-size:13px;color:var(--text-strong);border:1px solid var(--line);background:rgba(63,216,242,.08);border-radius:4px;padding:8px 10px;margin-bottom:8px}

/* Núcleo reagindo à fala: --e (0 a 1) é a energia de cada sílaba, calculada no jarvis.js */
.hud{--e:0}
.core::after{content:"";position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle at 50% 45%,#FFFFFF 0%,#F2FDFF 30%,rgba(190,244,253,.75) 52%,rgba(155,235,250,0) 72%);opacity:0;pointer-events:none}
.st-speaking.voz-viva .core{animation:none;transform:scale(calc(.9 + var(--e) * .26));filter:brightness(calc(1 + var(--e) * 1.1));box-shadow:0 0 calc(50px + var(--e) * 90px) rgba(var(--fala-rgb),calc(.35 + var(--e) * .5)),inset 0 0 30px rgba(255,255,255,.3)}
.st-speaking.voz-viva .core::after{opacity:var(--e)}
.st-speaking.voz-viva .bar{animation:none;background:var(--fala-cor);transform:scaleY(calc(.12 + var(--e) * var(--k, 1)))}
/* Anéis mais rápidos enquanto fala */
.st-speaking.voz-viva .r1{animation-duration:9s}
.st-speaking.voz-viva .r2{animation-duration:6s}
.st-speaking.voz-viva .r3{animation-duration:3.2s}

/* ---- Cor da fala (escolhida nos ajustes; a classe fica no <body>) ---- */
body{--fala-cor:var(--cyan-soft);--fala-rgb:155,235,250;--fala-nucleo:none;--confirma:var(--orange)}
body.cor-dourado{--fala-cor:#F5C054;--fala-rgb:245,192,84;
  --fala-nucleo:radial-gradient(circle at 50% 45%,#FFF7E0 0%,#FFD98A 18%,#E3A21E 45%,rgba(122,78,6,.45) 69%,rgba(5,11,18,0) 72%)}
body.cor-laranja{--fala-cor:#FF8A2A;--fala-rgb:255,138,42;--confirma:#FF3B3B;
  --fala-nucleo:radial-gradient(circle at 50% 45%,#FFF1E3 0%,#FFB877 18%,#E06A12 45%,rgba(120,50,8,.45) 69%,rgba(5,11,18,0) 72%)}
.bar{transition:background .4s}
/* Camada de cor por cima do núcleo: aparece ao falar e fica mais forte nas sílabas tônicas */
.core::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--fala-nucleo);opacity:0;transition:opacity .15s;pointer-events:none}
.st-speaking.voz-viva .core::before{opacity:calc(.9 + var(--e) * .1)}
body.cor-dourado .st-speaking.voz-viva .acc,body.cor-laranja .st-speaking.voz-viva .acc{stroke:var(--fala-cor)}
/* Arco tecnológico: ciano → azul → violeta conforme a energia; o pico fica branco */
body.cor-arco .st-speaking.voz-viva .stage,body.cor-arco .st-speaking.voz-viva .wave{filter:hue-rotate(calc(var(--e) * 95deg)) saturate(1.3)}

/* Tema laranja: a confirmação vira vermelha piscando */
@keyframes alerta{50%{opacity:.45}}
body.cor-laranja .st-confirm .acc{stroke:#FF3B3B}
body.cor-laranja .st-confirm .bar{background:#FF3B3B}
body.cor-laranja .st-confirm .core{background:radial-gradient(circle at 50% 45%,#FFE9E9 0%,#FF8C8C 18%,#E01E1E 45%,rgba(120,8,8,.45) 69%,rgba(5,11,18,0) 72%);box-shadow:0 0 70px rgba(255,59,59,.5),inset 0 0 30px rgba(255,255,255,.22);}
body.cor-laranja .st-confirm .stage{animation:alerta .9s ease-in-out infinite}
body.cor-laranja .st-confirm .tier.on{background:#FF3B3B;border-color:#FF3B3B}
body.cor-laranja .st-confirm .mic{border-color:#FF3B3B;box-shadow:0 0 24px rgba(255,59,59,.4)}
body.cor-laranja .btn-ok{background:#FF3B3B;color:#fff}