/* Custom styles for AI Drawing Platform */

body {
    background-color: #090d16;
    background-image: radial-gradient(circle at 50% 0%, rgba(139, 92, 246, 0.05), transparent 60%);
}

[v-cloak] {
    display: none !important;
}

/* Custom Webkit Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: rgba(9, 13, 22, 0.3);
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Toast Notification Transition */
.toast-fade-enter-active {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.toast-fade-leave-active {
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.toast-fade-enter-from, .toast-fade-leave-to {
    opacity: 0;
    transform: translateY(-16px) scale(0.96);
}

/* Modal Frame Transitions */
.modal-fade-enter-active {
    transition: opacity 0.3s ease;
}
.modal-fade-leave-active {
    transition: opacity 0.2s ease;
}
.modal-fade-enter-from, .modal-fade-leave-to {
    opacity: 0;
}

/* Slide Fade Transition for Custom API settings dropdown */
.slide-fade-enter-active {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.slide-fade-leave-active {
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.slide-fade-enter-from, .slide-fade-leave-to {
    transform: translateY(-8px);
    opacity: 0;
}

/* Linear flowing border gradient animation */
@keyframes gradient-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.animate-gradient-flow {
    background-size: 200% 200%;
    animation: gradient-flow 5s ease infinite;
}