diff --git a/docs/design/evidence/task-356-mention-after-1440.png b/docs/design/evidence/task-356-mention-after-1440.png
new file mode 100644
index 000000000..b2d1ea9d7
Binary files /dev/null and b/docs/design/evidence/task-356-mention-after-1440.png differ
diff --git a/docs/design/evidence/task-356-mention-after-390.png b/docs/design/evidence/task-356-mention-after-390.png
new file mode 100644
index 000000000..ef8b0a339
Binary files /dev/null and b/docs/design/evidence/task-356-mention-after-390.png differ
diff --git a/docs/design/evidence/task-356-mention-before-1440.png b/docs/design/evidence/task-356-mention-before-1440.png
new file mode 100644
index 000000000..e7adc5f0b
Binary files /dev/null and b/docs/design/evidence/task-356-mention-before-1440.png differ
diff --git a/docs/design/evidence/task-356-mention-before-390.png b/docs/design/evidence/task-356-mention-before-390.png
new file mode 100644
index 000000000..f68cb2846
Binary files /dev/null and b/docs/design/evidence/task-356-mention-before-390.png differ
diff --git a/frontend/src/v2/__tests__/v2-layout-invariants.test.ts b/frontend/src/v2/__tests__/v2-layout-invariants.test.ts
index 6e2a78a61..884fdfd8a 100644
--- a/frontend/src/v2/__tests__/v2-layout-invariants.test.ts
+++ b/frontend/src/v2/__tests__/v2-layout-invariants.test.ts
@@ -4603,4 +4603,19 @@ describe('BYO command boxes wrap at spaces', () => {
     expect(rule).toContain('overflow-wrap: anywhere');
     expect(rule).not.toContain('word-break: break-all');
   });
+
+  test('a mention item highlights on arrow-key and hover past the button reset', () => {
+    // `.v2-root button:not(.MuiButtonBase-root)` is 0,2,1 with background: none.
+    // The bare `.v2-mention-item--active` (0,1,0) and `:hover` (0,2,0) lose to it,
+    // so a <button> item never showed its highlight. The rules must be prefixed.
+    const active = ruleBody(v2, '.v2-root button.v2-mention-item--active');
+    expect(active).toContain('background: var(--v2-surface-hover)');
+    const hover = ruleBody(v2, '.v2-root button.v2-mention-item:hover');
+    expect(hover).toContain('background: var(--v2-surface-hover)');
+    // The padding the reset erases (`padding: 0`, 0,2,1) comes back at 0,3,1.
+    const padded = ruleBody(v2, '.v2-root .v2-mention-dropdown button.v2-mention-item');
+    expect(padded).toContain('padding: 7px 9px');
+    // The reset stays as it was: the fix is additive, not a rewrite of the reset.
+    expect(ruleBody(v2, '.v2-root button:not(.MuiButtonBase-root)')).toContain('background: none');
+  });
 });
diff --git a/frontend/src/v2/v2.css b/frontend/src/v2/v2.css
index 78d49ed1d..3d11e017f 100644
--- a/frontend/src/v2/v2.css
+++ b/frontend/src/v2/v2.css
@@ -2965,6 +2965,24 @@ body.modern-ui.v2-canvas {
   background: var(--v2-surface-hover);
 }
 
+/* The global `.v2-root button:not(.MuiButtonBase-root)` reset (0,2,1) sets
+   background: none and outranks the two rules above (0,2,0 and 0,1,0), so the
+   arrow-key and hover highlight never painted on a <button> item. Prefixing
+   with `.v2-root button` lifts these to 0,3,1 — the reset itself stays. */
+.v2-root button.v2-mention-item:hover {
+  background: var(--v2-surface-hover);
+}
+
+.v2-root button.v2-mention-item--active {
+  background: var(--v2-surface-hover);
+}
+
+/* The same reset also sets `padding: 0` (0,2,1), which erased the item's 7px 9px.
+   Scoped to the dropdown so the selector is 0,3,1 and the reset itself is unchanged. */
+.v2-root .v2-mention-dropdown button.v2-mention-item {
+  padding: 7px 9px;
+}
+
 .v2-mention-item__text {
   display: flex;
   flex-direction: column;