/**
 * responsive.css - 响应式布局样式
 * 所有屏幕尺寸都使用全屏单页模式
 */

/* ========================================
   覆盖全局CSS变量 - 强制全屏
   ======================================== */

:root {
  --book-width: 100vw !important;
  --book-height: 100vh !important;
}

/* ========================================
   HTML/Body 全屏基础
   ======================================== */

html, body {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}

body {
  overflow-y: auto !important;
}

/* ========================================
   全局全屏单页模式
   ======================================== */

/* 隐藏左页，只显示右页 */
.page-left {
  display: none !important;
  width: 0 !important;
  flex: 0 !important;
  visibility: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

.page-right {
  flex: 1 !important;
  width: 100% !important;
  height: 100% !important;
  border-left: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  position: relative !important;
}

/* 应用容器全屏 */
.app-container {
  padding: 0 !important;
  min-height: 100vh !important;
  width: 100vw !important;
  box-sizing: border-box;
  display: block !important;
  background: var(--color-paper) !important;
  opacity: 1 !important;
  transform: none !important;
}

/* 书籍容器全屏 */
.book-container {
  width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  perspective: none !important;
  transform-style: flat !important;
}

/* 内容页全屏 */
.book-content {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  border-radius: 0 !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* 确保 hidden 类能正确隐藏内容页 */
.book-content.hidden {
  display: none !important;
}

/* 目录全屏 */
.book-toc {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  border-radius: 0 !important;
  z-index: var(--z-modal);
  display: flex !important;
  flex-direction: column !important;
  background-color: var(--color-paper) !important;
  overflow: hidden !important;
}

/* 确保 hidden 类能正确隐藏目录 */
.book-toc.hidden {
  display: none !important;
}

.toc-header {
  flex-shrink: 0;
  padding: var(--spacing-lg) var(--spacing-xl);
}

.toc-content {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* 和 toc-header 使用完全相同的左右内边距 */
  padding-left: var(--spacing-xl) !important;
  padding-right: var(--spacing-xl) !important;
  padding-top: var(--spacing-lg);
  padding-bottom: 20px;
  min-height: 0 !important;
  width: 100%;
  height: auto !important;
  max-height: none !important;
  box-sizing: border-box;
}

/* 目录分类区块 - 完全移除额外边距 */
.toc-section {
  margin: 0 0 var(--spacing-xl) 0 !important;
  padding: 0 !important;
}

/* 目录分类标题 */
.toc-section-title {
  margin: 0 0 var(--spacing-md) 0 !important;
  padding: 0 !important;
}

/* 章节列表 - 完全移除列表缩进 */
.toc-chapter-list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* 章节项 */
.toc-chapter-item {
  margin: 0 0 var(--spacing-sm) 0 !important;
  padding: 0 !important;
}

/* 章节链接 */
.toc-chapter-link {
  padding: var(--spacing-sm) 0 !important;
  margin: 0 !important;
}

/* 封面全屏 */
.book-cover {
  width: 100vw !important;
  height: 100vh !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 100 !important;
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.book-cover.hidden {
  display: none !important;
}

.cover-front {
  border-radius: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.cover-spine {
  display: none !important;
}

/* 页面内部布局 */
.page-inner {
  padding: var(--spacing-lg);
  padding-bottom: calc(var(--spacing-lg) + 70px);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 内容区域滚动 */
.page-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

/* 隐藏书页边缘装饰 */
.page-edge {
  display: none;
}

/* ========================================
   导航栏 - 固定在底部
   ======================================== */

.book-navigation {
  position: fixed !important;
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: auto !important;
  background-color: var(--color-paper);
  border-top: 1px solid var(--border-color-light);
  box-shadow: 0 -2px 10px var(--color-shadow-light);
  z-index: var(--z-sticky);
  pointer-events: auto;
  display: flex !important;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  gap: var(--spacing-md);
}

/* 确保 hidden 类能正确隐藏导航栏 */
.book-navigation.hidden {
  display: none !important;
}

.nav-btn {
  position: static !important;
  transform: none !important;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  border-radius: var(--radius-sm);
}

.nav-prev,
.nav-next {
  position: static !important;
}

.nav-icon {
  font-size: var(--font-size-xl);
}

.nav-info {
  position: static !important;
  transform: none !important;
  flex-direction: row;
  gap: var(--spacing-sm);
}

.nav-toc-btn {
  padding: var(--spacing-sm) var(--spacing-md);
}

.nav-chapter {
  font-size: var(--font-size-sm);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========================================
   简化装饰元素
   ======================================== */

/* 隐藏书页纹理效果 */
.page::before,
.page::after {
  display: none !important;
}

/* 隐藏书页弯曲效果 */
.page-curl,
.page-curl::before,
.page-curl::after {
  display: none !important;
}

/* 简化书页阴影 */
.page,
.page-left,
.page-right {
  box-shadow: none !important;
}

/* 禁用复杂的3D变换 */
.book-container {
  perspective: none;
  transform-style: flat;
}

/* 禁用翻页动画 */
.page-flip-container {
  display: none !important;
}

.flip-to-left,
.flip-to-right {
  animation: none !important;
}

/* ========================================
   小屏手机 (480px 以下)
   ======================================== */

@media screen and (max-width: 480px) {
  :root {
    --font-size-base: 0.875rem;
    --font-size-md: 0.9375rem;
    --font-size-lg: 1rem;
    --font-size-xl: 1.125rem;
    --font-size-2xl: 1.25rem;
    --font-size-3xl: 1.5rem;
    --font-size-4xl: 1.875rem;
    --padding-page: 1rem;
  }
  
  .cover-title {
    font-size: var(--font-size-2xl);
  }
  
  .chapter-title {
    font-size: var(--font-size-lg);
  }
  
  .nav-chapter {
    max-width: 100px;
  }
}

/* ========================================
   中等屏幕 (481px - 1199px)
   ======================================== */

@media screen and (min-width: 481px) and (max-width: 1199px) {
  :root {
    --font-size-base: 1rem;
    --font-size-md: 1.125rem;
    --font-size-lg: 1.25rem;
    --padding-page: 1.5rem;
  }
  
  .page-inner {
    padding: var(--spacing-lg) var(--spacing-xl);
    padding-bottom: calc(var(--spacing-lg) + 70px);
  }
  
  .page-content {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
  }
  
  .toc-content {
    max-width: 700px;
    margin: 0 auto;
  }
  
  .cover-title {
    font-size: var(--font-size-3xl);
  }
  
  .chapter-title {
    font-size: var(--font-size-xl);
  }
  
  .nav-chapter {
    max-width: 250px;
  }
}

/* ========================================
   大屏幕 (1200px 以上)
   ======================================== */

@media screen and (min-width: 1200px) {
  :root {
    --font-size-base: 1.0625rem;
    --font-size-md: 1.1875rem;
    --font-size-lg: 1.375rem;
    --padding-page: 2rem;
  }
  
  .page-inner {
    padding: var(--spacing-xl) var(--spacing-3xl);
    padding-bottom: calc(var(--spacing-xl) + 70px);
  }
  
  .page-content {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
  }
  
  .toc-content {
    max-width: 800px;
    margin: 0 auto;
  }
  
  .cover-title {
    font-size: calc(var(--font-size-4xl) * 1.2);
  }
  
  .cover-subtitle {
    font-size: var(--font-size-lg);
  }
  
  .chapter-title {
    font-size: var(--font-size-2xl);
  }
  
  .toc-header h2 {
    font-size: calc(var(--font-size-2xl) * 1.1);
  }
  
  .toc-chapter-title {
    font-size: var(--font-size-md);
  }
  
  .toc-section-title {
    font-size: var(--font-size-lg);
  }
  
  .nav-btn {
    width: 60px;
    height: 50px;
  }
  
  .nav-chapter {
    font-size: var(--font-size-base);
    max-width: 400px;
  }
  
  .book-navigation {
    padding: var(--spacing-md) var(--spacing-xl);
    gap: var(--spacing-xl);
  }
}

/* ========================================
   超大屏幕 (1600px 以上)
   ======================================== */

@media screen and (min-width: 1600px) {
  :root {
    --font-size-base: 1.125rem;
    --font-size-md: 1.25rem;
    --font-size-lg: 1.5rem;
    --padding-page: 2.5rem;
  }
  
  .page-content {
    max-width: 1000px;
  }
  
  .cover-title {
    font-size: calc(var(--font-size-4xl) * 1.3);
  }
}

/* ========================================
   4K屏幕 (1920px 以上)
   ======================================== */

@media screen and (min-width: 1920px) {
  :root {
    --font-size-base: 1.1875rem;
    --font-size-md: 1.375rem;
    --font-size-lg: 1.625rem;
    --padding-page: 3rem;
  }
  
  .page-content {
    max-width: 1100px;
  }
  
  .cover-title {
    font-size: calc(var(--font-size-4xl) * 1.4);
  }
  
  .chapter-title {
    font-size: calc(var(--font-size-2xl) * 1.2);
  }
}

/* ========================================
   触摸设备优化
   ======================================== */

@media (hover: none) and (pointer: coarse) {
  .nav-btn,
  .toc-chapter-link,
  .cover-enter-btn,
  .toc-close-btn,
  .nav-toc-btn,
  .modal-btn {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
  }
  
  .nav-btn:hover,
  .toc-chapter-link:hover,
  .cover-enter-btn:hover {
    transform: none;
  }
  
  .nav-btn:active,
  .toc-chapter-link:active,
  .cover-enter-btn:active {
    opacity: 0.7;
    transform: scale(0.98);
  }
  
  .book-content {
    touch-action: pan-y pinch-zoom;
    -webkit-user-select: none;
    user-select: none;
  }
}

/* ========================================
   打印样式
   ======================================== */

@media print {
  .book-navigation,
  .loading-container,
  .continue-reading-modal,
  .cover-enter-btn,
  .toc-close-btn,
  .nav-btn {
    display: none !important;
  }
  
  .book-content {
    position: static;
    box-shadow: none;
  }
  
  body {
    background: white;
  }
}

/* ========================================
   减少动画偏好
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* 确保目录内容可见 */
.toc-section {
  display: block !important;
  visibility: visible !important;
}

.toc-chapter-list {
  display: block !important;
  visibility: visible !important;
}

.toc-chapter-item {
  display: list-item !important;
  visibility: visible !important;
}

.toc-chapter-link {
  display: flex !important;
  visibility: visible !important;
}