/* Unified Photo workspace: controls 15%, result 74%, auxiliary slot 10%, with 1% gaps. */
@media screen and (min-width: 768px) {
    html.photo-ai3d-reference-root body.photo-ai3d-reference-page .c_main {
        display: grid !important;
        /* Keep the requested 15:74:10 weights while preventing child min-content from widening a track. */
        grid-template-columns: minmax(0, 15fr) minmax(0, 74fr) minmax(0, 10fr) !important;
        column-gap: 1% !important;
        row-gap: 0 !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
    }

    html.photo-ai3d-reference-root body.photo-ai3d-reference-page .c_main > .c_l {
        grid-column: 1 !important;
        grid-row: 1 !important;
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        box-sizing: border-box !important;
    }

    /* Mode-specific legacy rules pin the left rail with !important; release that pin for the shared grid. */
    html.photo-ai3d-reference-root body.photo-ai3d-reference-page.photo-normal-mode-active:not(.photo-creative-active):not(.photo-gray-mode-active) .c_main > .c_l,
    html.photo-ai3d-reference-root body.photo-ai3d-reference-page.photo-creative-active .c_main > .c_l,
    html.photo-ai3d-reference-root body.photo-ai3d-reference-page.photo-gray-mode-active:not(.photo-creative-active) .c_main > .c_l,
    html.photo-ai3d-reference-root body.photo-ai3d-reference-page.photo-gray-v2-mode-active:not(.photo-creative-active) .c_main > .c_l,
    html.photo-ai3d-reference-root body.photo-ai3d-reference-page.photo-gray-deep-v1-mode-active:not(.photo-creative-active) .c_main > .c_l {
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    html.photo-ai3d-reference-root body.photo-ai3d-reference-page .c_main > .c_l .parmaStyle {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    html.photo-ai3d-reference-root body.photo-ai3d-reference-page .c_main > .c_r {
        grid-column: 2 !important;
        grid-row: 1 !important;
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html.photo-ai3d-reference-root body.photo-ai3d-reference-page .c_main > .c_r .resultPart {
        min-width: 0 !important;
        min-height: 0 !important;
        height: 100% !important;
        box-sizing: border-box !important;
    }

    html.photo-ai3d-reference-root body.photo-ai3d-reference-page .c_main > .c_r .photo-result-shell {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
    }

    html.photo-ai3d-reference-root body.photo-ai3d-reference-page .c_main > .c_r .photo-result-workspace {
        width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
    }

    html.photo-ai3d-reference-root body.photo-ai3d-reference-page #photoWorkspaceAuxSlot {
        grid-column: 3 !important;
        grid-row: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    html.photo-ai3d-reference-root body.photo-ai3d-reference-page #photoHistoryPanel {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        box-sizing: border-box !important;
    }

    html.photo-ai3d-reference-root body.photo-ai3d-reference-page.photo-gray-mode-active:not(.photo-creative-active) .photo-history-panel,
    html.photo-ai3d-reference-root body.photo-ai3d-reference-page.photo-gray-v2-mode-active:not(.photo-creative-active) .photo-history-panel,
    html.photo-ai3d-reference-root body.photo-ai3d-reference-page.photo-gray-deep-v1-mode-active:not(.photo-creative-active) .photo-history-panel {
        display: none !important;
    }

    html.photo-ai3d-reference-root body.photo-ai3d-reference-page.photo-creative-active .photo-history-panel {
        display: flex !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
    html.photo-ai3d-reference-root body.photo-ai3d-reference-page {
        overflow-x: auto !important;
    }

    html.photo-ai3d-reference-root body.photo-ai3d-reference-page .c_main {
        min-width: 1180px !important;
        overflow-x: visible !important;
    }
}

@media screen and (max-width: 767px) {
    html.photo-ai3d-reference-root body.photo-ai3d-reference-page #photoWorkspaceAuxSlot {
        display: none !important;
    }
}

/* PHOTO_GRAY_DS0_THREE_ZONE: the third visible zone is DS0's own control column.
 * The parent page must not render a second auxiliary panel beside the iframe. */
@media screen and (min-width: 768px) {
    html.photo-ai3d-reference-root body.photo-ai3d-reference-page.photo-gray-mode-active:not(.photo-creative-active) .c_main > .c_r,
    html.photo-ai3d-reference-root body.photo-ai3d-reference-page.photo-gray-v2-mode-active:not(.photo-creative-active) .c_main > .c_r,
    html.photo-ai3d-reference-root body.photo-ai3d-reference-page.photo-gray-deep-v1-mode-active:not(.photo-creative-active) .c_main > .c_r {
        grid-column: 2 / 4 !important;
        grid-row: 1 !important;
    }

    html.photo-ai3d-reference-root body.photo-ai3d-reference-page.photo-gray-mode-active:not(.photo-creative-active) #photoWorkspaceAuxSlot,
    html.photo-ai3d-reference-root body.photo-ai3d-reference-page.photo-gray-v2-mode-active:not(.photo-creative-active) #photoWorkspaceAuxSlot,
    html.photo-ai3d-reference-root body.photo-ai3d-reference-page.photo-gray-deep-v1-mode-active:not(.photo-creative-active) #photoWorkspaceAuxSlot {
        display: none !important;
    }
}

/* Route 137 normal mode: keep the submit group at the bottom of the left rail. */
@media screen and (min-width: 768px) {
    html.photo-ai3d-reference-root body.photo-ai3d-reference-page.photo-route-137.photo-normal-mode-active:not(.photo-creative-active):not(.photo-gray-mode-active) .c_main > .c_l .left-bottom-panel {
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        margin-top: auto !important;
    }

    html.photo-ai3d-reference-root body.photo-ai3d-reference-page.photo-route-137.photo-normal-mode-active:not(.photo-creative-active):not(.photo-gray-mode-active) .c_main > .c_l .photo-param-dock {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
}