/* ============================================================
   XD Reader 沉浸式阅读器插件（chapter.php 专用）
   - 全屏模态形态：默认隐藏全部控制层，点击呼出顶/底栏
   - 主题/排版经 CSS 变量驱动，偏好 localStorage 持久化
   - 控制层动画统一 transform + transition（GPU 友好）
   ============================================================ */

.xd-reader { position: fixed; inset: 0; z-index: 2000; display: none; }
.xd-reader.open { display: block; }
body.xd-reader-lock { overflow: hidden; }
/* 真全屏时由根节点铺满屏幕：dvh 在全屏视口下与 UA 默认样式可能不一致，显式兜底防留白 */
.xd-reader-root:fullscreen { width: 100%; height: 100%; }
.xd-reader-root:-webkit-full-screen { width: 100%; height: 100%; }

.xd-reader-root {
    width: 100%;
    height: 100%;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--rd-bg);
    color: var(--rd-text);
    /* 日间默认 + 排版默认值（用户偏好以 inline 变量覆盖） */
    --rd-bg: #f6f7f8;
    --rd-text: #333;
    --rd-muted: #98a0a8;
    --rd-bar: rgba(255,255,255,0.94);
    --rd-line: rgba(0,0,0,0.08);
    --rd-fs: 18px;
    --rd-lh: 1.9;
    --rd-pgap: 1.2em;
    --rd-pad: 20px;
    /* PC 端正文列最大宽度：与站内章节正文 .chapter-text 的 800px 对齐（窄屏自动收缩为 100%） */
    --rd-max: 800px;
    --rd-font: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
.xd-reader-root[data-rtheme="sepia"] { --rd-bg: #f6e8d0; --rd-text: #5c4a32; --rd-muted: #a08b6f; --rd-bar: rgba(251,243,228,0.95); --rd-line: rgba(92,74,50,0.16); }
.xd-reader-root[data-rtheme="green"] { --rd-bg: #cfe8cf; --rd-text: #2f3b33; --rd-muted: #7d9184; --rd-bar: rgba(221,240,221,0.95); --rd-line: rgba(47,59,51,0.16); }
.xd-reader-root[data-rtheme="night"] { --rd-bg: #1c2126; --rd-text: #9aa5b1; --rd-muted: #5f6a76; --rd-bar: rgba(28,33,38,0.95); --rd-line: rgba(255,255,255,0.10); }
.xd-reader-root[data-rfont="serif"] { --rd-font: Georgia, "Songti SC", SimSun, serif; }
.xd-reader-root[data-rfont="kai"] { --rd-font: "Kaiti SC", KaiTi, STKaiti, serif; }

/* ---------- 正文区 ---------- */
.xd-reader-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    width: 100%;
    max-width: var(--rd-max);   /* PC 宽屏 800px 居中，两侧留白；窄于 800px 时自适应铺满 */
    margin: 0 auto;
    padding: calc(var(--rd-pad) + 14px) var(--rd-pad) calc(var(--rd-pad) + 24px);
}
.xd-reader-title {
    font-family: var(--rd-font);
    font-size: calc(var(--rd-fs) + 4px);
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 1.2em;
}
.xd-reader-body p {
    font-family: var(--rd-font);
    font-size: var(--rd-fs);
    line-height: var(--rd-lh);
    margin: 0 0 var(--rd-pgap);
    text-indent: 2em;
    word-break: break-word;
}
/* 加载态：列表页零触摸入口先开层再取正文，避免空白闪烁 */
.xd-loading {
    padding: 18vh 0 0;
    text-align: center;
    font-family: var(--rd-font);
    font-size: var(--rd-fs);
    color: var(--rd-muted);
    text-indent: 0;
}

/* 屏幕常亮的兜底视频（仅非安全上下文：Wake Lock API 不可用）：
   必须保持「可见」——不能 display:none / visibility:hidden，否则系统不计入常亮判定；
   2px 近透明，视觉无感；position:fixed 使其脱离根节点 flex 流，不参与排版 */
.xd-keepawake {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 2px;
    height: 2px;
    opacity: 0.01;
    pointer-events: none;
    z-index: 1;
}

/* ---------- 锁面板（未登录 / 未付费：正文由服务端不下发） ---------- */
.xd-lock-panel {
    max-width: 420px;
    margin: 8vh auto 0;
    padding: 32px 24px;
    text-align: center;
    font-family: var(--rd-font);
    background: rgba(128,128,128,0.06);
    border: 1px solid var(--rd-line);
    border-radius: 12px;
}
.xd-lock-icon { font-size: 32px; line-height: 1; }
.xd-lock-title {
    font-size: calc(var(--rd-fs) + 2px);
    font-weight: 700;
    margin: 14px 0 8px;
}
.xd-lock-desc {
    font-size: 14px;
    line-height: 1.7;
    color: var(--rd-muted);
    margin: 0 0 20px;
}
.xd-lock-desc strong { color: var(--rd-text); }
.xd-lock-desc .xd-lock-sep { margin: 0 8px; }
.xd-lock-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.xd-lock-btn {
    display: inline-block;
    padding: 9px 22px;
    font-size: 14px;
    font-family: inherit;
    color: #fff;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    transition: opacity .15s;
}
.xd-lock-btn:hover { opacity: .88; }
.xd-lock-btn[disabled] { opacity: .6; cursor: default; }
.xd-lock-hint {
    margin: 14px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--rd-muted);
}

/* ---------- 余额=0 全屏充值蒙版（登录后当前章需付费且余额归零时显示） ---------- */
/* 覆盖整个阅读器界面并阻断下层全部交互（点按/滑动/滚动均被本层吸收） */
.xd-paywall {
    position: absolute;
    inset: 0;
    z-index: 10;               /* 高于顶/底栏(5)、排版面板(6)、目录(7)、轻提示(9) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 17, 20, 0.66);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: auto;      /* 拦截下层点击/触摸 */
    touch-action: none;        /* 拦截下层滑动 */
    overscroll-behavior: contain;
}
.xd-paywall-inner {
    width: 100%;
    max-width: 420px;
    padding: 36px 28px;
    text-align: center;
    font-family: var(--rd-font);
    background: var(--rd-bar);
    border: 1px solid var(--rd-line);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    color: var(--rd-text);
}
.xd-paywall-icon { color: var(--primary); }
.xd-paywall-icon svg { width: 42px; height: 42px; display: block; margin: 0 auto; }
.xd-paywall-title {
    font-size: 20px;
    font-weight: 700;
    margin: 14px 0 8px;
}
.xd-paywall-desc {
    font-size: 14px;
    line-height: 1.7;
    color: var(--rd-muted);
    margin: 0 0 22px;
}
.xd-paywall-btn {
    display: inline-block;
    padding: 10px 34px;
    font-size: 15px;
    font-family: inherit;
    color: #fff;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    transition: opacity .15s;
}
.xd-paywall-btn:hover { opacity: .88; }

/* ---------- 顶/底控制层：默认隐藏，.controls 时滑入 ---------- */
.xd-reader-top,
.xd-reader-bottom {
    position: absolute;
    left: 0;
    right: 0;
    background: var(--rd-bar);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform .28s ease, opacity .28s ease;
    z-index: 5;
}
.xd-reader-top {
    top: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
    border-bottom: 1px solid var(--rd-line);
    transform: translateY(-100%);
    opacity: 0;
}
.xd-reader-bottom {
    bottom: 0;
    padding: 6px 12px calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--rd-line);
    transform: translateY(100%);
    opacity: 0;
}
.xd-reader.controls .xd-reader-top,
.xd-reader.controls .xd-reader-bottom { transform: translateY(0); opacity: 1; }

.xd-back-btn {
    background: none;
    border: none;
    color: var(--rd-text);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    flex-shrink: 0;
}
.xd-reader-chaptitle {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: var(--rd-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Token 余额徽章（右上角，克制样式） */
.xd-token-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(128,128,128,0.12);
    color: var(--rd-muted);
    font-size: 12px;
}
.xd-token-badge svg { display: block; }
.xd-token-badge.low { color: var(--danger); background: rgba(231,76,60,0.12); }

/* ---------- 底栏：翻页行 + 进度行 + 图标行 ---------- */
.xd-page-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 4px 2px;
}
.xd-page-info { flex: 1; text-align: center; font-size: 12px; color: var(--rd-muted); }
.xd-progress-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 2px 4px 8px;
    border-bottom: 1px solid var(--rd-line);
}
.xd-chap-btn {
    background: none;
    border: none;
    color: var(--rd-text);
    font-size: 13px;
    cursor: pointer;
    padding: 4px 2px;
    flex-shrink: 0;
}
.xd-chap-btn[disabled] { opacity: .4; cursor: not-allowed; }
.xd-progress { flex: 1; text-align: center; font-size: 12px; color: var(--rd-muted); }
.xd-icon-row { display: flex; }
.xd-icon-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--rd-text);
    font-size: 11px;
    cursor: pointer;
    padding: 6px 0;
}
.xd-icon-btn svg { display: block; }
.xd-icon-btn:hover { color: var(--primary); }

/* ---------- 排版设置面板（底栏上方滑出） ---------- */
.xd-reader-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    background: var(--rd-bar);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--rd-line);
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform .28s ease;
    max-height: 62%;
    overflow-y: auto;
}
.xd-reader-sheet.open { transform: translateY(0); }
.xd-sheet-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.xd-sheet-row:last-child { margin-bottom: 4px; }
.xd-sheet-label { width: 52px; flex-shrink: 0; font-size: 12px; color: var(--rd-muted); }
.xd-chip {
    border: 1px solid var(--rd-line);
    background: transparent;
    color: var(--rd-text);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
}
.xd-chip.active { border-color: var(--primary); color: var(--primary); }
.xd-fs-ctrl { display: flex; align-items: center; gap: 12px; }
.xd-fs-ctrl .xd-chip { width: 34px; padding: 5px 0; text-align: center; }
.xd-fs-label { font-size: 12px; color: var(--rd-muted); min-width: 44px; text-align: center; }

/* ---------- 阅读器内目录抽屉 ---------- */
.xd-toc {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    max-width: 82vw;
    background: var(--rd-bar);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 7;
    transform: translateX(100%);
    transition: transform .28s ease;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--rd-line);
}
.xd-toc.open { transform: translateX(0); }
.xd-toc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--rd-line);
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}
.xd-toc-close { background: none; border: none; font-size: 22px; line-height: 1; color: var(--rd-muted); cursor: pointer; }
.xd-toc-body { overflow-y: auto; padding: 8px; }
.xd-toc-item {
    display: block;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--rd-text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.xd-toc-item.active { background: var(--primary); color: #fff; }

/* ---------- 轻提示 ---------- */
.xd-toast {
    position: absolute;
    top: calc(56px + env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: rgba(0,0,0,0.72);
    color: #fff;
    font-size: 12px;
    padding: 8px 16px;
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .25s;
    z-index: 9;
    max-width: 80vw;
    text-align: center;
}
.xd-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 768px) {
    .xd-reader-root { --rd-fs: 16px; }
    .xd-reader-top { padding-left: 12px; padding-right: 12px; }
}

/* ---------- 动态插图：骨架屏 + 淡入 + 位置变体 ---------- */
.xd-dynimg { margin: 1.2em auto; max-width: 100%; animation: xdFadeInUp .4s ease; }
.xd-dynimg.pos-full { width: 100%; }
.xd-dynimg.pos-left { float: left; margin: .4em 1em .4em 0; max-width: 40%; }
.xd-dynimg.pos-right { float: right; margin: .4em 0 .4em 1em; max-width: 40%; }
.xd-dynimg img { display: block; width: 100%; height: auto; border-radius: 6px; transition: opacity .5s; }
.xd-skeleton {
    width: 100%;
    height: 180px;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(128,128,128,.12) 25%, rgba(128,128,128,.24) 50%, rgba(128,128,128,.12) 75%);
    background-size: 200% 100%;
    animation: xdShimmer 1.5s infinite;
}
.xd-img-error {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    border: 1px dashed var(--rd-line);
    border-radius: 6px;
    color: var(--rd-muted);
    font-size: 12px;
}
@keyframes xdFadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes xdShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@media (max-width: 640px) {
    .xd-dynimg.pos-left, .xd-dynimg.pos-right { float: none; max-width: 100%; margin: 1.2em auto; }
}

/* ---------- 正文视频占位（阅读器内点击唤起悬浮窗） ---------- */
.xd-video-ph {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    max-width: 420px;
    padding: 26px 12px;
    margin: 1.2em auto;
    border: 1px dashed var(--rd-line);
    border-radius: 8px;
    color: var(--rd-muted);
    cursor: pointer;
}
.xd-video-ph em { font-style: normal; font-size: 12px; }
.xd-video-ph:hover { color: var(--primary); border-color: var(--primary); }

/* 网页正文（非阅读器）中插图/占位的段落修正 */
.chapter-text p:has(> .xd-content-img),
.chapter-text p:has(> .xd-video-ph) { text-indent: 0; text-align: center; }
.chapter-text .xd-content-img { max-width: 100%; border-radius: 6px; }
.chapter-text .xd-dynimg { margin: 1.2em auto; max-width: 100%; }
.chapter-text .xd-dynimg img { width: 100%; height: auto; display: block; border-radius: 6px; }

/* ---------- 80px 悬浮迷你播放器 ---------- */
.xd-mini-player {
    position: fixed;
    z-index: 3000;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    border: 1.5px solid rgba(255,255,255,.25);
    box-shadow: 0 2px 10px rgba(0,0,0,.35);
    cursor: grab;
    touch-action: none;
    contain: layout style paint;
    display: none;
}
.xd-mini-player.dragging { cursor: grabbing; box-shadow: 0 6px 24px rgba(0,0,0,.45); }
.xd-mini-player video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.xd-mini-player.expanded {
    width: min(72vw, 640px);
    height: min(40.5vw, 360px);
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    cursor: default;
}
/* 桌面端展开尺寸更大（1024px 以上屏幕） */
@media (min-width: 1024px) {
    .xd-mini-player.expanded {
        width: min(60vw, 960px);
        height: min(33.75vw, 540px);
    }
}
/* 常驻关闭按钮：不随 hover / tap 控制层隐藏，点击直接退出视频返回阅读界面 */
.xd-mp-close {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    font-size: 11px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    z-index: 6;
}
.xd-mp-close:hover { background: rgba(0, 0, 0, .82); }
/* ---------- 加载态 spinner ---------- */
.xd-mp-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 2px solid rgba(255,255,255,.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: xdMpSpin .7s linear infinite;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
    z-index: 2;
}
.xd-mp-spinner.show { opacity: 1; }
@keyframes xdMpSpin { to { transform: rotate(360deg); } }
/* ---------- 错误态 + 重试 ---------- */
.xd-mp-error {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(0,0,0,.7);
    color: #fff;
    font-size: 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
    z-index: 3;
}
.xd-mp-error.show { opacity: 1; pointer-events: auto; }
.xd-mp-retry {
    background: rgba(255,255,255,.18);
    color: #fff;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 999px;
    padding: 4px 14px;
    font-size: 12px;
    cursor: pointer;
    transition: background .15s;
}
.xd-mp-retry:hover { background: rgba(255,255,255,.28); }
.xd-mp-controls {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(0,0,0,.5);
    opacity: 0;
    transition: opacity .2s;
}
@media (hover: hover) {
    .xd-mini-player:hover .xd-mp-controls { opacity: 1; }
}
.xd-mini-player.touch-show .xd-mp-controls { opacity: 1; }
.xd-mp-controls button {
    background: rgba(0,0,0,.45);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.xd-mp-controls .xd-mp-play { width: 30px; height: 30px; }
.xd-mp-controls .xd-mp-speed {
    width: auto;
    border-radius: 12px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: -0.02em;
}
.xd-mp-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(0,0,0,.35); }
.xd-mp-progress i { display: block; height: 100%; width: 0; background: var(--primary); }

/* ---------- 书籍翻页模式（与上下滚动互斥：仅在 .xd-reader-root.paged 时生效） ---------- */
/* 正文用 CSS 多列排成「整屏的页」：关掉纵向滚动、只留横向翻页，文字自左向右出现，
   翻页 = 整页左右跳；列宽 / 列间距由 reader.js 内联设置（页宽 = 正文内容盒宽度） */
.xd-reader-root.paged .xd-reader-body {
    overflow: hidden;          /* 关掉纵向滚动；横向由 JS 设置 scrollLeft 翻页（不显示滚动条） */
    max-width: var(--rd-max);  /* 与滚动模式同宽：页宽 = 800px 内容盒（减两侧内边距），整体居中留白 */
    column-fill: auto;         /* 先填满一列再开下一列，而不是把内容均分到整屏高 */
    -webkit-column-fill: auto;
}
/* 分页时这些块不允许被拆到两页：整块留在同一页 */
.xd-reader-root.paged .xd-reader-body h1,
.xd-reader-root.paged .xd-reader-body h2,
.xd-reader-root.paged .xd-reader-body h3,
.xd-reader-root.paged .xd-reader-body blockquote,
.xd-reader-root.paged .xd-reader-body .xd-dynimg,
.xd-reader-root.paged .xd-reader-body .xd-video-ph,
.xd-reader-root.paged .xd-reader-body .xd-lock-panel {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}
/* 多列环境里浮动会跨列错位：分页时把左右浮动插图改回整列宽居中 */
.xd-reader-root.paged .xd-reader-body .xd-dynimg,
.xd-reader-root.paged .xd-reader-body .xd-dynimg.pos-left,
.xd-reader-root.paged .xd-reader-body .xd-dynimg.pos-right {
    float: none;
    max-width: 100%;
    margin: 1em auto;
}
/* 插图不高于一页，避免撑破分页高度（宽高都 auto 时按比例缩放到约束内） */
.xd-reader-root.paged .xd-reader-body .xd-dynimg img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 72vh;
    margin: 0 auto;
}
/* 加载占位跨列居中，不参与分列 */
.xd-reader-root.paged .xd-reader-body .xd-loading {
    column-span: all;
    -webkit-column-span: all;
}