/* TeamAlpha editor/result vertical alignment fix V53. Scoped to the canonical AI Studio. */

/* The fixed header already reserves its height through body padding. Keep the
   content row in normal flow, directly below that reserved header space. */
.app-container > .main-content {
    margin-top: 0 !important;
    align-self: stretch;
}

@media (min-width: 993px) {
    .app-container > .main-content {
        height: calc(100dvh - var(--header-height)) !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .app-container > .main-content > .editor-layout {
        flex: 1 1 0% !important;
        min-height: 0 !important;
        margin-top: 0 !important;
        align-self: stretch !important;
        align-items: stretch !important;
    }

    .app-container > .main-content .preview-column {
        min-height: 0 !important;
        overflow: hidden !important;
    }

    /* Processing state: fill the same editor row as PROPERTIES and anchor the
       engine from the row's top edge. The old flex:0 0 auto rule made this
       card collapse to its content height and made the state look displaced. */
    .app-container > .main-content .preview-column > #loading-panel {
        flex: 1 1 0% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin-top: 0 !important;
        align-self: stretch !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
    }

    .app-container > .main-content .preview-column > #loading-panel > #processing-content {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-height: 0 !important;
        margin-top: 0 !important;
        transform: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        align-items: center !important;
    }

    /* Result state: make the dynamic result a bounded flex column. This keeps
       SUCCESS + the three result panels inside the viewport/card instead of
       expanding the loading panel below the editor row. */
    .app-container > .main-content #loading-panel > #result-container[style*="display: block"] {
        flex: 1 1 0% !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: 100% !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .app-container > .main-content #loading-panel > #result-container[style*="display: block"] .result-success-row {
        flex: 0 0 auto !important;
    }

    .app-container > .main-content #loading-panel > #result-container[style*="display: block"] .result-layout {
        flex: 1 1 0% !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-top: 0.5rem !important;
        overflow: hidden !important;
    }

    .app-container > .main-content #loading-panel > #result-container[style*="display: block"] .result-sidebar,
    .app-container > .main-content #loading-panel > #result-container[style*="display: block"] .result-preview-area,
    .app-container > .main-content #loading-panel > #result-container[style*="display: block"] .result-properties-panel {
        height: auto !important;
        min-height: 0 !important;
        max-height: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .app-container > .main-content #loading-panel > #result-container[style*="display: block"] .result-preview-placeholder,
    .app-container > .main-content #loading-panel > #result-container[style*="display: block"] .result-video-preview {
        min-height: 0 !important;
    }

    .app-container > .main-content #loading-panel > #result-container[style*="display: block"] .result-properties-panel {
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
}

@media (max-width: 992px) {
    .app-container > .main-content {
        height: auto !important;
        min-height: 0 !important;
        padding-top: 0.8rem !important;
        overflow: visible !important;
    }

    .app-container > .main-content > .editor-layout {
        margin-top: 0 !important;
        min-height: 0 !important;
    }

    .app-container > .main-content .preview-column > #loading-panel {
        margin-top: 0 !important;
        max-height: none !important;
        min-height: 0 !important;
    }

    .app-container > .main-content #result-container[style*="display: block"] {
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: auto !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    .app-container > .main-content #result-container[style*="display: block"] .result-layout {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin-top: 0.5rem !important;
        overflow: visible !important;
    }

    .app-container > .main-content #result-container[style*="display: block"] .result-sidebar,
    .app-container > .main-content #result-container[style*="display: block"] .result-preview-area,
    .app-container > .main-content #result-container[style*="display: block"] .result-properties-panel {
        height: auto !important;
        min-height: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .app-container > .main-content #result-container[style*="display: block"] .result-preview-area {
        min-height: 250px !important;
    }

    .app-container > .main-content #result-container[style*="display: block"] .result-preview-placeholder,
    .app-container > .main-content #result-container[style*="display: block"] .result-video-preview {
        min-height: 220px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-container > .main-content .result-layout,
    .app-container > .main-content #processing-content {
        animation: none !important;
        transition: none !important;
    }
}

/* EDITOR_LAYOUT_FIX_V53 */
/* RESULT_LAYOUT_FIT_V53 */
/* PROCESSING_TOP_ALIGN_V53 */
/* CSS_FILE_END_V53 */