:root{--primary-color: #4285f4;--danger-color: #ea4335;--success-color: #34a853;--warning-color: #fbbc04;--bg-dark: #131314;--bg-medium: #1e1f20;--text-light: #e3e3e3;--text-muted: #8e918f}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,sans-serif;background-color:var(--bg-dark);color:var(--text-light);overflow:hidden;height:100vh}#idle-screen{width:100%;height:100vh;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,#1a1a2e,#16213e)}.idle-content{text-align:center;max-width:600px;padding:40px}.idle-content i{font-size:80px;color:var(--primary-color);margin-bottom:30px;animation:pulse 2s infinite}.idle-content h1{font-size:42px;font-weight:700;margin-bottom:15px;background:linear-gradient(135deg,#4285f4,#34a853);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.idle-content p{font-size:18px;color:var(--text-muted);margin-bottom:40px}.status-indicator{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:30px}.dot{width:12px;height:12px;border-radius:50%;background-color:var(--success-color);animation:blink 1.5s infinite}.dot.connecting{background-color:var(--warning-color)}.dot.error{background-color:var(--danger-color)}.info-box{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:20px;margin-top:30px}.info-item{display:flex;align-items:center;justify-content:center;gap:10px;font-size:14px}.info-item code{background:#0000004d;padding:5px 15px;border-radius:6px;font-family:Courier New,monospace;color:var(--primary-color)}#waiting-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:#131314fa;z-index:10000;display:flex;justify-content:center;align-items:center;flex-direction:column;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.waiting-content{text-align:center;z-index:2;animation:fadeIn .5s ease}.waiting-content i{font-size:60px;color:var(--success-color);margin-bottom:20px;animation:ring 1s infinite}.waiting-content h2{color:#fff;font-size:28px;margin-bottom:10px}.waiting-content p{color:#aaa;margin-bottom:40px;font-size:16px}.btn-answer,.btn-reject{padding:15px 40px;border:none;border-radius:50px;font-size:16px;font-weight:600;cursor:pointer;margin:0 10px;transition:all .3s;display:inline-flex;align-items:center;gap:10px}.btn-answer{background:var(--success-color);color:#fff}.btn-answer:hover{background:#2d8e47;transform:scale(1.05)}.btn-reject{background:var(--danger-color);color:#fff}.btn-reject:hover{background:#c5362d;transform:scale(1.05)}#call-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;z-index:9999;flex-direction:column}#video-container{width:100%;height:100%;position:relative;background:#000}#video-container video{width:100%;height:100%;object-fit:cover}.call-controls{position:absolute;bottom:40px;left:50%;transform:translate(-50%);display:flex;gap:20px;z-index:10000;background:#0009;padding:15px 30px;border-radius:50px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.control-btn{width:60px;height:60px;border-radius:50%;border:none;background:#fff3;color:#fff;font-size:24px;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center}.control-btn:hover{background:#ffffff4d;transform:scale(1.1)}.control-btn.active{background:var(--primary-color)}.control-btn.end-call{background:var(--danger-color)}.control-btn.end-call:hover{background:#c5362d}.control-btn.disabled{background:#ffffff1a;color:#ffffff4d;cursor:not-allowed}.call-info{position:absolute;top:30px;left:30px;background:#0009;padding:10px 20px;border-radius:25px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:10000}.call-duration{color:#fff;font-size:18px;font-weight:600;font-family:Courier New,monospace}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.8}}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}@keyframes ring{0%,to{transform:rotate(0)}10%,30%{transform:rotate(-15deg)}20%,40%{transform:rotate(15deg)}}@keyframes rippleAnim{0%{transform:scale(.8);opacity:1}to{transform:scale(2.5);opacity:0}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.ripple{position:absolute;width:200px;height:200px;background:#34a85333;border-radius:50%;animation:rippleAnim 2s infinite;z-index:1}@media(max-width:768px){.idle-content h1{font-size:32px}.idle-content i{font-size:60px}.call-controls{gap:15px;padding:10px 20px}.control-btn{width:50px;height:50px;font-size:20px}}
