/* ── Brand, Layout & Non-Color Variables ─────────────────────────────────── */
:root.chat, body.chat, .chat {
    /* Brand colors */
    --chat-color-primary:        #750808;
    --chat-color-primary-hover:  #dc1010;
    --chat-color-secondary:      #95a5a6;
    --chat-color-secondary-hover:#7f8c8d;
    --chat-color-success:        #27ae60;
    --chat-color-warning:        #f39c12;
    --chat-color-danger:         #e74c3c;
    --chat-color-danger-hover:   #c82333;
    --chat-color-required:       #dc3545;
    --chat-color-info:           #ffe08a;
    --chat-color-bold:           #750808;
    --chat-color-bold-hover:     #e21010;

    /* Spacing */
    --chat-spacing-xs: 0.25rem;
    --chat-spacing-sm: 0.5rem;
    --chat-spacing-md: 1rem;
    --chat-spacing-lg: 0.75rem;
    --chat-spacing-xl: 1rem;

    /* Typography */
    --chat-font-family-base: Arial, sans-serif;
    --chat-font-size-sm:  0.8em;
    --chat-font-size-base: 1em;
    --chat-font-size-lg:  1.1em;
    --chat-font-size-xl:  1.25rem;
    --chat-font-size-xxl: 1.5rem;

    /* Border Radius */
    --chat-border-radius-sm:   0.125rem;
    --chat-border-radius-base: 0.25rem;
    --chat-border-radius-md:   0.5rem;
    --chat-border-radius-lg:   0.75rem;
    --chat-border-radius-xl:   1rem;

    /* Transitions */
    --chat-transition-fast: 0.2s ease;
    --chat-transition-base: 0.3s ease;
    --chat-transition-slow: 0.4s ease;

    /* Sidebar Dimensions */
    --chat-sidebar-width:     16rem;
    --chat-sidebar-max-width: 16rem;

    /* Z-indexes */
    --chat-z-dropdown:       200;
    --chat-z-dropdown-fixed: 210;

    /* Utility neutrals (never theme-specific) */
    --chat-color-white: #ffffff;
    --chat-color-black: #000000;

    /* Corner Bracket Styling */
    --chat-bracket-thickness: 4px;
    --chat-bracket-length:    1.5rem;

    /* Link colors (reference brand) */
    --chat-text-link:  var(--chat-color-bold);
    --chat-text-hover: var(--chat-color-bold-hover);

    /* Subscription tier colors */
    --chat-color-free:     #9d9d9d;
    --chat-color-basic:    #1eff00;
    --chat-color-standard: #0070dd;
    --chat-color-premium:  #a335ee;
    --chat-color-ultimate: #ff8000;
}

/* ── Dark Theme ──────────────────────────────────────────────────────────── */
[data-theme="dark"] {
    /* Surfaces */
    --chat-bg-body:    #1e1e1e;
    --chat-bg-surface: #0f1319;
    --chat-bg-overlay: #2b2b2b;

    /* Existing bg/text vars (used by legacy code) */
    --chat-bg-primary:   #0f1319;
    --chat-bg-secondary: #1d1d22;
    --chat-bg-card:      #1d1d22;

    /* Text */
    --chat-text-body:      #cdcdcd;
    --chat-text-primary:   #e9ecef;
    --chat-text-secondary: #adb5bd;
    --chat-text-muted:     #6c757d;
    --chat-text-light:     #ced4da;
    --chat-color-alternate: #333333;

    /* Scrollbar */
    --chat-scrollbar-thumb:       #888888;
    --chat-scrollbar-thumb-hover: #aaaaaa;
    --chat-scrollbar-border:      #1e1e1e;

    /* Controls */
    --chat-control-bg:       #1e1e1e;
    --chat-control-color:    #cccccc;
    --chat-control-border:   #444444;
    --chat-dropdown-bg:      #1e1e1e;
    --chat-dropdown-hover:   #333333;
    --chat-range-bg:         #bebebe;
    --chat-distraction-color: #ffffff;
    --chat-shadow-hover:     rgba(255, 255, 255, 0.15);
    --chat-indicator-color:  #888888;

    /* Cards */
    --chat-card-bg:              #1c1c1e;
    --chat-card-border:          #39393d;
    --chat-card-shadow:          rgba(0, 0, 0, 0.33);
    --chat-card-color:           #c0c0c0;
    --chat-card-container-color: #eeeeee;
    --chat-avatar-bg:            #111111;
    --chat-tagline-color:        #cccccc;

    /* Profile */
    --chat-profile-btn-color:     #8a8a8a;
    --chat-profile-btn-hover:     #ffffff;
    --chat-profile-status-filter: brightness(0.7);

    /* Chat input */
    --chat-input-bg:      #2b2b2b;
    --chat-input-border:  #2b2b2b;
    --chat-focus-ring:    #af67c0;
    --chat-copied-bg:     rgba(224, 219, 69, 0.09);
    --chat-copied-outline: rgba(224, 219, 69, 0.59);

    /* Action containers / slots */
    --chat-action-container-bg: #232323d9;
    --chat-action-shadow:       #00000088;
    --chat-slot-bg:             #272727;
    --chat-slot-border:         #555555;
    --chat-slot-filled-bg:      #404040;
    --chat-slot-filled-border:  #888888;

    /* Header banner */
    --chat-banner-color:  #8a8a8a;
    --chat-banner-shadow: rgba(0, 0, 0, 0.6);

    /* Miscellaneous */
    --chat-code-color:       limegreen;
    --chat-theme-icon-color: #f2c94c;

    /* Gender colors */
    --chat-color-male:       #00bfff;
    --chat-color-female:     #ff69b4;
    --chat-color-non-binary: #af67c0;
    --chat-color-unknown:    #af67c0;

    /* Menu / dropdown */
    --chat-menu-item-hover: rgba(255, 255, 255, 0.07);
    --chat-menu-divider:    rgba(255, 255, 255, 0.07);
    --chat-border-accent:   #3a4354;

    /* Accent (brand purple) */
    --chat-accent-primary:     #af67c0;
    --chat-accent-primary-rgb: 175, 103, 192;
    --chat-accent-dark:        #8c4fa0;
    --chat-accent-light:       rgba(175, 103, 192, 0.15);

    /* Navigation hover / dropdown item hover */
    --chat-nav-item-hover: #333333;

    /* Borders */
    --chat-border-light:  #2d2d2d;
    --chat-border-medium: #555555;
    --chat-border-dark:   #777777;

    /* Accent surface */
    --chat-bg-accent: #252525;

    /* Shadows */
    --chat-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* ── Light Theme ─────────────────────────────────────────────────────────── */
[data-theme="light"] {
    /* Surfaces */
    --chat-bg-body:    #eeeeee;
    --chat-bg-surface: #cdcdcd;
    --chat-bg-overlay: #cdcdcd;

    --chat-bg-primary:   #cdcdcd;
    --chat-bg-secondary: #e0e0e0;
    --chat-bg-card:      #e4e4e4;

    /* Text */
    --chat-text-body:      #2a2a2a;
    --chat-text-primary:   #1e1e1e;
    --chat-text-secondary: #444444;
    --chat-text-muted:     #666666;
    --chat-text-light:     #555555;
    --chat-color-alternate: #cccccc;

    /* Scrollbar */
    --chat-scrollbar-thumb:       #bbbbbb;
    --chat-scrollbar-thumb-hover: #aeaeae;
    --chat-scrollbar-border:      #aeaeae;

    /* Controls */
    --chat-control-bg:       #cccccc;
    --chat-control-color:    #1e1e1e;
    --chat-control-border:   #8f8f8f;
    --chat-dropdown-bg:      #c8c8c8;
    --chat-dropdown-hover:   #a8a8a8;
    --chat-range-bg:         #606060;
    --chat-distraction-color: #232323;
    --chat-shadow-hover:     rgba(0, 0, 0, 0.15);
    --chat-indicator-color:  #a4a4a4;

    /* Cards */
    --chat-card-bg:              #e4e4e4;
    --chat-card-border:          #b4b4c2;
    --chat-card-shadow:          rgba(255, 255, 255, 0.33);
    --chat-card-color:           #1c1c1e;
    --chat-card-container-color: #272727;
    --chat-avatar-bg:            #ededed;
    --chat-tagline-color:        #6b6b6b;

    /* Profile */
    --chat-profile-btn-color:     #626262;
    --chat-profile-btn-hover:     #282828;
    --chat-profile-status-filter: brightness(1.3);

    /* Chat input */
    --chat-input-bg:      #bbbbbb;
    --chat-input-border:  #c5c5c5;
    --chat-focus-ring:    #54315c;
    --chat-copied-bg:     rgba(224, 219, 69, 0.25);
    --chat-copied-outline: rgba(224, 219, 69, 0.81);

    /* Action containers / slots */
    --chat-action-container-bg: #dfdfdfd9;
    --chat-action-shadow:       #00000088;
    --chat-slot-bg:             #d1d1d1;
    --chat-slot-border:         #9d9d9d;
    --chat-slot-filled-bg:      #888888;
    --chat-slot-filled-border:  #404040;

    /* Header banner */
    --chat-banner-color:  #8a8a8a;
    --chat-banner-shadow: rgba(255, 255, 255, 0.6);

    /* Miscellaneous */
    --chat-code-color:       rgb(23, 96, 23);
    --chat-theme-icon-color: #9f7f21;

    /* Gender colors */
    --chat-color-male:       #007ea8;
    --chat-color-female:     #dc2a83;
    --chat-color-non-binary: #7a358a;
    --chat-color-unknown:    #af67c0;

    /* Menu / dropdown */
    --chat-menu-item-hover: rgba(0, 0, 0, 0.06);
    --chat-menu-divider:    rgba(0, 0, 0, 0.10);
    --chat-border-accent:   #aaaaaa;

    /* Accent (brand purple — darker for light-bg contrast) */
    --chat-accent-primary:     #7a358a;
    --chat-accent-primary-rgb: 122, 53, 138;
    --chat-accent-dark:        #5c2568;
    --chat-accent-light:       rgba(122, 53, 138, 0.12);

    /* Navigation hover / dropdown item hover */
    --chat-nav-item-hover: #a8a8a8;

    /* Borders */
    --chat-border-light:  #c5c5c5;
    --chat-border-medium: #aaaaaa;
    --chat-border-dark:   #888888;

    /* Accent surface */
    --chat-bg-accent: #d8d8d8;

    /* Shadows */
    --chat-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ── Link styles ─────────────────────────────────────────────────────────── */
.chat :where(a, a:focus, a:hover, a:active, a:visited) {
    color: var(--chat-text-link);
    text-decoration: none;
}
.chat :where(a:focus, a:hover, a:active) {
    color: var(--chat-text-hover);
}


/* ── Header background images (theme-specific content, not color vars) ───── */
[data-theme="dark"] .header {
    background-image: url('/assets/images/res/chat-header-dark.png');
}
[data-theme="light"] .header {
    background-image: url('/assets/images/res/chat-header-light.png');
}