/* ================= 智能客服气泡 ================= */
.chat-fab{position:fixed;right:22px;bottom:26px;z-index:9998;
  width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;
  background:linear-gradient(135deg,#d9b26a,#c19a4f);
  color:#241d10;font-size:24px;line-height:1;box-shadow:0 6px 20px rgba(180,140,60,.42);
  display:flex;align-items:center;justify-content:center;transition:.22s}
.chat-fab:hover{transform:translateY(-2px) scale(1.04)}
.chat-fab .dot{position:absolute;top:-2px;right:-2px;width:14px;height:14px;border-radius:50%;
  background:#e5484d;border:2px solid #fff;display:none}
.chat-fab.has-new .dot{display:block}

.chat-panel{position:fixed;right:22px;bottom:96px;z-index:9999;
  width:352px;max-width:calc(100vw - 32px);height:520px;max-height:calc(100vh - 130px);
  background:#fff;border-radius:14px;box-shadow:0 14px 44px rgba(20,24,32,.22);
  display:none;flex-direction:column;overflow:hidden;border:1px solid #e6e9ee}
.chat-panel.open{display:flex}

.chat-hd{background:linear-gradient(135deg,#2f3742,#3d4653);color:#fff;padding:12px 14px;
  display:flex;align-items:center;gap:10px;flex-shrink:0}
.chat-hd .av{width:34px;height:34px;border-radius:50%;background:#c8a45c;color:#241d10;
  display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.chat-hd .ti{flex:1;min-width:0}
.chat-hd .ti b{display:block;font-size:14px;font-weight:600}
.chat-hd .ti span{display:block;font-size:11.5px;color:#b9c0cb;margin-top:2px}
.chat-hd .x{background:none;border:0;color:#c3cad4;font-size:20px;cursor:pointer;padding:0 4px;line-height:1}
.chat-hd .x:hover{color:#fff}

.chat-tabs{display:flex;border-bottom:1px solid #eceef2;flex-shrink:0;background:#fafbfc}
.chat-tabs button{flex:1;padding:9px 6px;border:0;background:none;font-size:13px;color:#6b7480;
  cursor:pointer;border-bottom:2px solid transparent}
.chat-tabs button.on{color:#a6772c;border-bottom-color:#c8a45c;font-weight:600}
.chat-tabs button:hover{color:#a6772c}

.chat-body{flex:1;overflow-y:auto;padding:14px;background:#f6f7f9;
  -webkit-overflow-scrolling:touch}
.chat-body::-webkit-scrollbar{width:6px}
.chat-body::-webkit-scrollbar-thumb{background:#d5d9e0;border-radius:3px}

.cmsg{display:flex;margin-bottom:12px;gap:8px;align-items:flex-start}
.cmsg.me{flex-direction:row-reverse}
.cmsg .cav{width:28px;height:28px;border-radius:50%;flex-shrink:0;font-size:14px;
  display:flex;align-items:center;justify-content:center;background:#e3e6ea;color:#5d6572}
.cmsg.me .cav{background:#c8a45c;color:#241d10}
.cmsg .cb{max-width:78%;padding:9px 12px;border-radius:12px;font-size:13.5px;line-height:1.72;
  white-space:pre-wrap;word-break:break-word}
.cmsg.bot .cb{background:#fff;border:1px solid #e8eaee;color:#333a45;border-top-left-radius:3px}
.cmsg.me  .cb{background:#c8a45c;color:#241d10;border-top-right-radius:3px}
.cmsg.admin .cb{background:#eef4ff;border:1px solid #d3e0f7;color:#2c3e5c;border-top-left-radius:3px}
.cmsg .ct{font-size:10.5px;color:#a8aeb8;margin:3px 4px 0}
.cmsg.me .ct{text-align:right}

.chat-quick{padding:0 14px 10px;display:flex;flex-wrap:wrap;gap:6px;background:#f6f7f9;flex-shrink:0}
.chat-quick button{border:1px solid #e0d3b4;background:#fffaf0;color:#8a6d2f;
  border-radius:14px;padding:5px 11px;font-size:12px;cursor:pointer}
.chat-quick button:hover{background:#fdf3e0}

.chat-ft{border-top:1px solid #eceef2;padding:10px 12px;background:#fff;flex-shrink:0}
.chat-inp{display:flex;gap:8px}
.chat-inp input{flex:1;border:1px solid #dfe3e8;border-radius:9px;padding:9px 11px;font-size:14px;outline:none}
.chat-inp input:focus{border-color:#c8a45c}
.chat-inp button{border:0;background:#c8a45c;color:#241d10;border-radius:9px;padding:0 16px;
  font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.chat-inp button:hover{background:#d4b06a}
.chat-tip{font-size:11px;color:#a3a9b3;margin-top:7px;text-align:center}

/* 留资卡 */
.chat-card{background:#fff;border:1px solid #e8eaee;border-radius:11px;padding:12px;margin-bottom:12px}
.chat-card h5{margin:0 0 4px;font-size:13.5px;color:#2f3742}
.chat-card p{margin:0 0 10px;font-size:12px;color:#8b93a1;line-height:1.7}
.chat-card .row{margin-bottom:8px}
.chat-card input,.chat-card select{width:100%;border:1px solid #dfe3e8;border-radius:8px;
  padding:8px 10px;font-size:13.5px;outline:none;box-sizing:border-box}
.chat-card input:focus{border-color:#c8a45c}
.chat-card .btnw{width:100%;border:0;background:#c8a45c;color:#241d10;border-radius:8px;
  padding:9px;font-size:13.5px;font-weight:600;cursor:pointer;margin-top:2px}
.chat-card .btnw:hover{background:#d4b06a}
.chat-card .skip{display:block;text-align:center;font-size:12px;color:#a3a9b3;margin-top:8px;cursor:pointer}
.chat-card .skip:hover{color:#8b93a1}

/* 微信 Tab */
.chat-wx{padding:16px 14px;text-align:center}
.chat-wx .qrwrap{width:170px;height:170px;margin:0 auto 12px;background:#f6f7f9;
  border:1px solid #e6e9ee;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:13px;color:#9aa2ae;overflow:hidden}
.chat-wx .qrwrap img{width:100%;height:100%;object-fit:contain}
.chat-wx .wxid{font-size:16px;font-weight:600;color:#2f3742;margin-bottom:4px}
.chat-wx .hint{font-size:12px;color:#8b93a1;line-height:1.8;margin-bottom:12px}
.chat-wx .acts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.chat-wx .acts a,.chat-wx .acts button{border:1px solid #c8a45c;background:#fffaf0;color:#8a6d2f;
  border-radius:8px;padding:7px 14px;font-size:12.5px;cursor:pointer;text-decoration:none}
.chat-wx .acts a:hover,.chat-wx .acts button:hover{background:#fdf3e0}

@media (max-width:640px){
  .chat-fab{right:16px;bottom:calc(20px + env(safe-area-inset-bottom));width:52px;height:52px;font-size:21px}
  .chat-panel{right:12px;left:12px;width:auto;bottom:calc(80px + env(safe-area-inset-bottom));
    height:min(64vh,480px);border-radius:14px}
}