/* Layout styles - Main structural elements */

/* =================================================================
   THEATER - Main layout wrapper using CSS Grid
   ================================================================= */

.theater {
    display: grid;
    grid-template-columns: 1fr 350px;
    grid-template-areas: 'video chat';
    height: 100vh;
    position: relative;
    transition: all var(--transition-slow);
}

.theater.collapsed {
    grid-template-columns: 1fr 0px;
    grid-template-areas: 'video video';
}

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

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

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

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

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

.theater__chat-section {
    grid-area: chat;
    background: var(--bg-dark);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-dodgers-lg);
    transition: all var(--transition-slow);
    position: relative;
    border-left: 1px solid var(--border-color);
    overflow: hidden;
}

.theater__chat-section.collapsed {
    opacity: 0;
    pointer-events: none;
}