:root {
  color-scheme: dark;
  --bg: #080a0c;
  --bg-soft: #0b0d0f;
  --panel: #101316;
  --panel-2: #15191c;
  --panel-3: #0c0f12;
  --editor: #0c0f12;
  --editor-text: #d3d9de;
  --editor-gutter: #0b0e10;
  --editor-line-number: #626a6f;
  --syntax-comment: #6a9955;
  --syntax-string: #ce9178;
  --syntax-number: #b5cea8;
  --syntax-keyword: #c586c0;
  --syntax-constant: #569cd6;
  --syntax-function: #dcdcaa;
  --syntax-property: #9cdcfe;
  --syntax-tag: #569cd6;
  --border: #252c31;
  --border-soft: #1c2328;
  --text: #d3d9de;
  --muted: #7e8991;
  --accent: #8baebe;
  --accent-strong: #31596b;
  --message-user: #17272e;
  --message-agent: #15191c;
  --button-bg: #254f61;
  --button-text: #f8fbfc;
  --success: #7fa586;
  --warning: #bcae7d;
  --danger: #bd756d;
  --shadow: 0 18px 44px rgb(0 0 0 / 28%);
  --radius: 7px;
  --line-number-width: 48px;
  --editor-font-size: 11px;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; color: var(--text); background: var(--bg); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 13px; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: .88rem; letter-spacing: .02em; }
h2 { font-size: .78rem; letter-spacing: .03em; text-transform: uppercase; }
h3 { font-size: .9rem; }
code { padding: 2px 4px; border-radius: 3px; background: rgb(255 255 255 / 5%); color: #d7ba7d; font-family: var(--mono); font-size: .69rem; }
.topbar, .panel-heading, .panel-title-row, .toolbar, .top-actions, .brand-wrap, .composer-actions, .composer-left, .composer-right, .settings-row, .secret-row, .dialog-heading, .dialog-actions, .editor-heading, .editor-actions, .active-file-wrap, .activity-heading, .selection-context, .selection-context-actions, .blank-create-row, .blank-secondary-actions { display: flex; align-items: center; }
.topbar { min-height: 52px; justify-content: space-between; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--border); background: #1b1b1b; }
.brand-wrap { gap: 8px; }
.brand-mark { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #4a4a4a; border-radius: 5px; color: var(--accent); background: #242424; font-family: var(--mono); font-size: .62rem; font-weight: 800; }
.brand-wrap p, .muted { color: var(--muted); font-size: .64rem; }
.top-actions { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.badge { padding: 3px 6px; border: 1px solid var(--border); border-radius: 999px; color: var(--success); background: #222; font-size: .61rem; }
.badge.offline { color: var(--warning); }
.badge.subtle { color: var(--muted); }
.app-shell { height: calc(100vh - 52px); display: flex; align-items: stretch; gap: 0; padding: 7px; overflow: hidden; }
.panel { min-width: 0; min-height: 0; flex: 1 1 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); overflow: hidden; }
.pane-resizer { position: relative; flex: 0 0 9px; cursor: col-resize; touch-action: none; }
.pane-resizer::after { content: ""; position: absolute; inset: 6px 3px; border-radius: 999px; background: #363636; transition: background .12s ease; }
.pane-resizer:hover::after, .pane-resizer.active::after { background: var(--accent-strong); }
.panel-drop-target { outline: 1px solid var(--accent-strong); outline-offset: -3px; }
.panel-title-row { min-width: 0; gap: 7px; }
.panel-drag-handle { color: #777; cursor: grab; font-family: var(--mono); font-size: .78rem; letter-spacing: -.22em; line-height: 1; user-select: none; }
.panel-drag-handle:hover { color: var(--accent); }
.panel-drag-handle:active { cursor: grabbing; }
.chat-panel, .ide-panel, .preview-panel { display: flex; flex-direction: column; }
.panel-heading { min-height: 47px; justify-content: space-between; gap: 8px; padding: 8px 9px; border-bottom: 1px solid var(--border); background: var(--panel-2); }
.button, .icon-button { border: 1px solid #454545; border-radius: 4px; padding: 6px 8px; color: var(--text); background: #2a2a2a; transition: border-color .12s ease, background .12s ease; }
.button:hover, .icon-button:hover { border-color: #777; background: #333; }
.button:disabled { cursor: not-allowed; opacity: .42; }
.button.primary { border-color: #356f84; background: #27576c; color: #eaf5f8; font-weight: 700; }
.button.primary:hover { border-color: #447f94; background: #30657b; }
.button.primary:disabled { border-color: #454545; color: #858585; background: #2a2a2a; opacity: 1; }
.button.project-reset { border-color: #5a4b43; color: #d6b7a8; background: #2d2724; }
.button.project-reset:hover { border-color: #765f54; color: #ecc8b7; background: #392f2b; }
.button.ghost { background: transparent; }
.button.danger { color: var(--danger); border-color: rgb(244 135 113 / 38%); }
.button.compact { padding: 4px 6px; font-size: .64rem; }
.icon-button { width: 27px; height: 27px; display: grid; place-items: center; padding: 0; background: transparent; font-size: 1rem; }
.messages { flex: 1; min-height: 0; overflow-y: auto; padding: 9px; display: flex; flex-direction: column; gap: 7px; }
.empty-state { margin: auto; max-width: 295px; padding: 14px; display: grid; gap: 7px; border: 1px dashed #484848; border-radius: 6px; color: var(--muted); text-align: center; line-height: 1.42; font-size: .72rem; }
.empty-state strong { color: var(--text); }
.message { max-width: 95%; padding: 8px 9px; border-radius: 6px; line-height: 1.42; white-space: pre-wrap; word-break: break-word; font-size: .72rem; }
.message.user { margin-left: auto; border: 1px solid #304f5f; background: #1f3038; }
.message.assistant { margin-right: auto; border: 1px solid #414141; background: #262626; }
.message.error { margin-right: auto; border: 1px solid rgb(244 135 113 / 42%); color: #f7b3a6; background: rgb(98 35 25 / 28%); }
.message-meta { display: block; margin-bottom: 3px; color: var(--muted); font-size: .55rem; letter-spacing: .06em; text-transform: uppercase; }
.message-selection { display: block; margin-bottom: 5px; color: var(--accent); font-family: var(--mono); font-size: .58rem; line-height: 1.35; }
.composer-wrap { padding: 8px; border-top: 1px solid var(--border); background: #242424; }
.selection-context { justify-content: space-between; gap: 8px; margin-bottom: 7px; padding: 6px 7px; border: 1px solid #304c59; border-radius: 5px; background: #1b272c; }
.selection-context-copy { min-width: 0; display: grid; gap: 2px; color: #bdd4df; font-family: var(--mono); font-size: .58rem; line-height: 1.35; }
.selection-kicker { color: var(--accent); font-size: .53rem; letter-spacing: .1em; text-transform: uppercase; }
.selection-context-actions { flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.composer, input, textarea, select { color: var(--text); border: 1px solid #454545; border-radius: 4px; background: #1b1b1b; outline: 0; }
.composer:focus, input:focus, textarea:focus, select:focus { border-color: #557f91; box-shadow: 0 0 0 2px rgb(54 101 123 / 18%); }
.composer { width: 100%; min-height: 67px; max-height: 160px; resize: vertical; padding: 7px; font-size: .71rem; line-height: 1.45; }
.composer-actions { justify-content: space-between; gap: 6px; margin-top: 6px; }
.composer-left, .composer-right { flex-wrap: wrap; gap: 5px; }
.agent-working-status { display: flex; min-width: 0; align-items: center; gap: 5px; margin-top: 6px; padding: 2px 3px; color: #aeb8bc; font-family: var(--mono); font-size: .59rem; line-height: 1.35; overflow-wrap: anywhere; }
.working-spinner { width: 10px; height: 10px; border: 2px solid #4b565b; border-top-color: #8aa0a9; border-radius: 999px; animation: working-spin .8s linear infinite; }
@keyframes working-spin { to { transform: rotate(360deg); } }
.send-button:disabled { min-width: 66px; }
.activity-panel { max-height: 150px; border-top: 1px solid var(--border); background: #191919; }
.activity-heading { justify-content: space-between; padding: 6px 8px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: .62rem; }
.activity-log { max-height: 116px; overflow-y: auto; padding: 6px 8px; display: grid; gap: 3px; }
.activity-item { color: var(--muted); font-family: var(--mono); font-size: .61rem; line-height: 1.35; }
.activity-item strong { color: var(--accent); }
.link-button { padding: 0; border: 0; color: var(--accent); background: transparent; font-size: .61rem; }
.workspace-heading { position: relative; }
.project-title-wrap { min-width: 110px; }
.project-name { width: min(175px, 100%); padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--text); font-size: .78rem; font-weight: 700; }
.project-name:focus { box-shadow: none; border-bottom: 1px solid var(--accent); }
.toolbar { position: relative; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.menu { position: absolute; z-index: 25; top: 29px; right: 0; width: 195px; padding: 4px; border: 1px solid var(--border); border-radius: 5px; background: #252525; box-shadow: var(--shadow); }
.menu button { width: 100%; padding: 7px 8px; border: 0; border-radius: 3px; color: var(--text); background: transparent; text-align: left; font-size: .66rem; }
.menu button:hover { background: #343434; }
.menu button:disabled { cursor: not-allowed; opacity: .42; }
.workspace-body { flex: 1; min-height: 0; display: flex; }
.file-sidebar { width: 132px; min-width: 92px; max-width: 340px; min-height: 0; flex: 0 0 auto; background: #1b1b1b; }
.sidebar-resizer { position: relative; flex: 0 0 7px; cursor: col-resize; touch-action: none; background: #1b1b1b; }
.sidebar-resizer::after { content: ""; position: absolute; inset: 0 2px; background: #333; transition: background .12s ease; }
.sidebar-resizer:hover::after, .sidebar-resizer.active::after { background: var(--accent-strong); }
.file-sidebar-heading { display: flex; justify-content: space-between; gap: 8px; padding: 8px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: .61rem; letter-spacing: .05em; text-transform: uppercase; }
.file-tree { height: calc(100% - 33px); overflow-y: auto; padding: 4px; }
.file-tree-empty { padding: 10px 6px; color: #6f6f6f; font-family: var(--mono); font-size: .62rem; line-height: 1.4; }
.file-item { width: 100%; display: flex; align-items: center; gap: 5px; padding: 5px 5px; border: 1px solid transparent; border-radius: 3px; color: #c8c8c8; background: transparent; text-align: left; font-family: var(--mono); font-size: .62rem; word-break: break-word; }
.file-item:hover { background: #292929; }
.file-item.active { border-color: #3d6072; color: #e4e4e4; background: #26343a; }
.file-icon { min-width: 17px; color: #c586c0; font-size: .57rem; text-align: center; }
.editor-wrap { width: 0; min-width: 0; min-height: 0; flex: 1 1 0; display: flex; flex-direction: column; }
.editor-heading { min-height: 37px; justify-content: space-between; gap: 7px; padding: 6px 7px; border-bottom: 1px solid var(--border); background: #242424; }
.active-file-wrap { min-width: 0; gap: 6px; }
.active-file { overflow: hidden; color: #ddd; font-family: var(--mono); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.dirty-badge, .language-badge { padding: 2px 5px; border-radius: 999px; color: var(--warning); background: rgb(220 220 170 / 9%); font-size: .56rem; }
.language-badge { color: var(--accent); background: rgb(156 220 254 / 8%); }
.editor-actions { flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.editor-stack { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--editor); }
.line-numbers { position: absolute; z-index: 2; inset: 0 auto 0 0; width: var(--line-number-width); height: 100%; margin: 0; padding: 11px 8px 11px 0; overflow: hidden; border-right: 1px solid #303030; color: var(--editor-line-number); background: var(--editor-gutter); pointer-events: none; user-select: none; text-align: right; white-space: pre; font-family: var(--mono); font-size: var(--editor-font-size); line-height: 1.55; }
.code-highlight, .code-editor { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 11px 12px 11px calc(var(--line-number-width) + 10px); border: 0; border-radius: 0; overflow: auto; white-space: pre; tab-size: 2; font-family: var(--mono); font-size: var(--editor-font-size); line-height: 1.55; }
.code-highlight { pointer-events: none; z-index: 0; color: var(--editor-text); background: var(--editor); }
.code-highlight code { padding: 0; color: inherit; background: transparent; font: inherit; }
.code-editor { z-index: 1; resize: none; color: transparent; caret-color: var(--editor-text); background: transparent; -webkit-text-fill-color: transparent; }
.code-editor::selection { background: rgb(38 79 120 / 82%); }
.code-editor:focus { box-shadow: inset 0 0 0 1px #335f70; }
.tok-comment { color: var(--syntax-comment); }
.tok-string { color: var(--syntax-string); }
.tok-number { color: var(--syntax-number); }
.tok-keyword { color: var(--syntax-keyword); }
.tok-constant { color: var(--syntax-constant); }
.tok-function { color: var(--syntax-function); }
.tok-property { color: var(--syntax-property); }
.tok-tag { color: var(--syntax-tag); }
.editor-empty-state { flex: 1; min-height: 0; display: grid; place-items: center; padding: 20px; background: var(--editor); }
.blank-card { width: min(460px, 100%); padding: 22px; border: 1px dashed #4b4b4b; border-radius: 7px; color: var(--muted); background: #202020; text-align: center; }
.blank-kicker { display: block; margin-bottom: 8px; color: var(--accent); font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; }
.blank-card h3 { margin-bottom: 7px; color: var(--text); }
.blank-card p { line-height: 1.5; font-size: .71rem; }
.blank-create-row { margin-top: 14px; justify-content: center; gap: 6px; }
.blank-file-select { width: min(250px, 100%); padding: 6px 8px; border-color: #4b4b4b; color: #d6d6d6; background: #1a1a1a; font-size: .68rem; }
.blank-secondary-actions { margin-top: 7px; flex-wrap: wrap; justify-content: center; gap: 6px; }
.editor-footer, .preview-footer { display: flex; flex-wrap: wrap; gap: 10px; padding: 5px 8px; border-top: 1px solid var(--border); color: var(--muted); background: #242424; font-size: .58rem; }
.preview-frame { flex: 1; width: 100%; min-height: 0; border: 0; background: var(--editor); }
.preview-footer { line-height: 1.35; }
.preview-footer code { font-size: .58rem; }
.toggle-label { display: flex; align-items: center; gap: 6px; color: var(--text); font-size: .7rem; }
.toggle-label input { accent-color: var(--accent-strong); }
.compact-toggle { color: var(--muted); font-size: .62rem; white-space: nowrap; }
.settings-dialog { width: min(690px, calc(100vw - 24px)); max-height: min(840px, calc(100vh - 24px)); padding: 0; border: 1px solid var(--border); border-radius: 7px; color: var(--text); background: #202020; box-shadow: 0 24px 84px rgb(0 0 0 / 55%); }
.settings-dialog::backdrop { background: rgb(0 0 0 / 34%); }
.settings-dialog form { display: flex; max-height: inherit; flex-direction: column; }
.dialog-heading, .dialog-actions { justify-content: space-between; gap: 10px; padding: 11px 13px; border-bottom: 1px solid var(--border); }
.dialog-actions { border-top: 1px solid var(--border); border-bottom: 0; }
.settings-grid { padding: 12px 13px; display: grid; gap: 11px; overflow-y: auto; }
.settings-grid label:not(.toggle-label) { display: grid; gap: 5px; color: var(--text); font-size: .69rem; font-weight: 700; }
.settings-grid input:not([type="checkbox"]), .settings-grid textarea, .settings-grid select { width: 100%; padding: 7px; font-weight: 400; }
.settings-grid small, .field-note { color: var(--muted); line-height: 1.4; font-size: .61rem; font-weight: 400; }
.secret-row { gap: 5px; }
.secret-row input { flex: 1; min-width: 0; }
.settings-row { align-items: end; gap: 13px; }
.settings-row > * { flex: 1; }
.toast { position: fixed; z-index: 50; right: 10px; bottom: 10px; max-width: min(400px, calc(100vw - 20px)); padding: 8px 9px; border: 1px solid var(--border); border-radius: 5px; background: #292929; box-shadow: var(--shadow); font-size: .68rem; line-height: 1.42; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 1180px) {
  .app-shell { height: auto; min-height: calc(100vh - 52px); flex-wrap: wrap; overflow: visible; }
  .chat-panel { min-height: 570px; }
  .ide-panel { min-height: 570px; }
  .preview-panel { min-height: 430px; flex-basis: 100% !important; }
  .pane-resizer { display: none; }
}
@media (max-width: 790px) {
  .topbar { align-items: flex-start; flex-direction: column; }
  .app-shell { display: block; padding: 5px; }
  .panel { width: 100% !important; margin-bottom: 5px; }
  .chat-panel { min-height: 510px; }
  .ide-panel { min-height: 610px; }
  .preview-panel { min-height: 420px; }
  .workspace-heading { align-items: flex-start; flex-direction: column; }
  .toolbar { justify-content: flex-start; }
  .menu { left: 0; right: auto; }
  .panel-drag-handle { display: none; }
}
@media (max-width: 540px) {
  .topbar { padding-inline: 8px; }
  .file-sidebar { width: 104px !important; min-width: 104px; }
  .sidebar-resizer { display: none; }
  .editor-heading { align-items: flex-start; flex-direction: column; }
  .settings-row { align-items: stretch; flex-direction: column; gap: 9px; }
  .dialog-actions { align-items: stretch; flex-direction: column; }
  .secret-row { align-items: stretch; flex-wrap: wrap; }
  .secret-row input { flex-basis: 100%; }
  .blank-create-row { align-items: stretch; flex-direction: column; }
  .blank-file-select { width: 100%; }
  .selection-context { align-items: stretch; flex-direction: column; }
  .selection-context-actions { justify-content: flex-start; }
}

/* v6: local model profiles and per-project chat history */
.chat-heading-actions, .composer-model-row, .chat-history-heading, .settings-section-heading, .profile-actions { display: flex; align-items: center; }
.chat-heading-actions { gap: 4px; }
.chat-history-panel { max-height: 230px; overflow: hidden; border-bottom: 1px solid var(--border); background: #191919; }
.chat-history-heading { justify-content: space-between; gap: 8px; padding: 7px 8px; border-bottom: 1px solid var(--border-soft); }
.chat-history-heading div { display: grid; gap: 2px; }
.chat-history-heading strong { font-size: .66rem; }
.chat-history-heading span { color: var(--muted); font-size: .57rem; }
.chat-history-list { max-height: 186px; overflow-y: auto; padding: 5px; display: grid; gap: 4px; }
.chat-history-empty { padding: 9px; color: var(--muted); font-size: .63rem; line-height: 1.4; }
.chat-history-item { display: flex; align-items: stretch; gap: 3px; border: 1px solid transparent; border-radius: 4px; background: #202020; }
.chat-history-item:hover { border-color: #444; }
.chat-history-item.active { border-color: #3a5b6a; background: #233039; }
.chat-history-open { min-width: 0; flex: 1; display: grid; gap: 2px; padding: 6px 7px; border: 0; color: var(--text); background: transparent; text-align: left; }
.chat-history-open strong { overflow: hidden; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.chat-history-open span { color: var(--muted); font-size: .55rem; }
.chat-history-icon { width: 26px; border: 0; color: var(--muted); background: transparent; font-size: .77rem; }
.chat-history-icon:hover { color: var(--text); background: rgb(255 255 255 / 5%); }
.danger-text { color: #c27a6d; }
.composer-model-row { gap: 5px; margin-bottom: 6px; }
.composer-profile-select { min-width: 0; flex: 1; padding: 5px 6px; color: #cfcfcf; border-color: #404040; background: #1b1b1b; font-size: .63rem; }
.composer-effort-select { width: 88px; padding: 5px 4px; color: #bdbdbd; border-color: #404040; background: #1b1b1b; font-size: .61rem; }
.composer-thinking { flex: 0 0 auto; }
.settings-dialog { width: min(790px, calc(100vw - 24px)); }
.settings-section { display: grid; gap: 10px; padding: 10px; border: 1px solid var(--border-soft); border-radius: 5px; background: #1d1d1d; }
.settings-section-heading { justify-content: space-between; gap: 10px; }
.settings-section-heading p { margin-top: 3px; }
.profile-actions { flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.advanced-settings { border: 1px solid var(--border-soft); border-radius: 4px; background: #1a1a1a; }
.advanced-settings summary { padding: 7px 8px; color: #bdbdbd; cursor: pointer; font-size: .66rem; font-weight: 700; }
.advanced-settings[open] summary { border-bottom: 1px solid var(--border-soft); }
.advanced-settings label { margin: 8px; }
.advanced-settings textarea { font-family: var(--mono); font-size: .64rem; line-height: 1.42; }
@media (max-width: 620px) {
  .composer-model-row { align-items: stretch; flex-wrap: wrap; }
  .composer-profile-select { flex-basis: 100%; }
  .settings-section-heading { align-items: stretch; flex-direction: column; }
  .profile-actions { justify-content: flex-start; }
}


/* v8: redo, compare, collapsible files, Markdown chat, appearance settings */
.topbar { background: color-mix(in srgb, var(--bg) 82%, var(--panel)); }
.panel-heading, .editor-heading, .editor-footer, .preview-footer, .composer-wrap { background: color-mix(in srgb, var(--panel) 88%, var(--bg)); }
.file-sidebar, .sidebar-resizer, .line-numbers, .chat-history-panel, .activity-panel { background: color-mix(in srgb, var(--bg) 88%, var(--panel)); }
.line-numbers { font-size: var(--editor-font-size); }
.code-highlight, .code-editor { font-size: var(--editor-font-size); }
.button.primary { border-color: var(--accent-strong); background: color-mix(in srgb, var(--accent-strong) 78%, var(--bg)); }
.button.primary:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent-strong) 88%, var(--panel)); }
.file-sidebar-heading { align-items: center; }
.file-sidebar-title { display: flex; align-items: center; justify-content: space-between; min-width: 0; flex: 1; gap: 8px; }
.sidebar-close-button { width: 20px; height: 20px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 3px; color: var(--muted); background: transparent; line-height: 1; }
.sidebar-close-button:hover { border-color: var(--border); color: var(--text); background: var(--panel); }
.message { white-space: normal; }
.message.user, .message.error { white-space: pre-wrap; }
.markdown-body { display: grid; gap: 5px; }
.markdown-body p, .markdown-body ul, .markdown-body ol, .markdown-body blockquote, .markdown-body pre, .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { margin: 0; }
.markdown-body ul, .markdown-body ol { padding-left: 18px; }
.markdown-body li + li { margin-top: 2px; }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 { color: var(--text); font-size: .78rem; letter-spacing: normal; text-transform: none; }
.markdown-body blockquote { padding: 4px 7px; border-left: 2px solid var(--accent-strong); color: var(--muted); background: color-mix(in srgb, var(--panel) 74%, var(--bg)); }
.markdown-body pre { max-width: 100%; overflow-x: auto; padding: 7px; border: 1px solid var(--border-soft); border-radius: 4px; background: var(--editor); }
.markdown-body pre code { padding: 0; color: var(--text); background: transparent; white-space: pre; }
.markdown-body a { color: var(--accent); }
.markdown-body hr { width: 100%; border: 0; border-top: 1px solid var(--border); }
.settings-tabs { display: flex; gap: 4px; padding: 8px 13px 0; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 74%, var(--panel)); }
.settings-tab { padding: 7px 10px; border: 1px solid transparent; border-bottom: 0; border-radius: 4px 4px 0 0; color: var(--muted); background: transparent; font-size: .68rem; }
.settings-tab:hover { color: var(--text); background: color-mix(in srgb, var(--panel) 75%, var(--bg)); }
.settings-tab.active { border-color: var(--border); color: var(--text); background: var(--panel); }
.settings-panel { display: grid; gap: 11px; }
.appearance-color-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.appearance-color-grid input[type="color"] { min-height: 34px; padding: 3px; cursor: pointer; }
.settings-dialog { background: var(--panel); }
.settings-section { background: color-mix(in srgb, var(--panel) 78%, var(--bg)); }
.compare-dialog { width: min(980px, calc(100vw - 24px)); height: min(760px, calc(100vh - 24px)); padding: 0; border: 1px solid var(--border); border-radius: 7px; color: var(--text); background: var(--panel); box-shadow: 0 24px 84px rgb(0 0 0 / 55%); }
.compare-dialog::backdrop { background: rgb(0 0 0 / 66%); backdrop-filter: blur(3px); }
.compare-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 10px; padding: 9px 11px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--panel) 84%, var(--bg)); }
.compare-toolbar label { display: grid; gap: 4px; min-width: min(430px, 70%); color: var(--muted); font-size: .62rem; }
.compare-toolbar select { padding: 6px; }
.diff-legend { display: flex; flex-wrap: wrap; gap: 5px; }
.diff-chip { padding: 3px 6px; border-radius: 999px; font-size: .58rem; }
.diff-chip.removed { color: #d4a4af; background: rgb(122 63 78 / 36%); }
.diff-chip.added { color: #a7c7ae; background: rgb(58 103 71 / 38%); }
.diff-view { height: calc(100% - 105px); overflow: auto; padding: 6px 0; background: var(--editor); font-family: var(--mono); font-size: var(--editor-font-size); line-height: 1.5; }
.diff-line { min-width: max-content; display: grid; grid-template-columns: 48px 48px 20px minmax(400px, 1fr); }
.diff-line .diff-number { padding-right: 8px; color: #737373; text-align: right; user-select: none; }
.diff-line .diff-marker { text-align: center; user-select: none; }
.diff-line code { display: block; padding: 0 12px 0 2px; border-radius: 0; color: var(--text); background: transparent; white-space: pre; font: inherit; }
.diff-line.removed { background: rgb(112 55 70 / 28%); }
.diff-line.removed .diff-marker, .diff-line.removed code { color: #d7a0ad; }
.diff-line.added { background: rgb(51 97 65 / 28%); }
.diff-line.added .diff-marker, .diff-line.added code { color: #a7c9af; }
@media (max-width: 650px) { .appearance-color-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .compare-toolbar { align-items: stretch; flex-direction: column; } .compare-toolbar label { min-width: 0; } }


/* v9: safer key destinations, project-action strip, focused selection requests */
.model-meta-row { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 5px; }
.model-meta-row p { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.key-state-badge { padding: 2px 5px; border: 1px solid var(--border); border-radius: 999px; font-size: .53rem; line-height: 1.25; white-space: nowrap; }
.key-state-badge.no-key { color: var(--muted); background: color-mix(in srgb, var(--bg) 82%, var(--panel)); }
.key-state-badge.session-key { border-color: color-mix(in srgb, var(--accent-strong) 72%, var(--border)); color: var(--accent); background: color-mix(in srgb, var(--accent-strong) 22%, var(--bg)); }
.key-state-badge.remembered-key { border-color: color-mix(in srgb, var(--warning) 46%, var(--border)); color: var(--warning); background: color-mix(in srgb, var(--warning) 13%, var(--bg)); }
.project-actions-strip { position: relative; display: flex; min-height: 34px; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 7px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 82%, var(--panel)); }
.project-actions-label { color: var(--muted); font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.project-actions-toolbar { justify-content: flex-end; }
.selection-context { display: grid; gap: 6px; padding: 7px; border-color: color-mix(in srgb, var(--accent-strong) 62%, var(--border)); background: color-mix(in srgb, var(--accent-strong) 14%, var(--bg)); }
.selection-ask-heading, .selection-ask-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.selection-ask-heading > div { min-width: 0; display: grid; gap: 2px; }
.selection-summary { overflow: hidden; color: color-mix(in srgb, var(--text) 76%, var(--muted)); font-family: var(--mono); font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.selection-prompt { width: 100%; min-height: 48px; max-height: 120px; resize: vertical; padding: 6px 7px; font-size: .68rem; line-height: 1.42; }
.selection-ask-footer { color: var(--muted); font-size: .57rem; line-height: 1.35; }
.security-controls { border-color: color-mix(in srgb, var(--warning) 28%, var(--border-soft)); }
@media (max-width: 540px) {
  .project-actions-strip, .selection-ask-heading, .selection-ask-footer { align-items: stretch; flex-direction: column; }
  .project-actions-toolbar { justify-content: flex-start; }
}


/* v10: in-editor find and navigable per-file comparison */
.editor-search-bar { position: absolute; z-index: 8; top: 7px; right: 18px; display: flex; align-items: center; gap: 4px; width: min(360px, calc(100% - 34px)); padding: 4px; border: 1px solid var(--border); border-radius: 5px; background: color-mix(in srgb, var(--panel) 94%, var(--bg)); box-shadow: 0 9px 24px rgb(0 0 0 / 34%); }
.editor-search-bar input { min-width: 0; flex: 1; padding: 5px 7px; border-color: var(--border-soft); color: var(--text); background: color-mix(in srgb, var(--editor) 92%, var(--panel)); font-family: var(--mono); font-size: .65rem; }
.editor-search-count, .compare-counter { color: var(--muted); font-family: var(--mono); font-size: .58rem; white-space: nowrap; }
.search-nav-button { width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 3px; color: var(--muted); background: transparent; font-size: .73rem; line-height: 1; }
.search-nav-button:hover:not(:disabled) { border-color: var(--border); color: var(--text); background: color-mix(in srgb, var(--panel) 84%, var(--bg)); }
.search-nav-button:disabled { cursor: not-allowed; opacity: .36; }
.editor-search-match { border-radius: 2px; color: inherit; background: rgb(147 119 64 / 42%); }
.editor-search-match.active { outline: 1px solid rgb(192 164 105 / 78%); background: rgb(163 126 56 / 62%); }
.compare-file-actions, .compare-change-toolbar { display: flex; align-items: center; gap: 6px; }
.compare-change-toolbar { justify-content: center; min-height: 35px; padding: 5px 10px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 78%, var(--panel)); }
.diff-line.active-hunk { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 68%, transparent); }
.diff-view { height: calc(100% - 140px); }
@media (max-width: 650px) { .compare-file-actions { justify-content: space-between; } .editor-search-bar { right: 8px; width: calc(100% - 16px); } }

/* v11: anchored file rail and independent agent-chat text sizing */
:root { --agent-font-size: 12px; }
.message { font-size: var(--agent-font-size); }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 { font-size: calc(var(--agent-font-size) + 1px); }
.app-file-sidebar { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.app-file-sidebar .file-tree { min-height: 0; flex: 1; height: auto; }
.file-sidebar-actions { display: flex; align-items: center; gap: 3px; }
.sidebar-new-file { padding: 3px 5px; color: color-mix(in srgb, var(--text) 84%, var(--muted)); text-transform: none; letter-spacing: 0; }
.sidebar-new-file:hover { color: var(--text); }
.appearance-size-row { align-items: end; }
@media (max-width: 790px) {
  .app-file-sidebar { width: 100% !important; max-width: none; min-height: 160px; max-height: 230px; margin-bottom: 5px; }
  .sidebar-resizer { display: none; }
}


/* v12: single-scroll compare modal and edge tabs for restoring closed panes */
.app-shell { position: relative; }
.compare-dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
.compare-dialog > .dialog-heading,
.compare-dialog > .compare-toolbar,
.compare-dialog > .compare-change-toolbar { flex: 0 0 auto; }
.compare-dialog > .diff-view { min-height: 0; height: auto; flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; }
.pane-reopen-tab { position: absolute; z-index: 24; top: 50%; min-height: 86px; padding: 10px 5px; border: 1px solid color-mix(in srgb, var(--accent-strong) 72%, var(--border)); color: color-mix(in srgb, var(--accent) 80%, var(--text)); background: color-mix(in srgb, var(--accent-strong) 34%, var(--bg)); box-shadow: 0 10px 28px rgb(0 0 0 / 34%); font-size: .61rem; font-weight: 800; letter-spacing: .08em; line-height: 1; text-transform: uppercase; writing-mode: vertical-rl; text-orientation: mixed; transition: background .12s ease, border-color .12s ease, color .12s ease; }
.pane-reopen-tab:hover { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent-strong) 58%, var(--panel)); }
.files-edge-tab { left: 0; border-left: 0; border-radius: 0 6px 6px 0; transform: translateY(-50%) rotate(180deg); }
.preview-edge-tab { right: 0; border-right: 0; border-radius: 6px 0 0 6px; transform: translateY(-50%); }
@media (max-width: 1180px) {
  .pane-reopen-tab { top: auto; bottom: 10px; min-height: 0; padding: 7px 10px; writing-mode: horizontal-tb; }
  .files-edge-tab { left: 7px; border-left: 1px solid color-mix(in srgb, var(--accent-strong) 72%, var(--border)); border-radius: 5px; transform: none; }
  .preview-edge-tab { right: 7px; border-right: 1px solid color-mix(in srgb, var(--accent-strong) 72%, var(--border)); border-radius: 5px; transform: none; }
}


/* v14: JustOpen Canvas rebrand */
.top-link { display: inline-flex; align-items: center; text-decoration: none; }
.settings-dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
.settings-dialog > form { min-height: 0; height: 100%; overflow: hidden; }
.settings-dialog .dialog-heading,
.settings-dialog .settings-tabs,
.settings-dialog .dialog-actions { flex: 0 0 auto; }
.settings-dialog .settings-grid { min-height: 0; flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; }
.about-dialog { width: min(650px, calc(100vw - 24px)); max-height: min(720px, calc(100vh - 24px)); padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 7px; color: var(--text); background: var(--panel); box-shadow: 0 24px 84px rgb(0 0 0 / 55%); }
.about-dialog::backdrop { background: rgb(0 0 0 / 66%); backdrop-filter: blur(3px); }
.about-dialog[open] { display: flex; flex-direction: column; }
.about-content { min-height: 0; flex: 1 1 auto; display: grid; gap: 10px; overflow: auto; overscroll-behavior: contain; padding: 12px 13px; }
.about-content p { color: color-mix(in srgb, var(--text) 82%, var(--muted)); font-size: .7rem; line-height: 1.55; }
.about-github a { color: var(--accent); text-decoration: none; }
.about-github a:hover { text-decoration: underline; }
.about-actions { justify-content: flex-end; }


/* v19: guarded web-search loops, reliable appearance reset, and light themes */
:root[data-scheme="light"] .topbar,
:root[data-scheme="light"] .panel-heading,
:root[data-scheme="light"] .editor-heading,
:root[data-scheme="light"] .editor-footer,
:root[data-scheme="light"] .preview-footer,
:root[data-scheme="light"] .composer-wrap { color: var(--text); }
:root[data-scheme="light"] .panel,
:root[data-scheme="light"] .app-file-sidebar { background: var(--panel); }
:root[data-scheme="light"] .button,
:root[data-scheme="light"] .icon-button { border-color: var(--border); color: var(--text); background: color-mix(in srgb, var(--panel) 82%, var(--bg)); }
:root[data-scheme="light"] .button:hover,
:root[data-scheme="light"] .icon-button:hover { border-color: var(--accent-strong); background: color-mix(in srgb, var(--panel) 62%, var(--bg)); }
:root[data-scheme="light"] .button.primary { color: #f8fbfc; }
:root[data-scheme="light"] .button.primary:disabled { border-color: var(--border); color: var(--muted); background: color-mix(in srgb, var(--panel) 72%, var(--bg)); }
:root[data-scheme="light"] .button.project-reset { border-color: color-mix(in srgb, var(--danger) 46%, var(--border)); color: color-mix(in srgb, var(--danger) 82%, #532f2d); background: color-mix(in srgb, var(--danger) 12%, var(--panel)); }
:root[data-scheme="light"] .badge,
:root[data-scheme="light"] .toast,
:root[data-scheme="light"] .menu,
:root[data-scheme="light"] .chat-history-item,
:root[data-scheme="light"] .blank-card,
:root[data-scheme="light"] .advanced-settings { background: color-mix(in srgb, var(--panel) 88%, var(--bg)); }
:root[data-scheme="light"] .composer,
:root[data-scheme="light"] input,
:root[data-scheme="light"] textarea,
:root[data-scheme="light"] select,
:root[data-scheme="light"] .composer-profile-select,
:root[data-scheme="light"] .composer-effort-select,
:root[data-scheme="light"] .blank-file-select { border-color: var(--border); color: var(--text); background: var(--editor); }
:root[data-scheme="light"] .message.user { border-color: color-mix(in srgb, var(--accent-strong) 48%, var(--border)); background: color-mix(in srgb, var(--accent) 16%, var(--panel)); }
:root[data-scheme="light"] .message.assistant { border-color: var(--border); background: color-mix(in srgb, var(--panel) 78%, var(--bg)); }
:root[data-scheme="light"] .file-item { color: color-mix(in srgb, var(--text) 88%, var(--muted)); }
:root[data-scheme="light"] .file-item:hover { background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
:root[data-scheme="light"] .file-item.active { border-color: color-mix(in srgb, var(--accent-strong) 54%, var(--border)); color: var(--text); background: color-mix(in srgb, var(--accent) 18%, var(--panel)); }
:root[data-scheme="light"] .active-file { color: var(--text); }
:root[data-scheme="light"] .line-numbers { border-right-color: var(--border-soft); color: var(--muted); }
:root[data-scheme="light"] .code-highlight { color: var(--editor-text); }
:root[data-scheme="light"] .code-editor { caret-color: var(--editor-text); }
:root[data-scheme="light"] code { color: #775d22; background: rgb(40 46 51 / 6%); }
:root[data-scheme="light"] .tok-comment { color: var(--syntax-comment); }
:root[data-scheme="light"] .tok-string { color: var(--syntax-string); }
:root[data-scheme="light"] .tok-number { color: var(--syntax-number); }
:root[data-scheme="light"] .tok-keyword { color: var(--syntax-keyword); }
:root[data-scheme="light"] .tok-constant,
:root[data-scheme="light"] .tok-tag { color: var(--syntax-constant); }
:root[data-scheme="light"] .tok-function { color: var(--syntax-function); }
:root[data-scheme="light"] .tok-property { color: var(--syntax-property); }


/* v20: native Gemini search, reliable compare navigation, and chat/button color controls */
.message.user { border-color: color-mix(in srgb, var(--message-user) 68%, var(--border)); background: var(--message-user); }
.message.assistant { border-color: color-mix(in srgb, var(--message-agent) 68%, var(--border)); background: var(--message-agent); }
.button.primary { border-color: color-mix(in srgb, var(--button-bg) 72%, var(--border)); color: var(--button-text); background: var(--button-bg); }
.button.primary:hover { border-color: color-mix(in srgb, var(--button-bg) 62%, var(--accent)); background: color-mix(in srgb, var(--button-bg) 88%, var(--text)); }
:root[data-scheme="light"] .message.user { border-color: color-mix(in srgb, var(--message-user) 68%, var(--border)); background: var(--message-user); }
:root[data-scheme="light"] .message.assistant { border-color: color-mix(in srgb, var(--message-agent) 68%, var(--border)); background: var(--message-agent); }
:root[data-scheme="light"] .button.primary { border-color: color-mix(in srgb, var(--button-bg) 72%, var(--border)); color: var(--button-text); background: var(--button-bg); }
.diff-line.active-hunk { box-shadow: inset 4px 0 0 color-mix(in srgb, var(--accent) 82%, transparent); }


/* v21: aligned search settings and clearer profile continuity */
.search-settings-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 13px; }
.search-settings-row > * { min-width: 0; }
.search-settings-row .secret-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: start; gap: 6px; }
.search-settings-row select,
.search-settings-row .secret-row input,
.search-settings-row .secret-row .button { min-height: 34px; }
@media (max-width: 790px) {
  .search-settings-row { grid-template-columns: 1fr; gap: 9px; }
}


/* v23: readable editor palette for custom and light canvas backgrounds */
:root[data-editor-scheme="light"] .line-numbers { border-right-color: color-mix(in srgb, var(--editor-text) 18%, var(--editor)); }

/* v24: keep the light-theme editor input overlay transparent so the visible mirror layer is not covered */
:root[data-scheme="light"] .code-editor {
  color: transparent;
  background: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: var(--editor-text);
}
:root[data-scheme="light"] .code-highlight,
:root[data-scheme="light"] .code-highlight code {
  color: var(--editor-text);
  background: transparent;
}


/* v25: visible file-pane close control, lightweight inline button icons, and chat attachments */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.button-icon { width: 12px; height: 12px; flex: 0 0 auto; pointer-events: none; }
.button.compact .button-icon { width: 11px; height: 11px; }
.button.danger { border-color: color-mix(in srgb, var(--danger) 62%, var(--border)); color: #fff; background: color-mix(in srgb, var(--danger) 54%, var(--bg)); }
.button.danger:hover { border-color: color-mix(in srgb, var(--danger) 82%, var(--text)); color: #fff; background: color-mix(in srgb, var(--danger) 70%, var(--bg)); }
.sidebar-close-button { border-color: color-mix(in srgb, var(--danger) 66%, var(--border)); color: #fff; background: color-mix(in srgb, var(--danger) 64%, var(--bg)); font-size: .88rem; font-weight: 900; }
.sidebar-close-button:hover { border-color: color-mix(in srgb, var(--danger) 88%, var(--text)); color: #fff; background: color-mix(in srgb, var(--danger) 82%, var(--bg)); }
.attachment-tray { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.attachment-chip { min-width: 0; max-width: 190px; display: flex; align-items: center; gap: 5px; padding: 4px 5px; border: 1px solid color-mix(in srgb, var(--accent-strong) 56%, var(--border)); border-radius: 4px; background: color-mix(in srgb, var(--accent-strong) 14%, var(--panel)); }
.attachment-thumb, .attachment-file-icon { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 3px; }
.attachment-thumb { object-fit: cover; background: var(--editor); }
.attachment-file-icon { display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent-strong) 22%, var(--bg)); }
.attachment-icon { width: 13px; height: 13px; flex: 0 0 auto; }
.attachment-copy { min-width: 0; display: grid; gap: 1px; }
.attachment-copy strong, .attachment-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-copy strong { color: var(--text); font-size: .59rem; }
.attachment-copy span { color: var(--muted); font-size: .53rem; }
.attachment-remove { width: 17px; height: 17px; flex: 0 0 auto; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 3px; color: var(--danger); background: transparent; font-size: .78rem; line-height: 1; }
.attachment-remove:hover:not(:disabled) { border-color: color-mix(in srgb, var(--danger) 54%, var(--border)); color: #fff; background: color-mix(in srgb, var(--danger) 64%, var(--bg)); }
.attachment-remove:disabled { cursor: not-allowed; opacity: .45; }
.message-attachments { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 5px; }
.message-attachment-chip { max-width: 180px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px; border: 1px solid color-mix(in srgb, var(--accent-strong) 48%, var(--border)); border-radius: 999px; color: color-mix(in srgb, var(--text) 82%, var(--muted)); background: color-mix(in srgb, var(--accent-strong) 12%, var(--panel)); font-family: var(--mono); font-size: .54rem; }
.message-attachment-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-scheme="light"] .button.danger,
:root[data-scheme="light"] .sidebar-close-button { color: #fff; }

/* v26: keep disabled destructive actions readable on light backgrounds */
.button.danger:disabled {
  cursor: not-allowed;
  opacity: 1;
  border-color: color-mix(in srgb, var(--danger) 34%, var(--border));
  color: color-mix(in srgb, var(--danger) 76%, var(--text));
  background: color-mix(in srgb, var(--danger) 12%, var(--panel));
}
:root[data-scheme="light"] .button.danger:disabled {
  border-color: color-mix(in srgb, var(--danger) 42%, var(--border));
  color: color-mix(in srgb, var(--danger) 84%, #532f2d);
  background: color-mix(in srgb, var(--danger) 12%, var(--panel));
}


/* v27: theme-aware workspace-menu selection and pasted/dropped chat attachments */
.menu { background: color-mix(in srgb, var(--panel) 88%, var(--bg)); }
.menu button:hover,
.menu button:focus-visible { color: var(--text); background: color-mix(in srgb, var(--accent) 18%, var(--panel)); }
.menu button:active { color: var(--text); background: color-mix(in srgb, var(--accent) 28%, var(--panel)); }
.composer-wrap { position: relative; }
.composer-wrap.attachment-drop-active { outline: 2px dashed var(--accent); outline-offset: -4px; }
.composer-wrap.attachment-drop-active::after {
  content: "Drop files to attach";
  position: absolute;
  z-index: 6;
  inset: 7px;
  display: grid;
  place-items: center;
  border: 1px dashed color-mix(in srgb, var(--accent) 74%, var(--border));
  border-radius: 5px;
  color: var(--text);
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .02em;
  pointer-events: none;
}


/* v28: split project imports and exports into focused dropdown menus */
.menu-wrap { position: relative; display: inline-flex; }
.import-menu { left: 0; right: auto; }

/* v29: give dropdown icons breathing room from their labels */
.menu button { display: flex; align-items: center; gap: 6px; }


/* v31: keep the editable project name with project actions and title the editor pane clearly */
.project-actions-title { min-width: 0; display: flex; align-items: center; gap: 4px; }
.project-strip-name { width: min(175px, 32vw); color: var(--text); font-family: var(--mono); }
.project-strip-name:focus { border-bottom-color: var(--accent); }
@media (max-width: 540px) { .project-actions-title { align-self: flex-start; } .project-strip-name { width: min(175px, 55vw); } }


/* v32: model diagnostics and compact visible provider failures */
.profile-diagnostic-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.profile-diagnostic-status { margin: 0; padding: 7px 8px; border: 1px solid var(--border); border-radius: 4px; color: var(--text); background: color-mix(in srgb, var(--panel) 84%, var(--bg)); font-size: .64rem; line-height: 1.45; }
.profile-diagnostic-status.success { border-color: color-mix(in srgb, var(--success) 62%, var(--border)); color: color-mix(in srgb, var(--success) 78%, var(--text)); background: color-mix(in srgb, var(--success) 10%, var(--panel)); }
.profile-diagnostic-status.error { border-color: color-mix(in srgb, var(--danger) 62%, var(--border)); color: color-mix(in srgb, var(--danger) 78%, var(--text)); background: color-mix(in srgb, var(--danger) 10%, var(--panel)); }
.profile-diagnostic-status.info { border-color: color-mix(in srgb, var(--accent) 52%, var(--border)); }

.endpoint-safety-warning { display: block; margin-top: 5px; padding: 7px 8px; border: 1px solid color-mix(in srgb, var(--warning) 58%, var(--border)); border-radius: 4px; color: color-mix(in srgb, var(--warning) 82%, var(--text)); background: color-mix(in srgb, var(--warning) 11%, var(--panel)); }

/* v38: external web-search provider selector and native Gemini search controls */
.search-provider-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .9fr); align-items: start; gap: 13px; }
.search-native-toggle { min-height: 34px; padding-top: 18px; align-items: flex-start; }
#webSearchEndpointInput:disabled { cursor: not-allowed; opacity: .72; }
@media (max-width: 760px) {
  .search-provider-row { grid-template-columns: 1fr; gap: 9px; }
  .search-native-toggle { padding-top: 0; }
}


/* v39: provider key links, an extra-dark preset, and fully theme-aware canvas chrome */
.external-key-link { min-height: 34px; white-space: nowrap; text-decoration: none; }
.brand-mark { border-color: var(--border); background: color-mix(in srgb, var(--panel) 84%, var(--bg)); }
.badge { background: color-mix(in srgb, var(--panel) 82%, var(--bg)); }
.pane-resizer::after, .sidebar-resizer::after { background: var(--border-soft); }
.panel-drag-handle, .file-tree-empty { color: var(--muted); }
.button, .icon-button { border-color: var(--border); background: color-mix(in srgb, var(--panel) 82%, var(--bg)); }
.button:hover, .icon-button:hover { border-color: var(--accent-strong); background: color-mix(in srgb, var(--panel) 64%, var(--bg)); }
.button.ghost { background: transparent; }
.empty-state { border-color: var(--border); }
.message.error { border-color: color-mix(in srgb, var(--danger) 58%, var(--border)); color: color-mix(in srgb, var(--danger) 72%, var(--text)); background: color-mix(in srgb, var(--danger) 18%, var(--panel)); }
.selection-context-copy { color: color-mix(in srgb, var(--accent) 68%, var(--text)); }
.composer, input, textarea, select, .composer-profile-select, .composer-effort-select, .blank-file-select { border-color: var(--border); color: var(--text); background: color-mix(in srgb, var(--editor) 88%, var(--bg)); }
.composer:focus, input:focus, textarea:focus, select:focus { border-color: var(--accent-strong); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-strong) 20%, transparent); }
.agent-working-status { color: color-mix(in srgb, var(--text) 68%, var(--muted)); }
.working-spinner { border-color: color-mix(in srgb, var(--muted) 54%, var(--panel)); border-top-color: var(--accent); }
.file-item { color: color-mix(in srgb, var(--text) 88%, var(--muted)); }
.file-item:hover { background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.file-item.active { border-color: color-mix(in srgb, var(--accent-strong) 58%, var(--border)); color: var(--text); background: color-mix(in srgb, var(--accent) 18%, var(--panel)); }
.active-file { color: var(--text); }
.line-numbers { border-right-color: var(--border-soft); }
.blank-card { border-color: var(--border); background: color-mix(in srgb, var(--panel) 86%, var(--bg)); }
.toast, .chat-history-item, .advanced-settings { background: color-mix(in srgb, var(--panel) 86%, var(--bg)); }
.advanced-settings summary { color: color-mix(in srgb, var(--text) 80%, var(--muted)); }

/* v40: give the search credential field room beside its actions */
.search-api-key-setting { grid-column: 1 / -1; }

/* v41: simplify search settings into full-width rows and a compact provider key link */
.field-label-row { display: flex; align-items: baseline; justify-content: flex-start; gap: 10px; }
.inline-key-link { color: var(--accent-strong); font-size: .64rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.inline-key-link:hover { color: var(--text); text-decoration: underline; }
.search-api-key-setting .secret-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: start; gap: 6px; }
.search-api-key-setting .secret-row input,
.search-api-key-setting .secret-row .button { min-height: 34px; }
.search-settings-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 13px; }
@media (max-width: 540px) {
  .field-label-row { align-items: flex-start; flex-direction: column; gap: 3px; }
  .search-api-key-setting .secret-row { grid-template-columns: 1fr auto auto; }
  .search-api-key-setting .secret-row input { grid-column: 1 / -1; }
  .search-settings-row { grid-template-columns: 1fr; gap: 9px; }
}

/* v44: Obsidian is the default appearance for fresh settings and the initial app shell. */

.activity-heading-actions, .message-actions { display: flex; align-items: center; gap: 5px; }
.message.paused { margin-right: auto; border: 1px solid color-mix(in srgb, var(--warning) 62%, var(--border)); color: color-mix(in srgb, var(--warning) 80%, var(--text)); background: color-mix(in srgb, var(--warning) 14%, var(--panel)); }
.message-actions { margin-top: 7px; flex-wrap: wrap; }
.reasoning-item { padding-left: 5px; border-left: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); }