feat: enhance AI functionality + ChatBox with context menu and utili…

app/app.css

@@ -4,8 +4,9 @@
 @custom-variant dark (&:is(.dark *));
 
 @theme {
-  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-sans:
+    "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    "Noto Color Emoji";
 }
 
 html,
@@ -202,6 +203,27 @@ body {
     max-width: 100%;
   }
 
+  /* Ultra-thin scrollbar specifically for chat tabs strip */
+  .chat-tabs-scroll::-webkit-scrollbar {
+    height: 0px; /* hide horizontal bar */
+  }
+  .chat-tabs-scroll::-webkit-scrollbar-thumb {
+    background: transparent;
+    border-radius: 9999px;
+  }
+  .chat-tabs-scroll::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  /* Hide scrollbar utility (cross-browser) */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+
   /* Prevent horizontal overflow in chat areas */
   .chat-container * {
     max-width: 100%;
@@ -332,11 +354,14 @@ body {
 @keyframes glow-pulse {
   0%,
   100% {
-    box-shadow: 0 0 20px rgba(37, 99, 235, 0.1),
+    box-shadow:
+      0 0 20px rgba(37, 99, 235, 0.1),
       0 0 40px rgba(37, 99, 235, 0.05);
   }
   50% {
-    box-shadow: 0 0 30px rgba(37, 99, 235, 0.2), 0 0 60px rgba(37, 99, 235, 0.1);
+    box-shadow:
+      0 0 30px rgba(37, 99, 235, 0.2),
+      0 0 60px rgba(37, 99, 235, 0.1);
   }
 }
 
@@ -489,7 +514,16 @@ body {
 }
 
 @keyframes indeterminate-slide {
-  0% { left: -40%; width: 40%; }
-  50% { left: 20%; width: 60%; }
-  100% { left: 100%; width: 40%; }
-}
+  0% {
+    left: -40%;
+    width: 40%;
+  }
+  50% {
+    left: 20%;
+    width: 60%;
+  }
+  100% {
+    left: 100%;
+    width: 40%;
+  }
+}