style fixes

Author: alrocar

dashboard/ai-analytics/src/app/components/CostPredictionModal.tsx

@@ -728,7 +728,7 @@ export default function CostPredictionModal({
                       type="text"
                       value={query}
                       onChange={(e) => setQuery(e.target.value)}
-                      placeholder="Ask about cost predictions..."
+                      placeholder="Ask about cost calculations..."
                       className="w-full bg-gray-800 text-white rounded-lg pl-10 pr-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500"
                     />
                   </div>

dashboard/ai-analytics/src/app/components/FilterChips.tsx

@@ -8,15 +8,18 @@ interface FilterChip {
 
 export default function FilterChips({ dimension, value, onRemove }: FilterChip) {
   return (
-    <div className="flex items-center gap-2 px-2 py-1 bg-gray-800 border border-gray-700">
-      <span className="text-gray-400">{dimension}</span>
-      <span className="text-gray-400">is</span>
-      <span className="font-medium text-white">{value}</span>
+    <div className="flex items-center gap-2 px-3 py-2 text-sm rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm">
+      <span className="text-gray-500 dark:text-gray-400">{dimension}</span>
+      <span className="text-gray-500 dark:text-gray-400">is</span>
+      <span className="font-medium text-gray-900 dark:text-white">{value}</span>
       <button
         onClick={() => onRemove(value)}
-        className="ml-1 text-gray-400 hover:text-white transition-colors"
+        className="ml-1 text-gray-400 hover:text-gray-700 dark:hover:text-white transition-colors"
+        aria-label={`Remove ${dimension} filter for ${value}`}
       >
-        ×
+        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+          <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
+        </svg>
       </button>
     </div>
   );

dashboard/ai-analytics/src/app/components/SparkChart.tsx

@@ -67,7 +67,7 @@ import {
             showYAxis={true}
             showLegend={false}
             showGridLines={false}
-            showAnimation={true}
+            showAnimation={false}
             curveType="monotone"
             stack={isStacked}
           />

dashboard/ai-analytics/src/app/components/TimeseriesChart.tsx

@@ -224,7 +224,7 @@ export default function TimeseriesChart({ data, filters, onFiltersChange }: Time
                       valueFormatter={costValueFormatter}
                       className="h-[calc(100%-24px)] mt-10 hidden md:block"
                       showTooltip={true}
-                      showAnimation={true}
+                      showAnimation={false}
                       showXAxis={true}
                     />
                     <BarChart
@@ -238,7 +238,7 @@ export default function TimeseriesChart({ data, filters, onFiltersChange }: Time
                       valueFormatter={costValueFormatter}
                       className="h-[calc(100%-24px)] mt-6 md:hidden"
                       showTooltip={true}
-                      showAnimation={true}
+                      showAnimation={false}
                       showXAxis={true}
                     />
                   </div>