/* 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-offset: 3px; }
.composer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.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; }