/* ═══════════════════════════════════════════════════════════════════════════
 *  v369 · نوار پایین لایو صوتی — «داک شب‌طلایی»
 *
 *  قبلاً هر دکمه رنگ و سبک خودش را داشت (یکی بنفش پر، یکی صورتی پر، بقیه شیشه‌ای) و
 *  دکمه‌ها بی‌قاب کف صفحه پخش بودند. حالا:
 *   • یک کپسول شیشه‌ای تیره (شب بنفش) با خط نور طلایی‌–‌صورتی‌–‌یاسی بالایش؛ دکمه‌ها داخل آن.
 *   • هدیه وسط، بزرگ‌تر و بالاتر از کپسول، با قاب تیره و حلقهٔ طلایی (مثل داک اپ‌های حرفه‌ای)؛
 *     حلقهٔ رنگین چرخان و تکان کوچک هدیه سر جایشان.
 *   • دکمه‌های دو طرف یک‌دست: کاشی شیشه‌ای تیره، آیکن خطی یکسان با رنگ معنادار
 *     (چت فیروزه‌ای، مایک سبز / بی‌صدا قرمز، بلندگو کهربایی، بازی یاسی، ری‌اکشن صورتی، منو نقره‌ای).
 *   • دو طرف هدیه متقارن پخش می‌شوند (هر تعداد دکمه).
 *   • نقطهٔ «پیام خوانده‌نشده» روی منو (قبلاً کلاسش ست می‌شد ولی در لایو صوتی دیده نمی‌شد).
 *  فقط CSS: رفتار دکمه‌ها، کیبورد و تایپ همان قبلی است. بدون backdrop-filter (قبلاً شش دکمه هر کدام
 *  تاری پس‌زمینهٔ متحرک را هر فریم حساب می‌کردند) و حرکت‌ها فقط transform/opacity.
 * ═══════════════════════════════════════════════════════════════════════════ */
:root{ --ic369-chat:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 4.2c4.6 0 8.3 3 8.3 6.9s-3.7 6.9-8.3 6.9c-1.1 0-2.2-.2-3.2-.5L4.3 19.6l1.3-3.7C4.4 14.6 3.7 13 3.7 11.1 3.7 7.2 7.4 4.2 12 4.2z%22/%3E%3Ccircle cx=%228.3%22 cy=%2211.2%22 r=%221.25%22 fill=%22%23000%22 stroke=%22none%22/%3E%3Ccircle cx=%2212%22 cy=%2211.2%22 r=%221.25%22 fill=%22%23000%22 stroke=%22none%22/%3E%3Ccircle cx=%2215.7%22 cy=%2211.2%22 r=%221.25%22 fill=%22%23000%22 stroke=%22none%22/%3E%3C/svg%3E") }
:root{ --ic369-mic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%228.8%22 y=%222.8%22 width=%226.4%22 height=%2211.4%22 rx=%223.2%22 fill=%22%23000%22 stroke=%22none%22/%3E%3Cpath d=%22M5.6 11.2a6.4 6.4 0 0 0 12.8 0M12 17.6v3.4M8.8 21h6.4%22/%3E%3C/svg%3E") }
:root{ --ic369-micoff:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M15.2 9.6V6a3.2 3.2 0 0 0-6.1-1.4M8.8 8.8V11a3.2 3.2 0 0 0 5.2 2.5%22/%3E%3Cpath d=%22M18.4 11.2a6.4 6.4 0 0 1-.9 3.3M5.6 11.2a6.4 6.4 0 0 0 10.2 5.2M12 17.6v3.4M8.8 21h6.4M3.5 3.5l17 17%22/%3E%3C/svg%3E") }
:root{ --ic369-spk:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3.8 9.4h3.4L11.8 5.6v12.8L7.2 14.6H3.8z%22 fill=%22%23000%22/%3E%3Cpath d=%22M15.4 9.2a4 4 0 0 1 0 5.6M18.2 6.5a7.8 7.8 0 0 1 0 11%22/%3E%3C/svg%3E") }
:root{ --ic369-spkoff:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3.8 9.4h3.4L11.8 5.6v12.8L7.2 14.6H3.8z%22 fill=%22%23000%22/%3E%3Cpath d=%22M15.6 9.4l5 5.2M20.6 9.4l-5 5.2%22/%3E%3C/svg%3E") }
:root{ --ic369-game:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M7.6 7.6h8.8a4.6 4.6 0 0 1 4.5 3.7l1 4.6a2.5 2.5 0 0 1-4.3 2.2L15.4 15.8H8.6l-2.2 2.3A2.5 2.5 0 0 1 2.1 15.9l1-4.6a4.6 4.6 0 0 1 4.5-3.7z%22/%3E%3Cpath d=%22M8 10.4v3M6.5 11.9h3%22/%3E%3Ccircle cx=%2215.6%22 cy=%2210.8%22 r=%221.1%22 fill=%22%23000%22 stroke=%22none%22/%3E%3Ccircle cx=%2217.6%22 cy=%2212.9%22 r=%221.1%22 fill=%22%23000%22 stroke=%22none%22/%3E%3C/svg%3E") }
:root{ --ic369-emo:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%228.6%22/%3E%3Cpath d=%22M8.2 14.2c.9 1.5 2.2 2.3 3.8 2.3s2.9-.8 3.8-2.3%22/%3E%3Ccircle cx=%229.1%22 cy=%229.8%22 r=%221.25%22 fill=%22%23000%22 stroke=%22none%22/%3E%3Cpath d=%22M14 9.9c.5-.7 1.6-.7 2.1 0%22/%3E%3C/svg%3E") }
:root{ --ic369-grid:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%224%22 y=%224%22 width=%226.6%22 height=%226.6%22 rx=%222%22 fill=%22%23000%22 stroke=%22none%22/%3E%3Crect x=%2213.4%22 y=%224%22 width=%226.6%22 height=%226.6%22 rx=%222%22 fill=%22%23000%22 stroke=%22none%22 opacity=%22.55%22/%3E%3Crect x=%224%22 y=%2213.4%22 width=%226.6%22 height=%226.6%22 rx=%222%22 fill=%22%23000%22 stroke=%22none%22 opacity=%22.55%22/%3E%3Crect x=%2213.4%22 y=%2213.4%22 width=%226.6%22 height=%226.6%22 rx=%223.3%22 fill=%22%23000%22 stroke=%22none%22/%3E%3C/svg%3E") }
:root{ --ic369-gift:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223.6%22 y=%228.6%22 width=%2216.8%22 height=%224.6%22 rx=%221.4%22 fill=%22%23000%22 stroke=%22none%22/%3E%3Cpath d=%22M5.2 13.2h13.6v6.2a1.6 1.6 0 0 1-1.6 1.6H6.8a1.6 1.6 0 0 1-1.6-1.6z%22 fill=%22%23000%22 stroke=%22none%22/%3E%3Cpath d=%22M12 8.6c-1.6-3.6-5.9-4-6.1-1.6-.2 1.9 3 1.6 6.1 1.6zM12 8.6c1.6-3.6 5.9-4 6.1-1.6.2 1.9-3 1.6-6.1 1.6z%22 stroke-width=%221.8%22/%3E%3C/svg%3E") }

/* ── کپسول ── */
#liveRoom49.vb108 #vb108Bar{ isolation:isolate; padding:9px 18px calc(12px + env(safe-area-inset-bottom)) !important; column-gap:6px !important; align-items:center !important }
#liveRoom49.vb108 #vb108Bar::before{
  content:""; position:absolute; z-index:-1; left:8px; right:8px; top:6px; bottom:calc(6px + env(safe-area-inset-bottom));
  border-radius:28px; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(170,140,255,0) 4%, rgba(170,140,255,.75) 24%, rgba(255,205,120,.95) 50%, rgba(255,120,190,.75) 76%, rgba(255,120,190,0) 96%) top / 100% 1.2px no-repeat,
    radial-gradient(46% 120% at 50% 0%, rgba(255,150,80,.30), rgba(255,150,80,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 46%),
    linear-gradient(180deg, #2f1a5e 0%, #1c0f3e 62%, #140a2d 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 14px 30px rgba(6,0,22,.6), inset 0 -10px 20px rgba(0,0,0,.28);
}
#liveRoom49.vb108 #vb108Bar::after{ content:none !important }
#liveRoom49.vb108 #vb108Bar .l126, #liveRoom49.vb108 #vb108Bar .r126{
  display:flex !important; align-items:center; justify-content:center !important; gap:9px !important; min-width:0; position:relative }

/* ── کاشی‌های دو طرف (یک‌دست) ── */
#liveRoom49.vb108 #vb108Bar .vs98-rb:not(.vb108-gift),
#liveRoom49.vb108 #vb108Bar:not(:has(.vb108-inp:focus-within)) .vb108-inp{
  --t1:#BAE6FD; --t2:#38BDF8; --tr:rgba(56,189,248,.45);
  position:relative; flex:none !important; width:42px !important; height:42px !important; min-width:42px; padding:0 !important;
  border-radius:15px !important; border:1px solid transparent !important; overflow:visible;
  background:
    radial-gradient(130% 120% at 28% 12%, rgba(255,255,255,.17), rgba(255,255,255,.02) 58%) padding-box,
    radial-gradient(90% 70% at 50% 112%, var(--tr), rgba(0,0,0,0) 70%) padding-box,
    linear-gradient(180deg, #3b2577, #21114a) padding-box,
    linear-gradient(160deg, var(--tr), rgba(255,255,255,.07) 55%, rgba(0,0,0,.2)) border-box !important;
  box-shadow:0 5px 12px rgba(4,0,18,.45), inset 0 -5px 9px rgba(0,0,0,.22) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  transition:transform .14s cubic-bezier(.3,1.6,.5,1) !important;
}
#liveRoom49.vb108 #vb108Bar .vs98-rb:not(.vb108-gift):active,
#liveRoom49.vb108 #vb108Bar:not(:has(.vb108-inp:focus-within)) .vb108-inp:active{ transform:scale(.88) !important }
/* آیکن قدیمی‌ها کنار می‌روند؛ آیکن یک‌دست با ماسک (رنگ = گرادیان نقش) */
#liveRoom49.vb108 #vb108Bar .vs98-rb:not(.vb108-gift) > svg,
#liveRoom49.vb108 #vb108Bar .vb108-game .rp130,
#liveRoom49.vb108 #vb108Bar .vb108-inp > .ci131 > svg{ display:none !important }
#liveRoom49.vb108 #vb108Bar .vs98-rb:not(.vb108-gift)::before,
#liveRoom49.vb108 #vb108Bar .vb108-inp > .ci131::before{
  content:""; position:absolute; inset:0; margin:auto; width:24px; height:24px; pointer-events:none;
  background:linear-gradient(160deg, var(--t1), var(--t2));
  -webkit-mask:var(--ic) center/contain no-repeat; mask:var(--ic) center/contain no-repeat;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.3)) drop-shadow(0 0 5px var(--tr));
}
#liveRoom49.vb108 #vb108Bar:not(:has(.vb108-inp:focus-within)) .vb108-inp > .ci131{
  position:absolute !important; inset:0 !important; width:auto !important; height:auto !important; display:block !important;
  background:none !important; border:0 !important; box-shadow:none !important; --ic:var(--ic369-chat) }
#liveRoom49.vb108 #vb108Bar:not(:has(.vb108-inp:focus-within)) .vb108-inp > .ci131::before{ background:linear-gradient(160deg,#A5F3FC,#22D3EE) }
/* رنگ هر نقش */
#liveRoom49.vb108 #vb108Bar:not(:has(.vb108-inp:focus-within)) .vb108-inp{ --tr:rgba(34,211,238,.5) }
#liveRoom49.vb108 #vb108Bar .vs98-rb.vb108-mic{ --ic:var(--ic369-mic); --t1:#BBF7D0; --t2:#22C55E; --tr:rgba(34,197,94,.55) }
#liveRoom49.vb108 #vb108Bar .vs98-rb.vb108-spk{ --ic:var(--ic369-spk); --t1:#FDE68A; --t2:#F59E0B; --tr:rgba(245,158,11,.5) }
#liveRoom49.vb108 #vb108Bar .vs98-rb.vb108-game{ --ic:var(--ic369-game); --t1:#DDD6FE; --t2:#A78BFA; --tr:rgba(167,139,250,.55) }
#liveRoom49.vb108 #vb108Bar .vs98-rb.vb108-emo{ --ic:var(--ic369-emo); --t1:#FBCFE8; --t2:#F472B6; --tr:rgba(244,114,182,.55) }
#liveRoom49.vb108 #vb108Bar .vs98-rb.vb108-grid{ --ic:var(--ic369-grid); --t1:#F1F5F9; --t2:#C7D2FE; --tr:rgba(199,210,254,.45) }
#liveRoom49.vb108 #vb108Bar .vs98-rb:not(.vb108-gift):not(.vb108-mic):not(.vb108-spk):not(.vb108-game):not(.vb108-emo):not(.vb108-grid)::before{ display:none }
/* مایک بی‌صدا: کاشی قرمز درخشان با مایک خط‌خورده */
#liveRoom49.vb108 #vb108Bar .vs98-rb.vb108-mic.off{ --ic:var(--ic369-micoff); --t1:#fff; --t2:#FFE4E6;
  background:
    radial-gradient(130% 120% at 28% 12%, rgba(255,255,255,.3), rgba(255,255,255,0) 58%) padding-box,
    linear-gradient(180deg, #FB7185, #E11D48) padding-box,
    linear-gradient(160deg, #FFE4E6, rgba(225,29,72,.6)) border-box !important;
  box-shadow:0 0 14px rgba(244,63,94,.5), 0 5px 12px rgba(4,0,18,.45) !important }
/* بلندگوی خاموش: خاکستری با ضربدر */
#liveRoom49.vb108 #vb108Bar .vs98-rb.vb108-spk.off{ --ic:var(--ic369-spkoff); --t1:#E2E8F0; --t2:#94A3B8; --tr:rgba(148,163,184,.4) }
/* مایک روشن: هالهٔ سبز ملایم */
#liveRoom49.vb108 #vb108Bar .vb108-mic:not(.off){ box-shadow:0 0 12px rgba(34,197,94,.35), 0 5px 12px rgba(4,0,18,.45), inset 0 -5px 9px rgba(0,0,0,.22) !important }
/* پیام خوانده‌نشده روی منو */
#liveRoom49.vb108 #vb108Bar .vb108-grid.has::after{
  content:""; position:absolute; top:-3px; right:-3px; width:11px; height:11px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #FFB4C2, #F43F5E 60%); box-shadow:0 0 0 2.5px #1b0e3b, 0 0 8px rgba(244,63,94,.8) }

/* ── هدیهٔ وسط ── */
#liveRoom49.vb108 #vb108Bar .vb108-gift{
  width:62px !important; height:62px !important; margin-top:-30px !important; align-self:start;
  border:2px solid transparent !important;
  background:
    radial-gradient(circle at 32% 22%, #FFF8DC 0%, rgba(255,248,220,0) 34%) padding-box,
    radial-gradient(circle at 50% 38%, #FFD65A 0%, #FFA53D 42%, #FF6A3D 72%, #E8336B 100%) padding-box,
    linear-gradient(160deg, #FFF3C4, #FF8A5C 50%, #E8336B) border-box !important;
  box-shadow:0 0 0 4px #22114a, 0 0 0 5.5px rgba(255,205,120,.45), 0 0 22px 4px rgba(255,140,60,.5), 0 12px 22px rgba(4,0,18,.55) !important;
}
#liveRoom49.vb108 #vb108Bar .vb108-gift > svg{ display:none !important }
#liveRoom49.vb108 #vb108Bar .vb108-gift::after{
  display:block !important; content:"" !important; position:absolute !important; inset:0 !important; margin:auto !important;
  left:0 !important; top:0 !important; right:0 !important; bottom:0 !important; width:30px !important; height:30px !important;
  transform:none !important; animation:none !important; z-index:2;
  background:linear-gradient(180deg, #fff 0%, #FFF1D6 100%) !important;
  -webkit-mask:var(--ic369-gift) center/contain no-repeat; mask:var(--ic369-gift) center/contain no-repeat;
  filter:drop-shadow(0 1.5px 1px rgba(140,40,0,.55));
}
#liveRoom49.vb108 #vb108Bar .vb108-gift:active{ transform:scale(.9) }

/* ── هنگام تایپ: کپسول کامل و آرام، برآمدگی و خط‌ها کنار ── */
#liveRoom49.vb108 #vb108Bar:has(.vb108-inp:focus-within) .vb108-inp{
  border-radius:22px !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  background:linear-gradient(180deg, #3a2474, #22124a) padding-box, linear-gradient(120deg, #FFD65A, #F472B6 60%, #A78BFA) border-box !important;
  border:1.5px solid transparent !important }

/* ── گوشی باریک ── */
@media (max-width:360px){
  #liveRoom49.vb108 #vb108Bar{ padding-left:11px !important; padding-right:11px !important; column-gap:4px !important }
  #liveRoom49.vb108 #vb108Bar .l126, #liveRoom49.vb108 #vb108Bar .r126{ gap:5px !important }
  #liveRoom49.vb108 #vb108Bar .vs98-rb:not(.vb108-gift),
  #liveRoom49.vb108 #vb108Bar:not(:has(.vb108-inp:focus-within)) .vb108-inp{ width:37px !important; height:37px !important; min-width:37px; border-radius:13px !important }
  #liveRoom49.vb108 #vb108Bar .vs98-rb:not(.vb108-gift)::before{ width:21px; height:21px }
  #liveRoom49.vb108 #vb108Bar .vb108-gift{ width:56px !important; height:56px !important }
}
/* حالت سبک: بدون هالهٔ رنگی زیر آیکن‌ها */
html.lite366 #liveRoom49.vb108 #vb108Bar .vs98-rb:not(.vb108-gift)::before{ filter:none }