/* Batch Scale dashboard dark theme.
   Keep this stylesheet last in <head>: several workspaces define their cards in
   page-level styles and those surfaces must not override the selected theme. */
html.dark {
    color-scheme: dark;
    --bs-dark-canvas: #0f172a;
    --bs-dark-surface: #172033;
    --bs-dark-surface-raised: #1e293b;
    --bs-dark-border: #334155;
    --bs-dark-border-strong: #475569;
    --bs-dark-text: #f1f5f9;
    --bs-dark-text-muted: #cbd5e1;
    --bs-dark-text-subtle: #94a3b8;
    --bs-dark-primary: color-mix(in srgb, var(--bs-primary), white 38%);
}

html.dark body,
html.dark .bg-surface,
html.dark .bg-surface\/80 {
    background-color: var(--bs-dark-canvas) !important;
    color: var(--bs-dark-text) !important;
}

html.dark .bg-white,
html.dark .bg-white\/80,
html.dark .bg-white\/90,
html.dark .bg-white\/95,
html.dark .card,
html.dark .dashboard-card,
html.dark .inventory-card,
html.dark #sidebar {
    background-color: var(--bs-dark-surface) !important;
    border-color: var(--bs-dark-border) !important;
}

html.dark .bg-slate-50,
html.dark .bg-slate-50\/40,
html.dark .bg-slate-50\/50,
html.dark .bg-slate-50\/60,
html.dark .bg-slate-50\/70,
html.dark .bg-slate-50\/80,
html.dark .bg-slate-100,
html.dark .bg-slate-200,
html.dark .bg-surfaceVariant\/30 {
    background-color: var(--bs-dark-surface-raised) !important;
}

html.dark .bg-violet-50,
html.dark .bg-violet-50\/95,
html.dark .bg-violet-100 { background-color: rgb(139 92 246 / 0.16) !important; }
html.dark .bg-blue-50,
html.dark .bg-blue-100 { background-color: rgb(59 130 246 / 0.16) !important; }
html.dark .bg-emerald-50,
html.dark .bg-emerald-50\/30,
html.dark .bg-emerald-50\/60,
html.dark .bg-emerald-50\/80,
html.dark .bg-emerald-100 { background-color: rgb(16 185 129 / 0.16) !important; }
html.dark .bg-amber-50,
html.dark .bg-amber-50\/60,
html.dark .bg-amber-100 { background-color: rgb(245 158 11 / 0.16) !important; }
html.dark .bg-orange-50,
html.dark .bg-orange-100 { background-color: rgb(249 115 22 / 0.16) !important; }
html.dark .bg-rose-50,
html.dark .bg-rose-50\/60,
html.dark .bg-rose-100 { background-color: rgb(244 63 94 / 0.16) !important; }

html.dark .hover\:bg-violet-50:hover { background-color: rgb(139 92 246 / 0.16) !important; }
html.dark .hover\:bg-blue-50:hover { background-color: rgb(59 130 246 / 0.16) !important; }
html.dark .hover\:bg-emerald-50:hover { background-color: rgb(16 185 129 / 0.16) !important; }
html.dark .hover\:bg-amber-50:hover { background-color: rgb(245 158 11 / 0.16) !important; }
html.dark .hover\:bg-rose-50:hover { background-color: rgb(244 63 94 / 0.16) !important; }
html.dark .hover\:bg-primary\/5:hover { background-color: rgb(var(--bs-primary-rgb) / 0.18) !important; }

html.dark .text-slate-950,
html.dark .text-slate-900,
html.dark .text-slate-800,
html.dark .text-slate-700 { color: var(--bs-dark-text) !important; }
html.dark .text-slate-600,
html.dark .text-slate-500 { color: var(--bs-dark-text-muted) !important; }
html.dark .text-slate-400,
html.dark .text-slate-300 { color: var(--bs-dark-text-subtle) !important; }
html.dark .text-primary,
html.dark .hover\:text-primary:hover,
html.dark .group:hover .group-hover\:text-primary { color: var(--bs-dark-primary) !important; }

/* Shared component classes set their own colors instead of carrying a text
   utility, so they need an explicit theme contract. */
html.dark .btn-ghost {
    color: var(--bs-dark-text-muted) !important;
    border-color: var(--bs-dark-border) !important;
}
html.dark .btn-ghost:hover {
    background-color: var(--bs-dark-surface-raised) !important;
    color: var(--bs-dark-text) !important;
}
html.dark .btn-ghost:disabled,
html.dark .btn-ghost[aria-disabled="true"] {
    color: var(--bs-dark-text-subtle) !important;
}

/* The dashboard date presets are defined in page-local CSS after this file.
   Higher specificity and important values keep their inactive state readable. */
html.dark body .dashboard-period-preset:not([aria-current="true"]) {
    background-color: var(--bs-dark-surface) !important;
    border-color: var(--bs-dark-border) !important;
    color: var(--bs-dark-text-muted) !important;
}
html.dark body .dashboard-period-preset:not([aria-current="true"]):hover {
    background-color: var(--bs-dark-surface-raised) !important;
    border-color: var(--bs-dark-border-strong) !important;
    color: var(--bs-dark-text) !important;
}

html.dark .text-violet-600,
html.dark .text-violet-700,
html.dark .text-violet-800,
html.dark .text-violet-900,
html.dark .text-violet-950 { color: #c4b5fd !important; }
html.dark .text-blue-600,
html.dark .text-blue-700,
html.dark .text-blue-800,
html.dark .text-blue-900,
html.dark .text-blue-950 { color: #93c5fd !important; }
html.dark .text-emerald-500,
html.dark .text-emerald-600,
html.dark .text-emerald-700,
html.dark .text-emerald-800,
html.dark .text-emerald-900,
html.dark .text-emerald-950 { color: #6ee7b7 !important; }
html.dark .text-amber-400,
html.dark .text-amber-500,
html.dark .text-amber-600,
html.dark .text-amber-700,
html.dark .text-amber-800,
html.dark .text-amber-900,
html.dark .text-amber-950 { color: #fcd34d !important; }
html.dark .text-orange-600,
html.dark .text-orange-700,
html.dark .text-orange-800,
html.dark .text-orange-900 { color: #fdba74 !important; }
html.dark .text-rose-600,
html.dark .text-rose-700,
html.dark .text-rose-800,
html.dark .text-rose-900,
html.dark .text-rose-950 { color: #fda4af !important; }
html.dark .text-red-600,
html.dark .text-red-700,
html.dark .text-red-800,
html.dark .text-red-900 { color: #fca5a5 !important; }

html.dark .border-slate-50,
html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-slate-300,
html.dark .border-outline\/10,
html.dark .divide-slate-50 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--bs-dark-border) !important;
}

html.dark .border-violet-100,
html.dark .border-violet-200 { border-color: rgb(167 139 250 / 0.45) !important; }
html.dark .border-blue-100,
html.dark .border-blue-200 { border-color: rgb(96 165 250 / 0.45) !important; }
html.dark .border-emerald-50,
html.dark .border-emerald-100,
html.dark .border-emerald-200,
html.dark .divide-emerald-100 > :not([hidden]) ~ :not([hidden]) { border-color: rgb(52 211 153 / 0.45) !important; }
html.dark .border-amber-100,
html.dark .border-amber-200 { border-color: rgb(251 191 36 / 0.45) !important; }
html.dark .border-orange-200 { border-color: rgb(251 146 60 / 0.45) !important; }
html.dark .border-rose-100,
html.dark .border-rose-100\/50,
html.dark .border-rose-200 { border-color: rgb(251 113 133 / 0.45) !important; }

html.dark .ring-slate-200 { --tw-ring-color: var(--bs-dark-border-strong) !important; }
html.dark .ring-emerald-500\/20 { --tw-ring-color: rgb(52 211 153 / 0.35) !important; }

/* Material create/edit uses custom cards and labels as well as utilities.
   Keep these rules shared by both routes, including the teleported type picker. */
html.dark .material-create-card {
    background: var(--bs-dark-surface) !important;
    border-color: var(--bs-dark-border) !important;
    color: var(--bs-dark-text);
}
html.dark .material-create-label { color: var(--bs-dark-text-muted); }
html.dark .material-create-help { color: var(--bs-dark-text-subtle); }
html.dark .material-create-error { color: #fda4af; }
html.dark .material-create-input:focus {
    border-color: var(--bs-dark-primary) !important;
    outline: 2px solid var(--bs-dark-primary);
    outline-offset: 2px;
}
html.dark [data-material-editor] .bg-slate-50\/60 {
    background-color: var(--bs-dark-surface-raised) !important;
}
html.dark [data-material-editor] :is(.bg-violet-50\/40, .bg-violet-50\/50, .bg-violet-50\/60),
html.dark [data-material-editor] .hover\:bg-violet-50:hover {
    background-color: rgb(139 92 246 / 0.16) !important;
}
html.dark [data-material-editor] .border-violet-100 {
    border-color: rgb(167 139 250 / 0.35) !important;
}
html.dark [data-material-editor] .bg-sky-50 {
    background-color: rgb(14 165 233 / 0.16) !important;
}
html.dark [data-material-editor] .text-sky-700 { color: #7dd3fc !important; }
html.dark [data-material-editor] :is(a, button, summary):focus-visible {
    outline: 2px solid var(--bs-dark-primary);
    outline-offset: 3px;
}

/* Recipe setup already communicates sequence with numbered steps. The light
   connector rule reads as stray dashes against the dark navigation surface. */
html.dark .recipe-step-button::after { display: none; }

/* Keep imported recipe evidence and price basis explicit in dark mode. */
html.dark .recipe-cost-basis,
html.dark .recipe-cost-basis small,
html.dark .recipe-cost-controls > span {
    color: var(--bs-dark-text-muted) !important;
}
html.dark .recipe-cost-controls input,
html.dark .recipe-cost-controls select {
    border-color: var(--bs-dark-border-strong) !important;
}

html.dark input,
html.dark select,
html.dark textarea,
html.dark .inventory-control {
    background-color: var(--bs-dark-canvas) !important;
    color: var(--bs-dark-text) !important;
    border-color: var(--bs-dark-border-strong) !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: var(--bs-dark-text-subtle) !important; }
html.dark input:disabled,
html.dark select:disabled,
html.dark textarea:disabled {
    background-color: var(--bs-dark-surface-raised) !important;
    color: var(--bs-dark-text-subtle) !important;
}

html.dark .hover\:bg-white:hover,
html.dark .hover\:bg-slate-50:hover,
html.dark .hover\:bg-slate-50\/70:hover,
html.dark .focus\:bg-slate-50:focus,
html.dark tr.hoverable:hover {
    background-color: rgb(51 65 85 / 0.72) !important;
}

html.dark .shadow-slate-900\/15,
html.dark .shadow-slate-900\/20 {
    --tw-shadow-color: rgb(2 6 23 / 0.6) !important;
}

/* The Help Center hero and onboarding panel use intentionally pale branded
   gradients in the light theme. Give those components their own dark surfaces
   so global text conversion never leaves light copy on a light background. */
html.dark [data-help-center] .help-center-hero {
    background: linear-gradient(135deg, #172033 0%, #172033 58%, #1e293b 100%) !important;
    border-color: var(--bs-dark-border) !important;
}
html.dark [data-help-center] .help-center-hero-overlay {
    background: linear-gradient(90deg, #172033 0%, rgb(23 32 51 / 0.98) 54%, rgb(23 32 51 / 0.82) 76%, rgb(15 23 42 / 0.58) 100%) !important;
}
html.dark [data-help-center] .help-center-hero-image {
    opacity: 0.26 !important;
    filter: saturate(0.8) contrast(1.08);
}
html.dark [data-help-center] .help-center-search-chip,
html.dark [data-help-center] .help-center-onboarding-step {
    background-color: var(--bs-dark-surface-raised) !important;
    border-color: var(--bs-dark-border) !important;
}
html.dark [data-help-center] .help-center-search-chip:hover,
html.dark [data-help-center] .help-center-onboarding-step:hover {
    background-color: rgb(51 65 85 / 0.82) !important;
    border-color: rgb(167 139 250 / 0.55) !important;
}
html.dark [data-help-center] .help-center-onboarding {
    background: linear-gradient(110deg, rgb(139 92 246 / 0.16), var(--bs-dark-surface) 48%, var(--bs-dark-surface-raised)) !important;
    border-color: var(--bs-dark-border) !important;
}

/* Production planning uses translucent calendar layers that need an opaque,
   intentional hierarchy in dark mode. Keep these rules scoped to the planner. */
html.dark [data-production-planner] .production-calendar-hero {
    background: linear-gradient(135deg, #172033 0%, #172033 62%, rgb(139 92 246 / 0.14) 100%) !important;
    border-color: var(--bs-dark-border) !important;
}
html.dark [data-production-planner] :is(
    .production-calendar-view-tabs,
    .production-calendar-period-bar,
    .production-calendar-month-header,
    .production-calendar-board,
    .production-calendar-demand
) {
    background: var(--bs-dark-surface-raised) !important;
}
html.dark [data-production-planner] :is(
    .production-calendar-day,
    .production-calendar-month-day,
    .production-calendar-board-column
) {
    background: rgb(30 41 59 / 0.74) !important;
    border-color: var(--bs-dark-border) !important;
}
html.dark [data-production-planner] :is(
    .production-calendar-day.is-today,
    .production-calendar-month-day.is-today
) {
    background: rgb(139 92 246 / 0.14) !important;
}
html.dark [data-production-planner] .production-calendar-month-day.is-outside {
    background: rgb(15 23 42 / 0.82) !important;
    opacity: 0.7;
}
html.dark [data-production-planner] .production-calendar-day-header:hover {
    background: rgb(51 65 85 / 0.72) !important;
}
html.dark [data-production-planner] .production-calendar-load-track {
    background: var(--bs-dark-border-strong) !important;
}
html.dark [data-production-planner] [data-calendar-empty] {
    background: rgb(15 23 42 / 0.34) !important;
    border-color: var(--bs-dark-border-strong) !important;
    color: var(--bs-dark-text-subtle) !important;
}
html.dark [data-production-planner] .production-work-card {
    background: var(--bs-dark-surface) !important;
    border-color: var(--bs-dark-border) !important;
}

/* Production Workspace is a three-view operating surface: board, planning,
   and history. Its light theme uses translucent status lanes that otherwise
   stay pastel in dark mode, so give the entire workspace a deliberate dark
   hierarchy instead of relying on one-off utility conversions. */
html.dark [data-production-workspace] .production-workspace-nav {
    background: linear-gradient(135deg, var(--bs-dark-surface), rgb(30 41 59 / 0.94)) !important;
    border-color: var(--bs-dark-border) !important;
}
html.dark [data-production-workspace] .production-workspace-tabs {
    background: var(--bs-dark-canvas) !important;
    border: 1px solid var(--bs-dark-border);
}
html.dark [data-production-workspace] .production-workspace-tabs [role="tab"] {
    color: var(--bs-dark-text-muted) !important;
}
html.dark [data-production-workspace] .production-workspace-tabs [role="tab"][aria-selected="true"] {
    background: var(--bs-dark-surface-raised) !important;
    color: var(--bs-dark-primary) !important;
    box-shadow: 0 8px 20px rgb(2 6 23 / 0.34);
}
html.dark [data-production-workspace] .production-workspace-tabs [role="tab"]:hover {
    background: rgb(51 65 85 / 0.72) !important;
    color: var(--bs-dark-text) !important;
}
html.dark [data-production-workspace] .production-workspace-summary .card {
    background: linear-gradient(145deg, var(--bs-dark-surface), rgb(30 41 59 / 0.88)) !important;
    border-color: var(--bs-dark-border) !important;
}
html.dark [data-production-workspace] .production-workspace-summary .production-summary-overdue {
    background: linear-gradient(145deg, var(--bs-dark-surface), rgb(127 29 29 / 0.24)) !important;
    border-color: rgb(251 113 133 / 0.42) !important;
}
html.dark [data-production-workspace] .production-workspace-summary .production-summary-hold {
    background: linear-gradient(145deg, var(--bs-dark-surface), rgb(120 53 15 / 0.24)) !important;
    border-color: rgb(251 191 36 / 0.42) !important;
}
html.dark [data-production-workspace] .production-lane {
    background: rgb(30 41 59 / 0.7) !important;
    border-color: var(--bs-dark-border) !important;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.025);
}
html.dark [data-production-workspace] [data-production-lane="ready"] {
    background: rgb(30 58 138 / 0.18) !important;
    border-color: rgb(96 165 250 / 0.34) !important;
}
html.dark [data-production-workspace] [data-production-lane="started"] {
    background: rgb(91 33 182 / 0.17) !important;
    border-color: rgb(167 139 250 / 0.34) !important;
}
html.dark [data-production-workspace] [data-production-lane="quality_hold"] {
    background: rgb(120 53 15 / 0.2) !important;
    border-color: rgb(251 191 36 / 0.34) !important;
}
html.dark [data-production-workspace] .production-lane > div:first-child > span {
    background: rgb(15 23 42 / 0.72) !important;
    border: 1px solid currentColor;
}
html.dark [data-production-workspace] [data-production-empty] {
    background: rgb(15 23 42 / 0.28) !important;
}
html.dark [data-production-workspace] .production-work-card {
    background: var(--bs-dark-surface) !important;
    border-color: var(--bs-dark-border-strong) !important;
    box-shadow: 0 10px 22px rgb(2 6 23 / 0.24);
}
html.dark [data-production-workspace] .production-work-card:hover {
    background: var(--bs-dark-surface-raised) !important;
    border-color: rgb(167 139 250 / 0.52) !important;
    box-shadow: 0 14px 30px rgb(2 6 23 / 0.4);
}
html.dark [data-production-workspace] .production-work-card-detail,
html.dark [data-production-workspace] .production-planning-toolbar,
html.dark [data-production-workspace] .production-capacity-card {
    background: var(--bs-dark-surface-raised) !important;
    border-color: var(--bs-dark-border) !important;
}
html.dark [data-production-workspace] .production-build-demand {
    border-color: rgb(52 211 153 / 0.4) !important;
}
html.dark [data-production-workspace] .production-suggestion-card {
    background: rgb(30 41 59 / 0.52) !important;
    border-color: var(--bs-dark-border) !important;
}
html.dark [data-production-workspace] .production-suggestion-card:hover {
    background: var(--bs-dark-surface-raised) !important;
    border-color: rgb(167 139 250 / 0.52) !important;
}
html.dark [data-production-workspace] .production-move-confirmation {
    background: rgb(120 53 15 / 0.22) !important;
    border-color: rgb(251 191 36 / 0.38) !important;
}
html.dark [data-production-workspace] .production-work-list .table-header {
    background: var(--bs-dark-surface-raised) !important;
    color: var(--bs-dark-text-subtle) !important;
}
html.dark [data-production-workspace] .production-work-list tbody tr:hover {
    background: rgb(51 65 85 / 0.58) !important;
}
html.dark [data-production-workspace] :is(a, button, input, select):focus-visible {
    outline: 2px solid var(--bs-dark-primary);
    outline-offset: 2px;
}

/* Bea owns a self-contained UI system, so theme her drawer, workflows, and
   report modal explicitly instead of depending on dashboard utility classes. */
html.dark .bs-assistant-panel,
html.dark .bs-assistant-report-modal {
    background: var(--bs-dark-surface) !important;
    color: var(--bs-dark-text);
    border-color: var(--bs-dark-border) !important;
    box-shadow: 0 30px 90px rgb(2 6 23 / 0.62);
}

html.dark .bs-assistant-panel *,
html.dark .bs-assistant-report-modal * {
    border-color: var(--bs-dark-border);
}

html.dark .bs-assistant-body {
    background: linear-gradient(180deg, var(--bs-dark-canvas), #111a2d) !important;
}

html.dark .bs-assistant-response-card,
html.dark .bs-assistant-input-wrap {
    border-color: var(--bs-dark-border-strong) !important;
}

html.dark :is(.bs-assistant-panel, .bs-assistant-report-modal)
    :is(h1, h2, h3, h4, strong, dt) {
    color: var(--bs-dark-text);
}

html.dark :is(.bs-assistant-panel, .bs-assistant-report-modal)
    :is(p, small, time, em, label, summary, dd) {
    color: var(--bs-dark-text-muted);
}

html.dark :is(.bs-assistant-panel, .bs-assistant-report-modal)
    :is(a, button) {
    color: var(--bs-dark-primary);
}

html.dark :is(
    .bs-assistant-menu,
    .bs-assistant-new-chat,
    .bs-assistant-context-chip-muted,
    .bs-assistant-home-prompts button,
    .bs-assistant-response-card,
    .bs-assistant-retry,
    .bs-assistant-feedback-row button,
    .bs-assistant-feedback-form > div:first-of-type button,
    .bs-assistant-items,
    .bs-assistant-explanation > div > div > span,
    .bs-assistant-history-search,
    .bs-assistant-record-suggestion,
    .bs-assistant-recommendation,
    .bs-assistant-input-wrap,
    .bs-assistant-attachment-menu,
    .bs-assistant-description-options button,
    .bs-stock-action,
    .bs-material-adjustment-fields select,
    .bs-recipe-builder-choices button,
    .bs-recipe-import-editor,
    .bs-recipe-review-table,
    .bs-payment-action,
    .bs-payment-fields input,
    .bs-payment-fields select,
    .bs-payment-buttons button.is-secondary,
    .bs-assistant-brief-sections > article
) {
    background: var(--bs-dark-surface) !important;
    color: var(--bs-dark-text-muted);
}

html.dark :is(
    .bs-assistant-context-bar,
    .bs-assistant-starters-loading,
    .bs-assistant-starters-empty,
    .bs-assistant-advice-points,
    .bs-assistant-feedback-form,
    .bs-assistant-metrics div,
    .bs-assistant-explanation > div,
    .bs-assistant-understanding,
    .bs-assistant-followups button,
    .bs-assistant-thinking > span,
    .bs-assistant-history-open:hover,
    .bs-assistant-record-suggestions,
    .bs-assistant-recommendations,
    .bs-assistant-composer,
    .bs-payment-review div,
    .bs-payment-inactive,
    .bs-assistant-brief-metrics span,
    .bs-assistant-brief-links a
) {
    background: var(--bs-dark-surface-raised) !important;
}

html.dark :is(
    .bs-assistant-avatar,
    .bs-assistant-beta,
    .bs-assistant-tab-count,
    .bs-assistant-context-chip,
    .bs-assistant-handoff,
    .bs-assistant-home-prompts button > .material-symbols-outlined,
    .bs-assistant-starters-empty button,
    .bs-assistant-open-report,
    .bs-assistant-result-action,
    .bs-assistant-history-icon,
    .bs-assistant-record-suggestion-icon,
    .bs-assistant-recommendation-icon,
    .bs-assistant-attachment-menu > button > .material-symbols-outlined,
    .bs-stock-action-heading > .material-symbols-outlined,
    .bs-recipe-import-yield,
    .bs-recipe-candidates button,
    .bs-recipe-create-missing,
    .bs-recipe-review-row button,
    .bs-payment-action-heading > .material-symbols-outlined,
    .bs-assistant-brief-actions a,
    .bs-assistant-brief-report
) {
    background: rgb(139 92 246 / 0.18) !important;
    color: #c4b5fd !important;
}

html.dark .bs-assistant-report-modal > header {
    background: linear-gradient(135deg, #1e293b, #172033) !important;
}

html.dark .bs-assistant-report-table thead,
html.dark .bs-recipe-review-head {
    background: var(--bs-dark-surface-raised) !important;
    color: var(--bs-dark-text-muted) !important;
}

html.dark :is(
    .bs-assistant-icon-button,
    .bs-assistant-menu button,
    .bs-assistant-tabs button,
    .bs-assistant-import-starters button,
    .bs-assistant-recent-row,
    .bs-assistant-feedback,
    .bs-assistant-thinking,
    .bs-assistant-usage,
    .bs-assistant-history-retention,
    .bs-assistant-history-empty,
    .bs-assistant-suggestion-status
) {
    color: var(--bs-dark-text-muted);
}

html.dark :is(
    .bs-assistant-icon-button:hover,
    .bs-assistant-home-prompts button:hover,
    .bs-assistant-import-starters button:hover,
    .bs-assistant-recent-row:hover,
    .bs-assistant-item:hover,
    .bs-assistant-record-suggestion:hover,
    .bs-assistant-recommendation:hover,
    .bs-assistant-attachment-menu > button:hover,
    .bs-assistant-description-options button:hover,
    .bs-recipe-builder-choices button:hover
) {
    background: rgb(51 65 85 / 0.88) !important;
}

html.dark :is(
    .bs-assistant-send,
    .bs-assistant-user-bubble,
    .bs-assistant-retry button,
    .bs-recipe-confirm,
    .bs-payment-buttons button:not(.is-secondary),
    .bs-assistant-anomaly button
) {
    color: white !important;
}

html.dark :is(
    .bs-assistant-task-resume,
    .bs-payment-complete
) {
    background: rgb(16 185 129 / 0.16) !important;
    color: #6ee7b7 !important;
}

html.dark :is(
    .bs-assistant-contextual-starters em,
    .bs-assistant-response-card.is-error,
    .bs-assistant-retry,
    .bs-recipe-warnings,
    .bs-payment-warning,
    .bs-assistant-brief-sections > article.is-error
) {
    background: rgb(249 115 22 / 0.14) !important;
    color: #fdba74 !important;
}

html.dark :is(
    .bs-assistant-menu button:hover,
    .bs-assistant-feedback-row button.is-negative,
    .bs-assistant-history-error,
    .bs-assistant-anomaly
) {
    background: rgb(244 63 94 / 0.14) !important;
    color: #fda4af !important;
}

html.dark :is(
    .bs-assistant-task-resume small,
    .bs-payment-complete small,
    .bs-assistant-retry small,
    .bs-recipe-warnings p,
    .bs-assistant-anomaly small
) {
    color: inherit !important;
}

html.dark .bs-assistant-input,
html.dark .bs-assistant-history-search input {
    background: transparent !important;
    color: var(--bs-dark-text) !important;
}

html.dark .bs-assistant-input::placeholder,
html.dark .bs-assistant-history-search input::placeholder {
    color: var(--bs-dark-text-subtle) !important;
}