From c8865e7d4c0ed7e6d75738aa630bb78860baa82c Mon Sep 17 00:00:00 2001
From: Mayur Shinde <mayurshinde6776@gmail.com>
Date: Mon, 15 Jun 2026 11:51:59 +0530
Subject: [PATCH] hide chatboat icon ,mobile responsive drawer

---
 src/components/Layout.jsx                    | 4 +++-
 src/components/maps/PropertyDetailDrawer.jsx | 9 ++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
index ed890bb..b3615aa 100644
--- a/src/components/Layout.jsx
+++ b/src/components/Layout.jsx
@@ -384,7 +384,9 @@ const Layout = () => {
                 </PageTransition>
             </main>
 
-            <Chatbot />
+            {/* Hide the floating chat on full-page flows that have their own bottom CTAs
+                (estimate wizard, ad preview form, Ad Engine) so it doesn't overlap their buttons. */}
+            {!(location.pathname === '/estimate' || location.pathname === '/marketing' || location.pathname.startsWith('/ads/')) && <Chatbot />}
         </div>
     );
 };
diff --git a/src/components/maps/PropertyDetailDrawer.jsx b/src/components/maps/PropertyDetailDrawer.jsx
index aa22e95..e8f270b 100644
--- a/src/components/maps/PropertyDetailDrawer.jsx
+++ b/src/components/maps/PropertyDetailDrawer.jsx
@@ -1,5 +1,6 @@
 
 import React, { useState, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
 import { X, Home, DollarSign, User, Edit2, Save, Info, AlertCircle, ShieldCheck, Loader2, ChevronLeft, ChevronRight, Trash2 } from 'lucide-react';
 import { SpotlightCard } from '../SpotlightCard';
 
@@ -309,7 +310,7 @@ const PropertyDetailDrawer = ({ isOpen, onClose, data, newLocation, onSave, load
         );
     };
 
-    return (
+    return createPortal(
         <div
             className={`fixed z-[1000] flex flex-col transition-transform duration-300 ease-out inset-0 md:inset-auto md:top-4 md:right-4 md:bottom-4 md:w-[500px] ${isOpen ? 'translate-x-0' : 'translate-x-full md:translate-x-[calc(100%+2rem)]'}`}
             role="dialog"
@@ -325,7 +326,8 @@ const PropertyDetailDrawer = ({ isOpen, onClose, data, newLocation, onSave, load
                     <button
                         ref={closeButtonRef}
                         onClick={onClose}
-                        className="absolute top-4 right-4 p-2 bg-white/50 dark:bg-white/10 hover:bg-white dark:hover:bg-white/20 rounded-full transition-all backdrop-blur-md text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-zinc-500 z-50 cursor-pointer shadow-sm border border-black/5 dark:border-white/5"
+                        style={{ top: 'max(1rem, env(safe-area-inset-top))' }}
+                        className="absolute right-4 p-2 bg-white/50 dark:bg-white/10 hover:bg-white dark:hover:bg-white/20 rounded-full transition-all backdrop-blur-md text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-zinc-500 z-50 cursor-pointer shadow-sm border border-black/5 dark:border-white/5"
                         aria-label="Close property details"
                     >
                         <X size={18} />
@@ -710,7 +712,8 @@ const PropertyDetailDrawer = ({ isOpen, onClose, data, newLocation, onSave, load
 
                 </div>
             )}
-        </div>
+        </div>,
+        document.body
     );
 };