:root{
  --u-1:4px; --u-2:clamp(6px,.5vw + 4px,9px); --u-3:clamp(10px,.8vw + 6px,14px);
  --u-4:clamp(14px,1.2vw + 8px,20px); --u-5:clamp(18px,1.8vw + 10px,28px);
  --u-fs-xs:clamp(11px,.18vw + 10.4px,12.5px); --u-fs-sm:clamp(12.5px,.2vw + 11.8px,14px);
  --u-fs-md:clamp(14px,.26vw + 13.2px,16px); --u-fs-lg:clamp(15.5px,.45vw + 14.2px,18.5px);
  --u-fs-xl:clamp(18px,.85vw + 15.4px,24px); --u-fs-2xl:clamp(21px,1.4vw + 16.6px,32px);
  --u-tap:44px; --u-r:clamp(10px,.5vw + 8px,14px); --u-nav-h:74px; --u-max:1560px;
}
main,.page,.bn-page,.nw-page{ max-width:var(--u-max); margin-inline:auto; padding-inline:var(--u-4); }
body{ font-size:var(--u-fs-md); line-height:1.85; text-wrap:pretty; }
h1{ font-size:var(--u-fs-2xl); line-height:1.35; margin-block:var(--u-3) var(--u-2); }
h2{ font-size:var(--u-fs-xl); line-height:1.42; margin-block:var(--u-4) var(--u-2); }
h3{ font-size:var(--u-fs-lg); line-height:1.5; margin-block:var(--u-3) var(--u-1); }
.muted,.bn-sub,.bn-row-sub,.nw-card-meta{ font-size:var(--u-fs-sm); }
small,.pill,.tag,.badge,.nw-cat{ font-size:var(--u-fs-xs); }
.card,.bn-tile,.nw-card{ padding:var(--u-4); border-radius:var(--u-r); }
.bn-grid,.nw-grid,.bn-stack-2,.at-stats{ gap:var(--u-4); }
.btn,button:not(.btn-ghost):not([class*="close"]),input[type="submit"],a.btn,.nw-chip,.bn-btn{
  min-height:var(--u-tap); display:inline-flex; align-items:center; justify-content:center;
  gap:7px; font-size:var(--u-fs-sm); padding-inline:var(--u-4); border-radius:calc(var(--u-r) - 2px); }
.btn-sm,.nw-chip{ min-height:38px; padding-inline:var(--u-3); font-size:var(--u-fs-xs); }
input[type="text"],input[type="email"],input[type="password"],input[type="search"],
input[type="number"],input[type="date"],select{ min-height:var(--u-tap); font-size:var(--u-fs-md); }
textarea{ font-size:var(--u-fs-md); line-height:1.85; }
.modal input[type="checkbox"],.modal input[type="radio"]{
  width:18px !important; height:18px !important; min-height:18px !important; flex:0 0 18px !important; }

/* اخبار */
.nw-grid{ grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),360px)) !important; justify-content:start !important; }
.nw-card{ max-width:360px !important; }
html body .nw-filters{ display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:8px !important; }
html body .nw-chip{ flex:0 0 auto !important; white-space:nowrap !important; }

/* جدول‌ها */
@media (max-width:820px){
  html body .at-table-wrap,html body div:has(> table){ overflow-x:auto !important; }
  html body table td,html body table th{ white-space:nowrap !important; word-break:normal !important; }
}

/* تماس */
@media (min-width:901px){
  html body #stage{ height:calc(100dvh - 150px) !important; min-height:560px !important;
    max-width:1280px !important; margin-inline:auto !important; display:flex !important; flex-direction:column !important; }
  html body #jitsi{ flex:1 1 auto !important; min-height:0 !important; }
  html body .call-grid{ grid-template-columns:repeat(auto-fit,minmax(0,1fr)) !important;
    grid-auto-flow:column !important; grid-auto-columns:minmax(0,1fr) !important; padding:10px !important; gap:10px !important; }
  html body .call-grid:has(> .call-tile:nth-child(5)){ grid-auto-flow:row !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
}
@media (max-width:900px){
  html body #stage{ display:flex !important; flex-direction:column !important;
    max-height:calc(100dvh - 190px) !important; overflow:hidden !important; }
  html body #jitsi{ flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; }
  html body .call-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:6px !important; }
  html body .call-tile:only-child{ grid-column:1 / -1 !important; }
  html body div:has(> .is-hang){ position:sticky !important; bottom:0 !important; z-index:20 !important;
    display:flex !important; justify-content:center !important; gap:8px !important; padding:10px 8px !important;
    background:rgba(14,16,32,.94) !important; overflow-x:auto !important; }
  html body div:has(> .is-hang) > button{ flex:0 0 auto !important; width:46px !important; height:46px !important; }
  html body .cc-flip{ bottom:78px !important; }
}
html body .call-tile.is-big{ grid-column:1 / -1 !important; grid-row:1 / -1 !important; }
html body .cc-flip{ position:absolute !important; inset-inline-end:12px !important; bottom:14px !important;
  z-index:20 !important; width:46px !important; height:46px !important; display:flex !important;
  align-items:center !important; justify-content:center !important; border-radius:50% !important;
  border:1px solid rgba(255,255,255,.22) !important; background:rgba(14,16,32,.78) !important;
  color:#fff !important; cursor:pointer !important; }
@media (min-width:901px){ html body .cc-flip{ display:none !important; } }
@media (max-width:900px),(pointer:coarse){
  html body button[title="اشتراک صفحه"]{ display:none !important; }
}

/* گوشی */
@media (max-width:820px){
  :root{ --u-tap:46px; }
  main,.page,.bn-page,.nw-page{ padding-inline:var(--u-3); }
  .card,.bn-tile,.nw-card{ padding:var(--u-3); }
  body{ padding-bottom:calc(var(--u-nav-h) + env(safe-area-inset-bottom,0px)); }
  nav[class*="bottom"],.hf-bottom-nav,.mobile-nav,[class*="tabbar"]{
    position:fixed; inset-inline:0; bottom:0; z-index:60; padding-bottom:env(safe-area-inset-bottom,0px); }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-delay:0s !important; }
  html body .toolbar{ display:flex !important; flex-wrap:wrap !important; gap:8px !important; }
  html body .toolbar .seg{ flex:1 1 100% !important; overflow-x:auto !important; }
  html body .toolbar .btn{ flex:0 0 auto !important; min-height:40px !important; white-space:nowrap !important; }
  html body #vmList{ grid-template-columns:minmax(0,1fr) !important; }
  html body #vmList video{ width:100% !important; aspect-ratio:16/10 !important; object-fit:contain !important; }
  html body #vmList .btn{ flex:1 1 calc(50% - 4px) !important; min-height:40px !important; }
}

/* تم تاریک: فیلدها */
html[data-theme="dark"] body input,html[data-theme="dark"] body textarea,html[data-theme="dark"] body select{
  background-color:#1A1D33 !important; color:#F2F4F9 !important;
  -webkit-text-fill-color:#F2F4F9 !important; caret-color:#F2F4F9 !important;
  border:1px solid rgba(255,255,255,.16) !important; }
html[data-theme="dark"] body input::placeholder,html[data-theme="dark"] body textarea::placeholder{
  color:#8B93A4 !important; -webkit-text-fill-color:#8B93A4 !important; opacity:1 !important; }
html[data-theme="dark"] body input:-webkit-autofill{
  -webkit-text-fill-color:#F2F4F9 !important; -webkit-box-shadow:0 0 0 1000px #1A1D33 inset !important; }

/* صفحهٔ ورود */
.auth-card input{ color:#13152C !important; -webkit-text-fill-color:#13152C !important;
  background:#F1F3F8 !important; border:1.5px solid rgba(19,21,44,.20) !important;
  font-size:17px !important; font-weight:600 !important; min-height:54px !important; }
.auth-card input::placeholder{ color:#A0A6B4 !important; -webkit-text-fill-color:#A0A6B4 !important; }
.auth-card,.auth-card *{ font-family:Vazirmatn,system-ui,sans-serif !important; }
.auth-card .brand-mark{ filter:none !important; opacity:1 !important; background:#fff !important; }
@media (max-width:900px){
  html body .auth-wrap{ background:linear-gradient(160deg,#1B1430,#141026 45%,#0E1020) !important; }
  html body .auth-wrap [class^="px-"]{ display:none !important; }
  html body .auth-wrap *{ animation:none !important; }
}

/* تاریخ شمسی */
.jw-box{ display:flex !important; flex-direction:column !important; gap:6px !important; }
.jw-row{ display:flex !important; gap:6px !important; }
.jw-row-t{ max-width:60% !important; }
.jw-sel{ flex:1 1 0 !important; min-width:0 !important; min-height:42px !important; padding:0 10px !important;
  border-radius:9px !important; font-family:inherit !important; font-size:13px !important;
  border:1px solid var(--ch-line,#E7EAF1) !important; background:var(--ch-bg,#F5F6FA) !important; }
html[data-theme="dark"] .jw-sel{ background:#1A1D33 !important; color:#F2F4F9 !important; }

/* لینک مهمان */
.gh-link{ margin-top:12px; padding:16px 18px; border-radius:14px; background:#fff;
  border:1px solid rgba(19,21,44,.10); box-shadow:0 14px 36px -18px rgba(19,21,44,.35);
  color:#13152C; display:flex; flex-direction:column; gap:10px; }
.gh-link b{ font-size:13px; font-weight:800; color:#3F4658; }
.gh-url{ display:block; direction:ltr; text-align:left; background:#F1F3F8;
  border:1px solid rgba(19,21,44,.10); border-radius:10px; padding:11px 13px;
  font-size:12.5px; word-break:break-all; font-family:ui-monospace,monospace; }
.gh-code{ font-size:20px; font-weight:800; letter-spacing:.22em; color:#4C1FD0; direction:ltr; }
.gh-copy{ align-self:flex-start; min-height:38px; padding-inline:14px; border-radius:9px;
  background:#4C1FD0; color:#fff; border:0; font-weight:700; cursor:pointer; }
.gh-wait{ margin-top:12px; padding:11px; border-radius:10px; background:rgba(255,193,7,.10);
  border:1px solid rgba(255,193,7,.30); display:flex; flex-direction:column; gap:8px; }
.gh-row{ display:flex; align-items:center; gap:8px; }
.gh-row > span{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation:none !important; transition:none !important; } }
:focus-visible{ outline:2px solid var(--bn-purple,#3C01AF); outline-offset:2px; }
html{ scrollbar-gutter:stable; }

/* ---------- ورود: لوگو به‌جای هالهٔ بنفش ---------- */
html body .auth-card::before{ display:none !important; }
html body .auth-card{ padding-top:0 !important; }
html body .auth-card .auth-brand{
  flex-direction:column !important; align-items:center !important;
  justify-content:center !important; gap:12px !important;
  margin-top:-46px !important; margin-bottom:18px !important;
}
html body .auth-card .brand-mark,
html body .auth-card img.brand-mark{
  width:92px !important; height:92px !important; flex:0 0 92px !important;
  border-radius:22px !important; padding:8px !important;
  background:#fff !important; object-fit:contain !important;
  box-shadow:0 18px 44px -16px rgba(124,77,255,.7),
             0 0 0 6px rgba(20,22,43,.9) !important;
}
html body .auth-card .brand-name{
  font-size:28px !important; font-weight:800 !important;
  color:#fff !important; letter-spacing:.3px !important;
}
@media (min-width: 901px){
  html body .auth-card{ padding:0 60px 52px !important; margin-top:60px !important; }
  html body .auth-card .brand-mark{
    width:104px !important; height:104px !important; flex:0 0 104px !important;
  }
  html body .auth-card .auth-brand{ margin-top:-52px !important; }
  html body .auth-card .brand-name{ font-size:32px !important; }
}
@media (max-width: 900px){
  html body .auth-card{ padding:0 24px 30px !important; margin-top:52px !important; }
  html body .auth-card .brand-mark{
    width:82px !important; height:82px !important; flex:0 0 82px !important;
    border-radius:20px !important;
  }
  html body .auth-card .auth-brand{ margin-top:-41px !important; }
  html body .auth-card .brand-name{ font-size:24px !important; }
}

/* ---------- لوگوی صفحهٔ ورود: کوچک و متناسب ---------- */
html body .auth-card .brand-mark,
html body .auth-card img.brand-mark,
html body .auth-brand .brand-mark{
  width:74px !important; height:74px !important;
  min-width:0 !important; max-width:74px !important; flex:0 0 74px !important;
  padding:8px !important; border-radius:16px !important;
  object-fit:contain !important; margin:0 auto 14px !important; display:block !important;
}
html body .auth-card .auth-brand{
  margin-bottom:8px !important; gap:8px !important;
}
html body .auth-card .brand-name{ font-size:15px !important; }
@media (max-width:620px){
  html body .auth-card .brand-mark{
    width:62px !important; height:62px !important; max-width:62px !important;
    flex:0 0 62px !important; margin-bottom:10px !important;
  }
  html body .auth-card .brand-name{ font-size:14px !important; }
}

/* ---------- گوشی: لوگو و کارت ورود جمع‌تر ---------- */
@media (max-width:820px){
  html body .auth-card .brand-mark,
  html body .auth-card img.brand-mark{
    width:52px !important; height:52px !important;
    max-width:52px !important; flex:0 0 52px !important;
    padding:6px !important; border-radius:13px !important;
    margin:0 auto 8px !important;
  }
  html body .auth-card .brand-name{ font-size:12.5px !important; letter-spacing:.02em !important; }
  html body .auth-card{ padding:20px 18px !important; }
  html body .auth-card .auth-brand{ margin-bottom:4px !important; }
}

/* ---------- گوشی: لوگو کوچک‌تر ---------- */
@media (max-width:820px){
  html body .auth-card .brand-mark,
  html body .auth-card img.brand-mark,
  html body .auth-brand .brand-mark{
    width:38px !important; height:38px !important;
    max-width:38px !important; min-width:38px !important; flex:0 0 38px !important;
    padding:4px !important; border-radius:10px !important; margin:0 auto 6px !important;
  }
  html body .auth-card .brand-name{ font-size:11px !important; }
}

/* ---------- صفحهٔ ورود روی گوشی: لوگو داخل کارت ---------- */
@media (max-width:820px){
  html body .auth-card{
    padding:22px 20px 24px !important; border-radius:18px !important;
    overflow:visible !important; margin-top:0 !important;
  }
  html body .auth-card .auth-brand{
    position:static !important; transform:none !important;
    margin:0 auto 10px !important; padding:0 !important;
    background:none !important; box-shadow:none !important; border:0 !important;
    display:flex !important; flex-direction:column !important; align-items:center !important;
  }
  html body .auth-card .brand-mark,
  html body .auth-card img.brand-mark{
    width:44px !important; height:44px !important;
    max-width:44px !important; min-width:44px !important; flex:0 0 44px !important;
    padding:0 !important; margin:0 0 6px !important; border-radius:10px !important;
    background:none !important; box-shadow:none !important; border:0 !important;
    position:static !important; transform:none !important; object-fit:contain !important;
  }
  html body .auth-card .brand-name{ font-size:11.5px !important; color:#3F4658 !important; }
  html body .auth-card h1{ font-size:15px !important; margin:0 0 16px !important; text-align:center !important; }
  html body .auth-card label{ font-size:12.5px !important; margin-bottom:6px !important; }
  html body .auth-card input{
    min-height:48px !important; font-size:15px !important; margin-bottom:14px !important;
  }
  html body .auth-card button[type="submit"]{ min-height:50px !important; font-size:15px !important; }
  html body .auth-card a{ font-size:13px !important; }
}

/* ---------- کارت جلسه: دکمه‌ها جمع، قاب بی‌کشیدگی ---------- */
html body #meetList > *{ contain:layout style !important; }
html body #meetList .btn{
  min-height:36px !important; padding-inline:12px !important;
  font-size:12.5px !important; white-space:nowrap !important;
}
html body #meetList > * > div:has(> .btn){
  display:flex !important; flex-wrap:wrap !important; gap:7px !important;
  justify-content:flex-end !important;
}
html body .mn-row,html body [class*="minute"] .mn-row{
  display:flex !important; flex-wrap:wrap !important; gap:6px !important; align-items:center !important;
}
html body .mn-row input[type="text"]{ flex:1 1 200px !important; min-width:0 !important; min-height:38px !important; }
html body .mn-row select{ flex:0 1 auto !important; min-height:38px !important; font-size:12.5px !important; }

/* قاب تماس: هرگز صفحه را نکشد */
html body #stage{ max-height:calc(100dvh - 150px) !important; overflow:hidden !important; }
html body #jitsi{ max-height:100% !important; }
@media (max-width:820px){
  html body #stage{ max-height:calc(100dvh - 200px) !important; min-height:280px !important; }
  html body #meetList .btn{ flex:1 1 calc(50% - 4px) !important; min-height:38px !important; }
  html body .mn-row input[type="text"]{ flex:1 1 100% !important; }
  html body .mn-row select{ flex:1 1 calc(33% - 4px) !important; }
}

/* ---------- نوار بالای صفحه: جعبه‌های خالی و چیدمان ---------- */
html body header,
html body .page-head{
  display:flex !important; align-items:center !important; gap:12px !important;
  flex-wrap:wrap !important; padding-block:10px !important;
}
/* جعبه‌های خالی (آیکن گمشده) پنهان شوند */
html body header button:empty,
html body header a:empty,
html body header span:empty:not([class*="dot"]):not([class*="badge"]),
html body header div:empty{
  display:none !important;
}
/* دکمه‌های نوار: هم‌اندازه و مرتب */
html body header .btn,
html body header button{
  min-height:38px !important; padding-inline:12px !important;
  font-size:12.5px !important; border-radius:10px !important;
  white-space:nowrap !important;
}
html body header img,
html body header .avatar{
  width:34px !important; height:34px !important; flex:0 0 34px !important;
  border-radius:50% !important; object-fit:cover !important;
}
/* عنوان سمت راست، ابزارها سمت چپ */
html body header h1,
html body .page-head h1{ margin:0 !important; font-size:var(--u-fs-xl) !important; }
html body header > :last-child{ margin-inline-start:auto !important; }

@media (max-width:820px){
  html body header{ gap:8px !important; padding-inline:var(--u-3) !important; }
  html body header .btn,
  html body header button{ min-height:34px !important; padding-inline:9px !important; font-size:11.5px !important; }
  html body header img,html body header .avatar{ width:30px !important; height:30px !important; flex:0 0 30px !important; }
}

/* ---------- دکمه‌های تم و صدا در نوار بالا ---------- */
html body header #themeToggle,
html body header [id*="theme"],
html body header [class*="theme-toggle"]{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  width:38px !important; height:38px !important; padding:0 !important;
  background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.14) !important;
  border-radius:10px !important; color:#F2F4F9 !important;
}
html body header #themeToggle::after,
html body header [id*="theme"]:empty::after{ content:'◐'; font-size:17px; }
html body header #soundToggle,
html body header [id*="sound"],
html body header [class*="sound"]{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  width:38px !important; height:38px !important; padding:0 !important;
  background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.14) !important;
  border-radius:10px !important; color:#F2F4F9 !important;
}
html body header [id*="sound"]:empty::after{ content:'🔔'; font-size:15px; }
html[data-theme="light"] body header #themeToggle,
html[data-theme="light"] body header [id*="theme"],
html[data-theme="light"] body header [id*="sound"]{
  background:rgba(19,21,44,.05) !important; border-color:rgba(19,21,44,.14) !important; color:#13152C !important;
}

/* ---------- دکمه‌های تم و صدا: آیکن دیده شود ---------- */
html body .bn-theme-btn,
html body .topbar-actions > button{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  width:38px !important; height:38px !important; padding:0 !important; flex:0 0 38px !important;
  border-radius:10px !important; cursor:pointer !important;
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  color:#F2F4F9 !important;
}
html body .bn-theme-btn svg,
html body .topbar-actions > button svg{
  width:19px !important; height:19px !important;
  stroke:currentColor !important; fill:none !important; opacity:1 !important;
  display:block !important;
}
html body .bn-theme-btn:hover,
html body .topbar-actions > button:hover{ background:rgba(124,77,255,.22) !important; }

html[data-theme="light"] body .bn-theme-btn,
html[data-theme="light"] body .topbar-actions > button{
  background:rgba(19,21,44,.05) !important;
  border-color:rgba(19,21,44,.16) !important;
  color:#13152C !important;
}

/* ---------- قاب جلسه روی دسکتاپ: عرض کامل، ارتفاع محدود ---------- */
@media (min-width:901px){
  html body #stage{
    width:100% !important; max-width:1280px !important;
    margin-inline:auto !important;
    height:min(72dvh, 720px) !important;
    max-height:min(72dvh, 720px) !important;
    min-height:420px !important;
    display:flex !important; flex-direction:column !important;
    overflow:hidden !important;
  }
  html body #jitsi{
    flex:1 1 auto !important; width:100% !important;
    height:auto !important; min-height:0 !important; max-height:none !important;
  }
  html body .call-grid{ width:100% !important; height:100% !important; }
}
@media (min-width:1600px){
  html body #stage{ max-width:1480px !important; height:min(74dvh, 820px) !important; }
}

/* ---------- تصویر: کادربندی درست، بدون برش از بالا ---------- */
html body .call-tile video{
  width:100% !important; height:100% !important;
  object-fit:cover !important; object-position:center center !important;
  display:block !important;
}
html body .call-tile{
  position:relative !important; overflow:hidden !important;
  border-radius:12px !important; background:#0E1020 !important;
  min-width:0 !important; min-height:0 !important;
}

/* ---------- چیدمان: همیشه کنار هم، دکمه‌ها ثابت ---------- */
html body #stage{ display:flex !important; flex-direction:column !important; overflow:hidden !important; }
html body #jitsi{ flex:1 1 auto !important; min-height:0 !important; display:flex !important; flex-direction:column !important; }
html body .call-grid{
  flex:1 1 auto !important; min-height:0 !important;
  display:grid !important; gap:8px !important; padding:8px !important;
  grid-auto-rows:1fr !important; align-items:stretch !important;
}
html body .call-grid[data-count="1"]{ grid-template-columns:1fr !important; }
html body .call-grid[data-count="2"]{ grid-template-columns:repeat(2,1fr) !important; }
html body .call-grid[data-count="3"],
html body .call-grid[data-count="4"]{ grid-template-columns:repeat(2,1fr) !important; }
html body .call-grid[data-count="5"],
html body .call-grid[data-count="6"]{ grid-template-columns:repeat(3,1fr) !important; }
html body .call-grid:not([data-count]){ grid-template-columns:repeat(auto-fit,minmax(180px,1fr)) !important; }

/* نوار دکمه‌ها: همیشه کف قاب، هرگز محو یا پایین‌رونده */
html body div:has(> .is-hang){
  flex:0 0 auto !important; position:relative !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  gap:10px !important; padding:12px 10px !important;
  background:rgba(14,16,32,.96) !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  opacity:1 !important; visibility:visible !important; transform:none !important;
}
html body div:has(> .is-hang) > button{
  flex:0 0 auto !important; width:48px !important; height:48px !important;
  min-width:48px !important; min-height:48px !important; opacity:1 !important;
}
html body div:has(> .is-hang) > .is-hang{ width:60px !important; }

@media (max-width:820px){
  html body .call-grid{ gap:6px !important; padding:6px !important; }
  html body .call-grid[data-count="3"],
  html body .call-grid[data-count="4"],
  html body .call-grid[data-count="5"],
  html body .call-grid[data-count="6"]{ grid-template-columns:repeat(2,1fr) !important; }
  html body div:has(> .is-hang) > button{ width:44px !important; height:44px !important; min-width:44px !important; min-height:44px !important; }
}

/* ---------- تماس روی گوشی: قاب و نوار دکمه‌ها جمع ---------- */
@media (max-width:820px){
  html body #stage{
    width:100% !important; max-width:100% !important;
    height:auto !important; max-height:62dvh !important; min-height:300px !important;
    border-radius:14px !important; overflow:hidden !important;
    margin-bottom:14px !important;
  }
  html body .call-grid{ padding:5px !important; gap:5px !important; }
  html body .call-tile{ border-radius:10px !important; }
  html body div:has(> .is-hang){
    width:100% !important; max-width:100% !important; box-sizing:border-box !important;
    flex-wrap:nowrap !important; gap:6px !important; padding:9px 8px !important;
    overflow-x:auto !important; scrollbar-width:none; justify-content:center !important;
  }
  html body div:has(> .is-hang)::-webkit-scrollbar{ display:none; }
  html body div:has(> .is-hang) > button{
    width:42px !important; height:42px !important;
    min-width:42px !important; min-height:42px !important; flex:0 0 42px !important;
  }
  html body div:has(> .is-hang) > .is-hang{ width:52px !important; flex:0 0 52px !important; }
  html body div:has(> .is-hang) > :not(button){
    flex:0 0 auto !important; font-size:10.5px !important;
    white-space:nowrap !important; max-width:90px !important;
    overflow:hidden !important; text-overflow:ellipsis !important;
  }
  html body .cc-flip{
    width:40px !important; height:40px !important;
    inset-inline-end:10px !important; bottom:66px !important;
  }
}
@media (max-width:460px){
  html body div:has(> .is-hang) > :not(button){ display:none !important; }
  html body div:has(> .is-hang) > button{
    width:40px !important; height:40px !important; min-width:40px !important; flex:0 0 40px !important;
  }
}

/* ---------- گوشی: نوار تماس کاملاً داخل قاب ---------- */
@media (max-width:820px){
  html body #stage,html body #jitsi{ width:100% !important; max-width:100% !important; overflow:hidden !important; }
  html body #jitsi > *{ width:100% !important; max-width:100% !important; }
  html body div:has(> .is-hang){
    width:100% !important; max-width:100% !important;
    display:flex !important; flex-wrap:wrap !important;
    justify-content:center !important; align-items:center !important;
    gap:8px !important; padding:10px 8px !important;
    overflow:visible !important; box-sizing:border-box !important;
    inset-inline:0 !important; margin:0 !important;
  }
  html body div:has(> .is-hang) > *{ position:static !important; margin:0 !important; }
  html body div:has(> .is-hang) > button{
    width:44px !important; height:44px !important;
    min-width:44px !important; min-height:44px !important;
    flex:0 0 44px !important; border-radius:50% !important;
  }
  html body div:has(> .is-hang) > .is-hang{ width:54px !important; flex:0 0 54px !important; }
  html body div:has(> .is-hang) > :not(button){
    flex:1 1 100% !important; order:-1 !important; text-align:center !important;
    font-size:11px !important; padding-bottom:2px !important;
  }
  html body .cc-flip{ bottom:auto !important; top:10px !important; inset-inline-end:10px !important;
    width:38px !important; height:38px !important; }
}

/* ---------- نوار کنترل سبک Google Meet ---------- */
html body #stage{ position:relative !important; }
html body div:has(> .is-hang){
  position:absolute !important; inset-inline:0 !important; bottom:0 !important;
  z-index:30 !important; width:100% !important; box-sizing:border-box !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  gap:12px !important; padding:14px 16px 16px !important;
  background:linear-gradient(to top, rgba(9,11,22,.92) 55%, rgba(9,11,22,0)) !important;
  border:0 !important;
}
html body div:has(> .is-hang) > button{
  width:50px !important; height:50px !important;
  min-width:50px !important; min-height:50px !important; flex:0 0 50px !important;
  border-radius:50% !important; padding:0 !important;
  background:rgba(255,255,255,.14) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  color:#fff !important; cursor:pointer !important;
  transition:background .15s ease !important;
}
html body div:has(> .is-hang) > button:hover{ background:rgba(255,255,255,.24) !important; }
html body div:has(> .is-hang) > button svg{ width:21px !important; height:21px !important; }
html body div:has(> .is-hang) > .is-hang{
  width:66px !important; flex:0 0 66px !important; border-radius:26px !important;
  background:#E5484D !important; border-color:#E5484D !important;
}
html body div:has(> .is-hang) > .is-hang:hover{ background:#C93A3F !important; }
html body div:has(> .is-hang) > :not(button){
  position:absolute !important; inset-inline-start:16px !important; bottom:24px !important;
  font-size:12px !important; color:rgba(255,255,255,.82) !important;
  max-width:40% !important; overflow:hidden !important; text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
/* فضای کف برای اینکه تصویرها زیر نوار نروند */
html body .call-grid{ padding-bottom:86px !important; }

@media (max-width:820px){
  html body div:has(> .is-hang){ gap:9px !important; padding:12px 10px 14px !important; }
  html body div:has(> .is-hang) > button{
    width:46px !important; height:46px !important; min-width:46px !important; flex:0 0 46px !important; }
  html body div:has(> .is-hang) > .is-hang{ width:60px !important; flex:0 0 60px !important; }
  html body div:has(> .is-hang) > :not(button){ display:none !important; }
  html body .call-grid{ padding-bottom:76px !important; }
  html body .cc-flip{ bottom:auto !important; top:10px !important; }
}

/* ---------- گوشی: نوار Meet داخل قاب، بدون بیرون‌زدگی ---------- */
@media (max-width:820px){
  html body #stage{
    position:relative !important; overflow:hidden !important;
    width:100% !important; max-width:100% !important;
    height:auto !important; max-height:58dvh !important; min-height:300px !important;
  }
  html body #jitsi{
    position:relative !important; width:100% !important; max-width:100% !important;
    height:100% !important; overflow:hidden !important;
  }
  html body div:has(> .is-hang){
    position:absolute !important; inset-inline:0 !important; bottom:0 !important; top:auto !important;
    width:100% !important; max-width:100% !important; box-sizing:border-box !important;
    display:flex !important; flex-wrap:nowrap !important;
    align-items:center !important; justify-content:center !important;
    gap:8px !important; padding:10px 8px 12px !important; margin:0 !important;
    background:linear-gradient(to top, rgba(9,11,22,.95) 60%, rgba(9,11,22,0)) !important;
  }
  html body div:has(> .is-hang) > button{
    width:44px !important; height:44px !important;
    min-width:44px !important; min-height:44px !important; flex:0 0 44px !important;
    border-radius:50% !important; padding:0 !important; margin:0 !important;
    position:static !important; transform:none !important;
  }
  html body div:has(> .is-hang) > button svg{ width:19px !important; height:19px !important; }
  html body div:has(> .is-hang) > .is-hang{ width:56px !important; flex:0 0 56px !important; border-radius:22px !important; }
  html body div:has(> .is-hang) > :not(button){ display:none !important; }
  html body .call-grid{ padding:6px 6px 70px !important; gap:6px !important; }
}
@media (max-width:400px){
  html body div:has(> .is-hang){ gap:6px !important; }
  html body div:has(> .is-hang) > button{ width:40px !important; height:40px !important; min-width:40px !important; flex:0 0 40px !important; }
  html body div:has(> .is-hang) > .is-hang{ width:50px !important; flex:0 0 50px !important; }
}

/* ---------- گوشی: همهٔ دکمه‌های تماس دیده شوند ---------- */
@media (max-width:900px),(pointer:coarse){
  html body div:has(> .is-hang) > button,
  html body button[title="اشتراک صفحه"],
  html body button[title="میکروفون"],
  html body button[title="دوربین"],
  html body button[title="تمام‌صفحه"]{
    display:inline-flex !important; visibility:visible !important; opacity:1 !important;
  }
  html body div:has(> .is-hang){
    flex-wrap:nowrap !important; overflow-x:auto !important;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    justify-content:center !important; padding-inline:6px !important;
  }
  html body div:has(> .is-hang)::-webkit-scrollbar{ display:none; }
  html body div:has(> .is-hang) > button{
    width:42px !important; height:42px !important;
    min-width:42px !important; flex:0 0 42px !important;
  }
  html body div:has(> .is-hang) > .is-hang{ width:52px !important; flex:0 0 52px !important; }
  html body div:has(> .is-hang) > button svg{
    width:18px !important; height:18px !important;
    stroke:currentColor !important; opacity:1 !important; display:block !important;
  }
}

/* ---------- نوار کنترل تماس (کلاس واقعی) ---------- */
html body .call-bar,
html body div:has(> .call-ctl){
  position:absolute !important; inset-inline:0 !important; bottom:0 !important;
  z-index:30 !important; width:100% !important; box-sizing:border-box !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  gap:12px !important; padding:14px 16px 16px !important; margin:0 !important;
  background:linear-gradient(to top, rgba(9,11,22,.94) 58%, rgba(9,11,22,0)) !important;
  border:0 !important; opacity:1 !important; visibility:visible !important;
}
html body .call-ctl{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  width:50px !important; height:50px !important;
  min-width:50px !important; min-height:50px !important; flex:0 0 50px !important;
  padding:0 !important; margin:0 !important; border-radius:50% !important;
  background:rgba(255,255,255,.14) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  color:#fff !important; cursor:pointer !important;
  opacity:1 !important; visibility:visible !important;
}
html body .call-ctl:hover{ background:rgba(255,255,255,.26) !important; }
html body .call-ctl svg{
  width:21px !important; height:21px !important;
  stroke:currentColor !important; fill:none !important; display:block !important; opacity:1 !important;
}
html body .call-ctl.is-hang{
  width:68px !important; flex:0 0 68px !important; border-radius:26px !important;
  background:#E5484D !important; border-color:#E5484D !important;
}
html body .call-ctl.is-hang:hover{ background:#C93A3F !important; }
html body .call-ctl.is-off{ background:#E5484D !important; border-color:#E5484D !important; }
html body .call-status{
  position:absolute !important; inset-inline-start:16px !important; bottom:26px !important;
  font-size:12px !important; color:rgba(255,255,255,.82) !important;
  max-width:38% !important; white-space:nowrap !important;
  overflow:hidden !important; text-overflow:ellipsis !important;
}
html body .call-grid{ padding-bottom:90px !important; }

@media (max-width:820px){
  html body .call-bar,html body div:has(> .call-ctl){ gap:8px !important; padding:10px 8px 12px !important; }
  html body .call-ctl{ width:44px !important; height:44px !important; min-width:44px !important; flex:0 0 44px !important; }
  html body .call-ctl svg{ width:19px !important; height:19px !important; }
  html body .call-ctl.is-hang{ width:56px !important; flex:0 0 56px !important; border-radius:22px !important; }
  html body .call-status{ display:none !important; }
  html body .call-grid{ padding-bottom:72px !important; }
}
@media (max-width:400px){
  html body .call-ctl{ width:40px !important; height:40px !important; min-width:40px !important; flex:0 0 40px !important; }
  html body .call-ctl.is-hang{ width:50px !important; flex:0 0 50px !important; }
}

/* ---------- گوشی: لغو هرگونه پنهان‌سازی دکمه‌های تماس ---------- */
@media (max-width:900px),(pointer:coarse){
  html body .call-bar{
    display:flex !important; visibility:visible !important; opacity:1 !important;
    height:auto !important; overflow:visible !important;
  }
  html body .call-bar > .call-ctl,
  html body .call-ctl,
  html body button[title="اشتراک صفحه"],
  html body button[title="میکروفون"],
  html body button[title="دوربین"],
  html body button[title="تمام‌صفحه"],
  html body button[title="قطع تماس"]{
    display:inline-flex !important; visibility:visible !important; opacity:1 !important;
    width:44px !important; height:44px !important; min-width:44px !important;
    min-height:44px !important; flex:0 0 44px !important;
  }
  html body .call-ctl.is-hang,
  html body button[title="قطع تماس"]{ width:56px !important; flex:0 0 56px !important; }
}

/* ---------- کاشی‌های تماس: اندازهٔ متعادل ---------- */
html body .call-grid{
  display:grid !important; align-content:start !important;
  grid-auto-rows:minmax(0,1fr) !important;
}
html body .call-tile{
  min-width:0 !important; min-height:0 !important;
  max-height:100% !important; overflow:hidden !important;
}
html body .call-tile video{
  width:100% !important; height:100% !important;
  object-fit:cover !important; object-position:center center !important;
}
html body .call-tile-name{
  position:absolute !important; inset-inline-start:8px !important; bottom:8px !important;
  font-size:11.5px !important; padding:3px 8px !important; border-radius:7px !important;
  background:rgba(9,11,22,.62) !important; color:#fff !important;
  max-width:70% !important; overflow:hidden !important; text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
@media (max-width:820px){
  html body .call-grid[data-count="1"]{ grid-template-columns:1fr !important; }
  html body .call-grid{ grid-template-columns:repeat(2,1fr) !important; }
  html body .call-tile-name{ font-size:10.5px !important; padding:2px 6px !important; }
}
@media (min-width:901px){
  html body .call-grid[data-count="1"] .call-tile{
    max-width:min(100%, 900px) !important; margin-inline:auto !important;
  }
  html body .call-grid[data-count="2"]{ grid-template-columns:repeat(2,1fr) !important; }
  html body .call-grid[data-count="3"],
  html body .call-grid[data-count="4"]{ grid-template-columns:repeat(2,1fr) !important; }
  html body .call-grid[data-count="5"],
  html body .call-grid[data-count="6"],
  html body .call-grid[data-count="7"],
  html body .call-grid[data-count="8"]{ grid-template-columns:repeat(3,1fr) !important; }
}

/* ==========================================================
   گوشی — تماس تصویری: مرجع نهایی (بر همهٔ قواعد بالا غالب)
   ========================================================== */
@media (max-width:900px){
  html body #stage{
    position:relative !important; display:block !important;
    width:100% !important; max-width:100% !important;
    height:62dvh !important; max-height:62dvh !important; min-height:320px !important;
    margin:0 0 14px !important; padding:0 !important;
    border-radius:14px !important; overflow:hidden !important;
    background:#0B0D1A !important;
  }
  html body #jitsi{
    position:absolute !important; inset:0 !important;
    width:100% !important; height:100% !important;
    margin:0 !important; padding:0 !important; overflow:hidden !important;
  }
  html body .call-wrap,
  html body #jitsi > div:not(.call-bar){
    position:absolute !important; inset:0 !important;
    width:100% !important; height:100% !important;
  }

  /* کاشی‌ها */
  html body .call-grid{
    position:absolute !important; inset:0 !important;
    display:grid !important; gap:6px !important;
    padding:6px 6px 74px !important; margin:0 !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-auto-rows:minmax(0,1fr) !important;
    align-content:start !important; overflow:hidden !important;
  }
  html body .call-grid[data-count="1"]{ grid-template-columns:minmax(0,1fr) !important; }
  html body .call-tile{
    position:relative !important; min-width:0 !important; min-height:0 !important;
    width:auto !important; height:auto !important; max-height:100% !important;
    border-radius:10px !important; overflow:hidden !important; background:#12142A !important;
  }
  html body .call-tile video{
    width:100% !important; height:100% !important;
    object-fit:cover !important; object-position:center !important; display:block !important;
  }
  html body .call-tile-name{
    position:absolute !important; inset-inline-start:6px !important; bottom:6px !important;
    font-size:10px !important; padding:2px 6px !important; border-radius:6px !important;
    background:rgba(9,11,22,.65) !important; color:#fff !important;
    max-width:75% !important; white-space:nowrap !important;
    overflow:hidden !important; text-overflow:ellipsis !important;
  }
  html body .call-tile-mic{
    position:absolute !important; inset-inline-end:6px !important; top:6px !important;
    width:22px !important; height:22px !important; border-radius:50% !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    background:rgba(9,11,22,.6) !important;
  }
  html body .call-tile-mic svg{ width:12px !important; height:12px !important; }

  /* نوار کنترل */
  html body .call-bar{
    position:absolute !important; inset-inline:0 !important; bottom:0 !important; top:auto !important;
    z-index:40 !important; width:100% !important; box-sizing:border-box !important;
    display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important;
    align-items:center !important; justify-content:center !important;
    gap:9px !important; padding:0 8px 12px !important; margin:0 !important;
    height:auto !important; min-height:64px !important;
    background:linear-gradient(to top, rgba(9,11,22,.96) 55%, rgba(9,11,22,0)) !important;
    border:0 !important; overflow:visible !important;
    opacity:1 !important; visibility:visible !important; transform:none !important;
  }
  html body .call-ctl{
    position:static !important; display:inline-flex !important;
    align-items:center !important; justify-content:center !important;
    width:46px !important; height:46px !important;
    min-width:46px !important; min-height:46px !important;
    max-width:46px !important; max-height:46px !important; flex:0 0 46px !important;
    padding:0 !important; margin:0 !important; border-radius:50% !important;
    background:rgba(255,255,255,.16) !important;
    border:1px solid rgba(255,255,255,.2) !important;
    color:#fff !important; cursor:pointer !important;
    opacity:1 !important; visibility:visible !important;
  }
  html body .call-ctl svg{
    width:19px !important; height:19px !important;
    stroke:currentColor !important; fill:none !important; display:block !important; opacity:1 !important;
  }
  html body .call-ctl.is-hang{
    width:58px !important; max-width:58px !important; flex:0 0 58px !important;
    border-radius:23px !important; background:#E5484D !important; border-color:#E5484D !important;
  }
  html body .call-ctl.is-off{ background:#E5484D !important; border-color:#E5484D !important; }
  html body .call-status{ display:none !important; }
  html body .cc-flip{
    position:absolute !important; top:10px !important; inset-inline-end:10px !important;
    bottom:auto !important; width:38px !important; height:38px !important; z-index:41 !important;
  }
}
@media (max-width:400px){
  html body .call-bar{ gap:7px !important; }
  html body .call-ctl{ width:42px !important; min-width:42px !important; max-width:42px !important; flex:0 0 42px !important; }
  html body .call-ctl.is-hang{ width:52px !important; max-width:52px !important; flex:0 0 52px !important; }
}

/* ---------- گوشی عمودی: دو نفر زیر هم، نه کنار هم ---------- */
@media (max-width:900px) and (orientation:portrait){
  html body .call-grid[data-count="2"]{
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:repeat(2,minmax(0,1fr)) !important;
  }
  html body .call-grid[data-count="3"],
  html body .call-grid[data-count="4"]{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-rows:repeat(2,minmax(0,1fr)) !important;
  }
  html body #stage{ height:66dvh !important; max-height:66dvh !important; }
}
/* گوشی افقی: کنار هم بماند */
@media (max-width:900px) and (orientation:landscape){
  html body .call-grid[data-count="2"]{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  html body #stage{ height:78dvh !important; max-height:78dvh !important; }
}

/* ---------- زوم کاشی ---------- */
html body .call-tile video{ transform-origin:center center !important; transition:none !important; }
html body .call-tile.is-fit video{
  object-fit:contain !important; background:#0B0D1A !important; transform:none !important;
}
html body .call-tile.is-fit::after{
  content:'نمای کامل'; position:absolute; inset-inline-end:8px; bottom:8px;
  font-size:10px; padding:2px 7px; border-radius:6px;
  background:rgba(9,11,22,.6); color:#fff; pointer-events:none;
}

/* ---------- قاب تماس فقط وقتی جلسه فعال است ---------- */
html body #stage[style*="display: none"],
html body #stage[style*="display:none"]{
  display:none !important; height:0 !important; min-height:0 !important;
  margin:0 !important; border:0 !important;
}
html body .call-status{ display:block !important; z-index:41 !important; }
@media (max-width:820px){
  html body .call-status{
    display:block !important; position:absolute !important;
    top:8px !important; inset-inline-start:8px !important; bottom:auto !important;
    font-size:11px !important; background:rgba(9,11,22,.7) !important;
    padding:3px 8px !important; border-radius:7px !important; max-width:60% !important;
  }
}

/* ---------- وب‌کم: بدون زوم، روی هر دستگاه ---------- */
@media (max-width:900px){
  html body .call-tile video,
  html body .t video{
    object-fit:contain !important; background:#0E1020 !important; transform:none !important;
  }
  html body .call-tile.me video,
  html body .t.me video{ transform:scaleX(-1) !important; }
  html body .call-tile.is-fit video{ object-fit:cover !important; }
}
@media (min-width:901px){
  html body .call-tile video,
  html body .t video{
    object-fit:contain !important; background:#0E1020 !important; transform:none !important;
  }
  html body .call-tile.me video,
  html body .t.me video{ transform:scaleX(-1) !important; }
  html body .call-tile.is-fit video{ object-fit:cover !important; }
}

/* ---------- گوشی: کاشی‌ها بدون حاشیهٔ خالی ---------- */
@media (max-width:900px){
  html body .call-tile video,
  html body .t video{
    object-fit:cover !important; object-position:center center !important;
    background:transparent !important;
  }
  html body .call-tile.is-fit video{ object-fit:contain !important; background:#0E1020 !important; }
  html body #stage{ max-height:56dvh !important; min-height:280px !important; }
  html body .call-grid{ gap:5px !important; padding:5px 5px 68px !important; }
  html body .call-grid .call-tile{ border-radius:10px !important; }
}

/* ---------- گوشی عمودی: کاشی‌ها تمام عرض ---------- */
@media (max-width:900px) and (orientation:portrait){
  html body .call-grid{
    width:100% !important; max-width:100% !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-auto-flow:row !important;
    justify-items:stretch !important; justify-content:stretch !important;
    align-items:stretch !important;
  }
  html body .call-grid > .call-tile{
    width:100% !important; max-width:100% !important;
    grid-column:1 / -1 !important; margin:0 !important;
  }
  html body .call-grid[data-count="3"],
  html body .call-grid[data-count="4"]{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  html body .call-grid[data-count="3"] > .call-tile,
  html body .call-grid[data-count="4"] > .call-tile{ grid-column:auto !important; }
  html body #stage{ max-height:52dvh !important; min-height:260px !important; }
}

/* ---------- گوشی: دکمه‌ها هرگز از قاب بیرون نروند ---------- */
@media (max-width:900px){
  html body #stage{
    display:flex !important; flex-direction:column !important;
    position:relative !important; overflow:hidden !important;
    max-height:56dvh !important;
  }
  html body #jitsi{
    flex:1 1 auto !important; min-height:0 !important;
    position:relative !important; overflow:hidden !important;
    display:flex !important; flex-direction:column !important;
  }
  html body .call-wrap{
    flex:1 1 auto !important; min-height:0 !important; position:relative !important;
    display:flex !important; flex-direction:column !important;
  }
  html body .call-grid{
    position:relative !important; inset:auto !important;
    flex:1 1 auto !important; min-height:0 !important;
    padding:5px !important; overflow:hidden !important;
  }
  html body .call-bar{
    position:relative !important; inset:auto !important;
    flex:0 0 auto !important; height:auto !important;
    padding:8px 6px 10px !important;
    background:rgba(9,11,22,.96) !important;
  }
}

/* ==========================================================
   نوار کنترل تماس — مرجع نهایی (گوشی و دسکتاپ)
   ========================================================== */
html body .call-bar{
  display:flex !important; visibility:visible !important; opacity:1 !important;
  position:relative !important; inset:auto !important;
  flex:0 0 auto !important; order:99 !important;
  width:100% !important; box-sizing:border-box !important;
  align-items:center !important; justify-content:center !important;
  flex-wrap:nowrap !important; gap:10px !important;
  padding:10px 8px !important; margin:0 !important;
  min-height:62px !important; height:auto !important;
  background:#0E1020 !important; border-top:1px solid rgba(255,255,255,.08) !important;
  overflow-x:auto !important; scrollbar-width:none;
}
html body .call-bar::-webkit-scrollbar{ display:none; }
html body .call-bar .call-ctl{
  display:inline-flex !important; visibility:visible !important; opacity:1 !important;
  position:static !important; transform:none !important;
  align-items:center !important; justify-content:center !important;
  width:46px !important; height:46px !important;
  min-width:46px !important; max-width:46px !important; flex:0 0 46px !important;
  padding:0 !important; margin:0 !important; border-radius:50% !important;
  background:rgba(255,255,255,.16) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  color:#fff !important; cursor:pointer !important;
}
html body .call-bar .call-ctl svg{
  width:19px !important; height:19px !important;
  stroke:#fff !important; fill:none !important; display:block !important; opacity:1 !important;
}
html body .call-bar .call-ctl.is-hang{
  width:60px !important; max-width:60px !important; flex:0 0 60px !important;
  border-radius:23px !important; background:#E5484D !important; border-color:#E5484D !important;
}
html body .call-bar .call-ctl.is-off{ background:#E5484D !important; border-color:#E5484D !important; }
html body .call-bar .call-status{
  position:static !important; flex:0 1 auto !important;
  font-size:11.5px !important; color:rgba(255,255,255,.75) !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
  max-width:30% !important; margin-inline-start:6px !important;
}
html body #stage{
  display:flex !important; flex-direction:column !important; overflow:hidden !important;
}
html body #jitsi{ flex:1 1 auto !important; min-height:0 !important; display:flex !important; flex-direction:column !important; }
html body .call-wrap{ flex:1 1 auto !important; min-height:0 !important; display:flex !important; flex-direction:column !important; }
html body .call-grid{
  flex:1 1 auto !important; min-height:0 !important;
  position:relative !important; inset:auto !important;
  padding:6px !important; overflow:hidden !important;
}
@media (max-width:480px){
  html body .call-bar{ gap:7px !important; min-height:56px !important; }
  html body .call-bar .call-ctl{ width:42px !important; max-width:42px !important; flex:0 0 42px !important; }
  html body .call-bar .call-ctl.is-hang{ width:54px !important; max-width:54px !important; flex:0 0 54px !important; }
  html body .call-bar .call-status{ display:none !important; }
}

/* ---------- گوشی: نوار کنترل، آخرین کلام ---------- */
@media screen and (max-width:900px){
  html body div.call-bar,
  html body #jitsi div.call-bar,
  html body #stage div.call-bar{
    display:flex !important; visibility:visible !important; opacity:1 !important;
    position:static !important; float:none !important; clip:auto !important;
    width:100% !important; height:auto !important; min-height:58px !important;
    max-height:none !important; overflow:visible !important;
    transform:none !important; z-index:auto !important;
    background:#0E1020 !important;
  }
  html body div.call-bar button,
  html body #jitsi div.call-bar button{
    display:inline-flex !important; visibility:visible !important; opacity:1 !important;
    width:44px !important; height:44px !important; flex:0 0 44px !important;
  }
  html body div.call-bar button.is-hang{ width:56px !important; flex:0 0 56px !important; }
}

/* ---------- گوشی: هیچ دکمهٔ تماسی پنهان نماند ---------- */
@media screen and (max-width:900px){
  html body .call-bar *,
  html body .call-bar button,
  html body .call-bar > *{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    width:auto; height:auto;
  }
  html body .call-bar button{
    width:44px !important; height:44px !important;
    min-width:44px !important; flex:0 0 44px !important;
  }
  html body .call-bar button.is-hang{ width:56px !important; flex:0 0 56px !important; }
  html body .call-bar svg{
    display:block !important; visibility:visible !important; opacity:1 !important;
    width:19px !important; height:19px !important; stroke:#fff !important;
  }
  html body .call-bar .call-status{ display:none !important; }
}

/* ==========================================================
   FINAL — چیدمان تماس (آخرین کلام، بر همه غالب)
   ========================================================== */
html body #stage{
  display:flex !important; flex-direction:column !important;
  position:relative !important; overflow:hidden !important;
  width:100% !important; max-width:1280px !important; margin-inline:auto !important;
  height:min(70dvh,700px) !important; min-height:420px !important; max-height:none !important;
  border-radius:14px !important; background:#0B0D1A !important;
}
html body #jitsi,html body .call-wrap{
  flex:1 1 auto !important; min-height:0 !important; width:100% !important;
  display:flex !important; flex-direction:column !important;
  position:relative !important; inset:auto !important; height:auto !important;
}
html body .call-grid{
  flex:1 1 auto !important; min-height:0 !important; width:100% !important;
  position:relative !important; inset:auto !important;
  display:grid !important; gap:6px !important; padding:6px !important;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) !important;
  grid-auto-rows:minmax(0,1fr) !important; overflow:hidden !important;
}
html body .call-grid[data-count="1"]{ grid-template-columns:minmax(0,1fr) !important; }
html body .call-tile{
  position:relative !important; min-width:0 !important; min-height:0 !important;
  width:auto !important; height:auto !important; max-width:none !important;
  border-radius:11px !important; overflow:hidden !important; background:#12142A !important;
}
html body .call-tile video{
  width:100% !important; height:100% !important;
  object-fit:cover !important; object-position:center !important; display:block !important;
}
html body .call-bar{
  flex:0 0 auto !important; order:99 !important;
  display:flex !important; visibility:visible !important; opacity:1 !important;
  position:relative !important; inset:auto !important; transform:none !important;
  width:100% !important; box-sizing:border-box !important; height:auto !important;
  align-items:center !important; justify-content:center !important;
  gap:10px !important; padding:10px 8px !important; margin:0 !important;
  background:#0E1020 !important; border-top:1px solid rgba(255,255,255,.08) !important;
}
html body .call-bar button{
  display:inline-flex !important; visibility:visible !important; opacity:1 !important;
  align-items:center !important; justify-content:center !important;
  position:static !important; width:48px !important; height:48px !important;
  min-width:48px !important; max-width:48px !important; flex:0 0 48px !important;
  padding:0 !important; margin:0 !important; border-radius:50% !important;
  background:rgba(255,255,255,.16) !important;
  border:1px solid rgba(255,255,255,.22) !important; color:#fff !important;
}
html body .call-bar button svg{ width:20px !important; height:20px !important; stroke:#fff !important; display:block !important; }
html body .call-bar button.is-hang{ width:62px !important; max-width:62px !important; flex:0 0 62px !important; border-radius:24px !important; background:#E5484D !important; border-color:#E5484D !important; }
html body .call-bar button.is-off{ background:#E5484D !important; border-color:#E5484D !important; }
html body .call-status{ position:static !important; font-size:11.5px !important; color:rgba(255,255,255,.7) !important; max-width:26% !important; white-space:nowrap !important; overflow:hidden !important; }

@media (max-width:900px){
  html body #stage{ height:56dvh !important; min-height:300px !important; }
  html body .call-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:5px !important; padding:5px !important; }
  html body .call-grid[data-count="1"]{ grid-template-columns:minmax(0,1fr) !important; }
  html body .call-bar{ gap:8px !important; padding:8px 6px !important; }
  html body .call-bar button{ width:44px !important; max-width:44px !important; flex:0 0 44px !important; }
  html body .call-bar button.is-hang{ width:56px !important; max-width:56px !important; flex:0 0 56px !important; }
  html body .call-status{ display:none !important; }
}

/* ---------- ظرف واقعی تماس: call-stage ---------- */
html body .call-stage{
  display:flex !important; flex-direction:column !important;
  flex:1 1 auto !important; min-height:0 !important;
  width:100% !important; height:100% !important;
  position:relative !important; inset:auto !important; overflow:hidden !important;
}
html body .call-stage > .call-grid{
  flex:1 1 auto !important; min-height:0 !important; width:100% !important;
  position:relative !important; inset:auto !important; overflow:hidden !important;
}
html body .call-stage > .call-bar{
  flex:0 0 auto !important; order:99 !important;
  display:flex !important; visibility:visible !important; opacity:1 !important;
  position:relative !important; inset:auto !important; transform:none !important;
  width:100% !important; height:auto !important; min-height:60px !important;
  align-items:center !important; justify-content:center !important;
  gap:10px !important; padding:10px 8px !important; margin:0 !important;
  background:#0E1020 !important; border-top:1px solid rgba(255,255,255,.08) !important;
}
@media (max-width:900px){
  html body .call-stage > .call-bar{
    min-height:56px !important; gap:8px !important; padding:8px 6px !important;
  }
}

/* ---------- تصویرها همیشه کنار هم ---------- */
html body .call-grid,
html body .call-stage > .call-grid{
  grid-auto-flow:column !important;
  grid-auto-columns:minmax(0,1fr) !important;
  grid-template-columns:none !important;
  grid-template-rows:minmax(0,1fr) !important;
  align-items:stretch !important;
}
@media (max-width:900px){
  html body .call-grid,
  html body .call-stage > .call-grid{
    grid-auto-flow:column !important;
    grid-auto-columns:minmax(0,1fr) !important;
    grid-template-columns:none !important;
    grid-template-rows:minmax(0,1fr) !important;
  }
}
/* از پنج نفر به بالا دو ردیف تا باریک نشوند */
html body .call-grid:has(> .call-tile:nth-child(5)){
  grid-auto-flow:row !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  grid-auto-rows:minmax(0,1fr) !important;
}
@media (max-width:900px){
  html body .call-grid:has(> .call-tile:nth-child(4)){
    grid-auto-flow:row !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* ---------- گوشی: قطعاً کنار هم، نه زیر هم ---------- */
@media screen and (max-width:900px){
  html body div.call-grid{
    display:grid !important;
    grid-auto-flow:column !important;
    grid-template-columns:none !important;
    grid-template-rows:minmax(0,1fr) !important;
    grid-auto-columns:minmax(0,1fr) !important;
    grid-auto-rows:auto !important;
    align-items:stretch !important; justify-items:stretch !important;
  }
  html body div.call-grid > .call-tile{
    grid-column:auto !important; grid-row:1 !important;
    width:auto !important; max-width:none !important;
  }
}

/* ---------- گوشی: شبکهٔ دوتایی (۲ در هر ردیف) ---------- */
@media screen and (max-width:900px){
  html body div.call-grid{
    display:grid !important;
    grid-auto-flow:row !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-rows:none !important;
    grid-auto-rows:minmax(0,1fr) !important;
    align-items:stretch !important; justify-items:stretch !important;
    gap:5px !important; padding:5px !important;
  }
  html body div.call-grid > .call-tile{
    grid-column:auto !important; grid-row:auto !important;
    width:auto !important; max-width:none !important;
  }
  /* یک نفر تنها: تمام عرض */
  html body div.call-grid > .call-tile:only-child{ grid-column:1 / -1 !important; }
}

/* ---------- گوشی: آواتار نوار بالا استاندارد ---------- */
@media (max-width:900px){
  html body header .topbar-user{
    display:inline-flex !important; align-items:center !important;
    gap:0 !important; padding:0 !important; border:0 !important; background:none !important;
  }
  html body header .topbar-user .avatar,
  html body header .topbar-user img.avatar-img,
  html body header .avatar{
    width:34px !important; height:34px !important;
    min-width:34px !important; max-width:34px !important;
    min-height:34px !important; max-height:34px !important; flex:0 0 34px !important;
    border-radius:50% !important; object-fit:cover !important;
    padding:0 !important; margin:0 !important; border:0 !important;
    font-size:13px !important; display:inline-flex !important;
    align-items:center !important; justify-content:center !important;
  }
  html body header .topbar-user-name{ display:none !important; }
}

/* ---------- گوشی: آواتار نوار بالا، قطعی ---------- */
@media screen and (max-width:900px){
  html body a.topbar-user{
    width:auto !important; height:auto !important;
    min-width:0 !important; max-width:none !important;
    padding:0 !important; margin:0 !important;
    border:0 !important; border-radius:0 !important;
    background:none !important; box-shadow:none !important;
    overflow:visible !important; display:inline-flex !important;
    align-items:center !important; flex:0 0 auto !important;
  }
  html body a.topbar-user img.avatar-img,
  html body a.topbar-user span.avatar{
    width:36px !important; height:36px !important;
    min-width:36px !important; max-width:36px !important;
    min-height:36px !important; max-height:36px !important;
    flex:0 0 36px !important; border-radius:50% !important;
    object-fit:cover !important; object-position:center !important;
    padding:0 !important; margin:0 !important; border:0 !important;
    font-size:14px !important; line-height:1 !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
  }
  html body a.topbar-user span.topbar-user-name{ display:none !important; }
}

/* ---------- جعبه‌های خالی نوار بالا پنهان شوند ---------- */
html body .topbar button:empty,
html body .topbar a:empty,
html body .topbar div:empty,
html body .topbar-actions > *:empty,
html body .page-head button:empty,
html body .page-head a:empty,
html body .page-head div:empty,
html body .page-head span:empty{
  display:none !important;
}
/* تصویر شکسته یا بی‌منبع */
html body img[src=""],
html body img:not([src]){ display:none !important; }

/* ---------- دکمهٔ برگشت نوار بالا ---------- */
html body .btn-back{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  width:38px !important; height:38px !important; flex:0 0 38px !important;
  padding:0 !important; border-radius:10px !important;
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  color:#F2F4F9 !important; cursor:pointer !important;
}
html body .btn-back svg{
  width:18px !important; height:18px !important;
  stroke:currentColor !important; fill:none !important;
  display:block !important; opacity:1 !important; transform:scaleX(-1) !important;
}
html[data-theme="light"] body .btn-back{
  background:rgba(19,21,44,.05) !important;
  border-color:rgba(19,21,44,.14) !important; color:#13152C !important;
}
@media (max-width:900px){
  html body .btn-back{ width:34px !important; height:34px !important; flex:0 0 34px !important; }
  html body .btn-back svg{ width:16px !important; height:16px !important; }
}

/* ---------- گوشی: آواتار سمت چپ نوار بالا، اندازهٔ درست ---------- */
@media screen and (max-width:900px){
  html body .topbar-actions{
    display:flex !important; align-items:center !important; gap:8px !important;
    flex:0 0 auto !important; min-width:0 !important;
  }
  html body .topbar-actions a.topbar-user{
    width:auto !important; height:auto !important; flex:0 0 auto !important;
    padding:0 !important; border:0 !important; background:none !important;
    border-radius:0 !important; box-shadow:none !important; overflow:visible !important;
  }
  html body .topbar-actions .avatar,
  html body .topbar-actions .avatar-img,
  html body img.avatar-img,
  html body span.avatar{
    width:36px !important; height:36px !important;
    min-width:36px !important; max-width:36px !important;
    min-height:36px !important; max-height:36px !important;
    flex:0 0 36px !important; aspect-ratio:1 !important;
    border-radius:50% !important; object-fit:cover !important;
    padding:0 !important; margin:0 !important; border:0 !important;
    font-size:14px !important; font-weight:700 !important; line-height:1 !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    color:#fff !important;
  }
  html body .topbar-user-name{ display:none !important; }
}

/* ---------- گوشی: نوار بالا بدون هم‌پوشانی ---------- */
@media screen and (max-width:900px){
  html body .topbar{
    display:flex !important; flex-wrap:wrap !important;
    align-items:center !important; gap:10px !important;
    padding:10px 12px !important; min-height:0 !important;
  }
  html body .topbar > *{ min-width:0 !important; }
  html body .topbar-actions{
    display:flex !important; flex-direction:row !important;
    align-items:center !important; gap:10px !important;
    flex:0 0 auto !important; margin-inline-start:auto !important;
    position:static !important; overflow:visible !important;
  }
  html body .topbar-actions > *{
    position:static !important; margin:0 !important; flex:0 0 auto !important;
  }
  html body .topbar-actions .avatar,
  html body .topbar-actions .avatar-img{
    width:34px !important; height:34px !important;
    min-width:34px !important; max-width:34px !important; flex:0 0 34px !important;
  }
  html body .topbar-actions button,
  html body .topbar-actions .bn-theme-btn,
  html body .topbar-actions .btn-logout{
    width:auto !important; min-width:34px !important; height:34px !important;
    min-height:34px !important; padding-inline:8px !important;
    font-size:11.5px !important; border-radius:9px !important;
    flex:0 0 auto !important; white-space:nowrap !important;
  }
  html body .topbar-actions .bn-theme-btn,
  html body .topbar-actions > button:not(.btn-logout){
    width:34px !important; max-width:34px !important; padding:0 !important; flex:0 0 34px !important;
  }
}

/* ---------- گوشی: آواتار تکراری حذف ---------- */
@media screen and (max-width:900px){
  html body .topbar a.topbar-user ~ a.topbar-user,
  html body .topbar-actions ~ a.topbar-user,
  html body .topbar > a[href="/profile"]:not(.topbar-user),
  html body .topbar-inner > a[href="/profile"]:not(.topbar-user){
    display:none !important;
  }
  /* هر آواتار خارج از نوار ابزار در سربرگ */
  html body .topbar a[href="/profile"]:nth-of-type(n+2){ display:none !important; }
}

/* ---------- آواتار تکراری hf-mobile ---------- */
html body .hf-avatar{ display:none !important; }

/* ---------- گوشی: نوار بالا، چیدمان تمیز ---------- */
@media screen and (max-width:900px){
  html body .topbar{
    display:flex !important; flex-wrap:nowrap !important;
    align-items:center !important; gap:10px !important;
    padding:10px 14px !important;
    border-bottom:1px solid rgba(19,21,44,.07) !important;
  }
  html[data-theme="dark"] body .topbar{ border-bottom-color:rgba(255,255,255,.07) !important; }

  /* عنوان سمت راست، فشرده */
  html body .topbar h1{
    font-size:16px !important; margin:0 !important; line-height:1.4 !important;
    white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
  }
  html body .topbar-sub{ display:none !important; }

  /* ابزارها سمت چپ، هم‌تراز و هم‌اندازه */
  html body .topbar-actions{
    margin-inline-start:auto !important; gap:8px !important;
    align-items:center !important; flex-wrap:nowrap !important;
  }
  html body .topbar-actions .bn-theme-btn,
  html body .topbar-actions > button:not(.btn-logout),
  html body .btn-back{
    width:34px !important; height:34px !important; flex:0 0 34px !important;
    border-radius:10px !important; padding:0 !important;
  }
  html body .topbar-actions .avatar,
  html body .topbar-actions .avatar-img{
    width:34px !important; height:34px !important; flex:0 0 34px !important;
    border-radius:50% !important;
    box-shadow:0 0 0 2px rgba(124,77,255,.35) !important;
  }
  html body .btn-logout{
    height:34px !important; min-height:34px !important;
    padding-inline:10px !important; font-size:11.5px !important;
    border-radius:10px !important; gap:5px !important;
  }
  html body .btn-logout svg{ width:14px !important; height:14px !important; }
}
@media screen and (max-width:420px){
  html body .topbar{ padding-inline:10px !important; gap:7px !important; }
  html body .topbar h1{ font-size:15px !important; }
  html body .btn-logout span,
  html body .btn-logout{ font-size:11px !important; padding-inline:8px !important; }
}

/* ---------- گوشی: فاصلهٔ قطعی بین ابزارهای نوار بالا ---------- */
@media screen and (max-width:900px){
  html body .topbar-actions{
    display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important;
    align-items:center !important; gap:0 !important;
  }
  html body .topbar-actions > *{
    margin:0 0 0 8px !important;
    position:static !important; float:none !important;
    inset:auto !important; transform:none !important;
    flex:0 0 auto !important;
  }
  html body .topbar-actions > *:last-child{ margin-inline-start:0 !important; }
  html body .topbar-actions > *:first-child{ margin-inline-end:0 !important; }
}

/* ---------- گوشی: آواتار در جای خودش بماند ---------- */
@media screen and (max-width:900px){
  html body .topbar-actions a.topbar-user{
    display:inline-flex !important; align-items:center !important;
    width:34px !important; height:34px !important;
    min-width:34px !important; max-width:34px !important;
    flex:0 0 34px !important; overflow:hidden !important;
    border-radius:50% !important; position:relative !important;
    margin:0 0 0 10px !important; padding:0 !important;
  }
  html body .topbar-actions a.topbar-user .avatar,
  html body .topbar-actions a.topbar-user img.avatar-img{
    position:absolute !important; inset:0 !important;
    width:100% !important; height:100% !important;
    min-width:0 !important; max-width:none !important;
    min-height:0 !important; max-height:none !important;
    box-shadow:none !important; border:0 !important; margin:0 !important;
    border-radius:50% !important; object-fit:cover !important;
  }
}

/* ---------- گوشی: آواتار و تم در انتهای چپ ---------- */
@media screen and (max-width:900px){
  html body .topbar-actions{
    display:flex !important; flex-direction:row-reverse !important;
    align-items:center !important; flex-wrap:nowrap !important;
    gap:10px !important; margin-inline-start:auto !important;
  }
  html body .topbar-actions > *{ margin:0 !important; flex:0 0 auto !important; }
  html body .topbar-actions a.topbar-user{ order:1 !important; }
  html body .topbar-actions .bn-theme-btn{ order:2 !important; }
  html body .topbar-actions .btn-logout{ order:5 !important; }
  html body .topbar-actions > button:not(.bn-theme-btn):not(.btn-logout){ order:4 !important; }
}

/* ---------- گوشی: کاشی‌های هم‌اندازه، بدون فضای خالی ---------- */
@media screen and (max-width:900px){
  html body .call-grid{
    grid-auto-flow:row !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-auto-rows:minmax(0,1fr) !important;
    align-content:stretch !important;
  }
  html body .call-grid[data-count="1"]{ grid-template-columns:minmax(0,1fr) !important; }
  html body .call-tile{
    width:100% !important; height:100% !important;
    aspect-ratio:auto !important; background:#12142A !important;
  }
  html body .call-tile video{
    width:100% !important; height:100% !important;
    object-fit:cover !important; object-position:center center !important;
  }
}