Improve scroll handling and robustness for chat UI

Added 'overscroll-behavior: contain' to body and Chromebook scroll containers to prevent unwanted scroll chaining. Updated scrollToBottom utilities to handle null/undefined containers and errors gracefully. Fixed ChatDetail to use the correct scroll handler function.

lib/hooks/use-chromebook-scroll.tsx

@@ -11,13 +11,15 @@ export function useChromebookScroll() {
     if (!container) return;
 
     // Enhanced scrolling for Chromebooks
+    container.style.overscrollBehavior = 'contain';
+
     const handleTouchStart = (e: TouchEvent) => {
       // Prevent default touch behavior that might interfere with scrolling
       if (e.touches.length === 1) {
         // Single touch - allow normal scrolling
         return;
       }
-      
+
       // Multi-touch - prevent zoom gestures
       if (e.touches.length > 1) {
         e.preventDefault();
@@ -30,7 +32,7 @@ export function useChromebookScroll() {
         // Single touch scrolling - allow default behavior
         return;
       }
-      
+
       // Multi-touch - prevent zoom
       if (e.touches.length > 1) {
         e.preventDefault();
@@ -41,7 +43,7 @@ export function useChromebookScroll() {
       // Enhanced wheel scrolling for Chromebook trackpads
       const delta = e.deltaY;
       const container = e.currentTarget as HTMLElement;
-      
+
       // Smooth scrolling for Chromebook trackpads
       if (Math.abs(delta) > 0) {
         container.scrollBy({
@@ -71,15 +73,32 @@ export function useChromebookScroll() {
  * Hook for smooth scrolling to bottom (useful for chat interfaces)
  */
 export function useSmoothScrollToBottom() {
-  const scrollToBottom = (container: HTMLElement) => {
-    container.scrollTo({
-      top: container.scrollHeight,
-      behavior: 'smooth'
-    });
+  const scrollToBottom = (container: HTMLElement | null | undefined) => {
+    if (!container || typeof container !== 'object') return;
+
+    try {
+      if ('scrollTo' in container && typeof container.scrollTo === 'function') {
+        container.scrollTo({
+          top: container.scrollHeight,
+          behavior: 'smooth'
+        });
+      } else {
+        container.scrollTop = container.scrollHeight;
+      }
+    } catch (err) {
+      console.error('Error in scrollToBottom:', err);
+      // Fallback to direct property assignment if scrollTo fails
+      try {
+        container.scrollTop = container.scrollHeight;
+      } catch (e) { }
+    }
   };
 
-  const scrollToBottomInstant = (container: HTMLElement) => {
-    container.scrollTop = container.scrollHeight;
+  const scrollToBottomInstant = (container: HTMLElement | null | undefined) => {
+    if (!container || typeof container !== 'object') return;
+    try {
+      container.scrollTop = container.scrollHeight;
+    } catch (e) { }
   };
 
   return { scrollToBottom, scrollToBottomInstant };