Add support for multiple PDF uploads and enhanced citation handling

- Implemented functionality to upload multiple PDF files and process them concurrently.
- Introduced new helper functions for reading uploaded PDFs and rendering citations with source text.
- Enhanced Markdown export to include detailed citation blocks.
- Updated UI components to reflect changes in file upload capabilities and citation display.
- Improved progress tracking during document processing.

app.py

@@ -1,6 +1,7 @@
 from __future__ import annotations
 
 import base64
+import html
 import json
 from pathlib import Path
 from typing import Any
@@ -47,6 +48,26 @@ def _img_b64(path: str) -> str:
 def _status_html(message: str) -> str:
     return f'<div class="status-bar">{message}</div>'
 
+def _result_markdown() -> gr.Markdown:
+    """Create a result Markdown that allows safe HTML when supported.
+
+    We render citations using HTML <details> blocks for expand/collapse.
+    Gradio versions differ in how they gate HTML in Markdown, so we fall back
+    gracefully when a flag is unavailable.
+    """
+    candidates = (
+        {"sanitize_html": False},
+        {"sanitize": False},
+        {"unsafe_allow_html": True},
+        {},
+    )
+    for kwargs in candidates:
+        try:
+            return gr.Markdown(elem_classes="result-markdown", **kwargs)
+        except TypeError:
+            continue
+    return gr.Markdown(elem_classes="result-markdown")
+
 def _read_uploaded_pdf(file_obj: object) -> tuple[bytes, str]:
     """Normalize Gradio file payload into (bytes, filename).
 
@@ -76,6 +97,14 @@ def _read_uploaded_pdf(file_obj: object) -> tuple[bytes, str]:
 
     raise TypeError(f"Unsupported uploaded file type: {type(file_obj).__name__}")
 
+def _read_uploaded_pdfs(file_obj: object) -> list[tuple[bytes, str]]:
+    """Normalize Gradio file payload into a list of (bytes, filename)."""
+    if file_obj is None:
+        return []
+    if isinstance(file_obj, (list, tuple)):
+        return [_read_uploaded_pdf(x) for x in file_obj]
+    return [_read_uploaded_pdf(file_obj)]
+
 
 def _filters(filenames: list[str] | None, page: int | None) -> dict[str, object] | None:
     payload: dict[str, object] = {}
@@ -119,7 +148,8 @@ def _pages_for_selection(doc_map: dict[str, Any], selected: list[str]) -> gr.Dro
 def _upload_pdf(
     file: object | None,
 ) -> tuple[str, object, dict[str, Any], object, str, str]:
-    if file is None:
+    payloads = _read_uploaded_pdfs(file)
+    if not payloads:
         choices, doc_map, page_dropdown, summary, filenames_text = _refresh_docs()
         return (
             _status_html("⚠️ Vui lòng chọn file PDF."),
@@ -129,9 +159,31 @@ def _upload_pdf(
             summary,
             filenames_text,
         )
-    file_bytes, filename = _read_uploaded_pdf(file)
-    info = save_and_ingest_pdf(file_bytes, filename)
-    message = _status_html(f"✅ Đã nạp **{info['filename']}** · {info['chunks_indexed']} đoạn")
+
+    successes: list[str] = []
+    failures: list[str] = []
+    chunks_total = 0
+    for file_bytes, filename in payloads:
+        try:
+            info = save_and_ingest_pdf(file_bytes, filename)
+        except Exception as e:  # noqa: BLE001
+            failures.append(f"{filename}: {e}")
+            continue
+        successes.append(str(info["filename"]))
+        chunks_total += int(info.get("chunks_indexed") or 0)
+
+    parts: list[str] = []
+    if successes:
+        parts.append(f"✅ Đã nạp {len(successes)} file · {chunks_total} đoạn")
+    if failures:
+        parts.append(f"⚠️ Lỗi **{len(failures)}** file")
+    details = ""
+    if failures:
+        items = "".join(f"<li><code>{html.escape(x, quote=False)}</code></li>" for x in failures)
+        details = f"<details><summary>Xem lỗi</summary><ul>{items}</ul></details>"
+    message_body = (" · ".join(parts) if parts else "⚠️ Không có file hợp lệ.") + details
+    message = _status_html(message_body)
+
     choices, doc_map, page_dropdown, summary, filenames_text = _refresh_docs()
     return message, choices, doc_map, page_dropdown, summary, filenames_text
 
@@ -142,13 +194,23 @@ def _ask(question: str, k: int, selected_docs: list[str], page: str, gemini_key:
     page_num = None if page == "(Tất cả trang)" else int(page)
     set_runtime_gemini_api_key(gemini_key)
     res = answer(question.strip(), k=int(k), filters=_filters(selected_docs, page_num))
-    return res.answer, json.dumps(res.model_dump(), ensure_ascii=False, indent=2)
+    return export(res, fmt="md"), json.dumps(res.model_dump(), ensure_ascii=False, indent=2)
 
 
-def _summarize(query: str, k: int, selected_docs: list[str], page: str, gemini_key: str) -> tuple[str, str]:
+def _summarize(
+    query: str,
+    k: int,
+    selected_docs: list[str],
+    page: str,
+    gemini_key: str,
+    progress: gr.Progress = gr.Progress(),
+) -> tuple[str, str]:
     page_num = None if page == "(Tất cả trang)" else int(page)
     set_runtime_gemini_api_key(gemini_key)
+    progress(0.0, desc="Đang chuẩn bị…")
+    progress(0.2, desc="Đang truy xuất ngữ cảnh…")
     res = summarize(query=query.strip() or None, filters=_filters(selected_docs, page_num), k=int(k))
+    progress(0.85, desc="Đang định dạng kết quả…")
     return export(res, fmt="md"), res.model_dump_json(indent=2)
 
 
@@ -159,15 +221,19 @@ def _quiz(
     selected_docs: list[str],
     page: str,
     gemini_key: str,
+    progress: gr.Progress = gr.Progress(),
 ) -> tuple[str, str]:
     page_num = None if page == "(Tất cả trang)" else int(page)
     set_runtime_gemini_api_key(gemini_key)
+    progress(0.0, desc="Đang chuẩn bị…")
+    progress(0.2, desc="Đang truy xuất ngữ cảnh…")
     res = generate_quiz(
         query=query.strip() or None,
         count=int(count),
         filters=_filters(selected_docs, page_num),
         k=int(k),
     )
+    progress(0.85, desc="Đang định dạng kết quả…")
     return export(res, fmt="md"), res.model_dump_json(indent=2)
 
 
@@ -178,15 +244,19 @@ def _flashcards(
     selected_docs: list[str],
     page: str,
     gemini_key: str,
+    progress: gr.Progress = gr.Progress(),
 ) -> tuple[str, str]:
     page_num = None if page == "(Tất cả trang)" else int(page)
     set_runtime_gemini_api_key(gemini_key)
+    progress(0.0, desc="Đang chuẩn bị…")
+    progress(0.2, desc="Đang truy xuất ngữ cảnh…")
     res = generate_flashcards(
         query=query.strip() or None,
         count=int(count),
         filters=_filters(selected_docs, page_num),
         k=int(k),
     )
+    progress(0.85, desc="Đang định dạng kết quả…")
     return export(res, fmt="md"), res.model_dump_json(indent=2)
 
 
@@ -208,13 +278,13 @@ _theme = gr.themes.Base().set(
     input_background_fill="#ffffff",
 )
 
-with gr.Blocks(title="RAG Learning System", fill_width=True, fill_height=True) as demo:
+with gr.Blocks(title="Building a Simple NotebookLM", fill_width=True, fill_height=True) as demo:
     with gr.Row(elem_classes="header-row"):
         logo_b64 = _img_b64("static/aivn_logo.png")
         gr.HTML(f'<img src="data:image/png;base64,{logo_b64}" alt="AIVN">')
         gr.HTML(
             '<div class="header-meta">'
-            '<p class="header-title">📚 RAG Learning System</p>'
+            '<p class="header-title">📚 Building a Simple NotebookLM</p>'
             '<p class="header-sub">AIO2025 — Hỏi đáp · Tóm tắt · Quiz · Flashcards có trích dẫn nguồn</p>'
             '</div>'
         )
@@ -229,7 +299,7 @@ with gr.Blocks(title="RAG Learning System", fill_width=True, fill_height=True) a
             upload = gr.File(
                 label="Chọn PDF",
                 file_types=[".pdf"],
-                file_count="single",
+                file_count="multiple",
                 type="filepath",
             )
             upload_btn = gr.Button("Nạp & Index", elem_classes="gen-btn")
@@ -238,7 +308,8 @@ with gr.Blocks(title="RAG Learning System", fill_width=True, fill_height=True) a
             # with gr.Group(elem_classes="control-card"):
             with gr.Accordion("🔑 Gemini API Key (tuỳ chọn)", open=False):
                 gr.Markdown(
-                    "API key chỉ dùng trong phiên hiện tại và **không được lưu**.",
+                    "Nhập API key để chạy Gemini. Lấy key tại: "
+                    "[Google AI Studio](https://aistudio.google.com/app/api-keys). ",
                     elem_classes="help-markdown",
                 )
                 gemini_key_input = gr.Textbox(
@@ -291,7 +362,7 @@ with gr.Blocks(title="RAG Learning System", fill_width=True, fill_height=True) a
             )
             k_ask = gr.Slider(1, 32, value=6, step=1, label="Top-k retrieval")
             ask_btn = gr.Button("Trả lời", elem_classes="gen-btn")
-            ask_md = gr.Markdown(elem_classes="result-markdown")
+            ask_md = _result_markdown()
             with gr.Accordion("JSON debug", open=False):
                 ask_raw = gr.Code(label="", language="json")
 
@@ -299,7 +370,7 @@ with gr.Blocks(title="RAG Learning System", fill_width=True, fill_height=True) a
             s_query = gr.Textbox(label="Chủ đề hướng dẫn (tuỳ chọn)", lines=1)
             s_k = gr.Slider(1, 64, value=10, step=1, label="Số đoạn truy xuất (k)")
             s_btn = gr.Button("Tạo tóm tắt", elem_classes="gen-btn")
-            s_md = gr.Markdown(elem_classes="result-markdown")
+            s_md = _result_markdown()
             s_download = gr.File(label="Tải Markdown", interactive=False)
             with gr.Accordion("JSON debug", open=False):
                 s_raw = gr.Code(label="", language="json")
@@ -309,7 +380,7 @@ with gr.Blocks(title="RAG Learning System", fill_width=True, fill_height=True) a
             z_count = gr.Slider(1, 30, value=3, step=1, label="Số câu hỏi")
             z_k = gr.Slider(1, 64, value=10, step=1, label="Số đoạn truy xuất (k)")
             z_btn = gr.Button("Tạo quiz", elem_classes="gen-btn")
-            z_md = gr.Markdown(elem_classes="result-markdown")
+            z_md = _result_markdown()
             z_download = gr.File(label="Tải Markdown", interactive=False)
             with gr.Accordion("JSON debug", open=False):
                 z_raw = gr.Code(label="", language="json")
@@ -319,7 +390,7 @@ with gr.Blocks(title="RAG Learning System", fill_width=True, fill_height=True) a
             f_count = gr.Slider(1, 40, value=15, step=1, label="Số thẻ")
             f_k = gr.Slider(1, 64, value=16, step=1, label="Số đoạn truy xuất (k)")
             f_btn = gr.Button("Tạo flashcards", elem_classes="gen-btn")
-            f_md = gr.Markdown(elem_classes="result-markdown")
+            f_md = _result_markdown()
             f_download = gr.File(label="Tải Markdown", interactive=False)
             with gr.Accordion("JSON debug", open=False):
                 f_raw = gr.Code(label="", language="json")

src/export.py

@@ -2,12 +2,13 @@
 
 from __future__ import annotations
 
+import html
 from pathlib import Path
 from typing import Literal
 
 from pydantic import BaseModel
 
-from src.schemas import Citation, FlashcardSet, QuizSet, Summary
+from src.schemas import Citation, FlashcardSet, QuizSet, RagAnswer, Summary
 
 ExportFormat = Literal["text", "md", "json"]
 
@@ -21,14 +22,59 @@ def _citation_line(c: Citation) -> str:
     return " | ".join(parts)
 
 
+def _details_block(summary: str, content: str) -> str:
+    safe_summary = html.escape(summary, quote=False)
+    safe_content = html.escape(content, quote=False)
+    return (
+        "<details>"
+        f"<summary>{safe_summary}</summary>"
+        f"<div style=\"margin:8px 0 0 0; white-space:pre-wrap;\">{safe_content}</div>"
+        "</details>"
+    )
+
+
+def _citation_source_text_block(c: Citation) -> str:
+    if not c.source_text:
+        return ""
+    return "\n  " + _details_block("Xem đoạn nguồn", c.source_text)
+
+
+def _marker_details(citations: list[Citation], markers: list[str]) -> list[str]:
+    by_marker = {c.source_marker: c for c in citations}
+    lines: list[str] = []
+    for m in markers:
+        c = by_marker.get(m)
+        if c is None:
+            continue
+        summary = f"[{c.source_marker}] {c.filename} p.{c.page}"
+        if c.section:
+            summary += f" | section: {c.section}"
+        if c.chunk_id:
+            summary += f" | chunk: {c.chunk_id}"
+        if c.source_text:
+            lines.append(f"- {_details_block(summary, c.source_text)}")
+        else:
+            lines.append(f"- {summary}")
+    return lines
+
+
 def _citations_block(citations: list[Citation]) -> str:
     if not citations:
         return ""
     lines = ["## Sources", ""]
-    lines.extend(f"- {_citation_line(c)}" for c in citations)
+    for c in citations:
+        lines.append(f"- {_citation_line(c)}{_citation_source_text_block(c)}")
     return "\n".join(lines) + "\n"
 
 
+def _render_with_sources(body_lines: list[str], citations: list[Citation]) -> str:
+    lines = [*body_lines, ""]
+    c = _citations_block(citations)
+    if c:
+        lines.append(c)
+    return "\n".join(lines).rstrip() + "\n"
+
+
 def _to_markdown(model: BaseModel) -> str:
     if isinstance(model, Summary):
         title = "# Summary" + (f": {model.target}" if model.target else "")
@@ -37,10 +83,10 @@ def _to_markdown(model: BaseModel) -> str:
             lines.extend([model.summary.strip(), ""])
         if model.key_points:
             lines.extend(["## Key Points", "", *[f"- {kp}" for kp in model.key_points], ""])
-        c = _citations_block(model.citations)
-        if c:
-            lines.append(c)
-        return "\n".join(lines).rstrip() + "\n"
+        return _render_with_sources(lines, model.citations)
+
+    if isinstance(model, RagAnswer):
+        return _render_with_sources([model.answer.strip()], model.citations)
 
     if isinstance(model, QuizSet):
         title = "# Quiz" + (f": {model.target}" if model.target else "")
@@ -61,7 +107,7 @@ def _to_markdown(model: BaseModel) -> str:
             if item.explanation:
                 lines.append(f"**Explanation:** {item.explanation.strip()}")
             if item.source_markers:
-                lines.append(f"**Sources:** {', '.join(item.source_markers)}")
+                lines.extend(["**Sources:**", *_marker_details(model.citations, item.source_markers)])
             lines.append("")
 
         c = _citations_block(model.citations)
@@ -80,7 +126,7 @@ def _to_markdown(model: BaseModel) -> str:
             if card.hint:
                 lines.append(f"**Hint:** {card.hint.strip()}")
             if card.source_markers:
-                lines.append(f"**Sources:** {', '.join(card.source_markers)}")
+                lines.extend(["**Sources:**", *_marker_details(model.citations, card.source_markers)])
             lines.append("")
 
         c = _citations_block(model.citations)

src/rag.py

@@ -87,6 +87,7 @@ def format_citations(chunks: list[RetrievedChunk]) -> list[Citation]:
             source_marker=f"S{i}",
             filename=c.metadata.filename,
             page=c.metadata.page,
+            source_text=c.text.strip(),
             section=c.metadata.section,
             chunk_id=c.metadata.chunk_id,
         )

src/schemas.py

@@ -33,6 +33,7 @@ class Citation(BaseModel):
     source_marker: str
     filename: str
     page: int
+    source_text: str | None = None
     section: str | None = None
     chunk_id: str | None = None
 

static/style.css

@@ -1,42 +1,43 @@
 /* ==========================================================
    RAG Learning System — Design Tokens
    ========================================================== */
-:root, #gradio-app {
-  --c-bg:           #eef1fb;
-  --c-bg-2:         #e4e9f7;
-  --c-surface:      #ffffff;
-  --c-surface-2:    #f2f5ff;
+:root,
+#gradio-app {
+  --c-bg: #eef1fb;
+  --c-bg-2: #e4e9f7;
+  --c-surface: #ffffff;
+  --c-surface-2: #f2f5ff;
   --c-surface-tint: rgba(255, 255, 255, 0.72);
 
-  --c-primary:      #3d5af1;
-  --c-primary-dk:   #2945d4;
+  --c-primary: #3d5af1;
+  --c-primary-dk: #2945d4;
   --c-primary-pale: #dde4fd;
 
-  --c-accent:       #6c3de0;
+  --c-accent: #6c3de0;
 
-  --c-text:         #181c2e;
-  --c-text-2:       #3d4460;
-  --c-text-muted:   #6370a0;
+  --c-text: #181c2e;
+  --c-text-2: #3d4460;
+  --c-text-muted: #6370a0;
 
   /* Border needs to be darker than background for legibility */
-  --c-border:       #b6c0e6;
-  --c-border-strong:#9faee0;
+  --c-border: #b6c0e6;
+  --c-border-strong: #9faee0;
 
-  --c-note-bg:      #fffbeb;
-  --c-note-bd:      #f5c842;
-  --c-note-txt:     #7a5200;
+  --c-note-bg: #fffbeb;
+  --c-note-bd: #f5c842;
+  --c-note-txt: #7a5200;
 
-  --c-status-bg:    #f0f4ff;
+  --c-status-bg: #f0f4ff;
 
   --r-lg: 16px;
   --r-md: 12px;
-  --r-sm:  8px;
-  --r-xs:  6px;
+  --r-sm: 8px;
+  --r-xs: 6px;
 
-  --shadow-card: 0 3px 16px rgba(40,55,130,.12), 0 1px 5px rgba(40,55,130,.07);
-  --shadow-panel: 0 6px 24px rgba(40,55,130,.10), 0 2px 8px rgba(40,55,130,.06);
-  --shadow-btn:  0 4px 14px rgba(61,90,241,.30);
-  --shadow-foc:  0 0 0 3px rgba(61,90,241,.20);
+  --shadow-card: 0 3px 16px rgba(40, 55, 130, .12), 0 1px 5px rgba(40, 55, 130, .07);
+  --shadow-panel: 0 6px 24px rgba(40, 55, 130, .10), 0 2px 8px rgba(40, 55, 130, .06);
+  --shadow-btn: 0 4px 14px rgba(61, 90, 241, .30);
+  --shadow-foc: 0 0 0 3px rgba(61, 90, 241, .20);
 
   --app-max-width: 1440px;
 }
@@ -45,19 +46,21 @@
    Gradio variable bridge — all blocks transparent by default
    ========================================================== */
 #gradio-app {
-  --background-fill-primary:   var(--c-bg);
+  --background-fill-primary: var(--c-bg);
   --background-fill-secondary: var(--c-bg-2);
-  --block-background-fill:     transparent;
-  --block-border-color:        transparent;
-  --block-border-width:        0px;
-  --input-background-fill:     var(--c-surface);
+  --block-background-fill: transparent;
+  --block-border-color: transparent;
+  --block-border-width: 0px;
+  --input-background-fill: var(--c-surface);
 }
 
 /* ==========================================================
    Page shell
    ========================================================== */
-html, body {
-  margin: 0; padding: 0;
+html,
+body {
+  margin: 0;
+  padding: 0;
   background: linear-gradient(155deg, var(--c-bg) 0%, var(--c-bg-2) 100%) !important;
   color: var(--c-text);
   min-height: 100vh;
@@ -131,9 +134,15 @@ html, body {
 
 .info-card-title,
 .info-card-list,
-.info-card-list li { color: var(--c-note-txt) !important; }
+.info-card-list li {
+  color: var(--c-note-txt) !important;
+}
 
-.info-card-title { margin-bottom: 6px; font-size: 0.95rem; font-weight: 700; }
+.info-card-title {
+  margin-bottom: 6px;
+  font-size: 0.95rem;
+  font-weight: 700;
+}
 
 .info-card-list {
   margin: 0;
@@ -142,7 +151,9 @@ html, body {
   line-height: 1.65;
 }
 
-.info-card-list li + li { margin-top: 3px; }
+.info-card-list li+li {
+  margin-top: 3px;
+}
 
 /* ==========================================================
    2-Column main layout — EXPLICIT flex, do not rely solely on Gradio
@@ -196,7 +207,9 @@ html, body {
 }
 
 /* accent top stripe */
-.control-card { border-top: 3px solid var(--c-primary) !important; }
+.control-card {
+  border-top: 3px solid var(--c-primary) !important;
+}
 
 /* strip nested .block inside cards — theme transparent already handles most,
    but belt-and-suspenders for sub-blocks that may carry inline styles */
@@ -210,7 +223,9 @@ html, body {
 /* ==========================================================
    Typography
    ========================================================== */
-label, .gr-label, .block-title {
+label,
+.gr-label,
+.block-title {
   color: var(--c-text-2) !important;
   font-size: 0.93rem !important;
   font-weight: 600 !important;
@@ -229,14 +244,17 @@ label, .gr-label, .block-title {
 /* standalone markdown outside cards (doc_list_md etc.) */
 .prose p,
 .prose li,
-.prose h1, .prose h2, .prose h3 {
+.prose h1,
+.prose h2,
+.prose h3 {
   color: var(--c-text) !important;
 }
 
 /* ==========================================================
    Inputs & textareas
    ========================================================== */
-textarea, input:not([type="range"]):not([type="checkbox"]) {
+textarea,
+input:not([type="range"]):not([type="checkbox"]) {
   background: var(--c-surface) !important;
   color: var(--c-text) !important;
   font-weight: 500 !important;
@@ -261,13 +279,17 @@ select:focus {
   outline: none !important;
 }
 
-textarea:focus, input:focus {
+textarea:focus,
+input:focus {
   border-color: var(--c-primary) !important;
   box-shadow: var(--shadow-foc) !important;
   outline: none !important;
 }
 
-::placeholder { color: var(--c-text-muted) !important; opacity: 1 !important; }
+::placeholder {
+  color: var(--c-text-muted) !important;
+  opacity: 1 !important;
+}
 
 /* ==========================================================
    Gradio form wrappers — remove default gray panels
@@ -296,6 +318,73 @@ textarea:focus, input:focus {
   padding: 0 8px !important;
 }
 
+/* ==========================================================
+   Left upload block & right selection block
+   - remove nested borders (fieldset, inner inputs)
+   - let outer wrappers provide the frame
+   ========================================================== */
+.control-stack .gr-file,
+.control-stack .gr-file *,
+.preview-col .gr-file,
+.preview-col .gr-file * {
+  box-shadow: none !important;
+}
+
+.control-stack fieldset,
+.control-stack .gr-checkboxgroup fieldset,
+.control-stack .gr-radiogroup fieldset,
+.preview-col fieldset,
+.preview-col .gr-checkboxgroup fieldset,
+.preview-col .gr-radiogroup fieldset {
+  border: none !important;
+  background: transparent !important;
+}
+
+.control-stack fieldset legend,
+.preview-col fieldset legend {
+  padding: 0 8px !important;
+}
+
+.control-stack .gr-checkboxgroup,
+.control-stack .gr-dropdown,
+.control-stack .gr-file,
+.preview-col .gr-checkboxgroup,
+.preview-col .gr-dropdown,
+.preview-col .gr-file {
+  background: transparent !important;
+  border: none !important;
+}
+
+.control-stack .gr-file button:not(.gen-btn),
+.preview-col .gr-file button:not(.gen-btn) {
+  border: none !important;
+  background: var(--c-surface-2) !important;
+}
+
+/* Dropdown inner input: remove inner border/outline; outer wrap provides frame */
+.preview-col .gr-dropdown input.border-none,
+.preview-col .gr-dropdown input[role="listbox"],
+.preview-col .wrap-inner input.border-none,
+.preview-col .wrap-inner input[role="listbox"] {
+  border: none !important;
+  outline: none !important;
+  box-shadow: none !important;
+  background: transparent !important;
+}
+
+.preview-col .gr-dropdown input.border-none:focus,
+.preview-col .gr-dropdown input[role="listbox"]:focus,
+.preview-col .wrap-inner input.border-none:focus,
+.preview-col .wrap-inner input[role="listbox"]:focus,
+.preview-col .gr-dropdown input.border-none:focus-visible,
+.preview-col .gr-dropdown input[role="listbox"]:focus-visible,
+.preview-col .wrap-inner input.border-none:focus-visible,
+.preview-col .wrap-inner input[role="listbox"]:focus-visible {
+  border: none !important;
+  outline: none !important;
+  box-shadow: none !important;
+}
+
 /* Make option rows readable and consistent */
 .gradio-container input[type="checkbox"] {
   accent-color: var(--c-primary);
@@ -315,9 +404,9 @@ textarea:focus, input:focus {
 /* Tab content area sometimes renders as a gray block */
 .tabs,
 .tabs .tabitem,
-.tabs .tabitem > .block,
-.tabs .tabitem > .wrap,
-.tabs .tabitem > .panel {
+.tabs .tabitem>.block,
+.tabs .tabitem>.wrap,
+.tabs .tabitem>.panel {
   background: transparent !important;
 }
 
@@ -349,7 +438,7 @@ input[type="range"] {
 
 .gen-btn:hover {
   opacity: 0.88 !important;
-  box-shadow: 0 6px 22px rgba(61,90,241,.38) !important;
+  box-shadow: 0 6px 22px rgba(61, 90, 241, .38) !important;
   transform: translateY(-1px) !important;
 }
 
@@ -359,7 +448,7 @@ input[type="range"] {
 }
 
 /* Secondary buttons */
-button:not(.gen-btn) {
+button:not(.gen-btn):not(.label-wrap) {
   border-radius: var(--r-sm) !important;
   border: 1.5px solid var(--c-border) !important;
   background: var(--c-surface-2) !important;
@@ -420,19 +509,33 @@ button:not(.gen-btn):hover {
 /* ==========================================================
    Accordion
    ========================================================== */
-.gradio-accordion,
-.gradio-accordion > div,
-.gradio-accordion details {
+/* Move the "card" border to the outer block wrapper for accordion-only blocks
+   in the left panel, and keep inner accordion elements borderless. */
+.control-stack .block.padded.auto-margin {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.control-stack .block.padded.auto-margin:has(.gradio-accordion) {
   background: var(--c-surface-2) !important;
   border: 1.5px solid var(--c-border) !important;
   border-radius: var(--r-md) !important;
-  box-shadow: none !important;
   overflow: hidden !important;
 }
 
-.gradio-accordion summary,
-.gradio-accordion button {
-  background: var(--c-surface-2) !important;
+.control-stack .gradio-accordion,
+.control-stack .gradio-accordion>div,
+.control-stack .gradio-accordion details {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.control-stack .gradio-accordion summary,
+.control-stack .gradio-accordion button,
+.control-stack .gradio-accordion .label-wrap {
+  background: transparent !important;
   color: var(--c-text-2) !important;
   font-weight: 700 !important;
   font-size: 0.93rem !important;
@@ -442,12 +545,47 @@ button:not(.gen-btn):hover {
   transition: background 0.14s !important;
 }
 
-.gradio-accordion summary:hover,
-.gradio-accordion button:not(.gen-btn):hover {
+.control-stack .gradio-accordion summary:hover,
+.control-stack .gradio-accordion button:not(.gen-btn):hover,
+.control-stack .gradio-accordion .label-wrap:hover {
   background: var(--c-primary-pale) !important;
   border-color: transparent !important;
 }
 
+/* Ensure accordion header button never gets an inner border */
+.control-stack button.label-wrap,
+.control-stack .block.padded.auto-margin:has(.gradio-accordion) button.label-wrap {
+  border: none !important;
+  outline: none !important;
+  box-shadow: none !important;
+  background: transparent !important;
+}
+
+/* Status bar inside left panel blocks: borderless, let outer wrapper frame it */
+.control-stack .block.padded.auto-margin:has(.gradio-accordion) .status-bar {
+  border: none !important;
+  border-left: none !important;
+  background: transparent !important;
+  padding: 8px 12px !important;
+}
+
+/* Document selection checkbox options container (right panel) */
+.preview-col .wrap-inner,
+.preview-col .gr-checkboxgroup .wrap-inner {
+  border: 1.5px solid var(--c-border-strong) !important;
+  border-radius: var(--r-md) !important;
+  background: var(--c-surface) !important;
+}
+
+/* Tabs: ensure tab buttons are borderless */
+.tab-container button[role="tab"],
+.tab-container button[role="tab"].selected,
+.tab-wrapper button[role="tab"] {
+  border: none !important;
+  box-shadow: none !important;
+  outline: none !important;
+}
+
 /* ==========================================================
    Preview header
    ========================================================== */
@@ -479,7 +617,7 @@ button:not(.gen-btn):hover {
    ========================================================== */
 .result-markdown {
   background: var(--c-surface) !important;
-  border: 1.5px solid var(--c-border) !important;
+  border: none !important;
   border-radius: var(--r-md) !important;
   padding: 14px 16px !important;
   min-height: 60px;
@@ -488,13 +626,19 @@ button:not(.gen-btn):hover {
 
 .result-markdown h1,
 .result-markdown h2,
-.result-markdown h3 { color: var(--c-primary-dk) !important; }
+.result-markdown h3 {
+  color: var(--c-primary-dk) !important;
+}
 
 .result-markdown p,
 .result-markdown li,
-.result-markdown strong { color: var(--c-text) !important; }
+.result-markdown strong {
+  color: var(--c-text) !important;
+}
 
-.result-markdown a { color: var(--c-primary) !important; }
+.result-markdown a {
+  color: var(--c-primary) !important;
+}
 
 .result-markdown code {
   background: var(--c-surface-2) !important;
@@ -509,6 +653,28 @@ button:not(.gen-btn):hover {
   border-radius: var(--r-md) !important;
 }
 
+/* ==========================================================
+   Inline citations (HTML <details>) inside result markdown
+   ========================================================== */
+.result-markdown details {
+  background: var(--c-surface-2);
+  border: 1px solid var(--c-border);
+  border-radius: var(--r-sm);
+  padding: 8px 10px;
+  margin-top: 8px;
+}
+
+.result-markdown summary {
+  cursor: pointer;
+  font-weight: 700;
+  color: var(--c-text-2);
+  outline: none;
+}
+
+.result-markdown details[open] summary {
+  color: var(--c-primary-dk);
+}
+
 /* ==========================================================
    Tabs nav bar
    ========================================================== */
@@ -520,7 +686,7 @@ button:not(.gen-btn):hover {
   padding: 10px 12px 12px !important;
 }
 
-.tabs > .tab-nav {
+.tabs>.tab-nav {
   border-bottom: 2px solid var(--c-border) !important;
   gap: 2px !important;
   padding: 0 2px !important;
@@ -545,23 +711,51 @@ button:not(.gen-btn):hover {
   font-weight: 600;
 }
 
-.footer-text a:hover { text-decoration: underline; }
+.footer-text a:hover {
+  text-decoration: underline;
+}
 
 /* ==========================================================
    Responsive
    ========================================================== */
 @media (max-width: 860px) {
-  .main-layout { flex-direction: column !important; }
-  .control-stack, .preview-col {
+  .main-layout {
+    flex-direction: column !important;
+  }
+
+  .control-stack,
+  .preview-col {
     flex: 1 1 100% !important;
     min-width: 0 !important;
     padding: 12px 12px !important;
   }
-  .gradio-container { padding: 6px 8px !important; }
-  .header-row { gap: 8px !important; padding: 2px 0 6px !important; }
-  .header-row img { height: 56px; }
-  .header-title { font-size: 1.35rem; }
-  .header-sub { font-size: 0.87rem; }
-  .control-card { padding: 10px 12px !important; }
-  .tabs { padding: 8px 8px 10px !important; }
-}
+
+  .gradio-container {
+    padding: 6px 8px !important;
+  }
+
+  .header-row {
+    gap: 8px !important;
+    padding: 2px 0 6px !important;
+  }
+
+  .header-row img {
+    height: 56px;
+  }
+
+  .header-title {
+    font-size: 1.35rem;
+  }
+
+  .header-sub {
+    font-size: 0.87rem;
+  }
+
+  .control-card {
+    padding: 10px 12px !important;
+  }
+
+  .tabs {
+    padding: 8px 8px 10px !important;
+  }
+}