/**
 * Dark Mode Styles for Chat Application
 * Comprehensive dark theme for all chat components and modals
 */

/* ===== Dark Mode Root Variables ===== */
body.dark-mode {
    --dm-bg-primary: #1a1a1a;
    --dm-bg-secondary: #2d2d2d;
    --dm-bg-tertiary: #3a3a3a;
    --dm-bg-hover: #404040;
    --dm-bg-active: #4a4a4a;

    --dm-text-primary: #e5e5e5;
    --dm-text-secondary: #b0b0b0;
    --dm-text-tertiary: #808080;

    --dm-border: #404040;
    --dm-border-light: #353535;

    --dm-blue-primary: #3b82f6;
    --dm-blue-secondary: #2563eb;
    --dm-blue-tertiary: #1e40af;

    --dm-message-own: #2563eb;
    --dm-message-other: #2d2d2d;

    --dm-overlay: rgba(0, 0, 0, 0.85);
}

/* ===== Base Styles ===== */
body.dark-mode {
    background-color: var(--dm-bg-primary);
    color: var(--dm-text-primary);
}

body.dark-mode .chat-container {
    background: var(--dm-bg-primary);
}

/* ===== Sidebar ===== */
body.dark-mode .sidebar {
    background: var(--dm-blue-secondary);
    border-right-color: var(--dm-border);
}

body.dark-mode .sidebar-header {
    background: var(--dm-blue-tertiary);
}

body.dark-mode .sidebar-btn {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .sidebar-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
}

body.dark-mode .search-container {
    background: var(--dm-blue-secondary);
}

body.dark-mode .search-input {
    background: rgba(255, 255, 255, 0.05);
    color: white;
}

body.dark-mode .search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

body.dark-mode .search-clear-btn {
    background: rgba(255, 255, 255, 0.15);
}

body.dark-mode .search-clear-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ===== Tabs ===== */
body.dark-mode .tabs {
    background: var(--dm-blue-secondary);
}

body.dark-mode .tab {
    color: rgba(255, 255, 255, 0.6);
}

body.dark-mode .tab.active {
    color: white;
}

body.dark-mode .tab-unread-badge {
    background: #dc2626;
}

body.dark-mode .tab.active .tab-unread-badge {
    background: #ef4444;
}

/* ===== Conversation List ===== */
body.dark-mode .conversation-list {
    background: var(--dm-bg-secondary);
}

body.dark-mode .conversation-item {
    border-bottom-color: var(--dm-border-light);
}

body.dark-mode .conversation-item:hover {
    background-color: var(--dm-bg-hover);
}

body.dark-mode .conversation-item.active {
    background-color: var(--dm-bg-active) !important;
}

body.dark-mode .conversation-item.pinned {
    background-color: var(--dm-bg-tertiary);
    border-left-color: var(--dm-border);
}

body.dark-mode .conversation-name {
    color: var(--dm-text-primary);
}

body.dark-mode .conversation-preview {
    color: var(--dm-text-secondary);
}

body.dark-mode .conversation-preview-sender {
    color: var(--dm-blue-primary);
}

body.dark-mode .conversation-time {
    color: var(--dm-text-tertiary);
}

body.dark-mode .unread-badge {
    background: #ef4444;
    color: white;
}

body.dark-mode .pin-indicator {
    color: var(--dm-text-tertiary);
}

/* ===== Chat Main Area ===== */
body.dark-mode .chat-main {
    background: var(--dm-bg-primary);
}

body.dark-mode .empty-state {
    color: var(--dm-text-secondary);
}

body.dark-mode .empty-state h3 {
    color: var(--dm-text-primary);
}

/* ===== Chat Header ===== */
body.dark-mode .chat-header {
    background: var(--dm-bg-secondary);
    border-bottom-color: var(--dm-border);
}

body.dark-mode .chat-header-avatar {
    background: var(--dm-blue-primary);
}

body.dark-mode .chat-header h3 {
    color: var(--dm-text-primary);
}

body.dark-mode .chat-header p {
    color: var(--dm-text-secondary);
}

body.dark-mode .chat-header-info:hover {
    background: rgba(255, 255, 255, 0.1);
}

body.dark-mode .action-btn,
body.dark-mode .conversation-search-toggle {
    background: var(--dm-bg-tertiary);
    color: var(--dm-text-primary);
    border-color: var(--dm-border);
}

body.dark-mode .action-btn:hover,
body.dark-mode .conversation-search-toggle:hover {
    background: var(--dm-bg-hover);
}

body.dark-mode .action-btn .material-symbols-outlined,
body.dark-mode .conversation-search-toggle .material-symbols-outlined {
    color: var(--dm-text-primary);
}

/* ===== Chat Header Search ===== */
body.dark-mode .chat-header-search {
    background: var(--dm-bg-secondary);
}

body.dark-mode .conversation-search-input {
    background: var(--dm-bg-tertiary);
    color: var(--dm-text-primary);
    border-color: var(--dm-border);
}

body.dark-mode .conversation-search-input::placeholder {
    color: var(--dm-text-tertiary);
}

body.dark-mode .search-counter {
    color: var(--dm-text-secondary);
}

body.dark-mode .search-nav-btn,
body.dark-mode .conversation-search-close {
    background: var(--dm-bg-tertiary);
}

body.dark-mode .search-nav-btn:hover,
body.dark-mode .conversation-search-close:hover {
    background: var(--dm-bg-hover);
}

/* ===== Conversation Search Results ===== */
body.dark-mode .conversation-search-results {
    background: var(--dm-bg-secondary);
    border-bottom-color: var(--dm-border);
}

body.dark-mode .conversation-search-header {
    background: var(--dm-bg-tertiary);
    border-bottom-color: var(--dm-border);
    color: var(--dm-text-tertiary);
}

body.dark-mode .conversation-search-empty {
    color: var(--dm-text-tertiary);
}

body.dark-mode .conversation-search-result {
    border-bottom-color: var(--dm-border-light);
}

body.dark-mode .conversation-search-result:hover {
    background: var(--dm-bg-hover);
}

body.dark-mode .conversation-search-result.active {
    background: rgba(59, 130, 246, 0.15);
    border-left-color: var(--dm-blue-primary);
}

body.dark-mode .search-result-avatar {
    background: var(--dm-bg-tertiary);
}

body.dark-mode .search-result-avatar .avatar-text {
    color: var(--dm-text-secondary);
}

body.dark-mode .search-result-username {
    color: var(--dm-text-primary);
}

body.dark-mode .search-result-text {
    color: var(--dm-text-secondary);
}

body.dark-mode .search-result-text mark {
    background: rgba(251, 191, 36, 0.3);
    color: #fbbf24;
}

/* Legacy search result items (if used elsewhere) */
body.dark-mode .search-result-item {
    background: var(--dm-bg-tertiary);
    border-bottom-color: var(--dm-border-light);
}

body.dark-mode .search-result-item:hover {
    background: var(--dm-bg-hover);
}

body.dark-mode .search-result-item.active {
    background: var(--dm-bg-active);
    border-left-color: var(--dm-blue-primary);
}

body.dark-mode .search-result-sender {
    color: var(--dm-text-primary);
}

body.dark-mode .search-result-content {
    color: var(--dm-text-secondary);
}

body.dark-mode .search-result-time {
    color: var(--dm-text-tertiary);
}

body.dark-mode .search-match {
    background: rgba(59, 130, 246, 0.3);
    color: var(--dm-text-primary);
}

/* ===== Pinned Messages ===== */
body.dark-mode .pinned-messages-section {
    background: var(--dm-bg-secondary);
    border-bottom-color: var(--dm-border);
}

body.dark-mode .pinned-messages-content {
    background: var(--dm-bg-secondary);
}

body.dark-mode .pinned-message-item:hover {
    background: var(--dm-bg-hover);
}

body.dark-mode .pinned-message-user {
    color: var(--dm-text-primary);
}

body.dark-mode .pinned-message-text {
    color: var(--dm-text-secondary);
}

body.dark-mode .pinned-content-text {
    color: var(--dm-text-primary);
}

body.dark-mode .pinned-icon .material-symbols-outlined {
    color: #f59e0b;
}

/* ===== Messages Container ===== */
body.dark-mode .messages-container {
    background: var(--dm-bg-primary);
}

body.dark-mode .message-date-separator {
    color: var(--dm-text-tertiary);
}

body.dark-mode .message-date-separator::before,
body.dark-mode .message-date-separator::after {
    background: var(--dm-border);
}

/* ===== Messages ===== */
body.dark-mode .message {
    color: var(--dm-text-primary);
}

body.dark-mode .message-content {
    background: var(--dm-message-other);
    color: var(--dm-text-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

body.dark-mode .message.sent .message-content {
    background: var(--dm-message-own);
    color: white;
}

/* Message highlight when context menu is open */
body.dark-mode .message-wrapper.context-menu-active {
    background-color: rgba(59, 130, 246, 0.15);
}

body.dark-mode .message-wrapper.context-menu-active .message-content {
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

body.dark-mode .message-sender {
    color: var(--dm-blue-primary);
}

body.dark-mode .message-user-name {
    color: #60a5fa;
}

body.dark-mode .message-time {
    color: var(--dm-text-tertiary);
}

body.dark-mode .message-status .material-symbols-outlined {
    color: var(--dm-text-tertiary);
}

body.dark-mode .edited-indicator {
    color: var(--dm-text-tertiary);
}

/* ===== Message Links ===== */
body.dark-mode .message-link {
    color: #3b82f6;
    text-decoration: underline;
}

body.dark-mode .message-link:hover {
    color: #2563eb;
}

body.dark-mode .message-link:visited {
    color: #7c3aed;
}

body.dark-mode .message.sent .message-link {
    color: #fef3c7;
    text-decoration: underline;
}

body.dark-mode .message.sent .message-link:hover {
    color: #fde68a;
}

body.dark-mode .message.sent .message-link:visited {
    color: #fcd34d;
}

/* ===== Message Mentions ===== */
body.dark-mode .message-mention {
    color: #1e40af;
    background-color: rgba(59, 130, 246, 0.2);
}

body.dark-mode .message.sent .message-mention {
    color: #fef3c7;
    background-color: rgba(255, 255, 255, 0.25);
}

/* ===== Mention Indicator ===== */
body.dark-mode .message-mention-indicator {
    background: rgba(251, 191, 36, 0.15);
    border-left-color: #fbbf24;
}

body.dark-mode .message.sent .message-mention-indicator {
    background: rgba(251, 191, 36, 0.2);
    border-left-color: #f59e0b;
}

body.dark-mode .mention-icon {
    color: #fbbf24;
}

body.dark-mode .mention-text {
    color: #fbbf24;
}

body.dark-mode .mention-jump-btn {
    background: rgba(251, 191, 36, 0.3);
    color: #fbbf24;
}

body.dark-mode .mention-jump-btn:hover {
    background: rgba(251, 191, 36, 0.4);
}

/* ===== Message Reply Indicator ===== */
body.dark-mode .message-reply {
    background: rgba(59, 130, 246, 0.15);
    border-left-color: var(--dm-blue-primary);
}

body.dark-mode .message.sent .message-reply {
    background: rgba(255, 255, 255, 0.15);
    border-left-color: rgba(255, 255, 255, 0.6);
}

body.dark-mode .reply-author {
    color: var(--dm-text-secondary);
}

body.dark-mode .reply-content-body {
    color: var(--dm-text-secondary);
}

body.dark-mode .reply-content-body .message-text {
    color: var(--dm-text-secondary);
}

body.dark-mode .reply-indicator {
    background: rgba(255, 255, 255, 0.1);
    border-left-color: var(--dm-blue-primary);
}

body.dark-mode .message.own .reply-indicator {
    background: rgba(255, 255, 255, 0.15);
}

body.dark-mode .reply-sender {
    color: var(--dm-blue-primary);
}

body.dark-mode .reply-text {
    color: var(--dm-text-secondary);
}

/* ===== Message Reactions ===== */
body.dark-mode .message-reactions-container {
    background: transparent;
}

body.dark-mode .message-reaction {
    background: var(--dm-bg-tertiary);
    border-color: var(--dm-border);
}

body.dark-mode .message-reaction:hover {
    background: var(--dm-bg-hover);
}

body.dark-mode .message-reaction.reacted {
    background: rgba(59, 130, 246, 0.2);
    border-color: var(--dm-blue-primary);
}

body.dark-mode .add-reaction-btn {
    background: var(--dm-bg-tertiary);
    border-color: var(--dm-border);
}

body.dark-mode .add-reaction-btn:hover {
    background: var(--dm-bg-hover);
}

/* ===== Reaction Button ===== */
body.dark-mode .reaction-button {
    background: var(--dm-bg-tertiary);
    border-color: var(--dm-border);
}

body.dark-mode .reaction-button .material-symbols-outlined {
    color: var(--dm-text-secondary);
}

body.dark-mode .reaction-button:hover {
    background: var(--dm-bg-hover);
    border-color: var(--dm-text-tertiary);
}

body.dark-mode .reaction-button:hover .material-symbols-outlined {
    color: var(--dm-text-primary);
}

body.dark-mode .reaction-button.active .material-symbols-outlined {
    color: #ef4444;
}

body.dark-mode .reaction-button.active:hover {
    background: rgba(220, 38, 38, 0.3);
    border-color: rgba(220, 38, 38, 0.5);
}

/* ===== Reaction Picker ===== */
body.dark-mode .reaction-picker {
    background: var(--dm-bg-secondary);
    border-color: var(--dm-border);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

body.dark-mode .reaction-picker-item {
    background: transparent;
}

body.dark-mode .reaction-picker-item:hover {
    background: var(--dm-bg-hover);
}

/* ===== Message Images ===== */
body.dark-mode .message-image-grid {
    border-color: var(--dm-border);
}

/* ===== Message Files ===== */
body.dark-mode .message-file {
    background: var(--dm-bg-tertiary);
    border-color: var(--dm-border);
}

body.dark-mode .message-file:hover {
    background: var(--dm-bg-hover);
}

body.dark-mode .message-file-icon {
    background: var(--dm-bg-secondary);
}

body.dark-mode .message-file-name {
    color: var(--dm-text-primary);
}

body.dark-mode .message-file-size {
    color: var(--dm-text-tertiary);
}

/* ===== Message Action Buttons ===== */
body.dark-mode .message-action-btn {
    background: var(--dm-bg-secondary);
    color: var(--dm-text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

body.dark-mode .message-action-btn:hover {
    background: var(--dm-bg-hover);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

body.dark-mode .message-action-btn .action-icon {
    color: var(--dm-text-secondary);
}

/* Specific hover colors for each action in dark mode */
body.dark-mode .message-action-btn[data-action="reply"]:hover {
    background: rgba(37, 99, 235, 0.2);
}

body.dark-mode .message-action-btn[data-action="reply"]:hover .action-icon {
    color: var(--dm-blue-primary);
}

body.dark-mode .message-action-btn[data-action="edit"]:hover {
    background: rgba(217, 119, 6, 0.2);
}

body.dark-mode .message-action-btn[data-action="edit"]:hover .action-icon {
    color: #f59e0b;
}

body.dark-mode .message-action-btn[data-action="forward"]:hover {
    background: rgba(139, 92, 246, 0.2);
}

body.dark-mode .message-action-btn[data-action="forward"]:hover .action-icon {
    color: #a78bfa;
}

body.dark-mode .message-action-btn[data-action="delete"]:hover {
    background: rgba(239, 68, 68, 0.2);
}

body.dark-mode .message-action-btn[data-action="delete"]:hover .action-icon {
    color: #ef4444;
}

/* ===== Jump Buttons ===== */
body.dark-mode .jump-to-mention-btn,
body.dark-mode .jump-to-read-btn,
body.dark-mode .scroll-to-bottom-btn {
    background: var(--dm-bg-secondary);
    color: var(--dm-text-primary);
    border-color: var(--dm-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

body.dark-mode .jump-to-mention-btn:hover,
body.dark-mode .jump-to-read-btn:hover,
body.dark-mode .scroll-to-bottom-btn:hover {
    background: var(--dm-bg-hover);
}

/* ===== Message Action Preview ===== */
body.dark-mode .message-action-preview {
    background: var(--dm-bg-secondary);
    border-top-color: var(--dm-border);
}

body.dark-mode .action-preview-title {
    color: var(--dm-blue-primary);
}

body.dark-mode .action-preview-text {
    color: var(--dm-text-secondary);
}

body.dark-mode .action-preview-close {
    color: var(--dm-text-secondary);
}

body.dark-mode .action-preview-close:hover {
    color: var(--dm-text-primary);
    background: var(--dm-bg-hover);
}

/* ===== Chat Input ===== */
body.dark-mode .chat-input-container {
    background: var(--dm-bg-secondary);
    border-top-color: var(--dm-border);
}

body.dark-mode .chat-input-wrapper {
    background: var(--dm-bg-tertiary);
    border-color: var(--dm-border);
}

body.dark-mode .chat-input {
    background: var(--dm-bg-tertiary);
    color: var(--dm-text-primary);
    border-color: var(--dm-border);
}

body.dark-mode .chat-input::placeholder {
    color: var(--dm-text-tertiary);
}

body.dark-mode .chat-input:focus {
    border-color: var(--dm-blue-primary);
    background: var(--dm-bg-hover);
}

body.dark-mode .input-btn {
    color: var(--dm-text-secondary);
}

body.dark-mode .input-btn:hover {
    color: var(--dm-text-primary);
    background: var(--dm-bg-hover);
}

body.dark-mode .send-btn {
    background: var(--dm-blue-primary);
    color: white;
}

body.dark-mode .send-btn:hover {
    background: var(--dm-blue-secondary);
}

/* ===== Image Preview ===== */
body.dark-mode .image-preview-container,
body.dark-mode .file-preview-container {
    background: var(--dm-bg-secondary);
    border-top-color: var(--dm-border);
}

body.dark-mode .image-preview-header,
body.dark-mode .file-preview-header {
    color: var(--dm-text-primary);
}

body.dark-mode .image-preview-count,
body.dark-mode .file-preview-count {
    color: var(--dm-text-secondary);
}

body.dark-mode .image-preview-clear,
body.dark-mode .file-preview-clear {
    color: var(--dm-text-secondary);
}

body.dark-mode .image-preview-clear:hover,
body.dark-mode .file-preview-clear:hover {
    color: var(--dm-text-primary);
}

body.dark-mode .image-preview-item,
body.dark-mode .file-preview-item {
    background: var(--dm-bg-tertiary);
    border-color: var(--dm-border);
}

body.dark-mode .file-preview-info {
    color: var(--dm-text-primary);
}

body.dark-mode .file-preview-name {
    color: var(--dm-text-primary);
}

body.dark-mode .file-preview-size {
    color: var(--dm-text-tertiary);
}

/* ===== Mention Dropdown ===== */
body.dark-mode .mention-dropdown {
    background: var(--dm-bg-secondary);
    border-color: var(--dm-border);
    box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.5);
}

body.dark-mode .mention-dropdown-header {
    background: var(--dm-bg-tertiary);
    border-bottom-color: var(--dm-border);
    color: var(--dm-text-secondary);
}

body.dark-mode .mention-item {
    border-bottom-color: var(--dm-border-light);
}

body.dark-mode .mention-item:hover,
body.dark-mode .mention-item.selected {
    background: var(--dm-bg-hover);
}

body.dark-mode .mention-name {
    color: var(--dm-text-primary);
}

body.dark-mode .mention-username {
    color: var(--dm-text-tertiary);
}

/* ===== Mention Tag (Inline mention in messages) ===== */
body.dark-mode .mention-tag {
    background: rgba(59, 130, 246, 0.2);
    color: #1e40af;
}

body.dark-mode .mention-tag:hover {
    background: rgba(59, 130, 246, 0.3);
    color: #1e3a8a;
}

body.dark-mode .message.sent .mention-tag {
    background: rgba(255, 255, 255, 0.25);
    color: #fef3c7;
}

body.dark-mode .message.sent .mention-tag:hover {
    background: rgba(255, 255, 255, 0.35);
    color: #fde68a;
}

/* ===== Emoji Picker ===== */
body.dark-mode .emoji-picker {
    background: var(--dm-bg-secondary);
    border-color: var(--dm-border);
    box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.5);
}

body.dark-mode .emoji-picker-header {
    background: var(--dm-bg-tertiary);
    border-bottom-color: var(--dm-border);
    color: var(--dm-text-secondary);
}

body.dark-mode .emoji-item:hover {
    background: var(--dm-bg-hover);
}

/* ===== Modal Overlay ===== */
body.dark-mode .modal-overlay {
    background: var(--dm-overlay);
}

/* ===== Forward Modal ===== */
body.dark-mode .forward-modal {
    background: var(--dm-bg-secondary);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
}

body.dark-mode .forward-modal-header {
    border-bottom-color: var(--dm-border);
}

body.dark-mode .forward-modal-header h3 {
    color: var(--dm-text-primary);
}

body.dark-mode .modal-close-btn {
    color: var(--dm-text-secondary);
}

body.dark-mode .modal-close-btn:hover {
    color: var(--dm-text-primary);
    background: var(--dm-bg-hover);
}

body.dark-mode .forward-search-input {
    background: var(--dm-bg-tertiary);
    color: var(--dm-text-primary);
    border-color: var(--dm-border);
}

body.dark-mode .forward-search-input::placeholder {
    color: var(--dm-text-tertiary);
}

body.dark-mode .forward-tabs {
    border-bottom-color: var(--dm-border);
}

body.dark-mode .forward-tab {
    color: var(--dm-text-secondary);
    border-bottom-color: transparent;
}

body.dark-mode .forward-tab:hover {
    color: var(--dm-text-primary);
    background: var(--dm-bg-hover);
}

body.dark-mode .forward-tab.active {
    color: var(--dm-blue-primary);
    border-bottom-color: var(--dm-blue-primary);
}

body.dark-mode .forward-selected-section {
    background: var(--dm-bg-tertiary);
    border-bottom-color: var(--dm-border);
}

body.dark-mode .forward-selected-header {
    color: var(--dm-text-primary);
}

body.dark-mode .forward-clear-btn {
    color: var(--dm-blue-primary);
}

body.dark-mode .forward-clear-btn:hover {
    color: var(--dm-blue-secondary);
}

body.dark-mode .forward-selected-item {
    background: var(--dm-bg-secondary);
    border-color: var(--dm-border);
}

body.dark-mode .forward-selected-name {
    color: var(--dm-text-primary);
}

body.dark-mode .forward-item {
    border-bottom-color: var(--dm-border-light);
}

body.dark-mode .forward-item:hover {
    background: var(--dm-bg-hover);
}

body.dark-mode .forward-item-name {
    color: var(--dm-text-primary);
}

body.dark-mode .forward-item-preview {
    color: var(--dm-text-secondary);
}

body.dark-mode .forward-modal-footer {
    background: var(--dm-bg-tertiary);
    border-top-color: var(--dm-border);
}

body.dark-mode .forward-btn-cancel {
    background: var(--dm-bg-secondary);
    color: var(--dm-text-primary);
    border-color: var(--dm-border);
}

body.dark-mode .forward-btn-cancel:hover {
    background: var(--dm-bg-hover);
}

body.dark-mode .forward-btn-primary {
    background: var(--dm-blue-primary);
    color: white;
}

body.dark-mode .forward-btn-primary:hover:not(:disabled) {
    background: var(--dm-blue-secondary);
}

body.dark-mode .forward-btn-primary:disabled {
    background: var(--dm-bg-tertiary);
    color: var(--dm-text-tertiary);
}

/* ===== Reactions Modal ===== */
body.dark-mode .reactions-modal {
    background: var(--dm-bg-secondary);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
}

body.dark-mode .reactions-modal-header {
    border-bottom-color: var(--dm-border);
}

body.dark-mode .reactions-modal-header h3 {
    color: var(--dm-text-primary);
}

body.dark-mode .reactions-sidebar {
    background: var(--dm-bg-tertiary);
    border-right-color: var(--dm-border);
}

body.dark-mode .reactions-tab {
    color: var(--dm-text-secondary);
}

body.dark-mode .reactions-tab:hover {
    background: var(--dm-bg-hover);
}

body.dark-mode .reactions-tab.active {
    background: var(--dm-bg-active);
    color: var(--dm-text-primary);
    border-left-color: var(--dm-blue-primary);
}

body.dark-mode .reactions-tab-count {
    background: var(--dm-bg-secondary);
    color: var(--dm-text-secondary);
}

body.dark-mode .reactions-main {
    background: var(--dm-bg-secondary);
}

body.dark-mode .reactions-user-item {
    border-bottom-color: var(--dm-border-light);
}

body.dark-mode .reactions-user-item:hover {
    background: var(--dm-bg-hover);
}

body.dark-mode .reactions-user-name {
    color: var(--dm-text-primary);
}

body.dark-mode .reactions-loading,
body.dark-mode .reactions-empty {
    color: var(--dm-text-tertiary);
}

body.dark-mode .reactions-loading .material-symbols-outlined,
body.dark-mode .reactions-empty .material-symbols-outlined {
    color: var(--dm-text-tertiary);
}

/* ===== Settings Modal ===== */
body.dark-mode .settings-modal {
    background: var(--dm-bg-secondary);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
}

body.dark-mode .settings-modal-header {
    border-bottom-color: var(--dm-border);
}

body.dark-mode .settings-modal-header h3 {
    color: var(--dm-text-primary);
}

body.dark-mode .settings-section {
    border-bottom-color: var(--dm-border);
}

body.dark-mode .settings-section-header .material-symbols-outlined {
    color: var(--dm-blue-primary);
}

body.dark-mode .settings-section-header h4 {
    color: var(--dm-text-primary);
}

body.dark-mode .settings-item {
    background: var(--dm-bg-tertiary);
}

body.dark-mode .settings-item:hover {
    background: var(--dm-bg-hover);
}

body.dark-mode .settings-item-label {
    color: var(--dm-text-primary);
}

body.dark-mode .settings-item-description {
    color: var(--dm-text-secondary);
}

/* ===== Conversation Context Menu ===== */
body.dark-mode .conversation-context-menu {
    background: var(--dm-bg-secondary);
    border-color: var(--dm-border);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

body.dark-mode .context-menu-item {
    color: var(--dm-text-primary);
}

body.dark-mode .context-menu-item:hover {
    background: var(--dm-bg-hover);
}

body.dark-mode .context-menu-item .material-symbols-outlined {
    color: var(--dm-text-secondary);
}

body.dark-mode .context-menu-divider {
    background: var(--dm-border);
}

/* ===== Message Context Menu ===== */
body.dark-mode .message-context-menu {
    background: var(--dm-bg-secondary);
    border-color: var(--dm-border);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

body.dark-mode .context-menu-delete:hover {
    background-color: rgba(220, 38, 38, 0.2) !important;
}

/* Message Context Menu Reactions */
body.dark-mode .context-menu-reaction-item:hover {
    background: var(--dm-bg-hover);
}

/* Message Selection Mode */
body.dark-mode .message-selection-toolbar {
    background: var(--dm-bg-secondary);
    border-top-color: var(--dm-border-color);
    border-bottom-color: var(--dm-border-color);
}

body.dark-mode .selection-count {
    color: var(--dm-text-secondary);
}

body.dark-mode .message-selection-toolbar .btn-icon {
    color: var(--dm-text-secondary);
}

body.dark-mode .message-selection-toolbar .btn-icon:hover:not(:disabled) {
    background-color: var(--dm-bg-hover);
    color: var(--dm-text-primary);
}

body.dark-mode .message-selection-toolbar #cancelSelection {
    color: var(--dm-text-primary);
}

body.dark-mode .message-selection-toolbar #deleteSelected {
    color: #f87171;
}

body.dark-mode .message-selection-toolbar #deleteSelected:hover:not(:disabled) {
    background-color: rgba(248, 113, 113, 0.15);
}

body.dark-mode .message-selection-checkbox {
    background: var(--dm-bg-secondary);
    border-color: var(--dm-border-color);
}

body.dark-mode .message-selection-checkbox.checked {
    background: var(--primary-color, #3b82f6);
    border-color: var(--primary-color, #3b82f6);
}

body.dark-mode .message-wrapper.message-selected {
    background-color: rgba(59, 130, 246, 0.15);
}

body.dark-mode .message-wrapper.message-selected .message-content {
    background-color: rgba(59, 130, 246, 0.2) !important;
}

body.dark-mode .message-selection-mode .message-wrapper:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* ===== Image Gallery (if present) ===== */
body.dark-mode .image-gallery-overlay {
    background: rgba(0, 0, 0, 0.95);
}

body.dark-mode .image-gallery-controls button {
    background: var(--dm-bg-secondary);
    color: var(--dm-text-primary);
}

body.dark-mode .image-gallery-controls button:hover {
    background: var(--dm-bg-hover);
}

body.dark-mode .image-gallery-counter {
    background: var(--dm-bg-secondary);
    color: var(--dm-text-primary);
}

/* ===== Scrollbar Styling ===== */
body.dark-mode ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: var(--dm-bg-secondary);
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--dm-bg-hover);
    border-radius: 4px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--dm-bg-active);
}

/* ===== Smooth Transitions ===== */
body.dark-mode * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

body.dark-mode .message-content,
body.dark-mode .modal-overlay,
body.dark-mode button,
body.dark-mode input,
body.dark-mode textarea {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}