/* ============================================================
   ia-contextual.css  —  Estudio Vivo · Chips IA contextuales
   Posicionados via JS bajo el versículo seleccionado.
   ============================================================ */

/* ── Animación de entrada ── */
@keyframes chip-bounce-in {
  from {
    opacity: 0;
    transform: scale(0.85) translateY(6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ── Container flotante ── */
#iaQuickChips {
  position: fixed;
  z-index: 600;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity  0.22s cubic-bezier(0.34, 1.4, 0.64, 1),
    transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
}

#iaQuickChips.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

/* ── Chip individual ── */
.ia-suggest-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--studio-panel);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--studio-line);
  border-radius: 999px;
  padding: 8px 16px 8px 10px;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: var(--font-ui);
  color: var(--studio-ink);
  cursor: pointer;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  white-space: nowrap;
  animation: chip-bounce-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: 0ms;
  transition:
    transform    0.18s ease,
    background   0.18s ease,
    box-shadow   0.18s ease,
    border-color 0.18s ease;
  /* Reset button styles */
  border-style: solid;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
}

/* nth-child animation delays */
.ia-suggest-chip:nth-child(1) { animation-delay:   0ms; }
.ia-suggest-chip:nth-child(2) { animation-delay:  60ms; }
.ia-suggest-chip:nth-child(3) { animation-delay: 120ms; }
.ia-suggest-chip:nth-child(4) { animation-delay: 180ms; }

/* ── Hover ── */
.ia-suggest-chip:hover {
  transform: translateY(-2px);
  background: var(--studio-hover);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  border-color: color-mix(in srgb, var(--studio-accent) 40%, var(--studio-line));
}

/* ── Active / press ── */
.ia-suggest-chip:active {
  transform: translateY(0px) scale(0.97);
  transition-duration: 0.08s;
}

/* ── Icono del chip ── */
.ia-chip-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--studio-accent),
    color-mix(in srgb, var(--studio-accent) 70%, var(--studio-bg))
  );
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  flex-shrink: 0;
  line-height: 1;
}

/* ── Modo claro ── */
[data-theme="light"] .ia-suggest-chip {
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.92);
}

[data-theme="light"] .ia-suggest-chip:hover {
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* ── Ocultar en desktop (sistema IA propio de ventana) ── */
@media (min-width: 1180px) {
  #iaQuickChips {
    display: none !important;
  }
}

/* ── Feedback de copiado ── */
.ia-suggest-chip.chip-copied {
  border-color: color-mix(in srgb, var(--studio-accent) 80%, transparent);
  background: color-mix(in srgb, var(--studio-accent) 12%, var(--studio-panel));
}