/* ==========================================================================
   富印新材 · 右侧悬浮工具栏
   品牌VI 主色：#E62129
   用法：</head> 前引入本文件即可，无需改动页面结构
   ========================================================================== */

/* ---- 1. 变量：改这里就能整体换色 ---- */
:root {
  --fy-main: #e62129;/* 品牌主色 */
  --fy-main-dark: #c2161e;/* 主色加深（hover） */
  --fy-text: #333;
  --fy-text-sub: #999;
  --fy-bg-card: #fff;
  --fy-border: #eee;
  --fy-bar-w: 56px;/* 工具条宽度 */
  --fy-right: 18px;/* 距右侧距离 */
  --fy-bottom: 80px;/* 距底部距离 */
  --fy-shadow: 0 6px 24px rgba(0, 0, 0, .12);
  --fy-radius: 4px;
}

/* ---- 2. 容器：整条工具栏固定在右侧 ---- */
.fy-toolbar {
  position: fixed;
  right: var(--fy-right);
  bottom: var(--fy-bottom);
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  font-family: "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---- 3. 每个按钮 ---- */
.fy-item {
  position: relative;
  width: var(--fy-bar-w);
  height: var(--fy-bar-w);
  border-radius: var(--fy-radius);
  background: var(--fy-bg-card);
  box-shadow: var(--fy-shadow);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s, transform .3s, box-shadow .3s;
  /* 注意：不能加 overflow:hidden，否则会把外侧的气泡和二维码面板一起裁掉 */
  border: 1px solid var(--fy-border);
  user-select: none;
}

.fy-item:hover {
  background: var(--fy-main);
  border-color: var(--fy-main);
  transform: translateX(-3px);
  box-shadow: 0 8px 28px rgba(230, 33, 41, .35);
}

.fy-item svg {
  width: 24px;
  height: 24px;
  fill: var(--fy-main);
  transition: fill .3s;
}

.fy-item:hover svg {
  fill: #fff;
}

/* 面板弹出时，文字气泡退位，避免提示重叠 */
.fy-item.fy-active .fy-tip {
  opacity: 0;
  visibility: hidden;
}

/* 面板打开时，按钮保持品牌色高亮 */
.fy-item.fy-active {
  background: var(--fy-main);
  border-color: var(--fy-main);
  transform: translateX(-3px);
  box-shadow: 0 8px 28px rgba(230, 33, 41, .35);
}

.fy-item.fy-active svg {
  fill: #fff;
}

.fy-item.fy-active em {
  color: #fff;
}

/* 返回顶部：默认隐藏，滚动后显示 */
.fy-item.fy-top {
  opacity: 0;
  visibility: hidden;
  transform: translateX(20px);
}

.fy-item.fy-top.fy-show {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.fy-item.fy-top.fy-show:hover {
  transform: translateX(-3px);
}

/* ---- 4. 文字气泡（鼠标移上时向右弹出）---- */
.fy-tip {
  position: absolute;
  right: calc(var(--fy-bar-w) + 12px);
  top: 50%;
  transform: translateY(-50%) scale(.9);
  transform-origin: right center;
  padding: 7px 13px;
  background: rgba(0, 0, 0, .82);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  border-radius: 3px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, transform .25s, visibility .25s;
  pointer-events: none;
}

.fy-tip::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 50%;
  margin-top: -5px;
  width: 10px;
  height: 10px;
  background: rgba(0, 0, 0, .82);
  transform: rotate(45deg);
}

.fy-item:hover .fy-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) scale(1);
}

/* ---- 5. 二维码面板（点击后从右滑出）---- */
.fy-panel {
  position: absolute;
  right: calc(var(--fy-bar-w) + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(16px);
  width: 186px;
  background: var(--fy-bg-card);
  border-radius: 6px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .16);
  padding: 16px 14px 14px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s, transform .28s, visibility .28s;
}

.fy-panel.fy-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* 面板小尖角 */
.fy-panel::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  margin-top: -7px;
  width: 12px;
  height: 12px;
  background: var(--fy-bg-card);
  transform: rotate(45deg);
  box-shadow: 3px 3px 6px rgba(0, 0, 0, .05);
}

.fy-panel img {
  display: block;
  width: 156px;
  height: 156px;
  margin: 0 auto;
  object-fit: contain;
  background: #fafafa;
  border: 1px solid var(--fy-border);
  border-radius: 3px;
}

/* 二维码占位样式（未配图时显示，避免破图） */
.fy-qr-ph {
  width: 156px;
  height: 156px;
  margin: 0 auto;
  border: 1px dashed #ddd;
  border-radius: 3px;
  background: #fafafa repeating-linear-gradient(45deg, #fff, #fff 6px, #f2f2f2 6px, #f2f2f2 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--fy-text-sub);
  font-size: 12px;
  line-height: 1.6;
  padding: 10px;
}

.fy-panel h4 {
  margin: 12px 0 4px;
  font-size: 15px;
  color: var(--fy-text);
  font-weight: 700;
}

.fy-panel p {
  margin: 0;
  font-size: 12px;
  color: var(--fy-text-sub);
  line-height: 1.6;
}

.fy-panel .fy-divider {
  width: 32px;
  height: 2px;
  background: var(--fy-main);
  margin: 0 auto 10px;
  border-radius: 1px;
}

/* ---- 6. 返回顶部的进度环 ---- */
.fy-ring {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
  pointer-events: none;
}

.fy-ring circle {
  fill: none;
  stroke-width: 2;
}

/* ---- 7. 响应式：手机端改为底部横向条---- */
@media screen and (max-width: 768px) {
  .fy-toolbar {
    right: 50%;
    bottom: 0;
    transform: translateX(50%);
    flex-direction: row;
    gap: 0;
    background: #fff;
    box-shadow: 0 -2px 14px rgba(0, 0, 0, .1);
    border-top: 1px solid var(--fy-border);
  }

  .fy-item {
    width: auto;
    flex: 1;
    height: 52px;
    border: none;
    border-radius: 0;
    box-shadow: none;
    flex-direction: column;
    gap: 2px;
    overflow: visible;
  }

  .fy-item:hover {
    background: #faf5f5;
    transform: none;
    box-shadow: none;
  }

  .fy-item svg {
    width: 20px;
    height: 20px;
  }

  .fy-item.fy-top {
    transform: none;
  }

  .fy-item.fy-top.fy-show:hover {
    transform: none;
  }

  .fy-item em {
    font-style: normal;
    font-size: 11px;
    color: var(--fy-text-sub);
    display: block;
  }

  .fy-item:hover em {
    color: var(--fy-main);
  }

  /* 手机端激活态：只换文字色，不整块填充 */
  .fy-item.fy-active,
  .fy-item.fy-active:hover {
    background: #faf5f5;
    transform: none;
    box-shadow: none;
  }

  .fy-item.fy-active svg {
    fill: var(--fy-main);
  }

  .fy-item.fy-active em {
    color: var(--fy-main);
  }

  /* 手机端文字气泡改为底部小字提示 */
  .fy-tip {
    display: none;
  }

  /* 二维码面板改为向上弹出 */
  .fy-panel {
    right: 50%;
    top: auto;
    bottom: calc(100% + 14px);
    transform: translateX(50%) translateY(16px);
  }

  .fy-panel.fy-open {
    transform: translateX(50%) translateY(0);
  }

  .fy-panel::after {
    right: 50%;
    top: auto;
    bottom: -6px;
    margin-top: 0;
    margin-right: -7px;
  }
}

/* 电脑端隐藏"文字"标签 */
@media screen and (min-width: 769px) {
  .fy-item em {
    display: none;
  }
}

/* ---- 8. 键盘可达性 ---- */
.fy-item:focus-visible {
  outline: 2px solid var(--fy-main);
  outline-offset: 3px;
}