/* ============================================================
   浮动客服窗口 / 在线客服聊天弹窗
   结构与交互对齐 youmicai.com，配色随本站主题（紫粉渐变）调整。
   ============================================================ */
:root {
  --kefu-accent: #6d5ef8;
  --kefu-accent-2: #ff5c8a;
  --kefu-text-primary: #eef0fb;
  --kefu-text-secondary: #a7acc8;
  --kefu-border-color: rgba(109, 94, 248, 0.42);
  --kefu-border-light: rgba(255, 255, 255, 0.1);
  --kefu-shadow-glow: 0 0 30px rgba(109, 94, 248, 0.26);
}

/* === 浮动客服窗口（页面右侧垂直居中卡片） === */
.kefu-widget {
  position: fixed; top: 50%; right: 64px;
  transform: translateY(-50%);
  z-index: 1200;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 12px 10px;
  background: linear-gradient(180deg, rgba(38, 36, 66, 0.96), rgba(18, 18, 32, 0.97));
  border: 1px solid var(--kefu-border-color);
  border-radius: 18px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45), 0 0 26px rgba(109, 94, 248, 0.2);
  backdrop-filter: blur(12px);
  -webkit-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: 0.08em;
  background: linear-gradient(90deg, var(--kefu-accent), var(--kefu-accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  border-bottom: 1px solid var(--kefu-border-light);
}
.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: #fff;
  background: linear-gradient(135deg, var(--kefu-accent), var(--kefu-accent-2));
  border: 2px solid rgba(255, 255, 255, 0.85); border-radius: 50%;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s, filter 0.2s;
}
.kefu-close:hover { transform: scale(1.08); filter: brightness(1.12); }
.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;
  background: rgba(255, 255, 255, 0.06); color: var(--kefu-text-primary);
  border: 1px solid var(--kefu-border-light); border-radius: 13px;
  font-family: inherit; font-size: 1.15rem; line-height: 1; cursor: pointer;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.kefu-item:hover {
  transform: translateY(-2px) scale(1.05);
  background: rgba(255, 255, 255, 0.12);
}
.kefu-item-wechat:hover { border-color: rgba(74, 222, 128, 0.6); box-shadow: 0 0 16px rgba(74, 222, 128, 0.35); }
.kefu-item-telegram:hover { border-color: rgba(96, 165, 250, 0.6); box-shadow: 0 0 16px rgba(96, 165, 250, 0.35); }
.kefu-item-service:hover { border-color: rgba(109, 94, 248, 0.75); box-shadow: 0 0 16px rgba(109, 94, 248, 0.45); }
.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: var(--kefu-text-secondary);
}

/* 微信图标点击弹出的 QR 卡片 */
.kefu-qr-pop {
  position: absolute; top: 50%; right: calc(100% + 12px);
  transform: translateY(-50%);
  width: 128px; padding: 8px;
  background: #fff; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), var(--kefu-shadow-glow);
}
.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: 5px; text-align: center;
  font-size: 0.66rem; font-weight: 600; color: #334155;
}

/* 移动端：缩小卡片与图标 */
@media (max-width: 768px) {
  .kefu-widget { right: 8px; gap: 8px; padding: 10px 8px; border-radius: 16px; }
  .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 { font-size: 0.58rem; }
  .kefu-qr-pop { width: 110px; }
}

/* === 在线客服聊天弹窗（外壳本站风格，内容为第三方 iframe） === */
.kefu-chat-modal {
  position: fixed; right: 20px; bottom: 20px; z-index: 2000;
}
.kefu-chat-modal[hidden] { display: none; }
.kefu-chat-modal-box {
  position: relative;
  width: 360px; max-width: calc(100vw - 40px);
  height: min(448px, 64vh);
  background: linear-gradient(180deg, rgba(38, 36, 66, 0.98), rgba(18, 18, 32, 0.99));
  border: 1px solid var(--kefu-border-color);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 30px rgba(109, 94, 248, 0.26);
}
.kefu-chat-modal-box iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.kefu-chat-modal-close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 32px; height: 32px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; line-height: 1; color: #fff; cursor: pointer;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--kefu-border-light); border-radius: 10px;
  transition: background 0.2s, border-color 0.2s;
}
.kefu-chat-modal-close:hover { background: rgba(109, 94, 248, 0.5); border-color: var(--kefu-accent); }

/* 移动端：底部居中，左右等距 */
@media (max-width: 768px) {
  .kefu-chat-modal { left: 50%; right: auto; transform: translateX(-50%); bottom: 12px; }
  .kefu-chat-modal-box { max-width: calc(100vw - 32px); height: 70vh; border-radius: 14px; }
}