/* kb-fallback.css — hardening cho webview cũ THIẾU container-query (Chrome <105,
   Safari <16, webview in-app Zalo/Messenger). KHÔNG đụng vendor CSS (verbatim).
   Đội Đỏ xác nhận 2026-08-25: mất container-type/cqi → grid track phình 639px >
   viewport, title nowrap đè lên thẻ bên cạnh — Writebook gốc cũng vỡ y hệt trên
   các browser đó; đây là fallback mình tự thêm, không phải sửa lệch.
   Nạp SAU toc.css; @supports đảm bảo browser hiện đại không bị ảnh hưởng. */
@supports not (width: 1cqi) {
  .toc {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
  }
  .toc__leaf {
    max-width: 100%;
    overflow: hidden;
  }
  .toc__title {
    white-space: normal !important;
  }
  .toc__thumbnail {
    font-size: 0.65rem;
    padding: 8%;
  }
  .library {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  }
}

/* ═══ WIDGETS TƯƠNG TÁC — style riêng, không đụng vendor ═══ */
.kbw-copywrap { position: relative; }
.kbw-copy {
  background: var(--color-ink); border: 0; border-radius: 1.2em; color: var(--color-bg);
  cursor: pointer; font-size: 0.85rem; margin: 0.3rem 0 1rem; padding: 0.45em 1em;
}
.kbw-quiz fieldset {
  border: 1px solid var(--color-subtle-dark); border-radius: 0.5em;
  margin-block: 1rem; padding: 0.8rem 1rem; text-align: start;
}
.kbw-quiz legend { font-weight: 700; padding-inline: 0.4em; text-align: start; }
.kbw-quiz label { border-radius: 0.4em; cursor: pointer; display: block; padding: 0.35em 0.5em; }
.kbw-quiz label.kbw-right { background: oklch(65.59% 0.234 142.49 / 0.18); font-weight: 700; }
.kbw-quiz label.kbw-wrong { background: oklch(51% 0.2 31 / 0.15); }
.kbw-explain { font-size: 0.9em; margin: 0.4em 0 0; min-height: 1.2em; opacity: 0.85; }
.kbw-checklist {
  border: 1px solid var(--color-subtle-dark); border-radius: 0.5em;
  margin-block: 1rem; padding: 0.8rem 1rem; text-align: start;
}
.kbw-check-head { font-weight: 800; margin: 0.6em 0 0.2em; }
.kbw-checklist label { cursor: pointer; display: block; padding: 0.25em 0; }
.kbw-checklist label.kbw-done { opacity: 0.55; text-decoration: line-through; }
.kbw-flash { margin-block: 1.2rem; text-align: center; }
.kbw-flash-card {
  align-items: center; aspect-ratio: 16/9; border: 1px solid var(--color-subtle-dark);
  border-radius: 0.6em; cursor: pointer; display: flex; font-size: 1.15rem; font-weight: 700;
  justify-content: center; margin-inline: auto; max-width: 34ch; padding: 1rem;
  user-select: none;
}
.kbw-flash-card.kbw-flash-back { background: var(--color-subtle-light); font-weight: 400; }
.kbw-flash-nav { align-items: center; display: flex; gap: 1rem; justify-content: center; margin-top: 0.6rem; }
.kbw-flash-nav button {
  background: transparent; border: 1px solid var(--color-subtle-dark); border-radius: 1.2em;
  color: var(--color-ink); cursor: pointer; padding: 0.3em 1em;
}
.kbw-flash-hint { font-size: 0.8rem; opacity: 0.6; }
.kbw-dapan {
  border: 1px dashed var(--color-subtle-dark); border-radius: 0.5em;
  margin-block: 1rem; padding: 0.6rem 1rem; text-align: start;
}
.kbw-dapan summary { cursor: pointer; font-weight: 700; }
.kbw-progress {
  background: var(--color-subtle); border-radius: 1em; display: block;
  height: 0.45em; margin-top: 0.4em; overflow: hidden;
}
.kbw-progress > span { background: oklch(70% 0.2 44); display: block; height: 100%; }

/* ═══ TYPOGRAPHY SÁCH (2026-08-25) — căn đều 2 lề + line-break đẹp ═══ */
article[data-kb-leaf-href] p {
  text-align: justify;
  text-wrap: pretty; /* Chrome 117+: né dòng mồ côi/sông trắng; browser cũ tự bỏ qua */
}

/* ═══ CHAT AI ═══ */
.kbw-chat-fab {
  background: var(--color-ink); border: 0; border-radius: 50%; bottom: 1.2rem; color: var(--color-bg);
  cursor: pointer; font-size: 1.5rem; height: 3.4rem; position: fixed; right: 1.2rem;
  width: 3.4rem; z-index: 60; box-shadow: 0 4px 14px rgb(0 0 0 / .3);
}
.kbw-chat {
  background: var(--color-bg); border: 1px solid var(--color-subtle-dark); border-radius: 0.8em;
  bottom: 5.2rem; box-shadow: 0 10px 40px rgb(0 0 0 / .35); display: none; flex-direction: column;
  max-height: 65vh; position: fixed; right: 1rem; width: min(24rem, calc(100vw - 2rem)); z-index: 61;
}
.kbw-chat.kbw-chat-open { display: flex; }
.kbw-chat-head { align-items: center; border-bottom: 1px solid var(--color-subtle); display: flex; justify-content: space-between; padding: 0.6rem 0.9rem; }
.kbw-chat-head button { background: transparent; border: 0; color: var(--color-ink); cursor: pointer; font-size: 1rem; }
.kbw-chat-log { flex: 1; overflow-y: auto; padding: 0.8rem; text-align: start; }
.kbw-chat-log p { border-radius: 0.7em; margin: 0.35rem 0; max-width: 88%; padding: 0.5rem 0.75rem; font-size: 0.95rem; }
.kbw-chat-bot { background: var(--color-subtle-light); margin-right: auto; }
.kbw-chat-user { background: var(--color-ink); color: var(--color-bg); margin-left: auto; }
.kbw-chat-form { border-top: 1px solid var(--color-subtle); display: flex; gap: 0.5rem; padding: 0.6rem; }
.kbw-chat-form input { background: var(--color-bg); border: 1px solid var(--color-subtle-dark); border-radius: 1.2em; color: var(--color-ink); flex: 1; padding: 0.5em 0.9em; }
.kbw-chat-form button { background: var(--color-ink); border: 0; border-radius: 1.2em; color: var(--color-bg); cursor: pointer; padding: 0.5em 1.1em; }

/* ═══ TÊN CHƯƠNG DÀI: xuống dòng thay vì cắt "…" (Batin chốt 2026-08-27) ═══
   Writebook gốc ellipsis 1 dòng — tên chương tiếng Việt dài bị cụt mất nghĩa.
   Grid view: cho wrap tối đa 3 dòng. Không đụng vendor toc.css. */
.toc__container:has(#toc-grid:checked) .toc__title .overflow-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: unset;
  white-space: normal;
}
/* List view: bỏ nowrap để tên dài wrap, dấu chấm dẫn vẫn bám dòng cuối */
.toc__container:has(#toc-list:checked) .toc__title {
  white-space: normal;
}
.toc__container:has(#toc-list:checked) .toc__title .overflow-ellipsis {
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
}

/* Bookmark phải màu CAM (--color-marker) như bản gốc — bookmark.svg trong images/
   fill đen mặc định, còn Writebook thật hardcode <svg fill="var(--color-marker)">
   trong _leaf.html.erb. Override tại đây thay vì sửa file vendor. */
.toc__bookmark svg, .toc__bookmark svg path { fill: var(--color-marker); }

/* URL dài trong thư mục tài liệu tham khảo (Quarto sinh <a class="uri">) không có chỗ ngắt,
   nên trên điện thoại nó đẩy CẢ TRANG rộng ra và người đọc phải cuộn ngang từng đoạn văn.
   Đo thật 2026-08-29 trên khổ 390px: 3/7 chương của THE TRACE tràn đúng 35px, thủ phạm duy
   nhất là A.uri. Luật Bản Dọc của Batin cấm bắt người đọc cuộn ngang.
   Sửa ở ĐÂY (engine tủ sách) chứ không ở một cuốn — mọi sách đều dính. */
a.uri, .csl-entry a, .references a { overflow-wrap: anywhere; word-break: break-word; }