/* Chat Widget Styles */

/* Chat button animation */
@keyframes pulse-ring {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    80% {
        transform: scale(1.3);
        opacity: 0;
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

/* Typing indicator animation */
@keyframes typing-bounce {
    0%, 60%, 100% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-10px);
    }
}

/* Chat button hover effect */
.chat-button-ring {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    border: 2px solid #4f46e5;
    animation: pulse-ring 2s infinite;
}

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

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

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

#chat-messages::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Message fade-in animation */
@keyframes message-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-message {
    animation: message-fade-in 0.3s ease-out;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .chat-widget-mobile {
        position: fixed !important;
        inset: 0 !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        bottom: 0 !important;
        right: 0 !important;
    }
}

/* Focus styles for accessibility */
.chat-input:focus {
    outline: none;
    ring: 2;
    ring-color: #6366f1;
    border-color: transparent;
}

/* Loading dots animation */
.typing-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #6b7280;
    animation: typing-bounce 1.4s infinite ease-in-out both;
}

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

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

/* Chat window shadow for depth */
.chat-window {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Ensure chat widget stays on top */
.chat-widget-container {
    z-index: 9999;
}