/* --- Responsive Design --- */

/* For tablets and smaller desktops */
@media (max-width: 1200px) {
    .controls-content {
        justify-content: flex-start; /* Align items to the start */
    }
}


/* For tablets and larger phones */
@media (max-width: 768px) {
    .controls-content {
        gap: 6px;
        padding: 8px;
        justify-content: center; /* Center items for a cleaner look */
    }

    /* Make progress bar take more space */
    .progress-bar-container {
        flex-basis: 200px;
        flex-grow: 1;
    }

    .input-group input {
        width: auto;
        min-width: 45px;
    }

    /* Ensure touch targets are at least 44x44 */
    .control-btn {
        min-width: 44px;
        height: 44px;
        font-size: 16px; /* improve readability */
    }
    .toggle-btn {
        min-width: 44px;
        height: 44px;
    }
    .source-selector select,
    #qualitySelect,
    .file-select-btn,
    .custom-file-upload {
        min-height: 44px;
        font-size: 16px;
        padding: 6px 10px;
    }
}

/* For most mobile phones in portrait mode */
@media (max-width: 600px) {
    .floating-controls {
        width: 95%;
        max-width: 400px; /* Prevent it from being too wide on landscape */
        left: 50%;
        transform: translateX(-50%);
        bottom: 10px;
    }

    .controls-content {
        /* Create logical groups by forcing breaks */
        flex-wrap: wrap;
        justify-content: center;
    }
    
    /* --- Grouping elements for wrapping --- */
    
    /* Group 1: Core playback controls */
    .source-selector, 
    #qualitySelect, 
    #playPauseBtn, 
    #muteBtn, 
    .volume-bar-container {
        flex-basis: auto;
    }

    /* Group 2: Progress bar and time should be on their own line */
    .progress-bar-container {
        flex-basis: 100%; /* Force it to a new line */
        order: 10; /* Move it down */
        margin-top: 5px;
        height: 12px; /* Make it easier to touch */
    }
    #timeDisplay {
        flex-basis: 100%;
        order: 11;
        text-align: center;
        margin-top: -2px;
        font-size: 0.9em;
    }

    /* Group 3: Shader parameters */
    .input-group {
        order: 12;
        margin-top: 5px;
    }

    /* Group 4: Stats and other controls */
    #fpsDisplay, #screensDisplay, .blessing-btn, .avg-color-label {
        order: 13;
        margin-top: 5px;
    }
    
    .volume-bar-container {
        width: 60px; /* A bit more space for touch */
    }

    /* Enforce 44x44 touch targets on small phones */
    .control-btn {
        min-width: 44px;
        height: 44px;
        font-size: 16px;
    }
    .toggle-btn {
        min-width: 44px;
        height: 44px;
    }
    .source-selector select,
    #qualitySelect,
    .file-select-btn,
    .custom-file-upload {
        min-height: 44px;
        padding: 8px 12px;
        font-size: 16px;
    }
    /* Increase slider thumb for easier drag */
    .slider-thumb {
        width: 16px;
        height: 16px;
        opacity: 1; /* visible on touch devices */
    }
}

/* For very narrow screens */
@media (max-width: 380px) {
    .source-selector, #qualitySelect {
        flex-basis: 45%; /* Allow them to share a line */
    }
    
    #playPauseBtn, #muteBtn, .blessing-btn {
        padding: 5px;
    }

    .controls-content {
        gap: 4px;
    }
}