/* Light is the default. Night colors apply only after an explicit device preference. */
:root {
  color-scheme: light;
  --accent: #18765b;
  --accent-hover: #11634c;
  --accent-soft: #e7f2ec;
  --ink: #252e2a;
  --muted: #6a7670;
  --line: #dfe5e1;
  --faint: #edf1ee;
  --surface: #f4f6f4;
  --sidebar-surface: #f7f8f6;
  --rail-surface: #ecefeb;
  --panel-surface: #ffffff;
  --field-surface: #ffffff;
  --selected-surface: #e2ece6;
  --strong-line: #cbd8d0;
  --focus-ring: #298b6b;
  --primary-ink: #ffffff;
  --rail-hover: #e2e8e2;
  --text-secondary: #58665d;
  --hover-border: #97b6a2;
  --scroll-thumb: #c3cec6;
  --row-hover: #edf1ed;
  --selected-ink: #203c32;
  --selected-muted: #617568;
  --avatar-surface: #e1eee6;
  --mosaic-surface: #e0e8e2;
  --mosaic-cell: #d1ded5;
  --active-border: #afcbb9;
  --filter-hover: #edf2ed;
  --active-ring: #18765b26;
  --daily-hover: #e9f0e9;
  --header-surface: #fafbf9;
  --message-avatar: #e1eee6;
  --time-surface: transparent;
  --bubble-surface: #ffffff;
  --chat-surface: #fafafa;
  --chat-bubble: #eeeef0;
  --bubble-border: #e7ece8;
  --user-bubble: #b0f0a7;
  --user-bubble-border: #bbd7c524;
  --badge-surface: #edf2ef;
  --quote-surface: #f0f3f0;
  --quote-border: #b9cabc;
  --quote-ink: #415a4b;
  --quote-hover: #e7eee8;
  --floating-surface: #ffffff;
  --code-ink: #315e47;
  --code-surface: #eaf0eb;
  --note-surface: #edf3ef;
  --field-line: #d3ddd5;
  --focus-halo: #18765b12;
  --disabled-ink: #788c80;
  --disabled-surface: #dfe7e1;
  --danger: #b94239;
  --recording-surface: #fff0ee;
  --selected-border: #96bfa7;
  --selected-halo: #18765b15;
  --info: #327392;
  --warning: #94641d;
  --file-surface: #f5f8f5;
  --file-hover-border: #abc2b2;
  --file-hover: #eaf2ec;
  --ask-surface: #fffaf0;
  --ask-border: #ead8b4;
  --ask-symbol-surface: #f8e9c9;
  --ask-muted: #806a40;
  --resolved-surface: #e3f0e6;
  --ask-option-surface: #ffffff;
  --ask-option-border: #dedcca;
  --ask-option-selected: #eaf5ed;
  --ask-option-selected-border: #a7c9b3;
  --ask-field-border: #d9cbb0;
  --ask-secondary-surface: #f4eddf;
  --ask-attention-surface: #fff7e7;
  --ask-attention-action: #f9e8c4;
  --dialog-surface: #ffffff;
  --dialog-backdrop: rgb(24 27 30 / 24%);
  --dialog-close-surface: #f1f2f3;
  --dialog-line: #e4e5e7;
  --dialog-secondary: #64676d;
  --dialog-hover: #f0f1f2;
  --dialog-shadow: 0 16px 48px rgb(0 0 0 / 14%), 0 2px 8px rgb(0 0 0 / 6%);
  --choice-border: #a8c9b4;
  --menu-hover: #e5eee7;
  --toast-surface: #ffffff;
  --drop-surface: #edf7f1ed;
  --failure-ink: #853f38;
  --failure-surface: #fff2f0;
  --failure-border: #efcec9;
  --failure-muted: #956c65;
  --setting-disabled-surface: #f0f3f0;
  --setting-card: #f4f8f5;
  --switch-line: #bdcec3;
  --blue: var(--accent);
  --card-shadow: 0 2px 8px rgb(40 59 47 / 3%);
  --popover-shadow: 0 6px 24px rgb(32 53 40 / 12%);
  --theme-font: "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --accent: #a7ead8;
  --accent-hover: #c2f3e5;
  --accent-soft: #17383e;
  --ink: #e3eae9;
  --muted: #98acb3;
  --line: #a7c2c220;
  --faint: #192e38;
  --surface: #0c1b25;
  --sidebar-surface: #101f29;
  --rail-surface: #08131c;
  --panel-surface: #13232c;
  --field-surface: #0d1c25;
  --selected-surface: #203b44;
  --strong-line: #35515b;
  --focus-ring: #75cbb7;
  --primary-ink: #122421;
  --rail-hover: #142b35;
  --text-secondary: #b5c4c8;
  --hover-border: #6d989a;
  --scroll-thumb: #3a505b;
  --row-hover: #182c36;
  --selected-ink: #e3f3ee;
  --selected-muted: #b5c9ca;
  --avatar-surface: #1c3b43;
  --mosaic-surface: #1c343f;
  --mosaic-cell: #29454e;
  --active-border: #648c91;
  --filter-hover: #192f38;
  --active-ring: #a7ead826;
  --daily-hover: #1b323c;
  --header-surface: #0e1e28;
  --message-avatar: #1c3943;
  --time-surface: #132731;
  --bubble-surface: #162b35;
  --chat-surface: var(--surface);
  --chat-bubble: var(--bubble-surface);
  --bubble-border: #a3bbc415;
  --user-bubble: #214445;
  --user-bubble-border: #a7ead824;
  --badge-surface: #172f39;
  --quote-surface: #142832;
  --quote-border: #567b82;
  --quote-ink: #c9ddda;
  --quote-hover: #1b343c;
  --floating-surface: #1b333d;
  --code-ink: #c9e9df;
  --code-surface: #0d202a;
  --note-surface: #19343d;
  --field-line: #a7c2c22e;
  --focus-halo: #a7ead812;
  --disabled-ink: #8aabac;
  --disabled-surface: #28444b;
  --danger: #f3a098;
  --recording-surface: #42272d;
  --selected-border: #6b9e9a;
  --selected-halo: #a7ead815;
  --info: #9acddd;
  --warning: #e2bd78;
  --file-surface: #182e38;
  --file-hover-border: #557981;
  --file-hover: #1e3a43;
  --ask-surface: #262820;
  --ask-border: #655638;
  --ask-symbol-surface: #4c422b;
  --ask-muted: #c7bd9f;
  --resolved-surface: #23413d;
  --ask-option-surface: #182e35;
  --ask-option-border: #48554d;
  --ask-option-selected: #203e3b;
  --ask-option-selected-border: #6b9e8a;
  --ask-field-border: #6a6349;
  --ask-secondary-surface: #303329;
  --ask-attention-surface: #332d21;
  --ask-attention-action: #463c28;
  --dialog-surface: #10212b;
  --dialog-backdrop: rgb(0 0 0 / 48%);
  --dialog-close-surface: #29343b;
  --dialog-line: #ffffff1c;
  --dialog-secondary: #b2bbc1;
  --dialog-hover: #ffffff0d;
  --dialog-shadow: 0 16px 48px rgb(0 0 0 / 32%), 0 2px 8px rgb(0 0 0 / 18%);
  --choice-border: #4e7e80;
  --menu-hover: #23414a;
  --toast-surface: #24414a;
  --drop-surface: #123239ed;
  --failure-ink: #dfc7c3;
  --failure-surface: #34252c;
  --failure-border: #75504d;
  --failure-muted: #bfa8a7;
  --setting-disabled-surface: #172b35;
  --setting-card: #172e36;
  --switch-line: #55727c;
  --card-shadow: 0 4px 18px rgb(0 0 0 / 10%);
  --popover-shadow: 0 8px 30px #0005;
}

body { color: var(--ink); background: var(--surface); font-family: var(--theme-font); }
button, input, textarea, select { font-family: inherit; accent-color: var(--accent); }
button { color: var(--ink); border-color: var(--line); background: var(--panel-surface); }
button:hover { background: var(--faint); }
input, textarea, select { color: var(--ink); border-color: var(--line); background: var(--field-surface); }
input::placeholder, textarea::placeholder { color: var(--muted); }
a { color: var(--accent); }
h1, h2, h3, h4, label, .label { color: var(--ink); }
.quiet, .hint, .muted, .notice { color: var(--muted); }
button:focus-visible, summary:focus-visible, a:focus-visible { outline-color: var(--accent); }
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 2px;
}
::selection { color: var(--primary-ink); background: var(--accent); }
button.primary, .primary, #group-dialog .dialog-actions > .primary,
.group-frame .group-welcome .primary, .mention-picker-actions .primary,
#dispatch-button, .group-work-ask-actions [type="submit"] {
  color: var(--primary-ink); background: var(--accent); border-color: var(--accent); border-radius: 7px;
}
button.primary:hover, .primary:hover, #group-dialog .dialog-actions > .primary:hover,
.group-frame .group-welcome .primary:hover, .mention-picker-actions .primary:hover,
#dispatch-button:hover, .group-work-ask-actions [type="submit"]:hover {
  color: var(--primary-ink); background: var(--accent-hover); border-color: var(--accent-hover);
}

/* Quiet navigation and a distinct official logo tile. */
.app-rail { background: var(--rail-surface); border-color: var(--line); }
.rail-brand {
  background: #142a34;
  color: transparent; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line);
}
.rail-brand > img { display: block; width: 30px; height: 30px; }
.rail-brand > span { background: var(--accent); }
.rail-button, .rail-more > summary { color: var(--muted); background: transparent; border-radius: 9px; }
.rail-button:hover, .rail-more > summary:hover { color: var(--ink); background: var(--rail-hover); }
.rail-button.active { color: var(--accent); background: var(--accent-soft); }
.chat-focused .left, .chat-focused .mid { background: var(--sidebar-surface); border-color: var(--line); }
.chat-search { color: var(--muted); background: var(--field-surface); border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); }
.chat-search:focus-within { outline-color: var(--focus-ring); }
.chat-search #chat-search { color: var(--ink); }
.chat-search #chat-search::placeholder { color: var(--muted); }
.chat-add > summary, .chat-add > .chat-add-trigger { border-color: var(--strong-line); color: var(--text-secondary); background: transparent; }
.chat-add > summary:hover, .chat-add > .chat-add-trigger:hover { background: var(--accent-soft); border-color: var(--hover-border); }
.conversation-list { padding: 0; scrollbar-color: var(--scroll-thumb) transparent; }
.conversation-row { margin: 0; padding-inline: 12px; border-radius: 0; color: var(--ink); }
.conversation-row:hover { background: var(--row-hover); }
.conversation-row.selected { background: var(--conversation-selected); color: #fff; }
.conversation-row::after { display: block; left: 64px; right: 12px; border-color: var(--line); opacity: .65; }
.conversation-row.selected::after { border-color: transparent; }
.conversation-title b { font-weight: 500; }
.conversation-title time, .conversation-preview { color: var(--muted); }
.conversation-row.selected .conversation-preview, .conversation-row.selected time { color: var(--conversation-selected-muted); }
.conversation-preview small { color: var(--accent); }
.conversation-row.selected .conversation-preview small { color: #fff; }
.conversation-avatar { border-radius: 6px; background: var(--avatar-surface); color: var(--accent); }
.group-mosaic { background: var(--mosaic-surface); }
.group-mosaic > span { background: var(--mosaic-cell); }
.chat-directory-status { color: var(--muted); border-color: var(--line); }
.chat-directory-status.connected::before { background: var(--accent); }
.chat-directory-empty { color: var(--muted); }
.chat-focused .mid .directory-title-copy > small,
.chat-focused .mid .directory-copy > small,
.chat-focused .mid .directory-status-line .directory-delivery-count { color: var(--muted); }
.chat-focused .mid .task-directory-back { color: var(--text-secondary); }
.chat-focused .mid .directory-head [data-action="new-task"] {
  color: var(--accent); background: var(--panel-surface); border-color: var(--strong-line); border-radius: 7px;
}
.chat-focused .mid .directory-head [data-action="new-task"]:hover { background: var(--accent-soft); border-color: var(--active-border); }
.chat-focused .mid #delivery-search { background: var(--field-surface); border-color: var(--line); border-radius: 8px; }
.chat-focused .mid #delivery-search:focus-visible { outline-color: var(--focus-ring); }
.chat-focused .mid .workspace-filters button { color: var(--muted); background: transparent; border-radius: 7px; }
.chat-focused .mid .workspace-filters button:hover { background: var(--filter-hover); }
.chat-focused .mid .workspace-filters button[aria-pressed="true"] {
  color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--active-ring);
}
.chat-focused .mid .workspace-filters button[aria-pressed="true"] span { color: var(--accent); }
.chat-focused .mid :is(.directory-daily, .daily-row) { background: var(--panel-surface); border-radius: 9px; }
.chat-focused .mid :is(.directory-daily, .daily-row):hover { background: var(--daily-hover); }
.chat-focused .mid :is(.directory-daily, .daily-row):is(.on, .selected) {
  color: var(--accent); background: var(--selected-surface); border-color: var(--strong-line);
}
.chat-focused .mid :is(.workspace-item, .delivery-item):hover { background: var(--row-hover); }
.chat-focused .mid :is(.workspace-item, .delivery-item).selected { background: var(--selected-surface); color: var(--selected-ink); }
.chat-focused .mid .directory-copy b { color: var(--ink); }
.chat-focused .mid .tasklist { border-color: var(--line); }

/* Distinct speakers, with restrained surfaces for long conversations. */
.chat-focused .right, .chat-pane { background: var(--surface); }
.chat-focused .chat { background: var(--chat-surface); }
.chat-focused .header { background: var(--header-surface); border-color: var(--line); }
.header h1 { color: var(--ink); font-weight: 550; }
.header p, .group-frame #group-lead, .group-compose-tools #recipient-preview { color: var(--muted); }
.head-actions > button, .chat-focused .head-actions > button,
.header-menu > summary { color: var(--text-secondary); background: transparent; border-radius: 7px; }
.head-actions > button:hover, .header-menu > summary:hover { background: var(--faint); color: var(--accent); }
.agent-controls { border-color: var(--line); background: var(--surface); color: var(--muted); }
.agent-controls button, .agent-controls select, .group-frame #group-task,
.group-compose-tools button, .group-compose-tools select { color: var(--text-secondary); background: transparent; }
.agent-controls button:hover, .group-compose-tools button:hover,
.group-compose-tools select:hover { background: var(--faint); }
.avatar, .message-avatar { background: var(--message-avatar); color: var(--accent); }
.chat-focused .chat .msg .message-body > small.message-stamp,
.chat-focused .chat .msg .message-stamp time { color: var(--muted); }
.chat-focused .chat-time-divider { color: var(--muted); background: var(--time-surface); }
.chat-focused .msg:not(.me) > .message-body > .bubble {
  color: var(--ink); background: var(--chat-bubble); border-radius: 6px;
  box-shadow: none;
}
.chat-focused .msg.me > .message-body > .bubble,
.group-frame .chat .msg.me .bubble {
  color: var(--selected-ink); background: var(--user-bubble); border-radius: 6px;
  box-shadow: none;
}
.chat-focused .msg > .message-body > .bubble { position: relative; }
.chat-focused .msg > .message-body > .bubble::before { content: ''; position: absolute; left: -4px; top: 14px; width: 8px; height: 8px; background: inherit; transform: rotate(45deg); pointer-events: none; }
.chat-focused .msg.me > .message-body > .bubble::before { left: auto; right: -4px; }
.executor-badge { color: var(--text-secondary); background: var(--badge-surface); border-color: var(--line); }
.chat-message-actions button, .group-frame .message-actions button { color: var(--muted); background: transparent; }
.chat-message-actions button:hover, .group-frame .message-actions button:hover { color: var(--accent); }
.message-quote, .chat-focused .composer-reply, .group-frame #reply-context {
  color: var(--text-secondary); background: var(--quote-surface); border-left-color: var(--quote-border);
}
.message-quote b, .composer-reply .quote-source b { color: var(--quote-ink); }
.message-quote:hover { background: var(--quote-hover); }
.chat-presence, .group-notice { color: var(--muted); }
.jump-latest, .group-frame #jump-latest {
  background: var(--floating-surface); border-color: var(--strong-line); color: var(--accent);
  box-shadow: var(--popover-shadow);
}
.markdown blockquote { color: var(--text-secondary); background: var(--quote-surface); border-left-color: var(--quote-border); }
.markdown code { color: var(--code-ink); background: var(--code-surface); }
.markdown pre { color: var(--ink); background: var(--code-surface); border-radius: 8px; }
.markdown th, .file-preview th { background: var(--note-surface); }
.markdown th, .markdown td, .markdown hr { border-color: var(--line); }

/* The composer keeps its existing keyboard and attachment behavior. */
.chat-focused .composer { background: var(--surface); border-color: var(--line); }
.composer-box {
  padding: 6px 8px; border: 1px solid var(--field-line); border-radius: 10px; background: var(--panel-surface);
  box-shadow: 0 3px 12px #0001;
}
.composer-box:focus-within { border-color: var(--focus-ring); box-shadow: 0 0 0 2px var(--focus-halo); }
.composer .composer-box #chat-input { color: var(--ink); background: transparent; }
.composer .composer-box #chat-input::placeholder { color: var(--muted); }
.composer .composer-box #send-button {
  right: 10px; bottom: 8px; color: var(--primary-ink); background: var(--accent); border-radius: 7px;
}
.composer .composer-box #send-button:hover { background: var(--accent-hover); }
.composer .composer-box #send-button:disabled { color: var(--disabled-ink); background: var(--disabled-surface); opacity: 1; }
.composer-box .hh-attachment-toolbar button { color: var(--text-secondary); background: transparent; border-radius: 7px; }
.composer-box .hh-attachment-toolbar button:hover { color: var(--accent); background: var(--faint); }
.composer-box .hh-attachment-toolbar button.is-recording { color: var(--danger); background: var(--recording-surface); }
.composer-footer .quiet, .composer-box .hh-attachment-hint { color: var(--muted); }
.hh-attachment-draft { border-color: var(--line); background: var(--quote-surface); }
.mention-choice:has(input:checked), .mention-option:hover { background: var(--accent-soft); }
.mention-choice input, #group-dialog .agent-choice input { accent-color: var(--accent); }
.mention-picker-title small, .mention-option small { color: var(--muted); }
.mention-picker-actions { background: var(--panel-surface); border-color: var(--line); }

/* File cards, task progress and questions share the same surface hierarchy. */
.delivery-round, .chat-delivery, .revision-card, .delivery-pin, .delivery-empty,
.group-frame .group-work-card {
  background: var(--panel-surface); border-color: var(--line); border-radius: 10px; box-shadow: var(--card-shadow);
}
.delivery-round.selected { border-color: var(--selected-border); box-shadow: 0 0 0 2px var(--selected-halo); }
.state-text.blue { color: var(--info); }
.state-text.orange { color: var(--warning); }
.state-text.green { color: var(--accent); }
.state-text.red, .error, .form-error { color: var(--danger); }
.group-frame .group-work-card { color: var(--text-secondary); }
.group-frame .group-work-head, .round-footer { border-color: var(--line); }
.group-frame :is(.group-work-head > b, .group-work-head > div > b, .group-work-file b,
.group-work-item > header > b, .group-work-item-title) { color: var(--ink); }
.group-frame .group-work-file { border-color: var(--line); background: var(--file-surface); border-radius: 8px; }
.group-frame .group-work-file:hover { border-color: var(--file-hover-border); background: var(--file-hover); }
.group-frame .group-work-file small, .round-status { color: var(--muted); }
.group-frame .group-work-head a, .group-frame .group-work-head button { color: var(--accent); background: transparent; }
.media-result { border-color: var(--line); border-radius: 9px; }
.delivery-video, .group-frame .group-work-video { background: #060f16; }
.work-panel { background: var(--sidebar-surface); border-color: var(--line); }
.work-panel > header, .work-panel .panel { border-color: var(--line); }
.panel, #work-panel-body .panel, .work-results .artifact, .background-work,
.employee-update { color: var(--ink); background: var(--panel-surface); border-color: var(--line); }
.background-log, .group-frame .group-work-log { color: var(--muted); background: var(--field-surface); border-color: var(--line); }
#work-toggle.work-active { color: var(--accent); background: var(--accent-soft); }
.ask-card, .group-frame .group-work-ask { color: var(--ink); background: var(--ask-surface); border-color: var(--ask-border); box-shadow: 0 2px 8px #0001; }
.ask-symbol { color: var(--warning); background: var(--ask-symbol-surface); }
.ask-state { color: var(--warning); }
.ask-note, .ask-progress, .ask-option small, .ask-text-label,
.ask-answer-history p, .ask-history > summary { color: var(--ask-muted); }
.ask-resolved .ask-symbol { color: var(--accent); background: var(--resolved-surface); }
.ask-resolved .ask-state { color: var(--accent); }
.ask-option input { accent-color: var(--accent); }
.ask-option { color: var(--ink); background: var(--ask-option-surface); border-color: var(--ask-option-border); }
.ask-option:has(input:checked) { background: var(--ask-option-selected); border-color: var(--ask-option-selected-border); }
.ask-form textarea, .group-frame .group-work-ask textarea { color: var(--ink); background: var(--field-surface); border-color: var(--ask-field-border); }
.ask-actions [data-action="ask-dismiss"], .group-work-ask-actions button { color: var(--ask-muted); background: var(--ask-secondary-surface); border-color: var(--ask-border); }
.group-frame .group-work-ask h4 { color: var(--warning); }
.group-frame :is(.group-work-option small, .group-work-answer-label) { color: var(--ask-muted); }
.ask-attention { color: var(--warning); background: var(--ask-attention-surface); border-color: var(--ask-border); }
.ask-attention button { color: var(--warning); background: var(--ask-attention-action); border-color: var(--ask-border); }

/* Popovers, employee settings, skills and previews. */
dialog, #group-dialog, .group-artifact-dialog {
  color: var(--ink); background: var(--dialog-surface); border-color: var(--dialog-line);
  border-radius: 8px; box-shadow: var(--dialog-shadow);
}
dialog::backdrop, #group-dialog::backdrop, .group-artifact-dialog::backdrop {
  background: var(--dialog-backdrop); backdrop-filter: none;
}
.dialog-head, #group-dialog > header { padding: 14px 20px; border-color: var(--dialog-line); }
.dialog-head h2, #group-dialog > header h2 { font-size: 16px; font-weight: 600; }
.dialog-footer { border-color: var(--dialog-line); }
.dialog-head > button, #group-dialog > header > button {
  min-height: 32px; padding: 4px 10px; color: var(--dialog-secondary);
  background: transparent; border-color: transparent; border-radius: 5px; font-size: 12px;
}
.dialog-head > button:hover, #group-dialog > header > button:hover { color: var(--ink); background: var(--dialog-hover); }
dialog :is(.actions, .dialog-actions, .dialog-footer) > button { border-radius: 6px; }
dialog :is(.actions, .dialog-actions, .dialog-footer) > button:not(.primary) {
  color: var(--dialog-secondary); border-color: var(--dialog-line); background: transparent;
}
dialog :is(.actions, .dialog-actions, .dialog-footer) > button:not(.primary):hover { color: var(--ink); background: var(--dialog-hover); }
dialog :is(input, textarea, select), #group-dialog .form-row > :is(input, textarea, select) {
  color: var(--ink); background: var(--field-surface); border-color: var(--dialog-line); border-radius: 6px;
}
dialog .on, dialog .tabs button.on { background: var(--accent-soft); color: var(--accent); border-color: var(--choice-border); }
#group-dialog .agent-choice:has(input:checked), .employee-skill:has(input:checked),
.delivery-option:has(input:checked) { background: var(--accent-soft); border-color: var(--choice-border); }
#group-dialog .agent-choice small, #group-dialog .form-row > label,
#group-dialog .member-row small { color: var(--muted); }
.task-form-actions, .employee-create-footer, .employee-add-row,
.skill-used-by, .skill-import-drop { color: var(--ink); background: var(--panel-surface); border-color: var(--line); }
.skill-card-copy p, .skill-detail-heading p, .skill-package-files details > summary,
.skill-import-metadata > summary { color: var(--muted); }
.rail-more > div, .chat-add > div, .header-menu > div, .group-frame #mention-menu,
.chat-context-menu { background: var(--bubble-surface); border-color: var(--strong-line); box-shadow: var(--popover-shadow); }
.chat-add > div button, .chat-add > div a, .chat-context-menu button { color: var(--ink); background: transparent; }
.chat-add > div button:hover, .chat-add > div a:hover, .chat-context-menu button:hover { background: var(--menu-hover); }
.chat-context-menu .context-menu-symbol { color: var(--muted); }
#group-dialog .group-link { color: var(--ink); background: var(--panel-surface); border-color: var(--line); }
#group-dialog .group-link.selected { background: var(--selected-surface); color: var(--accent); }
.delivery-window { border-color: var(--dialog-line); border-radius: 8px; box-shadow: var(--dialog-shadow); }
.delivery-window-head, .group-artifact-preview-head {
  min-height: 48px; padding: 8px 14px; gap: 4px;
  background: var(--dialog-surface); border-color: var(--dialog-line); color: var(--ink);
}
.delivery-window-title, .group-artifact-preview-head > strong { margin-right: 12px; }
.delivery-window-title strong, .group-artifact-preview-head > strong { font-size: 13px; font-weight: 500; }
.delivery-window-title small { color: var(--dialog-secondary); margin-top: 2px; }
.delivery-window-head :is(.delivery-window-download, .delivery-window-tab, button),
.group-artifact-preview-head > a, .group-artifact-preview-head > button {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  gap: 5px; min-height: 30px; padding: 4px 8px; border: 0; border-radius: 4px;
  color: var(--dialog-secondary); background: transparent; font-size: 12px; line-height: 20px;
  text-decoration: none; white-space: nowrap;
}
.delivery-window-head :is(.delivery-window-download, .delivery-window-tab, button):hover,
.group-artifact-preview-head > a:hover, .group-artifact-preview-head > button:hover {
  color: var(--ink); background: var(--dialog-hover);
}
.delivery-window-head :is(a, button):focus-visible, .group-artifact-preview-head > :is(a, button):focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 2px;
}
.delivery-window-head a::before, .group-artifact-preview-head > a::before,
.delivery-window-head button::before, .group-artifact-preview-head > button::before {
  content: ''; width: 15px; height: 15px; flex: none; background: currentColor;
  mask: var(--window-control-icon) center / contain no-repeat;
}
.delivery-window-download, .group-artifact-preview-head > a[download] {
  --window-control-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m-4-4 4 4 4-4M4 16v4h16v-4'/%3E%3C/svg%3E");
}
.delivery-window-tab, .group-artifact-preview-head > a[target='_blank'] {
  --window-control-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6m0-6L10 14M10 4H4v16h16v-6'/%3E%3C/svg%3E");
}
.delivery-window .delivery-window-head button, .group-artifact-preview-head > button[data-preview-close] {
  width: 30px; min-width: 30px; height: 30px; padding: 0; font-size: 0; color: var(--dialog-secondary);
}
.delivery-window-head [data-window-close], .group-artifact-preview-head > [data-preview-close] {
  margin-left: 8px;
  --window-control-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m6 6 12 12M6 18 18 6'/%3E%3C/svg%3E");
}
.delivery-window-head [data-window-min] {
  --window-control-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M5 16h14'/%3E%3C/svg%3E");
}
.delivery-window-head [data-window-size] {
  --window-control-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Crect x='5' y='5' width='14' height='14' rx='1'/%3E%3C/svg%3E");
}
.delivery-window.minimized [data-window-min] {
  --window-control-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M5 12h14M12 5v14'/%3E%3C/svg%3E");
}
.delivery-window.maximized [data-window-size] {
  --window-control-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M9 5h10v10M5 9h10v10H5z'/%3E%3C/svg%3E");
}
@media (max-width: 760px) {
  .delivery-window-head, .group-artifact-preview-head { padding: 8px 10px; }
  .delivery-window-head button, .group-artifact-preview-head > button[data-preview-close],
  .delivery-window-head a, .group-artifact-preview-head > a { min-height: 36px; }
  .delivery-window .delivery-window-head button, .group-artifact-preview-head > button[data-preview-close] { width: 36px; height: 36px; }
  .delivery-window-head { grid-template-columns: minmax(0, 1fr) repeat(3, 36px); }
  .delivery-window-head [data-window-close], .delivery-window-title { margin-right: 0; margin-left: 0; }
  .delivery-window.minimized .delivery-window-head { display: flex; }
  .group-artifact-preview-head > button[data-preview-close] { margin-left: auto; }
}
.delivery-window-body, .group-artifact-preview-frame, .report-preview { background: var(--surface); }
#toast, .toast { color: var(--ink); background: var(--toast-surface); box-shadow: var(--popover-shadow); }
.hh-drop-zone.is-file-drag::after { color: var(--accent); background: var(--drop-surface); border-color: var(--focus-ring); }
.hh-draft-kind { color: var(--accent) !important; background: var(--avatar-surface) !important; }
.hh-draft-body strong { color: var(--ink) !important; }
.hh-draft-body small, .hh-draft-transcript label { color: var(--muted) !important; }
.hh-draft-actions button { color: var(--text-secondary) !important; background: var(--floating-surface) !important; border-color: var(--line) !important; }
.hh-draft-transcript textarea, .hh-transcript-preview { color: var(--ink) !important; background: var(--field-surface) !important; border-color: var(--line) !important; }
.hh-draft-error { color: var(--danger) !important; }
.hh-message-file { color: var(--ink); background: var(--note-surface); border-color: var(--line); }
.hh-message-file small { color: var(--muted); }
.hh-message-image, .hh-message-image img, .frame .media-result .delivery-image,
.group-work-file .group-work-image { background: var(--rail-surface); border-color: var(--line); }

.run-failure { color: var(--failure-ink); background: var(--failure-surface); border-color: var(--failure-border); }
.run-failure strong { color: var(--danger); }
.run-failure small { color: var(--failure-muted); }
.executor-source { color: var(--muted); border-color: var(--strong-line); }
.memory-stats span { background: var(--note-surface); }
.employee.selected { background: var(--selected-surface); }
.employee-badge, .directory-history > summary { color: var(--accent); }
.background-work button { color: var(--accent); }
.work-orbit { border-color: var(--strong-line); border-top-color: var(--accent); }
.reply-wait { color: var(--muted); }
.reply-dot { background: var(--accent); }
.danger-text { color: var(--danger); }
.chat-focused .delivery-pin, .chat-focused .context,
.frame .media-result, .chat-delivery .artifact,
.intro, .task-card, .workspace-tabs { color: var(--ink); background: var(--panel-surface); border-color: var(--line); }
.chat-focused .context { background: var(--quote-surface); }
.chat-focused .delivery-pin { background: var(--surface); }
.notice { background: var(--note-surface); border-color: var(--strong-line); }
.error, .form-error { background: var(--failure-surface); border-color: var(--failure-border); }
.round-copy, .delivery-round summary { color: var(--text-secondary); }
pre { color: var(--ink); background: var(--code-surface); }
.mention-choice, .mention-option { color: var(--ink); background: var(--panel-surface); border-color: var(--line); }
.group-frame .group-work-status { color: var(--muted); }
.group-frame .group-work-status.running { color: var(--info); }
.group-frame .group-work-status:is(.needs_input,.no_delivery,.failed,.interrupted) { color: var(--warning); }
.group-frame .group-work-status.awaiting_review { color: var(--accent); }
#execution-settings-form label { color: var(--ink); }
#execution-settings-form select {
  color: var(--ink); background: var(--field-surface); border-color: var(--dialog-line); border-radius: 6px;
}
#execution-settings-form select:disabled { color: var(--muted); background: var(--setting-disabled-surface); }
#execution-settings-form select:focus-visible { outline-color: var(--accent); }
#execution-settings-form .execution-fallback { background: var(--surface); border-color: var(--dialog-line); border-radius: 6px; }
#execution-settings-form .execution-fallback p,
#execution-settings-form .execution-fallback-status { color: var(--muted); }
#execution-settings-form .execution-fallback-toggle input { background: var(--strong-line); border-color: var(--switch-line); }
#execution-settings-form .execution-fallback-toggle input:checked { background: var(--accent); border-color: var(--accent); }
#execution-settings-form .execution-fallback-toggle input::before { background: #ffffff; }
#execution-settings-form .execution-fallback-toggle input:checked::before { background: var(--primary-ink); }
#execution-settings-form .execution-fallback-toggle input:focus-visible { outline-color: var(--accent); }

/* Theme only the viewer shell; file content and video pixels are unchanged. */
body.delivery-viewer {
  color: var(--ink); background: var(--surface);
}
body.delivery-viewer .viewer-header { background: var(--header-surface); border-color: var(--line); }
body.delivery-viewer .viewer-mark { color: var(--blue); background: #142a34; border-radius: 9px; }
body.delivery-viewer .viewer-mark .honghu-logo { display: block; width: 28px; height: 28px; }
body.delivery-viewer .pdf-toolbar { color: var(--ink); background: var(--time-surface); border-color: var(--line); }
body.delivery-viewer .pdf-toolbar :is(button, select) {
  color: var(--ink); background: var(--note-surface); border-color: var(--strong-line);
}
body.delivery-viewer .pdf-toolbar button:hover { background: var(--selected-surface); }
body.delivery-viewer .pdf-pages { background: var(--rail-surface); }
body.delivery-viewer :is(.return-button, .download-button, .status-button) {
  color: var(--blue); border-color: var(--strong-line); border-radius: 7px; background: var(--panel-surface);
}
body.delivery-viewer .return-button { color: var(--text-secondary); border-color: var(--line); }
body.delivery-viewer :is(.return-button, .download-button, .status-button):hover { background: var(--selected-surface); }
body.delivery-viewer .media-wrap { background: var(--rail-surface); }
body.delivery-viewer .media-wrap video { background: #060f16; border-radius: 9px; }
body.delivery-viewer .media-wrap.audio-wrap { background: var(--panel-surface); }
body.delivery-viewer :is(.markdown-document, .text-document) {
  background: var(--panel-surface); border-color: var(--line); box-shadow: var(--card-shadow);
}
body.delivery-viewer .markdown-document :is(pre, th) { background: var(--note-surface); }
body.delivery-viewer .markdown-document :not(pre) > code { background: var(--code-surface); }
body.delivery-viewer .markdown-document blockquote { color: var(--text-secondary); border-color: var(--quote-border); }
body.delivery-viewer .pdf-preview-help { background: var(--panel-surface); color: var(--muted); }
body.delivery-viewer .loading-mark { border-color: var(--strong-line); border-top-color: var(--blue); }

@media (max-width: 760px) {
  .conversation-list { padding-inline: 0; }
  .composer-box { padding: 6px 8px; border-radius: 9px; }
  .composer .composer-box #send-button { right: 8px; bottom: 6px; }
  .chat-focused .chat .msg .message-stamp time { color: var(--muted); }
}
@media (max-width: 650px) {
  body.delivery-viewer .viewer-mark .honghu-logo { width: 23px; height: 23px; }
}
@media (max-height: 520px) {
  .composer-box { padding-block: 4px; }
  .composer .composer-box #send-button { top: 6px; bottom: auto; }
}
@media (prefers-reduced-motion: reduce) { button { transition: none; } }

/* Appearance is only offered inside existing settings dialogs. */
.appearance-settings { padding-top: 18px; margin: 22px 0 0; border-top: 1px solid var(--line); }
.appearance-settings h3 { margin: 0 0 12px; font-size: 14px; }
.appearance-settings label { display: block; margin-bottom: 8px; color: var(--ink); font-weight: 600; }
.appearance-settings select { width: 100%; min-width: 0; padding: 11px 12px; color: var(--ink); background: var(--field-surface); border: 1px solid var(--strong-line); border-radius: 8px; font: inherit; }
.appearance-settings p { margin: 8px 0 0; color: var(--muted); font-size: 12px; }

@media print {
  body.delivery-viewer { color-scheme: light; --ink: #17221e; --muted: #606f60; --line: #dce4d6; --blue: #285c54; }
  body.delivery-viewer :is(.markdown-document, .text-document) { color: #17221e; box-shadow: none; background: #fff; }
  body.delivery-viewer .markdown-document :is(pre, th, code) { color: #17221e; background: #f4f7f5; }
  body.delivery-viewer .markdown-document blockquote { color: #50655b; }
}

/* Task conversations have their own identity within the chat directory. */
.conversation-subtitle { display: block; order: -1; flex: none; max-width: 54px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; font-size: 12px; line-height: 18px; }
.conversation-subtitle:not([hidden])::after { content: ' ·'; }
.conversation-subtitle[hidden] { display: none; }
.conversation-task-avatar { position: relative; flex: none; overflow: visible; }
.conversation-task-avatar img { border-radius: inherit; }
.conversation-task-marker { z-index: 1; position: absolute; right: -3px; bottom: -3px; display: grid; place-items: center; width: 17px; height: 17px; border: 2px solid var(--conversation-list-surface); border-radius: 5px; background: var(--badge-surface); color: var(--accent); }
.conversation-task-marker .rail-icon { width: 10px; height: 10px; }
.chat-focused .header > .conversation-heading { flex: 1; min-width: 0; }
.chat-focused .header .conversation-heading h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-focused .header .conversation-heading p { margin-top: 3px; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin-actions .task-window-link { white-space: nowrap; }
.pin-actions .task-daily-link { color: var(--text-secondary); }
@media (max-width: 760px) {
 .chat-focused .header .conversation-heading p { display: block; font-size: 11px; }
 .chat-focused .header .conversation-heading h1 { font-size: 15px; }
 .delivery-pin .pin-actions { flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
 .delivery-pin .pin-actions :is(button, a) { padding: 5px 7px; font-size: 12px; }
}