/* AI-feature styling — shared by home.html (slug suggester, safety badge),
   stats.html (AI summary panel), dashboard.html (CSV export + AI bits). */

.ai-btn {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
  color: #fff;
  border: 0;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.1s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  box-shadow: 0 1px 2px rgba(99, 102, 241, 0.2);
}
.ai-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(99, 102, 241, 0.35); }
.ai-btn:active { transform: translateY(0); }
.ai-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.ai-btn .spinner { width: 12px; height: 12px; border: 2px solid #fff6; border-top-color: #fff; border-radius: 50%; animation: ai-spin 0.7s linear infinite; display: inline-block; vertical-align: -2px; margin-right: 4px; }
@keyframes ai-spin { to { transform: rotate(360deg); } }

.slug-row { display: flex; gap: 8px; align-items: center; }
.slug-row .slug-input { flex: 1; }

.ai-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ai-chips .chip {
  background: rgba(99, 102, 241, 0.08);
  color: #4f46e5;
  border: 1px solid rgba(99, 102, 241, 0.25);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  cursor: pointer;
  font-family: 'Fira Code', monospace;
  transition: background 0.15s ease;
}
.ai-chips .chip:hover { background: rgba(99, 102, 241, 0.18); }
.ai-chips .chip-source {
  font-size: 0.7rem;
  color: #888;
  padding: 4px 6px;
}

.safety-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 500;
}
.safety-badge .sb-icon {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-weight: 700;
  flex-shrink: 0;
}
.safety-badge.safe    { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.safety-badge.safe .sb-icon { background: #10b981; color: white; }
.safety-badge.caution { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.safety-badge.caution .sb-icon { background: #f59e0b; color: white; }
.safety-badge.risky   { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.safety-badge.risky .sb-icon { background: #ef4444; color: white; }
.safety-badge.loading { background: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb; }
.safety-badge.loading .sb-icon { background: #9ca3af; color: white; }

/* Stats page AI summary card */
.ai-summary {
  background: linear-gradient(135deg, rgba(99,102,241,0.04) 0%, rgba(236,72,153,0.04) 100%);
  border: 1px solid rgba(99,102,241,0.18);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 16px 0;
}
.ai-summary-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.ai-summary-head h3 { margin: 0; font-size: 1rem; color: #4f46e5; display: flex; align-items: center; gap: 8px; }
.ai-summary-head h3::before { content: '✨'; }
.ai-summary-body { color: #374151; line-height: 1.55; font-size: 0.95rem; }
.ai-summary-body.muted { color: #9ca3af; font-style: italic; }
.ai-summary-source { font-size: 0.75rem; color: #9ca3af; margin-top: 8px; }

/* Dashboard CSV export button */
.csv-btn {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.csv-btn:hover { background: #e5e7eb; }

@media (max-width: 600px) {
  .slug-row { flex-direction: column; align-items: stretch; }
  .ai-btn { width: 100%; }
}