*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body,#app{height:100%}.chat-app{background:#f5f5f5;flex-direction:column;max-width:600px;height:100%;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;display:flex;position:relative}.center-screen{color:#999;flex-direction:column;flex:1;justify-content:center;align-items:center;font-size:15px;display:flex}.spinner{border:3px solid #e0e0e0;border-top-color:#4f81ff;border-radius:50%;width:36px;height:36px;margin-bottom:12px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.chat-header{color:#fff;background:#4f81ff;flex-shrink:0;align-items:center;gap:12px;padding:14px 16px;display:flex}.header-avatar{background:#fff3;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex;position:relative}.header-unread-badge{color:#fff;text-align:center;background:#f56c6c;border:2px solid #4f81ff;border-radius:10px;min-width:18px;height:18px;padding:0 5px;font-size:10px;line-height:14px;position:absolute;top:-7px;right:-9px}.header-avatar-img{width:26px;height:26px;display:block}.header-title{font-size:16px;font-weight:600}.header-sub{opacity:.85;margin-top:2px;font-size:12px}.header-sub.online{color:#a8f5a8}.header-sub.offline{color:#ffd0d0}.header-sub.connecting{color:#ffe8a0}.msg-area{-webkit-overflow-scrolling:touch;flex-direction:column;flex:1;gap:12px;padding:16px 12px;display:flex;overflow-y:auto}.empty-hint{text-align:center;color:#bbb;margin:auto;font-size:14px}.msg-system{text-align:center;color:#aaa;background:#0000000a;border-radius:12px;align-self:center;padding:4px 12px;font-size:12px}.msg-row{flex-direction:column;gap:5px;max-width:78%;display:flex}.msg-self{align-self:flex-end;align-items:flex-end}.msg-other{align-self:flex-start;align-items:flex-start}.msg-meta{align-items:center;gap:6px;display:flex}.agent-avatar{background:#1677ff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;display:flex}.agent-avatar-img{object-fit:cover;border-radius:50%;width:100%;height:100%;display:block}.agent-name{color:#888;font-size:12px}.msg-bubble{word-break:break-word;white-space:pre-wrap;border-radius:18px;padding:10px 14px;font-size:15px;line-height:1.5}.message-link{color:#1677ff;overflow-wrap:anywhere;text-decoration:underline}.bubble-self .message-link{color:inherit}.bubble-self{color:#fff;background:#4f81ff;border-bottom-right-radius:4px}.bubble-other{color:#333;background:#fff;border-bottom-left-radius:4px;box-shadow:0 1px 4px #00000014}.msg-img{cursor:pointer;object-fit:contain;border-radius:12px;max-width:200px;max-height:200px;display:block}.leave-tip{text-align:center;color:#e6a23c;background:#fdf6ec;border:1px solid #faecd8;border-radius:8px;padding:8px 14px;font-size:13px}.pending-img-bar{background:#f0f5ff;border-top:1px solid #d6e4ff;flex-shrink:0;align-items:center;gap:10px;padding:8px 12px;display:flex}.pending-img-wrap{position:relative}.pending-img-thumb{object-fit:cover;border-radius:8px;width:52px;height:52px;display:block}.pending-img-remove{color:#fff;cursor:pointer;background:#00000080;border:none;border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;padding:0;font-size:10px;display:flex;position:absolute;top:-6px;right:-6px}.uploading-dot{border:2px solid #ffffff80;border-top-color:#fff;border-radius:50%;width:16px;height:16px;animation:.6s linear infinite spin;display:inline-block}.input-area{background:#fff;border-top:1px solid #eee;flex-shrink:0;align-items:flex-end;gap:6px;padding:8px 12px;display:flex}.img-btn{color:#999;cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;transition:color .2s;display:flex}.img-btn:hover{color:#4f81ff}.input-box{resize:none;background:#f9f9f9;border:1px solid #e0e0e0;border-radius:20px;outline:none;flex:1;max-height:120px;padding:10px 14px;font-family:inherit;font-size:15px;line-height:1.4}.input-box:focus{background:#fff;border-color:#4f81ff}.send-btn{color:#fff;cursor:pointer;background:#4f81ff;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;transition:opacity .2s;display:flex}.send-btn:disabled{opacity:.4;cursor:not-allowed}.send-btn:not(:disabled):active{opacity:.8}.btn-primary{color:#fff;cursor:pointer;background:#4f81ff;border:none;border-radius:8px;padding:10px 24px;font-size:15px}.img-preview-mask{z-index:9999;cursor:zoom-out;background:#000000d9;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.img-preview-full{object-fit:contain;border-radius:4px;max-width:95vw;max-height:95vh}