*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100vh;width:100vw;overflow:hidden;touch-action:manipulation}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#000;color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.main-window{display:flex;align-items:center;justify-content:center;height:100vh;width:100%;background:radial-gradient(ellipse at center,#2c3e50 0%,#000000 100%);padding:20px}.container{background:rgba(20,20,20,.75);backdrop-filter:blur(25px) saturate(180%);-webkit-backdrop-filter:blur(25px) saturate(180%);border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:40px 35px;text-align:center;max-width:480px;width:100%;box-shadow:0 16px 60px #0009}h1{font-size:3rem;font-weight:700;margin-bottom:30px;letter-spacing:-1px}.user-info h3,.call-section h4{font-weight:500;color:#ffffffb3;margin-bottom:15px;font-size:1.1rem}.call-section h4{margin-top:30px}.id-display{background:rgba(0,0,0,.3);border-radius:12px;padding:15px;margin-bottom:10px}.id-display span{font-size:1.2rem;font-weight:600;color:#fff;letter-spacing:1px}.id-container{display:flex;gap:10px;align-items:center}.client-id,.friend-id{width:100%;padding:16px;border:1px solid rgba(255,255,255,.2);border-radius:12px;background:rgba(0,0,0,.3);color:#fff;font-size:1rem;text-align:center;transition:all .3s ease}.friend-id{margin-bottom:20px}.buttons{display:flex;flex-direction:column;gap:15px;justify-content:center}.btn{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px 20px;border:none;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;color:#fff}.btn svg{width:26px;height:26px}.btn:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 8px 20px #0000004d}.btn:disabled{opacity:.4;cursor:not-allowed}.video-btn{background-color:#007aff}.audio-btn{background-color:#34c759}.icon-btn{padding:0;width:52px;height:52px;flex-shrink:0}.copy-btn{background-color:#ffffff26}.copy-btn.copied{background-color:#34c759}.copy-btn:hover:not(:disabled){background-color:#ffffff40}.call-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;z-index:1000;opacity:0;transition:opacity .3s ease}.call-modal.active{display:flex;opacity:1}.modal-content{background:rgba(40,40,40,.8);padding:40px;border-radius:20px;text-align:center;box-shadow:0 8px 32px #00000080;transform:scale(.95);transition:transform .3s ease}.call-modal.active .modal-content{transform:scale(1)}.caller{font-size:22px;font-weight:500;color:#fff}.modal-buttons{margin-top:30px;display:flex;flex-wrap:wrap;gap:15px;justify-content:center}.accept-video{background-color:#34c759}.accept-audio{background-color:#007aff}.reject{background-color:#ff3b30}.call-window{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;display:flex;align-items:center;justify-content:center;display:none;opacity:0;transition:opacity .5s ease;z-index:999}.call-window.active{display:flex;opacity:1}.large-video-wrapper{width:100%;height:100%;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.large-video-wrapper[data-orientation=portrait]{width:auto;height:100%;aspect-ratio:9 / 16}.large-video-wrapper[data-orientation=landscape]{width:100%;height:auto;aspect-ratio:16 / 9}.large-video{width:100%;height:100%;object-fit:cover;border-radius:16px}.small-video-wrapper{position:absolute;bottom:20px;right:20px;border-radius:16px;border:2px solid rgba(255,255,255,.3);box-shadow:0 5px 20px #0006;cursor:grab;overflow:hidden;transition:all .3s ease}.small-video-wrapper[data-orientation=landscape]{width:25vmin;max-width:280px;min-width:120px;aspect-ratio:16 / 9}.small-video-wrapper[data-orientation=portrait]{height:25vmin;max-height:280px;min-height:160px;aspect-ratio:9 / 16}.small-video-wrapper:active{cursor:grabbing}.small-video{width:100%;height:100%;object-fit:cover;background:#1c1c1e;pointer-events:none}.video-controls{position:absolute;left:50%;transform:translate(-50%);bottom:calc(30px + env(safe-area-inset-bottom,0px));display:flex;gap:20px;background:rgba(20,20,20,.7);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);padding:15px 30px;border-radius:50px;box-shadow:0 5px 20px #0006}.control-btn{width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;transition:all .3s ease;background-color:#fff3;display:flex;align-items:center;justify-content:center;color:#fff}.control-btn svg{width:32px;height:32px}.control-btn:hover{background-color:#ffffff4d}.control-btn.disabled{background-color:#ff3b30!important}.hangup{background-color:#ff3b30}.hangup:hover{background-color:#ff4d41}@media (max-width: 480px){.container{padding:30px 20px}h1{font-size:2.2rem}.buttons{flex-direction:column}.small-video-wrapper{bottom:calc(130px + env(safe-area-inset-bottom,0px));right:15px}.large-video{border-radius:0}}.lobby-window{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.9);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);display:flex;align-items:center;justify-content:center;z-index:1001;opacity:1;transition:opacity .3s ease}.lobby-content{display:flex;flex-direction:column;align-items:center;gap:20px}.lobby-video{width:80vw;max-width:600px;max-height:60vh;border-radius:16px;background:#1c1c1e;transform:scaleX(-1)}.lobby-controls{display:flex;gap:20px}.join-btn{background-color:#34c759;font-size:1.2rem;padding:15px 40px}.close-btn{background:none;color:#fff9}