: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;display:flex;place-content:center;min-width:320px;min-height:100vh}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center;width:100%}.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;width:100%}.video-container{position:relative;aspect-ratio:16 / 9;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 4px 6px -1px #0000001a}.video-element{width:100%;height:100%;object-fit:cover}.video-element.mirrored{transform:scaleX(-1)}.video-label{position:absolute;bottom:12px;left:12px;background:#00000080;color:#fff;padding:4px 12px;border-radius:6px;font-size:.875rem}.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}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}.control-bar{position:fixed;bottom:2rem;left:50%;transform:translate(-50%);display:flex;gap:1rem;background:#1e1e1ecc;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:.75rem 1.5rem;border-radius:2rem;border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 15px -3px #00000080;z-index:100}.control-button{width:3rem;height:3rem;border-radius:50%;border:none;background:#333;color:#fff;font-size:1.25rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.control-button:hover{background:#444;transform:translateY(-2px)}.control-button.disabled{background:#f44}.control-button.disabled:hover{background:#c33}.control-button.leave{background:#f44}.control-button.leave:hover{background:#c33}.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)}}.chat-panel{position:fixed;top:0;right:0;bottom:0;width:320px;background:#1a1a1a;border-left:1px solid #333;display:flex;flex-direction:column;z-index:200;box-shadow:-5px 0 15px #00000080}.chat-header{padding:1rem;border-bottom:1px solid #333;display:flex;justify-content:space-between;align-items:center}.chat-header h3{margin:0;font-size:1.1rem}.close-button{background:none;border:none;font-size:1.5rem;color:#888;cursor:pointer}.close-button:hover{color:#fff}.participants-list{padding:1rem;border-bottom:1px solid #333;background:#222}.participants-list h4{margin:0 0 .5rem;font-size:.9rem;color:#888}.participants-list ul{list-style:none;padding:0;margin:0;max-height:100px;overflow-y:auto}.participant{font-size:.9rem;padding:.25rem 0}.participant.me{color:#646cff}.messages-list{flex:1;padding:1rem;overflow-y:auto;display:flex;flex-direction:column;gap:.75rem}.message{padding:.75rem;border-radius:8px;background:#2a2a2a;max-width:85%}.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:.25rem;font-size:.75rem;color:#888}.message-content{word-break:break-word;font-size:.95rem}.chat-input-form{padding:1rem;border-top:1px solid #333;display:flex;gap:.5rem}.chat-input{margin-bottom:0!important;flex:1}.send-button{background:#646cff;color:#fff;border:none;padding:0 1rem;border-radius:8px;font-weight:600;cursor:pointer}.send-button:hover{background:#535bf2}.has-chat .video-grid{padding-right:320px}