:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg-primary: #0d1117;
  --bg-secondary: #161b22;
  --bg-tertiary: #21262d;
  --text-primary: #e6edf3;
  --text-secondary: #8b949e;
  --accent-blue: #58a6ff;
  --accent-green: #3fb950;
  --accent-red: #f85149;
  --accent-orange: #d29922;
  --border: #30363d;
  --shadow: rgba(0, 0, 0, 0.28);
  --bubble-user-bg: linear-gradient(135deg, #1f6feb 0%, #2470e0 100%);
  --bubble-user-color: #f6f8fa;
}

[data-theme="light"] {
  color-scheme: light;
  --bg-primary: #f0f2f5;
  --bg-secondary: #ffffff;
  --bg-tertiary: #e8eaed;
  --text-primary: #1a1a2e;
  --text-secondary: #5f6368;
  --accent-blue: #1a73e8;
  --accent-green: #1e8e3e;
  --accent-red: #d93025;
  --accent-orange: #e37400;
  --border: #dadce0;
  --shadow: rgba(0, 0, 0, 0.08);
  --bubble-user-bg: linear-gradient(135deg, #1a73e8 0%, #1557b0 100%);
  --bubble-user-color: #ffffff;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent-blue) 10%, transparent), transparent 32rem),
    var(--bg-primary);
  color: var(--text-primary);
  font: 16px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
}

body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.brand {
  flex: 0 0 auto;
  color: var(--text-primary);
  font-weight: 750;
}

.theme-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-secondary);
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  padding: 0;
  transition: background 0.15s, border-color 0.15s;
}
.theme-toggle:hover { border-color: var(--accent-blue); background: var(--bg-tertiary); }

.desktop-nav { display: none; }

.nav-link {
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--text-secondary);
}

.nav-link.active, .nav-link:hover { color: var(--text-primary); background: var(--bg-tertiary); }

.top-search { margin-left: auto; min-width: 92px; }
.top-search input, .filter-bar input, .search-panel input {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  outline: none;
}

.top-search input { min-height: 36px; max-width: 170px; }
input:focus { border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.14); }

.main {
  width: min(100%, 980px);
  margin: 0 auto;
  padding: 18px 14px 24px;
}

.page-head { margin: 4px 0 18px; }
.page-head h1 {
  margin: 0;
  font-size: 1.55rem;
  line-height: 1.2;
}
.page-head p { margin: 5px 0 0; color: var(--text-secondary); }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.stat-card {
  position: relative;
  min-height: 92px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent-blue) 22%, var(--border));
  border-radius: 18px;
  background:
    linear-gradient(var(--bg-secondary), var(--bg-secondary)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--accent-blue) 48%, transparent), transparent 38%, color-mix(in srgb, var(--accent-green) 34%, transparent)) border-box;
  box-shadow: 0 12px 30px var(--shadow);
  overflow: hidden;
}
.stat-card::after {
  content: "";
  position: absolute;
  inset: -45% auto auto -35%;
  width: 120px;
  height: 120px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-blue) 16%, transparent);
  filter: blur(18px);
}
.stat-card span { position: relative; display: block; color: var(--accent-blue); font-size: 1.9rem; font-weight: 850; line-height: 1.05; }
.stat-card small { position: relative; display: block; margin-top: 10px; color: var(--text-secondary); font-weight: 600; }

.section-block { margin-top: 24px; }
.section-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.section-title-row h2 { margin: 0; font-size: 1.08rem; }
.section-title-row a { color: var(--accent-blue); font-size: 0.92rem; }

.paper-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.paper-card, .session-card, .hit-card {
  display: block;
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-secondary) 94%, var(--accent-blue));
  box-shadow: 0 10px 28px var(--shadow);
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.paper-card:hover, .session-card:hover, .hit-card:hover { border-color: color-mix(in srgb, var(--accent-blue) 45%, var(--border)); background: var(--bg-tertiary); transform: translateY(-1px); }

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 22px;
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid color-mix(in srgb, var(--tag-color) 65%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--tag-color) 20%, transparent);
  color: var(--text-primary);
  font-size: 0.76rem;
  line-height: 1;
}

.paper-card h3, .hit-card h3 {
  margin: 10px 0 6px;
  font-size: 1rem;
  line-height: 1.35;
  word-break: break-word;
}
.paper-card h3::before {
  content: "📄";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: 8px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent-blue) 16%, transparent);
  font-size: 0.9rem;
  vertical-align: middle;
}
.paper-card p, .hit-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
  word-break: break-word;
}
.paper-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  color: var(--text-secondary);
  font-size: 0.82rem;
}

.filter-bar { margin-bottom: 12px; }
.tag-strip {
  display: flex;
  gap: 8px;
  margin: 0 -14px 14px;
  padding: 0 14px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tag-strip::-webkit-scrollbar { display: none; }
.filter-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 0.9rem;
}
.filter-chip.active { border-color: var(--accent-blue); color: var(--text-primary); background: rgba(88, 166, 255, 0.16); }
.filter-chip span { color: var(--text-secondary); font-size: 0.78rem; }

.session-list { display: grid; gap: 10px; }
.session-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.session-main strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.98rem;
}
.session-main span, .session-meta {
  flex: 0 0 auto;
  color: var(--text-secondary);
  font-size: 0.8rem;
}
.session-meta { margin-top: 8px; }

.chat-header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.chat-header > a, .reader-toolbar > a {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--accent-blue);
}
.chat-header h1 { margin: 0; font-size: 1.05rem; line-height: 1.3; overflow-wrap: anywhere; }
.chat-header p { margin: 5px 0 0; color: var(--text-secondary); font-size: 0.86rem; }

.message-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bubble {
  width: fit-content;
  max-width: min(88%, 720px);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-secondary);
  overflow-wrap: anywhere;
}
.role-user { align-self: flex-end; background: #16345f; border-color: #245a9b; }
.role-assistant { align-self: flex-start; }
.role-tool, .role-system { align-self: center; max-width: 96%; background: var(--bg-tertiary); }
.bubble-meta { margin-bottom: 5px; color: var(--text-secondary); font-size: 0.74rem; }
.bubble-content { white-space: pre-wrap; }

.load-more {
  display: block;
  width: 100%;
  margin: 14px 0 0;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--accent-blue);
}

.search-panel { display: grid; gap: 8px; margin-bottom: 14px; }
.htmx-indicator { opacity: 0; color: var(--text-secondary); font-size: 0.85rem; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.hit-list { display: grid; gap: 10px; }
.hit-kind, .hit-card span { color: var(--text-secondary); font-size: 0.8rem; }
mark { padding: 0 2px; border-radius: 3px; background: #f2cc60; color: #111; }

.empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 24px 14px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  text-align: center;
}

.reader-main { width: 100%; max-width: none; padding: 0; }
.reader-toolbar {
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
}
.reader-toolbar div { min-width: 0; flex: 1; }
.reader-toolbar strong, .reader-toolbar span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reader-toolbar span { color: var(--text-secondary); font-size: 0.8rem; }
.reader-frame-wrap {
  position: fixed;
  inset: 114px 0 calc(66px + env(safe-area-inset-bottom)) 0;
  background: white;
}
.reader-frame-wrap iframe { width: 100%; height: 100%; border: 0; background: white; }

.bottom-tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  min-height: calc(62px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 -12px 30px var(--shadow);
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--text-secondary);
  font-size: 1.1rem;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.tab span { font-size: 0.74rem; }
.tab.active { color: var(--accent-blue); }
.tab.active .tab-icon { filter: drop-shadow(0 0 6px rgba(88, 166, 255, 0.4)); }
.tab:active { opacity: 0.7; }

@media (min-width: 620px) {
  .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .paper-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  body { padding-bottom: 0; }
  .topbar { padding: 10px 22px; }
  .desktop-nav { display: flex; gap: 2px; }
  .bottom-tabs { display: none; }
  .main { padding: 24px 22px 40px; }
  .paper-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .paper-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reader-toolbar { top: 56px; padding-inline: 18px; }
  .reader-frame-wrap { inset: 114px 0 0 0; }
}

/* ========================= v2 additions ========================= */

/* Bottom tab badge / chat unread dot */
.tab { position: relative; }
.tab-icon { font-size: 1.15rem; line-height: 1; }
.tab-label { font-size: 0.74rem; }
.tab-badge {
  position: absolute;
  top: 6px;
  right: calc(50% - 18px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-red);
  box-shadow: 0 0 0 2px rgba(13, 17, 23, 0.96);
}

/* Primary button (used on chat index) */
.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  min-height: 42px;
  padding: 8px 16px;
  border: 1px solid color-mix(in srgb, var(--accent-blue) 60%, transparent);
  border-radius: 8px;
  background: rgba(88, 166, 255, 0.16);
  color: var(--accent-blue);
  font-weight: 600;
}
.primary-btn:hover { background: rgba(88, 166, 255, 0.24); }
.chat-index-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; }
.chat-index-head h1 { flex: 0 0 auto; }
.chat-index-head p { flex: 1 1 auto; margin: 0; color: var(--text-secondary); }

/* ---- Live chat page ---- */
.chat-main {
  width: 100%;
  max-width: none;
  padding: 0;
  height: calc(100dvh - 56px - (62px + env(safe-area-inset-bottom)));
}

.chat-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: min(100%, 760px);
  margin: 0 auto;
}

.chat-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--bg-secondary) 90%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.chat-bar-back, .chat-bar-action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 1.2rem;
}
.chat-bar-title { flex: 1 1 auto; min-width: 0; }
.chat-bar-title strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.98rem; }
.chat-bar-title span { display: block; color: var(--text-secondary); font-size: 0.78rem; }

.chat-stream {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  overflow-y: auto;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent-blue) 8%, transparent), transparent 18rem),
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg-secondary) 18%, transparent));
}

.chat-empty {
  margin: auto;
  max-width: 520px;
  padding: 20px;
  color: var(--text-secondary);
  text-align: center;
}
.chat-empty.small { padding: 10px; font-size: 0.9rem; }
.chat-empty h2 { margin: 0 0 6px; color: var(--text-primary); font-size: 1.1rem; }
.chat-empty p { margin: 0 0 12px; }
.chat-suggestions {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chat-suggestions li {
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  text-align: left;
  font-size: 0.92rem;
}

/* Bubbles for live chat — iMessage-style with slide-in animation */
@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-16px); }
  to { opacity: 1; transform: translateX(0); }
}
.chat-stream .bubble {
  width: fit-content;
  max-width: min(90%, 640px);
  padding: 9px 12px 6px;
  line-height: 1.5;
  box-shadow: 0 8px 20px var(--shadow);
}
.chat-stream .role-user { align-self: flex-end; background: var(--bubble-user-bg); border: none; color: var(--bubble-user-color); border-radius: 18px 18px 4px 18px; animation: slide-in-right 0.25s ease-out; }
.chat-stream .role-assistant { align-self: flex-start; background: color-mix(in srgb, var(--bg-tertiary) 92%, var(--bg-secondary)); border-color: var(--border); color: var(--text-primary); border-radius: 18px 18px 18px 4px; animation: slide-in-left 0.25s ease-out; }
.chat-stream .bubble-content { white-space: pre-wrap; word-break: break-word; }
.bubble-foot {
  margin-top: 4px;
  color: color-mix(in srgb, currentColor 62%, transparent);
  font-size: 0.68rem;
  line-height: 1.1;
  text-align: right;
}
.role-assistant .bubble-foot { text-align: left; color: var(--text-secondary); }
.error-text { color: var(--accent-red); }

.bubble-content.streaming::after {
  content: "▍";
  display: inline-block;
  margin-left: 2px;
  color: var(--accent-blue);
  animation: hr-blink 1s steps(2, end) infinite;
}
@keyframes hr-blink { 50% { opacity: 0.2; } }

.chat-input {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.chat-input textarea {
  flex: 1 1 auto;
  resize: none;
  max-height: 160px;
  min-height: 44px;
  padding: 11px 16px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--bg-primary);
  color: var(--text-primary);
  outline: none;
  line-height: 1.4;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.chat-input textarea:focus { border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.14); }
.chat-input textarea::placeholder { color: #6e7681; }
.chat-input button {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-blue) 0%, #4090f0 100%);
  color: white;
  font-size: 1.3rem;
  cursor: pointer;
  transition: transform 0.12s, opacity 0.12s, box-shadow 0.12s;
  box-shadow: 0 2px 8px rgba(88, 166, 255, 0.3);
}
.chat-input button:active { transform: scale(0.92); }
.chat-input button:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---- Paper "Ask AI" overlay ---- */
.reader-ask-btn {
  flex: 0 0 auto;
  margin-left: 4px;
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--accent-blue) 60%, transparent);
  border-radius: 8px;
  background: rgba(88, 166, 255, 0.16);
  color: var(--accent-blue);
  font-weight: 600;
  cursor: pointer;
}
.reader-ask-btn:hover { background: rgba(88, 166, 255, 0.26); }

.ask-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(13, 17, 23, 0.55);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.ask-overlay[hidden] { display: none; }
.ask-panel {
  display: flex;
  flex-direction: column;
  width: min(100%, 560px);
  height: min(80dvh, 640px);
  border: 1px solid var(--border);
  border-radius: 16px 16px 0 0;
  background: var(--bg-secondary);
  overflow: hidden;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.4);
}
.ask-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-primary);
}
.ask-header button {
  width: 32px; height: 32px;
  border: 0;
  border-radius: 8px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: 1.2rem;
  cursor: pointer;
}
.ask-stream {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  overflow-y: auto;
}
.ask-stream .bubble { width: fit-content; max-width: 92%; padding: 9px 12px; }
.ask-stream .role-user { align-self: flex-end; background: #1f6feb; border-color: #2b78f0; color: #f6f8fa; }
.ask-stream .role-assistant { align-self: flex-start; background: var(--bg-tertiary); }
.ask-input { padding-bottom: 10px; }

@media (min-width: 768px) {
  .ask-overlay { align-items: center; }
  .ask-panel { height: min(80vh, 720px); border-radius: 16px; }
}

body.overlay-open { overflow: hidden; }

/* ---- Mobile reader view ---- */
.mobile-reader-main {
  width: min(100%, 760px);
  max-width: none;
  padding: 0 0 calc(78px + env(safe-area-inset-bottom));
}
.mobile-reader {
  min-height: calc(100vh - 56px);
  background: var(--bg-primary);
}
.mobile-reader-head {
  position: sticky;
  top: 56px;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.mobile-reader-head a,
.mobile-reader-head button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-primary);
  color: var(--accent-blue);
}
.mobile-reader-head button { font-weight: 800; cursor: pointer; }
.mobile-reader-head div { min-width: 0; flex: 1 1 auto; }
.mobile-reader-head strong,
.mobile-reader-head span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mobile-reader-head span { color: var(--text-secondary); font-size: 0.78rem; }
.mobile-reader-content {
  padding: 20px 18px 40px;
  color: var(--text-primary);
  font-size: 1.06rem;
  line-height: 1.78;
  overflow-wrap: anywhere;
}
[data-reader-font="large"] .mobile-reader-content { font-size: 1.18rem; }
[data-reader-font="xlarge"] .mobile-reader-content { font-size: 1.32rem; }
.mobile-reader-content h1,
.mobile-reader-content h2,
.mobile-reader-content h3 {
  line-height: 1.28;
  margin: 1.35em 0 0.55em;
}
.mobile-reader-content h1 { font-size: 1.45em; }
.mobile-reader-content h2 { font-size: 1.25em; color: var(--accent-blue); }
.mobile-reader-content h3 { font-size: 1.12em; }
.mobile-reader-content p,
.mobile-reader-content ul,
.mobile-reader-content ol,
.mobile-reader-content blockquote { margin: 0.85em 0; }
.mobile-reader-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1em auto;
  border-radius: 12px;
  background: white;
}
.mobile-reader-content a { color: var(--accent-blue); text-decoration: underline; text-underline-offset: 3px; }
.mobile-reader-content blockquote {
  padding: 8px 12px;
  border-left: 3px solid var(--accent-blue);
  background: color-mix(in srgb, var(--bg-secondary) 82%, transparent);
  color: var(--text-secondary);
}
.reader-table-wrap {
  margin: 1em -4px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.mobile-reader-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
}
.mobile-reader-content th,
.mobile-reader-content td {
  padding: 8px;
  border: 1px solid var(--border);
  vertical-align: top;
}
.reader-progress {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(62px + env(safe-area-inset-bottom));
  z-index: 45;
  padding: 8px 14px;
  background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.reader-progress input { width: 100%; accent-color: var(--accent-blue); }
body:has(.mobile-reader-main) { padding-bottom: calc(116px + env(safe-area-inset-bottom)); }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .mobile-reader { background: #fbfaf7; }
}

@media (min-width: 768px) {
  .mobile-reader-head { top: 56px; }
  .reader-progress { bottom: 0; }
  body:has(.mobile-reader-main) { padding-bottom: 54px; }
}

/* ---- Bilingual reader styles ---- */
.reader-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lang-toggle {
  font-size: 0.8rem;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--accent-blue);
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 600;
  transition: opacity 0.2s;
}
.lang-toggle:hover { opacity: 0.85; }

/* Bilingual paragraph pairs */
.bilingual-wrapper {
  line-height: 1.7;
}
.para-pair {
  margin: 1.2em 0;
  padding: 0.8em;
  border-radius: 8px;
  background: var(--bg-secondary);
  border-left: 3px solid var(--accent-blue);
}
.para-en {
  color: var(--text-primary);
  font-size: 1em;
  margin-bottom: 0.5em;
}
.para-zh {
  color: var(--accent-green, #2ea043);
  font-size: 0.95em;
  padding-left: 0.5em;
  border-left: 2px solid var(--accent-green, #2ea043);
  opacity: 0.95;
}
.para-pair h1, .para-pair h2, .para-pair h3,
.para-pair h4, .para-pair h5, .para-pair h6 {
  color: var(--accent-blue) !important;
  margin: 0.5em 0;
}
.para-pair h1 .para-zh,
.para-pair h2 .para-zh,
.para-pair h3 .para-zh,
.para-pair h4 .para-zh,
.para-pair h5 .para-zh,
.para-pair h6 .para-zh {
  display: block;
  margin-top: 0.3em;
}

/* Loading spinner + message */
.bilingual-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  color: var(--text-secondary);
  gap: 12px;
}
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--bg-tertiary);
  border-top: 4px solid var(--accent-blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Error state */
.bilingual-error {
  padding: 2em;
  text-align: center;
  color: var(--error, #f85149);
}

/* Light theme adjustments for bilingual */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .para-pair {
    background: #f0eee8;
    border-left-color: #1f6feb;
  }
  :root:not([data-theme="dark"]) .para-zh {
    color: #1a7f37;
    border-left-color: #1a7f37;
  }
}

/* ---- Scrollbar (dark theme) ---- */
.chat-stream::-webkit-scrollbar,
.ask-stream::-webkit-scrollbar { width: 8px; }
.chat-stream::-webkit-scrollbar-track,
.ask-stream::-webkit-scrollbar-track { background: transparent; }
.chat-stream::-webkit-scrollbar-thumb,
.ask-stream::-webkit-scrollbar-thumb {
  background: var(--bg-tertiary);
  border-radius: 4px;
}
.chat-stream::-webkit-scrollbar-thumb:hover,
.ask-stream::-webkit-scrollbar-thumb:hover { background: #3a424d; }

/* Make chat take full height; live chat ignores bottom-tab padding because
   .chat-main itself reserves the space. */
body:has(.chat-main) { padding-bottom: 0; }

@media (min-width: 768px) {
  .chat-main {
    height: calc(100vh - 56px);
  }
  body:has(.chat-main) { padding-bottom: 0; }
}