.typing-text {
    overflow: hidden;
    border-right: .15em solid transparent;
    white-space: pre-wrap;
    animation: typing 2s steps(40, end);
}

@keyframes typing {
    from { 
        max-height: 0;
        opacity: 0;
    }
    to { 
        max-height: 500px;
        opacity: 1;
    }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

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

#chatBody {
    max-height: 500px;
    opacity: 1;
    overflow: hidden;
}

.user-message, .bot-message {
    transition: all 0.3s ease-in-out;
}

#chatFormContainer {
    transform-origin: bottom left;
    transition: all 0.3s ease-in-out;
}

#chatFormContainer:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

#sendMessage:active {
    transform: scale(0.95);
}