/* ===========================================
   Video Editor - Responsive Styles
   =========================================== */

@media (max-width: 1200px) {
    :root {
        --media-panel-width: 220px;
        --properties-panel-height: 180px;
    }
}

@media (max-width: 1024px) {
    :root {
        --media-panel-width: 200px;
        --timeline-height: 220px;
        --properties-panel-height: 160px;
    }

    .grid-view .media-item {
        /* single column in grid */
    }

    .media-list.grid-view {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    :root {
        --media-panel-width: 180px;
        --timeline-height: 200px;
        --properties-panel-height: 150px;
        --header-height: 38px;
    }

    .menu-btn {
        padding: 4px 8px;
        font-size: 11.5px;
    }

    .brand-logo {
        font-size: 12px;
    }

    .brand-logo span {
        display: none;
    }

    .timeline-track-labels {
        width: 70px;
    }

    .track-label {
        font-size: 10px;
        padding: 0 4px;
    }

    .track-label .track-actions {
        display: none;
    }

    .dialog {
        width: 95vw;
        max-width: 450px;
    }

    .player-controls {
        gap: 4px;
        padding: 4px 8px;
    }

    .player-time {
        font-size: 11px;
        min-width: 110px;
    }

    .zoom-control label {
        display: none;
    }
}

@media (max-width: 600px) {
    #workspace {
        flex-direction: column;
    }

    #media-panel {
        width: 100%;
        height: 120px;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .media-list.grid-view {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }

    .media-drop-zone {
        padding: 10px;
        margin: 6px;
    }

    .media-drop-zone .drop-icon {
        font-size: 20px;
    }

    :root {
        --timeline-height: 180px;
    }

    .timeline-track-labels {
        width: 55px;
    }

    #properties-panel {
        height: auto;
        max-height: 140px;
    }
}

/* High DPI support */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .timeline-canvas,
    .player-canvas {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}