Add Chromebook compatibility fixes and optimizations

Implemented comprehensive Chromebook-specific fixes including viewport adjustments, enhanced touch and keyboard detection, improved scrolling and keyboard navigation hooks, and extensive CSS optimizations for better usability. Updated chat and dashboard interfaces for larger touch targets, better focus management, and responsive layouts. Added documentation in docs/CHROMEBOOK-FIXES.md and new hooks for Chromebook scroll and keyboard handling.

hooks/use-mobile.tsx

@@ -23,18 +23,29 @@ export function useIsTouchDevice() {
 
   React.useEffect(() => {
     const checkTouch = () => {
-      const hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0
+      const hasTouch = 'ontouchstart' in window || 
+                      navigator.maxTouchPoints > 0 ||
+                      (navigator.userAgent.includes('CrOS') && 'ontouchstart' in window) ||
+                      window.matchMedia('(pointer: coarse)').matches ||
+                      !window.matchMedia('(hover: hover)').matches
+      
       setIsTouch(hasTouch)
     }
     
     checkTouch()
     
-    // Listen for changes in touch capability
     const mediaQuery = window.matchMedia('(pointer: coarse)')
+    const hoverQuery = window.matchMedia('(hover: hover)')
+    
     const handleChange = () => checkTouch()
     
     mediaQuery.addEventListener('change', handleChange)
-    return () => mediaQuery.removeEventListener('change', handleChange)
+    hoverQuery.addEventListener('change', handleChange)
+    
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange)
+      hoverQuery.removeEventListener('change', handleChange)
+    }
   }, [])
 
   return !!isTouch