/* Chatbot custom styles */
#chatbot-container {
    --chatbot-primary: #0284c7; /* Brand 600 */
    --chatbot-secondary: #a855f7; /* Purple 600 */
    --font-family: 'Inter', sans-serif;
}

#chatbot-panel {
    font-family: var(--font-family);
    animation: slideUp 0.3s ease-out;
}

#chatbot-launcher {
    background: linear-gradient(135deg, var(--chatbot-primary), var(--chatbot-secondary));
    animation: pulse 2s infinite;
}

/* Header gradient - Force gradient and white text */
#chatbot-panel > div:first-child {
    background: linear-gradient(to right, #2563eb, #9333ea) !important;
    color: white !important;
}

/* Ensure header text and icons stay white */
#chatbot-panel > div:first-child * {
    color: white !important;
}

/* Input box - ensure visible text */
#chatbot-input {
    color: #1f2937 !important; /* Dark gray text for light mode */
    background-color: white !important;
}

#chatbot-input::placeholder {
    color: #9ca3af !important; /* Gray placeholder */
}

/* Dark mode input */
.dark #chatbot-input {
    color: white !important;
    background-color: #374151 !important;
}

.dark #chatbot-input::placeholder {
    color: #9ca3af !important;
}

/* User message gradient */
.chat-message.user .bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--chatbot-primary), var(--chatbot-secondary));
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Launcher pulse animation */
#chatbot-launcher {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3);
    }
    50% {
        box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.5), 0 0 0 8px rgba(59, 130, 246, 0.1);
    }
}

/* Message animations */
.chat-message {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scrollbar styling */
#chatbot-messages {
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

#chatbot-messages::-webkit-scrollbar {
    width: 6px;
}

#chatbot-messages::-webkit-scrollbar-track {
    background: transparent;
}

#chatbot-messages::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

#chatbot-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Dark mode scrollbar */
.dark #chatbot-messages::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

.dark #chatbot-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Mobile Fixes */
@media (max-width: 640px) {
    #chatbot-panel {
        /* Adjust panel height for mobile keyboard */
        height: calc(100vh - env(safe-area-inset-bottom) - 4rem) !important;
    }
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}