*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body,#app{height:100%}.chat-app{display:flex;flex-direction:column;height:100%;max-width:600px;margin:0 auto;background:#f5f5f5;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.center-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#999;font-size:15px}.spinner{width:36px;height:36px;border:3px solid #e0e0e0;border-top-color:#4f81ff;border-radius:50%;animation:spin .8s linear infinite;margin-bottom:12px}@keyframes spin{to{transform:rotate(360deg)}}.chat-header{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#4f81ff;color:#fff;flex-shrink:0}.header-avatar{width:40px;height:40px;background:#fff3;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}.header-title{font-size:16px;font-weight:600}.header-sub{font-size:12px;opacity:.85;margin-top:2px}.header-sub.online{color:#a8f5a8}.header-sub.offline{color:#ffd0d0}.header-sub.connecting{color:#ffe8a0}.msg-area{flex:1;overflow-y:auto;padding:16px 12px;display:flex;flex-direction:column;gap:12px;-webkit-overflow-scrolling:touch}.empty-hint{text-align:center;color:#bbb;font-size:14px;margin:auto}.msg-system{text-align:center;color:#aaa;font-size:12px;padding:4px 12px;background:#0000000a;border-radius:12px;align-self:center}.msg-row{display:flex;align-items:flex-end;gap:8px}.msg-row.right{flex-direction:row-reverse}.msg-avatar{width:32px;height:32px;border-radius:50%;background:#ddd;color:#666;font-size:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.msg-row.right .msg-avatar{background:#4f81ff;color:#fff}.msg-bubble{max-width:calc(100vw - 120px);padding:10px 14px;border-radius:18px;font-size:15px;line-height:1.5;word-break:break-word}.bubble-self{background:#4f81ff;color:#fff;border-bottom-right-radius:4px}.bubble-other{background:#fff;color:#333;border-bottom-left-radius:4px;box-shadow:0 1px 4px #00000014}.leave-tip{text-align:center;color:#e6a23c;font-size:13px;background:#fdf6ec;border:1px solid #faecd8;border-radius:8px;padding:8px 14px}.input-area{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;background:#fff;border-top:1px solid #eee;flex-shrink:0}.input-box{flex:1;border:1px solid #e0e0e0;border-radius:20px;padding:10px 14px;font-size:15px;resize:none;outline:none;max-height:120px;line-height:1.4;background:#f9f9f9;font-family:inherit}.input-box:focus{border-color:#4f81ff;background:#fff}.send-btn{width:44px;height:44px;border:none;border-radius:50%;background:#4f81ff;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .2s}.send-btn:disabled{opacity:.4;cursor:not-allowed}.send-btn:not(:disabled):active{opacity:.8}.btn-primary{padding:10px 24px;background:#4f81ff;color:#fff;border:none;border-radius:8px;font-size:15px;cursor:pointer}