improve think ui

src/lib/components/chat/markdown/Think.svelte

@@ -5,15 +5,15 @@
 
 	import Spinner from '$lib/components/loading/Spinner.svelte';
 
-	import Paragraph from './Paragraph.svelte';
-	import Heading from './Heading.svelte';
-	import Code from './Code.svelte';
-	import Codespan from './Codespan.svelte';
-	import Blockquote from './Blockquote.svelte';
-	import List from './List.svelte';
-	import ListItem from './ListItem.svelte';
-	import Link from './Link.svelte';
-	import Hr from './Hr.svelte';
+	import Paragraph from './think/Paragraph.svelte';
+	import Heading from './think/Heading.svelte';
+	import Code from './think/Code.svelte';
+	import Codespan from './think/Codespan.svelte';
+	import Blockquote from './think/Blockquote.svelte';
+	import List from './think/List.svelte';
+	import ListItem from './think/ListItem.svelte';
+	import Link from './think/Link.svelte';
+	import Hr from './think/Hr.svelte';
 
 	let { isThinking, content }: { isThinking?: boolean; content?: string } = $props();
 
@@ -46,19 +46,19 @@
 	class="mb-4 overflow-hidden rounded-xl border border-border bg-accent text-xs dark:bg-accent/30"
 >
 	<button
-		class="flex w-full cursor-pointer items-center gap-2.5 p-3 text-left transition-colors hover:bg-accent/80 dark:hover:bg-accent/30"
+		class="flex w-full cursor-pointer items-center gap-2.5 p-2 text-left transition-colors hover:bg-accent/80 dark:hover:bg-accent/30"
 		onclick={toggleCollapse}
 	>
 		<div
-			class="flex size-7 min-h-7 min-w-7 items-center justify-center rounded-lg bg-linear-to-br from-primary/20 to-primary/5 {!isThinking &&
+			class="flex size-5 min-h-5 min-w-5 items-center justify-center rounded-lg bg-linear-to-br from-primary/20 to-primary/5 {!isThinking &&
 				'animate-pulse'}"
 		>
-			<Brain class="size-3.5 text-muted-foreground" />
+			<Brain class="size-3 text-muted-foreground" />
 		</div>
 		{#if !isThinking}
-			<Spinner className="text-muted-foreground text-xs font-medium">Thinking...</Spinner>
+			<Spinner className="text-muted-foreground text-[11px] font-medium">Thinking...</Spinner>
 		{:else}
-			<span class="font-medium text-muted-foreground">Thought process</span>
+			<span class="text-[11px] font-medium text-muted-foreground">Thought process</span>
 		{/if}
 		<ChevronDown
 			class="ml-auto size-3.5 text-muted-foreground/60 transition-transform duration-300 {isCollapsed

src/lib/components/chat/markdown/think/Paragraph.svelte

@@ -3,4 +3,4 @@
 	let { children }: { children?: Snippet } = $props();
 </script>
 
-<p class="mb-2 leading-relaxed text-foreground/75 last:mb-0">{@render children?.()}</p>
+<p class="mb-2 text-[11px]! leading-relaxed text-foreground/75 last:mb-0">{@render children?.()}</p>