:root { --bg: #0e1014; --bg-2: #141821; --bg-3: #1a1f2b; --line: #232936; --line-soft: #1b2029; --fg: #e6e9ef; --fg-dim: #97a0b0; --fg-mute: #5f6878; --accent: #5b8cff; --accent-dim:#2b3f6b; --accent-fg: #ffffff; /* text sitting on --accent-dim */ --body-fg: #ccd2dd; /* message prose */ --hover: rgba(255,255,255,.08); --shadow: 0 24px 60px rgba(0,0,0,.5); --canvas: #05070a; /* recessed page behind the panes */ --surface: #1a212d; /* the pane itself, lifted off it */ --pane-shadow: 0 1px 2px rgba(0,0,0,.45), 0 10px 24px -14px rgba(0,0,0,.75); --ok: #34d399; --warn: #fbbf24; --bad: #fb7185; --radius: 7px; --row-h: 27px; --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* ── colour schemes ────────────────────────────────────────────── :root is Midnight. Each scheme overrides it via , while carries light/dark for the shared corrections further down. Both attributes are stamped by applyTheme(). */ :root[data-theme="paper"] { --bg: #f6f7f9; --bg-2: #ffffff; --bg-3: #eceff4; --line: #dce0e8; --line-soft: #e8ebf0; --fg: #171a20; --fg-dim: #545c6b; --fg-mute: #8b93a2; --accent: #2f6bdd; --accent-dim:#d7e3fb; --accent-fg: #12356f; --body-fg: #2b3240; --hover: rgba(0,0,0,.06); --shadow: 0 20px 48px rgba(20,28,48,.18); --canvas: #dfe4ec; --surface: #ffffff; --pane-shadow: 0 1px 2px rgba(16,24,40,.07), 0 10px 24px -14px rgba(16,24,40,.28); --ok: #0f9d68; --warn: #b45309; --bad: #dc2626; } /* Slate — softer dark: lifted blacks, blue-grey, lower contrast */ :root[data-theme="slate"] { --bg: #21262e; --bg-2: #272d37; --bg-3: #313945; --line: #3d4655; --line-soft: #2e3540; --fg: #dbe1ea; --fg-dim: #9aa4b5; --fg-mute: #6e7889; --accent: #7aa2f7; --accent-dim: #33436a; --accent-fg: #eaf1ff; --body-fg: #c6cdd9; --hover: rgba(255,255,255,.07); --shadow: 0 24px 60px rgba(0,0,0,.45); --canvas: #191d24; --surface: #272d37; --pane-shadow: 0 1px 2px rgba(0,0,0,.32), 0 10px 24px -14px rgba(0,0,0,.6); --ok: #7ee2b8; --warn: #e7c26a; --bad: #f2889b; } /* Carbon — neutral material grey, no blue cast */ :root[data-theme="carbon"] { --bg: #171717; --bg-2: #1e1e1e; --bg-3: #292929; --line: #373737; --line-soft: #242424; --fg: #e8e6e3; --fg-dim: #a6a29e; --fg-mute: #75716d; --accent: #d0bcff; --accent-dim: #4a4458; --accent-fg: #f6edff; --body-fg: #cfcbc7; --hover: rgba(255,255,255,.07); --shadow: 0 24px 60px rgba(0,0,0,.55); --canvas: #0f0f0f; --surface: #1e1e1e; --pane-shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 24px -14px rgba(0,0,0,.7); --ok: #7fd6a0; --warn: #e5bf6a; --bad: #f08a8a; } /* Ocean — colder, deep blue-teal */ :root[data-theme="ocean"] { --bg: #0a1721; --bg-2: #0f202c; --bg-3: #16303e; --line: #1e404f; --line-soft: #142935; --fg: #d6e6ef; --fg-dim: #8fa9b8; --fg-mute: #63808f; --accent: #38bdf8; --accent-dim: #17415a; --accent-fg: #e2f6ff; --body-fg: #c0d5e0; --hover: rgba(255,255,255,.07); --shadow: 0 24px 60px rgba(0,0,0,.55); --canvas: #05101a; --surface: #10222e; --pane-shadow: 0 1px 2px rgba(0,0,0,.45), 0 10px 24px -14px rgba(0,0,0,.7); --ok: #34d399; --warn: #f0c04a; --bad: #fb7185; } /* Espresso — warm, low blue light */ :root[data-theme="espresso"] { --bg: #1a1512; --bg-2: #221c17; --bg-3: #2d251e; --line: #3d3229; --line-soft: #271f1a; --fg: #ece3d9; --fg-dim: #b0a294; --fg-mute: #7f7264; --accent: #e0a458; --accent-dim: #4d3a22; --accent-fg: #fff3e2; --body-fg: #d8ccbf; --hover: rgba(255,255,255,.06); --shadow: 0 24px 60px rgba(0,0,0,.5); --canvas: #110d0a; --surface: #221c17; --pane-shadow: 0 1px 2px rgba(0,0,0,.45), 0 10px 24px -14px rgba(0,0,0,.68); --ok: #8fce9b; --warn: #e6b95c; --bad: #ef8b7a; } /* Warm — softer light, cream rather than white */ :root[data-theme="warm"] { --bg: #f5f1e8; --bg-2: #fbf8f2; --bg-3: #efe9dc; --line: #ded5c5; --line-soft: #e9e2d5; --fg: #241f1a; --fg-dim: #5d5449; --fg-mute: #8c8478; --accent: #b4622a; --accent-dim: #f2ddc9; --accent-fg: #4a2510; --body-fg: #3a332b; --hover: rgba(0,0,0,.05); --shadow: 0 20px 48px rgba(60,45,25,.16); --canvas: #e6dfd1; --surface: #fffdf9; --pane-shadow: 0 1px 2px rgba(60,45,25,.08), 0 10px 24px -14px rgba(60,45,25,.3); --ok: #2e7d5b; --warn: #a15c11; --bad: #c0392b; } * { box-sizing: border-box; } [v-cloak] { display: none; } html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 13px; -webkit-font-smoothing: antialiased; } body.dragging { cursor: col-resize; user-select: none; } #app { height: 100vh; max-height: 100vh; display: flex; flex-direction: column; overflow: hidden; } .mono { font-family: var(--mono); } svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* ── top bar ─────────────────────────────────────────────────── */ .topbar { height: 40px; flex: none; display: flex; align-items: center; gap: 16px; padding: 0 12px; background: var(--bg-2); border-bottom: 1px solid var(--line); } .brand { display: flex; align-items: center; gap: 8px; } .brand-mark { width: 13px; height: 13px; border-radius: 4px; background: linear-gradient(135deg, var(--accent), #c084fc); } .brand-name { font-weight: 600; letter-spacing: -0.2px; } .crumbs { display: flex; align-items: center; gap: 7px; color: var(--fg-dim); font-size: 12px; } .crumb-sep { color: var(--fg-mute); } .crumb-strong { color: var(--fg); font-weight: 500; } .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; } .root-path { font-family: var(--mono); font-size: 11px; color: var(--fg-mute); max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conn { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--fg-dim); } .conn .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-mute); } .conn.mock .dot { background: var(--warn); } .conn.live .dot { background: var(--ok); } /* ── layout ──────────────────────────────────────────────────── */ .body { flex: 1; display: flex; min-height: 0; overflow: hidden; } .sidebar { position: relative; flex: none; display: flex; flex-direction: column; background: var(--bg-2); border-right: 1px solid var(--line); min-height: 0; } .sidebar-resizer { position: absolute; top: 0; right: -3px; width: 6px; height: 100%; cursor: col-resize; z-index: 5; } .sidebar-resizer:hover { background: var(--accent-dim); } .pane { display: flex; flex-direction: column; min-height: 0; flex: none; } .pane-grow { flex: 1; } .pane-head { height: 30px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 10px; border-bottom: 1px solid var(--line-soft); } .pane-title { font-size: 10.5px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--fg-dim); } .pane-count { font-size: 10.5px; color: var(--fg-mute); } .pane-head .icon-btn { margin-left: auto; } .pane-body { flex: 1; overflow-y: auto; padding: 4px 0 10px; min-height: 0; } .pane-resizer { height: 5px; flex: none; cursor: row-resize; background: var(--line-soft); } .pane-resizer:hover { background: var(--accent-dim); } /* ── rows ────────────────────────────────────────────────────── */ .row { height: var(--row-h); display: flex; align-items: center; gap: 6px; padding: 0 6px 0 8px; cursor: pointer; color: var(--fg-dim); white-space: nowrap; } .row:hover { background: var(--bg-3); color: var(--fg); } .row.is-active { background: var(--accent-dim); color: var(--accent-fg); } .thread-row.is-active { background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--fg); box-shadow: inset 2px 0 0 var(--accent); } .project-row.is-active { background: var(--bg-3); color: var(--fg); box-shadow: inset 2px 0 0 var(--accent); } .row.is-picked { background: var(--bg-3); color: var(--fg); box-shadow: inset 2px 0 0 var(--accent); } .row-label { overflow: hidden; text-overflow: ellipsis; } .project-row .row-label { color: var(--fg); font-weight: 500; } .chev { flex: none; transition: transform .12s ease; color: var(--fg-mute); } .chev.open { transform: rotate(90deg); } .chev-spacer { width: 13px; flex: none; } .ico { flex: none; color: #6b7789; } .ico.link { color: var(--accent); } .proj-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; } .hash { color: var(--fg-mute); flex: none; width: 11px; text-align: center; } .hash.big { font-size: 17px; margin-right: 2px; } .row-badge, .unread { margin-left: auto; font-size: 10px; padding: 1px 5px; border-radius: 9px; background: var(--bg-3); color: var(--fg-mute); } .unread { background: var(--accent); color: #fff; } .tag { font-size: 9px; text-transform: uppercase; letter-spacing: .4px; color: var(--accent); border: 1px solid var(--accent-dim); border-radius: 3px; padding: 0 3px; } .icon-btn { flex: none; display: grid; place-items: center; width: 19px; height: 19px; padding: 0; background: none; border: 0; border-radius: 4px; color: var(--fg-mute); cursor: pointer; } .icon-btn:hover { background: var(--hover); color: var(--fg); } .row-action { opacity: 0; margin-left: 2px; } .row-badge + .row-action, .row-action { margin-left: auto; } .row-action ~ .row-action { margin-left: 0; } .row:hover .row-action { opacity: 1; } .project-children { padding-left: 13px; padding-bottom: 2px; } /* breathing room so stacked projects don't merge into one block */ .project { margin-bottom: 7px; padding-bottom: 3px; border-bottom: 1px solid var(--line-soft); } .project:last-child { border-bottom: 0; } .folder-link .row-label { font-size: 11px; color: var(--fg-mute); } .folder-link:hover .row-label { color: var(--fg-dim); } .muted-row { color: var(--fg-mute); font-style: italic; } .inline-input { flex: 1; background: var(--bg); border: 1px solid var(--accent); border-radius: 4px; color: var(--fg); font: inherit; padding: 2px 6px; outline: none; } .empty-hint { padding: 14px 12px; color: var(--fg-mute); font-size: 12px; line-height: 1.6; } .link-btn { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0; font: inherit; } .link-btn:hover { text-decoration: underline; } /* ── content ─────────────────────────────────────────────────── */ .content { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--canvas); } .thread-head { flex: none; padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--bg-2); } .thread-title { display: flex; align-items: center; font-size: 15px; font-weight: 600; } .thread-meta { display: flex; align-items: center; gap: 7px; margin-top: 7px; flex-wrap: wrap; } .chip { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: color-mix(in srgb, var(--chip, var(--accent)) 18%, transparent); color: var(--chip, var(--accent)); border: 1px solid color-mix(in srgb, var(--chip, var(--accent)) 30%, transparent); } .chip-path { background: var(--bg-3); color: var(--fg-dim); border-color: var(--line); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chip-ghost { background: none; color: var(--fg-mute); border-color: var(--line); } .messages { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 18px 20px 8px; min-height: 0; min-width: 0; } .msg { display: flex; gap: 11px; padding: 9px 0; min-width: 0; } .msg-main { min-width: 0; flex: 1; } .msg-avatar { flex: none; width: 25px; height: 25px; border-radius: 6px; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; background: var(--bg-3); color: var(--fg-dim); } .msg.user .msg-avatar { background: var(--accent-dim); color: var(--accent-fg); } .msg-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; } .msg-author { font-weight: 600; font-size: 12.5px; } .msg-time { font-size: 10.5px; color: var(--fg-mute); } .msg-body { line-height: 1.62; color: var(--body-fg); white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; } .empty-thread { padding: 40px 0; color: var(--fg-dim); } .empty-thread p { margin: 6px 0; } .empty-glyph { font-size: 30px; color: var(--line); line-height: 1; } .muted { color: var(--fg-mute); font-size: 12px; } /* ── agent / tool chrome ─────────────────────────────────────── */ .agent-badge { font-size: 9.5px; padding: 1px 5px; border-radius: 4px; flex: none; background: var(--bg-3); color: var(--fg-mute); text-transform: lowercase; } .agent-badge.claude { background: rgba(217,119,87,.16); color: #e0916f; } .agent-badge.codex { background: rgba(52,211,153,.14); color: var(--ok); } .thread-row .agent-badge { margin-left: auto; } .thread-row:hover .agent-badge { display: none; } .tag-warn { color: var(--warn); border-color: rgba(251,191,36,.4); } .ico.file { color: #4d566b; } .folder-row.is-file { color: var(--fg-mute); } .spinner { width: 9px; height: 9px; flex: none; border-radius: 50%; border: 1.5px solid var(--line); border-top-color: var(--accent); animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .tools { margin: 4px 0 7px; display: flex; flex-direction: column; gap: 3px; } .tool { display: flex; align-items: flex-start; gap: 8px; padding: 3px 8px; border-radius: 5px; background: var(--bg-2); border-left: 2px solid var(--accent-dim); font-size: 11.5px; } .tool-name { color: var(--accent); font-weight: 500; flex: none; } .tool-detail { color: var(--fg); opacity: .92; min-width: 0; white-space: pre-wrap; /* wrap long commands to the pane width */ overflow-wrap: anywhere; /* break paths/URLs that have no spaces */ } .msg-model { font-size: 10px; color: var(--fg-mute); } .msg-error { overflow-wrap: anywhere; margin-top: 6px; padding: 7px 10px; border-radius: 6px; background: rgba(251,113,133,.1); border: 1px solid rgba(251,113,133,.3); color: var(--bad); font-size: 12px; white-space: pre-wrap; } .msg-foot { margin-top: 6px; display: flex; gap: 12px; font-size: 10.5px; color: var(--fg-mute); } .caret { display: inline-block; width: 7px; height: 13px; margin-left: 2px; background: var(--accent); vertical-align: text-bottom; animation: blink 1s steps(2) infinite; } @keyframes blink { 50% { opacity: 0; } } /* ── composer ────────────────────────────────────────────────── */ .composer-wrap { flex: none; padding: 8px 20px 14px; } /* controls live *below* the input now, as one compact row of pills */ .composer-bar { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; padding: 7px 2px 0; font-size: 11px; color: var(--fg-mute); } .composer-bar .grow { flex: 1; } .mini { display: flex; align-items: center; gap: 5px; } .mini select, .inline-select { background: var(--bg-2); color: var(--fg-dim); border: 1px solid var(--line); border-radius: 5px; padding: 2px 5px; font: inherit; font-size: 11px; outline: none; } .mini select:focus, .inline-select:focus { border-color: var(--accent); } /* ── agent counters ──────────────────────────────────────────── */ .pulse { width: 6px; height: 6px; border-radius: 50%; flex: none; background: currentColor; animation: pulse 1.4s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } .agent-count { display: inline-flex; align-items: center; gap: 4px; flex: none; margin-left: auto; padding: 1px 6px; border-radius: 9px; font-size: 10px; font-weight: 600; background: rgba(52,211,153,.15); color: var(--ok); } .thread-row .agent-count + .agent-badge { margin-left: 4px; } .global-agents { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--fg-mute); } .global-agents.busy { color: var(--ok); } .global-agents .pulse { animation: none; opacity: .35; } .global-agents.busy .pulse { animation: pulse 1.4s ease-in-out infinite; } /* ── permission chips ────────────────────────────────────────── */ .access-chip { font-size: 10px; padding: 1px 7px; border-radius: 9px; flex: none; border: 1px solid transparent; white-space: nowrap; } .lvl-read-only { background: rgba(52,211,153,.14); color: var(--ok); border-color: rgba(52,211,153,.3); } .lvl-prompts, .lvl-classifier, .lvl-pre-approved { background: rgba(91,140,255,.14); color: var(--accent); border-color: rgba(91,140,255,.3); } .lvl-writes { background: rgba(251,191,36,.14); color: var(--warn); border-color: rgba(251,191,36,.35); } .lvl-full { background: rgba(251,113,133,.16); color: var(--bad); border-color: rgba(251,113,133,.4); } /* ── model picker ────────────────────────────────────────────── */ .mini-label { color: var(--fg-mute); flex: none; } .picker { position: relative; flex: none; } .picker-trigger { display: flex; align-items: center; gap: 8px; min-width: 190px; padding: 4px 8px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; color: var(--fg-dim); font: inherit; font-size: 11px; cursor: pointer; text-align: left; transition: border-color .12s ease, background .12s ease; } .picker-trigger:hover:not(:disabled) { background: var(--bg-3); color: var(--fg); } .picker-trigger:focus-visible { outline: none; border-color: var(--accent); } .picker.is-open .picker-trigger { border-color: var(--accent); background: var(--bg-3); color: var(--fg); } .picker.is-disabled .picker-trigger { opacity: .5; cursor: not-allowed; } .picker-label { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; } .picker-name { color: var(--fg); font-weight: 500; } .picker-id { font-size: 10px; color: var(--fg-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .picker-chev { flex: none; color: var(--fg-mute); transition: transform .15s ease; } .picker.is-open .picker-chev { transform: rotate(180deg); } /* opens upward — the composer lives at the bottom of the viewport */ .picker-menu { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 40; min-width: 330px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow); overflow: hidden; animation: pickerIn .12s ease-out; } @keyframes pickerIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .picker-head { padding: 7px 11px; font-size: 10px; letter-spacing: .4px; text-transform: uppercase; color: var(--fg-mute); border-bottom: 1px solid var(--line-soft); } .picker-list { max-height: 320px; overflow-y: auto; padding: 4px; } .picker-opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; } .picker-opt.is-hi { background: var(--bg-3); } .picker-opt.is-sel { box-shadow: inset 2px 0 0 var(--accent); } .opt-check { width: 13px; flex: none; color: var(--accent); } .opt-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; } .opt-name { font-size: 12px; color: var(--fg); } .picker-opt.is-sel .opt-name { color: var(--fg); font-weight: 600; } .opt-id { font-size: 10px; color: var(--fg-mute); } .opt-id-muted { font-style: italic; } .opt-note { flex: none; font-size: 10px; color: var(--fg-mute); white-space: nowrap; } .mode-desc { margin: 0 0 8px; padding: 0 2px; font-size: 11px; line-height: 1.5; color: var(--fg-mute); } .mode-desc.warn { color: var(--warn); } .tool.is-sub { margin-left: 14px; border-left-color: var(--ok); } .sub-mark { color: var(--ok); flex: none; } .inline-select { flex: none; max-width: 110px; } .warn { color: var(--warn); } .running-note { color: var(--accent); } .composer { display: flex; gap: 8px; align-items: flex-end; } .composer textarea { flex: 1; resize: none; max-height: 200px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); color: var(--fg); font: inherit; line-height: 1.5; padding: 9px 11px; outline: none; } .composer textarea:focus { border-color: var(--accent-dim); } .send-btn { flex: none; width: 34px; height: 34px; border-radius: var(--radius); border: 0; background: var(--accent); color: #fff; cursor: pointer; display: grid; place-items: center; } .send-btn:disabled { background: var(--bg-3); color: var(--fg-mute); cursor: default; } .send-btn.stop { background: var(--bad); } .send-btn.stop svg { fill: currentColor; } .composer textarea:disabled { opacity: .55; cursor: not-allowed; } .modal-error { margin: 10px 0 0; padding: 7px 10px; border-radius: 6px; font-size: 12px; background: rgba(251,113,133,.1); border: 1px solid rgba(251,113,133,.3); color: var(--bad); } .blank-state { flex: 1; display: grid; place-items: center; } .blank-card { text-align: center; max-width: 340px; } .blank-card h1 { font-size: 17px; margin: 0 0 6px; } .blank-card p { color: var(--fg-dim); line-height: 1.6; margin: 0 0 16px; } .primary-btn { background: var(--accent); color: #fff; border: 0; border-radius: var(--radius); padding: 8px 14px; font: inherit; font-weight: 500; cursor: pointer; } .primary-btn:disabled { background: var(--bg-3); color: var(--fg-mute); cursor: default; } .ghost-btn { background: none; color: var(--fg-dim); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 14px; font: inherit; cursor: pointer; } .ghost-btn:hover { color: var(--fg); border-color: var(--fg-mute); } /* ── modal ───────────────────────────────────────────────────── */ .modal-backdrop { position: fixed; inset: 0; background: rgba(4,6,10,.6); display: grid; place-items: center; z-index: 50; } .modal { width: 460px; max-height: 80vh; display: flex; flex-direction: column; background: var(--bg-2); border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow); padding: 16px; } .modal-head { display: flex; align-items: center; margin-bottom: 14px; flex: none; } .modal-head h2 { font-size: 14px; margin: 0; } .modal-head .icon-btn { margin-left: auto; } .field { display: block; margin-bottom: 12px; } .field > span { display: block; font-size: 11px; color: var(--fg-dim); margin-bottom: 5px; } .field input { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); color: var(--fg); font: inherit; padding: 8px 10px; outline: none; } .field input:focus { border-color: var(--accent); } .picked { padding: 8px 10px; border-radius: var(--radius); background: var(--bg); border: 1px dashed var(--line); font-size: 12px; color: var(--fg); } .picked.unset { color: var(--fg-mute); } .modal-tree { flex: 1; min-height: 140px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); padding: 4px 0; } .modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; flex: none; } /* ── scrollbars ──────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--fg-mute); background-clip: content-box; } ::-webkit-scrollbar-track { background: transparent; } /* ── light-mode corrections for tinted surfaces ──────────────── */ /* The rgba tints above are mixed for a dark backdrop; on white they wash out, so the few brand-tinted chips get explicit light values. */ :root[data-mode="light"] .agent-badge.claude { background: rgba(180,83,9,.10); color: #9a4a12; } :root[data-mode="light"] .agent-badge.codex { background: rgba(15,157,104,.12); color: #0b7a51; } :root[data-mode="light"] .agent-count { background: rgba(15,157,104,.12); color: #0b7a51; } :root[data-mode="light"] .lvl-read-only { background: rgba(15,157,104,.10); border-color: rgba(15,157,104,.28); } :root[data-mode="light"] .lvl-prompts, :root[data-mode="light"] .lvl-classifier, :root[data-mode="light"] .lvl-pre-approved { background: rgba(47,107,221,.10); border-color: rgba(47,107,221,.28); } :root[data-mode="light"] .lvl-writes { background: rgba(180,83,9,.10); border-color: rgba(180,83,9,.30); } :root[data-mode="light"] .lvl-full { background: rgba(220,38,38,.09); border-color: rgba(220,38,38,.30); } :root[data-mode="light"] .msg-error, :root[data-mode="light"] .modal-error { background: rgba(220,38,38,.07); border-color: rgba(220,38,38,.25); color: #b91c1c; } :root[data-mode="light"] .modal-backdrop { background: rgba(24,30,45,.35); } :root[data-mode="light"] .brand-mark { background: linear-gradient(135deg, var(--accent), #8b5cf6); } /* ── plan / billing badge ────────────────────────────────────── */ .plan-badge { font-size: 10px; padding: 1px 7px; border-radius: 9px; flex: none; text-transform: capitalize; white-space: nowrap; background: rgba(52,211,153,.14); color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); } .plan-badge.metered { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); } .msg-foot em { font-style: normal; opacity: .8; } /* ── settings panel ──────────────────────────────────────────── */ .modal-wide { width: 560px; } .settings-body { overflow-y: auto; margin: 0 -4px; padding: 0 4px; } .set-block { margin-bottom: 20px; } .set-block:last-child { margin-bottom: 4px; } .set-block h3 { margin: 0 0 10px; font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--fg-dim); font-weight: 600; } .set-row { display: flex; align-items: center; gap: 16px; padding: 9px 0; border-top: 1px solid var(--line-soft); } .set-row:first-of-type { border-top: 0; } .set-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .set-label { font-size: 12.5px; color: var(--fg); } .set-hint { font-size: 11px; color: var(--fg-mute); line-height: 1.45; } .set-row select { flex: none; min-width: 190px; max-width: 260px; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; font: inherit; font-size: 11.5px; outline: none; } .set-row select:focus { border-color: var(--accent); } /* segmented control */ .segmented { display: flex; flex: none; padding: 2px; gap: 2px; background: var(--bg); border: 1px solid var(--line); border-radius: 7px; } .segmented button { padding: 4px 12px; border: 0; border-radius: 5px; background: none; color: var(--fg-mute); font: inherit; font-size: 11px; text-transform: capitalize; cursor: pointer; transition: background .12s ease, color .12s ease; } .segmented button:hover { color: var(--fg); } .segmented button.on { background: var(--accent); color: #fff; } /* toggle switch */ .toggle { flex: none; width: 34px; height: 19px; padding: 2px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg); cursor: pointer; transition: background .15s ease, border-color .15s ease; } .toggle .knob { display: block; width: 13px; height: 13px; border-radius: 50%; background: var(--fg-mute); transition: transform .15s ease, background .15s ease; } .toggle.on { background: var(--accent); border-color: var(--accent); } .toggle.on .knob { background: #fff; transform: translateX(15px); } .set-static { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 11.5px; border-top: 1px solid var(--line-soft); } .set-static:first-of-type { border-top: 0; } .set-static > span:first-child { color: var(--fg-mute); width: 78px; flex: none; } .set-static > span:last-child { display: flex; align-items: center; gap: 8px; color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis; } .set-static .ok { color: var(--ok); } .set-static .bad { color: var(--bad); } .set-note { margin: 10px 0 0; padding: 8px 10px; border-radius: 6px; background: var(--bg); border: 1px solid var(--line-soft); font-size: 11px; line-height: 1.55; color: var(--fg-mute); } /* ── pane grid ───────────────────────────────────────────────── */ /* auto-fit means the column count follows the window instead of a hardcoded breakpoint; the gap is the "air" between panes. */ /* Flex rather than grid: a pane the user has sized keeps that width while untouched panes share what's left, and the row still wraps naturally. */ .pane-grid { flex: 1; min-height: 0; overflow: auto; display: flex; flex-wrap: wrap; align-content: stretch; gap: 10px; padding: 10px; background: var(--canvas); } /* --pane-h is computed in JS so N rows divide the viewport exactly; below the floor the grid scrolls rather than squashing panes into unusable slivers. */ .pane-grid > .pane-card { /* --pane-basis is set only when a fixed column count is chosen; otherwise panes fit by width as before. */ flex: 0 1 var(--pane-basis, 380px); flex-grow: var(--pane-grow, 1); min-width: 0; height: var(--pane-h, auto); max-height: var(--pane-h, none); } .pane-grid { --pane-grow: 1; } .pane-grid[style*="--pane-basis"] { --pane-grow: 0; } .pane-grid.solo { padding: 0; gap: 0; } .pane-grid.solo > .pane-card { flex: 1 1 100%; height: 100%; max-height: none; } .pane-card { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--pane-shadow); overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease; } /* header and composer share the card surface — the card is one plane */ .pane-card .thread-head, .pane-card .composer-wrap { background: var(--surface); } /* inputs sit *into* the card, so they take the recessed colour */ .pane-card .composer textarea, .pane-card .mini select, .pane-card .picker-trigger { background: var(--canvas); } .pane-card .tool { background: var(--canvas); } /* --bg-3 now sits within a hair of --surface, so subtle fills inside a pane take the recessed colour instead of disappearing into the card */ .pane-card .msg-avatar, .pane-card .chip-path { background: var(--canvas); } .pane-card:focus-within { border-color: var(--accent-dim); } /* the focused pane is the one keyboard actions target, so make it obvious */ .pane-card.is-focused { border-color: var(--accent); box-shadow: var(--pane-shadow), 0 0 0 1px var(--accent); } .pane-card.is-focused .thread-head { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); } .pane-grid.solo .pane-card.is-focused { box-shadow: none; } .pane-card.is-busy { border-color: color-mix(in srgb, var(--ok) 45%, transparent); } .pane-grid.solo .pane-card { border: 0; border-radius: 0; box-shadow: none; } /* the header is denser inside a grid cell than it was full-width */ .pane-card .thread-head { padding: 9px 12px; flex: none; } .pane-card .thread-title { gap: 6px; font-size: 13.5px; } .pane-card .messages { padding: 12px 14px 6px; flex: 1 1 auto; min-height: 0; } .pane-card .composer-wrap { padding: 6px 12px 10px; flex: none; } .pane-card .composer-bar { gap: 4px; } .pane-card .mode-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pane-close { margin-left: auto; } .pane-working { margin-left: 6px; } .pane-card .thread-title .proj-dot { margin-right: 2px; } /* ── selection checkbox ──────────────────────────────────────── */ .cbox { flex: none; width: 13px; height: 13px; margin-right: 1px; display: grid; place-items: center; border: 1px solid var(--fg-mute); border-radius: 3.5px; background: transparent; color: #fff; opacity: .45; transition: opacity .12s ease, background .12s ease, border-color .12s ease; } .cbox svg { width: 10px; height: 10px; stroke-width: 2.2; } .row:hover .cbox { opacity: 1; } .cbox:hover { border-color: var(--accent); opacity: 1; } .cbox.all, .cbox.some { opacity: 1; background: var(--accent); border-color: var(--accent); } .cbox.some { background: var(--accent); } .row.is-active .cbox { border-color: currentColor; } .row.is-active .cbox.all { background: var(--accent); border-color: var(--accent); } .panes-clear { display: flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg-3); color: var(--fg-dim); font: inherit; font-size: 10.5px; cursor: pointer; } .panes-clear:hover:not(:disabled) { color: var(--fg); border-color: var(--fg-mute); } .panes-clear:disabled { opacity: .4; cursor: default; } /* ── horizontal pane resize ──────────────────────────────────── */ .pane-xresize { position: absolute; top: 0; right: 0; z-index: 6; width: 8px; height: 100%; cursor: col-resize; background: transparent; display: flex; align-items: center; justify-content: center; } .pane-xresize::before { content: ''; width: 2px; height: 34px; border-radius: 2px; background: var(--line); opacity: 0; transition: opacity .12s ease, background .12s ease; } .pane-card:hover .pane-xresize::before { opacity: .8; } .pane-xresize:hover::before, .pane-xresize.dragging::before { opacity: 1; background: var(--accent); height: 56px; } .pane-grid.solo .pane-xresize { display: none; } .pane-card.is-sized { box-shadow: var(--pane-shadow); } .width-tag { position: absolute; top: 6px; right: 14px; z-index: 7; padding: 1px 6px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 9.5px; font-family: var(--mono); pointer-events: none; } /* ── scheme swatches ─────────────────────────────────────────── */ .set-stack { padding: 9px 0; border-top: 1px solid var(--line-soft); } .set-stack > .set-label { display: block; margin-bottom: 8px; } .swatches { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .swatch { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 1px 9px; align-items: center; padding: 7px 9px; text-align: left; cursor: pointer; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; font: inherit; color: var(--fg-dim); transition: border-color .12s ease, background .12s ease; } .swatch:hover { border-color: var(--fg-mute); background: var(--bg-3); } .swatch.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); } .swatch.live { box-shadow: inset 0 0 0 1px var(--accent); } .swatch-chips { grid-row: span 2; display: flex; } .swatch-chips i { width: 11px; height: 22px; display: block; border: 1px solid rgba(128,128,128,.35); } .swatch-chips i:first-child { border-radius: 4px 0 0 4px; border-right: 0; } .swatch-chips i:last-child { border-radius: 0 4px 4px 0; border-left: 0; } .swatch-name { font-size: 12px; color: var(--fg); } .swatch.on .swatch-name { font-weight: 600; } .swatch-hint { font-size: 10px; color: var(--fg-mute); } .ghost-btn.small { padding: 4px 10px; font-size: 11px; flex: none; } /* ── system monitor ──────────────────────────────────────────── */ .sysmon { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--fg-mute); } .sysmon-label { text-transform: uppercase; letter-spacing: .5px; } .sysmon-num { font-family: var(--mono); color: var(--fg-dim); min-width: 30px; } /* one slim vertical bar per hardware thread; scales down as the count grows */ .cpu-bars { display: flex; align-items: flex-end; gap: 1px; height: 16px; padding: 1px 2px; background: var(--bg); border: 1px solid var(--line); border-radius: 3px; } .cpu-bars i { display: block; width: clamp(1px, calc(120px / var(--n, 8)), 4px); min-height: 1px; border-radius: 1px; transition: height .4s ease, background .4s ease; } .ram-bar { display: block; width: 74px; height: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; } .ram-bar i { display: block; height: 100%; transition: width .4s ease, background .4s ease; } /* ── account ─────────────────────────────────────────────────── */ .who { display: flex; align-items: center; gap: 6px; flex: none; } .who-name { font-size: 12px; color: var(--fg); } .who-chip { display: inline-block; margin-right: 5px; padding: 1px 6px; background: var(--bg-3); border-radius: 8px; font-size: 10.5px; } .agent-badge.local { background: var(--bg-3); color: var(--fg-mute); } .device-box { margin-top: 10px; padding: 11px 12px; background: var(--bg); border: 1px solid var(--accent-dim); border-radius: 8px; } .device-step { margin: 0 0 5px; font-size: 11.5px; color: var(--fg-dim); } .device-url { display: block; margin-bottom: 10px; font-size: 11.5px; color: var(--accent); word-break: break-all; } .device-wait { margin: 0 0 10px; font-size: 11.5px; color: var(--fg-mute); font-style: italic; } .device-code { display: inline-block; margin-bottom: 10px; padding: 7px 14px; background: var(--bg-3); border: 1px dashed var(--accent); border-radius: 7px; font-size: 17px; letter-spacing: 2px; color: var(--fg); user-select: all; } .device-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .primary-btn.small { padding: 4px 12px; font-size: 11px; flex: none; } .ico-gear { width: 14px; height: 14px; stroke-width: 1.8; } /* ── sign in ─────────────────────────────────────────────────── */ .signin-screen { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--canvas); } .signin-card { width: 340px; padding: 26px 24px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); } .signin-brand { display: flex; align-items: center; gap: 9px; } .signin-brand .brand-mark { width: 16px; height: 16px; } .signin-brand .brand-name { font-size: 15px; font-weight: 600; } .signin-sub { margin: 4px 0 18px; font-size: 12px; color: var(--fg-mute); } .signin-go { width: 100%; margin-top: 4px; } .signin-hint { margin: 14px 0 0; font-size: 10.5px; line-height: 1.6; color: var(--fg-mute); } /* ── confirm dialog ──────────────────────────────────────────── */ /* A confirm can be raised *from* another modal, so it needs its own layer — equal z-index meant the settings panel (later in the DOM) painted over it. */ .ask-backdrop { z-index: 200; background: rgba(4,6,10,.5); } .modal-ask { width: 400px; box-shadow: var(--shadow), 0 0 0 1px var(--line); } .ask-body { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--fg-dim); } .primary-btn.danger { background: var(--bad); } /* ── settings shell ──────────────────────────────────────────── */ /* Fixed frame: the dialog keeps one size whatever tab is open, and the two columns scroll independently instead of the whole panel resizing. */ .modal-settings { width: min(760px, 94vw); height: min(620px, 88vh); max-height: 88vh; } .settings-shell { display: flex; gap: 16px; flex: 1 1 auto; min-height: 0; overflow: hidden; } .settings-nav { width: 156px; flex: none; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--line-soft); padding-right: 12px; min-height: 0; overflow-y: auto; } .settings-nav .nav-search { flex: none; position: sticky; top: 0; z-index: 1; } .nav-item { flex: none; } .nav-search { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 5px 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 7px; } .nav-search svg { flex: none; color: var(--fg-mute); } .nav-search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--fg); font: inherit; font-size: 11.5px; } .nav-item { text-align: left; padding: 6px 9px; border: 0; border-radius: 6px; background: none; color: var(--fg-dim); font: inherit; font-size: 12px; cursor: pointer; } .nav-item:hover { background: var(--bg-3); color: var(--fg); } .nav-item.on { background: var(--accent-dim); color: var(--accent-fg); font-weight: 500; } .nav-empty { margin: 6px 4px; font-size: 11px; color: var(--fg-mute); font-style: italic; } .settings-content { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 6px; } /* the last block shouldn't collide with the footer */ .settings-content .set-block:last-child { margin-bottom: 2px; } .pw-grid { display: flex; gap: 7px; flex-wrap: wrap; } .pw-grid input { flex: 1 1 150px; min-width: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; color: var(--fg); font: inherit; font-size: 11.5px; padding: 6px 9px; outline: none; } .pw-grid input:focus { border-color: var(--accent); } .user-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line-soft); } .user-row:first-of-type { border-top: 0; } .user-row .grow { flex: 1; } /* ── profile (bottom of the sidebar) ─────────────────────────── */ .profile { position: relative; flex: none; border-top: 1px solid var(--line); } .profile-row { width: 100%; display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 0; background: none; color: var(--fg-dim); font: inherit; text-align: left; cursor: pointer; } .profile-row:hover, .profile.open .profile-row { background: var(--bg-3); color: var(--fg); } .avatar { flex: none; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), #c084fc); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .3px; } .avatar.big { width: 34px; height: 34px; border-radius: 9px; font-size: 13px; } .profile-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; } .profile-name { font-size: 12.5px; color: var(--fg); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .profile-sub { font-size: 10px; color: var(--fg-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .prof-chev { flex: none; transition: transform .15s ease; } .profile.open .prof-chev { transform: rotate(180deg); } /* opens upward — the row sits at the bottom edge */ .profile-menu { position: absolute; bottom: calc(100% + 6px); left: 8px; right: 8px; z-index: 60; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; animation: pickerIn .12s ease-out; } .pm-head { display: flex; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid var(--line-soft); } .pm-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .pm-name { font-size: 13px; color: var(--fg); font-weight: 600; } .pm-role { font-size: 10.5px; color: var(--fg-mute); } .pm-info { padding: 8px 12px; border-bottom: 1px solid var(--line-soft); } .pm-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 11px; color: var(--fg-mute); } .pm-line b { font-weight: 500; color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ok-text { color: var(--ok) !important; } .muted-text { color: var(--fg-mute) !important; font-style: italic; } .pm-actions { padding: 5px; display: flex; flex-direction: column; gap: 1px; } .pm-item { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border: 0; border-radius: 6px; background: none; color: var(--fg-dim); font: inherit; font-size: 12px; text-align: left; cursor: pointer; } .pm-item:hover { background: var(--bg-3); color: var(--fg); } .pm-item.danger:hover { background: color-mix(in srgb, var(--bad) 15%, transparent); color: var(--bad); } .pm-item svg { flex: none; } /* ── provider row with an attached sign-in panel ─────────────── */ .provider { border-radius: 9px; transition: background .15s ease; } .provider + .provider { border-top: 1px solid var(--line-soft); } .provider.expanded { background: var(--bg); border: 1px solid var(--accent-dim); border-top-color: var(--accent-dim); padding: 0 10px 10px; margin: 6px 0; } .provider.expanded + .provider { border-top: 0; } .provider.expanded .set-row { border-top: 0; } /* attached to the row above it rather than floating at the end of the list */ .device-box.inline { margin-top: 0; border: 0; border-top: 1px dashed var(--accent-dim); border-radius: 0; padding: 11px 2px 2px; background: none; } .modal-error.inline { margin: 8px 2px 10px; } /* ── resolved folder path in the pane header ─────────────────── */ .thread-path { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 10.5px; color: var(--fg-mute); min-width: 0; overflow: hidden; } .thread-path .ico { width: 11px; height: 11px; flex: none; } .tp-abs { color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: none; max-width: 46%; } .tp-arrow { flex: none; color: var(--accent); } .tp-real { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* ── reasoning (collapsed by default) ────────────────────────── */ .think { margin: 2px 0 8px; } .think-toggle { display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px 4px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); color: var(--fg-mute); font: inherit; font-size: 11px; cursor: pointer; } .think-toggle:hover { color: var(--fg-dim); border-color: var(--fg-mute); } .think.open .think-toggle { border-color: var(--accent-dim); color: var(--fg-dim); } .think-label { font-weight: 500; } .think-meta { opacity: .7; } .think-body { margin-top: 6px; padding: 9px 11px; background: var(--bg); border-left: 2px solid var(--accent-dim); border-radius: 0 7px 7px 0; font-size: 12px; line-height: 1.6; color: var(--fg-dim); } .think-body .md-p { margin: 0 0 6px; } .think-body .md-p:last-child { margin-bottom: 0; } /* ── markdown in message bodies ──────────────────────────────── */ .msg-body.md { white-space: normal; } .md-p { margin: 0 0 9px; } .md-p:last-child { margin-bottom: 0; } .md-h { margin: 12px 0 6px; font-size: 13px; font-weight: 600; color: var(--fg); line-height: 1.35; } .md-h:first-child { margin-top: 0; } .msg-body h3.md-h { font-size: 14px; } .md-list { margin: 0 0 9px; padding-left: 20px; } .md-list li { margin: 2px 0; } .md-quote { margin: 0 0 9px; padding: 4px 10px; border-left: 2px solid var(--line); color: var(--fg-mute); } .md-hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; } .msg-body code, .think-body code { padding: 1px 5px; border-radius: 4px; background: var(--bg-3); font-family: var(--mono); font-size: .92em; } .md-code { margin: 0 0 9px; padding: 9px 11px; overflow-x: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 7px; } .md-code code { padding: 0; background: none; font-size: 11.5px; line-height: 1.55; } .md-code[data-lang]::before { content: attr(data-lang); display: block; margin-bottom: 6px; font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--fg-mute); } .msg-body a { color: var(--accent); } /* ── compact picker pill ─────────────────────────────────────── */ .picker.is-compact .picker-trigger { min-width: 0; padding: 3px 7px; gap: 4px; border-radius: 20px; font-size: 10.5px; } .picker.is-compact .picker-name { font-weight: 400; color: var(--fg-dim); max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .picker.is-compact:hover .picker-name, .picker.is-compact.is-open .picker-name { color: var(--fg); } .picker.is-compact .picker-chev { width: 10px; height: 10px; } .picker.is-compact .picker-menu { min-width: 300px; } /* permission pill takes the colour of its access level */ .picker-trigger.tone-read-only { border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); } .picker-trigger.tone-read-only .picker-name { color: var(--ok); } .picker-trigger.tone-writes { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); } .picker-trigger.tone-writes .picker-name { color: var(--warn); } .picker-trigger.tone-full { border-color: color-mix(in srgb, var(--bad) 50%, var(--line)); } .picker-trigger.tone-full .picker-name { color: var(--bad); } .compact-warn { font-size: 10px; padding-left: 2px; } .composer-bar .running-note { font-size: 10.5px; } /* ── image attachments ───────────────────────────────────────── */ .attach-strip { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 0 2px 7px; } .attach { position: relative; flex: none; } .attach img { display: block; width: 46px; height: 46px; object-fit: cover; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); } .attach-x { position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--bg-2); color: var(--fg-dim); cursor: pointer; padding: 0; } .attach-x:hover { color: var(--bad); border-color: var(--bad); } .attach-x svg { width: 9px; height: 9px; } .attach-name { display: block; max-width: 46px; margin-top: 2px; font-size: 9px; color: var(--fg-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .attach-busy, .attach-err { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--fg-mute); } .attach-err { color: var(--bad); } .attach-btn { flex: none; width: 28px; height: 28px; align-self: flex-end; display: grid; place-items: center; background: none; border: 1px solid var(--line); border-radius: 7px; color: var(--fg-mute); cursor: pointer; } .attach-btn:hover:not(:disabled) { color: var(--fg); border-color: var(--fg-mute); } .attach-btn:disabled { opacity: .4; cursor: not-allowed; } .composer.drop-active textarea { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } /* thumbnails inside the transcript */ .msg-images { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 8px; } .msg-image img { display: block; max-width: 190px; max-height: 150px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); } .msg-image:hover img { border-color: var(--accent); } /* ── image viewer ────────────────────────────────────────────── */ .lightbox { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 52px 60px 40px; background: rgba(4, 6, 10, .82); animation: pickerIn .12s ease-out; } :root[data-mode="light"] .lightbox { background: rgba(24, 30, 45, .72); } .lb-bar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: linear-gradient(rgba(0,0,0,.45), transparent); color: #e8ecf3; } .lb-name { font-size: 12px; font-weight: 500; } .lb-count { font-size: 11px; opacity: .7; font-family: var(--mono); } .lb-bar .grow { flex: 1; } .lb-btn { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; background: rgba(255,255,255,.06); color: #e8ecf3; cursor: pointer; } .lb-btn:hover { background: rgba(255,255,255,.16); } .lb-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 24px 70px rgba(0,0,0,.6); cursor: zoom-in; background: #0b0d12; } .lb-img.zoomed { max-width: none; max-height: none; cursor: zoom-out; } .lightbox:has(.lb-img.zoomed) { overflow: auto; place-items: start center; } .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 52px; display: grid; place-items: center; border: 0; border-radius: 8px; background: rgba(255,255,255,.07); color: #e8ecf3; cursor: pointer; } .lb-nav:hover { background: rgba(255,255,255,.18); } .lb-nav svg { width: 18px; height: 18px; } .lb-nav.prev { left: 12px; } .lb-nav.next { right: 12px; } /* thumbnails are buttons now, not links */ .msg-image { padding: 0; border: 0; background: none; cursor: zoom-in; line-height: 0; } /* ── mapped folder roots ─────────────────────────────────────── */ .row-label.is-root { color: var(--fg); font-weight: 500; } .root-row { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-top: 1px solid var(--line-soft); } .root-row:first-of-type { border-top: 0; } .root-row .grow { flex: 1; } .root-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .root-label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--fg); } .root-path { font-size: 10.5px; color: var(--fg-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 340px; } /* ── folder browser ──────────────────────────────────────────── */ .browse-backdrop { z-index: 120; } /* above settings, below dialogs */ .modal-browse { width: min(620px, 94vw); height: min(560px, 86vh); } .browse-nav { display: flex; align-items: center; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); } .browse-nav .icon-btn { width: 24px; height: 24px; border: 1px solid var(--line); } .browse-nav .icon-btn:disabled { opacity: .35; cursor: default; } .browse-nav .icon-btn:disabled:hover { background: none; color: var(--fg-mute); } .crumbline { flex: 1; min-width: 0; display: flex; align-items: center; gap: 1px; margin-left: 4px; overflow-x: auto; white-space: nowrap; } .crumb-seg { padding: 2px 5px; border: 0; border-radius: 4px; background: none; color: var(--fg-dim); font: inherit; font-size: 11.5px; font-family: var(--mono); cursor: pointer; } .crumb-seg:hover { background: var(--bg-3); color: var(--fg); } .crumbline .crumb-sep { color: var(--fg-mute); font-size: 11px; } .hidden-toggle { flex: none; font-size: 10.5px; gap: 4px; } .browse-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 0; } .browse-row { width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 0; border-radius: 6px; background: none; color: var(--fg-dim); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; } .browse-row:hover { background: var(--bg-3); color: var(--fg); } .browse-row .browse-go { margin-left: auto; opacity: 0; color: var(--fg-mute); } .browse-row:hover .browse-go { opacity: 1; } .browse-empty { display: flex; align-items: center; gap: 7px; padding: 16px 8px; font-size: 12px; color: var(--fg-mute); } .browse-current { display: flex; align-items: center; gap: 9px; padding: 9px 0 0; border-top: 1px solid var(--line-soft); } .browse-path { flex: 1; min-width: 0; font-size: 11.5px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── admin: per-user CLI accounts ────────────────────────────── */ .acct-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--line-soft); font-size: 11px; } .acct-row:first-of-type { border-top: 0; } .acct-row .who-name { min-width: 76px; } .home-pill { padding: 1px 8px; border-radius: 9px; cursor: pointer; border: 1px solid var(--line); background: var(--bg); color: var(--fg-mute); font: inherit; font-size: 10px; } .home-pill.shared { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); } .home-pill.isolated { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); } .home-pill:hover { border-color: var(--fg-mute); } .acct-cli { color: var(--fg-mute); } .acct-cli b { font-weight: 500; color: var(--fg-mute); } .acct-cli.on b { color: var(--ok); }