/* CloudOS shell — flag-gated redesign (Phase HUB-UX-04). All selectors are scoped under .cos-root so this NEVER affects the legacy UI. THEMING (light + dark): use --cos-* tokens for background/border/text, never raw colors. Theme-specific values go under .cos-root.cos-dark and the base line gets a trailing theme-ok comment. Enforced by `npm run lint:theme` (pre-commit hook). See .claude/rules/cloudos-theming.md. */ .cos-root { /* surfaces */ --cos-app-bg: #e9ebef; --cos-tabstrip-bg: #f6f8fb; --cos-surface: #ffffff; --cos-surface-2: #f8fafc; --cos-border: var(--cos-line-2); --cos-border-strong: var(--cos-line-1); /* neutral hierarchy: 4 ink shades (text) + 3 line shades (borders) direct attention - darker = look here, lighter = supporting. Themes override these tokens. */ --cos-ink-1: #0c0e11; --cos-ink-2: #30363d; --cos-ink-3: #636b74; --cos-ink-4: #6b7280; /* rank 52: was #9aa2ab (~2.6:1) - darkened to ~4.6:1 on white for WCAG AA */ --cos-line-1: #c9ced6; --cos-line-2: #e3e6eb; --cos-line-3: #eff1f4; /* text (mapped onto the ink scale) */ --cos-text: var(--cos-ink-1); --cos-text-2: var(--cos-ink-3); --cos-muted: var(--cos-ink-4); /* accent */ --cos-accent: #3b82f6; --cos-accent-hover: #2563eb; --cos-accent-soft: #e8f0ff; --cos-accent-softer: #f1f6ff; --cos-online: #22c55e; /* multi-color accents (our theme) */ --cos-green: #22c55e; --cos-indigo: #6366f1; --cos-purple: #8b5cf6; --cos-orange: #f59e0b; --cos-red: #ef4444; --cos-cyan: #06b6d4; --cos-slate: #64748b; /* shape */ --cos-radius-tile: 20px; --cos-radius-card: 12px; --cos-radius-ctl: 8px; --cos-shadow-tile: 0 0 0 1px rgba(15,23,42,.03); /* flat: no cast shadow, background stays one shade around tiles */ --cos-shadow-card: 0 1px 2px rgba(15,23,42,.04); --cos-shadow-pop: 0 12px 40px rgba(15,23,42,.16); position: fixed; /* rank 9: track the VISUAL viewport height (set by a visualViewport listener in shell.js) so an on-screen keyboard shrinks the shell instead of overlaying the composer. Falls back to 100dvh. */ top: 0; left: 0; right: 0; height: var(--cos-vvh, 100dvh); z-index: 2147483000; display: flex; flex-direction: column; background: var(--cos-app-bg); color: var(--cos-text); font-family: -apple-system, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; overflow: hidden; } .cos-root *, .cos-root *::before, .cos-root *::after { box-sizing: border-box; } .cos-root button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; } /* ---------- Tab strip ---------- */ .cos-tabstrip { flex: 0 0 auto; height: 46px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: var(--cos-tabstrip-bg); border-bottom: 0; /* no underline under inactive tabs; active tab connects to content below */ -webkit-app-region: drag; /* draggable as title bar in the desktop client */ } .cos-tabstrip > * { -webkit-app-region: no-drag; } .cos-traffic { display: flex; gap: 8px; margin-right: 8px; } .cos-traffic i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; } .cos-traffic .r { background: #ff5f57; } .cos-traffic .y { background: #febc2e; } .cos-traffic .g { background: #28c840; } /* theme-ok */ .cos-brand-tx { color: var(--cos-text); } /* (uib45g) tabs shrink to a readable floor (min-width below), then the row side-scrolls instead of clipping */ .cos-tabs { display: flex; align-items: flex-end; align-self: stretch; gap: 0; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .cos-tabs::-webkit-scrollbar { display: none; } /* Chrome-style tabs: transparent inactive tabs with hairline separators, white floating active tab */ .cos-tab { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 9px; color: #3c4043; max-width: 220px; min-width: 118px; white-space: nowrap; position: relative; margin: 0 1px; transition: background .1s, color .1s; } /* hairline separator between adjacent inactive tabs (Chrome look) */ .cos-tab:not(.active) + .cos-tab:not(.active)::before { content: ''; position: absolute; left: -1px; top: 50%; transform: translateY(-50%); width: 1px; height: 18px; background: rgba(0,0,0,.14); } .cos-tab:hover { background: rgba(255,255,255,.55); } /* theme-ok */ .cos-tab:hover + .cos-tab::before, .cos-tab.active + .cos-tab::before { background: transparent; } /* Chrome-style: active tab is rounded only on top and merges into the content below */ .cos-root .cos-tab.active { background: var(--cos-surface); color: #202124; border-radius: 10px 10px 0 0; margin-bottom: -1px; padding-bottom: 1px; box-shadow: 0 -1px 3px rgba(0,0,0,.06); } /* theme-ok */ .cos-tab .ico { width: 16px; height: 16px; flex: 0 0 auto; opacity: .95; } .cos-tab .ico.tab-brand svg { width: 15px; height: 15px; } /* brand mark ships 20x20 - size to tab icons */ .cos-tab .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 12.5px; } .cos-tab .x { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; opacity: .6; flex: 0 0 auto; } .cos-tab .x:hover { background: rgba(0,0,0,.12); opacity: 1; } .cos-tab .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cos-accent); } /* icon-only new-tab button; align-self:flex-end + margin-bottom:3px lands its center at y=22 in the 38px strip (h26 button), on the tab row (tabs y~=22; inactive 21.5, active 22.5) and level with the right cluster once it too is nudged to y=22 (translateY 3px, below). MEASURED in a preview harness with the real shell.css, not guessed. 5px sat it at y=20 (2px high). */ .cos-newtab { display: flex; align-items: center; justify-content: center; align-self: flex-end; width: 30px; height: 28px; padding: 0; margin: 0 0 3px 4px; border-radius: 8px; color: #3c4043; font-weight: 600; } .cos-newtab:hover { background: rgba(255,255,255,.6); } /* theme-ok */ .cos-tabstrip-spacer { flex: 1 1 auto; } .cos-addtile { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border-radius: 9px; border: 1px solid var(--cos-border-strong); color: var(--cos-text-2); font-weight: 600; background: var(--cos-surface); } .cos-addtile:hover { border-color: var(--cos-accent); color: var(--cos-accent); } /* crowded tab strip (toggled by recomputeStripFit): New Tab / Add Page / Add Tile collapse to icon-only, tooltip via title */ .cos-root.cos-strip-compact .cos-newtab span, .cos-root.cos-strip-compact .cos-addtile span { display: none; } .cos-root.cos-strip-compact .cos-newtab { padding: 0; width: 32px; gap: 0; justify-content: center; flex: 0 0 auto; } .cos-root.cos-strip-compact .cos-addtile { padding: 0; width: 34px; gap: 0; justify-content: center; flex: 0 0 auto; } .cos-iconbtn { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--cos-text-2); } .cos-iconbtn:hover { background: rgba(15,23,42,.06); color: var(--cos-text); } /* (uib43) bot button on the top right of file/folder/terminal/remote views - opens the agent in that tile */ .cos-tilebot { color: var(--cos-accent); flex: 0 0 auto; } .cos-tilebot:hover { background: color-mix(in srgb, var(--cos-accent) 14%, transparent); color: var(--cos-accent); } .cos-termhead .cos-tilebot { width: 26px; height: 26px; margin: -3px 0; } /* keep the slim terminal/remote header height */ .cos-divider { width: 1px; height: 22px; background: var(--cos-border-strong); margin: 0 4px; } /* Chrome-style tabs + newtab are bottom-aligned in the strip, so the true-centered right-side cluster (Add Page, Add Tile, divider, Sign up/account, ...) needs a downward nudge to line up with the tab row. A preview harness measured 3px as exact, but the LIVE app renders the cluster ~2px high there. Live tuning (user-reported 2026-07-05): 4px/5px too low, 2px centers the cluster. transform = exact px; a margin would only move ~half because align-items:center centers the margin box. */ .cos-tabstrip > .cos-tabstrip-spacer ~ * { transform: translateY(2px); } /* ---------- Tile area ---------- */ .cos-tilearea { flex: 1 1 auto; display: flex; gap: 10px; padding: 10px; min-height: 0; } .cos-tile { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; background: var(--cos-surface); border: 1px solid var(--cos-border); border-radius: var(--cos-radius-tile); box-shadow: var(--cos-shadow-tile); overflow: hidden; position: relative; } /* address bar */ .cos-addr { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 11px 12px; border-bottom: 1px solid var(--cos-border); container: tilehead / inline-size; } .cos-addr .nav { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; } .cos-addr > .cos-iconbtn { flex: 0 0 auto; } .cos-omni { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 14px; border-radius: 999px; background: var(--cos-surface-2); border: 1px solid var(--cos-border); color: var(--cos-muted); } .cos-omni:focus-within { border-color: var(--cos-accent); background: #fff; box-shadow: 0 0 0 3px var(--cos-accent-soft); } /* theme-ok */ .cos-omni svg { flex: 0 0 auto; } .cos-omni input { flex: 1 1 auto; min-width: 0; border: none; outline: none; background: none; color: var(--cos-text); font: inherit; } /* (uib45a) narrow tiles shed head chrome progressively so the right-side controls (expand/close) never clip */ @container tilehead (max-width: 470px) { .cos-addr [data-navfwd] { display: none; } } @container tilehead (max-width: 420px) { .cos-addr [data-navback] { display: none; } } /* (V11A) reload STAYS: the per-view Refresh chip is gone, so this is the only re-pull */ @container tilehead (max-width: 350px) { .cos-addr > [data-drawer] { display: none; } .cos-addr { gap: 6px; padding: 9px 8px; } } @container tilehead (max-width: 240px) { .cos-omni { padding: 0 10px; gap: 6px; } .cos-omni > svg { display: none; } } .cos-omni input::placeholder { color: var(--cos-muted); } /* tile body = drawer + main */ .cos-tilebody { flex: 1 1 auto; display: flex; min-height: 0; } /* ---------- Drawer ---------- */ .cos-drawer { flex: 0 0 226px; border-right: 1px solid var(--cos-border); display: flex; flex-direction: column; overflow-y: auto; padding: 10px 9px; gap: 3px; background: var(--cos-surface); } .cos-drawer.collapsed { flex-basis: 0; width: 0; padding: 0; border: none; overflow: hidden; } .cos-drawer-scrim { display: none; position: absolute; inset: 0; z-index: 44; background: rgba(0,0,0,.4); } /* phone-only backdrop (shown via the media query below); inert on desktop */ .cos-drawer-sectlabel { font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--cos-muted); padding: 12px 8px 6px; } .cos-drawer-item { display: flex; align-items: center; gap: 7px; padding: 5px 9px; border-radius: 8px; color: var(--cos-text); cursor: pointer; font-size: 13.5px; } .cos-drawer-item:hover { background: var(--cos-surface-2); } .cos-drawer-item.cur { background: var(--cos-surface-2); font-weight: 600; } /* the favorite/recent that's open in the current tab */ .cos-drawer-item .ico { width: 16px; height: 16px; flex: 0 0 auto; color: var(--cos-text-2); } .cos-drawer-item .ico svg { width: 16px; height: 16px; } /* unify every drive-tree / machine-sub icon to the same 16px as recents & favorites (chevrons excluded) */ .cos-drawer-sub > svg, .cos-drawer-sub .fico svg { width: 16px; height: 16px; flex: 0 0 auto; } .cos-drawer-item .lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Favorites / Recents lists: height tracks content from 1 row up to ~6 rows, then the list scrolls inside itself. flex:0 0 auto stops the drawer's column flex from squishing the list below its content height. */ .cos-drawer-reclist { flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; max-height: 178px; overflow-y: auto; overflow-x: hidden; } .cos-drawer-reclist > * { flex: 0 0 auto; } .cos-drawer-sub { display: flex; align-items: center; gap: 8px; padding: 5px 9px; line-height: normal; border-radius: 8px; color: var(--cos-text-2); font-size: 13.5px; cursor: pointer; min-width: 0; } .cos-drawer-sub:hover { background: var(--cos-surface-2); } /* secondary button (scoped under .cos-drawer to outrank the .cos-root button reset). the primary blue CTA is now .cos-newbtn above, so this reads as a quieter action. */ .cos-drawer .cos-newconn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 38px; margin: 10px 4px 4px; border-radius: var(--cos-radius-ctl); background: var(--cos-surface-2); color: var(--cos-ink-1); border: 1px solid var(--cos-line-2); font-weight: 600; } .cos-drawer .cos-newconn:hover { background: var(--cos-surface); border-color: var(--cos-line-1); } /* drawer primary "+ New" create button + dropdown menu (themes via tokens). button selectors are scoped under .cos-newwrap so they outrank the .cos-root button reset. */ .cos-newwrap { position: relative; margin: 2px 4px 8px; } .cos-newwrap .cos-newbtn { display: flex; align-items: center; gap: 9px; width: 100%; height: 34px; padding: 0 8px; border-radius: 9px; background: transparent; color: var(--cos-text); font-weight: 600; } .cos-newwrap .cos-newbtn:hover { background: var(--cos-surface-2); } .cos-newwrap .cos-newbtn svg { flex: 0 0 auto; opacity: .9; } .cos-newmenu { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40; padding: 5px; background: var(--cos-surface); border: 1px solid var(--cos-line-2); border-radius: var(--cos-radius-card); box-shadow: 0 10px 28px rgba(0,0,0,.16); } .cos-newwrap.open .cos-newmenu { display: block; } .cos-newwrap .cos-newmenu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 9px; border-radius: var(--cos-radius-ctl); color: var(--cos-ink-1); font-size: 13.5px; text-align: left; } .cos-newwrap .cos-newmenu-item:hover { background: var(--cos-surface-2); } .cos-newwrap .cos-newmenu-item .ico { width: 18px; height: 18px; flex: 0 0 auto; color: var(--cos-ink-3); display: inline-flex; } .cos-newmenu-sep { height: 1px; margin: 5px 6px; background: var(--cos-line-2); } /* small "+" add menu on the Cloud Drive row (and machines) */ .cos-drvwrap { margin: 0; } .cos-drvwrap .cos-drvadd { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--cos-muted); cursor: pointer; } .cos-drvwrap .cos-drvadd:hover, .cos-drvwrap.open .cos-drvadd { background: var(--cos-surface); color: var(--cos-accent); } /* "Connect a machine" popover - anchored above the demo machine row, same action cards as the home */ .cos-connpop-bd { position: fixed; inset: 0; z-index: 199; } .cos-connpop { position: fixed; z-index: 200; width: 230px; max-width: calc(100vw - 16px); background: var(--cos-surface); border: 1px solid var(--cos-line-1); border-radius: 11px; box-shadow: var(--cos-shadow-pop); padding: 10px; text-align: center; } .cos-connpop b { display: block; font-size: 12.5px; color: var(--cos-ink-1); } .cos-connpop i { font-style: normal; display: block; font-size: 11px; color: var(--cos-ink-3); margin: 2px 0 8px; } .cos-connpop .x { position: absolute; top: 7px; right: 8px; color: var(--cos-ink-4); padding: 2px; cursor: pointer; } .cos-connpop .cos-connectpop-btns .cos-primarybtn, .cos-connpop .cos-connectpop-btns .cos-secondarybtn { min-height: 32px; font-size: 11.5px; padding: 5px 7px; } /* in-app text prompt modal (cosPrompt) - replaces window.prompt for Electron compatibility */ .cos-promptov { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: rgba(8, 11, 16, .42); } .cos-promptbox { width: 340px; max-width: calc(100vw - 32px); background: var(--cos-surface); border: 1px solid var(--cos-line-1); border-radius: 13px; box-shadow: var(--cos-shadow-pop); padding: 16px; } /* (connect1e) inline Connect-a-tool modal - wider than a prompt, scrolls if tall */ .cos-promptbox.cos-conntools { width: 560px; padding: 18px 18px 14px; } .cos-conntools-head { display: flex; align-items: center; gap: 8px; font-size: 15px; } .cos-conntools-head b { display: flex; align-items: center; gap: 7px; } .cos-conntools-head svg { fill: none; stroke: var(--cos-accent); stroke-width: 2; } .cos-conntools-x { margin-left: auto; width: 26px; height: 26px; display: grid; place-items: center; border: 0; background: transparent; color: var(--cos-ink-2); border-radius: 7px; cursor: pointer; } .cos-conntools-x:hover { background: var(--cos-surface-2); color: var(--cos-text); } .cos-conntools-x svg { fill: none; stroke: currentColor; stroke-width: 2.2; } .cos-conntools-sub { font-size: 12.5px; color: var(--cos-ink-2); margin: 6px 0 12px; line-height: 1.5; } .cos-conntools-rows { margin: 0; max-height: 52vh; overflow-y: auto; } .cos-conntools-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; } .cos-conntools-foot .grow { flex: 1; } /* (connect1e) onboarding "Connect your tools" step - service rows inside the wizard card */ .cos-wiz-connrows { margin: 10px 0 4px; display: flex; flex-direction: column; gap: 2px; } .cos-promptmsg { font-size: 13.5px; color: var(--cos-ink-1); margin-bottom: 10px; white-space: pre-wrap; } .cos-promptin { width: 100%; height: 36px; border: 1px solid var(--cos-border-strong); border-radius: 9px; padding: 0 11px; font: inherit; font-size: 13.5px; color: var(--cos-text); background: var(--cos-surface); outline: none; box-sizing: border-box; } .cos-promptin:focus { border-color: var(--cos-accent); } .cos-promptbtns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; } .cos-promptbtns button { height: 34px; padding: 0 15px; border-radius: 9px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } /* Scoped under .cos-promptbtns (two classes = specificity 0,2,0) so the button colors outrank the `.cos-root button { background:none; border:none }` reset (0,1,1) - otherwise the OK button renders as invisible white text on a transparent background. */ .cos-promptbtns .cos-promptcancel { background: var(--cos-surface-2); color: var(--cos-text-2); border: 1px solid var(--cos-border); } .cos-promptbtns .cos-promptok { background: var(--cos-accent); color: #fff; border: 1px solid var(--cos-accent); } .cos-promptbtns .cos-promptok:hover { filter: brightness(1.05); } .cos-promptbtns .cos-promptok-danger { background: var(--cos-red); color: #fff; border-color: var(--cos-red); } .cos-promptbtns .cos-promptok-danger:hover { filter: brightness(1.05); } .cos-promptbtns .cos-promptalt { background: var(--cos-accent-hover); color: #fff; border: 1px solid var(--cos-accent-hover); } .cos-promptbtns .cos-promptalt:hover { filter: brightness(1.08); } .cos-promptbtns .cos-promptok:focus-visible, .cos-promptbtns .cos-promptcancel:focus-visible, .cos-promptbtns .cos-promptalt:focus-visible { outline: 2px solid var(--cos-accent); outline-offset: 2px; } /* Move-to folder picker (rank 49) */ .cos-movebox { width: 420px; } .cos-move-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; font-size: 12px; margin-bottom: 8px; } .cos-move-crumb { background: none; border: 0; padding: 2px 5px; border-radius: 6px; color: var(--cos-accent); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; } .cos-move-crumb:hover { background: var(--cos-surface-2); } .cos-move-sep { color: var(--cos-muted); opacity: .6; } .cos-move-list { max-height: 260px; overflow-y: auto; border: 1px solid var(--cos-border); border-radius: 9px; } .cos-move-row { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 11px; background: none; border: 0; border-bottom: 1px solid var(--cos-line-1); font: inherit; font-size: 13px; color: var(--cos-ink-1); cursor: pointer; text-align: left; } .cos-move-row:last-child { border-bottom: 0; } .cos-move-row:hover { background: var(--cos-surface-2); } .cos-move-row .cos-move-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cos-move-row svg:last-child { opacity: .5; } /* (uib45c) machine file/folder picker: taller list, file rows, go-to-path row */ .cos-machbox .cos-move-list { max-height: 320px; min-height: 180px; } .cos-machbox .cos-mach-file svg:last-child { opacity: 1; } .cos-machbox .cos-move-row .fico { flex: 0 0 auto; display: grid; place-items: center; } .cos-mach-pathrow { display: flex; align-items: center; gap: 7px; margin-top: 8px; padding: 6px 10px; border: 1px solid var(--cos-border); border-radius: 8px; background: var(--cos-surface-2); color: var(--cos-muted); } .cos-mach-pathrow input { flex: 1 1 auto; min-width: 0; border: none; outline: none; background: none; color: var(--cos-text); font: inherit; font-size: 12.5px; } .cos-move-empty { padding: 16px 12px; font-size: 12.5px; color: var(--cos-muted); text-align: center; } /* version history panel (rank 23) */ .cos-verbox { width: 460px; } .cos-ver-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--cos-border); border-radius: 9px; } .cos-ver-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--cos-line-1); } .cos-ver-row:last-child { border-bottom: 0; } .cos-ver-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; } .cos-ver-meta b { font-size: 13px; color: var(--cos-ink-1); font-weight: 600; } .cos-ver-meta i { font-size: 11.5px; color: var(--cos-muted); font-style: normal; font-variant-numeric: tabular-nums; } .cos-ver-acts { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; } /* template preview modal (showTemplatePreview) */ .cos-mkt-prevbox { width: 560px; } .cos-mkt-prevpre { margin: 0 0 6px; padding: 10px; background: var(--cos-surface-2); border: 1px solid var(--cos-line-2); border-radius: 8px; font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 11.5px; color: var(--cos-ink-2); white-space: pre-wrap; word-break: break-word; max-height: 340px; overflow-y: auto; } .cos-mkt-prev { font-size: 11px; font-weight: 600; padding: 2px 8px; height: 24px; border-radius: 6px; cursor: pointer; background: var(--cos-surface-2); color: var(--cos-text-2); border: 1px solid var(--cos-border); margin-left: 5px; } .cos-mkt-prev:hover { background: var(--cos-surface); color: var(--cos-text); } /* always-on connect popup that sits on top of the Demo machine in the drawer (no machine connected) */ .cos-connpop-inline { margin: 8px 4px 6px; padding: 10px; background: var(--cos-surface); border: 1px solid var(--cos-line-1); border-radius: 11px; box-shadow: var(--cos-shadow-pop); text-align: center; } .cos-connpop-inline b { display: block; font-size: 12px; color: var(--cos-ink-1); } .cos-connpop-inline i { font-style: normal; display: block; font-size: 10.5px; color: var(--cos-ink-3); margin: 2px 0 8px; line-height: 1.35; } .cos-connpop-inline .cos-connectpop-btns { display: flex; flex-direction: column; gap: 6px; } .cos-connpop-inline .cos-connectpop-btns .cos-primarybtn, .cos-connpop-inline .cos-connectpop-btns .cos-secondarybtn { width: 100%; min-height: 32px; font-size: 11px; padding: 5px 8px; margin-top: 0; } /* machine actions as a compact row of colored icon buttons (Remote/Chat/Terminal/Files) */ .cos-msubrow { display: flex; gap: 6px; padding: 3px 8px 7px 28px; } .cos-msubrow .cos-msub { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0; border-radius: 7px; background: var(--cos-surface-2); border: 1px solid var(--cos-border); cursor: pointer; } .cos-msubrow .cos-msub:hover { background: var(--cos-surface); border-color: var(--cos-accent); } /* ---------- Main (Home) ---------- */ .cos-main { flex: 1 1 auto; overflow-y: auto; padding: 36px 28px 60px; container-type: inline-size; } .cos-home { max-width: 760px; margin: 0 auto; } .cos-clock { text-align: center; font-size: 64px; font-weight: 800; letter-spacing: -.03em; color: var(--cos-text); white-space: nowrap; } @container (max-width: 520px) { .cos-clock { font-size: 48px; } } .cos-greeting { text-align: center; color: var(--cos-text-2); font-size: 17px; margin-top: 2px; } .cos-omnibig { margin: 14px 0 6px; background: var(--cos-surface); border: 1px solid #a8c8f0; border-radius: var(--cos-radius-card); box-shadow: 0 0 8px rgba(66, 133, 244, 0.3); padding: 12px 16px; transition: border-color .2s ease, box-shadow .2s ease; } /* theme-ok */ /* (uib30) the container is the ONLY padding source - the row adds none (see 'gap' rule near EOF) */ .cos-omnibig:focus-within { border-color: #7fb0ec; box-shadow: 0 0 14px rgba(66, 133, 244, 0.42); } /* theme-ok */ .cos-omnibig-row { display: flex; align-items: center; gap: 12px; } /* (uib35) center +/mic on the taller input */ .cos-omnibig-row .plus { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: var(--cos-muted); } .cos-omnibig input { flex: 1 1 auto; border: none; outline: none; font-size: 19px; color: var(--cos-text); background: none; padding: 14px 0; } /* (uib35) match the textarea's taller type area */ .cos-omnibig input::placeholder { color: var(--cos-muted); } /* (uib30/32/34) compact footer. Right pad 5px: the chat glyph's INK then ends exactly on the mic ink's right edge above (box-align was 3px; +2px compensates the mic ink sitting deeper in its box). Left alignment is the rule below. */ .cos-omnibig-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; padding: 0 5.25px 0 6px; } /* (uib36) 5.25px: rasterized chat ink ends exactly on the mic ink */ /* (uib31/34) the first pill's icon left-aligns OPTICALLY with the + above: -14px aligns the svg boxes, +2.5px compensates the plus ink being inset deeper in its box than the harness logo ink (measured). */ .cos-omnibig-foot > .cos-cfgsel:first-child, .cos-omnibig-foot > .cos-pill:first-child { margin-left: -12px; } /* (uib36/43) -12 puts the logo ink exactly on the + ink (rasterized measurement). On the WRAPPER, not the pill: a negative margin on the pill shrank its max-width:100% cap and squeezed the chevron out of the padding. */ .cos-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 7px; color: var(--cos-text-2); font-weight: 500; } .cos-pill:hover { background: var(--cos-surface-2); } .cos-pill .chev { opacity: .5; } .cos-omnibig-foot .grow { flex: 1 1 auto; } .cos-model { color: var(--cos-text-2); font-weight: 500; display: inline-flex; align-items: center; gap: 8px; } .cos-eff { background: var(--cos-accent-soft); color: var(--cos-accent-hover); font-weight: 600; padding: 2px 8px; border-radius: 6px; font-size: 12px; } /* home input: + attach button + send-only-when-text */ .cos-root .cos-omnibig .cos-plusbtn { width: 24px; height: 24px; border-radius: 0; background: none; display: grid; place-items: center; color: var(--cos-muted); flex: 0 0 auto; margin-left: -2px; } .cos-root .cos-omnibig .cos-plusbtn:hover { background: none; color: var(--cos-text-2); } .cos-root .cos-omnibig .cos-sendbtn { display: none; } .cos-root .cos-omnibig.has-text .cos-sendbtn { display: grid; } /* row-2 config dropdowns (model / machine / folder / branch / worktree / interface) */ .cos-cfgsel { position: relative; display: inline-flex; } /* (uib21) show the FULL harness · model · effort · mode - no max-width cap, no ellipsis. The config row (.cos-omnibig-foot) is flex-wrap, so a wider pill just wraps the other controls below instead of overflowing. max-width:100% keeps it inside the composer on tiny screens. */ .cos-cfgpill { color: var(--cos-text); font-weight: 500; max-width: 100%; } .cos-cfgpill > span:not(.chev):not(.cos-agent-dot) { white-space: nowrap; } .cos-cfgmenu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; min-width: 200px; max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid var(--cos-border); border-radius: 10px; box-shadow: var(--cos-shadow-pop); padding: 5px; } /* theme-ok */ .cos-cfgmenu.cos-cfgmenu-wide { min-width: 256px; } .cos-cfgmenu.cos-cfgmenu-right { left: auto; right: 0; } .cos-cfgmenu[hidden] { display: none; } /* combined pickers: the popover holds several stacked lists side by side as columns (agent-config = harness|model|effort; run-on = machine|folder). */ /* (V4A) the menu box never scrolls as a whole - each COLUMN scrolls on its own (wheel over the harness list moves only the harness list, wheel over MODEL moves only MODEL) */ .cos-cfgmenu.cos-cfgmenu-cols { min-width: 0; max-height: 340px; padding: 6px; overflow: hidden; } .cos-cfgmenu-cols .cos-cfgcol.ac-agent { max-height: 326px; overflow-y: auto; } .cos-cfgmenu.cos-cfgmenu-cols2 { width: min(560px, calc(100vw - 16px)); } .cos-cfgmenu.cos-cfgmenu-cols3 { width: min(800px, calc(100vw - 16px)); } .cos-cfgmenu.cos-cfgmenu-cols4 { width: min(940px, calc(100vw - 16px)); } /* (b15s/uib17) AGENT | MODEL | EFFORT | MODE - wider so the API-key input + connect chips have room */ .cos-cfgcols { display: flex; gap: 4px; align-items: stretch; } /* (uib44) stretch, so the border-right column separators run the FULL menu height even when one column is short */ .cos-cfgcol { flex: 1 1 0; min-width: 0; } /* (uib17) AGENT holds the connect-machine chips and MODEL holds the API-key input+Save - give them the extra width; EFFORT/MODE are short single-word lists that stay narrow. */ .cos-cfgcol.ac-agent { flex: 1.7 1 0; } .cos-cfgcol.ac-model { flex: 1.7 1 0; } .cos-cfgcol.ac-effort { flex: 1 1 0; } .cos-cfgcol.ac-mode { flex: 1.25 1 0; } .cos-cfgcols > .cos-cfgcol:not(:last-child) { border-right: 1px solid var(--cos-border); padding-right: 4px; } .cos-cfgcols .cos-cfgmenu-item { gap: 7px; padding: 8px; } .cos-cfgcols .cos-cfgmenu-item > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .cos-cfgmenu-hint { padding: 8px; font-size: 12px; color: var(--cos-muted); } /* muted "· model · effort" suffix in the collapsed agent-config trigger (no icons, per spec) */ .cos-acsub { font-style: normal; font-weight: 500; color: var(--cos-text-2); } /* (uib24) narrow/touch: keep the multi-column popovers (harness|model|effort|mode, and machine|folder) SIDE BY SIDE and scroll sideways when they don't fit, instead of stacking vertically. The menu fills the viewport width and scrolls horizontally; each column keeps a usable min-width. */ @media (max-width: 640px), (pointer: coarse) { /* (uib24) pin the wide multi-column pickers as a viewport bottom-sheet: right-anchoring (right:0) a 100vw-wide menu under a LEFT-side pill shot it off the left edge (machine picker was unreachable) and past the bottom. Fixed + left/right/bottom keeps it on-screen; columns stay side-by-side and scroll sideways when they don't fit. !important beats the chat-composer's upward-flip anchoring. */ .cos-cfgmenu.cos-cfgmenu-cols2, .cos-cfgmenu.cos-cfgmenu-cols3, .cos-cfgmenu.cos-cfgmenu-cols4 { position: fixed !important; left: 8px !important; right: 8px !important; bottom: 8px !important; top: auto !important; width: auto; max-width: none; max-height: 62vh; overflow: auto; z-index: 200; -webkit-overflow-scrolling: touch; /* (uib28) edge-fade scroll hint: the columns don't shrink (flex:0 0 auto below) so the menu scrolls sideways with no affordance. Lea-Verou pure-CSS scroll shadow: the cover gradients (attachment:local) ride at the true content edges and mask the shadow when you're AT that edge; the radial shadows (attachment:scroll) stay pinned to the menu. Result: a fade on the RIGHT at the left end, BOTH sides mid-scroll, LEFT only at the right end. Cover = var(--cos-surface) = the menu bg in light AND dark. */ background-image: linear-gradient(to right, var(--cos-surface), transparent), linear-gradient(to left, var(--cos-surface), transparent), radial-gradient(farthest-side at 0 50%, var(--cos-scrollshadow, rgba(0,0,0,.22)), transparent), radial-gradient(farthest-side at 100% 50%, var(--cos-scrollshadow, rgba(0,0,0,.22)), transparent); background-position: left center, right center, left center, right center; background-size: 36px 100%, 36px 100%, 15px 100%, 15px 100%; background-repeat: no-repeat; background-attachment: local, local, scroll, scroll; } .cos-cfgmenu-cols .cos-cfgcols { flex-direction: row; gap: 4px; } .cos-cfgmenu-cols2 .cos-cfgcol { flex: 1 1 0; min-width: 150px; } .cos-cfgmenu-cols3 .cos-cfgcol, .cos-cfgmenu-cols4 .cos-cfgcol { flex: 0 0 auto; min-width: 138px; } .cos-cfgmenu-cols4 .cos-cfgcol.ac-effort { min-width: 108px; } .cos-cfgcols > .cos-cfgcol:not(:last-child) { border-right: 1px solid var(--cos-border); border-bottom: 0; padding-right: 4px; padding-bottom: 0; margin-bottom: 0; } } /* rank 85: on narrow / touch screens a 200-256px menu anchored left:0 under a wrapped right-side pill opens past the viewport and .cos-main's overflow-x:hidden clips it. Cap the width to the viewport and right-align so it stays on-screen. */ @media (max-width: 640px), (pointer: coarse) { .cos-cfgmenu { left: auto; right: 0; max-width: calc(100vw - 16px); } } .cos-cfgmenu-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border-radius: 8px; text-align: left; font-size: 13px; color: var(--cos-text); white-space: nowrap; } .cos-cfgmenu-item:hover { background: var(--cos-surface-2); } .cos-cfgmenu-item.sel { background: var(--cos-accent-softer); color: var(--cos-accent-hover); font-weight: 600; } /* (V4C) needs-a-key hint lives on the TEXT only - a half-opacity row washed out the brand icons (owner: "models icons look faded not good"); icons stay full-color, the label stays quiet */ .cos-cfgmenu-item.needkey span { font-style: italic; color: var(--cos-muted); } .cos-cfgmenu-item svg { color: var(--cos-text-2); flex: 0 0 auto; } /* (uib22k) per-model provider icon: the maker's real brand logo on a small white badge so both monochrome and color marks stay legible on light + dark themes. Logos embedded as isolated data URIs (no gradient-id collisions). Source: LobeHub AI icon set (MIT). */ .cos-modelicon { flex: 0 0 auto; width: 18px; height: 18px; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: contain; } /* (uib28b) mono brand marks (openai/xai/openrouter) ship fill="currentColor", which a background-image renders as BLACK (invisible on dark). Painted as masks instead: background-color: currentColor fills the mark with the surrounding text color, so one source reads on BOTH themes. */ .cos-mi-openai, .cos-mi-xai, .cos-mi-openrouter { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .cos-mi-anthropic { background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgc3R5bGU9ImZsZXg6bm9uZTtsaW5lLWhlaWdodDoxIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIxZW0iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHRpdGxlPkNsYXVkZTwvdGl0bGU+PHBhdGggZD0iTTQuNzA5IDE1Ljk1NWw0LjcyLTIuNjQ3LjA4LS4yMy0uMDgtLjEyOEg5LjJsLS43OS0uMDQ4LTIuNjk4LS4wNzMtMi4zMzktLjA5Ny0yLjI2Ni0uMTIyLS41NzEtLjEyMUwwIDExLjc4NGwuMDU1LS4zNTIuNDgtLjMyMS42ODYuMDYgMS41Mi4xMDMgMi4yNzguMTU4IDEuNjUyLjA5NyAyLjQ0OS4yNTVoLjM4OWwuMDU1LS4xNTctLjEzNC0uMDk4LS4xMDMtLjA5Ny0yLjM1OC0xLjU5Ni0yLjU1Mi0xLjY4OC0xLjMzNi0uOTcyLS43MjQtLjQ5MS0uMzY0LS40NjItLjE1OC0xLjAwOC42NTYtLjcyMi44ODEuMDYuMjI1LjA2MS44OTMuNjg2IDEuOTA4IDEuNDc2IDIuNDkxIDEuODMzLjM2NS4zMDQuMTQ1LS4xMDMuMDE5LS4wNzMtLjE2NC0uMjc0LTEuMzU1LTIuNDQ2LTEuNDQ2LTIuNDktLjY0NC0xLjAzMi0uMTctLjYxOWEyLjk3IDIuOTcgMCAwMS0uMTA0LS43MjlMNi4yODMuMTM0IDYuNjk2IDBsLjk5Ni4xMzQuNDIuMzY0LjYyIDEuNDE0IDEuMDAyIDIuMjI5IDEuNTU1IDMuMDMuNDU2Ljg5OC4yNDMuODMyLjA5MS4yNTVoLjE1OFY5LjAxbC4xMjgtMS43MDYuMjM3LTIuMDk1LjIzLTIuNjk1LjA4LS43Ni4zNzYtLjkxLjc0Ny0uNDkyLjU4NC4yOC40OC42ODUtLjA2Ny40NDQtLjI4NiAxLjg1MS0uNTU5IDIuOTAzLS4zNjQgMS45NDJoLjIxMmwuMjQzLS4yNDIuOTg1LTEuMzA2IDEuNjUyLTIuMDY0LjczLS44Mi44NS0uOTA0LjU0Ny0uNDMxaDEuMDMzbC43NiAxLjEyOS0uMzQgMS4xNjYtMS4wNjQgMS4zNDctLjg4MSAxLjE0Mi0xLjI2NCAxLjctLjc5IDEuMzYuMDczLjExLjE4OC0uMDIgMi44NTYtLjYwNiAxLjU0My0uMjggMS44NDEtLjMxNS44MzMuMzg4LjA5MS4zOTUtLjMyOC44MDctMS45NjkuNDg2LTIuMzA5LjQ2Mi0zLjQzOS44MTMtLjA0Mi4wMy4wNDkuMDYxIDEuNTQ5LjE0Ni42NjIuMDM2aDEuNjIybDMuMDIuMjI1Ljc5LjUyMi40NzQuNjM4LS4wNzkuNDg1LTEuMjE1LjYyLTEuNjQtLjM4OS0zLjgyOS0uOTEtMS4zMTItLjMyOWgtLjE4MnYuMTFsMS4wOTMgMS4wNjggMi4wMDYgMS44MSAyLjUwOSAyLjMzLjEyNy41NzgtLjMyMi40NTUtLjM0LS4wNDktMi4yMDUtMS42NTctLjg1MS0uNzQ3LTEuOTI2LTEuNjJoLS4xMjh2LjE3bC40NDQuNjQ5IDIuMzQ1IDMuNTIxLjEyMiAxLjA4LS4xNy4zNTMtLjYwOC4yMTMtLjY2OC0uMTIyLTEuMzc0LTEuOTI1LTEuNDE1LTIuMTY3LTEuMTQzLTEuOTQzLS4xNC4wOC0uNjc0IDcuMjU0LS4zMTYuMzctLjcyOS4yOC0uNjA3LS40NjEtLjMyMi0uNzQ3LjMyMi0xLjQ3Ni4zODktMS45MjQuMzE1LTEuNTMuMjg2LTEuOS4xNy0uNjMyLS4wMTItLjA0Mi0uMTQuMDE4LTEuNDM0IDEuOTY3LTIuMTggMi45NDUtMS43MjYgMS44NDUtLjQxNC4xNjQtLjcxNy0uMzcuMDY3LS42NjIuNDAxLS41ODkgMi4zODgtMy4wMzYgMS40NC0xLjg4Mi45My0xLjA4Ni0uMDA2LS4xNThoLS4wNTVMNC4xMzIgMTguNTZsLTEuMTMuMTQ2LS40ODctLjQ1Ni4wNjEtLjc0Ni4yMzEtLjI0MyAxLjkwOC0xLjMxMi0uMDA2LjAwNnoiIGZpbGw9IiNEOTc3NTciIGZpbGwtcnVsZT0ibm9uemVybyI+PC9wYXRoPjwvc3ZnPgo="); } .cos-mi-openai { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJjdXJyZW50Q29sb3IiIGZpbGwtcnVsZT0iZXZlbm9kZCIgaGVpZ2h0PSIxZW0iIHN0eWxlPSJmbGV4Om5vbmU7bGluZS1oZWlnaHQ6MSIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMWVtIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZT5PcGVuQUk8L3RpdGxlPjxwYXRoIGQ9Ik05LjIwNSA4LjY1OHYtMi4yNmMwLS4xOS4wNzItLjMzMy4yMzgtLjQyOGw0LjU0My0yLjYxNmMuNjE5LS4zNTcgMS4zNTYtLjUyMyAyLjExNy0uNTIzIDIuODU0IDAgNC42NjIgMi4yMTIgNC42NjIgNC41NjYgMCAuMTY3IDAgLjM1Ny0uMDI0LjU0N2wtNC43MS0yLjc1OWEuNzk3Ljc5NyAwIDAwLS44NTYgMGwtNS45NyAzLjQ3M3ptMTAuNjA5IDguOFYxMi4wNmMwLS4zMzMtLjE0My0uNTctLjQyOS0uNzM3bC01Ljk3LTMuNDczIDEuOTUtMS4xMThhLjQzMy40MzMgMCAwMS40NzYgMGw0LjU0MyAyLjYxN2MxLjMwOS43NiAyLjE4OSAyLjM3OCAyLjE4OSAzLjk0OCAwIDEuODA4LTEuMDcgMy40NzMtMi43NiA0LjE2M3pNNy44MDIgMTIuNzAzbC0xLjk1LTEuMTQyYy0uMTY3LS4wOTUtLjIzOS0uMjM4LS4yMzktLjQyOFY1Ljg5OWMwLTIuNTQ1IDEuOTUtNC40NzIgNC41OTEtNC40NzIgMSAwIDEuOTI3LjMzMyAyLjcxMi45MjhMOC4yMyA1LjA2N2MtLjI4NS4xNjYtLjQyOC40MDQtLjQyOC43Mzd2Ni44OTh6TTEyIDE1LjEyOGwtMi43OTUtMS41N3YtMy4zM0wxMiA4LjY1OGwyLjc5NSAxLjU3djMuMzNMMTIgMTUuMTI4em0xLjc5NiA3LjIzYy0xIDAtMS45MjctLjMzMi0yLjcxMi0uOTI3bDQuNjg2LTIuNzEyYy4yODUtLjE2Ni40MjgtLjQwNC40MjgtLjczN3YtNi44OThsMS45NzQgMS4xNDJjLjE2Ny4wOTUuMjM4LjIzOC4yMzguNDI4djUuMjMzYzAgMi41NDUtMS45NzQgNC40NzItNC42MTQgNC40NzJ6bS01LjYzNy01LjMwM2wtNC41NDQtMi42MTdjLTEuMzA4LS43NjEtMi4xODgtMi4zNzgtMi4xODgtMy45NDhBNC40ODIgNC40ODIgMCAwMTQuMjEgNi4zMjd2NS40MjNjMCAuMzMzLjE0My41NzEuNDI4LjczOGw1Ljk0NyAzLjQ0OS0xLjk1IDEuMTE4YS40MzIuNDMyIDAgMDEtLjQ3NiAwem0tLjI2MiAzLjljLTIuNjg4IDAtNC42NjItMi4wMjEtNC42NjItNC41MTkgMC0uMTkuMDI0LS4zOC4wNDctLjU3bDQuNjg2IDIuNzFjLjI4Ni4xNjcuNTcxLjE2Ny44NTYgMGw1Ljk3LTMuNDQ4djIuMjZjMCAuMTktLjA3LjMzMy0uMjM3LjQyOGwtNC41NDMgMi42MTZjLS42MTkuMzU3LTEuMzU2LjUyMy0yLjExNy41MjN6bTUuODk5IDIuODNhNS45NDcgNS45NDcgMCAwMDUuODI3LTQuNzU2QzIyLjI4NyAxOC4zMzkgMjQgMTUuODQgMjQgMTMuMjk2YzAtMS42NjUtLjcxMy0zLjI4Mi0xLjk5OC00LjQ0OC4xMTktLjUuMTktLjk5OS4xOS0xLjQ5OCAwLTMuNDAxLTIuNzU5LTUuOTQ3LTUuOTQ2LTUuOTQ3LS42NDIgMC0xLjI2LjA5NS0xLjg4LjMxQTUuOTYyIDUuOTYyIDAgMDAxMC4yMDUgMGE1Ljk0NyA1Ljk0NyAwIDAwLTUuODI3IDQuNzU3QzEuNzEzIDUuNDQ3IDAgNy45NDUgMCAxMC40OWMwIDEuNjY2LjcxMyAzLjI4MyAxLjk5OCA0LjQ0OC0uMTE5LjUtLjE5IDEtLjE5IDEuNDk5IDAgMy40MDEgMi43NTkgNS45NDYgNS45NDYgNS45NDYuNjQyIDAgMS4yNi0uMDk1IDEuODgtLjMwOWE1Ljk2IDUuOTYgMCAwMDQuMTYyIDEuNzEzeiI+PC9wYXRoPjwvc3ZnPgo="); mask-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJjdXJyZW50Q29sb3IiIGZpbGwtcnVsZT0iZXZlbm9kZCIgaGVpZ2h0PSIxZW0iIHN0eWxlPSJmbGV4Om5vbmU7bGluZS1oZWlnaHQ6MSIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMWVtIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZT5PcGVuQUk8L3RpdGxlPjxwYXRoIGQ9Ik05LjIwNSA4LjY1OHYtMi4yNmMwLS4xOS4wNzItLjMzMy4yMzgtLjQyOGw0LjU0My0yLjYxNmMuNjE5LS4zNTcgMS4zNTYtLjUyMyAyLjExNy0uNTIzIDIuODU0IDAgNC42NjIgMi4yMTIgNC42NjIgNC41NjYgMCAuMTY3IDAgLjM1Ny0uMDI0LjU0N2wtNC43MS0yLjc1OWEuNzk3Ljc5NyAwIDAwLS44NTYgMGwtNS45NyAzLjQ3M3ptMTAuNjA5IDguOFYxMi4wNmMwLS4zMzMtLjE0My0uNTctLjQyOS0uNzM3bC01Ljk3LTMuNDczIDEuOTUtMS4xMThhLjQzMy40MzMgMCAwMS40NzYgMGw0LjU0MyAyLjYxN2MxLjMwOS43NiAyLjE4OSAyLjM3OCAyLjE4OSAzLjk0OCAwIDEuODA4LTEuMDcgMy40NzMtMi43NiA0LjE2M3pNNy44MDIgMTIuNzAzbC0xLjk1LTEuMTQyYy0uMTY3LS4wOTUtLjIzOS0uMjM4LS4yMzktLjQyOFY1Ljg5OWMwLTIuNTQ1IDEuOTUtNC40NzIgNC41OTEtNC40NzIgMSAwIDEuOTI3LjMzMyAyLjcxMi45MjhMOC4yMyA1LjA2N2MtLjI4NS4xNjYtLjQyOC40MDQtLjQyOC43Mzd2Ni44OTh6TTEyIDE1LjEyOGwtMi43OTUtMS41N3YtMy4zM0wxMiA4LjY1OGwyLjc5NSAxLjU3djMuMzNMMTIgMTUuMTI4em0xLjc5NiA3LjIzYy0xIDAtMS45MjctLjMzMi0yLjcxMi0uOTI3bDQuNjg2LTIuNzEyYy4yODUtLjE2Ni40MjgtLjQwNC40MjgtLjczN3YtNi44OThsMS45NzQgMS4xNDJjLjE2Ny4wOTUuMjM4LjIzOC4yMzguNDI4djUuMjMzYzAgMi41NDUtMS45NzQgNC40NzItNC42MTQgNC40NzJ6bS01LjYzNy01LjMwM2wtNC41NDQtMi42MTdjLTEuMzA4LS43NjEtMi4xODgtMi4zNzgtMi4xODgtMy45NDhBNC40ODIgNC40ODIgMCAwMTQuMjEgNi4zMjd2NS40MjNjMCAuMzMzLjE0My41NzEuNDI4LjczOGw1Ljk0NyAzLjQ0OS0xLjk1IDEuMTE4YS40MzIuNDMyIDAgMDEtLjQ3NiAwem0tLjI2MiAzLjljLTIuNjg4IDAtNC42NjItMi4wMjEtNC42NjItNC41MTkgMC0uMTkuMDI0LS4zOC4wNDctLjU3bDQuNjg2IDIuNzFjLjI4Ni4xNjcuNTcxLjE2Ny44NTYgMGw1Ljk3LTMuNDQ4djIuMjZjMCAuMTktLjA3LjMzMy0uMjM3LjQyOGwtNC41NDMgMi42MTZjLS42MTkuMzU3LTEuMzU2LjUyMy0yLjExNy41MjN6bTUuODk5IDIuODNhNS45NDcgNS45NDcgMCAwMDUuODI3LTQuNzU2QzIyLjI4NyAxOC4zMzkgMjQgMTUuODQgMjQgMTMuMjk2YzAtMS42NjUtLjcxMy0zLjI4Mi0xLjk5OC00LjQ0OC4xMTktLjUuMTktLjk5OS4xOS0xLjQ5OCAwLTMuNDAxLTIuNzU5LTUuOTQ3LTUuOTQ2LTUuOTQ3LS42NDIgMC0xLjI2LjA5NS0xLjg4LjMxQTUuOTYyIDUuOTYyIDAgMDAxMC4yMDUgMGE1Ljk0NyA1Ljk0NyAwIDAwLTUuODI3IDQuNzU3QzEuNzEzIDUuNDQ3IDAgNy45NDUgMCAxMC40OWMwIDEuNjY2LjcxMyAzLjI4MyAxLjk5OCA0LjQ0OC0uMTE5LjUtLjE5IDEtLjE5IDEuNDk5IDAgMy40MDEgMi43NTkgNS45NDYgNS45NDYgNS45NDYuNjQyIDAgMS4yNi0uMDk1IDEuODgtLjMwOWE1Ljk2IDUuOTYgMCAwMDQuMTYyIDEuNzEzeiI+PC9wYXRoPjwvc3ZnPgo="); } .cos-mi-gemini { background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgc3R5bGU9ImZsZXg6bm9uZTtsaW5lLWhlaWdodDoxIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIxZW0iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHRpdGxlPkdlbWluaTwvdGl0bGU+PHBhdGggZD0iTTIwLjYxNiAxMC44MzVhMTQuMTQ3IDE0LjE0NyAwIDAxLTQuNDUtMy4wMDEgMTQuMTExIDE0LjExMSAwIDAxLTMuNjc4LTYuNDUyLjUwMy41MDMgMCAwMC0uOTc1IDAgMTQuMTM0IDE0LjEzNCAwIDAxLTMuNjc5IDYuNDUyIDE0LjE1NSAxNC4xNTUgMCAwMS00LjQ1IDMuMDAxYy0uNjUuMjgtMS4zMTguNTA1LTIuMDAyLjY3OGEuNTAyLjUwMiAwIDAwMCAuOTc1Yy42ODQuMTcyIDEuMzUuMzk3IDIuMDAyLjY3N2ExNC4xNDcgMTQuMTQ3IDAgMDE0LjQ1IDMuMDAxIDE0LjExMiAxNC4xMTIgMCAwMTMuNjc5IDYuNDUzLjUwMi41MDIgMCAwMC45NzUgMGMuMTcyLS42ODUuMzk3LTEuMzUxLjY3Ny0yLjAwM2ExNC4xNDUgMTQuMTQ1IDAgMDEzLjAwMS00LjQ1IDE0LjExMyAxNC4xMTMgMCAwMTYuNDUzLTMuNjc4LjUwMy41MDMgMCAwMDAtLjk3NSAxMy4yNDUgMTMuMjQ1IDAgMDEtMi4wMDMtLjY3OHoiIGZpbGw9IiMzMTg2RkYiPjwvcGF0aD48cGF0aCBkPSJNMjAuNjE2IDEwLjgzNWExNC4xNDcgMTQuMTQ3IDAgMDEtNC40NS0zLjAwMSAxNC4xMTEgMTQuMTExIDAgMDEtMy42NzgtNi40NTIuNTAzLjUwMyAwIDAwLS45NzUgMCAxNC4xMzQgMTQuMTM0IDAgMDEtMy42NzkgNi40NTIgMTQuMTU1IDE0LjE1NSAwIDAxLTQuNDUgMy4wMDFjLS42NS4yOC0xLjMxOC41MDUtMi4wMDIuNjc4YS41MDIuNTAyIDAgMDAwIC45NzVjLjY4NC4xNzIgMS4zNS4zOTcgMi4wMDIuNjc3YTE0LjE0NyAxNC4xNDcgMCAwMTQuNDUgMy4wMDEgMTQuMTEyIDE0LjExMiAwIDAxMy42NzkgNi40NTMuNTAyLjUwMiAwIDAwLjk3NSAwYy4xNzItLjY4NS4zOTctMS4zNTEuNjc3LTIuMDAzYTE0LjE0NSAxNC4xNDUgMCAwMTMuMDAxLTQuNDUgMTQuMTEzIDE0LjExMyAwIDAxNi40NTMtMy42NzguNTAzLjUwMyAwIDAwMC0uOTc1IDEzLjI0NSAxMy4yNDUgMCAwMS0yLjAwMy0uNjc4eiIgZmlsbD0idXJsKCNsb2JlLWljb25zLWdlbWluaS0wLV9SXzBfKSI+PC9wYXRoPjxwYXRoIGQ9Ik0yMC42MTYgMTAuODM1YTE0LjE0NyAxNC4xNDcgMCAwMS00LjQ1LTMuMDAxIDE0LjExMSAxNC4xMTEgMCAwMS0zLjY3OC02LjQ1Mi41MDMuNTAzIDAgMDAtLjk3NSAwIDE0LjEzNCAxNC4xMzQgMCAwMS0zLjY3OSA2LjQ1MiAxNC4xNTUgMTQuMTU1IDAgMDEtNC40NSAzLjAwMWMtLjY1LjI4LTEuMzE4LjUwNS0yLjAwMi42NzhhLjUwMi41MDIgMCAwMDAgLjk3NWMuNjg0LjE3MiAxLjM1LjM5NyAyLjAwMi42NzdhMTQuMTQ3IDE0LjE0NyAwIDAxNC40NSAzLjAwMSAxNC4xMTIgMTQuMTEyIDAgMDEzLjY3OSA2LjQ1My41MDIuNTAyIDAgMDAuOTc1IDBjLjE3Mi0uNjg1LjM5Ny0xLjM1MS42NzctMi4wMDNhMTQuMTQ1IDE0LjE0NSAwIDAxMy4wMDEtNC40NSAxNC4xMTMgMTQuMTEzIDAgMDE2LjQ1My0zLjY3OC41MDMuNTAzIDAgMDAwLS45NzUgMTMuMjQ1IDEzLjI0NSAwIDAxLTIuMDAzLS42Nzh6IiBmaWxsPSJ1cmwoI2xvYmUtaWNvbnMtZ2VtaW5pLTEtX1JfMF8pIj48L3BhdGg+PHBhdGggZD0iTTIwLjYxNiAxMC44MzVhMTQuMTQ3IDE0LjE0NyAwIDAxLTQuNDUtMy4wMDEgMTQuMTExIDE0LjExMSAwIDAxLTMuNjc4LTYuNDUyLjUwMy41MDMgMCAwMC0uOTc1IDAgMTQuMTM0IDE0LjEzNCAwIDAxLTMuNjc5IDYuNDUyIDE0LjE1NSAxNC4xNTUgMCAwMS00LjQ1IDMuMDAxYy0uNjUuMjgtMS4zMTguNTA1LTIuMDAyLjY3OGEuNTAyLjUwMiAwIDAwMCAuOTc1Yy42ODQuMTcyIDEuMzUuMzk3IDIuMDAyLjY3N2ExNC4xNDcgMTQuMTQ3IDAgMDE0LjQ1IDMuMDAxIDE0LjExMiAxNC4xMTIgMCAwMTMuNjc5IDYuNDUzLjUwMi41MDIgMCAwMC45NzUgMGMuMTcyLS42ODUuMzk3LTEuMzUxLjY3Ny0yLjAwM2ExNC4xNDUgMTQuMTQ1IDAgMDEzLjAwMS00LjQ1IDE0LjExMyAxNC4xMTMgMCAwMTYuNDUzLTMuNjc4LjUwMy41MDMgMCAwMDAtLjk3NSAxMy4yNDUgMTMuMjQ1IDAgMDEtMi4wMDMtLjY3OHoiIGZpbGw9InVybCgjbG9iZS1pY29ucy1nZW1pbmktMi1fUl8wXykiPjwvcGF0aD48ZGVmcz48bGluZWFyR3JhZGllbnQgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGlkPSJsb2JlLWljb25zLWdlbWluaS0wLV9SXzBfIiB4MT0iNyIgeDI9IjExIiB5MT0iMTUuNSIgeTI9IjEyIj48c3RvcCBzdG9wLWNvbG9yPSIjMDhCOTYyIj48L3N0b3A+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMDhCOTYyIiBzdG9wLW9wYWNpdHk9IjAiPjwvc3RvcD48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgaWQ9ImxvYmUtaWNvbnMtZ2VtaW5pLTEtX1JfMF8iIHgxPSI4IiB4Mj0iMTEuNSIgeTE9IjUuNSIgeTI9IjExIj48c3RvcCBzdG9wLWNvbG9yPSIjRjk0NTQzIj48L3N0b3A+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjRjk0NTQzIiBzdG9wLW9wYWNpdHk9IjAiPjwvc3RvcD48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgaWQ9ImxvYmUtaWNvbnMtZ2VtaW5pLTItX1JfMF8iIHgxPSIzLjUiIHgyPSIxNy41IiB5MT0iMTMuNSIgeTI9IjEyIj48c3RvcCBzdG9wLWNvbG9yPSIjRkFCQzEyIj48L3N0b3A+PHN0b3Agb2Zmc2V0PSIuNDYiIHN0b3AtY29sb3I9IiNGQUJDMTIiIHN0b3Atb3BhY2l0eT0iMCI+PC9zdG9wPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjwvc3ZnPgo="); } .cos-mi-xai { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJjdXJyZW50Q29sb3IiIGZpbGwtcnVsZT0iZXZlbm9kZCIgaGVpZ2h0PSIxZW0iIHN0eWxlPSJmbGV4Om5vbmU7bGluZS1oZWlnaHQ6MSIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMWVtIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZT5Hcm9rPC90aXRsZT48cGF0aCBkPSJNOS4yNyAxNS4yOWw3Ljk3OC01Ljg5N2MuMzkxLS4yOS45NS0uMTc3IDEuMTM3LjI3Mi45OCAyLjM2OS41NDIgNS4yMTUtMS40MSA3LjE2OS0xLjk1MSAxLjk1NC00LjY2NyAyLjM4Mi03LjE0OSAxLjQwNmwtMi43MTEgMS4yNTdjMy44ODkgMi42NjEgOC42MTEgMi4wMDMgMTEuNTYyLS45NTMgMi4zNDEtMi4zNDQgMy4wNjYtNS41MzkgMi4zODgtOC40MmwuMDA2LjAwN2MtLjk4My00LjIzMi4yNDItNS45MjQgMi43NS05LjM4My4wNi0uMDgyLjEyLS4xNjQuMTc5LS4yNDhsLTMuMzAxIDMuMzA1di0uMDFMOS4yNjcgMTUuMjkyTTcuNjIzIDE2LjcyM2MtMi43OTItMi42Ny0yLjMxLTYuODAxLjA3MS05LjE4NCAxLjc2MS0xLjc2MyA0LjY0Ny0yLjQ4MyA3LjE2Ni0xLjQyNWwyLjcwNS0xLjI1YTcuODA4IDcuODA4IDAgMDAtMS44MjktMUE4Ljk3NSA4Ljk3NSAwIDAwNS45ODQgNS44M2MtMi41MzMgMi41MzYtMy4zMyA2LjQzNi0xLjk2MiA5Ljc2NCAxLjAyMiAyLjQ4Ny0uNjUzIDQuMjQ2LTIuMzQgNi4wMjItLjU5OS42My0xLjE5OSAxLjI1OS0xLjY4MiAxLjkyNWw3LjYyLTYuODE1Ij48L3BhdGg+PC9zdmc+Cg=="); mask-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJjdXJyZW50Q29sb3IiIGZpbGwtcnVsZT0iZXZlbm9kZCIgaGVpZ2h0PSIxZW0iIHN0eWxlPSJmbGV4Om5vbmU7bGluZS1oZWlnaHQ6MSIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMWVtIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZT5Hcm9rPC90aXRsZT48cGF0aCBkPSJNOS4yNyAxNS4yOWw3Ljk3OC01Ljg5N2MuMzkxLS4yOS45NS0uMTc3IDEuMTM3LjI3Mi45OCAyLjM2OS41NDIgNS4yMTUtMS40MSA3LjE2OS0xLjk1MSAxLjk1NC00LjY2NyAyLjM4Mi03LjE0OSAxLjQwNmwtMi43MTEgMS4yNTdjMy44ODkgMi42NjEgOC42MTEgMi4wMDMgMTEuNTYyLS45NTMgMi4zNDEtMi4zNDQgMy4wNjYtNS41MzkgMi4zODgtOC40MmwuMDA2LjAwN2MtLjk4My00LjIzMi4yNDItNS45MjQgMi43NS05LjM4My4wNi0uMDgyLjEyLS4xNjQuMTc5LS4yNDhsLTMuMzAxIDMuMzA1di0uMDFMOS4yNjcgMTUuMjkyTTcuNjIzIDE2LjcyM2MtMi43OTItMi42Ny0yLjMxLTYuODAxLjA3MS05LjE4NCAxLjc2MS0xLjc2MyA0LjY0Ny0yLjQ4MyA3LjE2Ni0xLjQyNWwyLjcwNS0xLjI1YTcuODA4IDcuODA4IDAgMDAtMS44MjktMUE4Ljk3NSA4Ljk3NSAwIDAwNS45ODQgNS44M2MtMi41MzMgMi41MzYtMy4zMyA2LjQzNi0xLjk2MiA5Ljc2NCAxLjAyMiAyLjQ4Ny0uNjUzIDQuMjQ2LTIuMzQgNi4wMjItLjU5OS42My0xLjE5OSAxLjI1OS0xLjY4MiAxLjkyNWw3LjYyLTYuODE1Ij48L3BhdGg+PC9zdmc+Cg=="); } .cos-mi-deepseek { background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgc3R5bGU9ImZsZXg6bm9uZTtsaW5lLWhlaWdodDoxIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIxZW0iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHRpdGxlPkRlZXBTZWVrPC90aXRsZT48cGF0aCBkPSJNMjMuNzQ4IDQuNDgyYy0uMjU0LS4xMjQtLjM2NC4xMTMtLjUxMi4yMzQtLjA1MS4wMzktLjA5NC4wOS0uMTM3LjEzNi0uMzcyLjM5Ny0uODA2LjY1Ny0xLjM3My42MjYtLjgyOS0uMDQ2LTEuNTM3LjIxNC0yLjE2My44NDgtLjEzMy0uNzgyLS41NzUtMS4yNDgtMS4yNDctMS41NDgtLjM1Mi0uMTU2LS43MDgtLjMxMS0uOTU1LS42NS0uMTcyLS4yNDEtLjIxOS0uNTEtLjMwNS0uNzc0LS4wNTUtLjE2LS4xMS0uMzIzLS4yOTMtLjM1LS4yLS4wMzEtLjI3OC4xMzYtLjM1Ni4yNzYtLjMxMy41NzItLjQzNCAxLjIwMi0uNDIyIDEuODQuMDI3IDEuNDM2LjYzMyAyLjU4IDEuODM4IDMuMzkzLjEzNy4wOTMuMTcyLjE4Ny4xMjkuMzIzLS4wODIuMjgtLjE4LjU1Mi0uMjY2LjgzMy0uMDU1LjE3OS0uMTM3LjIxNy0uMzI5LjE0YTUuNTI2IDUuNTI2IDAgMDEtMS43MzYtMS4xOGMtLjg1Ny0uODI4LTEuNjMxLTEuNzQyLTIuNTk3LTIuNDU4YTExLjM2NSAxMS4zNjUgMCAwMC0uNjg5LS40NzFjLS45ODUtLjk1Ny4xMy0xLjc0My4zODgtMS44MzYuMjctLjA5OC4wOTMtLjQzMi0uNzc5LS40MjgtLjg3Mi4wMDQtMS42Ny4yOTUtMi42ODcuNjg0YTMuMDU1IDMuMDU1IDAgMDEtLjQ2NS4xMzcgOS41OTcgOS41OTcgMCAwMC0yLjg4My0uMTAyYy0xLjg4NS4yMS0zLjM5IDEuMTAyLTQuNDk3IDIuNjIzQy4wODIgOC42MDYtLjIzMSAxMC42ODQuMTUyIDEyLjg1Yy40MDMgMi4yODQgMS41NjkgNC4xNzUgMy4zNiA1LjY1MyAxLjg1OCAxLjUzMyAzLjk5NyAyLjI4NCA2LjQzOCAyLjE0IDEuNDgyLS4wODUgMy4xMzMtLjI4NCA0Ljk5NC0xLjg2LjQ3LjIzNC45NjIuMzI3IDEuNzguMzk3LjYzLjA1OSAxLjIzNi0uMDMgMS43MDUtLjEyOC43MzUtLjE1Ni42ODQtLjgzNy40MTktLjk2MS0yLjE1NS0xLjAwNC0xLjY4Mi0uNTk1LTIuMTEzLS45MjYgMS4wOTYtMS4yOTYgMi43NDYtMi42NDIgMy4zOTItNy4wMDMuMDUtLjM0Ny4wMDctLjU2NSAwLS44NDUtLjAwNC0uMTcuMDM1LS4yMzcuMjMtLjI1NmE0LjE3MyA0LjE3MyAwIDAwMS41NDUtLjQ3NWMxLjM5Ni0uNzYzIDEuOTYtMi4wMTUgMi4wOTMtMy41MTcuMDItLjIzLS4wMDQtLjQ2Ny0uMjQ3LS41ODh6TTExLjU4MSAxOGMtMi4wODktMS42NDItMy4xMDItMi4xODMtMy41Mi0yLjE2LS4zOTIuMDI0LS4zMjEuNDcxLS4yMzUuNzYzLjA5LjI4OC4yMDcuNDg2LjM3MS43MzkuMTE0LjE2Ny4xOTIuNDE2LS4xMTMuNjAzLS42NzMuNDE2LTEuODQyLS4xNC0xLjg5Ny0uMTY3LTEuMzYxLS44MDItMi41LTEuODYtMy4zMDEtMy4zMDctLjc3NC0xLjM5My0xLjIyNC0yLjg4Ny0xLjI5OC00LjQ4Mi0uMDItLjM4Ni4wOTMtLjUyMi40NzctLjU5MmE0LjY5NiA0LjY5NiAwIDAxMS41MjktLjAzOWMyLjEzMi4zMTIgMy45NDYgMS4yNjUgNS40NjggMi43NzQuODY4Ljg2IDEuNTI1IDEuODg3IDIuMjAyIDIuODkxLjcyIDEuMDY2IDEuNDk0IDIuMDgyIDIuNDggMi45MTQuMzQ4LjI5Mi42MjUuNTE0Ljg5MS42NzctLjgwMi4wOS0yLjE0LjExLTMuMDU0LS42MTR6bTEtNi40NGEuMzA2LjMwNiAwIDAxLjQxNS0uMjg3LjMwMi4zMDIgMCAwMS4yLjI4OC4zMDYuMzA2IDAgMDEtLjMxLjMwNy4zMDMuMzAzIDAgMDEtLjMwNC0uMzA4em0zLjExIDEuNTk2Yy0uMi4wODEtLjM5OS4xNTEtLjU5LjE2YTEuMjQ1IDEuMjQ1IDAgMDEtLjc5OC0uMjU0Yy0uMjc0LS4yMy0uNDctLjM1OC0uNTUyLS43NThhMS43MyAxLjczIDAgMDEuMDE2LS41ODhjLjA3LS4zMjctLjAwOC0uNTM3LS4yMzktLjcyNy0uMTg3LS4xNTYtLjQyNi0uMTk5LS42ODgtLjE5OWEuNTU5LjU1OSAwIDAxLS4yNTQtLjA3OGMtLjExLS4wNTQtLjItLjE5LS4xMTQtLjM1OC4wMjgtLjA1NC4xNi0uMTg2LjE5Mi0uMjEuMzU2LS4yMDIuNzY3LS4xMzYgMS4xNDYuMDE2LjM1Mi4xNDQuNjE4LjQwOCAxLjAwMS43ODIuMzkxLjQ1MS40NjIuNTc2LjY4NS45MTQuMTc2LjI2NS4zMzYuNTM3LjQ0NS44NDguMDY3LjE5NS0uMDE5LjM1NC0uMjUuNDUyeiIgZmlsbD0iIzRENkJGRSI+PC9wYXRoPjwvc3ZnPgo="); } .cos-mi-moonshot { background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgc3R5bGU9ImZsZXg6bm9uZTtsaW5lLWhlaWdodDoxIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIxZW0iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHRpdGxlPktpbWk8L3RpdGxlPjxwYXRoIGQ9Ik0yMS44NDYgMGExLjkyMyAxLjkyMyAwIDExMCAzLjg0NkgyMC4xNWEuMjI2LjIyNiAwIDAxLS4yMjctLjIyNlYxLjkyM0MxOS45MjMuODYxIDIwLjc4NCAwIDIxLjg0NiAweiIgZmlsbD0iIzE3ODNGRiI+PC9wYXRoPjxwYXRoIGQ9Ik0xMS4wNjUgMTEuMTk5bDcuMjU3LTcuMmMuMTM3LS4xMzYuMDYtLjQxLS4xMTYtLjQxSDE0LjNhLjE2NC4xNjQgMCAwMC0uMTE3LjA1MWwtNy44MiA3Ljc1NmMtLjEyMi4xMi0uMzAyLjAxMy0uMzAyLS4xNzlWMy44MmMwLS4xMjctLjA4My0uMjMtLjE4NS0uMjNIMy4xODZjLS4xMDMgMC0uMTg2LjEwMy0uMTg2LjIzVjE5Ljc3YzAgLjEyOC4wODMuMjMuMTg2LjIzaDIuNjljLjEwMyAwIC4xODYtLjEwMi4xODYtLjIzdi0zLjI1YzAtLjA2OS4wMjUtLjEzNS4wNjktLjE3OGwyLjQyNC0yLjQwNmEuMTU4LjE1OCAwIDAxLjIwNS0uMDIzbDYuNDg0IDQuNzcyYTcuNjc3IDcuNjc3IDAgMDAzLjQ1MyAxLjI4M2MuMTA4LjAxMi4yLS4wOTUuMi0uMjN2LTMuMDZjMC0uMTE3LS4wNy0uMjEyLS4xNjQtLjIyN2E1LjAyOCA1LjAyOCAwIDAxLTIuMDI3LS44MDdsLTUuNjEzLTQuMDY0Yy0uMTE3LS4wNzgtLjEzMi0uMjc5LS4wMjgtLjM4MXoiIGZpbGw9IiMxNzgzRkYiPjwvcGF0aD48L3N2Zz4="); } .cos-mi-zhipu { background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgc3R5bGU9ImZsZXg6bm9uZTtsaW5lLWhlaWdodDoxIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIxZW0iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHRpdGxlPkNoYXRHTE08L3RpdGxlPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0ibG9iZS1pY29ucy1jaGF0LWdsbS1fUl8wXyIgeDE9Ii0xOC43NTYlIiB4Mj0iNzAuODk0JSIgeTE9IjQ5LjM3MSUiIHkyPSI5MC45NDQlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNTA0QUY0Ij48L3N0b3A+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMzQ4NUZGIj48L3N0b3A+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHBhdGggZD0iTTkuOTE3IDJjNC45MDYgMCAxMC4xNzggMy45NDcgOC45MyAxMC41OC0uMDE0LjA3LS4wMzcuMTQtLjA1Ny4yMWwtLjAwMy0uMjc3Yy0uMDgzLTMtMS41MzQtOC45MzQtOC44Ny04LjkzNC0zLjM5MyAwLTguMTM3IDMuMDU0LTcuOTMgOC4xNTgtLjA0IDQuNzc4IDMuNTU1IDguNCA3Ljk1IDguMzMybC4wNzMtLjAwMWMxLjItLjAzMyAyLjc2My0uNDI5IDMuMS0xLjY1Ny4wNjMtLjAzMS4yNi41MzQuMjY4LjU5OC4wNDguMjU2LjExMi4zNjkuMTkyLjM0Ljk4MS0uMzQ4IDIuMjg2LTEuMjIyIDEuOTUyLTIuMzgtLjE3Ni0uNjEtMS43NzUtLjE0Ny0xLjkyMS0uMzQ3LjQxOC0uOTc5IDIuMjM0LS45MjYgMy4xNTMtLjcxNi40NDMuMTAyLjY1Ny4zOCAxLjAxMi40NDIuMjkuMDUyLjk4MS0uMi45Ni4yNDItMS41IDMuMDQyLTQuODkzIDUuNDEtOC44MDggNS40MUMzLjY1NCAyMiAwIDE2LjU3NCAwIDExLjczNyAwIDUuOTQ3IDQuOTU5IDIgOS45MTcgMnpNOS45IDUuM2MuNDg0IDAgMS4xMjUuMjI1IDEuMzguNTg1IDMuNjY5LjE0NSA0LjMxMyAyLjY4NiA0LjY5NCA1LjQ0NC4yNTUgMS44MzguMzE1IDIuMy4xODIgMS4zODdsLjA4My41OWMuMDY4LjQ0OC41NTQuNzM3Ljk4Mi41MTYuMTQ0LS4wNzUuMjU0LS4yMzEuMzI4LS40N2EuMi4yIDAgMDEuMjU4LS4xM2wuNjI1LjIyYS4yLjIgMCAwMS4xMjQuMjM4IDIuMTcyIDIuMTcyIDAgMDEtLjUxLjkyYy0uODc4LjkxNy0yLjc1Ny42NjQtMy4wOC0uNjItLjE0LS41NTQtLjA1NS0uNjI2LS4zNDUtMS4yNDItLjI5Mi0uNjIxLTEuMjM4LS43MDktMS42OS0uMjk1LS4zNDUuMzE1LS40MDcuODA1LS40MDYgMS4yODJMMTIuNiAxNS45YS45LjkgMCAwMS0uOS45aC0xLjRhLjkuOSAwIDAxLS45LS45di0uNjVhMS4xNSAxLjE1IDAgMTAtMi4zIDB2LjY1YS45LjkgMCAwMS0uOS45SDQuOGEuOS45IDAgMDEtLjktLjlsLjAzNS0zLjIzOWMuMDEyLTEuODg0LjM1Ni0zLjY1OCAyLjQ3LTQuMTM0LjItLjA0NS4yNTIuMTMuMjkuMzQyLjAyNS4xNTQuMDQzLjI1Mi4wNTMuMjk0LjcwMSAzLjA1OCAxLjc1IDQuMjk5IDMuMTQ0IDMuNzIybC42Ni0uMzMxLjI1NC0uMTNjLjE1OC0uMDgyLjI1LS4xMzEuMjc2LS4xNS4wMTItLjAxLS4xNjUtLjIwNi0uNDA3LS40NjRsLTEuMDEyLTEuMDY3YTguOTI1IDguOTI1IDAgMDEtLjE5OS0uMjE2Yy0uMDQ3LS4wMzQtLjExNi4wNjgtLjIwOC4zMDYtLjA3NC4xNTctLjI1MS4yNTItLjI3Mi4zMjYtLjAxMy4wNTguMTA4LjI5OC4zNjIuNzIuMTY0LjI4OC4yMi41MDgtLjMxLjM0My0xLjA0LS44LTEuNTE4LTIuMjczLTEuNjg0LTMuNzI1LS4wMDQtLjAzNS0uMTYyLTEuOTEzLS4xNjItMS45MTNhMS4yIDEuMiAwIDAxMS4xMTMtMS4yODFMOS45IDUuM3ptMTIuOTk0IDguNjhjLjAzNy42OTctLjQwMy43MDQtMS4yMTMuNTkxbC0xLjc4My0uMjc2Yy0uMjY1LS4wNTMtLjM4NS0uMDk5LS4zMTMtLjE0Ny40Ny0uMzE1IDMuMjY4LS45MyAzLjMxLS4xNjh6bS0uOTE1LS4wODNsLS45MjYuMDQyYy0uODUuMDc3LTEuNDUyLjI0LjMzOC4zMzZsLjEwMy4wMDNjLjgxNS4wMTIgMS4yNjQtLjM1OS40ODUtLjM4MXptMS42NjctMy42MDFoLjAxYy43OS4zOTguMDY3IDEuMDMtLjY1IDEuMzkzLS4xNC4wNy0uNDkxLjE3Ni0xLjA1Mi4zMTUtLjI0MS4wNC0uNDU3LjA5Mi0uMzMzLjE2bC4wMS4wMDVjMS45NTIuOTU4LTMuMTIzIDEuNTM0LTIuNDk1IDEuMjg1bC4zOC0uMTQ4Yy42OC0uMjY2IDEuNjE0LS42ODIgMS42NjYtMS4zMzcuMDM4LS40OCAxLjI1My0uNDQyIDEuNDkzLS45NjguMDQ4LS4xMDYgMC0uMjM2LS4xNDQtLjM4OS0uMDUtLjA0Ny0uMDk0LS4wOTQtLjEwNy0uMTQ4LS4wNzMtLjMwNS43LS40MzEgMS4yMjItLjE2OHptLTIuNTY4LS40NzRjLS4xMzUgMS4xOTgtMi40NzkgNC4xOTItMS45NDkgMi44NjNsLjAxNy0uMDQyYy4yOTgtLjcxNy4zNzYtMi4yMjEgMS4zMzctMy4yMjEuMjUtLjI2LjYzNi4wMzUuNTk1LjR6bS03Ljk3Ni0uMjUzYy4wMi0uNjk0IDEuMDAyLS45NjggMS4zNDYtLjM0Ny4wMS0xLjI3NC0xLjk0MS0uNzY4LTEuMzQ2LjM0N3oiIGZpbGw9InVybCgjbG9iZS1pY29ucy1jaGF0LWdsbS1fUl8wXykiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PC9wYXRoPjwvc3ZnPgo="); } .cos-mi-qwen { background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgc3R5bGU9ImZsZXg6bm9uZTtsaW5lLWhlaWdodDoxIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIxZW0iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHRpdGxlPlF3ZW48L3RpdGxlPjxwYXRoIGQ9Ik0xMi42MDQgMS4zNGMuMzkzLjY5Ljc4NCAxLjM4MiAxLjE3NCAyLjA3NWEuMTguMTggMCAwMC4xNTcuMDkxaDUuNTUyYy4xNzQgMCAuMzIyLjExLjQ0Ni4zMjdsMS40NTQgMi41N2MuMTkuMzM3LjI0LjQ3OC4wMjQuODM3LS4yNi40My0uNTEzLjg2NC0uNzYgMS4zbC0uMzY3LjY1OGMtLjEwNi4xOTYtLjIyMy4yOC0uMDQuNTEybDIuNjUyIDQuNjM3Yy4xNzIuMzAxLjExMS40OTQtLjA0My43Ny0uNDM3Ljc4NS0uODgyIDEuNTY0LTEuMzM1IDIuMzQtLjE1OS4yNzItLjM1Mi4zNzUtLjY4LjM3LS43NzctLjAxNi0xLjU1Mi0uMDEtMi4zMjcuMDE2YS4wOTkuMDk5IDAgMDAtLjA4MS4wNSA1NzUuMDk3IDU3NS4wOTcgMCAwMS0yLjcwNSA0Ljc0Yy0uMTY5LjI5My0uMzguMzYzLS43MjUuMzY0LS45OTcuMDAzLTIuMDAyLjAwNC0zLjAxNy4wMDJhLjUzNy41MzcgMCAwMS0uNDY1LS4yNzFsLTEuMzM1LTIuMzIzYS4wOS4wOSAwIDAwLS4wODMtLjA0OUg0Ljk4MmMtLjI4NS4wMy0uNTUzLS4wMDEtLjgwNS0uMDkybC0xLjYwMy0yLjc3YS41NDMuNTQzIDAgMDEtLjAwMi0uNTRsMS4yMDctMi4xMmEuMTk4LjE5OCAwIDAwMC0uMTk3IDU1MC45NTEgNTUwLjk1MSAwIDAxLTEuODc1LTMuMjcybC0uNzktMS4zOTVjLS4xNi0uMzEtLjE3My0uNDk2LjA5NS0uOTY1LjQ2NS0uODEzLjkyNy0xLjYyNSAxLjM4Ny0yLjQzNi4xMzItLjIzNC4zMDQtLjMzNC41ODQtLjMzNWEzMzguMyAzMzguMyAwIDAxMi41ODktLjAwMS4xMjQuMTI0IDAgMDAuMTA3LS4wNjNsMi44MDYtNC44OTVhLjQ4OC40ODggMCAwMS40MjItLjI0NmMuNTI0LS4wMDEgMS4wNTMgMCAxLjU4My0uMDA2TDExLjcwNCAxYy4zNDEtLjAwMy43MjQuMDMyLjkuMzR6bS0zLjQzMi40MDNhLjA2LjA2IDAgMDAtLjA1Mi4wM0w2LjI1NCA2Ljc4OGEuMTU3LjE1NyAwIDAxLS4xMzUuMDc4SDMuMjUzYy0uMDU2IDAtLjA3LjAyNS0uMDQxLjA3NGw1LjgxIDEwLjE1NmMuMDI1LjA0Mi4wMTMuMDYyLS4wMzQuMDYzbC0yLjc5NS4wMTVhLjIxOC4yMTggMCAwMC0uMi4xMTZsLTEuMzIgMi4zMWMtLjA0NC4wNzgtLjAyMS4xMTguMDY4LjExOGw1LjcxNi4wMDhjLjA0NiAwIC4wOC4wMi4xMDQuMDYxbDEuNDAzIDIuNDU0Yy4wNDYuMDgxLjA5Mi4wODIuMTM5IDBsNS4wMDYtOC43Ni43ODMtMS4zODJhLjA1NS4wNTUgMCAwMS4wOTYgMGwxLjQyNCAyLjUzYS4xMjIuMTIyIDAgMDAuMTA3LjA2MmwyLjc2My0uMDJhLjA0LjA0IDAgMDAuMDM1LS4wMi4wNDEuMDQxIDAgMDAwLS4wNGwtMi45LTUuMDg2YS4xMDguMTA4IDAgMDEwLS4xMTNsLjI5My0uNTA3IDEuMTItMS45NzdjLjAyNC0uMDQxLjAxMi0uMDYyLS4wMzUtLjA2Mkg5LjJjLS4wNTkgMC0uMDczLS4wMjYtLjA0My0uMDc3bDEuNDM0LTIuNTA1YS4xMDcuMTA3IDAgMDAwLS4xMTRMOS4yMjUgMS43NzRhLjA2LjA2IDAgMDAtLjA1My0uMDMxem02LjI5IDguMDJjLjA0NiAwIC4wNTguMDIuMDM0LjA2bC0uODMyIDEuNDY1LTIuNjEzIDQuNTg1YS4wNTYuMDU2IDAgMDEtLjA1LjAyOS4wNTguMDU4IDAgMDEtLjA1LS4wMjlMOC40OTggOS44NDFjLS4wMi0uMDM0LS4wMS0uMDUyLjAyOC0uMDU0bC4yMTYtLjAxMiA2LjcyMi0uMDEyeiIgZmlsbD0idXJsKCNsb2JlLWljb25zLXF3ZW4tX1JfMF8pIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImxvYmUtaWNvbnMtcXdlbi1fUl8wXyIgeDE9IjAlIiB4Mj0iMTAwJSIgeTE9IjAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM2MzM2RTciIHN0b3Atb3BhY2l0eT0iLjg0Ij48L3N0b3A+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNkY2OUY3IiBzdG9wLW9wYWNpdHk9Ii44NCI+PC9zdG9wPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjwvc3ZnPgo="); } .cos-mi-mistral { background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgc3R5bGU9ImZsZXg6bm9uZTtsaW5lLWhlaWdodDoxIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIxZW0iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHRpdGxlPk1pc3RyYWw8L3RpdGxlPjxwYXRoIGQ9Ik0zLjQyOCAzLjRoMy40Mjl2My40MjhIMy40MjhWMy40em0xMy43MTQgMGgzLjQzdjMuNDI4aC0zLjQzVjMuNHoiIGZpbGw9ImdvbGQiPjwvcGF0aD48cGF0aCBkPSJNMy40MjggNi44MjhoNi44NTd2My40MjlIMy40MjlWNi44Mjh6bTEwLjI4NiAwaDYuODU3djMuNDI5aC02Ljg1N1Y2LjgyOHoiIGZpbGw9IiNGRkFGMDAiPjwvcGF0aD48cGF0aCBkPSJNMy40MjggMTAuMjU4aDE3LjE0NHYzLjQyOEgzLjQyOHYtMy40Mjh6IiBmaWxsPSIjRkY4MjA1Ij48L3BhdGg+PHBhdGggZD0iTTMuNDI4IDEzLjY4NmgzLjQyOXYzLjQyOEgzLjQyOHYtMy40Mjh6bTYuODU4IDBoMy40Mjl2My40MjhoLTMuNDI5di0zLjQyOHptNi44NTYgMGgzLjQzdjMuNDI4aC0zLjQzdi0zLjQyOHoiIGZpbGw9IiNGQTUwMEYiPjwvcGF0aD48cGF0aCBkPSJNMCAxNy4xMTRoMTAuMjg2djMuNDI5SDB2LTMuNDI5em0xMy43MTQgMEgyNHYzLjQyOUgxMy43MTR2LTMuNDI5eiIgZmlsbD0iI0UxMDUwMCI+PC9wYXRoPjwvc3ZnPgo="); } .cos-mi-meta { background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgc3R5bGU9ImZsZXg6bm9uZTtsaW5lLWhlaWdodDoxIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIxZW0iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHRpdGxlPk1ldGE8L3RpdGxlPjxwYXRoIGQ9Ik02Ljg5NyA0aC0uMDI0bC0uMDMxIDIuNjE1aC4wMjJjMS43MTUgMCAzLjA0NiAxLjM1NyA1Ljk0IDYuMjQ2bC4xNzUuMjk3LjAxMi4wMiAxLjYyLTIuNDM4LS4wMTItLjAxOWE0OC43NjMgNDguNzYzIDAgMDAtMS4wOTgtMS43MTYgMjguMDEgMjguMDEgMCAwMC0xLjE3NS0xLjYyOUMxMC40MTMgNC45MzIgOC44MTIgNCA2Ljg5NiA0eiIgZmlsbD0idXJsKCNsb2JlLWljb25zLW1ldGEtMC1fUl8wXykiPjwvcGF0aD48cGF0aCBkPSJNNi44NzMgNEM0Ljk1IDQuMDEgMy4yNDcgNS4yNTggMi4wMiA3LjE3YTQuMzUyIDQuMzUyIDAgMDAtLjAxLjAxN2wyLjI1NCAxLjIzMS4wMTEtLjAxN2MuNzE4LTEuMDgzIDEuNjEtMS43NzQgMi41NjgtMS43ODVoLjAyMUw2Ljg5NiA0aC0uMDIzeiIgZmlsbD0idXJsKCNsb2JlLWljb25zLW1ldGEtMS1fUl8wXykiPjwvcGF0aD48cGF0aCBkPSJNMi4wMTkgNy4xN2wtLjAxMS4wMTdDMS4yIDguNDQ3LjU5OCA5Ljk5NS4yNzQgMTEuNjY0bC0uMDA1LjAyMiAyLjUzNC42LjAwNC0uMDIyYy4yNy0xLjQ2Ny43ODYtMi44MjggMS40NTYtMy44NDVsLjAxMS0uMDE3TDIuMDIgNy4xN3oiIGZpbGw9InVybCgjbG9iZS1pY29ucy1tZXRhLTItX1JfMF8pIj48L3BhdGg+PHBhdGggZD0iTTIuODA3IDEyLjI2NGwtMi41MzMtLjYtLjAwNS4wMjJjLS4xNzcuOTE4LS4yNjcgMS44NTEtLjI2OSAyLjc4NnYuMDIzbDIuNTk4LjIzM3YtLjAyM2ExMi41OTEgMTIuNTkxIDAgMDEuMjEtMi40NHoiIGZpbGw9InVybCgjbG9iZS1pY29ucy1tZXRhLTMtX1JfMF8pIj48L3BhdGg+PHBhdGggZD0iTTIuNjc3IDE1LjUzN2E1LjQ2MiA1LjQ2MiAwIDAxLS4wNzktLjgxM3YtLjAyMkwwIDE0LjQ2OHYuMDI0YTguODkgOC44OSAwIDAwLjE0NiAxLjY1MmwyLjUzNS0uNTg1YTQuMTA2IDQuMTA2IDAgMDEtLjAwNC0uMDIyeiIgZmlsbD0idXJsKCNsb2JlLWljb25zLW1ldGEtNC1fUl8wXykiPjwvcGF0aD48cGF0aCBkPSJNMy4yNyAxNi44OWMtLjI4NC0uMzEtLjQ4NC0uNzU2LS41ODktMS4zMjhsLS4wMDQtLjAyMS0yLjUzNS41ODUuMDA0LjAyMWMuMTkyIDEuMDEuNTY4IDEuODUgMS4xMDYgMi40ODdsLjAxNC4wMTcgMi4wMTgtMS43NDVhMi4xMDYgMi4xMDYgMCAwMS0uMDE1LS4wMTZ6IiBmaWxsPSJ1cmwoI2xvYmUtaWNvbnMtbWV0YS01LV9SXzBfKSI+PC9wYXRoPjxwYXRoIGQ9Ik0xMC43OCA5LjY1NGMtMS41MjggMi4zNS0yLjQ1NCAzLjgyNS0yLjQ1NCAzLjgyNS0yLjAzNSAzLjItMi43MzkgMy45MTctMy44NzEgMy45MTdhMS41NDUgMS41NDUgMCAwMS0xLjE4Ni0uNTA4bC0yLjAxNyAxLjc0NC4wMTQuMDE3QzIuMDEgMTkuNTE4IDMuMDU4IDIwIDQuMzU2IDIwYzEuOTYzIDAgMy4zNzQtLjkyOCA1Ljg4NC01LjMzbDEuNzY2LTMuMTNhNDEuMjgzIDQxLjI4MyAwIDAwLTEuMjI3LTEuODg2eiIgZmlsbD0iIzAwODJGQiI+PC9wYXRoPjxwYXRoIGQ9Ik0xMy41MDIgNS45NDZsLS4wMTYuMDE2Yy0uNC40My0uNzg2LjkwOC0xLjE2IDEuNDE2LjM3OC40ODMuNzY4IDEuMDI0IDEuMTc1IDEuNjMuNDgtLjc0My45MjgtMS4zNDUgMS4zNjctMS44MDdsLjAxNi0uMDE2LTEuMzgyLTEuMjR6IiBmaWxsPSJ1cmwoI2xvYmUtaWNvbnMtbWV0YS02LV9SXzBfKSI+PC9wYXRoPjxwYXRoIGQ9Ik0yMC45MTggNS43MTNDMTkuODUzIDQuNjMzIDE4LjU4MyA0IDE3LjIyNSA0Yy0xLjQzMiAwLTIuNjM3Ljc4Ny0zLjcyMyAxLjk0NGwtLjAxNi4wMTYgMS4zODIgMS4yNC4wMTYtLjAxN2MuNzE1LS43NDcgMS40MDgtMS4xMiAyLjE3Ni0xLjEyLjgyNiAwIDEuNi4zOSAyLjI3IDEuMDc1bC4wMTUuMDE2IDEuNTg5LTEuNDI1LS4wMTYtLjAxNnoiIGZpbGw9IiMwMDgyRkIiPjwvcGF0aD48cGF0aCBkPSJNMjMuOTk4IDE0LjEyNWMtLjA2LTMuNDY3LTEuMjctNi41NjYtMy4wNjQtOC4zOTZsLS4wMTYtLjAxNi0xLjU4OCAxLjQyNC4wMTUuMDE2YzEuMzUgMS4zOTIgMi4yNzcgMy45OCAyLjM2MSA2Ljk3MXYuMDIzaDIuMjkydi0uMDIyeiIgZmlsbD0idXJsKCNsb2JlLWljb25zLW1ldGEtNy1fUl8wXykiPjwvcGF0aD48cGF0aCBkPSJNMjMuOTk4IDE0LjE1di0uMDIzaC0yLjI5MnYuMDIyYy4wMDQuMTQuMDA2LjI4Mi4wMDYuNDI0IDAgLjgxNS0uMTIxIDEuNDc0LS4zNjggMS45NWwtLjAxMS4wMjIgMS43MDggMS43ODIuMDEzLS4wMmMuNjItLjk2Ljk0Ni0yLjI5My45NDYtMy45MSAwLS4wODMgMC0uMTY1LS4wMDItLjI0N3oiIGZpbGw9InVybCgjbG9iZS1pY29ucy1tZXRhLTgtX1JfMF8pIj48L3BhdGg+PHBhdGggZD0iTTIxLjM0NCAxNi41MmwtLjAxMS4wMmMtLjIxNC40MDItLjUxOS42Ny0uOTE3Ljc4N2wuNzc4IDIuNDYyYTMuNDkzIDMuNDkzIDAgMDAuNDM4LS4xODIgMy41NTggMy41NTggMCAwMDEuMzY2LTEuMjE4bC4wNDQtLjA2NS4wMTItLjAyLTEuNzEtMS43ODR6IiBmaWxsPSJ1cmwoI2xvYmUtaWNvbnMtbWV0YS05LV9SXzBfKSI+PC9wYXRoPjxwYXRoIGQ9Ik0xOS45MiAxNy4zOTNjLS4yNjIgMC0uNDkyLS4wMzktLjcxOC0uMTRsLS43OTggMi41MjJjLjQ0OS4xNTMuOTI3LjIyMiAxLjQ2LjIyMi40OTIgMCAuOTQzLS4wNzMgMS4zNTItLjIxNWwtLjc4LTIuNDYyYy0uMTY3LjA1LS4zNDEuMDc1LS41MTcuMDczeiIgZmlsbD0idXJsKCNsb2JlLWljb25zLW1ldGEtMTAtX1JfMF8pIj48L3BhdGg+PHBhdGggZD0iTTE4LjMyMyAxNi41MzRsLS4wMTQtLjAxNy0xLjgzNiAxLjkxNC4wMTYuMDE3Yy42MzcuNjgyIDEuMjQ2IDEuMTA1IDEuOTM3IDEuMzM3bC43OTctMi41MmMtLjI5MS0uMTI1LS41NzMtLjM1My0uOS0uNzMxeiIgZmlsbD0idXJsKCNsb2JlLWljb25zLW1ldGEtMTEtX1JfMF8pIj48L3BhdGg+PHBhdGggZD0iTTE4LjMwOSAxNi41MTVjLS41NS0uNjQyLTEuMjMyLTEuNzEyLTIuMzAzLTMuNDRsLTEuMzk2LTIuMzM2LS4wMTEtLjAyLTEuNjIgMi40MzguMDEyLjAyLjk4OSAxLjY2OGMuOTU5IDEuNjEgMS43NCAyLjc3NCAyLjQ5MyAzLjU4NWwuMDE2LjAxNiAxLjgzNC0xLjkxNGEyLjM1MyAyLjM1MyAwIDAxLS4wMTQtLjAxN3oiIGZpbGw9InVybCgjbG9iZS1pY29ucy1tZXRhLTEyLV9SXzBfKSI+PC9wYXRoPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0ibG9iZS1pY29ucy1tZXRhLTAtX1JfMF8iIHgxPSI3NS44OTclIiB4Mj0iMjYuMzEyJSIgeTE9Ijg5LjE5OSUiIHkyPSIxMi4xOTQlIj48c3RvcCBvZmZzZXQ9Ii4wNiUiIHN0b3AtY29sb3I9IiMwODY3REYiPjwvc3RvcD48c3RvcCBvZmZzZXQ9IjQ1LjM5JSIgc3RvcC1jb2xvcj0iIzA2NjhFMSI+PC9zdG9wPjxzdG9wIG9mZnNldD0iODUuOTElIiBzdG9wLWNvbG9yPSIjMDA2NEUwIj48L3N0b3A+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9ImxvYmUtaWNvbnMtbWV0YS0xLV9SXzBfIiB4MT0iMjEuNjclIiB4Mj0iOTcuMDY4JSIgeTE9Ijc1Ljg3NCUiIHkyPSIyMy45ODUlIj48c3RvcCBvZmZzZXQ9IjEzLjIzJSIgc3RvcC1jb2xvcj0iIzAwNjRERiI+PC9zdG9wPjxzdG9wIG9mZnNldD0iOTkuODglIiBzdG9wLWNvbG9yPSIjMDA2NEUwIj48L3N0b3A+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9ImxvYmUtaWNvbnMtbWV0YS0yLV9SXzBfIiB4MT0iMzguMjYzJSIgeDI9IjYwLjg5NSUiIHkxPSI4OS4xMjclIiB5Mj0iMTYuMTMxJSI+PHN0b3Agb2Zmc2V0PSIxLjQ3JSIgc3RvcC1jb2xvcj0iIzAwNzJFQyI+PC9zdG9wPjxzdG9wIG9mZnNldD0iNjguODElIiBzdG9wLWNvbG9yPSIjMDA2NERGIj48L3N0b3A+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9ImxvYmUtaWNvbnMtbWV0YS0zLV9SXzBfIiB4MT0iNDcuMDMyJSIgeDI9IjUyLjE1JSIgeTE9IjkwLjE5JSIgeTI9IjE1Ljc0NSUiPjxzdG9wIG9mZnNldD0iNy4zMSUiIHN0b3AtY29sb3I9IiMwMDdDRjYiPjwvc3RvcD48c3RvcCBvZmZzZXQ9Ijk5LjQzJSIgc3RvcC1jb2xvcj0iIzAwNzJFQyI+PC9zdG9wPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSJsb2JlLWljb25zLW1ldGEtNC1fUl8wXyIgeDE9IjUyLjE1NSUiIHgyPSI0Ny41OTElIiB5MT0iNTguMzAxJSIgeTI9IjM3LjAwNCUiPjxzdG9wIG9mZnNldD0iNy4zMSUiIHN0b3AtY29sb3I9IiMwMDdGRjkiPjwvc3RvcD48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDdDRjYiPjwvc3RvcD48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0ibG9iZS1pY29ucy1tZXRhLTUtX1JfMF8iIHgxPSIzNy42ODklIiB4Mj0iNjEuOTYxJSIgeTE9IjEyLjUwMiUiIHkyPSI2My42MjQlIj48c3RvcCBvZmZzZXQ9IjcuMzElIiBzdG9wLWNvbG9yPSIjMDA3RkY5Ij48L3N0b3A+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDA4MkZCIj48L3N0b3A+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9ImxvYmUtaWNvbnMtbWV0YS02LV9SXzBfIiB4MT0iMzQuODA4JSIgeDI9IjYyLjMxMyUiIHkxPSI2OC44NTklIiB5Mj0iMjMuMTc0JSI+PHN0b3Agb2Zmc2V0PSIyNy45OSUiIHN0b3AtY29sb3I9IiMwMDdGRjgiPjwvc3RvcD48c3RvcCBvZmZzZXQ9IjkxLjQxJSIgc3RvcC1jb2xvcj0iIzAwODJGQiI+PC9zdG9wPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSJsb2JlLWljb25zLW1ldGEtNy1fUl8wXyIgeDE9IjQzLjc2MiUiIHgyPSI1Ny42MDIlIiB5MT0iNi4yMzUlIiB5Mj0iOTguNTE0JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwODJGQiI+PC9zdG9wPjxzdG9wIG9mZnNldD0iOTkuOTUlIiBzdG9wLWNvbG9yPSIjMDA4MUZBIj48L3N0b3A+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9ImxvYmUtaWNvbnMtbWV0YS04LV9SXzBfIiB4MT0iNjAuMDU1JSIgeDI9IjM5Ljg4JSIgeTE9IjQuNjYxJSIgeTI9IjY5LjA3NyUiPjxzdG9wIG9mZnNldD0iNi4xOSUiIHN0b3AtY29sb3I9IiMwMDgxRkEiPjwvc3RvcD48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDgwRjkiPjwvc3RvcD48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0ibG9iZS1pY29ucy1tZXRhLTktX1JfMF8iIHgxPSIzMC4yODIlIiB4Mj0iNjEuMDgxJSIgeTE9IjU5LjMyJSIgeTI9IjMzLjI0NCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMjdBRjMiPjwvc3RvcD48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDgwRjkiPjwvc3RvcD48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0ibG9iZS1pY29ucy1tZXRhLTEwLV9SXzBfIiB4MT0iMjAuNDMzJSIgeDI9IjgyLjExMiUiIHkxPSI1MC4wMDElIiB5Mj0iNTAuMDAxJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAzNzdFRiI+PC9zdG9wPjxzdG9wIG9mZnNldD0iOTkuOTQlIiBzdG9wLWNvbG9yPSIjMDI3OUYxIj48L3N0b3A+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9ImxvYmUtaWNvbnMtbWV0YS0xMS1fUl8wXyIgeDE9IjQwLjMwMyUiIHgyPSI3Mi4zOTQlIiB5MT0iMzUuMjk4JSIgeTI9IjU3LjgxMSUiPjxzdG9wIG9mZnNldD0iLjE5JSIgc3RvcC1jb2xvcj0iIzA0NzFFOSI+PC9zdG9wPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAzNzdFRiI+PC9zdG9wPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSJsb2JlLWljb25zLW1ldGEtMTItX1JfMF8iIHgxPSIzMi4yNTQlIiB4Mj0iNjguMDAzJSIgeTE9IjE5LjcxOSUiIHkyPSI4NC45MDglIj48c3RvcCBvZmZzZXQ9IjI3LjY1JSIgc3RvcC1jb2xvcj0iIzA4NjdERiI+PC9zdG9wPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzA0NzFFOSI+PC9zdG9wPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjwvc3ZnPgo="); } .cos-mi-minimax { background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgc3R5bGU9ImZsZXg6bm9uZTtsaW5lLWhlaWdodDoxIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIxZW0iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHRpdGxlPk1pbmltYXg8L3RpdGxlPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0ibG9iZS1pY29ucy1taW5pbWF4LV9SXzBfIiB4MT0iMCUiIHgyPSIxMDAuMTgyJSIgeTE9IjUwLjA1NyUiIHkyPSI1MC4wNTclIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjRTIxNjdFIj48L3N0b3A+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjRkU2MDNDIj48L3N0b3A+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHBhdGggZD0iTTE2LjI3OCAyYzEuMTU2IDAgMi4wOTMuOTI3IDIuMDkzIDIuMDd2MTIuNTAxYS43NC43NCAwIDAwLjc0NC43MDkuNzQuNzQgMCAwMC43NDMtLjcwOVY5LjA5OWEyLjA2IDIuMDYgMCAwMTIuMDcxLTIuMDQ5QTIuMDYgMi4wNiAwIDAxMjQgOS4xdjYuNTYxYS42NDkuNjQ5IDAgMDEtLjY1Mi42NDUuNjQ5LjY0OSAwIDAxLS42NTMtLjY0NVY5LjFhLjc2Mi43NjIgMCAwMC0uNzY2LS43NTguNzYyLjc2MiAwIDAwLS43NjYuNzU4djcuNDcyYTIuMDM3IDIuMDM3IDAgMDEtMi4wNDggMi4wMjYgMi4wMzcgMi4wMzcgMCAwMS0yLjA0OC0yLjAyNnYtMTIuNWEuNzg1Ljc4NSAwIDAwLS43ODgtLjc1My43ODUuNzg1IDAgMDAtLjc4OS43NTJsLS4wMDEgMTUuOTA0QTIuMDM3IDIuMDM3IDAgMDExMy40NDEgMjJhMi4wMzcgMi4wMzcgMCAwMS0yLjA0OC0yLjAyNlYxOC4wNGMwLS4zNTYuMjkyLS42NDUuNjUyLS42NDUuMzYgMCAuNjUyLjI4OS42NTIuNjQ1djEuOTM0YzAgLjI2My4xNDIuNTA2LjM3Mi42MzguMjMuMTMxLjUxNC4xMzEuNzQ0IDBhLjczNC43MzQgMCAwMC4zNzItLjYzOFY0LjA3YzAtMS4xNDMuOTM3LTIuMDcgMi4wOTMtMi4wN3ptLTUuNjc0IDBjMS4xNTYgMCAyLjA5My45MjcgMi4wOTMgMi4wN3YxMS41MjNhLjY0OC42NDggMCAwMS0uNjUyLjY0NS42NDguNjQ4IDAgMDEtLjY1Mi0uNjQ1VjQuMDdhLjc4NS43ODUgMCAwMC0uNzg5LS43OC43ODUuNzg1IDAgMDAtLjc4OS43OHYxNC4wMTNhMi4wNiAyLjA2IDAgMDEtMi4wNyAyLjA0OCAyLjA2IDIuMDYgMCAwMS0yLjA3MS0yLjA0OFY5LjFhLjc2Mi43NjIgMCAwMC0uNzY2LS43NTguNzYyLjc2MiAwIDAwLS43NjYuNzU4djMuOGEyLjA2IDIuMDYgMCAwMS0yLjA3MSAyLjA0OUEyLjA2IDIuMDYgMCAwMTAgMTIuOXYtMS4zNzhjMC0uMzU3LjI5Mi0uNjQ2LjY1Mi0uNjQ2LjM2IDAgLjY1My4yOS42NTMuNjQ2VjEyLjljMCAuNDE4LjM0My43NTcuNzY2Ljc1N3MuNzY2LS4zMzkuNzY2LS43NTdWOS4wOTlhMi4wNiAyLjA2IDAgMDEyLjA3LTIuMDQ4IDIuMDYgMi4wNiAwIDAxMi4wNzEgMi4wNDh2OC45ODRjMCAuNDE5LjM0My43NTguNzY3Ljc1OC40MjMgMCAuNzY2LS4zMzkuNzY2LS43NThWNC4wN2MwLTEuMTQzLjkzNy0yLjA3IDIuMDkzLTIuMDd6IiBmaWxsPSJ1cmwoI2xvYmUtaWNvbnMtbWluaW1heC1fUl8wXykiIGZpbGwtcnVsZT0ibm9uemVybyI+PC9wYXRoPjwvc3ZnPgo="); } .cos-mi-openrouter { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJjdXJyZW50Q29sb3IiIGZpbGwtcnVsZT0iZXZlbm9kZCIgaGVpZ2h0PSIxZW0iIHN0eWxlPSJmbGV4Om5vbmU7bGluZS1oZWlnaHQ6MSIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMWVtIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZT5PcGVuUm91dGVyPC90aXRsZT48cGF0aCBkPSJNMTYuODA0IDEuOTU3bDcuMjIgNC4xMDV2LjA4N0wxNi43MyAxMC4yMWwuMDE3LTIuMTE3LS44MjEtLjAzYy0xLjA1OS0uMDI4LTEuNjExLjAwMi0yLjI2OC4xMS0xLjA2NC4xNzUtMi4wMzguNTc3LTMuMTQ3IDEuMzUyTDguMzQ1IDExLjAzYy0uMjg0LjE5NS0uNDk1LjMzNi0uNjguNDU1bC0uNTE1LjMyMi0uMzk3LjIzNC4zODUuMjMuNTMuMzM4Yy40NzYuMzE0IDEuMTcuNzk2IDIuNzAxIDEuODY2IDEuMTEuNzc1IDIuMDgzIDEuMTc3IDMuMTQ3IDEuMzUybC4zLjA0NWMuNjk0LjA5MSAxLjM3NS4wOTQgMi44MjUuMDMzbC4wMjItMi4xNTkgNy4yMiA0LjEwNXYuMDg3TDE2LjU4OSAyMmwuMDE0LTEuODYyLS42MzUuMDIyYy0xLjM4Ni4wNDItMi4xMzcuMDAyLTMuMTM4LS4xNjItMS42OTQtLjI4LTMuMjYtLjkyNi00Ljg4MS0yLjA1OWwtMi4xNTgtMS41YTIxLjk5NyAyMS45OTcgMCAwMC0uNzU1LS40OThsLS40NjctLjI4YTU1LjkyNyA1NS45MjcgMCAwMC0uNzYtLjQzQzIuOTA4IDE0LjczLjU2MyAxNC4xMTYgMCAxNC4xMTZWOS44ODhsLjE0LjAwNGMuNTY0LS4wMDcgMi45MS0uNjIyIDMuODA5LTEuMTI0bDEuMDE2LS41OC40MzgtLjI3NGMuNDI4LS4yOCAxLjA3Mi0uNzI2IDIuNjg2LTEuODUzIDEuNjIxLTEuMTMzIDMuMTg2LTEuNzggNC44ODEtMi4wNTkgMS4xNTItLjE5IDEuOTc0LS4yMTMgMy44MTQtLjEzOGwuMDItMS45MDd6Ij48L3BhdGg+PC9zdmc+Cg=="); mask-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJjdXJyZW50Q29sb3IiIGZpbGwtcnVsZT0iZXZlbm9kZCIgaGVpZ2h0PSIxZW0iIHN0eWxlPSJmbGV4Om5vbmU7bGluZS1oZWlnaHQ6MSIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMWVtIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZT5PcGVuUm91dGVyPC90aXRsZT48cGF0aCBkPSJNMTYuODA0IDEuOTU3bDcuMjIgNC4xMDV2LjA4N0wxNi43MyAxMC4yMWwuMDE3LTIuMTE3LS44MjEtLjAzYy0xLjA1OS0uMDI4LTEuNjExLjAwMi0yLjI2OC4xMS0xLjA2NC4xNzUtMi4wMzguNTc3LTMuMTQ3IDEuMzUyTDguMzQ1IDExLjAzYy0uMjg0LjE5NS0uNDk1LjMzNi0uNjguNDU1bC0uNTE1LjMyMi0uMzk3LjIzNC4zODUuMjMuNTMuMzM4Yy40NzYuMzE0IDEuMTcuNzk2IDIuNzAxIDEuODY2IDEuMTEuNzc1IDIuMDgzIDEuMTc3IDMuMTQ3IDEuMzUybC4zLjA0NWMuNjk0LjA5MSAxLjM3NS4wOTQgMi44MjUuMDMzbC4wMjItMi4xNTkgNy4yMiA0LjEwNXYuMDg3TDE2LjU4OSAyMmwuMDE0LTEuODYyLS42MzUuMDIyYy0xLjM4Ni4wNDItMi4xMzcuMDAyLTMuMTM4LS4xNjItMS42OTQtLjI4LTMuMjYtLjkyNi00Ljg4MS0yLjA1OWwtMi4xNTgtMS41YTIxLjk5NyAyMS45OTcgMCAwMC0uNzU1LS40OThsLS40NjctLjI4YTU1LjkyNyA1NS45MjcgMCAwMC0uNzYtLjQzQzIuOTA4IDE0LjczLjU2MyAxNC4xMTYgMCAxNC4xMTZWOS44ODhsLjE0LjAwNGMuNTY0LS4wMDcgMi45MS0uNjIyIDMuODA5LTEuMTI0bDEuMDE2LS41OC40MzgtLjI3NGMuNDI4LS4yOCAxLjA3Mi0uNzI2IDIuNjg2LTEuODUzIDEuNjIxLTEuMTMzIDMuMTg2LTEuNzggNC44ODEtMi4wNTkgMS4xNTItLjE5IDEuOTc0LS4yMTMgMy44MTQtLjEzOGwuMDItMS45MDd6Ij48L3BhdGg+PC9zdmc+Cg=="); } .cos-cfgmenu-item.sel svg { color: var(--cos-accent); } /* combined-menu section headers + agent rows + effort toggle */ .cos-cfgmenu-sec { font-size: 10px; font-weight: 700; letter-spacing: .07em; color: var(--cos-muted); padding: 9px 10px 4px; } /* (b15u) company sub-headers inside the MODEL column + scroll for the long grouped list */ .cos-cfgmenu-sec.cos-cfgmenu-subsec { font-size: 10px; margin-top: 9px; opacity: .8; } .cos-cfgcols > .cos-cfgcol:not(.ac-agent) { max-height: 326px; overflow-y: auto; } /* pre-paint fallback; sizeCfgMenuCols() caps to the AGENT column height (b15x); 326 = menu 340 cap minus padding so a capped column can never clip under the menu's overflow:hidden (V4A) */ .cos-cfgmenu-sec:first-child { padding-top: 4px; } .cos-amitem { gap: 10px; } .cos-amitem .cos-agent-dot { margin: 0; } .cos-amitem-tx { display: flex; flex-direction: column; line-height: 1.25; } .cos-amitem-tx b { font-size: 13px; font-weight: 600; } .cos-amitem-tx i { font-style: normal; font-size: 11px; color: var(--cos-text-2); } .cos-amitem { align-items: center; } .cos-amitem .cos-amitem-tx { flex: 1 1 auto; min-width: 0; } /* per-agent install status on the right of a harness-dropdown row (Mac app) */ .cos-ambadge { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; color: var(--cos-text-2); white-space: nowrap; } .cos-ambadge.installing { color: var(--cos-accent); } .cos-ambadge.fail { color: var(--cos-red); } .cos-amitem.sel { background: var(--cos-accent-softer); } .cos-cfgmenu-eff { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px 5px; font-size: 12px; color: var(--cos-text-2); } .cos-effseg { display: inline-flex; border: 1px solid var(--cos-border-strong); border-radius: 7px; overflow: hidden; } .cos-effseg button { padding: 4px 11px; font-size: 12px; font-weight: 600; color: var(--cos-text-2); } .cos-effseg button.on { background: var(--cos-accent); color: #fff; } .cos-wtpill { gap: 7px; } .cos-wtpill.on { color: var(--cos-accent-hover); } .cos-wtbox { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--cos-border-strong); display: grid; place-items: center; color: #fff; flex: 0 0 auto; } .cos-wtpill.on .cos-wtbox { background: var(--cos-accent); border-color: var(--cos-accent); } .cos-ifacesel .cos-ifacebtn { color: var(--cos-text-2); width: auto; padding: 0 4px; } .cos-ifacesel .cos-ifacebtn:hover { background: var(--cos-surface-2); color: var(--cos-text); } .cos-ifaceglyph { display: inline-flex; align-items: center; gap: 5px; } /* welcome header (centered) */ .cos-welcome { text-align: center; margin: 36px 0 18px; } .cos-welcome-av { display: flex; justify-content: center; margin-bottom: 14px; } .cos-welcome-av .cos-avatar { width: 56px; height: 56px; cursor: pointer; } .cos-welcome-av .cos-avatar .online { width: 15px; height: 15px; } .cos-welcome-ttl { font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: var(--cos-text); margin: 0; } .cos-welcome-sub { max-width: 520px; margin: 8px auto 0; color: var(--cos-text-2); font-size: 16px; line-height: 1.5; } @container (max-width: 520px) { .cos-welcome-ttl { font-size: 24px; } } /* guest demo chat replies render here below the input; hidden until used */ .cos-home-msgs { margin: 10px 0 2px; max-height: 320px; } .cos-home-msgs:empty { display: none; } /* divider between the input area and the Cloud Drive section */ .cos-home-div { height: 1px; background: var(--cos-border); margin: 34px 0 24px; } /* machine cards */ .cos-cards { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; } .cos-mcard { border: 1px solid var(--cos-border); border-radius: var(--cos-radius-card); padding: 12px; background: var(--cos-surface); } .cos-mcard-head { display: flex; align-items: center; gap: 12px; } .cos-mcard-ico { width: 32px; height: 32px; border-radius: 8px; background: var(--cos-accent); display: grid; place-items: center; color: #fff; flex: 0 0 auto; } .cos-mcard-ttl { font-weight: 700; font-size: 14.5px; } .cos-mcard-state { display: flex; align-items: center; gap: 6px; color: var(--cos-text-2); font-size: 13px; margin-top: 1px; } .cos-mcard-grow { flex: 1 1 auto; } .cos-chipbtn { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border: 1px solid var(--cos-border-strong); border-radius: 7px; color: var(--cos-text-2); font-weight: 500; font-size: 12px; } .cos-chipbtn:hover { border-color: var(--cos-accent); color: var(--cos-accent); } .cos-mcard-files { margin-top: 9px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; } @container (max-width: 560px) { .cos-mcard-files { grid-template-columns: 1fr; } } .cos-filechip { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border: 1px solid var(--cos-border); border-radius: var(--cos-radius-ctl); color: var(--cos-text); cursor: pointer; background: var(--cos-surface); } .cos-filechip:hover { border-color: var(--cos-accent); background: var(--cos-accent-softer); } .cos-filechip .ico { color: var(--cos-muted); } /* MACHINES & DRIVES — one compact container, a collapsible row per drive/machine */ .cos-md { display: flex; flex-direction: column; gap: 12px; } /* each machine / drive is its own standalone card */ .cos-md-row { border: 1px solid var(--cos-border); border-radius: var(--cos-radius-card); background: var(--cos-surface); overflow: hidden; } .cos-md-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; } .cos-md-tico { flex: 0 0 auto; display: inline-flex; color: var(--cos-text-2); } .cos-md-name { font-weight: 700; font-size: 15px; color: var(--cos-text); flex: 0 0 auto; } .cos-md-sub { color: var(--cos-muted); font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* (V6A) two-line card header per the owner mock: icon chip · "Desktop [macOS]" · "My Mac · Connected" */ .cos-md-head.two { gap: 12px; padding: 14px 16px 11px; } .cos-md-tico.big { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--cos-border); background: var(--cos-surface-2); align-items: center; justify-content: center; } .cos-md-tt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cos-md-ttrow { display: flex; align-items: center; gap: 8px; } .cos-md-osbadge { font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: var(--cos-text-2); border: 1px solid var(--cos-border); background: var(--cos-surface-2); border-radius: 999px; padding: 2px 8px; } .cos-md-head.two .cos-md-sub { font-size: 12.5px; } .cos-md-state.on { color: var(--cos-green); font-weight: 600; } .cos-md-state.on::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 5px; vertical-align: 1px; } .cos-md-state.off { color: var(--cos-muted); } .cos-md-grow { flex: 1 1 auto; min-width: 8px; } .cos-md-acts { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; } .cos-mdbtn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border: 1px solid var(--cos-border-strong); border-radius: 9px; background: var(--cos-surface-2); color: var(--cos-text-2); font-weight: 600; font-size: 13px; } .cos-mdbtn:disabled, .cos-mdbtn.inert { opacity: .45; cursor: default; pointer-events: none; } /* (b15s) disconnected machines: preview buttons, not controls */ /* (uib45h) machine view squares: three cards whose backgrounds read like snapshots of the view */ .cos-mview-row { display: flex; gap: 10px; margin: 2px 0 10px; flex-wrap: wrap; } /* (V6A) owner mock: the view buttons are HORIZONTAL pills - mini preview on the left, bold label beside it - not tall snapshot squares */ /* (V7A) owner round-9: same fill as the file rectangles (.cos-md-item) so they read as buttons. Scoped under .cos-root to outrank the `.cos-root button` reset (0,1,1) - a bare .cos-mview loses and renders transparent. */ .cos-root .cos-mview { display: flex; flex-direction: row; align-items: center; gap: 9px; border: 1px solid transparent; border-radius: 11px; overflow: hidden; background: var(--cos-surface-2); padding: 7px 15px 7px 8px; text-align: left; transition: background .12s ease, border-color .12s ease, box-shadow .12s ease; } .cos-root .cos-mview:hover { background: var(--cos-surface); border-color: var(--cos-border); box-shadow: var(--cos-shadow-card); } /* (V4E) no lift - the squares hold still (owner: "those tiles not need to move") */ .cos-mview:disabled, .cos-mview.inert { opacity: .5; cursor: default; pointer-events: none; } .cos-mview-shot { position: relative; display: block; height: 32px; width: 48px; flex: 0 0 auto; border-radius: 8px; overflow: hidden; } .cos-mview-shot i { position: absolute; display: block; } .cos-mview-lbl { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--cos-text); padding: 0; border-top: none; background: transparent; white-space: nowrap; } .cos-mview-lbl svg { display: none; } /* the mini preview IS the icon */ /* terminal snapshot: dark screen, prompt lines, blinking block cursor */ .shot-term { background: #16181d; } /* theme-ok */ .shot-term .l1 { left: 10%; top: 15%; width: 52%; height: 7%; border-radius: 2px; background: #34d39a; opacity: .9; } /* theme-ok */ .shot-term .l2 { left: 10%; top: 33%; width: 70%; height: 7%; border-radius: 2px; background: #aab3c0; opacity: .55; } /* theme-ok */ .shot-term .l3 { left: 10%; top: 51%; width: 40%; height: 7%; border-radius: 2px; background: #aab3c0; opacity: .35; } /* theme-ok */ .shot-term .cur { left: 10%; top: 68%; width: 8%; height: 10%; background: #34d39a; } /* theme-ok; (V4E) no blink - the squares hold still */ @keyframes cos-mview-blink { 50% { opacity: 0; } } /* remote snapshot: desktop wallpaper, menu bar, two windows, dock */ .shot-remote { background: linear-gradient(135deg, #7ea6f5, #9d7bff); } /* theme-ok */ .shot-remote .bar { left: 0; top: 0; width: 100%; height: 11%; background: rgba(255,255,255,.75); } /* theme-ok */ .shot-remote .w1 { left: 11%; top: 24%; width: 46%; height: 44%; border-radius: 3px; background: rgba(255,255,255,.94); box-shadow: 0 2px 5px rgba(0,0,0,.18); } /* theme-ok */ .shot-remote .w2 { left: 46%; top: 40%; width: 41%; height: 39%; border-radius: 3px; background: rgba(255,255,255,.8); box-shadow: 0 2px 5px rgba(0,0,0,.18); } /* theme-ok */ .shot-remote .dock { left: 24%; bottom: 5%; width: 52%; height: 9%; border-radius: 4px; background: rgba(255,255,255,.55); } /* theme-ok */ /* files snapshot: a little folder grid */ .shot-files { background: var(--cos-surface-2); } .shot-files .fd { width: 21%; height: 22%; border-radius: 2px 2px 4px 4px; background: #e8b765; box-shadow: inset 0 2px 0 rgba(255,255,255,.4); } /* theme-ok */ .shot-files .f1 { left: 10%; top: 16%; } .shot-files .f2 { left: 40%; top: 16%; } .shot-files .f3 { left: 70%; top: 16%; } .shot-files .f4 { left: 10%; top: 56%; } .shot-files .f5 { left: 40%; top: 56%; } .shot-files .f6 { left: 70%; top: 56%; } /* agent-chat snapshot: bubbles + composer pill */ .shot-chat { background: var(--cos-surface); } .shot-chat .b { height: 16%; border-radius: 6px; } .shot-chat .bl { left: 8%; top: 11%; width: 48%; border-bottom-left-radius: 2px; background: var(--cos-surface-2); border: 1px solid var(--cos-line-1); } .shot-chat .br { right: 8%; top: 35%; width: 42%; border-bottom-right-radius: 2px; background: var(--cos-accent); opacity: .8; } .shot-chat .bl2 { left: 8%; top: 59%; width: 32%; border-bottom-left-radius: 2px; background: var(--cos-surface-2); border: 1px solid var(--cos-line-1); } .shot-chat .in { left: 8%; bottom: 7%; width: 84%; height: 13%; border-radius: 999px; border: 1px solid var(--cos-border); background: var(--cos-surface-2); } .cos-chipbtn-danger, .cos-mdbtn-danger { color: #f87171; } .cos-chipbtn-danger:hover, .cos-mdbtn-danger:hover { border-color: rgba(248, 113, 113, .45); } .cos-chipbtn.connoff { opacity: .45; text-decoration: line-through; } /* (connect1) substrate withheld from this machine kind */ .cos-mdbtn:hover { border-color: var(--cos-accent); color: var(--cos-text); } .cos-mdbtn.primary { color: var(--cos-accent); border-color: color-mix(in srgb, var(--cos-accent) 45%, var(--cos-border)); background: var(--cos-accent-softer); } /* Remote = purple, Terminal = grey, both filled like the Agents (primary) button */ .cos-mdbtn.remote { color: var(--cos-purple); border-color: color-mix(in srgb, var(--cos-purple) 45%, var(--cos-border)); background: color-mix(in srgb, var(--cos-purple) 14%, transparent); } .cos-mdbtn.remote:hover { color: var(--cos-purple); border-color: var(--cos-purple); } .cos-mdbtn.term { color: var(--cos-text-2); border-color: color-mix(in srgb, var(--cos-text-2) 34%, var(--cos-border)); background: color-mix(in srgb, var(--cos-text-2) 12%, transparent); } .cos-mdbtn.term:hover { color: var(--cos-text); border-color: var(--cos-text-2); } .cos-md-body { padding: 0 16px 15px; } /* (uib29) flush left with the header - the 44px chevron indent is gone with the chevron */ /* (V4D) machine view squares: on a narrow card they flow as a row between head and body (the old look); when the card is wide enough they dock TOP-RIGHT, with the head + folder grid running in the left column beside them. .cos-md is the size container. */ .cos-md { container-type: inline-size; } .cos-md-side { padding: 0 16px 10px; } .cos-md-side .cos-mview-row { margin: 0; } @container (min-width: 760px) { /* (V4F) the view squares share the TITLE ROW (title left, squares right); the folder grid runs the FULL card width underneath */ .cos-md-row.has-side { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: center; } .cos-md-row.has-side .cos-md-head { grid-column: 1; grid-row: 1; } .cos-md-row.has-side .cos-md-side { grid-column: 2; grid-row: 1; justify-self: end; padding: 12px 16px 6px 0; } .cos-md-row.has-side .cos-md-body { grid-column: 1 / -1; grid-row: 2; } .cos-md-row.has-side .cos-md-body:empty { display: none; } } .cos-md-body:empty { display: none; } /* (V3E1) a machine with no opened folders shows just its header - no empty body gap */ /* Google-Drive-style folder/file cards: a soft rounded pill per item, lifting on hover. .cos-root prefix raises specificity above `.cos-root button { background:none; border:none }`. */ .cos-md-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 8px; } .cos-root .cos-md-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 11px; text-align: left; min-width: 0; background: var(--cos-surface-2); border: 1px solid transparent; cursor: pointer; transition: background .12s ease, border-color .12s ease, box-shadow .12s ease; } .cos-root .cos-md-item:hover { background: var(--cos-surface); border-color: var(--cos-border); box-shadow: var(--cos-shadow-card); } .cos-md-ico { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; background: none; color: var(--cos-text-2); } .cos-md-ico svg { width: 20px; height: 20px; } .cos-md-ico.fold { color: var(--cos-orange, #f59e0b); } .cos-md-itx { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .cos-md-itt { font-weight: 600; font-size: 13.5px; color: var(--cos-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cos-md-its { font-size: 11.5px; color: var(--cos-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cos-root .cos-md-additem { background: none; border: 1px dashed var(--cos-border-strong); } .cos-root .cos-md-additem:hover { background: var(--cos-surface-2); box-shadow: none; } .cos-md-additem .cos-md-ico { color: var(--cos-muted); } /* hover action cluster (rename/delete) floated on a drive card, Google-Drive style */ .cos-md-itemwrap { position: relative; min-width: 0; } .cos-md-itemwrap .cos-md-item { width: 100%; box-sizing: border-box; } .cos-md-acts2 { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); display: none; gap: 1px; background: var(--cos-surface); border: 1px solid var(--cos-line-2); border-radius: 8px; padding: 1px; box-shadow: var(--cos-shadow-card); } .cos-md-itemwrap:hover .cos-md-acts2, .cos-md-itemwrap:focus-within .cos-md-acts2 { display: inline-flex; } /* rank 51: keyboard users can reach rename/delete */ .cos-md-acts2 .cos-iconbtn { width: 26px; height: 26px; border-radius: 7px; color: var(--cos-text-2); } .cos-md-acts2 .cos-iconbtn:hover { background: var(--cos-surface-2); color: var(--cos-text); } .cos-md-empty { padding: 2px 2px 4px; color: var(--cos-muted); font-size: 13px; } .cos-md-add { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; padding: 10px 14px; color: var(--cos-accent); font-weight: 600; font-size: 13.5px; background: none; border-radius: var(--cos-radius-ctl); cursor: pointer; } .cos-md-add:hover { background: var(--cos-accent-softer); } .cos-md-addrow { display: flex; flex-wrap: wrap; gap: 6px; } /* (V3E1) add a desktop | add a cloud computer */ .cos-md-connect { padding: 14px 16px; } /* rich machine card (redesign): header + 4 feature tiles + folders row */ .cos-mrich { padding: 16px; } .cos-mrich-head { display: flex; align-items: center; gap: 9px; } .cos-mrich-head .online { width: 9px; height: 9px; border-radius: 50%; background: var(--cos-online); flex: 0 0 auto; } .cos-mrich-head .online.off { background: var(--cos-border-strong); } .cos-mrich-name { font-weight: 700; font-size: 15px; color: var(--cos-text); } .cos-mrich-plat { display: inline-flex; color: var(--cos-text); } .cos-mtiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0 18px; } @container (max-width: 640px) { .cos-mtiles { grid-template-columns: repeat(2, 1fr); } } .cos-mtile { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 112px; padding: 16px 10px; border: 1px solid var(--cos-border); border-radius: 12px; background: var(--cos-surface-2); box-shadow: var(--cos-shadow-card); cursor: pointer; transition: border-color .15s ease, transform .15s ease; } .cos-mtile:hover { border-color: var(--cos-accent); transform: translateY(-2px); } .cos-mtile:active { transform: translateY(0) scale(.98); border-color: var(--cos-accent); } .cos-mtile:focus-visible { outline: 2px solid var(--cos-accent); outline-offset: 2px; } /* shared keyboard focus ring on every interactive control (design rule: never rely on the faint UA default) */ .cos-root button:focus-visible, .cos-root a:focus-visible, .cos-root [tabindex]:focus-visible, .cos-root .cos-tab:focus-visible, .cos-root .cos-dchip:focus-visible, .cos-root .cos-actioncard:focus-visible { outline: 2px solid var(--cos-accent); outline-offset: 2px; } .cos-mtile-bg { position: absolute; inset: 0; opacity: .5; pointer-events: none; overflow: hidden; } .cos-mtile-bg span { position: absolute; } .cos-mtile-ico { position: relative; z-index: 1; width: 42px; height: 42px; border-radius: 50%; background: #fff; box-shadow: 0 1px 5px rgba(15,23,42,.16); display: grid; place-items: center; margin-bottom: 9px; } /* theme-ok */ .cos-mtile-lbl { position: relative; z-index: 1; font-weight: 700; font-size: 13.5px; color: var(--cos-text); } .cos-mtile-sub { position: relative; z-index: 1; font-size: 11.5px; color: var(--cos-text-2); margin-top: 1px; } /* distinct background tint per tile - the card color gives each its own personality. All four keep the SAME card shape (border, radius, size); only the tint + preview differ. */ .cos-mtile.tile-remote { background: #f3edfb; } /* light lavender / purple */ /* theme-ok */ .cos-mtile.tile-agents { background: #e8f1fd; } /* light blue */ /* theme-ok */ .cos-mtile.tile-folders { background: #faf2e5; } /* warm cream */ /* theme-ok */ .cos-mtile.tile-term { background: #eceff4; } /* light slate */ /* theme-ok */ /* ---- simulated faded UI previews inside each tile (overlaid on the tint) ---- */ /* Remote: macOS desktop with two overlapping Finder windows */ .tile-remote .mbg-win { background: #fff; border: 1px solid #ddd2f1; border-radius: 5px; box-shadow: 0 3px 9px rgba(96,66,160,.22); } /* theme-ok */ .tile-remote .mbg-win::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: #e6ddf6; border-radius: 5px 5px 0 0; } /* theme-ok */ .tile-remote .mbg-win.a { left: 9px; top: 12px; width: 64px; height: 48px; } .tile-remote .mbg-win.b { left: 46px; top: 30px; width: 70px; height: 50px; } /* AI Agents: chat - a blue user bubble then gray assistant lines */ .tile-agents .mbg-bub { right: 12px; top: 14px; width: 70px; height: 19px; background: #bcd8f7; border-radius: 11px 11px 3px 11px; } /* theme-ok */ .tile-agents .mbg-tx { left: 14px; height: 7px; border-radius: 4px; background: #c2ccda; } /* theme-ok */ .tile-agents .mbg-tx.l1 { top: 46px; width: 96px; } .tile-agents .mbg-tx.l2 { top: 59px; width: 74px; } .tile-agents .mbg-tx.l3 { top: 72px; width: 88px; } /* Folders: file browser - sidebar + file rows */ .tile-folders .mbg-side { left: 0; top: 0; bottom: 0; width: 44px; background: #ecddc4; border-right: 1px solid #e2d2b6; } /* theme-ok */ .tile-folders .mbg-row { left: 54px; height: 8px; border-radius: 3px; background: #ddccb0; } /* theme-ok */ .tile-folders .mbg-row.r1 { top: 16px; width: 86px; } .tile-folders .mbg-row.r2 { top: 32px; width: 68px; } .tile-folders .mbg-row.r3 { top: 48px; width: 92px; } .tile-folders .mbg-row.r4 { top: 64px; width: 60px; } /* Terminal: light-slate card with a small FADED terminal-window preview (same opacity/footprint as the Remote desktop preview, so the card shape/white-space matches the other 3 exactly) */ .tile-term .mbg-term { left: 10px; top: 12px; width: 104px; height: 52px; background: #1d2531; border-radius: 6px; box-shadow: 0 3px 9px rgba(20,28,40,.22); } .tile-term .mbg-term::before { content: ""; position: absolute; left: 8px; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: #ff5f57; box-shadow: 8px 0 0 #febc2e, 16px 0 0 #28c840; } .tile-term .mbg-cl { height: 4.5px; border-radius: 2px; } .tile-term .mbg-cl.g1 { left: 10px; top: 20px; width: 52px; background: #3ddc84; } /* theme-ok */ .tile-term .mbg-cl.w1 { left: 10px; top: 30px; width: 78px; background: #cdd6e1; } /* theme-ok */ .tile-term .mbg-cl.g2 { left: 10px; top: 40px; width: 40px; background: #3ddc84; } /* theme-ok */ .cos-mfolders-head { display: flex; align-items: center; margin-bottom: 10px; } .cos-mfolders-ttl { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .07em; color: var(--cos-text-2); } .cos-mfolders-ttl svg { color: var(--cos-ink-1); } .cos-mfolders-add { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--cos-accent); font-weight: 600; font-size: 13px; } .cos-mfolders-add:hover { color: var(--cos-accent-hover); } .cos-mfolders-row { display: flex; gap: 8px; flex-wrap: wrap; } .cos-mfolders-empty { color: var(--cos-muted); font-size: 13px; } /* scoped under .cos-mfolders so the two-class selector outranks the .cos-root button reset */ .cos-mfolders .cos-folderpill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border: 1px solid #e0e0e0; border-radius: 9px; background: #fff; box-shadow: none; color: var(--cos-text); font-weight: 600; font-size: 13px; cursor: pointer; } /* theme-ok */ .cos-mfolders .cos-folderpill:hover { border-color: #c9ccd2; background: #fff; } /* theme-ok */ .cos-mfolders .cos-folderpill:active { transform: scale(.97); border-color: var(--cos-accent); } .cos-mfolders .cos-folderpill .ico { display: inline-flex; color: var(--cos-orange); } /* right rail (favorites / recent) */ .cos-rail { display: flex; flex-direction: column; gap: 10px; } .cos-rail-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--cos-muted); padding: 6px 4px; } .cos-rail-card { border: 1px solid var(--cos-border); border-radius: var(--cos-radius-card); background: var(--cos-surface); padding: 6px; } .cos-rail-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--cos-radius-ctl); cursor: pointer; } .cos-rail-item:hover { background: var(--cos-surface-2); } .cos-rail-ico { width: 36px; height: 36px; border-radius: 10px; background: var(--cos-accent-soft); display: grid; place-items: center; color: var(--cos-accent); flex: 0 0 auto; } .cos-rail-tt { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cos-rail-sub { color: var(--cos-muted); font-size: 12px; } .cos-rail-grow { flex: 1 1 auto; min-width: 0; } .cos-rail-chev { color: var(--cos-muted); } /* chat agent options */ .cos-agents-label, .cos-cards-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--cos-muted); } .cos-agents-label { margin: 28px 0 10px; } .cos-agents { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; } .cos-agent { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid var(--cos-border); border-radius: var(--cos-radius-ctl); text-align: left; transition: border-color .12s, background .12s; } .cos-agent:hover { border-color: var(--ac); background: color-mix(in srgb, var(--ac) 8%, #fff); } /* theme-ok */ .cos-agent-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: var(--ac); } .cos-agent-tx { display: flex; flex-direction: column; min-width: 0; } .cos-agent-tx b { font-size: 13.5px; font-weight: 600; color: var(--cos-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cos-agent-tx i { font-style: normal; font-size: 11.5px; color: var(--cos-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* favorites + recent — two short columns between the input and machines */ .cos-frgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 28px; } @container (max-width: 560px) { .cos-frgrid { grid-template-columns: 1fr; gap: 18px; } } .cos-fr-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--cos-muted); margin-bottom: 6px; display: block; } .cos-fr-item { display: flex; align-items: center; gap: 9px; padding: 5px 7px; border-radius: 8px; cursor: pointer; } .cos-fr-item:hover { background: var(--cos-surface-2); } .cos-fr-ico { width: 26px; height: 26px; border-radius: 7px; background: var(--cos-accent-soft); color: var(--cos-accent); display: grid; place-items: center; flex: 0 0 auto; } .cos-fr-grow { flex: 1 1 auto; min-width: 0; } .cos-fr-tt { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cos-fr-sub { color: var(--cos-muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cos-cards-label { margin: 16px 0 8px; } .cos-cards { margin-top: 0; } /* agent / chat-type selector inside the chat options bar */ .cos-agentsel { position: relative; display: inline-flex; } .cos-agent-pill { color: var(--cos-text-2); font-weight: 500; } .cos-agent-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ac); display: inline-block; margin-right: 7px; flex: 0 0 auto; } .cos-agent-logo { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-right: 7px; flex: 0 0 auto; } .cos-agent-logo svg { display: block; width: 16px; height: 16px; } .cos-amitem .cos-agent-logo { width: 18px; height: 18px; margin: 0; } .cos-amitem .cos-agent-logo svg { width: 18px; height: 18px; } .cos-agentmenu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; min-width: 252px; background: #fff; border: 1px solid var(--cos-border); border-radius: 10px; box-shadow: var(--cos-shadow-pop); padding: 5px; } /* theme-ok */ .cos-agentmenu[hidden] { display: none; } .cos-agentmenu-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border-radius: 10px; text-align: left; } .cos-agentmenu-item:hover { background: var(--cos-surface-2); } .cos-agentmenu-item.sel { background: color-mix(in srgb, var(--ac) 10%, #fff); } /* theme-ok */ .cos-agentmenu-item .cos-agent-ico { width: 30px; height: 30px; border-radius: 9px; } /* chat-vibe hero — talking-head avatar + streaming bubbles */ .cos-chathero { margin-bottom: 10px; } .cos-chatmsgs { display: flex; flex-direction: column; gap: 14px; max-height: 380px; overflow-y: auto; padding: 6px 2px; } .cos-msg { display: flex; align-items: flex-start; gap: 13px; } .cos-msg-user { justify-content: flex-end; } .cos-bubble { background: var(--cos-surface); border: 1px solid var(--cos-border); border-radius: 12px; padding: 9px 13px; font-size: 14px; line-height: 1.5; color: var(--cos-text); box-shadow: var(--cos-shadow-card); max-width: 80%; } .cos-bubble b { font-weight: 700; } /* (V5A) chat markdown lists: the page-global *{margin:0;padding:0} reset strips the UA list indent, leaving bullet dots flush against the bubble edge. Restore a true hanging indent + rhythm. */ .cos-bubble ul, .cos-bubble ol { margin: 6px 0; padding-left: 22px; } .cos-bubble ul { list-style: disc outside; } .cos-bubble ol { list-style: decimal outside; } .cos-bubble li { margin: 3px 0; } .cos-bubble li::marker { color: var(--cos-muted); } .cos-bubble ul ul, .cos-bubble ol ul { list-style-type: circle; } .cos-bubble li > ul, .cos-bubble li > ol { margin: 2px 0; } .cos-bubble p { margin: 6px 0; } .cos-bubble > :first-child { margin-top: 0; } .cos-bubble > :last-child { margin-bottom: 0; } .cos-bubble-user { background: var(--cos-accent); color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(59,130,246,.25); } /* (V5A) web-page context chip on chats opened from a browser tile */ .cos-pagectx { display: inline-flex; align-items: center; gap: 5px; color: var(--cos-muted); border: 1px dashed var(--cos-border); background: transparent; cursor: default; max-width: 180px; } .cos-pagectx > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cos-mute { align-self: center; color: var(--cos-muted); flex: 0 0 auto; } .cos-mute.muted { color: var(--cos-muted); } .cos-mute:not(.muted) { color: var(--cos-accent); background: var(--cos-accent-soft); } .cos-avatar { width: 60px; height: 60px; border-radius: 50%; position: relative; flex: 0 0 auto; box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--cos-border), 0 0 0 10px rgba(59, 130, 246, .08); background: #e9f1ff; cursor: pointer; } /* theme-ok */ .cos-avatar svg { width: 100%; height: 100%; display: block; } .cos-avatar-3d { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; } .cos-avatar-3d canvas { width: 100% !important; height: 100% !important; display: block; } .cos-th { width: 100%; height: 100%; } .cos-avatar-svg { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; } .cos-avatar.has3d .cos-avatar-svg { display: none; } /* (b15h) loading state: spinner instead of the flat glyph until the 3D avatar is ready */ .cos-avatar .cos-avspin { display: none; } .cos-avatar.avloading:not(.has3d) .cos-avatar-svg { visibility: hidden; } .cos-avatar.avloading:not(.has3d) .cos-avspin { display: block; position: absolute; z-index: 2; top: 50%; left: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); border-top-color: rgba(255,255,255,.9); animation: cos-avspin-rot .8s linear infinite; } .cos-avatar.cos-av-onlight.avloading:not(.has3d) .cos-avspin { border-color: rgba(0,0,0,.14); border-top-color: rgba(0,0,0,.55); } @keyframes cos-avspin-rot { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .cos-avatar .cos-avspin { animation: none; } } .cos-avatar .online { position: absolute; bottom: 0; right: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--cos-online); border: 3px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); z-index: 3; } /* theme-ok */ .cos-avatar-3d svg { width: 100% !important; height: 100% !important; display: block; } .cos-mouth { transform-box: fill-box; transform-origin: center; } .cos-eyes { transform-box: fill-box; transform-origin: center; animation: cos-blink 4.5s infinite; } .cos-avatar.speaking .cos-mouth { animation: cos-talk .24s ease-in-out infinite; } .cos-avatar.speaking { box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(59, 130, 246, .38), 0 0 0 10px rgba(59, 130, 246, .12); } @keyframes cos-talk { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1.5); } } @keyframes cos-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.12); } } /* (V16A) THINKING is not talking: while the agent streams, the avatar stays alive - a soft ring breath and a slower head bob - but the mouth does not move. The mouth only animates under .speaking, which is set while the reply is actually being voiced (and rides the same cursor). */ .cos-avatar.thinking { animation: cos-think 1.7s ease-in-out infinite; } .cos-avatar.thinking .cos-headgrp { animation: cos-headbob 4.2s ease-in-out infinite; } @keyframes cos-think { 0%, 100% { box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(59, 130, 246, .20), 0 0 0 9px rgba(59, 130, 246, .05); } 50% { box-shadow: 0 0 0 4px #fff, 0 0 0 6px rgba(59, 130, 246, .34), 0 0 0 13px rgba(59, 130, 246, .10); } } .cos-headgrp { transform-box: fill-box; transform-origin: 50% 72%; } .cos-avatar.speaking .cos-headgrp { animation: cos-headbob 3s ease-in-out infinite; } @keyframes cos-headbob { 0%, 100% { transform: translateY(0) rotate(0deg); } 30% { transform: translateY(-.5px) rotate(1.7deg); } 65% { transform: translateY(.4px) rotate(-1.7deg); } } @keyframes cos-pulse { 0% { box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--cos-border), 0 0 0 4px rgba(59,130,246,.45); } 100% { box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--cos-border), 0 0 0 16px rgba(59,130,246,0); } } @media (prefers-reduced-motion: reduce) { .cos-root * { transition: none !important; animation: none !important; } } /* ---------- P2: content tiles (browser / files / editor / terminal) ---------- */ .cos-main.full { padding: 0; overflow: hidden; display: flex; } .cos-main.full > * { flex: 1 1 auto; min-width: 0; } .cos-iconbtn:disabled { opacity: .35; pointer-events: none; } .cos-loading { display: flex; align-items: center; gap: 10px; padding: 16px; color: var(--cos-text-2); font-size: 14px; } /* (video2) editor/dash content loads: center the spinner in the tile body so the wait reads as intentional loading, not a blank white page */ .cos-loading.ctr { flex: 1; justify-content: center; min-height: 180px; } .cos-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--cos-border-strong); border-top-color: var(--cos-accent); animation: cos-spin .8s linear infinite; } @keyframes cos-spin { to { transform: rotate(360deg); } } /* files */ .cos-files { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: 12px 14px; } /* (V9I) the ViewHeader is a full-bleed toolbar: flush under the address bar, edge to edge */ .cos-files > .cos-vh { margin: -12px -14px 12px; flex: 0 0 52px; } .cos-crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--cos-text-2); padding: 2px 4px 12px; } .cos-fnote { font-size: 12px; color: var(--cos-text-2); background: var(--cos-accent-softer); border: 1px solid var(--cos-border); border-radius: 8px; padding: 7px 11px; margin-bottom: 10px; } .cos-flist { display: flex; flex-direction: column; gap: 2px; } .cos-frow { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; border-radius: 9px; color: var(--cos-text); font-size: 13.5px; } .cos-frow .chev { margin-left: auto; color: var(--cos-text-2); } .cos-frow:hover { background: var(--cos-surface-2); } .cos-frow.demo { color: var(--cos-text-2); cursor: default; } .cos-fempty { padding: 22px 12px; color: var(--cos-text-2); font-size: 13px; } /* rank 87: Files folder filter bar + pagination */ .cos-ffilterbar { display: flex; align-items: center; gap: 10px; padding: 4px 2px 10px; } .cos-ffilter-l { display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 0; max-width: 340px; padding: 5px 10px; border: 1px solid var(--cos-border); border-radius: 9px; background: var(--cos-surface-2); color: var(--cos-muted); } .cos-ffilter-l:focus-within { border-color: var(--cos-accent); } .cos-ffilter-l input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--cos-ink-1); outline: none; } .cos-ffilter-count { font-size: 12px; color: var(--cos-muted); white-space: nowrap; font-variant-numeric: tabular-nums; } .cos-fmore { display: flex; justify-content: center; padding: 12px 0 4px; } /* browser */ .cos-webwrap { display: flex; flex-direction: column; min-height: 0; } .cos-webnote { flex: 0 0 auto; font-size: 12px; padding: 6px 12px; color: var(--cos-text-2); background: var(--cos-surface-2); border-bottom: 1px solid var(--cos-border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cos-webnote a { color: var(--cos-accent); } .cos-webframe { flex: 1 1 auto; border: 0; width: 100%; min-height: 0; background: #fff; } /* theme-ok */ /* terminal */ .cos-termwrap { display: flex; flex-direction: column; min-height: 0; background: #0f1219; } .cos-termhead { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 14px; color: #b9c6dd; font-size: 12.5px; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.07); } .cos-termhead .grow { flex: 1; } .cos-termhead .online { width: 8px; height: 8px; border-radius: 50%; background: var(--cos-online); } .cos-termhead .cos-termhint { margin-left: auto; font-weight: 500; font-size: 11px; color: var(--cos-ink-4); letter-spacing: .01em; } .cos-chipbtn.cos-scratchsave { color: var(--cos-accent); } .cos-termbox { flex: 1 1 auto; min-height: 0; padding: 8px 4px 8px 12px; } .cos-termbox .xterm { height: 100%; } /* rank 47: coarse-pointer terminal soft-key bar (Esc/Tab/^C/arrows + ABC to raise the keyboard) */ .cos-termkeys { display: flex; gap: 6px; padding: 7px 10px; border-top: 1px solid var(--cos-line-1); overflow-x: auto; -webkit-overflow-scrolling: touch; flex: 0 0 auto; } .cos-termkey { flex: 0 0 auto; min-width: 44px; height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--cos-border); background: var(--cos-surface-2); color: var(--cos-text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .cos-termkey:active { background: var(--cos-accent-softer); } .cos-termwrap .cos-fempty { color: #8fa1bd; } /* editor */ .cos-edwrap { display: flex; flex-direction: column; min-height: 0; background: var(--cos-surface); } .cos-edhead { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; padding: 9px 14px; border-bottom: 1px solid var(--cos-border); color: var(--cos-text); font-size: 13px; font-weight: 600; } .cos-edhead .st { font-weight: 500; font-size: 12px; color: var(--cos-text-2); } .cos-edhead .st.dirty { color: var(--cos-accent); } .cos-edhead .grow { flex: 1; } .cos-edhead .nm { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* phones/narrow tiles: the toolbar wraps onto a second row instead of pushing Save off-screen */ @media (max-width: 760px) { .cos-edhead { flex-wrap: wrap; row-gap: 6px; } } .cos-edgutterwrap { display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden; } .cos-edgutter { flex: 0 0 auto; overflow: hidden; padding: 14px 8px 14px 10px; font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--cos-muted); text-align: right; white-space: pre; user-select: none; pointer-events: none; background: var(--cos-surface); border-right: 1px solid var(--cos-border); } .cos-edta { flex: 1 1 auto; min-height: 0; min-width: 0; border: 0; resize: none; padding: 14px 16px; font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--cos-text); background: var(--cos-surface); outline: none; } /* syntax highlighting: a 
 painted behind a transparent textarea. The two layers must be
   TYPOGRAPHICALLY BYTE-IDENTICAL - the textarea has no wrap attribute, so it soft-wraps, and any
   difference in font/padding/tab-size/ligatures/effective content width changes the wrap COLUMN,
   after which the drift is cumulative and grossly visible. Every declaration below is load-bearing. */
.cos-edstack { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; }
.cos-edhl, .cos-edta.hl {
  /* 1. FONT - the exact same shorthand as .cos-edta above */
  font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
  /* 2. PADDING - matches .cos-edta above exactly */
  padding: 14px 16px;
  /* 3. BOX MODEL */
  box-sizing: border-box; border: 0; margin: 0;
  /* 4. WRAPPING - replicate the textarea UA default, NOT `pre` */
  white-space: pre-wrap; overflow-wrap: break-word; word-break: normal;
  /* 5. TAB SIZE - neither element sets it by default (UA = 8); set it explicitly and identically
        or every tab drifts the two layers apart by 4 columns */
  tab-size: 4; -moz-tab-size: 4;
  /* 6. METRICS - Menlo applies kerning/ligatures differently in a textarea than in a pre */
  letter-spacing: normal; word-spacing: normal;
  font-variant-ligatures: none; font-kerning: none; font-feature-settings: normal;
  text-rendering: auto; -webkit-font-smoothing: antialiased;
  /* 7. SCROLLBAR GUTTER - the textarea reserves scrollbar width, the pre (overflow:hidden) does
        not, which changes the wrap column. Reserve on both. */
  scrollbar-gutter: stable;
}
.cos-edhl {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;                    /* the TEXTAREA scrolls; the pre is scrolled by JS */
  pointer-events: none; user-select: none;
  color: var(--cos-text); background: var(--cos-surface);
}
.cos-edta.hl {
  position: relative; z-index: 1;
  flex: 1 1 auto; min-width: 0;
  background: transparent;             /* the pre behind it supplies the surface */
  color: transparent;                  /* glyphs come from the pre */
  caret-color: var(--cos-text);        /* but the caret must stay visible */
  resize: none; outline: none;
}
.cos-edta.hl::selection { background: var(--cos-accent-soft); color: transparent; }
/* token palette. Token spans carry ONLY color and font-style - a font-weight, background, padding
   or border would change advance width or box size and shear the overlay off the textarea text. */
.cos-edhl .tk-cm { color: #6a737d; font-style: italic; }
.cos-edhl .tk-st, .cos-edhl .tk-re { color: #032f62; }
.cos-edhl .tk-nu, .cos-edhl .tk-li { color: #005cc5; }
.cos-edhl .tk-kw { color: #d73a49; }
.cos-edhl .tk-fn { color: #6f42c1; }
.cos-edhl .tk-ty, .cos-edhl .tk-key { color: #22863a; }
.cos-edhl .tk-op, .cos-edhl .tk-pu { color: var(--cos-text-2); }
.cos-root.cos-dark .cos-edhl .tk-cm { color: #7f8c98; }
.cos-root.cos-dark .cos-edhl .tk-st, .cos-root.cos-dark .cos-edhl .tk-re { color: #a5d6ff; }
.cos-root.cos-dark .cos-edhl .tk-nu, .cos-root.cos-dark .cos-edhl .tk-li { color: #79c0ff; }
.cos-root.cos-dark .cos-edhl .tk-kw { color: #ff7b72; }
.cos-root.cos-dark .cos-edhl .tk-fn { color: #d2a8ff; }
.cos-root.cos-dark .cos-edhl .tk-ty, .cos-root.cos-dark .cos-edhl .tk-key { color: #7ee787; }
/* high-contrast / forced-colors: transparent text is illegible there, so drop the overlay entirely
   and hand the glyphs back to the textarea */
@media (forced-colors: active) {
  .cos-edhl { display: none; }
  .cos-edta.hl { color: CanvasText; background: Canvas; }
}
.cos-edview { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 14px 18px; font-size: 13.5px; }
.cos-edview table { border-collapse: collapse; }
.cos-edview td, .cos-edview th { border: 1px solid var(--cos-border); padding: 4px 10px; font-size: 12.5px; }

/* data views: interactive Table (sort/filter/inline-edit) for csv/tsv/json */
.cos-dv { flex: 1 1 auto; min-height: 0; overflow: auto; background: var(--cos-surface); }
.cos-dvtable { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; color: var(--cos-text); }
.cos-dvtable th, .cos-dvtable td { border-bottom: 1px solid var(--cos-border); border-right: 1px solid var(--cos-border); padding: 7px 11px; text-align: left; white-space: nowrap; max-width: 380px; overflow: hidden; text-overflow: ellipsis; }
.cos-dvth { position: sticky; top: 0; z-index: 2; background: var(--cos-surface-2); color: var(--cos-text-2); font-weight: 600; cursor: pointer; user-select: none; }
.cos-dvth:hover { background: var(--cos-border); color: var(--cos-text); }
.cos-dvth.sorted { color: var(--cos-accent); }
.cos-dvth .lbl { margin-right: 3px; }
.cos-dvth svg { vertical-align: -2px; opacity: .85; }
.cos-dvth.t-num, .cos-dvtd.t-num { text-align: right; font-variant-numeric: tabular-nums; }
.cos-dvrh { position: sticky; left: 0; z-index: 1; background: var(--cos-surface-2); color: var(--cos-muted); font-size: 11px; text-align: center !important; min-width: 38px; }
thead .cos-dvrh { z-index: 4; }
.cos-dvfilters th { position: sticky; top: 35px; z-index: 3; background: var(--cos-surface-2); padding: 4px 5px; }
.cos-dvfilters th.cos-dvrh { color: var(--cos-muted); text-align: center; }
.cos-dvfilter { width: 100%; min-width: 56px; box-sizing: border-box; font: inherit; font-size: 11px; padding: 3px 7px; border: 1px solid var(--cos-border); border-radius: var(--cos-radius-ctl); background: var(--cos-app-bg); color: var(--cos-text); }
.cos-dvfilter::placeholder { color: var(--cos-muted); }
.cos-dvfilter:focus { outline: none; border-color: var(--cos-accent); }
.cos-dvtd { color: var(--cos-text); }
.cos-dvtd[contenteditable="true"] { cursor: text; }
.cos-dvtd[contenteditable="true"]:focus { outline: 2px solid var(--cos-accent); outline-offset: -2px; background: var(--cos-app-bg); white-space: normal; }
.cos-dvtable tbody tr:hover > td { background: var(--cos-surface-2); }
.cos-dvtable tbody tr:hover > .cos-dvrh { background: var(--cos-border); }
.cos-dvfoot { display: flex; align-items: center; gap: 14px; padding: 9px 12px; position: sticky; left: 0; }
.cos-dvaddrow { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12px; padding: 5px 11px; border: 1px solid var(--cos-border); border-radius: var(--cos-radius-ctl); background: var(--cos-surface); color: var(--cos-text-2); cursor: pointer; }
.cos-dvaddrow:hover { background: var(--cos-surface-2); border-color: var(--cos-accent); color: var(--cos-text); }
.cos-dvcount { font-size: 12px; color: var(--cos-muted); }

/* data views: Kanban board (group-by + drag-to-move) */
.cos-dvkanban { display: flex; flex-direction: column; }
.cos-dvbar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--cos-border); font-size: 12.5px; color: var(--cos-text-2); }
.cos-dvbar .grow { flex: 1; }
.cos-dvbarlbl { color: var(--cos-muted); }
.cos-dvgroupsel { font: inherit; font-size: 12.5px; padding: 4px 8px; border: 1px solid var(--cos-border); border-radius: var(--cos-radius-ctl); background: var(--cos-surface); color: var(--cos-text); cursor: pointer; }
.cos-dvboard { flex: 1 1 auto; min-height: 0; display: flex; gap: 12px; padding: 14px; overflow-x: auto; align-items: flex-start; }
.cos-dvcol { flex: 0 0 264px; max-width: 264px; display: flex; flex-direction: column; max-height: 100%; background: var(--cos-surface-2); border: 1px solid var(--cos-border); border-radius: var(--cos-radius-card); transition: box-shadow .12s, border-color .12s; }
.cos-dvcol.dropready { border-color: var(--cos-accent); box-shadow: 0 0 0 2px var(--cos-accent-soft); }
.cos-dvcolh { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; font-size: 12.5px; font-weight: 600; color: var(--cos-text); border-bottom: 1px solid var(--cos-border); }
.cos-dvcoltitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cos-dvcoln { flex: 0 0 auto; min-width: 20px; text-align: center; font-size: 11px; font-weight: 600; color: var(--cos-muted); background: var(--cos-surface); border-radius: 999px; padding: 1px 7px; }
.cos-dvcards { flex: 1 1 auto; min-height: 28px; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.cos-dvcard { background: var(--cos-surface); border: 1px solid var(--cos-border); border-radius: 9px; padding: 10px 11px; cursor: grab; box-shadow: var(--cos-shadow-card); }
.cos-dvcard:hover { border-color: var(--cos-border-strong); }
.cos-dvcard.dvdragging { opacity: .4; }
.cos-dvcardt { font-size: 13px; font-weight: 600; color: var(--cos-text); line-height: 1.35; white-space: normal; }
.cos-dvcardm { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.cos-dvtag { font-size: 11px; padding: 2px 7px; border-radius: 6px; background: var(--cos-surface-2); color: var(--cos-text-2); border: 1px solid var(--cos-border); white-space: nowrap; }
.cos-dvtag.t-num { font-variant-numeric: tabular-nums; }

/* data views: Calendar (month grid, drag-to-reschedule) */
.cos-dvcal { display: flex; flex-direction: column; }
.cos-dvcalbtn { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 12px; padding: 4px 9px; border: 1px solid var(--cos-border); border-radius: var(--cos-radius-ctl); background: var(--cos-surface); color: var(--cos-text-2); cursor: pointer; }
.cos-dvcalbtn:hover { background: var(--cos-surface-2); border-color: var(--cos-accent); color: var(--cos-text); }
.cos-dvcaltoday { margin-left: 4px; }
.cos-dvcalmonth { font-size: 14px; font-weight: 700; color: var(--cos-text); min-width: 154px; text-align: center; }
.cos-dvcalgrid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(86px, 1fr); gap: 1px; background: var(--cos-border); padding: 1px; overflow: auto; }
.cos-dvcaldow { background: var(--cos-surface-2); color: var(--cos-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; padding: 6px 8px; text-align: center; position: sticky; top: 0; z-index: 1; }
.cos-dvcalday { background: var(--cos-surface); padding: 5px 6px; display: flex; flex-direction: column; gap: 4px; min-height: 0; overflow: hidden; }
.cos-dvcalday.empty { background: var(--cos-surface-2); opacity: .45; }
.cos-dvcalday.today { box-shadow: inset 0 0 0 2px var(--cos-accent); }
.cos-dvcalday.dropready { box-shadow: inset 0 0 0 2px var(--cos-accent); background: var(--cos-accent-soft); }
.cos-dvcaldn { font-size: 12px; font-weight: 600; color: var(--cos-text-2); align-self: flex-end; }
.cos-dvcalday.today .cos-dvcaldn { color: var(--cos-accent); }
.cos-dvcalevents { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }
.cos-dvevent { font-size: 11px; line-height: 1.3; padding: 3px 6px; border-radius: 5px; background: var(--cos-accent-soft); color: var(--cos-accent-hover); border: 1px solid transparent; cursor: grab; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cos-dvevent:hover { border-color: var(--cos-accent); }
.cos-dvevent.dvdragging { opacity: .4; }

/* drawer live items */
.cos-drawer-item.act, .cos-drawer-sub.act { cursor: pointer; }

/* live home: real drive grid + machine state */
.cos-drivegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 7px; margin-bottom: 14px; }
.cos-dchip { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; background: var(--cos-surface); border: 1px solid var(--cos-border); color: var(--cos-text); font-size: 13px; font-weight: 600; text-align: left; min-width: 0; }
.cos-dchip:hover { border-color: var(--cos-accent); box-shadow: var(--cos-shadow-card); }
.cos-dchip .ico { color: var(--cos-text-2); flex: 0 0 auto; display: grid; place-items: center; }
.cos-dchip .ico.fold { color: var(--cos-orange, #f59e0b); }
.cos-dchip .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cos-cards-label svg { vertical-align: -2px; margin-right: 4px; }
.cos-chipbtn:disabled { opacity: .45; pointer-events: none; }

/* auth + account (guest mode parity): the legacy auth modal must beat .cos-root's z-index */
html.cos-active .auth-modal-overlay { z-index: 2147483100; }
/* z-index 60 on the wrappers: the tabstrip-spacer sibling rule (~line 138) puts a transform on them,
   which traps the menus' z-50 inside a z:auto stacking context that the address bar zone (z-31)
   paints over - the 3-dots menu opened but was invisible. Lift the wrappers above the addr zone. */
.cos-acct { position: relative; z-index: 60; }
.cos-acctmenu { position: absolute; top: 40px; right: 0; min-width: 210px; background: var(--cos-surface); border: 1px solid var(--cos-border); border-radius: 12px; box-shadow: 0 12px 34px rgba(15,23,42,.14); padding: 6px; z-index: 50; }
.cos-dots { position: relative; z-index: 60; }
.cos-dotsmenu { position: absolute; top: 40px; right: 0; min-width: 172px; background: var(--cos-surface); border: 1px solid var(--cos-border); border-radius: 12px; box-shadow: 0 12px 34px rgba(15,23,42,.14); padding: 6px; z-index: 50; }
.cos-dotsmenu .cos-acctmenu-item { gap: 9px; align-items: center; }
.cos-dotsmenu .cos-acctmenu-item svg { flex: 0 0 auto; opacity: .9; }
/* (uib45d/e) file/folder kebab in the editor head + files toolbar: menu drops under the compact head */
.cos-edkebab { flex: 0 0 auto; }
.cos-edkebab .cos-dotsmenu { top: 32px; min-width: 190px; }
.cos-acct-email { padding: 8px 10px 6px; font-size: 12px; font-weight: 600; color: var(--cos-text-2); border-bottom: 1px solid var(--cos-border); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cos-acctmenu-item { display: flex; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--cos-text); }
.cos-acctmenu-item:hover { background: var(--cos-surface-2); }
.cos-acctmenu-item.danger { color: #dc2626; }
/* guest profile slot is a compact "Sign up" CTA. Scoped under .cos-root so the two-class selector
   outranks the `.cos-root button { background:none }` reset (which would otherwise blank the accent). */
.cos-root .cos-signup { width: auto; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px; border-radius: 999px; background: var(--cos-accent); color: #fff; font-weight: 600; font-size: 12.5px; }
.cos-root .cos-signup:hover { background: var(--cos-accent); filter: brightness(1.08); color: #fff; }   /* theme-ok: white text on the brand accent in both themes */
.cos-root .cos-signup span { white-space: nowrap; }
/* returning logged-out users: a quiet text 'Log in' beside the accent 'Sign up' (rank 60) */
.cos-root .cos-signin-link { width: auto; height: 30px; padding: 0 10px; margin-right: 2px; background: none; border: none; color: var(--cos-text-2); font-weight: 600; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.cos-root .cos-signin-link:hover { color: var(--cos-accent); }
/* guest first-run: a single quiet 'Powered by Claude' instead of the power-user config row (rank 52) */
.cos-poweredby { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--cos-muted); padding: 4px 2px; }
.cos-poweredby svg { opacity: .7; }
/* brief attention pulse on the composer when a guest clicks "AI Agent" (rank 59) */
@keyframes cos-pulse-once { 0% { box-shadow: 0 0 0 0 var(--cos-accent-soft); } 100% { box-shadow: 0 0 0 8px transparent; } }
.cos-pulse-once { animation: cos-pulse-once .9s ease-out 1; border-radius: 12px; }
.cos-frow.demo { cursor: pointer; }
.cos-fr-item, .cos-filechip { cursor: pointer; }

/* ---------- P3: chat tile ---------- */
.cos-chatwrap { display: flex; flex-direction: column; min-height: 0; background: var(--cos-surface-2); }
/* chat reads as one centered column (hero -> caption header -> conversation -> composer), not
   full-bleed slabs: the header is a quiet caption under the avatar, the log keeps its scrollbar
   at the tile edge while its CONTENT is capped at a readable width */
.cos-chatlog { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px max(16px, calc((100% - 860px) / 2)); display: flex; flex-direction: column; gap: 9px; }
.cos-chatav { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: #e9f1ff; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--cos-border); }  /* theme-ok */
.cos-chatav svg { width: 100%; height: 100%; display: block; }
.cos-chatlog .cos-msg { display: flex; gap: 10px; align-items: flex-start; }
.cos-chatlog .cos-msg-user { justify-content: flex-end; }
.cos-chatlog .cos-bubble { max-width: 72%; }
.cos-chatlog .cos-bubble pre { overflow-x: auto; max-width: 100%; }
.cos-chatsys { align-self: center; font-size: 12px; color: var(--cos-text-2); background: var(--cos-accent-softer); border: 1px solid var(--cos-border); border-radius: 999px; padding: 4px 12px; }
/* (b15f) home + chat textareas share ONE rule so the composer looks identical on both */
.cos-omnibig textarea[data-homechat], .cos-omnibig textarea[data-chatin] { flex: 1 1 auto; min-width: 0; border: none; outline: none; font-size: 19px; line-height: 1.4; color: var(--cos-text); background: none; resize: none; overflow-y: auto; max-height: 180px; padding: 14px 0; font-family: inherit; box-shadow: none; }   /* (uib35) taller type area: vertical padding keeps a single line vertically centered and grows the whole box */
.cos-omnibig textarea[data-homechat]::placeholder, .cos-omnibig textarea[data-chatin]::placeholder { color: var(--cos-muted); }
.cos-omnibig textarea[data-homechat]:focus, .cos-omnibig textarea[data-chatin]:focus { border: none; box-shadow: none; }
.cos-keybanner { flex: 0 0 auto; width: min(860px, calc(100% - 32px)); margin: 2px auto 6px; padding: 10px 14px; font-size: 13px; color: var(--cos-text); background: var(--cos-accent-softer); border: 1px solid var(--cos-border); border-radius: 14px; }
/* (b15d) in-chat key card: ONE bot-style message asking for company + API key (no banner, no popup) */
.cos-keycard .row { display: flex; gap: 6px; margin-top: 9px; align-items: center; flex-wrap: wrap; }
.cos-root .cos-keycard select { height: 30px; border: 1px solid var(--cos-border-strong); border-radius: 8px; background: var(--cos-surface); color: var(--cos-text); font: inherit; font-size: 12px; padding: 0 6px; cursor: pointer; }
.cos-root .cos-keycard input { height: 30px; flex: 1 1 150px; min-width: 130px; max-width: 260px; border: 1px solid var(--cos-border-strong); border-radius: 8px; padding: 0 10px; font: inherit; font-size: 12px; background: var(--cos-surface); color: var(--cos-text); }
.cos-root .cos-keysave { height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--cos-accent); color: #fff; font-weight: 600; font-size: 12px; cursor: pointer; }
.cos-root .cos-keysave:hover { filter: brightness(1.08); }
/* (cmp17) requirements intake card: the questions the agent asks before founding a project */
.cos-root .cos-briefcard { max-width: 560px; padding: 14px 16px 13px; }
.cos-brief-head { display: flex; align-items: center; gap: 7px; font-size: 13.5px; margin-bottom: 3px; }
.cos-brief-head svg { opacity: .75; }
.cos-brief-count { margin-left: auto; font-size: 11.5px; color: var(--cos-muted); font-variant-numeric: tabular-nums; }
.cos-brief-sub { font-size: 12.5px; color: var(--cos-muted); margin-top: 2px; }
.cos-briefq { margin-top: 13px; }
.cos-briefq-t { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--cos-text); }
.cos-briefq-n { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; background: var(--cos-accent-softer); color: var(--cos-accent); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; align-self: center; }
.cos-briefq-why { font-size: 11.5px; color: var(--cos-muted); margin: 2px 0 0 26px; }
.cos-briefopts { display: flex; flex-wrap: wrap; gap: 6px; margin: 7px 0 0 26px; }
.cos-root .cos-briefopt { border: 1px solid var(--cos-border-strong); background: var(--cos-surface); color: var(--cos-text); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12.5px; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.cos-root .cos-briefopt:hover { border-color: var(--cos-accent); }
.cos-root .cos-briefopt.on { background: var(--cos-accent); border-color: var(--cos-accent); color: #fff; font-weight: 600; }
.cos-root .cos-briefother { flex: 1 1 150px; min-width: 130px; height: 32px; border: 1px dashed var(--cos-border-strong); border-radius: 999px; padding: 0 13px; font: inherit; font-size: 12.5px; background: transparent; color: var(--cos-text); }
.cos-root .cos-briefother:focus { border-style: solid; border-color: var(--cos-accent); outline: none; }
.cos-root .cos-briefother.on { border-style: solid; border-color: var(--cos-accent); background: var(--cos-accent-softer); }
.cos-brief-actions { display: flex; align-items: center; gap: 8px; margin-top: 15px; }
.cos-root .cos-briefgo { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--cos-accent); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.cos-root .cos-briefgo:hover { filter: brightness(1.08); }
.cos-root .cos-briefskip { height: 34px; padding: 0 10px; border: 0; background: none; color: var(--cos-muted); font: inherit; font-size: 12.5px; cursor: pointer; }
.cos-root .cos-briefskip:hover { color: var(--cos-text); text-decoration: underline; }
.cos-briefcard.cos-brief-done .cos-brief-head svg { color: #22c55e; opacity: 1; }
/* (uib22) "one key, every model" benefit line under the OpenRouter (universal) option */
.cos-keycard-hint { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--cos-text); background: var(--cos-accent-softer); border: 1px solid var(--cos-border); border-radius: 10px; padding: 7px 10px; display: flex; align-items: flex-start; gap: 6px; }
.cos-keycard-hint[hidden] { display: none; }
.cos-keycard-hint svg { flex: 0 0 auto; margin-top: 2px; opacity: .8; }
.cos-keycard-hint b { font-weight: 600; }
.cos-keybanner .row { display: inline-flex; gap: 8px; margin-left: 8px; align-items: center; }
.cos-keybanner input { height: 30px; width: 220px; border: 1px solid var(--cos-border-strong); border-radius: 8px; padding: 0 10px; font: inherit; font-size: 12px; background: var(--cos-surface); color: var(--cos-text); }
.cos-toolstatus { margin-top: 6px; font-size: 12px; color: var(--cos-text-2); font-style: italic; }
.cos-think { display: inline-flex; gap: 4px; padding: 4px 2px; }
.cos-think i { width: 7px; height: 7px; border-radius: 50%; background: var(--cos-border-strong); animation: cos-think 1.2s ease-in-out infinite; }
.cos-think i:nth-child(2) { animation-delay: .15s; }
.cos-think i:nth-child(3) { animation-delay: .3s; }
@keyframes cos-think { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* product action cards (connect computer / cloud computer) + legacy modal/toast lift */
html.cos-active .modal-overlay { z-index: 2147483100; }
html.cos-active .toast-container { z-index: 2147483200; }
.cos-actioncards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 9px; max-width: 640px; }
.cos-actioncard { display: flex; align-items: center; gap: 10px; text-align: left; padding: 11px 12px; border-radius: 10px; background: var(--cos-surface); border: 1px solid var(--cos-border); box-shadow: var(--cos-shadow-card); }
.cos-actioncard:hover { border-color: var(--cos-accent); transform: translateY(-1px); }
.cos-actioncard .aci { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; flex: 0 0 auto; }
.cos-actioncard .aci.local { background: var(--cos-indigo, #6366f1); }
.cos-actioncard .aci.cloud { background: var(--cos-accent); }
.cos-actioncard b { display: block; font-size: 14px; color: var(--cos-text); }
.cos-actioncard i { font-style: normal; font-size: 12px; color: var(--cos-text-2); }
.cos-addmachine { margin-top: 12px; }

/* settings tile */
.cos-set { padding: 16px 18px; overflow-y: auto; }
.cos-setcard { background: var(--cos-surface); border: 1px solid var(--cos-border); border-radius: 10px; padding: 8px 14px; max-width: 640px; }
.cos-bootbanner { display: flex; align-items: center; gap: 10px; max-width: 640px; margin: 0 0 8px; padding: 10px 14px; border-radius: 10px; font-size: 13px; color: var(--cos-text); background: color-mix(in srgb, var(--cos-accent) 12%, var(--cos-surface)); border: 1px solid color-mix(in srgb, var(--cos-accent) 30%, var(--cos-border)); }
.cos-bootbanner.warn { background: color-mix(in srgb, #e0a23a 14%, var(--cos-surface)); border-color: color-mix(in srgb, #e0a23a 36%, var(--cos-border)); }  /* theme-ok: amber warning tint, mixed into surface so it adapts to both themes */
.cos-bootbanner .cos-spin { width: 14px; height: 14px; }
.cos-keyrow { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--cos-border); font-size: 13.5px; }
.cos-keyrow:last-child { border-bottom: 0; }
.cos-keyrow .prov { font-weight: 700; color: var(--cos-text); text-transform: capitalize; }
.cos-keyrow .cos-setsub { font-size: 11.5px; color: var(--cos-ink-4); font-style: normal; }
@container (max-width: 520px) { .cos-keyrow .cos-setsub { display: none; } }
.cos-keyrow .masked { color: var(--cos-text-2); letter-spacing: 2px; font-size: 11px; }
.cos-keyrow .grow { flex: 1; }
.cos-keyadd { display: flex; gap: 9px; padding: 12px 4px; align-items: center; }
.cos-keyadd select { height: 34px; border: 1px solid var(--cos-border-strong); border-radius: 9px; padding: 0 8px; font: inherit; font-size: 13px; color: var(--cos-text); background: var(--cos-surface); }
.cos-keyadd input { flex: 1; height: 34px; border: 1px solid var(--cos-border-strong); border-radius: 9px; padding: 0 12px; font: inherit; font-size: 13px; color: var(--cos-text); background: var(--cos-surface); outline: none; }
.cos-keyadd input:focus { border-color: var(--cos-accent); }
/* (b15t) 'Connect your AI accounts' wizard card: one row per provider, status or inline key input */
.cos-wizkey-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--cos-border); font-size: 12.5px; flex-wrap: wrap; }
.cos-wizkey-row:last-of-type { border-bottom: 0; }
.cos-wizkey-row .prov { font-weight: 700; color: var(--cos-text); flex: 0 0 110px; }
.cos-wizkey-row .sub { color: var(--cos-text-2); flex: 1 1 200px; min-width: 140px; font-size: 11.5px; }
.cos-wizkey-row .ok { color: #16a34a; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.cos-root .cos-wizkey-row input { height: 28px; flex: 0 1 190px; min-width: 110px; border: 1px solid var(--cos-border-strong); border-radius: 8px; padding: 0 9px; font: inherit; font-size: 12px; color: var(--cos-text); background: var(--cos-surface); outline: none; }
.cos-root .cos-wizkey-row input:focus { border-color: var(--cos-accent); }
.cos-wizkey-note { margin-top: 8px; font-size: 11.5px; color: var(--cos-text-2); }
.cos-wizkey-note code { background: var(--cos-surface-2); padding: 1px 5px; border-radius: 5px; }
.cos-wiz-accounts .cos-wiz-txt { flex: 1 1 auto; min-width: 0; }
/* (b15r) inline add/replace input inside a provider row */
.cos-root .cos-keyrow input { height: 30px; flex: 0 1 240px; min-width: 120px; border: 1px solid var(--cos-border-strong); border-radius: 8px; padding: 0 10px; font: inherit; font-size: 12.5px; color: var(--cos-text); background: var(--cos-surface); outline: none; }
.cos-root .cos-keyrow input:focus { border-color: var(--cos-accent); }
.cos-set .cos-fempty { padding: 14px 4px; }
/* CODING AGENTS install/detect rows (Mac app) */
.cos-agrow { display: flex; align-items: center; gap: 10px; padding: 11px 4px; border-bottom: 1px solid var(--cos-border); font-size: 13.5px; }
.cos-agrow:last-child { border-bottom: 0; }
.cos-agrow + .cos-aglog { border-bottom: 1px solid var(--cos-border); }
.cos-agname { font-weight: 700; color: var(--cos-text); }
.cos-agrow .grow { flex: 1; }
.cos-agstatus { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--cos-text-2); }
.cos-agstatus.ok { color: var(--cos-online); font-weight: 600; }
.cos-agstatus.busy { color: var(--cos-accent); font-weight: 600; }
.cos-agstatus.err { color: var(--cos-red); font-weight: 600; margin-left: 6px; }
/* a console log box stays dark in BOTH themes - var(--cos-ink-1) flips to a light surface in dark mode,
   giving white-on-white. Pin a fixed dark surface (same approach as .cos-toast). theme-ok */
.cos-aglog { margin: 0 0 10px; padding: 9px 11px; max-height: 150px; overflow: auto; background: #16191f; color: #d7dde8; border-radius: 8px; font: 11.5px/1.5 ui-monospace, "SF Mono", Menlo, monospace; white-space: pre-wrap; word-break: break-word; }
.cos-set .cos-loading { padding: 14px 4px; }

/* dashboard tile */
.cos-dashframe { flex: 1 1 auto; min-height: 0; width: 100%; border: 0; background: #fff; }  /* theme-ok */

/* machines tile metrics */
.cos-mbars { padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 7px; }
.cos-mbar { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--cos-text-2); }
.cos-mbar .lb { width: 30px; font-weight: 700; letter-spacing: .4px; }
.cos-mbar .tr { flex: 1; height: 7px; border-radius: 4px; background: var(--cos-surface-2); overflow: hidden; border: 1px solid var(--cos-border); }
.cos-mbar .tr i { display: block; height: 100%; background: var(--cos-accent); border-radius: 4px; transition: width .4s ease; }
.cos-mbar .tr i.mem { background: var(--cos-indigo, #6366f1); }
.cos-mbar .va { width: 38px; text-align: right; font-weight: 600; }
.cos-msub { padding: 0 16px 12px; font-size: 11.5px; color: var(--cos-text-2); }
.cos-cards-label.act { cursor: pointer; }
.cos-cards-label.act:hover { color: var(--cos-accent); }
.cos-cards-label .chev { vertical-align: -2px; }

/* tile resizer */
.cos-rsz { flex: 0 0 6px; margin: 30px -2px; border-radius: 3px; cursor: col-resize; background: transparent; transition: background .15s; }
.cos-rsz:hover, .cos-rsz:active { background: var(--cos-accent-soft); }

/* agents tile */
.cos-chipbtn.danger { color: #dc2626; border-color: rgba(220,38,38,.3); }
.cos-keyrow .cos-agent-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }

/* tab drag-reorder */
.cos-tab.dragover { box-shadow: inset 3px 0 0 var(--cos-accent); }

/* P3: attachments strip + voice + intervention banner */
.cos-attstrip { display: flex; gap: 8px; width: min(860px, calc(100% - 32px)); margin: 0 auto; padding: 8px 2px 0; flex-wrap: wrap; }
.cos-streamlabel { width: min(860px, calc(100% - 32px)); margin: 0 auto; padding: 4px 4px 2px; font-size: 11px; color: var(--cos-muted); }
.cos-attchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--cos-border); border-radius: 9px; padding: 3px 8px 3px 3px; font-size: 11.5px; color: var(--cos-text-2); background: var(--cos-surface-2); }
.cos-attchip img { width: 26px; height: 26px; object-fit: cover; border-radius: 6px; }
.cos-attchip button { font-size: 14px; color: var(--cos-text-2); padding: 0 3px; }
.cos-attchip button:hover { color: #dc2626; }
[data-voice].rec { color: #dc2626 !important; animation: cos-pulse 1.1s ease-out infinite; }
.cos-intervene { display: flex; align-items: center; gap: 10px; padding: 9px 16px; background: #fef3c7; border-bottom: 1px solid #fde68a; color: #78350f; font-size: 13px; }  /* theme-ok */
.cos-intervene[hidden] { display: none; }
.cos-intervene .q { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cos-intervene input { width: 220px; height: 30px; border: 1px solid #fcd34d; border-radius: 8px; padding: 0 10px; font: inherit; font-size: 12.5px; background: #fff; outline: none; }  /* theme-ok */
/* mobile: let the steer-the-agent bar wrap so the agent's question stays readable and the reply
   input spans the row instead of collapsing to an ellipsis (rank 50) */
@media (max-width: 760px) {
  .cos-intervene { flex-wrap: wrap; }
  .cos-intervene .q { flex: 1 1 100%; white-space: normal; overflow: visible; }
  .cos-intervene input { width: 100%; }
}

/* kanban + projects + static pages */
.cos-kanbanwrap { overflow-x: auto; }
.cos-goalin { width: 200px; height: 30px; border: 1px solid var(--cos-border-strong); border-radius: 8px; padding: 0 10px; font: inherit; font-size: 12.5px; color: var(--cos-text); background: var(--cos-surface); outline: none; }
.cos-goalin:focus { border-color: var(--cos-accent); }
.cos-pagewrap { overflow-y: auto; padding: 10px 0; background: var(--cos-surface); }
/* bridged legacy pages (About/Legal/Privacy/…) use --bg/--surface/--text… - remap them to the
   cloudos theme tokens so the rendered content follows the shell's light/dark/graphite theme. */
.cos-root .cos-pagewrap { --bg: var(--cos-app-bg); --surface: var(--cos-surface); --border: var(--cos-line-2); --text: var(--cos-ink-1); --text-muted: var(--cos-ink-3); --accent: var(--cos-accent); }

/* remote desktop tile */
.cos-rdbox { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; background: #0b0e14; overflow: hidden; position: relative; }
.cos-rdimg { max-width: 100%; max-height: 100%; object-fit: contain; cursor: crosshair; user-select: none; touch-action: none; }   /* rank 46: touches steer the remote pointer, never scroll/zoom the page */
/* rank 46: invisible-but-focusable input that raises the soft keyboard and relays keys to the remote */
.cos-rdkbinput { position: absolute; left: 0; bottom: 0; width: 100%; height: 34px; opacity: 0.01; border: 0; background: transparent; color: transparent; caret-color: transparent; }
.cos-rdwait { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #9aa4b2; font-size: 13px; }

/* drive CRUD row actions */
.cos-frowwrap { display: flex; align-items: center; gap: 2px; }
.cos-frowwrap .cos-frow { flex: 1; min-width: 0; }
.cos-frowacts { display: none; gap: 2px; flex: 0 0 auto; }
.cos-frowwrap:hover .cos-frowacts { display: inline-flex; }
.cos-crumbs .grow { flex: 1; }
.cos-crumbs { gap: 6px; flex-wrap: wrap; }
.cos-crumbs .cos-chipbtn { font-size: 11.5px; padding: 3px 9px; }
.cos-crumbs .cos-iconbtn { flex: 0 0 auto; }

/* Finder-grade explorer: clickable breadcrumbs, grid view, filename ellipsis */
.cos-crumbtrail { display: flex; align-items: center; gap: 1px; min-width: 0; flex-wrap: wrap; }
.cos-crumbtrail .cos-crumb { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 7px; color: var(--cos-text-2); font-size: 13px; font-weight: 600; max-width: 220px; }
.cos-crumbtrail .cos-crumb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cos-crumbtrail .cos-crumb:hover { background: var(--cos-surface-2); color: var(--cos-text); }
.cos-crumbtrail .cos-crumb:last-child { color: var(--cos-ink-1); }
.cos-crumbsep { display: inline-flex; align-items: center; color: var(--cos-ink-4); flex: 0 0 auto; }
.cos-fnm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cos-fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(106px, 1fr)); gap: 6px; }
.cos-fgrid .cos-fcell { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border-radius: 10px; color: var(--cos-text); font-size: 12.5px; text-align: center; }
.cos-fgrid .cos-fcell:hover { background: var(--cos-surface-2); }
.cos-fgrid .cos-fcell .cos-fnm { flex: 0 0 auto; max-width: 100%; }
.cos-fgrid .cos-fcellwrap { position: relative; }
.cos-fgrid .cos-fcellwrap .cos-fcell { width: 100%; box-sizing: border-box; }
.cos-fcellwrap .cos-frowacts { position: absolute; top: 5px; right: 5px; display: none; background: var(--cos-surface); border: 1px solid var(--cos-line-2); border-radius: 8px; padding: 1px; }
.cos-fcellwrap:hover .cos-frowacts { display: inline-flex; }

/* Google-Drive-style file grid: a "Folders" row of compact cards, then a "Files" row of thumbnail cards */
.cos-fgrid2 { display: flex; flex-direction: column; }
.cos-fsec-lbl { font-size: 12.5px; font-weight: 600; color: var(--cos-text-2); margin: 16px 4px 9px; }
.cos-fgrid2 .cos-fsec-lbl:first-child { margin-top: 2px; }
.cos-ffolders { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 9px; }
.cos-ffiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 11px; }
.cos-fcard { display: flex; text-align: left; color: var(--cos-text); cursor: pointer; min-width: 0; border: 1px solid var(--cos-border); background: var(--cos-surface); }
/* folder card: compact horizontal pill */
.cos-fcard-dir { align-items: center; gap: 12px; height: 48px; padding: 0 14px; border-radius: 11px; font-size: 14px; font-weight: 500; }
.cos-fcard-dir:hover { background: var(--cos-surface-2); border-color: var(--cos-border-strong); }
.cos-fcard-dir .cos-fcard-ico { flex: 0 0 auto; display: inline-flex; color: var(--cos-text-2); }
.cos-fcard-dir .cos-fcard-ico.fold { color: var(--cos-orange, #f59e0b); }
/* file card: tall, big thumbnail area + footer (type icon + name + meta) */
.cos-fcard-file { flex-direction: column; border-radius: 12px; overflow: hidden; }
.cos-fcard-file:hover { border-color: var(--cos-border-strong); background: var(--cos-surface-2); }
.cos-fcard-thumb { display: grid; place-items: center; height: 104px; background: var(--cos-surface-2); color: var(--cos-text-2); }
.cos-fcard-file:hover .cos-fcard-thumb { background: var(--cos-app-bg); }
.cos-fcard-foot { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-top: 1px solid var(--cos-border); min-width: 0; }
.cos-fcard-ftico { flex: 0 0 auto; display: inline-flex; }
.cos-fcard-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cos-fcard-tx .cos-fnm { font-size: 13px; }
.cos-fcard-meta { font-size: 11px; color: var(--cos-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cos-fcard-meta .cos-fmeta { font-size: 11px; }
.cos-fcardwrap { position: relative; min-width: 0; }
.cos-fcardwrap .cos-fcard { width: 100%; box-sizing: border-box; }
.cos-fcardacts { position: absolute; top: 6px; right: 6px; display: none; gap: 1px; background: var(--cos-surface); border: 1px solid var(--cos-line-2); border-radius: 8px; padding: 1px; }
.cos-fcardwrap:hover .cos-fcardacts { display: inline-flex; }
.cos-fcardwrap.dir .cos-fcardacts { top: 50%; transform: translateY(-50%); }

/* P7: responsive - stack tiles vertically on narrow screens */
@media (max-width: 760px) {
  .cos-tilearea { flex-direction: column; }
  .cos-rsz { display: none; }
  .cos-tile { flex: 1 1 auto !important; min-height: 280px; }
  .cos-brand-tx, .cos-newtab span, .cos-addtile span { display: none; }
  /* (uib37d) small screens: action chips (Terminal / Remote / AI Agent) keep to the RIGHT of the title
     row; the 'Connect to see it here' subtitle drops to its own full-width line UNDER the title. */
  .cos-md-head { flex-wrap: wrap; row-gap: 6px; }
  .cos-md-acts { flex-wrap: wrap; margin-left: auto; justify-content: flex-end; }
  .cos-md-sub { order: 5; flex-basis: 100%; }
  /* drawer becomes a slide-in overlay so it never steals width on a phone; starts closed, toggled by the
     tile-header address-bar sidebar button (the tab strip no longer carries a redundant drawer button). */
  .cos-tilebody { position: relative; }
  .cos-drawer { position: absolute; top: 0; bottom: 0; left: 0; z-index: 45; flex: 0 0 auto; width: 82vw; max-width: 300px; box-shadow: 0 18px 50px rgba(0,0,0,.4); transition: transform .2s ease; }
  .cos-drawer.collapsed { width: 82vw; max-width: 300px; padding: 10px 9px; border: none; overflow-y: auto; transform: translateX(-103%); box-shadow: none; }
  .cos-drawer:not(.collapsed) { transform: translateX(0); }   /* explicit target: the in-place open toggle slides in (transitioning toward `none` gets stuck off-screen) */
  .cos-drawer:not(.collapsed) ~ .cos-drawer-scrim { display: block; }   /* tap-outside-to-close while the overlay drawer is open */
  /* the tab strip scrolls horizontally so every tab stays reachable; tabs keep their width */
  .cos-tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .cos-tabs::-webkit-scrollbar { display: none; }
  .cos-tab { flex: 0 0 auto; }
  /* phone: the strip can't fit every control + the four right-side icon buttons, so drop the secondary
     chrome (Add Page / Add Tile - power-user tile actions; the brand logo - redundant with the menu button)
     so Search / theme / account / overflow stay on-screen. The inner .cos-tabs already scrolls horizontally;
     the strip itself must NOT be a scroll container or it clips the account dropdown that hangs below it. */
  .cos-tabstrip .cos-addtile, .cos-tabstrip .cos-divider { display: none; }
  .cos-root .cos-tabstrip { gap: 5px; }   /* tighter control spacing so the full icon cluster fits down to 320px; .cos-root prefix beats the base .cos-tabstrip{gap:8px} that is defined later in the file */
  .cos-main { padding: 18px 14px 48px; }   /* reclaim side space on small screens */
}

/* project expansion + company dashboard wrap */
.cos-projx { padding: 10px 14px 14px 30px; border-bottom: 1px solid var(--cos-border); font-size: 12.5px; color: var(--cos-text-2); }
.cos-projx-actions { display: flex; gap: 8px; margin-bottom: 10px; }
.cos-projx-sec { margin-top: 8px; }
.cos-projx-sec b { display: block; font-size: 11px; letter-spacing: .4px; text-transform: uppercase; color: var(--cos-text-2); margin-bottom: 4px; }
.cos-cdwrap { overflow: auto; background: var(--cos-surface); border: 1px solid var(--cos-border); border-radius: 14px; padding: 10px; }
.cos-keyrow.act { cursor: pointer; }

/* drawer trees */
.cos-drawer-sub .chev { display: inline-flex; align-items: center; width: 14px; color: var(--cos-text-2); flex: 0 0 auto; }
.cos-drawer-sub .fico, .cos-drawer-sub > svg { flex: 0 0 auto; }
.cos-drawer-item .chev { margin-left: auto; color: var(--cos-text-2); }
.cos-drawer-sub { white-space: nowrap; overflow: hidden; }
/* the (class-less) label span is the only flexible child: it shrinks + truncates with an ellipsis */
.cos-drawer-sub > span:not([class]) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* favorites + recents (all types) */
.cos-fr-item.act { cursor: pointer; }
.cos-fr-item[draggable="true"] { cursor: grab; }
.cos-frstar { font-size: 15px; color: var(--cos-text-2); padding: 2px 6px; border-radius: 6px; flex: 0 0 auto; }
.cos-frstar:hover { color: #f59e0b; background: var(--cos-accent-softer); }
.cos-frstar.on { color: #f59e0b; }
.cos-frx { font-size: 15px; color: var(--cos-text-2); padding: 2px 7px; border-radius: 6px; flex: 0 0 auto; margin-left: auto; }
.cos-frx:hover { color: #dc2626; background: var(--cos-accent-softer); }
[data-favzone].dropready { outline: 2px dashed var(--cos-accent); outline-offset: 3px; border-radius: 12px; background: var(--cos-accent-softer); }
.cos-drawer-item .cos-frx { margin-left: auto; opacity: 0; transition: opacity .12s ease; }
.cos-drawer-item:hover .cos-frx { opacity: 1; }

/* machine card chips */
.cos-filechip.act { cursor: pointer; }
.cos-filechip.act:hover { border-color: var(--cos-accent); color: var(--cos-accent); }
.cos-chipbtn:disabled { opacity: .4; pointer-events: none; }

/* density pass: tighter chrome, single-line fav/recent rows, favicons */
.cos-tabstrip { height: 38px; padding: 0 8px 0 10px; gap: 8px; }
.cos-tab { height: 33px; }   /* taller tabs => small gap above, Chrome-like */
.cos-newtab { height: 26px; }
.cos-addtile { height: 27px; }
.cos-tilearea { gap: 6px; padding: 6px; }
.cos-rsz { margin: 22px -2px; }
.cos-addr { padding: 6px 10px; gap: 6px; }
.cos-omni { height: 32px; }
.cos-omni input { font-size: 13px; }
.cos-addr .cos-iconbtn { width: 28px; height: 28px; }
.cos-fr-item { gap: 9px; padding: 6px 9px; border-radius: 8px; }
.cos-fr-ico { width: 26px; height: 26px; border-radius: 7px; position: relative; }
.cos-fr-ico svg { width: 15px; height: 15px; }
.cos-favicon { position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 4px; background: #fff; }  /* theme-ok */
.cos-drawer .ico { position: relative; }
.cos-fr-grow { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.cos-fr-tt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.cos-fr-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 2 auto; min-width: 0; font-size: 11.5px; }
.cos-fr-time { flex: none; margin-left: auto; padding-left: 6px; font-size: 10.5px; font-weight: 500; color: var(--cos-text-2); white-space: nowrap; }
/* hover actions on recent conversations: rename / delete */
.cos-fract { flex: none; width: 22px; height: 22px; display: none; align-items: center; justify-content: center; border-radius: 6px; color: var(--cos-text-2); }
.cos-fr-item:hover .cos-fract, .cos-fract:focus-visible { display: inline-flex; }
.cos-fract:hover { background: var(--cos-surface-2); }
.cos-fract.danger:hover { color: #f87171; }
/* kanban: ghost add-card button at the foot of each column */
.cos-dvaddcard { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; margin-top: 6px; padding: 7px 0; border: 1px dashed var(--cos-border-strong); border-radius: 9px; color: var(--cos-text-2); font-size: 12px; font-weight: 600; }
.cos-dvaddcard:hover { background: var(--cos-surface-2); color: var(--cos-text); }
.cos-dvcard[title] { cursor: pointer; }
.cos-frgrid { gap: 12px; margin-bottom: 20px; }

/* density round 2: tighter tile gaps + top, no horizontal scroll, responsive home in narrow tiles */
.cos-tilearea { gap: 4px; padding: 4px; }
.cos-rsz { margin: 18px -1px; flex-basis: 5px; }
.cos-main { padding: 14px 16px 32px; overflow-x: hidden; }
.cos-main.full { padding: 0; }
.cos-home, .cos-set, .cos-files { max-width: 100%; }
.cos-home > *, .cos-set > * { max-width: 100%; min-width: 0; }
.cos-drivegrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@container (max-width: 620px) {
  .cos-main { padding: 14px 12px 30px; }
  .cos-chathero { margin-bottom: 10px; }
  .cos-avatar { width: 58px; height: 58px; }
  .cos-hero-av, .cos-hero-av .cos-avatar { width: 124px; height: 94px; }   /* wider avatar tile, smaller on narrow screens */
  .cos-frgrid { grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }
  .cos-drivegrid { grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); gap: 7px; }
  .cos-dchip { padding: 9px 10px; font-size: 12px; }
  .cos-mcard-head { flex-wrap: wrap; row-gap: 8px; }
  .cos-omnibig-foot { gap: 6px; }
  .cos-cards-label { margin-top: 14px; }
  .cos-actioncards { grid-template-columns: 1fr; }
}
.cos-frgrid > .cos-fr { min-width: 0; }
.cos-fr-item { min-width: 0; }
.cos-fr-item .cos-frstar, .cos-fr-item .cos-frx { flex: 0 0 auto; }

/* pages inside a tab: vertical page rows, scrollable when more than one */
.cos-tilearea { flex-direction: column; }
.cos-tilerow { display: flex; gap: 4px; flex: 1 1 auto; min-height: 0; }
.cos-tilearea.paged { overflow-y: auto; scroll-snap-type: y proximity; }
.cos-tilerow.paged { flex: 0 0 auto; height: calc(100dvh - 54px); scroll-snap-align: start; }
@media (max-width: 760px) {
  .cos-tilerow { flex-direction: column; }
  .cos-tilerow.paged { height: auto; min-height: calc(100dvh - 54px); }
}

/* guest get-started CTA */
.cos-guestcta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 18px; padding: 13px 16px; border-radius: 14px; background: var(--cos-accent-softer); border: 1px solid var(--cos-accent-soft); }
.cos-guestcta .tx { flex: 1 1 260px; font-size: 13px; color: var(--cos-text); min-width: 0; }
.cos-ctabtn { height: 36px; padding: 0 18px; border-radius: 10px; background: var(--cos-accent); color: #fff; font-weight: 700; font-size: 13.5px; box-shadow: 0 4px 12px rgba(59,130,246,.3); }
.cos-ctabtn:hover { background: var(--cos-accent-hover); }

/* === DEFAULT (inline) address bar: the base .cos-addr above is an in-flow header that takes tile space;
   content sits below it. No extra CSS needed - it just flows. The hover zone is not used in this mode. === */
/* inline mode: the bar is always on (not a hover trigger), but keep the addrzone as a thin grab strip at the
   very top edge so an inline tile can still be dragged to reorder (sits over the bar's top padding). */
.cos-tile:not(.addr-full) .cos-addrzone { position: absolute; top: 0; left: 0; right: 0; height: 8px; z-index: 31; cursor: grab; }

/* === FULL-TILE mode (.addr-full): the address bar is a hover-reveal overlay that floats above the tile and
   fuses with it as a card header; the content fills the whole tile (the previous behavior). === */
.cos-tile.addr-full .cos-addrzone { position: absolute; top: 0; left: 0; right: 0; height: 14px; z-index: 29; }
.cos-tile.addr-full { overflow: visible; }
.cos-tile.addr-full .cos-tilebody { overflow: hidden; border-radius: var(--cos-radius-tile); }
.cos-tile.addr-full:hover { z-index: 60; }
.cos-tile.addr-full .cos-addr {
  position: absolute; z-index: 30; top: auto; bottom: 100%; left: -1px; right: -1px;
  background: var(--cos-surface);
  border: 1px solid var(--cos-border); border-bottom: 0;
  border-radius: var(--cos-radius-tile) var(--cos-radius-tile) 0 0;
  box-shadow: 0 -8px 22px rgba(15,23,42,.10);
  transform: translateY(8px); opacity: 0; pointer-events: none;
  transition: transform .16s ease, opacity .16s ease;
}
.cos-tile.addr-full .cos-addrzone:hover + .cos-addr,
.cos-tile.addr-full .cos-addr:hover,
.cos-tile.addr-full .cos-addr:focus-within {
  transform: translateY(0); opacity: 1; pointer-events: auto;
}
.cos-tile.addr-full:has(.cos-addrzone:hover) .cos-tilebody,
.cos-tile.addr-full:has(.cos-addr:hover) .cos-tilebody,
.cos-tile.addr-full:has(.cos-addr:focus-within) .cos-tilebody {
  border-top-left-radius: 0; border-top-right-radius: 0;
}
.cos-tile.addr-full:has(.cos-addrzone:hover),
.cos-tile.addr-full:has(.cos-addr:hover),
.cos-tile.addr-full:has(.cos-addr:focus-within) {
  border-top-left-radius: 0; border-top-right-radius: 0;
}

/* compact floating bar (~50% height, FULL-TILE overlay only) - keeps the tab strip visible behind it */
.cos-tile.addr-full .cos-addr { padding: 2px 6px; gap: 4px; }
.cos-tile.addr-full .cos-addr .cos-omni { height: 22px; gap: 6px; padding: 0 8px; }
.cos-tile.addr-full .cos-addr .cos-omni input { font-size: 12px; }
.cos-tile.addr-full .cos-addr .cos-omni svg { width: 13px; height: 13px; }
.cos-tile.addr-full .cos-addr .cos-iconbtn { width: 22px; height: 22px; }
.cos-tile.addr-full .cos-addr .cos-iconbtn svg { width: 14px; height: 14px; }
.cos-tile.addr-full .cos-addr .nav { gap: 0; }

/* fixed-layer address bar (FULL-TILE mode only): always on top, JS-positioned */
.cos-tile.addr-full .cos-addr { position: fixed; bottom: auto; left: auto; right: auto; z-index: 90; }
.cos-tile.addr-full .cos-addrzone:hover + .cos-addr:not(.show), .cos-tile.addr-full .cos-addr:hover:not(.show), .cos-tile.addr-full .cos-addr:focus-within:not(.show) {
  opacity: 0; transform: translateY(6px); pointer-events: none;
}
.cos-tile.addr-full .cos-addr.show { opacity: 1; transform: none; pointer-events: auto; }

/* smart grid pages: lines stack inside a page; tiles flex within a line */
.cos-tilerow { flex-direction: column; }
.cos-tileline { display: flex; gap: 4px; flex: 1 1 0; min-height: 0; }
.cos-tile.dropL { box-shadow: inset 4px 0 0 var(--cos-accent); }
.cos-tile.dropR { box-shadow: inset -4px 0 0 var(--cos-accent); }
.cos-tile.addr-full .cos-addrzone { cursor: grab; }
@media (max-width: 760px) {
  .cos-tileline { flex-direction: column; }
}

/* one unit: fuse is driven by the .show class (not hover), bar covers the tile's top border (full-tile mode) */
.cos-tile.addr-full:has(.cos-addr.show) { border-top-left-radius: 0; border-top-right-radius: 0; }
.cos-tile.addr-full:has(.cos-addr.show) .cos-tilebody { border-top-left-radius: 0; border-top-right-radius: 0; }
.cos-tile.addr-full .cos-addr { border-bottom: 0; border-radius: var(--cos-radius-tile) var(--cos-radius-tile) 0 0; box-shadow: 0 -10px 24px rgba(15,23,42,.12); }

/* resizer overlays the gap instead of widening it: tiles stay 4px apart everywhere */
.cos-rsz { flex: 0 0 8px; margin: 14px -6px; position: relative; z-index: 6; }

/* translucent frosted address bar (FULL-TILE overlay only - it floats over the row behind it) */
.cos-tile.addr-full .cos-addr {
  background: rgba(255, 255, 255, 0.68);  /* theme-ok */
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  border-color: rgba(216, 222, 233, 0.55);  /* theme-ok */
}
.cos-tile.addr-full .cos-addr .cos-omni { background: rgba(248, 250, 252, 0.55); border-color: rgba(216, 222, 233, 0.55); }  /* theme-ok */
.cos-tile.addr-full .cos-addr .cos-omni:focus-within { background: rgba(255, 255, 255, 0.9); }  /* theme-ok */

/* lighter glass: tabs stay visible through the bar */
.cos-tile.addr-full .cos-addr {
  background: rgba(255, 255, 255, 0.42);  /* theme-ok */
  -webkit-backdrop-filter: blur(5px) saturate(1.3);
  backdrop-filter: blur(5px) saturate(1.3);
}

/* desktop client (Track B) */
/* The visual-viewport custom property above is for mobile keyboards. Chromium can briefly report a
   stale, shorter visual viewport in a macOS BrowserWindow (notably around restored/zoomed windows),
   exposing the native dark window background below the shell. Native desktop has no overlay keyboard,
   so pin both vertical edges and let the fixed box derive its height from the window instead. */
html.cos-desktop .cos-root { bottom: 0; height: auto; }
.cos-nativehost { flex: 1 1 auto; min-height: 0; background: #fff; }  /* theme-ok */
html.cos-desktop.cos-mac .cos-tabstrip { padding-left: 82px; } /* room for the mac traffic lights (frameless title bar; macOS desktop only) */

/* corner resize handle */
.cos-corner { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; z-index: 31; }
.cos-corner::after { content: ''; position: absolute; right: 3px; bottom: 3px; width: 8px; height: 8px; border-right: 2px solid var(--cos-border-strong); border-bottom: 2px solid var(--cos-border-strong); border-radius: 0 0 3px 0; opacity: 0; transition: opacity .15s; }
.cos-tile:hover .cos-corner::after { opacity: 1; }
.cos-corner:hover::after { border-color: var(--cos-accent); }
/* shield embedded content while resizing so the drag never loses events */
html.cos-resizing iframe, html.cos-resizing .cos-nativehost, html.cos-resizing .cos-webframe { pointer-events: none; }
html.cos-resizing { cursor: nwse-resize; user-select: none; }

/* kill scroll-snap: proximity snapping fought the user's scroll (felt like auto-scroll) */
.cos-tilearea.paged { scroll-snap-type: none; }
.cos-tilerow.paged { scroll-snap-align: none; }

/* new page entrance: gentle rise + accent glow while the scroll glides to it */
@keyframes cos-pagein { 0% { opacity: .3; transform: translateY(14px); } 100% { opacity: 1; transform: none; } }
.cos-tilerow.cos-newpage { animation: cos-pagein .5s ease-out; }
.cos-tilerow.cos-newpage .cos-tile { box-shadow: 0 0 0 2px var(--cos-accent-soft), var(--cos-shadow-tile); transition: box-shadow .6s ease .5s; }

/* free grid pages: any tile any width/height (24x12 cells), dense auto-packing */
.cos-tilerow { display: grid; grid-template-columns: repeat(24, 1fr); grid-template-rows: repeat(12, 1fr); grid-auto-flow: row dense; gap: 4px; }
.cos-tilerow.paged { height: calc(100dvh - 54px); }
.cos-rsz { display: none; }
@media (max-width: 760px) {
  .cos-tilerow { display: flex; flex-direction: column; }
}

/* grid cells must never size to content (minmax 0) + definite row heights */
.cos-tilerow { grid-template-columns: repeat(24, minmax(0, 1fr)); grid-template-rows: repeat(12, minmax(0, 1fr)); }
.cos-tilerow:not(.paged) { flex: 1 1 0; min-height: 0; }

/* fixed cell height via auto-rows: packing ALWAYS succeeds; a page grows if its tiles need more room */
.cos-tilerow { grid-template-rows: none; grid-auto-rows: calc((100dvh - 102px) / 12); }
.cos-tilerow.paged { height: auto; min-height: calc(100dvh - 54px); }

/* suggestion chips + marketplace */
.cos-suggest { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 14px 0 10px; }
.cos-suggest .cos-chipbtn { font-size: 12.5px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--cos-border-strong); background: var(--cos-surface); }
.cos-suggest .cos-chipbtn:hover { border-color: var(--cos-accent); color: var(--cos-accent); }
/* one-click starter templates (home + empty drive) */
.cos-starters { max-width: 760px; margin: 6px auto 0; }
.cos-starters-lbl { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--cos-muted); margin: 0 0 10px; }
.cos-starters-lbl svg { opacity: .8; }
.cos-starters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 10px; }
.cos-startercard { display: flex; align-items: center; gap: 11px; text-align: left; padding: 12px 13px; border: 1px solid var(--cos-border); border-radius: var(--cos-radius-card); background: var(--cos-surface); cursor: pointer; transition: border-color .12s, transform .12s, box-shadow .12s; }
.cos-startercard:hover { border-color: var(--cos-accent); transform: translateY(-1px); box-shadow: var(--cos-shadow-card); }
.cos-starterico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9px; background: var(--cos-accent-soft); color: var(--cos-accent); }
.cos-startertx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cos-startertitle { font-size: 13.5px; font-weight: 600; color: var(--cos-text); }
.cos-starterout { font-size: 12px; color: var(--cos-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cos-drive-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 16px; gap: 5px; }
.cos-drive-emptybadge { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; background: var(--cos-surface-2); color: var(--cos-muted); margin-bottom: 6px; }
.cos-drive-emptyttl { font-size: 16px; font-weight: 700; color: var(--cos-text); }
.cos-drive-emptysub { font-size: 13px; color: var(--cos-text-2); max-width: 380px; margin-bottom: 14px; }
.cos-drive-empty .cos-starters-grid { width: 100%; max-width: 560px; }
.cos-mkt-cat { font-size: 11px; font-weight: 800; letter-spacing: .07em; color: var(--cos-muted); margin: 20px 0 8px; }
.cos-mkt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.cos-mkt-card { text-align: left; padding: 13px 15px; border-radius: 12px; background: var(--cos-surface); border: 1px solid var(--cos-border); box-shadow: var(--cos-shadow-card); }
.cos-mkt-card:hover { border-color: var(--cos-accent); transform: translateY(-1px); }
.cos-mkt-card b { display: block; font-size: 13.5px; color: var(--cos-text); margin-bottom: 3px; }
.cos-mkt-card i { font-style: normal; font-size: 12px; color: var(--cos-text-2); }
/* unified marketplace: tabs + search + richer cards with usage counts */
.cos-mkt-bar { display: flex; align-items: center; gap: 10px; margin: 4px 0 16px; flex-wrap: wrap; }
.cos-mkt-bar .grow { flex: 1; }
.cos-mkt-tabs { display: inline-flex; background: var(--cos-surface-2); border: 1px solid var(--cos-border); border-radius: 9px; padding: 2px; gap: 2px; }
.cos-mkt-tab { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; font-weight: 500; padding: 5px 12px; border: 0; border-radius: 7px; background: transparent; color: var(--cos-text-2); cursor: pointer; }
.cos-mkt-tab:hover { color: var(--cos-text); }
.cos-mkt-tab.on { background: var(--cos-surface); color: var(--cos-accent); box-shadow: var(--cos-shadow-card); }
.cos-mkt-tabn { font-size: 11px; font-weight: 600; color: var(--cos-muted); }
.cos-mkt-tab.on .cos-mkt-tabn { color: var(--cos-accent); }
.cos-mkt-search { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid var(--cos-border); border-radius: var(--cos-radius-ctl); background: var(--cos-app-bg); color: var(--cos-muted); min-width: 200px; }
.cos-mkt-search input { flex: 1; border: 0; outline: 0; background: none; font: inherit; font-size: 12.5px; color: var(--cos-text); }
.cos-mkt-search:focus-within { border-color: var(--cos-accent); }
.cos-mkt-rich { display: flex; align-items: flex-start; gap: 11px; }
.cos-mkt-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: var(--cos-accent-soft); color: var(--cos-accent); }
.cos-mkt-tx { min-width: 0; display: flex; flex-direction: column; }   /* stacks title / desc / meta - inline flow ran "A weekly habit grid" into the "Starter" badge */
.cos-mkt-meta { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 11px; color: var(--cos-muted); }
.cos-mkt-meta svg { opacity: .75; }
.cos-mkt-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.cos-mkt-tag { display: inline-block; padding: 1px 7px; border-radius: 999px; background: var(--cos-accent-soft); border: 1px solid var(--cos-border); font-size: 10px; line-height: 1.5; color: var(--cos-muted); }
.cos-mkt-cardwrap { display: flex; flex-direction: column; min-width: 0; }
.cos-mkt-cardwrap > .cos-mkt-card { flex: 1; width: 100%; }
.cos-mkt-actions { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; padding: 6px 2px 0; }
.cos-mkt-actions .cos-mkt-prev { margin-left: 0; }
.cos-mkt-pubbtn { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cos-mkt-report:hover { color: var(--cos-danger, #e5484d); border-color: var(--cos-danger, #e5484d); }
.cos-mkt-mine { align-self: flex-start; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 20px; background: var(--cos-accent-soft); color: var(--cos-accent); margin: 2px 0 3px; }
.cos-mkt-flag { align-self: flex-start; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 20px; background: rgba(229, 72, 77, .14); color: var(--cos-danger, #e5484d); margin: 2px 0 3px; }
.cos-mkt-pubbar { display: flex; align-items: center; gap: 8px; margin: -6px 0 14px; font-size: 12px; color: var(--cos-text-2); }
.cos-mkt-pubbar b { color: var(--cos-text); }
.cos-mkt-errbar { color: var(--cos-danger, #e5484d); }
/* inline click-to-rate stars in the card actions (rank 69) */
.cos-mkt-stars { display: inline-flex; align-items: center; gap: 1px; }
.cos-root .cos-mkt-star { padding: 0 1px; font-size: 15px; line-height: 1; background: none; border: 0; cursor: pointer; color: var(--cos-line-2); transition: color .1s, transform .08s; }
.cos-root .cos-mkt-star.on { color: #f59e0b; }
.cos-root .cos-mkt-star:hover { color: #f59e0b; transform: scale(1.18); }
/* rendered template preview iframe (rank 71) */
.cos-mkt-prevbody { margin: 0 0 6px; }
.cos-mkt-previframe { width: 100%; height: 340px; border: 1px solid var(--cos-line-2); border-radius: 8px; background: #fff; }
/* one-time 2FA recovery codes grid (rank 8) */
.cos-recovery-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 12px 0; padding: 12px; border: 1px solid var(--cos-line-2); border-radius: 10px; background: var(--cos-surface-2); }
.cos-recovery-codes code { font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 13px; letter-spacing: .5px; color: var(--cos-ink-1); user-select: all; }

/* 2FA setup overlay bits (inside the standard .cos-promptbox) */
.cos-2faqr { display: flex; justify-content: center; margin: 12px 0 4px; }
.cos-2faqr:empty { display: none; }
.cos-2faqr svg { width: 168px; height: 168px; background: #fff; padding: 10px; border-radius: 10px; box-sizing: content-box; border: 1px solid var(--cos-line-2); }
.cos-2fasecret { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; }
.cos-2fasecret code { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px; background: var(--cos-surface-2); border: 1px solid var(--cos-line-2); font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 12px; letter-spacing: .06em; color: var(--cos-text); word-break: break-all; user-select: all; }
.cos-revealnote { font-size: 11.5px; color: var(--cos-text-2); margin: 2px 0 4px; line-height: 1.5; }
.cos-2faopen { margin: 0 0 10px; font-size: 11.5px; }
.cos-2faopen a { color: var(--cos-accent); text-decoration: none; }
.cos-2faopen a:hover { text-decoration: underline; }

/* first-open orientation card for a cloud machine (remote-desktop doorway) */
.cos-cloudintro { text-align: left; max-width: 430px; margin: 0 auto 22px; padding: 15px 17px; border-radius: 12px; background: var(--cos-surface); border: 1px solid var(--cos-border); box-shadow: var(--cos-shadow-card); }
.cos-cloudintro-head { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: var(--cos-text); margin-bottom: 10px; }
.cos-cloudintro-head svg { color: var(--cos-accent); }
.cos-cloudintro-row { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--cos-text-2); margin-bottom: 10px; line-height: 1.45; }
.cos-cloudintro-row b { color: var(--cos-text); font-size: 12px; }
.cos-cloudintro-row .cos-chipbtn { height: 22px; padding: 0 8px; font-size: 11px; vertical-align: middle; margin: 0 1px; }
.cos-cloudintro-ok { margin-top: 2px; }

/* home two-column layout: drive + machine cards left, favorites/recent right (matches mock) */
.cos-home2 { display: grid; grid-template-columns: minmax(180px, 26%) minmax(0, 1fr); gap: 16px; margin-top: 26px; align-items: start; }
.cos-home2-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cos-home2-main .cos-cards { margin-top: 0; gap: 16px; }
.cos-home2-main .cos-actioncards { margin-top: 0; }
.cos-home2-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cos-home2-side .cos-fr { border: 1px solid var(--cos-border); border-radius: var(--cos-radius-card); background: var(--cos-surface); padding: 12px; }
.cos-home2-side .cos-fr-label { padding: 2px 4px 4px; }
.cos-drivecard .cos-drivegrid { margin: 14px 0 0; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.cos-drivecard .cos-loading, .cos-drivecard .cos-fempty { margin-top: 12px; }
@container (max-width: 520px) { .cos-home2 { grid-template-columns: 1fr; } }

/* color coding: entry types (chat/terminal/web/files/remote) + file extensions */
.cos-fr-ico.tc-chat { background: var(--cos-accent-soft); color: var(--cos-accent); }   /* (b15l) blue bot chip, matching the chat tab favicon */
.cos-fr-ico.tc-term { background: #1f2937; color: #e2e8f0; }
.cos-fr-ico.tc-web { background: rgba(59, 130, 246, .12); color: #2563eb; }
.cos-fr-ico.tc-files { background: rgba(245, 158, 11, .13); color: var(--cos-orange); }
.cos-fr-ico.tc-remote { background: rgba(6, 182, 212, .13); color: #0891b2; }
.cos-fr-ico.tc-file { background: rgba(99, 102, 241, .12); color: var(--cos-indigo); }
.cos-drawer-item .ico { position: relative; }
.cos-drawer-item .ico.tc-chat { color: var(--cos-accent); }   /* (b15l) chat bot is blue everywhere */
.cos-drawer-item .ico.tc-term { color: #334155; }
.cos-drawer-item .ico.tc-web { color: #2563eb; }
.cos-drawer-item .ico.tc-files { color: var(--cos-orange); }
.cos-drawer-item .ico.tc-remote { color: #0891b2; }
.cos-drawer-item .ico.tc-file { color: var(--cos-indigo); }
.ft-js { color: #ca8a04 !important; }
.ft-html { color: #ea580c !important; }
.ft-css { color: #2563eb !important; }
.ft-json { color: #16a34a !important; }
.ft-md { color: #6366f1 !important; }
.ft-csv { color: #15803d !important; }
.ft-img { color: #8b5cf6 !important; }
.ft-sh { color: #334155 !important; }
.ft-pdf { color: #ef4444 !important; }
.ft-code { color: #0e7490 !important; }
.ft-fold { color: var(--cos-orange) !important; }   /* drive-tree folders, colored to match the recents folder icon */
.fico { display: inline-flex; flex: 0 0 auto; align-items: center; }
.cos-tab .ico { position: relative; }
.cos-tab .ico .cos-favicon { width: 13px; height: 13px; }
/* per-type tab icon tints: remote = purple, terminal/multi = neutral, chat = accent (file types use .ft-*) */
.cos-tab .ico.tab-remote { color: var(--cos-purple); opacity: 1; }
.cos-tab .ico.tab-term { color: var(--cos-text-2); }
.cos-tab .ico.tab-chat { color: var(--cos-accent); opacity: 1; }
/* multi-tile/page tab: a small cluster of the individual tile icons (each keeps its own type tint) */
.cos-tab .tab-multi { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.cos-tab .tab-multi .ico { width: 13px; height: 13px; opacity: .95; }
.cos-tab .tab-multi .ico svg { width: 13px; height: 13px; display: block; }
.cos-tab .tab-multi .ico.tab-brand svg { width: 12px; height: 12px; }
.cos-tab .tab-multi .ico .cos-favicon { width: 11px; height: 11px; }
.cos-tab .tab-multi-more { font-size: 9px; font-weight: 700; line-height: 1; color: var(--cos-text-2); padding-left: 1px; }

/* big windows: cap + center home; chat area (hero/chips/input) narrower and centered */
.cos-home { max-width: 1120px; }
.cos-chathero { max-width: 760px; margin-left: auto; margin-right: auto; }
/* hero + composer + chips span the full home width (same as the MACHINES & DRIVES card) */
.cos-suggest { max-width: none; margin-left: auto; margin-right: auto; }
.cos-omnibig { max-width: none; margin-left: auto; margin-right: auto; }

/* finish-setup checklist card */
.cos-setupcard { border: 1px solid var(--cos-border); border-radius: var(--cos-radius-card); background: var(--cos-surface); padding: 14px; }
.cos-setup-head { display: flex; align-items: center; gap: 8px; }
.cos-setup-head b { font-size: 13.5px; }
.cos-setup-n { font-size: 11.5px; color: var(--cos-muted); margin-left: auto; }
.cos-setup-x { color: var(--cos-muted); border-radius: 6px; padding: 2px; display: grid; place-items: center; }
.cos-setup-x:hover { background: var(--cos-surface-2); color: var(--cos-text); }
.cos-setup-bar { height: 6px; border-radius: 999px; background: var(--cos-surface-2); box-shadow: inset 0 0 0 1px var(--cos-border-strong); margin: 10px 0 8px; overflow: hidden; }
.cos-setup-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cos-green), #2bbf88); transition: width .3s ease-out; }
.cos-setup-it { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 7px 6px; border-radius: 9px; font-size: 12.5px; color: var(--cos-text); }
.cos-setup-it:hover { background: var(--cos-surface-2); }
.cos-setup-it .ck { width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid var(--cos-border-strong); display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: transparent; }
.cos-setup-it.done .ck { background: var(--cos-green); border-color: var(--cos-green); }
.cos-setup-it.done { color: var(--cos-muted); }
.cos-setup-it.done > span:last-child { text-decoration: line-through; }

/* density pass: the newer blocks, tightened to match */
.cos-home2 { gap: 12px; margin-top: 14px; }
.cos-home2-main { gap: 10px; }
.cos-home2-main .cos-cards { gap: 10px; }
.cos-home2-side { gap: 10px; }
.cos-home2-side .cos-fr { padding: 8px; }
.cos-setupcard { padding: 10px 11px; }
.cos-setup-it { padding: 4px 5px; font-size: 12px; }
.cos-setup-it .ck { width: 15px; height: 15px; }
.cos-suggest { margin: 10px auto 6px; gap: 6px; }
.cos-suggest .cos-chipbtn { padding: 4px 11px; font-size: 12px; height: auto; }
.cos-mkt-card { padding: 9px 11px; border-radius: 8px; }
.cos-mkt-grid { gap: 8px; }
.cos-mkt-cat { margin: 14px 0 7px; }
.cos-drivecard .cos-drivegrid { margin: 9px 0 0; }
.cos-avatar .online { width: 15px; height: 15px; border-width: 2.5px; }

/* page-fit: every page is exactly one viewport - 12 fixed rows, nothing spills */
.cos-tilerow { grid-template-rows: repeat(12, minmax(0, 1fr)); grid-auto-rows: 0; grid-auto-flow: row; overflow: hidden; }
.cos-tilerow.paged { height: calc(100dvh - 54px); min-height: 0; }

/* thin divider line between pages, with even breathing room above and beneath it */
.cos-tilearea.paged { gap: 0; }
.cos-tilearea.paged .cos-tilerow.paged { padding: 8px 0; }
.cos-tilearea.paged .cos-tilerow.paged + .cos-tilerow.paged { border-top: 1px solid var(--cos-border-strong); }

/* overlay-style inner scrollbars: invisible until the area is hovered (in use) */
.cos-root *::-webkit-scrollbar { width: 9px; height: 9px; }
.cos-root *::-webkit-scrollbar-track { background: transparent; }
.cos-root *::-webkit-scrollbar-corner { background: transparent; }
.cos-root *::-webkit-scrollbar-thumb { background: transparent; border-radius: 99px; border: 2.5px solid transparent; background-clip: padding-box; }
.cos-root *:hover::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, .32); background-clip: padding-box; }
.cos-root *::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, .55); background-clip: padding-box; }

/* visual hierarchy: ink shades guide the eye - titles darkest, meta recedes */
.cos-mcard-ttl, .cos-fr-tt, .cos-setup-head b, .cos-mkt-card b, .cos-actioncard b, .cos-bubble b { color: var(--cos-ink-1); }
.cos-bubble, .cos-edview { color: var(--cos-ink-2); }
.cos-mcard-state, .cos-fr-sub, .cos-mkt-card i, .cos-actioncard i, .cos-setup-it { color: var(--cos-ink-3); }
.cos-cards-label, .cos-fr-label, .cos-drawer-sectlabel, .cos-mkt-cat, .cos-setup-n,
.cos-rail-label, .cos-rail-sub, .cos-agents-label, .cos-agent-tx i, .cos-cfgmenu-sec,
.cos-mfolders-empty, .cos-keyrow .cos-setsub { color: var(--cos-ink-3); }   /* WCAG AA: informational secondary text -> ink-3 (5.2-6.9:1); was decorative ink-4 (2.2-4.2:1). Placeholders/icons/separators keep --cos-muted. */
/* line shades tier the surfaces: primary cards strongest, sidebar medium, chips faint */
.cos-mcard { border-color: var(--cos-line-1); }
.cos-home2-side .cos-fr, .cos-setupcard, .cos-actioncard, .cos-setcard { border-color: var(--cos-line-2); }
.cos-dchip, .cos-filechip, .cos-mkt-card { border-color: var(--cos-line-3); }
.cos-chipbtn.on-theme { border-color: var(--cos-ink-1); color: var(--cos-ink-1); font-weight: 700; }

/* breathing room above and beneath the chat area */
.cos-chathero { margin-top: 26px; }
.cos-home2 { margin-top: 30px; }

/* pages fill the scroller viewport exactly - no sliver of the upper page at rest */
.cos-tilearea.paged { padding-top: 0; padding-bottom: 0; }
.cos-tilerow.paged { height: 100%; min-height: 0; }

/* designer home: single centered column, chat card on top, hairline section labels */
.cos-home { max-width: 780px; }
.cos-chatcard { background: var(--cos-surface); border: 1px solid var(--cos-line-2); border-radius: 14px; box-shadow: var(--cos-shadow-card); }
.cos-chatcard-head { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--cos-line-3); }
.cos-chatcard-head .cos-avatar { width: 38px; height: 38px; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--cos-line-2); }
.cos-chatcard-head .cos-avatar .online { width: 11px; height: 11px; border-width: 2px; }
.cos-chatcard-head .grow { flex: 1 1 auto; }
.cos-chatcard-id { display: flex; flex-direction: column; line-height: 1.25; }
.cos-chatcard-id b { font-size: 13.5px; color: var(--cos-ink-1); }
.cos-chatcard-id .st { font-size: 11.5px; color: var(--cos-ink-3); display: inline-flex; align-items: center; gap: 5px; }
.cos-chatcard-id .st .online { width: 7px; height: 7px; border-radius: 50%; background: var(--cos-online); display: inline-block; }
.cos-chatcard-body { padding: 14px; }
.cos-chatcard .cos-chathero { margin: 0 0 4px; max-width: none; }
.cos-chatcard .cos-suggest { margin: 12px 0 10px; max-width: none; }
.cos-chatcard .cos-omnibig { margin: 0; max-width: none; box-shadow: none; border-color: var(--cos-line-2); }
.cos-miniav { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; align-self: flex-start; background: #e9f1ff; }  /* theme-ok */
.cos-miniav svg { width: 100%; height: 100%; display: block; }
.cos-sendbtn { width: 30px; height: 30px; border-radius: 50%; background: var(--cos-accent); color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.cos-sendbtn:hover { background: var(--cos-accent-hover); }
.cos-sectlabel { display: flex; align-items: center; gap: 10px; margin: 20px 2px 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; color: var(--cos-ink-4); }
.cos-sectlabel::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--cos-line-3); }
.cos-recfav { display: grid; grid-template-columns: 1.55fr 1fr; gap: 12px; align-items: start; }
@container (max-width: 600px) { .cos-recfav { grid-template-columns: 1fr; } }
.cos-recfav .cos-fr { border: 1px solid var(--cos-line-2); border-radius: 12px; background: var(--cos-surface); padding: 10px; min-width: 0; }
.cos-rec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 8px; }
@container (max-width: 680px) { .cos-rec-grid { grid-template-columns: 1fr; } }
/* Favorites/Recent: collapse to 2 rows; "See more" expands to an inner scroller inside the card */
.cos-fr-scroll { overflow: hidden; }
/* (b15q) collapsed heights are pre-paint fallbacks only - applyFrMore() MEASURES the real bottom
   of row 2 every render/resize (2-line titles vary row height), so row 2 is never sliced */
.cos-fr-scroll.rec { max-height: 100px; }
.cos-fr-scroll.fav { max-height: 74px; }
.cos-fr-scroll.exp { overflow-y: auto; }
.cos-fr-scroll.rec.exp { max-height: 320px; }
.cos-fr-scroll.fav.exp { max-height: 188px; }
.cos-fr-more { display: inline-flex; align-items: center; gap: 5px; margin: 7px 0 0; padding: 3px 9px; border-radius: 7px; color: var(--cos-accent); font-size: 12.5px; font-weight: 600; cursor: pointer; background: none; }
.cos-fr-more:hover { background: var(--cos-accent-softer); }
.cos-fr-more.exp svg { transform: rotate(180deg); }
.cos-fav-empty { white-space: normal; padding: 6px 8px; line-height: 1.5; }
/* demo computer card (guest machines section) */
.cos-democard { position: relative; }
.cos-democard .cos-md-body { position: relative; min-height: 152px; }
/* locked preview: blur the demo machine's files behind a centred "connect" popup */
.cos-democard .cos-md-grid { filter: blur(3px); opacity: .55; pointer-events: none; user-select: none; }
.cos-demo-badge { font-size: 9.5px; font-weight: 800; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; background: var(--cos-accent-soft); color: var(--cos-accent); margin-left: 6px; vertical-align: 2px; }
.cos-connectpop { position: absolute; top: 50%; bottom: auto; left: 50%; transform: translate(-50%, -50%); width: 340px; max-width: calc(100% - 28px); background: var(--cos-surface); border: 1px solid var(--cos-line-1); border-radius: 12px; box-shadow: var(--cos-shadow-pop); padding: 12px; z-index: 6; text-align: center; }
.cos-connectpop i { margin: 2px 0 8px; }
.cos-connectpop-btns { display: flex; gap: 8px; }
.cos-root .cos-connectpop-btns .cos-primarybtn, .cos-root .cos-connectpop-btns .cos-secondarybtn { flex: 1 1 0; width: auto; min-width: 0; margin-top: 0; height: auto; min-height: 36px; padding: 6px 10px; line-height: 1.2; white-space: normal; }
.cos-root .cos-secondarybtn { display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--cos-accent-soft); color: var(--cos-accent-hover); border: 1px solid var(--cos-line-1); border-radius: 9px; font-weight: 700; font-size: 12.5px; }
.cos-root .cos-secondarybtn:hover { background: var(--cos-accent-softer); border-color: var(--cos-accent); }
.cos-connectpop b { display: block; font-size: 13px; color: var(--cos-ink-1); }
.cos-connectpop i { font-style: normal; display: block; font-size: 11.5px; color: var(--cos-ink-3); margin: 3px 0 9px; }
.cos-connectpop .x { position: absolute; top: 8px; right: 9px; color: var(--cos-ink-4); padding: 2px; }
.cos-primarybtn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--cos-accent); color: #fff; border-radius: 9px; height: 32px; font-weight: 700; font-size: 12.5px; }
.cos-primarybtn:hover { background: var(--cos-accent-hover); }
.cos-linkbtn { width: 100%; text-align: center; margin-top: 7px; color: var(--cos-accent); font-size: 12px; font-weight: 600; }
/* finish-setup checklist in two columns */
.cos-setup-grid { display: grid; grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: 18px; }
@container (max-width: 600px) { .cos-setup-grid { grid-template-rows: repeat(6, auto); } }

/* one-by-one setup stepper (post-signup): one step at a time, real action + Skip */
.cos-wiz-body { display: flex; align-items: center; gap: 14px; padding: 14px 2px 4px; }
.cos-wiz-ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--cos-accent-soft); color: var(--cos-accent); }
.cos-wiz-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cos-wiz-txt b { font-size: 15px; font-weight: 700; color: var(--cos-text); }
.cos-wiz-txt i { font-style: normal; font-size: 12.5px; color: var(--cos-muted); }
.cos-wiz-acts { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.cos-root .cos-wiz-go { background: var(--cos-accent); color: #fff; border: 0; border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 600; }
.cos-root .cos-wiz-go:hover { background: var(--cos-accent-hover); }
.cos-root .cos-wiz-skip { background: none; border: 0; color: var(--cos-muted); font-size: 12.5px; font-weight: 600; padding: 8px 10px; border-radius: 999px; }
.cos-root .cos-wiz-skip:hover { color: var(--cos-text-2); background: var(--cos-surface-2); }
.cos-wiz-dots { display: flex; gap: 6px; padding: 10px 2px 0; }
.cos-wiz-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cos-line-2); }
.cos-wiz-dot.done { background: var(--cos-green); }
.cos-wiz-dot.cur { background: var(--cos-accent); }
@media (max-width: 760px) {
  .cos-wiz-body { flex-wrap: wrap; }
  .cos-wiz-txt { flex-basis: calc(100% - 58px); }
  .cos-wiz-acts { margin-left: 58px; }
}

/* the .cos-root button reset outranks single-class rules - scope these to win */
.cos-root .cos-sendbtn { width: 30px; height: 30px; border-radius: 50%; background: var(--cos-accent); color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.cos-root .cos-sendbtn:hover { background: var(--cos-accent-hover); }
.cos-root .cos-primarybtn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--cos-accent); color: #fff; border-radius: 9px; height: 32px; font-weight: 700; font-size: 12.5px; }
.cos-root .cos-primarybtn:hover { background: var(--cos-accent-hover); }
.cos-root .cos-linkbtn { width: 100%; text-align: center; margin-top: 7px; color: var(--cos-accent); font-size: 12px; font-weight: 600; }

/* mock-parity pass: equal-height cards, roomier chat card, gray bubble, footer rail, plain drive rows */
.cos-recfav { align-items: stretch; }
.cos-chatcard-body { padding: 18px 16px 0; }
.cos-chatcard .cos-msg-bot { align-items: flex-start; }
.cos-chatcard .cos-bubble { background: var(--cos-surface-2); border-color: var(--cos-line-3); box-shadow: none; padding: 12px 16px; }
.cos-chatcard .cos-chathero { margin: 2px 0 0; }
.cos-chatcard .cos-suggest { margin: 18px 0 12px; }
.cos-chatcard .cos-omnibig { padding: 11px 13px; }
.cos-chatcard .cos-omnibig input { font-size: 15px; }

.cos-mcard { padding: 14px 16px; }
.cos-drivecard .cos-dchip { border: 1px solid #e0e0e0; background: #fff; border-radius: 9px; padding: 9px 11px; box-shadow: none; }  /* theme-ok */
.cos-drivecard .cos-dchip:hover { background: #fff; border-color: #c9ccd2; }  /* theme-ok */
.cos-sectlabel { margin: 24px 2px 9px; }

/* no section titles - cards separate themselves with even gaps */
.cos-home > .cos-recfav, .cos-home > .cos-mcard, .cos-home > .cos-setupcard,
.cos-home > .cos-cards, .cos-home > .cos-actioncards, .cos-home > .cos-addmachine { margin-top: 14px; }

/* home canvas is the dark gray - white cards pop like the mock */
.cos-tile .cos-main:not(.full) { background: var(--cos-app-bg); }

/* wide content, narrow chat: sections use the full column, the chat card stays compact */
.cos-home { max-width: 1100px; }
.cos-chatcard { max-width: 780px; margin-left: auto; margin-right: auto; }

/* no chat header - mute floats in the card corner, the mini avatar replays the greeting */
.cos-chatcard { position: relative; }

.cos-miniav { cursor: pointer; }

/* the gray canvas is a seam, not a layout element - compress all home spacing */
.cos-tile .cos-main:not(.full) { padding: 10px 12px 22px; }
.cos-home > .cos-recfav, .cos-home > .cos-mcard, .cos-home > .cos-setupcard,
.cos-home > .cos-cards, .cos-home > .cos-actioncards, .cos-home > .cos-addmachine { margin-top: 10px; }
.cos-recfav { gap: 10px; }
.cos-chatcard-body { padding: 14px 14px 0; }
.cos-chatcard .cos-suggest { margin: 12px 0 10px; }

.cos-home2-side { gap: 10px; }
.cos-home { max-width: none; }
.cos-chatcard { max-width: 860px; }

/* white home sheet - the gray lives outside the tile, cards separate by borders alone */
.cos-tile .cos-main:not(.full) { background: var(--cos-surface); }

/* the talking head by the greeting: full live avatar (3D head + dot), comfortably big */
.cos-chatcard .cos-msg-bot .cos-avatar { width: 56px; height: 56px; }
.cos-chatcard .cos-msg-bot .cos-avatar .online { width: 14px; height: 14px; border-width: 2.5px; }

/* the avatar halo ring needs room - the single home greeting never scrolls, so let it overflow */
.cos-chatcard .cos-chatmsgs { overflow: visible; max-height: none; padding: 6px 4px; }
.cos-chatcard .cos-msg-bot { padding-left: 8px; }

/* karaoke reveal: the whole greeting is visible from the start; the not-yet-read tail is dimmed and
   "lights up" word by word as the voice reads it (no letter-by-letter typing, no reflow). */
/* karaoke reveal: greeting text is ALWAYS fully visible; a glow comet rides the reading cursor.
   Each letter passes through g0 (bright + glow) -> g1 -> g2 -> plain as the cursor moves on. */
.cos-greet-pending { color: inherit; opacity: 1; }   /* legacy tail kept fully visible */
.cos-greet-on { color: var(--cos-accent); }
.cos-greet-on.g0 { text-shadow: 0 0 12px color-mix(in srgb, var(--cos-accent) 70%, transparent), 0 0 4px color-mix(in srgb, var(--cos-accent) 60%, transparent); }
.cos-greet-on.g1 { color: color-mix(in srgb, var(--cos-accent) 80%, var(--cos-text)); text-shadow: 0 0 7px color-mix(in srgb, var(--cos-accent) 38%, transparent); }
.cos-greet-on.g2 { color: color-mix(in srgb, var(--cos-accent) 48%, var(--cos-text)); }

/* audio button pinned to the bot avatar's bottom-right corner */
.cos-greetav { position: relative; flex: 0 0 auto; }
.cos-greetmute { position: absolute; left: -8px; bottom: -8px; z-index: 3; }
.cos-greetmute .cos-iconbtn { width: 26px; height: 26px; border-radius: 50%; background: var(--cos-surface); border: 1px solid var(--cos-line-1); box-shadow: var(--cos-shadow-card); color: var(--cos-ink-3); }
.cos-greetmute .cos-iconbtn:hover { color: var(--cos-ink-1); }
/* (V4A) while the avatar is actually talking the control shows the LIVE speaker glyph, not the
   resting mute state - accent ink + a soft pulse so "sound is happening" reads at a glance */
.cos-mute.talking { color: var(--cos-accent); animation: cosTalkPulse 1.1s ease-in-out infinite; }
@keyframes cosTalkPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .cos-mute.talking { animation: none; } }
.cos-chatcard .cos-msg-bot .cos-avatar .online { right: 2px; bottom: 2px; top: auto; }

/* one rounded box: input row on top, options footer below a hairline (matches mock) */
.cos-chatcard .cos-omnibig { padding: 0; overflow: hidden; }
.cos-chatcard .cos-omnibig-foot { margin: 0; border-top: 1px solid var(--cos-line-3); background: var(--cos-surface-2); padding: 9px 14px; gap: 10px; }
.cos-foot-sep { width: 1px; align-self: stretch; background: var(--cos-line-2); margin: -2px 2px; }
.cos-omnibig-foot .cos-pill { background: none; }

/* breathing room between the text box and the bottom edge of the chat card */
.cos-chatcard-body { padding-bottom: 14px; }

/* roomier chat: gap between the bot answer and the chips; air above & below the chat card */
.cos-chatcard .cos-suggest { margin: 22px 0 14px; }
.cos-chatcard { margin-top: 16px; margin-bottom: 22px; }

/* the text box is the primary action - elevate it so the eye lands there first */
.cos-chatcard .cos-omnibig {
  border: 1.5px solid var(--cos-accent-soft);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 22px -8px var(--cos-accent-soft);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cos-chatcard .cos-omnibig:hover { border-color: var(--cos-accent); }
.cos-chatcard .cos-omnibig:focus-within {
  border-color: var(--cos-accent);
  box-shadow: 0 0 0 3px var(--cos-accent-softer), 0 8px 26px -8px var(--cos-accent-soft);
}
.cos-chatcard .cos-omnibig-row { padding: 14px 14px; }
.cos-chatcard .cos-omnibig input { font-size: 15.5px; }
.cos-chatcard .cos-omnibig input::placeholder { color: var(--cos-ink-4); }
.cos-chatcard .cos-omnibig-row .plus { color: var(--cos-accent); background: var(--cos-accent-softer); }
.cos-sendbtn { box-shadow: 0 2px 8px -2px var(--cos-accent); }

/* designer spec refinements */
.cos-home { max-width: 980px; margin-left: auto; margin-right: auto; }
.cos-mcard-count { font-size: 12px; color: var(--cos-ink-4); margin-left: 10px; align-self: center; }
/* favorites empty state: badge + title + helper + 3 ghost slots */
.cos-fav-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 14px 6px; gap: 4px; }
.cos-fav-badge { width: 38px; height: 38px; border-radius: 11px; background: var(--cos-accent-softer); color: var(--cos-accent); display: grid; place-items: center; margin-bottom: 6px; }
.cos-fav-empty b { font-size: 13.5px; color: var(--cos-ink-2); }
.cos-fav-empty i { font-style: normal; font-size: 12px; color: var(--cos-ink-4); line-height: 1.5; max-width: 240px; }
.cos-fav-ghosts { display: flex; gap: 8px; margin-top: 12px; }
.cos-fav-ghosts span { width: 46px; height: 46px; border-radius: 10px; border: 1.5px dashed var(--cos-line-1); }
/* finish-setup: bar + percent on one row */
.cos-setup-barrow { display: flex; align-items: center; gap: 10px; margin: 10px 0 8px; }
.cos-setup-barrow .cos-setup-bar { flex: 1 1 auto; margin: 0; }
.cos-setup-pct { font-size: 11.5px; font-weight: 700; color: var(--cos-ink-4); flex: 0 0 auto; }

/* drawer header with a close-drawer button, shown only when the drawer is open */
.cos-drawer-top { display: flex; align-items: center; gap: 8px; padding: 2px 2px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--cos-line-3); }
.cos-drawer-top .cos-brand-tx { font-weight: 700; font-size: 13.5px; color: var(--cos-ink-2); }
.cos-drawer.collapsed .cos-drawer-top { display: none; }

/* demo computer: panels visible, the connect popup floats on top behind a light blur scrim */


/* demo computer: files like the cloud drive, popup floats over them with a local blur */
.cos-demo-stage { position: relative; margin-top: 11px; }
.cos-demo-files { margin: 8px 0 0; }
.cos-demo-files .cos-dchip { cursor: default; }

/* demo computer preview panels (restored) */
.cos-demo-panels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@container (max-width: 700px) { .cos-demo-panels { grid-template-columns: repeat(2, 1fr); } }
.cos-demopanel { border: 1px solid var(--cos-line-3); border-radius: 9px; padding: 8px 9px; min-height: 100px; font-size: 11px; color: var(--cos-ink-3); min-width: 0; overflow: hidden; }
.cos-demopanel .lbl { display: flex; align-items: center; gap: 5px; font-weight: 700; font-size: 11px; color: var(--cos-ink-2); margin-bottom: 6px; white-space: nowrap; }
.cos-demopanel .row { display: flex; align-items: center; gap: 5px; padding: 1.5px 0; white-space: nowrap; }
.cos-demopanel.term { background: #16191f; border-color: #16191f; color: #9aa6b5; }
.cos-demopanel.term .lbl { color: #cdd6e0; }
.cos-demopanel.term pre { margin: 0; font: 10px/1.6 ui-monospace, Menlo, monospace; white-space: pre-wrap; }
.cos-demopanel .task { display: flex; align-items: center; gap: 5px; border: 1px solid var(--cos-line-3); border-radius: 7px; padding: 5px 7px; margin-bottom: 5px; font-size: 10.5px; line-height: 1.3; }
.cos-demopanel .task.done { color: #16a34a; background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.2); }
.cos-demopanel .task.run { color: var(--cos-ink-2); }
.cos-spin.sm { width: 9px; height: 9px; border-width: 1.5px; flex: 0 0 auto; }
.cos-demopanel .fi { display: inline-flex; flex: 0 0 auto; }
.cos-demopanel .fi.fold { color: var(--cos-orange); }
.cos-demopanel.term .cur { display: inline-block; width: 5px; height: 9px; background: #6ee7a8; margin-left: 2px; vertical-align: -1px; animation: cos-blink 1s steps(2) infinite; }  /* theme-ok */
@keyframes cos-blink { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } }
/* remote control: mini desktop screen */
.cos-demopanel .screen { height: 60px; border-radius: 7px; background: linear-gradient(135deg, #dbe4ff, #eef2ff 55%, #f3f5f9); overflow: hidden; border: 1px solid var(--cos-line-2); }
.cos-demopanel .screen .bar { display: flex; gap: 3px; padding: 4px 5px; background: rgba(255,255,255,.55); }  /* theme-ok */
.cos-demopanel .screen .bar i { width: 5px; height: 5px; border-radius: 50%; }
.cos-demopanel .screen .bar i:nth-child(1) { background: #f87171; }
.cos-demopanel .screen .bar i:nth-child(2) { background: #fbbf24; }  /* theme-ok */
.cos-demopanel .screen .bar i:nth-child(3) { background: #34d399; }  /* theme-ok */
.cos-demopanel .screen .win { padding: 6px 7px; display: flex; flex-direction: column; gap: 4px; }
.cos-demopanel .screen .win span { height: 6px; border-radius: 3px; background: rgba(99,102,241,.45); }
.cos-demopanel .screen .win span:nth-child(2) { width: 60%; background: rgba(99,102,241,.28); }

/* right-edge resize handle (width only), alongside the corner handle */
.cos-edge-r { position: absolute; top: 8px; right: -3px; bottom: 16px; width: 8px; cursor: ew-resize; z-index: 30; }
.cos-edge-r::after { content: ''; position: absolute; top: 50%; right: 3px; width: 3px; height: 34px; transform: translateY(-50%); border-radius: 3px; background: var(--cos-line-1); opacity: 0; transition: opacity .15s; }
.cos-edge-r:hover::after { opacity: 1; }
html.cos-resizing .cos-edge-r { cursor: ew-resize; }

/* Desktop (Electron): keep the float-above address bar (browser tiles use native views that
   render ABOVE the DOM, so a downward bar would hide behind them). The title strip is a
   window-drag region, so just mark the bar no-drag - its controls stay clickable when the bar
   floats over the strip, and it lands just below the traffic lights. No layout gap needed. */
html.cos-desktop .cos-addr, html.cos-desktop .cos-addr * { -webkit-app-region: no-drag; }

/* ---- restored prod features ---- */
/* toast */
.cos-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(12px); max-width: 80vw; background: #1f2937; color: #fff; font-size: 13px; font-weight: 600; padding: 10px 16px; border-radius: 10px; box-shadow: 0 12px 34px rgba(15,23,42,.28); opacity: 0; pointer-events: none; z-index: 9999; transition: opacity .2s ease, transform .2s ease; white-space: pre-wrap; }   /* fixed dark snackbar pill - readable in every theme (was var(--cos-ink-1) which flips to near-white in dark mode) */
.cos-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; cursor: pointer; }   /* clickable while visible - tap dismisses */
.cos-toast.ok { background: #16794a; }
.cos-toast.error { background: #b42318; }   /* error-kind toasts (cosToast(msg,'error')) - red pill, white text reads in both themes */
.cos-toast-action { margin-left: 12px; background: rgba(255,255,255,.16); color: #fff; border: none; border-radius: 7px; padding: 4px 10px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; vertical-align: middle; }
.cos-toast-action:hover { background: rgba(255,255,255,.28); }
#cos-offline { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 9998; padding: 7px 16px; border-radius: 999px; background: #92400e; color: #fff; font-size: 12.5px; font-weight: 600; box-shadow: 0 10px 28px rgba(15, 23, 42, .3); }

/* command palette (Cmd/Ctrl+K) — global fuzzy launcher overlay */
.cos-palette-scrim { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.4); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.cos-palette { width: min(620px, 92vw); max-height: 70vh; display: flex; flex-direction: column; background: var(--cos-surface); border: 1px solid var(--cos-line-2); border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.4); overflow: hidden; }
.cos-palette-inp { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--cos-line-2); color: var(--cos-ink-3); }
.cos-palette-input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; font: inherit; font-size: 16px; color: var(--cos-ink-1); }
.cos-palette-list { overflow-y: auto; padding: 6px; }
.cos-root .cos-pal-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 11px; border-radius: 9px; text-align: left; color: var(--cos-ink-1); }
/* omnibox typeahead dropdown - reuses the palette's item rows, anchored under the address bar */
.cos-omnisug { position: fixed; z-index: 8500; display: flex; flex-direction: column; padding: 5px; max-height: 340px; overflow-y: auto; background: var(--cos-surface); border: 1px solid var(--cos-border-strong); border-radius: 13px; box-shadow: 0 18px 46px rgba(2, 8, 23, .3); }
.cos-pal-item.sel, .cos-pal-item:hover { background: var(--cos-surface-2); }
.cos-pal-ic { width: 18px; height: 18px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--cos-ink-2); }
.cos-pal-tx { display: flex; flex-direction: column; min-width: 0; }
.cos-pal-tx b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cos-pal-tx i { font-size: 11.5px; font-style: normal; color: var(--cos-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cos-pal-empty { padding: 24px; text-align: center; color: var(--cos-ink-3); font-size: 13px; }
/* account menu separator */
.cos-acctmenu-sep { height: 1px; margin: 5px 4px; background: var(--cos-border); }
/* per-message chat actions */
.cos-msg-bot .cos-msgacts { display: flex; gap: 4px; margin: 2px 0 4px 40px; opacity: 0; transition: opacity .15s ease; }
.cos-msg-bot:hover .cos-msgacts,
.cos-msg-bot:focus-within .cos-msgacts { opacity: 1; }   /* rank 104: copy/read-aloud reachable by keyboard */
/* rank 75: user messages get an Edit-and-resend action, revealed on hover/focus like the bot ones */
.cos-msgacts-user { display: flex; align-items: center; gap: 4px; opacity: 0; transition: opacity .15s ease; }
.cos-msg-user:hover .cos-msgacts-user,
.cos-msg-user:focus-within .cos-msgacts-user { opacity: 1; }
.cos-msgact { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; color: var(--cos-text-2); background: none; border: none; cursor: pointer; }
.cos-msgact:hover { background: var(--cos-surface-2); color: var(--cos-text); }
/* editor viewer-mode chips */
.cos-edmodes { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; }
/* segmented view switcher (Table/Kanban/Calendar/...): icon always, label only on the active segment */
.cos-vseg { display: inline-flex; align-items: center; background: var(--cos-surface-2); border: 1px solid var(--cos-border); border-radius: 9px; padding: 2px; gap: 2px; }
.cos-vsegbtn { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12px; font-weight: 500; padding: 4px 8px; border: 0; border-radius: 7px; background: transparent; color: var(--cos-text-2); cursor: pointer; }
.cos-vsegbtn svg { opacity: .8; flex: 0 0 auto; }
.cos-vsegbtn:hover { color: var(--cos-text); }
.cos-vsegbtn.on { background: var(--cos-surface); color: var(--cos-accent); box-shadow: var(--cos-shadow-card); }
.cos-vsegbtn.on svg { opacity: 1; }
.cos-vseglbl { display: none; }
.cos-vsegbtn.on .cos-vseglbl { display: inline; }
.cos-vsegadd { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--cos-border); border-radius: 8px; background: var(--cos-surface); color: var(--cos-text-2); cursor: pointer; }
.cos-vsegadd:hover { border-color: var(--cos-accent); color: var(--cos-accent); }
.cos-vseggen { color: var(--cos-accent); }
.cos-vseggen:hover { background: var(--cos-accent-soft); }
/* AI file-action card in chat (created/updated/deleted a drive file) */
.cos-fileaction { display: flex; align-items: center; gap: 9px; margin: 6px 0; padding: 9px 12px; border: 1px solid var(--cos-border); border-radius: 10px; background: var(--cos-surface-2); font-size: 12.5px; }
.cos-fa-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: var(--cos-accent-soft); color: var(--cos-accent); }
.cos-fa-red .cos-fa-ico { background: var(--cos-surface); color: var(--cos-red); }
.cos-fa-tx { flex: 1; min-width: 0; color: var(--cos-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cos-fa-tx b { color: var(--cos-text); }
.cos-fa-open { flex: 0 0 auto; font: inherit; font-size: 12px; font-weight: 600; padding: 4px 11px; border: 1px solid var(--cos-border); border-radius: var(--cos-radius-ctl); background: var(--cos-surface); color: var(--cos-accent); cursor: pointer; }
.cos-fa-open:hover { border-color: var(--cos-accent); background: var(--cos-accent-soft); }
.cos-fa-open[disabled] { opacity: .6; cursor: default; color: var(--cos-muted); }
/* WYSIWYG + preview iframe in the editor tile */
.cos-wysiwyg { flex: 1 1 auto; min-height: 0; overflow: auto; background: var(--cos-surface); }

/* ---- 23-gap restoration pass ---- */

/* file extension shown as a muted suffix (splitFileExt look) */
.cos-fext { color: var(--cos-ink-4); }
/* file size · modified metadata under file rows / chips */
.cos-fmeta { margin-left: auto; font-size: 11px; color: var(--cos-ink-4); white-space: nowrap; flex: 0 0 auto; padding-left: 8px; }
.cos-dchip .cos-fmeta { margin: 2px 0 0; padding: 0; font-size: 10px; }

/* inline rename/delete on drawer drive items (reveal on hover) */
.cos-drawer-sub .cos-dsubacts { margin-left: auto; display: none; gap: 1px; flex: 0 0 auto; }
.cos-drawer-sub:hover .cos-dsubacts { display: inline-flex; }
.cos-dsubacts .cos-iconbtn { width: 22px; height: 22px; }
.cos-dsubacts .cos-iconbtn:hover { color: var(--cos-text); }

/* in-chat stop-generation button */
/* scoped under .cos-root so the red fill + white icon beat the `.cos-root button { background:none }` reset
   (else the Stop button shows as an invisible white glyph on the surface during every streaming reply) */
.cos-root .cos-stopbtn { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--cos-red); color: #fff; flex: 0 0 auto; box-shadow: 0 2px 8px rgba(239,68,68,.32); cursor: pointer; border: none; }
.cos-stopbtn:hover { filter: brightness(.94); }

/* drag-an-image-onto-chat drop highlight */
.cos-chatwrap.cos-dropimg { outline: 2px dashed var(--cos-accent); outline-offset: -6px; background: var(--cos-accent-softer); }

/* per-machine agent quick-pick menu sits above the card */
.cos-magentsel { position: relative; }
.cos-magentsel .cos-agentmenu { right: 0; left: auto; }

/* coarse-pointer (touch) devices: enforce 44px minimum touch targets */
@media (pointer: coarse) {
  .cos-root .cos-iconbtn, .cos-root .cos-chipbtn, .cos-root .cos-pill,
  .cos-root .cos-tab, .cos-root .cos-newtab, .cos-root .cos-addtile,
  .cos-root .cos-msgact, .cos-root .cos-stopbtn, .cos-root .cos-sendbtn, .cos-root .cos-plusbtn { min-height: 44px; min-width: 44px; }
  .cos-root .cos-drawer-item, .cos-root .cos-drawer-sub, .cos-root .cos-frow, .cos-root .cos-acctmenu-item { min-height: 44px; }
  /* tab close (x): keep the glyph small but grow the tap area to ~34px so it clears the 44px tab
     without mis-tapping the tab body (rank 74) */
  .cos-root .cos-tab .x { position: relative; }
  .cos-root .cos-tab .x::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; }
  /* touch has no :hover to reveal the collapsed x - keep it visible + spaced on inactive tabs */
  .cos-root .cos-tab:not(.active) .x { width: 18px; margin-left: 0; opacity: .6; }
}

/* Touch devices don't fire :hover, so hover-revealed action clusters (drive rename/delete/download,
   chat copy/retry, machine/dashboard header actions) are unreachable. Reveal them on touch so core
   file management + chat actions stay usable on phones (rank 14). */
@media (hover: none), (pointer: coarse) {
  .cos-frowwrap .cos-frowacts,
  .cos-fcardwrap .cos-fcardacts,
  .cos-fcellwrap .cos-frowacts,
  .cos-drawer-sub .cos-dsubacts,
  .cos-md-acts2 { display: inline-flex !important; }
  .cos-msg-bot .cos-msgacts { opacity: 1 !important; }
}

/* Mobile safe areas (paired with viewport-fit=cover in index.html): keep the top chrome clear of the
   notch and the chat composer clear of the home indicator on modern phones. */
@media (max-width: 760px) {
  .cos-tabstrip { padding-top: env(safe-area-inset-top); }
  .cos-chatinrow { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .cos-drawer:not(.collapsed) { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  /* 16px minimum on text fields so iOS Safari never auto-zooms a focused input (jarring layout shift) */
  input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="url"], input:not([type]), textarea,
  .cos-chatinrow input, .cos-omni input { font-size: 16px; }
}

/* DARK THEME — chrome overrides for hardcoded light surfaces (tokens handle the rest) */
.cos-root.cos-dark .cos-tab.active { background: var(--cos-surface); color: var(--cos-ink-1); box-shadow: 0 1px 2px rgba(0,0,0,.5); }
.cos-root.cos-dark .cos-omni:focus-within { background: var(--cos-surface-2); }
.cos-root.cos-dark .cos-cfgmenu,
.cos-root.cos-dark .cos-agentmenu { background-color: var(--cos-surface); }   /* background-color, not the `background` shorthand: the cols menu's scroll-shadow background-image must survive in dark */
/* (uib28) dark: a light edge shadow reads on the dark surface where black would vanish */
.cos-root.cos-dark .cos-cfgmenu { --cos-scrollshadow: rgba(255,255,255,.18); }
.cos-root.cos-dark .cos-agentmenu-item.sel,
.cos-root.cos-dark .cos-agent:hover { background: color-mix(in srgb, var(--ac) 22%, var(--cos-surface)); }
.cos-root.cos-dark .cos-mfolders .cos-folderpill { background: var(--cos-surface-2); border-color: var(--cos-line-1); }
.cos-root.cos-dark .cos-mfolders .cos-folderpill:hover { background: var(--cos-surface-2); border-color: var(--cos-accent); }
.cos-root.cos-dark .cos-favicon { background: var(--cos-surface-2); }
.cos-root.cos-dark .cos-mtile-ico { background: var(--cos-surface-2); box-shadow: 0 1px 5px rgba(0,0,0,.4); }
.cos-root.cos-dark .cos-mtile.tile-remote  { background: linear-gradient(135deg, #2a2140, #18121f); }   /* purple */
.cos-root.cos-dark .cos-mtile.tile-agents  { background: linear-gradient(135deg, #16263f, #0e1827); }   /* blue */
.cos-root.cos-dark .cos-mtile.tile-folders { background: linear-gradient(135deg, #2e2713, #1c1709); }   /* amber */
.cos-root.cos-dark .cos-mtile.tile-term    { background: linear-gradient(135deg, #16241c, #0d1411); }   /* near-black + green code */
.cos-root.cos-dark .cos-webframe,
.cos-root.cos-dark .cos-dashframe { background: #fff; }   /* external content keeps its own bg */  /* theme-ok */
/* company platform views ship the product's own tokens - white behind them flashes on every live srcdoc swap */
.cos-dashframe.cmpview, .cos-root.cos-dark .cos-dashframe.cmpview { background: var(--cos-app-bg); }  /* theme-ok */
.cos-root.cos-dark .cos-iconbtn:hover { background: rgba(255,255,255,.08); }
.cos-edframe { flex: 1 1 auto; min-height: 0; width: 100%; border: 0; background: #fff; }  /* theme-ok */
/* ---- dark-theme QA fixes: surfaces that were hardcoded light (Chrome tab restyle, address-bar
   frosted glass, drive chips) now follow the dark palette ---- */
.cos-root.cos-dark .cos-tabstrip { background: var(--cos-tabstrip-bg); border-bottom-color: var(--cos-line-1); }
.cos-root.cos-dark .cos-tab { color: var(--cos-ink-3); }
.cos-root.cos-dark .cos-tab:hover { background: #1c2027; }
.cos-root.cos-dark .cos-tab.active { background: var(--cos-surface-2); color: var(--cos-ink-1); border-radius: 10px 10px 0 0; box-shadow: none; }
.cos-root.cos-dark .cos-tab:not(.active) + .cos-tab:not(.active)::before { background: rgba(255,255,255,.16); }
.cos-root.cos-dark .cos-tab:hover + .cos-tab::before, .cos-root.cos-dark .cos-tab.active + .cos-tab::before { background: transparent; }
.cos-root.cos-dark .cos-tab .x:hover { background: rgba(255,255,255,.16); }
.cos-root.cos-dark .cos-newtab { color: var(--cos-ink-3); }
.cos-root.cos-dark .cos-newtab:hover { background: rgba(255,255,255,.06); }
/* address bar frosted glass -> dark translucent; inner omnibox darkens too */
.cos-root.cos-dark .cos-addr { background: #16181d; }
.cos-root.cos-dark .cos-addr .cos-omni { background: #0c0e12; border-color: #23262e; }
.cos-root.cos-dark .cos-addr .cos-omni:focus-within { background: #0c0e12; border-color: var(--cos-accent); }
/* drive file chips were white-on-dark */
.cos-root.cos-dark .cos-drivecard .cos-dchip { background: var(--cos-surface-2); border-color: var(--cos-line-1); }
.cos-root.cos-dark .cos-drivecard .cos-dchip:hover { background: var(--cos-surface-2); border-color: var(--cos-accent); }
/* avatar halo: soften the white ring against dark */
.cos-root.cos-dark .cos-avatar { box-shadow: 0 0 0 4px var(--cos-surface), 0 0 0 5px var(--cos-line-1), 0 0 0 10px rgba(68,147,248,.12); }
.cos-root.cos-dark .cos-chatcard-head .cos-avatar { box-shadow: 0 0 0 2px var(--cos-surface), 0 0 0 3px var(--cos-line-1); }
.cos-root.cos-dark .cos-chatav { box-shadow: 0 0 0 2px var(--cos-surface), 0 0 0 3px var(--cos-line-1); }

/* viewer tables (CSV spreadsheet / JSON) - the legacy bridge styles leaked #1a1a1a cells and dim
   #888 text; force our ink/line tokens so cells read in both light and dark themes */
.cos-edview td, .cos-edview th { color: var(--cos-ink-2) !important; background: transparent !important; border-color: var(--cos-line-2) !important; }
.cos-edview th, .cos-edview thead td, .cos-edview tr:first-child th { color: var(--cos-ink-1) !important; font-weight: 700; }

/* connect popup in dark mode: was a washed-out white panel (light text became invisible) */
.cos-root.cos-dark .cos-connectpop { background: rgba(22, 27, 34, .92); border-color: var(--cos-line-1); box-shadow: 0 16px 44px rgba(0,0,0,.55); }
.cos-root.cos-dark .cos-connectpop .x { color: var(--cos-ink-3); }



/* ---- QA fixes: dark-mode gaps surfaced by the feature audit ---- */
/* intervention banner: amber-on-white is unreadable/glaring in dark */
.cos-root.cos-dark .cos-intervene { background: #3a2e0c; border-bottom-color: #5a4a16; color: #fde68a; }
.cos-root.cos-dark .cos-intervene input { background: var(--cos-surface-2); border-color: var(--cos-line-1); color: var(--cos-ink-1); }
/* drawer entry-type icon tints: tc-term (#334155) and others fail contrast on the dark drawer */
.cos-root.cos-dark .cos-drawer-item .ico.tc-chat { color: var(--cos-accent); }
.cos-root.cos-dark .cos-drawer-item .ico.tc-term { color: #cbd5e1; }
.cos-root.cos-dark .cos-drawer-item .ico.tc-web { color: #60a5fa; }
.cos-root.cos-dark .cos-drawer-item .ico.tc-remote { color: #22d3ee; }
/* dark-mode legibility: the shell-script file glyph (#334155) and danger red (#dc2626) are too dark on dark surfaces */
.cos-root.cos-dark .ft-sh { color: #94a3b8 !important; }   /* was #334155 ~1.5:1 on dark surfaces -> #94a3b8 ~5.5:1 */
.cos-root.cos-dark .cos-acctmenu-item.danger,
.cos-root.cos-dark .cos-chipbtn.danger,
.cos-root.cos-dark .cos-attchip button:hover,
.cos-root.cos-dark .cos-frx:hover { color: #f87171; }   /* was #dc2626 ~3.3:1 -> #f87171 ~6:1 (WCAG AA) */
.cos-root.cos-dark [data-voice].rec { color: #f87171 !important; }
/* address bar glass border was only half-themed in dark (bg overridden, border not) */
.cos-root.cos-dark .cos-addr { border-color: var(--cos-line-3); }
.cos-root.cos-dark .cos-addr .cos-omni { border-color: #23262e; }
.cos-root.cos-dark .cos-addr .cos-omni:focus-within { border-color: var(--cos-accent); }
/* drive-pull pending: dim the button instead of replacing its icon with a character */
.cos-root [data-dpull].cos-pulling { opacity: .5; }

/* ============================================================================
   UNIFIED DARK PALETTE — spacing + elevation polish (Phase HUB-UX-04 refinement)
   Scoped to .cos-dark so light / graphite / contrast themes are untouched. All
   literals here are intentionally dark surfaces (low luminance) -> theme-ok. */

/* sidebar gets its own tier - one shade below the card surface */
.cos-root.cos-dark .cos-drawer { background: #101217; }  /* theme-ok: dark sidebar tier */

/* unified hover for list rows / chips / icon buttons (one shade above chip rest) */
.cos-root.cos-dark .cos-iconbtn:hover,
.cos-root.cos-dark .cos-drawer-item:hover,
.cos-root.cos-dark .cos-drawer-item.cur,
.cos-root.cos-dark .cos-drawer-sub:hover,
.cos-root.cos-dark .cos-fr-item:hover,
.cos-root.cos-dark .cos-frow:hover,
.cos-root.cos-dark .cos-setup-it:hover,
.cos-root.cos-dark .cos-pill:hover,
.cos-root.cos-dark .cos-fcell:hover,
.cos-root.cos-dark .cos-dchip:hover { background: #20242d; }  /* theme-ok: dark hover tier */

/* mac tiles: bottom gradient scrim so the label stays legible over the illustration */
.cos-root.cos-dark .cos-mtile::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background: linear-gradient(to top, rgba(8,10,14,.6), transparent);
  pointer-events: none; z-index: 0;
}

/* primary buttons: vertical blue gradient + soft shadow */
.cos-root.cos-dark .cos-primarybtn,
.cos-root.cos-dark .cos-ctabtn {
  background: linear-gradient(180deg, #4a8cff, #3a7af0);  /* theme-ok: blue CTA, dark-scoped */
  box-shadow: 0 4px 14px rgba(63,131,248,.35);
}
.cos-root.cos-dark .cos-primarybtn:hover,
.cos-root.cos-dark .cos-ctabtn:hover { background: linear-gradient(180deg, #5b97ff, #4583f5); }  /* theme-ok */

/* secondary (connect popup): outlined, not filled */
.cos-root.cos-dark .cos-secondarybtn {
  background: transparent; border-color: var(--cos-line-1); color: var(--cos-ink-2);
}
.cos-root.cos-dark .cos-secondarybtn:hover {
  background: var(--cos-surface-2); border-color: var(--cos-accent); color: var(--cos-accent-hover);
}

/* ask / search box: faint accent glow + depth shadow */
.cos-root.cos-dark .cos-chatcard .cos-omnibig {
  box-shadow: 0 0 0 4px rgba(63,131,248,.06), 0 8px 24px rgba(0,0,0,.28);
}
.cos-root.cos-dark .cos-chatcard .cos-omnibig:focus-within {
  box-shadow: 0 0 0 4px rgba(63,131,248,.14), 0 8px 26px rgba(0,0,0,.34);
}

/* file-type glyph colors (unified scale): md blue, html orange, csv green; folders use --cos-orange amber */
.cos-root.cos-dark .ft-md { color: #6f9bff !important; }
.cos-root.cos-dark .ft-html { color: #e8744a !important; }
.cos-root.cos-dark .ft-csv { color: #4fbf86 !important; }

/* ============================================================================
   NEW-TAB REFINEMENT v2 — folder amber, hero chat bubble, suggest row,
   merged rec/fav card, demo popover, responsive tiles. */

/* (1) folders are ALWAYS amber — drive grid, recents, favorites, drawer, pills */
.cos-root .ft-fold,
.cos-root .cos-dchip .ico.fold,
.cos-root .cos-fr-ico.tc-files,
.cos-root .cos-favchip-ico.tc-files,
.cos-root .cos-mfolders .cos-folderpill .ico { color: var(--cos-orange) !important; }
.cos-root .cos-fr-ico.tc-files { background: rgba(224,179,74,.14); }

/* (4) hero as a chat message — avatar + assistant bubble (sharp top-left corner) */
.cos-hero-msg { display: flex; align-items: flex-start; gap: 16px; margin: 6px auto 24px; max-width: none; }
/* hero avatar: a larger glyph (76px) on a bigger decorative background circle (~112px) */
/* Hero avatar = a rounded rectangular "video tile" (Google-Meet / Zoom style): the scene background
   fills the whole tile and the 3D character / SVG sits centred. The renderer + SVG glyphs are square,
   so we letterbox them (full height, auto width, centred) instead of stretching - never distorted. */
/* avatar top aligns with the bubble top; its left edge sits flush with the composer box / cards left edge */
.cos-hero-av { position: relative; flex: 0 0 auto; width: 156px; height: 118px; display: grid; place-items: center; }
.cos-hero-av .cos-avatar { width: 156px; height: 118px; border-radius: 22px; box-shadow: none; background: transparent; }
.cos-hero-av .cos-avatar .online { display: none; }   /* hero avatar shows no online dot (controls live in the corners) */
/* the background fills the whole tile (rounded rectangle) with a soft drop shadow */
.cos-avatar-bg { position: absolute; inset: 0; border-radius: 50%; z-index: 0; overflow: hidden; }
.cos-hero-av .cos-avatar-bg { inset: 0; border-radius: 22px; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.cos-hero-av .cos-avatar-3d, .cos-hero-av .cos-avatar-svg { border-radius: 22px; }
/* square render/glyph: full tile height, auto (square) width, centred in the wider tile */
.cos-hero-av .cos-avatar-3d canvas,
.cos-hero-av .cos-avatar-svg svg,
.cos-hero-av .cos-avatar-custom .cos-avatar-svg svg {
  width: auto !important; height: 100% !important; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.cos-avatar-svg, .cos-avatar-3d { z-index: 1; }
/* custom (non-robot) glyphs: white by default so they read on the gradients; dark on the light bg */
.cos-avatar-custom .cos-avatar-svg { color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.28)); }
.cos-avatar-custom.cos-av-onlight .cos-avatar-svg { color: #2d3339; filter: none; }
.cos-avatar-custom .cos-avatar-svg svg { width: 100%; height: 100%; display: block; }
/* edit button (top-right of the avatar) opens the customize menu */
.cos-avedit { position: absolute; top: -2px; right: -2px; z-index: 4; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--cos-surface); border: 1px solid var(--cos-line-1); color: var(--cos-ink-3); box-shadow: var(--cos-shadow-card); cursor: pointer; }
.cos-avedit:hover { color: var(--cos-accent); border-color: var(--cos-accent); }
/* customize dropdown */
.cos-avmenu { display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; width: 268px; padding: 12px; background: var(--cos-surface); border: 1px solid var(--cos-line-2); border-radius: 12px; box-shadow: var(--cos-shadow-pop); max-height: min(72vh, 620px); overflow-y: auto; }   /* (uib38) the menu grew (5 humans + 19 backgrounds) - without a scroll the Background section ran past the viewport and looked missing */
.cos-hero-av.avopen .cos-avmenu { display: block; }
.cos-avmenu-sec { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cos-ink-4); margin: 2px 2px 8px; }
/* (uib41b) New Tabs control: what a new tab wears - fresh pair vs the default look */
.cos-avmode-row { display: flex; gap: 6px; margin-bottom: 8px; }
.cos-root .cos-avmode { flex: 1; height: 28px; border-radius: 8px; padding: 0 10px; font-size: 12px; font-weight: 600; color: var(--cos-ink-2); background: var(--cos-surface-2); border: 1px solid var(--cos-line-2); cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.cos-root .cos-avmode:hover { border-color: rgba(63,131,248,.45); }
.cos-avmode.sel { border-color: var(--cos-accent); box-shadow: 0 0 0 2px var(--cos-accent-soft); color: var(--cos-accent); }
.cos-root .cos-avsetdef { display: block; width: 100%; margin-bottom: 12px; height: 26px; border-radius: 8px; font-size: 11.5px; font-weight: 600; color: var(--cos-ink-3); background: none; border: 1px dashed var(--cos-line-2); cursor: pointer; }
.cos-root .cos-avsetdef:hover { color: var(--cos-accent); border-color: var(--cos-accent); }
.cos-root .cos-avsetdef[disabled] { opacity: .55; cursor: default; }
.cos-root .cos-avsetdef[disabled]:hover { color: var(--cos-ink-3); border-color: var(--cos-line-2); }
.cos-avmenu-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.cos-avmenu-row:last-child { margin-bottom: 0; }
.cos-root .cos-avopt { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; padding: 0; background: var(--cos-surface-2); border: 1px solid var(--cos-line-2); cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .09s; }
.cos-root .cos-avopt:hover { border-color: rgba(63,131,248,.45); }
.cos-root .cos-avopt:active { transform: scale(.94); }
.cos-avopt.sel { border-color: var(--cos-accent); box-shadow: 0 0 0 2px var(--cos-accent-soft); }
.cos-avopt-ico { display: inline-flex; width: 22px; height: 22px; color: var(--cos-ink-2); }
.cos-avopt-ico svg { width: 22px; height: 22px; display: block; }
/* 3D character picks: wider pills with a label (real TalkingHead avatars) */
.cos-avmenu-th { gap: 8px; }
.cos-root .cos-avopt-th { width: auto; min-width: 60px; height: 36px; padding: 0 10px 0 7px; gap: 6px; grid-auto-flow: column; justify-content: start; }
.cos-avopt-th .cos-avopt-ico { width: 18px; height: 18px; color: var(--cos-accent); }
.cos-avopt-th .cos-avopt-ico svg { width: 18px; height: 18px; }
.cos-avopt-lbl { font-size: 12px; font-weight: 600; color: var(--cos-ink-2); letter-spacing: .01em; }
.cos-avopt-th.sel .cos-avopt-lbl { color: var(--cos-accent); }
/* 3D character picks WITH a live-rendered preview thumbnail (toon + human avatars) */
.cos-root .cos-avopt-char { width: auto; min-width: 0; height: auto; flex-direction: column; align-items: center; padding: 0; gap: 4px; background: none; border: 0; grid-auto-flow: row; justify-content: start; }
.cos-root .cos-avopt-char:hover { border: 0; }
.cos-avopt-thumb { position: relative; overflow: hidden; width: 56px; height: 56px; border-radius: 11px; border: 1px solid var(--cos-line-2); display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0,0,0,.16); transition: box-shadow .12s, transform .09s; }
.cos-root .cos-avopt-char:hover .cos-avopt-thumb { box-shadow: 0 2px 8px rgba(0,0,0,.2); transform: translateY(-1px); }
.cos-root .cos-avopt-char:active .cos-avopt-thumb { transform: scale(.95); }
.cos-avopt-char.sel .cos-avopt-thumb { border-color: var(--cos-accent); box-shadow: 0 0 0 2px var(--cos-accent-soft); }
/* the rendered character image sits above the animated scene background; fades in once ready */
.cos-avopt-char-img { position: absolute; inset: 0; z-index: 2; background-size: contain; background-position: center 64%; background-repeat: no-repeat; opacity: 0; transition: opacity .22s ease; }
.cos-avopt-thumb.has-prev .cos-avopt-char-img { opacity: 1; }
.cos-avopt-thumb .cos-avopt-ico { position: relative; z-index: 1; width: 28px; height: 28px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); transition: opacity .22s ease; }
.cos-avopt-thumb .cos-avopt-ico svg { width: 28px; height: 28px; }
.cos-avopt-thumb.has-prev .cos-avopt-ico { opacity: 0; }
/* background picker: a grid of circular scene previews, each with a caption */
.cos-avmenu-bgs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 6px; }
.cos-root .cos-bgopt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; background: none; border: 0; cursor: pointer; }
.cos-bgprev { width: 38px; height: 38px; border-radius: 50%; position: relative; overflow: hidden; border: 1px solid rgba(0,0,0,.3); box-shadow: 0 0 0 2px transparent; transition: box-shadow .12s, transform .09s; }
.cos-root .cos-bgopt:hover .cos-bgprev { transform: scale(1.06); }
.cos-root .cos-bgopt:active .cos-bgprev { transform: scale(.94); }
.cos-bgopt.sel .cos-bgprev { box-shadow: 0 0 0 2px var(--cos-surface), 0 0 0 4px var(--cos-accent); }
.cos-bglbl { font-size: 9.5px; font-weight: 600; color: var(--cos-ink-3); letter-spacing: .01em; max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cos-bgopt.sel .cos-bglbl { color: var(--cos-accent); }

/* ============================================================================
   AVATAR SCENE BACKGROUNDS (Zoom-style virtual backgrounds, CSS only).
   Gradients are stripped by theme-lint; only solid LIGHT fills need theme-ok. */

/* 1. Northern Lights — dark sky + slow-shifting aurora bands */
.cos-bg-aurora { background: linear-gradient(180deg, #061425, #0a1f33); }
.cos-bg-aurora::before { content: ''; position: absolute; inset: -35%; filter: blur(7px); background: radial-gradient(55% 38% at 30% 32%, rgba(64,224,160,.6), transparent 70%), radial-gradient(50% 40% at 70% 42%, rgba(124,92,255,.5), transparent 70%), radial-gradient(60% 46% at 52% 60%, rgba(60,170,255,.45), transparent 72%); animation: cos-aurora 18s ease-in-out infinite alternate; }
@keyframes cos-aurora { 0% { transform: translate(-7%,-5%) rotate(-5deg); } 100% { transform: translate(7%,5%) rotate(5deg); } }

/* 2. Ocean Sunset — warm sun glow over a horizon, orange -> purple -> deep blue */
.cos-bg-ocean { background: radial-gradient(42% 24% at 50% 47%, rgba(255,214,150,.95), rgba(255,150,80,.55) 42%, transparent 72%), linear-gradient(180deg, #3a2350 0%, #8a3b5e 33%, #d9663f 50%, #7a3a55 57%, #16213e 100%); }  /* theme-ok: decorative sunset avatar scene (gradient) */
.cos-bg-ocean::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: repeating-linear-gradient(180deg, rgba(255,200,150,.18) 0 2px, transparent 2px 7px); animation: cos-shimmer 9s ease-in-out infinite alternate; }
@keyframes cos-shimmer { 0% { opacity: .35; } 100% { opacity: .7; } }

/* 3. Mountain Night — starry sky + dark peak silhouette */
.cos-bg-mountain { background: radial-gradient(1px 1px at 22% 24%, #fff, transparent), radial-gradient(1px 1px at 62% 16%, #d6e8ff, transparent), radial-gradient(1.4px 1.4px at 80% 33%, #fff, transparent), radial-gradient(1px 1px at 41% 38%, #fff, transparent), radial-gradient(1px 1px at 12% 50%, #cfe, transparent), linear-gradient(180deg, #0a1430, #143055); }
.cos-bg-mountain::after { content: ''; position: absolute; inset: 0; background: #070d1a; clip-path: polygon(0 100%, 16% 60%, 33% 82%, 50% 48%, 68% 76%, 100% 56%, 100% 100%); }

/* 4. City Skyline — dusk gradient, building silhouette, warm window dots */
.cos-bg-city { background: linear-gradient(180deg, #241a3e, #3a2350 55%, #5a2f4e); }
.cos-bg-city::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 64%; background: radial-gradient(1.4px 1.4px at 18% 40%, rgba(255,210,130,.95), transparent), radial-gradient(1.4px 1.4px at 30% 60%, rgba(255,210,130,.85), transparent), radial-gradient(1.4px 1.4px at 50% 35%, rgba(255,225,150,.95), transparent), radial-gradient(1.4px 1.4px at 64% 62%, rgba(255,210,130,.85), transparent), radial-gradient(1.4px 1.4px at 80% 45%, rgba(255,225,150,.95), transparent); }
.cos-bg-city::after { content: ''; position: absolute; inset: 0; background: #0c0a1a; clip-path: polygon(0 100%,0 64%,10% 64%,10% 52%,20% 52%,20% 70%,30% 70%,30% 46%,42% 46%,42% 66%,52% 66%,52% 40%,62% 40%,62% 60%,74% 60%,74% 50%,84% 50%,84% 68%,100% 68%,100% 100%); }

/* 5. Deep Space — nebula radials + stars + slow drift */
.cos-bg-space { background: radial-gradient(42% 42% at 30% 30%, rgba(124,60,200,.6), transparent 70%), radial-gradient(40% 40% at 72% 62%, rgba(40,90,210,.55), transparent 70%), radial-gradient(30% 30% at 56% 42%, rgba(205,60,150,.42), transparent 70%), #060814; animation: cos-spacedrift 26s ease-in-out infinite alternate; }
.cos-bg-space::before { content: ''; position: absolute; inset: 0; background: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 72% 22%, #fff, transparent), radial-gradient(1px 1px at 46% 66%, #fff, transparent), radial-gradient(1px 1px at 86% 56%, #fff, transparent), radial-gradient(1px 1px at 32% 82%, #fff, transparent), radial-gradient(1px 1px at 60% 88%, #cfe, transparent); }
@keyframes cos-spacedrift { 0% { background-position: 0 0; } 100% { background-position: 12% 8%; } }

/* 6. Forest — layered green canopy depth */
.cos-bg-forest { background: radial-gradient(62% 50% at 50% 16%, rgba(150,220,140,.3), transparent 60%), linear-gradient(180deg, #0c2a18, #114322 52%, #0a2412); }
.cos-bg-forest::after { content: ''; position: absolute; inset: 0; background: radial-gradient(46% 34% at 28% 102%, rgba(22,86,44,.85), transparent 70%), radial-gradient(46% 34% at 72% 102%, rgba(16,66,34,.85), transparent 70%), radial-gradient(40% 30% at 50% 108%, rgba(30,110,56,.7), transparent 70%); }

/* 7. Particles — drifting orbs */
.cos-bg-particles { background: linear-gradient(180deg, #0e1630, #141d3c); }
.cos-bg-particles::before, .cos-bg-particles::after { content: ''; position: absolute; inset: -25%; background-image: radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.85), transparent), radial-gradient(2px 2px at 62% 70%, rgba(150,185,255,.85), transparent), radial-gradient(1.6px 1.6px at 82% 22%, rgba(255,255,255,.75), transparent), radial-gradient(2px 2px at 40% 82%, rgba(165,205,255,.75), transparent), radial-gradient(1.6px 1.6px at 10% 62%, rgba(255,255,255,.65), transparent); animation: cos-particles 22s linear infinite; }
.cos-bg-particles::after { animation-duration: 30s; animation-direction: reverse; opacity: .7; }
@keyframes cos-particles { 0% { transform: translateY(10%); } 100% { transform: translateY(-10%); } }

/* 8. Gradient Wave — continuously flowing colors */
.cos-bg-wave { background: linear-gradient(120deg, #3f83f8, #9d7bff, #34d39a, #f5a44a, #3f83f8); background-size: 300% 300%; animation: cos-wavebg 16s ease infinite; }
@keyframes cos-wavebg { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* 9. Matrix Rain — faint green dashes falling in columns */
.cos-bg-matrix { background: #020a05; }
.cos-bg-matrix::before { content: ''; position: absolute; inset: -60% 0; background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(0,0,0,.55) 7px 9px), repeating-linear-gradient(180deg, transparent 0 6px, rgba(0,255,95,.55) 6px 9px, transparent 9px 46px); background-size: 9px 100%, 9px 64px; animation: cos-matrix 5.5s linear infinite; opacity: .55; }
@keyframes cos-matrix { 0% { background-position: 0 0, 0 0; } 100% { background-position: 0 0, 0 64px; } }

/* 10. Abstract Flow — fluid blobs drifting (lava-lamp feel) */
.cos-bg-flow { background: linear-gradient(130deg, #1a1f4a, #3a2a6e, #1e3a5f); }
.cos-bg-flow::before, .cos-bg-flow::after { content: ''; position: absolute; inset: -45%; border-radius: 50%; filter: blur(9px); mix-blend-mode: screen; }
.cos-bg-flow::before { background: radial-gradient(circle, rgba(80,120,255,.65), transparent 60%); animation: cos-flow1 14s ease-in-out infinite alternate; }
.cos-bg-flow::after { background: radial-gradient(circle, rgba(205,80,185,.55), transparent 60%); animation: cos-flow2 18s ease-in-out infinite alternate; }
@keyframes cos-flow1 { 0% { transform: translate(-20%,-10%) scale(1); } 100% { transform: translate(22%,16%) scale(1.3); } }
@keyframes cos-flow2 { 0% { transform: translate(22%,12%) scale(1.2); } 100% { transform: translate(-16%,-16%) scale(1); } }

/* 11/12. plain choices */
.cos-bg-dark { background: #14161c; }
.cos-bg-light { background: #e9f1ff; }  /* theme-ok: user-selectable plain-light avatar scene (decorative) */

/* Perf: promote the continuously-animated scenes to their own GPU layer (only transform/opacity/
   background-position animate, so this is cheap and stops per-frame repaints of the blurred layers). */
.cos-bg-aurora::before, .cos-bg-ocean::after, .cos-bg-space, .cos-bg-particles::before,
.cos-bg-particles::after, .cos-bg-wave, .cos-bg-matrix::before, .cos-bg-flow::before,
.cos-bg-flow::after { will-change: transform, opacity, background-position; }
/* When the tab is hidden, freeze every scene animation - the browser keeps CSS animations running on
   background tabs, which is pure wasted work. .cos-hidden is toggled from visibilitychange in shell.js. */
.cos-root.cos-hidden [class*="cos-bg-"],
.cos-root.cos-hidden [class*="cos-bg-"]::before,
.cos-root.cos-hidden [class*="cos-bg-"]::after { animation-play-state: paused !important; }
/* Hero at rest: when the TalkingHead avatar idle-pauses (see thSleepSoon in shell.js), freeze the
   scene backdrop too. The default aurora backdrop animates a blur(7px) layer + others animate
   background-position - continuous repaints that are the idle-CPU residual once the avatar is paused.
   Resumes on the next utterance (thWake removes the class). */
.cos-root.cos-av-rest [class*="cos-bg-"],
.cos-root.cos-av-rest [class*="cos-bg-"]::before,
.cos-root.cos-av-rest [class*="cos-bg-"]::after { animation-play-state: paused !important; }
/* two controls docked along the bottom of the hero avatar tile: audio (mute) + profile (customize),
   as translucent pills that sit "in" the avatar's animated background */
.cos-hero-av .cos-hero-avbar { position: absolute; left: 4px; right: 4px; bottom: 4px; display: flex; justify-content: space-between; z-index: 4; }
.cos-hero-av .cos-hero-avbar .cos-greetmute { position: static; left: auto; bottom: auto; }
.cos-hero-av .cos-hero-avbar .cos-avedit { position: static; top: auto; right: auto; }
.cos-hero-av .cos-hero-avbar .cos-iconbtn,
.cos-hero-av .cos-hero-avbar .cos-avedit { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(18,20,26,.5); border: 1px solid rgba(255,255,255,.2); color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.32); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.cos-hero-av .cos-hero-avbar .cos-iconbtn:hover,
.cos-hero-av .cos-hero-avbar .cos-avedit:hover { background: rgba(18,20,26,.8); border-color: rgba(255,255,255,.4); color: #fff; }  /* theme-ok: translucent controls over the avatar's scene background, same in light + dark */
/* message bubble: copy on the left, the demo video as a tile on the right (side by side) */
.cos-hero-bubble { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-start; gap: 14px; background: var(--cos-surface-2); border: 1px solid var(--cos-line-2); border-radius: 18px; padding: 10px; }   /* (uib29) tight frame so the demo video runs bigger; the copy keeps its own inner padding below */
/* speech-bubble tail pointing left at the avatar (border layer + fill layer) */
.cos-hero-bubble::before { content: ''; position: absolute; left: -9px; top: 15px; width: 0; height: 0; border: 9px solid transparent; border-left: 0; border-right-color: var(--cos-line-2); }
.cos-hero-bubble::after { content: ''; position: absolute; left: -7px; top: 16px; width: 0; height: 0; border: 8px solid transparent; border-left: 0; border-right-color: var(--cos-surface-2); }
.cos-hero-copy { flex: 1 1 auto; min-width: 0; padding: 12px 0 12px 14px; }   /* (uib29) text keeps its old breathing room while the bubble frame tightened for the video */
.cos-hero-bubble .cos-welcome-ttl { font-size: 19px; line-height: 1.4; font-weight: 700; letter-spacing: 0; margin: 0; text-align: left; }
.cos-greet-wave { display: inline-block; }   /* wave emoji, always visible beside the heading */
.cos-hero-bubble .cos-welcome-sub { font-size: 17px; line-height: 1.5; margin: 6px 0 0; text-align: left; max-width: none; color: var(--cos-text); }
/* inline message links (flow with the text; .cos-root outranks the button reset) */
.cos-root .cos-hero-link { display: inline; font: inherit; font-weight: 600; color: var(--cos-accent); background: none; border: 0; padding: 0; cursor: pointer; }
.cos-root .cos-hero-link:hover { text-decoration: underline; }
.cos-hero-sep { color: var(--cos-ink-4); font-weight: 400; padding: 0 2px; }   /* dot divider between the two inline CTAs */
/* quiet "What is Dashob?" link under the greeting - focuses the pre-opened About tab */
@container (max-width: 520px) { .cos-hero-bubble .cos-welcome-ttl { font-size: 17px; } }
/* short looping product demo, sized as the bubble's right-hand tile */
.cos-hero-demo { flex: 0 0 55%; max-width: 640px; align-self: center; border-radius: 12px; overflow: hidden; border: 1px solid var(--cos-line-2); background: #000; line-height: 0; }   /* (uib29) bigger video: larger flex share inside the tightened bubble */
.cos-hero-demo video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@container (max-width: 560px) { .cos-hero-bubble { flex-direction: column; align-items: stretch; } .cos-hero-demo { flex: 0 0 auto; max-width: none; } }
/* (uib33) narrow tiles: the left-avatar row squeezed the bubble, so under ~700px of tile width the
   greeting STACKS - avatar centered ABOVE, bubble takes the FULL width (text + demo video inside get
   the room; video under the text). Container-driven (.cos-main is an inline-size container) so a
   narrow split tile on a wide screen stacks too; identical viewport fallback below for browsers
   without @container. The bubble tail is hidden when stacked - it would point at nothing. */
@container (max-width: 700px) {
  .cos-hero-msg { flex-direction: column; align-items: center; gap: 10px; }
  .cos-hero-av, .cos-hero-av .cos-avatar { width: 124px; height: 94px; }
  .cos-hero-av .cos-avatar-bg, .cos-hero-av .cos-avatar-3d, .cos-hero-av .cos-avatar-svg { border-radius: 18px; }
  .cos-hero-bubble { width: 100%; flex-direction: column; align-items: stretch; }
  .cos-hero-bubble::before, .cos-hero-bubble::after { display: none; }
  .cos-hero-demo { flex: 0 0 auto; max-width: none; }
  .cos-home-return .cos-hero-msg { margin-bottom: 16px; }
}
@media (max-width: 760px) {
  .cos-hero-msg { flex-direction: column; align-items: center; gap: 10px; }
  .cos-hero-av, .cos-hero-av .cos-avatar { width: 124px; height: 94px; }
  .cos-hero-av .cos-avatar-bg, .cos-hero-av .cos-avatar-3d, .cos-hero-av .cos-avatar-svg { border-radius: 18px; }
  .cos-hero-bubble { width: 100%; flex-direction: column; align-items: stretch; }
  .cos-hero-bubble::before, .cos-hero-bubble::after { display: none; }
  .cos-hero-demo { flex: 0 0 auto; max-width: none; }
  .cos-home-return .cos-hero-msg { margin-bottom: 16px; }
}
/* generous breathing room: a big gap between the hero message and the composer, and below the chips.
   (uib42) the vh terms carry a negative intercept so the gaps collapse toward the floor on SHORT
   windows (~10px near 500px tall) instead of clamping at a 40-44px minimum, while matching the old
   generous values on tall windows (same numbers at ~1000px, same caps). */
.cos-home { padding-top: clamp(2px, calc(5vh - 20px), 28px); }
.cos-hero-msg { margin-bottom: clamp(10px, calc(16vh - 70px), 112px); }
.cos-root .cos-home > .cos-suggest { margin: 16px auto clamp(8px, calc(14vh - 60px), 100px); }

/* (6) suggestion chips: single horizontal-scroll row, hidden scrollbar, More pinned right */
.cos-root .cos-suggest { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; max-width: none; margin: 12px auto 8px; }
/* horizontal chip scroller: scrollbar space is always reserved (no layout shift) but the thumb only
   shows on hover, so 25 chips stay on one line and reveal their scroll affordance when pointed at */
.cos-suggest-scroll { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; scrollbar-color: transparent transparent; }
.cos-suggest-scroll:hover { scrollbar-color: var(--cos-line-2) transparent; }
.cos-suggest-scroll::-webkit-scrollbar { height: 6px; }
.cos-suggest-scroll::-webkit-scrollbar-track { background: transparent; }
.cos-suggest-scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; }
.cos-suggest-scroll:hover::-webkit-scrollbar-thumb { background: var(--cos-line-2); }
.cos-root .cos-suggest .cos-chipbtn { flex: 0 0 auto; white-space: nowrap; font-size: 12px; font-weight: 500; padding: 5px 11px; height: auto; border-radius: 999px; border: 1px solid var(--cos-line-2); background: var(--cos-surface); color: var(--cos-text-2); }
.cos-root .cos-suggest .cos-chipbtn:hover { border-color: var(--cos-accent); color: var(--cos-accent); background: var(--cos-surface); }
.cos-root .cos-suggest .cos-chipbtn svg { opacity: .8; }
/* The chip scroller reserves an ~11px horizontal-scrollbar strip at its bottom, so it is taller
   than the chips, which top-align inside it. align-self:flex-start makes the (non-scrolling) More
   button top-align too, so its top/bottom match the chips instead of being centred ~6px lower. */
.cos-root .cos-suggest .more { flex: 0 0 auto; align-self: flex-start; margin-left: 2px; padding: 5px 10px; font-size: 12px; border-radius: 999px; color: var(--cos-muted); }

/* (7) merged Recent + Favorites card: fav drop-zone on top, divider, recents below */
.cos-frcard { border: 1px solid var(--cos-line-2); border-radius: var(--cos-radius-card); background: var(--cos-surface); padding: 12px 14px; }
.cos-frcard .cos-fr-label { margin: 0 0 8px; display: block; }
.cos-fav-zone { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 38px; padding: 2px 0; }
.cos-fav-zone.empty { justify-content: center; }
.cos-fav-hint { font-size: 12px; color: var(--cos-muted); text-align: center; line-height: 1.5; max-width: 320px; }
.cos-favchip { display: inline-flex; align-items: center; gap: 7px; max-width: 210px; padding: 4px 5px 4px 9px; border-radius: 999px; background: var(--cos-surface-2); border: 1px solid var(--cos-line-2); color: var(--cos-text); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.cos-favchip:hover { border-color: var(--cos-accent); }
/* position:relative so the overlaid .cos-favicon (position:absolute) stays clipped to the chip icon -
   without it the absolute favicon escapes to the nearest positioned ancestor and floats mid-page */
.cos-favchip-ico { display: inline-flex; flex: 0 0 auto; color: var(--cos-text-2); position: relative; width: 14px; height: 14px; align-items: center; justify-content: center; }
.cos-favchip-ico svg { width: 14px; height: 14px; }
.cos-favchip-ico .cos-favicon { width: 14px; height: 14px; }
.cos-favchip-ico.tc-web { color: #6f9bff; }
.cos-favchip-ico.tc-chat { color: var(--cos-accent); }
.cos-favchip-ico.tc-term { color: #34d39a; }
.cos-favchip-ico.tc-remote { color: #22d3ee; }
.cos-favchip-tt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cos-root .cos-favchip .cos-frx { font-size: 14px; line-height: 1; color: var(--cos-muted); padding: 2px 3px; margin: 0; border-radius: 50%; flex: 0 0 auto; opacity: 0; transition: opacity .12s ease; }
.cos-root .cos-favchip:hover .cos-frx { opacity: 1; }
.cos-root .cos-favchip .cos-frx:hover { color: var(--cos-red); background: var(--cos-surface); }
.cos-frcard-div { height: 1px; background: var(--cos-line-3); margin: 12px 0; }
.cos-rec-list { display: flex; flex-direction: column; gap: 1px; }
.cos-rec-list .cos-fr-item { padding: 6px 8px; }

/* (10) demo-machine teaser popover — partially overlaps the Demo machine row */
.cos-demo-wrap { position: relative; padding-bottom: 4px; }
.cos-demo-pop { position: relative; z-index: 5; margin: -6px 5px 6px; padding: 11px 12px; background: var(--cos-surface); border: 1px solid var(--cos-line-1); border-radius: 12px; box-shadow: var(--cos-shadow-pop); text-align: center; }
.cos-demo-pop b { display: block; font-size: 12px; color: var(--cos-ink-1); }
.cos-demo-pop i { font-style: normal; display: block; font-size: 10.5px; color: var(--cos-ink-3); margin: 2px 0 9px; line-height: 1.35; }
.cos-demo-pop .cos-connectpop-btns { display: flex; flex-direction: column; gap: 6px; }
.cos-root .cos-demo-pop .cos-primarybtn, .cos-root .cos-demo-pop .cos-secondarybtn { width: 100%; min-height: 32px; font-size: 11px; padding: 5px 8px; margin-top: 0; }
.cos-demo-badge { font-size: 8.5px; font-weight: 800; letter-spacing: .03em; padding: 1px 5px; border-radius: 999px; background: var(--cos-accent-soft); color: var(--cos-accent); margin-left: 4px; flex: 0 0 auto; }

/* (11) responsiveness — fluid tile grids + no-overflow content wrappers */
.cos-mtiles { grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); }
.cos-mtile-lbl, .cos-mtile-sub { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.cos-mcard, .cos-mrich, .cos-home2-main, .cos-home2-side, .cos-mtile { min-width: 0; }
.cos-drivegrid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* ============================================================================
   DECLUTTER v3 — hierarchy, density, progressive disclosure, interaction polish.
   Dark-specific fills are scoped under .cos-dark; everything else uses tokens. */

/* (1) the hero input is the focal point: taller, 16px text, strong blue glow */
.cos-root .cos-omnibig { border: 1.5px solid var(--cos-accent-soft); border-radius: 16px; transition: border-color .15s ease, box-shadow .15s ease; }
.cos-root .cos-omnibig-row { gap: 12px; }   /* (uib30) NO row padding: it stacked on .cos-omnibig's own padding (~32px per side). The chat card still gets its row padding from its scoped rule (its container padding is 0). */
.cos-root .cos-omnibig input { font-size: 16px; }
.cos-root .cos-omnibig:focus-within { border-color: var(--cos-accent); }
.cos-root.cos-dark .cos-omnibig { box-shadow: 0 0 0 4px rgba(63,131,248,.10), 0 16px 40px rgba(0,0,0,.5); }
.cos-root.cos-dark .cos-omnibig:focus-within { box-shadow: 0 0 0 4px rgba(63,131,248,.2), 0 16px 40px rgba(0,0,0,.5); }
/* generous gap below the input cluster before the content sections (~64px) */
.cos-home-div { height: 1px; background: var(--cos-line-3); margin: 40px 0 24px; }
/* content cards below the hero are muted so the input stays dominant */
.cos-root.cos-dark .cos-mcard,
.cos-root.cos-dark .cos-frcard,
.cos-root.cos-dark .cos-setupcard { background: #121419; border-color: #1d2027; }  /* theme-ok: muted card tier, dark-scoped */

/* (2) Recent rows: clean colored glyph + label, no tinted badge square */
.cos-rec-list .cos-fr-ico { width: 18px; height: 18px; background: none !important; border-radius: 0; }
.cos-rec-list .cos-fr-ico svg { width: 16px; height: 16px; }

/* (3) progressive disclosure controls */
.cos-dchip-more { justify-content: center; gap: 4px; font-weight: 600; color: var(--cos-text-2); background: none !important; border-style: dashed !important; border-color: var(--cos-line-1) !important; }
.cos-dchip-more:hover { color: var(--cos-accent); border-color: var(--cos-accent) !important; }
.cos-fr-more { display: block; width: 100%; text-align: left; margin-top: 4px; padding: 7px 8px; font: inherit; font-size: 12px; font-weight: 600; color: var(--cos-accent); background: none; border: 0; border-radius: 8px; cursor: pointer; }
.cos-fr-more[hidden] { display: none; }   /* the display rules above outrank the UA [hidden] sheet, so make the See more toggle actually hide */
.cos-fr-more:hover { background: var(--cos-surface-2); }

/* (4) quieter sidebar — more air above each section label */
.cos-drawer-sectlabel { margin-top: 14px; }

/* (5) whitespace rhythm: roomier cards + section gaps */
.cos-mcard, .cos-mrich, .cos-frcard { padding: 20px; }
.cos-setupcard { padding: 16px; }
/* uniform gap between every home card (machines column, finish-setup, etc.) - matches the
   12px gap between cards inside .cos-md so all cards are evenly spaced */
.cos-home > .cos-frcard, .cos-home > .cos-mcard, .cos-home > .cos-md, .cos-home > .cos-setupcard,
.cos-home > .cos-cards, .cos-home > .cos-actioncards, .cos-home > .cos-addmachine { margin-top: 12px; }

/* (6) unified section headers: dot/label + muted meta + one action, right */
.cos-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.cos-card-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cos-online); flex: 0 0 auto; }
.cos-card-lbl, .cos-frcard .cos-fr-label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cos-ink-4); margin: 0; }
.cos-card-meta { font-size: 11px; color: var(--cos-muted); }
.cos-card-grow { flex: 1 1 auto; }
.cos-frcard .cos-fr-label { display: block; margin-bottom: 10px; }
.cos-frcard .cos-frcard-div + .cos-fr-label { margin-top: 0; }
/* MacBook title in the same uppercase-label style */
.cos-mrich-head { margin-bottom: 18px; }
.cos-mrich-name { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cos-ink-4); }

/* (7) finish-setup: slim collapsed row, expands to the full checklist */
.cos-setupcard.collapsed { padding: 0; }
.cos-setup-slim { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 16px; background: none; border: 0; text-align: left; cursor: pointer; border-radius: 12px; }
.cos-setup-slim .cos-card-lbl { flex: 0 0 auto; }
.cos-setup-bar.mini { flex: 1 1 auto; height: 5px; margin: 0; min-width: 60px; }
.cos-setup-slim .cos-setup-pct { font-size: 11.5px; font-weight: 700; color: var(--cos-ink-4); flex: 0 0 auto; }
.cos-setup-slim .cos-card-meta { flex: 0 0 auto; }
.cos-setup-caret { display: inline-flex; align-items: center; color: var(--cos-muted); flex: 0 0 auto; transition: transform .15s ease; }
.cos-setup-caret.open { transform: rotate(180deg); }
.cos-setup-lblbtn { display: inline-flex; align-items: center; gap: 6px; padding: 0; background: none; border: 0; cursor: pointer; }
.cos-root .cos-setup-x { width: auto; height: auto; font: inherit; font-size: 12px; font-weight: 600; color: var(--cos-muted); background: none; border: 0; padding: 4px 8px; border-radius: 8px; display: inline-flex; align-items: center; }
.cos-root .cos-setup-x:hover { color: var(--cos-text); background: var(--cos-surface-2); }

/* (8) consistent radii — 8 controls · 12 surfaces · 16 hero input.
   Suggestion chips are intentionally excluded: they stay fully-rounded pills (999px, set on line 1917). */
.cos-root .cos-chipbtn, .cos-root .cos-favchip,
.cos-root .cos-iconbtn, .cos-root .cos-omni, .cos-root .cos-msub { border-radius: 8px; }
/* inactive tabs keep an all-round radius for their hover pill; active tab is top-rounded (set above) */
.cos-root .cos-tab:not(.active) { border-radius: 8px; }
.cos-mcard, .cos-frcard, .cos-setupcard, .cos-mtile, .cos-fav-zone,
.cos-connpop, .cos-demo-pop, .cos-connectpop, .cos-acctmenu, .cos-dotsmenu,
.cos-cfgmenu, .cos-agentmenu, .cos-newmenu, .cos-palette { border-radius: 12px; }
.cos-root .cos-omnibig { border-radius: 16px; }
/* unified popover elevation in dark */
.cos-root.cos-dark { --cos-shadow-pop: 0 16px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.25); }

/* (9) hover / active interaction feedback */
.cos-root .cos-fr-item, .cos-root .cos-favchip, .cos-root .cos-dchip, .cos-root .cos-chipbtn,
.cos-root .cos-mtile, .cos-root .cos-iconbtn, .cos-root .cos-tab, .cos-root .cos-frstar,
.cos-root .cos-plusbtn, .cos-root [data-voice], .cos-root .cos-primarybtn,
.cos-root .cos-drawer-item, .cos-root .cos-msub, .cos-root .cos-sendbtn {
  transition: background .12s ease, color .12s ease, border-color .12s ease, transform .09s ease, box-shadow .15s ease, filter .12s ease;
}
.cos-root .cos-fr-item:active { transform: scale(.995); }
.cos-root .cos-chipbtn:active, .cos-root .cos-favchip:active, .cos-root .cos-dchip:active { transform: scale(.96); }
.cos-root .cos-mtile:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.4); }
.cos-root .cos-mtile:active { transform: translateY(0) scale(.99); }
.cos-root .cos-frstar:hover, .cos-root .cos-plusbtn:hover, .cos-root [data-voice]:hover, .cos-root .cos-sendbtn:hover { transform: scale(1.15); }
.cos-root .cos-frstar:active, .cos-root .cos-plusbtn:active, .cos-root [data-voice]:active, .cos-root .cos-sendbtn:active { transform: scale(.88); }
.cos-root .cos-iconbtn:active, .cos-root .cos-tab:active, .cos-root .cos-primarybtn:active,
.cos-root .cos-drawer-item:active, .cos-root .cos-msub:active, .cos-root .cos-setup-it:active { transform: scale(.96); filter: brightness(.92); }

/* ============================================================================
   EDGE-TO-EDGE TILES — tiles fill every available pixel: no outer padding, no
   gap between tiles, no radius/shadow. Side-by-side tiles touch and are split
   by a single 1px hairline divider only (browser-pane feel). */
.cos-root { --cos-radius-tile: 0px; }
.cos-tilearea,
.cos-tilearea.paged { gap: 0; padding: 0; }
.cos-tilearea.paged .cos-tilerow.paged { padding: 0; }
.cos-tilerow { gap: 0; }
.cos-tileline { gap: 0; }
.cos-rsz { display: none; }
.cos-tile { border: 0; border-top: 1px solid var(--cos-border); border-radius: 0; box-shadow: none; }   /* every tile keeps a top hairline over its address bar (separates it from the tab strip / row above) */
/* the only separator between side-by-side tiles: a 1px hairline */
.cos-tilerow > .cos-tile + .cos-tile,
.cos-tileline > .cos-tile + .cos-tile { border-left: 1px solid var(--cos-border); }

/* ============================================================================
   v5 — section header icons, adaptive grids, Add chips, drawer + buttons. */

/* (1/6) section header icon replaces the status dot */
.cos-card-ico { display: inline-flex; align-items: center; flex: 0 0 auto; }
.cos-card-ico svg { width: 16px; height: 16px; }

/* (3) adaptive grids: Recent becomes a grid; the toggle is a dashed grid cell */
.cos-rec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2px 10px; }   /* (b15l) wider cells - titles were ellipsizing at ~15 chars in 180px-min columns */
/* (b15m) titles WRAP to two lines instead of ellipsizing - the full text shows for all but extreme names */
.cos-rec-grid .cos-fr-item { align-items: flex-start; }
.cos-rec-grid .cos-fr-item .cos-fr-ico { margin-top: 1px; }
.cos-rec-grid .cos-fr-grow { align-items: flex-start; }
.cos-rec-grid .cos-fr-tt { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.cos-rec-grid .cos-fr-time { margin-top: 2px; }
.cos-rec-grid .cos-fr-item { min-width: 0; }
.cos-agrid-more { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 38px; font: inherit; font-size: 12px; font-weight: 600; color: var(--cos-text-2); background: none; border: 1px dashed var(--cos-line-1); border-radius: 8px; cursor: pointer; }
.cos-agrid-more:hover { color: var(--cos-accent); border-color: var(--cos-accent); }
.cos-agrid-more svg { transition: transform .15s ease; }
.cos-agrid-more.expanded svg { transform: rotate(180deg); }

/* (5) Add chips + bottom-right section add row */
.cos-section-addrow { display: flex; justify-content: flex-end; margin-top: 12px; }
.cos-addwrap { margin: 0; position: relative; }
.cos-addchip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--cos-text); background: var(--cos-surface-2); border: 1px solid var(--cos-border); border-radius: 8px; cursor: pointer; }
.cos-addchip svg { color: var(--cos-accent); }
.cos-addchip:hover { border-color: var(--cos-accent); color: var(--cos-text); }
.cos-root.cos-dark .cos-addchip { background: #1b1f27; border-color: #262a33; }  /* theme-ok: dark filled add chip */
/* home Cloud Drive add menu: right-aligned + wide enough for its labels */
.cos-drvwrap.cos-addwrap .cos-newmenu { left: auto; right: 0; min-width: 184px; }
/* (uib33) the drive card clips at its rounded corners (overflow:hidden), which also cut off the open
   Add menu. While a menu inside is open, let it escape and float the card above the next one. */
.cos-md-row:has(.cos-newwrap.open) { overflow: visible; position: relative; z-index: 30; }

/* (2) drawer machine "+" add buttons (Cloud Drive + Demo machine rows) */
.cos-drawer-item .cos-drvadd { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--cos-muted); cursor: pointer; }
.cos-drawer-item .cos-drvadd:hover { background: var(--cos-surface-2); color: var(--cos-accent); }

/* ============================================================================
   v6 — interaction micro-polish: autofocus caret, hover reveals, fade tabs,
   guide lines, focus rings, auto-hiding scrollbars. */

/* (1) accent caret in the agent input + toolbar search */
.cos-root .cos-omnibig input, .cos-root .cos-omni input { caret-color: #3f83f8; }

/* (2) inactive tab close × reveals on hover; active tab keeps it */
/* the close x takes NO layout space unless shown (active tab or hover): collapse width + cancel the
   flex gap so the label expands into the freed space instead of leaving a dead zone */
.cos-root .cos-tab:not(.active) .x { width: 0; margin-left: -8px; opacity: 0; overflow: hidden; transition: width .12s ease, margin-left .12s ease, opacity .12s ease; }
.cos-root .cos-tab:not(.active):hover .x,
.cos-root .cos-tab:not(.active):focus-within .x { width: 18px; margin-left: 0; opacity: 1; }

/* (3) tab title fades at the right edge instead of an ellipsis */
.cos-tab .lbl { text-overflow: clip; -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent); mask-image: linear-gradient(90deg, #000 78%, transparent); }

/* (4) sidebar row hover: background tint + left accent bar */
.cos-root .cos-drawer-item:hover, .cos-root .cos-drawer-sub:hover { box-shadow: inset 2px 0 0 rgba(63,131,248,.55); }

/* (5) expanded machine file tree: faint left guide line */
.cos-mtree { border-left: 1px solid var(--cos-line-2); margin-left: 5px; }
.cos-root.cos-dark .cos-mtree { border-left-color: #20242d; }  /* theme-ok: dark tree guide */

/* (6) Recent star: hidden until row hover; favorited stays visible (amber) */
.cos-rec-grid .cos-fr-item .cos-frstar { opacity: 0; transition: opacity .12s ease; }
.cos-rec-grid .cos-fr-item:hover .cos-frstar { opacity: 1; }
/* (b15j) give the TITLE the cell's width: the drag grip leaves the flow entirely and the hover
   actions (star / rename / delete) overlay the right edge instead of reserving layout space */
.cos-fr-drag { display: none; }
.cos-fr-item { position: relative; }
.cos-rec-grid .cos-fr-item .cos-frstar { position: absolute; top: 3px; right: 4px; background: var(--cos-surface); box-shadow: 0 0 0 3px var(--cos-surface); }
.cos-rec-grid .cos-fr-item:hover .cos-frstar { background: var(--cos-surface-2); box-shadow: 0 0 0 3px var(--cos-surface-2); }
.cos-rec-grid .cos-fr-item .cos-fract { position: absolute; top: 4px; background: var(--cos-surface-2); }
.cos-rec-grid .cos-fr-item .cos-fract:not(.danger) { right: 56px; }
.cos-rec-grid .cos-fr-item .cos-fract.danger { right: 31px; }
.cos-rec-grid .cos-fr-item .cos-frstar.on { opacity: 1; }

/* (7) Recent drag handle: fades in on hover, grab cursor */
/* (b15j) grip removed from the flow - the whole row is draggable and the title needs the width */
.cos-fr-item .cos-fr-drag { display: none; }

/* (8) chip hover border -> subtle accent */
.cos-root .cos-chipbtn:hover, .cos-root .cos-dchip:hover, .cos-root .cos-favchip:hover,
.cos-root .cos-addchip:hover, .cos-root .cos-suggest .cos-chipbtn:hover { border-color: rgba(63,131,248,.45); }

/* (9) global keyboard focus ring */
.cos-root *:focus-visible { outline: 2px solid rgba(63,131,248,.75); outline-offset: 1px; border-radius: 4px; }

/* (10) filled Material Symbols: pin weight + optical size for optical consistency */
.cos-root .material-symbols-outlined, .cos-root .material-symbols-rounded, .cos-root .material-symbols-sharp { font-variation-settings: 'FILL' 1, 'wght' 400, 'opsz' 24; }

/* (11) auto-hiding scrollbars (Firefox): transparent until hover (webkit handled above) */
.cos-root .cos-main, .cos-root .cos-drawer { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.cos-root .cos-main:hover, .cos-root .cos-drawer:hover { scrollbar-color: rgba(100,116,139,.45) transparent; }

/* v7 — kill the inner input's own focus ring: only the wrapper shows the blue
   border/glow (the global *:focus-visible was double-ringing the text field). */
.cos-root .cos-omnibig input:focus, .cos-root .cos-omnibig input:focus-visible,
.cos-root .cos-omni input:focus, .cos-root .cos-omni input:focus-visible {
  outline: none; box-shadow: none; border: none;
}

/* phone: the hero's generous desktop breathing room is dead space - keep the composer above the fold.
   Lives at the END of the file so it wins over the base .cos-hero-msg rule above (same specificity, later wins). */
@media (max-width: 760px) {
  .cos-hero-msg { margin-bottom: clamp(8px, calc(7vh - 20px), 44px); }   /* (uib42) collapses on short phones too */
}

/* AA contrast (QF_11): white text/icons on --cos-accent #3b82f6 is only 3.68:1 (below WCAG AA 4.5).
   Use the darker --cos-accent-hover #2563eb (~5.17:1) as the REST color for text/icon-bearing accent
   buttons; the bright #3b82f6 stays for large/graphic accents. Appended last so it outranks the base
   rules; hover uses a brightness lift so the two states stay distinct. */
.cos-root .cos-primarybtn, .cos-root .cos-ctabtn, .cos-root .cos-signup, .cos-root .cos-sendbtn { background: var(--cos-accent-hover); }
.cos-root .cos-primarybtn:hover, .cos-root .cos-ctabtn:hover, .cos-root .cos-signup:hover, .cos-root .cos-sendbtn:hover { background: var(--cos-accent-hover); filter: brightness(1.12); }

/* rank 115: ONE eyebrow style. Small section labels had drifted across surfaces (10-11px,
   .02-.08em, weight 600-800, mixed casing) - the same semantic element rendered five subtly
   different ways side by side. Appended last so it outranks each scattered definition; color
   stays per-site (the rank-52 contrast grouping owns that). */
.cos-drawer-sectlabel, .cos-cfgmenu-sec, .cos-mfolders-ttl, .cos-rail-label, .cos-agents-label,
.cos-cards-label, .cos-fr-label, .cos-frcard .cos-fr-label, .cos-projx-sec b, .cos-avmenu-sec,
.cos-card-lbl, .cos-mrich-name, .cos-sectlabel {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}

/* ---- UI batch 2 (2026-07-09) ---- */
/* (9) drawer: flat square hover/selection - no rounded pill effect on rows or drawer icon buttons */
.cos-root .cos-drawer-item, .cos-root .cos-drawer-sub { border-radius: 0; }
.cos-root .cos-drawer .cos-iconbtn { border-radius: 0; }
/* (10) gated demo controls: no clickable affordance for guests (click still opens sign-up) */
.cos-root [data-fact="needauth"] { cursor: default; }
.cos-root .cos-msub[data-fact="needauth"]:hover { background: var(--cos-surface-2); border-color: var(--cos-border); }
.cos-root .cos-mdbtn[data-fact="needauth"]:hover { border-color: var(--cos-border-strong); color: var(--cos-text-2); }
.cos-root .cos-mdbtn.remote[data-fact="needauth"]:hover { color: var(--cos-purple); border-color: color-mix(in srgb, var(--cos-purple) 45%, var(--cos-border)); }
.cos-root .cos-drawer-sub[data-fact="needauth"]:hover, .cos-root.cos-dark .cos-drawer-sub[data-fact="needauth"]:hover { background: none; box-shadow: none; }
.cos-root .cos-drvadd[data-fact="needauth"]:hover { background: transparent; color: var(--cos-muted); }
/* (14/b5) chat hero mirrors the HOME hero: avatar left + speech-bubble card right, on the chat's
   readable column. Higher-specificity margins so the home hero's clamp() bottom margin loses here. */
/* (b15e) avatar-only chat hero: the exact home avatar component, centered above the log */
.cos-chatwrap .cos-chat-hero { flex: 0 0 auto; width: min(860px, calc(100% - 32px)); margin: 14px auto 4px; justify-content: center; }
.cos-chat-hero .cos-avatar-3d, .cos-chat-hero .cos-avatar-svg { cursor: pointer; }
/* no per-message avatar in the chat log - actions align with the bubble edge */
.cos-chatlog .cos-msg-bot .cos-msgacts { margin-left: 2px; }
/* (15) chat composer = home composer (big rounded box, borderless textarea, round send),
   centered on the same readable column as the conversation */
/* (b15f) chat composer: ONLY the column width/centering differ from home - padding, fonts and
   footer spacing come from the base .cos-omnibig rules so both look identical */
.cos-root .cos-chat-omni { flex: 0 0 auto; width: min(860px, calc(100% - 32px)); margin: 6px auto 14px; }
/* (16) plus menu: anchors under the + on home, ABOVE it in chat (composer sits at the viewport bottom) */
.cos-plussel .cos-cfgmenu { left: 0; }
/* the chat composer sits at the page bottom - ALL its dropdowns open upward */
.cos-chat-omni .cos-plussel .cos-cfgmenu,
.cos-chat-omni .cos-cfgsel .cos-cfgmenu { top: auto; bottom: calc(100% + 8px); }
/* (b10) per-harness setup panel: ONLY the selected harness shows its fix, IN-FLOW inside the
   AGENT column right under its row (no floating popup) - an accent card that reads as an
   extension of the selected row. Sibling of the row button (buttons can't nest inputs/buttons). */
.cos-amrow { display: block; }
.cos-amrow .cos-amitem { width: 100%; }
.cos-amside { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 3px 6px 7px 8px; background: color-mix(in srgb, var(--cos-accent) 10%, var(--cos-surface)); border: 1.5px solid var(--cos-accent); border-radius: 10px; padding: 8px 9px; }
/* .cos-root prefix outranks the `.cos-root button/input` resets (0,1,1) - see the note near .cos-chipbtn */
.cos-root .cos-aminput { flex: 1 1 90px; min-width: 0; height: 30px; border: 1px solid var(--cos-border-strong); border-radius: 8px; padding: 0 9px; font: inherit; font-size: 12.5px; background: var(--cos-surface); color: var(--cos-text); outline: none; }
.cos-root .cos-aminput:focus { border-color: var(--cos-accent); box-shadow: 0 0 0 2px var(--cos-accent-soft); }
/* (uib22d/g/i/uib40) inline model-picker key panel: a stack of provider radios (each with a Get-key
   link); the key+Save textbox row sits INSIDE the stack, right under the chosen radio */
.cos-amside-key { flex-direction: column; align-items: stretch; gap: 8px; }
.cos-amradios { display: flex; flex-direction: column; gap: 6px; width: 100%; }   /* (uib40) explicit 100%: the nested key input's intrinsic width must not balloon the stack past the panel */
.cos-amradio-row { display: flex; align-items: center; gap: 8px; }
.cos-amradio { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--cos-text); cursor: pointer; }
.cos-root .cos-amradio input[type="radio"] { width: 14px; height: 14px; margin: 0; flex: 0 0 auto; accent-color: var(--cos-accent); cursor: pointer; }
.cos-amradio:has(input:checked) { font-weight: 600; }
/* (uib39) the 'All models · one key' pitch: its own line, small + muted, NEVER bold (even when checked) */
.cos-amradio .cos-amradio-sub { display: block; font-style: normal; font-weight: 400; font-size: 11px; line-height: 1.3; color: var(--cos-muted); }
.cos-amradio input[type="radio"] { align-self: flex-start; margin-top: 2px; }   /* radio hugs the FIRST text line when the label is two lines */
.cos-root .cos-amradio-link { flex: 0 0 auto; font-size: 11.5px; color: var(--cos-accent); text-decoration: none; white-space: nowrap; }
.cos-root .cos-amradio-link:hover { text-decoration: underline; }
.cos-amkeyrow { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; box-sizing: border-box; }
/* (uib40) nested under the chosen radio: indent past the 14px radio + 5px gap so it aligns with the label
   text; wrap + an input floor so the optional "Using claude login" chip drops to its own line when tight */
.cos-amradios .cos-amkeyrow { padding-left: 19px; flex-wrap: wrap; }
.cos-amradios .cos-amkeyrow .cos-aminput { min-width: 110px; }
.cos-root .cos-amside-key .cos-aminput { flex: 1 1 0; min-width: 0; }        /* key input shrinks so Save always fits the narrow column */
.cos-root .cos-amside-key .cos-amsave { flex: 0 0 auto; }
.cos-root .cos-amsave { height: 30px; padding: 0 12px; border-radius: 8px; background: var(--cos-accent); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.cos-root .cos-amsave:hover { background: var(--cos-accent-hover); }
.cos-root .cos-amside .cos-chipbtn { height: 30px; font-size: 12px; padding: 0 11px; white-space: nowrap; border: 1px solid var(--cos-border-strong); border-radius: 8px; color: var(--cos-text); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; background: var(--cos-surface); }
.cos-root .cos-amside .cos-chipbtn:hover { border-color: var(--cos-accent); color: var(--cos-accent); }
/* connect-machine variant: the two chips sit side by side, sharing the card's width */
.cos-amside-row { flex-wrap: nowrap; }
.cos-root .cos-amside-row .cos-chipbtn { flex: 1 1 0; justify-content: center; min-width: 0; padding: 0 7px; }

/* (uib37a/38) narrow tiles: the composer config row stays ONE line WITHOUT dropping any info -
   harness · model · effort · mode and the machine label all stay visible (user: there's room).
   nowrap + shrinkable pills; the agent pill ellipsizes only when space truly runs out. */
@container (max-width: 640px) {
  .cos-omnibig-foot { flex-wrap: nowrap; gap: 5px; }
  .cos-omnibig-foot .grow { flex: 1 1 0; min-width: 4px; }
  .cos-omnibig-foot .cos-cfgsel { min-width: 0; }
  .cos-omnibig-foot .cos-cfgpill { min-width: 0; overflow: hidden; }
  .cos-omnibig-foot .cos-cfgpill > span:not(.chev) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* (uib37b) real photo backdrops behind the avatar (Zoom/Meet style) - actual photographs served
   same-origin from /dashob/bg/. cover-crop keeps them clean in both the big avatar and the tiny
   picker swatches. */
.cos-bg-ph-office { background: url('/dashob/bg/office.jpg') center/cover no-repeat; }
.cos-bg-ph-glass { background: url('/dashob/bg/glass.jpg') center/cover no-repeat; }
.cos-bg-ph-home { background: url('/dashob/bg/home.jpg') center/cover no-repeat; }
.cos-bg-ph-sofa { background: url('/dashob/bg/sofa.jpg') center/cover no-repeat; }
.cos-bg-ph-lounge { background: url('/dashob/bg/lounge.jpg') center/cover no-repeat; }
.cos-bg-ph-meeting { background: url('/dashob/bg/meeting.jpg') center/cover no-repeat; }
.cos-bg-ph-decor { background: url('/dashob/bg/decor.jpg') center/cover no-repeat; }
.cos-bg-ph-cozy { background: url('/dashob/bg/cozy.jpg') center/cover no-repeat; }
.cos-bg-ph-minimal { background: url('/dashob/bg/minimal.jpg') center/cover no-repeat; }
.cos-bg-ph-beach { background: url('/dashob/bg/beach.jpg') center/cover no-repeat; }
.cos-bg-ph-mountains { background: url('/dashob/bg/mountains.jpg') center/cover no-repeat; }
.cos-bg-ph-lake { background: url('/dashob/bg/lake.jpg') center/cover no-repeat; }

/* (uib40) menu origin: while a config dropdown is open, its trigger pill lights up and a small caret
   bridges the pill to its panel - so it's obvious whether the panel came from the harness pill
   (AGENT|MODEL|EFFORT|MODE), the machine pill (RUN ON|FOLDER) or the interface pill (Chat/Terminal).
   The caret lives on the wrapper, not the menu - the menu's overflow would clip a ::before. */
.cos-root .cos-omnibig-foot .cos-cfgsel > button[aria-expanded="true"] { background: var(--cos-accent-softer); color: var(--cos-accent-hover); border-radius: 7px; }   /* aria-expanded lives ON the trigger, so the style engine reliably repaints it - a :has(menu:not([hidden])) > button rule hits Chromium's :has invalidation quirk when the attr flips without a re-render */
.cos-omnibig-foot .cos-cfgsel:has(> .cos-cfgmenu:not([hidden]))::after {
  content: ''; position: absolute; top: calc(100% + 4.5px); left: 14px; width: 9px; height: 9px;
  background: #fff; border-left: 1px solid var(--cos-border); border-top: 1px solid var(--cos-border);
  transform: rotate(45deg); z-index: 61; pointer-events: none;
}
.cos-root.cos-dark .cos-omnibig-foot .cos-cfgsel:has(> .cos-cfgmenu:not([hidden]))::after { background: var(--cos-surface); }
/* the chat composer flips its menus upward - the caret flips with them and points down at the pill */
.cos-chat-omni .cos-cfgsel:has(> .cos-cfgmenu:not([hidden]))::after { top: auto; bottom: calc(100% + 4.5px); transform: rotate(225deg); }
@media (max-width: 640px), (pointer: coarse) {
  .cos-omnibig-foot .cos-cfgsel:has(> .cos-cfgmenu:not([hidden]))::after { display: none; }   /* cols menus become a detached bottom sheet there */
}

/* (uib41) MODE items: name + a small description line; the glyph hugs the first line */
.cos-cfgmenu-item.cos-modeit { align-items: flex-start; white-space: normal; }
.cos-cfgmenu-item.cos-modeit > svg { margin-top: 2px; }
.cos-modeit-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cos-modeit-tx i { font-style: normal; font-weight: 400; font-size: 11px; color: var(--cos-muted); white-space: normal; }

/* (uib43) the pill chevron: the svg was baseline-aligned inside an inline span (sat 1.7px high) and
   wider than its span (overflowed 3px past the pill's right padding, eating the side gap). The span
   now sizes to the svg and centers it, so the pill's real 9px side padding shows. */
.cos-pill .chev { display: inline-flex; align-items: center; flex: 0 0 auto; }
.cos-pill .chev svg { display: block; }

/* ===== Company Mode (CMP5/6): mission control + home roster + create modal ===== */
.cmp-root { display: flex; flex-direction: column; gap: 10px; }
.cmp-hd { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cmp-hdl { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cmp-hd h2 { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: var(--cos-ink-1); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-ctl { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.cmp-pill { font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--cos-line-1); color: var(--cos-ink-4); flex: none; }
.cmp-pill.executing { color: #16a34a; border-color: #22c55e66; background: #22c55e14; }
.cmp-pill.founding { color: var(--cos-indigo); border-color: #6366f166; background: #6366f114; }
.cmp-pill.paused { color: #b45309; border-color: #f59e0b66; background: #f59e0b14; }
.cmp-pill.done { color: var(--cos-accent); border-color: #3b82f666; background: #3b82f614; }
.cmp-pill.stopped, .cmp-pill.failed { color: #dc2626; border-color: #ef444466; background: #ef444414; }
.cmp-goal { font-size: 13px; color: var(--cos-ink-4); max-width: 78ch; }
.cmp-prog { display: flex; align-items: center; gap: 12px; }
.cmp-bar, .cmp-cbar { flex: 1; height: 6px; border-radius: 999px; background: var(--cos-line-2); overflow: hidden; }
.cmp-bar > span, .cmp-cbar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cos-accent), var(--cos-indigo)); transition: width 0.6s ease; }
.cmp-prognum { font-size: 12px; color: var(--cos-ink-4); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmp-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
.cmp-agent { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border: 1px solid var(--cos-line-2); border-radius: 12px; background: var(--cos-surface-2); min-width: 0; }
.cmp-agent.on { border-color: #6366f155; box-shadow: 0 0 0 1px #6366f122; }
.cmp-av { width: 34px; height: 34px; border-radius: 10px; background: var(--cos-line-2); color: var(--cos-ink-4); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12.5px; flex: none; }
.cmp-av.on { background: linear-gradient(135deg, var(--cos-accent), var(--cos-indigo)); color: #fff; animation: cmpPulse 2s ease-in-out infinite; }
@keyframes cmpPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.45); } 50% { box-shadow: 0 0 0 7px rgba(99, 102, 241, 0); } }
@media (prefers-reduced-motion: reduce) { .cmp-av.on { animation: none; } }
.cmp-ainfo { min-width: 0; flex: 1; }
.cmp-aname { font-size: 13px; font-weight: 700; color: var(--cos-ink-1); display: flex; align-items: baseline; gap: 8px; }
.cmp-ael { font-size: 10.5px; font-weight: 500; color: var(--cos-ink-4); font-variant-numeric: tabular-nums; }
.cmp-atask { font-size: 11.5px; color: var(--cos-ink-2); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-aact { font-size: 11px; color: var(--cos-ink-4); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-asubs { display: flex; gap: 4px; margin-top: 5px; flex-wrap: wrap; }
.cmp-subchip { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; color: var(--cos-indigo); border: 1px solid #6366f144; background: #6366f10f; border-radius: 999px; padding: 1px 7px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 860px) { .cmp-grid { grid-template-columns: 1fr; } }
.cmp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; align-items: start; }
.cmp-col h4 { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cos-ink-4); margin: 0 0 7px; display: flex; justify-content: space-between; }
.cmp-tcard { background: var(--cos-surface-2); border: 1px solid var(--cos-line-2); border-left: 3px solid var(--cos-accent); border-radius: 9px; padding: 7px 9px; margin-bottom: 7px; }
.cmp-tcard.done { border-left-color: var(--cos-online); opacity: 0.72; }
.cmp-tcard.in_progress { border-left-color: #f59e0b; }
.cmp-tcard.review { border-left-color: var(--cos-indigo); }
.cmp-ttt { font-size: 12px; font-weight: 600; color: var(--cos-ink-1); line-height: 1.35; }
.cmp-ttm { display: flex; align-items: center; gap: 6px; margin-top: 3px; flex-wrap: wrap; }
.cmp-role { font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cos-ink-4); border: 1px solid var(--cos-line-2); border-radius: 999px; padding: 0 6px; }
.cmp-tag.on { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: #16a34a; }
.cmp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cos-online); animation: cmpPulse 2s ease-in-out infinite; }
.cmp-colempty { font-size: 11px; color: var(--cos-ink-4); }
.cmp-tl { display: flex; flex-direction: column; }
.cmp-tlrow { padding: 6px 0 6px 14px; border-left: 2px solid var(--cos-line-2); position: relative; font-size: 12px; }
.cmp-tlrow::before { content: ""; position: absolute; left: -4px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--cos-accent); }
.cmp-tlttl { font-weight: 600; color: var(--cos-ink-1); margin-right: 6px; }
.cmp-tltx { color: var(--cos-ink-4); }
.cmp-addrow { display: flex; gap: 7px; margin-top: 9px; }
.cmp-addrow input { flex: 1; min-width: 0; height: 30px; border: 1px solid var(--cos-line-1); border-radius: 8px; background: var(--cos-surface); color: var(--cos-ink-1); font: inherit; font-size: 12.5px; padding: 0 10px; }
.cmp-files { display: flex; gap: 6px; flex-wrap: wrap; }
.cmp-fchip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--cos-ink-2); border: 1px solid var(--cos-line-2); background: var(--cos-surface-2); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.cmp-fchip:hover { border-color: var(--cos-accent); color: var(--cos-ink-1); }
/* home roster */
.cmp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.cmp-card { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 13px 14px; border: 1px solid var(--cos-line-2); border-radius: 12px; background: var(--cos-surface-2); cursor: pointer; font: inherit; min-width: 0; }
.cmp-card:hover { border-color: var(--cos-accent); }
.cmp-crow { display: flex; align-items: center; gap: 8px; }
.cmp-cttl { font-size: 13.5px; font-weight: 700; color: var(--cos-ink-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.cmp-cgoal { font-size: 11.5px; color: var(--cos-ink-4); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cmp-cnum { font-size: 11px; color: var(--cos-ink-4); font-variant-numeric: tabular-nums; }
.cmp-empty { font-size: 13px; color: var(--cos-ink-4); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px dashed var(--cos-line-1); border-radius: 12px; padding: 14px 16px; }
/* create modal */
.cmp-modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(480px, calc(100vw - 32px)); background: var(--cos-surface); border: 1px solid var(--cos-line-1); border-radius: 16px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28); padding: 18px; z-index: 320; display: flex; flex-direction: column; gap: 10px; }
.cmp-modal .x { position: absolute; top: 10px; right: 10px; }
.cmp-mttl { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: var(--cos-ink-1); }
.cmp-msub { font-size: 12.5px; color: var(--cos-ink-4); }
.cmp-mgoal, .cmp-mname { width: 100%; border: 1px solid var(--cos-line-1); border-radius: 10px; background: var(--cos-surface-2); color: var(--cos-ink-1); font: inherit; font-size: 13px; padding: 9px 11px; resize: vertical; }
.cmp-mrow { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--cos-ink-4); flex-wrap: wrap; }
.cmp-mrow label { font-weight: 600; }
.cmp-mrow select { border: 1px solid var(--cos-line-1); border-radius: 8px; background: var(--cos-surface-2); color: var(--cos-ink-1); font: inherit; font-size: 12.5px; padding: 5px 8px; max-width: 220px; }
.cmp-mstart { align-self: flex-end; }
.cos-chipbtn.primary { background: var(--cos-accent); border-color: var(--cos-accent); color: #fff; font-weight: 600; }
.cos-chipbtn.primary:hover { background: var(--cos-accent-hover); color: #fff; }
.cos-chipbtn.danger { color: #dc2626; }
.cos-chipbtn.danger:hover { border-color: rgba(239, 68, 68, 0.5); color: #dc2626; }

/* ---------- (uib39) Files graph view: Obsidian-style drive map ---------- */
.cos-fseg { display: inline-flex; align-items: center; border: 1px solid var(--cos-border); border-radius: 9px; overflow: hidden; background: var(--cos-surface); }
.cos-fsegbtn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 26px; border: 0; background: transparent; color: var(--cos-ink-3); cursor: pointer; padding: 0; }
.cos-fsegbtn + .cos-fsegbtn { border-left: 1px solid var(--cos-border); }
.cos-fsegbtn:hover { color: var(--cos-ink-1); background: var(--cos-surface-2); }
.cos-fsegbtn.on { color: var(--cos-accent); background: var(--cos-accent-soft); }
.cos-root.cos-dark .cos-fsegbtn.on { background: color-mix(in srgb, var(--cos-accent) 22%, transparent); }
.cos-graphwrap { position: relative; height: clamp(380px, 62vh, 760px); border: 1px solid var(--cos-border); border-radius: 12px; margin: 10px 12px 14px; background: var(--cos-surface-2); overflow: hidden; }
.cos-graphcv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.cos-graphhint { position: absolute; top: 12px; left: 14px; font-size: 11px; color: var(--cos-ink-4); pointer-events: none; }
.cos-graphfit { position: absolute; top: 8px; right: 10px; }
.cos-graphlegend { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--cos-border); background: color-mix(in srgb, var(--cos-surface) 84%, transparent); font-size: 11px; color: var(--cos-ink-3); pointer-events: none; }
.cos-graphlegend span { display: inline-flex; align-items: center; gap: 5px; }
.cos-graphlegend i { width: 8px; height: 8px; border-radius: 50%; }
.cos-graphlegend .lg-fold { background: var(--cos-accent); }
.cos-graphlegend .lg-md { background: #6366f1; }   /* theme-ok: matches the fixed .ft-md icon palette */
.cos-graphlegend .lg-csv { background: #15803d; }   /* theme-ok: matches .ft-csv */
.cos-graphlegend .lg-html { background: #ea580c; }   /* theme-ok: matches .ft-html */
.cos-graphlegend .lg-ref { width: 14px; height: 0; border-radius: 0; border-top: 2px solid var(--cos-accent); background: transparent; }
.cmp-cctl { display: inline-flex; gap: 4px; align-items: center; }
.cmp-cctl .cos-chipbtn { height: 22px; padding: 0 7px; font-size: 11px; }
/* (V8A) file names inside a chat reply are live links - click opens the file in the view the chat sits beside */
.cos-root .cos-filelink { color: var(--cos-accent); font-weight: 600; text-decoration: none; border-bottom: 1px dashed var(--cos-accent); cursor: pointer; }
.cos-root .cos-filelink:hover { border-bottom-style: solid; background: var(--cos-accent-soft); border-radius: 3px; }
/* (V8A) the talking-reply comet: a floating glow that rides the RENDERED bubble text - the reply's
   markup never re-formats while the avatar speaks */
.cos-root .cos-komet { position: absolute; pointer-events: none; border-radius: 7px; opacity: 0;
  background: radial-gradient(closest-side, rgba(37, 99, 235, .30), rgba(37, 99, 235, 0));
  box-shadow: 0 0 12px 3px rgba(37, 99, 235, .20);
  transition: left .06s linear, top .09s ease, width .06s linear, opacity .2s ease; }
/* (UIB48) tile view-options dropdown + the full-screen dialog */
.cos-root .cos-vmenuwrap { position: relative; display: inline-flex; }
.cos-root .cos-vmenu { top: calc(100% + 6px); right: 0; min-width: 208px; }
.cos-root .cos-fsdlg { position: fixed; inset: 0; z-index: 400; background: var(--cos-surface); display: flex; flex-direction: column; }
.cos-root .cos-fsdlg-head { display: flex; align-items: center; gap: 9px; padding: 9px 14px; border-bottom: 1px solid var(--cos-border); background: var(--cos-surface-2); flex: 0 0 auto; }
.cos-root .cos-fsdlg-ttl { font-size: 13.5px; font-weight: 600; color: var(--cos-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cos-root .cos-fsdlg-head .grow { flex: 1; }
.cos-root .cos-fsdlg-body { flex: 1; position: relative; min-height: 0; }
.cos-root .cos-fstile { position: absolute; inset: 0; display: flex; flex-direction: column; border: 0; border-radius: 0; box-shadow: none; }
.cos-root .cos-fstile .cos-main { flex: 1; min-height: 0; }
/* (UIB49 owner spec) ONE ViewHeader, six surfaces - 52px bar, four clusters, ghost buttons */
.cos-root .cos-vh { display: flex; align-items: center; height: 52px; flex: 0 0 52px; gap: 4px; padding: 0 10px 0 14px; background: var(--cos-surface); border-bottom: 1px solid var(--cos-line-2); container: tilevh / inline-size; }
.cos-root .cos-vh .grow { flex: 1; }
/* (V11A) a narrow tile sheds head chrome in order - status text, then chip labels, then segment
   labels - so the header NEVER runs its clusters into each other (dashboard tiles are narrow) */
@container tilevh (max-width: 620px) { .cos-root .cos-vh-ident .st, .cos-root .cos-vh-st { display: none; } }
/* scoped to the BUTTONS, never to dropdown rows: the kebab menus live inside .cos-vh and a plain
   descendant rule blanked their text where there was no width pressure at all */
@container tilevh (max-width: 520px) { .cos-root .cos-vh .cos-chipbtn > .cos-vh-lbl { display: none; } .cos-root .cos-vh .cos-chipbtn { padding: 0 7px; gap: 0; } }
@container tilevh (max-width: 400px) { .cos-root .cos-vh .cos-vsegbtn > .cos-vseglbl { display: none; } .cos-root .cos-vh-div { margin: 0 2px; } }
/* no rule hides the actions cluster outright: data-edreload (resolve a disk conflict) and the guest
   Save-to-account chip live ONLY there, so hiding it would make those unreachable rather than move
   them. With labels shed they are icon-width and still fit. */
.cos-root .cos-vh-ident { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cos-root .cos-vh-ident .nm, .cos-root .cos-vh-nm { font-size: 13.5px; font-weight: 600; color: var(--cos-ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cos-root .cos-vh-ident .st, .cos-root .cos-vh-st { font-size: 12.5px; color: var(--cos-ink-4); white-space: nowrap; }
.cos-root .cos-vh-ident .fico, .cos-root .cos-vh-ftile { width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.cos-root .cos-vh-ftile.dark { background: rgba(255,255,255,.12); color: #AAB2BD; }
.cos-root .cos-vh-views, .cos-root .cos-vh-actions, .cos-root .cos-vh-sys { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.cos-root .cos-vh-div { width: 1px; height: 20px; background: var(--cos-line-2); margin: 0 5px; flex: 0 0 auto; }
/* every control in the bar is a borderless ghost with one hover fill */
.cos-root .cos-vh .cos-chipbtn { height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; font-size: 13px; font-weight: 500; color: var(--cos-ink-2); display: inline-flex; align-items: center; gap: 6px; }
.cos-root .cos-vh .cos-chipbtn:hover { background: var(--cos-surface-2); border: 0; }
.cos-root .cos-vh .cos-chipbtn.danger { color: var(--cos-red, #dc2626); }
.cos-root .cos-vh .cos-iconbtn { width: 32px; height: 32px; border-radius: 8px; }
.cos-root .cos-vh .cos-iconbtn:hover { background: var(--cos-surface-2); }
/* dark surfaces (Terminal, Remote): identical skeleton on dark tokens */
.cos-root .cos-vh.dark { background: #171A20; border-bottom-color: rgba(255,255,255,.13); }
.cos-root .cos-vh.dark .cos-vh-nm, .cos-root .cos-vh.dark .nm { color: #E8EAEE; }
.cos-root .cos-vh.dark .cos-vh-st, .cos-root .cos-vh.dark .st { color: #9AA3AD; }
.cos-root .cos-vh.dark .cos-vh-div { background: rgba(255,255,255,.13); }
.cos-root .cos-vh.dark .cos-chipbtn, .cos-root .cos-vh.dark .cos-iconbtn { color: #AAB2BD; }
.cos-root .cos-vh.dark .cos-chipbtn:hover, .cos-root .cos-vh.dark .cos-iconbtn:hover { background: rgba(255,255,255,.07); }
.cos-root .cos-vh.dark .cos-chipbtn.danger { color: #F2827B; }
.cos-root .cos-vh.dark .cos-chipbtn.danger:hover { background: rgba(242,130,123,.12); }
.cos-root .cos-vh.dark .cos-dotsmenu { background: #1d212a; border-color: rgba(255,255,255,.13); }
.cos-root .cos-vh.dark .cos-dotsmenu .cos-acctmenu-item { color: #E8EAEE; }
.cos-root .cos-vh.dark .online { background: #22C55E; }
.cos-root .cos-termoff { display: grid; place-items: center; }
/* (UIB49) breadcrumb rides the ViewHeader identity slot; current segment 600, parents muted */
.cos-root .cos-vh-ident .cos-crumb { font-size: 13px; font-weight: 500; color: var(--cos-ink-3); }
.cos-root .cos-vh-ident .cos-crumb:last-of-type { font-weight: 600; color: var(--cos-ink-1); }
/* (UIB49) the md format toolbar keeps its own second row, restyled on the shared tokens */
.cos-root .cos-wysiwyg .wysiwyg-toolbar { min-height: 42px; padding: 4px 10px; gap: 2px; background: var(--cos-surface); border-bottom: 1px solid var(--cos-line-2); }
.cos-root .cos-wysiwyg .wysiwyg-toolbar button { width: 28px; height: 28px; border: 0; border-radius: 7px; background: transparent; color: var(--cos-ink-3); }
.cos-root .cos-wysiwyg .wysiwyg-toolbar button:hover { background: var(--cos-surface-2); }
.cos-root .cos-wysiwyg .wysiwyg-toolbar button.active, .cos-root .cos-wysiwyg .wysiwyg-toolbar button.is-active { color: var(--cos-accent); background: var(--cos-accent-softer); }
.cos-root .cos-wysiwyg .wysiwyg-toolbar .tb-divider { width: 1px; height: 20px; background: var(--cos-line-2); margin: 0 5px; }
/* (UIB49) the status dot keeps its shape inside the shared header */
.cos-root .cos-vh .online { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22C55E; flex: 0 0 auto; }

/* (V10A) + New Machine - single launch button under the home machine cards */
.cos-newmach { margin-top: 12px; }
.cos-newmachbtn { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 42px; border: 1.5px dashed var(--cos-line-1); border-radius: 12px; color: var(--cos-text-2); font-weight: 600; font-size: 13.5px; background: var(--cos-surface); }
.cos-newmachbtn:hover { border-color: var(--cos-accent); color: var(--cos-accent); background: var(--cos-accent-softer); }

/* ---------- (UIB46) composer: where-it-runs first, harness second ---------- */
/* The run-on pill is now the FIRST control in the composer footer, so it inherits the optical
   left-align with the + button above. Its icon is a 15px glyph (the harness logo was 18px), so it
   needs 1.5px less pull to land its ink on the + ink. */
.cos-omnibig-foot > .cos-mfsel:first-child { margin-left: -10.5px; }
/* RUN ON now carries groups (cloud / your computers / cloud machines / add a machine) and can outgrow
   the popover - both machine-picker columns scroll on their own, the way the AGENT column already does. */
.cos-cfgmenu-cols .cos-mfcols > .cos-cfgcol { max-height: 326px; overflow-y: auto; }
/* the hosted-cloud row: label takes the slack so the "DASHOB ONLY" tag stays pinned right */
.cos-cfgmenu-item.cos-rocloud > span:first-of-type { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cos-cfgmenu-item.cos-rocloud.locked { color: var(--cos-muted); cursor: default; }
.cos-cfgmenu-item.cos-rocloud.locked svg { opacity: .55; }
.cos-robadge { flex: 0 0 auto; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cos-ink-3); background: var(--cos-surface-2); border: 1px solid var(--cos-line-3); border-radius: 5px; padding: 1px 5px; }
/* why the cloud row is locked, plus the one click that unlocks it - a locked row must never dead-end */
.cos-rohint { padding: 3px 10px 8px; font-size: 11.5px; line-height: 1.4; color: var(--cos-ink-3); }
.cos-rohint .cos-chipbtn { margin-top: 6px; height: 24px; font-size: 11.5px; }
/* where-it-runs badge on every harness row in the AGENT column */
.cos-ambadge.scope { gap: 4px; color: var(--cos-ink-3); font-weight: 600; }
.cos-ambadge.scope svg { opacity: .65; }
.cos-ambadge.scope.warn { color: var(--cos-accent); }
.cos-ambadge.scope.warn svg { opacity: 1; }
/* a machine-only harness with nowhere to run: the pill IS the blocker, so it wears the ask */
.cos-mfsel.need > .cos-cfgpill { color: var(--cos-accent-hover); background: var(--cos-accent-softer); box-shadow: inset 0 0 0 1px var(--cos-accent-soft); }
.cos-mfsel.need > .cos-cfgpill:hover { background: var(--cos-accent-soft); }
/* the harness row now carries name + short desc + scope badge - truncate the text, never the badge */
.cos-amitem-tx b, .cos-amitem-tx i { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cos-cfgmenu-cols .cos-cfgcol.ac-agent { flex: 2 1 0; }
/* "Add a machine" pins to the bottom of the RUN ON column - the machine list can scroll past the
   popover's height, and connecting one must never be the thing that scrolls out of reach. */
.cos-roadd { position: sticky; bottom: 0; background: var(--cos-surface); border-top: 1px solid var(--cos-line-3); margin-top: 4px; }
.cos-roadd .cos-cfgmenu-sec { padding-top: 7px; }
/* the run-on popover is the only 2-column one, and its left column is now a grouped list - give it
   more room than the 3/4-column agent picker so a handful of machines fits without scrolling. */
.cos-cfgmenu.cos-cfgmenu-cols.cos-cfgmenu-cols2 { max-height: 400px; }
.cos-cfgmenu-cols .cos-mfcols > .cos-cfgcol { max-height: 386px; }
.cos-roadd { padding-top: 3px; }
/* reason on its own line, the switch action under it - not inline with the last wrapped word */
.cos-rohint { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cos-rohint .cos-chipbtn { margin-top: 0; }
/* the switch chip may wrap in a narrow column - let it grow instead of clipping its second line */
.cos-rohint .cos-chipbtn { height: auto; min-height: 24px; padding: 3px 9px; text-align: left; align-items: flex-start; }
.cos-rohint .cos-chipbtn svg { flex: 0 0 auto; margin-top: 2px; }
@media (max-width: 640px), (pointer: coarse) {
  /* narrow columns: the row label matters more than the tag - the reason line right under it and the
     dimmed row already say "locked", so the tag steps aside instead of squeezing the machine name. */
  .cos-robadge { display: none; }
}