/* CSS minimal - Chỉ những gì Tailwind không có */

/* 1. Recording animation */
@keyframes pulse-recording {
    0%, 100% { 
        transform: scale(1); 
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); 
    }
    50% { 
        transform: scale(1.05); 
        box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); 
    }
}

.recording {
    animation: pulse-recording 1.5s infinite !important;
    /* Bỏ opacity để không bị mờ */
}

/* 2. Phase indicators cho Read Aloud */
.phase.active {
    @apply transform scale-105 font-bold text-white transition-all;
}

.phase.prepare.active {
    @apply bg-gradient-to-r from-yellow-500 to-orange-500;
}

.phase.practice.active {
    @apply bg-gradient-to-r from-cyan-500 to-blue-500;
}

.phase.official.active {
    @apply bg-gradient-to-r from-green-500 to-emerald-500;
}

/* 3. Drag & Drop states */
.drag-word.dragging {
    @apply opacity-50 cursor-grabbing transform scale-95;
}

.drop-zone.drag-over {
    @apply border-blue-500 bg-blue-100 border-solid;
}

.drop-zone.filled {
    @apply border-green-500 bg-green-100 border-solid text-green-800 font-semibold;
}

/* 4. Progress fill animation */
.progress-fill {
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 5. Loading spinner */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spinner {
    animation: spin 1s linear infinite;
}

/* 6. Bounce animation cho result */
@keyframes bounce-in {
    0% { 
        transform: scale(0.3); 
        opacity: 0; 
    }
    50% { 
        transform: scale(1.05); 
    }
    70% { 
        transform: scale(0.9); 
    }
    100% { 
        transform: scale(1); 
        opacity: 1; 
    }
}

.bounce-in {
    animation: bounce-in 0.6s ease-out;
}

/* 7. Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    @apply bg-gray-100 rounded-full;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-gray-400 rounded-full hover:bg-gray-500;
}

/* 8. Focus states cho accessibility */
.focus-visible {
    @apply ring-2 ring-blue-500 ring-offset-2;
}

/* 9. Smooth transitions */
* {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* 10. Hide default focus outline */
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
}