/* =============================================================================
   PIXPLACE ULTRA-WIDE RESPONSIVE OVERRIDE (v1.1.0)
   Full-width strategy for screens >= 1280px.
   ============================================================================= */

/* 1. ROOT SHELL RESET 
   Force the main application containers to 100% width on all major breakpoints.
*/
#app,
.app,
main,
#generationScreen {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 2. GENERATION FORM GRID (XL/2XL/3XL)
   We use fixed sidebar widths for Modes and Settings, and a fluid 1fr for the Prompt.
*/
@media (min-width: 1280px) {
    .generation-form {
        display: grid !important;
        /* Verified column configuration matching modern-ui standards */
        grid-template-columns: 280px 1fr 260px !important;
        width: 100% !important;
        max-width: none !important;
        gap: 24px !important;
        align-items: start !important;
    }

    #ob-tabs-row {
        justify-content: flex-start !important;
        width: 100% !important;
    }

    /* Force prompt card to stretch */
    .layout-section-prompt {
        width: 100% !important;
        max-width: none !important;
        flex-grow: 1 !important;
    }
}

@media (min-width: 1536px) {
    .generation-form {
        grid-template-columns: 320px 1fr 300px !important;
        gap: 32px !important;
    }
}

@media (min-width: 1920px) {
    .generation-form {
        grid-template-columns: 360px 1fr 320px !important;
        gap: 40px !important;
    }
}

/* 3. CONTENT COMPRESSION PREVENTION
   Ensures that inner wrappers don't inherit narrow max-widths from Tailwind utilities.
*/
#promptCardInner,
#promptTextareaWrapper,
#promptInput {
    width: 100% !important;
    max-width: none !important;
}

/* Kill centering on the screen-level container */
#generationScreen {
    align-items: stretch !important;
}

/* 4. HISTORY LIST STRETCHING
   Ensures the history section also fills the wide viewport.
*/
.history-container,
#generationHistory {
    width: 100% !important;
    max-width: none !important;
}