/* Shared workspace tokens. Breakpoints: 480, 768, 1024, 1536. */
:root {
 color-scheme: dark; --bg-primary:#191b1e; --bg-secondary:#121416; --surface:#23262a; --surface-hover:#2e3237;
 --text-primary:#f0f1f2; --text-secondary:#a7adb4; --accent:#b6d6ac; --danger:#ff9c9c; --border:#ffffff1c;
 --bg:var(--bg-primary); --bg-alt:var(--bg-primary); --panel:var(--surface); --panel-strong:var(--surface-hover); --panel-soft:var(--bg-secondary); --ink:var(--text-primary); --muted:var(--text-secondary); --accent-soft:#b6d6ac14;
 --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-12:48px;
 --radius-sm:8px; --radius-md:12px; --radius-lg:20px; --layer-content:0; --layer-sticky:10; --layer-overlay:20; --layer-drawer:30; --layer-toast:50;
 --chat-width:880px; --rail-width:clamp(240px,19vw,280px);
}
html,body { background:var(--bg-primary); min-height:0; height:100%; }
body { padding:0; font:14px/1.5 'Segoe UI',system-ui,sans-serif; overscroll-behavior:none; }
button,select,input,textarea { color:inherit; max-width:100%; }
button,summary { cursor:pointer; }
button:disabled { cursor:wait; }
:where(button,summary,select,input,textarea,a,[tabindex]):focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
:where(.page-shell,.control-rail,.conversation-stage,.composer,.message-card,.message-body,.settings-category,.drawer-stack) { min-width:0; }
.page-shell { width:100%; max-width:none; height:100vh; height:min(100dvh,var(--viewport-height,100dvh)); min-height:0; grid-template-columns:var(--rail-width) minmax(0,1fr); gap:0; }
.control-rail { display:flex; position:relative; flex-direction:column; height:100%; min-height:0; gap:24px; padding:24px 16px 16px; overflow:hidden; background:var(--bg-secondary); border-right:1px solid var(--border); scrollbar-gutter:auto; }
.brand-card,.history-card { padding:0; background:none; border:0; border-radius:0; box-shadow:none; min-height:0; }
.brand-bar { flex-wrap:wrap; gap:24px; }
.brand-bar h1 { width:100%; font-size:20px; font-weight:650; letter-spacing:-.7px; padding:0 8px; }
.brand-bar h1::after { content:' / studio'; font-size:13px; font-weight:400; letter-spacing:0; color:var(--muted); }
#newChatButton { width:100%; min-height:44px; text-align:left; padding:10px 14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); }
.brand-meta { display:none; }
.history-card { display:flex; flex-direction:column; flex:1; gap:12px; }
.section-header h2 { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:1px; }
.icon-action { width:44px; height:44px; }
.session-search-input { min-height:44px; background:var(--bg-secondary); border-radius:var(--radius-sm); padding:10px; }
.session-history-list { flex:1; min-height:0; max-height:none; overflow:auto; align-content:start; grid-auto-rows:max-content; }
.session-history-item { min-width:0; background:transparent; border-color:transparent; border-radius:var(--radius-sm); }
.session-history-item:hover,.session-history-item.is-active { background:var(--surface); border-color:transparent; }
.session-history-main,.session-history-title-row { min-width:0; }
.session-history-actions { flex-wrap:wrap; }
.session-menu { min-width:0; }
.session-menu summary { display:grid; place-items:center; width:44px; min-height:44px; border-radius:var(--radius-sm); list-style:none; color:var(--muted); font-size:22px; }
.session-menu summary::-webkit-details-marker { display:none; }
.session-menu summary:hover { background:var(--surface-hover); }
.session-menu[open] { grid-column:1 / -1; }
.session-menu[open] summary { margin-left:auto; }
.session-history-actions { justify-content:flex-end; }
.session-history-actions button { background:var(--surface); }
.session-history-actions button { min-height:36px; min-width:44px; color:var(--muted); }
.tool-drawer { margin-top:auto; flex-shrink:0; border:0; background:none; padding:0; width:100%; }
.tool-toggle { display:flex; gap:10px; align-items:center; width:100%; min-height:44px; padding:12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:transparent; color:var(--muted); }
.sidebar-close { display:none; }
.conversation-stage { position:relative; display:flex; flex-direction:column; gap:0; min-height:0; overflow:hidden; padding-bottom:env(safe-area-inset-bottom,0px); }
.workspace-header { display:flex; flex-shrink:0; align-items:center; gap:12px; min-height:76px; padding:max(12px,env(safe-area-inset-top)) 24px 12px; border-bottom:1px solid var(--border); }
.workspace-heading { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.workspace-heading strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:600; }
.workspace-heading span { color:var(--muted); font-size:12px; }
.workspace-button { min-width:44px; min-height:44px; flex-shrink:0; border:0; border-radius:var(--radius-sm); background:transparent; padding:8px 10px; color:var(--muted); font-size:13px; }
.workspace-button:hover { color:var(--ink); background:var(--surface-hover); }
.command-trigger { display:flex; align-items:center; gap:12px; }
kbd { padding:3px 5px; border:1px solid var(--border); border-radius:4px; font:11px/1.4 monospace; }
.brain-stage { display:none; }
.transcript { flex:1; min-height:0; background:transparent; border:0; box-shadow:none; border-radius:0; padding:24px max(24px,calc((100% - var(--chat-width))/2)); gap:20px; overscroll-behavior:contain; }
.message-card { width:100%; max-width:100%; border-radius:var(--radius-md); padding:12px 16px; flex-shrink:0; }
.message-card.assistant { background:transparent; border:0; padding:8px 0; }
.message-card.user { width:fit-content; max-width:88%; background:var(--surface-hover); border:1px solid var(--border); }
.message-card.system { background:var(--surface); }
.message-body { line-height:1.75; font-size:15px; overflow-wrap:anywhere; }
.markdown-body { white-space:normal; }
.markdown-body > :first-child { margin-top:0; }
.markdown-body > :last-child { margin-bottom:0; }
.markdown-body p,.markdown-body ul,.markdown-body ol { margin:0 0 16px; }
.markdown-body :is(h1,h2,h3,h4,h5,h6) { margin:24px 0 12px; line-height:1.3; font-weight:600; font-size:1.2em; }
.markdown-body h1 { font-size:1.5em; }
.markdown-body ul,.markdown-body ol { padding-left:24px; }
.markdown-body li { margin:6px 0; }
.markdown-body a,.message-source-link { color:var(--accent); overflow-wrap:anywhere; }
.markdown-body img { display:block; max-width:100%; height:auto; border-radius:var(--radius-sm); }
.markdown-body blockquote { margin:16px 0; padding-left:16px; border-left:3px solid var(--accent); color:var(--muted); }
.markdown-body code { font:.9em/1.6 Consolas,monospace; background:var(--bg-secondary); padding:2px 5px; border-radius:4px; }
.message-scroll { max-width:100%; overflow-x:auto; margin:16px 0; border:1px solid var(--border); border-radius:var(--radius-sm); }
.message-scroll pre { margin:0; padding:16px; white-space:pre; width:max-content; min-width:100%; background:var(--bg-secondary); }
.message-scroll pre code { padding:0; }
.message-scroll table { border-collapse:collapse; min-width:100%; font-size:14px; }
.message-scroll th,.message-scroll td { padding:10px 14px; border:1px solid var(--border); min-width:130px; text-align:left; }
.message-scroll th { background:var(--surface); }
.message-events summary { min-height:44px; padding:10px; color:var(--muted); }
.workspace-welcome { flex:1; min-height:0; overflow:auto; width:min(900px,100%); margin:auto; padding:clamp(24px,5vh,64px) 24px; display:flex; flex-direction:column; align-items:center; text-align:center; justify-content:safe center; }
.conversation-stage:has(.workspace-welcome:not([hidden])) .transcript { display:none; }
.welcome-symbol { position:relative; flex-shrink:0; width:56px; height:56px; border:1px solid #b6d6ac40; background:var(--accent-soft); border-radius:18px; color:var(--accent); font-size:40px; font-weight:650; line-height:48px; }
.welcome-symbol span { position:absolute; right:7px; top:0; font-size:16px; }
.welcome-eyebrow { margin:24px 0 8px; color:var(--muted); font-size:10px; letter-spacing:2px; }
.workspace-welcome h2 { font-size:clamp(25px,2.7vw,36px); letter-spacing:-1px; font-weight:500; line-height:1.2; margin:0 0 12px; }
.workspace-welcome > p:not(.welcome-eyebrow) { color:var(--muted); font-size:14px; margin:0; }
.starter-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); flex-shrink:0; gap:12px; width:100%; margin-top:32px; text-align:left; }
.starter-grid button { min-width:0; display:flex; flex-direction:column; gap:8px; text-align:left; padding:20px 16px; background:transparent; border:1px solid var(--border); border-radius:var(--radius-md); }
.starter-grid button:hover { background:var(--accent-soft); border-color:#b6d6ac66; }
.starter-grid button > span { color:var(--accent); font-size:22px; }
.starter-grid strong { font-size:14px; font-weight:500; }
.starter-grid small { color:var(--muted); font-size:12px; line-height:1.6; }
.composer { position:static; z-index:var(--layer-content); width:min(var(--chat-width),calc(100% - 48px)); margin:0 auto; flex-shrink:0; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:12px; background:var(--surface); border:1px solid #ffffff30; border-radius:16px; box-shadow:none; }
.composer:focus-within { border-color:#b6d6ac88; box-shadow:0 0 0 2px var(--accent-soft); }
#composerInput { grid-column:1 / -1; min-height:36px; max-height:25dvh; font-size:16px; line-height:1.5; padding:4px; border-radius:0; }
.workspace-composer-tools { display:flex; flex-wrap:wrap; align-items:center; gap:4px; min-width:0; }
.workspace-mode { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; }
.workspace-mode select { min-height:44px; max-width:150px; padding:8px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface-hover); color:var(--ink); font-size:13px; }
.composer-actions { align-self:end; }
#sendButton { width:44px; height:44px; min-height:44px; border-radius:var(--radius-sm); background:var(--accent); color:var(--bg-secondary); border:0; box-shadow:none; }
.send-glyph { filter:brightness(.2); }
.workspace-hint { flex-shrink:0; text-align:center; margin:10px 12px 16px; font-size:11px; color:var(--muted); }
.workspace-hint span { padding:0 6px; }
.desktop-window-controls.conversation-toolbar { position:static; flex-shrink:0; justify-content:flex-end; flex-wrap:wrap; padding:4px 16px; }
.sidebar-collapsed .page-shell { grid-template-columns:minmax(0,1fr); }
.sidebar-collapsed .control-rail { display:none; }
.sidebar-backdrop { position:fixed; inset:0; z-index:var(--layer-overlay); border:0; background:#0009; width:100%; }
.command-palette,.settings-dialog { color:var(--ink); background:var(--surface); border:1px solid #ffffff30; border-radius:var(--radius-lg); padding:20px; box-shadow:0 16px 48px #0005; }
.command-palette { width:min(540px,calc(100% - 32px)); max-height:min(600px,85dvh); }
dialog::backdrop { background:#080a0dbb; }
.palette-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.palette-heading h2 { font-size:20px; margin:0; }
.palette-heading p { margin:4px 0 0; color:var(--muted); font-size:13px; }
#commandSearch { width:100%; min-height:44px; padding:12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-secondary); font-size:16px; }
.command-results { display:flex; flex-direction:column; gap:4px; max-height:45dvh; overflow:auto; margin-top:12px; }
.command-results button { min-height:44px; text-align:left; padding:10px; border:0; border-radius:var(--radius-sm); background:transparent; }
.command-results button:hover,.command-results button:focus { background:var(--surface-hover); }
.palette-note { color:var(--muted); font-size:12px; margin-bottom:0; }
.settings-dialog { width:min(820px,calc(100% - 48px)); height:min(720px,88dvh); max-height:var(--viewport-height,100dvh); }
.settings-dialog[open] { display:flex; flex-direction:column; }
.settings-dialog > .palette-heading { flex-shrink:0; }
.settings-categories { display:flex; flex-wrap:wrap; gap:6px; padding-bottom:16px; flex-shrink:0; border-bottom:1px solid var(--border); }
.settings-categories button { min-height:44px; padding:8px 12px; border:1px solid transparent; border-radius:var(--radius-sm); background:transparent; color:var(--muted); }
.settings-categories button[aria-pressed='true'] { background:var(--accent-soft); border-color:#b6d6ac40; color:var(--accent); }
.settings-dialog .drawer-stack { position:static; display:block; min-height:0; max-height:none; width:100%; overflow:auto; padding:16px 4px 4px; background:none; border:0; box-shadow:none; overscroll-behavior:contain; }
.settings-category { display:grid; align-content:start; gap:12px; }
.drawer-stack :is(.command-card,.sidebar-panel,.inspector-pane) { background:var(--bg-secondary); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:none; }
.drawer-stack :is(button,summary,input:not([type='checkbox']),select) { min-height:44px; }
.drawer-stack :is(input,textarea,select) { font-size:16px; min-width:0; }
.drawer-stack :is(pre,p,strong,small,span) { overflow-wrap:anywhere; }
.drawer-stack pre { white-space:pre-wrap; max-width:100%; overflow:auto; }
.drawer-stack :is(.settings-stack,.account-stack,.admin-panel,.memory-lab,.utility-stack) { min-width:0; }
.drawer-stack .memory-toolbar { display:flex; flex-wrap:wrap; }
.drawer-stack .memory-toolbar > * { flex:1 1 120px; min-width:0; }
.drawer-stack .nav-list { grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); }
.drawer-stack .nav-item { min-width:0; }
.drawer-stack .settings-toggle { gap:16px; }
.drawer-stack .settings-toggle > span { min-width:0; }
.toast-region { z-index:var(--layer-toast); max-width:calc(100% - 24px); }
@media (min-width:1536px) { .transcript { padding-top:32px; } }
@media (max-width:1023px) {
 .page-shell { grid-template-columns:minmax(0,1fr); }
 .control-rail { position:fixed; inset:var(--viewport-top,0px) auto auto 0; height:var(--viewport-height,100dvh); width:min(320px,calc(100% - 32px)); z-index:var(--layer-drawer); padding-top:max(24px,env(safe-area-inset-top)); padding-bottom:max(16px,env(safe-area-inset-bottom)); }
 .sidebar-close { display:block; position:absolute; right:12px; top:12px; }
 .brand-bar h1 { padding-right:36px; }
 .session-history-actions button { min-height:44px; }
}
@media (max-width:767px) {
 .workspace-header { padding-left:12px; padding-right:12px; min-height:68px; gap:8px; }
 .command-trigger kbd { display:none; }
 .workspace-welcome { padding:24px 20px; }
 .starter-grid { grid-template-columns:1fr; margin-top:24px; gap:8px; }
 .starter-grid button { display:grid; grid-template-columns:28px minmax(0,1fr); gap:2px 10px; padding:12px; }
 .starter-grid button > span { grid-row:span 2; }
 .starter-grid small { grid-column:2; }
 .transcript { padding:20px 16px; }
 .composer { width:calc(100% - 24px); }
 .workspace-hint { font-size:10px; margin-bottom:10px; }
 .workspace-hint span { padding:0 2px; }
 .settings-dialog { width:100%; max-width:100%; height:var(--viewport-height,100dvh); max-height:var(--viewport-height,100dvh); margin:0; border:0; border-radius:0; padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom)); }
 .settings-categories { gap:4px; padding-bottom:12px; }
 .settings-categories button { flex:1 1 auto; font-size:12px; padding:8px; }
}
@media (max-width:479px) {
 .workspace-mode { font-size:0; gap:0; }
 .workspace-mode select { width:112px; font-size:12px; }
 .workspace-composer-tools { gap:0; }
 .workspace-composer-tools .workspace-button { padding:8px 6px; font-size:12px; }
 .composer { padding:8px; gap:4px; }
 .workspace-hint { font-size:0; min-height:8px; margin:4px 0; }
 .workspace-hint span { display:none; }
 .message-card.user { max-width:94%; }
 .workspace-welcome { padding:24px 16px; }
 .welcome-eyebrow { margin-top:16px; }
 .drawer-stack .admin-token-row { flex-wrap:wrap; }
}
@media (max-height:500px) {
 .workspace-header { min-height:56px; padding-top:4px; padding-bottom:4px; }
 .workspace-welcome { justify-content:flex-start; padding-top:16px; }
 .workspace-hint { margin:4px; font-size:0; }
 .control-rail { gap:12px; padding-top:12px; }
 .brand-bar { gap:12px; }
}
@media (max-width:479px) and (max-height:700px) {
 .workspace-welcome { padding:16px; }
 .welcome-symbol { width:40px; height:40px; font-size:30px; line-height:35px; border-radius:12px; }
 .welcome-eyebrow { display:none; }
 .workspace-welcome h2 { margin-top:12px; font-size:24px; }
 .workspace-welcome > p:not(.welcome-eyebrow) { font-size:12px; }
 .starter-grid { margin-top:16px; }
 .starter-grid button { padding:8px 12px; align-items:center; min-height:44px; }
 .starter-grid button > span { grid-row:auto; }
 .starter-grid small { display:none; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }