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

:root {
  --bg: var(--tg-theme-bg-color, #fff);
  --fg: var(--tg-theme-text-color, #222);
  --hint: var(--tg-theme-hint-color, #888);
  --accent: var(--tg-theme-button-color, #2481cc);
  --accent-fg: var(--tg-theme-button-text-color, #fff);
  --card: var(--tg-theme-secondary-bg-color, #f4f4f5);
}

body {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--fg);
}

.view { min-height: 100vh; display: flex; flex-direction: column; }
.view[hidden] { display: none !important; } /* CSS display:flex se de len attr hidden neu khong co dong nay */
#reader-view { height: 100vh; overflow: hidden; } /* chieu cao co dinh de epub.js do duoc kich thuoc khung doc */

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; position: sticky; top: 0; background: var(--bg); z-index: 5;
  border-bottom: 1px solid var(--card);
}
.topbar h1 { font-size: 18px; }
.topbar-actions { display: flex; gap: 8px; }

.icon-btn {
  border: none; background: var(--card); color: var(--fg);
  font-size: 18px; padding: 8px 12px; border-radius: 10px; cursor: pointer;
}

.notice { margin: 10px 16px; padding: 10px 14px; border-radius: 10px; background: var(--card); font-size: 14px; }
.hint { color: var(--hint); font-size: 13px; text-align: center; padding: 20px 16px; line-height: 1.6; }

#book-list { padding: 10px 16px; display: flex; flex-direction: column; gap: 10px; }
.book-card {
  background: var(--card); border-radius: 14px; padding: 14px; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
}
.book-card .title { font-weight: 600; font-size: 15px; }
.book-card .meta { color: var(--hint); font-size: 12px; display: flex; justify-content: space-between; }
.progress-bar { height: 4px; background: rgba(128,128,128,.25); border-radius: 2px; overflow: hidden; }
.progress-bar > div { height: 100%; background: var(--accent); }
.book-card .del { align-self: flex-end; background: none; border: none; color: var(--hint); font-size: 12px; cursor: pointer; }
.card-btns { align-self: flex-end; display: flex; gap: 14px; }
.book-card .mini { background: none; border: none; color: var(--hint); font-size: 12px; cursor: pointer; }

/* Reader */
.reader-bar .reader-title {
  flex: 1; text-align: center; font-size: 14px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 8px;
}
#reader-container { flex: 1; min-height: 0; }
#txt-container {
  flex: 1; overflow-y: auto; padding: 16px; white-space: pre-wrap;
  font-family: Georgia, serif; font-size: 17px; line-height: 1.7;
}
.reader-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--card); background: var(--bg);
}
.nav-btn { border: none; background: var(--card); color: var(--fg); font-size: 22px; width: 48px; height: 40px; border-radius: 10px; cursor: pointer; }
#reader-progress { color: var(--hint); font-size: 13px; }

#selection-popup {
  position: fixed; left: 50%; bottom: 70px; transform: translateX(-50%); z-index: 20;
}
#selection-popup button {
  border: none; background: var(--accent); color: var(--accent-fg);
  padding: 10px 18px; border-radius: 12px; font-size: 14px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}

/* Dich sach */
#trans-panel {
  position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.45);
  display: flex; align-items: flex-end;
}
#trans-panel[hidden] { display: none !important; }
.trans-box {
  background: var(--bg); width: 100%; border-radius: 16px 16px 0 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 10px;
}
.trans-box h2 { font-size: 16px; }
.trans-est { font-size: 13px; color: var(--hint); line-height: 1.5; }
#trans-extra {
  width: 100%; border: 1px solid var(--card); background: var(--card); color: var(--fg);
  border-radius: 10px; padding: 10px; font-size: 14px; font-family: inherit; resize: none;
}
.trans-actions { display: flex; justify-content: space-between; gap: 8px; }
.trans-start-btn {
  border: none; background: var(--accent); color: var(--accent-fg);
  padding: 10px 18px; border-radius: 10px; font-size: 14px; cursor: pointer;
}
.trans-start-btn:disabled { opacity: .5; }
#trans-jobs { padding: 0 16px; display: flex; flex-direction: column; gap: 8px; }
.job-card { background: var(--card); border-radius: 12px; padding: 12px; font-size: 13px; }
.job-card .job-head { display: flex; justify-content: space-between; gap: 8px; }
.job-card .job-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-card .meta { color: var(--hint); font-size: 12px; margin-top: 4px; display: flex; justify-content: space-between; }
.job-card .del { background: none; border: none; color: var(--hint); cursor: pointer; font-size: 12px; }
.job-card .progress-bar { margin-top: 6px; }

/* Dai cam ung lat trang o mep man hinh (danh cho iPhone/webview) */
.edge-zone {
  position: fixed; top: 64px; bottom: 64px; width: 20%; z-index: 12;
  background: transparent; -webkit-tap-highlight-color: transparent;
  touch-action: none; /* moi cu chi tren dai la cua app, webview khong duoc giu */
}
#edge-left { left: 0; }
#edge-right { right: 0; }
.edge-zone[hidden] { display: none !important; }

/* Muc luc */
#toc-panel {
  position: fixed; inset: 0; z-index: 25;
  background: var(--bg); color: var(--fg);
  display: flex; flex-direction: column;
}
#toc-panel[hidden] { display: none !important; } /* display:flex de len attr hidden */
.toc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; font-weight: 600; border-bottom: 1px solid var(--card);
}
#toc-list { flex: 1; overflow-y: auto; padding: 6px 0 calc(20px + env(safe-area-inset-bottom)); }
.toc-item {
  display: block; width: 100%; text-align: left; border: none; background: none;
  color: var(--fg); font-size: 15px; line-height: 1.5; cursor: pointer;
  padding: 11px 16px; border-bottom: 1px solid var(--card);
}
.toc-item.sub { padding-left: 32px; font-size: 14px; color: var(--hint); }
.toc-item.current { color: var(--accent); font-weight: 600; }

/* TTS */
#tts-panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--bg); border-top: 1px solid var(--card);
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 24px rgba(0,0,0,.18);
}
#tts-panel[hidden] { display: none !important; }
.tts-status { color: var(--hint); font-size: 12px; text-align: right; flex: 1; margin-left: 10px; }
.seg-wrap { flex-wrap: wrap; justify-content: flex-end; max-width: 70%; }
#tts-play { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }

/* Cai dat trinh doc */
#settings-panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--bg); border-top: 1px solid var(--card);
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 24px rgba(0,0,0,.18);
}
.set-row { display: flex; justify-content: space-between; align-items: center; margin: 10px 0; font-size: 14px; }
.seg { display: flex; gap: 6px; align-items: center; }
.seg button {
  border: 1px solid var(--card); background: var(--card); color: var(--fg);
  padding: 6px 12px; border-radius: 8px; cursor: pointer; font-size: 13px;
}
.seg button.active { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.size-val { min-width: 28px; text-align: center; color: var(--hint); font-size: 13px; }

/* Highlights */
#highlight-list { padding: 10px 16px; display: flex; flex-direction: column; gap: 10px; }
.hl-card { background: var(--card); border-radius: 14px; padding: 14px; }
.hl-card .text { font-style: italic; font-size: 15px; line-height: 1.6; }
.hl-card .meta { color: var(--hint); font-size: 12px; margin-top: 8px; display: flex; justify-content: space-between; }
.hl-card .del { background: none; border: none; color: var(--hint); cursor: pointer; }