diff --git a/src/components/room/MentionPopover.tsx b/src/components/room/MentionPopover.tsx
index f2549d3..9942b22 100644
--- a/src/components/room/MentionPopover.tsx
+++ b/src/components/room/MentionPopover.tsx
@@ -629,7 +629,28 @@ export function MentionPopover({
         selectedIndexRef.current = prev;
       } else if (e.key === 'Enter' || e.key === 'Tab') {
         const item = vis[selectedIndexRef.current];
-        if (item && item.type === 'item') {
+        if (!item) return;
+
+        if (item.type === 'category') {
+          // Enter a category: append ':' to textarea to trigger next-level list
+          e.preventDefault();
+          const category = item.category;
+          const textarea = textareaRef.current;
+          if (!textarea) return;
+          const curPos = textarea.selectionStart;
+          const val = textarea.value;
+          // Replace @xxx with @xxx: to enter the category
+          const textBefore = val.substring(0, ms.startPos);
+          const afterPartial = val.substring(ms.startPos + ms.category.length + 1); // skip '@' + category
+          const newVal = textBefore + '@' + category + ':' + afterPartial;
+          const newPos = ms.startPos + 1 + category.length + 1; // after '@ai:'
+          textarea.value = newVal;
+          textarea.setSelectionRange(newPos, newPos);
+          textarea.focus();
+          // Dispatch input event so React picks up the change
+          textarea.dispatchEvent(new Event('input', { bubbles: true }));
+        } else if (item.type === 'item') {
+          // Insert the mention
           e.preventDefault();
           handleSelectRef.current(item);
         }