@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap";:root{--bg-color: #050511;--glass-bg: rgba(255, 255, 255, .05);--glass-border: rgba(255, 255, 255, .1);--primary-glow: #7b2cbf;--secondary-glow: #3a0ca3;--accent: #f72585;--text-main: #e0e0e0;--text-dim: #a0a0a0;--msg-sent: linear-gradient(135deg, #7b2cbf 0%, #3a0ca3 100%);--msg-received: rgba(255, 255, 255, .08);--font-family: "Outfit", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background-color:var(--bg-color);color:var(--text-main);overflow:hidden;height:100vh;width:100vw;background-image:radial-gradient(circle at 10% 20%,rgba(123,44,191,.15) 0%,transparent 40%),radial-gradient(circle at 90% 80%,rgba(247,37,133,.15) 0%,transparent 40%);animation:moveBackground 20s infinite alternate}@keyframes moveBackground{0%{background-position:0 0}to{background-position:10px 10px}}#root{height:100%;width:100%;display:flex;justify-content:center;align-items:center}.app-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;position:relative}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);box-shadow:0 8px 32px #0000005e;border-radius:24px;overflow:hidden;transition:all .3s ease}.join-chat-container{display:flex;flex-direction:column;align-items:center;gap:2rem;padding:3rem;width:400px}.join-chat-container h1{font-size:2.5rem;font-weight:600;background:linear-gradient(to right,#cfd9df,#e2ebf0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:1rem}input{width:100%;padding:1rem;border-radius:12px;border:1px solid var(--glass-border);background:#0003;color:#fff;font-family:var(--font-family);font-size:1rem;outline:none;transition:.3s}input:focus{border-color:var(--accent);box-shadow:0 0 15px #f725854d}button{width:100%;padding:1rem;border-radius:12px;border:none;background:var(--msg-sent);color:#fff;font-weight:600;font-size:1.1rem;cursor:pointer;transition:transform .2s,box-shadow .2s}button:hover{transform:translateY(-2px);box-shadow:0 5px 15px #7b2cbf66}button:active{transform:scale(.98)}.chat-window{width:100%;height:100%;display:flex;flex-direction:column}.chat-header{padding:1.5rem;border-bottom:1px solid var(--glass-border);display:flex;justify-content:space-between;align-items:center;background:#0000001a}.chat-header p{font-size:1.2rem;font-weight:700}.live-indicator{width:10px;height:10px;background-color:#0f8;border-radius:50%;box-shadow:0 0 10px #0f8;animation:pulse 2s infinite}@keyframes pulse{0%{opacity:.5;box-shadow:0 0 #0f8}50%{opacity:1;box-shadow:0 0 10px #0f8}to{opacity:.5;box-shadow:0 0 #0f8}}.chat-body{flex:1;padding:1.5rem;overflow-y:auto;display:flex;flex-direction:column;gap:1rem}.chat-body::-webkit-scrollbar{width:6px}.chat-body::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}.message-container{display:flex;flex-direction:column;max-width:70%;animation:popIn .4s cubic-bezier(.175,.885,.32,1.275)}@keyframes popIn{0%{opacity:0;transform:scale(.8) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}#you{align-self:flex-end;align-items:flex-end}#other{align-self:flex-start;align-items:flex-start}.message-content{padding:12px 18px;border-radius:18px;font-size:1rem;line-height:1.4;position:relative;word-wrap:break-word}#you .message-content{background:var(--msg-sent);color:#fff;border-bottom-right-radius:4px}#other .message-content{background:var(--msg-received);color:var(--text-main);border:1px solid var(--glass-border);border-bottom-left-radius:4px}.message-meta{font-size:.75rem;color:var(--text-dim);margin-top:4px;display:flex;gap:.5rem}.chat-footer{padding:1.5rem;border-top:1px solid var(--glass-border);background:#0000001a;display:flex;gap:1rem}.chat-footer input{flex:1}.chat-footer button{width:auto;padding:0 2rem;background:var(--accent)}.typing-indicator{font-size:.8rem;color:var(--text-dim);padding:0 1.5rem;height:20px;margin-bottom:5px;animation:fadeIn .3s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.video-container{display:flex;justify-content:center;gap:20px;margin-bottom:20px;flex-wrap:wrap}.video-card{padding:10px;border:2px solid var(--glass-border);background:#0000004d;border-radius:12px;width:400px;display:flex;flex-direction:column;align-items:center}.video-element{width:100%;border-radius:8px;transform:scaleX(-1)}.video-label{margin-bottom:10px;font-weight:700;color:var(--accent)}.user-list-container{margin-top:2rem;width:100%}.user-list{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.user-card{background:var(--glass-bg);border:1px solid var(--glass-border);padding:10px 20px;border-radius:20px;cursor:pointer;transition:.3s;display:flex;align-items:center;gap:10px}.user-card:hover{background:var(--msg-sent);transform:scale(1.05)}.status-dot{width:8px;height:8px;background:#0f8;border-radius:50%;box-shadow:0 0 5px #0f8}.notification-toast{position:fixed;top:20px;right:20px;background:#141428e6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--accent);padding:20px;border-radius:12px;display:flex;flex-direction:column;gap:10px;animation:slideIn .5s ease;z-index:1000}@keyframes slideIn{0%{transform:translate(100%)}to{transform:translate(0)}}.answer-btn{background:#0f8;color:#000}.global-layout{display:flex;width:95vw;height:90vh;gap:20px}.sidebar{width:250px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:10px}.main-chat{flex:1;display:flex;flex-direction:column;gap:10px}