/* ChatCom themes */

chatcom-widget[data-theme="light"] {
  --chatcom-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --chatcom-font-size: 14px;
  --chatcom-line-height: 1.5;
  --chatcom-text: #1e293b;
  --chatcom-muted: #64748b;
  --chatcom-danger: #ef4444;
  --chatcom-border: #e2e8f0;
  --chatcom-radius: 8px;
  --chatcom-bg: #ffffff;
  --chatcom-primary: #6366f1;
  --chatcom-primary-hover: #4f46e5;
  --chatcom-avatar-size: 32px;
  --chatcom-indent: 24px;
}

chatcom-widget[data-theme="dark"] {
  --chatcom-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --chatcom-font-size: 14px;
  --chatcom-line-height: 1.5;
  --chatcom-text: #f1f5f9;
  --chatcom-muted: #94a3b8;
  --chatcom-danger: #f87171;
  --chatcom-border: #334155;
  --chatcom-radius: 8px;
  --chatcom-bg: #1e293b;
  --chatcom-primary: #818cf8;
  --chatcom-primary-hover: #a5b4fc;
  --chatcom-avatar-size: 32px;
  --chatcom-indent: 24px;
}

chatcom-widget[data-theme="minimal"] {
  --chatcom-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --chatcom-font-size: 14px;
  --chatcom-line-height: 1.5;
  --chatcom-text: #111827;
  --chatcom-muted: #6b7280;
  --chatcom-danger: #dc2626;
  --chatcom-border: #e5e7eb;
  --chatcom-radius: 2px;
  --chatcom-bg: transparent;
  --chatcom-primary: #111827;
  --chatcom-primary-hover: #374151;
  --chatcom-avatar-size: 28px;
  --chatcom-indent: 20px;
}

/* The card look in styles.ts (border + shadow + radius + background) reads
   as "minimal" only by accident on a white page, where --chatcom-bg's
   transparent value visually blends into it — on any other host background
   it's still a shadowed box. Give this theme an actual identity instead:
   a flat hairline-divider list, no box, no shadow — what "minimal" is
   supposed to mean regardless of the host page's own background. */
chatcom-widget[data-theme="minimal"] .chatcom-comment:not(.chatcom-comment--nested) {
  padding: 14px 0;
  border: none;
  border-bottom: 1px solid var(--chatcom-border);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
chatcom-widget[data-theme="minimal"] .chatcom-rating-btn {
  border-radius: 4px;
}
chatcom-widget[data-theme="minimal"] .chatcom-ads {
  border: none;
  border-top: 1px solid var(--chatcom-border);
  border-radius: 0;
  padding: 10px 0;
}