/* ============================================================================
 * 返回顶部按钮（唯一实现）
 *
 * v2.0.18 rev.w 起合并为一套：
 *   以前有两个按钮 —— 桌面的 .cd-top（红色方块）与 xdir-enhance.js 在窄屏
 *   动态创建的 #xdirBackTop（蓝色圆形）。两套各自判断显隐，边界一旦不一致
 *   就会同时出现（≤828 与 ≤768 两个断点没对齐时，769~828 区间两边都显示）。
 *
 *   现在只用 HTML 里本来就有的这一个 .cd-top 元素：
 *     桌面（>828px）→ 红色方块 40/60px，贴着右下角
 *     窄屏（≤828px）→ 蓝色圆形 44px，并与页脚保持距离
 *   显隐仍由 zzsc.js 控制（多容器 scrollTop + 可滚动判断 + 阈值）。
 *   只有一个 DOM 节点，结构上就不可能重复。
 *
 * ★ 本文件原来混合了 GBK 与非法字节，现已统一为 UTF-8。
 *   同时清掉了从 demo 页带过来的 header / main 全局规则 ——
 *   header{background:#5c4751;height:100px} 会命中建站史页的
 *   <header class="xd-cl-head">，给它糊上深紫底色并撑到 100px 高。
 *   那是 demo 残留，不该作用于真实站点。
 * ========================================================================== */

html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
 * 方块形态（桌面默认）
 * ------------------------------------------------------------------------- */
.cd-top {
  display: inline-block;
  height: 34px;
  width: 34px;
  position: fixed;
  /* 桌面端：上抬到页脚上方，留出清晰间隔（foot-h = 实测页脚高，gap = 与页脚间距），
     再加 56px（自身 40px 高 + 16px 按钮间距）让「返回顶端」稳坐在「返回底端」上方 */
  bottom: calc(var(--xdir-foot-h, 34px) + var(--xdir-gap-bottom, 16px) + 50px);
  right: 10px;
  z-index: 60;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  /* 隐藏按钮自身文字 "Top"：用透明色代替 overflow/text-indent，避免裁掉悬停气泡（需求 4） */
  color: transparent;
  white-space: nowrap;
  background: rgba(232, 98, 86, 0.8) url(../images/cd-top-arrow.svg) no-repeat center 50%;
  border-radius: 4px;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-tap-highlight-color: transparent;
}

.cd-top.cd-is-visible {
  /* 按钮出现 */
  visibility: visible;
  opacity: 1;
}

.cd-top.cd-fade-out {
  /* 向下滚动越远，按钮越淡，减少对视线的干扰 */
  opacity: .5;
}

.no-touch .cd-top:hover {
  background-color: #E84E40;
  opacity: 1;
}

/* ---------------------------------------------------------------------------
 * 返回底部按钮（桌面端双按钮之一，v2.0.19 第十七批新增）
 *   与 .cd-top 共用同一套滚动判定（zzsc.js 控制显隐），仅目标位置不同：
 *     · .cd-top    → 回到页面顶端
 *     · .cd-bottom → 回到页面底端
 *   桌面端两者竖向堆叠（返回顶端在上、返回底端在下）；移动端（≤828px）
 *   由下方窄屏规则统一隐藏 .cd-bottom，保留原单按钮圆形交互，
 *   避免破坏已经调好的移动端样式。
 * ------------------------------------------------------------------------- */
.cd-bottom {
  display: inline-block;
  height: 34px;
  width: 34px;
  position: fixed;
  /* 桌面端：紧贴页脚上沿之上，foot-h + gap 保证与页脚留出清晰间隔（不贴底、不重叠） */
  bottom: calc(var(--xdir-foot-h, 34px) + var(--xdir-gap-bottom, 16px));
  right: 10px;
  z-index: 60;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  color: transparent;
  white-space: nowrap;
  background: rgba(232, 98, 86, 0.8) url(../images/cd-bottom-arrow.svg) no-repeat center 50%;
  border-radius: 4px;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-tap-highlight-color: transparent;
}

.cd-bottom.cd-is-visible {
  visibility: visible;
  opacity: 1;
}

.cd-bottom.cd-fade-out {
  opacity: .5;
}

.no-touch .cd-bottom:hover {
  background-color: #E84E40;
  opacity: 1;
}

/* 第二十一批：彻底隐藏按钮自身文字（Top/Bottom），避免任何残留英文/文字渲染；气泡文字改由 data-mtip 提供 */
.cd-top, .cd-bottom { font-size: 0; }

/* 返回顶端 / 返回底部：悬停气泡（文字 + 指向按钮的小三角）需求 4
   鼠标移到按钮上，在按钮左侧弹出带小三角（指回按钮）的文字气泡，文字取自按钮 data-mtip。
   按钮自身文字（Top/Bottom）已用 color:transparent + font-size:0 隐藏，不再依赖 overflow 裁切，
   故气泡可正常向按钮左侧伸出而不被裁掉。仅在支持 hover 的设备生效（移动端用圆形箭头按钮，无悬停）。 */
@media (hover: hover) {
  /* 气泡底色/字号/箭头与左下角音乐播放器统一（v2.0.19 第二十五批：统一样式） */
  .cd-top::after, .cd-bottom::after {
    content: attr(data-mtip);
    position: absolute;
    right: calc(100% + 11px);
    top: 50%;
    transform: translateY(-50%);
    background: #1f2d3d;
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    padding: 6px 10px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 61;
  }
  /* 箭头：指向右（按钮），紧贴气泡右缘，与气泡成为一体（v2.0.19 第二十五批修正：
     原先是 12px 整块三角、方向反了且和气泡分离；现改为 6px 右指三角，
     底边恰好落在气泡右缘 -11px 处，尖端指向按钮，箭头+框合为一体、同步显隐。） */
  .cd-top::before, .cd-bottom::before {
    content: "";
    position: absolute;
    right: calc(100% + 5px);
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid #1f2d3d;   /* 6px 右指三角：底边 -11px 接气泡，尖端 -5px 指向按钮 */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 61;
  }
  .cd-top:hover::after, .cd-bottom:hover::after,
  .cd-top:hover::before, .cd-bottom:hover::before {
    opacity: 1;
    visibility: visible;
  }
}

@media only screen and (min-width: 768px) {
  .cd-top {
    right: 20px;
    bottom: calc(var(--xdir-foot-h, 34px) + var(--xdir-gap-bottom, 16px) + 50px);
  }
  .cd-bottom {
    right: 20px;
    bottom: calc(var(--xdir-foot-h, 34px) + var(--xdir-gap-bottom, 16px));
  }
}

@media only screen and (min-width: 1024px) {
  .cd-top {
    height: 44px;
    width: 44px;
    right: 33px;
    bottom: calc(var(--xdir-foot-h, 34px) + var(--xdir-gap-bottom, 16px) + 60px);
  }
  .cd-bottom {
    height: 44px;
    width: 44px;
    right: 33px;
    bottom: calc(var(--xdir-foot-h, 34px) + var(--xdir-gap-bottom, 16px));
  }
}

/* ---------------------------------------------------------------------------
 * 窄屏（≤828px）：同一个元素换成圆形按钮
 *
 * 828px 是全站统一的「移动端」断点（列表视图、简介说明开关都用它），
 * 这里必须对齐 —— 断点不一致正是之前两个按钮同时出现的根源。
 *
 * 视觉沿用原先移动按钮的做法（白底 + 蓝边 + 蓝箭头），44×44 达 iOS 最小触控尺寸；
 * bottom 用 --xdir-foot-h / --xdir-gap-bottom 上抬避开贴底页脚 ——
 * 这两个变量由 xdir-enhance.js 的 initFooterGap() 实测页脚高度写入。
 * ------------------------------------------------------------------------- */
@media only screen and (max-width: 828px) {
  .cd-top {
    position: fixed;
    right: 16px;
    bottom: calc(var(--xdir-foot-h, 34px) + var(--xdir-gap-bottom, 16px));
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    border: 1px solid #c8e1ff;
    background-color: rgba(255, 255, 255, .94);
    /* ★ 必须清掉背景图：箭头改由 ::after 的 mask 绘制（见下）。
       两份箭头叠在一起会出现「深色箭头 + 蓝色轮廓」的重影，
       实测中心像素取到深灰 rgb(51,51,57) 而不是蓝 —— 就是这个原因。 */
    background-image: none;
    box-shadow: 0 6px 18px rgba(30, 159, 255, .22);
    /* 箭头用 mask 伪元素绘制（见下方 .cd-top::after），
       fixed 定位本身即包含块，伪元素绝对定位于其上 */
    overflow: hidden;
    /* 圆形按钮不做半透明衰减：44px 本来就小，再淡就点不准了 */
    opacity: 0;
    transform: translateY(8px) scale(.9);
    transition: opacity .22s ease, transform .22s ease, background-color .18s ease, box-shadow .18s ease;
  }

  /* 移动端（≤828px）：仅保留原单按钮圆形「返回顶端」，隐藏「返回底部」
     以保证移动端竖向堆叠的双按钮不会挤压圆形按钮与页脚间距。 */
  .cd-bottom {
    display: none;
  }

  .cd-top.cd-is-visible {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  /* 覆盖桌面的 .cd-fade-out：窄屏保持不透明 */
  .cd-top.cd-fade-out {
    opacity: 1;
  }

  .no-touch .cd-top:hover {
    background-color: rgba(255, 255, 255, .94);
  }

  .cd-top:active {
    background-color: #1E9FFF;
    transform: scale(.92);
  }

  /* ===== 箭头：改用 mask 绘制（v2.0.18 rev.w）=====
     原来靠 background-image 直接贴 SVG，箭头颜色被写死在图里（深色）。
     暗色模式下想让它变浅只能给整个元素套 filter: invert()，
     但那会把底色、边框一起反掉 —— 深底反而变白，效果反了。
     用 mask 只取图形的透明通道，颜色由 background-color 决定，
     于是「蓝色箭头」和「暗色下淡蓝箭头」都只是换一个色值。
     不支持 mask 的极老浏览器退化为原图（深色箭头 + 白底，仍可用）。 */
  .cd-top::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    background-color: #1E9FFF;
    -webkit-mask: url(../images/cd-top-arrow.svg) no-repeat center center / contain;
    mask: url(../images/cd-top-arrow.svg) no-repeat center center / contain;
  }

  /* 暗色模式：深底 + 淡蓝箭头（与原先移动按钮的暗色观感一致） */
  .night .cd-top,
  body.night .cd-top {
    border-color: #2c3e50;
    background-color: rgba(27, 39, 53, .94);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  }

  .night .cd-top::after,
  body.night .cd-top::after {
    background-color: #6db3ff;
  }

  .night .cd-top:active,
  body.night .cd-top:active {
    background-color: #1E9FFF;
  }

  .night .cd-top:active::after,
  body.night .cd-top:active::after {
    background-color: #fff;
  }
}