/* 小猫爬绳滚动进度条样式（DOM 由 neko-scroll.js 注入）
 * 绳子：半透明底色 + 45° 斜纹渐变，fixed 右侧随进度变长
 * 猫：64px 贴图趴在绳顶；滚到底/悬停时 ::after 显示气泡框 + 文案
 */

#neko-scroll {
  position: fixed;
  width: 6px;
  top: 0;
  z-index: 9999;
  right: 55.6px;
  border-radius: 2em;
  background-color: rgb(0 0 0 / 0.5);
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.1) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.1) 75%,
    transparent 75%,
    transparent
  );
  background-size: contain;
  cursor: pointer;
  display: none;
}

.neko {
  width: 64px;
  height: 64px;
  position: fixed;
  right: 56px !important;
  background-repeat: no-repeat;
  background-size: contain;
  transform: translateX(50%);
  font-weight: 600;
  font-size: 16px;
  color: var(--theme-color, #49b1f5) !important;
  z-index: 99990;
  cursor: pointer;
  display: none;
  user-select: none;
}

/* 气泡框（贴图），文案用 data-msg 填充 */
.neko::after {
  display: none;
  width: 100px;
  height: 100px;
  background-image: url('/img/neko-bubble.png');
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 9999;
  position: absolute;
  right: 50%;
  text-align: center;
  line-height: 106px;
  top: -115%;
}

/* 滚到底 或 悬停猫 时显示气泡 */
.neko.showMsg::after,
.neko:hover::after {
  content: attr(data-msg);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 手机端隐藏 */
@media screen and (max-width: 768px) {
  .neko,
  #neko-scroll {
    display: none !important;
  }
}