/* ═══════════════════════════════════════════════════════════════════════════
 *  v431 · دوبله — ظاهر 361: دوربین تمام‌صفحه (آینه‌ای برای دوربین جلو)، شمارش ۳-۲-۱، دکمهٔ ضبط با حلقهٔ پیشرفت،
 *  پیش‌نمایش با «دوباره» و «بعدی». دکمهٔ «دوبله» در ستون کنار ویدیوی کاوش همان شکل دکمه‌های 192 را دارد.
 *  بی @keyframes بی‌پایان؛ حلقه فقط هنگام ضبط با JS جلو می‌رود.
 * ═══════════════════════════════════════════════════════════════════════════ */
#db431{
  position:fixed; inset:0; z-index:10080; background:#000; color:#fff; overflow:hidden;
  font-family:Vazirmatn, system-ui, sans-serif; animation:db431in .2s ease; touch-action:none;
}
#db431.out{ opacity:0; transition:opacity .2s }
@keyframes db431in{ from{ opacity:0 } }
/* v434: پیش‌نمایش دقیقاً در قاب ۹:۱۶ِ ویدیوی ضبط‌شده (وسط صفحه)، نه تمام‌صفحهٔ بلند که کناره‌ها را می‌برید و زوم دیده می‌شد */
.db431-cam, .db431-pv{
  position:absolute; left:50%; top:50%; width:min(100vw, calc(100vh * 9 / 16)); width:min(100vw, calc(100dvh * 9 / 16)); height:auto; aspect-ratio:9 / 16;
  object-fit:cover; background:#000; transform:translate(-50%,-50%);
}
.db431-cam{ transform:translate(-50%,-50%) scaleX(-1) }
#db431.back .db431-cam{ transform:translate(-50%,-50%) }
#db431.wide .db431-cam{ object-fit:contain }
/* مرورگر بی dvh (کروم زیر ۱۰۸، iOS 15.0–15.3): 100vh بلندترین نما است و قاب از بالا و پایین بیرون می‌زد ← اندازه از ارتفاع خود #db431 */
@supports (aspect-ratio:1/1) and (not (height:1dvh)){ .db431-cam, .db431-pv{ width:auto; height:min(100%, calc(100vw * 16 / 9)) } }
.db431-pv{ display:none }
#db431.done .db431-pv{ display:block }
#db431.done .db431-cam{ visibility:hidden }

.db431-top{
  position:absolute; left:0; right:0; top:0; z-index:2; display:flex; align-items:center; gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 14px 24px; background:linear-gradient(rgba(0,0,0,.45), transparent);
}
.db431-ib{
  flex:0 0 auto; width:44px; height:44px; display:grid; place-items:center; padding:0; border:0; border-radius:50%;
  background:rgba(255,255,255,.16); color:#fff; cursor:pointer; transition:transform .12s;
}
.db431-ib svg{ width:22px; height:22px }
.db431-ib:active{ transform:scale(.92) }
.db431-snd{
  flex:1; min-width:0; display:flex; align-items:center; justify-content:center; gap:7px;
  font-size:14px; font-weight:800; text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.db431-snd svg{ flex:0 0 auto; width:17px; height:17px }
.db431-snd b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
#db431.rec .db431-ib, #db431.count .db431-ib, #db431.done .flip{ opacity:0; pointer-events:none }

.db431-cd{
  position:absolute; left:50%; top:44%; z-index:2; transform:translate(-50%,-50%); font:900 120px/1 Vazirmatn, system-ui, sans-serif;
  font-style:normal; text-shadow:0 6px 30px rgba(0,0,0,.55); pointer-events:none;
}
.db431-cd.pop{ animation:db431pop .9s ease-out }
@keyframes db431pop{ from{ opacity:0; transform:translate(-50%,-50%) scale(1.6) } 30%{ opacity:1; transform:translate(-50%,-50%) scale(1) } to{ opacity:.85; transform:translate(-50%,-50%) scale(.92) } }
.db431-msg{
  position:absolute; left:16px; right:16px; bottom:calc(132px + env(safe-area-inset-bottom)); z-index:2; margin:0; text-align:center;
  font-size:13.5px; font-weight:800; text-shadow:0 1px 4px rgba(0,0,0,.6); transition:opacity .2s;
}
#db431.count .db431-msg, #db431.rec .db431-msg, #db431.done .db431-msg{ opacity:0 }

.db431-bot{
  position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; align-items:center; justify-content:center; gap:18px;
  padding:18px 16px calc(24px + env(safe-area-inset-bottom)); background:linear-gradient(transparent, rgba(0,0,0,.45));
}
.db431-rec{
  position:relative; width:88px; height:88px; padding:0; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.db431-rec > svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg) }
.db431-rec .trk{ fill:none; stroke:rgba(255,255,255,.85); stroke-width:6 }
.db431-rec .pg{ fill:none; stroke:#DB2777; stroke-width:6; stroke-linecap:round }
.db431-rec i{
  position:absolute; inset:12px; border-radius:50%; background:linear-gradient(135deg,#DB2777 0%,#7C3AED 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 10px 26px -8px rgba(219,39,119,.8); transition:inset .2s, border-radius .2s;
}
#db431.rec .db431-rec i{ inset:28px; border-radius:9px }
.db431-rec i{ display:grid; place-items:center; color:#fff }
.db431-rec i svg{ width:28px; height:28px; transition:opacity .15s }
#db431.rec .db431-rec i svg{ opacity:0 }
#db431:not(.ready) .db431-rec{ opacity:.5; pointer-events:none }
.db431-b{
  display:none; height:52px; align-items:center; gap:8px; padding:0 22px; border:0; border-radius:99px; cursor:pointer;
  font:900 15px/1 Vazirmatn, system-ui, sans-serif; transition:transform .12s;
}
.db431-b svg{ width:20px; height:20px }
.db431-b.redo{ background:rgba(255,255,255,.18); color:#fff }
.db431-b.go{
  background:linear-gradient(135deg,#DB2777 0%,#7C3AED 100%); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(70,10,90,.24), 0 10px 22px -10px rgba(171,48,178,.75);
}
[dir=rtl] .db431-b.go svg{ transform:scaleX(-1) }
.db431-b:active{ transform:scale(.96) }
#db431.done .db431-rec{ display:none }
#db431.done .db431-b{ display:flex }
.db431-ib:focus-visible, .db431-rec:focus-visible, .db431-b:focus-visible{ outline:2.5px solid #fff; outline-offset:3px }
@media (prefers-reduced-motion:reduce){
  #db431, .db431-cd.pop{ animation:none }
  .db431-rec i, .db431-ib, .db431-b{ transition:none }
}

/* ═══════════════ v433 · نوار صدای ویدیو در نمایشگر کاوش (192) ═══════════════ */
/* فقط وقتی ویدیو صدا دارد (.au433)؛ میله‌ها فقط روی ویدیوی جاری و در حال پخش تکان می‌خورند (transform) */
.sli151 > .snd433{
  display:none; max-width:100%; height:38px; margin-top:10px; padding:0 4px; padding-inline-start:12px; gap:9px; border-radius:99px;
  background:rgba(17,10,28,.46); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); color:#fff; cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:transform .12s;
}
.sl151.au433 .sli151 > .snd433{ display:flex; align-items:center; width:max-content }
.sli151 > .snd433:active{ transform:scale(.97) }
.eq433{ flex:0 0 auto; display:flex; align-items:flex-end; gap:2.5px; height:14px; font-style:normal }
.eq433 b{ width:3px; height:100%; border-radius:2px; background:#FF5C8A; transform-origin:50% 100%; transform:scaleY(.45) }
.eq433 b:nth-child(2){ background:#F472B6 }
.eq433 b:nth-child(3){ background:#C084FC }
.sl151.on433:not(.pz) .eq433 b{ animation:eq433 .8s ease-in-out infinite alternate }
.sl151.on433:not(.pz) .eq433 b:nth-child(2){ animation-delay:-.27s }
.sl151.on433:not(.pz) .eq433 b:nth-child(3){ animation-delay:-.53s }
@keyframes eq433{ from{ transform:scaleY(.3) } to{ transform:scaleY(1) } }
.sli151 > .snd433 span{ min-width:0; max-width:44vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:800 }
.sli151 > .snd433 em{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 12px; border-radius:99px; font-style:normal;
  background:linear-gradient(135deg,#DB2777 0%,#7C3AED 100%); color:#fff; font-size:12.5px; font-weight:900;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26), 0 6px 14px -6px rgba(171,48,178,.8);
}
.sli151 > .snd433 em svg{ width:15px; height:15px }
.sli151 > .snd433:focus-visible{ outline:2.5px solid #fff; outline-offset:2px }
@media (prefers-reduced-motion:reduce){ .sl151.on433 .eq433 b{ animation:none } .sli151 > .snd433{ transition:none } }
html.lite366 .eq433 b{ animation:none !important }

/* ═══════════════ v436 · حالت استوری (#db431.story): انتخاب ۱۵/۳۰ ثانیه، «استوری کن» ═══════════════ */
.db431-secs{
  flex:1; min-width:0; display:flex; justify-content:center; gap:6px; transition:opacity .2s;
}
.db431-secs button{
  height:36px; padding:0 14px; border:0; border-radius:99px; cursor:pointer; background:rgba(0,0,0,.32); color:#fff;
  font:800 13.5px/1 Vazirmatn, system-ui, sans-serif; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); transition:transform .12s, background-color .15s;
}
.db431-secs button.on{ background:#fff; color:#1b1029; box-shadow:0 6px 16px -8px rgba(0,0,0,.6) }
.db431-secs button:active{ transform:scale(.95) }
.db431-secs button:focus-visible{ outline:2.5px solid #fff; outline-offset:2px }
#db431.rec .db431-secs, #db431.done .db431-secs{ opacity:0; pointer-events:none }
#db431.story .db431-b.go svg{ transform:none }
[dir=rtl] #db431.story .db431-b.go svg{ transform:scaleX(-1) }
#db431.busy .db431-b{ opacity:.7; pointer-events:none }
@media (prefers-reduced-motion:reduce){ .db431-secs, .db431-secs button{ transition:none } }

/* ═══════════════ v459 · ریلز + افکت‌ها + میکسر دوبله ═══════════════ */
/*  قرص «ریلز هارتلی» — نام کلاس یکتا (rl459)؛ .rl سراسری 246 شکل روشن پنل آژانس را می‌داد  */
.db431-snd.rl459 b{
  display:inline-block; padding:9px 18px; border-radius:99px; overflow:visible;
  background:rgba(10,6,20,.5); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
  font-size:13.5px; font-weight:900; color:#fff;
}

/*  نوار افکت (استوری/ریلز/دوبله) — دایره‌ها همان فیلتر را روی نمونهٔ گرادیانی نشان می‌دهند  */
.db431-fx{
  position:absolute; left:0; right:0; bottom:calc(126px + env(safe-area-inset-bottom)); z-index:2; display:flex; gap:12px;
  padding:4px 18px 8px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; transition:opacity .2s;
}
.db431-fx::-webkit-scrollbar{ display:none }
.db431-fx button{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:5px; padding:0; border:0; background:none;
  color:rgba(255,255,255,.82); font:800 10.5px/1 Vazirmatn, system-ui, sans-serif; cursor:pointer; text-shadow:0 1px 4px rgba(0,0,0,.6);
}
.db431-fx button i{
  width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,#FDE68A 0%,#FB7185 45%,#7C3AED 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3), 0 4px 10px rgba(0,0,0,.35); transition:transform .15s;
}
.db431-fx button.on{ color:#fff }
.db431-fx button.on i{ transform:scale(1.08); box-shadow:0 0 0 2px #0b0714, 0 0 0 4.5px #F5B93B, 0 6px 14px rgba(0,0,0,.4) }
#db431.count .db431-fx, #db431.rec .db431-fx, #db431.done .db431-fx, #db431:not(.ready) .db431-fx{ opacity:0; pointer-events:none }
#db431.fx .db431-msg{ bottom:calc(216px + env(safe-area-inset-bottom)) }

/*  میکسر دوبله: «صدای تو» و «موزیک» — وسط ضبط هم کار می‌کند  */
.db431-mx{ position:absolute; left:18px; right:18px; z-index:2; display:flex; flex-direction:column; gap:8px; transition:opacity .2s }
#db431.fx .db431-mx{ bottom:calc(214px + env(safe-area-inset-bottom)) }
#db431:not(.fx) .db431-mx{ bottom:calc(128px + env(safe-area-inset-bottom)) }
#db431.fx:not(.story):not(.reel) .db431-msg{ bottom:calc(306px + env(safe-area-inset-bottom)) }
#db431:not(.fx):not(.story):not(.reel) .db431-msg{ bottom:calc(220px + env(safe-area-inset-bottom)) }
.db431-mx label{
  display:flex; align-items:center; gap:10px; height:36px; padding:0 14px; border-radius:99px;
  background:rgba(10,6,20,.52); box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.db431-mx i{ flex:0 0 auto; width:17px; height:17px; display:grid; color:#F9A8D4 }
.db431-mx label.mus i{ color:#C4B5FD }
.db431-mx i svg{ width:100%; height:100% }
.db431-mx input{ flex:1; min-width:0; height:4px; accent-color:#DB2777; cursor:pointer }
.db431-mx label.off{ opacity:.4 }
.db431-mx label.off input{ pointer-events:none }
#db431.done .db431-mx, #db431:not(.ready) .db431-mx{ opacity:0; pointer-events:none }

/*  دکمهٔ گالری داخل دوربین ریلز  */
.db431-gal{
  position:absolute; inset-inline-start:28px; bottom:calc(36px + env(safe-area-inset-bottom)); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:0; border:0; background:none; color:#fff;
  font:800 11.5px/1 Vazirmatn, system-ui, sans-serif; cursor:pointer; text-shadow:0 1px 4px rgba(0,0,0,.6); transition:transform .12s;
}
.db431-gal:active{ transform:scale(.93) }
.db431-gal svg{
  width:24px; height:24px; padding:12px; box-sizing:content-box; border-radius:17px;
  background:rgba(255,255,255,.16); box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
}
#db431.count .db431-gal, #db431.rec .db431-gal, #db431.done .db431-gal, #db431:not(.ready) .db431-gal{ display:none }
.db431-gal:focus-visible, .db431-fx button:focus-visible, .db431-mx input:focus-visible{ outline:2.5px solid #fff; outline-offset:3px }
@media (prefers-reduced-motion:reduce){ .db431-fx, .db431-fx button i, .db431-mx, .db431-gal{ transition:none } }