/* Dark theme is deliberately scoped so the original light palette stays intact. */
.top-actions .theme-toggle { display: inline-flex; }

html[data-theme="dark"] {
  color-scheme: dark;
  --accent: #9690ff;
  --accent-dark: #aaa5ff;
  --text: #edf0fa;
  --muted: #abb2c7;
  --line: #303548;
  --surface: #1b1f2c;
  --shadow: 0 8px 25px #00000016;
  color: var(--text);
  background: #10121b;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .app-shell,
html[data-theme="dark"] .content,
html[data-theme="dark"] .initial-loader {
  color: #edf0fa;
  background: #10121b;
}

html[data-theme="dark"] ::selection { color: #fff; background: #6a61b8; }
html[data-theme="dark"] a { color: #b5aeff; }
html[data-theme="dark"] button:focus-visible,
html[data-theme="dark"] a:focus-visible,
html[data-theme="dark"] input:focus-visible,
html[data-theme="dark"] select:focus-visible,
html[data-theme="dark"] textarea:focus-visible {
  outline-color: #b5aeff;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #8b93ac; opacity: 1; }
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select { color-scheme: dark; }
html[data-theme="dark"] input[type="range"] { accent-color: #a49dff; }
html[data-theme="dark"] input[type="checkbox"] { accent-color: #a49dff; }

/* Workspace navigation. */
html[data-theme="dark"] .sidebar { background: #151822; border-color: #2a2f41; }
html[data-theme="dark"] .brand { color: #f1f2fb; }
html[data-theme="dark"] .brand-mark {
  color: #18152b;
  background: #a39aff;
  box-shadow: 0 4px 14px #8c7ff224;
}
html[data-theme="dark"] .brand sup { color: #c0baff; background: #2e2a48; }
html[data-theme="dark"] .workspace { background: #1b1f2c; border-color: #303548; }
html[data-theme="dark"] .workspace-badge { color: #c3bbff; background: #323047; }
html[data-theme="dark"] .workspace strong { color: #e0e4f1; }
html[data-theme="dark"] .workspace small,
html[data-theme="dark"] .workspace > .icon { color: #a1a9c0; }
html[data-theme="dark"] .nav-label { color: #8f97b0; }
html[data-theme="dark"] .nav-button { color: #abb2c7; }
html[data-theme="dark"] .nav-button:hover { color: #e2dfff; background: #222537; }
html[data-theme="dark"] .nav-button.active { color: #c0baff; background: #302c4c; }
html[data-theme="dark"] .nav-button .nav-count { color: #d0caff; background: #454065; }
html[data-theme="dark"] .nav-divider { background: #303548; }
html[data-theme="dark"] .help-tile {
  background: linear-gradient(145deg, #25233a, #202638);
  border-color: #38364f;
}
html[data-theme="dark"] .help-tile .help-icon { color: #c0baff; background: #37324e; }
html[data-theme="dark"] .help-tile strong { color: #dedcf3; }
html[data-theme="dark"] .help-tile p { color: #b0adc7; }
html[data-theme="dark"] .help-tile button { color: #c2baff; }
html[data-theme="dark"] .sidebar-user { border-color: #303548; }
html[data-theme="dark"] .sidebar-user strong { color: #e2e3ef; }
html[data-theme="dark"] .sidebar-user small,
html[data-theme="dark"] .sidebar-user button { color: #a3abc1; }
html[data-theme="dark"] .avatar { background: #423a2d; color: #e3c78c; }

/* Top bar and shared controls. */
html[data-theme="dark"] .topbar {
  background: #151822f2;
  border-color: #2b3042;
}
html[data-theme="dark"] .breadcrumb { color: #9fa7bf; }
html[data-theme="dark"] .breadcrumb strong { color: #d4d9e9; }
html[data-theme="dark"] .top-search { color: #9fa7bf; }
html[data-theme="dark"] .kbd { color: #9aa3bb; border-color: #3b4258; }
html[data-theme="dark"] .lang-select { color: #c1c7db; }
html[data-theme="dark"] .lang-select option { background: #1b1f2c; color: #e5e8f5; }
html[data-theme="dark"] .top-divider { background: #363c50; }
html[data-theme="dark"] .demo-pill { color: #e9c38f; background: #3c3022; }
html[data-theme="dark"] .demo-pill span { background: #d5b17d; }
html[data-theme="dark"] .demo-pill[style] {
  color: #a3dbbb !important;
  background: #223b31 !important;
}
html[data-theme="dark"] .demo-pill[style] span { background: #91cda8 !important; }
html[data-theme="dark"] .icon-button { color: #a7afc7; }
html[data-theme="dark"] .icon-button:hover { background: #302d47; color: #c0baff; }
html[data-theme="dark"] .count-pill { color: #b7bcd2; background: #2a3042; }
html[data-theme="dark"] .page-heading h1,
html[data-theme="dark"] .section-row h2 { color: #edf0fa; }
html[data-theme="dark"] .page-heading p,
html[data-theme="dark"] .section-row .muted { color: #a6aec4; }
html[data-theme="dark"] .button {
  color: #d5d9eb;
  background: #252a3a;
  border-color: #3b4259;
}
html[data-theme="dark"] .button:hover { background: #30354a; border-color: #555979; }
html[data-theme="dark"] .button.primary {
  color: #fff;
  background: #6759d9;
  border-color: #8e7eed;
  box-shadow: 0 3px 14px #9182f51a;
}
html[data-theme="dark"] .button.primary:hover {
  color: #fff;
  background: #7060e0;
  border-color: #a28efa;
}
html[data-theme="dark"] .button.soft { color: #c3bbff; background: #302b4a; border-color: #454060; }
html[data-theme="dark"] .button.soft:hover { background: #3c355b; border-color: #665e8e; }
html[data-theme="dark"] .button.ghost { color: #b9b4e7; background: transparent; border-color: transparent; }
html[data-theme="dark"] .button.ghost:hover { background: #28263b; }
html[data-theme="dark"] .button.danger { color: #f1a8b7; background: #35252f; border-color: #69414f; }
html[data-theme="dark"] .button.danger:hover { background: #482d3a; border-color: #8c5364; }

/* Overview hero and dashboard cards. */
html[data-theme="dark"] .hero {
  background: linear-gradient(110deg, #292342 0%, #25243d 55%, #22283d 100%);
  border-color: #433b60;
}
html[data-theme="dark"] .eyebrow { color: #b9adff; }
html[data-theme="dark"] .hero h2 { color: #ede8ff; }
html[data-theme="dark"] .hero p { color: #b6aecf; }
html[data-theme="dark"] .hero-orbit,
html[data-theme="dark"] .hero-orbit::after { border-color: #51476e; }
html[data-theme="dark"] .hero-telegram {
  color: #bfb1ff;
  background: #373047;
  border-color: #54476c99;
  box-shadow: 0 8px 25px #00000020;
}
html[data-theme="dark"] .hero-telegram .icon { fill: #bfb1ff; stroke: #bfb1ff; }
html[data-theme="dark"] .hero-note {
  background: #2b2a3eea;
  border-color: #504660;
  box-shadow: 0 6px 20px #00000016;
}
html[data-theme="dark"] .hero-note strong { color: #ddd5ef; }
html[data-theme="dark"] .hero-note small { color: #b3a9c8; }
html[data-theme="dark"] .hero-note.one .note-icon { color: #c1adf0; background: #47375d; }
html[data-theme="dark"] .hero-note.two .note-icon { color: #a1d5ba; background: #2b4a3e; }
html[data-theme="dark"] .hero-dots { color: #ac98e4; }
html[data-theme="dark"] .stat,
html[data-theme="dark"] .bot-card,
html[data-theme="dark"] .template-mini,
html[data-theme="dark"] .template-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .empty-state { background: #1b1f2c; border-color: #303548; }
html[data-theme="dark"] .stat-label { color: #abb2c7; }
html[data-theme="dark"] .stat-label .icon { color: #818ca8; }
html[data-theme="dark"] .stat-icon { color: #b1a8ef; background: #302a48; }
html[data-theme="dark"] .stat-value { color: #edf0fa; }
html[data-theme="dark"] .stat-foot { color: #9ca5be; }
html[data-theme="dark"] .stat-foot .positive { color: #a0d5b7; background: #233b30; }
html[data-theme="dark"] .tabs { border-color: #303548; }
html[data-theme="dark"] .tab { color: #9da6be; }
html[data-theme="dark"] .tab.active { color: #c0b8ff; border-bottom-color: #a49aff; }
html[data-theme="dark"] .tab .tab-count { color: #8e98b2; }
html[data-theme="dark"] .tab.active .tab-count { color: #b8afe7; }
html[data-theme="dark"] .filter-input { color: #8b96b2; }
html[data-theme="dark"] .filter-input input { color: #dfe3f3; background: #1b1f2c; border-color: #363d53; }
html[data-theme="dark"] .bot-card:hover { border-color: #494b6a; box-shadow: 0 9px 27px #00000024; }
html[data-theme="dark"] .bot-icon { color: #c2aff4; background: #39304e; }
html[data-theme="dark"] .bot-icon.mint { color: #a2d7bd; background: #263f35; }
html[data-theme="dark"] .bot-icon.peach { color: #ebbe98; background: #453529; }
html[data-theme="dark"] .bot-icon.blue { color: #a7c4ef; background: #2a3a55; }
html[data-theme="dark"] .status { color: #b8bfd3; background: #303548; }
html[data-theme="dark"] .status.active { color: #a0d8b8; background: #253d32; }
html[data-theme="dark"] .status.draft { color: #d9c28d; background: #3b3426; }
html[data-theme="dark"] .status.paused { color: #bdc1d2; background: #303341; }
html[data-theme="dark"] .bot-title { color: #e4e7f4; }
html[data-theme="dark"] .bot-username { color: #9ca6bf; }
html[data-theme="dark"] .bot-description { color: #adb4c9; }
html[data-theme="dark"] .bot-metrics { border-color: #303548; }
html[data-theme="dark"] .bot-metrics div { color: #c7cce1; }
html[data-theme="dark"] .bot-metrics .icon { color: #99a2bd; }
html[data-theme="dark"] .bot-metrics small { color: #9fa8c0; }
html[data-theme="dark"] .bot-card-footer { background: #191d29; border-color: #303548; }
html[data-theme="dark"] .bot-card-footer .updated { color: #929db8; }
html[data-theme="dark"] .bot-card-footer button { color: #c3baff; background: #302a47; }
html[data-theme="dark"] .bot-card-footer button:hover { background: #42375f; }
html[data-theme="dark"] .new-bot-card { color: #a7aec7; background: #171b27; border-color: #3e425d; }
html[data-theme="dark"] .new-bot-card:hover { background: #242238; border-color: #76689d; }
html[data-theme="dark"] .new-bot-card .new-icon { color: #bfb1e9; background: #332c49; }
html[data-theme="dark"] .new-bot-card strong { color: #c9c7df; }
html[data-theme="dark"] .new-bot-card small { color: #9da4bf; }
html[data-theme="dark"] .template-mini:hover { border-color: #625581; background: #242337; }
html[data-theme="dark"] .template-mini .template-icon { color: #c4b0ec; background: #3b2e4e; }
html[data-theme="dark"] .template-mini strong { color: #dedff0; }
html[data-theme="dark"] .template-mini small { color: #9ca6bf; }
html[data-theme="dark"] .template-mini > .icon { color: #b2a3cc; }
html[data-theme="dark"] .page-foot,
html[data-theme="dark"] .page-foot a { color: #929db8; }
html[data-theme="dark"] .page-foot a:hover { color: #c4baff; }
html[data-theme="dark"] .sample-notice {
  color: #d6bd96;
  background: #30291f;
  border-color: #514330;
}
html[data-theme="dark"] .sample-notice[style] {
  color: #c7b7e2 !important;
  background: #2a243b !important;
  border-color: #453851 !important;
}
html[data-theme="dark"] .empty-state > .icon { color: #b1a1da; }
html[data-theme="dark"] .empty-state h3 { color: #e1e3f2; }
html[data-theme="dark"] .empty-state p,
html[data-theme="dark"] .panel p { color: #a8b0c6; }
html[data-theme="dark"] .panel h2 { color: #e4e6f4; }

/* Templates retain their category colors without white diagram cards. */
html[data-theme="dark"] .template-preview { background: #2d273e; }
html[data-theme="dark"] .template-preview.blue { background: #24324b; }
html[data-theme="dark"] .template-preview.mint { background: #233a31; }
html[data-theme="dark"] .template-preview.peach { background: #423126; }
html[data-theme="dark"] .mini-flow-node { color: #d7cde7; background: #282638; border-color: #645473; box-shadow: 0 3px 9px #00000020; }
html[data-theme="dark"] .mini-flow-node .icon { color: #c2a5e0; }
html[data-theme="dark"] .mini-flow-line { border-color: #9a7cb3; }
html[data-theme="dark"] .template-preview.blue .mini-flow-node { color: #cadcf5; background: #263247; border-color: #516884; }
html[data-theme="dark"] .template-preview.blue .mini-flow-node .icon { color: #a3c4e9; }
html[data-theme="dark"] .template-preview.blue .mini-flow-line { border-color: #7396bc; }
html[data-theme="dark"] .template-preview.mint .mini-flow-node { color: #c8e5d5; background: #263b33; border-color: #527262; }
html[data-theme="dark"] .template-preview.mint .mini-flow-node .icon { color: #a5d4bc; }
html[data-theme="dark"] .template-preview.mint .mini-flow-line { border-color: #7fa68e; }
html[data-theme="dark"] .template-preview.peach .mini-flow-node { color: #e9d0bb; background: #3c302a; border-color: #80644e; }
html[data-theme="dark"] .template-preview.peach .mini-flow-node .icon { color: #dfb58d; }
html[data-theme="dark"] .template-preview.peach .mini-flow-line { border-color: #b68c6a; }
html[data-theme="dark"] .template-card:hover { border-color: #534b6f; box-shadow: 0 10px 25px #00000026; }
html[data-theme="dark"] .category-label { color: #b3a1ca; }
html[data-theme="dark"] .template-content h3 { color: #e4e5f2; }
html[data-theme="dark"] .template-content p { color: #aab1c6; }
html[data-theme="dark"] .template-bottom small { color: #98a2ba; }

/* Contacts, analytics and usage. */
html[data-theme="dark"] th { color: #a5aec7; border-color: #343b51; }
html[data-theme="dark"] td { color: #b1b9ce; border-color: #2c3347; }
html[data-theme="dark"] td strong { color: #e0e3f3; }
html[data-theme="dark"] .contact-name small { color: #98a3bd; }
html[data-theme="dark"] .tag { color: #c1ade0; background: #3b2e4f; }
html[data-theme="dark"] .chart {
  border-color: #394057;
  background: repeating-linear-gradient(to top, transparent 0, transparent 48px, #303548 49px, #303548 50px);
}
html[data-theme="dark"] .chart-column { background: linear-gradient(#a295ef, #645a9c); }
html[data-theme="dark"] .chart-column:hover { background: #beb0ff; }
html[data-theme="dark"] .chart-column span { color: #a8b1c8; }
html[data-theme="dark"] .chart-column small { color: #c4b4e8; }
html[data-theme="dark"] .traffic-row > span { color: #abb4c9; }
html[data-theme="dark"] .traffic-row strong { color: #c2b6d9; }
html[data-theme="dark"] .traffic-track { background: #303346; }
html[data-theme="dark"] .traffic-track i { background: #a095d8; }
html[data-theme="dark"] .progress-bar { background: #303246; }
html[data-theme="dark"] .progress-bar i { background: #aea0e6; }
html[data-theme="dark"] .usage-item { border-color: #303548; }
html[data-theme="dark"] .usage-item > div { color: #aaa2bf; }
html[data-theme="dark"] .usage-item strong { color: #d3c6e3; }
html[data-theme="dark"] .usage-item small { color: #a59bb7; }

/* Billing. */
html[data-theme="dark"] .plans-heading h2 { color: #ecebfa; }
html[data-theme="dark"] .plans-heading p { color: #abb2c7; }
html[data-theme="dark"] .segmented { background: #242738; }
html[data-theme="dark"] .segmented button { color: #aaa6bf; }
html[data-theme="dark"] .segmented button.active { color: #e1d7f1; background: #44405a; box-shadow: 0 2px 5px #0000001a; }
html[data-theme="dark"] .segmented small { color: #a6d5bb; }
html[data-theme="dark"] .plan-card { background: #1b1f2c; border-color: #34394e; }
html[data-theme="dark"] .plan-card.highlight { border-color: #a194db; box-shadow: 0 4px 20px #a295ef10; }
html[data-theme="dark"] .popular-ribbon { color: #201932; background: #b4a1eb; }
html[data-theme="dark"] .plan-card h3 { color: #e0dded; }
html[data-theme="dark"] .plan-price { color: #f0eafa; }
html[data-theme="dark"] .plan-price span { color: #aea4c2; }
html[data-theme="dark"] .plan-billing { color: #a39bb8; }
html[data-theme="dark"] .plan-feature { color: #b7afc9; }
html[data-theme="dark"] .plan-feature .icon { color: #c5adeb; }
html[data-theme="dark"] .calculator h3 { color: #e4dcef; }
html[data-theme="dark"] .calculator p { color: #b0a7c1; }
html[data-theme="dark"] .range-row output { color: #d0baf1; }
html[data-theme="dark"] .calc-result { color: #bbaacd; }

/* Forms, settings and guides. */
html[data-theme="dark"] .field > span { color: #bec2d7; }
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .field select {
  color: #e1e3f2;
  background: #151a26;
  border-color: #3b4259;
}
html[data-theme="dark"] .field input:focus,
html[data-theme="dark"] .field textarea:focus,
html[data-theme="dark"] .field select:focus { border-color: #b09be8; outline-color: #3b3053; }
html[data-theme="dark"] .field input:-webkit-autofill {
  -webkit-text-fill-color: #e1e3f2;
  caret-color: #e1e3f2;
  box-shadow: 0 0 0 1000px #151a26 inset;
}
html[data-theme="dark"] .field small { color: #a3acc4; }
html[data-theme="dark"] .info-box { color: #bdb0d1; background: #29243b; border-color: #453952; }
html[data-theme="dark"] .info-box strong { color: #d3bfeb; }
html[data-theme="dark"] .info-box code { color: #dbc7ff !important; }
html[data-theme="dark"] .step-num { color: #cebbec; background: #3d3053; }
html[data-theme="dark"] .step strong { color: #dfd9ec; }
html[data-theme="dark"] .step p { color: #aaa6c0; }
html[data-theme="dark"] .help-question { border-color: #35394f; }
html[data-theme="dark"] .help-question summary { color: #d0c7e4; }
html[data-theme="dark"] .help-question p { color: #b1a7c3; }
html[data-theme="dark"] .assistant-suggestions button { color: #d1b8e1; background: #352940; border-color: #554062; }
html[data-theme="dark"] .assistant-suggestions button:hover { background: #483354; }
html[data-theme="dark"] .form-note { color: #aba1bd; }
html[data-theme="dark"] .panel .form-note { color: #aba1bd; }
html[data-theme="dark"] .danger-zone { border-color: #654252; }
html[data-theme="dark"] .danger-zone h2 { color: #e7acbc; }
html[data-theme="dark"] .live-dot { background: #a0d2b9; }

/* Flow editor, diagram, inspector. */
html[data-theme="dark"] .editor-shell { background: #10121b; }
html[data-theme="dark"] .editor-top { background: #171b27; border-color: #303548; }
html[data-theme="dark"] .editor-title input { color: #e5e3f4; }
html[data-theme="dark"] .editor-title input:hover { border-color: #47445f; }
html[data-theme="dark"] .editor-title input:focus { background: #242338; border-color: #8574b1; }
html[data-theme="dark"] .editor-title small { color: #a39db9; }
html[data-theme="dark"] .editor-palette { background: #171b27; border-color: #303548; }
html[data-theme="dark"] .palette-item { color: #aea7c2; }
html[data-theme="dark"] .palette-item > span { color: #c1a9df; background: #252337; border-color: #433952; }
html[data-theme="dark"] .palette-item:hover > span { color: #e0c8ff; background: #3c2c50; border-color: #82709f; }
html[data-theme="dark"] .canvas-container {
  background-color: #121620;
  background-image: radial-gradient(#42475e .8px, transparent .8px);
}
html[data-theme="dark"] .flow-links path { stroke: #6e618e; }
html[data-theme="dark"] .flow-links path.connected { stroke: #b09bda; }
html[data-theme="dark"] .flow-node { background: #212335; border-color: #4a425d; box-shadow: 0 4px 13px #0000002a; }
html[data-theme="dark"] .flow-node.selected { border-color: #c3a8ef; box-shadow: 0 0 0 2px #58416e, 0 5px 18px #00000030; }
html[data-theme="dark"] .node-head { color: #d0bce8; border-color: #3a344c; }
html[data-theme="dark"] .node-head .drag-hint { color: #9786ac; }
html[data-theme="dark"] .node-content { color: #bfb4d1; }
html[data-theme="dark"] .node-content.empty { color: #9d91ae; }
html[data-theme="dark"] .node-button { color: #cdb4ed; border-color: #3a344c; }
html[data-theme="dark"] .node-input,
html[data-theme="dark"] .node-output { background: #262137; border-color: #c4a6e9; }
html[data-theme="dark"] .canvas-tools { background: #222438; border-color: #47405c; box-shadow: 0 3px 8px #00000024; }
html[data-theme="dark"] .canvas-tools span { color: #beb2d2; }
html[data-theme="dark"] .canvas-hint { color: #aca1c0; background: #161a27df; }
html[data-theme="dark"] .node-inspector { background: #1a1d2b; border-color: #34394e; box-shadow: -3px 0 20px #0000001a; }
html[data-theme="dark"] .inspector-heading h3 { color: #e4d9f2; }
html[data-theme="dark"] .button-editor { background: #1d2030; border-color: #40384f; }
html[data-theme="dark"] .button-editor input,
html[data-theme="dark"] .button-editor select { color: #d4c7e3; background: #161927; border-color: #493d5a; }
html[data-theme="dark"] .button-editor .remove-button { color: #e6a8bc; }
html[data-theme="dark"] .inspector-empty { color: #ada1c0; }

/* Modal layers and messages. */
html[data-theme="dark"] .modal-backdrop { background: #050611bb; }
html[data-theme="dark"] .mobile-scrim { background: #050611c7; }
html[data-theme="dark"] .modal { color: #e2dcee; background: #1c1e2d; border-color: #454056; box-shadow: 0 30px 90px #00000080; }
html[data-theme="dark"] .modal-top { border-color: #38354c; }
html[data-theme="dark"] .modal-top h2 { color: #ece4f6; }
html[data-theme="dark"] .modal-body > p { color: #b7adc9; }
html[data-theme="dark"] .modal-footer { background: #191b29; border-color: #38354c; }
html[data-theme="dark"] .template-option { color: #ded5eb; background: #232335; border-color: #494056; }
html[data-theme="dark"] .template-option:hover,
html[data-theme="dark"] .template-option.selected { background: #3a2b4b; border-color: #a089c4; }
html[data-theme="dark"] .template-option > .icon { color: #c8abe7; }
html[data-theme="dark"] .template-option small { color: #b6a7c6; }
html[data-theme="dark"] .modal-error { color: #f4b5c5; background: #482b3a; border: 1px solid #7b455b; }
html[data-theme="dark"] .auth-switch { color: #b7a8c7; }
html[data-theme="dark"] .auth-switch button { color: #cbb4f0; }
html[data-theme="dark"] .search-result { color: #e0d8ee; background: #232336; border-color: #443b54; }
html[data-theme="dark"] .search-result:hover { background: #33283f; border-color: #8b729f; }
html[data-theme="dark"] .search-result small { color: #b7a9c8; }
html[data-theme="dark"] .search-result > .icon { color: #c8acdf; }
html[data-theme="dark"] .toast { color: #f1e8fb; background: #42304f; border: 1px solid #7a6090; box-shadow: 0 7px 30px #00000050; }
html[data-theme="dark"] .toast .icon { color: #d7b9ff; }
html[data-theme="dark"] .initial-loader small { color: #a9a0be; }

/* Telegram preview. Sent/received bubbles remain visibly different. */
html[data-theme="dark"] .chat-preview { background: #15212a; border-color: #3a4755; }
html[data-theme="dark"] .chat-header { background: #202b36; border-color: #3b4755; }
html[data-theme="dark"] .chat-header .avatar { color: #d4c3f4; background: #4a405e; }
html[data-theme="dark"] .chat-header strong { color: #e6e5f2; }
html[data-theme="dark"] .chat-header small { color: #aeb8c7; }
html[data-theme="dark"] .chat-messages {
  background-color: #15212a;
  background-image: radial-gradient(#3c485455 .7px, transparent .7px);
}
html[data-theme="dark"] .chat-message { color: #d8e0ec; background: #2b3846; box-shadow: 0 2px 3px #00000016; }
html[data-theme="dark"] .chat-message.out { color: #dcebdd; background: #38513e; }
html[data-theme="dark"] .chat-message.system { color: #bdcbd8; background: #34414cdb; }
html[data-theme="dark"] .chat-buttons button { color: #d1c4e9; background: #333047; border-color: #625477; }
html[data-theme="dark"] .chat-buttons button:hover { background: #49405e; }
html[data-theme="dark"] .chat-composer { background: #202b36; border-color: #3b4755; }
html[data-theme="dark"] .chat-composer input { color: #e2e2f0; background: #151f2b; }
html[data-theme="dark"] .chat-composer input::placeholder { color: #9caabb; }
html[data-theme="dark"] .chat-composer button { color: #21192f; background: #b9a1df; }
html[data-theme="dark"] .chat-composer button:hover { background: #ceb4f4; }
html[data-theme="dark"] .preview-caption { color: #b4a7c5 !important; }

/* Respect system scrollbars and reduce otherwise stark scroll gutters. */
html[data-theme="dark"] * { scrollbar-color: #5a526f #181b28; scrollbar-width: thin; }
html[data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #181b28; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #5a526f; border: 2px solid #181b28; border-radius: 8px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #83739b; }

@media (forced-colors: active) {
  html[data-theme="dark"] .button,
  html[data-theme="dark"] .flow-node,
  html[data-theme="dark"] .modal { border: 1px solid ButtonText; }
}