/* ==========================================================================
   微云腾 v3 · 左侧悬浮客服条（v3 设计令牌风格）
   作用域统一在 #cmsFloatPanel 内，不影响页面其它区块。
   结构与 online.js 的钩子（#cmsFloatPanel / .ctrolPanel / .service /
   .message / .qrcode / .arrow 及各 Panel 的关闭按钮）保持兼容，不改动 JS。
   配色全部取自 wyt-front.css 的 :root 令牌（--ocean / --brand / --card …）。
   ========================================================================== */

/* 悬浮条容器：固定在视口右侧中部 */
#wyt-online,
#cmsFloatPanel{
  position:fixed;
  right:18px;
  top:50%;
  margin-top:-110px;
  z-index:10000;
}

/* 竖向圆形按钮组 */
#cmsFloatPanel .ctrolPanel{
  display:flex;
  flex-direction:column;
  gap:10px;
  background:transparent;
}
#cmsFloatPanel .ctrolPanel a{
  width:50px;
  height:50px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,.92);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  box-shadow:0 10px 24px rgba(6,20,40,.22);
  text-decoration:none;
  line-height:1;
  backdrop-filter:blur(6px);
  transition:transform .18s, background .18s, box-shadow .18s;
}
#cmsFloatPanel .ctrolPanel a .ic{display:flex;align-items:center;justify-content:center;width:20px;height:20px}
#cmsFloatPanel .ctrolPanel a .ic svg{width:20px;height:20px;display:block}
#cmsFloatPanel .ctrolPanel a:hover{
  background:var(--brand);
  transform:translateY(-2px);
  box-shadow:var(--shadow-hover);
}

/* 展开面板（QQ / 留言 / 二维码）：白卡片 + 令牌圆角阴影，固定在按钮左侧 */
#cmsFloatPanel .servicePanel,
#cmsFloatPanel .messagePanel,
#cmsFloatPanel .qrcodePanel{
  position:fixed;
  right:78px;
  z-index:10000;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  display:none;
  overflow:visible;
}
#cmsFloatPanel .servicePanel{width:190px;top:calc(50% - 120px)}
#cmsFloatPanel .messagePanel{width:240px;top:calc(50% - 60px)}
#cmsFloatPanel .qrcodePanel{width:200px;top:calc(50% - 20px)}

/* 通用面板内部 */
#cmsFloatPanel .servicePanel-inner,
#cmsFloatPanel .messagePanel-inner,
#cmsFloatPanel .qrcodePanel-inner{position:relative}

/* 在线客服面板 */
#cmsFloatPanel .serviceMsgPanel{background:var(--card);border-radius:var(--radius);overflow:hidden}
#cmsFloatPanel .serviceMsgPanel-hd{background:var(--ocean);color:#fff;padding:8px 12px;font-size:13px;display:flex;justify-content:flex-end}
#cmsFloatPanel .serviceMsgPanel-hd a{color:#fff;font-size:12px}
#cmsFloatPanel .serviceMsgPanel-hd a span{display:inline}
#cmsFloatPanel .serviceMsgPanel-bd{padding:10px 12px}
#cmsFloatPanel .msggroup{margin:4px 0}
#cmsFloatPanel .msggroup a{display:flex;align-items:center;gap:6px;color:var(--ink);font-size:13px}
#cmsFloatPanel .qqimg{width:20px;height:20px}

/* 留言 / 分享面板 */
#cmsFloatPanel .messagePanel .formPanel{background:var(--card);border-radius:var(--radius);overflow:hidden}
#cmsFloatPanel .messagePanel .formPanel-hd{background:var(--ocean);color:#fff;padding:8px 12px;font-size:13px}
#cmsFloatPanel .messagePanel .formPanel-bd{padding:12px}
#cmsFloatPanel .wyt-online-tip{font-size:13px;color:var(--sub);margin:0 0 10px;line-height:1.6}
#cmsFloatPanel .wyt-online-close{
  display:inline-block;
  background:var(--brand);
  color:#fff;
  padding:6px 16px;
  border-radius:var(--radius-sm);
  font-size:13px;
  text-decoration:none;
}
#cmsFloatPanel .wyt-online-close:hover{background:var(--brand-d)}

/* 二维码面板 */
#cmsFloatPanel .qrcodePanel .codePanel{background:var(--card);border-radius:var(--radius);overflow:hidden}
#cmsFloatPanel .qrcodePanel .codePanel-hd{background:var(--ocean);color:#fff;padding:8px 12px;font-size:13px;display:flex;justify-content:space-between;align-items:center}
#cmsFloatPanel .qrcodePanel .codePanel-hd a{color:#fff;font-size:12px}
#cmsFloatPanel .qrcodePanel .codePanel-hd span{color:#fff}
#cmsFloatPanel .qrcodePanel .codePanel-bd{padding:10px;text-align:center}
#cmsFloatPanel .qrcodePanel .codePanel-bd img{max-width:100%;border-radius:8px}

/* 手机端：悬浮条默认隐藏（与移动底栏 .mfoot 不冲突） */
@media(max-width:880px){
  #cmsFloatPanel{display:none}
}

/* QQ 号码悬停提示 */
#cmsFloatPanel .ctrolPanel a{position:relative}
#cmsFloatPanel .wyt-tip{
  position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);
  background:rgba(15,23,42,.94);color:#fff;font-size:12px;line-height:1;
  padding:8px 11px;border-radius:6px;white-space:nowrap;
  opacity:0;visibility:hidden;transition:opacity .18s,visibility .18s;
  pointer-events:none;box-shadow:0 8px 20px rgba(6,20,40,.2);
}
#cmsFloatPanel .wyt-tip::after{
  content:"";position:absolute;left:100%;top:50%;transform:translateY(-50%);
  border:5px solid transparent;border-left-color:rgba(15,23,42,.94);
}
#cmsFloatPanel .ctrolPanel a:hover .wyt-tip{opacity:1;visibility:visible}


/* ==========================================================================
   v3（2026-10-26 #9）：客服面板三套样式
   bar  = 竖排圆形（默认，沿用上方规则）
   card = 右侧竖排长条卡，图标 + 文字
   pill = 右下角聚合气泡，点开展开
   ========================================================================== */
#cmsFloatPanel .lb{display:none}

/* ---------- card ---------- */
#cmsFloatPanel.wyt-online--card{top:50%;margin-top:-150px;right:20px}
#cmsFloatPanel.wyt-online--card .ctrolPanel{gap:8px;align-items:flex-end}
#cmsFloatPanel.wyt-online--card .ctrolPanel a{
  width:auto;min-width:108px;height:46px;border-radius:12px;padding:0 16px 0 13px;
  justify-content:flex-start;gap:9px;font-size:13px;font-weight:600;letter-spacing:.02em;
  background:rgba(15,23,42,.94)
}
#cmsFloatPanel.wyt-online--card .ctrolPanel a .ic{width:20px;height:20px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
#cmsFloatPanel.wyt-online--card .ctrolPanel a .ic svg{width:19px;height:19px}
#cmsFloatPanel.wyt-online--card .ctrolPanel a .lb{display:inline;white-space:nowrap}
#cmsFloatPanel.wyt-online--card .ctrolPanel a:hover{transform:translateX(-4px)}
#cmsFloatPanel.wyt-online--card .wyt-tip{display:none}

/* ---------- pill ---------- */
#cmsFloatPanel.wyt-online--pill{top:auto;bottom:34px;right:24px;margin-top:0}
#cmsFloatPanel.wyt-online--pill .wyt-fab{
  width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,#2EA7DC,#1F8DBE);
  box-shadow:0 14px 30px rgba(31,141,190,.45);transition:transform .22s,box-shadow .22s;
  position:relative;z-index:2
}
#cmsFloatPanel.wyt-online--pill .wyt-fab:hover{transform:translateY(-2px) scale(1.03)}
#cmsFloatPanel.wyt-online--pill .wyt-fab svg{width:24px;height:24px;transition:transform .25s}
#cmsFloatPanel.wyt-online--pill.open .wyt-fab svg{transform:rotate(135deg)}
#cmsFloatPanel.wyt-online--pill .ctrolPanel{
  position:absolute;right:4px;bottom:70px;align-items:flex-end;gap:10px;
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.94);transform-origin:bottom right;
  transition:opacity .2s,transform .2s,visibility .2s
}
#cmsFloatPanel.wyt-online--pill.open .ctrolPanel{opacity:1;visibility:visible;transform:none}
#cmsFloatPanel.wyt-online--pill .qrcodePanel{bottom:132px}

/* ---------- 手机端 ---------- */
@media(max-width:880px){
  #cmsFloatPanel.wyt-online--card .ctrolPanel a{min-width:0;width:44px;height:44px;padding:0;justify-content:center;border-radius:50%}
  #cmsFloatPanel.wyt-online--card .ctrolPanel a .lb{display:none}
  #cmsFloatPanel.wyt-online--pill{bottom:78px;right:16px}
  #cmsFloatPanel.wyt-online--pill .wyt-fab{width:50px;height:50px}
}