diff --git a/packages/ui/src/components/message-block.tsx b/packages/ui/src/components/message-block.tsx
index 7cbf8c96..4157f342 100644
--- a/packages/ui/src/components/message-block.tsx
+++ b/packages/ui/src/components/message-block.tsx
@@ -1531,7 +1531,7 @@ function ReasoningCard(props: ReasoningCardProps) {
         <div class="message-reasoning-expanded">
           <div class="message-reasoning-body">
             <div class="message-reasoning-output" role="region" aria-label={t("messageBlock.reasoning.detailsAriaLabel")}>
-              <pre class="message-reasoning-text">{reasoningText() || ""}</pre>
+              <pre class="message-reasoning-text" dir="auto">{reasoningText() || ""}</pre>
             </div>
           </div>
         </div>
diff --git a/packages/ui/src/styles/messaging/message-base.css b/packages/ui/src/styles/messaging/message-base.css
index 852bb41d..5b290f89 100644
--- a/packages/ui/src/styles/messaging/message-base.css
+++ b/packages/ui/src/styles/messaging/message-base.css
@@ -547,4 +547,5 @@
   color: var(--text-primary);
   white-space: pre-wrap;
   margin: 0;
+  unicode-bidi: plaintext;
 }