/* ── Fonts (shared across all themes) ─────────────────────────────────── */ :root { --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; --sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif; } /* ════════════════════════════════════════════════════════════════════════ THEMES — applied via data-theme on Default = purple-night (matches original design) ════════════════════════════════════════════════════════════════════════ */ /* 01 Vantablack Purple — Night */ :root, body[data-theme="purple-night"] { --bg: #0a0a0f; --bg-2: #101019; --panel: #14141f; --panel-2: #191926; --border: #262636; --border-2: #33334a; --txt: #e8e8f0; --txt-dim: #9a9ab0; --txt-faint: #61617a; --accent: #7c5cff; --accent-2: #b14cff; --accent-soft: rgba(124,92,255,0.14); --ok: #3ddc84; --warn: #ffb24c; --err: #ff5c72; --err-soft: rgba(255,92,114,0.12); --code-bg: #0d0d15; --logo-txt: #fff; --grad-1: rgba(124,92,255,0.12); --grad-2: rgba(177,76,255,0.08); } /* 01 Vantablack Purple — Day */ body[data-theme="purple-day"] { --bg: #f7f6ff; --bg-2: #eeecff; --panel: #ffffff; --panel-2: #f0edff; --border: #d8d2f8; --border-2: #c2b8f0; --txt: #0f0a2a; --txt-dim: #5a5080; --txt-faint: #9a90c0; --accent: #5c3eee; --accent-2: #8c30dd; --accent-soft: rgba(92,62,238,0.10); --ok: #1a9944; --warn: #b86000; --err: #cc1133; --err-soft: rgba(204,17,51,0.10); --code-bg: #eeecff; --logo-txt: #fff; --grad-1: rgba(92,62,238,0.07); --grad-2: rgba(140,48,221,0.05); } /* 02 Midnight Blue — Night */ body[data-theme="blue-night"] { --bg: #080c14; --bg-2: #0c1220; --panel: #0d1420; --panel-2: #121b2e; --border: #1c2a42; --border-2: #263550; --txt: #e2eaff; --txt-dim: #8a9dc0; --txt-faint: #4a5880; --accent: #1a6eff; --accent-2: #4da0ff; --accent-soft: rgba(26,110,255,0.14); --ok: #00d4aa; --warn: #ffaa33; --err: #ff4466; --err-soft: rgba(255,68,102,0.12); --code-bg: #060a12; --logo-txt: #fff; --grad-1: rgba(26,110,255,0.12); --grad-2: rgba(77,160,255,0.07); } /* 02 Midnight Blue — Day */ body[data-theme="blue-day"] { --bg: #f2f6ff; --bg-2: #e8eeff; --panel: #ffffff; --panel-2: #edf2ff; --border: #ccd8f4; --border-2: #b0c4ee; --txt: #080e22; --txt-dim: #3a5080; --txt-faint: #7a90b8; --accent: #0050dd; --accent-2: #0077ff; --accent-soft: rgba(0,80,221,0.10); --ok: #008866; --warn: #b86000; --err: #cc1144; --err-soft: rgba(204,17,68,0.10); --code-bg: #e8eeff; --logo-txt: #fff; --grad-1: rgba(0,80,221,0.07); --grad-2: rgba(0,119,255,0.05); } /* 03 Carbon Amber — Night */ body[data-theme="amber-night"] { --bg: #0a0906; --bg-2: #111009; --panel: #141210; --panel-2: #1c1916; --border: #2a2520; --border-2: #3d3528; --txt: #f0e8d8; --txt-dim: #a89060; --txt-faint: #6b5e40; --accent: #ff9900; --accent-2: #ffcc44; --accent-soft: rgba(255,153,0,0.14); --ok: #44dd88; --warn: #ffcc44; --err: #ff5533; --err-soft: rgba(255,85,51,0.12); --code-bg: #060504; --logo-txt: #1a0a00; --grad-1: rgba(255,153,0,0.10); --grad-2: rgba(255,204,68,0.06); } /* 03 Carbon Amber — Day */ body[data-theme="amber-day"] { --bg: #faf8f2; --bg-2: #f5f0e6; --panel: #ffffff; --panel-2: #f5f0e4; --border: #e5dcc8; --border-2: #d4c8aa; --txt: #1c1407; --txt-dim: #7a6844; --txt-faint: #a89060; --accent: #b86800; --accent-2: #dd9900; --accent-soft: rgba(184,104,0,0.10); --ok: #1a8a44; --warn: #b06600; --err: #cc2200; --err-soft: rgba(204,34,0,0.10); --code-bg: #f0e8d4; --logo-txt: #fff; --grad-1: rgba(184,104,0,0.07); --grad-2: rgba(221,153,0,0.05); } /* 04 Forest Emerald — Night */ body[data-theme="forest-night"] { --bg: #060d09; --bg-2: #0a1410; --panel: #0c1610; --panel-2: #101e14; --border: #182d1f; --border-2: #22402c; --txt: #daf0e2; --txt-dim: #6aa880; --txt-faint: #3a6648; --accent: #00cc66; --accent-2: #44ddcc; --accent-soft: rgba(0,204,102,0.14); --ok: #44ddcc; --warn: #ffcc00; --err: #ff4455; --err-soft: rgba(255,68,85,0.12); --code-bg: #030806; --logo-txt: #001a08; --grad-1: rgba(0,204,102,0.10); --grad-2: rgba(68,221,204,0.07); } /* 04 Forest Emerald — Day */ body[data-theme="forest-day"] { --bg: #f2faf5; --bg-2: #e4f5ea; --panel: #ffffff; --panel-2: #e8f5ec; --border: #c0e4cc; --border-2: #9ad4ae; --txt: #061a0a; --txt-dim: #2a6640; --txt-faint: #6aa880; --accent: #008844; --accent-2: #00aa66; --accent-soft: rgba(0,136,68,0.10); --ok: #007a66; --warn: #886600; --err: #bb2233; --err-soft: rgba(187,34,51,0.10); --code-bg: #e4f5ea; --logo-txt: #fff; --grad-1: rgba(0,136,68,0.07); --grad-2: rgba(0,170,102,0.05); } /* 05 Rose Slate — Night */ body[data-theme="rose-night"] { --bg: #0e0a0c; --bg-2: #160e12; --panel: #1a1216; --panel-2: #221820; --border: #33222c; --border-2: #4a303c; --txt: #f2e8ec; --txt-dim: #aa7a8a; --txt-faint: #6a4a54; --accent: #ff3a6e; --accent-2: #ff7aaa; --accent-soft: rgba(255,58,110,0.14); --ok: #33ddaa; --warn: #ffaa55; --err: #ff5566; --err-soft: rgba(255,85,102,0.12); --code-bg: #08060a; --logo-txt: #fff; --grad-1: rgba(255,58,110,0.11); --grad-2: rgba(255,122,170,0.07); } /* 05 Rose Slate — Day */ body[data-theme="rose-day"] { --bg: #fff5f8; --bg-2: #fce8ef; --panel: #ffffff; --panel-2: #fce8ef; --border: #f0ccd8; --border-2: #e0a8bc; --txt: #220a12; --txt-dim: #8a3a54; --txt-faint: #aa7a8a; --accent: #cc1150; --accent-2: #ee3380; --accent-soft: rgba(204,17,80,0.10); --ok: #1a8866; --warn: #cc6600; --err: #bb1133; --err-soft: rgba(187,17,51,0.10); --code-bg: #fce8ef; --logo-txt: #fff; --grad-1: rgba(204,17,80,0.07); --grad-2: rgba(238,51,128,0.05); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: var(--sans); color: var(--txt); background: radial-gradient(1100px 600px at 78% -10%, var(--grad-1), transparent 60%), radial-gradient(900px 500px at 0% 110%, var(--grad-2), transparent 55%), var(--bg); display: flex; flex-direction: column; height: 100vh; overflow: hidden; -webkit-font-smoothing: antialiased; transition: background 0.25s ease, color 0.25s ease; } /* ── Layout ─────────────────────────────────────────────────────────────── */ .body-wrap { display: flex; flex: 1; min-height: 0; overflow: hidden; } .cw { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; } /* ── Sidebar ─────────────────────────────────────────────────────────────── */ #sidebar { width: 220px; flex-shrink: 0; background: var(--bg-2); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; transition: width 0.2s ease, opacity 0.2s ease; } body.sb-collapsed #sidebar { width: 0; opacity: 0; pointer-events: none; } .sb-toggle { background: none; border: none; color: var(--txt-dim); cursor: pointer; padding: 6px; border-radius: 7px; display: flex; align-items: center; transition: color 0.12s, background 0.12s; flex-shrink: 0; } .sb-toggle:hover { color: var(--txt); background: var(--accent-soft); } .sb-new { display: flex; align-items: center; gap: 8px; margin: 10px 8px 8px; padding: 9px 12px; border-radius: 9px; cursor: pointer; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent); font-size: 13px; font-weight: 600; font-family: var(--sans); transition: all 0.13s; } .sb-new:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); } .sb-new svg { flex-shrink: 0; } .sb-kbd { margin-left: auto; font-size: 10px; font-family: var(--mono); color: color-mix(in srgb, var(--accent) 60%, transparent); font-weight: 400; } .sb-list { flex: 1; overflow-y: auto; padding: 0 8px 12px; } .sb-list::-webkit-scrollbar { width: 4px; } .sb-list::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; } .sb-group-label { font-size: 9.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--txt-faint); padding: 12px 6px 4px; } .sb-item { padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: background 0.12s; margin-bottom: 1px; } .sb-item:hover { background: var(--panel); } .sb-item.active { background: var(--accent-soft); border: 1px solid var(--accent-soft); } .sb-item-title { font-size: 12.5px; color: var(--txt); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; } .sb-item.active .sb-item-title { color: var(--accent); } .sb-item-meta { font-size: 10.5px; color: var(--txt-faint); font-family: var(--mono); margin-top: 2px; } .sb-empty { font-size: 12px; color: var(--txt-faint); padding: 16px 8px; line-height: 1.6; } /* ── Header ─────────────────────────────────────────────────────────────── */ header { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); background: color-mix(in srgb, var(--bg-2) 75%, transparent); backdrop-filter: blur(20px); z-index: 5; flex-shrink: 0; } .brand { display: flex; align-items: center; gap: 11px; } .logo { width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 40%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); position: relative; } .logo::after { content: ""; position: absolute; inset: 8px; border-radius: 3px; background: rgba(0,0,0,0.5); } .wordmark { font-weight: 650; font-size: 17px; letter-spacing: -0.02em; } .wordmark span { color: var(--txt-faint); font-weight: 400; } .spacer { flex: 1; } .pills { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; } .pill { font-size: 11.5px; font-weight: 500; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border-2); color: var(--txt-dim); display: flex; align-items: center; gap: 6px; background: var(--panel); } .pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--txt-faint); } .pill.on { color: var(--txt); border-color: rgba(61, 220, 132, 0.4); } .pill.on .dot { background: var(--ok); box-shadow: 0 0 8px var(--ok); } /* ── Theme picker ───────────────────────────────────────────────────────── */ .theme-btn { position: relative; } .theme-popover { display: none; position: absolute; top: calc(100% + 8px); right: 0; background: var(--panel); border: 1px solid var(--border-2); border-radius: 14px; padding: 14px; width: 264px; z-index: 200; box-shadow: 0 8px 32px rgba(0,0,0,0.4); } .theme-popover.open { display: block; } .tp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .tp-title { font-size: 12px; font-weight: 600; color: var(--txt-dim); letter-spacing: 0.06em; text-transform: uppercase; } .tp-mode-toggle { display: flex; align-items: center; gap: 6px; background: var(--panel-2); border: 1px solid var(--border-2); border-radius: 20px; padding: 4px 10px; cursor: pointer; color: var(--txt-dim); font-size: 11px; font-family: var(--sans); transition: all 0.15s; } .tp-mode-toggle:hover { color: var(--txt); border-color: var(--accent); } .tp-mode-ico { font-size: 12px; } .tp-palettes { display: flex; flex-direction: column; gap: 6px; } .tp-pal { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px; cursor: pointer; background: transparent; border: 1px solid transparent; color: var(--txt); font-family: var(--sans); width: 100%; transition: all 0.13s; } .tp-pal:hover { background: var(--panel-2); border-color: var(--border); } .tp-pal.active { background: var(--accent-soft); border-color: var(--accent); } .tp-swatch { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.12); } .tp-pal .tp-swatch:nth-child(2) { margin-left: -6px; } .tp-pal .tp-swatch:nth-child(3) { margin-left: -6px; } .tp-name { font-size: 13px; font-weight: 500; margin-left: 4px; } /* header needs position:relative for the popover */ header { position: relative; } /* ── Conversation thread ────────────────────────────────────────────────── */ main { flex: 1; overflow-y: auto; padding: 30px 0 24px; scroll-behavior: smooth; } .thread { max-width: 820px; margin: 0 auto; padding: 0 22px; display: flex; flex-direction: column; gap: 28px; } .welcome { text-align: center; margin-top: 8vh; color: var(--txt-dim); } .welcome h1 { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; color: var(--txt); margin-bottom: 10px; } .welcome h1 b { background: linear-gradient(120deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .welcome p { font-size: 14.5px; line-height: 1.6; max-width: 460px; margin: 0 auto; } .examples { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; margin-top: 8px; } .example { font-size: 12px; padding: 8px 14px; border-radius: 10px; cursor: pointer; border: 1px solid var(--border-2); background: var(--panel); color: var(--txt-dim); transition: all 0.2s; font-family: var(--mono); box-shadow: 0 2px 8px rgba(0,0,0,0.08); } .example::before { content: "/ "; color: var(--accent); font-weight: 700; } .example:hover { border-color: var(--accent); color: var(--txt); background: var(--accent-soft); transform: translateY(-1px); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 14%, transparent); } /* ── Messages ───────────────────────────────────────────────────────────── */ .msg { display: flex; flex-direction: column; gap: 5px; animation: rise 0.22s ease; position: relative; } @keyframes rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } .msg .who { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--txt-faint); text-transform: uppercase; } .msg.user { align-items: flex-end; } .msg.user .bubble { background: var(--accent-soft); border: 1px solid rgba(124, 92, 255, 0.3); border-radius: 14px 14px 4px 14px; padding: 11px 15px; max-width: 80%; font-family: var(--mono); font-size: 13.5px; white-space: pre-wrap; } .msg.assistant .bubble { width: 100%; } .route-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--txt-faint); font-family: var(--mono); margin-bottom: 2px; } .route-tag b { color: var(--accent); font-weight: 600; } .mem-tag { display: inline-flex; align-items: center; font-size: 11px; color: var(--txt-faint); font-family: var(--mono); margin-bottom: 4px; cursor: help; width: fit-content; } .usage-tag { font-size: 11px; color: var(--txt-faint); font-family: var(--mono); margin-top: 4px; } /* ── Tool call blocks ───────────────────────────────────────────────────── */ .tool-calls-container { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; } .tool-call-row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-family: var(--mono); padding: 5px 10px; border-radius: 8px; background: var(--panel); border: 1px solid var(--border); color: var(--txt-dim); max-width: 600px; } .tool-call-row.loading { border-color: var(--accent-2); animation: tool-pulse 1.4s ease-in-out infinite; } .tool-call-row.done { border-color: var(--ok, #4ade80); } .tc-icon { flex-shrink: 0; } .tc-name { color: var(--accent); font-weight: 600; } .tc-args { color: var(--txt-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; } .tc-result { color: var(--txt-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; } @keyframes tool-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* ── Slash autocomplete dropdown ────────────────────────────────────────── */ .slash-ac { display: none; position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--border-2); border-radius: 12px; overflow: hidden; box-shadow: 0 -8px 32px rgba(0,0,0,0.4); z-index: 200; max-height: 320px; overflow-y: auto; } .ac-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer; transition: background 0.1s; } .ac-item:hover, .ac-item.selected { background: var(--panel); } .ac-cmd { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--accent); white-space: nowrap; min-width: 90px; } .ac-desc { font-size: 12px; color: var(--txt-dim); line-height: 1.3; } .composer { position: relative; } /* ── Message action bar ─────────────────────────────────────────────────── */ .msg-actions { display: flex; gap: 5px; margin-top: 2px; opacity: 0; transition: opacity 0.15s; pointer-events: none; } .msg:hover .msg-actions { opacity: 1; pointer-events: auto; } .msg.user .msg-actions { justify-content: flex-end; } .act { background: var(--panel); border: 1px solid var(--border); color: var(--txt-faint); border-radius: 7px; padding: 3px 9px; font-size: 11.5px; cursor: pointer; font-family: var(--mono); transition: all 0.12s; white-space: nowrap; line-height: 1.6; } .act:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .act.ok { color: var(--ok); border-color: var(--ok); } /* ── Fork divider ───────────────────────────────────────────────────────── */ .fork-divider { display: flex; align-items: center; gap: 10px; color: var(--accent); font-size: 11.5px; font-family: var(--mono); font-weight: 600; padding: 8px 0; } .fork-divider::before, .fork-divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(124,92,255,0.4), transparent); } /* ── Rich text (bubble content) ─────────────────────────────────────────── */ .bubble { font-size: 14.5px; line-height: 1.7; color: var(--txt); } /* Headings — clear visual hierarchy */ .bubble h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--txt); margin: 28px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .bubble h2 { font-size: 18px; font-weight: 680; letter-spacing: -0.015em; background: linear-gradient(120deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin: 28px 0 10px; } .bubble h3 { font-size: 15.5px; font-weight: 650; color: var(--txt); margin: 22px 0 8px; letter-spacing: -0.01em; } .bubble h4 { font-size: 13px; font-weight: 650; color: var(--txt-dim); text-transform: uppercase; letter-spacing: 0.06em; margin: 18px 0 6px; } /* First heading in a response needs no extra top margin */ .bubble > h1:first-child, .bubble > h2:first-child, .bubble > h3:first-child { margin-top: 4px; } /* Paragraphs */ .bubble p { margin: 0 0 12px; } .bubble p:last-child { margin-bottom: 0; } /* Lists */ .bubble ul, .bubble ol { margin: 4px 0 14px; padding-left: 26px; } .bubble li { margin: 6px 0; line-height: 1.65; } .bubble li > ul, .bubble li > ol { margin: 4px 0 4px; } /* Inline elements */ .bubble strong { color: var(--txt); font-weight: 650; } .bubble em { color: var(--txt-dim); font-style: italic; } .bubble s { color: var(--txt-faint); } .bubble a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .bubble a:hover { color: var(--accent-2); } /* Inline code */ .bubble code:not(pre code) { font-family: var(--mono); font-size: 0.87em; background: var(--code-bg); border: 1px solid var(--border); padding: 1px 6px; border-radius: 5px; color: #e0c4ff; } /* Code blocks */ .bubble pre { background: var(--code-bg); border: 1px solid var(--border); border-radius: 11px; padding: 14px 16px; overflow-x: auto; margin: 0 0 14px; position: relative; } .bubble pre code { font-family: var(--mono); font-size: 12.8px; line-height: 1.6; color: #d7d7ea; } .bubble pre .lang { position: absolute; top: 9px; right: 12px; font-size: 10.5px; color: var(--txt-faint); text-transform: uppercase; letter-spacing: 0.05em; } /* Horizontal rule */ .bubble hr { border: 0; margin: 22px 0; height: 1px; background: linear-gradient(90deg, transparent, var(--border-2), transparent); } /* Blockquote */ .bubble blockquote { border-left: 3px solid var(--accent); margin: 12px 0; padding: 8px 14px; background: var(--accent-soft); border-radius: 0 8px 8px 0; color: var(--txt-dim); font-style: italic; } .bubble blockquote p { margin-bottom: 0; } /* Streaming cursor */ .cursor::after { content: "▋"; color: var(--accent); animation: blink 1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } /* ── Spend panel ────────────────────────────────────────────────────────── */ #spendOverlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); backdrop-filter: blur(3px); } .spend-card { width: min(560px, 92vw); max-height: 82vh; overflow-y: auto; background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; box-shadow: 0 24px 70px rgba(0,0,0,0.5); } .spend-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; } .spend-head .dim { color: var(--txt-faint); font-size: 11.5px; } .spend-close { background: var(--panel); border: 1px solid var(--border); color: var(--txt); border-radius: 7px; width: 28px; height: 28px; cursor: pointer; flex: none; } .spend-close:hover { border-color: var(--accent); color: var(--accent); } .spend-sec { margin-top: 16px; } .spend-sec-h { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--txt-faint); margin-bottom: 8px; } .spend-row { margin-bottom: 9px; } .spend-row-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 3px; } .spend-bar { height: 5px; background: var(--panel); border-radius: 3px; overflow: hidden; } .spend-bar > i { display: block; height: 100%; background: var(--accent); } .spend-line { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; padding: 4px 0; border-bottom: 1px solid var(--border); } .spend-line:last-child { border-bottom: none; } .feat-chip { font-size: 10.5px; color: var(--accent); border: 1px solid var(--accent); border-radius: 4px; padding: 1px 5px; text-transform: capitalize; } .mono { font-family: var(--mono); } /* ── Agent panel ────────────────────────────────────────────────────────── */ .agent-panel { border: 1px solid var(--border-2); border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, var(--panel-2), var(--panel)); box-shadow: 0 8px 40px rgba(0,0,0,0.35); } .ap-head { padding: 14px 17px; border-bottom: 1px solid var(--border); } .ap-title { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 14px; } .ap-title .badge { font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(124,92,255,0.3); letter-spacing: 0.03em; } .ap-summary { font-size: 12.5px; color: var(--txt-dim); margin-top: 7px; line-height: 1.5; } .progress { height: 4px; background: var(--border); border-radius: 999px; margin-top: 12px; overflow: hidden; } .progress > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 999px; transition: width 0.4s ease; } .ap-pct { font-size: 11px; color: var(--txt-faint); margin-top: 5px; font-family: var(--mono); } .subtasks { padding: 6px 0; } .st-row { display: flex; align-items: flex-start; gap: 11px; padding: 9px 17px; font-size: 13px; border-bottom: 1px solid rgba(38,38,54,0.5); } .st-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .st-row:last-child { border-bottom: 0; } .st-icon { width: 18px; text-align: center; flex-shrink: 0; } .st-icon .spin { display: inline-block; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--accent-soft); border-top-color: var(--accent); animation: rot 0.7s linear infinite; } @keyframes rot { to { transform: rotate(360deg); } } .st-title { color: var(--txt); } .st-row.pending .st-title { color: var(--txt-faint); } .st-row.failed .st-title { color: var(--err); } .st-meta { font-family: var(--mono); font-size: 11px; color: var(--txt-faint); display: flex; gap: 9px; flex-wrap: wrap; } .st-files { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; } .st-file { font-family: var(--mono); font-size: 10px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border); color: var(--txt-dim); max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .st-file.written { border-color: var(--ok); color: var(--ok); background: rgba(61,220,132,0.07); } .st-file.patched { border-color: var(--warn); color: var(--warn); background: rgba(255,178,76,0.07); } .st-chip { padding: 2px 7px; border-radius: 5px; background: var(--panel); border: 1px solid var(--border); } .st-chip.agent { color: var(--accent); border-color: var(--accent); text-transform: capitalize; } .ap-final { padding: 16px 17px; border-top: 1px solid var(--border); } .ap-final .ap-final-head { font-size: 11.5px; font-weight: 600; color: var(--txt-faint); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; display: flex; gap: 9px; align-items: center; } .cost { color: var(--ok); font-family: var(--mono); } /* ── Composer ───────────────────────────────────────────────────────────── */ footer { padding: 12px 22px 18px; border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); background: color-mix(in srgb, var(--bg-2) 75%, transparent); backdrop-filter: blur(20px); } .composer { max-width: 820px; margin: 0 auto; } .cmd-hints { display: flex; gap: 6px; margin-bottom: 9px; flex-wrap: wrap; align-items: center; } .cmd-hint { font-family: var(--mono); font-size: 11px; padding: 3px 9px; border-radius: 7px; border: 1px solid var(--border); color: var(--txt-faint); cursor: pointer; background: var(--panel); transition: all 0.13s; } .cmd-hint:hover { border-color: var(--accent); color: var(--accent); } .input-wrap { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border-2); border-radius: 16px; padding: 0; overflow: hidden; transition: border-color 0.2s, box-shadow 0.3s; box-shadow: 0 4px 20px rgba(0,0,0,0.15); } .input-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), 0 8px 32px color-mix(in srgb, var(--accent) 12%, transparent), 0 4px 20px rgba(0,0,0,0.15); } /* Image preview strip */ .image-preview-bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 4px; border-bottom: 1px solid var(--border); } .img-thumb { position: relative; width: 56px; height: 56px; border-radius: 7px; overflow: hidden; flex-shrink: 0; background: var(--surface); border: 1px solid var(--border); } .img-thumb img { width: 100%; height: 100%; object-fit: cover; } .img-thumb-rm { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: rgba(0,0,0,0.7); border: 0; color: #fff; font-size: 10px; cursor: pointer; display: grid; place-items: center; line-height: 1; } /* Inner row: textarea + action buttons */ .input-row { display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 16px; } textarea { flex: 1; background: transparent; border: 0; resize: none; color: var(--txt); font-family: var(--sans); font-size: 14.5px; line-height: 1.5; max-height: 180px; outline: none; padding: 6px 0; } textarea::placeholder { color: var(--txt-faint); } /* Attach button */ .attach-btn { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--border); cursor: pointer; flex-shrink: 0; background: transparent; color: var(--txt-dim); display: grid; place-items: center; transition: border-color 0.15s, color 0.15s; } .attach-btn svg { width: 16px; height: 16px; } .attach-btn:hover { border-color: var(--accent); color: var(--accent); } .attach-btn.has-images { border-color: var(--accent-2); color: var(--accent-2); } /* Send button */ .send { width: 38px; height: 38px; border-radius: 11px; border: 0; cursor: pointer; flex-shrink: 0; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: white; display: grid; place-items: center; transition: transform 0.15s, opacity 0.15s, box-shadow 0.2s; box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 40%, transparent); } .send:hover { transform: translateY(-2px); box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 55%, transparent); } .send:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } .send svg { width: 18px; height: 18px; } /* Stop state */ .send.is-stop { background: var(--err-soft); border: 1px solid var(--err); color: var(--err); } .send.is-stop:hover { background: rgba(255,92,114,0.2); transform: none; } /* Mic button */ .mic-btn { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--border); cursor: pointer; flex-shrink: 0; background: var(--panel); color: var(--txt-dim); display: grid; place-items: center; transition: border-color 0.15s, color 0.15s, background 0.15s; } .mic-btn svg { width: 16px; height: 16px; } .mic-btn:hover { border-color: var(--accent); color: var(--accent); } .mic-btn.recording { border-color: var(--err); color: var(--err); background: var(--err-soft); animation: mic-pulse 1s ease-in-out infinite; } @keyframes mic-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 92, 114, 0.4); } 50% { box-shadow: 0 0 0 6px rgba(255, 92, 114, 0); } } .hint-row { font-size: 11px; color: var(--txt-faint); margin-top: 8px; text-align: center; } kbd { font-family: var(--mono); background: var(--panel); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; font-size: 10.5px; } /* ── OS Dashboard (welcome screen) ─────────────────────────────────────── */ @keyframes sv-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .welcome { width: 100%; text-align: left; margin-top: 0; color: var(--txt); } .welcome > * { animation: sv-rise 0.4s ease both; } .welcome > *:nth-child(1) { animation-delay: 0.05s; } .welcome > *:nth-child(2) { animation-delay: 0.12s; } .welcome > *:nth-child(3) { animation-delay: 0.18s; } .welcome > *:nth-child(4) { animation-delay: 0.24s; } .welcome > *:nth-child(5) { animation-delay: 0.30s; } .welcome > *:nth-child(6) { animation-delay: 0.36s; } .welcome > *:nth-child(7) { animation-delay: 0.42s; } .welcome > *:nth-child(8) { animation-delay: 0.48s; } /* Accent top rule */ .os-topline { height: 2px; margin-bottom: 0; background: linear-gradient(90deg, transparent 0%, var(--accent) 30%, var(--accent-2) 70%, transparent 100%); background-size: 200%; box-shadow: 0 0 28px var(--accent), 0 0 60px color-mix(in srgb, var(--accent) 30%, transparent); animation: topline-shift 5s ease-in-out infinite; } @keyframes topline-shift { 0%, 100% { background-position: 0%; } 50% { background-position: 100%; } } .os-hero { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 32px 0 32px; border-bottom: 1px solid var(--border); margin-bottom: 0; position: relative; overflow: hidden; } .os-hero::before { content: ""; position: absolute; top: -40px; left: -60px; right: -60px; bottom: -20px; background: radial-gradient(ellipse 80% 120% at 12% 50%, var(--grad-1), transparent 55%), radial-gradient(ellipse 50% 80% at 90% 50%, var(--grad-2), transparent 65%); pointer-events: none; z-index: 0; animation: hero-drift 10s ease-in-out infinite alternate; } @keyframes hero-drift { from { opacity: 0.75; transform: scale(1) translateX(0); } to { opacity: 1; transform: scale(1.06) translateX(-1.5%); } } .os-hero-left { flex: 1; position: relative; z-index: 1; min-width: 0; } .os-title { font-size: 64px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; background: linear-gradient(130deg, #fff 10%, var(--accent) 55%, var(--accent-2) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 10px; filter: drop-shadow(0 0 40px color-mix(in srgb, var(--accent) 30%, transparent)); } .os-title span { -webkit-text-fill-color: var(--txt-dim); font-weight: 400; font-size: 0.38em; letter-spacing: 0em; display: block; margin-top: 6px; font-family: var(--mono); } .os-tagline { font-size: 11.5px; color: var(--txt-faint); font-family: var(--mono); line-height: 1.7; } .os-tagline::before { content: "$ "; color: var(--accent); } /* Hero stats grid — 4 numbers replacing single count */ .os-hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex-shrink: 0; position: relative; z-index: 1; } .os-hstat { background: color-mix(in srgb, var(--accent) 7%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: 14px; padding: 14px 20px; text-align: center; min-width: 92px; transition: box-shadow 0.25s, transform 0.2s, border-color 0.2s; backdrop-filter: blur(8px); } .os-hstat:hover { box-shadow: 0 0 28px color-mix(in srgb, var(--accent) 20%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); transform: translateY(-2px); } .os-hstat-n { font-size: 36px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-variant-numeric: tabular-nums; } .os-hstat-l { font-size: 9.5px; color: var(--txt-faint); font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 5px; } /* System status bar */ .os-sys-status { display: flex; align-items: center; gap: 0; font-family: var(--mono); font-size: 10.5px; color: var(--txt-faint); border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); border-radius: 10px; padding: 8px 0; margin-bottom: 28px; overflow-x: auto; white-space: nowrap; background: color-mix(in srgb, var(--panel) 50%, transparent); backdrop-filter: blur(8px); } .oss-item { display: flex; align-items: center; gap: 6px; padding: 0 14px; } .oss-item:not(:first-child) { border-left: 1px solid var(--border); } .oss-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px var(--ok); flex-shrink: 0; animation: prod-pulse 2.4s ease-in-out infinite; } .oss-dot.warn { background: var(--warn); box-shadow: 0 0 6px var(--warn); } .oss-val { color: var(--txt); } .oss-accent { color: var(--accent); } .os-section-label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; color: var(--txt-faint); text-transform: uppercase; margin: 32px 0 16px; display: flex; align-items: center; gap: 10px; } .os-section-label::before { content: ""; display: block; flex-shrink: 0; width: 20px; height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 2px; box-shadow: 0 0 10px var(--accent), 0 0 20px color-mix(in srgb, var(--accent) 40%, transparent); } .os-section-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); } /* Pipeline — circle node track */ .os-pipeline { display: flex; align-items: flex-start; gap: 0; position: relative; padding: 18px 0 8px; } .os-pipe-track { position: absolute; top: 42px; left: 7%; right: 7%; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--accent) 25%, var(--accent-2) 75%, transparent 100%); background-size: 300% 100%; animation: pipe-flow 5s linear infinite; opacity: 0.55; border-radius: 2px; } @keyframes pipe-flow { from { background-position: 100% 0; } to { background-position: -200% 0; } } .os-pn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 9px; position: relative; z-index: 1; cursor: default; } .os-pn-dot { width: 62px; height: 62px; border-radius: 50%; background: color-mix(in srgb, var(--c, var(--accent)) 14%, var(--bg-2)); border: 2px solid var(--c, var(--accent)); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c, var(--accent)) 10%, transparent), 0 0 24px color-mix(in srgb, var(--c, var(--accent)) 30%, transparent); display: flex; align-items: center; justify-content: center; transition: box-shadow 0.25s, transform 0.2s; } .os-pn:hover .os-pn-dot { box-shadow: 0 0 0 12px color-mix(in srgb, var(--c, var(--accent)) 16%, transparent), 0 0 56px color-mix(in srgb, var(--c, var(--accent)) 60%, transparent); transform: translateY(-4px) scale(1.08); } .os-pn-dot span { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--c, var(--accent)); } .os-pn-label { font-size: 12.5px; font-weight: 650; color: var(--txt); text-align: center; transition: color 0.15s; } .os-pn:hover .os-pn-label { color: var(--c, var(--accent)); } .os-pn-sub { font-size: 10px; color: var(--txt-faint); text-align: center; line-height: 1.4; max-width: 82px; font-family: var(--mono); } /* Agent roster */ .os-agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; } .os-agent { background: linear-gradient(160deg, color-mix(in srgb, var(--c, var(--accent)) 9%, var(--panel)) 0%, var(--panel) 60%); border: 1px solid color-mix(in srgb, var(--border) 70%, var(--c, var(--accent)) 30%); border-top: 2px solid var(--c, var(--accent)); border-radius: 12px; padding: 16px 15px 13px; box-shadow: 0 4px 16px rgba(0,0,0,0.12), inset 0 1px 0 color-mix(in srgb, var(--c, var(--accent)) 15%, transparent); transition: box-shadow 0.25s, transform 0.2s, border-color 0.2s; position: relative; overflow: hidden; } .os-agent::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse 60% 50% at 50% -10%, color-mix(in srgb, var(--c, var(--accent)) 10%, transparent), transparent); pointer-events: none; } .os-agent:hover { box-shadow: 0 12px 40px color-mix(in srgb, var(--c, var(--accent)) 22%, transparent), 0 0 0 1px color-mix(in srgb, var(--c, var(--accent)) 40%, transparent), inset 0 1px 0 color-mix(in srgb, var(--c, var(--accent)) 25%, transparent); transform: translateY(-3px); border-color: color-mix(in srgb, var(--c, var(--accent)) 60%, transparent); } .os-agent-name { font-size: 13px; font-weight: 700; color: var(--txt); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; line-height: 1.3; } .os-agent-desc { font-size: 11px; color: var(--txt-dim); line-height: 1.6; margin-bottom: 10px; } .os-tags { display: flex; flex-wrap: wrap; gap: 5px; } .os-tags span { font-size: 9.5px; font-family: var(--mono); padding: 2px 8px; border-radius: 5px; background: color-mix(in srgb, var(--c, var(--accent)) 10%, transparent); border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 30%, transparent); color: var(--c, var(--accent)); letter-spacing: 0.04em; font-weight: 500; } /* Products row */ .os-products { display: flex; gap: 8px; flex-wrap: wrap; } .os-prod { flex: 1; min-width: 100px; background: linear-gradient(160deg, var(--panel-2) 0%, var(--panel) 100%); border: 1px solid var(--border); border-radius: 12px; padding: 16px 14px 14px; text-align: center; transition: background 0.2s, border-color 0.2s, box-shadow 0.25s, transform 0.2s; position: relative; overflow: hidden; } .os-prod::before { content: ""; position: absolute; top: 10px; right: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px var(--ok); animation: prod-pulse 2.4s ease-in-out infinite; } @keyframes prod-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 5px var(--ok); } 50% { opacity: 0.55; box-shadow: 0 0 12px var(--ok); } } .os-prod:hover { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 8%, var(--panel-2)) 0%, var(--panel-2) 100%); border-color: color-mix(in srgb, var(--accent) 50%, transparent); box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 14%, transparent); transform: translateY(-2px); } .os-prod-name { font-size: 15px; font-weight: 650; color: var(--txt); margin-bottom: 4px; } .os-prod-type { font-size: 11px; color: var(--accent); font-family: var(--mono); opacity: 0.8; } /* ── Visual presentation blocks (```html rendered live) ─────────────────── */ .pres-block { width: 100%; margin: 10px 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--txt); } .pres-block * { box-sizing: border-box; } /* ── Diff blocks (```diff rendered with Accept/Reject) ──────────────────── */ .diff-block { border: 1px solid var(--border); border-radius: 11px; overflow: hidden; margin: 0 0 14px; background: var(--code-bg); font-family: var(--mono); font-size: 12.5px; } .diff-hbar { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 7px 14px; background: var(--panel); border-bottom: 1px solid var(--border); flex-wrap: wrap; } .diff-path { font-size: 11px; color: var(--txt-faint); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .diff-btns { display: flex; gap: 6px; flex-shrink: 0; } .diff-accept, .diff-reject { font-size: 11px; padding: 3px 11px; border-radius: 6px; cursor: pointer; font-family: var(--mono); border: 1px solid; transition: all 0.12s; } .diff-accept { background: rgba(61,220,132,.1); color: var(--ok); border-color: rgba(61,220,132,.4); } .diff-accept:hover:not(:disabled) { background: rgba(61,220,132,.2); } .diff-reject { background: var(--err-soft); color: var(--err); border-color: rgba(255,92,114,.4); } .diff-reject:hover:not(:disabled) { background: rgba(255,92,114,.2); } .diff-accept:disabled, .diff-reject:disabled { opacity: 0.45; cursor: not-allowed; } .diff-status { font-size: 11px; padding: 2px 8px; border-radius: 5px; white-space: nowrap; } .diff-status.applied { color: var(--ok); } .diff-status.rejected { color: var(--txt-faint); } .diff-status.error { color: var(--err); } .diff-pre { padding: 10px 0; overflow-x: auto; margin: 0; border: none; background: transparent; border-radius: 0; } .diff-pre code { display: block; line-height: 1.55; } .diff-add { display: block; background: rgba(61,220,132,.08); color: #4ade80; padding: 0 16px; } .diff-rem { display: block; background: rgba(255,92,114,.08); color: #f87171; padding: 0 16px; } .diff-hunk { display: block; color: #38bdf8; padding: 0 16px; } .diff-hdr { display: block; color: var(--txt-faint); padding: 0 16px; } .diff-ctx { display: block; color: var(--txt-dim); padding: 0 16px; } /* ── Scrollbars ─────────────────────────────────────────────────────────── */ main::-webkit-scrollbar { width: 9px; } main::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 9px; border: 2px solid var(--bg); } .bubble pre::-webkit-scrollbar { height: 7px; } .bubble pre::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 9px; } /* ── Header action buttons (terminal / preview toggles) ─────────────────── */ .hdr-btn { background: var(--panel); border: 1px solid var(--border); color: var(--txt-dim); border-radius: 8px; width: 32px; height: 32px; cursor: pointer; font-size: 15px; display: grid; place-items: center; transition: all 0.13s; flex-shrink: 0; } .hdr-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .hdr-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } /* ── Open Brain toggle ──────────────────────────────────────────────────── */ .open-brain-btn { width: auto; padding: 0 11px; gap: 7px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em; font-family: var(--sans); } .open-brain-btn .ob-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--txt-faint); flex-shrink: 0; transition: all 0.18s; } .open-brain-btn.on { border-color: var(--ok); color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); } .open-brain-btn.on .ob-dot { background: var(--ok); box-shadow: 0 0 8px var(--ok), 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); animation: prod-pulse 2.4s ease-in-out infinite; } @media (max-width: 720px) { .open-brain-btn .ob-label { display: none; } } #sv-toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(12px); background: var(--panel-2); border: 1px solid var(--border-2); color: var(--txt); padding: 10px 16px; border-radius: 10px; font-size: 12.5px; font-family: var(--sans); box-shadow: 0 8px 30px rgba(0,0,0,0.35); z-index: 9999; max-width: 80vw; opacity: 0; pointer-events: none; transition: opacity 0.22s, transform 0.22s; backdrop-filter: blur(12px); } #sv-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ── Sidebar tabs ───────────────────────────────────────────────────────── */ .sb-tabs { display: flex; gap: 4px; padding: 6px 8px 0; border-bottom: 1px solid var(--border); flex-shrink: 0; } .sb-tab { flex: 1; padding: 6px 0; border-radius: 7px 7px 0 0; border: none; background: none; color: var(--txt-faint); font-size: 10.5px; font-weight: 600; font-family: var(--sans); cursor: pointer; letter-spacing: 0.02em; transition: color 0.12s, background 0.12s; border-bottom: 2px solid transparent; margin-bottom: -1px; } .sb-tab:hover { color: var(--txt-dim); } .sb-tab.active { color: var(--accent); border-bottom-color: var(--accent); } .sb-panel { display: flex; flex-direction: column; flex: 1; overflow: hidden; } /* ── Guide panel ─────────────────────────────────────────────────────────── */ .guide-scroll { overflow-y: auto; flex: 1; padding: 10px 8px 16px; } .guide-scroll::-webkit-scrollbar { width: 4px; } .guide-scroll::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; } .guide-section { margin-bottom: 18px; } .guide-sh { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--txt-faint); padding: 0 4px; margin-bottom: 7px; display: flex; align-items: center; gap: 7px; } .guide-sh::before { content: ""; display: block; width: 10px; height: 1.5px; flex-shrink: 0; background: var(--accent); border-radius: 2px; } .guide-item { padding: 7px 8px; border-radius: 8px; cursor: pointer; margin-bottom: 2px; transition: background 0.12s; } .guide-item:hover { background: var(--panel); } .guide-cmd { font-family: var(--mono); font-size: 12px; color: var(--accent); font-weight: 600; display: block; margin-bottom: 2px; } .guide-desc { font-size: 10.5px; color: var(--txt-dim); line-height: 1.4; } .guide-tip { font-size: 10.5px; color: var(--txt-dim); padding: 7px 9px; border-left: 2px solid var(--border-2); border-radius: 0 7px 7px 0; margin-bottom: 5px; line-height: 1.5; } .guide-tip strong { color: var(--txt); font-weight: 600; } .guide-tip code { font-family: var(--mono); font-size: 10px; color: var(--accent); background: var(--accent-soft); padding: 1px 4px; border-radius: 4px; } .guide-tip.bad { border-left-color: var(--err); color: var(--txt-faint); } .guide-tip.good { border-left-color: var(--ok); } .guide-eg { font-family: var(--mono); font-size: 10px; color: var(--txt-dim); padding: 6px 9px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 7px; margin-bottom: 5px; cursor: pointer; line-height: 1.5; transition: border-color 0.12s, color 0.12s, background 0.12s; display: block; } .guide-eg:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } /* ── Project selector (file tree panel) ─────────────────────────────────── */ .sb-proj-sel { padding: 8px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .sb-proj-sel select, .term-proj-sel, .prev-port-sel { width: 100%; background: var(--panel); border: 1px solid var(--border); color: var(--txt); border-radius: 7px; padding: 5px 8px; font-size: 12px; font-family: var(--mono); cursor: pointer; outline: none; transition: border-color 0.12s; } .sb-proj-sel select:hover, .term-proj-sel:hover, .prev-port-sel:hover { border-color: var(--border-2); } .sb-proj-sel select:focus, .term-proj-sel:focus, .prev-port-sel:focus { border-color: var(--accent); } /* ── File tree ──────────────────────────────────────────────────────────── */ .file-tree { flex: 1; overflow-y: auto; padding: 6px 0; font-family: var(--mono); font-size: 11.5px; } .file-tree::-webkit-scrollbar { width: 4px; } .file-tree::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; } .ft-empty { padding: 16px 12px; color: var(--txt-faint); font-size: 12px; line-height: 1.6; } .ft-loading { padding: 12px; color: var(--txt-faint); font-size: 11.5px; font-family: var(--mono); } .ft-entry { display: flex; align-items: center; gap: 5px; cursor: pointer; padding: 3px 10px; border-radius: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background 0.1s; color: var(--txt-dim); } .ft-entry:hover { background: var(--panel); color: var(--txt); } .ft-entry.ft-dir { color: var(--txt); font-weight: 500; } .ft-entry.ft-dir::before { content: "▸"; font-size: 9px; color: var(--txt-faint); width: 10px; flex-shrink: 0; } .ft-entry.ft-dir.open::before { content: "▾"; } .ft-entry.ft-file::before { content: "·"; font-size: 14px; color: var(--txt-faint); width: 10px; flex-shrink: 0; text-align: center; } .ft-entry.ft-file:hover { color: var(--accent); } /* ── Terminal pane ──────────────────────────────────────────────────────── */ .term-pane { border-top: 1px solid var(--border); background: var(--code-bg); display: flex; flex-direction: column; flex-shrink: 0; height: 220px; min-height: 120px; } .term-hdr { display: flex; align-items: center; gap: 7px; padding: 5px 10px; background: var(--panel); border-bottom: 1px solid var(--border); flex-shrink: 0; } .term-title { font-size: 11.5px; color: var(--txt-dim); font-family: var(--mono); flex-shrink: 0; } .term-proj-sel { width: auto; flex: 0 0 110px; padding: 3px 6px; font-size: 11px; } .term-input { flex: 1; background: transparent; border: 1px solid var(--border); border-radius: 6px; color: var(--txt); font-family: var(--mono); font-size: 12px; padding: 3px 8px; outline: none; } .term-input:focus { border-color: var(--accent); } .term-run, .term-x { background: var(--panel); border: 1px solid var(--border); color: var(--txt-faint); border-radius: 6px; width: 26px; height: 26px; cursor: pointer; flex-shrink: 0; display: grid; place-items: center; font-size: 13px; transition: all 0.12s; } .term-run:hover { border-color: var(--ok); color: var(--ok); } .term-x:hover { border-color: var(--err); color: var(--err); } .term-out { flex: 1; overflow-y: auto; padding: 8px 12px; font-family: var(--mono); font-size: 11.5px; line-height: 1.6; color: var(--txt-dim); } .term-out::-webkit-scrollbar { width: 5px; } .term-out::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; } .term-line { margin: 1px 0; white-space: pre-wrap; word-break: break-all; } .term-line.term-cmd { color: var(--accent); } .term-line.term-err { color: var(--err); } .term-line.term-ok { color: var(--ok); } .term-line.term-meta { color: var(--txt-faint); font-size: 10.5px; } /* ── Preview pane (right side) ──────────────────────────────────────────── */ .preview-pane { width: 480px; flex-shrink: 0; display: flex; flex-direction: column; border-left: 1px solid var(--border); background: var(--bg-2); transition: width 0.22s ease, opacity 0.22s ease; } .preview-pane.preview-hidden { width: 0; opacity: 0; pointer-events: none; overflow: hidden; } .preview-hdr { display: flex; align-items: center; gap: 7px; padding: 7px 12px; background: var(--panel); border-bottom: 1px solid var(--border); flex-shrink: 0; } .preview-title { font-size: 11.5px; color: var(--txt-dim); font-family: var(--mono); flex-shrink: 0; } .prev-port-sel { flex: 1; padding: 3px 6px; font-size: 11px; } .prev-btn { background: var(--panel); border: 1px solid var(--border); color: var(--txt-faint); border-radius: 6px; width: 26px; height: 26px; cursor: pointer; flex-shrink: 0; display: grid; place-items: center; font-size: 13px; transition: all 0.12s; } .prev-btn:hover { border-color: var(--accent); color: var(--accent); } #previewFrame { flex: 1; border: none; background: white; } /* ── Docs / RAG panel ──────────────────────────────────────── */ .docs-upload-area { margin: 10px 10px 0; border: 1.5px dashed var(--border-2); border-radius: 8px; background: var(--panel-2); transition: border-color 0.15s, background 0.15s; } .docs-upload-area.drag-over { border-color: var(--accent); background: var(--accent-soft); } .docs-drop-hint { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 12px; color: var(--txt-dim); font-size: 12px; } .docs-drop-hint svg { color: var(--txt-faint); margin-bottom: 2px; } .docs-drop-hint small { color: var(--txt-faint); font-size: 10.5px; } .docs-pick-btn { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 12px; padding: 0; text-decoration: underline; } .docs-pick-btn:hover { color: var(--accent-2); } .docs-progress { padding: 12px 14px; } .docs-prog-bar { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; margin-bottom: 6px; } .docs-prog-fill { height: 100%; background: var(--accent); border-radius: 2px; width: 0%; transition: width 0.3s ease; } .docs-prog-label { font-size: 11px; color: var(--txt-dim); font-family: var(--mono); } .docs-list-hdr { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 4px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--txt-faint); } .docs-count { font-size: 10px; background: var(--panel-2); color: var(--txt-dim); padding: 1px 6px; border-radius: 20px; border: 1px solid var(--border); } .docs-list { padding: 2px 0 8px; } .docs-empty { padding: 12px 14px; font-size: 11.5px; color: var(--txt-faint); line-height: 1.6; } .doc-item { display: flex; align-items: center; gap: 8px; padding: 7px 14px; transition: background 0.1s; cursor: default; } .doc-item:hover { background: var(--panel-2); } .doc-icon { color: var(--txt-faint); flex-shrink: 0; } .doc-info { flex: 1; min-width: 0; } .doc-name { font-size: 12px; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .doc-meta { font-size: 10.5px; color: var(--txt-faint); margin-top: 1px; } .doc-del { background: none; border: none; color: var(--txt-faint); cursor: pointer; padding: 3px; border-radius: 4px; opacity: 0; transition: opacity 0.1s, color 0.1s; display: grid; place-items: center; } .doc-item:hover .doc-del { opacity: 1; } .doc-del:hover { color: var(--err); } /* ── Claude thinking panel ─────────────────────────────────────────────────── */ .sv-thinking { border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 10px; margin-bottom: 8px; overflow: hidden; font-family: var(--mono); font-size: 11.5px; background: color-mix(in srgb, var(--accent) 4%, var(--bg-2)); } .sv-think-header { display: flex; align-items: center; gap: 7px; padding: 8px 12px; cursor: pointer; user-select: none; border-bottom: 1px solid transparent; transition: background 0.12s, border-color 0.2s; } .sv-thinking.sv-thinking-open .sv-think-header { border-bottom-color: color-mix(in srgb, var(--accent) 18%, transparent); } .sv-think-header:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); } .sv-think-dot { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 60%, transparent); flex-shrink: 0; transition: background 0.3s; } .sv-thinking-active .sv-think-dot { background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: think-pulse 1.2s ease-in-out infinite; } @keyframes think-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--accent); } 50% { opacity: 0.4; box-shadow: 0 0 2px var(--accent); } } .sv-think-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 70%, var(--txt-dim)); flex: 1; } .sv-think-chevron { font-size: 11px; color: var(--txt-faint); transition: transform 0.18s; } .sv-thinking.sv-thinking-open .sv-think-chevron { transform: rotate(180deg); } .sv-think-body { display: none; max-height: 260px; overflow-y: auto; padding: 10px 14px 12px; color: var(--txt-dim); line-height: 1.6; white-space: pre-wrap; word-break: break-word; font-size: 11px; } .sv-thinking.sv-thinking-open .sv-think-body { display: block; } .sv-thinking.sv-thinking-active .sv-think-body { display: block; } /* ── Opus reasoning state (pre-token placeholder) ───────────────────────── */ .sv-reasoning-state { display: inline-flex; align-items: center; gap: 7px; color: var(--txt-faint); font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; padding: 4px 0; } .sv-r-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: think-pulse 1s ease-in-out infinite; flex-shrink: 0; }