/**
 * Shared styling for the video tiles that js/livekit-room.js renders.
 *
 * These rules lived only inside cohost.html until 2026-09-09, so every other
 * LiveKit page -- debate.html, watchparty.html, greenroom.html -- rendered the
 * same markup with none of its CSS. The visible cost was picture-in-picture:
 * _applyPipStyle() sets `position: absolute` on the camera box, and with no
 * `position: relative` wrapper to sit inside, the box positioned itself
 * against the viewport and landed off the tile entirely. Participant labels
 * rendered as bare unstyled text on the same three pages.
 *
 * Page chrome stays with the page: the grid container's own geometry, the
 * drag hint, and cohost's share-debug panel are all page-specific and are not
 * here. What is here is only what livekit-room.js itself emits.
 */

.mlnf-livekit-tile {
    position: relative;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mlnf-livekit-video-wrapper {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Default / single-source case: whichever video is live (camera OR screen)
   fills the tile. Picture-in-picture mode (both live) sets
   .mlnf-livekit-pip-video's position/size inline instead -- see
   livekit-room.js _applyPipStyle(). No !important here on purpose: it would
   beat the inline PiP sizing and force both videos to full-tile again, which
   is the exact overlap bug this replaces. */
.mlnf-livekit-video-wrapper video.mlnf-livekit-full {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mlnf-livekit-video-wrapper video.mlnf-livekit-pip-video {
    border: 2px solid rgba(212, 175, 55, 0.9);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
    z-index: 3;
    touch-action: none; /* pointer drag must not also pan/scroll on touch */
    transition: box-shadow 0.15s ease;
}

.mlnf-livekit-video-wrapper video.mlnf-livekit-pip-video:hover {
    box-shadow: 0 2px 16px rgba(212, 175, 55, 0.5);
}

/* Resize grip: bottom-right corner of the PiP box. Positioned in JS (mirrors
   the video element's actual rendered rect) since the box itself moves and
   resizes freely. Interactive-mode-only -- never rendered for the OBS
   view-only source or for a remote viewer. */
.mlnf-livekit-pip-resize {
    position: absolute;
    width: 14px;
    height: 14px;
    z-index: 4;
    cursor: nwse-resize;
    background:
        linear-gradient(135deg, transparent 0 40%, rgba(212, 175, 55, 0.9) 40% 55%, transparent 55% 100%),
        linear-gradient(135deg, transparent 0 65%, rgba(212, 175, 55, 0.9) 65% 80%, transparent 80% 100%);
}

.mlnf-livekit-label {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
    z-index: 2;
    max-width: calc(100% - 16px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A phone gives a tile far less width than a 16/9 box wants. Dropping the
   fixed min-height lets a stacked grid fit two or three tiles on screen
   instead of pushing the controls below the fold. */
@media (max-width: 640px) {
    .mlnf-livekit-tile { min-height: 120px; }
    .mlnf-livekit-label { font-size: 0.75rem; padding: 3px 8px; }
}