frontend/src/routes/layout.css

@@ -160,7 +160,28 @@
 	filter: invert(1);
 }
 
-/* ─── 7. Base styles ───────────────────────────────────────────────────────── */
+/* ─── 7. @mention chip ─────────────────────────────────────────────────────── */
+/*
+   Rendered by renderBody() via {@html ...} in CommentThread.svelte.
+   Must live in global CSS — Svelte scoped styles don't reach injected HTML.
+*/
+.mention {
+	display: inline;
+	color: var(--c-ink);
+	background-color: var(--c-accent-bg);
+	border-radius: 3px;
+	padding: 0 3px;
+	font-weight: 600;
+	font-style: normal;
+	cursor: default;
+	transition: background-color 0.15s ease;
+}
+
+.mention:hover {
+	background-color: color-mix(in srgb, var(--c-accent) 25%, transparent);
+}
+
+/* ─── 8. Base styles ───────────────────────────────────────────────────────── */
 @layer base {
 	html {
 		overscroll-behavior: none;