*{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;position:relative}.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;padding:4px}.bubble-other{background:#fff;color:#333;border-bottom-left-radius:4px;box-shadow:0 1px 4px #00000014;padding:4px}.bubble-self span,.bubble-other span{display:block;padding:6px 10px}.msg-img{display:block;max-width:200px;max-height:200px;border-radius:12px;cursor:pointer;object-fit:contain}.leave-tip{text-align:center;color:#e6a23c;font-size:13px;background:#fdf6ec;border:1px solid #faecd8;border-radius:8px;padding:8px 14px}.pending-img-bar{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#f0f5ff;border-top:1px solid #d6e4ff;flex-shrink:0}.pending-img-wrap{position:relative}.pending-img-thumb{width:52px;height:52px;object-fit:cover;border-radius:8px;display:block}.pending-img-remove{position:absolute;top:-6px;right:-6px;width:18px;height:18px;background:#00000080;color:#fff;border:none;border-radius:50%;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}.uploading-dot{width:16px;height:16px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;display:inline-block}.input-area{display:flex;align-items:flex-end;gap:6px;padding:8px 12px;background:#fff;border-top:1px solid #eee;flex-shrink:0}.img-btn{width:40px;height:40px;border:none;border-radius:50%;background:transparent;color:#999;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .2s}.img-btn:hover{color:#4f81ff}.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}.img-preview-mask{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:9999;cursor:zoom-out}.img-preview-full{max-width:95vw;max-height:95vh;object-fit:contain;border-radius:4px}