/* /comic — the comic reader on top of reader.css (stage, Chương drawer, Hiển thị
   panel, page arrows). The book box is sized by comic-flip.js to the pages'
   aspect, so a turning leaf's edge is the page's own edge. */

.comic-win { --paper-page: #f7f6f2; }

/* ===== The book ===== */
#book {
  position: absolute; inset: 0; margin: auto; perspective: 2200px;
  background: var(--paper-page); box-shadow: 0 2px 14px rgba(0,0,0,.45);
}
#book[hidden] { display: none; }
#book:focus { outline: none; }
/* The spine of a two-page spread: a soft fold, under any turning leaf. */
#book[data-per="2"]::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 36px; margin-left: -18px; z-index: 1; pointer-events: none;
  background: linear-gradient(to right, transparent, rgba(0,0,0,.14) 46%, rgba(0,0,0,.22) 50%, rgba(0,0,0,.14) 54%, transparent);
}

.pg, .face { position: absolute; top: 0; bottom: 0; overflow: hidden; background: var(--paper-page); }
.pg-full { left: 0; right: 0; }
.pg-left { left: 0; width: 50%; }
.pg-right { left: 50%; width: 50%; }
.pg img, .face img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.pg > i, .face > i { display: block; width: 100%; height: 100%; }   /* blank paper past the last page */
/* A spread's pages hug the spine. */
.pg-left img { object-position: right center; }
.pg-right img { object-position: left center; }

/* The turning leaf: two faces back to back, hinged on the spine. */
.leaf { position: absolute; top: 0; bottom: 0; z-index: 2; transform-style: preserve-3d; will-change: transform; }
.leaf-full { left: 0; right: 0; }
.leaf-left { left: 0; width: 50%; }
.leaf-right { left: 50%; width: 50%; }
.origin-left { transform-origin: left center; }
.origin-right { transform-origin: right center; }
.face { inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.face.back { transform: rotateY(180deg); }
.origin-left .front img, .origin-right .back img { object-position: left center; }
.origin-right .front img, .origin-left .back img { object-position: right center; }
.leaf.leaf-full .face img { object-position: center; }
/* The page darkens as it lifts away from the light, most at the spine side it curls from. */
.shade { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.origin-left .front .shade, .origin-right .back .shade { background: linear-gradient(to right, rgba(0,0,0,.32), rgba(0,0,0,.04) 70%); }
.origin-right .front .shade, .origin-left .back .shade { background: linear-gradient(to left, rgba(0,0,0,.32), rgba(0,0,0,.04) 70%); }

.slide-pane { position: absolute; inset: 0; overflow: hidden; }

/* ===== Cuộn dọc ===== */
.scroll-view {
  position: absolute; inset: 3px; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
.scroll-view[hidden] { display: none; }
.scroll-view img { display: block; width: min(100%, 860px); height: auto; min-height: 120px; }
.scroll-next { margin: var(--s4) 0 var(--s5, 32px); }

/* ===== Turning and the bare page (comic-input.js) ===== */
/* Scrolling owns the whole page: an edge zone over it would swallow the drag. */
#reader[data-mode="scroll"] .page-arrow { display: none; }
/* Touch: each outer third turns, the middle third shows/hides the bars. */
@media (hover: none) { .comic-win .page-arrow { width: 33%; max-width: none; } }
.comic-win.bare > .titlebar, .comic-win.bare > .reader-bar { display: none; }
#bare-toggle { width: 100%; }
#bare-toggle[aria-pressed="true"] { box-shadow: var(--bevel-in); background: var(--hilite); font-weight: 600; }
.bare-hint { margin: var(--s2) 0 0; color: var(--muted); font-size: var(--t-xs); line-height: 1.4; }

/* Chương drawer: which volume of the series, above its chapters. */
.toc-vol { flex: none; display: flex; align-items: center; gap: var(--s2); margin: 0 0 3px; padding: 2px var(--s1); font: 500 var(--t-sm)/1 var(--font-ui); }
.toc-vol[hidden] { display: none; }
.toc-vol select { flex: 1; min-width: 0; }
@media (pointer: coarse) { .toc-vol select { min-height: var(--tap); } }

/* ===== Mở từ Drive ===== */
.comic-msg { align-content: start; padding-top: max(var(--s4), 6vh); }
.import-dlg { width: min(560px, 100%); box-shadow: var(--bevel-window), 4px 4px 0 rgba(0,0,0,.35); }
.import-dlg[hidden], .dir-dlg[hidden] { display: none; }
.import-body { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s1) var(--s3) var(--s3); }
.field95 { font: 500 var(--t-sm)/1 var(--font-ui); }
#import-url { width: 100%; }
.scope-hint { margin: calc(-1 * var(--s2)) 0 0; color: var(--muted); font-size: var(--t-xs); line-height: 1.4; }
.import-error {
  margin: 0; padding: var(--s2) var(--s3) var(--s2) 30px; font-size: var(--t-sm); line-height: 1.4;
  background: var(--paper) url("icons/error.svg") no-repeat 8px center / 16px; box-shadow: var(--bevel-field);
}
.import-error[hidden], .import-progress[hidden], .preview[hidden], .recent[hidden] { display: none; }
.import-progress { display: flex; flex-direction: column; gap: var(--s1); }
.import-progress .progress95 { width: 100%; }
.import-actions { display: flex; justify-content: flex-end; gap: var(--s2); }
.import-actions .btn { min-width: 96px; }

.preview { display: flex; flex-direction: column; gap: var(--s2); }
.preview-head { margin: 0; font: 600 var(--t-lg)/1.3 var(--font-book); text-wrap: balance; }
.preview-sub { margin: -4px 0 0; color: var(--muted); font-size: var(--t-sm); }
.preview-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.preview-chapters {
  max-height: min(38dvh, 280px); overflow-y: auto; margin: 0; padding: 2px; list-style: none;
  background: var(--paper); box-shadow: var(--bevel-field); overscroll-behavior: contain;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
}
.preview-chapters .linkish { display: block; width: 100%; padding: 5px 8px; color: var(--text); font-size: var(--t-sm); }
.preview-chapters .linkish:hover { background: var(--sel); color: var(--sel-text); text-decoration: none; }

.recent { padding: 0 var(--s3) var(--s3); }
.recent-head { margin: 0 0 var(--s1); font: 500 var(--t-sm)/1 var(--font-ui); }
.recent ul { margin: 0; padding: 0; list-style: none; }
.recent .linkish { padding: 3px 0; font-size: var(--t-sm); }

/* ===== Hướng đọc ===== */
.dir-dlg { width: min(440px, 100%); box-shadow: var(--bevel-window), 4px 4px 0 rgba(0,0,0,.35); }
.dir-body { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s1) var(--s3) var(--s3); }
.dir-body p { margin: 0; }
.dir-choices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.dir-choice { display: flex; flex-direction: column; align-items: center; gap: 2px; --py: 10px; }
.dir-choice small { color: var(--muted); font-size: var(--t-xs); font-weight: 400; }
.dir-note { color: var(--muted); font-size: var(--t-xs); }

@media (max-width: 640px) {
  .comic-msg { padding: var(--s2); }
  .dir-choices { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .leaf { will-change: auto; } }