/* Маскот ведущего (спека «Ведущий — решение» → «Маскот, позы, облачко»): выезжает
   снизу слева, правее кружка громкости, на время фразы; облачко справа от него;
   позы и буквы ведёт host.js. Всегда в одном углу: по центру облачко, растущее
   вширь, сдвигало бы и текст, и самого маскота. */
.vx-host{position:fixed;bottom:0;left:96px;z-index:45;display:flex;align-items:flex-end;gap:14px;pointer-events:none;
  transform:translateY(115%);transition:transform .25s cubic-bezier(.2,.9,.3,1.2)}
.vx-host--on{transform:none}
.vx-host__face{position:relative;width:110px;height:110px;flex:none;margin-bottom:12px}
/* Плашка за нижней половиной маскота: он стоит в ней и выглядывает поверх края —
   объём, и на пёстром фоне сцены маскот не сливается с ним. Плашка неподвижна,
   качается только маскот. */
.vx-host__face::before{content:"";position:absolute;left:8px;right:8px;bottom:0;height:56%;
  background:var(--warm-900);border:1px solid var(--border-2);border-radius:18px;
  box-shadow:var(--shadow-3),inset 0 10px 16px -10px rgba(0,0,0,.6)}
.vx-host__pose{position:relative;z-index:1;display:block;width:110px;height:110px;object-fit:contain;transform-origin:50% 90%}
.vx-host__bubble{position:relative;margin-bottom:64px;max-width:400px;min-height:56px;padding:14px 22px;
  background:var(--warm-050);color:var(--text-inverse);font:800 21px/1.25 var(--font-display);
  border-radius:22px 22px 22px 6px;box-shadow:0 14px 40px rgba(0,0,0,.45);cursor:pointer;
  visibility:hidden;opacity:0;transition:opacity .2s,visibility 0s .2s}
.vx-host--talking .vx-host__bubble{visibility:visible;opacity:1;pointer-events:auto;transition:opacity .2s}
.vx-host__close{position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;
  background:var(--warm-800);color:var(--text-1);display:grid;place-items:center;opacity:0;transition:opacity .15s}
.vx-host__bubble:hover .vx-host__close{opacity:1}
.vx-host__lock{position:absolute;left:50%;bottom:100%;translate:-50% -6px;display:none;align-items:center;gap:4px;
  white-space:nowrap;padding:4px 8px;border-radius:10px;background:var(--warm-800);color:var(--amber-300);
  font:700 11px var(--font-text)}
.vx-host--locked.vx-host--talking .vx-host__lock{display:inline-flex}
/* Телефон: полоса внизу на всю ширину, облачко до двух строк, тап закрывает. */
@media (max-width:640px){
  .vx-host{left:0;right:0;translate:none;gap:8px;padding:0 8px 8px;
    background:linear-gradient(transparent,rgba(20,16,14,.9) 45%)}
  .vx-host__face,.vx-host__pose{width:56px;height:56px}
  .vx-host__face{margin-bottom:0}
  .vx-host__face::before{display:none}
  .vx-host__bubble{flex:1;max-width:none;min-height:0;margin-bottom:4px;
    padding:10px 14px;font-size:16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .vx-host__close{display:none}
}
@media (prefers-reduced-motion:reduce){.vx-host{transition:none}}