From d10386074323f4eb75530a82f5af39cbe37a393c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ho=CC=82=CC=80ng=20Cu=CC=81c=20Le=CC=82=20Thi=CC=A3?=
 <cuclth2701@gmail.com>
Date: Tue, 26 May 2026 14:19:11 +0700
Subject: [PATCH 1/2] enhace mobile view

---
 .DS_Store                                     | Bin 10244 -> 8196 bytes
 collab-guard/README.md                        |  26 +-
 collab-guard/devvit.json                      |  14 +-
 collab-guard/package.json                     |   2 +-
 .../src/client/components/AutoModBuilder.tsx  | 632 ++++++++-----
 .../src/client/components/Sidebar.tsx         | 161 +++-
 .../src/client/components/SidebarLayout.tsx   |  63 +-
 .../src/client/components/ThemeToggle.tsx     |  43 +-
 collab-guard/src/client/components/TopBar.tsx | 376 +++++---
 .../ai-activity/AiModToolActivityPage.tsx     |  19 +-
 .../components/collab-queue-dashboard.tsx     | 871 ++++++++++--------
 .../consensus-review/ConsensusReviewPanel.tsx |  22 +-
 .../src/client/components/dashboard-queue.ts  |  10 +
 .../components/queue/QueueFilterBar.tsx       |  40 +-
 .../settings/AiModToolOnboardingBanner.tsx    |   2 +-
 .../components/settings/SettingsPage.tsx      |  72 +-
 .../settings/SettingsSectionNav.tsx           |  77 +-
 .../sections/AiModToolActivityFeed.tsx        |  25 +-
 .../settings/sections/AiModToolSettings.tsx   | 140 ++-
 .../sections/CoreSettingsSections.tsx         | 102 +-
 .../settings/sections/GentleNudgeSettings.tsx |  23 +-
 .../components/shared/CaseActionBar.tsx       |   4 +-
 .../src/client/components/shared/index.ts     |  17 +
 .../client/components/shared/page-layout.tsx  |  81 ++
 .../src/client/entries/game/index.html        |   4 +-
 .../src/client/entries/splash/index.html      |   4 +-
 .../src/client/entries/splash/index.tsx       |  30 +-
 collab-guard/src/client/hooks/index.ts        |   1 +
 .../src/client/hooks/use-media-query.ts       |  25 +
 collab-guard/src/client/index.css             |  14 +
 collab-guard/src/server/agent/ai-config.ts    |  21 +-
 .../src/server/agent/call-structured.ts       |   3 +-
 .../src/server/core/ai-content-score.ts       |   2 +-
 collab-guard/src/server/core/ai-keys.test.ts  |  38 +
 collab-guard/src/server/core/ai-keys.ts       |  63 ++
 collab-guard/src/server/core/ai-mod-check.ts  |   2 +-
 collab-guard/src/server/core/ai-tldr.ts       |   2 +-
 collab-guard/src/server/core/menu.ts          |  44 +
 collab-guard/src/server/routes/api.ts         |   2 +-
 collab-guard/src/server/routes/forms.ts       |  52 ++
 collab-guard/src/server/routes/menu.ts        |  68 ++
 collab-guard/src/shared/app-meta.ts           |   2 +-
 42 files changed, 2118 insertions(+), 1081 deletions(-)
 create mode 100644 collab-guard/src/client/components/shared/page-layout.tsx
 create mode 100644 collab-guard/src/client/hooks/use-media-query.ts
 create mode 100644 collab-guard/src/server/core/ai-keys.test.ts
 create mode 100644 collab-guard/src/server/core/ai-keys.ts

diff --git a/.DS_Store b/.DS_Store
index a484cc31dafa51338ec33a3be5ca44ff775e208d..edc31540571da7e1d85f394a72c901a1e3bb7a60 100644
GIT binary patch
delta 120
zcmZn(XmOBWU|?W$DortDU;r^WfEYvza8E20o2aMAsI)O)H$S7&W*&iHrpZ4=Bq!ez
zxxSfG>;mKDdI_VAW!snpnSsiIK!O`cxPo+UEd0(qnO`N4gArmL!{m6Lsgt*hD?zku
GW&!{RsvDL7

literal 10244
zcmeHM&1(}u6n|S&O>I%pi(lAK5k#<B(UVA1O~rs8rLCY|+9qk!)NQu*Ly96s@!&=A
z<Kjuhi{M4^Ceot_o(ok`@DI?V;7R?xneFDy?nVnOqA~-!FWGtT&F}r@y~)mmh@68{
zg*KuT5hZc4T+@VGOyhpOBCXDUvLDicJyDq^X(H=-`J5Zkwht@=mI2FvWxz6E8TcC*
zz;8CUWTTe$ZW*u)SOx+HczsCWVwv`3MN74G;HI_!kO@3i4WF?OP&O%FrhQq_QklZ1
z-aR<JspD@k9Bq#N6stp~eOb{`o0Fr>$?->a{2hv;Mu%NWsgsk|(%vltmVqb(ymwzg
ztu#PI8kGBYFNYp3rh~Xzf2f8}5pB2F)|2-}$5bD^NJlkBy-X(ODu2nD+3WRN-oEaL
z(<&@LYiwAIw(Jw!VEt$X_7Y9%bB6%;bM#5vfu4c5dF@^4Lt_2@=;@Km?-ka-cGRn)
zjO#b>?dykY#je6f!!$)X6Q$Dv4T+NHLTDRU>Da5NKZ*Es+tbSrW&?JGABnrRmVurs
z7>rg1cuK%kCXdExFciZb=*bxBVRIHUGESbUS;vcZ4NWuBmaotheq@x}?u{Jq=f%*d
z&dleQxrc}56c0kfjIJL8&~hN1L`)vJ^XFFc`BOKJeu>r4m1uX&e0&-9CGlQ*9N;y4
z$T_K{BQfvVdy6r1hMcDf$^&&FJQu23?}w^YXiMDiwJhpSBEK<v;A*?(F*K^gURz6|
z_umWF0k?}fm;mpC$dH{Xjxr4)Uy6uq1U(*=&AcJ5Wf@hIvU1^RfO7CrgvSARE0}hw
zx)x+7d0F@6!#9jqa}3E)IeBw_J^O`zH8U5YFIih(dIl)8*@!oYmikoGd8{m0|G;M+
z_bIMWFgb>5Er$5uN|k&hkU<`-{4?7i_qk4E^(0S3=Pp1m@F97*yQk}ozY>Z5Di3k}
zGH%kVPXi*ER*{vF7o})ss4A66V=N@*rcLelfH_7>qJMYoTH_VH^2cgc<M_3vjA-@p
z6b8myZi%ZF^TsO=Vl!um>(^Oj)bCNs(jn@k<J3c)A#K!!p}mn#U~S;K8bEEh$d9Z)
zS|4T9O!v`I^l`3CD+G|HPp%om=Z4?<oT5?q<FkLxx&jS_JR<81j}6p~cshXS7-TD~
zLv_o)6NW{zvdF+9OTE|`oP<n)l@nm47d}p@r-$*q8_)H3%~+OoOgx-3OX<BZk#}>R
z=Q^0)MFN$nn&{ekeDNM-T3@_<r~Zjf>qX*}%m31OmF1E+qZU3c8QUxamI2FvWnhUJ
z;J1IY6rcZh;{CkF|NlzK-Yf%_f&Y^MCz0vNVB>+q_V|X^alBR&_2c5kdKE2|32v;y
z&l4>1g^%O6^JhHU&5|2Fr+rz`5>L?n_@4oha|8L}ZTJ7`oKEhlgFU?D$?pFt`S0%k
Fe*&<jKSKZj

diff --git a/collab-guard/README.md b/collab-guard/README.md
index 1467ea88..129777f9 100644
--- a/collab-guard/README.md
+++ b/collab-guard/README.md
@@ -125,28 +125,28 @@ If Gentle Nudge is enabled, create a mild low-effort test comment and confirm:
 
 CollabGuard's AI features are advisory by default. They help moderators see what the model reviewed, what it suggested, why a guardrail skipped work, and where a human should make the final call. The AI Activity page reads from the same subreddit-scoped audit log as the rest of the workspace, so demo reviewers do not need terminal logs to understand what happened.
 
-### Provider setup
+### Provider setup (moderators — recommended)
 
-Choose one provider for playtest. Gemini is the default when `AI_PROVIDER` is not set.
+On a subreddit where CollabGuard is installed:
 
-```bash
-npx devvit settings set GEMINI_API_KEY
-# enter: your Gemini API key
+1. Open **mod tools** on the subreddit (⋯ menu).
+2. Choose **Set AI API Keys**.
+3. Select **Gemini** or **OpenAI**, paste the key, confirm write-only storage, and **Save**.
 
-npx devvit settings set OPENAI_API_KEY
-# enter: your OpenAI API key, if using OpenAI instead
+Keys are stored **per subreddit in Redis** (write-only). Other moderators cannot read an existing key; they can only replace it. Then enable features in **Settings → AI Mod Tool** in the dashboard.
 
-npx devvit settings set AI_PROVIDER
-# enter: gemini or openai
+### Provider setup (app developer fallback)
 
-npx devvit settings set AI_VIOLATION_THRESHOLD
-# optional: 0-10 score threshold for high-risk advisory flags, default 7
+Optional global fallback for playtest (shared across installations):
 
+```bash
+npx devvit settings set GEMINI_API_KEY
+npx devvit settings set OPENAI_API_KEY
+npx devvit settings set AI_PROVIDER   # gemini or openai
 npx devvit settings list
-# verify the settings are present
 ```
 
-Do not commit provider keys. Devvit settings are stored by the platform, and the external AI domains are already allow-listed in `devvit.json`.
+Subreddit Redis keys take precedence over Devvit global settings. Do not commit provider keys.
 
 ### Dashboard setup
 
diff --git a/collab-guard/devvit.json b/collab-guard/devvit.json
index c890a0b2..47add98d 100644
--- a/collab-guard/devvit.json
+++ b/collab-guard/devvit.json
@@ -1,6 +1,6 @@
 {
   "$schema": "https://developers.reddit.com/schema/config-file.v1.json",
-  "name": "cook-dev",
+  "name": "collab-guard-v1",
   "post": {
     "dir": "dist/client",
     "entrypoints": {
@@ -84,6 +84,13 @@
         "location": "subreddit",
         "forUserType": "moderator",
         "endpoint": "/internal/menu/open-settings"
+      },
+      {
+        "label": "CollabGuard: Set AI API Keys",
+        "description": "Store a Gemini or OpenAI key for this subreddit (write-only; mods cannot read it back).",
+        "location": "subreddit",
+        "forUserType": "moderator",
+        "endpoint": "/internal/menu/set-ai-api-keys"
       }
     ]
   },
@@ -91,7 +98,8 @@
     "addCaseNote": "/internal/form/add-case-note",
     "sendGentleNudge": "/internal/form/send-gentle-nudge",
     "startConsensusReview": "/internal/form/start-consensus-review",
-    "resolveAndLog": "/internal/form/resolve-and-log"
+    "resolveAndLog": "/internal/form/resolve-and-log",
+    "setAiApiKeys": "/internal/form/set-ai-api-keys"
   },
   "triggers": {
     "onAppInstall": "/internal/triggers/on-app-install",
@@ -180,4 +188,4 @@
   "dev": {
     "subreddit": "ModQueueLab"
   }
-}
+}
\ No newline at end of file
diff --git a/collab-guard/package.json b/collab-guard/package.json
index e4c85528..de76cea5 100644
--- a/collab-guard/package.json
+++ b/collab-guard/package.json
@@ -1,6 +1,6 @@
 {
   "private": true,
-  "name": "cook-dev",
+  "name": "collab-guard-v1",
   "version": "0.0.0",
   "license": "BSD-3-Clause",
   "type": "module",
diff --git a/collab-guard/src/client/components/AutoModBuilder.tsx b/collab-guard/src/client/components/AutoModBuilder.tsx
index e3a1c500..de6905c5 100644
--- a/collab-guard/src/client/components/AutoModBuilder.tsx
+++ b/collab-guard/src/client/components/AutoModBuilder.tsx
@@ -1,6 +1,7 @@
-import { useMemo, useState } from 'react';
+import { useMemo, useState, type ReactNode } from 'react';
 
 import {
+  AUTOMOD_RULE_TEMPLATES,
   generateYaml,
   simulateAutoModRule,
   type AutoModRuleFormConfig,
@@ -17,6 +18,21 @@ const TEMPLATE_LABELS: Record<AutoModRuleTemplate, string> = {
   civility_reminder: 'Civility reminder',
 };
 
+const TEMPLATE_HELP: Record<AutoModRuleTemplate, string> = {
+  new_account_filter: 'Filter or report posts from accounts below a minimum age.',
+  low_karma_filter: 'Filter or report posts from low combined-karma accounts.',
+  high_report_alert: 'Alert moderators when content reaches a report threshold.',
+  required_flair: 'Require post flair or leave a reminder when flair is missing.',
+  banned_domain_filter: 'Filter or report links to disallowed domains.',
+  civility_reminder: 'Leave a constructive reminder when watch phrases appear.',
+};
+
+const SIMULATOR_TEMPLATES = new Set<AutoModRuleTemplate>([
+  'required_flair',
+  'banned_domain_filter',
+  'civility_reminder',
+]);
+
 const DEFAULT_CONFIG: Record<AutoModRuleTemplate, AutoModRuleFormConfig> = {
   new_account_filter: {
     itemType: 'any',
@@ -54,16 +70,6 @@ const DEFAULT_CONFIG: Record<AutoModRuleTemplate, AutoModRuleFormConfig> = {
   },
 };
 
-const TEMPLATE_HELP: Record<AutoModRuleTemplate, string> = {
-  new_account_filter: 'Drafts a conservative age-based participation filter.',
-  low_karma_filter: 'Drafts a conservative karma-based participation filter.',
-  high_report_alert: 'Alerts moderators when content receives enough reports.',
-  required_flair: 'Requires post flair or leaves a reminder for missing flair.',
-  banned_domain_filter: 'Filters or reports links to domains the subreddit disallows.',
-  civility_reminder:
-    'Leaves a non-punitive reminder when configured phrases appear.',
-};
-
 const setConfigValue = (
   config: AutoModRuleFormConfig,
   key: string,
@@ -73,32 +79,54 @@ const setConfigValue = (
   [key]: value,
 });
 
-const SimulatorResult = ({
-  result,
-}: {
-  result: AutoModSimulationResult;
-}) => (
-  <div
-    className={`mt-3 rounded-lg px-3 py-2 text-xs ${
-      result.status === 'match'
-        ? 'bg-amber-50 text-amber-900 dark:bg-amber-950/40 dark:text-amber-100'
-        : result.status === 'unsupported'
-          ? 'bg-muted text-muted-foreground'
-          : 'bg-green-50 text-green-900 dark:bg-green-950/40 dark:text-green-100'
-    }`}
-  >
-    <p className="font-semibold">
-      {result.status === 'match'
-        ? 'Match'
-        : result.status === 'unsupported'
-          ? 'Simulator not available'
-          : 'No match'}
-    </p>
-    <p className="mt-1">{result.explanation}</p>
-    {result.condition && <p className="mt-1">Condition: {result.condition}</p>}
-  </div>
+type FieldProps = {
+  label: string;
+  hint?: string;
+  children: ReactNode;
+};
+
+const Field = ({ label, hint, children }: FieldProps) => (
+  <label className="block">
+    <span className="text-sm font-semibold text-foreground">{label}</span>
+    {hint ? (
+      <span className="mt-0.5 block text-xs text-muted-foreground">{hint}</span>
+    ) : null}
+    <div className="mt-2">{children}</div>
+  </label>
 );
 
+const selectClass =
+  'cg-control w-full border border-input bg-background px-3 py-2 text-sm text-foreground outline-none focus:border-ring';
+
+const textAreaClass =
+  'cg-control w-full border border-input bg-background px-3 py-2 text-sm text-foreground outline-none focus:border-ring';
+
+const SimulatorResult = ({ result }: { result: AutoModSimulationResult }) => {
+  const tone =
+    result.status === 'match'
+      ? 'border-amber-300/50 bg-amber-500/10 text-amber-950 dark:text-amber-100'
+      : result.status === 'unsupported'
+        ? 'border-border bg-muted/40 text-muted-foreground'
+        : 'border-emerald-300/50 bg-emerald-500/10 text-emerald-950 dark:text-emerald-100';
+
+  const title =
+    result.status === 'match'
+      ? 'Match'
+      : result.status === 'unsupported'
+        ? 'Simulator not available'
+        : 'No match';
+
+  return (
+    <div className={`rounded-xl border px-4 py-3 text-sm ${tone}`}>
+      <p className="font-semibold">{title}</p>
+      <p className="mt-1 leading-relaxed">{result.explanation}</p>
+      {result.condition ? (
+        <p className="mt-2 font-mono text-xs opacity-90">Condition: {result.condition}</p>
+      ) : null}
+    </div>
+  );
+};
+
 export const AutoModBuilder = () => {
   const [template, setTemplate] =
     useState<AutoModRuleTemplate>('required_flair');
@@ -108,6 +136,7 @@ export const AutoModBuilder = () => {
   const [sampleText, setSampleText] = useState('');
   const [simulationResult, setSimulationResult] =
     useState<AutoModSimulationResult | null>(null);
+  const [copyState, setCopyState] = useState<'idle' | 'copied' | 'error'>('idle');
 
   const generatedYaml = useMemo(() => {
     try {
@@ -117,10 +146,13 @@ export const AutoModBuilder = () => {
     }
   }, [formConfig, template]);
 
+  const yamlError = generatedYaml.startsWith('Unsupported') || generatedYaml.includes('Unable');
+
   const updateTemplate = (nextTemplate: AutoModRuleTemplate) => {
     setTemplate(nextTemplate);
     setFormConfig(DEFAULT_CONFIG[nextTemplate]);
     setSimulationResult(null);
+    setCopyState('idle');
   };
 
   const updateField = (key: string, value: string | number) => {
@@ -128,220 +160,356 @@ export const AutoModBuilder = () => {
     setSimulationResult(null);
   };
 
-  const commonTargetField = (
-    <label className="block text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-      Target
+  const copyYaml = async () => {
+    if (yamlError) return;
+    try {
+      await navigator.clipboard.writeText(generatedYaml);
+      setCopyState('copied');
+      window.setTimeout(() => setCopyState('idle'), 2000);
+    } catch {
+      setCopyState('error');
+    }
+  };
+
+  const targetField = (
+    <Field label="Target" hint="Which content types this rule applies to.">
       <select
         value={String(formConfig.itemType ?? 'any')}
         onChange={(event) => updateField('itemType', event.target.value)}
-        className="mt-1 w-full rounded-lg border border-input bg-background px-3 py-2 text-sm normal-case tracking-normal text-foreground"
+        className={selectClass}
       >
         <option value="any">Posts and comments</option>
         <option value="submission">Posts only</option>
         <option value="comment">Comments only</option>
       </select>
-    </label>
+    </Field>
   );
 
-  return (
-    <section className="cg-card p-4">
-      <div>
-        <p className="text-sm font-semibold text-foreground">AutoMod Builder</p>
-        <p className="mt-1 text-xs text-muted-foreground">
-          Draft safe AutoModerator YAML. CollabGuard does not apply rules
-          automatically; copy and review before deploying.
-        </p>
-      </div>
+  const actionField = (options: Array<{ value: string; label: string }>) => (
+    <Field label="Action" hint="What AutoModerator should do when the rule matches.">
+      <select
+        value={String(formConfig.action ?? options[0]?.value ?? 'filter')}
+        onChange={(event) => updateField('action', event.target.value)}
+        className={selectClass}
+      >
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    </Field>
+  );
 
-      <div className="mt-4 grid gap-3 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]">
-        <div className="space-y-3">
-          <label className="block text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-            Template
-            <select
-              value={template}
-              onChange={(event) =>
-                updateTemplate(event.target.value as AutoModRuleTemplate)
-              }
-              className="mt-1 w-full rounded-lg border border-input bg-background px-3 py-2 text-sm normal-case tracking-normal text-foreground"
+  const renderTemplateFields = () => {
+    switch (template) {
+      case 'new_account_filter':
+        return (
+          <>
+            {targetField}
+            {actionField([
+              { value: 'filter', label: 'Filter' },
+              { value: 'remove', label: 'Remove' },
+              { value: 'report', label: 'Report' },
+            ])}
+            <Field
+              label="Minimum account age (days)"
+              hint="Accounts younger than this threshold are matched."
             >
-              {Object.entries(TEMPLATE_LABELS).map(([value, label]) => (
-                <option key={value} value={value}>
-                  {label}
-                </option>
-              ))}
-            </select>
-          </label>
-          <p className="rounded-lg bg-muted px-3 py-2 text-xs text-muted-foreground">
-            {TEMPLATE_HELP[template]}
-          </p>
-
-          {template !== 'required_flair' && commonTargetField}
-
-          {template === 'required_flair' && (
-            <>
-              <label className="block text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                Action
-                <select
-                  value={String(formConfig.action ?? 'filter')}
-                  onChange={(event) => updateField('action', event.target.value)}
-                  className="mt-1 w-full rounded-lg border border-input bg-background px-3 py-2 text-sm normal-case tracking-normal text-foreground"
-                >
-                  <option value="filter">Filter</option>
-                  <option value="remove">Remove</option>
-                  <option value="comment_reminder">Comment reminder only</option>
-                </select>
-              </label>
-              <label className="block text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                Exempt flairs
-                <textarea
-                  rows={2}
-                  value={String(formConfig.exemptFlairs ?? '')}
-                  onChange={(event) =>
-                    updateField('exemptFlairs', event.target.value)
-                  }
-                  placeholder="Announcement&#10;Mod Post"
-                  className="mt-1 w-full rounded-lg border border-input bg-background px-3 py-2 text-sm normal-case tracking-normal text-foreground"
-                />
-              </label>
-              <label className="block text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                Reminder message
-                <textarea
-                  rows={2}
-                  value={String(formConfig.commentMessage ?? '')}
-                  onChange={(event) =>
-                    updateField('commentMessage', event.target.value)
-                  }
-                  className="mt-1 w-full rounded-lg border border-input bg-background px-3 py-2 text-sm normal-case tracking-normal text-foreground"
-                />
-              </label>
-            </>
-          )}
+              <input
+                type="number"
+                min={1}
+                max={365}
+                value={Number(formConfig.minAccountAgeDays ?? 7)}
+                onChange={(event) =>
+                  updateField('minAccountAgeDays', Number(event.target.value))
+                }
+                className={selectClass}
+              />
+            </Field>
+          </>
+        );
+      case 'low_karma_filter':
+        return (
+          <>
+            {targetField}
+            {actionField([
+              { value: 'filter', label: 'Filter' },
+              { value: 'remove', label: 'Remove' },
+              { value: 'report', label: 'Report' },
+            ])}
+            <Field
+              label="Minimum combined karma"
+              hint="Accounts below this combined karma are matched."
+            >
+              <input
+                type="number"
+                min={1}
+                max={100000}
+                value={Number(formConfig.minKarma ?? 10)}
+                onChange={(event) => updateField('minKarma', Number(event.target.value))}
+                className={selectClass}
+              />
+            </Field>
+          </>
+        );
+      case 'high_report_alert':
+        return (
+          <>
+            {targetField}
+            {actionField([
+              { value: 'report', label: 'Report to moderators' },
+              { value: 'filter', label: 'Filter' },
+              { value: 'remove', label: 'Remove' },
+            ])}
+            <Field
+              label="Report threshold"
+              hint="Moderators are alerted when reports reach this count."
+            >
+              <input
+                type="number"
+                min={1}
+                max={50}
+                value={Number(formConfig.reportThreshold ?? 3)}
+                onChange={(event) =>
+                  updateField('reportThreshold', Number(event.target.value))
+                }
+                className={selectClass}
+              />
+            </Field>
+          </>
+        );
+      case 'required_flair':
+        return (
+          <>
+            {actionField([
+              { value: 'filter', label: 'Filter' },
+              { value: 'remove', label: 'Remove' },
+              { value: 'comment_reminder', label: 'Comment reminder only' },
+            ])}
+            <Field
+              label="Exempt flairs"
+              hint="One flair per line. Posts with these flairs are ignored."
+            >
+              <textarea
+                rows={3}
+                value={String(formConfig.exemptFlairs ?? '')}
+                onChange={(event) => updateField('exemptFlairs', event.target.value)}
+                placeholder={'Announcement\nMod Post'}
+                className={textAreaClass}
+              />
+            </Field>
+            <Field label="Reminder message">
+              <textarea
+                rows={3}
+                value={String(formConfig.commentMessage ?? '')}
+                onChange={(event) => updateField('commentMessage', event.target.value)}
+                className={textAreaClass}
+              />
+            </Field>
+          </>
+        );
+      case 'banned_domain_filter':
+        return (
+          <>
+            {targetField}
+            {actionField([
+              { value: 'filter', label: 'Filter' },
+              { value: 'remove', label: 'Remove' },
+              { value: 'report', label: 'Report' },
+            ])}
+            <Field
+              label="Banned domains"
+              hint="One domain per line, without https://."
+            >
+              <textarea
+                rows={4}
+                value={String(formConfig.bannedDomains ?? '')}
+                onChange={(event) => updateField('bannedDomains', event.target.value)}
+                placeholder={'example.com\nbad-site.org'}
+                className={textAreaClass}
+              />
+            </Field>
+            <Field label="Optional comment" hint="Shown when the rule matches.">
+              <textarea
+                rows={2}
+                value={String(formConfig.commentMessage ?? '')}
+                onChange={(event) => updateField('commentMessage', event.target.value)}
+                className={textAreaClass}
+              />
+            </Field>
+          </>
+        );
+      case 'civility_reminder':
+        return (
+          <>
+            {targetField}
+            {actionField([
+              { value: 'comment_reminder', label: 'Comment reminder only' },
+              { value: 'report', label: 'Report' },
+              { value: 'filter', label: 'Filter' },
+            ])}
+            <Field label="Watch phrases" hint="One phrase per line. Matching is case-insensitive.">
+              <textarea
+                rows={4}
+                value={String(formConfig.phrases ?? '')}
+                onChange={(event) => updateField('phrases', event.target.value)}
+                placeholder={'idiot\nshut up'}
+                className={textAreaClass}
+              />
+            </Field>
+            <Field label="Reminder message">
+              <textarea
+                rows={3}
+                value={String(formConfig.reminderMessage ?? '')}
+                onChange={(event) => updateField('reminderMessage', event.target.value)}
+                className={textAreaClass}
+              />
+            </Field>
+          </>
+        );
+      default:
+        return null;
+    }
+  };
 
-          {template === 'banned_domain_filter' && (
-            <>
-              <label className="block text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                Action
-                <select
-                  value={String(formConfig.action ?? 'filter')}
-                  onChange={(event) => updateField('action', event.target.value)}
-                  className="mt-1 w-full rounded-lg border border-input bg-background px-3 py-2 text-sm normal-case tracking-normal text-foreground"
-                >
-                  <option value="filter">Filter</option>
-                  <option value="remove">Remove</option>
-                  <option value="report">Report</option>
-                </select>
-              </label>
-              <label className="block text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                Banned domains
-                <textarea
-                  rows={3}
-                  value={String(formConfig.bannedDomains ?? '')}
-                  onChange={(event) =>
-                    updateField('bannedDomains', event.target.value)
-                  }
-                  placeholder="example.com&#10;bad-site.org"
-                  className="mt-1 w-full rounded-lg border border-input bg-background px-3 py-2 text-sm normal-case tracking-normal text-foreground"
-                />
-              </label>
-              <label className="block text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                Optional comment
-                <textarea
-                  rows={2}
-                  value={String(formConfig.commentMessage ?? '')}
-                  onChange={(event) =>
-                    updateField('commentMessage', event.target.value)
-                  }
-                  className="mt-1 w-full rounded-lg border border-input bg-background px-3 py-2 text-sm normal-case tracking-normal text-foreground"
-                />
-              </label>
-            </>
-          )}
+  return (
+    <section className="cg-card overflow-hidden p-0">
+      <header className="border-b border-border px-5 py-4">
+        <p className="text-xs font-semibold uppercase tracking-[0.18em] text-primary">
+          Rule templates
+        </p>
+        <h2 className="mt-1 text-base font-semibold text-foreground">AutoMod Builder</h2>
+        <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
+          Draft conservative AutoModerator YAML for review. CollabGuard never deploys
+          rules automatically — copy, edit, and paste into Reddit mod tools.
+        </p>
+      </header>
 
-          {template === 'civility_reminder' && (
-            <>
-              <label className="block text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                Action
-                <select
-                  value={String(formConfig.action ?? 'comment_reminder')}
-                  onChange={(event) => updateField('action', event.target.value)}
-                  className="mt-1 w-full rounded-lg border border-input bg-background px-3 py-2 text-sm normal-case tracking-normal text-foreground"
-                >
-                  <option value="comment_reminder">Comment reminder only</option>
-                  <option value="report">Report</option>
-                  <option value="filter">Filter</option>
-                </select>
-              </label>
-              <label className="block text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                Watch phrases
-                <textarea
-                  rows={3}
-                  value={String(formConfig.phrases ?? '')}
-                  onChange={(event) => updateField('phrases', event.target.value)}
-                  placeholder="idiot&#10;shut up"
-                  className="mt-1 w-full rounded-lg border border-input bg-background px-3 py-2 text-sm normal-case tracking-normal text-foreground"
-                />
-              </label>
-              <label className="block text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                Reminder message
-                <textarea
-                  rows={2}
-                  value={String(formConfig.reminderMessage ?? '')}
-                  onChange={(event) =>
-                    updateField('reminderMessage', event.target.value)
-                  }
-                  className="mt-1 w-full rounded-lg border border-input bg-background px-3 py-2 text-sm normal-case tracking-normal text-foreground"
-                />
-              </label>
-            </>
-          )}
+      <div className="builder-layout">
+        <aside className="builder-side-panel" aria-label="Rule template picker">
+          <p className="builder-side-panel__label">Choose template</p>
+          <ul className="builder-side-panel__list" role="listbox" aria-label="Templates">
+            {AUTOMOD_RULE_TEMPLATES.map((value) => {
+              const selected = template === value;
+              return (
+                <li key={value}>
+                  <button
+                    type="button"
+                    role="option"
+                    aria-selected={selected}
+                    onClick={() => updateTemplate(value)}
+                    className={
+                      selected
+                        ? 'builder-template-card builder-template-card--active'
+                        : 'builder-template-card'
+                    }
+                  >
+                    <span className="builder-template-card__title">
+                      {TEMPLATE_LABELS[value]}
+                    </span>
+                    <span className="builder-template-card__desc">
+                      {TEMPLATE_HELP[value]}
+                    </span>
+                  </button>
+                </li>
+              );
+            })}
+          </ul>
+        </aside>
 
-          {!['required_flair', 'banned_domain_filter', 'civility_reminder'].includes(
-            template
-          ) && (
-            <p className="rounded-lg bg-muted px-3 py-2 text-xs text-muted-foreground">
-              Existing template preview is available. Simulator support is focused
-              on required flair, banned domains, and civility reminders.
-            </p>
-          )}
-        </div>
+        <div className="builder-stack">
+          <section className="builder-stack__section">
+            <div className="builder-stack__section-head">
+              <div>
+                <h3 className="text-sm font-semibold text-foreground">Rule configuration</h3>
+                <p className="mt-0.5 text-xs text-muted-foreground">
+                  {TEMPLATE_HELP[template]}
+                </p>
+              </div>
+              {!SIMULATOR_TEMPLATES.has(template) ? (
+                <span className="builder-stack__badge">Preview only</span>
+              ) : (
+                <span className="builder-stack__badge builder-stack__badge--live">
+                  Simulator ready
+                </span>
+              )}
+            </div>
+            <div className="builder-stack__fields">{renderTemplateFields()}</div>
+          </section>
 
-        <div className="space-y-3">
-          <label className="block text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-            Generated YAML preview
-            <textarea
-              readOnly
-              rows={12}
-              value={generatedYaml}
-              className="mt-1 w-full rounded-lg border border-input bg-muted/30 px-3 py-2 font-mono text-xs normal-case tracking-normal text-foreground"
-            />
-          </label>
+          <section className="builder-stack__section">
+            <div className="builder-stack__section-head">
+              <div>
+                <h3 className="text-sm font-semibold text-foreground">Generated YAML</h3>
+                <p className="mt-0.5 text-xs text-muted-foreground">
+                  Read-only preview from your current configuration.
+                </p>
+              </div>
+              <button
+                type="button"
+                onClick={() => void copyYaml()}
+                disabled={yamlError}
+                className="cg-btn-outline px-3 py-1.5 text-xs font-medium disabled:opacity-50"
+              >
+                {copyState === 'copied'
+                  ? 'Copied'
+                  : copyState === 'error'
+                    ? 'Copy failed'
+                    : 'Copy YAML'}
+              </button>
+            </div>
+            <pre className="builder-yaml-preview" aria-label="Generated YAML">
+              <code>{generatedYaml}</code>
+            </pre>
+          </section>
 
-          <label className="block text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-            Test sample post or comment
-            <textarea
-              rows={4}
-              value={sampleText}
-              onChange={(event) => setSampleText(event.target.value)}
-              placeholder="Paste sample text. For flair tests, add a line like: flair: Help"
-              className="mt-1 w-full rounded-lg border border-input bg-background px-3 py-2 text-sm normal-case tracking-normal text-foreground"
-            />
-          </label>
-          <button
-            type="button"
-            onClick={() =>
-              setSimulationResult(
-                simulateAutoModRule(template, formConfig, sampleText)
-              )
-            }
-            className="rounded-lg border border-border px-3 py-2 text-sm font-medium hover:bg-muted"
-          >
-            Test Rule
-          </button>
-          {simulationResult && <SimulatorResult result={simulationResult} />}
-          <p className="text-xs text-muted-foreground">
-            Simulator runs locally in your browser. It does not save sample text,
-            call AI, call the server, or deploy AutoMod rules.
-          </p>
+          <section className="builder-stack__section">
+            <div className="builder-stack__section-head">
+              <div>
+                <h3 className="text-sm font-semibold text-foreground">Test rule</h3>
+                <p className="mt-0.5 text-xs text-muted-foreground">
+                  Dry-run locally. Sample text is never saved or sent to a server.
+                </p>
+              </div>
+            </div>
+            <Field
+              label="Sample post or comment"
+              hint='For flair tests, include a line like "flair: Help".'
+            >
+              <textarea
+                rows={4}
+                value={sampleText}
+                onChange={(event) => {
+                  setSampleText(event.target.value);
+                  setSimulationResult(null);
+                }}
+                placeholder="Paste sample text to test this draft rule…"
+                className={textAreaClass}
+              />
+            </Field>
+            <div className="mt-4 flex flex-wrap items-center gap-3">
+              <button
+                type="button"
+                onClick={() =>
+                  setSimulationResult(
+                    simulateAutoModRule(template, formConfig, sampleText)
+                  )
+                }
+                className="cg-btn-primary px-4 py-2 text-sm font-medium"
+              >
+                Run test
+              </button>
+              <p className="text-xs text-muted-foreground">
+                Simulator runs in your browser only. No AI, no AutoMod deployment.
+              </p>
+            </div>
+            {simulationResult ? (
+              <div className="mt-4">
+                <SimulatorResult result={simulationResult} />
+              </div>
+            ) : null}
+          </section>
         </div>
       </div>
     </section>
diff --git a/collab-guard/src/client/components/Sidebar.tsx b/collab-guard/src/client/components/Sidebar.tsx
index 8f077963..c236255e 100644
--- a/collab-guard/src/client/components/Sidebar.tsx
+++ b/collab-guard/src/client/components/Sidebar.tsx
@@ -11,23 +11,60 @@ type SidebarProps = {
   votingCount?: number;
   onlineMods: PresenceEntry[];
   selectedItemId: string | null;
+  /** Drawer overlay on small screens — always expanded, with close control. */
+  variant?: 'desktop' | 'drawer';
+  onClose?: () => void;
 };
 
 /* Lucide-style inline SVGs (24x24, stroke-based, 2px stroke). */
 const NavIcon = ({ id }: { id: NavId }) => {
   const cls = 'h-[18px] w-[18px] shrink-0';
-  const base = { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round' as const, strokeLinejoin: 'round' as const };
+  const base = {
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeWidth: 2,
+    strokeLinecap: 'round' as const,
+    strokeLinejoin: 'round' as const,
+  };
   switch (id) {
     case 'queue':
-      return <svg className={cls} {...base}><path d="M9 6h11M9 12h11M9 18h11"/><path d="M4 6h.01M4 12h.01M4 18h.01"/></svg>;
+      return (
+        <svg className={cls} {...base}>
+          <path d="M9 6h11M9 12h11M9 18h11" />
+          <path d="M4 6h.01M4 12h.01M4 18h.01" />
+        </svg>
+      );
     case 'voting':
-      return <svg className={cls} {...base}><rect x="3" y="3" width="18" height="18" rx="2"/><path d="m9 12 2 2 4-4"/></svg>;
+      return (
+        <svg className={cls} {...base}>
+          <rect x="3" y="3" width="18" height="18" rx="2" />
+          <path d="m9 12 2 2 4-4" />
+        </svg>
+      );
     case 'nudge':
-      return <svg className={cls} {...base}><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>;
+      return (
+        <svg className={cls} {...base}>
+          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+        </svg>
+      );
     case 'insights':
-      return <svg className={cls} {...base}><rect x="3" y="12" width="4" height="9"/><rect x="10" y="7" width="4" height="14"/><rect x="17" y="3" width="4" height="18"/></svg>;
+      return (
+        <svg className={cls} {...base}>
+          <rect x="3" y="12" width="4" height="9" />
+          <rect x="10" y="7" width="4" height="14" />
+          <rect x="17" y="3" width="4" height="18" />
+        </svg>
+      );
     case 'audit':
-      return <svg className={cls} {...base}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="16" y2="17"/></svg>;
+      return (
+        <svg className={cls} {...base}>
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+          <polyline points="14 2 14 8 20 8" />
+          <line x1="8" y1="13" x2="16" y2="13" />
+          <line x1="8" y1="17" x2="16" y2="17" />
+        </svg>
+      );
     case 'ai-activity':
       return (
         <svg className={cls} {...base}>
@@ -36,7 +73,12 @@ const NavIcon = ({ id }: { id: NavId }) => {
         </svg>
       );
     case 'settings':
-      return <svg className={cls} {...base}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>;
+      return (
+        <svg className={cls} {...base}>
+          <circle cx="12" cy="12" r="3" />
+          <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
+        </svg>
+      );
   }
 };
 
@@ -47,48 +89,91 @@ export const Sidebar = ({
   votingCount,
   onlineMods,
   selectedItemId,
+  variant = 'desktop',
+  onClose,
 }: SidebarProps) => {
+  const isDrawer = variant === 'drawer';
   const [isCollapsed, setIsCollapsed] = useState(false);
+  const collapsed = !isDrawer && isCollapsed;
+
+  const handleNavigate = (id: NavId): void => {
+    onNavigate(id);
+    onClose?.();
+  };
 
   return (
     <aside
-      className={`flex h-screen shrink-0 flex-col overflow-y-auto border-r border-border bg-background transition-[width] duration-200 ${
-        isCollapsed ? 'w-[60px]' : 'w-[220px]'
+      className={`flex h-full shrink-0 flex-col overflow-y-auto border-r border-border bg-background transition-[width] duration-200 ${
+        isDrawer ? 'w-[min(280px,88vw)]' : collapsed ? 'w-[60px]' : 'w-[220px]'
       }`}
     >
-      {/* Brand row */}
-      <div className={`flex items-center border-b border-border px-3 py-4 ${isCollapsed ? 'justify-center' : 'justify-between'}`}>
-        {!isCollapsed && (
-          <div className="flex items-center gap-2.5 overflow-hidden">
+      <div
+        className={`flex items-center border-b border-border px-3 py-4 ${
+          collapsed ? 'justify-center' : 'justify-between'
+        }`}
+      >
+        {!collapsed && (
+          <div className="flex min-w-0 items-center gap-2.5 overflow-hidden">
             <span
               className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg"
               style={{ background: 'var(--primary)' }}
             >
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" width={16} height={16} className="text-primary-foreground">
-                <path d="M12 2 4 5v6c0 5 3.5 9.5 8 11 4.5-1.5 8-6 8-11V5l-8-3z"/>
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth={2}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                width={16}
+                height={16}
+                className="text-primary-foreground"
+              >
+                <path d="M12 2 4 5v6c0 5 3.5 9.5 8 11 4.5-1.5 8-6 8-11V5l-8-3z" />
               </svg>
             </span>
-            <span className="whitespace-nowrap text-base font-medium text-foreground">CollabGuard</span>
+            <span className="truncate text-base font-medium text-foreground">CollabGuard</span>
           </div>
         )}
-        <button
-          onClick={() => setIsCollapsed(!isCollapsed)}
-          aria-label={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-          className="shrink-0 rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-secondary/40 hover:text-foreground"
-        >
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
-               strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"
-               width={16} height={16}>
-            {isCollapsed ? (
-              <polyline points="9 18 15 12 9 6"/>
-            ) : (
-              <polyline points="15 18 9 12 15 6"/>
-            )}
-          </svg>
-        </button>
+        {isDrawer ? (
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="Close navigation menu"
+            className="shrink-0 rounded-md p-2 text-muted-foreground transition-colors hover:bg-secondary/40 hover:text-foreground"
+          >
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} width={18} height={18}>
+              <line x1="18" y1="6" x2="6" y2="18" />
+              <line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
+          </button>
+        ) : (
+          <button
+            type="button"
+            onClick={() => setIsCollapsed(!isCollapsed)}
+            aria-label={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+            className="shrink-0 rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-secondary/40 hover:text-foreground"
+          >
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              width={16}
+              height={16}
+            >
+              {isCollapsed ? (
+                <polyline points="9 18 15 12 9 6" />
+              ) : (
+                <polyline points="15 18 9 12 15 6" />
+              )}
+            </svg>
+          </button>
+        )}
       </div>
 
-      {/* Nav */}
       <nav className="flex flex-col py-2" aria-label="Primary">
         {NAV_ITEMS.map((item) => {
           const active = currentPage === item.id;
@@ -111,21 +196,21 @@ export const Sidebar = ({
             );
           }
 
-          const layoutCls = isCollapsed ? 'w-full justify-center px-0' : 'gap-3 px-5 text-left';
+          const layoutCls = collapsed ? 'w-full justify-center px-0' : 'gap-3 px-5 text-left';
 
           return (
             <button
               key={item.id}
               type="button"
-              onClick={() => onNavigate(item.id)}
+              onClick={() => handleNavigate(item.id)}
               className={
                 active
-                  ? `flex items-center border-l-2 border-primary py-2.5 text-sm font-medium text-primary ${layoutCls}`
-                  : `flex items-center border-l-2 border-transparent py-2.5 text-sm text-muted-foreground transition-colors hover:bg-secondary/40 hover:text-foreground ${layoutCls}`
+                  ? `flex min-h-11 items-center border-l-2 border-primary py-2.5 text-sm font-medium text-primary ${layoutCls}`
+                  : `flex min-h-11 items-center border-l-2 border-transparent py-2.5 text-sm text-muted-foreground transition-colors hover:bg-secondary/40 hover:text-foreground ${layoutCls}`
               }
             >
               <NavIcon id={item.id} />
-              {!isCollapsed && (
+              {!collapsed && (
                 <>
                   <span className="flex-1">{item.label}</span>
                   {badge}
@@ -136,7 +221,7 @@ export const Sidebar = ({
         })}
       </nav>
 
-      {!isCollapsed && (
+      {!collapsed && (
         <div className="mt-auto">
           <ActiveModerators moderators={onlineMods} selectedItemId={selectedItemId} />
         </div>
diff --git a/collab-guard/src/client/components/SidebarLayout.tsx b/collab-guard/src/client/components/SidebarLayout.tsx
index 7c89ed32..1dba77ff 100644
--- a/collab-guard/src/client/components/SidebarLayout.tsx
+++ b/collab-guard/src/client/components/SidebarLayout.tsx
@@ -1,6 +1,7 @@
-import { type ReactNode, type RefObject } from 'react';
+import { useEffect, useState, type ReactNode, type RefObject } from 'react';
 
 import type { PresenceEntry } from '../../shared';
+import { useIsMdUp } from '../hooks';
 import type { Theme } from '../hooks/use-theme';
 import { themeCssVars } from '../lib/theme-css-vars';
 import type { NavId } from '../lib/nav-items';
@@ -56,6 +57,17 @@ export const SidebarLayout = ({
   onOpenNotification,
   children,
 }: SidebarLayoutProps) => {
+  const isMdUp = useIsMdUp();
+  const [mobileNavOpen, setMobileNavOpen] = useState(false);
+
+  useEffect(() => {
+    if (isMdUp) setMobileNavOpen(false);
+  }, [isMdUp]);
+
+  useEffect(() => {
+    setMobileNavOpen(false);
+  }, [currentPage]);
+
   return (
     <div
       ref={rootRef}
@@ -64,15 +76,41 @@ export const SidebarLayout = ({
       className={`min-h-screen bg-background text-foreground ${theme === 'dark' ? 'dark' : ''}`}
       data-cg-theme-build="4"
     >
-      <div className="flex h-screen overflow-hidden">
-        <Sidebar
-          currentPage={currentPage}
-          onNavigate={onPageChange}
-          queueCount={queueCount}
-          votingCount={votingCount}
-          onlineMods={onlineMods}
-          selectedItemId={selectedItemId}
-        />
+      <div className="flex h-screen overflow-hidden overflow-x-hidden">
+        {isMdUp && (
+          <Sidebar
+            currentPage={currentPage}
+            onNavigate={onPageChange}
+            queueCount={queueCount}
+            votingCount={votingCount}
+            onlineMods={onlineMods}
+            selectedItemId={selectedItemId}
+            variant="desktop"
+          />
+        )}
+
+        {!isMdUp && mobileNavOpen && (
+          <>
+            <button
+              type="button"
+              aria-label="Close navigation menu"
+              className="fixed inset-0 z-40 bg-black/50"
+              onClick={() => setMobileNavOpen(false)}
+            />
+            <div className="fixed inset-y-0 left-0 z-50 flex shadow-xl">
+              <Sidebar
+                currentPage={currentPage}
+                onNavigate={onPageChange}
+                queueCount={queueCount}
+                votingCount={votingCount}
+                onlineMods={onlineMods}
+                selectedItemId={selectedItemId}
+                variant="drawer"
+                onClose={() => setMobileNavOpen(false)}
+              />
+            </div>
+          </>
+        )}
 
         <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
           <TopBar
@@ -91,11 +129,10 @@ export const SidebarLayout = ({
             onBackToQueue={onBackToQueue ?? (() => undefined)}
             notifications={notifications}
             onOpenNotification={onOpenNotification}
+            onOpenNav={!isMdUp ? () => setMobileNavOpen(true) : undefined}
           />
 
-          <main className="flex-1 overflow-y-auto">
-            {children}
-          </main>
+          <main className="min-w-0 flex-1 overflow-x-hidden overflow-y-auto">{children}</main>
         </div>
       </div>
     </div>
diff --git a/collab-guard/src/client/components/ThemeToggle.tsx b/collab-guard/src/client/components/ThemeToggle.tsx
index 57218e4f..30c6c449 100644
--- a/collab-guard/src/client/components/ThemeToggle.tsx
+++ b/collab-guard/src/client/components/ThemeToggle.tsx
@@ -2,30 +2,51 @@ type ThemeToggleProps = {
   theme: 'light' | 'dark';
   onLight: () => void;
   onDark: () => void;
+  compact?: boolean;
 };
 
-export const ThemeToggle = ({ theme, onLight, onDark }: ThemeToggleProps) => {
+export const ThemeToggle = ({ theme, onLight, onDark, compact }: ThemeToggleProps) => {
   const isDark = theme === 'dark';
   const handleClick = () => (isDark ? onLight() : onDark());
+  const size = compact ? 16 : 18;
 
   return (
     <button
+      type="button"
       onClick={handleClick}
       aria-label={isDark ? 'Switch to light theme' : 'Switch to dark theme'}
-      className="p-2 rounded-md text-muted-foreground hover:text-foreground hover:bg-secondary/40 transition-colors"
+      className={
+        compact
+          ? 'inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md p-0 text-muted-foreground transition-colors hover:bg-secondary/40 hover:text-foreground'
+          : 'rounded-md p-2 text-muted-foreground transition-colors hover:bg-secondary/40 hover:text-foreground'
+      }
     >
       {isDark ? (
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
-             strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"
-             width={18} height={18}>
-          <circle cx="12" cy="12" r="4"/>
-          <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/>
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          width={size}
+          height={size}
+        >
+          <circle cx="12" cy="12" r="4" />
+          <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
         </svg>
       ) : (
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
-             strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"
-             width={18} height={18}>
-          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          width={size}
+          height={size}
+        >
+          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
         </svg>
       )}
     </button>
diff --git a/collab-guard/src/client/components/TopBar.tsx b/collab-guard/src/client/components/TopBar.tsx
index 07b1668f..b3f95293 100644
--- a/collab-guard/src/client/components/TopBar.tsx
+++ b/collab-guard/src/client/components/TopBar.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import type { Theme } from '../hooks/use-theme';
 import type { NavId } from '../lib/nav-items';
@@ -30,6 +30,17 @@ type TopBarProps = {
   onBackToQueue?: () => void;
   notifications: ModeratorNotification[];
   onOpenNotification: (notification: ModeratorNotification) => void;
+  onOpenNav?: () => void;
+};
+
+const iconBtn =
+  'inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-secondary/40 hover:text-foreground';
+
+const realtimeDotClass = (status: string): string => {
+  if (status === 'connected') return 'bg-green-500';
+  if (status === 'reconnecting') return 'bg-amber-500';
+  if (status === 'disconnected') return 'bg-muted-foreground';
+  return 'bg-primary/60';
 };
 
 export const TopBar = ({
@@ -48,6 +59,7 @@ export const TopBar = ({
   onBackToQueue,
   notifications,
   onOpenNotification,
+  onOpenNav,
 }: TopBarProps) => {
   const [notificationsOpen, setNotificationsOpen] = useState(false);
   const initial = username.replace(/^u\//, '').charAt(0).toUpperCase();
@@ -60,60 +72,164 @@ export const TopBar = ({
           ? 'background refresh'
           : 'starting';
 
+  useEffect(() => {
+    if (!notificationsOpen) return undefined;
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setNotificationsOpen(false);
+    };
+    document.addEventListener('keydown', onKeyDown);
+    return () => document.removeEventListener('keydown', onKeyDown);
+  }, [notificationsOpen]);
+
+  const notificationPanel = notificationsOpen ? (
+    <>
+      <button
+        type="button"
+        aria-label="Close notifications"
+        className="fixed inset-0 z-[80] bg-black/40 md:bg-transparent"
+        onClick={() => setNotificationsOpen(false)}
+      />
+      <div
+        role="dialog"
+        aria-label="Moderator notifications"
+        className="fixed inset-x-2 top-11 z-[90] flex max-h-[min(70vh,28rem)] flex-col overflow-hidden rounded-xl border border-border bg-card shadow-2xl md:inset-x-auto md:right-3 md:left-auto md:w-[min(360px,calc(100vw-1.5rem))]"
+      >
+        <div className="border-b border-border px-3 py-2">
+          <div className="flex items-center justify-between gap-2">
+            <div className="min-w-0">
+              <p className="text-sm font-semibold text-foreground">Notifications</p>
+              <p className="truncate text-[11px] text-muted-foreground">
+                Queue and workflow alerts
+              </p>
+            </div>
+            <span className="shrink-0 rounded-full bg-muted px-2 py-0.5 text-[11px] text-muted-foreground">
+              {notifications.length}
+            </span>
+          </div>
+        </div>
+
+        {notifications.length === 0 ? (
+          <div className="px-3 py-4 text-xs text-muted-foreground">
+            No active alerts. Claims, votes, escalations, and audit activity appear here.
+          </div>
+        ) : (
+          <div className="min-h-0 flex-1 overflow-y-auto p-1.5">
+            {notifications.map((notification) => (
+              <button
+                key={notification.id}
+                type="button"
+                onClick={() => {
+                  setNotificationsOpen(false);
+                  onOpenNotification(notification);
+                }}
+                className="w-full rounded-lg px-2.5 py-2 text-left transition hover:bg-muted"
+              >
+                <div className="flex items-start gap-2">
+                  <span
+                    className={`mt-1 h-2 w-2 shrink-0 rounded-full ${
+                      notification.tone === 'warning'
+                        ? 'bg-amber-500'
+                        : notification.tone === 'success'
+                          ? 'bg-green-500'
+                          : 'bg-primary'
+                    }`}
+                  />
+                  <div className="min-w-0 flex-1">
+                    <div className="flex items-start justify-between gap-2">
+                      <p className="text-xs font-medium text-foreground">
+                        {notification.title}
+                      </p>
+                      <span className="shrink-0 text-[10px] text-muted-foreground">
+                        {formatRelativeTime(notification.timestamp)}
+                      </span>
+                    </div>
+                    <p className="mt-0.5 line-clamp-2 text-[11px] leading-snug text-muted-foreground">
+                      {notification.body}
+                    </p>
+                  </div>
+                </div>
+              </button>
+            ))}
+          </div>
+        )}
+
+        <div className="border-t border-border px-3 py-1.5 text-[10px] text-muted-foreground">
+          Read-only shortcuts — no automatic moderation actions.
+        </div>
+      </div>
+    </>
+  ) : null;
+
   return (
-    <header className="flex items-center justify-between gap-4 border-b border-border px-6 py-3.5">
-      {/* Breadcrumb */}
-      {caseDetailMode ? (
-        <div className="flex items-center gap-3 text-sm">
+    <header className="relative z-30 shrink-0 border-b border-border bg-background">
+      {/* Mobile: single compact row */}
+      <div className="flex h-10 items-center gap-1 px-2 md:hidden">
+        {onOpenNav && (
+          <button
+            type="button"
+            onClick={onOpenNav}
+            aria-label="Open navigation menu"
+            className={iconBtn}
+          >
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} width={18} height={18}>
+              <line x1="3" y1="6" x2="21" y2="6" />
+              <line x1="3" y1="12" x2="21" y2="12" />
+              <line x1="3" y1="18" x2="21" y2="18" />
+            </svg>
+          </button>
+        )}
+
+        {caseDetailMode ? (
           <button
             type="button"
             onClick={onBackToQueue}
-            className="inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium text-muted-foreground transition-colors hover:bg-secondary/40 hover:text-foreground"
             aria-label="Back to queue"
+            className={`${iconBtn} w-auto px-1.5`}
           >
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" width={16} height={16}>
-              <line x1="19" y1="12" x2="5" y2="12"/>
-              <polyline points="12 19 5 12 12 5"/>
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2}
+              width={16}
+              height={16}
+            >
+              <line x1="19" y1="12" x2="5" y2="12" />
+              <polyline points="12 19 5 12 12 5" />
             </svg>
-            Back to queue
           </button>
-          <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
-            <span>r/{subredditName}</span>
-            <span>/</span>
-            <span className="font-mono text-xs">{caseDetailItemId ?? '—'}</span>
-          </div>
-        </div>
-      ) : (
-        <div className="flex items-center gap-2 text-sm text-muted-foreground">
-          <span>r/{subredditName}</span>
-          <span>·</span>
-          <span>u/{username}</span>
-          <span>·</span>
-          <span className="inline-flex items-center gap-1">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" width={14} height={14}><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
-            claim timeout {claimTimeoutMinutes}m
-          </span>
-        </div>
-      )}
-
-      {/* Right cluster */}
-      <div className="flex items-center gap-4">
-        <div className="text-right text-xs text-muted-foreground">
-          <p>
-            Realtime:{' '}
-            <span className="font-medium text-foreground">{realtimeLabel}</span>
-          </p>
-          <p>Last queue sync {formatRelativeTime(lastQueueSyncAt)}</p>
-        </div>
+        ) : null}
 
+        <p className="min-w-0 flex-1 truncate text-xs font-medium text-foreground">
+          {caseDetailMode ? (
+            <span className="font-mono text-[11px] text-muted-foreground">
+              {caseDetailItemId ?? 'Case'}
+            </span>
+          ) : (
+            <>
+              <span className="text-foreground">r/{subredditName}</span>
+              <span className="hidden text-muted-foreground min-[380px]:inline">
+                {' '}
+                · u/{username.replace(/^u\//, '')}
+              </span>
+            </>
+          )}
+        </p>
+
+        <span
+          className={`h-2 w-2 shrink-0 rounded-full ${realtimeDotClass(realtimeStatus)}`}
+          title={`Realtime: ${realtimeLabel}`}
+        />
         {onlineModsCount > 0 && (
-          <div className="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
-            <span className="h-2 w-2 rounded-full bg-green-500" />
-            {onlineModsCount} mod{onlineModsCount > 1 ? 's' : ''} online
-          </div>
+          <span
+            className="shrink-0 text-[10px] tabular-nums text-muted-foreground"
+            title={`${onlineModsCount} mod(s) online`}
+          >
+            {onlineModsCount}
+          </span>
         )}
 
-        <ThemeToggle theme={theme} onLight={onLight} onDark={onDark} />
+        <ThemeToggle theme={theme} onLight={onLight} onDark={onDark} compact />
 
         <div className="relative">
           <button
@@ -121,98 +237,114 @@ export const TopBar = ({
             aria-label={`Notifications${notifications.length > 0 ? `, ${notifications.length} active` : ''}`}
             aria-expanded={notificationsOpen}
             onClick={() => setNotificationsOpen((open) => !open)}
-            className="relative rounded-md p-2 text-muted-foreground transition-colors hover:bg-secondary/40 hover:text-foreground"
+            className={`${iconBtn} relative`}
           >
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                 strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"
-                 width={18} height={18}>
-              <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/>
-              <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2}
+              width={16}
+              height={16}
+            >
+              <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
+              <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
             </svg>
             {notifications.length > 0 && (
-              <span className="absolute right-1 top-1 h-2.5 w-2.5 rounded-full border border-background bg-primary" />
+              <span className="absolute right-1 top-1 h-2 w-2 rounded-full border border-background bg-primary" />
             )}
           </button>
-
-          {notificationsOpen && (
-            <div className="absolute right-0 top-11 z-50 w-[360px] max-w-[calc(100vw-2rem)] overflow-hidden rounded-2xl border border-border bg-card shadow-2xl">
-              <div className="border-b border-border px-4 py-3">
-                <div className="flex items-center justify-between gap-3">
-                  <div>
-                    <p className="text-sm font-semibold text-foreground">
-                      Moderator notifications
-                    </p>
-                    <p className="text-xs text-muted-foreground">
-                      Subreddit-scoped queue and workflow alerts.
-                    </p>
-                  </div>
-                  <span className="rounded-full bg-muted px-2 py-1 text-xs text-muted-foreground">
-                    {notifications.length}
-                  </span>
-                </div>
-              </div>
-
-              {notifications.length === 0 ? (
-                <div className="px-4 py-6 text-sm text-muted-foreground">
-                  No active alerts. Claims, votes, escalations, nudges, and audit
-                  activity will appear here when they need moderator attention.
-                </div>
-              ) : (
-                <div className="max-h-[420px] overflow-y-auto p-2">
-                  {notifications.map((notification) => (
-                    <button
-                      key={notification.id}
-                      type="button"
-                      onClick={() => {
-                        setNotificationsOpen(false);
-                        onOpenNotification(notification);
-                      }}
-                      className="w-full rounded-xl px-3 py-3 text-left transition hover:bg-muted"
-                    >
-                      <div className="flex items-start gap-3">
-                        <span
-                          className={`mt-1 h-2.5 w-2.5 shrink-0 rounded-full ${
-                            notification.tone === 'warning'
-                              ? 'bg-amber-500'
-                              : notification.tone === 'success'
-                                ? 'bg-green-500'
-                                : 'bg-primary'
-                          }`}
-                        />
-                        <div className="min-w-0 flex-1">
-                          <div className="flex items-start justify-between gap-3">
-                            <p className="text-sm font-medium text-foreground">
-                              {notification.title}
-                            </p>
-                            <span className="shrink-0 text-[11px] text-muted-foreground">
-                              {formatRelativeTime(notification.timestamp)}
-                            </span>
-                          </div>
-                          <p className="mt-1 text-xs leading-relaxed text-muted-foreground">
-                            {notification.body}
-                          </p>
-                        </div>
-                      </div>
-                    </button>
-                  ))}
-                </div>
-              )}
-
-              <div className="border-t border-border px-4 py-2 text-[11px] text-muted-foreground">
-                Notifications are read-only shortcuts. They do not perform moderation
-                actions by themselves.
-              </div>
-            </div>
-          )}
         </div>
 
         <div
           aria-label={`Signed in as ${username}`}
-          className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-primary text-xs font-medium text-primary-foreground transition-opacity hover:opacity-90"
+          className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-primary text-[10px] font-medium text-primary-foreground"
         >
           {initial}
         </div>
       </div>
+
+      {/* Desktop */}
+      <div className="hidden flex-col gap-3 px-6 py-3.5 md:flex lg:flex-row lg:items-center lg:justify-between">
+        <div className="flex min-w-0 items-center gap-2">
+          {caseDetailMode ? (
+            <div className="flex min-w-0 items-center gap-3">
+              <button
+                type="button"
+                onClick={onBackToQueue}
+                className="inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium text-muted-foreground transition-colors hover:bg-secondary/40 hover:text-foreground"
+              >
+                Back to queue
+              </button>
+              <span className="truncate font-mono text-xs text-muted-foreground">
+                r/{subredditName} / {caseDetailItemId ?? '—'}
+              </span>
+            </div>
+          ) : (
+            <div className="min-w-0 text-sm text-muted-foreground">
+              <p className="truncate font-medium text-foreground">
+                r/{subredditName} · u/{username}
+              </p>
+              <p className="mt-0.5 text-xs">
+                claim timeout {claimTimeoutMinutes}m
+              </p>
+            </div>
+          )}
+        </div>
+
+        <div className="flex flex-wrap items-center gap-4">
+          <div className="text-right text-xs text-muted-foreground">
+            <p>
+              Realtime:{' '}
+              <span className="font-medium text-foreground">{realtimeLabel}</span>
+            </p>
+            <p>Last sync {formatRelativeTime(lastQueueSyncAt)}</p>
+          </div>
+
+          {onlineModsCount > 0 && (
+            <div className="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
+              <span className="h-2 w-2 rounded-full bg-green-500" />
+              {onlineModsCount} mod{onlineModsCount > 1 ? 's' : ''} online
+            </div>
+          )}
+
+          <ThemeToggle theme={theme} onLight={onLight} onDark={onDark} />
+
+          <div className="relative">
+            <button
+              type="button"
+              aria-label={`Notifications${notifications.length > 0 ? `, ${notifications.length} active` : ''}`}
+              aria-expanded={notificationsOpen}
+              onClick={() => setNotificationsOpen((open) => !open)}
+              className={`${iconBtn} relative h-9 w-9`}
+            >
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth={2}
+                width={18}
+                height={18}
+              >
+                <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
+                <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
+              </svg>
+              {notifications.length > 0 && (
+                <span className="absolute right-1 top-1 h-2.5 w-2.5 rounded-full border border-background bg-primary" />
+              )}
+            </button>
+          </div>
+
+          <div
+            aria-label={`Signed in as ${username}`}
+            className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-primary text-xs font-medium text-primary-foreground"
+          >
+            {initial}
+          </div>
+        </div>
+      </div>
+
+      {notificationPanel}
     </header>
   );
 };
diff --git a/collab-guard/src/client/components/ai-activity/AiModToolActivityPage.tsx b/collab-guard/src/client/components/ai-activity/AiModToolActivityPage.tsx
index 6899131d..39285726 100644
--- a/collab-guard/src/client/components/ai-activity/AiModToolActivityPage.tsx
+++ b/collab-guard/src/client/components/ai-activity/AiModToolActivityPage.tsx
@@ -11,23 +11,24 @@ export const AiModToolActivityPage = ({
   onOpenSettings,
   onOpenCase,
 }: AiModToolActivityPageProps) => (
-  <div className="mx-auto max-w-7xl px-6 py-6">
-    <div className="mb-6 flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
-      <div>
-        <p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary">
+  <div className="mx-auto max-w-7xl px-3 py-3 sm:px-6 sm:py-6">
+    <div className="mb-3 flex flex-col gap-2 sm:mb-6 sm:gap-3 lg:flex-row lg:items-start lg:justify-between">
+      <div className="min-w-0">
+        <p className="text-[10px] font-semibold uppercase tracking-[0.16em] text-primary sm:text-xs sm:tracking-[0.2em]">
           AI Mod Tool
         </p>
-        <h1 className="mt-2 text-2xl font-semibold text-foreground">AI activity (live)</h1>
-        <p className="mt-2 max-w-3xl text-sm text-muted-foreground">
-          Mod checks, TL;DR posts, content scores, and skips from the built-in AI pipeline.
-          Events are stored in the subreddit audit log — no playtest terminal required.
+        <h1 className="mt-1 text-lg font-semibold text-foreground sm:mt-2 sm:text-2xl">
+          AI activity (live)
+        </h1>
+        <p className="mt-1 text-xs leading-snug text-muted-foreground sm:mt-2 sm:max-w-3xl sm:text-sm sm:leading-normal">
+          Mod checks, TL;DR, content scores, and skips — stored in the subreddit audit log.
         </p>
       </div>
       {onOpenSettings && (
         <button
           type="button"
           onClick={onOpenSettings}
-          className="shrink-0 rounded-xl border border-border px-3 py-2 text-sm text-foreground hover:bg-muted"
+          className="shrink-0 self-start rounded-lg border border-border px-2.5 py-1.5 text-xs text-foreground hover:bg-muted sm:rounded-xl sm:px-3 sm:py-2 sm:text-sm"
         >
           AI settings
         </button>
diff --git a/collab-guard/src/client/components/collab-queue-dashboard.tsx b/collab-guard/src/client/components/collab-queue-dashboard.tsx
index ebad646d..b2683b17 100644
--- a/collab-guard/src/client/components/collab-queue-dashboard.tsx
+++ b/collab-guard/src/client/components/collab-queue-dashboard.tsx
@@ -81,8 +81,19 @@ import {
   getVoteCase,
   startVote as startVoteRequest,
 } from '../lib';
-import { usePresence, useRealtime, useTheme } from '../hooks';
-import { CaseActionBar, IconRefresh, LoadingState } from './shared';
+import { useIsXlUp, usePresence, useRealtime, useTheme } from '../hooks';
+import {
+  CaseActionBar,
+  IconRefresh,
+  LoadingState,
+  ModulePageHeader,
+  ModulePageShell,
+  modulePageBtnClass,
+  moduleSectionCardClass,
+  moduleSectionTitleClass,
+  moduleStatCardClass,
+  moduleStatValueClass,
+} from './shared';
 import { SidebarLayout } from './SidebarLayout';
 import type { ModeratorNotification } from './TopBar';
 import { NAV_ITEMS, type NavId } from '../lib/nav-items';
@@ -90,6 +101,24 @@ import { NAV_ITEMS, type NavId } from '../lib/nav-items';
 const MAX_NOTE_LENGTH = 2_000;
 
 type QueueToolTab = 'actions' | 'ai' | 'nudge' | 'audit';
+type QueueMobilePane = 'list' | 'workspace';
+
+const QueueItemChevron = () => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={2}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    width={18}
+    height={18}
+    aria-hidden
+    className="text-muted-foreground/80"
+  >
+    <polyline points="9 18 15 12 9 6" />
+  </svg>
+);
 
 const itemIdAliases = (itemId: string): Set<string> => {
   const trimmed = itemId.trim();
@@ -516,6 +545,12 @@ export const CollabQueueDashboard = () => {
   const [lastQueueSyncAt, setLastQueueSyncAt] = useState<number | null>(null);
   const [dashboardDeepLinkApplied, setDashboardDeepLinkApplied] = useState(false);
   const [queueToolTab, setQueueToolTab] = useState<QueueToolTab>('actions');
+  const [queueMobilePane, setQueueMobilePane] = useState<QueueMobilePane>('list');
+  const isXlUp = useIsXlUp();
+
+  useEffect(() => {
+    if (isXlUp) setQueueMobilePane('list');
+  }, [isXlUp]);
 
   const selectedItem = queue.find((item) => item.id === selectedItemId) ?? null;
 
@@ -672,8 +707,9 @@ export const CollabQueueDashboard = () => {
     (itemId: string) => {
       setSelectedItemId(itemId);
       void loadDetails(itemId);
+      if (!isXlUp) setQueueMobilePane('workspace');
     },
-    [loadDetails]
+    [isXlUp, loadDetails]
   );
 
   const openCaseByItemId = useCallback(
@@ -1952,8 +1988,20 @@ export const CollabQueueDashboard = () => {
 
       {currentPage === 'queue' && (
         <>
-      <main className="mx-auto grid w-full max-w-[1580px] gap-4 px-5 py-5 xl:h-full xl:overflow-hidden xl:grid-cols-[minmax(300px,0.36fr)_minmax(380px,0.38fr)_minmax(360px,0.34fr)]">
-        <section className="min-h-0 space-y-4 xl:overflow-y-auto xl:pr-1">
+      <main
+        className={`mx-auto grid w-full min-w-0 max-w-[1580px] gap-2 overflow-x-hidden px-3 py-3 sm:gap-4 sm:px-5 sm:py-5 ${
+          isXlUp
+            ? 'xl:h-full xl:overflow-hidden xl:grid-cols-[minmax(300px,0.36fr)_minmax(380px,0.38fr)_minmax(360px,0.34fr)]'
+            : queueMobilePane === 'workspace'
+              ? 'flex flex-col'
+              : ''
+        }`}
+      >
+        <section
+          className={`min-h-0 min-w-0 max-w-full space-y-2 sm:space-y-4 ${!isXlUp && queueMobilePane !== 'list' ? 'hidden' : ''} ${
+            isXlUp ? 'xl:overflow-y-auto xl:pr-1' : ''
+          }`}
+        >
           {queueError && (
             <div className="rounded-xl border border-destructive/30 bg-destructive/10 p-3 text-sm text-destructive">
               Unable to load the queue right now. {queueError}
@@ -1994,11 +2042,13 @@ export const CollabQueueDashboard = () => {
             onOpenSettings={() => setCurrentPage('settings')}
           />
 
-          <div className="cg-card overflow-hidden">
-            <div className="flex items-start justify-between gap-3 border-b border-border px-4 py-4">
-              <div>
-                <h2 className="text-base font-semibold text-foreground">Active queue items</h2>
-                <p className="mt-0.5 text-xs text-muted-foreground">
+          <div className="cg-card min-w-0 max-w-full overflow-hidden">
+            <div className="flex min-w-0 items-start justify-between gap-2 border-b border-border px-2 py-2 sm:px-4 sm:py-4">
+              <div className="min-w-0">
+                <h2 className="text-sm font-semibold text-foreground sm:text-base">
+                  Active queue items
+                </h2>
+                <p className="mt-0.5 hidden text-xs text-muted-foreground sm:block">
                   Select an item, read the case, then act from the tools panel.
                 </p>
               </div>
@@ -2007,7 +2057,7 @@ export const CollabQueueDashboard = () => {
                 onClick={() => void refreshQueue()}
                 disabled={queueLoading}
                 aria-label="Refresh moderation queue"
-                className="inline-flex shrink-0 items-center gap-2 rounded-xl border border-border bg-muted/50 px-3 py-2 text-xs font-medium text-foreground transition hover:border-primary/40 hover:bg-muted disabled:opacity-50"
+                className="inline-flex shrink-0 items-center gap-1.5 rounded-lg border border-border bg-muted/50 px-2 py-1.5 text-[11px] font-medium text-foreground transition hover:border-primary/40 hover:bg-muted disabled:opacity-50 sm:gap-2 sm:rounded-xl sm:px-3 sm:py-2 sm:text-xs"
               >
                 <IconRefresh
                   className={`h-4 w-4 ${queueLoading ? 'animate-spin' : ''}`}
@@ -2045,7 +2095,7 @@ export const CollabQueueDashboard = () => {
                 the queue.
               </div>
             ) : (
-              <ul className="space-y-2 p-3">
+              <ul className="space-y-1.5 p-2 sm:space-y-2 sm:p-3">
                 {filteredQueue.map((item) => {
                   const selected = item.id === selectedItemId;
                   const hasAIGeneratedTldr =
@@ -2060,52 +2110,58 @@ export const CollabQueueDashboard = () => {
                     <li key={item.id}>
                       <button
                         type="button"
-                        aria-label={`View queue item ${item.targetId}`}
+                        aria-label={`Open queue item ${item.targetId} — case and tools`}
                         onClick={() => selectQueueItemInWorkspace(item.id)}
-                        className={`flex w-full items-start justify-between gap-3 rounded-xl border p-3 text-left transition ${
+                        className={`flex w-full items-center gap-2 rounded-lg border px-2.5 py-2 text-left transition sm:gap-3 sm:rounded-xl sm:p-3 ${
                           selected
                             ? 'border-primary bg-primary/5 shadow-sm'
                             : 'border-border bg-card hover:border-primary/30 hover:bg-muted/50'
                         }`}
                       >
                         <div className="min-w-0 flex-1">
-                          <div className="mb-2 flex flex-wrap items-center gap-2">
+                          <div className="mb-1 flex flex-wrap items-center gap-1 sm:mb-2 sm:gap-2">
                             <StatusBadge status={item.status} />
-                            <span className="rounded-full bg-muted px-2 py-0.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+                            <span className="rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground sm:px-2 sm:text-[11px]">
                               {item.priority}
                             </span>
-                            {item.escalationTags.slice(0, 2).map((tag) => (
+                            {item.escalationTags.slice(0, 1).map((tag) => (
                               <span
                                 key={tag}
-                                className="rounded-full bg-destructive/10 px-2 py-0.5 text-[11px] font-medium text-destructive"
+                                className="rounded-full bg-destructive/10 px-1.5 py-0.5 text-[10px] font-medium text-destructive sm:px-2 sm:text-[11px]"
                               >
                                 {tag}
                               </span>
                             ))}
                             {isStaleClaim(item, Date.now()) && (
-                              <span className="rounded-full bg-warning/10 px-2 py-0.5 text-[11px] font-medium text-warning">
-                                Stale claim
+                              <span className="rounded-full bg-warning/10 px-1.5 py-0.5 text-[10px] font-medium text-warning sm:text-[11px]">
+                                Stale
                               </span>
                             )}
                             {hasAIGeneratedTldr && (
-                              <span className="rounded-full bg-primary/10 px-2 py-0.5 text-[11px] font-semibold text-primary">
-                                AI TL;DR
+                              <span className="rounded-full bg-primary/10 px-1.5 py-0.5 text-[10px] font-semibold text-primary sm:text-[11px]">
+                                AI
                               </span>
                             )}
                           </div>
-                          <p className="truncate text-sm font-semibold text-foreground">
+                          <p className="truncate text-xs font-semibold text-foreground sm:text-sm">
                             u/{item.author}
                           </p>
-                          <p className="mt-1 text-xs text-muted-foreground">
-                            {item.kind} · {item.reportCount} report(s)
+                          <p className="mt-0.5 text-[11px] text-muted-foreground sm:text-xs">
+                            {item.kind} · {item.reportCount} report
+                            {item.reportCount === 1 ? '' : 's'}
+                            {item.claimedBy
+                              ? ` · u/${item.claimedBy}`
+                              : ' · unclaimed'}
                           </p>
-                          <p className="mt-1 line-clamp-2 break-all text-xs text-muted-foreground">
+                          <p className="mt-0.5 hidden truncate text-[11px] text-muted-foreground sm:block sm:text-xs">
                             {item.permalink ?? item.targetId}
                           </p>
                         </div>
-                        <div className="shrink-0 text-right text-xs text-muted-foreground">
-                          <p>{item.claimedBy ? `u/${item.claimedBy}` : 'Unclaimed'}</p>
-                          <p className="mt-1 tabular-nums">{formatTime(item.updatedAt)}</p>
+                        <div className="flex shrink-0 flex-col items-end justify-center gap-0.5">
+                          <span className="text-[10px] tabular-nums text-muted-foreground sm:text-xs">
+                            {formatTime(item.updatedAt)}
+                          </span>
+                          <QueueItemChevron />
                         </div>
                       </button>
                     </li>
@@ -2116,45 +2172,69 @@ export const CollabQueueDashboard = () => {
           </div>
         </section>
 
-        <section className="min-h-0 xl:overflow-y-auto xl:px-1">
+        <section
+          className={`min-h-0 ${!isXlUp && queueMobilePane === 'list' ? 'hidden' : ''} ${
+            isXlUp ? 'xl:overflow-y-auto xl:px-1' : ''
+          }`}
+        >
+          {!isXlUp && queueMobilePane === 'workspace' && (
+            <button
+              type="button"
+              onClick={() => setQueueMobilePane('list')}
+              className="mb-2 inline-flex items-center gap-1 rounded-md px-1 py-1 text-xs font-medium text-muted-foreground transition-colors hover:bg-secondary/40 hover:text-foreground"
+            >
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth={2}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                width={14}
+                height={14}
+                aria-hidden
+              >
+                <line x1="19" y1="12" x2="5" y2="12" />
+                <polyline points="12 19 5 12 12 5" />
+              </svg>
+              Queue
+            </button>
+          )}
+
           {!selectedItem ? (
-            <div className="flex min-h-[460px] items-center justify-center rounded-xl border border-dashed border-border bg-card p-6 text-center text-sm text-muted-foreground">
+            <div className="flex min-h-[120px] items-center justify-center rounded-lg border border-dashed border-border bg-card p-4 text-center text-xs text-muted-foreground xl:min-h-[460px] xl:p-6 xl:text-sm">
               Select a queue item to review its status, permalink, claims, and moderation context.
             </div>
           ) : (
             <section
               ref={selectedItemPanelRef}
               id="collabguard-case-detail"
-              className="scroll-mt-6 rounded-xl border border-border bg-card p-5 shadow-sm"
+              className="scroll-mt-4 rounded-lg border border-border bg-card p-2.5 shadow-sm xl:scroll-mt-6 xl:rounded-xl xl:p-5"
             >
-              <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-                <div className="min-w-0">
-                  <p className="text-xs font-semibold uppercase tracking-[0.18em] text-primary">
+              <div className="flex items-start justify-between gap-2">
+                <div className="min-w-0 flex-1">
+                  <p className="text-[10px] font-semibold uppercase tracking-[0.14em] text-primary xl:text-xs xl:tracking-[0.18em]">
                     Selected item
                   </p>
-                  <h2 className="mt-2 break-all text-xl font-semibold text-foreground">
+                  <h2 className="mt-0.5 truncate text-sm font-semibold text-foreground xl:mt-2 xl:break-all xl:text-xl">
                     {selectedItem.targetId}
                   </h2>
-                  <div className="mt-3 flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
+                  <div className="mt-1 flex flex-wrap items-center gap-1 text-[11px] text-muted-foreground xl:mt-3 xl:gap-2 xl:text-sm">
                     <StatusBadge status={selectedItem.status} />
-                    <span className="rounded-full bg-muted px-2 py-1 text-xs uppercase">
+                    <span className="rounded-full bg-muted px-1.5 py-0.5 text-[10px] uppercase xl:px-2 xl:py-1 xl:text-xs">
                       {selectedItem.priority}
                     </span>
                     <span>u/{selectedItem.author}</span>
-                    <span>·</span>
-                    <span>{selectedItem.kind}</span>
-                    <span>·</span>
+                    <span className="hidden sm:inline">·</span>
+                    <span className="hidden sm:inline">{selectedItem.kind}</span>
+                    <span className="hidden sm:inline">·</span>
                     <span>
-                      {selectedItem.reportCount} report
-                      {selectedItem.reportCount === 1 ? '' : 's'}
+                      {selectedItem.reportCount}r
                     </span>
                     {selectedItemHasAIGeneratedTldr && (
-                      <>
-                        <span>·</span>
-                        <span className="rounded-full bg-primary/10 px-2 py-1 text-xs font-semibold text-primary">
-                          AI TL;DR summary posted
-                        </span>
-                      </>
+                      <span className="rounded-full bg-primary/10 px-1.5 py-0.5 text-[10px] font-semibold text-primary xl:text-xs">
+                        AI TL;DR
+                      </span>
                     )}
                   </div>
                 </div>
@@ -2162,81 +2242,128 @@ export const CollabQueueDashboard = () => {
                   <button
                     type="button"
                     onClick={() => navigateTo(selectedItem.permalink ?? '')}
-                    className="shrink-0 rounded-xl border border-border px-3 py-2 text-sm text-foreground hover:bg-muted"
+                    className="shrink-0 rounded-lg border border-border px-2 py-1 text-[11px] text-foreground hover:bg-muted xl:rounded-xl xl:px-3 xl:py-2 xl:text-sm"
                   >
-                    View on Reddit
+                    Reddit
                   </button>
                 )}
               </div>
 
               {(actionMessage || actionError) && (
-                <div className="mt-4 space-y-2">
+                <div className="mt-2 space-y-1.5 xl:mt-4 xl:space-y-2">
                   {actionMessage && (
-                    <p className="rounded-xl border border-success/30 bg-success/10 px-3 py-2 text-sm text-success">
+                    <p className="rounded-lg border border-success/30 bg-success/10 px-2 py-1.5 text-xs text-success xl:rounded-xl xl:px-3 xl:py-2 xl:text-sm">
                       {actionMessage}
                     </p>
                   )}
                   {actionError && (
-                    <p className="rounded-xl border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+                    <p className="rounded-lg border border-destructive/30 bg-destructive/10 px-2 py-1.5 text-xs text-destructive xl:rounded-xl xl:px-3 xl:py-2 xl:text-sm">
                       {actionError}
                     </p>
                   )}
                 </div>
               )}
 
-              <dl className="mt-5 grid gap-3 rounded-xl border border-border bg-muted/30 p-4 text-sm sm:grid-cols-2">
-                <div>
-                  <dt className="text-muted-foreground">Claimed by</dt>
-                  <dd className="mt-1 font-medium">
-                    {selectedItem.claimedBy ? `u/${selectedItem.claimedBy}` : 'Nobody'}
-                  </dd>
-                </div>
-                <div>
-                  <dt className="text-muted-foreground">Claim expires</dt>
-                  <dd className="mt-1 font-medium">
-                    {formatTime(selectedItem.claimExpiresAt)}
-                  </dd>
-                </div>
-                <div>
-                  <dt className="text-muted-foreground">Created</dt>
-                  <dd className="mt-1 font-medium">{formatTime(selectedItem.createdAt)}</dd>
-                </div>
-                <div>
-                  <dt className="text-muted-foreground">Updated</dt>
-                  <dd className="mt-1 font-medium">{formatTime(selectedItem.updatedAt)}</dd>
+              <details className="mt-2 xl:hidden">
+                <summary className="cursor-pointer list-none text-xs font-medium text-primary marker:content-none [&::-webkit-details-marker]:hidden">
+                  Case details & tags
+                </summary>
+                <div className="mt-2 space-y-2">
+                  <dl className="grid grid-cols-2 gap-2 rounded-lg border border-border bg-muted/30 p-2.5 text-[11px]">
+                    <div>
+                      <dt className="text-muted-foreground">Claimed</dt>
+                      <dd className="mt-0.5 font-medium">
+                        {selectedItem.claimedBy ? `u/${selectedItem.claimedBy}` : '—'}
+                      </dd>
+                    </div>
+                    <div>
+                      <dt className="text-muted-foreground">Expires</dt>
+                      <dd className="mt-0.5 font-medium">
+                        {formatTime(selectedItem.claimExpiresAt)}
+                      </dd>
+                    </div>
+                    <div>
+                      <dt className="text-muted-foreground">Created</dt>
+                      <dd className="mt-0.5 font-medium">{formatTime(selectedItem.createdAt)}</dd>
+                    </div>
+                    <div>
+                      <dt className="text-muted-foreground">Updated</dt>
+                      <dd className="mt-0.5 font-medium">{formatTime(selectedItem.updatedAt)}</dd>
+                    </div>
+                  </dl>
+                  <p className="break-all text-[11px] leading-snug text-muted-foreground">
+                    {selectedItem.permalink ?? selectedItem.targetId}
+                  </p>
+                  <EscalationTagPicker
+                    availableTags={init.config.escalationTags}
+                    selectedTags={draftEscalationTags}
+                    onChange={setDraftEscalationTags}
+                    disabled={saving}
+                  />
                 </div>
-              </dl>
+              </details>
 
-              <div className="mt-5 rounded-xl border border-border bg-background/50 p-4">
-                <h3 className="text-sm font-semibold text-foreground">Content reference</h3>
-                <p className="mt-2 break-all text-sm leading-relaxed text-muted-foreground">
-                  {selectedItem.permalink ?? selectedItem.targetId}
-                </p>
-              </div>
+              <div className="hidden xl:block">
+                <dl className="mt-5 grid gap-3 rounded-xl border border-border bg-muted/30 p-4 text-sm sm:grid-cols-2">
+                  <div>
+                    <dt className="text-muted-foreground">Claimed by</dt>
+                    <dd className="mt-1 font-medium">
+                      {selectedItem.claimedBy ? `u/${selectedItem.claimedBy}` : 'Nobody'}
+                    </dd>
+                  </div>
+                  <div>
+                    <dt className="text-muted-foreground">Claim expires</dt>
+                    <dd className="mt-1 font-medium">
+                      {formatTime(selectedItem.claimExpiresAt)}
+                    </dd>
+                  </div>
+                  <div>
+                    <dt className="text-muted-foreground">Created</dt>
+                    <dd className="mt-1 font-medium">{formatTime(selectedItem.createdAt)}</dd>
+                  </div>
+                  <div>
+                    <dt className="text-muted-foreground">Updated</dt>
+                    <dd className="mt-1 font-medium">{formatTime(selectedItem.updatedAt)}</dd>
+                  </div>
+                </dl>
 
-              <div className="mt-5">
-                <div className="mb-2 flex items-center justify-between gap-2">
-                  <h3 className="text-sm font-semibold text-foreground">
-                    Escalation tags
-                  </h3>
-                  <span className="text-xs text-muted-foreground">
-                    Saved with status changes
-                  </span>
+                <div className="mt-5 rounded-xl border border-border bg-background/50 p-4">
+                  <h3 className="text-sm font-semibold text-foreground">Content reference</h3>
+                  <p className="mt-2 break-all text-sm leading-relaxed text-muted-foreground">
+                    {selectedItem.permalink ?? selectedItem.targetId}
+                  </p>
+                </div>
+
+                <div className="mt-5">
+                  <div className="mb-2 flex items-center justify-between gap-2">
+                    <h3 className="text-sm font-semibold text-foreground">Escalation tags</h3>
+                    <span className="text-xs text-muted-foreground">
+                      Saved with status changes
+                    </span>
+                  </div>
+                  <EscalationTagPicker
+                    availableTags={init.config.escalationTags}
+                    selectedTags={draftEscalationTags}
+                    onChange={setDraftEscalationTags}
+                    disabled={saving}
+                  />
                 </div>
-                <EscalationTagPicker
-                  availableTags={init.config.escalationTags}
-                  selectedTags={draftEscalationTags}
-                  onChange={setDraftEscalationTags}
-                  disabled={saving}
-                />
               </div>
             </section>
           )}
         </section>
 
-        <aside className="min-h-0 space-y-4 xl:overflow-y-auto xl:pl-1">
-          <section className="rounded-xl border border-border bg-card p-2">
-            <div className="grid grid-cols-4 gap-1" role="tablist" aria-label="Queue item tools">
+        <aside
+          className={`min-h-0 space-y-2 sm:space-y-4 max-xl:[&_section.rounded-xl]:p-3 max-xl:[&_section.rounded-xl]:text-xs max-xl:[&_h3]:text-xs ${
+            !isXlUp && queueMobilePane === 'list' ? 'hidden' : ''
+          } ${isXlUp ? 'xl:overflow-y-auto xl:pl-1' : ''}`}
+        >
+          <section className="rounded-lg border border-border bg-card p-1.5 xl:rounded-xl xl:p-2">
+            <div
+              className="grid grid-cols-4 gap-0.5"
+              role="tablist"
+              aria-label="Queue item tools"
+            >
               {[
                 ['actions', 'Actions'],
                 ['ai', 'AI'],
@@ -2249,7 +2376,7 @@ export const CollabQueueDashboard = () => {
                   role="tab"
                   aria-selected={queueToolTab === id}
                   onClick={() => setQueueToolTab(id as QueueToolTab)}
-                  className={`rounded-lg px-2 py-2 text-xs font-semibold transition ${
+                  className={`rounded-md px-1 py-1.5 text-[10px] font-semibold transition xl:rounded-lg xl:px-2 xl:py-2 xl:text-xs ${
                     queueToolTab === id
                       ? 'bg-primary text-primary-foreground'
                       : 'text-muted-foreground hover:bg-muted hover:text-foreground'
@@ -2976,11 +3103,11 @@ lol"
               {queueToolTab === 'actions' && (
                 <>
               <section
-                className="scroll-mt-6 rounded-xl border border-border bg-card p-4 shadow-sm"
+                className="scroll-mt-6 rounded-lg border border-border bg-card p-3 shadow-sm xl:rounded-xl xl:p-4"
               >
-                <div className="mb-4 flex items-start justify-between gap-4">
-                  <div>
-                    <h2 className="text-lg font-semibold text-foreground">
+                <div className="mb-3 flex items-start justify-between gap-2 xl:mb-4 xl:gap-4">
+                  <div className="min-w-0">
+                    <h2 className="text-sm font-semibold text-foreground xl:text-base">
                       Actions
                     </h2>
                     <p className="text-xs text-muted-foreground">
@@ -3366,73 +3493,60 @@ lol"
       )}
 
       {currentPage === 'voting' && (
-        <div className="mx-auto max-w-7xl px-6 py-6">
-          <div className="mb-6 flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
-            <div>
-              <p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary">
-                Consensus Review
-              </p>
-              <h1 className="mt-2 text-2xl font-semibold text-foreground">
-                Human-confirmed team voting
-              </h1>
-              <p className="mt-2 max-w-3xl text-sm text-muted-foreground">
-                Start or review multi-moderator decisions for hard cases. Voting
-                records team input only; it does not remove, ban, lock, report, or
-                punish users automatically.
-              </p>
-            </div>
-            <div className="flex flex-wrap gap-2">
-              <button
-                type="button"
-                onClick={() => void refreshQueue()}
-                disabled={queueLoading}
-                className="rounded-xl border border-border px-3 py-2 text-sm text-foreground hover:bg-muted disabled:opacity-50"
-              >
-                {queueLoading ? 'Refreshing…' : 'Refresh queue'}
-              </button>
-              <button
-                type="button"
-                onClick={() => setCurrentPage('queue')}
-                className="rounded-xl border border-border px-3 py-2 text-sm text-foreground hover:bg-muted"
-              >
-                Open full queue
-              </button>
-            </div>
-          </div>
+        <ModulePageShell>
+          <ModulePageHeader
+            kicker="Consensus Review"
+            title="Human-confirmed team voting"
+            description="Multi-mod decisions for hard cases. Records team input only — no auto remove, ban, or punish."
+            actions={
+              <>
+                <button
+                  type="button"
+                  onClick={() => void refreshQueue()}
+                  disabled={queueLoading}
+                  className={modulePageBtnClass}
+                >
+                  {queueLoading ? 'Refreshing…' : 'Refresh'}
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setCurrentPage('queue')}
+                  className={modulePageBtnClass}
+                >
+                  Queue
+                </button>
+              </>
+            }
+          />
 
-          <div className="grid gap-4 md:grid-cols-3">
-            <article className="rounded-2xl border border-border bg-card p-4 shadow-sm">
-              <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                Items in vote
+          <div className="grid grid-cols-3 gap-2 sm:gap-4">
+            <article className={moduleStatCardClass}>
+              <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground sm:text-xs">
+                In vote
               </p>
-              <p className="mt-3 text-3xl font-semibold text-foreground">
-                {inVoteItems.length}
-              </p>
-              <p className="mt-2 text-xs text-muted-foreground">
-                Queue items currently marked for team review.
+              <p className={moduleStatValueClass}>{inVoteItems.length}</p>
+              <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
+                Marked for review
               </p>
             </article>
-            <article className="rounded-2xl border border-border bg-card p-4 shadow-sm">
-              <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                Linked review cases
-              </p>
-              <p className="mt-3 text-3xl font-semibold text-foreground">
-                {voteLinkedItems.length}
+            <article className={moduleStatCardClass}>
+              <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground sm:text-xs">
+                Linked
               </p>
-              <p className="mt-2 text-xs text-muted-foreground">
-                Items with a stored Consensus Review link.
+              <p className={moduleStatValueClass}>{voteLinkedItems.length}</p>
+              <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
+                Review cases
               </p>
             </article>
-            <article className="rounded-2xl border border-border bg-card p-4 shadow-sm">
-              <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                Selected item
+            <article className={moduleStatCardClass}>
+              <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground sm:text-xs">
+                Selected
               </p>
-              <p className="mt-3 truncate text-lg font-semibold text-foreground">
-                {selectedItem ? selectedItem.author : 'None selected'}
+              <p className="mt-1.5 truncate text-sm font-semibold text-foreground sm:mt-3 sm:text-lg">
+                {selectedItem ? selectedItem.author : '—'}
               </p>
-              <p className="mt-2 text-xs text-muted-foreground">
-                Select a case below, or use the current queue selection to start a
-                review.
+              <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
+                Tap a case below
               </p>
             </article>
           </div>
@@ -3443,12 +3557,10 @@ lol"
             </p>
           )}
 
-          <div className="mt-6 grid gap-6 xl:grid-cols-[minmax(320px,0.45fr)_minmax(0,0.55fr)]">
-            <section className="rounded-2xl border border-border bg-card p-5 shadow-sm">
-              <h2 className="text-lg font-semibold text-foreground">
-                Review queue
-              </h2>
-              <p className="mt-1 text-sm text-muted-foreground">
+          <div className="mt-4 grid gap-4 sm:mt-6 sm:gap-6 xl:grid-cols-[minmax(280px,0.45fr)_minmax(0,0.55fr)]">
+            <section className={moduleSectionCardClass}>
+              <h2 className={moduleSectionTitleClass}>Review queue</h2>
+              <p className="mt-1 text-xs text-muted-foreground sm:text-sm">
                 Cases with active or linked team voting appear first. Selecting a
                 row loads the vote panel on the right.
               </p>
@@ -3536,13 +3648,11 @@ lol"
 
               {selectedItem ? (
                 <>
-                  <section className="rounded-2xl border border-border bg-card p-5 shadow-sm">
-                    <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-                      <div>
-                        <h2 className="text-lg font-semibold text-foreground">
-                          Selected case
-                        </h2>
-                        <p className="mt-1 text-sm text-muted-foreground">
+                  <section className={moduleSectionCardClass}>
+                    <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between sm:gap-3">
+                      <div className="min-w-0">
+                        <h2 className={moduleSectionTitleClass}>Selected case</h2>
+                        <p className="mt-1 text-xs text-muted-foreground sm:text-sm">
                           {selectedItem.kind === 'comment' ? 'Comment' : 'Post'} by{' '}
                           {selectedItem.author} · {selectedItem.reportCount} reports
                         </p>
@@ -3552,9 +3662,9 @@ lol"
                         <button
                           type="button"
                           onClick={() => setCurrentPage('case-detail')}
-                          className="rounded-xl border border-border px-3 py-2 text-sm text-foreground hover:bg-muted"
+                          className={modulePageBtnClass}
                         >
-                          Open case detail
+                          Case detail
                         </button>
                       </div>
                     </div>
@@ -3579,11 +3689,11 @@ lol"
                     onClose={(finalOutcome) => void closeConsensusVote(finalOutcome)}
                   />
 
-                  <section className="rounded-2xl border border-border bg-card p-5 shadow-sm">
-                    <h2 className="text-sm font-semibold text-foreground">
+                  <section className="rounded-lg border border-border bg-card p-3 shadow-sm xl:rounded-2xl xl:p-5">
+                    <h2 className="text-xs font-semibold text-foreground xl:text-sm">
                       Safety notes
                     </h2>
-                    <ul className="mt-3 space-y-2 text-sm text-muted-foreground">
+                    <ul className="mt-2 space-y-1.5 text-xs text-muted-foreground xl:mt-3 xl:space-y-2 xl:text-sm">
                       <li>Consensus Review records moderator votes and audit events.</li>
                       <li>Final Reddit actions still require explicit human action.</li>
                       <li>No auto-ban, automatic punishment, or user messaging occurs here.</li>
@@ -3591,108 +3701,95 @@ lol"
                   </section>
                 </>
               ) : (
-                <section className="rounded-2xl border border-dashed border-border bg-card p-6 text-sm text-muted-foreground">
+                <section className="rounded-lg border border-dashed border-border bg-card p-4 text-xs text-muted-foreground sm:p-6 sm:text-sm">
                   Select a queue item to start or review a Consensus Review.
                 </section>
               )}
             </div>
           </div>
-        </div>
+        </ModulePageShell>
       )}
 
       {currentPage === 'nudge' && (
-        <div className="mx-auto max-w-5xl px-6 py-6">
-          <div className="mb-4">
-            <h1 className="text-xl font-semibold text-foreground">
-              Gentle Nudge
-            </h1>
-            <p className="mt-1 text-sm text-muted-foreground">
-              Configure subreddit-scoped reminder behavior, run dry-run previews,
-              and review nudge outcome metrics. This is reminder-only and does not
-              perform enforcement.
-            </p>
-          </div>
+        <ModulePageShell className="max-w-5xl">
+          <ModulePageHeader
+            kicker="Gentle Nudge"
+            title="Reminder-only coaching"
+            description="Configure triggers, previews, and outcomes. No removals, bans, or enforcement."
+          />
           <GentleNudgeSettings init={init} setInit={setInit} />
-        </div>
+        </ModulePageShell>
       )}
 
       {currentPage === 'insights' && (
-        <div className="mx-auto max-w-7xl px-6 py-6">
-          <div className="mb-6 flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
-            <div>
-              <p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary">
-                Team Insights
-              </p>
-              <h1 className="mt-2 text-2xl font-semibold text-foreground">
-                Subreddit workflow health
-              </h1>
-              <p className="mt-2 max-w-3xl text-sm text-muted-foreground">
-                Read-only moderator view of CollabGuard audit activity and Gentle
-                Nudge outcomes. Metrics stay subreddit-scoped and are for team
-                coordination, not ranking or punishment.
-              </p>
-            </div>
-            <div className="flex flex-wrap gap-2">
-              <button
-                type="button"
-                onClick={() => void refreshModPerformance()}
-                disabled={modPerformanceLoading}
-                className="rounded-xl border border-border px-3 py-2 text-sm text-foreground hover:bg-muted disabled:opacity-50"
-              >
-                {modPerformanceLoading ? 'Refreshing…' : 'Refresh activity'}
-              </button>
-              <button
-                type="button"
-                onClick={() => void refreshNudgeInsights()}
-                className="rounded-xl border border-border px-3 py-2 text-sm text-foreground hover:bg-muted"
-              >
-                Refresh nudges
-              </button>
-            </div>
-          </div>
+        <ModulePageShell>
+          <ModulePageHeader
+            kicker="Team Insights"
+            title="Subreddit workflow health"
+            description="Read-only audit and nudge metrics. For team coordination — not ranking or punishment."
+            actions={
+              <>
+                <button
+                  type="button"
+                  onClick={() => void refreshModPerformance()}
+                  disabled={modPerformanceLoading}
+                  className={modulePageBtnClass}
+                >
+                  {modPerformanceLoading ? 'Refreshing…' : 'Activity'}
+                </button>
+                <button
+                  type="button"
+                  onClick={() => void refreshNudgeInsights()}
+                  className={modulePageBtnClass}
+                >
+                  Nudges
+                </button>
+              </>
+            }
+          />
 
-          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
-            <article className="rounded-2xl border border-border bg-card p-4 shadow-sm">
-              <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                Items reviewed
+          <div className="grid grid-cols-2 gap-2 sm:gap-4 xl:grid-cols-4">
+            <article className={moduleStatCardClass}>
+              <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground sm:text-xs">
+                Reviewed
               </p>
-              <p className="mt-3 text-3xl font-semibold text-foreground">
+              <p className={moduleStatValueClass}>
                 {modPerformanceRows.reduce(
                   (total, row) => total + row.itemsReviewed,
                   0
                 )}
               </p>
-              <p className="mt-2 text-xs text-muted-foreground">
-                Resolved or reviewed workflow items in {modPerformanceWindow}.
+              <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
+                {modPerformanceWindow}
               </p>
             </article>
-            <article className="rounded-2xl border border-border bg-card p-4 shadow-sm">
-              <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                Notes left
+            <article className={moduleStatCardClass}>
+              <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground sm:text-xs">
+                Notes
               </p>
-              <p className="mt-3 text-3xl font-semibold text-foreground">
+              <p className={moduleStatValueClass}>
                 {modPerformanceRows.reduce((total, row) => total + row.notesLeft, 0)}
               </p>
-              <p className="mt-2 text-xs text-muted-foreground">
-                Private moderator notes; note bodies are never shown here.
+              <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
+                Bodies not shown
               </p>
             </article>
-            <article className="rounded-2xl border border-border bg-card p-4 shadow-sm">
-              <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                Nudges sent
+            <article className={moduleStatCardClass}>
+              <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground sm:text-xs">
+                Nudges
               </p>
-              <p className="mt-3 text-3xl font-semibold text-foreground">
+              <p className={moduleStatValueClass}>
                 {nudgeInsights?.insights.totalNudges ?? 0}
               </p>
-              <p className="mt-2 text-xs text-muted-foreground">
-                Reminder-only activity from the last 7 days.
+              <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
+                Last 7 days
               </p>
             </article>
-            <article className="rounded-2xl border border-border bg-card p-4 shadow-sm">
-              <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                Edit-after-nudge rate
+            <article className={moduleStatCardClass}>
+              <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground sm:text-xs">
+                Edit rate
               </p>
-              <p className="mt-3 text-3xl font-semibold text-foreground">
+              <p className={moduleStatValueClass}>
                 {nudgeInsights && nudgeInsights.insights.totalNudges > 0
                   ? `${Math.round(
                       (nudgeInsights.insights.editedAfterNudge /
@@ -3701,20 +3798,18 @@ lol"
                     )}%`
                   : '0%'}
               </p>
-              <p className="mt-2 text-xs text-muted-foreground">
-                A soft signal that users corrected comments after reminders.
+              <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
+                After nudge
               </p>
             </article>
           </div>
 
-          <div className="mt-6 grid gap-6 xl:grid-cols-[minmax(0,1.2fr)_minmax(360px,0.8fr)]">
-            <section className="rounded-2xl border border-border bg-card p-5 shadow-sm">
+          <div className="mt-4 grid min-w-0 gap-4 sm:mt-6 sm:gap-6 xl:grid-cols-[minmax(0,1.2fr)_minmax(0,0.8fr)]">
+            <section className={moduleSectionCardClass}>
               <div className="flex items-start justify-between gap-4">
-                <div>
-                  <h2 className="text-lg font-semibold text-foreground">
-                    Mod Team Activity
-                  </h2>
-                  <p className="mt-1 text-sm text-muted-foreground">
+                <div className="min-w-0">
+                  <h2 className={moduleSectionTitleClass}>Mod team activity</h2>
+                  <p className="mt-1 text-xs text-muted-foreground sm:text-sm">
                     {modPerformanceWindow}. Aggregated from AuditEvents without
                     exposing private note text or full content.
                   </p>
@@ -3796,69 +3891,79 @@ lol"
               )}
             </section>
 
-            <section className="rounded-2xl border border-border bg-card p-5 shadow-sm">
-              <h2 className="text-lg font-semibold text-foreground">
-                Gentle Nudge Outcomes
-              </h2>
-              <p className="mt-1 text-sm text-muted-foreground">
-                Last 7 days. Reminder-only outcomes; no removals, bans, locks, or
-                reports are performed from this panel.
+            <section className={moduleSectionCardClass}>
+              <h2 className={moduleSectionTitleClass}>Nudge outcomes</h2>
+              <p className="mt-1 text-[11px] leading-snug text-muted-foreground sm:text-sm">
+                Last 7 days · reminder-only · no enforcement from this panel.
               </p>
 
               {nudgeInsights ? (
                 <>
-                  <div className="mt-4 grid grid-cols-2 gap-3 text-sm">
-                    <div className="rounded-xl bg-muted/50 p-3">
-                      <p className="text-muted-foreground">Public replies</p>
-                      <p className="mt-1 text-xl font-semibold text-foreground">
-                        {nudgeInsights.insights.publicReplies}
-                      </p>
-                    </div>
-                    <div className="rounded-xl bg-muted/50 p-3">
-                      <p className="text-muted-foreground">Mod-only reminders</p>
-                      <p className="mt-1 text-xl font-semibold text-foreground">
-                        {nudgeInsights.insights.modOnlyNotifications}
-                      </p>
-                    </div>
-                    <div className="rounded-xl bg-muted/50 p-3">
-                      <p className="text-muted-foreground">Shadow matches</p>
-                      <p className="mt-1 text-xl font-semibold text-foreground">
-                        {nudgeInsights.insights.shadowMatches}
-                      </p>
-                    </div>
-                    <div className="rounded-xl bg-muted/50 p-3">
-                      <p className="text-muted-foreground">False positives</p>
-                      <p className="mt-1 text-xl font-semibold text-foreground">
-                        {nudgeInsights.insights.falsePositiveFeedback}
-                      </p>
-                    </div>
+                  <div className="mt-3 grid min-w-0 grid-cols-2 gap-1.5 sm:mt-4 sm:gap-2">
+                    {(
+                      [
+                        {
+                          short: 'Public',
+                          long: 'Public replies',
+                          value: nudgeInsights.insights.publicReplies,
+                        },
+                        {
+                          short: 'Mod-only',
+                          long: 'Mod-only reminders',
+                          value: nudgeInsights.insights.modOnlyNotifications,
+                        },
+                        {
+                          short: 'Shadow',
+                          long: 'Shadow matches',
+                          value: nudgeInsights.insights.shadowMatches,
+                        },
+                        {
+                          short: 'False +',
+                          long: 'False positives',
+                          value: nudgeInsights.insights.falsePositiveFeedback,
+                        },
+                      ] as const
+                    ).map((stat) => (
+                      <div
+                        key={stat.long}
+                        className="min-w-0 overflow-hidden rounded-lg bg-muted/50 p-2 sm:rounded-xl sm:p-3"
+                      >
+                        <p className="truncate text-[10px] text-muted-foreground sm:text-xs">
+                          <span className="sm:hidden">{stat.short}</span>
+                          <span className="hidden sm:inline">{stat.long}</span>
+                        </p>
+                        <p className="mt-0.5 text-base font-semibold tabular-nums text-foreground sm:mt-1 sm:text-xl">
+                          {stat.value}
+                        </p>
+                      </div>
+                    ))}
                   </div>
 
-                  <div className="mt-4 rounded-xl border border-border p-3">
-                    <p className="text-sm font-medium text-foreground">
+                  <div className="mt-3 min-w-0 rounded-lg border border-border p-2.5 sm:mt-4 sm:rounded-xl sm:p-3">
+                    <p className="text-xs font-medium text-foreground sm:text-sm">
                       Top triggers
                     </p>
                     {Object.entries(nudgeInsights.insights.byTrigger).length > 0 ? (
-                      <div className="mt-2 space-y-2">
+                      <div className="mt-1.5 space-y-1.5 sm:mt-2 sm:space-y-2">
                         {Object.entries(nudgeInsights.insights.byTrigger)
                           .sort((left, right) => right[1] - left[1])
                           .slice(0, 5)
                           .map(([trigger, count]) => (
                             <div
                               key={trigger}
-                              className="flex items-center justify-between gap-3 text-sm"
+                              className="flex min-w-0 items-center justify-between gap-2 text-xs sm:text-sm"
                             >
-                              <span className="text-muted-foreground">
+                              <span className="min-w-0 truncate text-muted-foreground">
                                 {formatNudgeTrigger(trigger as NudgeTriggerType)}
                               </span>
-                              <span className="font-medium text-foreground">
+                              <span className="shrink-0 font-medium tabular-nums text-foreground">
                                 {count}
                               </span>
                             </div>
                           ))}
                       </div>
                     ) : (
-                      <p className="mt-2 text-sm text-muted-foreground">
+                      <p className="mt-1.5 text-xs text-muted-foreground sm:text-sm">
                         No trigger activity yet.
                       </p>
                     )}
@@ -3872,13 +3977,11 @@ lol"
             </section>
           </div>
 
-          <section className="mt-6 rounded-2xl border border-border bg-card p-5 shadow-sm">
-            <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-              <div>
-                <h2 className="text-lg font-semibold text-foreground">
-                  Recent Gentle Nudges
-                </h2>
-                <p className="mt-1 text-sm text-muted-foreground">
+          <section className={`mt-4 sm:mt-6 ${moduleSectionCardClass}`}>
+            <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between sm:gap-3">
+              <div className="min-w-0">
+                <h2 className={moduleSectionTitleClass}>Recent nudges</h2>
+                <p className="mt-1 text-xs text-muted-foreground sm:text-sm">
                   Latest subreddit nudge activity. Shows trigger context and
                   edit-after-nudge status without full comment text.
                 </p>
@@ -3887,9 +3990,9 @@ lol"
                 type="button"
                 onClick={() => void refreshRecentNudges(init.subredditId)}
                 disabled={recentNudgesLoading}
-                className="rounded-xl border border-border px-3 py-2 text-sm text-foreground hover:bg-muted disabled:opacity-50"
+                className={modulePageBtnClass}
               >
-                {recentNudgesLoading ? 'Refreshing…' : 'Refresh recent nudges'}
+                {recentNudgesLoading ? 'Refreshing…' : 'Refresh'}
               </button>
             </div>
 
@@ -3955,105 +4058,95 @@ lol"
               </div>
             )}
           </section>
-        </div>
+        </ModulePageShell>
       )}
 
       {currentPage === 'audit' && (
-        <div className="mx-auto max-w-7xl px-6 py-6">
-          <div className="mb-6 flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
-            <div>
-              <p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary">
-                Audit Log
-              </p>
-              <h1 className="mt-2 text-2xl font-semibold text-foreground">
-                Moderator action trail
-              </h1>
-              <p className="mt-2 max-w-3xl text-sm text-muted-foreground">
-                Subreddit-scoped history of CollabGuard workflow actions. This is
-                read-only, moderator-only, and intended for transparency,
-                troubleshooting, and case review.
-              </p>
-            </div>
-            <div className="flex flex-wrap gap-2">
-              <button
-                type="button"
-                onClick={() => void refreshSubredditAudit()}
-                disabled={subredditAuditLoading}
-                className="rounded-xl border border-border px-3 py-2 text-sm text-foreground hover:bg-muted disabled:opacity-50"
-              >
-                {subredditAuditLoading ? 'Refreshing…' : 'Refresh audit log'}
-              </button>
-              <button
-                type="button"
-                onClick={() =>
-                  navigator.clipboard
-                    .writeText(JSON.stringify(filteredSubredditAuditEvents, null, 2))
-                    .catch(() => undefined)
-                }
-                className="rounded-xl border border-border px-3 py-2 text-sm text-foreground hover:bg-muted"
-              >
-                Copy filtered JSON
-              </button>
-            </div>
-          </div>
+        <ModulePageShell>
+          <ModulePageHeader
+            kicker="Audit Log"
+            title="Moderator action trail"
+            description="Subreddit-scoped workflow history. Read-only, for transparency and case review."
+            actions={
+              <>
+                <button
+                  type="button"
+                  onClick={() => void refreshSubredditAudit()}
+                  disabled={subredditAuditLoading}
+                  className={modulePageBtnClass}
+                >
+                  {subredditAuditLoading ? 'Refreshing…' : 'Refresh'}
+                </button>
+                <button
+                  type="button"
+                  onClick={() =>
+                    navigator.clipboard
+                      .writeText(JSON.stringify(filteredSubredditAuditEvents, null, 2))
+                      .catch(() => undefined)
+                  }
+                  className={modulePageBtnClass}
+                >
+                  Copy JSON
+                </button>
+              </>
+            }
+          />
 
-          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
-            <article className="rounded-2xl border border-border bg-card p-4 shadow-sm">
-              <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                Events loaded
-              </p>
-              <p className="mt-3 text-3xl font-semibold text-foreground">
-                {subredditAuditEvents.length}
+          <div className="grid grid-cols-2 gap-2 sm:gap-4 xl:grid-cols-4">
+            <article className={moduleStatCardClass}>
+              <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground sm:text-xs">
+                Loaded
               </p>
-              <p className="mt-2 text-xs text-muted-foreground">
-                Latest subreddit audit events, newest first.
+              <p className={moduleStatValueClass}>{subredditAuditEvents.length}</p>
+              <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
+                Newest first
               </p>
             </article>
-            <article className="rounded-2xl border border-border bg-card p-4 shadow-sm">
-              <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                Matching filters
+            <article className={moduleStatCardClass}>
+              <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground sm:text-xs">
+                Filtered
               </p>
-              <p className="mt-3 text-3xl font-semibold text-foreground">
+              <p className={moduleStatValueClass}>
                 {filteredSubredditAuditEvents.length}
               </p>
-              <p className="mt-2 text-xs text-muted-foreground">
-                Filter by action type or moderator.
+              <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
+                Current filters
               </p>
             </article>
-            <article className="rounded-2xl border border-border bg-card p-4 shadow-sm">
-              <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                Active actors
+            <article className={moduleStatCardClass}>
+              <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground sm:text-xs">
+                Actors
               </p>
-              <p className="mt-3 text-3xl font-semibold text-foreground">
+              <p className={moduleStatValueClass}>
                 {new Set(subredditAuditEvents.map((event) => event.actorModId)).size}
               </p>
-              <p className="mt-2 text-xs text-muted-foreground">
-                Moderators or system actors represented in loaded events.
+              <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
+                Mods + system
               </p>
             </article>
-            <article className="rounded-2xl border border-border bg-card p-4 shadow-sm">
-              <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                Cleanup events
+            <article className={moduleStatCardClass}>
+              <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground sm:text-xs">
+                Cleanup
               </p>
-              <p className="mt-3 text-3xl font-semibold text-foreground">
+              <p className={moduleStatValueClass}>
                 {subredditAuditActionCounts.ITEM_DELETED_CLEANUP ?? 0}
               </p>
-              <p className="mt-2 text-xs text-muted-foreground">
-                Deleted-content cleanup records, if available.
+              <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
+                Deleted items
               </p>
             </article>
           </div>
 
-          <section className="mt-6 rounded-2xl border border-border bg-card p-5 shadow-sm">
-            <div className="grid gap-3 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]">
-              <label className="text-sm">
-                <span className="mb-1 block text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+          <section className={`mt-4 sm:mt-6 ${moduleSectionCardClass}`}>
+            <div className="grid gap-2 sm:gap-3 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]">
+              <label className="block min-w-0 text-xs sm:text-sm">
+                <span className="mb-1 block text-[10px] font-semibold uppercase tracking-wide text-muted-foreground sm:text-xs">
                   Event type
                 </span>
                 <select
                   value={auditActionFilter}
                   onChange={(event) => setAuditActionFilter(event.target.value)}
-                  className="w-full rounded-xl border border-input bg-background px-3 py-2 text-sm text-foreground"
+                  className="w-full max-w-full rounded-lg border border-input bg-background px-2.5 py-1.5 text-xs text-foreground sm:rounded-xl sm:px-3 sm:py-2 sm:text-sm"
                 >
                   <option value="all">All events</option>
                   {Object.entries(subredditAuditActionCounts)
@@ -4066,15 +4159,15 @@ lol"
                 </select>
               </label>
 
-              <label className="text-sm">
-                <span className="mb-1 block text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+              <label className="block min-w-0 text-xs sm:text-sm">
+                <span className="mb-1 block text-[10px] font-semibold uppercase tracking-wide text-muted-foreground sm:text-xs">
                   Actor
                 </span>
                 <input
                   value={auditActorFilter}
                   onChange={(event) => setAuditActorFilter(event.target.value)}
-                  placeholder="Filter by moderator username"
-                  className="w-full rounded-xl border border-input bg-background px-3 py-2 text-sm text-foreground"
+                  placeholder="Mod username"
+                  className="w-full max-w-full rounded-lg border border-input bg-background px-2.5 py-1.5 text-xs text-foreground sm:rounded-xl sm:px-3 sm:py-2 sm:text-sm"
                 />
               </label>
 
@@ -4085,9 +4178,9 @@ lol"
                     setAuditActionFilter('all');
                     setAuditActorFilter('');
                   }}
-                  className="w-full rounded-xl border border-border px-3 py-2 text-sm text-foreground hover:bg-muted lg:w-auto"
+                  className={`w-full lg:w-auto ${modulePageBtnClass}`}
                 >
-                  Clear filters
+                  Clear
                 </button>
               </div>
             </div>
@@ -4135,15 +4228,15 @@ lol"
                   return (
                     <article
                       key={event.eventId}
-                      className="rounded-xl border border-border bg-background/60 p-4"
+                      className="rounded-lg border border-border bg-background/60 p-2.5 sm:rounded-xl sm:p-4"
                     >
-                      <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
-                        <div>
-                          <p className="font-medium text-foreground">
+                      <div className="flex flex-col gap-1.5 sm:flex-row sm:items-start sm:justify-between sm:gap-2">
+                        <div className="min-w-0">
+                          <p className="text-xs font-medium text-foreground sm:text-sm">
                             {formatAuditAction(event.actionType)}
                           </p>
-                          <p className="mt-1 text-xs text-muted-foreground">
-                            Actor: u/{event.actorModId} · Item: {event.itemId}
+                          <p className="mt-0.5 break-all text-[11px] text-muted-foreground sm:text-xs">
+                            u/{event.actorModId} · {event.itemId}
                           </p>
                         </div>
                         <time className="text-xs text-muted-foreground">
@@ -4171,7 +4264,7 @@ lol"
               </div>
             )}
           </section>
-        </div>
+        </ModulePageShell>
       )}
 
       {currentPage === 'case-detail' && (
diff --git a/collab-guard/src/client/components/consensus-review/ConsensusReviewPanel.tsx b/collab-guard/src/client/components/consensus-review/ConsensusReviewPanel.tsx
index e9aed105..ba640196 100644
--- a/collab-guard/src/client/components/consensus-review/ConsensusReviewPanel.tsx
+++ b/collab-guard/src/client/components/consensus-review/ConsensusReviewPanel.tsx
@@ -47,16 +47,16 @@ export const ConsensusReviewPanel = ({
     (voteCase.status === 'Quorum Reached' || voteCase.status === 'Closed');
 
   return (
-    <section className="cg-card p-5">
-      <div className="mb-4 flex items-start gap-3">
-        <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border bg-muted/60 text-muted-foreground">
-          <IconBallot className="h-5 w-5" />
+    <section className="cg-card p-3 xl:p-5">
+      <div className="mb-3 flex items-start gap-2 xl:mb-4 xl:gap-3">
+        <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-border bg-muted/60 text-muted-foreground xl:h-9 xl:w-9">
+          <IconBallot className="h-4 w-4 xl:h-5 xl:w-5" />
         </span>
-        <div>
-          <p className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
+        <div className="min-w-0">
+          <p className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground xl:text-[11px]">
             Consensus Review
           </p>
-          <h3 className="mt-0.5 text-base font-semibold text-foreground">
+          <h3 className="mt-0.5 text-sm font-semibold text-foreground xl:text-base">
             Multi-mod vote for this case
           </h3>
           <p className="mt-1 text-xs text-muted-foreground">
@@ -74,14 +74,14 @@ export const ConsensusReviewPanel = ({
       {!voteCase ? (
         <div className="space-y-3">
           <label className="block">
-            <span className="mb-1.5 block text-sm font-medium text-foreground">
+            <span className="mb-1 block text-xs font-medium text-foreground xl:text-sm">
               Vote question
             </span>
             <textarea
               value={decisionQuestion}
               onChange={(event) => setDecisionQuestion(event.target.value)}
-              rows={3}
-              className="cg-control w-full border border-input bg-muted/30 px-3 py-2 text-sm text-foreground outline-none focus:border-ring"
+              rows={2}
+              className="cg-control w-full max-w-full border border-input bg-muted/30 px-2.5 py-1.5 text-xs text-foreground outline-none focus:border-ring xl:px-3 xl:py-2 xl:text-sm"
             />
           </label>
           <p className="text-xs text-muted-foreground">
@@ -91,7 +91,7 @@ export const ConsensusReviewPanel = ({
             type="button"
             onClick={() => onStart(decisionQuestion)}
             disabled={saving || !decisionQuestion.trim()}
-            className="cg-btn-primary rounded-xl px-4 py-2 text-sm font-medium disabled:cursor-not-allowed"
+            className="cg-btn-primary w-full rounded-lg px-3 py-1.5 text-xs font-medium disabled:cursor-not-allowed xl:w-auto xl:rounded-xl xl:px-4 xl:py-2 xl:text-sm"
           >
             {saving ? 'Starting…' : 'Start Consensus Review'}
           </button>
diff --git a/collab-guard/src/client/components/dashboard-queue.ts b/collab-guard/src/client/components/dashboard-queue.ts
index 2daed2f0..02d4789f 100644
--- a/collab-guard/src/client/components/dashboard-queue.ts
+++ b/collab-guard/src/client/components/dashboard-queue.ts
@@ -68,6 +68,16 @@ export const QUEUE_CHIP_LABELS: Record<QueueChipId, string> = {
   resolved: 'Resolved',
 };
 
+/** Compact chip text for narrow mobile viewports. */
+export const QUEUE_CHIP_SHORT_LABELS: Record<QueueChipId, string> = {
+  all: 'All',
+  mine: 'Mine',
+  review_attention: 'Review',
+  escalated: 'Escal',
+  in_vote: 'Vote',
+  resolved: 'Done',
+};
+
 const filtersEqual = (left: QueueFilters, right: QueueFilters): boolean =>
   left.status === right.status &&
   left.escalationTag === right.escalationTag &&
diff --git a/collab-guard/src/client/components/queue/QueueFilterBar.tsx b/collab-guard/src/client/components/queue/QueueFilterBar.tsx
index ae20a3e3..a34c4189 100644
--- a/collab-guard/src/client/components/queue/QueueFilterBar.tsx
+++ b/collab-guard/src/client/components/queue/QueueFilterBar.tsx
@@ -2,6 +2,7 @@ import type { EscalationTag } from '../../../shared';
 import {
   QUEUE_CHIP_FILTERS,
   QUEUE_CHIP_LABELS,
+  QUEUE_CHIP_SHORT_LABELS,
   detectQueueChip,
   countItemsForChip,
   type QueueChipId,
@@ -45,8 +46,8 @@ export const QueueFilterBar = ({
   const activeChip = detectQueueChip(filters);
 
   return (
-    <div className="space-y-3 border-b border-border px-4 py-4">
-      <div className="flex flex-wrap gap-2">
+    <div className="min-w-0 max-w-full space-y-2 border-b border-border px-2 py-2 sm:space-y-3 sm:px-4 sm:py-4">
+      <div className="grid min-w-0 grid-cols-3 gap-1 sm:flex sm:flex-wrap sm:gap-2">
         {CHIP_ORDER.map((chip) => {
           const selected = activeChip === chip;
           const count = countItemsForChip(items, chip, username);
@@ -56,24 +57,29 @@ export const QueueFilterBar = ({
               key={chip}
               type="button"
               onClick={() => onFiltersChange(QUEUE_CHIP_FILTERS[chip])}
-              className={`rounded-full px-3 py-1.5 text-xs font-medium transition ${
+              className={`min-w-0 truncate rounded-md px-1.5 py-1 text-center text-[10px] font-medium transition sm:shrink-0 sm:rounded-full sm:px-3 sm:py-1.5 sm:text-xs ${
                 selected
                   ? 'bg-primary text-primary-foreground shadow-sm'
                   : 'border border-border bg-muted/60 text-muted-foreground hover:border-primary/40 hover:text-foreground'
               }`}
             >
-              {QUEUE_CHIP_LABELS[chip]} {count}
+              <span className="sm:hidden">
+                {QUEUE_CHIP_SHORT_LABELS[chip]} {count}
+              </span>
+              <span className="hidden sm:inline">
+                {QUEUE_CHIP_LABELS[chip]} {count}
+              </span>
             </button>
           );
         })}
       </div>
 
-      <label className="relative block">
+      <label className="relative block min-w-0">
         <span className="sr-only">Search queue</span>
-        <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">
+        <span className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground sm:left-3">
           <svg
             aria-hidden
-            className="h-4 w-4"
+            className="h-3.5 w-3.5 sm:h-4 sm:w-4"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor"
@@ -90,18 +96,18 @@ export const QueueFilterBar = ({
           type="search"
           value={search}
           onChange={(event) => onSearchChange(event.target.value)}
-          placeholder="Search by content, user, mod, or tag…"
-          className="cg-control w-full border border-input bg-muted/40 py-2.5 pl-10 pr-3 text-sm text-foreground placeholder:text-muted-foreground focus:border-ring focus:outline-none"
+          placeholder="Search queue…"
+          className="cg-control box-border w-full max-w-full border border-input bg-muted/40 py-1.5 pl-8 pr-2 text-xs text-foreground placeholder:text-muted-foreground focus:border-ring focus:outline-none sm:py-2.5 sm:pl-10 sm:pr-3 sm:text-sm"
         />
       </label>
 
-      <details className="group text-sm">
+      <details className="group min-w-0 text-sm">
         <summary className="cursor-pointer list-none text-xs font-medium text-muted-foreground marker:content-none [&::-webkit-details-marker]:hidden">
           <span className="group-open:hidden">More filters</span>
           <span className="hidden group-open:inline">Hide filters</span>
         </summary>
-        <div className="mt-3 grid gap-3 md:grid-cols-2">
-          <label>
+        <div className="mt-3 grid min-w-0 gap-3 md:grid-cols-2">
+          <label className="min-w-0">
             <span className="mb-1 block text-xs font-semibold uppercase tracking-wide text-muted-foreground">
               Escalation tag
             </span>
@@ -113,7 +119,7 @@ export const QueueFilterBar = ({
                   escalationTag: event.target.value as QueueFilters['escalationTag'],
                 })
               }
-              className="cg-control w-full border border-input bg-background px-3 py-2 text-sm"
+              className="cg-control box-border w-full max-w-full border border-input bg-background px-2.5 py-1.5 text-xs sm:px-3 sm:py-2 sm:text-sm"
             >
               <option value="all">All tags</option>
               {escalationTags.map((tag) => (
@@ -123,7 +129,7 @@ export const QueueFilterBar = ({
               ))}
             </select>
           </label>
-          <label>
+          <label className="min-w-0">
             <span className="mb-1 block text-xs font-semibold uppercase tracking-wide text-muted-foreground">
               Reports
             </span>
@@ -135,20 +141,20 @@ export const QueueFilterBar = ({
                   priority: event.target.value as QueueFilters['priority'],
                 })
               }
-              className="cg-control w-full border border-input bg-background px-3 py-2 text-sm"
+              className="cg-control box-border w-full max-w-full border border-input bg-background px-2.5 py-1.5 text-xs sm:px-3 sm:py-2 sm:text-sm"
             >
               <option value="all">All report counts</option>
               <option value="high_report_count">High report count</option>
             </select>
           </label>
-          <label className="md:col-span-2">
+          <label className="min-w-0 md:col-span-2">
             <span className="mb-1 block text-xs font-semibold uppercase tracking-wide text-muted-foreground">
               Sort
             </span>
             <select
               value={sort}
               onChange={(event) => onSortChange(event.target.value as QueueSortMode)}
-              className="cg-control w-full border border-input bg-background px-3 py-2 text-sm"
+              className="cg-control box-border w-full max-w-full border border-input bg-background px-2.5 py-1.5 text-xs sm:px-3 sm:py-2 sm:text-sm"
             >
               <option value="newest_first">Newest first</option>
               <option value="oldest_first">Oldest first</option>
diff --git a/collab-guard/src/client/components/settings/AiModToolOnboardingBanner.tsx b/collab-guard/src/client/components/settings/AiModToolOnboardingBanner.tsx
index ad2d97b1..bb3bcb5a 100644
--- a/collab-guard/src/client/components/settings/AiModToolOnboardingBanner.tsx
+++ b/collab-guard/src/client/components/settings/AiModToolOnboardingBanner.tsx
@@ -49,7 +49,7 @@ export const AiModToolOnboardingBanner = ({
 
   const actionText = needsEnable
     ? 'Enable AI Mod Tool and Mod check in Settings.'
-    : 'Add an AI provider key in Devvit settings.';
+    : 'On r/ModQueueLab: subreddit ⋯ menu → CollabGuard: Set AI API Keys (write-only).';
 
   return (
     <div className="rounded-lg border border-border bg-muted/20 px-3 py-2.5 text-xs">
diff --git a/collab-guard/src/client/components/settings/SettingsPage.tsx b/collab-guard/src/client/components/settings/SettingsPage.tsx
index 5e4726a5..2f6956e4 100644
--- a/collab-guard/src/client/components/settings/SettingsPage.tsx
+++ b/collab-guard/src/client/components/settings/SettingsPage.tsx
@@ -21,60 +21,50 @@ export const SettingsPage = ({ init, setInit, onClose, onOpenAiActivity }: Setti
   const [activeSection, setActiveSection] = useState<SettingsSectionId>('ai-mod-tool');
 
   return (
-    <div className="flex h-full">
+    <div className="flex h-full min-w-0 flex-col overflow-hidden md:flex-row">
       <SettingsSectionNav active={activeSection} onChange={setActiveSection} />
-      <div className="flex-1 overflow-y-auto">
-        <div className="sticky top-0 z-10 flex items-center justify-between border-b border-border bg-background/95 px-6 py-3 backdrop-blur">
-          <div>
+      <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
+        <div className="flex shrink-0 items-center justify-between gap-2 border-b border-border bg-background px-3 py-2">
+          <div className="min-w-0">
             <h1 className="text-sm font-semibold text-foreground">Settings</h1>
-            <p className="text-xs text-muted-foreground">
-              r/{init.subredditName} configuration
+            <p className="truncate text-[11px] text-muted-foreground">
+              r/{init.subredditName}
             </p>
           </div>
           <button
             type="button"
             onClick={onClose}
-            className="rounded-lg border border-border px-3 py-1.5 text-sm font-medium text-foreground hover:bg-muted"
+            className="shrink-0 rounded-lg border border-border px-2.5 py-1 text-xs font-medium text-foreground hover:bg-muted"
             aria-label="Close settings and return to queue"
           >
             Close
           </button>
         </div>
-        {activeSection === 'collab-queue' && (
-          <div className="p-6">
-            <CollabQueueSettings init={init} setInit={setInit} />
+        <div className="min-h-0 flex-1 overflow-x-hidden overflow-y-auto">
+          <div className="max-w-full p-3 sm:p-5">
+            {activeSection === 'collab-queue' && (
+              <CollabQueueSettings init={init} setInit={setInit} />
+            )}
+            {activeSection === 'voting' && <VotingSettings init={init} setInit={setInit} />}
+            {activeSection === 'gentle-nudge' && (
+              <GentleNudgeSettings init={init} setInit={setInit} />
+            )}
+            {activeSection === 'insights' && (
+              <TeamInsightsSettings init={init} setInit={setInit} />
+            )}
+            {activeSection === 'ai-mod-tool' && (
+              <AiModToolSettings
+                key={JSON.stringify(init.config.aiSettings)}
+                init={init}
+                setInit={setInit}
+                {...(onOpenAiActivity ? { onOpenAiActivity } : {})}
+              />
+            )}
+            {activeSection === 'platform' && (
+              <PlatformSettings init={init} setInit={setInit} />
+            )}
           </div>
-        )}
-        {activeSection === 'voting' && (
-          <div className="p-6">
-            <VotingSettings init={init} setInit={setInit} />
-          </div>
-        )}
-        {activeSection === 'gentle-nudge' && (
-          <div className="p-6">
-            <GentleNudgeSettings init={init} setInit={setInit} />
-          </div>
-        )}
-        {activeSection === 'insights' && (
-          <div className="p-6">
-            <TeamInsightsSettings init={init} setInit={setInit} />
-          </div>
-        )}
-        {activeSection === 'ai-mod-tool' && (
-          <div className="p-6">
-            <AiModToolSettings
-              key={JSON.stringify(init.config.aiSettings)}
-              init={init}
-              setInit={setInit}
-              {...(onOpenAiActivity ? { onOpenAiActivity } : {})}
-            />
-          </div>
-        )}
-        {activeSection === 'platform' && (
-          <div className="p-6">
-            <PlatformSettings init={init} setInit={setInit} />
-          </div>
-        )}
+        </div>
       </div>
     </div>
   );
diff --git a/collab-guard/src/client/components/settings/SettingsSectionNav.tsx b/collab-guard/src/client/components/settings/SettingsSectionNav.tsx
index bf7c9e18..26c03812 100644
--- a/collab-guard/src/client/components/settings/SettingsSectionNav.tsx
+++ b/collab-guard/src/client/components/settings/SettingsSectionNav.tsx
@@ -9,16 +9,17 @@ export type SettingsSectionId =
 type SectionMeta = {
   id: SettingsSectionId;
   label: string;
+  shortLabel: string;
   enabled: boolean;
 };
 
 const SECTIONS: SectionMeta[] = [
-  { id: 'collab-queue', label: 'CollabQueue',   enabled: true  },
-  { id: 'voting',       label: 'Voting',        enabled: true  },
-  { id: 'gentle-nudge', label: 'Gentle Nudge',  enabled: true  },
-  { id: 'ai-mod-tool',  label: 'AI Mod Tool',   enabled: true  },
-  { id: 'insights',     label: 'Team Insights', enabled: true  },
-  { id: 'platform',     label: 'Platform',      enabled: true  },
+  { id: 'collab-queue', label: 'CollabQueue', shortLabel: 'Queue', enabled: true },
+  { id: 'voting', label: 'Voting', shortLabel: 'Vote', enabled: true },
+  { id: 'gentle-nudge', label: 'Gentle Nudge', shortLabel: 'Nudge', enabled: true },
+  { id: 'ai-mod-tool', label: 'AI Mod Tool', shortLabel: 'AI', enabled: true },
+  { id: 'insights', label: 'Team Insights', shortLabel: 'Insights', enabled: true },
+  { id: 'platform', label: 'Platform', shortLabel: 'Platform', enabled: true },
 ];
 
 type Props = {
@@ -29,38 +30,48 @@ type Props = {
 export const SettingsSectionNav = ({ active, onChange }: Props) => {
   return (
     <nav
-      className="w-[220px] shrink-0 border-r border-border bg-background py-4"
+      className="shrink-0 border-b border-border bg-background md:w-[200px] md:border-b-0 md:border-r md:py-3"
       aria-label="Settings sections"
     >
-      <p className="px-5 pb-2 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+      <p className="hidden px-4 pb-2 text-[10px] font-medium uppercase tracking-wide text-muted-foreground md:block">
         Sections
       </p>
-      {SECTIONS.map((section) => {
-        const isActive = active === section.id;
-        const baseCls = 'flex w-full items-center justify-between gap-2 border-l-2 py-2.5 px-5 text-sm text-left transition-colors';
-        const cls = !section.enabled
-          ? `${baseCls} border-transparent text-muted-foreground/50 cursor-not-allowed`
-          : isActive
-          ? `${baseCls} border-primary text-primary font-medium`
-          : `${baseCls} border-transparent text-muted-foreground hover:bg-secondary/40 hover:text-foreground`;
+      <div
+        className="flex gap-0.5 overflow-x-auto overscroll-x-contain px-1.5 py-1.5 [-ms-overflow-style:none] [scrollbar-width:none] md:block md:overflow-visible md:px-0 md:py-0 [&::-webkit-scrollbar]:hidden"
+        role="tablist"
+        aria-orientation="horizontal"
+      >
+        {SECTIONS.map((section) => {
+          const isActive = active === section.id;
+          const baseCls =
+            'flex shrink-0 items-center justify-center rounded-md px-2.5 py-1.5 text-[11px] font-medium transition-colors min-h-8 md:min-h-0 md:w-full md:justify-between md:rounded-none md:border-l-2 md:px-4 md:py-2 md:text-sm md:text-left';
+          const cls = !section.enabled
+            ? `${baseCls} cursor-not-allowed text-muted-foreground/50 md:border-transparent`
+            : isActive
+              ? `${baseCls} bg-primary/15 text-primary md:border-primary md:bg-transparent`
+              : `${baseCls} text-muted-foreground hover:bg-secondary/40 hover:text-foreground md:border-transparent`;
 
-        return (
-          <button
-            key={section.id}
-            type="button"
-            disabled={!section.enabled}
-            onClick={() => section.enabled && onChange(section.id)}
-            className={cls}
-          >
-            <span>{section.label}</span>
-            {!section.enabled && (
-              <span className="rounded-full bg-secondary px-2 py-0.5 text-[10px] text-muted-foreground">
-                Soon
-              </span>
-            )}
-          </button>
-        );
-      })}
+          return (
+            <button
+              key={section.id}
+              type="button"
+              role="tab"
+              aria-selected={isActive}
+              disabled={!section.enabled}
+              onClick={() => section.enabled && onChange(section.id)}
+              className={cls}
+            >
+              <span className="md:hidden">{section.shortLabel}</span>
+              <span className="hidden md:inline">{section.label}</span>
+              {!section.enabled && (
+                <span className="ml-1 hidden rounded-full bg-secondary px-1.5 py-0.5 text-[9px] md:inline">
+                  Soon
+                </span>
+              )}
+            </button>
+          );
+        })}
+      </div>
     </nav>
   );
 };
diff --git a/collab-guard/src/client/components/settings/sections/AiModToolActivityFeed.tsx b/collab-guard/src/client/components/settings/sections/AiModToolActivityFeed.tsx
index 92c314ef..94d600e4 100644
--- a/collab-guard/src/client/components/settings/sections/AiModToolActivityFeed.tsx
+++ b/collab-guard/src/client/components/settings/sections/AiModToolActivityFeed.tsx
@@ -431,18 +431,17 @@ export const AiModToolActivityFeed = ({
 
     return (
       <section className="space-y-4">
-        <div className="rounded-2xl border border-border bg-card p-5 shadow-sm">
-          <div className="flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
-            <div>
-              <p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary">
+        <div className="rounded-xl border border-border bg-card p-3 shadow-sm sm:rounded-2xl sm:p-5">
+          <div className="flex flex-col gap-2 sm:gap-4 xl:flex-row xl:items-start xl:justify-between">
+            <div className="min-w-0">
+              <p className="text-[10px] font-semibold uppercase tracking-[0.16em] text-primary sm:text-xs sm:tracking-[0.2em]">
                 Live AI pulse
               </p>
-              <h2 className="mt-2 text-xl font-semibold text-foreground">
+              <h2 className="mt-1 text-base font-semibold text-foreground sm:mt-2 sm:text-xl">
                 Transparent co-moderation ledger
               </h2>
-              <p className="mt-2 max-w-3xl text-sm text-muted-foreground">
-                See what AI reviewed, what it suggested, which guardrails fired,
-                and where moderators should make the final call.
+              <p className="mt-1 text-xs leading-snug text-muted-foreground sm:mt-2 sm:max-w-3xl sm:text-sm sm:leading-normal">
+                What AI reviewed, suggested, and which guardrails fired.
               </p>
             </div>
             <div className="flex flex-wrap items-center gap-2">
@@ -478,17 +477,17 @@ export const AiModToolActivityFeed = ({
             </div>
           )}
 
-          <div className="mt-5 grid overflow-hidden rounded-xl bg-muted/20 sm:grid-cols-2 xl:grid-cols-5">
+          <div className="mt-3 grid grid-cols-2 overflow-hidden rounded-lg bg-muted/20 sm:mt-5 sm:rounded-xl sm:grid-cols-2 xl:grid-cols-5">
             {pulseCards.map((card) => (
               <article
                 key={card.label}
-                className="p-4 sm:border-r sm:border-border/60 last:border-r-0"
+                className="border-b border-border/60 p-2.5 last:border-b-0 sm:border-b-0 sm:border-r sm:p-4 sm:last:border-r-0"
               >
-                <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground sm:text-xs">
                   {card.label}
                 </p>
-                <div className="mt-3 flex flex-wrap items-end justify-between gap-3">
-                  <p className="text-3xl font-semibold text-foreground">{card.value}</p>
+                <div className="mt-1.5 flex flex-wrap items-end justify-between gap-2 sm:mt-3 sm:gap-3">
+                  <p className="text-xl font-semibold text-foreground sm:text-3xl">{card.value}</p>
                   <span className={`rounded-full px-2 py-0.5 text-[11px] font-medium ${toneClass(card.tone)}`}>
                     {card.hint}
                   </span>
diff --git a/collab-guard/src/client/components/settings/sections/AiModToolSettings.tsx b/collab-guard/src/client/components/settings/sections/AiModToolSettings.tsx
index 48fbe973..6e9fd965 100644
--- a/collab-guard/src/client/components/settings/sections/AiModToolSettings.tsx
+++ b/collab-guard/src/client/components/settings/sections/AiModToolSettings.tsx
@@ -4,6 +4,15 @@ import type { AgentProvider } from '../../../../shared/agent';
 import type { SubredditAISettings } from '../../../../shared/ai';
 import { DEFAULT_AI_SETTINGS } from '../../../../shared/config';
 import type { InitResponse, UpdateConfigRequest } from '../../../../shared';
+import {
+  settingsBtnClass,
+  settingsCalloutClass,
+  settingsCardClass,
+  settingsDescClass,
+  settingsInputClass,
+  settingsLabelClass,
+  settingsTitleClass,
+} from '../../shared/page-layout';
 import { SwitchField } from '../../shared/SwitchField';
 import { useConfigSave } from '../../../lib/config-save';
 type AiModToolSettingsProps = {
@@ -13,7 +22,7 @@ type AiModToolSettingsProps = {
 };
 
 const PROVIDER_OPTIONS: Array<{ value: '' | AgentProvider; label: string }> = [
-  { value: '', label: 'Installation default (devvit settings)' },
+  { value: '', label: 'Use provider from saved API key' },
   { value: 'gemini', label: 'Gemini' },
   { value: 'openai', label: 'OpenAI' },
 ];
@@ -24,6 +33,7 @@ export const AiModToolSettings = ({
   onOpenAiActivity,
 }: AiModToolSettingsProps) => {
   const { saving, message, save } = useConfigSave(setInit);
+  const subredditName = init.subredditName;
   const base = init.config.aiSettings ?? DEFAULT_AI_SETTINGS;
 
   const [draft, setDraft] = useState<SubredditAISettings>(base);
@@ -45,23 +55,64 @@ export const AiModToolSettings = ({
   };
 
   return (
-    <section className="cg-card p-5">
-      <h2 className="text-base font-semibold text-foreground">AI Mod Tool</h2>
-      <p className="mt-1 text-sm text-muted-foreground">
-        Advisory-first AI for mod check, TL;DR summaries, and report scoring. API keys
-        stay in Devvit app settings (server-only), not in this panel.
+    <section className={settingsCardClass}>
+      <h2 className={settingsTitleClass}>AI Mod Tool</h2>
+      <p className={settingsDescClass}>
+        Advisory-first AI for mod check, TL;DR, and report scoring. API keys are set on
+        Reddit (write-only); this panel toggles features only.
       </p>
 
-      <div className="mt-4 rounded-xl border border-emerald-300/40 bg-emerald-500/10 p-4 text-sm text-emerald-950 dark:text-emerald-100">
-        <p className="font-semibold">Safe Mode</p>
-        <p className="mt-1">
-          Auto-action on Reddit is off by default. Moderators always review suggestions
-          in the queue before enforcement.
+      <div className={settingsCalloutClass}>
+        <p className="font-semibold text-foreground">1. Add an API key (mods)</p>
+        <p className="mt-1 text-[11px] text-muted-foreground sm:text-xs">
+          On Reddit, not in this dashboard. Keys are per subreddit and cannot be read back.
+        </p>
+        <ol className="mt-2 list-decimal space-y-1 break-words pl-4 text-[11px] text-muted-foreground sm:mt-3 sm:pl-5 sm:text-xs">
+          <li>
+            Open{' '}
+            <a
+              href={`https://www.reddit.com/r/${subredditName}/`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-medium text-primary hover:underline"
+            >
+              r/{subredditName}
+            </a>{' '}
+            while logged in as a moderator.
+          </li>
+          <li>
+            Subreddit <strong className="text-foreground">⋯</strong> menu →{' '}
+            <strong className="text-foreground">CollabGuard: Set AI API Keys</strong>.
+          </li>
+          <li>
+            Choose <strong className="text-foreground">Gemini</strong> or{' '}
+            <strong className="text-foreground">OpenAI</strong>, paste the key, select the
+            required confirmation, then <strong className="text-foreground">Save key</strong>.
+          </li>
+        </ol>
+        <details className="mt-2 text-[11px] text-muted-foreground sm:text-xs">
+          <summary className="cursor-pointer font-medium text-foreground">
+            Developer CLI fallback (optional)
+          </summary>
+          <p className="mt-1.5 break-all">
+            <code className="rounded bg-muted px-1 py-0.5 text-[10px]">
+              npx devvit settings set GEMINI_API_KEY
+            </code>{' '}
+            or OPENAI_API_KEY + AI_PROVIDER. Subreddit menu keys take precedence.
+          </p>
+        </details>
+      </div>
+
+      <div className="mt-3 rounded-lg border border-emerald-300/40 bg-emerald-500/10 p-3 text-xs text-emerald-950 dark:text-emerald-100 sm:mt-4 sm:p-4 sm:text-sm">
+        <p className="font-semibold">2. Enable features here</p>
+        <p className="mt-1 font-medium">Safe Mode</p>
+        <p className="mt-1 leading-snug">
+          Auto-action is off by default. Moderators review suggestions in the queue first.
         </p>
       </div>
 
       {draft.autoActionEnabled && (
-        <div className="mt-4 rounded-xl border border-red-300/50 bg-red-500/10 p-4 text-sm text-red-900 dark:text-red-100">
+        <div className="mt-3 rounded-lg border border-red-300/50 bg-red-500/10 p-3 text-xs text-red-900 dark:text-red-100 sm:text-sm">
           <p className="font-semibold">Auto-action enabled</p>
           <p className="mt-1">
             The app may remove content when AI flags a violation. Use only for testing
@@ -70,7 +121,7 @@ export const AiModToolSettings = ({
         </div>
       )}
 
-      <div className="mt-4 divide-y divide-border rounded-xl border border-border px-4">
+      <div className="mt-3 divide-y divide-border rounded-lg border border-border px-2 sm:mt-4 sm:rounded-xl sm:px-4">
         <SwitchField
           label="Enable AI Mod Tool"
           description="Master switch for AI mod check, TL;DR, and report scoring."
@@ -105,9 +156,9 @@ export const AiModToolSettings = ({
         />
       </div>
 
-      <div className="mt-5 grid gap-4 md:grid-cols-2">
-        <label className="block">
-          <span className="text-sm font-semibold text-foreground">Provider override</span>
+      <div className="mt-4 grid gap-3 sm:mt-5 sm:gap-4 md:grid-cols-2">
+        <label className="block min-w-0">
+          <span className={settingsLabelClass}>Provider override</span>
           <select
             value={draft.provider ?? ''}
             disabled={saving || !draft.enabled}
@@ -117,7 +168,7 @@ export const AiModToolSettings = ({
                 provider: value === '' ? null : (value as AgentProvider),
               });
             }}
-            className="mt-2 w-full rounded-xl border border-input bg-background px-3 py-2 text-sm text-foreground"
+            className={settingsInputClass}
           >
             {PROVIDER_OPTIONS.map((option) => (
               <option key={option.value || 'default'} value={option.value}>
@@ -127,10 +178,8 @@ export const AiModToolSettings = ({
           </select>
         </label>
 
-        <label className="block">
-          <span className="text-sm font-semibold text-foreground">
-            High-risk modmail threshold (0–10)
-          </span>
+        <label className="block min-w-0">
+          <span className={settingsLabelClass}>High-risk modmail threshold (0–10)</span>
           <input
             type="number"
             min={0}
@@ -141,14 +190,12 @@ export const AiModToolSettings = ({
             onChange={(event) =>
               patch({ violationThreshold: Number(event.target.value) })
             }
-            className="mt-2 w-full rounded-xl border border-input bg-background px-3 py-2 text-sm text-foreground"
+            className={settingsInputClass}
           />
         </label>
 
-        <label className="block">
-          <span className="text-sm font-semibold text-foreground">
-            TL;DR minimum body length
-          </span>
+        <label className="block min-w-0">
+          <span className={settingsLabelClass}>TL;DR minimum body length</span>
           <input
             type="number"
             min={100}
@@ -159,12 +206,12 @@ export const AiModToolSettings = ({
             onChange={(event) =>
               patch({ tldrMinBodyLength: Number(event.target.value) })
             }
-            className="mt-2 w-full rounded-xl border border-input bg-background px-3 py-2 text-sm text-foreground"
+            className={settingsInputClass}
           />
         </label>
 
-        <label className="block">
-          <span className="text-sm font-semibold text-foreground">Rate limit (per hour)</span>
+        <label className="block min-w-0">
+          <span className={settingsLabelClass}>Rate limit (per hour)</span>
           <input
             type="number"
             min={1}
@@ -174,42 +221,43 @@ export const AiModToolSettings = ({
             onChange={(event) =>
               patch({ rateLimitPerHour: Number(event.target.value) })
             }
-            className="mt-2 w-full rounded-xl border border-input bg-background px-3 py-2 text-sm text-foreground"
+            className={settingsInputClass}
           />
         </label>
       </div>
 
-      <div className="mt-5 flex flex-wrap items-center gap-3">
+      <div className="mt-4 flex flex-wrap items-center gap-2 sm:mt-5 sm:gap-3">
         <button
           type="button"
           disabled={saving}
           onClick={() => persist('AI Mod Tool settings saved.')}
-          className="cg-btn-primary rounded-xl px-4 py-2 text-sm font-medium disabled:opacity-50"
+          className={settingsBtnClass}
         >
           {saving ? 'Saving…' : 'Save AI settings'}
         </button>
         {message && <p className="text-xs text-muted-foreground">{message}</p>}
       </div>
 
-      <p className="mt-4 text-xs text-muted-foreground">
-        Set installation keys with{' '}
-        <code className="rounded bg-muted px-1 py-0.5">npx devvit settings set OPENAI_API_KEY</code>{' '}
-        (interactive prompt) and <code className="rounded bg-muted px-1 py-0.5">AI_PROVIDER</code>{' '}
-        before playtest.
-      </p>
-
       {onOpenAiActivity && (
-        <p className="mt-4 text-sm text-muted-foreground">
-          Live mod checks, scores, and TL;DR events are on the{' '}
+        <div className="mt-3 rounded-lg border border-primary/30 bg-primary/5 p-3 text-xs sm:mt-4 sm:p-4 sm:text-sm">
+          <p className="font-semibold text-foreground">3. Verify on AI activity</p>
+          <p className="mt-1 text-[11px] leading-snug text-muted-foreground sm:text-xs">
+            After the mod menu save and <strong className="text-foreground">Save AI settings</strong>{' '}
+            above, open the sidebar page for live{' '}
+            <strong className="text-foreground">mod checks</strong>,{' '}
+            <strong className="text-foreground">content scores</strong>,{' '}
+            <strong className="text-foreground">TL;DR</strong> events, safety skips, and the full
+            audit trail — no playtest terminal logs needed. Look for{' '}
+            <strong className="text-foreground">API key: configured</strong> on that page.
+          </p>
           <button
             type="button"
             onClick={onOpenAiActivity}
-            className="font-medium text-primary hover:underline"
+            className="cg-btn-primary mt-3 rounded-lg px-3 py-1.5 text-xs font-medium"
           >
-            AI activity
-          </button>{' '}
-          page in the sidebar.
-        </p>
+            Open AI activity
+          </button>
+        </div>
       )}
     </section>
   );
diff --git a/collab-guard/src/client/components/settings/sections/CoreSettingsSections.tsx b/collab-guard/src/client/components/settings/sections/CoreSettingsSections.tsx
index c55d95fd..0761f58b 100644
--- a/collab-guard/src/client/components/settings/sections/CoreSettingsSections.tsx
+++ b/collab-guard/src/client/components/settings/sections/CoreSettingsSections.tsx
@@ -3,6 +3,14 @@ import { useMemo, useState, type Dispatch, type SetStateAction } from 'react';
 
 import type { InitResponse } from '../../../../shared';
 import { useConfigSave } from '../../../lib/config-save';
+import {
+  settingsBtnClass,
+  settingsCardClass,
+  settingsDescClass,
+  settingsInputClass,
+  settingsLabelClass,
+  settingsTitleClass,
+} from '../../shared/page-layout';
 import { SwitchField } from '../../shared/SwitchField';
 
 type SettingsSectionProps = {
@@ -39,15 +47,15 @@ export const CollabQueueSettings = ({ init, setInit }: SettingsSectionProps) =>
   const normalizedTags = useMemo(() => normalizeListInput(tagsInput), [tagsInput]);
 
   return (
-    <section className="cg-card p-5">
-      <h2 className="text-base font-semibold text-foreground">CollabQueue settings</h2>
-      <p className="mt-1 text-sm text-muted-foreground">
+    <section className={settingsCardClass}>
+      <h2 className={settingsTitleClass}>CollabQueue settings</h2>
+      <p className={settingsDescClass}>
         Configure claim timing, escalation tags, and digest behavior for r/{init.subredditName}.
       </p>
 
-      <div className="mt-5 grid gap-5">
-        <label className="block">
-          <span className="text-sm font-semibold text-foreground">Claim timeout</span>
+      <div className="mt-4 grid gap-4 sm:mt-5 sm:gap-5">
+        <label className="block min-w-0">
+          <span className={settingsLabelClass}>Claim timeout</span>
           <input
             type="number"
             min={1}
@@ -55,7 +63,7 @@ export const CollabQueueSettings = ({ init, setInit }: SettingsSectionProps) =>
             value={claimTimeoutMinutes}
             onChange={(event) => setClaimTimeoutMinutes(Number(event.target.value))}
             disabled={saving}
-            className="mt-2 w-full rounded-xl border border-input bg-background px-3 py-2 text-sm text-foreground"
+            className={settingsInputClass}
           />
           <span className="mt-1 block text-xs text-muted-foreground">
             Claims expire after this many minutes if not resolved or released.
@@ -70,14 +78,14 @@ export const CollabQueueSettings = ({ init, setInit }: SettingsSectionProps) =>
           onChange={setDailyDigestEnabled}
         />
 
-        <label className="block">
-          <span className="text-sm font-semibold text-foreground">Escalation tags</span>
+        <label className="block min-w-0">
+          <span className={settingsLabelClass}>Escalation tags</span>
           <textarea
-            rows={6}
+            rows={4}
             value={tagsInput}
             onChange={(event) => setTagsInput(event.target.value)}
             disabled={saving}
-            className="mt-2 w-full rounded-xl border border-input bg-background px-3 py-2 text-sm text-foreground"
+            className={settingsInputClass}
             placeholder="One tag per line"
           />
           <span className="mt-1 block text-xs text-muted-foreground">
@@ -108,7 +116,7 @@ export const CollabQueueSettings = ({ init, setInit }: SettingsSectionProps) =>
               setDailyDigestEnabled(data.config.dailyDigestEnabled);
             });
           }}
-          className="cg-btn-primary rounded-xl px-4 py-2 text-sm font-medium disabled:opacity-50"
+          className={settingsBtnClass}
         >
           {saving ? 'Saving…' : 'Save queue settings'}
         </button>
@@ -119,32 +127,33 @@ export const CollabQueueSettings = ({ init, setInit }: SettingsSectionProps) =>
 };
 
 export const VotingSettings = ({ init }: SettingsSectionProps) => (
-  <section className="cg-card p-5">
-    <h2 className="text-base font-semibold text-foreground">Voting settings</h2>
-    <p className="mt-1 text-sm text-muted-foreground">
-      Consensus Review is enabled for r/{init.subredditName}. It is human-controlled
-      and records team decisions without taking Reddit enforcement actions.
+  <section className={settingsCardClass}>
+    <h2 className={settingsTitleClass}>Voting settings</h2>
+    <p className={settingsDescClass}>
+      Consensus Review for r/{init.subredditName}. Human-controlled; no Reddit enforcement.
     </p>
-    <div className="mt-5 grid gap-3 md:grid-cols-3">
-      <div className="rounded-xl border border-border bg-muted/30 p-4">
-        <p className="text-sm font-semibold text-foreground">Default quorum</p>
-        <p className="mt-2 text-2xl font-semibold text-foreground">2</p>
-        <p className="mt-1 text-xs text-muted-foreground">
-          Used by dashboard-created reviews.
+    <div className="mt-4 grid grid-cols-3 gap-2 sm:mt-5 sm:gap-3">
+      <div className="rounded-lg border border-border bg-muted/30 p-2.5 sm:p-4">
+        <p className="text-[10px] font-semibold text-foreground sm:text-sm">Quorum</p>
+        <p className="mt-1 text-lg font-semibold text-foreground sm:mt-2 sm:text-2xl">2</p>
+        <p className="mt-0.5 text-[10px] text-muted-foreground sm:text-xs">
+          Dashboard reviews
         </p>
       </div>
-      <div className="rounded-xl border border-border bg-muted/30 p-4">
-        <p className="text-sm font-semibold text-foreground">Default duration</p>
-        <p className="mt-2 text-2xl font-semibold text-foreground">24h</p>
-        <p className="mt-1 text-xs text-muted-foreground">
-          Reviews can be closed by the starter after human confirmation.
+      <div className="rounded-lg border border-border bg-muted/30 p-2.5 sm:p-4">
+        <p className="text-[10px] font-semibold text-foreground sm:text-sm">Duration</p>
+        <p className="mt-1 text-lg font-semibold text-foreground sm:mt-2 sm:text-2xl">24h</p>
+        <p className="mt-0.5 text-[10px] text-muted-foreground sm:text-xs">
+          Human close
         </p>
       </div>
-      <div className="rounded-xl border border-border bg-muted/30 p-4">
-        <p className="text-sm font-semibold text-foreground">Decision method</p>
-        <p className="mt-2 text-lg font-semibold text-foreground">Simple majority</p>
-        <p className="mt-1 text-xs text-muted-foreground">
-          Stored with each vote case for audit clarity.
+      <div className="rounded-lg border border-border bg-muted/30 p-2.5 sm:p-4">
+        <p className="text-[10px] font-semibold text-foreground sm:text-sm">Method</p>
+        <p className="mt-1 text-sm font-semibold text-foreground sm:mt-2 sm:text-lg">
+          Majority
+        </p>
+        <p className="mt-0.5 text-[10px] text-muted-foreground sm:text-xs">
+          Per vote case
         </p>
       </div>
     </div>
@@ -152,13 +161,12 @@ export const VotingSettings = ({ init }: SettingsSectionProps) => (
 );
 
 export const TeamInsightsSettings = ({ init }: SettingsSectionProps) => (
-  <section className="cg-card p-5">
-    <h2 className="text-base font-semibold text-foreground">Team Insights settings</h2>
-    <p className="mt-1 text-sm text-muted-foreground">
-      Team Insights are active for r/{init.subredditName}. They aggregate
-      subreddit-scoped AuditEvents and Gentle Nudge outcomes for team workflow health.
+  <section className={settingsCardClass}>
+    <h2 className={settingsTitleClass}>Team Insights settings</h2>
+    <p className={settingsDescClass}>
+      Active for r/{init.subredditName}. Aggregates audit events and nudge outcomes.
     </p>
-    <div className="mt-5 rounded-xl border border-border bg-muted/30 p-4 text-sm text-muted-foreground">
+    <div className="mt-4 rounded-lg border border-border bg-muted/30 p-3 text-xs text-muted-foreground sm:mt-5 sm:p-4 sm:text-sm">
       Insights are read-only, moderator-only, and do not expose private note bodies
       or full Reddit content. They are intentionally not a public ranking or
       punishment system.
@@ -231,21 +239,21 @@ export const SentiSentrySettings = ({ init, setInit }: SettingsSectionProps) =>
 };
 
 export const PlatformSettings = ({ init }: SettingsSectionProps) => (
-  <section className="cg-card p-5">
-    <h2 className="text-base font-semibold text-foreground">Platform settings</h2>
-    <p className="mt-1 text-sm text-muted-foreground">
+  <section className={settingsCardClass}>
+    <h2 className={settingsTitleClass}>Platform settings</h2>
+    <p className={settingsDescClass}>
       Deployment and compliance information for the current subreddit install.
     </p>
-    <dl className="mt-5 grid gap-3 text-sm md:grid-cols-2">
-      <div className="rounded-xl border border-border bg-muted/30 p-4">
+    <dl className="mt-4 grid gap-2 text-xs sm:mt-5 sm:gap-3 sm:text-sm md:grid-cols-2">
+      <div className="rounded-lg border border-border bg-muted/30 p-3 sm:rounded-xl sm:p-4">
         <dt className="text-muted-foreground">Subreddit</dt>
         <dd className="mt-1 font-medium text-foreground">r/{init.subredditName}</dd>
       </div>
-      <div className="rounded-xl border border-border bg-muted/30 p-4">
+      <div className="rounded-lg border border-border bg-muted/30 p-3 sm:rounded-xl sm:p-4">
         <dt className="text-muted-foreground">Config version</dt>
         <dd className="mt-1 font-medium text-foreground">{init.config.configVersion}</dd>
       </div>
-      <div className="rounded-xl border border-border bg-muted/30 p-4">
+      <div className="rounded-lg border border-border bg-muted/30 p-3 sm:rounded-xl sm:p-4">
         <dt className="text-muted-foreground">Setup completed</dt>
         <dd className="mt-1 font-medium text-foreground">
           {init.config.setupCompletedAt
@@ -253,7 +261,7 @@ export const PlatformSettings = ({ init }: SettingsSectionProps) => (
             : 'Not completed'}
         </dd>
       </div>
-      <div className="rounded-xl border border-border bg-muted/30 p-4">
+      <div className="rounded-lg border border-border bg-muted/30 p-3 sm:rounded-xl sm:p-4">
         <dt className="text-muted-foreground">AI required</dt>
         <dd className="mt-1 font-medium text-foreground">
           {init.config.aiSettings?.enabled ? 'Optional (enabled)' : 'No'}
diff --git a/collab-guard/src/client/components/settings/sections/GentleNudgeSettings.tsx b/collab-guard/src/client/components/settings/sections/GentleNudgeSettings.tsx
index 6df6db0a..7d8e97c5 100644
--- a/collab-guard/src/client/components/settings/sections/GentleNudgeSettings.tsx
+++ b/collab-guard/src/client/components/settings/sections/GentleNudgeSettings.tsx
@@ -13,6 +13,13 @@ import type {
   UpdateConfigResponse,
 } from '../../../../shared';
 import { readErrorMessage } from '../../../lib/api';
+import {
+  settingsBtnClass,
+  settingsCardClass,
+  settingsDescClass,
+  settingsInputClass,
+  settingsTitleClass,
+} from '../../shared/page-layout';
 import { SwitchField } from '../../shared/SwitchField';
 
 const NUDGE_TRIGGER_OPTIONS: Array<{
@@ -320,12 +327,10 @@ export const GentleNudgeSettings = ({ init, setInit }: GentleNudgeSettingsProps)
   const allowlistPreview = normalizeWatchlistInput(allowlistInput);
 
   return (
-    <section className="cg-card p-5">
+    <section className={settingsCardClass}>
       <div className="mb-2">
-        <h2 className="text-base font-semibold text-foreground">
-          Gentle Nudge settings
-        </h2>
-        <p className="mt-0.5 text-xs text-muted-foreground">
+        <h2 className={settingsTitleClass}>Gentle Nudge settings</h2>
+        <p className={settingsDescClass}>
           Gentle Nudge is a polite reminder, not enforcement. Settings stay
           local to r/{init.subredditName}.
         </p>
@@ -356,7 +361,7 @@ export const GentleNudgeSettings = ({ init, setInit }: GentleNudgeSettingsProps)
               value={nudgeModeDraft}
               onChange={(event) => setNudgeModeDraft(event.target.value as NudgeMode)}
               disabled={nudgeConfigSaving}
-              className="mt-1 w-full rounded-xl border border-input bg-background px-3 py-2 text-sm normal-case tracking-normal text-foreground"
+              className={`${settingsInputClass} normal-case tracking-normal`}
             >
               {NUDGE_MODE_OPTIONS.map((option) => (
                 <option key={option.value} value={option.value}>
@@ -376,7 +381,7 @@ export const GentleNudgeSettings = ({ init, setInit }: GentleNudgeSettingsProps)
                 )
               }
               disabled={nudgeConfigSaving}
-              className="mt-1 w-full rounded-xl border border-input bg-background px-3 py-2 text-sm normal-case tracking-normal text-foreground"
+              className={`${settingsInputClass} normal-case tracking-normal`}
             >
               {NUDGE_STRICTNESS_OPTIONS.map((option) => (
                 <option key={option.value} value={option.value}>
@@ -473,7 +478,7 @@ lol"
                 setThreadCooldownHourlyDraft(Number(event.target.value))
               }
               disabled={nudgeConfigSaving || !threadCooldownEnabledDraft}
-              className="mt-1 w-full rounded-xl border border-input bg-background px-3 py-2 text-sm normal-case tracking-normal text-foreground"
+              className={`${settingsInputClass} normal-case tracking-normal`}
             />
           </label>
           <label className="block text-xs font-semibold uppercase tracking-wide text-muted-foreground">
@@ -487,7 +492,7 @@ lol"
                 setThreadCooldownDailyDraft(Number(event.target.value))
               }
               disabled={nudgeConfigSaving || !threadCooldownEnabledDraft}
-              className="mt-1 w-full rounded-xl border border-input bg-background px-3 py-2 text-sm normal-case tracking-normal text-foreground"
+              className={`${settingsInputClass} normal-case tracking-normal`}
             />
           </label>
         </div>
diff --git a/collab-guard/src/client/components/shared/CaseActionBar.tsx b/collab-guard/src/client/components/shared/CaseActionBar.tsx
index 40741df7..ec8858d4 100644
--- a/collab-guard/src/client/components/shared/CaseActionBar.tsx
+++ b/collab-guard/src/client/components/shared/CaseActionBar.tsx
@@ -16,7 +16,7 @@ type CaseActionBarProps = {
 };
 
 const actionBtn =
-  'inline-flex items-center justify-center gap-2 rounded-xl px-3 py-2 text-sm font-medium transition disabled:cursor-not-allowed disabled:opacity-50';
+  'inline-flex max-w-full items-center justify-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs font-medium transition disabled:cursor-not-allowed disabled:opacity-50 xl:gap-2 xl:rounded-xl xl:px-3 xl:py-2 xl:text-sm';
 
 export const CaseActionBar = ({
   canClaim,
@@ -27,7 +27,7 @@ export const CaseActionBar = ({
   onStatusChange,
 }: CaseActionBarProps) => {
   return (
-    <div className="mt-4 flex flex-wrap gap-2">
+    <div className="mt-3 flex flex-wrap gap-1.5 xl:mt-4 xl:gap-2">
       <button
         type="button"
         onClick={onClaim}
diff --git a/collab-guard/src/client/components/shared/index.ts b/collab-guard/src/client/components/shared/index.ts
index df1f5852..1ec7bb20 100644
--- a/collab-guard/src/client/components/shared/index.ts
+++ b/collab-guard/src/client/components/shared/index.ts
@@ -3,6 +3,23 @@ export { EmptyState } from './EmptyState';
 export { ErrorBanner } from './ErrorBanner';
 export { LoadingState } from './LoadingState';
 export { SectionCard } from './SectionCard';
+export {
+  ModulePageHeader,
+  ModulePageShell,
+  modulePageBtnClass,
+  modulePageShellClass,
+  moduleSectionCardClass,
+  moduleSectionTitleClass,
+  moduleStatCardClass,
+  moduleStatValueClass,
+  settingsBtnClass,
+  settingsCalloutClass,
+  settingsCardClass,
+  settingsDescClass,
+  settingsInputClass,
+  settingsLabelClass,
+  settingsTitleClass,
+} from './page-layout';
 export { StatusBadge } from './StatusBadge';
 export {
   IconAlertTriangle,
diff --git a/collab-guard/src/client/components/shared/page-layout.tsx b/collab-guard/src/client/components/shared/page-layout.tsx
new file mode 100644
index 00000000..8c9f0ebd
--- /dev/null
+++ b/collab-guard/src/client/components/shared/page-layout.tsx
@@ -0,0 +1,81 @@
+import type { ReactNode } from 'react';
+
+/** Outer shell for sidebar module pages (queue, voting, insights, audit). */
+export const modulePageShellClass =
+  'mx-auto w-full min-w-0 max-w-7xl overflow-x-hidden px-3 py-3 sm:px-6 sm:py-6';
+
+export const modulePageKickerClass =
+  'text-[10px] font-semibold uppercase tracking-[0.14em] text-primary sm:text-xs sm:tracking-[0.2em]';
+
+export const modulePageTitleClass =
+  'mt-0.5 text-lg font-semibold leading-tight text-foreground sm:mt-2 sm:text-2xl';
+
+export const modulePageDescClass =
+  'mt-1 text-xs leading-snug text-muted-foreground sm:mt-2 sm:max-w-3xl sm:text-sm sm:leading-normal';
+
+export const modulePageBtnClass =
+  'rounded-lg border border-border px-2.5 py-1.5 text-xs text-foreground hover:bg-muted disabled:opacity-50 sm:rounded-xl sm:px-3 sm:py-2 sm:text-sm';
+
+export const moduleStatCardClass =
+  'rounded-lg border border-border bg-card p-3 shadow-sm sm:rounded-2xl sm:p-4';
+
+export const moduleStatValueClass =
+  'mt-1.5 text-xl font-semibold tabular-nums text-foreground sm:mt-3 sm:text-3xl';
+
+export const moduleSectionCardClass =
+  'min-w-0 max-w-full overflow-hidden rounded-lg border border-border bg-card p-3 shadow-sm sm:rounded-2xl sm:p-5';
+
+export const moduleSectionTitleClass =
+  'text-sm font-semibold text-foreground sm:text-lg';
+
+type ModulePageHeaderProps = {
+  kicker: string;
+  title: string;
+  description: string;
+  actions?: ReactNode;
+};
+
+export const ModulePageHeader = ({
+  kicker,
+  title,
+  description,
+  actions,
+}: ModulePageHeaderProps) => (
+  <div className="mb-3 flex flex-col gap-2 sm:mb-6 sm:gap-3 lg:flex-row lg:items-start lg:justify-between">
+    <div className="min-w-0">
+      <p className={modulePageKickerClass}>{kicker}</p>
+      <h1 className={modulePageTitleClass}>{title}</h1>
+      <p className={modulePageDescClass}>{description}</p>
+    </div>
+    {actions ? (
+      <div className="flex flex-wrap gap-1.5 sm:gap-2">{actions}</div>
+    ) : null}
+  </div>
+);
+
+export const ModulePageShell = ({
+  children,
+  className = '',
+}: {
+  children: ReactNode;
+  className?: string;
+}) => <div className={`${modulePageShellClass} ${className}`.trim()}>{children}</div>;
+
+/** Settings section cards — prevents horizontal overflow in Devvit iframe. */
+export const settingsCardClass =
+  'cg-card max-w-full overflow-hidden break-words p-3 sm:p-5';
+
+export const settingsTitleClass = 'text-sm font-semibold text-foreground sm:text-base';
+
+export const settingsDescClass = 'mt-1 text-xs text-muted-foreground sm:text-sm';
+
+export const settingsCalloutClass =
+  'mt-3 rounded-lg border border-border bg-muted/20 p-3 text-xs sm:mt-4 sm:rounded-xl sm:p-4 sm:text-sm';
+
+export const settingsInputClass =
+  'mt-1.5 w-full max-w-full rounded-lg border border-input bg-background px-2.5 py-1.5 text-xs text-foreground sm:mt-2 sm:rounded-xl sm:px-3 sm:py-2 sm:text-sm';
+
+export const settingsLabelClass = 'text-xs font-semibold text-foreground sm:text-sm';
+
+export const settingsBtnClass =
+  'cg-btn-primary rounded-lg px-3 py-1.5 text-xs font-medium disabled:opacity-50 sm:rounded-xl sm:px-4 sm:py-2 sm:text-sm';
diff --git a/collab-guard/src/client/entries/game/index.html b/collab-guard/src/client/entries/game/index.html
index c8c0f7f6..be02051e 100644
--- a/collab-guard/src/client/entries/game/index.html
+++ b/collab-guard/src/client/entries/game/index.html
@@ -8,8 +8,8 @@
     />
     <title>CollabGuard Game</title>
   </head>
-  <body class="h-full">
-    <div id="root" class="h-full"></div>
+  <body class="h-full overflow-x-hidden">
+    <div id="root" class="h-full overflow-x-hidden"></div>
     <script type="module" src="./index.tsx"></script>
   </body>
 </html>
diff --git a/collab-guard/src/client/entries/splash/index.html b/collab-guard/src/client/entries/splash/index.html
index d3f4814f..6fa08104 100644
--- a/collab-guard/src/client/entries/splash/index.html
+++ b/collab-guard/src/client/entries/splash/index.html
@@ -8,8 +8,8 @@
     />
     <title>devvit</title>
   </head>
-  <body class="h-full">
-    <div id="root" class="h-full"></div>
+  <body class="h-full overflow-hidden">
+    <div id="root" class="h-full overflow-hidden"></div>
     <script type="module" src="./index.tsx"></script>
   </body>
 </html>
diff --git a/collab-guard/src/client/entries/splash/index.tsx b/collab-guard/src/client/entries/splash/index.tsx
index 67099564..b28835e0 100644
--- a/collab-guard/src/client/entries/splash/index.tsx
+++ b/collab-guard/src/client/entries/splash/index.tsx
@@ -12,28 +12,26 @@ const PRIVACY_URL =
 
 export const Splash = () => {
   return (
-    <div className="flex min-h-screen flex-col items-center justify-center gap-5 bg-background px-6 py-8 text-foreground">
+    <div className="box-border flex h-full min-h-0 w-full flex-col items-center justify-center gap-2 overflow-hidden bg-background px-4 py-3 text-foreground sm:gap-3 sm:py-4">
       <img
         src="/snoo.png"
         alt="CollabGuard mascot"
-        className="h-56 w-auto max-w-[80vw] object-contain drop-shadow-sm sm:h-72"
+        className="h-24 w-auto max-h-[32vh] max-w-[min(72vw,220px)] shrink object-contain drop-shadow-sm sm:h-32 sm:max-h-[36vh]"
       />
-      <div className="flex flex-col items-center gap-2">
-        <h1 className="text-center text-2xl font-bold">CollabGuard</h1>
-        <p className="text-center text-sm text-muted-foreground">
-          Hey {context.username ?? 'mod'} - open the workspace to coordinate your modqueue.
+      <div className="flex max-w-xs flex-col items-center gap-1 text-center">
+        <h1 className="text-lg font-bold leading-tight sm:text-xl">CollabGuard</h1>
+        <p className="text-xs leading-snug text-muted-foreground sm:text-sm">
+          Hey {context.username ?? 'mod'} — open the workspace to coordinate your modqueue.
         </p>
       </div>
-      <div className="mt-4 flex items-center justify-center">
-        <button
-          type="button"
-          className="cg-btn-primary flex h-10 w-auto cursor-pointer items-center justify-center rounded-full px-4 transition-colors"
-          onClick={(e) => requestExpandedMode(e.nativeEvent, 'game')}
-        >
-          Open workspace
-        </button>
-      </div>
-      <footer className="flex flex-wrap items-center justify-center gap-3 pt-1 text-[0.8em] text-muted-foreground">
+      <button
+        type="button"
+        className="cg-btn-primary flex h-9 shrink-0 cursor-pointer items-center justify-center rounded-full px-4 text-sm transition-colors sm:h-10"
+        onClick={(e) => requestExpandedMode(e.nativeEvent, 'game')}
+      >
+        Open workspace
+      </button>
+      <footer className="flex shrink-0 flex-wrap items-center justify-center gap-2 pt-0.5 text-[11px] text-muted-foreground sm:gap-3 sm:text-xs">
         <button
           type="button"
           className="cursor-pointer transition-colors hover:text-foreground"
diff --git a/collab-guard/src/client/hooks/index.ts b/collab-guard/src/client/hooks/index.ts
index ac823df2..d5150522 100644
--- a/collab-guard/src/client/hooks/index.ts
+++ b/collab-guard/src/client/hooks/index.ts
@@ -9,3 +9,4 @@ export { usePresence } from './usePresence';
 export { useRealtime } from './useRealtime';
 export { useTheme } from './use-theme';
 export type { Theme } from './use-theme';
+export { useIsMdUp, useIsXlUp, useMediaQuery } from './use-media-query';
diff --git a/collab-guard/src/client/hooks/use-media-query.ts b/collab-guard/src/client/hooks/use-media-query.ts
new file mode 100644
index 00000000..6369b21b
--- /dev/null
+++ b/collab-guard/src/client/hooks/use-media-query.ts
@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react';
+
+export const useMediaQuery = (query: string): boolean => {
+  const [matches, setMatches] = useState(() => {
+    if (typeof window === 'undefined') return false;
+    return window.matchMedia(query).matches;
+  });
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return undefined;
+    const media = window.matchMedia(query);
+    const onChange = () => setMatches(media.matches);
+    onChange();
+    media.addEventListener('change', onChange);
+    return () => media.removeEventListener('change', onChange);
+  }, [query]);
+
+  return matches;
+};
+
+/** Tailwind `md` — sidebar docked from this width up. */
+export const useIsMdUp = (): boolean => useMediaQuery('(min-width: 768px)');
+
+/** Tailwind `xl` — three-column queue layout from this width up. */
+export const useIsXlUp = (): boolean => useMediaQuery('(min-width: 1280px)');
diff --git a/collab-guard/src/client/index.css b/collab-guard/src/client/index.css
index e5d9ba2b..a67f1e97 100644
--- a/collab-guard/src/client/index.css
+++ b/collab-guard/src/client/index.css
@@ -138,13 +138,25 @@
     border-color: var(--border);
   }
 
+  html,
+  body {
+    overflow-x: hidden;
+    max-width: 100%;
+  }
+
   body {
     background-color: var(--background);
     color: var(--foreground);
     font-family: var(--font-sans);
+    font-size: 14px;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
+
+  #root {
+    max-width: 100%;
+    overflow-x: hidden;
+  }
 }
 
 /* Reddit iframe can style bare <button>; keep brand actions on design tokens. */
@@ -153,6 +165,8 @@
     border-radius: var(--radius-xl);
     border: 1px solid var(--border);
     background-color: var(--card);
+    max-width: 100%;
+    min-width: 0;
   }
 
   .cg-control {
diff --git a/collab-guard/src/server/agent/ai-config.ts b/collab-guard/src/server/agent/ai-config.ts
index bf6b916c..d6e4d979 100644
--- a/collab-guard/src/server/agent/ai-config.ts
+++ b/collab-guard/src/server/agent/ai-config.ts
@@ -6,6 +6,7 @@ import {
 } from '../../shared/ai';
 import type { SubredditConfig } from '../../shared/config';
 import { DEFAULT_AGENT_RATE_LIMIT_PER_HOUR } from '../../shared/config';
+import { getSubredditAIKeyMaterial } from '../core/ai-keys';
 
 export type InstallationAIConfig = {
   provider: AgentProvider;
@@ -35,9 +36,15 @@ const normalizeProvider = (value: string | undefined): AgentProvider => {
   return 'gemini';
 };
 
-export const getInstallationAIConfig = async (): Promise<InstallationAIConfig> => {
+export const getInstallationAIConfig = async (
+  subredditId: string
+): Promise<InstallationAIConfig> => {
+  const redisKeys = await getSubredditAIKeyMaterial(subredditId);
+
   const provider = normalizeProvider(
-    (await readSettingString('AI_PROVIDER')) ?? readEnvString('AI_PROVIDER')
+    redisKeys.preferredProvider ??
+      (await readSettingString('AI_PROVIDER')) ??
+      readEnvString('AI_PROVIDER')
   );
 
   const thresholdRaw =
@@ -52,9 +59,15 @@ export const getInstallationAIConfig = async (): Promise<InstallationAIConfig> =
   return {
     provider,
     geminiKey:
-      (await readSettingString('GEMINI_API_KEY')) ?? readEnvString('GEMINI_API_KEY') ?? null,
+      redisKeys.geminiKey ??
+      (await readSettingString('GEMINI_API_KEY')) ??
+      readEnvString('GEMINI_API_KEY') ??
+      null,
     openaiKey:
-      (await readSettingString('OPENAI_API_KEY')) ?? readEnvString('OPENAI_API_KEY') ?? null,
+      redisKeys.openaiKey ??
+      (await readSettingString('OPENAI_API_KEY')) ??
+      readEnvString('OPENAI_API_KEY') ??
+      null,
     violationThreshold,
   };
 };
diff --git a/collab-guard/src/server/agent/call-structured.ts b/collab-guard/src/server/agent/call-structured.ts
index fdad4889..a9c5249d 100644
--- a/collab-guard/src/server/agent/call-structured.ts
+++ b/collab-guard/src/server/agent/call-structured.ts
@@ -36,7 +36,8 @@ export type StructuredAICallResult =
 export const callStructuredAI = async (
   input: StructuredAICallInput
 ): Promise<StructuredAICallResult> => {
-  const installation = input.installation ?? (await getInstallationAIConfig());
+  const installation =
+    input.installation ?? (await getInstallationAIConfig(input.subredditId));
   const ai = resolveAISettings(input.subredditConfig, installation);
 
   if (!ai.enabled) {
diff --git a/collab-guard/src/server/core/ai-content-score.ts b/collab-guard/src/server/core/ai-content-score.ts
index 6c860ec6..e86ff3b1 100644
--- a/collab-guard/src/server/core/ai-content-score.ts
+++ b/collab-guard/src/server/core/ai-content-score.ts
@@ -45,7 +45,7 @@ export const runContentScoreForReport = async (input: {
   reportReason?: string | null;
 }): Promise<{ status: 'scored' | 'skipped' | 'failed'; message: string }> => {
   const config = await getConfig(input.subredditId);
-  const installation = await getInstallationAIConfig();
+  const installation = await getInstallationAIConfig(input.subredditId);
   const ai = resolveAISettings(config, installation);
 
   if (!ai.enabled) {
diff --git a/collab-guard/src/server/core/ai-keys.test.ts b/collab-guard/src/server/core/ai-keys.test.ts
new file mode 100644
index 00000000..26180e22
--- /dev/null
+++ b/collab-guard/src/server/core/ai-keys.test.ts
@@ -0,0 +1,38 @@
+import { describe, expect, it } from 'vitest';
+
+import { normalizeSetAiApiKeyFormValues } from './menu';
+
+describe('normalizeSetAiApiKeyFormValues', () => {
+  it('accepts valid gemini key with confirmation', () => {
+    const result = normalizeSetAiApiKeyFormValues({
+      provider: 'gemini',
+      apiKey: 'test-gemini-key-12345',
+      confirmWriteOnly: 'acknowledged',
+    });
+    expect(result).toEqual({
+      ok: true,
+      provider: 'gemini',
+      apiKey: 'test-gemini-key-12345',
+    });
+  });
+
+  it('rejects missing confirmation', () => {
+    const result = normalizeSetAiApiKeyFormValues({
+      provider: ['openai'],
+      apiKey: 'sk-test-openai-key-12345',
+    });
+    expect(result.ok).toBe(false);
+    if (!result.ok) {
+      expect(result.message).toContain('confirmation');
+    }
+  });
+
+  it('rejects unknown provider', () => {
+    const result = normalizeSetAiApiKeyFormValues({
+      provider: 'anthropic',
+      apiKey: 'some-key-value-12345',
+      confirmWriteOnly: 'acknowledged',
+    });
+    expect(result.ok).toBe(false);
+  });
+});
diff --git a/collab-guard/src/server/core/ai-keys.ts b/collab-guard/src/server/core/ai-keys.ts
new file mode 100644
index 00000000..3821a7fb
--- /dev/null
+++ b/collab-guard/src/server/core/ai-keys.ts
@@ -0,0 +1,63 @@
+import { redis } from '@devvit/web/server';
+import type { AgentProvider } from '../../shared/agent';
+
+export type SubredditAIKeyProvider = 'gemini' | 'openai';
+
+const providerKey = (subredditId: string, provider: SubredditAIKeyProvider): string =>
+  `aikey:${subredditId}:${provider}`;
+
+const preferredProviderKey = (subredditId: string): string =>
+  `aiprovider:${subredditId}`;
+
+const normalizeStoredKey = (value: string | null | undefined): string | null => {
+  const trimmed = typeof value === 'string' ? value.trim() : '';
+  return trimmed.length > 0 ? trimmed : null;
+};
+
+export type SubredditAIKeyMaterial = {
+  geminiKey: string | null;
+  openaiKey: string | null;
+  preferredProvider: AgentProvider | null;
+};
+
+export const saveSubredditAIProviderKey = async (input: {
+  subredditId: string;
+  provider: SubredditAIKeyProvider;
+  apiKey: string;
+}): Promise<void> => {
+  const trimmed = input.apiKey.trim();
+  if (trimmed.length < 8) {
+    throw new Error('API key looks too short. Paste the full provider key.');
+  }
+
+  await redis.set(providerKey(input.subredditId, input.provider), trimmed);
+  await redis.set(preferredProviderKey(input.subredditId), input.provider);
+};
+
+export const getSubredditAIKeyMaterial = async (
+  subredditId: string
+): Promise<SubredditAIKeyMaterial> => {
+  const [geminiRaw, openaiRaw, preferredRaw] = await Promise.all([
+    redis.get(providerKey(subredditId, 'gemini')),
+    redis.get(providerKey(subredditId, 'openai')),
+    redis.get(preferredProviderKey(subredditId)),
+  ]);
+
+  const preferred =
+    preferredRaw === 'openai' || preferredRaw === 'gemini' ? preferredRaw : null;
+
+  return {
+    geminiKey: normalizeStoredKey(geminiRaw),
+    openaiKey: normalizeStoredKey(openaiRaw),
+    preferredProvider: preferred,
+  };
+};
+
+export const subredditHasProviderKey = async (
+  subredditId: string,
+  provider: AgentProvider
+): Promise<boolean> => {
+  if (provider !== 'gemini' && provider !== 'openai') return false;
+  const material = await getSubredditAIKeyMaterial(subredditId);
+  return provider === 'openai' ? Boolean(material.openaiKey) : Boolean(material.geminiKey);
+};
diff --git a/collab-guard/src/server/core/ai-mod-check.ts b/collab-guard/src/server/core/ai-mod-check.ts
index 17a8be72..d5dd14c6 100644
--- a/collab-guard/src/server/core/ai-mod-check.ts
+++ b/collab-guard/src/server/core/ai-mod-check.ts
@@ -58,7 +58,7 @@ export const runModCheck = async (input: {
   skipDedup?: boolean;
 }): Promise<{ status: 'checked' | 'skipped' | 'failed'; message: string }> => {
   const config = await getConfig(input.subredditId);
-  const installation = await getInstallationAIConfig();
+  const installation = await getInstallationAIConfig(input.subredditId);
   const ai = resolveAISettings(config, installation);
 
   if (!ai.enabled || !ai.modCheckEnabled) {
diff --git a/collab-guard/src/server/core/ai-tldr.ts b/collab-guard/src/server/core/ai-tldr.ts
index 2a3fbf5d..1c687b10 100644
--- a/collab-guard/src/server/core/ai-tldr.ts
+++ b/collab-guard/src/server/core/ai-tldr.ts
@@ -46,7 +46,7 @@ export const runTldrForPost = async (input: {
   source?: 'trigger' | 'manual';
 }): Promise<{ status: 'posted' | 'skipped' | 'failed'; message: string }> => {
   const config = await getConfig(input.subredditId);
-  const installation = await getInstallationAIConfig();
+  const installation = await getInstallationAIConfig(input.subredditId);
   const ai = resolveAISettings(config, installation);
 
   const hydrated = await hydratePostForTldr({
diff --git a/collab-guard/src/server/core/menu.ts b/collab-guard/src/server/core/menu.ts
index 24904420..df8ec377 100644
--- a/collab-guard/src/server/core/menu.ts
+++ b/collab-guard/src/server/core/menu.ts
@@ -60,6 +60,14 @@ export type ResolveAndLogFormValues = {
   confirm?: boolean | string;
 };
 
+export type SetAiApiKeyFormValues = {
+  provider?: string | string[];
+  apiKey?: string;
+  confirmWriteOnly?: string | string[];
+};
+
+export const MAX_MENU_API_KEY_LENGTH = 512;
+
 export const MAX_MENU_CASE_NOTE_LENGTH = 500;
 export const MAX_MENU_NUDGE_COMMENT_BODY_LENGTH = 10_000;
 export const MAX_MENU_REVIEW_QUESTION_LENGTH = 240;
@@ -330,6 +338,42 @@ export const normalizeResolveAndLogFormValues = (
   };
 };
 
+export const normalizeSetAiApiKeyFormValues = (
+  values: SetAiApiKeyFormValues
+):
+  | { ok: true; provider: 'gemini' | 'openai'; apiKey: string }
+  | { ok: false; message: string } => {
+  const providerRaw = firstSelectedValue(values.provider);
+  if (providerRaw !== 'gemini' && providerRaw !== 'openai') {
+    return { ok: false, message: 'Select Gemini or OpenAI as the provider.' };
+  }
+
+  const apiKey = values.apiKey?.trim() ?? '';
+  if (!apiKey) {
+    return { ok: false, message: 'Paste the provider API key.' };
+  }
+  if (apiKey.length < 8) {
+    return { ok: false, message: 'API key looks too short. Paste the full key.' };
+  }
+  if (apiKey.length > MAX_MENU_API_KEY_LENGTH) {
+    return {
+      ok: false,
+      message: `API key must be ${MAX_MENU_API_KEY_LENGTH} characters or fewer.`,
+    };
+  }
+
+  const confirmation = firstSelectedValue(values.confirmWriteOnly);
+  if (confirmation !== 'acknowledged') {
+    return {
+      ok: false,
+      message:
+        'Select the confirmation: you understand the key is write-only and cannot be viewed again.',
+    };
+  }
+
+  return { ok: true, provider: providerRaw, apiKey };
+};
+
 export const buildResolutionLoggedAuditEvent = ({
   subredditId,
   itemId,
diff --git a/collab-guard/src/server/routes/api.ts b/collab-guard/src/server/routes/api.ts
index 268f22de..be68ee9e 100644
--- a/collab-guard/src/server/routes/api.ts
+++ b/collab-guard/src/server/routes/api.ts
@@ -1060,7 +1060,7 @@ api.get('/ai/status', async (c) => {
   try {
     await requireModerator(scope.subredditName);
     const config = await getConfig(scope.subredditId);
-    const installation = await getInstallationAIConfig();
+    const installation = await getInstallationAIConfig(scope.subredditId);
     const ai = resolveAISettings(config, installation);
     return c.json<GetAIStatusResponse>(
       {
diff --git a/collab-guard/src/server/routes/forms.ts b/collab-guard/src/server/routes/forms.ts
index dafd0481..9cab60e1 100644
--- a/collab-guard/src/server/routes/forms.ts
+++ b/collab-guard/src/server/routes/forms.ts
@@ -6,12 +6,15 @@ import {
   normalizeCaseNoteFormValues,
   normalizeResolveAndLogFormValues,
   normalizeSendGentleNudgeFormValues,
+  normalizeSetAiApiKeyFormValues,
   normalizeStartConsensusReviewFormValues,
   type CaseNoteFormValues,
   type ResolveAndLogFormValues,
   type SendGentleNudgeFormValues,
+  type SetAiApiKeyFormValues,
   type StartConsensusReviewFormValues,
 } from '../core/menu';
+import { saveSubredditAIProviderKey } from '../core/ai-keys';
 import { requireModerator } from '../core/moderation';
 import { addNote } from '../core/notes';
 import {
@@ -416,3 +419,52 @@ forms.post('/resolve-and-log', async (c) => {
     );
   }
 });
+
+forms.post('/set-ai-api-keys', async (c) => {
+  const { subredditId, subredditName } = context;
+  if (!subredditId || !subredditName) {
+    return c.json<UiResponse>(
+      {
+        showToast: 'CollabGuard needs subreddit context to save an AI API key.',
+      },
+      400
+    );
+  }
+
+  try {
+    const values = await c.req.json<SetAiApiKeyFormValues>();
+    const normalized = normalizeSetAiApiKeyFormValues(values);
+    if (!normalized.ok) {
+      return c.json<UiResponse>({ showToast: normalized.message }, 400);
+    }
+
+    await requireModerator(subredditName);
+    await saveSubredditAIProviderKey({
+      subredditId,
+      provider: normalized.provider,
+      apiKey: normalized.apiKey,
+    });
+
+    const label = normalized.provider === 'openai' ? 'OpenAI' : 'Gemini';
+    return c.json<UiResponse>(
+      {
+        showToast: `${label} API key saved for r/${subredditName}. Enable AI Mod Tool in the dashboard, then check AI activity.`,
+      },
+      200
+    );
+  } catch (error) {
+    console.error(`CollabGuard set AI API keys form failed: ${error}`);
+    const message =
+      error instanceof Error && error.message.includes('Moderator permission required')
+        ? 'Moderator permission required.'
+        : error instanceof Error
+          ? error.message
+          : 'Failed to save AI API key.';
+    return c.json<UiResponse>(
+      {
+        showToast: message,
+      },
+      message.includes('Moderator') ? 403 : 400
+    );
+  }
+});
diff --git a/collab-guard/src/server/routes/menu.ts b/collab-guard/src/server/routes/menu.ts
index 6e0fb367..6fc67276 100644
--- a/collab-guard/src/server/routes/menu.ts
+++ b/collab-guard/src/server/routes/menu.ts
@@ -806,6 +806,74 @@ menu.post('/open-unresolved-escalations', async (c) =>
 
 menu.post('/open-settings', async (c) => handleDashboardNavigation(c, 'settings'));
 
+menu.post('/set-ai-api-keys', async (c) => {
+  try {
+    const scope = await ensureModeratorContext();
+    if (!scope) {
+      const response = showSafeMenuToast('CollabGuard needs subreddit context.');
+      return c.json<UiResponse>(response.body, response.status);
+    }
+
+    return c.json<UiResponse>(
+      {
+        showForm: {
+          name: 'setAiApiKeys',
+          form: {
+            title: 'CollabGuard: Set AI API key',
+            description: [
+              'Keys are stored per subreddit in CollabGuard (write-only).',
+              'Other moderators cannot view an existing key — only replace it.',
+              'Then enable AI Mod Tool in the CollabGuard dashboard settings.',
+            ].join('\n'),
+            acceptLabel: 'Save key',
+            cancelLabel: 'Cancel',
+            fields: [
+              {
+                type: 'select',
+                name: 'provider',
+                label: 'Provider',
+                required: true,
+                defaultValue: ['gemini'],
+                options: [
+                  { label: 'Gemini', value: 'gemini' },
+                  { label: 'OpenAI', value: 'openai' },
+                ],
+              },
+              {
+                type: 'string',
+                name: 'apiKey',
+                label: 'API key',
+                helpText:
+                  'Paste the full key. It will not be shown again after saving.',
+                required: true,
+              },
+              {
+                type: 'select',
+                name: 'confirmWriteOnly',
+                label: 'Confirmation (required)',
+                helpText:
+                  'You must select this before Save. Keys are write-only and cannot be viewed again.',
+                required: true,
+                options: [
+                  {
+                    label: 'I understand this key cannot be read back later',
+                    value: 'acknowledged',
+                  },
+                ],
+              },
+            ],
+          },
+        },
+      },
+      200
+    );
+  } catch (error) {
+    console.error(`CollabGuard set AI API keys menu failed: ${error}`);
+    const response = showSafeMenuToast('Moderator permission required.', 403);
+    return c.json<UiResponse>(response.body, response.status);
+  }
+});
+
 menu.post('/preview-daily-digest', async (c) => {
   try {
     const scope = await ensureModeratorContext();
diff --git a/collab-guard/src/shared/app-meta.ts b/collab-guard/src/shared/app-meta.ts
index 9b03511d..a62618db 100644
--- a/collab-guard/src/shared/app-meta.ts
+++ b/collab-guard/src/shared/app-meta.ts
@@ -1,2 +1,2 @@
 /** Must match `name` in collab-guard/devvit.json for playtest deep links. */
-export const DEVVIT_APP_NAME = 'cook-dev';
+export const DEVVIT_APP_NAME = 'collab-guard-v1';

From f83049cccc56bd48ea6d42873ba2e762ce409061 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ho=CC=82=CC=80ng=20Cu=CC=81c=20Le=CC=82=20Thi=CC=A3?=
 <cuclth2701@gmail.com>
Date: Tue, 26 May 2026 18:19:00 +0700
Subject: [PATCH 2/2] fix bug

---
 collab-guard/devvit.json                                    | 6 +++---
 collab-guard/package.json                                   | 4 ++--
 collab-guard/src/client/components/SidebarLayout.tsx        | 2 +-
 .../components/settings/sections/GentleNudgeSettings.tsx    | 1 -
 collab-guard/src/shared/app-meta.ts                         | 2 +-
 5 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/collab-guard/devvit.json b/collab-guard/devvit.json
index 64748c93..25d7f524 100644
--- a/collab-guard/devvit.json
+++ b/collab-guard/devvit.json
@@ -1,6 +1,6 @@
 {
   "$schema": "https://developers.reddit.com/schema/config-file.v1.json",
-  "name": "collab-guard-v1",
+  "name": "collab-guard-",
   "post": {
     "dir": "dist/client",
     "entrypoints": {
@@ -185,6 +185,6 @@
     }
   },
   "dev": {
-    "subreddit": "ModQueueLab"
+    "subreddit": "collab_guard__dev"
   }
-}
+}
\ No newline at end of file
diff --git a/collab-guard/package.json b/collab-guard/package.json
index fc5a3956..d9224ead 100644
--- a/collab-guard/package.json
+++ b/collab-guard/package.json
@@ -1,6 +1,6 @@
 {
   "private": true,
-  "name": "collab-guard-v1",
+  "name": "collab-guard-",
   "version": "0.0.0",
   "license": "BSD-3-Clause",
   "type": "module",
@@ -59,4 +59,4 @@
     "inquirer": "9.3.8",
     "tmp": "0.2.5"
   }
-}
+}
\ No newline at end of file
diff --git a/collab-guard/src/client/components/SidebarLayout.tsx b/collab-guard/src/client/components/SidebarLayout.tsx
index 1dba77ff..f706e0e3 100644
--- a/collab-guard/src/client/components/SidebarLayout.tsx
+++ b/collab-guard/src/client/components/SidebarLayout.tsx
@@ -129,7 +129,7 @@ export const SidebarLayout = ({
             onBackToQueue={onBackToQueue ?? (() => undefined)}
             notifications={notifications}
             onOpenNotification={onOpenNotification}
-            onOpenNav={!isMdUp ? () => setMobileNavOpen(true) : undefined}
+            {...(!isMdUp ? { onOpenNav: () => setMobileNavOpen(true) } : {})}
           />
 
           <main className="min-w-0 flex-1 overflow-x-hidden overflow-y-auto">{children}</main>
diff --git a/collab-guard/src/client/components/settings/sections/GentleNudgeSettings.tsx b/collab-guard/src/client/components/settings/sections/GentleNudgeSettings.tsx
index 7d8e97c5..112bce63 100644
--- a/collab-guard/src/client/components/settings/sections/GentleNudgeSettings.tsx
+++ b/collab-guard/src/client/components/settings/sections/GentleNudgeSettings.tsx
@@ -14,7 +14,6 @@ import type {
 } from '../../../../shared';
 import { readErrorMessage } from '../../../lib/api';
 import {
-  settingsBtnClass,
   settingsCardClass,
   settingsDescClass,
   settingsInputClass,
diff --git a/collab-guard/src/shared/app-meta.ts b/collab-guard/src/shared/app-meta.ts
index a62618db..9cc87bf4 100644
--- a/collab-guard/src/shared/app-meta.ts
+++ b/collab-guard/src/shared/app-meta.ts
@@ -1,2 +1,2 @@
 /** Must match `name` in collab-guard/devvit.json for playtest deep links. */
-export const DEVVIT_APP_NAME = 'collab-guard-v1';
+export const DEVVIT_APP_NAME = 'collab-guard';