/* =========================================================
   AI统计 · 浮动客服组件（移植自 ymc49，配色适配本站）
   ========================================================= */
:root{
  --z-kefu:300;
  --nav-height:74px;
  --yellow-400:#ffcf7d;
  --text-primary:#f6e9d8;
  --text-secondary:#b49b85;
  --gradient-purple:linear-gradient(160deg,#cf9a3f 0%,#a86d1e 55%,#8a5514 100%);
  --border-color:rgba(255,190,110,.2);
  --border-light:rgba(255,190,110,.12);
}

/* === 桌面端浮动客服（右侧垂直居中） === */
.kefu-widget{
  position:fixed; top:50%; right:24px;
  transform:translateY(-50%);
  z-index:var(--z-kefu);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:12px 10px;
  background:linear-gradient(180deg,rgba(30,17,10,.97),rgba(10,6,4,.98));
  border:1px solid rgba(255,190,110,.35);
  border-radius:18px;
  box-shadow:0 10px 34px rgba(0,0,0,.45),0 0 26px rgba(255,160,50,.18);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  touch-action:none;
}
.kefu-widget[hidden]{display:none}
.kefu-title{
  width:100%; padding-bottom:9px;
  text-align:center; white-space:nowrap;
  font-size:0.66rem; font-weight:700; letter-spacing:.08em;
  color:var(--yellow-400);
  border-bottom:1px solid rgba(255,190,110,.25);
}
.kefu-close{
  position:absolute; top:-12px; right:-12px;
  width:20px; height:20px; padding:0;
  display:flex; align-items:center; justify-content:center;
  font-size:0.85rem; line-height:1; cursor:pointer;
  color:#ffcf7d;
  background:linear-gradient(160deg,#3a1d0b,#1a0d05);
  border:1px solid rgba(255,205,140,.55); border-radius:50%;
  box-shadow:0 3px 10px rgba(0,0,0,.4),0 0 10px rgba(255,170,60,.2);
  transition:background .2s,border-color .2s,color .2s,transform .2s;
}
.kefu-close:hover{
  background:linear-gradient(160deg,#5c3412,#2a1503);
  border-color:#ffd98d;
  color:#fff;
  transform:scale(1.08);
}
.kefu-items{display:flex;flex-direction:column;gap:9px}
.kefu-item{
  width:44px; height:44px; padding:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  border:1px solid rgba(255,225,180,.32); border-radius:13px;
  font-family:inherit; font-size:1.15rem; line-height:1; cursor:pointer;
  text-decoration:none;
  background:linear-gradient(160deg,#cf9a3f 0%,#a86d1e 55%,#8a5514 100%);
  box-shadow:0 6px 16px rgba(180,120,30,.32),inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .2s,border-color .2s,box-shadow .2s,filter .2s;
}
.kefu-item-wechat,
.kefu-item-telegram,
.kefu-item-qq,
.kefu-item-service{
  background:linear-gradient(160deg,#cf9a3f 0%,#a86d1e 55%,#8a5514 100%);
}
.kefu-item:hover{
  transform:translateY(-2px) scale(1.05);
  filter:brightness(1.08);
  border-color:rgba(255,225,180,.62);
  box-shadow:0 0 20px rgba(255,180,70,.55),inset 0 1px 0 rgba(255,255,255,.4);
}
.kefu-item-wechat:hover,
.kefu-item-telegram:hover,
.kefu-item-qq:hover,
.kefu-item-service:hover{
  box-shadow:0 0 20px rgba(255,180,70,.55),inset 0 1px 0 rgba(255,255,255,.4);
}
.kefu-item-group{display:flex;flex-direction:column;align-items:center;gap:4px}
.kefu-item-caption{
  font-size:0.62rem; line-height:1; white-space:nowrap;
  color:#d9b98d;
}

/* === 移动端客服按钮（默认隐藏，仅移动端显示） === */
.kefu-trigger{
  display:none;
  align-items:center; justify-content:center;
  width:44px; height:44px; padding:0;
  color:#fff; cursor:pointer;
  border:1px solid rgba(255,225,180,.32); border-radius:13px;
  background:linear-gradient(160deg,#cf9a3f 0%,#a86d1e 55%,#8a5514 100%);
  box-shadow:0 6px 16px rgba(180,120,30,.4),inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .2s,filter .2s,box-shadow .2s;
}
.kefu-trigger:hover{
  transform:translateY(-2px) scale(1.05);
  filter:brightness(1.08);
  box-shadow:0 0 20px rgba(255,180,70,.55),inset 0 1px 0 rgba(255,255,255,.4);
}
.kefu-trigger-group{display:flex;flex-direction:column;align-items:center;gap:4px}
.kefu-trigger-grid{
  display:grid; grid-template-columns:repeat(2,auto);
  gap:2px; justify-items:center; align-items:center;
}
.kefu-trigger-chevron{display:none;align-items:center;justify-content:center}
.kefu-trigger-caption{
  font-size:0.62rem; line-height:1; white-space:nowrap;
  color:#d9b98d;
}
.kefu-widget--expanded .kefu-trigger-grid,
.kefu-widget--expanded .kefu-trigger-caption{display:none}
.kefu-widget--expanded .kefu-trigger-chevron{display:flex}
.kefu-item-service,
.kefu-trigger{position:relative}
.kefu-badge{
  position:absolute; top:-6px; right:-6px; z-index:4;
  min-width:18px; height:18px; padding:0 5px;
  display:flex; align-items:center; justify-content:center;
  border:2px solid #080504; border-radius:999px;
  background:#ef4444; color:#fff;
  font-size:10px; font-weight:800; line-height:1;
  box-shadow:0 2px 8px rgba(239,68,68,.55);
  pointer-events:none;
}
.kefu-badge[hidden]{display:none}
.kefu-widget--expanded .kefu-trigger .kefu-badge{display:none}

/* === 微信二维码弹卡 === */
.kefu-qr-pop{
  position:absolute; top:50%; right:calc(100% + 12px);
  transform:translateY(-50%);
  width:128px; padding:8px;
  background:linear-gradient(180deg,#fffdf7,#faf2e1);
  border:1px solid rgba(210,170,90,.5);
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.4),0 0 24px rgba(255,170,60,.22);
}
.kefu-qr-pop[hidden]{display:none}
.kefu-qr-pop img{width:100%;height:auto;display:block;border-radius:6px}
.kefu-qr-pop span{
  display:block; margin-top:6px; text-align:center;
  font-size:0.66rem; font-weight:600; color:#8a6528; letter-spacing:.02em;
}

/* === 移动端布局 === */
@media (max-width:768px){
  .kefu-widget{
    top:auto; right:12px;
    bottom:calc(18px + env(safe-area-inset-bottom,0px));
    transform:none;
  }
  .kefu-close--collapse,
  .kefu-close--expand{top:-10px;left:-10px;right:auto}
  .kefu-close--collapse{z-index:3}
  .kefu-widget--expanded .kefu-close--collapse{display:none}
  .kefu-title{font-size:0.6rem;padding-bottom:7px}
  .kefu-items{gap:7px}
  .kefu-item{width:38px;height:38px;border-radius:11px;font-size:1rem}
  .kefu-item-caption,
  .kefu-trigger-caption{font-size:0.58rem}
  .kefu-qr-pop{
    width:120px;
    top:auto;
    bottom:0;
    right:calc(100% + 10px);
    transform:none;
  }
  .kefu-trigger{display:flex;width:38px;height:38px;border-radius:11px}
  .kefu-trigger-group{z-index:1}
  .kefu-panel{
    position:absolute; bottom:calc(100% + 8px); left:50%; z-index:2;
    display:flex; flex-direction:column; align-items:center; gap:8px;
    padding:10px 8px;
    background:linear-gradient(180deg,rgba(30,17,10,.97),rgba(10,6,4,.98));
    border:1px solid rgba(255,190,110,.35);
    border-radius:16px;
    box-shadow:0 10px 34px rgba(0,0,0,.45),0 0 26px rgba(255,160,50,.18);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
    transform-origin:bottom center;
    transform:translateX(-50%);
    transition:transform .24s ease,opacity .24s ease;
  }
  .kefu-widget--collapsed .kefu-panel{
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translateX(-50%) translateY(10px) scale(.96);
    transition:transform .24s ease,opacity .24s ease,visibility 0s linear .24s;
  }
}
@media (max-width:768px) and (hover:none){
  .kefu-widget{
    gap:0; padding:0;
    background:none; border:none; box-shadow:none;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
}

/* === 客服新消息提示条 === */
.kefu-msg-toast{
  position:fixed; top:calc(var(--nav-height) + 12px); right:20px; z-index:var(--z-kefu);
  width:min(320px,calc(100vw - 32px));
  border:1px solid rgba(255,190,110,.4); border-radius:14px;
  background:linear-gradient(180deg,rgba(30,17,10,.98),rgba(10,6,4,.99));
  box-shadow:0 12px 36px rgba(0,0,0,.45),0 0 22px rgba(255,160,50,.14);
  animation:kefu-toast-in .24s ease;
}
.kefu-msg-toast[hidden]{display:none}
.kefu-msg-toast-btn{
  width:100%; padding:11px 14px;
  display:flex; flex-direction:column; gap:3px;
  border:0; background:transparent; color:inherit;
  font:inherit; text-align:left; cursor:pointer;
}
.kefu-msg-toast-title{
  color:var(--yellow-400);
  font-size:0.76rem; font-weight:800; letter-spacing:.02em;
}
.kefu-msg-toast-text{
  color:var(--text-secondary);
  font-size:0.76rem; line-height:1.45;
  white-space:pre-line; word-break:break-word;
  overflow:hidden; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
@keyframes kefu-toast-in{
  from{opacity:0;transform:translateY(-8px) scale(.98)}
  to{opacity:1;transform:none}
}
@media (max-width:768px){
  .kefu-msg-toast{
    left:10px; right:10px; width:auto;
    top:calc(var(--nav-height) + 8px);
  }
}
@media (prefers-reduced-motion:reduce){
  .kefu-msg-toast{animation:none}
}

/* === 客服复制提示 === */
.kefu-copy-tip{
  position:fixed; left:50%; bottom:32px; z-index:var(--z-kefu);
  transform:translateX(-50%);
  max-width:calc(100vw - 32px);
  padding:9px 16px;
  font-size:0.8rem; font-weight:600; color:#fff; text-align:center;
  background:rgba(12,7,4,.96);
  border:1px solid rgba(255,190,110,.55);
  border-radius:100px;
  box-shadow:0 10px 28px rgba(0,0,0,.45);
  word-break:break-all; pointer-events:none;
}
.kefu-copy-tip[hidden]{display:none}

/* === 在线客服聊天弹窗 === */
.kefu-chat-modal{
  position:fixed; right:20px; bottom:20px; z-index:var(--z-kefu);
}
.kefu-chat-modal[hidden]{display:none}
.kefu-chat-modal-box{
  position:relative;
  width:360px; max-width:calc(100vw - 40px);
  height:min(448px,64vh);
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,rgba(28,16,10,.98),rgba(10,6,4,.99));
  border:1px solid var(--border-color);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.55),0 0 30px rgba(255,160,50,.18);
}
.kefu-chat-modal-head{
  flex:0 0 auto; height:48px; padding:0 56px 0 16px;
  display:flex; align-items:center; gap:8px;
  color:var(--text-primary); font-size:0.92rem; font-weight:700;
  background:linear-gradient(90deg,rgba(255,180,70,.22),rgba(120,40,10,.08));
  border-bottom:1px solid var(--border-light);
}
.kefu-chat-modal-head-icon{
  flex:0 0 auto; width:26px; height:26px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:var(--gradient-purple);
}
.kefu-chat-modal-countdown{
  margin-left:auto; flex:0 0 auto;
  font-size:0.78rem; font-weight:600;
  color:var(--text-secondary); white-space:nowrap;
}
.kefu-chat-modal-countdown[hidden]{display:none}
.kefu-chat-modal-box iframe{flex:1 1 auto;min-height:0;width:100%;height:auto;border:0;display:block;background:#fff}
.kefu-chat-modal-close{
  position:absolute; top:10px; right:10px; z-index:2;
  width:36px; height:36px; padding:0;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; line-height:1; color:#ffcf7d; cursor:pointer;
  background:linear-gradient(160deg,#3a1d0b,#1a0d05);
  border:1px solid rgba(255,205,140,.55); border-radius:10px;
  box-shadow:0 4px 12px rgba(0,0,0,.4),0 0 10px rgba(255,170,60,.18);
  transition:background .2s,border-color .2s,color .2s,transform .2s;
}
.kefu-chat-modal-close:hover{
  background:linear-gradient(160deg,#5c3412,#2a1503);
  border-color:#ffd98d;
  color:#fff;
  transform:scale(1.05);
}
@media (max-width:768px){
  .kefu-chat-modal{left:50%;right:auto;transform:translateX(-50%);bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  .kefu-chat-modal-box{max-width:calc(100vw - 24px);height:47vh;border-radius:14px}
  .kefu-chat-modal-head{height:48px;padding:0 52px 0 12px;gap:6px;font-size:0.85rem}
  .kefu-chat-modal-countdown{font-size:0.72rem}
}