:root {
  --accent: #acf7c1;
  --accent-2: #7fe8a6;
  --accent-ink: #0e1512;
  --accent-text: color-mix(in srgb, var(--accent) 55%, black); /* --accent claro demais pra usar como cor de texto direto */
  --bg: #fff7f6;
  --bubble-expert: #eef4fb;
  --bubble-user: #23272f;
  --btn: #23272f;
  --ink: #1c1f24;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  min-height: 100dvh;
}

/* Centraliza o conteúdo na tela enquanto ele couber; quando a conversa
   cresce além da viewport, passa a fluir do topo (ver .stage.flow) e cada
   etapa se autocentraliza via scroll (chat.js). */
.stage {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.stage.flow { justify-content: flex-start; }

.group-start { height: 0; margin: 0; padding: 0; }

.chat {
  max-width: 560px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 20px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.answers {
  max-width: 560px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 26px 14px calc(28px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Linha do expert: avatar + bolha ── */
.row { display: flex; align-items: flex-end; gap: 10px; animation: pop .28s ease both; }
.row.user { justify-content: flex-end; }

.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; flex: 0 0 40px; background: #e6e0dd;
}
.avatar.ghost { visibility: hidden; }

.bubble {
  background: var(--bubble-expert);
  border-radius: 20px;
  border-bottom-left-radius: 6px;
  padding: 13px 17px;
  max-width: 82%;
  overflow-wrap: break-word;
}
.row.user .bubble {
  background: var(--bubble-user);
  color: #fff;
  border-radius: 20px;
  border-bottom-right-radius: 6px;
}
.bubble b, .bubble strong { font-weight: 700; }

/* Bolha "rica" da fase de apresentação */
.bubble.rich { background: #fff; border: 1px solid #eee3e3; box-shadow: 0 2px 10px rgba(0,0,0,.05); width: 82%; }
.bubble.rich .rich-title { font-size: 21px; font-weight: 800; margin: 2px 0 8px; letter-spacing: -.01em; }
.bubble.rich .rich-title .hl { color: var(--accent-text); }
.bubble.rich p { margin: 8px 0; }
.bubble.rich img.media { width: 100%; border-radius: 14px; display: block; margin: 10px 0 4px; }
.bubble.rich .caption { font-size: 13px; color: #8a8a8a; margin: 2px 0 6px; }
.bubble.rich .video-wrap { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; margin: 10px 0 4px; background: #000; }
.bubble.rich .video-wrap iframe, .bubble.rich .video-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bubble.rich a.textlink { color: var(--accent-text); font-weight: 600; text-decoration: underline; word-break: break-all; }

.cta-btn {
  display: block; width: 100%;
  margin: 12px 0 4px;
  padding: 15px 18px;
  border: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--accent-2)));
  color: var(--accent-ink); font-size: 17px; font-weight: 700;
  text-align: center; text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent);
  transition: transform .12s ease;
}
.cta-btn:active { transform: scale(.97); }

/* ── Botões de resposta (somem após o clique) ── */
.opt {
  appearance: none;
  border: 0;
  background: var(--btn);
  color: #fff;
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.35;
  text-align: left;
  padding: 18px 22px;
  border-radius: 18px;
  cursor: pointer;
  animation: pop .3s ease both;
  transition: transform .12s ease, opacity .12s ease;
}
.opt:active { transform: scale(.98); opacity: .9; }

/* ── Indicador "digitando…" ── */
.typing .bubble { display: inline-flex; gap: 5px; padding: 16px 18px; }
.typing .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #9aa6b5; animation: blink 1.2s infinite ease-in-out;
}
.typing .dot:nth-child(2) { animation-delay: .18s; }
.typing .dot:nth-child(3) { animation-delay: .36s; }

@keyframes blink { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .row, .opt { animation: none; }
}