/* Default dark appearance. Layout and interaction remain in styles.css/app.js. */
:root {
  color-scheme: dark;
  --canvas: #181818;
  --sidebar: #141414;
  --surface: #212121;
  --raised: #282828;
  --hover: #303030;
  --line: #353535;
  --line-soft: #2b2b2b;
  --text: #ededed;
  --secondary: #c7c7c7;
  --muted: #a3a3a3;
  --green: #9ad6b1;
}

html, body, .main { background: var(--canvas); color: var(--text); }
::selection { background: #476551; color: #fff; }
button:focus-visible, a:focus-visible { outline-color: #b5d8c2; }
.sidebar { background: var(--sidebar); border-color: var(--line-soft); }
.brand, .task-item.selected .task-title, .thread-heading h1,
.assistant-text strong, .welcome h1 { color: var(--text); }
.brand-tag { color: var(--muted); border-color: var(--line); }
.host-select { background: var(--surface); border-color: var(--line); box-shadow: none; }
.host-select:hover { border-color: #626262; }
.host-icon { background: #303030; color: var(--secondary); }
.host-copy small, .host-select > span:last-child, .host-location { color: var(--muted); }
.host-location { border-color: #484848; }
.status-dot, .tiny-demo-dot { background: #88bc9c; }
.status-dot.offline { background: #929292; }
.new-chat:hover { background: var(--raised); }
.new-chat kbd { color: var(--muted); }
.search-box { background: var(--surface); color: var(--muted); }
.search-box:focus-within { background: var(--raised); border-color: #777; }
.search-box input { color: var(--text); }
.search-box input::placeholder, .search-box kbd { color: var(--muted); }
.nav-label, .text-icon, .list-heading { color: var(--muted); }
.text-icon:hover { color: var(--text); }
.task-filters { border-color: var(--line-soft); }
.task-filters button { color: var(--muted); }
.task-filters button.active { background: var(--raised); color: var(--text); }
.task-list, .conversation-scroll, .details { scrollbar-color: #4b4b4b transparent; }
.task-item:hover { background: var(--surface); }
.task-item.selected { background: #2a2a2a; border-color: #3c3c3c; }
.task-meta, .task-item.selected .task-meta { color: var(--muted); }
.task-indicator { background: #aaa; }
.task-indicator.running { background: #90cca4; box-shadow: 0 0 0 3px #90cca420; }
.task-indicator.waiting { background: #dfb775; box-shadow: 0 0 0 3px #dfb77520; }
.sidebar-bottom { border-color: var(--line-soft); }
.demo-card { background: var(--surface); }
.demo-symbol, .demo-card small, .demo-card > span:last-child { color: var(--muted); }
.profile-avatar { background: #343434; border-color: #464646; color: #ddd; }
.profile-name small { color: var(--muted); }
.icon-btn { color: #b0b0b0; }
.icon-btn:hover { background: var(--hover); color: var(--text); }
.topbar { border-color: var(--line-soft); }
.breadcrumb { color: var(--muted); }
.breadcrumb #breadcrumb-title { color: var(--secondary); }
.slash { color: #747474; }
.demo-badge { background: #252525; border-color: #3e3e3e; color: #bbb; }
.eyebrow, .tag { color: var(--muted); }
.tag { border-color: #3c3c3c; }
.tag.green { background: #22362a; color: #b2d8bf; border-color: #3c5946; }
.day-divider { color: var(--muted); }
.day-divider:before, .day-divider:after { background: var(--line-soft); }
.user-bubble { background: #2c2c2c; color: #e4e4e4; }
.user-attachments { color: #bbb; }
.assistant-logo { background: #2c3830; color: #b7d1bd; }
.assistant-head time { color: var(--muted); }
.assistant-text { color: #d7d7d7; }
.work-card { background: #1e1e1e; border-color: #3a3a3a; }
.work-card summary > span:last-child { color: var(--muted); }
.work-card summary svg, .work-step svg { color: var(--green); }
.work-step { color: var(--secondary); border-color: var(--line); }
.work-step span:last-child { color: var(--muted); }
.file-card { background: var(--surface); border-color: #3c3c3c; }
.file-card:hover { background: var(--raised); border-color: #666; }
.file-card > svg { color: #b0b0b0; }
.file-card small { color: var(--muted); }
.plus-count { color: #9cd4ae; }
.minus-count { color: #eca69c; }
.message-actions button { color: var(--muted); }
.review-card { background: #30291d; border-color: #6e5937; color: #f1cf95; }
.review-card p { color: #d0bd9d; }
.button { background: #333; border-color: #505050; color: var(--text); }
.button:hover { background: #414141; }
.button.primary { background: #e1e1e1; border-color: #e1e1e1; color: #191919; }
.button.primary:hover { background: #fff; }
.button.danger { color: #f0aaa1; background: #3c2828; border-color: #684242; }
.button.danger:hover { background: #4b3030; }
.composer-wrap { background: linear-gradient(0deg, var(--canvas) 90%, #18181800); }
.suggestions button { background: var(--canvas); border-color: #3a3a3a; color: #c3c3c3; }
.suggestions button:hover { background: var(--raised); border-color: #606060; }
.composer { background: var(--surface); border-color: #484848; box-shadow: 0 5px 24px #0003; }
.composer:focus-within { border-color: #858585; box-shadow: 0 0 0 2px #ffffff08; }
.composer textarea { color: var(--text); }
.composer textarea::placeholder { color: #aaa; }
.mode-btn { color: var(--secondary); }
.mode-btn:hover { background: var(--hover); }
.composer-divider { background: #4a4a4a; }
.composer-host, .composer-foot { color: var(--muted); }
.send-btn { background: #e6e6e6; color: #191919; }
.send-btn:not(:disabled):hover { background: #fff; }
.send-btn:disabled { background: #393939; color: #8c8c8c; }
.offline-banner { background: #30291d; color: #e2c18c; border-color: #5d4a2e; }
.details { background: #1d1d1d; border-color: var(--line); box-shadow: -8px 0 25px #0002; }
.details-label, .details-row > span:first-child { color: var(--muted); }
.details-value, .details-row > span:last-child { color: var(--secondary); }
.details hr { border-color: var(--line); }
.detail-tip { background: #242424; color: #bcbcbc; border-color: #424242; }
.diff-box { background: #202020; border-color: #424242; }
.diff-file { border-color: #424242; color: #c4c4c4; }
.diff-line.add { background: #25372a; color: #b5dbbf; }
.diff-line.remove { background: #3a2727; color: #e8b5ae; }
.empty-state, .welcome p { color: #b2b2b2; }
.welcome-mark { background: linear-gradient(130deg, #303832, #222a24); border-color: #445347; color: #c1d4c3; }
.starter-card { background: var(--surface); border-color: #444; }
.starter-card:hover { background: #303030; border-color: #666; }
.starter-card svg, .starter-card small { color: #b1b1b1; }
.running-note { color: var(--green); }
.spinner { border-color: #3d5545; border-top-color: #b5d8be; }
.attachment-chip { background: #2c2c2c; border-color: #4a4a4a; color: #ddd; }
.attachment-chip small, .attachment-chip button { color: #b7b7b7; }
.toast { background: #e2e2e2; color: #191919; border-color: #fff3; box-shadow: 0 5px 20px #0005; }
dialog { background: #222; color: var(--text); border-color: #4d4d4d; box-shadow: 0 20px 100px #0008; }
dialog::backdrop { background: #0009; }
.modal p, .modal label { color: #bdbdbd; }
.modal input, .modal select { background: #191919; border-color: #505050; color: var(--text); }
.modal input:focus, .modal select:focus { border-color: #aaa; outline: 1px solid #aaa; }
.modal input::placeholder { color: #a3a3a3; }
.device-option { background: #222; border-color: #454545; }
.device-option:hover, .device-option.chosen { background: #303030; border-color: #737373; }
.device-option > svg, .device-option small { color: #b8b8b8; }
.menu-option:hover { background: #343434; }
.menu-option svg { color: #bbb; }
.menu-option.red { color: #f0aaa1; }
.setting-row { border-color: #444; }
.setting-row small, .check-note { color: #b3b3b3; }
@media (max-width: 720px) {
  .drawer-scrim.show { background: #0009; }
}