@import"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200";:root{--bg-dark: #050507;--bg-card: #0c0c10;--accent: #a855f7;--accent-glow: rgba(168, 85, 247, .5);--danger: #ef4444;--success: #10b981;--glass: rgba(255, 255, 255, .02);--glass-border: rgba(255, 255, 255, .08);--text-primary: #ffffff;--text-secondary: #9ca3af}body{margin:0;padding:0;background-color:var(--bg-dark);font-family:Inter,-apple-system,sans-serif;color:var(--text-primary);overflow:hidden}.sonar-app{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;background:radial-gradient(circle at top,#110820 0%,var(--bg-dark) 100%)}.glow-top{position:fixed;top:-10%;left:-10%;width:50%;height:50%;background:radial-gradient(circle,rgba(168,85,247,.04) 0%,transparent 70%);pointer-events:none}.glow-bottom{position:fixed;bottom:-10%;right:-10%;width:50%;height:50%;background:radial-gradient(circle,rgba(79,70,229,.03) 0%,transparent 70%);pointer-events:none}.sonar-card{width:400px;background:var(--glass);-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);border:1px solid var(--glass-border);padding:40px;border-radius:30px;text-align:center;box-shadow:0 40px 100px #000c,inset 0 1px #ffffff0d}.sonar-logo{font-size:2.2rem;font-weight:900;letter-spacing:-1px;margin-top:0;margin-bottom:30px;background:linear-gradient(to bottom right,#fff,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent}#google-login-btn{margin-bottom:20px}.profile-card{display:flex;align-items:center;background:#0000004d;padding:16px;border-radius:20px;margin-bottom:30px;border:1px solid var(--glass-border)}.profile-img{width:44px;height:44px;border-radius:50%;border:2px solid var(--accent)}.profile-name{margin:0;font-size:14px;font-weight:600;color:var(--text-primary)}.profile-email{margin:0;font-size:11px;color:var(--text-secondary);opacity:.8}.logout-btn{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;padding:8px;border-radius:10px;transition:.2s;display:flex;align-items:center}.logout-btn:hover{background:#ffffff0d;color:var(--danger);transform:scale(1.1)}.lobby-header{font-size:11px;font-weight:700;letter-spacing:1px;color:var(--text-secondary);margin-bottom:15px;display:flex;align-items:center;gap:8px;text-transform:uppercase}.lobby-header.main{font-size:1rem;color:#fff;text-transform:none;margin-bottom:15px;margin-top:5px}.friends-container{max-height:250px;overflow-y:auto;text-align:left;padding-right:5px}.friend-item{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#ffffff05;border-radius:16px;margin-bottom:12px;border:1px solid var(--glass-border);transition:.3s ease}.friend-item:hover{background:#ffffff0a;border-color:#a855f766;box-shadow:0 4px 20px #a855f71a;transform:translateY(-2px)}.friend-info{display:flex;align-items:center}.friend-img{width:34px;height:34px;border-radius:50%;margin-right:12px}.friend-name{font-weight:600;font-size:13px;color:var(--text-primary)}.btn-call{background:var(--text-primary);color:var(--bg-dark);border:none;padding:8px 16px;border-radius:12px;font-size:10px;font-weight:800;cursor:pointer;display:flex;align-items:center;gap:6px;transition:.2s}.btn-call:hover{transform:scale(1.05);box-shadow:0 0 15px #ffffff4d}.empty-lobby{padding:30px 0;font-size:12px;color:var(--text-secondary);font-style:italic;text-align:center;animation:pulse-op 2s infinite}@keyframes pulse-op{0%{opacity:.4}50%{opacity:.8}to{opacity:.4}}.overlay-call{position:fixed;top:0;right:0;bottom:0;left:0;background:#050507f2;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);z-index:5000;display:flex;align-items:center;justify-content:center}.call-modal{text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px}.caller-img-big{width:140px;height:140px;border-radius:50%;border:4px solid var(--accent);position:relative;z-index:10;box-shadow:0 0 40px var(--accent-glow)}.pulsating-ring{position:absolute;width:140px;height:140px;border:2px solid var(--accent);border-radius:50%;animation:pulse-ring 2s infinite}.pulsating-ring.pink{border-color:#ec4899}@keyframes pulse-ring{0%{transform:scale(.9);opacity:1}to{transform:scale(2.5);opacity:0}}.call-actions-row{display:flex;gap:30px;margin-top:20px}.btn-accept-big{background:var(--success);border:none;width:70px;height:70px;border-radius:50%;color:#000;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.3s}.btn-reject-big{background:var(--danger);border:none;width:70px;height:70px;border-radius:50%;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.3s}.btn-accept-big:hover{transform:scale(1.1);box-shadow:0 0 30px var(--success)}.btn-reject-big:hover{transform:scale(1.1);box-shadow:0 0 30px var(--danger)}.video-grid{position:fixed;top:0;right:0;bottom:0;left:0;background:#000;z-index:1000;display:flex;flex-direction:column;padding:20px}.video-main{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:20px}.video-holder{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;background:transparent}.video-obj{width:100%;height:100%;object-fit:cover;background:transparent}.video-obj.mirrored{transform:scaleX(-1)}.video-off-placeholder{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:transparent;z-index:1}.video-label{position:absolute;bottom:20px;left:20px;background:#0009;padding:6px 16px;border-radius:12px;font-size:11px;font-weight:600;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.call-controls-bar{height:80px;display:flex;align-items:center;justify-content:center;gap:15px;background:#00000080;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--glass-border);padding:0 30px;border-radius:40px;margin:0 auto;border-bottom:none}.ctrl-btn{background:#ffffff1a;border:none;width:50px;height:50px;border-radius:50%;color:#fff;cursor:pointer;transition:.3s;display:flex;align-items:center;justify-content:center}.ctrl-btn:hover{background:#fff3;transform:translateY(-2px)}.ctrl-btn.danger{background:var(--danger);color:#fff}.ctrl-btn.danger:hover{box-shadow:0 0 20px #ef444466}.ctrl-divider{width:1px;height:30px;background:var(--glass-border);margin:0 5px}.ctrl-btn.hangup{background:var(--danger)}.ctrl-btn.hangup:hover{transform:scale(1.1);box-shadow:0 0 30px #ef444480}.video-off-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#111;z-index:1}.animate-in{animation:fadeIn .4s cubic-bezier(.16,1,.3,1)}@keyframes fadeIn{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.custom-scrollbar::-webkit-scrollbar{width:4px}.custom-scrollbar::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:10px}.search-box{position:relative;margin-bottom:25px;display:flex;align-items:center}.search-icon{position:absolute;left:15px;color:var(--text-secondary);pointer-events:none;font-size:20px;display:flex;align-items:center}.search-input{width:100%;padding:12px 15px 12px 45px;background:#0006;border:1px solid var(--glass-border);border-radius:15px;color:#fff;font-size:13px;transition:.3s;box-sizing:border-box}.search-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 15px #a855f726}.search-results{position:absolute;top:100%;left:0;right:0;background:#0f0f15;border:1px solid var(--glass-border);border-radius:15px;margin-top:8px;max-height:200px;overflow-y:auto;z-index:100;box-shadow:0 10px 30px #00000080}.search-item{display:flex;align-items:center;padding:10px 15px;border-bottom:1px solid rgba(255,255,255,.05)}.search-item:last-child{border-bottom:none}.search-img{width:30px;height:30px;border-radius:50%;margin-right:12px}.search-name{font-size:12px;flex:1;text-align:left}.btn-add{background:var(--accent);color:#fff;border:none;padding:5px 12px;border-radius:10px;font-size:10px;font-weight:700;cursor:pointer;transition:.2s}.btn-add:hover{transform:scale(1.05);filter:brightness(1.2)}.status-text{padding:15px;font-size:12px;color:var(--text-secondary)}.requests-section{margin-bottom:20px}.friend-item.request{border-color:#10b98133;background:#10b9810d}.request-actions{display:flex;gap:8px}.btn-accept-mini,.btn-reject-mini{width:28px;height:28px;border-radius:8px;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s}.btn-accept-mini{background:var(--success);color:#000}.btn-reject-mini{background:var(--danger);color:#fff}.btn-accept-mini:hover,.btn-reject-mini:hover{transform:scale(1.15)}.divider{height:1px;background:var(--glass-border);width:100%}.chat-view{display:flex;flex-direction:column;height:500px;background:#0003;border-radius:20px;overflow:hidden}.chat-header{display:flex;align-items:center;padding:15px;background:#ffffff08;border-bottom:1px solid var(--glass-border);gap:12px}.chat-avatar{width:35px;height:35px;border-radius:50%;border:1px solid var(--accent)}.chat-user-info{flex:1;text-align:left;display:flex;flex-direction:column}.chat-user-name{font-size:13px;font-weight:700}.chat-status{font-size:10px;color:var(--text-secondary)}.chat-status.online{color:var(--success)}.btn-back,.btn-chat-call{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;padding:5px;border-radius:8px;transition:.2s;display:flex;align-items:center}.btn-back:hover{background:#ffffff0d;color:#fff}.btn-chat-call{color:var(--accent)}.btn-chat-call:hover{background:var(--accent-glow);color:#fff}.chat-history{flex:1;padding:15px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}.msg-row{display:flex;width:100%;transition:.3s}.msg-row.mine{justify-content:flex-end}.msg-row.theirs{justify-content:flex-start}.msg-bubble{max-width:80%;padding:10px 14px;border-radius:18px;position:relative;text-align:left}.msg-row.mine .msg-bubble{background:var(--accent);color:#fff;border-bottom-right-radius:4px;box-shadow:0 4px 15px #a855f733}.msg-row.theirs .msg-bubble{background:#ffffff0d;border:1px solid var(--glass-border);color:var(--text-primary);border-bottom-left-radius:4px}.msg-bubble p{margin:0;font-size:13px;line-height:1.4}.msg-time{font-size:9px;opacity:.6;display:block;margin-top:4px;text-align:right}.chat-input-area{padding:15px;display:flex;gap:10px;background:#0003;border-top:1px solid var(--glass-border)}.chat-input{flex:1;background:#ffffff08;border:1px solid var(--glass-border);padding:10px 15px;border-radius:12px;color:#fff;font-size:13px}.chat-input:focus{outline:none;border-color:var(--accent)}.btn-send{background:var(--accent);color:#fff;border:none;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s}.btn-send:hover{transform:scale(1.05);box-shadow:0 0 15px var(--accent-glow)}.empty-chat{font-size:12px;color:var(--text-secondary);opacity:.5;margin-top:40px}.status-indicator{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-secondary)}.dot.online{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 8px var(--success)}.dot.offline{width:8px;height:8px;border-radius:50%;background:#6b7280}.video-layout-container{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:5000;display:flex;overflow:hidden;background:transparent}.call-screen-main{flex:1;position:relative;background-color:#16191d;background-image:url(https://www.transparenttextures.com/patterns/dust.png),radial-gradient(circle at 50% 50%,rgba(168,85,247,.15) 0%,transparent 80%);background-blend-mode:color-dodge;display:flex;flex-direction:column;padding:60px 20px 40px;z-index:5001}.call-top-actions{display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 10px;z-index:200;animation:fadeInDown .6s ease-out}.top-act-btn{width:40px;height:40px;border-radius:50%;background:#28283266;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s}.top-act-btn:hover{background:#ffffff1a}.top-act-btn .material-symbols-outlined{font-size:22px}.call-header-central{text-align:center}.call-header-central h3{margin:0;font-size:1.2rem;font-weight:500;color:#fff}.call-header-central p{margin:2px 0 0;font-size:.85rem;color:#fff9}.call-body{flex:1;display:flex;align-items:center;justify-content:center;position:relative}.major-avatar-box{position:relative;width:240px;height:340px;background:#ffffff05;border:1px solid rgba(255,255,255,.05);border-radius:28px;display:flex;align-items:center;justify-content:center;box-shadow:0 20px 60px #00000080;transition:all .3s ease}.major-avatar-box.talking-glow{border-color:var(--accent);box-shadow:0 0 40px #a855f74d;transform:scale(1.02)}.major-avatar-box.talking-glow .major-avatar{border-color:var(--accent);box-shadow:0 0 20px var(--accent-glow)}.major-avatar{width:140px;height:140px;border-radius:50%;object-fit:cover;border:4px solid rgba(168,85,247,.4);z-index:2;box-shadow:0 0 30px #a855f733}.pulsating-bg{position:absolute;width:100%;height:100%;background:#a855f726;border-radius:50%;animation:pulseAvatar 2s infinite}@keyframes pulseAvatar{0%{transform:scale(.9);opacity:.7}70%{transform:scale(1.3);opacity:0}to{transform:scale(.9);opacity:0}}.self-video-pip{position:absolute;width:130px;height:185px;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.15);box-shadow:0 10px 30px #000c;z-index:20;background:#000;transition:all .4s cubic-bezier(.175,.885,.32,1.275);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.self-video-pip.dragging{cursor:grabbing;box-shadow:0 20px 50px #000000e6;z-index:21}.self-video-pip.corner-tr{top:10px;right:15px}.self-video-pip.corner-tl{top:10px;left:15px}.self-video-pip.corner-br{bottom:10px;right:15px}.self-video-pip.corner-bl{bottom:10px;left:15px}.minimized-call-bar{position:fixed;top:0;left:0;right:0;height:50px;background:#075e54;display:flex;align-items:center;justify-content:space-between;padding:0 15px;z-index:2000;cursor:pointer;box-shadow:0 4px 10px #0000004d}.min-call-info{display:flex;align-items:center;gap:10px;color:#fff}.min-call-icon{font-size:18px!important;animation:pulseCall 1.5s infinite}.min-call-text{font-size:13px;font-weight:500}.min-call-actions{display:flex;gap:15px}.min-act-btn{background:transparent;border:none;color:#fff;cursor:pointer;display:flex;align-items:center}.min-act-btn.hangup{color:#ff5c5c}@keyframes pulseCall{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.remote-video-fullscreen{position:absolute;top:0;left:0;width:100%;height:100%;z-index:5;background:#000}.capsule-controls-bar{background:#1c1c23f2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:12px 25px;border-radius:40px;display:flex;align-items:center;gap:15px;margin:0 auto;border:1px solid rgba(255,255,255,.05);box-shadow:0 15px 35px #0009;z-index:100}.cap-btn{width:50px;height:50px;border-radius:50%;border:none;background:#ffffff0d;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}.cap-btn .material-symbols-outlined{font-size:26px}.cap-btn:hover{background:#ffffff26;transform:translateY(-3px)}.cap-btn.active{background:#a855f733;border:1px solid var(--accent);color:var(--accent)}.cap-btn.off{background:#ef444426;color:var(--danger)}.cap-btn.hangup-red{background:#ef4444!important;color:#fff!important;width:62px;height:62px}.cap-btn.hangup-red:hover{background:#dc2626!important;transform:scale(1.1);box-shadow:0 0 20px #ef444466}.cap-btn.accept-green{background:#10b981!important;color:#fff!important;width:62px;height:62px}.in-call-chat-sidebar{width:350px;background:#0f0f14fa;border-left:1px solid var(--glass-border);display:flex;flex-direction:column;-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);z-index:200}.chat-status-mini{width:8px;height:8px;border-radius:50%;display:inline-block;margin-left:5px}.chat-status-mini.on{background:var(--success);box-shadow:0 0 5px var(--success)}.chat-status-mini.off{background:#6b7280}.sonar-toast{position:fixed;top:20px;left:50%;transform:translate(-50%);z-index:9999;background:#1e1e28d9;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:1px solid rgba(248,113,113,.3);padding:12px 20px;border-radius:12px;display:flex;align-items:center;box-shadow:0 10px 25px #00000080;min-width:300px;color:#fff;justify-content:space-between}.toast-close{background:none;border:none;color:var(--text-secondary);cursor:pointer;margin-left:15px;display:flex;align-items:center;padding:4px}.toast-close:hover{color:#fff}@media (max-width: 800px){.in-call-chat-sidebar{position:fixed;right:0;top:0;bottom:80px;width:100%;z-index:100}.video-layout-container.with-chat .video-grid{opacity:.3;pointer-events:none}}.material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}@tailwind base;@tailwind components;@tailwind utilities;:root{background-color:#050507;color-scheme:dark}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.animate-in{animation:fadeIn .8s cubic-bezier(.4,0,.2,1) forwards}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#a855f7}video{border-radius:30px}