/* aqeelOS — layout and components on top of assets/brand.css */
html,body{height:100%}
body{overflow:hidden}
.app{display:grid;grid-template-columns:var(--side-w,272px) minmax(0,1fr);height:100dvh;transition:grid-template-columns var(--t-med) var(--ease)}
.app.collapsed{--side-w:68px}

/* ---------- sidebar ---------- */
.side{display:flex;flex-direction:column;min-height:0;background:var(--surface);border-right:1px solid var(--border);overflow:hidden}
.side-top{height:60px;flex:none;display:flex;align-items:center;gap:8px;padding:0 12px 0 18px}
.side-top .wordmark{flex:1;min-width:0;overflow:hidden}
.side-top .wordmark span{white-space:nowrap;transition:opacity var(--t-fast)}
.collapsed .side-top{padding:0 16px;justify-content:center}
.collapsed .side-top .wordmark span,.collapsed .side-top .collapse-btn{display:none}
.sections{display:flex;flex-direction:column;gap:2px;padding:6px 10px 10px}
.sec{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:40px;padding:0 12px;border:0;border-radius:var(--r-pill);background:transparent;box-shadow:none;color:var(--ink-2);font-size:14px;font-weight:500;justify-content:flex-start}
.sec:hover{background:var(--soft-2);color:var(--ink);transform:none;box-shadow:none}
.sec.on{background:var(--blue-soft);color:var(--blue);font-weight:600}
.dark .sec.on{color:var(--blue-2)}
.sec svg{flex:none}
.sec .kbd{margin-left:auto;font-size:11px;color:var(--muted);font-weight:500;opacity:0;transition:opacity var(--t-fast)}
.sec:hover .kbd{opacity:1}
.collapsed .sec{justify-content:center;padding:0}
.collapsed .sec .label,.collapsed .sec .kbd{display:none}
.side-sub{flex:1;min-height:0;display:flex;flex-direction:column;border-top:1px solid var(--border)}
.collapsed .side-sub{display:none}
.side-sub-head{display:flex;align-items:center;gap:8px;padding:14px 14px 8px 18px}
.side-sub-head .th{flex:1}
.side-search{margin:0 12px 8px;position:relative}
.side-search input{padding-left:36px;height:38px;background:var(--soft-2);border-color:transparent}
.side-search input:focus{background:var(--surface)}
.side-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.side-list{flex:1;min-height:0;overflow-y:auto;padding:0 10px 12px;scrollbar-width:thin}
.group-label{font-size:12px;font-weight:600;color:var(--muted);padding:14px 10px 6px}
.item{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:7px 10px;border:0;border-radius:var(--r-md);background:transparent;box-shadow:none;color:var(--ink-2);font-size:13.5px;font-weight:500;text-align:left;justify-content:flex-start}
.item:hover{background:var(--soft-2);color:var(--ink);transform:none;box-shadow:none}
.item.on{background:var(--soft);color:var(--ink);font-weight:600}
.item .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .src{color:var(--muted);flex:none}
.item .live{color:var(--blue);animation:pulse 1.6s ease-in-out infinite}
.item .more{opacity:0;width:26px;min-height:26px;padding:0;border:0;background:transparent;box-shadow:none;color:var(--muted);flex:none}
.item:hover .more,.item.on .more{opacity:1}
.item .more:hover{background:var(--surface);transform:none}
.item .n{margin-left:auto;font-size:12px;color:var(--muted);font-weight:500}
.side-foot{flex:none;border-top:1px solid var(--border);padding:10px}
.status-btn{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px 10px;border:0;border-radius:var(--r-md);background:transparent;box-shadow:none;justify-content:flex-start;text-align:left}
.status-btn:hover{background:var(--soft-2);transform:none;box-shadow:none}
.status-btn .avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(180deg,var(--blue-2),var(--blue));color:#fff;display:grid;place-items:center;font-size:12.5px;font-weight:600;flex:none}
.status-btn .who{flex:1;min-width:0;line-height:1.25}
.status-btn .who b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status-btn .who span{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden}
.status-btn .who em{font-style:normal;min-width:0;overflow:hidden;text-overflow:ellipsis} /* a flex line can't ellipsize a bare text node, so the label sits in its own box */
.status-btn .who .dot{color:var(--ok);width:7px;height:7px;flex:none}
.status-btn>svg{flex:none} /* long agent names stop before the chevron instead of running under it */
.collapsed .status-btn{justify-content:center;padding:8px 0}
.collapsed .status-btn .who,.collapsed .status-btn>svg{display:none}

/* ---------- main ---------- */
.main{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative;background:var(--soft-2)}
.topbar{height:60px;flex:none;display:flex;align-items:center;gap:10px;padding:0 20px 0 24px;border-bottom:1px solid rgba(226,227,233,.7);background:rgba(255,255,255,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);position:relative;z-index:3}
.dark .topbar{background:rgba(23,28,37,.78);border-color:var(--border)}
.topbar .menu-btn{display:none}
.crumbs{display:flex;align-items:center;gap:8px;min-width:0;font-size:14px;color:var(--muted)}
.crumbs b{color:var(--ink);font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumbs svg{flex:none;opacity:.6}
/* a narrow main area: the trail shortens, the buttons never slide over it */
.crumbs{flex:1 1 auto;overflow:hidden}.crumbs>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}.crumbs b{flex:0 1 auto;min-width:0}.topbar .top-actions{flex:none}
@media (min-width:761px) and (max-width:1020px){.app:not(.collapsed) .k-btn .k-label,.app:not(.collapsed) .k-btn kbd{display:none}.app:not(.collapsed) .k-btn{padding:0 10px}}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.k-btn{min-height:36px;padding:0 10px 0 12px;color:var(--muted);gap:10px;font-size:13px;background:var(--surface)}
.k-btn kbd{font:inherit;font-size:11.5px;font-weight:600;color:var(--ink-2);background:var(--soft);border:1px solid var(--border);border-radius:6px;padding:2px 6px}
.view{flex:1;min-height:0;overflow-y:auto;position:relative;scrollbar-width:thin}
.view.enter{animation:viewIn var(--t-med) var(--ease) both}
@keyframes viewIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.banner{display:flex;align-items:center;gap:12px;margin:0;padding:10px 24px;background:#fff6e6;color:#6b4100;font-size:13.5px;border-bottom:1px solid #f3dfb8;animation:fade var(--t-med) var(--ease)}
.dark .banner{background:#2e2414;color:#f0c98a;border-color:#4a3a1f}
.banner button{margin-left:auto;min-height:30px;padding:0 12px;font-size:12.5px}
.banner{flex-wrap:wrap}.banner>span{flex:1 1 240px;min-width:0}.banner>span+button{margin-left:auto}.banner>button+button{margin-left:0}.banner small{font-size:12px}
.banner.closing{animation:fadeOut .2s var(--ease) both}
@media (max-width:600px){.banner{padding:10px 16px;gap:8px 12px}}

/* page layout */
.page{max-width:1080px;margin:0 auto;padding:32px 32px 80px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px}
.page-head h1{font-size:28px;font-weight:600;letter-spacing:-.8px;margin:12px 0 6px}
.page-head p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.55;max-width:620px}
.tabs{display:inline-flex;gap:2px;background:var(--soft);border:1px solid var(--border);border-radius:var(--r-pill);padding:3px;margin-bottom:20px;position:relative}
.tabs button{min-height:32px;padding:6px 16px;border:0;background:transparent;box-shadow:none;font-size:13.5px;color:var(--ink-2);position:relative;z-index:1;white-space:nowrap;flex:none}
/* a long row of tabs scrolls inside its own width on phones */
.tabs{max-width:100%;overflow-x:auto;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}
/* tabs wider than the screen scroll in their bar; the cut edge fades so it reads as "more this way" (a bar that fits has no fade) */
@property --tf-l{syntax:'<length>';inherits:false;initial-value:0px}@property --tf-r{syntax:'<length>';inherits:false;initial-value:0px}
@keyframes tabFade{0%{--tf-l:0px;--tf-r:32px}12%{--tf-l:32px}88%{--tf-r:32px}100%{--tf-l:32px;--tf-r:0px}}
@supports (animation-timeline:scroll()){.tabs{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--tf-l),#000 calc(100% - var(--tf-r)),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 var(--tf-l),#000 calc(100% - var(--tf-r)),transparent 100%);animation:tabFade linear both;animation-timeline:scroll(self inline)}
 .tabs.reveal{animation:reveal .42s var(--ease) backwards,tabFade linear both;animation-timeline:auto,scroll(self inline);animation-delay:calc(min(var(--ri,0),8) * 45ms),0s}}   /* keeps its entrance */
.tabs button:hover{transform:none;box-shadow:none;color:var(--ink)}
.tabs button.on{color:var(--ink);font-weight:600}
.tabs .pill{position:absolute;top:3px;bottom:3px;border-radius:var(--r-pill);background:var(--surface);box-shadow:0 1px 2px rgba(11,12,16,.1);transition:left var(--t-med) var(--ease),width var(--t-med) var(--ease)}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.toolbar .search{position:relative;flex:1;max-width:320px}
.toolbar .search input{padding-left:38px}
/* phones: search gets its own full line, the filters share the next one */
@container page (max-width:520px){.toolbar .search{flex:1 1 100%;max-width:none}.toolbar>.sel-btn{flex:1 1 0;min-width:0;width:auto}}
.toolbar .search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted)}
.toolbar .search:has(.s-clear) input{padding-right:40px}
.toolbar .search .s-clear{position:absolute;right:4px;top:50%;transform:translateY(-50%) scale(.85);width:34px;min-height:34px;height:34px;padding:0;opacity:0;pointer-events:none;transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.toolbar .search.has-q .s-clear{opacity:1;pointer-events:auto;transform:translateY(-50%) scale(1)}
.toolbar .search .s-clear svg{position:static;transform:none}
/* skills hub, tool groups, plugin and app details: quiet extras under the main text */
.hub-src{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:-6px 0 14px}.hub-src:empty{display:none}.hub-src>.hint{flex-basis:100%}
.hub-src-l{font-size:12px;color:var(--muted);margin-right:2px}
.hub-src .chip,.hub-tags .chip,.hub-pv-head .chip,.cap-chips .chip{font-size:11.5px;padding:1px 8px}
.row .txt .hub-tags,.hub-tags,.cap-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.row .txt .hub-id,.hub-id{display:block;font-size:11.5px;color:var(--muted);overflow-wrap:anywhere;margin-top:2px}
.hub-meta{margin:0 0 8px}.hub-warn{margin:0 0 10px;color:var(--warn)}.hub-warn svg{vertical-align:-2px}
.hub-pv-head,.hub-scan-head{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.hub-files{display:flex;flex-direction:column;gap:2px;padding:4px 0}.hub-files code{font-size:12px;overflow-wrap:anywhere}
.hub-finds{margin-top:12px}.hub-finds .txt b .chip{margin-right:4px}
.cmd-copy{display:flex;gap:8px;align-items:flex-start;margin:6px 0 0}.cmd-copy code{flex:1;min-width:0;font-size:12px;background:var(--soft-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:6px 10px;overflow-wrap:anywhere;white-space:pre-wrap}
.cmd-copy button{flex:none}
.tile .t-meta{font-size:12px;color:var(--muted);margin:2px 0 0;line-height:1.45;overflow-wrap:anywhere}.tile .t-meta a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.tile .t-warn{font-size:12.5px;color:var(--bad);margin:4px 0 0;line-height:1.45}
.tile details.aam-more{margin-top:2px}.tile details.aam-more>summary{font-size:12.5px;padding:2px 0}
.setup-step{border-top:1px solid var(--border);padding:10px 0}.setup-step:first-child{border-top:0}
.mem-secret{display:flex;gap:6px;align-items:center}.mem-secret input{flex:1;min-width:0}.mem-secret button{flex:none;width:40px;min-height:40px}
.mem-f{margin-bottom:4px}.mem-f[hidden]{display:none}.mem-warn{margin:0 0 10px}.mem-ctx{border-top:1px solid var(--border);margin:6px -12px 0;padding:12px 12px 0}.mem-deps{margin-top:14px}.mem-res{margin-top:12px}
.mem-prov .row .txt b .chip,.mem-deps summary .chip{font-size:11px;padding:1px 7px;margin-left:4px;font-weight:500;vertical-align:1px}.aam-mem{margin-top:16px}
.pl-url{margin-bottom:16px}.pl-url-row{display:flex;gap:8px;margin:0 0 10px}.pl-url-row input{flex:1;min-width:0}.pl-url-row button{flex:none}
.row[data-pl] .txt b .chip,.hub-finds .txt b .chip{font-size:11px;padding:1px 7px;vertical-align:1px;margin-left:4px;font-weight:500}
.list{padding:6px 0;overflow:hidden}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:14px 22px;border-top:1px solid var(--border);animation:rise var(--t-med) var(--ease) both}
.row:first-child{border-top:0}
.row:hover{background:var(--soft-2)}
.row.clickable{cursor:pointer}
.tile .tile-foot .switch{margin-left:auto}
.tile>button:last-child{align-self:flex-start}
.row .main-c{display:flex;align-items:center;gap:14px;min-width:0}
.row .ic,.tsg-head .ic{width:38px;height:38px;border-radius:var(--r-md);background:var(--soft);display:grid;place-items:center;color:var(--ink-2);flex:none}
.row .ic.blue{background:var(--soft);color:var(--ink-2)} /* one neutral tile for every list row icon (skills, schedules, tool groups, apps); on/off is the switch's job, warn keeps its colour */
.row .txt{min-width:0}
.row .txt b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.15px}
.row .txt span{display:block;font-size:13px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .act{display:flex;align-items:center;gap:8px}
.list-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:14px 22px 10px}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.tile{padding:20px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:12px;min-height:auto;white-space:normal;font-weight:inherit;line-height:1.4;color:inherit;font-size:inherit;cursor:pointer;transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),border-color var(--t-fast);animation:rise var(--t-med) var(--ease) both;text-align:left}
.tile:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(11,12,16,.04),0 20px 44px -24px rgba(11,12,16,.28);border-color:#d2d4dc}
.tile .tile-top{display:flex;align-items:center;gap:12px}
.tile .logo{width:40px;height:40px;border-radius:var(--r-md);display:grid;place-items:center;font-weight:700;font-size:15px;color:#fff;flex:none}
.tile h3{margin:0;font-size:15px;font-weight:600}
.tile p{margin:0;font-size:13px;color:var(--ink-2);line-height:1.5}
.tile .tile-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.stat{padding:18px 20px;animation:rise var(--t-med) var(--ease) both}
.stat .th{display:block;margin-bottom:8px}
.stat b{font-size:26px;font-weight:600;letter-spacing:-.8px}
.stat small{display:block;font-size:12.5px;color:var(--muted);margin-top:4px}
.panel{padding:22px;margin-bottom:16px;animation:rise var(--t-med) var(--ease) both}
.panel h2{font-size:16px;font-weight:600;letter-spacing:-.2px;margin:0 0 4px}
.panel .sub{font-size:13px;color:var(--muted);margin:0 0 16px}
.two{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px}
/* a lone panel in a pair (its partner moved to another tab) takes the whole row */
.two>.panel:only-child{grid-column:1/-1}
.field{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,260px);gap:16px;align-items:center;padding:14px 0;border-top:1px solid var(--border)}
.field:first-of-type{border-top:0}
.field label{font-size:14px;font-weight:500}
.field label small{display:block;font-size:12.5px;color:var(--muted);font-weight:400;margin-top:2px;line-height:1.45}
.switch{appearance:none;-webkit-appearance:none;width:42px;height:24px;padding:0;border:0;border-radius:var(--r-pill);background:#d4d6de;position:relative;cursor:pointer;flex:none;transition:background var(--t-fast)}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(11,12,16,.25);transition:transform var(--t-med) var(--ease)}
.switch:checked{background:linear-gradient(180deg,var(--blue-2),var(--blue))}
.switch:checked::after{transform:translateX(18px)}
.switch:focus{box-shadow:none}
.dark .switch{background:#3a4250}
.chart{display:flex;align-items:flex-end;gap:6px;height:180px;padding:10px 4px 0}
.chart .b{flex:1;display:flex;flex-direction:column-reverse;gap:2px;height:100%;justify-content:flex-start;position:relative}
.chart .b i{display:block;border-radius:4px;transform-origin:bottom;animation:grow .5s var(--ease) both}
.chart .b i.in{background:var(--blue)}
.chart .b i.out{background:var(--sky-1)}
.dark .chart .b i.out{background:#2b4570}
.chart .b:hover i{filter:brightness(1.08)}
.chart-x{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);padding:8px 4px 0}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.legend{display:flex;gap:16px;font-size:12.5px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;padding:10px 12px}
td{padding:11px 12px;border-top:1px solid var(--border)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.log{font-family:var(--mono);font-size:12.5px;line-height:1.7;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:14px 16px;max-height:440px;overflow:auto;white-space:pre}
.log .w{color:var(--warn)}.log .e{color:var(--bad)}.log .d{color:var(--muted)}
.empty-hero{border-radius:var(--r-card);padding:40px;text-align:center;background:radial-gradient(60% 260px at 50% 0%,rgba(255,255,255,.9),transparent 70%),linear-gradient(180deg,var(--sky-1),var(--sky-2));border:1px solid var(--border)}
.dark .empty-hero{background:linear-gradient(180deg,var(--sky-1),var(--sky-2))}

/* ---------- chat ---------- */
.chat{display:flex;flex-direction:column;height:100%}
.chat-scroll{flex:1;min-height:0;overflow-y:auto;scroll-behavior:smooth;scrollbar-width:thin}
.thread{max-width:780px;margin:0 auto;padding:32px 28px 24px;display:flex;flex-direction:column;gap:22px}
.msg{animation:rise var(--t-med) var(--ease) both}
.msg.user{align-self:flex-end;max-width:78%;background:var(--surface);border:1px solid var(--border);border-radius:20px 20px 6px 20px;padding:12px 16px;font-size:15px;line-height:1.6;box-shadow:0 1px 2px rgba(11,12,16,.04)}
.msg.ai{display:flex;gap:14px}
.msg.ai .who{width:28px;height:28px;display:grid;place-items:center;flex:none;margin-top:2px}
.msg.ai .body{flex:1;min-width:0;font-size:15px;line-height:1.7;color:var(--ink)}
.msg.ai .body p{margin:0 0 12px}
.msg.ai .body p:last-child{margin-bottom:0}
.msg.ai .body ul{margin:0 0 12px;padding-left:20px}
.msg.ai .body code{font-family:var(--mono);font-size:13px;background:var(--soft);border-radius:6px;padding:1px 6px}
.codeblock{position:relative;margin:4px 0 14px;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.codeblock .cb-head{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 6px 14px;border-bottom:1px solid var(--border);font-size:12px;color:var(--muted);background:var(--soft-2)}
.codeblock .cb-head button{min-height:28px;padding:0 10px;font-size:12px}
.codeblock pre{margin:0;padding:12px 14px;font-family:var(--mono);font-size:13px;line-height:1.6;overflow-x:auto}
.msg-tools{display:flex;gap:2px;margin-top:8px;opacity:0;transition:opacity var(--t-fast)}
.msg.ai:hover .msg-tools{opacity:1}
.msg-tools button{width:30px;min-height:30px;padding:0;border:0;background:transparent;box-shadow:none;color:var(--muted)}
.msg-tools button:hover{background:var(--soft);color:var(--ink);transform:none}
.msg-tools .meta{font-size:12px;color:var(--muted);align-self:center;margin-left:8px}
.steps{display:flex;flex-direction:column;gap:6px;margin:0 0 14px}
.step{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);overflow:hidden;animation:rise var(--t-med) var(--ease) both}
.step-head{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:8px 12px;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:13.5px;font-weight:500;color:var(--ink-2);justify-content:flex-start;text-align:left}
.step-head:hover{background:var(--soft-2);transform:none;box-shadow:none}
.step-head .si{width:24px;height:24px;border-radius:7px;background:var(--soft);display:grid;place-items:center;flex:none;color:var(--ink-2)}
.step-head .sum{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.step-head .sum code{font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.step-head .state{font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.step-head .chev{transition:transform var(--t-med) var(--ease);color:var(--muted)}
.step.open .chev{transform:rotate(90deg)}
.step-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-med) var(--ease)}
.step.open .step-body{grid-template-rows:1fr}
.step-body>div{overflow:hidden}
.step-body pre{margin:0;padding:10px 14px 12px 46px;font-family:var(--mono);font-size:12.5px;line-height:1.6;color:var(--ink-2);border-top:1px solid var(--border);white-space:pre-wrap}
.spinner{width:14px;height:14px;border-radius:50%;border:2px solid var(--blue-soft);border-top-color:var(--blue);animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.ok-ic{color:var(--ok)}
.think{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);margin:0 0 10px;padding:0;min-height:28px;border:0;background:transparent;box-shadow:none}
.think:hover{color:var(--ink);transform:none;box-shadow:none}
.think-body{font-size:13.5px;color:var(--muted);line-height:1.6;border-left:2px solid var(--border);padding:2px 0 2px 14px;margin:0 0 12px}
.approval{border:1px solid #f0d9a8;background:#fffaf0;border-radius:var(--r-card);padding:16px 18px;margin:4px 0 14px;animation:rise var(--t-med) var(--ease) both}
.dark .approval{background:#2a2216;border-color:#4a3a1f}
.approval h4{margin:0 0 4px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
.approval p{margin:0 0 12px;font-size:13.5px;color:var(--ink-2)}
.approval pre{margin:0 0 14px;font-family:var(--mono);font-size:12.5px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:8px 12px}
.approval .btns{display:flex;gap:8px;flex-wrap:wrap}
.typing{display:inline-flex;gap:4px;padding:8px 0}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:bounce 1.2s infinite ease-in-out}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}
.composer-wrap{flex:none;padding:0 28px 22px;background:linear-gradient(180deg,transparent,var(--soft-2) 30%)}
.composer{max-width:780px;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:12px 12px 10px 18px;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.composer:focus-within{border-color:#c4d5f3;box-shadow:0 0 0 4px rgba(1,88,203,.08),var(--shadow-card)}
.composer textarea{border:0;padding:6px 0;min-height:28px;max-height:220px;resize:none;background:transparent;font-size:15px;line-height:1.55;box-shadow:none}
.composer textarea:focus{box-shadow:none}
.composer-bar{display:flex;align-items:center;gap:6px;margin-top:6px}
.composer-bar .grow{flex:1}
.pick{min-height:34px;padding:0 12px;font-size:13px;gap:6px;border-color:transparent;background:var(--soft-2);box-shadow:none}
.pick:hover{background:var(--soft);transform:none;box-shadow:none}
.pick svg{opacity:.6}
.send{width:38px;min-height:38px;padding:0}
.send.stop{background:var(--ink);color:var(--surface)}
.hint-line{max-width:780px;margin:8px auto 0;text-align:center;font-size:12px;color:var(--muted)}
.slash{position:absolute;left:0;right:0;bottom:calc(100% + 8px);padding:6px;animation:rise var(--t-fast) var(--ease)}
.slash .item{min-height:40px}
.slash .item small{margin-left:auto;color:var(--muted);font-weight:400;font-size:12.5px}
.chat-empty{max-width:780px;margin:0 auto;padding:12vh 28px 24px;text-align:center}
.chat-empty .halo{width:56px;height:56px;margin:0 auto 18px;display:grid;place-items:center}
.chat-empty .halo .ag-ava{box-shadow:0 0 0 1px var(--border),0 2px 10px rgba(11,12,16,.06)}
.chat-empty h1{font-size:30px;font-weight:600;letter-spacing:-1px;margin:0 0 8px}
.chat-empty p{color:var(--ink-2);margin:0 0 28px}

/* ---------- floating layers ---------- */
.scrim{position:fixed;inset:0;background:rgba(11,12,16,.28);backdrop-filter:blur(2px);z-index:40;animation:fade var(--t-fast) var(--ease)}
.palette{position:fixed;left:50%;top:14vh;width:min(620px,calc(100vw - 32px));transform:translateX(-50%);z-index:41;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow-float);overflow:hidden;animation:pop var(--t-med) var(--ease)}
@keyframes pop{from{opacity:0;transform:translate(-50%,8px) scale(.98)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
.palette .p-in{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border)}
.palette .p-in input{border:0;padding:0;font-size:16px;box-shadow:none;background:transparent}
.palette .p-list{max-height:380px;overflow-y:auto;padding:8px}
.palette .p-group{font-size:12px;font-weight:600;color:var(--muted);padding:10px 12px 4px}
.palette .item{min-height:42px;font-size:14px}
.palette .item.sel{background:var(--blue-soft);color:var(--blue-deep)}
.dark .palette .item.sel{color:var(--blue-2)}
.palette .item kbd{margin-left:auto;font:inherit;font-size:11.5px;color:var(--muted)}
.palette .p-foot{display:flex;gap:16px;padding:10px 20px;border-top:1px solid var(--border);font-size:12px;color:var(--muted)}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(460px,100vw);z-index:41;background:var(--surface);border-left:1px solid var(--border);box-shadow:var(--shadow-float);display:flex;flex-direction:column;animation:slideIn var(--t-med) var(--ease)}
@keyframes slideIn{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.drawer-head{height:60px;flex:none;display:flex;align-items:center;gap:12px;padding:0 16px 0 24px;border-bottom:1px solid var(--border)}
.drawer-head h2{flex:1;margin:0;font-size:16px;font-weight:600}
.drawer-body{flex:1;overflow-y:auto;padding:22px 24px}
.drawer-body label{display:block;font-size:13px;font-weight:500;color:var(--ink-2);margin:16px 0 6px}
.drawer-body>label:first-child,.drawer-body>:first-child>label:first-child{margin-top:0}
.drawer-body .hint{font-size:12.5px;color:var(--muted);margin:6px 0 0;line-height:1.45}
.drawer-body .explain{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:13px;color:var(--blue-deep);background:var(--blue-soft);border-radius:var(--r-md);padding:8px 12px}
.dark .drawer-body .explain{color:var(--blue-2)}
.presets{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.presets button{min-height:30px;padding:0 12px;font-size:12.5px}
.presets button.on{background:var(--blue-soft);color:var(--blue-deep);border-color:transparent}
.drawer-foot{flex:none;display:flex;justify-content:flex-end;gap:8px;padding:14px 24px;border-top:1px solid var(--border)}
.menu{position:fixed;z-index:42;min-width:200px;padding:6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-float);animation:menuIn var(--t-fast) var(--ease)}
@keyframes menuIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.menu .item{min-height:36px}
.menu .item.bad{color:var(--bad)}
.menu hr{border:0;border-top:1px solid var(--border);margin:6px 4px}
.toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;align-items:center;z-index:60;pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;background:var(--ink);color:var(--surface);padding:10px 16px;border-radius:var(--r-pill);font-size:13.5px;box-shadow:var(--shadow-float);animation:toastIn var(--t-med) var(--ease) both;pointer-events:auto}
.toast.out{animation:toastOut var(--t-med) var(--ease) both}
@keyframes toastIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(6px)}}

/* ---------- sign-in ---------- */
.signin{min-height:100dvh;display:grid;place-items:center;padding:24px;background:radial-gradient(60% 420px at 50% 0%,rgba(255,255,255,.9),transparent 70%),linear-gradient(180deg,var(--sky-1) 0,var(--sky-2) 360px,var(--soft-2) 720px)}
.dark .signin{background:linear-gradient(180deg,var(--sky-1),var(--bg) 480px)}
.signin .card{width:min(400px,100%);padding:36px 32px;animation:rise var(--t-med) var(--ease)}
.signin h1{font-size:26px;font-weight:600;letter-spacing:-.8px;margin:22px 0 6px}
.signin p{margin:0 0 22px;color:var(--ink-2);font-size:14.5px}
.signin label{display:block;font-size:13px;font-weight:500;color:var(--ink-2);margin-bottom:6px}
.signin button.primary{width:100%;margin-top:16px;min-height:46px}
.signin .err{color:var(--bad);font-size:13px;margin:10px 0 0;min-height:1.2em}
.signin .foot{margin-top:18px;font-size:12.5px;color:var(--muted);text-align:center}
.shake{animation:shake .35s var(--ease)}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* ---------- responsive ---------- */
@media (max-width:900px){
 .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .two{grid-template-columns:1fr}
}
@media (max-width:760px){
 .app,.app.collapsed{grid-template-columns:1fr}
 .side{position:fixed;inset:0 auto 0 0;width:min(300px,86vw);z-index:45;transform:translateX(-102%);transition:transform var(--t-med) var(--ease);box-shadow:var(--shadow-float)}
 .app.nav-open .side{transform:none}
 .app.collapsed .side .label,.app.collapsed .side-sub,.app.collapsed .status-btn .who{display:revert}
 .side-top .collapse-btn{display:none}
 .topbar{padding:0 12px}
 .topbar .menu-btn{display:inline-flex}
 .k-btn .k-label,.k-btn kbd{display:none}
 .page{padding:22px 16px 60px}
 .page-head{flex-direction:column;align-items:flex-start}
 .thread{padding:22px 16px}
 .composer-wrap{padding:0 12px 14px}
 .msg.user{max-width:88%}
 .row{padding:12px 16px}
 .row .act .chip{display:none}
 .field{grid-template-columns:1fr;gap:8px}
 .stats{gap:10px}
 .stat b{font-size:22px}
 button,.item,.sec{min-height:44px}
 .composer-bar .pick span{display:none}
}

/* ---------- real-app states ---------- */
.skel{border-radius:var(--r-md);background:linear-gradient(90deg,var(--soft) 0,var(--soft-2) 50%,var(--soft) 100%);background-size:200% 100%;animation:shimmer 1.2s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.skel-row{height:56px;margin:10px 0}
.state-box{padding:28px;text-align:center;color:var(--muted);font-size:14px}
.state-box b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}
.state-box.err b{color:var(--bad)}
.state-box button{margin-top:14px}
.md p{margin:0 0 12px}.md p:last-child{margin-bottom:0}
.md ul,.md ol{margin:0 0 12px;padding-left:22px}
.md li{margin:2px 0}
.md h1,.md h2,.md h3{font-size:16px;font-weight:600;margin:16px 0 8px}
.md a{word-break:break-word}
.md table{margin:6px 0 14px;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;border-collapse:separate;border-spacing:0}
.md th{background:var(--soft-2);font-size:12.5px}
.md blockquote{margin:0 0 12px;padding-left:14px;border-left:2px solid var(--border);color:var(--ink-2)}
.msg.user .attach{display:block;font-size:12.5px;color:var(--muted);margin-top:6px}
.err-line{color:var(--bad);font-size:13.5px}
/* the shared warning box (alertBox/errLine): warn tint like .kwarn, card-like corners, 16px under it like the cards */
.alert{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin:0 0 16px;padding:8px 8px 8px 14px;min-height:48px;border:1px solid color-mix(in srgb,var(--warn) 35%,var(--border));background:color-mix(in srgb,var(--warn) 7%,var(--surface));border-radius:18px;color:var(--ink-2);font-size:13.5px;line-height:1.45;animation:rise var(--t-med) var(--ease) both}
.alert>svg{flex:none;color:var(--warn)}.alert-t{flex:1 1 0;min-width:120px;overflow-wrap:anywhere}
.alert>button{flex:none;margin-left:auto;min-height:32px;padding:0 12px;color:var(--ink)}.alert>button:hover{background:color-mix(in srgb,var(--warn) 12%,transparent)}
.alert:not(:has(>button)){padding-right:14px}
.panel .alert:last-child,.drawer-body .alert:last-child{margin-bottom:0}
@media (max-width:520px){.alert-t{min-width:calc(100% - 26px)}}   /* phones: Try again goes under the message */
.oauth-code{font-family:var(--mono);font-size:22px;letter-spacing:.12em;text-align:center;padding:14px;border:1px dashed var(--border);border-radius:var(--r-md);margin:10px 0}
.action-log{font-family:var(--mono);font-size:12px;line-height:1.6;background:var(--soft-2);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 14px;max-height:320px;overflow:auto;white-space:pre-wrap}
.drop{outline:2px dashed var(--blue-2);outline-offset:-6px}

/* ---------- brand dropdown (replaces native selects) ---------- */
.sel-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0;pointer-events:none;overflow:hidden}
.sel-btn{width:100%;justify-content:space-between;gap:10px;min-height:42px;padding:10px 12px 10px 14px;border-radius:var(--r-md);font-size:14px;font-weight:400;text-align:left;box-shadow:none;background:var(--surface)}
.sel-btn .sv{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel-btn svg{flex:none;color:var(--muted);transition:transform var(--t-med) var(--ease)}
.sel-btn:hover{transform:none;box-shadow:none;border-color:#c9ccd6}
.sel-btn.open{border-color:var(--blue);box-shadow:0 0 0 3px rgba(1,88,203,.18)}
.sel-btn.open svg{transform:rotate(180deg)}
.sel-btn.inline{width:auto;min-width:140px}
/* time and date pickers (timePick, dateTimePick, datePop in core.js) */
.tp-wrap{position:relative;display:block}.tp-wrap input{padding-right:44px;font-variant-numeric:tabular-nums}.tp-wrap .tp-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:34px;min-height:34px;height:34px;color:var(--muted)}
.tp-wrap .tp-btn:hover{transform:translateY(-50%);color:var(--ink)}.tp-wrap.open input{border-color:var(--blue);box-shadow:0 0 0 3px rgba(1,88,203,.18)}
.dtp{display:grid;grid-template-columns:minmax(0,1fr) 128px;gap:8px}.dtp .sel-btn.open svg{transform:rotate(180deg)}
.date-menu{padding:10px;min-width:276px!important;max-height:none!important;overflow:visible}
.dp-head{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:0 0 6px}.dp-head b{font-size:14px;font-weight:600;flex:1;text-align:center}.dp-head .ghost.icon{width:32px;min-height:32px;height:32px}
.dp-grid{display:grid;grid-template-columns:repeat(7,36px);gap:2px}.dp-w{font-size:11px;color:var(--muted);text-align:center;padding:4px 0}
.dp-d{width:36px;height:34px;min-height:34px;padding:0;border:0;border-radius:9px;background:none;box-shadow:none;font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink);transition:background-color var(--t-fast),color var(--t-fast)}
.dp-d:hover{background:var(--soft);transform:none}.dp-d.out{color:var(--muted);opacity:.55}.dp-d.today{font-weight:700;color:var(--blue-deep)}.dark .dp-d.today{color:var(--blue-2)}
.dp-d.cur{background:linear-gradient(180deg,var(--blue-2),var(--blue));color:#fff}.dark .dp-d.cur{color:#0b0c10}.dp-d:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
@media (max-width:420px){.dtp{grid-template-columns:1fr}}
.dark .sel-btn:hover{border-color:#43506a}
.menu{max-height:min(380px,60vh);overflow-y:auto;scrollbar-width:thin}
.menu .mh{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:10px 10px 4px}
.menu .item.cur{background:var(--blue-soft);color:var(--blue-deep)}
.dark .menu .item.cur{color:var(--blue-2)}
.menu .item:disabled{opacity:.45;cursor:default}
.menu .item:focus-visible{outline:none;background:var(--soft-2)}

/* ---------- schedule picker ---------- */
.sched-row{display:flex;gap:12px;flex-wrap:wrap}
.sched-row>div{flex:1;min-width:150px}
.daychips{display:flex;gap:6px;flex-wrap:wrap}
.daychips button{width:52px;min-height:40px;padding:0;font-size:13px}
.daychips button.on,.presets button.on{background:linear-gradient(180deg,var(--blue-2),var(--blue));color:#fff;border-color:transparent;box-shadow:var(--shadow-btn)}
.dark .daychips button.on,.dark .presets button.on{color:#0b0c10}
input[type=time]{font-variant-numeric:tabular-nums;font-size:15px}
.tz-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--blue-soft);color:var(--blue-deep);border-radius:var(--r-md);padding:10px 12px;font-size:13px;margin-bottom:16px}
.dark .tz-note{color:var(--blue-2)}
.tz-note span{flex:1;min-width:180px}
.tz-note button{min-height:32px;padding:0 12px;font-size:12.5px}
.tpl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tpl{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:auto;padding:12px 14px;border-radius:var(--r-md);white-space:normal;text-align:left;font-weight:400;box-shadow:none}
.tpl b{font-size:13.5px;font-weight:600;color:var(--ink)}
.tpl span{font-size:12px;color:var(--muted);line-height:1.4}
.tpl small{font-size:11.5px;color:var(--blue);font-weight:500;margin-top:2px}
.tpl.on{border-color:var(--blue);background:var(--blue-soft)}
.tpl-form{box-shadow:none;margin:14px 0 0;padding:16px 18px}
.tpl .tpl-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}.tpl .tpl-tags i{font-style:normal;font-size:11px;color:var(--muted);background:var(--soft);border-radius:var(--r-pill);padding:1px 8px}
/* schedule form: several names as chips, the "More options" fold, switches on a label row */
.np{display:flex;flex-direction:column;gap:6px}
.np-find{position:relative}.np-find input{padding-left:34px;min-height:36px}.np-find svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted)}
.np-list{display:flex;gap:6px;flex-wrap:wrap;max-height:184px;overflow-y:auto;padding:2px}
.np-list button{min-height:32px;padding:0 12px;font-size:12.5px;font-weight:500;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background var(--t-fast,.15s) var(--ease),color var(--t-fast,.15s) var(--ease),border-color var(--t-fast,.15s) var(--ease)}
.np-list button.on{background:var(--blue-soft);color:var(--blue-deep);border-color:transparent}.dark .np-list button.on{color:var(--blue-2)}
.np-n{font-size:11.5px;color:var(--muted);min-height:0}.np-n:empty{display:none}
.cj-adv{interpolate-size:allow-keywords;margin-top:14px;border-top:1px solid var(--border);padding-top:4px}
.cj-adv::details-content{block-size:0;overflow:hidden;transition:block-size var(--t-med) var(--ease),content-visibility var(--t-med) allow-discrete}.cj-adv[open]::details-content{block-size:auto}
.cj-adv>summary{display:flex;align-items:center;gap:6px}.cj-adv>summary svg{transform:rotate(-90deg);transition:transform var(--t-med) var(--ease)}.cj-adv[open]>summary svg{transform:none}
.cj-tg{display:flex!important;align-items:center;justify-content:space-between;gap:12px}
.cj-pane{animation:fade var(--t-med) var(--ease)}
.cj-id{display:flex;align-items:center;gap:8px;flex-wrap:wrap;word-break:break-all}
.sd-facts b.sd-wrap{overflow-wrap:anywhere;font-weight:600}
.wh-off{opacity:.62;transition:opacity var(--t-med) var(--ease)}.wh-count{margin-top:6px}
.wh-restart,.sched-stale{animation:fade var(--t-med) var(--ease)}
.drawer .tabs{display:flex;margin-bottom:6px}
.drawer .tabs button{flex:1}
@media (max-width:760px){.tpl-grid{grid-template-columns:1fr}.daychips button{width:calc((100% - 36px)/7);min-width:38px}}
.two.wide-main{grid-template-columns:minmax(0,1.6fr) minmax(0,.6fr)}
.tbl{overflow-x:auto;margin:0 -4px;padding:0 4px}
@media (max-width:900px){.two.wide-main{grid-template-columns:1fr}}
@media (max-width:760px){.msg-tools{opacity:1}.msg-tools button,.field .ghost,.chip .ghost.icon{min-height:40px;min-width:40px}.panel{padding:18px}}
@media (max-width:900px){.two,.two.wide-main{grid-template-columns:minmax(0,1fr)}}

/* ---------- agent pictures ---------- */
.logo.ava,.status-btn .avatar{overflow:hidden}
.logo.ava{background:linear-gradient(180deg,var(--blue-2),var(--blue))}
.logo.ava img{width:100%;height:100%;object-fit:cover;display:block}
.ident-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.ag-ava.ident-ava{box-shadow:var(--shadow-card)}
.tile[data-act=ident-open]{cursor:pointer}


/* ---------- sizing: sidebar and screen widths ---------- */
.app{--side-w:var(--side-open,272px)}
.app.collapsed{--side-w:68px}
@media (min-width:761px){.side{position:relative}}   /* on phones the menu slides over the page (see the 760px rule) */
.resizer{position:absolute;top:0;bottom:0;width:10px;z-index:6;cursor:col-resize;touch-action:none}
.resizer::after{content:"";position:absolute;top:50%;left:50%;width:4px;height:44px;border-radius:4px;background:var(--border);transform:translate(-50%,-50%);opacity:0;transition:opacity var(--t-fast),background var(--t-fast)}
.resizer:hover::after,body.dragging .resizer::after{opacity:1;background:var(--blue-2)}
.side-rz{right:-5px}
.collapsed .side-rz{display:none}
body.dragging{cursor:col-resize;user-select:none}
body.dragging iframe{pointer-events:none}
body.dragging .app{transition:none}

/* ---------- live screen: docked pane ---------- */
.app.screen-open{grid-template-columns:var(--side-w) minmax(0,1fr) var(--screen-w,min(48vw,820px))}
.screen-pane{position:relative;display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--surface);border-left:1px solid var(--border);animation:slideIn var(--t-med) var(--ease)}
.screen-pane[hidden]{display:none}
.screen-pane .resizer{left:-5px}
.screen-head{height:60px;flex:none;display:flex;align-items:center;gap:8px;padding:0 12px 0 18px;border-bottom:1px solid var(--border);background:var(--surface)}
.screen-head b{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;white-space:nowrap}
.screen-head .grow{flex:1}
.screen-head .chip{white-space:nowrap}
.screen-head button:not(.icon){min-height:34px;padding:0 14px;font-size:13px}
.topbar .ghost.icon.on{background:var(--blue-soft);color:var(--blue)}

/* the stage: Elkiya sky with a laptop holding the live screen */
.screen-stage{flex:1;min-height:0;position:relative;display:grid;place-items:center;padding:22px;container-type:size;background:radial-gradient(70% 60% at 50% 30%,rgba(255,255,255,.95),transparent 70%),linear-gradient(180deg,var(--sky-1),var(--sky-2) 55%,var(--soft-2))}
.dark .screen-stage{background:radial-gradient(70% 60% at 50% 30%,rgba(108,169,255,.10),transparent 70%),linear-gradient(180deg,#141b28,var(--bg))}
.laptop{width:min(100cqw,138cqh);max-width:100%;filter:drop-shadow(0 26px 40px rgba(11,12,16,.22)) drop-shadow(0 2px 6px rgba(11,12,16,.12));animation:rise var(--t-med) var(--ease)}
.dark .laptop{filter:drop-shadow(0 26px 40px rgba(0,0,0,.55))}
.lid{position:relative;background:linear-gradient(180deg,#22262e,#16191f);border-radius:clamp(10px,2.2cqw,20px) clamp(10px,2.2cqw,20px) 4px 4px;padding:clamp(6px,1.9%,16px) clamp(6px,1.9%,16px) clamp(8px,2.6%,22px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.lid .cam{position:absolute;top:clamp(2px,.7%,6px);left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#3a3f4a;box-shadow:inset 0 0 0 1px #4a505c}
.lcd{aspect-ratio:16/10;background:#0b0c10;border-radius:4px;overflow:hidden}
.lcd iframe{width:100%;height:100%;border:0;display:block;background:#0b0c10}
.base{position:relative;width:112%;margin-left:-6%;height:clamp(8px,2.6cqw,18px);background:linear-gradient(180deg,#e7e9ee 0,#cfd2da 55%,#b9bcc6 100%);border-radius:2px 2px clamp(8px,1.8cqw,16px) clamp(8px,1.8cqw,16px);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.base span{position:absolute;left:50%;top:0;width:16%;height:42%;transform:translateX(-50%);background:linear-gradient(180deg,#c3c6cf,#d8dbe2);border-radius:0 0 8px 8px}
.dark .base{background:linear-gradient(180deg,#3a404c,#2a2f38 60%,#20242b)}
.dark .base span{background:linear-gradient(180deg,#22262e,#2c313a)}
.screen-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);background:rgba(11,12,16,.72);color:#fff;font-size:12px;padding:6px 14px;border-radius:var(--r-pill);backdrop-filter:blur(6px);pointer-events:none;white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis}

/* ---------- live screen: floating mini player ---------- */
.screen-float{position:fixed;z-index:46;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow-float);overflow:hidden;animation:floatIn var(--t-med) var(--ease);min-width:300px}
@keyframes floatIn{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}
.screen-float .screen-head{height:48px;padding:0 8px 0 14px;cursor:grab;touch-action:none}
.screen-float .screen-head:active{cursor:grabbing}
.screen-float .screen-head .lbl,.screen-float .screen-head .chip{display:none}
.screen-float .screen-head button:not(.icon){min-height:30px;padding:0 10px;font-size:12.5px}
.screen-float .screen-head .ghost.icon{width:32px;min-height:32px}
.screen-float .screen-stage{flex:none;container-type:inline-size;padding:16px 18px 20px;aspect-ratio:16/11.6}
.screen-float .laptop{width:100%}
.screen-float .screen-hint{display:none}
.screen-float .corner{position:absolute;right:0;bottom:0;width:22px;height:22px;cursor:nwse-resize;touch-action:none;background:linear-gradient(135deg,transparent 50%,var(--border) 50%,var(--border) 58%,transparent 58%,transparent 70%,var(--border) 70%,var(--border) 78%,transparent 78%)}
body.dragging .screen-float{transition:none}

@media (max-width:1100px){.app.screen-open{grid-template-columns:var(--side-w) minmax(0,1fr) var(--screen-w,46vw)}}
@media (max-width:760px){
 .app.screen-open{grid-template-columns:1fr}
 .screen-pane{position:fixed;inset:0;z-index:44}
 .screen-pane .resizer,.side-rz{display:none}
 .screen-head .chip,.screen-head button span{display:none}
 .screen-float{left:12px!important;right:12px;width:auto!important;top:auto!important;bottom:12px}
 .screen-float .corner{display:none}
}

/* tablet look: just the screen in an even bezel (no keyboard base) */
.laptop{width:min(100cqw,148cqh)}
.lid{border-radius:clamp(14px,3cqw,30px);padding:clamp(8px,2.3%,20px);background:linear-gradient(180deg,#1f232b,#15181e);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 0 0 3px rgba(0,0,0,.35)}
.lid .cam{top:50%;left:clamp(3px,1.1%,9px);margin:-2.5px 0 0}
.lcd{border-radius:clamp(4px,1cqw,10px)}
.base{display:none}
.screen-float .screen-stage{aspect-ratio:16/10.9}
.msg.user.steer{border-style:dashed;border-color:var(--blue-2);background:var(--blue-soft)}
.dark .msg.user.steer{background:#1b2740}

/* approval cards: long commands wrap instead of running off the card */
.approval pre{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;max-height:260px;overflow:auto}

/* while busy: Steer now | Queue next, and the queue above the message box */
.seg-mini{display:inline-flex;background:var(--soft);border:1px solid var(--border);border-radius:var(--r-pill);padding:2px;gap:2px}
.seg-mini button{min-height:28px;padding:0 10px;font-size:12.5px;border:0;background:transparent;box-shadow:none;color:var(--ink-2)}
.seg-mini button:hover{transform:none;box-shadow:none;color:var(--ink)}
.seg-mini button.on{background:var(--surface);color:var(--blue);font-weight:600;box-shadow:0 1px 2px rgba(11,12,16,.1)}
.dark .seg-mini button.on{color:var(--blue-2)}
.queue{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 8px}
.qchip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:3px 4px 3px 4px;border-radius:var(--r-pill);background:var(--blue-soft);color:var(--blue-deep);font-size:12.5px;animation:rise var(--t-med) var(--ease)}
.dark .qchip{color:var(--blue-2)}
.qchip b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--surface);font-size:11px;flex:none}
.qchip .qt{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qchip .ghost.icon{width:22px;min-height:22px}
.qnote{font-size:12px;color:var(--muted)}
.qgo{min-height:28px;padding:0 12px;font-size:12.5px}
@media (max-width:760px){.seg-mini button{padding:0 8px}.qchip .qt{max-width:160px}}

/* dictation */
.voice-slot{display:inline-flex;align-items:center}
.mic.rec{background:#fde8e8;color:var(--bad);animation:micPulse 1.4s ease-in-out infinite}
.dark .mic.rec{background:#3a1d1d}
@keyframes micPulse{0%,100%{box-shadow:0 0 0 0 rgba(198,47,47,.35)}50%{box-shadow:0 0 0 6px rgba(198,47,47,0)}}

/* list text: room for descenders (g, p, y) inside clipped titles */
.item{line-height:1.35}
.item .t,.row .txt b,.row .txt span,.crumbs b,.tile h3,.sel-btn .sv,.qchip .qt{line-height:1.35;padding-block:1px}

/* Claude accounts */
.acct-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.acct-mail{display:block;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ubars{display:grid;gap:12px}
.ubar-top{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-2)}
.ubar-top b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.ubar-track{height:8px;border-radius:var(--r-pill);background:var(--soft);overflow:hidden;margin:6px 0 4px}
.ubar-track i{display:block;height:100%;border-radius:inherit;transition:width .6s var(--ease)}
.ubar-track i.ok{background:linear-gradient(90deg,var(--blue-2),var(--blue))}
.ubar-track i.warn{background:linear-gradient(90deg,#f0b35a,var(--warn))}
.ubar-track i.bad{background:linear-gradient(90deg,#ff8a8a,var(--bad))}
.ubar small{font-size:11.5px;color:var(--muted)}
.acct-agents{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:12px;border-top:1px solid var(--border)}
/* one account card for every kind: header with ⋯, one status, limits (or why there are none), Used by at the foot */
.acct{display:flex;flex-direction:column;gap:12px}.acct .tile-top{margin:0;align-items:flex-start}.acct-id{min-width:0;flex:1}.acct-id h3{margin:0}
.acct-more-btn{margin:-6px -8px 0 0;flex:none}.acct-st{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:24px}
.acct-none{margin:0}.acct-names{font-size:13px;color:var(--ink-2)}
/* Switch automatically: the switch and the level side by side when there is room; recent switches as tidy rows */
.auto-ctl{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;align-items:stretch;margin:4px 0 6px}
.auto-on,.auto-th{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:14px;min-width:0}.auto-on>span,.auto-th>span{min-width:0}.auto-th .sel-btn{flex:none}
.auto-on b,.auto-th b{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}.auto-on small,.auto-th small{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-top:2px}
.sw-h{font-size:13.5px;margin:18px 0 6px}
.sw-list{display:flex;flex-direction:column}.sw-row{display:grid;grid-template-columns:118px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--border);font-size:13px}
.sw-t{color:var(--muted);font-size:12.5px;white-space:nowrap;font-variant-numeric:tabular-nums}.sw-who{display:flex;align-items:center;gap:6px;min-width:0;color:var(--ink-2)}.sw-who b{font-weight:600;color:var(--ink)}.sw-who>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sw-who svg{flex:none;opacity:.55}
.sw-why{font-size:11px;padding:1px 8px;font-weight:500;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sw-more{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows var(--t-med) var(--ease),opacity var(--t-med) var(--ease)}.sw-more>.sw-list{overflow:hidden;min-height:0}.sw-more.open{grid-template-rows:1fr;opacity:1}
.sw-all{margin-top:8px}
@container (max-width:520px){.sw-row{grid-template-columns:minmax(0,1fr);row-gap:4px}.sw-why{justify-self:start;max-width:100%}}
/* Choose agents: one row per agent with its switch */
.ag-pick{display:flex;flex-direction:column}.ag-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--border)}.ag-row:first-child{border-top:0}
.ag-row .t{flex:1;min-width:0}.ag-row .t b{display:block;font-size:14px}.ag-row .t small{display:block;font-size:12.5px;color:var(--muted)}
.acct-agents .th{margin-right:4px}

/* real service logos */
.logo.img{background:var(--surface);border:1px solid var(--border);padding:7px;overflow:hidden}
.logo.img img{width:100%;height:100%;object-fit:contain;display:block;border-radius:6px}
.row .logo{width:38px;height:38px;border-radius:12px;flex:none;display:grid;place-items:center;color:#fff;font-weight:700}
.logo-lg .logo{width:48px;height:48px;border-radius:14px;font-size:18px;display:grid;place-items:center;color:#fff;font-weight:700}
.dark .logo.img{background:#f5f6f8}

/* ---------- Files (Drive-like) ---------- */
.fwrap{position:relative}
.fplaces{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.place{min-height:34px;padding:0 14px;font-size:13px;gap:7px}
.place.on{background:var(--blue-soft);color:var(--blue-deep);border-color:transparent}
.dark .place.on{color:var(--blue-2)}
.fbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.fbar .grow{flex:1}
.fcrumbs{display:flex;align-items:center;gap:2px;flex-wrap:wrap;min-width:0;color:var(--muted)}
.fcrumbs button{min-height:30px;padding:0 9px;font-size:13px;color:var(--ink-2)}
.fcrumbs button:last-of-type{color:var(--ink);font-weight:600}
.fsearch{position:relative;width:220px}.fsearch input{padding-left:36px;height:38px}.fsearch svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted)}
.fbar .ghost.icon.on{background:var(--blue-soft);color:var(--blue)}
.fbar .seg-mini button{min-height:30px;padding:0 9px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.ftile{position:relative;display:flex;flex-direction:column;gap:4px;padding:10px 10px 12px;border-radius:var(--r-card);background:var(--surface);border:1px solid var(--border);cursor:pointer;transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),border-color var(--t-fast);animation:rise var(--t-med) var(--ease) both;outline-offset:2px}
.ftile:hover{transform:translateY(-2px);box-shadow:0 18px 40px -26px rgba(11,12,16,.35);border-color:#d2d4dc}
.ftile:focus-visible{outline:3px solid var(--blue-2)}
.fthumb{aspect-ratio:4/3;border-radius:16px;background:var(--soft-2);display:grid;place-items:center;overflow:hidden;margin-bottom:4px}
.fthumb img{width:100%;height:100%;object-fit:cover;display:block}
.ftile.dir .fthumb{background:linear-gradient(180deg,var(--sky-2),var(--blue-soft))}
.fname{font-size:13.5px;font-weight:600;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px}
.fmeta{font-size:12px;color:var(--muted);padding:0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fmore{position:absolute;top:14px;right:14px;width:30px;min-height:30px;background:var(--surface);opacity:0;transition:opacity var(--t-fast)}
.ftile:hover .fmore,.ftile:focus-within .fmore{opacity:1}
.fk{display:grid;place-items:center;width:58px;height:58px;border-radius:16px;color:#fff;background:var(--muted)}
.fk-sm{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;color:#fff;background:var(--muted);flex:none}
.fk-folder{background:linear-gradient(180deg,var(--blue-2),var(--blue))}.fk-image{background:#7c4dff}.fk-video{background:#e5484d}.fk-audio{background:#f76b15}.fk-pdf{background:#c62f2f}.fk-md{background:#2e3038}.fk-code{background:#0b0c10}.fk-archive{background:#8a6d3b}.fk-sheet{background:#1f8a4c}.fk-doc{background:#2f7bff}
.ftile.dir .fk{width:64px;height:52px;border-radius:14px}
.frow .fcol{font-size:12.5px;color:var(--muted);min-width:90px;text-align:right}
.fdrop{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:2px dashed var(--blue-2);border-radius:var(--r-card);background:rgba(232,240,254,.86);color:var(--blue-deep);backdrop-filter:blur(2px);z-index:5;min-height:220px}
.dark .fdrop{background:rgba(27,49,83,.86);color:var(--blue-2)}
.fdrop b{font-size:16px}.fdrop span{font-size:13px}
.fwrap.dropping .fdrop{display:flex;animation:fade var(--t-fast) var(--ease)}
/* preview window */
.pv{position:fixed;inset:0;z-index:55;background:rgba(11,12,16,.72);backdrop-filter:blur(6px);display:flex;flex-direction:column;animation:fade var(--t-med) var(--ease)}
.pv-head{display:flex;align-items:center;gap:10px;height:64px;padding:0 16px 0 20px;background:var(--surface);border-bottom:1px solid var(--border)}
.pv-title{min-width:0;display:flex;flex-direction:column}.pv-title b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pv-title small{font-size:12px;color:var(--muted)}
.pv-head .grow{flex:1}.pv-head button:not(.icon){min-height:36px;padding:0 14px;font-size:13px}
.pv-body{flex:1;min-height:0;display:grid;place-items:center;padding:24px;overflow:auto}
.pv-stage{max-width:100%;max-height:100%;display:grid;place-items:center;animation:rise var(--t-med) var(--ease)}
.pv-img{max-width:min(100%,1400px);max-height:calc(100dvh - 120px);border-radius:12px;box-shadow:0 30px 80px -30px rgba(0,0,0,.6);background:#fff}
.pv-media{max-width:min(100%,1280px);max-height:calc(100dvh - 120px);border-radius:12px;background:#000}
.pv-pdf{width:min(1100px,92vw);height:calc(100dvh - 112px);border:0;border-radius:12px;background:#fff}
.pv-doc{width:min(860px,92vw);max-height:calc(100dvh - 112px);overflow:auto;background:var(--surface);border-radius:var(--r-card);padding:36px 40px;font-size:15px;line-height:1.7;color:var(--ink)}
.pv-code{width:min(1100px,92vw);max-height:calc(100dvh - 112px);overflow:auto;margin:0;background:#0f1218;color:#e6e9ef;border-radius:16px;padding:20px 22px;font-family:var(--mono);font-size:12.5px;line-height:1.65;white-space:pre}
.pv-audio,.pv-none{display:flex;flex-direction:column;align-items:center;gap:12px;background:var(--surface);border-radius:var(--r-card);padding:36px 44px;color:var(--ink);text-align:center}
.pv-none span{color:var(--muted);font-size:13px}
.pv-audio .fk,.pv-none .fk{width:76px;height:76px;border-radius:22px}
@media (max-width:760px){.fsearch{width:100%;order:9}.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.frow .fcol{display:none}.pv-head button span,.pv-title small{display:none}.pv-doc{padding:22px}.fmore{opacity:1}}

/* the ⋯ button in list rows: a real centred box, not baseline text */
.item .more{display:inline-grid;place-items:center;width:26px;height:26px;min-height:26px;border-radius:8px;flex:none;align-self:center;line-height:0}
.item .more svg{display:block}
.item .more:hover{background:var(--surface)}

/* ---------- Kanban ---------- */
.kboard{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);gap:12px;overflow-x:auto;padding-bottom:10px;scrollbar-width:thin}
.kcol{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:14px 12px;min-height:240px;display:flex;flex-direction:column;transition:border-color var(--t-fast),background var(--t-fast)}
.kcol.over{border-color:var(--blue-2);background:var(--blue-soft)}
.kcol header{display:flex;align-items:center;justify-content:space-between;padding:0 4px}
.kcol header b{font-size:14px}.kcol header .n{font-size:12px;color:var(--muted);background:var(--soft);border-radius:var(--r-pill);padding:2px 8px}
.khint{font-size:12px;color:var(--muted);margin:4px 4px 10px}
.klist{display:flex;flex-direction:column;gap:8px;flex:1}
.kcard{background:var(--soft-2);border:1px solid var(--border);border-radius:16px;padding:12px;cursor:grab;transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast);animation:rise var(--t-med) var(--ease) both}
.kcard:hover{transform:translateY(-1px);box-shadow:0 12px 26px -18px rgba(11,12,16,.35)}
.kcard.dragging{opacity:.45}
.kcard b{display:block;font-size:13.5px;line-height:1.4}.kcard p{margin:4px 0 0;font-size:12.5px;color:var(--ink-2);line-height:1.45}
.kmeta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:10px}.kage{margin-left:auto;font-size:11.5px;color:var(--muted)}
.kcomment{padding:8px 0;border-top:1px solid var(--border);font-size:13px}.kcomment b{display:block;font-size:12px;color:var(--muted)}
/* Task board: filters, card details, selecting, dragging */
.ktool{gap:8px}.ktool .search{max-width:280px;min-width:180px}
.ktool-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1}
.ktg,.drawer-body label.ktg{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2);cursor:pointer;margin:0}.drawer-body label.ktg{display:flex;margin:12px 0 0;font-size:13.5px;color:var(--ink)}.ktg>span{display:flex;flex-direction:column;line-height:1.35}.ktg small{font-size:12px;color:var(--muted)}
.ktg input[type=checkbox]:not(.switch){width:16px;height:16px;flex:none}
.kbproj{font-size:12px;font-weight:500;color:var(--muted);margin-left:2px}
.kmode{cursor:pointer;margin-left:auto;transition:background var(--t-fast)}.kmode:hover{background:var(--blue-soft)}
.kflex{flex:1}
.kcol.kx{display:none}.kboard.kdrag .kcol.kx{display:flex;animation:rise var(--t-med) var(--ease) both}
.kcol.no{border-style:dashed;opacity:.7}.kcol header{gap:6px}
.kcolbtn{width:28px;min-height:28px;padding:0;opacity:.55;transition:opacity var(--t-fast)}.kcol:hover .kcolbtn,.kcolbtn:focus-visible{opacity:1}
.kcard{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;position:relative}
.ktop{display:flex;align-items:center;gap:6px;margin:-2px 0 6px;min-height:20px}
.kchk{width:16px;height:16px;margin:0;flex:none;opacity:0;cursor:pointer;transition:opacity var(--t-fast)}.kcard:hover .kchk,.kchk:focus-visible,.kboard.selecting .kchk{opacity:1}
.kid{background:none;border:0;padding:0;min-height:0;font-size:11.5px;font-weight:500;color:var(--muted);cursor:copy;box-shadow:none}.kid:hover{color:var(--ink-2)}
.kpri{margin-left:auto;font-size:11px;font-weight:600;color:var(--muted)}.kpri.warn{color:var(--warn)}.kpri.bad{color:var(--bad)}
.ksev{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;flex:none;color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent)}.ksev.error,.ksev.critical{color:var(--bad);background:color-mix(in srgb,var(--bad) 14%,transparent)}
.kcard.stale-a{box-shadow:inset 3px 0 0 var(--warn)}.kcard.stale-r{box-shadow:inset 3px 0 0 var(--bad)}
.kcard.sel{border-color:var(--blue-2);box-shadow:0 0 0 2px color-mix(in srgb,var(--blue) 28%,transparent)}.kcard.failed{border-color:var(--bad)}
.kcard .kerr{color:var(--bad);font-size:12px}
.kprog{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:11.5px;color:var(--muted)}.kprog s{flex:1;height:5px;border-radius:var(--r-pill);background:var(--soft);overflow:hidden;text-decoration:none}.kprog i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--blue-2),var(--blue));transition:width .5s var(--ease)}.kprog.full i{background:var(--ok)}
.kcnt{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;color:var(--muted)}
.klane{display:flex;flex-direction:column;gap:8px}.klane+.klane{margin-top:6px}.klane-h{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:600;color:var(--ink-2);padding:2px 4px}
.kboard.panning{cursor:grabbing;-webkit-user-select:none;user-select:none}
.kghost{position:fixed;top:-100px;left:0;padding:6px 12px;border-radius:var(--r-pill);background:var(--blue);color:#fff;font-size:13px;font-weight:600}
.kghost-card{position:fixed;z-index:80;pointer-events:none;margin:0;opacity:.95;animation:none;box-shadow:0 18px 40px -16px rgba(11,12,16,.45)}
.kfoot{position:sticky;bottom:14px;height:0;z-index:30}
.ktrash{position:absolute;left:50%;bottom:0;z-index:2;white-space:nowrap;display:flex;align-items:center;gap:8px;padding:14px 22px;border-radius:var(--r-pill);background:var(--surface);border:1.5px dashed var(--bad);color:var(--bad);font-size:14px;font-weight:600;box-shadow:0 18px 40px -18px rgba(11,12,16,.4);transform:translate(-50%,24px);opacity:0;pointer-events:none;transition:transform var(--t-med) var(--ease),opacity var(--t-med),background var(--t-fast)}
.ktrash.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}.ktrash.over{background:color-mix(in srgb,var(--bad) 12%,var(--surface))}
.kwarn{border:1px solid color-mix(in srgb,var(--warn) 35%,var(--border));background:color-mix(in srgb,var(--warn) 7%,var(--surface));border-radius:18px;padding:8px 14px;margin-bottom:12px;animation:rise var(--t-med) var(--ease) both;transition:opacity .2s,transform .2s}
.kwarn.error,.kwarn.critical{border-color:color-mix(in srgb,var(--bad) 35%,var(--border));background:color-mix(in srgb,var(--bad) 6%,var(--surface))}.kwarn.closing{opacity:0;transform:translateY(-6px)}
.kwarn-bar{display:flex;align-items:center;gap:10px;color:var(--warn)}.kwarn.error .kwarn-bar,.kwarn.critical .kwarn-bar{color:var(--bad)}.kwarn-bar b{color:var(--ink);font-size:14px;font-weight:600}
.kwarn-list{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-med) var(--ease)}.kwarn-list>div{overflow:hidden}.kwarn-list.open{grid-template-rows:1fr}
.kwarn-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--border)}.kwarn-row:first-child{margin-top:8px}.kwarn-row .t{flex:1;min-width:0;font-size:13.5px}.kwarn-row small{display:block;color:var(--muted);font-size:12px}
.kbulk{position:absolute;left:50%;bottom:0;width:max-content;max-width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 16px;border-radius:20px;background:var(--surface);border:1px solid var(--border);box-shadow:0 18px 44px -20px rgba(11,12,16,.45);transform:translateX(-50%);animation:kbup var(--t-med) var(--ease) both;transition:opacity .2s,transform .2s}
@keyframes kbup{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}
.kbulk.closing{opacity:0;transform:translate(-50%,12px)}.kdragging .kbulk{opacity:0;pointer-events:none}
.kbulk-more{display:none}.kbulk-n{font-size:14px;font-weight:600}.kbulk-acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.kbulk .sel-btn{min-height:32px}
/* Task board: the open task */
.kd-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.kd-chips .kid{border:1px solid var(--border);border-radius:var(--r-pill);padding:3px 10px;font-size:12px}
.kd-acts{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 4px}
.kd-msg:empty{display:none}.kd-msg p{margin:8px 0;animation:fade var(--t-med) var(--ease) both}
.ok-line{color:var(--ok);font-size:13.5px;display:flex;gap:6px;align-items:center}
.kd-h{font-size:15px;font-weight:600;margin:4px 0 2px}
.kd-sec{margin-top:20px}.kd-sec>h3,.kd-sec>summary{font-size:14px;font-weight:600;margin:0 0 8px;display:flex;align-items:center;gap:8px}.kd-sec .n{font-size:12px;font-weight:500;color:var(--muted);background:var(--soft);border-radius:var(--r-pill);padding:1px 8px;margin-left:0}.kd-sec .n:empty{display:none}
.kd-meta{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px 16px;margin:18px 0 0}.kd-meta div{min-width:0}.kd-meta dt{font-size:12px;color:var(--muted)}.kd-meta dd{margin:2px 0 0;font-size:13.5px;overflow-wrap:anywhere}
.kd-read{border:1px solid var(--border);border-radius:var(--r-md);padding:12px 14px;background:var(--soft-2)}.kd-read .ghost{margin-top:8px}.kd-in{animation:fade var(--t-med) var(--ease) both}
.kd-md{font-size:13.5px;line-height:1.55;overflow-wrap:anywhere}.kd-plain{white-space:pre-wrap;font-size:13.5px;line-height:1.55;overflow-wrap:anywhere}
.kd-link,.kd-file{display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid var(--border);min-width:0}.kd-link .chip{flex:none}
.kd-linkb{flex:1;min-width:0;justify-content:flex-start;text-align:left;background:none;border:0;box-shadow:none;padding:0;min-height:34px;color:var(--blue-deep);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dark .kd-linkb{color:var(--blue-2)}
.kd-file .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}.kd-file small{color:var(--muted);font-size:12px}
.kd-sec>.sel-btn{margin-top:8px}
.kd-child{border:1px solid var(--border);border-radius:var(--r-md);padding:10px 12px;margin-bottom:8px}.kd-child-h{display:flex;align-items:center;gap:8px;margin-bottom:6px}.kd-child-h b{flex:1;min-width:0;font-size:13.5px}
.kd-cin{display:flex;gap:8px;margin-top:10px}.kd-cin input{flex:1;min-width:0}.kcomment small{font-weight:400;margin-left:6px}
.kdiag{border:1px solid color-mix(in srgb,var(--warn) 35%,var(--border));border-radius:var(--r-md);padding:10px 12px;margin-bottom:8px;background:color-mix(in srgb,var(--warn) 5%,transparent)}.kdiag.error,.kdiag.critical{border-color:color-mix(in srgb,var(--bad) 35%,var(--border));background:color-mix(in srgb,var(--bad) 5%,transparent)}
.kdiag>b{display:flex;gap:6px;align-items:center;font-size:13.5px}.kdiag>b svg{color:var(--warn);flex:none}.kdiag.error>b svg,.kdiag.critical>b svg{color:var(--bad)}.kdiag p{margin:4px 0 0;font-size:13px;color:var(--ink-2);line-height:1.5}
.kd-give{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.btnlink{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--border);font-size:13px;text-decoration:none}
.krun{border-left:3px solid var(--border);padding:6px 0 6px 12px;margin-bottom:8px}.krun.active{border-color:var(--blue)}.krun.completed,.krun.done{border-color:var(--ok)}.krun.failed,.krun.crashed,.krun.timed_out,.krun.gave_up{border-color:var(--bad)}
.krun-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:13px}.krun-h span{color:var(--ink-2)}.krun-h small{color:var(--muted);margin-left:auto}.krun p{margin:4px 0 0;font-size:13px;line-height:1.5}
.kev{padding:6px 0;border-bottom:1px solid var(--border);font-size:13px}.kev-h{display:flex;gap:8px;align-items:baseline}.kev-h b{display:flex;gap:6px;align-items:center;font-weight:500;flex:1}.kev-h small{color:var(--muted)}.kev.bad .kev-h b{color:var(--bad)}.kev p{margin:4px 0 0}.kev-p{display:block;margin-top:4px;font-size:11.5px;color:var(--muted);overflow-wrap:anywhere}
.kd-log-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.kd-log-h small{color:var(--muted)}.kd-logbox .log{max-height:360px;white-space:pre-wrap}
.kd-fold{interpolate-size:allow-keywords}.kd-fold>summary{cursor:pointer;list-style:none;font-size:13.5px;font-weight:600;color:var(--ink-2);padding:6px 0;display:flex;align-items:center;gap:8px}.kd-fold>summary::-webkit-details-marker{display:none}
.kd-fold>summary::before{content:"";width:6px;height:6px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(-45deg);transition:transform var(--t-fast) var(--ease);flex:none}.kd-fold[open]>summary::before{transform:rotate(45deg)}
.kd-fold::details-content{block-size:0;overflow:hidden;transition:block-size var(--t-med) var(--ease),content-visibility var(--t-med) allow-discrete}.kd-fold[open]::details-content{block-size:auto}.kd-fold[open]>div{animation:fade var(--t-med) var(--ease) both}
.kd-reveal{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-med) var(--ease)}.kd-reveal>div{overflow:hidden;min-height:0}.kd-reveal.open{grid-template-rows:1fr}
.kd-home{display:flex;padding:6px 0}
@media (max-width:760px){.kchk{opacity:1}.kcolbtn{opacity:1;width:36px;min-height:36px}.ktool .search{max-width:none;flex-basis:100%}.kmode{margin-left:0}.kbulk{padding:10px 12px;gap:8px}.kbulk-x{display:none}.kbulk.open .kbulk-x{display:flex;animation:fade var(--t-med) var(--ease) both}.kbulk-more{display:inline-flex}.kd-meta{grid-template-columns:1fr 1fr}}
/* ---------- Achievements ---------- */
.ach-cat{font-size:16px;font-weight:600;margin:22px 0 10px}
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.ach{padding:16px 18px;display:flex;flex-direction:column;gap:12px;animation:rise var(--t-med) var(--ease) both;opacity:.82}
.ach.on{opacity:1}
.ach-top{display:flex;gap:12px}.ach-top b{display:block;font-size:14px}.ach-top span{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.45;margin-top:2px}
.ach-ic{width:42px;height:42px;border-radius:14px;flex:none;display:grid;place-items:center;color:#fff;background:var(--tc,var(--muted))}
.ach:not(.on) .ach-ic{background:var(--soft);color:var(--muted)}
.ach-bar{height:6px;border-radius:var(--r-pill);background:var(--soft);overflow:hidden}.ach-bar i{display:block;height:100%;border-radius:inherit;transition:width .6s var(--ease)}
.ach-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}.ach-foot small{font-size:11.5px;color:var(--muted)}
.ach.secret{opacity:.75}.ach-chips{display:flex;gap:6px;flex-wrap:wrap}
.ach-what{margin:-4px 0 -6px}.ach-what>summary{font-size:12.5px;font-weight:500;padding:2px 0}.ach-what p{margin:4px 0 0;font-size:12.5px;color:var(--ink-2);line-height:1.5}
.ach-ev{display:inline-flex;align-items:center;gap:6px;min-width:0;font-size:12.5px;color:var(--ink-2);text-decoration:none;transition:color var(--t-fast)}.ach-ev span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ach-ev:hover{color:var(--blue-deep)}
.ach-share{align-self:flex-start;margin-top:-4px}
.ach-scan{padding:16px 18px;margin-bottom:16px;display:grid;gap:8px;animation:rise var(--t-med) var(--ease) both}.ach-scan .hint{margin:0}
.ach-guide{margin:0 0 16px}.ach-guide .hint{margin:6px 0 0;max-width:720px;line-height:1.55}
.ach-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:12.5px;color:var(--ink-2)}.ach-legend span{display:inline-flex;align-items:center;gap:6px}.ach-legend i{width:10px;height:10px;border-radius:50%}.ach-legend em{font-style:normal;color:var(--muted)}
.ach-pills{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}.ach-pills button{min-height:34px;padding:0 14px;font-size:13px;border-radius:var(--r-pill);transition:background var(--t-fast),color var(--t-fast)}.ach-pills button.on{background:linear-gradient(180deg,var(--blue-2),var(--blue));color:#fff;border-color:transparent}.dark .ach-pills button.on{color:#0b0c10}
.ach-share-img{aspect-ratio:1200/630;border-radius:var(--r-md);overflow:hidden;background:#0b0c10;display:grid;place-items:center}.ach-share-img img{width:100%;height:100%;display:block;animation:fade var(--t-med) var(--ease) both}
/* ---------- agent screen that is off ---------- */
.lcd.scr-off{display:grid;place-items:center;text-align:center;color:#c9cfdb;padding:6%}
.lcd.scr-off>div{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:360px;animation:rise var(--t-med) var(--ease) both}
.lcd.scr-off svg{color:#6f7a90}.lcd.scr-off b{color:#fff;font-size:15px}.lcd.scr-off span{font-size:12.5px;line-height:1.5;color:#9aa3b5}
.lcd.scr-off button{margin-top:6px}

/* tab labels fade as the pill slides under them */
.tabs button{transition:color var(--t-med) var(--ease)}

/* ---------- People ---------- */
.people-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.person{padding:18px;animation:rise var(--t-med) var(--ease) both}
.pshares{margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.pshares .th{display:block;margin-bottom:6px}
.pshare{display:flex;align-items:center;gap:10px;padding:6px 0}.pshare b{flex:1;font-size:13.5px;font-weight:500}
.pshare select{width:auto;min-height:32px;font-size:12.5px}
.pshare .logo,.pick .logo{width:26px;height:26px;border-radius:9px;font-size:12px}
.drawer-body label.pick{display:flex;align-items:center;gap:10px;margin:8px 0 0;padding:10px 12px;border:1px solid var(--border);border-radius:14px;font-weight:500;color:var(--ink);cursor:pointer;transition:border-color var(--t-fast),background var(--t-fast)}
.drawer-body label.pick:hover{border-color:var(--blue-2)}
.pick input[type=checkbox]{width:16px;height:16px;flex:none}.pick span{flex:1;min-width:0}.pick select{width:auto;min-height:30px;font-size:12.5px}
.signin input+label{margin-top:14px}
/* starter prompts swap in softly when fresh ones arrive */
.pick span.logo{flex:none}

/* ---------- Accounts: priority list ---------- */
.pri-list{display:flex;flex-direction:column;gap:8px}
.pri-row{display:grid;grid-template-columns:24px 32px minmax(150px,1fr) minmax(220px,1.3fr) auto;grid-template-areas:'n logo txt lim btn' '. . use sel sel';align-items:center;column-gap:12px;row-gap:8px;padding:10px 12px;border:1px solid var(--border);border-radius:16px;background:var(--surface);cursor:grab;animation:rise var(--t-med) var(--ease) both;transition:border-color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast) var(--ease)}
.pri-row:hover{box-shadow:0 10px 24px -18px rgba(11,12,16,.35)}
.pri-row.dragging{opacity:.45}.pri-row.over{border-color:var(--blue-2);transform:translateY(2px)}
.pri-n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue-deep);font-size:12px;font-weight:600;flex:none}
.pri-row .txt{flex:1;min-width:0}.pri-row .txt b{display:block;font-size:14px}.pri-row .txt span{display:block;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pri-row .logo{width:32px;height:32px;border-radius:10px;flex:none}
.pri-btns{display:flex;gap:2px}.pri-btns .icon-btn{width:30px;height:30px;min-height:30px;padding:0;display:grid;place-items:center}
.acct-more{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;border-style:dashed;color:var(--ink-2);min-height:180px;text-decoration:none}
.acct-more b{color:var(--ink)}.acct-more span{font-size:12.5px;max-width:240px}
/* each priority row is a live overview: status, session and week, who is on it, its model */
.pri-n{grid-area:n}.pri-row>.logo{grid-area:logo}.pri-row>.txt{grid-area:txt}.pri-lim{grid-area:lim;display:grid;gap:5px;min-width:0}.pri-use{grid-area:use}.pri-sel{grid-area:sel;min-width:0}.pri-row>.pri-btns{grid-area:btn}
.pri-row .txt b{display:flex;align-items:center;gap:8px;min-width:0}.pri-row .txt .pri-active{display:inline-flex;flex:none;font-size:11px;padding:1px 8px;font-weight:600;color:var(--ok);background:var(--ok-soft,rgba(22,163,74,.1));border-color:transparent;overflow:visible}
.pri-row .txt .pri-st{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}.pri-st .dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
.pri-st.on{color:var(--ok)}.pri-st.on .dot{background:var(--ok)}.pri-st.out{color:var(--bad)}.pri-st.out .dot{background:var(--bad)}
.mbar{display:grid;grid-template-columns:52px minmax(40px,1fr) 34px auto;align-items:center;gap:8px;font-size:12px;color:var(--muted);min-width:0}
.mbar b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}.mbar small{font-size:11.5px;white-space:nowrap}
.mb-t{height:6px;border-radius:var(--r-pill);background:var(--soft);overflow:hidden}.mb-t i{display:block;height:100%;border-radius:inherit;transition:width .6s var(--ease)}
.mb-t i.ok{background:linear-gradient(90deg,var(--blue-2),var(--blue))}.mb-t i.warn{background:linear-gradient(90deg,#f0b35a,var(--warn))}.mb-t i.bad{background:linear-gradient(90deg,#ff8a8a,var(--bad))}
.pri-lim .hint{margin:0;font-size:12.5px}
.pri-use{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);white-space:nowrap}.pri-use .acc-who{margin:0}
.pri-sel{justify-self:end}.pri-sel .sel-btn{max-width:240px}.pri-use{min-height:34px}
/* a narrower panel (Models at 800 px): name, who and buttons on the first line; limits, then the model, under the name */
@container (max-width:640px){.pri-row{grid-template-columns:24px 32px minmax(0,1fr) auto;grid-template-areas:'n logo txt btn' '. . lim lim' '. . use use' '. . sel sel'}.pri-sel{justify-self:start;max-width:100%}.pri-lim{max-width:460px}.pri-use{min-height:0}}
/* a phone: who is on it gets its own line too, the model picker the full width */
@container (max-width:480px){.pri-row{column-gap:10px;grid-template-areas:'n logo txt btn' '. . lim lim' '. . use use' 'sel sel sel sel'}.pri-sel,.pri-sel .sel-btn{justify-self:stretch;max-width:none;width:100%}.pri-btns .icon-btn{width:28px}}
/* chat: account usage ring next to the model */
.meter{display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:0 10px 0 8px;border:0;background:transparent;box-shadow:none;font-size:12.5px;color:var(--ink-2);border-radius:var(--r-pill);transition:background var(--t-fast)}
.meter:hover{background:var(--soft);transform:none;box-shadow:none}
.meter svg{transform:rotate(-90deg)}.meter .trk{fill:none;stroke:var(--soft);stroke-width:2.6}.dark .meter .trk{stroke:rgba(255,255,255,.12)}
.meter .val{fill:none;stroke:var(--blue);stroke-width:2.6;stroke-linecap:round;transition:stroke-dashoffset .8s var(--ease)}
.meter.warn .val{stroke:var(--warn)}.meter.bad .val{stroke:var(--bad)}.meter.bad span{color:var(--bad)}
@media (max-width:560px){.meter span{display:none}}
/* ---------- People: heads and the profile drawer ---------- */
.person-head{display:flex;align-items:center;gap:12px;border-radius:14px;margin:-6px;padding:6px;transition:background var(--t-fast)}
.person-head .txt{flex:1;min-width:0}.person-head .txt b{display:block;font-size:14.5px}.person-head .txt span{display:block;font-size:12.5px;color:var(--muted)}
.person-head.self{cursor:pointer}.person-head.self:hover{background:var(--soft-2)}
.person{display:flex;flex-direction:column}.person .more{margin-left:auto}
.prof-pic{display:flex;align-items:center;gap:16px;margin-bottom:6px}.prof-pic button{margin-right:6px}
.prof-h{font-size:14px;font-weight:600;margin:26px 0 0;padding-top:18px;border-top:1px solid var(--border)}
.person{position:relative}.person>.more{position:absolute;top:16px;right:14px}
.pcaps{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:2px}
.pcaps .th{display:block;margin-bottom:4px}
.capt{display:flex;align-items:center;gap:10px;padding:6px 8px;margin:0 -8px;border-radius:10px;font-size:13px;color:var(--ink-2);cursor:pointer;transition:background var(--t-fast)}
.capt:hover{background:var(--soft-2)}.capt input{width:16px;height:16px;flex:none}.capt.risky span{color:var(--bad)}
.people-grid{align-items:start}
/* chat: tools picked for the next message */
.tool-chips{display:flex;gap:6px;flex-wrap:wrap}.tool-chips:empty{display:none}
.tchip{display:inline-flex;align-items:center;gap:5px;padding:3px 4px 3px 9px;border-radius:var(--r-pill);background:var(--blue-soft);color:var(--blue-deep);font-size:12.5px;font-weight:500;animation:rise var(--t-med) var(--ease)}
.dark .tchip{color:var(--blue-2)}.tchip .ghost.icon{width:20px;min-height:20px;height:20px;padding:0}
.tchips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}.tchips .tchip{padding:3px 9px}
.composer-bar .ghost.icon.on{color:var(--blue);background:var(--blue-soft)}
.agent-people{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 0 10px;min-height:26px}
.aowner{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500}.aowner small{color:var(--muted);font-weight:400}
.ashared{display:inline-flex;align-items:center}.ashared>span{margin-left:-6px;border:2px solid var(--surface);border-radius:50%;display:inline-flex}.ashared small{margin-left:6px;color:var(--muted);font-size:12px}
.agent-card.locked{opacity:.75}.agent-card.locked:hover{transform:none}
/* collapsed rail: every icon on one centre line */
.collapsed .side-top{padding:0!important;justify-content:center}.collapsed .side-top .wordmark{gap:0;margin:0;justify-content:center;width:100%}
.collapsed .side-top .collapse-btn{margin:0 auto}
.row-in{display:flex;gap:8px;align-items:center}.row-in input{flex:1}
.signin #code{letter-spacing:.3em;font-size:20px;text-align:center}
/* usage tables */
.utable{display:flex;flex-direction:column;font-size:13px}
.utable .uh,.utable .ur{display:grid;grid-template-columns:minmax(160px,2fr) repeat(5,minmax(70px,1fr));gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--border)}
.utable .uh{border-top:0;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600}
.utable .ur>span:not(.uname){font-variant-numeric:tabular-nums;color:var(--ink-2)}
.uname{display:flex;align-items:center;gap:8px;font-weight:500;min-width:0}.uname small{color:var(--muted);font-weight:400;margin-left:4px}
@media (max-width:760px){.utable .uh,.utable .ur{grid-template-columns:1.6fr repeat(3,1fr)}.utable .uh>span:nth-child(5),.utable .uh>span:nth-child(6),.utable .ur>span:nth-child(5),.utable .ur>span:nth-child(6){display:none}}
.h-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.h-row button{min-height:32px;font-size:13px}
/* achievement medals: tier colour when won, quiet grey with a small lock when not yet */
.ach-ic{position:relative;border-radius:50%!important;background:var(--soft)!important;color:var(--muted)!important}
.ach-ic.won{background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--tc) 55%,#fff),var(--tc) 70%)!important;color:#fff!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--tc) 22%,transparent),0 8px 18px -10px var(--tc)}
.ach-lock{position:absolute;right:-2px;bottom:-2px;width:18px;height:18px;border-radius:50%;background:var(--surface);border:1px solid var(--border);display:grid;place-items:center;color:var(--muted)}
button.small{min-height:32px;padding:0 14px;font-size:13px;gap:6px}
.agent-tags{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.realname{font-weight:400;color:var(--muted);font-size:11.5px;margin-left:4px}
.mi-sub{display:block;font-size:11.5px;color:var(--muted);font-weight:400;line-height:1.35;margin-top:1px;white-space:normal}
.menu .item .t{min-width:0}
.role-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:6px}
.role-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:14px 16px;border-radius:18px;min-height:0;background:var(--soft-2);border:1px solid var(--border);box-shadow:none;animation:rise var(--t-med) var(--ease) both}
.role-card:hover{border-color:var(--blue-2);transform:translateY(-1px)}.role-card b{font-size:14px}.role-card span{font-size:12.5px;color:var(--ink-2);font-weight:400}.role-card small{font-size:11.5px;color:var(--muted)}

/* ---------- smoothness ---------- */
/* refreshing the page you are on: content swaps in place, nothing re-animates */
/* same-page redraws: calm motion (core.js) stops their fades before they paint; a switch here would restart them all when it lifts */
/* labels inside panels breathe like the ones in drawers */
.panel label:not(.capt):not(.pick):not(.switch):not([class*="toggle"]){display:block;font-size:13px;font-weight:500;color:var(--ink-2);margin:16px 0 6px}
.panel .sub+label,.panel h2+label,.panel>div>label:first-child{margin-top:4px}
.panel .sched-row{gap:12px}
/* pressing things feels physical */
button:active:not(:disabled){transform:scale(.98)}
.card.tile,.role-card,.pri-row,.kcard{will-change:transform}
/* empty chat sits under the same soft sky as the other empty states */
.chat-scroll:has(.chat-empty){background:radial-gradient(70% 420px at 50% 0%,var(--sky-1),transparent 75%)}
.qr-steps{margin:6px 0 10px;padding-left:20px;color:var(--ink-2);font-size:13px;line-height:1.7;text-align:left}

/* ---------- checkboxes: one brand style everywhere (switches keep their own look) ---------- */
input[type=checkbox]:not(.switch){appearance:none;-webkit-appearance:none;width:18px;height:18px;min-width:18px;margin:0;border:1.5px solid #b9bcc8;border-radius:6px;background:var(--surface);display:inline-grid;place-items:center;cursor:pointer;vertical-align:middle;transition:background var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);flex:none}
input[type=checkbox]:not(.switch)::after{content:"";width:10px;height:10px;background:#fff;clip-path:polygon(14% 52%,0 66%,38% 100%,100% 22%,86% 8%,38% 72%);transform:scale(0);transition:transform var(--t-fast) var(--ease)}
input[type=checkbox]:not(.switch):checked{background:linear-gradient(180deg,var(--blue-2),var(--blue));border-color:transparent}
input[type=checkbox]:not(.switch):checked::after{transform:scale(1)}
input[type=checkbox]:not(.switch):hover{border-color:var(--blue-2)}
input[type=checkbox]:not(.switch):focus-visible{outline:3px solid var(--blue-2);outline-offset:2px}
input[type=checkbox]:not(.switch):disabled{opacity:.45;cursor:not-allowed}
.dark input[type=checkbox]:not(.switch){border-color:#4a4e5a}
/* the checkbox look above sets display, which would show checkboxes kept hidden on purpose */
input[type=checkbox][hidden],input[hidden]{display:none}
/* rows of checkboxes line up with their text, in drawers and panels alike */
.drawer-body label.capt,.panel label.capt,label.capt{display:flex;align-items:center;gap:12px;margin:0 -8px;padding:9px 8px;font-size:13.5px;font-weight:400;color:var(--ink);line-height:1.35}
.drawer-body label.capt span,label.capt span{flex:1;min-width:0}
.drawer-body label.pick{align-items:center}
.share-box{display:inline-flex;align-items:center;gap:6px;margin-right:4px}
.cron-pops{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:10px;z-index:39;max-width:min(380px,calc(100vw - 32px))}
.cron-pop{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 14px;border-radius:18px;background:var(--surface);border:1px solid var(--border);box-shadow:0 18px 40px -18px rgba(11,12,16,.35);animation:rise var(--t-med) var(--ease) both;transition:opacity var(--t-med),transform var(--t-med) var(--ease)}
.cron-pop.out{opacity:0;transform:translateY(8px)}.cron-pop .txt{flex:1;min-width:0}.cron-pop .txt b{display:block;font-size:13.5px}.cron-pop .txt span{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.4}
.cron-pop .ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none}
.chip.access{font-size:11px;padding:2px 8px;gap:4px;vertical-align:middle;margin-left:6px;font-weight:500}
.chip.access.shared{background:var(--blue-soft);color:var(--blue-deep);border-color:transparent}.dark .chip.access.shared{color:var(--blue-2)}
.chip.access.public{background:#fff4e5;color:#8a5300;border-color:transparent}.dark .chip.access.public{background:#3a2a10;color:#f0b35a}
/* checkboxes never take the text-field size or padding */
input[type=checkbox]:not(.switch),.drawer-body input[type=checkbox]:not(.switch),.panel input[type=checkbox]:not(.switch){width:18px!important;height:18px!important;min-width:18px!important;min-height:0!important;padding:0!important;margin:0!important;font-size:0!important;line-height:0!important;box-shadow:none;flex:0 0 18px}
input[type=checkbox]:not(.switch)::after{margin:auto}
/* access badges stay small and inline next to the name */
.txt b .chip.access,h3 .chip.access{display:inline-flex!important;width:auto!important;max-width:max-content;flex:none;white-space:nowrap;vertical-align:1px}
.txt b:has(.chip.access){display:flex!important;align-items:center;flex-wrap:wrap;gap:0 4px}
.skill-preview{max-height:52vh;overflow:auto;padding:14px 16px;border:1px solid var(--border);border-radius:14px;background:var(--soft-2);font-size:13.5px;line-height:1.6}
.skill-preview h1{font-size:17px;margin:4px 0 8px}.skill-preview h2{font-size:15px;margin:14px 0 6px}.skill-preview h3{font-size:14px;margin:12px 0 4px}
/* agent cards: one footer height whether it shows "In use" or the button, so the ⋯ menus line up */
.tile .agent-foot{min-height:36px;padding-top:12px;border-top:1px solid var(--border)}
.tile .agent-foot>span{display:flex;align-items:center;gap:8px}
.tile .agent-foot .chip.ok{min-height:32px;padding:0 12px}
.screen-head .scr-pick{min-height:30px;max-width:220px;padding:0 28px 0 10px;font-size:13px;font-weight:600;border-radius:10px;margin:0 0 0 2px;width:auto}
.screen-head.compact .scr-pick{max-width:150px}
.screen-head .scr-note{font-size:11px;white-space:nowrap}
.screen-head{flex-wrap:nowrap;min-width:0}.screen-head .scr-pick{flex:0 1 auto;min-width:0;text-overflow:ellipsis}
/* composer toolbar: buttons keep their size; when the box is narrow, labels fold into icons instead of overflowing */
.composer{container-type:inline-size}
.composer-bar>*{flex:none}
.composer-bar .grow{flex:1 1 0;min-width:0}
.composer-bar .pick{min-width:0;max-width:170px;white-space:nowrap;overflow:hidden}
.composer-bar .busy-mode{color:var(--blue);background:var(--blue-soft);gap:5px}
.composer-bar .send{flex:none;width:38px;height:38px;border-radius:50%}
@container (max-width:620px){.composer-bar .pick>span:first-child:not(:only-child){display:none}.composer-bar .busy-mode span{display:none}}
@container (max-width:520px){.composer-bar .meter span{display:none}.composer-bar .lang{display:none}}
/* the screen never squeezes the chat below ~460px; on small windows it floats over the chat instead */
.app.screen-open{grid-template-columns:var(--side-w) minmax(460px,1fr) min(var(--screen-w,min(48vw,820px)),max(320px,calc(100vw - var(--side-w) - 460px)))}
@media (max-width:1180px) and (min-width:761px){
 .app.screen-open{grid-template-columns:var(--side-w) minmax(0,1fr)}
 .screen-pane{position:fixed;top:0;right:0;bottom:0;width:min(460px,92vw);z-index:44;box-shadow:-12px 0 32px rgba(11,12,16,.12)}
 .screen-pane .resizer{display:none}}
/* toolbar = left tools + right controls; on a narrow box the right group moves to its own line, right-aligned */
.composer-bar{flex-wrap:wrap;justify-content:space-between;row-gap:6px}
.composer-bar>.cb-l,.composer-bar>.cb-r{display:flex;align-items:center;gap:6px;min-width:0}
.composer-bar>.cb-r{margin-left:auto}
.composer-bar .cb-r>*{flex:none}
.composer-bar>.cb-r{gap:4px}@container (max-width:420px){.composer-bar .pick{padding:0 8px}}
.mem-parts .mem-row{display:grid;grid-template-columns:minmax(120px,240px) 1fr 76px;align-items:center;gap:12px;padding:7px 0;font-size:13.5px}
.mem-parts .mem-row i{display:block;height:8px;border-radius:99px;background:var(--soft);position:relative;overflow:hidden}
.mem-parts .mem-row i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--blue);border-radius:inherit;animation:growW .6s var(--ease) both}
.mem-parts .mem-row b{text-align:right;font-variant-numeric:tabular-nums}
@keyframes growW{from{width:0}}
.tile-foot .add-another{display:inline-flex;align-items:center;gap:4px;margin-left:auto;margin-right:8px;padding:4px 10px;border-radius:var(--r-pill);font-size:12.5px;font-weight:600;color:var(--blue);background:var(--blue-soft);cursor:pointer;transition:background var(--t-f,.15s)}
.tile-foot .add-another:hover{background:rgba(1,88,203,.14)}
.extra-head .txt span{white-space:normal}
/* loaded content arrives smoothly (see watchReveal in core.js) */
.reveal{animation:reveal .42s var(--ease) backwards;animation-delay:calc(min(var(--ri,0),8) * 45ms)}
/* a page redrawn on the same visit (data-still) keeps still: its rows and cards don't play their entrance again */
[data-still] .reveal,[data-still] .row,[data-still] .tile,[data-still] .card,[data-still] .toolbar,[data-still] .sched-folder{animation:none!important}
.reveal .row,.reveal .tile,.reveal .stat{animation-delay:calc(min(var(--ri,0),8) * 45ms + 60ms)}
@keyframes reveal{from{opacity:0;transform:translateY(8px);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
/* placeholders: a soft moving shine so it reads as "loading", not as empty boxes */
.skel{background:linear-gradient(100deg,var(--soft) 30%,var(--surface) 50%,var(--soft) 70%);background-size:220% 100%;animation:shimmer 1.3s ease-in-out infinite}
.skel-row{animation:shimmer 1.3s ease-in-out infinite,skelIn .3s var(--ease) both}
@keyframes skelIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.reveal{animation:none}.skel,.skel-row{animation:none}}
.id-code{color:var(--ink-2);font-weight:500;white-space:nowrap}
.txt span.id-code{display:inline}
.tile-top .tile-id{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}.tile-top .tile-id.ch-pending{color:var(--warn)}
/* chat formatting: smaller headings, dividers, nested and task lists, images, wide tables */
.md h4{font-size:14.5px;font-weight:600;margin:14px 0 6px}
.md hr{border:0;border-top:1px solid var(--border);margin:16px 0}
.md li>ul,.md li>ol{margin:4px 0 2px}
.md li.task{list-style:none;margin-left:-18px;display:flex;gap:8px;align-items:flex-start}
.md li.task .tick{flex:none;width:16px;height:16px;margin-top:3px;border-radius:5px;border:1.5px solid var(--border);display:inline-grid;place-items:center;font-size:11px;color:#fff}
.md li.task .tick.on{background:var(--blue);border-color:var(--blue)}
.md s{color:var(--muted)}
.md .md-img{display:block;max-width:min(100%,560px);height:auto;border-radius:var(--r-md);border:1px solid var(--border);margin:8px 0}
.md .table-wrap{overflow-x:auto;margin:6px 0 14px}.md .table-wrap table{margin:0}
.thread.settled .msg,.thread.settled .step,.thread.settled .approval{animation:none}
/* lean steps: slim rows like a log, not cards */
.steps{gap:1px;margin:0 0 12px}
.step{border:0;background:transparent;border-radius:8px;animation:none}
.step-head{min-height:30px;padding:4px 8px;gap:8px;font-size:13px;border-radius:8px;color:var(--ink-2)}
.step-head:hover{background:var(--soft)}
.step-head .si{width:18px;height:18px;background:transparent;border-radius:0;color:var(--muted)}
.step-head .sum b{font-weight:600;color:var(--ink)}
.step-head .sum .sub-t{color:var(--muted)}
.step-head .sum code{font-size:12px;background:transparent;padding:0}
.step-head .state{font-size:11.5px}
.step.open{background:var(--soft-2)}
.step-body pre{border-top:0;padding:4px 12px 10px 34px;font-size:12px}
.steps-fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;min-height:30px;padding:4px 8px;border-radius:8px;font-size:13px;color:var(--muted);user-select:none}
.steps-fold>summary::-webkit-details-marker{display:none}
.steps-fold>summary:hover{background:var(--soft);color:var(--ink-2)}
.steps-fold>summary svg{transition:transform var(--t-med) var(--ease)}
.steps-fold[open]>summary svg{transform:rotate(90deg)}
.steps-fold[open]{padding-bottom:2px}
.steps-fold .step{margin-left:14px}
.bad-t{color:var(--bad)}
/* heading scale in replies */
.md .md-h1{font-size:22px;line-height:1.3;font-weight:700;letter-spacing:-.01em;margin:22px 0 10px}
.md .md-h2{font-size:18px;line-height:1.35;font-weight:650;margin:20px 0 8px}
.md .md-h3{font-size:16px;line-height:1.4;font-weight:600;margin:16px 0 6px}
.md .md-h4{font-size:15px;line-height:1.45;font-weight:600;margin:14px 0 4px;color:var(--ink-2)}
.md>.md-h1:first-child,.md>.md-h2:first-child,.md>.md-h3:first-child,.md>.md-h4:first-child{margin-top:2px}
.md b,.md strong{font-weight:650;color:var(--ink)}
/* long links and codes wrap inside chat bubbles instead of running off the edge */
.msg.user,.msg .text{overflow-wrap:anywhere;word-break:break-word;min-width:0}
.msg .text pre,.msg .text .codeblock pre{overflow-x:auto;word-break:normal;overflow-wrap:normal}
/* usage card (chat › usage %) */
.meter-card{position:fixed;z-index:60;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:0 12px 32px rgba(11,12,16,.16);padding:14px 16px;animation:rise var(--t-fast,.18s) var(--ease) both}
.meter-card .mc-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px}
.meter-card .mc-head b{font-size:14px}.meter-card .mc-head span{font-size:12.5px;color:var(--muted)}
.meter-card .mc-row{padding:8px 0;border-top:1px solid var(--border)}
.meter-card .mc-top{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-2)}.meter-card .mc-top b{color:var(--ink);font-variant-numeric:tabular-nums}
.meter-card .mc-bar{display:block;height:6px;border-radius:99px;background:var(--soft);margin:6px 0 4px;overflow:hidden}
.meter-card .mc-bar s{display:block;height:100%;border-radius:inherit;background:var(--blue);text-decoration:none}
.meter-card .mc-bar.warn s{background:#d4880f}.meter-card .mc-bar.bad s{background:var(--bad)}
.meter-card small{font-size:12px;color:var(--muted)}
.meter-card .mc-more{margin-top:8px;width:100%;justify-content:center}
/* per-chat permission switch */
.composer-bar .perm{gap:5px}
.composer-bar .perm.on{color:#9a5b00;background:#fff4e0}
.dark .composer-bar .perm.on{color:#f3b45a;background:rgba(243,180,90,.12)}
@container (max-width:620px){.composer-bar .perm span{display:none}}
/* narrow windows (or the screen panel open): layouts follow the space they actually have */
.page{container-type:inline-size;container-name:page}
.panel,.card.list{container-type:inline-size}
@container page (max-width:880px){.two{grid-template-columns:minmax(0,1fr)}}
.stack-2{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
/* label above its control when a panel is narrow */
@container (max-width:520px){.field{grid-template-columns:minmax(0,1fr);gap:8px;align-items:start}.field>div{width:100%}}
/* list rows: the name gets the room, the chips/buttons wrap under it when tight */
.row .txt{min-width:0}.row .txt b,.row .txt span{overflow-wrap:anywhere}
/* controls on the right never crush the text: when the row is too narrow for both, they move under it, lined up with
   the text (past the icon). A picker (Owned by, a model) needs room sooner; a lone switch or ⋯ stays on the right */
.row>.act{min-width:0}
@container (max-width:640px){.row:has(>.act :is(.sel-btn,.acc-ownbox)){grid-template-columns:minmax(0,1fr);row-gap:10px}
 .row>.act:has(:is(.sel-btn,.acc-ownbox)){justify-content:flex-start;flex-wrap:wrap;width:100%}
 .row>.act>.sel-btn{flex:1 1 0;min-width:120px;max-width:300px}.row>.act>.ch-more{margin-left:auto}
 .row>.act.ch-act .ab-lbl{display:inline}}
@container (max-width:400px){.row>.act.ch-act .ab-lbl{display:none}}   /* phones: picker and ⋯ stay on one line */
@container (max-width:460px){.row:has(>.act>:not(.switch,.icon,.tsg-ro,.chip,.sel-native,.ch-more)){grid-template-columns:minmax(0,1fr);row-gap:8px}
 .row>.act:has(>:not(.switch,.icon,.tsg-ro,.chip,.sel-native,.ch-more)){justify-content:flex-start;flex-wrap:wrap;width:100%}}
/* the indent is the icon plus its gap; rows without an icon start at the text edge */
@container (max-width:640px){.row:has(>.main-c>.txt:not(:first-child))>.act:has(:is(.sel-btn,.acc-ownbox)){padding-left:52px}}
@container (max-width:460px){.row:has(>.main-c>.txt:not(:first-child))>.act:has(>:not(.switch,.icon,.tsg-ro,.chip,.sel-native,.ch-more)){padding-left:52px}
 .row>.act>button.ghost:not(.icon):first-child{margin-left:-18px}}   /* a borderless text button: its words line up, not its padding */
/* who an account is and how it is doing wrap instead of being cut; a chip stays whole */
.row .txt span.acct-line,.row .txt span.ch-status{white-space:normal;overflow:visible;text-overflow:clip}
.row .txt .acct-line>.kind-chip{max-width:100%;min-width:0}
.row .txt span.acct-line.ch-pending{display:block}.row .txt .ch-pending>svg{display:inline-block;vertical-align:-2px;margin-right:5px}   /* the warning sign leads its sentence, not a line of its own */
.list-head{gap:12px}
/* usage tables follow their panel's width, not the window's */
.utable{min-width:0;overflow-x:auto}
.utable .uh,.utable .ur{grid-template-columns:minmax(120px,2fr) repeat(5,minmax(56px,1fr))}
@container (max-width:620px){.utable .uh,.utable .ur{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(48px,1fr))}.utable .uh>span:nth-child(5),.utable .uh>span:nth-child(6),.utable .ur>span:nth-child(5),.utable .ur>span:nth-child(6){display:none}}
/* Link WhatsApp: one QR window for connect, relink and add another */
.wa-link{animation:rise .25s ease both}
.wa-qr{width:232px;height:232px;display:block;margin:4px auto 14px;border-radius:14px;background:#fff;padding:10px;box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,.08));animation:rise .3s ease both}
.wa-done{display:flex;gap:14px;align-items:flex-start;padding:6px 0;animation:rise .3s ease both}
.wa-done .ic.ok{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok);width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none}
.txt b .acct{font-weight:500;color:var(--muted);font-size:12.5px;margin-left:6px;white-space:nowrap}
.txt span .dot.ok{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:6px;vertical-align:1px}
.ch-cat-head{margin:6px 2px 12px;animation:rise .3s ease both}.ch-cat-head h2{margin:0;font-size:17px}.ch-cat-head .sub{margin:4px 0 0}
.cat-note{font-size:12.5px;color:var(--muted)}
.cron-pop .ic.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.msg.user.steer .steer-now{margin-left:8px;padding:2px 10px;min-height:0;font-size:12px;border-radius:999px;background:var(--blue-soft);color:var(--blue-deep);border:0;cursor:pointer;transition:background .2s,transform .15s}
.msg.user.steer .steer-now:hover{background:var(--blue);color:#fff}.msg.user.steer .steer-now:active{transform:scale(.97)}
.dark .msg.user.steer .steer-now{color:var(--blue-2)}
.row .txt .acct-line{font-size:12.5px;color:var(--ink-2);margin-top:1px}
.row .txt span .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--muted);margin-right:6px;vertical-align:1px}
.row .txt span .dot.ok{background:var(--ok)}
/* status dots: on, on its way (restart, connecting), broken (logged out, failed); plain is off on purpose */
.dot.ok{background:var(--ok)}.dot.warn{background:var(--warn)}.dot.bad{background:var(--bad)}.row .txt span .dot.warn{background:var(--warn)}.row .txt span .dot.bad{background:var(--bad)}
.chip .dot{transition:background-color var(--t-med) var(--ease)}
/* a pop-up in the middle of the chat column only: the chat behind is dimmed and blurred so the field has full attention */
.chat{position:relative}
.secret-slot{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;background:color-mix(in srgb,var(--bg) 55%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fade .2s ease both}
.secret-slot:empty{display:none}
.secret-slot .secret-card{width:min(560px,100%);padding:22px 24px;border-radius:20px;animation:secretIn .28s cubic-bezier(.2,.8,.2,1) both}
@keyframes secretIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.secret-card{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:16px;background:var(--surface);border:1px solid color-mix(in srgb,var(--blue) 35%,var(--border));box-shadow:var(--shadow-float);animation:rise .3s ease both;transition:opacity .3s,transform .3s}
.secret-card.out{opacity:0;transform:translateY(6px)}
.secret-card>.ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none;background:var(--blue-soft);color:var(--blue-deep)}
.dark .secret-card>.ic{color:var(--blue-2)}
.secret-card .sc-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.secret-card .sc-main b{font-size:15px;display:flex;align-items:center;gap:6px;line-height:1.4}
.secret-card .sc-row{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.secret-card .sc-row input{flex:1;min-width:180px;letter-spacing:.5px}
.secret-card .sc-err{color:var(--bad)}
.secret-card.done{border-color:color-mix(in srgb,var(--ok) 40%,var(--border))}
.secret-card.done>.ic{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}

.secret-card .sc-field{display:flex;gap:6px;align-items:center;margin-top:10px}
.secret-card .sc-field input{flex:1;min-width:0;letter-spacing:.5px}
.secret-card [data-ctx]{margin-top:2px}
.secret-card .sc-lbl{font-size:12.5px;font-weight:600;color:var(--ink-2);margin:10px 0 0}
.secret-card .sc-lbl+.sc-field{margin-top:4px}
.secret-card .sc-actions{display:flex;gap:8px;align-items:center;margin-top:14px}
.secret-card .sc-actions .grow{flex:1}
.secret-card .sc-left{font-size:12px;color:var(--muted)}
.secret-card .sc-err{font-size:12.5px;color:var(--bad);min-height:0}
.secret-card .sc-err:empty{display:none}

/* ---------- motion: things leave as smoothly as they arrive ---------- */
@keyframes fadeOut{to{opacity:0}}
@keyframes slideOut{to{transform:translateX(28px);opacity:0}}
@keyframes menuOut{to{opacity:0;transform:translateY(-4px) scale(.98)}}
@keyframes popOut{to{opacity:0;transform:translate(-50%,6px) scale(.98)}}
.scrim.closing{animation:fadeOut .21s var(--ease) both}
.drawer.closing{animation:slideOut .21s cubic-bezier(.4,0,1,1) both}
.menu.closing{animation:menuOut .15s var(--ease) both}
.palette.closing{animation:popOut .18s var(--ease) both}
.secret-slot.closing{animation:fadeOut .26s var(--ease) both}
@keyframes cardOut{to{opacity:0;transform:translateY(8px) scale(.98)}}
.secret-slot .secret-card.out,.cron-pop.out{animation:cardOut .26s var(--ease) both}
/* the chat: what is already on screen stays still while a reply streams; only new messages and steps rise in */
.thread .msg.still,.thread .step.still,.thread .approval.still{animation:none}
.steps-fold.opening>:not(summary){animation:rise .26s var(--ease) both}
.steps-fold.opening>:not(summary):nth-child(3){animation-delay:30ms}.steps-fold.opening>:not(summary):nth-child(4){animation-delay:60ms}.steps-fold.opening>:not(summary):nth-child(n+5){animation-delay:90ms}
/* everything settles quickly for people who ask their system for less motion */
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* chat list: where each chat came from, a ring while the agent works, a dot when something is new */
.item .src{position:relative;display:grid;place-items:center}
.item .src.working svg{opacity:0}
.item .src.working::after{content:"";position:absolute;width:12px;height:12px;left:50%;top:50%;margin:-6px 0 0 -6px;border-radius:50%;border:1.75px solid color-mix(in srgb,var(--blue) 22%,transparent);border-top-color:var(--blue);animation:spin .8s linear infinite}
.item.unread .t{font-weight:650;color:var(--ink)}
.item .unread-dot{width:8px;height:8px;border-radius:50%;background:var(--blue);flex:none;margin-left:auto;box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 18%,transparent);animation:fade .25s var(--ease) both}
.item.unread .more{margin-left:4px}
/* dictation: a red pulse and a timer while recording, a spinner while the box transcribes */
.mic-time{font-size:12px;font-variant-numeric:tabular-nums;color:var(--bad);min-width:30px;animation:fade .2s var(--ease) both}
.mic.busy{opacity:1}

/* "Which browser?" card: two clear choices, the suggested one highlighted */
.secret-card .choice-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.secret-card .choice-row .pick{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;white-space:normal;height:auto;min-height:0;padding:12px 14px;border-radius:14px;font-weight:400;position:relative;transition:border-color .2s,box-shadow .2s,transform .15s}
.secret-card .choice-row .pick b{display:flex;align-items:center;gap:6px;font-size:14px}
.secret-card .choice-row .pick span{font-size:12.5px;color:var(--ink-2);line-height:1.45}
.secret-card .choice-row .pick em{position:absolute;top:10px;right:10px;font-style:normal;font-size:11px;font-weight:600;color:var(--blue-deep);background:var(--blue-soft);border-radius:999px;padding:1px 8px}
.secret-card .choice-row .pick.rec{border-color:color-mix(in srgb,var(--blue) 55%,var(--border));box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 12%,transparent)}
@media (max-width:640px){.secret-card .choice-row{grid-template-columns:1fr}}
.lb-state{display:flex;align-items:center;gap:8px;font-weight:600}.lb-state .dot{width:9px;height:9px;border-radius:50%;background:var(--muted)}.lb-state.on .dot{background:var(--ok)}
.lb-steps code{font-family:var(--mono);font-size:12.5px;background:var(--soft);padding:1px 6px;border-radius:6px}
.lb-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--blue-deep);background:var(--blue-soft);border-radius:999px;padding:2px 2px 2px 9px;animation:fade .2s var(--ease) both}.lb-chip .ghost.icon{min-height:22px;min-width:22px;padding:0}.dark .lb-chip{color:var(--blue-2)}

/* screen panel: AI box screen or My browser */
.scr-seg{display:inline-flex;background:var(--soft);border-radius:999px;padding:2px;gap:2px;flex:none}
.scr-seg button{min-height:26px;padding:0 10px;font-size:12px;border:0;background:transparent;box-shadow:none;border-radius:999px;color:var(--ink-2);transition:background .2s,color .2s}
.scr-seg button:hover{transform:none;box-shadow:none}
.scr-seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(11,12,16,.12)}
.lb-mirror{display:grid;place-items:center;background:#0b0c10;overflow:hidden}
.lb-mirror img{width:100%;height:100%;object-fit:contain;display:block;animation:fade .25s var(--ease) both}
.lb-note{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:#e8e9ee;padding:24px;max-width:380px;animation:fade .25s var(--ease) both}
.lb-note b{font-size:14.5px}.lb-note span{font-size:12.5px;color:#a9adb8;line-height:1.5}.lb-note button{margin-top:6px}
.lb-bar{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lb-bar .lb-url{color:var(--muted)}

/* channel rows: Owned by and one ⋯ menu, aligned on every row */
.ch-act{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.ch-act .ab-lbl{font-size:12.5px;color:var(--muted);white-space:nowrap}
.ch-act .sel-btn,.ch-act select{min-width:150px}
.ch-act .ch-more{flex:none}
@media (max-width:720px){.ch-act .ab-lbl{display:none}.ch-act .sel-btn,.ch-act select{min-width:120px}}

/* pop-ups in the middle: rounded, the page dimmed and softly blurred behind */
.drawer.pop{top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:min(560px,calc(100vw - 24px));max-height:min(88vh,920px);border:1px solid var(--border);border-radius:24px;box-shadow:0 30px 80px -20px rgba(11,12,16,.35);animation:popIn .28s var(--ease) both;overflow:hidden}
.drawer.pop.sm{width:min(440px,calc(100vw - 24px))}.drawer.pop.lg{width:min(780px,calc(100vw - 24px))}
.drawer.pop .drawer-head{height:auto;min-height:60px;padding:16px 14px 6px 24px;border-bottom:0}
.drawer.pop .drawer-head h2{font-size:17px}
.drawer.pop .drawer-body{flex:0 1 auto;padding:8px 24px 18px}
.drawer.pop .drawer-foot{border-top:1px solid var(--border);padding:14px 20px;background:var(--soft)}
.dark .drawer.pop .drawer-foot{background:rgba(255,255,255,.02)}
.drawer.pop.closing{animation:popOut .2s cubic-bezier(.4,0,1,1) both}
body:has(.drawer.pop) .scrim{backdrop-filter:blur(5px);background:rgba(11,12,16,.32)}
@keyframes popIn{from{opacity:0;transform:translate(-50%,-47%) scale(.965)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes popOut{from{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-48.5%) scale(.97)}}
@media (prefers-reduced-motion:reduce){.drawer.pop,.drawer.pop.closing{animation:none}}

/* Schedules: folders, descriptions, costs */
.sched-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}.sched-bar .search{flex:1;min-width:200px}
.sched-folder{margin-bottom:14px}
.sf-head{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;padding:6px 6px 8px;min-height:0;color:var(--ink);font-size:14px;cursor:pointer;box-shadow:none;border-radius:10px}
.sf-head:hover{background:var(--soft)}.sf-head>svg:first-child{transition:transform .25s var(--ease)}.sched-folder.shut .sf-head>svg:first-child{transform:rotate(-90deg)}
.sf-head .n{font-size:12px;color:var(--muted);background:var(--soft);border-radius:999px;padding:1px 8px}.sf-head .sf-cost{font-size:12px;color:var(--muted);margin-left:4px}
.sf-head .sf-more{margin-left:auto;opacity:0;padding:4px;border-radius:8px;display:grid;place-items:center;transition:opacity .2s}.sf-head:hover .sf-more,.sf-head:focus-visible .sf-more{opacity:1}.sf-more:hover{background:var(--soft-2)}
.sf-body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s var(--ease),opacity .25s}.sf-body>.card{min-height:0;overflow:hidden}
.sched-folder.shut .sf-body{grid-template-rows:0fr;opacity:0}
.sj-row{cursor:pointer;transition:background var(--t-fast)}.sj-row:hover{background:var(--soft)}
.sj-row .txt .sched-desc{display:block;color:var(--ink-2);font-size:13px;line-height:1.45;white-space:normal;margin:2px 0}
.sj-row .txt .sched-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.sm-chip{font-size:11px;padding:1px 8px;gap:4px}
.row .ic.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.sd-top{display:flex;gap:6px;flex-wrap:wrap}.sd-sum{font-size:15px;line-height:1.55;margin:12px 0 6px}.sd-sum.muted{color:var(--muted)}
.sd-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:14px 0}.sd-facts>div{background:var(--soft);border-radius:14px;padding:10px 12px}.sd-facts small{display:block;font-size:11.5px;color:var(--muted)}.sd-facts b{font-size:13.5px;font-weight:600}
.sd-h{font-size:13.5px;margin:18px 0 6px}.sd-h small{font-weight:400;color:var(--muted);margin-left:6px}
.sd-steps{margin:0;padding-left:20px;line-height:1.6;font-size:14px}
.sd-last{background:var(--soft);border-radius:14px;padding:12px 14px;max-height:280px;overflow:auto;font-size:13.5px;margin-bottom:8px}
.sd-book,.sd-raw{margin-top:14px;border:1px solid var(--border);border-radius:14px;padding:10px 14px}.sd-book summary,.sd-raw summary{cursor:pointer;display:flex;align-items:center;gap:8px;font-size:13.5px}
.sd-book .md{max-height:360px;overflow:auto;margin-top:10px;font-size:13.5px}.sd-raw pre{white-space:pre-wrap;font-size:12.5px;margin:10px 0 0;max-height:260px;overflow:auto}
.sd-runs{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:14px;overflow:hidden}
.sd-run{display:grid;grid-template-columns:1.4fr .8fr 1fr .8fr 1.2fr;gap:8px;padding:9px 12px;font-size:12.5px;border-top:1px solid var(--border);cursor:pointer}.sd-run:first-child{border-top:0}.sd-run:hover{background:var(--soft)}.sd-run .m{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:600px){.sd-run{grid-template-columns:1fr 1fr 1fr}.sd-run .m,.sd-run:not([style]) span:nth-child(3){display:none}}
@container (max-width:420px){.sj-row .main-c>.ic{display:none}.sj-row{column-gap:10px}}   /* phones: the name gets the icon's room (a failing run still says so in its line) */
.sj-row .main-c{flex:1;min-width:0}.sj-row .txt{flex:1;min-width:0}.sj-row .txt>span{white-space:normal;overflow:visible}
/* a schedule's description and its when/where/cost lines wrap inside the card: the folder body's grid column may shrink, and the cost line is never an ellipsis */
.sf-body{grid-template-columns:minmax(0,1fr)}.sf-body>.card{min-width:0}
.sj-row .txt .sched-desc,.sj-row .txt .sched-meta{overflow-wrap:anywhere;text-overflow:clip;min-width:0}
.sj-row .txt .sched-meta span:not(.chip){display:inline;white-space:normal;overflow:visible;text-overflow:clip;margin:0;min-width:0}.sj-row .txt .sched-meta .chip{flex:none;white-space:nowrap}

/* steer: an ordinary bubble; one quiet line under it while it waits (as in Claude) */
.steer-meta{align-self:flex-end;display:flex;align-items:center;gap:10px;margin:-8px 4px 0;font-size:12.5px;color:var(--muted);animation:fadeIn .25s var(--ease) both}
.steer-meta.failed{color:var(--bad)}
.steer-meta .steer-now{background:none;border:0;padding:2px 4px;min-height:0;font-size:12.5px;color:var(--ink-2);cursor:pointer;border-radius:6px;transition:color .2s,background .2s}
.steer-meta .steer-now:hover{color:var(--ink);background:var(--soft)}
/* attachments: real previews in the composer and in the message */
#attachList{gap:8px!important}#attachList.busy{opacity:.6;pointer-events:none}
.att-chip{position:relative;display:flex;align-items:center;gap:10px;padding:6px 30px 6px 6px;margin-bottom:8px;border:1px solid var(--border);border-radius:14px;background:var(--surface);max-width:260px;animation:cardIn .25s var(--ease) both}
.att-chip img,.att-chip video{width:44px;height:44px;object-fit:cover;border-radius:10px;flex:none;background:var(--soft)}
.att-chip .att-play{position:absolute;left:20px;top:20px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center}
.att-chip .att-ic{width:44px;height:44px;border-radius:10px;background:var(--blue-soft);color:var(--blue-deep);display:grid;place-items:center;flex:none}
.att-chip .att-txt{display:flex;flex-direction:column;min-width:0}.att-chip b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.att-chip small{font-size:11.5px;color:var(--muted)}
.att-chip .att-x{position:absolute;top:6px;right:6px;width:20px;height:20px;min-height:0;padding:0;border:0;border-radius:50%;background:var(--soft);color:var(--ink-2);display:grid;place-items:center;cursor:pointer}
.att-chip .att-x:hover{background:var(--soft-2);color:var(--ink)}
.att-row{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 8px}.att-row:last-child{margin-bottom:0}
.att-img{max-width:min(100%,320px);max-height:260px;border-radius:12px;object-fit:cover;cursor:zoom-in;border:1px solid var(--border);display:block}
.att-vid{max-width:min(100%,420px);max-height:300px;border-radius:12px;background:#000;display:block}
.att-file{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--border);border-radius:12px;background:var(--soft);color:var(--ink);text-decoration:none;max-width:320px}
.att-file:hover{border-color:var(--blue-2)}.att-file span{display:flex;flex-direction:column;min-width:0}.att-file b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.att-file small{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-zoom{position:fixed;inset:0;z-index:300;background:rgba(10,12,16,.72);backdrop-filter:blur(6px);display:grid;place-items:center;cursor:zoom-out;animation:fadeIn .2s var(--ease) both}
.att-zoom img{max-width:92vw;max-height:90vh;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.4);animation:cardIn .25s var(--ease) both}
.att-zoom.out{opacity:0;transition:opacity .2s}
/* loading placeholders shaped like the rows they stand for */
.sk-item{display:flex;align-items:center;gap:14px;padding:16px 0;border-top:1px solid var(--border);animation:skelIn .35s var(--ease) both;animation-delay:var(--d)}
.sk-item:first-child{border-top:0}
.sk-item .skel{animation-delay:var(--d)}
.sk-ic{width:34px;height:34px;border-radius:10px;flex:none}
.sk-lines{flex:1;display:flex;flex-direction:column;gap:8px}.sk-l1{height:12px;border-radius:6px}.sk-l2{height:10px;border-radius:5px;opacity:.7}
.sk-end{width:42px;height:22px;border-radius:999px;flex:none}
/* Kanban fills the window; each column scrolls on its own */
.kboard{align-items:stretch;padding-bottom:6px}
.kcol{min-height:0;overflow:hidden}.kcol .klist{flex:1;overflow-y:auto;scrollbar-width:thin}
/* links in messages: small labelled buttons */
.md a.lk{display:inline-flex;align-items:center;gap:5px;vertical-align:baseline;max-width:100%;padding:1px 10px 1px 8px;margin:1px;border-radius:999px;background:var(--blue-soft);color:var(--blue-deep);font-size:.92em;font-weight:600;text-decoration:none;line-height:1.6;transition:background .2s,transform .15s}
.md a.lk span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:320px}.md a.lk svg{flex:none}
.md a.lk:hover{background:var(--blue);color:#fff}.md a.lk:active{transform:scale(.97)}
.dark .md a.lk{color:var(--blue-2)}.dark .md a.lk:hover{color:#fff}
/* notifications: slide in from the right, a blue dot until seen, fold past three */
.cron-pop{animation:noticeIn .5s cubic-bezier(.2,.9,.25,1.15) both;position:relative}
.cron-pop.unread::after{content:"";position:absolute;top:10px;left:10px;width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px var(--surface);animation:fadeIn .3s both}
.cron-pop .np-act{flex:none;min-height:32px;padding:0 12px;border-radius:999px;font-weight:600}
.cron-pop .np-x{flex:none;width:30px;min-height:30px}
.cron-pop.folded{display:none}
.cron-pop.out{animation:noticeOut .28s cubic-bezier(.4,0,1,1) both}
.np-more{align-self:flex-end;min-height:30px;padding:0 14px;border-radius:999px;font-size:12.5px;font-weight:600;background:var(--surface);border:1px solid var(--border);box-shadow:0 8px 20px -10px rgba(11,12,16,.3);animation:fadeIn .25s both}
@keyframes noticeIn{from{opacity:0;transform:translateX(36px) scale(.97)}to{opacity:1;transform:none}}
@keyframes noticeOut{to{opacity:0;transform:translateX(28px) scale(.97)}}
@media (prefers-reduced-motion:reduce){.cron-pop,.cron-pop.out{animation:none}}

/* agent cards: the whole card opens a chat; the gear holds settings */
.agent-card:not(.locked){cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s}
.agent-card:not(.locked):hover{transform:translateY(-2px);border-color:var(--blue-2);box-shadow:0 14px 30px -18px rgba(11,12,16,.35)}
.agent-card:not(.locked):active{transform:translateY(0) scale(.995)}
.agent-go{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--blue-deep);opacity:.75;transition:opacity .2s,gap .2s}
.agent-card:hover .agent-go{opacity:1;gap:8px}.dark .agent-go{color:var(--blue-2)}
.agent-gear svg{transition:transform .5s var(--ease)}.agent-gear:hover svg{transform:rotate(60deg)}

.kind-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:1px 8px;border-radius:999px;margin-right:4px;vertical-align:1px;background:var(--soft);color:var(--ink-2)}
.kind-chip.bot{background:var(--blue-soft);color:var(--blue-deep)}.dark .kind-chip.bot{color:var(--blue-2)}
.ch-note{font-style:italic;color:var(--muted)!important}
.row .txt span.ch-pending{color:var(--warn);white-space:normal;overflow:visible;text-overflow:clip;margin-top:4px}.ch-pending .link{margin-left:6px!important;appearance:none;border:0;background:none;color:inherit;font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer;padding:6px 4px;margin:-6px 0;transition:opacity .15s}.ch-pending .link:hover{opacity:.75}.ch-pending .link:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:4px}

/* Keys: each group folds; groups you use start open */
.kfold .kf-head{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:0;box-shadow:none;padding:0;min-height:0;text-align:left;color:inherit;cursor:pointer}
.kfold .kf-head h2{margin:0}.kfold .kf-head .sub{margin:2px 0 0}.kfold .kf-head svg{transition:transform .3s var(--ease);color:var(--muted)}
.kfold.shut .kf-head svg{transform:rotate(-90deg)}
.kfold .kf-body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .35s var(--ease),opacity .25s,margin .3s;margin-top:10px}.kfold .kf-body>div{min-height:0;overflow:hidden}
.kfold.shut .kf-body{grid-template-rows:0fr;opacity:0;margin-top:0}
.tz-note.warn{background:color-mix(in srgb,var(--warn) 12%,transparent);color:var(--ink)}
@keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.row .txt span.kind-chip{display:inline-flex;margin-top:0;white-space:nowrap}
.kf-more{margin-top:10px}.kf-more>summary{cursor:pointer;font-size:13px;color:var(--blue-deep);font-weight:600;padding:8px 0;list-style:none}.kf-more>summary::-webkit-details-marker{display:none}.dark .kf-more>summary{color:var(--blue-2)}
/* Settings: section headings, readable labels over the exact key, nested values, search clear */
.cfg-sec{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600;color:var(--muted);padding:18px 0 4px;animation:rise .3s var(--ease) both}.cfg-sec::after{content:'';flex:1;border-top:1px solid var(--border)}.cfg-sec+.field{border-top:0}
.field label small .cfg-key{display:block;font-family:var(--mono);font-size:11px;margin-top:3px;color:var(--muted);overflow-wrap:anywhere}
.field.wide{grid-template-columns:minmax(0,1fr);gap:10px}.field.wide>div{width:100%}
.cfg-nest{display:grid;gap:10px;border:1px solid var(--border);border-radius:12px;padding:10px 12px}.cfg-leaf{display:grid;gap:4px;min-width:0}.cfg-leaf>small{font-size:12px;color:var(--muted)}
.toolbar .search .search-x{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:32px;min-height:32px;padding:0;animation:fade .2s var(--ease) both}.toolbar .search .search-x svg{position:static;transform:none}.toolbar .search:has(.search-x) input{padding-right:40px}
/* Keys: jump chips, provider groups, tool badges */
.k-jump{display:flex;gap:8px;flex-wrap:wrap;margin:-4px 0 14px}.k-jump button{min-height:32px;padding:0 12px;font-size:12.5px;font-weight:500;color:var(--ink-2)}
.kprov{border-top:1px solid var(--border);padding:4px 0}.kprov:first-child{border-top:0}.kprov>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;list-style:none;padding:12px 0;font-size:14px;font-weight:600}.kprov>summary::-webkit-details-marker{display:none}.kprov>summary small{font-size:12.5px;font-weight:400;color:var(--muted)}.kprov>summary svg{transition:transform .3s var(--ease);color:var(--muted)}.kprov:not([open])>summary svg{transform:rotate(-90deg)}.kprov[open]>.kprov-b{animation:rise .3s var(--ease) both}
.k-tools{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}.k-tools span{font-size:11px;color:var(--muted);background:var(--soft-2);border-radius:999px;padding:1px 8px}
.k-desc{display:block;white-space:normal;margin-top:2px}
.oa-meta{display:block;font-size:12px;color:var(--muted);margin-top:3px;overflow-wrap:anywhere}
/* notifications sit top right, under the bar, clear of the message box */
.cron-pops{top:auto;bottom:20px;right:20px}
@media (max-width:700px){.cron-pops{top:auto;bottom:12px;right:12px;left:12px;max-width:none}}
/* the bell and its panel on the right */
.bell{position:relative}.bell .bell-n{display:none;position:absolute;top:3px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--coral,#ee6351);color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center;box-shadow:0 0 0 2px var(--bg)}
.bell.has .bell-n{display:block;animation:popIn2 .3s cubic-bezier(.2,.9,.25,1.3) both}.bell.has svg{animation:ring 1.2s ease 1}
@keyframes popIn2{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes ring{0%,100%{transform:rotate(0)}15%{transform:rotate(14deg)}30%{transform:rotate(-12deg)}45%{transform:rotate(8deg)}60%{transform:rotate(-4deg)}}
.drawer.inbox .drawer-body{padding:10px 14px 20px}
.inbox-bar{display:flex;gap:6px;justify-content:flex-end;margin-bottom:6px}.inbox-bar button{min-height:30px;font-size:12.5px}
.ib-item{position:relative;display:flex;gap:12px;align-items:flex-start;padding:12px 34px 12px 12px;border-radius:14px;cursor:pointer;transition:background .2s;animation:rise .3s var(--ease) both}
.ib-item:hover{background:var(--soft)}.ib-item.out{opacity:0;transform:translateX(12px);transition:opacity .2s,transform .2s}.ib-item .ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none}
.ib-item .txt{min-width:0;flex:1}.ib-item b{display:block;font-size:13.5px;font-weight:600}.ib-item .txt span{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.45;margin-top:2px}.ib-item small{display:block;font-size:11.5px;color:var(--muted);margin-top:4px}
.ib-item:not(.unread) b{font-weight:500;color:var(--ink-2)}
.ib-item.unread::before{content:"";position:absolute;left:3px;top:24px;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.ib-item .ib-x{position:absolute;top:8px;right:6px;width:26px;min-height:26px;opacity:0;transition:opacity .2s}.ib-item:hover .ib-x,.ib-item:focus-within .ib-x{opacity:1}
.inbox-empty{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:60px 20px;color:var(--muted)}.inbox-empty b{color:var(--ink);font-size:15px}.inbox-empty svg{color:var(--ok)}
.drawer.inbox .group-label{padding:12px 12px 4px}
.ib-item .ic.blue{background:var(--blue-soft);color:var(--blue-deep)}.ib-item .ic.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}.ib-item .ic.ok{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
.dark .ib-item .ic.blue{color:var(--blue-2)}
.view-pick{display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:5px 12px 5px 6px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--border);box-shadow:none;font-weight:500;transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.view-pick:hover{border-color:var(--muted)}.view-pick.other{border-color:var(--blue);background:var(--blue-soft)}
.view-pick .vp-ava{width:32px;height:32px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--soft);font-size:13px;font-weight:600;flex:none}.view-pick .vp-ava img{width:100%;height:100%;object-fit:cover}
.view-pick .vp-t{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}.view-pick .vp-t small{font-size:11px;color:var(--muted);font-weight:400}.view-pick .vp-t b{font-size:13.5px;font-weight:600;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mi-find{position:sticky;top:-6px;margin:-6px -6px 6px;padding:8px 10px;display:flex;align-items:center;gap:8px;background:var(--surface);border-bottom:1px solid var(--border);color:var(--muted)}.mi-find input{border:0;outline:0;background:none;padding:2px 0;font:inherit;font-size:14px;width:100%;color:var(--ink);box-shadow:none;min-height:0}

.toast.undo{display:flex;align-items:center;gap:10px}.toast.undo span{flex:1}.toast.undo button{min-height:28px;padding:0 12px;border-radius:999px;font-weight:600;color:inherit;background:rgba(255,255,255,.14)}
/* leaner steps, like Claude Code: quiet single lines, no boxes; details open on click */
.steps{gap:1px;margin:0 0 10px}
.step{border:0;background:transparent;border-radius:10px}
.step-head{min-height:30px;padding:4px 8px;font-size:13px;color:var(--muted);border-radius:10px}
.step-head:hover{background:var(--soft)}
.step-head .si{width:20px;height:20px;border-radius:6px;background:transparent}
.step-head .sum code{font-size:12px;color:var(--ink-2);background:var(--soft);padding:1px 6px;border-radius:6px}
.step-head .state{font-size:11.5px}
.step.open{background:var(--soft)}.step-body pre{font-size:12px;max-height:320px}
button.think{min-height:28px;padding:2px 8px;font-size:13px;color:var(--muted);background:transparent;box-shadow:none;border:0}
button.think:hover{color:var(--ink-2);background:var(--soft)}
button.think svg:last-child{transition:transform var(--t-fast) var(--ease)}button.think[aria-expanded="true"] svg:last-child{transform:rotate(90deg)}
.think-body{font-size:13px;color:var(--ink-2);line-height:1.6;border-left:2px solid var(--border);padding:2px 0 2px 12px;margin:2px 0 10px 8px;white-space:pre-wrap;max-height:300px;overflow:auto}
.sched-folder .sf-head{justify-content:flex-start;text-align:left}
/* a question stacked on top of an open pop-up */
.scrim.stack{z-index:60}.drawer.pop.stack{z-index:61}

/* F22 on phones, notifications sit at the top, clear of the message box */
@media (max-width:700px){.cron-pops{top:auto;bottom:12px;left:12px;right:12px;max-width:none}}
/* F27 on touch screens the folder ⋯ and the inbox ✕ are always visible */
@media (hover:none){.sf-head .sf-more,.ib-item .ib-x{opacity:1}}

/* memory notes as cards */
.mem-cards{display:flex;flex-direction:column;gap:8px;max-height:420px;overflow:auto;padding-right:4px}
.mem-card{background:var(--soft);border-radius:12px;padding:10px 14px;font-size:13.5px;line-height:1.55;overflow-wrap:anywhere}.mem-card p{margin:0}
/* bot / personal account label: icon and word on one line */
.kind-chip svg{display:inline-block;flex:none;vertical-align:-1px}
.row .txt .acct-line{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
/* keys: a long hidden value never overflows its row */
[data-reveal]{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}
.row .txt span.kind-chip{flex:none;white-space:nowrap;flex-direction:row}
/* phones: the top bar shows the page you are on (the section name is in the menu) */
@media (max-width:760px){.crumbs{font-size:0;gap:0;flex:1}.crumbs>svg{display:none}.crumbs b{font-size:15px}}
/* phones: room for the page title (light/dark stays in Search and Preferences; My browser needs desktop Chrome) */
@media (max-width:760px){.top-actions{gap:4px}.top-actions [data-act="screen-mine"],.top-actions [data-act="theme"]{display:none}}

/* folders: each one a neat card; folded by default, opening one shows its rows inside the same card */
.sched-folder{background:var(--surface);border:1px solid var(--border);border-radius:18px;margin-bottom:8px;overflow:hidden;transition:box-shadow .2s,border-color .2s}
.sched-folder:hover{border-color:var(--blue-2)}
.sched-folder .sf-head{padding:14px 16px;border-radius:0;gap:10px}
.sched-folder .sf-head:hover{background:var(--soft)}
.sched-folder .sf-head svg:nth-child(2){color:var(--blue)}
.sched-folder .sf-body>.card{border:0;border-top:1px solid var(--border);border-radius:0;box-shadow:none;margin:0}
.sched-folder.shut .sf-body>.card{border-top-color:transparent}
.sched-folder .sf-head .sf-cost{margin-left:auto}.sched-folder .sf-head .sf-cost+.sf-more,.sched-folder .sf-head .sf-more{margin-left:8px}
.sched-folder .sf-head .sf-more{margin-left:auto}.sched-folder .sf-head .sf-cost~.sf-more{margin-left:8px}
/* folder colours, drag and drop, move picker */
:root{--fc-blue:#2f6bff;--fc-green:#3f9b5a;--fc-teal:#1a9a9a;--fc-purple:#7c5cd6;--fc-amber:#c98a12;--fc-coral:#e0604d;--fc-grey:#8a8f98}
.sf-ic{display:inline-grid;place-items:center;color:var(--blue)}
.c-blue{--fc:var(--fc-blue)}.c-green{--fc:var(--fc-green)}.c-teal{--fc:var(--fc-teal)}.c-purple{--fc:var(--fc-purple)}.c-amber{--fc:var(--fc-amber)}.c-coral{--fc:var(--fc-coral)}.c-grey{--fc:var(--fc-grey)}
.sched-folder[class*=" c-"] .sf-ic,.mv-f[class*=" c-"] .sf-ic{color:var(--fc)}
.sched-folder[class*=" c-"]{box-shadow:inset 4px 0 0 var(--fc)}
.sf-head[draggable=true]{cursor:pointer}.sf-head[draggable=true]:active{cursor:grabbing}
.sj-row[draggable=true]{cursor:pointer}.sj-row.dragging,.sched-folder.dragging{opacity:.45}
.sched-folder.drop-on{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.sched-folder.drop-before{box-shadow:0 -3px 0 0 var(--blue)}.sched-folder.drop-after{box-shadow:0 3px 0 0 var(--blue)}
.sf-empty{padding:16px 18px;font-size:13px;color:var(--muted)}
.mv-list{display:flex;flex-direction:column;gap:4px;max-height:50vh;overflow:auto}
.mv-f{display:flex;align-items:center;gap:10px;justify-content:flex-start;width:100%;padding:10px 12px;border-radius:var(--r-md);background:none;border:1px solid transparent;box-shadow:none;font-weight:500;text-align:left}
.mv-f:hover:not([disabled]){background:var(--soft);border-color:var(--border)}.mv-f.on{background:var(--blue-soft)}.mv-f small{margin-left:auto;color:var(--muted);font-weight:400}
.sched-folder .sf-body>.card{padding-top:0;padding-bottom:0}
.gacc-row{padding:12px 0;border-top:1px solid var(--border)}.gacc-row .txt b{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gacc-note{display:flex;align-items:flex-start;gap:6px;margin-top:4px;color:var(--ink-2);font-size:13px;white-space:normal}.gacc-note svg{flex:none;margin-top:3px;color:var(--muted)}.gacc-note.empty{color:var(--muted);font-style:italic}
@media(max-width:560px){.sched-folder .sf-head .sf-cost{display:none}}
.wac-copy{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 12px;border:1px solid var(--border);border-radius:var(--r-md);margin:0 0 8px;font-size:13px}
.wac-copy span{flex:none;color:var(--muted);width:92px}.wac-copy code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}
/* replies with visible structure (agreed mock-up, part 1): headings clearly above body text, real bold, numbered
   steps in soft circles, soft boxes for "next step" and warnings. Decorations stay quieter than the words. */
.md .md-h1{font-size:20px;font-weight:700;letter-spacing:-.015em;line-height:1.3;margin:22px 0 10px}
.md .md-h2{font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:1.35;margin:22px 0 8px;padding-top:16px;border-top:1px solid var(--border)}
.md>.md-h1:first-child,.md>.md-h2:first-child{margin-top:0;padding-top:0;border-top:0}
.md .md-h3,.md .md-h4{font-size:15.5px;font-weight:700;margin:18px 0 6px}
.md b,.md strong{font-weight:700}
.md>ol{list-style:none;padding-left:0;counter-reset:mdn}
.md>ol>li{counter-increment:mdn;position:relative;padding-left:32px;margin:0 0 8px}
.md>ol>li::before{content:counter(mdn);position:absolute;left:0;top:.1em;width:22px;height:22px;border-radius:50%;background:var(--blue-soft);color:var(--blue-deep);font-size:12px;font-weight:700;display:grid;place-items:center}
.md>ol>li[data-n]::before{content:attr(data-n)}
.md>ul{list-style:none;padding-left:0}
.md>ul>li{position:relative;padding-left:18px;margin:0 0 5px}
.md>ul>li::before{content:'';position:absolute;left:4px;top:.68em;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.md>ul>li.task{padding-left:0}.md>ul>li.task::before{display:none}
.md blockquote{border-left:0;padding:10px 14px;border-radius:12px;background:var(--blue-soft);color:var(--ink)}
.md blockquote.warn{background:color-mix(in srgb,var(--warn) 13%,var(--surface))}
.md blockquote p:last-child{margin-bottom:0}
.md th{font-size:13px;font-weight:700;text-align:left}
.dark .md>ol>li::before{color:var(--blue-2)}
/* links, files and labels in replies (agreed mock-up, part 2), kept quieter than the sentence they sit in */
.md a.lk{gap:6px;padding:1px 9px 1px 4px;border:1px solid var(--border);background:var(--surface);color:var(--ink);font-weight:500;font-size:.94em;line-height:1.55;transition:border-color .2s,box-shadow .2s,transform .15s}
.md a.lk:hover{background:var(--surface);color:var(--ink);border-color:var(--blue-2);box-shadow:0 2px 8px rgba(30,90,255,.10)}
.md a.lk .lk-fav{width:16px;height:16px;border-radius:50%;object-fit:cover;flex:none;background:var(--soft)}
.md a.lk .lk-fav+svg{display:none}.md a.lk>svg{margin-left:3px;color:var(--muted)}
.md a.lk small{color:var(--muted);font-size:.9em;font-weight:400;white-space:nowrap}
.dark .md a.lk{color:var(--ink)}.dark .md a.lk:hover{color:var(--ink)}
.md a.lk-card{display:flex;align-items:center;gap:12px;max-width:440px;margin:4px 0 12px;padding:10px 14px 10px 10px;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--ink);text-decoration:none;transition:border-color .2s,box-shadow .2s,transform .15s}
.md a.lk-card:hover{border-color:var(--blue-2);box-shadow:0 4px 14px rgba(30,90,255,.10)}.md a.lk-card:active{transform:scale(.99)}
.md .lk-ic{width:34px;height:34px;flex:none;border-radius:9px;background:var(--soft);display:grid;place-items:center;color:var(--muted)}
.md .lk-ic .lk-fav{width:20px;height:20px;border-radius:5px}.md .lk-ic .lk-fav+svg{display:none}
.md .lk-t{display:flex;flex-direction:column;min-width:0;line-height:1.35}.md .lk-t b{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.md .lk-t small{color:var(--muted);font-size:12.5px}.md .lk-go{margin-left:auto;display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-size:12.5px;white-space:nowrap}
.md a.fchip{display:inline-flex;align-items:center;gap:7px;max-width:100%;vertical-align:baseline;padding:2px 10px 2px 3px;margin:1px;border-radius:9px;background:var(--soft);color:var(--ink);font-size:.92em;font-weight:500;text-decoration:none;transition:background .2s}
.md a.fchip:hover{background:var(--soft-2)}
.md a.fchip i{font-style:normal;min-width:26px;height:20px;padding:0 4px;border-radius:5px;background:var(--muted);color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.02em;display:grid;place-items:center}
.md a.fchip i.fx-pdf{background:#e0604d}.md a.fchip i.fx-xlsx,.md a.fchip i.fx-csv{background:#3f9b5a}.md a.fchip i.fx-docx,.md a.fchip i.fx-doc{background:#2f6bff}.md a.fchip i.fx-pptx{background:#d9822b}
.md a.fchip i.fx-png,.md a.fchip i.fx-jpg,.md a.fchip i.fx-jpeg,.md a.fchip i.fx-webp{background:#7c5cd6}.md a.fchip i.fx-zip{background:#8a8f98}
.md .stl{display:inline-flex;align-items:center;gap:5px;padding:0 8px;border-radius:999px;font-size:.84em;font-weight:600;line-height:1.7;vertical-align:baseline;background:var(--soft);color:var(--ink-2)}
.md .stl::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.md .stl.ok{background:color-mix(in srgb,var(--ok) 13%,var(--surface));color:color-mix(in srgb,var(--ok) 78%,var(--ink))}
.md .stl.wait{background:color-mix(in srgb,var(--warn) 15%,var(--surface));color:color-mix(in srgb,var(--warn) 62%,var(--ink))}
.md .stl.bad{background:color-mix(in srgb,var(--bad) 11%,var(--surface));color:var(--bad)}
/* phone app: no double-tap zoom, and fields at 16px so focusing one never zooms the page */
html{touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (max-width:760px){input,textarea,select,.sel-btn{font-size:16px}}
/* phones: the floating screen sits across the full width at the top, under the bar, so the newest messages and the
   message box stay in view below it (agreed after the mock-up) */
@media (max-width:760px){
 .screen-float{top:calc(env(safe-area-inset-top,0px) + 64px)!important;bottom:auto!important;left:8px!important;right:8px!important;width:auto!important;border-radius:18px;animation:floatDown var(--t-med) var(--ease)}
 .screen-float .screen-head{cursor:default;height:44px}
 .screen-float .screen-stage{padding:8px 10px 12px}
}
@keyframes floatDown{from{opacity:0;transform:translateY(-14px) scale(.98)}}
.lb-steps{margin:2px 0 0;padding-left:18px;text-align:left;font-size:12.5px;color:#a9adb8;line-height:1.55}.lb-note .spinner+span{margin-top:2px}
.tabs:not(:has(.pill[style*="width"])) button.on{background:var(--surface);box-shadow:0 1px 2px rgba(11,12,16,.1);border-radius:var(--r-pill)}
.hist-more{display:flex;justify-content:center;margin:4px 0 14px}.hist-more button{gap:6px;font-size:13px;color:var(--ink-2)}
/* chat parity: sidebar refresh and error, search hits, system / handoff cards, reasoning cards, reply errors, connection dot */
.side-refresh{flex:none;width:38px;min-height:38px;color:var(--muted)}.side-err{padding:10px}.side-err .alert{margin:0}
.menu [hidden]{display:none!important}
.menu mark,mark.hit,.hist-snip mark,.hist-peek mark{background:color-mix(in srgb,var(--warn) 26%,transparent);color:inherit;border-radius:3px;padding:0 1px}
mark.hit.first{animation:hitFlash 1.4s var(--ease)}@keyframes hitFlash{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 40%,transparent)}}
.sys-msg{margin:2px 0 10px;font-size:13px;color:var(--muted)}.sys-msg summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;padding:4px 8px;border-radius:8px;transition:background var(--t-fast)}.sys-msg summary::-webkit-details-marker{display:none}.sys-msg summary:hover{background:var(--soft)}
.sys-msg summary svg:last-child{transition:transform var(--t-fast)}.sys-msg[open] summary svg:last-child{transform:rotate(90deg)}.sys-msg[open] .sys-body{animation:rise var(--t-med) var(--ease)}
.sys-body{white-space:pre-wrap;line-height:1.55;color:var(--ink-2);border-left:2px solid var(--border);padding:4px 0 4px 12px;margin:6px 0 0 8px;max-height:320px;overflow:auto;overflow-wrap:anywhere}
.thread>.sys-msg{align-self:stretch;max-width:780px;width:100%;margin-left:auto;margin-right:auto}
.rm-card{border:1px solid var(--border);border-radius:12px;padding:8px 12px;margin:8px 0;background:var(--soft-2)}.rm-card .rm-l{display:block;font-size:11.5px;font-weight:600;color:var(--muted);margin-bottom:2px}.rm-card.result{background:color-mix(in srgb,var(--ok) 7%,var(--surface))}.rm-card>p:last-child{margin-bottom:0}
.err-box{margin-top:6px}.err-box .err-line{margin:0}.err-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.err-acts button{min-height:32px;padding:0 10px;font-size:12.5px;gap:6px}
.step-id{display:block;padding:6px 12px 0 34px;font-size:11.5px;color:var(--muted)}
.conn{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);padding:0 4px;animation:fade var(--t-med) var(--ease)}.conn i{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
.conn.live i{background:var(--ok)}.conn.connecting i,.conn.reconnecting i{background:var(--warn);animation:pulse 1.2s ease-in-out infinite}.conn.lost i{background:var(--bad)}.conn.lost{color:var(--bad)}
.pick.fallback{color:var(--warn)}
@media (max-width:760px){.conn span{display:none}}
/* Manage chats: total, clear search, channel picker, live, snippets, rows that open in place */
.hist-total{font-size:13px;color:var(--muted);white-space:nowrap}
.search .s-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:30px;min-height:30px;color:var(--muted)}.search:has(.s-clear) input{padding-right:40px}.toolbar .search .s-clear svg{position:static;transform:none}.hist-total~.search{min-width:200px}
.row .txt b .hist-live{display:inline-flex;white-space:nowrap;align-items:center;gap:4px;margin-left:8px;font-size:11.5px;font-weight:500;color:var(--ok);vertical-align:1px}.hist-live .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:pulse 1.6s ease-in-out infinite}
.hist-snip{display:block;font-size:12.5px;color:var(--ink-2);white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:2px}
.hist-x{flex:none;width:28px;min-height:28px;color:var(--muted)}.hist-x svg{transition:transform var(--t-fast) var(--ease)}.hist-x.on svg{transform:rotate(90deg)}
.hist-peek{padding:4px 12px 12px 56px;border-top:1px solid var(--border);animation:rise var(--t-med) var(--ease)}.hist-peek.out{animation:fadeOut .2s var(--ease) forwards}
.hp-list{max-height:420px;overflow:auto;display:grid;gap:10px;padding:8px 4px 4px;font-size:13.5px;line-height:1.55}
.hp-u,.hp-a{min-width:0;overflow-wrap:anywhere}.hp-who{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:2px}.hp-a small{font-size:11.5px;color:var(--muted)}.hp-u>div{background:var(--soft-2);border-radius:12px;padding:8px 12px;display:inline-block;max-width:100%}
.hp-s{font-size:12px;color:var(--muted);font-style:italic}.hp-foot{display:flex;justify-content:flex-end;margin-top:8px}.hp-foot button{min-height:32px;font-size:12.5px;gap:6px}
.hist-page{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.pr-days{display:flex;align-items:center;gap:10px}.pr-days input{width:120px}.pr-days span{color:var(--ink-2)}
.status-alert{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;margin-bottom:12px;border-color:color-mix(in srgb,var(--bad) 30%,var(--border));background:color-mix(in srgb,var(--bad) 6%,var(--surface));animation:rise var(--t-med) var(--ease)}.status-alert>svg{color:var(--bad);flex:none;margin-top:2px}.status-alert b{display:block;font-weight:600}.status-alert span{display:block;color:var(--ink-2);font-size:13.5px;overflow-wrap:anywhere}
@media (max-width:760px){.hist-peek{padding-left:12px}.hist-x{width:40px;min-height:40px}}
.lb-mirror img[hidden]{display:none!important}
/* in the small floating window the message stays short so its button fits */
.screen-float .lb-note{padding:12px 14px;gap:5px}.screen-float .lb-note b{font-size:13.5px}.screen-float .lb-note span{font-size:11.5px}
.screen-float .lb-steps{display:none}.screen-float .lb-note button{margin-top:2px;min-height:30px;padding:0 12px;font-size:12.5px}
.gem-top{display:flex;align-items:center;gap:14px}.gem-top .txt{flex:1;min-width:0}
.gem-top>.logo{width:44px;height:44px;flex:none;border-radius:12px}.gem-top>.logo img{width:28px;height:28px}
.ae-adv{margin-top:18px;border-top:1px solid var(--border);padding-top:12px}.ae-adv summary{cursor:pointer;font-size:13.5px;color:var(--ink-2);font-weight:600}.ae-adv[open] summary{margin-bottom:8px}.ae-tabs button{flex:1}
/* Models: helper models tools, model facts, sign-in details (parity with the engine's dashboard) */
.aux-tools{display:flex;gap:6px;flex-wrap:wrap;margin:-2px 0 8px}.aux-tools:empty{display:none}
.aux-now:not(:empty){display:block;margin-top:2px;color:var(--ink-2)}.aux-who{display:block;margin-top:4px}
.m-facts{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0 0;font-size:12.5px;color:var(--muted)}.m-facts .chip{font-size:11.5px}
.oa-meta,.oa-err,.oa-cli{display:block;font-size:12px;color:var(--muted);margin-top:3px;white-space:normal}.oa-err{color:var(--bad)}.oa-meta:empty{display:none}
.oa-cli{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.oa-cli code{font-size:12px;padding:3px 8px;border-radius:8px;background:var(--soft-2);overflow-wrap:anywhere}.oa-cli .icon{width:28px;min-height:28px}
/* Team of models: ordered advisor rows */
.moa-slots{display:flex;flex-direction:column;gap:8px}
.moa-slot{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:14px;background:var(--surface);transition:opacity var(--t-fast),transform var(--t-fast)}
.moa-slot .sel-btn{flex:1;min-width:0}.moa-slot select{flex:1}.moa-btns{display:flex;gap:2px;flex:none}.moa-slot.moa-in{animation:rise var(--t-med) var(--ease) both}.moa-slot.closing{opacity:0;transform:translateY(-4px)}
@media (max-width:520px){.moa-slot{flex-wrap:wrap}.moa-slot .sel-btn{flex-basis:100%}}
/* Agents page and Edit agent */
.head-count{align-self:center;font-size:13px;color:var(--muted);margin-right:4px}
.ae-path{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.ae-path code{overflow-wrap:anywhere}.ae-path .icon{width:28px;min-height:28px}
/* New agent: steps */
.nb-steps{margin:0 0 6px}.nb-steps .tabs{display:flex}.nb-steps .tabs button{flex:1;min-width:0}
@media (max-width:520px){.nb-steps .tabs button{padding-left:4px;padding-right:4px;font-size:13px}}
.nb-step:not([hidden]){animation:viewIn var(--t-med) var(--ease) both}
.nb-find{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.nb-find input{flex:1;min-width:160px}.nb-find .sel-btn.inline{width:auto}
.nb-h{font-size:13.5px;margin:20px 0 8px}.nb-chips{display:flex;gap:6px;flex-wrap:wrap}
.nb-res,.nb-app{padding:10px 12px;margin:0 -12px;border-top:1px solid var(--border)}.nb-res .txt span,.nb-app .txt span{overflow-wrap:anywhere}
.nb-form{margin-top:12px;padding:4px 14px 14px;border:1px dashed var(--border);border-radius:16px}
.nb-rev{display:grid;grid-template-columns:130px 1fr;gap:12px;padding:10px 0;border-top:1px solid var(--border);font-size:14px;line-height:1.5}.nb-rev:first-child{border-top:0}.nb-rev>div{min-width:0;overflow-wrap:anywhere}
@media (max-width:520px){.nb-rev{grid-template-columns:1fr;gap:2px}}
/* Usage › By model: one row per model */
.um-list{display:flex;flex-direction:column}
.um-row{padding:14px 0;border-top:1px solid var(--border);animation:rise var(--t-med) var(--ease) both}.um-row:first-child{border-top:0;padding-top:4px}
.um-top{display:flex;align-items:center;gap:10px}.um-top .txt{flex:1;min-width:0}.um-top .txt b{display:block;font-size:14px}.um-top .txt span{display:block;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.um-n{width:24px;height:24px;flex:none;border-radius:8px;background:var(--soft-2);display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--ink-2)}
.um-tags{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}.um-tags .chip{font-size:11.5px}
.um-bar{display:flex;height:8px;border-radius:99px;overflow:hidden;background:var(--soft-2);margin:10px 0 6px;transform-origin:left;animation:barGrow var(--t-slow,.5s) var(--ease) both}.um-bar i{display:block;min-width:2px}
.um-leg{flex-wrap:wrap;gap:4px 14px;font-size:12px}.um-facts,.um-can{margin:6px 0 0;font-size:12.5px;color:var(--ink-2);line-height:1.5}.um-can{color:var(--muted)}
@media (max-width:520px){.um-top{flex-wrap:wrap}.um-tags{order:3;flex-basis:100%;justify-content:flex-start;padding-left:34px}}
/* whose settings a page changes, when it is not the agent you chat with */
.scope-note{margin:-6px 0 14px;padding:8px 12px;border-radius:12px;background:var(--soft-2);font-size:13px;color:var(--ink-2);animation:viewIn var(--t-med) var(--ease) both;transition:opacity .18s}.scope-note.closing{opacity:0}
.ident-top button[hidden],.drawer button[hidden]{display:none!important}
.lb-upd{display:flex;gap:10px;align-items:flex-start;margin:12px 0 0;padding:10px 14px;border-radius:var(--r-md);background:var(--blue-soft);color:var(--blue-deep);font-size:13.5px;animation:lbUp var(--t-med) var(--ease)}
.lb-upd svg{flex:none;margin-top:3px}.lb-upd a{font-weight:600}
@keyframes lbUp{from{opacity:0;transform:translateY(4px)}}
/* inside the extension's side panel: a compact chat */
html.in-panel .screen-pane{display:none!important}
html.in-panel .topbar{height:52px;padding:0 8px 0 6px}
html.in-panel .topbar .crumbs b{font-size:14px}
html.in-panel .thread{padding:18px 14px}
html.in-panel .composer-wrap{padding:0 10px 12px}
/* Connected apps › Use on other agents */
.share-agents{display:grid;gap:8px}
.share-agents .share-row{display:flex;margin:0;font-weight:400;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);cursor:pointer;transition:border-color var(--t-fast),background var(--t-fast);animation:lbUp var(--t-med) var(--ease) both}
.share-row:hover{border-color:var(--blue-soft)}.share-row.has{cursor:default;opacity:.75}
.share-agents .share-row .txt{flex:1;min-width:0;display:flex;flex-direction:column}.share-row .txt span{font-size:12.5px;color:var(--muted)}
.share-agents .share-row .ic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--soft);color:var(--ink-2)}.share-agents .share-row .switch{flex:none;margin:0}
/* Access: owner and sharing on connection pages */
.acc-group{margin:0 0 16px;animation:lbUp var(--t-med) var(--ease) both}
.acc-grp{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:4px 2px 8px}
.acc-who{display:inline-flex;align-items:center;margin-right:4px}
.acc-av{border-radius:50%;display:inline-grid;place-items:center;flex:none;overflow:hidden;box-shadow:0 0 0 2px var(--surface);margin-left:-6px;transition:transform var(--t-fast) var(--ease)}
.acc-who .acc-av:first-child{margin-left:0}.acc-who:hover .acc-av{transform:translateX(2px)}.acc-who:hover .acc-av:first-child{transform:none}
.acc-av img{width:100%;height:100%;object-fit:cover}
/* an avatar inside a row's text (agent chips, "For <agent>", "Owned by"): the row's text-line style made it a block with a 13px letter
   that spilled out of the circle; keep it a centred circle with its small initial */
.row .txt .acc-av{display:inline-grid;place-items:center;font-size:10.5px;line-height:1;margin-top:0;padding-block:0;white-space:nowrap;overflow:hidden;text-overflow:clip}
.acc-more{font-size:11.5px;color:var(--muted);margin-left:6px}
.acc-from{display:inline-flex!important;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-top:2px}.acc-from .acc-av{margin:0;box-shadow:none}
.share-agents .share-row .acc-av{margin:0;box-shadow:none;font-size:13px}
.share-agents .share-row .ghost.small{flex:none}
.acc-btn{flex:none}
.acc-btn{display:inline-flex;align-items:center;gap:8px;padding-left:6px;color:var(--ink-2);font-weight:500}.acc-btn .acc-who{margin:0}
/* sign-in details */
.si-card{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);animation:lbUp var(--t-med) var(--ease) both}
.si-row{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:11px 14px;border-top:1px solid var(--border);font-size:14px}.si-row:first-child{border-top:0}
.si-row .si-k{color:var(--muted);font-size:13px}.si-row small{display:block;color:var(--muted);font-size:12px}.si-row .acc-av{margin:0 4px 0 0;box-shadow:none;vertical-align:-5px}
.si-opts{display:grid;gap:8px}.si-opts button{justify-content:flex-start;width:100%}
@media (max-width:560px){.si-row{grid-template-columns:1fr;gap:2px}}
/* All agents */
.vp-ava.all{background:var(--blue-soft);color:var(--blue-deep);display:grid;place-items:center}
.all-view{animation:lbUp var(--t-med) var(--ease) both}
.all-view .act{gap:8px}
/* Needs signing in again: one chip (signChip), with Sign in where the page has one */
.acc-nosign{font-size:12.5px;color:var(--muted);display:inline-flex!important;align-items:center;gap:6px;flex-wrap:wrap;margin-top:2px}
.chip.sign-chip{font-size:11px;padding:1px 8px;font-weight:500;vertical-align:1px}.txt b .chip.sign-chip{margin-left:4px}
.sign-go{appearance:none;border:0;background:none;box-shadow:none;padding:0 2px;min-height:0;height:auto;color:var(--blue-deep);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;border-radius:6px;transition:color var(--t-fast)}.sign-go:hover{color:var(--blue);text-decoration:underline}.dark .sign-go{color:var(--blue-2)}
/* Owned by: one control on every row (Access.owner) */
.acc-ownbox{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;min-width:0}.acc-ownbox .ab-lbl{font-size:13px;color:var(--muted)}.acc-ownbox select.acc-owner{width:auto;min-width:140px;height:38px}.acc-ownbox .acc-owner-name{font-size:14px;font-weight:500}.acc-ownbox .acc-own-note{font-size:12px;color:var(--muted);max-width:180px;overflow:hidden;text-overflow:ellipsis}
.aam-hact{display:inline-flex;align-items:center;gap:10px}
@media (max-width:720px){.acc-ownbox .ab-lbl,.acc-ownbox .acc-own-note{display:none}}
.all-row .act{display:flex;align-items:center;gap:10px}
.all-row .ab-lbl{font-size:13px;color:var(--muted);white-space:nowrap}
.all-row select.acc-owner{width:auto;min-width:140px;height:38px}
.all-row .acc-owner-name{font-size:14px;font-weight:500;margin-right:6px}
.all-row .txt .acc-nosign{margin-top:2px}
@media (max-width:760px){.all-row{flex-wrap:wrap}.all-row .act{width:100%;justify-content:flex-end;flex-wrap:wrap}}
/* Automations › n8n */
.n8n-setup input{max-width:420px}
.n8n-row .act{display:flex;align-items:center;gap:10px}.n8n-row .ab-lbl{font-size:13px;color:var(--muted)}.n8n-row .acc-owner-name{min-width:90px}
.n8n-row .act{display:grid;grid-template-columns:230px 170px auto auto;align-items:center;gap:10px}
.n8n-row .acc-btn{justify-self:start}
@media (max-width:900px){.n8n-row{flex-wrap:wrap}.n8n-row .act{grid-template-columns:minmax(0,1fr) auto auto;width:100%}.n8n-row .acc-btn{display:none}.n8n-row .acc-ownbox{overflow:hidden}}
/* Code: the aqeelOS Code app fills the main area */
.page.page-full{padding:0;max-width:none;height:calc(100dvh - 60px)}.page.page-full>.page-head{display:none}.page.page-full #pg{height:100%}
.code-host{position:relative;height:100%;background:var(--bg)}
.code-frame{border:0;width:100%;height:100%;display:block;animation:lbUp var(--t-med) var(--ease) both}
.code-wait{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:10px;color:var(--muted);font-size:14px}
/* a message alone on the Code page sits in the middle of it */
.code-host:has(>.code-lock){display:grid;place-items:center;padding:24px;box-sizing:border-box;min-height:100%}
.code-lock{max-width:620px;width:100%;box-sizing:border-box;margin:0 auto;padding:30px 32px;text-align:left;animation:lbUp var(--t-med) var(--ease) both}
.code-lock-ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue-deep);margin:0 0 14px}
.code-lock h2{margin:0 0 8px;font-size:20px}.code-lock>p{color:var(--ink-2);margin:0 0 18px}
.code-dl{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}.code-dl .btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;padding:10px 18px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--ink);font-weight:600}
.code-dl .btn.primary{background:var(--blue,#2563eb);border-color:transparent;color:#fff}
.code-steps{margin:0 0 14px;padding-left:20px;color:var(--ink-2);font-size:14px}.code-steps li{margin:4px 0}
.code-retry{display:flex;align-items:center;gap:8px;margin:0}
.spinner.tiny{width:12px;height:12px;border-width:2px;display:inline-block;flex:none}
.code-filter{display:flex;gap:4px;margin:0 12px 8px;padding:3px;background:var(--soft-2);border-radius:999px}.code-filter button{flex:1;border:0;background:none;border-radius:999px;font:inherit;font-size:13px;padding:5px 0;min-height:0;color:var(--ink-2);cursor:pointer;transition:background var(--t-fast)}.code-filter button.on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--shadow-card)}
.code-tree .code-p{gap:6px}.code-tree .code-chats{padding-left:22px;animation:lbUp var(--t-fast) var(--ease) both}.code-tree .code-c{font-size:13.5px}.code-tree .code-c.on{background:var(--blue-soft);color:var(--blue-deep)}
.code-foot{padding:8px 12px;border-top:1px solid var(--border)}
@media (max-width:760px){.page.page-full{height:calc(100dvh - 60px)}.page.page-full:has(.code-lock){height:auto}.code-lock{margin:20px 16px;width:auto}.code-host:has(>.code-lock){padding:0;place-items:start stretch}}
.code-perm{display:flex;gap:8px;align-items:flex-start;background:var(--soft-2);border-radius:var(--r-md);padding:10px 12px;margin:0 0 12px;color:var(--ink-2)}.code-perm svg{flex:none;margin-top:3px}

/* Code: where the projects live (this computer, or online on the AI box) */
.code-where{display:flex;gap:4px;margin:12px 12px 4px;padding:3px;border-radius:var(--r-pill);background:var(--soft)}
.code-where button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:30px;padding:4px 10px;border:0;border-radius:var(--r-pill);background:transparent;font-size:12.5px;color:var(--muted);transition:background var(--t-fast),color var(--t-fast),box-shadow var(--t-fast)}
.code-where button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.code-or{margin-top:14px;font-size:13px;color:var(--muted)}.code-or .linkish{border:0;background:none;padding:0;min-height:0;color:var(--blue);font:inherit;cursor:pointer;text-decoration:underline}

/* Code: ⋯ on each project and chat (Code's own menu opens beside it), and the unread dot */
.code-proj,.code-chats{position:relative}
.code-tree .item{padding-right:34px}
.code-more{position:absolute;right:8px;width:26px;height:26px;min-height:26px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted);display:grid;place-items:center;opacity:0;transition:opacity var(--t-fast),background var(--t-fast)}
.code-proj>.code-more{top:5px}
.code-row{position:relative}.code-row>.code-more{top:5px}
.code-proj:hover>.code-more,.code-row:hover>.code-more,.code-more:hover,.code-more:focus-visible{opacity:1}
.code-more:hover{background:var(--soft)}
.code-dot{width:7px;height:7px;border-radius:50%;background:var(--blue);flex:none}
@media (hover:none){.code-more{opacity:1}}

/* Loading: one brand spinner everywhere (a blue ring with a fading tail and a round head). It shows after a moment,
   so quick loads never flash. Block placeholders become a spinner; the old shimmer blocks are gone. */
.spinner,.ring{position:relative;display:inline-block;width:14px;height:14px;border:0!important;border-radius:50%;background:none;animation:spin .9s linear infinite;flex:none;vertical-align:middle}
.spinner::before,.ring::before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(from .2turn,rgba(1,88,203,0) 0turn,var(--blue) .8turn,transparent .8turn);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--rw,2px) - .5px),#000 calc(100% - var(--rw,2px)));mask:radial-gradient(farthest-side,transparent calc(100% - var(--rw,2px) - .5px),#000 calc(100% - var(--rw,2px)))}
.spinner::after,.ring::after{content:'';position:absolute;top:0;left:50%;width:var(--rw,2px);height:var(--rw,2px);margin-left:calc(var(--rw,2px) / -2);border-radius:50%;background:var(--blue)}
.spinner.tiny{width:12px;height:12px}
.ring{width:30px;height:30px;--rw:3.5px}
.dark .spinner::before,.dark .ring::before{background:conic-gradient(from .2turn,rgba(120,170,255,0) 0turn,#7aa7ff .8turn,transparent .8turn)}
.dark .spinner::after,.dark .ring::after{background:#7aa7ff}
.skel.loading{display:grid;place-items:center;min-height:180px;background:none!important;animation:ringIn .25s .15s var(--ease) both!important}
div.skel:not(.loading){background:none!important;animation:none!important;display:grid;place-items:center;border:0!important;box-shadow:none!important}
div.skel:not(.loading)::after{content:'';width:26px;height:26px;border-radius:50%;background:conic-gradient(from .2turn,rgba(1,88,203,0) 0turn,var(--blue) .8turn,transparent .8turn);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));animation:spin .9s linear infinite,ringIn .25s .15s var(--ease) both}
@keyframes ringIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.spinner,.ring,div.skel:not(.loading)::after{animation-duration:1.6s}}

.code-new{margin-top:14px;font-size:13px}.code-new summary{cursor:pointer;color:var(--blue)}.code-new .code-dl{margin-top:10px}

/* Files: where a search result lives, and the search box while it looks */
.frel{display:block;font-size:12px;color:var(--muted);font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fsearch.busy::after{content:'';width:14px;height:14px;margin-left:6px;border-radius:50%;flex:none;background:conic-gradient(from .2turn,rgba(1,88,203,0) 0turn,var(--blue) .8turn,transparent .8turn);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));animation:spin .9s linear infinite}

/* branding: any logo is shown in black and white */
.wordmark img.mark{filter:grayscale(1) contrast(1.05)}
.dark .wordmark img.mark{filter:grayscale(1) invert(1)}

.side-foot .avatar.none{background:var(--soft);color:var(--muted)}
/* a new version is ready */
.new-version{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:80;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px;border-radius:var(--r-pill);background:var(--ink);color:var(--surface);font-size:13.5px;box-shadow:0 18px 40px -16px rgba(15,23,42,.45);animation:toastIn .25s var(--ease) both}
.new-version.out{animation:toastOut .2s ease forwards}.new-version .ghost{color:inherit;opacity:.75}

/* Code: waiting for the projects (the brand spinner and faint rows) */
.code-skel{display:grid;gap:10px;padding:14px 18px}.code-skel .ring{margin:4px 0 6px}
.code-skel i{display:block;height:12px;border-radius:6px;background:var(--soft);opacity:.7;animation:ringIn .3s .2s both}.code-skel i:nth-child(2){width:72%}.code-skel i:nth-child(3){width:58%}.code-skel i:nth-child(4){width:66%}
.code-wait{flex-direction:column;gap:14px}
/* Files: the agent's places, then the AI box's shared places */
.fplaces-sep{display:inline-flex;align-items:center;margin:0 4px 0 10px;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);white-space:nowrap}

.utable.ucode .uh,.utable.ucode .ur{grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr))}

/* Bottlenecks */
.bn-btn{position:relative;color:#c2410c}.bn-btn[hidden]{display:none}
.bn-btn .bn-n{position:absolute;top:2px;right:0;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:#ea580c;color:#fff;font-size:10.5px;font-weight:700;display:grid;place-items:center}
.bn-list{display:grid;gap:10px}.bn-item{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.bn-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:#fff1e6;color:#c2410c}.dark .bn-ic{background:#3b2414;color:#fdba74}
.bn-ic.bn-down{background:var(--soft);color:var(--ink-2)}
.bn-t b{display:block;font-size:14px;line-height:1.35}.bn-t p{margin:4px 0 10px;font-size:13px;color:var(--ink-2);line-height:1.5}.bn-c{color:var(--muted);font-size:12px}
.bn-acts{display:flex;flex-wrap:wrap;gap:6px}
.bn-empty{display:grid;justify-items:center;gap:6px;text-align:center;padding:40px 10px;color:var(--ink-2)}.bn-empty svg{color:#16a34a}

/* Code › Live: published apps */
.live-host{overflow:auto}.live-wrap{max-width:1040px;margin:0 auto;padding:28px 24px 60px}
.live-teams{margin-top:36px}.code-tree .code-c .code-from{flex:none;margin-left:auto;font-size:11px;color:var(--muted)}
.live-head h2{margin:0 0 6px;font-size:22px}.live-head .hint{margin:0 0 20px;max-width:640px;line-height:1.55}
.live-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.live-card{padding:18px 18px 16px;display:grid;gap:6px;align-content:start;animation:lbUp var(--t-med) var(--ease) both;transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.live-card:hover{box-shadow:0 8px 24px rgba(11,12,16,.08);transform:translateY(-1px)}
.live-card.flash{animation:liveFlash 1.2s var(--ease)}@keyframes liveFlash{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 3px var(--blue-soft)}}
.live-top{display:flex;align-items:center;gap:10px}.live-top h3{flex:1;min-width:0;margin:0;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live-st{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);white-space:nowrap}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none;display:inline-block}
.live-dot.live{background:#16a34a}.live-dot.building{background:#d97706;animation:livePulse 1.2s ease-in-out infinite}.live-dot.failed{background:var(--bad)}
@keyframes livePulse{50%{opacity:.35}}
.live-url{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;color:var(--blue-deep);text-decoration:none;word-break:break-all}.live-url:hover{text-decoration:underline}
.live-meta{margin:0;font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px}.live-meta a{color:inherit}
.live-err{margin:2px 0 0;font-size:12.5px;color:var(--bad);line-height:1.5}
.live-acts{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.live-empty{display:grid;justify-items:center;gap:6px;text-align:center;padding:44px 20px;color:var(--ink-2)}.live-empty p{margin:0}
.live-connect{padding:18px;margin:0 0 18px;display:grid;gap:6px;max-width:560px}.live-connect h3{margin:0;font-size:16px}.live-connect .hint{margin:0 0 6px;line-height:1.55}
.live-side .item{display:flex;align-items:center;gap:10px}
@media (max-width:760px){.live-wrap{padding:18px 16px 40px}}
/* one font: Plus Jakarta Sans for everything people read, numbers included; only code blocks, logs and keys stay monospaced */
.msg.ai .body :not(pre)>code,.step-head .sum code,.lb-steps code{font-family:inherit;font-size:.94em;font-weight:500}
.oauth-code{font-family:inherit;font-variant-numeric:tabular-nums}
.code-empty{display:grid;justify-items:center;gap:4px;text-align:center;margin:18px 14px;padding:20px 12px;border:1px dashed var(--border);border-radius:14px;animation:lbUp var(--t-med) var(--ease) both}
.code-empty-ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--soft-2);color:var(--ink-2);margin-bottom:6px}
.code-empty b{font-size:13.5px}.code-empty p{margin:0 0 10px;font-size:12.5px;color:var(--muted);line-height:1.5}

.si-other{display:grid;gap:8px;margin-top:12px;animation:lbUp var(--t-med) var(--ease) both}.si-other[hidden]{display:none}
.si-other label{font-size:13px;font-weight:600}.si-other textarea{min-height:76px}
.si-other-acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.si-other-acts .hint{margin:0;font-size:12px}

/* Usage: one row of controls, all the same height */
.u-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.u-bar .tabs{margin:0}
.u-pick{display:inline-flex;align-items:center;gap:8px;height:40px;min-height:40px;padding:0 14px;border-radius:var(--r-pill);background:var(--soft);border:1px solid var(--border);box-shadow:none;font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.u-pick:hover{background:var(--surface);border-color:var(--ink-3,#c4c8d0);transform:none}.u-pick svg{color:var(--muted)}
/* a pressed button waiting on the server: a spinner in place, the button keeps its exact size, not clickable again until it's done */
.is-busy{pointer-events:none;position:relative}
/* with an icon (icon-only or icon + label): the icon's own box turns into the spinner, so it never covers the label and nothing moves */
.is-busy>svg:first-of-type{box-sizing:border-box;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;opacity:.8;animation:busySvg .7s linear infinite,busyIn var(--t-fast,.15s) var(--ease) both}
.is-busy>svg:first-of-type>*{opacity:0}
/* text only: the label hides in place (width held) and the spinner sits dead centre, never on top of the letters */
.is-busy:not(:has(>svg)):not(.say)::after{content:'';position:absolute;inset:0;margin:auto;box-sizing:border-box;width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;opacity:.8;animation:busySpin .7s linear infinite,busyIn var(--t-fast,.15s) var(--ease) both}
.is-busy:not(:has(>svg)):not(.say){-webkit-text-fill-color:transparent}.is-busy:not(:has(>svg)):not(.say)>*{opacity:0}
/* a button that says what it is doing ("Connecting…"): the spinner goes before those words */
.is-busy.say::before{content:'';display:inline-block;flex:none;box-sizing:border-box;width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;opacity:.8;animation:busySpin .7s linear infinite,busyIn var(--t-fast,.15s) var(--ease) both}
@keyframes busyIn{from{opacity:0}}
@keyframes busySpin{to{transform:rotate(360deg)}}
@keyframes busySvg{from{transform:scale(.8) rotate(0)}to{transform:scale(.8) rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.is-busy::after,.is-busy::before,.is-busy>svg:first-of-type{animation-duration:2s,.01s}}
/* one focus ring: it hugs the button's own border instead of floating 2px outside it (border + gap + ring read as a double outline) */
button:focus-visible{outline:2px solid var(--blue-2);outline-offset:0;border-color:var(--blue-2)}
button.primary:focus-visible{outline-offset:2px}button:focus:not(:focus-visible){outline:none}

/* System › Health: backups */
.backups-card{margin-bottom:16px}.bk-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}.bk-head h2{margin:0 0 4px}.bk-head .sub{margin:0}
.bk-acts{display:flex;gap:8px;flex-wrap:wrap}.bk-rows{display:grid;gap:8px;margin-top:14px}.bk-row{display:grid;grid-template-columns:120px 1fr;gap:12px;font-size:13.5px;line-height:1.5}.bk-k{color:var(--muted)}
@media (max-width:620px){.bk-row{grid-template-columns:1fr;gap:2px}}
/* the one Restore… dialog (backups.js, 1 Nov 2026): Drive backups, then one saved on the box, then a file from this computer */
.rs-h{font-size:13px;font-weight:600;color:var(--ink-2);margin:18px 0 8px}.rs-list{display:grid;gap:6px}
.rs-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);animation:rise var(--t-med) var(--ease) both}
.rs-item .txt{display:grid;gap:2px;min-width:0}.rs-item .txt b{font-size:13.5px;font-weight:600}.rs-item .txt span{font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}.rs-item button{flex:none}
.backups-card{animation:rise var(--t-med) var(--ease) both}.eu-mode{display:grid;gap:6px;justify-items:start}.eu-mode small{color:var(--muted);font-size:12.5px}
/* Automatic engine updates (engine-updates.js): the card under Updates, its last tries one per line */
.ag-card{margin-bottom:16px;animation:rise var(--t-med) var(--ease) both}.ag-row>span{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.ag-row small{overflow-wrap:anywhere}
.eu-card{margin-bottom:16px;animation:rise var(--t-med) var(--ease) both}.eu-list{display:grid;gap:8px}.eu-log{display:grid;gap:2px}.eu-log small{color:var(--muted);font-size:12.5px}.eu-rolled-back b,.eu-check-failed b,.eu-failed b{color:var(--warn)}
@media (max-width:620px){.eu-card .seg-mini{width:100%}.eu-card .seg-mini button{flex:1}.eu-mode{justify-items:stretch}}

/* Connected apps › Code */
.code-apps{margin-top:16px}.code-apps h2{margin:0 0 4px}.code-apps .sub{margin:0 0 12px}
.ca-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--border)}.ca-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--soft-2);color:var(--ink-2);flex:none}
.ca-t{flex:1;min-width:0;display:grid;gap:2px}.ca-t b{font-size:13.5px}.ca-t span{font-size:12.5px;color:var(--muted);line-height:1.45}

/* in the aqeelOS app, notices sit bottom-left, clear of Code's real browser on the right */
.aq-desktop .cron-pops{right:20px;left:auto;top:auto;bottom:20px}
/* Live, nothing published yet: a calm centred card in the side list and on the page */
.live-none{display:grid;justify-items:center;gap:8px;text-align:center;margin:14px 12px;padding:26px 18px 22px;border:1px dashed var(--border);border-radius:var(--r-card);background:var(--soft);animation:rise var(--t-med) var(--ease) both}
.live-none b{font-size:14px;color:var(--ink)}.live-none p{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted);max-width:220px}
.ln-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--blue-soft);color:var(--blue);margin-bottom:4px;box-shadow:0 0 0 6px color-mix(in srgb,var(--blue-soft) 45%,transparent)}
.live-none .ln-go{margin-top:8px;padding:7px 14px;font-size:12.5px;transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.live-none .ln-go:hover{background:var(--soft-2);transform:translateY(-1px)}
.live-empty{animation:rise var(--t-med) var(--ease) both}.live-empty .ln-ico{width:52px;height:52px;margin-bottom:6px}
/* All agents on Skills, Memory, Logs (all-agents-more.js): one chip per agent, lit when it is on for that agent */
.aam-ags{display:flex!important;flex-wrap:wrap;gap:6px;margin-top:8px}
.aam-ag{display:inline-flex;align-items:center;gap:6px;height:28px;min-height:28px;padding:0 10px 0 4px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);font:inherit;font-size:12.5px;cursor:pointer;transition:background .18s,color .18s,border-color .18s,opacity .18s;opacity:.7}
.aam-ag .acc-av{margin:0;box-shadow:none;filter:grayscale(1);transition:filter .18s}
.aam-ag:hover{opacity:1;border-color:var(--ink-3,var(--muted))}
.aam-ag.on{opacity:1;color:var(--ink);background:var(--soft);border-color:transparent}.aam-ag.on .acc-av{filter:none}
.aam-ag:disabled{cursor:progress;opacity:.5}
.aam-h{display:inline-flex;align-items:center;gap:10px}.aam-h .acc-av{margin:0}
.aam-more{margin-top:10px}.aam-more>summary{cursor:pointer;font-size:13.5px;color:var(--ink-2);padding:6px 0}
/* disclosure: never the browser's triangle anywhere; folds without an icon of their own get the app's chevron (the
   Board's kd-fold one), which turns as it opens, and open and close ease their height */
summary{list-style:none}summary::-webkit-details-marker{display:none}
.aam-more>summary,.sd-raw>summary,.sd-book>summary,.wac-more>summary,.ae-adv>summary,.code-new>summary,.kf-more:not(.cj-adv)>summary{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.aam-more>summary::before,.sd-raw>summary::before,.wac-more>summary::before,.ae-adv>summary::before,.code-new>summary::before,.kf-more:not(.cj-adv)>summary::before,.sd-book>summary::after{content:"";width:6px;height:6px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(-45deg);transition:transform var(--t-med) var(--ease);flex:none;opacity:.75}
.sd-book>summary::after{margin-left:auto}
.aam-more[open]>summary::before,.sd-raw[open]>summary::before,.wac-more[open]>summary::before,.ae-adv[open]>summary::before,.code-new[open]>summary::before,.kf-more:not(.cj-adv)[open]>summary::before,.sd-book[open]>summary::after{transform:rotate(45deg)}
.sd-raw,.sd-book,.wac-more,.ae-adv,.code-new,.kf-more{interpolate-size:allow-keywords}
.sd-raw::details-content,.sd-book::details-content,.wac-more::details-content,.ae-adv::details-content,.code-new::details-content,.kf-more::details-content{block-size:0;overflow:hidden;transition:block-size var(--t-med) var(--ease),content-visibility var(--t-med) allow-discrete}
.sd-raw[open]::details-content,.sd-book[open]::details-content,.wac-more[open]::details-content,.ae-adv[open]::details-content,.code-new[open]::details-content,.kf-more[open]::details-content{block-size:auto}
@media (prefers-reduced-motion:reduce){summary::before,summary::after{transition:none}details::details-content{transition:none}}
/* memory sections open and close smoothly (height where the browser can, a fade everywhere) */
.aam-more{interpolate-size:allow-keywords}.aam-more::details-content{block-size:0;overflow:hidden;transition:block-size var(--t-med) var(--ease),content-visibility var(--t-med) allow-discrete}.aam-more[open]::details-content{block-size:auto}
.aam-more[open]>:not(summary){animation:fade var(--t-med) var(--ease) both}
@media (max-width:760px){.all-view .all-row .txt>span:not(.aam-ags){white-space:normal;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
 .aam-ags{gap:4px;margin-top:6px}.aam-ag{height:26px;min-height:26px;padding:0 8px 0 3px;font-size:12px}}
.aam-who{font-weight:600;color:var(--accent,var(--ink))}

/* Bottlenecks always in the top bar; quiet when nothing is stuck */
.bn-btn.none,.bn-btn[data-none]{color:var(--muted)}.bn-btn.none .bn-n,.bn-btn[data-none] .bn-n,.bn-btn .bn-n:empty{display:none}   /* before the first count too: no empty dot (31 Oct 2026) */
/* the owner on every shared row (access.js): its picture with a crown, then who else uses it */
.acc-own{display:inline-flex;align-items:center;gap:6px;position:relative;margin-right:4px;padding-right:8px;border-right:1px solid var(--border)}
.acc-own>i{position:absolute;left:13px;top:-5px;width:14px;height:14px;border-radius:50%;background:#f5b301;color:#3b2a00;display:grid;place-items:center;font-style:normal}
.acc-own>b{font-size:12.5px;font-weight:600;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:700px){.acc-own>b{display:none}}
/* the line under the composer stays off phones (too little room) */
@media (max-width:700px){.hint-line{display:none}}

/* Why an agent asks (why.mjs): its purpose and the message that led to it, quieter than the title */
.bn-whys{display:grid;gap:4px;margin:2px 0 10px;padding:8px 10px;border-radius:10px;background:var(--soft)}
.bn-why{display:grid;grid-template-columns:44px 1fr;gap:8px;font-size:13px;line-height:1.45;color:var(--ink-2)}.bn-why .bn-k{color:var(--muted);font-size:12px}
.bn-why small,.si-row small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
[data-why-chat]{all:unset;cursor:pointer;color:var(--blue);font-size:12px;font-weight:600;border-radius:4px;transition:color var(--t-fast) var(--ease)}[data-why-chat]:hover{color:var(--blue-deep);text-decoration:underline}[data-why-chat]:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* Parity: Files, memory provider settings, channel settings and WhatsApp linking */
.f-broken{font-size:11px;padding:1px 7px;margin-right:6px;vertical-align:1px}
.mem-f{margin-bottom:4px}.mem-f:not([hidden]){animation:fade var(--t-med,.2s) var(--ease,ease) both}
.mem-f label .chip.access,.ch-f label .chip.access{vertical-align:1px}
.mem-f label a,.ch-f .hint a{font-weight:500}
.mem-secret{position:relative}.mem-secret input{padding-right:46px}.mem-secret .ghost.icon{position:absolute;right:4px;top:50%;transform:translateY(-50%);min-height:36px;width:38px}.mem-secret .ghost.icon.on{color:var(--blue)}
.ch-h{font-size:14px;margin:18px 0 8px}
.mem-res{border:1px solid var(--border);border-radius:var(--r-md,12px);padding:8px 12px;margin:0 0 8px;animation:rise .25s ease both}
.mem-res summary{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13.5px;list-style:none;min-height:32px}.mem-res summary::-webkit-details-marker{display:none}
.mem-res summary .chip.access{margin-left:0}
.mem-res[open]>:not(summary){animation:fade .2s ease both}
.mem-res .action-log{max-height:220px;margin:6px 0 4px}
.ch-f.bad input,.ch-f.bad select,.ch-f.bad .allow{border-color:var(--bad)}
.ch-err{margin:4px 0 0;animation:fade .2s ease both}
.ch-upd{color:var(--muted);font-size:12px;margin-left:8px;font-weight:400}
.ch-count{font-size:13px;font-weight:500;color:var(--muted)}
.ch-envp{margin-top:14px}
.ch-onrow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-md,12px);margin:0 0 14px}
.ch-onrow b{font-size:14px}
.ch-restart{display:flex;align-items:center;gap:14px;margin-bottom:16px;padding:14px 18px;color:var(--ink);animation:rise .3s ease both}
.ch-restart>svg{flex:none;color:var(--warn)}
.ch-restart .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.ch-restart .txt b{font-size:14px}.ch-restart .txt span{font-size:13px;color:var(--ink-2);line-height:1.45}
.ch-restart.closing{animation:fadeOut .21s ease both}
.allow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px;border:1px solid var(--border);border-radius:var(--r-md,12px);background:var(--surface);cursor:text;transition:border-color var(--t-fast,.15s) ease}
.allow:focus-within{border-color:var(--blue)}
.allow-chip{display:inline-flex;align-items:center;gap:2px;padding:2px 2px 2px 10px;border-radius:var(--r-pill,999px);background:var(--soft);font-size:13px;max-width:100%;animation:rise .2s ease both}
.allow-chip>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.allow-chip .ghost.icon{width:26px;min-height:26px;height:26px;padding:0}
.allow-chip.closing{animation:fadeOut .15s ease both}
.allow .allow-in{flex:1;min-width:140px;border:0;box-shadow:none;background:transparent;padding:6px;min-height:32px}
.allow .allow-in:focus{outline:none;box-shadow:none}
.wac-more{margin:14px 0 4px;border-top:1px solid var(--border);padding-top:10px}
.wac-more summary{cursor:pointer;font-weight:600;font-size:14px;min-height:36px;display:flex;align-items:center}
.wac-more[open] .wac-more-body{animation:fade .2s ease both}
.wac-more-body>button{margin-top:12px}
.wa-opts{margin:0 0 14px;animation:rise .25s ease both}
.wa-opts.closing{animation:fadeOut .21s ease both}
.wa-mode{display:flex;width:100%;margin:6px 0 2px}.wa-mode button{flex:1;min-height:34px;white-space:normal;line-height:1.2}
.wa-acts{display:flex;gap:8px;flex-wrap:wrap}
.wa-exp{font-variant-numeric:tabular-nums}.wa-exp.bad{color:var(--bad)}
.wa-rs{margin-top:10px}
@media (max-width:760px){.ch-restart{flex-wrap:wrap}.ch-restart>button{width:100%}.mem-secret .ghost.icon{min-height:40px;width:40px}}
@media (prefers-reduced-motion:reduce){.mem-f:not([hidden]),.mem-res,.allow-chip,.ch-restart,.wa-opts{animation:none}}
/* Engine console (health-page.js): the engine's answers in a log, one command line under it */
.con-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px}.con-bar .con-for{font-size:13px;color:var(--ink-2);min-width:0;flex:1}
.con-bar .chip{transition:color var(--t-med) var(--ease),background-color var(--t-med) var(--ease)}
.con-out{font-family:var(--mono);font-size:12.5px;line-height:1.6;background:var(--soft-2);border:1px solid var(--border);border-radius:var(--r-md) var(--r-md) 0 0;padding:12px 14px;height:min(52vh,460px);overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}
.con-out>div{animation:fade var(--t-med) var(--ease) both}.con-out .e{color:var(--bad)}.con-out .w{color:var(--warn)}.con-out .d{color:var(--muted)}.con-out .cmd{color:var(--ink);font-weight:600}.con-out a{color:var(--blue)}
.con-in{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-top:0;border-radius:0 0 var(--r-md) var(--r-md);padding:4px 12px;background:var(--surface);transition:box-shadow var(--t-med) var(--ease)}
.con-in:focus-within{box-shadow:0 0 0 3px var(--blue-soft)}
.con-in span{font-family:var(--mono);font-size:12.5px;color:var(--muted);white-space:nowrap}
.con-in input{flex:1;min-width:0;border:0;box-shadow:none;background:transparent;font-family:var(--mono);font-size:13px;padding:8px 0;outline:none}
.con-in input[readonly]{color:var(--muted)}
/* Share a support report: its links */
.ds-res{display:grid;gap:8px;margin-top:6px;animation:rise var(--t-med) var(--ease) both}
.ds-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.ds-meta .ghost{margin-left:auto}
.ds-link{display:flex;align-items:center;gap:10px;min-width:0;padding:6px 6px 6px 12px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--soft-2)}
.ds-link .ds-l{font-size:12.5px;color:var(--muted);flex:none;max-width:30%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-link a{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--blue)}
/* System › Health: the engine's latest backup, pooled keys, hook details, a link-like button */
.eb-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border);animation:rise var(--t-med) var(--ease) both}
.eb-row .txt{min-width:0;display:grid;gap:2px}.eb-row .txt b{font-size:14px;font-weight:600}.eb-row .txt span{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pool-keys{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;min-width:0}
.pool-key{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:2px 2px 2px 10px;border:1px solid var(--border);border-radius:var(--r-pill);font-size:12.5px}
.pool-key b{font-weight:600;white-space:nowrap}.pool-key code{font-family:var(--mono);font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pool-key .chip{font-size:11px;padding:1px 7px}.pool-key .ghost.icon{width:28px;height:28px;min-height:28px;flex:none}
.hook-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:4px;font-size:12px;color:var(--muted)}.hook-meta .chip{font-size:11px;padding:1px 7px}
.gw-note{color:var(--warn)}.gw-note[hidden]{display:none}
.link-btn{all:unset;cursor:pointer;color:var(--blue);font-weight:600;border-radius:4px;transition:color var(--t-fast) var(--ease)}.link-btn:hover{color:var(--blue-deep);text-decoration:underline}.link-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media (max-width:700px){.pool-keys{justify-content:flex-start}.pool-key .ghost.icon{width:36px;height:36px;min-height:36px}.row:has(.pool-keys){flex-wrap:wrap}}
/* Logs: which file and filters are shown */
.log-sum{margin:-4px 0 10px;font-size:12.5px;color:var(--muted)}
/* Usage: tables sorted by their headers, the note under the totals */
th.sortable{padding:0}th.sortable button{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:4px;width:100%;padding:10px 12px;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;border-radius:8px;transition:color var(--t-fast) var(--ease)}
th.sortable.num button{justify-content:flex-end}th.sortable button:hover{color:var(--ink)}th.sortable button:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.sort-ar{display:inline-block;opacity:0;transition:opacity var(--t-fast) var(--ease),transform var(--t-med) var(--ease)}.sort-ar.on{opacity:1;color:var(--ink)}.sort-ar.up{transform:rotate(180deg)}th.sortable button:hover .sort-ar:not(.on){opacity:.4}
tbody.resort{animation:fade var(--t-med) var(--ease) both}
.u-note{margin:-6px 0 16px;font-size:12.5px;color:var(--muted)}
.u-pick.icon{width:40px;padding:0;justify-content:center}
.banner.closing{animation:fadeOut .2s var(--ease) both}
/* Engine dashboard plugins inside aqeelOS (plugin-host.js): the engine's colour names point at aqeelOS's, one font, a few layout helpers its bundles use */
.plug-host{--color-foreground:var(--ink);--color-muted-foreground:var(--muted);--color-border:var(--border);--color-card:var(--surface);--color-card-subtle:var(--soft-2);--color-card-foreground:var(--ink);--color-background:var(--bg);--color-muted:var(--soft);--color-accent:var(--soft);--color-accent-foreground:var(--ink);--color-popover:var(--surface);--color-popover-foreground:var(--ink);--color-input:var(--border);--color-ring:var(--blue);--color-primary:var(--blue);--color-primary-foreground:#fff;--color-secondary:var(--soft);--color-secondary-foreground:var(--ink);--color-destructive:var(--bad);--color-destructive-foreground:#fff;--color-warning:var(--warn);--color-success:var(--ok);--radius:var(--r-md);--radius-sm:var(--r-sm);--radius-lg:var(--r-card);--font-sans:'Plus Jakarta Sans',system-ui,sans-serif;--font-mono:'Plus Jakarta Sans',system-ui,sans-serif;--hermes-diag-error:var(--bad);--hermes-diag-critical:var(--bad);--hermes-diag-warning:var(--warn);color:var(--ink)}
.plug-host,.plug-host :not(pre):not(code):not(kbd):not(pre *){font-family:'Plus Jakarta Sans',system-ui,sans-serif!important}
.plug-for{margin:-6px 0 14px;font-size:12.5px;color:var(--muted)}
.plug-page{min-height:120px;min-width:0;overflow-wrap:break-word;animation:fade var(--t-med) var(--ease) both}
#bannerSlot+.plug-slot{margin:10px 16px 0}
.plug-slot{margin:0 0 16px;animation:fade var(--t-med) var(--ease) both}.plug-slot:empty{display:none}
.chat>.plug-slot{margin:0;padding:8px 16px;max-width:812px;width:100%;align-self:center}
.topbar>.plug-slot,.top-actions>.plug-slot{margin:0;display:flex;align-items:center}.side>.plug-slot{margin:0;padding:6px 12px}
.plug-overlay{position:fixed;inset:0;z-index:60;pointer-events:none}.plug-overlay>*{pointer-events:auto}.plug-backdrop{position:fixed;inset:0;z-index:0;pointer-events:none}
.plug-err{display:flex;flex-direction:column;align-items:center;gap:4px}.plug-err.small{padding:14px 16px;font-size:13px}.plug-err button{margin-top:10px}
.plug-card{padding:0;overflow:hidden}.plug-card-head{padding:18px 20px 0;display:flex;flex-direction:column;gap:4px}.plug-card-title{margin:0;font-size:15px;font-weight:600}.plug-card-desc{margin:0;font-size:13px;color:var(--muted)}.plug-card-body{padding:18px 20px}.plug-card-head+.plug-card-body{padding-top:12px}.plug-card-foot{padding:0 20px 18px;display:flex;gap:8px;align-items:center}
.plug-chip{font-size:11.5px;padding:2px 9px}
.plug-label{display:block;font-size:13px;font-weight:500;color:var(--ink-2)}
.plug-input{min-width:0}textarea.plug-input{min-height:84px;resize:vertical;line-height:1.5}
.plug-select{display:inline-flex;position:relative;min-width:0;vertical-align:middle}.plug-select .sel-btn{width:100%;min-height:36px}
.plug-sep{height:1px;background:var(--border);margin:12px 0;flex:none}.plug-sep.v{width:1px;height:auto;align-self:stretch;margin:0 8px}
.plug-tabs .tabs{margin-bottom:14px}
.plug-spin{display:inline-block;width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite;vertical-align:middle}
.plug-skel{min-height:16px;border-radius:var(--r-sm)}
button.plug-danger{background:var(--bad);box-shadow:none}
.plug-scrim{position:fixed;inset:0;background:rgba(11,12,16,.28);backdrop-filter:blur(2px);z-index:44;animation:fade var(--t-fast) var(--ease)}.plug-scrim.closing{animation:fadeOut .2s var(--ease) both}
.plug-dlg{position:fixed;top:50%;left:50%;z-index:45;transform:translate(-50%,-50%);width:min(560px,calc(100vw - 24px));max-height:min(88vh,920px);overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:24px;box-shadow:0 30px 80px -20px rgba(11,12,16,.35);padding:22px 24px;animation:popIn .28s var(--ease) both}
.plug-dlg.sm{width:min(440px,calc(100vw - 24px))}.plug-dlg.closing{animation:popOut .2s cubic-bezier(.4,0,1,1) both;pointer-events:none}
.plug-x{position:absolute;top:12px;right:12px}.plug-dlg-head{display:flex;flex-direction:column;gap:6px;margin:0 36px 14px 0}.plug-dlg-title{margin:0;font-size:17px;font-weight:600}.plug-dlg-desc{margin:0;line-height:1.5}
.plug-dlg-foot{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin:18px -24px -22px;padding:14px 20px;border-top:1px solid var(--border);background:var(--soft);position:sticky;bottom:-22px}
@media (prefers-reduced-motion:reduce){.plug-dlg,.plug-scrim,.plug-page,.plug-slot{animation:none}}
.plug-host .flex{display:flex}.plug-host .inline-flex{display:inline-flex}.plug-host .grid{display:grid}.plug-host .hidden{display:none}.plug-host .flex-col{flex-direction:column}.plug-host .flex-wrap{flex-wrap:wrap}.plug-host .flex-1{flex:1 1 0%;min-width:0}.plug-host .shrink-0{flex-shrink:0}
.plug-host .items-center{align-items:center}.plug-host .items-start{align-items:flex-start}.plug-host .items-end{align-items:flex-end}.plug-host .justify-between{justify-content:space-between}.plug-host .justify-end{justify-content:flex-end}.plug-host .justify-center{justify-content:center}
.plug-host .gap-1{gap:4px}.plug-host .gap-2{gap:8px}.plug-host .gap-3{gap:12px}.plug-host .gap-4{gap:16px}.plug-host .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.plug-host .grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (min-width:640px){.plug-host .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.plug-host .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.plug-host .sm\:flex-row{flex-direction:row}}
.plug-host .p-2{padding:8px}.plug-host .p-3{padding:12px}.plug-host .p-4{padding:16px}.plug-host .p-6{padding:24px}.plug-host .p-8{padding:32px}.plug-host .px-2{padding-left:8px;padding-right:8px}.plug-host .px-3{padding-left:12px;padding-right:12px}.plug-host .py-1{padding-top:4px;padding-bottom:4px}.plug-host .py-0\.5{padding-top:2px;padding-bottom:2px}.plug-host .pt-3{padding-top:12px}.plug-host .pb-2{padding-bottom:8px}.plug-host .pl-2{padding-left:8px}
.plug-host .mt-1{margin-top:4px}.plug-host .mt-2{margin-top:8px}.plug-host .mt-3{margin-top:12px}.plug-host .mb-1{margin-bottom:4px}.plug-host .mb-2{margin-bottom:8px}.plug-host .mb-3{margin-bottom:12px}.plug-host .ml-1{margin-left:4px}.plug-host .ml-auto{margin-left:auto}
.plug-host .text-xs{font-size:12px;line-height:1.45}.plug-host .text-sm{font-size:13.5px;line-height:1.5}.plug-host .text-base{font-size:15px}.plug-host .text-lg{font-size:17px}.plug-host .text-\[10px\]{font-size:10.5px}.plug-host .text-\[11px\]{font-size:11px}
.plug-host .text-muted-foreground{color:var(--muted)}.plug-host .text-destructive{color:var(--bad)}.plug-host .text-yellow-600{color:var(--warn)}.plug-host .text-primary{color:var(--blue)}.plug-host .font-medium{font-weight:500}.plug-host .font-semibold{font-weight:600}.plug-host .font-bold{font-weight:700}.plug-host .italic{font-style:italic}.plug-host .underline{text-decoration:underline}.plug-host .underline-offset-2{text-underline-offset:2px}.plug-host .tracking-wider{letter-spacing:.05em}
.plug-host .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.plug-host .whitespace-nowrap{white-space:nowrap}.plug-host .select-none{user-select:none}.plug-host .resize-y{resize:vertical}.plug-host .overflow-auto{overflow:auto}.plug-host .min-w-0{min-width:0}.plug-host .w-full{width:100%}.plug-host .max-h-48{max-height:192px}.plug-host .min-h-\[3rem\]{min-height:3rem}.plug-host .min-w-\[220px\]{min-width:min(220px,100%)}
.plug-host .h-7{height:28px;min-height:28px}.plug-host .h-8{height:32px;min-height:32px}.plug-host .w-3\.5{width:14px}.plug-host .w-16{width:64px}.plug-host .w-20{width:80px}.plug-host .w-24{width:96px}.plug-host .w-44{width:min(176px,100%)}.plug-host .w-56{width:min(224px,100%)}
.plug-host .rounded-md{border-radius:var(--r-sm)}.plug-host .rounded-full{border-radius:var(--r-pill)}.plug-host .border{border:1px solid var(--border)}
.plug-host input.h-8,.plug-host input.h-7{padding-top:4px;padding-bottom:4px}.plug-host .plug-select.h-8 .sel-btn,.plug-host .plug-select.h-7 .sel-btn{min-height:32px;height:32px;padding-top:4px;padding-bottom:4px}

/* secret cards: every field the same width; "Value" with a quiet Show/Hide on its right; the key name a quiet line under "What is it?" */
.secret-card .sc-main>input{width:100%;box-sizing:border-box;margin-top:4px}
.secret-card [data-val]{letter-spacing:.5px}
.secret-card .sc-lblrow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}
.secret-card .sc-lblrow .sc-lbl{margin:0}
.secret-card .sc-show{display:inline-flex;align-items:center;gap:5px;height:auto;min-height:0;padding:2px 8px;border:0;border-radius:999px;background:none;color:var(--muted);font:inherit;font-size:12px;font-weight:500;cursor:pointer;transition:color .18s,background .18s}
.secret-card .sc-show:hover,.secret-card .sc-show[aria-pressed=true]{color:var(--ink);background:var(--soft-2,rgba(0,0,0,.05))}
.secret-card .sc-name{display:block;font-size:12px;color:var(--muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:0}
.secret-card .sc-name:empty{display:none}
.secret-card .sc-actions{margin-top:16px}
/* corner notices sit under the top bar, never over the message box (bottom right covered the composer's buttons) */
.cron-pops,.aq-desktop .cron-pops{top:72px!important;bottom:auto!important}
@media (max-width:700px){.cron-pops{top:64px!important}}
/* the floating screen's top row wraps instead of cutting off its last buttons */
.screen-float .screen-head{height:auto;min-height:48px;flex-wrap:wrap;row-gap:6px;padding-top:7px;padding-bottom:7px}
.screen-float .screen-head .scr-pick{max-width:100%}
/* docked beside the chat too: the screen's top row wraps rather than cutting off its last buttons */
.screen-head{flex-wrap:wrap;height:auto;min-height:60px;row-gap:6px;padding-top:8px;padding-bottom:8px}

/* step-by-step progress for long tasks (progressView in core.js): turning ring, then a tick that pops in */
.prog{padding:6px 2px}.prog ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.prog li{display:flex;gap:12px;align-items:flex-start;padding:10px 4px;transition:opacity .25s var(--ease)}
.prog li.wait{opacity:.45}.prog li b{font-weight:600;font-size:14px;display:block;line-height:1.4}.prog li small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px;line-height:1.45}.prog li small:empty{display:none}
.prog .pi{flex:none;width:20px;height:20px;margin-top:1px;border-radius:50%;border:2px solid var(--border);position:relative;transition:border-color .25s,background .25s}
.prog li.doing .pi{border-color:color-mix(in srgb,var(--blue) 25%,var(--border));border-top-color:var(--blue);animation:spin .8s linear infinite}
.prog li.done .pi{border-color:var(--ok);background:var(--ok);animation:progPop .32s cubic-bezier(.2,.9,.3,1.4)}
.prog li.done .pi::after{content:'';position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.prog li.fail .pi{border-color:var(--bad);background:var(--bad)}.prog li.fail .pi::after{content:'!';position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:700}
.prog li.fail small{color:var(--bad)}
.prog-time{margin:10px 4px 0;font-size:12.5px;color:var(--muted);min-height:18px;font-variant-numeric:tabular-nums}
@keyframes progPop{from{transform:scale(.5)}to{transform:scale(1)}}
.prog-head{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:14px}.prog-head .hint{margin:0;font-variant-numeric:tabular-nums}
.prog-head.ok b{color:var(--ok)}.prog-head.bad b{color:var(--bad)}

/* list rows on touch screens: a tap leaves :hover stuck on the row under the finger, so only real pointers get the hover tint */
@media (hover:none){.row:hover,.sj-row:hover{background:transparent}}
/* ---------- tool groups: what each does, a warning on the powerful ones, its tools under the app's chevron ---------- */
.ts-row{align-items:start}.ts-row .main-c{align-items:flex-start}.ts-row .act{padding-top:4px}
.ts-row .txt>span,.tsg-head .txt>span{white-space:normal;overflow:visible;text-overflow:clip}
.tsg-head{display:flex;gap:12px;align-items:flex-start;font-weight:400;text-align:left}.tsg-head .txt{min-width:0}
.tsg-head .txt b{display:block;font-size:14px;font-weight:600;color:var(--ink)}.tsg-head .txt>span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.45}
.row .txt .ts-say,.tsg-head .ts-say{color:var(--ink-2);line-height:1.45}
.row .txt .ts-risk,.tsg-head .txt .ts-risk{display:flex;align-items:flex-start;gap:6px;margin-top:4px;font-size:12.5px;line-height:1.45;color:var(--warn)}.ts-risk svg{flex:none;margin-top:2px}
.row .txt .ts-none,.ts-none{display:block;font-size:12.5px;color:var(--muted);margin-top:4px;white-space:normal}
.ts-x{margin:4px 0 0 -6px}
.ts-xb{min-height:28px;padding:0 8px 0 4px;gap:4px;border:0;background:none;box-shadow:none;font-size:12.5px;font-weight:500;color:var(--ink-2);border-radius:8px}
.ts-xb:hover{background:var(--soft);transform:none;box-shadow:none}.ts-xb svg{transition:transform var(--t-fast) var(--ease);color:var(--muted)}.ts-x.open .ts-xb svg{transform:rotate(90deg)}
.ts-xl{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows var(--t-med) var(--ease),opacity var(--t-med) var(--ease)}.ts-x.open .ts-xl{grid-template-rows:1fr;opacity:1}
.ts-xl>ul{min-height:0;overflow:hidden;margin:0;padding:0 0 0 28px;list-style:none}
.ts-xl li{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline;padding:3px 0;font-size:12.5px;line-height:1.45}.ts-xl li:first-child{padding-top:6px}
.ts-xl code{font-family:var(--mono);font-size:12px;color:var(--ink);background:var(--soft);padding:1px 6px;border-radius:6px}
.row .txt .ts-xl span,.ts-xl span{display:inline;white-space:normal;overflow:visible;margin:0;color:var(--muted);font-size:12.5px}
/* all agents: groups down the side, agents across; only the grid scrolls sideways, the group column stays put */
.tsg-note{margin:-4px 0 12px}
.card.tsg-wrap{padding:0;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.tsg{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.tsg th,.tsg td{border-top:1px solid var(--border);padding:14px 10px;vertical-align:middle;transition:background var(--t-fast) var(--ease)}
.tsg thead th{border-top:0;padding-top:16px;padding-bottom:12px;vertical-align:bottom}
.tsg .tsg-g{position:sticky;left:0;z-index:1;background:var(--surface);width:44%;min-width:280px;max-width:420px;padding-left:18px;padding-right:16px;box-shadow:1px 0 0 var(--border)}
.tsg thead .tsg-g{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;text-align:left}
.tsg-a{min-width:96px;font-weight:500}.tsg-a>span{display:flex;flex-direction:column;align-items:center;gap:6px}.tsg-a .acc-av{margin:0;box-shadow:none;font-size:11px}
.tsg-a b{font-size:12.5px;font-weight:600;max-width:112px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tsg-c{text-align:center}.tsg-c .switch{margin:0 auto}
.tsg tbody tr{animation:fade var(--t-med) var(--ease) both}
@media (hover:hover){.tsg tbody tr:hover>*{background:var(--soft-2)}}
.tsg td.dirty,.tsg tbody tr:hover>td.dirty{background:var(--blue-soft)} /* changed, waiting for Apply */
.tsg-lock{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--soft);color:var(--muted);cursor:help;vertical-align:middle}
.tsg-lock:focus-visible{outline:2px solid var(--blue-2);outline-offset:1px}
.tsg-ro{display:inline-flex;cursor:not-allowed;vertical-align:middle}.tsg-ro .switch{opacity:.5;pointer-events:none}
.tsg-na{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--border);vertical-align:middle}
@media (max-width:760px){.tsg .tsg-g{min-width:220px;width:auto;padding-left:14px}.tsg-head .ic{display:none}.tsg-a{min-width:84px}}
@media (max-width:560px){.tsg .tsg-g{min-width:176px;max-width:200px}.tsg-a{min-width:76px}.tsg-a b{max-width:80px}}
/* the waiting changes: slides up under the grid, away again once applied or undone (it keeps its space, so nothing jumps) */
.tsg-bar{position:sticky;bottom:16px;z-index:5;display:flex;align-items:center;gap:8px;margin:14px 0 0;padding:8px 8px 8px 18px;border-radius:999px;background:var(--surface);border:1px solid var(--border);box-shadow:0 14px 34px -14px rgba(11,12,16,.35);opacity:0;transform:translateY(12px);visibility:hidden;pointer-events:none;transition:opacity var(--t-med) var(--ease),transform var(--t-med) var(--ease),visibility 0s linear var(--t-med)}
.tsg-bar.show{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition-delay:0s}
.tsg-sum{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;font-size:13.5px}.tsg-sum small{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tsg-bar button{flex:none}
@media (max-width:560px){.tsg-bar{flex-wrap:wrap;border-radius:18px;padding:12px}.tsg-sum{flex-basis:100%}.tsg-bar .primary{flex:1}}
/* ---------- people: every card is the same shape (head, then titled sections); the owner's "Everything" sits in a section too ---------- */
.person .pshares,.person .pcaps{margin-top:14px;padding-top:12px}
.person .psay{margin:0;font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.pshare .psay{flex:1;min-width:0;color:var(--muted)}   /* what the picked role allows, read as its description */
/* Role, Models and Daily limit: one menu-button look, one width, right-aligned */
.pshare .sel-btn.inline{min-height:34px;width:176px;min-width:0;max-width:62%;padding:6px 10px 6px 12px;font-size:13px;flex:none}
@media (max-width:760px){.pshare .sel-btn.inline{font-size:16px;width:168px}}
/* agent avatars (agentAvatar in core.js): round, a fixed size so nothing moves while the picture loads; an emoji sits
   on a soft neutral disc, a photo fills it. Last in the file and a little more specific so older per-place rules
   (status button, Showing picker, tiles) can't stretch an emoji or paint a coloured background behind it */
.ag-ava{display:inline-grid;place-items:center;flex:none;border-radius:50%!important;overflow:hidden;background:var(--soft);padding:0;line-height:0;vertical-align:middle;color:inherit}
span.ag-ava img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
span.ag-ava.emo img{width:78%;height:78%;object-fit:contain;border-radius:0}
.status-btn span.ag-ava.avatar,.view-pick span.ag-ava.vp-ava{background:var(--soft)}
span.ag-ava.ava-in img{animation:avaIn .26s var(--ease) both}
@keyframes avaIn{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){span.ag-ava.ava-in img{animation:none}}
/* agent editor › Identity: the emoji grid next to Upload photo. Fixed height so searching never moves the window;
   "No emoji match" sits over the empty grid instead of adding a line under it */
.ident-ava-box{width:84px;height:84px;flex:none;display:grid;place-items:center}
.emo-pick{position:relative}
.emo-q{position:relative}.emo-q>svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}.emo-q input{padding-left:34px}
.emo-grid{display:grid;grid-template-columns:repeat(auto-fill,46px);grid-auto-rows:46px;justify-content:space-between;align-content:start;gap:6px;height:204px;overflow-y:auto;overscroll-behavior:contain;margin-top:8px;padding:8px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--soft-2)}
.emo-grid .emo{position:relative;display:grid;place-items:center;width:46px;height:46px;min-height:0;min-width:0;padding:6px;margin:0;border-radius:12px;border:1px solid transparent;background:transparent;box-shadow:none;cursor:pointer;transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.emo-grid .emo[hidden]{display:none}
.emo-grid .emo img{width:34px;height:34px;object-fit:contain;pointer-events:none}
@media (hover:hover){.emo-grid .emo:hover{background:var(--surface);transform:translateY(-1px)}}
.emo-grid .emo:active{transform:scale(.94)}
.emo-grid .emo.on{background:var(--blue-soft);border-color:var(--blue)}
.emo-grid .emo:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.emo-grid .emo.auto small{position:absolute;left:50%;bottom:1px;transform:translateX(-50%);font-size:9.5px;font-weight:700;line-height:1;padding:2px 5px;border-radius:6px;background:var(--surface);color:var(--muted);box-shadow:0 0 0 1px var(--border)}
.emo-pick .emo-none{position:absolute;left:0;right:0;bottom:0;height:204px;margin:0;display:grid;place-items:center;pointer-events:none;animation:avaIn .2s var(--ease) both}
.emo-pick .emo-none[hidden]{display:none}
/* a person without a photo or emoji: their initial on a soft colour from their id */
.ag-ava.ini{line-height:1;font-weight:650;letter-spacing:-.01em;background:hsl(var(--h,220) 70% 92%);color:hsl(var(--h,220) 45% 32%)}
.dark .ag-ava.ini{background:hsl(var(--h,220) 30% 24%);color:hsl(var(--h,220) 70% 84%)}
.menu .item .ag-ava{margin-right:2px}
/* photo crop (avatarCrop in core.js): opens inside the window and slides open and shut */
.ava-crop{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .28s var(--ease),opacity .2s var(--ease),margin .28s var(--ease)}
.ava-crop>div{min-height:0;overflow:hidden}
.ava-crop.open{grid-template-rows:1fr;opacity:1;margin:6px 0 14px}
.crop-in{display:flex;gap:20px;align-items:center;flex-wrap:wrap;padding:6px}
.crop-vp{position:relative;width:220px;height:220px;border-radius:50%;overflow:hidden;background:var(--soft);cursor:grab;touch-action:none;flex:none;box-shadow:0 0 0 1px var(--border);outline:none;transition:box-shadow var(--t-fast) var(--ease)}
.crop-vp:focus-visible{box-shadow:0 0 0 3px var(--blue)}
.crop-vp.drag{cursor:grabbing}
.crop-vp img{position:absolute;left:50%;top:50%;max-width:none;user-select:none;-webkit-user-select:none;pointer-events:none;will-change:transform}
.crop-side{flex:1;min-width:180px}.crop-side label{margin-top:0}
.crop-side input[type=range]{width:100%;accent-color:var(--blue);padding:0;border:0;background:none;min-height:28px}
.crop-acts{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
@media (prefers-reduced-motion:reduce){.ava-crop{transition:none}}
.prof-pic .ident-ava-box{width:72px;height:72px}
span.ag-ava.ini.ava-in{animation:avaIn .26s var(--ease) both}
/* ---------- Help (help.js): the person's own help chat ---------- */
.help-ava{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);flex:none}
.help-ava.sm{width:24px;height:24px}.help-ava.lg{width:56px;height:56px}.dark .help-ava{color:var(--blue-2)}
.uname .help-ava.sm{margin-right:8px}
.help-empty>button{margin-top:-8px}.help-empty .alert{max-width:520px;margin:0 auto}
.help-go{appearance:none;border:0;background:none;box-shadow:none;padding:0;min-height:0;font:inherit;color:var(--blue);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--blue) 35%,transparent);transition:color var(--t-fast) var(--ease)}
.help-go:hover{color:var(--blue-deep);transform:none;box-shadow:none}.dark .help-go{color:var(--blue-2)}
.help-ticket{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin:12px 0 0;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);font-size:13.5px;line-height:1.5;animation:rise var(--t-med) var(--ease) both}
.help-ticket>svg{flex:none;color:var(--blue)}.help-ticket>span:not(.chip){flex:1 1 0;min-width:160px;color:var(--ink-2)}.help-ticket b{color:var(--ink);font-weight:600}
.help-ticket.ok>svg{color:var(--ok)}.help-ticket.bad>svg{color:var(--warn)}.help-ticket .chip{font-size:11.5px;padding:1px 8px;margin-left:auto}
.help-notice{display:flex;align-items:center;gap:10px;align-self:center;max-width:92%;padding:10px 14px;border-radius:var(--r-pill);background:var(--soft-2);color:var(--ink-2);font-size:13.5px;line-height:1.5}
.help-notice>svg{flex:none;color:var(--ok)}.help-notice small{color:var(--muted);white-space:nowrap}
.help-notice.fresh{background:var(--blue-soft);color:var(--ink)}
.thread .help-notice.still{animation:none}
.help-left{font-size:12px;color:var(--muted);margin-right:6px}
.hint-line.warn-t{color:var(--warn)}
.help-chat .composer textarea:disabled{opacity:.55;cursor:not-allowed}
.help-tk{cursor:default}.help-tk .chip{flex:none;font-size:11px;padding:0 7px}.help-tk:hover{background:transparent}
.sec-dot{width:7px;height:7px;border-radius:50%;background:var(--blue);margin-left:auto;flex:none;animation:rise var(--t-med) var(--ease) both}
.sec-dot+.kbd{margin-left:8px}.collapsed .sec-dot{position:absolute;top:8px;right:10px;margin:0}
.bn-ic.bn-ticket{background:var(--blue-soft);color:var(--blue)}.dark .bn-ic.bn-ticket{color:var(--blue-2)}
.help-set-row{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--border)}
.help-set-row:first-child{border-top:0;padding-top:4px}.help-set-row b{font-size:14px;font-weight:600}.help-set-row .hint{margin:2px 0 0}
.help-set-row .sel-btn{width:auto;min-width:220px;max-width:100%}
@media (max-width:560px){.help-set-row .sel-btn{width:100%;min-width:0}.help-notice{border-radius:var(--r-md)}}
/* Help › Tickets and settings (help.js HelpAdmin, 1 Nov 2026) */
.ha-tickets{margin-bottom:16px}.ha-list{display:grid;gap:8px;margin-top:6px}
.ha-item{display:flex;gap:12px 16px;align-items:flex-start;justify-content:space-between;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);animation:rise var(--t-med) var(--ease) both;transition:opacity .2s,transform .2s}
.ha-item.out{opacity:0;transform:translateX(12px)}.ha-item.later{background:var(--soft)}
.ha-item .txt{display:grid;gap:3px;min-width:0}.ha-item .txt b{font-size:14px;font-weight:600;line-height:1.4}.ha-item .txt p{margin:2px 0 0;font-size:13px;line-height:1.5;color:var(--ink-2);overflow-wrap:anywhere}
.ha-meta{font-size:12.5px;color:var(--muted)}.ha-meta .chip{font-size:11.5px;padding:1px 8px}
/* Resolve sits in the same place on every row: the second slot is as wide whether it holds Not now or nothing */
.ha-acts{display:grid;grid-template-columns:auto 88px;gap:8px;align-items:center;flex:none}.ha-acts>*:nth-child(2){width:100%}
/* one card per row, so none stands half empty next to a taller one */
.ha-tickets,.help-set,.ha-report{margin-bottom:16px}.help-set-row{gap:12px 20px}@media (min-width:900px){#helpSet{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}#helpSet .help-set-row{border-top:0;padding-top:4px}}
@media (max-width:620px){.ha-item{flex-direction:column}.ha-acts{width:100%;grid-template-columns:1fr 1fr}.ha-acts>span:empty{display:none}.ha-acts>button:only-of-type{grid-column:1/-1}}
/* Connect a model account (connect.js, 25 Oct): one dialog, each step eases in; the list, the two ways, the sign-in steps */
.drawer.cx .drawer-body{min-height:120px}
.cx-step{animation:viewIn var(--t-med) var(--ease) both}
.cx-q{position:relative;margin:4px 0 10px}.cx-q input{padding-left:38px}.cx-q svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted)}
.cx-list{display:flex;flex-direction:column;gap:2px;max-height:min(52vh,460px);overflow-y:auto;margin:0 -8px;padding:0 8px}
.cx-row{display:flex;align-items:center;gap:12px;width:100%;min-width:0;white-space:normal;min-height:56px;padding:8px 10px;border:0;border-radius:var(--r-md);background:none;color:var(--ink);text-align:left;font:inherit;cursor:pointer;animation:rise var(--t-med) var(--ease) both;transition:background var(--t-fast,.15s) var(--ease)}
.cx-row:hover,.cx-row:focus-visible{background:var(--soft)}.cx-row[hidden]{display:none}
.cx-row .logo{width:36px;height:36px;border-radius:10px;flex:none;display:grid;place-items:center;font-weight:700}
.cx-row .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.cx-row .txt b{font-size:14px;font-weight:600}.cx-row .txt small{font-size:12.5px;color:var(--muted)}
.cx-row .txt .chip{font-size:11px;padding:1px 8px;margin-left:6px;vertical-align:1px}.cx-row>svg{color:var(--muted);flex:none}
.cx-one{margin:12px 0 0;font-size:12.5px}
.cx-ways{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.cx-ways{grid-template-columns:1fr}}
.cx-opt{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;white-space:normal;min-height:132px;padding:18px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);color:var(--ink);text-align:left;font:inherit;cursor:pointer;transition:border-color var(--t-fast,.15s) var(--ease),box-shadow var(--t-fast,.15s) var(--ease),transform var(--t-fast,.15s) var(--ease)}
.cx-opt:hover,.cx-opt:focus-visible{border-color:var(--blue);box-shadow:0 2px 10px rgba(11,12,16,.06)}.cx-opt:active{transform:scale(.99)}
.cx-opt>svg{color:var(--blue)}.cx-opt b{font-size:15px}.cx-opt small{font-size:12.5px;color:var(--ink-2);line-height:1.45}.cx-have{font-size:12px;color:var(--muted);margin-top:auto}
.cx-steps{list-style:none;counter-reset:cx;margin:4px 0 6px;padding:0;display:flex;flex-direction:column;gap:14px}
.cx-steps li{counter-increment:cx;position:relative;padding-left:38px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.cx-steps li::before{content:counter(cx);position:absolute;left:0;top:-1px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--ink-2);font-size:13px;font-weight:600}
.cx-steps li b{font-size:14px}.cx-steps li span{font-size:13px;color:var(--ink-2);line-height:1.5}.cx-steps li input{width:100%}.cx-steps .oauth-code{margin:2px 0;align-self:stretch}
.cx-open{display:inline-flex;align-items:center;gap:8px;text-decoration:none;padding:8px 16px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--ink);font-weight:600;font-size:13.5px}
.cx-open:hover{border-color:var(--blue)}
.cx-st{min-height:1.4em;margin:10px 0 0}.cx-st.t-ok{color:var(--ok)}.cx-t{margin:2px 0 0;font-variant-numeric:tabular-nums}.cx-p{margin:0 0 12px;color:var(--ink-2);line-height:1.55}
.cx-wait{display:flex;align-items:center;gap:8px;margin:18px 0}
button.acct-more{font:inherit;cursor:pointer;width:100%;background:var(--surface)}
@media (prefers-reduced-motion:reduce){.cx-step,.cx-row{animation:none}}

/* Abilities › Connected accounts (connected-accounts.js, 31 Oct 2026) */
.ca-grid{grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
.ca-card{gap:12px;min-width:0}
.ca-card.ca-new{border-color:color-mix(in srgb,var(--warn) 45%,var(--border))}
.ca-card .acct-id h3{overflow-wrap:anywhere}
.ca-reg{flex:none;font-size:11.5px}
.ca-note{margin:-4px 0 0;font-size:12.5px;color:var(--ink-2);line-height:1.45}
.ca-used{font-size:12.5px;color:var(--muted)}
.ca-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}
.ca-row .th,.ca-card .acct-agents .th{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:600}
.ca-can-l{display:inline-flex;align-items:center;gap:6px}
.ca-can-l i{font-style:normal;color:var(--muted)}
.ca-c{color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 60%,transparent);transition:color var(--t-med) var(--ease)}
.ca-c.on{color:var(--ink);text-decoration:none;font-weight:600}
.ca-edit{margin-left:auto;min-height:28px;padding:0 10px}
.ca-recent ul,.ca-full{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ca-recent .hint{margin:0;font-size:12.5px;color:var(--muted)}
.ca-a{display:flex;align-items:center;gap:8px;min-width:0;font-size:13px;animation:rise var(--t-med) var(--ease) both}
.ca-a .ca-at{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.ca-a time{flex:none;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.ca-a.bad .ca-at{color:var(--bad)}
.ca-all{display:inline-block;margin-top:8px;font-size:12.5px}
.ca-full{gap:2px}
.ca-full .ca-a{padding:8px 0;border-bottom:1px solid var(--border);align-items:flex-start}
.ca-full .ca-a:last-child{border-bottom:0}
.ca-full .ca-at{white-space:normal}
.ca-full .ca-at b{display:block;font-weight:600;color:var(--ink)}
.ca-full .ca-at small{display:block;margin-top:2px;font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.ca-btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding-top:12px;border-top:1px solid var(--border)}
.ca-card .acct-agents{border-top:0;padding-top:0}
.ca-dis{margin-left:auto;color:var(--bad)}
.ca-dis:hover:not(:disabled){background:color-mix(in srgb,var(--bad) 10%,transparent)}
.ca-foot{margin:16px 0 0;font-size:12.5px;color:var(--muted)}
.menu.ca-menu{min-width:280px;max-width:min(320px,calc(100vw - 24px));padding:8px 6px}
.ca-pop .mh{padding:4px 8px 6px}
.ca-pr{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px;border-radius:var(--r-md);cursor:pointer;transition:background-color var(--t-fast) var(--ease)}
.ca-pr:hover{background:var(--soft)}
.ca-pr span{display:grid;gap:2px}.ca-pr b{font-size:13.5px;font-weight:600}.ca-pr small{font-size:12px;color:var(--muted)}
.ca-pop .hint{margin:6px 8px 2px;font-size:12px;color:var(--muted);line-height:1.45}
@media (max-width:560px){.ca-edit,.ca-dis{margin-left:0}.ca-btns button{flex:1 1 auto;justify-content:center}}
@media (prefers-reduced-motion:reduce){.ca-a{animation:none}}
/* the agent's own AdsPower on its screen (1 Nov 2026): one quiet row under the screen's top bar */
.scr-ads{display:flex;align-items:center;gap:8px;padding:6px 14px;font-size:12px;border-bottom:1px solid var(--border);min-height:36px;animation:rise var(--t-med) var(--ease) both}
.scr-ads:empty{display:none}
.scr-ads>b{font-weight:600}
.scr-ads .scr-ads-tip{color:var(--muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.screen-float .scr-ads .scr-ads-tip{display:none}
.ads-grid{margin-top:8px}
.ads-sec{margin-top:28px}
.ads-sec h2{font-size:15px;margin:0 0 4px}
.help-set-row .hint{font-size:12.5px;color:var(--muted);line-height:1.45}.ha-item .txt p.err-line{color:var(--bad)}
.bk-head>div:first-child{flex:1 1 320px;min-width:0}
.bk-sub{display:block;margin-top:4px;font-size:12.5px;color:var(--muted);line-height:1.4}   /* a note under a Backups row (where the safety copy is), 1 Nov 2026 */
.rs-what{margin:6px 0 0;padding-left:18px;display:grid;gap:4px;font-size:13px;line-height:1.5;color:var(--ink-2)}

/* Abilities › Connections (connections.js, 1 Nov 2026): one row per connection, one side panel per row */
.cn-bar{gap:12px}.cn-bar .search{max-width:360px;min-width:200px}.cn-bar .tabs{margin:0}
.cn-list{padding:0;overflow:hidden}
.cn-head{display:grid;grid-template-columns:minmax(0,1fr) 170px 150px 140px;gap:16px;padding:10px 22px;font-size:11.5px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border)}
.cn-row{grid-template-columns:minmax(0,1fr) 170px 150px 140px;transition:background var(--t-fast) var(--ease)}
.cn-head+.cn-rows .cn-row:first-child{border-top:0}
.cn-row:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.cn-row .txt b .chip{font-size:11px;padding:1px 7px;margin-left:4px;font-weight:500;vertical-align:1px}
.cn-own,.cn-who,.cn-st{display:flex;align-items:center;gap:6px;min-width:0}
.cn-lbl{display:none}
.cn-o{display:inline-flex;align-items:center;gap:7px;min-width:0;font-size:13px;color:var(--ink-2)}
.cn-o span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cn-o.none{color:var(--muted)}
.cn-n{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.cn-foot{margin:12px 2px 0}
.cn-needs-slot:empty{display:none}.cn-needs-slot .alert{margin-bottom:14px}
/* by the list's own width, not the window's (1 Nov 2026: with the agent's screen open beside it the list was squeezed
   while the window stayed wide, and names broke one letter per line); .card.list and .page report their width */
@container (max-width:860px){.cn-head,.cn-row{grid-template-columns:minmax(0,1fr) 140px 110px 120px}}
/* narrow (a phone, or a squeezed list): the name on its own line, owner, who can use and the state under it */
@container (max-width:700px){
 .cn-head{display:none}
 .cn-row{grid-template-columns:auto auto 1fr;grid-template-areas:"m m m" "o w s";row-gap:10px;column-gap:14px;padding:14px 16px}
 .cn-row .main-c{grid-area:m}.cn-row .cn-own{grid-area:o}.cn-row .cn-who{grid-area:w}.cn-row .cn-st{grid-area:s;justify-content:flex-end}
 .cn-row .cn-own,.cn-row .cn-who{padding-left:52px}.cn-row .cn-who{padding-left:0}
 .cn-bar .search{max-width:none;flex-basis:100%}.cn-bar .tabs{overflow-x:auto;max-width:100%;scrollbar-width:none}
}
/* the side panel */
.cn-drawer .drawer-body{padding:20px 22px}
.cn-p.cn-in>*{animation:rise var(--t-med) var(--ease) both}
.cn-p.cn-in>*:nth-child(2){animation-delay:40ms}.cn-p.cn-in>*:nth-child(3){animation-delay:80ms}.cn-p.cn-in>*:nth-child(4){animation-delay:120ms}.cn-p.cn-in>*:nth-child(n+5){animation-delay:160ms}
.cn-top{display:flex;gap:14px;align-items:flex-start}
.cn-top .logo,.cn-top .ic{width:44px;height:44px;flex:none}
.cn-top-t{min-width:0;flex:1}
.cn-top-t p{margin:2px 0 0;color:var(--ink-2);font-size:13.5px;line-height:1.45}
.cn-top-st{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.cn-why,.cn-note{display:flex;gap:6px;align-items:flex-start;margin-top:8px!important}
.cn-alert .alert{margin:16px 0 0}
.cn-sec{margin-top:22px;padding-top:18px;border-top:1px solid var(--border)}
.cn-sec h3{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--ink);display:flex;align-items:baseline;gap:8px}
.cn-sec h3 small{font-weight:400}
.cn-how{margin:-4px 0 10px!important}
.cn-lines{display:grid;gap:2px}
.cn-line{display:flex;align-items:center;gap:12px;padding:8px 0;min-height:48px}
.cn-line+.cn-line{border-top:1px solid var(--border)}
.cn-line.dim .cn-lt b{color:var(--muted)}
.cn-line .ic{width:30px;height:30px;border-radius:50%;background:var(--soft);display:grid;place-items:center;color:var(--ink-2);flex:none}
.cn-lt{flex:1;min-width:0;display:flex;flex-direction:column}
.cn-lt b{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cn-lt small{font-size:12.5px;color:var(--muted);line-height:1.35}
.cn-lv{display:inline-flex;align-items:center;gap:4px;min-height:34px;padding:0 10px 0 12px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--ink);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.cn-lv:hover{border-color:var(--blue-2);background:var(--soft-2)}
.cn-lv.off{color:var(--muted)}
.cn-lv svg{color:var(--muted)}
.cn-rm{width:34px;min-height:34px;height:34px;padding:0;color:var(--muted)}
.cn-rm:hover{color:var(--bad)}
.cn-addag{margin-top:10px}
.cn-recent{list-style:none;margin:0;padding:0;display:grid;gap:0}
.cn-recent .ca-a{padding:7px 0;align-items:flex-start;animation:none}
.cn-recent .ca-a+.ca-a{border-top:1px solid var(--border)}
.cn-recent .ca-at{white-space:normal;display:flex;flex-direction:column}
.cn-recent .ca-at b{font-weight:500;color:var(--ink)}
.cn-recent .ca-at small{font-size:12px;color:var(--muted)}
.cn-btns{display:flex;flex-wrap:wrap;gap:8px}
.cn-dis{color:var(--bad)}
.cn-signst{margin-top:10px!important}
.cn-for{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cn-for .sel-btn{display:inline-flex;align-items:center;gap:8px;width:auto}
.cn-cat .row{padding:12px 16px}
.cn-cat .row .txt span{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
@media (prefers-reduced-motion:reduce){.cn-p.cn-in>*{animation:none}}
.restore-note{border-color:color-mix(in srgb,var(--blue) 30%,var(--border));background:color-mix(in srgb,var(--blue) 6%,var(--surface))}.restore-note>svg{color:var(--blue);animation:spin 1.6s linear infinite}

/* ---------- one home for each thing (1 Nov 2026): the model line, If an account fails, Who can message per channel ---------- */
.model-line{display:flex;align-items:center;gap:10px;margin:14px 0 2px;padding:10px 12px 10px 14px;border:1px solid var(--border);border-radius:14px;font-size:13.5px;color:var(--ink-2)}
.model-line>svg{flex:none;color:var(--muted)}.model-line>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.model-line b{color:var(--ink);font-weight:600}.model-line .ghost{flex:none}
.um-list+.model-line,.model-line+.um-list{margin-top:12px}
.if-fails .if-h{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;margin:18px 0 4px;color:var(--ink)}.if-fails .if-h svg{color:var(--muted);flex:none}
.if-fails .sub+.if-h{margin-top:10px}.if-fails .if-p{margin:0 0 10px;font-size:13px;line-height:1.5}
.fb-list{display:grid;gap:2px}.fb-list>.hint{font-size:13px;line-height:1.5}.fb-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--border);min-width:0}.fb-row:first-child{border-top:0}
.fb-row>b{font-size:13.5px;font-weight:600;flex:none;min-width:96px}.fb-chain{display:flex;align-items:center;gap:4px;flex-wrap:wrap;min-width:0;color:var(--muted)}.fb-row small{margin-left:auto;color:var(--muted);font-size:12px}
.fb-keys{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);font-size:13px;color:var(--ink-2)}.fb-keys>svg{flex:none;color:var(--muted)}.fb-keys>span{flex:1;min-width:0}.fb-keys .ghost{flex:none}
.pp-ch{margin-top:14px}.pp-ch+.pp-ch{margin-top:18px}
.pp-head{display:flex;align-items:center;gap:10px;padding:0 0 6px;flex-wrap:wrap}.pp-head .logo{width:26px;height:26px;border-radius:8px;padding:4px;font-size:12px;flex:none;display:grid;place-items:center;color:#fff;font-weight:700}
.pp-head>b{font-size:14px;font-weight:600}.pp-head .acc-from{margin:0}
.pp-row{display:flex;align-items:center;gap:12px;padding:10px 0 10px 4px;border-top:1px solid var(--border);min-width:0}
.pp-row>.ic{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--soft-2);color:var(--ink-2);flex:none}.pp-row>.ic.warn{color:var(--warn,#b45309)}
.pp-row>.txt{flex:1;min-width:0;display:grid;gap:2px}.pp-row>.txt b{font-size:13.5px;font-weight:600;overflow-wrap:anywhere}.pp-row>.txt>span{font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}.pp-row>.ghost{flex:none}
.ch-who{display:flex;align-items:center;gap:6px;margin-top:14px}
.ash-add select:first-child{flex:1;min-width:0}
@media (max-width:760px){.fb-row{flex-wrap:wrap}.fb-row small{margin-left:0}.model-line{flex-wrap:wrap}.model-line>span{white-space:normal}}
.pp-pol{display:flex;align-items:flex-start;gap:7px;margin:0 0 6px;font-size:12.5px;color:var(--ink-2);line-height:1.45}.pp-pol svg{flex:none;margin-top:2px;color:var(--muted)}.pp-pol.pol-anyone svg{color:var(--warn,#b45309)}
.pp-head .ic.logo{background:var(--soft-2);color:var(--ink-2);border:1px solid var(--border)}.pp-none{margin:0;padding:10px 0 2px 4px;border-top:1px solid var(--border);font-size:13px;color:var(--muted)}
/* Usage at phone width (1 Nov 2026): the day tabs get their own row, currency and Refresh share the next; By agent drops Sessions so the cost stays in view */
@media (max-width:560px){.u-bar{justify-content:flex-start}.u-bar .tabs{order:-1;flex:1 1 100%;display:flex}.u-bar .tabs>button{flex:1}.u-bar>.u-pick.icon{margin-left:auto}[data-tsort=uagent] th:nth-child(2),[data-tsort=uagent] td:nth-child(2),[data-tsort=uskill] th:nth-child(3),[data-tsort=uskill] td:nth-child(3){display:none}[data-tsort=uagent] .uname{min-width:0}}
.cn-more{display:block;width:100%;padding:12px;border-top:1px solid var(--border);border-radius:0 0 var(--radius-lg) var(--radius-lg);color:var(--muted);font-size:13px;transition:color .15s,background .15s}.cn-more:hover{color:var(--ink,inherit);background:var(--soft)}   /* Connections: the rest of a long list, 1 Nov 2026 */
.rr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:6px 0 14px}.rr-f{display:flex;flex-direction:column;gap:4px;margin:0}.rr-f small{font-size:11.5px;color:var(--muted)}.rr-f input{width:100%}
.rr-run{grid-template-columns:1fr 1fr .8fr 3fr}.rr-run:not([data-href]){cursor:default}
@media (max-width:600px){.rr-run{grid-template-columns:1fr 1fr}.rr-run span:nth-child(3){display:none}}
@media (max-width:600px){.rr-run .m{display:block;grid-column:1/-1}}
/* System › Health: each agent's health (health-page.js AgentHealth) */
.ah-sum{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin:0 0 12px;font-size:13.5px;color:var(--muted)}.ah-sum b{color:var(--ink);font-weight:600}.ah-sum svg{flex:none}.ah-sum.ok svg{color:var(--ok)}.ah-sum.bad svg{color:var(--bad)}
.ah-list{margin-bottom:22px}.ah-list .row:first-child{border-top:0}.ah-row{grid-template-columns:minmax(0,1fr)}.ah-row .main-c{align-items:flex-start}.ah-row .txt{flex:1}
.ah-row .txt>span{white-space:normal}
.ah-dot{width:9px;height:9px;border-radius:50%;flex:none;margin-top:7px;background:var(--bad);box-shadow:0 0 0 4px color-mix(in srgb,var(--bad) 14%,transparent)}.ah-dot.ok{background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 14%,transparent)}
.ah-probs{display:grid;gap:10px;margin-top:12px}.ah-p{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start}.ah-row .ah-p b{display:block;font-size:13.5px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.ah-row .ah-p p{margin:2px 0 8px;font-size:13px;color:var(--muted);line-height:1.45;overflow-wrap:anywhere}.ah-p .bn-ic{font-style:normal;width:28px;height:28px;border-radius:9px}
@media (max-width:640px){.ah-list .row{padding:14px 16px}}
/* Kirimdev drafts and the team group form (kirimdev-page.js) */
.kd-draft .kd-text{white-space:pre-wrap;overflow:visible;max-height:none;color:var(--ink)}
.kd-draft{padding-left:46px}
.kd-line .txt>span{white-space:normal;overflow:visible}
.tg-box .drawer-body label,.drawer.pop label[for^="tg-"]{display:block;margin-top:10px}
/* Edit agent › History: versions of an agent's instructions, rewrites waiting for approval, what disagrees (5 Nov 2026) */
.ih-prop,.ih-flags{padding:14px 16px;margin:0 0 12px}.ih-prop{border-color:color-mix(in srgb,var(--warn) 45%,var(--border))}
.ih-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.ih-row b{display:flex;align-items:center;gap:7px;font-size:14px}
.ih-flags .ih-row b svg{color:var(--warn)}.ih-flags .ih-row b.ih-ok svg{color:var(--ok)}
.ih-why{margin:8px 0 2px;font-size:13.5px;line-height:1.5}.ih-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-top:10px}
.ih-flag{border-top:1px solid var(--border);margin-top:10px;padding-top:10px}.ih-flag p{margin:0 0 4px;font-size:13.5px}.ih-flag ul{margin:4px 0 0;padding-left:18px;font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.ih-list{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.ih-ver+.ih-ver{border-top:1px solid var(--border)}
.ih-head{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:10px 14px;border:0;border-radius:0;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:background .15s}
.ih-head:hover,.ih-ver.open .ih-head{background:var(--soft)}
.ih-vn{flex:none;min-width:26px;height:22px;padding:0 6px;border-radius:11px;background:var(--soft-2);color:var(--ink-2);font-size:11.5px;font-weight:600;display:grid;place-items:center}
.ih-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.ih-t b{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.ih-t small{font-size:12px;color:var(--muted)}
.ih-n{flex:none;font-size:12px;font-variant-numeric:tabular-nums}.ih-plus{color:var(--ok)}.ih-minus{color:var(--bad)}
.ih-ver .ih-body{padding:4px 14px 14px;animation:ihIn .22s cubic-bezier(.2,.7,.2,1)}.ih-prop .ih-body{margin-top:10px;animation:ihIn .22s cubic-bezier(.2,.7,.2,1)}
@keyframes ihIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ih-ver .ih-body,.ih-prop .ih-body{animation:none}}
.ih-diff{border:1px solid var(--border);border-radius:var(--radius-sm);font:12px/1.55 var(--font-mono,ui-monospace,monospace);max-height:420px;overflow:auto}
.ih-key{position:sticky;top:0;display:flex;gap:14px;padding:6px 10px;background:var(--card,var(--soft));border-bottom:1px solid var(--border);font:600 11.5px var(--font-sans,inherit)}
.ih-k-del{color:var(--bad)}.ih-k-add{color:var(--ok)}
.ih-l{display:flex;gap:8px;padding:0 10px;white-space:pre-wrap;word-break:break-word}.ih-m{flex:none;width:10px;color:var(--muted)}
.ih-add{background:color-mix(in srgb,var(--ok) 13%,transparent)}.ih-add .ih-m{color:var(--ok)}
.ih-del{background:color-mix(in srgb,var(--bad) 11%,transparent);color:var(--ink-2);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--bad) 55%,transparent)}.ih-del .ih-m{color:var(--bad)}
.ih-gap{padding:3px 10px;color:var(--muted);font:11.5px var(--font-sans,inherit);background:var(--soft)}
.ih-flaghint{display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:var(--warn);margin:2px 0 6px}
@media (max-width:560px){.ih-head{gap:9px;padding:10px 12px}.ih-row{flex-wrap:wrap}}