/* Animations and transitions */

/* Element transitions */
.chat-container,
.user-message,
.response-message,
.suggested-questions a,
.error-message,
button,
input,
select,
.typing-indicator,
.copy-button {
    transition: var(--transition);
}

/* Fade in animation for welcome message */
.welcome-message {
    animation: fadeIn 0.5s ease;
}

/* Slide in animation for messages */
.user-message, 
.response-message {
    animation: slideIn 0.3s ease-out;
}

/* Fade in animation for error messages */
.error-message {
    animation: fadeIn 0.3s ease-in;
}

/* Typing indicator dots animation */
.typing-dots span {
    animation: typing-dots 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;
}

/* Pulse animation for the typing dots */
.typing-dots span {
    animation: pulse 1.4s infinite ease-in-out;
}

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

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

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

/* Button hover effects */
#submit-button:hover,
#theme-toggle:hover,
#new-topic-button:hover,
.suggested-questions a:hover,
.copy-button:hover {
    transform: translateY(-1px);
}

#submit-button:active,
#theme-toggle:active,
#new-topic-button:active,
.suggested-questions a:active,
.copy-button:active {
    transform: translateY(0);
}

/* Hover effects for suggested questions */
.suggested-questions a:hover {
    transform: translateY(-2px);
}

.suggested-questions a:active {
    transform: translateY(-1px);
}

/* Copy button animation */
.copy-button.copied {
    animation: fadeInOut 2s ease;
}

/* Define the animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInOut {
    0% { opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

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

@keyframes typing-dots {
    0%, 80%, 100% {
        transform: scale(0.6);
    }
    40% {
        transform: scale(1);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(0.8);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* Transition for theme switching */
body,
.chat-container,
.user-message,
.response-message,
.welcome-message,
.suggested-questions a,
input,
button,
select,
.error-message,
.typing-indicator {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease, 
                box-shadow 0.3s ease;
}

/* Smooth scrolling */
.chat-box {
    scroll-behavior: smooth;
}

/* Focus transitions */
button:focus, 
input:focus, 
select:focus, 
a:focus {
    transition: outline-color 0.2s ease, 
                outline-width 0.2s ease, 
                outline-offset 0.2s ease;
}