/* WebAssist AI Chatbot Styles */

/* Base styles - Force font family and prevent theme overrides */
#webassist-chatbot-root,
#webassist-chatbot-root * {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
    box-sizing: border-box !important;
}

/* Force colors for chatbot elements */
#webassist-chatbot-root button {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
    font-weight: 500 !important;
}

/* CRITICAL: Override root color for ALL buttons first */
#webassist-chatbot-root button {
    color: unset !important;
}

/* Ensure button text colors work correctly - override any conflicting rules */
#webassist-chatbot-root button.text-\\[\\#fff\\],
#webassist-chatbot-root button[class*="text-[#fff]"],
#webassist-chatbot-root button.text-\\[\\#ffffff\\],
#webassist-chatbot-root button[class*="text-[#ffffff]"],
#webassist-chatbot-root button.text-white,
#webassist-chatbot-root button[class*="text-white"] {
    color: #ffffff !important;
}
/* Ensure buttons with dark background have white text (light mode) - HIGH SPECIFICITY */
#webassist-chatbot-root button.bg-\\[\\#222222\\],
#webassist-chatbot-root button[class*="bg-[#222222]"],
#webassist-chatbot-root button[class*="bg-[#222222]"][class*="text-[#fff]"],
#webassist-chatbot-root button[class*="bg-[#222222]"][class*="text-[#ffffff]"],
#webassist-chatbot-root button[class*="bg-[#222222]"][class*="text-white"] {
    color: #ffffff !important;
}
/* Ensure buttons can still use yellow color when explicitly set */
#webassist-chatbot-root button.text-\\[\\#DFFF00\\],
#webassist-chatbot-root button[class*="text-[#DFFF00]"] {
    color: #DFFF00 !important;
}

/* Dark mode button text colors */
.dark #webassist-chatbot-root button.dark\\:text-\\[\\#222222\\],
.dark #webassist-chatbot-root button[class*="dark:text-[#222222]"] {
    color: #222222 !important;
}

/* Background color #222222 - Multiple selectors for better coverage */
#webassist-chatbot-root .bg-\\[\\#222222\\],
#webassist-chatbot-root [class*="bg-[#222222]"],
#webassist-chatbot-root [style*="background-color: #222222"],
#webassist-chatbot-root [style*="background: #222222"] {
    background-color: #222222 !important;
    background: #222222 !important;
}

/* Accent color #DFFF00 - Multiple selectors (exclude buttons to prevent conflicts) */
#webassist-chatbot-root .text-\\[\\#DFFF00\\]:not(button),
#webassist-chatbot-root [class*="text-[#DFFF00]"]:not(button),
#webassist-chatbot-root [style*="color: #DFFF00"]:not(button),
#webassist-chatbot-root [style*="color:#DFFF00"]:not(button),
#webassist-chatbot-root span.text-\\[\\#DFFF00\\],
#webassist-chatbot-root span[class*="text-[#DFFF00]"],
#webassist-chatbot-root p.text-\\[\\#DFFF00\\],
#webassist-chatbot-root p[class*="text-[#DFFF00]"],
#webassist-chatbot-root div.text-\\[\\#DFFF00\\],
#webassist-chatbot-root div[class*="text-[#DFFF00]"] {
    color: #DFFF00 !important;
}

/* White text - Multiple selectors */
#webassist-chatbot-root .text-\\[\\#ffffff\\],
#webassist-chatbot-root [class*="text-[#ffffff]"],
#webassist-chatbot-root .text-\\[\\#fff\\],
#webassist-chatbot-root [class*="text-[#fff]"],
#webassist-chatbot-root .text-white,
#webassist-chatbot-root [style*="color: #ffffff"],
#webassist-chatbot-root [style*="color:#ffffff"],
#webassist-chatbot-root [style*="color: #fff"],
#webassist-chatbot-root [style*="color:#fff"] {
    color: #ffffff !important;
}

/* White background */
#webassist-chatbot-root .bg-white,
#webassist-chatbot-root [style*="background-color: #ffffff"],
#webassist-chatbot-root [style*="background: #ffffff"] {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* Dark text #222222 */
#webassist-chatbot-root .text-\\[\\#222222\\],
#webassist-chatbot-root [class*="text-[#222222]"],
#webassist-chatbot-root [style*="color: #222222"],
#webassist-chatbot-root [style*="color:#222222"] {
    color: #222222 !important;
}

/* Ensure chatbot is above other content */
#webassist-chatbot-root {
    z-index: 999999 !important;
    position: fixed !important;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
    text-align: left !important;
    line-height: normal !important;
    color: #222222 !important;
}
/* Override root color for buttons - ensure buttons don't inherit root color */
#webassist-chatbot-root button {
    color: unset !important;
}

/* Dark mode support */
.dark #webassist-chatbot-root {
    color: #ffffff !important;
}

/* Dark mode text color overrides - ensure dark text becomes white in dark mode */
.dark #webassist-chatbot-root .text-\\[\\#222222\\],
.dark #webassist-chatbot-root [class*="text-[#222222]"] {
    color: #ffffff !important;
}

/* Dark mode background overrides - ensure white backgrounds become dark */
.dark #webassist-chatbot-root .bg-white,
.dark #webassist-chatbot-root [class*="bg-white"] {
    background-color: #222222 !important;
    background: #222222 !important;
}

/* Dark mode - ensure dark backgrounds stay dark */
.dark #webassist-chatbot-root .bg-\\[\\#222222\\],
.dark #webassist-chatbot-root [class*="bg-[#222222]"] {
    background-color: #222222 !important;
    background: #222222 !important;
}

/* Dark mode - support Tailwind dark: classes */
.dark #webassist-chatbot-root .dark\\:bg-\\[\\#222222\\],
.dark #webassist-chatbot-root [class*="dark:bg-[#222222]"] {
    background-color: #222222 !important;
}

.dark #webassist-chatbot-root .dark\\:bg-\\[\\#1a1a1a\\],
.dark #webassist-chatbot-root [class*="dark:bg-[#1a1a1a]"] {
    background-color: #1a1a1a !important;
}

.dark #webassist-chatbot-root .dark\\:text-\\[\\#ffffff\\],
.dark #webassist-chatbot-root [class*="dark:text-[#ffffff]"],
.dark #webassist-chatbot-root .dark\\:text-white,
.dark #webassist-chatbot-root [class*="dark:text-white"] {
    color: #ffffff !important;
}

.dark #webassist-chatbot-root .dark\\:text-\\[\\#DFFF00\\],
.dark #webassist-chatbot-root [class*="dark:text-[#DFFF00]"] {
    color: #DFFF00 !important;
}

/* Prevent WordPress theme from overriding chatbot styles */
#webassist-chatbot-root h1,
#webassist-chatbot-root h2,
#webassist-chatbot-root h3,
#webassist-chatbot-root h4,
#webassist-chatbot-root h5,
#webassist-chatbot-root h6,
#webassist-chatbot-root p,
#webassist-chatbot-root span,
#webassist-chatbot-root div {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #webassist-chatbot-root {
        left: 0 !important;
        right: 0 !important;
    }
}