/* "Veja funcionando": texto ao lado de um card escuro em vidro em que três conversas acontecem
   uma depois da outra (agendamento, confirmação no dia e pós-consulta), mensagem por mensagem;
   a IA mostra "digitando" antes de responder.
   Sem JavaScript ou com movimento reduzido, as três conversas aparecem inteiras, uma embaixo da outra. */

.cena { --ease: cubic-bezier(.22, 1, .36, 1); display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 460px); align-items: center; gap: clamp(40px, 6vw, 96px); }
.cena__texto .rotulo { margin-bottom: 18px; }
.cena__texto h2 { max-width: 560px; }
.cena__texto p { max-width: 500px; margin-top: 20px; font-size: 1.12rem; line-height: 1.6; color: var(--cinza-escuro); }
.cena__texto .pilula { margin-top: 30px; }

/* ---------- o card ---------- */
.vc-palco { width: 100%; will-change: transform; }
.vc { position: relative; isolation: isolate; overflow: hidden; padding: 20px 18px 18px; border-radius: 28px; color: var(--osso);
  background:
    radial-gradient(110% 70% at 100% 0%, rgba(25,183,166,.34), rgba(25,183,166,0) 58%),
    radial-gradient(90% 60% at 0% 100%, rgba(14,127,115,.42), rgba(14,127,115,0) 62%),
    linear-gradient(165deg, #10191B 0%, #070C0D 70%);
  border: 1px solid rgba(127,227,214,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 60px rgba(25,183,166,.08), 0 50px 90px -40px rgba(5,9,10,.6), 0 30px 80px -30px rgba(25,183,166,.45); }
/* borda de luz */
.vc::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(127,227,214,.85), rgba(255,255,255,0) 34%, rgba(255,255,255,0) 66%, rgba(25,183,166,.6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
/* brilho que passeia devagar atrás das mensagens */
.vc::after { content: ""; position: absolute; z-index: -1; left: 30%; top: 25%; width: 70%; height: 55%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(25,183,166,.22), rgba(25,183,166,0) 65%); filter: blur(30px); animation: vc-luz 14s ease-in-out infinite alternate; }
@keyframes vc-luz { to { transform: translate(-45%, 35%) scale(1.2); } }

.vc__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: .8rem; font-weight: 500; color: rgba(243,242,237,.86); }
.vc__vivo { display: inline-flex; align-items: center; gap: 10px; }
.vc__vivo i { width: 8px; height: 8px; border-radius: 50%; background: var(--teal-claro); box-shadow: 0 0 14px 2px rgba(127,227,214,.8); animation: vc-pisca 2.2s ease-in-out infinite; }
@keyframes vc-pisca { 50% { opacity: .35; } }
.vc__chip { flex: none; padding: 4px 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; font-family: var(--mono); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cinza); }

/* etapas da jornada (só aparecem com a animação) */
.vc__etapas { display: none; gap: 6px; margin: -4px 0 16px; padding: 0; list-style: none; }
.vc__etapas li { flex: 1; padding: 6px 4px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; font-family: var(--mono); font-size: .54rem; letter-spacing: .12em; text-align: center; text-transform: uppercase; color: rgba(243,242,237,.45); transition: color .4s ease, border-color .4s ease, background-color .4s ease; }
.vc__etapas li.ativa { border-color: rgba(127,227,214,.55); background: rgba(25,183,166,.16); color: var(--teal-claro); }
.vc__titulo { transition: opacity .3s ease; }
.vc__titulo.trocando { opacity: 0; }

/* sem animação: as três conversas, uma embaixo da outra */
.vc__conversas { display: grid; gap: 18px; }
.vc__conversa + .vc__conversa { padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08); }
.vc__quando { margin: 0 2px 10px; font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-claro); }

.vc__chat { display: grid; gap: 8px; align-content: start; }
.vc__msg { position: relative; max-width: 84%; padding: 10px 14px; border-radius: 18px; font-size: .88rem; line-height: 1.42; }
.vc__msg--p { justify-self: start; border-bottom-left-radius: 6px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.09); color: rgba(243,242,237,.94); }
.vc__msg--ia { justify-self: end; border-bottom-right-radius: 6px; color: var(--tinta); font-weight: 500; background: linear-gradient(110deg, var(--teal-claro), var(--teal) 72%); box-shadow: 0 10px 30px -12px rgba(25,183,166,.85); }
/* quando muda quem fala, um respiro a mais */
.vc__msg--p + .vc__msg--ia, .vc__msg--ia + .vc__msg--p { margin-top: 4px; }
.vc__txt { display: block; }
.vc__dig { position: absolute; left: 14px; top: 50%; display: none; gap: 5px; transform: translateY(-50%); }
.vc__dig i { width: 6px; height: 6px; border-radius: 50%; background: var(--tinta); animation: vc-ponto 1s ease-in-out infinite; }
.vc__dig i:nth-child(2) { animation-delay: .15s; }
.vc__dig i:nth-child(3) { animation-delay: .3s; }
@keyframes vc-ponto { 0%, 100% { transform: translateY(0); opacity: .35; } 50% { transform: translateY(-3px); opacity: .9; } }

.vc__ok { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: rgba(25,183,166,.12); border: 1px solid rgba(127,227,214,.34); box-shadow: inset 0 0 30px rgba(25,183,166,.1), 0 0 40px -10px rgba(25,183,166,.6); }
.vc__ok-ponto { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--teal-claro); box-shadow: 0 0 0 5px rgba(127,227,214,.16), 0 0 16px rgba(127,227,214,.9); }
.vc__ok strong { display: block; font-size: .88rem; font-weight: 500; }
.vc__ok small { display: block; margin-top: 3px; font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cinza); }

/* ---------- movimento (o chat.js liga .vc--anim e as classes de cada etapa) ---------- */
.vc-flutua { animation: vc-flutua 8s ease-in-out infinite; }
@keyframes vc-flutua { 50% { transform: translateY(-12px); } }
.vc-entra.vc-espera { opacity: 0; transform: translateY(40px) scale(.96); filter: blur(14px); }
.vc-entra { transition: opacity 1.2s var(--ease), transform 1.2s var(--ease), filter 1.2s var(--ease); }

/* com animação: as conversas ocupam o mesmo lugar e passam uma de cada vez */
.vc--anim .vc__etapas { display: flex; }
.vc--anim .vc__conversas { gap: 0; }
.vc--anim .vc__conversa { grid-area: 1 / 1; display: flex; flex-direction: column; }
.vc--anim .vc__conversa + .vc__conversa { padding-top: 0; border-top: 0; }
.vc--anim .vc__quando { display: none; }
.vc--anim .vc__msg, .vc--anim .vc__ok { opacity: 0; transform: translateY(12px) scale(.97); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.vc--anim .vc__msg.on, .vc--anim .vc__ok.on { opacity: 1; transform: none; }
.vc--anim .vc__msg--ia .vc__txt { opacity: 0; transition: opacity .45s ease; }
.vc--anim .vc__msg--ia.pronto .vc__txt { opacity: 1; }
.vc--anim .vc__msg--ia.on:not(.pronto) .vc__dig { display: inline-flex; }
.vc--anim.saindo .vc__msg, .vc--anim.saindo .vc__ok { opacity: 0; transform: translateY(-6px); transition-duration: .5s; }

/* fora da tela, as animações contínuas param */
.vc-parado .vc-flutua, .vc-parado .vc::after, .vc-parado .vc__vivo i { animation-play-state: paused; }

/* ---------- telas menores ---------- */
@media (max-width: 960px) {
  .cena { grid-template-columns: 1fr; gap: 44px; }
  .vc-palco { max-width: 520px; }
}
@media (max-width: 520px) {
  .cena__texto p { margin-top: 16px; font-size: 1.04rem; }
  .cena__texto .pilula { width: 100%; margin-top: 26px; }
  .vc { padding: 16px 14px 14px; border-radius: 24px; }
  .vc__topo { margin-bottom: 14px; padding-bottom: 12px; font-size: .76rem; }
  .vc__msg { max-width: 88%; padding: 9px 13px; font-size: .86rem; }
  .vc__ok { padding: 11px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .vc-flutua, .vc::after, .vc__vivo i, .vc__dig i { animation: none !important; }
  .vc-entra { transition: none; }
}