fixed issues namely reveloved around chat

frontend/src/lib/components/Chat.svelte

@@ -14,6 +14,14 @@
 
 	const isOwn = (msg: any) => msg.authorId === chatStore.actorId;
 
+	// Colour comes from the sender's user record (loaded with the family on
+	// page load) — no per-message snapshot, no live colour tracking. Falls back
+	// to the stored authorColor for any message sent before this change.
+	function colorOf(msg: any): string {
+		if (msg.authorId === chatStore.actorId) return chatStore.actorColor || '#6366f1';
+		return msg.authorColor || '#6366f1';
+	}
+
 	function scrollToBottom(instant = false) {
 		if (!container) return;
 		container.scrollTo({
@@ -107,15 +115,18 @@
 			{#each chatStore.messages as msg (msg.id)}
 				<div class="msg-row" class:own={isOwn(msg)}>
 					{#if !isOwn(msg)}
-						<span class="avatar" style="background:{msg.authorColor || '#6366f1'}">
+						<span class="avatar" style="background:{colorOf(msg)}">
 							{msg.authorName?.charAt(0).toUpperCase()}
 						</span>
 					{/if}
 					<div class="bubble-wrap">
 						{#if !isOwn(msg)}
-							<span class="msg-author">{msg.authorName}</span>
+							<span class="msg-author" style="color:{colorOf(msg)}">{msg.authorName}</span>
 						{/if}
-						<div class="bubble">
+						<div
+							class="bubble"
+							style="background:{colorOf(msg) + '33'}; color:{colorOf(msg)}"
+						>
 							{#each renderContent(msg.content) as seg (msg.id + ':' + seg.text)}
 								{#if seg.mention}
 									<button class="mention" onclick={() => insertMention(seg.text.slice(1))}
@@ -274,8 +285,6 @@
 		position: relative;
 	}
 	.msg-row.own .bubble {
-		background: #6366f1;
-		color: #fff;
 		border-bottom-left-radius: 14px;
 		border-bottom-right-radius: 4px;
 	}
@@ -288,7 +297,7 @@
 		text-transform: capitalize;
 	}
 	.msg-row.own .msg-time {
-		color: rgba(255, 255, 255, 0.7);
+		color: rgba(17, 24, 39, 0.45);
 	}
 	.mention {
 		background: #ede9fe;