.message-list{flex:1;padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#555;text-align:center;gap:8px}.message{display:flex;flex-direction:column}.message.mine{align-items:flex-end}.message-name{font-size:12px;color:#888;margin-bottom:4px;margin-left:12px}.message-bubble{max-width:70%;padding:10px 14px;border-radius:16px;background:#16213e;display:flex;flex-direction:column;gap:4px}.message.mine .message-bubble{background:#e94560;border-bottom-right-radius:4px}.message:not(.mine) .message-bubble{border-bottom-left-radius:4px}.message-content{font-size:15px;line-height:1.4;word-wrap:break-word;white-space:pre-wrap}.message-time{font-size:11px;color:#ffffff80;align-self:flex-end}.system-message{text-align:center;font-size:13px;color:#666;padding:8px 16px;background:#ffffff0d;border-radius:20px;align-self:center}.error-message{text-align:center;font-size:13px;color:#fca5a5;padding:10px 16px;background:#ef444426;border:1px solid rgba(239,68,68,.3);border-radius:12px;align-self:center;max-width:90%}.message.bot .message-name{color:#a78bfa;font-weight:500}.message.bot .message-bubble{background:linear-gradient(135deg,#1e1b4b,#312e81);border:1px solid #4c1d95}.bot-badge{margin-right:4px}.message-content code{background:#0000004d;padding:2px 6px;border-radius:4px;font-family:Fira Code,Consolas,monospace;font-size:13px}.message-content pre{background:#0006;padding:12px;border-radius:8px;overflow-x:auto;margin:8px 0}.message-content pre code{background:none;padding:0;font-size:12px;line-height:1.5}.message-content strong{font-weight:600}.message-content em{font-style:italic}.message-content a{color:#60a5fa;text-decoration:none}.message-content a:hover{text-decoration:underline}.message-input{display:flex;gap:12px;padding:16px;background:#16213e;border-top:1px solid #0f3460}.message-input .input-wrapper{flex:1;position:relative;display:flex;flex-direction:column}.message-input .char-count{position:absolute;right:12px;bottom:-18px;font-size:11px;color:#666;transition:color .2s}.message-input .char-count.warning{color:#e94560;font-weight:600}.message-input textarea{flex:1;padding:12px 16px;border:2px solid #0f3460;border-radius:24px;background:#1a1a2e;color:#eee;font-size:15px;font-family:inherit;resize:none;min-height:44px;max-height:120px;transition:border-color .2s}.message-input textarea:focus{outline:none;border-color:#e94560}.message-input textarea::placeholder{color:#555}.message-input textarea:disabled{opacity:.6;cursor:not-allowed}.message-input button{padding:12px 24px;border:none;border-radius:24px;background:#e94560;color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:background .2s,opacity .2s;white-space:nowrap}.message-input button:hover:not(:disabled){background:#d63a52}.message-input button:disabled{opacity:.5;cursor:not-allowed}.chat-room{display:flex;flex-direction:column;height:100vh}.chat-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#16213e;border-bottom:1px solid #0f3460}.header-left{flex:1}.header-center{display:flex;align-items:center;gap:12px}.header-center h2{margin:0;font-size:18px;color:#e94560}.header-right{flex:1;text-align:right}.leave-button{padding:8px 16px;border:none;border-radius:6px;background:transparent;color:#888;font-size:14px;cursor:pointer;transition:color .2s}.leave-button:hover{color:#e94560}.connection-status{font-size:12px;padding:4px 10px;border-radius:12px;background:#0f3460}.connection-status.connected{background:#1e5128;color:#4ade80}.connection-status.connecting{background:#713f12;color:#fbbf24}.connection-status.disconnected,.connection-status.error{background:#7f1d1d;color:#f87171}.user-count{font-size:14px;color:#888}.chat-body{display:flex;flex:1;overflow:hidden}.user-list{width:200px;padding:16px;background:#16213e;border-right:1px solid #0f3460;overflow-y:auto}.user-list h3{font-size:14px;color:#888;margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px}.user-list ul{list-style:none}.user-list li{padding:8px 12px;border-radius:6px;font-size:14px;color:#ccc;margin-bottom:4px}.user-list li.me{background:#0f3460;color:#e94560;font-weight:500}.messages-container{flex:1;display:flex;flex-direction:column;overflow:hidden}@media (max-width: 768px){.user-list{display:none}}.join-container{flex:1;display:flex;align-items:center;justify-content:center;padding:20px}.join-card{background:#16213e;border-radius:12px;padding:40px;width:100%;max-width:400px;box-shadow:0 4px 20px #0000004d}.join-card h1{text-align:center;margin-bottom:8px;color:#e94560}.join-card>p{text-align:center;color:#888;margin-bottom:30px}.nickname-display{margin-bottom:24px}.nickname-label{display:block;text-align:center;font-size:14px;color:#888;margin-bottom:12px}.nickname-box{display:flex;align-items:center;justify-content:center;gap:12px;background:linear-gradient(135deg,#1a1a2e,#0f3460);border:2px solid #e94560;border-radius:12px;padding:16px 20px}.nickname{font-size:20px;font-weight:700;color:#fff;text-shadow:0 0 10px rgba(233,69,96,.5)}.reroll-button{background:#e9456033;border:none;border-radius:8px;padding:8px 12px;font-size:20px;cursor:pointer;transition:all .2s}.reroll-button:hover{background:#e9456066;transform:rotate(180deg)}.reroll-button:active{transform:rotate(180deg) scale(.9)}.join-button{width:100%;padding:14px;border:none;border-radius:8px;background:#e94560;color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:background .2s,transform .1s}.join-button:hover{background:#d63a52}.join-button:active{transform:scale(.98)}.powered-by{text-align:center;font-size:12px;color:#555;margin-top:20px;margin-bottom:0}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background-color:#1a1a2e;color:#eee;min-height:100vh}#root{min-height:100vh;display:flex;flex-direction:column}