/* ============================================================
   右侧悬浮操作栏（小程序 / 微信客服 / 求购 / 返回顶部）
   ------------------------------------------------------------
   结构见 templates/partials/float_bar.html。

   两个要点：
     1. 按钮是**竖排文字 + 图标**（宽 56px），不是图标圆球：
        悬浮窗要能一眼看懂，纯图标猜不出来。
     2. 二维码面板从按钮**左侧**弹出，且默认 `visibility: hidden` 而不是
        `display: none` —— 动画需要元素在布局里；用 visibility 又能保证
        它不接收鼠标事件、不被读屏读到。
   ============================================================ */
.float-bar {
  position: fixed;
  right: 14px;
  /* 竖直居中偏下：太高会挡住内容，太低在长页面上离手远 */
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
}

.fb-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ---------- 按钮 ---------- */
.fb-item { position: relative; }

.fb-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 56px;
  padding: 8px 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink-600);
  font-size: 11.5px;
  line-height: 1.15;
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: color .15s, border-color .15s, background-color .15s;
  /* 标签必须一行放下。实测（1440px 视口，页面字体）：
       12px   →「微信客服」占 48px
       11.5px → 44px
     而按钮 56px 减去左右各 4px 内边距 = 内容区 46px，
     所以 12px 会被折成「微信客 / 服」两行（用户实际看到的就是这个）。
     字号降到 11.5px（占 44px）+ nowrap，一位宽裕地放下； */
  white-space: nowrap;
}
.fb-btn:hover,
.fb-btn:focus-visible {
  color: var(--brand-700);
  border-color: var(--brand-200);
  background: var(--brand-50);
  text-decoration: none;
}
.fb-btn svg { display: block; }

/* 高亮那个：求购是这里唯一带转化目的的按钮，给它主色 */
a.fb-btn[href*="inquiry"] {
  color: #fff;
  border-color: var(--brand);
  background: var(--brand);
}
a.fb-btn[href*="inquiry"]:hover {
  color: #fff;
  background: var(--brand-600);
  border-color: var(--brand-600);
}

/* ---------- 二维码面板：默认藏，悬停/点击才出 ---------- */
.fb-panel {
  position: absolute;
  /* 面板宽度 + 间距，向右反推，避免遮挡按钮 */
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  width: 176px;
  padding: 12px 12px 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s, transform .16s, visibility .16s;
}
.fb-panel img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  /* 二维码是白底图，给一点内边距避免贴边显得局促 */
  background: #fff;
}
.fb-panel__tip {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-500);
}
.fb-panel__sub {
  margin: 3px 0 0;
  font-size: 11.5px;
  color: var(--brand-700);
}

/* 悬停整项时弹出（桌面顺手） */
.fb-item:hover .fb-panel,
.fb-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* 返回顶部：滚过一屏才由 JS 摘掉 hidden。
   选择器必须带 `.fb-btn` 提权：下面窄屏媒体查询里的 `.fb-btn { … }` 也命中它，
   同权重且写在后面就会赢 —— 实测手机端露出的是小程序/客服/求购，
   反而把需要的"顶部"藏了（该藏的没藏、该显的没显）。
   `.fb-btn.fb-top[hidden]` 权重 (0,3,0) > `.fb-btn` 的 (0,1,0)，媒体查询也盖不掉。 */
.fb-btn.fb-top[hidden] { display: none; }

/* ---------- 窄屏 / 触屏 ----------
   下面这几档断点全部来自**实测**（正文容器 max-width 1200px 居中，
   悬浮条靠 right 定位，所以"正文右边界到视口右边还剩多少"决定一切）：

     视口    右侧空隙   56px带文字   44px纯图标
     1440     106px       够           够
     1366      69px       够（56 也放得下）够
     1300      36px       不够         不够
     1280      40px       —            够（38+2 塞得进 40）
     1240      20px       —            不够
     ≤1220     0~20px     —            不够

   结论：光缩按钮解决不了窄屏问题（1240px 时空隙只有 20px，装不下任何按钮），
   所以**定位也要换**：宽屏时竖排在右侧空白里，窄屏时挪到右下角横排。
   右下角虽然可能盖住页脚/内容一角，但比"盖住正文主体"轻得多。 */
@media (max-width: 1366px) {
  .float-bar { right: 8px; }
  .fb-btn {
    width: 44px;
    padding: 6px 2px;
  }
  /* 只留图标：44px 的内容区只有 36px，而「微信客服」11px 时要 42px，放不下。
     字号再小就看不清了，不如只留图标（配 title 提示）。 */
  .fb-btn span { display: none; }
  .fb-panel { width: 156px; }
}
/* 空隙不足以容纳右侧竖条时，改成右下角横排（仍不盖正文主体） */
@media (max-width: 1260px) {
  .float-bar {
    top: auto;
    bottom: 18px;
    right: 12px;
    transform: none;
  }
  .fb-list {
    flex-direction: row;
    align-items: flex-end;
    gap: 6px;
  }
  /* 面板从下方按钮的上方弹出，避免横向排布时把面板推到屏幕外 */
  .fb-item { position: relative; }
  .fb-panel {
    top: auto;
    bottom: calc(100% + 8px);
    right: 0;
    transform: translateX(0) translateY(6px);
  }
  .fb-item:hover .fb-panel,
  .fb-panel.is-open {
    transform: translateX(0) translateY(0);
  }
}
@media (max-width: 760px) {
  /* 手机：只留「求购 + 返回顶部」两个圆钮，仍然在右下角 */
  .float-bar { bottom: 16px; right: 10px; }
  .fb-list { gap: 8px; }
  .fb-btn {
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;              /* 只留图标 */
  }
  .fb-btn svg { width: 22px; height: 22px; }
  /* 二维码按钮在手机端不显示：没有 hover、点开还会弹到屏幕外；
     而且手机用户本来就在微信里，扫自己的屏幕没有意义。
     —— 二维码改由页脚展示（partials/footer.html），那里有足够空间。 */
  .fb-item { display: none; }
  .fb-panel { display: none; }
}