/* Asistente de IA (Crabsy) y Radar. Hoja chica sobre /site/site.css. */

/* ---- Hero: un chat y un hallazgo de Radar, en HTML -------------- */
.hero-art.ai-art { aspect-ratio: auto; display: flex; flex-direction: column; gap: var(--spacing-16); }

.ai-chat { display: flex; flex-direction: column; gap: 12px; }
.ai-chat-head {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--color-smoke);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.ai-msg { font-size: var(--text-body-sm); line-height: 1.45; border-radius: 20px; padding: 12px 16px; max-width: 90%; margin: 0; }
.ai-msg.user { align-self: flex-end; background: var(--color-carbon-black); color: var(--color-paper-white); border-bottom-right-radius: 6px; }
.ai-msg.bot { align-self: flex-start; background: var(--color-mist-gray); color: var(--color-carbon-black); border-bottom-left-radius: 6px; }
.ai-tool { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-slate); margin: 0; }
.ai-tool::before { content: '› '; }

.ai-radar { padding: 20px 24px; display: flex; flex-direction: column; gap: 10px; }
.ai-radar .q { font-size: var(--text-body-sm); line-height: 1.4; margin: 0; }
.ai-radar .meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---- Un hallazgo de Radar, desarmado ------------------------------ */
.ai-finding dt { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-smoke); text-transform: uppercase; }
.ai-finding dd { margin: 4px 0 18px; font-size: var(--text-body-sm); line-height: 1.45; color: var(--color-paper-white); }
.ai-finding dd:last-child { margin-bottom: 0; }

.ai-note { margin-top: var(--spacing-24); color: var(--color-smoke); }