/* Common CSS: shared across all pages */

/* Design tokens */
:root {
  --bg: #ffffff;
  --bg-soft: #fafbff;
  --panel: #ffffff;
  --accent: #3b82f6;
  --accent-2: #6366f1;
  --text: #0b1020;
  --muted: #475569;
  --border: #e8edf6;
  --ok: #16a34a;
  --nav-item-py: 10px;
  --nav-item-px: 12px;
}

/* Base */
html { scroll-behavior: smooth; }
html, body { margin: 0 !important; padding: 0 !important; }
body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  min-width: 0 !important;
  background: var(--bg);
}

/* Global box model + responsiveness */
html, body, * { max-width: 100% !important; box-sizing: border-box !important; }

/* Images */
img, .img-fluid, .img-responsive { max-width: 100% !important; width: auto !important; height: auto !important; }
.container, .container-fluid { min-width: 0 !important; max-width: 100% !important; }

/* Landing page exceptions */
.cover-ph { max-width: 480px !important; }
.hero-figure { max-width: none !important; }

/* Shared fixed top bar */
.book-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 16px; background: #fff; border-bottom: 1px solid var(--border);
  font-family: inherit !important; font-size: 14px; line-height: 1.2; -webkit-text-size-adjust: 100%;
  max-width: 100vw !important; overflow-x: hidden !important; overflow-y: visible !important; min-width: 0 !important;
}
.book-topbar .brand { display: flex; align-items: center; gap: 12px; flex-shrink: 1; min-width: 0; }
.book-topbar .brand-link { text-decoration: none; color: inherit; }
.book-topbar .brand-link:hover .title { text-decoration: underline; }
.book-topbar .title { font-weight: 700; letter-spacing: 0.2px; font-size: 16px; color: var(--text); font-family: inherit !important; line-height: 1.2; white-space: normal; overflow: visible; text-overflow: clip; }
.book-topbar .logo { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: linear-gradient(135deg, rgba(59,130,246,0.10), rgba(99,102,241,0.10)); border: 1px solid var(--border); }
.book-topbar .topbar-right { display: flex; align-items: center; gap: 12px; flex-shrink: 1; min-width: 0; }
.book-topbar .lang-select { position: relative; }
.book-topbar .lang-toggle, .book-topbar .btn-cn { border: 1px solid var(--border); color: var(--text); background: #fff; border-radius: 10px; padding: 8px 12px; font-weight: 600; font-size: 13px; cursor: pointer; width: 60px; text-align: center; }
.book-topbar .lang-toggle { min-width: 60px; flex-shrink: 0; }
.book-topbar .lang-toggle:hover, .book-topbar .btn-cn:hover { background: #f8fafc; }
.book-topbar .lang-menu { position: fixed; top: -9999px; left: -9999px; min-width: 160px; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(2,6,23,0.16); padding: 6px; display: none; z-index: 1200; }
.book-topbar .lang-select.open .lang-menu { display: block; }
.book-topbar .lang-item { display: block; width: 100%; text-align: left; background: transparent; border: none; color: #1e293b; font-size: 13px; padding: 8px 8px; border-radius: 8px; cursor: pointer; }
.book-topbar .lang-item:hover { background: #f5f8ff; }
.book-topbar .gh-link { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--text); text-decoration: none; font-family: inherit !important; width: 120px; justify-content: center; }
.book-topbar .gh-link:hover { background: #f8fafc; }
.book-topbar .chat-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--text); cursor: pointer; font-weight: 500; font-family: inherit !important; width: 140px; justify-content: center; }
.book-topbar .chat-toggle:hover { background: #f8fafc; }
.book-topbar .hamburger-toggle { display: none; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--text); cursor: pointer; font-weight: 500; font-family: inherit !important; min-width: 96px; justify-content: center; }
/* removed nowrap to avoid forcing cramped layouts; rely on min-width instead */
.book-topbar .search { position: relative; }
.book-topbar .search-input { width: 280px; border: 1px solid var(--border); background: #fff; color: var(--text); border-radius: 10px; padding: 8px 10px; font-size: 13px; outline: none; font-family: inherit !important; }
.book-topbar .search-input::placeholder { color: #94a3b8; }
.book-topbar .search-results { position: absolute; top: 110%; left: 0; right: 0; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.06); overflow: hidden; z-index: 1100; display: none; font-family: inherit !important; }
.book-topbar .search-item { padding: 8px 10px; font-size: 13px; color: #1e293b; cursor: pointer; font-family: inherit !important; }
.book-topbar .search-item:hover, .book-topbar .search-item.active { background: #f5f8ff; }
.book-topbar .search-item-title { font-weight: 600; }

/* Responsive top bar adjustments */
@media (max-width: 1024px) { .book-topbar .search { display: none; } .mobile-search-section { display: block !important; } }
@media (max-width: 1100px) { .book-topbar .search-input { width: 240px; } }
@media (max-width: 1000px) { .book-topbar .search-input { width: 220px; } }
@media (max-width: 900px) { .book-topbar .search-input { width: 180px; } .book-topbar .title { max-width: 36vw; width: 36vw; } }
@media (max-width: 850px) { .book-topbar .search { display: none; } .mobile-search-section { display: block !important; } .book-topbar .title { max-width: 40vw; width: 40vw; } }
@media (max-width: 800px) { .book-topbar .search-input { width: 120px; } .book-topbar .title { max-width: 32vw; width: 32vw; } }
@media (max-width: 720px) {
  .book-topbar .chat-toggle .chat-toggle-label, .book-topbar .hamburger-toggle .hamburger-label, .book-topbar .gh-link span { display: none; }
  .book-topbar .chat-toggle, .book-topbar .hamburger-toggle, .book-topbar .gh-link { width: 44px !important; min-width: 44px !important; padding: 8px !important; justify-content: center !important; }
  .book-topbar .lang-toggle, .book-topbar .btn-cn { width: 60px !important; min-width: 60px !important; }
  .book-topbar .title { max-width: 42vw; width: 42vw; }
}
/* removed early hide of hamburger label; standard 720px rule handles collapse */
@media (max-width: 480px) {
  .book-topbar { padding: 4px 6px; gap: 4px; }
  .book-topbar .topbar-right { gap: 6px !important; }
  .book-topbar .chat-toggle, .book-topbar .hamburger-toggle, .book-topbar .gh-link { min-width: 42px !important; width: 42px !important; padding: 6px !important; }
  .book-topbar .hamburger-toggle { display: inline-flex !important; }
  .book-topbar .lang-toggle, .book-topbar .btn-cn { min-width: 54px !important; width: 54px !important; }
  /* Hide title to preserve space for buttons on very small screens */
  .book-topbar .brand .title { display: none !important; }
}
@media (max-width: 375px) {
  .book-topbar { padding: 3px 4px; gap: 3px; }
  .book-topbar .topbar-right { gap: 4px !important; }
  .book-topbar .title { font-size: 12px; }
  .book-topbar .chat-toggle, .book-topbar .hamburger-toggle, .book-topbar .gh-link { min-width: 40px !important; width: 40px !important; padding: 5px !important; }
}

/* Pages using topbar */
.page { padding-top: var(--book-topbar-h, 64px); }

/* Sidebar layout shared by landing, contributors, and chapters */
.layout-with-sidebar { display: grid; grid-template-columns: 280px 1fr; align-items: start; min-height: 100vh; padding-top: var(--book-topbar-h, 64px); }
.layout-with-sidebar > .page { grid-column: 2; }
.layout-with-sidebar > .ltx_page_main { grid-column: 2; }
/* Explicit placement for landing layout */
.app-shell .sidebar { grid-area: sidebar; }

.layout-with-sidebar .sidebar, .app-shell .sidebar, body .sidebar {
  position: sticky; top: var(--book-topbar-h, 64px); height: calc(100vh - var(--book-topbar-h, 64px)); overflow-y: auto; border-right: 1px solid var(--border);
  background: var(--bg-soft); padding: 18px 14px 0 14px;
}
/* Keep a little breathing room at the end of the sidebar; shows pale sidebar bg */
.layout-with-sidebar .sidebar .side-section:last-child, .app-shell .sidebar .side-section:last-child, body .sidebar .side-section:last-child { margin-bottom: 14px; }
.layout-with-sidebar .side-section, .app-shell .side-section, .sidebar .side-section { margin-bottom: 20px; }
.layout-with-sidebar .side-h, .app-shell .side-h, .sidebar .side-h { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #64748b; margin: 10px 8px 8px; }
.layout-with-sidebar .nav-list, .app-shell .nav-list, .sidebar .nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.layout-with-sidebar .nav-item > a, .app-shell .nav-item > a, .sidebar .nav-item > a { display: block; color: var(--text); text-decoration: none; padding: var(--nav-item-py) var(--nav-item-px); border-radius: 8px; border: 1px solid var(--border); background: #fff; font-size: 14px; line-height: 1.35; display: grid; grid-template-rows: auto auto; align-content: center; }
.layout-with-sidebar .nav-item > a .nav-label, .app-shell .nav-item > a .nav-label, .sidebar .nav-item > a .nav-label { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.layout-with-sidebar .nav-item > a .nav-subtitle, .app-shell .nav-item > a .nav-subtitle, .sidebar .nav-item > a .nav-subtitle { display: block; font-size: 12px; color: #64748b; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
/* Keep TOC buttons visually uniform (two-line height even if subtitle absent) */
.layout-with-sidebar .toc-list .nav-item > a, .app-shell .toc-list .nav-item > a, .sidebar .toc-list .nav-item > a { min-height: 56px; }
.layout-with-sidebar .nav-item > a:hover, .app-shell .nav-item > a:hover, .sidebar .nav-item > a:hover { background: #f5f8ff; border-color: var(--border); }
.layout-with-sidebar .toc-list .nav-item > a, .app-shell .toc-list .nav-item > a, .sidebar .toc-list .nav-item > a { color: #1e293b; background: #fff; border: 1px solid var(--border); }
.layout-with-sidebar .toc-list .nav-item > a:hover, .app-shell .toc-list .nav-item > a:hover, .sidebar .toc-list .nav-item > a:hover { background: #f8fafc; border-color: var(--border); }

/* Mobile dropdown sidebar */
@media (max-width: 1024px) {
  .book-topbar .hamburger-toggle { display: inline-flex !important; }
  .layout-with-sidebar { display: block; padding-top: var(--book-topbar-h, 64px); }
  .layout-with-sidebar .sidebar, .app-shell .sidebar, body .sidebar {
    position: fixed; top: var(--book-topbar-h, 64px); left: 0; right: 0; z-index: 44; height: calc(100vh - var(--book-topbar-h, 64px));
    max-height: calc(100vh - var(--book-topbar-h, 64px)); overflow-y: auto; -webkit-overflow-scrolling: touch; border-right: none; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    background: #fff; margin: 0; padding: 10px 14px calc(18px + env(safe-area-inset-bottom, 8px)) 14px; visibility: hidden; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity 180ms ease, transform 180ms ease;
  }
  .layout-with-sidebar .sidebar .side-section, .app-shell .sidebar .side-section, body .sidebar .side-section { margin-bottom: 12px; }
  .layout-with-sidebar .sidebar .side-h, .app-shell .sidebar .side-h, body .sidebar .side-h { margin: 6px 8px 6px; }
  body.mobile-nav-open .layout-with-sidebar .sidebar, body.mobile-nav-open .app-shell .sidebar, body.mobile-nav-open .sidebar { visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; }
  body.mobile-nav-open { overflow: hidden; }
  .layout-with-sidebar > .ltx_page_main, .layout-with-sidebar > .page { width: 100%; max-width: none; }
}

/* Badges (used on contributors or anywhere) */
.badges { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.badge { display: inline-flex; align-items: center; padding: 2px 8px; font-size: 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-soft); color: #334155; white-space: nowrap; }

/* Mobile search (sidebar) */
.mobile-search-section { display: none; }
.mobile-search-container { position: relative; }
.mobile-search-input { width: 100%; border: 1px solid var(--border); background: #fff; color: var(--text); border-radius: 10px; padding: 8px 10px; font-size: 13px; outline: none; font-family: inherit; }
.mobile-search-input::placeholder { color: #94a3b8; }
.mobile-search-results { position: absolute; top: 110%; left: 0; right: 0; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.06); overflow: hidden; z-index: 1100; display: none; }
.mobile-search-results .search-item { padding: 8px 10px; font-size: 13px; color: #1e293b; cursor: pointer; }
.mobile-search-results .search-item:hover, .mobile-search-results .search-item.active { background: #f5f8ff; }
.mobile-search-results .search-item-title { font-weight: 600; }

/* AI Chat Panel */
.ai-chat-panel { position: fixed; top: calc(var(--book-topbar-h, 64px) + var(--navbar-h, 0px) + var(--header-h, 56px)); right: 0; bottom: 0; width: min(420px, 100vw); background: var(--panel); border-left: 1px solid var(--border); box-shadow: -8px 0 30px rgba(2,6,23,0.06); display: grid; grid-template-rows: auto auto 1fr auto; transform: translateX(100%); transition: transform 180ms ease-in-out; z-index: 70; }
body.ai-chat-open .ai-chat-panel { transform: translateX(0%); }
.ai-chat-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.ai-chat-title { font-weight: 800; letter-spacing: 0.01em; }
.ai-chat-actions { display: inline-flex; gap: 8px; }
.ai-chat-actions button { border: 1px solid var(--border); background: #fff; color: var(--text); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.ai-chat-actions button:hover { background: #f8fafc; }
.ai-chat-context { border-bottom: 1px solid var(--border); padding: 8px 12px; }
.ai-chat-ctx-row { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; color: #334155; }
.ai-chat-selection-preview { margin-top: 8px; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px; max-height: 90px; overflow: auto; }
.ai-chat-selection-empty { color: #64748b; font-size: 12px; }
.ai-chat-selection-text { white-space: normal; font-size: 12px; color: #0f172a; line-height: 1.5; word-break: normal; overflow-wrap: anywhere; }
.ai-chat-messages { overflow-y: auto; padding: 10px 12px; display: grid; gap: 10px; }
.ai-chat-msg { display: flex; align-items: flex-start; }
.ai-chat-msg.from-user { justify-content: flex-end; }
.ai-chat-bubble { display: inline-block; flex: 0 0 auto; width: fit-content; max-width: 84%; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: #fff; color: #0f172a; line-height: 1.5; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
.ai-chat-bubble { overflow-x: auto; }
.ai-chat-msg.from-user .ai-chat-bubble { background: #eff6ff; border-color: #bfdbfe; }
.ai-chat-msg.from-assistant .ai-chat-bubble { background: #f8fafc; border-color: #e5e7eb; }
.ai-chat-compose { border-top: 1px solid var(--border); padding: 8px 12px; display: grid; gap: 8px; }
.ai-chat-input { width: 100%; resize: vertical; min-height: 60px; border-radius: 10px; border: 1px solid var(--border); padding: 8px 10px; font-size: 14px; outline: none; }
.ai-chat-input:disabled { background: #f1f5f9; }
.ai-chat-sendrow { display: flex; justify-content: flex-end; }
.ai-chat-send { border: 1px solid var(--border); background: var(--accent); color: #fff; font-weight: 700; padding: 6px 12px; border-radius: 10px; cursor: pointer; }
.ai-chat-send:disabled { opacity: 0.6; cursor: not-allowed; }
/* KaTeX spacing inside chat */
.ai-chat-bubble { line-height: 1.38; }
.ai-chat-bubble .katex-display { margin: 0.2em 0 !important; }
.ai-chat-bubble .katex-display > .katex { display: inline-block; }
.ai-chat-bubble .katex { margin: 0 0.01em !important; }
/* Allow long math to wrap or scroll within the bubble */
.ai-chat-bubble .katex, .ai-chat-bubble .katex-display { white-space: normal !important; }
.ai-chat-bubble .katex { overflow-wrap: anywhere; word-break: break-word; }
.ai-chat-bubble .katex-display { max-width: 100%; overflow-x: auto; }
@media (min-width: 1200px) { body.ai-chat-open .ltx_page_main, body.ai-chat-open .page { margin-right: 420px; } }

/* Dynamic wide mode when content overflows */
body.ai-chat-open.ai-chat-wide .ai-chat-panel { width: min(640px, 100vw); }
@media (min-width: 1200px) { body.ai-chat-open.ai-chat-wide .ltx_page_main, body.ai-chat-open.ai-chat-wide .page { margin-right: 640px; } }

/* Typing indicator */
.ai-typing { display: inline-flex; align-items: center; gap: 6px; padding: 2px 2px; }
.ai-typing .dot { width: 6px; height: 6px; border-radius: 999px; background: #94a3b8; opacity: 0.4; animation: ai-bounce 1.2s infinite ease-in-out; }
.ai-typing .dot:nth-child(1) { animation-delay: 0s; }
.ai-typing .dot:nth-child(2) { animation-delay: 0.15s; }
.ai-typing .dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes ai-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.4; } 40% { transform: translateY(-3px); opacity: 1; } }

/* Language selector visible */