/* H200 neutral UI. Color pairs live here; no component-local light/dark overrides.
   System preference is CSS-only fallback; theme.js adds a persistent explicit choice. */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --sidebar: #f6f6f6;
  --surface: #ffffff;
  --surface-soft: #f3f3f3;
  --surface-hover: #eaeaea;
  --surface-selected: #e6e6e6;
  --border: #dedede;
  --field-border: #888888;
  --text: #202020;
  --text-muted: #616161;
  --text-soft: #666666;
  --primary: #202020;
  --on-primary: #ffffff;
  --primary-hover: #404040;
  --focus: #175cd3;
  --link: #175cd3;
  --selection-bg: #c9ddff;
  --selection-text: #18253c;
  --success: #19643a;
  --success-bg: #eaf6ee;
  --warning: #804700;
  --warning-bg: #fff4dd;
  --danger: #a91d27;
  --danger-bg: #fef0f0;
  --scrim: rgba(0,0,0,.35);
  --shadow: 0 4px 18px rgba(0,0,0,.06);
  --sidebar-width: 280px;
  --content-width: 860px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-synthesis: none;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #212121;
  --sidebar: #171717;
  --surface: #292929;
  --surface-soft: #303030;
  --surface-hover: #3b3b3b;
  --surface-selected: #3b3b3b;
  --border: #454545;
  --field-border: #858585;
  --text: #ececec;
  --text-muted: #b8b8b8;
  --text-soft: #b4b4b4;
  --primary: #eeeeee;
  --on-primary: #171717;
  --primary-hover: #d6d6d6;
  --focus: #a9c7ff;
  --link: #a9c7ff;
  --selection-bg: #3e5b83;
  --selection-text: #ffffff;
  --success: #95efb6;
  --success-bg: #18382a;
  --warning: #ffd394;
  --warning-bg: #45351e;
  --danger: #ffb4b4;
  --danger-bg: #482424;
  --scrim: rgba(0,0,0,.60);
  --shadow: 0 4px 18px rgba(0,0,0,.16);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
  --bg: #212121;
  --sidebar: #171717;
  --surface: #292929;
  --surface-soft: #303030;
  --surface-hover: #3b3b3b;
  --surface-selected: #3b3b3b;
  --border: #454545;
  --field-border: #858585;
  --text: #ececec;
  --text-muted: #b8b8b8;
  --text-soft: #b4b4b4;
  --primary: #eeeeee;
  --on-primary: #171717;
  --primary-hover: #d6d6d6;
  --focus: #a9c7ff;
  --link: #a9c7ff;
  --selection-bg: #3e5b83;
  --selection-text: #ffffff;
  --success: #95efb6;
  --success-bg: #18382a;
  --warning: #ffd394;
  --warning-bg: #45351e;
  --danger: #ffb4b4;
  --danger-bg: #482424;
  --scrim: rgba(0,0,0,.60);
  --shadow: 0 4px 18px rgba(0,0,0,.16);
  }
}

/* Explicit foreground/background pairing also covers native Mac form controls. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
body { font-size: 14px; line-height: 1.55; }
[hidden] { display: none !important; }
button, input, textarea, select { font: inherit; }
button, input, textarea, select, option {
  color: var(--text); background: var(--surface); color-scheme: inherit;
}
button, input, select, textarea { border: 1px solid var(--field-border); border-radius: 9px; }
button { min-height: 36px; padding: 7px 12px; cursor: pointer; font-weight: 550; line-height: 1.4; }
button:hover:not(:disabled) { background: var(--surface-hover); }
button:disabled, input:disabled, select:disabled, textarea:disabled {
  opacity: 1; color: var(--text-muted); background: var(--surface-soft); cursor: not-allowed;
}
input:not([type="file"]), select { min-height: 36px; padding: 7px 10px; min-width: 0; }
input:not([type="file"]), textarea { -webkit-text-fill-color: var(--text); caret-color: var(--text); }
input:disabled, textarea:disabled { -webkit-text-fill-color: var(--text-muted); }
input::placeholder, textarea::placeholder { color: var(--text-soft); -webkit-text-fill-color: var(--text-soft); opacity: 1; }
input:-webkit-autofill { -webkit-text-fill-color: var(--text); box-shadow: 0 0 0 1000px var(--surface) inset; caret-color: var(--text); }
a, a:visited { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
::selection { background: var(--selection-bg); color: var(--selection-text); }
:where(button, input, textarea, select, summary, a, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
:where(p, h1, h2, h3, h4) { overflow-wrap: anywhere; }
svg { flex: none; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 16px; border: 2px solid var(--focus); border-radius: 10px; color: var(--text); background: var(--surface); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

/* Fixed-height workspace: history and answers scroll, composer never drifts offscreen. */
.app-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); height: 100vh; height: 100dvh; min-height: 0; }
.sidebar { display: flex; flex-direction: column; gap: 20px; padding: 20px 16px 12px; background: var(--sidebar); color: var(--text); border-right: 1px solid var(--border); min-height: 0; min-width: 0; }
.sidebar-top { display: grid; gap: 20px; flex: none; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font-weight: 700; }
.brand-text { min-width: 0; }
.brand-text strong, .brand-text span { display: block; }
.brand-text strong { font-size: 16px; letter-spacing: -.02em; }
.brand-text span { font-size: 11px; color: var(--text-muted); }
.primary-button { display: flex; align-items: center; gap: 8px; text-align: left; border-color: var(--border); border-radius: 12px; min-height: 44px; }
.primary-button span { font-size: 20px; }
.sidebar-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.sidebar-section { min-width: 0; margin-bottom: 22px; }
.sidebar-heading-row { display: flex; justify-content: space-between; align-items: center; }
.sidebar-heading { margin: 0 0 9px; font-size: 12px; font-weight: 650; color: var(--text-muted); }
.project-create-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.project-create-row input, .project-create-row button { font-size: 12px; }
.project-empty, .project-selection-summary, .document-empty { margin-top: 8px; font-size: 12px; color: var(--text-muted); line-height: 1.6; overflow-wrap: anywhere; }
.project-list, .document-list, .conversation-list { display: grid; gap: 3px; min-width: 0; margin-top: 8px; }
.project-list { max-height: 185px; overflow: auto; }
.project-instructions { margin-top: 10px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.project-instructions[hidden] { display: none; }
.project-instructions-heading { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; margin-bottom: 7px; }
.project-instructions-heading h3 { margin: 0; font-size: 12px; font-weight: 650; }
.project-instructions-meta { font-size: 11px; color: var(--text-muted); text-align: right; }
.project-instructions textarea { width: 100%; min-height: 92px; resize: vertical; font: inherit; font-size: 12px; line-height: 1.55; }
.project-instructions-actions { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-top: 7px; }
.project-instructions-actions p { margin: 0; font-size: 11px; line-height: 1.45; color: var(--text-muted); }
.project-instructions-actions button { flex: 0 0 auto; font-size: 12px; }
.document-list { max-height: 245px; overflow: auto; }
.admin-panel[hidden] { display: none; }
.admin-status { margin: 0 0 8px; color: var(--text-muted); font-size: 11px; line-height: 1.5; }
.admin-user-list { display: grid; gap: 6px; }
.admin-user-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.admin-user-item > div { min-width: 0; }
.admin-user-item strong, .admin-user-item span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-item strong { font-size: 12px; font-weight: 650; }
.admin-user-item span { margin-top: 2px; font-size: 11px; color: var(--text-muted); }
.admin-user-item button { min-height: 30px; padding: 4px 8px; font-size: 12px; }
.project-item, .conversation-item { text-align: left; width: 100%; border: 1px solid transparent; background: transparent; border-radius: 9px; padding: 9px 10px; color: var(--text); }
.project-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; align-items: center; }
.project-item strong, .conversation-item { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 450; }
.project-item span { font-size: 12px; color: var(--text-muted); }
.project-item.active, .conversation-item.active { background: var(--surface-selected); color: var(--text); font-weight: 650; }
.project-item-unfiled { border-style: dashed; border-color: var(--border); }
.document-item { min-width: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); padding: 10px; margin-bottom: 5px; }
.document-item > strong { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-item > span, .document-meta-line { font-size: 12px; color: var(--text-muted); }
.document-meta-line { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.file-state-badge { display: inline-block; flex: none; border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; font-size: 11px; color: var(--text-muted); background: var(--surface-soft); }
.document-item[data-state="ready"] .file-state-badge { color: var(--success); background: var(--success-bg); }
.document-item[data-state="failed"] .file-state-badge, .document-error { color: var(--danger); background: var(--danger-bg); }
.document-item:is([data-state="uploading"], [data-state="scanning"], [data-state="processing"]) .file-state-badge { color: var(--warning); background: var(--warning-bg); }
.document-error { font-size: 12px; padding: 4px 6px; border-radius: 5px; white-space: normal; overflow-wrap: anywhere; }
.document-actions { display: flex; justify-content: flex-end; margin-top: 6px; }
.document-remove-button { color: var(--danger); background: var(--danger-bg); border-color: currentColor; font-size: 12px; min-height: 28px; padding: 3px 8px; }
.unfiled-retention { display: block; font-size: 12px; line-height: 1.5; color: var(--text-muted); white-space: normal; margin-top: 5px; }
.unfiled-retention.is-warning { color: var(--warning); }
.sidebar-footer { flex: none; display: grid; gap: 10px; border-top: 1px solid var(--border); padding-top: 12px; }
.identity-panel { display: grid; gap: 5px; }
.identity-panel label { font-size: 11px; color: var(--text-muted); }
.identity-panel select { width: 100%; font-size: 13px; }
.muted { color: var(--text-muted); font-size: 12px; overflow-wrap: anywhere; }
.status-dot { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-muted); }
.status-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); flex: none; }
.status-dot.ok::before { background: var(--success); }
.status-dot.error::before { background: var(--danger); }

.main-panel { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--bg); color: var(--text); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px; flex: none; min-width: 0; }
.topbar-main { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.topbar h1 { margin: 0; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; min-width: 36px; padding: 0; background: transparent; border-color: transparent; color: var(--text); }
.sidebar-close { display: none; margin-left: auto; font-size: 26px; }
.route-badge, .topbar-pill { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.route-badge { border: 1px solid var(--border); padding: 3px 8px; border-radius: 7px; background: var(--surface-soft); }
.theme-control { display: inline-flex; align-items: center; gap: 7px; color: var(--text-muted); font-size: 12px; }
.theme-control select { font-size: 12px; min-width: 106px; background: var(--surface); }
.environment-notice { margin: 0 24px; padding: 7px 0 10px; border-bottom: 1px solid var(--border); color: var(--text-muted); background: var(--bg); font-size: 12px; line-height: 1.6; flex: none; }
.environment-notice:empty { display: none; }
.offline-notice { margin: 10px 24px; padding: 9px 12px; border: 1px solid var(--warning); border-radius: 9px; color: var(--warning); background: var(--warning-bg); font-size: 13px; flex: none; }
.message-area { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 32px max(24px, calc((100% - var(--content-width)) / 2)); scroll-padding-block: 24px; scrollbar-gutter: stable; }
.empty-state { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; max-width: 680px; margin-inline: auto; padding: 28px 0; color: var(--text); }
.empty-icon { font-size: 34px; line-height: 1; margin-bottom: 20px; color: var(--text); }
.empty-state h2 { font-size: clamp(24px, 2.8vw, 32px); font-weight: 600; letter-spacing: -.035em; margin: 0 0 12px; }
.empty-state p { color: var(--text-muted); margin: 0 0 28px; font-size: 15px; line-height: 1.8; }
.empty-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; }
.empty-action { font-size: 13px; font-weight: 450; min-height: 42px; border-radius: 12px; border-color: var(--border); background: var(--surface); color: var(--text); }

/* Text-only answers remain neutral. User bubbles never inherit the action color. */
.message-row { display: flex; margin: 0 0 28px; min-width: 0; }
.message-row > div { min-width: 0; max-width: 100%; }
.message-row.user { justify-content: flex-end; }
.message-row.user > div { flex: 0 1 auto; width: max-content; max-width: min(82%, 720px); }
.message-row.assistant > div { width: 100%; }
.message-bubble { color: var(--text); background: var(--bg); line-height: 1.85; font-size: 16px; white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.message-row.user .message-bubble { padding: 12px 18px; border-radius: 22px; background: var(--surface-soft); color: var(--text); }
.message-row.assistant .message-bubble { padding: 4px 0; color: var(--text); background: var(--bg); }
.message-meta { margin-top: 7px; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.message-row.user .message-meta { text-align: right; }
.typing::after { content: "▋"; margin-left: 2px; color: currentColor; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.job-bubble { padding: 12px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); background: var(--surface-soft); }
.job-status, .job-elapsed { display: block; color: var(--text-muted); font-size: 12px; }
.message-bubble pre { overflow-x: auto; background: var(--surface-soft); color: var(--text); padding: 14px; border-radius: 10px; }
.message-bubble code { background: var(--surface-soft); color: var(--text); font-size: .9em; }
.message-bubble table { display: block; overflow-x: auto; border-collapse: collapse; max-width: 100%; }
.message-bubble th, .message-bubble td { border: 1px solid var(--border); padding: 8px 12px; color: var(--text); background: var(--bg); }
.message-bubble th { background: var(--surface-soft); }
.message-bubble blockquote { border-left: 3px solid var(--field-border); margin-left: 0; padding-left: 16px; color: var(--text-muted); }

/* Compact composer. Less-used controls expand without hiding any capability. */
.composer-wrap { flex: none; padding: 12px max(24px, calc((100% - var(--content-width)) / 2)) 12px; background: var(--bg); color: var(--text); max-height: 58vh; max-height: 58dvh; overflow-y: auto; }
.composer-shell { border: 1px solid var(--field-border); border-radius: 24px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.composer { padding: 14px 16px 12px; }
.composer:focus-within { border-radius: 23px 23px 0 0; }
.composer textarea { display: block; width: 100%; min-height: 58px; max-height: 180px; resize: none; border: 0; padding: 3px 2px 12px; border-radius: 8px; line-height: 1.7; font-size: 16px; background: var(--surface); color: var(--text); -webkit-text-fill-color: var(--text); }
.composer textarea:focus-visible { outline: none; }
.composer-shell:focus-within { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus), var(--shadow); }
.composer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 6px; position: relative; z-index: 1; }
.composer-select-wrap { display: inline-flex; align-items: center; }
.composer-select, .composer-actions select { font-size: 12px; min-height: 34px; padding: 5px 10px; border-radius: 999px; background: var(--surface); color: var(--text); border-color: var(--border); }
.message-bubble.markdown-body { white-space: normal; }
.markdown-body > :first-child { margin-top: 0; }
.markdown-body > :last-child { margin-bottom: 0; }
.markdown-body p, .markdown-body ul, .markdown-body ol, .markdown-body pre, .markdown-body table, .markdown-body blockquote { margin: 0 0 12px; }
.markdown-body ul, .markdown-body ol { padding-left: 1.5em; }
.markdown-body li + li { margin-top: 4px; }
.markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { margin: 18px 0 8px; line-height: 1.4; }
.markdown-body h3 { font-size: 1.25em; } .markdown-body h4 { font-size: 1.12em; } .markdown-body h5, .markdown-body h6 { font-size: 1em; }
.markdown-body strong { font-weight: 650; }
.markdown-body hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }
.markdown-body a { color: var(--focus); }
.markdown-body pre code { background: transparent; white-space: pre; }
.input-hint { color: var(--text-muted); font-size: 11px; }
.composer-actions { display: flex; align-items: center; gap: 7px; margin-left: auto; flex-wrap: wrap; }
.send-button { color: var(--on-primary); background: var(--primary); border-color: var(--primary); border-radius: 999px; min-height: 38px; padding: 8px 15px; }
.send-button:hover:not(:disabled) { background: var(--primary-hover); }
.send-button span { padding-left: 7px; }
.send-button:disabled { color: var(--text-muted); background: var(--surface-soft); border-color: var(--border); }
.report-button { font-size: 12px; border-radius: 999px; border-color: var(--border); color: var(--text); background: var(--surface); }
.report-button.is-active, .report-button[aria-pressed="true"] { background: var(--surface-selected); border-color: var(--field-border); color: var(--text); }
.stop-button, .report-cancel-button { border-radius: 999px; color: var(--danger); background: var(--danger-bg); border-color: currentColor; }
.composer-options { border-top: 1px solid var(--border); }
.composer-options summary { cursor: pointer; padding: 11px 16px; color: var(--text-muted); font-size: 12px; border-radius: 0 0 23px 23px; }
.composer-options summary:hover { background: var(--surface-soft); }
.options-hint { margin-left: 9px; font-size: 11px; }
.composer-tools { display: grid; gap: 12px; padding: 6px 16px 16px; }
.upload-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
#uploadStatus { grid-column: 1 / -1; overflow-wrap: anywhere; color: var(--text-muted); font-size: 12px; }
.tool-chip { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--field-border); border-radius: 10px; background: var(--surface); color: var(--text); }
.tool-chip-icon { color: var(--text); font-size: 20px; }
.upload-field { position: relative; cursor: pointer; min-width: 0; }
.upload-field input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-drop-copy { display: grid; min-width: 0; gap: 2px; }
.file-drop-copy strong, .file-drop-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-drop-copy strong { font-size: 13px; font-weight: 550; }
.file-drop-copy small { color: var(--text-muted); font-size: 12px; }
.file-drop-zone { border-style: dashed; }
.file-drop-zone:focus-within, .file-drop-zone.is-dragover { outline: 2px solid var(--focus); outline-offset: 2px; background: var(--surface-soft); }
.file-drop-zone.has-file { border-style: solid; }
.file-drop-zone.is-busy { cursor: progress; pointer-events: none; }
.upload-button { min-height: 38px; color: var(--text); background: var(--surface-soft); }
.mode-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 9px; align-items: center; color: var(--text); font-size: 13px; }
.mode-row select { min-width: 84px; }
#modeHint, .source-notice { color: var(--text-muted); font-size: 12px; line-height: 1.6; }
.source-notice { margin: 0; }
.composer-note { color: var(--text-muted); font-size: 11px; text-align: center; margin-top: 8px; }
.error-banner { margin-bottom: 10px; padding: 11px 14px; border: 1px solid var(--danger); border-radius: 12px; color: var(--danger); background: var(--danger-bg); font-size: 13px; overflow-wrap: anywhere; }

/* Existing report/citation controls use the same palette, even while heavy is unavailable. */
.report-request-anchor { min-width: 0; }
.report-card { margin: 12px 0 28px; border: 1px solid var(--border); border-radius: 14px; padding: 20px; background: var(--surface); color: var(--text); }
.report-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.report-eyebrow { color: var(--text-muted); font-size: 11px; margin-bottom: 5px; }
.report-title { color: var(--text); font-size: 18px; margin: 0; }
.report-status-badge { border: 1px solid var(--border); background: var(--surface-soft); color: var(--text-muted); border-radius: 6px; padding: 3px 8px; font-size: 12px; white-space: nowrap; }
.report-card[data-status="completed"] .report-status-badge { color: var(--success); background: var(--success-bg); }
.report-card[data-status="failed"] .report-status-badge { color: var(--danger); background: var(--danger-bg); }
.report-card[data-status="cancelled"] .report-status-badge { color: var(--text-muted); background: var(--surface-soft); }
.report-body { color: var(--text); white-space: pre-wrap; line-height: 1.8; margin: 14px 0; }
.report-retention { color: var(--text-muted); background: var(--surface-soft); border-radius: 8px; font-size: 12px; padding: 8px 10px; }
.report-retention.is-warning { color: var(--warning); background: var(--warning-bg); }
.report-citations, .report-artifacts { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 14px; }
.report-citations h4, .report-artifacts h4 { margin: 0 0 10px; font-size: 13px; color: var(--text); }
.report-citation-list { padding-left: 22px; margin: 0; }
.report-citation-item { color: var(--text); line-height: 1.7; padding-bottom: 12px; overflow-wrap: anywhere; }
.report-citation-item strong, .report-citation-item span { display: block; }
.report-citation-locator, .report-citation-excerpt { color: var(--text-muted); font-size: 12px; }
.report-artifact-list { display: flex; flex-wrap: wrap; gap: 8px; }
.report-artifact-chip { display: grid; gap: 4px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); background: var(--surface-soft); text-decoration: none; }
.report-artifact-chip strong { font-size: 13px; }
.report-artifact-chip span, .report-artifact-note { font-size: 12px; color: var(--text-muted); }
.report-artifact-chip[data-status="failed"] { color: var(--danger); background: var(--danger-bg); }
.report-card-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.report-clarification { display: grid; gap: 12px; margin: 12px 0; }
.report-clarification label { display: grid; gap: 6px; }
.report-clarification small { color: var(--text-muted); }
.report-clarification textarea { width: 100%; resize: vertical; min-height: 72px; padding: 10px; color: var(--text); background: var(--surface); }
.report-clarification button { justify-self: start; }
.ui-loading :is(.message-area, .project-list, .document-list, .conversation-list) { cursor: progress; }

/* Compact screens use an accessible drawer instead of stacking all navigation above chat. */
.sidebar-collapsed .app-shell { grid-template-columns: minmax(0, 1fr); }
.sidebar-collapsed .sidebar { display: none; }
.sidebar-backdrop { position: fixed; inset: 0; z-index: 29; width: 100%; height: 100%; border: 0; border-radius: 0; padding: 0; background: var(--scrim); }
.sidebar-backdrop:hover:not(:disabled) { background: var(--scrim); }
@media (max-width: 1150px) {
  :root { --sidebar-width: 252px; }
  .topbar-pill { display: none; }
  .topbar { padding: 12px 18px; }
  .environment-notice { margin-inline: 18px; }
}
@media (max-width: 900px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: min(300px, calc(100vw - 40px)); z-index: 30; transform: translateX(-100%); visibility: hidden; box-shadow: var(--shadow); }
  .sidebar-open .sidebar { transform: translateX(0); visibility: visible; }
  .sidebar-close { display: inline-flex; }
  .message-area { padding-inline: 20px; }
  .composer-wrap { padding-inline: 20px; }
  .empty-actions { gap: 8px; }
}
@media (max-width: 600px) {
  .topbar { padding: 10px 12px; gap: 6px; flex-wrap: wrap; }
  .topbar-main { flex-basis: 100px; }
  .topbar-actions { gap: 6px; }
  .topbar h1 { font-size: 14px; }
  .route-badge { display: none; }
  .theme-control > span { display: none; }
  .environment-notice { margin-inline: 14px; font-size: 11px; }
  .message-area { padding: 20px 16px; }
  .message-bubble { font-size: 16px; }
  .message-row.user > div { max-width: 92%; }
  .composer-wrap { padding: 8px 12px max(8px, env(safe-area-inset-bottom)); }
  .composer { padding: 12px; }
  .composer-options summary { padding-inline: 12px; }
  .composer-tools { padding-inline: 12px; }
  .options-hint { display: none; }
  .input-hint { display: none; }
  .mode-row { grid-template-columns: auto 1fr; }
  #modeHint { grid-column: 1 / -1; }
  .report-card { padding: 14px; }
  .report-card-header { flex-wrap: wrap; }
  .empty-state { padding-block: 20px; }
  .empty-state p { font-size: 14px; }
  .empty-actions { display: grid; width: 100%; max-width: 290px; }
}
@media (max-height: 600px) {
  .sidebar { gap: 12px; padding-top: 12px; }
  .sidebar-top { gap: 10px; }
  .sidebar-footer { gap: 5px; padding-top: 8px; }
  .empty-state { justify-content: flex-start; padding-block: 10px; }
  .empty-icon { margin-bottom: 12px; }
  .composer-wrap { max-height: 60dvh; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  button, input, textarea, select, .composer-shell, .report-card, .file-state-badge { border: 1px solid ButtonText; }
  .project-item.active, .conversation-item.active { outline: 2px solid Highlight; }
  .sidebar-backdrop { background: Canvas; opacity: .75; }
}

.file-revisions { margin-top: 8px; }
.file-revisions > summary { cursor: pointer; font-size: 12px; color: var(--text-muted); }
.file-revisions-body { margin-top: 7px; display: grid; gap: 6px; }
.file-revision-row { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--border); }
.file-revision-label { font-size: 12px; overflow-wrap: anywhere; }
.file-revision-actions { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.file-revision-actions button, .file-revision-upload button { font-size: 11px; }
.revision-source-select { margin: 0; }
.file-revision-upload { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding-top: 6px; }
.file-revision-upload input[type="file"] { max-width: 100%; font-size: 11px; }


/* Gate11 Feedback MVP */
.feedback-controls { margin-top:8px; display:grid; gap:6px; font-size:.82rem; }
.feedback-rating-row,.feedback-reason-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.feedback-rating-button,.feedback-reason-submit { min-height:30px; border:1px solid var(--border,#d0d5dd); border-radius:8px; background:var(--surface,#fff); cursor:pointer; }
.feedback-rating-button { min-width:36px; font-size:1rem; }
.feedback-rating-button[aria-pressed="true"] { border-width:2px; font-weight:700; }
.feedback-reason-select { min-height:30px; border:1px solid var(--border,#d0d5dd); border-radius:8px; background:var(--surface,#fff); color:inherit; }
.feedback-status { min-width:3em; opacity:.75; }
.feedback-controls button:disabled,.feedback-controls select:disabled { cursor:wait; opacity:.6; }

/* r26: GPT-style navigation + Project workspace. */
.project-workspace {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto 8px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
.project-workspace-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.project-workspace-kicker { display:block; font-size:11px; color:var(--text-muted); margin-bottom:2px; }
.project-workspace-header h2 { margin:0; font-size:20px; }
.project-workspace-header p { margin:4px 0 0; color:var(--text-muted); }
.project-workspace-grid { display:grid; grid-template-columns:minmax(260px,.8fr) minmax(0,1.4fr); gap:16px; margin-top:14px; }
.project-knowledge { min-width:0; padding:10px; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
.project-knowledge-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:8px; }
.project-knowledge-heading h3 { margin:0; font-size:13px; }
.project-knowledge-heading span { color:var(--text-muted); font-size:11px; }
.project-document-list { max-height:260px; }
.admin-panel-main { width:min(1120px,calc(100% - 32px)); margin:0 auto 8px; padding:12px 18px; border:1px solid var(--border); border-radius:14px; background:var(--surface); }
.report-clarification-intro { color:var(--text-muted); margin:0 0 10px; }
.report-clarification label { display:grid; gap:6px; }
.report-clarification select, .report-clarification textarea { width:100%; }
@media (max-width: 900px) {
  .project-workspace-grid { grid-template-columns:1fr; }
  .project-workspace { width:calc(100% - 20px); padding:14px; }
}

/* r27 — compact delete controls for Projects and conversation history */
.nav-record-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 6px;
}
.nav-record-row > .project-item,
.nav-record-row > .conversation-item {
  min-width: 0;
  width: 100%;
}
.record-delete-button {
  align-self: center;
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 9px;
  background: transparent;
  color: var(--danger, #b42318);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}
.record-delete-button:hover,
.record-delete-button:focus-visible {
  background: color-mix(in srgb, currentColor 7%, transparent);
}

/* ===== r28 — SI 助手：Claude-style warm palette, Projects page, account menu ===== */
:root {
  color-scheme: light;
  --bg: #faf9f5;
  --sidebar: #f3f1ea;
  --surface: #ffffff;
  --surface-soft: #f0eee6;
  --surface-hover: #ebe8df;
  --surface-selected: #e6e2d6;
  --border: #e2ddd0;
  --field-border: #8e897d;
  --text: #1f1e1d;
  --text-muted: #5c5950;
  --text-soft: #6b675d;
  --primary: #ae5630;
  --on-primary: #ffffff;
  --primary-hover: #974a29;
  --accent: #c96442;
  --accent-soft: #f6e4da;
  --focus: #c25e3c;
  --link: #a14f2c;
  --selection-bg: #f3d3c3;
  --selection-text: #1f1e1d;
  --danger: #a3291f;
  --danger-bg: #fbecea;
  --shadow: 0 1px 2px rgba(31,30,29,.04), 0 6px 20px rgba(31,30,29,.06);
  --serif: "Tiempos Text", "Iowan Old Style", "Noto Serif TC", "Songti TC", Georgia, serif;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #262624;
  --sidebar: #1f1e1d;
  --surface: #30302e;
  --surface-soft: #2b2a27;
  --surface-hover: #3a3936;
  --surface-selected: #3f3d39;
  --border: #46443f;
  --field-border: #8a867c;
  --text: #f5f4ef;
  --text-muted: #c2bfb6;
  --text-soft: #b0ada4;
  --primary: #d97757;
  --on-primary: #1f1e1d;
  --primary-hover: #e48b6d;
  --accent: #d97757;
  --accent-soft: #4a3026;
  --focus: #e3906f;
  --link: #ef9a7a;
  --selection-bg: #6b3a28;
  --selection-text: #ffffff;
  --danger: #ffb4ab;
  --danger-bg: #4a2522;
  --shadow: 0 1px 2px rgba(0,0,0,.2), 0 6px 20px rgba(0,0,0,.22);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #262624; --sidebar: #1f1e1d; --surface: #30302e; --surface-soft: #2b2a27;
    --surface-hover: #3a3936; --surface-selected: #3f3d39; --border: #46443f; --field-border: #8a867c;
    --text: #f5f4ef; --text-muted: #c2bfb6; --text-soft: #b0ada4;
    --primary: #d97757; --on-primary: #1f1e1d; --primary-hover: #e48b6d;
    --accent: #d97757; --accent-soft: #4a3026; --focus: #e3906f; --link: #ef9a7a;
    --selection-bg: #6b3a28; --selection-text: #ffffff; --danger: #ffb4ab; --danger-bg: #4a2522;
  }
}

/* Brand */
.brand-logo { width: 40px; height: 40px; flex: none; padding: 3px; border-radius: 11px; background: #ffffff; border: 1px solid var(--border); object-fit: contain; }
.brand-text strong { font-family: var(--serif); font-size: 18px; font-weight: 600; letter-spacing: 0; }

/* Sidebar navigation */
.sidebar-top { gap: 16px; }
.sidebar-nav { display: grid; gap: 2px; }
.nav-button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--text); font-weight: 500; text-align: left; }
.nav-button:hover:not(:disabled) { background: var(--surface-hover); }
.nav-button.active { background: var(--surface-selected); font-weight: 600; }
.nav-icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; font-size: 15px; color: var(--text-muted); }
.nav-button-new .nav-icon { background: var(--accent); color: #ffffff; font-size: 16px; }
.nav-button-new { font-weight: 600; }

/* Conversation history */
.conversation-item { display: grid; gap: 1px; padding: 7px 10px; font-weight: 450; }
.conversation-item-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
.conversation-item-project { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; color: var(--text-muted); font-weight: 400; }
.conversation-record-row .record-delete-button { opacity: 0; min-height: 28px; padding: 3px 7px; border-color: transparent; }
.conversation-record-row:hover .record-delete-button,
.conversation-record-row:focus-within .record-delete-button { opacity: 1; border-color: var(--border); }
@media (hover: none) { .conversation-record-row .record-delete-button { opacity: 1; } }

/* Account */
.account-area { position: relative; }
.account-button { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 7px 8px; border: 1px solid transparent; border-radius: 12px; background: transparent; text-align: left; }
.account-button:hover:not(:disabled), .account-button[aria-expanded="true"] { background: var(--surface-hover); border-color: var(--border); }
.account-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: var(--text); color: var(--bg); font-size: 13px; font-weight: 700; }
.account-text { min-width: 0; display: grid; }
.account-text strong, .account-text small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.account-text strong { font-size: 13px; font-weight: 600; }
.account-text small { font-size: 11px; color: var(--text-muted); }
.account-chevron { color: var(--text-muted); font-size: 12px; }
.account-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 30; padding: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
.account-menu-head { display: grid; gap: 2px; padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.account-menu-head strong { font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.account-menu-head span { font-size: 11px; color: var(--text-muted); }
.account-menu-item { width: 100%; min-height: 36px; border: 0; border-radius: 8px; background: transparent; text-align: left; font-weight: 500; }
.account-menu-item:hover:not(:disabled) { background: var(--surface-hover); }

/* Buttons */
.accent-button { color: var(--on-primary); background: var(--primary); border-color: var(--primary); border-radius: 10px; }
.accent-button:hover:not(:disabled) { background: var(--primary-hover); }
.accent-button.small { min-height: 30px; padding: 4px 10px; font-size: 12px; }
.link-button { border: 0; background: transparent; color: var(--text-muted); padding: 4px 2px; min-height: 28px; font-weight: 500; }
.link-button:hover:not(:disabled) { background: transparent; color: var(--text); text-decoration: underline; }

/* Projects page */
.projects-page { width: min(1040px, calc(100% - 32px)); margin: 8px auto 0; padding: 12px 0 32px; overflow-y: auto; flex: 1; min-height: 0; }
.projects-page-header h2 { margin: 0 0 4px; font-family: var(--serif); font-size: 28px; font-weight: 500; }
.projects-page-header p { margin: 0 0 18px; color: var(--text-muted); }
.projects-page .project-create-row { display: flex; gap: 8px; max-width: 560px; margin-bottom: 18px; }
.projects-page .project-create-row input { flex: 1; border-radius: 10px; }
.projects-page .project-empty { color: var(--text-muted); padding: 24px 0; }
.project-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; max-height: none; overflow: visible; margin-top: 0; }
.project-card { position: relative; display: block; }
.project-card > .project-item { display: grid; grid-template-columns: 1fr; gap: 6px; align-content: start; min-height: 132px; padding: 16px 16px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); text-align: left; }
.project-card > .project-item:hover:not(:disabled) { border-color: var(--field-border); background: var(--surface); }
.project-card > .project-item strong { font-size: 15px; font-weight: 600; white-space: normal; padding-right: 54px; }
.project-card .project-card-summary { font-size: 13px; color: var(--text-muted); line-height: 1.6; white-space: normal; }
.project-card .project-card-meta { font-size: 11px; color: var(--text-soft); margin-top: auto; }
.project-card > .record-delete-button { position: absolute; top: 12px; right: 12px; min-height: 28px; padding: 3px 8px; background: var(--surface); }

/* Workspace (project or unfiled context panel) */
.project-workspace { background: var(--surface); }
.project-workspace-header h2 { font-family: var(--serif); font-weight: 500; }
.project-workspace.is-unfiled { padding-top: 10px; padding-bottom: 10px; }
.project-workspace.is-unfiled .project-workspace-header p { margin-bottom: 0; }
.workspace-details > .workspace-summary { cursor: pointer; padding: 8px 2px; color: var(--text-muted); font-size: 13px; font-weight: 600; }
.workspace-details[open] > .workspace-summary { margin-bottom: 8px; }
.project-knowledge-heading { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.project-knowledge-heading .accent-button { margin-left: auto; }
.project-upload-status { margin: 4px 0 0; font-size: 12px; color: var(--text-muted); min-height: 0; }
.project-upload-status:empty { display: none; }
.project-conversations { margin-top: 16px; }
.project-conversations h3 { margin: 0 0 8px; font-size: 14px; }
.project-conversation-list { display: grid; gap: 6px; }
.project-conversation-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); text-align: left; font-weight: 450; }
.project-conversation-item strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; }
.project-conversation-item span { flex: none; font-size: 11px; color: var(--text-muted); }
body[data-view="project"] .project-workspace { flex: 1; min-height: 0; overflow-y: auto; }

/* Home */
.empty-logo { width: 56px; height: 56px; padding: 5px; border-radius: 16px; background: #ffffff; border: 1px solid var(--border); margin-bottom: 18px; }
.empty-state h2 { font-family: var(--serif); font-weight: 500; letter-spacing: 0; }
.empty-state { max-width: 820px; }
.empty-state .empty-lead { max-width: 720px; margin-bottom: 20px; }
.portal-capabilities { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; text-align: left; }
.portal-capability { display: grid; gap: 5px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.portal-capability strong { color: var(--text); font-size: 14px; font-weight: 600; }
.portal-capability span { color: var(--text-muted); font-size: 13px; line-height: 1.65; }
.empty-state .empty-scope-note { margin: 0 0 18px; color: var(--text-muted); font-size: 13px; line-height: 1.65; }
.empty-state .empty-scope-note strong { color: var(--text); font-weight: 600; }
.empty-action:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.report-button.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
@media (max-width: 720px) { .portal-capabilities { grid-template-columns: 1fr; } }

/* r29 — brand version label */
.brand-title { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.brand-text .brand-title strong { display: inline; }
.brand-text .brand-version { display: inline-block; padding: 1px 7px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted); font-size: 11px; font-weight: 500; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.brand-text .brand-subtitle { display: block; }

/* r30 — version label button and panel */
.brand { position: relative; }
.brand-text button.brand-version { min-height: 0; cursor: pointer; font: inherit; font-size: 11px; font-weight: 600; color: var(--text-muted); }
.brand-text button.brand-version:hover:not(:disabled) { background: var(--surface-hover); color: var(--text); }
.version-panel { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
.version-panel dl { display: grid; grid-template-columns: 1fr; gap: 2px; margin: 0 0 8px; font-size: 12px; }
.version-panel dt { color: var(--text-muted); margin-top: 6px; }
.version-panel dd { margin: 0; overflow-wrap: anywhere; }
.version-panel code { font-size: 11px; user-select: all; overflow-wrap: anywhere; }

/* r31 — attachments, auto-source note, report timer */
.attachment-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.attachment-chip { display: inline-flex; align-items: baseline; gap: 6px; max-width: 280px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: 12px; }
.attachment-chip strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; }
.attachment-chip small { flex: none; color: var(--text-muted); }
.attachment-chip[data-state="failed"] small { color: var(--danger); }
.source-auto-note { font-size: 11px; color: var(--text-muted); }
.report-header-meta { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.report-timer { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.report-timer.is-running { color: var(--accent); font-weight: 600; }