/* Jumplin video chat (video.js) — floating bubble dock + minimized pill */
.vc-dock, .vc-pill { position: fixed; left: -9999px; top: -9999px; z-index: 107; font-family: 'Fredoka', 'Poppins', system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
.vc-dock.hidden, .vc-pill.hidden, .vc-dock .hidden { display: none !important; }

.vc-dock {
  --vc-size: 50px; --vc-active: 64px; --vc-popup: 84px;
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px;
  padding: 7px 9px 8px 10px; max-width: calc(100vw - 20px);
  background: rgba(255, 251, 235, 0.93); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  border: 2px solid rgba(133, 77, 14, 0.16); border-radius: 24px;
  box-shadow: 0 16px 40px -10px rgba(113, 63, 18, 0.38), 0 2px 6px rgba(113, 63, 18, 0.12);
  transition: left .35s cubic-bezier(.2,.8,.2,1), top .35s cubic-bezier(.2,.8,.2,1);
}
.vc-tiles { display: flex; flex-direction: row; align-items: flex-end; justify-content: center; gap: 6px; padding-top: 9px; min-height: 0; max-width: calc(100vw - 120px); overflow-x: auto; scrollbar-width: none; }
.vc-tiles::-webkit-scrollbar { display: none; }
.vc-dock.is-empty .vc-tiles { display: none; }
.vc-dock[data-layout="col"] .vc-tiles { flex-direction: column; align-items: center; flex-wrap: wrap; max-height: calc(100vh - 170px); }

.vc-tile { --s: var(--vc-size); position: relative; flex: none; width: calc(var(--s) + 12px); display: flex; flex-direction: column; align-items: center; transition: width .3s cubic-bezier(.2,.8,.2,1); }
.vc-tile.is-active { --s: var(--vc-active); }
.vc-dock.is-popup .vc-tile.is-active { --s: var(--vc-popup); }
.vc-ring { width: var(--s); height: var(--s); border-radius: 50%; padding: 3px; background: var(--vc-color, #f59e0b); box-shadow: 0 4px 12px -2px rgba(0,0,0,.22); transition: width .3s cubic-bezier(.2,.8,.2,1), height .3s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.vc-face { position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 2px solid #fff; background: radial-gradient(circle at 50% 35%, #fff 0%, #fef3c7 70%, #fde68a 100%); display: grid; place-items: center; }
.vc-avatar { font-size: calc(var(--s) * 0.48); line-height: 1; user-select: none; transition: opacity .25s; }
.vc-face video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; background: #1c1917; }
.vc-tile.has-video video { opacity: 1; }
.vc-tile.has-video .vc-avatar { opacity: 0; }
.vc-tile.is-me video { transform: scaleX(-1); }

.vc-name {
  position: relative; z-index: 2; margin-top: -10px; max-width: calc(var(--s) + 14px);
  padding: 3px 8px 3px; border-radius: 999px; border: 2px solid #fff;
  background: var(--vc-color, #f59e0b); color: #fff; font-weight: 700; font-size: 11px; line-height: 1.05;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 1px rgba(0,0,0,.28);
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.vc-mute { position: absolute; top: 0; right: 2px; z-index: 3; width: 21px; height: 21px; border-radius: 50%; background: #ef4444; color: #fff; border: 2px solid #fff; display: none; place-items: center; box-shadow: 0 2px 5px rgba(0,0,0,.25); }
.vc-mute svg { width: 12px; height: 12px; fill: currentColor; }
.vc-tile.mic-off .vc-mute { display: grid; }
.vc-turn { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); z-index: 3; display: none; padding: 2px 7px; border-radius: 999px; border: 2px solid #fff; background: #facc15; color: #713f12; font-weight: 800; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.vc-tile.is-active .vc-turn { display: block; }
.vc-tile.is-active .vc-ring { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #facc15, 0 8px 24px -2px rgba(234, 179, 8, .65); animation: vc-glow 1.8s ease-in-out infinite; }
.vc-tile.is-speaking .vc-ring { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #22c55e, 0 6px 20px -2px rgba(34, 197, 94, .6); }
.vc-tile.is-active.is-speaking .vc-ring { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #22c55e, 0 0 0 9px #facc15, 0 8px 24px -2px rgba(234, 179, 8, .6); }
@keyframes vc-glow { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 8px rgba(250, 204, 21, .85)); } }

.vc-overlay { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 10%; text-align: center; background: rgba(41, 24, 8, .62); color: #fff; }
.vc-tile.is-failed .vc-overlay { background: rgba(120, 53, 15, .78); }
.vc-ov-ic svg { width: calc(var(--s) * .34); height: calc(var(--s) * .34); fill: #fbbf24; display: block; }
.vc-ov-txt { display: none; font-family: 'Poppins', system-ui, sans-serif; font-size: 10.5px; line-height: 1.2; font-weight: 600; }
.vc-ov-retry { display: none; align-items: center; gap: 4px; margin-top: 3px; padding: 3px 9px; border-radius: 999px; border: 0; background: #fff; color: #713f12; font: 700 11px/1 'Fredoka', system-ui, sans-serif; cursor: pointer; }
.vc-ov-retry svg { width: 12px; height: 12px; }
.vc-spinner { width: 40%; height: 40%; max-width: 30px; max-height: 30px; border-radius: 50%; border: 3px solid rgba(255,255,255,.35); border-top-color: #fff; animation: vc-spin .8s linear infinite; }
@keyframes vc-spin { to { transform: rotate(360deg); } }

.vc-caption { order: -1; flex-basis: 100%; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 8px; max-width: 300px; margin: 0 auto; padding: 6px 10px; border-radius: 14px; background: #fff7ed; color: #713f12; font-family: 'Poppins', system-ui, sans-serif; font-size: 11.5px; line-height: 1.3; text-align: center; }
.vc-caption svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; fill: currentColor; }
.vc-caption.is-warn { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.vc-caption button { display: inline-flex; align-items: center; gap: 2px; padding: 4px 11px; border-radius: 999px; border: 0; background: #713f12; color: #fff; font: 700 12px/1.1 'Fredoka', system-ui, sans-serif; cursor: pointer; }
.vc-caption button svg { fill: currentColor; }
.vc-hint { color: #854d0e; opacity: .9; }

/* Phones / laptops: a 2×2 icon pad beside the bubbles keeps the dock short */
.vc-bar { display: grid; grid-template-columns: repeat(2, 36px); gap: 6px; }
.vc-bar-gap { display: none; }
.vc-dock .vc-btn { width: 36px; height: 36px; padding: 0; }
.vc-dock .vc-btn span { display: none; }
.vc-dock.is-empty .vc-bar { grid-template-columns: repeat(4, 36px); }
.vc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 13px 0 10px; border-radius: 999px; border: 2px solid rgba(133, 77, 14, .2); background: #fff; color: #713f12; font-weight: 700; font-size: 13.5px; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, transform .1s; }
.vc-btn:active { transform: scale(.96); }
.vc-btn svg { width: 19px; height: 19px; fill: currentColor; flex: none; }
.vc-btn.is-on { background: #16a34a; border-color: #15803d; color: #fff; box-shadow: 0 3px 10px -2px rgba(22, 163, 74, .55); }
.vc-btn.vc-icon { width: 38px; padding: 0; }
.vc-btn.vc-leave { color: #b91c1c; }
.vc-btn:focus-visible, .vc-pill:focus-visible, .vc-caption button:focus-visible, .vc-ov-retry:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }

/* Minimized pill */
.vc-pill { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 15px 0 6px; border-radius: 999px; border: 3px solid #fde68a; background: #713f12; color: #fff; font-weight: 700; font-size: 14.5px; cursor: pointer; box-shadow: 0 10px 26px -6px rgba(113, 63, 18, .55); transition: left .35s cubic-bezier(.2,.8,.2,1), top .35s cubic-bezier(.2,.8,.2,1); }
.vc-pill-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #facc15; color: #713f12; }
.vc-pill-ic svg { width: 18px; height: 18px; fill: currentColor; }
.vc-pill-count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #fff; color: #713f12; font-size: 12.5px; display: grid; place-items: center; }
.vc-pill.is-live { border-color: #fca5a5; background: #7f1d1d; }
.vc-pill.is-live .vc-pill-ic { background: #fff; color: #b91c1c; }
.vc-live-dot { width: 10px; height: 10px; border-radius: 50%; background: #f87171; box-shadow: 0 0 0 0 rgba(248, 113, 113, .7); animation: vc-live 1.6s ease-out infinite; }
@keyframes vc-live { 0% { box-shadow: 0 0 0 0 rgba(248, 113, 113, .7); } 100% { box-shadow: 0 0 0 9px rgba(248, 113, 113, 0); } }

@media (max-width: 360px) { .vc-dock { --vc-size: 44px; --vc-active: 56px; } .vc-bar { grid-template-columns: repeat(2, 32px); } .vc-dock:not(.vc-tv) .vc-btn { width: 32px; height: 32px; } }
@media (min-width: 768px) { .vc-dock:not(.vc-tv) { --vc-size: 64px; --vc-active: 84px; } }

/* Reserve page space under a bottom-docked dock (stacks with the host bar's own reservation) */
body.vc-dock-bottom { padding-bottom: calc(var(--vc-dock-h, 96px) + 20px); }
body.vc-dock-bottom.mp-hostbar-on { padding-bottom: calc(var(--mp-hostbar-h, 64px) + var(--vc-dock-h, 96px) + 28px); }

/* Live bubble inside the exercise pop-up header (phones + phone controllers) */
.vc-has-pb > #modal-icon, .vc-has-pb > #oa-ctrl-icon { display: none !important; }
.vc-pb { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; width: 70px; margin: -2px 0 -6px; }
.vc-pb-ring { width: 62px; height: 62px; border-radius: 50%; padding: 3px; background: var(--vc-color, #f59e0b); box-shadow: 0 0 0 3px #fff, 0 0 0 6px #facc15, 0 6px 18px -2px rgba(234, 179, 8, .6); animation: vc-glow 1.8s ease-in-out infinite; }
.vc-pb-face { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 2px solid #fff; background: #1c1917; }
.vc-pb-face video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-pb.is-me video { transform: scaleX(-1); }
.vc-pb-name { position: relative; z-index: 2; margin-top: -9px; max-width: 76px; padding: 2px 7px; border-radius: 999px; border: 2px solid #fff; background: var(--vc-color, #f59e0b); color: #fff; font: 700 10px/1.1 'Fredoka', system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 1px rgba(0,0,0,.28); }
.vc-pb-name::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: #f87171; vertical-align: 1px; box-shadow: 0 0 0 1.5px #fff; }
#mp-ctrl-action .vc-pb { margin-right: 4px; }

/* Big screen (TV): larger bubbles; text fits inside a failed tile */
.vc-dock.vc-tv { flex-direction: column; align-items: stretch; }
.vc-dock.vc-tv .vc-tiles { max-width: none; }
.vc-dock.vc-tv .vc-bar { display: flex; align-items: center; gap: 6px; }
.vc-dock.vc-tv .vc-bar-gap { display: block; width: 4px; }
.vc-dock.vc-tv { --vc-size: clamp(70px, 11vh, 124px); --vc-active: clamp(92px, 15.5vh, 172px); --vc-popup: clamp(110px, 21vh, 220px); padding: 12px 12px 10px; border-radius: 28px; }
.vc-dock.vc-tv .vc-name { font-size: clamp(12px, 1.6vh, 17px); padding: 4px 11px; margin-top: -12px; }
.vc-dock.vc-tv .vc-turn { font-size: clamp(10px, 1.3vh, 13px); padding: 3px 9px; top: -11px; }
.vc-dock.vc-tv .vc-mute { width: 28px; height: 28px; }
.vc-dock.vc-tv .vc-mute svg { width: 15px; height: 15px; }
.vc-dock.vc-tv .vc-tiles { gap: 12px; }
.vc-dock.vc-tv .vc-bar { justify-content: center; }
.vc-dock.vc-tv .vc-caption { max-width: 260px; }
.vc-dock.vc-tv .vc-ov-txt { display: block; font-size: clamp(9.5px, 1.35vh, 13px); }
.vc-tile.is-failed { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .vc-dock, .vc-pill, .vc-tile, .vc-ring { transition: none !important; }
  .vc-tile.is-active .vc-ring, .vc-live-dot, .vc-spinner, .vc-pb-ring { animation: none !important; }
}

.vc-caption .vc-link { display: inline; padding: 0; margin-left: 2px; background: none; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; border-radius: 4px; }
.vc-caption.is-warn { padding: 5px 9px; font-size: 11px; text-align: left; justify-content: flex-start; }

/* v16 "Voices": this device's volume for other players (ducking under music/SFX scales from it).
   Phones/laptops: a speaker chip in the button pad (dock keeps its size) opens a pop-over slider.
   Big screen (TV): an always-visible row. */
.vc-bar.has-chip { grid-template-columns: repeat(2, 36px) 30px; grid-auto-flow: row; }
.vc-bar.has-chip .vc-vol-chip { grid-column: 3; grid-row: 1 / span 2; }
.vc-dock.is-empty .vc-bar.has-chip { grid-template-columns: repeat(4, 36px) 30px; }
.vc-dock.is-empty .vc-bar.has-chip .vc-vol-chip { grid-column: 5; grid-row: 1; }
.vc-dock .vc-btn.vc-vol-chip { width: 30px; height: auto; min-height: 36px; padding: 6px 0 5px; flex-direction: column; justify-content: space-between; gap: 4px; border-radius: 16px; }
.vc-vol-chip svg { width: 17px; height: 17px; }
.vc-chip-lvl { position: relative; display: block; width: 8px; flex: 1 1 auto; min-height: 14px; border-radius: 999px; background: #fde68a; box-shadow: inset 0 1px 2px rgba(113, 63, 18, .25); overflow: hidden; }
.vc-chip-lvl b { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; border-radius: 999px; background: #f59e0b; transition: height .25s ease-out, background .25s; }
.vc-vol-chip[aria-expanded="true"] { background: #fef3c7; border-color: #d97706; }
.vc-vol-chip.is-off { color: #b91c1c; }
.vc-vol-chip.is-ducked { background: #f5f3ff; border-color: #a78bfa; color: #6d28d9; }
.vc-vol-chip.is-ducked .vc-chip-lvl { background: #ede9fe; }
.vc-vol-chip.is-ducked .vc-chip-lvl b { background: #8b5cf6; }
.vc-vol-chip.is-ducked::after { content: '\1F3B5'; position: absolute; top: -9px; right: -9px; width: 20px; height: 20px; border-radius: 50%; background: #7c3aed; color: #fff; border: 2px solid #fff; font-size: 10px; line-height: 16px; text-align: center; box-shadow: 0 2px 5px rgba(76, 29, 149, .35); }
.vc-vol-chip { position: relative; }
.vc-dock .vc-vol-chip.vc-btn svg { width: 17px; height: 17px; }

.vc-voices { display: flex; align-items: center; gap: 7px; color: #713f12; }
.vc-voices.is-pop {
  position: absolute; z-index: 5; right: 0; bottom: calc(100% + 8px); width: min(320px, calc(100vw - 20px)); box-sizing: border-box;
  padding: 8px 12px 8px 8px; border-radius: 20px; background: #fffbeb; border: 2px solid rgba(133, 77, 14, .2);
  box-shadow: 0 14px 30px -8px rgba(113, 63, 18, .45), 0 2px 6px rgba(113, 63, 18, .15);
  animation: vc-pop-in .18s ease-out; transform-origin: 90% 100%;
}
.vc-voices.is-pop.pop-below { bottom: auto; top: calc(100% + 8px); transform-origin: 90% 0; }
.vc-voices.is-pop.pop-left { right: auto; left: 0; transform-origin: 10% 100%; }
.vc-voices.is-pop.pop-left.pop-below { transform-origin: 10% 0; }
@keyframes vc-pop-in { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }
.vc-vol-ic { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(133, 77, 14, .2); background: #fff; color: #713f12; display: grid; place-items: center; padding: 0; cursor: pointer; box-shadow: 0 2px 6px -2px rgba(113, 63, 18, .25); }
.vc-vol-ic svg { width: 19px; height: 19px; fill: currentColor; }
.vc-vol-ic.is-off { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
.vc-vol-ic:active { transform: scale(.94); }
.vc-vol-lbl { flex: none; font-weight: 700; font-size: 14px; letter-spacing: .01em; }
.vc-vol-val { flex: none; min-width: 38px; text-align: right; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; color: #92400e; }
.vc-vol { --fill: 100%; flex: 1 1 60px; min-width: 60px; height: 36px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; touch-action: pan-y; }
.vc-vol::-webkit-slider-runnable-track { height: 12px; border-radius: 999px; background: linear-gradient(90deg, #f59e0b 0, #f59e0b var(--fill), #fde68a var(--fill), #fde68a 100%); box-shadow: inset 0 1px 2px rgba(113, 63, 18, .25); }
.vc-vol::-moz-range-track { height: 12px; border-radius: 999px; background: #fde68a; box-shadow: inset 0 1px 2px rgba(113, 63, 18, .25); }
.vc-vol::-moz-range-progress { height: 12px; border-radius: 999px; background: #f59e0b; }
.vc-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -8px; border-radius: 50%; background: #fff; border: 3px solid #d97706; box-shadow: 0 2px 6px rgba(113, 63, 18, .35); }
.vc-vol::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid #d97706; box-shadow: 0 2px 6px rgba(113, 63, 18, .35); }
.vc-vol:focus-visible, .vc-vol-ic:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; border-radius: 999px; }
.vc-duck-tag { flex: none; margin-left: auto; padding: 3px 9px; border-radius: 999px; background: #ede9fe; color: #5b21b6; border: 1.5px solid #c4b5fd; font-weight: 700; font-size: 12px; white-space: nowrap; animation: vc-duck-in .25s ease-out; }
@keyframes vc-duck-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.vc-voices.is-ducked .vc-vol-val, .vc-voices.is-ducked .vc-vol-lbl { display: none; }
.vc-voices.is-ducked .vc-vol { min-width: 40px; }
.vc-voices.is-ducked .vc-vol::-webkit-slider-runnable-track { background: linear-gradient(90deg, #a78bfa 0, #a78bfa var(--fill), #ede9fe var(--fill), #ede9fe 100%); }
.vc-voices.is-ducked .vc-vol::-webkit-slider-thumb { border-color: #7c3aed; }

/* TV: the row lives in the dock under the buttons; takes the dock's width, never widens it (width:0 + min-width:100%) */
.vc-dock.vc-tv .vc-voices { width: 0; min-width: 100%; box-sizing: border-box; min-height: 46px; gap: 10px; padding: 4px 4px 0; border-top: 1.5px dashed rgba(133, 77, 14, .18); }
.vc-dock.vc-tv .vc-vol-ic { width: 42px; height: 42px; }
.vc-dock.vc-tv .vc-vol-lbl { font-size: 15px; }
.vc-dock.vc-tv .vc-duck-tag { font-size: 13px; padding: 4px 11px; }
@media (max-width: 360px) { .vc-voices.is-pop .vc-vol-lbl { display: none; } }
@media (prefers-reduced-motion: reduce) { .vc-duck-tag, .vc-voices.is-pop { animation: none; } .vc-chip-lvl b { transition: none; } }
@media (max-width: 360px) { .vc-bar.has-chip { grid-template-columns: repeat(2, 32px) 28px; } .vc-dock .vc-btn.vc-vol-chip { width: 28px; } }