/* ============================================================
   SyiChat - Multi-Theme Engine
   Modular Theme Tokens & Preset Rules
   Default Theme: Violet Classic (#6C5CE7 & #00CEC9)
   ============================================================ */

/* ------------------------------------------------------------
   1. THEME 1: VIOLET CLASSIC (Default Theme)
   ------------------------------------------------------------ */
:root,
html[data-theme="violet"],
body[data-theme="violet"],
html.theme-violet,
body.theme-violet {
    /* ---- Background Colors ---- */
    --bg-primary: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-tertiary: #1a1a2e;
    --bg-elevated: #1e1e30;
    --bg-hover: #252540;
    --bg-active: #2a2a4a;

    /* ---- Accent Colors (Violet & Cyan Gradient) ---- */
    --accent-primary: #6c5ce7;
    --accent-primary-hover: #7d6ff0;
    --accent-primary-light: rgba(108, 92, 231, 0.15);
    --accent-secondary: #00cec9;
    --accent-secondary-hover: #1de9e4;
    --accent-secondary-light: rgba(0, 206, 201, 0.15);
    --accent-gradient: linear-gradient(135deg, #6c5ce7 0%, #00cec9 100%);
    --accent-gradient-hover: linear-gradient(135deg, #7d6ff0 0%, #1de9e4 100%);
    --accent-gradient-vertical: linear-gradient(180deg, #6c5ce7 0%, #00cec9 100%);

    /* ---- Text Colors ---- */
    --text-accent: #6c5ce7;
    --text-link: #00cec9;

    /* ---- Shadows & Glows ---- */
    --shadow-glow-primary: 0 0 20px rgba(108, 92, 231, 0.3);
    --shadow-glow-secondary: 0 0 20px rgba(0, 206, 201, 0.3);

    /* ---- Landing Page & Modal Ambient Lighting ---- */
    --theme-glow-1: rgba(108, 92, 231, 0.4);
    --theme-glow-2: rgba(0, 206, 201, 0.3);
    --theme-glow-3: rgba(162, 155, 254, 0.25);
}

/* ------------------------------------------------------------
   2. THEME 2: SYI CRIMSON (Logo Flame Theme)
   ------------------------------------------------------------ */
html[data-theme="crimson"],
body[data-theme="crimson"],
html.theme-crimson,
body.theme-crimson {
    /* ---- Background Colors (Deep Obsidian Glass) ---- */
    --bg-primary: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-tertiary: #1a1a2e;
    --bg-elevated: #1e1e30;
    --bg-hover: #261f2c;
    --bg-active: #322338;

    /* ---- Accent Colors (Fiery Crimson & Ruby Rose) ---- */
    --accent-primary: #f60b3c;
    --accent-primary-hover: #ff2a55;
    --accent-primary-light: rgba(246, 11, 60, 0.15);
    --accent-secondary: #ff6b81;
    --accent-secondary-hover: #ff7f95;
    --accent-secondary-light: rgba(255, 107, 129, 0.15);
    --accent-gradient: linear-gradient(135deg, #f60b3c 0%, #ff6b81 100%);
    --accent-gradient-hover: linear-gradient(135deg, #ff2a55 0%, #ff7f95 100%);
    --accent-gradient-vertical: linear-gradient(180deg, #f60b3c 0%, #ff6b81 100%);

    /* ---- Text Colors ---- */
    --text-accent: #f60b3c;
    --text-link: #ff6b81;

    /* ---- Shadows & Glows ---- */
    --shadow-glow-primary: 0 0 20px rgba(246, 11, 60, 0.35);
    --shadow-glow-secondary: 0 0 20px rgba(255, 107, 129, 0.3);

    /* ---- Landing Page & Modal Ambient Lighting ---- */
    --theme-glow-1: rgba(246, 11, 60, 0.32);
    --theme-glow-2: rgba(255, 107, 129, 0.22);
    --theme-glow-3: rgba(255, 71, 87, 0.18);
}

/* ------------------------------------------------------------
   3. THEME 3: MIDNIGHT OLED (Pure Pitch Black for OLED screens)
   ------------------------------------------------------------ */
html[data-theme="midnight"],
body[data-theme="midnight"],
html.theme-midnight,
body.theme-midnight {
    /* ---- Pure Pitch Black Backgrounds ---- */
    --bg-primary: #000000;
    --bg-secondary: #07070b;
    --bg-tertiary: #0e0e14;
    --bg-elevated: #13131c;
    --bg-hover: #181824;
    --bg-active: #1f1f2e;

    /* ---- Glass Effect ---- */
    --glass-bg: rgba(255, 255, 255, 0.025);
    --glass-bg-hover: rgba(255, 255, 255, 0.05);
    --glass-bg-active: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.06);
    --glass-border-hover: rgba(255, 255, 255, 0.12);

    /* ---- Accent Colors (High Contrast Crimson) ---- */
    --accent-primary: #f60b3c;
    --accent-primary-hover: #ff2a55;
    --accent-primary-light: rgba(246, 11, 60, 0.2);
    --accent-secondary: #ff4757;
    --accent-secondary-hover: #ff6b81;
    --accent-secondary-light: rgba(255, 71, 87, 0.2);
    --accent-gradient: linear-gradient(135deg, #f60b3c 0%, #ff4757 100%);
    --accent-gradient-hover: linear-gradient(135deg, #ff2a55 0%, #ff6b81 100%);
    --accent-gradient-vertical: linear-gradient(180deg, #f60b3c 0%, #ff4757 100%);

    /* ---- Text Colors ---- */
    --text-accent: #f60b3c;
    --text-link: #ff4757;

    /* ---- Shadows & Glows ---- */
    --shadow-glow-primary: 0 0 25px rgba(246, 11, 60, 0.45);
    --shadow-glow-secondary: 0 0 25px rgba(255, 71, 87, 0.35);

    /* ---- Landing Page & Modal Ambient Lighting ---- */
    --theme-glow-1: rgba(246, 11, 60, 0.22);
    --theme-glow-2: rgba(255, 71, 87, 0.15);
    --theme-glow-3: rgba(255, 107, 129, 0.1);
}

/* ============================================================
   Component Fine-Tuning for Seamless Theme Transitions
   ============================================================ */

/* ============================================================
   Chat Bubbles Customization per Theme
   ============================================================ */

/* 1. Violet Classic Sent Message Bubble (Solid Gradient & Subtle Glow) */
html[data-theme="violet"] .message.sent .message-bubble,
html.theme-violet .message.sent .message-bubble,
body[data-theme="violet"] .message.sent .message-bubble,
.message.sent .message-bubble {
    background: linear-gradient(135deg, #6c5ce7 0%, #7d6ff0 60%, #5b48e0 100%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.35);
}

/* 2. Syi Crimson Sent Message Bubble: Light Translucent Glass with Solid Red Border */
html[data-theme="crimson"] .message.sent .message-bubble,
html.theme-crimson .message.sent .message-bubble,
body[data-theme="crimson"] .message.sent .message-bubble,
html[data-theme="crimson"] .message-bubble.outgoing,
html.theme-crimson .message-bubble.outgoing,
html[data-theme="crimson"] .chat-bubble.outgoing,
html.theme-crimson .chat-bubble.outgoing,
html[data-theme="crimson"] .msg-bubble-out,
html.theme-crimson .msg-bubble-out {
    background: rgba(246, 11, 60, 0.18) !important;
    border: 1.5px solid #f60b3c !important;
    color: #ffffff !important;
    box-shadow: 0 4px 18px rgba(246, 11, 60, 0.22), inset 0 1px 2px rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

html[data-theme="crimson"] .message.sent .message-bubble .message-text,
html.theme-crimson .message.sent .message-bubble .message-text {
    color: #ffffff !important;
}

html[data-theme="crimson"] .message.sent .bubble-status,
html.theme-crimson .message.sent .bubble-status {
    color: rgba(255, 255, 255, 0.8) !important;
}

html[data-theme="crimson"] .message.sent .bubble-status.read,
html.theme-crimson .message.sent .bubble-status.read {
    color: #ff6b81 !important;
}

html[data-theme="crimson"] .message.sent .message-bubble.has-audio-bubble,
html.theme-crimson .message.sent .message-bubble.has-audio-bubble {
    background: rgba(246, 11, 60, 0.18) !important;
    border: 1.5px solid #f60b3c !important;
}

/* 3. Midnight OLED Sent Message Bubble: Soft Dark Translucent with Solid Red Border */
html[data-theme="midnight"] .message.sent .message-bubble,
html.theme-midnight .message.sent .message-bubble,
body[data-theme="midnight"] .message.sent .message-bubble,
html[data-theme="midnight"] .message-bubble.outgoing,
html.theme-midnight .message-bubble.outgoing,
html[data-theme="midnight"] .chat-bubble.outgoing,
html.theme-midnight .chat-bubble.outgoing,
html[data-theme="midnight"] .msg-bubble-out,
html.theme-midnight .msg-bubble-out {
    background: rgba(246, 11, 60, 0.15) !important;
    border: 1.5px solid #f60b3c !important;
    color: #ffffff !important;
    box-shadow: 0 4px 20px rgba(246, 11, 60, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

html[data-theme="midnight"] .message.sent .message-bubble .message-text,
html.theme-midnight .message.sent .message-bubble .message-text {
    color: #ffffff !important;
}

html[data-theme="midnight"] .message.sent .bubble-status,
html.theme-midnight .message.sent .bubble-status {
    color: rgba(255, 255, 255, 0.8) !important;
}

html[data-theme="midnight"] .message.sent .bubble-status.read,
html.theme-midnight .message.sent .bubble-status.read {
    color: #ff4757 !important;
}

html[data-theme="midnight"] .message.sent .message-bubble.has-audio-bubble,
html.theme-midnight .message.sent .message-bubble.has-audio-bubble {
    background: rgba(246, 11, 60, 0.15) !important;
    border: 1.5px solid #f60b3c !important;
}

/* Settings Theme Option Cards */
.theme-preview-box.crimson {
    background: linear-gradient(135deg, #0a0a0f 0%, #1e1118 50%, #f60b3c 100%);
    border: 1px solid rgba(246, 11, 60, 0.3);
}

.theme-preview-box.violet {
    background: linear-gradient(135deg, #0a0a0f 0%, #17142b 50%, #6c5ce7 100%);
    border: 1px solid rgba(108, 92, 231, 0.3);
}

.theme-preview-box.midnight {
    background: linear-gradient(135deg, #000000 0%, #0a0a10 60%, #f60b3c 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Active Theme Card Glowing Highlight */
.theme-card-option.active {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 20px var(--accent-primary-light, rgba(246, 11, 60, 0.25)) !important;
}

/* Sidebar Active Items & Collapsed Squares */
.sidebar .nav-item.active {
    background: var(--accent-primary-light) !important;
    color: var(--accent-primary) !important;
}

.sidebar .nav-item.active .nav-item-icon {
    background: var(--accent-gradient) !important;
    box-shadow: var(--shadow-glow-primary) !important;
}

.sidebar.collapsed .nav-item.active,
html.preload-sidebar-collapsed .sidebar .nav-item.active {
    background: var(--accent-gradient) !important;
    box-shadow: var(--shadow-glow-primary) !important;
}

.sidebar-collapse-btn:hover {
    border-color: var(--accent-primary-light) !important;
}

.sidebar-resizer:hover .sidebar-resizer-line,
.sidebar-resizer.active .sidebar-resizer-line,
body.resizing-sidebar .sidebar-resizer .sidebar-resizer-line {
    background: var(--accent-primary) !important;
    box-shadow: var(--shadow-glow-primary) !important;
}

/* Buttons & Badges */
.btn-primary {
    background: var(--accent-gradient) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.btn-primary:hover {
    background: var(--accent-gradient-hover) !important;
    box-shadow: var(--shadow-glow-primary) !important;
}

.nav-item-badge,
.badge-accent {
    background: var(--accent-gradient) !important;
    color: #ffffff !important;
}

/* Link chip preview */
.msg-link-chip {
    border-color: var(--accent-primary-light) !important;
}

.msg-link-chip:hover {
    border-color: var(--accent-primary) !important;
    background: var(--accent-primary-light) !important;
}

/* ============================================================
   Dashboard Quick Theme Switcher
   ============================================================ */
.dashboard-theme-switcher {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    padding: 3px;
    gap: 3px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.06), 0 4px 14px rgba(0, 0, 0, 0.25);
    position: relative;
    user-select: none;
}

.theme-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    outline: none;
}

.theme-pill-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.theme-pill-btn .theme-pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.theme-pill-btn.active {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), 0 2px 8px rgba(0, 0, 0, 0.25);
}

.theme-pill-btn.active .theme-pill-dot {
    transform: scale(1.25);
}

.theme-pill-btn.crimson.active {
    background: rgba(246, 11, 60, 0.18);
    border-color: rgba(246, 11, 60, 0.4);
    box-shadow: 0 0 12px rgba(246, 11, 60, 0.35);
}

.theme-pill-btn.violet.active {
    background: rgba(108, 92, 231, 0.22);
    border-color: rgba(108, 92, 231, 0.45);
    box-shadow: 0 0 12px rgba(108, 92, 231, 0.35);
}

.theme-pill-btn.midnight.active {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}

/* Crimson Theme Stat Icon Harmonization */
html[data-theme="crimson"] .stat-card-icon.purple,
html.theme-crimson .stat-card-icon.purple {
    background: linear-gradient(135deg, rgba(246, 11, 60, 0.22), rgba(246, 11, 60, 0.06)) !important;
    color: #ff6b81 !important;
    border-color: rgba(246, 11, 60, 0.35) !important;
    box-shadow: 0 4px 15px rgba(246, 11, 60, 0.2) !important;
}

html[data-theme="crimson"] .stat-card-icon.cyan,
html.theme-crimson .stat-card-icon.cyan {
    background: linear-gradient(135deg, rgba(255, 107, 129, 0.22), rgba(255, 107, 129, 0.06)) !important;
    color: #ffa4b6 !important;
    border-color: rgba(255, 107, 129, 0.35) !important;
    box-shadow: 0 4px 15px rgba(255, 107, 129, 0.2) !important;
}

/* Midnight Theme Stat Icon Harmonization */
html[data-theme="midnight"] .stat-card-icon.purple,
html.theme-midnight .stat-card-icon.purple {
    background: linear-gradient(135deg, rgba(246, 11, 60, 0.25), rgba(246, 11, 60, 0.08)) !important;
    color: #ff6b81 !important;
    border-color: rgba(246, 11, 60, 0.4) !important;
    box-shadow: 0 4px 15px rgba(246, 11, 60, 0.25) !important;
}

html[data-theme="midnight"] .stat-card-icon.cyan,
html.theme-midnight .stat-card-icon.cyan {
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.25), rgba(255, 71, 87, 0.08)) !important;
    color: #ff4757 !important;
    border-color: rgba(255, 71, 87, 0.4) !important;
    box-shadow: 0 4px 15px rgba(255, 71, 87, 0.25) !important;
}