/* Layout: one full-bleed WebGL void; Oracle centered; HUD pinned to the four corners; conversation dock at the bottom; panels live in 3D. */
:root{
  --void:#020409;
  --ink:#d9ecff;
  --ink-dim:#7f95ad;
  --eye:#35b4ff;
  --eye-deep:#0b4fa8;
  --signal:#ffb547;
  --glass:rgba(5,13,24,.78);
  --line:rgba(90,185,255,.28);
  --line-hot:rgba(120,205,255,.7);
  --f-display:"Michroma","Eurostile","Arial Black",sans-serif;
  --f-body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  color-scheme:dark;
}
[hidden]{display:none!important}
html,body{height:100%;overflow:hidden}
body{background:var(--void);color:var(--ink);font-family:var(--f-body);font-size:15px;-webkit-font-smoothing:antialiased}
#stage{position:fixed;inset:0}
#gl{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none}
#css3d{position:absolute;inset:0;pointer-events:none}
#css3d>div{pointer-events:none}
.fx{position:fixed;inset:0;pointer-events:none}
.vignette{background:radial-gradient(ellipse at 50% 45%,transparent 45%,rgba(0,0,0,.75) 100%)}
.scan{background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);mix-blend-mode:screen}

/* HUD */
.hud{position:fixed;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);pointer-events:none;line-height:1.7;opacity:0;transition:opacity 1.2s ease}
.awake .hud{opacity:1}
.hud b{color:var(--ink);font-weight:500}
.hud .hot{color:var(--eye)}
.hud-tl{top:calc(18px + env(safe-area-inset-top,0px));left:max(18px,env(safe-area-inset-left,0px))}
.hud-tr{top:calc(18px + env(safe-area-inset-top,0px));right:max(18px,env(safe-area-inset-right,0px));text-align:right;pointer-events:auto}
.wordmark{font-family:var(--f-display);font-size:12px;letter-spacing:.32em;color:var(--ink);display:block;margin-bottom:4px}
.bracket{position:fixed;width:22px;height:22px;border-color:var(--line);border-style:solid;pointer-events:none;opacity:.8}
.b1{top:calc(8px + env(safe-area-inset-top,0px));left:max(8px,env(safe-area-inset-left,0px));border-width:1px 0 0 1px}
.b2{top:calc(8px + env(safe-area-inset-top,0px));right:max(8px,env(safe-area-inset-right,0px));border-width:1px 1px 0 0}
.b3{bottom:calc(8px + env(safe-area-inset-bottom,0px));left:max(8px,env(safe-area-inset-left,0px));border-width:0 0 1px 1px}
.b4{bottom:calc(8px + env(safe-area-inset-bottom,0px));right:max(8px,env(safe-area-inset-right,0px));border-width:0 1px 1px 0}
.state-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--eye);box-shadow:0 0 10px var(--eye);margin-right:7px;vertical-align:1px}
.st-thinking .state-dot{background:var(--signal);box-shadow:0 0 10px var(--signal);animation:blinkdot .5s steps(2) infinite}
@keyframes blinkdot{50%{opacity:.25}}
.hud-btn{pointer-events:auto;font:inherit;letter-spacing:inherit;text-transform:inherit;background:transparent;color:var(--ink);border:1px solid var(--line);padding:6px 10px;cursor:pointer;margin-top:8px}
#remoteInfo{display:inline-block;margin-top:8px;color:var(--ink)}
.hud-icons{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.hud-icon{position:relative;pointer-events:auto;width:38px;height:38px;display:grid;place-items:center;padding:0;background:rgba(5,13,24,.55);color:var(--eye);border:1px solid var(--line);cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.hud-icon svg{width:20px;height:20px}
.hud-icon:hover{border-color:var(--line-hot);color:#fff}
.hud-icon:focus-visible{outline:1px solid var(--eye);outline-offset:2px}
.hud-icon[aria-pressed="true"]{color:#fff;border-color:var(--eye);background:rgba(11,79,168,.5);box-shadow:0 0 14px rgba(53,180,255,.35)}
.hud-icon:disabled{cursor:progress;animation:blinkdot 1s steps(2) infinite}
/* hover / keyboard-focus label, anchored to the right edge so it never leaves the screen */
.hud-icon::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);right:0;white-space:nowrap;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--glass);border:1px solid var(--line);padding:6px 9px;opacity:0;transform:translateY(-3px);transition:opacity .15s,transform .15s;pointer-events:none;z-index:6}
.hud-icon:hover::after,.hud-icon:focus-visible::after{opacity:1;transform:none}
@media (hover:none){.hud-icon::after{display:none}}
#pair{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:rgba(1,3,8,.72);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:16px}
.pair-card{width:min(380px,100%);background:linear-gradient(160deg,rgba(10,28,50,.96),rgba(3,9,18,.96));border:1px solid var(--line-hot);padding:22px 22px 20px;text-align:center;clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)}
.pair-kicker{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--eye);margin:0 0 8px}
.pair-card h2{font-family:var(--f-display);font-weight:400;font-size:16px;line-height:1.4;letter-spacing:.05em;margin:0 0 8px;text-wrap:balance}
.pair-lead{font-size:13.5px;line-height:1.5;color:#b9cde2;margin:0 0 16px}
#pairQR{width:196px;height:196px;margin:0 auto 12px;background:#fff;padding:10px;display:grid;place-items:center}
#pairQR svg{width:100%;height:100%;display:block}
.pair-alt{font-size:12.5px;color:var(--ink-dim);margin:0 0 4px;overflow-wrap:anywhere}
.pair-alt b{color:var(--ink);font-weight:500}
.pair-code{font-family:var(--f-mono);font-size:26px;letter-spacing:.32em;color:#fff;margin:0 0 12px;font-variant-numeric:tabular-nums}
.pair-status{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);margin:0 0 4px}
.pair-status .state-dot{animation:blinkdot 1s steps(2) infinite}
.paired #chips,.paired #dock,.paired #deckNav{display:none!important}
.paired #says{font-size:clamp(18px,2.4vw,28px)}
#cam{position:fixed;margin:0;top:calc(112px + env(safe-area-inset-top,0px));right:max(18px,env(safe-area-inset-right,0px));width:132px;background:var(--glass);border:1px solid var(--line);padding:5px;z-index:5;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
#cam .cam-view{position:relative;aspect-ratio:4/3;overflow:hidden;background:#000}
#camVideo,#camBox{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
#camVideo{filter:grayscale(1) contrast(1.1) brightness(.75)}
#cam figcaption{display:flex;flex-direction:column;gap:4px;font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);padding-top:5px}
#camOff{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--ink);background:transparent;border:1px solid var(--line);padding:4px;cursor:pointer}
#camOff:hover{border-color:var(--line-hot)}
@media (max-width:560px){#cam{width:96px;top:calc(96px + env(safe-area-inset-top,0px))}}
.hud-btn:hover{border-color:var(--line-hot);color:#fff}
.hud-btn:focus-visible,.chip:focus-visible,.icon-btn:focus-visible,#ask:focus-visible,.panel:focus-visible{outline:1px solid var(--eye);outline-offset:2px}

/* Boot log */
#boot{position:fixed;left:max(22px,env(safe-area-inset-left,0px));bottom:calc(26px + env(safe-area-inset-bottom,0px));font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--ink-dim);text-transform:uppercase;white-space:pre;pointer-events:none;transition:opacity .6s ease;text-align:left;line-height:1.9}
#boot .ok{color:var(--eye)}

/* Conversation */
#talk{position:fixed;left:0;right:0;bottom:0;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 calc(18px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:12px;opacity:0;transform:translateY(16px);transition:opacity .9s ease,transform .9s ease;pointer-events:none}
.ready #talk{opacity:1;transform:none}
.ready #talk>*{pointer-events:auto}
#subs{max-width:min(760px,100%);text-align:center;display:flex;flex-direction:column;gap:6px;min-height:3.2em;justify-content:flex-end;pointer-events:none!important}
#you{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--ink-dim);text-transform:uppercase;min-height:1.2em}
#says{font-size:clamp(16px,2.1vw,20px);line-height:1.45;color:var(--ink);text-wrap:balance;text-shadow:0 0 18px rgba(53,180,255,.35)}
#says .cursor{display:inline-block;width:.5em;height:1em;background:var(--eye);vertical-align:-.15em;margin-left:2px;animation:blinkdot .8s steps(2) infinite}
#chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;width:min(640px,100%)}
.chip{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:40px;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);background:rgba(8,20,36,.6);border:1px solid var(--line);padding:6px 8px;cursor:pointer;white-space:nowrap;transition:border-color .2s,background .2s,color .2s}
.chip svg{width:16px;height:16px;flex:none;color:var(--eye)}
.chip:hover{border-color:var(--line-hot);background:rgba(20,60,110,.45);color:var(--ink)}
.chip[aria-pressed="true"]{color:#fff;border-color:var(--eye);background:rgba(11,79,168,.45);box-shadow:inset 0 -2px 0 var(--eye)}
#dock{display:flex;align-items:center;gap:8px;width:min(640px,100%);background:var(--glass);border:1px solid var(--line);padding:6px;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
#ask{flex:1;min-width:0;background:transparent;border:0;color:var(--ink);font:inherit;font-size:16px;padding:10px 8px;outline:none}
#ask::placeholder{color:var(--ink-dim)}
.icon-btn{flex:none;width:40px;height:40px;display:grid;place-items:center;background:transparent;border:1px solid transparent;color:var(--ink-dim);cursor:pointer}
.icon-btn:hover{color:var(--ink);border-color:var(--line)}
.icon-btn svg{width:19px;height:19px}
#send{background:var(--eye-deep);color:#fff;border-color:var(--eye)}
#send:hover{background:#1366c9}
#mic.on{color:var(--signal);border-color:var(--signal)}
#voice[aria-pressed="false"] .wave{display:none}
#voice[aria-pressed="true"] .mute{display:none}

#deckNav{display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:var(--ink-dim)}
#toast{position:fixed;top:calc(64px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--ink);background:var(--glass);border:1px solid var(--signal);padding:8px 14px;max-width:calc(100% - 32px);opacity:0;transition:opacity .3s;pointer-events:none}
#toast.show{opacity:1}

/* Panels (rendered by CSS3D, sized in CSS px) */
.panel{width:360px;box-sizing:border-box;pointer-events:auto;cursor:pointer;color:var(--ink);background:linear-gradient(160deg,rgba(10,28,50,.92),rgba(3,9,18,.9));border:1px solid var(--line);padding:16px 18px 18px;clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);font-family:var(--f-body);transition:border-color .25s;will-change:transform}
.panel:hover{border-color:var(--line-hot)}
.panel .meta{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
.panel .meta .kind{color:var(--eye)}
.panel .viz{height:54px;margin:12px 0 14px;position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:repeating-linear-gradient(90deg,rgba(53,180,255,.07) 0 1px,transparent 1px 12px),repeating-linear-gradient(0deg,rgba(53,180,255,.05) 0 1px,transparent 1px 12px)}
.panel .viz svg{position:absolute;inset:0;width:100%;height:100%}
.panel .viz::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-40%;background:linear-gradient(90deg,transparent,rgba(53,180,255,.18),transparent);animation:sweep 3.2s linear infinite}
@keyframes sweep{to{left:100%}}
.panel h3{font-family:var(--f-display);font-size:15px;line-height:1.35;letter-spacing:.06em;margin:0 0 6px;font-weight:400;text-wrap:balance}
.panel .sub{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;color:var(--signal);margin:0 0 10px}
.panel p.body{font-size:13.5px;line-height:1.55;color:#b9cde2;margin:0}
.panel ul.tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:12px 0 0}
.panel ul.tags li{font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;border:1px solid var(--line);padding:3px 7px;color:var(--ink)}
.panel dl{margin:0;display:grid;gap:7px}
.panel dt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.panel dd{margin:0 0 2px;font-size:12.5px;line-height:1.45;color:#a9bfd6}
.panel .mail{display:flex;align-items:center;gap:8px;margin-top:12px}
.panel .mail code{font-family:var(--f-mono);font-size:14px;color:var(--ink);user-select:all;background:rgba(53,180,255,.08);padding:6px 8px;border:1px solid var(--line);flex:1;min-width:0;overflow-wrap:anywhere}
.panel .mail button{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;background:var(--eye-deep);color:#fff;border:1px solid var(--eye);padding:8px 10px;cursor:pointer}
.panel.focus{border-color:var(--line-hot)}
@media (prefers-reduced-motion:reduce){.panel .viz::after,#says .cursor{animation:none}}
.panel{touch-action:pan-y}
.panel ul.clients{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;padding:0;margin:2px 0 12px;font-family:var(--f-display);font-size:15px;letter-spacing:.1em;color:#fff}
.panel.compact .viz{display:none}
.panel.compact .meta{margin-bottom:10px}
@media (max-width:560px){
  .hud-tl .extra,.hud-tr>span{display:none}
  .wordmark{font-size:10px;letter-spacing:.26em}
  #talk{gap:10px}
  #says{font-size:15.5px}
  .chip{flex-direction:column;gap:3px;font-size:9.5px;letter-spacing:.1em;min-height:48px;padding:6px 2px}
  #dock{padding:4px}
  .icon-btn{width:38px;height:38px}
  #boot{font-size:10px}
}
@media (max-height:560px) and (orientation:landscape){
  .hud-tl .extra{display:none}
  #talk{gap:6px;padding-block:0 calc(8px + env(safe-area-inset-bottom,0px))}
  #subs{min-height:0}
  #says{font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  #you{display:none}
  .chip{min-height:32px;padding:4px 6px}
  #dock{width:min(560px,100%)}
  .icon-btn{width:34px;height:34px}
  #ask{padding:6px 8px}
}
@media (hover:none){.chip:hover,.panel:hover{border-color:var(--line)}.chip[aria-pressed="true"]{border-color:var(--eye)}}