/* =========================================
   Reader Loader
   Footer controls for reading experience
   ========================================= */

.reader-loader {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: 100%;
    min-height: 28px;
}

.reader-btn {
    appearance: none;
    border: 0;
    padding: 2px;
    margin: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.reader-btn svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.25;
}

.reader-btn:hover {
    opacity: 0.72;
}

.reader-btn.is-active {
    opacity: 1;
}

.reader-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.reader-progress {
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    color: #fa6699;
    font-size: 10px;
    letter-spacing: 0;
}

.reader-progress-line {
    display: block;
    width: 18px;
    height: 1px;
    background: currentColor;
    transform: translateY(1px);
}

.reader-progress-value {
    display: inline-block;
    min-width: 26px;
    text-align: right;
}

.reader-btn:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 3px;
}

.footer-info {
    display: block;
    flex: 0 0 auto;
}


/* Reader state notice
   Reuses the Post notice positioning/animation, with a high-contrast
   pink state color for messages shown during reading. */
.reader-state-notice.post {
    position: fixed;
    bottom: 62px;
    left: 0;
    right: 0;
    z-index: 2000;

    transform: translateY(-50%);
    width: auto;
    max-width: none;
    box-sizing: border-box;
    padding: 6px 12px;

    border: 1px solid #fa6699;
    background: #fa6699;
    color: #ffffff;
    text-align: center;

    font-size: clamp(14px, 1vw, 16px);
    line-height: 1.2;
    letter-spacing: 0.5px;

    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}

.reader-state-notice.post.is-visible {
    opacity: 1;
}


/* Immersive reading mode */
.immersive-toggle {
    display: inline-flex;
    position: fixed;
    right: max(11px, calc((100vw - 360px) / 2 + 11px));
    bottom: 10px;
    z-index: 3000;
    width: 28px;
    height: 28px;
    padding: 4px;
    border-radius: 6px;
    background: #fa6699;
    color: #ffffff;
    box-shadow: 0 1px 6px rgb(0 0 0 / 12%);
    backdrop-filter: blur(3px);
}

.immersive-toggle svg {
    width: 18px;
    height: 18px;
}

/* Prevent browser scroll anchoring from fighting the immersive transition. */
html,
body {
    overflow-anchor: none;
}

/* Very short transition so immersive mode does not snap between states. */
.ai-header,
footer.post,
.reader-post-preferences {
    transition: opacity 200ms ease, visibility 200ms ease;
}

body.is-immersive .ai-header,
body.is-immersive footer.post,
body.is-immersive .reader-post-preferences,
body.is-immersive .post-header-wrap,
body.is-immersive .post-footer-wrap {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Keep the page geometry switch instant so immersive mode does not
   produce an extra scrollbar jump while the JS keeps the reading anchor stable. */
main-warper {
    transition: none;
}

/* Post catalog occupies a second fixed row below the header. */
.post-loader {
    padding-top: 40px;
}

body.is-immersive main-warper {
    min-height: 100vh;
    padding-top: 0;
    padding-bottom: 0;
}

body.is-immersive .post-loader {
    padding-top: 0;
}

body.is-immersive .out-warper {
    min-height: 100vh;
}

/* Immersive control tuck/peek */
body.is-immersive .immersive-toggle {
    transition: bottom 0.18s ease;
}
body.is-immersive .immersive-toggle.is-peeked {
    bottom: 10px;
}
body.is-immersive .immersive-toggle:not(.is-peeked) {
    bottom: -25px;
}


/* =========================================
   Reader Data Backup UI
   Reusable by Codex and Reader pages.
   ========================================= */

.reader-data-actions {
    position: fixed;
    top: 43px;
    left: max(10px, calc((100vw - 360px) / 2 + 10px));
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 1500;
}

.reader-data-modal[hidden] {
    display: none;
}

.reader-data-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.reader-data-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(36, 36, 36, 0.28);
    backdrop-filter: blur(2px);
}

.reader-data-dialog {
    position: relative;
    z-index: 1;
    width: min(340px, calc(100vw - 40px));
    box-sizing: border-box;
    padding: 22px 20px 18px;
    background: #ffffff;
    border: 1px solid #fa669930;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.reader-data-dialog-title {
    font-size: 20px;
    line-height: 1.45;
    margin-bottom: 12px;
}

.reader-data-dialog-preview[hidden] {
    display: none;
}

.reader-data-dialog-preview {
    display: block;
    width: 76px;
    height: auto;
    padding: 0;
    margin: 0 auto 14px;
    object-fit: cover;
    object-position: center;
    border: 1px solid #fa669930;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.reader-data-dialog-body {
    font-size: 15px;
    line-height: 1.75;
    white-space: pre-line;
}

.reader-data-dialog-time {
    margin-top: 10px;
    color: #696969;
    font-size: 12px;
    line-height: 1.5;
}

.reader-data-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

.reader-data-dialog-button {
    appearance: none;
    min-width: 58px;
    padding: 6px 12px;
    border-radius: 5px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.reader-data-dialog-button.secondary {
    border: 1px solid #24242430;
    background: #ffffff;
    color: #242424;
}

.reader-data-dialog-button.primary {
    border: 1px solid #fa6699;
    background: #fa6699;
    color: #ffffff;
}

.reader-data-dialog-button:hover {
    opacity: 0.78;
}


/* Reader dialog dark-mode surface. Primary action remains unchanged. */
body.reader-dark .reader-data-dialog {
    background: #111111;
    color: #999999;
    border-color: #99999930;
}

body.reader-dark .reader-data-dialog-title {
    color: #999999;
}

body.reader-dark .reader-data-dialog-body {
    color: #999999;
}

body.reader-dark .reader-data-dialog-time {
    color: #777777;
}

body.reader-dark .reader-data-dialog-preview {
    border-color: #99999930;
}

body.reader-dark .reader-font-field label {
    color: #777777;
}

body.reader-dark .reader-font-field select {
    background: #111111;
    color: #999999;
    border-color: #99999940;
}

body.reader-dark .reader-data-dialog-button.secondary {
    background: #111111;
    color: #999999;
    border-color: #99999940;
}

body.reader-dark .reader-data-dialog-button.primary {
    background: #fa6699;
    color: #ffffff;
    border-color: #fa6699;
}

/* Backup-cover marker injected by Reader, never by Post Loader. */
.post-image.post {
    position: relative;
}

.reader-cover-save.post {
    position: absolute;
    left: 7px;
    bottom: 9px;
    z-index: 2;
    appearance: none;
    width: 22px;
    height: 22px;
    padding: 3px;
    margin: 0;
    border: 0;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0);
    color: #ffffff;
    /* box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12); */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.82;
    transition: opacity 160ms ease, transform 160ms ease;
}

.reader-cover-save.post:hover {
    opacity: 1;
    transform: translateY(-1px);
}

.reader-cover-save.post.is-active {
    color: #fa6699;
    opacity: 1;
}

.reader-cover-save.post svg {
    width: 15px;
    height: 15px;
    stroke-width: 1.5;
}

/* Same white horizontal notice style as Post's Get post link notice. */
.reader-cover-notice.post {
    position: fixed;
    top: 50%;
    left: 0;
    right: 0;
    z-index: 2000;
    transform: translateY(-50%);
    width: auto;
    max-width: none;
    box-sizing: border-box;
    padding: 6px 12px;
    border: 1px solid rgb(255 255 255 / 70%);
    background: rgb(255 255 255 / 100%);
    color: #696969;
    text-align: center;
    font-size: clamp(14px, 1vw, 16px);
    line-height: 1.2;
    letter-spacing: 0.5px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}

.reader-cover-notice.post.is-visible {
    opacity: 1;
}



.reader-data-dialog-divider {
    border: 0;
    border-top: 1px solid #fa669930;
    margin: 12px 0 14px;
}

.reader-data-dialog-help {
    display: block;
    margin-top: 10px;
    text-align: left;
    font-size: 12px;
    color: #888888;
    text-decoration: underline;
}

.reader-data-dialog-help:hover {
    color: #fa6699;
}


/* =========================================
   Post Reading Preferences
   Buttons intentionally match Codex view buttons.
   ========================================= */
.reader-post-preferences {
    position: fixed;
    top: 43px;
    left: max(10px, calc((100vw - 360px) / 2 + 10px));
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 1500;
}

.reader-post-pref-button {
    appearance: none;
    border: 0;
    padding: 0;
    margin: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #24242420;
    border-radius: 3px;
    color: #242424;
    cursor: pointer;
}

.reader-post-pref-button.is-active {
    color: #fa669969;
}

.reader-post-pref-button:hover {
    opacity: 0.72;
}

.reader-post-pref-button:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 2px;
}

.reader-post-pref-button svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.5;
    pointer-events: none;
}

/* =========================================
   Reader Dark Mode — post-text only
   ========================================= */
.post-text.post {
    --reader-font-scale: 1;
    --reader-device-scale: 1;
}

@media (max-width: 600px) {
    .post-text.post {
        --reader-device-scale: 1.2;
    }
}

body.reader-dark .post-text.post {
    padding-left: 0;
    padding-right: 0;
    position: relative;
    isolation: isolate;
    background-color: transparent;
    color: #999999;
    box-shadow: none;
    clip-path: none;
}

/* Extend the dark reading surface horizontally, but only for the
   vertical height of post-text itself. This keeps the fixed header/footer
   and other page sections visually unchanged. */
body.reader-dark .post-text.post::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background-color: #111111;
    pointer-events: none;
}

body.reader-dark .post-text.post a,
body.reader-dark .post-text.post strong,
body.reader-dark .post-text.post em {
    color: #999999;
}

/* Dark-mode tuning point for the existing AI All-mode user card.
   Keep this selector narrow so unrelated loader/UI components never inherit it. */
body.reader-dark:has(#ai-loader:not([hidden]):not([data-mode]),
                      #ai-loader[data-mode="all"]) .post-text.post .user {
    background-color: #ffffff20;
    color: #ffffff90;
    border-color: #99999920;
    box-shadow: none;
}

body.reader-dark .post-text.post hr {
    border-top-color: #99999940;
    box-shadow: none;
}

/* =========================================
   Reader Dark Mode — Post metadata
   ========================================= */
body.reader-dark .post-date.post,
body.reader-dark .post-title.post,
body.reader-dark .post-tag.post,
body.reader-dark .post-related.post,
body.reader-dark .post-readmore.post,
body.reader-dark .post-backto.post {
    color: #999999;
}

body.reader-dark .post-title.post h2,
body.reader-dark .post-tag.post a,
body.reader-dark .post-related.post a,
body.reader-dark .post-readmore.post a,
body.reader-dark .post-readmore.post span,
body.reader-dark .post-backto.post a,
body.reader-dark .post-backto.post span {
    color: #999999;
}

body.reader-dark .post-related.post {
    border-color: #99999940;
}

body.reader-dark .post-readmore.post,
body.reader-dark .post-tag.post,
body.reader-dark .post-backto.post {
    border-top-color: #99999940;
}

/* =========================================
   Post font application — block-level only
   ========================================= */
.post-text.post [data-reader-font-lang="en"] {
    font-family: var(--reader-font-family-en, inherit);
}

.post-text.post [data-reader-font-lang="zh"] {
    font-family: var(--reader-font-family-zh, inherit);
}

/* SYSTEM DEFAULT: restore the original / browser-side font resolution. */
body[data-reader-font-en="system"] .post-text.post [data-reader-font-lang="en"] {
    font-family: revert !important;
}

body[data-reader-font-zh="system"] .post-text.post [data-reader-font-lang="zh"] {
    font-family: revert !important;
}

body[data-reader-font-en-size="xs"] .post-text.post [data-reader-font-lang="en"] {
    font-size: calc(0.9rem * var(--reader-device-scale) * 0.8);
}
body[data-reader-font-en-size="s"] .post-text.post [data-reader-font-lang="en"] {
    font-size: calc(0.9rem * var(--reader-device-scale) * 1.0);
}
body[data-reader-font-en-size="m"] .post-text.post [data-reader-font-lang="en"] {
    font-size: calc(0.9rem * var(--reader-device-scale) * 1.1);
}
body[data-reader-font-en-size="l"] .post-text.post [data-reader-font-lang="en"] {
    font-size: calc(0.9rem * var(--reader-device-scale) * 1.2);
}
body[data-reader-font-en-size="xl"] .post-text.post [data-reader-font-lang="en"] {
    font-size: calc(0.9rem * var(--reader-device-scale) * 1.4);
}

body[data-reader-font-zh-size="xs"] .post-text.post [data-reader-font-lang="zh"] {
    font-size: calc(0.9rem * var(--reader-device-scale) * 0.8);
}
body[data-reader-font-zh-size="s"] .post-text.post [data-reader-font-lang="zh"] {
    font-size: calc(0.9rem * var(--reader-device-scale) * 1.0);
}
body[data-reader-font-zh-size="m"] .post-text.post [data-reader-font-lang="zh"] {
    font-size: calc(0.9rem * var(--reader-device-scale) * 1.1);
}
body[data-reader-font-zh-size="l"] .post-text.post [data-reader-font-lang="zh"] {
    font-size: calc(0.9rem * var(--reader-device-scale) * 1.2);
}
body[data-reader-font-zh-size="xl"] .post-text.post [data-reader-font-lang="zh"] {
    font-size: calc(0.9rem * var(--reader-device-scale) * 1.4);
}

body[data-reader-font-en-line="tight"] .post-text.post [data-reader-font-lang="en"] { line-height: 1.4; }
body[data-reader-font-en-line="normal"] .post-text.post [data-reader-font-lang="en"] { line-height: 1.6; }
body[data-reader-font-en-line="loose"] .post-text.post [data-reader-font-lang="en"] { line-height: 1.8; }
body[data-reader-font-en-line="wide"] .post-text.post [data-reader-font-lang="en"] { line-height: 2; }
body[data-reader-font-en-line="extra-wide"] .post-text.post [data-reader-font-lang="en"] { line-height: 2.25; }

body[data-reader-font-zh-line="tight"] .post-text.post [data-reader-font-lang="zh"] { line-height: 1.4; }
body[data-reader-font-zh-line="normal"] .post-text.post [data-reader-font-lang="zh"] { line-height: 1.6; }
body[data-reader-font-zh-line="loose"] .post-text.post [data-reader-font-lang="zh"] { line-height: 1.8; }
body[data-reader-font-zh-line="wide"] .post-text.post [data-reader-font-lang="zh"] { line-height: 2; }
body[data-reader-font-zh-line="extra-wide"] .post-text.post [data-reader-font-lang="zh"] { line-height: 2.25; }

/* =========================================
   Font Settings modal — reuses Reader data dialog styling
   ========================================= */
.reader-font-field {
    margin-top: 12px;
}

.reader-font-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
}

.reader-font-section-divider {
    margin: 18px 0 4px;
}

.reader-font-field label {
    display: block;
    margin-bottom: 5px;
    color: #696969;
    font-size: 12px;
    line-height: 1.4;
}

.reader-font-field select {
    width: 100%;
    height: 34px;
    box-sizing: border-box;
    padding: 0 8px;
    border: 1px solid #24242420;
    border-radius: 3px;
    background: #ffffff;
    color: #242424;
    font: inherit;
    cursor: pointer;
}

.reader-font-preview {
    margin-top: 16px;
    padding-top: 10px;
    border-top: 0;
    color: #696969;
    line-height: 1.5;
    text-align: center;
}
.reader-font-preview-en,
.reader-font-preview-zh {
    display: inline;
}
.reader-font-preview-note {
    color: #888888;
}