feat(chat): unread read-receipts with lobby/game dot and history-open ack

Persist per-message read state as a chat_messages.unread_seats bitmask
(migration 00008): a text message seeds every recipient seat's bit, a nudge
only the awaited seat's. A seat's bit clears when the player opens the move
history or chat (POST /games/:id/chat/read, sent only when something is
unread), and a nudge additionally clears when its recipient answers by moving
(a wired game NudgeClearer, dependency-inverted so game keeps off social).

UI shows a per-viewer unread dot in the lobby (next to the opponent) and the
game score bar — the unread_chat game-view flag seeds it from authoritative
REST views, live chat/nudge events raise it. Opening the move history counts
as reading (even without entering chat): the 💬 fade-blinks twice and the
client acks. Admin Messages gains an unread-only filter, a read/unread column,
and a per-message card with the per-seat read breakdown. Observability:
chat_read_duration histogram + chat_unread_messages gauge + social tracing.

ui/src/game/ChatScreen.svelte

@@ -2,7 +2,7 @@
   import { onMount } from 'svelte';
   import Chat from './Chat.svelte';
   import { gateway } from '../lib/gateway';
-  import { app, handleError, clearChatUnread } from '../lib/app.svelte';
+  import { app, handleError, markChatRead } from '../lib/app.svelte';
   import { canSendChat, sentThisTurn } from '../lib/chatlimit';
   import type { ChatMessage, StateView } from '../lib/model';
 
@@ -50,7 +50,7 @@
   async function refresh() {
     try {
       messages = await gateway.chatList(id);
-      clearChatUnread(id);
+      markChatRead(id);
     } catch {
       /* best-effort */
     }

ui/src/game/Game.svelte

@@ -8,7 +8,7 @@
   import Rack from './Rack.svelte';
   import { gateway } from '../lib/gateway';
   import { navigate } from '../lib/router.svelte';
-  import { app, handleError, showToast } from '../lib/app.svelte';
+  import { app, handleError, showToast, markChatRead, seedChatUnread } from '../lib/app.svelte';
   import { connection } from '../lib/connection.svelte';
   import { GatewayError } from '../lib/client';
   import { t, type MessageKey } from '../lib/i18n/index.svelte';
@@ -71,6 +71,19 @@
   // landscape, where it is docked open in the left panel. Gates the per-seat add-friend
   // affordance and its confirm reset so both work regardless of layout.
   const historyShown = $derived(historyOpen || landscape);
+  // A nonce bumped to replay the 💬 fade-blink each time the history is shown with unread chat.
+  let chatBlink = $state(0);
+  // Opening the move history counts as reading the chat (even without entering it): when the
+  // history is shown with unread present, play the 💬 fade-blink (a two-cycle nudge) and mark the
+  // chat read. In landscape the history is docked open, so a message arriving while it is visible
+  // blinks and is read at once. markChatRead clears the flag (and acks the backend), so this
+  // settles after one pass and re-fires only when a new message raises unread again.
+  $effect(() => {
+    if (historyShown && app.chatUnread[id]) {
+      chatBlink++;
+      markChatRead(id);
+    }
+  });
 
   const variant = $derived(view?.game.variant ?? 'scrabble_en');
   const board = $derived(replay(moves));
@@ -154,6 +167,8 @@
         gateway.draftGet(id).catch(() => ''),
       ]);
       view = st;
+      // Seed the unread flag from the authoritative state (the live stream only raises it).
+      seedChatUnread(id, st.game.unreadChat);
       moves = hist.moves;
       setCachedGame(id, st, hist.moves, draft);
       // Mirror the fresh status into the lobby snapshot so returning there shows it without a
@@ -601,6 +616,9 @@
   // post-move game and the refilled rack — without a follow-up game.state + game.history.
   function applyMoveResult(r: MoveResult) {
     view = { game: r.game, seat: r.move.player, rack: r.rack, bagLen: r.bagLen, hintsRemaining: view?.hintsRemaining ?? 0 };
+    // The move result is an authoritative per-viewer view: a nudge the actor just answered by
+    // moving is already cleared server-side, so reconcile the unread flag from it.
+    seedChatUnread(id, r.game.unreadChat);
     moves = [...moves, r.move];
     // A committed move clears the actor's draft on the server, so clear the cached draft too;
     // otherwise a same-session re-entry would briefly re-apply the now-stale composition.
@@ -937,7 +955,7 @@
     <!-- svelte-ignore a11y_no_static_element_interactions -->
     <!-- svelte-ignore a11y_click_events_have_key_events -->
     <div class="scoreboard" class:flat={landscape} onclick={landscape ? undefined : toggleHistory}>
-      {#if (app.chatUnread[id] ?? 0) > 0}<span class="cbadge sbadge">{app.chatUnread[id]}</span>{/if}
+      {#if app.chatUnread[id]}<span class="unread-dot sbadge-dot"></span>{/if}
       {#each view.game.seats as s (s.seat)}
         <div class="seat" class:turn={view.game.toMove === s.seat && !gameOver} class:win={s.isWinner}>
           <div class="nm">{seatName(s)}</div>
@@ -970,7 +988,7 @@
       {/if}
       {#if !view.game.multipleWordsPerTurn}<span class="oneword-label">{t('game.oneWordRule')}</span>{/if}
       <button class="hicon" onclick={() => navigate(`/game/${id}/chat`)} aria-label={t('game.chat')}>
-        💬{#if (app.chatUnread[id] ?? 0) > 0}<span class="cbadge">{app.chatUnread[id]}</span>{/if}
+        {#key chatBlink}<span class="chat-ico" class:blink={chatBlink > 0 && !app.reduceMotion}>💬</span>{/key}
       </button>
     </div>
     <div class="hgridwrap">
@@ -1378,26 +1396,34 @@
   .fico {
     line-height: 1;
   }
-  /* The unread-chat count: on the score bar's corner and on the history's 💬 icon. */
-  .cbadge {
+  /* The unread-chat dot on the score bar's corner; the history's 💬 icon fade-blinks (two cycles)
+     when the history is opened with unread present, rather than carrying a count badge. */
+  .unread-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--danger);
+  }
+  .sbadge-dot {
     position: absolute;
-    font-size: 0.68rem;
-    font-weight: 700;
-    background: var(--accent);
-    color: var(--accent-text);
-    border-radius: 999px;
-    min-width: 15px;
-    padding: 0 3px;
-    line-height: 1.4;
-    text-align: center;
+    top: 4px;
+    right: 6px;
   }
-  .sbadge {
-    top: 2px;
-    right: 4px;
+  .chat-ico {
+    display: inline-block;
+    line-height: 1;
   }
-  .hicon .cbadge {
-    top: -1px;
-    right: -1px;
+  .chat-ico.blink {
+    animation: chat-blink 1s ease-in-out 2;
+  }
+  @keyframes chat-blink {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0;
+    }
   }
   .loading {
     text-align: center;