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.

app/globals.css

@@ -10,6 +10,89 @@ body {
   .text-balance {
     text-wrap: balance;
   }
+  
+  /* Accessibility improvements */
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+  
+  /* Better focus states for keyboard navigation */
+  .focus-visible:focus-visible {
+    outline: 2px solid hsl(var(--ring));
+    outline-offset: 2px;
+  }
+  
+  /* Improved touch targets for mobile/Chromebook */
+  .touch-target {
+    min-height: 44px;
+    min-width: 44px;
+  }
+  
+  /* Better contrast for Chromebook displays */
+  @media (prefers-contrast: high) {
+    .border-input {
+      border-color: hsl(var(--foreground));
+    }
+  }
+  
+  /* Chromebook and touch device optimizations */
+  @media (pointer: coarse) {
+    .touch-target {
+      min-height: 48px;
+      min-width: 48px;
+    }
+    
+    /* Larger touch targets for interactive elements */
+    button, input, textarea, [role="button"] {
+      min-height: 44px;
+    }
+  }
+  
+  /* Better focus indicators for keyboard navigation */
+  .focus-visible:focus-visible {
+    outline: 2px solid hsl(var(--ring));
+    outline-offset: 2px;
+    box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
+  }
+  
+  /* Improved scrolling for touch devices */
+  .overflow-y-auto {
+    -webkit-overflow-scrolling: touch;
+    scroll-behavior: smooth;
+  }
+  
+  /* Enhanced contrast for better visibility */
+  .text-muted-foreground {
+    color: hsl(var(--muted-foreground) / 0.8);
+  }
+  
+  /* Better button contrast */
+  button:not(:disabled):hover {
+    filter: brightness(1.05);
+  }
+  
+  /* Improved focus visibility */
+  input:focus, textarea:focus, button:focus {
+    outline: 2px solid hsl(var(--ring));
+    outline-offset: 2px;
+  }
+  
+  /* Better message bubble contrast */
+  .bg-primary {
+    background-color: hsl(var(--primary) / 0.9);
+  }
+  
+  .bg-muted {
+    background-color: hsl(var(--muted) / 0.8);
+  }
 }
 
 @layer base {