ui: Highlight reasoning toggle on hover and align it with model selector (#31212)

On desktop, the reasoning effort toggle now gets a muted background on
hover and while its menu is open, matches the model selector's 24px
height, uses a 13px icon and sits 5px from the selector.

Assisted-by: Claude (Opus 5.5 Medium)

tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionReasoning.svelte

@@ -30,9 +30,9 @@
 {#snippet triggerLabel()}
 	<span class="flex items-center gap-0.75 {reasoning.isOff ? 'text-muted-foreground' : ''}">
 		{#if reasoning.isOff}
-			<LightbulbOff class="size-3 max-md:size-4 shrink-0" />
+			<LightbulbOff class="size-3.25 max-md:size-4 shrink-0" />
 		{:else}
-			<Lightbulb class="size-3 max-md:size-4 shrink-0" />
+			<Lightbulb class="size-3.25 max-md:size-4 shrink-0" />
 		{/if}
 
 		{#if !isDefault}
@@ -102,9 +102,9 @@
 				<Button
 					{...props}
 					aria-label="Reasoning effort"
-					class="h-auto gap-1 rounded-sm bg-transparent! backdrop-blur-none! {isDefault
+					class="-mr-px h-6 min-w-6 gap-1 rounded-sm bg-transparent backdrop-blur-none! {isDefault
 						? 'px-1'
-						: 'px-1.75!'} py-1 text-xs hover:bg-transparent!"
+						: 'px-1.75!'} py-0 text-xs hover:bg-muted-foreground/15 data-[state=open]:bg-muted-foreground/15"
 					variant="ghost"
 				>
 					{@render triggerLabel()}