:root{--bg-color: #0f111a;--bg-secondary: #1a1d2d;--primary-color: #6366f1;--primary-hover: #4f46e5;--accent-color: #8b5cf6;--glass-bg: rgba(255, 255, 255, .05);--glass-border: rgba(255, 255, 255, .1);--text-main: #ffffff;--text-muted: #94a3b8;--danger: #ef4444;--success: #10b981;--control-size: 50px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Outfit,sans-serif;background-color:var(--bg-color);color:var(--text-main);height:100vh;overflow:hidden;position:relative}#app{height:100vh}.blob{position:absolute;border-radius:50%;filter:blur(80px);z-index:-1;opacity:.5;animation:float 10s infinite alternate}.blob-1{top:-10%;left:-10%;width:500px;height:500px;background:var(--primary-color)}.blob-2{bottom:-10%;right:-10%;width:600px;height:600px;background:var(--accent-color);animation-delay:-5s}@keyframes float{0%{transform:translate(0)}to{transform:translate(50px,50px)}}.hidden{display:none!important}.screen{width:100%;height:100%;display:flex;flex-direction:column}.glass-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:24px;box-shadow:0 8px 32px #0000004d}#login-screen{justify-content:center;align-items:center}.login-card{padding:3rem;width:100%;max-width:450px;text-align:center;display:flex;flex-direction:column;gap:1.5rem}.logo-area{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:.5rem;color:var(--primary-color);font-size:2rem}.logo-area h1{font-size:2.5rem;color:var(--text-main)}.subtitle{color:var(--text-muted);font-size:1.1rem}.input-group{position:relative;width:100%}.input-group input{width:100%;padding:1rem 1rem 1rem 3rem;background:#0003;border:1px solid var(--glass-border);border-radius:12px;color:#fff;font-size:1rem;font-family:inherit;outline:none;transition:border-color .3s}.input-group input:focus{border-color:var(--primary-color)}.input-group i{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--text-muted)}.primary-btn{background:linear-gradient(135deg,var(--primary-color),var(--accent-color));color:#fff;border:none;padding:1rem;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s;display:flex;align-items:center;justify-content:center;gap:.5rem}.primary-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #6366f166}#call-screen{position:relative;padding:1rem}.main-content{flex:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%;position:relative}.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem;width:100%;height:100%;overflow-y:auto;padding:1rem;align-content:center}.video-container{position:relative;background:#000;border-radius:20px;overflow:hidden;box-shadow:0 4px 20px #00000080;display:flex;justify-content:center;align-items:center;transition:all .5s ease;aspect-ratio:16/9;max-height:100%}.video-container video{width:100%;height:100%;object-fit:cover;background:#000}.video-overlay{position:absolute;bottom:0;left:0;width:100%;padding:1rem;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);display:flex;justify-content:space-between;align-items:center}.user-badge{background:#ffffff26;padding:4px 12px;border-radius:20px;font-size:.9rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);font-weight:500}#remote-placeholder{position:absolute;display:flex;flex-direction:column;align-items:center;gap:1rem;color:var(--text-muted)}.loader{width:40px;height:40px;border:4px solid var(--glass-border);border-top-color:var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.controls-dock{position:absolute;bottom:2rem;left:50%;transform:translate(-50%);display:flex;gap:1rem;padding:.8rem 1.5rem;background:#1a1d2dcc;border-radius:24px;z-index:100;box-shadow:0 4px 30px #0006}.control-btn{width:var(--control-size);height:var(--control-size);border-radius:50%;border:none;background:#ffffff14;color:var(--text-main);font-size:1.2rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;position:relative}.control-btn:hover{background:#ffffff26;transform:translateY(-3px)}.control-btn.active{background:#ffffff14}.control-btn.off{background:var(--danger);color:#fff}.control-btn.hangup{background:#ef444433;color:var(--danger)}.control-btn.hangup:hover{background:var(--danger);color:#fff}.control-btn.recording-active{background:#ef444433;animation:pulse-red 2s infinite;color:var(--danger)}@keyframes pulse-red{0%{box-shadow:0 0 #ef444466}70%{box-shadow:0 0 0 10px #ef444400}to{box-shadow:0 0 #ef444400}}.divider{width:1px;background:var(--glass-border);height:30px;align-self:center}.badge{position:absolute;top:-2px;right:-2px;width:10px;height:10px;background:var(--danger);border-radius:50%;border:2px solid #1a1d2d}#chat-panel{position:fixed;right:0;top:0;bottom:0;width:380px;background:#0f111afa;-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);border-left:1px solid var(--glass-border);display:flex!important;flex-direction:column;z-index:500;box-shadow:-15px 0 40px #0009;transition:transform .4s cubic-bezier(.4,0,.2,1);transform:translate(100%)}#chat-panel:not(.hidden){transform:translate(0)}#chat-panel.hidden{transform:translate(100%)}.chat-header{padding:1.5rem;background:#ffffff08;border-bottom:1px solid var(--glass-border);display:flex;justify-content:space-between;align-items:center}.chat-header h3{font-size:1.2rem;font-weight:600;background:linear-gradient(135deg,var(--text-main),var(--text-muted));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.chat-messages{flex:1;padding:1.5rem;overflow-y:auto;display:flex;flex-direction:column;gap:1rem;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--glass-border) transparent}.message{padding:.9rem 1.2rem;border-radius:16px;font-size:.95rem;line-height:1.5;max-width:85%;word-wrap:break-word;position:relative;animation:messageIn .3s ease-out}@keyframes messageIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message.mine{background:linear-gradient(135deg,var(--primary-color),var(--accent-color));color:#fff;align-self:flex-end;border-bottom-right-radius:4px}.message.theirs{background:#ffffff12;color:var(--text-main);align-self:flex-start;border-bottom-left-radius:4px}.chat-input-wrapper{padding:1.5rem;background:#0003;border-top:1px solid var(--glass-border);display:flex;gap:.8rem}.chat-input-wrapper input{flex:1;background:#ffffff0d;border:1px solid var(--glass-border);border-radius:28px;padding:.8rem 1.4rem;color:#fff;outline:none;font-family:inherit;transition:all .3s}.chat-input-wrapper input:focus{border-color:var(--primary-color);background:#ffffff14}.send-btn{width:48px;height:48px;border-radius:50%;border:none;background:var(--primary-color);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s;flex-shrink:0}.send-btn:hover{background:var(--primary-hover);transform:scale(1.05);box-shadow:0 0 15px #6366f166}@media(max-width:768px){#chat-panel{width:85%}}@media(max-width:768px){.video-grid{flex-direction:column}.local{position:absolute;top:1rem;right:1rem;width:120px;height:160px;z-index:50;box-shadow:0 4px 15px #00000080;background:transparent}.controls-dock{width:90%;justify-content:space-around}#chat-panel{width:90%;height:100vh}}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:2000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.settings-card{width:90%;max-width:500px;padding:2rem;background:#1a1d2d;background:var(--bg-secondary)}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.modal-body{display:flex;flex-direction:column;gap:15px}.form-group{display:flex;flex-direction:column;gap:5px}.form-group label{font-size:.9rem;color:var(--text-muted)}.form-group input[type=text],.form-group select{padding:10px;border-radius:8px;border:1px solid var(--glass-border);background:#0003;color:#fff}.form-group input[type=color]{width:100%;height:40px;border:none;border-radius:8px;cursor:pointer}