/**
 * PDF Accessibility Checker — AI Explain Styles
 * @version 1.1.0
 *
 * v1.1.0 (2026-04-11) — Phase 1.6 AI Explain button cross-tool sync:
 * - REDESIGN: Button switched from transparent purple outline to SOLID purple
 *             gradient (#6366f1 → #8b5cf6) — now matches Web Checker .acp-ai-btn
 *             and Doc Checker .docac-ai-btn exactly. Previously the PDF AI Explain
 *             button looked like an outline pill while the other 2 tools used a
 *             filled pill, creating inconsistency in the shared "AI = purple"
 *             visual language.
 * - KEPT:     6px border-radius, 6px gap, 6px 12px padding, 12px font-size — these
 *             are intentionally PDF-specific (slightly smaller than Web/Doc which
 *             use 13px/14px) to fit the denser PDF issue card layout.
 * - KEPT:     All response container styles (.pdfac-ai-response*, code blocks).
 *
 * v1.0.0 — Original outline-pill design.
 *
 * Styles for the AI Explain button and response panel injected
 * into each issue card by pdfac-ai-explain.js
 */

/* ── AI Explain button — v1.1.0: solid purple gradient (synced with Web/Doc) ── */

.pdfac-ai-btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;  /* prevents stretching in flex-column parents (pdfua-rule-info) */
  gap: 6px;
  margin: 8px 0 4px;
  padding: 6px 12px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1;
  white-space: nowrap;
}

.pdfac-ai-btn:hover {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.pdfac-ai-btn.pdfac-ai-loading {
  opacity: 0.7;
  cursor: wait;
  pointer-events: none;
}

.pdfac-ai-btn.pdfac-ai-active {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff;
}

.pdfac-ai-btn-icon {
  flex-shrink: 0;
  opacity: 0.9;
}

.pdfac-ai-btn-text {
  font-size: 12px;
}

/* ── Response container ────────────────────────────────────────────────── */

.pdfac-ai-response {
  margin: 8px 0 4px;
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-left: 3px solid #8b5cf6;
  border-radius: 6px;
  background: rgba(139, 92, 246, 0.05);
  overflow: hidden;
}

.pdfac-ai-response-loading {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #94a3b8;
  font-size: 13px;
}

/* ── Loading dots animation ────────────────────────────────────────────── */

.pdfac-ai-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.pdfac-ai-dots span {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8b5cf6;
  animation: pdfacAiDot 1.2s infinite ease-in-out;
}

.pdfac-ai-dots span:nth-child(1) { animation-delay: 0s; }
.pdfac-ai-dots span:nth-child(2) { animation-delay: 0.2s; }
.pdfac-ai-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes pdfacAiDot {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%           { transform: scale(1);   opacity: 1;   }
}

/* ── Response header ───────────────────────────────────────────────────── */

.pdfac-ai-response-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 8px;
  font-size: 12px;
  font-weight: 700;
  color: #a78bfa;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(139, 92, 246, 0.15);
}

.pdfac-ai-response-header svg {
  flex-shrink: 0;
  opacity: 0.8;
}

.pdfac-ai-error-header {
  color: #f87171;
}

/* ── Response body ─────────────────────────────────────────────────────── */

.pdfac-ai-response-body {
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.65;
  color: #cbd5e1;
}

.pdfac-ai-response-body strong {
  color: #e2e8f0;
  font-weight: 600;
}

/* ── Code blocks ───────────────────────────────────────────────────────── */

.pdfac-ai-code {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(100, 116, 139, 0.2);
  border-radius: 4px;
  padding: 10px 12px;
  margin: 8px 0;
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.5;
}

.pdfac-ai-code code {
  font-family: 'Space Mono', 'Courier New', monospace;
  color: #94a3b8;
}

.pdfac-ai-inline-code {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(100, 116, 139, 0.2);
  border-radius: 3px;
  padding: 1px 5px;
  font-family: 'Space Mono', 'Courier New', monospace;
  font-size: 11px;
  color: #94a3b8;
}

/* ── Cached badge ──────────────────────────────────────────────────────── */

.pdfac-ai-cached {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  background: rgba(100, 116, 139, 0.15);
  border: 1px solid rgba(100, 116, 139, 0.2);
  border-radius: 4px;
  color: #64748b;
  font-size: 10px;
  font-weight: 400;
  text-transform: lowercase;
  letter-spacing: 0;
}