/**
 * demo.css — Widget de demo con respuestas prefijadas (v1, sin backend
 * real, ver documentación de la Fase 2 en la nota del análisis de
 * mercado). Reusa .chat-mock/.chat-bubble de hero.css como base visual.
 */

.demo-shell { max-width: 640px; margin: 0 auto; }

.demo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.6rem;
}

.demo-chip {
  background: var(--surface);
  border: 1px solid var(--border-md);
  border-radius: 20px;
  padding: 0.55rem 1.1rem;
  font-family: var(--font);
  font-size: 0.82rem;
  color: var(--text-2);
  cursor: pointer;
  transition: border-color var(--dur-base), color var(--dur-base);
}

.demo-chip:hover, .demo-chip:focus-visible { border-color: var(--accent-line); color: var(--accent); }
.demo-chip[disabled] { opacity: 0.4; cursor: default; }

.demo-chat.chat-mock { max-width: none; min-height: 320px; }

.chat-typing { display: inline-flex; gap: 4px; padding: 0.8rem 1rem; }
.chat-typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-3);
  animation: typing-bounce 1s infinite ease-in-out;
}
.chat-typing span:nth-child(2) { animation-delay: .15s; }
.chat-typing span:nth-child(3) { animation-delay: .3s; }

@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.demo-disclaimer {
  margin-top: 1.4rem;
  font-size: 0.8rem;
  color: var(--text-3);
  text-align: center;
}