*{box-sizing:border-box;margin:0;padding:0}
:root{
  --accent:#3a9bdc;--accent-bright:#5ab4ee;--accent-rgb:58,155,220;
  --c1:var(--accent);--c2:#6d5ce0;--c3:var(--good);
  --bg:#080a0f;--bg2:rgba(14,17,24,0.97);
  /* One neutral text ramp. Accent is for STATE (active, selected, live), never for
     ordinary labels — accent-as-body-text is what made this read as a toy. */
  --text:rgba(255,255,255,0.92);--text-dim:rgba(255,255,255,0.58);--text-faint:rgba(255,255,255,0.46);
  --label:rgba(255,255,255,0.52);
  --line:rgba(255,255,255,0.09);--line-strong:rgba(255,255,255,0.15);
  --surface:rgba(255,255,255,0.028);--surface-hi:rgba(255,255,255,0.055);
  --border:rgba(255,255,255,0.09);
  --warn:#e0a03a;--bad:#e2685f;--good:#3ec98a;
  --radius:10px;--radius-sm:7px;
}
html,body{background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--text);display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
body{background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--text);display:flex;flex-direction:column;height:100vh;height:100dvh}

/* Background effects */
.aurora{position:fixed;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(var(--accent-rgb),0.035) 0%,transparent 70%);top:-240px;left:50%;transform:translateX(-50%);pointer-events:none;z-index:0;animation:aur 10s ease-in-out infinite}
@keyframes aur{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-45%) scale(1.08)}}
canvas#bgCanvas{position:fixed;inset:0;z-index:0;pointer-events:none}
.scanline{display:none}
@keyframes scan{0%{top:0;opacity:0}5%{opacity:1}95%{opacity:1}100%{top:100vh;opacity:0}}

/* Topbar */
.topbar{background:rgba(8,10,16,0.98);border-bottom:1px solid var(--line);padding:0 18px;height:50px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:200;flex-shrink:0;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.topbar::after{content:none}
.brand{font-size:0.8125rem;font-weight:600;color:var(--text);letter-spacing:0.16em}
.brand-sub{font-size:0.625rem;color:var(--label);letter-spacing:0.1em}
.pills{display:flex;gap:10px}
.pi{display:flex;align-items:center;gap:4px;min-height:44px;font-size:0.625rem;color:var(--text-faint);letter-spacing:.05em}
.pd{width:5px;height:5px;border-radius:50%;animation:bl 2.5s ease-in-out infinite}
@keyframes bl{0%,100%{opacity:1}50%{opacity:.2}}
.topbar-right{display:flex;gap:8px;align-items:center}
.clock{font-size:0.625rem;color:var(--text-faint);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.stbtn{padding:4px 12px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);border:1px solid var(--line);background:transparent;font-size:0.6875rem;color:var(--text-dim);cursor:pointer;transition:color .18s,border-color .18s,background .18s;letter-spacing:.02em}
.stbtn:hover{border-color:var(--line-strong);color:var(--text);background:var(--surface)}

/* Main 3-column layout */
.main{flex:1;display:flex;min-height:0;position:relative;z-index:1;overflow:hidden}

/* LEFT PANEL */
.lp{padding:12px 10px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:10px;overflow-y:auto;background:rgba(4,8,20,0.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);flex-shrink:0;width:200px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:11px 12px;position:relative;overflow:hidden}
.panel::before{content:none}
.plbl{font-size:0.625rem;color:var(--label);font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.biz-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--radius-sm);cursor:pointer;transition:all .2s;margin-bottom:2px}
.biz-item:hover{background:rgba(var(--accent-rgb),0.1)}
.biz-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.biz-nm{font-size:0.6875rem;color:rgba(255,255,255,0.92);flex:1;font-weight:500}
.biz-v{font-size:0.625rem;color:var(--text-faint)}
.cmd-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.cb{padding:8px 6px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface);font-size:0.6875rem;color:var(--text-dim);cursor:pointer;text-align:center;letter-spacing:.01em;transition:color .18s,border-color .18s,background .18s;font-weight:500}
.cb:hover{background:var(--surface-hi);border-color:var(--line-strong);color:var(--text)}
.conn-grid{display:flex;flex-wrap:wrap;gap:5px}
.conn-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 7px;border-radius:5px;border:1px solid var(--line);background:transparent;font-size:0.625rem;letter-spacing:.04em;color:var(--text-faint);cursor:pointer;transition:color .18s,border-color .18s}
.conn-chip .conn-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,0.16);flex-shrink:0}
.conn-chip.on{border-color:var(--line);color:var(--text-dim);background:transparent}
.conn-chip.on .conn-dot{background:var(--good)}
.conn-chip:hover{border-color:var(--line-strong);color:var(--text)}

/* CENTER PANEL */
  .cp{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 20px 20px;background:rgba(4,8,22,0.7);gap:12px;overflow-y:auto;overflow-x:hidden;position:relative;flex:1;min-width:0;-webkit-overflow-scrolling:touch}
  .orb-wrap{position:relative;width:min(300px,100%);aspect-ratio:1/1;height:auto;margin:0 auto;flex-shrink:0}
.or{position:absolute;border-radius:50%;border:1px solid;pointer-events:none}
.or1{inset:0;border-color:rgba(var(--accent-rgb),0.42);animation:rsp 14s linear infinite}
.or2{inset:-15px;border-color:rgba(var(--accent-rgb),0.24);animation:rsp 24s linear infinite reverse}
.or3{inset:-30px;border-color:rgba(255,255,255,0.10);animation:rsp 36s linear infinite}
@keyframes rsp{to{transform:rotate(360deg)}}
.or1::before,.or2::before,.or3::before{content:'';position:absolute;width:6px;height:6px;border-radius:50%;top:-3px;left:50%;transform:translateX(-50%)}
.or1::before{background:var(--accent);box-shadow:0 0 6px rgba(var(--accent-rgb),.7)}
.or2::before{background:rgba(var(--accent-rgb),.45);box-shadow:none}
.or3::before{background:rgba(255,255,255,.18);box-shadow:none}
  .orb-c{position:absolute;inset:0;border-radius:50%;background:rgba(5,7,15,0.85);overflow:hidden}
canvas#faceCanvas{display:block}
.hl{position:absolute;font-size:0.625rem;color:var(--text-dim);letter-spacing:.09em;line-height:1.75;pointer-events:none;font-weight:500}
.hl-tl{top:6px;left:6px}
.hl-tr{top:6px;right:6px;text-align:right}
.hl-bl{bottom:6px;left:6px}
.hl-br{bottom:6px;right:6px;text-align:right}
.hlv{color:var(--text);display:block;font-weight:600;font-size:0.6875rem;letter-spacing:.04em}
.state-row{margin-top:6px;text-align:center}
.state-lbl{font-size:0.625rem;color:var(--text-dim);letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.state-val{font-size:1.375rem;font-weight:400;color:#fff;letter-spacing:.01em}
.vrow{display:flex;gap:10px;margin-top:8px;align-items:center}
.vb{width:58px;height:58px;gap:4px;flex-direction:column;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.vb:hover{background:var(--surface-hi);border-color:var(--line-strong)}
.vb.on{border-color:rgba(var(--accent-rgb),.55);background:rgba(var(--accent-rgb),.12);color:var(--accent-bright)}
@keyframes vp{0%,100%{opacity:1}50%{opacity:.75}}
.mode-row{display:flex;gap:3px;margin-top:8px;flex-wrap:wrap;justify-content:center}
.mb{padding:4px 9px;border-radius:6px;border:1px solid var(--line);background:transparent;font-size:0.625rem;color:var(--text-faint);cursor:pointer;letter-spacing:.04em;transition:color .18s,border-color .18s}
.mb.active{border-color:rgba(var(--accent-rgb),.5);color:var(--accent-bright);background:rgba(var(--accent-rgb),.1);font-weight:600}

/* RIGHT PANEL */
.rp{border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0;background:rgba(4,8,20,0.85);overflow:hidden;width:260px;max-width:calc(100vw - 200px - 340px);flex-shrink:0;position:relative}
.history-sidebar{
  position:absolute;
  top:0;left:0;bottom:0;
  width:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:rgba(3,6,16,0.98);
  border-right:1px solid rgba(var(--accent-rgb),0.12);
  transition:width .25s cubic-bezier(0.4,0,0.2,1);
  z-index:10;
  box-shadow:4px 0 20px rgba(0,0,0,0.4);
}
.history-sidebar.open{
  width:220px;
}
.history-sidebar-header{
  padding:12px 12px 10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid rgba(var(--accent-rgb),0.08);
  flex-shrink:0;
}
.chat-main{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
  min-width:0;
  width:100%;
}
.history-toggle-btn{
  width:28px;height:28px;
  border-radius:8px;
  border:0.5px solid rgba(var(--accent-rgb),0.2);
  background:rgba(var(--accent-rgb),0.06);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  color:var(--label);
  transition:all .2s;
  flex-shrink:0;
}
.history-toggle-btn:hover{
  background:rgba(var(--accent-rgb),0.12);
  color:var(--accent);
}
.chat-title{font-size:0.625rem;color:var(--label);font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.chat-count{font-size:0.625rem;color:var(--label)}
.session-date{
  font-size:0.625rem;
  color:var(--text-faint);
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:8px 12px 4px;
  font-weight:600;
}
.chat-hdr{padding:10px 14px;border-bottom:1px solid var(--line);font-size:0.625rem;color:var(--label);font-weight:600;letter-spacing:.14em;display:flex;justify-content:space-between;flex-shrink:0;text-transform:uppercase}
.ca{flex:1;padding:12px;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:10px;min-height:0}
.mj{background:var(--surface);border:1px solid var(--line);border-radius:12px 12px 12px 3px;padding:12px 14px;font-size:0.8125rem;color:rgba(255,255,255,0.95);line-height:1.65;max-width:96%}
.mk{background:rgba(var(--accent-rgb),0.13);border:1px solid rgba(var(--accent-rgb),0.22);border-radius:12px 12px 3px 12px;padding:12px 14px;font-size:0.8125rem;color:rgba(255,255,255,0.94);line-height:1.65;align-self:flex-end;max-width:88%}
.ml{font-size:0.625rem;color:var(--label);font-weight:600;letter-spacing:.1em;margin-bottom:4px;text-transform:uppercase}
.typing{display:none;padding:4px 14px}
.typing.show{display:flex;align-items:center;gap:6px}
.typing span{font-size:0.625rem;color:var(--label);letter-spacing:.12em;animation:tb 1s ease-in-out infinite}
.tool-act{display:none;flex-direction:column;gap:4px;margin:2px 0 8px;padding:6px 9px;border-left:2px solid rgba(var(--accent-rgb),0.4);background:rgba(var(--accent-rgb),0.05);border-radius:0 8px 8px 0}
.tool-row{display:flex;align-items:center;gap:7px;font-size:0.6875rem;color:var(--text-dim);letter-spacing:.02em;min-width:0}
.tool-row .tool-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px rgba(var(--accent-rgb),0.8);animation:vp .9s ease-in-out infinite;flex-shrink:0}
.tool-row.done .tool-dot{background:var(--good);animation:none}
.tool-row.done{color:rgba(255,255,255,0.55)}
.tool-row .tool-sum{color:rgba(255,255,255,0.4);font-size:0.625rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
@keyframes tb{0%,100%{opacity:.3}50%{opacity:1}}
.ir{padding:10px;padding-bottom:max(10px,env(safe-area-inset-bottom));border-top:1px solid rgba(var(--accent-rgb),0.18);display:flex;gap:8px;align-items:center;flex-shrink:0}
.ir input{flex:1;background:rgba(255,255,255,0.05);border:1px solid rgba(var(--accent-rgb),0.2);border-radius:var(--radius);padding:9px 14px;font-size:0.75rem;color:var(--text);outline:none;letter-spacing:.02em;transition:border-color .2s}
.ir input:focus{border-color:rgba(var(--accent-rgb),0.5);background:rgba(var(--accent-rgb),0.06)}
.ir input::placeholder{color:rgba(255,255,255,0.4);letter-spacing:.06em}
.sb{width:36px;height:36px;border-radius:10px;background:rgba(var(--accent-rgb),0.18);border:1px solid rgba(var(--accent-rgb),0.4);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .2s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.sb:hover{background:rgba(var(--accent-rgb),0.3);transform:scale(1.05)}

/* Metrics bar */
.metrics{background:rgba(8,10,16,0.98);border-top:1px solid var(--line);display:flex;overflow-x:auto;scrollbar-width:thin;flex-shrink:0;min-height:52px;height:auto;position:relative;z-index:100}
.metrics::before{content:none}
.mt{padding:7px 14px;min-width:118px;flex:1 0 auto;white-space:nowrap;border-right:1px solid var(--line);transition:background .2s,opacity .3s ease}
.mt:hover{background:rgba(var(--accent-rgb),0.05)}
.mtl{font-size:0.625rem;color:var(--label);font-weight:600;letter-spacing:.07em;text-transform:uppercase}
.mtv{font-size:1rem;font-weight:600;color:var(--text);line-height:1.2;font-variant-numeric:tabular-nums}
.mts{font-size:0.625rem;color:var(--text-faint)}
.bb{background:rgba(5,8,18,0.98);border-top:1px solid rgba(var(--accent-rgb),0.1);padding:3px 14px;padding-bottom:max(3px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;flex-shrink:0;z-index:100}
.bs{font-size:0.5625rem;color:var(--text-faint);letter-spacing:.07em}
.bs span{color:var(--label)}

/* Login screen */
.login-screen{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999}
.login-screen.hidden{display:none}
.login-box{background:rgba(8,14,30,0.97);border:1px solid rgba(var(--accent-rgb),0.25);border-radius:20px;padding:36px 28px;width:min(340px,92vw);display:flex;flex-direction:column;align-items:center;gap:14px;position:relative;backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px)}
.login-box::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),0.5),transparent);border-radius:20px 20px 0 0}
.login-title{font-size:1.125rem;font-weight:600;color:var(--text);letter-spacing:0.16em}
.login-sub{font-size:0.625rem;color:var(--label);letter-spacing:.12em;margin-top:-6px}
.login-modes{display:flex;gap:6px;width:100%;margin-bottom:10px}
.login-mode-btn{flex:1;padding:8px 10px;border-radius:8px;border:1px solid rgba(var(--accent-rgb),0.25);background:rgba(var(--accent-rgb),0.05);color:var(--label);font-size:0.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:all .2s;font-family:inherit}
.login-mode-btn:hover{border-color:rgba(var(--accent-rgb),0.5);color:var(--accent)}
.login-mode-btn.active{background:rgba(var(--accent-rgb),0.16);border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),0.10)}
.lm-btn{flex:1;padding:6px;border-radius:var(--radius-sm);border:1px solid rgba(var(--accent-rgb),0.2);background:transparent;font-size:0.625rem;color:var(--text-dim);cursor:pointer;transition:all .2s;letter-spacing:.07em}
.lm-btn.active{border-color:var(--accent);color:var(--accent);background:rgba(var(--accent-rgb),0.1)}
.login-input{width:100%;background:rgba(255,255,255,0.06);border:1px solid rgba(var(--accent-rgb),0.22);border-radius:var(--radius);padding:11px 14px;font-size:0.875rem;color:var(--text);outline:none;text-align:left;transition:border-color .2s;box-sizing:border-box;-webkit-appearance:none}
.login-input:focus{border-color:rgba(var(--accent-rgb),0.5)}
.login-btn{width:100%;padding:13px;border-radius:var(--radius);border:none;background:var(--accent);font-size:0.875rem;color:#000;cursor:pointer;letter-spacing:.06em;transition:all .2s;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;min-height:48px}
.login-btn:hover,.login-btn:active{background:rgba(var(--accent-rgb),0.85);opacity:.9}
.login-error{font-size:0.625rem;color:var(--bad);min-height:14px}

/* Settings page */
.settings-page{position:fixed;inset:0;background:var(--bg);z-index:1000;display:none;flex-direction:column;overflow-y:auto}
.settings-page.open{display:flex}
.settings-header{background:rgba(5,8,18,0.98);border-bottom:1px solid rgba(var(--accent-rgb),0.18);padding:12px 20px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;position:sticky;top:0;z-index:10;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.settings-back{display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--label);font-size:0.75rem;letter-spacing:.07em;border:none;background:transparent}
.settings-back:hover{color:var(--accent)}
.settings-body{padding:18px;display:flex;flex-direction:column;gap:18px;max-width:880px;width:100%;margin:0 auto}
.ss{background:rgba(8,14,28,0.9);border:1px solid rgba(var(--accent-rgb),0.18);border-radius:var(--radius);overflow:hidden;position:relative;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ss::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),0.3),transparent)}
.ssh{padding:13px 16px;border-bottom:1px solid rgba(var(--accent-rgb),0.12);display:flex;align-items:center;gap:10px}
.ssi{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:0.8125rem;flex-shrink:0}
.sst{font-size:0.8125rem;font-weight:600;color:var(--text);letter-spacing:.01em}
.ssd{font-size:0.625rem;color:var(--text-faint);margin-top:1px}
.ssb{padding:16px}
.sr{display:flex;gap:12px;flex-wrap:wrap}
.sf{display:flex;flex-direction:column;gap:5px;min-width:170px}
.sl{font-size:0.625rem;color:var(--label);letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.si{background:rgba(255,255,255,0.04);border:1px solid var(--line);border-radius:var(--radius-sm);padding:7px 10px;font-size:0.75rem;color:var(--text);outline:none;width:100%;transition:border-color .2s}
.si:focus{border-color:rgba(var(--accent-rgb),0.5)}
.sk{background:rgba(255,255,255,0.04);border:1px solid var(--line);border-radius:var(--radius-sm);padding:7px 10px;font-size:0.75rem;color:var(--text);outline:none;width:100%}
.sbtn{padding:6px 12px;border-radius:var(--radius-sm);border:1px solid rgba(var(--accent-rgb),0.3);background:rgba(var(--accent-rgb),0.06);font-size:0.625rem;color:var(--accent);cursor:pointer;letter-spacing:.05em;transition:all .2s;font-weight:500}
.sbtn:hover{background:rgba(var(--accent-rgb),0.14);border-color:var(--accent)}
.sbtn.g{border-color:rgba(62,201,138,.35);color:var(--c3);background:rgba(62,201,138,0.06)}
.sbtn.p{background:rgba(var(--accent-rgb),0.14);border-color:var(--accent)}
.cs{display:flex;align-items:center;gap:5px;font-size:0.625rem;padding:3px 8px;border-radius:20px;border:1px solid rgba(var(--accent-rgb),0.2);font-weight:500}
.cs.ok{border-color:rgba(62,201,138,.4);color:var(--c3)}
.cs.no{border-color:rgba(226,104,95,.35);color:#ff6677}
.settings-save-bar{position:sticky;bottom:0;background:rgba(5,8,18,0.98);border-top:1px solid rgba(var(--accent-rgb),0.18);padding:12px 20px;display:flex;justify-content:space-between;align-items:center;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.save-st{font-size:0.625rem;color:rgba(62,201,138,.8)}
.tg{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.to{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px;cursor:pointer;text-align:center;transition:all .2s}
.to.active{border-color:var(--accent);background:rgba(var(--accent-rgb),0.1)}
.to-n{font-size:0.625rem;color:var(--text-dim);margin-top:3px;letter-spacing:.05em}

/* Responsive */
@media(max-width:768px){
  /* Layout */
  .main{flex-direction:column;position:relative;overflow:hidden}
  .lp{display:none;width:100%!important;flex:1;border-right:none;overflow-y:auto}
  .cp{display:none;width:100%!important;flex:1;border:none;overflow-y:auto;-webkit-overflow-scrolling:touch;
      padding:16px 16px 90px;align-items:center;justify-content:center;gap:12px;overflow-x:hidden}
  .resize-handle{display:none}
  .rp{display:none;width:100%!important;flex:1;border-left:none;min-height:0}
  .lp.mob-active,.cp.mob-active,.rp.mob-active{display:flex!important}

  /* Orb - fills screen nicely */
  .orb-wrap{width:min(240px,72vw)!important;height:min(240px,72vw)!important;flex-shrink:0;margin:0 auto}

  /* State text */
  .state-row{text-align:center;margin:0}
  .state-lbl{font-size:0.625rem}
  .state-val{font-size:1.25rem}

  /* Mode pills - horizontal scroll, compact */
  .mode-row{gap:4px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
            padding:2px 4px;scrollbar-width:none;justify-content:flex-start;width:100%;max-width:100%}
  .mode-row::-webkit-scrollbar{display:none}
  .mb{padding:4px 10px;font-size:0.625rem;white-space:nowrap;flex-shrink:0}

  /* Metrics bar - horizontal scroll */
  .metrics{grid-template-columns:repeat(5,minmax(90px,1fr));overflow-x:auto;height:auto;min-height:52px;
           -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .metrics::-webkit-scrollbar{display:none}
  .mt{min-width:90px;padding:6px 10px}
  .mtv{font-size:0.9375rem}

  /* Topbar */
  .topbar .pills{display:none}
  .topbar{position:relative}
  .topbar-search{max-width:160px}

  /* Chat input */
  .ir input{font-size:1rem}

  /* Notifications */
  .notif-panel{width:calc(100vw - 24px);right:12px}

  /* Misc */
  .vrow{gap:8px}
  .vb{width:48px;height:48px}
}
@media(max-width:480px){
  .metrics{grid-template-columns:repeat(3,minmax(90px,1fr))}
  .orb-wrap{width:min(240px,72vw)!important;height:min(240px,72vw)!important}
}
input,select,textarea{-webkit-tap-highlight-color:transparent}

/* Mobile bottom action bar */
.mobile-actions{
  display:none;
  background:rgba(5,8,18,0.98);
  border-top:1px solid rgba(var(--accent-rgb),0.15);
  padding:4px 0;
  padding-bottom:max(4px,env(safe-area-inset-bottom));
  flex-shrink:0;
  gap:0;
  align-items:stretch;
  justify-content:space-around;
  z-index:150;
}
.mob-tab{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:6px 4px;cursor:pointer;
  color:var(--text-faint);
  font-size:0.625rem;letter-spacing:.04em;font-weight:500;
  border-radius:8px;transition:all .2s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  min-height:52px;
}
.mob-tab:active{background:rgba(var(--accent-rgb),0.1)}
.mob-tab.active{color:var(--accent)}
.mob-tab svg{flex-shrink:0}
@media(max-width:768px){
  .mobile-actions{display:flex}
  .bb{display:none}
}
.mob-btn{
  width:44px;height:44px;min-width:44px;min-height:44px;border-radius:12px;
  border:1px solid rgba(var(--accent-rgb),0.3);
  background:rgba(var(--accent-rgb),0.08);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--label);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:all .2s;flex-shrink:0;
}
.mob-btn.on{border-color:var(--c3);color:var(--c3);background:rgba(62,201,138,0.1)}
.mob-btn:active{transform:scale(0.92)}

.resize-handle{
  width:4px;
  background:transparent;
  cursor:col-resize;
  position:relative;
  z-index:50;
  flex-shrink:0;
  transition:background .2s;
}
.resize-handle:hover{background:rgba(var(--accent-rgb),0.3)}
.resize-handle::after{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:2px;
  height:40px;
  border-radius:2px;
  background:rgba(var(--accent-rgb),0.2);
}


.avatar-btn{
  position:relative;
  width:36px;height:36px;min-width:36px;min-height:36px;border-radius:50%;
  background:rgba(var(--accent-rgb),0.12);
  border:1.5px solid rgba(var(--accent-rgb),0.45);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:transform .2s,border-color .2s,box-shadow .2s;flex-shrink:0;
}
.avatar-btn:hover{transform:scale(1.05);border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),0.12)}
.avatar-inner{
  font-size:0.8125rem;font-weight:700;
  color:var(--accent);letter-spacing:0;
}
.avatar-status{
  position:absolute;bottom:0;right:0;
  width:8px;height:8px;border-radius:50%;
  background:var(--good);border:2px solid var(--bg);
  box-shadow:0 0 5px rgba(62,201,138,0.7);
}
.avatar-menu{
  position:absolute;top:40px;right:0;
  background:rgba(8,14,28,0.98);
  border:1px solid rgba(var(--accent-rgb),0.2);
  border-radius:12px;padding:6px;
  min-width:180px;z-index:1000;
  backdrop-filter:blur(20px);
  box-shadow:0 8px 32px rgba(0,0,0,0.4);
}
.avatar-menu-header{padding:8px 10px 6px}
.avatar-menu-name{font-size:0.75rem;font-weight:600;color:rgba(255,255,255,0.9)}
.avatar-menu-role{font-size:0.625rem;color:var(--text-faint);margin-top:2px;letter-spacing:.06em}
.avatar-menu-divider{height:1px;background:rgba(var(--accent-rgb),0.12);margin:4px 0}
.avatar-menu-item{
  padding:7px 10px;border-radius:7px;font-size:0.6875rem;
  color:rgba(255,255,255,0.75);cursor:pointer;
  transition:background .15s;display:flex;align-items:center;gap:8px;
}
.avatar-menu-item:hover{background:rgba(var(--accent-rgb),0.1);color:rgba(255,255,255,0.95)}

/* Topbar search */
.topbar-search{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,0.035);
  border:1px solid rgba(var(--accent-rgb),0.15);
  border-radius:9px;padding:5px 8px 5px 12px;
  flex:1;max-width:420px;margin:0 auto;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.topbar-search:hover{border-color:rgba(var(--accent-rgb),0.28);background:rgba(255,255,255,0.05)}
.topbar-search:focus-within{
  border-color:rgba(var(--accent-rgb),0.5);
  background:rgba(var(--accent-rgb),0.06);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),0.10);
}
.topbar-search input{
  background:transparent;border:none;outline:none;
  font-size:0.75rem;color:rgba(255,255,255,0.85);
  width:100%;letter-spacing:.02em;
  transition:all .25s;
}
.topbar-search input::placeholder{color:var(--text-faint);letter-spacing:.05em}
.search-kbd{
  display:flex;align-items:center;gap:1px;flex-shrink:0;
  font-size:0.625rem;font-weight:600;letter-spacing:.04em;
  color:var(--label);
  background:rgba(var(--accent-rgb),0.08);
  border:1px solid rgba(var(--accent-rgb),0.18);
  border-radius:5px;padding:2px 6px;line-height:1;
  transition:opacity .2s;
}
.topbar-search:focus-within .search-kbd{opacity:0}
@media(max-width:768px){
  .topbar-search{
    flex:0;max-width:32px;min-width:32px;
    padding:5px 8px;
    background:rgba(var(--accent-rgb),0.06);
    border-color:rgba(var(--accent-rgb),0.2);
    overflow:hidden;
  }
  .topbar-search input{width:0;opacity:0;pointer-events:none;}
  .topbar-search .search-kbd{display:none}
  .topbar-search.expanded{
    flex:1;max-width:none;min-width:0;
    position:absolute;left:0;right:0;top:0;bottom:0;
    z-index:300;border-radius:0;border:none;
    background:rgba(5,8,18,0.98);
    padding:0 16px;
  }
  .topbar-search.expanded input{width:100%;opacity:1;pointer-events:auto;font-size:0.875rem;}
  .topbar-search.expanded #searchIcon{display:none;}
}

/* Session list items */
.session-item{
  padding:9px 12px;
  margin:2px 6px;
  border-radius:8px;
  cursor:pointer;
  transition:background .15s;
  border:1px solid transparent;
}
.session-item:hover{
  background:rgba(var(--accent-rgb),0.08);
  border-color:rgba(var(--accent-rgb),0.15);
}
.session-item.active{
  background:rgba(var(--accent-rgb),0.12);
  border-color:rgba(var(--accent-rgb),0.25);
}
.session-title{
  font-size:0.6875rem;
  color:rgba(255,255,255,0.82);
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:180px;
  line-height:1.4;
}
.session-meta{
  font-size:0.625rem;
  color:var(--text-faint);
  margin-top:2px;
  letter-spacing:.04em;
}

/* Session context menu */
.session-ctx-menu{
  position:fixed;
  background:rgba(10,16,32,0.98);
  border:1px solid rgba(var(--accent-rgb),0.2);
  border-radius:10px;
  padding:5px;
  min-width:150px;
  z-index:9999;
  box-shadow:0 8px 32px rgba(0,0,0,0.5);
  backdrop-filter:blur(20px);
}
.session-ctx-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:7px;
  font-size:0.75rem;color:rgba(255,255,255,0.8);
  cursor:pointer;transition:background .15s;
}
.session-ctx-item:hover{background:rgba(var(--accent-rgb),0.1);color:#fff}
.session-ctx-item.danger{color:#ff5566}
.session-ctx-item.danger:hover{background:rgba(226,104,95,0.12)}
.session-ctx-icon{font-size:0.8125rem;width:18px;text-align:center;flex-shrink:0}
.session-item-wrap{
  position:relative;display:flex;align-items:center;
  padding:9px 12px;margin:2px 6px;border-radius:8px;
  cursor:pointer;transition:background .15s;border:1px solid transparent;
}
.session-item-wrap:hover{background:rgba(var(--accent-rgb),0.08);border-color:rgba(var(--accent-rgb),0.15)}
.session-item-wrap.active{background:rgba(var(--accent-rgb),0.12);border-color:rgba(var(--accent-rgb),0.25)}
.session-item-wrap .session-info{flex:1;min-width:0}
.session-item-wrap .session-title{font-size:0.75rem;color:rgba(255,255,255,0.92);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4}
.session-item-wrap .session-meta{font-size:0.625rem;color:var(--label);margin-top:2px;letter-spacing:.04em}
.session-item-wrap .session-pin{width:4px;height:4px;border-radius:50%;background:var(--accent);margin-right:6px;flex-shrink:0;display:inline-block}
.session-more-btn{
  width:22px;height:22px;border-radius:5px;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,0.3);font-size:0.875rem;
  opacity:0;transition:opacity .15s,background .15s;
  flex-shrink:0;cursor:pointer;
}
.session-item-wrap:hover .session-more-btn{opacity:1}
.session-more-btn:hover{background:rgba(var(--accent-rgb),0.15);color:rgba(255,255,255,0.8)}
.pinned-section{border-bottom:1px solid rgba(var(--accent-rgb),0.08);margin-bottom:4px;padding-bottom:4px}

/* Notification button */
.notif-btn{
  cursor:pointer;
  width:38px;height:38px;min-width:38px;min-height:38px;
  border:1px solid rgba(var(--accent-rgb),0.2);
  border-radius:9px;
  background:rgba(var(--accent-rgb),0.06);
  display:flex;align-items:center;justify-content:center;
  color:var(--label);
  position:relative;
  transition:all .2s;
  flex-shrink:0;
}
.notif-btn:hover{border-color:rgba(var(--accent-rgb),0.45);color:var(--accent);background:rgba(var(--accent-rgb),0.12)}
.notif-btn.has-notif{color:var(--accent);border-color:rgba(var(--accent-rgb),0.4)}
.notif-badge{
  position:absolute;top:-5px;right:-5px;
  background:var(--bad);border-radius:10px;
  min-width:16px;height:16px;
  font-size:0.625rem;font-weight:700;
  color:#fff;display:flex;align-items:center;justify-content:center;
  padding:0 3px;line-height:1;
  border:1.5px solid var(--bg);
}

/* Notification panel */
.notif-panel{
  position:fixed;
  top:52px;right:12px;
  width:340px;
  max-height:480px;
  background:rgba(8,14,30,0.98);
  border:1px solid rgba(var(--accent-rgb),0.2);
  border-radius:14px;
  z-index:5000;
  display:flex;flex-direction:column;
  box-shadow:0 12px 40px rgba(0,0,0,0.5);
  backdrop-filter:blur(24px);
  overflow:hidden;
}
.notif-panel-header{
  padding:14px 16px 10px;
  display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid rgba(var(--accent-rgb),0.1);
  flex-shrink:0;
}
.notif-panel-title{
  display:flex;align-items:center;gap:8px;
  font-size:0.8125rem;font-weight:600;color:rgba(255,255,255,0.9);
}
.notif-tabs{
  display:flex;gap:2px;padding:8px 10px 0;
  border-bottom:1px solid rgba(var(--accent-rgb),0.08);
  flex-shrink:0;
}
.notif-tab{
  padding:5px 12px;border-radius:6px 6px 0 0;
  font-size:0.625rem;color:rgba(255,255,255,0.45);
  cursor:pointer;transition:all .15s;letter-spacing:.04em;
  border-bottom:2px solid transparent;
}
.notif-tab:hover{color:rgba(255,255,255,0.7)}
.notif-tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.notif-list{
  flex:1;overflow-y:auto;padding:6px 0;
  max-height:360px;
}
.notif-item{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 14px;
  border-bottom:1px solid rgba(var(--accent-rgb),0.06);
  transition:background .15s;cursor:pointer;
}
.notif-item:hover{background:rgba(var(--accent-rgb),0.06)}
.notif-item.unread{background:rgba(var(--accent-rgb),0.04)}
.notif-item.unread::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:60%;background:var(--accent);border-radius:0 2px 2px 0}
.notif-item{position:relative}
.notif-icon{
  width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.notif-icon.alert{background:rgba(226,104,95,0.15);color:#ff6677}
.notif-icon.task{background:rgba(58,155,220,0.12);color:var(--accent)}
.notif-icon.system{background:rgba(62,201,138,0.1);color:var(--good)}
.notif-icon.info{background:rgba(109,92,224,0.12);color:#8f80e8}
.notif-body{flex:1;min-width:0}
.notif-title{font-size:0.75rem;font-weight:500;color:rgba(255,255,255,0.88);line-height:1.3}
.notif-msg{font-size:0.6875rem;color:rgba(255,255,255,0.5);margin-top:2px;line-height:1.4}
.notif-time{font-size:0.625rem;color:var(--text-faint);margin-top:4px;letter-spacing:.04em}
.notif-empty{padding:32px 16px;text-align:center;font-size:0.6875rem;color:var(--text-faint);letter-spacing:.06em}

.login-field-group{width:100%;display:flex;flex-direction:column;gap:5px}
.login-label{font-size:0.625rem;color:var(--label);letter-spacing:.08em;font-weight:600;text-transform:uppercase}
.login-pw-wrap{position:relative;width:100%}
.login-pw-wrap .login-input{padding-right:40px}
.login-pw-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--label);cursor:pointer;padding:4px;display:flex;align-items:center;-webkit-tap-highlight-color:transparent}
.login-pw-toggle:hover{color:var(--accent)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Settings: icons, status vocabulary, business form (2026-09-20) ── */
.ico{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ico-xs{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-2px}
.ssi{color:var(--accent)}
.cs{gap:6px}
.cs .dot{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block;flex-shrink:0}
.cs.ok{color:var(--good);border-color:rgba(62,201,138,.4);background:rgba(62,201,138,.06)}
.cs.ok .dot{box-shadow:0 0 6px rgba(62,201,138,.8)}
.cs.no{color:rgba(255,255,255,.5);border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.03)}
.cs.err{color:var(--bad);border-color:rgba(226,104,95,.4);background:rgba(226,104,95,.06)}
.cs.warn{color:var(--warn);border-color:rgba(224,160,58,.4);background:rgba(224,160,58,.06)}
.biz-row{background:rgba(255,255,255,.03);border:1px solid rgba(var(--accent-rgb),.12);border-radius:9px;padding:10px 12px;display:flex;align-items:center;gap:10px;transition:border-color .2s}
.biz-row:hover{border-color:rgba(var(--accent-rgb),.3)}
.biz-ico{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.biz-name{font-size:.75rem;color:rgba(255,255,255,.9);font-weight:600}
.biz-meta{font-size:.625rem;color:var(--label);margin-top:1px}
.biz-actions{display:flex;gap:6px;flex-shrink:0}
.bf{background:rgba(0,0,0,.28);border:1px solid rgba(var(--accent-rgb),.18);border-radius:10px;padding:14px;margin-top:10px;display:flex;flex-direction:column;gap:10px}
.bf-head{display:flex;align-items:center;justify-content:space-between;font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.bf-hint{font-size:.6875rem;color:rgba(255,255,255,.45);line-height:1.5}
.bf-hint code{color:var(--accent);background:rgba(var(--accent-rgb),.08);padding:1px 5px;border-radius:4px}
.bf-actions{display:flex;gap:8px;flex-wrap:wrap}
.pw{position:relative;display:flex}
.pw .si{padding-right:34px;flex:1}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:transparent;border:0;color:var(--label);cursor:pointer;padding:4px;border-radius:5px;display:flex}
.pw-toggle:hover{color:var(--accent);background:rgba(var(--accent-rgb),.1)}
.mtl{display:flex;align-items:center;gap:5px}
.mtl .dot{width:6px;height:6px;border-radius:50%;display:inline-block}
.mt.mt-first{border-left:1px solid rgba(var(--accent-rgb),0.18)}
.metrics::-webkit-scrollbar{height:4px}.metrics::-webkit-scrollbar-thumb{background:rgba(var(--accent-rgb),.25);border-radius:2px}

/* ── Main page round B: business cards, chat polish, smart commands ── */
.typing span{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block;font-size:0;letter-spacing:0;animation:tb 1s ease-in-out infinite}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
.msg-meta{display:flex;align-items:center;gap:10px;margin-top:6px;font-size:.625rem;color:rgba(255,255,255,.35)}
.msg-meta .copy{cursor:pointer;opacity:0;transition:opacity .15s;display:inline-flex;align-items:center;gap:4px;color:var(--text-dim)}
.mj:hover .copy,.mk:hover .copy,.msg-meta .copy:focus{opacity:1}
.tool-row{cursor:pointer}
.tool-row.open .tool-sum{white-space:normal;overflow:visible;text-overflow:clip}
.cb.cb-off{opacity:.42;border-style:dashed}.cb.cb-off:hover{opacity:.75}
.biz-card{display:flex;flex-direction:column;gap:5px;padding:8px 9px;border-radius:9px;border:1px solid var(--line);background:var(--surface);cursor:pointer;margin-bottom:6px;transition:border-color .2s,background .2s}
.biz-card:hover{border-color:var(--line-strong);background:var(--surface-hi)}
.biz-card .biz-top{display:flex;align-items:center;gap:7px}
.biz-card .biz-nm{flex:1}
.biz-kpis{display:flex;gap:10px;flex-wrap:wrap;font-size:.625rem;color:var(--text-dim)}
.biz-kpis b{color:rgba(255,255,255,.9);font-weight:600}
.biz-kpis b{font-variant-numeric:tabular-nums}
.biz-kpis u{color:var(--accent);text-decoration:none}

/* ── Center "today" panel (M2) ── */
.today{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;width:min(720px,100%);margin-top:2px}
.today-tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:9px 11px;min-width:0;transition:border-color .18s,background .18s}
.today-tile[onclick]{cursor:pointer}.today-tile[onclick]:hover{border-color:var(--line-strong);background:var(--surface-hi)}
.today-lbl{font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--label);font-weight:600}
.today-val{font-size:.9375rem;font-weight:600;color:rgba(255,255,255,.92);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.today-sub{font-size:.625rem;color:var(--text-faint);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:480px){.today{grid-template-columns:1fr}}

.chat-divider{font-size:.625rem;color:rgba(255,255,255,.35);text-align:center;padding:4px 8px;letter-spacing:.04em;border-top:1px dashed rgba(var(--accent-rgb),.15);border-bottom:1px dashed rgba(var(--accent-rgb),.15);margin:2px 0}

@media(max-width:768px){.rp{max-width:none}}

/* ── Theme-matched scrollbars (the default white track broke the dark UI on laptop widths) ── */
*{scrollbar-width:thin;scrollbar-color:rgba(var(--accent-rgb),.28) transparent}
*::-webkit-scrollbar{width:6px;height:6px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(var(--accent-rgb),.28);border-radius:3px}
*::-webkit-scrollbar-thumb:hover{background:rgba(var(--accent-rgb),.5)}

/* Google JSON drop zone */
.dropzone{border-radius:var(--radius-sm);transition:box-shadow .2s}
.dropzone.over{box-shadow:0 0 0 2px var(--accent);background:rgba(var(--accent-rgb),.06)}

/* generated images / videos inside chat bubbles */
.gen-media{display:block;max-width:100%;max-height:360px;border-radius:10px;margin:8px 0 2px;border:1px solid rgba(var(--accent-rgb),.25);background:#000}

/* ---- Mobile fixes from the headless phone-width pass (390/412 px) ---- */
@media(max-width:768px){
  /* centered flex column overflowed upward and hid the SYS/NET HUD under the topbar */
  .cp{justify-content:flex-start;padding-top:22px}
  /* the chat bubble sat on the KPI strip; lift it above strip + bottom nav */
  #mobChatFab{bottom:calc(52px + 62px + 12px + env(safe-area-inset-bottom))!important;width:46px!important;height:46px!important}
  .topbar{padding:0 10px}
  .topbar-right{gap:6px}
  /* No max-width here on purpose. These two breakpoints used to narrow the picker to
   * 118px/104px, but an inline max-width:124px on the element silently defeated both
   * for however long they have existed. Measured at 390px with them applying:
   * 'Gemini Flash Lite' needs 85px and only 71px remained — clipped. The inline value
   * was the correct one, so .s-select's 124px now applies at every width and the
   * breakpoints only adjust type and padding. */
  #modelPickerTop{font-size:0.6875rem;padding-right:22px}
}
@media(max-width:480px){
  /* 390 px: avatar was clipped off the right edge */
  .clock{display:none}
  .topbar-right>[title="Refresh metrics"]{display:none}
  /* see the note above: narrowing further clips the longest model name */
  .brand{font-size:1rem;letter-spacing:.2em}
  /* KPI strip: fade hints that it scrolls */
  .metrics{mask-image:linear-gradient(90deg,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}
}

/* Streaming progress: elapsed time and current phase while a reply is being produced */
.stream-status{margin-top:6px;font-size:.6875rem;color:var(--label);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.stream-status.warn{color:var(--warn)}
.stream-status:empty{display:none}
.retry-link{color:var(--accent);text-decoration:underline;cursor:pointer;font-size:.8125rem}

/* ---------------------------------------------------------------------------
   Desktop layout: the centre column was centring a fixed-size stack, which left
   roughly 40% of it empty below the cards while the cards themselves stayed
   narrow. Give the width to the content and let the orb take the slack.
   --------------------------------------------------------------------------- */
@media(min-width:1025px){
  /* space-evenly spreads the orb, state, controls and cards through the column
     instead of stacking them at the top with a dead band in the middle. */
  .cp{justify-content:space-evenly;padding:20px 20px 18px;gap:10px}
  .orb-wrap{width:min(340px,36vh)!important}
  /* Cards use the full column width */
  .today{width:100%;max-width:none;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;
         margin-top:0;padding-bottom:2px}
  .today-tile{min-height:88px;display:flex;flex-direction:column;justify-content:center}
  .today-val{font-size:1.125rem}
  /* Left rail: Memory is pinned to the bottom (margin-top:auto in the markup),
     which is fine — just tighten the rail so the gap above it is smaller. */
  .lp{gap:9px}
}
/* Wide screens: four tiles across rather than two rows of two */
@media(min-width:1500px){
  .today{grid-template-columns:repeat(4,1fr)}
}

/* ---------------------------------------------------------------------------
   Phone layout, from headless captures at 375/390/412:
   - the last card ("Agent activity") was clipped behind the KPI strip because
     .cp's bottom padding (90px) was less than strip + nav + safe area
   - the floating chat bubble covered a card while duplicating the "Chat" tab
     that is already in the bottom nav
   - the orb took ~40% of the viewport, pushing the actual data off screen
   --------------------------------------------------------------------------- */
@media(max-width:768px){
  /* strip (52) + nav (56) + breathing room, so every card can scroll into view */
  .cp{padding-bottom:calc(132px + env(safe-area-inset-bottom))!important}
  /* Orb also bounded by viewport HEIGHT — short phones were losing the content */
  .orb-wrap{width:min(230px,66vw,26vh)!important;height:min(230px,66vw,26vh)!important}
  /* Redundant: the bottom nav already has a Chat tab, and it sat on top of a card */
  #mobChatFab{display:none!important}
  /* Tighter vertical rhythm so more data fits above the fold */
  .today{gap:8px;width:100%}
  .today-tile{min-height:0;padding:10px 12px}
  .today-val{font-size:1rem;line-height:1.25}
  .today-lbl{font-size:.5625rem}
  .today-sub{font-size:.625rem}
  .state-val{font-size:1.125rem}
  .vrow{margin:2px 0}
}
/* Short screens (iPhone SE, landscape). The orb must not shrink below ~190px or the
   four HUD corner labels collide in the middle — shrink their type instead and take
   the space back from padding and gaps. */
@media(max-width:768px) and (max-height:720px){
  .orb-wrap{width:clamp(190px,52vw,210px)!important;height:clamp(190px,52vw,210px)!important}
  .hl{font-size:.5rem;letter-spacing:.06em;line-height:1.5}
  .hl-tl{top:2px;left:2px} .hl-tr{top:2px;right:2px}
  .hl-bl{bottom:2px;left:2px} .hl-br{bottom:2px;right:2px}
  .state-row{margin:0}
  .state-lbl{font-size:.5625rem}
  .cp{gap:6px;padding-top:10px}
  .vb{width:44px;height:44px}
}
/* Very narrow phones: same collision risk at normal height */
@media(max-width:400px){
  .hl{font-size:.5625rem;letter-spacing:.06em}
}

/* Camera / live video: self-view so you always know what Jarvis can see */
/* Hidden by default. This used to be an inline style="display:none" on the element,
 * which beat this ID rule's display:flex; moving it to a class lost that fight and
 * the camera panel appeared on load. openCam()/stopCam() set style.display directly,
 * which is CSSOM and still takes precedence, so the toggle is unaffected. */
#camPanel{width:100%;max-width:420px;margin:0 auto;display:none;flex-direction:column;gap:6px}
#camView{width:100%;border-radius:12px;border:1px solid rgba(var(--accent-rgb),.3);background:#000;
         aspect-ratio:16/9;object-fit:cover;transform:scaleX(-1)}
#camView.rear{transform:none}                 /* only mirror a front-facing camera */
.cam-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.6875rem}
.cam-bar select{flex:1;min-width:120px;background:rgba(255,255,255,.05);color:var(--text);
  border:1px solid rgba(var(--accent-rgb),.25);border-radius:8px;padding:4px 6px;font-size:.6875rem}
#camState{color:var(--label);letter-spacing:.06em;min-width:56px}
#camState.live{color:var(--good)}
@media(max-width:768px){#camPanel{max-width:none}}

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN PASS — one spacing scale, one radius scale, consistent surfaces.
   Radii and paddings had drifted (8/9/10/12/16px, 8/9/10/12/14px) so panels
   read as a collection of separate widgets rather than one instrument.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --r-sm:10px; --r-md:14px; --r-lg:18px;
  --line:rgba(var(--accent-rgb),0.16);
  --line-soft:rgba(var(--accent-rgb),0.09);
  --surface:linear-gradient(180deg,rgba(var(--accent-rgb),0.055),rgba(var(--accent-rgb),0.022));
  --surface-hi:linear-gradient(180deg,rgba(var(--accent-rgb),0.10),rgba(var(--accent-rgb),0.04));
}

/* Surfaces: a single treatment, with a hairline top edge that reads as glass */
.panel,.today-tile,.biz-card,.ss{
  border-radius:var(--r-md);
  border:1px solid var(--line);
  background:var(--surface);
  position:relative;
}
.panel::after,.today-tile::after,.biz-card::after{
  content:'';position:absolute;inset:0 0 auto 0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.35),transparent);
  opacity:.5;
}
.panel{padding:var(--s3) var(--s3)}
.today-tile{padding:var(--s3) var(--s4)}
.biz-card{padding:var(--s3);border-radius:var(--r-sm);gap:var(--s1)}

/* Hover: lift rather than just recolour */
.today-tile,.biz-card,.cb,.conn-chip{transition:border-color .18s,background .18s,transform .18s}
.today-tile:hover,.biz-card:hover{border-color:var(--line-strong);background:var(--surface-hi)}
.cb:hover{transform:translateY(-1px)}

/* Command buttons: even rhythm, no cramped two-line labels */
.cb{padding:var(--s2) var(--s2);border-radius:var(--r-sm);letter-spacing:.04em;white-space:nowrap}

/* Chat bubbles: match the panel radius family */
.mj{border-radius:var(--r-lg) var(--r-lg) var(--r-lg) var(--s1);padding:var(--s3) var(--s4)}
.mk{border-radius:var(--r-lg) var(--r-lg) var(--s1) var(--r-lg);padding:var(--s3) var(--s4)}

/* Left rail: one gap value, and Memory no longer stranded at the bottom */
.lp{gap:var(--s3);padding:var(--s3) var(--s3)}
.lp > .panel[style*="margin-top:auto"]{margin-top:var(--s2)!important}

/* Voice/camera controls: fixed width so labels never wrap to two lines */
.vrow{gap:var(--s3)}
/* Controls: a touch smaller so they read as instruments, not primary actions.
   The label sets the floor — "SOUND ON" at .4375rem needs ~46px of inner width. */
.vb{border-radius:var(--r-md)}
#muteBtn svg,#camBtn svg,#screenBtn svg{width:19px;height:19px}
/* The state word belongs with the controls, not stranded to their right */
#liveStatusLabel{min-width:0!important;margin-left:var(--s1)}

/* Centre column: the orb is an accent, the data is the subject */
@media(min-width:1025px){
  .cp{justify-content:center;gap:var(--s4);padding:var(--s5) var(--s5) var(--s4)}
  .orb-wrap{width:min(260px,26vh)!important}
  .today{grid-template-columns:repeat(4,1fr);gap:var(--s3);width:100%;max-width:none}
  .today-val{font-size:1.1875rem;line-height:1.2}
  .today-lbl{letter-spacing:.1em}
}
@media(min-width:1025px) and (max-width:1340px){
  .today{grid-template-columns:repeat(2,1fr)}
}

/* Phones: tighter rhythm, nothing clipped */
@media(max-width:768px){
  .cp{gap:var(--s2);padding-left:var(--s3);padding-right:var(--s3)}
  .lp{gap:var(--s2);padding:var(--s2)}
  .today{gap:var(--s2)}
  .today-tile{padding:var(--s2) var(--s3)}
  .panel{padding:var(--s2) var(--s3)}
  .vb{width:48px;height:48px}
  #muteBtn svg,#camBtn svg,#screenBtn svg{width:17px;height:17px}
}

/* Long values must shrink, not truncate — "13,203 unpaid invoices" was cut to
   "13,203 unpaid invoi…" on a card wide enough to hold it. */
.today-val{overflow-wrap:anywhere;white-space:normal;text-overflow:clip}
@media(min-width:1025px){
  .today-val{font-size:clamp(0.9375rem,1.15vw,1.1875rem)}
  /* Cards carry the content, so give them height instead of leaving a void below */
  .today-tile{min-height:104px;display:flex;flex-direction:column;justify-content:center;gap:2px}
  /* Stack sits as one block with even air above and below */
  .cp{justify-content:center;gap:var(--s5)}
  .orb-wrap{width:min(240px,24vh)!important}
}
/* The left rail reads top-down; nothing should be pinned to the floor */
.lp > *:last-child{margin-bottom:var(--s2)}

/* Centre column rhythm: the orb had a wide, empty band under it before the state
   word, which made the controls feel detached from what they control. */
@media(min-width:1025px){
  .orb-wrap{margin-bottom:calc(var(--s2) * -1)}
  .state-row{margin-top:0}
  .vrow{gap:var(--s2)}
}

/* The assistant panel is where the reading happens, but it defaulted to 260px —
   text wrapped every few words while the centre column had spare room. Give it a
   comfortable measure on wide screens; the drag handle still overrides this. */
@media(min-width:1280px){ .rp{width:380px} }
@media(min-width:1600px){ .rp{width:440px} }
@media(min-width:1920px){ .rp{width:500px} }

/* ── Tighter information density ──────────────────────────────────────────────
   The cards had grown tall enough that only four fit; smaller type and padding
   leave room for more without losing legibility. The chat column also carried
   more padding than it needed now that it is wider. */
@media(min-width:1025px){
  .today-tile{min-height:0;padding:var(--s2) var(--s3);gap:1px}
  .today-lbl{font-size:.5625rem;letter-spacing:.09em}
  .today-val{font-size:clamp(0.875rem,1vw,1.0625rem);line-height:1.25}
  .today-sub{font-size:.6875rem;opacity:.72}
  .today{gap:var(--s2)}
  /* Controls, one more notch down */
  #muteBtn svg,#camBtn svg,#screenBtn svg{width:17px;height:17px}
  .cp{gap:var(--s3)}
  /* Chat: tighter bubbles and rhythm now that the column is wide */
  .rp .mj,.rp .mk{padding:var(--s2) var(--s3);font-size:.8125rem;line-height:1.5}
  .rp .ml{font-size:.5625rem;letter-spacing:.1em;margin-bottom:2px}
  .rp .msg-meta{font-size:.5625rem;margin-top:3px;opacity:.55}
}
#chatArea{gap:var(--s2)}
.msg-meta{margin-top:4px}

/* ── Notebook ─────────────────────────────────────────────────────────────────
   Three sizes so it fits the task: panel covers the assistant column, page takes
   the working area, full takes the screen. */
.nb{display:none;flex-direction:column;background:linear-gradient(180deg,#070b16,#04070f);
    border-left:1px solid var(--line);z-index:900;overflow:hidden}
.nb.open{display:flex}
.nb[data-mode="panel"]{position:fixed;top:50px;right:0;bottom:0;width:380px}
.nb[data-mode="page"]{position:fixed;top:50px;right:0;bottom:0;left:200px;border-left:1px solid var(--line)}
.nb[data-mode="full"]{position:fixed;inset:0;border-left:none;z-index:1100}
@media(min-width:1280px){ .nb[data-mode="panel"]{width:440px} }
@media(max-width:768px){
  .nb[data-mode="panel"],.nb[data-mode="page"]{top:50px;left:0;right:0;bottom:0;width:auto}
}
.nb-bar{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);
        border-bottom:1px solid var(--line-soft);flex-shrink:0;flex-wrap:wrap}
.nb-title{flex:1;min-width:120px;background:transparent;border:none;outline:none;color:var(--text);
          font-size:.9375rem;font-weight:600;letter-spacing:.01em}
.nb-title::placeholder{color:var(--text-faint)}
.nb-saved{font-size:.625rem;color:var(--text-faint);min-width:52px;text-align:right}
.nb-saved.on{color:var(--c3)}
.nb-tools{display:flex;gap:4px;flex-wrap:wrap}
.nb-tools .sbtn{font-size:.625rem;padding:4px 9px}
.nb-tools .sbtn.active{border-color:var(--c3);color:var(--c3);background:rgba(62,201,138,.1)}
.nb-body{position:relative;flex:1;min-height:0}
.nb-text{position:absolute;inset:0;width:100%;height:100%;resize:none;background:transparent;
         border:none;outline:none;color:var(--text);font-size:.875rem;line-height:1.75;
         padding:var(--s4);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
         caret-color:var(--accent)}
.nb-text::placeholder{color:var(--text-faint)}
.nb-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;touch-action:none}
.nb.pen .nb-canvas{pointer-events:auto;cursor:crosshair}
.nb.pen .nb-text{pointer-events:none}
.nb-list{position:absolute;inset:44px 0 0 0;background:rgba(4,7,16,.99);overflow-y:auto;padding:var(--s3)}
.nb-item{padding:var(--s2) var(--s3);border:1px solid var(--line-soft);border-radius:var(--r-sm);
         margin-bottom:var(--s2);cursor:pointer;transition:border-color .18s,background .18s}
.nb-item:hover{border-color:rgba(var(--accent-rgb),.35);background:rgba(var(--accent-rgb),.05)}
.nb-item b{display:block;font-size:.8125rem;margin-bottom:2px}
.nb-item span{font-size:.6875rem;color:var(--text-dim)}

/* Motion: a changed figure flashes once; everything else stays still. Reduced-motion
   users get the value without the animation. */
@keyframes numChanged{
  0%{color:var(--accent-bright)}
  100%{color:inherit}
}
.num-changed{animation:numChanged .9s ease-out}
/* Panels settle in rather than appearing */
@keyframes riseIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.today-tile,.biz-card{animation:riseIn .35s ease-out both}
.today-tile:nth-child(2){animation-delay:.04s}
.today-tile:nth-child(3){animation-delay:.08s}
.today-tile:nth-child(4){animation-delay:.12s}
/* The orb ring reacts when the camera is live */
/* Entrance animation belongs on the OPEN state only. On the base class it never
   runs (animations do not run on display:none) and, with fill-mode "both", the
   element is left at the animation's FIRST frame — opacity 0 — so the notebook
   opened completely invisible. */
/* Slide, never fade. An overlay whose visibility depends on an opacity animation
   is invisible whenever that animation does not run — throttled tab, reduced motion,
   or simply never started because the element was display:none when the class was
   added. Transform-only means the worst case is "no animation", not "no UI". */
@keyframes slideIn{from{transform:translateY(8px)}to{transform:none}}
.nb.open,.settings-page.open,.page.open{animation:slideIn .2s ease-out}
@media(prefers-reduced-motion:reduce){
  .num-changed,.today-tile,.biz-card,.nb.open,.settings-page.open,.page.open{animation:none!important}
}

/* ── Pages ────────────────────────────────────────────────────────────────────
   Full views that sit above the dashboard. The dashboard itself stays the default
   layout; routing shows one of these over it. */
.page{position:fixed;inset:50px 0 0 0;background:var(--bg);z-index:950;display:none;
      flex-direction:column;overflow:hidden}
.page.open{display:flex}
.page-bar{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s4);
          border-bottom:1px solid var(--line-soft);flex-shrink:0}
.page-title{font-size:.875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
            color:var(--text)}
.page-sub{font-size:.6875rem;color:var(--text-dim);margin-right:auto}
.page-body{flex:1;overflow-y:auto;padding:var(--s4)}
/* A workflow drawn as its chain of steps */
.wf-card{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);
         padding:var(--s3) var(--s4);margin-bottom:var(--s3)}
.wf-head{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2)}
.wf-name{font-size:.9375rem;font-weight:600}
.wf-state{font-size:.5625rem;letter-spacing:.1em;padding:2px 8px;border-radius:999px;
          border:1px solid rgba(255,255,255,.14);color:var(--text-dim)}
.wf-state.on{color:var(--c3);border-color:rgba(62,201,138,.4);background:rgba(62,201,138,.08)}
.wf-flow{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.wf-node{border:1px solid rgba(var(--accent-rgb),.28);background:rgba(var(--accent-rgb),.07);
         border-radius:var(--r-sm);padding:6px 10px;font-size:.75rem;white-space:nowrap}
.wf-node small{display:block;font-size:.5625rem;color:var(--text-faint);letter-spacing:.06em}
.wf-arrow{color:var(--label);font-size:.875rem}
.wf-empty{color:var(--text-faint);font-size:.8125rem}

/* Page headers on a phone: one compact scrolling row instead of a wrapped block
   (measured 59px and two lines at 390px). */
@media(max-width:768px){
  .page-bar{padding:var(--s1) var(--s2);gap:4px;flex-wrap:nowrap;overflow-x:auto;
            scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .page-bar::-webkit-scrollbar{display:none}
  .page-bar .sbtn{font-size:.625rem;padding:4px 8px;white-space:nowrap;flex-shrink:0}
  .page-title{font-size:.75rem;flex-shrink:0}
  .page-sub{font-size:.625rem;white-space:nowrap;flex-shrink:0}
  .page-body{padding:var(--s2)}
  /* Steps read as a vertical chain when there is no room for a horizontal one */
  .wf-flow{flex-direction:column;align-items:stretch;gap:4px}
  .wf-node{white-space:normal}
  .wf-arrow{transform:rotate(90deg);align-self:center;line-height:1}
  .nb-bar{padding:var(--s1) var(--s2);gap:4px}
  .nb-tools .sbtn{font-size:.5625rem;padding:3px 7px}
  .nb-title{font-size:.875rem}
}

/* Overlays sit on their own solid surface — nothing from the dashboard behind. */
.nb,.page,.settings-page{isolation:isolate}
.nb.open,.page.open,.settings-page.open{opacity:1!important}

/* Composer: attach + emoji alongside the input */
.ir{position:relative}
.ib{width:32px;height:32px;flex-shrink:0;border-radius:var(--r-sm);border:1px solid var(--line);
    background:rgba(var(--accent-rgb),.05);display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:border-color .18s,background .18s}
.ib:hover{border-color:rgba(var(--accent-rgb),.4);background:rgba(var(--accent-rgb),.12)}
.attach-bar{display:flex;gap:6px;flex-wrap:wrap;padding:0 var(--s2)}
.attach-bar:not(:empty){padding-bottom:6px}
.att{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
     background:rgba(var(--accent-rgb),.07);border-radius:999px;padding:3px 6px 3px 4px;
     font-size:.6875rem;max-width:200px}
.att img{width:26px;height:26px;object-fit:cover;border-radius:50%}
.att span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att b{cursor:pointer;color:var(--text-faint);padding:0 3px;font-weight:400}
.att b:hover{color:#ff6b6b}
.emoji-pop{display:none;position:absolute;bottom:calc(100% + 8px);left:8px;z-index:60;
  width:246px;max-height:190px;overflow-y:auto;padding:6px;border-radius:var(--r-md);
  border:1px solid var(--line);background:#0a1020;box-shadow:0 12px 32px rgba(0,0,0,.55)}
.emoji-pop.open{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.emoji-pop button{background:none;border:0;font-size:1.05rem;line-height:1;padding:5px;
  border-radius:6px;cursor:pointer}
.emoji-pop button:hover{background:rgba(var(--accent-rgb),.15)}
/* Dropping a file anywhere over the chat */
.rp.dragover{outline:2px dashed rgba(var(--accent-rgb),.6);outline-offset:-6px}

/* A <select> renders as raw OS chrome — the one control in Settings that looked
   unstyled next to everything else. Same surface and hairline as a text field,
   with a drawn caret instead of the platform triangle. */
select.si,select.sk{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:30px;cursor:pointer;font-family:inherit;line-height:1.4;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='rgba(255,255,255,0.45)' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;
}
select.si:focus,select.sk:focus{border-color:rgba(var(--accent-rgb),.5)}
select.si option,select.sk option{background:#12151c;color:var(--text)}

/* The MIC / SOUND / CAM / SCREEN captions. They were 8px accent-at-55% inline,
   which is unreadable on a dark panel; legibility here comes from contrast, and
   the state (on / off / muted) from weight and colour, not from a glow. */
.vbl{font-size:.5625rem;letter-spacing:.06em;font-weight:600;line-height:1;
     color:var(--text-dim);white-space:nowrap}
.vb.on .vbl,.vb:hover .vbl{color:var(--text)}
.vbl.off{color:var(--text-faint)}
.vbl.alert{color:var(--bad)}

/* Amharic speech status — a sentence about what will happen, not a green dot. */
.am-status{font-size:.6875rem;line-height:1.5;color:var(--text-dim)}
.am-status.ready{color:var(--good)}
.am-status.missing{color:var(--warn)}

/* Shown only when the browser refuses to start audio playback. */
.rt-audio-blocked{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  z-index:70;padding:9px 16px;border-radius:var(--r-md);border:1px solid var(--warn);
  background:rgba(224,160,58,.14);color:var(--text);font-size:.75rem;cursor:pointer;
  font-family:inherit}
.rt-audio-blocked:hover{background:rgba(224,160,58,.22)}

/* System check results — one line per check, with the fix when it fails. */
.selfcheck{font-size:.6875rem;line-height:1.6}
.selfcheck .sc-head{color:var(--text);margin-bottom:6px}
.selfcheck .sc-row{display:flex;gap:7px;align-items:flex-start;padding:2px 0}
.selfcheck .sc-mark{flex-shrink:0;width:34px;font-weight:600;letter-spacing:.04em}
.selfcheck .sc-ok .sc-mark{color:var(--good)}
.selfcheck .sc-bad .sc-mark{color:var(--bad)}
.selfcheck .sc-skip .sc-mark{color:var(--text-faint)}
/* A fault only he can clear is still red, but it is not a bug report. Rendering it
 * identically to a software failure is what trains him to stop reading the list. */
.selfcheck .sc-you .sc-mark{color:var(--warn)}
.selfcheck .sc-name{color:var(--text-dim);min-width:150px}
.selfcheck .sc-detail{color:var(--text-faint);flex:1;overflow-wrap:anywhere}
.selfcheck .sc-fix{color:var(--warn);padding:1px 0 4px 41px}

/* ── Servers + terminal ───────────────────────────────────────────────────────
   Reuses the business-row shape so the settings page stays one visual language. */
.srv-state{font-size:0.6875rem;color:rgba(255,255,255,.45);padding:0 0 8px}
.srv-state.warn{color:var(--warn,#e0a03a)}
.srv-hint{font-size:0.625rem;color:rgba(255,255,255,.38);line-height:1.5;margin-top:8px}
.srv-hint code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:rgba(255,255,255,.6)}
.srv-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.srv-row:last-child{border-bottom:0}
.srv-name{font-size:0.75rem;color:rgba(255,255,255,.9);font-weight:500}
.srv-meta{font-size:0.625rem;color:rgba(255,255,255,.4);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

.term-wrap{position:fixed;inset:0;z-index:9000;background:#05070a;display:none;flex-direction:column}
.term-wrap.open{display:flex}
.term-bar{display:flex;align-items:center;gap:8px;padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02)}
.term-title{font-size:0.6875rem;letter-spacing:.08em;color:rgba(255,255,255,.75);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.term-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.25);flex:none}
.term-dot.on{background:var(--good,#3ec98a)}
.term-dot.off{background:var(--bad,#e2685f)}
.term-body{flex:1;min-height:0;padding:6px 8px}
/* Room for the home indicator so the last line is never under it. */
@supports(padding:env(safe-area-inset-bottom)){
  .term-body{padding-bottom:calc(6px + env(safe-area-inset-bottom))}
}

/* Connected Google accounts (study and work live on different accounts) */
.gacct{display:flex;flex-direction:column;gap:var(--s1);margin:var(--s2) 0}
.gacct-row{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
  padding:var(--s2);border:1px solid var(--line);border-radius:var(--r-sm)}
.gacct-mail{font-size:.8125rem;color:var(--text)}
.gacct-tag{font-size:.625rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--label);border:1px solid var(--line);border-radius:var(--r-sm);padding:1px 6px}
.gacct-when{font-size:.6875rem;color:var(--text-faint)}
.gacct-x{margin-left:auto}

/* Two-factor enrolment */
.tfa-qr{display:none;width:220px;height:220px;image-rendering:pixelated;background:#fff;border-radius:var(--r-sm);margin:var(--s2) 0}
.tfa-key{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9375rem;
  letter-spacing:.08em;word-break:break-all;padding:var(--s2);margin:var(--s2) 0;
  border:1px solid var(--line);border-radius:var(--r-sm);background:rgba(255,255,255,.03)}
.tfa-codes{display:flex;flex-wrap:wrap;gap:var(--s1);margin:var(--s2) 0}
.tfa-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8125rem;
  padding:2px 8px;border:1px solid var(--line);border-radius:var(--r-sm)}

/* WhatsApp linking code */
.wa-qr{margin:var(--s3) 0;padding:var(--s3);background:#fff;border-radius:var(--r-md);
  width:max-content;max-width:100%}
.wa-qr img{display:block;width:264px;height:264px;max-width:100%;height:auto}

/* Devices & sessions panel */
.sess-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.sess-row:last-child{border-bottom:none}
.sess-main{min-width:0}
.sess-name{font-size:0.8125rem;color:var(--text);font-weight:600}
.sess-dim{font-size:0.6875rem;color:var(--text-dim);overflow-wrap:anywhere}
.sess-act{flex-shrink:0}