/* Replica of the extension's sidebar (chrome-extension/sidebar.css), scoped to
   #replica-root so the dark-mode styles don't bleed into the rest of the page.
   The real extension uses position:fixed against the YouTube viewport; this
   replica is laid out inline by the page's flex container and has its own
   internal scroll. Chyron/overlay rules are intentionally omitted — they live
   inside the YouTube player iframe, which we can't inject into from this origin.
*/

#replica-root {
  width: 100%;
  background: rgba(15, 17, 22, 0.96);
  color: #e6e8ee;
  font: 13px/1.45 -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  border: 1px solid #262a33;
  border-radius: 8px;
  box-shadow: -2px 0 16px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 480px;
}

@media (min-width: 1024px) {
  #replica-root { height: 100%; min-height: 0; }
}

#replica-root .fcs-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid #262a33;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #8a93a6;
  flex-shrink: 0;
}
#replica-root .fcs-head .fcs-title {
  color: #e6e8ee; text-transform: none; letter-spacing: 0;
  font-weight: 600; font-size: 12px;
}
#replica-root .fcs-head .fcs-demo-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(240, 185, 106, 0.15);
  color: #f0b96a;
}

/* Recorded/live mode toggle — replaces the static DEMO pill. Two-button group
   that flips the ?live= URL param. Active state highlighted; inactive is
   clickable to switch. Live-active button gets a slow pulse. */
#replica-root .fcs-mode-toggle {
  display: inline-flex;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  padding: 2px;
  gap: 1px;
}
#replica-root .fcs-mode-btn {
  background: transparent;
  border: none;
  color: #8a93a6;
  padding: 2px 8px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-family: inherit;
  transition: color 0.15s, background 0.15s;
}
#replica-root .fcs-mode-btn:hover { color: #e6e8ee; }
#replica-root .fcs-mode-btn.active[data-mode="recorded"] {
  background: rgba(240, 185, 106, 0.18);
  color: #f0b96a;
}
#replica-root .fcs-mode-btn.active[data-mode="live"] {
  background: rgba(220, 80, 80, 0.20);
  color: #e69191;
  animation: replica-mode-pulse 1.6s ease-in-out infinite;
}
@keyframes replica-mode-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 80, 80, 0); }
  50%      { box-shadow: 0 0 0 3px rgba(220, 80, 80, 0.15); }
}

#replica-root .fcs-meta {
  padding: 6px 10px;
  font-size: 10px;
  color: #525968;
  border-bottom: 1px solid #262a33;
  flex-shrink: 0;
  display: flex; justify-content: space-between; gap: 8px;
}
#replica-root .fcs-meta .fcs-status { font-variant-numeric: tabular-nums; }
#replica-root .fcs-meta .fcs-live::before {
  content: "● ";
  color: #6cd28d;
  animation: replica-pulse 1.5s infinite;
}
@keyframes replica-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

#replica-root .fcs-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

#replica-root .fcs-empty {
  color: #525968;
  text-align: center;
  padding: 20px 10px;
  font-size: 12px;
  font-style: italic;
}

#replica-root .fcs-card {
  background: #1c1f26;
  border: 1px solid #262a33;
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
  position: relative;
  animation: replica-arrival-soft 0.5s ease-out;
}
#replica-root .fcs-card .fcs-tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #f0b96a;
  font-weight: 600;
  margin-bottom: 4px;
  display: flex; justify-content: space-between; align-items: baseline;
}
#replica-root .fcs-card .fcs-tag .fcs-cue {
  color: #8a93a6; font-weight: 400; font-variant-numeric: tabular-nums;
}

#replica-root .fcs-tag-label { display: inline-flex; align-items: center; gap: 5px; }
#replica-root .fcs-conf-emoji {
  font-size: 13px;
  line-height: 1;
  filter: saturate(1.1);
  flex-shrink: 0;
}

#replica-root .fcs-card.fcs-conf-4 {
  background: #1e1d22;
  border-color: rgba(230, 130, 50, 0.4);
  border-left: 2px solid rgba(230, 130, 50, 0.7);
  animation: replica-arrival-moderate 1.5s ease-out;
}
#replica-root .fcs-card.fcs-conf-5 {
  background: #221b1c;
  border-color: rgba(220, 70, 70, 0.55);
  border-left: 3px solid #dc5050;
  animation: replica-arrival-strong 1.5s ease-out;
}

@keyframes replica-arrival-moderate {
  0%   { transform: scale(0.98); box-shadow: 0 0 0 0 rgba(230, 130, 50, 0); }
  18%  { transform: scale(1.01); box-shadow: 0 0 14px 3px rgba(230, 130, 50, 0.45); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(230, 130, 50, 0); }
}
@keyframes replica-arrival-strong {
  0%   { transform: scale(0.96); box-shadow: 0 0 0 0 rgba(220, 70, 70, 0); }
  14%  { transform: scale(1.015); box-shadow: 0 0 20px 6px rgba(220, 70, 70, 0.6); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(220, 70, 70, 0); }
}
@keyframes replica-arrival-soft {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

#replica-root .fcs-citation {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed #262a33;
  font-size: 11px;
  color: #8a93a6;
}
#replica-root .fcs-citation-link {
  color: #f0b96a;
  text-decoration: none;
  font-weight: 500;
  display: inline-block;
  margin-bottom: 2px;
  word-break: break-word;
}
#replica-root .fcs-citation-link::after {
  content: " ↗";
  color: #8a6f32;
  font-size: 10px;
}
#replica-root .fcs-citation-link:hover { text-decoration: underline; }
#replica-root .fcs-citation-excerpt {
  font-size: 11px;
  line-height: 1.4;
  color: #8a93a6;
  font-style: italic;
}
#replica-root .fcs-card .fcs-text { color: #e6e8ee; line-height: 1.5; font-size: 13px; }

#replica-root .fcs-ghost {
  color: #525968;
  font-size: 10px;
  font-style: italic;
  padding: 3px 4px;
  display: flex; gap: 8px;
  animation: replica-arrival-soft 0.3s ease-out;
}
#replica-root .fcs-ghost .fcs-cue { font-variant-numeric: tabular-nums; min-width: 40px; }

#replica-root .fcs-cue.fcs-jumpable {
  cursor: pointer;
  transition: color 0.15s, text-decoration-color 0.15s;
  text-decoration: underline dotted transparent;
  text-underline-offset: 2px;
}
#replica-root .fcs-cue.fcs-jumpable:hover {
  color: #f0b96a;
  text-decoration-color: #f0b96a;
}

#replica-root .fcs-consensus {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  cursor: help;
  vertical-align: middle;
}
#replica-root .fcs-consensus.fcs-cn-strong  { background: rgba(108, 210, 141, 0.18); color: #6cd28d; }
#replica-root .fcs-consensus.fcs-cn-partial { background: rgba(240, 185, 106, 0.18); color: #f0b96a; }
#replica-root .fcs-consensus.fcs-cn-weak    { background: rgba(220,  90,  90, 0.20); color: #e69191; }

#replica-root .fcs-card.fcs-dossier {
  background: #19202a;
  border-color: rgba(120, 170, 220, 0.4);
  border-left: 2px solid rgba(120, 170, 220, 0.7);
  animation: replica-arrival-dossier 1.5s ease-out;
}
#replica-root .fcs-card.fcs-dossier .fcs-tag { color: #8bb4e0; }
#replica-root .fcs-card.fcs-dossier .fcs-tag-label { font-weight: 700; }
#replica-root .fcs-card.fcs-dossier .fcs-dossier-channel {
  font-size: 10px;
  color: #8a93a6;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#replica-root .fcs-card.fcs-dossier .fcs-text {
  line-height: 1.55;
  font-size: 12.5px;
}

@keyframes replica-arrival-dossier {
  0%   { transform: scale(0.99); box-shadow: 0 0 0 0 rgba(120, 170, 220, 0); }
  20%  { transform: scale(1.005); box-shadow: 0 0 12px 2px rgba(120, 170, 220, 0.3); }
  100% { transform: scale(1);     box-shadow: 0 0 0 0 rgba(120, 170, 220, 0); }
}

/* Sponsored ad cards. Visually distinct from fact-check cards — slate-tinted
   background (no warm amber/red), no confidence emoji, prominent SPONSORED
   pill, dashed footer for the FTC-compliant disclosure. The classifier never
   sees ad inventory; ad placement is purely card-count-based, so there's no
   risk of advertising influencing confidence scores. */
#replica-root .fcs-card.fcs-ad {
  background: #1a1d24;
  border: 1px solid #2c313c;
  border-left: 2px solid #4b6273;
  padding: 10px 12px;
  animation: replica-arrival-ad 0.6s ease-out;
}
#replica-root .fcs-card.fcs-ad .fcs-ad-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
#replica-root .fcs-card.fcs-ad .fcs-ad-pill {
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(140, 165, 188, 0.18);
  color: #b4c5d4;
}
#replica-root .fcs-card.fcs-ad .fcs-ad-source {
  color: #525968;
  font-weight: 500;
}
#replica-root .fcs-card.fcs-ad .fcs-ad-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
#replica-root .fcs-card.fcs-ad .fcs-ad-link:hover .fcs-ad-headline {
  color: #f0b96a;
}
#replica-root .fcs-card.fcs-ad .fcs-ad-headline {
  font-size: 13px;
  font-weight: 600;
  color: #e6e8ee;
  line-height: 1.35;
  margin-bottom: 3px;
  transition: color 0.15s;
}
#replica-root .fcs-card.fcs-ad .fcs-ad-tagline {
  font-size: 11.5px;
  line-height: 1.4;
  color: #a3acba;
}
#replica-root .fcs-card.fcs-ad .fcs-ad-footer {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed #2c313c;
  font-size: 10px;
  color: #525968;
  font-style: italic;
}
@keyframes replica-arrival-ad {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}