/* ═══════════════════════════════════════════════════════════════════════════ * v487 · داک پایین لایو مثل مرجع — دیسک‌های تیرهٔ نرم، آیکون‌های خطی سفید، جعبهٔ هدیهٔ سه‌بعدی * * مشکل (مالک): داک v480/v481 (322 + 384 + 385) شلوغ بود — هر دکمه رنگ‌مایهٔ خودش (سبز/کهربایی/صورتی/یاسی)، گرادیان و * هالهٔ رنگی، صفحهٔ شیشه‌ای با خط نور طلایی پشت داک، و هدیهٔ طلایی‌–‌نارنجی داخل حلقه. مرجع (اندازه‌گیری‌شده از عکس): * پیل «Say Hi…» و دایره‌های ۳۶px که از خودِ اتاق «تیره‌تر»اند (≈ سیاه ۲۰٪، بی‌لبه، بی‌برق)، زمینهٔ اتاق دست‌نخورده * (بی‌صفحه و بی‌سایه)، آیکون‌های خطی سفید ~نصف دایره، ایموجی داخل پیل، نقطهٔ قرمز کوچک داخل دایره روی گوشهٔ آیکون، * فاصلهٔ ۸px، و یک جعبهٔ هدیهٔ سه‌بعدی ۱٫۱۴ برابر دایره روی دیسک تیرهٔ ۱٫۵ برابر (۵۴px) سمت راست. * راه‌حل (فقط CSS روی همان DOM؛ رفتار دکمه‌ها، تایپ و کیبورد همان قبلی): * • هر دو داک (صوتی/مولتی/سینما #vb108Bar و تصویری سولو #vs98Bar) یک زبان: پیل و دکمه‌های ۳۶px با پر سیاه ۲۲٪ و * لبهٔ ۱px سفید ۵٪ (فقط برای جدا ماندن روی ویدیوی سیاه)، بی‌گرادیان، بی‌برق، بی‌صفحهٔ شیشه‌ای، فاصلهٔ ۸px. * • ایموجی داخل انتهای پیل (در صوتی/سینما دکمهٔ .vb108-emo با حاشیهٔ منفی روی انتهای پیل می‌نشیند و پیل همان‌قدر * padding می‌گیرد؛ هنگام تایپ دکمه‌ها پنهان‌اند و padding برمی‌گردد). * • آیکون‌ها: مجموعهٔ تازهٔ خطی ۲px با سر گرد (ماسک SVG، همان سازوکار 322)، جعبهٔ ۲۴px در دایرهٔ ۳۶: ری‌اکشن، * مایک/مایک بسته، بلندگو/بی‌صدا، منو (چهار مربع)، بازی، دوربین، مهمان. حالت بسته (مایک، بلندگو): دیسک قرمز ملایم * با همان آیکون سفید خط‌خورده. نقطهٔ اعلان منو: ۹px قرمز، بی‌حلقه، داخل دایره روی گوشهٔ آیکون. * • هدیه: تصویر SVG سه‌بعدی (جعبهٔ ایزومتریک سه‌وجهی آبی، روبان‌های یاسی‌روشن، پاپیون صورتی بزرگ، برق) روی دیسک تیرهٔ * ۵۴px، با شناوری آرام (فقط transform)؛ ضربان مقیاس قدیمی (153-v121) خاموش. دکمهٔ بازی شناور (صوتی) هم‌مرکز با هدیه. * • گوشی باریک (<۳۶۰): دایره ۳۴، فاصله ۶، هدیه ۵۰. * وزن انتخابگر: پنج‌بار .vb108 / سه‌بار .vs98 (بالاتر از 384/385) و !important فقط جایی که آن‌ها دارند. * بدون :has تازه روی body/html/#liveRoom49، بدون backdrop-filter، بدون خواندن اندازه. * ═══════════════════════════════════════════════════════════════════════════ */ :root{ --ic487-emo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.6 14.2c.9 1.5 2.1 2.3 3.4 2.3s2.5-.8 3.4-2.3'/%3E%3Cpath d='M9 9.4v.01M15 9.4v.01' stroke-width='2.8'/%3E%3C/svg%3E"); --ic487-mic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3.5' width='6' height='11' rx='3'/%3E%3Cpath d='M6 11.5a6 6 0 0 0 12 0M12 17.5v3M9 20.5h6'/%3E%3C/svg%3E"); --ic487-micoff:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 9.5V6.5a3 3 0 0 1 6 0v4a3 3 0 0 1-.6 1.8M6 11.5a6 6 0 0 0 9.2 5.1M18 11.5a6 6 0 0 1-.6 2.6M12 17.5v3M9 20.5h6'/%3E%3Cpath d='M4.5 4.5l15 15'/%3E%3C/svg%3E"); --ic487-spk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 9.3v5.4h3.6l5.2 4.3V5L8.1 9.3z'/%3E%3Cpath d='M16.2 9.6a3.6 3.6 0 0 1 0 4.8M18.6 7.2a7 7 0 0 1 0 9.6'/%3E%3C/svg%3E"); --ic487-spkoff:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 9.3v5.4h3.6l5.2 4.3V5L8.1 9.3z'/%3E%3Cpath d='M16.5 9.8l4.2 4.4M20.7 9.8l-4.2 4.4'/%3E%3C/svg%3E"); --ic487-grid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6.6' height='6.6' rx='1.9'/%3E%3Crect x='13.4' y='4' width='6.6' height='6.6' rx='1.9'/%3E%3Crect x='4' y='13.4' width='6.6' height='6.6' rx='1.9'/%3E%3Crect x='13.4' y='13.4' width='6.6' height='6.6' rx='1.9'/%3E%3C/svg%3E"); --ic487-game:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.2 7.5h9.6a4.3 4.3 0 0 1 4.3 4.3v2.9a3 3 0 0 1-5.5 1.7l-.9-1.4H9.3l-.9 1.4A3 3 0 0 1 2.9 14.7v-2.9a4.3 4.3 0 0 1 4.3-4.3z'/%3E%3Cpath d='M8 10.4v3.2M6.4 12h3.2'/%3E%3Cpath d='M15.6 11.2v.01M17.8 13v.01' stroke-width='2.8'/%3E%3C/svg%3E"); --ic487-cam:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='13' height='10' rx='2.6'/%3E%3Cpath d='M16 11l5-3v8l-5-3'/%3E%3C/svg%3E"); --ic487-people:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8.5' r='3.2'/%3E%3Cpath d='M3.5 19a5.5 5.5 0 0 1 11 0'/%3E%3Cpath d='M15.5 5.8a3.2 3.2 0 0 1 0 5.6M17.2 13.9a5.5 5.5 0 0 1 3.3 5.1'/%3E%3C/svg%3E"); /* جعبهٔ ایزومتریک: درِ سه‌وجهی، بدنهٔ دو‌وجهی، روبان‌های یاسی‌روشن روی سه وجه، پاپیون دو‌حلقه‌ای صورتی، برق و سایه */ --gift487:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 5 58 60'%3E%3Cdefs%3E%3ClinearGradient id='tp' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23B9D6FF'/%3E%3Cstop offset='1' stop-color='%2377A9FF'/%3E%3C/linearGradient%3E%3ClinearGradient id='fl' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%235587F8'/%3E%3Cstop offset='1' stop-color='%232D5BD6'/%3E%3C/linearGradient%3E%3ClinearGradient id='rt' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%232F54C6'/%3E%3Cstop offset='1' stop-color='%231B3A9A'/%3E%3C/linearGradient%3E%3ClinearGradient id='rfl' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%236FA0FF'/%3E%3Cstop offset='1' stop-color='%234A7DEA'/%3E%3C/linearGradient%3E%3ClinearGradient id='rrt' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%233E68D6'/%3E%3Cstop offset='1' stop-color='%232A4DB2'/%3E%3C/linearGradient%3E%3ClinearGradient id='rb' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23F7F8FF'/%3E%3Cstop offset='1' stop-color='%23C6CEFF'/%3E%3C/linearGradient%3E%3ClinearGradient id='pk' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23FFA7E1'/%3E%3Cstop offset='1' stop-color='%23E2459D'/%3E%3C/linearGradient%3E%3CradialGradient id='sh' cx='.5' cy='.5' r='.5'%3E%3Cstop offset='0' stop-color='%23000' stop-opacity='.5'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cellipse cx='32' cy='61.5' rx='23' ry='3.6' fill='url(%23sh)'/%3E%3Cpath d='M11 30L32 40.5V61L11 50.5z' fill='url(%23fl)'/%3E%3Cpath d='M32 40.5L53 30v20.5L32 61z' fill='url(%23rt)'/%3E%3Cpath d='M18.5 33.75L24.5 36.75V57.25L18.5 54.25z' fill='url(%23rb)'/%3E%3Cpath d='M39.5 36.75L45.5 33.75V54.25L39.5 57.25z' fill='url(%23rb)' opacity='.85'/%3E%3Cpath d='M8 24L32 36V41L8 29z' fill='url(%23rfl)'/%3E%3Cpath d='M32 36L56 24V29L32 41z' fill='url(%23rrt)'/%3E%3Cpath d='M32 12L56 24L32 36L8 24z' fill='url(%23tp)'/%3E%3Cpath d='M32 12L56 24L32 36L8 24z' fill='%23fff' opacity='.12'/%3E%3Cpath d='M18.5 29.25L24.5 32.25V37.25L18.5 34.25z' fill='url(%23rb)'/%3E%3Cpath d='M39.5 32.25L45.5 29.25V34.25L39.5 37.25z' fill='url(%23rb)' opacity='.85'/%3E%3Cpath d='M17 19.5L23 16.5L47 28.5L41 31.5z' fill='url(%23rb)'/%3E%3Cpath d='M17 28.5L23 31.5L47 19.5L41 16.5z' fill='url(%23rb)'/%3E%3Cellipse cx='24.6' cy='20.2' rx='8' ry='5' transform='rotate(-24 24.6 20.2)' fill='url(%23pk)'/%3E%3Cellipse cx='39.4' cy='20.2' rx='8' ry='5' transform='rotate(24 39.4 20.2)' fill='url(%23pk)'/%3E%3Cellipse cx='25' cy='20.4' rx='4.2' ry='2.2' transform='rotate(-24 25 20.4)' fill='%23B9287A' opacity='.45'/%3E%3Cellipse cx='39' cy='20.4' rx='4.2' ry='2.2' transform='rotate(24 39 20.4)' fill='%23B9287A' opacity='.45'/%3E%3Cpath d='M30.5 25l-4.5 7.5 5.5-3z' fill='url(%23pk)'/%3E%3Cpath d='M33.5 25l4.5 7.5-5.5-3z' fill='url(%23pk)'/%3E%3Ccircle cx='32' cy='23' r='3.6' fill='%23FF86CF'/%3E%3Ccircle cx='30.9' cy='21.9' r='1.1' fill='%23fff' opacity='.85'/%3E%3Cpath d='M54 7l1.2 3.2 3.2 1.2-3.2 1.2L54 15.8l-1.2-3.2-3.2-1.2 3.2-1.2z' fill='%23fff' opacity='.95'/%3E%3Cpath d='M9.5 11l.8 2 2 .8-2 .8-.8 2-.8-2-2-.8 2-.8z' fill='%23fff' opacity='.8'/%3E%3C/svg%3E"); } /* ═══ ۱) داک صوتی / مولتی / سینما (#vb108Bar) ═══ */ #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar{ gap:8px !important; column-gap:8px !important; padding:8px 12px calc(8px + env(safe-area-inset-bottom)) !important } /* صفحهٔ شیشه‌ای، خط نور و سایه کنار می‌روند — زمینهٔ اتاق مثل مرجع دست‌نخورده */ #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar::before{ display:none !important; content:none !important } /* ── پیل پیام: دیسک کشیدهٔ تیرهٔ ۳۶px؛ انتهای راست جای ایموجی ── */ #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar .vb108-inp{ padding:0 42px 0 14px !important; border:1px solid rgba(255,255,255,.05) !important; background:rgba(0,0,0,.22) !important; box-shadow:none !important } #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar .vb108-inp > input{ font-size:13px !important; color:#fff !important } #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar .vb108-inp > input::placeholder{ color:rgba(255,255,255,.55) !important } #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar:has(.vb108-inp:focus-within) .vb108-inp{ padding-right:6px !important; border:1px solid rgba(255,255,255,.2) !important; background:rgba(0,0,0,.3) !important } /* ── دکمه‌های گرد ۳۶px: دیسک تیرهٔ نرم، بی‌رنگ‌مایه ── */ #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar .vs98-rb:not(.vb108-gift){ border:1px solid rgba(255,255,255,.05) !important; background:rgba(0,0,0,.22) !important; box-shadow:none !important; --t1:#fff; --t2:#fff; --tr:rgba(255,255,255,0) } #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar .vs98-rb:not(.vb108-gift)::before{ width:24px; height:24px; background:#fff !important; opacity:.96; filter:none !important } #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar .vs98-rb.vb108-emo{ --ic:var(--ic487-emo) } #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar .vs98-rb.vb108-mic{ --ic:var(--ic487-mic) } #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar .vs98-rb.vb108-spk{ --ic:var(--ic487-spk) } #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar .vs98-rb.vb108-grid{ --ic:var(--ic487-grid) } #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar .vs98-rb.vb108-game{ --ic:var(--ic487-game) } /* ایموجی: بی‌دیسک، روی انتهای پیل (پیل ۴۲px padding دارد؛ فاصلهٔ ۸px + حاشیهٔ −۴۴ = ۳۶px روی پیل) */ #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar .r126 > .vb108-emo{ margin-left:-44px !important; position:relative; z-index:1; border:0 !important; background:none !important; box-shadow:none !important } #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar .r126 > .vb108-emo::before{ opacity:.9 } /* دوربین (مولتی، 179-v135): همان دیسک، آیکن خطی سفید به‌جای svg خودش */ #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar .vb135-cam{ width:36px !important; height:36px !important; min-width:36px !important; padding:0 !important; position:relative; border-radius:50% !important; border:1px solid rgba(255,255,255,.05) !important; background:rgba(0,0,0,.22) !important; color:#fff; box-shadow:none !important } #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar .vb135-cam > svg{ display:none !important } #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar .vb135-cam::before{ content:""; position:absolute; inset:0; margin:auto; width:24px; height:24px; background:#fff; opacity:.96; -webkit-mask:var(--ic487-cam) center/contain no-repeat; mask:var(--ic487-cam) center/contain no-repeat } /* حالت‌های بسته: دیسک قرمز ملایم، آیکون سفید خط‌خورده */ #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar .vs98-rb.vb108-mic:not(.off){ box-shadow:none !important } #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar .vs98-rb.vb108-mic.off, #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar .vs98-rb.vb108-spk.off{ background:rgba(244,63,94,.28) !important; border-color:rgba(255,130,150,.38) !important; box-shadow:none !important } #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar .vs98-rb.vb108-mic.off{ --ic:var(--ic487-micoff) } #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar .vs98-rb.vb108-spk.off{ --ic:var(--ic487-spkoff) } /* نقطهٔ اعلان منو: ۹px قرمز، بی‌حلقه، داخل دایره روی گوشهٔ آیکون (مثل مرجع) */ #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar .vb108-grid.has::after{ top:6px; right:6px; width:9px; height:9px; background:#F2284A; box-shadow:none } /* ── بازی: همان دیسک ۳۶px (شناور در صوتی، هم‌مرکز با هدیه؛ در ردیف در سینما) ── */ #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar .r126 > .vb108-game{ width:36px !important; height:36px !important; min-width:36px !important; right:21px; box-shadow:0 2px 10px rgba(0,0,0,.3) !important } #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar .r126 > .vb108-game::before{ width:24px; height:24px } #liveRoom49.cn471on.vb108.vb108.vb108.vb108.vb108 #vb108Bar .r126 > .vb108-game{ right:auto; box-shadow:none !important } /* ── هدیه: دیسک تیرهٔ ۵۴px + جعبهٔ سه‌بعدی، شناوری آرام ── */ #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar > .vb108-gift{ width:54px !important; height:54px !important; min-width:54px; margin:0 !important; border:0 !important; background:none !important; box-shadow:none !important; border-radius:50% !important; overflow:visible !important; animation:none !important; transform:none } #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar > .vb108-gift::before{ display:block !important; content:"" !important; position:absolute; inset:0 !important; width:auto; height:auto; margin:0; border:0 !important; border-radius:50%; background:rgba(0,0,0,.22) !important; box-shadow:none !important; transform:none !important; animation:none !important; opacity:1 } #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar > .vb108-gift::after{ width:48px !important; height:48px !important; -webkit-mask:none !important; mask:none !important; background:var(--gift487) center / contain no-repeat !important; filter:drop-shadow(0 5px 8px rgba(0,0,0,.45)); animation:gift487 2.8s ease-in-out infinite !important } #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar > .vb108-gift:active{ transform:scale(.92) } @keyframes gift487{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-3px) } } @media (prefers-reduced-motion:reduce){ #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar > .vb108-gift::after{ animation:none !important } } /* گوشی باریک */ @media (max-width:359px){ #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar{ gap:6px !important; column-gap:6px !important; padding-left:8px !important; padding-right:8px !important } #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar .vs98-rb:not(.vb108-gift), #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar .vb135-cam{ width:34px !important; height:34px !important; min-width:34px !important } #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar .vs98-rb:not(.vb108-gift)::before, #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar .vb135-cam::before{ width:22px; height:22px } #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar .vb108-inp{ padding-right:40px !important } #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar .r126 > .vb108-emo{ margin-left:-40px !important } #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar .r126 > .vb108-game{ right:16px } #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar > .vb108-gift{ width:50px !important; height:50px !important; min-width:50px } #liveRoom49.vb108.vb108.vb108.vb108.vb108 #vb108Bar > .vb108-gift::after{ width:44px !important; height:44px !important } } /* ═══ ۲) داک لایو تصویری سولو (#vs98Bar): همان زبان ═══ */ #liveRoom49.vs98.vs98.vs98 #vs98Bar{ gap:8px; column-gap:8px; padding:4px 12px 8px } #liveRoom49.vs98.vs98.vs98 #vs98Bar > .vs98-inp{ padding:0 3px 0 14px; border:1px solid rgba(255,255,255,.05); background:rgba(0,0,0,.22); box-shadow:none } #liveRoom49.vs98.vs98.vs98 #vs98Bar > .vs98-inp:focus-within{ border:1px solid rgba(255,255,255,.2); background:rgba(0,0,0,.3) } #liveRoom49.vs98.vs98.vs98 #vs98Bar .vs98-inp > .vs98-field{ font-size:13px; color:#fff } #liveRoom49.vs98.vs98.vs98 #vs98Bar .vs98-inp > .vs98-field::placeholder{ color:rgba(255,255,255,.55) } /* ایموجی داخل پیل: بی‌دیسک، آیکن خطی سفید */ #liveRoom49.vs98.vs98.vs98 #vs98Bar .vs98-inp > .vs98-em{ width:32px; height:32px; position:relative; color:#fff; background:none; box-shadow:none } #liveRoom49.vs98.vs98.vs98 #vs98Bar .vs98-inp > .vs98-em svg{ display:none } #liveRoom49.vs98.vs98.vs98 #vs98Bar .vs98-inp > .vs98-em::before{ content:""; position:absolute; inset:0; margin:auto; width:22px; height:22px; background:#fff; opacity:.9; -webkit-mask:var(--ic487-emo) center/contain no-repeat; mask:var(--ic487-emo) center/contain no-repeat } /* دکمه‌های گرد ۳۶px (مهمان، منو، مایک مهمان؛ PK سبک خودش) */ #liveRoom49.vs98.vs98.vs98 #vs98Bar > .vs98-rb:not(.gift):not(.pk109b){ border:1px solid rgba(255,255,255,.05); background:rgba(0,0,0,.22); box-shadow:none } #liveRoom49.vs98.vs98.vs98 #vs98Bar > .vs98-rb:not(.gift):not(.pk109b) > svg{ display:none } #liveRoom49.vs98.vs98.vs98 #vs98Bar > .vs98-rb:not(.gift):not(.pk109b)::before{ content:""; position:absolute; inset:0; margin:auto; width:24px; height:24px; background:#fff; opacity:.96; -webkit-mask:var(--ic487-grid) center/contain no-repeat; mask:var(--ic487-grid) center/contain no-repeat } #liveRoom49.vs98.vs98.vs98 #vs98Bar > #vs98Co::before{ -webkit-mask-image:var(--ic487-people); mask-image:var(--ic487-people) } #liveRoom49.vs98.vs98.vs98 #vs98Bar > .mic108::before{ -webkit-mask-image:var(--ic487-mic); mask-image:var(--ic487-mic) } #liveRoom49.vs98.vs98.vs98 #vs98Bar > .mic108.off::before{ -webkit-mask-image:var(--ic487-micoff); mask-image:var(--ic487-micoff) } /* حالت‌های قرمز ملایم (درخواست مهمان در انتظار، مایک بسته) */ #liveRoom49.vs98.vs98.vs98 #vs98Bar > .vs98-rb.co.hot, #liveRoom49.vs98.vs98.vs98 #vs98Bar > .vs98-rb.mic108.off{ background:rgba(244,63,94,.28); border-color:rgba(255,130,150,.38); box-shadow:none } /* نقطهٔ منو: ۹px قرمز بی‌حلقه داخل دایره */ #liveRoom49.vs98.vs98.vs98 #vs98Bar .win113 .dot{ position:absolute; top:6px; right:6px; width:9px; height:9px; border:0; background:#F2284A; box-shadow:none } /* هدیه: دیسک تیرهٔ ۵۴px + همان جعبهٔ سه‌بعدی */ #liveRoom49.vs98.vs98.vs98 #vs98Bar > .vs98-rb.gift{ flex:0 0 54px; width:54px; height:54px; min-width:54px; margin:0; border:0; border-radius:50%; box-shadow:none; position:relative; overflow:visible; background:var(--gift487) center / 48px 48px no-repeat, rgba(0,0,0,.22); filter:drop-shadow(0 5px 8px rgba(0,0,0,.35)); animation:gift487 2.8s ease-in-out infinite } #liveRoom49.vs98.vs98.vs98 #vs98Bar > .vs98-rb.gift > svg{ display:none } #liveRoom49.vs98.vs98.vs98 #vs98Bar > .vs98-rb.gift::before, #liveRoom49.vs98.vs98.vs98 #vs98Bar > .vs98-rb.gift::after{ display:none; content:none } #liveRoom49.vs98.vs98.vs98 #vs98Bar > .vs98-rb.gift:active{ transform:scale(.92) } @media (prefers-reduced-motion:reduce){ #liveRoom49.vs98.vs98.vs98 #vs98Bar > .vs98-rb.gift{ animation:none } } @media (max-width:359px){ #liveRoom49.vs98.vs98.vs98 #vs98Bar{ gap:6px; column-gap:6px; padding-left:8px; padding-right:8px } #liveRoom49.vs98.vs98.vs98 #vs98Bar > .vs98-rb:not(.gift){ flex-basis:34px; width:34px; height:34px; min-width:34px } #liveRoom49.vs98.vs98.vs98 #vs98Bar > .vs98-rb:not(.gift):not(.pk109b)::before{ width:22px; height:22px } #liveRoom49.vs98.vs98.vs98 #vs98Bar > .vs98-rb.gift{ flex-basis:50px; width:50px; height:50px; min-width:50px; background-size:44px 44px, auto } }