feat(messages): standalone Messages module + floating chat dock

Move messaging out of the notification center into its own left-nav module
(own page, own unread badge), so a reload returns to it and notifications stay
separate. Add a Messenger-style floating dock (bottom-right): pop a conversation
out from the page, keep chatting across navigation, minimise (rollup) or close.

- Messages is now a routed page; NotificationsPanel reverts to inbox-only and the
  nav badge no longer mixes in messages.
- Extract shared KeyGate + ChatThread (used by both the page and dock windows);
  e2ee exposes a shared unlock subscription so page and dock agree.
- ChatDock (always mounted for human users) owns the app-wide live-message
  subscription and per-device key restore. EN/HU/DE strings.

frontend/src/components/ChatDock.tsx

@@ -0,0 +1,83 @@
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { useQueryClient } from "@tanstack/react-query";
+import { ChevronDown, ChevronUp, X } from "lucide-react";
+import { closeChat, toggleMinimize, useDockChats, type DockChat } from "../lib/chatDock";
+import { useUnlocked } from "../lib/messaging";
+import { onMessage } from "../lib/messagesSocket";
+import * as e2ee from "../lib/e2ee";
+import Avatar from "./Avatar";
+import ChatThread from "./ChatThread";
+
+// The Messenger-style floating chat dock: open conversations live here, bottom-right, across
+// page navigation. Always mounted (for human users) so it also owns the app-wide live-message
+// subscription and restores this device's unlock state on load.
+export default function ChatDock({ meId }: { meId: number }) {
+  const qc = useQueryClient();
+  const chats = useDockChats();
+  const unlocked = useUnlocked();
+
+  // Restore the per-device unlocked key once, app-wide.
+  useEffect(() => {
+    e2ee.loadFromDevice(meId);
+  }, [meId]);
+
+  // Live delivery: any pushed message refreshes the conversation list, unread badge, and the
+  // affected thread (re-decrypts). Drives both the dock and the Messages page.
+  useEffect(
+    () =>
+      onMessage((m) => {
+        qc.invalidateQueries({ queryKey: ["conversations"] });
+        qc.invalidateQueries({ queryKey: ["message-unread"] });
+        const partner = m.sender_id === meId ? m.recipient_id : m.sender_id;
+        qc.invalidateQueries({ queryKey: ["thread", partner] });
+      }),
+    [qc, meId]
+  );
+
+  if (chats.length === 0) return null;
+  return (
+    <div className="fixed bottom-0 right-0 z-40 flex flex-row-reverse items-end gap-3 p-4 pointer-events-none">
+      {chats.map((c) => (
+        <ChatWindow key={c.partnerId} chat={c} meId={meId} unlocked={unlocked} />
+      ))}
+    </div>
+  );
+}
+
+function ChatWindow({ chat, meId, unlocked }: { chat: DockChat; meId: number; unlocked: boolean }) {
+  const { t } = useTranslation();
+  return (
+    <div className="pointer-events-auto w-80 max-w-[calc(100vw-2rem)] glass rounded-2xl shadow-2xl flex flex-col overflow-hidden">
+      <div className="flex items-center gap-2 px-3 py-2 border-b border-border bg-card/50">
+        <button
+          onClick={() => toggleMinimize(chat.partnerId)}
+          className="flex items-center gap-2 min-w-0 flex-1 text-left"
+          title={chat.minimized ? t("messages.expand") : t("messages.minimize")}
+        >
+          <Avatar src={chat.avatar} fallback={chat.name} className="w-7 h-7 rounded-full shrink-0 text-xs" />
+          <span className="font-semibold text-sm truncate">{chat.name}</span>
+        </button>
+        <button
+          onClick={() => toggleMinimize(chat.partnerId)}
+          className="shrink-0 p-1 rounded-md text-muted hover:text-fg hover:bg-bg transition"
+          aria-label={chat.minimized ? t("messages.expand") : t("messages.minimize")}
+        >
+          {chat.minimized ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
+        </button>
+        <button
+          onClick={() => closeChat(chat.partnerId)}
+          className="shrink-0 p-1 rounded-md text-muted hover:text-fg hover:bg-bg transition"
+          aria-label={t("messages.close")}
+        >
+          <X className="w-4 h-4" />
+        </button>
+      </div>
+      {!chat.minimized && (
+        <div className="flex flex-col h-96">
+          <ChatThread meId={meId} partnerId={chat.partnerId} isSystem={false} unlocked={unlocked} />
+        </div>
+      )}
+    </div>
+  );
+}