body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #111214; color: #fff; margin: 0; padding: 0; display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }

/* Entrance Setup Dialog Layout Forms */
.setup-box { background: #1e1f22; padding: 30px; border-radius: 12px; text-align: center; width: 280px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); margin: auto; border: 1px solid #2e3033; }
input { padding: 12px; width: calc(100% - 26px); border-radius: 6px; border: 1px solid #3f4147; background: #2b2d31; color: white; font-size: 16px; margin-bottom: 15px; outline: none; -webkit-appearance: none; }
input:focus { border-color: #5865f2; }
.primary-btn { width: 100%; padding: 12px; background: #248046; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; font-weight: bold; }

/* Top Navigation Status Header Bar */
#room-header { display: none; background: #1e1f22; padding: 12px 20px; padding-top: calc(12px + env(safe-area-inset-top)); align-items: center; justify-content: space-between; border-bottom: 1px solid #2e3033; font-size: 14px; }
.share-btn { background: #4f545c; color: white; border: none; padding: 8px 14px; border-radius: 4px; cursor: pointer; font-weight: 500; font-size: 13px; }

/* Real-time Dynamic Video Canvas Layout Grid */
#video-container { display: none; flex: 1; flex-direction: column; padding: 10px; box-sizing: border-box; overflow: hidden; height: 100%; position: relative; }
.grid { display: grid; gap: 10px; width: 100%; height: 100%; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); grid-auto-rows: 1fr; overflow-y: auto; }

@media (max-width: 600px) {
    .grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* === FIXED: STABILIZED REMOTE STAGE FOCUS GRID MODEL === */
/* Desktop Split: Pinned remote item on left, secondary remotes scroll on right */
.grid.has-focus { 
    grid-template-columns: 1fr 240px !important; 
    grid-auto-rows: 140px !important; 
    overflow-y: auto !important; 
    align-content: start;
}
.grid.has-focus .video-tile.focused { 
    grid-column: 1 / 2 !important; 
    grid-row: 1 / span 999 !important; 
    position: sticky !important; 
    top: 0 !important; 
    height: 100% !important; 
    align-self: start;
}
.grid.has-focus .video-tile:not(.focused) { 
    grid-column: 2 / 3 !important; 
    grid-row: auto !important; 
    height: 100% !important; 
}

/* Mobile Split: Pinned remote item on top, secondary remotes scroll on bottom */
@media (max-width: 600px) {
    .grid.has-focus { 
        grid-template-columns: 1fr !important; 
        grid-auto-rows: 110px !important; 
        overflow-y: auto !important; 
    }
    .grid.has-focus .video-tile.focused { 
        grid-column: 1 / -1 !important; 
        grid-row: 1 / span 1 !important; 
        position: sticky !important; 
        top: 0 !important; 
        height: 50vh !important; 
        height: 50dvh !important; 
        z-index: 10 !important; 
    }
    .grid.has-focus .video-tile:not(.focused) { 
        grid-column: 1 / -1 !important; 
        grid-row: auto !important; 
        height: 100% !important; 
    }
}

/* Video Tile Components */
.video-tile { background: #2b2d31; border-radius: 8px; overflow: hidden; position: relative; border: 2px solid #2e3033; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 12px rgba(0,0,0,0.2); transition: border-color 0.2s ease; cursor: pointer; }
video { width: 100%; height: 100%; object-fit: cover; background: #000; pointer-events: none !important; -webkit-user-select: none; user-select: none; }
.name-tag { position: absolute; bottom: 8px; left: 8px; background: rgba(0, 0, 0, 0.7); padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 500; pointer-events: none; z-index: 10; }
.touch-shield { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 8; background: transparent; pointer-events: auto !important; }

/* === FIXED: REQUIREMENT 2 & 3 — FIXED LOCAL CORNER FLOATING PIP CARD CARD === */
#tile_local_camera {
    position: absolute !important;
    bottom: 15px !important;
    right: 15px !important;
    width: 160px !important;
    height: 120px !important;
    z-index: 100 !important;
    border-color: #3f4147 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6) !important;
    border-radius: 8px !important;
    transition: transform 0.2s ease;
}
#tile_local_camera video { transform: scaleX(-1); } /* Safe mirrored selfie track handling */

@media (max-width: 600px) {
    #tile_local_camera {
        width: 110px !important;
        height: 85px !important;
        bottom: 10px !important;
        right: 10px !important;
    }
}

/* Strip iOS native controls overlays */
video::-webkit-media-controls,
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-container,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-mute-button {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    -webkit-appearance: none !important;
}

/* Static footer control docking station */
#control-dock { display: none; background: #1e1f22; padding: 15px 20px; padding-bottom: calc(15px + env(safe-area-inset-bottom)); justify-content: center; gap: 12px; border-top: 1px solid #2e3033; z-index: 999; width: 100%; box-sizing: border-box; }
.dock-btn { background: #35373c; color: white; border: none; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; display: flex; justify-content: center; align-items: center; font-size: 12px; font-weight: 600; min-width: 48px; -webkit-tap-highlight-color: transparent; }
.dock-btn.active-off { background: #ba2525; }
.dock-btn.leave { background: #ba2525; width: auto; border-radius: 24px; padding: 0 20px; font-size: 13px; }