:root{--bg:#02060d;--cy:#00e5ff;--cy2:#2fa8ff;--dim:#0a2a3a;--txt:#cfefff;--warn:#ffb347;--bad:#ff5a6a}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow:hidden}
.mono{font-family:"Courier New",ui-monospace,monospace;letter-spacing:.18em}
.small{font-size:.75rem}
.hidden{display:none!important}
#grid{position:fixed;inset:0;background:
 radial-gradient(circle at 50% 30%,rgba(0,140,255,.18),transparent 55%),
 repeating-linear-gradient(0deg,rgba(0,229,255,.05) 0 1px,transparent 1px 34px),
 repeating-linear-gradient(90deg,rgba(0,229,255,.05) 0 1px,transparent 1px 34px);pointer-events:none}
body{display:flex;flex-direction:column}
.hud-top{position:relative;display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 10px) 12px 6px;z-index:2}
.title{text-align:center;display:flex;flex-direction:column;color:var(--cy);text-shadow:0 0 10px var(--cy)}
.title span{font-size:1.15rem;font-weight:700}
.title small{font-size:.62rem;opacity:.8}
.icon-btn{background:rgba(0,229,255,.07);border:1px solid rgba(0,229,255,.35);color:var(--cy);width:42px;height:42px;border-radius:50%;font-size:1.2rem;display:grid;place-items:center;box-shadow:0 0 10px rgba(0,229,255,.2) inset}
main{position:relative;flex:1;display:flex;flex-direction:column;min-height:0;z-index:1}
#orbWrap{display:flex;flex-direction:column;align-items:center;padding:4px 0 6px;transition:all .4s}
body.chatting #orbWrap{transform:scale(.62);margin:-34px 0 -40px}
#clock{color:var(--cy);font-size:.8rem;margin-top:6px;opacity:.85}
#hint{color:#7fb8cc;margin-top:2px}
/* Orbe / reactor */
#orb,.boot-orb{position:relative;width:200px;height:200px;border-radius:50%}
.ring{position:absolute;border-radius:50%;border:2px solid var(--cy);box-shadow:0 0 12px var(--cy),0 0 18px rgba(0,229,255,.4) inset}
.r1{inset:0;border-style:dashed;border-width:2px;animation:spin 18s linear infinite;opacity:.7}
.r2{inset:22px;border-width:3px;border-left-color:transparent;border-right-color:transparent;animation:spin 6s linear infinite reverse}
.r3{inset:46px;border-color:rgba(0,229,255,.55);border-top-color:transparent;animation:spin 3.5s linear infinite}
.spokes{position:absolute;inset:58px;border-radius:50%;background:repeating-conic-gradient(rgba(140,245,255,.85) 0 6deg,transparent 6deg 36deg);-webkit-mask:radial-gradient(circle,transparent 52%,#000 53%,#000 70%,transparent 71%);mask:radial-gradient(circle,transparent 52%,#000 53%,#000 70%,transparent 71%);animation:spin 12s linear infinite}
.core{position:absolute;inset:78px;border-radius:50%;background:radial-gradient(circle,#fff 0,#bff8ff 30%,var(--cy) 60%,rgba(0,140,255,.2) 100%);box-shadow:0 0 30px var(--cy),0 0 70px var(--cy2);animation:breathe 3.2s ease-in-out infinite}
#orb.listening .core{animation:pulse .55s ease-in-out infinite;background:radial-gradient(circle,#fff 0,#c8fff0 30%,#00ffc8 60%,rgba(0,255,180,.2) 100%);box-shadow:0 0 40px #00ffc8,0 0 90px #00ffc8}
#orb.listening .ring{border-color:#00ffc8;box-shadow:0 0 14px #00ffc8}
#orb.thinking .r2,#orb.thinking .r3{animation-duration:1s}
#orb.thinking .core{animation:breathe 1s ease-in-out infinite}
#orb.speaking .core{animation:talk .28s ease-in-out infinite alternate}
#orb.speaking .r1{animation-duration:5s}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{transform:scale(.92);opacity:.85}50%{transform:scale(1.04);opacity:1}}
@keyframes pulse{0%,100%{transform:scale(.9)}50%{transform:scale(1.22)}}
@keyframes talk{from{transform:scale(.88)}to{transform:scale(1.15)}}
/* Chat */
#chat{flex:1;overflow-y:auto;padding:6px 12px 12px;display:flex;flex-direction:column;gap:8px;-webkit-mask:linear-gradient(transparent,#000 18px)}
.msg{max-width:86%;padding:9px 12px;border-radius:14px;line-height:1.38;font-size:.95rem;white-space:pre-wrap;word-wrap:break-word;animation:in .25s ease-out}
.msg.me{align-self:flex-end;background:rgba(47,168,255,.16);border:1px solid rgba(47,168,255,.45);border-bottom-right-radius:4px}
.msg.ai{align-self:flex-start;background:rgba(0,229,255,.07);border:1px solid rgba(0,229,255,.35);border-bottom-left-radius:4px;box-shadow:0 0 14px rgba(0,229,255,.08)}
.msg.ai::before{content:"JARVIS";display:block;font:700 .6rem "Courier New",monospace;letter-spacing:.2em;color:var(--cy);margin-bottom:3px}
.msg.sys{align-self:center;font-size:.78rem;color:#7fb8cc;background:none;border:none}
@keyframes in{from{opacity:0;transform:translateY(6px)}}
.card{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.card input,.card textarea{width:100%;background:rgba(0,0,0,.35);border:1px solid rgba(0,229,255,.3);color:var(--txt);border-radius:8px;padding:7px;font:inherit;font-size:.88rem}
.card textarea{min-height:120px;resize:vertical}
.card .acts{display:flex;flex-wrap:wrap;gap:6px}
/* Dock */
.dock{position:relative;z-index:2;display:flex;align-items:center;gap:8px;padding:8px 12px calc(env(safe-area-inset-bottom) + 12px);background:linear-gradient(transparent,rgba(2,6,13,.95) 30%)}
#textForm{flex:1}
#textIn{width:100%;height:44px;border-radius:22px;border:1px solid rgba(0,229,255,.35);background:rgba(0,20,30,.7);color:var(--txt);padding:0 16px;font-size:1rem;outline:none}
#textIn:focus{border-color:var(--cy);box-shadow:0 0 10px rgba(0,229,255,.35)}
.mic{width:66px;height:66px;border-radius:50%;border:2px solid var(--cy);background:radial-gradient(circle,rgba(0,229,255,.35),rgba(0,40,60,.9));color:#fff;font-size:1.7rem;box-shadow:0 0 18px var(--cy);flex-shrink:0}
.mic.on{border-color:#00ffc8;box-shadow:0 0 28px #00ffc8;animation:pulse 1s infinite}
/* Botões */
.btn,.btn-primary{border:1px solid var(--cy);background:rgba(0,229,255,.1);color:var(--cy);border-radius:9px;padding:9px 13px;font:600 .85rem system-ui;letter-spacing:.04em}
.btn.danger{border-color:var(--bad);color:var(--bad);background:rgba(255,90,106,.08)}
.btn-primary{padding:14px 26px;font:700 1rem "Courier New",monospace;letter-spacing:.2em;box-shadow:0 0 20px rgba(0,229,255,.4);margin-top:26px}
/* Painéis */
.panel{position:fixed;inset:0;z-index:20;background:#02080f;display:flex;flex-direction:column;animation:in .2s}
.panel-head{display:flex;justify-content:space-between;align-items:center;padding:calc(env(safe-area-inset-top) + 12px) 14px 10px;color:var(--cy);border-bottom:1px solid rgba(0,229,255,.25)}
.panel-body{overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px;padding-bottom:40px}
.panel label{display:flex;flex-direction:column;gap:5px;font-size:.9rem}
.panel label.row{flex-direction:row;justify-content:space-between;align-items:center}
.panel input:not([type]),.panel input[type=text],.panel select,.contact-form input{background:rgba(0,0,0,.4);border:1px solid rgba(0,229,255,.3);color:var(--txt);border-radius:8px;padding:9px;font-size:.95rem;width:100%}
.panel input[type=checkbox]{width:22px;height:22px;accent-color:var(--cy)}
.panel input[type=range]{accent-color:var(--cy)}
.panel h3{color:var(--cy);font-size:.8rem;margin:10px 0 0;border-top:1px solid rgba(0,229,255,.2);padding-top:12px}
.note{color:#7fb8cc;font-size:.8rem;margin:0;line-height:1.4}
.contact-form{display:flex;flex-direction:column;gap:6px}
.item{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;border:1px solid rgba(0,229,255,.2);border-radius:8px;font-size:.88rem}
.item small{color:#7fb8cc;display:block}
.item button{background:none;border:none;color:var(--bad);font-size:1.1rem}
.link-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.link-card{text-align:left;background:rgba(0,229,255,.06);border:1px solid rgba(0,229,255,.3);border-radius:10px;padding:12px;color:var(--txt);display:flex;flex-direction:column;gap:3px}
.link-card b{color:var(--cy)}
.link-card span{font-size:.75rem;color:#7fb8cc}
.caps{margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:.85rem;line-height:1.4}
.ok{color:#00ffa0}.off{color:var(--bad)}
/* Boot */
#boot{position:fixed;inset:0;z-index:50;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .8s}
#boot.gone{opacity:0;pointer-events:none}
#bootText{margin-top:30px;color:var(--cy);text-shadow:0 0 12px var(--cy);font-size:1.05rem;min-height:1.4em;text-align:center}
#bootLog{color:#5f9fb5;margin-top:10px;min-height:5.5em;text-align:left;white-space:pre}
#boot .boot-orb .core{animation:breathe 2s infinite}
#boot.booting .boot-orb .r1,#boot.booting .boot-orb .r2{animation-duration:1.2s}
#toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);background:rgba(0,30,45,.95);border:1px solid var(--cy);color:var(--txt);padding:9px 14px;border-radius:10px;font-size:.85rem;z-index:60;max-width:90%;text-align:center}
@media (min-height:760px){#orb,.boot-orb{width:230px;height:230px}}
.hint{font-size:.78rem;opacity:.7;line-height:1.35;margin:.3rem 0 .6rem}