*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; max-width: 900px; margin: 2rem auto; padding: 0 1rem; color: #1a1a1a; }
h1 { font-size: 1.4rem; margin-bottom: 1.5rem; }
section { margin-bottom: 1.5rem; }
label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.3rem; color: #555; }
input[type="text"], input[type="password"], textarea { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #ccc; border-radius: 4px; font-size: 0.95rem; font-family: inherit; }
textarea { resize: vertical; min-height: 100px; }
/* Signed-in bar (both surfaces): email on the left, Log out on the right. */
.auth-bar { display: flex; align-items: center; gap: 0.5rem; justify-content: flex-end; font-size: 0.8rem; color: #555; margin-bottom: 1rem; }
.auth-bar #auth-user { margin-right: auto; }
.auth-bar button { padding: 0.3rem 0.8rem; background: #f0f0f0; color: #333; border: 1px solid #ccc; font-size: 0.8rem; }
.auth-bar button:hover { background: #e4e4e4; }
/* Login prompt shown in the extension when no token is stored. */
.login-prompt { text-align: center; padding: 1rem 0; }
button { padding: 0.5rem 1.2rem; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9rem; }
button.primary { background: #0066cc; color: white; }
button.primary:hover:not(:disabled) { background: #0052a3; }
button:disabled { opacity: 0.4; cursor: not-allowed; }
.row { display: flex; gap: 0.5rem; align-items: flex-start; flex-wrap: wrap; }
#claims-list { list-style: none; }
#claims-list li { padding: 0.75rem; border: 1px solid #e0e0e0; border-radius: 4px; margin-bottom: 0.5rem; }
.claim-text { font-size: 0.95rem; }
.claim-meta { font-size: 0.8rem; color: #777; margin-top: 0.2rem; }
/* Clickable cards (claims and signals alike) carry a jump-to-source listener in
   app.js when the extension is active; the affordance is list-agnostic so signal
   cards in #signals-list / #unchanged-list get the same cursor + hover cue. */
li.clickable { cursor: pointer; }
li.clickable:hover { border-color: #b8b8b8; }
/* Extension-only: marker showing whether a claim/signal was located in the live
   page. Filled by panel.js; empty (and invisible) in the web UI. */
.claim-anchor, .signal-anchor { margin-left: 0.4rem; font-size: 0.8rem; }
.claim-anchor.anchored, .signal-anchor.anchored { color: #0066cc; }
.claim-anchor.unanchored, .signal-anchor.unanchored { color: #bbb; }
.verdict { margin-top: 0.5rem; }
.badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; }
.badge-confirmed { background: #d4edda; color: #155724; }
.badge-divergent { background: #f8d7da; color: #721c24; }
.badge-partially_confirmed { background: #fff3cd; color: #856404; }
.badge-pending_teardown { background: #d1ecf1; color: #0c5460; }
.badge-insufficient, .badge-no_coverage { background: #e2e3e5; color: #383d41; }
.badge-validating { background: #e8f0fe; color: #0052a3; }
.badge-notable { background: #fff3cd; color: #856404; }
.badge-no-change { background: #e2e3e5; color: #383d41; }
#signals-list, #unchanged-list { list-style: none; }
#signals-list li, #unchanged-list li { padding: 0.75rem; border: 1px solid #e0e0e0; border-radius: 4px; margin-bottom: 0.5rem; }
/* "No change" signals are de-emphasized: tucked behind a toggle and muted even
   when expanded, so notable changes carry the visual weight. */
#signals-unchanged { margin-top: 0.25rem; }
.unchanged-toggle { background: none; color: #555; font-size: 0.85rem; padding: 0.25rem 0; }
.unchanged-toggle:hover { color: #1a1a1a; }
#unchanged-list { margin-top: 0.5rem; }
#unchanged-list li.signal-unchanged { opacity: 0.7; }
.signal-header { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; margin-bottom: 0.3rem; }
.signal-component { font-weight: 600; font-size: 0.95rem; }
.signal-entity { font-size: 0.85rem; color: #555; }
.signal-values { font-size: 0.85rem; margin: 0.25rem 0; }
.signal-values .arrow { color: #0066cc; margin: 0 0.3rem; }
.signal-desc { font-size: 0.9rem; margin-top: 0.25rem; }
.signal-significance { font-size: 0.85rem; color: #555; margin-top: 0.2rem; font-style: italic; }
.signal-excerpt { font-size: 0.8rem; color: #777; margin-top: 0.2rem; border-left: 2px solid #e0e0e0; padding-left: 0.5rem; }
.verdict-summary { font-size: 0.85rem; margin-top: 0.25rem; }
.sources { font-size: 0.8rem; margin-top: 0.25rem; }
.sources a { color: #0066cc; margin-right: 0.5rem; }
#chat-log { list-style: none; max-height: 350px; overflow-y: auto; border: 1px solid #e0e0e0; border-radius: 4px; padding: 0.75rem; margin-bottom: 0.5rem; }
#chat-log li { padding: 0.4rem 0; }
#chat-log li.user { text-align: right; }
#chat-log li.user span, #chat-log li.assistant span { padding: 0.3rem 0.6rem; border-radius: 12px; display: inline-block; font-size: 0.9rem; }
#chat-log li.user span { background: #e8f0fe; }
#chat-log li.assistant span { background: #f1f3f4; }
.chat-sources { font-size: 0.75rem; margin-top: 0.2rem; }
.chat-sources a { color: #0066cc; margin-right: 0.4rem; }
#status { font-size: 0.85rem; color: #555; min-height: 1.2rem; margin-top: 0.3rem; }
#status.error { color: #c00; }