/*
 * Prenship Meet mobile split layout
 *
 * With chat/tool open on mobile:
 * - largest/main video moves to top
 * - second/self video stays at bottom
 * - chat/tools stay in the middle
 */

@media (max-width: 680px) {

    body.pm-mobile-panel-open {
        --pm-mobile-top-video-h: clamp(120px, 19vh, 180px);
        --pm-mobile-bottom-video-h: clamp(105px, 17vh, 160px);
        --pm-mobile-top-gap: 104px;
        --pm-mobile-side-gap: 10px;
        --pm-mobile-bottom-gap: 12px;
        --pm-mobile-panel-gap: 10px;
    }

    /*
     * Top/main video
     */
    body.pm-mobile-panel-open .pm-mobile-upper-video {
        position: fixed !important;
        top: var(--pm-mobile-top-gap) !important;
        left: var(--pm-mobile-side-gap) !important;
        right: var(--pm-mobile-side-gap) !important;

        width: auto !important;
        height: var(--pm-mobile-top-video-h) !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        z-index: 4 !important;
        overflow: hidden !important;

        border-radius: 16px !important;
        border: 1px solid rgba(255, 255, 255, 0.22) !important;
        background: #101827 !important;

        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24) !important;
    }

    /*
     * Bottom/self video
     */
    body.pm-mobile-panel-open .pm-mobile-lower-video {
        position: fixed !important;
        left: var(--pm-mobile-side-gap) !important;
        right: var(--pm-mobile-side-gap) !important;
        bottom: var(--pm-mobile-bottom-gap) !important;

        width: auto !important;
        height: var(--pm-mobile-bottom-video-h) !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        z-index: 4 !important;
        overflow: hidden !important;

        border-radius: 16px !important;
        border: 1px solid rgba(255, 255, 255, 0.20) !important;
        background: #101827 !important;

        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22) !important;
    }

    body.pm-mobile-panel-open .pm-mobile-upper-video video,
    body.pm-mobile-panel-open .pm-mobile-lower-video video {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
        background: #101827 !important;
    }

    /*
     * Chat in the middle between top and bottom video areas
     */
    body.pm-mobile-chat-open #chatRoom {
        top: calc(
            var(--pm-mobile-top-gap) +
            var(--pm-mobile-top-video-h) +
            var(--pm-mobile-panel-gap)
        ) !important;

        right: var(--pm-mobile-side-gap) !important;

        bottom: calc(
            var(--pm-mobile-bottom-gap) +
            var(--pm-mobile-bottom-video-h) +
            var(--pm-mobile-panel-gap)
        ) !important;

        left: var(--pm-mobile-side-gap) !important;

        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;

        z-index: 5 !important;
    }

    /*
     * Tool modals in the middle area too
     */
    body.pm-mobile-tool-open .modal.show {
        display: flex !important;
        align-items: stretch !important;
        padding: 0 10px !important;
    }

    body.pm-mobile-tool-open .modal.show .modal-dialog {
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;

        margin-top: calc(
            var(--pm-mobile-top-gap) +
            var(--pm-mobile-top-video-h) +
            var(--pm-mobile-panel-gap)
        ) !important;

        margin-right: 0 !important;

        margin-bottom: calc(
            var(--pm-mobile-bottom-gap) +
            var(--pm-mobile-bottom-video-h) +
            var(--pm-mobile-panel-gap)
        ) !important;

        margin-left: 0 !important;
    }

    body.pm-mobile-tool-open .modal.show .modal-content {
        max-height: none !important;
        height: 100% !important;
    }

    body.pm-mobile-tool-open .modal.show .modal-body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    /*
     * Whiteboard in the middle area
     */
    body.pm-mobile-tool-open #whiteboard:not(.hidden) {
        position: fixed !important;

        top: calc(
            var(--pm-mobile-top-gap) +
            var(--pm-mobile-top-video-h) +
            var(--pm-mobile-panel-gap)
        ) !important;

        right: var(--pm-mobile-side-gap) !important;

        bottom: calc(
            var(--pm-mobile-bottom-gap) +
            var(--pm-mobile-bottom-video-h) +
            var(--pm-mobile-panel-gap)
        ) !important;

        left: var(--pm-mobile-side-gap) !important;

        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;

        transform: none !important;
        z-index: 5 !important;
    }
}

@media (max-width: 680px) and (max-height: 650px) {
    body.pm-mobile-panel-open {
        --pm-mobile-top-video-h: clamp(100px, 17vh, 145px);
        --pm-mobile-bottom-video-h: clamp(92px, 15vh, 130px);
        --pm-mobile-top-gap: 96px;
    }
}