/* === Dark Mode Styles === */

[data-theme="dark"] {
    --light-bg-primary: #0f172a;
    --light-bg-secondary: #111827;
    --light-bg-tertiary: #0b1220;
    --light-bg-accent-user: #0b3a57;
    --light-bg-accent-user-alt: #1d4ed8;

    --light-text-primary: #e5e7eb;
    --light-text-secondary: #9ca3af;
    --light-text-on-accent: #ffffff;

    --light-border-primary: #1f2937;
    --light-border-input: #334155;
    --light-input-bg: #0b1220;

    --action-primary-bg: #3b82f6;
    --action-primary-hover-bg: #2563eb;
    --action-secondary-bg: #7c3aed;
    --action-secondary-hover-bg: #6d28d9;
    --action-tertiary-bg: #0b1220;
    --action-tertiary-hover-bg: #0f172a;
    --action-tertiary-text: #e5e7eb;

    --link-color: #93c5fd;
    --link-hover-color: #bfdbfe;

    --flash-success-bg: #134e4a;
    --flash-success-text: #a7f3d0;
    --flash-error-bg: #3f1d1d;
    --flash-error-text: #fecaca;
    --flash-warning-bg: #3b2f1a;
    --flash-warning-text: #fde68a;
    --flash-info-bg: #0b1220;
    --flash-info-text: #bae6fd;

    /* Metrics Semantic Colors (Dark Mode) */
    --metric-primary-color: #60a5fa;       /* Blue-400 */
    --metric-primary-bg: rgba(96, 165, 250, 0.15);
    --metric-success-color: #4ade80;       /* Green-400 */
    --metric-success-bg: rgba(74, 222, 128, 0.15);
}

[data-theme="dark"] html,
[data-theme="dark"] .dashboard-body,
[data-theme="dark"] .main-content-column {
    background-color: var(--light-bg-primary);
    color: var(--light-text-primary);
}

/* Navigation */
[data-theme="dark"] nav.main-nav {
    background-color: var(--light-bg-primary);
    border-bottom-color: var(--light-border-primary);
    box-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

[data-theme="dark"] .nav-logo .logo-text { 
    color: var(--light-text-primary); 
}

[data-theme="dark"] .nav-logout-btn:hover { 
    background-color: var(--action-tertiary-hover-bg); 
    color: var(--light-text-primary); 
    border-color: var(--light-border-primary); 
}

/* Sidebar */
[data-theme="dark"] .sidebar-column { 
    background-color: var(--light-bg-secondary); 
    border-right-color: var(--light-border-primary); 
}

[data-theme="dark"] .sidebar-search-container { 
    background-color: var(--light-bg-secondary); 
    border-bottom-color: var(--light-border-primary); 
}

[data-theme="dark"] .conversation-item { 
    border-bottom-color: var(--light-border-primary); 
}

[data-theme="dark"] .conversation-item:hover a.conversation-link { 
    background-color: #0f172a; 
}

[data-theme="dark"] a.conversation-link { 
    color: var(--light-text-primary); 
}

[data-theme="dark"] .conversation-summary .last-message-time,
[data-theme="dark"] .conversation-summary { 
    color: var(--light-text-secondary); 
}

[data-theme="dark"] .search-group-title { 
    color: var(--light-text-secondary); 
}

/* Sidebar Filters */
[data-theme="dark"] .sidebar-filters { 
    background: var(--light-bg-secondary); 
    border-color: var(--light-border-primary); 
}

[data-theme="dark"] .filter-option { 
    background: transparent; 
    border: none; 
}

/* Chat Area */
[data-theme="dark"] .chat-area-header { 
    background-color: var(--light-bg-secondary); 
    border-bottom-color: var(--light-border-primary); 
}

[data-theme="dark"] .chat-title { 
    color: var(--light-text-primary); 
}

[data-theme="dark"] .chat-window { 
    background-color: var(--light-bg-primary); 
}

/* Conversation Side Panel */
[data-theme="dark"] .conversation-side-panel { 
    background: var(--light-bg-tertiary); 
    border-color: var(--light-border-primary); 
    box-shadow: 0 2px 8px rgba(0,0,0,0.7); 
}

[data-theme="dark"] .conversation-side-panel .side-panel-title { 
    color: var(--light-text-primary); 
}

[data-theme="dark"] .conversation-side-panel .side-panel-field { 
    background: #0f172a; 
    border-color: var(--light-border-primary); 
}

[data-theme="dark"] .conversation-side-panel .field-key { 
    color: var(--light-text-secondary); 
}

[data-theme="dark"] .conversation-side-panel .field-value { 
    color: var(--light-text-primary); 
}

[data-theme="dark"] .conversation-side-panel .no-enrollment-msg { 
    background: #0f172a; 
    color: var(--light-text-secondary); 
    border-color: var(--light-border-primary); 
}

/* Dropdowns */
[data-theme="dark"] .dropdown-menu { 
    background: #0f172a; 
    border-color: var(--light-border-primary); 
    box-shadow: 0 10px 28px rgba(0,0,0,0.7); 
}

[data-theme="dark"] .dropdown-item { 
    color: var(--light-text-primary); 
}

[data-theme="dark"] .dropdown-item:hover { 
    background: #111827; 
}

[data-theme="dark"] .dropdown-item.queue-item[data-queue-mode="agent"] .queue-mode-icon { 
    color: #fbbf24; 
}

[data-theme="dark"] .dropdown-item.queue-item[data-queue-mode="bot"] .queue-mode-icon { 
    color: #60a5fa; 
}

[data-theme="dark"] .dropdown-trigger::after { 
    border-top-color: #9ca3af; 
}

/* Control Chips */
[data-theme="dark"] .control-chip.tertiary { 
    --chip-bg: var(--action-tertiary-bg); 
    --chip-border: var(--light-border-input); 
    --chip-fg: var(--light-text-primary); 
}

[data-theme="dark"] .selector-button { 
    background-color: var(--light-bg-primary); 
    color: var(--light-text-secondary); 
    border-color: var(--light-border-input); 
}

[data-theme="dark"] .selector-button:hover { 
    background-color: var(--action-tertiary-hover-bg); 
    border-color: var(--light-border-input); 
    color: var(--light-text-primary); 
}

[data-theme="dark"] .selector-button.active { 
    background-color: var(--action-primary-bg); 
    color: var(--light-text-on-accent); 
    border-color: var(--action-primary-bg); 
}

/* Inputs */
[data-theme="dark"] .search-input,
[data-theme="dark"] textarea.reply-textarea { 
    background-color: var(--light-input-bg); 
    color: var(--light-text-primary); 
    border-color: var(--light-border-input); 
}

[data-theme="dark"] .search-input::placeholder,
[data-theme="dark"] textarea.reply-textarea::placeholder { 
    color: var(--light-text-secondary); 
}

[data-theme="dark"] textarea.reply-textarea:focus { 
    border-color: var(--action-primary-bg); 
    box-shadow: 0 0 0 0.15rem rgba(59, 130, 246, 0.2); 
}

/* Reply Controls */
[data-theme="dark"] .reply-and-controls-container { 
    background-color: var(--light-bg-secondary); 
    border-top-color: var(--light-border-primary); 
}

[data-theme="dark"] .pause-label { 
    color: var(--light-text-secondary); 
}

[data-theme="dark"] .enrollment-toggle-btn { 
    background-color: var(--light-bg-primary); 
    border-color: var(--light-border-input); 
}

[data-theme="dark"] .enrollment-toggle-btn:hover { 
    background-color: #111827; 
    border-color: var(--link-color); 
}

/* Attachments */
[data-theme="dark"] .attach-file-button { 
    background: var(--action-tertiary-bg);
    border-color: var(--dark-border-input);
    color: var(--dark-text-secondary);
}

[data-theme="dark"] .attach-file-button:hover {
    background: var(--dark-action-tertiary-hover-bg);
    color: var(--accent-primary);
    border-color: var(--accent-primary-faint);
}

/* Emoji button dark mode */
[data-theme="dark"] .emoji-button {
    background: var(--action-tertiary-bg);
    border-color: var(--dark-border-input);
    color: var(--dark-text-secondary);
}

[data-theme="dark"] .emoji-button:hover {
    background: var(--dark-action-tertiary-hover-bg);
    color: var(--accent-primary);
    border-color: var(--accent-primary-faint);
}

[data-theme="dark"] .emoji-button.active {
    background: var(--accent-primary-faint);
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}

/* Emoji picker dark mode */
[data-theme="dark"] .emoji-picker {
    background: var(--dark-bg-primary, #0b1220); /* fallback sólido para evitar transparencia */
    border-color: var(--dark-border-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    background-clip: padding-box;
}

[data-theme="dark"] .emoji-picker-header {
    background: var(--dark-bg-secondary, #0f172a); /* fallback */
    border-color: var(--dark-border-primary);
}

[data-theme="dark"] .emoji-category-btn:hover {
    background: var(--dark-action-tertiary-hover-bg);
}

[data-theme="dark"] .emoji-category-btn.active {
    background: var(--accent-primary-faint);
}

[data-theme="dark"] .emoji-item:hover {
    background: var(--dark-action-tertiary-hover-bg);
}

[data-theme="dark"] .emoji-picker-content {
    background: var(--dark-bg-primary, #0b1220); /* asegurar fondo opaco del grid */
}

[data-theme="dark"] .emoji-picker-content::-webkit-scrollbar-track {
    background: #0f172a; /* track oscuro y opaco */
}

[data-theme="dark"] .emoji-picker-content::-webkit-scrollbar-thumb {
    background-color: #64748b; /* slate-500 para buen contraste */
    border-radius: 6px;
    border: 2px solid #0f172a; /* separa el thumb del track */
}

[data-theme="dark"] .emoji-picker-content::-webkit-scrollbar-thumb:hover {
    background: #93a4b8; /* más claro al hover */
}

[data-theme="dark"] .emoji-picker-content::-webkit-scrollbar {
    width: 8px;  /* barra más visible */
    height: 8px;
}

/* Soporte Firefox */
[data-theme="dark"] .emoji-picker-content {
    scrollbar-width: thin;
    scrollbar-color: #64748b #0f172a; /* thumb track */
}

[data-theme="dark"] .attachment-preview {
    background: var(--light-bg-tertiary);
    border-color: var(--light-border-primary);
}

[data-theme="dark"] .attachment-filename { 
    color: var(--light-text-primary); 
}

[data-theme="dark"] .attachment-remove-btn {
    background: var(--action-tertiary-bg);
    border-color: var(--light-border-input);
    color: var(--light-text-secondary);
}

[data-theme="dark"] .attachment-remove-btn:hover {
    background: #111827;
    border-color: var(--light-border-input);
}

/* Multiple attachments preview */
[data-theme="dark"] .attachments-preview {
    background: var(--light-bg-tertiary);
    border-color: var(--light-border-primary);
}

[data-theme="dark"] .attachment-item {
    background: var(--light-bg-secondary);
    border-color: var(--light-border-input);
}

[data-theme="dark"] .attachment-item .attachment-filename {
    color: var(--light-text-primary);
}

[data-theme="dark"] .attachment-item .attachment-size {
    color: var(--light-text-secondary);
}

[data-theme="dark"] .attachments-count {
    color: var(--light-text-secondary);
}

[data-theme="dark"] .attachment-item.attachment-error {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
}

[data-theme="dark"] .attachment-spinner {
    color: var(--accent-primary, #60a5fa);
}

/* Messages */
[data-theme="dark"] .message { 
    box-shadow: 0 1px 3px rgba(0,0,0,0.7); 
}

[data-theme="dark"] .message p.message-text { 
    color: var(--light-text-primary); 
}

[data-theme="dark"] .message .message-meta { 
    color: var(--light-text-secondary); 
}

[data-theme="dark"] .user-message { 
    background-color: #111827; 
}

[data-theme="dark"] .bot-message { 
    background-color: #0b3a57; 
}

[data-theme="dark"] .agent-message { 
    background-color: var(--action-primary-bg); 
    color: var(--light-text-on-accent); 
}

[data-theme="dark"] .agent-message p.message-text { 
    color: var(--light-text-on-accent); 
}

[data-theme="dark"] .agent-message .message-meta { 
    color: rgba(255,255,255,0.75); 
}

/* WhatsApp-style formatting in dark mode */
[data-theme="dark"] .message p.message-text code {
    background-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .message p.message-text a {
    color: #60a5fa; /* blue-400 */
}

[data-theme="dark"] .agent-message p.message-text a {
    color: #93c5fd; /* blue-300 */
}

/* Button chips in dark mode */
[data-theme="dark"] .button-chip-container {
    border-top-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .button-chip {
    color: #22d3ee; /* cyan-400 */
}

[data-theme="dark"] .button-chip:hover {
    background: rgba(34, 211, 238, 0.1);
}

[data-theme="dark"] .bot-message .button-chip-container {
    border-top-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .bot-message .button-chip {
    color: #60a5fa; /* blue-400 */
}

[data-theme="dark"] .bot-message .button-chip:hover {
    background: rgba(96, 165, 250, 0.15);
}

[data-theme="dark"] .agent-message .button-chip {
    color: #93c5fd; /* blue-300 */
}

[data-theme="dark"] .agent-message .button-chip:hover {
    background: rgba(147, 197, 253, 0.15);
}

[data-theme="dark"] .date-separator { 
    background-color: #1f2937; 
    color: #cbd5e1; 
    box-shadow: 0 1px 0.5px rgba(0,0,0,0.6); 
}

/* System message (dark) */
[data-theme="dark"] .system-message {
    background: #1f2937; /* slate-800 */
    color: #9ca3af;      /* slate-400 */
    border-color: #374151; /* slate-700 */
}
[data-theme="dark"] .system-message p.message-text {
    color: #9ca3af;
}

/* Mode Filters */
[data-theme="dark"] .mode-filter-btn { 
    border-color: var(--light-border-input) !important; 
    background: #0f172a !important; 
    color: var(--light-text-primary) !important; 
}

[data-theme="dark"] .mode-filter-btn.active { 
    background: #0b3a57 !important; 
    border-color: #1d4ed8 !important; 
    color: #e5e7eb !important; 
}

[data-theme="dark"] .sidebar-mode-filter { 
    border-bottom: 1px solid var(--light-border-primary); 
}

/* Scrollbar */
[data-theme="dark"] .chat-window::-webkit-scrollbar-track,
[data-theme="dark"] .sidebar-column::-webkit-scrollbar-track { 
    background: rgba(255,255,255,0.06); 
}

[data-theme="dark"] .chat-window::-webkit-scrollbar-thumb,
[data-theme="dark"] .sidebar-column::-webkit-scrollbar-thumb { 
    background: #475569; 
}

[data-theme="dark"] .chat-window,
[data-theme="dark"] .sidebar-column { 
    scrollbar-color: #475569 rgba(255,255,255,0.06); 
}

/* Conversation list scrollbar (inside sidebar) */
[data-theme="dark"] .conversation-list-container.sidebar-style {
    scrollbar-color: #475569 rgba(255,255,255,0.06);
}
[data-theme="dark"] .conversation-list-container.sidebar-style::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.06);
}
[data-theme="dark"] .conversation-list-container.sidebar-style::-webkit-scrollbar-thumb {
    background: #475569;
}
[data-theme="dark"] .conversation-list-container.sidebar-style::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Metrics */
[data-theme="dark"] .metrics-container.page-padding { 
    background-color: var(--light-bg-secondary); 
    scrollbar-color: #475569 rgba(255,255,255,0.06);
}

[data-theme="dark"] .metrics-container.page-padding::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.06);
}

[data-theme="dark"] .metrics-container.page-padding::-webkit-scrollbar-thumb {
    background: #475569;
}

[data-theme="dark"] .metrics-container.page-padding::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

[data-theme="dark"] .metrics-container h3 { 
    color: var(--light-text-primary); 
}

[data-theme="dark"] .metric-card-item { 
    background-color: var(--light-bg-tertiary); 
    border-color: var(--light-border-primary); 
    box-shadow: 0 2px 6px rgba(0,0,0,0.7); 
}

[data-theme="dark"] .metric-card-item h4 { 
    color: var(--link-color); 
}

[data-theme="dark"] .metric-card-item p { 
    color: var(--light-text-primary); 
}

[data-theme="dark"] .timeline-chart-container { 
    background-color: var(--light-bg-tertiary); 
    border-color: var(--light-border-primary); 
    box-shadow: 0 2px 6px rgba(0,0,0,0.7); 
}

[data-theme="dark"] .timeline-header h4 { 
    color: var(--light-text-primary); 
}

/* Flash Messages */
[data-theme="dark"] li.flash-message { 
    box-shadow: 0 2px 8px rgba(0,0,0,0.7); 
}

/* Auth Pages */
[data-theme="dark"] .auth-body { 
    background-color: var(--light-bg-secondary); 
    color: var(--light-text-primary); 
}

[data-theme="dark"] .auth-container { 
    background: var(--light-bg-primary); 
    border-color: var(--light-border-primary); 
    box-shadow: 0 10px 30px rgba(0,0,0,0.6); 
}

[data-theme="dark"] .auth-input label { 
    color: var(--light-text-secondary); 
}

[data-theme="dark"] .auth-input input { 
    background-color: var(--light-input-bg); 
    color: var(--light-text-primary); 
    border-color: var(--light-border-input); 
}

[data-theme="dark"] .auth-subtitle { 
    color: var(--light-text-secondary); 
}

/* Switch */
[data-theme="dark"] .switch-pill { 
    background: #1f2937; 
}

[data-theme="dark"] .switch-pill::after { 
    background: #e5e7eb; 
}

[data-theme="dark"] .switch-pill[aria-checked="true"] { 
    background: #16a34a; 
}

/* Status Pills */
[data-theme="dark"] .delete-status-btn {
    background-color: #9ca3af;
    color: #111827;
    border-color: #1f2937;
}

[data-theme="dark"] .delete-status-btn:hover {
    background-color: #ef4444;
}

/* Sidebar Load More */
[data-theme="dark"] #sidebarLoadMoreBtn {
    border-color: var(--light-border-input);
    background-color: var(--light-bg-primary);
    color: var(--light-text-primary);
}

/* Attention and Mode Metric Cards */
[data-theme="dark"] .metric-card-item.highlight-attention {
    border-left-color: #fbbf24;
    background: linear-gradient(135deg, var(--light-bg-tertiary) 0%, rgba(251, 191, 36, 0.12) 100%);
}

[data-theme="dark"] .metric-card-item.highlight-attention h4 {
    color: #fbbf24;
}

[data-theme="dark"] .metric-card-item.highlight-attention p {
    color: #fbbf24;
}

/* Distribution Section */
[data-theme="dark"] .distribution-chart-container {
    background-color: var(--light-bg-tertiary);
    border-color: var(--light-border-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

[data-theme="dark"] .distribution-header h4 {
    color: var(--light-text-primary);
}

[data-theme="dark"] .legend-item {
    color: var(--light-text-secondary);
}

[data-theme="dark"] .legend-value {
    color: var(--light-text-primary);
}

[data-theme="dark"] .distribution-legend::-webkit-scrollbar-thumb {
    background: #475569;
}

[data-theme="dark"] .distribution-legend {
    scrollbar-color: #475569 transparent;
}