/* Layout: cockpit — three columns on desktop (telemetria | núcleo + console | protocolos), empilhado no celular. Single dark world by choice. */
:root{
  color-scheme: dark;
  --void:#04090d;
  --panel:#08141b;
  --line:#123543;
  --ice:#5fe3ff;
  --ice-dim:#2a8aa3;
  --ember:#ffb547;
  --alert:#ff5d6c;
  --ok:#5dffa8;
  --text:#d8f4fb;
  --muted:#6f98a6;
  --f-display:"Oxanium","Eurostile","Segoe UI",sans-serif;
  --f-data:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --f-body:"IBM Plex Sans",system-ui,sans-serif;
}
html,body{height:100%}
body{background:var(--void);color:var(--text);font-family:var(--f-body);font-size:14px;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(95,227,255,.08), transparent 60%),
    repeating-linear-gradient(0deg, rgba(95,227,255,.025) 0 1px, transparent 1px 3px);}
.wrap{position:relative;z-index:1;max-width:1320px;margin:0 auto;padding-inline:16px;padding-block:14px 18px;display:flex;flex-direction:column;gap:14px;min-height:100%;box-sizing:border-box}

/* top bar */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:10px}
.brand{display:flex;align-items:baseline;gap:10px}
.brand h1{font-family:var(--f-display);font-weight:700;font-size:22px;letter-spacing:.32em;margin:0;color:var(--ice);text-shadow:0 0 12px rgba(95,227,255,.5)}
.brand span{font-family:var(--f-data);font-size:11px;color:var(--muted);letter-spacing:.1em}
.status{display:flex;gap:14px;align-items:center;font-family:var(--f-data);font-size:11px;color:var(--muted);letter-spacing:.08em;flex-wrap:wrap}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);margin-right:6px;vertical-align:1px}
.dot.warn{background:var(--ember);box-shadow:0 0 8px var(--ember)}
.dot.off{background:var(--alert);box-shadow:0 0 8px var(--alert)}
.btn-ghost{font-family:var(--f-data);font-size:11px;letter-spacing:.1em;color:var(--ice);background:transparent;border:1px solid var(--ice-dim);padding:5px 10px;cursor:pointer;text-transform:uppercase;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.btn-ghost[aria-pressed="true"]{background:rgba(95,227,255,.14);color:var(--text)}
.btn-ghost:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--ember);outline-offset:2px}

/* grid */
.grid{display:grid;grid-template-columns:260px minmax(0,1fr) 280px;gap:14px;flex:1;min-height:0}
@media (max-width:1000px){.grid{grid-template-columns:1fr 1fr}.center{grid-column:1/-1;order:-1}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}

.panel{background:linear-gradient(180deg,rgba(8,20,27,.92),rgba(4,9,13,.92));border:1px solid var(--line);position:relative;padding:14px;display:flex;flex-direction:column;gap:12px;min-width:0;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.panel::after{content:"";position:absolute;top:0;left:14px;width:46px;height:2px;background:var(--ice)}
.ph{display:flex;justify-content:space-between;align-items:center;font-family:var(--f-display);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ice)}
.ph small{font-family:var(--f-data);color:var(--muted);letter-spacing:.06em;font-size:10px}
.side{display:flex;flex-direction:column;gap:14px;min-width:0}

/* clock */
.clock{font-family:var(--f-display);font-weight:300;font-size:46px;line-height:1;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--text)}
.clock b{font-weight:300;color:var(--ice)}
.date{font-family:var(--f-data);font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}

/* meters */
.meter{display:grid;grid-template-columns:70px 1fr 42px;align-items:center;gap:8px;font-family:var(--f-data);font-size:11px;color:var(--muted)}
.bar{height:6px;background:rgba(95,227,255,.08);position:relative;overflow:hidden}
.bar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--ice-dim),var(--ice));transition:width .8s ease}
.meter output{color:var(--text);text-align:right;font-variant-numeric:tabular-nums}
.spark{width:100%;height:46px;display:block}

/* center */
.center{display:flex;flex-direction:column;gap:14px;min-width:0}
.core-box{position:relative;display:grid;place-items:center;min-height:240px}
#core{width:100%;max-width:340px;aspect-ratio:1;display:block}
.core-label{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-family:var(--f-data);font-size:11px;letter-spacing:.3em;color:var(--ice);text-transform:uppercase}
.core-label.think{color:var(--ember)}

.console{flex:1;min-height:300px}
.log{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px;max-height:34vh;min-height:220px;padding-right:4px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.msg{max-width:88%;line-height:1.55;white-space:pre-wrap;word-wrap:break-word}
.msg .who{display:block;font-family:var(--f-data);font-size:10px;letter-spacing:.2em;color:var(--muted);margin-bottom:3px;text-transform:uppercase}
.msg.ai{align-self:flex-start;border-left:2px solid var(--ice);padding:2px 0 2px 12px}
.msg.me{align-self:flex-end;text-align:right;border-right:2px solid var(--ember);padding:2px 12px 2px 0;color:#f5e6cf}
.msg.sys{align-self:center;font-family:var(--f-data);font-size:11px;color:var(--muted);letter-spacing:.06em;text-align:center}
.msg.err{color:var(--alert)}
.tool{font-family:var(--f-data);font-size:11px;color:var(--ember);letter-spacing:.04em}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-family:var(--f-data);font-size:11px;color:var(--text);background:rgba(95,227,255,.06);border:1px solid var(--line);padding:6px 10px;cursor:pointer}
.chip:hover{border-color:var(--ice-dim);color:var(--ice)}
form.cmd{display:flex;gap:8px;align-items:stretch}
.cmd input{flex:1;min-width:0;background:rgba(0,0,0,.4);border:1px solid var(--ice-dim);color:var(--text);font-family:var(--f-data);font-size:14px;padding:12px;caret-color:var(--ember)}
.cmd input::placeholder{color:var(--muted)}
.send{font-family:var(--f-display);font-weight:700;letter-spacing:.2em;font-size:12px;background:var(--ice);color:var(--void);border:0;padding:0 18px;cursor:pointer;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.send.stop{background:var(--alert);color:#fff}
.send:disabled{opacity:.4;cursor:default}

/* protocols */
ul.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
ul.list li{display:grid;grid-template-columns:18px 1fr auto;gap:8px;align-items:start;font-size:13px;line-height:1.4;padding:6px 0;border-bottom:1px dashed var(--line)}
ul.list li:last-child{border-bottom:0}
.chk{width:14px;height:14px;border:1px solid var(--ice-dim);background:transparent;cursor:pointer;padding:0;margin-top:2px}
li.done .chk{background:var(--ok);border-color:var(--ok)}
li.done .t{text-decoration:line-through;color:var(--muted)}
.pri{font-family:var(--f-data);font-size:10px;padding:1px 5px;border:1px solid currentColor;letter-spacing:.06em}
.pri.alta{color:var(--alert)}.pri.media{color:var(--ember)}.pri.baixa{color:var(--muted)}
.empty{font-family:var(--f-data);font-size:11px;color:var(--muted)}
.timer{display:flex;justify-content:space-between;align-items:center;font-family:var(--f-data);font-size:12px;padding:6px 0;border-bottom:1px dashed var(--line)}
.timer b{font-family:var(--f-display);font-size:18px;font-weight:500;color:var(--ember);font-variant-numeric:tabular-nums}
.timer.fired b{color:var(--alert);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.note{font-size:13px;line-height:1.45;border-left:2px solid var(--ember);padding-left:10px;color:var(--text)}
.note small{display:block;font-family:var(--f-data);font-size:10px;color:var(--muted);margin-top:2px}
.x{background:none;border:0;color:var(--muted);cursor:pointer;font-family:var(--f-data);font-size:12px;padding:0 2px}
.x:hover{color:var(--alert)}
.foot{font-family:var(--f-data);font-size:10px;color:var(--muted);letter-spacing:.08em;text-align:center}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- additions for the standalone app ---- */
body{min-height:100%;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.mic{width:48px;flex:none;border:1px solid var(--ice-dim);background:rgba(95,227,255,.08);color:var(--ice);cursor:pointer;display:grid;place-items:center;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.mic svg{width:20px;height:20px}
.mic.on{background:var(--ember);color:var(--void);border-color:var(--ember);animation:blink 1.2s steps(2) infinite}
.mic[hidden]{display:none!important}
.fact{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:start;font-size:13px;line-height:1.4;padding:5px 0;border-bottom:1px dashed var(--line)}
.fact:last-child{border-bottom:0}
.cat{font-family:var(--f-data);font-size:9px;letter-spacing:.08em;color:var(--ember);border:1px solid rgba(255,181,71,.4);padding:1px 4px;text-transform:uppercase;margin-top:2px}
.scroll{max-height:240px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.gate{position:fixed;inset:0;z-index:10;background:rgba(4,9,13,.96);display:grid;place-items:center;padding:16px}
.gate form{width:100%;max-width:360px;display:flex;flex-direction:column;gap:12px}
.gate h2{font-family:var(--f-display);letter-spacing:.3em;color:var(--ice);margin:0;font-size:20px}
.gate p{color:var(--muted);margin:0;line-height:1.5}
.gate input{background:rgba(0,0,0,.4);border:1px solid var(--ice-dim);color:var(--text);font-family:var(--f-data);font-size:16px;padding:12px}
.gate .send{padding:12px}
.gate .err{color:var(--alert);font-family:var(--f-data);font-size:12px;min-height:1em}
.cmd input{font-size:16px}

/* elementos escondidos nunca aparecem */
[hidden]{display:none!important}