/*
 * 全屏阅读器 —— AI 吐出来的长文，在一张卡片里挤着 12px 是读不动的。
 *
 * 打开后铺满屏幕、行宽收到一个正常的阅读宽度（太宽了眼睛要来回甩），字号可调
 * 且记在 localStorage 里 —— 一个人的"看得清"和另一个人的差得远，与其我猜一个
 * 数值，不如给两个按钮让他自己定。
 */

.wr-backdrop {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(0, 0, 0, 0.75);
  display: none;
}
.wr-backdrop.on { display: block; }

.wr-panel {
  position: fixed;
  inset: 3vh 4vw;
  z-index: 401;
  display: none;
  flex-direction: column;
  background: var(--bg, #16161a);
  border: 1px solid var(--border, #3a3a3c);
  border-radius: 12px;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.wr-panel.on { display: flex; }

.wr-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border, #3a3a3c);
  background: var(--surface, #1f1f23);
}
.wr-title {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--muted, #999);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wr-btn {
  background: none;
  border: 1px solid var(--border, #3a3a3c);
  color: var(--muted, #999);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.wr-btn:hover { color: var(--text, #f0f0f0); border-color: var(--accent, #d97706); }
.wr-size { font-family: ui-monospace, monospace; font-size: 11px;
           color: var(--muted, #999); min-width: 3.2em; text-align: center; }

.wr-body {
  flex: 1;
  overflow-y: auto;
  padding: 28px 24px 60px;
}
.wr-text {
  max-width: 46em;              /* 行宽 —— 再宽读起来就要甩头了 */
  margin: 0 auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text, #f0f0f0);
  font-size: 16px;              /* JS 会按记住的档位覆盖 */
  line-height: 1.95;
}

/* 打开时锁住背后页面的滚动，否则滚轮到底会带着底下一起动 */
body.wr-open { overflow: hidden; }

@media (max-width: 640px) {
  .wr-panel { inset: 0; border-radius: 0; }
  .wr-body { padding: 18px 16px 48px; }
}