release: pull private Gitea packages via gitea-pull secret (ns pargar)

download.docker.com resets intermittently from the cluster network, and
/root/.docker/cli-plugins is not searched when the workflow sets
DOCKER_CONFIG=/tmp/.docker ('Docker buildx is required').

- jobs on the apollo runner use act-job:20 (.gitea/job-image: node 20 +
  docker CLI + buildx in system plugin paths) - no runtime downloads
- other runners fall back to installing, now into a system plugin path

.gitea/job-image/Dockerfile

@@ -0,0 +1,14 @@
+# CI job image for the Gitea Actions runners.
+#
+# JS actions (actions/checkout, docker/build-push-action) execute INSIDE the
+# job container and need node; builds talk to the runner's daemon through the
+# mounted /var/run/docker.sock, so this image needs the docker CLI + buildx
+# but no daemon. Baking them in means jobs never download binaries at runtime:
+# download.docker.com and github.com releases are unreachable (connection
+# reset) from the cluster's network.
+#
+# Tagged as src.panahifar.ir/ahp/act-job:20 (node 20 / bookworm).
+FROM node:20-bookworm
+
+COPY --from=docker:27-cli /usr/local/bin/docker /usr/local/bin/docker
+COPY --from=docker:27-cli /usr/local/libexec/docker/cli-plugins/docker-buildx /usr/local/libexec/docker/cli-plugins/docker-buildx

.gitea/workflows/build-and-push.yaml

@@ -0,0 +1,90 @@
+name: build-and-push
+
+# On a version tag push (v*), build both images and publish them to the
+# Gitea container registry. Argo CD then rolls them out via
+# deploy/helm/pargar (values-apollo.yaml pins the matching image tags).
+#
+# Requires a registered Gitea Actions runner, a `REGISTRY_TOKEN` secret
+# (Gitea access token with write:package scope) so docker login can push to
+# the registry.
+
+on:
+  push:
+    tags:
+      - "v*"
+
+permissions:
+  contents: read
+  packages: write
+
+env:
+  REGISTRY: src.panahifar.ir
+  BACKEND_IMAGE: ahp/pargar-backend
+  FRONTEND_IMAGE: ahp/pargar-frontend
+  # Single credential location shared by login + build steps (the job runs
+  # in a container whose HOME can differ between steps).
+  DOCKER_CONFIG: /tmp/.docker
+
+jobs:
+  build:
+    # Gitea runners match on their registered labels (default: linux-amd64)
+    runs-on: linux-amd64
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Image tag (strip leading v)
+        id: meta
+        run: echo "version=${GITHUB_REF_NAME#v}" >> "$GITHUB_OUTPUT"
+
+      # Builds run docker-outside-of-docker through the runner-mounted
+      # /var/run/docker.sock. The apollo runner's job image (act-job:20,
+      # .gitea/job-image) already ships the docker CLI + buildx in system
+      # plugin paths; runners on other networks fall back to installing them
+      # at runtime (needs access to download.docker.com + github.com, and the
+      # plugin must land where docker looks with DOCKER_CONFIG set).
+      - name: Set up Docker CLI (preinstalled on apollo; install elsewhere)
+        run: |
+          set -eu
+          if [ ! -S /var/run/docker.sock ]; then
+            echo "::error::/var/run/docker.sock is not mounted in the job container - the act_runner config must mount it (docker_host: \"\" auto-mounts it)."
+            exit 1
+          fi
+          if ! command -v docker >/dev/null 2>&1 || ! docker buildx version >/dev/null 2>&1; then
+            curl -fsSL "https://download.docker.com/linux/static/stable/x86_64/docker-27.5.1.tgz" | tar xz --strip-components=1 -C /usr/local/bin docker/docker
+            mkdir -p /root/.docker/cli-plugins /usr/local/libexec/docker/cli-plugins
+            curl -fsSL "https://github.com/docker/buildx/releases/download/v0.19.3/buildx-v0.19.3.linux-amd64" -o /root/.docker/cli-plugins/docker-buildx
+            cp /root/.docker/cli-plugins/docker-buildx /usr/local/libexec/docker/cli-plugins/docker-buildx
+            chmod +x /root/.docker/cli-plugins/docker-buildx /usr/local/libexec/docker/cli-plugins/docker-buildx
+          fi
+          docker version
+          docker buildx version
+
+      - name: Login to Gitea container registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.REGISTRY_TOKEN }}
+
+      - name: Build and push backend
+        uses: docker/build-push-action@v6
+        with:
+          context: ./backend
+          push: true
+          tags: |
+            ${{ env.REGISTRY }}/${{ env.BACKEND_IMAGE }}:${{ steps.meta.outputs.version }}
+            ${{ env.REGISTRY }}/${{ env.BACKEND_IMAGE }}:latest
+
+      - name: Build and push frontend
+        uses: docker/build-push-action@v6
+        with:
+          context: ./frontend
+          push: true
+          # Empty = same-origin API/WS through the Traefik reverse proxy
+          # (the production topology). Override via repo variables if needed.
+          build-args: |
+            NEXT_PUBLIC_API_URL=${{ vars.NEXT_PUBLIC_API_URL }}
+            NEXT_PUBLIC_WS_URL=${{ vars.NEXT_PUBLIC_WS_URL }}
+          tags: |
+            ${{ env.REGISTRY }}/${{ env.FRONTEND_IMAGE }}:${{ steps.meta.outputs.version }}
+            ${{ env.REGISTRY }}/${{ env.FRONTEND_IMAGE }}:latest

README.md

@@ -10,7 +10,6 @@
 </p>
 
 <p align="center">
-  <a href="https://github.com/Panahifarah/pargar/releases/tag/v0.2.1"><img src="https://img.shields.io/github/v/tag/Panahifarah/pargar?label=release&color=5B4CDB" alt="release" /></a>
   <a href="LICENSE"><img src="https://img.shields.io/badge/license-AGPL--3.0-5B4CDB" alt="AGPL-3.0" /></a>
 </p>
 

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 {
-	if v, err := s.store.GetSetting(ctx, "certificate_requires_approval"); err == nil {
-		return v == "true" || v == "1"
-	}
-	return true
-}
+// certRequiresApproval always returns true — certificates are never auto-issued.
+// The DB setting is kept for observability but cannot override the hard gate.
+func (s *Server) certRequiresApproval(_ context.Context) bool { 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)
 	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)
-	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)
-				_ = s.notify.Notify(r.Context(), u.ID, "progress", "certificate_issued",
-					"گواهینامه آماده است", "دوره را به پایان رساندید. گواهینامه دیجیتال شما صادر شد.", "/c/"+cert.PublicID, nil)
+				observability.Activity("certificate.pending", "user_id", u.ID)
+				_ = s.notify.Notify(r.Context(), u.ID, "progress", "certificate_pending",
+					"درخواست گواهینامه ثبت شد", "دوره را با موفقیت به پایان رساندید. درخواست گواهینامه شما ثبت شد و پس از تأیید مدیریت صادر خواهد شد.", "/profile", nil)
+				_ = cert // pending; no publicId yet
 			}
 			s.notifyQuizPassed(u.ID, lesson.Title, id, activeUser.StreakCurrent)
 			_ = s.notifyUnlockedLessons(u.ID, id)

deploy/helm/pargar/values-apollo.yaml

@@ -11,7 +11,7 @@ backend:
   image:
     pullPolicy: IfNotPresent
     repository: pargar-backend
-    tag: 0.2.1
+    tag: 0.3.7
   metrics:
     serviceMonitor:
       enabled: true
@@ -41,7 +41,7 @@ frontend:
   image:
     pullPolicy: IfNotPresent
     repository: pargar-frontend
-    tag: 0.2.1
+    tag: 0.3.7
   podDisruptionBudget:
     enabled: false
   replicaCount: 2
@@ -55,9 +55,13 @@ frontend:
 global:
   domain: pargar.panahifar.ir
   frontendOrigins: https://pargar.panahifar.ir
-  imageRegistry: ""
+  # Images published by .gitea/workflows/build-and-push.yaml on tag push.
+  imageRegistry: src.panahifar.ir/ahp
   publicUrl: https://pargar.panahifar.ir
-imagePullSecrets: []
+# Gitea packages are private: kubelet pulls need secret `gitea-pull`
+# (docker-registry secret for src.panahifar.ir, created in ns pargar).
+imagePullSecrets:
+  - gitea-pull
 ingress:
   enabled: true
   tls:

deploy/helm/pargar/values-prod.yaml

@@ -3,25 +3,26 @@
 #     -f deploy/helm/pargar/values-prod.yaml
 #
 # Prerequisites:
-#   - images pushed to ghcr.io/pargar/{backend,frontend}:<tag>
+#   - images pushed to src.panahifar.ir/ahp/{pargar-backend,pargar-frontend}:<tag>
+#     (by .gitea/workflows/build-and-push.yaml on a v* tag push)
 #   - Secret pargar-app (jwt-secret, admin-password, metrics-token, database-url, redis-url,
 #     storage-access-key, storage-secret-key)
 #   - cert-manager ClusterIssuer letsencrypt-prod
-#   - imagePullSecrets if the registry is private
+#   - imagePullSecrets if the Gitea package registry visibility is private
 
 global:
   domain: app.example.com
   publicUrl: https://app.example.com
   frontendOrigins: "https://app.example.com"
-  imageRegistry: ghcr.io/pargar
+  imageRegistry: src.panahifar.ir/ahp
 
 imagePullSecrets:
-  - name: ghcr-pull
+  - name: gitea-pull
 
 backend:
   replicaCount: 2
   image:
-    repository: backend
+    repository: pargar-backend
     tag: "0.2.1"
     pullPolicy: IfNotPresent
   existingSecret: pargar-app
@@ -48,7 +49,7 @@ backend:
 frontend:
   replicaCount: 2
   image:
-    repository: frontend
+    repository: pargar-frontend
     tag: "0.2.1"
     pullPolicy: IfNotPresent
   resources:

frontend/src/app/unwrap/page.tsx

@@ -152,23 +152,26 @@ function ChatsLauncher() {
   const convTotal = convData?.total ?? conversations.length;
 
   return (
-    <div className="grid gap-4 lg:grid-cols-2">
-      <Panel className="justify-center text-center" title="گفتگوها" description="یک پنجرهٔ شناور شیشه‌ای در تمام صفحات — با صدا، عکس، ویدیو و پیام صوتی.">
-        <div className="flex flex-col items-center gap-4 pt-1">
-          <div className="grid h-14 w-14 place-items-center rounded-2xl bg-primary/10">
-            <MessageSquareHeart className="h-7 w-7 text-primary" />
+    <div className="space-y-4">
+      {/* ── Centered header banner ── */}
+      <div className="flex flex-col items-center gap-3 rounded-2xl border border-border bg-card px-6 py-6 text-center">
+        <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-4 w-4 shrink-0" />
+          یک پنجرهٔ شناور شیشه‌ای در تمام صفحات — با صدا، عکس، ویدیو و پیام صوتی.
         </div>
-          <p className="max-w-sm text-sm text-muted-foreground">
+        <Button onClick={() => openChat()} className="gap-2">
+          <Sparkles className="h-4 w-4" /> باز کردن گفتگوها ✨
+        </Button>
+        <p className="max-w-md text-sm text-muted-foreground">
           گفتگو همیشه در دکمهٔ شناور پایین صفحه در دسترس شماست؛ گفتگوها خصوصی هستند و پاسخ منتورها معمولاً کمتر از یک روز طول می‌کشد.
         </p>
-          <Button onClick={() => openChat()} className="gap-2">
-            <Sparkles className="h-4 w-4" /> باز کردن گفتگوها
-          </Button>
       </div>
-      </Panel>
 
+      {/* ── Side-by-side panels ── */}
+      <div className="grid gap-4 lg:grid-cols-2">
+        {/* Conversations panel */}
         <Panel title="گفتگوهای شما" description="مکالمات جاری — روی هر کدام بزنید تا باز شود.">
-        <div className="space-y-1.5 pt-1">
+          <div className="max-h-[32rem] overflow-y-auto space-y-1.5 pt-1 pb-1">
             {convLoading && (
               <div className="space-y-2">
                 {[0, 1, 2].map((i) => (
@@ -244,6 +247,7 @@ function ChatsLauncher() {
           </div>
         </Panel>
 
+        {/* Start chat panel */}
         <Panel
           title={staff ? "شروع گفتگو" : "شروع سریع با منتور"}
           description="نقش هر نفر روی ردیف نوشته شده است."
@@ -253,7 +257,7 @@ function ChatsLauncher() {
             </Button>
           }
         >
-        <div className="space-y-1 pt-1">
+          <div className="max-h-[32rem] overflow-y-auto space-y-1 pt-1 pb-1">
             {isLoading && (
               <div className="space-y-2">
                 {[0, 1, 2, 3].map((i) => (
@@ -312,6 +316,7 @@ function ChatsLauncher() {
           </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">
-          <p className="text-[11px] leading-relaxed text-muted-foreground">
-            دوره را تمام کرده‌اید. گواهینامه دیجیتال آمادهٔ صدور است.
+        <div className="flex items-start gap-2 rounded-lg border border-border/70 bg-background/60 px-3 py-2.5">
+          <Clock className="mt-0.5 h-3.5 w-3.5 shrink-0 text-warning" />
+          <div>
+            <p className="text-[11px] font-bold text-foreground">در انتظار تأیید</p>
+            <p className="mt-0.5 text-[10px] leading-relaxed text-muted-foreground">
+              درخواست گواهینامه ثبت شد و پس از بررسی توسط تیم آموزش صادر می‌شود.
             </p>
-          <Button type="button" size="sm" className="h-8 w-full" disabled={issuing} onClick={() => void claim()}>
-            {issuing ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Award className="h-3.5 w-3.5" />}
-            دریافت گواهینامه
-          </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",
-          theaterMode && "rounded-none border-x-0",
+          "group relative overflow-hidden bg-black shadow-soft",
+          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 */}
-            <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="تنظیمات">
+            {/* Speed pill — click cycles through speeds */}
+            <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 */}
-            <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)">
-              <Settings className={cn("h-5 w-5 transition-transform", settingsOpen && "rotate-45")} />
+            {/* Settings gear — opens ambient / global settings only */}
+            <button
+              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 }}
-              transition={{ duration: 0.15 }}
-              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"
+              exit={{ opacity: 0, y: 6, scale: 0.97 }}
+              transition={{ duration: 0.13 }}
+              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 px-2 text-[11px] font-bold uppercase tracking-widest text-white/50">سرعت پخش</p>
-              <div className="mb-3 flex flex-wrap gap-1">
+              <p className="mb-1.5 px-2 text-[10px] font-bold uppercase tracking-widest text-white/40">تنظیمات پخش</p>
+
+              {/* 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" />
-                حالت محیطی (Ambient)
+                <Zap className="h-4 w-4 shrink-0" />
+                <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">