/* Mobile frame on desktop — wraps the entire app in a phone mockup */
@media (min-width: 768px) {

    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    /* Full-screen desktop background */
    html {
        background: linear-gradient(135deg, #0D1226 0%, #1a2a5e 40%, #014d25 100%);
        overflow: hidden;
    }

    /* Decorative circles on background */
    html::before {
        content: '';
        position: fixed;
        width: 400px; height: 400px;
        border-radius: 50%;
        background: rgba(255,255,255,0.04);
        top: -120px; left: -120px;
        pointer-events: none;
    }

    /* The phone frame wrapper — inserted by JS */
    #phone-frame {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 390px;
        height: 844px;
        max-height: calc(100vh - 40px);
        border-radius: 50px;
        background: #fff;
        box-shadow:
            0 0 0 10px #111,
            0 0 0 13px #333,
            0 40px 80px rgba(0,0,0,0.7);
        overflow: hidden;
        z-index: 0;
    }

    /* Notch */
    #phone-frame::before {
        content: '';
        position: absolute;
        top: 0; left: 50%;
        transform: translateX(-50%);
        width: 130px; height: 30px;
        background: #111;
        border-radius: 0 0 22px 22px;
        z-index: 10000;
    }

    /* Side buttons */
    #phone-frame::after {
        content: '';
        position: absolute;
        right: -13px; top: 130px;
        width: 4px; height: 70px;
        background: #333;
        border-radius: 0 3px 3px 0;
        box-shadow: 0 90px 0 #333;
    }

    /* The scrollable content area inside the frame */
    #phone-content {
        position: absolute;
        inset: 0;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        border-radius: 50px;
    }

    #phone-content::-webkit-scrollbar {
        display: none;
    }

    /* bottom-nav: fixed to bottom of phone-frame (outside scroll) */
    #phone-frame > .bottom-nav {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        transform: none !important;
        z-index: 100;
    }

    /* phone-content needs bottom padding so content isn't hidden behind nav */
    #phone-content {
        padding-bottom: 80px !important;
    }

    /* fixed-cta: absolute inside phone-content */
    #phone-content .fixed-cta {
        position: sticky !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        transform: none !important;
        z-index: 99;
    }

    /* modal: covers the full phone-frame */
    .design-modal-overlay {
        position: absolute !important;
        width: 100% !important;
        left: 0 !important;
        top: 0 !important;
        height: 100% !important;
        transform: none !important;
    }
}