/* 新版阅读器样式 - 基于 tests/reader/styles.css 适配 */

/* 新版阅读器的根变量 */
:root {
  --reader-bg: #fff;
  --reader-fg: #1f2328;
  --reader-muted: #656d76;
  --reader-card: #f6f8fa;
  --reader-accent: #0969da;
  --reader-chip: #e7f3ff;
  --reader-border: #d0d7de;
  --reader-badge: #f0f6ff;
  --reader-progress: #0969da;
  --reader-content-w: 980px;
  --reader-toc-w: 260px;
  --reader-font-size: 16px;
  --reader-orig-font-size: 1rem; /* 默认字体大小，由 JavaScript 动态设置 */
}

/* 译注显示/隐藏功能 */
:root[data-show-translation="false"] .para.translation {
  display: none !important;
}

:root[data-show-translation="false"] .section-notes {
  display: none !important;
}

/* 连贯阅读：在隐藏译注且开启 reading-flow 时，原文采用更自然的中文断行 */
:root[data-show-translation="false"] .content--reader.reading-flow .para.original {
  white-space: normal;
  word-break: keep-all;
  line-break: loose;
  overflow-wrap: anywhere;
}

/* 章节内不分段（仅隐藏译注且 reading-flow 时启用） */
:root[data-show-translation="false"] .content--reader.reading-flow .paragraphs {
  display: block;
}

:root[data-show-translation="false"] .content--reader.reading-flow .para-row {
  display: inline;
}

:root[data-show-translation="false"] .content--reader.reading-flow .para.original {
  display: inline;
}

/* 在相邻原文之间插入空格用于自然衔接 */
:root[data-show-translation="false"] .content--reader.reading-flow .para-row + .para-row .para.original::before {
  content: " ";
}

/* 目录侧边栏滚动条美化 */
.toc-sidebar-content {
  /* Firefox 滚动条样式 */
  scrollbar-width: thin;
  scrollbar-color: var(--reader-border) transparent;
}

/* Webkit 滚动条样式 */
.toc-sidebar-content::-webkit-scrollbar {
  width: 6px;
}

.toc-sidebar-content::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 3px;
}

.toc-sidebar-content::-webkit-scrollbar-thumb {
  background-color: var(--reader-border);
  border-radius: 3px;
  transition: background-color 0.2s ease;
}

.toc-sidebar-content::-webkit-scrollbar-thumb:hover {
  background-color: var(--reader-muted);
}

/* 暗色模式下的滚动条适配 */
html.dark .toc-sidebar-content {
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

html.dark .toc-sidebar-content::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
}

html.dark .toc-sidebar-content::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

/* 章节卡片辉光效果 - 适配新版阅读器 */
.section-card.highlight {
  border-color: var(--reader-accent);
  box-shadow: 0 0 15px var(--accent-border-light);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* 暗色模式下的辉光效果 */
html.dark .section-card.highlight {
  border-color: var(--reader-accent);
  box-shadow: 0 0 15px var(--accent-shadow-light);
}

/* 横排/竖排布局功能 */
:root[data-layout="vertical"] .sections {
  --vpad-x: 12px;
  display: block;
  gap: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  max-width: 100vw;
  padding: 0;
}

:root[data-layout="vertical"] .sections .section-card {
  display: block;
  box-sizing: border-box;
  /* width: calc(100% - var(--vpad-x) * 2); */
  max-width: 100%;
  height: 70vh;
  max-height: 70vh;
  overflow: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  border: 1px solid var(--reader-border);
  border-radius: 8px;
  background: var(--reader-bg);
  padding: 0;
  margin: 0 0 18px;
}

:root[data-layout="horizontal"] .sections .section-card {
  border: 1px solid var(--reader-border);
  border-radius: 8px;
  margin-bottom: 18px;
  background: var(--reader-bg);
}

:root[data-layout="horizontal"] .sections .section-notes { 
  padding: 10px; 
}

:root[data-layout="horizontal"] .sections .paragraphs { 
  padding: 10px; 
}

:root[data-layout="vertical"] .sections .section-notes {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 10px;
}

:root[data-layout="vertical"] .sections .paragraphs {
  display: block;
  padding: 10px;
}

:root[data-layout="vertical"] .sections .para {
  writing-mode: vertical-rl;
  text-orientation: mixed;	
}

/* 竖排模式的排版 */
:root[data-layout="vertical"] .para.original {
  letter-spacing: var(--current-letter-spacing-v);
  line-height: var(--current-line-height-v);
}

/* 标点符号样式 - 使用sub标签 */
.para.original sub {
  vertical-align: baseline;  /* 重置sub的下标效果 */
  font-size: inherit;        /* 重置sub的字体大小 */
  transition: all 0.3s ease;
}

/* 竖排模式下的标点处理（古籍风格） */
:root[data-layout="vertical"] .para.original sub {
  letter-spacing: -0.1em;
  font-size: 0.6em;
}

/* 横排模式保持正常 */
:root[data-layout="horizontal"] .para.original sub {
  letter-spacing: -0.1em;
  font-size: 0.6em;
}

/* 竖排下章节标题样式 */
:root[data-layout="vertical"] .sections .section-title {
  border-left: none;
  border-top: 6px solid var(--reader-accent);
  margin: 0;
  padding: 18px 8px;
  background-color: var(--reader-card);
}

/* 竖排下章节标题包装器 */
:root[data-layout="vertical"] .sections .chapter-title-wrapper {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* 竖排 + 连贯阅读 */
:root[data-layout="vertical"][data-show-translation="false"] .content--reader.reading-flow .paragraphs {
  display: block;
}

:root[data-layout="vertical"][data-show-translation="false"] .content--reader.reading-flow .para-row {
  display: inline;
}

:root[data-layout="vertical"][data-show-translation="false"] .content--reader.reading-flow .para.original {
  display: inline;
}

:root[data-layout="vertical"][data-show-translation="false"] .content--reader.reading-flow .para.translation {
  display: none !important;
}

:root[data-layout="vertical"][data-show-translation="false"] .content--reader.reading-flow .para-row + .para-row .para.original::before {
  content: ""; /* 移除空格，避免大段空白 */
}

/* 竖排滚动条美化 */
:root[data-layout="vertical"] .sections .section-card {
  scroll-behavior: smooth;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: var(--shadow-strong-light) transparent;
}

:root[data-layout="vertical"] .sections .section-card::-webkit-scrollbar {
  background: transparent;
  height: 0;
  transition: height .2s ease;
}

:root[data-layout="vertical"] .sections .section-card:hover::-webkit-scrollbar {
  height: 8px;
}

:root[data-layout="vertical"] .sections .section-card::-webkit-scrollbar-track {
  background: transparent;
}

:root[data-layout="vertical"] .sections .section-card::-webkit-scrollbar-thumb {
  background: var(--shadow-stronger-light);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

:root[data-layout="vertical"] .sections .section-card:hover::-webkit-scrollbar-thumb {
  background: var(--shadow-strong-light);
}

html.dark {
  --reader-bg: #0e1116;
  --reader-fg: #c9d1d9;
  --reader-muted: #9aa4ad;
  --reader-card: #161b22;
  --reader-accent: #58a6ff;
  --reader-chip: #17202a;
  --reader-border: #2d333b;
  --reader-badge: #0b1725;
  --reader-progress: #58a6ff;
}

/* 新版布局结构 */
.layout {
  display: flex;
  gap: 16px;
  max-width: calc(var(--reader-content-w) + var(--reader-toc-w) + 48px);
  margin: 16px auto;
  padding: 0 16px;
  overflow-x: hidden;
  box-sizing: border-box;
	margin-bottom: 6rem;
}

/* 竖排时的布局约束 */
:root[data-layout="vertical"] .layout {
  max-width: 100vw;
  overflow-x: hidden;
}

.layout--pc {
  align-items: flex-start;
}

.layout--reader {
  display: flex;
  gap: 16px;
  max-width: calc(var(--reader-content-w) + var(--reader-toc-w) + 48px);
  margin: 16px auto;
  padding: 0 16px;
  overflow-x: hidden;
  align-items: flex-start;
}

.toc--reader {
  position: sticky;
  top: 64px;
  height: calc(100vh - 80px);
  overflow: auto;
  flex: 0 0 var(--reader-toc-w);
  border: 1px solid var(--reader-border);
  border-radius: 8px;
  padding: 10px;
  background: var(--reader-card);
}

.toc--reader .toc-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--reader-muted);
  padding: 4px 6px;
}

.toc--reader .toc-list .toc-item {
  display: block;
  padding: 6px 8px;
  border-radius: 8px;
  color: var(--reader-fg);
  text-decoration: none;
}

.toc--reader .toc-list .toc-item:hover {
  background: var(--reader-badge);
}

.content {
  flex: 1;
  min-width: 0;
  max-width: 100vw;
  overflow-x: hidden;
}

.content--pc {
  display: block;
}

.content--reader {
  flex: 1;
  min-width: 0;
  max-width: 100vw;
  overflow-x: hidden;
}

/* 竖排时的内容区域约束 */
:root[data-layout="vertical"] .content--reader {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* 标题区域 */
.title-area {
  margin-bottom: 20px;
}

.title-area h1 {
  margin: 0;
  font-size: 28px;
  font-family: cursive, serif;
  color: var(--reader-fg);
}

.title-area .meta {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--reader-muted);
  flex-wrap: nowrap;
  overflow-x: auto;
  white-space: nowrap;
}

.title-area .meta .badge {
  background: var(--reader-badge);
  color: var(--reader-accent);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--reader-border);
}

.title-area .meta .author {
  font-size: 13px;
}

.title-area .meta .info-head {
  font-weight: 800;
  margin-left: 16px;
  color: var(--reader-fg);
  font-size: 12px;
}

.title-area .meta .chips {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  white-space: nowrap;
}

.title-area .meta .chips .chip {
  background: var(--reader-chip);
  color: var(--reader-accent);
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--reader-border);
  font-size: 12px;
}

/* 信息区域 */
.info--reader {
  margin-bottom: 20px;
}

.info-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.background {
  color: var(--reader-muted);
  font-size: 14px;
  line-height: 1.6;
}


/* 背景信息专用样式，不参与竖排变化 */
.background-info {
  color: var(--reader-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* 章节区域 */
.sections--reader {
  display: grid;
  gap: 18px;
}

.section-card {
  border: 1px solid var(--reader-border);
  border-radius: 8px;
  background: var(--reader-bg);
  overflow: hidden;
}

.section-title {
  font-size: 20px;
  margin: 0;
  border-left: 6px solid var(--reader-accent);
  padding: 12px 18px;
  font-family: cursive, "Songti SC", "STSong", "SimSun", serif;
  background: var(--reader-card);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.section-notes {
  color: var(--reader-muted);
  font-size: 13px;
  padding: 10px 18px;
  background: var(--reader-card);
}

.paragraphs {
  padding: 18px;
}

.para-row {
  display: block;
  /* margin-bottom: 16px; */
}

.para-row:last-child {
  margin-bottom: 0;
}

.para.original {
  font-size: var(--reader-orig-font-size);
  color: var(--reader-fg);
  margin-bottom: 0px;
  /* 使用CSS变量实现动态排版 */
  letter-spacing: var(--current-letter-spacing-h);
  line-height: var(--current-line-height-h);
}

.para.translation {
  color: var(--reader-muted);
  font-size: 14px;
  line-height: 1.5;
	padding: 0 4px;
	border-right: 1px solid var(--reader-border);
}

/* 译注显示控制 */
:root[data-show-translation="false"] .para.translation {
  display: none;
}

/* 搜索高亮 */
mark {
  background: #ffeb3b;
  color: #000;
  padding: 1px 2px;
  border-radius: 2px;
}

/* 响应式适配 */
@media (max-width: 1024px) {
  .layout--reader {
    max-width: 100%;
  }
}

@media (max-width: 720px) {
  .toc--reader {
    display: none;
  }
  
  .layout--reader {
    flex-direction: column;
    padding: 0 12px;
  }
  
  .title-area .meta {
    flex-direction: row;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
  }
}

/* 竖排布局支持 - 使用grid布局解决溢出问题 */
:root[data-layout="vertical"] .sections--reader {
  display: grid !important;
  overflow-x: hidden;
  overflow-y: auto;
  max-width: 100vw;
  box-sizing: border-box;
  gap: 18px;
}

:root[data-layout="vertical"] .section-card {
  width: 100%;
  height: 50vh;
  max-height: 50vh;
  overflow: auto;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  margin-bottom: 18px;
}

:root[data-layout="vertical"] .section-title {
  border-left: none;
  border-top: 6px solid var(--reader-accent);
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

:root[data-layout="vertical"] .section-notes:not(.info--reader .section-notes) {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

:root[data-layout="vertical"] .paragraphs {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 10px; /* 确保与其他竖排样式一致 */
}

:root[data-layout="vertical"] .para {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* 连贯阅读模式 */
:root[data-show-translation="false"] .content--reader.reading-flow .paragraphs {
  display: block;
}

:root[data-show-translation="false"] .content--reader.reading-flow .para-row {
  display: inline;
}

:root[data-show-translation="false"] .content--reader.reading-flow .para.original {
  display: inline;
  white-space: normal;
  word-break: break-all;
  line-break: loose;
  overflow-wrap: anywhere;
}

:root[data-show-translation="false"] .content--reader.reading-flow .para-row + .para-row .para.original::before {
  content: ""; /* 移除空格，避免大段空白 */
}

/* 章节标题包装器 - 固定在卡片顶部 */
.chapter-title-wrapper {
  position: sticky;
  top: 0;
  inset-block-start: 0;
  z-index: 2;
  background: var(--reader-card);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
}

/* 竖排模式下的标题包装器 */
:root[data-layout="vertical"] .chapter-title-wrapper {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

/* 播放按钮在不同布局模式下的内边距 */
.play-button {
  padding-right: 30px; /* 横排模式默认 */
}

:root[data-layout="vertical"] .play-button {
  padding-right: 0;
  padding-bottom: 30px; /* 竖排模式 */
}

/* 背景信息专用样式，不参与竖排变化 */
.background-info {
  color: var(--reader-muted);
  font-size: 14px;
  line-height: 1.6;
}

.background-info.clamp {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bg-toggle-info {
  margin-top: 8px;
  padding: 4px 8px;
  background: var(--reader-card);
  border: 1px solid var(--reader-border);
  border-radius: 4px;
  color: var(--reader-muted);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bg-toggle-info:hover {
  background: var(--reader-badge);
  color: var(--reader-accent);
}