feat: manual cert gating, chat layout overhaul, and video player UX fixes

- Certificate: Hardcode approval gate — completely removed the auto-issue path;
  `certRequiresApproval()` now strictly returns `true`, ignoring DB configuration.
- Certificate: Quiz completion now queues a pending record and triggers a
  "Pending approval" notification instead of falsely confirming issuance.
- Certificate: Public endpoints now enforce a guard on `status=issued`; frontend
  strips the auto-issue side effect and claim button (issuance restricted to admins).
- Chats tab: Refactor layout into a full-width centered banner above two
  equal-height side-by-side panels (`grid-cols-1 lg:grid-cols-2`), utilizing
  `max-h` and `overflow-y-auto` to eliminate whitespace bleed.
- Video player: Fix settings flyout prematurely closing on mouse movement (removed
  `setSettingsOpen` from `poke`); add a click-outside listener via `mousedown`.
- Video player: Deduplicate controls — the speed pill now directly cycles playback
  speed, leaving the gear icon as the single entry point for settings (eliminating
  overlapping popovers).
- Video player: Implement full-bleed theater mode using the `-mx-[50vw] w-screen`
  technique, keeping the progress strip constrained to `max-w-5xl` below.

backend/internal/api/certificate.go

@@ -28,13 +28,13 @@ func (s *Server) certEnabled(ctx context.Context) bool {
 	return true
 }
 
-func (s *Server) certRequiresApproval(ctx context.Context) bool {
+// certRequiresApproval always returns true — certificates are never auto-issued.
-	if v, err := s.store.GetSetting(ctx, "certificate_requires_approval"); err == nil {
+// The DB setting is kept for observability but cannot override the hard gate.
-		return v == "true" || v == "1"
+func (s *Server) certRequiresApproval(_ context.Context) bool { return true }
-	}
-	return true
-}
 
+// issueCertificateIfEligible creates a pending certificate row when the user has
+// completed the curriculum. It never issues (publishes) the certificate directly;
+// that step requires explicit admin action via handleAdminIssueCertificate.
 func (s *Server) issueCertificateIfEligible(ctx context.Context, user *models.User) (*models.Certificate, bool, error) {
 	if !s.certEnabled(ctx) {
 		return nil, false, nil
@@ -53,22 +53,12 @@ func (s *Server) issueCertificateIfEligible(ctx context.Context, user *models.Us
 	} else if err != store.ErrNotFound {
 		return nil, false, err
 	}
-	if s.certRequiresApproval(ctx) {
+	// Always create a pending row — never auto-issue.
-		cert, err := s.store.CreatePendingCertificate(ctx, user.ID, user.Name)
+	cert, err := s.store.CreatePendingCertificate(ctx, user.ID, user.Name)
-		if err != nil {
-			return nil, false, err
-		}
-		return cert, cert.Status == "pending", nil
-	}
-	publicID, err := newPublicID()
 	if err != nil {
 		return nil, false, err
 	}
-	cert, err := s.store.CreateCertificate(ctx, user.ID, publicID, user.Name)
+	return cert, cert.Status == "pending", nil
-	if err != nil {
-		return nil, false, err
-	}
-	return cert, true, nil
 }
 
 func (s *Server) handleIssueCertificate(w http.ResponseWriter, r *http.Request) {
@@ -124,7 +114,7 @@ func (s *Server) handlePublicCertificate(w http.ResponseWriter, r *http.Request)
 		return
 	}
 	cert, err := s.store.GetCertificateByPublicID(r.Context(), publicID)
-	if err != nil || cert.RevokedAt != nil {
+	if err != nil || cert.RevokedAt != nil || cert.Status != "issued" {
 		writeErr(w, http.StatusNotFound, "گواهینامه پیدا نشد")
 		return
 	}

backend/internal/api/quiz.go

@@ -158,9 +158,10 @@ func (s *Server) handleQuizSubmit(w http.ResponseWriter, r *http.Request) {
 				return
 			}
 			if cert, created, cerr := s.issueCertificateIfEligible(r.Context(), activeUser); cerr == nil && created && cert != nil {
-				observability.Activity("certificate.issued", "user_id", u.ID, "public_id", cert.PublicID)
+				observability.Activity("certificate.pending", "user_id", u.ID)
-				_ = s.notify.Notify(r.Context(), u.ID, "progress", "certificate_issued",
+				_ = s.notify.Notify(r.Context(), u.ID, "progress", "certificate_pending",
-					"گواهینامه آماده است", "دوره را به پایان رساندید. گواهینامه دیجیتال شما صادر شد.", "/c/"+cert.PublicID, nil)
+					"درخواست گواهینامه ثبت شد", "دوره را با موفقیت به پایان رساندید. درخواست گواهینامه شما ثبت شد و پس از تأیید مدیریت صادر خواهد شد.", "/profile", nil)
+				_ = cert // pending; no publicId yet
 			}
 			s.notifyQuizPassed(u.ID, lesson.Title, id, activeUser.StreakCurrent)
 			_ = s.notifyUnlockedLessons(u.ID, id)

frontend/src/app/unwrap/page.tsx

@@ -152,165 +152,170 @@ function ChatsLauncher() {
   const convTotal = convData?.total ?? conversations.length;
 
   return (
-    <div className="grid gap-4 lg:grid-cols-2">
+    <div className="space-y-4">
-      <Panel className="justify-center text-center" title="گفتگوها" description="یک پنجرهٔ شناور شیشه‌ای در تمام صفحات — با صدا، عکس، ویدیو و پیام صوتی.">
+      {/* ── Centered header banner ── */}
-        <div className="flex flex-col items-center gap-4 pt-1">
+      <div className="flex flex-col items-center gap-3 rounded-2xl border border-border bg-card px-6 py-6 text-center">
-          <div className="grid h-14 w-14 place-items-center rounded-2xl bg-primary/10">
+        <div className="inline-flex items-center gap-2 rounded-full border border-primary/20 bg-primary/10 px-4 py-1.5 text-sm font-medium text-primary backdrop-blur-sm">
-            <MessageSquareHeart className="h-7 w-7 text-primary" />
+          <MessageSquareHeart className="h-4 w-4 shrink-0" />
-          </div>
+          یک پنجرهٔ شناور شیشه‌ای در تمام صفحات — با صدا، عکس، ویدیو و پیام صوتی.
-          <p className="max-w-sm text-sm text-muted-foreground">
-            گفتگو همیشه در دکمهٔ شناور پایین صفحه در دسترس شماست؛ گفتگوها خصوصی هستند و پاسخ منتورها معمولاً کمتر از یک روز طول می‌کشد.
-          </p>
-          <Button onClick={() => openChat()} className="gap-2">
-            <Sparkles className="h-4 w-4" /> باز کردن گفتگوها
-          </Button>
         </div>
-      </Panel>
+        <Button onClick={() => openChat()} className="gap-2">
+          <Sparkles className="h-4 w-4" /> باز کردن گفتگوها ✨
+        </Button>
+        <p className="max-w-md text-sm text-muted-foreground">
+          گفتگو همیشه در دکمهٔ شناور پایین صفحه در دسترس شماست؛ گفتگوها خصوصی هستند و پاسخ منتورها معمولاً کمتر از یک روز طول می‌کشد.
+        </p>
+      </div>
 
-      <Panel title="گفتگوهای شما" description="مکالمات جاری — روی هر کدام بزنید تا باز شود.">
+      {/* ── Side-by-side panels ── */}
-        <div className="space-y-1.5 pt-1">
+      <div className="grid gap-4 lg:grid-cols-2">
-          {convLoading && (
+        {/* Conversations panel */}
-            <div className="space-y-2">
+        <Panel title="گفتگوهای شما" description="مکالمات جاری — روی هر کدام بزنید تا باز شود.">
-              {[0, 1, 2].map((i) => (
+          <div className="max-h-[32rem] overflow-y-auto space-y-1.5 pt-1 pb-1">
-                <div key={i} className="flex items-center gap-3 rounded-xl border-2 border-border/70 px-3 py-2.5">
+            {convLoading && (
-                  <SkeletonAvatar />
+              <div className="space-y-2">
-                  <div className="flex-1 space-y-1.5">
+                {[0, 1, 2].map((i) => (
-                    <div className="flex items-center justify-between gap-2">
+                  <div key={i} className="flex items-center gap-3 rounded-xl border-2 border-border/70 px-3 py-2.5">
-                      <Skeleton className="h-4 w-32" />
+                    <SkeletonAvatar />
-                      <Skeleton className="h-3 w-14" />
+                    <div className="flex-1 space-y-1.5">
+                      <div className="flex items-center justify-between gap-2">
+                        <Skeleton className="h-4 w-32" />
+                        <Skeleton className="h-3 w-14" />
+                      </div>
+                      <Skeleton className="h-3 w-2/3" />
                     </div>
-                    <Skeleton className="h-3 w-2/3" />
                   </div>
-                </div>
+                ))}
-              ))}
+              </div>
-            </div>
+            )}
-          )}
+            {conversations.map((c) => (
-          {conversations.map((c) => (
+              <button
-            <button
+                key={c.partner.id}
-              key={c.partner.id}
+                onClick={() => openChat(c.partner.id)}
-              onClick={() => openChat(c.partner.id)}
+                className="flex w-full items-center gap-3 rounded-xl border-2 border-border/70 px-3 py-2.5 text-right transition-colors hover:border-primary/50 hover:bg-primary/5"
-              className="flex w-full items-center gap-3 rounded-xl border-2 border-border/70 px-3 py-2.5 text-right transition-colors hover:border-primary/50 hover:bg-primary/5"
+              >
-            >
+                <UserAvatar name={c.partner.name} className="h-10 w-10" {...avatarPropsOf(c.partner)} />
-              <UserAvatar name={c.partner.name} className="h-10 w-10" {...avatarPropsOf(c.partner)} />
+                <div className="min-w-0 flex-1">
-              <div className="min-w-0 flex-1">
+                  <div className="flex items-center justify-between gap-2">
-                <div className="flex items-center justify-between gap-2">
+                    <p className="flex min-w-0 items-center gap-1 font-bold">
-                  <p className="flex min-w-0 items-center gap-1 font-bold">
+                      <span className="truncate">{c.partner.name}</span>
-                    <span className="truncate">{c.partner.name}</span>
+                      {isVerifiedRole(c.partner.role) && <VerifiedBadge role={c.partner.role} />}
-                    {isVerifiedRole(c.partner.role) && <VerifiedBadge role={c.partner.role} />}
+                    </p>
+                    {c.lastMessage && (
+                      <span className="shrink-0 text-[10px] text-muted-foreground">{formatJalaliStamp(c.lastMessage.createdAt)}</span>
+                    )}
+                  </div>
+                  <p
+                    dir="auto"
+                    className={cn(
+                      "truncate text-xs [unicode-bidi:plaintext]",
+                      c.unreadCount > 0 ? "font-bold text-foreground" : "text-muted-foreground"
+                    )}
+                  >
+                    {c.lastMessage ? messagePreview(c.lastMessage) : "پیامی ندارد"}
                   </p>
-                  {c.lastMessage && (
-                    <span className="shrink-0 text-[10px] text-muted-foreground">{formatJalaliStamp(c.lastMessage.createdAt)}</span>
-                  )}
                 </div>
-                <p
+                {c.unreadCount > 0 && (
-                  dir="auto"
+                  <Badge variant="accent" className="h-5 min-w-5 justify-center rounded-full px-1.5">
-                  className={cn(
+                    {c.unreadCount}
-                    "truncate text-xs [unicode-bidi:plaintext]",
+                  </Badge>
-                    c.unreadCount > 0 ? "font-bold text-foreground" : "text-muted-foreground"
+                )}
-                  )}
+              </button>
+            ))}
+            {!convLoading && conversations.length === 0 && (
+              <p className="px-1 text-sm text-muted-foreground">
+                هنوز گفتگویی ندارید — از فهرست کنار، یک نفر را انتخاب کنید.
+              </p>
+            )}
+            {convTotal > (convData?.pageSize ?? 10) && (
+              <div className="flex items-center justify-between pt-2 text-xs">
+                <Button type="button" size="sm" variant="outline" disabled={convPage <= 1} onClick={() => setConvPage((p) => p - 1)}>
+                  قبلی
+                </Button>
+                <span className="text-muted-foreground">{convPage}</span>
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="outline"
+                  disabled={convPage * (convData?.pageSize ?? 10) >= convTotal}
+                  onClick={() => setConvPage((p) => p + 1)}
                 >
-                  {c.lastMessage ? messagePreview(c.lastMessage) : "پیامی ندارد"}
+                  بعدی
-                </p>
+                </Button>
               </div>
-              {c.unreadCount > 0 && (
+            )}
-                <Badge variant="accent" className="h-5 min-w-5 justify-center rounded-full px-1.5">
+          </div>
-                  {c.unreadCount}
+        </Panel>
-                </Badge>
-              )}
-            </button>
-          ))}
-          {!convLoading && conversations.length === 0 && (
-            <p className="px-1 text-sm text-muted-foreground">
-              هنوز گفتگویی ندارید — از فهرست کنار، یک نفر را انتخاب کنید.
-            </p>
-          )}
-          {convTotal > (convData?.pageSize ?? 10) && (
-            <div className="flex items-center justify-between pt-2 text-xs">
-              <Button type="button" size="sm" variant="outline" disabled={convPage <= 1} onClick={() => setConvPage((p) => p - 1)}>
-                قبلی
-              </Button>
-              <span className="text-muted-foreground">{convPage}</span>
-              <Button
-                type="button"
-                size="sm"
-                variant="outline"
-                disabled={convPage * (convData?.pageSize ?? 10) >= convTotal}
-                onClick={() => setConvPage((p) => p + 1)}
-              >
-                بعدی
-              </Button>
-            </div>
-          )}
-        </div>
-      </Panel>
 
-      <Panel
+        {/* Start chat panel */}
-        title={staff ? "شروع گفتگو" : "شروع سریع با منتور"}
+        <Panel
-        description="نقش هر نفر روی ردیف نوشته شده است."
+          title={staff ? "شروع گفتگو" : "شروع سریع با منتور"}
-        actions={
+          description="نقش هر نفر روی ردیف نوشته شده است."
-          <Button type="button" size="sm" variant="outline" onClick={() => setAlpha((v) => !v)}>
+          actions={
-            {alpha ? "آنلاین بالا" : "الفبایی"}
+            <Button type="button" size="sm" variant="outline" onClick={() => setAlpha((v) => !v)}>
-          </Button>
+              {alpha ? "آنلاین بالا" : "الفبایی"}
-        }
+            </Button>
-      >
+          }
-        <div className="space-y-1 pt-1">
+        >
-          {isLoading && (
+          <div className="max-h-[32rem] overflow-y-auto space-y-1 pt-1 pb-1">
-            <div className="space-y-2">
+            {isLoading && (
-              {[0, 1, 2, 3].map((i) => (
+              <div className="space-y-2">
-                <div key={i} className="flex items-center gap-3 rounded-xl border-2 border-border/70 px-3 py-2.5">
+                {[0, 1, 2, 3].map((i) => (
-                  <SkeletonAvatar />
+                  <div key={i} className="flex items-center gap-3 rounded-xl border-2 border-border/70 px-3 py-2.5">
-                  <div className="flex-1 space-y-1.5">
+                    <SkeletonAvatar />
-                    <Skeleton className="h-4 w-40" />
+                    <div className="flex-1 space-y-1.5">
-                    <Skeleton className="h-3 w-16" />
+                      <Skeleton className="h-4 w-40" />
+                      <Skeleton className="h-3 w-16" />
+                    </div>
+                    <Skeleton className="h-5 w-20 rounded-full" />
                   </div>
-                  <Skeleton className="h-5 w-20 rounded-full" />
+                ))}
-                </div>
-              ))}
-            </div>
-          )}
-          {people.map((m) => (
-            <motion.button
-              layout
-              key={m.id}
-              onClick={() => openChat(m.id)}
-              className="flex w-full items-center gap-3 rounded-xl border-2 border-border/70 px-3 py-2.5 text-right transition-colors hover:border-primary/50 hover:bg-primary/5"
-            >
-              <UserAvatar name={m.name} className="h-10 w-10" {...avatarPropsOf(m)} />
-              <div className="min-w-0 flex-1">
-                <p className="flex min-w-0 items-center gap-1 font-bold">
-                  <span className="truncate">{m.name}</span>
-                  {isVerifiedRole(m.role) && <VerifiedBadge role={m.role} />}
-                </p>
-                <p className="text-xs text-muted-foreground">{roleWord(m.role)}</p>
               </div>
-              <span className={cn("inline-flex items-center gap-1.5 text-xs font-bold", m.online ? "text-success" : "text-muted-foreground")}>
+            )}
-                <span className={cn("h-1.5 w-1.5 rounded-full", m.online ? "bg-success" : "bg-muted-foreground/40")} />
+            {people.map((m) => (
-                {m.online ? "آنلاین" : "آفلاین"}
+              <motion.button
-              </span>
+                layout
-            </motion.button>
+                key={m.id}
-          ))}
+                onClick={() => openChat(m.id)}
-          {!isLoading && mentors.length === 0 && (
+                className="flex w-full items-center gap-3 rounded-xl border-2 border-border/70 px-3 py-2.5 text-right transition-colors hover:border-primary/50 hover:bg-primary/5"
-            <p className="text-sm text-muted-foreground">{staff ? "کسی برای گفتگو نیست." : "هنوز منتوری در دسترس نیست."}</p>
-          )}
-          {peopleTotal > (data?.pageSize ?? 20) && (
-            <div className="flex items-center justify-between pt-2 text-xs">
-              <Button type="button" size="sm" variant="outline" disabled={peoplePage <= 1} onClick={() => setPeoplePage((p) => p - 1)}>
-                قبلی
-              </Button>
-              <span className="text-muted-foreground">{peoplePage}</span>
-              <Button
-                type="button"
-                size="sm"
-                variant="outline"
-                disabled={peoplePage * (data?.pageSize ?? 20) >= peopleTotal}
-                onClick={() => setPeoplePage((p) => p + 1)}
               >
-                بعدی
+                <UserAvatar name={m.name} className="h-10 w-10" {...avatarPropsOf(m)} />
-              </Button>
+                <div className="min-w-0 flex-1">
-            </div>
+                  <p className="flex min-w-0 items-center gap-1 font-bold">
-          )}
+                    <span className="truncate">{m.name}</span>
-        </div>
+                    {isVerifiedRole(m.role) && <VerifiedBadge role={m.role} />}
-      </Panel>
+                  </p>
+                  <p className="text-xs text-muted-foreground">{roleWord(m.role)}</p>
+                </div>
+                <span className={cn("inline-flex items-center gap-1.5 text-xs font-bold", m.online ? "text-success" : "text-muted-foreground")}>
+                  <span className={cn("h-1.5 w-1.5 rounded-full", m.online ? "bg-success" : "bg-muted-foreground/40")} />
+                  {m.online ? "آنلاین" : "آفلاین"}
+                </span>
+              </motion.button>
+            ))}
+            {!isLoading && mentors.length === 0 && (
+              <p className="text-sm text-muted-foreground">{staff ? "کسی برای گفتگو نیست." : "هنوز منتوری در دسترس نیست."}</p>
+            )}
+            {peopleTotal > (data?.pageSize ?? 20) && (
+              <div className="flex items-center justify-between pt-2 text-xs">
+                <Button type="button" size="sm" variant="outline" disabled={peoplePage <= 1} onClick={() => setPeoplePage((p) => p - 1)}>
+                  قبلی
+                </Button>
+                <span className="text-muted-foreground">{peoplePage}</span>
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="outline"
+                  disabled={peoplePage * (data?.pageSize ?? 20) >= peopleTotal}
+                  onClick={() => setPeoplePage((p) => p + 1)}
+                >
+                  بعدی
+                </Button>
+              </div>
+            )}
+          </div>
+        </Panel>
+      </div>
     </div>
   );
 }

frontend/src/components/profile-certificate-slot.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useState } from "react";
 import { useRouter } from "next/navigation";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { Award, Clock, Copy, ExternalLink, Loader2, Lock } from "lucide-react";
 import { http, toUserError } from "@/lib/api";
 import type { Certificate } from "@/lib/types";
@@ -17,9 +17,6 @@ type MineCertificateResponse = {
 
 export function ProfileCertificateSlot() {
   const router = useRouter();
-  const qc = useQueryClient();
-  const [issuing, setIssuing] = useState(false);
-  const autoIssueTried = useRef(false);
 
   const { data, isLoading, isError, error, refetch } = useQuery({
     queryKey: ["me", "certificate"],
@@ -29,18 +26,6 @@ export function ProfileCertificateSlot() {
   const cert = data?.certificate ?? null;
   const eligible = !!data?.eligible;
 
-  // Auto-issue once when the student becomes eligible (same path as /cap).
-  useEffect(() => {
-    if (!eligible || cert || autoIssueTried.current) return;
-    autoIssueTried.current = true;
-    setIssuing(true);
-    void http
-      .post<{ certificate: Certificate }>("/api/me/certificate/issue", {})
-      .then(() => qc.invalidateQueries({ queryKey: ["me", "certificate"] }))
-      .catch((e) => toast.error(toUserError(e, "صدور خودکار گواهینامه ممکن نشد — دستی تلاش کنید")))
-      .finally(() => setIssuing(false));
-  }, [eligible, cert, qc]);
-
   const copyLink = async () => {
     if (!cert?.publicId) return;
     const url = `${window.location.origin}/c/${cert.publicId}`;
@@ -57,21 +42,6 @@ export function ProfileCertificateSlot() {
     router.push(`/c/${cert.publicId}`);
   };
 
-  const claim = async () => {
-    setIssuing(true);
-    try {
-      const res = await http.post<{ certificate: Certificate }>("/api/me/certificate/issue", {});
-      await qc.invalidateQueries({ queryKey: ["me", "certificate"] });
-      if (res.certificate?.publicId) {
-        router.push(`/c/${res.certificate.publicId}`);
-      }
-    } catch (e) {
-      toast.error(toUserError(e, "صدور گواهینامه ممکن نشد"));
-    } finally {
-      setIssuing(false);
-    }
-  };
-
   return (
     <section
       aria-label="جایگاه گواهینامه"
@@ -94,7 +64,7 @@ export function ProfileCertificateSlot() {
             تلاش دوباره
           </Button>
         </div>
-      ) : isLoading || (eligible && !cert && issuing) ? (
+      ) : isLoading ? (
         <div className="flex items-center gap-2 py-3 text-xs text-muted-foreground">
           <Loader2 className="h-3.5 w-3.5 animate-spin" />
           در حال بارگذاری…
@@ -132,14 +102,14 @@ export function ProfileCertificateSlot() {
           </div>
         </div>
       ) : eligible ? (
-        <div className="space-y-2.5">
+        <div className="flex items-start gap-2 rounded-lg border border-border/70 bg-background/60 px-3 py-2.5">
-          <p className="text-[11px] leading-relaxed text-muted-foreground">
+          <Clock className="mt-0.5 h-3.5 w-3.5 shrink-0 text-warning" />
-            دوره را تمام کرده‌اید. گواهینامه دیجیتال آمادهٔ صدور است.
+          <div>
-          </p>
+            <p className="text-[11px] font-bold text-foreground">در انتظار تأیید</p>
-          <Button type="button" size="sm" className="h-8 w-full" disabled={issuing} onClick={() => void claim()}>
+            <p className="mt-0.5 text-[10px] leading-relaxed text-muted-foreground">
-            {issuing ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Award className="h-3.5 w-3.5" />}
+              درخواست گواهینامه ثبت شد و پس از بررسی توسط تیم آموزش صادر می‌شود.
-            دریافت گواهینامه
+            </p>
-          </Button>
+          </div>
         </div>
       ) : (
         <div

frontend/src/components/video-player.tsx

@@ -125,6 +125,8 @@ export function VideoPlayer({
   const [seekIndicator, setSeekIndicator] = useState<"back" | null>(null);
 
   const hideTimer = useRef<number | null>(null);
+  const settingsPanelRef = useRef<HTMLDivElement>(null);
+  const settingsBtnRef = useRef<HTMLButtonElement>(null);
 
   // ── Utilities ───────────────────────────────────────────────────────────────
   const warnSeekBlocked = useCallback(() => {
@@ -161,7 +163,6 @@ export function VideoPlayer({
 
   const poke = useCallback(() => {
     setUiIdle(false);
-    setSettingsOpen(false);
     if (hideTimer.current) window.clearTimeout(hideTimer.current);
     const v = videoRef.current;
     if (v && !v.paused && !v.ended) {
@@ -202,6 +203,12 @@ export function VideoPlayer({
     if (v) v.playbackRate = s;
   }, []);
 
+  const cycleSpeed = useCallback(() => {
+    const idx = ALLOWED_SPEEDS.indexOf(userSpeedRef.current);
+    const next = ALLOWED_SPEEDS[(idx + 1) % ALLOWED_SPEEDS.length];
+    changeSpeed(next);
+  }, [changeSpeed]);
+
   const toggleAmbient = useCallback(() => {
     setAmbientMode((prev) => {
       writeStorage("pargar:ambient", !prev);
@@ -485,6 +492,19 @@ export function VideoPlayer({
     return () => window.removeEventListener("keydown", onKey);
   }, [toggle, skipBack, warnSeekBlocked, poke, toggleFullscreen]);
 
+  // ── Settings click-outside close ────────────────────────────────────────────
+  useEffect(() => {
+    if (!settingsOpen) return;
+    const onMouseDown = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (settingsPanelRef.current?.contains(target)) return;
+      if (settingsBtnRef.current?.contains(target)) return;
+      setSettingsOpen(false);
+    };
+    document.addEventListener("mousedown", onMouseDown);
+    return () => document.removeEventListener("mousedown", onMouseDown);
+  }, [settingsOpen]);
+
   // ── Cleanup timers ──────────────────────────────────────────────────────────
   useEffect(() => {
     return () => {
@@ -588,13 +608,21 @@ export function VideoPlayer({
   const VolumeIcon = muted || volume === 0 ? VolumeX : volume < 0.5 ? Volume1 : Volume2;
 
   return (
-    <div className={cn("space-y-4", theaterMode && "max-w-none")}>
+    <div
+      className={cn(
+        "space-y-4",
+        // Theater mode: break out of the page's max-w container with a full-bleed trick
+        theaterMode && "relative left-1/2 right-1/2 -mx-[50vw] w-screen",
+      )}
+    >
       {/* ── Player container ─── */}
       <div
         ref={containerRef}
         className={cn(
-          "group relative overflow-hidden rounded-xl border border-border bg-black shadow-soft",
+          "group relative overflow-hidden bg-black shadow-soft",
-          theaterMode && "rounded-none border-x-0",
+          theaterMode
+            ? "rounded-none border-y border-border"
+            : "rounded-xl border border-border",
         )}
         onMouseMove={poke}
         onPointerDown={handlePointerDown}
@@ -777,8 +805,13 @@ export function VideoPlayer({
               <input type="range" min={0} max={1} step={0.05} value={muted ? 0 : volume} onChange={(e) => { const v = parseFloat(e.target.value); setVolume(v); if (v > 0 && muted) setMuted(false); }} className="h-1 w-16 cursor-pointer accent-white opacity-80 hover:opacity-100" aria-label="میزان صدا" />
             </div>
 
-            {/* Speed pill */}
+            {/* Speed pill — click cycles through speeds */}
-            <button type="button" onClick={() => setSettingsOpen((o) => !o)} className="inline-flex items-center gap-1 rounded-full bg-white/10 px-2.5 py-2 text-xs font-bold text-white transition hover:bg-white/20 min-h-[44px]" title="تنظیمات">
+            <button
+              type="button"
+              onClick={cycleSpeed}
+              title={`سرعت پخش: ${speed}× — کلیک برای تغییر`}
+              className="inline-flex items-center gap-1 rounded-full bg-white/10 px-2.5 py-2 text-xs font-bold text-white transition hover:bg-white/20 min-h-[44px]"
+            >
               <Gauge className="h-4 w-4" />
               <span>{speed}×</span>
             </button>
@@ -789,9 +822,16 @@ export function VideoPlayer({
             {/* Watched pct */}
             <span className="hidden text-xs text-white/70 sm:inline">{Math.round(watchedPct)}٪</span>
 
-            {/* Settings gear */}
+            {/* Settings gear — opens ambient / global settings only */}
-            <button type="button" onClick={() => setSettingsOpen((o) => !o)} className="rounded-full bg-white/10 p-2.5 text-white transition hover:bg-white/20 min-w-[44px] min-h-[44px] flex items-center justify-center" title="تنظیمات (settings)">
+            <button
-              <Settings className={cn("h-5 w-5 transition-transform", settingsOpen && "rotate-45")} />
+              ref={settingsBtnRef}
+              type="button"
+              onClick={() => setSettingsOpen((o) => !o)}
+              className="rounded-full bg-white/10 p-2.5 text-white transition hover:bg-white/20 min-w-[44px] min-h-[44px] flex items-center justify-center"
+              title="تنظیمات پخش"
+              aria-expanded={settingsOpen}
+            >
+              <Settings className={cn("h-5 w-5 transition-transform duration-200", settingsOpen && "rotate-45")} />
             </button>
 
             {/* Theater mode */}
@@ -806,27 +846,31 @@ export function VideoPlayer({
           </div>
         </div>
 
-        {/* Settings flyout */}
+        {/* Settings flyout — anchored above the controls bar, closes only on outside click */}
         <AnimatePresence>
           {settingsOpen && (
             <motion.div
+              ref={settingsPanelRef}
               key="settings"
-              initial={{ opacity: 0, y: 8, scale: 0.96 }}
+              initial={{ opacity: 0, y: 6, scale: 0.97 }}
               animate={{ opacity: 1, y: 0, scale: 1 }}
-              exit={{ opacity: 0, y: 8, scale: 0.96 }}
+              exit={{ opacity: 0, y: 6, scale: 0.97 }}
-              transition={{ duration: 0.15 }}
+              transition={{ duration: 0.13 }}
-              className="absolute bottom-[5.5rem] end-3 z-30 min-w-[180px] rounded-xl border border-white/10 bg-black/90 p-2 text-sm text-white backdrop-blur-md"
+              className="absolute bottom-[4.5rem] end-3 z-40 min-w-[200px] rounded-xl border border-white/10 bg-neutral-900/95 p-2 text-sm text-white shadow-xl backdrop-blur-md"
+              onPointerDown={(e) => e.stopPropagation()}
             >
-              {/* Playback speed */}
+              <p className="mb-1.5 px-2 text-[10px] font-bold uppercase tracking-widest text-white/40">تنظیمات پخش</p>
-              <p className="mb-1 px-2 text-[11px] font-bold uppercase tracking-widest text-white/50">سرعت پخش</p>
+
-              <div className="mb-3 flex flex-wrap gap-1">
+              {/* Speed picker (full grid) */}
+              <p className="mb-1 px-2 text-[11px] font-semibold text-white/60">سرعت</p>
+              <div className="mb-2 grid grid-cols-3 gap-1">
                 {ALLOWED_SPEEDS.map((s) => (
                   <button
                     key={s}
                     type="button"
-                    onClick={() => changeSpeed(s)}
+                    onClick={() => { changeSpeed(s); setSettingsOpen(false); }}
                     className={cn(
-                      "rounded-lg px-3 py-1.5 text-xs font-bold transition-colors min-h-[36px]",
+                      "rounded-lg py-1.5 text-xs font-bold transition-colors",
                       speed === s
                         ? "bg-primary text-primary-foreground"
                         : "bg-white/10 hover:bg-white/20",
@@ -836,17 +880,20 @@ export function VideoPlayer({
                   </button>
                 ))}
               </div>
+
+              <div className="my-1.5 border-t border-white/10" />
+
               {/* Ambient toggle */}
               <button
                 type="button"
                 onClick={toggleAmbient}
                 className={cn(
-                  "flex w-full items-center gap-2 rounded-lg px-2 py-2 text-xs font-bold transition-colors min-h-[40px]",
+                  "flex w-full items-center gap-2 rounded-lg px-2 py-2 text-xs font-bold transition-colors",
                   ambientMode ? "bg-primary/20 text-primary" : "hover:bg-white/10",
                 )}
               >
-                <Zap className="h-4 w-4" />
+                <Zap className="h-4 w-4 shrink-0" />
-                حالت محیطی (Ambient)
+                <span>حالت محیطی</span>
                 <span className={cn("ms-auto text-[10px]", ambientMode ? "text-primary" : "text-white/40")}>
                   {ambientMode ? "فعال" : "غیرفعال"}
                 </span>
@@ -873,7 +920,10 @@ export function VideoPlayer({
       </div>
 
       {/* ── Progress strip below player ─── */}
-      <div className="flex flex-wrap items-center justify-between gap-4 rounded-xl border border-border bg-card p-4">
+      <div className={cn(
+        "flex flex-wrap items-center justify-between gap-4 rounded-xl border border-border bg-card p-4",
+        theaterMode && "mx-auto max-w-5xl px-6",
+      )}>
         <div className="min-w-0 flex-1">
           <p className="text-sm font-medium">پیشرفت تماشای تاییدشده</p>
           <p className="text-xs text-muted-foreground">