/* Cookiy Search Insight Engine — mode-aware styles */

#sandbox-insights {
  --ci-bg: #fafaf7;
  --ci-ink: #0a0a0a;
  --ci-muted: #6b6b6b;
  --ci-line: #ececea;
  --ci-accent: #ff8a3d;
  --ci-accent-2: #ffd8b8;
  --ci-card: #fff;
  --ci-radius: 16px;
  --ci-indigo: #1a1a2e;
  --ci-indigo-light: #f4f3ff;
  --ci-indigo-border: #c5c2f0;
  --ci-indigo-text: #3d3a8a;
}

/* ── Wrap & mode root ────────────────────────────────────────── */

.ci-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 28px 24px 80px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  transition: border-color 0.2s;
}

[data-mode="internal"] .ci-wrap {
  border-left: 3px solid var(--ci-indigo);
  padding-left: 21px;
}

/* ── Mode toggle header ──────────────────────────────────────── */
.ci-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.ci-mode-toggle {
  display: flex;
  background: #f0f0f0;
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}

.ci-mode-btn {
  padding: 7px 18px;
  border-radius: 999px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: #888;
  font-family: inherit;
  transition: all 0.15s;
}

.ci-mode-btn.ci-mode-active {
  background: #fff;
  color: var(--ci-ink);
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

[data-mode="internal"] .ci-mode-btn#ci-mode-int.ci-mode-active {
  background: var(--ci-indigo);
  color: #fff;
}

.ci-mode-label {
  font-size: 12px;
  color: var(--ci-muted);
  font-weight: 500;
  font-style: italic;
}

/* ── Tab switcher ────────────────────────────────────────────── */
.ci-tabs {
  display: flex;
  gap: 6px;
  background: var(--ci-card);
  border: 1px solid var(--ci-line);
  border-radius: 999px;
  padding: 5px;
  width: fit-content;
  margin-bottom: 24px;
}

.ci-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: var(--ci-muted);
  transition: all 0.15s;
  border: none;
  background: transparent;
  font-family: inherit;
}

.ci-tab.ci-tab-active { background: var(--ci-ink); color: #fff; }
[data-mode="internal"] .ci-tab.ci-tab-active { background: var(--ci-indigo); }

/* ── Hero labels ─────────────────────────────────────────────── */
.ci-hero-label {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 8px;
  color: var(--ci-ink);
}

.ci-grad {
  background: linear-gradient(90deg, #ff8a3d 0%, #d14a9a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

[data-mode="internal"] .ci-grad {
  background: linear-gradient(90deg, var(--ci-indigo) 0%, #4a4a8a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ci-hero-sub {
  color: var(--ci-muted);
  font-size: 14px;
  margin-bottom: 20px;
  line-height: 1.5;
}

/* ── Search row ──────────────────────────────────────────────── */
.ci-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ci-card);
  border: 1px solid var(--ci-line);
  border-radius: 28px;
  padding: 8px 8px 8px 18px;
  box-shadow: 0 4px 16px rgba(20,20,20,0.05);
  transition: box-shadow 0.2s, border-color 0.2s;
  margin-bottom: 12px;
}

.ci-search-wrap:focus-within {
  border-color: #ffc99a;
  box-shadow: 0 8px 28px rgba(255,138,61,0.14);
}

[data-mode="internal"] .ci-search-wrap:focus-within {
  border-color: var(--ci-indigo-border);
  box-shadow: 0 8px 28px rgba(26,26,46,0.1);
}

.ci-search-icon { color: var(--ci-muted); flex-shrink: 0; }

.ci-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 15px;
  padding: 10px 4px;
  background: transparent;
  font-family: inherit;
  color: var(--ci-ink);
}

.ci-search-btn {
  background: var(--ci-ink);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  transition: background 0.15s;
  flex-shrink: 0;
}

.ci-search-btn:hover { background: #222; }
.ci-search-btn:disabled { opacity: 0.5; cursor: wait; }
[data-mode="internal"] .ci-search-btn { background: var(--ci-indigo); }
[data-mode="internal"] .ci-search-btn:hover { background: #2a2a4a; }

/* ── Sample pills ────────────────────────────────────────────── */
.ci-samples { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }

.ci-sample {
  font-size: 13px;
  color: var(--ci-muted);
  background: var(--ci-card);
  border: 1px solid var(--ci-line);
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s;
}
.ci-sample:hover { border-color: var(--ci-ink); color: var(--ci-ink); }

/* ── Bullet rows (search result) ─────────────────────────────── */
.ci-bullets { display: flex; flex-direction: column; gap: 10px; }

.ci-bullet {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.65;
  color: #222;
}

.ci-bullet-arrow {
  color: var(--ci-accent);
  font-weight: 700;
  flex-shrink: 0;
  padding-top: 2px;
  font-size: 14px;
}

[data-mode="internal"] .ci-bullet-arrow { color: var(--ci-indigo-text); }

/* ── Content blocks ──────────────────────────────────────────── */
.ci-block {
  background: var(--ci-card);
  border: 1px solid var(--ci-line);
  border-radius: var(--ci-radius);
  padding: 22px 26px;
  margin-bottom: 14px;
}

.ci-block-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 11px;
  color: var(--ci-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
}

.ci-engine-chips { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }

.ci-chip-engine {
  font-size: 11px;
  background: #f4f2ee;
  border-radius: 6px;
  padding: 3px 8px;
  color: #555;
}

/* ── Gap visualizer ──────────────────────────────────────────── */
.ci-gap-viz {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--ci-card);
  border: 1px solid var(--ci-line);
  border-radius: var(--ci-radius);
  padding: 18px 22px;
  margin-bottom: 14px;
}

.ci-gap-col { flex: 1; }

.ci-gap-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ci-muted);
  margin-bottom: 10px;
}

.ci-gap-label-accent { color: var(--ci-accent); }
[data-mode="internal"] .ci-gap-label-accent { color: var(--ci-indigo-text); }

.ci-gap-line {
  height: 9px;
  border-radius: 4px;
  margin-bottom: 6px;
}

.ci-gap-search .ci-gap-line { background: #e8e8e8; }
.ci-gap-search .ci-gap-line:nth-child(1) { width: 88%; }
.ci-gap-search .ci-gap-line:nth-child(2) { width: 72%; }
.ci-gap-search .ci-gap-line:nth-child(3) { width: 80%; }

.ci-gap-cookiy .ci-gap-line { background: rgba(255,138,61,0.35); }
.ci-gap-cookiy .ci-gap-line:nth-child(1) { width: 95%; background: rgba(255,138,61,0.55); }
.ci-gap-cookiy .ci-gap-line:nth-child(2) { width: 80%; background: rgba(255,138,61,0.45); }
.ci-gap-cookiy .ci-gap-line:nth-child(3) { width: 88%; background: rgba(255,138,61,0.35); }

[data-mode="internal"] .ci-gap-cookiy .ci-gap-line { background: rgba(61,58,138,0.3); }
[data-mode="internal"] .ci-gap-cookiy .ci-gap-line:nth-child(1) { background: rgba(61,58,138,0.5); }
[data-mode="internal"] .ci-gap-cookiy .ci-gap-line:nth-child(2) { background: rgba(61,58,138,0.4); }

.ci-gap-blur-row {
  height: 9px;
  border-radius: 4px;
  background: rgba(255,138,61,0.15);
  margin-bottom: 6px;
  filter: blur(3px);
  width: 72%;
}

.ci-gap-blur-2 { width: 56%; }
[data-mode="internal"] .ci-gap-blur-row { background: rgba(61,58,138,0.12); }

.ci-gap-arrow { font-size: 18px; color: var(--ci-accent); padding-top: 20px; flex-shrink: 0; }
[data-mode="internal"] .ci-gap-arrow { color: var(--ci-indigo-text); }

/* ── Insight card ────────────────────────────────────────────── */
.ci-insight-card {
  background: linear-gradient(160deg, #fff7ef 0%, #ffe9d6 100%);
  border: 1px solid #ffd8b8;
  border-radius: var(--ci-radius);
  padding: 28px 30px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}

.ci-insight-card::before {
  content: "";
  position: absolute;
  top: -70px; right: -70px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,138,61,0.28), transparent 70%);
}

[data-mode="internal"] .ci-insight-card {
  background: linear-gradient(160deg, #f4f3ff 0%, #eae9ff 100%);
  border-color: var(--ci-indigo-border);
}

[data-mode="internal"] .ci-insight-card::before {
  background: radial-gradient(circle, rgba(61,58,138,0.18), transparent 70%);
}

.ci-insight-eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b84b00;
  font-weight: 700;
  margin-bottom: 10px;
}

[data-mode="internal"] .ci-insight-eyebrow { color: var(--ci-indigo-text); }

.ci-insight-h2 {
  font-size: 20px;
  line-height: 1.25;
  margin: 0 0 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ci-ink);
}

.ci-insight-why {
  color: #3a2a18;
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 16px;
}

[data-mode="internal"] .ci-insight-why { color: #1a1a2e; }

.ci-only-way {
  background: #fff;
  border-radius: 10px;
  padding: 14px 16px;
  margin: 14px 0 16px;
  border-left: 4px solid var(--ci-accent);
  font-size: 14px;
  line-height: 1.55;
}

[data-mode="internal"] .ci-only-way { border-left-color: var(--ci-indigo-text); }

.ci-only-way strong {
  display: block;
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ci-accent);
  margin-bottom: 5px;
}

[data-mode="internal"] .ci-only-way strong { color: var(--ci-indigo-text); }

/* ── Timeline (we-will) ──────────────────────────────────────── */
.ci-timeline { margin: 14px 0 20px; }

.ci-timeline-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.ci-tl-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 28px;
}

.ci-tl-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ci-ink);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

[data-mode="internal"] .ci-tl-dot { background: var(--ci-indigo); }

.ci-tl-line {
  width: 2px;
  flex: 1;
  min-height: 18px;
  background: rgba(0,0,0,0.1);
  margin: 0 auto;
}

.ci-timeline-step:last-child .ci-tl-line { display: none; }

.ci-tl-content {
  padding: 4px 0 20px;
  font-size: 14px;
  line-height: 1.55;
  color: #2a1a08;
  flex: 1;
}

[data-mode="internal"] .ci-tl-content { color: #1a1a2e; }

/* ── CTA button ──────────────────────────────────────────────── */
.ci-cta-big {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ci-ink);
  color: #fff;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s, background 0.15s;
}

.ci-cta-big:hover { transform: translateY(-1px); background: #222; }
[data-mode="internal"] .ci-cta-big { background: var(--ci-indigo); }
[data-mode="internal"] .ci-cta-big:hover { background: #2a2a4a; }

/* ── Corpus match card (internal only) ──────────────────────── */
.ci-corpus-card {
  background: var(--ci-indigo-light);
  border: 1.5px solid var(--ci-indigo-border);
  border-radius: var(--ci-radius);
  padding: 18px 22px;
  margin-bottom: 14px;
}

.ci-corpus-head {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ci-indigo-text);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ci-corpus-study {
  background: #fff;
  border: 1px solid #dddcf5;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
}

.ci-corpus-study-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--ci-indigo);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ci-corpus-n {
  font-size: 11px;
  font-weight: 500;
  background: var(--ci-indigo-light);
  color: var(--ci-indigo-text);
  padding: 2px 8px;
  border-radius: 999px;
}

.ci-corpus-finding {
  font-size: 13px;
  color: #333;
  padding: 5px 0;
  border-bottom: 1px solid #f0effe;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ci-corpus-finding:last-child { border-bottom: none; }
.ci-corpus-freq { font-weight: 700; color: var(--ci-indigo-text); white-space: nowrap; }
.ci-corpus-empty { font-size: 13px; color: var(--ci-muted); font-style: italic; }

/* ── Signal strength strip ───────────────────────────────────── */
.ci-signal-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ci-card);
  border: 1px solid var(--ci-line);
  border-radius: 12px;
  padding: 12px 18px;
  margin-bottom: 14px;
}

.ci-signal-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ci-muted);
  flex-shrink: 0;
  white-space: nowrap;
}

.ci-signal-bar-wrap {
  flex: 1;
  height: 8px;
  background: #f0efec;
  border-radius: 999px;
  overflow: hidden;
}

.ci-signal-bar {
  height: 100%;
  background: var(--ci-accent);
  border-radius: 999px;
  transition: width 0.9s cubic-bezier(0.4,0,0.2,1);
  width: 0%;
}

[data-mode="internal"] .ci-signal-bar { background: var(--ci-indigo-text); }

.ci-signal-pct { font-size: 14px; font-weight: 700; color: var(--ci-ink); flex-shrink: 0; }
.ci-signal-trend { font-size: 16px; flex-shrink: 0; }

.ci-source-badge {
  font-size: 11px;
  font-weight: 600;
  background: var(--ci-indigo-light);
  color: var(--ci-indigo-text);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--ci-indigo-border);
  flex-shrink: 0;
}

/* ── Keyword stats grid ──────────────────────────────────────── */
.ci-stats-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.ci-stat-card {
  background: var(--ci-card);
  border: 1px solid var(--ci-line);
  border-radius: var(--ci-radius);
  padding: 18px 20px;
}

.ci-stat-card.ci-stat-dark {
  background: linear-gradient(160deg, #0a0a0a 0%, #2a2018 100%);
  color: #fff;
  border-color: transparent;
}

[data-mode="internal"] .ci-stat-card.ci-stat-dark {
  background: linear-gradient(160deg, var(--ci-indigo) 0%, #2a2a4e 100%);
}

.ci-stat-label {
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ci-muted);
  font-weight: 700;
  margin-bottom: 8px;
}

.ci-stat-dark .ci-stat-label { color: #ffd8b8; }
[data-mode="internal"] .ci-stat-dark .ci-stat-label { color: var(--ci-indigo-border); }

.ci-stat-num { font-size: 36px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.ci-stat-num-sm { font-size: 18px !important; }
.ci-stat-sub { font-size: 12px; color: var(--ci-muted); margin-top: 4px; }
.ci-stat-dark .ci-stat-sub { color: #c9b8a8; }

/* ── Frequency chart ─────────────────────────────────────────── */
.ci-freq-chart { width: 100%; height: 80px; display: block; overflow: visible; }

/* ── Who said it ─────────────────────────────────────────────── */
.ci-who-text { font-size: 14px; color: #333; line-height: 1.55; margin-bottom: 12px; }

.ci-split-bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: #f1efec;
  margin-bottom: 8px;
}

.ci-split-a { background: var(--ci-ink); }
.ci-split-b { background: var(--ci-accent); }
[data-mode="internal"] .ci-split-b { background: var(--ci-indigo-text); }

.ci-split-legend {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ci-muted);
  flex-wrap: wrap;
  gap: 10px;
}

.ci-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.ci-dot-dark { background: var(--ci-ink); }
.ci-dot-accent { background: var(--ci-accent); }
[data-mode="internal"] .ci-dot-accent { background: var(--ci-indigo-text); }

/* ── Sentiment bar ───────────────────────────────────────────── */
.ci-sentiment-row {
  display: flex;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 8px;
  background: #f1efec;
}

.ci-sent-pos { background: #4caf7d; }
.ci-sent-neu { background: #ddd; }
.ci-sent-neg { background: #e06b5a; }

/* ── Chips ───────────────────────────────────────────────────── */
.ci-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ci-chip { font-size: 12px; background: #f4f2ee; padding: 5px 10px; border-radius: 6px; color: #444; }
.ci-chip-dark { background: #1a1a1a !important; color: #fff !important; }

/* ── Snippet cards ───────────────────────────────────────────── */
.ci-snippets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.ci-snippet {
  background: #fafaf7;
  border: 1px dashed #d8d5cf;
  border-radius: 10px;
  padding: 14px 16px;
}

.ci-snippet-persona {
  font-size: 10px;
  font-weight: 700;
  color: var(--ci-accent);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 6px;
}

[data-mode="internal"] .ci-snippet-persona { color: var(--ci-indigo-text); }

.ci-snippet-q {
  font-size: 13px;
  line-height: 1.6;
  color: #333;
  font-style: italic;
}

.ci-redacted {
  display: inline-block;
  background: #1a1a1a;
  color: transparent;
  border-radius: 3px;
  padding: 0 4px;
  user-select: none;
  letter-spacing: 2px;
}

.ci-snippet-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  gap: 6px;
}

.ci-snippet-meta { font-size: 11px; color: var(--ci-muted); }

.ci-snippet-mode-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.ci-badge-real { background: #e8f5e9; color: #2e7d32; }
.ci-badge-sim { background: #fff3e0; color: #e65100; }

/* ── Privacy note ────────────────────────────────────────────── */
.ci-privacy-note {
  background: #fff7ef;
  border: 1px solid #ffd8b8;
  border-radius: 10px;
  padding: 11px 15px;
  font-size: 12px;
  color: #7a4a18;
  margin-bottom: 10px;
}

[data-mode="internal"] .ci-privacy-note {
  background: var(--ci-indigo-light);
  border-color: var(--ci-indigo-border);
  color: var(--ci-indigo-text);
}

/* ── Teaser theme cards ──────────────────────────────────────── */
.ci-themes-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }

.ci-theme-card {
  background: #fafaf7;
  border: 1px dashed #d8d5cf;
  border-radius: 10px;
  padding: 12px 16px;
}

.ci-theme-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ci-ink);
  margin-bottom: 4px;
}

.ci-theme-desc {
  font-size: 12px;
  color: #555;
  line-height: 1.5;
  filter: blur(4px);
  user-select: none;
}

[data-mode="internal"] .ci-theme-desc { filter: none; }

/* ── Skeleton shimmer ────────────────────────────────────────── */
.ci-skel {
  background: linear-gradient(90deg, #f0efec 25%, #f7f6f3 37%, #f0efec 63%);
  background-size: 400% 100%;
  animation: ci-shimmer 1.4s infinite;
  height: 14px;
  border-radius: 4px;
  margin: 10px 0;
}

.ci-skel-mid { width: 78%; }
.ci-skel-short { width: 52%; }

@keyframes ci-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ── Toast ───────────────────────────────────────────────────── */
.ci-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ci-ink);
  color: #fff;
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 9999;
  white-space: nowrap;
}

.ci-toast.ci-toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  .ci-stats-grid { grid-template-columns: 1fr; }
  .ci-snippets { grid-template-columns: 1fr; }
  .ci-hero-label { font-size: 20px; }
  .ci-gap-viz { flex-direction: column; }
  .ci-gap-arrow { display: none; }
}