:root { color-scheme: dark; --bg:#212121; --side:#171717; --panel:#292929; --raised:#303030; --hover:#343434; --text:#ececec; --muted:#a2a2a2; --faint:#777; --border:#373737; --user:#303030; --accent:#a3c5b1; --focus:#b5d9c5; --shadow:0 20px 80px #0006; font-family:Inter,"Segoe UI","Malgun Gothic",sans-serif; font-synthesis:none; }
:root[data-theme="light"] { color-scheme:light; --bg:#fff; --side:#f5f5f5; --panel:#f7f7f7; --raised:#ededed; --hover:#e8e8e8; --text:#252525; --muted:#666; --faint:#767676; --border:#dedede; --user:#eee; --accent:#2e6b4c; --focus:#28644b; --shadow:0 20px 70px #0002; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-size:14px; }
button,input,textarea,select { font:inherit; color:inherit; }
button,a,input,select,summary,textarea { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button { border:0; background:none; }
button:disabled { cursor:default; opacity:.45; }
a { color:inherit; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
button,select { touch-action:manipulation; }
.icon { width:19px; height:19px; flex:0 0 auto; vertical-align:middle; }
.icon-button { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:8px; color:var(--muted); flex-shrink:0; }
.icon-button:hover,.quiet-button:hover { background:var(--hover); color:var(--text); }
.quiet-button { display:inline-flex; align-items:center; gap:7px; border-radius:8px; padding:8px 9px; color:var(--muted); font-size:14px; }
.text-button { padding:4px 0; color:var(--accent); font-size:12px; }
.text-button:hover { text-decoration:underline; }
.soft-button,.primary-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:10px 13px; border-radius:9px; text-decoration:none; font-weight:500; font-size:14px; }
.soft-button { background:var(--raised); border:1px solid var(--border); }
.soft-button:hover { background:var(--hover); }
.primary-button { background:var(--text); color:var(--bg); }
.muted { color:var(--muted); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.skip-link { position:fixed; top:-70px; left:20px; z-index:100; padding:12px 18px; background:var(--text); color:var(--bg); border-radius:8px; }
.skip-link:focus { top:12px; }
.app-shell { height:100vh; height:100dvh; display:grid; grid-template-columns:258px minmax(0,1fr); overflow:hidden; }
.sidebar { background:var(--side); display:flex; flex-direction:column; min-height:0; border-right:1px solid transparent; }
.brand-row { display:flex; align-items:center; gap:10px; padding:17px 14px 11px 20px; min-height:68px; }
.brand { display:flex; align-items:center; gap:2px; text-decoration:none; font-size:23px; font-weight:650; letter-spacing:-1.2px; }
.brand-dot { width:5px; height:5px; background:var(--accent); border-radius:50%; margin:13px 0 0 3px; }
.version { font-size:11px; letter-spacing:1.2px; color:var(--faint); border:1px solid var(--border); padding:3px 5px; border-radius:4px; }
.brand-row .icon-button { margin-left:auto; }
.sidebar-controls { padding:4px 12px 10px; }
.search-field { display:flex; gap:9px; align-items:center; padding:8px 10px; background:var(--bg); border:1px solid var(--border); border-radius:9px; color:var(--muted); }
.search-field .icon { width:16px; height:16px; }
.search-field input { background:none; border:0; min-width:0; width:100%; font-size:14px; outline-offset:5px; }
.search-field input::placeholder { color:var(--muted); }
.search-field kbd { font-size:10px; white-space:nowrap; font-family:inherit; color:var(--faint); }
.filter-row { display:flex; gap:6px; margin-top:9px; }
.filter-row select { background:transparent; border:0; color:var(--muted); font-size:12px; padding:5px 3px; min-width:0; width:50%; }
select option { background:var(--panel); color:var(--text); }
.project-navigation { padding:0 8px 18px; overflow-y:auto; flex:1; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.section-label { display:flex; align-items:center; padding:17px 12px 8px; font-size:12px; color:var(--faint); font-weight:600; }
.section-label span { margin-left:auto; font-weight:400; }
.project-label { padding-top:26px; }
.thread-row { width:100%; padding:8px 11px; min-height:37px; text-align:left; display:flex; align-items:center; gap:5px; border-radius:7px; color:var(--text); }
.thread-row:hover { background:var(--panel); }
.thread-row.active { background:var(--raised); }
.thread-title { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.6; }
.thread-title .icon { width:13px; height:13px; margin-right:5px; color:var(--muted); }
.thread-meta { display:flex; align-items:center; gap:4px; color:var(--muted); font-size:10px; }
.thread-meta .icon { width:12px; height:12px; }
.thread-row:not(.active) .thread-meta { opacity:.6; }
.provider-dot { width:5px; height:5px; border-radius:50%; background:var(--muted); }
.provider-dot.codex { background:#9db6a7; }.provider-dot.claude { background:#c29578; }.provider-dot.grok { background:#a5b4d1; }
.project-group { margin:1px 0 12px; }
.project-toggle { display:flex; align-items:center; gap:9px; padding:8px 11px; width:100%; text-align:left; border-radius:7px; font-size:14px; }
.project-toggle:hover { background:var(--panel); }
.project-toggle .icon { width:17px; height:17px; color:var(--muted); }
.project-count { margin-left:auto; color:var(--faint); font-size:11px; }
.fold-icon { display:flex; }.fold-icon .icon { width:12px; height:12px; }
.fold-icon.open { transform:rotate(90deg); }
.project-threads { margin-left:19px; }
.project-threads .thread-row { padding-left:9px; }
.small-empty { font-size:12px; line-height:1.8; color:var(--faint); margin:6px 12px; }
.search-empty { text-align:center; padding:22px 8px; color:var(--muted); font-size:13px; line-height:2; }
.search-empty button { display:block; margin:5px auto; }
.sidebar-bottom { margin-top:auto; padding:10px 12px 12px; border-top:1px solid var(--border); }
.prototype-note { font-size:11px; color:var(--muted); display:flex; align-items:center; gap:6px; padding:5px 8px 11px; }
.status-dot { width:5px; height:5px; border-radius:50%; background:#c3ac7c; }
.profile-row { width:100%; display:flex; gap:10px; text-align:left; align-items:center; padding:7px; border-radius:9px; }
.profile-row:hover { background:var(--panel); }
.avatar { width:29px; height:29px; background:#41644e; color:#e5f1e9; border-radius:50%; display:grid; place-items:center; font-size:12px; }
.profile-row strong { display:block; font-size:13px; font-weight:500; }
.profile-row small { display:block; margin-top:3px; color:var(--faint); font-size:10px; }
.profile-row>.icon { margin-left:auto; width:13px; height:13px; color:var(--muted); }
.workspace { min-width:0; min-height:0; position:relative; display:flex; flex-direction:column; }
.topbar { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:15px; padding:14px 22px; min-height:78px; }
.title-group { display:flex; align-items:center; gap:8px; min-width:0; }
.thread-heading { min-width:0; }
.title-line { display:flex; align-items:center; gap:8px; }
.title-line>.icon { color:var(--muted); width:17px; height:17px; }
h1 { margin:0; font-size:16px; font-weight:600; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.title-meta { margin:6px 0 0 25px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:12px; color:var(--muted); }
.demo-label { font-size:10px; border:1px solid var(--border); border-radius:4px; padding:1px 4px; color:var(--muted); }
.header-actions { display:flex; gap:3px; align-items:center; flex-shrink:0; }
.header-divider { height:16px; width:1px; background:var(--border); margin:0 5px; }
.sidebar-open { display:none; }
.workspace-body { display:grid; grid-template-columns:minmax(0,1fr) 314px; flex:1; min-height:0; }
.conversation { overflow-y:auto; min-height:0; scroll-behavior:smooth; scrollbar-width:thin; scrollbar-color:var(--border) transparent; padding-bottom:184px; outline:none; }
.reading-column { max-width:790px; margin:0 auto; padding:14px 40px 0; }
.reading-column.wide-reading { max-width:1020px; }
.context-start { display:flex; justify-content:space-between; gap:15px; font-size:11px; color:var(--faint); padding:5px 0 13px; }
.example-disclaimer { font-size:11px; color:var(--faint); margin:0 0 30px; }
.message { margin:0 0 30px; scroll-margin-top:24px; border-radius:13px; }
.message-meta { display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:12px; margin:0 0 11px; min-height:18px; }
.message-meta>span { display:flex; gap:8px; align-items:center; }
.message-meta time { color:var(--faint); font-size:11px; }
.agent-mark { display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; width:21px; height:21px; border-radius:6px; background:var(--raised); color:var(--text); }
.agent-mark.claude { color:#d0a086; }.agent-mark.grok { color:#a5b4d1; }
.message-body { font-size:16px; line-height:1.85; overflow-wrap:anywhere; }
.message-body p { margin:0 0 15px; }
.message-body p:last-child { margin-bottom:0; }
.message-body h2 { font-size:17px; font-weight:600; margin:3px 0 13px; letter-spacing:-.35px; }
.message-body ul { margin:14px 0; padding-left:23px; }
.message-body li { padding-left:2px; margin:5px 0; }
.user-message { margin:0 0 31px 70px; }
.user-message .message-meta { justify-content:flex-end; gap:12px; font-size:11px; margin-bottom:8px; }
.user-message .message-body { background:var(--user); border-radius:20px; padding:15px 21px; font-size:16px; line-height:1.75; }
.selected-message { box-shadow:0 0 0 1px var(--accent); outline-offset:4px; }
.assistant-message.selected-message { padding:13px; margin-left:-13px; margin-right:-13px; }
.message-actions { display:flex; margin-top:11px; }
.message-evidence { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--faint); padding:4px 0; }
.message-evidence:hover,.message-evidence.active { color:var(--accent); }
.message-evidence .icon { width:14px; height:14px; }
.tool-message { margin-top:-12px; }
.tool-message details { border:1px solid var(--border); border-radius:10px; overflow:hidden; }
summary { cursor:pointer; list-style:none; }
summary::-webkit-details-marker { display:none; }
.tool-message summary { display:flex; align-items:center; gap:9px; padding:12px 13px; font-size:13px; color:var(--muted); }
.tool-message summary>.icon:first-child { width:16px; height:16px; }
.tool-message summary>.icon:last-child { width:13px; height:13px; margin-left:auto; }
details[open]>summary>.icon:last-child { transform:rotate(90deg); }
.tool-state { font-size:10px; color:var(--faint); margin-left:auto; }
pre { font-family:Consolas,"Malgun Gothic",monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
.tool-message pre { margin:0; border-top:1px solid var(--border); padding:15px; font-size:12px; line-height:1.8; color:var(--muted); }
.message-artifacts { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.artifact-card { display:flex; align-items:center; gap:11px; text-align:left; border:1px solid var(--border); background:var(--panel); border-radius:11px; padding:12px; max-width:100%; min-width:0; }
.artifact-card:hover { background:var(--hover); }
.file-icon { width:32px; height:36px; display:grid; place-items:center; background:var(--raised); border-radius:6px; color:var(--muted); flex-shrink:0; }
.file-icon.image { color:#a1b5aa; }
.file-icon .icon { width:18px; height:18px; }
.file-label { min-width:0; flex:1; }
.file-label strong { display:block; font-size:13px; line-height:1.5; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-label small { display:block; color:var(--muted); margin-top:5px; font-size:10px; }
.artifact-card>.icon { width:12px; height:12px; color:var(--faint); }
.image-attachment { padding:0; border-radius:12px; overflow:hidden; border:1px solid var(--border); background:var(--panel); width:100%; text-align:left; }
.image-attachment img { display:block; width:100%; height:auto; max-height:190px; object-fit:contain; background:#202424; }
.image-attachment>span { display:flex; align-items:center; gap:7px; padding:10px 13px; font-size:12px; }
.image-attachment .icon { width:15px; height:15px; color:var(--muted); }
.image-attachment small { margin-left:auto; font-size:10px; color:var(--muted); }
.context-end { display:flex; align-items:center; gap:8px; color:var(--faint); font-size:11px; margin:42px 0 12px; white-space:nowrap; }
.context-end>span { height:1px; background:var(--border); flex:1; }
.context-end .icon { width:13px; height:13px; }
.lineage-banner { width:100%; padding:12px; display:flex; gap:8px; align-items:center; background:var(--panel); border-radius:9px; margin:10px 0 22px; color:var(--muted); font-size:12px; text-align:left; }
.lineage-banner strong { color:var(--text); font-weight:500; }
.lineage-banner>.icon:last-child { margin-left:auto; width:13px; height:13px; }
.inspector { min-height:0; padding:9px 18px 25px 0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.inspector-card { background:var(--panel); border-radius:17px; padding:16px; }
.inspector-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.inspector-heading h2 { margin:0; font-size:14px; font-weight:500; }
.inspector-heading .icon-button { width:25px; height:25px; }
.inspector-heading .icon-button .icon { width:15px; height:15px; }
.panel-tabs { display:flex; gap:19px; border-bottom:1px solid var(--border); }
.panel-tabs button { padding:8px 0 12px; color:var(--muted); font-size:13px; border-bottom:2px solid transparent; }
.panel-tabs button.active { color:var(--text); border-bottom-color:var(--text); }
.panel-tabs button span { margin-left:5px; color:var(--muted); font-size:11px; }
.panel-intro { font-size:11px; line-height:1.7; color:var(--muted); margin:15px 0 22px; }
.file-group { margin-bottom:23px; }
.file-group h3 { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:500; color:var(--muted); margin:0 0 7px; }
.file-group h3 span { color:var(--faint); font-size:10px; }
.artifact-card.compact { border:0; border-radius:7px; padding:9px 3px; width:100%; background:transparent; gap:9px; }
.artifact-card.compact:hover { background:var(--raised); }
.compact .file-label strong { font-size:12px; }
.compact .file-icon { width:27px; height:31px; }
.selection-caption { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:5px; font-size:11px; color:var(--accent); margin:14px 0 19px; }
.source-details { border-top:1px solid var(--border); margin-top:7px; padding-top:16px; }
.source-details summary { display:flex; font-size:12px; color:var(--muted); align-items:center; justify-content:space-between; }
.source-details summary .icon { width:12px; height:12px; }
dl { display:grid; grid-template-columns:65px minmax(0,1fr); gap:13px 7px; font-size:11px; line-height:1.6; margin:17px 0; }
dt { color:var(--faint); }dd { margin:0; overflow-wrap:anywhere; }
code { font-family:Consolas,monospace; font-size:11px; }
.git-reference { border-top:1px solid var(--border); margin-top:17px; padding-top:16px; }
.git-reference summary { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; }
.git-reference summary .icon { width:14px; height:14px; }
.git-reference summary>.icon:last-child { margin-left:auto; width:12px; height:12px; }
.git-reference p { font-size:12px; line-height:1.8; color:var(--muted); }
.inspector-footnote { font-size:10px; color:var(--faint); text-align:center; padding:15px 0; }
.small-chip { display:inline-block; color:var(--accent); background:var(--raised); border:1px solid var(--border); border-radius:5px; padding:4px 6px; font-size:10px; }
.analysis-notice { padding:17px 0 12px; }
.analysis-notice p { font-size:11px; line-height:1.7; color:var(--muted); }
.flow-list { list-style:none; padding:0 0 0 7px; margin:6px 0 25px; }
.flow-list li { padding:0 0 20px 17px; border-left:1px solid var(--border); position:relative; }
.flow-list li:before { content:""; position:absolute; width:7px; height:7px; background:var(--accent); border-radius:50%; left:-4px; top:7px; }
.flow-list li:last-child { padding-bottom:0; border-left-color:transparent; }
.flow-list button { display:block; text-align:left; padding:0; }
.flow-list button:hover strong { text-decoration:underline; }
.flow-list span { display:block; color:var(--muted); font-size:11px; margin-bottom:6px; }
.flow-list strong { display:block; font-size:13px; font-weight:500; line-height:1.65; }
.flow-list small { display:flex; align-items:center; gap:3px; color:var(--faint); font-size:10px; margin-top:8px; }
.flow-list small .icon { width:11px; height:11px; }
.panel-empty { display:flex; align-items:center; flex-direction:column; text-align:center; padding:25px 4px; color:var(--muted); }
.panel-empty>.icon { width:25px; height:25px; margin-bottom:15px; }
.panel-empty strong { font-size:13px; line-height:1.7; font-weight:500; }
.panel-empty p { font-size:11px; line-height:1.7; }
.panel-empty .soft-button { font-size:12px; margin-top:8px; }
.composer-dock { position:absolute; z-index:3; bottom:0; left:0; right:314px; background:linear-gradient(transparent,var(--bg) 24%); padding:29px 40px 12px; }
.composer-inner { max-width:710px; margin:0 auto; }
.composer-box { background:var(--user); border:1px solid var(--border); border-radius:23px; padding:15px 16px 10px; }
.composer-box textarea { display:block; width:100%; resize:none; background:none; border:0; line-height:1.6; font-size:16px; max-height:110px; min-height:48px; }
.composer-box textarea::placeholder { color:var(--muted); }
.composer-tools { display:flex; align-items:center; gap:6px; margin-top:5px; }
.composer-tools>.icon-button { width:27px; height:30px; }
.composer-tools>span { font-size:11px; color:var(--muted); }
.composer-right { margin-left:auto; display:flex; align-items:center; gap:13px; }
.composer-right>span { font-size:11px; color:var(--muted); }
.send-button { width:33px; height:33px; display:grid; place-items:center; background:var(--text); color:var(--bg); border-radius:50%; }
.send-button:hover { opacity:.8; }
.send-button .icon { width:19px; height:19px; }
.composer-caption { font-size:10px; color:var(--faint); text-align:center; margin-top:9px; }
body.panel-closed .workspace-body { grid-template-columns:minmax(0,1fr); }
body.panel-closed .inspector { display:none; }
body.panel-closed .composer-dock { right:0; }
body.sidebar-closed .app-shell { grid-template-columns:minmax(0,1fr); }
body.sidebar-closed .sidebar { display:none; }
body.sidebar-closed .sidebar-open { display:flex; }
.drawer-backdrop { display:none; }
dialog { color:var(--text); background:var(--panel); border:1px solid var(--border); border-radius:17px; padding:0; width:min(720px,calc(100vw - 32px)); max-height:85dvh; box-shadow:var(--shadow); }
dialog::backdrop { background:#0009; backdrop-filter:blur(3px); }
.modal-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:23px 25px 18px; border-bottom:1px solid var(--border); }
.modal-header>div { min-width:0; }
.modal-header h2 { margin:6px 0 0; font-size:18px; font-weight:550; overflow-wrap:anywhere; }
.eyebrow { color:var(--muted); font-size:12px; }
.settings-body { padding:8px 25px 23px; }
.setting-row { display:flex; gap:20px; align-items:center; justify-content:space-between; padding:19px 0; border-bottom:1px solid var(--border); }
.setting-row strong { display:block; font-size:14px; font-weight:500; }
.setting-row small { display:block; font-size:12px; color:var(--muted); margin-top:7px; line-height:1.7; }
.setting-row select { padding:8px 13px; border:1px solid var(--border); background:var(--raised); border-radius:7px; }
.setting-row input[type=checkbox] { width:18px; height:18px; accent-color:var(--accent); flex-shrink:0; }
.settings-footer { display:flex; justify-content:space-between; margin-top:24px; }
.artifact-preview { padding:24px; }
.artifact-preview>img { display:block; max-width:100%; border-radius:9px; margin:auto; }
.artifact-preview pre { font-size:14px; line-height:1.9; margin:0; }
.preview-caption { font-size:12px; color:var(--muted); line-height:1.8; margin:16px 0 0; }
.missing-preview { text-align:center; padding:35px 10px; }
.missing-preview>.icon { width:35px; height:35px; color:var(--muted); }
.missing-preview h3 { font-size:17px; font-weight:500; }
.missing-preview p { color:var(--muted); font-size:14px; line-height:1.8; }
.modal-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid var(--border); padding:16px 24px; }
.modal-footer>span { font-size:11px; color:var(--muted); line-height:1.7; }
.modal-footer .soft-button { flex-shrink:0; font-size:12px; }
.about-content { padding:25px; font-size:15px; line-height:1.9; }
.about-content p { margin:0 0 17px; }.about-content p:last-child { margin:0; }
.copy-field { display:flex; gap:10px; padding:22px; }.copy-field input { min-width:0; flex:1; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:10px; font-size:13px; }
.toast { position:fixed; bottom:26px; left:50%; transform:translate(-50%,15px); background:var(--text); color:var(--bg); box-shadow:var(--shadow); padding:12px 18px; font-size:13px; line-height:1.6; border-radius:10px; z-index:40; opacity:0; pointer-events:none; transition:opacity .15s,transform .15s; max-width:calc(100vw - 30px); }
.toast.visible { opacity:1; transform:translate(-50%,0); }
.no-script { position:fixed; inset:0; background:var(--bg); display:grid; place-items:center; padding:30px; font-size:16px; }
@media(min-width:1650px) { .app-shell { grid-template-columns:275px minmax(0,1fr); }.workspace-body { grid-template-columns:minmax(0,1fr) 340px; }.composer-dock { right:340px; }.inspector { padding-right:24px; }.reading-column { padding-top:25px; } }
@media(max-width:1190px) { .workspace-body { grid-template-columns:minmax(0,1fr); }.inspector { display:none; }.composer-dock { right:0; }.topbar { padding:13px 17px; }.reading-column { padding-left:32px; padding-right:32px; }body.inspector-drawer .inspector { display:block; position:absolute; z-index:12; right:0; top:74px; bottom:0; width:330px; padding:12px; background:var(--bg); border-left:1px solid var(--border); }body.inspector-drawer .drawer-backdrop { display:block; position:fixed; inset:0; background:#0005; z-index:10; }.workspace-body .inspector { z-index:12; } }
@media(max-width:760px) { .app-shell { grid-template-columns:minmax(0,1fr); }.sidebar { display:none; }.sidebar-open { display:flex; }.topbar { min-height:73px; gap:5px; padding:10px; }.title-line>.icon { display:none; }h1 { font-size:14px; max-width:calc(100vw - 176px); }.title-meta { margin-left:0; gap:5px; font-size:10px; }.title-meta .demo-label { display:none; }.header-actions .quiet-button,.header-divider,.header-actions button[data-action=share] { display:none; }.header-actions { gap:0; }.header-actions .icon-button { width:31px; }.reading-column { padding:5px 21px 0; }.context-start { font-size:10px; }.example-disclaimer { margin-bottom:24px; line-height:1.7; }.user-message { margin-left:24px; }.message-body,.user-message .message-body { font-size:16px; }.user-message .message-body { padding:13px 16px; }.message-body h2 { font-size:17px; }.tool-state { display:none; }.image-attachment small { display:none; }.composer-dock { padding:25px 13px 9px; }.composer-box { padding:12px 12px 8px; border-radius:19px; }.composer-right>span { display:none; }.composer-caption { font-size:10px; line-height:1.5; }.composer-tools>span { font-size:10px; }.conversation { padding-bottom:190px; }.inspector-footnote { line-height:1.7; }body.sidebar-drawer .sidebar { display:flex; position:fixed; z-index:20; top:0; bottom:0; left:0; width:min(290px,85vw); border-right:1px solid var(--border); }body.sidebar-drawer .drawer-backdrop { display:block; position:fixed; z-index:15; inset:0; background:#0008; }body.inspector-drawer .inspector { width:min(350px,calc(100vw - 20px)); top:0; padding-top:16px; }.modal-header { padding:19px; }.modal-header h2 { font-size:16px; }.settings-body { padding:5px 19px 20px; }.modal-footer { flex-direction:column; align-items:stretch; }.artifact-preview { padding:18px; }.setting-row { gap:12px; }.setting-row small { max-width:250px; }.copy-field { flex-direction:column; } }
@media(prefers-reduced-motion:reduce) { .conversation { scroll-behavior:auto; }.toast { transition:none; } }
@media(pointer:coarse) { .icon-button { min-width:42px; min-height:42px; }.thread-row,.project-toggle,.panel-tabs button,.message-evidence { min-height:44px; }.filter-row select { min-height:40px; }.header-actions .icon-button { min-width:39px; }.composer-tools>.icon-button { min-width:38px; }.send-button { width:42px; height:42px; } }
@media print { body { overflow:visible; }.app-shell,.workspace { display:block; height:auto; overflow:visible; }.sidebar,.inspector,.composer-dock,.header-actions,.message-actions,.context-end { display:none!important; }.workspace-body { display:block; }.conversation { overflow:visible; padding:0; }.reading-column { max-width:none; }.message { break-inside:avoid; }.topbar { border-bottom:1px solid #aaa; } }
/* Keep secondary text readable even in the reference's compact layout. */
.version,.search-field kbd,.thread-meta,.project-count,.profile-row small,.prototype-note,
.demo-label,.title-meta,.context-start,.example-disclaimer,.message-meta time,
.user-message .message-meta,.message-evidence,.tool-state,.file-label small,
.image-attachment small,.context-end,.panel-tabs button span,.panel-intro,
.file-group h3 span,.selection-caption,dl,code,.inspector-footnote,.small-chip,
.analysis-notice p,.flow-list span,.flow-list small,.panel-empty p,
.composer-tools>span,.composer-right>span,.composer-caption,.modal-footer>span { font-size:12px; }
.compact .file-label strong,.file-label strong,.panel-tabs button,.source-details summary,.git-reference summary { font-size:14px; }
.search-field kbd { letter-spacing:-.5px; }
.thread-meta { max-width:52px; overflow:hidden; }
.thread-row { gap:7px; }
.composer-tools { flex-wrap:wrap; }
.composer-caption { line-height:1.6; }
@media(max-width:760px) { .composer-tools>span { max-width:calc(100% - 91px); }.title-meta { max-width:calc(100vw - 165px); flex-wrap:nowrap; overflow:hidden; white-space:nowrap; }.context-start { flex-wrap:wrap; gap:7px; }.image-attachment>span { flex-wrap:wrap; } }