/*!
 * 站点悬浮侧边栏 · 页面样式
 * 设计：图标按钮分组——主功能按钮合成一个白色圆角分组（内部按钮相连、有细分隔），
 *       回到顶端为独立的蓝色圆角按钮；鼠标悬停在左侧弹出深色气泡提示。
 * 默认纯图标；后台可选“图标+文字”（.has-labels，文字显示在图标下方）。
 */

/* 容器：分组之间留间距 */
.site-sidebar{
  position:fixed; top:50%; transform:translateY(-50%); z-index:1200;
  width:max-content; display:flex; flex-direction:column; align-items:center; gap:var(--ssb-group-gap, 14px);
}
.site-sidebar[data-pos="right"]{ right:max(12px, calc((100vw - 1200px) / 2 - 68px)); }
.site-sidebar[data-pos="left"]{ left:max(12px, calc((100vw - 1200px) / 2 - 68px)); }

/* 主功能按钮的白色分组：一个圆角卡片，内部按钮竖排相连 */
.ssb-group{
  background:#fff; border:1px solid #eef0f3; border-radius:var(--ssb-radius, 16px);
  box-shadow:var(--ssb-shadow, 0 6px 22px rgba(17,24,39,.10));
  display:flex; flex-direction:column; padding:5px; gap:var(--ssb-gap, 2px);
}

/* 单个按钮：圆角方形图标钮 */
.site-sidebar .ssb-item{
  position:relative; box-sizing:border-box;
  width:var(--ssb-size, 44px); height:var(--ssb-size, 44px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:transparent; border:none; border-radius:var(--ssb-btn-radius, 12px);
  color:#4b5563; cursor:pointer; text-decoration:none;
  font-family:inherit; -webkit-appearance:none; padding:0;
  transition:background .14s, color .14s, transform .14s;
}
.ssb-group .ssb-item:hover,
.ssb-group .ssb-item:focus-visible{
  background:#eef3fe; color:#1b5bd5; outline:none;
}
.ssb-group .ssb-item:active{ transform:scale(.94); }

/* 图标 */
.ssb-ic{ width:var(--ssb-icon, 22px); height:var(--ssb-icon, 22px); display:flex; align-items:center; justify-content:center; }
.ssb-ic svg{ width:var(--ssb-icon, 22px); height:var(--ssb-icon, 22px); display:block; }
.ssb-ic img{ width:var(--ssb-icon, 22px); height:var(--ssb-icon, 22px); object-fit:contain; display:block; border-radius:5px; }

/* 文字标签：默认隐藏；仅 .has-labels 时显示在图标下方 */
.ssb-txt{ display:none; font-size:10.5px; line-height:1; color:inherit; white-space:nowrap; }
.site-sidebar.has-labels .ssb-item{ width:calc(var(--ssb-size, 44px) + 8px); height:calc(var(--ssb-size, 44px) + 8px); gap:4px; }
.site-sidebar.has-labels .ssb-txt{ display:block; }

/* 悬停气泡提示（深色圆角，在按钮左侧/右侧弹出，带小箭头）——参考设计的核心元素 */
.ssb-tip{
  position:absolute; top:50%; background:#1f2329; color:#fff;
  font-size:13px; line-height:1; padding:8px 12px; border-radius:9px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .16s, transform .16s;
  z-index:5; box-shadow:0 6px 20px rgba(0,0,0,.18); font-weight:500; letter-spacing:.3px;
}
.site-sidebar[data-pos="right"] .ssb-tip{ right:calc(100% + 14px); transform:translate(8px,-50%); }
.site-sidebar[data-pos="left"]  .ssb-tip{ left:calc(100% + 14px);  transform:translate(-8px,-50%); }
.site-sidebar .ssb-item:hover .ssb-tip,
.site-sidebar .ssb-item:focus-visible .ssb-tip{ opacity:1; transform:translate(0,-50%); }
/* 气泡小箭头 */
.ssb-tip::after{ content:''; position:absolute; top:50%; transform:translateY(-50%); border:6px solid transparent; }
.site-sidebar[data-pos="right"] .ssb-tip::after{ left:100%; border-left-color:#1f2329; }
.site-sidebar[data-pos="left"]  .ssb-tip::after{ right:100%; border-right-color:#1f2329; }

/* 弹层（客服 / 手机版）——保持原有二维码弹层 */
.ssb-pop{
  position:absolute; top:50%; transform:translateY(-50%) scale(.96);
  background:#fff; border:1px solid #ececec; border-radius:12px;
  box-shadow:0 8px 26px rgba(0,0,0,.14); padding:12px; width:172px; text-align:center;
  opacity:0; pointer-events:none; transition:opacity .16s, transform .16s; color:#333; z-index:6;
}
.site-sidebar[data-pos="right"] .ssb-pop{ right:calc(100% + 14px); }
.site-sidebar[data-pos="left"]  .ssb-pop{ left:calc(100% + 14px); }
.ssb-pop-wrap:hover .ssb-pop, .ssb-pop-wrap:focus-within .ssb-pop{
  opacity:1; pointer-events:auto; transform:translateY(-50%) scale(1);
}
/* 有弹层的按钮，悬停时不再弹深色气泡（避免与弹层重叠） */
.ssb-pop-wrap:hover .ssb-tip, .ssb-pop-wrap:focus-within .ssb-tip{ opacity:0 !important; }
.ssb-pop-title{ font-size:13px; font-weight:600; margin-bottom:8px; color:#222; }
.ssb-pop-qr{ width:132px; height:132px; object-fit:contain; display:block; margin:0 auto 6px; border-radius:8px; background:#fafafa; }
.ssb-pop-text{ font-size:12.5px; color:#5a6472; line-height:1.75; white-space:normal; word-break:break-word; }

/* 回到顶端：独立的蓝色圆角方形按钮（不在白色分组内） */
.site-sidebar .ssb-top{
  width:calc(var(--ssb-size, 44px) + 2px); height:calc(var(--ssb-size, 44px) + 2px); border-radius:var(--ssb-top-radius, 14px);
  background:#2f7bff; color:#fff;
  box-shadow:var(--ssb-top-shadow, 0 6px 18px rgba(47,123,255,.38));
  display:none;   /* 滚动一段后由脚本显示 */
}
.site-sidebar.has-labels .ssb-top{ width:calc(var(--ssb-size, 44px) + 8px); height:calc(var(--ssb-size, 44px) + 8px); }
.site-sidebar .ssb-top:hover,
.site-sidebar .ssb-top:focus-visible{ background:#1b6bff; color:#fff; }
.site-sidebar .ssb-top:active{ transform:scale(.94); }
.ssb-top .ssb-ic svg{ width:var(--ssb-icon, 22px); height:var(--ssb-icon, 22px); }

/* 窄屏隐藏 */
@media (max-width: 820px){ .site-sidebar{ display:none; } }