/* Layout styles - Main structural elements */

/* =================================================================
   THEATER CONTAINER - Main layout wrapper
   ================================================================= */

.theater {
    display: flex;
    height: 100vh;
    position: relative;
    transition: all var(--transition-slow);
}

/* Tablet-specific theater layout */
@media (min-width: var(--breakpoint-md)) and (max-width: calc(var(--breakpoint-lg) - 1px)) {
    .theater {
        flex-direction: row;
        /* Optimized for tablet: more balanced split */
    }
}

/* Mobile-first responsive layout */
@media (max-width: calc(var(--breakpoint-md) - 1px)) {
    .theater {
        flex-direction: column;
    }

    /* On mobile, theater layout stacks vertically */
    .theater__video-section {
        height: 100vh;
        order: 1;
    }

    .theater__chat-section {
        display: none; /* Hidden by default on mobile, shown when toggled */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: var(--z-modal, 1000);
        order: 2;
        transform: translateY(100%); /* Start below screen */
        transition: transform var(--transition-base);
    }

    .theater__chat-section.mobile-visible {
        display: flex;
        transform: translateY(0);
    }
}

/* =================================================================
   VIDEO SECTION - Left side containing video player
   ================================================================= */

.theater__video-section {
    flex: 1;
    background: #000;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: all var(--transition-slow);
}

.theater__video-section.expanded {
    flex: 1;
    width: 100%;
}

/* Tablet-specific video section adjustments */
@media (min-width: var(--breakpoint-md)) and (max-width: calc(var(--breakpoint-lg) - 1px)) {
    .theater__video-section {
        flex-basis: 0; /* Allow flex-grow to control sizing */
        flex-grow: 1;
        min-width: 0; /* Prevent flex item from exceeding container */
    }

    .theater__video-section.expanded {
        flex-grow: 2; /* When chat is collapsed, video takes more space */
    }
}

/* =================================================================
   VIDEO WRAPPER - Contains the video element
   ================================================================= */

.video-wrapper {
    flex: 1;
    position: relative;
    background: #000;
    overflow: hidden;
}

/* =================================================================
   CHAT SECTION - Right side chat panel
   ================================================================= */

.theater__chat-section {
    width: 350px;
    background: var(--bg-dark);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-dodgers-lg);
    transition: transform var(--transition-slow);
    position: relative;
    border-left: 1px solid var(--border-color);
}

.theater__chat-section.collapsed {
    transform: translateX(100%);
    position: absolute;
    right: 0;
    height: 100%;
}

/* Desktop responsive adjustments */
@media (min-width: var(--breakpoint-lg)) {
    .theater__chat-section {
        width: 400px;
    }
}

/* Tablet adjustments */
@media (min-width: calc(var(--breakpoint-md))) and (max-width: calc(var(--breakpoint-lg) - 1px)) {
    .theater__chat-section {
        width: 320px;
    }
}