/* Shared off-canvas controls for full-screen Studio tools. */
.studio-mobile-drawer-trigger,
.studio-mobile-drawer-backdrop,
.studio-mobile-drawer-heading {
    display: none;
}

@media (max-width: 1200px) {
    body.studio-mobile-drawer-open {
        overflow: hidden !important;
    }

    .studio-content[data-mobile-drawers] {
        position: relative;
        isolation: isolate;
        flex-direction: row !important;
        overflow: hidden;
    }

    .studio-drawer-desktop-title {
        display: none !important;
    }

    .studio-mobile-drawer-trigger {
        position: absolute;
        top: 0.75rem;
        z-index: 70;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        padding: 0;
        border: 1px solid rgba(96, 165, 250, 0.65);
        border-radius: 12px;
        background: rgba(30, 41, 59, 0.94);
        color: #bfdbfe;
        box-shadow: 0 10px 28px rgba(2, 6, 23, 0.42);
        cursor: pointer;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .studio-mobile-drawer-trigger--left {
        left: 0.75rem;
    }

    .studio-mobile-drawer-trigger--right {
        right: 0.75rem;
    }

    .studio-mobile-drawer-trigger svg {
        width: 24px;
        height: 24px;
        pointer-events: none;
    }

    .studio-mobile-drawer-trigger:hover,
    .studio-mobile-drawer-trigger:focus-visible,
    .studio-mobile-drawer-trigger[aria-expanded="true"] {
        border-color: #60a5fa;
        background: #2563eb;
        color: #fff;
        outline: none;
    }

    .studio-mobile-drawer-backdrop {
        position: absolute;
        inset: 0;
        z-index: 80;
        display: block;
        border: 0;
        background: rgba(2, 6, 23, 0.68);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 180ms ease, visibility 180ms ease;
    }

    .studio-content[data-mobile-drawers].drawer-open .studio-mobile-drawer-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .studio-content[data-mobile-drawers] .studio-drawer-panel {
        position: absolute !important;
        top: 0;
        bottom: 0;
        z-index: 90;
        display: block !important;
        width: min(88vw, 360px) !important;
        min-width: 0 !important;
        max-width: 360px !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 1rem !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        visibility: hidden;
        pointer-events: none;
        transition: transform 220ms ease, visibility 220ms ease;
        box-shadow: 0 0 40px rgba(2, 6, 23, 0.58);
        will-change: transform;
    }

    .studio-content[data-mobile-drawers] .studio-drawer-panel--left {
        left: 0;
        border-right: 1px solid #475569;
        transform: translateX(-104%);
    }

    .studio-content[data-mobile-drawers] .studio-drawer-panel--right {
        right: 0;
        border-left: 1px solid #475569;
        transform: translateX(104%);
    }

    .studio-content[data-mobile-drawers] .studio-drawer-panel.is-open {
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0);
    }

    .studio-mobile-drawer-heading {
        position: sticky;
        top: -1rem;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        min-height: 58px;
        margin: -1rem -1rem 1rem;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #334155;
        background: rgba(26, 35, 50, 0.98);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .studio-mobile-drawer-heading h2 {
        margin: 0 !important;
        color: #60a5fa;
        font-size: 1rem;
        font-weight: 700;
    }

    .studio-mobile-drawer-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 38px;
        height: 38px;
        padding: 0;
        border: 1px solid #475569;
        border-radius: 10px;
        background: #0f172a;
        color: #e2e8f0;
        cursor: pointer;
    }

    .studio-mobile-drawer-close:hover,
    .studio-mobile-drawer-close:focus-visible {
        border-color: #f87171;
        background: #b91c1c;
        color: #fff;
        outline: none;
    }

    .studio-mobile-drawer-close svg {
        width: 21px;
        height: 21px;
        pointer-events: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .studio-mobile-drawer-backdrop,
    .studio-content[data-mobile-drawers] .studio-drawer-panel {
        transition: none !important;
    }
}