Add friend chat; replace betting wording (شرط) with entry coins

- Friend-to-friend chat outside the game (ChatScreen) with mock replies,
  per-friend history, unread tracking; chat button on each friend row
- OnlineService + mock + online-store extended with chat (list/get/send/markRead)
- Reframe gambling term: "شرط"/"Stake" -> "سکه ورودی"/"Entry coins";
  free entry labeled رایگان/Free

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/components/screens/ChatScreen.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { ChevronLeft, ChevronRight, Send } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { useOnlineStore } from "@/lib/online-store";
+import { useUIStore } from "@/lib/ui-store";
+import { useI18n } from "@/lib/i18n";
+import { avatarEmoji } from "@/lib/online/types";
+import { cn } from "@/lib/cn";
+
+export function ChatScreen() {
+  const { t, locale } = useI18n();
+  const friend = useOnlineStore((s) => s.activeChatFriend);
+  const messages = useOnlineStore((s) => s.chatMessages);
+  const sendChat = useOnlineStore((s) => s.sendChat);
+  const closeChat = useOnlineStore((s) => s.closeChat);
+  const go = useUIStore((s) => s.go);
+  const [text, setText] = useState("");
+  const endRef = useRef<HTMLDivElement>(null);
+  const Chevron = locale === "fa" ? ChevronRight : ChevronLeft;
+
+  useEffect(() => {
+    endRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  if (!friend) {
+    return null;
+  }
+
+  const back = () => {
+    closeChat();
+    go("friends");
+  };
+
+  const send = async () => {
+    const v = text.trim();
+    if (!v) return;
+    setText("");
+    await sendChat(v);
+  };
+
+  return (
+    <main className="persian-pattern relative h-dvh w-full flex flex-col">
+      {/* header */}
+      <header className="glass flex items-center gap-3 p-3 shrink-0 z-10">
+        <button onClick={back} className="rounded-full p-2 hover:bg-navy-800/80 transition">
+          <Chevron className="size-5 text-cream/80" />
+        </button>
+        <span className="text-2xl">{avatarEmoji(friend.avatar)}</span>
+        <div className="min-w-0">
+          <div className="text-sm font-bold text-cream truncate">{friend.displayName}</div>
+          <div className="text-[11px] text-teal-300">
+            {friend.status === "online"
+              ? t("friends.online")
+              : friend.status === "in-game"
+              ? t("friends.inGame")
+              : t("friends.offline")}
+          </div>
+        </div>
+      </header>
+
+      {/* messages */}
+      <div className="flex-1 overflow-y-auto p-4 space-y-2">
+        {messages.length === 0 && (
+          <p className="text-center text-cream/40 mt-16">{t("chat.empty")}</p>
+        )}
+        {messages.map((m) => (
+          <div
+            key={m.id}
+            className={cn(
+              "max-w-[78%] rounded-2xl px-3.5 py-2 text-sm",
+              m.fromMe
+                ? "ms-auto btn-gold rounded-ee-sm"
+                : "me-auto glass text-cream rounded-es-sm"
+            )}
+          >
+            {m.text}
+          </div>
+        ))}
+        <div ref={endRef} />
+      </div>
+
+      {/* input */}
+      <footer className="glass p-3 flex items-center gap-2 shrink-0">
+        <input
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && send()}
+          placeholder={t("chat.placeholder")}
+          className="flex-1 rounded-full bg-navy-900/70 gold-border px-4 py-2.5 text-cream placeholder:text-cream/30 outline-none focus:ring-2 focus:ring-gold-500/40"
+        />
+        <button
+          onClick={send}
+          className="btn-gold rounded-full p-3 shrink-0"
+          aria-label={t("chat.send")}
+        >
+          <Send className="size-4 rtl:-scale-x-100" />
+        </button>
+      </footer>
+    </main>
+  );
+}

src/components/screens/FriendsScreen.tsx

@@ -1,9 +1,10 @@
 "use client";
 
-import { Check, UserPlus, X } from "lucide-react";
+import { Check, MessageCircle, UserPlus, X } from "lucide-react";
 import { useEffect, useState } from "react";
 import { ScreenHeader, ScreenShell } from "@/components/online/ScreenHeader";
 import { useOnlineStore } from "@/lib/online-store";
+import { useUIStore } from "@/lib/ui-store";
 import { useI18n } from "@/lib/i18n";
 import { Friend, PresenceStatus, avatarEmoji } from "@/lib/online/types";
 import { cn } from "@/lib/cn";
@@ -23,6 +24,8 @@ export function FriendsScreen() {
   const accept = useOnlineStore((s) => s.acceptRequest);
   const decline = useOnlineStore((s) => s.declineRequest);
   const remove = useOnlineStore((s) => s.removeFriend);
+  const openChat = useOnlineStore((s) => s.openChat);
+  const go = useUIStore((s) => s.go);
 
   const [query, setQuery] = useState("");
 
@@ -110,6 +113,16 @@ export function FriendsScreen() {
               </div>
             </div>
             <span className="text-[11px] text-gold-300/80">{Math.round(f.rating)}</span>
+            <button
+              onClick={async () => {
+                await openChat(f);
+                go("chat");
+              }}
+              className="size-8 rounded-lg hover:bg-teal-700/40 flex items-center justify-center text-teal-300/80 hover:text-teal-200"
+              title={t("friends.message")}
+            >
+              <MessageCircle className="size-4" />
+            </button>
             <button
               onClick={() => remove(f.id)}
               className="size-8 rounded-lg hover:bg-rose-700/40 flex items-center justify-center text-cream/40 hover:text-rose-300"

src/components/screens/OnlineLobbyScreen.tsx

@@ -47,7 +47,7 @@ export function OnlineLobbyScreen() {
                 stake === s ? "btn-gold" : "bg-navy-900/70 gold-border text-cream/70 hover:text-cream"
               )}
             >
-              {s === 0 ? t("menu.guest") : s.toLocaleString()}
+              {s === 0 ? t("common.free") : s.toLocaleString()}
             </button>
           ))}
         </div>