/* ===========================================================================
 *  右下角「点击咨询客服」悬浮按钮 —— 样式
 *  结构由 assets/kf-float.js 创建（因为链接要能从 config.js 配置）。
 *
 *  ★ 这个按钮和 AI 客服球（.aikf-btn，assets/chat.css）抢的是同一个角：
 *      .aikf-btn   right:22px / bottom:22px
 *      .kf-float   right:22px / bottom:22px
 *    当前 config.js 里 contact.aiBall=false，AI 球不渲染，所以不冲突。
 *    万一以后两个都打开，最后那条 :has() 规则会把 QQ 按钮顶到 AI 球上方，
 *    不会出现"一个盖住另一个"。
 *    （:has() 需要 Chrome 105+ / Safari 15.4+；老浏览器不支持时只是叠在一起，
 *      不会报错、按钮也仍然能点。）
 * =========================================================================== */

.kf-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 950;                 /* 高于内容，低于证明弹窗(9998) */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 18px;
  border-radius: 30px;
  color: #fff;
  background: #ff6b00;          /* 会被 config.js 的 contact.kfFloat.color 覆盖 */
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  transition: transform .15s ease, box-shadow .15s ease;
}

.kf-float:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}

.kf-float:active { transform: translateY(0); }

/* 两个悬浮物同时在时，QQ 按钮让到 AI 球上方 */
body:has(.aikf-btn) .kf-float { bottom: 92px; }

@media (max-width: 640px) {
  .kf-float {
    right: 16px;
    bottom: 16px;
    padding: 11px 15px;
    font-size: 13px;
  }
  body:has(.aikf-btn) .kf-float { bottom: 80px; }
}