:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#242424;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}a{color:#646cff;-webkit-text-decoration:inherit;text-decoration:inherit;font-weight:500}a:hover{color:#535bf2}body{place-items:center;min-width:320px;min-height:100vh;margin:0;display:flex}h1{font-size:3.2em;line-height:1.1}button{cursor:pointer;background-color:#1a1a1a;border:1px solid #0000;border-radius:8px;padding:.6em 1.2em;font-family:inherit;font-size:1em;font-weight:500;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.video-container{flex-direction:column;gap:1rem;max-width:1200px;margin:2rem auto;display:flex}.video-wrapper{aspect-ratio:16/9;background-color:#1a1a1a;border-radius:12px;width:100%;position:relative;overflow:hidden;box-shadow:0 4px 6px #0000004d}.video-wrapper.local{border:3px solid #646cff;align-self:flex-end;max-width:300px}.video-player{object-fit:cover;background-color:#000;width:100%;height:100%}.remote-video{min-height:400px}.local-video{min-height:200px}.video-placeholder{color:#888;background-color:#1a1a1a;justify-content:center;align-items:center;width:100%;height:100%;font-size:1.2rem;display:flex;position:absolute;top:0;left:0}@media (max-width:768px){.video-container{flex-direction:column}.video-wrapper.local{max-width:100%}.remote-video{min-height:300px}.local-video{min-height:150px}}.options-container{flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;margin:2rem 0;display:flex}.call-button{color:#fff;cursor:pointer;background-color:#4caf50;border:none;border-radius:8px;padding:1rem 2rem;font-size:1.2rem;font-weight:600;transition:background-color .3s}.call-button:hover:not(:disabled){background-color:#45a049}.call-button:disabled{opacity:.6;cursor:not-allowed}.call-button.calling{background-color:#ff9800;animation:1.5s infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.control-button{color:#fff;cursor:pointer;background-color:#2196f3;border:none;border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;padding:1rem;font-size:1.5rem;transition:all .3s;display:flex}.control-button:hover{background-color:#0b7dda;transform:scale(1.1)}.control-button.muted,.control-button.video-off{background-color:#f44336}.end-call-button{color:#fff;cursor:pointer;background-color:#f44336;border:none;border-radius:8px;padding:1rem 2rem;font-size:1.2rem;font-weight:600;transition:background-color .3s}.end-call-button:hover{background-color:#da190b}.notification{z-index:1000;animation:.3s ease-out slideDown;position:fixed;top:20px;left:50%;transform:translate(-50%)}.notification-content{color:#fff;text-align:center;background-color:#333;border-radius:8px;min-width:200px;padding:1rem 2rem;font-size:1rem;box-shadow:0 4px 6px #0000004d}.incoming-call-notification{z-index:2000;top:50%;transform:translate(-50%,-50%)}.incoming-call-content{min-width:300px;padding:2rem}.call-info{justify-content:center;align-items:center;gap:1rem;margin-bottom:1.5rem;display:flex}.call-icon{font-size:3rem;animation:1s infinite ring}@keyframes ring{0%,to{transform:rotate(0)}10%,30%{transform:rotate(-10deg)}20%,40%{transform:rotate(10deg)}50%{transform:rotate(0)}}.caller-name{margin:0;font-size:1.2rem;font-weight:600}.call-actions{justify-content:center;gap:1rem;display:flex}.accept-button,.reject-button{cursor:pointer;border:none;border-radius:8px;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;transition:all .3s}.accept-button{color:#fff;background-color:#4caf50}.accept-button:hover{background-color:#45a049;transform:scale(1.05)}.reject-button{color:#fff;background-color:#f44336}.reject-button:hover{background-color:#da190b;transform:scale(1.05)}@keyframes slideDown{0%{opacity:0;transform:translate(-50%)translateY(-20px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.user-name-container{z-index:2000;background-color:#000c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.user-name-card{text-align:center;background-color:#fff;border-radius:12px;min-width:300px;padding:2rem;box-shadow:0 4px 20px #0000004d}.user-name-card h2{color:#333;margin-bottom:1.5rem}.user-name-input{box-sizing:border-box;border:2px solid #ddd;border-radius:8px;width:100%;margin-bottom:1rem;padding:.75rem;font-size:1rem}.user-name-input:focus{border-color:#646cff;outline:none}.user-name-submit{color:#fff;cursor:pointer;background-color:#646cff;border:none;border-radius:8px;width:100%;padding:.75rem;font-size:1rem;font-weight:600;transition:background-color .3s}.user-name-submit:hover{background-color:#535bf2}.user-list-container{background-color:#f5f5f5;border-radius:12px;max-width:500px;margin:2rem auto;padding:1.5rem;box-shadow:0 2px 8px #0000001a}.user-list-container h3{color:#333;margin:0 0 1rem;font-size:1.2rem}.no-users{color:#666;text-align:center;padding:1rem;font-style:italic}.user-list{flex-direction:column;gap:.75rem;display:flex}.user-item{background-color:#fff;border-radius:8px;justify-content:space-between;align-items:center;padding:1rem;display:flex;box-shadow:0 1px 3px #0000001a}.user-name{color:#333;font-size:1rem;font-weight:600}.call-user-button{color:#fff;cursor:pointer;background-color:#4caf50;border:none;border-radius:6px;padding:.5rem 1rem;font-size:.9rem;font-weight:500;transition:background-color .3s}.call-user-button:hover{background-color:#45a049}.call-user-button:active{transform:scale(.98)}.App{text-align:center;min-height:100vh;padding:2rem}.App h1{color:#646cff;margin-bottom:1rem}.user-info{color:#666;margin-bottom:1rem}.user-info strong{color:#646cff;font-weight:600}