/* --- Filename: styles.css --- */
 
        /* --- Global Resets & Variables --- */
        :root {
            --bg-color: #1a1a1d; /* Dark studio background */
            --panel-bg: #2c2c31; /* Control panel background */
            --panel-bg-translucent: rgba(44, 44, 49, 0.95); /* For overlays */
            --text-color: #f0f0f5; /* Primary text */
            --text-muted: #8a8d93; /* Muted text */
            --accent-color: #007bff; /* Sharp blue accent */
            --accent-hover: #0056b3;
            --record-color: #dc3545; /* Red for recording/critical actions */
            --record-hover: #b02a37;
            --record-glow: rgba(220, 53, 69, 0.7); /* Glow for recording */
            --success-color: #28a745; /* Green for active states */
            --warning-color: #ffc107; /* Yellow for notifications */
            --muted-color: #6c757d; /* Grey for inactive/muted */
            --border-color: #444;
            --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
             height: 100%; /* Needed for full height layout */
             overflow: hidden; /* Prevent body scrollbars */
        }

        body {
            font-family: var(--font-main);
            background-color: var(--bg-color);
            color: var(--text-color);
            display: flex; /* Use flex for centering */
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            /* overflow: hidden; NO - applied to html, body */
            position: relative; /* Needed for absolute positioning */
        }

        /* --- Studio Container & Video Feeds --- */
        .studio-container {
            width: 100%;
            height: 100%; /* Take full viewport height */
            display: grid;
             /* Adjust columns based on available width, ensure min size */
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
             /* Ensure content fills height, adjust rows as needed */
            grid-template-rows: 1fr; /* Single row takes available height */
            gap: 15px; /* Slightly reduced gap */
            padding: 50px 15px 15px 15px; /* Adjust padding: less top, use bottom for controls */
            position: relative;
            align-items: center; /* Align items vertically */
            justify-items: center; /* Center items horizontally */
        }

        .video-feed {
            background-color: #000;
            border: 2px solid var(--border-color);
            border-radius: 8px;
            aspect-ratio: 16 / 9;
            width: 100%;
            /* max-width: 800px; Remove max-width for better grid filling */
            height: 100%; /* Allow height to be controlled by grid */
            max-height: calc(100vh - 70px); /* Limit height based on padding */
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.0em; /* Adjusted base size */
            position: relative;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
        .video-feed::before { /* Participant Name */
            content: attr(data-participant-name);
            position: absolute;
            bottom: 10px;
            left: 10px;
            background-color: rgba(0, 0, 0, 0.6);
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 0.85em; /* Adjusted size */
            z-index: 5;
            display: none; /* Hide initially, show when connected */
        }
         /* Show name when video element is active */
        .video-feed.connected::before {
            display: block;
        }

         /* Style for actual video elements */
        .video-feed video {
            display: block; /* Should be block by default */
            width: 100%;
            height: 100%;
            object-fit: cover;
            background-color: #111; /* Dark bg during loading */
             /* Mirror local feed */
        }
        .video-feed video#local-video-element {
            transform: scaleX(-1);
        }
        /* Style for placeholders */
        .video-placeholder {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: var(--text-muted);
            font-size: 0.9em;
            text-align: center;
            padding: 10px;
            background-color: #111; /* Match video bg */
             z-index: 2; /* Above video bg, below name/timer */
        }
        .video-placeholder i {
            font-size: 2.5em;
            margin-bottom: 10px;
            opacity: 0.5;
        }
        .video-placeholder.hidden {
             display: none;
        }
        /* Specific placeholder text */
        #local-placeholder-text {}
        #remote-placeholder-text {}

        /* --- Recording Indicator --- */
        #recording-indicator {
            position: absolute;
            top: 10px; /* Adjusted position */
            left: 15px;
            background-color: var(--panel-bg-translucent);
            padding: 5px 12px;
            border-radius: 5px;
            font-size: 0.85em; /* Adjusted size */
            display: none;
            align-items: center;
            gap: 8px;
            z-index: 200;
            border: 1px solid var(--record-color);
        }
        #recording-indicator.visible { display: flex; }
        #recording-indicator .icon { color: var(--record-color); font-size: 1em; }
        #recording-indicator .text { color: var(--text-muted); }
        #recording-indicator .timer { font-weight: bold; }

        /* --- Host Control Panel --- */
        #host-controls {
            position: absolute;
            background-color: var(--panel-bg);
            border-radius: 10px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
            display: flex;
            transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
            z-index: 100;
            overflow: hidden;
            border: 1px solid var(--border-color);
            bottom: 15px; /* Adjusted position */
            right: 15px;
            flex-direction: column; /* Default Vertical */
            max-width: calc(100% - 30px); /* Limit width */
             max-height: 250px; /* Limit height */
        }
        #host-controls.horizontal-layout { flex-direction: row; max-height: 100px; max-width: 80%;} /* Adjust horizontal limits */
        #host-controls.vertical-layout { flex-direction: column; }

        /* Panel Header */
        .panel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 10px;
            background-color: rgba(0,0,0,0.2);
            cursor: grab;
            border-bottom: 1px solid var(--border-color);
            flex-shrink: 0;
        }
        #host-controls.horizontal-layout .panel-header { border-bottom: none; border-right: 1px solid var(--border-color); }
        .panel-header .title { font-size: 0.85em; font-weight: bold; color: var(--text-muted); margin-right: auto; padding-left: 5px; }
        .panel-header button { background: none; border: none; color: var(--text-muted); font-size: 0.9em; cursor: pointer; padding: 3px 5px; margin-left: 5px; transition: color 0.2s ease; }
        .panel-header button:hover { color: var(--text-color); }

        /* Panel Content Area */
        .panel-content {
            padding: 10px; /* Reduced padding */
            display: flex;
            gap: 10px;
            overflow-y: auto; /* Allow vertical scroll */
             overflow-x: hidden; /* Prevent horizontal scroll in vertical */
        }
        #host-controls.vertical-layout .panel-content { flex-direction: column; }
        #host-controls.horizontal-layout .panel-content { flex-direction: row; align-items: flex-start; overflow-y: hidden; overflow-x: auto; }

        /* Control Groups */
        .control-group {
            display: flex;
            gap: 8px; /* Reduced gap */
            padding-bottom: 8px;
            margin-bottom: 8px; /* Vertical spacing */
            border-bottom: 1px solid var(--border-color);
             flex-shrink: 0;
        }
         #host-controls.vertical-layout .control-group { flex-direction: row; justify-content: flex-start; flex-wrap: wrap; margin-bottom: 8px; padding-right: 0;}
         #host-controls.horizontal-layout .control-group { flex-direction: column; align-items: center; border-bottom: none; border-right: 1px solid var(--border-color); padding-bottom: 0; padding-right: 8px; margin-right: 8px; margin-bottom: 0;}
         .control-group:last-child { border: none; padding-bottom: 0; margin-right: 0; padding-right: 0; margin-bottom: 0; }


        /* General Button Styling within Panel */
        .panel-content button {
            background-color: rgba(255, 255, 255, 0.05);
            color: var(--text-color);
            border: 1px solid var(--border-color);
            border-radius: 6px; /* Slightly less round */
            min-width: 40px; /* Adjusted size */
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            font-size: 1.1em; /* Adjusted icon size */
            transition: all 0.2s ease;
            position: relative;
            padding: 0 8px; /* Adjusted padding */
            flex-shrink: 0; /* Prevent shrinking */
        }
        .panel-content button:hover { background-color: rgba(255, 255, 255, 0.1); border-color: var(--accent-color); }
        .panel-content button.active { border-color: var(--success-color); color: var(--success-color); background-color: rgba(40, 167, 69, 0.1); }
        .panel-content button.inactive { border-color: var(--muted-color); color: var(--muted-color); background-color: transparent; }
        .panel-content button i { pointer-events: none; }
        .panel-content button span.btn-label { font-size: 0.6em; margin-left: 4px; pointer-events: none; } /* For GUEST label */

        /* Specific Button Styles */
        #record-btn { background-color: var(--record-color); border-color: var(--record-color); color: white; font-weight: bold; font-size: 0.9em; width: auto; padding: 0 12px; }
        #record-btn:hover { background-color: var(--record-hover); border-color: var(--record-hover); }
        #record-btn.recording { background-color: var(--record-hover); animation: pulse-border 1.5s infinite ease-in-out; }
        @keyframes pulse-border { 0% { box-shadow: 0 0 0 0 var(--record-glow); } 70% { box-shadow: 0 0 0 8px rgba(220, 53, 69, 0); } 100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); } }
        #host-leave-btn { background-color: var(--record-color); border-color: var(--record-color); color: white; }
        #host-leave-btn:hover { background-color: var(--record-hover); border-color: var(--record-hover); }

        /* Tooltips */
        .panel-content button::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: 110%; left: 50%; transform: translateX(-50%);
            background-color: #333; color: #fff; padding: 4px 8px; border-radius: 4px;
            font-size: 0.75em; white-space: nowrap; opacity: 0; visibility: hidden;
            transition: opacity 0.2s ease, visibility 0.2s ease; pointer-events: none; z-index: 110;
        }
        .panel-content button:hover::after { opacity: 1; visibility: visible; }

        /* Collapsed State */
        #host-controls.collapsed { width: 45px; height: 45px; padding: 0; overflow: hidden; border-radius: 50%;} /* Make circle when collapsed */
        #host-controls.collapsed .panel-content { display: none; }
        #host-controls.collapsed .panel-header { border: none; background: none; padding: 0; height: 100%;}
        #host-controls.collapsed .panel-header .title { display: none; }
        #host-controls.collapsed .panel-header .layout-toggle-btn { display: none; }
        #host-controls.collapsed .panel-header .collapse-toggle-btn { display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; font-size: 1.3em; margin: 0; }


        /* --- Guest Control Bar (Minimalist) --- */
        #guest-controls {
            position: absolute;
            bottom: 15px; /* Adjusted position */
            left: 50%;
            transform: translateX(-50%);
            background-color: var(--panel-bg-translucent);
            border-radius: 25px; /* Pill shape */
            padding: 8px 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
            display: flex;
            gap: 15px;
            z-index: 90; /* Below host controls */
        }
        #guest-controls button { background: none; border: none; color: var(--text-muted); width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 1.1em; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
        #guest-controls button:hover { background-color: rgba(255, 255, 255, 0.1); color: var(--text-color); }
        #guest-controls button.active { color: var(--success-color); }
        #guest-controls button.inactive { color: var(--muted-color); }
         /* Style for guest muted/cam-off by host */
        #guest-controls button.disabled-by-host {
            opacity: 0.6;
            cursor: not-allowed;
            color: var(--muted-color) !important; /* Ensure grey */
            background-color: transparent !important;
         }
        #guest-leave-btn { color: var(--record-color); }
        #guest-leave-btn:hover { background-color: rgba(220, 53, 69, 0.1); }


        /* --- Media/Screen Share Overlay --- */
        #media-screen { /* Keeping original */
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70%; height: 60%; max-width: 1000px; max-height: 700px; background-color: var(--panel-bg); border: 1px solid var(--accent-color); border-radius: 10px; display: none; flex-direction: column; z-index: 150; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7); overflow: hidden;
        }
        #media-screen.visible { display: flex; }
        #media-screen .panel-header { cursor: default; flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background-color: rgba(0,0,0,0.2); border-bottom: 1px solid var(--border-color); }
        #media-screen .panel-header .title { color: var(--text-color); font-size: 0.9em; font-weight: bold; margin-right: auto; padding-left: 5px;}
        #media-screen .panel-header button { background: none; border: none; color: var(--text-muted); font-size: 0.9em; cursor: pointer; padding: 3px 5px; margin-left: 5px; transition: color 0.2s ease; }
        #media-screen .panel-header button:hover { color: var(--text-color); }
        #media-screen .media-content { flex-grow: 1; padding: 20px; display: flex; justify-content: center; align-items: center; font-size: 1.5em; color: var(--text-muted); text-align: center; background-color: #111; }


        /* --- Private Chat Box --- */
        #chat-box { /* Adjusted position */
            position: absolute; bottom: 15px; right: calc(15px + 45px + 10px); /* Position relative to collapsed host controls */ width: 280px; max-height: 350px; background-color: var(--panel-bg); border-radius: 10px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; z-index: 120; overflow: hidden; transition: all 0.3s ease; border: 1px solid var(--border-color);
        }
        #chat-box .panel-header { cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background-color: rgba(0,0,0,0.2); border-bottom: 1px solid var(--border-color); flex-shrink: 0;}
        #chat-box .panel-header .title { font-size: 0.8em; font-weight: bold; color: var(--text-muted); margin-right: auto; padding-left: 5px; }
        #chat-box .panel-header button { background: none; border: none; color: var(--text-muted); font-size: 0.9em; cursor: pointer; padding: 3px 5px; margin-left: 5px; transition: color 0.2s ease; }
        #chat-box .panel-header button:hover { color: var(--text-color); }
        #chat-box.unread .panel-header { background-color: var(--warning-color); animation: pulse-bg 1.5s infinite ease-in-out; }
        #chat-box.unread .panel-header .title, #chat-box.unread .panel-header button { color: #333; }
        @keyframes pulse-bg { 0% { background-color: var(--warning-color); } 50% { background-color: rgba(255, 193, 7, 0.7); } 100% { background-color: var(--warning-color); } }
        .chat-content { flex-grow: 1; padding: 10px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; background-color: rgba(0,0,0,0.1); }
        .chat-messages { flex-grow: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
        .chat-message { padding: 6px 10px; border-radius: 5px; max-width: 80%; font-size: 0.85em; }
        .chat-message.sent { background-color: var(--accent-color); color: white; align-self: flex-end; }
        .chat-message.received { background-color: #444; color: var(--text-color); align-self: flex-start; }
        .chat-presets { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 8px; border-top: 1px solid var(--border-color); flex-shrink: 0; }
        .chat-presets button { background-color: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-color); color: var(--text-muted); font-size: 0.75em; padding: 3px 8px; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; }
        .chat-presets button:hover { background-color: rgba(255, 255, 255, 0.1); color: var(--text-color); border-color: var(--accent-color); }
        .chat-input { display: flex; padding: 8px; border-top: 1px solid var(--border-color); flex-shrink: 0; }
        .chat-input input { flex-grow: 1; padding: 6px 10px; border: 1px solid var(--border-color); background-color: var(--bg-color); color: var(--text-color); border-radius: 5px 0 0 5px; outline: none; font-size: 0.9em; }
        .chat-input button { height: auto; min-width: auto; padding: 6px 10px; background-color: var(--accent-color); color: white; border: none; border-radius: 0 5px 5px 0; cursor: pointer; transition: background-color 0.2s ease; flex-shrink: 0; font-size: 0.9em;}
        .chat-input button:hover { background-color: var(--accent-hover); }
        #chat-box.collapsed { height: 40px; width: 130px; bottom: 15px; right: 15px;} /* Adjust collapsed position */
        #chat-box.collapsed .chat-content, #chat-box.collapsed .chat-input { display: none; }
        #chat-box.collapsed .panel-header .collapse-toggle-btn i::before { content: "\f077"; } /* Icon up */


        /* --- View Toggling --- */
        /* Default is host-view applied to body */
        .guest-view #host-controls { display: none; }
        .guest-view #guest-controls { display: flex; }
        /* Host view hides guest controls */
        .host-view #guest-controls { display: none; }
        .host-view #host-controls { display: flex; }
        /* Chat always visible but position adjusts slightly */
        .host-view #chat-box { /* Adjust right pos if host controls are not collapsed */
            /* JS might adjust this based on host control state */
        }
        .guest-view #chat-box {
             right: 15px; /* Simpler positioning in guest view */
        }

        /* --- Demo View Switcher (Keep for testing) --- */
        #view-switcher {
            position: fixed; /* Use fixed for testing overlay */
            top: 10px; right: 15px; background-color: var(--warning-color); color: #333; border: none; padding: 5px 10px; border-radius: 5px; cursor: pointer; font-size: 0.8em; z-index: 500; transition: background-color 0.2s ease; opacity: 0.8;
        }
        #view-switcher:hover { background-color: #e0a800; opacity: 1;}


        /* --- Status/Error Overlay --- */
        #status-overlay {
            position: fixed;
            inset: 0;
            background-color: rgba(0, 0, 0, 0.75);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            color: var(--text-color);
            text-align: center;
            padding: 20px;
            display: none; /* Hidden by default */
        }
        #status-overlay p {
            font-size: 1.1em;
            margin-bottom: 15px;
        }
        #status-overlay button {
            padding: 8px 15px;
            border: none;
            border-radius: 5px;
            background-color: var(--accent-color);
            color: white;
            cursor: pointer;
            font-size: 0.9em;
        }
        #status-overlay button:hover {
             background-color: var(--accent-hover);
        }
        #status-overlay .error {
             color: var(--record-color);
             font-weight: bold;
        }

        /* Mobile Adjustments */
        @media (max-width: 768px) {
             .studio-container {
                 grid-template-columns: 1fr; /* Stack feeds */
                 grid-template-rows: auto auto; /* Adjust rows */
                 padding: 50px 10px 10px 10px;
                 gap: 10px;
                 height: auto; /* Allow content height */
                 min-height: 100vh;
             }
             .video-feed {
                 max-height: 40vh; /* Limit video height on mobile */
             }
             #host-controls { max-width: 95%; max-height: 200px; right: 50%; transform: translateX(50%); bottom: 10px;} /* Center controls */
             #chat-box { width: 95%; max-width: 300px; right: 50%; transform: translateX(50%); bottom: 10px; z-index: 110;} /* Center chat */
             #chat-box.collapsed { width: 130px; /* Keep collapsed size */}
             .host-view #chat-box { /* Adjust chat when host controls are visible */
                 bottom: 10px; /* Position above potential host controls */
             }
             .guest-view #chat-box {
                  bottom: calc(10px + 40px + 10px); /* Position above guest controls */
             }
        }