body{color:#1c1c1e;background:linear-gradient(135deg,#e0eafc 0%,#cfdef3 100%);flex-direction:column;justify-content:center;align-items:center;height:100dvh;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial,sans-serif;display:flex;overflow:hidden}button{cursor:pointer;-webkit-user-select:none;user-select:none;border:none;transition:all .2s cubic-bezier(.4,0,.2,1),transform .1s}button:disabled{opacity:.4;cursor:not-allowed;transform:none!important}button:active:not(:disabled){transform:scale(.96)}.peer-setup-box{box-sizing:border-box;text-align:center;z-index:1000;background:#ffffffd9;border:1px solid #ffffff80;border-radius:24px;flex-direction:column;width:calc(100% - 30px);max-width:400px;height:92dvh;margin:15px auto;padding:30px 20px;display:flex;overflow-y:auto;box-shadow:0 10px 30px #00000014}x .peer-setup-box input{box-sizing:border-box;text-align:center;color:#1c1c1e;background:#f2f2f7;border:1px solid #007aff;border-radius:12px;width:100%;margin:15px 0;padding:14px;font-size:16px}.peer-setup-box button{box-sizing:border-box;color:#fff;background:#007aff;border-radius:12px;width:100%;margin-top:5px;padding:14px 20px;font-size:16px;font-weight:700}.call-overlay{z-index:999;background:#050a0fa6;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.call-card{text-align:center;color:#1c1c1e;box-sizing:border-box;background:#ffffffa6;border:1px solid #ffffffb3;border-radius:28px;flex-direction:column;justify-content:space-between;align-items:center;width:340px;height:560px;padding:30px 24px;display:flex;position:relative;overflow:hidden;box-shadow:0 24px 50px #0000001a,inset 0 1px 2px #ffffff80}#webcamVideo{object-fit:cover;z-index:1;background:#000;border-radius:28px;width:100%;height:100%;position:absolute;top:0;left:0}#localVideoPreview{object-fit:cover;z-index:3;background:#111;border:2px solid #fff3;border-radius:12px;width:90px;height:130px;position:absolute;top:60px;right:20px;box-shadow:0 4px 10px #00000080}.mirror{transform:scaleX(-1)}.card-content{z-index:2;flex-direction:column;justify-content:space-between;width:100%;height:100%;display:flex;position:relative}.avatar-container{background:#ffffff08;border:1px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;width:120px;height:120px;margin:10px auto;display:flex;position:relative}.call-avatar{justify-content:center;align-items:center;width:100%;height:100%;font-size:55px;display:flex}.call-time-bar{color:#fff;letter-spacing:1px;background:#0009;border:1px solid #ffffff1a;border-radius:999px;width:fit-content;margin:0 auto;padding:6px 18px;font-size:14px;font-weight:600;transition:opacity .4s}.call-title{margin-top:10px;font-size:24px;font-weight:700;transition:opacity .4s}.call-status{color:#a0aec0;min-height:20px;margin-top:4px;font-size:14px;transition:opacity .4s}.call-actions{box-sizing:border-box;opacity:1;width:100%;padding:14px;padding-bottom:calc(14px + env(safe-area-inset-bottom));background:#fff9;border:1px solid #fff6;border-radius:22px;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:auto;transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .4s;display:flex;transform:translateY(0)}.call-actions button{color:#1c1c1e;background:#fff;border:1px solid #0000000d;border-radius:14px;flex:calc(33.33% - 8px);min-width:75px;padding:12px 10px;font-size:12px;font-weight:700;box-shadow:0 2px 5px #0000000d}.call-actions button:hover:not(:disabled){background:#f2f2f7}.accept{flex:1;box-shadow:0 4px 15px #34c75933;color:#fff!important;background:#34c759!important}.accept:hover{background:#00c862!important}.decline{flex:1;box-shadow:0 4px 15px #ff3b3033;color:#fff!important;background:#ff3b30!important}.decline:hover{background:#e03026!important}#activeView .call-actions{z-index:10;flex-direction:column;gap:10px;display:flex;position:absolute;bottom:30px;right:15px;box-shadow:none!important;background:0 0!important;border:none!important;width:auto!important;padding:0!important}#activeView .call-actions button{justify-content:center;align-items:center;display:flex;color:#fff!important;background:#000000a6!important;border:1px solid #fff3!important;border-radius:50%!important;flex:none!important;width:30px!important;min-width:30px!important;height:30px!important;padding:0!important;font-size:18px!important;box-shadow:0 4px 10px #0000004d!important}#activeView .call-actions button:hover:not(:disabled){background:#ffffff4d!important}#activeView #endBtn{margin-top:10px;background:#ff3b30cc!important}.controls-hidden #activeView .call-actions{opacity:0;pointer-events:none;transform:translate(120px)}.controls-hidden .call-time-bar,.controls-hidden .call-title,.controls-hidden .call-status{opacity:0;pointer-events:none}.controls-hidden #localVideoPreview{opacity:0;transition:all .3s;transform:scale(0)}.control.active{box-shadow:none;color:#fff!important;background:#007aff80!important;border:1px solid #007aff!important}.hidden{display:none!important}.screen-message{text-align:center;color:#fff;background:#121a21f2;border:1px solid #ffffff1a;border-radius:20px;padding:20px 40px;font-size:24px;font-weight:700}.online-user-item{cursor:pointer;color:#1c1c1e;background:#fff;border:1px solid #0000000d;border-radius:10px;justify-content:space-between;align-items:center;margin-bottom:8px;padding:10px 15px;font-size:14px;transition:all .2s;display:flex;box-shadow:0 2px 5px #00000005}.online-user-item:hover{background:#007aff0d;border-color:#007aff4d;transform:translateY(-2px)}.tab-container{border-bottom:1px solid #0000001a;gap:10px;margin-bottom:15px;padding-bottom:15px;display:flex}.tab-btn{color:#8e8e93;background:0 0;border:1px solid #0000001a;border-radius:8px;flex:1;padding:8px 10px;font-size:14px;font-weight:700;transition:all .3s}.tab-btn.active{color:#007aff;background:#007aff1a;border-color:#007aff}.profile-select,.filter-select{color:#1c1c1e;cursor:pointer;background:#f2f2f7;border:1px solid #0000001a;border-radius:6px;outline:none;width:32%;padding:6px;font-size:12px}.profile-select option,.filter-select option{color:#1c1c1e;background:#fff}.tag-badge{color:#8e8e93;background:#0000000d;border-radius:4px;margin-left:5px;padding:2px 6px;font-size:10px}.webrtc-chat-wrapper{z-index:10;flex-direction:column;justify-content:flex-end;height:35vh;max-height:250px;transition:opacity .3s;display:flex;position:absolute;bottom:15px;left:15px;right:80px;box-shadow:none!important;background:0 0!important;border:none!important;border-radius:0!important}.webrtc-chat-wrapper.hidden{opacity:0;pointer-events:none;display:flex!important}.webrtc-chat-header{display:none!important}.webrtc-chat-messages{scrollbar-width:none;flex-direction:column;flex:none;gap:8px;max-height:100%;padding:0 5px 10px 0;display:flex;overflow-y:auto}.webrtc-chat-messages::-webkit-scrollbar{display:none}.chat-msg-wrapper{flex-direction:row;max-width:100%;align-self:flex-start!important}.chat-msg{word-wrap:break-word;text-shadow:1px 1px 2px #000000e6;font-size:15px;font-weight:600;box-shadow:none!important;color:#fff!important;background:0 0!important;border:none!important;padding:0!important}.chat-msg-wrapper.self .chat-msg{color:gold!important}.chat-time{display:none!important}.chat-sys-msg{text-shadow:1px 1px 2px #000c;border:none;align-self:flex-start;padding:0;font-size:12px;color:#fffc!important;background:0 0!important}.webrtc-chat-input-area{align-items:center;gap:10px;display:flex;background:0 0!important;border:none!important;padding:0!important}.webrtc-chat-input{border-radius:20px;outline:none;flex:1;padding:10px 16px;color:#fff!important;background:#0006!important;border:1px solid #ffffff4d!important}.webrtc-chat-input::placeholder{color:#ffffffb3}.webrtc-chat-send-btn{cursor:pointer;justify-content:center;align-items:center;width:40px;height:40px;padding:0;display:flex;color:#fff!important;background:#007affcc!important;border:1px solid #fff3!important;border-radius:50%!important;font-size:0!important}.webrtc-chat-send-btn:after{content:"➤";color:#fff;margin-left:2px;font-size:18px}.chat-badge{color:#fff;text-align:center;background:#ff3b30;border:1.5px solid #121a21;border-radius:12px;min-width:10px;padding:2px 6px;font-size:10px;font-weight:700;position:absolute;top:-2px;right:-2px;box-shadow:0 2px 5px #00000080}