/* Kobalski — o apresentador com IA (js/apresentador/). Cartão fixo embaixo, mobile-first (375 px),
   que recolhe na pílula "Achar música / Canta que eu acho" (21/10/2026; antes um botãozinho redondo só com o
   rosto, que ninguém sabia o que era). Usa os tokens do css/style.css (--magenta, --ciano, --ouro...). */

.vz {
  --vz-ouro: #ffc83d;
  --vz-ciano: #3de0ff;
  --vz-balao: #fff3d6;
  --vz-balao-texto: #1f0c38;
  --vz-cartao: rgba(24, 10, 44, 0.95);
  --vz-teclado: 0px;
  position: fixed;
  z-index: 45;
  left: 50%;
  bottom: calc(var(--safe-b, 0px) + 10px + var(--vz-teclado));
  transform: translateX(-50%);
  width: min(100%, 480px); /* a coluna do app no PC (máx. 480 px no meio) */
  padding: 0 calc(var(--safe-r, 0px) + 10px) 0 calc(var(--safe-l, 0px) + 10px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
  font-family: var(--sans, system-ui, sans-serif);
  color: var(--texto, #f6f1ff);
}
.vz > * { pointer-events: auto; }

/* espaço no fim da página: nada fica escondido atrás do cartão (dá pra rolar até o fim) */
body.vz-on #app { padding-bottom: calc(var(--safe-b, 0px) + 34px + var(--vz-h, 0px)); }
body.vz-on .toast { bottom: calc(var(--safe-b, 0px) + 22px + var(--vz-h, 0px)); }

/* ---------------------------------------------------------------- cartão aberto */
.vz-cartao {
  position: relative;
  width: 100%;
  margin-top: 30px; /* o boneco sai por cima da borda */
  padding: 10px 12px 12px;
  border-radius: 22px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 200, 61, 0.16) 0%, rgba(255, 200, 61, 0) 46%),
    radial-gradient(90% 80% at 100% 100%, rgba(61, 224, 255, 0.12) 0%, rgba(61, 224, 255, 0) 55%),
    var(--vz-cartao);
  border: 1px solid transparent;
  background-clip: padding-box;
  box-shadow:
    0 0 0 1px rgba(255, 200, 61, 0.28),
    0 18px 44px rgba(0, 0, 0, 0.55),
    0 0 36px rgba(255, 61, 154, 0.16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: vz-sobe 0.42s cubic-bezier(0.2, 0.9, 0.25, 1.15);
}
@keyframes vz-sobe {
  from { opacity: 0; transform: translateY(26px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

/* o apresentador: busto num holofote redondo, metade pra fora do cartão */
.vz-rosto {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  left: 8px;
  top: -34px;
  width: 86px;
  height: 86px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  /* o fundo escuro do ícone com um holofote dourado: o microfone de ouro salta dele */
  background: radial-gradient(circle at 50% 32%, #4a3a1c 0%, #241d24 46%, #0c0a10 100%);
  box-shadow:
    0 0 0 3px #1a0b2e,
    0 0 0 5px var(--vz-ouro),
    0 10px 26px rgba(0, 0, 0, 0.5),
    0 0 28px rgba(255, 200, 61, 0.35);
  transition: box-shadow 0.25s ease, transform 0.15s ease;
  touch-action: manipulation;
}
.vz-rosto:active { transform: scale(0.96); }
.vz-rosto svg { display: block; width: 100%; height: 100%; transform-origin: 50% 70%; }
/* o MASCOTE (js/apresentador/mascote.js): microfone de coroa com carinha. A boca abre com a voz
   (--mc-boca, 0..1, vem do JS; fechada = sorriso), os olhos piscam, a coroa balança de leve e, na
   zoeira (frase com ! ou ?), uma sobrancelha sobe */
.vz-mascote .mc-boca {
  transform-box: fill-box;
  transform-origin: 50% 0;
  transform: scaleY(calc(0.12 + var(--mc-boca, 0) * 0.88));
  opacity: 0;
}
.vz-mascote.mc-falando .mc-boca { opacity: 1; }
.vz-mascote.mc-falando .mc-sorriso { opacity: 0; }
.vz-mascote .mc-olhos { transform-box: fill-box; transform-origin: 50% 50%; }
.vz-mascote.mc-anim .mc-olhos { animation: mc-piscar 4.6s infinite; }
@keyframes mc-piscar { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
.vz-mascote .mc-coroa { transform-box: fill-box; transform-origin: 50% 100%; transform: rotate(-5deg); }
.vz-mascote.mc-anim .mc-coroa { animation: mc-coroa 3.4s ease-in-out infinite alternate; }
@keyframes mc-coroa { from { transform: rotate(-7deg); } to { transform: rotate(-2deg); } }
.vz-mascote .mc-sobrancelha { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 0.18s ease; }
.vz-zoeira .vz-mascote .mc-sobrancelha:last-child { transform: translateY(-1.6px) rotate(-12deg); }
@media (prefers-reduced-motion: reduce) {
  .vz-mascote.mc-anim .mc-olhos, .vz-mascote.mc-anim .mc-coroa { animation: none; }
}
.vz-rosto:focus-visible,
.vz-bolha:focus-visible,
.vz-icone:focus-visible,
.vz-mic:focus-visible,
.vz-enviar:focus-visible { outline: 2px solid var(--vz-ciano); outline-offset: 3px; }
.vz-falando .vz-rosto {
  box-shadow:
    0 0 0 3px #1a0b2e,
    0 0 0 5px var(--vz-ciano),
    0 10px 26px rgba(0, 0, 0, 0.5),
    0 0 34px rgba(61, 224, 255, 0.55);
}

.vz-topo {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-height: 32px;
  padding-left: 92px;
  margin-top: -4px;
}
.vz-nome {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.vz-nome b {
  background: linear-gradient(90deg, #ffe39a 0%, var(--vz-ouro) 45%, #ff9f3d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}
/* "no ar": três barrinhas que dançam enquanto ele fala */
.vz-noar { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; opacity: 0.35; transition: opacity 0.2s ease; }
.vz-noar i { display: block; width: 3px; height: 4px; border-radius: 2px; background: var(--vz-ciano); }
.vz-falando .vz-noar { opacity: 1; }
.vz-falando .vz-noar i { animation: vz-eq 0.62s ease-in-out infinite alternate; }
.vz-falando .vz-noar i:nth-child(2) { animation-delay: -0.24s; }
.vz-falando .vz-noar i:nth-child(3) { animation-delay: -0.42s; }
@keyframes vz-eq { from { height: 3px; } to { height: 12px; } }

.vz-icone {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--texto-2, rgba(246, 241, 255, 0.74));
  cursor: pointer;
  touch-action: manipulation;
}
.vz-icone:active { background: rgba(255, 255, 255, 0.08); }
/* "Som" e "Fechar": ícone COM palavra (só o ícone ninguém entendia) */
.vz-icone.vz-com-palavra {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  height: 46px;
  padding: 0 14px 0 11px;
  border: 1px solid var(--borda-2, rgba(255, 255, 255, 0.18));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--texto, #f6f1ff);
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.vz-icone.vz-com-palavra:active { background: rgba(255, 255, 255, 0.14); }
.vz-icone.vz-com-palavra svg { width: 18px; height: 18px; }
.vz-icone svg,
.vz-mic-ic svg,
.vz-enviar svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vz-som .vz-som-x { display: none; }
.vz-som.vz-mudo { color: var(--texto-3, rgba(246, 241, 255, 0.52)); }
.vz-som.vz-mudo .vz-som-onda { display: none; }
.vz-som.vz-mudo .vz-som-x { display: inline; }

/* ---------------------------------------------------------------- conversa */
/* a conversa não rola: o que rola é o TEXTO dentro do balão (a forma do balão nunca é cortada) */
.vz-conversa {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 4px 0 0 92px;
}
.vz-conversa > * { flex-shrink: 0; }
.vz-eu {
  align-self: flex-end;
  max-width: 92%;
  padding: 4px 10px;
  border-radius: 14px 14px 4px 14px;
  background: rgba(61, 224, 255, 0.14);
  border: 1px solid rgba(61, 224, 255, 0.3);
  color: #dff9ff;
  font-size: 0.84rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* a resposta chegou: o que a pessoa disse vira uma linha só (a fala dele ganha o espaço) */
.vz-eu.vz-eu-curto { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; font-size: 0.8rem; }
.vz-eu.vz-parcial { font-style: italic; color: rgba(223, 249, 255, 0.8); border-style: dashed; }
.vz-eu.vz-parcial::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--vermelho, #ff5c6c);
  vertical-align: 1px;
  animation: vz-pisca 0.9s ease-in-out infinite;
}
@keyframes vz-pisca { 50% { opacity: 0.25; } }

/* no camarim o cartão fica baixinho (o texto rola dentro do balão): o "Ir pro palco" continua à vista.
   O boneco sai menos por cima do cartão e, com os botões de música, quase nada (o círculo não sobe
   em cima do "Ir pro palco"); a fala com botões é curta e cabe em ~4 linhas */
.vz[data-tela="camarim"] .vz-cartao { margin-top: 18px; }
.vz[data-tela="camarim"] .vz-rosto { top: -22px; }
.vz[data-tela="camarim"] .vz-dica { top: 70px; }
.vz[data-tela="camarim"] .vz-fala { max-height: 84px; }
.vz[data-tela="camarim"].vz-com-opcoes .vz-cartao { margin-top: 6px; }
.vz[data-tela="camarim"].vz-com-opcoes .vz-rosto { top: -6px; }
.vz[data-tela="camarim"].vz-com-opcoes .vz-dica { top: 84px; }
.vz[data-tela="camarim"].vz-com-opcoes .vz-fala { max-height: 80px; }

/* o balão de fala: papel claro, ponta apontando pro boneco. O texto rola por dentro (sem barra) */
.vz-balao {
  position: relative;
  padding: 7px 4px 7px 12px;
  border-radius: 4px 16px 16px 16px;
  background: var(--vz-balao);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}
.vz-fala {
  position: relative;
  margin: 0;
  padding-right: 8px;
  min-height: 2.6em;
  max-height: 96px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  color: var(--vz-balao-texto);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.34;
  overflow-wrap: anywhere;
}
.vz-fala::-webkit-scrollbar { display: none; }
/* tem texto escondido em cima/embaixo: esmaece só o TEXTO (avisa que dá pra rolar) */
.vz-fala.vz-mais-cima {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14px);
}
.vz-fala.vz-mais-baixo {
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 16px);
  mask-image: linear-gradient(to top, transparent 0, #000 16px);
}
.vz-fala.vz-mais-cima.vz-mais-baixo {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 16px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 16px), transparent 100%);
}
.vz-fala:empty::after { content: '\00a0'; }
/* com som: a frase que ele está falando fica acesa, as próximas esperam a voz */
.vz-fala .vz-depois { opacity: 0.45; transition: opacity 0.25s ease; }
.vz-fala .vz-marca { display: inline-block; width: 0; height: 1em; vertical-align: -2px; }

/* ---------------------------------------------------------------- botões das músicas que ele ofereceu */
/* uma linha só, que rola de lado se não couber (o cartão não cresce): abaixo do boneco, largura toda */
.vz-opcoes {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 8px -12px 0 0;
  padding: 2px 12px 2px 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.vz-opcoes::-webkit-scrollbar { display: none; }
.vz-opcoes.vz-rola {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}
.vz-opcao {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 72%;
  min-height: 34px;
  padding: 5px 12px 5px 9px;
  border: 1px solid rgba(61, 224, 255, 0.55);
  border-radius: 999px;
  background: rgba(61, 224, 255, 0.12);
  color: #dff9ff;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.15;
  cursor: pointer;
  touch-action: manipulation;
  animation: vz-pop 0.3s cubic-bezier(0.2, 0.9, 0.25, 1.3) both;
  transition: background 0.15s ease, transform 0.12s ease;
}
.vz-opcao:nth-child(2) { animation-delay: 0.06s; }
.vz-opcao:nth-child(3) { animation-delay: 0.12s; }
.vz-opcao:active { transform: scale(0.96); background: rgba(61, 224, 255, 0.24); }
.vz-opcao:focus-visible { outline: 2px solid var(--vz-ciano); outline-offset: 2px; }
.vz-opcao-ic { flex: none; color: var(--vz-ouro); font-size: 0.72rem; }
/* o papel da música na fala ("estourando", "das antigas"): selo pequeno antes do título */
.vz-opcao-etq {
  flex: none;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 200, 61, 0.18);
  color: var(--vz-ouro);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.vz-opcao-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.vz-fala.vz-escrevendo::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  background: currentColor;
  vertical-align: -2px;
  animation: vz-pisca 0.8s steps(2, start) infinite;
}
/* pensando: três pontinhos pulando */
.vz-fala.vz-pensando { display: flex; align-items: center; gap: 5px; min-height: 2.6em; }
.vz-fala.vz-pensando::before,
.vz-fala.vz-pensando::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7a4fd6;
  animation: vz-ponto 0.9s ease-in-out infinite;
}
.vz-fala.vz-pensando::after { animation-delay: 0.3s; margin-left: 13px; box-shadow: -13px 0 0 #a86bff; }
@keyframes vz-ponto { 0%, 100% { transform: translateY(0); opacity: 0.55; } 40% { transform: translateY(-5px); opacity: 1; } }

.vz-dica {
  position: absolute;
  left: 2px;
  top: 58px;
  width: 98px;
  color: var(--vz-ouro);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-align: center;
  pointer-events: none;
  animation: vz-pisca 2.4s ease-in-out infinite;
}

/* ---------------------------------------------------------------- controles */
/* duas linhas (maquete aprovada 21/10): o "Toca aqui e canta" grande na linha toda e o "Ou escreve aqui…" embaixo.
   Digitando, o microfone vira só o ícone ao lado do campo (uma linha) */
.vz-controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.vz-mic {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 58px;
  min-width: 46px;
  padding: 0 20px 0 7px;
  border: 0;
  border-radius: 999px;
  background: var(--grad-primario, linear-gradient(135deg, #ff3d9a 0%, #c43dff 100%));
  color: #fff;
  font: inherit;
  font-size: 19px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 8px 22px rgba(255, 61, 154, 0.32);
  transition: transform 0.12s ease, background 0.2s ease;
}
.vz-mic:active { transform: scale(0.97); }
.vz-mic-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); }
.vz-mic-ic svg { width: 24px; height: 24px; stroke-width: 2.3; }
/* (o rótulo centralizado no espaço que sobra: o círculo do ícone fica na ponta, como na maquete) */
.vz-mic-rotulo { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* convite: um anel que respira em volta do microfone */
.vz-mic::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid rgba(255, 61, 154, 0.55);
  opacity: 0;
  pointer-events: none;
  animation: vz-convite 2.6s ease-out infinite;
}
@keyframes vz-convite {
  0% { opacity: 0.85; transform: scale(0.98); }
  70%, 100% { opacity: 0; transform: scale(1.08, 1.3); }
}
.vz-ouvindo .vz-mic {
  background: linear-gradient(135deg, #ff5c6c 0%, #ff3d9a 100%);
  box-shadow: 0 0 0 4px rgba(255, 92, 108, 0.25), 0 8px 26px rgba(255, 92, 108, 0.45);
}
.vz-ouvindo .vz-mic::after { border-color: rgba(255, 92, 108, 0.8); animation-duration: 1.1s; }
.vz-ouvindo .vz-mic-ic { animation: vz-pisca 1s ease-in-out infinite; }
.vz-falando .vz-mic::after { animation: none; }

.vz-form { position: relative; display: flex; flex: 1 1 100%; min-width: 0; }
.vz-texto {
  flex: 1;
  min-width: 0;
  height: 50px;
  padding: 0 12px 0 14px;
  border: 1px solid var(--borda-2, rgba(255, 255, 255, 0.18));
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--texto, #f6f1ff);
  font: inherit;
  font-size: 16px; /* 16 px: o iOS não dá zoom ao focar */
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.vz-texto::placeholder { color: var(--texto-3, rgba(246, 241, 255, 0.52)); }
.vz-texto:focus { border-color: rgba(61, 224, 255, 0.65); background: rgba(255, 255, 255, 0.09); }
.vz-enviar {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  right: 6px;
  top: 6px;
  display: none;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 11px;
  background: var(--vz-ciano);
  color: #0b0614;
  cursor: pointer;
  touch-action: manipulation;
}
.vz-enviar svg { stroke-width: 2.6; }
.vz-enviar:active { transform: scale(0.94); }

/* digitando (ou sem microfone): o campo ganha a linha, o microfone vira só o ícone */
.vz-digitando .vz-mic { flex: 0 0 50px; width: 50px; height: 50px; padding: 0; }
.vz-digitando .vz-mic-ic { background: none; }
.vz-digitando .vz-mic-rotulo { display: none; }
.vz-digitando .vz-form { flex: 1 1 0; }
.vz-digitando .vz-texto,
.vz-so-texto .vz-texto { padding-right: 48px; }
.vz-digitando .vz-enviar,
.vz-so-texto .vz-enviar { display: grid; }

.vz-anuncio {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- estados */
/* cochilo (servidor fora / sem sessão) e verificando: sem microfone nem campo */
.vz[data-disponivel="fora"] .vz-rosto,
.vz[data-disponivel="sem-sessao"] .vz-rosto,
.vz[data-disponivel="fora"] .vz-bolha-rosto,
.vz[data-disponivel="sem-sessao"] .vz-bolha-rosto { filter: grayscale(0.75) brightness(0.8); }
.vz[data-disponivel="fora"] .vz-balao,
.vz[data-disponivel="sem-sessao"] .vz-balao {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}
.vz[data-disponivel="fora"] .vz-fala,
.vz[data-disponivel="sem-sessao"] .vz-fala {
  color: var(--texto-2, rgba(246, 241, 255, 0.74));
  font-weight: 600;
}
.vz[data-disponivel="fora"] .vz-rosto::after,
.vz[data-disponivel="sem-sessao"] .vz-rosto::after {
  content: 'z Z';
  position: absolute;
  right: 10px;
  top: 8px;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  animation: vz-zz 2.4s ease-in-out infinite;
}
@keyframes vz-zz { 0%, 100% { transform: translateY(2px); opacity: 0.6; } 50% { transform: translateY(-4px); opacity: 1; } }
.vz[data-disponivel="verificando"] .vz-fala { opacity: 0.8; }

/* ---------------------------------------------------------------- recolhido: a pílula "Achar música" */
/* (21/10/2026, maquete ensinar-apresenta/bolinha) o rosto + a PALAVRA: "Achar música / Canta que eu acho".
   Tocar abre o cartão com o "Toca aqui e canta". No palco ela volta a ser só a bolinha do rosto, no canto de
   cima (lá embaixo fica o Cantar e no meio a pista; a pílula cobriria o título) */
.vz-bolha {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  max-width: 100%;
  padding: 6px 18px 6px 6px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: var(--grad-primario, linear-gradient(135deg, #ff3d9a 0%, #c43dff 100%));
  color: #fff;
  font: inherit;
  text-align: left;
  box-shadow: 0 0 0 4px rgba(255, 61, 154, 0.18), 0 14px 30px rgba(255, 61, 154, 0.45), 0 4px 10px rgba(0, 0, 0, 0.5);
  touch-action: manipulation;
  animation: vz-pop 0.38s cubic-bezier(0.2, 0.9, 0.25, 1.3);
}
@keyframes vz-pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
.vz-bolha:active { transform: scale(0.96); }
.vz-bolha-cara { position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%; }
/* o aro dourado por cima do rosto (o desenho cobre o fundo, então o aro mora num ::after) */
.vz-bolha-cara::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255, 224, 138, 0.85);
  pointer-events: none;
}
.vz-bolha-rosto {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 32%, #4a3a1c 0%, #241d24 46%, #0c0a10 100%);
}
.vz-bolha-rosto svg { display: block; width: 100%; height: 100%; }
/* o anel colorido gira só enquanto ele fala (com a pílula recolhida) */
.vz-bolha-anel {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--magenta, #ff3d9a), var(--vz-ciano), var(--vz-ouro), var(--magenta, #ff3d9a));
  -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 3px), #000 calc(50% - 2.5px));
  mask: radial-gradient(circle, transparent 0 calc(50% - 3px), #000 calc(50% - 2.5px));
  opacity: 0;
  pointer-events: none;
}
.vz-falando .vz-bolha-anel { opacity: 1; animation: vz-gira 1.6s linear infinite; }
.vz-bolha-txt { display: flex; flex-direction: column; min-width: 0; }
.vz-bolha-txt b { font-size: 18px; font-weight: 900; line-height: 1.12; white-space: nowrap; }
.vz-bolha-txt small {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.94);
  white-space: nowrap;
}
.vz-bolha-txt small svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
/* escrevendo na busca do catálogo com o teclado do celular aberto: a pílula sai da frente dos resultados (index.js) */
.vz.vz-sai-da-frente:not(.vz-aberto) .vz-bolha,
.vz.vz-sai-da-frente:not(.vz-aberto) .vz-previa { display: none; }
@keyframes vz-gira { to { transform: rotate(360deg); } }

/* a fala aparecendo ao lado do botãozinho (ele recolhido também conversa) */
.vz-previa {
  position: relative;
  max-width: min(300px, calc(100vw - 40px));
  margin-right: 8px;
  padding: 9px 13px;
  border-radius: 16px 16px 4px 16px;
  background: var(--vz-balao);
  color: var(--vz-balao-texto);
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.32;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  animation: vz-sobe 0.3s ease-out;
}

/* no palco, recolhido: canto de cima, ao lado do título (rola junto com a página). Embaixo fica o
   Cantar e no meio a pista: nenhum dos dois pode ficar atrás dele */
.vz.vz-no-topo {
  position: absolute;
  top: calc(var(--safe-t, 0px) + 14px);
  bottom: auto;
}
.vz.vz-no-topo .vz-bolha {
  order: -1;
  width: 48px;
  height: 48px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #ffe9a8 0%, var(--vz-ouro) 40%, #b0457a 100%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55), 0 0 22px rgba(255, 200, 61, 0.35);
}
.vz.vz-no-topo .vz-bolha-cara { position: absolute; inset: 4px; width: auto; height: auto; }
.vz.vz-no-topo .vz-bolha-cara::after { display: none; }
.vz.vz-no-topo .vz-bolha-txt { display: none; }
/* no palco a prévia mora AO LADO da bolha (em cima do título, não do aviso do fone), estreita e curta
   (2 linhas, some em 3,5 s) */
.vz.vz-no-topo { flex-direction: row-reverse; align-items: flex-start; }
.vz.vz-no-topo .vz-previa {
  max-width: min(230px, calc(100vw - 150px));
  margin: 2px 0 0;
  padding: 7px 11px;
  border-radius: 16px 4px 16px 16px;
  font-size: 0.84rem;
  -webkit-line-clamp: 2;
}
body.vz-corpo-no-topo #tela-palco > .topo { padding-right: 54px; }
/* no palco, ABERTO (à mão, ou quando ele oferece músicas): o cartão mora em cima, fixo. Embaixo fica o
   Cantar (e o pé da pista), sempre à vista; em cima ele cobre só o título e o aviso do fone */
.vz.vz-palco-aberto {
  top: calc(var(--safe-t, 0px) + 4px);
  bottom: auto;
}
.vz.vz-palco-aberto .vz-cartao { margin-top: 26px; }
.vz.vz-palco-aberto .vz-fala { max-height: 84px; }
@media (min-width: 720px) {
  .vz.vz-no-topo { top: calc(var(--safe-t, 0px) + 32px); }
}

/* camarim no PC (>= 900 px, css/camarim.css: cena à esquerda, CTA + mural à direita): o cartão mora
   embaixo da coluna da direita, sem tapar a cena */
@media (min-width: 900px) {
  .vz[data-tela="camarim"] {
    left: auto;
    right: calc((100% - min(100%, 1160px)) / 2 + 16px + var(--safe-r, 0px));
    transform: none;
    width: calc((min(100%, 1160px) - 64px) / 2.15);
    padding: 0;
  }
  .vz[data-tela="camarim"] .vz-fala,
  .vz[data-tela="camarim"].vz-com-opcoes .vz-fala { max-height: 120px; }
  .vz[data-tela="camarim"].vz-com-opcoes .vz-cartao { margin-top: 18px; }
  .vz[data-tela="camarim"].vz-com-opcoes .vz-rosto { top: -22px; }
  .vz[data-tela="camarim"].vz-com-opcoes .vz-dica { top: 70px; }
}

/* ---------------------------------------------------------------- o "Cantar" chamado pelo Kobalski */
.vz-chamando {
  position: relative;
  animation: vz-chama 1.25s ease-in-out infinite;
}
.vz-chamando::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: calc(var(--raio-btn, 14px) + 5px);
  border: 2px solid var(--vz-ouro, #ffc83d);
  pointer-events: none;
  animation: vz-chama-anel 1.25s ease-out infinite;
}
@keyframes vz-chama {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(255, 200, 61, 0); }
  50% { transform: scale(1.03); box-shadow: 0 0 30px rgba(255, 200, 61, 0.55); }
}
@keyframes vz-chama-anel {
  0% { opacity: 0.95; transform: scale(0.98); }
  100% { opacity: 0; transform: scale(1.06, 1.25); }
}

@media (prefers-reduced-motion: reduce) {
  .vz-cartao, .vz-bolha, .vz-previa, .vz-opcao { animation: none; }
  .vz-mic::after, .vz-chamando, .vz-chamando::after, .vz-falando .vz-bolha-anel, .vz-falando .vz-noar i { animation: none; }
}

/* escutando: o microfone ganha a linha toda (o texto parcial aparece no balão da pessoa) */
.vz-ouvindo .vz-form { display: none; }
.vz-ouvindo .vz-mic { flex: 1; }

/* ---------------------------------------------------------------- "tipo Alexa": o ouvido */
/* o botão do ouvido (Chamar pela voz). Honesto: riscado = desligado; ligado mas sem ouvir agora = só o
   contorno; aceso (ciano) = esperando o nome; pulsando (magenta) = ouvindo o pedido */
.vz-ouvido { position: relative; color: var(--texto-3, rgba(246, 241, 255, 0.52)); transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; }
.vz-ouvido .vz-ouvido-onda { display: none; }
.vz-ouvido .vz-ouvido-x { display: inline; }
.vz.vz-chamar .vz-ouvido .vz-ouvido-x { display: none; }
.vz.vz-chamar .vz-ouvido { color: var(--texto-2, rgba(246, 241, 255, 0.74)); }
.vz[data-ouvido="nome"] .vz-ouvido,
.vz[data-ouvido="pedido"] .vz-ouvido { color: var(--vz-ciano); background: rgba(61, 224, 255, 0.12); box-shadow: 0 0 0 1px rgba(61, 224, 255, 0.45), 0 0 14px rgba(61, 224, 255, 0.3); }
.vz[data-ouvido="nome"] .vz-ouvido .vz-ouvido-onda,
.vz[data-ouvido="pedido"] .vz-ouvido .vz-ouvido-onda { display: inline; }
.vz[data-ouvido="pedido"] .vz-ouvido {
  color: #fff;
  background: rgba(255, 61, 154, 0.3);
  animation: vz-ouvido-pulsa 1s ease-in-out infinite;
}
@keyframes vz-ouvido-pulsa {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 61, 154, 0.75), 0 0 0 0 rgba(255, 61, 154, 0.5); }
  60% { box-shadow: 0 0 0 1px rgba(255, 61, 154, 0.95), 0 0 0 8px rgba(255, 61, 154, 0); }
}
.vz-ouvido:focus-visible { outline: 2px solid var(--vz-ciano); outline-offset: 3px; }
/* 1a visita (no computador, onde dá pra ouvir direto): o ouvido ganha um rótulo, senão ninguém acha */
.vz-ouvido-dica {
  appearance: none;
  flex: none;
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid rgba(61, 224, 255, 0.5);
  border-radius: 999px;
  background: rgba(61, 224, 255, 0.1);
  color: var(--vz-ciano);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}
.vz-ouvido-dica:hover { background: rgba(61, 224, 255, 0.18); }
.vz-ouvido-dica:focus-visible { outline: 2px solid var(--vz-ciano); outline-offset: 2px; }
.vz-ouvido-dica[hidden] { display: none; }

/* recolhido: um selinho do ouvido na bolinha (aceso/pulsando igual ao botão) */
.vz-bolha-ouvido {
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #12071f;
  color: var(--vz-ciano);
  box-shadow: 0 0 0 2px var(--vz-ciano), 0 2px 6px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.vz-bolha-ouvido svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.vz-bolha-ouvido .vz-ouvido-onda,
.vz-bolha-ouvido .vz-ouvido-x { display: none; }
.vz[data-ouvido="nome"] .vz-bolha-ouvido,
.vz[data-ouvido="pedido"] .vz-bolha-ouvido { display: grid; }
.vz[data-ouvido="pedido"] .vz-bolha-ouvido { color: #fff; background: #ff3d9a; box-shadow: 0 0 0 2px #ff3d9a; animation: vz-pisca 0.9s ease-in-out infinite; }
.vz.vz-no-topo .vz-bolha-ouvido { right: -6px; bottom: -6px; width: 20px; height: 20px; }

/* ouvindo o pedido sem o toque (chamou pelo nome / conversa solta): o microfone acende de leve,
   o campo de texto continua à mão */
.vz[data-ouvido="pedido"]:not(.vz-ouvindo) .vz-mic { box-shadow: 0 0 0 3px rgba(255, 92, 108, 0.28), 0 8px 22px rgba(255, 61, 154, 0.32); }

/* dica curta (uma vez): fone */
.vz-aviso {
  margin: 2px 0 0 92px;
  color: var(--vz-ouro);
  font-size: 0.74rem;
  font-weight: 750;
  line-height: 1.25;
  animation: vz-sobe 0.3s ease-out;
}

/* "Comandos durante a música (beta)": só no palco, com o Chamar pela voz ligado */
.vz-beta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
  color: var(--texto-2, rgba(246, 241, 255, 0.74));
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.vz-beta input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--vz-ciano); cursor: pointer; }
.vz-beta small { color: var(--texto-3, rgba(246, 241, 255, 0.52)); font-weight: 700; }

/* cantando com o beta: chip pequeno no canto de cima (o cartão some; o chip diz que ele ainda ouve) */
.vz-ouvido-canto {
  position: fixed;
  z-index: 46;
  left: calc(var(--safe-l, 0px) + 10px);
  top: calc(var(--safe-t, 0px) + 10px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100vw - 120px);
  padding: 4px 10px 4px 6px;
  border-radius: 999px;
  background: rgba(18, 7, 31, 0.86);
  box-shadow: 0 0 0 1px rgba(61, 224, 255, 0.5), 0 6px 16px rgba(0, 0, 0, 0.45);
  color: #dff9ff;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.vz-ouvido-canto-ic { display: grid; place-items: center; width: 18px; height: 18px; color: var(--vz-ciano); }
.vz-ouvido-canto-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vz-ouvido-canto-ic .vz-ouvido-x { display: none; }
.vz-ouvido-canto.vz-ouvido-canto-ok { box-shadow: 0 0 0 1px var(--vz-ouro), 0 0 18px rgba(255, 200, 61, 0.45); color: var(--vz-ouro); }
/* janela estreita (o ouvido contínuo só liga no computador, mas a janela pode ser fina): só o ícone */
@media (max-width: 560px) {
  .vz-ouvido-canto { left: calc(var(--safe-l, 0px) + 4px); top: calc(var(--safe-t, 0px) + 4px); padding: 3px; }
  .vz-ouvido-canto [data-vz="chip-txt"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  .vz[data-ouvido="pedido"] .vz-ouvido, .vz[data-ouvido="pedido"] .vz-bolha-ouvido { animation: none; }
}

/* celular estreito: o "Me chama pela voz" não cabe junto do nome (as letras se misturavam). O rosto já
   diz quem é, então o nome sai enquanto o botão está à vista; e o nome nunca vaza pra fora do espaço. */
.vz-nome { overflow: hidden; }
.vz-nome b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* (21/10) com o "Som" e o "Fechar" escritos, o nome não cabe junto no celular: sai (o rosto e a pílula já dizem
   quem é); com o "Me chama pela voz" à vista, sai em qualquer largura */
.vz-topo:has(> .vz-ouvido-dica:not([hidden])) .vz-nome { display: none; }
@media (max-width: 440px) {
  .vz-nome { display: none; }
}
/* o "Me chama pela voz" faz o mesmo que o ouvido (liga o "chamar pela voz"): com o Som e o Fechar escritos não
   cabem os dois, então o ouvido sai enquanto o botão está à vista (antes, só abaixo de 380 px). E se ainda assim
   faltar espaço (janela fina no computador), a fileira quebra em vez de vazar pra fora do cartão. */
.vz-topo:has(> .vz-ouvido-dica:not([hidden])) > .vz-ouvido { display: none; }
.vz-topo { flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 440px) {
  .vz-ouvido-dica { order: 9; } /* (janela fina) o Som e o Fechar ficam juntos em cima; o "Me chama pela voz" embaixo */
}