/* Dark mode support for chat elements */
html[data-theme="dark"] .msg-row.msg-admin-row .msg-timestamp {
    color: rgba(255, 255, 255, 0.55);
}

html[data-theme="dark"] .msg-row.msg-user-row .msg-timestamp {
    background: rgba(230, 126, 34, 0.25);
    color: rgba(255, 200, 150, 0.95);
}

html[data-theme="dark"] .sender-chip.sender-user .sender-name,
html[data-theme="dark"] .msg-user .msg-text {
    color: #ffffff;
}

html[data-theme="dark"] .admin-status {
    background: rgba(45, 31, 26, 0.6);
    color: var(--accent-light);
    border-bottom-color: rgba(230, 126, 34, 0.2);
}

html[data-theme="dark"] .chat-input-bar {
    background: rgba(45, 31, 26, 0.95);
    border-top-color: rgba(230, 126, 34, 0.2);
}

html[data-theme="dark"] .chat-input-bar input#u-msg {
    background: rgba(58, 40, 33, 0.8);
    border-color: rgba(211, 84, 0, 0.3);
    color: #e0e0e0;
}

html[data-theme="dark"] .chat-input-bar input#u-msg::placeholder {
    color: rgba(200, 200, 200, 0.4);
}

html[data-theme="dark"] .chat-input-bar input#u-msg:focus {
    background: rgba(58, 40, 33, 0.95);
    border-color: var(--accent);
}


/* Fix admin-status text color in dark mode */
html[data-theme="dark"] .admin-status {
    background: rgba(45, 31, 26, 0.9) !important;
    color: #ffffff !important;
    border-bottom-color: rgba(230, 126, 34, 0.2);
}

html[data-theme="dark"] .admin-status span {
    color: #ffffff !important;
}

html[data-theme="dark"] .online-dot {
    background: #4ade80 !important;
}

/* Fix chat history background */
html[data-theme="dark"] #chat-history {
    background: #2d1f10 !important;
}

/* Fix chat input area */
html[data-theme="dark"] .chat-input-bar {
    background: rgba(45, 31, 26, 0.98) !important;
    border-top: 1px solid rgba(230, 126, 34, 0.2);
}

html[data-theme="dark"] .chat-input-bar input#u-msg {
    background: rgba(58, 40, 33, 0.9) !important;
    border-color: rgba(211, 84, 0, 0.3) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .chat-input-bar input#u-msg::placeholder {
    color: rgba(200, 200, 200, 0.5) !important;
}

/* Fix pre-chat form in dark mode */
html[data-theme="dark"] #pre-chat-form {
    background: #2d1f10 !important;
}

html[data-theme="dark"] #pre-chat-form label {
    color: #ffffff !important;
}

html[data-theme="dark"] #pre-chat-form input {
    background: rgba(58, 40, 33, 0.9) !important;
    border-color: rgba(211, 84, 0, 0.3) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] #pre-chat-form input::placeholder {
    color: rgba(200, 200, 200, 0.5) !important;
}

/* Fix chat container background - SIN AZUL */
html[data-theme="dark"] #uwf-chat-container {
    background: #2d1f10 !important;
    border-color: rgba(230, 126, 34, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 1px rgba(230, 126, 34, 0.2);
}

/* Fix chat header - NARANJA EN VEZ DE AZUL */
html[data-theme="dark"] .chat-header {
    background: linear-gradient(135deg, #3a2a1a, #2d1f10) !important;
    border-bottom: 1px solid rgba(230, 126, 34, 0.2);
}

html[data-theme="dark"] .chat-header span {
    color: #ffffff !important;
}

/* Fix message bubbles - ADMIN NARANJA EN VEZ DE AZUL */
html[data-theme="dark"] .msg-admin {
    background: linear-gradient(135deg, #3a2a1a, #2d1f10) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.2);
}

html[data-theme="dark"] .msg-admin .msg-text {
    color: #ffffff !important;
}

/* USER MESSAGE - MISMO COLOR QUE ADMIN (NARANJA) */
html[data-theme="dark"] .msg-user {
    background: linear-gradient(135deg, #E67E22, #D35400) !important;
    border: none;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0,0,0,0.2);
}

html[data-theme="dark"] .msg-user .msg-text {
    color: #ffffff !important;
}

/* Fix sender chips */
html[data-theme="dark"] .sender-chip {
    color: #ffffff !important;
    background: linear-gradient(90deg, #E67E22, #D35400);
}

html[data-theme="dark"] .sender-chip .sender-name {
    color: #ffffff !important;
}

/* Fix empty state */
html[data-theme="dark"] .chat-empty-state {
    color: rgba(255, 255, 255, 0.6) !important;
    background: linear-gradient(145deg, rgba(58, 42, 26, 0.4), rgba(45, 31, 16, 0.6));
    border-color: rgba(230, 126, 34, 0.2);
}

html[data-theme="dark"] .chat-empty-state h3 {
    color: #ffffff !important;
}

html[data-theme="dark"] .chat-empty-state p {
    color: rgba(255, 255, 255, 0.7) !important;
}

html[data-theme="dark"] .chat-empty-state .empty-icon {
    background: rgba(230, 126, 34, 0.2);
    color: #E67E22;
}

/* Fix button hover states - NARANJA OSCURO EN VEZ DE AZUL */
html[data-theme="dark"] .btn-send-chat:hover {
    background: linear-gradient(135deg, #C0631D, #A84400) !important;
}

html[data-theme="dark"] .btn-start-chat:hover {
    background: linear-gradient(135deg, #C0631D, #A84400) !important;
}

/* Fix chat controls buttons */
html[data-theme="dark"] .chat-controls button {
    background: rgba(58, 42, 26, 0.8);
    border-color: rgba(230, 126, 34, 0.3);
    color: #ffffff;
}

html[data-theme="dark"] .chat-controls button:hover {
    background: rgba(230, 126, 34, 0.3);
    border-color: rgba(230, 126, 34, 0.6);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(230, 126, 34, 0.3);
}

/* Fix policy bubble */
html[data-theme="dark"] .chat-policy-bubble {
    background: rgba(58, 42, 26, 0.8);
    border-color: rgba(230, 126, 34, 0.3);
    border-left-color: #E67E22;
    color: rgba(255, 255, 255, 0.9);
}

html[data-theme="dark"] .chat-policy-bubble i {
    color: #E67E22;
}

/* Fix status indicator */
html[data-theme="dark"] #chat-status-indicator {
    color: #E67E22;
}