/* Custom CSS for Django Chatbot Integration */

/* Ensure the chatbot container stays on top of everything */
#ai-chatbot-container {
    font-family: 'Outfit', 'Inter', sans-serif; /* Match the rest of the site */
}

/* Custom scrollbar for chat area */
#chatbot-messages::-webkit-scrollbar {
    width: 6px;
}

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

#chatbot-messages::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 20px;
}

#chatbot-messages::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
}

/* Animations */
@keyframes chatFadeInUp {
    from { 
        opacity: 0; 
        transform: translateY(10px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

#chatbot-messages > div {
    animation: chatFadeInUp 0.3s ease-out forwards;
}

/* Message styling */
.chat-msg-user {
    background-color: #2563eb; /* blue-600 */
    color: white;
}

.chat-msg-ai {
    background-color: white;
    color: #1f2937; /* gray-800 */
}

/* Markdown basic formatting inside chat */
.chat-msg-content p {
    margin-bottom: 0.5em;
}
.chat-msg-content p:last-child {
    margin-bottom: 0;
}
.chat-msg-content strong {
    font-weight: 600;
}
.chat-msg-content ul {
    list-style-type: disc;
    margin-left: 1.5em;
    margin-bottom: 0.5em;
}
.chat-msg-content pre {
    background-color: #f1f5f9;
    padding: 0.5em;
    border-radius: 0.5rem;
    overflow-x: auto;
    font-size: 0.85em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.chat-msg-content code {
    background-color: #f1f5f9;
    padding: 0.1em 0.3em;
    border-radius: 0.25rem;
    font-size: 0.9em;
}

/* Mobile responsiveness adjustments */
@media (max-width: 640px) {
    #chatbot-window {
        width: calc(100vw - 32px); /* 16px padding on each side */
        height: 600px;
        max-height: calc(100vh - 120px);
        bottom: 70px;
        right: 0;
    }
}