/* ============================================================
   CONVERSA COM O AGENTE — Transbordo (rebrand, rodadas 11 e 12 · 10/10/2026)
   A pessoa "sobe" para o céu da marca e conversa com o Bordo, como numa ligação.
   Sem player à vista (nada de barra de tempo nem botão de play): a sensação é
   de fala ao vivo. Para pausar, a pessoa toca no Bordo.
   Substitui a esfera dourada em fundo preto (guardada em
   _prototipo/backup-2026-10-10-1745-antes-da-rodada-11/src-holograma/).
   Cores do guia: céu, branco e #1B1B1B. Sem dourado e sem brilho.
   O que se mexe com a voz usa --tbh-nivel (0 a 1), escrito pelo HologramModal.js.
   Prefixo das classes: tbh- (o tbv- é da dobra de vídeos, tb-vitrine.css; não misturar).
   ============================================================ */

.tb-holo-overlay {
  --tbh-mola: cubic-bezier(.34, 1.56, .64, 1);
  --tbh-suave: cubic-bezier(.16, 1, .3, 1);
  --tbh-lado: clamp(180px, 44vh, 400px); /* tamanho do mascote */

  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 16px max(22px, env(safe-area-inset-bottom));
  margin: 0;
  box-sizing: border-box;
  overflow: hidden;
  isolation: isolate;
  background: #3A97EE; /* azul do céu, enquanto a foto não chega */
  color: #fff;
  font-family: 'Uncut Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--tbh-suave), visibility .35s ease;
}
.tb-holo-overlay.is-active { opacity: 1; visibility: visible; }
.tb-holo-overlay *, .tb-holo-overlay *::before, .tb-holo-overlay *::after { box-sizing: border-box; }
/* :where() deixa este "zerar" sem peso: a regra de cada botão sempre ganha dele */
.tb-holo-overlay :where(button) { font: inherit; border: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tb-holo-overlay button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- o céu ---------- */
.tbh-ceu { position: absolute; inset: -5%; z-index: -1; pointer-events: none; }
.tbh-ceu img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.tb-holo-overlay.is-active .tbh-ceu { animation: tbhCeu 48s ease-in-out infinite alternate; }
@keyframes tbhCeu { from { transform: translateX(-2.2%); } to { transform: translateX(2.2%); } }

/* ---------- topo: onde a pessoa está + sair ---------- */
.tbh-topo {
  width: 100%; max-width: 1180px; flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.tbh-selo {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 18px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .04em; white-space: nowrap;
}
.tbh-selo i { width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.tb-holo-overlay.is-playing .tbh-selo i { animation: tbhPonto 1.6s ease-in-out infinite; }
@keyframes tbhPonto { 0%, 100% { transform: scale(.8); opacity: .6; } 50% { transform: scale(1.25); opacity: 1; } }
/* tempo de conversa, como no visor de uma ligação */
.tbh-relogio { padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .45); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.tbh-fechar {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 16px 11px 20px; border-radius: 999px;
  background: #fff; color: #1B1B1B; font-size: 14px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 14px 30px -10px rgba(10, 40, 100, .45);
  scale: 1; transition: scale .25s var(--tbh-mola);
}
.tbh-fechar:hover { scale: 1.06; }
.tbh-fechar:active { scale: .96; }
.tbh-fechar svg { display: block; }
.tb-holo-overlay .tbh-fechar:focus-visible { outline-color: #1B1B1B; }

/* ---------- a cena: o Bordo falando ---------- */
.tbh-cena {
  flex: 1; min-height: 0; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 8px 0 10px;
}
.tbh-palco {
  position: relative; flex: none; width: var(--tbh-lado); height: var(--tbh-lado);
  opacity: 0; transform: translateY(46px) scale(.8);
  transition: transform .75s var(--tbh-mola) .08s, opacity .3s ease .08s;
}
.tb-holo-overlay.is-active .tbh-palco { opacity: 1; transform: none; }

/* ondas da voz: três anéis que abrem conforme ele fala e quase somem no silêncio */
.tbh-onda {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  border: 1.5px solid #fff;
  scale: calc(var(--k) + var(--tbh-nivel, 0) * var(--g));
  opacity: calc(var(--o) + var(--tbh-nivel, 0) * var(--og));
  transition: scale .14s linear, opacity .14s linear;
}
.tbh-onda:nth-child(1) { --k: .98; --g: .10; --o: .26; --og: .34; }
.tbh-onda:nth-child(2) { --k: 1.16; --g: .16; --o: .13; --og: .27; }
.tbh-onda:nth-child(3) { --k: 1.34; --g: .24; --o: .05; --og: .19; }
/* enquanto a ligação conecta, os anéis chamam */
.tb-holo-overlay[data-estado="conectando"] .tbh-onda { animation: tbhChama 1.5s ease-out infinite; }
.tb-holo-overlay[data-estado="conectando"] .tbh-onda:nth-child(2) { animation-delay: .25s; }
.tb-holo-overlay[data-estado="conectando"] .tbh-onda:nth-child(3) { animation-delay: .5s; }
@keyframes tbhChama { 0% { opacity: .5; } 100% { opacity: 0; transform: scale(1.18); } }

/* o corpo balança com a voz. Tocar nele pausa e retoma a conversa */
.tbh-boneco {
  position: absolute; inset: 0; transform-origin: 50% 100%;
  translate: 0 calc(var(--tbh-nivel, 0) * -9px);
  scale: calc(1 + var(--tbh-nivel, 0) * .04);
  transition: translate .12s linear, scale .12s linear;
}
.tbh-boneco tb-mascote { display: block; --tbm-tamanho: var(--tbh-lado); color: #fff; }

/* balão: o que ele "diz" fora da fala (aumentar o som, pausa, fim) */
.tbh-balao {
  position: absolute; left: calc(100% - 26px); bottom: 68%;
  width: max-content; max-width: 250px; margin: 0;
  padding: 13px 18px; border-radius: 20px 20px 20px 6px;
  background: #fff; color: #1B1B1B;
  font-size: 15.5px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; text-align: left;
  text-wrap: balance;
  box-shadow: 0 18px 36px -16px rgba(10, 40, 100, .5);
  transform-origin: 0 100%; scale: .4; opacity: 0; pointer-events: none;
  transition: scale .45s var(--tbh-mola), opacity .2s ease;
}
.tbh-balao.is-on { scale: 1; opacity: 1; }

/* quem está falando, com as barrinhas da voz */
.tbh-quem {
  flex: none; display: inline-flex; align-items: center; gap: 11px;
  padding: 11px 20px 11px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .95); color: #1B1B1B;
  box-shadow: 0 12px 30px rgba(18, 52, 120, .16), 0 2px 6px rgba(0, 0, 0, .06);
  font-size: 15px; white-space: nowrap;
  opacity: 0; translate: 0 14px;
  transition: opacity .3s ease .3s, translate .6s var(--tbh-mola) .3s;
}
.tb-holo-overlay.is-active .tbh-quem { opacity: 1; translate: 0 0; }
.tbh-quem b { font-weight: 800; letter-spacing: -.01em; }
.tbh-quem > span:last-child { color: #6f6a62; font-weight: 600; padding-left: 11px; border-left: 1px solid #dcd8d0; }

/* cinco barrinhas que seguem a voz de verdade */
.tbh-eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; }
.tbh-eq i {
  width: 3px; height: 100%; border-radius: 2px; background: #1B1B1B;
  transform-origin: 50% 100%; transform: scaleY(var(--v, .2)); transition: transform .1s linear, background .2s ease;
}
.tb-holo-overlay:not(.is-playing) .tbh-eq i { transform: scaleY(.2); background: #b9b4ab; }

/* dica de como pausar: é um botão também (faz o mesmo que tocar no Bordo) */
.tbh-dica {
  flex: none; padding: 8px 16px; border-radius: 999px;
  background: transparent; color: #fff;
  font-size: 13.5px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  text-shadow: 0 1px 12px rgba(6, 60, 120, .45);
  opacity: 0; transition: opacity .4s ease .7s, background .2s ease;
}
.tb-holo-overlay.is-active .tbh-dica { opacity: .92; }
.tbh-dica:hover { background: rgba(255, 255, 255, .16); }

/* ---------- a oferta: aparece embaixo, na hora em que a fala chega nela ---------- */
.tb-holo-cta-wrap {
  flex: none; display: grid; place-items: center; width: 100%; min-height: 76px; /* lugar reservado: a cena não pula quando ela entra */
  opacity: 0; visibility: hidden; translate: 0 26px; scale: .9;
  transition: opacity .3s ease, translate .6s var(--tbh-mola), scale .6s var(--tbh-mola), visibility .3s ease;
}
.tb-holo-cta-wrap.is-visible { opacity: 1; visibility: visible; translate: 0 0; scale: 1; }
.tb-holo-cta-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 17px 28px 17px 32px; border-radius: 999px;
  background: #1B1B1B; color: #fff; font-size: 17px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap;
  box-shadow: 0 26px 46px -18px rgba(20, 24, 40, .7), 0 0 0 6px rgba(255, 255, 255, .7);
  scale: 1; transition: scale .25s var(--tbh-mola), background .2s ease;
}
.tb-holo-cta-wrap.is-visible .tb-holo-cta-btn { animation: tbhFlutua 3.8s ease-in-out .8s infinite; }
.tb-holo-cta-btn:hover { scale: 1.05; background: #000; }
.tb-holo-cta-btn:active { scale: .97; }
.tb-holo-cta-btn span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: #1B1B1B; font-size: 15px; }
@keyframes tbhFlutua { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }

/* sem leitura da voz (navegador sem Web Audio): as barrinhas se mexem em ciclo */
.tb-holo-overlay.sem-medidor.is-playing .tbh-eq i { animation: tbhEq 1s ease-in-out infinite; }
.tb-holo-overlay.sem-medidor.is-playing .tbh-eq i:nth-child(2) { animation-delay: -.3s; }
.tb-holo-overlay.sem-medidor.is-playing .tbh-eq i:nth-child(3) { animation-delay: -.6s; }
.tb-holo-overlay.sem-medidor.is-playing .tbh-eq i:nth-child(4) { animation-delay: -.15s; }
.tb-holo-overlay.sem-medidor.is-playing .tbh-eq i:nth-child(5) { animation-delay: -.45s; }
@keyframes tbhEq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }

/* ---------- celular ---------- */
@media (max-width: 720px) {
  .tb-holo-overlay { --tbh-lado: clamp(170px, 34vh, 290px); padding: 14px 12px max(16px, env(safe-area-inset-bottom)); }
  .tbh-selo { padding: 8px 14px; font-size: 12px; }
  .tbh-fechar { padding: 10px 14px 10px 16px; font-size: 13px; }
  .tbh-cena { gap: 14px; }
  .tbh-balao {
    left: 50%; bottom: calc(100% + 4px); translate: -50% 0; transform-origin: 50% 100%;
    max-width: min(280px, 84vw); border-radius: 20px; text-align: center; font-size: 14.5px;
  }
  .tbh-quem { font-size: 14px; padding: 10px 17px 10px 15px; }
  .tb-holo-cta-btn { font-size: 16px; padding: 16px 24px 16px 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .tb-holo-overlay.is-active .tbh-ceu,
  .tb-holo-overlay.is-playing .tbh-selo i,
  .tb-holo-overlay[data-estado="conectando"] .tbh-onda,
  .tb-holo-overlay.sem-medidor.is-playing .tbh-eq i,
  .tb-holo-cta-wrap.is-visible .tb-holo-cta-btn { animation: none; }
  .tbh-palco, .tbh-quem, .tb-holo-cta-wrap { transition: opacity .2s ease; transform: none; translate: 0 0; scale: 1; }
  .tbh-onda, .tbh-boneco { transition: none; translate: 0 0; }
  .tbh-onda { scale: var(--k, 1); }
  .tbh-boneco { scale: 1; }
}