/* Комікс (comic) і відеодзвінок (video_call) — js/trainers11.js, 17.10.2026.
   Лише токени з css/theme.css — працює у світлій і темній темі та з будь-яким кольором кабінету.
   Класи: cm-* — комікс, vc-* — дзвінок. */

/* =====================================================================
   Комікс
   ===================================================================== */
.cm-page { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 16px 0 8px; counter-reset: none; }
.cm-panel { position: relative; margin: 0; display: grid; min-width: 0; aspect-ratio: 4 / 3; border-radius: 14px; overflow: visible;
  border: 2.5px solid var(--ink); background: var(--page); box-shadow: 5px 5px 0 var(--mag-line); animation: cm-in .35s cubic-bezier(.2, .9, .3, 1.2) both; }
.cm-panel:nth-child(2) { animation-delay: .06s; } .cm-panel:nth-child(3) { animation-delay: .12s; }
.cm-panel:nth-child(4) { animation-delay: .18s; } .cm-panel:nth-child(5) { animation-delay: .24s; } .cm-panel:nth-child(6) { animation-delay: .3s; }
.cm-art, .cm-layer { grid-area: 1 / 1; min-width: 0; }
.cm-art { border-radius: 11px; overflow: hidden; position: relative; }
.cm-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* сцена без картинки: пласка намальована площина + підпис */
.cm-scene { position: absolute; inset: 0; display: grid; place-items: center; padding: 22% 14px;
  background:
    radial-gradient(circle at 78% 22%, var(--mag-soft) 0 14%, transparent 15%),
    radial-gradient(var(--line-strong) 1.1px, transparent 1.4px) 0 0 / 11px 11px,
    linear-gradient(180deg, var(--surface-2) 0 62%, var(--mag-soft) 62% 100%), var(--page); }
.cm-scene::after { content: ""; position: absolute; left: 0; right: 0; top: 62%; height: 2px; background: var(--mag-line); }
.cm-scene-t { position: relative; z-index: 1; max-width: 88%; padding: 6px 11px; border-radius: 8px; font-size: 12.5px; font-style: italic; line-height: 1.35;
  color: var(--ink-soft); text-align: center; background: var(--page); border: 1px dashed var(--line-strong); }

/* шар бульбашок: верхні кути, проміжок, нижні кути */
.cm-layer { position: relative; z-index: 2; display: flex; flex-direction: column; padding: 10px; gap: 8px; pointer-events: none; }
.cm-gapfill { flex: 1; min-height: 8px; }
.cm-row { display: flex; gap: 8px; align-items: flex-start; }
.cm-bottom { align-items: flex-end; }
.cm-c { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 0 1 auto; max-width: 74%; pointer-events: auto; }
.cm-c.cm-empty-c { display: none; }
.cm-tr, .cm-br { margin-left: auto; align-items: flex-end; }
.cm-bottom .cm-c { justify-content: flex-end; }

.cm-num { position: absolute; z-index: 3; top: -11px; left: 12px; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px;
  display: grid; place-items: center; font: 800 12px var(--font); color: var(--on-mag); background: var(--mag); box-shadow: var(--shadow-mag);
  font-variant-numeric: tabular-nums; }

/* бульбашки — непрозорі, щоб читалися на фото */
.cm-bubble { position: relative; padding: 7px 11px 8px; border-radius: 18px; border: 2px solid var(--ink); color: var(--ink);
  background: linear-gradient(var(--surface), var(--surface)), var(--page); box-shadow: 0 3px 0 var(--depth, var(--line-strong));
  font-size: 15px; line-height: 1.4; font-weight: 600; overflow-wrap: anywhere; animation: cm-pop .32s cubic-bezier(.2, .9, .3, 1.4) both .15s; }
.cm-who { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; color: var(--mag); margin-bottom: 1px; }
.cm-body .tf-text { white-space: pre-wrap; }
/* хвостик мови — у бік героя (до центру кадру) */
.cm-speech::after { content: ""; position: absolute; width: 13px; height: 13px; background: inherit; border: 2px solid var(--ink);
  border-top: 0; border-left: 0; }
.cm-speech.cm-at-tl::after { bottom: -8px; left: 22px; transform: rotate(45deg) skew(12deg, 12deg); }
.cm-speech.cm-at-tr::after { bottom: -8px; right: 22px; transform: rotate(45deg) skew(12deg, 12deg); }
.cm-speech.cm-at-bl::after { top: -8px; left: 22px; transform: rotate(-135deg) skew(12deg, 12deg); }
.cm-speech.cm-at-br::after { top: -8px; right: 22px; transform: rotate(-135deg) skew(12deg, 12deg); }
/* думка — хмарка з кружечками */
.cm-thought { border-radius: 26px; border-style: dashed; }
.cm-thought::before, .cm-thought::after { content: ""; position: absolute; border-radius: 50%; border: 2px solid var(--ink);
  background: linear-gradient(var(--surface), var(--surface)), var(--page); }
.cm-thought::before { width: 12px; height: 12px; }
.cm-thought::after { width: 7px; height: 7px; }
.cm-thought.cm-at-tl::before, .cm-thought.cm-at-tr::before { bottom: -15px; }
.cm-thought.cm-at-tl::after, .cm-thought.cm-at-tr::after { bottom: -25px; }
.cm-thought.cm-at-bl::before, .cm-thought.cm-at-br::before { top: -15px; }
.cm-thought.cm-at-bl::after, .cm-thought.cm-at-br::after { top: -25px; }
.cm-thought.cm-at-tl::before, .cm-thought.cm-at-bl::before { left: 24px; }
.cm-thought.cm-at-tl::after, .cm-thought.cm-at-bl::after { left: 18px; }
.cm-thought.cm-at-tr::before, .cm-thought.cm-at-br::before { right: 24px; }
.cm-thought.cm-at-tr::after, .cm-thought.cm-at-br::after { right: 18px; }
/* підпис оповідача — прямокутна плашка */
.cm-caption { border-radius: 4px; background: var(--mag); color: var(--on-mag); border-color: var(--mag); font-size: 13.5px; font-weight: 700;
  box-shadow: 3px 3px 0 var(--ink); }

/* ---------- режим bubbles: пропуски й банк ---------- */
.cm-gap { display: inline-flex; align-items: center; vertical-align: middle; min-height: 30px; margin: 1px 2px; border-radius: 9px;
  transition: background-color .15s, border-color .15s; cursor: pointer; }
.cm-gap.cm-open:not(.cm-filled) { min-width: 58px; border: 2px dashed var(--mag-line); background: var(--mag-soft); }
.cm-gap.cm-sel:not(.cm-filled) { border-style: solid; border-color: var(--mag); box-shadow: 0 0 0 3px var(--mag-soft); animation: cm-blink 1.4s ease-in-out infinite; }
.cm-gap:focus-visible { outline: 2px solid var(--mag); outline-offset: 2px; }
.cm-gap.dnd-over { border-color: var(--mag) !important; border-style: solid !important; }
.cm-gap.cm-ok { cursor: default; }
.cm-gap.cm-ok .cm-chip { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); box-shadow: none; opacity: 1; }
.cm-gap.cm-shown { cursor: default; padding: 2px 8px; border: 2px solid var(--ok-line); background: var(--ok-soft); color: var(--ok); font-weight: 800; }
.cm-gap.cm-bad { animation: cm-shake .38s ease; border: 2px solid var(--bad) !important; background: var(--bad-soft) !important; }
.cm-bubble .t-key { font-size: 10.5px; }

.cm-bank { position: sticky; bottom: 10px; z-index: 6; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 54px;
  padding: 11px; margin: 10px 0 12px; border-radius: 18px; border: 2px dashed var(--line-strong);
  background: linear-gradient(var(--surface), var(--surface)), var(--page); box-shadow: var(--shadow-2); }
.cm-bank.dnd-can { outline-offset: -4px; }
.cm-chip { font: 700 15px var(--font); color: var(--ink); padding: 7px 13px; border-radius: 11px; cursor: pointer;
  background: var(--surface); border: 2px solid var(--line-strong); box-shadow: 0 3px 0 var(--depth, var(--line-strong));
  transition: transform .12s, border-color .15s; }
.cm-chip:hover:not(:disabled) { border-color: var(--mag); transform: translateY(-1px); }
.cm-chip:focus-visible { outline: 2px solid var(--mag); outline-offset: 2px; }
.cm-chip.cm-placed { padding: 4px 9px; font-size: 14.5px; box-shadow: none; border-color: var(--mag); background: var(--surface); }
.cm-chip:disabled { cursor: default; }

.cm-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.cm-msg { flex: 1 1 220px; color: var(--ink-soft) !important; font-size: 13px; }

/* ---------- режим order ---------- */
.cm-movable { cursor: default; }
.cm-tools { position: absolute; z-index: 4; left: 50%; bottom: -17px; transform: translateX(-50%); display: flex; gap: 4px; align-items: center;
  padding: 3px; border-radius: 999px; background: linear-gradient(var(--surface), var(--surface)), var(--page); border: 1.5px solid var(--line-strong);
  box-shadow: var(--shadow-1); }
.cm-tools[hidden] { display: none; }
.cm-arrow, .cm-grip { border: 0; background: transparent; color: var(--ink); cursor: pointer; border-radius: 999px; display: inline-flex; align-items: center;
  justify-content: center; gap: 5px; font: 700 12.5px var(--font); box-shadow: none; }
.cm-arrow { width: 32px; height: 32px; padding: 0; }
.cm-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cm-arrow:disabled { opacity: .3; cursor: default; }
.cm-arrow:hover:not(:disabled) { background: var(--mag-soft); color: var(--mag); }
.cm-grip { height: 32px; padding: 0 12px 0 8px; background: var(--mag); color: var(--on-mag); cursor: grab; }
.cm-grip svg { width: 15px; height: 15px; fill: currentColor; }
.cm-grip.dnd-ghost { box-shadow: var(--shadow-mag); }
.cm-arrow:focus-visible, .cm-grip:focus-visible { outline: 2px solid var(--mag); outline-offset: 2px; }
.cm-m-order .cm-page { row-gap: 30px; }
.cm-panel.dnd-can { outline: 2px dashed var(--mag-line); outline-offset: 4px; }
.cm-panel.dnd-over { outline: 3px solid var(--mag); outline-offset: 4px; background: var(--page) !important; }
.cm-panel.cm-right { border-color: var(--ok); box-shadow: 5px 5px 0 var(--ok-line); }
.cm-panel.cm-wrong { border-color: var(--bad); box-shadow: 5px 5px 0 var(--bad-line); animation: cm-shake .38s ease; }
.cm-solved .cm-panel { border-color: var(--ok); box-shadow: 5px 5px 0 var(--ok-line); }
.cm-solved .cm-num, .cm-revealed .cm-num { background: var(--ok); color: var(--page); box-shadow: none; }

/* ---------- режим director ---------- */
.cm-writing { border-style: dashed; border-color: var(--mag); min-width: 170px; }
.cm-write { display: block; width: 100%; min-width: 150px; min-height: 44px; resize: none; border: 0; padding: 2px 0; background: transparent;
  color: var(--ink); font: 600 15px/1.4 var(--font); outline: none; overflow: hidden; }
.cm-write::placeholder { color: var(--ink-faint); font-weight: 600; font-style: italic; }
.cm-caption .cm-write { color: var(--on-mag); }
.cm-caption .cm-write::placeholder { color: var(--on-mag); opacity: .75; }
.cm-writing:focus-within { box-shadow: 0 0 0 3px var(--mag-soft), 0 3px 0 var(--depth, var(--line-strong)); }
.cm-two { display: grid; gap: 6px; min-width: min(220px, 100%); }
.cm-v { display: grid; gap: 1px; animation: cm-pop .3s cubic-bezier(.2, .9, .3, 1.3) both; }
.cm-v small { font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-faint); }
.cm-v-mine span { color: var(--ink-soft); font-weight: 600; }
.cm-v-author { padding-top: 6px; border-top: 1.5px dashed var(--line-strong); animation-delay: .12s; }
.cm-v-author small { color: var(--mag); }
.cm-v-author span { font-weight: 700; }
.cm-caption .cm-v small, .cm-caption .cm-v span { color: var(--on-mag); }
.cm-caption .cm-v-author { border-top-color: var(--on-mag); }

@keyframes cm-in { from { opacity: 0; transform: translateY(12px) rotate(-.6deg); } to { opacity: 1; transform: none; } }
@keyframes cm-pop { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
@keyframes cm-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes cm-blink { 50% { box-shadow: 0 0 0 5px var(--mag-soft); } }

@media (max-width: 560px) {
  .cm-page { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cm-m-order .cm-page { row-gap: 30px; }
  .cm-bubble { font-size: 14.5px; }
  .cm-c { max-width: 82%; }
  .cm-bank { padding: 9px; gap: 7px; }
}

/* =====================================================================
   Відеодзвінок
   ===================================================================== */
.vc-screen { position: relative; margin: 14px 0 8px; min-height: 440px; aspect-ratio: 16 / 10; border-radius: 26px; overflow: hidden; isolation: isolate;
  color: var(--ink); border: 1.5px solid var(--line-strong); box-shadow: var(--shadow-2);
  background: radial-gradient(120% 90% at 50% 0%, var(--mag-soft), transparent 65%), linear-gradient(180deg, var(--surface-2), var(--page)), var(--page); }
.vc-back { position: absolute; inset: -30px; z-index: -1; pointer-events: none; }
.vc-back img { width: 100%; height: 100%; object-fit: cover; filter: blur(26px) saturate(1.1); opacity: .28; }
.vc-incoming, .vc-call, .vc-over { position: absolute; inset: 0; }
.vc-incoming[hidden], .vc-call[hidden], .vc-over[hidden], .vc-q[hidden], .vc-cap[hidden] { display: none; }

/* аватар */
.vc-ava { position: relative; border-radius: 50%; display: grid; place-items: center; overflow: visible; flex: none;
  background: var(--mag-soft); color: var(--mag); border: 2px solid var(--mag-line); font-weight: 800; }
.vc-ava img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 30%; border-radius: 50%; display: block; }
.vc-ava-big { width: 128px; height: 128px; font-size: 52px; }
.vc-ava-call { width: clamp(130px, 30%, 210px); aspect-ratio: 1; font-size: clamp(52px, 9vw, 84px); transition: transform .3s ease; }
.vc-ava-end { width: 84px; height: 84px; font-size: 34px; opacity: .8; }
.vc-ava::before, .vc-ava::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--mag); opacity: 0; pointer-events: none; }

/* вхідний */
.vc-incoming { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; }
.vc-in-label { font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--mag); }
.vc-ring::before { animation: vc-wave 1.8s ease-out infinite; }
.vc-ring::after { animation: vc-wave 1.8s ease-out infinite .9s; }
.vc-in-name { font-size: 26px; font-weight: 800; margin-top: 8px; }
.vc-in-city { font-size: 14px; color: var(--ink-soft); margin-top: -6px; }
.vc-accept { margin-top: 18px; display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px 14px 16px; border: 0; border-radius: 999px; cursor: pointer;
  font: 800 16px var(--font); color: var(--surface); background: var(--ok); box-shadow: 0 5px 0 var(--depth-ok, var(--ok-line)), 0 10px 26px -10px var(--ok);
  animation: vc-nudge 2.4s ease-in-out infinite; transition: transform .12s; }
.vc-accept svg { width: 22px; height: 22px; fill: currentColor; }
.vc-accept:hover { transform: translateY(-1px); }
.vc-accept:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--depth-ok, var(--ok-line)); }
.vc-accept:focus-visible { outline: 3px solid var(--ok-line); outline-offset: 3px; }
:root[data-theme="dark"] .vc-accept { color: var(--on-solid); }

/* у дзвінку */
.vc-call { display: flex; flex-direction: column; }
.vc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px 0; }
.vc-id b { display: block; font-size: 17px; font-weight: 800; }
.vc-id span { font-size: 12.5px; color: var(--ink-soft); }
.vc-timer { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; font: 800 13px var(--font);
  font-variant-numeric: tabular-nums; background: linear-gradient(var(--surface), var(--surface)), var(--page); border: 1px solid var(--line); }
.vc-timer i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.vc-live .vc-timer i { animation: vc-dot 1.2s ease-in-out infinite; }
.vc-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 10px; min-height: 0; }
.vc-status { min-height: 18px; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.vc-speaking .vc-ava-call { transform: scale(1.03); }
.vc-speaking .vc-ava-call::before { animation: vc-wave 1.5s ease-out infinite; }
.vc-speaking .vc-ava-call::after { animation: vc-wave 1.5s ease-out infinite .75s; }
.vc-self { position: absolute; right: 16px; bottom: 86px; width: 92px; aspect-ratio: 3 / 4; border-radius: 14px; display: grid; place-items: center; align-content: center;
  gap: 4px; color: var(--ink-faint); background: linear-gradient(var(--surface), var(--surface)), var(--page); border: 1.5px solid var(--line-strong); box-shadow: var(--shadow-1); }
.vc-self svg { width: 34px; height: 34px; fill: currentColor; opacity: .7; }
.vc-self span { font-size: 11px; font-weight: 800; letter-spacing: .6px; }

/* живі субтитри */
.vc-cap { position: absolute; left: 50%; bottom: 86px; transform: translateX(-50%); width: min(560px, calc(100% - 140px)); padding: 8px 14px; border-radius: 12px;
  text-align: center; font-size: 15.5px; font-weight: 600; line-height: 1.4; color: var(--ink);
  background: linear-gradient(var(--surface), var(--surface)), var(--page); border: 1px solid var(--line-strong); box-shadow: var(--shadow-1); animation: vc-up .25s ease both; }

/* кнопки керування */
.vc-ctrls { display: flex; justify-content: center; gap: 14px; padding: 14px 16px 18px; }
.vc-btn { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; padding: 0; color: var(--ink);
  background: linear-gradient(var(--surface), var(--surface)), var(--page); border: 1.5px solid var(--line-strong); box-shadow: var(--shadow-1); transition: transform .12s, background-color .15s; }
.vc-btn svg { width: 22px; height: 22px; fill: currentColor; }
.vc-btn:hover:not(:disabled) { transform: translateY(-1px); }
.vc-btn:disabled { opacity: .38; cursor: default; }
.vc-btn:focus-visible { outline: 2px solid var(--mag); outline-offset: 2px; }
.vc-btn.vc-off { background: var(--ink); color: var(--page); border-color: var(--ink); }
.vc-btn.vc-off::after { content: ""; position: absolute; width: 26px; height: 2.5px; border-radius: 2px; background: currentColor; transform: rotate(-45deg); }
.vc-btn { position: relative; }
.vc-ccb.vc-on { background: var(--mag); color: var(--on-mag); border-color: var(--mag); }
.vc-end { background: var(--bad); color: var(--surface); border-color: var(--bad); }
:root[data-theme="dark"] .vc-end { color: var(--on-solid); }
.vc-end svg { transform: rotate(135deg); }
.vc-end.vc-nope { animation: cm-shake .38s ease; }

/* питання під час дзвінка */
.vc-q { position: absolute; z-index: 5; left: 50%; bottom: 84px; width: min(520px, calc(100% - 28px)); padding: 16px; border-radius: 20px;
  background: linear-gradient(var(--surface), var(--surface)), var(--page); border: 2px solid var(--mag-line); box-shadow: var(--shadow-2), var(--glow);
  transform: translate(-50%, 16px); opacity: 0; transition: transform .28s cubic-bezier(.2, .9, .3, 1.2), opacity .2s; }
.vc-q.vc-q-in { transform: translate(-50%, 0); opacity: 1; }
.vc-qh { font-size: 11px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; color: var(--mag); }
.vc-qq { font-size: 17px; font-weight: 800; margin: 4px 0 10px; line-height: 1.35; }
.vc-opts { display: grid; gap: 8px; }
.vc-opt { text-align: left; padding: 11px 14px; border-radius: 13px; cursor: pointer; font: 700 15px var(--font); color: var(--ink);
  background: var(--surface); border: 2px solid var(--line-strong); box-shadow: 0 3px 0 var(--depth, var(--line-strong)); transition: transform .12s, border-color .15s; }
.vc-opt:hover:not(:disabled) { border-color: var(--mag); transform: translateY(-1px); }
.vc-opt:focus-visible { outline: 2px solid var(--mag); outline-offset: 2px; }
.vc-opt:disabled { cursor: default; }
.vc-opt.right { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); box-shadow: 0 3px 0 var(--depth-ok, var(--ok-line)); animation: cm-pop .3s ease; opacity: 1; }
.vc-opt.wrong { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); box-shadow: none; animation: cm-shake .38s ease; }
.vc-fb { min-height: 18px; margin-top: 8px; font-size: 13px; color: var(--ink-soft); }

/* кінець дзвінка */
.vc-over { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 20px; animation: vc-up .3s ease both; }
.vc-over b { font-size: 20px; font-weight: 800; margin-top: 6px; }
.vc-dur { font-size: 13.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.vc-after { margin-top: 10px; }
.vc-bar { display: flex; gap: 10px; flex-wrap: wrap; }
.vc-subs-btn.vc-on { border-color: var(--mag); color: var(--mag); background: var(--mag-soft); }
.vc-subs { margin-top: 12px; display: grid; gap: 8px; padding: 14px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--line); animation: vc-up .25s ease both; }
.vc-subs[hidden] { display: none; }
.vc-line { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 15px; line-height: 1.45; }
.vc-line b { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--mag); overflow-wrap: anywhere; }

@keyframes vc-wave { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.45); } }
@keyframes vc-nudge { 0%, 70%, 100% { transform: none; } 76% { transform: rotate(-4deg); } 82% { transform: rotate(4deg); } 88% { transform: rotate(-2deg); } }
@keyframes vc-dot { 50% { opacity: .3; } }
@keyframes vc-up { from { opacity: 0; transform: translate(var(--vc-x, 0), 8px); } to { opacity: 1; transform: translate(var(--vc-x, 0), 0); } }
.vc-cap { --vc-x: -50%; }

@media (max-width: 560px) {
  .vc-screen { aspect-ratio: auto; min-height: 520px; border-radius: 22px; }
  .vc-ava-big { width: 108px; height: 108px; font-size: 44px; }
  .vc-self { width: 64px; right: 12px; top: 64px; bottom: auto; }
  .vc-cap { width: calc(100% - 28px); bottom: 82px; font-size: 14.5px; }
  .vc-ctrls { gap: 10px; }
  .vc-btn { width: 48px; height: 48px; }
  .vc-q { bottom: 78px; padding: 14px; }
  .vc-line { grid-template-columns: minmax(0, 1fr); gap: 1px; }
}

@media (prefers-reduced-motion: reduce) {
  .cm-panel, .cm-bubble, .cm-v, .cm-gap.cm-bad, .cm-panel.cm-wrong, .cm-gap.cm-sel:not(.cm-filled),
  .vc-ring::before, .vc-ring::after, .vc-speaking .vc-ava-call::before, .vc-speaking .vc-ava-call::after,
  .vc-accept, .vc-live .vc-timer i, .vc-cap, .vc-over, .vc-subs, .vc-opt.right, .vc-opt.wrong, .vc-end.vc-nope { animation: none; }
  .vc-speaking .vc-ava-call { transform: none; box-shadow: 0 0 0 4px var(--mag-line); }
  .vc-q { transition: none; }
}