/* MyTropes Reader Mode — Full-screen e-reader */
*, *::before, *::after { box-sizing: border-box; }

body.reader-body {
    background: #302A2F;
    color: #e8e0d5;
    font-family: 'Georgia', 'Times New Roman', serif;
    margin: 0;
    overflow-x: hidden;
}
body.reader-light {
    background: #f5f0eb;
    color: #2a2217;
}

/* ── Top Bar ─────────────────────────────────────────────────────────── */
.rd-topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 200;
    height: 52px;
    background: #302A2F;
    border-bottom: 1px solid #3d3238;
    display: flex; align-items: center; padding: 0 16px; gap: 12px;
}
body.reader-light .rd-topbar {
    background: #f5f0eb;
    border-bottom: 1px solid #ddd;
}
.rd-topbar__back {
    color: #E0C5DB; text-decoration: none; font-size: 0.85rem;
    display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.rd-topbar__back:hover { color: #C5A6BB; }
.rd-topbar__title {
    flex: 1; text-align: center;
    font-size: 0.85rem; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rd-topbar__controls { display: flex; align-items: center; gap: 8px; }
.rd-topbar__btn {
    background: none; border: 1px solid #4a3a44; color: #aaa;
    border-radius: 6px; padding: 4px 10px; font-size: 0.8rem; cursor: pointer;
    transition: all 0.2s;
}
.rd-topbar__btn:hover { border-color: #E0C5DB; color: #E0C5DB; }
body.reader-light .rd-topbar__btn { border-color: #ccc; color: #555; }
body.reader-light .rd-topbar__btn:hover { border-color: #A888A0; color: #A888A0; }

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.rd-sidebar {
    position: fixed; top: 52px; left: 0; bottom: 0; z-index: 150;
    width: 260px;
    background: #2d2429;
    border-right: 1px solid #3d3238;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}
body.reader-light .rd-sidebar {
    background: #ede8e0;
    border-right: 1px solid #ccc;
}
.rd-sidebar.open { transform: translateX(0); }

.rd-sidebar__head {
    padding: 16px 16px 8px;
    font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase; color: #666;
}
.rd-chapter-list { padding: 0 8px 16px; }
.rd-chapter-item {
    display: block; padding: 10px 12px; border-radius: 8px; text-decoration: none;
    color: #bbb; font-size: 0.82rem; line-height: 1.4; cursor: pointer;
    transition: background 0.15s;
    border: none; background: none; width: 100%; text-align: left;
}
.rd-chapter-item:hover { background: #3d3238; color: #eee; }
.rd-chapter-item.current { background: #3d2838; color: #E0C5DB; font-weight: 600; }
.rd-chapter-item.completed { color: #666; }
.rd-chapter-item .rd-ch-num { font-size: 0.7rem; color: #555; display: block; margin-bottom: 2px; }
body.reader-light .rd-chapter-item { color: #555; }
body.reader-light .rd-chapter-item:hover { background: #ddd; color: #222; }
body.reader-light .rd-chapter-item.current { background: #f0e8d0; color: #A888A0; }

/* ── Main reading area ────────────────────────────────────────────────── */
.rd-main {
    max-width: 720px;
    margin: 0 auto;
    padding: 80px 24px 160px;
    transition: font-size 0.2s;
}

.rd-chapter-title {
    font-size: 1.5rem; font-weight: 700;
    color: #fff; margin-bottom: 8px; line-height: 1.3;
}
body.reader-light .rd-chapter-title { color: #1a1208; }

.rd-chapter-meta {
    font-size: 0.75rem; color: #555; margin-bottom: 36px;
    letter-spacing: 1px; text-transform: uppercase;
}

.rd-content {
    font-size: 1.1rem; line-height: 1.9;
    color: #d8d0c5;
}
body.reader-light .rd-content { color: #2a2217; }
.rd-content p { margin-bottom: 1.4em; }
.rd-content p:first-child::first-letter {
    font-size: 3.5rem; float: left; line-height: 0.8;
    margin: 0.05em 0.08em 0 0; color: #E0C5DB; font-family: Georgia, serif;
}

/* Font size modifier classes */
.rd-fs-s .rd-content { font-size: 0.95rem; }
.rd-fs-m .rd-content { font-size: 1.1rem; }
.rd-fs-l .rd-content { font-size: 1.28rem; }

/* ── Chapter nav bar (bottom) ─────────────────────────────────────────── */
.rd-chapnav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
    height: 56px;
    background: #302A2F;
    border-top: 1px solid #1e1e1e;
    display: flex; align-items: center; justify-content: center; gap: 16px;
    padding: 0 16px;
}
body.reader-light .rd-chapnav {
    background: #f5f0eb;
    border-top: 1px solid #ddd;
}
.rd-chapnav__btn {
    background: none; border: 1px solid #2a2a2a; color: #aaa;
    border-radius: 20px; padding: 6px 18px; font-size: 0.82rem; cursor: pointer;
    transition: all 0.2s; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.rd-chapnav__btn:hover { border-color: #E0C5DB; color: #E0C5DB; }
.rd-chapnav__btn:disabled { opacity: 0.3; cursor: not-allowed; }
.rd-chapnav__label { font-size: 0.8rem; color: #555; min-width: 80px; text-align: center; }
body.reader-light .rd-chapnav__btn { border-color: #ccc; color: #555; }

/* Progress bar under topbar */
.rd-progress-line {
    position: fixed; top: 52px; left: 0; z-index: 199;
    height: 2px; background: #E0C5DB; transition: width 0.5s ease;
}

/* ── Floating character card ─────────────────────────────────────────── */
.rd-char-float {
    position: fixed; bottom: 70px; right: 20px; z-index: 180;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.rd-char-float__portrait {
    width: 56px; height: 56px; border-radius: 50%;
    background-size: cover; background-position: top;
    border: 2px solid #E0C5DB;
    cursor: pointer; transition: transform 0.2s;
    box-shadow: 0 4px 16px #00000088;
}
.rd-char-float__portrait:hover { transform: scale(1.05); }
.rd-char-float__label {
    background: #E0C5DB; color: #000;
    font-size: 0.7rem; font-weight: 700; border-radius: 10px; padding: 3px 8px;
    white-space: nowrap; cursor: pointer; box-shadow: 0 2px 8px #00000066;
}

/* ── Chat panel ─────────────────────────────────────────────────────── */
.rd-chat-panel {
    position: fixed; top: 52px; right: 0; bottom: 56px; z-index: 190;
    width: 380px; max-width: 100vw;
    background: #111;
    border-left: 1px solid #1e1e1e;
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.35s ease;
}
.rd-chat-panel.open { transform: translateX(0); }
body.reader-light .rd-chat-panel { background: #ede8e0; border-left: 1px solid #ccc; }

.rd-chat-panel__header {
    padding: 14px 16px; border-bottom: 1px solid #3d3238;
    display: flex; align-items: center; gap: 12px;
}
body.reader-light .rd-chat-panel__header { border-bottom: 1px solid #ccc; }
.rd-chat-panel__portrait {
    width: 36px; height: 36px; border-radius: 50%;
    background-size: cover; background-position: top; flex-shrink: 0;
}
.rd-chat-panel__name { flex: 1; font-size: 0.9rem; font-weight: 700; color: #eee; }
body.reader-light .rd-chat-panel__name { color: #222; }
.rd-chat-panel__close {
    background: none; border: none; color: #888; font-size: 1.2rem;
    cursor: pointer; padding: 4px;
}
.rd-chat-panel__close:hover { color: #eee; }

.rd-chat-messages {
    flex: 1; overflow-y: auto; padding: 16px;
    display: flex; flex-direction: column; gap: 12px;
}
.rd-msg {
    max-width: 80%; border-radius: 12px; padding: 10px 14px; font-size: 0.88rem; line-height: 1.5;
    font-family: 'Montserrat', sans-serif;
}
.rd-msg.char { background: #3d3238; color: #ddd; align-self: flex-start; border-bottom-left-radius: 2px; }
.rd-msg.user { background: #E0C5DB22; color: #e8e0d5; align-self: flex-end; border-bottom-right-radius: 2px; border: 1px solid #E0C5DB44; }
body.reader-light .rd-msg.char { background: #ddd; color: #222; }
body.reader-light .rd-msg.user { background: #f0e8d0; color: #2a2217; border-color: #E0C5DB; }

.rd-chat-input-wrap {
    padding: 12px 16px; border-top: 1px solid #1e1e1e;
    display: flex; gap: 8px;
}
body.reader-light .rd-chat-input-wrap { border-top: 1px solid #ccc; }
.rd-chat-input {
    flex: 1; background: #3d3238; border: 1px solid #2a2a2a; color: #eee;
    border-radius: 20px; padding: 8px 14px; font-size: 0.85rem;
    resize: none; outline: none; font-family: 'Montserrat', sans-serif;
    max-height: 100px; overflow-y: auto;
}
body.reader-light .rd-chat-input { background: #fff; border-color: #ccc; color: #222; }
.rd-chat-send {
    background: #E0C5DB; border: none; border-radius: 20px; padding: 8px 16px;
    color: #000; font-weight: 700; font-size: 0.85rem; cursor: pointer; flex-shrink: 0;
    transition: background 0.2s;
}
.rd-chat-send:hover { background: #C5A6BB; }
.rd-chat-send:disabled { background: #444; color: #666; cursor: not-allowed; }

/* ── End-of-novel overlay ────────────────────────────────────────────── */
.rd-end-overlay {
    position: fixed; inset: 0; z-index: 300;
    background: #000000cc; backdrop-filter: blur(4px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.8s;
}
.rd-end-overlay.show { opacity: 1; pointer-events: all; }
.rd-end-overlay__portrait {
    width: 120px; height: 120px; border-radius: 50%; background-size: cover;
    border: 3px solid #E0C5DB; margin-bottom: 24px;
    box-shadow: 0 0 40px #E0C5DB44;
}
.rd-end-overlay__msg {
    color: #e8e0d5; font-size: 1.2rem; font-style: italic; max-width: 480px;
    text-align: center; margin-bottom: 28px; line-height: 1.6;
}
.rd-end-overlay__cta {
    background: #E0C5DB; color: #000; border: none; border-radius: 50px;
    padding: 14px 36px; font-size: 1rem; font-weight: 700; cursor: pointer;
    text-decoration: none; display: inline-block;
}

/* ── Font settings panel ─────────────────────────────────────────────── */
.rd-settings-panel {
    position: fixed; top: 52px; right: 0; z-index: 185;
    background: #2d2429; border: 1px solid #3d3238; border-radius: 0 0 0 10px;
    padding: 14px 18px; display: none;
    font-family: 'Montserrat', sans-serif;
}
.rd-settings-panel.open { display: block; }
body.reader-light .rd-settings-panel { background: #ede8e0; border-color: #ccc; }
.rd-settings-panel label { font-size: 0.75rem; color: #888; display: block; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 1px; }
.rd-font-btns { display: flex; gap: 6px; margin-bottom: 12px; }
.rd-font-btn {
    background: #3d3238; border: 1px solid #4a3a44; color: #aaa;
    border-radius: 6px; padding: 4px 12px; cursor: pointer; font-size: 0.8rem;
    transition: all 0.2s;
}
.rd-font-btn.active, .rd-font-btn:hover { background: #E0C5DB; color: #000; border-color: #E0C5DB; }
.rd-theme-toggle {
    background: #3d3238; border: 1px solid #4a3a44; color: #aaa;
    border-radius: 6px; padding: 6px 14px; cursor: pointer; font-size: 0.8rem; width: 100%;
    transition: all 0.2s; text-align: center;
}
.rd-theme-toggle:hover { border-color: #E0C5DB; color: #E0C5DB; }

/* ── Sidebar overlay (mobile) ────────────────────────────────────────── */
.rd-sidebar-overlay {
    display: none; position: fixed; inset: 0; z-index: 140;
    background: #00000077;
}
@media (max-width: 768px) {
    .rd-chat-panel { width: 100vw; }
    .rd-sidebar-overlay { display: block; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
    .rd-sidebar.open ~ .rd-sidebar-overlay { opacity: 1; pointer-events: all; }
}