*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#0a0a0a;color:#fff;overflow:hidden}.app{height:100vh;width:100vw;display:flex;flex-direction:column;background:linear-gradient(135deg,#667eea,#764ba2)}.header{text-align:center;padding:2rem;background:#0000004d;position:relative}.header h1{font-size:2rem;margin-bottom:.5rem;font-weight:300}.peer-id{font-size:.9rem;opacity:.8;font-family:monospace;margin-bottom:1rem}.refresh-btn,.share-btn{padding:.5rem 1rem;border:none;border-radius:20px;background:#fff3;color:#fff;cursor:pointer;font-size:.9rem;transition:all .3s ease;margin:.25rem}.refresh-btn:hover,.share-btn:hover{background:#ffffff4d}.share-btn{background:#25d366cc}.share-btn:hover{background:#25d366}.call-setup{flex:1;display:flex;flex-direction:column;padding:1rem 2rem;overflow-y:auto}.friends-section{margin-bottom:2rem}.friends-section h3{font-size:1.2rem;margin-bottom:1rem;text-align:center;opacity:.9}.loading,.no-friends{text-align:center;padding:2rem;opacity:.7;font-style:italic}.friends-list{max-height:300px;overflow-y:auto;border-radius:15px;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.friend-item{display:flex;align-items:center;padding:1rem;border-bottom:1px solid rgba(255,255,255,.1);cursor:pointer;transition:all .3s ease}.friend-item:hover{background:#ffffff1a}.friend-item:last-child{border-bottom:none}.friend-avatar{width:50px;height:50px;border-radius:50%;background:#fff3;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-right:1rem}.friend-info{flex:1}.friend-name{font-weight:600;margin-bottom:.2rem}.friend-id{font-size:.8rem;opacity:.7;font-family:monospace}.call-icon{font-size:1.2rem;opacity:.7}.manual-call{text-align:center}.manual-call h3{font-size:1rem;margin-bottom:1rem;opacity:.8}.input-group{display:flex;flex-direction:column;gap:1rem;width:100%;max-width:300px;margin:0 auto}.peer-input{padding:1rem;border:none;border-radius:25px;font-size:1rem;text-align:center;background:#ffffffe6;color:#333}.peer-input::placeholder{color:#666}.call-btn{padding:1rem 2rem;border:none;border-radius:25px;font-size:1.1rem;font-weight:600;background:#25d366;color:#fff;cursor:pointer;transition:all .3s ease}.call-btn:hover{background:#20b858;transform:translateY(-2px)}.auto-call-info{margin-top:1rem;font-size:.9rem;opacity:.8;font-style:italic;text-align:center}.error{background:#dc3545e6;color:#fff;padding:1rem;border-radius:10px;margin-bottom:1rem;text-align:center}.video-call{background:#000;position:relative}.video-container{position:relative;width:100%;height:100vh;overflow:hidden}.video-grid{width:100%;height:100%;display:grid;gap:2px}.video-grid.single-user{grid-template-columns:1fr}.video-grid.multi-user{grid-template-columns:1fr 1fr;grid-template-rows:repeat(auto-fit,minmax(200px,1fr))}.remote-video{width:100%;height:100%;object-fit:cover;background:#1a1a1a;border-radius:8px}.my-video-container{position:absolute;top:20px;right:20px;width:120px;height:160px;border-radius:15px;overflow:hidden;border:2px solid rgba(255,255,255,.3);background:#333}.my-video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.call-info{position:absolute;top:20px;left:20px;background:#0009;padding:.5rem 1rem;border-radius:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:opacity .3s ease,visibility .3s ease}.call-info.visible{opacity:1;visibility:visible}.call-info.hidden{opacity:0;visibility:hidden}.status{font-size:.9rem;font-weight:500}.controls{position:absolute;bottom:40px;left:50%;transform:translate(-50%);display:flex;gap:20px;align-items:center;transition:opacity .3s ease,visibility .3s ease}.controls.visible{opacity:1;visibility:visible}.controls.hidden{opacity:0;visibility:hidden}.control-btn{width:60px;height:60px;border-radius:50%;border:none;font-size:1.5rem;cursor:pointer;transition:all .3s ease;background:#fff3;color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.control-btn:hover{background:#ffffff4d;transform:scale(1.1)}.control-btn.disabled{background:#dc3545cc}.control-btn.active{background:#25d366cc}.end-call-btn{width:70px;height:70px;border-radius:50%;border:none;font-size:1.8rem;cursor:pointer;background:#dc3545;color:#fff;transition:all .3s ease;transform:rotate(135deg)}.end-call-btn:hover{background:#c82333;transform:rotate(135deg) scale(1.1)}@media (max-width: 768px){.video-container{height:100vh;height:100dvh}.video-grid.multi-user{grid-template-columns:1fr;grid-template-rows:repeat(auto-fit,minmax(200px,1fr))}.my-video-container{width:100px;height:130px;top:max(15px,env(safe-area-inset-top));right:15px}.controls{bottom:max(40px,env(safe-area-inset-bottom) + 20px);gap:15px;z-index:1000;padding:0 20px}.control-btn{width:55px;height:55px;font-size:1.3rem;box-shadow:0 4px 12px #0000004d}.end-call-btn{width:65px;height:65px;font-size:1.6rem;box-shadow:0 4px 12px #0006}.call-info{top:max(15px,env(safe-area-inset-top));left:15px;padding:.4rem .8rem}.status{font-size:.8rem}}@media (max-width: 480px){.header h1{font-size:1.5rem}.input-group{max-width:280px}.my-video-container{width:80px;height:100px}.controls{bottom:max(30px,env(safe-area-inset-bottom) + 15px);gap:12px}.control-btn{width:50px;height:50px;font-size:1.2rem}.end-call-btn{width:60px;height:60px;font-size:1.4rem}}