fix(intelligence): make workflow-run approval modal opaque (#3951)

app/src/components/intelligence/WorkflowRunApprovalCard.test.tsx

@@ -78,6 +78,23 @@ describe('WorkflowRunApprovalCard', () => {
     expect(onCancel).toHaveBeenCalledTimes(1);
   });
 
+  it('uses an opaque warning surface so thread text does not show through (#3783)', () => {
+    render(
+      <WorkflowRunApprovalCard
+        definition={def()}
+        reasons={['high_children']}
+        onApprove={vi.fn()}
+        onCancel={vi.fn()}
+      />
+    );
+    const card = screen.getByTestId('workflow-approval-card');
+    expect(card).toHaveClass('bg-amber-50');
+    expect(card).toHaveClass('dark:bg-amber-950');
+    // No fractional-opacity background that would let thread text bleed through.
+    expect(card.className).not.toMatch(/\bbg-[^\s/]+\/\d+/);
+    expect(card.className).not.toMatch(/\bdark:bg-[^\s/]+\/\d+/);
+  });
+
   it('disables both buttons and shows the starting label while a start is in flight', () => {
     render(
       <WorkflowRunApprovalCard

app/src/components/intelligence/WorkflowRunApprovalCard.tsx

@@ -62,7 +62,7 @@ export const WorkflowRunApprovalCard: React.FC<Props> = ({
       role="alertdialog"
       aria-label={t('orchestration.approval.title')}
       data-testid="workflow-approval-card"
-      className="rounded-xl border border-amber-300 bg-amber-50 p-4 text-sm dark:border-amber-500/40 dark:bg-amber-500/10">
+      className="rounded-xl border border-amber-300 bg-amber-50 p-4 text-sm shadow-sm dark:border-amber-700 dark:bg-amber-950">
       <div className="flex items-start gap-2">
         <span aria-hidden className="text-base leading-none">
           ⚠️