/*
 * Citely brand theme (spec Section 1.5).
 *
 * Palette: Ink, Vivid Coral, Vivid Violet, White, Mist — plus a
 * deliberately separate semantic set (green/amber/red) for
 * mentioned/sentiment status so brand color and status color never blend
 * (spec 1.5, 9.3: "keep brand color and semantic color visually distinct").
 * Fonts: Space Grotesk for display/headings, Inter for body text, IBM Plex
 * Mono for API keys/code. All three are loaded from Google Fonts in
 * _common/header.gohtml with a system-font fallback stack here so the page
 * still reads correctly if that request is blocked.
 */

:root {
  --citely-ink: #10202e;
  --citely-coral: #ff4568;
  --citely-violet: #5b3df6;
  --citely-white: #ffffff;
  --citely-mist: #f5f6f8;

  --citely-signal-green: #16a34a;
  --citely-signal-amber: #f0a83c;
  --citely-signal-red: #d64545;

  --citely-font-display: 'Space Grotesk', 'Segoe UI', Helvetica, Arial, sans-serif;
  --citely-font-body: 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
  --citely-font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  --bs-primary: var(--citely-violet);
  --bs-primary-rgb: 91, 61, 246;
  --bs-body-font-family: var(--citely-font-body);
  --bs-body-bg: var(--citely-white);
  --bs-body-color: var(--citely-ink);
}

body {
  font-family: var(--citely-font-body);
  background-color: var(--citely-white);
  color: var(--citely-ink);
}

h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.citely-brand-font {
  font-family: var(--citely-font-display);
}

code, pre, .citely-mono, .api-key-display {
  font-family: var(--citely-font-mono);
}

a {
  color: var(--citely-violet);
}
a:hover {
  color: var(--citely-coral);
}

.btn-primary {
  background-color: var(--citely-violet);
  border-color: var(--citely-violet);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--citely-coral) !important;
  border-color: var(--citely-coral) !important;
}
.btn-outline-primary {
  color: var(--citely-violet);
  border-color: var(--citely-violet);
}
.btn-outline-primary:hover {
  background-color: var(--citely-violet);
  border-color: var(--citely-violet);
}

.text-citely-coral { color: var(--citely-coral); }
.text-citely-violet { color: var(--citely-violet); }
.bg-citely-mist { background-color: var(--citely-mist); }

/* Section bands on the marketing site use Mist, never a tinted brand
   color, so Coral/Violet stay reserved for the mark and small accents
   (spec 1.5: "white background throughout; the mark and accents carry the
   color, not the page itself"). */
.citely-section-mist {
  background-color: var(--citely-mist);
}

.navbar-brand {
  font-family: var(--citely-font-display);
  font-weight: 600;
  color: var(--citely-ink) !important;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.navbar-brand img {
  height: 28px;
  width: 28px;
}

/* --- Semantic status colors (mentioned / sentiment) -----------------------
   Kept visually distinct from the brand mark's Coral/Violet rays, per
   spec 1.5 and 9.3. Used on dashboard badges and the by-prompt table. */
.citely-status-positive, .badge-sentiment-positive {
  color: #fff;
  background-color: var(--citely-signal-green);
}
.citely-status-neutral, .badge-sentiment-neutral {
  color: #1a1a1a;
  background-color: var(--citely-signal-amber);
}
.citely-status-negative, .badge-sentiment-negative {
  color: #fff;
  background-color: var(--citely-signal-red);
}
.citely-mentioned-dot {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background-color: var(--citely-signal-green);
}
.citely-not-mentioned-dot {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background-color: #d9dce1;
}

/* --- Ray-burst loading motif (spec 1.5, 9.2 step 3, 9.3) -------------------
   A rotating six-ray burst echoing the citation-spark mark, shown while a
   check is in progress (onboarding step 3, dashboard "Check right now"). */
.citely-rayburst {
  display: inline-block;
  width: 64px;
  height: 64px;
  position: relative;
}
.citely-rayburst .ray {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 18px;
  margin-left: -3px;
  margin-top: -32px;
  border-radius: 3px;
  background: var(--citely-coral);
  transform-origin: 50% 32px;
  animation: citely-ray-pulse 1.2s ease-in-out infinite;
}
.citely-rayburst .ray:nth-child(1) { transform: rotate(0deg); animation-delay: 0s; }
.citely-rayburst .ray:nth-child(2) { transform: rotate(60deg); background: var(--citely-violet); animation-delay: 0.1s; }
.citely-rayburst .ray:nth-child(3) { transform: rotate(120deg); animation-delay: 0.2s; }
.citely-rayburst .ray:nth-child(4) { transform: rotate(180deg); background: var(--citely-violet); animation-delay: 0.3s; }
.citely-rayburst .ray:nth-child(5) { transform: rotate(240deg); animation-delay: 0.4s; }
.citely-rayburst .ray:nth-child(6) { transform: rotate(300deg); background: var(--citely-violet); animation-delay: 0.5s; }

@keyframes citely-ray-pulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

.citely-hero {
  padding: 5rem 0 4rem;
}

.citely-card {
  border: 1px solid rgba(16, 32, 46, 0.08);
  border-radius: 0.75rem;
}

.citely-counter-warn {
  color: var(--citely-signal-amber);
}
.citely-counter-over {
  color: var(--citely-signal-red);
}

/* --- Check-run progress bar (spec 9.2 step 3, 9.3 "Shows real-time
   progress") ----------------------------------------------------------------
   Determinate progress through a run's prompt/provider calls, driven by JS
   from the /status poll response. The diagonal shimmer overlay is purely
   decorative motion layered on top so the bar still reads as "live" in the
   gaps between polls, not just when its width happens to change. */
.citely-progress {
  height: 10px;
  border-radius: 999px;
  background-color: rgba(16, 32, 46, 0.08);
  overflow: hidden;
}
.citely-progress-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--citely-violet), var(--citely-coral));
  width: 0%;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.citely-progress-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 45%,
    rgba(255, 255, 255, 0.4) 55%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: citely-progress-shimmer 1.6s linear infinite;
}
@keyframes citely-progress-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- Result detail modal (dashboard "by prompt" table) --------------------
   A mentioned row is selectable to inspect the full AI response, with the
   business name and any competitors highlighted inline. */
.citely-clickable-row {
  cursor: pointer;
}
.citely-clickable-row:hover {
  background-color: var(--citely-mist);
}
.citely-mention-highlight {
  background-color: rgba(91, 61, 246, 0.18);
  color: var(--citely-violet);
  padding: 0 0.15em;
  border-radius: 3px;
}
.citely-competitor-highlight {
  background-color: rgba(255, 69, 104, 0.14);
  color: var(--citely-coral);
  padding: 0 0.15em;
  border-radius: 3px;
}
.citely-result-response {
  max-height: 50vh;
  overflow-y: auto;
  word-break: break-word;
}
.citely-result-response p,
.citely-result-response ul,
.citely-result-response ol {
  margin-bottom: 0.75rem;
}
.citely-result-response p:last-child,
.citely-result-response ul:last-child,
.citely-result-response ol:last-child {
  margin-bottom: 0;
}
.citely-result-response ul,
.citely-result-response ol {
  padding-left: 1.25rem;
}
.citely-result-response .citely-response-heading {
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}
.citely-result-response .citely-response-heading:first-child {
  margin-top: 0;
}