diff --git a/apps/web/src/components/ChatMarkdown.test.tsx b/apps/web/src/components/ChatMarkdown.test.tsx
index 9499ee5a6915..c5cf63efeecf 100644
--- a/apps/web/src/components/ChatMarkdown.test.tsx
+++ b/apps/web/src/components/ChatMarkdown.test.tsx
@@ -1,6 +1,7 @@
+import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, it } from "vite-plus/test";
 
-import { orderedListGutterStyle } from "./ChatMarkdown";
+import ChatMarkdown, { orderedListGutterStyle } from "./ChatMarkdown";
 
 describe("orderedListGutterStyle", () => {
   it("leaves the default gutter alone for single-digit lists", () => {
@@ -34,3 +35,61 @@ describe("orderedListGutterStyle", () => {
     expect(orderedListGutterStyle(0, undefined)).toBeUndefined();
   });
 });
+
+describe("chat markdown text direction", () => {
+  function render(text: string) {
+    return renderToStaticMarkup(<ChatMarkdown text={text} cwd="/repo" />);
+  }
+
+  it("lets each block pick its own direction from its own text", () => {
+    const html = render("English first.\n\nمرحبا بالعالم.");
+    expect(html).toContain('<p dir="auto">English first.</p>');
+    expect(html).toContain('<p dir="auto">مرحبا بالعالم.</p>');
+  });
+
+  it("marks headings, lists, and quotes so their markers follow the text", () => {
+    const html = render("# عنوان\n\n- عنصر\n\n> اقتباس");
+    expect(html).toContain('<h1 dir="auto">');
+    expect(html).toContain('<ul dir="auto">');
+    expect(html).toContain('<blockquote dir="auto">');
+  });
+
+  it("marks only the outermost block, so a container still sees its own text", () => {
+    // A nested `dir` would be skipped when the browser resolves the outer
+    // `dir="auto"`, leaving the list LTR and its bullets in the wrong gutter.
+    const html = render("- عنصر\n\n> اقتباس");
+    expect(html).toContain("<li>");
+    expect(html).not.toContain("<li dir=");
+    expect(html).not.toContain('<blockquote dir="auto">\n<p dir="auto">');
+  });
+
+  it("pins code left-to-right so an Arabic comment cannot reorder a snippet", () => {
+    const html = render("`git status` وأيضا\n\n```sh\n# تعليق\ngit status\n```");
+    // The paragraph around it still reads right-to-left; only the code opts out.
+    expect(html).toContain('<p dir="auto">');
+    expect(html).toContain('<code data-inline-code="" dir="ltr">git status</code>');
+    expect(html).toContain('<div dir="ltr" class="chat-markdown-codeblock');
+  });
+
+  it("gives a GitHub alert's body its own direction under LTR callout chrome", () => {
+    // The alert renderer builds its own element, so the blockquote cannot be the
+    // marked block — the body paragraphs have to carry the direction instead.
+    const html = render("> [!NOTE]\n> مرحبا بالعالم.");
+    expect(html).toContain('<p dir="auto">مرحبا بالعالم.</p>');
+    expect(html).not.toContain("<blockquote");
+  });
+
+  it("pins a file-link chip left-to-right even inside right-to-left prose", () => {
+    // The `code` renderer swaps the chip in for the `<code dir="ltr">` it
+    // replaces, so a path in an Arabic sentence keeps its own reading order.
+    const html = render("عدّل `src/main.ts` من فضلك.");
+    expect(html).toContain('<a dir="ltr"');
+  });
+
+  it("keeps table columns in source order while cells read their own direction", () => {
+    const html = render("| اسم | value |\n| --- | --- |\n| قيمة | 1 |");
+    expect(html).toContain('<table dir="ltr">');
+    expect(html).toContain('<th dir="auto">');
+    expect(html).toContain('<td dir="auto">');
+  });
+});
diff --git a/apps/web/src/components/ChatMarkdown.tsx b/apps/web/src/components/ChatMarkdown.tsx
index c3e1c5288da7..1c7c6de21b56 100644
--- a/apps/web/src/components/ChatMarkdown.tsx
+++ b/apps/web/src/components/ChatMarkdown.tsx
@@ -195,6 +195,7 @@ const CHAT_MARKDOWN_REMARK_PLUGINS = [
   remarkNormalizeListItemIndentation,
   remarkPreserveCodeMeta,
   remarkTagInlineCode,
+  remarkTextDirection,
 ] satisfies NonNullable<ReactMarkdownOptions["remarkPlugins"]>;
 
 const CHAT_MARKDOWN_REMARK_PLUGINS_WITH_BREAKS = [
@@ -204,6 +205,7 @@ const CHAT_MARKDOWN_REMARK_PLUGINS_WITH_BREAKS = [
   remarkBreaks,
   remarkPreserveCodeMeta,
   remarkTagInlineCode,
+  remarkTextDirection,
 ] satisfies NonNullable<ReactMarkdownOptions["remarkPlugins"]>;
 
 const CHAT_MARKDOWN_REHYPE_PLUGINS = [
@@ -340,6 +342,74 @@ function remarkTagInlineCode() {
   };
 }
 
+/**
+ * Message prose belongs to whoever wrote it, so its direction is a property of
+ * the text and not of the app: `dir="auto"` makes the browser read each block's
+ * base direction off that block's own first strong character, which is what
+ * puts an Arabic sentence's trailing punctuation and its list markers on the
+ * right side without touching the English block above it.
+ *
+ * Code and tables opt out and stay LTR. Their shape is not prose — identifiers,
+ * paths, and column order read the same in every locale, and letting an Arabic
+ * comment flip a snippet would misreport what the agent actually wrote.
+ */
+const AUTO_DIRECTION_NODE_TYPES = new Set([
+  "blockquote",
+  "heading",
+  "list",
+  "paragraph",
+  "tableCell",
+]);
+const LTR_DIRECTION_NODE_TYPES = new Set(["code", "inlineCode", "table"]);
+
+function setDirection(node: MarkdownAstNode, dir: "auto" | "ltr") {
+  node.data = {
+    ...node.data,
+    hProperties: {
+      ...node.data?.hProperties,
+      dir,
+    },
+  };
+}
+
+function remarkTextDirection() {
+  return (tree: MarkdownAstNode) => {
+    // `dir="auto"` reads the first strong character of an element's *own* text
+    // and skips any descendant that carries its own `dir`. So only the outermost
+    // block of a run gets marked: marking a list and its items both would leave
+    // the list itself with no text to judge, fall back to LTR, and paint the
+    // bullets of an RTL item into a gutter that is no longer on that side.
+    //
+    // The cost is that one list reads in one direction. A list that mixes an
+    // Arabic item with an English one takes the direction of its first item,
+    // which is the trade for markers that stay next to the text they label.
+    const visit = (node: MarkdownAstNode, insideAutoBlock: boolean) => {
+      const type = node.type ?? "";
+      if (LTR_DIRECTION_NODE_TYPES.has(type)) {
+        setDirection(node, "ltr");
+        // A pinned table is not an `auto` ancestor, so its cells are free to
+        // pick their own direction while the column order stays put.
+        node.children?.forEach((child) => visit(child, false));
+        return;
+      }
+
+      // A GitHub alert is rendered as a titled callout rather than a quote, and
+      // its own renderer builds that chrome from scratch. Claiming the block
+      // here would strand its body: the `dir` never reaches the callout, and the
+      // paragraphs inside it would have been skipped as already-covered.
+      const isAlertBlockquote = type === "blockquote" && node.data?.hProperties?.dataAlert != null;
+      const isAutoBlock =
+        !insideAutoBlock && !isAlertBlockquote && AUTO_DIRECTION_NODE_TYPES.has(type);
+      if (isAutoBlock) {
+        setDirection(node, "auto");
+      }
+      node.children?.forEach((child) => visit(child, insideAutoBlock || isAutoBlock));
+    };
+
+    visit(tree, false);
+  };
+}
+
 function nodeToPlainText(node: ReactNode): string {
   if (typeof node === "string" || typeof node === "number") {
     return String(node);
@@ -671,6 +741,9 @@ function MarkdownCodeBlock({
 
   return (
     <div
+      // The fence's own chrome, not just its code: a title bar and copy/wrap
+      // controls that read left-to-right regardless of the prose around them.
+      dir="ltr"
       className="chat-markdown-codeblock my-[0.65rem] overflow-hidden rounded-[var(--radius)] border border-border/70 bg-secondary leading-snug dark:border-transparent dark:bg-input/32"
       data-language={language}
       data-wrap={wrapped ? "true" : "false"}
@@ -1301,6 +1374,10 @@ const MarkdownFileLink = memo(function MarkdownFileLink({
       <TooltipTrigger
         render={
           <a
+            // A path is an identifier, so it reads left-to-right wherever the
+            // prose around it points. The `code` renderer swaps this chip in for
+            // the `<code dir="ltr">` it replaces, so the pin has to live here too.
+            dir="ltr"
             href={href}
             className={cn(CHAT_FILE_TAG_CHIP_CLASS_NAME, MARKDOWN_FILE_LINK_CLASS_NAME, className)}
             data-markdown-copy={copyMarkdown}
@@ -1570,7 +1647,7 @@ function ChatMarkdown({
         // Not a <blockquote>: the stylesheet mutes those, and an alert's body is ordinary
         // text under a colored title — which is how the host renders it.
         return (
-          <div role="note" className={cn("my-1 border-l-2 pl-3", alert.borderClassName)}>
+          <div role="note" className={cn("my-1 border-s-2 ps-3", alert.borderClassName)}>
             <p className={cn("flex items-center gap-1.5 font-medium", alert.titleClassName)}>
               <alert.Icon aria-hidden className="size-3.5 shrink-0" />
               {alert.label}
diff --git a/apps/web/src/components/CommandPalette.logic.ts b/apps/web/src/components/CommandPalette.logic.ts
index 688a8a8ea791..d43014d92787 100644
--- a/apps/web/src/components/CommandPalette.logic.ts
+++ b/apps/web/src/components/CommandPalette.logic.ts
@@ -87,6 +87,12 @@ export interface CommandPaletteItem {
   readonly value: string;
   readonly searchTerms: ReadonlyArray<string>;
   readonly title: ReactNode;
+  /**
+   * `"auto"` for titles that are prose the user or an agent wrote, so they read
+   * in their own direction. Left unset for the rest: this list also holds
+   * command names and file paths, and an identifier keeps the app's direction.
+   */
+  readonly titleDir?: "auto";
   readonly description?: ReactNode;
   readonly threadContentMatch?: CommandPaletteThreadContentMatch;
   readonly timestamp?: string;
@@ -156,6 +162,7 @@ export function buildProjectActionItems(input: {
     value: `${input.valuePrefix}:${project.environmentId}:${project.id}`,
     searchTerms: [project.title, project.workspaceRoot, ...(input.searchTerms?.(project) ?? [])],
     title: project.title,
+    titleDir: "auto",
     description: input.renderDescription?.(project) ?? project.workspaceRoot,
     icon: input.icon(project),
     ...(input.shortcutCommand !== undefined ? { shortcutCommand: input.shortcutCommand } : {}),
@@ -237,6 +244,7 @@ export function buildThreadActionItems<TThread extends BuildThreadActionItemsThr
           contentMatch?.snippet ?? ``,
         ],
         title: thread.title,
+        titleDir: "auto",
         description,
         timestamp: formatRelativeTimeLabel(
           thread.latestUserMessageAt ?? thread.updatedAt ?? thread.createdAt,
diff --git a/apps/web/src/components/CommandPaletteResults.tsx b/apps/web/src/components/CommandPaletteResults.tsx
index bbdbc28b0609..9c12d218df3f 100644
--- a/apps/web/src/components/CommandPaletteResults.tsx
+++ b/apps/web/src/components/CommandPaletteResults.tsx
@@ -74,7 +74,9 @@ function ThreadContentMatch(props: {
       <span className={isUser ? "text-blue-400" : "text-emerald-400"}>
         {isUser ? "You:" : "Agent:"}
       </span>{" "}
-      <HighlightedSearchText text={props.match.snippet} query={props.match.query} />
+      <span dir="auto">
+        <HighlightedSearchText text={props.match.snippet} query={props.match.query} />
+      </span>
     </span>
   );
 }
@@ -136,7 +138,9 @@ function DisabledCommandPaletteResultRow(props: {
         <span className="flex min-w-0 flex-1 flex-col">
           <span className="flex min-w-0 items-center gap-1.5 text-sm text-foreground">
             {props.item.titleLeadingContent}
-            <span className="truncate">{props.item.title}</span>
+            <span dir={props.item.titleDir} className="truncate">
+              {props.item.title}
+            </span>
           </span>
           {props.item.threadContentMatch ? (
             <ThreadContentMatch match={props.item.threadContentMatch} />
@@ -150,7 +154,9 @@ function DisabledCommandPaletteResultRow(props: {
       ) : (
         <span className="flex min-w-0 flex-1 items-center gap-1.5 text-sm text-foreground">
           {props.item.titleLeadingContent}
-          <span className="truncate">{props.item.title}</span>
+          <span dir={props.item.titleDir} className="truncate">
+            {props.item.title}
+          </span>
         </span>
       )}
       {props.item.titleTrailingContent}
@@ -187,7 +193,9 @@ function CommandPaletteResultRow(props: {
         <span className="flex min-w-0 flex-1 flex-col">
           <span className="flex min-w-0 items-center gap-1.5 text-sm text-foreground">
             {props.item.titleLeadingContent}
-            <span className="truncate">{props.item.title}</span>
+            <span dir={props.item.titleDir} className="truncate">
+              {props.item.title}
+            </span>
           </span>
           {props.item.threadContentMatch ? (
             <ThreadContentMatch match={props.item.threadContentMatch} />
@@ -201,7 +209,9 @@ function CommandPaletteResultRow(props: {
       ) : (
         <span className="flex min-w-0 flex-1 items-center gap-1.5 text-sm text-foreground">
           {props.item.titleLeadingContent}
-          <span className="truncate">{props.item.title}</span>
+          <span dir={props.item.titleDir} className="truncate">
+            {props.item.title}
+          </span>
         </span>
       )}
       {props.item.titleTrailingContent}
diff --git a/apps/web/src/components/LegacySidebar.tsx b/apps/web/src/components/LegacySidebar.tsx
index b4f3b5996818..ebbe2244c63a 100644
--- a/apps/web/src/components/LegacySidebar.tsx
+++ b/apps/web/src/components/LegacySidebar.tsx
@@ -718,6 +718,7 @@ export const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThr
           {renamingThreadKey === threadKey ? (
             <input
               ref={handleRenameInputRef}
+              dir="auto"
               className="min-w-0 flex-1 truncate rounded border border-ring bg-transparent px-0.5 text-sm outline-none"
               value={renamingTitle}
               onChange={handleRenameInputChange}
@@ -731,6 +732,7 @@ export const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThr
               <TooltipTrigger
                 render={
                   <span
+                    dir="auto"
                     className="min-w-0 flex-1 truncate text-sm"
                     data-testid={`thread-title-${thread.id}`}
                   >
@@ -738,7 +740,11 @@ export const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThr
                   </span>
                 }
               />
-              <TooltipPopup side="top" className="max-w-80 whitespace-normal leading-tight">
+              <TooltipPopup
+                dir="auto"
+                side="top"
+                className="max-w-80 whitespace-normal leading-tight"
+              >
                 {thread.title}
               </TooltipPopup>
             </Tooltip>
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index a88bc9ce4bb7..2dafcd8c69a2 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -290,10 +290,13 @@ function SidebarThreadTooltip({
       align="start"
       sideOffset={4}
       variant="glass"
-      className="max-w-80 text-left whitespace-normal [&_[data-slot=tooltip-viewport]]:p-0"
+      className="max-w-80 text-start whitespace-normal [&_[data-slot=tooltip-viewport]]:p-0"
     >
       <div className="flex min-w-0 max-w-80 flex-col gap-2 p-[var(--floating-content-inset)]">
-        <div className="min-w-0 truncate text-xs leading-none font-medium text-foreground">
+        <div
+          dir="auto"
+          className="min-w-0 truncate text-xs leading-none font-medium text-foreground"
+        >
           {thread.title}
         </div>
         <div className="grid gap-1.5 pl-0.5 text-xs text-muted-foreground">
@@ -305,7 +308,9 @@ function SidebarThreadTooltip({
                 faviconPath={projectFaviconPath}
                 className="size-3 shrink-0 stroke-muted-foreground"
               />
-              <div className="min-w-0 truncate text-foreground/75">{projectTitle}</div>
+              <div dir="auto" className="min-w-0 truncate text-foreground/75">
+                {projectTitle}
+              </div>
             </div>
           ) : null}
           {environmentLabel ? (
@@ -537,7 +542,10 @@ const SidebarDraftRow = memo(function SidebarDraftRow(props: {
               faviconPath={props.projectFaviconPath}
               className="size-4 shrink-0"
             />
-            <span className="min-w-0 flex-1 truncate text-xs font-medium text-secondary-label">
+            <span
+              dir="auto"
+              className="min-w-0 flex-1 truncate text-xs font-medium text-secondary-label"
+            >
               {props.projectTitle}
             </span>
             <span className="ml-auto flex h-5 min-w-5 shrink-0 items-center justify-end">
@@ -558,7 +566,9 @@ const SidebarDraftRow = memo(function SidebarDraftRow(props: {
               </Tooltip>
             </span>
           </div>
-          <div className="mt-0.5 truncate text-sm font-medium text-foreground/90">{preview}</div>
+          <div dir="auto" className="mt-0.5 truncate text-sm font-medium text-foreground/90">
+            {preview}
+          </div>
         </div>
       </div>
     </li>
@@ -1116,6 +1126,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
   const title = isRenaming ? (
     <input
       autoFocus
+      dir="auto"
       value={renamingTitle}
       aria-label="Thread title"
       onChange={(event) => onRenameTitleChange(event.target.value)}
@@ -1128,6 +1139,9 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
     />
   ) : (
     <span
+      // Titles are generated from the thread's own prompt, so an Arabic thread
+      // gets an Arabic title — and its truncation ellipsis belongs on the left.
+      dir="auto"
       className={cn(
         "min-w-0 flex-1 text-sm transition-opacity motion-reduce:transition-none",
         shouldRecede ? "font-normal" : "font-medium",
@@ -1378,6 +1392,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
               />
               {props.projectTitle ? (
                 <span
+                  dir="auto"
                   className={cn(
                     "min-w-0 flex-1 truncate text-secondary-label text-xs",
                     shouldRecede ? "font-normal" : "font-medium",
@@ -1676,7 +1691,9 @@ const SidebarSearchResultRow = memo(function SidebarSearchResultRow(props: {
             className="size-4 shrink-0"
             fallbackIcon={MessageSquareIcon}
           />
-          <span className="min-w-0 flex-1 truncate">{thread.title}</span>
+          <span dir="auto" className="min-w-0 flex-1 truncate">
+            {thread.title}
+          </span>
           <span className="shrink-0 text-xs text-muted-foreground/55 tabular-nums">
             {threadTimeLabel(thread)}
           </span>
diff --git a/apps/web/src/components/chat/ChatHeader.tsx b/apps/web/src/components/chat/ChatHeader.tsx
index d032b16a186b..38008344477e 100644
--- a/apps/web/src/components/chat/ChatHeader.tsx
+++ b/apps/web/src/components/chat/ChatHeader.tsx
@@ -253,7 +253,9 @@ export const ChatHeader = memo(function ChatHeader({
                     faviconPath={activeProjectFaviconPath}
                     className="size-3.5"
                   />
-                  <span className="max-w-40 truncate">{activeProjectName}</span>
+                  <span dir="auto" className="max-w-40 truncate">
+                    {activeProjectName}
+                  </span>
                 </TooltipTrigger>
                 <TooltipPopup side="top">New thread in {activeProjectName}</TooltipPopup>
               </Tooltip>
@@ -265,6 +267,7 @@ export const ChatHeader = memo(function ChatHeader({
           {renamingTitle !== null ? (
             <input
               autoFocus
+              dir="auto"
               aria-label="Thread title"
               className="min-w-0 flex-1 rounded-sm bg-transparent text-sm font-medium text-foreground outline-none ring-1 ring-ring/50 focus:ring-ring"
               defaultValue={renamingTitle}
@@ -289,24 +292,30 @@ export const ChatHeader = memo(function ChatHeader({
                   />
                 }
               >
-                <h2 className="min-w-0 truncate">{activeThreadTitle}</h2>
+                <h2 dir="auto" className="min-w-0 truncate">
+                  {activeThreadTitle}
+                </h2>
                 <ChevronDownIcon
                   aria-hidden
                   className="size-3.5 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover/thread-title:opacity-100 group-focus-visible/thread-title:opacity-100"
                 />
               </TooltipTrigger>
-              <TooltipPopup side="top">{activeThreadTitle}</TooltipPopup>
+              <TooltipPopup dir="auto" side="top">
+                {activeThreadTitle}
+              </TooltipPopup>
             </Tooltip>
           ) : (
             <Tooltip>
               <TooltipTrigger
                 render={
-                  <h2 aria-label={activeThreadTitle} className="min-w-0 flex-1 truncate">
+                  <h2 dir="auto" aria-label={activeThreadTitle} className="min-w-0 flex-1 truncate">
                     {activeThreadTitle}
                   </h2>
                 }
               />
-              <TooltipPopup side="top">{activeThreadTitle}</TooltipPopup>
+              <TooltipPopup dir="auto" side="top">
+                {activeThreadTitle}
+              </TooltipPopup>
             </Tooltip>
           )}
         </WorkspaceBreadcrumbItem>
diff --git a/apps/web/src/components/chat/MessagesTimeline.test.tsx b/apps/web/src/components/chat/MessagesTimeline.test.tsx
index ea6cda9b6208..2c2945fd6750 100644
--- a/apps/web/src/components/chat/MessagesTimeline.test.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.test.tsx
@@ -607,7 +607,9 @@ describe("MessagesTimeline", () => {
       />,
     );
 
-    expect(markup).toContain('<code data-inline-code="">&lt;tag attr=&quot;x&quot;&gt;</code>');
+    expect(markup).toContain(
+      '<code data-inline-code="" dir="ltr">&lt;tag attr=&quot;x&quot;&gt;</code>',
+    );
     expect(markup).toContain("&lt;root&gt;&lt;child enabled=&quot;true&quot; /&gt;&lt;/root&gt;");
   });
 
diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx
index 6d89140d1105..bab72e696583 100644
--- a/apps/web/src/components/chat/MessagesTimeline.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.tsx
@@ -1962,7 +1962,10 @@ const UserMessageBody = memo(function UserMessageBody(props: {
         }
 
         return (
-          <div className="whitespace-pre-wrap wrap-break-word text-message-foreground text-sm leading-relaxed">
+          <div
+            dir="auto"
+            className="whitespace-pre-wrap wrap-break-word text-message-foreground text-sm leading-relaxed"
+          >
             {inlineNodes}
           </div>
         );
@@ -2001,6 +2004,9 @@ const UserMessageBody = memo(function UserMessageBody(props: {
     }
 
     return (
+      // No `dir` here: the terminal-context chips always come first, so the
+      // wrapper could only ever resolve from their label. The message text below
+      // them is markdown, and each of its blocks picks its own direction.
       <div className="whitespace-pre-wrap wrap-break-word text-message-foreground text-sm leading-relaxed">
         {inlineNodes}
       </div>
@@ -2043,7 +2049,7 @@ function UserMessageReviewCommentCard({ comment }: { comment: ReviewCommentConte
         </div>
       </div>
       {comment.text.length > 0 && (
-        <div className="whitespace-pre-wrap wrap-break-word text-sm">
+        <div dir="auto" className="whitespace-pre-wrap wrap-break-word text-sm">
           <SkillInlineText text={comment.text} skills={ctx.skills} />
         </div>
       )}
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 71f9443f7f62..7e75b984a512 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -2034,7 +2034,9 @@ code {
      custom property, so without this a task-list under a 3+ digit ordered
      list would inherit the outer gutter instead of its own default. */
   --list-gutter: 1.25rem;
-  padding-left: 1.25rem;
+  /* Logical, because a list whose text is Arabic or Hebrew carries dir="auto"
+     and paints its markers on the right — the gutter has to move with them. */
+  padding-inline-start: 1.25rem;
   list-style-type: disc;
 }
 
@@ -2045,7 +2047,7 @@ code {
    nested ol without its own widened marker doesn't inherit the outer one. */
 .chat-markdown ol {
   --list-gutter: 1.25rem;
-  padding-left: var(--list-gutter, 1.25rem);
+  padding-inline-start: var(--list-gutter, 1.25rem);
   list-style-type: decimal;
 }
 
@@ -2075,7 +2077,8 @@ code {
 }
 
 .chat-markdown li.task-list-item input[type="checkbox"] {
-  margin: 0 0.35em 0.15em calc(-1 * var(--list-gutter, 1.25rem));
+  margin: 0 0 0.15em;
+  margin-inline: calc(-1 * var(--list-gutter, 1.25rem)) 0.35em;
   vertical-align: middle;
 }
 
@@ -2099,8 +2102,8 @@ code {
 }
 
 .chat-markdown blockquote {
-  border-left: 2px solid var(--border);
-  padding-left: 0.8rem;
+  border-inline-start: 2px solid var(--border);
+  padding-inline-start: 0.8rem;
   color: var(--muted-foreground);
 }
 
@@ -2114,7 +2117,7 @@ code {
 
 .chat-markdown section[data-footnotes] ol {
   margin: 0;
-  padding-left: 1.25rem;
+  padding-inline-start: 1.25rem;
 }
 
 .chat-markdown section[data-footnotes] li + li {
@@ -2226,7 +2229,9 @@ code {
 .chat-markdown th,
 .chat-markdown td {
   padding: 0.45rem 0.75rem;
-  text-align: left;
+  /* Logical: the table is pinned LTR so its columns keep their source order,
+     but each cell carries dir="auto" and aligns to its own text. */
+  text-align: start;
 }
 
 .chat-markdown thead th {