/* ============================================================
   reader.css —— 阅读区、正文排版、翻页层、状态栏与页脚
   ============================================================ */

.reader {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--read-bg);
  color: var(--read-text);
  -webkit-user-select: none;
  user-select: none;
}

/* ---------- 正文视口 ---------- */

.reader-view {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* 顶部多留一点，避免文字贴到刘海；底部避开手势条 */
  --view-pad-top: 26px;
  /* 左右留出正文边距：贴边阅读观感与可读性都差，同时给多列的版心留出裁剪余量 */
  --view-pad-x: 18px;
  --view-pad-bottom: 44px;
  padding:
    calc(env(safe-area-inset-top) + var(--view-pad-top))
    calc(env(safe-area-inset-left) + var(--view-pad-x))
    calc(env(safe-area-inset-bottom) + var(--view-pad-bottom))
    calc(env(safe-area-inset-right) + var(--view-pad-x));
}

/* 顶部状态栏打开时，正文整体下移，避免与其重叠 */
.reader.has-statusbar .reader-view {
  --view-pad-top: 46px;
}

.reader-view.is-vertical {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

/* 章末可玩位倒计时期间：从手势层锁死，不再靠事后回正 scrollTop（那种做法会露出漂移）。
   关掉合成层惯性，防止锁定前已有的动量继续推着页面走 */
.reader-view.is-scroll-locked {
  touch-action: none;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
}

/* 正文裁剪框：多列的溢出列只能出现在版心内。
   reader-view 的 overflow 只裁到 padding box，挡不住落在左右内边距里的相邻列，必须再套这层。 */
.reader-clip {
  position: absolute;
  overflow: hidden;
}

/* 上下模式正文自然纵向流动、没有列溢出，裁剪框退回普通块，纵向滚动仍由 reader-view 承担 */
.reader-view.is-vertical .reader-clip {
  position: static;
  overflow: visible;
}

.reader-content {
  column-fill: auto;
  column-gap: 0;
  font-size: var(--font-size);
  line-height: var(--line-height);
  color: var(--read-text);
  text-align: justify;
  word-break: break-word;
  transform: translate3d(0, 0, 0);
}

.reader-content .chapter-title {
  margin: 0 0 1em;
  font-size: 1.15em;
  font-weight: 600;
  line-height: 1.5;
  text-indent: 0;
}

.reader-content p {
  margin: 0;
  text-indent: var(--para-indent);
}

/* 段落间距只加在段间，避免最后一页多出一个空列 */
.reader-content p + p {
  margin-top: var(--para-space);
}

/* 上下翻页模式下取消分列，正文自然纵向流动 */
.reader-view.is-vertical .reader-content {
  column-width: auto;
  column-count: auto;
  height: auto;
  width: auto;
  transform: none !important;
}

/* 上下模式下相邻章在同一滚动流里，章块之间留出间隔以示分隔 */
.reader-view.is-vertical .chapter-block + .chapter-block {
  margin-top: 2em;
}

/* ---------- 翻页动画层 ---------- */

.reader-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}

.turn-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* 不透明底色：翻页时新页要完全盖住旧页，透明底会让两层文字互相透出来 */
  background: var(--read-bg);
}

/* 新页窗口：由「铺满视口」收缩成一页大小，滑入时才不会连旧页一起带着走；
   具体位置与尺寸随字号/行距变化，由分页引擎按当前排版写入 */
.turn-clip.is-window {
  inset: auto;
}

.turn-page {
  position: absolute;
  top: 0;
  left: 0;
}

/* ---------- 顶部状态栏（书名/章名 + 时间电量，可由更多设置开关） ---------- */

.reader-status {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 6px) 16px 0;
  font-size: 12px;
  color: var(--read-muted);
  pointer-events: none;
}

.reader.has-statusbar .reader-status {
  display: flex;
}

.reader-status-name {
  max-width: 60%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---------- 阅读页脚（页码与进度） ---------- */

.reader-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px calc(env(safe-area-inset-bottom) + 8px);
  font-size: 11px;
  color: var(--read-muted);
  pointer-events: none;
}

/* ---------- 加载与提示 ---------- */

.reader-loading {
  position: absolute;
  left: 0;
  right: 0;
  top: 45%;
  z-index: 6;
  text-align: center;
  font-size: 14px;
  color: var(--read-muted);
}

.reader-loading.is-hidden {
  display: none;
}

/* 本章读完时的段末提示 */
.reader-end {
  margin-top: 1.4em;
  font-size: 0.85em;
  color: var(--read-muted);
  text-indent: 0;
  text-align: center;
}