*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(135deg,#121212,#0a0a0a);color:#e0e0e0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow-x:hidden}.App,body{min-height:100vh}.App{align-items:center;background:radial-gradient(circle at 20% 80%,#bb86fc1a 0,#0000 50%),radial-gradient(circle at 80% 20%,#03dac61a 0,#0000 50%),#121212;display:flex;justify-content:center;padding:20px}.joinChatContainer{animation:slideUp .6s ease-out;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#1d1d1df2;border:1px solid #bb86fc33;border-radius:24px;box-shadow:0 20px 40px #00000080,0 0 60px #bb86fc1a,inset 0 1px 0 #ffffff1a;max-width:400px;padding:40px;text-align:center;width:100%}.joinChatContainer h3{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#bb86fc,#03dac6);-webkit-background-clip:text;background-clip:text;color:#e0e0e0;font-size:28px;font-weight:700;margin-bottom:30px}.joinChatContainer input{background:#2d2d2dcc;border:2px solid #bb86fc4d;border-radius:16px;color:#e0e0e0;font-size:16px;font-weight:500;margin:12px 0;outline:none;padding:16px 20px;transition:all .3s cubic-bezier(.4,0,.2,1);width:100%}.joinChatContainer input::placeholder{color:#e0e0e099}.joinChatContainer input:focus{background:#1f1b24e6;border-color:#bb86fc;box-shadow:0 0 0 4px #bb86fc1a,0 8px 25px #bb86fc33;transform:translateY(-2px)}.joinChatContainer button{background:linear-gradient(135deg,#bb86fc,#9c27b0);border:none;border-radius:16px;box-shadow:0 8px 25px #bb86fc4d;color:#000;cursor:pointer;font-size:16px;font-weight:700;letter-spacing:1px;margin-top:20px;padding:16px 20px;text-transform:uppercase;transition:all .3s cubic-bezier(.4,0,.2,1);width:100%}.joinChatContainer button:hover{background:linear-gradient(135deg,#c69efc,#a855f7);box-shadow:0 12px 35px #bb86fc66;transform:translateY(-3px)}.joinChatContainer button:active{transform:translateY(-1px)}@media (max-width:480px){.joinChatContainer{border-radius:20px;margin:20px;padding:30px 20px}.joinChatContainer h3{font-size:24px}.joinChatContainer button,.joinChatContainer input{font-size:15px;padding:14px 16px}.App{padding:10px}.joinChatContainer{margin:0 10px;max-width:none;width:calc(100% - 20px)}}@media (max-width:360px){.App{padding:5px}.joinChatContainer{margin:0 5px;width:calc(100% - 10px)}}.fadeIn{animation:fadeIn .5s ease-in}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.error-message{animation:errorSlideIn .4s cubic-bezier(.4,0,.2,1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#f4433626;border:2px solid #f4433666;border-radius:12px;box-shadow:0 4px 15px #f4433633,inset 0 1px 0 #ffffff1a;color:#ff6b6b;font-size:14px;font-weight:600;margin-bottom:20px;overflow:hidden;padding:14px 18px;position:relative;text-align:center}.error-message:before{animation:errorShimmer 2s infinite;background:linear-gradient(90deg,#0000,#f443361a,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;width:100%}.error-message:after{color:#ff6b6b;content:"⚠";font-size:16px;left:12px;opacity:.8;position:absolute;top:50%;transform:translateY(-50%)}.error-message{padding-left:40px}@keyframes errorSlideIn{0%{opacity:0;transform:translateY(-15px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes errorShimmer{0%{left:-100%}to{left:100%}}.error-message:hover{background:#f4433633;border-color:#f4433699;box-shadow:0 6px 20px #f4433640,inset 0 1px 0 #ffffff26;transform:translateY(-1px);transition:all .3s cubic-bezier(.4,0,.2,1)}@media (max-width:480px){.error-message{border-radius:10px;font-size:13px;margin-bottom:16px;padding:12px 16px 12px 36px}.error-message:after{font-size:14px;left:10px}}@media (max-width:360px){.error-message{font-size:12px;margin-bottom:14px;padding:10px 14px 10px 32px}.error-message:after{font-size:13px;left:8px}}:root{--primary-purple:#bb86fc;--primary-teal:#03dac6;--secondary-purple:#9c27b0;--secondary-teal:#10dac6;--bg-primary:#1d1d1d;--bg-secondary:#2d2d2d;--bg-tertiary:#1f1b24;--bg-quaternary:#191e1e;--bg-glass:#1d1d1df2;--text-primary:#e0e0e0;--text-secondary:#e0e0e0cc;--text-muted:#e0e0e099;--text-disabled:#e0e0e080;--success:#4caf50;--success-light:#66bb6a;--error:#f44336;--error-light:#ff6b6b;--warning:#ffc107;--info:#2196f3;--info-light:#64b5f6;--glass-border:#bb86fc33;--glass-border-hover:#bb86fc66;--shadow-primary:0 25px 50px #0009;--shadow-accent:0 0 80px #bb86fc1a;--highlight:#ffffff1a;--gradient-primary:linear-gradient(135deg,var(--primary-purple) 0%,var(--primary-teal) 100%);--gradient-purple:linear-gradient(135deg,var(--primary-purple) 0%,var(--secondary-purple) 100%);--gradient-dark:linear-gradient(135deg,var(--bg-glass) 0%,#14141ef2 100%)}.chat-window{animation:slideUp .6s ease-out;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#1d1d1df2;background:var(--bg-glass);border:1px solid #bb86fc33;border:1px solid var(--glass-border);border-radius:24px;box-shadow:0 25px 50px #0009,0 0 80px #bb86fc1a,inset 0 1px 0 #ffffff1a;box-shadow:var(--shadow-primary),var(--shadow-accent),inset 0 1px 0 var(--highlight);display:flex;flex-direction:column;height:85vh;max-width:800px;overflow:hidden;width:100%}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.chat-header{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#bb86fc1a,#03dac61a);border-bottom:1px solid #bb86fc33;border-bottom:1px solid var(--glass-border);display:flex;justify-content:space-between;padding:20px 25px}.chat-header-left{display:flex;flex-direction:column;gap:8px}.chat-header-right{align-items:center;display:flex;gap:12px}.chat-header-left p{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#bb86fc,#03dac6);background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;color:#e0e0e0;color:var(--text-primary);font-size:18px;font-weight:700;margin:0}.user-count{-webkit-text-fill-color:#03dac6!important;-webkit-text-fill-color:var(--primary-teal)!important;background:#03dac61a!important;border:1px solid #03dac64d;border-radius:20px;color:#03dac6!important;color:var(--primary-teal)!important;font-weight:500!important}.call-status,.user-count{font-size:14px!important;padding:8px 16px;width:-webkit-fit-content;width:fit-content}.call-status{-webkit-text-fill-color:#66bb6a!important;-webkit-text-fill-color:var(--success-light)!important;animation:callPulse 2s infinite;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#4caf5026,#388e3c26)!important;border:1px solid #4caf504d;border-radius:20px;color:#4caf50!important;color:var(--success)!important;font-weight:600!important}@keyframes callPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.02)}}.header-btn{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#2d2d2dcc;border:2px solid;border-radius:16px;box-shadow:0 4px 15px #0003,inset 0 1px 0 #ffffff1a;box-shadow:0 4px 15px #0003,inset 0 1px 0 var(--highlight);cursor:pointer;display:inline-flex;font-size:14px;font-weight:600;gap:6px;height:48px;justify-content:center;letter-spacing:.5px;min-width:100px;outline:none;overflow:hidden;padding:12px 20px;position:relative;text-transform:uppercase;transition:all .3s cubic-bezier(.4,0,.2,1)}.header-btn:before{background:linear-gradient(90deg,#0000,#ffffff1a,#0000);background:linear-gradient(90deg,#0000,var(--highlight),#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s ease;width:100%}.header-btn:hover:before{left:100%}.header-btn.audio-btn{background:#4caf5026;border-color:#4caf5066;color:#66bb6a;color:var(--success-light)}.header-btn.audio-btn:hover{background:#4caf5040;border-color:#4caf5099;box-shadow:0 8px 25px #4caf504d,inset 0 1px 0 #ffffff26;color:#81c784;transform:translateY(-2px)}.header-btn.video-btn{background:#2196f326;border-color:#2196f366;color:#64b5f6;color:var(--info-light)}.header-btn.video-btn:hover{background:#2196f340;border-color:#2196f399;box-shadow:0 8px 25px #2196f34d,inset 0 1px 0 #ffffff26;color:#90caf9;transform:translateY(-2px)}.header-btn.logout-btn{background:#f4433626;border-color:#f4433666;color:#ff6b6b;color:var(--error-light)}.header-btn.logout-btn:hover{background:#f4433633;border-color:#f4433699;box-shadow:0 8px 25px #f443364d,inset 0 1px 0 #ffffff1a;box-shadow:0 8px 25px #f443364d,inset 0 1px 0 var(--highlight);color:#ff8a80;transform:translateY(-2px)}.header-btn.end-call-btn{animation:endCallPulse 1.5s infinite;background:#f4433626;border-color:#f4433666;color:#ff6b6b;color:var(--error-light)}@keyframes endCallPulse{0%,to{box-shadow:0 4px 15px #f4433633,inset 0 1px 0 #ffffff1a;box-shadow:0 4px 15px #f4433633,inset 0 1px 0 var(--highlight)}50%{box-shadow:0 6px 20px #f4433666,inset 0 1px 0 #ffffff1a;box-shadow:0 6px 20px #f4433666,inset 0 1px 0 var(--highlight)}}.header-btn.end-call-btn:hover{background:#f4433640;border-color:#f4433699;box-shadow:0 8px 25px #f4433666,inset 0 1px 0 #ffffff1a;box-shadow:0 8px 25px #f4433666,inset 0 1px 0 var(--highlight);color:#ff8a80;transform:translateY(-2px)}.header-btn:active{transform:translateY(0)}.chat-body{background:radial-gradient(circle at 10% 20%,#bb86fc0d 0,#0000 50%),radial-gradient(circle at 90% 80%,#03dac60d 0,#0000 50%);flex:1 1;overflow:hidden;padding:20px}.message-container{height:100%;overflow-y:auto;padding-right:10px;scrollbar-color:#bb86fc #2d2d2d80;scrollbar-color:var(--primary-purple) #2d2d2d80;scrollbar-width:thin}.message-container::-webkit-scrollbar{width:6px}.message-container::-webkit-scrollbar-track{background:#2d2d2d4d;border-radius:10px}.message-container::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#bb86fc,#03dac6);background:var(--gradient-primary);border-radius:10px}.message-container::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#c69efc,#10dac6)}.message{animation:messageSlide .4s ease-out;display:flex;margin-bottom:20px}@keyframes messageSlide{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.message.you{justify-content:flex-end}.message.other{justify-content:flex-start}.message.system{justify-content:center;margin-bottom:16px}.message>div{max-width:70%;position:relative}.message.system>div{max-width:80%;text-align:center}.message-content{word-wrap:break-word;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;box-shadow:0 4px 15px #0000004d;margin-bottom:8px;padding:16px 20px;position:relative}.message.you .message-content{background:linear-gradient(135deg,#1f1b24,#19161ee6);background:linear-gradient(135deg,var(--bg-tertiary) 0,#19161ee6 100%);border:1px solid #bb86fc4d;border-bottom-right-radius:6px;box-shadow:0 8px 25px #bb86fc33,inset 0 1px 0 #bb86fc1a}.message.other .message-content{background:linear-gradient(135deg,#2c2c2ce6,#232323e6);border:1px solid #03dac64d;border-bottom-left-radius:6px;box-shadow:0 8px 25px #03dac61a,inset 0 1px 0 #03dac61a}.message.system .message-content{animation:systemGlow 3s ease-in-out infinite;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background:linear-gradient(135deg,#03dac626,#bb86fc26);border:2px solid #03dac666;border-radius:20px;box-shadow:0 6px 20px #03dac633,inset 0 1px 0 #ffffff1a;box-shadow:0 6px 20px #03dac633,inset 0 1px 0 var(--highlight);overflow:hidden;padding:12px 20px}@keyframes systemGlow{0%,to{border-color:#03dac666;box-shadow:0 6px 20px #03dac633,inset 0 1px 0 #ffffff1a;box-shadow:0 6px 20px #03dac633,inset 0 1px 0 var(--highlight)}50%{border-color:#bb86fc66;box-shadow:0 8px 25px #bb86fc33,inset 0 1px 0 #ffffff26}}.message.system .message-content:before{animation:systemShimmer 3s infinite;background:linear-gradient(90deg,#0000,#ffffff1a,#0000);background:linear-gradient(90deg,#0000,var(--highlight),#0000);content:"";height:100%;left:-100%;position:absolute;top:0;width:100%}@keyframes systemShimmer{0%{left:-100%}to{left:100%}}.message-content p{color:#e0e0e0;color:var(--text-primary);font-size:15px;font-weight:500;line-height:1.5;margin:0}.message.system .message-content p{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#bb86fc,#03dac6);background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;font-size:14px;font-weight:600;letter-spacing:.5px;position:relative;text-transform:uppercase;z-index:1}.message-meta{align-items:center;display:flex;justify-content:space-between;margin-top:4px;padding:0 4px}.message.you .message-meta{flex-direction:row-reverse}.message.system .message-meta{justify-content:center;opacity:.8}.message-meta p{font-size:12px;font-weight:500;margin:0}.time{color:#e0e0e099!important;color:var(--text-muted)!important}.author{color:#03dac6!important;color:var(--primary-teal)!important;font-weight:600!important}.message.you .author{color:#bb86fc!important;color:var(--primary-purple)!important}.message.system .message-meta .author{color:#03dac6!important;color:var(--primary-teal)!important;font-size:11px!important;letter-spacing:.5px!important;text-transform:uppercase!important}.message.system .message-meta .time{font-size:11px!important}.chat-footer{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#1d1d1df2;background:var(--bg-glass);border-top:1px solid #bb86fc33;border-top:1px solid var(--glass-border);display:flex;gap:15px;padding:20px 25px}.chat-footer textarea{background:#2d2d2dcc;border:2px solid #bb86fc4d;border-radius:25px;color:#e0e0e0;color:var(--text-primary);flex:1 1;font-family:inherit;font-size:15px;font-weight:500;line-height:1.5;max-height:150px;min-height:56px;outline:none;overflow-y:auto;padding:16px 20px;resize:none;transition:all .3s cubic-bezier(.4,0,.2,1);vertical-align:middle}.chat-footer textarea::-webkit-scrollbar{width:8px}.chat-footer textarea::-webkit-scrollbar-track{background:#2d2d2d66;border-radius:10px}.chat-footer textarea::-webkit-scrollbar-thumb{background:#bb86fc80;border-radius:10px;-webkit-transition:background .3s ease;transition:background .3s ease}.chat-footer textarea::-webkit-scrollbar-thumb:hover{background:#bb86fccc}.chat-footer textarea::placeholder{color:#e0e0e080;color:var(--text-disabled)}.chat-footer textarea:focus{background:#1f1b24e6;border-color:#bb86fc;border-color:var(--primary-purple);box-shadow:0 0 0 4px #bb86fc1a,0 8px 25px #bb86fc33}.chat-footer button{background:linear-gradient(135deg,#bb86fc,#9c27b0);background:var(--gradient-purple);border:none;border-radius:25px;box-shadow:0 8px 25px #bb86fc4d;color:#000;cursor:pointer;font-size:15px;font-weight:700;letter-spacing:.5px;min-width:80px;padding:16px 28px;text-transform:uppercase;transition:all .3s cubic-bezier(.4,0,.2,1)}.chat-footer button:hover{background:linear-gradient(135deg,#c69efc,#a855f7);box-shadow:0 12px 35px #bb86fc66;transform:translateY(-2px)}.chat-footer button:active{transform:translateY(0)}.video-call-container{animation:containerFadeIn .5s ease-out;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background:linear-gradient(135deg,#1d1d1df2,#14141ef2);background:var(--gradient-dark);border-radius:24px;bottom:0;display:flex;flex-direction:column;left:0;overflow:hidden;padding:20px;position:absolute;right:0;top:0;z-index:50}@keyframes containerFadeIn{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}.waiting-overlay{align-items:center;animation:waitingFadeIn .6s ease-out;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:linear-gradient(135deg,#000000fa,#14141efa);border-radius:24px;bottom:0;display:flex;justify-content:center;left:0;padding:40px;position:absolute;right:0;top:0;z-index:55}@keyframes waitingFadeIn{0%{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:0}to{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);opacity:1}}.waiting-message{animation:waitingPulse 3s infinite;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#1d1d1df2;background:var(--bg-glass);border:2px solid #bb86fc33;border:2px solid var(--glass-border);border-radius:24px;box-shadow:0 25px 50px #0009,0 0 80px #bb86fc1a,inset 0 1px 0 #ffffff1a;box-shadow:var(--shadow-primary),var(--shadow-accent),inset 0 1px 0 var(--highlight);max-width:400px;padding:40px;text-align:center;width:100%}@keyframes waitingPulse{0%,to{border-color:#bb86fc33;border-color:var(--glass-border);box-shadow:0 25px 50px #0009,0 0 80px #bb86fc1a,inset 0 1px 0 #ffffff1a;box-shadow:var(--shadow-primary),var(--shadow-accent),inset 0 1px 0 var(--highlight)}50%{border-color:#bb86fc66;border-color:var(--glass-border-hover);box-shadow:0 25px 50px #0009,0 0 40px #bb86fc33,inset 0 1px 0 #ffffff26}}.waiting-message h3{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#bb86fc,#03dac6);background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;color:#e0e0e0;color:var(--text-primary);font-size:24px;font-weight:700;margin:0 0 16px}.waiting-message p{color:#e0e0e0cc;color:var(--text-secondary);font-size:16px;font-weight:500;line-height:1.5;margin:0 0 32px}.end-waiting-btn{background:linear-gradient(135deg,#f44336,#d32f2f);background:linear-gradient(135deg,var(--error) 0,#d32f2f 100%);border:none;border-radius:20px;box-shadow:0 8px 25px #f443364d,inset 0 1px 0 #ffffff1a;box-shadow:0 8px 25px #f443364d,inset 0 1px 0 var(--highlight);color:#fff;cursor:pointer;font-size:16px;font-weight:600;letter-spacing:.5px;overflow:hidden;padding:16px 32px;position:relative;text-transform:uppercase;transition:all .3s cubic-bezier(.4,0,.2,1)}.end-waiting-btn:before{background:linear-gradient(90deg,#0000,#ffffff1a,#0000);background:linear-gradient(90deg,#0000,var(--highlight),#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s ease;width:100%}.end-waiting-btn:hover{background:linear-gradient(135deg,#ff6b6b,#f44336);background:linear-gradient(135deg,var(--error-light) 0,var(--error) 100%);box-shadow:0 12px 35px #f4433666;transform:translateY(-3px)}.end-waiting-btn:hover:before{left:100%}.end-waiting-btn:active{transform:translateY(0)}.call-controls{align-items:center;animation:controlsSlideDown .5s ease-out;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#1d1d1df2;background:var(--bg-glass);border:2px solid #bb86fc33;border:2px solid var(--glass-border);border-radius:20px;box-shadow:0 12px 30px #00000080,0 0 25px #bb86fc1a,inset 0 1px 0 #ffffff1a;box-shadow:0 12px 30px #00000080,0 0 25px #bb86fc1a,inset 0 1px 0 var(--highlight);display:flex;gap:24px;justify-content:space-between;left:50%;padding:16px 24px;position:absolute;top:20px;transform:translateX(-50%);z-index:52}@keyframes controlsSlideDown{0%{opacity:0;transform:translateX(-50%) translateY(-20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.call-info{align-items:center;display:flex;flex-direction:column;gap:8px}.call-type-indicator{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#bb86fc,#03dac6);background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;color:#03dac6;color:var(--primary-teal);font-size:16px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}.call-duration{background:#2d2d2d99;border:1px solid #bb86fc33;border:1px solid var(--glass-border);border-radius:12px;color:#e0e0e0cc;color:var(--text-secondary);font-family:Courier New,monospace;font-size:14px;font-weight:500;min-width:50px;padding:4px 12px;text-align:center}.call-actions{gap:12px}.call-actions,.control-btn{align-items:center;display:flex}.control-btn{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#2d2d2dcc;border:2px solid;border-radius:50%;box-shadow:0 4px 15px #0000004d,inset 0 1px 0 #ffffff1a;box-shadow:0 4px 15px #0000004d,inset 0 1px 0 var(--highlight);color:#e0e0e0;color:var(--text-primary);cursor:pointer;font-size:18px;height:48px;justify-content:center;outline:none;overflow:hidden;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);width:48px}.control-btn:before{background:linear-gradient(90deg,#0000,#ffffff1a,#0000);background:linear-gradient(90deg,#0000,var(--highlight),#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s ease;width:100%}.control-btn:hover:before{left:100%}.control-btn.mute-btn{border-color:#ffc10766;color:#ffc107;color:var(--warning)}.control-btn.mute-btn:hover{background:#ffc10726;border-color:#ffc10799;box-shadow:0 8px 25px #ffc10733,inset 0 1px 0 #ffffff1a;box-shadow:0 8px 25px #ffc10733,inset 0 1px 0 var(--highlight);color:#ffeb3b;transform:translateY(-2px)}.control-btn.mute-btn.muted{animation:mutedPulse 1.5s infinite;background:#f4433626;border-color:#f4433666;color:#ff6b6b;color:var(--error-light)}@keyframes mutedPulse{0%,to{opacity:1}50%{opacity:.7}}.control-btn.video-btn{border-color:#2196f366;color:#64b5f6;color:var(--info-light)}.control-btn.video-btn:hover{background:#2196f326;border-color:#2196f399;box-shadow:0 8px 25px #2196f333,inset 0 1px 0 #ffffff1a;box-shadow:0 8px 25px #2196f333,inset 0 1px 0 var(--highlight);color:#90caf9;transform:translateY(-2px)}.control-btn.video-btn.video-off{animation:videoOffPulse 1.5s infinite;background:#f4433626;border-color:#f4433666;color:#ff6b6b;color:var(--error-light)}@keyframes videoOffPulse{0%,to{opacity:1}50%{opacity:.7}}.control-btn.end-call-btn{animation:controlEndCallPulse 2s infinite;background:#f4433626;border-color:#f4433666;color:#ff6b6b;color:var(--error-light)}@keyframes controlEndCallPulse{0%,to{box-shadow:0 4px 15px #f4433633,inset 0 1px 0 #ffffff1a;box-shadow:0 4px 15px #f4433633,inset 0 1px 0 var(--highlight)}50%{box-shadow:0 6px 20px #f4433666,inset 0 1px 0 #ffffff1a;box-shadow:0 6px 20px #f4433666,inset 0 1px 0 var(--highlight)}}.control-btn.end-call-btn:hover{background:#f4433640;border-color:#f4433699;box-shadow:0 8px 25px #f4433666,inset 0 1px 0 #ffffff1a;box-shadow:0 8px 25px #f4433666,inset 0 1px 0 var(--highlight);color:#ff8a80;transform:translateY(-2px)}.control-btn:active{transform:translateY(0)}.local-video{animation:localVideoSlideIn .5s ease-out;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#2d2d2dcc;border:2px solid #bb86fc66;border:2px solid var(--glass-border-hover);border-radius:16px;box-shadow:0 8px 25px #0006,0 0 20px #bb86fc33;overflow:hidden;position:absolute;right:20px;top:20px;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:51}@keyframes localVideoSlideIn{0%{opacity:0;transform:translateX(50px) scale(.8)}to{opacity:1;transform:translateX(0) scale(1)}}.local-video:hover{border-color:#bb86fc99;box-shadow:0 12px 35px #00000080,0 0 30px #bb86fc4d;transform:scale(1.05)}.local-video video{background:#000;border-radius:14px;display:block;object-fit:cover}.local-video .video-label{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#000c;border:1px solid #bb86fc33;border:1px solid var(--glass-border);border-radius:12px;bottom:8px;box-shadow:0 2px 10px #0000004d;color:#e0e0e0;color:var(--text-primary);font-size:12px;font-weight:600;left:50%;max-width:calc(100% - 24px);overflow:hidden;padding:4px 12px;position:absolute;text-overflow:ellipsis;transform:translateX(-50%);white-space:nowrap}.audio-placeholder{background:linear-gradient(135deg,#2d2d2dcc,#1e1e28cc);border-radius:14px;flex-direction:column;gap:12px;height:150px;padding:16px;width:200px}.audio-avatar,.audio-placeholder{align-items:center;display:flex;justify-content:center}.audio-avatar{animation:audioWave 2s infinite;background:linear-gradient(135deg,#bb86fc,#03dac6);background:var(--gradient-primary);border-radius:50%;flex-shrink:0;font-size:24px;height:60px;margin-bottom:8px;max-height:60px;max-width:60px;min-height:60px;min-width:60px;width:60px}.avatar-icon{display:inline-block;font-style:normal;height:auto;line-height:1;vertical-align:middle;width:auto}@keyframes audioWave{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.user-status{align-items:center;display:flex;flex-direction:column;gap:6px;text-align:center;width:100%}.username{color:#e0e0e0;color:var(--text-primary);font-size:14px;font-weight:600;margin-bottom:4px;text-shadow:0 1px 2px #00000080}.status-badges{align-items:center;display:flex;flex-wrap:wrap;gap:4px;justify-content:center;width:100%}.status-badge{border-radius:10px;flex-shrink:0;font-size:10px;font-weight:600;letter-spacing:.5px;padding:3px 8px;text-transform:uppercase;white-space:nowrap}.status-badge.muted{background:#f4433633;border:1px solid #f443364d;color:#ff6b6b;color:var(--error-light)}.status-badge.video-off{background:#9e9e9e33;border:1px solid #9e9e9e4d;color:#bdbdbd}.audio-placeholder.remote .audio-avatar{background:linear-gradient(135deg,#03dac6,#bb86fc);background:linear-gradient(135deg,var(--primary-teal),var(--primary-purple))}.remote-videos{align-items:center;display:flex;flex:1 1;flex-wrap:wrap;gap:20px;justify-content:center;overflow:auto;padding:80px 20px 20px;scrollbar-color:#bb86fc80 #0000;scrollbar-width:thin}.remote-videos::-webkit-scrollbar{height:6px;width:6px}.remote-videos::-webkit-scrollbar-track{background:#0000}.remote-videos::-webkit-scrollbar-thumb{background:#bb86fc66;border-radius:10px}.remote-videos::-webkit-scrollbar-thumb:hover{background:#bb86fc99}.remote-video{animation:remoteVideoAppear .5s ease-out;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background:#2d2d2de6;border:2px solid #03dac666;border-radius:20px;box-shadow:0 12px 30px #00000080,0 0 25px #03dac633;overflow:hidden;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}@keyframes remoteVideoAppear{0%{opacity:0;transform:scale(.8) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.remote-video:hover{border-color:#03dac699;box-shadow:0 16px 40px #0009,0 0 35px #03dac64d;transform:scale(1.02)}.remote-video video{background:#000;border-radius:18px;display:block;object-fit:cover;transition:all .3s ease}.remote-video .video-label{-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background:#000000e6;border:1px solid #03dac666;border-radius:16px;bottom:12px;box-shadow:0 4px 15px #0006;color:#e0e0e0;color:var(--text-primary);font-size:14px;font-weight:600;left:50%;max-width:calc(100% - 24px);overflow:hidden;padding:6px 16px;position:absolute;text-overflow:ellipsis;transform:translateX(-50%);white-space:nowrap}.incoming-call-modal{align-items:center;animation:modalFadeIn .3s ease-out;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#000c;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:100}@keyframes modalFadeIn{0%{-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);opacity:0}to{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:1}}.modal-content{animation:modalSlideUp .4s cubic-bezier(.4,0,.2,1);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:linear-gradient(135deg,#1d1d1df2,#14141ef2);background:var(--gradient-dark);border:2px solid #bb86fc33;border:2px solid var(--glass-border);border-radius:24px;box-shadow:0 25px 50px #0009,0 0 80px #bb86fc1a,inset 0 1px 0 #ffffff1a;box-shadow:var(--shadow-primary),var(--shadow-accent),inset 0 1px 0 var(--highlight);max-width:400px;padding:40px;text-align:center;width:90%}@keyframes modalSlideUp{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-content h3{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#bb86fc,#03dac6);background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;color:#e0e0e0;color:var(--text-primary);font-size:24px;font-weight:700;margin:0 0 16px}.modal-content p{color:#e0e0e0cc;color:var(--text-secondary);font-size:16px;font-weight:500;margin:0 0 32px}.modal-buttons{display:flex;gap:16px;justify-content:center}.modal-buttons button{border:none;border-radius:18px;cursor:pointer;font-size:16px;font-weight:600;letter-spacing:.5px;min-width:120px;overflow:hidden;padding:14px 28px;position:relative;text-transform:uppercase;transition:all .3s cubic-bezier(.4,0,.2,1)}.modal-buttons button:before{background:linear-gradient(90deg,#0000,#ffffff1a,#0000);background:linear-gradient(90deg,#0000,var(--highlight),#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s ease;width:100%}.modal-buttons button:hover:before{left:100%}.accept-btn{background:linear-gradient(135deg,#4caf50,#45a049);background:linear-gradient(135deg,var(--success) 0,#45a049 100%);box-shadow:0 8px 25px #4caf504d;color:#fff}.accept-btn:hover{background:linear-gradient(135deg,#66bb6a,#4caf50);background:linear-gradient(135deg,var(--success-light) 0,var(--success) 100%);box-shadow:0 12px 35px #4caf5066;transform:translateY(-2px)}.decline-btn{background:linear-gradient(135deg,#f44336,#d32f2f);background:linear-gradient(135deg,var(--error) 0,#d32f2f 100%);box-shadow:0 8px 25px #f443364d;color:#fff}.decline-btn:hover{background:linear-gradient(135deg,#ff6b6b,#f44336);background:linear-gradient(135deg,var(--error-light) 0,var(--error) 100%);box-shadow:0 12px 35px #f4433666;transform:translateY(-2px)}.modal-buttons button:active{transform:translateY(0)}.emoji-section{position:relative}.emoji-section,.emoji-toggle{align-items:center;display:flex}.emoji-toggle{background:#2d2d2dcc;border:2px solid #bb86fc33;border:2px solid var(--glass-border);border-radius:50%;color:#bb86fc;color:var(--primary-purple);cursor:pointer;font-size:20px;height:48px;justify-content:center;outline:none;padding:12px;transition:all .3s cubic-bezier(.4,0,.2,1);-webkit-user-select:none;user-select:none;width:48px}.emoji-toggle:hover{background:#1f1b24e6;border-color:#bb86fc;border-color:var(--primary-purple);box-shadow:0 8px 25px #bb86fc33;transform:translateY(-2px)}.emoji-toggle:active{transform:translateY(0)}.emoji-picker-container{animation:emojiSlideUp .3s ease-out;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#1d1d1df2;background:var(--bg-glass);border:1px solid #bb86fc33;border:1px solid var(--glass-border);border-radius:20px;bottom:60px;box-shadow:0 25px 50px #0009,0 0 80px #bb86fc1a,inset 0 1px 0 #ffffff1a;box-shadow:var(--shadow-primary),var(--shadow-accent),inset 0 1px 0 var(--highlight);left:0;max-width:95vw;overflow:hidden;position:absolute;width:450px;z-index:60}@keyframes emojiSlideUp{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.emoji-picker-container .EmojiPickerReact{background:#0000!important;border:none!important;box-shadow:none!important;font-family:inherit!important;height:380px!important;width:100%!important}.emoji-picker-container .EmojiPickerReact .epr-category-nav,.emoji-picker-container .EmojiPickerReact .epr-header,.emoji-picker-container .EmojiPickerReact .epr-search-container{display:none!important}.emoji-picker-container .EmojiPickerReact .epr-preview{align-items:center!important;-webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important;background:#2d2d2dcc!important;border-top:1px solid #bb86fc33!important;border-top:1px solid var(--glass-border)!important;display:flex!important;gap:12px!important;min-height:60px!important;padding:12px 16px!important}.emoji-picker-container .EmojiPickerReact .epr-preview .epr-preview-emoji{align-items:center!important;background:#1f1b24cc!important;border:2px solid #bb86fc33!important;border:2px solid var(--glass-border)!important;border-radius:12px!important;display:flex!important;font-size:32px!important;height:48px!important;justify-content:center!important;width:48px!important}.emoji-picker-container .EmojiPickerReact .epr-preview .epr-preview-name{color:#e0e0e0!important;color:var(--text-primary)!important;flex:1 1!important;font-size:14px!important;font-weight:600!important;text-transform:capitalize!important}.emoji-picker-container .EmojiPickerReact .epr-body{background:#0000!important;height:calc(100% - 80px)!important;overflow:hidden!important;padding:0!important}.emoji-picker-container .EmojiPickerReact .epr-emoji-list{height:100%!important;overflow-y:auto!important;padding:12px 16px!important;scrollbar-color:#bb86fc80 #0000!important;scrollbar-width:thin!important}.emoji-picker-container .EmojiPickerReact .epr-emoji-list::-webkit-scrollbar{width:6px!important}.emoji-picker-container .EmojiPickerReact .epr-emoji-list::-webkit-scrollbar-track{background:#0000!important}.emoji-picker-container .EmojiPickerReact .epr-emoji-list::-webkit-scrollbar-thumb{background:#bb86fc66!important;border-radius:10px!important}.emoji-picker-container .EmojiPickerReact .epr-emoji-list::-webkit-scrollbar-thumb:hover{background:#bb86fc99!important}.emoji-picker-container .EmojiPickerReact .epr-emoji-category-label{background:#0000!important;border:none!important;color:#bb86fc!important;color:var(--primary-purple)!important;font-size:12px!important;font-weight:600!important;letter-spacing:.5px!important;margin:0!important;opacity:.8!important;padding:12px 4px 8px!important;text-transform:uppercase!important}.emoji-picker-container .EmojiPickerReact .epr-emoji{align-items:center!important;background:#0000!important;border:none!important;border-radius:10px!important;box-sizing:border-box!important;cursor:pointer!important;display:inline-flex!important;float:left!important;font-size:24px!important;height:40px!important;justify-content:center!important;margin:3px!important;min-height:40px!important;min-width:40px!important;padding:8px!important;transition:all .2s ease!important;width:40px!important}.emoji-picker-container .EmojiPickerReact .epr-emoji:hover{background:#bb86fc26!important;transform:scale(1.1)!important}.emoji-picker-container .EmojiPickerReact .epr-emoji-category{display:block!important;overflow:hidden!important;padding:8px 0!important;width:100%!important}.emoji-picker-container .EmojiPickerReact .epr-emoji-category:after{clear:both!important;content:""!important;display:table!important}.no-call-message{align-items:center;animation:waitingMessagePulse 3s ease-in-out infinite;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background:#2d2d2de6;border:2px solid #bb86fc33;border:2px solid var(--glass-border);border-radius:16px;box-shadow:0 4px 15px #0003,inset 0 1px 0 #ffffff1a;box-shadow:0 4px 15px #0003,inset 0 1px 0 var(--highlight);color:#e0e0e0cc;color:var(--text-secondary);display:flex;font-size:14px;font-weight:600;height:48px;justify-content:center;min-width:200px;overflow:hidden;padding:12px 20px;position:relative;text-align:center}@keyframes waitingMessagePulse{0%,to{border-color:#bb86fc33;border-color:var(--glass-border);box-shadow:0 4px 15px #0003,inset 0 1px 0 #ffffff1a;box-shadow:0 4px 15px #0003,inset 0 1px 0 var(--highlight);color:#e0e0e0cc;color:var(--text-secondary)}50%{border-color:#bb86fc66;border-color:var(--glass-border-hover);box-shadow:0 6px 20px #bb86fc33,inset 0 1px 0 #ffffff26;color:#bb86fce6}}.no-call-message:before{animation:shimmer 2s infinite;background:linear-gradient(90deg,#0000,#bb86fc1a,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;width:100%}@keyframes shimmer{0%{left:-100%}to{left:100%}}@media (max-width:768px){.header-btn{font-size:12px;gap:4px;height:40px;min-width:80px;padding:10px 16px}.chat-header-right{gap:8px}.video-call-container{padding:15px}.call-controls{gap:20px;padding:14px 20px}.control-btn{font-size:16px;height:44px;width:44px}.call-type-indicator{font-size:15px}.call-duration{font-size:13px;padding:3px 10px}.local-video{right:15px;top:15px}.remote-videos{gap:15px;padding:70px 15px 15px}.waiting-overlay{padding:30px}.waiting-message{max-width:300px;padding:25px}.waiting-message h3{font-size:18px;margin-bottom:12px}.waiting-message p{font-size:13px;margin-bottom:24px}.end-waiting-btn{font-size:13px;padding:12px 24px;width:100%}.modal-content{max-width:350px;padding:30px}.modal-content h3{font-size:20px}.modal-content p{font-size:14px}.modal-buttons button{font-size:14px;min-width:100px;padding:12px 24px}.emoji-picker-container{max-width:90vw;width:400px}.emoji-picker-container .EmojiPickerReact{height:340px!important}.emoji-picker-container .EmojiPickerReact .epr-emoji{font-size:22px!important;height:36px!important;margin:2px!important;min-height:36px!important;min-width:36px!important;padding:6px!important;width:36px!important}.audio-avatar{font-size:20px;height:50px;max-height:50px;max-width:50px;min-height:50px;min-width:50px;width:50px}}@media (max-width:480px){.header-btn{border-radius:12px;font-size:11px;height:36px;min-width:70px;padding:8px 12px}.chat-header-right{gap:6px}.video-call-container{padding:12px}.call-controls{flex-direction:column;padding:12px 16px}.call-controls,.call-info{align-items:center;gap:16px}.call-info{flex-direction:row}.control-btn{font-size:15px;height:40px;width:40px}.call-actions{gap:10px}.local-video{right:12px;top:12px}.local-video,.local-video video{height:120px!important;width:150px!important}.audio-placeholder{height:120px;width:150px}.audio-avatar{font-size:18px;height:45px;max-height:45px;max-width:45px;min-height:45px;min-width:45px;width:45px}.remote-videos{gap:12px;padding:80px 12px 12px}.remote-video{border-radius:16px}.remote-video video{border-radius:14px;height:135px!important;width:180px!important}.audio-placeholder.remote{height:135px;width:180px}.remote-video .video-label{font-size:12px;padding:4px 12px}.waiting-overlay{padding:20px}.waiting-message{max-width:280px;padding:25px}.waiting-message h3{font-size:18px;margin-bottom:12px}.waiting-message p{font-size:13px;margin-bottom:20px}.end-waiting-btn{font-size:13px;padding:12px 24px}.modal-content{max-width:300px;padding:25px}.modal-content h3{font-size:18px}.modal-content p{font-size:14px}.modal-buttons{flex-direction:column;gap:12px}.modal-buttons button{width:100%}.emoji-picker-container{left:50%;transform:translateX(-50%);width:320px}.emoji-picker-container .EmojiPickerReact{height:300px!important}.emoji-picker-container .EmojiPickerReact .epr-emoji{font-size:20px!important;height:32px!important;min-height:32px!important;min-width:32px!important;width:32px!important}}@media (max-width:360px){.header-btn{font-size:10px;height:32px;min-width:60px;padding:6px 10px}.chat-header-right{gap:4px}.local-video{right:8px;top:8px}.local-video,.local-video video{height:75px!important;width:100px!important}.audio-placeholder{height:75px;width:100px}.audio-avatar{font-size:16px;height:35px;max-height:35px;max-width:35px;min-height:35px;min-width:35px;width:35px}.remote-video video{height:180px!important}.audio-placeholder.remote{height:180px}.modal-content,.waiting-message{max-width:280px;padding:20px}.emoji-picker-container{bottom:70px;left:50%;transform:translateX(-50%);width:95vw}.emoji-picker-container .EmojiPickerReact{height:300px!important}.emoji-picker-container .EmojiPickerReact .epr-emoji{font-size:18px!important;height:30px!important;margin:1px!important;min-height:30px!important;min-width:30px!important;padding:4px!important;width:30px!important}}.accept-btn:focus,.control-btn:focus,.decline-btn:focus,.end-waiting-btn:focus,.header-btn:focus{outline:2px solid #bb86fc;outline:2px solid var(--primary-purple);outline-offset:2px}@media (prefers-contrast:high){.call-controls{background:#000000f2;border-color:#bb86fc;border-color:var(--primary-purple)}.control-btn{background:#000c;border-color:currentColor}.modal-content{background:#000000f2;border-color:#bb86fc;border-color:var(--primary-purple)}.audio-avatar{background:linear-gradient(135deg,#bb86fc,#03dac6)!important;background:var(--gradient-primary)!important;border:2px solid}}@media (prefers-reduced-motion:reduce){.audio-avatar,.call-controls,.control-btn,.emoji-picker-container,.end-waiting-btn,.local-video,.message,.modal-content,.no-call-message,.remote-video,.video-call-container,.waiting-message{animation:none;transition:none}.control-btn:before,.end-waiting-btn:before,.header-btn:before,.message.system .message-content:before,.modal-buttons button:before,.no-call-message:before{display:none}.audio-avatar{transform:none!important}}
/*# sourceMappingURL=main.dfc3aa58.css.map*/