*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: #3a3a3a;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: system-ui, sans-serif;
}

/* ── Toolbar ── */
#toolbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: #1e1e1e;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  z-index: 100;
  border-bottom: 1px solid #444;
  overflow: hidden;
  max-height: 48px;
  transition: max-height 0.25s ease, border-bottom-color 0.25s ease;
}
body.toolbar-hidden #toolbar {
  max-height: 0;
  border-bottom-color: transparent;
}

#toolbar button {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 6px;
  background: #3a3a3a;
  color: #eee;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.15s;
}
#toolbar button:hover  { background: #555; }
#toolbar button:active { background: #4a9eff; }

#zoomLabel {
  min-width: 46px;
  text-align: center;
  color: #aaa;
  font-size: 0.82rem;
}

/* ── 頁碼顯示區 ── */
#pageIndicator {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.82rem;
  flex-shrink: 0;  /* 不被其他按鈕擠壓縮小 */
}

#pageInput {
  width: 6ch;
  min-width: 6ch;  /* 保持最小寬度，防止 flex 壓縮 */
  background: #2a2a2a;
  border: 1px solid #555;
  border-radius: 4px;
  color: #eee;
  font-size: 0.82rem;
  font-family: inherit;
  text-align: center;
  padding: 2px 4px;
  outline: none;
  transition: border-color 0.15s;
}
#pageInput:focus { border-color: #4a9eff; background: #1a1a1a; }

.page-slash { color: #555; }
#pageTotal  { color: #888; min-width: 2ch; }

/* ── Toolbar 分隔線 ── */
.toolbar-sep {
  width: 1px;
  height: 22px;
  background: #555;
  margin: 0 4px;
  flex-shrink: 0;
}

/* ── Stage ── */
#stage {
  width: 100vw;
  height: 100vh;
  overflow: auto;           /* 放大後可捲動 */
  overscroll-behavior-x: none; /* 防止 Chrome 水平滑動觸發上一頁，加在 scroll container 上才有效 */
  padding: 8px;
  display: grid;
  place-items: center;      /* 正常尺寸時置中；overflow: auto 捲動時也正確 */
  cursor: pointer;          /* 書本外側可點擊翻頁 */
}

/* 書本本身不是點擊翻頁區 */
#spread { cursor: default; }

/* ── Nav buttons：固定在畫面最左 / 最右，垂直置中 ── */
.nav-btn {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 72px;
  border: none;
  border-radius: 0 6px 6px 0;
  background: rgba(255,255,255,0.10);
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
#prevBtn { left:  0; border-radius: 0 6px 6px 0; display: none; }
#nextBtn { right: 0; border-radius: 6px 0 0 6px; display: none; }
.nav-btn:hover    { background: rgba(255,255,255,0.28); }
.nav-btn:disabled { opacity: 0.18; cursor: default; }

/* ── Spread（書本展開區） ── */
#spread {
  position: relative;
  display: flex;
  flex-shrink: 0;
  /* 多層陰影：貼近的硬邊 + 中距離 + 遠端漫射，模擬書本浮在桌面 */
  box-shadow:
    0  2px  5px  rgba(0,0,0,0.40),
    0  8px  20px rgba(0,0,0,0.45),
    0 22px  60px rgba(0,0,0,0.50);
  /* perspective 放在 spread，兩頁共用同一視點，旋轉才自然 */
  perspective: 2500px;
  perspective-origin: center center;
}

/* 書脊細線（雙頁模式）—— z-index 高於 flipper(30)，確保翻頁時線寬不變 */
#spread::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.15);
  z-index: 35;
  pointer-events: none;
}
#spread.single-page::before { display: none; }

/* 書口（右側頁疊厚度感）—— 延伸到 spread 右邊外側，z-index:-1 隱藏重疊部分 */
#spread::after {
  content: '';
  position: absolute;
  right: -4px;
  top:  3px;
  bottom: 3px;
  width: 7px;
  background: linear-gradient(to right, #b0b0b0, #d8d8d8 60%, #ececec);
  border-radius: 0 2px 2px 0;
  z-index: -1;
  pointer-events: none;
}
#spread.single-page::after { display: none; }

/* ── 載入中遮罩 ── */
#loadingOverlay {
  position: fixed;
  inset: 0;
  background: #2a2a2a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 200;
  gap: 14px;
  transition: opacity 0.3s ease;
}
#loadingOverlay.hidden {
  opacity: 0;
  pointer-events: none;
}
#loadingTitle {
  color: #ccc;
  font-size: 1rem;
  letter-spacing: 0.05em;
}
#loadingText {
  color: #888;
  font-size: 0.82rem;
  min-height: 1.2em;
}
#loadingBarWrap {
  width: 260px;
  height: 5px;
  background: #444;
  border-radius: 3px;
  overflow: hidden;
}
#loadingBar {
  height: 100%;
  width: 0%;           /* 預設：有 pdfSize 時的確定進度條起始 */
  background: #4a9eff;
  border-radius: 3px;
}
#loadingBar.indeterminate {
  width: 35%;
  animation: loadingSlide 1.4s ease-in-out infinite;
}
#loadingBar.parsing {
  width: 100%;
  animation: loadingPulse 0.9s ease-in-out infinite alternate;
}
@keyframes loadingSlide {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(300%);  }
}
@keyframes loadingPulse {
  from { opacity: 1; }
  to   { opacity: 0.35; }
}

canvas { display: block; background: #fff; }

/* 外側圓角：左頁左側、右頁右側 */
#bgLeft  {
  border-radius: 2px 0 0 2px;
  border-right: none;
  /* 靠脊側內陷陰影，模擬頁面彎入裝訂 */
  box-shadow: inset -14px 0 22px rgba(0,0,0,0.09);
}
#bgRight {
  border-radius: 0 2px 2px 0;
  box-shadow: inset  14px 0 22px rgba(0,0,0,0.09);
}

/* ── 單頁模式 ── */
#spread.single-page #bgRight { display: none; }

/* ── 翻頁投射陰影（固定屬性放 CSS，動態寬度/漸層由 JS 設定） ── */
.cast-shadow {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 20;
  animation: flipCastShadow 0.38s cubic-bezier(0.645,0.045,0.355,1.0) both;
}

/* ── 翻頁投射陰影動畫 ── */
@keyframes flipCastShadow {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ── 翻頁葉片 ── */
#flipper {
  position: absolute;
  top: 0;
  display: none;
  z-index: 30;
}

#flipperInner {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

#flipFront,
#flipBack {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

#flipBack {
  transform: rotateY(180deg);
}