Update app.py

app.py

@@ -19,9 +19,7 @@ from pymongo import MongoClient
 import pytz
 from datetime import datetime
 
-# ──────────────────────────────────────────────
 # A.  Setup & Configuration
-# ──────────────────────────────────────────────
 
 load_dotenv()
 
@@ -68,9 +66,8 @@ except Exception as _e:
     _officers_csv_error = str(_e)
     print(f"⚠️ Could not load officers.csv: {_e}")
 
-# ──────────────────────────────────────────────
+
 # B.  Core Processing Logic
-# ──────────────────────────────────────────────
 
 SYSTEM_PROMPT = """You are an extremely precise and strict Indian legal document parser.
 Your task is to extract information from raw OCR text of a Punjab court warrant or summons.
@@ -125,14 +122,7 @@ _MONTH_MAP = {
     "oct": "10", "nov": "11", "dec": "12",
 }
 
-# ── Detect available Tesseract languages ──────
-
 def _get_available_tess_langs() -> str:
-    """
-    Query Tesseract for installed language packs and build the best
-    available lang string for Punjab court documents (eng + hin + pan).
-    Falls back gracefully if hin/pan are not installed.
-    """
     try:
         import subprocess
         result = subprocess.run(
@@ -142,83 +132,43 @@ def _get_available_tess_langs() -> str:
         installed = set(result.stdout.lower().split() + result.stderr.lower().split())
     except Exception:
         installed = {"eng"}
-
     langs = ["eng"]
     if "hin" in installed:
         langs.append("hin")
     if "pan" in installed:
         langs.append("pan")
-
     lang_str = "+".join(langs)
     print(f"🔤 Tesseract languages available: {lang_str}")
     return lang_str
 
-
 _TESS_LANG = _get_available_tess_langs()
 
-# ── OCR ───────────────────────────────────────
-
-_OCR_MAX_DIM   = 1500   # px — cap before handing to Tesseract (reduced to prevent HF timeout)
-_OCR_MIN_DIM   = 1000   # px — upscale target for very small images (optimized for speed)
-_OCR_TIMEOUT_S = 60     # seconds — hard kill on the Tesseract subprocess
+_OCR_MAX_DIM   = 1500
+_OCR_MIN_DIM   = 1000
+_OCR_TIMEOUT_S = 60
 
 
 def _preprocess_for_ocr(img: Image.Image) -> Image.Image:
-    """
-    Prepare image for Tesseract:
-      1. Convert to greyscale (L mode).
-      2. Upscale tiny images so Tesseract has enough pixel density (~300 DPI).
-      3. **Downscale large images** — phone camera shots can be 4000×3000+ px,
-         which causes Tesseract to hang for minutes.  We cap the longest edge at
-         _OCR_MAX_DIM (2000 px) which is more than enough for court-document text.
-      4. Sharpen after any resize to compensate for interpolation softness.
-    """
     img = img.convert("L")
     max_dim = max(img.size)
-
     if max_dim < _OCR_MIN_DIM:
-        # Too small — upscale
         scale = _OCR_MIN_DIM / max_dim
-        img = img.resize(
-            (int(img.width * scale), int(img.height * scale)), Image.LANCZOS
-        )
+        img = img.resize((int(img.width * scale), int(img.height * scale)), Image.LANCZOS)
     elif max_dim > _OCR_MAX_DIM:
-        # Too large — downscale to prevent Tesseract timeout
         scale = _OCR_MAX_DIM / max_dim
-        img = img.resize(
-            (int(img.width * scale), int(img.height * scale)), Image.LANCZOS
-        )
-
-    # Sharpen after any resize
+        img = img.resize((int(img.width * scale), int(img.height * scale)), Image.LANCZOS)
     img = img.filter(ImageFilter.SHARPEN)
     return img
 
 
 def _ocr_image(image_path: str) -> str:
-    """
-    Run Tesseract via subprocess with a hard OS-level kill on timeout.
-
-    Key fixes vs original:
-      • Images are now CAPPED at _OCR_MAX_DIM (2000 px longest edge).
-        Phone camera images (4K+) were the primary cause of the hang.
-      • Uses subprocess + os.killpg so the Tesseract process is truly killed
-        on timeout (ThreadPoolExecutor.cancel() only abandons the Python
-        thread — the Tesseract child process kept running and blocked the next
-        request).
-      • PSM 6 (uniform block) instead of PSM 3 (full auto-layout) — warrants
-        are single-column documents; PSM 3's expensive layout analysis adds
-        time without improving accuracy here.
-      • Falls back to pytesseract if subprocess approach fails (e.g. Windows).
-    """
     import subprocess, tempfile, os, signal, sys
-
     try:
         img = Image.open(image_path)
         processed = _preprocess_for_ocr(img)
     except Exception as exc:
         return f"[OCR Error] Could not open/preprocess image: {exc}"
 
-    # Write the preprocessed image to a temp file for the subprocess approach
     with tempfile.NamedTemporaryFile(suffix=".png", delete=False) as tmp:
         tmp_path = tmp.name
     try:
@@ -229,25 +179,13 @@ def _ocr_image(image_path: str) -> str:
 
     tess_cmd = pytesseract.pytesseract.tesseract_cmd or "tesseract"
     out_base  = tmp_path.replace(".png", "_out")
-    cmd = [
-        tess_cmd, tmp_path, out_base,
-        "-l", _TESS_LANG,
-        "--oem", "1",
-        "--psm", "4",   # single column of variable sizes — matches Punjab warrants layout best
-    ]
+    cmd = [tess_cmd, tmp_path, out_base, "-l", _TESS_LANG, "--oem", "1", "--psm", "4"]
 
     try:
-        # Use subprocess with a real timeout so we can kill the process tree
         kwargs = {}
         if sys.platform != "win32":
-            kwargs["start_new_session"] = True   # lets us killpg the whole group
-
-        proc = subprocess.Popen(
-            cmd,
-            stdout=subprocess.PIPE,
-            stderr=subprocess.PIPE,
-            **kwargs,
-        )
+            kwargs["start_new_session"] = True
+        proc = subprocess.Popen(cmd, stdout=subprocess.PIPE, stderr=subprocess.PIPE, **kwargs)
         try:
             proc.communicate(timeout=_OCR_TIMEOUT_S)
         except subprocess.TimeoutExpired:
@@ -267,7 +205,6 @@ def _ocr_image(image_path: str) -> str:
                 result = f.read()
             os.unlink(out_txt)
             return result
-        # Subprocess produced no output file — fall through to pytesseract fallback
     except Exception:
         pass
     finally:
@@ -276,11 +213,8 @@ def _ocr_image(image_path: str) -> str:
         except Exception:
             pass
 
-    # ── Fallback: pytesseract (Windows or if subprocess path fails) ────────
     def _run() -> str:
-        return pytesseract.image_to_string(
-            processed, lang=_TESS_LANG, config="--oem 1 --psm 4"
-        )
+        return pytesseract.image_to_string(processed, lang=_TESS_LANG, config="--oem 1 --psm 4")
 
     with concurrent.futures.ThreadPoolExecutor(max_workers=1) as executor:
         future = executor.submit(_run)
@@ -292,7 +226,6 @@ def _ocr_image(image_path: str) -> str:
         except Exception as exc:
             return f"[OCR Error] {exc}"
 
-# ── Post-processing helpers ───────────────────
 
 def _extract_person_from_whereas(raw_ocr: str) -> str | None:
     m = re.search(
@@ -304,11 +237,6 @@ def _extract_person_from_whereas(raw_ocr: str) -> str | None:
 
 
 def _extract_next_date_from_ocr(raw_ocr: str) -> str | None:
-    """
-    Fallback: scan OCR text for a date near 'NEXT DATE' / 'Next Date' / 'Next Hearing' labels.
-    Returns DD-MM-YYYY string if found, else None.
-    """
-    # Look for "NEXT DATE" or similar label followed by a date within ~60 characters
     m = re.search(
         r"(?:NEXT\s*DATE|Next\s*Date|Next\s*Hearing|Hearing\s*Date)\s*[:\-]?\s*"
         r"(\d{1,2}[-/.\s]\d{1,2}[-/.\s]\d{4}|\d{4}[-/.\s]\d{1,2}[-/.\s]\d{1,2})",
@@ -316,7 +244,6 @@ def _extract_next_date_from_ocr(raw_ocr: str) -> str | None:
     )
     if m:
         raw_date = re.sub(r"[\s/.]", "-", m.group(1).strip())
-        # Normalise YYYY-MM-DD → DD-MM-YYYY
         yyyy_first = re.fullmatch(r"(\d{4})-(\d{1,2})-(\d{1,2})", raw_date)
         if yyyy_first:
             raw_date = f"{yyyy_first.group(3).zfill(2)}-{yyyy_first.group(2).zfill(2)}-{yyyy_first.group(1)}"
@@ -325,9 +252,6 @@ def _extract_next_date_from_ocr(raw_ocr: str) -> str | None:
 
 
 def _post_validate(data: dict, raw_ocr: str) -> dict:
-    """Correct Person_Name_To_Serve if LLM picked the accused instead of the witness.
-    Also repair Hearing_Date if LLM returned only a year (e.g. '2026')."""
-    # ── Person fix ──────────────────────────────────────────────────────────
     person = data.get("Person_Name_To_Serve") or ""
     if person and re.search(r"\bVs\s+" + re.escape(person), raw_ocr, re.IGNORECASE):
         fallback = _extract_person_from_whereas(raw_ocr)
@@ -338,15 +262,12 @@ def _post_validate(data: dict, raw_ocr: str) -> dict:
         if fallback:
             data["Person_Name_To_Serve"] = fallback
 
-    # ── Hearing_Date repair ─────────────────────────────────────────────────
     hdate = data.get("Hearing_Date") or ""
     if hdate and re.fullmatch(r"\d{4}", str(hdate).strip()):
-        # LLM returned only a year — try to recover the full date from OCR
         recovered = _extract_next_date_from_ocr(raw_ocr)
-        data["Hearing_Date"] = recovered  # may be None if not found
+        data["Hearing_Date"] = recovered
         hdate = recovered or ""
 
-    # Correct OCR character-substitution errors in years (e.g. misreading '2026' as '2028')
     if hdate:
         m_date = re.fullmatch(r"(\d{2})-(\d{2})-(\d{4})", str(hdate).strip())
         if m_date:
@@ -363,30 +284,14 @@ def _post_validate(data: dict, raw_ocr: str) -> dict:
 
 
 def _is_date_grounded(val: str, raw_ocr_lower: str) -> bool:
-    """
-    Verify a date string against OCR output.
-    Handles numeric dates (DD-MM-YYYY), written months, ordinal suffixes.
-
-    FIX: Reject partial/year-only values like "2026".
-    A valid Hearing_Date must contain at least a day, a month, and a year
-    (i.e. at least 3 non-empty parts when split on separators).
-    Pure 4-digit year strings are always rejected so that a year-only LLM
-    output (e.g. "2026") is nulled out rather than passing the grounding check.
-    """
     val_str = str(val).strip()
-
-    # Reject bare year (4-digit number only, e.g. "2026")
     if re.fullmatch(r"\d{4}", val_str):
         return False
-
-    # Split into parts and require at least 3 (day / month / year)
     parts = [p for p in re.split(r"[-/.\s]+", val_str) if p]
     if len(parts) < 3:
         return False
-
     if val_str.lower() in raw_ocr_lower:
         return True
-
     for part in parts:
         clean = re.sub(r"(?<=\d)(st|nd|rd|th)$", "", part.lower())
         alias = _MONTH_MAP.get(clean)
@@ -396,40 +301,26 @@ def _is_date_grounded(val: str, raw_ocr_lower: str) -> bool:
 
 
 def _strict_grounding_filter(data: dict, raw_ocr: str) -> dict:
-    """
-    Programmatic hallucination firewall.
-    is_grounded() is nested here so it closes over raw_ocr_lower correctly.
-    """
     if not isinstance(data, dict):
         return data
-
     raw_ocr_lower = raw_ocr.lower()
 
     def is_grounded(val) -> bool:
         if not val or str(val).strip().lower() in ("null", "none", "—", ""):
             return False
         val_str = str(val).strip()
-
-        # 1. Exact substring
         if val_str.lower() in raw_ocr_lower:
             return True
-
-        # 2. Code-token check: "CHI/339/2021" → any segment present is enough
         code_tokens = [t.lower() for t in re.split(r"[/\-]", val_str) if len(t) > 2]
         if code_tokens and any(t in raw_ocr_lower for t in code_tokens):
             return True
-
-        # 3. Prose token check: require 75% of meaningful words present
         words = [w.lower() for w in re.split(r"[^a-zA-Z0-9]", val_str) if len(w) > 2]
         if not words:
-            # Pure numeric fallback (belt numbers, years)
             nums = [n for n in re.split(r"\D+", val_str) if n]
             return any(n in raw_ocr_lower for n in nums) if nums else False
-
         matched = sum(1 for w in words if w in raw_ocr_lower)
         return matched >= max(1, round(len(words) * 0.75))
 
-    # — Case/FIR deduplication & grounding —
     case_fir = data.get("Case_FIR_Number")
     if case_fir:
         case_fir = str(case_fir).strip()
@@ -440,7 +331,6 @@ def _strict_grounding_filter(data: dict, raw_ocr: str) -> dict:
         elif not is_grounded(case_fir):
             data["Case_FIR_Number"] = None
 
-    # — All other fields —
     for field in [
         "Act_and_Sections", "Type_of_Document", "Target_Police_Station",
         "IO_Name_and_Belt_No", "IO_Mobile_Number", "Person_Name_To_Serve",
@@ -480,7 +370,6 @@ def _clean_and_parse_json(raw_response: str, raw_ocr: str = "") -> dict:
             "_message": "Could not parse LLM response as JSON.",
         }
 
-# ── Main pipeline ─────────────────────────────
 
 _NVIDIA_MODELS = [
     "qwen/qwen3-coder-480b-a35b-instruct",
@@ -495,7 +384,6 @@ def process_document(image_path: str, progress=gr.Progress(track_tqdm=False)):
     if image_path is None:
         raise gr.Error("Please upload an image first.")
 
-    # Step 1 — Upload
     progress(0, desc="☁️ Uploading to Cloudinary…")
     yield "⏳ Uploading to Cloudinary…", "", {}
 
@@ -507,7 +395,6 @@ def process_document(image_path: str, progress=gr.Progress(track_tqdm=False)):
     except Exception as exc:
         raise gr.Error(f"Cloudinary upload failed: {exc}")
 
-    # Step 2 — OCR
     progress(0.25, desc="🔍 Running OCR…")
     yield cloudinary_url, "⏳ Extracting text via OCR…", {}
 
@@ -519,7 +406,6 @@ def process_document(image_path: str, progress=gr.Progress(track_tqdm=False)):
     if not raw_text or not raw_text.strip():
         raw_text = "[OCR returned empty text — image may be blank or unreadable]"
 
-    # Step 3 — LLM
     progress(0.5, desc="🤖 Calling AI model…")
     yield cloudinary_url, raw_text, {"status": "⏳ Calling AI model…"}
 
@@ -552,7 +438,6 @@ def process_document(image_path: str, progress=gr.Progress(track_tqdm=False)):
     if llm_response is None:
         raise gr.Error(f"All NVIDIA models failed. Last error: {last_exception}")
 
-    # Step 4 — Parse + Store
     parsed_json = _clean_and_parse_json(llm_response, raw_text)
 
     if collection is not None and "_parse_error" not in parsed_json:
@@ -571,7 +456,7 @@ def process_document(image_path: str, progress=gr.Progress(track_tqdm=False)):
 
 
 # ──────────────────────────────────────────────
-# C.  Dashboard — inline styles so dark theme can't override
+# C.  Dashboard helpers
 # ──────────────────────────────────────────────
 
 C_LABEL       = "#4f46e5"
@@ -763,7 +648,52 @@ def fetch_live_warrants(search_query: str = "") -> str:
 
 TAB_FIX_JS = """<script>
 (function(){
-  function fix(){
+  // ── 1. Hide the Hugging Face floating repo/files button ─────────────────
+  // HF injects a fixed-position pill (LitigationBrach / ALDDS) into the
+  // parent page. We can't remove it from Python, so we hide it with CSS
+  // injected into <head> and also poll+hide any matching DOM nodes.
+  var style = document.createElement('style');
+  style.textContent = [
+    /* The HF "Files" / repo pill — fixed position, top-right corner */
+    'div[class*="SpaceIframeBadge"],',
+    'div[class*="space-badge"],',
+    'div[class*="iframe-badge"],',
+    'a[class*="SpaceIframeBadge"],',
+    'a[class*="space-badge"],',
+    /* Catch-all: any fixed/absolute element in top-right with HF branding */
+    'body > div[style*="position: fixed"][style*="top"][style*="right"],',
+    'body > div[style*="position:fixed"][style*="top"][style*="right"]',
+    '{ display:none!important; visibility:hidden!important; pointer-events:none!important; }'
+  ].join('');
+  document.head.appendChild(style);
+
+  // Also poll the DOM and forcibly hide any element that looks like the badge
+  function hideBadge(){
+    document.querySelectorAll('body > div, body > a').forEach(function(el){
+      var cs = window.getComputedStyle(el);
+      if((cs.position==='fixed'||cs.position==='absolute') &&
+         parseInt(cs.top)<80 && parseInt(cs.right)<200){
+        var txt = el.innerText || el.textContent || '';
+        // Only hide if it contains HF-style content (heart/like icon or repo name)
+        if(txt.includes('♥')||txt.includes('❤')||el.querySelector('svg')||
+           el.innerHTML.includes('hf.co')||el.innerHTML.includes('huggingface')||
+           el.innerHTML.includes('LitigationBrach')||el.innerHTML.includes('ALDDS')){
+          el.style.cssText += ';display:none!important;visibility:hidden!important;';
+        }
+      }
+    });
+  }
+  hideBadge();
+  setTimeout(hideBadge,300);
+  setTimeout(hideBadge,800);
+  setTimeout(hideBadge,2000);
+  setTimeout(hideBadge,5000);
+  if(window.MutationObserver){
+    new MutationObserver(hideBadge).observe(document.body,{childList:true,subtree:false});
+  }
+
+  // ── 2. Fix tab bar horizontal layout ────────────────────────────────────
+  function fixTabs(){
     ['[role="tablist"]','.tab-nav','.tab-nav > div','.tab-nav > div > div'].forEach(function(s){
       document.querySelectorAll(s).forEach(function(el){
         el.style.cssText+=';display:flex!important;flex-direction:row!important;'+
@@ -782,69 +712,175 @@ TAB_FIX_JS = """<script>
         'pointer-events:auto!important;touch-action:manipulation!important;';
     });
   }
-  fix();setTimeout(fix,300);setTimeout(fix,800);setTimeout(fix,2000);
-  if(window.MutationObserver){new MutationObserver(fix).observe(document.body,{childList:true,subtree:true});}
+  fixTabs();
+  setTimeout(fixTabs,300);
+  setTimeout(fixTabs,800);
+  setTimeout(fixTabs,2000);
+  if(window.MutationObserver){
+    new MutationObserver(fixTabs).observe(document.body,{childList:true,subtree:true});
+  }
 })();
 </script>"""
 
 CUSTOM_CSS = """
-*,*::before,*::after{box-sizing:border-box!important;}
-body,html{overflow-x:hidden!important;max-width:100vw!important;}
-.gradio-container{max-width:1280px!important;margin:auto!important;padding:0 12px!important;}
+/* ── Reset & base ─────────────────────────────────────────────────────── */
+*,*::before,*::after { box-sizing:border-box!important; }
+html,body { overflow-x:hidden!important; max-width:100vw!important; margin:0; padding:0; }
+
+/* ── Container ────────────────────────────────────────────────────────── */
+.gradio-container {
+    max-width:1280px!important;
+    margin:auto!important;
+    padding:0 12px!important;
+}
+
+/* ── Hide HF badge via CSS (belt-and-suspenders with the JS above) ─────── */
+div[class*="SpaceIframeBadge"],
+div[class*="space-badge"],
+div[class*="iframe-badge"],
+a[class*="SpaceIframeBadge"],
+a[class*="space-badge"] {
+    display:none!important;
+    visibility:hidden!important;
+    pointer-events:none!important;
+}
 
-.tabs,div[class*="tabs"],div[data-testid="tabs"],
-.tabitem>.block,.tabitem>div>.block{overflow:visible!important;}
+/* ── Tab bar ──────────────────────────────────────────────────────────── */
+.tabs,
+div[class*="tabs"],
+div[data-testid="tabs"],
+.tabitem>.block,
+.tabitem>div>.block { overflow:visible!important; }
 
 .tab-nav,.tab-nav>div,.tab-nav>div>div,
-[role="tablist"],div[class*="tab-nav"],div[data-testid="tab-nav"]{
-    display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
-    overflow-x:auto!important;overflow-y:visible!important;
-    -webkit-overflow-scrolling:touch!important;gap:4px!important;
-    scrollbar-width:none!important;-ms-overflow-style:none!important;
+[role="tablist"],div[class*="tab-nav"],div[data-testid="tab-nav"] {
+    display:flex!important;
+    flex-direction:row!important;
+    flex-wrap:nowrap!important;
+    overflow-x:auto!important;
+    overflow-y:visible!important;
+    -webkit-overflow-scrolling:touch!important;
+    gap:4px!important;
+    scrollbar-width:none!important;
+    -ms-overflow-style:none!important;
 }
-.tab-nav::-webkit-scrollbar,.tab-nav>div::-webkit-scrollbar,
-[role="tablist"]::-webkit-scrollbar{display:none!important;}
-
-[role="tab"],.tab-nav button{
-    flex-shrink:0!important;white-space:nowrap!important;
-    min-width:max-content!important;pointer-events:auto!important;
-    touch-action:manipulation!important;cursor:pointer!important;
+.tab-nav::-webkit-scrollbar,
+.tab-nav>div::-webkit-scrollbar,
+[role="tablist"]::-webkit-scrollbar { display:none!important; }
+
+[role="tab"],.tab-nav button {
+    flex-shrink:0!important;
+    white-space:nowrap!important;
+    min-width:max-content!important;
+    pointer-events:auto!important;
+    touch-action:manipulation!important;
+    cursor:pointer!important;
 }
 
-#process-btn{font-size:1rem;padding:12px 24px;width:100%;margin-top:8px;}
-#status-row{background:#f0fdf4;border-radius:8px;padding:8px 14px;font-size:0.85rem;}
-#status-row,#status-row *{color:#166534!important;}
-.upload-col{min-width:0!important;flex:1 1 280px!important;}
-.outputs-col{min-width:0!important;flex:2 1 380px!important;}
+/* ── Process button ───────────────────────────────────────────────────── */
+#process-btn { font-size:1rem; padding:12px 24px; width:100%; margin-top:8px; }
+
+/* ── Status row hint ─────────────────────────────────────────────────── */
+#status-row { background:#f0fdf4; border-radius:8px; padding:8px 14px; font-size:0.85rem; }
+#status-row, #status-row * { color:#166534!important; }
 
-.warrant-desktop{display:block;}
-.warrant-mobile{display:none;}
+/* ── Column sizing (desktop) ─────────────────────────────────────────── */
+.upload-col  { min-width:0!important; flex:1 1 280px!important; }
+.outputs-col { min-width:0!important; flex:2 1 380px!important; }
 
+/* ── Dashboard table / cards ─────────────────────────────────────────── */
+.warrant-desktop { display:block; }
+.warrant-mobile  { display:none;  }
+
+/* ══════════════════════════════════════════════════════════════════════
+   MOBILE  ≤ 768 px
+   ══════════════════════════════════════════════════════════════════════ */
 @media screen and (max-width:768px){
-    .gradio-container,.main,.wrap,.tabitem,footer{overflow-x:hidden!important;max-width:100%!important;}
 
-    .gradio-container div.flex,.gradio-container div.gap,
-    .gradio-container .gr-row,.gradio-container [class*="flex-row"],
-    .gradio-container form>div{flex-direction:column!important;flex-wrap:nowrap!important;}
+    /* Prevent any horizontal scroll on the whole page */
+    .gradio-container,.main,.wrap,.tabitem,footer {
+        overflow-x:hidden!important;
+        max-width:100%!important;
+    }
 
-    .gradio-container div.flex>*,.gradio-container div.gap>*,
-    .gradio-container .gr-row>*,.upload-col,.outputs-col,
-    .gradio-container .block,.gradio-container .col,
-    .gradio-container [data-testid="column"]{
-        width:100%!important;max-width:100%!important;min-width:0!important;flex:none!important;
+    /* Stack ALL flex rows into columns */
+    .gradio-container div.flex,
+    .gradio-container div.gap,
+    .gradio-container .gr-row,
+    .gradio-container [class*="flex-row"],
+    .gradio-container form>div {
+        flex-direction:column!important;
+        flex-wrap:nowrap!important;
     }
+
+    /* Full-width every child column/block */
+    .gradio-container div.flex>*,
+    .gradio-container div.gap>*,
+    .gradio-container .gr-row>*,
+    .upload-col,
+    .outputs-col,
+    .gradio-container .block,
+    .gradio-container .col,
+    .gradio-container [data-testid="column"] {
+        width:100%!important;
+        max-width:100%!important;
+        min-width:0!important;
+        flex:none!important;
+    }
+
+    /* Image uploader height */
     .gradio-container [data-testid="image"],
-    .gradio-container .upload-container{width:100%!important;height:220px!important;}
+    .gradio-container .upload-container {
+        width:100%!important;
+        height:220px!important;
+    }
+
+    /* Inputs full width */
     .gradio-container textarea,
-    .gradio-container input[type="text"]{width:100%!important;}
+    .gradio-container input[type="text"] { width:100%!important; }
+
+    /* Search + refresh row */
+    #search-refresh-row,
+    #search-refresh-row>* {
+        flex-direction:column!important;
+        width:100%!important;
+        min-width:0!important;
+        flex:none!important;
+    }
+    #refresh-btn { width:100%!important; margin-top:6px; }
+
+    /* WhatsApp row — stack dropdowns/inputs vertically */
+    .wa-notify-row,
+    .wa-notify-row>* {
+        flex-direction:column!important;
+        width:100%!important;
+        min-width:0!important;
+        flex:none!important;
+    }
+    .wa-notify-row .gradio-dropdown,
+    .wa-notify-row .gradio-textbox,
+    .wa-notify-row button {
+        width:100%!important;
+        min-width:0!important;
+    }
+
+    /* Switch dashboard to card layout on mobile */
+    .warrant-desktop { display:none!important; }
+    .warrant-mobile  { display:block!important; }
 
-    #search-refresh-row,#search-refresh-row>*{
-        flex-direction:column!important;width:100%!important;min-width:0!important;flex:none!important;
+    /* Shrink heading text slightly so it doesn't overflow */
+    .gradio-container h1 { font-size:1.35rem!important; }
+    .gradio-container h2 { font-size:1.1rem!important; }
+
+    /* Make JSON output scrollable instead of overflowing */
+    .gradio-container .json-holder,
+    .gradio-container [data-testid="json"] {
+        overflow-x:auto!important;
+        max-width:100%!important;
     }
-    #refresh-btn{width:100%!important;margin-top:6px;}
 
-    .warrant-desktop{display:none!important;}
-    .warrant-mobile{display:block!important;}
+    /* Process button — comfortable tap target */
+    #process-btn { font-size:1rem!important; padding:14px 20px!important; }
 }
 """
 
@@ -859,9 +895,6 @@ Upload a photo of a **bailable warrant**, **summon**, or similar legal document.
 | 🗄️ 4 | Store the record securely in **MongoDB** |
 """
 
-# ──────────────────────────────────────────────
-# E.  Gradio Interface
-# ──────────────────────────────────────────────
 
 def _status_html(icon: str, message: str, color: str, done: bool = False) -> str:
     if done:
@@ -885,7 +918,6 @@ def _status_html(icon: str, message: str, color: str, done: bool = False) -> str
 
 def _process_and_render(image_path):
     for url, ocr, data in process_document(image_path):
-        # Determine status banner
         if not url.startswith("http"):
             s = _status_html("☁️", "Uploading image to Cloudinary…", "#6366f1")
         elif ocr == "⏳ Extracting text via OCR…":
@@ -927,24 +959,30 @@ _WA_JS = f"""
 
 _PHONE_JS = f"(name) => {{ const db = {json.dumps(officers_db)}; return db[name] || ''; }}"
 
+# ──────────────────────────────────────────────
+# E.  Gradio Interface
+# ──────────────────────────────────────────────
+
 with gr.Blocks(
     title="⚖️ Legal Document Digitization",
     theme=gr.themes.Soft(primary_hue="violet", secondary_hue="indigo", neutral_hue="slate"),
     css=CUSTOM_CSS,
 ) as demo:
 
-    gr.HTML(TAB_FIX_JS)  # must be first child — patches tab bar before render
+    # Must be first child — patches badge + tab bar before first render
+    gr.HTML(TAB_FIX_JS)
 
     gr.Markdown("# ⚖️ Automated Legal Document Digitization System")
     gr.Markdown("*Digitize warrants & summons in seconds — OCR → AI parsing → secure storage*")
 
     with gr.Tabs():
 
-        # ── Tab 1: Pipeline ────────────────────────────────────
+        # ── Tab 1: Pipeline ────────────────────────────────────────────────
         with gr.Tab("📥 Digitization Pipeline"):
             gr.Markdown(DESCRIPTION)
 
             with gr.Row():
+                # ── Left column: upload + controls ─────────────────────
                 with gr.Column(elem_classes=["upload-col"]):
                     image_input = gr.Image(
                         type="filepath",
@@ -968,6 +1006,7 @@ with gr.Blocks(
                             f"_(Error: `{_officers_csv_error}`)_"
                         )
 
+                # ── Right column: outputs ──────────────────────────────
                 with gr.Column(elem_classes=["outputs-col"]):
                     status_out           = gr.HTML(value="", elem_id="status-display")
                     cloudinary_url_out   = gr.Textbox(label="☁️ Cloudinary URL", interactive=False)
@@ -976,7 +1015,8 @@ with gr.Blocks(
                     json_out             = gr.JSON(label="📋 Extracted Structured Data (JSON)")
 
                     gr.Markdown("### 📨 Notify Investigating Officer (WhatsApp)")
-                    with gr.Row():
+                    # elem_classes used so our mobile CSS can target this row
+                    with gr.Row(elem_id="wa-notify-row", elem_classes=["wa-notify-row"]):
                         io_dropdown     = gr.Dropdown(
                             label="Select Officer (from CSV)",
                             choices=list(officers_db.keys()),
@@ -987,10 +1027,14 @@ with gr.Blocks(
                             placeholder="e.g. 919876543210",
                             scale=2,
                         )
-                        send_wa_btn = gr.Button("💬 Send via WhatsApp", variant="secondary", scale=1)
+                        send_wa_btn = gr.Button(
+                            "💬 Send via WhatsApp",
+                            variant="secondary",
+                            scale=1,
+                        )
                     wa_status_out = gr.HTML()
 
-            # Wire events — defined after all components exist
+            # Wire events
             io_dropdown.change(
                 fn=None, inputs=[io_dropdown], outputs=[manual_phone_in], js=_PHONE_JS
             )
@@ -1006,7 +1050,7 @@ with gr.Blocks(
                 js=_WA_JS,
             )
 
-        # ── Tab 2: Dashboard ───────────────────────────────────
+        # ── Tab 2: Dashboard ───────────────────────────────────────────────
         with gr.Tab("👮 Live Police Dashboard"):
             gr.Markdown("## 📋 Real-Time Stored Warrants & Summons")
             gr.Markdown(