*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:linear-gradient(135deg,#1a1a2e,#16213e);min-height:100vh;display:flex;justify-content:center;align-items:center}#root{width:100%;max-width:600px;padding:20px}.chat-container{background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;padding:20px;box-shadow:0 8px 32px #0000004d}.chat-header{text-align:center;color:#fff;margin-bottom:20px}.chat-header h1{font-size:1.5rem;margin-bottom:5px}.chat-header .status{font-size:.9rem;color:#888}.chat-header .status.connected{color:#4ade80}.chat-header .status.disconnected{color:#f87171}.messages-container{height:400px;overflow-y:auto;padding:15px;background:#0003;border-radius:10px;margin-bottom:15px}.message{margin-bottom:12px;padding:10px 15px;border-radius:12px;max-width:80%;animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message.sent{background:#3b82f6;color:#fff;margin-left:auto;border-bottom-right-radius:4px}.message.received{background:#ffffff26;color:#fff;margin-right:auto;border-bottom-left-radius:4px}.message .sender{font-size:.75rem;opacity:.7;margin-bottom:4px}.message .text{font-size:.95rem;line-height:1.4}.input-container{display:flex;gap:10px}.input-container input{flex:1;padding:12px 18px;border:none;border-radius:25px;background:#ffffff1a;color:#fff;font-size:1rem;outline:none;transition:background .3s}.input-container input::placeholder{color:#ffffff80}.input-container input:focus{background:#ffffff26}.input-container button{padding:12px 25px;border:none;border-radius:25px;background:#3b82f6;color:#fff;font-size:1rem;cursor:pointer;transition:background .3s,transform .2s}.input-container button:hover{background:#2563eb}.input-container button:active{transform:scale(.95)}.input-container button:disabled{background:#4b5563;cursor:not-allowed}.ws-url-container{margin-bottom:15px;display:flex;gap:10px}.ws-url-container input{flex:1;padding:10px 15px;border:none;border-radius:10px;background:#ffffff1a;color:#fff;font-size:.9rem;outline:none}.ws-url-container button{padding:10px 20px;border:none;border-radius:10px;background:#10b981;color:#fff;font-size:.9rem;cursor:pointer;transition:background .3s}.ws-url-container button:hover{background:#059669}.ws-url-container button.disconnect{background:#ef4444}.ws-url-container button.disconnect:hover{background:#dc2626}