/* ============================================================
   style.css — lexnary.com/holybible  v4
   WhatsApp-style · popup over bottom bar · reply bubbles
   ============================================================ */
:root {
  --brand:        #075E54;
  --brand-dark:   #054c44;
  --brand-light:  #128C7E;
  --brand-teal:   #25D366;
  --chat-bg:      #ECE5DD;
  --bubble-in:    #FFFFFF;
  --bubble-reply: #F0F7FF;
  --accent:       #c47a1e;
  --accent-light: #fef3e2;
  --bar-bg:       #075E54;
  --text:         #1c1c1c;
  --text-muted:   #667781;
  --text-light:   #8a9aa2;
  --border:       #d1d7db;
  --radius:       8px;
  --radius-lg:    16px;
  --font:         'Segoe UI','Helvetica Neue',Arial,sans-serif;
  --font-mm:      'Padauk','Myanmar Text','Noto Sans Myanmar',sans-serif;
  --font-thai:    'Sarabun','Noto Sans Thai',sans-serif;
  --font-ko:      'Noto Sans KR','Malgun Gothic',sans-serif;
  --font-el:      'GFS Didot','Noto Serif Greek',serif;
  --top-h:        54px;
  --bot-h:        58px;
  --popup-max:    480px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;overflow:hidden;}
body{font-family:var(--font);background:var(--chat-bg);color:var(--text);font-size:16px;-webkit-text-size-adjust:100%;}

/* ── App shell ───────────────────────────────────────────── */
#app{
  display:flex;flex-direction:column;
  height:100vh;height:100dvh;
  max-width:720px;margin:0 auto;
  position:relative;overflow:hidden;
}

/* ── Top bar ─────────────────────────────────────────────── */
#top-bar{
  flex-shrink:0;height:var(--top-h);
  background:var(--bar-bg);color:#fff;
  display:flex;align-items:center;gap:8px;
  padding:0 12px;
  box-shadow:0 1px 4px rgba(0,0,0,.3);
  z-index:90;
  overflow:hidden;
  transition:height .3s ease, padding .3s ease, opacity .25s ease;
}
#top-bar-title{flex:1;min-width:0;}
#top-bar-book{font-size:.98rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;}
#top-bar-chapter{font-size:.7rem;opacity:.8;line-height:1.3;}
#top-bar-search-btn,
#top-bar-settings-btn{
  width:38px;height:38px;border-radius:50%;border:none;
  background:none;color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
#top-bar-search-btn svg,
#top-bar-settings-btn svg{width:22px;height:22px;fill:#fff;}
#top-bar-search-btn:active,
#top-bar-settings-btn:active{background:rgba(255,255,255,.15);}
#top-bar-settings-btn.active{background:rgba(255,255,255,.2);}

/* nav hidden on scroll — collapse to 0 height so chat-area fills the gap */
body.nav-hidden #top-bar{
  height:0;
  padding-top:0;
  padding-bottom:0;
  opacity:0;
  pointer-events:none;
}
body.nav-hidden #bottom-bar{
  height:0;
  opacity:0;
  pointer-events:none;
}
body.nav-hidden #popup-container{
  bottom:0;
  opacity:0;
  pointer-events:none;
}

/* ── Chat area ───────────────────────────────────────────── */
#chat-area{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:10px 10px 14px;
  scroll-behavior:smooth;
  transition:padding .3s;
}

/* ── Date divider ────────────────────────────────────────── */
.chat-divider{text-align:center;margin:8px 0 10px;}
.chat-divider span{
  background:rgba(255,255,255,.8);color:var(--text-muted);
  font-size:.72rem;font-weight:700;
  padding:3px 12px;border-radius:8px;display:inline-block;
}

/* loading center */
.loading-wrap{display:flex;justify-content:center;padding:50px 0;}

/* ── Verse wrap ──────────────────────────────────────────── */
.verse-wrap{margin-bottom:2px;}

/* ── Bubble rows ─────────────────────────────────────────── */
.bubble-row{display:flex;}
.main-row{justify-content:flex-start;margin-bottom:2px;}
.reply-row{justify-content:flex-end;margin-bottom:2px;display:none;}
.reply-row.open{display:flex;}

/* ── Verse bubble ────────────────────────────────────────── */
.verse-bubble{
  max-width:88%;min-width:100px;
  padding:8px 12px 6px;
  box-shadow:0 1px 2px rgba(0,0,0,.12);
  position:relative;
}

/* incoming (left) */
.verse-bubble.incoming{
  background:var(--bubble-in);
  border-radius:0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
}
.verse-bubble.incoming::before{
  content:'';position:absolute;top:0;left:-7px;
  border:8px solid transparent;
  border-right-color:var(--bubble-in);
  border-top:0;
}

/* reply (right) — xref & parallel drawers */
.verse-bubble.reply{
  background:var(--bubble-reply);
  border-radius:var(--radius-lg) 0 var(--radius-lg) var(--radius-lg);
  width:88%;
}
.verse-bubble.reply::after{
  content:'';position:absolute;top:0;right:-7px;
  border:8px solid transparent;
  border-left-color:var(--bubble-reply);
  border-top:0;
}

/* hide reply drawers by default */
.xref-drawer,.par-drawer{display:none;}
.xref-drawer.open,.par-drawer.open{display:block;}

.verse-num-inline{font-size:.68rem;font-weight:700;color:var(--brand-light);margin-right:3px;}
.verse-text-main{font-size:.97rem;line-height:1.72;color:var(--text);}
.verse-text-main.mm{font-family:var(--font-mm);font-size:1.05rem;line-height:2;}
.verse-text-main.thai{font-family:var(--font-thai);font-size:1.05rem;line-height:1.9;}
.verse-text-main.ko{font-family:var(--font-ko);font-size:1.05rem;line-height:1.8;}
.verse-text-main.el{font-family:var(--font-el);font-size:1.05rem;line-height:2;}

/* ── Action buttons ──────────────────────────────────────── */
.verse-actions{display:flex;gap:6px;padding:6px 0 2px;flex-wrap:wrap;}
.action-btn{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px 3px 7px;border:1px solid var(--border);
  border-radius:14px;background:#f8f9fa;cursor:pointer;
  font-size:.73rem;color:var(--text-muted);
  transition:all .15s;white-space:nowrap;font-family:var(--font);
}
.action-btn svg{width:12px;height:12px;fill:currentColor;flex-shrink:0;}
.action-btn:active{transform:scale(.97);}
.action-btn.xref-btn.open,.action-btn.xref-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light);}
.action-btn.par-btn.open,.action-btn.par-btn:hover{border-color:var(--brand-light);color:var(--brand-light);background:#e8f5f3;}
.badge{background:var(--accent);color:#fff;font-size:.62rem;font-weight:700;padding:0 5px;border-radius:8px;min-width:16px;text-align:center;line-height:1.6;}
.action-btn.par-btn .badge{background:var(--brand-light);}

/* ── Drawer labels ───────────────────────────────────────── */
.drawer-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;}
.xref-lbl{color:var(--accent);}
.par-lbl{color:var(--brand-light);}
.drawer-empty{font-size:.83rem;color:var(--text-muted);padding:4px 0;}

/* ── Xref card ───────────────────────────────────────────── */
.xref-card{background:#fff;border:1px solid #e5e5e5;border-radius:var(--radius);margin-bottom:7px;overflow:hidden;cursor:pointer;transition:box-shadow .15s;}
.xref-card:last-child{margin-bottom:0;}
.xref-card:active{opacity:.85;}
.xref-card-ref{background:#fffbf5;border-bottom:1px solid #f0e8d8;padding:5px 10px;font-size:.77rem;font-weight:700;color:var(--accent);display:flex;justify-content:space-between;align-items:center;}
.pass-tag{font-size:.65rem;background:var(--accent);color:#fff;padding:1px 6px;border-radius:8px;font-weight:600;}
.xref-card-text{padding:6px 10px;font-size:.88rem;line-height:1.65;color:var(--text);}
.xref-card-text.mm{font-family:var(--font-mm);font-size:.94rem;line-height:1.9;}
.xref-card-text.thai{font-family:var(--font-thai);font-size:.94rem;line-height:1.9;}
.xref-card-text.ko{font-family:var(--font-ko);font-size:.94rem;line-height:1.9;}
.xref-card-text.el{font-family:var(--font-el);font-size:.94rem;line-height:1.9;}
.xref-card-text sup{font-size:.62rem;color:var(--accent);font-weight:700;}

/* ── Parallel card ───────────────────────────────────────── */
.par-card{background:#fff;border:1px solid #d6ece9;border-radius:var(--radius);margin-bottom:7px;overflow:hidden;}
.par-card:last-child{margin-bottom:4px;}
.par-card-header{background:#e8f5f3;border-bottom:1px solid #d0ebe7;padding:5px 10px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;}
.par-version-label{font-size:.77rem;font-weight:700;color:var(--brand-light);}
.par-card-book{font-size:.7rem;color:var(--text-muted);}
.par-card-book.mm{font-family:var(--font-mm);}
.par-card-book.thai{font-family:var(--font-thai);}
.par-card-book.ko{font-family:var(--font-ko);}
.par-card-book.el{font-family:var(--font-el);}
.par-card-text{padding:6px 10px;font-size:.88rem;line-height:1.65;color:var(--text);}
.par-card-text.mm{font-family:var(--font-mm);font-size:.94rem;line-height:1.9;}
.par-card-text.thai{font-family:var(--font-thai);font-size:.94rem;line-height:1.9;}
.par-card-text.ko{font-family:var(--font-ko);font-size:.94rem;line-height:1.9;}
.par-card-text.el{font-family:var(--font-el);font-size:.94rem;line-height:1.9;}

/* ── Add version button ──────────────────────────────────── */
.add-version-btn{
  display:inline-flex;align-items:center;gap:5px;
  margin-top:4px;padding:5px 12px;
  border:1.5px dashed var(--border);border-radius:14px;
  background:none;cursor:pointer;font-size:.78rem;
  color:var(--text-muted);transition:all .15s;font-family:var(--font);
}
.add-version-btn:hover{border-color:var(--brand-light);color:var(--brand-light);}
.add-version-btn svg{width:14px;height:14px;fill:currentColor;}

/* ── Mini spinner ────────────────────────────────────────── */
.mini-spin{display:inline-block;width:14px;height:14px;border:2px solid #ddd;border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;}
.mini-spin.green{border-top-color:var(--brand-light);}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── Bottom nav bar — 5 buttons: Book · Chapter · Versions · Donate · Menu ── */
#bottom-bar{
  flex-shrink:0;height:var(--bot-h);
  background:var(--bar-bg);
  display:flex;align-items:stretch;
  box-shadow:0 -1px 4px rgba(0,0,0,.25);
  z-index:90;overflow:hidden;
  transition:height .3s ease, opacity .25s ease;
}
/* Both <button> and <a> share the same bar-btn look */
.bar-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border:none;background:none;color:rgba(255,255,255,.75);cursor:pointer;
  padding:4px 2px;font-family:var(--font);transition:background .15s;
  min-width:0;text-decoration:none;-webkit-tap-highlight-color:transparent;
}
.bar-btn:active,.bar-btn:focus-visible{background:rgba(255,255,255,.15);outline:none;}
/* Donate button — heart icon tinted pink on hover */
a.bar-btn:hover svg{fill:#ff6b8a;}
.bar-btn svg{width:20px;height:20px;fill:currentColor;flex-shrink:0;}
.bar-btn-label{
  font-size:.60rem;font-weight:600;letter-spacing:.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  width:100%;text-align:center;padding:0 1px;line-height:1.2;
}
.bar-sep{width:1px;background:rgba(255,255,255,.15);margin:10px 0;flex-shrink:0;}

/* ── Menu popup grid ────────────────────────────────────── */
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px;}
.menu-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:14px 8px;border-radius:12px;background:#f5f5f5;cursor:pointer;
  font-size:.78rem;font-weight:600;color:var(--text);text-align:center;
  transition:background .15s;position:relative;
}
.menu-item:active{background:#e8e8e8;}
.menu-item svg{width:28px;height:28px;fill:var(--accent);}
.menu-item.soon{opacity:.55;cursor:default;}
.soon-badge{
  position:absolute;top:6px;right:6px;
  font-size:.55rem;font-weight:700;letter-spacing:.4px;
  background:var(--accent);color:#fff;
  padding:2px 5px;border-radius:8px;text-transform:uppercase;
}
body.dark .menu-item{background:#2a3942;}
body.dark .menu-item:active{background:#3a4952;}

/* ── Popup container (sits above bottom bar) ─────────────── */
#popup-container{
  position:absolute;
  bottom:var(--bot-h);
  left:0;right:0;
  z-index:200;
  pointer-events:none;
}

/* ── Nav popup panel ─────────────────────────────────────── */
.nav-popup{
  position:absolute;
  bottom:0;left:0;right:0;
  max-height:75vh;max-height:75dvh;
  background:#fff;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow:0 -4px 24px rgba(0,0,0,.22);
  display:flex;flex-direction:column;overflow:hidden;
  pointer-events:all;
  transform:translateY(100%);
  transition:transform .26s cubic-bezier(.4,0,.2,1);
}
.nav-popup.open{transform:translateY(0);}

.popup-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px 10px;
  border-bottom:1px solid #f0f0f0;
  flex-shrink:0;
}
.popup-title{font-size:.98rem;font-weight:700;color:var(--text);}
.popup-close{
  width:30px;height:30px;border-radius:50%;border:none;
  background:#f0f0f0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.popup-close svg{width:16px;height:16px;fill:#666;}
.popup-close:active{background:#e0e0e0;}

.popup-body{overflow-y:auto;flex:1;padding-bottom:8px;}
.popup-footer{padding:10px 16px;border-top:1px solid #f0f0f0;flex-shrink:0;}

/* ── Popup list items ────────────────────────────────────── */
.popup-list-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;cursor:pointer;transition:background .1s;
}
.popup-list-item:active,.popup-list-item:hover{background:#f5f5f5;}
.popup-list-item.active{background:#e8f5f3;}
.popup-group-label{
  padding:8px 16px 4px;font-size:.7rem;font-weight:700;
  color:var(--brand-light);text-transform:uppercase;letter-spacing:.5px;
}

/* version radio */
.v-radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.v-radio.checked{background:var(--brand-light);border-color:var(--brand-light);}
.v-radio.checked::after{content:'';width:8px;height:8px;background:#fff;border-radius:50%;}
.v-info{flex:1;min-width:0;}
.v-label{font-size:.94rem;font-weight:600;color:var(--text);}
.v-lang{font-size:.73rem;color:var(--text-muted);}

/* version checkbox */
.v-check{width:22px;height:22px;border-radius:5px;border:2px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.v-check.checked{background:var(--brand-light);border-color:var(--brand-light);}
.v-check.checked::after{content:'✓';color:#fff;font-size:13px;font-weight:700;line-height:1;}

/* book list */
.book-num{width:26px;height:26px;border-radius:50%;background:#f0f0f0;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:var(--text-muted);flex-shrink:0;}
.book-num.active-num{background:var(--brand-light);color:#fff;}
.book-native{font-size:.93rem;font-weight:600;color:var(--text);line-height:1.2;}
.book-native.mm{font-family:var(--font-mm);}
.book-native.thai{font-family:var(--font-thai);}
.book-native.ko{font-family:var(--font-ko);}
.book-native.el{font-family:var(--font-el);}
.book-en{font-size:.72rem;color:var(--text-muted);}

/* chapter grid */
.chapter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(50px,1fr));gap:8px;padding:12px 14px 16px;}
.ch-cell{height:46px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius);border:1px solid var(--border);font-size:.92rem;font-weight:600;color:var(--text);background:#fff;cursor:pointer;transition:all .12s;}
.ch-cell:active{transform:scale(.93);}
.ch-cell:hover{border-color:var(--brand-light);color:var(--brand-light);}
.ch-cell.active{background:var(--brand-light);color:#fff;border-color:var(--brand-light);}

/* confirm button */
.popup-confirm-btn{width:100%;padding:13px;background:var(--brand-light);color:#fff;border:none;border-radius:var(--radius);font-size:.95rem;font-weight:700;cursor:pointer;font-family:var(--font);}
.popup-confirm-btn:active{background:var(--brand);}

/* ── Search inside popup ─────────────────────────────────── */
.search-input-wrap{padding:10px 14px 8px;border-bottom:1px solid #f0f0f0;}
.search-input-wrap input{
  width:100%;padding:9px 14px;border:1px solid var(--border);
  border-radius:22px;font-size:.95rem;font-family:var(--font);
  color:var(--text);outline:none;background:#f8f9fa;
}
.search-input-wrap input:focus{border-color:var(--brand-light);background:#fff;}
#popup-search-results{overflow-y:auto;padding:6px 10px 10px;}
.search-count{padding:4px 4px 6px;font-size:.73rem;font-weight:700;color:var(--text-muted);}
.search-result-item{background:#fff;border-radius:var(--radius);padding:9px 12px;margin-bottom:7px;cursor:pointer;border:1px solid #eee;}
.search-result-item:active{background:#f5f5f5;}
.search-ref{font-size:.77rem;font-weight:700;color:var(--brand-light);margin-bottom:3px;}
.search-text{font-size:.89rem;line-height:1.6;color:var(--text);}
.search-text.mm{font-family:var(--font-mm);font-size:.94rem;line-height:1.9;}
.search-text.thai{font-family:var(--font-thai);font-size:.94rem;line-height:1.9;}
.search-text.ko{font-family:var(--font-ko);font-size:.94rem;line-height:1.9;}
.search-text.el{font-family:var(--font-el);font-size:.94rem;line-height:1.9;}
.search-text em{background:#fff176;font-style:normal;border-radius:2px;padding:0 1px;}
.search-empty{text-align:center;padding:28px 20px;color:var(--text-muted);font-size:.88rem;}

/* ── Welcome screen (first visit) ───────────────────────────── */
.welcome-wrap{
  display:flex;flex-direction:column;align-items:center;
  padding:32px 20px 24px;gap:10px;
}
.welcome-title{
  font-size:1.25rem;font-weight:700;color:var(--brand);
  text-align:center;margin-bottom:2px;
}
.welcome-sub{
  font-size:.85rem;color:var(--text-muted);
  text-align:center;margin-bottom:10px;
}
.welcome-version-btn{
  width:100%;max-width:400px;padding:14px 18px;
  background:#fff;border:1.5px solid var(--border);
  border-radius:var(--radius-lg);cursor:pointer;
  transition:border-color .15s,background .15s;
  box-shadow:0 1px 3px rgba(0,0,0,.07);
}
.welcome-version-btn:hover,.welcome-version-btn:active{
  border-color:var(--brand-light);background:#e8f5f3;
}
.welcome-v-label{font-size:.97rem;font-weight:700;color:var(--text);margin-bottom:2px;}
.welcome-v-lang{font-size:.75rem;color:var(--text-muted);}

/* ── Version popup: search + A-Z alphabet bar ───────────────── */
.v-search-wrap{
  padding:10px 12px 8px;border-bottom:1px solid #f0f0f0;flex-shrink:0;
}
.v-search-wrap input{
  width:100%;padding:8px 14px;border:1px solid var(--border);border-radius:22px;
  font-size:.92rem;font-family:var(--font);color:var(--text);outline:none;background:#f8f9fa;
}
.v-search-wrap input:focus{border-color:var(--brand-light);background:#fff;}

.alpha-bar{
  display:flex;overflow-x:auto;padding:6px 8px;gap:3px;
  border-bottom:1px solid #f0f0f0;flex-shrink:0;
  scrollbar-width:none;
}
.alpha-bar::-webkit-scrollbar{display:none;}
.alpha-btn{
  flex-shrink:0;min-width:28px;height:28px;padding:0 5px;
  border:1px solid var(--border);border-radius:6px;
  background:#fff;color:var(--text-muted);
  font-size:.72rem;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .12s;
}
.alpha-btn:active,.alpha-btn:hover{border-color:var(--brand-light);color:var(--brand-light);}
.alpha-btn.active{background:var(--brand-light);border-color:var(--brand-light);color:#fff;}

/* parallel toggle (+/✓) button on each version list row */
.v-par-btn{
  flex-shrink:0;width:28px;height:28px;margin-left:auto;
  border:2px solid var(--border);border-radius:50%;
  background:transparent;color:var(--text-muted);
  font-size:.9rem;font-weight:700;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.v-par-btn:hover{border-color:var(--brand-light);color:var(--brand-light);}
.v-par-btn.par-active{background:var(--brand-light);border-color:var(--brand-light);color:#fff;}

/* "Add / Remove Versions" button inside parallel drawer */
.par-manage-wrap{padding:8px 12px 12px;}
.par-manage-btn{
  width:100%;padding:9px 14px;
  border:1.5px dashed var(--border);border-radius:var(--radius);
  background:transparent;color:var(--text-muted);
  font-size:.86rem;font-family:var(--font);cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:all .15s;
}
.par-manage-btn svg{width:15px;height:15px;fill:currentColor;flex-shrink:0;}
.par-manage-btn:hover{border-color:var(--brand-light);color:var(--brand-light);background:#f0faf8;}

/* dark mode */
body.dark .v-search-wrap input{background:#21262d;color:var(--text);border-color:#30363d;}
body.dark .v-search-wrap input:focus{background:#161b22;}
body.dark .alpha-btn{background:#21262d;border-color:#30363d;color:#8b949e;}
body.dark .alpha-btn.active{background:var(--brand-light);border-color:var(--brand-light);color:#fff;}
body.dark .v-par-btn{border-color:#30363d;color:#8b949e;}
body.dark .par-manage-btn{border-color:#30363d;color:#8b949e;}
body.dark .par-manage-btn:hover{border-color:var(--brand-light);color:var(--brand-light);background:rgba(18,140,126,.1);}

/* ── Shared popup search bar (version / book / topics) ─────── */
.popup-search-bar{
  padding:10px 14px 8px;
  border-bottom:1px solid #f0f0f0;
  flex-shrink:0;
}
.popup-search-input{
  width:100%;padding:9px 14px;
  border:1px solid var(--border);border-radius:22px;
  font-size:.95rem;font-family:var(--font);
  color:var(--text);outline:none;background:#f8f9fa;
}
.popup-search-input:focus{border-color:var(--brand-light);background:#fff;}

/* topic name inside list row — plain text, no arrow */
.topic-name{font-size:.93rem;font-weight:600;color:var(--text);}
.topic-name.mm{font-family:var(--font-mm);}
.topic-name.thai{font-family:var(--font-thai);}
.topic-name.ko{font-family:var(--font-ko);}
.topic-name.el{font-family:var(--font-el);}

/* topic verse reference shown inside the incoming bubble */
.topic-verse-ref-inline{
  font-size:.72rem;font-weight:700;color:var(--brand-light);
  margin-bottom:4px;display:block;
}

/* topic verse cards */
.topic-verse-card{
  background:#fff;border:1px solid #e5e5e5;border-radius:var(--radius);
  margin:6px 14px;overflow:hidden;cursor:pointer;transition:box-shadow .15s;
}
.topic-verse-card:active{opacity:.85;}
.topic-verse-ref{
  background:#f0f7ff;border-bottom:1px solid #ddeeff;
  padding:5px 10px;font-size:.77rem;font-weight:700;color:var(--brand-light);
}
.topic-verse-text{
  padding:6px 10px;font-size:.88rem;line-height:1.65;color:var(--text);
}
.topic-verse-text.mm{font-family:var(--font-mm);font-size:.94rem;line-height:1.9;}
.topic-verse-text.thai{font-family:var(--font-thai);font-size:.94rem;line-height:1.9;}
.topic-verse-text.ko{font-family:var(--font-ko);font-size:.94rem;line-height:1.9;}
.topic-verse-text.el{font-family:var(--font-el);font-size:.94rem;line-height:1.9;}
.topic-verse-text sup{font-size:.62rem;color:var(--brand-light);font-weight:700;}

/* ── Toast ───────────────────────────────────────────────── */
#toast{
  position:fixed;bottom:72px;left:50%;
  transform:translateX(-50%) translateY(20px);
  background:#333;color:#fff;padding:9px 18px;border-radius:20px;
  font-size:.83rem;z-index:999;opacity:0;
  transition:all .25s;pointer-events:none;white-space:nowrap;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ── Dark mode ───────────────────────────────────────────────── */
[data-theme="dark"] {
  --chat-bg:      #0d1117;
  --bubble-in:    #1e2530;
  --bubble-reply: #1a2236;
  --accent-light: #3a2a0a;
  --bar-bg:       #054c44;
  --text:         #e6edf3;
  --text-muted:   #8b949e;
  --text-light:   #6e7681;
  --border:       #30363d;
}
[data-theme="dark"] .chat-divider span{background:rgba(30,37,48,.9);}
[data-theme="dark"] .popup-header,[data-theme="dark"] .nav-popup{background:#161b22;color:var(--text);}
[data-theme="dark"] .popup-body{background:#161b22;}
[data-theme="dark"] .popup-list-item:hover,[data-theme="dark"] .popup-list-item:active{background:#21262d;}
[data-theme="dark"] .popup-list-item.active{background:#0d2137;}
[data-theme="dark"] .ch-cell{background:#1e2530;border-color:#30363d;color:var(--text);}
[data-theme="dark"] .ch-cell:hover{border-color:var(--brand-light);color:var(--brand-light);}
[data-theme="dark"] .xref-card,[data-theme="dark"] .par-card,[data-theme="dark"] .search-result-item,[data-theme="dark"] .topic-verse-card{background:#1e2530;border-color:#30363d;}
[data-theme="dark"] .xref-card-ref{background:#1e2a1e;border-color:#1e3a1e;}
[data-theme="dark"] .par-card-header{background:#0d2137;border-color:#1a3a5a;}
[data-theme="dark"] .popup-close{background:#21262d;}
[data-theme="dark"] .popup-close svg{fill:#aaa;}
[data-theme="dark"] .popup-search-input{background:#21262d;color:var(--text);border-color:#30363d;}
[data-theme="dark"] .popup-search-input:focus{background:#161b22;}
[data-theme="dark"] .search-input-wrap input{background:#21262d;color:var(--text);border-color:#30363d;}
[data-theme="dark"] .welcome-version-btn{background:#1e2530;border-color:#30363d;}
[data-theme="dark"] #settings-panel{background:#161b22;}
[data-theme="dark"] .settings-header{background:#161b22;border-color:#30363d;}
[data-theme="dark"] .settings-library-btn{background:#21262d;border-color:#30363d;color:var(--text);}
[data-theme="dark"] .settings-theme-btn{background:#21262d;border-color:#30363d;color:var(--text);}
[data-theme="dark"] .settings-section{border-color:#30363d;}
[data-theme="dark"] .bar-sep{background:rgba(255,255,255,.12);}
[data-theme="dark"] .popup-group-label{color:var(--brand-light);}
[data-theme="dark"] .book-num{background:#21262d;color:var(--text-muted);}
[data-theme="dark"] .search-empty{color:var(--text-muted);}

/* ── Font-size scale (1=base … 5=largest) ─────────────────────── */
[data-fontsize="1"]{--fs-verse:.97rem; --fs-xref:.88rem;  --fs-par:.88rem;}
[data-fontsize="2"]{--fs-verse:1.1rem; --fs-xref:1.0rem;  --fs-par:1.0rem;}
[data-fontsize="3"]{--fs-verse:1.25rem;--fs-xref:1.12rem; --fs-par:1.12rem;}
[data-fontsize="4"]{--fs-verse:1.42rem;--fs-xref:1.27rem; --fs-par:1.27rem;}
[data-fontsize="5"]{--fs-verse:1.62rem;--fs-xref:1.44rem; --fs-par:1.44rem;}
.verse-text-main{font-size:var(--fs-verse,.97rem);}
.xref-card-text{font-size:var(--fs-xref,.88rem);}
.par-card-text{font-size:var(--fs-par,.88rem);}
.topic-verse-text{font-size:var(--fs-xref,.88rem);}

/* ── Settings panel ──────────────────────────────────────────── */
#settings-panel{
  position:absolute;top:var(--top-h);right:0;
  width:min(320px,100%);
  max-height:calc(100dvh - var(--top-h) - var(--bot-h));
  background:#fff;
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  box-shadow:0 4px 24px rgba(0,0,0,.22);
  display:flex;flex-direction:column;overflow:hidden;
  z-index:300;
  transform:translateY(-110%);opacity:0;
  transition:transform .26s cubic-bezier(.4,0,.2,1),opacity .22s ease;
}
#settings-panel.open{transform:translateY(0);opacity:1;}
.settings-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px 10px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.settings-title{font-size:.98rem;font-weight:700;color:var(--text);}
.settings-close{
  width:30px;height:30px;border-radius:50%;border:none;
  background:#f0f0f0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.settings-close svg{width:16px;height:16px;fill:#666;}
.settings-close:active{background:#e0e0e0;}
.settings-body{overflow-y:auto;flex:1;padding:4px 0 12px;}
.settings-section{padding:14px 18px 12px;border-bottom:1px solid var(--border);}
.settings-section:last-child{border-bottom:none;}
.settings-label{
  font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;color:var(--brand-light);margin-bottom:10px;
}
.settings-font-preview{
  text-align:center;font-weight:600;color:var(--text);
  margin-bottom:10px;transition:font-size .15s;
}
.settings-slider-wrap{display:flex;align-items:center;gap:10px;}
.settings-slider-min{font-size:.75rem;font-weight:700;color:var(--text-muted);flex-shrink:0;}
.settings-slider-max{font-size:1.25rem;font-weight:700;color:var(--text-muted);flex-shrink:0;}
#settings-font-slider{
  flex:1;-webkit-appearance:none;appearance:none;
  height:4px;border-radius:2px;background:var(--border);outline:none;cursor:pointer;
}
#settings-font-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--brand-light);box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:pointer;
}
#settings-font-slider::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;border:none;
  background:var(--brand-light);cursor:pointer;
}
.settings-size-labels{
  display:flex;justify-content:space-between;
  padding:4px 2px 0;font-size:.68rem;color:var(--text-muted);font-weight:600;
}
.settings-theme-wrap{display:flex;gap:10px;}
.settings-theme-btn{
  flex:1;padding:10px 6px;border-radius:var(--radius);
  border:2px solid var(--border);background:#f8f9fa;
  cursor:pointer;font-size:.83rem;font-weight:600;color:var(--text-muted);
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:all .15s;font-family:var(--font);
}
.settings-theme-btn svg{width:18px;height:18px;fill:currentColor;flex-shrink:0;}
.settings-theme-btn.active{border-color:var(--brand-light);color:var(--brand-light);background:#e8f5f3;}
.settings-theme-btn:active{transform:scale(.97);}
.settings-library-btn{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;border-radius:var(--radius);
  border:1px solid var(--border);background:#f8f9fa;
  text-decoration:none;color:var(--text);font-size:.9rem;font-weight:600;
  transition:all .15s;
}
.settings-library-btn:hover{border-color:var(--brand-light);color:var(--brand-light);background:#e8f5f3;}
.settings-library-btn svg:first-child{width:20px;height:20px;fill:currentColor;flex-shrink:0;}
.settings-ext-icon{width:14px;height:14px;fill:currentColor;margin-left:auto;opacity:.5;flex-shrink:0;}

/* ── Desktop tweaks ──────────────────────────────────────────── */
@media (min-width:540px) {
  .nav-popup{left:auto;right:0;width:100%;max-width:720px;}
  .verse-bubble{max-width:80%;}
}