/* ===== 站点级小组件样式（2026-11-04）=====
   只放"跨页复用、跟皮肤走"的小件：详情页返回按钮 .xz-back、右下角火箭回顶 #xzbtt。
   挂载点在 _Layout 的 aboutus.css 之后（全站无条件），比租户皮肤晚加载，
   但所有颜色都写成 var(槽位, 兜底) —— 各租户换肤仍然跟着变，不做第二套配色。
   类名全部带 xzbtt- / xz-back 前缀，不覆盖任何既有选择器。 */

/* ---- 详情页返回按钮：与既有 xz-btn xz-btn-ghost 同体，只管位置 ---- */
.xz-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 18px 0 0;
  min-height: 40px;
  /* 颜色走皮肤"深一档"槽位（不取 --xz-red 原色）：
     ①后台【网站设置】切主题（<html data-yz-theme>）时按钮跟着换色；
     ②皮肤那条 ghost 底色是 rgba(主色,.05)，用原色压在小字上对比度不足 4.5，深一档实测达标。 */
  color: var(--xz-red-deep, var(--xz-red, #c8102e));
}
.xz-back:hover,
.xz-back:focus-visible {
  color: var(--xz-red-deep, var(--xz-red, #c8102e));
}
/* 落在已经排版好的按钮行里（/Proinfo 的 .xz-dish-actions）时不要自带外边距，
   否则会跟同行的主按钮错位；行内间距由那一行的 flex gap 负责。 */
.xz-dish-actions .xz-back {
  margin: 0;
}
@media (max-width: 768px) {
  .xz-back { min-height: 44px; }   /* 触控目标 */
}

/* ---- 返回顶部火箭 ---- */
.xzbtt {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9800;                 /* 低于在线咨询气泡的 9990：气泡永远点得到 */
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid var(--xz-line, #e6e9f0);
  border-radius: 50%;
  background: #fff;              /* 与全站前端的卡片同一口径（卡片本来就是写死 #fff）；
                                    原先这里引用的是 --xz-surface，那是后台 admin-tokens.css 的槽位，
                                    前台任何皮肤都没定义过它，只是靠兜底侥幸取到白。 */
  color: var(--xz-red-deep, var(--xz-red, #c8102e));
  box-shadow: var(--xz-shadow, 0 6px 18px rgba(15, 23, 42, .14));
  cursor: pointer;
  overflow: visible;
  display: grid;
  place-items: center;
  /* 默认隐藏：JS 未跑、短页、回到顶部时都待在这个状态 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(.86);
  transition: opacity .28s ease, transform .28s ease, visibility .28s, box-shadow .2s ease;
}
.xzbtt.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}
/* 右下角已有在线咨询气泡（56px + bottom 20px）时上移到它正上方 14px，避免两钮重叠 */
.xzbtt.has-chat { bottom: 90px; }
/* 聊天面板展开时整块让位（面板 360×560 贴在同一个角落） */
.xzbtt.is-yield {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(.86);
  pointer-events: none;
}
.xzbtt:hover {
  box-shadow: 0 10px 24px rgba(15, 23, 42, .2);
}
.xzbtt:focus-visible {
  outline: 2px solid var(--xz-red, #c8102e);
  outline-offset: 3px;
}

/* 火箭 */
.xzbtt-rocket {
  width: 24px;
  height: 24px;
  display: block;
  position: relative;
  z-index: 2;
  animation: xzbtt-float 2.4s ease-in-out infinite;
}
@keyframes xzbtt-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* 待机尾焰：3 条短线交替呼吸（透明度 + 纵向伸缩） */
.xzbtt-flame {
  position: absolute;
  top: calc(50% + 9px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 3px;
  z-index: 1;
}
.xzbtt-flame i {
  width: 2px;
  height: 7px;
  border-radius: 1px;
  /* 尾焰两端都走皮肤槽位：暗端 = 强调色-深（跟返回按钮同一支，所以两钮永远同色），
     亮端 = logo 渐变亮端；没有该槽位的皮肤（喜座/润丰）回落到自己的浅色强调，
     而不是回落成一个写死的橙色——那会在酒红/科技橙站点上烧出一支异色火。 */
  background: linear-gradient(180deg, var(--xz-red-deep, #c8102e), var(--zs-logo-hot, var(--xz-gold-light, #ff6b3d)));
  opacity: .35;
  transform-origin: top center;
  animation: xzbtt-flame 1.2s ease-in-out infinite;
}
.xzbtt-flame i:nth-child(2) { animation-delay: .18s; height: 9px; }
.xzbtt-flame i:nth-child(3) { animation-delay: .36s; }
@keyframes xzbtt-flame {
  0%, 100% { opacity: .35; transform: scaleY(.7); }
  50% { opacity: .9; transform: scaleY(1.15); }
}

/* 悬停：按钮上方浮出一条虚线"上升轨迹"（呼应点击时的线条动画） */
.xzbtt-track {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  width: 0;
  height: 0;
  border-left: 1px dashed var(--xz-red, #c8102e);
  opacity: 0;
  transform: translateX(-50%);
  transition: height .22s ease, opacity .22s ease;
  pointer-events: none;
}
.xzbtt:hover .xzbtt-track,
.xzbtt:focus-visible .xzbtt-track {
  height: 26px;
  opacity: .5;
}

/* 点击速度线：4 条由短变长、自上而下扫过按钮 */
.xzbtt-lines {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}
.xzbtt-lines i {
  position: absolute;
  top: 4px;
  width: 1px;
  height: 10px;
  border-radius: 1px;
  background: linear-gradient(180deg, transparent, var(--xz-red, #c8102e));
  opacity: 0;
}
.xzbtt-lines i:nth-child(1) { left: 14%; }
.xzbtt-lines i:nth-child(2) { left: 32%; height: 14px; }
.xzbtt-lines i:nth-child(3) { right: 32%; height: 12px; }
.xzbtt-lines i:nth-child(4) { right: 14%; }

/* 起飞光环 */
.xzbtt-ring {
  position: absolute;
  inset: -1px;
  border: 1px solid var(--xz-red, #c8102e);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

/* 点击态（JS 在滚动期间保持，落到顶部后摘掉） */
.xzbtt.is-launching .xzbtt-rocket {
  animation: xzbtt-launch 480ms cubic-bezier(.22, .7, .3, 1);
}
@keyframes xzbtt-launch {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-5px) scale(.9); }
  100% { transform: translateY(0) scale(1); }
}
.xzbtt.is-launching .xzbtt-lines i {
  animation: xzbtt-streak 420ms ease-out;
}
.xzbtt.is-launching .xzbtt-lines i:nth-child(2) { animation-delay: 60ms; }
.xzbtt.is-launching .xzbtt-lines i:nth-child(3) { animation-delay: 30ms; }
.xzbtt.is-launching .xzbtt-lines i:nth-child(4) { animation-delay: 90ms; }
@keyframes xzbtt-streak {
  0% { opacity: 0; transform: translateY(-12px) scaleY(.25); }
  35% { opacity: .85; }
  100% { opacity: 0; transform: translateY(16px) scaleY(1); }
}
.xzbtt.is-launching .xzbtt-ring {
  animation: xzbtt-ring 520ms ease-out;
}
@keyframes xzbtt-ring {
  0% { opacity: .55; transform: scale(.7); }
  100% { opacity: 0; transform: scale(1.75); }
}

/* 移动端：收到 44px 触控尺寸，仍避开聊天气泡（移动端气泡 48px） */
@media (max-width: 768px) {
  .xzbtt { width: 44px; height: 44px; right: 14px; bottom: 16px; }
  .xzbtt.has-chat { bottom: 76px; }
  .xzbtt-rocket { width: 22px; height: 22px; }
  .xzbtt-flame { top: calc(50% + 8px); }
}

/* 减弱动效：不浮、不喷焰、不画线条，滚动由 JS 直接落到 0 */
@media (prefers-reduced-motion: reduce) {
  .xzbtt,
  .xzbtt.is-on,
  .xzbtt.is-yield { transition: none; transform: none; }
  .xzbtt-rocket,
  .xzbtt-flame i,
  .xzbtt.is-launching .xzbtt-rocket,
  .xzbtt.is-launching .xzbtt-lines i,
  .xzbtt.is-launching .xzbtt-ring { animation: none; }
  .xzbtt-track,
  .xzbtt-lines,
  .xzbtt-ring { display: none; }
}