:root { --bg:#04121a; --panel:#071e29; --line:rgba(94,234,212,.26); --ink:#d8f6f1; --dim:#7fb5ad; --acc:#5eead4; --warn:#f5c26b; --bad:#ff8f8f; --ok:#7df0a8; }
* { box-sizing: border-box; }
a { color:var(--acc); }
html, body { margin:0; height:100%; }
html { background:var(--bg); } /* Keep long tables in the selected theme below the viewport. */
body { background:radial-gradient(1200px 600px at 75% -10%, #0b2f3d 0%, var(--bg) 60%); color:var(--ink); font:14px/1.5 system-ui,-apple-system,Segoe UI,sans-serif; }
button, input, select, textarea { font:inherit; color:inherit; }
input, select, textarea { background:#04141c; border:1px solid var(--line); border-radius:4px; padding:7px 9px; width:100%; }
input:focus, select:focus, textarea:focus { outline:1px solid var(--acc); }
input[type=checkbox], input[type=radio] { width:auto; }
.btn { background:#0a2a37; border:1px solid var(--acc); border-radius:4px; padding:6px 13px; cursor:pointer; letter-spacing:.05em; }
.btn:hover { background:#0f3a4b; } .btn:disabled { opacity:.45; cursor:default; }
.btn.p { background:var(--acc); color:#022; font-weight:600; } .btn.g { border-color:var(--line); color:var(--dim); } .btn.d { border-color:var(--bad); color:var(--bad); }
.btn.s { padding:3px 10px; font-size:12px; }
header.top { display:grid; grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr); align-items:center; gap:18px; padding:12px 24px; border-bottom:1px solid var(--line); background:rgba(3,14,19,.7); position:sticky; top:0; z-index:5; }
.brand { letter-spacing:.22em; color:var(--acc); font-weight:600; } .ver { color:var(--dim); font-size:12px; }
nav { display:flex; gap:6px; flex:1; }
header.top nav { flex:none; flex-wrap:wrap; justify-content:center; }
header.top .top-l { display:flex; align-items:center; gap:18px; justify-self:start; }
header.top .top-r { display:flex; align-items:center; gap:12px; justify-self:end; }
/* 20.0.2 tablets, an open Duo, narrow windows: when the one-line bar does not fit (hubTopFit in app.js measures it with
   top-measure), the tabs get their own centred row under the logo and the buttons instead of a tall squeezed column. */
header.top.top-measure nav, header.top.top-measure .top-r { flex-wrap:nowrap; } header.top.top-measure :is(nav, .top-r) > * { white-space:nowrap; }
@media (min-width:701px) {
  header.top.top-stack { grid-template-columns:auto minmax(0,1fr); row-gap:10px; }
  header.top.top-stack .top-r { flex-wrap:wrap; justify-content:flex-end; row-gap:8px; } header.top.top-stack .top-r > * { white-space:nowrap; }
  header.top.top-stack nav { grid-column:1 / -1; grid-row:2; justify-self:center; max-width:100%; }
}
nav button { background:none; border:1px solid transparent; color:var(--dim); padding:5px 14px; cursor:pointer; letter-spacing:.1em; font-size:12px; border-radius:14px; }
nav button[data-on='1'] { color:var(--acc); border-color:var(--acc); background:rgba(94,234,212,.1); }
/* 15.11.1: the page grows with the window (no more narrow column with big empty margins on a large monitor), up to a sensible cap. */
main { padding:20px clamp(16px, 1.6vw, 36px) 60px; max-width:clamp(1300px, 92vw, 2200px); margin:0 auto; }
h2 { margin:0 0 4px; font-size:16px; letter-spacing:.1em; color:var(--acc); } .lead { color:var(--dim); margin:0 0 14px; }
/* One bot (or hub) per line, full width, so names, details and buttons do not wrap. */
.grid { display:grid; grid-template-columns:1fr; gap:12px; }
.grid .card { grid-template-columns:minmax(0,1fr) auto; column-gap:18px; align-items:center; }
.grid .card > h3, .grid .card > div:not(.row) { grid-column:1; min-width:0; }
.grid .card > .row { grid-column:2; grid-row:1 / span 4; justify-content:flex-end; flex-wrap:nowrap; }
/* A tenant card stacks its button rows under the text instead of beside it (several rows would otherwise share one grid cell and overlap). */
.grid .card.tn-card { grid-template-columns:minmax(0,1fr); }
.grid .card.tn-card > .row { grid-column:1; grid-row:auto; justify-content:flex-start; flex-wrap:wrap; }
@media (max-width:1000px) { .grid .card { grid-template-columns:1fr; } .grid .card > .row { grid-column:1; grid-row:auto; justify-content:flex-start; flex-wrap:wrap; } }
.card { background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:14px 16px; display:grid; gap:8px; align-content:start; }
.card h3 { margin:0; font-size:15px; display:flex; gap:10px; align-items:center; }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.dim { color:var(--dim); } .small { font-size:12px; }
.pill { font-size:10px; letter-spacing:.1em; padding:1px 8px; border-radius:10px; border:1px solid var(--line); text-transform:uppercase; }
.pill.running { color:var(--ok); border-color:var(--ok); } .pill.starting { color:var(--warn); border-color:var(--warn); } .pill.crashed { color:var(--bad); border-color:var(--bad); } .pill.stopped { color:var(--dim); }
.login { max-width:380px; margin:12vh auto; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:26px; display:grid; gap:12px; }
.login h1 { margin:0; text-align:center; letter-spacing:.25em; color:var(--acc); font-size:20px; }
label.f { display:grid; gap:3px; font-size:12px; color:var(--dim); letter-spacing:.06em; }
label.c { display:flex; gap:9px; align-items:flex-start; } label.c input { margin-top:4px; }
.msg { min-height:18px; font-size:13px; } .msg.err { color:var(--bad); } .msg.ok { color:var(--ok); }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.6); display:grid; place-items:center; z-index:20; padding:20px; }
.dlg { background:var(--panel); border:1px solid var(--acc); border-radius:8px; padding:20px 22px; width:min(560px,100%); max-height:90vh; overflow:auto; display:grid; gap:11px; grid-template-columns:minmax(0,1fr); }
.dlg > * { min-width:0; } /* 13.8.1: nothing inside a dialog may stretch it wider than the window */
.dlg h3 { margin:0; color:var(--acc); letter-spacing:.1em; font-size:15px; }
pre.log { background:#020b10; border:1px solid var(--line); padding:10px; max-height:55vh; overflow:auto; font:12px/1.4 ui-monospace,Menlo,Consolas,monospace; white-space:pre-wrap; word-break:break-all; margin:0; }
.console { display:grid; grid-template-columns:270px 1fr 300px; gap:14px; height:calc(100vh - 150px); min-height:420px; }
@media (max-width: 1000px) { .console { grid-template-columns:1fr; height:auto; } }
.pane { background:var(--panel); border:1px solid var(--line); border-radius:6px; display:flex; flex-direction:column; min-height:0; }
.pane > .hd { padding:9px 12px; border-bottom:1px solid var(--line); font-size:11px; letter-spacing:.18em; color:var(--acc); }
.list { overflow:auto; flex:1; }
.li { padding:9px 12px; cursor:pointer; border-bottom:1px solid rgba(94,234,212,.1); display:flex; gap:8px; align-items:center; }
.li:hover, .li[data-on='1'] { background:rgba(94,234,212,.09); }
.li .n { flex:1; min-width:0; overflow-wrap:anywhere; white-space:normal; line-height:1.25; }
.li .n .t { display:block; }
.li .n .sub { display:block; margin-top:2px; font-size:11px; letter-spacing:.06em; color:var(--dim); overflow-wrap:anywhere; }
.li .n .sub.tn { color:var(--acc); }
.li .dot { align-self:flex-start; margin-top:5px; }
.list .lh { padding:9px 12px; margin-top:10px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:11px; letter-spacing:.18em; color:var(--acc); }
.dot { width:9px; height:9px; border-radius:50%; background:var(--dim); flex:none; } .dot.running { background:var(--ok); } .dot.starting { background:var(--warn); } .dot.crashed { background:var(--bad); }
.chat { overflow:auto; flex:1; padding:12px; display:grid; gap:10px; align-content:start; }
.m { max-width:88%; padding:8px 12px; border-radius:8px; white-space:pre-wrap; word-break:break-word; }
.m.me { justify-self:end; background:rgba(94,234,212,.14); border:1px solid var(--line); }
.m.bot { justify-self:start; background:#0a2230; border:1px solid var(--line); }
.m.note { justify-self:center; color:var(--dim); font-size:12px; background:none; }
.m.err { color:var(--bad); }
.compose { display:flex; gap:8px; padding:10px; border-top:1px solid var(--line); }
.compose textarea { resize:none; height:44px; }
.bus { overflow:auto; flex:1; padding:6px 0; }
.bus .e { padding:6px 12px; border-bottom:1px solid rgba(94,234,212,.08); font-size:12px; }
.bus .e b { color:var(--acc); font-weight:500; }
.sec { margin:18px 0 6px; font-size:12px; letter-spacing:.2em; color:var(--acc); }
.two { display:grid; grid-template-columns:1fr 1fr; gap:10px; } @media (max-width:700px) { .two { grid-template-columns:1fr; } }
.warn { border:1px solid var(--warn); color:var(--warn); border-radius:5px; padding:8px 11px; font-size:13px; }

/* ------------------------------------------------------------- console (chat, history, log) */
.cx-head { display:flex; align-items:center; gap:10px; }
.cx-tabs { display:flex; gap:4px; } .cx-tabs button { background:none; border:1px solid transparent; color:var(--dim); padding:3px 11px; cursor:pointer; letter-spacing:.1em; font-size:11px; border-radius:12px; }
.cx-tabs button[data-on='1'] { color:var(--acc); border-color:var(--acc); background:rgba(94,234,212,.1); }
.cx-scroll { flex:1; min-height:0; overflow:auto; }
.cx-chat { padding:12px; display:grid; gap:10px; align-content:start; position:relative; }
.cx-chat .m { position:relative; }
.cx-chat .m.cx-drafting { display:flex; align-items:center; gap:10px; min-height:38px; padding:0; border:0; background:none; color:var(--acc); font-size:13px; }
.cx-draft-avatar { display:inline-flex; flex:none; line-height:0; animation:cxDraftPulse 1.8s ease-in-out infinite; }
.cx-draft-avatar .bi-avatar { width:36px; height:36px; }
.cx-draft-text { min-width:0; overflow-wrap:anywhere; }
@keyframes cxDraftPulse { 50% { transform:scale(1.08); opacity:.72; } }
@media (prefers-reduced-motion: reduce) { .cx-draft-avatar { animation:none; } }
.cx-msgbody { display:block; min-width:0; overflow-wrap:anywhere; }
.cx-msgtools { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:10px; padding-top:8px; border-top:1px solid var(--line); white-space:normal; }
.cx-msgpage { color:var(--dim); font-size:11px; letter-spacing:.08em; }
.cx-say { background:none; border:0; cursor:pointer; opacity:.35; font-size:12px; padding:2px 4px; } .cx-say:hover { opacity:1; }
/* 19.13.1 copy and read-aloud sit together at the bubble's bottom right; brighter while the bubble is hovered */
.cx-acts { position:absolute; right:6px; bottom:3px; display:inline-flex; gap:2px; }
.cx-copy { background:none; border:0; cursor:pointer; opacity:.35; font-size:13px; padding:2px 4px; color:var(--ink); line-height:1; } .cx-copy:hover, .cx-copy:focus-visible { opacity:1; }
.cx-chat .m:hover .cx-acts > button { opacity:.75; }
.cx-empty { color:var(--dim); padding:18px; text-align:center; line-height:1.6; }
.cx-hintbar { display:flex; align-items:center; flex-wrap:wrap; gap:2px; padding:5px 12px; font-size:12px; border-top:1px solid var(--line); }
kbd { border:1px solid var(--line); border-radius:3px; padding:0 5px; font:11px ui-monospace,Menlo,Consolas,monospace; color:var(--acc); }
.cx-hint { background:none; border:0; color:var(--ink); cursor:pointer; font-size:12px; padding:0; } .cx-hint.off { color:var(--dim); text-decoration:line-through; }
.cx-micstate { margin-left:10px; font-size:12px; color:var(--dim); } .cx-micstate.on { color:var(--ok); } .cx-micstate.bad { color:var(--bad); }
.cx-chips { display:flex; flex-wrap:wrap; gap:6px; padding:0 12px; }
.cx-chip { display:flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:12px; padding:2px 4px 2px 10px; font-size:12px; } .cx-chip[data-bad='1'] { border-color:var(--bad); color:var(--bad); }
.cx-chip button { background:none; border:0; color:inherit; cursor:pointer; font-size:14px; }
.cx-chip-preview,.uc-chip-preview { width:56px; height:56px; object-fit:cover; border-radius:8px; background:var(--panel); border:1px solid var(--line); flex:none; }
.cx-bot-avatar { position:relative; display:inline-flex; flex:none; line-height:0; }
.cx-bot-dot { position:absolute; top:-2px; right:-3px; width:11px; height:11px; border-radius:50%; background:#288dff; border:2px solid var(--panel); box-shadow:0 0 0 1px rgba(40,141,255,.45); }
.cx-chip:has(.cx-chip-preview),.uc-chip:has(.uc-chip-preview) { padding:4px; border-radius:10px; max-width:100%; }
.cx-chip span,.uc-chip span { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.cx-compose { display:flex; gap:8px; padding:10px; border-top:1px solid var(--line); align-items:flex-end; } .cx-compose textarea { resize:none; min-height:64px; flex:1; }
.cx-mic[data-on='1'] { background:var(--bad); border-color:var(--bad); color:#fff; animation:cxPulse 1.1s ease-in-out infinite; }
@keyframes cxPulse { 50% { opacity:.65 } }
.cx-drop { position:absolute; inset:46px 0 0 0; display:grid; place-items:center; background:rgba(4,18,26,.88); border:2px dashed var(--acc); color:var(--acc); letter-spacing:.3em; z-index:4; pointer-events:none; }
.pane { position:relative; }
.cx-bar { display:flex; gap:12px; align-items:center; padding:8px 12px; border-bottom:1px solid var(--line); } .cx-search { flex:1; }
.cx-histrow { display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid rgba(94,234,212,.1); } .cx-histrow[data-on='1'] { background:rgba(94,234,212,.08); }
.cx-histmain { flex:1; min-width:0; cursor:pointer; } .cx-histtitle { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cx-actrow { all:unset; display:grid; grid-template-columns:110px 96px 1fr; gap:2px 10px; padding:8px 12px; border-bottom:1px solid rgba(94,234,212,.1); cursor:pointer; border-left:3px solid transparent; width:calc(100% - 15px); }
.cx-actrow:hover { background:rgba(94,234,212,.07); } .cx-actrow[data-status='failed'] { border-left-color:var(--bad); }
.cx-when { color:var(--dim); font-size:12px; } .cx-kind { color:var(--acc); font-size:10.5px; letter-spacing:.14em; padding-top:2px; } .cx-title { min-width:0; } .cx-src { grid-column:3; color:var(--dim); font-size:11.5px; }
.cx-sug { border:1px solid var(--line); border-radius:6px; padding:9px 11px; display:grid; gap:6px; margin-top:6px; }
/* ------------------------------------------------------------- report templates */
.rt-grid { display:grid; grid-template-columns:280px minmax(0,1fr); gap:16px; align-items:start; } @media (max-width:1000px) { .rt-grid { grid-template-columns:1fr; } }
.rt-list { display:grid; gap:10px; align-content:start; }
.rt-card { cursor:pointer; } .rt-card[data-on='1'] { border-color:var(--acc); background:rgba(94,234,212,.08); }
.rt-sw { width:16px; height:16px; border-radius:4px; border:1px solid rgba(255,255,255,.3); display:inline-block; }
.rt-form { gap:12px; }
.rt-colors { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; }
.rt-logo { max-height:54px; max-width:200px; background:#fff; padding:4px; border-radius:4px; }
.rt-scope { display:grid; gap:4px; max-height:130px; overflow:auto; }
.rt-params { display:grid; gap:6px; } .rt-param { display:flex; gap:6px; align-items:center; flex-wrap:wrap; } .rt-param input { flex:1; min-width:110px; }
.rt-frame { width:100%; height:720px; border:1px solid var(--line); border-radius:6px; background:#fff; }

.rt-learn{margin-bottom:14px}.rt-learn input[type=text],.rt-learn>input{width:100%;margin:8px 0}
.rt-drop{border:2px dashed var(--line,#2a4a55);border-radius:8px;padding:22px;text-align:center;cursor:pointer;position:relative}
.rt-drop[data-on="1"]{border-color:var(--accent,#0aa5a5);background:rgba(10,165,165,.08)}
.rt-drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}

.subnav{display:flex;flex-wrap:wrap;gap:0 2px;margin-bottom:14px;border-bottom:1px solid var(--line,#2a4a55)} /* 14.0.3: wraps onto more rows instead of spilling sideways */
.subnav button{background:none;border:0;color:inherit;padding:8px 12px;white-space:nowrap;cursor:pointer;opacity:.6;font:inherit;letter-spacing:.06em}
.subnav button[data-on="1"]{opacity:1;border-bottom:2px solid var(--accent,#0aa5a5)}
.ig-card{margin:8px 0}.ig-fields{margin:6px 0;word-break:break-all}.ig-form{margin:12px 0}
.ig-scroll{overflow-x:auto}.ig-matrix{width:100%;border-collapse:collapse}.ig-matrix th,.ig-matrix td{padding:6px 8px;text-align:left;vertical-align:middle}
.ig-matrix select{max-width:220px}.ig-restart{display:flex;align-items:center;gap:12px;justify-content:space-between}

.up-notes{white-space:pre-wrap;background:rgba(0,0,0,.25);padding:10px;border-radius:6px;max-height:240px;overflow:auto;font-family:inherit;font-size:13px}
.up-steps{margin:8px 0;padding-left:18px}.up-steps li{margin:3px 0;font-size:13px}.up-hist{margin:6px 0}.up-preview,.up-progress{margin:12px 0}

.ig-pick-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0}.ig-pick-row select{max-width:240px}

.pg-card{margin:10px 0}.pg-url{font-family:monospace;word-break:break-all;opacity:.85;margin:4px 0}.pg-subs{margin-top:10px;border-top:1px solid var(--line,#2a4a55);padding-top:8px}.pg-sub{margin:8px 0;padding:8px;background:rgba(0,0,0,.2);border-radius:6px}.pg-edit{margin:12px 0}

.pp textarea{width:100%}.pp-note{margin:8px 0;padding:8px;background:rgba(0,0,0,.2);border-radius:6px}.pp-note input[type=text],.pp-note>input{width:100%;margin:4px 0}.pp-note textarea{font-size:12px}

.ab-card{margin:12px 0}.ab-ops{max-height:260px;overflow:auto;margin:8px 0;padding:8px;background:rgba(0,0,0,.2);border-radius:6px}.ab-op{margin:6px 0}.ab-picks{margin:6px 0 6px 22px}

.ig-bot{margin:8px 0}.ig-brows{margin:8px 0}.ig-brow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.05)}.ig-brow select{max-width:260px}.ig-find{width:100%;margin:8px 0}.ab-radios{display:flex;flex-direction:column;gap:6px;margin:6px 0}.pill+.pill,.ig-brow .pill,.ig-pick-row .pill{margin-left:8px}

/* Console chat: the same look as the bot's own chat (teal glowing input bar, uppercase hint line, matching mic states) */
.cx-hintbar { justify-content:center; gap:10px; padding:6px 12px 0; border-top:0; }
.cx-pill { display:inline-block; padding:4px 12px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#d9f4f6; background:rgba(3,12,16,.78); border:1px solid color-mix(in srgb, var(--acc) 28%, transparent); }
.cx-pill kbd { font-size:10px; color:#fff; border-color:color-mix(in srgb, var(--acc) 70%, transparent); }
.cx-hint { color:inherit; letter-spacing:inherit; text-transform:uppercase; font:inherit; }
.cx-hint:hover { color:#fff; }
.cx-hint.off, .cx-hint.muted { color:#ff8a8a; text-decoration:none; } .cx-hint.muted kbd { border-color:#ff8a8a; color:#ff8a8a; }
.cx-src { opacity:.6; } .cx-micstate { margin-left:8px; color:#7dffb2; }
.cx-compose { margin:8px 10px 10px; padding:8px 10px; gap:8px; align-items:flex-end; border:1px solid color-mix(in srgb, var(--acc) 40%, transparent); background:rgba(2,10,12,.78); box-shadow:0 0 24px color-mix(in srgb, var(--acc) 14%, transparent); }
.cx-compose:focus-within { border-color:var(--acc); }
.cx-compose textarea { flex:1; min-height:64px; resize:vertical; max-height:320px; font:inherit; font-size:13px; line-height:1.5; color:#e8fdff; background:transparent; border:0; outline:0; padding:3px 2px; }
.cx-compose textarea::placeholder { color:var(--acc); opacity:.45; }
.cx-btn { all:unset; cursor:pointer; flex:none; padding:3px 9px; font-size:11px; letter-spacing:.14em; color:var(--acc); border:1px solid color-mix(in srgb, var(--acc) 35%, transparent); display:inline-flex; align-items:center; justify-content:center; }
.cx-btn:hover { background:color-mix(in srgb, var(--acc) 16%, transparent); }
.cx-btn[disabled] { opacity:.35; cursor:default; }
.cx-hintbar .cx-btn { padding:3px 9px; }
.cx-mic { padding:5px 9px; color:#cfe6ff; border-color:rgba(160,200,255,.35); }
.cx-mic[data-on='1'] { color:#7dffb2; border-color:rgba(125,255,178,.8); background:rgba(125,255,178,.08); box-shadow:0 0 12px rgba(125,255,178,.35); animation:cxPulse 1.1s ease-in-out infinite; }

.dg-banner{display:flex;gap:12px;align-items:center;padding:8px 18px;background:rgba(224,160,64,.14);border-bottom:1px solid #e0a040;cursor:pointer;color:#f0cf94}
.dg-card{border-color:#e0a040}.dg-text{white-space:pre-wrap;margin:8px 0;color:#aacfca;max-height:200px;overflow:auto}
.dg-log{border-left:2px solid rgba(94,234,212,.28);padding:2px 0 2px 10px;margin:6px 0;font-size:12px}
.dg-panel{border-top:1px dashed rgba(94,234,212,.28);margin-top:10px;padding-top:8px}.dg-route select{max-width:260px}
.pill.warn{color:#e0a040;border-color:#e0a040}.pill.bad{color:#ff7a7a;border-color:#ff7a7a}.pill.ok{color:#7dffb2;border-color:#7dffb2}

/* 6.0 rooms (hub side) */
.wr-hubcard { margin:12px 0; } .wr-pass { font:600 14px ui-monospace,Menlo,Consolas,monospace; letter-spacing:.12em; padding:1px 8px; border:1px solid var(--line); border-radius:4px; }
.wr-inv { display:grid; gap:4px; max-height:300px; overflow:auto; } .wr-inv-row { display:grid !important; grid-template-columns:auto minmax(0,1fr) auto auto; gap:10px; align-items:center !important; padding:3px 0; border-bottom:1px solid rgba(255,255,255,.05); } .wr-inv-n { min-width:0; overflow-wrap:anywhere; }
.wr-pick { display:grid; gap:3px; max-height:200px; overflow:auto; margin:4px 0 8px; } .wr-pick label.c { align-items:center; }
.wr-sug details { margin:6px 0; } .wr-sug summary { cursor:pointer; color:var(--acc); }
.wr-autorow { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:6px 0; border-bottom:1px solid rgba(255,255,255,.06); } .wr-autorow input[type=number], .wr-autorow select { width:auto; }
.pg-paused{opacity:.75;border-left:3px solid #e0a040}

/* Brand: the logo mark on its own */
.logo-img { height:30px; width:auto; display:block; }
header.top .brand.logo { letter-spacing:normal; font-weight:normal; display:flex; align-items:center; }
.login h1.logo { letter-spacing:normal; display:flex; justify-content:center; }
.login h1.logo .logo-img { height:40px; }

/* Bot-to-bot entries in the console chat and the hub channel: collapsed, FROM -> TO, open for the full text. */
.peer-card { justify-self:stretch; border:1px solid var(--line); border-left:3px solid var(--acc); border-radius:6px; background:rgba(94,234,212,.06); padding:6px 10px; font-size:12px; }
.peer-card[data-kind='message'] { border-left-color:rgba(94,234,212,.5); }
/* 19.20.0 bot-to-bot direction: sent = light green, received = light blue (tints, so the theme's own ink stays readable) */
.peer-card[data-dir='out'], html[data-theme] .peer-card[data-dir='out'] { background:rgba(52,199,89,.11); border-color:rgba(52,199,89,.38); border-left-color:rgba(52,199,89,.85); }
.peer-card[data-dir='in'], html[data-theme] .peer-card[data-dir='in'] { background:rgba(64,156,255,.11); border-color:rgba(64,156,255,.38); border-left-color:rgba(64,156,255,.85); }
.peer-card[data-dir] .peer-body { border-top-color:currentColor; border-top-color:color-mix(in srgb, currentColor 18%, transparent); }
.peer-card summary, details.e summary { cursor:pointer; list-style:none; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
.peer-card summary::-webkit-details-marker, details.e summary::-webkit-details-marker { display:none; }
.peer-card summary::before, details.e summary::before { content:'\25B8'; opacity:.7; }
.peer-card[open] summary::before, details.e[open] summary::before { content:'\25BE'; }
.peer-tag { font-size:10px; letter-spacing:.14em; color:var(--dim); }
.peer-tag.bq-raise { color:var(--bad); font-weight:700; } /* 19.18.0 a bot request that gives a bot more power */
.peer-preview { flex-basis:100%; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
details[open] > summary .peer-preview { display:none; }
.peer-body { margin-top:6px; padding-top:6px; border-top:1px solid var(--line); white-space:pre-wrap; word-break:break-word; max-height:45vh; overflow:auto; user-select:text; }

/* HUD: a report, PDF or image over the whole console */
.hud-card { all:unset; box-sizing:border-box; cursor:pointer; justify-self:stretch; display:flex; align-items:center; gap:10px; border:1px solid var(--acc); border-radius:6px; background:rgba(94,234,212,.1); padding:8px 12px; font-size:13px; }
.hud-card:hover { background:rgba(94,234,212,.2); }
.hud-ico { font-size:18px; color:var(--acc); } .hud-t { flex:1; }
.hud-overlay { position:fixed; left:9vw; top:6vh; width:82vw; height:86vh; min-width:340px; min-height:220px; max-width:100vw; max-height:100vh; z-index:60; display:flex; flex-direction:column; background:rgba(2,10,15,.97); border:1px solid var(--acc); border-radius:8px; box-shadow:0 14px 50px rgba(0,0,0,.65); overflow:hidden; resize:both; }
.hud-overlay.hud-max { left:0!important; top:0!important; width:100vw!important; height:100vh!important; border-radius:0; border-width:0; resize:none; }
.hud-head { display:flex; align-items:center; gap:10px; padding:10px 18px; border-bottom:1px solid var(--line); background:rgba(3,14,19,.9); cursor:grab; user-select:none; touch-action:none; }
.hud-head[data-drag='1'] { cursor:grabbing; }
.hud-head button, .hud-head a { cursor:pointer; }
.hud-title { color:var(--acc); letter-spacing:.12em; font-size:13px; font-weight:600; white-space:nowrap; max-width:30vw; overflow:hidden; text-overflow:ellipsis; }
.hud-tabs { display:flex; gap:6px; overflow:auto; }
.hud-tabs button { background:none; border:1px solid var(--line); color:var(--dim); padding:3px 12px; border-radius:14px; cursor:pointer; font-size:12px; white-space:nowrap; }
.hud-tabs button[data-on='1'] { color:var(--acc); border-color:var(--acc); background:rgba(94,234,212,.1); }
.hud-head a.btn { text-decoration:none; color:inherit; }
.hud-body { flex:1; min-height:0; padding:12px 18px 18px; display:flex; }
.hud-frame { flex:1; width:100%; border:1px solid var(--line); border-radius:6px; background:#fff; }
.hud-img { max-width:100%; max-height:100%; margin:auto; object-fit:contain; }

/* What the AI in this chat is doing right now */
.cx-status { margin:0 0 6px; }
.cx-statusrow { display:flex; align-items:center; gap:10px; padding:6px 12px; border:1px solid var(--line); border-radius:6px; background:rgba(94,234,212,.07); font-size:12px; }
.cx-stxt { flex:1; color:var(--ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cx-clock { color:var(--dim); font-variant-numeric:tabular-nums; }
.cx-spin { width:12px; height:12px; border:2px solid var(--line); border-top-color:var(--acc); border-radius:50%; animation:cxspin .9s linear infinite; flex:none; }
@keyframes cxspin { to { transform:rotate(360deg); } }
/* 15.14.0 several answers at once: one line each; a second line says what this step is and turns amber when the bot goes silent */
.cx-status { display:grid; gap:4px; }
.cx-stxt { display:flex; flex-direction:column; gap:1px; }
.cx-ssub { color:var(--dim); font-size:11px; white-space:normal; }
.cx-statusrow[data-stalled='1'] { border-color:var(--warn); background:rgba(245,194,107,.1); }
.cx-statusrow[data-stalled='1'] .cx-ssub { color:var(--warn); }
.cx-statusrow[data-stalled='1'] .cx-spin { border-top-color:var(--warn); animation-duration:2.4s; }
.cx-helper { font-size:10px; letter-spacing:.12em; color:var(--dim); margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cx-update-link { display:block; margin-top:8px; padding:3px 0; border:0; background:none; color:var(--accent); font:inherit; font-size:11px; font-weight:700; cursor:pointer; text-align:left; }
.cx-update-link:hover, .cx-update-link:focus-visible { text-decoration:underline; }
/* 19.27.0 several answers in one chat: each worker has a number and a colour (console.js conWorkerMarks, the phone uses the same palette). */
.cx-w1 { --cx-wc:#2fb3a5; } .cx-w2 { --cx-wc:#e0a33a; } .cx-w3 { --cx-wc:#7c8cf0; } .cx-w4 { --cx-wc:#d0658f; } .cx-w5 { --cx-wc:#5cb85c; } .cx-w6 { --cx-wc:#b07cd8; }
.cx-wdot { flex:none; width:8px; height:8px; border-radius:50%; background:var(--cx-wc, var(--acc)); }
.cx-whead, .cx-wstub { display:flex; align-items:center; gap:7px; max-width:100%; min-width:0; border:0; background:none; padding:2px 0; font:inherit; font-size:11.5px; line-height:1.35; color:var(--dim); cursor:pointer; text-align:left; }
.cx-whead { margin:0 0 5px; color:var(--ink); font-weight:600; }
.cx-wstub { width:fit-content; justify-self:end; margin:-2px 4px 6px; padding:3px 10px; border:1px dashed color-mix(in srgb, var(--cx-wc, var(--acc)) 55%, transparent); border-radius:999px; background:color-mix(in srgb, var(--cx-wc, var(--acc)) 8%, transparent); }
.cx-wtxt { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cx-whead:hover .cx-wtxt, .cx-wstub:hover .cx-wtxt, .cx-whead:focus-visible .cx-wtxt, .cx-wstub:focus-visible .cx-wtxt { text-decoration:underline; }
.cx-wchip { flex:none; display:inline-block; margin-left:6px; padding:0 6px; border-radius:999px; font-size:10.5px; font-weight:700; line-height:16px; color:var(--ink); background:color-mix(in srgb, var(--cx-wc, var(--acc)) 26%, transparent); border:1px solid color-mix(in srgb, var(--cx-wc, var(--acc)) 65%, transparent); }
.cx-statusrow[class*="cx-w"]:not([data-stalled="1"]) .cx-spin { border-top-color:var(--cx-wc, var(--acc)); }
.uc-log > .cx-wstub { margin:2px 4px 8px auto; }
.cx-jumped { outline:2px solid var(--accent); outline-offset:3px; }
/* 15.14.0 the bot is waiting for your approval: a card that cannot be missed, with APPROVE / DENY */
.appr-card { justify-self:stretch; border:1px solid var(--warn); border-left:4px solid var(--warn); border-radius:8px; background:rgba(245,194,107,.1); padding:10px 14px; display:grid; gap:6px; font-size:13px; }
.appr-card[data-state='approved'] { border-color:var(--ok); background:rgba(125,240,168,.07); }
.pcd-amt { font-size:22px; font-weight:700; letter-spacing:.01em; } /* 19.24.0 payment card: the amount */
.appr-card[data-state='denied'], .appr-card[data-state='expired'], .appr-card[data-state='gone'] { border-color:var(--line); background:rgba(127,181,173,.06); opacity:.85; }
.appr-head { display:flex; align-items:center; gap:10px; }
.appr-head b { flex:1; color:var(--warn); letter-spacing:.04em; }
.appr-card:not([data-state='waiting']) .appr-head b { color:var(--ink); }
.appr-ico { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-weight:700; background:var(--warn); color:#221; flex:none; }
.appr-card[data-state='approved'] .appr-ico { background:var(--ok); }
.appr-card[data-state='denied'] .appr-ico, .appr-card[data-state='expired'] .appr-ico, .appr-card[data-state='gone'] .appr-ico { background:var(--dim); }
.appr-card[data-state='waiting'] .appr-ico { animation:apprpulse 1.6s ease-in-out infinite; }
@keyframes apprpulse { 50% { box-shadow:0 0 0 6px rgba(245,194,107,.18); } }
.appr-title { font-weight:600; color:var(--ink); }
.appr-detail { color:var(--dim); font-family:ui-monospace, Consolas, monospace; font-size:12px; word-break:break-all; }
.appr-btns { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:2px; }
.appr-msg { color:var(--bad); font-size:12px; }
html[data-simple] .appr-card[data-state='waiting'] .appr-ico { animation:none; }

/* marketplace */
.mk-dlg { width: min(1100px, 96vw); max-height: 92vh; }
.mk-search { width: 100%; }
.mk-body { display: grid; grid-template-columns: 200px 1fr; gap: 14px; min-height: 320px; }
.mk-cats { display: flex; flex-direction: column; gap: 4px; }
.mk-cat { all: unset; cursor: pointer; padding: 7px 10px; border-radius: 6px; border: 1px solid transparent; font-size: 13px; }
.mk-cat:hover { background: rgba(255,255,255,.06); }
.mk-cat.on { border-color: var(--acc); background: rgba(255,255,255,.08); color: var(--acc); }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; align-content: start; }
.mk-card { border: 1px solid rgba(255,255,255,.14); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 7px; background: rgba(255,255,255,.03); }
.mk-name { cursor: pointer; font-size: 15px; }
.mk-name:hover { color: var(--acc); }
.mk-desc { font-size: 13px; }
.mk-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.mk-tag { font-size: 11px; border: 1px solid rgba(255,255,255,.2); border-radius: 10px; padding: 1px 8px; opacity: .85; }
@media (max-width: 760px) { .mk-body { grid-template-columns: 1fr; } .mk-cats { flex-direction: row; flex-wrap: wrap; } }

.mk-tabs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 6px; }
.mk-tab { all: unset; cursor: pointer; padding: 6px 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,.15); font-size: 13px; display: inline-flex; gap: 8px; align-items: center; }
.mk-tab:hover { background: rgba(255,255,255,.06); }
.mk-tab.on { border-color: var(--acc); color: var(--acc); background: rgba(255,255,255,.08); }
.mk-plus { font-size: 17px; line-height: 1; padding: 4px 11px; }
.mk-x { opacity: .55; cursor: pointer; padding: 0 2px; } .mk-x:hover { opacity: 1; color: #f77; }

/* Tenant pairings */
.pr-tbl { width:100%; border-collapse:collapse; font-size:12px; margin:6px 0 10px; }
.pr-tbl th { text-align:left; color:var(--dim); letter-spacing:.12em; font-weight:500; padding:4px 8px; border-bottom:1px solid rgba(94,234,212,.2); }
.pr-tbl td { padding:5px 8px; border-bottom:1px solid rgba(94,234,212,.08); }
.pr-tbl td input[type=checkbox] { margin:0 auto; display:block; }
.pr-tbl th + th, .pr-tbl td + td { text-align:center; } .pr-log th + th, .pr-log td + td { text-align:left; }
.pr-log tr.pr-blocked td { color:var(--bad); } .pr-log tr.pr-error td { color:var(--warn); } .pr-log .pr-text { color:var(--dim); font-family:monospace; white-space:pre-wrap; word-break:break-word; }
.pr-steps { display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 10px; } .pr-step { font-size:11px; letter-spacing:.1em; color:var(--dim); padding:2px 8px; border:1px solid transparent; border-radius:10px; }
.pr-step[data-on='1'] { color:var(--acc); border-color:var(--acc); } .pr-step[data-on='d'] { color:var(--ok); }
.pr-code { font:700 30px monospace; letter-spacing:.3em; text-align:center; padding:16px; margin:10px 0; border:1px dashed var(--acc); border-radius:10px; user-select:all; }
.pr-codeinline { font-family:monospace; letter-spacing:.15em; user-select:all; }
.pr-card { cursor:pointer; } .pr-card:hover { border-color:var(--acc); }
.pr-svc { margin:8px 0; } .three { display:grid; grid-template-columns:1fr 1.4fr 1fr; gap:10px; } @media (max-width:800px) { .three { grid-template-columns:1fr; } }

/* Console sidebar tabs, message channels */
.pane > .hd.cx-head { display:flex; align-items:center; gap:6px; letter-spacing:normal; }
.li .hash { color:var(--acc); font-size:16px; align-self:flex-start; width:10px; text-align:center; }
.li-x { background:none; border:0; color:var(--dim); cursor:pointer; font-size:16px; line-height:1; padding:2px 6px; border-radius:4px; opacity:0; align-self:flex-start; }
.li:hover .li-x, .li-x:focus { opacity:1; }
/* 15.4.1 open a bot's own screen, on its tile in MESSAGES */
.li-open { background:none; border:0; color:var(--dim); cursor:pointer; padding:3px 5px; border-radius:6px; align-self:flex-start; margin-left:auto; display:inline-flex; align-items:center; flex:none; }
.li-open:hover:not(:disabled), .li-open:focus-visible { color:var(--acc); background:rgba(127,127,127,.14); }
.li-open:disabled { opacity:.35; cursor:default; } .li-x:hover { color:#ff7a7a; background:rgba(255,122,122,.12); }
.cx-plus { font-size:16px; line-height:1; padding:2px 10px; }
.cx-who { font-size:11px; letter-spacing:.08em; color:var(--acc); margin-bottom:2px; }
/* 13.5.0: which AI a bot runs on, a small line under its name */
.ai-tag { display:block; font-size:10.5px; letter-spacing:.04em; font-weight:400; text-transform:none; color:var(--dim); opacity:.9; margin-top:1px; overflow-wrap:anywhere; }
.cx-who .ai-tag { margin-top:0; }
.cx-tt { display:flex; flex-direction:column; min-width:0; }
.card .ai-tag { margin:-4px 0 6px; font-size:11.5px; }
.cx-pick { max-height:240px; overflow:auto; border:1px solid var(--line); border-radius:6px; padding:6px 10px; display:grid; gap:4px; }
.cx-empty.small { padding:14px 12px; }
.tbl { width:100%; border-collapse:collapse; font-size:12.5px; margin:8px 0; } .tbl th { text-align:left; color:var(--acc); font-size:11px; letter-spacing:.1em; padding:6px 8px; border-bottom:1px solid var(--line); } .tbl td { padding:6px 8px; border-bottom:1px solid rgba(94,234,212,.1); vertical-align:top; overflow-wrap:anywhere; }

/* 10.0 Code library */
.cd-pre { font-family: var(--mono, ui-monospace, Menlo, Consolas, monospace); font-size: 12.5px; line-height: 1.45; background: var(--field, #04141c); border: 1px solid var(--line, rgba(94,234,212,.26)); border-radius: 6px; padding: 10px 12px; margin: 8px 0; overflow: auto; max-height: 520px; white-space: pre; tab-size: 4; }
.cd-line { min-height: 1.45em; }
.cd-k { color: #7aa7ff; } .cd-s { color: #7df0a8; } .cd-c { color: #7f9aa0; font-style: italic; } .cd-n { color: #f5c26b; }
.cd-da { background: rgba(125,240,168,.14); } .cd-dr { background: rgba(255,107,107,.14); }
.dk-diff{max-height:50vh}.dk-diff span{display:block;white-space:pre}.dk-add{background:rgba(60,200,120,.14);color:#9dffc8}.dk-del{background:rgba(255,90,90,.14);color:#ffb0b0}.dk-hunk{color:var(--acc)}.dk details{margin:3px 0}.dk summary{cursor:pointer}

/* 12.0 phones and the installed app: the same hub on a narrow screen */
@media (max-width: 700px) {
  body { font-size: 15px; }
  header.top { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; }
  header.top .top-r { margin-left: auto; gap: 6px; }
  header.top nav { display: flex; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; flex: 1 0 100%; order: 5; -webkit-overflow-scrolling: touch; }
  header.top nav button { white-space: nowrap; }
  main { padding: 8px; }
  .card { padding: 10px; }
  .tbl { display: block; overflow-x: auto; }
  .row { flex-wrap: wrap; }
  .login { width: auto; margin: 16px; }
  input, select, textarea, .btn { min-height: 40px; font-size: 16px; }
  .modal .dlg { width: auto; max-width: 96vw; margin: 8px; }
}
@media (display-mode: standalone) { body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } }

/* 12.3: several accounts of one service for one bot */
.ig-acct { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.ig-also { display:flex; flex-wrap:wrap; gap:4px 12px; justify-content:flex-end; align-items:center; max-width:520px; }
.ig-also label.c { display:inline-flex; gap:5px; align-items:center; }

/* 12.5.0 the user console (operators and viewers): bots and group chats on the left, the chat on the right */
.uc-page{max-width:clamp(1280px, 92vw, 2200px);margin:0 auto;padding:12px 16px;min-height:100vh;box-sizing:border-box;display:flex;flex-direction:column}
.uc-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0 12px;border-bottom:1px solid var(--line);margin-bottom:12px;flex-wrap:wrap}
.uc-grid{display:grid;grid-template-columns:290px minmax(0,1fr);gap:14px;flex:1 1 auto;min-height:0}
.uc-side,.uc-main{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px;min-width:0}
.uc-side{display:flex;flex-direction:column;max-height:calc(100vh - 110px)}
.uc-tabs{display:flex;gap:6px;margin-bottom:8px}
.uc-tab{flex:1;background:none;border:1px solid var(--line);color:var(--dim);border-radius:6px;padding:6px 4px;cursor:pointer;letter-spacing:.08em;font-size:12px}
.uc-tab.on{color:var(--acc);border-color:var(--acc)}
.uc-list{overflow:auto;flex:1 1 auto}
.uc-item{padding:8px;border-radius:8px;cursor:pointer;border:1px solid transparent;margin-bottom:4px}
.uc-item:hover{border-color:var(--line)}
.uc-item.on{border-color:var(--acc);background:rgba(127,127,127,.08)}
.uc-row{display:flex;align-items:center;gap:8px}
.uc-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uc-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uc-dot{width:9px;height:9px;border-radius:50%;background:var(--dim);flex:none;opacity:.6}
.uc-dot.up{background:var(--ok);opacity:1}
.uc-main{display:flex;flex-direction:column;max-height:calc(100vh - 110px)}
.uc-main.uc-empty{align-items:center;justify-content:center;text-align:center;min-height:320px}
.uc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap;padding-bottom:8px;border-bottom:1px solid var(--line)}
.uc-log{flex:1 1 auto;overflow:auto;padding:8px 2px;min-height:200px}
.uc-line{margin:10px 0;max-width:88%;position:relative}
.uc-line.me{margin-left:auto;text-align:right}
.uc-line.note{max-width:100%;color:var(--dim);font-size:12px}
.uc-drafting { color:var(--acc); }
.uc-draft-main { display:flex; align-items:center; gap:10px; min-height:38px; font-size:13px; }
.uc-who{font-size:11px;letter-spacing:.06em;color:var(--acc);margin-bottom:2px}
.uc-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.45}
.uc-text.bad{color:var(--bad)}
.uc-say{background:none;border:none;color:var(--dim);cursor:pointer;font-size:11px;padding:2px 0}
.uc-compose{display:flex;gap:8px;align-items:flex-end;border-top:1px solid var(--line);padding-top:8px}
.uc-compose textarea{flex:1 1 auto;resize:vertical;min-height:42px}
@media (max-width:760px){.uc-grid{grid-template-columns:1fr}.uc-side{max-height:40vh}.uc-main{max-height:none}.uc-page{padding:8px 12px}}
.uc-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:2px 4px 2px 10px;font-size:12px}
.uc-chip button{background:none;border:none;color:var(--dim);cursor:pointer;font-size:14px;line-height:1}

/* 13.1.10: a bot is working on an answer (spinner, what it is doing, how long) */
.live-row { display:flex; align-items:center; gap:8px; margin-top:4px; font-size:12px; opacity:.85; }
.live-row .live-txt { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.live-row .live-clock { font-variant-numeric:tabular-nums; opacity:.7; }

/* 13.7.0: the side column of Messages: MY BOTS / EXTERNAL BOTS / GROUPS, with + NEW CHAT under them */
.pane > .hd.cx-sidehead { display:flex; flex-direction:column; align-items:stretch; gap:6px; letter-spacing:normal; }
.cx-sidetabs { display:flex; gap:3px; } .cx-sidetabs button { flex:1; padding:3px 4px; letter-spacing:.04em; font-size:10.5px; line-height:1.2; white-space:normal; }
.cx-newchat { width:100%; }

/* 13.8.0: memory notes one line each until opened; the MANAGE MEMORY window */
.pp-note > summary { display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none; }
.pp-note > summary::-webkit-details-marker { display:none; }
.pp-note > summary::before { content:'\25b8'; color:var(--dim); font-size:11px; }
.pp-note[open] > summary::before { content:'\25be'; }
.pp-note > summary .pp-desc { flex:1; min-width:0; color:var(--dim); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pp-note[open] > summary { margin-bottom:6px; }
.mm-meter { margin:10px 0 6px; } .mm-bar { height:6px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden; margin:4px 0; } .mm-bar > span { display:block; height:100%; }
.mm-tools { gap:8px; } .mm-q { flex:1; min-width:180px; }
.mm-list { max-height:58vh; overflow:auto; margin-top:8px; border-top:1px solid var(--line); }
.mm-row { border-bottom:1px solid var(--line); padding:6px 4px; } .mm-row.off .mm-t { opacity:.55; }
.mm-head { display:flex; align-items:center; gap:10px; } .mm-t { flex:1; min-width:0; cursor:pointer; } .mm-d { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mm-pill { display:inline-block; margin-left:8px; padding:0 7px; border-radius:9px; font-size:10.5px; border:1px solid var(--line); color:var(--dim); }
.mm-pill.hub { color:var(--acc); border-color:var(--acc); } .mm-pill.learned { color:#c9a7ff; border-color:#7d5fb3; } .mm-pill.offp { color:var(--bad); border-color:var(--bad); }
.mm-edit { margin:8px 0 4px 30px; } .mm-edit textarea { width:100%; font-size:12.5px; } .mm-edit input { width:100%; }
.mm-sw input, .pp-note > summary input { width:auto; } .mm-tools select { width:auto; }

.pp-info { gap:10px; align-items:center; }

/* 13.9.0 work folders in a bot's CONFIG */
.wf-row { gap:6px; margin:4px 0; } .wf-row input { flex:1; min-width:0; } .wf-row select { width:auto; }

/* 14.0 HIVEMIND (BOTS > HIVEMIND) */
.hm-top { margin-bottom:12px; }
.hm-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px; margin:12px 0; }
.hm-tile { border:1px solid var(--line); border-radius:8px; padding:8px 10px; background:rgba(0,0,0,.18); }
.hm-tile b { display:block; font-size:20px; color:var(--acc); } .hm-tile span { font-size:11px; color:var(--dim); letter-spacing:.05em; }
.hm-subs { margin:6px 0 10px; flex-wrap:wrap; }
.hm-bar { gap:6px; flex-wrap:wrap; margin-bottom:8px; } .hm-bar input { flex:1; min-width:200px; } .hm-bar select { width:auto; }
.hm-list { border-top:1px solid var(--line); }
.hm-row { display:grid; grid-template-columns:minmax(0,1fr) 150px 150px 110px; gap:10px; padding:8px 6px; border-bottom:1px solid var(--line); cursor:pointer; align-items:center; }
.hm-row:hover { background:rgba(255,255,255,.03); }
.hm-main { min-width:0; } .hm-sub { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hm-meta { min-width:0; overflow:hidden; text-overflow:ellipsis; }
@media (max-width: 900px) { .hm-row { grid-template-columns:minmax(0,1fr); } }
.hm-pill { display:inline-block; margin-left:6px; padding:0 7px; border-radius:9px; font-size:10.5px; border:1px solid var(--line); color:var(--dim); vertical-align:middle; }
.hm-pill.active { color:var(--ok); border-color:var(--ok); } .hm-pill.review { color:var(--warn); border-color:var(--warn); }
.hm-pill.quarantined, .hm-pill.flag { color:var(--bad); border-color:var(--bad); } .hm-pill.expired, .hm-pill.deleted { opacity:.7; } .hm-pill.act { color:var(--acc); border-color:var(--acc); }
.hm-conf { display:inline-flex; align-items:center; gap:6px; }
.hm-track { display:inline-block; width:60px; height:5px; border-radius:3px; background:rgba(255,255,255,.1); overflow:hidden; } .hm-track > span { display:block; height:100%; background:var(--acc); }
.hm-conf b { font-size:11px; font-weight:600; }
.hm-field { margin:8px 0; } .hm-pre { white-space:pre-wrap; word-break:break-word; margin:2px 0; font-size:12.5px; background:rgba(0,0,0,.25); padding:8px; border-radius:6px; }
.hm-ver { border-bottom:1px solid var(--line); padding:6px 0; } .hm-ver summary { cursor:pointer; font-size:12.5px; }
.hm-diff { margin:6px 0 6px 14px; } .hm-old, .hm-new { white-space:pre-wrap; word-break:break-word; font-size:12px; padding:4px 8px; border-radius:4px; margin:2px 0; }
.hm-old { background:rgba(255,90,110,.10); text-decoration:line-through; opacity:.85; } .hm-new { background:rgba(61,220,132,.10); }
.hm-split { display:flex; height:26px; border-radius:6px; overflow:hidden; margin:8px 0; font-size:12px; } .hm-split span { display:flex; align-items:center; padding:0 8px; white-space:nowrap; }
.hm-split .a { background:rgba(94,234,212,.25); } .hm-split .b { background:rgba(245,194,107,.25); }
.hm .tbl select, .hm .tbl input[type=number] { width:auto; } .hm .tbl td.row { align-items:center; }
.hm > .row:first-child > div:first-child { flex:1; min-width:0; } .hm > .row:first-child > div + div { white-space:nowrap; margin-left:16px; }

/* 14.0.4 Settings > AI */
.ai-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; }
.ai-tile { background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:10px 14px; display:grid; gap:2px; min-width:0; } .ai-tile.link { cursor:pointer; } .ai-tile.link:hover { border-color:var(--acc); }
.ai-tl { font-size:10.5px; letter-spacing:.14em; color:var(--dim); } .ai-tv { font-size:17px; font-weight:600; overflow-wrap:anywhere; }
.ai-split { display:grid; grid-template-columns:minmax(220px,280px) 1fr; gap:14px; align-items:start; } @media (max-width:760px) { .ai-split { grid-template-columns:1fr; } }
.ai-list { display:grid; gap:12px; border:1px solid var(--line); border-radius:6px; padding:10px; background:var(--panel); }
.ai-grp { display:grid; gap:2px; } .ai-gh { font-size:10.5px; letter-spacing:.14em; color:var(--acc); padding:2px 8px 4px; }
.ai-item { display:grid; grid-template-columns:auto 1fr; column-gap:8px; align-items:center; text-align:left; background:none; border:1px solid transparent; border-radius:5px; color:inherit; padding:6px 8px; cursor:pointer; font:inherit; }
.ai-item:hover { background:rgba(94,234,212,.06); } .ai-item[data-on='1'] { border-color:var(--acc); background:rgba(94,234,212,.1); }
.ai-nm { font-size:13.5px; } .ai-st { grid-column:2; font-size:11px; color:var(--dim); }
.ai-add { display:block; font-size:11px; letter-spacing:.1em; color:var(--acc); border:1px dashed var(--line); text-align:center; }
.ai-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--dim); opacity:.45; } .ai-dot.on { background:var(--ok,#22c55e); opacity:1; box-shadow:0 0 6px var(--ok,#22c55e); }
.ai-detail > .card { margin:0; }
.ai-assign { display:grid; border:1px solid var(--line); border-radius:6px; background:var(--panel); margin-top:10px; }
.ai-arow { display:grid; grid-template-columns:minmax(120px,1fr) minmax(160px,1.3fr) minmax(160px,1.6fr) minmax(170px,auto); gap:10px; align-items:center; padding:8px 12px; border-top:1px solid rgba(94,234,212,.1); }
/* 16.17.0 model drop-downs */ .ai-mbox { display:flex; gap:6px; align-items:center; min-width:0; } .ai-mbox select, .ai-mbox input { flex:1; min-width:0; width:100%; } .ai-mbox .ai-mback { flex:none; }
.ai-arow:first-child { border-top:0; } .ai-arow select, .ai-arow input { width:100%; min-width:0; } .ai-arow > div { min-width:0; }
.ai-ahead { font-size:10.5px; letter-spacing:.14em; color:var(--acc); padding-top:10px; padding-bottom:6px; }
@media (max-width:760px) { .ai-arow { grid-template-columns:1fr; gap:6px; } .ai-ahead { display:none; } .ai-arow > div[data-l]::before { content:attr(data-l); display:block; font-size:10.5px; letter-spacing:.12em; color:var(--dim); margin-bottom:2px; } }
.ai-all { margin-top:10px; } .ai-all summary { cursor:pointer; font-size:11px; letter-spacing:.12em; color:var(--acc); }
.ai-all:not([open]) { padding:10px 16px; }
@media (max-width:520px) { .ai-tiles { grid-template-columns:1fr 1fr; } .ai-tiles > .ai-tile:first-child { grid-column:1/-1; } .ai-tv { font-size:15px; } }

/* 14.1.0 Settings page: grouped menu on the left, a drop-down on narrow screens */
.set-wrap { display:grid; grid-template-columns:200px minmax(0,1fr); gap:24px; align-items:start; }
.set-nav { position:sticky; top:12px; display:grid; gap:14px; border-right:1px solid var(--line); padding:4px 14px 4px 0; }
.set-grp { display:grid; gap:1px; } .set-gh { font-size:10.5px; letter-spacing:.16em; color:var(--acc); padding:0 10px 4px; }
.set-nav button { text-align:left; background:none; border:0; border-left:2px solid transparent; color:inherit; opacity:.7; font:inherit; font-size:12.5px; letter-spacing:.06em; padding:6px 10px; cursor:pointer; border-radius:0 4px 4px 0; }
.set-nav button:hover { opacity:1; background:rgba(94,234,212,.06); } .set-nav button[data-on='1'] { opacity:1; border-left-color:var(--acc); background:rgba(94,234,212,.1); color:var(--acc); }
.set-pick { display:none; width:100%; margin-bottom:12px; }
.set-head { margin-bottom:14px; } .set-head h2 { margin:0 0 4px; } .set-head .lead { margin:0; }
.set-main { min-width:0; }
@media (max-width:760px) { .set-wrap { grid-template-columns:1fr; gap:0; } .set-nav { display:none; } .set-pick { display:block; } }
.su-acts .row { flex-wrap:nowrap; } .su-acts { white-space:nowrap; width:1%; }
.rt-noprev { padding:18px; border:1px dashed var(--line); border-radius:6px; text-align:center; }
#peerlog:empty::before { content:'Nothing yet.'; color:var(--dim); font-size:12px; }
@media (max-width:760px) { .ai-grp { grid-template-columns:1fr 1fr; } .ai-gh { grid-column:1/-1; } }
.ag-addr { margin-top:12px; }
/* 19.23.0 Settings > OUTSIDE AGENTS > HOSTED: file types agents may send */
.ag-ft { display:flex; align-items:center; gap:10px; margin:10px 0 4px; padding:8px 10px; border:1px solid var(--line); border-radius:6px; }
.ag-ft-main { flex:1; min-width:0; }
.ag-ft-main > div { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ag-ft-chips { display:flex; flex-wrap:wrap; gap:6px; min-width:0; max-height:40vh; overflow:auto; }

/* ================= 14.2.0 hub-wide layout pass ================= */
/* one page header everywhere: title and a line on the left, the page's main actions on the right */
.page-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px 20px; flex-wrap:wrap; margin:4px 0 14px; }
.page-head .ph-text { flex:1 1 340px; min-width:0; } .page-head h2 { margin:0 0 4px; } .page-head .lead { margin:0; }
.page-head .ph-acts { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; align-items:center; }
/* small sub-tabs (inside a section) */
.subnav.subnav-s { margin-bottom:10px; } .subnav.subnav-s button { padding:6px 12px; font-size:12px; }
.subnav .sub { padding:8px 12px; opacity:.55; font-size:12px; letter-spacing:.05em; white-space:nowrap; } .subnav .sub.on { opacity:1; border-bottom:2px solid var(--acc,#0aa5a5); color:var(--acc); }
/* BOTS: cards in a grid, everyday actions on the card, the rest under MORE */
.bots-grid { grid-template-columns:repeat(auto-fill,minmax(420px,1fr)); align-items:stretch; }
.bots-grid .card.bot-card { grid-template-columns:minmax(0,1fr); align-content:start; }
.bots-grid .card.bot-card > * { grid-column:1 !important; grid-row:auto !important; }
.bc-head { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; } .bc-head h3 { margin:0; } .bc-head .ai-tag { margin:0; }
.bc-desc { min-height:2.6em; }
.bot-card .bc-acts { justify-content:flex-start !important; flex-wrap:wrap !important; margin-top:4px; padding-top:10px; border-top:1px solid rgba(94,234,212,.12); }
.bc-gap { flex:1; }
.all-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 12px; padding:8px 12px; border:1px solid var(--line); border-radius:6px; background:rgba(0,0,0,.15); }
@media (max-width:760px) { .bots-grid { grid-template-columns:1fr; } }
/* MORE drop-down */
details.menu { position:relative; display:inline-block; } details.menu > summary { list-style:none; } details.menu > summary::-webkit-details-marker { display:none; }
.menu-pop { position:absolute; right:0; top:calc(100% + 4px); z-index:15; min-width:150px; display:grid; padding:4px; background:var(--panel); border:1px solid var(--acc); border-radius:6px; box-shadow:0 8px 24px rgba(0,0,0,.45); }
.menu-pop.menu-float { position:fixed; right:auto; z-index:60; max-height:calc(100vh - 16px); overflow:auto; }
.menu-pop button, .menu-pop a > button { display:block; width:100%; text-align:left; background:none; border:0; color:inherit; font:inherit; font-size:12px; letter-spacing:.08em; padding:8px 10px; border-radius:4px; cursor:pointer; }
.menu-pop button:hover { background:rgba(94,234,212,.1); } .menu-pop .danger { color:var(--bad); } .menu-pop a { text-decoration:none; color:inherit; }
/* dialogs: the buttons at the bottom stay in view while the dialog scrolls */
.dlg > .row:last-child { position:sticky; bottom:-20px; z-index:2; background:var(--panel); margin:0 -22px -20px; padding:12px 22px; border-top:1px solid var(--line); }
.dlg.dlg-wide { width:min(720px,100%); }
.cfg-tabs { margin-bottom:4px; } .cfg-pane { display:grid; gap:11px; min-height:220px; align-content:start; } .cfg-pane > * { min-width:0; }
/* filter rows: search box wide, the drop-downs beside it */
.filter-bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:8px 0; } .filter-bar > input { flex:2 1 240px; width:auto; } .filter-bar > select { flex:1 1 150px; width:auto; }
/* rooms */
.wr-perbot { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:8px 16px; } .wr-perbot label { display:grid; gap:3px; }
.wiz-crumbs { gap:2px 4px; }
/* messages */
#buslog:empty::before { content:'No bot-to-bot messages yet.'; color:var(--dim); font-size:12px; display:block; padding:10px; }
/* phones: the main tabs wrap onto two rows instead of hiding off the side */
@media (max-width:700px) {
  header.top nav { flex-wrap:wrap !important; overflow:visible !important; justify-content:center !important; gap:4px; }
  header.top nav button { padding:5px 10px; font-size:11px; }
  .page-head .ph-acts { justify-content:flex-start; }
}
@media (max-width:760px) { .bot-card .bc-gap { display:none; } }

/* ================= 14.3.0 bell, user menu, messages side tabs ================= */
.hd-icon { position:relative; display:inline-grid; place-items:center; width:34px; height:30px; padding:0; background:none; border:1px solid var(--line); border-radius:6px; color:var(--dim); cursor:pointer; }
.hd-icon:hover, .hd-icon.on { color:var(--acc); border-color:var(--acc); background:rgba(94,234,212,.08); }
.hd-badge { position:absolute; top:-7px; right:-8px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--acc); color:#04121a; font-size:10.5px; font-weight:700; line-height:17px; text-align:center; letter-spacing:0; }
.hd-badge.warn { background:var(--warn); }
.hd-pop { position:fixed; top:58px; right:16px; z-index:30; background:var(--panel); border:1px solid var(--acc); border-radius:8px; box-shadow:0 14px 40px rgba(0,0,0,.55); }
.bell-pop { width:min(460px, calc(100vw - 24px)); max-height:min(78vh, 760px); display:grid; grid-template-rows:auto auto minmax(0,1fr); }
.bell-head { display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--line); letter-spacing:.14em; color:var(--acc); }
.bell-body { overflow:auto; padding:4px 14px 14px; display:grid; gap:8px; align-content:start; }
.bell-body .sec { margin:10px 0 2px; } .bell-body .card { margin:0; } .bell-body .dg-card .row { flex-wrap:wrap; }
.bell-item { border:1px solid var(--line); border-radius:6px; padding:8px 10px; display:grid; gap:4px; background:rgba(0,0,0,.12); }
.bell-item.unread { border-color:rgba(94,234,212,.55); background:rgba(94,234,212,.06); }
.bell-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .bell-top .dim { margin-left:auto; }
.bell-title { font-size:13px; overflow-wrap:anywhere; } .bell-detail { white-space:pre-wrap; max-height:4.6em; overflow:hidden; }
.user-pop { width:min(300px, calc(100vw - 24px)); padding:8px; display:grid; gap:4px; }
.user-who { display:flex; gap:10px; align-items:center; padding:6px 6px 10px; border-bottom:1px solid var(--line); margin-bottom:4px; }
.user-av { display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; border:1px solid var(--acc); color:var(--acc); }
.user-item { text-align:left; background:none; border:0; color:inherit; font:inherit; font-size:12px; letter-spacing:.08em; padding:9px 8px; border-radius:4px; cursor:pointer; }
.user-item:hover { background:rgba(94,234,212,.1); } .user-item.danger { color:var(--bad); border-top:1px solid var(--line); border-radius:0; margin-top:4px; }
.user-row { padding:4px 8px; }
.bc-bell { display:inline-grid; place-items:center; padding:3px 7px; } .bc-bell svg { width:15px; height:15px; } .bc-bell.off { color:var(--dim); opacity:.6; }
.al-bots { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:4px 16px; margin:6px 0; }
/* MESSAGES: a wider side list, and its three tabs always fit on one line */
.console { grid-template-columns:310px 1fr 300px; }
.cx-sidetabs { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; }
.cx-sidetabs button, html[data-theme="rsc"] .cx-sidetabs button { min-width:0; padding:5px 2px !important; font-size:10.5px !important; letter-spacing:.03em !important; line-height:1.2; white-space:normal !important; overflow:visible; display:flex; align-items:center; justify-content:center; text-align:center; }
@media (max-width:700px) { .hd-pop { top:auto; bottom:12px; right:12px; left:12px; width:auto; } .hd-icon { width:38px; height:36px; } }
/* 15.0: users, groups and roles */
.us-checks { display:grid; gap:4px; max-height:320px; overflow:auto; border:1px solid var(--line); border-radius:6px; padding:8px; }
.us-check { display:flex; gap:8px; align-items:flex-start; font-size:13px; cursor:pointer; } .us-check input { margin-top:3px; flex:0 0 auto; }
.us-areas { display:grid; gap:8px; max-height:52vh; overflow:auto; padding-right:4px; }
.us-area { border:1px solid var(--line); border-radius:6px; padding:8px 10px; }
.us-area-h { display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .us-lvl { display:flex; gap:4px; align-items:center; font-size:12px; letter-spacing:.05em; cursor:pointer; }
.us-acts { display:grid; gap:4px; margin-top:6px; } .us-area details > summary { cursor:pointer; margin-top:4px; }
/* 15.0.1: the people tables keep their buttons on one line and scroll sideways on a phone instead of squeezing */
.us-tbl { min-width:680px; } .us-tbl .btn, .us-tbl summary { white-space:nowrap; } .us-tbl td:last-child > .row { flex-wrap:nowrap; justify-content:flex-end; }
/* 15.1.0: models this hub's Claude Code cannot run */
.warn-t { color:var(--warn); } .bc-warn { margin-top:4px; }
.ai-newbots { display:grid; gap:8px; margin-bottom:12px; } .ai-nb-h { display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; justify-content:space-between; }
.ai-newbots select { min-width:260px; max-width:100%; }
/* 15.1.0: the role editor, by category */
.dlg.us-role-dlg { width:min(940px,100%); }
.us-namerow { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:12px; }
.us-sum { display:flex; gap:18px; flex-wrap:wrap; align-items:baseline; font-size:13px; padding:8px 12px; border:1px solid var(--line); border-radius:6px; }
.ok-t { color:var(--ok); }
.us-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:10px; align-items:start; }
.us-perms .us-area .us-acts { margin-top:8px; gap:6px; }
.us-count { font-size:11px; color:var(--dim); border:1px solid var(--line); border-radius:10px; padding:1px 7px; } .us-count[data-on="1"] { color:var(--acc); border-color:var(--acc); }
.us-lv { font-size:10px; letter-spacing:.06em; text-transform:uppercase; margin-left:6px; color:var(--dim); } .us-lv.manage { color:var(--warn); }
.us-set { display:grid; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.us-set-r { display:grid; grid-template-columns:minmax(0,1fr) 70px 80px; gap:10px; align-items:center; padding:5px 12px; border-top:1px solid var(--line); }
.us-set-r:first-child { border-top:0; } .us-set-h { font-size:11px; letter-spacing:.08em; color:var(--acc); background:rgba(94,234,212,.05); }
.us-set-r > label { justify-content:center; }
@media (max-width:640px) { .us-namerow { grid-template-columns:1fr; } .us-set-r { grid-template-columns:minmax(0,1fr) 56px 70px; } }
.us-set-d { overflow:hidden; text-overflow:ellipsis; } .us-set-r > span:first-child { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.us-perms { display:grid; gap:10px; } .us-perms .us-area-h { flex-wrap:nowrap; } .us-perms .cfg-pane { min-height:300px; }
@media (max-width:640px) { .us-grid { grid-template-columns:1fr; } .us-perms .us-area-h { flex-wrap:wrap; } .us-set-r > span:first-child { white-space:normal; } .us-set-d { display:none; } .us-perms .cfg-tabs { flex-wrap:nowrap; overflow-x:auto; } .us-perms .cfg-tabs button { white-space:nowrap; } }
/* 15.2.0 work details: the steps behind a bot's answer (MESSAGES and the user console) */
.wk { margin:2px 0 6px; font-size:12px; line-height:1.45; }
.wk-head { all:unset; cursor:pointer; display:inline-flex; gap:7px; align-items:baseline; color:var(--dim); }
.wk-head:hover { color:var(--ink); } .wk-caret { font-size:10px; width:10px; }
.wk-live { color:var(--ok); font-size:11px; animation:wk-pulse 1.4s ease-in-out infinite; } @keyframes wk-pulse { 50% { opacity:.4; } }
.wk-list { list-style:none; margin:6px 0 2px; padding:0 0 0 4px; display:grid; gap:1px; border-left:1px solid var(--line); }
.wk-row { all:unset; box-sizing:border-box; display:grid; grid-template-columns:18px minmax(0,1fr) auto auto; gap:8px; align-items:baseline; width:100%; padding:2px 6px; border-radius:4px; color:var(--ink); }
.wk-row:not(:disabled) { cursor:pointer; } .wk-row:not(:disabled):hover { background:rgba(94,234,212,.08); }
.wk-ic { text-align:center; color:var(--ok); } .wk-ic[data-state="error"] { color:var(--bad); } .wk-ic[data-state="refused"] { color:var(--warn); } .wk-ic[data-state="running"] { color:var(--acc); animation:wk-pulse 1.2s ease-in-out infinite; }
.wk-step[data-kind="think"] .wk-ic { color:var(--dim); }
.wk-label { overflow-wrap:anywhere; } .wk-step[data-state="error"] .wk-label { color:var(--bad); } .wk-step[data-state="refused"] .wk-label { color:var(--warn); }
.wk-ms { font-size:10.5px; color:var(--dim); white-space:nowrap; } .wk-more { font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--acc); white-space:nowrap; }
.wk-detail { margin:4px 0 8px 26px; display:grid; gap:4px; }
.wk-dh { font-size:9.5px; letter-spacing:.16em; color:var(--acc); }
.wk-detail pre { margin:0; max-height:260px; overflow:auto; white-space:pre-wrap; word-break:break-word; font:11.5px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; padding:7px 9px; border-radius:4px; background:rgba(0,0,0,.3); border:1px solid var(--line); color:var(--ink); }
.wk-foot { margin:4px 0 0 6px; font-size:10.5px; color:var(--dim); }
.wk-switch { display:inline-flex; gap:3px; align-items:baseline; } .wk-opt { all:unset; cursor:pointer; padding:0 4px; border-radius:3px; text-transform:uppercase; color:var(--dim); font-size:inherit; letter-spacing:inherit; }
.wk-opt:hover { color:var(--ink); } .wk-opt.on { color:var(--ink); box-shadow:inset 0 -1px 0 var(--acc); }
.m .wk { display:block; }
.ai-work { display:grid; gap:10px; } .ai-work-opt { display:flex; gap:10px; align-items:flex-start; cursor:pointer; } .ai-work-opt input { margin-top:4px; }
/* 15.3.0 @ autocomplete (mention.js) and conversation mode (convo.js) */
.mn-list { position:fixed; z-index:60; min-width:220px; max-width:300px; display:grid; padding:4px; background:var(--panel); border:1px solid var(--acc); border-radius:6px; box-shadow:0 8px 24px rgba(0,0,0,.45); }
.mn-item { display:flex; gap:8px; align-items:baseline; padding:6px 8px; border-radius:4px; cursor:pointer; min-width:0; }
.mn-item.on, .mn-item:hover { background:rgba(94,234,212,.14); }
.mn-name { color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mn-sub { color:var(--dim); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* 15.3.3 a text conversation button's "on" look; the icon buttons below have their own, readable in every theme */
.cv-btn:not(.cv-icon)[data-on="1"] { background:color-mix(in srgb, var(--ok) 18%, transparent); border-color:var(--ok); }
.cv-bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:6px 10px; margin:4px 0; border:1px solid var(--acc); border-radius:6px; font-size:12px; color:var(--ink); }
.cv-bar .cv-dot { width:9px; height:9px; border-radius:50%; background:var(--dim); flex:none; }
.cv-bar[data-state="listening"] .cv-dot { background:var(--ok); } .cv-bar[data-state="hearing"] .cv-dot { background:var(--acc); box-shadow:0 0 0 4px rgba(94,234,212,.25); }
.cv-bar[data-state="speaking"] .cv-dot { background:var(--warn); } .cv-bar[data-state="working"] .cv-dot { background:var(--warn); animation:cvp 1s infinite; }
.cv-bar .cv-said { color:var(--dim); flex:1 1 200px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@keyframes cvp { 50% { opacity:.35 } }
@media (max-width: 760px) { .cx-compose { flex-wrap:wrap; } .cx-compose textarea { flex:1 1 100%; order:-1; } }
@media (max-width: 760px) { .uc-compose { flex-wrap:wrap; } .uc-compose textarea { flex:1 1 100%; order:-1; } }
/* 15.3.1 Settings > ALERTS: which kinds of activity come into the bell */
.al-types { width:100%; border-collapse:collapse; } .al-types th { text-align:left; font-size:11px; color:var(--dim); font-weight:normal; padding:4px 6px; }
.al-types td { padding:6px; border-top:1px solid var(--line); vertical-align:top; } .al-types td:last-child { width:220px; } .al-types select { width:100%; }
.al-bot { gap:8px; align-items:center; flex-wrap:wrap; }
@media (max-width: 640px) { .al-types td:last-child { width:auto; } .al-types tr { display:grid; } }
/* 15.3.3 the conversation icon button next to SEND (MESSAGES) and in the user console: replaces the microphone button */
.cv-btn.cv-icon { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; min-width:36px; padding:0 !important; border-radius:50% !important; letter-spacing:0; position:relative; }
.cv-btn.cv-icon svg { width:19px; height:19px; }
.cv-btn.cv-icon[data-on="1"], html[data-theme] .cv-btn.cv-icon[data-on="1"] { color:var(--ok) !important; border-color:var(--ok) !important; background:color-mix(in srgb, var(--ok) 14%, transparent) !important; box-shadow:0 0 0 0 color-mix(in srgb, var(--ok) 45%, transparent); animation:cvRing 1.6s ease-out infinite; }
.cv-btn.cv-icon[data-on="1"] line { animation:cvBars 1s ease-in-out infinite; transform-origin:center; transform-box:fill-box; }
.cv-btn.cv-icon[data-on="1"] line:nth-child(2) { animation-delay:.15s } .cv-btn.cv-icon[data-on="1"] line:nth-child(3) { animation-delay:.3s } .cv-btn.cv-icon[data-on="1"] line:nth-child(4) { animation-delay:.45s } .cv-btn.cv-icon[data-on="1"] line:nth-child(5) { animation-delay:.6s }
@keyframes cvRing { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--ok) 45%, transparent) } 100% { box-shadow:0 0 0 9px transparent } }
@keyframes cvBars { 50% { transform:scaleY(.45) } }
.cx-compose .cv-icon { align-self:flex-end; }
.uc-compose .cv-icon { align-self:flex-end; height:38px; width:38px; }
@media (prefers-reduced-motion: reduce) { .cv-btn.cv-icon[data-on="1"], .cv-btn.cv-icon[data-on="1"] line { animation:none } }
/* 15.4.0 round icon buttons in the hub's message bars (MESSAGES, the user console) */
.hib { all:unset; box-sizing:border-box; cursor:pointer; position:relative; flex:none; width:36px; height:36px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:var(--ink); border:1px solid color-mix(in srgb, var(--acc) 40%, transparent); background:transparent; transition:background .15s, border-color .15s, color .15s; }
.hib:hover { background:color-mix(in srgb, var(--acc) 14%, transparent); border-color:var(--acc); }
.hib:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
.hib[disabled] { opacity:.35; cursor:default; }
.hib-p, html[data-theme] .hib-p { background:var(--acc); border-color:var(--acc); color:#04121a; }
.hib-p:hover { filter:brightness(1.1); background:var(--acc); }
.hib-d, html[data-theme] .hib-d { color:var(--bad); border-color:var(--bad); }
.hib-on, html[data-theme] .hib-on { color:var(--ok); border-color:var(--ok); background:color-mix(in srgb, var(--ok) 12%, transparent); }
.hib-off { color:var(--dim); border-color:var(--line); }
.hib-badge { position:absolute; right:-3px; bottom:-3px; min-width:14px; height:14px; padding:0 2px; box-sizing:border-box; border-radius:7px; font-size:9px; line-height:14px; font-weight:700; text-align:center; background:var(--panel); color:inherit; border:1px solid currentColor; }
.cx-compose { align-items:flex-end; }
.cx-tools { display:flex; gap:8px; align-items:flex-end; flex:none; }
.cx-status2 { display:flex; align-items:center; gap:10px; padding:0 14px; min-height:0; font-size:12px; }
.cx-status2:empty { display:none; }
.cv-btn.cv-icon { width:36px; height:36px; min-width:36px; }
/* 15.4.2 find a bot on BOTS */
.bots-find { flex:0 1 260px; min-width:140px; padding:6px 10px; border-radius:6px; border:1px solid var(--line); background:rgba(0,0,0,.2); color:inherit; font:inherit; font-size:13px; }
.bots-find:focus { outline:none; border-color:var(--acc); }
.bot-card[hidden], .bots-none[hidden] { display:none !important; }
.bots-none { margin-bottom:12px; }
/* 15.5.0 WORKSHOP: a bot's skills and routines in a big window (the bot's own screen in its workshop view) */
.wsx { position:fixed; inset:0; z-index:900; }
.wsx-back { position:absolute; inset:0; background:rgba(0,0,0,.55); }
.wsx-win { position:absolute; inset:2vh 2vw; display:flex; flex-direction:column; background:var(--bg, #04121a); border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.wsx-head { flex:none; display:flex; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid var(--line); }
.wsx-title { letter-spacing:.18em; font-size:13px; color:var(--acc); }
.wsx-body { flex:1; min-height:0; position:relative; display:flex; }
.wsx-frame { flex:1; width:100%; height:100%; border:0; display:block; background:transparent; }
.wsx-wait { margin:auto; color:var(--dim); }
.wsx-wait.err { color:#ff7a7a; }
.wsx-start { margin:auto; text-align:center; max-width:420px; display:flex; flex-direction:column; gap:10px; align-items:center; }
@media (max-width: 700px) { .wsx-win { inset:0; border-radius:0; } }
.li-open + .li-open { margin-left:0; }
.ap-sel { gap:12px; flex-wrap:nowrap; align-items:center; } .ap-simple { white-space:nowrap; }
/* 15.11.1 wider and narrower screens: side panes give the chat room on a laptop, grow a little on a big monitor; chat bubbles keep a readable line length */
@media (min-width:1001px) and (max-width:1320px) { .console { grid-template-columns:230px minmax(0,1fr) 250px; gap:10px; } }
@media (min-width:1700px) { .console { grid-template-columns:300px minmax(0,1fr) 340px; } .uc-grid { grid-template-columns:320px minmax(0,1fr); } }
.chat .m { max-width:min(88%, 74rem); }
.uc-line { max-width:min(88%, 74rem); }
.uc-line.note { max-width:100%; }
.wk-label { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; }
.wk-step[data-open='1'] .wk-label { display:block; -webkit-line-clamp:unset; line-clamp:none; overflow:visible; }

/* 15.13.0 What you send: a bright blue bubble with white text, as in the phone app (Blue Sky and hub-made themes; Hive keeps its own look). */
html[data-theme]:not([data-theme="hive"]) .m.me { background:#1d63d8; border-color:#5b9dff; color:#fff; }
html[data-theme]:not([data-theme="hive"]) .m.me a { color:#d4e5ff; }
html[data-theme]:not([data-theme="hive"]) .uc-line.me .uc-text { display:inline-block; text-align:left; background:#1d63d8; border:1px solid #5b9dff; color:#fff; border-radius:10px; padding:6px 12px; }
html[data-theme]:not([data-theme="hive"]) .uc-line.me .uc-who { color:#9fc3ff; }

/* 15.13.0 Modern scroll bars: thin, rounded, the theme's accent, no track; wider while you hold or hover them. */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background:transparent; }
::-webkit-scrollbar-thumb { background-color:color-mix(in srgb, var(--acc, #5eead4) 32%, transparent); border-radius:999px; border:3px solid transparent; background-clip:padding-box; min-height:36px; }
::-webkit-scrollbar-thumb:hover { background-color:color-mix(in srgb, var(--acc, #5eead4) 55%, transparent); border-width:2px; }
::-webkit-scrollbar-thumb:active { background-color:color-mix(in srgb, var(--acc, #5eead4) 70%, transparent); }
::-webkit-scrollbar-button { display:none; width:0; height:0; }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--acc, #5eead4) 40%, transparent) transparent; } }

/* 16.1.0 a tick box or radio with its text beside it (Settings > WEB BROWSER and other dialogs); never stretched to 40px on phones */
label.check { display:flex; gap:8px; align-items:flex-start; cursor:pointer; } label.check > input[type=checkbox], label.check > input[type=radio] { min-height:0; width:auto; margin:3px 0 0; flex:none; }

/* 16.3.0 INSTANCES (hub/ui/instances.js): the sessions a bot has open, live */
.inst-dlg { width:min(860px,100%); }
.inst-list { margin-top:0; max-height:60vh; overflow:auto; }
.inst-list .ai-arow { grid-template-columns:minmax(150px,1.1fr) minmax(110px,.7fr) minmax(180px,2fr) auto; }
.inst-row.on { background:rgba(94,234,212,.05); }
.inst-nm { font-weight:600; overflow-wrap:anywhere; }
.inst-q { overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; }
.inst-now { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:760px) { .inst-list .ai-arow { grid-template-columns:1fr; } }
/* 16.5.0 PEOPLE on a bot: who uses it, and one of their chats as they see it (hub/ui/people.js) */
.ppl-dlg { width:min(920px,100%); }
.ppl-list .ai-arow { grid-template-columns:minmax(150px,1fr) minmax(200px,2fr) minmax(110px,.6fr) auto; }
.ppl-chats { display:flex; flex-wrap:wrap; gap:6px; }
.ppl-chats .btn { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ppl-top { align-items:center; gap:10px; margin:6px 0 8px; flex-wrap:wrap; }
.ppl-tt { min-width:0; overflow-wrap:anywhere; }
.ppl-main { max-height:none; padding:6px 10px; }
.ppl-log { height:min(58vh,560px); min-height:220px; }
@media (max-width:760px) { .ppl-list .ai-arow { grid-template-columns:1fr; } .ppl-log { height:60vh; } }
/* 16.7.0 Settings > ALERTS > PHONE NOTIFICATIONS */
.ai-arow.pn-row { grid-template-columns:minmax(140px,1fr) minmax(200px,1.2fr) minmax(160px,1.4fr) auto; }
@media (max-width:760px) { .ai-arow.pn-row { grid-template-columns:1fr; } }
/* 16.8.0 Settings > ELEVATION and its cards in the bell */
.ev-code { margin:6px 0; padding:6px 8px; background:rgba(0,0,0,.25); border:1px solid var(--line); border-radius:4px; font-family:Menlo,Consolas,monospace; font-size:12px; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; overflow:auto; }
.appr-code { margin:0; max-height:8.8em; } /* 16.9.0 elevation card in a chat */
.appr-card.elev .appr-detail { font-family:inherit; font-size:13px; word-break:normal; overflow-wrap:anywhere; }
.ev-list .ai-arow { grid-template-columns:minmax(120px,.8fr) minmax(200px,2fr) minmax(160px,1.3fr) auto; }
.ev-one { font-family:Menlo,Consolas,monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ev-table td.ev-one { max-width:420px; }
@media (max-width:760px) { .ev-list .ai-arow { grid-template-columns:1fr; } .ev-one { white-space:normal; overflow-wrap:anywhere; } }
/* 16.10.0 (Jeremy: on a laptop the desktop app made you scroll sideways) MESSAGES fits any window. The chat column may always
   shrink (minmax(0,1fr)): a long line such as a command in the "working on" row used to stretch it past the window. The side
   columns grow and shrink with the window; below 1280px the right column (its computer, the hub channel) makes room for the
   chat; one column below 1000px as before. The height comes from conFit() (console.js): the window below the header. */
main:has(> .console), main:has(> * > .console) { max-width:min(100%, 2400px); padding-bottom:12px; }
.console { grid-template-columns:clamp(230px,18vw,320px) minmax(0,1fr) clamp(250px,20vw,360px); gap:clamp(8px,.9vw,14px); height:var(--cx-h, calc(100vh - 150px)); position:relative; overflow-x:clip; }
.console > .pane { min-width:0; }
.cx-status { grid-template-columns:minmax(0,1fr); }
.cx-smain { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pane > .hd.cx-head { flex-wrap:wrap; row-gap:6px; }
.cx-head > .row { flex-wrap:wrap; justify-content:flex-end; min-width:0; gap:6px; margin-left:auto; }
.cx-tt #cx-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (min-width:1001px) and (max-width:1279px) { .console { grid-template-columns:clamp(210px,21vw,260px) minmax(0,1fr); } .console > .pane:nth-child(3) { display:none; } }
@media (max-width:1000px) { .console { grid-template-columns:minmax(0,1fr); height:auto; } }
/* dragging bots into another order (reorder.js) */
.sorting, .sorting * { user-select:none; -webkit-user-select:none; cursor:grabbing !important; }
.sorting > .dragging { outline:2px solid var(--acc); outline-offset:-2px; background:rgba(94,234,212,.14) !important; box-shadow:0 8px 22px rgba(0,0,0,.45); position:relative; z-index:2; }
#cx-bots .li[data-id], .bot-card[data-id] { touch-action:pan-y; }
/* ROUTINES beside a chat (routines.js): slides in from the right over the side column */
.brtp { position:absolute; top:0; right:0; bottom:0; width:var(--brt-w, 340px); max-width:100%; background:var(--panel); border:1px solid var(--acc); border-radius:6px; box-shadow:-14px 0 30px rgba(0,0,0,.45); display:flex; flex-direction:column; min-height:0; z-index:4; transform:translateX(calc(100% + 30px)); opacity:0; visibility:hidden; pointer-events:none; transition:transform .25s ease, opacity .25s ease, visibility 0s linear .25s; }
.brtp[data-open='1'] { transform:none; opacity:1; visibility:visible; pointer-events:auto; transition:transform .25s ease, opacity .25s ease, visibility 0s; }
@media (max-width:1000px) { .brtp { position:fixed; top:0; bottom:0; right:0; width:min(420px,92vw); border-radius:0; z-index:15; } }
@media (prefers-reduced-motion: reduce) { .brtp, .brtp[data-open='1'] { transition:none; } }
.brt-head { display:flex; align-items:center; gap:8px; padding:9px 12px; border-bottom:1px solid var(--line); font-size:11px; letter-spacing:.18em; color:var(--acc); }
/* open: the right column takes the panel's width (the chat narrows smoothly), so it never covers the chat's own buttons */
.console { transition:grid-template-columns .25s ease; }
.console { --brt-w:clamp(300px,24vw,400px); }
.console.brt-on { grid-template-columns:clamp(230px,18vw,320px) minmax(0,1fr) var(--brt-w); }
@media (min-width:1001px) and (max-width:1279px) { .console { --brt-w:clamp(280px,28vw,330px); } .console.brt-on { grid-template-columns:clamp(210px,21vw,260px) minmax(0,1fr) var(--brt-w); } }
@media (max-width:1000px) { .console.brt-on { grid-template-columns:minmax(0,1fr); } }
@media (prefers-reduced-motion: reduce) { .console { transition:none; } }
.brt-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.brt-x { background:none; border:0; color:var(--dim); font-size:20px; line-height:1; cursor:pointer; padding:0 4px; } .brt-x:hover { color:var(--ink); }
.brt-sum { padding:6px 12px 0; } .brt-sum:empty { display:none; } .brt-msg { color:var(--acc); margin-bottom:2px; }
.brt-list { flex:1; min-height:0; overflow:auto; padding:6px 0; }
.brt-empty { padding:10px 12px; line-height:1.45; }
.brt-card { display:grid; gap:4px; padding:10px 12px; border-bottom:1px solid rgba(94,234,212,.1); min-width:0; }
.brt-top { display:flex; align-items:baseline; gap:8px; min-width:0; }
.brt-name { font-weight:600; flex:1; min-width:0; overflow-wrap:anywhere; }
.brt-kind { font-size:9.5px; letter-spacing:.12em; color:var(--dim); border:1px solid var(--line); border-radius:8px; padding:1px 6px; flex:none; }
.brt-sched { color:var(--acc); }
.brt-what, .brt-lastsum { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.brt-lastsum { -webkit-line-clamp:1; }
.brt-state { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.brt-dot { width:8px; height:8px; border-radius:50%; background:var(--dim); flex:none; }
.brt-card[data-tone='on'] .brt-dot { background:var(--acc); box-shadow:0 0 0 3px rgba(94,234,212,.2); animation:brtpulse 1.6s ease-in-out infinite; }
.brt-card[data-tone='ok'] .brt-dot { background:var(--ok); } .brt-card[data-tone='warn'] .brt-dot { background:var(--warn); }
.brt-card[data-tone='dim'] .brt-name { color:var(--dim); }
@keyframes brtpulse { 50% { opacity:.45; } }
@media (prefers-reduced-motion: reduce) { .brt-card[data-tone='on'] .brt-dot { animation:none; } }
.brt-last { color:var(--dim); } .brt-last.alert { color:var(--warn); } .brt-last.error { color:var(--bad, #ff5664); }
.brt-acts { display:flex; gap:6px; flex-wrap:wrap; margin-top:2px; }
.brt-top-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:8px 12px; border-bottom:1px solid var(--line); }
.brt-top-actions:empty { display:none; }
.brt-foot { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:8px 12px; border-top:1px solid var(--line); }
/* 16.11.0 ROUTINES as cards in the right column (routines.js brtDock), where HUB CHANNEL (BOT TO BOT) was. Wide windows show the
   column, so the ROUTINES button and sliding panel are only for windows that hide it (1001-1279 px and phones). */
.brt-dock { display:flex; flex-direction:column; flex:1; min-height:0; }
.brt-dock > .hd { padding:9px 12px; border-bottom:1px solid var(--line); font-size:11px; letter-spacing:.18em; color:var(--acc); }
.brt-dock > .hd.brt-dhead { display:flex; align-items:center; gap:8px; padding-top:6px; padding-bottom:6px; }
.brt-dhead .btn.s { letter-spacing:.08em; padding:3px 9px; }
.brt-dock .brt-card { padding:9px 12px; }
.brt-dock .brt-acts .btn.s { padding:3px 8px; }
.brt-days { display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:4px; }
.brt-when { display:flex; gap:8px; align-items:center; flex-wrap:nowrap; }
.dlg .brt-when > input, .dlg .brt-when > select { width:auto; flex:none; min-width:0; }
@media (min-width:1280px) {
  .brt-btn, .brtp { display:none !important; }
  .console.brt-on { grid-template-columns:clamp(230px,18vw,320px) minmax(0,1fr) clamp(250px,20vw,360px); }
}
/* 16.11.0 files sent in a chat, shown again (console.js conFilesBox): pictures inline, other files as a chip to download */
.cx-atts { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.cx-att-pic { padding:0; border:1px solid var(--line); border-radius:8px; background:rgba(0,0,0,.2); cursor:zoom-in; overflow:hidden; line-height:0; max-width:100%; }
.cx-att-img { display:block; max-width:min(260px,100%); max-height:220px; width:auto; height:auto; object-fit:contain; }
.cx-att { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border:1px solid var(--line); border-radius:12px; font-size:12px; color:inherit; text-decoration:none; overflow-wrap:anywhere; }
.cx-att:hover { border-color:var(--acc); } .cx-att.gone { opacity:.7; }
.dlg.cx-pic-dlg { width:min(1100px,96vw); }
.cx-pic-big { display:flex; justify-content:center; min-height:0; }
.cx-pic-big img { max-width:100%; max-height:72vh; object-fit:contain; border-radius:6px; }

/* 16.13.0 Settings > UPGRADE: ON THIS DEVICE / ON THE HUB SERVER, and the hub-server package browser */
.up-src { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
@media (max-width:760px) { .up-src { grid-template-columns:minmax(0,1fr); } }
.up-side { border:1px solid var(--line,#2a4a55); border-radius:8px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; min-width:0; }
.up-side .sec { margin:0; }
.up-side .rt-drop { flex:1; display:flex; align-items:center; justify-content:center; }
.up-found { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 10px; border-radius:6px; background:rgba(10,165,165,.08); }
.up-fb-places { display:flex; flex-wrap:wrap; gap:6px; }
.up-fb-path { display:flex; gap:6px; align-items:center; }
.up-fb-path input { flex:1; min-width:0; font-family:ui-monospace,Consolas,monospace; font-size:12px; }
.up-fb-list { max-height:min(52vh,460px); overflow:auto; border:1px solid var(--line,#2a4a55); border-radius:6px; }
.up-fb-row { display:flex; align-items:center; gap:8px; padding:7px 10px; cursor:pointer; border-bottom:1px solid rgba(255,255,255,.06); min-width:0; }
.up-fb-row:last-child { border-bottom:0; }
.up-fb-row:hover, .up-fb-row:focus { background:rgba(10,165,165,.10); outline:none; }
.up-fb-row .nm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.up-fb-pkg .nm { font-weight:600; }
.up-fb-sub { display:block; font-weight:400; overflow:hidden; text-overflow:ellipsis; }
.up-fb-ic { width:18px; text-align:center; flex:none; }
.up-fb-meta { flex:none; white-space:nowrap; }
@media (max-width:600px) { .up-fb-meta { display:none; } .up-fb-pkg { flex-wrap:wrap; row-gap:4px; } .up-fb-pkg .nm { flex:1 1 calc(100% - 110px); } .up-fb-pkg .btn { order:3; } .up-fb-pkg .pill { order:4; margin-left:26px; } }
/* 16.14.0 Settings > MCP MARKETPLACE (hub/ui/mcp.js) */
.mcx-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px; }
.mcx-card { display:flex; flex-direction:column; gap:6px; min-width:0; margin:0; }
.mcx-desc { overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; word-break:break-word; }
.mcx-tools { display:grid; gap:2px; max-height:52vh; overflow:auto; border:1px solid var(--line); border-radius:6px; }
.mcx-tool { display:grid; grid-template-columns:minmax(0,1fr) minmax(170px,240px); gap:10px; align-items:center; padding:7px 10px; border-top:1px solid rgba(94,234,212,.1); }
.mcx-tool:first-child { border-top:0; } .mcx-tool select { width:100%; }
.mcx-bots { display:grid; gap:4px; max-height:30vh; overflow:auto; }
@media (max-width:760px) { .mcx-tool { grid-template-columns:1fr; } }
/* 16.16.0 bot computer window: edges and corners resize it (hub/ui/desktops.js dkResizable) */
.dkw-h{position:absolute;z-index:3;touch-action:none}
.dkw-n,.dkw-s{left:10px;right:10px;height:6px;cursor:ns-resize}.dkw-n{top:0}.dkw-s{bottom:0}
.dkw-e,.dkw-w{top:10px;bottom:10px;width:6px;cursor:ew-resize}.dkw-e{right:0}.dkw-w{left:0}
.dkw-ne,.dkw-nw,.dkw-se,.dkw-sw{width:14px;height:14px}.dkw-ne{top:0;right:0;cursor:nesw-resize}.dkw-sw{bottom:0;left:0;cursor:nesw-resize}.dkw-nw{top:0;left:0;cursor:nwse-resize}
.dkw-se{bottom:0;right:0;width:18px;height:18px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 0 55%,var(--acc) 55% 62%,transparent 62% 72%,var(--acc) 72% 79%,transparent 79%);opacity:.8}
.dkw-sizing,.dkw-sizing *{user-select:none}.dkw-sizing canvas{pointer-events:none}
.dkw:fullscreen .dkw-h{display:none}
/* 16.23.0 GitHub dialog (hub/ui/github.js): rows of two columns inside the dialog; one column on a phone */
.ghx-body { display:grid; gap:10px; min-width:0; } .ghx-body .ai-arow { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .ghx-body .ai-arow > .row { grid-column:1 / -1; } .ghx-aud { font-family:var(--mono,monospace); font-size:12px; padding:3px 0; border-bottom:1px solid rgba(94,234,212,.08); overflow-wrap:anywhere; }
@media (max-width:760px) { .ghx-body .ai-arow { grid-template-columns:minmax(0,1fr); } }
/* 16.23.1 GitHub SET UP BY HAND (hub/ui/github.js ghxManual): values to copy into GitHub’s own form, then App ID + key file */
.ghx-manual { margin-top:10px; } .ghx-steps { margin:8px 0; padding-left:20px; display:grid; gap:6px; } .ghx-val { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:2px 0; } .ghx-val code { overflow-wrap:anywhere; min-width:0; }
/* 16.24.0 (Jeremy) the side columns of MESSAGES fold to a thin rail (console.js plApply: classes pl-l / pl-r on #con-root, kept
   per person per device). The column widths are variables so folding, the ROUTINES panel (.brt-on) and every width share one
   grid, and the width change animates. Folding hides what is inside (display:none, never removed), so the computer view keeps
   its connection. 1001-1279 px: the right column is there again, folded at first (it was hidden). Phones: it is a sheet. */
.console { --pl-gap:clamp(8px,.9vw,14px); --pl-lw:var(--pl-user-l,clamp(230px,18vw,320px)); --pl-rw:var(--pl-user-r,clamp(250px,20vw,360px)); --pl-rail:48px; gap:var(--pl-gap); }
.console, .console.brt-on { grid-template-columns:var(--pl-lw) minmax(0,1fr) var(--pl-rw); }
@media (min-width:1001px) and (max-width:1279px) {
  .console { --pl-lw:var(--pl-user-l,clamp(210px,21vw,260px)); --pl-rw:var(--pl-user-r,clamp(250px,24vw,300px)); }
  .console > .pane[data-pl='r'] { display:flex; }
}
@media (min-width:1001px) {
  .console.pl-l { --pl-lw:var(--pl-rail); }
  .console.pl-r { --pl-rw:var(--pl-rail); }
  .console > .pane[data-pl='l'] > :not(.pl-rail):not(.pl-chev) { min-width:0; }
  .console.pl-l > .pane[data-pl='l'] > :not(.pl-rail):not(.pl-chev), .console.pl-r > .pane[data-pl='r'] > :not(.pl-rail):not(.pl-chev) { display:none !important; }
  .console.pl-l > .pane[data-pl='l'] > .pl-rail, .console.pl-r > .pane[data-pl='r'] > .pl-rail { display:flex; }
  .console.pl-l > .pane[data-pl='l'] > .pl-chev, .console.pl-r > .pane[data-pl='r'] > .pl-chev { display:none; }
}
/* below 1280 the ROUTINES button's panel still slides over the right column (folded or not) and takes its width */
@media (min-width:1001px) and (max-width:1279px) { .console.brt-on { --pl-rw:var(--brt-w); } }
.pl-chev { position:absolute; top:50%; z-index:6; width:14px; height:46px; margin-top:-23px; padding:0; display:grid; place-items:center; background:var(--panel); color:var(--dim); border:1px solid var(--line); border-radius:7px; cursor:pointer; opacity:.75; transition:opacity .15s ease, color .15s ease, border-color .15s ease; }
.pane[data-pl='l'] > .pl-chev { right:calc(var(--pl-gap) / -2 - 7px); }
.pane[data-pl='r'] > .pl-chev { left:calc(var(--pl-gap) / -2 - 7px); }
.pl-chev:hover, .pl-chev:focus-visible { opacity:1; color:var(--acc); border-color:var(--acc); }
.pl-rail { display:none; flex-direction:column; align-items:center; gap:8px; padding:8px 0; flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; }
.pl-items { display:flex; flex-direction:column; align-items:center; gap:7px; }
.pl-open, .pl-ico { position:relative; width:34px; height:34px; display:grid; place-items:center; padding:0; border-radius:8px; border:1px solid transparent; background:none; color:var(--ink); cursor:pointer; flex:none; }
.pl-open { border-color:var(--line); color:var(--acc); margin-bottom:4px; }
.pl-open:hover, .pl-ico:hover, .pl-open:focus-visible, .pl-ico:focus-visible { border-color:var(--acc); color:var(--acc); }
.pl-badge { position:absolute; top:-4px; right:-5px; min-width:15px; height:15px; padding:0 3px; border-radius:8px; font-size:9px; font-weight:700; line-height:15px; text-align:center; background:var(--acc); color:var(--bg); }
.pl-badge[data-tone='bad'] { background:var(--bad); }
.pl-badge[data-tone='on'], .pl-badge[data-tone='ok'] { background:none; color:var(--ok); font-size:11px; animation:brtpulse 1.6s ease-in-out infinite; }
.pl-bot { position:relative; width:34px; height:34px; padding:0; border-radius:50%; border:1px solid var(--line); background:rgba(94,234,212,.06); color:var(--ink); font-size:11px; font-weight:700; letter-spacing:.02em; cursor:pointer; flex:none; }
.pl-bot[data-on='1'] { border-color:var(--acc); background:rgba(94,234,212,.2); color:var(--acc); }
.pl-bot:hover { border-color:var(--acc); }
.pl-bot .dot { position:absolute; right:-1px; bottom:-1px; width:9px; height:9px; margin:0; border:2px solid var(--panel); }
@keyframes plIn { 0%, 45% { opacity:0; } 100% { opacity:1; } }
.console.pl-anim-l > .pane[data-pl='l'] > :not(.pl-chev), .console.pl-anim-r > .pane[data-pl='r'] > :not(.pl-chev) { animation:plIn .45s ease both; }
.pl-sheethead, .pl-scrim { display:none; }
@media (prefers-reduced-motion: reduce) { .pl-chev, .pl-badge { transition:none; animation:none; } .console.pl-anim-l > .pane > *, .console.pl-anim-r > .pane > * { animation:none !important; } }
/* phones and narrow windows (one column): the right column is a sheet from the bottom, opened by ROUTINES in the chat head */
@media (max-width:1000px) {
  .console, .console.brt-on { grid-template-columns:minmax(0,1fr); }
  .pl-chev, .pl-rail { display:none !important; }
  .brtp { display:none !important; }
  .console > .pane[data-pl='r'] { position:fixed; left:0; right:0; bottom:0; top:auto; height:min(84vh,760px); z-index:16; border-radius:14px 14px 0 0; border-color:var(--acc); box-shadow:0 -14px 34px rgba(0,0,0,.55); padding-bottom:env(safe-area-inset-bottom); overflow:auto; overscroll-behavior:contain; transform:translateY(calc(100% + 24px)); visibility:hidden; transition:transform .28s ease, visibility 0s linear .28s; }
  .console.pl-sheet > .pane[data-pl='r'] { transform:none; visibility:visible; transition:transform .28s ease, visibility 0s; }
  .console > .pane[data-pl='r'] > .pl-sheethead { display:flex; align-items:center; gap:8px; position:sticky; top:0; z-index:2; background:var(--panel); border-radius:14px 14px 0 0; }
  .console > .pane[data-pl='r'] > .pl-sheethead > span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
  .console.pl-sheet > .pl-scrim { display:block; position:fixed; inset:0; z-index:15; background:rgba(0,0,0,.5); }
  .console > .pane[data-pl='r'] .brt-dock { flex:1 0 auto; }
  .console > .pane[data-pl='r'] .afx { max-height:none; }
}
@media (max-width:1000px) and (prefers-reduced-motion: reduce) { .console > .pane[data-pl='r'], .console.pl-sheet > .pane[data-pl='r'] { transition:none; } }
/* 16.24.0 the eye button in Settings > CREDENTIALS (vault.js vtRevealDialog): the secret for 30 seconds, then wiped */
.vt-eye { font-size:13px; line-height:1; padding:3px 8px; }
.vt-rv { display:grid; gap:8px; min-width:0; }
.vt-rv-row { display:flex; gap:6px; align-items:flex-start; min-width:0; }
.vt-rv-val { flex:1; min-width:0; font-family:ui-monospace,Consolas,monospace; font-size:12.5px; }
textarea.vt-rv-val { resize:vertical; white-space:pre; overflow:auto; }
/* 16.25.0 ARTIFACTS > FILES (files.js): one row per file; the columns stack on a phone (data-l labels) */
.fls-list .ai-arow { grid-template-columns:minmax(0,2.2fr) minmax(0,.8fr) minmax(0,1.1fr) minmax(0,.9fr) auto; }
.fls-file { display:flex; align-items:center; gap:8px; min-width:0; }
.fls-ic { flex:none; color:var(--acc); font-size:16px; line-height:1; width:18px; text-align:center; }
.fls-row[data-kind='pdf'] .fls-ic { color:#ffb721; } .fls-row[data-kind='image'] .fls-ic { color:#9ad1ff; } .fls-row[data-kind='other'] .fls-ic, .fls-row[data-kind='sheet'] .fls-ic { color:var(--dim); }
.fls-main { display:grid; gap:1px; min-width:0; background:none; border:0; padding:0; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.fls-main:hover .fls-tt, .fls-main:focus-visible .fls-tt { color:var(--acc); text-decoration:underline; }
.fls-tt, .fls-nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.fls-acts { justify-content:flex-end; flex-wrap:wrap; gap:6px; }
.fls-count { margin:2px 0 4px; }
.fls-morebar { justify-content:center; margin:10px 0; }
@media (max-width:760px) { .fls-list .ai-arow { grid-template-columns:minmax(0,1fr); } .fls-acts { justify-content:flex-start; } .fls-list .ai-arow > .fls-file[data-l]::before { display:none; } }
/* 16.25.0 the PROJECT picker at the far left of a bot's chat head, chat titles and tags in HISTORY, the tag editor and MANAGE TAGS */
.cx-pj:not([hidden]) { display:inline-flex; align-items:center; flex:0 1 auto; min-width:0; max-width:min(240px,46vw); }
.cx-pjsel { width:100%; min-width:0; max-width:100%; font-size:11.5px; letter-spacing:.06em; padding:3px 6px; border-radius:12px; text-overflow:ellipsis; }
.cx-pj[data-on='1'] .cx-pjsel { border-color:var(--acc); color:var(--acc); }
.cx-histbar { flex-wrap:wrap; gap:8px; } .cx-histbar .cx-search { flex:2 1 180px; min-width:0; } .cx-htag { flex:1 1 130px; min-width:0; max-width:220px; }
.cx-histrow { min-width:0; } .cx-histacts { flex:none; gap:6px; flex-wrap:nowrap; }
.cx-tags { display:flex; flex-wrap:wrap; gap:4px; margin:3px 0 2px; min-width:0; }
.cx-tag { display:inline-flex; align-items:center; gap:2px; max-width:100%; font:inherit; font-size:10.5px; letter-spacing:.04em; line-height:1.5; color:var(--acc); background:rgba(94,234,212,.08); border:1px solid rgba(94,234,212,.35); border-radius:9px; padding:0 7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
button.cx-tag { cursor:pointer; } button.cx-tag:hover, button.cx-tag:focus-visible { border-color:var(--acc); }
.cx-tagx { all:unset; cursor:pointer; padding:0 2px 0 4px; font-size:13px; line-height:1; } .cx-tagx:hover, .cx-tagx:focus-visible { color:var(--bad); }
.cx-tagbox { display:grid; gap:4px; min-width:0; }
.cx-tagrow { display:flex; flex-wrap:wrap; align-items:center; gap:6px; border:1px solid var(--line); border-radius:6px; padding:6px; min-width:0; }
.cx-tagchips { display:contents; } .cx-taged { font-size:12px; padding:1px 4px 1px 9px; }
.cx-taginput { flex:1 1 140px; min-width:0; border:0 !important; background:none !important; padding:3px !important; }
.cx-tagnote[data-err='1'] { color:var(--bad); }
.dlg.cx-mtdlg { width:min(560px,94vw); }
.cx-mtags { display:grid; max-height:min(52vh,460px); overflow:auto; border:1px solid var(--line); border-radius:6px; }
.cx-mtag { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; padding:7px 10px; border-top:1px solid rgba(94,234,212,.1); min-width:0; }
.cx-mtag:first-child { border-top:0; } .cx-mtag-n { flex:1 1 160px; min-width:0; display:flex; align-items:center; gap:4px; }
.cx-mtag-a { gap:6px; flex-wrap:wrap; justify-content:flex-end; } .cx-mtag-a select { max-width:180px; min-width:0; }
@media (max-width:760px) { .cx-histrow { flex-wrap:wrap; } .cx-histacts { width:100%; justify-content:flex-start; } .cx-pj:not([hidden]) { max-width:100%; flex-basis:100%; } }

/* 16.29.0 bot identity, management and reactions */
.bi-avatar{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;flex:0 0 auto;width:52px;height:52px;border-radius:50%;object-fit:cover;background:var(--panel,var(--bg));border:1px solid var(--line);overflow:hidden}
.bi-avatar.small{width:30px;height:30px;margin-right:6px}
.bi-initial{font-weight:600;font-size:1.25rem;color:var(--text)}
.bc-head{flex-wrap:wrap;align-items:center;gap:10px}.bc-head h3{min-width:0;flex:1;overflow-wrap:anywhere}.bc-head .ai-tag{max-width:100%}
.bi-switch{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:inherit;cursor:pointer;font-size:.7rem;white-space:nowrap;min-height:36px;padding:4px}
.bi-switch-track{width:34px;height:20px;display:inline-block;border:1px solid currentColor;border-radius:12px;position:relative;opacity:.7}
.bi-switch-track:after{content:'';position:absolute;left:3px;top:3px;width:12px;height:12px;border-radius:50%;background:currentColor;transition:transform .15s}
.bi-switch[data-on="1"]{color:var(--ok,var(--accent))}.bi-switch[data-on="1"] .bi-switch-track:after{transform:translateX(14px)}
.bi-switch:disabled{opacity:.5;cursor:wait}.bi-switch:focus-visible,.bi-drag:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.bi-order{display:inline-flex;gap:2px;align-items:center}.bi-drag{padding:5px;cursor:grab;touch-action:none;font-size:1.2rem}.bi-order .btn{padding:3px 6px}
.bi-table-wrap{max-width:100%;overflow:auto}.bi-table{width:100%;border-collapse:collapse;min-width:700px}.bi-table th,.bi-table td{text-align:left;padding:12px;border-bottom:1px solid var(--line);vertical-align:middle}.bi-table td:first-child{max-width:330px}.bi-table .bc-acts{flex-wrap:wrap}.bi-table tr[hidden]{display:none}.bi-table .small{overflow-wrap:anywhere}
.bi-picker{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start;margin:12px 0}.bi-crop{width:200px;height:200px;max-width:100%;border-radius:50%;border:1px solid var(--line);touch-action:none;cursor:move;background:var(--panel,var(--bg))}.bi-picker-controls{flex:1;min-width:210px;max-width:100%}.bi-picker-controls input[type=file]{max-width:100%}.bi-picker input[type=range]{width:100%}.bi-picker-controls select{margin:8px 8px 8px 0;max-width:100%}
.bi-reaction{display:block;width:fit-content;border:1px solid var(--line);border-radius:18px;padding:2px 8px;margin-top:6px;font-size:1rem;background:var(--panel,var(--bg))}
.cx-side .li{flex-wrap:wrap}.cx-side .li .n{min-width:65px}.cx-side .bi-switch{margin-left:auto}.cx-side .bi-order .bi-drag{padding:2px}.cx-side .bi-avatar{margin-right:0}
/* 16.30.0 Two pointer/keyboard separators. Resizing never rebuilds any pane. */
.pl-resize { position:absolute; top:8px; bottom:8px; width:12px; z-index:5; cursor:col-resize; touch-action:none; border-radius:6px; }
.pane[data-pl='l'] > .pl-resize { right:calc(var(--pl-gap) / -2 - 6px); }
.pane[data-pl='r'] > .pl-resize { left:calc(var(--pl-gap) / -2 - 6px); }
.pl-resize::after { content:''; position:absolute; top:0; bottom:0; left:5px; width:2px; background:var(--line); border-radius:2px; }
.pl-resize:hover::after, .pl-resize:focus-visible::after { background:var(--acc); }
.pl-resize:focus-visible { outline:1px solid var(--acc); }
.console.pl-resizing { transition:none; user-select:none; }
.console.pl-resizing iframe { pointer-events:none; }
.fleet-viewer:fullscreen { display:flex; flex-direction:column; width:100vw; height:100vh; padding:10px; background:var(--panel); }
.fleet-viewer:fullscreen > .fleet-viewer-screen { flex:1; min-height:0; height:auto !important; }
.fleet-viewer:fullscreen > .row { flex:none; }
/* 20.0.4 full screen where the browser has none (iPhone): hubFsToggle pins the element over the whole page */
html.hub-fs-lock, html.hub-fs-lock body { overflow:hidden; }
.hub-fs-fill { position:fixed !important; inset:0 !important; left:0 !important; top:0 !important; width:auto !important; height:auto !important; max-width:none !important; max-height:none !important; margin:0 !important; border-radius:0 !important; z-index:10050 !important; box-sizing:border-box; padding:max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)) !important; }
.fleet-viewer.hub-fs-fill { display:flex; flex-direction:column; background:var(--panel); }
.fleet-viewer.hub-fs-fill > .fleet-viewer-screen { flex:1; min-height:0; height:auto !important; }
.fleet-viewer.hub-fs-fill > .row { flex:none; }
.dkw.hub-fs-fill .dkw-h { display:none; }
#cx-bots .li { display:flex; flex-wrap:wrap; align-items:center; gap:4px; padding:8px; }
#cx-bots .li .n { flex:1 1 90px; min-width:0; }
#cx-bots .li .t { font-size:13px; line-height:1.3; overflow-wrap:anywhere; }
#cx-bots .li .sub, #cx-bots .li .ai-tag { font-size:11px; line-height:1.35; }
#cx-bots .li > .cx-tile-acts { flex:none; margin-left:auto; display:flex; align-items:center; gap:4px; } /* 19.18.3 switch, MORE, open icon: one group, icon far right */
#cx-bots .cx-tile-acts > .bi-switch { flex:none; font-size:11px; margin-left:0; }
#cx-bots .cx-tile-acts > .li-open { align-self:center; margin-left:0; }
#cx-bots .cx-tile-acts > .cx-ws-btn { flex:none; padding:2px 7px; font-size:10px; letter-spacing:.08em; line-height:1.5; } /* 19.20.0 WORKSHOP is its own button (MORE held only it) */
@media(max-width:1000px) { .pl-resize { display:none !important; } }
@media(prefers-reduced-motion:reduce) { .console { transition:none; } }
@media(max-width:600px){.bc-head .bi-order{order:5}.bi-picker{justify-content:center}.bi-picker-controls{width:100%}.bc-head h3{flex-basis:calc(100% - 72px)}}
.ai-arow.nwd-row { grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,1.4fr) 210px; } /* 19.12.0 front doors */
@media (max-width:760px) { .ai-arow.nwd-row { grid-template-columns:minmax(0,1fr); } .ai-arow.nwd-row > .row { justify-content:flex-start !important; } }
.ai-arow.nwc-row { grid-template-columns:minmax(0,1.7fr) minmax(0,1.3fr) minmax(0,.7fr) minmax(0,.5fr) 130px; } /* 19.13.0 connections */
.ai-dot.nwc-old { background:var(--warn,#f59e0b); opacity:1; box-shadow:0 0 6px var(--warn,#f59e0b); }
.nwc-tools select { width:auto; min-width:0; max-width:100%; flex:0 1 auto; }
@media (max-width:760px) { .ai-arow.nwc-row { grid-template-columns:minmax(0,1fr); } .ai-arow.nwc-row > .row { justify-content:flex-start !important; } .nwc-tools select { flex:1 1 100%; } }

/* 19.13.1 Chat bubbles read like a conversation: a bot answer is formatted text (headings, bold, lists, tables, code) in a
   rounded bubble of readable width; what you send is a compact rounded bubble on the right. Colours stay the theme's own. */
.cx-chat .m.bot, .cx-chat .m.me { border-radius:16px; }
.cx-chat .m.bot { max-width:min(82%, 54rem); min-width:0; padding:12px 16px 22px; line-height:1.55; }
.cx-chat .m.me { max-width:min(72%, 44rem); border-radius:18px; padding:9px 15px; line-height:1.45; }
.cx-chat .m.note { max-width:min(88%, 54rem); }
.cx-md { white-space:normal; word-break:normal; overflow-wrap:anywhere; }
.cx-md > :first-child { margin-top:0; }
.cx-md > :last-child { margin-bottom:0; }
.cx-md p { margin:0 0 .75em; }
.cx-md-h { font-weight:700; line-height:1.3; margin:1.05em 0 .45em; color:var(--ink); letter-spacing:normal; }
.cx-md-h1 { font-size:1.22em; } .cx-md-h2 { font-size:1.12em; } .cx-md-h3 { font-size:1.04em; } .cx-md-h4 { font-size:1em; color:var(--dim); }
.cx-md strong { font-weight:700; }
.cx-md em { font-style:italic; }
.cx-md del { opacity:.7; }
.cx-md a { color:var(--acc); text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere; }
.cx-md ul, .cx-md ol { margin:0 0 .75em; padding-left:1.45em; }
.cx-md li { margin:.3em 0; }
.cx-md li > ul, .cx-md li > ol { margin:.3em 0 0; }
.cx-md li::marker { color:var(--dim); }
.cx-md li.cx-md-task { list-style:none; margin-left:-1.2em; }
.cx-md-box { display:inline-block; width:1.2em; color:var(--acc); }
.cx-md code { font:.9em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background:rgba(127,127,127,.18); border-radius:5px; padding:.08em .38em; overflow-wrap:anywhere; }
.cx-md pre { margin:.25em 0 .85em; padding:10px 12px; border-radius:10px; background:rgba(0,0,0,.30); border:1px solid var(--line); overflow:auto; white-space:pre; max-height:28rem; }
.cx-md pre code { background:none; padding:0; border-radius:0; font-size:12.5px; line-height:1.5; overflow-wrap:normal; }
.cx-md blockquote { margin:0 0 .75em; padding:.15em 0 .15em .9em; border-left:3px solid var(--acc); color:var(--dim); }
.cx-md hr { border:0; border-top:1px solid var(--line); margin:.9em 0; }
.cx-md-table { max-width:100%; overflow-x:auto; margin:.25em 0 .85em; border:1px solid var(--line); border-radius:10px; }
.cx-md table { border-collapse:collapse; width:100%; font-size:.93em; line-height:1.4; }
.cx-md th, .cx-md td { padding:7px 11px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); overflow-wrap:normal; word-break:normal; }
.cx-md th { font-weight:700; color:var(--dim); background:rgba(127,127,127,.08); white-space:nowrap; }
.cx-md tbody tr:last-child td { border-bottom:0; }
.cx-chat .m .cx-msgtools { justify-content:flex-start; }
@media (max-width:700px) { .cx-chat .m.bot { max-width:94%; padding:10px 13px 22px; } .cx-chat .m.me { max-width:86%; } }
/* 19.19.0 BOTS > SKILLS (hub/ui/skills.js) */
.skl-list .ai-arow { grid-template-columns:minmax(200px,2.4fr) minmax(110px,.8fr) minmax(130px,.9fr) auto; }
.skl-hist .ai-arow { grid-template-columns:minmax(150px,.8fr) minmax(200px,2fr) minmax(120px,1fr); }
.skl-imp .ai-arow { grid-template-columns:minmax(180px,1.5fr) minmax(220px,1.5fr); }
.skl-name { background:none; border:0; padding:0; color:inherit; font:inherit; font-weight:600; cursor:pointer; text-align:left; } .skl-name:hover { color:var(--acc); }
.skl-pre { background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:10px; font-size:12.5px; }
@media (max-width:760px) { .skl-list .ai-arow, .skl-hist .ai-arow, .skl-imp .ai-arow { grid-template-columns:1fr; } }
/* 19.20.0 SKILLS beside a bot's chat (routines.js bsk*) */
.bsk { display:grid; gap:8px; min-width:0; padding:4px 0; }
.bsk-acts { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.bsk-list { display:grid; gap:8px; min-width:0; }
.bsk-card .brt-name.skl-name { text-align:left; min-width:0; overflow-wrap:anywhere; }
.bsk-foot { padding-top:2px; }
.bsk-fold { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:6px 0; margin:6px 0; }
.bsk-fold > summary { cursor:pointer; list-style:none; padding:2px 0 6px; }
.bsk-fold > summary::-webkit-details-marker { display:none; }
.bsk-fold > summary::before { content:'\25B8  '; opacity:.7; }
.bsk-fold[open] > summary::before { content:'\25BE  '; }
/* 19.20.0 CONFIGURE > BROWSER UPLOAD (app.js cfgUploadPicker) */
.cfgup { display:grid; gap:10px; min-width:0; }
.cfgup .f { display:grid; gap:6px; }
.cfgup-list { display:grid; gap:4px; min-width:0; }
.cfgup-row { display:flex; align-items:center; gap:8px; padding:4px 8px; border:1px solid var(--line); border-radius:6px; min-width:0; }
.cfgup-site { flex:1; min-width:0; overflow-wrap:anywhere; font-size:13px; }
.cfgup-add { flex-wrap:nowrap; } .cfgup-add input { flex:1; min-width:0; }
/* 20.0.3 (Jeremy, iPad in a browser) CHATS between 701 and 1000 px: the bots list sat full width ABOVE the chat. Now the two sit
   side by side like a laptop, with a narrower bots column; the right column stays the sheet from the bottom (ROUTINES).
   The chat fills the window (console.js conFit) instead of growing the page. Phones (700 px and less) are unchanged. */
@media (min-width:701px) and (max-width:1000px) {
  .console { --pl-tw:clamp(196px,26vw,250px); }
  .console, .console.brt-on { grid-template-columns:var(--pl-tw) minmax(0,1fr); height:var(--cx-h, calc(100vh - 150px)); min-height:420px; }
  .console.pl-l, .console.pl-l.brt-on { --pl-tw:var(--pl-rail); }
  .console > .pane[data-pl='l'] > .pl-chev { display:grid !important; }
  .console.pl-l > .pane[data-pl='l'] > .pl-rail { display:flex !important; }
  .console.pl-l > .pane[data-pl='l'] > :not(.pl-rail) { display:none !important; }
  .console > .pane[data-pl='l'] > :not(.pl-rail):not(.pl-chev) { min-width:0; }
}
/* 20.0.3 DEVICES rows: SHELL, REMOTE, FILES and MORE on one line, Allow control under them (app.js fillRows) */
.fl-acts { display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0; }
.fl-acts-main { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.fl-acts-main > .btn, .fl-acts-main > details.menu { flex:none; }
.fl-acts .check { white-space:nowrap; font-size:12px; }
/* phones and narrow tablets: each device is a card (label above each value) instead of an eight-column table */
@media (max-width:760px) {
  .fl-tbl thead { display:none; }
  .fl-tbl, .fl-tbl tbody { display:block; }
  .fl-tbl tr { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2px 12px; padding:8px 4px 8px 34px; border-bottom:1px solid var(--line); }
  .fl-tbl td { display:block; border-bottom:0 !important; padding:4px 6px !important; min-width:0; overflow-wrap:anywhere; }
  .fl-tbl td[data-l=''] { position:absolute; left:2px; top:10px; padding:4px !important; }
  .fl-tbl td[data-l='Actions'], .fl-tbl td[data-l='Tags'] { grid-column:1 / -1; }
  .fl-tbl td[data-l='Tags']:empty { display:none; }
  .fl-tbl td[data-l]:not([data-l=''])::before { content:attr(data-l); display:block; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin-bottom:2px; }
  .fl-wrap { overflow-x:visible !important; }
}
/* 20.0.6 trackpad mode on touch screens: the pointer dot while the remote computer sends no pointer picture of its own */
.hub-tp-dot { position:absolute; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:#fff; border:2px solid #000; box-shadow:0 0 0 1px #fff; pointer-events:none; z-index:3; }
.hub-tp-dot[hidden] { display:none; }