/* ======================================
   关投强 - 全站右侧悬浮咨询
   --------------------------------------------------
   ⚠ 设计口径：白卡 + 品牌蓝「单色」线性图标，与全站深蓝主视觉同一套色。
      历史上这里是「5 个按钮 5 种渐变 + emoji 图标」，已废弃：
        · primary / wechat / live / email / top 现在只作语义钩子，不再各自上色
        · 图标一律用内联 SVG（stroke: currentColor），**不要换回 emoji** ——
          emoji 自带彩色字形、不吃 color，会立刻污染整套配色
      全部颜色 / 尺寸集中在下面 :root 令牌区，改版只动这里。
   ====================================== */

:root {
  --sf-primary: #0052D9;       /* 品牌蓝：图标 / 文字 / 悬停填充 */
  --sf-primary-dark: #0034B5;  /* 按下态填充 */
  --sf-surface: #FFFFFF;       /* 卡片底 */
  --sf-line: #E7E7E7;          /* 卡片描边 */
  --sf-ink-mute: #737373;      /* 「顶部」按钮静止态（次级层级）·
                                  取 #737373 而非 #8A8A8A：白底对比度 4.7:1 达 WCAG AA，
                                  #8A8A8A 只有 3.5:1，12px 小字不达标 */
  --sf-ink-dark: #1A1A1A;      /* 「顶部」按钮悬停填充 */
  --sf-shadow: 0 3px 12px rgba(10, 26, 54, .08);
  --sf-shadow-hi: 0 10px 24px rgba(0, 82, 217, .26);
  --sf-z: 99990;
}

/* ---------- 二级菜单（默认收起） ---------- */
.sf-menu {
  position: fixed;
  right: 16px;
  bottom: 92px;
  z-index: var(--sf-z);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
  user-select: none;
}

.sf-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ---------- 功能按钮：白卡 + 蓝图标 ---------- */
.sf-btn {
  position: relative;
  width: 60px;
  height: 60px;
  padding: 0;
  border: 1px solid var(--sf-line);
  border-radius: 16px;
  background: var(--sf-surface);
  color: var(--sf-primary);
  font-family: inherit;
  box-shadow: var(--sf-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease, box-shadow .18s ease,
              background-color .18s ease, color .18s ease, border-color .18s ease;
}

.sf-btn .sf-ico {
  display: block;
  width: 21px;
  height: 21px;
  color: inherit;
  pointer-events: none;
}

.sf-btn .sf-ico svg { display: block; width: 100%; height: 100%; }

.sf-btn .lbl {
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  color: inherit;
  pointer-events: none;
}

/* 悬停 / 键盘聚焦：整块填品牌蓝、文字转白、轻微上浮 */
.sf-btn:hover,
.sf-btn:focus-visible {
  background: var(--sf-primary);
  border-color: var(--sf-primary);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow-hi);
}

.sf-btn:active {
  background: var(--sf-primary-dark);
  border-color: var(--sf-primary-dark);
  box-shadow: 0 4px 12px rgba(0, 82, 217, .3);
  transform: translateY(0);
}

.sf-btn:focus-visible {
  outline: 2px solid var(--sf-primary);
  outline-offset: 3px;
}

/* 「顶部」是工具型动作、不是咨询渠道 → 用中性灰做层级区分 */
.sf-btn.top { margin-top: 4px; color: var(--sf-ink-mute); }

.sf-btn.top:hover,
.sf-btn.top:focus-visible {
  background: var(--sf-ink-dark);
  border-color: var(--sf-ink-dark);
  color: #fff;
  box-shadow: 0 10px 24px rgba(26, 26, 26, .22);
}

.sf-btn.top:active {
  background: #000;
  border-color: #000;
  box-shadow: 0 4px 12px rgba(26, 26, 26, .26);
}

/* ---------- 一级浮窗（启动器） ---------- */
.sf-launcher {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: var(--sf-z);
  width: 60px;
  height: 60px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--sf-primary);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 82, 217, .32);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}

/* 收起态 = 对话气泡，展开态 = 关闭叉，两个图标交叉淡入淡出 */
.sf-launcher .sf-ico {
  position: absolute;
  display: block;
  width: 26px;
  height: 26px;
  transition: opacity .2s ease, transform .28s ease;
}

.sf-launcher .sf-ico svg { display: block; width: 100%; height: 100%; }

.sf-launcher .sf-ico-close { opacity: 0; transform: scale(.6) rotate(-60deg); }

.sf-launcher.is-open .sf-ico-chat { opacity: 0; transform: scale(.6) rotate(60deg); }
.sf-launcher.is-open .sf-ico-close { opacity: 1; transform: scale(1) rotate(0); }

.sf-launcher:hover { background: var(--sf-primary-dark); box-shadow: 0 12px 28px rgba(0, 82, 217, .42); }
.sf-launcher:focus-visible { outline: 2px solid var(--sf-primary); outline-offset: 4px; }
.sf-launcher.is-open { background: var(--sf-primary-dark); }

/* 极轻的呼吸环，仅用于把注意力引到入口 */
.sf-launcher::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid rgba(0, 82, 217, .22);
  pointer-events: none;
  animation: sf-pulse 2.6s ease-out infinite;
}

@keyframes sf-pulse {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ---------- 微信弹窗 ---------- */
.wx-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 26, 54, .58);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.wx-modal.is-open { display: flex; }

.wx-card {
  background: #fff;
  border-radius: 18px;
  padding: 28px 28px 22px;
  width: 100%;
  max-width: 360px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(10, 26, 54, .3);
  animation: wx-pop .25s ease-out;
}

@keyframes wx-pop {
  from { transform: scale(.85); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.wx-card h3 {
  margin: 0 0 6px;
  font-size: 20px;
  color: var(--sf-primary);
}

.wx-card .wx-id {
  color: #666;
  font-size: 14px;
  margin: 8px 0 16px;
}

.wx-card .wx-id b { color: var(--sf-primary); font-size: 16px; }

.wx-qrbox {
  width: 200px;
  height: 200px;
  margin: 0 auto 14px;
  border: 1px solid var(--sf-line);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}

.wx-qrbox svg { width: 100%; height: 100%; display: block; }
.wx-qrbox img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; display: block; }

.wx-tip { font-size: 12px; color: #999; margin: 0 0 16px; }

.wx-close {
  background: #F5F5F5;
  color: #666;
  border: none;
  border-radius: 999px;
  padding: 9px 28px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}

.wx-close:hover { background: var(--sf-line); color: #1A1A1A; }

/* ---------- 在线客服占位弹窗 ---------- */
.live-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 26, 54, .58);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.live-modal.is-open { display: flex; }

.live-card {
  background: #fff;
  border-radius: 18px;
  padding: 30px;
  width: 100%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(10, 26, 54, .3);
  animation: wx-pop .25s ease-out;
}

.live-card .sf-ico {
  display: block;
  width: 42px;
  height: 42px;
  margin: 0 auto 6px;
  color: var(--sf-primary);
}

.live-card .sf-ico svg { display: block; width: 100%; height: 100%; }

.live-card h3 { margin: 10px 0 8px; color: var(--sf-primary); }

.live-card p { color: #666; font-size: 14px; margin: 0 0 18px; line-height: 1.7; }

.live-card .live-btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 999px;
  background: var(--sf-primary);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-size: 15px;
  transition: background-color .18s ease;
}

.live-card .live-btn:hover { background: var(--sf-primary-dark); }

/* ---------- 电话弹窗（展示手机号，不跳转） ---------- */
.phone-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 26, 54, .58);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.phone-modal.is-open { display: flex; }

.phone-card {
  background: #fff;
  border-radius: 18px;
  padding: 30px;
  width: 100%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(10, 26, 54, .3);
  animation: wx-pop .25s ease-out;
}

.phone-card .sf-ico {
  display: block;
  width: 42px;
  height: 42px;
  margin: 0 auto 6px;
  color: var(--sf-primary);
}

.phone-card .sf-ico svg { display: block; width: 100%; height: 100%; }

.phone-card h3 { margin: 10px 0 8px; color: var(--sf-primary); }

.phone-card .phone-num {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--sf-primary);
  margin: 6px 0 4px;
  font-variant-numeric: tabular-nums;
  user-select: text;
}

.phone-card .phone-tip { color: #666; font-size: 13px; margin: 0 0 18px; }

.phone-card .phone-close {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 999px;
  background: var(--sf-primary);
  color: #fff;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-size: 15px;
  transition: background-color .18s ease;
}

.phone-card .phone-close:hover { background: var(--sf-primary-dark); }

/* ---------- 移动端收紧 ---------- */
@media (max-width: 560px) {
  .sf-menu { right: 10px; bottom: 78px; gap: 6px; }
  .sf-btn { width: 48px; height: 48px; border-radius: 13px; gap: 3px; }
  .sf-btn .sf-ico { width: 18px; height: 18px; }
  .sf-btn .lbl { font-size: 10px; }
  .sf-btn.top { margin-top: 2px; }
  .sf-launcher { right: 10px; bottom: 10px; width: 50px; height: 50px; }
  .sf-launcher .sf-ico { width: 22px; height: 22px; }
  .sf-launcher::after { display: none; }
}

/* ---------- 尊重系统的「减少动态效果」 ---------- */
@media (prefers-reduced-motion: reduce) {
  .sf-launcher::after { animation: none; opacity: 0; }
  .sf-menu { transition: none; }
  .sf-btn:hover, .sf-btn:focus-visible { transform: none; }
  .wx-card, .live-card, .phone-card { animation: none; }
}