/* ============ VOICE PAGE: two halves, each with its own mic (tokens come from style.css) ============ */
body.voice-page { overflow: hidden; }
.vt { display: flex; flex-direction: column; height: 100dvh; }
.vside { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 14px var(--pad); }
/* The Korean half faces the person across the table */
.vside--ko { transform: rotate(180deg); background: #eef3fa; }
.vside--en { background: var(--surface); border-top: 1px solid var(--border); padding-bottom: max(14px, env(safe-area-inset-bottom)); }

.vhead { display: flex; align-items: center; gap: 8px; }
.vlang { margin-right: auto; color: var(--muted); font-size: 14px; font-weight: 700; }
.vside--en .vhead .btn:first-child { margin-right: auto; text-decoration: none; display: inline-flex; align-items: center; color: inherit; }

/* What the other person said, translated for this half: the biggest text on it */
.vmsg { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; justify-content: center; }
.vmain { font-size: clamp(26px, 7.5vw, 44px); font-weight: 700; line-height: 1.2; word-break: keep-all; overflow-wrap: anywhere; }
.vmain.is-hint { color: var(--muted); font-size: 17px; font-weight: 500; line-height: 1.45; }
.vorig { margin-top: 6px; color: var(--muted); font-size: 15px; overflow-wrap: anywhere; }
.vorig:empty { display: none; }
/* Words appearing live while this half's person is speaking */
.vlive { min-height: 1.4em; color: var(--accent); font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }

/* The mic: round (like a record button), big enough for a thumb */
.vmic-wrap { display: flex; align-items: center; gap: 14px; }
.vmic {
  flex: none; width: 76px; height: 76px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: var(--primary); color: #fff;
}
.vmic svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vmic[aria-pressed="true"] { background: var(--accent); }
.vmic:disabled { opacity: 0.4; }
.vstatus { color: var(--text); font-size: 16px; font-weight: 600; }
.vstatus.is-error { color: var(--negative); }

@media (prefers-reduced-motion: no-preference) {
  /* A ring spreads from the mic while it listens */
  .vmic[aria-pressed="true"] { animation: listen 1.4s ease-out infinite; }
  @keyframes listen { 0% { box-shadow: 0 0 0 0 rgba(11, 79, 168, 0.45); } 100% { box-shadow: 0 0 0 18px rgba(11, 79, 168, 0); } }
}
@media (max-height: 700px) {
  .vmic { width: 64px; height: 64px; }
  .vmain { font-size: 24px; }
}