/* Inside Ads - the two multiview placements.
 *
 *   .ad-tile     MULTIVIEW_CANVAS, one more tile in the video grid. Inherits
 *                .video-item, so it is already a 16:9 box (padding-bottom
 *                56.25%) whose children position absolutely inside it.
 *   .rightbar-ad MULTIVIEW_RIGHT_BAR, a band in the sidebar between the tab
 *                bar and the tab content.
 *
 * Both hold either media we render ourselves (.ad-video / .ad-image) or an
 * empty host the SDK mounts a VAST ad into (.ad-sdk-host).
 */

/* ------------------------------------------------------------- canvas tile */

.video-grid .video-item.ad-tile {
    background-color: #000;
    /* Never takes the white "focused stream" border - it is not selectable. */
    border: 2px solid transparent !important;
    cursor: default;
}

/* A VAST ad the SDK has not rendered yet.
 *
 * IMA measures its host once, when it mounts, and never resizes - so the slot
 * has to exist at its real pixel size before the ad arrives. But an ad that
 * never arrives (no fill, a dead tag, the SDK not coming back on its own
 * cycle) would then sit in the grid as a black tile until the mount timeout.
 * So the tile is laid out at full size and taken out of the flow instead:
 * IMA gets its box, the grid stays as it was, and the tile is promoted into a
 * real slot only once the ad is actually on screen. Width and height are set
 * inline from js/ads.js - `padding-bottom` is how .video-item normally gets
 * its 16:9 box, and that has to give way to explicit pixels here. */
.video-grid .video-item.ad-tile.ad-tile-pending {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    padding-bottom: 0 !important;
}

/* Same idea for the sidebar band: an ad the SDK has not rendered takes no room
 * at all, so an unfilled placement never leaves a gap above the channel list.
 * The band flattens rather than being taken out of flow, because its sticky
 * positioning depends on staying in the column. IMA still needs a real box to
 * measure, so .ad-media inside carries explicit pixels (set from js/ads.js) and
 * overflows the flattened band invisibly. */
.rightbar-ad.ad-pending {
    height: 0 !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    aspect-ratio: auto !important;
    overflow: visible;
    opacity: 0;
    pointer-events: none;
}

/* ---------------------------------------------------------- right bar band */

.rightbar-ad {
    /* Pinned, not scrolled with the content. The sidebar itself is the scroll
     * container and chat.js scrolls it to the bottom whenever the chat tab
     * opens (scrollChatToBottom), which would otherwise drag the band up under
     * the sticky .sidebar-header and leave only a sliver of it showing.
     * `top` is set from js/ads.js to the measured header height. */
    position: sticky;
    z-index: 1111110; /* just under .sidebar-header's 1111111 */
    flex-shrink: 0;
    /* The 24px sides line the ad up with the channel cards, which get that
     * inset from #camerasTab's own padding - the band is a sibling of the tab
     * panes rather than inside one, so it has to repeat it. Below 768px the
     * tab drops its padding and the sidebar becomes a full-width overlay, so
     * the media query further down takes over. */
    /* Bottom: the panes below already open with 24px of their own padding
     * (#camerasTab, #chatContent), so a plain margin here stacks on top of it
     * and left a 40px gulf under the ad where the cards sit 4px apart. Pulling
     * back by that 24px leaves the same 4px the channel list uses between its
     * own cards. */
    margin: 12px 24px calc(4px - 24px);
    border-radius: 12px;
    overflow: hidden;
    background-color: #000;
    /* The band's height follows the sidebar width, so a 16:9 creative fills it
     * whatever the column turns out to be. */
    aspect-ratio: 16 / 9;
}

/* ------------------------------------------------------------ shared media */

.ad-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ad-video,
.ad-image {
    width: 100%;
    height: 100%;
    /* contain, not cover: an ad creative must never be cropped. */
    object-fit: contain;
    background-color: #000;
    display: block;
}

/* The box the SDK mounts a VAST ad into. It brings its own player, skip and
 * unmute chrome; we only own the bounds. */
.ad-sdk-host {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* IMA measures its host once, when it sets the ad up, and writes inline pixel
 * sizes onto its own elements - it never re-measures. Going fullscreen grows
 * the tile underneath it, so without this the ad keeps its old size and sits
 * small in the corner of a much larger slot while the SDK's own chrome (the
 * unmute button) stretches to the new bounds. Inline styles beat a plain rule,
 * hence !important: the host's box is the authority on how big the ad is. */
.ad-sdk-host video,
.ad-sdk-host iframe,
#streann-multiview-canvas,
#streann-multiview-right-bar,
#multiview-canvas-ad-container,
#multiview-right-bar-ad-container {
    width: 100% !important;
    height: 100% !important;
}

/* The SDK's own unmute button is unreachable: a real pointer event at its
 * position is taken by the ad tile instead, so clicking it does nothing. We
 * draw our own volume control (.ad-unmute) and drive the SDK's button from
 * script, so hide theirs rather than show two.
 *
 * Keep it hidden. ads.js is the only thing that presses it, and it updates the
 * streams' audio around each press; a viewer reaching the button directly would
 * change the ad's sound without any of that happening. */
#multiviewCanvasUnmuteButton,
#multiviewRightBarUnmuteButton {
    display: none !important;
}

/* Fill the slot without cropping the creative. */
.ad-sdk-host video {
    object-fit: contain;
}

/* ----------------------------------------------------------------- chrome */

.ad-label {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    padding: 2px 8px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    pointer-events: none;
}

.ad-skip,
.ad-unmute {
    position: absolute;
    /* Above IMA's own layer. It spans the whole slot to catch click-throughs
     * and is stacked very high, so anything of ours below it never sees a
     * pointer event - the ad just treats the tap as a click on itself. */
    z-index: 2147483000;
    border: none;
    cursor: pointer;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.6);
    font-family: 'Inter', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ad-skip {
    bottom: 8px;
    right: 8px;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
}

.ad-unmute {
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 16px;
}

.ad-skip:hover,
.ad-unmute:hover {
    background-color: rgba(0, 0, 0, 0.85);
}

/* ---------------------------------------------------------------- mobile */

@media (max-width: 960px) {
    .rightbar-ad {
        width: calc(100% - 24px);
        max-width: 280px;
        margin: 10px auto 12px;
    }
}

@media (max-width: 600px) {
    .ad-label {
        font-size: 10px;
        padding: 1px 6px;
    }

    .ad-skip {
        height: 28px;
        padding: 0 10px;
        font-size: 12px;
    }

    .ad-unmute {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
}

/* In mobile landscape the sidebar becomes a slim overlay panel; keep the band
 * from eating the channel list. */
@media (max-height: 500px) and (orientation: landscape) {
    .rightbar-ad {
        max-width: 220px;
        margin: 6px auto 8px;
    }
}