*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;min-height:100vh}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{align-items:center;display:flex;justify-content:center;min-height:100vh;padding:20px}.join-container{max-width:500px;width:100%}.join-card{animation:slideUp .5s ease-out;background:#fff;border-radius:20px;box-shadow:0 20px 60px #0000004d;padding:40px}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.app-title{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;background-clip:text;font-size:3rem;margin-bottom:10px;text-align:center}.app-subtitle{color:#666;font-size:1.1rem;margin-bottom:30px;text-align:center}.join-form{gap:25px}.form-group,.join-form{display:flex;flex-direction:column}.form-group{gap:12px}.form-group label{color:#333;font-size:1rem;font-weight:600}.avatar-grid{grid-gap:10px;display:grid;gap:10px;grid-template-columns:repeat(5,1fr)}.avatar-option{background:#f5f5f5;border:3px solid #0000;border-radius:12px;cursor:pointer;font-size:2rem;padding:12px;transition:all .2s}.avatar-option:hover{background:#ffe0f0;transform:scale(1.1)}.avatar-option.selected{background:#f0e7ff;border-color:#764ba2;transform:scale(1.15)}.form-group input{border:2px solid #e0e0e0;border-radius:12px;font-size:1rem;padding:15px;transition:border-color .2s}.form-group input:focus{border-color:#764ba2;outline:none}.join-button{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:12px;color:#fff;cursor:pointer;font-size:1.1rem;font-weight:600;padding:15px;transition:transform .2s}.join-button:hover:not(:disabled){box-shadow:0 5px 20px #764ba266;transform:translateY(-2px)}.join-button:disabled{cursor:not-allowed;opacity:.6}.chat-container{background:#fff;border-radius:20px;box-shadow:0 20px 60px #0000004d;display:flex;height:90vh;max-width:1400px;overflow:hidden;width:100%}.sidebar{background:linear-gradient(180deg,#667eea,#764ba2);color:#fff;display:flex;flex-direction:column;width:300px}.sidebar-header{border-bottom:1px solid #fff3;padding:25px}.sidebar-header h2{font-size:1.5rem;margin-bottom:15px}.status-indicator{align-items:center;display:flex;font-size:.9rem;gap:8px;opacity:.9}.status-dot{animation:pulse 2s infinite;border-radius:50%;height:10px;width:10px}.status-dot.connected{background:#4ade80}.status-dot.disconnected{background:#f87171}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.active-users{flex:1 1;overflow-y:auto;padding:25px}.active-users h3{font-size:1.1rem;margin-bottom:15px;opacity:.9}.users-list{display:flex;flex-direction:column;gap:10px}.user-item{align-items:center;background:#ffffff1a;border-radius:10px;display:flex;gap:12px;padding:10px;transition:background .2s}.user-item:hover{background:#fff3}.user-avatar{font-size:1.5rem}.user-name{font-weight:500}.chat-main{display:flex;flex:1 1;flex-direction:column}.chat-header{align-items:center;border-bottom:2px solid #f0f0f0;display:flex;justify-content:space-between;padding:25px}.chat-header h2{color:#333;font-size:1.5rem}.current-user{align-items:center;background:#f5f5f5;border-radius:20px;display:flex;gap:10px;padding:8px 15px}.current-avatar{font-size:1.5rem}.current-name{color:#333;font-weight:600}.messages-container{background:#fafafa;flex:1 1;overflow-y:auto;padding:25px}.empty-state{align-items:center;color:#999;display:flex;flex-direction:column;height:100%;justify-content:center}.empty-icon{animation:float 3s ease-in-out infinite;font-size:4rem;margin-bottom:20px}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.message{animation:messageSlide .3s ease-out;display:flex;gap:12px;margin-bottom:20px}@keyframes messageSlide{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message-avatar{flex-shrink:0;font-size:2rem}.message-content{flex:1 1;max-width:70%}.message-header{align-items:center;display:flex;gap:10px;margin-bottom:5px}.message-username{color:#333;font-weight:600}.message-time{color:#999;font-size:.8rem}.message-text{word-wrap:break-word;background:#fff;border-radius:12px;box-shadow:0 2px 5px #0000000d;padding:12px 16px}.message.own-message{flex-direction:row-reverse}.message.own-message .message-content{align-items:flex-end;display:flex;flex-direction:column}.message.own-message .message-text{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.typing-indicator{align-items:center;color:#666;display:flex;font-size:.9rem;font-style:italic;gap:5px;padding:10px 0}.typing-dots{display:inline-flex;gap:2px}.typing-dots span{animation:typingDot 1.4s infinite}.typing-dots span:nth-child(2){animation-delay:.2s}.typing-dots span:nth-child(3){animation-delay:.4s}@keyframes typingDot{0%,60%,to{opacity:.3}30%{opacity:1}}.message-form{background:#fff;border-top:2px solid #f0f0f0;display:flex;gap:10px;padding:25px}.message-form input{border:2px solid #e0e0e0;border-radius:25px;flex:1 1;font-size:1rem;padding:15px 20px;transition:border-color .2s}.message-form input:focus{border-color:#764ba2;outline:none}.message-form button{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:25px;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:15px 30px;transition:transform .2s}.message-form button:hover:not(:disabled){box-shadow:0 5px 15px #764ba266;transform:translateY(-2px)}.message-form button:disabled{cursor:not-allowed;opacity:.5}.notification{animation:notificationSlide .3s ease-out;background:#fff;border-radius:10px;box-shadow:0 5px 20px #0003;padding:15px 25px;position:fixed;right:20px;top:20px;z-index:1000}@keyframes notificationSlide{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}.notification.join{border-left:4px solid #4ade80}.notification.leave{border-left:4px solid #f87171}@media (max-width:768px){.chat-container{flex-direction:column;height:95vh}.sidebar{max-height:200px;width:100%}.message-content{max-width:85%}}
/*# sourceMappingURL=main.2c8b0e76.css.map*/