/* 微信客服悬浮组件（移植自 www.miaotao.com 右下角客服模块）
   - 结构/动画/交互与原站一致；
   - 冷灰蓝中性色归位到本系统暖色板（微信绿为品牌色例外，保留）；
   - 定位抬高以避开本系统右下角「购物车」悬浮按钮与移动端底部 6 Tab。 */
.mt-kefu{
  --kf-ink:var(--ink-strong,var(--ink,#3A3430));
  --kf-muted:var(--muted,#8C8276);
  --kf-line:var(--line,#E8E4DE);
  --kf-soft:var(--bg-soft,#FAF7F2);
  --kf-white:var(--white,#FFFFFF);
  --kf-wx:#07C160;
  --kf-wx2:#06AD56;
  position:fixed; right:24px; bottom:96px; z-index:95;
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
  pointer-events:none;
  font-family:var(--font,"Microsoft YaHei","微软雅黑",sans-serif);
}
.mt-kefu > *{pointer-events:auto}
/* onsite.html 无购物车与底部导航，可回到常规右下角位置 */
body[data-page="onsite"] .mt-kefu{bottom:28px;right:28px}

/* 悬浮按钮 */
.mt-kefu-toggle{
  width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--kf-wx),var(--kf-wx2));color:#fff;
  display:flex;align-items:center;justify-content:center;position:relative;
  box-shadow:0 8px 24px -4px rgba(7,193,96,.5);
  transition:all .3s cubic-bezier(.2,.9,.4,1);
}
.mt-kefu-toggle:hover{transform:scale(1.08);box-shadow:0 12px 28px -4px rgba(7,193,96,.65)}
.mt-kefu-toggle svg{width:30px;height:28px;display:block}
.mt-kefu-dot{
  position:absolute;top:0;right:0;width:14px;height:14px;border-radius:50%;
  background:#B33A2B;border:2px solid #fff;animation:mt-kefu-pulse 1.8s infinite;
}
@keyframes mt-kefu-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}

/* 客服卡片 */
.mt-kefu-card{
  width:300px;background:var(--kf-white);border-radius:20px;
  border:1px solid var(--kf-line);
  box-shadow:0 24px 48px -12px rgba(58,52,48,.22),0 8px 16px rgba(58,52,48,.07);
  padding:24px 22px 20px;text-align:center;position:relative;
  transform:translateY(20px) scale(.92);opacity:0;visibility:hidden;
  transform-origin:bottom right;
  transition:all .35s cubic-bezier(.2,.9,.4,1);
}
.mt-kefu-card.show{transform:translateY(0) scale(1);opacity:1;visibility:visible}
.mt-kefu-close{
  position:absolute;top:12px;right:14px;width:28px;height:28px;border-radius:50%;
  background:transparent;border:none;color:var(--kf-muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .2s;
}
.mt-kefu-close:hover{background:var(--kf-soft);color:var(--kf-ink)}
.mt-kefu-close svg{width:16px;height:16px}
.mt-kefu-hd{
  display:flex;align-items:center;gap:10px;margin-bottom:16px;padding-bottom:14px;
  border-bottom:1px solid var(--kf-line);
}
.mt-kefu-avatar{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--kf-wx),var(--kf-wx2));color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.mt-kefu-avatar svg{width:22px;height:22px}
.mt-kefu-info{text-align:left}
.mt-kefu-name{font-size:15px;font-weight:700;color:var(--kf-ink);margin-bottom:2px}
.mt-kefu-status{font-size:12px;color:var(--kf-wx2);display:flex;align-items:center;gap:5px}
.mt-kefu-status::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--kf-wx);
  display:inline-block;animation:mt-kefu-pulse 1.8s infinite;
}
.mt-kefu-qr{margin-bottom:12px}
.mt-kefu-qr a{display:inline-block;padding:8px;border:1px solid var(--kf-line);border-radius:12px;background:var(--kf-soft)}
.mt-kefu-qr img,.mt-kefu-qr canvas{width:160px!important;height:160px!important;display:block;border-radius:8px;background:var(--kf-white)}
.mt-kefu-qr-fallback{
  width:160px;height:160px;display:flex;align-items:center;justify-content:center;
  font-size:14px;line-height:1.8;color:var(--kf-ink);font-weight:600;
}
.mt-kefu-tip{font-size:13px;color:var(--kf-muted);margin-bottom:16px;line-height:1.5}
.mt-kefu-tip strong{color:var(--kf-wx2)}
.mt-kefu-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;
  border-radius:14px;border:none;cursor:pointer;text-decoration:none;
  background:linear-gradient(135deg,var(--kf-wx),var(--kf-wx2));color:#fff;
  font-weight:600;font-size:14px;transition:all .2s;
  box-shadow:0 6px 16px -4px rgba(7,193,96,.4);
}
.mt-kefu-btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px -4px rgba(7,193,96,.55)}
.mt-kefu-btn svg{width:17px;height:17px}

/* 移动端：抬高避开底部 Tab + 购物车按钮 */
@media(max-width:768px){
  .mt-kefu{right:14px;bottom:140px;gap:10px}
  body[data-page="onsite"] .mt-kefu{right:16px;bottom:20px}
}
@media(max-width:480px){
  .mt-kefu-card{width:260px;padding:18px 16px 16px}
  .mt-kefu-qr img,.mt-kefu-qr canvas{width:130px!important;height:130px!important}
  .mt-kefu-qr-fallback{width:130px;height:130px;font-size:13px}
  .mt-kefu-avatar{width:36px;height:36px}
  .mt-kefu-toggle{width:50px;height:50px}
}
@media(prefers-reduced-motion:reduce){
  .mt-kefu-card,.mt-kefu-toggle,.mt-kefu-btn{transition:none}
  .mt-kefu-dot,.mt-kefu-status::before{animation:none}
}