/* Chat System Light/Dark Mode Theme Support */

/* Light Mode - Default */
html[data-theme="light"] {
    --discord-sidebar: #f7f8fb;
    --discord-header: #f2f3f7;
    --discord-border: #e0e1e8;
    --discord-text-primary: #0d0f14;
    --discord-text-secondary: #636f85;
    --discord-hover: #e8eaef;
    --discord-input-bg: #f0f1f5;
    --discord-input-bg-focus: #e8eaef;
    --discord-accent: #1f6feb;
    --discord-accent-hover: #1f5fcf;
    --discord-danger: #d1342f;
    --discord-scrollbar: #d0d1d8;
    --discord-scrollbar-hover: #b9bbbe;
}

/* Dark Mode - Discord Default */
html[data-theme="dark"] {
    --discord-sidebar: #2f3136;
    --discord-header: #36393f;
    --discord-border: #202225;
    --discord-text-primary: #ffffff;
    --discord-text-secondary: #b9bbbe;
    --discord-hover: #40444b;
    --discord-input-bg: #40444b;
    --discord-input-bg-focus: #484c52;
    --discord-accent: #5865f2;
    --discord-accent-hover: #4752c4;
    --discord-danger: #ed4245;
    --discord-scrollbar: #202225;
    --discord-scrollbar-hover: #2f3136;
}

/* Light Mode Specific Overrides */
html[data-theme="light"] .chat-overlay {
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .chat-toggle-btn {
    box-shadow: 0 4px 12px rgba(31, 110, 235, 0.3);
}

html[data-theme="light"] .chat-toggle-btn:hover {
    box-shadow: 0 6px 16px rgba(31, 110, 235, 0.4);
}

html[data-theme="light"] .chat-message:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

html[data-theme="light"] .chat-input::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

html[data-theme="light"] .chat-message-username .founder-badge {
    color: #d4a520;
}

html[data-theme="light"] .chat-message-username .vip-badge {
    color: #d9860f;
}

html[data-theme="light"] .chat-message-username .admin-badge {
    color: #c03537;
}

html[data-theme="light"] .chat-message-username .mod-badge {
    color: #1f5fcf;
}

html[data-theme="light"] .chat-toggle-btn .notification-badge {
    border: 2px solid #f7f8fb;
    background-color: #d32f2f;
}

/* Dark Mode Specific Overrides */
html[data-theme="dark"] .chat-overlay {
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .chat-toggle-btn {
    box-shadow: 0 4px 12px rgba(88, 101, 242, 0.4);
}

html[data-theme="dark"] .chat-toggle-btn:hover {
    box-shadow: 0 6px 16px rgba(88, 101, 242, 0.6);
}

html[data-theme="dark"] .chat-message:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .chat-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

html[data-theme="dark"] .chat-toggle-btn .notification-badge {
    border: 2px solid #2f3136;
    background-color: #ff4757;
}

/* Ensure proper contrast in both themes */
html[data-theme="light"] .chat-message-text {
    color: #2c3e50;
}

html[data-theme="dark"] .chat-message-text {
    color: #dcddde;
}

/* Badge styling for both themes */
html[data-theme="light"] .chat-message-username .founder-badge,
html[data-theme="light"] .chat-message-username .vip-badge,
html[data-theme="light"] .chat-message-username .admin-badge,
html[data-theme="light"] .chat-message-username .mod-badge {
    font-weight: 700;
}

html[data-theme="dark"] .chat-message-username .founder-badge,
html[data-theme="dark"] .chat-message-username .vip-badge,
html[data-theme="dark"] .chat-message-username .admin-badge,
html[data-theme="dark"] .chat-message-username .mod-badge {
    font-weight: 700;
}