/* v131 · دکمهٔ ایموجی، پنجرهٔ ری‌اکشن، ری‌اکشن روی عکس، آیکن‌های SVG چت و بلندگو */

/* ═══ دکمهٔ ایموجی ═══ */
#liveRoom49.vb108 #vb108Bar .r126 > .vb108-emo{ order:2 !important }
#liveRoom49.vb108 #vb108Bar .vb108-emo{ overflow:visible; padding:0;
  background:radial-gradient(circle at 35% 22%,rgba(255,255,255,.45),#FF5FA2 52%,#C2185B) padding-box,
             linear-gradient(145deg,#FFD6E8,#FF8FC2) border-box;
  box-shadow:0 0 16px rgba(255,95,162,.5), 0 6px 16px rgba(0,0,0,.3) }
#vb108Bar .vb108-emo .sm131{ width:30px; height:30px; display:block; filter:drop-shadow(0 2px 3px rgba(120,0,50,.45));
  animation:smBob131 2.8s ease-in-out infinite }
#vb108Bar .vb108-emo .sm131 .wk{ animation:smWink131 3.2s ease-in-out infinite; transform-origin:20.5px 13px }
#vb108Bar .vb108-emo .sm131 .sp1{ animation:smTw131 1.8s ease-in-out infinite; transform-origin:27px 6.4px }
#vb108Bar .vb108-emo .sm131 .sp2{ animation:smTw131 1.8s ease-in-out .9s infinite; transform-origin:4.5px 26.2px }
@keyframes smBob131{ 0%,100%{ transform:rotate(0) } 20%{ transform:rotate(-10deg) scale(1.05) } 40%{ transform:rotate(8deg) } 60%{ transform:rotate(0) } }
@keyframes smWink131{ 0%,80%,100%{ transform:scaleY(1) } 86%{ transform:scaleY(.2) } 92%{ transform:scaleY(1) } }
@keyframes smTw131{ 0%,100%{ transform:scale(.4); opacity:.3 } 50%{ transform:scale(1.2); opacity:1 } }

/* ═══ آیکن چت (حالت جمع) ═══ */
#liveRoom49.vb108 #vb108Bar:not(:has(.vb108-inp:focus-within)) .vb108-inp::before{ display:none }
#liveRoom49.vb108 #vb108Bar .vb108-inp > .ci131{ display:none !important }
#liveRoom49.vb108 #vb108Bar:not(:has(.vb108-inp:focus-within)) .vb108-inp > .ci131{
  display:grid !important; place-items:center; position:absolute; inset:0; pointer-events:none }
#vb108Bar .ci131 .ch131{ width:28px; height:28px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.4)); animation:chBob131 3s ease-in-out infinite }
#vb108Bar .ci131 .d1{ animation:chDot131 1.3s ease-in-out infinite }
#vb108Bar .ci131 .d2{ animation:chDot131 1.3s ease-in-out .18s infinite }
#vb108Bar .ci131 .d3{ animation:chDot131 1.3s ease-in-out .36s infinite }
@keyframes chDot131{ 0%,60%,100%{ transform:translateY(0) } 30%{ transform:translateY(-2.2px) } }
@keyframes chBob131{ 0%,100%{ transform:none } 50%{ transform:translateY(-1px) rotate(-3deg) } }

/* ═══ آیکن بلندگو ═══ */
#vb108Bar .vb108-spk .sp131{ width:28px; height:28px; display:block; filter:drop-shadow(0 2px 3px rgba(0,0,0,.4)) !important }
#vb108Bar .vb108-spk .sp131 .w1{ animation:spW131 1.5s ease-in-out infinite }
#vb108Bar .vb108-spk .sp131 .w2{ animation:spW131 1.5s ease-in-out .2s infinite }
#vb108Bar .vb108-spk .sp131 .w3{ animation:spW131 1.5s ease-in-out .4s infinite }
@keyframes spW131{ 0%,100%{ opacity:.25 } 40%{ opacity:1 } }

/* ═══ پنجرهٔ ایموجی ═══ */
#pk131{ position:fixed; inset:0; z-index:9400; display:flex; align-items:flex-end; justify-content:center;
  padding:0 10px calc(92px + env(safe-area-inset-bottom)); background:rgba(12,5,28,.25); animation:pkFade131 .18s ease both }
#pk131.out{ animation:pkFade131 .18s ease reverse both }
.pk131-card{ width:100%; max-width:400px; border-radius:24px; padding:12px 12px 10px; box-sizing:border-box;
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,247,237,.97)); box-shadow:0 18px 50px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.6) inset;
  animation:pkUp131 .3s cubic-bezier(.2,.9,.25,1.15) both; transform-origin:70% 100% }
#pk131.out .pk131-card{ animation:pkUp131 .18s ease reverse both }
.pk131-h{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:0 4px 8px }
.pk131-h b{ font-size:14px; font-weight:900; color:#1C1917 }
.pk131-h small{ font-size:10.5px; font-weight:700; color:#A8A29E }
.pk131-g{ display:grid; grid-template-columns:repeat(6,1fr); gap:2px }
.pk131-e{ border:0; background:transparent; border-radius:14px; aspect-ratio:1; display:grid; place-items:center; cursor:pointer;
  font-family:inherit; -webkit-tap-highlight-color:transparent; animation:pkIn131 .35s cubic-bezier(.3,1.6,.5,1) both }
.pk131-e span{ font-size:28px; line-height:1; display:block }
.pk131-e:active{ background:#FFE4F0; transform:scale(.9) }
@media (hover:hover){ .pk131-e:hover span{ transform:scale(1.2); transition:transform .15s } }
@keyframes pkFade131{ from{ opacity:0 } }
@keyframes pkUp131{ from{ transform:translateY(24px) scale(.92); opacity:0 } }
@keyframes pkIn131{ from{ transform:scale(.3); opacity:0 } }

/* ═══ ری‌اکشن روی عکس ═══ */
.rx131{ position:fixed; z-index:8500; width:var(--s,60px); height:var(--s,60px); transform:translate(-50%,-50%);
  pointer-events:none; display:grid; place-items:center }
.rx131 .g{ position:absolute; inset:-8%; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.55),rgba(255,210,80,.25) 45%,transparent 70%); animation:rxGlow131 1s ease-in-out infinite alternate }
.rx131 .e{ position:relative; font-size:calc(var(--s,60px) * .78); line-height:1; filter:drop-shadow(0 4px 8px rgba(0,0,0,.45));
  animation:rxIn131 .45s cubic-bezier(.3,1.7,.5,1) both }
.rx131.out{ animation:rxOut131 .3s ease-in both }
.rx131.bt .e{ animation:rxIn131 .45s cubic-bezier(.3,1.7,.5,1) both, rxBt131 .7s ease-in-out .45s infinite }
.rx131.sh .e{ animation:rxIn131 .45s cubic-bezier(.3,1.7,.5,1) both, rxSh131 .5s ease-in-out .45s infinite }
.rx131.sp .e{ animation:rxIn131 .45s cubic-bezier(.3,1.7,.5,1) both, rxSp131 1.6s linear .45s infinite }
.rx131.zm .e{ animation:rxIn131 .45s cubic-bezier(.3,1.7,.5,1) both, rxZm131 .6s ease-in-out .45s infinite }
.rx131.hb .e{ animation:rxIn131 .45s cubic-bezier(.3,1.7,.5,1) both, rxHb131 .9s ease-in-out .45s infinite }
.rx131.sw .e{ animation:rxIn131 .45s cubic-bezier(.3,1.7,.5,1) both, rxSw131 1.2s ease-in-out .45s infinite; transform-origin:50% 90% }
.rx131.fl .e{ animation:rxIn131 .45s cubic-bezier(.3,1.7,.5,1) both, rxFl131 .5s ease-in-out .45s infinite; transform-origin:50% 90% }
.rx131.clap .e{ animation:rxIn131 .45s cubic-bezier(.3,1.7,.5,1) both, rxClap131 .35s ease-in-out .45s infinite }
.rx131.kiss .e{ animation:rxIn131 .45s cubic-bezier(.3,1.7,.5,1) both, rxKiss131 1s ease-in-out .45s infinite }
@keyframes rxIn131{ 0%{ transform:scale(0) rotate(-30deg); opacity:0 } 100%{ transform:none; opacity:1 } }
@keyframes rxOut131{ to{ opacity:0; transform:translate(-50%,-80%) scale(.6) } }
@keyframes rxGlow131{ from{ opacity:.5; transform:scale(.9) } to{ opacity:1; transform:scale(1.08) } }
@keyframes rxBt131{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12%) scale(1.06) } }
@keyframes rxSh131{ 0%,100%{ transform:rotate(0) } 25%{ transform:rotate(-12deg) } 75%{ transform:rotate(12deg) } }
@keyframes rxSp131{ to{ transform:rotateY(360deg) } }
@keyframes rxZm131{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.22) } }
@keyframes rxHb131{ 0%,100%{ transform:scale(1) } 15%{ transform:scale(1.25) } 30%{ transform:scale(1) } 45%{ transform:scale(1.18) } }
@keyframes rxSw131{ 0%,100%{ transform:rotate(-10deg) } 50%{ transform:rotate(10deg) } }
@keyframes rxFl131{ 0%,100%{ transform:scale(1,1) } 50%{ transform:scale(.92,1.12) } }
@keyframes rxClap131{ 0%,100%{ transform:scale(1) rotate(0) } 50%{ transform:scale(.85) rotate(-8deg) } }
@keyframes rxKiss131{ 0%,100%{ transform:none } 40%{ transform:scale(1.2) translateX(8%) rotate(8deg) } }