/* Drive IMGVideos - estilos complementares ao Tailwind */

html, body { height: 100%; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

.toast {
    animation: toast-in .25s ease-out;
}
@keyframes toast-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.skeleton {
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 37%, #e2e8f0 63%);
    background-size: 400% 100%;
    animation: skeleton-loading 1.4s ease infinite;
}
@keyframes skeleton-loading {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

.dropzone.dragover {
    border-color: var(--tw-color-primary, #4f46e5);
    background-color: rgba(79, 70, 229, 0.05);
}

.file-card { transition: transform .15s ease, box-shadow .15s ease; }
.file-card:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(0,0,0,.15); }

.progress-bar-inner { transition: width .2s ease; }

.modal-backdrop { backdrop-filter: blur(2px); }

input:focus, select:focus, textarea:focus, button:focus-visible {
    outline: 2px solid transparent;
    box-shadow: 0 0 0 3px rgba(79,70,229,0.25);
}

@media (max-width: 640px) {
    footer { text-align: center; }
}