Improve accessibility and touch support in dashboard

Enhances accessibility and usability for touch devices and Chromebooks by updating global styles, adding ARIA attributes, and optimizing component layouts. Introduces a new useIsTouchDevice hook, improves focus states, and increases viewport scalability. ChatDetail now supports better keyboard navigation and larger touch targets.

hooks/use-mobile.tsx

@@ -17,3 +17,25 @@ export function useIsMobile() {
 
   return !!isMobile
 }
+
+export function useIsTouchDevice() {
+  const [isTouch, setIsTouch] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const checkTouch = () => {
+      const hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0
+      setIsTouch(hasTouch)
+    }
+    
+    checkTouch()
+    
+    // Listen for changes in touch capability
+    const mediaQuery = window.matchMedia('(pointer: coarse)')
+    const handleChange = () => checkTouch()
+    
+    mediaQuery.addEventListener('change', handleChange)
+    return () => mediaQuery.removeEventListener('change', handleChange)
+  }, [])
+
+  return !!isTouch
+}