:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;height:100vh;overflow:hidden}#root{width:100%;height:100vh;margin:0;padding:0;overflow:hidden}.room-container{display:flex;height:100vh;width:100vw;overflow:hidden}.main-area{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}.room-header{padding:.75rem 1rem;flex-shrink:0;border-bottom:1px solid #333;background:#1a1a1a}.room-title{margin:0;font-size:1.1rem;font-weight:600}.video-area{flex:1;display:flex;overflow:hidden;background:#0a0a0a;padding:1rem}.video-grid{width:100%;height:100%;display:grid;gap:.75rem;align-content:center;justify-content:center}.video-grid[data-count="1"]{grid-template-columns:1fr;max-width:1200px;margin:0 auto}.video-grid[data-count="2"]{grid-template-columns:repeat(2,1fr)}.video-grid[data-count="3"],.video-grid[data-count="4"]{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}.video-grid[data-count="5"],.video-grid[data-count="6"]{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}.video-grid[data-count="7"],.video-grid[data-count="8"],.video-grid[data-count="9"]{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}.video-grid[data-count="10"],.video-grid[data-count="11"],.video-grid[data-count="12"],.video-grid[data-count="13"],.video-grid[data-count="14"],.video-grid[data-count="15"],.video-grid[data-count="16"]{grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;overflow-y:auto}.video-grid:not([data-count="1"]):not([data-count="2"]):not([data-count="3"]):not([data-count="4"]):not([data-count="5"]):not([data-count="6"]):not([data-count="7"]):not([data-count="8"]):not([data-count="9"]):not([data-count="10"]):not([data-count="11"]):not([data-count="12"]):not([data-count="13"]):not([data-count="14"]):not([data-count="15"]):not([data-count="16"]){grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(200px,1fr);overflow-y:auto}.video-container{position:relative;width:100%;max-width:100%;aspect-ratio:16 / 9;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 8px 24px #00000080;flex-shrink:0}.video-element{width:100%;height:100%;object-fit:cover}.video-element.mirrored{transform:scaleX(-1)}.video-label{position:absolute;bottom:8px;left:8px;background:#000000b3;color:#fff;padding:4px 10px;border-radius:6px;font-size:.75rem}.controls-area{display:flex;align-items:center;justify-content:center;gap:1rem;padding:1rem;flex-shrink:0;border-top:1px solid #333;background:#1a1a1a}.control-btn{width:3rem;height:3rem;border-radius:50%;border:none;background:#2a2a2a;color:#fff;font-size:1.25rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;box-shadow:0 2px 8px #0000004d}.control-btn:hover{background:#3a3a3a;transform:scale(1.05)}.control-btn.active{background:#646cff}.control-btn.off{background:#f44}.control-btn.off:hover{background:#c33}.control-btn.leave-btn{background:#f44}.control-btn.leave-btn:hover{background:#c33}.share-dropdown{position:relative}.dropdown-content{position:absolute;bottom:4rem;left:50%;transform:translate(-50%);background:#1a1a1a;border:1px solid #333;border-radius:8px;padding:.75rem;box-shadow:0 10px 25px #00000080;z-index:1000;min-width:250px}.chat-panel{width:320px;height:100vh;background:#1a1a1a;border-left:1px solid #333;display:flex;flex-direction:column;flex-shrink:0}.chat-header{padding:.75rem 1rem;border-bottom:1px solid #333;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}.chat-header h3{margin:0;font-size:.95rem}.close-button{background:none;border:none;font-size:1.25rem;color:#888;cursor:pointer;padding:.25rem}.close-button:hover{color:#fff}.participants-list{padding:.5rem .75rem;border-bottom:1px solid #333;background:#222;flex-shrink:0}.participants-list h4{margin:0 0 .35rem;font-size:.75rem;color:#888}.participants-list ul{list-style:none;padding:0;margin:0}.participant{font-size:.8rem;padding:.15rem 0}.participant.me{color:#646cff}.messages-list{flex:1;padding:.5rem;overflow-y:auto;display:flex;flex-direction:column;gap:.4rem;min-height:0}.message{padding:.4rem .6rem;border-radius:6px;background:#2a2a2a;max-width:90%;font-size:.8rem}.message.self{background:#2a2a3a;border:1px solid #646cff;align-self:flex-end}.message.other{align-self:flex-start}.message-header{display:flex;justify-content:space-between;margin-bottom:.15rem;font-size:.65rem;color:#888}.message-content{word-break:break-word}.chat-input-form{padding:.5rem;border-top:1px solid #333;display:flex;gap:.4rem;flex-shrink:0}.chat-input{flex:1;padding:.4rem .6rem;border-radius:6px;border:1px solid #333;background:#000;color:#fff;font-size:.8rem;margin:0!important}.send-button{background:#646cff;color:#fff;border:none;padding:.4rem .75rem;border-radius:6px;font-weight:600;cursor:pointer;font-size:.8rem}.send-button:hover{background:#535bf2}.share-options{display:flex;flex-direction:column;gap:.5rem}.share-option{background:#2a2a2a;color:#fff;border:1px solid #444;padding:.5rem 1rem;border-radius:6px;font-size:.875rem;cursor:pointer;text-align:left;transition:all .2s;white-space:nowrap}.share-option:hover{background:#3a3a3a;border-color:#646cff}.share-option.active{background:#2a2a3a;border-color:#646cff}.qr-code-container{margin-top:.5rem;padding:.75rem;background:#fff;border-radius:8px;display:flex;justify-content:center;align-items:center}.spinner{width:40px;height:40px;border:3px solid rgba(100,108,255,.1);border-radius:50%;border-top-color:#646cff;animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}input{width:100%;padding:.75rem;border-radius:8px;border:1px solid #333;background:#000;color:#fff;margin-bottom:1.5rem;box-sizing:border-box}.secondary-button{background:#2a2a2a;color:#fff;border:1px solid #444;padding:.5rem 1rem;border-radius:8px;font-size:.875rem;cursor:pointer;transition:all .2s}.secondary-button:hover{background:#3a3a3a;border-color:#646cff}.join-card{background:#1a1a1a;padding:2.5rem;border-radius:1.5rem;box-shadow:0 20px 25px -5px #0000004d;width:100%;max-width:400px}.join-button{background:#646cff;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;width:100%;transition:background .2s}.join-button:hover{background:#535bf2}@media(max-width:900px){.room-container{flex-direction:column}.chat-panel{width:100%;height:50vh;border-left:none;border-top:1px solid #333}.video-area{padding:.5rem}.video-grid{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:.5rem;overflow-y:auto;width:100%}.video-container{width:160px;height:120px;min-height:120px;aspect-ratio:4 / 3;flex-shrink:0}.video-label{font-size:.65rem;padding:2px 6px;bottom:4px;left:4px}.controls-area{padding:.75rem;gap:.5rem}.control-btn{width:2.5rem;height:2.5rem;font-size:1rem}.dropdown-content{min-width:200px}}@media(max-width:480px){.video-container{width:140px;height:105px;min-height:105px}.room-header{padding:.5rem .75rem}.room-title{font-size:.95rem}.control-btn{width:2.25rem;height:2.25rem;font-size:.9rem}}