Fix Sasquatch auto-popup on / and /lab; move map attribution above mobile nav

- Sasquatch panel no longer auto-opens on the map (/) or The Lab (/lab).
  Added an `autoShow` flag to GuideMessage; only opt-in messages (onboarding)
  auto-open. The bubble stays minimized until tapped, and context messages
  still populate the panel when opened manually.
- Map CARTO/OSM attribution now sits above the mobile bottom nav (safe-area
  aware) instead of overlapping the Shops & Spots buttons; made it smaller
  and more subtle. Desktop keeps it in the bottom-left corner.

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>

src/components/SasquatchGuide.tsx

@@ -114,6 +114,9 @@ export interface GuideMessage {
     onClick: () => void;
   };
   enableChat?: boolean;
+  /** When true, the panel auto-opens on navigation. When false/undefined, the
+   *  message only populates content once the user taps the bubble. */
+  autoShow?: boolean;
 }
 
 interface SasquatchGuideProps {
@@ -371,14 +374,16 @@ export function SasquatchGuide({ message, onDismiss }: SasquatchGuideProps) {
     return undefined;
   }, [dragPos]);
 
+  // Only auto-open the panel when the context message explicitly opts in via
+  // `autoShow`. On the map (`/`) and The Lab (`/lab`) the guide stays minimized
+  // until the user taps the bubble — the message content is still used to
+  // populate the panel when they do.
   useEffect(() => {
-    if (message) {
+    if (message?.autoShow) {
       const timer = setTimeout(() => setIsVisible(true), 500);
       return () => clearTimeout(timer);
-    } else {
-      setIsVisible(false);
     }
-  }, [message]);
+  }, [message?.autoShow, message?.id]);
 
   // Auto-scroll chat to bottom
   useEffect(() => {
@@ -579,8 +584,9 @@ Instructions:
   }, [handleSendMessage, setIsMinimized]);
 
   // The minimized bubble is ALWAYS visible so the user can reopen Sasquatch on any page.
-  // The full panel shows only when there's a message or when opened externally/by user tap.
+  // The full panel shows only when opened externally, by user tap, or by an
-  const shouldShowPanel = !!message || isVisible;
+  // opt-in auto-show message (e.g. onboarding) — never automatically on / or /lab.
+  const shouldShowPanel = isVisible;
 
   // Notify the rest of the app (e.g. MapPage FAB) when the panel opens or closes
   useEffect(() => {

src/hooks/useSasquatchGuide.ts

@@ -74,6 +74,9 @@ export function useSasquatchGuide() {
           },
         },
         enableChat: true,
+        // Map homepage: don't auto-open the panel — the bubble stays minimized
+        // until the user taps it.
+        autoShow: false,
       };
     }
 
@@ -116,6 +119,8 @@ export function useSasquatchGuide() {
           },
         },
         enableChat: true,
+        // Dedicated onboarding page — auto-open is helpful here.
+        autoShow: true,
       };
     }
 
@@ -144,6 +149,8 @@ export function useSasquatchGuide() {
           },
         },
         enableChat: true,
+        // The Lab: don't auto-open — the bubble stays minimized until tapped.
+        autoShow: false,
       };
     }
 

src/pages/MapPage.tsx

@@ -1426,12 +1426,15 @@ export default function MapPage() {
 
 
 
-              {/* Map attribution — bottom-left corner, minimal */}
+              {/* Map attribution — bottom-left, sits ABOVE the mobile bottom
-              <div className="absolute bottom-2 left-2 z-[999] pointer-events-none">
+                  nav so it never covers the Shops & Spots buttons. Tiny + subtle. */}
-                <div className="bg-black/50 backdrop-blur px-1.5 py-0.5 rounded text-[9px] text-gray-600 leading-snug pointer-events-auto">
+              <div
-                  <a href="https://carto.com/attributions" target="_blank" rel="noopener noreferrer" className="hover:text-gray-400 transition-colors">CARTO</a>
+                className="absolute left-1.5 z-[999] pointer-events-none bottom-[calc(5rem+env(safe-area-inset-bottom,0px)+0.25rem)] md:bottom-1.5"
+              >
+                <div className="bg-black/40 backdrop-blur-sm px-1 py-px rounded text-[8px] text-gray-500/80 leading-none pointer-events-auto">
+                  <a href="https://carto.com/attributions" target="_blank" rel="noopener noreferrer" className="hover:text-gray-300 transition-colors">CARTO</a>
                   {' · '}
-                  <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener noreferrer" className="hover:text-gray-400 transition-colors">OSM</a>
+                  <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener noreferrer" className="hover:text-gray-300 transition-colors">OSM</a>
                   {showBtcMap && (
                     <>{' · '}<a href="https://btcmap.org" target="_blank" rel="noopener noreferrer" className="text-[#f7931a]/60 hover:text-[#f7931a] transition-colors">BTC Map</a></>
                   )}