:root {
    --cmu-purple: #7040cf;
    --cmu-purple-dark: #5b2fb3;
    --cmu-blue: #168fc9;
    --cmu-ink: #263746;
    --cmu-line: #d7e0e6;
}

.cmu-mobile-bar,
.cmu-drawer-close,
.cmu-edge-close,
.cmu-drawer-backdrop {
    display: none;
}

@media (max-width: 800px) {
    body.cmu-configurator {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
        background: #f4f6f8;
    }

    .cmu-mobile-bar {
        position: sticky;
        z-index: 9000;
        top: 0;
        display: grid;
        grid-template-columns: repeat(var(--cmu-actions, 1), minmax(0, 1fr));
        gap: 7px;
        box-sizing: border-box;
        width: 100vw;
        max-width: 100vw;
        overflow: hidden;
        padding: 8px;
        border-top: 1px solid var(--cmu-line);
        border-bottom: 1px solid var(--cmu-line);
        background: rgba(255, 255, 255, .97);
        box-shadow: 0 4px 14px rgba(25, 42, 54, .12);
        backdrop-filter: blur(8px);
    }

    .cmu-mobile-bar button,
    .cmu-mobile-bar a {
        display: flex;
        min-width: 0;
        min-height: 46px;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 8px 9px;
        border: 0;
        border-radius: 6px;
        background: var(--cmu-purple);
        color: #fff;
        font: 700 12px/1.15 "Segoe UI", Arial, sans-serif;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        overflow: hidden;
    }

    .cmu-mobile-bar button span:last-child,
    .cmu-mobile-bar a span:last-child {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .cmu-mobile-bar button:active,
    .cmu-mobile-bar a:active {
        transform: translateY(1px);
    }

    .cmu-mobile-bar .cmu-facade-action {
        background: var(--cmu-blue);
    }

    .cmu-mobile-bar .cmu-action-icon {
        flex: 0 0 auto;
        font-size: 16px;
        line-height: 1;
    }

    .cmu-layout {
        display: flex !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100vw !important;
        height: auto !important;
        min-height: 0 !important;
        flex-direction: column !important;
        overflow: visible !important;
    }

    .cmu-stage {
        box-sizing: border-box !important;
        order: 1 !important;
        width: 100% !important;
        height: min(62vh, 620px) !important;
        height: min(62svh, 620px) !important;
        min-height: 390px !important;
        max-height: 620px !important;
        padding: 14px !important;
        overflow: auto !important;
        background: #fafbfc !important;
    }

    .cmu-stage .drawing-area,
    .cmu-stage #ls-svg,
    .cmu-stage #roller-svg,
    .cmu-stage #rs-svg,
    .cmu-stage #is-svg,
    .cmu-stage #sill-svg,
    .cmu-stage #ed-drawing,
    .cmu-stage #gd-svg {
        max-width: 100% !important;
    }

    .cmu-stage .drawing-area {
        width: 100% !important;
        height: 100% !important;
        padding: 4px !important;
    }

    .panel-center.cmu-stage .drawing-area,
    .panel-center.cmu-stage .drawing-paper {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .panel-center.cmu-stage .drawing-paper > svg {
        margin: auto !important;
    }

    .cmu-stage .drawing-paper {
        max-width: 100% !important;
        max-height: 100% !important;
    }

    .ed-stage.cmu-stage {
        min-height: 500px !important;
    }

    .ed-stage.cmu-stage .ed-drawing,
    .gd-stage.cmu-stage #gd-svg {
        width: 100% !important;
        height: 100% !important;
    }

    .cmu-summary {
        box-sizing: border-box !important;
        max-width: 100vw !important;
        order: 2 !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        padding: 18px !important;
        overflow: visible !important;
        border: 0 !important;
        border-top: 1px solid var(--cmu-line) !important;
        background: #fff !important;
    }

    .cmu-summary .cmu-summary-editable {
        position: relative;
        padding-right: 36px !important;
        border-radius: 5px;
        cursor: pointer;
        touch-action: manipulation;
        transition: background-color .15s ease, box-shadow .15s ease;
    }

    .cmu-summary .cmu-summary-editable::after {
        content: '\203A';
        position: absolute;
        top: 50%;
        right: 12px;
        color: var(--cmu-purple);
        font: 700 25px/1 Arial, sans-serif;
        transform: translateY(-52%);
    }

    .cmu-summary .cmu-summary-editable:active {
        background: #f4effd;
    }

    .cmu-summary .cmu-summary-editable:focus-visible {
        outline: 2px solid var(--cmu-purple);
        outline-offset: 2px;
    }

    .cmu-options {
        position: fixed !important;
        z-index: 20001 !important;
        inset: 0 auto 0 0 !important;
        display: block !important;
        width: min(89vw, 365px) !important;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 62px 18px 32px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        border: 0 !important;
        border-right: 1px solid var(--cmu-line) !important;
        background: #fff !important;
        box-shadow: 10px 0 32px rgba(22, 37, 48, .28) !important;
        transform: translateX(-106%) !important;
        transition: transform .24s ease !important;
        overscroll-behavior: contain;
    }

    body.cmu-options-open .cmu-options {
        transform: translateX(0) !important;
    }

    .cmu-drawer-close {
        position: absolute;
        z-index: 2;
        top: 10px;
        right: 12px;
        display: flex;
        min-width: 42px;
        height: 42px;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 50%;
        background: #edf1f4;
        color: var(--cmu-ink);
        font-size: 27px;
        line-height: 1;
        cursor: pointer;
    }

    .cmu-edge-close {
        position: fixed;
        z-index: 20003;
        top: calc(env(safe-area-inset-top, 0px) + 78px);
        left: min(89vw, 365px);
        display: flex;
        width: 28px;
        height: 136px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: 0 12px 12px 0;
        background: linear-gradient(180deg, var(--cmu-purple), var(--cmu-purple-dark));
        box-shadow: 7px 0 18px rgba(48, 27, 92, .28);
        color: #fff;
        font: 800 29px/1 Arial, sans-serif;
        opacity: 0;
        pointer-events: none;
        transform: translateX(-3px);
        transition: opacity .16s ease, transform .18s ease;
        cursor: pointer;
        touch-action: manipulation;
    }

    .cmu-edge-close span {
        display: block;
        transform: translateX(-1px);
    }

    body.cmu-options-open .cmu-edge-close {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
        animation: cmu-edge-close-nudge .72s ease-out .18s 2;
    }

    body.cmu-options-open .cmu-edge-close.is-reminding {
        animation-name: cmu-edge-close-remind;
    }

    @keyframes cmu-edge-close-nudge {
        0%, 100% { transform: translateX(0); }
        50% { transform: translateX(7px); }
    }

    @keyframes cmu-edge-close-remind {
        0%, 100% { transform: translateX(0); }
        50% { transform: translateX(7px); }
    }

    .cmu-drawer-backdrop {
        position: fixed;
        z-index: 20000;
        inset: 0;
        background: rgba(18, 32, 42, .48);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }

    body.cmu-options-open .cmu-drawer-backdrop {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }

    body.cmu-options-open {
        overflow: hidden !important;
    }

    .cmu-options .window-quick-open,
    .cmu-options .ls-quick-open,
    .cmu-options .ed-quick-open,
    .cmu-options .gd-quick-open,
    .cmu-options .roller-facade-assistant-link,
    .cmu-options .rs-facade-link,
    .cmu-configurator .site-facade-button,
    .cmu-configurator .ed-mobile-options-toggle,
    .cmu-configurator .ed-mobile-options-backdrop,
    .cmu-options .ed-mobile-options-close {
        display: none !important;
    }

    .cmu-options input,
    .cmu-options select,
    .cmu-options textarea,
    .cmu-options button {
        min-height: 44px;
    }

    .window-quick-modal,
    .lsq-modal,
    .ed-quick-modal,
    .gd-quick-modal {
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        border-radius: 0 !important;
        resize: none !important;
    }

    .modal,
    .ls-modal,
    .ed-modal,
    .gd-modal,
    .is-dialog,
    .sill-dialog {
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
    }

    /*
     * Option pickers must sit above the mobile options drawer. The window
     * configurator uses regular fixed overlays (rather than native dialogs),
     * so their former z-index left them hidden behind .cmu-options.
     */
    .modal-overlay {
        z-index: 22000 !important;
    }

    .cmu-facade-page .fa-shell {
        width: calc(100% - 16px);
        margin: 10px auto 28px;
    }

    .cmu-facade-page .fa-header {
        align-items: flex-start;
        gap: 8px;
    }

    .cmu-facade-page .fa-header a {
        display: flex;
        min-height: 42px;
        align-items: center;
    }

    .cmu-facade-page .fa-steps {
        position: sticky;
        z-index: 20;
        top: 0;
        margin: 10px 0;
        padding: 8px 3px;
        border-radius: 8px;
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 3px 12px rgba(24, 43, 56, .1);
    }

    .cmu-facade-page .fa-card {
        padding: 14px;
        border-radius: 8px;
    }

    .cmu-facade-page .fa-upload {
        min-height: 150px;
    }

    .cmu-facade-page .fa-canvas-wrap {
        width: 100%;
        max-height: 60svh;
        overscroll-behavior: contain;
    }

    .cmu-facade-page .fa-table-wrap {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .cmu-facade-page .fa-table-wrap table,
    .cmu-facade-page .fa-card > table {
        min-width: 590px;
    }

    .cmu-facade-page .fa-actions {
        z-index: 10;
        margin: 16px -6px -6px;
        padding: 10px 6px 6px;
        border-top: 1px solid #e1e7eb;
    }

    .cmu-facade-page .fa-actions button,
    .cmu-facade-page .fa-inline-actions button {
        min-height: 46px;
    }
}

@media (max-width: 800px) and (prefers-reduced-motion: reduce) {
    body.cmu-options-open .cmu-edge-close {
        animation: none;
    }
}

@media (max-width: 420px) {
    .cmu-mobile-bar {
        gap: 5px;
        padding: 6px;
    }

    .cmu-mobile-bar button,
    .cmu-mobile-bar a {
        min-height: 44px;
        padding: 7px 5px;
        font-size: 11px;
    }

    .cmu-mobile-bar .cmu-action-icon {
        font-size: 14px;
    }

    .cmu-stage {
        height: 56svh !important;
        min-height: 350px !important;
        padding: 8px !important;
    }

    .ed-stage.cmu-stage {
        min-height: 440px !important;
    }
}