Update app.py

app.py

@@ -3,9 +3,11 @@
 ║          Rahbar  |  رہبر                                     ║
 ║  Pakistan's AI-Powered Civic Complaint System                ║
 ╚══════════════════════════════════════════════════════════════╝
-Fixes:
+Changes:
+  • GPS location button now fills location field via reverse geocoding
+  • Light/dark mode adaptive color scheme
+  • Report output: bold headings, no === lines around them
   • Chatbot uses {"role","content"} dict format (Gradio 6+)
-  • GPS button works with proper permission flow
   • Report TTS in user-selected language
   • Voice input (STT) working
   • پنجابی language added
@@ -292,9 +294,6 @@ Keep it concise and practical for a common Pakistani citizen."""
 
 # ─── CHATBOT — Gradio 6+ dict format ─────────────────────────
 def legal_chatbot(user_message, history, language):
-    """
-    Gradio 6 with type='messages': history = list of {"role":..., "content":...} dicts
-    """
     if history is None:
         history = []
     if not user_message.strip():
@@ -348,7 +347,6 @@ Rules:
     try:
         from groq import Groq
         client = Groq(api_key=GROQ_API_KEY)
-        # Build Groq API messages
         api_messages = [{"role": "system", "content": system_content}]
         for msg in history[-20:]:
             api_messages.append({"role": msg["role"], "content": msg["content"]})
@@ -472,36 +470,42 @@ def severity_icon(score):
     if score <= 8: return "ORANGE"
     return "RED"
 
-# ─── PROFESSIONAL REPORT ──────────────────────────────────────
+# ─── PROFESSIONAL REPORT — clean bold headings, no === lines ──
 def build_professional_report(complaint_id, timestamp, name, cnic, phone, city, location,
                                issue_type, language, severity, sev_icon,
                                yolo_summary, gemini_status, gemini_reason,
                                gemini_confidence, gemini_action, kb, description, local_msg):
     date_str = datetime.datetime.now().strftime("%d %B %Y")
     time_str = datetime.datetime.now().strftime("%I:%M %p")
-    report = f"""
-===========================================================================
-         GOVERNMENT OF PAKISTAN - CIVIC COMPLAINT REPORT
-              Rahbar Digital Civic Redressal System
-===========================================================================
+
+    laws_text = ""
+    for law in kb.get("laws", []):
+        laws_text += f"\n    - {law}"
+
+    rights_text = ""
+    for right in kb.get("citizen_rights", []):
+        rights_text += f"\n  - {right}"
+
+    report = f"""  GOVERNMENT OF PAKISTAN — CIVIC COMPLAINT REPORT
+  Rahbar Digital Civic Redressal System
 
   Complaint Reference No. : {complaint_id}
   Date of Filing          : {date_str}   Time: {time_str}
   Filing Method           : Rahbar Digital Platform (AI-Verified)
   Report Language         : {language}
 
-===========================================================================
-  SECTION A - COMPLAINANT INFORMATION
-===========================================================================
+
+  SECTION A — COMPLAINANT INFORMATION
+
   Full Name    : {name}
   CNIC         : {cnic}
   Contact      : {phone if phone else "Not Provided"}
   City         : {city}
   Area         : {location}
 
-===========================================================================
-  SECTION B - COMPLAINT DETAILS
-===========================================================================
+
+  SECTION B — COMPLAINT DETAILS
+
   Nature       : {issue_type}
   Location     : {location}, {city}
   Date & Time  : {date_str}, {time_str}
@@ -510,63 +514,57 @@ def build_professional_report(complaint_id, timestamp, name, cnic, phone, city,
   Description:
   {description.strip() if description.strip() else "[No additional description provided]"}
 
-===========================================================================
-  SECTION C - AI VERIFICATION RESULTS
-===========================================================================
+
+  SECTION C — AI VERIFICATION RESULTS
+
   Status       : {gemini_status}
   Confidence   : {gemini_confidence}
   Finding      : {gemini_reason}
   Action       : {gemini_action if gemini_action else "Immediate field inspection required."}
   YOLO         : {yolo_summary}
 
-===========================================================================
-  SECTION D - LEGAL FRAMEWORK
-===========================================================================
-  Applicable Legislation:"""
-    for law in kb.get("laws", []):
-        report += f"\n    - {law}"
-    report += f"""
+
+  SECTION D — LEGAL FRAMEWORK
+
+  Applicable Legislation:{laws_text}
 
   Responsible Authority  : {kb.get('authority','N/A')}
   Official Helpline      : {kb.get('hotline','N/A')}
   Statutory Response Time: {kb.get('response','N/A')}
   Fine / Penalty         : {kb.get('fine','N/A')}
 
-===========================================================================
-  SECTION E - CITIZEN'S LEGAL RIGHTS
-==========================================================================="""
-    for right in kb.get("citizen_rights", []):
-        report += f"\n  - {right}"
-    report += f"""
+
+  SECTION E — CITIZEN'S LEGAL RIGHTS
+{rights_text}
 
   Escalation : {kb.get('escalation','CM Portal: 0800-02345')}
 
-===========================================================================
-  SECTION F - LOCALIZED NOTICE ({language})
-===========================================================================
+
+  SECTION F — LOCALIZED NOTICE ({language})
+
   {local_msg}
 
-===========================================================================
-  SECTION G - ACTION DIRECTIVE
-===========================================================================
+
+  SECTION G — ACTION DIRECTIVE
+
   MANDATORY ACTION REQUIRED WITHIN: {kb.get('response','72 hours').upper()}
 
   Authority: {kb.get('authority','Local Authority')}
   Hotline  : {kb.get('hotline','N/A')}
   Portal   : citizenportal.gov.pk | CM: 0800-02345
 
-===========================================================================
+
   DECLARATION
-===========================================================================
+
   I, {name} (CNIC: {cnic}), declare that the information provided is
   true and correct to the best of my knowledge.
 
   Signature: ________________________  (Digital)   Date: {date_str}
   Reference: {complaint_id}
 
-===========================================================================
+
   FOR OFFICIAL USE ONLY
-===========================================================================
+
   Received By      : ___________________________
   Date of Receipt  : ___________________________
   Action Taken     : ___________________________
@@ -574,7 +572,6 @@ def build_professional_report(complaint_id, timestamp, name, cnic, phone, city,
 
   Generated by: Rahbar - Pakistan's AI Civic Redressal Platform
   Timestamp: {timestamp}
-===========================================================================
 """
     return report
 
@@ -618,7 +615,6 @@ def make_report(image, issue_type, city, location, name, cnic, phone,
     local    = LOCALIZED.get(clean_issue, {}).get(language, "")
     sev_icon = severity_icon(final_severity)
 
-    # Legal advice in user's selected language
     llama_advice = analyze_with_llama(issue_type, location, city, yolo_summary, final_severity, language)
 
     report = build_professional_report(
@@ -641,7 +637,6 @@ def make_report(image, issue_type, city, location, name, cnic, phone,
                f"Filed: {timestamp}")
     wa_md = f"[Share on WhatsApp]({make_whatsapp_link(wa_text)})"
 
-    # Report TTS in selected language, includes localized law notice
     report_tts_path = None
     if enable_tts:
         tts_text = (f"Complaint {complaint_id} filed. "
@@ -649,53 +644,267 @@ def make_report(image, issue_type, city, location, name, cnic, phone,
                     f"Severity: {final_severity} out of 10. {local}")
         report_tts_path = make_tts(tts_text, language)
 
-    # Legal advice TTS always generated in selected language
     advice_tts_path = make_tts(llama_advice[:600], language)
 
     return annotated_img, report, wa_md, llama_advice, report_tts_path, complaint_id, advice_tts_path
 
-# ─── CSS ──────────────────────────────────────────────────────
+# ─── CSS — Light/Dark mode adaptive ──────────────────────────
 CSS = """
 @import url('https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu&family=Playfair+Display:wght@700;900&family=DM+Sans:wght@300;400;500;600&display=swap');
-:root{
-  --g9:#0d2b1e;--g8:#14432e;--g7:#1a5c3f;--g6:#1f7a52;--g5:#25a06b;--g4:#2ec97f;
-  --a5:#f5a623;--a4:#f7bc57;--w:#fafdf8;--gr:#8fa88a;
-  --sh:0 2px 8px rgba(13,43,30,.15);--r:12px;--rl:20px;
-}
-*,*::before,*::after{box-sizing:border-box}
-body,.gradio-container{font-family:'DM Sans',sans-serif!important;background:var(--w)!important;color:var(--g9)!important}
-.saaf-header{background:linear-gradient(135deg,var(--g8) 0%,var(--g9) 60%,#0a1f14 100%);border-bottom:2px solid var(--g6);padding:24px 20px 20px;text-align:center;position:relative;overflow:hidden}
-.saaf-header::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 50% 0%,rgba(37,160,107,.18),transparent);pointer-events:none}
-.saaf-header h1{font-family:'Playfair Display',serif!important;font-size:clamp(1.8rem,5vw,3rem)!important;font-weight:900!important;color:var(--w)!important;margin:0 0 4px!important;line-height:1.1}
-.saaf-header .urdu-title{font-family:'Noto Nastaliq Urdu',serif;font-size:clamp(1rem,3vw,1.6rem);color:var(--a4);direction:rtl;margin:4px 0 8px}
-.saaf-header .tagline{font-size:clamp(.75rem,2vw,.95rem);color:var(--g4);letter-spacing:.08em;text-transform:uppercase}
-.badge-strip{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:10px 16px;background:var(--w);border-bottom:1px solid var(--g7)}
-.badge{font-size:.72rem;font-weight:600;letter-spacing:.06em;padding:4px 12px;border-radius:20px;text-transform:uppercase}
-.badge-ai{background:var(--w);color:var(--g4);border:1px solid var(--g6)}
-.badge-pk{background:var(--w);color:var(--a4);border:1px solid rgba(245,166,35,.4)}
-.badge-live{background:var(--w);color:#ff8080;border:1px solid rgba(232,83,83,.4)}
-.tab-nav{background:var(--g8)!important;border-bottom:2px solid var(--g7)!important}
-.tab-nav button{font-family:'DM Sans',sans-serif!important;font-weight:500!important;font-size:.85rem!important;color:var(--gr)!important;padding:12px 18px!important;border-radius:0!important;transition:all .2s!important}
-.tab-nav button.selected,.tab-nav button[aria-selected="true"]{color:var(--a4)!important;border-bottom:3px solid var(--a5)!important;background:transparent!important}
-.card-title{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--g4);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--g7)}
-label,.gradio-container .label-wrap span{color:var(--g9)!important}
-.gradio-container input,.gradio-container textarea{background:var(--w)!important;border:1px solid var(--g6)!important;border-radius:var(--r)!important;color:var(--g9)!important;font-family:'DM Sans',sans-serif!important}
-.gradio-container input:focus,.gradio-container textarea:focus{border-color:var(--a5)!important;outline:none!important;box-shadow:0 0 0 3px rgba(245,166,35,.15)!important}
-.gradio-container .wrap{background:var(--w)!important;border-color:var(--g6)!important}
-.gradio-container .block{background:var(--w)!important}
-.gradio-container button.primary{background:linear-gradient(135deg,var(--g6),var(--g5))!important;color:var(--w)!important;border:none!important;border-radius:var(--r)!important;font-weight:600!important;font-size:.9rem!important;padding:12px 24px!important;cursor:pointer!important;box-shadow:var(--sh)!important;transition:all .2s!important}
-.gradio-container button.primary:hover{background:linear-gradient(135deg,var(--g5),var(--g4))!important;transform:translateY(-1px)!important}
-.gradio-container button.secondary{background:var(--w)!important;border:1px solid var(--g6)!important;color:var(--g4)!important}
-.gradio-container [data-testid="image"]{border:2px dashed var(--g6)!important;border-radius:var(--rl)!important}
-.gradio-container .prose h2,.gradio-container .prose h3{color:var(--a4)!important}
-.gradio-container audio{width:100%!important;border-radius:var(--r)!important}
-.info-box{background:var(--w);border:1px solid var(--g6);border-left:4px solid var(--g5);border-radius:var(--r);padding:12px 16px;font-size:.88rem;line-height:1.6;margin-bottom:8px}
-.warn-box{background:var(--w);border:1px solid rgba(245,166,35,.4);border-left:4px solid var(--a5);border-radius:var(--r);padding:12px 16px;font-size:.88rem;margin-bottom:8px}
-.hotline-pill{display:inline-block;background:var(--w);color:var(--a4);border:1px solid rgba(245,166,35,.35);border-radius:20px;padding:2px 12px;font-size:.8rem;font-weight:600}
-#rahbarMapDiv{height:220px;width:100%;border-radius:12px;border:2px solid #1f7a52;margin-bottom:8px;background:#e8f5e9;position:relative}
-@media(max-width:640px){.saaf-header{padding:16px 12px}.tab-nav button{padding:10px 12px!important;font-size:.78rem!important}}
-::-webkit-scrollbar{width:6px;height:6px}
-::-webkit-scrollbar-thumb{background:var(--g6);border-radius:3px}
+
+/* ── Light mode palette ── */
+:root {
+  --g9:#0d2b1e; --g8:#14432e; --g7:#1a5c3f; --g6:#1f7a52;
+  --g5:#25a06b; --g4:#2ec97f;
+  --a5:#f5a623; --a4:#d4870e; --a3:#b8730c;
+  --surface:#ffffff; --surface2:#f4f8f5; --surface3:#e8f3ed;
+  --text-primary:#0d2b1e; --text-secondary:#2d5a3e; --text-muted:#5a8a6e;
+  --border:#b8d9c5; --border-strong:#1f7a52;
+  --shadow:0 2px 8px rgba(13,43,30,.10);
+  --radius:12px; --radius-lg:20px;
+  --header-bg:linear-gradient(135deg,#14432e 0%,#0d2b1e 60%,#0a1f14 100%);
+  --badge-bg:#ffffff; --badge-border:#1a5c3f;
+  --warn-bg:#fffbf0; --warn-border:rgba(245,166,35,.5);
+  --info-bg:#f0faf4; --info-border:#1f7a52;
+}
+
+/* ── Dark mode palette ── */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --g9:#d0f0df; --g8:#1e6644; --g7:#28885a; --g6:#30aa72;
+    --g5:#3dcf8a; --g4:#5de3a3;
+    --a5:#f7bc57; --a4:#f5a623; --a3:#f0921a;
+    --surface:#0f1f16; --surface2:#162b1e; --surface3:#1c3828;
+    --text-primary:#d0f0df; --text-secondary:#8fcfae; --text-muted:#5a9a78;
+    --border:#2a5c3e; --border-strong:#30aa72;
+    --shadow:0 2px 12px rgba(0,0,0,.4);
+    --header-bg:linear-gradient(135deg,#0a1f14 0%,#071510 60%,#050f0a 100%);
+    --badge-bg:#0f1f16; --badge-border:#28885a;
+    --warn-bg:#1e1800; --warn-border:rgba(247,188,87,.4);
+    --info-bg:#0e1f16; --info-border:#30aa72;
+  }
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+body, .gradio-container {
+  font-family: 'DM Sans', sans-serif !important;
+  background: var(--surface) !important;
+  color: var(--text-primary) !important;
+}
+
+/* ── Header ── */
+.saaf-header {
+  background: var(--header-bg);
+  border-bottom: 2px solid var(--g6);
+  padding: 24px 20px 20px;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+.saaf-header::before {
+  content: '';
+  position: absolute; inset: 0;
+  background: radial-gradient(ellipse 60% 60% at 50% 0%, rgba(37,160,107,.18), transparent);
+  pointer-events: none;
+}
+.saaf-header h1 {
+  font-family: 'Playfair Display', serif !important;
+  font-size: clamp(1.8rem, 5vw, 3rem) !important;
+  font-weight: 900 !important;
+  color: #fafdf8 !important;
+  margin: 0 0 4px !important;
+  line-height: 1.1;
+}
+.saaf-header .urdu-title {
+  font-family: 'Noto Nastaliq Urdu', serif;
+  font-size: clamp(1rem, 3vw, 1.6rem);
+  color: #f7bc57;
+  direction: rtl;
+  margin: 4px 0 8px;
+}
+.saaf-header .tagline {
+  font-size: clamp(.75rem, 2vw, .95rem);
+  color: #5de3a3;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+}
+
+/* ── Badge strip ── */
+.badge-strip {
+  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
+  padding: 10px 16px;
+  background: var(--surface2);
+  border-bottom: 1px solid var(--border);
+}
+.badge {
+  font-size: .72rem; font-weight: 600; letter-spacing: .06em;
+  padding: 4px 12px; border-radius: 20px; text-transform: uppercase;
+}
+.badge-ai  { background: var(--badge-bg); color: var(--g4); border: 1px solid var(--badge-border); }
+.badge-pk  { background: var(--badge-bg); color: var(--a4); border: 1px solid var(--warn-border); }
+.badge-live{ background: var(--badge-bg); color: #ff8080;   border: 1px solid rgba(232,83,83,.4); }
+
+/* ── Tabs ── */
+.tab-nav { background: var(--surface2) !important; border-bottom: 2px solid var(--border) !important; }
+.tab-nav button {
+  font-family: 'DM Sans', sans-serif !important;
+  font-weight: 500 !important; font-size: .85rem !important;
+  color: var(--text-muted) !important;
+  padding: 12px 18px !important; border-radius: 0 !important;
+  transition: all .2s !important;
+}
+.tab-nav button.selected,
+.tab-nav button[aria-selected="true"] {
+  color: var(--a4) !important;
+  border-bottom: 3px solid var(--a5) !important;
+  background: transparent !important;
+}
+
+/* ── Card title ── */
+.card-title {
+  font-size: .7rem; font-weight: 600; letter-spacing: .1em;
+  text-transform: uppercase; color: var(--g4);
+  margin-bottom: 12px; padding-bottom: 8px;
+  border-bottom: 1px solid var(--border);
+}
+
+/* ── Labels ── */
+label, .gradio-container .label-wrap span {
+  color: var(--text-primary) !important;
+}
+
+/* ── Inputs ── */
+.gradio-container input,
+.gradio-container textarea {
+  background: var(--surface) !important;
+  border: 1px solid var(--border-strong) !important;
+  border-radius: var(--radius) !important;
+  color: var(--text-primary) !important;
+  font-family: 'DM Sans', sans-serif !important;
+}
+.gradio-container input:focus,
+.gradio-container textarea:focus {
+  border-color: var(--a5) !important;
+  outline: none !important;
+  box-shadow: 0 0 0 3px rgba(245,166,35,.15) !important;
+}
+.gradio-container .wrap { background: var(--surface) !important; border-color: var(--border-strong) !important; }
+.gradio-container .block { background: var(--surface) !important; }
+
+/* ── Buttons ── */
+.gradio-container button.primary {
+  background: linear-gradient(135deg, var(--g6), var(--g5)) !important;
+  color: #fafdf8 !important;
+  border: none !important; border-radius: var(--radius) !important;
+  font-weight: 600 !important; font-size: .9rem !important;
+  padding: 12px 24px !important; cursor: pointer !important;
+  box-shadow: var(--shadow) !important; transition: all .2s !important;
+}
+.gradio-container button.primary:hover {
+  background: linear-gradient(135deg, var(--g5), var(--g4)) !important;
+  transform: translateY(-1px) !important;
+}
+.gradio-container button.secondary {
+  background: var(--surface) !important;
+  border: 1px solid var(--border-strong) !important;
+  color: var(--g4) !important;
+}
+
+/* ── Image upload ── */
+.gradio-container [data-testid="image"] {
+  border: 2px dashed var(--border-strong) !important;
+  border-radius: var(--radius-lg) !important;
+  background: var(--surface2) !important;
+}
+
+/* ── Markdown headings ── */
+.gradio-container .prose h2,
+.gradio-container .prose h3 { color: var(--a4) !important; }
+
+/* ── Audio ── */
+.gradio-container audio { width: 100% !important; border-radius: var(--radius) !important; }
+
+/* ── Info / warn boxes ── */
+.info-box {
+  background: var(--info-bg);
+  border: 1px solid var(--info-border);
+  border-left: 4px solid var(--g5);
+  border-radius: var(--radius);
+  padding: 12px 16px;
+  font-size: .88rem; line-height: 1.6;
+  margin-bottom: 8px;
+  color: var(--text-secondary);
+}
+.warn-box {
+  background: var(--warn-bg);
+  border: 1px solid var(--warn-border);
+  border-left: 4px solid var(--a5);
+  border-radius: var(--radius);
+  padding: 12px 16px;
+  font-size: .88rem;
+  margin-bottom: 8px;
+  color: var(--text-secondary);
+}
+
+/* ── Hotline pill ── */
+.hotline-pill {
+  display: inline-block;
+  background: var(--surface2); color: var(--a4);
+  border: 1px solid var(--warn-border);
+  border-radius: 20px; padding: 2px 12px;
+  font-size: .8rem; font-weight: 600;
+}
+
+/* ── Map div ── */
+#rahbarMapDiv {
+  height: 220px; width: 100%;
+  border-radius: 12px;
+  border: 2px solid var(--border-strong);
+  margin-bottom: 8px;
+  background: var(--surface3);
+  position: relative;
+}
+
+/* ── GPS button inside HTML block ── */
+.gps-btn {
+  background: linear-gradient(135deg, var(--g6), var(--g5)) !important;
+  color: #fafdf8 !important;
+  border: none !important; border-radius: 10px !important;
+  padding: 10px 20px !important; font-size: .9rem !important;
+  font-weight: 600 !important; cursor: pointer !important;
+  width: 100% !important; margin-bottom: 8px !important;
+  display: block !important;
+}
+
+/* ── Report textbox — bold section headings ── */
+.gradio-container textarea {
+  font-family: 'DM Mono', 'Courier New', monospace !important;
+  font-size: .82rem !important;
+  line-height: 1.7 !important;
+}
+
+/* ── Dropdown ── */
+.gradio-container select,
+.gradio-container [data-testid="dropdown"] {
+  background: var(--surface) !important;
+  color: var(--text-primary) !important;
+  border-color: var(--border-strong) !important;
+}
+
+/* ── Chatbot ── */
+.gradio-container .message.user   { background: var(--surface3) !important; color: var(--text-primary) !important; }
+.gradio-container .message.bot    { background: var(--surface2) !important; color: var(--text-primary) !important; }
+
+/* ── Scrollbar ── */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: var(--surface2); }
+::-webkit-scrollbar-thumb { background: var(--g6); border-radius: 3px; }
+
+@media (max-width: 640px) {
+  .saaf-header { padding: 16px 12px; }
+  .tab-nav button { padding: 10px 12px !important; font-size: .78rem !important; }
+}
 """
 
 HEADER_HTML = """
@@ -714,33 +923,30 @@ HEADER_HTML = """
 </div>
 """
 
+# ─── MAP HTML — GPS fills location + reverse geocodes address ─
 MAP_HTML = """
 <div style="margin:14px 0 4px">
   <div class="card-title">GPS / Map Location Picker</div>
   <div class="warn-box">
-    <strong>Please allow location access</strong> when your browser asks permission.
-    Tap the button below, then accept the location prompt.
-    Coordinates will auto-fill the location field.
-    <br><strong>براہ کرم Location Allow کریں</strong> جب browser پوچھے۔
+    <strong>Please allow location access</strong> when your browser asks.
+    Tap the button below — your address will auto-fill the location field below.
+    <br><strong>براہ کرم Location Allow کریں۔</strong> آپ کا پتہ خودبخود بھر جائے گا۔
   </div>
 
-  <button
-    style="background:linear-gradient(135deg,#1f7a52,#25a06b);color:#fafdf8;border:none;
-           border-radius:10px;padding:10px 20px;font-size:.9rem;font-weight:600;
-           cursor:pointer;width:100%;margin-bottom:8px;display:block"
-    onclick="window.rahbarGetGPS()">
-    Use My Current GPS Location / اپنی Location استعمال کریں
+  <button class="gps-btn" onclick="window.rahbarGetGPS()">
+    📍 Use My Current GPS Location / اپنی Location استعمال کریں
   </button>
 
   <div id="gpsStatus"
-       style="font-size:.8rem;min-height:20px;margin-bottom:6px;color:#25a06b;font-weight:500;padding:4px 0">
-    Map ready. Tap GPS button to get your location, or tap map to drop a pin.
+       style="font-size:.82rem;min-height:20px;margin-bottom:6px;
+              font-weight:500;padding:4px 2px;color:var(--g4,#25a06b)">
+    Map ready. Tap GPS button to auto-fill your location or tap the map to drop a pin.
   </div>
 
   <div id="rahbarMapDiv"></div>
 
-  <p style="font-size:.72rem;color:#8fa88a;margin:4px 0 10px">
-    Tap map to drop pin &middot; Drag pin to adjust &middot; GPS button for auto-location
+  <p style="font-size:.72rem;color:var(--text-muted,#5a8a6e);margin:4px 0 10px">
+    Tap map to drop pin &middot; Drag pin to adjust &middot; GPS fills address automatically
   </p>
 </div>
 
@@ -753,40 +959,94 @@ MAP_HTML = """
 
   function setStatus(msg, color){
     var el = document.getElementById('gpsStatus');
-    if(el){ el.textContent = msg; el.style.color = color || '#25a06b'; }
+    if(!el) return;
+    el.textContent = msg;
+    el.style.color = color || 'var(--g4, #25a06b)';
+  }
+
+  /* ── Reverse geocode using Nominatim (free, no key needed) ── */
+  function reverseGeocode(lat, lng, callback){
+    var url = 'https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat='
+              + lat + '&lon=' + lng + '&zoom=17&addressdetails=1';
+    fetch(url, { headers: { 'Accept-Language': 'en' } })
+      .then(function(r){ return r.json(); })
+      .then(function(data){
+        var a = data.address || {};
+        var parts = [];
+        // Build a readable address from parts
+        if(a.road || a.pedestrian || a.footway)
+          parts.push(a.road || a.pedestrian || a.footway);
+        if(a.suburb || a.neighbourhood || a.quarter)
+          parts.push(a.suburb || a.neighbourhood || a.quarter);
+        if(a.city_district || a.county)
+          parts.push(a.city_district || a.county);
+        if(parts.length === 0 && data.display_name)
+          parts.push(data.display_name.split(',').slice(0,3).join(',').trim());
+        var address = parts.join(', ') || ('GPS: ' + lat.toFixed(5) + ', ' + lng.toFixed(5));
+        callback(address);
+      })
+      .catch(function(){
+        callback('GPS: ' + lat.toFixed(5) + ', ' + lng.toFixed(5));
+      });
   }
 
-  function fillField(lat, lng){
-    var txt = 'GPS: ' + lat.toFixed(6) + ', ' + lng.toFixed(6);
-    setStatus('Pinned: ' + txt);
+  /* ── Fill Gradio location textbox ── */
+  function fillLocationField(text){
+    // Target the textarea/input whose label contains Street/Landmark/GPS
+    var filled = false;
     document.querySelectorAll('textarea, input[type=text]').forEach(function(el){
-      var ph = (el.placeholder || '').toLowerCase();
+      if(filled) return;
+      var ph  = (el.placeholder || '').toLowerCase();
       var lbl = '';
       var blk = el.closest('.block');
       if(blk){ var l = blk.querySelector('label'); if(l) lbl = l.textContent.toLowerCase(); }
-      if(ph.indexOf('gps') > -1 || ph.indexOf('street') > -1 || ph.indexOf('landmark') > -1
-         || lbl.indexOf('street') > -1 || lbl.indexOf('landmark') > -1 || lbl.indexOf('gps') > -1){
-        var proto = el.tagName === 'TEXTAREA' ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
-        var desc  = Object.getOwnPropertyDescriptor(proto, 'value');
-        if(desc && desc.set) desc.set.call(el, txt); else el.value = txt;
-        el.dispatchEvent(new Event('input',  {bubbles:true}));
-        el.dispatchEvent(new Event('change', {bubbles:true}));
+      if(ph.indexOf('gps') > -1 || ph.indexOf('street') > -1
+         || ph.indexOf('landmark') > -1 || lbl.indexOf('street') > -1
+         || lbl.indexOf('landmark') > -1 || lbl.indexOf('gps') > -1){
+        var proto = el.tagName === 'TEXTAREA'
+                      ? HTMLTextAreaElement.prototype
+                      : HTMLInputElement.prototype;
+        var desc = Object.getOwnPropertyDescriptor(proto, 'value');
+        if(desc && desc.set) desc.set.call(el, text); else el.value = text;
+        el.dispatchEvent(new Event('input',  { bubbles: true }));
+        el.dispatchEvent(new Event('change', { bubbles: true }));
+        filled = true;
       }
     });
   }
 
+  function placePin(lat, lng){
+    if(!rbMap) return;
+    rbMark.setLatLng([lat, lng]);
+    rbMap.setView([lat, lng], 17);
+  }
+
+  function handleCoords(lat, lng, source){
+    placePin(lat, lng);
+    setStatus('Getting address…', 'var(--a4, #f5a623)');
+    reverseGeocode(lat, lng, function(address){
+      fillLocationField(address);
+      setStatus('✅ Location filled: ' + address);
+    });
+  }
+
   function initMap(lat, lng){
     if(!leafletReady){ setTimeout(function(){ initMap(lat, lng); }, 400); return; }
     var el = document.getElementById('rahbarMapDiv');
     if(!el) return;
     if(rbMap){ rbMap.remove(); rbMap = null; }
-    rbMap  = L.map('rahbarMapDiv').setView([lat, lng], 15);
+    rbMap  = L.map('rahbarMapDiv').setView([lat, lng], 13);
     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
-      {attribution:'© OpenStreetMap', maxZoom:19}).addTo(rbMap);
-    rbMark = L.marker([lat, lng], {draggable:true}).addTo(rbMap)
-              .bindPopup('Drag or tap map to move pin').openPopup();
-    rbMark.on('dragend', function(e){ var ll=e.target.getLatLng(); fillField(ll.lat, ll.lng); });
-    rbMap.on('click', function(e){ rbMark.setLatLng(e.latlng); fillField(e.latlng.lat, e.latlng.lng); });
+      { attribution: '© OpenStreetMap', maxZoom: 19 }).addTo(rbMap);
+    rbMark = L.marker([lat, lng], { draggable: true }).addTo(rbMap)
+               .bindPopup('Drag or tap to set your location').openPopup();
+    rbMark.on('dragend', function(e){
+      var ll = e.target.getLatLng();
+      handleCoords(ll.lat, ll.lng, 'drag');
+    });
+    rbMap.on('click', function(e){
+      handleCoords(e.latlng.lat, e.latlng.lng, 'click');
+    });
     setTimeout(function(){ if(rbMap) rbMap.invalidateSize(); }, 350);
   }
 
@@ -794,26 +1054,27 @@ MAP_HTML = """
     if(!navigator.geolocation){
       setStatus('GPS not supported by this browser.', '#e85353'); return;
     }
-    setStatus('Requesting location... please ALLOW when browser asks.', '#f7bc57');
+    setStatus('Requesting location… please ALLOW when browser asks.', 'var(--a5, #f5a623)');
     navigator.geolocation.getCurrentPosition(
       function(pos){
-        setStatus('Location found! Placing pin on map...');
-        initMap(pos.coords.latitude, pos.coords.longitude);
-        fillField(pos.coords.latitude, pos.coords.longitude);
+        var lat = pos.coords.latitude, lng = pos.coords.longitude;
+        setStatus('GPS found! Getting your address…', 'var(--g4, #2ec97f)');
+        if(!rbMap){ initMap(lat, lng); }
+        handleCoords(lat, lng, 'gps');
       },
       function(err){
         var msgs = {
-          1: 'DENIED - Please allow location in browser settings, then try again.',
-          2: 'Location unavailable. Check your GPS/network and retry.',
-          3: 'Timeout - please try again.'
+          1: '❌ DENIED — Allow location in browser settings, then retry.',
+          2: '⚠️ Location unavailable. Check GPS/network and retry.',
+          3: '⏱️ Timeout — please try again.'
         };
         setStatus(msgs[err.code] || 'GPS error: ' + err.message, '#e85353');
       },
-      {enableHighAccuracy:true, timeout:15000, maximumAge:0}
+      { enableHighAccuracy: true, timeout: 15000, maximumAge: 0 }
     );
   };
 
-  /* Load Leaflet JS dynamically */
+  /* Load Leaflet JS */
   function loadLeaflet(){
     if(typeof L !== 'undefined'){ leafletReady = true; initMap(DEFAULT_LAT, DEFAULT_LNG); return; }
     var s = document.createElement('script');
@@ -840,7 +1101,7 @@ def update_areas(city):
 
 # ─── BUILD UI ─────────────────────────────────────────────────
 def build_ui():
-    with gr.Blocks(title="Rahbar | رہبر") as demo:
+    with gr.Blocks(title="Rahbar | رہبر", css=CSS) as demo:
         gr.HTML(HEADER_HTML)
 
         with gr.Tabs():
@@ -868,7 +1129,7 @@ def build_ui():
 
                         location_tb = gr.Textbox(
                             label="Street / Landmark / GPS Coordinates",
-                            placeholder="GPS coordinates auto-fill here — or type street/landmark",
+                            placeholder="GPS address auto-fills here — or type street/landmark",
                             lines=1
                         )
                         desc_tb     = gr.Textbox(label="Description (optional)", placeholder="Describe the issue...", lines=3)
@@ -932,13 +1193,7 @@ def build_ui():
   or your legal rights as a Pakistani citizen.
 </div>""")
                 chat_lang_dd = gr.Dropdown(choices=LANGUAGES, value="English", label="Response Language")
-
-                # KEY FIX: type="messages" for Gradio 6+
-                chatbot = gr.Chatbot(
-                    label="Rahbar Legal Assistant",
-                    height=600,
-                    value=[],
-                )
+                chatbot = gr.Chatbot(label="Rahbar Legal Assistant", height=600, value=[])
                 with gr.Row():
                     chat_input    = gr.Textbox(
                         label="Your Question",
@@ -957,7 +1212,6 @@ def build_ui():
                     inputs=[chat_input, chatbot, chat_lang_dd],
                     outputs=[chatbot, chat_input]
                 )
-
                 gr.Examples(
                     examples=[
                         ["WASA did not fix the leakage for 3 days. What are my rights?"],
@@ -975,14 +1229,9 @@ def build_ui():
                 gr.HTML('<div class="card-title">Speech-to-Text (STT)</div>')
                 gr.HTML('<div class="warn-box">Record your complaint. Copy the transcription to the Report Issue tab.</div>')
                 gr.HTML('<div class="info-box">Allow microphone access when your browser asks. Works best in Chrome/Edge.<br>مائیکروفون کی اجازت دیں جب browser پوچھے۔</div>')
-
-                audio_in = gr.Audio(
-                    type="filepath",
-                    label="Record or Upload Audio",
-                    sources=["microphone", "upload"]
-                )
-                stt_btn = gr.Button("Transcribe Audio", variant="primary")
-                stt_out = gr.Textbox(label="Transcription (editable — copy to Report tab)", lines=5, interactive=True)
+                audio_in = gr.Audio(type="filepath", label="Record or Upload Audio", sources=["microphone", "upload"])
+                stt_btn  = gr.Button("Transcribe Audio", variant="primary")
+                stt_out  = gr.Textbox(label="Transcription (editable — copy to Report tab)", lines=5, interactive=True)
                 stt_btn.click(fn=stt, inputs=[audio_in], outputs=[stt_out])
 
                 gr.HTML('<div class="card-title" style="margin-top:20px">Text-to-Speech Test</div>')
@@ -1010,8 +1259,6 @@ if __name__ == "__main__":
     demo.launch(
         server_name="0.0.0.0",
         server_port=7860,
-        
-        css=CSS,
         share=True,
         theme=gr.themes.Base(
             primary_hue=gr.themes.colors.green,