/* ═══════════════════════════════════════════════════════════════════════════
 *  v108 · سه مهمان در لایو تصویری، میوت، لایو صوتی با نوار تصویری،
 *         فهرست حاضران، فهرست گفتگوها و استوری‌ها
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── کاشی تکیِ قدیمی: جایش را کاشی‌های تازه گرفته‌اند ── */
#lrGuestVid65{ display:none !important }

/* ── ستون کاشی‌های مهمان ── */
#gs108{
  position:absolute; right:10px; top:128px; z-index:24;
  width:29%; max-width:150px;
  display:flex; flex-direction:column; gap:8px;
  touch-action:none; cursor:grab;
  transition:transform .2s;
}
#gs108.drag{ cursor:grabbing; transform:scale(1.03) }
.gt108{
  position:relative; width:100%; aspect-ratio:3/4; flex:0 0 auto;
  border-radius:16px; overflow:hidden;
  border:2px solid rgba(255,255,255,.85);
  background:#111; box-shadow:0 10px 28px rgba(0,0,0,.55);
  transition:box-shadow .2s, border-color .2s, height .25s;
  animation:gt108in .32s cubic-bezier(.2,.9,.3,1.25);
}
@keyframes gt108in{ from{ opacity:0; transform:translateX(30px) scale(.8) } }
.gt108 video{ width:100%; height:100%; object-fit:cover; pointer-events:none; display:block }
.gt108.aud{ aspect-ratio:1/1.02; background:radial-gradient(120% 90% at 50% 30%, #3b2a5c 0%, #1a1128 70%) }
.gt108.speaking:not(.aud){ box-shadow:0 0 0 3px #22c55e, 0 10px 28px rgba(0,0,0,.55) }
.gt108.speaking .g104-ring{ animation:g104talk .9s ease-in-out infinite }
.gt108.hmuted{ border-color:rgba(244,63,94,.9) }
.gt108.muted .g104-mic{ background:#f43f5e }
.gt108 .g104-ring{ width:58% }

/* نام پایین کاشی، با نشان میکروفون خاموش */
.gt108 .g102-nm{ display:flex; align-items:center; justify-content:center; gap:3px; padding:14px 6px 5px }
.gt108 .g102-nm .n{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0 }
.gt-off{
  flex:0 0 auto; width:16px; height:16px; border-radius:50%;
  background:#f43f5e; display:grid; place-items:center; font-style:normal;
}
.gt-off svg{ width:10px; height:10px }

/* دکمه‌ها */
.gt108 .g104-tools{ top:5px; left:5px; gap:4px }
.gt108 .g102-ib{ width:26px; height:26px }
.gt108 .g102-ib svg{ width:14px; height:14px }
.gt108 .g102-ib.x{ top:5px; right:5px; width:22px; height:22px }
.g102-ib.mic.off{ background:rgba(244,63,94,.85) }
.g102-ib.mic.lock::after{
  content:""; position:absolute; right:-2px; bottom:-2px; width:11px; height:11px; border-radius:50%;
  background:#111 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M6 10V7a6 6 0 0 1 12 0v3h1v12H5V10zm2 0h8V7a4 4 0 0 0-8 0z'/%3E%3C/svg%3E") center/7px no-repeat;
}
.g102-ib.mic{ position:relative }

/* کاشی‌های کوچک (سه نفر): دکمه‌ها جمع‌تر */
#gs108.n3 .g102-ib{ width:23px; height:23px }
#gs108.n3 .g102-ib svg{ width:12px; height:12px }
#gs108.n3 .g102-nm{ font-size:10px }

/* دکمهٔ میکروفون میزبان در نوار پایین لایو تصویری */
.vs98-rb.mic108 svg{ width:19px; height:19px }
.vs98-rb.mic108.off{ background:rgba(244,63,94,.85) }

/* شیت میزبان: دکمهٔ میوت کنار «پایان» */
.gl75-ok.m108{ background:#fff7ed !important; color:#c2410c !important; border:1.5px solid #fdba74 !important }
.gl75-ok.m108.off{ background:#fee2e2 !important; color:#be123c !important; border-color:#fda4af !important }

@media (prefers-reduced-motion:reduce){ .gt108{ animation:none } }

/* ═══════════════ لایو تصویری: ستون چت کنار ستون مهمان‌ها ═══════════════ */
/* v365: به‌جای :has(#gs108) — آن شرط با هر تغییر کوچک داخل اتاق، کل اتاق را دوباره محاسبه می‌کرد (کلاس را 314-v365-perf.js می‌گذارد) */
#liveRoom49.vs98.h365-gs #lrChat{ width:64% }

/* ═══════════════ فهرست گفتگوها ═══════════════ */
#chatList{ min-height:120px }
.cl108-row{
  display:flex; align-items:center; gap:13px; padding:11px 4px;
  border-bottom:1px solid #f5f5f4; cursor:pointer; border-radius:14px;
  transition:background .15s;
}
.cl108-row:active{ background:#fafaf9 }
.cl108-av{
  position:relative; flex:0 0 54px; width:54px; height:54px; border-radius:50%;
  background:linear-gradient(135deg,#FFC940,#FF9E2C); display:grid; place-items:center;
  box-shadow:0 3px 10px rgba(255,158,44,.22);
}
.cl108-av b{ color:#fff; font-weight:900; font-size:19px }
.cl108-av img{ position:absolute; inset:0; width:100%; height:100%; border-radius:50%; object-fit:cover; background:#f5f5f4 }
.cl108-av i.on{
  position:absolute; bottom:1px; inset-inline-end:1px; width:13px; height:13px; border-radius:50%;
  background:#22c55e; border:2.5px solid #fff;
}
.cl108-mid{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px }
.cl108-top{ display:flex; align-items:center; justify-content:space-between; gap:8px }
.cl108-nm{ font-size:14.5px; font-weight:900; color:#1c1917; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cl108-top small{ flex:0 0 auto; font-size:10.5px; color:#a8a29e; font-weight:700 }
.cl108-last{ font-size:12.5px; color:#78716c; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cl108-empty{ text-align:center; padding:46px 10px; color:#a8a29e }
.cl108-empty span{ font-size:34px; display:block; margin-bottom:6px }
.cl108-empty p{ font-weight:800; font-size:14px; color:#78716c; margin:0 }
.cl108-empty small{ font-size:12px }
.cl108-empty button{
  margin-top:10px; border:0; border-radius:99px; padding:8px 18px; font-weight:900; font-family:inherit;
  background:linear-gradient(135deg,#FFC940,#FF9E2C); color:#fff; cursor:pointer;
}
.cl108-spin{
  width:26px !important; height:26px; border-radius:50%; margin:0 auto;
  border:3px solid #fde68a; border-top-color:#f59e0b; animation:cl108spin .8s linear infinite;
}
@keyframes cl108spin{ to{ transform:rotate(360deg) } }

/* ═══════════════ ردیف استوری: یک ظاهر، اندازهٔ ثابت ═══════════════ */
#newChatsRow{ min-height:92px; align-items:flex-start }
.st108{ flex:0 0 68px; width:68px; display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer }
.st108-o{
  position:relative; width:66px; height:66px; border-radius:50%; padding:3px; background:#e7e5e4; flex:0 0 auto;
}
.st108-o.ring{ background:conic-gradient(#FFC940,#FF7A3D,#E84393,#8b5cf6,#FFC940) }
.st108-o.seen{ background:#d6d3d1 }
.st108-av{
  position:relative; display:grid; place-items:center; width:100%; height:100%; border-radius:50%;
  border:3px solid #fff; overflow:hidden; background:linear-gradient(135deg,#FFC940,#FF9E2C);
}
.st108-av b{ color:#fff; font-weight:900; font-size:19px }
.st108-av img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#f5f5f4 }
.st108 small{
  max-width:68px; font-size:10.5px; color:#57534e; font-weight:700;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.2;
}
.st108.me small{ color:#a8a29e }
.st108-add{
  position:absolute; bottom:-1px; left:-1px; width:22px; height:22px; border-radius:50%;
  background:linear-gradient(135deg,#FFC940,#FF9E2C); color:#fff; font-style:normal; font-weight:900; font-size:15px;
  display:grid; place-items:center; border:2.5px solid #fff; line-height:1;
}

/* ═══════════════ لایو صوتی: نوار پایین مثل لایو تصویری ═══════════════ */
#liveRoom49.vb108 #lrBar49,
#liveRoom49.vb108 #lrInputRow,
body.h365-vb #chatBar70{ display:none !important }
#vb108Bar{
  position:relative; z-index:12; display:flex; align-items:center; gap:8px;
  padding:8px 12px calc(12px + env(safe-area-inset-bottom));
  transition:transform .18s ease;
}
.vb108-inp{
  flex:1; min-width:0; display:flex; align-items:center; gap:6px; height:42px;
  background:rgba(255,255,255,.15); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:99px; padding:0 6px 0 14px;
}
.vb108-inp:focus-within{ background:rgba(255,255,255,.22); border-color:rgba(255,201,64,.55) }
#vb108Bar .vs98-field{ height:100% }
.vb108-em, .vb108-send{
  flex:0 0 auto; width:30px; height:30px; border:0; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; color:#fff;
}
.vb108-em{ background:rgba(255,255,255,.2) }
.vb108-send{ display:none; background:linear-gradient(135deg,#FFC940,#FF9E2C); color:#3b1d00 }
#vb108Bar.typing .vb108-send{ display:grid; animation:vb108pop .2s ease }
#vb108Bar.typing .vb108-em{ display:none }
@keyframes vb108pop{ from{ transform:scale(.5) } }
#vb108Bar .vs98-rb{ width:42px; height:42px }
#vb108Bar .vs98-rb.off{ background:rgba(244,63,94,.85) }
#vb108Bar .vb108-gift{
  background:linear-gradient(135deg,#fde68a,#f59e0b 60%,#d97706); color:#fff;
  box-shadow:0 4px 14px rgba(245,158,11,.45);
}
.vb108-pop{
  position:absolute; bottom:calc(100% - 2px); left:12px; right:12px;
  display:grid; grid-template-columns:repeat(8,1fr); gap:2px; padding:10px;
  background:rgba(24,16,40,.92); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.12); border-radius:20px;
  box-shadow:0 12px 30px rgba(0,0,0,.45); animation:vb108up .18s ease;
}
@keyframes vb108up{ from{ opacity:0; transform:translateY(10px) } }
.vb108-pop button{ border:0; background:none; font-size:24px; padding:5px 0; border-radius:10px; cursor:pointer }
.vb108-pop button:active{ background:rgba(255,255,255,.12) }
.vb108-pop button.tap{ animation:cb104tap .3s ease }
@media (max-width:360px){
  #vb108Bar{ gap:6px; padding-left:9px; padding-right:9px }
  #vb108Bar .vs98-rb{ width:38px; height:38px }
}

/* ═══════════════ میزبان میوت است — روی عکس میزبان ═══════════════ */
#hm108{
  position:absolute; z-index:3; width:17px; height:17px; border-radius:50%;
  background:#f43f5e; border:2px solid #1b1030; display:grid; place-items:center;
  box-shadow:0 2px 6px rgba(0,0,0,.4); animation:vb108pop .25s ease; pointer-events:none;
}
#hm108 svg{ width:9px; height:9px }
#lrHostAv{ transition:box-shadow .15s }
#lrHostAv.hs108{ box-shadow:0 0 0 2px #22c55e, 0 0 12px rgba(34,197,94,.7) }

/* ═══════════════ حاضران در اتاق ═══════════════ */
#rs108{
  position:fixed; inset:0; z-index:9500; background:rgba(0,0,0,.45);
  display:flex; align-items:flex-end; justify-content:center; animation:dm7fade .18s ease;
}
#rs108.out{ opacity:0; transition:opacity .18s }
.rs108-sh{
  width:100%; max-width:480px; max-height:72vh; display:flex; flex-direction:column;
  background:linear-gradient(180deg,#221537,#150d24); color:#fff;
  border-radius:24px 24px 0 0; padding:8px 0 calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -10px 40px rgba(0,0,0,.5); animation:vb108up .22s ease;
}
.rs108-grab{ display:block; width:40px; height:5px; border-radius:99px; background:rgba(255,255,255,.2); margin:2px auto 10px }
.rs108-hd{ display:flex; align-items:center; gap:8px; padding:0 18px 10px }
.rs108-hd b{ font-size:15px; font-weight:900; color:#FFE9A8 }
.rs108-hd span{ background:rgba(255,201,64,.18); color:#fde68a; font-weight:900; font-size:12px; border-radius:99px; padding:2px 9px }
.rs108-x{ margin-inline-start:auto; border:0; background:rgba(255,255,255,.1); color:#fff; width:30px; height:30px; border-radius:50%; cursor:pointer }
.rs108-body{ overflow-y:auto; padding:0 12px }
.rs108-sec{ margin:10px 6px 4px; font-size:11.5px; font-weight:900; color:rgba(255,255,255,.5) }
.rs108-row{ display:flex; align-items:center; gap:11px; padding:8px 6px; border-radius:14px; cursor:pointer }
.rs108-row:active{ background:rgba(255,255,255,.07) }
.rs108-av{
  position:relative; flex:0 0 42px; width:42px; height:42px; border-radius:50%; overflow:hidden;
  background:linear-gradient(135deg,#FFC940,#FF9E2C); display:grid; place-items:center;
}
.rs108-av.host{ box-shadow:0 0 0 2px #fbbf24 }
.rs108-av b{ font-weight:900; font-size:16px }
.rs108-av img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.rs108-nm{ flex:1; min-width:0; display:flex; align-items:center; gap:6px }
.rs108-nm b{ font-size:13.5px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.rs108-nm em{ flex:0 0 auto; font-style:normal; font-size:10px; font-weight:900; border-radius:99px; padding:2px 8px }
.rs108-nm em.h{ background:linear-gradient(135deg,#fbbf24,#f97316); color:#3b1d00 }
.rs108-nm em.m{ background:rgba(34,197,94,.2); color:#86efac }
.rs108-nm em.me{ background:rgba(255,255,255,.12); color:#e9d5ff }
.rs108-mut{ width:22px; height:22px; border-radius:50%; background:#f43f5e; display:grid; place-items:center }
.rs108-none{ text-align:center; color:rgba(255,255,255,.45); font-size:12.5px; font-weight:700; padding:18px 10px }
#liveRoom49 .lr-pill:has(#lrViewers){ cursor:pointer }
#vb108Bar .vb108-send svg:dir(rtl){ transform:scaleX(-1) }

/* ═══════════════ کارت لایو در پیوی (رندرر تازه) ═══════════════ */
.dm7-lc{ position:relative }
.dm7-lc .lc97-cover{ height:220px }
.dm7-lc-t{
  flex:0 0 auto; font-size:10px; font-weight:900; color:#ff2d6f;
  background:#fff0f5; border-radius:99px; padding:3px 8px;
}
.dm7-lc-go{
  position:absolute; left:10px; right:10px; bottom:10px; text-align:center;
  background:linear-gradient(135deg,#ff2d6f,#ff7a3d); color:#fff; font-size:12px; font-weight:900;
  border-radius:99px; padding:8px 0; box-shadow:0 6px 16px rgba(255,45,111,.4);
}
.lc97.off .dm7-lc-go{ background:rgba(0,0,0,.55); box-shadow:none }
.dm7-lc > .dm7-time{ position:static; display:block; margin-top:4px; color:#a8a29e; text-align:end }

/* v193 · حین تایپ با جای کم (کیبورد اندروید/آیفون): صندلی‌ها متناسب کوچک می‌شوند و روی چت نمی‌افتند */
#liveRoom49.vb108.kb193 #lrStage{ flex:0 0 auto !important; margin-top:6px !important; overflow:hidden }
#liveRoom49.vb108.kb193 #lrSeatsWrap{ zoom:.6 }
#liveRoom49.vb108.kb193 #lrStage + .flex-1, #liveRoom49.vb108.kb193 .relative.z-10.flex-1{ min-height:0 }
#liveRoom49.vb108.kb193 #lrChat{ min-height:0 }
#liveRoom49.vb108.kb193x #lrStage{ display:none !important }