:root{
  --side:#141518; --side2:#1d1e24; --sidetx:#cfd0d6; --sidemut:#8b8d97;
  --bg:#0c0d10; --panel:#14151a; --panel2:#1a1b21;
  --ink:#eceef1; --mut:#9a9da8; --line:rgba(255,255,255,.08);
  --acc:#3ecf8e; --acc-dim:rgba(62,207,142,.12);
  --amber:#e8930c; --blue:#4aa8ff; --red:#e5484d;
  --ring:0 0 0 1px rgba(255,255,255,.06), 0 8px 28px rgba(0,0,0,.45);
  --mono:ui-monospace,"Cascadia Code",Consolas,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:13px/1.45 -apple-system,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;overflow:hidden}
a{color:inherit}
.sp{flex:1}
.hidden{display:none!important}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#34353d;border-radius:6px;border:2px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}

/* ---- app frame ---- */
.shell{display:flex;flex-direction:column;height:100vh}
.titlebar{height:42px;flex:none;display:flex;align-items:center;gap:10px;
  background:var(--side);color:#e8e9ec;padding:0 12px;border-bottom:1px solid #000}
.traffic{display:flex;gap:7px}
.traffic i{width:11px;height:11px;border-radius:50%;display:block}
.r{background:#ff5f57}.y{background:#febc2e}.g{background:#28c840}
.ws{font-weight:700;font-size:13px}
.jump{flex:0 1 340px;display:flex;align-items:center;gap:8px;background:var(--side2);
  border:1px solid #34353d;color:var(--sidemut);border-radius:6px;padding:5px 10px;cursor:pointer;font-size:12px}
.jump .jtxt{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jump kbd{font-family:inherit;font-size:11px;background:#34353d;border-radius:4px;padding:1px 6px;color:#cfd0d6}
.lpill{font-size:11px;font-weight:600;color:var(--sidemut)}
.lpill.on{color:var(--acc)}
.tbtn{border:1px solid #34353d;background:transparent;color:#e8e9ec;border-radius:6px;
  padding:5px 10px;cursor:pointer;font-size:12px;font-weight:600}
.tbtn.primary{background:#e8e9ec;color:#111;border-color:#e8e9ec}
.tbtn:hover{filter:brightness(1.15)}

.workbench{flex:1;display:grid;grid-template-columns:250px minmax(0,1fr) 290px;min-height:0}

/* ---- sidebar ---- */
.side{background:var(--side);color:var(--sidetx);display:flex;flex-direction:column;min-height:0;border-right:1px solid #000}
.sec{display:flex;flex-direction:column;min-height:0;max-height:44%;padding:10px 8px 4px}
.sec.grow{flex:1;max-height:none}
.sec-h{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--sidemut);padding:0 8px 6px}
.mini{border:0;background:transparent;color:var(--sidemut);cursor:pointer;font-size:15px;line-height:1;padding:0 4px}
.mini:hover{color:#fff}
.sfilter{padding:0 4px 6px}
.sfilter input{width:100%;background:var(--side2);border:1px solid #34353d;color:#e8e9ec;
  border-radius:6px;padding:6px 8px;font-size:12px;outline:0}
.botlist,.threadlist{overflow-y:auto;display:flex;flex-direction:column;gap:1px;padding-bottom:6px}
.bot{display:flex;gap:9px;padding:6px 8px;border-radius:6px;cursor:pointer;align-items:center}
.bot:hover{background:var(--side2)}
.bot.active{background:#34353d}
.avatar{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;flex:none;font-size:11px}
.avatar.sm{width:22px;height:22px;font-size:10px;background:#4a4b54;color:#e8e9ec}
.avatar.xs{width:20px;height:20px;font-size:9px;border-radius:6px;margin-left:-5px;border:2px solid var(--bg)}
.bmeta{min-width:0;flex:1}
.bname{font-weight:600;font-size:12.5px;display:flex;justify-content:space-between;gap:8px}
.bname time{font-weight:400;color:var(--sidemut);font-size:10.5px}
.bprev{color:var(--sidemut);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thr{padding:6px 8px;border-radius:6px;cursor:pointer}
.thr:hover{background:var(--side2)}
.thr.active{background:#34353d}
.thr .trow{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.thr .t{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.thr .tt{font-size:10.5px;color:var(--sidemut);flex:none}
.thr .s{font-size:11px;color:var(--sidemut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-foot{border-top:1px solid #34353d;padding:10px 12px;font-size:12px}
.me{display:flex;gap:8px;align-items:center;font-weight:600;margin-bottom:6px}
.me a{margin-left:auto;color:var(--sidemut);text-decoration:none}
.me a:hover{color:#fff}
.flinks{color:var(--sidemut);font-size:11.5px;display:flex;gap:6px}
.flinks a{color:var(--sidemut);text-decoration:none}
.flinks a:hover{color:#fff}

/* ---- chat ---- */
.chat{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg)}
.thread-head{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--line);font-size:13px}
.dot{width:12px;height:12px;border-radius:50%;background:var(--acc);flex:none}
.members{display:flex;align-items:center;padding-left:5px}
.tsub{color:var(--mut);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mpill{font-size:11px;font-weight:600;color:var(--mut);background:var(--panel);
  border:1px solid var(--line);border-radius:20px;padding:2px 10px}
.rename{padding:6px 16px 0;color:var(--mut);font-size:11.5px}
.messages{flex:1;overflow-y:auto;padding:14px 20px;display:flex;flex-direction:column;gap:4px}
/* reference-style rows: avatar rail + colored name + time */
.mrow{display:flex;gap:10px;padding:7px 6px;border-radius:8px;max-width:88%}
.mrow:hover{background:rgba(255,255,255,.02)}
.mrow.me{border-left:2px solid var(--acc);background:rgba(62,207,142,.05);padding-left:12px}
.mav{width:32px;height:32px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:12px;margin-top:2px}
.mbody{min-width:0;flex:1}
.mhead{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}
.mname{font-weight:700;font-size:12.5px}
.mtime{font-size:10.5px;color:var(--mut)}
.mtext{white-space:pre-wrap;word-break:break-word;font-size:13px;color:var(--ink)}
.msteps{margin-top:6px;font-size:11.5px;color:var(--mut);border-top:1px dashed var(--line);padding-top:4px}
.daydiv{align-self:center;font-size:11px;color:var(--mut);background:var(--panel);
  border:1px solid var(--line);border-radius:20px;padding:2px 12px;margin:8px 0}
.msg{max-width:82%;border-radius:8px;padding:8px 12px;white-space:pre-wrap;word-break:break-word;
  background:var(--panel);border:1px solid var(--line);align-self:flex-start}
.msg.me{align-self:flex-end;background:#e8e9ec;color:#111;border-color:#e8e9ec}
.msg .who{font-size:10.5px;font-weight:700;color:var(--mut);margin-bottom:3px;text-transform:uppercase;letter-spacing:.04em}
.msg.me .who{color:#666}
.msg .steps{margin-top:6px;padding-top:6px;border-top:1px dashed var(--line);font-size:11.5px;color:var(--mut)}
.msg.me .steps{border-top-color:#bbb;color:#555}
.empty{margin:auto;text-align:center;color:var(--mut);max-width:420px}
.empty h2{color:var(--ink);font-size:16px;margin:0 0 6px}
.empty kbd{font-family:inherit;background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:0 6px;color:var(--ink)}
.appr-strip{margin:0 20px 8px;background:#2a2417;border:1px solid #6b5518;border-radius:8px;
  padding:8px 12px;font-size:12px;color:#f0d48a}
.appr-strip button{margin-left:8px;background:#3a3f4a;color:#fff;border:1px solid #555;border-radius:6px;
  padding:3px 10px;cursor:pointer;font-size:12px}
.composer{margin:0 20px 6px;border:1px solid var(--line);border-radius:8px;display:flex;gap:8px;
  align-items:center;padding:5px 6px;background:var(--panel)}
.composer:focus-within{border-color:#4a4b54}
.composer input{flex:1;border:0;outline:0;font-size:13px;padding:7px;background:transparent;color:var(--ink)}
.round{width:28px;height:28px;border-radius:6px;border:1px solid var(--line);background:var(--panel2);
  color:var(--ink);cursor:pointer}
.round.dark{background:#e8e9ec;color:#111;border-color:#e8e9ec}

/* ---- inspector ---- */
.insp{border-left:1px solid var(--line);background:var(--side);color:var(--sidetx);
  display:flex;flex-direction:column;min-height:0}
.tabs{display:flex;gap:2px;padding:8px 8px 0;border-bottom:1px solid #34353d}
.tab{flex:1;border:0;background:transparent;padding:7px 4px;cursor:pointer;font-size:12px;font-weight:600;
  color:var(--sidemut);border-bottom:2px solid transparent}
.tab.on{color:#fff;border-bottom-color:#fff}
.tab .cnt{background:var(--red);color:#fff;border-radius:10px;font-size:10px;padding:0 6px;margin-left:4px}
.tabpane{flex:1;overflow-y:auto;min-height:0}
.pad{padding:12px}
.pad-sm{padding:2px 8px 8px;font-size:12px}
.members{border-bottom:1px solid #34353d;padding:10px 8px 10px}
.members .sec-h{padding:0 8px 6px}
.memrow{display:flex;align-items:center;gap:8px;padding:4px 8px;font-size:12.5px;border-radius:6px}
.memrow:hover{background:var(--side2)}
.routines{border-top:1px solid #34353d;padding:10px 8px;max-height:32%;overflow-y:auto}
.routines .sec-h{padding:0 8px 6px}
.rtrow{padding:5px 8px;font-size:12px;border-radius:6px}
.rtrow:hover{background:var(--side2)}
.rtrow small{color:var(--sidemut);display:block}
.muted{color:var(--sidemut);font-size:12px}
.step{border:1px solid #34353d;background:var(--side2);border-radius:8px;padding:8px 10px;margin-bottom:8px;font-size:12px}
.step .tn{font-weight:700;font-family:var(--mono);font-size:11.5px;color:#fff}
.step .rs{color:var(--sidemut);white-space:pre-wrap;word-break:break-word;margin-top:4px;max-height:120px;overflow:hidden}
.appr{border:1px solid #6b5518;background:#2a2417;border-radius:8px;padding:8px 10px;margin-bottom:8px;font-size:12px}
.appr .row{display:flex;gap:6px;margin-top:6px}
.appr code{font-family:var(--mono);font-size:11px;word-break:break-all;color:#f0d48a}
.kv{display:flex;justify-content:space-between;font-size:12px;padding:4px 0;border-bottom:1px dashed #34353d}
.files{font-family:var(--mono);font-size:11px;white-space:pre-wrap;word-break:break-all;margin-top:8px;max-height:300px;overflow:auto}

/* ---- status bar ---- */
.statusbar{height:26px;flex:none;display:flex;align-items:center;gap:16px;background:#0a0b0d;
  color:var(--sidemut);font-size:11px;padding:0 12px;font-family:var(--mono);border-top:1px solid #000}
.statusbar .ok{color:var(--acc)}
.statusbar .bad{color:var(--red)}

/* ---- login portal ---- */
.login{position:fixed;inset:0;background:#0a0b0d;display:flex;align-items:center;justify-content:center;z-index:100}
.login-box{width:340px;max-width:90vw;background:var(--panel2);border:1px solid #34353d;border-radius:12px;padding:28px}
.lbrand{font-weight:800;font-size:18px;margin-bottom:4px}
.lbrand .logo{color:var(--acc)}
.login-box h2{margin:0 0 2px;font-size:16px}
.login-box p{color:var(--mut);font-size:12.5px;margin:0 0 14px}
.login-box label{font-size:11.5px;font-weight:600;color:var(--mut)}
.login-box input{width:100%;border:1px solid #34353d;border-radius:6px;padding:8px 10px;margin:4px 0 10px;
  font-size:13px;background:var(--bg);color:var(--ink);outline:0}
.login-box input:focus{border-color:var(--acc)}
.btn.wide{width:100%;padding:9px}
.lerr{color:var(--red);font-size:12px;min-height:18px;margin-top:8px}

/* ---- command palette ---- */
.cmdk{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;justify-content:center;padding-top:12vh;z-index:50}
.pal-box{background:var(--panel2);border:1px solid #34353d;border-radius:10px;width:480px;max-width:90vw;
  max-height:50vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.5)}
.pal-box input{border:0;border-bottom:1px solid var(--line);outline:0;padding:12px 14px;font-size:14px;
  background:transparent;color:var(--ink)}
#palList{overflow-y:auto;padding:6px}
.pal-it{padding:8px 10px;border-radius:6px;cursor:pointer;font-size:13px;display:flex;gap:8px;align-items:center;color:var(--ink)}
.pal-it.on,.pal-it:hover{background:#34353d}
.pal-it small{color:var(--mut);margin-left:auto}

/* ---- modal sheets ---- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;
  padding:20px;z-index:40}
.sheet{background:var(--panel2);border:1px solid #34353d;color:var(--ink);border-radius:10px;max-width:680px;
  width:100%;max-height:84vh;overflow:auto;padding:20px}
.sheet h3{margin:0 0 4px;font-size:15px}
.sheet p{color:var(--mut);font-size:12.5px;margin:0 0 12px}
.sheet h4{font-size:13px;margin:14px 0 6px}
.sheet pre{background:#0a0b0d;color:#d6ffe0;border:1px solid var(--line);border-radius:8px;padding:12px;overflow:auto;font-size:11.5px}
.sheet input,.sheet textarea,.sheet select{width:100%;border:1px solid #34353d;border-radius:6px;
  padding:7px 9px;margin:4px 0 8px;font-size:13px;background:var(--bg);color:var(--ink)}
.sheet label{font-size:11.5px;font-weight:600;color:var(--mut)}
.sheet small.muted{color:var(--mut)}
.btn{border:1px solid #4a4b54;background:var(--side2);color:var(--ink);border-radius:6px;padding:6px 12px;
  cursor:pointer;font-weight:600;font-size:12.5px}
.btn.primary{background:#e8e9ec;color:#111;border-color:#e8e9ec}
.btn.small{font-size:12px;padding:4px 10px}
.row2{display:flex;gap:8px;margin-bottom:0}
.row2>*{flex:1;min-width:0}
.conn{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:12px;margin-bottom:12px}
.conn .sub{font-size:12px;color:var(--mut);margin:0 0 8px}
.status{font-size:11.5px;color:var(--ink);background:var(--bg);border:1px dashed #4a4b54;border-radius:6px;
  padding:8px 10px;margin-top:6px;white-space:pre-wrap;word-break:break-word}
.setgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.st-ok{color:var(--acc);font-weight:700}
.st-bad{color:var(--red);font-weight:700}
.pick{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--line);border-radius:6px;
  margin-bottom:6px;cursor:pointer;font-size:13px}
.pick:hover{background:var(--bg)}
.pick input{width:auto;margin:0}

@media(max-width:1100px){.workbench{grid-template-columns:220px minmax(0,1fr)}.insp{display:none}}
@media(max-width:760px){.workbench{grid-template-columns:minmax(0,1fr)}.side{display:none}.jump .jtxt,.jump kbd{display:none}}

/* ================= polish layer ================= */
*{scrollbar-width:thin;scrollbar-color:#34353d transparent}
::selection{background:rgba(62,207,142,.28)}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:1px}

/* sidebar depth */
.side{background:linear-gradient(180deg,#15161b,#101115)}
.bot,.thr{transition:background .12s ease,transform .12s ease}
.bot:hover,.thr:hover{transform:translateX(1px)}
.bot.active{background:linear-gradient(90deg,rgba(62,207,142,.16),#2b2c34);
  box-shadow:inset 2px 0 0 var(--acc)}
.thr.active{background:#2b2c34;box-shadow:inset 2px 0 0 var(--blue)}
.avatar{box-shadow:0 2px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.15)}
.sec-h{opacity:.9}

/* message entrance + hover copy */
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.mrow{animation:rise .18s ease}
.mbody{position:relative}
.mcopy{position:absolute;top:-4px;right:0;display:none;border:1px solid var(--line);
  background:var(--panel2);color:var(--mut);border-radius:6px;font-size:11px;
  padding:2px 8px;cursor:pointer}
.mrow:hover .mcopy{display:block}
.mcopy:hover{color:var(--ink);border-color:#4a4b54}

/* typing dots */
.tdots{display:inline-flex;gap:4px;padding:6px 0}
.tdots i{width:6px;height:6px;border-radius:50%;background:var(--mut);animation:blink 1.2s infinite}
.tdots i:nth-child(2){animation-delay:.2s}
.tdots i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25;transform:none}30%{opacity:1;transform:translateY(-3px)}}

/* composer glow */
.composer{transition:border-color .15s ease, box-shadow .15s ease}
.composer:focus-within{border-color:rgba(62,207,142,.5);box-shadow:0 0 0 3px rgba(62,207,142,.12)}
.round.dark{transition:transform .1s ease, filter .15s ease}
.round.dark:hover{filter:brightness(1.2)}
.round.dark:active{transform:scale(.92)}

/* live pulse */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.lpill.on{animation:pulse 2.4s infinite}
.statusbar .ok{animation:pulse 2.4s infinite}

/* approvals urgency */
.appr{border-left:3px solid var(--amber)}
.appr-strip{border-left:3px solid var(--amber)}

/* chips + details */
.rtrow small{display:inline-block;background:var(--side2);border:1px solid #34353d;
  border-radius:4px;padding:0 6px;margin-top:3px;font-family:var(--mono);font-size:10.5px}
.appr code{display:block;background:#0a0b0d;border:1px solid #4a3f14;border-radius:6px;
  padding:6px 8px;margin-top:6px;max-height:120px;overflow:auto}
.step{transition:border-color .15s ease}
.step:hover{border-color:#4a4b54}

/* login glow */
.login-box{box-shadow:var(--ring);animation:rise .25s ease}
.lbrand .logo{color:var(--acc);text-shadow:0 0 18px rgba(62,207,142,.6)}

/* palette pop */
.pal-box{animation:rise .15s ease}
.pal-it.on{box-shadow:inset 2px 0 0 var(--acc)}

/* threads scrollbar + counts */
.sec-h .n{font-weight:400;opacity:.7}

/* electron native mode */
body.electron .traffic{display:none}
body.electron .titlebar{-webkit-app-region:drag}
body.electron .titlebar button,
body.electron .titlebar input,
body.electron .jump{-webkit-app-region:no-drag}