:root { --ink:#1d2430; --muted:#747d8d; --line:#e5e8ed; --panel:#f7f8fa; --soft:#f1f3f6; --accent:#27384e; --accent-soft:#e9eef4; --success:#32775c; --warning:#9a6915; --danger:#a8494d; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--ink); background:#fff; }
* { box-sizing:border-box; } [hidden] { display:none !important; } body { min-width:960px; margin:0; background:#fff; } button,input,select,textarea { font:inherit; } button { cursor:pointer; } button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:3px solid #b9c8d9; outline-offset:2px; }
.app-shell { display:grid; grid-template-columns:260px minmax(0,1fr); min-height:100vh; } .sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; border-right:1px solid var(--line); background:#fafbfc; padding:22px 12px 14px; overflow:hidden; }
.brand { display:flex; flex-direction:column; gap:3px; padding:0 12px 22px; } .brand-word { color:#171d27; font-size:20px; font-weight:780; letter-spacing:-.045em; } .brand-sub,.eyebrow { color:var(--muted); font-size:10px; font-weight:750; letter-spacing:.12em; } .brand-sub { font-size:9px; }
.new-research { display:flex; align-items:center; gap:5px; width:100%; border:1px solid #d8dde5; border-radius:8px; background:#fff; color:#3a4556; padding:10px 11px; text-align:left; font-size:13px; font-weight:650; } .new-research:hover { border-color:#aeb8c6; background:#f4f6f8; } kbd { margin-left:auto; color:#80899a; border:0; background:var(--soft); border-radius:4px; padding:2px 4px; font:10px ui-monospace,SFMono-Regular,Consolas,monospace; } kbd + kbd { margin-left:0; }
.search-box { display:grid; gap:5px; padding:20px 5px 14px; color:var(--muted); font-size:12px; } .search-box input { width:100%; border:1px solid var(--line); border-radius:7px; background:#fff; padding:8px 9px; color:var(--ink); outline:none; } .search-box input:focus { border-color:#9ba8b8; box-shadow:0 0 0 3px #edf1f5; }
.sidebar-nav { display:grid; gap:2px; padding:0 2px 10px; } .nav-link { display:flex; justify-content:space-between; border:0; border-radius:7px; background:transparent; color:#5d6878; padding:8px 10px; text-align:left; font-size:13px; } .nav-link:hover,.nav-link.active { background:#e8edf3; color:#202b3a; } .nav-link span { color:#9099a8; font-size:11px; }
.research-list-wrap { min-height:0; flex:1; overflow:auto; padding:6px 0; } .nav-caption { margin:0; padding:0 10px 7px; color:#8b94a2; font-size:11px; } .research-list { display:grid; gap:2px; } .research-row { display:grid; grid-template-columns:8px minmax(0,1fr) auto; align-items:start; gap:8px; width:100%; border:0; border-radius:7px; background:transparent; color:inherit; padding:9px 8px; text-align:left; } .research-row:hover,.research-row.selected { background:#e6ebf1; } .research-copy { min-width:0; } .research-copy strong,.research-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .research-copy strong { color:#2b3544; font-size:12px; font-weight:650; } .research-copy small,.research-row time { color:#8791a0; font-size:10px; line-height:1.45; } .research-row time { padding-top:1px; }.run-dot,.presence,.timeline-dot { display:block; border-radius:999px; background:#aab2be; } .run-dot { width:7px; height:7px; margin-top:5px; }.run-dot.running { background:#5283b8; }.run-dot.completed { background:var(--success); }.run-dot.failed,.run-dot.cancelled { background:var(--danger); }.sidebar-empty { margin:8px 10px; color:#9ca4b0; font-size:12px; }.sidebar-bottom { display:grid; gap:8px; border-top:1px solid var(--line); padding:13px 8px 0; color:#8b94a1; font-size:11px; }.model-button { display:flex; align-items:center; gap:7px; min-width:0; border:0; background:transparent; color:#4d5969; padding:0; text-align:left; font-size:12px; }.model-button:hover { color:#152133; }.presence { width:8px; height:8px; background:var(--success); }.model-button span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.research-main { width:min(100%,1120px); margin:0 auto; padding:32px clamp(30px,6vw,82px) 76px; } .research-header { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); padding-bottom:22px; margin-bottom:28px; } .research-header .eyebrow { margin:0 0 5px; } h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:0; color:#171e29; font-size:26px; line-height:1.2; letter-spacing:-.045em; } h2 { margin-bottom:0; color:#263142; font-size:16px; letter-spacing:-.025em; } h3 { color:#384557; font-size:13px; }.header-actions { display:flex; gap:8px; }.quiet-button,.quiet-link { border:0; border-radius:7px; background:transparent; color:#667283; padding:8px 10px; font-size:12px; text-decoration:none; }.quiet-button:hover,.quiet-link:hover { background:var(--soft); color:#1f2937; }
.composer-card,.prompt-card,.process-section,.board-section,.report-section,.deliverables-section,.log-details { border-bottom:1px solid var(--line); padding:0 0 26px; margin-bottom:26px; }.composer-card { border:1px solid var(--line); border-radius:13px; padding:22px; background:#fff; box-shadow:0 12px 30px #1c26320a; }.section-heading,.process-heading { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:16px; }.section-heading.compact { align-items:center; margin-bottom:12px; }.section-heading .eyebrow { margin-bottom:4px; }.run-status { border-radius:999px; padding:5px 9px; background:#eff2f5; color:#697587; font-size:11px; font-weight:650; white-space:nowrap; }.run-status.queued { background:#f8f0dc; color:var(--warning); }.run-status.running { background:#e7f0fb; color:#3e6b99; }.run-status.failed { background:#fae8e8; color:var(--danger); }
textarea { display:block; width:100%; min-height:185px; resize:vertical; border:1px solid #dce1e8; border-radius:9px; background:#fff; color:#202938; padding:14px; outline:none; line-height:1.65; } textarea:focus,input:focus,select:focus { border-color:#9dacbd; box-shadow:0 0 0 3px #edf1f5; } textarea::placeholder { color:#a2aab5; }.composer-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }.composer-options label,.settings-dialog label { display:grid; gap:6px; color:#657184; font-size:12px; } input,select { width:100%; border:1px solid #dce1e8; border-radius:7px; background:#fff; color:var(--ink); padding:9px 10px; outline:none; }.write-permission { display:flex; gap:9px; align-items:flex-start; margin:15px 0; padding:11px 12px; border:1px solid #e0e5eb; border-radius:9px; background:#fafbfc; cursor:pointer; }.write-permission input { width:15px; height:15px; margin-top:2px; accent-color:#3d526a; }.write-permission strong { display:block; color:#3a4657; font-size:12px; }.write-permission small { display:block; color:#778294; font-size:11px; line-height:1.5; margin-top:3px; }.composer-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; color:#7c8798; font-size:12px; }.primary-button,.secondary-button { border-radius:8px; padding:10px 14px; font-size:13px; font-weight:680; }.primary-button { border:0; background:#2c4057; color:#fff; }.primary-button:hover { background:#1f334b; }.primary-button:disabled { cursor:not-allowed; opacity:.45; }.secondary-button { border:1px solid #d7dfe8; background:#fff; color:#43566c; }.secondary-button:hover { border-color:#aebdcd; background:#f7f9fb; }
.research-view { display:grid; grid-template-columns:minmax(0,860px) 300px; align-items:start; gap:28px; max-width:1188px; }.research-content { min-width:0; }.prompt-card { padding-bottom:20px; }.prompt-card p { max-width:720px; margin-bottom:7px; padding:15px 18px; border-radius:12px; background:#eef1f4; color:#2e3848; white-space:pre-wrap; line-height:1.7; }.prompt-card time { display:block; color:#8a94a2; text-align:right; font-size:11px; }.process-heading h2 { display:inline; margin-right:10px; }.process-heading span { color:#8791a0; font-size:12px; }.process-actions { display:flex; align-items:center; gap:7px; }.stop-button,.resume-button { border-radius:7px; background:#fff; padding:7px 11px; font-size:12px; }.stop-button { border:1px solid #e6c9ca; color:#a34448; }.stop-button:hover { background:#fff5f5; }.resume-button { border:1px solid #d9c778; color:#715e00; background:#fffbed; }.resume-button:hover { background:#fff6d7; }.process-section > details { border:1px solid var(--line); border-radius:10px; background:#fff; }.process-section > details > summary,.log-details summary { color:#485466; cursor:pointer; padding:12px 14px; font-size:13px; font-weight:650; }.timeline { display:grid; gap:9px; list-style:none; margin:0; padding:0 14px 15px; }.timeline-item { display:grid; grid-template-columns:12px minmax(0,1fr); gap:9px; padding:0; }.timeline-dot { width:7px; height:7px; margin-top:14px; background:#97a2b0; }.timeline-item.active .timeline-dot { background:#4f80b4; }.timeline-item.failed .timeline-dot { background:var(--danger); }.timeline-item details { border:1px solid #e3e7eb; border-radius:9px; background:#fff; }.timeline-item summary { display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; list-style:none; padding:11px 13px; }.timeline-item summary::-webkit-details-marker { display:none; }.timeline-item strong { display:block; min-width:0; overflow:hidden; color:#344052; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.timeline-meta { flex:0 0 auto; color:#8a94a0; font-size:10px; }.timeline-item p { overflow-wrap:anywhere; margin:0; border-top:1px solid #edf0f2; padding:9px 13px 11px; color:#778292; font:11px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; }.background-banner { display:flex; align-items:center; justify-content:space-between; gap:14px; border:1px solid #d8e3ef; border-radius:9px; background:#eef4f9; color:#55718d; padding:12px 14px; margin:-8px 0 26px; font-size:12px; }.background-banner button { border:0; border-radius:6px; background:#fff; color:#496d91; padding:7px 9px; font-size:11px; }.run-task-panel { position:sticky; top:24px; overflow:hidden; border:1px solid #30302c; border-radius:12px; background:#171715; color:#f7f2e4; box-shadow:0 10px 28px #1b1b170f; }.task-panel-heading { display:flex; align-items:flex-start; justify-content:space-between; border-bottom:1px solid #30302c; padding:17px 17px 14px; }.task-panel-heading p { margin:0 0 4px; color:#fff; font-size:15px; font-weight:720; }.task-panel-heading strong { color:#f1da43; font:700 13px ui-monospace,SFMono-Regular,Consolas,monospace; }.task-panel-heading span { color:#aaa79d; font-size:11px; }.task-panel-list { display:grid; gap:0; list-style:none; margin:0; padding:7px 0; }.task-panel-list li { display:grid; grid-template-columns:9px minmax(0,1fr); gap:10px; padding:10px 17px; }.task-panel-list li::before { content:""; width:7px; height:7px; margin-top:6px; border:1px solid #8b887e; border-radius:50%; }.task-panel-list li.done::before { border-color:#dfc51a; background:#dfc51a; }.task-panel-list li.active::before { border-color:#dfc51a; box-shadow:0 0 0 3px #dfc51a2a; }.task-panel-list strong,.task-panel-list small { display:block; }.task-panel-list strong { color:#f5f1e7; font-size:12px; line-height:1.45; }.task-panel-list small { margin-top:3px; color:#aaa79d; font-size:10px; line-height:1.4; }.task-panel-note { margin:0; border-top:1px solid #30302c; padding:13px 17px 15px; color:#929087; font-size:11px; line-height:1.5; }
.task-board { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }.board-item { display:flex; gap:9px; min-width:0; border:1px solid var(--line); border-radius:9px; padding:11px; background:#fff; }.board-item > span { flex:0 0 7px; height:7px; margin-top:5px; border-radius:999px; background:#a5afbb; }.board-item.done > span { background:var(--success); }.board-item.active > span { background:#4f80b4; }.board-item.failed > span { background:var(--danger); }.board-item strong,.board-item small { display:block; }.board-item strong { color:#3a4657; font-size:12px; }.board-item small { margin-top:3px; color:#7a8595; font-size:11px; line-height:1.4; }
.report-content { color:#303b4b; font-size:14px; line-height:1.78; }.report-content h1,.report-content h2,.report-content h3,.preview-content h1,.preview-content h2,.preview-content h3 { color:#1f2a38; line-height:1.35; letter-spacing:-.025em; }.report-content h1,.preview-content h1 { margin:26px 0 12px; font-size:23px; }.report-content h2,.preview-content h2 { margin:24px 0 10px; font-size:18px; }.report-content h3,.preview-content h3 { margin:20px 0 8px; font-size:15px; }.report-content h1:first-child,.report-content h2:first-child,.preview-content h1:first-child,.preview-content h2:first-child { margin-top:0; }.report-content p,.preview-content p { margin:0 0 13px; }.report-content a,.preview-content a { color:#426a98; text-decoration-color:#afc2d8; overflow-wrap:anywhere; }.report-content ul,.report-content ol,.preview-content ul,.preview-content ol { margin:0 0 15px; padding-left:23px; }.report-content li,.preview-content li { margin:4px 0; }.report-content code,.preview-content code { border-radius:4px; background:#f1f3f6; color:#394656; padding:2px 4px; font:12px ui-monospace,SFMono-Regular,Consolas,monospace; }.report-content pre,.preview-content pre { overflow:auto; margin:0 0 15px; border:1px solid #e0e5eb; border-radius:8px; background:#f8fafb; padding:12px; color:#475568; font:12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre-wrap; }.report-content pre code,.preview-content pre code { background:transparent; padding:0; }.report-content blockquote,.preview-content blockquote { margin:0 0 15px; border-left:3px solid #b6c3d1; padding:6px 0 6px 13px; color:#657285; }.report-content hr,.preview-content hr { border:0; border-top:1px solid var(--line); margin:20px 0; }.markdown-table-wrap { overflow:auto; margin:0 0 16px; border:1px solid #e0e5eb; border-radius:8px; }.report-content table,.preview-content table { min-width:100%; border-collapse:collapse; font-size:12px; }.report-content th,.report-content td,.preview-content th,.preview-content td { border-bottom:1px solid #e4e8ed; padding:9px 10px; text-align:left; vertical-align:top; }.report-content th,.preview-content th { background:#f7f8fa; color:#4c596a; font-weight:680; }.report-content tr:last-child td,.preview-content tr:last-child td { border-bottom:0; }.empty-report { border:1px dashed #d8dee6; border-radius:9px; color:#7f8997; padding:20px; font-size:12px; }.empty-report p { margin:0; }.sources-section { margin-top:24px; border-top:1px solid #edf0f3; padding-top:18px; }.sources-section h3 { margin-bottom:10px; }.source-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.source-item { display:flex; justify-content:space-between; gap:10px; min-width:0; border:1px solid #e0e5ea; border-radius:8px; color:inherit; padding:10px; text-decoration:none; }.source-item:hover { border-color:#aebdcd; background:#fafbfc; }.source-item > span:first-child { min-width:0; }.source-item strong,.source-item small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.source-item strong { color:#3d4a5b; font-size:12px; }.source-item small { color:#8a94a2; font-size:10px; margin-top:3px; }.source-item > span:last-child { align-self:center; color:#526b85; font-size:10px; font-weight:650; }
.deliverable-actions { display:flex; gap:8px; justify-content:flex-end; margin:-42px 0 14px; }.deliverable-actions .secondary-button { padding:7px 10px; font-size:11px; }.deliverable-list { display:grid; gap:8px; }.deliverable { display:flex; justify-content:space-between; align-items:center; gap:12px; border:1px solid var(--line); border-radius:8px; color:inherit; padding:10px 12px; }.deliverable:hover { border-color:#aeb9c7; background:#fafbfc; }.file-copy { min-width:0; }.file-copy strong,.file-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.file-copy strong { color:#354153; font-size:12px; }.file-copy small { color:#8791a0; font-size:11px; margin-top:3px; }.file-actions { display:flex; flex:0 0 auto; gap:4px; }.file-actions button,.file-actions a { border:0; border-radius:6px; background:transparent; color:#526b85; padding:6px 7px; text-decoration:none; font-size:11px; font-weight:650; }.file-actions button:hover,.file-actions a:hover { background:#eaf0f5; }.empty-deliverables { margin:0; border:1px dashed #d8dee6; border-radius:8px; color:#7f8997; padding:20px; text-align:center; font-size:12px; }.log-details { border-bottom:0; border:1px solid var(--line); border-radius:9px; padding:0; }.log-details pre { max-height:320px; overflow:auto; margin:0; border-top:1px solid var(--line); background:#fafbfc; color:#5b6676; padding:13px; white-space:pre-wrap; font:11px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; }
.empty-state { max-width:510px; padding:52px 0; }.empty-state .eyebrow { margin-bottom:7px; }.empty-state h2 { font-size:23px; }.empty-state p:not(.eyebrow) { color:#768191; line-height:1.6; }.settings-dialog { width:min(100% - 32px,560px); padding:0; border:1px solid #dce1e8; border-radius:12px; box-shadow:0 20px 70px #1d26322b; }.settings-dialog::backdrop { background:#11182745; }.settings-dialog form { display:grid; gap:15px; padding:22px; }.settings-note,.settings-message { margin:0; color:#738093; font-size:12px; line-height:1.55; }.settings-message { min-height:1.4em; color:var(--danger); }.dialog-actions { display:flex; justify-content:flex-end; }
.file-drawer { position:fixed; z-index:20; top:0; right:0; bottom:0; width:min(44vw,580px); border-left:1px solid #dce2e8; background:#fff; box-shadow:-18px 0 45px #1f29351a; overflow-x:hidden; overflow-y:auto; }.drawer-header { display:flex; justify-content:space-between; gap:16px; min-height:96px; border-bottom:1px solid var(--line); padding:20px 24px 16px; }.drawer-header .eyebrow { margin:0 0 4px; }.drawer-header h2 { max-width:370px; overflow:hidden; margin:0; font-size:16px; text-overflow:ellipsis; white-space:nowrap; }.drawer-meta { overflow:hidden; margin:5px 0 0; color:#8390a0; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.drawer-actions { display:flex; align-items:flex-start; gap:2px; flex:0 0 auto; }.preview-tabs { display:flex; gap:3px; overflow:auto; border-bottom:1px solid var(--line); padding:10px 16px 0; }.preview-tab { flex:0 0 auto; max-width:180px; overflow:hidden; border:0; border-bottom:2px solid transparent; background:transparent; color:#788494; padding:8px 10px; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }.preview-tab:hover { color:#3e4d60; background:#f7f9fb; }.preview-tab.active { border-bottom-color:#425d7c; color:#24394f; font-weight:700; }.preview-content { min-height:calc(100vh - 148px); padding:28px clamp(24px,4vw,48px) 64px; color:#334051; font-size:14px; line-height:1.78; }.preview-content.document { color:#394758; }.preview-content > pre { border:0; background:transparent; padding:0; }.preview-truncated { margin-top:22px; border:1px solid #e6d7b7; border-radius:7px; background:#fffaf0; color:#806225; padding:9px 10px; font-size:12px; }
@media (max-width:1180px) { .research-view { grid-template-columns:minmax(0,1fr); max-width:860px; }.run-task-panel { position:static; order:-1; }.task-panel-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:1050px) { body { min-width:0; }.app-shell { grid-template-columns:208px minmax(0,1fr); }.research-main { padding:28px 28px 60px; }.task-board,.source-list { grid-template-columns:1fr; }.file-drawer { width:min(65vw,620px); } }
@media (max-width:720px) { .app-shell { display:block; }.sidebar { position:static; height:auto; }.research-list-wrap { max-height:180px; }.research-main { padding:22px 18px 48px; }.composer-options { grid-template-columns:1fr; }.research-header,.composer-footer,.background-banner { align-items:flex-start; flex-direction:column; }.header-actions { align-self:flex-end; }.task-panel-list { grid-template-columns:1fr; }.deliverable-actions { justify-content:flex-start; margin:0 0 14px; }.file-drawer { width:100vw; }.drawer-header { padding:17px 18px 13px; }.preview-content { padding:24px 18px 48px; } }
/* PRODUCT ACTIVITY STAGE V2 */
.research-main { width:min(100%,1440px); }
.research-view { grid-template-columns:minmax(0,900px) 320px; max-width:1248px; }
.process-section { min-width:0; }
.timeline-viewport { position:relative; height:clamp(380px,62vh,640px); overflow-y:auto; overscroll-behavior:contain; scroll-behavior:smooth; scroll-padding-block:42%; border:1px solid var(--line); border-radius:12px; background:linear-gradient(180deg,#fbfcfd 0%,#fff 28%,#fff 72%,#fbfcfd 100%); }
.timeline-toolbar { position:sticky; z-index:3; top:0; display:flex; align-items:center; justify-content:space-between; min-height:42px; border-bottom:1px solid #e9edf1; background:#fffffff0; padding:8px 12px; backdrop-filter:blur(10px); }
.follow-state { display:inline-flex; align-items:center; gap:7px; color:#718092; font-size:11px; font-weight:650; }
.follow-state::before { content:""; width:6px; height:6px; border-radius:50%; background:#4f80b4; box-shadow:0 0 0 3px #4f80b421; }
.follow-state.paused::before { background:#a6afb9; box-shadow:none; }
.resume-follow { border:1px solid #cbd7e3; border-radius:999px; background:#fff; color:#426487; padding:6px 10px; font-size:11px; font-weight:700; box-shadow:0 5px 18px #26384d14; }
.resume-follow:hover { border-color:#9db0c4; background:#f5f8fb; }
.timeline-viewport .timeline { display:grid; gap:9px; min-height:100%; margin:0; padding:30vh 16px 36vh; }
.timeline-item { opacity:.72; transition:opacity .2s ease,transform .25s ease; }
.timeline-item.is-presented { opacity:1; transform:translateY(0); }
.timeline-item.is-pending { opacity:.38; }
.timeline-item details { overflow:hidden; transition:border-color .2s ease,box-shadow .2s ease,background .2s ease; }
.timeline-item.is-presented details { border-color:#b9c8d8; box-shadow:0 10px 28px #25364a12; }
.timeline-item.is-presented .timeline-dot { background:#4f80b4; box-shadow:0 0 0 4px #4f80b41f; }
.timeline-item summary { min-height:44px; }
.timeline-title { display:flex; align-items:center; min-width:0; gap:8px; }
.timeline-kind { flex:0 0 auto; border-radius:999px; background:#eef2f6; color:#627184; padding:3px 6px; font-size:9px; font-weight:760; letter-spacing:.03em; }
.timeline-item.agent-thinking .timeline-kind { background:#f0edf8; color:#665484; }
.timeline-item.agent-tool-call .timeline-kind,.timeline-item.agent-tool-result .timeline-kind { background:#edf3f8; color:#496983; }
.timeline-item.run-event .timeline-kind { background:#f8f2df; color:#796527; }
.timeline-detail { border-top:1px solid #edf0f2; background:#fbfcfd; padding:10px 13px 12px; }
.timeline-item .timeline-detail p { margin:0; border:0; padding:0; color:#586779; font:12px/1.65 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
.timeline-context { display:block; margin-top:7px; color:#9099a5; font-size:10px; }
.timeline-empty { align-self:center; margin:auto; color:#8c96a4; font-size:12px; text-align:center; }
.task-panel-progress { height:3px; background:#2a2a27; }
.task-panel-progress span { display:block; width:0; height:100%; background:#dfc51a; transition:width .35s ease; }
.task-panel-current { display:grid; gap:5px; border-bottom:1px solid #30302c; padding:13px 17px; }
.task-panel-current > span { color:#8f8c83; font-size:9px; font-weight:760; letter-spacing:.09em; text-transform:uppercase; }
.task-panel-current strong { color:#f7f2e4; font-size:12px; line-height:1.5; }
.task-panel-current small { color:#aaa79d; font-size:10px; }
.task-panel-list { max-height:calc(100vh - 315px); overflow-y:auto; overscroll-behavior:contain; }
.run-task-panel { max-height:calc(100vh - 48px); }
.report-content,.preview-content { overflow-wrap:anywhere; }
.report-content table,.preview-content table { display:block; width:max-content; max-width:100%; overflow-x:auto; }
.report-content img,.preview-content img { display:block; max-width:100%; height:auto; margin:18px auto; border-radius:8px; }
.report-content .task-list-item,.preview-content .task-list-item { list-style:none; }
.report-content input[type="checkbox"],.preview-content input[type="checkbox"] { width:auto; margin:0 7px 0 -21px; accent-color:#425d7c; }
.report-content del,.preview-content del { color:#7f8996; }
.report-content h4,.report-content h5,.report-content h6,.preview-content h4,.preview-content h5,.preview-content h6 { color:#2a3544; line-height:1.4; margin:18px 0 8px; }
@media (max-width:1180px) { .research-view { grid-template-columns:minmax(0,1fr); max-width:900px; }.run-task-panel { position:static; order:-1; max-height:none; }.task-panel-list { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:320px; } }
@media (max-width:720px) { .timeline-viewport { height:58vh; min-height:360px; }.timeline-viewport .timeline { padding:24vh 10px 30vh; }.task-panel-list { grid-template-columns:1fr; } }
/* Keep long agent-generated task text inside the research workspace. */
.research-content,.run-task-panel,.task-panel-heading > div,.task-panel-current,.task-panel-list li > div,.timeline-title { min-width:0; }
.timeline-title { flex:1 1 auto; overflow:hidden; }
.timeline-title strong { max-width:100%; }
.timeline-detail,.timeline-context,.task-panel-note { overflow-wrap:anywhere; word-break:break-word; }
.task-panel-current strong { display:-webkit-box; overflow:hidden; overflow-wrap:anywhere; word-break:break-word; -webkit-box-orient:vertical; -webkit-line-clamp:4; }
.task-panel-current small { display:block; }
.task-panel-list li { min-width:0; overflow:hidden; }
.task-panel-list strong { display:-webkit-box; overflow:hidden; overflow-wrap:anywhere; word-break:break-word; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
@media (max-width:1480px) { .research-view { grid-template-columns:minmax(0,1fr); max-width:900px; }.run-task-panel { position:static; order:-1; max-height:none; }.task-panel-current strong { -webkit-line-clamp:3; }.task-panel-list { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:320px; } }
@media (max-width:720px) { .task-panel-list { grid-template-columns:1fr; } }

/* GOTIT BRAND SYSTEM */
:root { --ink:#0d1321; --muted:#667085; --line:#dfe3ea; --panel:#f6f7f9; --soft:#eceff4; --accent:#234bff; --accent-soft:#edf0ff; --success:#177c53; --warning:#a95800; }
body { background:#f6f7f9; }
.sidebar { border-right-color:#1d2940; background:#0d1321; }
.brand { margin:0 0 18px; padding:8px 10px 14px; border-radius:12px; background:#fff; text-decoration:none; }
.brand-image { display:block; width:100%; height:auto; }
.brand-sub { color:#234bff; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-weight:800; }
.new-research { border-color:#2a3853; background:#162039; color:#fff; }
.new-research:hover { border-color:#4566ff; background:#1a2850; }
.new-research kbd { background:#26334d; color:#aeb7c8; }
.search-box,.nav-caption,.sidebar-bottom { color:#7f8aa0; }
.search-box input { border-color:#26334a; background:#111a2e; color:#fff; }
.search-box input:focus { border-color:#4566ff; box-shadow:0 0 0 3px #234bff2b; }
.nav-link { color:#aeb7c8; }
.nav-link:hover,.nav-link.active { background:#182341; color:#fff; }
.nav-link.active { box-shadow:inset 3px 0 #234bff; }
.research-row:hover,.research-row.selected { background:#182341; }
.research-copy strong { color:#e8ebf2; }
.research-copy small,.research-row time { color:#77849b; }
.run-dot.running,.timeline-item.active .timeline-dot,.board-item.active>span { background:#234bff; }
.run-dot.completed { background:#52d69a; }
.sidebar-bottom { border-top-color:#26334a; }
.model-button,.model-button:hover { color:#b3bccb; }
.presence { background:#52d69a; }
.research-main { background:#fff; min-height:100vh; }
.primary-button { background:#234bff; box-shadow:0 8px 20px #234bff24; }
.primary-button:hover { background:#1638d9; }
.quiet-button:hover,.quiet-link:hover { color:#234bff; }
textarea:focus,input:focus,select:focus { border-color:#5470ff; box-shadow:0 0 0 3px #234bff18; }
.run-status.running { background:#edf0ff; color:#234bff; }
.timeline-viewport { background:linear-gradient(180deg,#f8f9fc 0%,#fff 28%,#fff 72%,#f8f9fc 100%); }
.follow-state::before,.timeline-item.is-presented .timeline-dot { background:#234bff; box-shadow:0 0 0 4px #234bff1f; }
.timeline-item.is-presented details { border-color:#aebcff; box-shadow:0 10px 28px #234bff12; }
.resume-follow { border-color:#bac4ff; color:#234bff; }
.timeline-item.agent-tool-call .timeline-kind,.timeline-item.agent-tool-result .timeline-kind { background:#edf0ff; color:#234bff; }
.run-task-panel { border-color:#1d2940; background:#0d1321; color:#f6f7f9; box-shadow:0 18px 40px #0d132124; }
.task-panel-heading,.task-panel-current,.task-panel-note { border-color:#25324b; }
.task-panel-heading strong { color:#ff8a38; }
.task-panel-progress { background:#1c2941; }
.task-panel-progress span { background:#234bff; }
.task-panel-list li.done::before { border-color:#234bff; background:#234bff; }
.task-panel-list li.active::before { border-color:#ff6a00; box-shadow:0 0 0 3px #ff6a0030; }
.task-panel-current strong,.task-panel-list strong { color:#f6f7f9; }
.report-content a,.preview-content a { color:#234bff; text-decoration-color:#aebcff; }
.preview-tab.active { border-bottom-color:#234bff; color:#234bff; }
.empty-state .eyebrow,.section-heading .eyebrow,.research-header .eyebrow { color:#234bff; }
.product-gate .gate-price { color:#234bff !important; }
@media (max-width:720px) { .brand { max-width:210px; }.sidebar { border-bottom:1px solid #1d2940; } }

/* AGENT CONSTELLATION WORKBENCH */
.material-symbols-rounded { font-family:"Material Symbols Rounded"; font-weight:normal; font-style:normal; font-size:18px; line-height:1; letter-spacing:normal; text-transform:none; display:inline-block; white-space:nowrap; word-wrap:normal; direction:ltr; -webkit-font-feature-settings:"liga"; -webkit-font-smoothing:antialiased; font-feature-settings:"liga"; }
.process-view-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:48px; margin-bottom:9px; }
.process-view-tabs { display:inline-flex; align-items:center; border:1px solid #d9dde5; border-radius:9px; background:#eef0f4; padding:3px; }
.process-view-tabs button { display:inline-flex; align-items:center; gap:6px; border:0; border-radius:6px; background:transparent; color:#697486; padding:7px 11px; font-size:11px; font-weight:700; }
.process-view-tabs button:hover { color:#234bff; }
.process-view-tabs button.active { background:#fff; color:#234bff; box-shadow:0 1px 4px #0d132116; }
.process-view-tabs .material-symbols-rounded { font-size:16px; }
.process-follow-actions { display:flex; align-items:center; gap:9px; }
.constellation-view { min-width:0; }
.agent-constellation { position:relative; overflow-x:auto; overflow-y:hidden; height:445px; border:1px solid #dfe3ea; border-radius:12px; background:#fff; overscroll-behavior-x:contain; scrollbar-width:none; }
.agent-constellation::-webkit-scrollbar { display:none; }
.constellation-stage { position:relative; width:100%; min-width:720px; height:100%; }
.constellation-helper { position:absolute; z-index:6; top:14px; left:15px; display:flex; align-items:center; gap:6px; color:#8993a1; font-size:9px; }
.constellation-helper .material-symbols-rounded { color:#234bff; font-size:14px; }
.constellation-agent { position:absolute; z-index:5; display:grid; grid-template-columns:38px minmax(0,1fr); align-items:start; gap:9px; width:218px; min-height:96px; border:1px solid #d9dee6; border-radius:10px; background:#fff; color:#0d1321; padding:11px; text-align:left; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,opacity .2s ease; }
.constellation-agent:hover { transform:translateY(-2px); border-color:#a9b7ff; box-shadow:0 10px 24px #0d13210d; }
.constellation-agent.selected { border-color:#234bff; box-shadow:0 0 0 3px #234bff12; }
.constellation-agent.idle { opacity:.74; }
.constellation-agent-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#edf0ff; color:#234bff; }
.constellation-agent-icon .material-symbols-rounded { font-size:20px; }
.constellation-agent.warning .constellation-agent-icon { background:#fff1e7; color:#ff6a00; }
.constellation-agent.done .constellation-agent-icon { background:#edf8f3; color:#177c53; }
.constellation-agent-copy { display:block; min-width:0; }
.constellation-agent-copy strong,.constellation-agent-copy small,.constellation-agent-copy em,.constellation-agent-status { display:block; }
.constellation-agent-copy strong { overflow:hidden; color:#1b2432; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.constellation-agent-copy small { overflow:hidden; margin-top:2px; color:#8a93a0; font:9px ui-monospace,SFMono-Regular,Consolas,monospace; text-overflow:ellipsis; white-space:nowrap; }
.constellation-agent-status { position:relative; margin-top:7px; padding-left:11px; color:#234bff; font-size:9px; font-weight:750; }
.constellation-agent-status::before { content:""; position:absolute; top:4px; left:0; width:6px; height:6px; border-radius:50%; background:currentColor; }
.constellation-agent.idle .constellation-agent-status { color:#8e98a6; }
.constellation-agent.done .constellation-agent-status { color:#177c53; }
.constellation-agent.warning .constellation-agent-status { color:#ff6a00; }
.constellation-agent-copy em { overflow:hidden; margin-top:7px; color:#667180; font-size:9px; font-style:normal; line-height:1.45; text-overflow:ellipsis; white-space:nowrap; }
.agent-position-0 { top:25px; left:50%; width:260px; transform:translateX(-50%); }
.agent-position-0:hover { transform:translate(-50%,-2px); }
.agent-position-1 { top:150px; left:22px; }
.agent-position-2 { top:150px; right:22px; }
.agent-position-3 { bottom:25px; left:9%; }
.agent-position-4 { right:9%; bottom:25px; }
.agent-count-2 .agent-position-1 { top:192px; left:50%; transform:translateX(-50%); }
.agent-count-2 .agent-position-1:hover { transform:translate(-50%,-2px); }
.collaboration-edge { position:absolute; z-index:2; border:0; background:transparent; color:#97a0ad; padding:0; pointer-events:none; }
.collaboration-edge:disabled { opacity:.38; }
.communication-wire { position:absolute; top:0; left:0; display:block; width:100%; border-top:1px solid currentColor; transform-origin:left center; }
.edge-copy { position:absolute; z-index:3; display:flex; align-items:center; gap:3px; min-width:max-content; border:1px solid #e4e7ec; border-radius:6px; background:#fff; color:currentColor; padding:3px 5px; font-size:8px; font-weight:750; pointer-events:auto; box-shadow:0 2px 8px #0d132108; }
.edge-copy .material-symbols-rounded { font-size:11px; }
.collaboration-edge:not(:disabled):hover .edge-copy,.collaboration-edge.selected .edge-copy { border-color:#b7c2ff; color:#234bff; }
.collaboration-edge.selected { color:#234bff; }
.collaboration-edge.selected .communication-wire { border-top-width:2px; }
.collaboration-edge.warning { color:#ff6a00; }
.collaboration-edge.warning .communication-wire { border-top-style:dashed; }
.edge-position-1 { top:116px; left:17%; width:33%; height:70px; }
.edge-position-1 .communication-wire { transform:rotate(-9deg); }
.edge-position-1 .edge-copy { top:18px; left:29%; }
.edge-position-2 { top:116px; left:50%; width:33%; height:70px; }
.edge-position-2 .communication-wire { transform:rotate(9deg); }
.edge-position-2 .edge-copy { top:18px; left:38%; }
.edge-position-3 { top:113px; left:50%; width:285px; height:250px; }
.edge-position-3 .communication-wire { transform:rotate(121deg); }
.edge-position-3 .edge-copy { top:118px; left:-36%; }
.edge-position-4 { top:113px; left:50%; width:285px; height:250px; }
.edge-position-4 .communication-wire { transform:rotate(59deg); }
.edge-position-4 .edge-copy { top:118px; left:40%; }
.agent-count-2 .edge-position-1 { top:121px; left:50%; width:70px; height:75px; }
.agent-count-2 .edge-position-1 .communication-wire { transform:rotate(90deg); }
.agent-count-2 .edge-position-1 .edge-copy { top:28px; left:8px; }
.constellation-empty { position:absolute; top:185px; left:50%; width:330px; margin:0; transform:translateX(-50%); color:#8a94a2; font-size:11px; line-height:1.6; text-align:center; }
.constellation-legend { position:absolute; z-index:6; bottom:11px; left:50%; display:flex; gap:12px; border:1px solid #e1e5eb; border-radius:8px; background:#fffffff2; color:#76808e; padding:7px 9px; font-size:8px; transform:translateX(-50%); }
.constellation-legend span { display:flex; align-items:center; gap:4px; }
.constellation-legend .material-symbols-rounded { color:#234bff; font-size:12px; }
.communication-inspector { overflow:hidden; margin-top:10px; border:1px solid #d7dce4; border-radius:11px; background:#fff; }
.communication-inspector.warning { border-color:#ffcba8; }
.communication-heading { display:flex; align-items:center; gap:9px; min-width:0; border-bottom:1px solid #e7eaf0; padding:10px 13px; }
.communication-kind { flex:0 0 auto; border-radius:999px; background:#edf0ff; color:#234bff; padding:4px 7px; font-size:9px; font-weight:750; }
.communication-inspector.warning .communication-kind { background:#fff1e7; color:#ff6a00; }
.communication-heading strong { min-width:0; overflow:hidden; color:#354052; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.communication-heading time { flex:0 0 auto; margin-left:auto; color:#8d96a3; font-size:9px; }
.communication-body { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(260px,.8fr); }
.communication-body>div { border-right:1px solid #e7eaf0; padding:10px 13px; }
.communication-body>div>span { color:#8b94a0; font-size:9px; }
.communication-body>div>strong { display:block; margin-top:3px; color:#283445; font-size:11px; }
.communication-body p { margin:4px 0 0; color:#687383; font-size:10px; line-height:1.55; }
.communication-body dl { display:grid; grid-template-columns:1fr 1fr; margin:0; }
.communication-body dl div { min-width:0; padding:11px; }
.communication-body dl div+div { border-left:1px solid #e7eaf0; }
.communication-body dt { color:#8c95a1; font-size:8px; }
.communication-body dd { overflow:hidden; margin:5px 0 0; color:#344052; font-size:9px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.communication-open-activity { display:flex; align-items:center; gap:3px; margin-left:auto; border:0; background:transparent; color:#234bff; padding:7px 13px 9px; font-size:9px; font-weight:700; }
.communication-open-activity .material-symbols-rounded { font-size:12px; }
.activity-view .timeline-viewport { height:445px; }
.activity-view .timeline-viewport .timeline { padding:22vh 16px 26vh; }
.run-task-panel { border-radius:13px; }
.task-panel-list li { transition:background .18s ease; }
.task-panel-list li:hover,.task-panel-list li.active { background:#17213a; }

@media (min-width:1181px) {
  .research-main { padding-inline:clamp(24px,3vw,48px); }
  .research-view { grid-template-columns:minmax(0,1fr) 300px; gap:24px; max-width:1180px; }
  .run-task-panel { position:sticky; order:initial; max-height:calc(100vh - 48px); }
  .task-panel-list { grid-template-columns:1fr; max-height:calc(100vh - 315px); }
}
@media (max-width:860px) {
  .process-view-toolbar { align-items:flex-start; flex-direction:column; }
  .process-follow-actions { width:100%; justify-content:space-between; }
  .communication-body { grid-template-columns:1fr; }
  .communication-body>div { border-right:0; border-bottom:1px solid #e7eaf0; }
}
@media (max-width:720px) {
  .agent-constellation,.activity-view .timeline-viewport { height:430px; }
  .agent-constellation { touch-action:pan-x; }
  .process-view-tabs { width:100%; }
  .process-view-tabs button { flex:1; justify-content:center; }
  .communication-heading strong { white-space:normal; }
  .communication-body dl { grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .constellation-agent,.task-panel-list li { transition:none; }
}