/* ==========================================================================
   REESPONDER UI REFERENCE — VARIANT 1
   01 / FOUNDATIONS

   DESIGN INTENT
   -------------
   Serious B2B application UI.
   Dense enough for real work.
   Calm, precise, technical.
   No generic AI/SaaS visual language.
   No decorative gradients.
   No glow.
   No glass.
   No arbitrary floating cards.
   No giant marketing typography.
   No unnecessary pills.
   No excessive rounding.

   IMPORTANT FOR CODEX
   -------------------
   This CSS is a VISUAL REFERENCE, not a production dependency.
   Infer the visual system and relationships.
   Production classes may and should differ.
   ========================================================================== */

:root {
    /* ----------------------------------------------------------
       Canvas / surfaces
       ---------------------------------------------------------- */

    --ui-canvas: #f3f4f1;
    --ui-canvas-subtle: #edefe9;

    --ui-surface: #ffffff;
    --ui-surface-muted: #f8f9f6;
    --ui-surface-subtle: #f4f5f2;
    --ui-surface-strong: #e8ebe4;
    --ui-surface-inverse: #121411;

    /* ----------------------------------------------------------
       Text
       ---------------------------------------------------------- */

    --ui-text: #141613;
    --ui-text-soft: #454a43;
    --ui-text-muted: #737971;
    --ui-text-faint: #9aa098;
    --ui-text-inverse: #f7f8f5;

    /* ----------------------------------------------------------
       Borders
       ---------------------------------------------------------- */

    --ui-border: #d9ddd5;
    --ui-border-soft: #e8ebe4;
    --ui-border-strong: #bec4b9;
    --ui-border-focus: #155eef;

    /* ----------------------------------------------------------
       Accent
       ---------------------------------------------------------- */

    --ui-accent: #155eef;
    --ui-accent-hover: #104fd0;
    --ui-accent-active: #0c43b3;

    --ui-accent-soft: #edf3ff;
    --ui-accent-softer: #f5f8ff;
    --ui-accent-border: #bfd1fa;

    /* ----------------------------------------------------------
       Semantic colors
       ---------------------------------------------------------- */

    --ui-success: #18794e;
    --ui-success-hover: #11613e;
    --ui-success-soft: #eef8f2;
    --ui-success-border: #bfe0cb;

    --ui-warning: #986a00;
    --ui-warning-hover: #775200;
    --ui-warning-soft: #fff8e5;
    --ui-warning-border: #ead79d;

    --ui-danger: #c93434;
    --ui-danger-hover: #a62929;
    --ui-danger-soft: #fff1f1;
    --ui-danger-border: #efb9b9;

    --ui-info: #24678f;
    --ui-info-soft: #eff7fb;
    --ui-info-border: #bdd8e7;

    /* ----------------------------------------------------------
       Sidebar
       ---------------------------------------------------------- */

    --ui-sidebar: #121411;
    --ui-sidebar-hover: #1c1f1b;
    --ui-sidebar-active: #292d27;
    --ui-sidebar-border: #30342e;

    --ui-sidebar-text: #f5f7f3;
    --ui-sidebar-text-soft: #c3c8c0;
    --ui-sidebar-text-muted: #969d93;

    /* ----------------------------------------------------------
       Typography
       ---------------------------------------------------------- */

    --ui-font-sans:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --ui-font-mono:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        Menlo,
        monospace;

    --ui-size-11: 0.6875rem;
    --ui-size-12: 0.75rem;
    --ui-size-13: 0.8125rem;
    --ui-size-14: 0.875rem;
    --ui-size-15: 0.9375rem;
    --ui-size-16: 1rem;
    --ui-size-18: 1.125rem;
    --ui-size-20: 1.25rem;
    --ui-size-24: 1.5rem;
    --ui-size-28: 1.75rem;
    --ui-size-32: 2rem;
    --ui-size-40: 2.5rem;

    --ui-weight-regular: 400;
    --ui-weight-medium: 500;
    --ui-weight-semibold: 600;
    --ui-weight-bold: 700;

    --ui-line-tight: 1.2;
    --ui-line-compact: 1.35;
    --ui-line-normal: 1.5;
    --ui-line-relaxed: 1.65;

    --ui-letter-tight: -0.025em;
    --ui-letter-normal: 0;
    --ui-letter-wide: 0.04em;

    /* ----------------------------------------------------------
       Spacing scale
       ---------------------------------------------------------- */

    --ui-space-1: 0.25rem;
    --ui-space-2: 0.5rem;
    --ui-space-3: 0.75rem;
    --ui-space-4: 1rem;
    --ui-space-5: 1.25rem;
    --ui-space-6: 1.5rem;
    --ui-space-7: 2rem;
    --ui-space-8: 2.5rem;
    --ui-space-9: 3rem;
    --ui-space-10: 4rem;
    --ui-space-11: 5rem;

    /* ----------------------------------------------------------
       Controls
       ---------------------------------------------------------- */

    --ui-control-sm: 2rem;
    --ui-control-md: 2.5rem;
    --ui-control-lg: 2.875rem;

    /* ----------------------------------------------------------
       Corners
       ---------------------------------------------------------- */

    --ui-radius-xs: 3px;
    --ui-radius-sm: 5px;
    --ui-radius-md: 7px;
    --ui-radius-lg: 10px;

    /* ----------------------------------------------------------
       Shadows
       ---------------------------------------------------------- */

    --ui-shadow-1:
        0 1px 2px rgba(16, 18, 15, 0.05),
        0 1px 1px rgba(16, 18, 15, 0.03);

    --ui-shadow-2:
        0 8px 24px rgba(16, 18, 15, 0.08),
        0 2px 8px rgba(16, 18, 15, 0.05);

    --ui-shadow-3:
        0 18px 50px rgba(16, 18, 15, 0.14),
        0 5px 16px rgba(16, 18, 15, 0.07);

    /* ----------------------------------------------------------
       Layout
       ---------------------------------------------------------- */

    --ui-sidebar-width: 248px;
    --ui-topbar-height: 60px;

    --ui-page-max: 1328px;
    --ui-reading-max: 736px;
    --ui-settings-max: 1024px;
    --ui-form-max: 544px;

    /* ----------------------------------------------------------
       Focus / motion
       ---------------------------------------------------------- */

    --ui-focus:
        0 0 0 3px rgba(21, 94, 239, 0.16);

    --ui-speed-fast: 110ms;
    --ui-speed: 160ms;
    --ui-speed-slow: 240ms;

    --ui-ease:
        cubic-bezier(0.2, 0.7, 0.2, 1);

    color-scheme: light;
}

/* ==========================================================================
   RESET
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--ui-canvas);
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    min-height: 100vh;
    margin: 0;

    background: var(--ui-canvas);
    color: var(--ui-text);

    font-family: var(--ui-font-sans);
    font-size: var(--ui-size-14);
    line-height: var(--ui-line-normal);
}

img,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    color: inherit;
}

table {
    border-collapse: collapse;
}

a {
    color: var(--ui-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a:hover {
    color: var(--ui-accent-hover);
}

::selection {
    background: #d5e3ff;
    color: #0d2854;
}

/* ==========================================================================
   BASE TYPOGRAPHY
   ========================================================================== */

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
blockquote,
pre {
    margin-top: 0;
}

h1,
h2,
h3,
h4 {
    color: var(--ui-text);
    font-weight: var(--ui-weight-semibold);
    letter-spacing: var(--ui-letter-tight);
}

h1 {
    margin-bottom: var(--ui-space-3);
    font-size: var(--ui-size-28);
    line-height: 1.18;
}

h2 {
    margin-bottom: var(--ui-space-3);
    font-size: var(--ui-size-20);
    line-height: 1.25;
}

h3 {
    margin-bottom: var(--ui-space-2);
    font-size: var(--ui-size-16);
    line-height: 1.3;
}

h4 {
    margin-bottom: var(--ui-space-2);
    font-size: var(--ui-size-14);
    line-height: 1.35;
}

p {
    margin-bottom: var(--ui-space-4);
    color: var(--ui-text-soft);
}

small {
    font-size: var(--ui-size-12);
}

strong {
    font-weight: var(--ui-weight-semibold);
}

code,
kbd,
pre {
    font-family: var(--ui-font-mono);
}

code {
    font-size: 0.92em;
}

hr {
    height: 1px;
    margin: var(--ui-space-7) 0;
    border: 0;
    background: var(--ui-border);
}

/* ==========================================================================
   GENERIC TEXT UTILITIES
   ========================================================================== */

.ui-text-primary {
    color: var(--ui-text);
}

.ui-text-soft {
    color: var(--ui-text-soft);
}

.ui-text-muted {
    color: var(--ui-text-muted);
}

.ui-text-faint {
    color: var(--ui-text-faint);
}

.ui-text-danger {
    color: var(--ui-danger);
}

.ui-text-success {
    color: var(--ui-success);
}

.ui-text-warning {
    color: var(--ui-warning);
}

.ui-text-accent {
    color: var(--ui-accent);
}

.ui-text-xs {
    font-size: var(--ui-size-11);
}

.ui-text-sm {
    font-size: var(--ui-size-12);
}

.ui-text-md {
    font-size: var(--ui-size-14);
}

.ui-text-lg {
    font-size: var(--ui-size-16);
}

.ui-font-medium {
    font-weight: var(--ui-weight-medium);
}

.ui-font-semibold {
    font-weight: var(--ui-weight-semibold);
}

.ui-mono {
    font-family: var(--ui-font-mono);
}

/* ==========================================================================
   BASIC CONTAINERS
   ========================================================================== */

.ui-page-width {
    width: min(
        calc(100% - 48px),
        var(--ui-page-max)
    );

    margin-inline: auto;
}

.ui-reading-width {
    width: min(
        100%,
        var(--ui-reading-max)
    );
}

.ui-form-width {
    width: min(
        100%,
        var(--ui-form-max)
    );
}

/* ==========================================================================
   STACK / CLUSTER HELPERS
   ========================================================================== */

.ui-stack {
    display: flex;
    flex-direction: column;
}

.ui-stack-xs {
    gap: var(--ui-space-1);
}

.ui-stack-sm {
    gap: var(--ui-space-2);
}

.ui-stack-md {
    gap: var(--ui-space-4);
}

.ui-stack-lg {
    gap: var(--ui-space-6);
}

.ui-stack-xl {
    gap: var(--ui-space-8);
}

.ui-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.ui-cluster-sm {
    gap: var(--ui-space-2);
}

.ui-cluster-md {
    gap: var(--ui-space-3);
}

.ui-cluster-lg {
    gap: var(--ui-space-4);
}

.ui-grow {
    flex: 1 1 auto;
}

.ui-shrink-0 {
    flex-shrink: 0;
}

/* ==========================================================================
   DIVIDERS
   ========================================================================== */

.ui-divider {
    height: 1px;
    border: 0;
    background: var(--ui-border);
}

.ui-divider-soft {
    background: var(--ui-border-soft);
}

.ui-divider-vertical {
    width: 1px;
    align-self: stretch;
    background: var(--ui-border);
}

/* ==========================================================================
   SURFACE HELPERS
   ========================================================================== */

.ui-surface {
    background: var(--ui-surface);
}

.ui-surface-muted {
    background: var(--ui-surface-muted);
}

.ui-surface-inverse {
    background: var(--ui-surface-inverse);
    color: var(--ui-text-inverse);
}

.ui-bordered {
    border: 1px solid var(--ui-border);
}

.ui-shadow-1 {
    box-shadow: var(--ui-shadow-1);
}

.ui-shadow-2 {
    box-shadow: var(--ui-shadow-2);
}

/* ==========================================================================
   SCROLLBARS
   ========================================================================== */

* {
    scrollbar-width: thin;
    scrollbar-color:
        #bec3bb
        transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 10px;
    background: #bec3bb;
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: #9da39a;
    background-clip: padding-box;
}

/* ==========================================================================
   FOCUS
   ========================================================================== */

:focus {
    outline: none;
}

:focus-visible {
    outline: none;
    box-shadow: var(--ui-focus);
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ==========================================================================
   RESPONSIVE FOUNDATION
   ========================================================================== */

@media (max-width: 900px) {
    :root {
        --ui-sidebar-width: 224px;
    }

    .ui-page-width {
        width: min(
            calc(100% - 32px),
            var(--ui-page-max)
        );
    }
}

@media (max-width: 640px) {
    body {
        font-size: var(--ui-size-14);
    }

    h1 {
        font-size: var(--ui-size-24);
    }

    .ui-page-width {
        width: calc(100% - 24px);
    }
}
/* ==========================================================================
   VARIANT 1 — DARK MODE

   Theme is activated through:

   <html data-theme="dark">

   The application should preserve exactly the same:
   - hierarchy
   - density
   - spacing
   - component geometry
   - interaction model

   Dark mode is NOT a separate visual style.
   It is the same product under a dark surface system.

   No neon.
   No glow.
   No purple gradients.
   No fake "cyber" styling.
   ========================================================================== */

html[data-theme="dark"] {
    color-scheme: dark;

    /* ----------------------------------------------------------
       Canvas / surfaces
       ---------------------------------------------------------- */

    --ui-canvas: #0f110f;
    --ui-canvas-subtle: #131613;

    --ui-surface: #171a17;
    --ui-surface-muted: #1b1e1a;
    --ui-surface-subtle: #20231f;
    --ui-surface-strong: #282c27;
    --ui-surface-inverse: #f1f3ef;

    /* ----------------------------------------------------------
       Text
       ---------------------------------------------------------- */

    --ui-text: #f1f3ef;
    --ui-text-soft: #c5cac2;
    --ui-text-muted: #939b91;
    --ui-text-faint: #6f776d;
    --ui-text-inverse: #151714;

    /* ----------------------------------------------------------
       Borders
       ---------------------------------------------------------- */

    --ui-border: #30352f;
    --ui-border-soft: #272c27;
    --ui-border-strong: #454c43;
    --ui-border-focus: #5b8fff;

    /* ----------------------------------------------------------
       Accent
       ---------------------------------------------------------- */

    --ui-accent: #4f83f1;
    --ui-accent-hover: #6694f3;
    --ui-accent-active: #3d70db;

    --ui-accent-soft: #18233a;
    --ui-accent-softer: #151c2a;
    --ui-accent-border: #314c80;

    /* ----------------------------------------------------------
       Semantic
       ---------------------------------------------------------- */

    --ui-success: #50ad7a;
    --ui-success-hover: #65bb89;
    --ui-success-soft: #15251c;
    --ui-success-border: #29583c;

    --ui-warning: #d0a545;
    --ui-warning-hover: #dfb95d;
    --ui-warning-soft: #292314;
    --ui-warning-border: #5a4822;

    --ui-danger: #e26666;
    --ui-danger-hover: #ea7b7b;
    --ui-danger-soft: #2b1818;
    --ui-danger-border: #603030;

    --ui-info: #6ba7c9;
    --ui-info-soft: #15242c;
    --ui-info-border: #315367;

    /* ----------------------------------------------------------
       Sidebar

       Sidebar remains slightly darker than the rest of the app.
       ---------------------------------------------------------- */

    --ui-sidebar: #0b0d0b;
    --ui-sidebar-hover: #151815;
    --ui-sidebar-active: #20241f;
    --ui-sidebar-border: #292e28;

    --ui-sidebar-text: #f2f4f0;
    --ui-sidebar-text-soft: #bec5bb;
    --ui-sidebar-text-muted: #7f887d;

    /* ----------------------------------------------------------
       Shadows
       ---------------------------------------------------------- */

    --ui-shadow-1:
        0 1px 2px rgba(0, 0, 0, 0.26),
        0 1px 1px rgba(0, 0, 0, 0.18);

    --ui-shadow-2:
        0 10px 28px rgba(0, 0, 0, 0.34),
        0 2px 8px rgba(0, 0, 0, 0.24);

    --ui-shadow-3:
        0 22px 60px rgba(0, 0, 0, 0.48),
        0 5px 18px rgba(0, 0, 0, 0.30);

    /* ----------------------------------------------------------
       Focus
       ---------------------------------------------------------- */

    --ui-focus:
        0 0 0 3px rgba(79, 131, 241, 0.22);
}


/* ==========================================================================
   DOCUMENT
   ========================================================================== */

html[data-theme="dark"],
html[data-theme="dark"] body {
    background:
        var(--ui-canvas);

    color:
        var(--ui-text);
}

html[data-theme="dark"] ::selection {
    background:
        #294477;

    color:
        #ffffff;
}


/* ==========================================================================
   BUTTONS
   ========================================================================== */

html[data-theme="dark"] .ui-button-primary {
    color:
        #ffffff;
}

html[data-theme="dark"] .ui-button-primary:hover {
    color:
        #ffffff;
}

html[data-theme="dark"] .ui-button-secondary {
    background:
        var(--ui-surface);

    border-color:
        var(--ui-border-strong);

    color:
        var(--ui-text);
}

html[data-theme="dark"] .ui-button-secondary:hover {
    background:
        var(--ui-surface-strong);

    border-color:
        #596157;
}

html[data-theme="dark"] .ui-button-danger {
    color:
        #ffffff;
}

html[data-theme="dark"] .ui-button-success {
    color:
        #ffffff;
}


/* ==========================================================================
   INPUTS
   ========================================================================== */

html[data-theme="dark"] .ui-input,
html[data-theme="dark"] .ui-textarea,
html[data-theme="dark"] .ui-select {
    background:
        #141714;

    color:
        var(--ui-text);

    border-color:
        var(--ui-border-strong);
}

html[data-theme="dark"] .ui-input:hover,
html[data-theme="dark"] .ui-textarea:hover,
html[data-theme="dark"] .ui-select:hover {
    border-color:
        #5b6359;
}

html[data-theme="dark"] .ui-input::placeholder,
html[data-theme="dark"] .ui-textarea::placeholder {
    color:
        #697168;
}

html[data-theme="dark"] .ui-input:disabled,
html[data-theme="dark"] .ui-textarea:disabled,
html[data-theme="dark"] .ui-select:disabled {
    background:
        #20231f;

    color:
        var(--ui-text-muted);
}

html[data-theme="dark"] .ui-select {
    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #9ba398 50%
        ),
        linear-gradient(
            135deg,
            #9ba398 50%,
            transparent 50%
        );
}


/* ==========================================================================
   SWITCH
   ========================================================================== */

html[data-theme="dark"] .ui-switch-track {
    border-color:
        #515850;

    background:
        #343934;
}

html[data-theme="dark"] .ui-switch-track::after {
    background:
        #f3f5f1;

    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.45);
}


/* ==========================================================================
   CODE
   ========================================================================== */

html[data-theme="dark"] .ui-code-input {
    background:
        #111411;

    border-color:
        var(--ui-border);
}

html[data-theme="dark"] .ui-code-input code {
    color:
        #cbd0c8;
}

html[data-theme="dark"] .ui-code-copy {
    background:
        #181b18;

    border-left-color:
        var(--ui-border);

    color:
        var(--ui-text-soft);
}

html[data-theme="dark"] .ui-code-copy:hover {
    background:
        var(--ui-surface-strong);

    color:
        var(--ui-text);
}


/* ==========================================================================
   PANELS
   ========================================================================== */

html[data-theme="dark"] .ui-panel {
    background:
        var(--ui-surface);

    border-color:
        var(--ui-border);
}

html[data-theme="dark"] .ui-panel-footer {
    background:
        #141714;
}


/* ==========================================================================
   METRICS
   ========================================================================== */

html[data-theme="dark"] .ui-metrics {
    background:
        var(--ui-surface);

    border-color:
        var(--ui-border);
}


/* ==========================================================================
   TABLE
   ========================================================================== */

html[data-theme="dark"] .ui-table-wrap {
    background:
        var(--ui-surface);

    border-color:
        var(--ui-border);
}

html[data-theme="dark"] .ui-table th {
    background:
        #141714;

    border-bottom-color:
        var(--ui-border);

    color:
        var(--ui-text-muted);
}

html[data-theme="dark"] .ui-table td {
    border-bottom-color:
        var(--ui-border-soft);

    color:
        var(--ui-text-soft);
}

html[data-theme="dark"] .ui-table tbody tr:hover {
    background:
        #1b1f1a;
}


/* ==========================================================================
   BADGES
   ========================================================================== */

html[data-theme="dark"] .ui-badge {
    background:
        #20231f;

    border-color:
        #383e36;

    color:
        var(--ui-text-soft);
}


/* ==========================================================================
   DROPDOWN
   ========================================================================== */

html[data-theme="dark"] .ui-dropdown {
    background:
        var(--ui-surface);

    border-color:
        var(--ui-border);
}

html[data-theme="dark"] .ui-dropdown-item:hover {
    background:
        var(--ui-surface-strong);
}


/* ==========================================================================
   MODAL
   ========================================================================== */

html[data-theme="dark"] .ui-modal-backdrop {
    background:
        rgba(0, 0, 0, 0.68);
}

html[data-theme="dark"] .ui-modal {
    background:
        var(--ui-surface);

    border-color:
        var(--ui-border);
}

html[data-theme="dark"] .ui-modal-footer {
    background:
        #141714;
}


/* ==========================================================================
   TOAST
   ========================================================================== */

html[data-theme="dark"] .ui-toast {
    background:
        var(--ui-surface);

    border-color:
        var(--ui-border);
}


/* ==========================================================================
   PROGRESS
   ========================================================================== */

html[data-theme="dark"] .ui-progress {
    background:
        #30352f;
}


/* ==========================================================================
   AVATAR
   ========================================================================== */

html[data-theme="dark"] .ui-avatar {
    background:
        #282c27;

    border-color:
        #3c423a;

    color:
        var(--ui-text-soft);
}


/* ==========================================================================
   INTEGRATIONS
   ========================================================================== */

html[data-theme="dark"] .ui-integration {
    background:
        var(--ui-surface);
}

html[data-theme="dark"] .ui-integration-logo {
    background:
        #20231f;
}


/* ==========================================================================
   SKELETON
   ========================================================================== */

html[data-theme="dark"] .ui-skeleton {
    background:
        #30352f;
}


/* ==========================================================================
   APP TOPBAR
   ========================================================================== */

html[data-theme="dark"] .ui-topbar {
    background:
        #171a17;

    border-bottom-color:
        var(--ui-border);

    backdrop-filter:
        none;
}


/* ==========================================================================
   CONVERSATIONS
   ========================================================================== */

html[data-theme="dark"] .ui-conversation-list {
    background:
        var(--ui-surface);

    border-right-color:
        var(--ui-border);
}

html[data-theme="dark"] .ui-conversation-item:hover {
    background:
        var(--ui-surface-muted);
}

html[data-theme="dark"] .ui-conversation-item-active {
    background:
        #18243b;
}

html[data-theme="dark"] .ui-conversation-pane {
    background:
        var(--ui-canvas);
}

html[data-theme="dark"] .ui-conversation-head,
html[data-theme="dark"] .ui-message-composer {
    background:
        var(--ui-surface);

    border-color:
        var(--ui-border);
}

html[data-theme="dark"] .ui-message-bubble {
    background:
        #1b1e1a;

    border-color:
        #353b34;

    color:
        var(--ui-text-soft);
}

html[data-theme="dark"] .ui-message-agent .ui-message-bubble {
    background:
        #18243b;

    border-color:
        #2e4977;

    color:
        #dbe7ff;
}

html[data-theme="dark"] .ui-message-composer-box {
    background:
        #141714;

    border-color:
        var(--ui-border-strong);
}

html[data-theme="dark"] .ui-message-composer textarea {
    background:
        transparent;

    color:
        var(--ui-text);
}


/* ==========================================================================
   AUTH
   ========================================================================== */

html[data-theme="dark"] .ui-auth-shell {
    background:
        var(--ui-surface);
}

html[data-theme="dark"] .ui-auth-panel {
    background:
        var(--ui-surface);
}

html[data-theme="dark"] .ui-auth-context {
    background:
        #090b09;
}


/* ==========================================================================
   KNOWLEDGE SOURCES
   ========================================================================== */

html[data-theme="dark"] .ui-source-list {
    background:
        var(--ui-surface);
}

html[data-theme="dark"] .ui-source-icon {
    background:
        #20231f;

    border-color:
        var(--ui-border);
}


/* ==========================================================================
   API / SECRETS
   ========================================================================== */

html[data-theme="dark"] .ui-secret {
    background:
        #111411;

    border-color:
        var(--ui-border);
}

html[data-theme="dark"] .ui-secret-code {
    color:
        #cbd0c8;
}


/* ==========================================================================
   ONBOARDING
   ========================================================================== */

html[data-theme="dark"] .ui-onboarding {
    background:
        var(--ui-surface);
}

html[data-theme="dark"] .ui-onboarding-footer {
    background:
        #141714;
}


/* ==========================================================================
   DANGER ZONE
   ========================================================================== */

html[data-theme="dark"] .ui-danger-zone {
    background:
        var(--ui-surface);
}

html[data-theme="dark"] .ui-danger-zone-head {
    background:
        var(--ui-danger-soft);
}


/* ==========================================================================
   SHOWCASE
   ========================================================================== */

html[data-theme="dark"] .ui-showcase-card {
    background:
        var(--ui-surface);
}