From be99a02e78576be26596ff5a67f0dcb8eea13c3f Mon Sep 17 00:00:00 2001
From: AlacrisDevs <alacrisdevs@gmail.com>
Date: Sat, 7 Feb 2026 01:53:06 +0200
Subject: [PATCH] fix: add missing chat CSS (twemoji sizing, emoji-only,
 mentions, message highlight)

---
 src/routes/layout.css | 64 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 64 insertions(+)

diff --git a/src/routes/layout.css b/src/routes/layout.css
index 9fa5795..23e620d 100644
--- a/src/routes/layout.css
+++ b/src/routes/layout.css
@@ -102,4 +102,68 @@
 	.prose h1, .prose h2, .prose h3, .prose h4 { @apply text-light font-heading; margin: 0.75em 0 0.5em; }
 	.prose a { @apply text-primary underline; }
 	.prose hr { @apply border-t border-dark my-4; }
+	.prose img { @apply max-w-full rounded-sm; }
+	.prose table { @apply w-full border-collapse my-2; }
+	.prose th, .prose td { @apply border border-dark p-2 text-left; }
+	.prose th { @apply bg-night font-semibold; }
+}
+
+/* Chat: Inline Twemoji sizing */
+.twemoji-inline {
+	display: inline-block;
+	width: 1.2em;
+	height: 1.2em;
+	vertical-align: -0.2em;
+	margin: 0 0.05em;
+}
+
+/* Chat: Emoji-only messages show larger emojis */
+.emoji-only .twemoji-inline {
+	width: 2.8em;
+	height: 2.8em;
+	vertical-align: -0.3em;
+	margin: 0 0.075em;
+}
+
+.twemoji {
+	display: inline-block;
+	vertical-align: -0.1em;
+}
+
+/* Chat: Mention styles */
+.mention-ping {
+	background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
+	color: var(--color-primary);
+	padding: 0 0.25em;
+	border-radius: 4px;
+	cursor: pointer;
+	font-weight: 500;
+	font-size: inherit;
+	font-family: inherit;
+	border: none;
+	transition: background-color 150ms ease;
+}
+
+.mention-ping:hover {
+	background-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
+	text-decoration: underline;
+}
+
+.mention-everyone {
+	background-color: color-mix(in srgb, var(--color-warning) 20%, transparent);
+	color: var(--color-warning);
+}
+
+.mention-everyone:hover {
+	background-color: color-mix(in srgb, var(--color-warning) 35%, transparent);
+}
+
+/* Chat: Message highlight animation for reply scroll */
+@keyframes message-highlight {
+	0%, 100% { background-color: transparent; }
+	50% { background-color: rgba(0, 163, 224, 0.2); }
+}
+
+.message-highlight {
+	animation: message-highlight 1s ease-in-out 2;
 }