fix(webui): animate reasoning drawer transitions (#5143)

webui/src/components/thread/activity/ThinkingReasoningShell.tsx

@@ -45,20 +45,27 @@ export function ThinkingReasoningShell({
         >
           {label}
         </span>
-        <ChevronDown
+        <span
           className={cn(
-            "h-3 w-3 shrink-0 text-muted-foreground/60 transition-[transform,color] duration-200",
-            "group-hover:text-muted-foreground motion-reduce:transition-none",
+            "inline-flex shrink-0 transition-transform [transition-duration:600ms] ease-out",
+            "motion-reduce:[transition-duration:220ms]",
             expanded && "rotate-180",
           )}
-          strokeWidth={1.8}
-          aria-hidden
-        />
+        >
+          <ChevronDown
+            className={cn(
+              "h-3 w-3 text-muted-foreground/60 transition-colors duration-200",
+              "group-hover:text-muted-foreground motion-reduce:transition-none",
+            )}
+            strokeWidth={1.8}
+            aria-hidden
+          />
+        </span>
       </button>
 
       <div
         className={cn(
-          "grid transition-[grid-template-rows,opacity] duration-300 motion-reduce:transition-none",
+          "grid transition-[grid-template-rows,opacity] [transition-duration:600ms] ease-out motion-reduce:[transition-duration:220ms]",
           expanded
             ? "grid-rows-[1fr] opacity-100"
             : "pointer-events-none grid-rows-[0fr] opacity-0",