/* v271 · حاضران: گوی شمارهٔ بیننده + شیت روشن «حاضران آنلاین» */

/* ═══ گوی شمارهٔ بیننده (بالای اتاق) ═══ */
.vc125.v271{ position:relative; display:inline-flex !important; align-items:center; gap:4px; height:30px !important; min-width:0 !important; padding:0 10px 0 4px !important;
  border-radius:999px !important; border:0 !important; overflow:hidden; isolation:isolate; color:#fff !important;
  background:linear-gradient(120deg,#22D3EE 0%,#6366F1 55%,#A855F7 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 0 0 1px rgba(255,255,255,.25), 0 6px 16px -6px rgba(99,102,241,.85) !important }
[dir=rtl] .vc125.v271{ padding:0 4px 0 10px !important }
.vc125.v271::after{ content:""; position:absolute; z-index:-1; top:0; bottom:0; width:38%; left:-60%; transform:skewX(-20deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent); animation:sh271 3.6s ease-in-out infinite }
@keyframes sh271{ 0%,55%{ left:-60% } 90%,100%{ left:130% } }
.ey271{ width:22px; height:22px; padding:3px; box-sizing:border-box; border-radius:50%; background:rgba(255,255,255,.22); flex:none; animation:bk271 4s ease-in-out infinite }
@keyframes bk271{ 0%,92%,100%{ transform:scaleY(1) } 95%{ transform:scaleY(.15) } }
.vc125.v271 b{ font-size:12.5px; font-weight:900; text-shadow:0 1px 2px rgba(30,20,90,.4); font-variant-numeric:tabular-nums }

/* ═══ شیت ═══ */
.au271{ background:rgba(46,16,101,.3) !important }
.au271 .ms120-card{ position:relative; overflow:hidden; display:flex; flex-direction:column; max-height:calc(100vh - 110px);
  background:linear-gradient(180deg,#F2F7FF 0%,#FFFFFF 36%,#FFF9F2 100%) !important; box-shadow:0 -14px 44px -14px rgba(99,102,241,.5) !important }
.o271{ position:absolute; border-radius:50%; filter:blur(44px); pointer-events:none }
.o271.a{ width:220px; height:200px; top:-80px; inset-inline-start:-50px; background:rgba(34,211,238,.3) }
.o271.b{ width:240px; height:220px; top:-70px; inset-inline-end:-80px; background:rgba(168,85,247,.25) }
.hd271{ position:relative; display:flex; align-items:center; gap:12px; padding:16px 16px 10px }
.eo271{ position:relative; flex:none; width:48px; height:48px; border-radius:16px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(140deg,#22D3EE,#6366F1 55%,#A855F7); box-shadow:0 10px 20px -10px rgba(99,102,241,.9), inset 0 1px 0 rgba(255,255,255,.45) }
.eo271 svg{ position:relative; width:26px; height:26px; animation:bk271 4s ease-in-out infinite }
.eo271 i, .ei271 i{ position:absolute; inset:0; border-radius:inherit; border:2px solid rgba(99,102,241,.45); animation:wv271 2.4s ease-out infinite }
.eo271 i + i, .ei271 i + i{ animation-delay:1.2s }
@keyframes wv271{ from{ transform:scale(1); opacity:.9 } to{ transform:scale(1.6); opacity:0 } }
.ht271{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px }
.ht271 b{ font-size:16.5px; font-weight:900; background:linear-gradient(90deg,#0E7490,#6366F1 50%,#9333EA); -webkit-background-clip:text; background-clip:text; color:transparent }
.ht271 small{ display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color:#64748B }
.ld271{ width:7px; height:7px; border-radius:50%; background:#22C55E; box-shadow:0 0 0 3px rgba(34,197,94,.22); animation:pl271 1.6s ease-in-out infinite }
@keyframes pl271{ 50%{ box-shadow:0 0 0 6px rgba(34,197,94,0) } }
.ct271{ flex:none; display:flex; flex-direction:column; align-items:center; padding:6px 12px; border-radius:14px; background:#fff; box-shadow:0 8px 16px -12px rgba(99,102,241,.7), inset 0 0 0 1.5px #E0E7FF }
.ct271 b{ font-size:18px; font-weight:900; color:#4F46E5; line-height:1.1; font-variant-numeric:tabular-nums }
.ct271 small{ font-size:9.5px; font-weight:800; color:#94A3B8 }
.sx271{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:0 14px }
.sx271 span{ display:flex; flex-direction:column; align-items:center; gap:1px; padding:8px 4px; border-radius:15px; background:#fff; box-shadow:0 8px 16px -14px rgba(99,102,241,.6), inset 0 0 0 1.5px #EEF2FF }
.sx271 i{ width:24px; height:24px; border-radius:8px; display:grid; place-items:center; margin-bottom:2px }
.sx271 i svg{ width:14px; height:14px }
.sx271 .m i{ color:#0E9AA7; background:#E6FAFB } .sx271 .v i{ color:#C2410C; background:#FFF3E3 }
.sx271 .a::before{ content:""; width:24px; height:24px; margin-bottom:2px; border-radius:8px; background:#EEF2FF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z' fill='none' stroke='%236366F1' stroke-width='2.2'/%3E%3Ccircle cx='12' cy='12' r='3' fill='%236366F1'/%3E%3C/svg%3E") center/14px no-repeat }
.sx271 b{ font-size:15px; font-weight:900; color:#1E1B4B; font-variant-numeric:tabular-nums }
.sx271 small{ font-size:10px; font-weight:800; color:#94A3B8 }
.hs271{ position:relative; display:flex; align-items:center; gap:10px; margin:10px 14px 0; padding:10px 12px; border-radius:18px;
  background:linear-gradient(120deg,#FFF6E6,#FFF0F7); box-shadow:inset 0 0 0 1.5px #FCE3C4 }
.hs271 .ms120-rav{ box-shadow:0 0 0 2px #fff, 0 0 0 4px #FFB547 !important }
.tg271{ display:inline-flex; align-items:center; gap:3px; padding:4px 9px; border-radius:99px; font-size:10px; font-weight:900; letter-spacing:.4px; color:#fff;
  background:linear-gradient(135deg,#FFB547,#FF5E3A); box-shadow:0 4px 10px -4px rgba(255,94,58,.7) }
.tg271 svg{ width:11px; height:11px }
.tb271{ display:flex; gap:3px; margin:10px 14px 0; padding:3px; border-radius:14px; background:#EEF2FF; box-shadow:inset 0 0 0 1.5px #E0E7FF }
.tb271 button{ flex:1; height:30px; border:0; border-radius:11px; background:none; cursor:pointer; font-family:inherit; font-size:12px; font-weight:800; color:#64748B }
.tb271 button.on{ color:#fff; background:linear-gradient(120deg,#22D3EE,#6366F1 55%,#A855F7); box-shadow:0 6px 12px -8px rgba(99,102,241,.9) }
.sr271{ display:flex; align-items:center; gap:8px; height:38px; margin:8px 14px 4px; padding:0 12px; border-radius:13px; background:#fff; box-shadow:inset 0 0 0 1.5px #E0E7FF }
.sr271 svg{ width:15px; height:15px; color:#818CF8; flex:none }
.sr271 input{ flex:1; min-width:0; border:0; outline:0; background:none; font-family:inherit; font-size:12.5px; font-weight:700; color:#1E1B4B }
.au271 .ms120-aud{ position:relative; flex:1; overflow-y:auto; padding:4px 10px 12px; max-height:none !important }
.rw271{ margin:4px 0; border-radius:16px !important; background:#fff; box-shadow:0 8px 16px -16px rgba(99,102,241,.6), inset 0 0 0 1.5px #EEF2FF; animation:ri271 .3s both; animation-delay:var(--d) }
@keyframes ri271{ from{ opacity:0; transform:translateY(6px) } }
.rw271.on{ background:linear-gradient(120deg,#ECFEFF,#fff) ; box-shadow:inset 0 0 0 1.5px #A5F3FC }
.rw271.vp{ box-shadow:inset 0 0 0 1.5px #FCD9A6 }
.rw271 .ms120-rav{ box-shadow:0 0 0 2px #fff, 0 0 0 3.5px #E0E7FF }
.rw271.on .ms120-rav{ box-shadow:0 0 0 2px #fff, 0 0 0 3.5px #22D3EE }
.vf271{ font-style:normal; display:inline-grid; place-items:center; width:15px; height:15px; border-radius:50%; font-size:9px; color:#fff; background:#3B82F6; vertical-align:1px }
.mc271{ flex:none; display:inline-flex; align-items:center; gap:3px; padding:4px 9px; border-radius:99px; font-size:11px; font-weight:900; color:#0E7490; background:#CFFAFE }
.mc271 svg{ width:12px; height:12px }
.em271{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:22px 10px; text-align:center }
.em271.sm{ padding:14px }
.ei271{ position:relative; width:64px; height:64px; border-radius:22px; display:grid; place-items:center; color:#fff; margin-bottom:4px;
  background:linear-gradient(140deg,#22D3EE,#6366F1 55%,#A855F7); box-shadow:0 12px 24px -12px rgba(99,102,241,.9) }
.ei271 svg{ width:32px; height:32px }
.em271 b{ font-size:14.5px; font-weight:900; color:#1E1B4B } .em271 small{ font-size:12px; font-weight:700; color:#64748B }
.em271 button{ display:inline-flex; align-items:center; gap:6px; margin-top:8px; height:40px; padding:0 18px; border:0; border-radius:14px; cursor:pointer; font-family:inherit; font-size:13px; font-weight:900; color:#fff;
  background:linear-gradient(120deg,#8B5CF6,#6366F1); box-shadow:0 10px 20px -10px rgba(99,102,241,.9) }
.em271 button svg{ width:17px; height:17px }
.au271 .ms120-cancel{ color:#4F46E5 !important; background:#fff !important; box-shadow:inset 0 0 0 1.5px #E0E7FF }
@media (prefers-reduced-motion:reduce){ .au271 *, .vc125.v271 *, .vc125.v271::after{ animation:none !important } }