/* Layout styles - Main structural elements */

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

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

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

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

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

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

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

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

.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);
}

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