/* ================= 智能客服气泡 ================= */
.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}

/* V87：「辛集房产 · 在线顾问」标题放到面板顶部中间。
   原来是 头像 + 标题 + × 一字排开，标题被头像挤到偏左，看着不像"窗口标题"。
   现在头像和 × 各自绝对定位到两端，标题独占中间并居中，
   左右各留 46px 内边距，保证长标题也不会撞到两端图标。 */
.chat-hd{position:relative;background:linear-gradient(135deg,#2f3742,#3d4653);color:#fff;
  padding:12px 50px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chat-hd .av{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  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;text-align:center}
.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{position:absolute;right:14px;top:50%;transform:translateY(-50%);
  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}

/* ================= V45：手机端极简 =================
   原来面板高 min(64vh,480px)，在小屏上直接盖掉大半个房源详情，
   用户反馈「影响看房源信息」。目标是：能问就行，别挡内容。

   做法：
   1. 高度 64vh → 46vh（最多 360px），大约只占半屏不到
   2. 头部副标题「智能助手 7×24 在线」隐藏（省一行）
   3. 底部免责声明 chat-tip 隐藏（省一行）
   4. 头部内边距、头像尺寸都收一档
   5. 快捷按钮只显示前 3 个（其余靠输入框）
   6. 气泡 52 → 46px，少挡一点
================================================== */
@media (max-width:640px){
  /* V87：气泡原来在 bottom:16px，高 46px → 占距底 16~62px；
     而手机底部 Tab 栏 .m-tabbar 高 56px（占 0~56）—— 重叠 40px，
     等于把最右边那个 Tab 压掉一大半。现在抬到 66px，留 10px 间隙。 */
  .chat-fab{right:14px;bottom:calc(66px + env(safe-area-inset-bottom));width:46px;height:46px;font-size:19px}
  /* 面板抬到 176px：左下角音乐控制条占距底 126~166（bottom:126 高 40），
     面板从 176 往上展开，正好落在它上方并留 10px 间隙，不会被半遮住。 */
  .chat-panel{right:10px;left:10px;width:auto;bottom:calc(176px + env(safe-area-inset-bottom));
    height:min(46vh,360px);border-radius:12px}

  /* 头部收紧：副标题隐藏
     左右内边距留 42px，保证居中的标题不撞到两端绝对定位的头像和 × */
  .chat-hd{padding:9px 42px}
  .chat-hd .av{left:11px;width:28px;height:28px;font-size:15px}
  .chat-hd .x{right:11px}
  .chat-hd .ti b{font-size:13px}
  .chat-hd #chatSub{display:none}

  /* Tab 收紧 */
  .chat-tabs button{padding:7px 4px;font-size:12.5px}

  /* 正文区留白收紧 */
  .chat-body{padding:11px}
  .cmsg{margin-bottom:9px;gap:6px}
  .cmsg .cav{width:24px;height:24px;font-size:12px}
  .cmsg .cb{max-width:82%;padding:8px 10px;font-size:13px;line-height:1.65}

  /* 底部：去掉免责声明那一行 */
  .chat-ft{padding:8px 10px}
  .chat-tip{display:none}
  .chat-inp input{padding:8px 10px;font-size:13.5px}
  .chat-inp button{padding:0 13px;font-size:13px}

  /* 快捷按钮：手机上只留前 3 个，避免堆一大片 */
  .chat-quick{padding:0 11px 8px;gap:5px;max-height:34px;overflow:hidden}
  .chat-quick button{padding:4px 9px;font-size:11.5px}
  .chat-quick button:nth-child(n+4){display:none}

  /* 微信 Tab 收紧 */
  .chat-wx{padding:12px 11px}
  .chat-wx .qrwrap{width:132px;height:132px;margin:0 auto 9px}
  .chat-wx .wxid{font-size:15px}
  .chat-wx .hint{font-size:11.5px;margin-bottom:9px}

  /* 留资卡收紧 */
  .chat-card{padding:10px;margin-bottom:9px}
  .chat-card .row{margin-bottom:6px}
}