Tighten message spacing and restyle reasoning blocks

packages/ui/src/components/message-stream-v2.tsx

@@ -1006,9 +1006,10 @@ function ReasoningCard(props: ReasoningCardProps) {
 
       <Show when={expanded()}>
         <div class="message-reasoning-expanded">
-          <div class="message-reasoning-divider" aria-hidden="true" />
           <div class="message-reasoning-body">
-            <pre class="message-reasoning-text">{reasoningText() || ""}</pre>
+            <div class="message-reasoning-output" role="region" aria-label="Reasoning details">
+              <pre class="message-reasoning-text">{reasoningText() || ""}</pre>
+            </div>
           </div>
         </div>
       </Show>

packages/ui/src/styles/messaging/message-base.css

@@ -11,20 +11,20 @@
 }
 
 .message-item-base:not(.assistant-message) {
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 .message-step-start {
   background-color: var(--message-assistant-bg);
   border-left: 4px solid var(--message-assistant-border);
-  margin-top: 0.125rem;
+  margin-top: 0;
 }
 
 .message-step-finish {
   background-color: var(--message-assistant-bg);
   border-left: 4px solid var(--message-assistant-border);
-  margin-bottom: 0.125rem;
+  margin: 0;
 }
 
 .message-step-finish-flush {
@@ -276,21 +276,29 @@
   gap: 0.35rem;
 }
 
-.message-reasoning-divider {
-  width: 100%;
-  height: 1px;
-  background-color: var(--border-base);
+.message-reasoning-body {
+  padding: 0;
+  background-color: var(--surface-code);
+  margin: 0.75rem;
 }
 
-.message-reasoning-body {
-  padding: 0.25rem 0.6rem 0.4rem;
+.message-reasoning-output {
+  @apply flex flex-col;
+  margin: 0;
+  padding: 0.75rem;
+  max-height: 30rem;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-base) transparent;
+  scrollbar-gutter: stable both-edges;
+  background-color: var(--surface-code);
 }
 
 .message-reasoning-text {
   font-family: var(--font-family-mono);
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-xs);
   line-height: var(--line-height-tight);
-  color: var(--text-muted);
+  color: var(--text-primary);
   white-space: pre-wrap;
   margin: 0;
 }

packages/ui/src/styles/messaging/message-stream.css

@@ -65,7 +65,7 @@
 }
 
 .message-stream {
-  @apply flex-1 min-h-0 overflow-y-auto flex flex-col gap-1;
+  @apply flex-1 min-h-0 overflow-y-auto flex flex-col gap-0.5;
   background-color: var(--surface-base);
   color: inherit;
 }
@@ -73,7 +73,7 @@
 .message-stream-block {
   display: flex;
   flex-direction: column;
-  gap: 0.125rem;
+  gap: 0.0625rem;
 }
 
 .message-scroll-button-wrapper {