/* Codebench — app styles on top of the kit design system (core.css).
   Tokens only; the brand mark is moss. Prefixes: cx- (Codex workspace),
   cb- (remote file manager), xfer- (transfer queue), term- (terminal). */

:root { --mark-bg: var(--moss); }

/* workspace */
.file-item b { font-family: var(--font-mono); font-size: 13px; font-weight: 500; }

/* editor */
.file-editor { flex: 1; min-width: 0; display: grid; gap: 10px; max-width: 980px; }
.code-ta { min-height: 56vh; font-size: 13.5px; line-height: 1.7; background: var(--code-bg); border-color: var(--line); }

/* AI pins */
.pin-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 16px; border-bottom: 1px solid var(--line); min-height: 46px; }
.pin-chip { display: inline-flex; align-items: center; gap: 4px; }
.pin-chip button { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 5px; color: var(--ink-3); }
.pin-chip button:hover { color: var(--ink); background: var(--surface-2); }
.pin-chip .icon { width: 11px; height: 11px; }

/* tasks */
.task-card .note-meta code { background: none; }
.task-log { background: var(--code-bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; max-height: 60vh; overflow: auto; font-size: 12.5px; line-height: 1.6; display: grid; gap: 6px; }
.task-log .log-row { display: flex; align-items: flex-start; gap: 8px; padding: 2px 0; }
.task-log .tag { flex: none; margin-top: 1px; }
.ev-error span:last-child { color: var(--rust); }

/* ───────────────────────── terminal ───────────────────────── */
.term-box { position: relative; flex: 1; min-height: 0; display: flex; }
.term-viewport { flex: 1; min-height: 0; overflow: auto; background: var(--code-bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 8px; font-family: var(--font-mono); font-size: 13px; line-height: 1.32; color: var(--ink); outline: none; cursor: text; overscroll-behavior: contain; }
.term-viewport.focused { border-color: var(--moss-line); box-shadow: var(--focus); }
.term-screen { white-space: pre; min-width: max-content; }
.term-row { height: 1.32em; }
.term-input { position: absolute; opacity: 0; width: 1px; height: 1px; left: 0; top: 0; resize: none; border: 0; padding: 0; }
.term-measure { position: absolute; visibility: hidden; font-family: var(--font-mono); font-size: 13px; line-height: 1.32; white-space: pre; left: -9999px; top: 0; }
.term-cursor { background: var(--ink); color: var(--paper); }
.term-viewport:not(.focused) .term-cursor { background: none; color: inherit; outline: 1px solid var(--ink-3); }
.term-status { padding: 4px 2px 6px; }
.term-status.bad { color: var(--rust); }
.t-b { font-weight: 700; }
.t-dim { opacity: 0.62; }
.t-i { font-style: italic; }
.t-u { text-decoration: underline; }
.t-s { text-decoration: line-through; }
.t-h { visibility: hidden; }
.t-fgi { color: var(--paper); }
.t-bgi { background: var(--ink); }
/* the 16 ANSI colours, drawn from the kit's natural palette */
.t-fg0 { color: var(--ink); } .t-fg1 { color: var(--rust); } .t-fg2 { color: var(--moss); } .t-fg3 { color: var(--ochre); }
.t-fg4 { color: var(--slate); } .t-fg5 { color: var(--clay); } .t-fg6 { color: var(--sage); } .t-fg7 { color: var(--ink-2); }
.t-fg8 { color: var(--ink-3); } .t-fg9 { color: var(--clay); } .t-fg10 { color: var(--moss-ink); } .t-fg11 { color: var(--ochre-ink); }
.t-fg12 { color: var(--slate); } .t-fg13 { color: var(--clay-ink); } .t-fg14 { color: var(--sage); } .t-fg15 { color: var(--ink); }
.t-bg0 { background: var(--ink); } .t-bg1 { background: var(--rust-soft); } .t-bg2 { background: var(--moss-soft); } .t-bg3 { background: var(--ochre-soft); }
.t-bg4 { background: var(--slate-soft); } .t-bg5 { background: var(--clay-soft); } .t-bg6 { background: var(--moss-soft); } .t-bg7 { background: var(--surface-2); }
.t-bg8 { background: var(--ink-3); } .t-bg9 { background: var(--rust-soft); } .t-bg10 { background: var(--moss-soft); } .t-bg11 { background: var(--ochre-soft); }
.t-bg12 { background: var(--slate-soft); } .t-bg13 { background: var(--clay-soft); } .t-bg14 { background: var(--moss-soft); } .t-bg15 { background: var(--surface); }

/* ───────────────────────── SSH: file manager ───────────────────────── */
.cb-main { position: relative; }
.cb-bartitle { min-width: 0; }
.cb-conn { display: inline-flex; align-items: center; gap: 7px; height: 28px; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-conn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; }
.cb-conn-ok .dot { background: var(--moss); }
.cb-conn-busy .dot { background: var(--ochre); animation: breathe 1.4s infinite; }
.cb-conn-err .dot { background: var(--rust); }
.cb-hostdot { position: relative; display: inline-grid; }
.cb-hostdot.live::after { content: ""; position: absolute; right: -2px; bottom: -1px; width: 7px; height: 7px; border-radius: 50%; background: var(--moss); border: 2px solid var(--paper-2); }
.cb-toolbar { flex-wrap: wrap; gap: 6px; }
.cb-crumbs { display: flex; align-items: center; gap: 4px; min-width: 0; flex: 1 1 100%; }
.crumbs { display: flex; align-items: center; gap: 2px; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; font-size: 13px; min-width: 0; }
.crumb { padding: 3px 6px; border-radius: 7px; color: var(--ink-2); }
.crumb:hover { background: var(--surface-2); color: var(--ink); }
.crumb-sep { color: var(--ink-3); }
.cb-filter { width: 190px; }
.cb-selbar { gap: 6px; padding: 2px 8px; border-radius: 10px; background: var(--moss-soft); }
.cb-files { flex: 1; min-height: 0; overflow: auto; position: relative; }
.cb-files.over { outline: 2px dashed var(--moss); outline-offset: -8px; background: var(--moss-soft); }
.cb-status { padding: 16px 20px 0; }
.cb-status:empty { display: none; }
.cb-connecting { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.cb-connfail { max-width: 720px; }
.cb-table { padding: 6px 12px 80px; }
.cb-table.is-loading { opacity: 0.55; transition: opacity 0.2s; }
.cb-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 90px 120px 104px 64px; align-items: center; gap: 8px; min-height: 38px; padding: 0 8px; border-radius: 9px; font-size: 13.5px; }
.cb-row:hover { background: var(--surface); }
.cb-row.sel { background: var(--moss-soft); }
.cb-row:focus-visible { outline: none; box-shadow: var(--focus); }
.cb-head { position: sticky; top: 0; z-index: 2; background: var(--paper); border-bottom: 1px solid var(--line); border-radius: 0; min-height: 34px; font-size: 12px; color: var(--ink-3); }
.cb-head:hover { background: var(--paper); }
.cb-th { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); font-size: 12px; text-align: start; }
.cb-th.on { color: var(--ink); font-weight: 560; }
.cb-th .flip { transform: rotate(180deg); }
.cb-name { display: flex; align-items: center; gap: 8px; min-width: 0; text-align: start; color: var(--ink); }
.cb-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-name .icon { color: var(--ink-3); flex: none; }
.cb-size, .cb-time { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-mode { font-size: 11.5px; }
.cb-acts { display: flex; justify-content: flex-end; gap: 2px; opacity: 0; transition: opacity 0.15s; }
.cb-row:hover .cb-acts, .cb-row:focus-within .cb-acts { opacity: 1; }
.cb-empty { padding: 30px 8px; }
.cb-term { display: flex; flex-direction: column; height: 42%; min-height: 220px; border-top: 1px solid var(--line); background: var(--paper-2); padding: 0 12px 12px; }
.cb-termbar { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.cb-termbody { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cb-switch-row { gap: 10px; align-items: center; }
.cb-details summary { cursor: pointer; font-weight: 560; padding: 6px 0; }
.cb-parts { width: 100%; font-size: 12.5px; border-collapse: collapse; }
.cb-parts td { padding: 4px 8px; border-bottom: 1px solid var(--line); }
.cb-editor .code-ta { min-height: 60vh; }

/* ───────────────────────── transfers ───────────────────────── */
.xfer { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 380px; max-width: calc(100vw - 36px); max-height: 50vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-md); animation: pop 0.25s var(--ease); }
.xfer-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.xfer-list { overflow: auto; padding: 6px; display: grid; gap: 4px; }
.xfer-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px; border-radius: 10px; }
.xfer-row > .icon { margin-top: 3px; color: var(--ink-3); }
.xfer-row .grow { min-width: 0; display: grid; gap: 4px; }
.xfer-name { font-size: 13px; font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xfer-row.err .xfer-name { color: var(--rust); }

/* ───────────────────────── Codex workspace ───────────────────────── */
.cx-ws { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); }
.cx-ws.cx-with-panel { grid-template-columns: minmax(220px, 260px) minmax(420px, 1fr) minmax(340px, 40%); }
.cx-side { background: var(--paper-2); }
.cx-sidetop { display: grid; gap: 8px; padding: 12px 12px 4px; }
.cx-hostsel { display: flex; align-items: center; gap: 8px; color: var(--ink-3); }
.cx-hostsel .select-wrap { flex: 1; min-width: 0; }
.cx-newbtn { justify-content: flex-start; }
.cx-threads { padding-top: 2px; }
.cx-group { display: flex; align-items: center; gap: 6px; padding: 12px 10px 4px; font-size: 12px; font-weight: 600; color: var(--ink-2); overflow: hidden; white-space: nowrap; }
.cx-group .icon { color: var(--ink-3); }
.cx-thread { padding: 7px 10px; align-items: center; }
.cx-thread b { font-size: 13.5px; font-weight: 500; }
.cx-tstate { width: 8px; height: 8px; flex: none; border-radius: 50%; }
.cx-tstate-busy { border: 2px solid var(--moss); border-right-color: transparent; animation: spin 0.9s linear infinite; width: 10px; height: 10px; }
.cx-tstate-wait { background: var(--ochre); animation: breathe 1.2s infinite; }
.cx-tstate-unread { background: var(--slate); }
.cx-main { position: relative; }
.cx-head { gap: 8px; }
.cx-titlebox { flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.cx-title { font-family: var(--font-serif); font-size: 18px; font-weight: var(--display-weight); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; color: var(--ink); }
.cx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-chips .chip { height: 24px; padding: 0 9px; font-size: 12px; display: inline-flex; align-items: center; gap: 5px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-diffbtn.on, .icon-btn.on { background: var(--moss-soft); color: var(--moss-ink); }
.cx-stat { font-family: var(--font-mono); font-size: 12px; white-space: nowrap; }
.cx-stat .add { color: var(--moss); }
.cx-stat .del { color: var(--rust); }
.cx-banner { display: flex; align-items: center; gap: 10px; margin: 10px 18px 0; padding: 10px 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); font-size: 13.5px; }
.cx-banner.error, .cx-banner.exited { border-color: var(--rust-line); background: var(--rust-soft); }
.cx-banner .grow { min-width: 0; }

.cx-log { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 18px 20px 24px; scroll-padding-bottom: 40px; }
.cx-log-inner, .cx-dock > * { max-width: 820px; margin-inline: auto; width: 100%; }
.cx-turn { display: grid; gap: 10px; padding-bottom: 14px; }
.cx-cell { min-width: 0; font-size: 14.5px; line-height: 1.65; }
.cx-cell-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.cx-cell-head .icon { align-self: center; color: var(--ink-3); }
.cx-bullet { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex: none; align-self: center; }
.cx-bullet.live { background: var(--moss); animation: breathe 1.2s infinite; }
.cx-user { display: flex; justify-content: flex-end; margin-top: 8px; }
.cx-bubble { max-width: 82%; padding: 10px 14px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); }
.cx-user.pending .cx-bubble { opacity: 0.72; }
.cx-user.failed .cx-bubble { border-color: var(--rust-line); }
.cx-attrow { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.cx-thumb { max-width: 160px; max-height: 120px; border-radius: 10px; border: 1px solid var(--line); object-fit: cover; }
.cx-agentMessage { position: relative; }
.cx-msgbody > :first-child { margin-top: 0; }
.cx-msgbody > :last-child { margin-bottom: 0; }
.cx-msgacts { position: absolute; right: -6px; top: -6px; opacity: 0; transition: opacity 0.15s; }
.cx-agentMessage:hover .cx-msgacts { opacity: 1; }
.cx-think summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; color: var(--ink-3); font-size: 13.5px; }
.cx-think summary::-webkit-details-marker { display: none; }
.cx-think-title { font-style: italic; }
.cx-think-body { margin: 6px 0 0 15px; padding-inline-start: 12px; border-inline-start: 2px solid var(--line); color: var(--ink-2); font-size: 13.5px; }
.cx-commandExecution b, .cx-explore b { font-weight: 600; font-size: 13.5px; }
.cx-cmdline { font-size: 12.5px; background: var(--code-bg); padding: 2px 7px; border-radius: 7px; white-space: pre-wrap; word-break: break-all; }
.cx-out { margin: 6px 0 0 15px; max-height: 360px; overflow: auto; padding: 8px 11px; background: var(--code-bg); border: 1px solid var(--line); border-radius: 10px; font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; color: var(--ink-2); }
.cx-out.bad { color: var(--rust); }
.cx-commandExecution.failed .cx-cmdline { border: 1px solid var(--rust-line); }
.cx-more { margin: 4px 0 0 15px; font-size: 12px; color: var(--ink-3); }
.cx-more:hover { color: var(--ink); }
.cx-explore-list { display: grid; gap: 1px; margin: 4px 0 0 15px; padding-inline-start: 12px; border-inline-start: 2px solid var(--line); }
.cx-explore-line { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-explore-line .mono { font-size: 12.5px; }
.cx-file { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); margin-top: 4px; overflow: hidden; }
.cx-file summary { display: flex; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer; list-style: none; font-size: 13px; }
.cx-file summary::-webkit-details-marker { display: none; }
.cx-file .mono { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cx-diff { font-size: 12px; line-height: 1.5; overflow: auto; max-height: 520px; border-top: 1px solid var(--line); background: var(--code-bg); }
.cx-diff .dl { white-space: pre; padding: 0 10px; min-width: max-content; }
.cx-diff .add { background: var(--moss-soft); color: var(--moss-ink); }
.cx-diff .del { background: var(--rust-soft); color: var(--rust); }
.cx-diff .hunk { color: var(--slate); background: var(--slate-soft); }
.cx-diff .meta { color: var(--ink-3); }
.cx-tool summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-size: 13.5px; }
.cx-tool summary::-webkit-details-marker { display: none; }
.cx-todo .cx-steps { display: grid; gap: 3px; margin: 6px 0 0 15px; }
.cx-step { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.cx-check { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--ink-3); display: inline-grid; place-items: center; flex: none; }
.cx-step.completed { color: var(--ink-3); text-decoration: line-through; }
.cx-step.completed .cx-check { background: var(--moss); border-color: var(--moss); color: var(--on-accent); }
.cx-step.inProgress { color: var(--ink); font-weight: 560; }
.cx-step.inProgress .cx-check { border-color: var(--moss); box-shadow: inset 0 0 0 3px var(--moss-soft); }
.cx-plancard { border: 1px solid var(--moss-line); background: var(--moss-soft); border-radius: var(--r); padding: 12px 14px; }
.cx-note { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); }
.cx-note.warn { color: var(--ochre-ink); }
.cx-worked, .cx-divider { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 12px; margin: 4px 0; }
.cx-worked::before, .cx-worked::after, .cx-divider::before, .cx-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.cx-genimg { max-width: 100%; border-radius: var(--r-sm); margin-top: 6px; }
.cx-approval { border: 1px solid var(--ochre-line); background: var(--ochre-soft); border-radius: var(--r); padding: 12px 14px; display: grid; gap: 6px; outline: none; animation: rise 0.25s var(--ease); }
.cx-approval:focus-visible { box-shadow: var(--focus); }
.cx-approval .cx-out { margin-inline-start: 0; }
.cx-approval-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.cx-approval-acts kbd { margin-inline-start: 6px; font-size: 11px; opacity: 0.7; }
.shimmer { background: linear-gradient(90deg, var(--ink-3) 0%, var(--ink) 45%, var(--ink-3) 90%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: cx-shimmer 2s linear infinite; }
@keyframes cx-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

.cx-empty { display: grid; place-items: center; min-height: 52vh; }
.cx-hello { display: grid; justify-items: center; gap: 14px; text-align: center; max-width: 640px; padding: 0 12px; }
.cx-logo { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--moss); color: var(--on-accent); box-shadow: var(--shadow-md); }
.cx-logo .icon { width: 26px; height: 26px; }
.cx-hello h2 { font-size: 30px; line-height: 1.2; margin: 0; }
.cx-cwd { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-sugs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; margin-top: 8px; }
.cx-sug { text-align: start; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.cx-sug:hover { border-color: var(--ink-3); color: var(--ink); }

.cx-dock { position: relative; padding: 4px 20px 10px; display: grid; gap: 6px; }
.cx-jump { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); width: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-size: 12.5px; z-index: 3; }
.cx-jump .down { transform: rotate(90deg); }
.cx-statusline { display: flex; align-items: center; gap: 6px; font-size: 13.5px; padding: 0 4px; }
.cx-queue { display: grid; gap: 4px; }
.cx-queue:empty { display: none; }
.cx-queued { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px dashed var(--line-2); border-radius: 10px; font-size: 13px; color: var(--ink-2); }
.cx-composer { position: relative; display: grid; gap: 6px; padding: 10px 12px 8px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-md); transition: border-color 0.2s, box-shadow 0.2s; }
.cx-composer:focus-within { border-color: var(--moss-line); box-shadow: var(--shadow-md), var(--focus); }
.cx-composer.shell { border-color: var(--ochre-line); }
.cx-composer.over { border-color: var(--moss); background: var(--moss-soft); }
.cx-composer.disabled { opacity: 0.7; }
.cx-ta { width: 100%; min-height: 26px; max-height: 320px; resize: none; border: 0; outline: none; background: transparent; font: inherit; font-size: 15px; line-height: 1.55; color: var(--ink); padding: 2px 2px 0; }
.cx-ctools { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cx-foot-left { display: flex; align-items: center; gap: 2px; min-width: 0; overflow: hidden; }
.cx-foot-right { display: flex; align-items: center; gap: 8px; }
.cx-pick { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 8px; border-radius: 9px; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; min-width: 0; flex: 0 1 auto; }
.cx-pick > span:first-of-type { overflow: hidden; text-overflow: ellipsis; }
.cx-pick:hover { background: var(--surface-2); color: var(--ink); }
.cx-pick.on { background: var(--moss-soft); color: var(--moss-ink); }
.cx-pick.warn { color: var(--rust); }
.cx-send { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); flex: none; transition: transform 0.15s, opacity 0.15s; }
.cx-send:disabled { opacity: 0.3; cursor: default; }
.cx-send:not(:disabled):hover { transform: scale(1.05); }
.cx-send .up { transform: rotate(-90deg); }
.cx-ctx { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.cx-ring { width: 18px; height: 18px; transform: rotate(-90deg); }
.cx-ring circle { fill: none; stroke-width: 2.4; }
.cx-ring .bg { stroke: var(--line); }
.cx-ring .fg { stroke: var(--moss); stroke-linecap: round; }
.cx-ring .fg.low { stroke: var(--rust); }
.cx-atts { display: flex; gap: 8px; flex-wrap: wrap; }
.cx-att { position: relative; }
.cx-att img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.cx-att button { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); }
.cx-pop { position: absolute; left: 8px; right: 8px; bottom: calc(100% + 6px); max-height: 300px; overflow: auto; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-md); z-index: 20; display: grid; gap: 1px; }
.cx-popitem { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; text-align: start; font-size: 13px; min-width: 0; }
.cx-popitem .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-popitem b { min-width: 110px; }
.cx-popitem.sel, .cx-popitem:hover { background: var(--moss-soft); color: var(--moss-ink); }
.cx-hint { text-align: center; }

.cx-panel { display: flex; flex-direction: column; min-height: 0; border-inline-start: 1px solid var(--line); background: var(--paper-2); }
.cx-ptabs { display: flex; align-items: center; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.cx-ptabs button[data-m] { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 9px; font-size: 13px; color: var(--ink-2); }
.cx-ptabs button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.cx-pbody { flex: 1; min-height: 0; overflow: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.cx-panel-head { display: flex; align-items: center; gap: 8px; }
.cx-panel-empty { display: grid; place-items: center; gap: 6px; padding: 40px 10px; text-align: center; }
.cx-termwrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cx-status-table { width: 100%; border-collapse: collapse; }
.cx-status-table th { text-align: start; font-weight: 560; padding: 7px 12px 7px 0; color: var(--ink-2); white-space: nowrap; vertical-align: top; font-size: 13px; }
.cx-status-table td { padding: 7px 0; border-bottom: 1px solid var(--line); word-break: break-all; }

@media (max-width: 1080px) {
  /* no room for three columns: the panel slides over the conversation */
  .cx-ws.cx-with-panel { grid-template-columns: minmax(200px, 240px) minmax(0, 1fr); }
  .cx-panel { position: fixed; top: var(--top-h, 0); right: 0; bottom: 0; width: min(560px, 92vw); z-index: 45; box-shadow: var(--shadow-md); animation: pop 0.2s var(--ease); }
  .cx-ctx > span { display: none; }
  .cx-hint { display: none; }
  .cb-row { grid-template-columns: 22px minmax(0, 1fr) 80px 104px 56px; }
  .cb-mode { display: none; }
}
@media (max-width: 980px) {
  .cx-ws, .cx-ws.cx-with-panel { grid-template-columns: minmax(0, 1fr); }
  .cx-panel { position: fixed; inset: auto 0 0 0; height: 62vh; z-index: 45; border-inline-start: 0; border-top: 1px solid var(--line); box-shadow: var(--shadow-md); }
  .cb-filter { width: 140px; }
}
@media (max-width: 720px) {
  .cx-log { padding: 12px 12px 18px; }
  .cx-dock { padding: 4px 10px 8px; }
  .cx-bubble { max-width: 92%; }
  .cx-sugs { grid-template-columns: minmax(0, 1fr); }
  .cx-hello h2 { font-size: 24px; }
  .cx-hint { display: none; }
  .cx-pick-perm > span, .cx-pick-plan > span { display: none; }
  .cx-pick-model { flex: 1 1 auto; }
  .cx-panel { left: 0; width: 100%; }
  .cb-row { grid-template-columns: 22px minmax(0, 1fr) 70px 40px; }
  .cb-time, .cb-mode { display: none; }
  .cb-acts { opacity: 1; }
  .cb-filter { display: none; }
  .cb-conn { max-width: 40%; }
}
@media (max-width: 420px) {
  .cx-out, .cx-explore-list, .cx-think-body, .cx-todo .cx-steps, .cx-more { margin-inline-start: 0; }
  .cb-row { grid-template-columns: 22px minmax(0, 1fr) 40px; }
  .cb-size { display: none; }
}