:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:#213547;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#747bff}body{min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#f9f9f9;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.chat-conv{background:#fff;border-radius:12px;box-shadow:0 0 15px #0000001a;display:flex;flex-direction:column;max-height:80vh;min-height:300px;position:relative}.room-info{padding:8px 16px;min-height:21px;background-color:#f9f9f9;text-align:left;font-size:14px;color:#666;border-bottom:1px solid #eee;position:relative}.chat-messages{flex:1;overflow-y:auto;padding:16px;background-color:#ededed}.message{margin-bottom:8px;display:flex;flex-direction:column}.message-content{max-width:80%;padding:4px 8px;border-radius:6px;position:relative;word-break:break-word}.message-meta{margin:0 0 4px}.message-time{font-size:12px;color:#999;text-align:center;display:inline-block}.message-sender{font-size:14px;color:#555;margin:4px 10px 0 5px}.message.mine{align-items:flex-start}.message.mine .message-content{background-color:#34c3d3}.message.mine .message-sender{float:left}.message.others{align-items:flex-start}.message.others .message-content{background-color:#fff}.message.others .message-sender{float:left}.message.system{align-items:center}.message.system .message-content{color:#888;padding:0 5px;font-style:italic;text-align:center;font-size:13px}.chat-input{display:flex;padding:10px 12px;background-color:#f5f5f5;border-top:1px solid #ddd}.chat-input input{flex:1;padding:10px 14px;border:1px solid #ddd;border-radius:6px;outline:none;font-size:15px}.chat-input button{margin-left:10px;padding:10px 16px;color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:700}.chat-input button:disabled{background-color:#95a1a3;cursor:not-allowed}.chat-input button:not(:disabled){background-color:#07aec1}.chat-input button:not(:disabled):hover{background-color:#099aaa}.chat-conn-status{text-align:right;position:absolute;right:0;top:0;padding:7px 19px 0 0}.chat-status-dot{display:inline-block;width:10px;height:10px;margin-left:5px;border-radius:5px;background:#fff}.chat-status-dot.orange{background:#dab745}.chat-status-dot.red{background:#d12f29}.chat-status-dot.green{background:#2db32d}.message-status.orange{color:#dab745}.message-status.red{color:#d12f29}.message-status.green{color:#2db32d}.room-chat{max-width:800px;min-width:600px;height:300px;margin:50px auto 20px}.name-modal-wrap{position:absolute;bottom:0;width:100%;height:100%;background-color:#e0e0e046}.name-modal{position:absolute;width:300px;left:50%;transform:translate(-50%);bottom:30px;padding:30px 30px 20px;background:#fff;border-radius:6px;box-shadow:0 0 15px #0000001a}.name-modal .name-ask{font-size:16px;margin:0 0 8px}.name-modal .name-row{display:flex}.name-modal .name-row input{flex:1;padding:5px 7px;border:1px solid #ddd;border-radius:3px;outline:none;font-size:15px}.name-modal .name-row button{margin-left:10px;padding:5px 8px;color:#fff;border:none;border-radius:3px;cursor:pointer;font-weight:700}.name-modal .name-row button:disabled{background-color:#95a1a3;cursor:not-allowed}.name-modal .name-row button:not(:disabled){background-color:#07aec1}.name-modal .name-row button:not(:disabled):hover{background-color:#099aaa}