:root{--bg-dark: #0a0a0c;--card-bg: rgba(255, 255, 255, .03);--border-color: rgba(255, 255, 255, .1);--primary: #6366f1;--primary-glow: rgba(99, 102, 241, .5);--text-main: #f8fafc;--text-dim: #94a3b8;--accent: #f43f5e}*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,sans-serif}body{background-color:var(--bg-dark);color:var(--text-main);overflow:hidden;height:100vh;display:flex;justify-content:center;align-items:center}h1,h2,h3{font-family:Outfit,sans-serif}.glass{background:var(--card-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-color);border-radius:24px}.glow-btn{background:var(--primary);color:#fff;border:none;padding:12px 24px;border-radius:12px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px var(--primary-glow)}.glow-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px var(--primary-glow)}.chat-container{width:90vw;max-width:500px;height:85vh;display:flex;flex-direction:column;position:relative}.chat-header{padding:20px;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center}.chat-messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px}.message-bubble{max-width:80%;padding:12px 16px;border-radius:16px;font-size:.95rem;line-height:1.4;position:relative}.message-bubble.sent{align-self:flex-end;background:linear-gradient(135deg,var(--primary) 0%,#4f46e5 100%);border-bottom-right-radius:4px;box-shadow:0 4px 15px #6366f14d;color:#fff}.message-bubble.received{align-self:flex-start;background:var(--card-bg);border:1px solid var(--border-color);border-bottom-left-radius:4px;color:var(--text-main)}.message-info{font-size:.75rem;color:var(--primary);font-weight:600;margin-bottom:6px;letter-spacing:.02em}.message-text{font-size:1rem;word-break:break-word}.message-time{font-size:.65rem;opacity:.7;margin-top:6px;text-align:right}.chat-input-area{padding:20px;display:flex;gap:12px}input[type=text]{flex:1;background:#ffffff0d;border:1px solid var(--border-color);border-radius:12px;padding:12px 16px;color:#fff;outline:none}input[type=text]:focus{border-color:var(--primary)}.join-screen{text-align:center;padding:40px}.logo-text{font-size:3rem;font-weight:800;background:linear-gradient(135deg,#6366f1,#f43f5e);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:20px}.room-list{margin-top:20px;max-height:250px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding-right:5px}.room-item{background:#ffffff0d;border:1px solid var(--border-color);padding:15px;border-radius:12px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:all .2s ease}.room-item:hover{background:#ffffff1a;border-color:var(--primary);transform:translate(5px)}.create-room-box{margin-top:25px;padding-top:25px;border-top:1px solid var(--border-color)}.modal-overlay{position:fixed;inset:0;background:#000c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{width:90vw;max-width:400px;padding:30px}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .5s ease forwards}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:10px}