/* Custom styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Inter', sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Smooth transitions for buttons */
button {
    transition: all 0.2s ease;
}

/* Custom scrollbar for output */
#output::-webkit-scrollbar {
    width: 8px;
}

#output::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

#output::-webkit-scrollbar-thumb {
    background: #c7d2fe;
    border-radius: 10px;
}

#output::-webkit-scrollbar-thumb:hover {
    background: #a5b4fc;
}
/* Animations */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Animation for loading state */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}
.loading {
    animation: pulse 1.5s infinite, float 3s ease-in-out infinite;
}

/* Typewriter effect for generated text */
.typewriter p {
    overflow: hidden;
    border-right: .15em solid #6366f1;
    white-space: nowrap;
    margin: 0 auto;
    animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #6366f1; }
}

/* Gradient animation */
.gradient-bg {
    background: linear-gradient(-45deg, #6366f1, #8b5cf6, #ec4899, #f43f5e);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}