/*
 * Tinode Custom Theme — Dark Modern
 * 
 * All colors are CSS variable overrides. Edit values below to change the theme.
 * This file is loaded AFTER base.min.css, so all overrides take effect.
 *
 * To modify: edit the hex values, save, bump ?v=N in index.html, hard-refresh.
 */

:root {
    /* Force dark color scheme */
    color-scheme: dark;

    /* ============================================
     * BASE COLORS
     * ============================================ */

    /* Main app container background */
    --clr-bright: #1a1a2e;

    /* Primary text color */
    --clr-dark: #e2e8f0;

    /* Page background behind the app container — matches --clr-bright for seamless look */
    --clr-body-background: #111122;

    /* Top header stripe (sidebar header + chat header) */
    --clr-header-stripe-bg: #16213e;

    /* Shadows — darken for dark theme */
    --clr-shadow-gray-strong: rgba(0,0,0,0.3);
    --clr-shadow-silver-subtle: rgba(0,0,0,0.2);

    /* ============================================
     * ACCENT COLORS
     * ============================================ */

    /* Links, borders, interactive elements */
    --clr-primary-accent: #6366f1;
    --clr-primary-accent-hover: #818cf8;

    /* Primary buttons */
    --clr-primary-action: #4f46e5;
    --clr-primary-action-hover: #6366f1;

    /* Checkmarks, badges, secondary interactive elements */
    --clr-secondary-accent: #7c3aed;

    /* Reply quotes, pinned items */
    --clr-light-blue-accent: #818cf8;

    /* Sidebar header links */
    --clr-primary-light-blue: #a5b4fc;

    /* ============================================
     * CHAT BUBBLES
     * ============================================ */

    /* Incoming messages (left side) */
    --clr-bubble-left-bg: #2a2a3e;
    --clr-bubble-left-bg-flash: #363650;

    /* Outgoing messages (right side) */
    --clr-bubble-right-bg: #312e81;

    /* Message text */
    --clr-bubble-text: #e2e8f0;

    /* Timestamp text in bubbles */
    --clr-bubble-timestamp-text: #94a3b8;

    /* Author name in group chats */
    --clr-bubble-author-text: #a5b4fc;

    /* ============================================
     * TEXT COLORS
     * ============================================ */

    --clr-text-primary: #cbd5e1;
    --clr-text-secondary: #94a3b8;
    --clr-text-tertiary: #64748b;

    /* ============================================
     * BACKGROUND SURFACES
     * ============================================ */

    /* Off-white surfaces */
    --clr-background-off-white: #1e1e32;

    /* Light gray surfaces */
    --clr-background-light-gray: #12121f;

    /* Blue-gray surface hierarchy (lighter to darker) */
    --clr-background-blue-gray-50: #1e2a35;
    --clr-background-blue-gray-75: #172028;
    --clr-background-blue-gray-100: #1a2730;
    --clr-background-blue-gray-300: #2d3d47;

    /* ============================================
     * STATUS COLORS
     * ============================================ */

    --clr-online: #4ade80;
    --clr-offline: #475569;

    /* ============================================
     * FORM / INPUT COLORS
     * ============================================ */

    --clr-border: #334155;
    --clr-std-gray: #64748b;

    /* ============================================
     * WALLPAPER / CHAT BACKGROUND
     * ============================================ */

    /* Set to none to remove tiled pattern, or url('path') for custom */
    --wallpaper-url: none;
    --wallpaper-brightness: 1;
}

/* ============================================
 * ELEMENT-LEVEL OVERRIDES
 * (for elements that don't respond to CSS variables)
 * ============================================ */

/* Remove the body inset shadow stripe — we handle header color via the panels */
html, body {
    box-shadow: none !important;
    background-color: #111122 !important;
}

/* Remove app container box shadow for seamless look */
#app-container {
    box-shadow: none !important;
}

/* Header bars */
#side-caption-panel {
    background-color: var(--clr-header-stripe-bg) !important;
}
.caption-panel {
    background-color: var(--clr-header-stripe-bg) !important;
}

/* Input fields */
input, textarea {
    background-color: #1e1e32 !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

/* Scrollbar styling for dark theme */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #1a1a2e;
}
::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #475569;
}