diff --git a/src/app/globals.css b/src/app/globals.css
index 8027b98..b4285a9 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -174,7 +174,18 @@
   /* While editing, TipTap renders the mention as a span with data-type="ticketMention".
      Mirror the same chip style so the layout stays consistent during edits. */
   .rich-text .ProseMirror [data-type="ticketMention"] {
-    @apply inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-100 px-2.5 py-1 text-xs font-semibold text-neutral-800;
+    @apply inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-100 px-2.5 py-1 text-xs font-semibold text-neutral-800 align-middle;
+    position: relative;
+  }
+  .rich-text .ProseMirror [data-type="ticketMention"]::before {
+    content: "";
+    @apply inline-block size-2 rounded-full bg-slate-400;
+    margin-right: 0.375rem; /* ~gap-1.5 */
+  }
+  .rich-text .ProseMirror [data-type="ticketMention"][status="PENDING"]::before { @apply bg-amber-400; }
+  .rich-text .ProseMirror [data-type="ticketMention"][status="AWAITING_ATTENDANCE"]::before { @apply bg-sky-500; }
+  .rich-text .ProseMirror [data-type="ticketMention"][status="PAUSED"]::before { @apply bg-violet-500; }
+  .rich-text .ProseMirror [data-type="ticketMention"][status="RESOLVED"]::before { @apply bg-emerald-500; }
   }
   .rich-text [data-ticket-mention="true"] .ticket-mention-dot,
   .rich-text .ticket-mention .ticket-mention-dot {