/* Quiz conversacional — modelado no padrão de chat dos ZIPs (Typebot):
 * cabeçalho fixo, bolhas do anfitrião com avatar, indicador de digitação de
 * 3 pontos, bolha do visitante ecoando a resposta e entrada por botões. */
html, body { height: 100%; }
body.quiz {
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--accent-soft) 0%, transparent 60%),
    var(--bg);
  color: var(--ink);
  transition: background-color .6s ease, color .6s ease;
}
.bubble, .choice, .chat-header, .result__card { transition: background-color .6s ease, color .6s ease, border-color .6s ease; }

.chat {
  display: flex; flex-direction: column;
  height: 100dvh; max-width: 640px; margin: 0 auto;
}

/* Cabeçalho */
.chat-header {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--bg-soft) 92%, transparent);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--line);
}
.chat-header .avatar { width: 44px; height: 44px; }
.chat-header__who { flex: 1; min-width: 0; }
.chat-header__name { font: 600 17px/1.2 var(--font-serif); }
.chat-header__status { font-size: 12.5px; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }
.chat-header__status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #4caf6a; box-shadow: 0 0 0 3px rgba(76, 175, 106, .18); }
.chat-header__restart {
  border: 0; background: transparent; color: var(--ink-soft);
  font: 500 13px var(--font-sans); padding: 8px; cursor: pointer; border-radius: 8px;
}
.chat-header__restart:hover { color: var(--accent); }

.progress { height: 4px; background: var(--line); }
.progress__bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--gold)); transition: width .5s ease; border-radius: 0 4px 4px 0; }

/* Avatar */
.avatar { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: var(--accent-soft); box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.12); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Fluxo de mensagens */
.chat-log {
  position: relative; flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 20px 14px 12px;
  scroll-behavior: smooth;
}
.msg-row { display: flex; align-items: flex-end; gap: 8px; margin: 0 0 8px; }
.msg-row--host .avatar { visibility: hidden; }
.msg-row--host.is-last .avatar { visibility: visible; }
.msg-row--guest { justify-content: flex-end; margin: 14px 0 18px; }

.bubble {
  max-width: 82%;
  padding: 11px 15px;
  font-size: 16px; line-height: 1.5;
  border-radius: 18px;
  animation: bubble-in .32s cubic-bezier(.2, .8, .2, 1) both;
  overflow-wrap: anywhere;
}
.bubble--host { background: var(--surface); color: var(--ink); border-bottom-left-radius: 6px; box-shadow: 0 1px 2px rgba(46,35,38,.06), 0 4px 14px rgba(46,35,38,.05); }
.bubble--guest { background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 6px; }
.bubble strong { font-weight: 650; }

@keyframes bubble-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* Indicador de digitação (equivalente a .bubble1/.bubble2/.bubble3 do Typebot) */
.typing { display: inline-flex; gap: 5px; padding: 15px 16px; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); opacity: .45; animation: dots 1s ease-in-out infinite; }
.typing span:nth-child(2) { animation-delay: .3s; }
.typing span:nth-child(3) { animation-delay: .5s; }
@keyframes dots { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* Entrada por botões */
.chat-input {
  padding: 10px 14px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 70%, transparent);
}
.choices { display: grid; gap: 10px; animation: bubble-in .35s ease both; }
.choice {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 54px; padding: 12px 18px;
  border: 1.5px solid var(--line); border-radius: 16px;
  background: var(--surface); color: var(--ink);
  font: 500 15.5px/1.35 var(--font-sans); text-align: left;
  cursor: pointer; box-shadow: 0 1px 2px rgba(46,35,38,.05);
  transition: border-color .15s, transform .15s, box-shadow .15s, background .15s;
}
.choice:hover { border-color: var(--accent); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 18%, transparent); }
.choice:active { transform: scale(.985); }
.choice__icon { font-size: 20px; flex: none; }
.choice__text { flex: 1; }
.choice__text small { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-soft); font-weight: 400; }
.choices--gender { grid-template-columns: 1fr 1fr; }
.choices--gender .choices__note { grid-column: 1 / -1; }
.choice--gender { flex-direction: column; justify-content: center; gap: 6px; min-height: 108px; text-align: center; font: 600 17px/1.2 var(--font-serif); }
.choice--gender .choice__icon { font-size: 30px; }
.choice--mulher { border-color: #e8c3c6; background: linear-gradient(160deg, #fff 0%, #fbeeee 60%, #eef2e8 100%); }
.choice--homem { border-color: #c6cdda; background: linear-gradient(160deg, #fff 0%, #e9edf4 60%, #efe8dc 100%); }
.choice--mulher:hover { border-color: #b5636f; }
.choice--homem:hover { border-color: #1b2a4a; }
.choices__note { font-size: 13px; color: var(--ink-soft); text-align: center; margin: 2px 0 0; }

.chat-footnote { text-align: center; font-size: 11.5px; color: var(--ink-soft); padding: 0 16px 6px; }

/* Tela de resultado */
.result { padding: 8px 4px 40px; animation: bubble-in .5s ease both; }
.result__head { display: flex; align-items: center; gap: 12px; margin: 8px 0 16px; }
.result__head .avatar { width: 52px; height: 52px; }
.result__card {
  background: var(--surface); border-radius: 22px; padding: 22px 20px;
  box-shadow: var(--shadow); margin-bottom: 16px;
}
.result__card p:last-child { margin-bottom: 0; }
.result__title { font-size: 26px; margin-bottom: 14px; }
.result__goal { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; background: var(--gold-soft); border-radius: 14px; font-size: 15px; }

.journey-card { border-radius: 22px; padding: 22px 20px; margin-bottom: 16px; color: var(--ink); box-shadow: var(--shadow); }
.journey-card--florescer { background: linear-gradient(160deg, #f8e3e1 0%, #fbf5ef 55%, #e9efe2 100%); }
.journey-card--reconstruir { background: linear-gradient(160deg, #182238 0%, #2b2f38 100%); color: #f2ece1; }
.journey-card--reconstruir .muted { color: #c9c1b2; }
.journey-card h2 { font-size: 28px; margin: 6px 0 8px; }
.journey-card ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.journey-card li { display: flex; gap: 10px; font-size: 15px; }
.journey-card li::before { content: "✓"; flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: rgba(184,146,79,.22); color: #8a6a2f; }
.journey-card--reconstruir li::before { color: #e2c487; }

.result__cta { display: grid; gap: 12px; margin-top: 18px; }
.result__price { text-align: center; font-size: 14px; color: var(--ink-soft); }
.result__price strong { color: var(--ink); }
.disclaimer { font-size: 12px; color: var(--ink-soft); text-align: center; margin-top: 18px; line-height: 1.5; }

@media (min-width: 700px) {
  .chat { border-left: 1px solid var(--line); border-right: 1px solid var(--line); background: rgba(255,255,255,.25); }
  .bubble { max-width: 75%; }
}

/* Tema masculino no quiz: azul-marinho, grafite, areia e dourado discreto */
[data-theme="reconstruir"] body.quiz {
  --bg: #121a2b;
  --bg-soft: #172036;
  --surface: #1f2940;
  --ink: #efe8dc;
  --ink-soft: #a9a394;
  --line: #2d3852;
  --accent: #c9a45e;
  --accent-ink: #141c2e;
  --accent-soft: #24304a;
  --gold-soft: rgba(201, 164, 94, .16);
}
[data-theme="reconstruir"] .bubble--host { box-shadow: 0 1px 2px rgba(0,0,0,.25); }
[data-theme="reconstruir"] .avatar { box-shadow: 0 0 0 2px #2d3852, 0 2px 6px rgba(0,0,0,.4); }
[data-theme="reconstruir"] .typing span { background: var(--ink); }
[data-theme="reconstruir"] .journey-card--reconstruir { box-shadow: inset 0 0 0 1px #3a4766; }
[data-theme="reconstruir"] .btn { color: #141c2e; }
[data-theme="reconstruir"] .btn--ghost { color: var(--accent); }

/* Mecanismo no resultado */
.mech { background: var(--surface); border-radius: 22px; padding: 22px 20px; margin-bottom: 16px; box-shadow: var(--shadow); border-top: 4px solid var(--gold); }
.mech__h { font-size: 23px; margin: 6px 0 14px; }
.mech__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.mech__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; }
.mech__list b { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font: 700 14px var(--font-serif); }
.mech__note { margin: 14px 0 0; font-size: 14px; color: var(--ink-soft); font-style: italic; }