:root {
  color-scheme: dark;
  font-size: 14px;
  --bg-base:#181818; --bg-surface:#1c1c1c; --bg-rail:#202020;
  --bg-elevated:#2b2b2b; --bg-input:#343434; --bg-row:#242424;
  --border-subtle:#303030; --border-strong:#454545; --border-focus:#80aaf1;
  --text-primary:#ececec; --text-secondary:#b5b5b5; --text-muted:#909090;
  --accent:#3873d2; --accent-contrast:#fff; --user-bubble:#1b477f; --user-text:#f0f5ff;
  --danger:#ef9999; --danger-bg:#352121; --success:#75bda8;
  --radius-sm:7px; --radius-md:12px; --radius-lg:20px;
  --font-stack:"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  --rail-width:52px; --sidebar-width:352px; --conversation-width:736px;
}
:root[data-theme="light"] { color-scheme:light; --bg-base:#fff; --bg-surface:#f7f7f7; --bg-rail:#efefef; --bg-elevated:#fff; --bg-input:#f0f0f0; --bg-row:#f7f7f7; --border-subtle:#e1e1e1; --border-strong:#c7c7c7; --text-primary:#242424; --text-secondary:#555; --text-muted:#707070; --user-bubble:#dceafa; --user-text:#183957; --danger-bg:#ffeded; --danger:#9f3131; }
:root[data-font-size="small"] { font-size:13px; }
:root[data-font-size="large"] { font-size:16px; }
/* Account integrations share the workspace controls and remain legible on mobile. */
#system-api-dialog,#inter-config-dialog { background:var(--bg-elevated) !important; color:var(--text-primary) !important; border-color:var(--border-strong) !important; box-shadow:0 24px 100px #0008; }
#system-api-dialog::backdrop,#inter-config-dialog::backdrop { background:#0009; }
#system-api-dialog h2,#inter-config-dialog h2 { margin:0 0 10px; font-size:1.35rem; line-height:1.4; }
#system-api-dialog p,#inter-config-dialog p { margin:8px 0 14px; overflow-wrap:anywhere; }
#system-api-form fieldset { margin:14px 0; padding:10px 14px; border:1px solid var(--border-strong); border-radius:12px; }
#system-api-form legend { color:var(--text-secondary); padding:0 7px; font-size:.9rem; }
#system-api-form fieldset:nth-of-type(2) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px; }
#system-api-form fieldset label { display:flex !important; align-items:center; gap:8px; min-height:32px; margin:2px 0 !important; }
#system-api-form input[type="checkbox"] { width:16px; height:16px; flex:0 0 16px; accent-color:var(--accent); }
#system-api-key-list article { background:var(--bg-row); border:1px solid var(--border-subtle) !important; border-radius:12px; padding:12px 14px !important; margin:14px 0; }
#system-api-key-list article p:first-child { font-family:ui-monospace,monospace; font-size:.82rem; color:var(--text-secondary); }
#system-api-dialog button,#inter-config-dialog button { min-height:38px; padding:9px 14px; border:1px solid var(--border-strong); border-radius:9px; background:var(--bg-row); }
#system-api-dialog button:hover,#inter-config-dialog button:hover { background:var(--bg-input); }
#system-api-create,#inter-config-save { background:var(--text-primary) !important; color:var(--bg-base) !important; font-weight:600; }
#browser-read-submit,#browser-close { min-height:38px; padding:9px 14px; }
#browser-url { min-height:32px; }
.account-policy { flex-basis:100%; width:100%; min-width:0; border-top:1px solid var(--border-subtle); padding-top:14px; }
.account-policy summary { cursor:pointer; padding:8px 0; font-weight:600; }
.account-policy-models { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; min-width:0; border:1px solid var(--border-subtle); border-radius:12px; margin:12px 0; padding:12px; }
.account-policy-choice { display:flex; gap:9px; align-items:center; min-width:0; padding:5px 0; overflow-wrap:anywhere; }
.account-policy-choice input { width:22px; height:22px; flex:none; }
.account-policy-budgets { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:12px 0; }
.account-policy-budgets label { display:flex; flex-direction:column; gap:7px; min-width:0; }
.account-policy-budgets input { width:100%; max-width:100%; box-sizing:border-box; }
.generated-artifact { display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin:14px 0; min-width:0; }
.generated-image { width:auto; max-width:100%; max-height:720px; border-radius:14px; object-fit:contain; background:var(--bg-row); }
.project-memory-card { max-width:640px; }
.project-memory-field { display:block; width:100%; max-width:100%; box-sizing:border-box; min-height:180px; padding:10px; border:1px solid var(--border-strong); border-radius:8px; background:var(--bg-input); color:var(--text-primary); resize:vertical; }
.project-memory-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
#system-api-ttl,#inter-config-dialog input:not([type="checkbox"]),#inter-config-dialog select { width:100%; padding:10px 12px; background:var(--bg-input); border:1px solid var(--border-strong); border-radius:9px; }
#system-api-ttl { max-width:130px; }
#inter-config-dialog label { display:block; margin-top:8px; color:var(--text-secondary); }
#inter-config-dialog input[type="file"]::file-selector-button { margin-right:10px; border:1px solid var(--border-strong); border-radius:7px; padding:6px 9px; background:var(--bg-row); color:var(--text-primary); }
@media(max-width:480px) { #system-api-form fieldset:nth-of-type(2) { grid-template-columns:1fr; } #system-api-dialog,#inter-config-dialog { padding:18px !important; } }
[hidden] { display:none !important; }
*,*::before,*::after { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; }
body.central-workspace { font-family:var(--font-stack); font-size:1rem; line-height:1.6; color:var(--text-primary); background:var(--bg-base); overflow:hidden; -webkit-font-smoothing:antialiased; }
button,input,select,textarea { font:inherit; color:inherit; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button { border:0; background:none; cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.42; }
a { color:inherit; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:2px solid var(--border-focus); outline-offset:3px; }
button, input,select,textarea { min-width:0; }
.icon { display:block; width:18px; height:18px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; }
.icon.small { width:14px; height:14px; }
.icon.tiny { width:12px; height:12px; }
.icon.subtle { color:var(--text-muted); width:15px; height:15px; }
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; border:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.muted { color:var(--text-muted); }
.spacer { flex:1; min-width:0; }
.shell { display:grid; grid-template-columns:var(--rail-width) var(--sidebar-width) minmax(0,1fr); height:100dvh; width:100%; }
.app-rail { background:var(--bg-rail); display:flex; flex-direction:column; align-items:center; padding:10px 6px; gap:8px; border-right:1px solid var(--border-subtle); z-index:41; }
.rail-top,.rail-bottom { display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; }
.rail-bottom { margin-top:auto; }
.rail-button { display:flex; align-items:center; justify-content:center; width:36px; height:36px; padding:8px; border-radius:10px; color:var(--text-muted); }
.rail-button:hover,.rail-button.active,.rail-button[aria-current="page"] { color:var(--text-primary); background:var(--bg-elevated); }
.rail-button.active { position:relative; }
.rail-button.active::after { content:""; position:absolute; width:6px; height:6px; background:var(--accent); border-radius:50%; right:5px; top:4px; }
.rail-divider { height:1px; background:var(--border-subtle); width:24px; margin:4px 0; }
.avatar { display:inline-flex; flex-shrink:0; align-items:center; justify-content:center; width:25px; height:25px; border-radius:50%; background:#d9907e; color:#fff; font-size:10px; font-weight:550; }
.sidebar { background:var(--bg-surface); border-right:1px solid var(--border-subtle); min-width:0; height:100dvh; overflow:hidden; }
.sidebar-view { display:flex; flex-direction:column; min-height:0; height:100%; padding:10px 8px; }
.sidebar-header { display:flex; align-items:center; gap:8px; min-height:42px; padding:0 8px 3px; }
.sidebar-header h2 { font-size:1.2rem; font-weight:600; margin:0; }
.brand { display:flex; align-items:center; gap:5px; margin-right:auto; font-size:1.24rem; font-weight:600; letter-spacing:-.025em; }
.icon-button { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:6px; flex-shrink:0; border-radius:8px; color:var(--text-secondary); text-decoration:none; }
.icon-button:hover:enabled { background:var(--bg-elevated); color:var(--text-primary); }
.sidebar-action { display:flex; align-items:center; gap:10px; min-height:36px; width:100%; padding:7px 9px; text-align:left; border-radius:8px; color:var(--text-primary); }
.sidebar-action:hover { background:var(--bg-elevated); }
.search-control { display:flex; align-items:center; gap:7px; min-width:0; padding:7px 10px; border-radius:20px; background:var(--bg-elevated); color:var(--text-muted); }
.search-control input { display:block; min-width:0; width:100%; border:0; background:none; outline:none; font-size:.9rem; line-height:1.5; }
.search-control .icon { width:14px; height:14px; }
#sidebar-search-wrap { margin:8px 8px 14px; }
#settings-sidebar>.search-control { margin:2px 2px 16px; }
.sidebar-section-heading { display:flex; align-items:center; justify-content:space-between; min-width:0; padding:10px 8px 5px; gap:8px; color:var(--text-muted); }
.sidebar-section-heading h2 { display:flex; align-items:center; gap:4px; margin:0; font-size:.9rem; font-weight:600; }
.sidebar-section-heading .icon-button { width:24px; height:24px; padding:4px; }
.projects-section { margin-bottom:16px; }
.project-list .empty { margin:4px 12px; font-size:.9rem; color:var(--text-muted); }
.project-list button,.project-item { display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:8px; width:100%; text-align:left; }
.recent-heading { padding-top:4px; }
#conversation-list { overflow-y:auto; min-height:0; flex:1; display:flex; flex-direction:column; gap:2px; padding:2px 0 12px; scrollbar-width:thin; scrollbar-color:#484848 transparent; }
button.conversation { display:block; width:100%; min-height:32px; text-align:left; padding:6px 9px; border-radius:8px; line-height:1.45; font-size:.96rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
button.conversation:hover,button.conversation.active { background:var(--bg-elevated); }
.empty { color:var(--text-muted); font-size:.9rem; line-height:1.5; }
#conversation-list>.empty { margin:8px 10px; }
.sidebar-footer { display:flex; align-items:center; min-width:0; gap:7px; padding:10px 9px 2px; font-size:.75rem; color:var(--text-muted); }
#account-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:400; }
.connection-dot { width:5px; height:5px; flex-shrink:0; border-radius:50%; background:var(--success); }
.main { position:relative; display:flex; min-width:0; min-height:0; height:100dvh; background:var(--bg-base); }
/* The column itself scrolls when the composer (attachments + Work notice) outgrows a short
   viewport or the mobile keyboard; otherwise #messages keeps scrolling on its own as before. */
.chat-view { display:flex; flex-direction:column; min-width:0; min-height:0; width:100%; height:100%; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#484848 transparent; }
.topbar { position:relative; display:flex; align-items:center; flex-shrink:0; gap:12px; min-height:54px; padding:8px 16px; }
.conversation-heading { display:flex; gap:10px; align-items:center; min-width:0; max-width:40%; }
.project-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; font-size:.94rem; }
.conversation-heading .icon { width:16px; height:16px; }
#menu-button { display:none; }
.mode-switch { display:flex; align-items:center; border-radius:22px; background:#252525; padding:1px; gap:0; width:224px; height:36px; flex-shrink:0; }
.mode-switch button { flex:1; align-self:stretch; color:var(--text-secondary); border:1px solid transparent; border-radius:22px; font-size:.94rem; font-weight:600; }
.mode-switch button.selected,.mode-switch button[aria-pressed="true"] { background:#303030; border-color:#414141; color:var(--text-primary); }
.workspace-home .topbar>.mode-switch { position:absolute; left:50%; transform:translateX(-50%); }
.workspace-home .conversation-heading { visibility:hidden; }
.work-badge { font-size:.74rem; line-height:1.3; color:var(--text-muted); white-space:nowrap; }
.work-badge::before { content:""; display:inline-block; width:4px; height:4px; border-radius:50%; background:var(--success); margin:0 5px 2px 0; }
#work-button { border:1px solid var(--border-subtle); background:var(--bg-rail); }
.messages { flex:1; min-height:0; overflow-y:auto; padding:32px 28px 26px; display:flex; flex-direction:column; gap:28px; scrollbar-width:thin; scrollbar-color:#484848 transparent; }
.welcome { width:100%; max-width:var(--conversation-width); margin:auto; text-align:center; }
.welcome h1 { margin:0; font-size:2rem; line-height:1.35; font-weight:400; letter-spacing:-.02em; }
.welcome .eyebrow,.welcome>p,.welcome .suggestions { display:none; }
.workspace-home .messages { flex:0 0 auto; margin-top:auto; overflow:visible; padding-top:20px; padding-bottom:18px; }
.workspace-home .composer-area { margin-bottom:auto; }
.message { display:flex; flex-direction:column; gap:8px; width:100%; max-width:var(--conversation-width); margin:0 auto; }
.message-label { color:var(--text-muted); font-size:.8rem; font-weight:500; }
.message-content { white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere; font-size:1rem; line-height:1.65; }
.message.user { align-items:flex-end; }
.message.user .message-label { display:none; }
.message.user .message-content { max-width:76%; border-radius:18px; background:var(--user-bubble); color:var(--user-text); padding:10px 16px; }
.message.assistant .message-label { display:none; }
.message.assistant .message-content { padding:8px 0; }
.composer-area { position:relative; flex-shrink:0; width:calc(100% - 48px); max-width:var(--conversation-width); margin:0 auto; padding:0 0 9px; }
.composer-box { position:relative; display:flex; flex-direction:column; gap:12px; width:100%; min-width:0; background:var(--bg-input); border:1px solid #3e3e3e; border-radius:24px; padding:12px 12px 10px; }
.composer-box:focus-within { border-color:#505050; }
#prompt { display:block; resize:none; outline:none; border:0; width:100%; min-height:35px; max-height:200px; padding:1px 0; background:transparent; font-size:1rem; line-height:1.5; }
#prompt:focus-visible { outline:none; }
#prompt::placeholder { color:#8b8b8b; opacity:1; }
.composer-actions { display:flex; align-items:center; gap:8px; min-width:0; }
.plus-control { position:relative; width:32px; height:32px; flex-shrink:0; }
.plus-control>.icon-button { width:32px; padding:7px; }
.legacy-attach { position:absolute; inset:0; opacity:0; pointer-events:none; }
.access-status { display:inline-flex; align-items:center; flex-shrink:0; gap:5px; font-size:.86rem; color:#f88748; white-space:nowrap; }
.access-status .icon { width:14px; height:14px; }
.model-control { position:relative; min-width:0; max-width:45%; flex:0 1 auto; }
.model-menu-trigger { display:flex; align-items:center; justify-content:flex-end; gap:5px; min-width:0; min-height:30px; max-width:100%; font-size:.86rem; padding:3px 2px 3px 6px; border-radius:8px; }
.model-menu-trigger:hover { background:#444; }
#model-current-label { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
select.native-model-control { position:absolute; inset:0; width:100%; height:100%; min-width:0; max-width:100%; opacity:0; pointer-events:none; padding:0; border:0; }
.voice-button { width:24px; padding:3px; }
.send-button { width:32px; min-width:32px; height:32px; display:flex; align-items:center; justify-content:center; padding:5px; border-radius:50%; background:var(--accent); color:var(--accent-contrast); flex-shrink:0; }
.send-button .icon { width:20px; height:20px; }
.send-button:disabled { opacity:.6; background:#636363; }
.composer-context { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:7px 14px; margin:0 12px; border-radius:0 0 20px 20px; background:#252525; }
.composer-context button { display:flex; align-items:center; gap:7px; padding:2px 4px; font-size:.86rem; }
.composer-context .icon { width:15px; height:15px; }
.composer-context .context-more { margin-left:auto; justify-content:center; }
.composer-note { text-align:center; color:var(--text-muted); font-size:.73rem; margin:8px 0 0; line-height:1.4; }
.workspace-home .composer-note { visibility:hidden; }
body:not(.workspace-home) .composer-context { display:none; }
.attachment-list { display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
.attachment-list:not(:empty) { margin-bottom:8px; }
.file-chip { display:inline-flex; align-items:center; min-width:0; max-width:100%; gap:6px; border:1px solid var(--border-strong); border-radius:10px; background:var(--bg-elevated); padding:6px 10px; font-size:.85rem; overflow-wrap:anywhere; }
.remove-file { color:var(--text-secondary); flex-shrink:0; padding:0 3px; font-size:17px; }
/* Attachment processing state stays visible: read, partial, stored only, image, OCR or error. */
.file-chip-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:22ch; }
.file-chip-state,.file-status { flex-shrink:0; border-radius:999px; padding:1px 7px; font-size:.75rem; background:var(--bg-input); color:var(--text-secondary); }
.state-ready .file-chip-state,.file-status.state-ready { color:var(--success); }
.state-partial .file-chip-state,.state-ocr_required .file-chip-state,.file-status.state-partial,.file-status.state-ocr_required { color:#e5c07b; }
.state-error .file-chip-state,.state-unavailable .file-chip-state,.file-status.state-error,.file-status.state-unavailable { color:var(--danger); }
.state-needs_vision .file-chip-state,.file-status.state-needs_vision { color:var(--border-focus); }
.file-status { display:inline-block; margin-left:8px; }
.file-status-detail { display:block; font-size:.8rem; margin-top:2px; }
/* Work input budget notice: plain visible text, never tooltip-only. */
.work-input-notice { margin:0 0 8px; padding:8px 12px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--bg-elevated); color:var(--text-secondary); font-size:.85rem; line-height:1.45; overflow-wrap:anywhere; }
.work-input-notice p { margin:0; }
.work-input-notice p + p { margin-top:4px; }
.work-input-notice.warn { border-color:#e5c07b; color:var(--text-primary); }
.file-chip-work { flex-shrink:0; border-radius:999px; padding:1px 7px; font-size:.75rem; background:var(--bg-input); color:#e5c07b; }
.upload-pending { display:inline-flex; align-items:center; gap:6px; min-width:0; max-width:100%; border:1px dashed var(--border-strong); border-radius:10px; padding:6px 10px; font-size:.85rem; color:var(--text-secondary); }
body.drop-active .composer-box { outline:2px dashed var(--border-focus); outline-offset:4px; }
body.drop-active .chat-view::after { content:'Solte para anexar (até 10 MiB por arquivo)'; position:fixed; left:50%; bottom:140px; transform:translateX(-50%); z-index:30; padding:10px 16px; border-radius:var(--radius-md); background:var(--bg-elevated); border:1px solid var(--border-focus); color:var(--text-primary); pointer-events:none; }
@media(max-width:768px) { .file-chip-name { max-width:14ch; } .file-chip,.upload-pending { padding:8px 10px; } .remove-file { min-width:32px; min-height:32px; } }
.error-banner { color:var(--danger); background:var(--danger-bg); padding:10px 16px; margin:4px 24px 12px; border:1px solid #603c3c; border-radius:9px; font-size:.9rem; overflow-wrap:anywhere; }
.status-line { display:flex; align-items:center; flex-wrap:wrap; gap:8px; color:var(--text-secondary); font-size:.85rem; margin:0 2px 9px; }
.status-line button { margin-left:auto; padding:4px 10px; border:1px solid var(--border-strong); border-radius:8px; }
.status-dot,.step-dot { width:5px; height:5px; flex-shrink:0; border-radius:50%; background:var(--accent); }
.popover { position:absolute; z-index:70; min-width:0; padding:6px; border:1px solid #3b3b3b; border-radius:17px; background:var(--bg-elevated); box-shadow:0 12px 35px #0004; color:var(--text-primary); max-height:min(480px,70dvh); overflow-y:auto; scrollbar-width:thin; }
.popover-heading { padding:6px 8px 7px; color:var(--text-muted); font-size:.88rem; }
.popover .search-control { background:#242424; margin:2px 4px 6px; border-radius:8px; }
.tools-popover,.apps-popover { width:100%; left:0; bottom:calc(100% - 3px); }
.model-popover { right:39px; bottom:64px; width:276px; max-width:calc(100vw - 72px); }
.workspace-home .model-popover { bottom:95px; }
.menu-item,.model-option { display:flex; align-items:center; gap:9px; min-height:34px; width:100%; padding:7px 8px; text-align:left; border-radius:10px; font-size:.92rem; color:var(--text-primary); text-decoration:none; }
.menu-item:hover:not(:disabled),.model-option:hover:not(:disabled) { background:#3c3c3c; }
.menu-item .icon { width:16px; height:16px; }
.menu-label,.model-option-copy { display:flex; min-width:0; gap:2px; flex-direction:column; }
.menu-description { color:var(--text-muted); font-size:.85rem; font-weight:400; overflow-wrap:anywhere; }
.model-option { position:relative; flex-direction:column; align-items:stretch; gap:2px; padding-right:29px; }
.model-unavailable { opacity:.62; cursor:default; }
.model-unavailable:hover { background:transparent !important; }
.model-section-title { padding:10px 8px 4px; color:var(--text-muted); font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.menu-status { color:var(--text-muted); font-size:.77rem; margin-left:auto; white-space:nowrap; }
.model-option[aria-selected="true"]::after { content:"✓"; position:absolute; top:50%; right:9px; transform:translateY(-50%); font-size:16px; }
.menu-empty { margin:8px; color:var(--text-muted); font-size:.9rem; }
.menu-divider { height:1px; background:var(--border-strong); margin:5px 8px; }
.account-popover { position:fixed; left:calc(var(--rail-width) + 6px); bottom:10px; width:246px; max-width:calc(100vw - 62px); }
.account { display:flex; min-width:0; align-items:center; gap:8px; padding:7px 8px; }
.account>div { display:flex; min-width:0; flex-direction:column; font-size:.9rem; }
.account strong { font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.account .muted { font-size:.8rem; }
.account-menu-email { padding:7px 8px; margin:0; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.secondary-button { display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border:1px solid var(--border-strong); border-radius:8px; background:var(--bg-elevated); font-size:.9rem; text-decoration:none; }
.workspace-view,.settings-view { width:100%; min-width:0; height:100%; overflow-y:auto; }
.workspace-header { padding:32px 40px 16px; }
.workspace-header h1 { margin:0; font-size:1.8rem; font-weight:500; }
.workspace-content { max-width:920px; margin:0 auto; padding:20px 36px 48px; }
.workspace-heading { margin:8px 0 12px; font-size:1.6rem; font-weight:500; }
.workspace-description { color:var(--text-muted); max-width:70ch; margin:0 0 28px; }
.workspace-list { display:flex; flex-direction:column; gap:10px; }
.workspace-card,.catalog-card { border:1px solid var(--border-subtle); border-radius:14px; background:var(--bg-row); padding:18px; min-width:0; }
.workspace-card h2,.workspace-card h3,.catalog-card h3 { margin:0 0 8px; font-size:1rem; font-weight:600; }
.workspace-card p,.catalog-card p { color:var(--text-muted); font-size:.9rem; overflow-wrap:anywhere; }
.workspace-card-actions,.file-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; }
.workspace-card-actions button,.workspace-card-actions a,.file-actions button,.file-actions a { border:1px solid var(--border-strong); border-radius:8px; padding:5px 11px; font-size:.85rem; text-decoration:none; background:var(--bg-elevated); }
.file-row { display:flex; align-items:center; gap:16px; padding:14px 0; border-bottom:1px solid var(--border-subtle); min-width:0; }
.file-meta { min-width:0; flex:1; overflow-wrap:anywhere; }
.file-meta strong { display:block; font-weight:500; }
.file-meta small { color:var(--text-muted); }
.file-actions { margin:0; flex-shrink:0; }
.catalog-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.inline-notice,.view-status { color:var(--text-secondary); font-size:.9rem; border-left:2px solid var(--border-strong); padding:10px 14px; margin:15px 0; }
.section-title { font-size:1rem; margin:28px 0 14px; font-weight:600; }
.settings-topbar { display:flex; align-items:center; justify-content:flex-end; min-height:48px; padding:8px 18px; }
#settings-menu-button { display:none; margin-right:auto; }
.settings-canvas { max-width:784px; margin:0 auto; padding:0 24px 70px; }
.settings-canvas>h1 { font-size:2rem; line-height:1.35; font-weight:600; margin:8px 0 44px; letter-spacing:-.02em; }
#settings-nav { overflow-y:auto; min-height:0; flex:1; padding:2px 4px 20px; scrollbar-width:thin; }
#settings-nav button { display:flex; align-items:center; gap:9px; width:100%; text-align:left; min-height:32px; padding:5px 8px; border-radius:9px; font-size:.92rem; }
#settings-nav button.active,#settings-nav button[aria-current="page"],#settings-nav button:hover { background:var(--bg-elevated); }
#settings-nav .menu-label,#settings-nav h3,.settings-nav-heading { margin:16px 7px 7px; font-size:.9rem; color:var(--text-muted); font-weight:600; }
.settings-section { margin:0 0 38px; }
.settings-section>h2,.settings-section>h3 { font-size:.95rem; font-weight:600; margin:0 0 14px; }
.settings-row { display:flex; align-items:center; gap:20px; justify-content:space-between; padding:15px 16px; border:1px solid var(--border-subtle); border-bottom:0; background:var(--bg-row); }
.settings-row:first-of-type { border-radius:15px 15px 0 0; }
.settings-row:last-child { border-bottom:1px solid var(--border-subtle); border-radius:0 0 15px 15px; }
.settings-row:not(:has(+ .settings-row)) { border-bottom:1px solid var(--border-subtle); border-radius:0 0 15px 15px; }
.settings-row:first-of-type:not(:has(+ .settings-row)) { border-radius:15px; }
.settings-row:only-child { border-radius:15px; }
.settings-row-copy { min-width:0; flex:1; }
.settings-row-copy strong,.settings-row-copy h3 { display:block; font-size:.94rem; font-weight:600; margin:0 0 3px; }
.settings-row-copy p,.settings-row-copy small { color:var(--text-secondary); font-size:.86rem; line-height:1.4; margin:0; display:block; overflow-wrap:anywhere; }
.settings-control { display:flex; align-items:center; flex-shrink:0; gap:8px; max-width:45%; }
.settings-control button,.settings-control a,.preference-select { max-width:100%; border:1px solid var(--border-strong); border-radius:8px; padding:5px 10px; background:var(--bg-elevated); font-size:.86rem; text-decoration:none; }
.settings-row>.preference-select,.settings-row>.secondary-button { max-width:45%; flex-shrink:0; }
.settings-control input[type="checkbox"] { accent-color:var(--accent); width:17px; height:17px; }
.settings-control .tag,.tag { color:var(--text-muted); font-size:.8rem; }
#work-permissions-list .settings-row { flex-wrap:wrap; }
#work-permissions-list .settings-row-copy { overflow-wrap:anywhere; }
.work-panel { display:none; position:fixed; z-index:50; top:64px; right:10px; width:300px; max-height:calc(100dvh - 80px); border:1px solid var(--border-subtle); border-radius:18px; overflow:hidden; background:var(--bg-elevated); }
body.work-open .work-panel { display:flex; flex-direction:column; }
.work-panel>header { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px 4px 18px; }
.work-panel h2 { font-size:.94rem; font-weight:500; color:var(--text-secondary); margin:0; }
#results-content { overflow-y:auto; padding:8px 18px 17px; min-height:0; scrollbar-width:thin; }
.result-section { margin:3px 0 20px; }
.result-section h3 { font-size:.9rem; color:var(--text-secondary); font-weight:500; margin:0 0 10px; }
.result-section p { font-size:.88rem; margin:6px 0; }
.work-steps { display:flex; flex-direction:column; gap:12px; }
.step { display:grid; grid-template-columns:6px minmax(0,1fr); gap:3px 8px; align-items:center; font-size:.85rem; }
.step strong { font-weight:500; }
.step p { grid-column:2; margin:0; font-size:.8rem; overflow-wrap:anywhere; }
.step.failed .step-dot { background:var(--danger); }
.step.completed .step-dot { background:var(--success); }
.work-detail { font-size:.85rem; color:var(--text-muted); overflow-wrap:anywhere; }
.backdrop { display:none; position:fixed; z-index:35; inset:0; width:100%; height:100%; background:#0009; }
.toast { position:fixed; z-index:160; bottom:24px; right:24px; max-width:calc(100vw - 32px); padding:11px 16px; color:var(--text-primary); background:var(--bg-elevated); border:1px solid var(--border-strong); border-radius:12px; box-shadow:0 6px 25px #0004; font-size:.9rem; overflow-wrap:anywhere; }
.login-modal,#project-memory-dialog { position:fixed; z-index:200; inset:0; display:flex; align-items:center; justify-content:center; background:#000b; padding:18px; }
.modal-card { width:100%; max-width:380px; max-height:calc(100dvh - 36px); overflow-y:auto; padding:28px; background:var(--bg-surface); border:1px solid var(--border-strong); border-radius:20px; }
#project-memory-dialog .project-memory-card { width:min(640px,100%); max-width:640px; max-height:calc(100dvh - 36px); overflow-y:auto; }
#project-memory-dialog .primary-button { color:#111; background:#f0f0f0; }
#agents-dialog { position:fixed; z-index:200; inset:0; display:flex; align-items:center; justify-content:center; background:#000b; padding:18px; }
#agents-dialog .agents-card { width:min(640px,100%); max-width:640px; max-height:calc(100dvh - 36px); overflow-y:auto; }
#agents-dialog .primary-button { color:#111; background:#f0f0f0; }
#agents-dialog .agents-form { display:grid; gap:6px; margin-top:12px; }
#agents-dialog .agents-form input:not([type=checkbox]),#agents-dialog .agents-form select { width:100%; min-width:0; }
#agents-dialog .agent-row { flex-wrap:wrap; }
#agents-dialog .file-actions { flex-wrap:wrap; }
.agent-chip { margin:0 0 6px 12px; }
.modal-card .brand { font-size:1.2rem; margin-bottom:28px; }
.modal-card h1 { font-size:1.65rem; line-height:1.3; font-weight:500; margin:0 0 12px; letter-spacing:-.025em; }
.modal-card>p { color:var(--text-muted); font-size:.92rem; margin:0 0 24px; }
#login-form { display:flex; flex-direction:column; gap:8px; }
#login-form label { font-size:.88rem; margin-top:6px; }
#login-form input { width:100%; min-height:42px; padding:8px 11px; border:1px solid var(--border-strong); border-radius:9px; background:var(--bg-base); }
.primary-button { color:#111; background:#f0f0f0; border-radius:9px; min-height:42px; padding:8px 14px; font-size:.95rem; font-weight:600; margin-top:12px; }
#login-error { color:var(--danger); font-size:.87rem; overflow-wrap:anywhere; margin:6px 0 0; }
#retry-start { width:100%; }
:root[data-density="compact"] .settings-row { padding-top:10px; padding-bottom:10px; }
:root[data-density="compact"] button.conversation { padding-top:4px; padding-bottom:4px; min-height:28px; }
:root[data-density="compact"] .messages { gap:20px; }
:root[data-theme="light"] .mode-switch,:root[data-theme="light"] .composer-context { background:#eee; }
:root[data-theme="light"] .mode-switch button[aria-pressed="true"],:root[data-theme="light"] .mode-switch button.selected { background:#fff; border-color:#ddd; }
:root[data-theme="light"] .composer-box { border-color:#ddd; }
:root[data-theme="light"] .popover { border-color:#ddd; box-shadow:0 8px 25px #0002; }
:root[data-theme="light"] .popover .search-control { background:#f3f3f3; }
:root[data-theme="light"] .menu-item:hover:not(:disabled),:root[data-theme="light"] .model-option:hover:not(:disabled),:root[data-theme="light"] .model-menu-trigger:hover { background:#eee; }
@media(min-width:1250px) { body.work-open .main { margin-right:320px; } }
@media(max-width:1600px) { :root { --sidebar-width:280px; } }
@media(max-width:1100px) {
 .mode-switch { width:150px; }
 .topbar { gap:8px; }
 .conversation-heading { max-width:28%; }
 .work-badge { font-size:.68rem; }
 .access-status { font-size:.8rem; }
}
@media(max-width:768px) {
 :root { --rail-width:44px; }
 .shell { grid-template-columns:var(--rail-width) minmax(0,1fr); }
 .app-rail { padding:8px 4px; }
 .rail-button { width:34px; height:34px; padding:8px; }
 .sidebar { position:fixed; z-index:40; top:0; bottom:0; left:var(--rail-width); width:min(352px,calc(100vw - var(--rail-width) - 20px)); transform:translateX(calc(-100% - var(--rail-width))); visibility:hidden; }
 body.sidebar-open .sidebar { transform:none; visibility:visible; }
 body.sidebar-open .backdrop { display:block; }
 .sidebar-view { padding-top:9px; }
 .main { grid-column:2; }
 .topbar { display:grid; grid-template-columns:32px minmax(0,1fr) 32px; gap:2px 6px; padding:7px 10px; min-height:70px; }
 #menu-button { display:inline-flex; grid-column:1; grid-row:1; }
 .conversation-heading,.topbar>.spacer { display:none; }
 .topbar .mode-switch,.workspace-home .topbar>.mode-switch { position:static; transform:none; grid-column:2; grid-row:1; justify-self:center; width:142px; max-width:100%; height:32px; }
 .mode-switch button { font-size:.85rem; }
 .work-badge { grid-column:2; grid-row:2; justify-self:center; font-size:.65rem; white-space:normal; text-align:center; }
 #work-button { grid-column:3; grid-row:1; }
 .messages { padding:24px 16px 20px; gap:24px; }
 .welcome h1 { font-size:1.65rem; }
 .workspace-home .messages { padding:20px 16px 17px; }
 .composer-area { width:calc(100% - 24px); }
 .composer-box { padding:11px 9px 9px; border-radius:22px; }
 .composer-actions { gap:5px; }
 .access-status { gap:0; }
 .access-status>span { display:none; }
 .access-status .icon { width:14px; height:14px; }
 .model-control { max-width:54%; }
 .model-menu-trigger { font-size:.78rem; gap:3px; }
 .model-popover { right:0; width:min(276px,100%); max-width:100%; }
 .composer-context { padding:7px 8px; gap:6px; margin:0 8px; }
 .composer-context button { font-size:.78rem; gap:4px; padding:1px 2px; }
 .composer-context .icon { width:13px; height:13px; }
 .composer-note { font-size:.65rem; margin-top:8px; }
 .message.user .message-content { max-width:92%; }
 .error-banner { margin:4px 12px 10px; font-size:.85rem; padding:9px 11px; }
 .work-panel { top:76px; right:7px; width:min(300px,calc(100vw - 58px)); max-height:calc(100dvh - 90px); }
 .workspace-header { padding:22px 20px 10px; }
 .workspace-content { padding:16px 20px 32px; }
 .workspace-header h1 { font-size:1.5rem; }
 .catalog-grid { grid-template-columns:1fr; }
 .file-row { flex-wrap:wrap; gap:8px; }
 .file-actions { width:100%; }
 .settings-topbar { justify-content:space-between; min-height:54px; padding:8px 12px; }
 #settings-menu-button { display:inline-flex; }
 .settings-canvas { padding:8px 18px 36px; }
 .settings-canvas>h1 { font-size:1.8rem; margin:8px 0 30px; }
 .settings-row { flex-direction:column; align-items:stretch; gap:12px; padding:14px; }
 .settings-control { max-width:100%; align-self:flex-start; }
 .settings-row>.preference-select,.settings-row>.secondary-button { max-width:100%; align-self:flex-start; }
 .account-popover { max-width:calc(100vw - 58px); }
 .popover { border-radius:15px; }
}
@media(max-width:480px) {
 .voice-button { display:none; }
 .model-control { max-width:56%; }
 .send-button { width:32px; height:32px; }
 .plus-control,.plus-control>.icon-button { width:32px; }
 .composer-context { gap:4px; }
 .composer-context button { font-size:.73rem; }
 .composer-context .icon { width:12px; height:12px; }
 .modal-card { padding:24px 20px; }
 .rail-top { gap:6px; }
}
@media(max-height:600px) { .workspace-home .messages { margin-top:10px; } .workspace-home .composer-area { margin-bottom:auto; } .rail-top { gap:2px; } .app-rail { padding-top:4px; padding-bottom:4px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
.creative-apps { margin-top:12px; min-width:0; }
.creative-description { color:var(--text-muted); font-size:.9rem; margin:0 0 12px; overflow-wrap:anywhere; }
.creative-group-title { font-size:.92rem; font-weight:600; color:var(--text-secondary); margin:22px 0 10px; }
.creative-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); gap:12px; }
.creative-card { display:flex; flex-direction:column; gap:10px; min-width:0; padding:16px; border:1px solid var(--border-subtle); border-radius:14px; background:var(--bg-row); }
.creative-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; min-width:0; }
.creative-card-head h4 { margin:0; font-size:1rem; font-weight:600; overflow-wrap:anywhere; min-width:0; }
.creative-chip { flex-shrink:0; font-size:.72rem; padding:2px 8px; border-radius:999px; border:1px solid var(--border-strong); color:var(--text-secondary); white-space:nowrap; }
.creative-chip-native { border-color:var(--accent); }
.creative-purpose { margin:0; color:var(--text-secondary); font-size:.88rem; overflow-wrap:anywhere; }
.creative-facts { list-style:none; margin:0; padding:0; display:grid; gap:4px; font-size:.82rem; color:var(--text-muted); }
.creative-fact { overflow-wrap:anywhere; padding-left:12px; position:relative; }
.creative-fact::before { content:""; position:absolute; left:0; top:.5em; width:6px; height:6px; border-radius:50%; background:var(--border-strong); }
.creative-ok { color:var(--success); } .creative-ok::before { background:var(--success); }
.creative-warn { color:var(--text-secondary); }
.creative-bad { color:var(--danger); } .creative-bad::before { background:var(--danger); }
.creative-chip-local { border-style:dashed; color:var(--text-muted); }
.creative-open { align-self:flex-start; margin-top:auto; }
.creative-open:disabled { opacity:.55; cursor:not-allowed; }
.creative-note { margin:0; min-height:1em; font-size:.82rem; color:var(--text-secondary); overflow-wrap:anywhere; }
.creative-note:empty { display:none; }
.creative-error { color:var(--danger); border-left-color:var(--danger); }