/* Prenship Meet — mobile shared-screen stage
   CSS only. Activates only when a REMOTE screen-share tile exists.
   Remote screen video: no [name] attribute and not the local .self stream. */

@media (max-width: 680px) {

    /* Keep normal meetings completely unchanged.
       These rules exist only while a remote screen share is present. */
    #videoMediaContainer:has(> .videoContainerElement > video:not([name]):not(.self)) {
        display: flex !important;
        align-items: flex-start !important;
        align-content: flex-start !important;
        justify-content: flex-start !important;
    }

    /* Remote shared screen becomes the large primary stage. */
    #videoMediaContainer:has(> .videoContainerElement > video:not([name]):not(.self))
      > .videoContainerElement:has(> video:not([name]):not(.self)) {
        position: absolute !important;
        z-index: 2 !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #101827 !important;
    }

    #videoMediaContainer:has(> .videoContainerElement > video:not([name]):not(.self))
      > .videoContainerElement:has(> video:not([name]):not(.self)) video {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        background: #101827 !important;
    }

    /* In a normal two-person share, the presenter's camera is the first
       named remote video. Keep it in the unused upper-left space. */
    #videoMediaContainer:has(> .videoContainerElement > video:not([name]):not(.self))
      > .videoContainerElement:has(> video[name]):first-of-type {
        position: absolute !important;
        z-index: 30 !important;
        top: 10px !important;
        left: 10px !important;
        width: 112px !important;
        height: 82px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        border: 1px solid rgba(255,255,255,.42) !important;
        border-radius: 12px !important;
        box-shadow: 0 7px 18px rgba(0,0,0,.30) !important;
        background: #101827 !important;
    }

    #videoMediaContainer:has(> .videoContainerElement > video:not([name]):not(.self))
      > .videoContainerElement:has(> video[name]):first-of-type video {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Local camera stays visible but does not cover much of the shared screen. */
    #videoMediaContainer:has(> .videoContainerElement > video:not([name]):not(.self))
      > .videoContainerElementProducer {
        z-index: 31 !important;
        left: auto !important;
        right: 10px !important;
        bottom: 14px !important;
        width: 108px !important;
        height: 78px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        border: 1px solid rgba(255,255,255,.42) !important;
        border-radius: 12px !important;
        box-shadow: 0 7px 18px rgba(0,0,0,.30) !important;
    }

    #videoMediaContainer:has(> .videoContainerElement > video:not([name]):not(.self))
      > .videoContainerElementProducer video {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}