*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(135deg,#667eea 0%,#764ba2 25%,#f093fb 50%,#f5576c 75%,#fda085 100%) fixed;min-height:100vh;font-family:Segoe UI,system-ui,-apple-system,sans-serif}#root{min-height:100vh}.join-container{justify-content:center;align-items:center;min-height:100vh;display:flex}.join-card{text-align:center;background:#fffffff2;border-radius:24px;width:90%;max-width:400px;padding:48px;box-shadow:0 20px 60px #00000026}.join-card h1{color:#333;margin-bottom:24px;font-size:2rem}.join-card input{color:#333;border:2px solid #e0e0e0;border-radius:12px;outline:none;width:100%;margin-bottom:16px;padding:14px 20px;font-size:1.1rem;transition:border-color .2s}.join-card input:focus{border-color:#764ba2}.join-card button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:12px;width:100%;padding:14px;font-size:1.1rem;font-weight:600;transition:transform .2s,box-shadow .2s}.join-card button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px #667eea66}.join-card button:disabled{opacity:.5;cursor:not-allowed}.chat-container{flex-direction:column;max-width:800px;height:100vh;margin:0 auto;display:flex}.chat-header{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;text-align:center;background:#ffffff26;flex-shrink:0;padding:16px 24px}.chat-header h2{font-size:1.3rem}.messages{flex-direction:column;flex:1;gap:8px;padding:16px;display:flex;overflow-y:auto}.message{align-items:flex-start;gap:8px;max-width:80%;animation:.3s fadeIn;display:flex}.message.own{flex-direction:row-reverse;align-self:flex-end}.username-badge{color:#fff;white-space:nowrap;border-radius:12px;flex-shrink:0;padding:4px 10px;font-size:.8rem;font-weight:600}.message-content{color:#333;word-break:break-word;background:#ffffffe6;border-radius:16px;padding:10px 16px;font-size:.95rem}.message.own .message-content{color:#fff;background:#667eeae6}.message-time{color:#fff9;flex-shrink:0;align-self:flex-end;font-size:.7rem}.input-bar{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff26;flex-shrink:0;gap:8px;padding:16px;display:flex}.input-bar input{color:#333;background:#ffffffe6;border:none;border-radius:24px;outline:none;flex:1;padding:14px 20px;font-size:1rem}.input-bar button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:24px;padding:14px 28px;font-size:1rem;font-weight:600;transition:transform .2s}.input-bar button:hover:not(:disabled){transform:scale(1.05)}.input-bar button:disabled{opacity:.5;cursor:not-allowed}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}