/* Wizard bnkBot — reusa los tokens de ../../../assets/css/style.css
   (--bg-0/1/2/3, --accent, --accent-2, --ink, tipografía Bai Jamjuree). */

html, body { min-height: 100%; background: var(--bg-0); }

/* ---------- Fondo: radiales de marca (mismo lenguaje que el hero del sitio)
   + malla de puntos sutil. El anillo orbital (SVG, animación nativa) va
   aparte, ver .bb-bg-rings más abajo. ---------- */
body {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(95,185,1,.12) 0%, transparent 55%),
    radial-gradient(90% 60% at 0% 100%, rgba(95,185,1,.08) 0%, transparent 60%),
    var(--bg-0);
  background-attachment: fixed;
}
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(70% 70% at 50% 40%, #000 0%, transparent 85%);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000 0%, transparent 85%);
}

/* Anillo orbital de fondo — el mismo que acompaña al logo de Binark Radio en
   el sitio, aquí centrado detrás de todo el contenido con opacidad reducida
   para no competir con el texto de las preguntas. Animación nativa SVG
   (<animateTransform>), no requiere JS. Posición fija: no se mueve al
   hacer scroll de la página. */
.bb-bg-rings {
  position: fixed; z-index: 0; pointer-events: none;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(92vw, 640px); height: min(92vw, 640px);
  opacity: .3;
  filter: blur(1.4px); /* 7% de blur suave sobre las líneas del anillo */
}
.bb-bg-rings .deco-ring-svg { width: 100%; height: 100%; }

/* #bnkbot-app fluye normalmente en el documento (no position:fixed) para que
   la página pueda hacer scroll cuando el contenido —p. ej. la card de
   revisión con muchas filas, o listas largas de opciones en pantallas
   chicas— sea más alto que el viewport. Los elementos decorativos de fondo
   siguen fijos vía su propio position:fixed, así que no se mueven al hacer
   scroll. */
#bnkbot-app {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 620px;
  margin: 0 auto;
  padding: 22px 20px 40px;
  font-family: "Bai Jamjuree", Arial, Helvetica, sans-serif;
  color: var(--ink);
}

/* ---------- Barra de progreso ---------- */
.bb-progress { margin-bottom: 6px; }
.bb-progress__row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 7px;
}
.bb-progress__track {
  position: relative; height: 5px; width: 100%; overflow: hidden;
  border-radius: 999px; background: var(--bg-3); border: 1px solid var(--line-soft);
}
.bb-progress__fill {
  position: relative; height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 8px 0 rgba(95,185,1,.5);
}
.bb-progress__sweep {
  position: absolute; inset-block: 0; left: 0; width: 32px;
  background: rgba(255,255,255,.4); filter: blur(3px); pointer-events: none;
}

/* ---------- Cuerpo central ---------- */
.bb-center {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 18px; position: relative;
  padding-top: 12px;
}

.bb-avatar {
  position: relative;
  filter: drop-shadow(0 0 20px rgba(95,185,1,.32));
}
.bb-avatar::after {
  content: "";
  position: absolute; z-index: -1; inset: -30px;
  background: radial-gradient(circle, rgba(95,185,1,.18) 0%, transparent 72%);
  pointer-events: none;
}
.bb-avatar img {
  display: block; object-fit: contain;
  width: clamp(118px, 34vw, 132px); height: clamp(118px, 34vw, 132px);
}

.bb-card {
  width: 100%; display: flex; flex-direction: column; align-items: center;
  gap: 18px; text-align: center;
}
.bb-text {
  max-width: 440px; font-size: 16.5px; font-weight: 500; line-height: 1.45;
}
.bb-text strong { color: var(--accent-2); font-weight: 700; }

/* Cursor tipo consola: acompaña el texto mientras "digita" y se queda
   parpadeando al final, como el cursor de una terminal esperando entrada. */
.bb-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--accent-2);
  animation: bb-caret-blink .9s steps(1) infinite;
}
@keyframes bb-caret-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bb-caret { animation: none; opacity: 1; }
}

.bb-controls { width: 100%; }

/* ---------- Chips de opciones ---------- */
.bb-options {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  max-height: 44vh; overflow-y: auto; padding: 4px;
}
.bb-chip {
  cursor: pointer; user-select: none; font: inherit; font-size: 12.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: 999px; border: 1px solid var(--line);
  background: rgba(255,255,255,.03); color: var(--ink-dim); padding: 7px 15px 7px 12px;
  backdrop-filter: blur(6px);
  transition: transform .15s cubic-bezier(.16,1,.3,1), background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.bb-chip i { font-size: 11px; color: var(--accent); opacity: .8; transition: color .15s, opacity .15s; }
.bb-chip:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: var(--accent);
  background: rgba(95,185,1,.1);
  color: var(--ink);
  box-shadow: 0 4px 14px -4px rgba(95,185,1,.4);
}
.bb-chip:disabled { cursor: default; }
.bb-chip.is-picked {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent; color: var(--accent-ink);
  box-shadow: 0 4px 16px -2px rgba(95,185,1,.55);
}
.bb-chip.is-picked i { color: var(--accent-ink); opacity: 1; }

/* ---------- Campos de texto ---------- */
.bb-field {
  width: 100%; max-width: 360px; margin: 0 auto;
  border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.03);
  color: var(--ink); padding: 9px 13px; font: inherit; font-size: 13px;
  outline: none; transition: border-color .15s, background-color .15s;
}
.bb-field::placeholder { color: var(--ink-faint); }
.bb-field:focus { border-color: var(--accent); background: rgba(255,255,255,.05); }
textarea.bb-field { resize: none; }

.bb-field-icon {
  position: relative; width: 100%; max-width: 360px; margin: 0 auto;
}
.bb-field-icon > i {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  font-size: 12px; color: var(--ink-faint); pointer-events: none;
}
.bb-field-icon .bb-field { padding-left: 32px; max-width: none; }
.bb-field-icon .bb-field:focus + i,
.bb-field-icon:focus-within > i { color: var(--accent); }

.bb-form { display: flex; flex-direction: column; gap: 9px; max-width: 360px; margin: 0 auto; }
.bb-form-inline { display: flex; gap: 7px; max-width: 360px; margin: 0 auto; }
.bb-form-inline .bb-field { flex: 1; }

.bb-btn {
  cursor: pointer; font: inherit; font-weight: 700; font-size: 12px;
  letter-spacing: .04em; text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px; padding: 10px 20px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  box-shadow: 0 4px 16px -4px rgba(95,185,1,.55);
  transition: filter .15s, opacity .15s, transform .15s, box-shadow .15s;
}
.bb-btn i { font-size: 12px; transition: transform .2s ease; }
.bb-btn:hover:not(:disabled) i { transform: translateX(2px); }
.bb-btn:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 6px 20px -4px rgba(95,185,1,.65); }
.bb-btn:active:not(:disabled) { transform: translateY(0); }
.bb-btn:disabled { opacity: .35; cursor: default; box-shadow: none; }
.bb-btn--full { width: 100%; max-width: 360px; margin: 0 auto; display: flex; padding: 13px 20px; }
.bb-btn--center { display: inline-flex; margin: 2px auto 0; }

.bb-btn--ghost {
  background: transparent; color: var(--ink-dim);
  border: 1px solid var(--line); box-shadow: none;
}
.bb-btn--ghost i { color: var(--ink-faint); }
.bb-btn--ghost:hover:not(:disabled) { border-color: var(--accent); color: var(--ink); box-shadow: none; }
.bb-btn--ghost:hover:not(:disabled) i { color: var(--accent); }

/* ---------- Revisión ---------- */
.bb-review-box {
  width: 100%; max-width: 380px; margin: 0 auto; text-align: left;
  border-radius: 14px; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  box-shadow: 0 8px 28px -12px rgba(0,0,0,.5);
  overflow: hidden;
}
.bb-review-head {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px; border-bottom: 1px solid var(--line-soft);
  background: rgba(95,185,1,.06);
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent-2);
}
.bb-review-head i { font-size: 12px; color: var(--accent); }
.bb-review-body { padding: 4px 16px 8px; }
.bb-review-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--line-soft); font-size: 13px;
}
.bb-review-row:last-child { border-bottom: 0; }
.bb-review-row i {
  flex: 0 0 auto; width: 16px; text-align: center; font-size: 11px;
  color: var(--accent); opacity: .85;
}
.bb-review-row .bb-review-label { flex: 0 0 auto; color: var(--ink-faint); min-width: 78px; }
.bb-review-row .bb-review-value { flex: 1; text-align: right; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }

.bb-confirm {
  display: flex; align-items: center; gap: 8px; font-size: 11.5px;
  color: var(--ink-dim); max-width: 380px; margin: 12px auto 0;
}

/* ---------- Pantalla final (éxito) ---------- */
.bb-result-num {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 12.5px; color: var(--ink-faint); text-align: center; margin-bottom: 14px;
}
.bb-result-num i { color: var(--accent); font-size: 13px; }
.bb-result-num strong { color: var(--accent); font-size: 14px; }
.bb-final-actions {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  max-width: 360px; margin: 0 auto;
}
.bb-final-actions .bb-btn { flex: 1; min-width: 150px; }

/* ---------- Animaciones (estado inicial para GSAP) ---------- */
.bb-card, .bb-avatar { will-change: transform, opacity; }

@keyframes bb-typing-dot {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
.bb-typing { display: flex; align-items: center; justify-content: center; gap: 5px; }
.bb-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint);
  animation: bb-typing-dot 1.1s ease-in-out infinite;
}
.bb-typing span:nth-child(2) { animation-delay: .15s; }
.bb-typing span:nth-child(3) { animation-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  .bb-bg-rings * { animation: none !important; }
}

@media (max-width: 480px) {
  .bb-text { font-size: 15px; }
  .bb-chip { font-size: 12px; padding: 6px 13px 6px 11px; }
  .bb-bg-rings { width: 92vw; height: 92vw; }
}