scepticagent-styles

Highlight categories

Category	CSS class suffix	Color	Meaning
misinformation	misinformation	#ff6b6b (red)	False, misleading, or lacking critical context
emotional	emotional	#ffa94d (orange)	Fear appeals, outrage bait, us-vs-them framing
bias	bias	#ffd43b (yellow)	Biased framing, selective emphasis, loaded language
supported	supported	#69db7c (green)	Well-supported, verified claim
logical	logical	#da77f2 (purple)	Internal contradiction, non-sequitur, false dichotomy

All five category colours are duplicated across four CSS selectors each: .scan-pill.{cat}, .hl-dot.{cat}, .hl-item-dot.{cat}, .summary-bullet-{cat}

---

Markdown renderer (sidepanel/app.js — renderMarkdown function)

• listType is a string ("ul" / "ol" / null) — not a boolean. The closeList() helper checks if (listType).
• List items are matched against trimmed lines (after .trim()), not raw lines — required to handle indented list items correctly.
• ## heading lines → collapsible <h2> + <div class="section-body">. Clicking the heading toggles .collapsed class, which hides the body via CSS.
• Blank lines → <br> (not </p><p>).
• Links: [text](url) → <a target="_blank" rel="noopener noreferrer">.
• Analysis preamble appearing before the first \n## heading is skipped entirely and not rendered — the renderer starts output from the first ## section.

---

CSS architecture (sidepanel/style.css)

Dark theme palette (hardcoded — no CSS custom properties):

Role	Value
Background	#1a1b1e
Surface (cards, inputs)	#25262b
Border	#373a40
Primary text	#c9d1d9
Accent blue	#4dabf7

Key component classes:

• #highlight-summary — summary card: background: #25262b, border: 1px solid #373a40, border-radius: 8px
• .section-body — collapsible analysis section body, hidden when parent <h2> has .collapsed
• .scan-pill — top-of-panel category pill counts (e.g. "3 misinformation")
• .hl-item — individual highlight entry in the list
• .hl-dot / .hl-item-dot — colored dot next to a highlight

Note: There are no CSS custom properties (--var) in this codebase. All colour values are hardcoded literals. When adding new colours, continue this pattern.