/* ===== DARK THEME ===== */

body.dark {
    background: #0e0e10;
    color: white;
}

body.dark .topbar {
    background: #18181b;
    border-bottom: 2px solid var(--twitch-purple);
}

body.dark .status.online {
    background: transparent;
    color: #fff;
    border: 2px solid var(--twitch-purple);
}

body.dark .status.offline {
    background: transparent;
    color: #fff;
    border: 2px solid var(--twitch-purple);
}

body.dark .chat-wrapper {
    background: #18181b;
}

body.dark .chat-container {
    background: #0e0e10;
    color: white;
}

body.dark .active-users .tooltip {
    background: #ffffff;
    color: #111;
}

body.dark .viewer-count .tooltip {
    background: #ffffff;
    color: #111;
}

body.dark .bot-container .tooltip {
    background: #ffffff;
    color: #111;
}

body.dark .tooltip {
    background: #ffffff;
    color: #111;
}

/* ===== LIGHT THEME ===== */

body.light {
    background: #f7f7f8;
    color: #111;
}

body.light .topbar {
    background: white;
    border-bottom: 2px solid var(--twitch-purple);
}

body.light .theme-toggle {
    background: #fff;
}

body.light .theme-toggle:hover {
    background: rgba(119, 44, 232, 0.15);
}

body.light .chat-wrapper {
    background: #ffffff;
}

body.light .chat-container {
    background: #f3f3f5;
    color: #111;
}

body.light .chat-user:hover {
    background: rgba(0, 0, 0, 0.15);
}

body.light .new-msg-badge {
    color: #000;
}

body.light .active-users-icon {
    width: 20px;
    height: 20px;
    fill: #000 !important;
}

body.light .viewer-icon {
    width: 20px;
    height: 20px;
    fill: #000 !important;
}

body.light .bot-btn {
    background: transparent;
    color: #000 !important;
}

body.light .player-btn {
    background: transparent;
    color: #000 !important;
}

body.light .slider {
    background: #EDEBEB;
}

body.light .slider::after {
    color: #808080;
}

body.light .history-btn {
    background: transparent;
    color: #000 !important;
}

body.light .history-btn:hover {
    background: rgba(119, 44, 232, 0.15);
}

body.light .history-dropdown {
    background: white;
    color: #111;
}

body.light .history-icon {
    width: 20px;
    height: 20px;
}

body.light .userlist-btn {
    background: transparent;
    color: #000 !important;
}

body.light .userlist-btn:hover {
    background: rgba(119, 44, 232, 0.15);
}

body.light .user-dropdown {
    background: white;
    color: #111;
}