fix mobile screen responsive

src/components/ai-assistant/AssistantPanel.jsx

@@ -10,6 +10,16 @@ const EXPANDED_WIDTH = 620;
 const GUTTER = 24;
 /** Expanded must never dominate: the dashboard stays the primary experience. */
 const MAX_VIEWPORT_SHARE = 0.42;
+/**
+ * Below this width there is no room for a column *beside* the dashboard — a
+ * 380px track on a 375px phone collapses `main` to nothing — so the panel
+ * becomes a bottom sheet over the page instead of an inline column.
+ *
+ * Deliberately Tailwind's `md` (768px), not `lg`: tablets already lay the
+ * inline column out acceptably, so they keep the existing behaviour and only
+ * phones switch to the sheet.
+ */
+const OVERLAY_BREAKPOINT = 768;
 
 /** Tracks viewport width so the expanded panel can be clamped on smaller screens. */
 function useViewportWidth() {
@@ -58,6 +68,45 @@ export function AssistantPanel({ stickyClassName, panelHeightClassName }) {
   const trackWidth = panelWidth + GUTTER;
   const easing = [0.65, 0, 0.35, 1];
 
+  // Phone/small-tablet: a sheet over the dashboard rather than a column beside
+  // it. Same assistant, same props — only the container differs.
+  if (viewportWidth < OVERLAY_BREAKPOINT) {
+    return (
+      <AnimatePresence initial={false}>
+        {isOpen && context && (
+          <>
+            <motion.div
+              className="fixed inset-0 z-40 bg-black/40"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.25, ease: easing }}
+              onClick={close}
+            />
+            <motion.aside
+              key="assistant-sheet"
+              aria-label="Krow AI Assistant"
+              className="fixed inset-x-0 bottom-0 z-50 max-h-[85dvh] overflow-y-auto overscroll-contain rounded-t-2xl bg-white shadow-2xl"
+              initial={{ y: '100%' }}
+              animate={{ y: 0 }}
+              exit={{ y: '100%' }}
+              transition={{ duration: 0.3, ease: easing }}
+            >
+              <KrowAssistant
+                key={context.id}
+                context={context}
+                expanded={false}
+                onClose={close}
+                onExpand={expand}
+                onRestore={restore}
+              />
+            </motion.aside>
+          </>
+        )}
+      </AnimatePresence>
+    );
+  }
+
   return (
     <AnimatePresence initial={false}>
       {isOpen && context && (