*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;justify-content:center;min-height:100vh;padding:20px}.messages-container{background:#f8f9fa;overflow-y:auto;padding:25px}.messages-container,.no-messages{display:flex;flex:1 1;flex-direction:column}.no-messages{align-items:center;color:#999;justify-content:center}.no-messages-icon{font-size:80px;margin-bottom:20px}.no-messages h3{color:#666;font-size:24px;font-weight:600;margin-bottom:8px}.no-messages p{color:#999;font-size:16px}.message{word-wrap:break-word;animation:slideIn .3s ease;border-radius:16px;margin-bottom:20px;max-width:65%;padding:12px 16px}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message.system{align-self:center;background:#e3e8ef;border-radius:20px;color:#5a6c7d;font-size:14px;font-style:italic;max-width:85%;padding:10px 20px;text-align:center}.message.received{align-self:flex-start;background:#fff;border:1px solid #e1e8ed;box-shadow:0 2px 8px #0000000d}.message.sent{align-self:flex-end;background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 2px 8px #667eea4d;color:#fff}.message.received .message-user{color:#667eea}.message.received .message-user,.message.sent .message-user{font-size:13px;font-weight:700;letter-spacing:.3px;margin-bottom:6px}.message.sent .message-user{color:#ffffffe6}.message-text{font-size:15px;line-height:1.5;word-break:break-word}.message.received .message-text{color:#2d3748}.message.sent .message-text{color:#fff}.message-time{font-size:11px;margin-top:6px;text-align:right}.message.received .message-time{color:#a0aec0}.message.sent .message-time{color:#ffffffb3}.messages-container::-webkit-scrollbar{width:8px}.messages-container::-webkit-scrollbar-track{background:#f1f3f5}.messages-container::-webkit-scrollbar-thumb{background:#ced4da;border-radius:4px}.messages-container::-webkit-scrollbar-thumb:hover{background:#adb5bd}@media (max-width:768px){.messages-container{padding:15px}.message{max-width:80%}.message.system{max-width:90%}}.chat-input-container{align-items:center;background:#fff;border-top:2px solid #f0f0f0;display:flex;gap:12px;padding:20px 25px}.username-input{border:2px solid #667eea;border-radius:12px;flex:0 0 160px;font-size:15px;font-weight:500;outline:none;padding:14px 18px;transition:all .3s}.username-input:focus{border-color:#764ba2;box-shadow:0 0 0 4px #667eea1a}.message-input{border:2px solid #e1e8ed;border-radius:12px;flex:1 1;font-family:inherit;font-size:15px;outline:none;padding:14px 18px;resize:none;transition:all .3s}.message-input:focus{border-color:#667eea;box-shadow:0 0 0 4px #667eea1a}.send-button{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:12px;box-shadow:0 4px 15px #667eea4d;color:#fff;cursor:pointer;font-size:15px;font-weight:600;padding:14px 32px;transition:all .3s}.send-button:hover{box-shadow:0 6px 20px #667eea66;transform:translateY(-2px)}.send-button:active{transform:translateY(0)}.send-button:disabled{cursor:not-allowed;opacity:.5;transform:none}@media (max-width:768px){.chat-input-container{flex-wrap:wrap;gap:8px;padding:15px}.username-input{flex:1 1 100%}.message-input{flex:1 1;min-width:0}.send-button{padding:14px 24px}}.chat-container{background:#fff;border-radius:20px;box-shadow:0 20px 60px #0000004d;display:flex;flex-direction:column;height:90vh;max-width:900px;overflow:hidden;width:100%}.chat-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;justify-content:space-between;padding:20px 25px}.chat-header,.header-left{align-items:center;display:flex}.header-left{gap:15px}.header-icon{align-items:center;background:#fff3;border-radius:50%;display:flex;font-size:24px;height:50px;justify-content:center;width:50px}.header-info h1{font-size:24px;margin:0}.status{align-items:center;background:#fff3;border-radius:20px;display:flex;font-size:14px;gap:8px;padding:8px 16px}.status-dot{border-radius:50%;height:10px;width:10px}.status-dot.connected{animation:pulse 2s infinite;background:#4caf50}.status-dot.disconnected{background:#f44336}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.typing-indicator{align-items:center;background:#f8f9fa;border-top:1px solid #e9ecef;color:#666;display:flex;font-size:14px;font-style:italic;gap:8px;padding:12px 20px}.typing-dots{display:flex;gap:4px}.typing-dots span{animation:typing 1.4s infinite;background:#999;border-radius:50%;height:6px;width:6px}.typing-dots span:nth-child(2){animation-delay:.2s}.typing-dots span:nth-child(3){animation-delay:.4s}@keyframes typing{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-10px)}}@media (max-width:768px){.chat-container{border-radius:0;height:100vh}.header-left{gap:10px}.header-icon{height:40px;width:40px}.header-icon,.header-info h1{font-size:20px}.status{font-size:12px;padding:6px 12px}}
/*# sourceMappingURL=main.2b0fea89.css.map*/