/* Custom Reader Typography, Themes & Focus Reading Mode */
:root {
  color-scheme: dark;
  --reader-font-size: 18px;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #0f172a;
}
::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* Focus Mode (Chế độ Đọc tập trung) */
body.reader-focus-mode #app-top-header,
body.reader-focus-mode #app-topic-bar,
body.reader-focus-mode #article-sidebar,
body.reader-focus-mode #btn-toggle-sidebar,
body.reader-focus-mode #reader-badges,
body.reader-focus-mode #reader-matched {
  display: none !important;
}

/* Reader Scroll Theme Variants */
#reader-scroll.theme-dark {
  background-color: #111621;
  color: #dce4ee;
}
#reader-scroll.theme-dark #reader-title {
  color: #f8fafc;
}
#reader-scroll.theme-dark .markdown-body {
  color: #dce4ee;
}
#reader-scroll.theme-dark .markdown-body h1,
#reader-scroll.theme-dark .markdown-body h2,
#reader-scroll.theme-dark .markdown-body h3,
#reader-scroll.theme-dark .markdown-body h4 {
  color: #f8fafc;
  border-color: #1e293b;
}

/* Sepia Book Theme (Giấy ấm dịu mắt) */
#reader-scroll.theme-sepia {
  background-color: #f4ecd8;
  color: #2c2218;
}
#reader-scroll.theme-sepia #reader-title {
  color: #1c140d;
}
#reader-scroll.theme-sepia #reader-subtitle {
  color: #7c4a15 !important;
}
#reader-scroll.theme-sepia #reader-meta-bar {
  color: #5c4b37;
  border-color: #decbb1;
}
#reader-scroll.theme-sepia #reader-likes {
  color: #b45309 !important;
}
#reader-scroll.theme-sepia #reader-collects {
  color: #0369a1 !important;
}
#reader-scroll.theme-sepia .markdown-body {
  color: #2c2218;
}
#reader-scroll.theme-sepia .markdown-body h1,
#reader-scroll.theme-sepia .markdown-body h2,
#reader-scroll.theme-sepia .markdown-body h3,
#reader-scroll.theme-sepia .markdown-body h4 {
  color: #1a120b;
  border-color: #decbb1;
}
#reader-scroll.theme-sepia .markdown-body blockquote {
  background: rgba(212, 190, 158, 0.35);
  border-left-color: #b45309;
  color: #3d2f21;
}
#reader-scroll.theme-sepia .markdown-body :not(pre) > code {
  background: rgba(180, 145, 100, 0.22);
  color: #8c2d19;
}
#reader-scroll.theme-sepia .markdown-body a {
  color: #1d4ed8;
}
#reader-scroll.theme-sepia .markdown-body th {
  background: #e6d7be;
  color: #1c140d;
}
#reader-scroll.theme-sepia .markdown-body th,
#reader-scroll.theme-sepia .markdown-body td {
  border-color: #cbb595;
}

/* Light Daylight Theme (Sáng) */
#reader-scroll.theme-light {
  background-color: #f8fafc;
  color: #1e293b;
}
#reader-scroll.theme-light #reader-title {
  color: #0f172a;
}
#reader-scroll.theme-light #reader-subtitle {
  color: #2563eb !important;
}
#reader-scroll.theme-light #reader-meta-bar {
  color: #475569;
  border-color: #e2e8f0;
}
#reader-scroll.theme-light #reader-likes {
  color: #d97706 !important;
}
#reader-scroll.theme-light #reader-collects {
  color: #0284c7 !important;
}
#reader-scroll.theme-light .markdown-body {
  color: #1e293b;
}
#reader-scroll.theme-light .markdown-body h1,
#reader-scroll.theme-light .markdown-body h2,
#reader-scroll.theme-light .markdown-body h3,
#reader-scroll.theme-light .markdown-body h4 {
  color: #0f172a;
  border-color: #e2e8f0;
}
#reader-scroll.theme-light .markdown-body blockquote {
  background: #eff6ff;
  border-left-color: #3b82f6;
  color: #334155;
}
#reader-scroll.theme-light .markdown-body :not(pre) > code {
  background: #e2e8f0;
  color: #0f172a;
}
#reader-scroll.theme-light .markdown-body a {
  color: #2563eb;
}
#reader-scroll.theme-light .markdown-body th {
  background: #f1f5f9;
  color: #0f172a;
}
#reader-scroll.theme-light .markdown-body th,
#reader-scroll.theme-light .markdown-body td {
  border-color: #cbd5e1;
}

/* Core Markdown Typography */
.markdown-body {
  color: #dce4ee;
  line-height: 1.88;
  font-size: var(--reader-font-size, 18px);
  letter-spacing: 0.01em;
  word-wrap: break-word;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
  color: #f8fafc;
  font-weight: 700;
  margin-top: 1.75em;
  margin-bottom: 0.75em;
  line-height: 1.38;
  scroll-margin-top: 1.25rem;
}

.markdown-body h1 {
  font-size: 1.6em;
  border-bottom: 1px solid #1e293b;
  padding-bottom: 0.4rem;
}

.markdown-body h2 {
  font-size: 1.35em;
  border-bottom: 1px solid #1e293b;
  padding-bottom: 0.3rem;
}

.markdown-body h3 {
  font-size: 1.16em;
}

.markdown-body p {
  margin-bottom: 1.2em;
}

.markdown-body ul,
.markdown-body ol {
  margin-bottom: 1.2em;
  padding-left: 1.65em;
}

.markdown-body ul {
  list-style-type: disc;
}

.markdown-body ol {
  list-style-type: decimal;
}

.markdown-body li {
  margin-bottom: 0.42em;
}

.markdown-body blockquote {
  border-left: 4px solid #3b82f6;
  background: rgba(30, 41, 59, 0.55);
  padding: 0.85rem 1.15rem;
  margin: 1.3rem 0;
  border-radius: 0 0.5rem 0.5rem 0;
  color: #cbd5e1;
}

.markdown-body pre {
  background: #0b0f19 !important;
  color: #e2e8f0 !important;
  border: 1px solid #1e293b;
  border-radius: 0.65rem;
  padding: 1.05rem 1.2rem;
  overflow-x: auto;
  margin: 1.35rem 0;
  line-height: 1.65;
}

.markdown-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.86em;
}

.markdown-body :not(pre) > code {
  background: rgba(51, 65, 85, 0.55);
  color: #93c5fd;
  padding: 0.18em 0.42em;
  border-radius: 0.3rem;
}

.markdown-body img {
  max-width: 100%;
  height: auto;
  border-radius: 0.55rem;
  margin: 1.2rem auto;
  display: block;
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.markdown-body a {
  color: #60a5fa;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.markdown-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.3rem 0;
  font-size: 0.92em;
}

.markdown-body th,
.markdown-body td {
  border: 1px solid #334155;
  padding: 0.6rem 0.8rem;
  text-align: left;
}

.markdown-body th {
  background: #1e293b;
  color: #f8fafc;
}

/* ============================================================================
   Mobile Reader & Responsive Split-View Support (< 768px)
   ============================================================================ */
@supports (height: 100dvh) {
  body {
    height: 100dvh;
  }
}

@media (max-width: 767px) {
  /* 1. Default Mobile State: Show Article List full-screen, hide Reader pane */
  body:not(.mobile-reading-active) #article-sidebar {
    display: flex !important;
    width: 100% !important;
    border-right: none !important;
  }
  body:not(.mobile-reading-active) #reader-main {
    display: none !important;
  }

  /* 2. Active Mobile Reader State: Hide List + Top Bars so Reader gets 100% screen */
  body.mobile-reading-active #article-sidebar,
  body.mobile-reading-active #app-top-header,
  body.mobile-reading-active #app-topic-bar {
    display: none !important;
  }
  body.mobile-reading-active #reader-main {
    display: flex !important;
    width: 100% !important;
    flex: 1 1 auto !important;
  }
  body.mobile-reading-active #mobile-back-to-list-fab {
    display: inline-flex !important;
  }

  /* 3. Highlight the top-left Back-to-List button in mobile reader toolbar */
  body.mobile-reading-active #btn-toggle-sidebar {
    background-color: rgba(37, 99, 235, 0.25) !important;
    border-color: rgba(59, 130, 246, 0.55) !important;
    color: #93c5fd !important;
    font-weight: 600 !important;
  }

  /* 4. Mobile Table of Contents Drawer (Slide-over instead of squeezing text) */
  #reader-toc-sidebar {
    position: fixed !important;
    top: 46px !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 82vw !important;
    max-width: 300px !important;
    z-index: 45 !important;
    background-color: rgba(15, 23, 42, 0.98) !important;
    backdrop-filter: blur(12px);
    box-shadow: -8px 0 28px rgba(0, 0, 0, 0.75);
  }

  /* 5. Mobile Markdown readability adjustments */
  .markdown-body {
    font-size: calc(var(--reader-font-size, 18px) - 1px);
    line-height: 1.78;
  }
  .markdown-body pre {
    padding: 0.85rem 0.95rem;
    font-size: 0.84em;
  }
  .markdown-body table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}