/* ==================== K-CHAT THEMES ==================== */

/* ==================== DARK THEME (Default - Telegram-like) ==================== */
[data-theme="dark"] {
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --bg-tertiary: #1e2d50;
    --bg-input: #2a2a4a;
    --text-primary: #e0e0e0;
    --text-secondary: #8888aa;
    --text-muted: #6666aa;
    --accent: #5b5fc7;
    --accent-hover: #4a4eb5;
    --accent-light: rgba(91, 95, 199, 0.15);
    --border: #2a2a4a;
    --success: #2ecc71;
    --warning: #f39c12;
    --danger: #e74c3c;
    --msg-own: #5b5fc7;
    --msg-other: #2a2a4a;
    --sidebar-bg: #16213e;
    --header-bg: #16213e;
    --shadow: rgba(0, 0, 0, 0.3);
}

/* ==================== LIGHT THEME (Telegram-like) ==================== */
[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-tertiary: #e8e8e8;
    --bg-input: #ffffff;
    --text-primary: #1a1a2e;
    --text-secondary: #666666;
    --text-muted: #999999;
    --accent: #5b5fc7;
    --accent-hover: #4a4eb5;
    --accent-light: rgba(91, 95, 199, 0.1);
    --border: #e0e0e0;
    --success: #2ecc71;
    --warning: #f39c12;
    --danger: #e74c3c;
    --msg-own: #5b5fc7;
    --msg-other: #e8e8e8;
    --sidebar-bg: #ffffff;
    --header-bg: #ffffff;
    --shadow: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] body {
    background: #f5f5f5;
    color: #1a1a2e;
}

[data-theme="light"] .sidebar {
    border-right: 1px solid #e0e0e0;
}

[data-theme="light"] .chat-item:hover {
    background: #f0f0f0;
}

[data-theme="light"] .chat-item.active {
    background: #e8e8ff;
    border-left-color: #5b5fc7;
}

[data-theme="light"] .msg-content {
    background: #e8e8e8;
    color: #1a1a2e;
}

[data-theme="light"] .message.own .msg-content {
    background: #5b5fc7;
    color: white;
}

[data-theme="light"] .input-area textarea {
    background: #ffffff;
    border-color: #e0e0e0;
    color: #1a1a2e;
}

[data-theme="light"] .chat-header {
    background: #ffffff;
    border-bottom: 1px solid #e0e0e0;
}

[data-theme="light"] .right-panel {
    background: #ffffff;
    border-left: 1px solid #e0e0e0;
}

/* ==================== BLACK THEME (X-Chat style) ==================== */
[data-theme="black"] {
    --bg-primary: #000000;
    --bg-secondary: #0a0a0a;
    --bg-tertiary: #141414;
    --bg-input: #1a1a1a;
    --text-primary: #e7e9ea;
    --text-secondary: #71767b;
    --text-muted: #536471;
    --accent: #1d9bf0;
    --accent-hover: #1a8cd8;
    --accent-light: rgba(29, 155, 240, 0.1);
    --border: #2f3336;
    --success: #00ba7c;
    --warning: #ffd400;
    --danger: #f4212e;
    --msg-own: #1d9bf0;
    --msg-other: #16181c;
    --sidebar-bg: #000000;
    --header-bg: #000000;
    --shadow: rgba(255, 255, 255, 0.05);
}

[data-theme="black"] body {
    background: #000000;
    color: #e7e9ea;
}

[data-theme="black"] .sidebar {
    border-right: 1px solid #2f3336;
}

[data-theme="black"] .chat-item:hover {
    background: #080808;
}

[data-theme="black"] .chat-item.active {
    background: #16181c;
    border-left-color: #1d9bf0;
}

[data-theme="black"] .msg-content {
    background: #16181c;
    color: #e7e9ea;
}

[data-theme="black"] .message.own .msg-content {
    background: #1d9bf0;
    color: #000000;
}

[data-theme="black"] .input-area textarea {
    background: #1a1a1a;
    border-color: #2f3336;
    color: #e7e9ea;
}

[data-theme="black"] .chat-header {
    background: #000000;
    border-bottom: 1px solid #2f3336;
}

[data-theme="black"] .right-panel {
    background: #000000;
    border-left: 1px solid #2f3336;
}

[data-theme="black"] .send-btn {
    background: #1d9bf0;
}

[data-theme="black"] .send-btn:hover {
    background: #1a8cd8;
}

[data-theme="black"] .reaction {
    background: #16181c;
}

[data-theme="black"] .reaction.active {
    background: #1d9bf0;
}

[data-theme="black"] .system-message {
    color: #536471;
}

[data-theme="black"] .system-message .highlight {
    color: #1d9bf0;
}

/* ==================== THEME SWITCHER ==================== */
.theme-switcher {
    display: flex;
    gap: 8px;
    padding: 8px;
    background: var(--bg-tertiary);
    border-radius: 12px;
}

.theme-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
}

.theme-btn:hover {
    transform: scale(1.1);
}

.theme-btn.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-light);
}

.theme-btn.dark {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
}

.theme-btn.light {
    background: linear-gradient(135deg, #ffffff, #f5f5f5);
    border-color: #e0e0e0;
}

.theme-btn.black {
    background: #000000;
    border-color: #2f3336;
}