Add persistent agent messaging and shared chat bubbles

Connect Sybil to the Pi root conversation with authenticated REST and WebSocket
APIs, persistent read state, and a dedicated agent tab. Keep optimistic messages
stable through delivery and retries, and animate arrivals without losing the
reader's scroll position.

Share bubble styling with regular chats and remove the obsolete admission sender.
Reject malformed upstream receipts and WebSocket upgrade requests, with regression
coverage and updated API documentation.

Validated with 51 web tests, 44 server tests, both production builds, desktop/mobile
bubble comparisons, and 11 browser animation and scrolling checks.

web/src/index.css

@@ -194,11 +194,35 @@ textarea {
     0 14px 36px hsl(240 80% 2% / 0.28);
 }
 
-.chat-user-message {
-  /* Preserve the original bubble radius independently of the square UI theme.
-     Browsers without corner-shape support fall back to circular corners. */
-  border-radius: 0.75rem;
-  corner-shape: squircle;
+/* Shared by regular chats and the persistent agent transcript. */
+.message-bubble {
+  min-width: 0;
+  padding: 13px 17px;
+  border: 1px solid hsl(256 37% 57% / .18);
+  border-radius: 18px 18px 18px 5px;
+  background: linear-gradient(150deg, hsl(251 36% 15% / .93), hsl(244 35% 11% / .93));
+  box-shadow: 0 3px 12px hsl(239 55% 2% / .13);
+  font-size: 14px;
+  line-height: 1.68;
+  overflow-wrap: anywhere;
+}
+
+.message-bubble--user {
+  border-color: hsl(266 80% 72% / .3);
+  border-radius: 18px 18px 5px 18px;
+  background: linear-gradient(135deg, hsl(264 59% 33% / .86), hsl(259 58% 26% / .9));
+  color: hsl(265 55% 97%);
+}
+
+.message-bubble .md-content {
+  font-size: inherit;
+  line-height: inherit;
+}
+
+@media (max-width: 767px) {
+  .message-bubble {
+    padding: 11px 14px;
+  }
 }
 
 .tool-call-stack-shell {