Fix: Overhaul Facebook post detection to filtered comments using [role='feed'] strategy and improve button positioning

.firebase/hosting.ZnJvbnRlbmQvZGlzdA.cache

@@ -1,5 +1,5 @@
-vite.svg,1771983804434,d3bbbc44b3ea71906a72bf2ec1a4716903e2e3d9f85a5007205a65d1f12e2923
-index.html,1771983804629,b6c877b7fe830ae6270dfb77cd1d205222591249325fa88601f51f6e2ed57653
-logo.svg,1771983804434,c1ca19989c26d83c632b01609dc4514e16bef7418284c6df88b29ac34ca035ec
-assets/index-DE8XF5VL.css,1771983804629,941148112bdd25f98beea529b6ad97209f2f777e70671d0f5b96f919c8472699
-assets/index-BCcoqzYM.js,1771983804629,60632c706af44a3486a56a8364e32bdce3c7a8cb388f69de2fe9c21876d55942
+vite.svg,1772007250601,d3bbbc44b3ea71906a72bf2ec1a4716903e2e3d9f85a5007205a65d1f12e2923
+logo.svg,1772007250601,c1ca19989c26d83c632b01609dc4514e16bef7418284c6df88b29ac34ca035ec
+index.html,1772007250792,4c51726f347b368d44d30afacc29469f6610be348d29aca35316322116d1f636
+assets/index-DE8XF5VL.css,1772007250792,941148112bdd25f98beea529b6ad97209f2f777e70671d0f5b96f919c8472699
+assets/index-pa_ZGMTy.js,1772007250792,181110f569f8d340b4f682558d7e44c1e93acc89a281c426b91a85cba26620d6

api/routes/verify.py

@@ -22,6 +22,50 @@ from inputs.asr import transcribe_video
 logger = logging.getLogger(__name__)
 router = APIRouter(prefix="/verify", tags=["Verification"])
 
+# ── OG meta fallback for bot-protected / social URLs ──────────────────────────
+async def _fetch_og_text(url: str) -> str:
+    """
+    Fetches OG/meta title + description from a URL using a plain HTTP GET.
+    Used as a last-resort fallback when the full scraper returns no content
+    (e.g. Facebook share links, photo URLs that block the scraper).
+    Returns a concatenated title + description string, or "" on failure.
+    """
+    try:
+        import httpx
+        from bs4 import BeautifulSoup
+
+        headers = {
+            "User-Agent": (
+                "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) "
+                "AppleWebKit/537.36 (KHTML, like Gecko) "
+                "Chrome/122.0.0.0 Safari/537.36"
+            ),
+            "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8",
+            "Accept-Language": "en-US,en;q=0.5",
+        }
+        async with httpx.AsyncClient(timeout=12, follow_redirects=True) as client:
+            resp = await client.get(url, headers=headers)
+            if resp.status_code >= 400:
+                return ""
+            head_end = resp.text.find("</head>")
+            head_html = resp.text[:head_end + 7] if head_end != -1 else resp.text[:8000]
+            soup = BeautifulSoup(head_html, "lxml")
+
+            def _m(prop=None, name=None):
+                el = (soup.find("meta", property=prop) if prop
+                      else soup.find("meta", attrs={"name": name}))
+                return (el.get("content") or "").strip() if el else ""
+
+            title = (_m(prop="og:title") or _m(name="twitter:title")
+                     or (soup.title.get_text(strip=True) if soup.title else ""))
+            description = (_m(prop="og:description") or _m(name="twitter:description")
+                           or _m(name="description"))
+            parts = [p for p in [title, description] if p]
+            return " ".join(parts)
+    except Exception as exc:
+        logger.warning("OG meta fallback failed for %s: %s", url, exc)
+        return ""
+
 
 # ── Text ──────────────────────────────────────────────────────────────────────
 
@@ -37,6 +81,7 @@ async def verify_text(body: TextVerifyRequest) -> VerificationResponse:
     try:
         result = await run_verification(body.text, input_type="text")
         result.processing_time_ms = round((time.perf_counter() - start) * 1000, 1)
+        result.extracted_text = body.text
         return result
     except Exception as exc:
         logger.exception("verify/text error: %s", exc)
@@ -57,13 +102,17 @@ async def verify_url(body: URLVerifyRequest) -> VerificationResponse:
     logger.info("verify/url called | url=%s", url_str)
     try:
         text, domain = await scrape_url(url_str)
+        if not text or len(text.strip()) < 20:
+            logger.info("scrape_url returned no content for %s — trying OG meta fallback", url_str)
+            text = await _fetch_og_text(url_str)
         if not text or len(text.strip()) < 20:
             raise HTTPException(
                 status_code=status.HTTP_422_UNPROCESSABLE_ENTITY,
-                detail="Could not extract meaningful text from the URL. The page may be paywalled or bot-protected.",
+                detail="Could not extract meaningful text from the URL. The page may be paywalled, private, or bot-protected. Try copying the post text and using the Text tab instead.",
             )
         result = await run_verification(text, input_type="url", source_domain=domain)
         result.processing_time_ms = round((time.perf_counter() - start) * 1000, 1)
+        result.extracted_text = text.strip()
         return result
     except HTTPException:
         raise
@@ -104,6 +153,7 @@ async def verify_image(file: UploadFile = File(...)) -> VerificationResponse:
             )
         result = await run_verification(text, input_type="image")
         result.processing_time_ms = round((time.perf_counter() - start) * 1000, 1)
+        result.extracted_text = text.strip()
         return result
     except HTTPException:
         raise
@@ -143,6 +193,7 @@ async def verify_video(file: UploadFile = File(...)) -> VerificationResponse:
             )
         result = await run_verification(text, input_type="video")
         result.processing_time_ms = round((time.perf_counter() - start) * 1000, 1)
+        result.extracted_text = text.strip()
         return result
     except HTTPException:
         raise

api/schemas.py

@@ -105,6 +105,7 @@ class VerificationResponse(BaseModel):
     domain_credibility: Optional[DomainTier] = None
     input_type: str = "text"
     processing_time_ms: Optional[float] = None
+    extracted_text: Optional[str] = Field(None, description="Raw text extracted from the URL / image / video for transparency")
 
 
 # ── History / Trends ──────────────────────────────────────────────────────────

config.py

@@ -18,6 +18,21 @@ class Settings(BaseSettings):
     news_api_key: str = ""
     google_vision_api_key: str = ""
 
+    # ── Facebook Scraper Cookies ──────────────────────────────────────────────
+    # Paste the value of the `c_user` and `xs` cookies from a logged-in
+    # Facebook session (browser DevTools → Application → Cookies → facebook.com).
+    # These unlock private/friends-only posts and reduce rate-limiting.
+    # Leave empty to scrape public posts only.
+    facebook_c_user: str = ""
+    facebook_xs: str = ""
+
+    @property
+    def facebook_cookies(self) -> dict | None:
+        """Return cookie dict for facebook-scraper, or None if not configured."""
+        if self.facebook_c_user and self.facebook_xs:
+            return {"c_user": self.facebook_c_user, "xs": self.facebook_xs}
+        return None
+
     # ── Database ──────────────────────────────────────────────────────────────
     database_url: str = "sqlite+aiosqlite:///./philverify_dev.db"  # Dev fallback
 

extension/background.js

@@ -16,11 +16,11 @@
  */
 
 const CACHE_TTL_MS = 24 * 60 * 60 * 1000   // 24 hours
-const MAX_HISTORY  = 50
+const MAX_HISTORY = 50
 
 // ── Default settings ──────────────────────────────────────────────────────────
 const DEFAULT_SETTINGS = {
-  apiBase:  'https://philverify.web.app/api',
+  apiBase: 'https://philverify.web.app/api',
   autoScan: true,    // Automatically scan Facebook feed posts
 }
 
@@ -70,11 +70,11 @@ async function setCached(key, result, preview) {
   // Prepend to history list
   const { history = [] } = await chrome.storage.local.get('history')
   const entry = {
-    id:           key,
-    timestamp:    new Date().toISOString(),
+    id: key,
+    timestamp: new Date().toISOString(),
     text_preview: preview.slice(0, 80),
-    verdict:      result.verdict,
-    final_score:  result.final_score,
+    verdict: result.verdict,
+    final_score: result.final_score,
   }
   const updated = [entry, ...history.filter(h => h.id !== key)].slice(0, MAX_HISTORY)
   await chrome.storage.local.set({ history: updated })
@@ -82,16 +82,20 @@ async function setCached(key, result, preview) {
 
 // ── API calls ─────────────────────────────────────────────────────────────────
 
-async function verifyText(text) {
-  const key  = 'txt_' + await sha256prefix(text)
-  const hit  = await getCached(key)
+async function verifyText(text, imageUrl) {
+  const key = 'txt_' + await sha256prefix(text)
+  const hit = await getCached(key)
   if (hit) return { ...hit, _fromCache: true }
 
   const { apiBase } = await getSettings()
+  // Build payload — include imageUrl for multimodal (text + image) analysis
+  const payload = { text }
+  if (imageUrl && isHttpUrl(imageUrl)) payload.image_url = imageUrl
+
   const res = await fetch(`${apiBase}/verify/text`, {
-    method:  'POST',
+    method: 'POST',
     headers: { 'Content-Type': 'application/json' },
-    body:    JSON.stringify({ text }),
+    body: JSON.stringify(payload),
   })
   if (!res.ok) {
     const body = await res.json().catch(() => ({}))
@@ -109,9 +113,9 @@ async function verifyUrl(url) {
 
   const { apiBase } = await getSettings()
   const res = await fetch(`${apiBase}/verify/url`, {
-    method:  'POST',
+    method: 'POST',
     headers: { 'Content-Type': 'application/json' },
-    body:    JSON.stringify({ url }),
+    body: JSON.stringify({ url }),
   })
   if (!res.ok) {
     const body = await res.json().catch(() => ({}))
@@ -131,7 +135,7 @@ async function verifyImageUrl(imageUrl) {
   const imgRes = await fetch(imageUrl)
   if (!imgRes.ok) throw new Error(`Could not fetch image: ${imgRes.status}`)
   const blob = await imgRes.blob()
-  const ct  = imgRes.headers.get('content-type') ?? 'image/jpeg'
+  const ct = imgRes.headers.get('content-type') ?? 'image/jpeg'
   const ext = ct.includes('png') ? 'png' : ct.includes('webp') ? 'webp' : 'jpg'
   const formData = new FormData()
   formData.append('file', blob, `image.${ext}`)
@@ -158,8 +162,8 @@ chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => {
   switch (msg.type) {
 
     case 'VERIFY_TEXT':
-      verifyText(msg.text)
-        .then(r  => sendResponse({ ok: true,  result: r }))
+      verifyText(msg.text, msg.imageUrl)
+        .then(r => sendResponse({ ok: true, result: r }))
         .catch(e => sendResponse({ ok: false, error: e.message }))
       return true   // keep message channel open for async response
 
@@ -169,7 +173,7 @@ chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => {
         return false
       }
       verifyUrl(msg.url)
-        .then(r  => sendResponse({ ok: true,  result: r }))
+        .then(r => sendResponse({ ok: true, result: r }))
         .catch(e => sendResponse({ ok: false, error: e.message }))
       return true
 
@@ -179,7 +183,7 @@ chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => {
         return false
       }
       verifyImageUrl(msg.imageUrl)
-        .then(r  => sendResponse({ ok: true,  result: r }))
+        .then(r => sendResponse({ ok: true, result: r }))
         .catch(e => sendResponse({ ok: false, error: e.message }))
       return true
 

extension/content.css

@@ -1,179 +1,364 @@
 /**
  * PhilVerify — Content Script Styles
- * Badge overlay injected into Facebook feed posts.
- * All selectors are namespaced under .pv-* to avoid collisions.
+ * Floating verify button + inline report overlay.
+ * All selectors namespaced under .pv-* to avoid collisions.
  */
 
-/* ── Badge wrapper ───────────────────────────────────────────────────────── */
-.pv-badge-wrap {
-  display: block;
-  margin: 6px 12px 2px;
+/* ── Floating "Verify this post" button ─────────────────────────────────────── */
+/* Wrapper container: sits at the end of the post, flex-end alignment */
+.pv-verify-btn-wrapper {
+  display: flex;
+  justify-content: flex-end;
+  padding: 4px 12px 8px;
+  pointer-events: none;
+  /* Let clicks pass through the wrapper */
 }
 
-.pv-badge {
+.pv-verify-btn {
+  position: relative;
+  z-index: 100;
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  padding: 4px 10px;
-  border-radius: 3px;
+  padding: 6px 12px;
+  border: 1px solid rgba(220, 38, 38, 0.3);
+  border-radius: 20px;
+  background: rgba(20, 20, 20, 0.92);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  color: #f5f0e8;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
   font-size: 11px;
   font-weight: 600;
-  letter-spacing: 0.04em;
+  letter-spacing: 0.03em;
   cursor: pointer;
   touch-action: manipulation;
   -webkit-tap-highlight-color: transparent;
+  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  pointer-events: auto;
+  /* Re-enable clicks on the button itself */
 }
 
-.pv-badge:focus-visible {
+.pv-verify-btn:hover {
+  transform: translateY(-1px);
+  border-color: rgba(220, 38, 38, 0.6);
+  box-shadow: 0 4px 16px rgba(220, 38, 38, 0.2);
+}
+
+.pv-verify-btn:active {
+  transform: scale(0.97);
+}
+
+.pv-verify-btn:focus-visible {
   outline: 2px solid #06b6d4;
   outline-offset: 2px;
 }
 
-/* ── Loading state ───────────────────────────────────────────────────────── */
-.pv-badge--loading {
+.pv-verify-btn-icon {
+  font-size: 13px;
+  line-height: 1;
+}
+
+.pv-verify-btn-label {
+  white-space: nowrap;
+}
+
+/* ── Loading state (on the button) ──────────────────────────────────────────── */
+.pv-verify-btn--loading {
+  cursor: wait;
+  border-color: rgba(168, 159, 148, 0.3);
   color: #a89f94;
-  border: 1px solid rgba(168, 159, 148, 0.2);
-  background: rgba(168, 159, 148, 0.06);
-  cursor: default;
 }
 
+.pv-verify-btn--loading:hover {
+  transform: none;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+/* ── Error state (on the button) ────────────────────────────────────────────── */
+.pv-verify-btn--error {
+  border-color: rgba(248, 113, 113, 0.4);
+  color: #f87171;
+  animation: pv-shake 0.4s ease-in-out;
+}
+
+@keyframes pv-shake {
+
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+
+  20% {
+    transform: translateX(-3px);
+  }
+
+  40% {
+    transform: translateX(3px);
+  }
+
+  60% {
+    transform: translateX(-2px);
+  }
+
+  80% {
+    transform: translateX(2px);
+  }
+}
+
+/* ── Spinner ────────────────────────────────────────────────────────────────── */
 .pv-spinner {
   display: inline-block;
-  width: 10px;
-  height: 10px;
+  width: 12px;
+  height: 12px;
   border: 2px solid rgba(168, 159, 148, 0.3);
   border-top-color: #a89f94;
   border-radius: 50%;
   animation: pv-spin 0.7s linear infinite;
+  flex-shrink: 0;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .pv-spinner { animation: none; }
-}
+  .pv-spinner {
+    animation: none;
+  }
 
-@keyframes pv-spin {
-  to { transform: rotate(360deg); }
+  .pv-verify-btn--error {
+    animation: none;
+  }
+
+  .pv-verify-btn {
+    transition: none;
+  }
 }
 
-/* ── Error state ─────────────────────────────────────────────────────────── */
-.pv-badge--error {
-  color: #78716c;
-  border: 1px solid rgba(120, 113, 108, 0.2);
-  background: transparent;
-  cursor: default;
-  font-size: 10px;
+@keyframes pv-spin {
+  to {
+    transform: rotate(360deg);
+  }
 }
 
-/* ── Detail panel ────────────────────────────────────────────────────────── */
-.pv-detail {
+/* ── Inline verification report ────��────────────────────────────────────────── */
+.pv-report {
   display: block;
-  margin: 4px 0 6px;
-  padding: 10px 12px;
+  margin: 8px 12px 12px;
+  padding: 14px 16px;
   background: #141414;
   border: 1px solid rgba(245, 240, 232, 0.1);
-  border-radius: 4px;
+  border-radius: 8px;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
   font-size: 11px;
   color: #f5f0e8;
-  max-width: 400px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+  max-width: 480px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
+  position: relative;
+  z-index: 50;
 }
 
-.pv-detail-header {
+/* — Header */
+.pv-report-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 8px;
-  padding-bottom: 6px;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
   border-bottom: 1px solid rgba(245, 240, 232, 0.07);
 }
 
-.pv-logo {
+.pv-report-logo {
   font-weight: 800;
-  font-size: 12px;
+  font-size: 13px;
   letter-spacing: 0.12em;
   color: #f5f0e8;
 }
 
-.pv-close {
+.pv-report-close {
   background: none;
   border: none;
   cursor: pointer;
   color: #5c554e;
-  font-size: 12px;
-  padding: 2px 4px;
-  border-radius: 2px;
+  font-size: 14px;
+  padding: 2px 6px;
+  border-radius: 4px;
   touch-action: manipulation;
+  transition: color 0.15s ease;
+}
+
+.pv-report-close:hover {
+  color: #f5f0e8;
+  background: rgba(245, 240, 232, 0.05);
 }
-.pv-close:hover { color: #f5f0e8; }
-.pv-close:focus-visible { outline: 2px solid #06b6d4; }
 
-.pv-row {
+.pv-report-close:focus-visible {
+  outline: 2px solid #06b6d4;
+}
+
+/* — Verdict row */
+.pv-report-verdict-row {
+  padding: 10px 12px;
+  margin-bottom: 12px;
+  border-left: 3px solid #5c554e;
+  border-radius: 0 4px 4px 0;
+  background: rgba(245, 240, 232, 0.03);
+}
+
+.pv-report-verdict {
+  font-size: 18px;
+  font-weight: 800;
+  letter-spacing: -0.01em;
+  margin-bottom: 2px;
+}
+
+.pv-report-score-text {
+  font-size: 10px;
+  color: #a89f94;
+  font-family: 'SF Mono', 'Menlo', monospace;
+}
+
+/* — Confidence bar */
+.pv-confidence-bar-wrap {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 0;
+  border-bottom: 1px solid rgba(245, 240, 232, 0.05);
+}
+
+.pv-confidence-bar-track {
+  flex: 1;
+  height: 6px;
+  background: rgba(245, 240, 232, 0.07);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.pv-confidence-bar-fill {
+  height: 100%;
+  border-radius: 3px;
+  transition: width 0.5s ease-out;
+}
+
+.pv-confidence-bar-value {
+  font-size: 10px;
+  font-weight: 700;
+  color: #a89f94;
+  font-family: 'SF Mono', 'Menlo', monospace;
+  min-width: 36px;
+  text-align: right;
+}
+
+/* — Info rows */
+.pv-report-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 4px 0;
+  padding: 6px 0;
   border-bottom: 1px solid rgba(245, 240, 232, 0.05);
 }
 
-.pv-label {
+.pv-report-label {
   font-size: 9px;
   font-weight: 700;
   letter-spacing: 0.12em;
   color: #5c554e;
   text-transform: uppercase;
+  flex-shrink: 0;
 }
 
-.pv-val {
+.pv-report-value {
   font-size: 11px;
-  font-weight: 600;
+  font-weight: 500;
   color: #a89f94;
 }
 
-.pv-signals {
-  padding: 6px 0 4px;
+/* — Suspicious signals tags */
+.pv-report-signals {
+  padding: 8px 0;
   border-bottom: 1px solid rgba(245, 240, 232, 0.05);
 }
 
-.pv-tags {
+.pv-report-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
-  margin-top: 4px;
+  margin-top: 6px;
 }
 
-.pv-tag {
-  padding: 2px 6px;
+.pv-report-tag {
+  padding: 3px 8px;
   background: rgba(220, 38, 38, 0.12);
   color: #f87171;
   border: 1px solid rgba(220, 38, 38, 0.25);
-  border-radius: 2px;
+  border-radius: 3px;
   font-size: 9px;
   letter-spacing: 0.04em;
   font-weight: 600;
 }
 
-.pv-source {
-  padding: 6px 0 4px;
+/* — Evidence sources */
+.pv-report-sources {
+  padding: 8px 0;
   border-bottom: 1px solid rgba(245, 240, 232, 0.05);
 }
 
-.pv-source-link {
-  display: block;
-  margin-top: 4px;
+.pv-report-sources-list {
+  list-style: none;
+  padding: 0;
+  margin: 6px 0 0 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.pv-report-source-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 4px 0;
+}
+
+.pv-report-source-link {
   color: #06b6d4;
   font-size: 10px;
   text-decoration: none;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  flex: 1;
+}
+
+.pv-report-source-link:hover {
+  text-decoration: underline;
 }
-.pv-source-link:hover { text-decoration: underline; }
 
-.pv-open-full {
+.pv-report-source-stance {
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  color: #5c554e;
+  flex-shrink: 0;
+}
+
+/* — Explanation / Claim */
+.pv-report-explanation {
+  padding: 8px 0;
+  border-bottom: 1px solid rgba(245, 240, 232, 0.05);
+}
+
+.pv-report-explanation-text {
+  margin: 6px 0 0;
+  font-size: 10px;
+  color: #a89f94;
+  line-height: 1.5;
+  font-style: italic;
+}
+
+/* — Full analysis link */
+.pv-report-full-link {
   display: block;
-  margin-top: 8px;
+  margin-top: 10px;
   text-align: center;
   color: #dc2626;
   font-size: 10px;
@@ -181,10 +366,12 @@
   letter-spacing: 0.08em;
   text-decoration: none;
   text-transform: uppercase;
-  padding: 5px;
+  padding: 6px;
   border: 1px solid rgba(220, 38, 38, 0.3);
-  border-radius: 2px;
+  border-radius: 4px;
+  transition: background 0.15s ease;
 }
-.pv-open-full:hover {
+
+.pv-report-full-link:hover {
   background: rgba(220, 38, 38, 0.08);
-}
+}

extension/content.js

@@ -1,18 +1,17 @@
 /**
- * PhilVerify — Content Script (Facebook feed scanner)
+ * PhilVerify — Content Script (Twitter/X + Facebook feed scanner)
  *
- * Watches the Facebook feed via MutationObserver.
- * For each new post that appears:
- *   1. Extracts the post text or shared URL
- *   2. Sends to background.js for verification (with cache)
- *   3. Injects a credibility badge overlay onto the post card
+ * Click-triggered verification model:
+ *   1. Watches for posts via MutationObserver (infinite scroll support)
+ *   2. Injects a floating "Verify this post" button on each post that has content
+ *   3. On click: extracts caption + image, sends to background.js → PhilVerify API
+ *   4. Displays a full inline verification report (verdict, confidence, evidence, etc.)
  *
- * Badge click → opens an inline detail panel with verdict, score, and top source.
- *
- * Uses `data-philverify` attribute to mark already-processed posts.
+ * Skips posts with no text AND no image. Never injects on comments.
+ * Uses `data-philverify-btn` attribute to prevent duplicate buttons.
  */
 
-;(function philverifyContentScript() {
+; (function philverifyContentScript() {
   'use strict'
 
   // ── Config ────────────────────────────────────────────────────────────────
@@ -20,7 +19,16 @@
   /** Minimum text length to send for verification (avoids verifying 1-word posts) */
   const MIN_TEXT_LENGTH = 40
 
-  // Detect which platform we're on
+  /** Minimum image dimension (px) to consider a real content image (filters avatars/icons) */
+  const MIN_IMAGE_SIZE = 100
+
+  /** Enable debug logging to console */
+  const DEBUG = true
+  function log(...args) { if (DEBUG) console.log('[PhilVerify]', ...args) }
+  function warn(...args) { if (DEBUG) console.warn('[PhilVerify]', ...args) }
+
+  // ── Platform detection ────────────────────────────────────────────────────
+
   const PLATFORM = (() => {
     const h = window.location.hostname
     if (h.includes('facebook.com')) return 'facebook'
@@ -30,19 +38,37 @@
 
   const IS_SOCIAL = PLATFORM === 'facebook' || PLATFORM === 'twitter'
 
+  // ── Platform-specific selectors ───────────────────────────────────────────
+  // Stored in a single config object for easy maintenance when platforms
+  // update their DOM. Prefer data-testid / role attributes over class names.
+
   const PLATFORM_CFG = {
     facebook: {
-      // data-pagelet attrs are structural and stable — they only exist on feed posts,
-      // NOT on comments. [role="article"] matches both posts AND comment items so
-      // we keep it only as a last resort with extra filtering in findPosts().
+      // Facebook's DOM is intentionally unstable. The most reliable anchor is
+      // [role="feed"] — the WAI-ARIA feed landmark required for accessibility.
+      // Direct children of the feed container are always posts (wrapped in divs),
+      // while comments are nested deeper inside each post's [role="article"].
+      //
+      // We do NOT rely on data-pagelet attributes — Facebook removed/renamed them.
+      // [role="article"] is used as a last-resort fallback with extra filtering.
       post: [
-        '[data-pagelet^="FeedUnit"]',
-        '[data-pagelet^="GroupsFeedUnit"]',
-        '[data-pagelet^="ProfileTimeline"]',
-        '[role="article"]',
+        '[role="article"]',   // Filtered by findPosts() — only feed-level articles
       ],
-      text: ['[data-ad-comet-preview="message"]', '[data-testid="post_message"]', '[dir="auto"]'],
+      // Text selectors ordered by specificity
+      text: [
+        '[data-ad-comet-preview="message"]',
+        '[data-testid="post_message"]',
+      ],
+      // Exclude avatars explicitly: fbcdn images that are NOT inside avatar
+      // containers, and are large enough to be actual post content.
       image: 'img[src*="fbcdn"]',
+      // Selectors for containers known to hold avatar images — used to filter them out
+      avatarContainers: [
+        '[data-testid="profile_photo_image"]',
+        'a[aria-label*="profile picture"]',
+        'svg image',                // avatar circles rendered in SVG
+        '[role="img"][aria-label]',  // decorative profile icons
+      ],
       link: ['a[href*="l.facebook.com/l.php"]', 'a[role="link"][href*="http"]'],
       unwrapUrl(el) {
         try { return new URL(el.href).searchParams.get('u') || el.href } catch { return el.href }
@@ -51,7 +77,12 @@
     twitter: {
       post: ['article[data-testid="tweet"]'],
       text: ['[data-testid="tweetText"]'],
+      // pbs.twimg.com/media is specifically for tweet media, NOT profile avatars
+      // (avatars use pbs.twimg.com/profile_images)
       image: 'img[src*="pbs.twimg.com/media"]',
+      avatarContainers: [
+        '[data-testid="Tweet-User-Avatar"]',
+      ],
       link: ['a[href*="t.co/"]', 'a[data-testid="card.layoutSmall.media"]'],
       unwrapUrl(el) { return el.href },
     },
@@ -59,6 +90,7 @@
       post: ['[role="article"]', 'article', 'main'],
       text: ['h1', '.article-body', '.entry-content', 'article'],
       image: null,
+      avatarContainers: [],
       link: [],
       unwrapUrl(el) { return el.href },
     },
@@ -67,20 +99,27 @@
   const CFG = PLATFORM_CFG[PLATFORM] ?? PLATFORM_CFG.facebook
   const POST_SELECTORS = CFG.post
 
+  // ── Verdict colors & labels ───────────────────────────────────────────────
+
   const VERDICT_COLORS = {
-    'Credible':    '#16a34a',
-    'Unverified':  '#d97706',
+    'Credible': '#16a34a',
+    'Unverified': '#d97706',
     'Likely Fake': '#dc2626',
   }
   const VERDICT_LABELS = {
-    'Credible':    '✓ Credible',
-    'Unverified':  '? Unverified',
+    'Credible': '✓ Credible',
+    'Unverified': '? Unverified',
     'Likely Fake': '✗ Likely Fake',
   }
+  const VERDICT_BG = {
+    'Credible': 'rgba(22, 163, 74, 0.12)',
+    'Unverified': 'rgba(217, 119, 6, 0.12)',
+    'Likely Fake': 'rgba(220, 38, 38, 0.12)',
+  }
 
   // ── Utilities ─────────────────────────────────────────────────────────────
 
-  /** Escape HTML special chars to prevent XSS in innerHTML templates */
+  /** Escape HTML special chars to prevent XSS */
   function safeText(str) {
     if (str == null) return ''
     return String(str)
@@ -100,258 +139,634 @@
     } catch { return '#' }
   }
 
+  // ── Content extraction ────────────────────────────────────────────────────
+
+  /**
+   * Try to expand Facebook's "See more" truncation before extracting text.
+   * Clicks the "See more" link if found. Only targets known truncation patterns.
+   */
+  function expandSeeMore(post) {
+    if (PLATFORM === 'facebook') {
+      // Facebook uses div[role="button"] or <span> with "See more" / "See More"
+      const buttons = post.querySelectorAll('[role="button"]')
+      for (const btn of buttons) {
+        const txt = btn.textContent?.trim()
+        if (txt && /^see\s*more$/i.test(txt) && btn.offsetHeight < 30) {
+          try {
+            btn.click()
+            log('Expanded "See more" on Facebook post')
+          } catch (e) {
+            warn('Failed to expand "See more":', e)
+          }
+          return
+        }
+      }
+    }
+    if (PLATFORM === 'twitter') {
+      // Twitter uses a "Show more" link inside truncated tweets
+      const showMore = post.querySelector('[data-testid="tweet-text-show-more-link"]')
+      if (showMore) {
+        try {
+          showMore.click()
+          log('Expanded "Show more" on Twitter post')
+        } catch (e) {
+          warn('Failed to expand Twitter "Show more":', e)
+        }
+      }
+    }
+  }
+
   function extractPostText(post) {
+    expandSeeMore(post)
+
+    // Primary selectors — platform-specific, high confidence
     for (const sel of CFG.text) {
       const el = post.querySelector(sel)
-      if (el?.innerText?.trim().length >= MIN_TEXT_LENGTH)
+      if (el?.innerText?.trim().length >= MIN_TEXT_LENGTH) {
+        log('Text extracted via primary selector:', sel)
         return el.innerText.trim().slice(0, 2000)
+      }
+    }
+
+    // Facebook fallback: look for [dir="auto"] ONLY inside known message containers
+    if (PLATFORM === 'facebook') {
+      const messageContainers = post.querySelectorAll(
+        '[data-ad-comet-preview="message"] [dir="auto"], [data-testid="post_message"] [dir="auto"]'
+      )
+      for (const el of messageContainers) {
+        const t = el.innerText?.trim()
+        if (t && t.length >= MIN_TEXT_LENGTH) {
+          log('Text extracted via scoped [dir="auto"] fallback')
+          return t.slice(0, 2000)
+        }
+      }
+      // Last resort: standalone [dir="auto"] with substantial text,
+      // excluding comments, headers, and nav elements
+      for (const el of post.querySelectorAll('[dir="auto"]')) {
+        if (el.closest('[role="navigation"]') || el.closest('header') || el.closest('[data-testid="UFI2Comment"]')) continue
+        // Also skip if inside a nested comment article
+        const parentArticle = el.closest('[role="article"]')
+        if (parentArticle && parentArticle !== post) continue
+        const t = el.innerText?.trim()
+        if (t && t.length >= MIN_TEXT_LENGTH && !t.startsWith('http')) {
+          log('Text extracted via broad [dir="auto"] fallback (filtered)')
+          return t.slice(0, 2000)
+        }
+      }
     }
-    // Fallback: any span with substantial text
+
+    // General fallback: any span with substantial text
     for (const span of post.querySelectorAll('span')) {
       const t = span.innerText?.trim()
-      if (t && t.length >= MIN_TEXT_LENGTH && !t.startsWith('http')) return t.slice(0, 2000)
+      if (t && t.length >= MIN_TEXT_LENGTH && !t.startsWith('http')) {
+        // Skip if inside a nested comment article
+        const parentArticle = span.closest('[role="article"]')
+        if (parentArticle && parentArticle !== post) continue
+        log('Text extracted via span fallback')
+        return t.slice(0, 2000)
+      }
     }
+
+    log('No text found in post')
     return null
   }
 
   function extractPostUrl(post) {
-    for (const sel of CFG.link) {
+    for (const sel of (CFG.link ?? [])) {
       const el = post.querySelector(sel)
       if (el?.href) return CFG.unwrapUrl(el)
     }
     return null
   }
 
-  /** Returns the src of the most prominent image in a post, or null. */
+  /**
+   * Returns the src of the most prominent content image in a post, or null.
+   * Filters out avatars, icons, emoji, and tracking pixels by:
+   *   1. Excluding images inside known avatar containers
+   *   2. Requiring a minimum rendered dimension (MIN_IMAGE_SIZE)
+   *   3. Preferring the largest image by naturalWidth
+   */
   function extractPostImage(post) {
     if (!CFG.image) return null
-    // Prefer largest image by rendered width
-    const imgs = Array.from(post.querySelectorAll(CFG.image))
-    if (!imgs.length) return null
-    const best = imgs.reduce((a, b) =>
+
+    const allImgs = Array.from(post.querySelectorAll(CFG.image))
+    if (!allImgs.length) { log('No candidate images found'); return null }
+
+    // Build a set of avatar container elements to check ancestry against
+    const avatarContainers = (CFG.avatarContainers ?? []).flatMap(sel =>
+      Array.from(post.querySelectorAll(sel))
+    )
+
+    const contentImgs = allImgs.filter(img => {
+      // Exclude images nested inside avatar containers
+      const isAvatar = avatarContainers.some(container => container.contains(img))
+      if (isAvatar) return false
+
+      // Exclude tiny images (avatars are typically 36-48px; icons < 24px)
+      const w = img.naturalWidth || img.width || 0
+      const h = img.naturalHeight || img.height || 0
+      if (w < MIN_IMAGE_SIZE && h < MIN_IMAGE_SIZE) return false
+
+      // Exclude common avatar URL patterns
+      const src = img.src || ''
+      if (PLATFORM === 'facebook' && /\/p\d+x\d+\//.test(src)) return false
+      if (PLATFORM === 'twitter' && src.includes('profile_images')) return false
+
+      return true
+    })
+
+    if (!contentImgs.length) { log('All images filtered out (avatars/icons)'); return null }
+
+    // Pick the largest content image (best representative for carousel posts)
+    const best = contentImgs.reduce((a, b) =>
       (b.naturalWidth || b.width || 0) > (a.naturalWidth || a.width || 0) ? b : a
     )
     const src = best.src || best.dataset?.src
     if (!src || !src.startsWith('http')) return null
+    log('Image extracted:', src.slice(0, 80) + '…')
     return src
   }
 
-  function genPostId(post) {
-    // Use aria-label prefix + UUID for stable, unique ID
-    // Avoids offsetTop which forces a synchronous layout read
-    const label = (post.getAttribute('aria-label') ?? '').replace(/\W/g, '').slice(0, 20)
-    return 'pv_' + label + crypto.randomUUID().replace(/-/g, '').slice(0, 12)
-  }
+  // ── Post discovery (feed-based strategy) ───────────────────────────────────
+
+  /**
+   * Checks if a [role="article"] element is a top-level post (not a comment).
+   *
+   * PRIMARY STRATEGY: Use [role="feed"] as the anchor.
+   * - [role="feed"] is a WAI-ARIA landmark that Facebook keeps for accessibility.
+   * - Direct children of the feed are always posts (wrapped in <div> containers).
+   * - Comments are always deeper nested inside another [role="article"].
+   *
+   * This function checks:
+   *   1. Is this article a direct descendant of [role="feed"]? → It's a post.
+   *   2. Is this article nested inside another article? → It's a comment.
+   *   3. Neither? Use URL-based heuristic for detail pages.
+   */
+  function isTopLevelPost(el) {
+    if (PLATFORM !== 'facebook') return true
+    if (el.getAttribute('role') !== 'article') return true
+
+    // ── Check 1: Is this article nested inside another article?
+    // If yes, it's definitely a comment (true for both feed and detail pages).
+    const parentArticle = el.parentElement?.closest('[role="article"]')
+    if (parentArticle) {
+      log('Skipping comment (nested inside parent article)')
+      return false
+    }
 
-  // ── Badge rendering ───────────────────────────────────────────────────────
+    // ── Check 2: Is this article a child of [role="feed"]?
+    // Direct children of the feed are always posts.
+    const feedAncestor = el.closest('[role="feed"]')
+    if (feedAncestor) {
+      // This article is inside the feed and NOT nested in another article → post
+      return true
+    }
 
-  function createBadge(verdict, score, result) {
-    const color = VERDICT_COLORS[verdict] ?? '#5c554e'
-    const label = VERDICT_LABELS[verdict] ?? verdict
+    // ── Check 3: Not in a feed — could be a detail page.
+    // On detail pages (e.g. /posts/123, /permalink/, /photo/),
+    // the FIRST [role="article"] on the page is the main post.
+    // All subsequent ones are comments.
+    const path = window.location.pathname + window.location.search
+    const isDetailPage = /\/(posts|photos|permalink|story\.php|watch|reel|videos)/.test(path)
+    if (isDetailPage) {
+      const allArticles = document.querySelectorAll('[role="article"]')
+      if (allArticles.length > 0 && allArticles[0] === el) {
+        // First article on a detail page → the main post
+        return true
+      }
+      // Not the first article on a detail page → comment
+      log('Skipping comment (detail page, not the first article)')
+      return false
+    }
 
-    const wrap = document.createElement('div')
-    wrap.className = 'pv-badge'
-    wrap.setAttribute('role', 'status')
-    wrap.setAttribute('aria-label', `PhilVerify: ${label} — ${Math.round(score)}% credibility score`)
-    wrap.style.cssText = `
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      padding: 4px 10px;
-      border-radius: 3px;
-      border: 1px solid ${color}4d;
-      background: ${color}14;
-      cursor: pointer;
-      font-family: system-ui, sans-serif;
-      font-size: 11px;
-      font-weight: 600;
-      letter-spacing: 0.04em;
-      color: ${color};
-      touch-action: manipulation;
-      -webkit-tap-highlight-color: transparent;
-      position: relative;
-      z-index: 10;
-    `
-
-    const dot = document.createElement('span')
-    dot.style.cssText = `
-      width: 7px; height: 7px;
-      border-radius: 50%;
-      background: ${color};
-      flex-shrink: 0;
-    `
-
-    const text = document.createElement('span')
-    text.textContent = `${label}  ${Math.round(score)}%`
-
-    const cacheTag = result._fromCache
-      ? (() => { const t = document.createElement('span'); t.textContent = '·cached'; t.style.cssText = `opacity:0.5;font-size:9px;`; return t })()
-      : null
-
-    wrap.appendChild(dot)
-    wrap.appendChild(text)
-    if (cacheTag) wrap.appendChild(cacheTag)
-
-    // Click → toggle detail panel
-    wrap.addEventListener('click', (e) => {
-      e.stopPropagation()
-      toggleDetailPanel(wrap, result)
-    })
+    // ── Fallback: Allow it (could be a page layout we haven't seen)
+    // Better to show a button on something unexpected than miss a real post.
+    return true
+  }
+
+  /**
+   * Find posts in the given DOM subtree.
+   *
+   * Two-pass strategy for Facebook:
+   *   Pass 1: Find [role="feed"] container → get [role="article"] elements
+   *           that are direct children of the feed (not nested in other articles)
+   *   Pass 2: If no feed found (detail pages, etc.), fall back to all
+   *           [role="article"] elements filtered by isTopLevelPost()
+   *
+   * For Twitter and other platforms, uses POST_SELECTORS directly.
+   */
+  function findPosts(root) {
+    if (PLATFORM === 'facebook') {
+      // ── Pass 1: Feed-based detection (most reliable)
+      const feeds = root.querySelectorAll('[role="feed"]')
+      if (feeds.length === 0 && root.getAttribute?.('role') === 'feed') {
+        // root itself might be the feed
+        const articles = Array.from(root.querySelectorAll('[role="article"]'))
+          .filter(el => !el.parentElement?.closest('[role="article"]'))
+        if (articles.length) {
+          log(`Found ${articles.length} posts via feed (root is feed)`)
+          return articles
+        }
+      }
+      for (const feed of feeds) {
+        // Get all articles inside this feed that are NOT nested in another article
+        const articles = Array.from(feed.querySelectorAll('[role="article"]'))
+          .filter(el => !el.parentElement?.closest('[role="article"]'))
+        if (articles.length) {
+          log(`Found ${articles.length} posts via [role="feed"] container`)
+          return articles
+        }
+      }
+
+      // ── Pass 2: No feed container found — detail page or unusual layout
+      const allArticles = Array.from(root.querySelectorAll('[role="article"]'))
+      const topLevel = allArticles.filter(el => isTopLevelPost(el))
+      if (topLevel.length) {
+        log(`Found ${topLevel.length} posts via fallback (no feed container)`)
+        return topLevel
+      }
+      return []
+    }
 
-    return wrap
+    // Non-Facebook platforms: simple selector matching
+    for (const sel of POST_SELECTORS) {
+      const found = Array.from(root.querySelectorAll(sel))
+      if (found.length) return found
+    }
+    return []
   }
 
-  function toggleDetailPanel(badge, result) {
-    const existing = badge.parentElement?.querySelector('.pv-detail')
-    if (existing) { existing.remove(); return }
-
-    const panel = document.createElement('div')
-    panel.className = 'pv-detail'
-    panel.setAttribute('role', 'dialog')
-    panel.setAttribute('aria-label', 'PhilVerify fact-check details')
-
-    const color = VERDICT_COLORS[result.verdict] ?? '#5c554e'
-    const topSource = result.layer2?.sources?.[0]
-
-    panel.innerHTML = `
-      <div class="pv-detail-header">
-        <span class="pv-logo">PHIL<span style="color:${color}">VERIFY</span></span>
-        <button class="pv-close" aria-label="Close fact-check panel">✕</button>
-      </div>
-      <div class="pv-row">
-        <span class="pv-label">VERDICT</span>
-        <span class="pv-val" style="color:${color};font-weight:700">${safeText(result.verdict)}</span>
-      </div>
-      <div class="pv-row">
-        <span class="pv-label">SCORE</span>
-        <span class="pv-val" style="color:${color}">${Math.round(result.final_score)}%</span>
-      </div>
-      <div class="pv-row">
-        <span class="pv-label">LANGUAGE</span>
-        <span class="pv-val">${safeText(result.language ?? '—')}</span>
-      </div>
-      ${result.layer1?.triggered_features?.length ? `
-      <div class="pv-signals">
-        <span class="pv-label">SIGNALS</span>
-        <div class="pv-tags">
-          ${result.layer1.triggered_features.slice(0, 3).map(f =>
-            `<span class="pv-tag">${safeText(f)}</span>`
-          ).join('')}
-        </div>
-      </div>` : ''}
-      ${topSource ? `
-      <div class="pv-source">
-        <span class="pv-label">TOP SOURCE</span>
-        <a href="${safeUrl(topSource.url)}" target="_blank" rel="noreferrer" class="pv-source-link">
-          ${safeText(topSource.title?.slice(0, 60) ?? topSource.source_name ?? 'View source')} ↗
-        </a>
-      </div>` : ''}
-      <a href="https://philverify.web.app" target="_blank" rel="noreferrer" class="pv-open-full">
-        Open full analysis ↗
-      </a>
-    `
-
-    panel.querySelector('.pv-close').addEventListener('click', (e) => {
+  // ── "Verify this post" button injection ───────────────────────────────────
+
+  /**
+   * Creates and injects a floating "Verify this post" button on a post.
+   * The button is absolutely positioned at the bottom-right of the post,
+   * above the action bar (like/comment/share).
+   */
+  function injectVerifyButton(post) {
+    // Prevent duplicate injection
+    if (post.dataset.philverifyBtn) return
+    post.dataset.philverifyBtn = 'true'
+
+    // Note: We do NOT gate on content availability here.
+    // Facebook lazy-loads post content via React hydration, so text/images
+    // may not be in the DOM yet when this runs. Content is checked at click
+    // time (in handleVerifyClick) when everything is fully rendered.
+
+    // Create wrapper (flex container for right-alignment)
+    const wrapper = document.createElement('div')
+    wrapper.className = 'pv-verify-btn-wrapper'
+
+    // Create the button
+    const btn = document.createElement('button')
+    btn.className = 'pv-verify-btn'
+    btn.setAttribute('type', 'button')
+    btn.setAttribute('aria-label', 'Verify this post with PhilVerify')
+
+    // Button content using createElement (no innerHTML for XSS safety)
+    const icon = document.createElement('span')
+    icon.className = 'pv-verify-btn-icon'
+    icon.textContent = '🛡️'
+    icon.setAttribute('aria-hidden', 'true')
+
+    const label = document.createElement('span')
+    label.className = 'pv-verify-btn-label'
+    label.textContent = 'Verify this post'
+
+    btn.appendChild(icon)
+    btn.appendChild(label)
+
+    // Click handler → extract content, call API, show report
+    btn.addEventListener('click', (e) => {
       e.stopPropagation()
-      panel.remove()
+      e.preventDefault()
+      handleVerifyClick(post, btn)
     })
 
-    badge.insertAdjacentElement('afterend', panel)
-  }
+    wrapper.appendChild(btn)
 
-  function injectBadgeIntoPost(post, result) {
-    // Find a stable injection point — platform-specific
-    let anchor = null
+    // Insert the wrapper inline in the post.
+    // Strategy: Find a good insertion point near the bottom of the
+    // visible post content, but BEFORE the comments section.
+    // On Facebook, we look for the action bar area or similar landmarks.
+    let inserted = false
     if (PLATFORM === 'facebook') {
-      anchor = post.querySelector('[data-testid="UFI2ReactionsCount/root"]')
-        ?? post.querySelector('[aria-label*="reaction"]')
-        ?? post.querySelector('[role="toolbar"]')
-    } else if (PLATFORM === 'twitter') {
-      // Tweet action bar (reply / retweet / like row)
-      anchor = post.querySelector('[role="group"][aria-label]')
-        ?? post.querySelector('[data-testid="reply"]')?.closest('[role="group"]')
+      // Try to insert after the action bar (Like/Comment/Share row)
+      const actionBar = post.querySelector('[role="toolbar"]') ||
+        post.querySelector('[aria-label*="Like"]')?.closest('div:not([role="article"])')
+      if (actionBar?.parentElement) {
+        actionBar.parentElement.insertBefore(wrapper, actionBar.nextSibling)
+        inserted = true
+      }
     }
 
-    const container = document.createElement('div')
-    container.className = 'pv-badge-wrap'
-    const badge = createBadge(result.verdict, result.final_score, result)
-    container.appendChild(badge)
-
-    if (anchor && anchor !== post) {
-      anchor.insertAdjacentElement('beforebegin', container)
-    } else {
-      post.appendChild(container)
+    // Fallback: just append to the post (works for Twitter and other platforms)
+    if (!inserted) {
+      post.appendChild(wrapper)
     }
-  }
 
-  // ── Loading state ─────────────────────────────────────────────────────────
-
-  function injectLoadingBadge(post) {
-    const container = document.createElement('div')
-    container.className = 'pv-badge-wrap pv-loading'
-    container.setAttribute('aria-label', 'PhilVerify: verifying…')
-    container.innerHTML = `
-      <div class="pv-badge pv-badge--loading">
-        <span class="pv-spinner" aria-hidden="true"></span>
-        <span>Verifying…</span>
-      </div>
-    `
-    post.appendChild(container)
-    return container
+    log('Verify button injected on post')
   }
 
-  // ── Post processing ───────────────────────────────────────────────────────
-
-  async function processPost(post) {
-    if (post.dataset.philverify) return    // already processed
-    const id = genPostId(post)
-    post.dataset.philverify = id
-
-    const text  = extractPostText(post)
-    const url   = extractPostUrl(post)
+  // ── Verify click handler ──────────────────────────────────────────────────
+
+  async function handleVerifyClick(post, btn) {
+    // Disable button and show loading state
+    btn.disabled = true
+    btn.classList.add('pv-verify-btn--loading')
+    const origIcon = btn.querySelector('.pv-verify-btn-icon')
+    const origLabel = btn.querySelector('.pv-verify-btn-label')
+    if (origIcon) origIcon.textContent = ''
+    if (origLabel) origLabel.textContent = 'Analyzing…'
+
+    // Add spinner
+    const spinner = document.createElement('span')
+    spinner.className = 'pv-spinner'
+    spinner.setAttribute('aria-hidden', 'true')
+    btn.insertBefore(spinner, btn.firstChild)
+
+    // Extract content
+    const text = extractPostText(post)
+    const url = extractPostUrl(post)
     const image = extractPostImage(post)
 
-    // Need at least one signal to verify
-    if (!text && !url && !image) return
+    log(`Verify clicked: text=${!!text} (${text?.length ?? 0} chars), url=${!!url}, image=${!!image}`)
 
-    const loader = injectLoadingBadge(post)
+    // Determine what to send
+    let inputSummary = ''
+    if (!text && !url && !image) {
+      showErrorReport(post, btn, 'Could not read post content — no text or image found.')
+      return
+    }
 
     try {
       let msgPayload
+
       if (url) {
-        // A shared article link is the most informative signal
         msgPayload = { type: 'VERIFY_URL', url }
+        inputSummary = 'Shared link analyzed'
+      } else if (text && image) {
+        msgPayload = { type: 'VERIFY_TEXT', text, imageUrl: image }
+        inputSummary = 'Caption + image analyzed'
       } else if (text) {
-        // Caption / tweet text
         msgPayload = { type: 'VERIFY_TEXT', text }
+        inputSummary = 'Caption text only'
       } else {
-        // Image-only post — send to OCR endpoint
         msgPayload = { type: 'VERIFY_IMAGE_URL', imageUrl: image }
+        inputSummary = 'Image only (OCR)'
       }
 
       const response = await new Promise((resolve, reject) => {
         chrome.runtime.sendMessage(msgPayload, (resp) => {
           if (chrome.runtime.lastError) reject(new Error(chrome.runtime.lastError.message))
-          else if (!resp?.ok)           reject(new Error(resp?.error ?? 'Unknown error'))
-          else                          resolve(resp.result)
+          else if (!resp?.ok) reject(new Error(resp?.error ?? 'Unknown error'))
+          else resolve(resp.result)
         })
       })
 
-      loader.remove()
-      injectBadgeIntoPost(post, response)
+      log(`Verification result: verdict=${response.verdict}, score=${response.final_score}`)
+      showVerificationReport(post, btn, response, inputSummary)
     } catch (err) {
-      loader.remove()
-      const errBadge = document.createElement('div')
-      errBadge.className = 'pv-badge-wrap'
-      const errInner = document.createElement('div')
-      errInner.className = 'pv-badge pv-badge--error'
-      errInner.title = err.message
-      errInner.textContent = '⚠ PhilVerify offline'
-      errBadge.appendChild(errInner)
-      post.appendChild(errBadge)
+      warn('Verification failed:', err.message)
+      showErrorReport(post, btn, err.message)
     }
   }
 
+  // ── Verification report rendering ───────���─────────────────────────────────
+
+  function showVerificationReport(post, btn, result, inputSummary) {
+    // Remove the button
+    btn.remove()
+
+    // Remove any existing report on this post
+    const existing = post.querySelector('.pv-report')
+    if (existing) existing.remove()
+
+    const verdict = result.verdict ?? 'Unknown'
+    const color = VERDICT_COLORS[verdict] ?? '#5c554e'
+    const bg = VERDICT_BG[verdict] ?? 'rgba(92, 85, 78, 0.12)'
+    const label = VERDICT_LABELS[verdict] ?? verdict
+    const score = Math.round(result.final_score ?? 0)
+    const confidence = result.confidence?.toFixed(1) ?? '—'
+    const language = result.language ?? '—'
+    const sources = result.layer2?.sources ?? []
+    const features = result.layer1?.triggered_features ?? []
+    const cached = result._fromCache ? ' · cached' : ''
+
+    // Build report using createElement (no innerHTML for XSS safety)
+    const report = document.createElement('div')
+    report.className = 'pv-report'
+    report.setAttribute('role', 'region')
+    report.setAttribute('aria-label', 'PhilVerify fact-check report')
+
+    // — Header row
+    const header = document.createElement('div')
+    header.className = 'pv-report-header'
+
+    const logo = document.createElement('span')
+    logo.className = 'pv-report-logo'
+    logo.innerHTML = 'PHIL<span style="color:#dc2626">VERIFY</span>'
+
+    const closeBtn = document.createElement('button')
+    closeBtn.className = 'pv-report-close'
+    closeBtn.textContent = '✕'
+    closeBtn.setAttribute('aria-label', 'Close fact-check report')
+    closeBtn.addEventListener('click', (e) => {
+      e.stopPropagation()
+      report.remove()
+      // Re-inject the verify button so user can re-verify
+      delete post.dataset.philverifyBtn
+      injectVerifyButton(post)
+    })
+
+    header.appendChild(logo)
+    header.appendChild(closeBtn)
+    report.appendChild(header)
+
+    // — Verdict row (large, prominent)
+    const verdictRow = document.createElement('div')
+    verdictRow.className = 'pv-report-verdict-row'
+    verdictRow.style.borderLeftColor = color
+
+    const verdictLabel = document.createElement('div')
+    verdictLabel.className = 'pv-report-verdict'
+    verdictLabel.style.color = color
+    verdictLabel.textContent = label
+
+    const scoreText = document.createElement('div')
+    scoreText.className = 'pv-report-score-text'
+    scoreText.textContent = `${score}% credibility${cached}`
+
+    verdictRow.appendChild(verdictLabel)
+    verdictRow.appendChild(scoreText)
+    report.appendChild(verdictRow)
+
+    // — Confidence bar
+    const barWrap = document.createElement('div')
+    barWrap.className = 'pv-confidence-bar-wrap'
+
+    const barLabel = document.createElement('span')
+    barLabel.className = 'pv-report-label'
+    barLabel.textContent = 'CONFIDENCE'
+
+    const barTrack = document.createElement('div')
+    barTrack.className = 'pv-confidence-bar-track'
+
+    const barFill = document.createElement('div')
+    barFill.className = 'pv-confidence-bar-fill'
+    barFill.style.width = `${Math.min(score, 100)}%`
+    barFill.style.background = color
+
+    const barValue = document.createElement('span')
+    barValue.className = 'pv-confidence-bar-value'
+    barValue.textContent = `${confidence}%`
+
+    barTrack.appendChild(barFill)
+    barWrap.appendChild(barLabel)
+    barWrap.appendChild(barTrack)
+    barWrap.appendChild(barValue)
+    report.appendChild(barWrap)
+
+    // — Info rows (Language, Input)
+    const addInfoRow = (labelText, valueText) => {
+      const row = document.createElement('div')
+      row.className = 'pv-report-row'
+      const lbl = document.createElement('span')
+      lbl.className = 'pv-report-label'
+      lbl.textContent = labelText
+      const val = document.createElement('span')
+      val.className = 'pv-report-value'
+      val.textContent = valueText
+      row.appendChild(lbl)
+      row.appendChild(val)
+      report.appendChild(row)
+    }
+
+    addInfoRow('LANGUAGE', safeText(language))
+    addInfoRow('INPUT', safeText(inputSummary))
+
+    // — Triggered signals/features
+    if (features.length > 0) {
+      const signalsSection = document.createElement('div')
+      signalsSection.className = 'pv-report-signals'
+
+      const signalsLabel = document.createElement('span')
+      signalsLabel.className = 'pv-report-label'
+      signalsLabel.textContent = 'SUSPICIOUS SIGNALS'
+      signalsSection.appendChild(signalsLabel)
+
+      const tagsWrap = document.createElement('div')
+      tagsWrap.className = 'pv-report-tags'
+      for (const f of features.slice(0, 5)) {
+        const tag = document.createElement('span')
+        tag.className = 'pv-report-tag'
+        tag.textContent = f
+        tagsWrap.appendChild(tag)
+      }
+      signalsSection.appendChild(tagsWrap)
+      report.appendChild(signalsSection)
+    }
+
+    // — Evidence sources
+    if (sources.length > 0) {
+      const sourcesSection = document.createElement('div')
+      sourcesSection.className = 'pv-report-sources'
+
+      const sourcesLabel = document.createElement('span')
+      sourcesLabel.className = 'pv-report-label'
+      sourcesLabel.textContent = 'EVIDENCE SOURCES'
+      sourcesSection.appendChild(sourcesLabel)
+
+      const sourcesList = document.createElement('ul')
+      sourcesList.className = 'pv-report-sources-list'
+
+      for (const src of sources.slice(0, 5)) {
+        const li = document.createElement('li')
+        li.className = 'pv-report-source-item'
+
+        const link = document.createElement('a')
+        link.href = safeUrl(src.url)
+        link.target = '_blank'
+        link.rel = 'noreferrer'
+        link.className = 'pv-report-source-link'
+        link.textContent = src.title?.slice(0, 60) ?? src.source_name ?? 'View source'
+
+        const stance = document.createElement('span')
+        stance.className = 'pv-report-source-stance'
+        stance.textContent = src.stance ?? ''
+        if (src.stance === 'Refutes') stance.style.color = '#dc2626'
+        if (src.stance === 'Supports') stance.style.color = '#16a34a'
+
+        li.appendChild(link)
+        li.appendChild(stance)
+        sourcesList.appendChild(li)
+      }
+      sourcesSection.appendChild(sourcesList)
+      report.appendChild(sourcesSection)
+    }
+
+    // — Explanation (claim used)
+    if (result.layer2?.claim_used) {
+      const explanation = document.createElement('div')
+      explanation.className = 'pv-report-explanation'
+      const explLabel = document.createElement('span')
+      explLabel.className = 'pv-report-label'
+      explLabel.textContent = 'CLAIM ANALYZED'
+      const explText = document.createElement('p')
+      explText.className = 'pv-report-explanation-text'
+      explText.textContent = result.layer2.claim_used
+      explanation.appendChild(explLabel)
+      explanation.appendChild(explText)
+      report.appendChild(explanation)
+    }
+
+    // — Full analysis link
+    const fullLink = document.createElement('a')
+    fullLink.className = 'pv-report-full-link'
+    fullLink.href = 'https://philverify.web.app'
+    fullLink.target = '_blank'
+    fullLink.rel = 'noreferrer'
+    fullLink.textContent = 'Open Full Dashboard ↗'
+    report.appendChild(fullLink)
+
+    // Insert report into post
+    post.appendChild(report)
+  }
+
+  function showErrorReport(post, btn, errorMessage) {
+    // Remove spinner, restore button as error state
+    btn.classList.remove('pv-verify-btn--loading')
+    btn.classList.add('pv-verify-btn--error')
+    btn.disabled = false
+
+    const spinner = btn.querySelector('.pv-spinner')
+    if (spinner) spinner.remove()
+
+    const icon = btn.querySelector('.pv-verify-btn-icon')
+    const label = btn.querySelector('.pv-verify-btn-label')
+    if (icon) icon.textContent = '⚠️'
+    if (label) label.textContent = 'Verification failed — tap to retry'
+
+    // On next click, retry
+    const retryHandler = (e) => {
+      e.stopPropagation()
+      e.preventDefault()
+      btn.removeEventListener('click', retryHandler)
+      btn.classList.remove('pv-verify-btn--error')
+      handleVerifyClick(post, btn)
+    }
+
+    // Remove old click listeners by replacing element
+    const newBtn = btn.cloneNode(true)
+    btn.replaceWith(newBtn)
+    newBtn.addEventListener('click', (e) => {
+      e.stopPropagation()
+      e.preventDefault()
+      newBtn.classList.remove('pv-verify-btn--error')
+      handleVerifyClick(post, newBtn)
+    })
+  }
+
   // ── MutationObserver ──────────────────────────────────────────────────────
 
   const pendingPosts = new Set()
@@ -359,7 +774,7 @@
 
   function flushPosts() {
     rafScheduled = false
-    for (const post of pendingPosts) processPost(post)
+    for (const post of pendingPosts) injectVerifyButton(post)
     pendingPosts.clear()
   }
 
@@ -371,39 +786,29 @@
     }
   }
 
-  function findPosts(root) {
-    for (const sel of POST_SELECTORS) {
-      const found = Array.from(root.querySelectorAll(sel))
-      if (!found.length) continue
-
-      // For [role="article"] on Facebook we must filter out comment items.
-      // A comment article is always nested inside a parent [role="article"].
-      if (PLATFORM === 'facebook' && sel === '[role="article"]') {
-        const topLevel = found.filter(el => !el.parentElement?.closest('[role="article"]'))
-        if (topLevel.length) return topLevel
-        continue
-      }
-
-      return found
-    }
-    return []
-  }
-
   const observer = new MutationObserver((mutations) => {
     for (const mutation of mutations) {
       for (const node of mutation.addedNodes) {
         if (node.nodeType !== 1) continue   // element nodes only
-        // Check if the node itself matches a post selector
-        for (const sel of POST_SELECTORS) {
-          if (node.matches?.(sel)) {
-            // Skip comment articles on Facebook
-            if (PLATFORM === 'facebook' && sel === '[role="article"]'
-                && node.parentElement?.closest('[role="article"]')) break
-            scheduleProcess(node)
-            break
+
+        if (PLATFORM === 'facebook') {
+          // Facebook strategy: only process nodes that are inside [role="feed"]
+          // or that contain a feed. This prevents processing individual comment
+          // nodes that are added dynamically.
+          const inFeed = node.closest?.('[role="feed"]') ||
+            node.querySelector?.('[role="feed"]') ||
+            node.getAttribute?.('role') === 'feed'
+          if (!inFeed && node.getAttribute?.('role') === 'article') {
+            // An article added outside of a feed — could be a detail page.
+            // Only process if isTopLevelPost says it's a post.
+            if (isTopLevelPost(node)) {
+              scheduleProcess(node)
+            }
+            continue
           }
         }
-        // Check descendants
+
+        // Check descendants for posts (findPosts handles feed-based filtering)
         const posts = findPosts(node)
         for (const post of posts) scheduleProcess(post)
       }
@@ -413,22 +818,39 @@
   // ── Initialization ────────────────────────────────────────────────────────
 
   async function init() {
-    // Check autoScan setting before activating.
-    // Default to true if the service worker hasn't responded yet (MV3 cold start).
-    const response = await new Promise(resolve => {
-      chrome.runtime.sendMessage({ type: 'GET_SETTINGS' }, (r) => {
-        resolve(r ?? { autoScan: true })
+    log(`Initializing on ${PLATFORM} (${window.location.hostname})`)
+
+    // Check autoScan setting — controls whether buttons are shown at all
+    let response
+    try {
+      response = await new Promise((resolve, reject) => {
+        chrome.runtime.sendMessage({ type: 'GET_SETTINGS' }, (r) => {
+          if (chrome.runtime.lastError) {
+            warn('Settings fetch error:', chrome.runtime.lastError.message)
+            resolve({ autoScan: true })
+          } else {
+            resolve(r ?? { autoScan: true })
+          }
+        })
       })
-    }).catch(() => ({ autoScan: true }))
+    } catch {
+      response = { autoScan: true }
+    }
 
-    if (response?.autoScan === false) return
+    log('Settings:', response)
+    if (response?.autoScan === false) {
+      log('Auto-scan disabled by settings — no verify buttons will be shown')
+      return
+    }
 
     // Process any posts already in the DOM
     const existing = findPosts(document.body)
+    log(`Found ${existing.length} existing posts`)
     for (const post of existing) scheduleProcess(post)
 
-    // Watch for new posts (Facebook is a SPA — feed dynamically loads more)
+    // Watch for new posts (both platforms are SPAs with infinite scroll)
     observer.observe(document.body, { childList: true, subtree: true })
+    log('MutationObserver started — watching for new posts')
   }
 
   init()
@@ -438,7 +860,7 @@
   // it auto-verifies the current URL and injects a floating verdict banner.
 
   async function autoVerifyPage() {
-    const url  = window.location.href
+    const url = window.location.href
     const path = new URL(url).pathname
     // Skip homepages and section indexes (very short paths like / or /news)
     if (!path || path.length < 8 || path.split('/').filter(Boolean).length < 2) return
@@ -455,36 +877,58 @@
       'box-shadow:0 2px 16px rgba(0,0,0,0.6)',
     ].join(';')
 
-    banner.innerHTML = `
-      <div style="display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;">
-        <span style="font-weight:800;letter-spacing:0.1em;color:#f5f0e8;flex-shrink:0;">
-          PHIL<span style="color:#dc2626">VERIFY</span>
-        </span>
-        <span id="pv-auto-status" style="display:flex;align-items:center;gap:6px;overflow:hidden;">
-          <span class="pv-spinner" aria-hidden="true"></span>
-          <span style="white-space:nowrap;">Verifying article…</span>
-        </span>
-      </div>
-      <div style="display:flex;align-items:center;gap:8px;flex-shrink:0;">
-        <a id="pv-open-full"
-           href="https://philverify.web.app"
-           target="_blank"
-           rel="noreferrer"
-           style="color:#dc2626;font-size:9px;font-weight:700;letter-spacing:0.1em;text-decoration:none;border:1px solid rgba(220,38,38,0.35);padding:3px 8px;border-radius:2px;white-space:nowrap;"
-           aria-label="Open PhilVerify dashboard">
-          FULL ANALYSIS ↗
-        </a>
-        <button id="pv-close-banner"
-          style="background:none;border:none;color:#5c554e;cursor:pointer;font-size:13px;padding:2px 4px;line-height:1;flex-shrink:0;"
-          aria-label="Dismiss PhilVerify banner">✕</button>
-      </div>
-    `
+    // Build banner content with createElement for XSS safety
+    const leftSection = document.createElement('div')
+    leftSection.style.cssText = 'display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;'
+
+    const logoSpan = document.createElement('span')
+    logoSpan.style.cssText = 'font-weight:800;letter-spacing:0.1em;color:#f5f0e8;flex-shrink:0;'
+    logoSpan.innerHTML = 'PHIL<span style="color:#dc2626">VERIFY</span>'
+
+    const statusEl = document.createElement('span')
+    statusEl.id = 'pv-auto-status'
+    statusEl.style.cssText = 'display:flex;align-items:center;gap:6px;overflow:hidden;'
+
+    const statusSpinner = document.createElement('span')
+    statusSpinner.className = 'pv-spinner'
+    statusSpinner.setAttribute('aria-hidden', 'true')
+
+    const statusText = document.createElement('span')
+    statusText.style.cssText = 'white-space:nowrap;'
+    statusText.textContent = 'Verifying article…'
+
+    statusEl.appendChild(statusSpinner)
+    statusEl.appendChild(statusText)
+    leftSection.appendChild(logoSpan)
+    leftSection.appendChild(statusEl)
+
+    const rightSection = document.createElement('div')
+    rightSection.style.cssText = 'display:flex;align-items:center;gap:8px;flex-shrink:0;'
+
+    const fullLink = document.createElement('a')
+    fullLink.id = 'pv-open-full'
+    fullLink.href = 'https://philverify.web.app'
+    fullLink.target = '_blank'
+    fullLink.rel = 'noreferrer'
+    fullLink.style.cssText = 'color:#dc2626;font-size:9px;font-weight:700;letter-spacing:0.1em;text-decoration:none;border:1px solid rgba(220,38,38,0.35);padding:3px 8px;border-radius:2px;white-space:nowrap;'
+    fullLink.setAttribute('aria-label', 'Open PhilVerify dashboard')
+    fullLink.textContent = 'FULL ANALYSIS ↗'
+
+    const closeButton = document.createElement('button')
+    closeButton.id = 'pv-close-banner'
+    closeButton.style.cssText = 'background:none;border:none;color:#5c554e;cursor:pointer;font-size:13px;padding:2px 4px;line-height:1;flex-shrink:0;'
+    closeButton.setAttribute('aria-label', 'Dismiss PhilVerify banner')
+    closeButton.textContent = '✕'
+
+    rightSection.appendChild(fullLink)
+    rightSection.appendChild(closeButton)
+    banner.appendChild(leftSection)
+    banner.appendChild(rightSection)
 
     document.body.insertAdjacentElement('afterbegin', banner)
-    // Push page content down so banner doesn't overlap
     document.documentElement.style.marginTop = '36px'
 
-    document.getElementById('pv-close-banner').addEventListener('click', () => {
+    closeButton.addEventListener('click', () => {
       banner.remove()
       document.documentElement.style.marginTop = ''
     })
@@ -493,29 +937,41 @@
       const response = await new Promise((resolve, reject) => {
         chrome.runtime.sendMessage({ type: 'VERIFY_URL', url }, (resp) => {
           if (chrome.runtime.lastError) reject(new Error(chrome.runtime.lastError.message))
-          else if (!resp?.ok)           reject(new Error(resp?.error ?? 'Unknown error'))
-          else                          resolve(resp.result)
+          else if (!resp?.ok) reject(new Error(resp?.error ?? 'Unknown error'))
+          else resolve(resp.result)
         })
       })
 
-      const color   = VERDICT_COLORS[response.verdict] ?? '#5c554e'
-      const statusEl = document.getElementById('pv-auto-status')
-      if (statusEl) {
-        statusEl.innerHTML = `
-          <span style="width:8px;height:8px;border-radius:50%;background:${color};flex-shrink:0;" aria-hidden="true"></span>
-          <span style="color:${color};font-weight:700;">${safeText(response.verdict)}</span>
-          <span style="color:#5c554e;margin-left:2px;">${Math.round(response.final_score)}% credibility</span>
-          ${response.layer1?.triggered_features?.length
-            ? `<span style="color:#5c554e;margin-left:4px;font-size:9px;">· ${safeText(response.layer1.triggered_features[0])}</span>`
-            : ''}
-        `
+      const color = VERDICT_COLORS[response.verdict] ?? '#5c554e'
+      // Update status with result
+      statusEl.textContent = ''
+
+      const dotEl = document.createElement('span')
+      dotEl.style.cssText = `width:8px;height:8px;border-radius:50%;background:${color};flex-shrink:0;`
+      dotEl.setAttribute('aria-hidden', 'true')
+
+      const verdictEl = document.createElement('span')
+      verdictEl.style.cssText = `color:${color};font-weight:700;`
+      verdictEl.textContent = response.verdict
+
+      const scoreEl = document.createElement('span')
+      scoreEl.style.cssText = 'color:#5c554e;margin-left:2px;'
+      scoreEl.textContent = `${Math.round(response.final_score)}% credibility`
+
+      statusEl.appendChild(dotEl)
+      statusEl.appendChild(verdictEl)
+      statusEl.appendChild(scoreEl)
+
+      if (response.layer1?.triggered_features?.length) {
+        const featureEl = document.createElement('span')
+        featureEl.style.cssText = 'color:#5c554e;margin-left:4px;font-size:9px;'
+        featureEl.textContent = `· ${response.layer1.triggered_features[0]}`
+        statusEl.appendChild(featureEl)
       }
+
       banner.style.borderBottomColor = color + '88'
-      // Update full-analysis link to deep-link with the URL pre-filled
-      const fullLink = document.getElementById('pv-open-full')
-      if (fullLink) fullLink.href = `https://philverify.web.app`
 
-      // Auto-dismiss if credible and user hasn't interacted
+      // Auto-dismiss if credible
       if (response.verdict === 'Credible') {
         setTimeout(() => {
           if (document.contains(banner)) {
@@ -533,14 +989,20 @@
   if (!IS_SOCIAL) {
     autoVerifyPage()
   }
+
+  // Listen for settings changes to enable/disable button injection
   chrome.storage.onChanged.addListener((changes, area) => {
     if (area !== 'local' || !changes.settings) return
     const autoScan = changes.settings.newValue?.autoScan
     if (autoScan === false) {
       observer.disconnect()
+      // Remove all existing verify buttons
+      document.querySelectorAll('.pv-verify-btn').forEach(btn => btn.remove())
+      document.querySelectorAll('[data-philverify-btn]').forEach(el => {
+        delete el.dataset.philverifyBtn
+      })
     } else if (autoScan === true) {
       observer.observe(document.body, { childList: true, subtree: true })
-      // Process any posts that appeared while scanning was paused
       const existing = findPosts(document.body)
       for (const post of existing) scheduleProcess(post)
     }

frontend/src/pages/VerifyPage.jsx

@@ -1,12 +1,12 @@
 import { useState, useRef, useId, useCallback, useEffect } from 'react'
 import { api } from '../api'
-import { scoreColor, VERDICT_MAP } from '../utils/format.js'
+import { scoreColor, VERDICT_MAP, scoreInterpretation, mlConfidenceExplanation, evidenceExplanation } from '../utils/format.js'
 import { PAGE_STYLE } from '../App.jsx'
 import ScoreGauge from '../components/ScoreGauge.jsx'
 import VerdictBadge from '../components/VerdictBadge.jsx'
 import WordHighlighter from '../components/WordHighlighter.jsx'
 import SkeletonCard from '../components/SkeletonCard.jsx'
-import { FileText, Link2, Image, Video, Loader2, ChevronRight, AlertCircle, Upload, CheckCircle2, XCircle, HelpCircle, ExternalLink, Layers, Brain, RefreshCw } from 'lucide-react'
+import { FileText, Link2, Image, Video, Loader2, ChevronRight, AlertCircle, Upload, CheckCircle2, XCircle, HelpCircle, ExternalLink, Layers, Brain, RefreshCw, Info } from 'lucide-react'
 
 /* ── Tab definitions ────────────────────────────────────── */
 const TABS = [
@@ -244,6 +244,7 @@ export default function VerifyPage() {
     const [submittedInput, setSubmittedInput] = useState(persisted?.submittedInput ?? null)
     const [urlPreview, setUrlPreview] = useState(null)
     const [urlPreviewLoading, setUrlPreviewLoading] = useState(false)
+    const [extractedTextOpen, setExtractedTextOpen] = useState(false)
     const fileRef = useRef()
     const inputSectionRef = useRef()
     const inputId = useId()
@@ -325,7 +326,7 @@ export default function VerifyPage() {
     }
 
     function handleVerifyAgain() {
-        setResult(null); setError(null)
+        setResult(null); setError(null); setExtractedTextOpen(false)
         sessionStorage.removeItem(STORAGE_KEY)
         // Smooth-scroll back to the input panel
         requestAnimationFrame(() => {
@@ -667,13 +668,35 @@ export default function VerifyPage() {
                         </button>
                     </div>
 
-                    {/* Row 1: Gauge + Meta */}
+                    {/* Row 1: Gauge + Verdict explanation + Meta */}
                     <div className="grid gap-4 fade-up-1" style={{ gridTemplateColumns: 'min(180px, 40%) 1fr' }}>
                         <div className="card p-5 flex flex-col items-center justify-center gap-3">
                             <ScoreGauge score={result.final_score} size={140} />
                             <VerdictBadge verdict={result.verdict} size="banner" />
                         </div>
                         <div className="card p-5 fade-up-2">
+                            {/* Plain-language verdict explanation */}
+                            <div className="mb-4 p-3" style={{
+                                background: result.verdict === 'Credible' ? 'rgba(34,197,94,0.08)'
+                                    : result.verdict === 'Likely Fake' ? 'rgba(220,38,38,0.08)'
+                                    : 'rgba(234,179,8,0.08)',
+                                border: `1px solid ${result.verdict === 'Credible' ? 'rgba(34,197,94,0.25)'
+                                    : result.verdict === 'Likely Fake' ? 'rgba(220,38,38,0.25)'
+                                    : 'rgba(234,179,8,0.25)'}`,
+                                borderRadius: 2,
+                            }}>
+                                <div className="flex items-start gap-2">
+                                    <Info size={13} style={{ color: finalColor, marginTop: 2, flexShrink: 0 }} aria-hidden="true" />
+                                    <div>
+                                        <p className="text-sm font-semibold mb-1" style={{ color: finalColor, fontFamily: 'var(--font-display)' }}>
+                                            What does this mean?
+                                        </p>
+                                        <p className="text-xs" style={{ color: 'var(--text-secondary)', fontFamily: 'var(--font-body)', lineHeight: 1.6 }}>
+                                            {(VERDICT_MAP[result.verdict] ?? VERDICT_MAP['Unverified']).explanation}
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
                             <SectionHeading>Analysis Details</SectionHeading>
                             <MetaRow label="Language" value={result.language} />
                             <MetaRow label="Sentiment" value={result.sentiment} />
@@ -688,39 +711,138 @@ export default function VerifyPage() {
                     {/* Row 2: Score breakdown */}
                     <div className="card p-5 fade-up-3">
                         <SectionHeading>Score Breakdown</SectionHeading>
+                        <p className="text-xs mb-4" style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-body)', lineHeight: 1.6 }}>
+                            The final score combines two layers of analysis. A score of 70+ means likely credible, 40–69 is uncertain, and below 40 is likely false.
+                        </p>
                         <div className="space-y-4">
-                            <ScoreBar label="ML Classifier (Layer 1 — 40%)" value={result.layer1?.confidence || 0} color="var(--accent-cyan)" index={0} />
-                            <ScoreBar label="Evidence Score (Layer 2 — 60%)" value={result.layer2?.evidence_score || 0} color="var(--accent-gold)" index={1} />
-                            <ScoreBar label="Final Credibility Score" value={result.final_score} color={finalColor} index={2} />
+                            <ScoreBar label="ML Classifier (Layer 1 — 40% weight)" value={result.layer1?.confidence || 0} color="var(--accent-cyan)" index={0} />
+                            <ScoreBar label="Evidence Cross-Check (Layer 2 — 60% weight)" value={result.layer2?.evidence_score || 0} color="var(--accent-gold)" index={1} />
+                            <div style={{ borderTop: '1px solid var(--border)', paddingTop: 12 }}>
+                                <ScoreBar label="Final Credibility Score" value={result.final_score} color={finalColor} index={2} />
+                            </div>
                         </div>
+                        <p className="text-xs mt-3" style={{ color: finalColor, fontFamily: 'var(--font-body)', lineHeight: 1.6, fontWeight: 600 }}>
+                            {scoreInterpretation(result.final_score)}
+                        </p>
                     </div>
 
+                    {/* Row 2½: Extracted Text (collapsible) */}
+                    {result.extracted_text && (
+                        <div className="card fade-up-3" style={{ overflow: 'hidden' }}>
+                            <button
+                                onClick={() => setExtractedTextOpen(o => !o)}
+                                className="w-full flex items-center justify-between px-5 py-3 transition-colors"
+                                style={{
+                                    background: 'none',
+                                    border: 'none',
+                                    cursor: 'pointer',
+                                    borderBottom: extractedTextOpen ? '1px solid var(--border)' : 'none',
+                                }}
+                                onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
+                                onMouseLeave={e => e.currentTarget.style.background = 'none'}
+                                aria-expanded={extractedTextOpen}
+                                aria-controls="extracted-text-panel"
+                            >
+                                <div className="flex items-center gap-2">
+                                    <span className="text-xs font-semibold uppercase tracking-widest"
+                                        style={{ fontFamily: 'var(--font-display)', color: 'var(--text-muted)', letterSpacing: '0.15em' }}>
+                                        {result.input_type === 'image' ? 'OCR Extracted Text'
+                                            : result.input_type === 'video' ? 'Transcribed Text'
+                                            : result.input_type === 'url' ? 'Scraped Text'
+                                            : 'Analyzed Text'}
+                                    </span>
+                                    <span className="text-xs tabular"
+                                        style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-mono)', fontSize: 10 }}>
+                                        {result.extracted_text.length} chars
+                                    </span>
+                                </div>
+                                <ChevronRight size={13}
+                                    style={{
+                                        color: 'var(--text-muted)',
+                                        transform: extractedTextOpen ? 'rotate(90deg)' : 'rotate(0deg)',
+                                        transition: 'transform 200ms ease',
+                                        flexShrink: 0,
+                                    }}
+                                    aria-hidden="true"
+                                />
+                            </button>
+                            {extractedTextOpen && (
+                                <div id="extracted-text-panel" className="px-5 py-4">
+                                    {result.input_type === 'url' && (
+                                        <p className="text-xs mb-3" style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-body)', lineHeight: 1.5 }}>
+                                            This is the text our scraper extracted from the URL. If it looks wrong or incomplete, the page may have been partially blocked.
+                                        </p>
+                                    )}
+                                    {result.input_type === 'image' && (
+                                        <p className="text-xs mb-3" style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-body)', lineHeight: 1.5 }}>
+                                            This is the text read from your image using OCR. Poor image quality may cause errors.
+                                        </p>
+                                    )}
+                                    {result.input_type === 'video' && (
+                                        <p className="text-xs mb-3" style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-body)', lineHeight: 1.5 }}>
+                                            This is the speech transcribed from your video/audio file.
+                                        </p>
+                                    )}
+                                    <pre
+                                        style={{
+                                            whiteSpace: 'pre-wrap',
+                                            wordBreak: 'break-word',
+                                            fontFamily: 'var(--font-mono)',
+                                            fontSize: 12,
+                                            lineHeight: 1.7,
+                                            color: 'var(--text-secondary)',
+                                            background: 'var(--bg-elevated)',
+                                            border: '1px solid var(--border)',
+                                            borderRadius: 2,
+                                            padding: '12px 14px',
+                                            maxHeight: 280,
+                                            overflowY: 'auto',
+                                        }}
+                                    >
+                                        {result.extracted_text}
+                                    </pre>
+                                </div>
+                            )}
+                        </div>
+                    )}
+
                     {/* Row 3: Layer cards (2 col, collapses to 1 on mobile) */}
                     <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 fade-up-4">
                         {/* Layer 1 */}
                         <LayerCard
-                            title="Layer 1 — ML Classifier"
+                            title="Layer 1 — AI Analysis"
                             icon={Brain}
                             verdict={result.layer1?.verdict}
                             score={result.layer1?.confidence}
                             delay={0}>
+                            <p className="text-xs mt-2" style={{ color: 'var(--text-secondary)', fontFamily: 'var(--font-body)', lineHeight: 1.6 }}>
+                                {mlConfidenceExplanation(result.layer1?.confidence || 0, result.layer1?.verdict)}
+                            </p>
                             <div className="mt-3">
                                 <p className="text-xs mb-2" style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-display)', letterSpacing: '0.1em' }}>
                                     TRIGGERED FEATURES
                                 </p>
+                                <p className="text-xs mb-2" style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-body)', lineHeight: 1.5 }}>
+                                    {result.layer1?.triggered_features?.length > 0
+                                        ? 'These patterns are commonly found in misleading content:'
+                                        : ''}
+                                </p>
                                 <FeatureBreakdown features={result.layer1?.triggered_features} />
                             </div>
                         </LayerCard>
 
                         {/* Layer 2 */}
                         <LayerCard
-                            title="Layer 2 — Evidence"
+                            title="Layer 2 — Evidence Check"
                             icon={Layers}
                             verdict={result.layer2?.verdict}
                             score={result.layer2?.evidence_score}
                             delay={80}>
+                            <p className="text-xs mt-2" style={{ color: 'var(--text-secondary)', fontFamily: 'var(--font-body)', lineHeight: 1.6 }}>
+                                {evidenceExplanation(result.layer2?.evidence_score || 0, result.layer2?.sources)}
+                            </p>
                             <p className="text-xs mt-3" style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-body)', lineHeight: 1.6 }}>
-                                <span style={{ color: 'var(--text-secondary)' }}>Claim used: </span>
+                                <span style={{ color: 'var(--text-secondary)' }}>Claim searched: </span>
                                 "{result.layer2?.claim_used || 'No claim extracted'}"
                             </p>
                         </LayerCard>
@@ -742,6 +864,9 @@ export default function VerifyPage() {
                     {allEntities.length > 0 && (
                         <div className="card p-5 fade-up-5">
                             <SectionHeading count={allEntities.length}>Named Entities</SectionHeading>
+                            <p className="text-xs mb-3" style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-body)', lineHeight: 1.5 }}>
+                                People, organizations, and places mentioned in the claim. These were used to search for related news articles.
+                            </p>
                             <ul className="flex flex-wrap gap-2" role="list">
                                 {allEntities.map((e, i) => (
                                     <li key={i}
@@ -765,6 +890,13 @@ export default function VerifyPage() {
                     {result.layer2?.sources?.length > 0 && (
                         <div className="card p-5 fade-up-5">
                             <SectionHeading count={result.layer2.sources.length}>Evidence Sources</SectionHeading>
+                            <p className="text-xs mb-3" style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-body)', lineHeight: 1.5 }}>
+                                News articles found that relate to this claim.
+                                <span style={{ color: 'var(--credible)' }}> Supports</span> = confirms the claim,
+                                <span style={{ color: 'var(--fake)' }}> Refutes</span> = contradicts it,
+                                <span style={{ color: 'var(--text-muted)' }}> Not Enough Info</span> = related but neutral.
+                                The % match shows how closely the article relates to the claim.
+                            </p>
                             <ul className="space-y-2" role="list">
                                 {result.layer2.sources.map((src, i) => {
                                     const { Icon: StanceIcon, color: stanceColor } = STANCE_ICON[src.stance] ?? STANCE_ICON['Not Enough Info']

frontend/src/utils/format.js

@@ -29,7 +29,44 @@ export function scoreColor(score) {
  * Map verdict string to badge class
  */
 export const VERDICT_MAP = {
-    'Credible': { cls: 'badge-credible', label: 'VERIFIED', symbol: '✓' },
-    'Unverified': { cls: 'badge-unverified', label: 'UNVERIFIED', symbol: '?' },
-    'Likely Fake': { cls: 'badge-fake', label: 'FALSE', symbol: '✗' },
+    'Credible': { cls: 'badge-credible', label: 'VERIFIED', symbol: '✓', explanation: 'This claim appears credible. Multiple signals and/or supporting evidence suggest this information is likely true.' },
+    'Unverified': { cls: 'badge-unverified', label: 'UNVERIFIED', symbol: '?', explanation: 'We couldn\'t confirm or deny this claim. There isn\'t enough evidence either way — treat this information with caution and verify from other sources.' },
+    'Likely Fake': { cls: 'badge-fake', label: 'FALSE', symbol: '✗', explanation: 'This claim shows strong signs of being false or misleading. Our analysis detected multiple red flags — do not share this without verifying from trusted news sources.' },
+}
+
+/**
+ * Human-readable interpretation of a 0-100 score
+ */
+export function scoreInterpretation(score) {
+    if (score >= 85) return 'Very high credibility — strong evidence supports this claim.'
+    if (score >= 70) return 'Likely credible — most signals point to this being true.'
+    if (score >= 55) return 'Uncertain — some supporting evidence, but not enough to confirm.'
+    if (score >= 40) return 'Questionable — limited evidence and some suspicious signals detected.'
+    if (score >= 20) return 'Likely false — multiple red flags and contradicting evidence found.'
+    return 'Very likely false — strong indicators of misinformation detected.'
+}
+
+/**
+ * Human-readable explanation for Layer 1 ML confidence
+ */
+export function mlConfidenceExplanation(confidence, verdict) {
+    const isFake = verdict === 'Likely Fake'
+    if (confidence >= 85) return isFake
+        ? 'The AI model is very confident this contains fake news patterns (clickbait, emotional manipulation, misleading language).'
+        : 'The AI model is very confident this reads like legitimate, credible reporting.'
+    if (confidence >= 60) return isFake
+        ? 'The AI model detected several patterns commonly found in fake news.'
+        : 'The AI model found this mostly consistent with credible content.'
+    return 'The AI model has low confidence — the text doesn\'t clearly match fake or credible patterns.'
+}
+
+/**
+ * Human-readable explanation for Layer 2 evidence score
+ */
+export function evidenceExplanation(score, sources) {
+    const count = sources?.length || 0
+    if (count === 0) return 'No matching news articles were found to cross-reference this claim. The score reflects a neutral default.'
+    if (score >= 70) return `Found ${count} related article${count > 1 ? 's' : ''} from news sources that support this claim.`
+    if (score >= 40) return `Found ${count} related article${count > 1 ? 's' : ''}, but evidence is mixed or inconclusive.`
+    return `Found ${count} related article${count > 1 ? 's' : ''} — some contradict or debunk this claim.`
 }

inputs/url_scraper.py

@@ -10,6 +10,7 @@ Extraction strategy (waterfall):
 """
 import logging
 import re
+import urllib.parse
 from urllib.parse import urlparse
 
 logger = logging.getLogger(__name__)
@@ -48,6 +49,121 @@ def _is_social_url(url: str) -> str | None:
     return None
 
 
+def _scrape_facebook_post_sync(url: str) -> tuple[str, str | None]:
+    """
+    Fallback Facebook post scraper using the `facebook-scraper` library.
+    Runs synchronously — call via asyncio.to_thread() from async code.
+
+    Returns (text, image_url) where image_url may be None.
+    Returns ("", None) if scraping fails or yields no content.
+
+    If FACEBOOK_C_USER + FACEBOOK_XS cookies are set in config, they are passed
+    to unlock friends-only posts and reduce rate-limiting.
+    """
+    try:
+        import facebook_scraper as fs
+        from facebook_scraper import exceptions as fb_exc
+    except ImportError:
+        logger.warning("facebook-scraper not installed — skipping FB post fallback")
+        return "", None
+
+    from config import get_settings
+    cookies = get_settings().facebook_cookies
+    if cookies:
+        logger.info("facebook-scraper: using authenticated cookies (c_user=%s…)", cookies["c_user"][:6])
+        try:
+            fs.set_cookies(cookies)
+        except Exception:
+            pass  # non-fatal — library may not expose this in all versions
+
+    try:
+        # get_posts accepts direct post URLs via post_urls= parameter.
+        # allow_extra_requests=False avoids spawning pyppeteer/headless Chromium.
+        gen = fs.get_posts(
+            post_urls=[url],
+            options={
+                "allow_extra_requests": False,
+                "progress":             False,
+            },
+            cookies=cookies or {},
+        )
+        post = next(gen, None)
+        if post is None:
+            logger.info("facebook-scraper: no post returned for %s", url)
+            return "", None
+
+        # post_text is the full untruncated body; text may be truncated
+        raw_text = post.get("post_text") or post.get("text") or ""
+
+        # Append shared post text (quote/repost) for additional signal
+        shared = post.get("shared_text") or ""
+        if shared and shared not in raw_text:
+            raw_text = f"{raw_text}\n\n{shared}".strip()
+
+        text = _clean_text(raw_text)
+
+        # Image selection priority:
+        #   1. First entry in images[] (highest quality, actual post photo)
+        #   2. Fallback `image` field (single-image shorthand)
+        #   3. video_thumbnail if it's a video post (gives OCR something to work with)
+        images: list[str] = post.get("images") or []
+        image_url: str | None = (
+            images[0]
+            if images
+            else post.get("image") or post.get("video_thumbnail")
+        )
+
+        logger.info(
+            "facebook-scraper OK: %d chars, image=%s, video=%s for %s",
+            len(text), bool(image_url), bool(post.get("video")), url,
+        )
+        return text, image_url
+
+    # ── Specific exceptions from facebook_scraper.exceptions ─────────────────
+    except fb_exc.LoginRequired:
+        # Post requires a logged-in session.
+        if cookies:
+            logger.warning("facebook-scraper: login still required even with cookies for %s — cookies may be expired", url)
+        else:
+            logger.info("facebook-scraper: login required for %s — no cookies configured", url)
+        return "", None
+
+    except fb_exc.NotFound:
+        logger.info("facebook-scraper: post not found for %s", url)
+        return "", None
+
+    except fb_exc.TemporarilyBanned:
+        # IP-level rate limit from Facebook — log as warning so Cloud Logging alerts fire
+        logger.warning("facebook-scraper: IP temporarily banned by Facebook while fetching %s", url)
+        return "", None
+
+    except fb_exc.InvalidCookies:
+        logger.warning("facebook-scraper: invalid/expired cookies for %s — falling back to public scraping", url)
+        return "", None
+
+    except fb_exc.UnexpectedResponse as exc:
+        logger.warning("facebook-scraper: unexpected FB response for %s: %s", url, exc)
+        return "", None
+
+    except StopIteration:
+        # Generator exhausted without yielding — URL is a profile/group, not a post
+        logger.info("facebook-scraper: generator empty for %s (not a post URL)", url)
+        return "", None
+
+    except Exception as exc:
+        logger.warning("facebook-scraper: unexpected error for %s: %s", url, exc)
+        return "", None
+
+
+async def _scrape_facebook_post(url: str) -> tuple[str, str | None]:
+    """
+    Async wrapper around _scrape_facebook_post_sync().
+    Returns (text, image_url).
+    """
+    import asyncio
+    return await asyncio.to_thread(_scrape_facebook_post_sync, url)
+
+
 async def _scrape_social_oembed(url: str, platform: str, client) -> str:
     """
     Extract post text via the public oEmbed API — no login required.
@@ -303,7 +419,22 @@ async def scrape_url(url: str) -> tuple[str, str]:
             text = await _scrape_social_oembed(url, platform, client)
         if text and len(text.strip()) >= 20:
             return text, domain
-        # oEmbed failed — could be a profile/group URL rather than a specific post
+
+        # oEmbed returned nothing (private post, group URL, or API limit hit).
+        # For Facebook, try facebook-scraper as a fallback to get full post content.
+        if platform == "facebook":
+            logger.info("oEmbed returned no content for %s — trying facebook-scraper fallback", url)
+            fb_text, fb_image = await _scrape_facebook_post(url)
+            if fb_text and len(fb_text.strip()) >= 20:
+                # NOTE: fb_image contains the post image URL if present.
+                # The current pipeline is text-only for URL verification.
+                # Future: extend VerifyURLRequest to accept an optional image_url
+                # so the multimodal endpoint can be invoked here instead.
+                if fb_image:
+                    logger.info("facebook-scraper also found image for %s — not yet used in pipeline", url)
+                return fb_text.strip(), domain
+
+        # All fallbacks failed — could be a profile/group URL rather than a specific post
         return "", domain
 
     if not _robots_allow(url):

requirements.txt

@@ -51,6 +51,7 @@ httpx==0.28.1                     # Async HTTP client
 aiofiles==24.1.0
 tqdm==4.67.1
 numpy==1.26.4
+facebook-scraper>=0.2.59          # Fallback scraper for Facebook post URLs (public posts, no login)
 
 # ── Testing ───────────────────────────────────────────────────────────────────
 pytest==8.3.4