/* MonoDuty Chatbot Styles - Dark Theme */
#monoduty-chatbot * {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Chat window background - softer dark theme */
#chat-window {
    background: linear-gradient(135deg, #1a1a2e, #16213e) !important;
    border: 1px solid #2a2a3a !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6) !important;
}

/* Chat messages area - softer background */
#chat-messages {
    background: linear-gradient(135deg, #1a1a2e, #16213e) !important;
    color: #e0e0e0 !important;
    padding-bottom: 100px !important;
}

/* Chat input area - softer background */
#chat-input-area {
    background: linear-gradient(135deg, #1a1a2e, #16213e) !important;
    border-top: 1px solid #2a2a3a !important;
}

/* Input field - softer theme */
#chat-input {
    background: #2a2a3a !important;
    border: 2px solid #3a3a4a !important;
    color: #e0e0e0 !important;
}

#chat-input::placeholder {
    color: #888 !important;
}

#chat-input:focus {
    border-color: #00c0ff !important;
    box-shadow: 0 0 0 2px rgba(0, 192, 255, 0.25) !important;
    background: #2a2a3a !important;
}

/* Send button - modern dark theme */
#send-btn {
    background: linear-gradient(135deg, #2c3e50, #4a6984) !important;
    color: #ffffff !important;
}

#send-btn:hover {
    background: linear-gradient(135deg, #34495e, #5d7a8f) !important;
    transform: scale(1.05);
}

/* Toggle button hover */
#chat-toggle:hover {
    transform: scale(1.05);
    transition: transform 0.2s ease;
}

/* Scrollbar - dark theme */
#chat-messages::-webkit-scrollbar {
    width: 6px;
}

#chat-messages::-webkit-scrollbar-track {
    background: #1a1a2e;
    border-radius: 3px;
}

#chat-messages::-webkit-scrollbar-thumb {
    background: #00c0ff;
    border-radius: 3px;
}

#chat-messages::-webkit-scrollbar-thumb:hover {
    background: #0099cc;
}

/* Message bubbles - modern dark theme */
.bot-message {
    background: linear-gradient(135deg, #2c3e50, #4a6984) !important;
    color: #ffffff !important;
    border: none !important;
}

.user-message {
    background: #2a2a3a !important;
    color: #ffffff !important;
    border: 1px solid #444 !important;
}

/* Header - dark theme to match chat area */
#chat-header {
    background: linear-gradient(135deg, #1a1a2e, #16213e) !important;
    color: #e0e0e0 !important;
}

/* Close button */
#close-chat {
    color: #ffffff !important;
}

#close-chat:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 50%;
}

/* Typing Animation */
.typing-dots {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 4px 0;
}

.typing-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ffffff;
    display: inline-block;
    animation: typing-bounce 1.4s infinite ease-in-out both;
}

.typing-dots span:nth-child(1) {
    animation-delay: -0.32s;
}

.typing-dots span:nth-child(2) {
    animation-delay: -0.16s;
}

.typing-dots span:nth-child(3) {
    animation-delay: 0s;
}

@keyframes typing-bounce {
    0%, 80%, 100% {
        transform: scale(0);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Typing Indicator */
#typing-indicator {
    margin-bottom: 16px;
}