/* Evidence preview component - centralized styles */

:root {
  --color-text-primary: #2d2d2d;
  --color-text-secondary: #5a5a5a;
  --color-border: #e5e7eb;
  --color-background-light: #f5f5f5;
  --color-primary: #007CAF;
  --color-primary-dark: #005a80;
  
  /* Status colors */
  --color-verified-bg: #b6e4d1;
  --color-verified-text: #1b4637;
  --color-needs-evidence-bg: #ffeecc;
  --color-needs-evidence-text: #665201;
  --color-disputed-bg: #ffc8dd;
  --color-disputed-text: #813c47;
  --color-under-review-bg: #90dcff;
  --color-under-review-text: #0b71a7;
  
  /* Semantic hook colors */
  --color-why-it-matters-bg: #e7f4ea;
  --color-context-bg: #e7f2f9;
  --color-core-claim-bg: #f0e7f9;
  --color-supporting-bg: #faf0e6;
}

/* Evidence preview (oval) - Borderless design with conversational language */
.evidence-preview {
  position: relative;
  padding: 24px; /* Increased from 16px - more breathing room */
  background-color: var(--color-background-light);
  border-radius: 12px; /* More generous rounding */
  margin-left: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); /* Subtle shadow instead of panel-shadow */
  margin-bottom: 32px; /* Increased from 24px - more space between evidence sections */
  border: none; /* Remove all borders */
}

/* Connector line from claim to evidence - REMOVED */
/* .evidence-preview::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 24px;
  width: 2px;
  height: 16px;
  background-color: var(--color-border);
} */

/* Evidence title - improved typography without changing colors */
.evidence-title {
  font-weight: 600; /* Stronger weight */
  font-size: 0; /* Hide original text cleanly */
  color: var(--text-hook-label);
  text-transform: uppercase;
  letter-spacing: 0.02em; /* Much tighter */
  margin-bottom: 20px; /* Increased from 16px - more space after title */
  display: flex;
  align-items: center;
  opacity: 0.7; /* Softer without changing color */
}

/* Conversational evidence hooks - improved typography */
.evidence-title::before {
  content: "What we found"; /* UX expert: tighter, more conversational */
  font-size: 0.7rem; /* Even smaller */
  font-weight: 600; /* Stronger weight */
  color: var(--text-hook-label);
  text-transform: uppercase;
  letter-spacing: 0.02em; /* Much tighter */
  opacity: 1; /* Reset opacity for pseudo-element */
}

.evidence-title.context::before {
  content: "The real story";
  font-size: 0.7rem; /* Even smaller */
  font-weight: 600; /* Stronger weight */
  color: var(--text-hook-label);
  text-transform: uppercase;
  letter-spacing: 0.02em; /* Much tighter */
  opacity: 1; /* Reset opacity for pseudo-element */
}

.evidence-title.analysis::before {
  content: "Breaking it down";
  font-size: 0.7rem; /* Even smaller */
  font-weight: 600; /* Stronger weight */
  color: var(--text-hook-label);
  text-transform: uppercase;
  letter-spacing: 0.02em; /* Much tighter */
  opacity: 1; /* Reset opacity for pseudo-element */
}

.evidence-title.data::before {
  content: "What the data shows";
  font-size: 0.7rem; /* Even smaller */
  font-weight: 600; /* Stronger weight */
  color: var(--text-hook-label);
  text-transform: uppercase;
  letter-spacing: 0.02em; /* Much tighter */
  opacity: 1; /* Reset opacity for pseudo-element */
}

.evidence-title.findings::before {
  content: "The facts say...";
  font-size: 0.7rem; /* Even smaller */
  font-weight: 600; /* Stronger weight */
  color: var(--text-hook-label);
  text-transform: uppercase;
  letter-spacing: 0.02em; /* Much tighter */
  opacity: 1; /* Reset opacity for pseudo-element */
}

.evidence-summary {
  font-size: 16px;
  font-weight: var(--weight-regular);
  margin-bottom: 20px; /* Increased from 16px - better spacing */
  line-height: 1.7; /* Better readability */
}

.expand-button {
  font-size: 14px;
  color: var(--color-primary);
  background: none;
  border: none;
  padding: 6px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  margin-left: -6px;
  font-weight: var(--weight-medium);
}

.expand-button:hover {
  background-color: rgba(0, 124, 175, 0.08);
  text-decoration: none;
}

.expand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  transition: transform 0.3s ease;
  font-size: 14px;
}

.expanded .expand-icon {
  transform: rotate(180deg);
}

/* Evidence details (expanded state) - Borderless design */
.evidence-details {
  display: none;
  margin-top: 24px; /* Increased from 16px - more space before details */
  padding-top: 24px; /* Increased from 16px - more internal padding */
  border-top: 1px solid rgba(0, 0, 0, 0.06); /* Super subtle separator */
}

.expanded .evidence-details {
  display: block;
}

.evidence-source {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
}

.evidence-quote {
  padding-left: 16px;
  border-left: 3px solid var(--color-primary);
  font-style: italic;
  margin-bottom: 20px; /* Increased from 16px - better spacing */
  line-height: 1.6; /* Better readability */
}

.evidence-analysis {
  margin-bottom: 20px; /* Increased from 16px - better spacing */
  line-height: 1.7; /* Better readability */
}

.evidence-stats {
  display: flex;
  gap: 16px;
  font-size: 14px;
  color: var(--color-text-secondary);
}

.evidence-stats span {
  display: flex;
  align-items: center;
}

.evidence-stats .icon {
  margin-right: 4px;
}

/* Demo container - borderless */
.demo-container {
  padding: 24px;
  border: none; /* Remove border */
  border-radius: 12px;
  margin-bottom: 24px;
  background-color: var(--color-background-light);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); /* Subtle shadow */
}

.demo-controls {
  margin-bottom: 24px;
  display: flex;
  gap: 16px;
}

.demo-button {
  background-color: var(--color-primary);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
}

.demo-button:hover {
  background-color: var(--color-primary-dark);
}

/* Claim section styles for demo */
.claim-section {
  margin-bottom: 24px;
}

.section-header {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0;
  background: none;
  border-radius: 0;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

.section-header .icon {
  margin-right: 8px;
  font-size: 16px; /* Proper size for section header emojis */
  font-family: "Noto Color Emoji", "Noto Emoji" !important; /* Force Google emojis */
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
  color: initial !important; /* Reset color to show emoji colors */
  -webkit-text-fill-color: initial !important; /* Safari fix */
  filter: none !important; /* Remove any filters */
}

.core-claim-header {
  /* background-color: var(--color-core-claim-bg); */
}

.supporting-header {
  /* background-color: var(--color-supporting-bg); */
}

.claim-container {
  position: relative;
  margin-bottom: 16px;
}

.claim-content {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 16px;
  line-height: 1.5;
}

/* Status chip/badge */
.status-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 16px;
}

.status-verified {
  background-color: var(--color-verified-bg);
  color: var(--color-verified-text);
}

.status-disputed {
  background-color: var(--color-disputed-bg);
  color: var(--color-disputed-text);
}

.status-needs-evidence {
  background-color: var(--color-needs-evidence-bg);
  color: var(--color-needs-evidence-text);
}

.status-under-review {
  background-color: var(--color-under-review-bg);
  color: var(--color-under-review-text);
}

/* Evidence controls (for multi-evidence containers) */
.evidence-controls {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.evidence-control-btn {
  padding: 8px 16px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.evidence-control-btn:hover {
  background-color: #e0e0e0;
}