feat: migrate jina v5, refine AI popup, add reference popup UI

.gitignore

@@ -156,4 +156,9 @@ merge_corpus.py
 migrate_clean_data.py
 tipitaka_expert.py
 
+# ── Agent Data & Local DBs ──
+.serena/
+webapp/.serena/
+embedding_cache.db
+source_texts.db
 

webapp/tipitaka-api/app/routers/health.py

@@ -15,7 +15,7 @@ logger = logging.getLogger(__name__)
 router = APIRouter(prefix="/health", tags=["Health"])
 
 BASE_DIR = Path(__file__).resolve().parent.parent.parent
-STATE_FILE = "/tmp/tipitaka_health_state.json"
+STATE_FILE = "tipitaka_health_state.json"  # Relative to project root/CWD
 
 # ── Alert rules ──
 ALERT_COOLDOWN_SEC = 1800        # 30 นาที ไม่แจ้งซ้ำถ้าปัญหาเดิม
@@ -79,16 +79,55 @@ def check_database(settings) -> dict:
 
 
 def check_qdrant(settings) -> dict:
+    """
+    Filesystem-only Qdrant health check — does NOT open a new QdrantClient.
+    Prevents 'already accessed by another instance' lock conflicts
+    since RAGService already holds an open Local Mode client.
+    """
     try:
-        import qdrant_client
         p = _resolve(settings.QDRANT_PATH)
         if not os.path.isdir(p):
             return {"status": "error", "error": "Dir not found"}
-        client = qdrant_client.QdrantClient(path=p)
-        names = [c.name for c in client.get_collections().collections]
-        if "tipitaka_chunks" in names:
-            return {"status": "ok", "collections": names}
-        return {"status": "degraded", "message": "Collection missing"}
+
+        # Try server mode first (auto-detect)
+        qdrant_url = getattr(settings, "QDRANT_URL", None)
+        if not qdrant_url:
+            try:
+                import httpx
+                r = httpx.get("http://localhost:6333/healthz", timeout=0.5)
+                if r.status_code == 200:
+                    qdrant_url = "http://localhost:6333"
+            except Exception:
+                pass
+
+        if qdrant_url:
+            try:
+                import httpx
+                resp = httpx.get(f"{qdrant_url}/collections", timeout=1.0)
+                if resp.status_code == 200:
+                    data = resp.json()
+                    cols = [c["name"] for c in data.get("result", {}).get("collections", [])]
+                    has_chunks = any(c.startswith("tipitaka_chunks") for c in cols)
+                    if has_chunks:
+                        return {"status": "ok", "collections": cols}
+                    return {"status": "degraded", "message": "Collection missing"}
+                return {"status": "error", "error": f"Server returned {resp.status_code}"}
+            except Exception as e:
+                return {"status": "error", "error": str(e)[:150]}
+
+        # Filesystem check (Local Mode — safe, no client needed)
+        col_dir = Path(p) / "collections" / "tipitaka_chunks"
+        if col_dir.is_dir():
+            # Read segment count as a rough health indicator
+            segments = list(col_dir.glob("*/segments/*"))
+            snapshots = list(Path(p).glob("*/snapshot*"))
+            return {
+                "status": "ok",
+                "mode": "local",
+                "collections_hint": ["tipitaka_chunks"],
+                "segments": len(segments) // 2,
+            }
+        return {"status": "degraded", "message": "Collection directory missing"}
     except Exception as e:
         return {"status": "error", "error": str(e)[:150]}
 

webapp/tipitaka-api/app/services/page_service.py

@@ -36,9 +36,34 @@ class PageService:
             return f'<h4 class="content-heading">{text}</h4>'
         html = re.sub(r'<B>(.*?)</B>', _replace_b, html, flags=re.IGNORECASE | re.DOTALL)
         # Remove footnote markers: [๑], [๑๒], [ก], [ข] etc
-        html = re.sub(r'\[[\u0E50-\u0E59]+\]', '', html)  # Thai numeral: [๑], [๑๒]
-        html = re.sub(r'\[[\u0E01-\u0E39]+\]', '', html)  # Thai consonant: [ก], [ข]
-        html = re.sub(r'\[\d+\]', '', html)                 # Arabic numeral: [1], [12]
+        # Use simpler matching for markers that are NOT at the start of a line
+        def _strip_footnotes(html_str):
+            lines = html_str.split('\n')
+            cleaned_lines = []
+            for line in lines:
+                if not line.strip():
+                    cleaned_lines.append(line)
+                    continue
+                # If line starts with a marker, protect it, then strip others
+                # Pattern for start of line markers
+                start_marker = re.match(r'^(\[[\u0E50-\u0E59]+\]|\[[\u0E01-\u0E39]+\]|\[\d+\])', line)
+                if start_marker:
+                    marker = start_marker.group(1)
+                    rest = line[len(marker):]
+                    # Strip markers from the rest
+                    rest = re.sub(r'\[[\u0E50-\u0E59]+\]', '', rest)
+                    rest = re.sub(r'\[[\u0E01-\u0E39]+\]', '', rest)
+                    rest = re.sub(r'\[\d+\]', '', rest)
+                    cleaned_lines.append(marker + rest)
+                else:
+                    line = re.sub(r'\[[\u0E50-\u0E59]+\]', '', line)
+                    line = re.sub(r'\[[\u0E01-\u0E39]+\]', '', line)
+                    line = re.sub(r'\[\d+\]', '', line)
+                    cleaned_lines.append(line)
+            return '\n'.join(cleaned_lines)
+
+        html = _strip_footnotes(html)
+
         # Remove inline footnote refs like ๑- (only when preceded by non-space)
         html = re.sub(r'(?<=[^\s])[\u0E50-\u0E59]+-', '', html)
         # Remove leading item markers: ๑- at line start, [ก] etc
@@ -49,10 +74,162 @@ class PageService:
         # Convert <I> to <i>, <U> to <u>
         html = re.sub(r'<I>(.*?)</I>', r'<i>\1</i>', html, flags=re.IGNORECASE | re.DOTALL)
         html = re.sub(r'<U>(.*?)</U>', r'<u>\1</u>', html, flags=re.IGNORECASE | re.DOTALL)
-        # Normalize whitespace
-        html = re.sub(r'\n{3,}', '\n\n', html)
-        html = re.sub(r'\t+', ' ', html)
-        return html.strip()
+
+        # ── Marker Normalization ──
+        # Ensure markers like (๑), ถาม., ตอบ. start on a new line if they are currently inline
+        # NOTE: Exclude '(' from the preceding char group — otherwise (๑) gets split into ( + \n๑)
+        marker_regex = r'(\([\u0E50-\u0E59]+\)|\[[\u0E50-\u0E59]+\]|[\u0E50-\u0E59]+\.|ถาม\.|ตอบ\.|\[\d+\]|\d+\.|\(\d+\)|\d+\))'
+        html = re.sub(r'([^\s\n\r>(\[])\s*' + marker_regex, r'\1\n\2', html)
+
+        # ── Semantic Paragraph Wrapping ──
+        # Split by existing block elements (h4) to wrap text between them
+        parts = re.split(r'(<h4.*?/h4>)', html, flags=re.DOTALL)
+        wrapped_parts = []
+        
+        # Pattern 1: Section-heading markers that START a line AND have content after them
+        # e.g.  ๑. ผู้มีวิชชา...  ถาม. / ถาม : / ตอบ :  — must have text following the marker
+        # Also includes parenthetical Thai numerals: (๑), (๒), (๑๐) etc.
+        num_pattern = r'^\s*([\u0E50-\u0E59]+[\.\)]|\([\u0E50-\u0E59]+\)|ถาม\s*[\.\:]|ตอบ\s*[\.\:]|\d+[\.\)]|\(\d+\))\s+\S'
+
+        # Pattern 2: Standalone footnote/endnote reference markers — MUST be fully bracketed
+        # e.g.  (๑)  [๑]  (1)  — bare digit) is NOT included because it may be a split tail
+        # of a longer expression like (เรื่องที่ ๓) broken across two raw lines.
+        footnote_pattern = r'^\s*(\([\u0E50-\u0E59]+\)|\[[\u0E50-\u0E59]+\]|\(\d+\)|\[\d+\])\s*$'
+
+        for part in parts:
+            if part.startswith('<h4'):
+                wrapped_parts.append(part)
+            else:
+                # Split text into lines/paragraphs
+                raw_lines = [line.strip() for line in part.split('\n') if line.strip()]
+                
+                # Merge split lines:
+                # Case A: lone '(' or '[' split from its marker, e.g. ['(', '๑) text'] → ['(๑) text']
+                # Case B: previous line ends with unclosed '(' and current line is digits+)
+                #         e.g. ['... (เรื่องที่', '๓)'] → ['... (เรื่องที่ ๓)']
+                merged_lines = []
+                i = 0
+                while i < len(raw_lines):
+                    line = raw_lines[i]
+                    if line in ('(', '[') and i + 1 < len(raw_lines):
+                        # Case A: lone bracket split from its marker
+                        merged_lines.append(line + raw_lines[i + 1])
+                        i += 2
+                    elif (
+                        merged_lines
+                        and re.search(r'\([^)]*$', merged_lines[-1])   # previous line has unclosed (
+                        and re.match(r'^[\u0E50-\u0E59\d]+[\)\]]\s*$', line)  # current is digits)
+                    ):
+                        # Case B — rejoin as continuation, not a new line
+                        merged_lines[-1] = merged_lines[-1] + line
+                        i += 1
+                    elif (
+                        re.match(r'^[\u0E50-\u0E59]+$', line)          # Case C: only Thai digits, no . or )
+                        and i + 1 < len(raw_lines)
+                        and re.match(r'^[\u0E50-\u0E59]+[\.\)]', raw_lines[i + 1])  # next starts digit + . or )
+                    ):
+                        # e.g. DB row "๑" + next row "๐. หัวข้อ" → "๑๐. หัวข้อ"
+                        merged_lines.append(line + raw_lines[i + 1])
+                        i += 2
+                    else:
+                        merged_lines.append(line)
+                        i += 1
+
+                # Accumulate consecutive body lines into single <p> elements.
+                # Each DB line is a raw manuscript line — multiple DB lines form one
+                # semantic paragraph. Grouping them lets text-align:justify work
+                # (justify only has effect on lines that aren't the last line of a <p>).
+                para_buf = []   # buffered body lines for the current paragraph
+
+                # Option B: length threshold — short merged content = left-align item,
+                # long merged content = paragraph (justify applies meaningfully).
+                PARA_MIN_CHARS = 80
+
+                # Pattern: standalone (ย่อ) markers in all forms:
+                #   (ย่อ)  /  ๓ (ย่อ)  /  (๓) (ย่อ)
+                abbrev_pattern = r'^\s*([\u0E50-\u0E59]+|\([\u0E50-\u0E59]+\))?\s*\(ย่อ\)\s*$'
+
+                def apply_inline_refs(text: str) -> str:
+                    """Wrap inline (Thai_digit) and (ย่อ) references as superscript."""
+                    text = re.sub(
+                        r'(?<=\S)\s*\(([\u0E50-\u0E59]+|\d+)\)',
+                        r'<sup class="footnote-ref">(\1)</sup>',
+                        text
+                    )
+                    text = re.sub(
+                        r'\s*\(ย่อ\)',
+                        r' <sup class="abbrev-ref">(ย่อ)</sup>',
+                        text
+                    )
+                    return text
+
+                def flush_para():
+                    """Output buffered lines as a <p>. Short content → left-align."""
+                    if para_buf:
+                        text = apply_inline_refs(' '.join(para_buf))
+                        if len(text) >= PARA_MIN_CHARS:
+                            wrapped_parts.append(f'<p>{text}</p>')
+                        else:
+                            wrapped_parts.append(f'<p class="structured-line">{text}</p>')
+                        para_buf.clear()
+
+                for line in merged_lines:
+                    if re.match(footnote_pattern, line):
+                        flush_para()
+                        marker = line.strip()
+                        # Attach inline to the previous <p> so it doesn't create a gap
+                        if wrapped_parts and wrapped_parts[-1].startswith('<p') and wrapped_parts[-1].endswith('</p>'):
+                            wrapped_parts[-1] = wrapped_parts[-1][:-4] + f' <sup class="footnote-ref">{marker}</sup></p>'
+                        else:
+                            wrapped_parts.append(f'<p class="footnote-ref">{marker}</p>')
+                    elif re.match(abbrev_pattern, line):
+                        # (ย่อ) / ๓ (ย่อ) / (๓) (ย่อ) — split into separate sups:
+                        # number part → footnote-ref, (ย่อ) → abbrev-ref
+                        flush_para()
+                        m = re.match(
+                            r'^\s*([\u0E50-\u0E59]+|\([\u0E50-\u0E59]+\))?\s*(\(ย่อ\))\s*$',
+                            line.strip()
+                        )
+                        if m and m.group(1):
+                            sup_html = (
+                                f'<sup class="footnote-ref">{m.group(1)}</sup>'
+                                f'\u202f<sup class="abbrev-ref">{m.group(2)}</sup>'
+                            )
+                        else:
+                            sup_html = f'<sup class="abbrev-ref">(ย่อ)</sup>'
+                        if wrapped_parts and wrapped_parts[-1].startswith('<p') and wrapped_parts[-1].endswith('</p>'):
+                            wrapped_parts[-1] = wrapped_parts[-1][:-4] + f' {sup_html}</p>'
+                        else:
+                            wrapped_parts.append(sup_html)
+
+
+                    elif line.startswith('...'):
+                        # Continuation / repetition marker in Patthana — no paragraph indent
+                        flush_para()
+                        formatted_line = apply_inline_refs(line)
+                        wrapped_parts.append(f'<p class="continuation-line">{formatted_line}</p>')
+
+                    elif re.match(num_pattern, line):
+                        flush_para()
+                        wrapped_parts.append(f'<p class="numbered-line">{line}</p>')
+                    elif re.search(r'[ \t]{4,}', line):
+                        # Structural line — large internal spaces (tabular data)
+                        flush_para()
+                        clean = re.sub(r'[ \t]{2,}', ' ', line).strip()
+                        wrapped_parts.append(f'<p class="structured-line">{clean}</p>')
+                    elif re.search(r'(มี\s*[๐-๙\d]+\s*วาระ|\(ย่อ\)|\(อย่อ\)|ฯลฯ)\s*$', line):
+                        # Patthana/Abhidhamma terminal — flush trigger, then length decides class
+                        para_buf.append(line)
+                        flush_para()
+                    else:
+                        # Regular body text — accumulate into current paragraph
+                        para_buf.append(line)
+
+                flush_para()   # flush any remaining lines at end of section
+
+        
+        return "".join(wrapped_parts)
+
 
     def get_page(self, volume_number: int, page_number: int):
         with self.db.get_connection() as conn:

webapp/tipitaka-web/src/components/ai/AIPopup.tsx

@@ -338,15 +338,24 @@ const AIPopup: React.FC = () => {
             )}
             {/* ═══════════ Compact Header + Drag Handle ═══════════ */}
             <div
-              className="flex flex-col flex-shrink-0 bg-[#c8860a] text-white"
+              className="flex flex-col flex-shrink-0 relative overflow-hidden"
               onMouseDown={handleMouseDown}
               style={{ cursor: window.innerWidth >= 768 ? 'grab' : undefined }}
             >
+              {/* Glass background layer */}
+              <div className="absolute inset-0 bg-[#c8860a] opacity-90" />
+              <div className="absolute inset-0 bg-gradient-to-br from-white/20 to-transparent pointer-events-none" />
+              
               {/* Row 1: Title + actions */}
-              <div className="flex items-center justify-between px-3 py-2">
-                <div className="flex items-center gap-2 min-w-0">
-                  <Sparkles size={16} className="flex-shrink-0" />
-                  <h3 className="font-bold text-sm tracking-wide truncate">ผู้ช่วย AI</h3>
+              <div className="relative flex items-center justify-between px-3 py-2.5 z-10">
+                <div className="flex items-center gap-2.5 min-w-0">
+                  <div className="w-7 h-7 rounded-lg bg-white/20 flex items-center justify-center shadow-inner">
+                    <Sparkles size={16} className="text-white" />
+                  </div>
+                  <div>
+                    <h3 className="font-bold text-sm tracking-wide text-white">ผู้ช่วย AI</h3>
+                    <p className="text-[9px] text-white/70 font-medium uppercase tracking-tighter">Dhamma Assistant</p>
+                  </div>
                 </div>
                 <div className="flex items-center gap-1 flex-shrink-0">
                   <div className="flex bg-black/15 rounded-lg p-0.5 mr-1">
@@ -506,14 +515,18 @@ const AIPopup: React.FC = () => {
             </div>
 
             {/* ═══════════ Input ═══════════ */}
-            <form onSubmit={handleSubmit} className={`p-2 md:p-3 border-t ${s.border} flex gap-2 flex-shrink-0 ${s.bg}`}>
-              <input type="text" value={input} onChange={(e) => setInput(e.target.value)}
-                placeholder="ถาม AI ได้เลย..." disabled={isStreaming}
-                className={`flex-1 px-3 py-2 rounded-2xl outline-none text-sm disabled:opacity-50 border ${s.border} ${s.msgBg} ${s.text} focus:border-[#c8860a] transition-colors`}
-              />
-              <button type="submit" disabled={!input.trim() || isStreaming}
-                className="p-2 bg-[#c8860a] text-white rounded-full disabled:opacity-50 hover:bg-[#9a6307] transition-colors flex-shrink-0"
-              ><Send size={16} /></button>
+            <form onSubmit={handleSubmit} className={`p-3 md:p-4 border-t ${s.border} flex gap-2 flex-shrink-0 ${s.bg}`}>
+              <div className="relative flex-1">
+                <input type="text" value={input} onChange={(e) => setInput(e.target.value)}
+                  placeholder="ถามเกี่ยวกับพระธรรมในหน้านี้..." disabled={isStreaming}
+                  className={`w-full pl-4 pr-12 py-2.5 rounded-2xl outline-none text-sm disabled:opacity-50 border shadow-inner transition-all ${s.border} ${s.msgBg} ${s.text} focus:border-[#c8860a] focus:ring-2 focus:ring-[#c8860a]/20`}
+                />
+                <button type="submit" disabled={!input.trim() || isStreaming}
+                  className="absolute right-1.5 top-1.5 p-2 bg-[#c8860a] text-white rounded-xl disabled:opacity-50 hover:bg-[#9a6307] transition-all shadow-md active:scale-95"
+                >
+                  <Send size={14} />
+                </button>
+              </div>
             </form>
           </motion.div>
         </>

webapp/tipitaka-web/src/components/layout/AppShell.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import NavDrawer from './NavDrawer';
 import ReaderPanel from './ReaderPanel';
 import RightToolbar from '../toolbar/RightToolbar';
@@ -7,14 +7,14 @@ import AIPopup from '../ai/AIPopup';
 import { Menu } from 'lucide-react';
 import { useUIStore, useThemeStore } from '../../stores/appStore';
 import { useAIStore } from '../../stores/aiStore';
-import { AnimatePresence } from 'framer-motion';
+import { AnimatePresence, motion } from 'framer-motion';
 import { useKeyboardNav } from '../../hooks/useKeyboardNav';
 
 // Shell = NavDrawer bg per theme — seamless sidebar integration
 const SHELL_BG: Record<string, string> = {
-  dark:    'bg-[#1a1a2e]',   // Indigo Midnight
-  light:   'bg-[#f8f6f0]',   // Warm White
-  classic: 'bg-[#f5edd8]',   // Cream Dark
+  dark:    'theme-dark-bg',
+  light:   'theme-light-bg',
+  classic: 'theme-classic-bg',
 };
 
 // Menu button bg per theme (matches RightToolbar bg for visual consistency)
@@ -35,6 +35,20 @@ const AppShell: React.FC = () => {
   const shellBg = SHELL_BG[theme] ?? SHELL_BG.dark;
   const menuBtn = MENU_BTN[theme] ?? MENU_BTN.dark;
 
+  // ── Scroll Progress ────────────────────────────────────────
+  const [scrollProgress, setScrollProgress] = React.useState(0);
+  useEffect(() => {
+    const el = document.getElementById('reader-scroll-container');
+    if (!el) return;
+    const handleScroll = () => {
+      const total = el.scrollHeight - el.clientHeight;
+      if (total <= 0) { setScrollProgress(0); return; }
+      setScrollProgress((el.scrollTop / total) * 100);
+    };
+    el.addEventListener('scroll', handleScroll);
+    return () => el.removeEventListener('scroll', handleScroll);
+  }, []);
+
   return (
     <div className={`flex h-screen overflow-hidden ${shellBg}`}>
       {/* Left: NavDrawer */}
@@ -42,6 +56,16 @@ const AppShell: React.FC = () => {
 
       {/* Centre: Reader — right-padded to clear RightToolbar (44px) on desktop */}
       <div className="flex-1 flex flex-col relative overflow-hidden lg:pr-11">
+        {/* Scroll Progress Bar */}
+        <div className="absolute top-0 left-0 right-0 h-0.5 z-40 bg-white/5">
+          <motion.div
+            className="h-full bg-[#c8860a]"
+            initial={{ width: 0 }}
+            animate={{ width: `${scrollProgress}%` }}
+            transition={{ type: 'spring', stiffness: 300, damping: 30 }}
+          />
+        </div>
+
         {/* Menu button — visible only when drawer is closed */}
         {!isNavOpen && (
           <button

webapp/tipitaka-web/src/components/layout/ReaderPanel.tsx

@@ -3,6 +3,7 @@ import { useReaderStore, useThemeStore } from '../../stores/appStore';
 import api from '../../lib/api';
 import { motion, AnimatePresence } from 'framer-motion';
 import SelectionPopup from '../reader/SelectionPopup';
+import ReferencePopup, { type RefPopupPos } from '../reader/ReferencePopup';
 import { useSwipeNav } from '../../hooks/useSwipeNav';
 
 const THEME_STYLES: Record<string, { reader: string; muted: string }> = {
@@ -12,20 +13,17 @@ const THEME_STYLES: Record<string, { reader: string; muted: string }> = {
 };
 
 const SHELL_STYLES: Record<string, string> = {
-  dark:    'bg-[#1a1a2e]',
-  light:   'bg-[#f8f6f0]',
-  classic: 'bg-[#f5edd8]',
+  dark:    'theme-dark-bg',
+  light:   'theme-light-bg',
+  classic: 'theme-classic-bg',
 };
 
 const renderContent = (html: string, fontSize: number, endMarkers: string[]) => {
   return (
-    <div
-      style={{ fontSize: `${fontSize}px`, lineHeight: '2.1' }}
-      className="reader-content text-center space-y-3"
-    >
+    <div style={{ fontSize: `${fontSize}px` }}>
       {html ? (
         <div
-          className="content-body leading-[2.1] text-justify"
+          className="content-body reader-content"
           dangerouslySetInnerHTML={{ __html: html }}
         />
       ) : (
@@ -35,9 +33,13 @@ const renderContent = (html: string, fontSize: number, endMarkers: string[]) =>
       {endMarkers.length > 0 && (
         <div className="space-y-1 pt-2">
           {endMarkers.map((title, i) => (
-            <p key={i} className="text-xs text-[#888] tracking-widest">
-              --------- {title} ---------
-            </p>
+            <div key={i} className="flex items-center gap-4 py-2 opacity-40">
+              <div className="flex-1 h-px bg-gradient-to-r from-transparent via-[#888] to-transparent" />
+              <p className="text-[10px] text-[#888] tracking-[0.2em] uppercase font-medium">
+                {title}
+              </p>
+              <div className="flex-1 h-px bg-gradient-to-r from-transparent via-[#888] to-transparent" />
+            </div>
           ))}
         </div>
       )}
@@ -69,29 +71,30 @@ const renderFirstPage = (html: string, fontSize: number, volumeTitle: string) =>
 
   return (
     <div
-      style={{ fontSize: `${fontSize}px`, lineHeight: '2.1' }}
-      className="text-center space-y-3"
+      style={{ fontSize: `${fontSize}px` }}
     >
-      {/* Volume title — centered */}
-      <p className="text-lg md:text-xl font-bold text-[#c8860a] leading-tight">
-        {line1}
-      </p>
-      {line2 && (
-        <p className="text-base md:text-lg text-[#c8860a] leading-tight">
-          {line2}
+      {/* Volume title — centered explicitly */}
+      <div className="text-center">
+        <p className="text-lg md:text-xl font-bold text-[#c8860a] leading-tight">
+          {line1}
         </p>
-      )}
-      <div className="border-b border-[#c8860a]/15 my-3" />
+        {line2 && (
+          <p className="text-base md:text-lg text-[#c8860a] leading-tight">
+            {line2}
+          </p>
+        )}
+        <div className="border-b border-[#c8860a]/15 my-3" />
+      </div>
       {html ? (
         <>
           {/* Top: everything before/at homage — centered, clean */}
           <div
-            className="first-page-top leading-[2.1]"
+            className="first-page-top text-center"
             dangerouslySetInnerHTML={{ __html: topPart }}
           />
           {/* Bottom: after homage — normal h4 styling, text-justify */}
           <div
-            className="content-body leading-[2.1] text-justify"
+            className="content-body reader-content"
             dangerouslySetInnerHTML={{ __html: bottomPart }}
           />
         </>
@@ -112,6 +115,7 @@ const ReaderPanel: React.FC = () => {
   const { theme, fontSize } = useThemeStore();
   const [content, setContent] = React.useState<any>(null);
   const [loading, setLoading] = React.useState(true);
+  const [refPos, setRefPos] = React.useState<RefPopupPos | null>(null);
   const prevPageRef = useRef(currentPage);
 
   const swipeRef = useSwipeNav<HTMLDivElement>();
@@ -136,9 +140,28 @@ const ReaderPanel: React.FC = () => {
   const { reader: readerCls } = THEME_STYLES[theme] ?? THEME_STYLES.dark;
   const shellCls = SHELL_STYLES[theme] ?? SHELL_STYLES.dark;
 
+  const handleArticleClick = (e: React.MouseEvent) => {
+    const target = e.target as HTMLElement;
+    if (target.tagName.toLowerCase() === 'sup') {
+      const isAbbrev = target.classList.contains('abbrev-ref');
+      const isFootnote = target.classList.contains('footnote-ref');
+      
+      if (isAbbrev || isFootnote) {
+        const rect = target.getBoundingClientRect();
+        setRefPos({
+          x: rect.left + rect.width / 2,
+          y: rect.bottom,
+          id: target.innerText,
+          type: isAbbrev ? 'abbrev' : 'footnote'
+        });
+      }
+    }
+  };
+
   return (
     <div ref={swipeRef} className={`flex-1 min-h-screen transition-colors duration-300 ${shellCls}`}>
       <SelectionPopup />
+      <ReferencePopup pos={refPos} onClose={() => setRefPos(null)} />
       <div className="max-w-3xl mx-auto px-4 py-10 lg:py-16">
         <AnimatePresence mode="wait">
           {loading ? (
@@ -157,6 +180,7 @@ const ReaderPanel: React.FC = () => {
               initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.35, ease: 'easeOut' }}
               className={`rounded-xl p-8 lg:p-12 ${readerCls}`}
+              onClick={handleArticleClick}
             >
               {currentPage === 1 || content?.page_number === 1 ? (
                 renderFirstPage(

webapp/tipitaka-web/src/components/reader/ReferencePopup.tsx

@@ -0,0 +1,81 @@
+import React, { useEffect, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+export interface RefPopupPos {
+  x: number;
+  y: number;
+  id: string;
+  type: 'abbrev' | 'footnote';
+}
+
+interface Props {
+  pos: RefPopupPos | null;
+  onClose: () => void;
+}
+
+const ReferencePopup: React.FC<Props> = ({ pos, onClose }) => {
+  const popupRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    // Click outside popup → close
+    const onMouseDown = (e: MouseEvent | TouchEvent) => {
+      // Don't close if they clicked on another reference (it will update pos)
+      const target = e.target as HTMLElement;
+      if (target.tagName?.toLowerCase() === 'sup' && (target.classList.contains('abbrev-ref') || target.classList.contains('footnote-ref'))) {
+        return;
+      }
+      if (popupRef.current && !popupRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+
+    document.addEventListener('mousedown', onMouseDown);
+    document.addEventListener('touchstart', onMouseDown);
+    return () => {
+      document.removeEventListener('mousedown', onMouseDown);
+      document.removeEventListener('touchstart', onMouseDown);
+    };
+  }, [onClose]);
+
+  return (
+    <AnimatePresence>
+      {pos && (
+        <motion.div
+          ref={popupRef}
+          key="ref-popup"
+          initial={{ opacity: 0, scale: 0.95, y: 8 }}
+          animate={{ opacity: 1, scale: 1, y: 0 }}
+          exit={{ opacity: 0, scale: 0.95, y: 8 }}
+          transition={{ duration: 0.15, ease: 'easeOut' }}
+          style={{
+            position: 'fixed',
+            left: pos.x,
+            top: pos.y,
+            transform: 'translate(-50%, 8px)', // 8px gap below the target
+            zIndex: 9998,
+          }}
+          className="w-64 p-4 rounded-xl shadow-2xl bg-[#1a1a2e] border border-[#3a3a5e] text-[#e8e4da] text-sm leading-relaxed"
+        >
+          <div className="flex items-center gap-2 mb-2 pb-2 border-b border-[#3a3a5e]">
+            <span className="text-[#c8860a] font-bold">{pos.id}</span>
+            <span className="text-xs text-[#888]">
+              {pos.type === 'abbrev' ? 'เนื้อหาส่วนที่ย่อไว้' : 'เชิงอรรถ'}
+            </span>
+          </div>
+          <p className="opacity-80 text-xs">
+            {pos.type === 'abbrev' 
+              ? "กำลังอยู่ในระหว่างการพัฒนา เพื่อดึงข้อมูลส่วนที่ถูกย่อมาแสดงผล..."
+              : "ข้อมูลเชิงอรรถกำลังอยู่ในระหว่างการพัฒนา..."}
+          </p>
+          {/* tail arrow pointing up */}
+          <div
+            className="pointer-events-none absolute left-1/2 -translate-x-1/2 -top-[6px]
+                       w-3 h-3 bg-[#1a1a2e] border-l border-t border-[#3a3a5e] rotate-45"
+          />
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};
+
+export default ReferencePopup;

webapp/tipitaka-web/src/index.css

@@ -12,7 +12,7 @@
 
 :root {
   font-family: var(--font-sarabun);
-  line-height: 1.6;
+  line-height: 1.7;
   font-weight: 400;
 
   color: var(--color-pali-text);
@@ -38,22 +38,91 @@ body {
 /* ── Thai/Pali Typography ──────────────────────────────────────── */
 
 /* Font-kerning and Thai OpenType features for the body reading text */
-.reader-content p {
-  /* Justification: inter-character adjusts spacing between Thai characters,
-     producing cleaner rag than inter-word (which needs spaces Thai doesn't have) */
-  text-justify: inter-character;
-  /* Prevent inappropriate line breaks in Thai (no spaces between words) */
-  word-break: keep-all;
-  overflow-wrap: break-word;
-  /* Enable font kerning */
+.reader-content p,
+.content-body p {
+  /* !important overrides Tailwind typography plugin defaults and any inherited text-center */
+  text-align: justify !important;
+  text-align-last: left !important;
+  text-justify: auto !important;
+  text-indent: 2em;
+  margin-bottom: 0.6rem !important;
+  line-height: 1.75 !important;
+  word-break: normal;
+  line-break: loose;
+  overflow-wrap: anywhere;
   font-kerning: normal;
-  /* OpenType features for Thai script rendering */
   font-feature-settings: "kern" 1, "liga" 1, "clig" 1;
-  /* Balanced orphans/widows for paragraphs */
   orphans: 2;
   widows: 2;
 }
 
+.reader-content p.numbered-line,
+.content-body p.numbered-line {
+  padding-left: 2.8em;
+  text-indent: -2.8em;
+  text-align: left !important;
+  text-justify: none;
+}
+
+/* Structured/tabular lines (e.g. Abhidhamma Patthana) — kept as standalone rows */
+.reader-content p.structured-line,
+.content-body p.structured-line {
+  text-align: left !important;
+  text-indent: 0;
+  text-justify: none;
+  margin-bottom: 0.1rem !important;
+}
+
+
+
+/* Continuation / repetition lines starting with "..." — no paragraph indent */
+.reader-content p.continuation-line,
+.content-body p.continuation-line {
+  text-indent: 0 !important;
+}
+
+/* All inline reference superscripts — same colour, same cursor for future click-to-expand */
+sup.footnote-ref,
+sup.abbrev-ref {
+  font-size: 0.7em;
+  color: #f59e0b;
+  opacity: 0.8;
+  vertical-align: super;
+  cursor: pointer;
+  letter-spacing: 0.03em;
+  transition: opacity 0.15s;
+}
+sup.footnote-ref:hover,
+sup.abbrev-ref:hover {
+  opacity: 1;
+  text-decoration: underline;
+}
+
+/* Standalone fallback block — remove gaps so it reads like part of the paragraph above */
+.reader-content p.footnote-ref {
+  display: inline;          /* collapses to inline flow — no block gap */
+  font-size: 0.72em;
+  opacity: 0.55;
+  margin: 0;
+  padding: 0;
+  text-indent: 0;
+}
+
+/* Wrap each footnote-ref in a block-level container so "display:inline" still works inside prose */
+.reader-content p.footnote-ref::before {
+  content: " ";             /* space before the marker */
+}
+
+/* Paragraph immediately before a footnote-ref: kill its bottom margin */
+.reader-content p:has(+ p.footnote-ref) {
+  margin-bottom: 0 !important;
+}
+
+/* Paragraph immediately after a footnote-ref: normal top gap resumes */
+.reader-content p.footnote-ref + p {
+  margin-top: 0;
+}
+
 /* Remove gap when <br/> is at the start of a <p> (edge case) */
 .reader-content p:first-child {
   margin-top: 0;
@@ -70,10 +139,35 @@ body {
   border-image: linear-gradient(to bottom, #D4AF37, #F4E7A5, #D4AF37) 1;
 }
 
+/* ── Theme Backgrounds with Textures ────────────────────────── */
+.theme-light-bg {
+  background-color: #f8f6f0;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.012'/%3E%3C/svg%3E");
+}
+
+.theme-classic-bg {
+  background-color: #f5edd8;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.015'/%3E%3C/svg%3E");
+}
+
+.theme-dark-bg {
+  background-color: #1a1a2e;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.018'/%3E%3C/svg%3E");
+}
+
 .glass-panel {
-  background: rgba(255, 255, 255, 0.7);
-  backdrop-filter: blur(8px);
-  border: 1px solid rgba(212, 175, 55, 0.2);
+  background: rgba(255, 255, 255, 0.03);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+}
+
+.glass-panel-light {
+  background: rgba(255, 255, 255, 0.6);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(200, 134, 10, 0.1);
 }
 
 /* ── Inline Content Headings ── smaller than body text, highlight makes it stand out */