.container{max-width:800px;margin:0 auto;padding:20px;font-family:Arial,sans-serif}.connection-status{padding:10px;margin-bottom:20px;border-radius:4px}.success{background-color:#d4edda;color:#155724}.error{background-color:#f8d7da;color:#721c24}.room-controls{display:flex;gap:10px;margin-bottom:20px}.room-info{border:1px solid #ddd;padding:15px;border-radius:4px}.user-list{margin-bottom:20px}.chat{display:flex;flex-direction:column;height:300px}.messages{flex-grow:1;overflow-y:auto;border:1px solid #eee;padding:10px;margin-bottom:10px;height:200px}.message{margin-bottom:8px}.message-form{display:flex;gap:10px}.message-form input{flex-grow:1}input,button{padding:8px 12px;border-radius:4px;border:1px solid #ddd}button{background-color:#4caf50;color:#fff;border:none;cursor:pointer}button:disabled{background-color:#ccc}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400}body{margin:0;display:flex;min-width:320px;min-height:100vh}#root{width:100%}