@font-face{font-family:'Exo 2';src:url(/fonts/exo2.woff2) format('woff2');font-weight:200 600;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(/fonts/jbmono.woff2) format('woff2');font-weight:300 500;font-display:swap}
:root{
  --mono:'JetBrains Mono',ui-monospace,monospace; --sans:'Exo 2',system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --hef:#6097f2; --proof:#5ee6a8; --sherlock:#e8c690; --ink-m:#c58cf0; --scotty:#7fd3e6; --nemesis:#ff6b8a; --jarvis:#8fb6f7; --you:#dde3ee;
}
html[data-theme=dark]{
  --bg:#04091a; --bg-2:#091739;
  --panel:rgba(18,34,72,.52); --panel-2:rgba(24,44,92,.42); --edge:rgba(96,151,242,.12); --edge-hot:rgba(96,151,242,.38);
  --ink:#dde3ee; --ink-dim:#8e9bb5; --ink-faint:#5c6a86;
  --accent:#6097f2; --accent-2:#3366cc; --warn:#ffcf5e; --good:#5ee6a8; --bad:#ff6b8a;
  --bubble-you:rgba(51,102,204,.28); --shadow:0 30px 60px -30px rgba(0,0,0,.7); --code:rgba(0,0,0,.25);
  --logo:url(/logo-dark.png);
}
html[data-theme=light]{
  --bg:#eef2f9; --bg-2:#f8fafd;
  --panel:rgba(255,255,255,.72); --panel-2:rgba(245,248,253,.9); --edge:rgba(9,23,57,.08); --edge-hot:rgba(51,102,204,.35);
  --ink:#0b1b3f; --ink-dim:#4a5a7c; --ink-faint:#8592ad;
  --accent:#3366cc; --accent-2:#244f9e; --warn:#b7791f; --good:#178a5c; --bad:#c23355;
  --bubble-you:rgba(51,102,204,.10); --shadow:0 30px 60px -34px rgba(9,23,57,.25); --code:rgba(9,23,57,.05);
  --hef:#3366cc; --proof:#178a5c; --sherlock:#a8762c; --ink-m:#8a4fc2; --scotty:#1f8fa8; --jarvis:#244f9e; --you:#0b1b3f;
  --logo:url(/logo-light.png);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%}
body{font-family:var(--sans);color:var(--ink);background:radial-gradient(120% 90% at 50% 0%,var(--bg-2),var(--bg));overflow:hidden;font-weight:300;transition:background .9s var(--ease),color .9s var(--ease)}
body::before{content:"";position:fixed;inset:-20%;pointer-events:none;z-index:0;
  background:radial-gradient(40% 35% at 12% 8%,rgba(51,102,204,.22),transparent 70%),radial-gradient(35% 30% at 92% 92%,rgba(96,151,242,.16),transparent 70%);
  animation:drift 60s ease-in-out infinite alternate}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;
  background-image:radial-gradient(rgba(96,151,242,.35) .6px,transparent .6px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent);mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent)}
@keyframes drift{to{transform:translate(4%,3%) scale(1.06)}}
button,input,textarea{font:inherit;color:inherit}
.glass{background:var(--panel);border:1px solid var(--edge);border-radius:20px;backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.06);position:relative;overflow:hidden}
.glass::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .8s var(--ease);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(96,151,242,.14),transparent 45%)}
.glass:hover::before{opacity:1}
.label{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:lowercase;color:var(--ink-faint);font-weight:400}
.label em{color:var(--accent);font-style:normal}
.rise{opacity:0;transform:translateY(14px);animation:rise 1.6s var(--ease) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.logo{display:block;background:var(--logo) left center/contain no-repeat}
.btn{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-dim);background:transparent;border:1px solid var(--edge);border-radius:999px;padding:7px 12px;cursor:pointer;transition:all .6s var(--ease)}
.btn:hover{border-color:var(--edge-hot);color:var(--ink)}
.btn:active{transform:scale(.97)}
.btn.ok{background:var(--accent);color:#fff;border-color:transparent}
.btn.ok:hover{color:#fff;filter:brightness(1.1)}
.btn.big{font-size:13px;padding:13px 18px;border-radius:14px;width:100%}
.btn:disabled{opacity:.5;cursor:default}
.link{background:none;border:0;color:var(--accent);font-family:var(--mono);font-size:11px;cursor:pointer;padding:6px}
.ic{width:36px;height:36px;flex:0 0 36px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--edge);background:transparent;color:var(--ink-dim);cursor:pointer;transition:all .6s var(--ease)}
.ic:hover{color:var(--ink);border-color:var(--edge-hot)}
.ic.send{background:var(--accent);color:#fff;border-color:transparent}
.ic.stop{color:var(--bad);border-color:var(--bad)}
.only-phone{display:none}

/* gate */
.gate{position:relative;z-index:1;min-height:100dvh;display:grid;place-items:center;padding:20px}
.gate-card{width:min(400px,100%);padding:34px 30px 26px;display:flex;flex-direction:column;gap:12px;animation:rise 1.8s var(--ease) both}
.gate-card .logo{width:150px;height:62px;margin-bottom:4px}
.gate-card h1{font-weight:300;font-size:26px}
.gate-card form,#gate-main,#enrol-main{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.gate-card input{background:var(--panel-2);border:1px solid var(--edge);border-radius:12px;padding:12px 14px;font-family:var(--mono);font-size:16px;letter-spacing:.2em;outline:none}
.gate-card input:focus{border-color:var(--edge-hot)}
#enrol-label{letter-spacing:0;font-family:var(--sans)}
.lead{font-size:14px;color:var(--ink-dim);line-height:1.5}
.qr{background:#fff;border-radius:12px;padding:12px;width:220px;align-self:center}
.qr svg{display:block;width:100%;height:auto}
.msg-line{font-family:var(--mono);font-size:11.5px;color:var(--ink-dim);min-height:16px}
.msg-line.bad{color:var(--bad)}

/* app grid */
.app{position:relative;z-index:1;height:100dvh;display:grid;grid-template-columns:268px minmax(0,1fr) 392px;grid-template-rows:56px minmax(0,1fr);gap:14px;padding:14px}
.app>*{min-height:0}
.top{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding:0 16px;border-radius:16px}
.brand{display:flex;align-items:center;gap:12px}
.brand .logo{width:72px;height:30px}
.presence{flex:1;height:2px;border-radius:2px;background:var(--edge);position:relative;overflow:hidden;margin:0 10px}
.presence::after{content:"";position:absolute;inset:0;width:30%;background:linear-gradient(90deg,transparent,var(--accent),transparent);transform:translateX(-100%);opacity:0;transition:opacity .8s}
body.thinking .presence::after{opacity:1;animation:sweep 3.2s var(--ease) infinite}
@keyframes sweep{to{transform:translateX(340%)}}
.hosts{display:flex;gap:14px}
.host{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;color:var(--ink-dim)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--good)}
.dot.amber{background:var(--warn)} .dot.red{background:var(--bad);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,107,138,.5)}70%{box-shadow:0 0 0 8px rgba(255,107,138,0)}100%{box-shadow:0 0 0 0 rgba(255,107,138,0)}}

/* rail */
.rail{display:flex;flex-direction:column;padding:16px 12px;gap:6px}
.threads{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.newconv{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;border:1px dashed var(--edge-hot);background:none;color:var(--accent);font-size:14px;cursor:pointer;margin-bottom:8px;transition:all .6s var(--ease);text-align:left}
.newconv:hover{background:var(--panel-2)}
.grp{margin:12px 6px 6px}
.th{padding:10px 12px;border-radius:12px;cursor:pointer;transition:background .6s var(--ease),transform .6s var(--ease);position:relative;background:none;border:0;text-align:left;width:100%}
.th:hover{background:var(--panel-2);transform:translateX(3px)}
.th.on{background:var(--panel-2)}
.th.on::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:2px;border-radius:2px;background:var(--accent)}
.th p{font-size:13.5px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th small{font-family:var(--mono);font-size:10px;color:var(--ink-faint);display:flex;gap:8px;margin-top:3px}
.src{padding:0 6px;border-radius:6px;border:1px solid var(--edge)}
.rail .foot{padding:12px 8px 2px;border-top:1px solid var(--edge);display:flex;flex-direction:column;gap:8px}
.sess{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;color:var(--ink-faint)}
.skel{height:44px;border-radius:12px;background:linear-gradient(90deg,var(--panel-2),transparent,var(--panel-2));background-size:200% 100%;animation:shimmer 2.6s linear infinite;margin:3px 0}
@keyframes shimmer{to{background-position:-200% 0}}

/* chat */
.chat{display:flex;flex-direction:column}
.chat-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 26px;border-bottom:1px solid var(--edge)}
.chat-head h2{font-weight:400;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stream{flex:1;min-height:0;overflow-y:auto;padding:26px 26px 10px;display:flex;flex-direction:column;gap:22px}
.stream::-webkit-scrollbar,.feed::-webkit-scrollbar,.threads::-webkit-scrollbar{width:6px}
.stream::-webkit-scrollbar-thumb,.feed::-webkit-scrollbar-thumb,.threads::-webkit-scrollbar-thumb{background:var(--edge);border-radius:6px}
.empty{margin:auto;text-align:center;color:var(--ink-dim);max-width:380px;line-height:1.6}
.empty .logo{width:130px;height:54px;margin:0 auto 14px;opacity:.85}
.msg{max-width:780px;line-height:1.62;font-size:15px;overflow-wrap:anywhere}
.msg.you{align-self:flex-end;background:var(--bubble-you);border:1px solid var(--edge);padding:12px 16px;border-radius:18px 18px 4px 18px;font-weight:400;white-space:pre-wrap}
.msg.j{align-self:flex-start;display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;width:100%}
.av{width:30px;height:30px;border-radius:10px;background:linear-gradient(135deg,var(--accent-2),var(--accent));display:grid;place-items:center;font-family:var(--mono);font-size:12px;color:#fff;font-weight:500}
.md p+p,.md ul,.md ol,.md pre,.md h3{margin-top:10px}
.md ul,.md ol{padding-left:22px}
.md code{font-family:var(--mono);font-size:12.5px;background:var(--code);padding:1px 5px;border-radius:5px}
.md pre{background:var(--code);border:1px solid var(--edge);border-radius:12px;padding:12px 14px;overflow-x:auto}
.md pre code{background:none;padding:0;font-size:12.5px;line-height:1.5}
.md a{color:var(--accent)}
.md h3{font-size:15px;font-weight:500}
.tools{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 10px}
.tool{font-family:var(--mono);font-size:10.5px;color:var(--ink-dim);border:1px solid var(--edge);border-radius:8px;padding:4px 8px;display:flex;gap:6px;align-items:center;max-width:100%;animation:rise 1.2s var(--ease) both;cursor:default}
.tool span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}
.tool b{font-weight:500;color:var(--ink)}
.tool.run b::after{content:"";display:inline-block;width:6px;height:6px;margin-left:6px;border-radius:50%;background:var(--accent);animation:breathe 1.8s ease-in-out infinite}
.tool.err{border-color:var(--bad)}
@keyframes breathe{50%{opacity:.25}}
.approve{margin-top:12px;border:1px solid rgba(255,207,94,.45);background:linear-gradient(180deg,rgba(255,207,94,.10),transparent);border-radius:16px;padding:16px 18px;animation:rise 1.4s var(--ease) both}
.approve .label{color:var(--warn)}
.approve code{display:block;margin:10px 0 6px;font-family:var(--mono);font-size:12.5px;padding:10px 12px;border-radius:10px;background:var(--code);border:1px solid var(--edge);white-space:pre-wrap;overflow-wrap:anywhere}
.approve p{font-size:13.5px;color:var(--ink-dim)}
.approve .row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.approve.done{border-color:var(--edge);background:none;padding:10px 14px}
.notice{font-family:var(--mono);font-size:11px;color:var(--ink-dim);border-left:2px solid var(--warn);padding:4px 10px;margin-top:8px}
.notice.bad{border-color:var(--bad);color:var(--bad)}
.composer{margin:12px 20px 18px;border:1px solid var(--edge);border-radius:18px;background:var(--panel-2);padding:10px 12px 10px 12px;display:flex;align-items:flex-end;gap:10px;transition:border-color .8s var(--ease),box-shadow .8s var(--ease)}
.composer:focus-within{border-color:var(--edge-hot);box-shadow:0 0 0 4px rgba(96,151,242,.08)}
.cbody{flex:1;min-width:0;display:flex;flex-direction:column}
.composer textarea{width:100%;resize:none;border:0;background:transparent;font-size:15px;line-height:1.5;max-height:180px;outline:none;padding:6px 4px;overflow-y:auto}
.attach-line{display:flex;gap:6px;flex-wrap:wrap}
.att{font-family:var(--mono);font-size:10.5px;border:1px solid var(--edge);border-radius:8px;padding:3px 8px;color:var(--ink-dim);display:flex;gap:6px;margin:2px 0 4px}
.att button{background:none;border:0;color:var(--bad);cursor:pointer}
.typing span{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ink-faint);margin-right:4px;animation:breathe 1.6s infinite}
.typing span:nth-child(2){animation-delay:.25s}.typing span:nth-child(3){animation-delay:.5s}

/* room */
.room{display:flex;flex-direction:column}
.room-head{padding:16px 18px 12px;border-bottom:1px solid var(--edge)}
.room-head h2{font-weight:400;font-size:16px;display:flex;align-items:center;justify-content:space-between}
.bench{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:14px}
.seat{border:1px solid var(--edge);border-radius:12px;padding:8px 4px 7px;text-align:center;position:relative;transition:transform .8s var(--ease),border-color .8s var(--ease);cursor:pointer;background:none}
.seat:hover{transform:translateY(-2px);border-color:var(--edge-hot)}
.seat .g{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--c)}
.seat small{display:block;font-size:10px;color:var(--ink-faint);margin-top:2px}
.seat .lamp{position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;border:1px solid var(--ink-faint)}
.seat.today .lamp{background:var(--accent-2);border-color:var(--accent-2)}
.seat.busy{border-color:var(--c)}
.seat.busy .lamp{background:var(--good);border-color:var(--good)}
.seat.busy::after{content:"";position:absolute;left:12%;right:12%;bottom:-1px;height:2px;border-radius:2px;background:var(--c);animation:breathe 2.6s ease-in-out infinite}
.seat.red .lamp{background:var(--bad);border-color:var(--bad);animation:pulse 2.4s infinite}
.seat.off{opacity:.45}
.feed{flex:1;min-height:0;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.post{display:grid;grid-template-columns:3px minmax(0,1fr);gap:12px}
.post.new{animation:slide 1.6s var(--ease) both}
@keyframes slide{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.post .bar{border-radius:3px;background:var(--c)}
.post header{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.post header b{font-weight:500;font-size:13px;color:var(--c)}
.post header .label{font-size:9.5px}
.post .md{font-size:13.5px;line-height:1.55;margin-top:3px;overflow-wrap:anywhere}
.post .md.clip{max-height:8.5em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.more{display:block;font-family:var(--mono);font-size:10.5px;color:var(--accent);margin-top:8px;cursor:pointer;background:none;border:0;padding:0}
.handoff{font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);display:flex;align-items:center;gap:8px;padding:2px 0 2px 15px;min-width:0}
.handoff span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.handoff::before{content:"";flex:0 0 26px;height:1px;background:linear-gradient(90deg,var(--ink-faint),transparent)}
.verdict{display:inline-block;margin-top:6px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;padding:3px 8px;border-radius:6px;border:1px solid var(--good);color:var(--good)}
.verdict.fail{border-color:var(--bad);color:var(--bad)} .verdict.fixes{border-color:var(--warn);color:var(--warn)}
.room .composer{margin:10px 14px 8px}
.chips{display:flex;gap:6px;padding:0 16px;flex-wrap:wrap}
.chip{font-family:var(--mono);font-size:10.5px;padding:4px 9px;border-radius:999px;border:1px solid var(--edge);color:var(--c);cursor:pointer;transition:all .6s var(--ease);background:none}
.chip:hover{border-color:var(--c)}
.cost{font-family:var(--mono);font-size:10px;color:var(--ink-faint);padding:0 18px 12px}

/* sheet (full answer / detail) */
.sheet{position:fixed;inset:0;z-index:20;background:rgba(4,9,26,.45);display:grid;place-items:center;padding:20px;animation:rise .9s var(--ease) both}
.sheet-card{width:min(860px,100%);max-height:86dvh;overflow-y:auto;padding:26px 28px}
.sheet-x{position:sticky;top:0;float:right}

/* phone */
.tabs{display:none}
@media (max-width:1100px){.app{grid-template-columns:minmax(0,1fr) 360px}.rail{display:none}.only-phone{display:grid}
  body.rail-open .rail{display:flex;position:fixed;z-index:15;left:8px;top:70px;bottom:8px;width:min(300px,86vw)}}
@media (max-width:760px){
  .app{grid-template-columns:minmax(0,1fr);grid-template-rows:52px minmax(0,1fr) 54px;padding:8px;gap:8px}
  .hosts,.presence,.brand .label,#chat-meta{display:none}
  .top{gap:8px;padding:0 10px}
  .room{display:none}
  body.tab-room .room{display:flex} body.tab-room .chat{display:none}
  .tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .tabs button{border-radius:14px;font-size:12px;letter-spacing:.1em}
  .tabs button.on{color:var(--ink);border-color:var(--edge-hot);background:var(--panel)}
  .stream{padding:18px 14px}
  .chat-head{padding:12px 16px}
  .composer{margin:8px 10px 10px}
  .composer textarea{font-size:16px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.ic[hidden]{display:none}
.approve.ask{border-color:rgba(120,170,255,.45);background:linear-gradient(180deg,rgba(120,170,255,.10),transparent)}
.approve.ask .label{color:var(--ink-dim)}
.approve.ask form input{flex:1;min-width:0;font:inherit;font-size:13.5px;padding:8px 12px;border-radius:10px;border:1px solid var(--edge);background:var(--code);color:inherit}
/* voice + routing (jui-5) */
.vctl{display:flex;gap:6px;margin-left:auto;flex:0 0 auto}
.vbtn.on{color:var(--ink);border-color:var(--accent);box-shadow:0 0 14px -4px var(--accent)}
.ic.mic i{width:10px;height:15px;border:2px solid currentColor;border-radius:6px;position:relative;display:block}
.ic.mic i::after{content:"";position:absolute;left:50%;bottom:-7px;width:2px;height:5px;margin-left:-1px;background:currentColor}
.ic.mic.rec{color:var(--bad);border-color:var(--bad);box-shadow:0 0 0 0 var(--bad);animation:micpulse 2.4s var(--ease) infinite}
.ic.mic.wait{opacity:.5;pointer-events:none}
@keyframes micpulse{0%{box-shadow:0 0 0 0 rgba(255,90,90,.45)}100%{box-shadow:0 0 0 12px rgba(255,90,90,0)}}
.callbar{display:flex;align-items:center;gap:14px;margin:0 26px 10px;padding:10px 14px;border:1px solid var(--edge);border-radius:14px;background:var(--code)}
.callbar .label{min-width:84px}
.meter{display:flex;align-items:flex-end;gap:3px;height:26px;flex:1}
.meter i{flex:1;height:100%;background:var(--accent);border-radius:2px;transform-origin:bottom;transform:scaleY(.06);transition:transform .16s linear}
body[data-call="speaking"] .meter i{background:var(--good)}
body[data-call="thinking"] .meter i,body[data-call="transcribing"] .meter i{background:var(--ink-faint)}
.routing{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--ink-dim);background:transparent;border:1px solid var(--edge);border-radius:999px;padding:5px 10px;cursor:pointer;transition:all .6s var(--ease)}
.routing .dot{width:7px;height:7px;border-radius:50%;background:var(--good)}
.routing.off .dot{background:var(--warn)}
.routing.off{color:var(--warn);border-color:rgba(255,207,94,.45)}
.routing[hidden]{display:none}
@media (max-width:760px){.callbar{margin:0 12px 8px}.vctl .vbtn{padding:6px 9px}}