/* ==========================================================================
   CVE Risk Analyzer — GitHub-inspired Design System
   ========================================================================== */

:root {
  --color-header: #24292f;
  --color-header-text: #ffffffb3;
  --color-header-active: #ffffff;
  --color-bg: #f6f8fa;
  --color-surface: #ffffff;
  --color-border: #d0d7de;
  --color-border-muted: #d8dee4;
  --color-text: #1f2328;
  --color-text-secondary: #656d76;
  --color-link: #0969da;
  --color-accent: #2da44e;
  --color-accent-hover: #2c974b;
  --color-danger: #cf222e;
  --color-danger-bg: #ffebe9;
  --color-success-bg: #dafbe1;
  --color-success-text: #1a7f37;
  --color-warning-bg: #fff8c5;
  --color-warning-text: #9a6700;
  --color-info-bg: #ddf4ff;
  --color-info-text: #0969da;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 0.9375rem;
  --text-lg: 1.0625rem; --text-xl: 1.25rem; --text-2xl: 1.5rem;
  --radius: 6px; --radius-lg: 8px;
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem; --space-10: 2.5rem;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0; padding: 0;
  font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.5;
  color: var(--color-text); background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-link); }
a:visited { color: var(--color-link); }

.app-header {
  background: var(--color-header); color: var(--color-header-text);
  padding: 0 var(--space-4); height: 56px;
  display: flex; align-items: center; gap: var(--space-4);
  font-size: var(--text-sm); font-weight: 600;
}
.app-header .brand { color: var(--color-header-active); text-decoration: none; font-size: var(--text-sm); font-weight: 600; display: flex; align-items: center; gap: var(--space-2); }
.app-header .brand::before { content: "🛡️"; font-size: 1.1rem; }
.app-header nav { display: flex; align-items: center; gap: var(--space-1); flex: 1; }
.app-header nav a { color: var(--color-header-text); text-decoration: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius); transition: background 0.12s, color 0.12s; font-weight: 500; font-size: var(--text-sm); }
.app-header nav a:hover { background: rgba(255,255,255,0.08); color: var(--color-header-active); }
.app-header nav a[aria-current="page"] { color: var(--color-header-active); background: rgba(255,255,255,0.1); }
.nav-dropdown { position: relative; }
.nav-dropdown__toggle { display: inline-block; color: var(--color-header-text); padding: var(--space-2) var(--space-3); border-radius: var(--radius); font-weight: 500; font-size: var(--text-sm); cursor: default; transition: background 0.12s, color 0.12s; }
.nav-dropdown:hover .nav-dropdown__toggle, .nav-dropdown:focus-within .nav-dropdown__toggle, .nav-dropdown__toggle--active { background: rgba(255,255,255,0.08); color: var(--color-header-active); }
.nav-dropdown__menu { display: none; position: absolute; top: 100%; left: 0; min-width: 170px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 20; padding: var(--space-1) 0; }
.nav-dropdown:hover .nav-dropdown__menu, .nav-dropdown:focus-within .nav-dropdown__menu { display: block; }
.nav-dropdown__menu a { display: block; color: var(--color-text) !important; padding: var(--space-2) var(--space-3) !important; border-radius: 0 !important; font-weight: 400 !important; }
.nav-dropdown__menu a:hover { background: rgba(0,0,0,0.05) !important; color: var(--color-text) !important; }
.nav-dropdown__menu a[aria-current="page"] { font-weight: 600 !important; background: none !important; }

.app-header .header-right { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.app-header .header-right span { color: var(--color-header-text); font-weight: 400; }
.app-header .header-right a, .app-header .header-right button { color: var(--color-header-text); text-decoration: none; background: none; border: 1px solid rgba(255,255,255,0.2); padding: var(--space-1) var(--space-3); border-radius: var(--radius); cursor: pointer; font-size: var(--text-xs); font-weight: 500; font-family: inherit; transition: all 0.12s; }
.app-header .header-right a:hover, .app-header .header-right button:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.3); }

.notify-bell { position: relative; color: var(--color-header-text) !important; border: none !important; font-size: var(--text-base) !important; padding: var(--space-2) !important; }
.notify-bell:hover { color: var(--color-header-active) !important; }
.notify-bell--budget { cursor: default; }
.notify-bell--warning { color: #f59e0b !important; }
.notify-bell--critical { color: #f97316 !important; }
.notify-bell--error { color: #ef4444 !important; }
.api-budget-banner { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.api-budget-banner__icon { flex-shrink: 0; }
.api-budget-banner--warning { background: #fef3c7; color: #92400e; border-bottom: 1px solid #f59e0b; }
.api-budget-banner--critical { background: #ffedd5; color: #9a3412; border-bottom: 1px solid #f97316; }
.api-budget-banner--error { background: #fee2e2; color: #991b1b; border-bottom: 1px solid #ef4444; }
[data-theme="dark"] .api-budget-banner--warning { background: #451a03; color: #fde68a; border-color: #b45309; }
[data-theme="dark"] .api-budget-banner--critical { background: #431407; color: #fed7aa; border-color: #c2410c; }
[data-theme="dark"] .api-budget-banner--error { background: #450a0a; color: #fecaca; border-color: #b91c1c; }
.notify-count { position: absolute; top: 0; right: 0; background: var(--color-accent); color: #fff; font-size: 0.6rem; font-weight: 700; min-width: 15px; height: 15px; line-height: 15px; text-align: center; border-radius: 999px; padding: 0 3px; transform: translate(4px, -4px); }

.plan-badge { display: inline-block; font-size: 0.65rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.5px; vertical-align: middle; }
.plan-badge-free { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.15); }
.plan-badge-plus { background: #1a365d; color: #90cdf4; border: 1px solid #2b6cb0; }
.plan-badge-pro { background: #1b4332; color: #95d5b2; border: 1px solid #2d6a4f; }

.app-main { max-width: 960px; margin: var(--space-6) auto; padding: 0 var(--space-4); }
/* Data-dense pages (e.g. the per-asset report) opt into full page width so wide
   tables aren't squeezed into the 960px reading column. --wide also reserves room for
   the fixed chat sidebar (see below) -- pages with no sidebar use --full instead so they
   don't lose 380px of width to a sidebar that isn't there. */
.app-main--wide { max-width: none; padding-left: var(--space-6); padding-right: var(--space-6); }
.app-main--full { max-width: none; padding-left: var(--space-6); padding-right: var(--space-6); }

/* AI justification: readable line length instead of a rigid narrow column that
   forced very tall rows. The column sizes to content up to this cap. */
.just-text { max-width: 60ch; }

/* C1/C3: AI summary column justifying the contextual score/band — same readable-width cap. */
.hjust-text { min-width: 36ch; max-width: 64ch; font-size: var(--text-sm); color: var(--color-text); line-height: 1.5; white-space: pre-wrap; }
.hjust-pending { font-size: var(--text-xs); color: var(--color-text-secondary); }

.messages { list-style: none; margin: 0 0 var(--space-4) 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.messages li { padding: var(--space-2) var(--space-4); border-radius: var(--radius); font-size: var(--text-sm); border: 1px solid transparent; }
.messages .success { background: var(--color-success-bg); border-color: #4ac26b66; color: var(--color-success-text); }
.messages .error { background: var(--color-danger-bg); border-color: #ff818266; color: var(--color-danger); }
.messages .warning { background: var(--color-warning-bg); border-color: #d4a72c66; color: var(--color-warning-text); }
.messages .info { background: var(--color-info-bg); border-color: #54aeff66; color: var(--color-info-text); }

.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-4); }
.card-header { font-size: var(--text-base); font-weight: 600; padding-bottom: var(--space-3); margin-bottom: var(--space-3); border-bottom: 1px solid var(--color-border-muted); }

table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th { text-align: left; padding: var(--space-2) var(--space-3); font-weight: 600; color: var(--color-text-secondary); border-bottom: 2px solid var(--color-border); white-space: nowrap; }
td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border-muted); vertical-align: top; }
tr:hover td { background: var(--color-bg); }

button, .btn { display: inline-block; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; padding: var(--space-1) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg); color: var(--color-text); cursor: pointer; text-decoration: none; line-height: 1.5; transition: all 0.12s; white-space: nowrap; }
button:hover, .btn:hover { background: #eaeef2; }
.btn-primary { background: var(--color-accent); color: #fff; border-color: #1f883d; }
.btn-primary:hover { background: var(--color-accent-hover); }
.btn-demo { border-color: #f59e0b; color: #92400e; background: #fffbeb; }
.btn-demo:hover { background: #fef3c7; }

.demo-banner { background: #fef3c7; color: #92400e; text-align: center; padding: var(--space-2) var(--space-4); font-size: var(--text-sm); font-weight: 500; border-bottom: 2px solid #f59e0b; }
/* z-index above .chat-sidebar's 40 — the fixed sidebar starts right under the header, at the
   same vertical position banners occupy, and would otherwise render on top of (and cover) a
   banner's dismiss button in that overlapping strip. */
.dismissible-banner { display: flex; align-items: center; justify-content: center; gap: var(--space-2); position: relative; z-index: 50; }
.dismissible-banner__close { position: absolute; right: var(--space-3); background: none; border: 1px solid #f59e0b; color: #92400e; cursor: pointer; font-size: var(--text-base); line-height: 1; padding: 0 var(--space-2); border-radius: var(--radius); transition: all 0.12s; }
.dismissible-banner__close:hover { background: rgba(245,158,11,0.18); border-color: #d97706; }
.dismissible-banner.is-dismissed { display: none; }
.cve-desc { color: var(--color-text-secondary); font-weight: normal; display: inline-block; margin-top: 2px; max-width: 42ch; }
/* --- Welcome page (anonymous landing) --- */
.welcome-main { max-width: 1080px; }
.welcome-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); align-items: center; margin: var(--space-6) 0 var(--space-10); }
.welcome-headline { font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1.15; font-weight: 700; margin: 0 0 var(--space-4); }
.welcome-accent { color: var(--color-accent); }
.welcome-lede { color: var(--color-text-secondary); font-size: var(--text-lg); line-height: 1.6; max-width: 56ch; margin: 0 0 var(--space-5); }
.welcome-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.welcome-cta__lead { font-size: var(--text-base); padding: var(--space-2) var(--space-5); }
.welcome-fineprint { color: var(--color-text-secondary); font-size: var(--text-xs); margin: var(--space-5) 0 0; }

.welcome-feed__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); padding-bottom: var(--space-3); margin-bottom: var(--space-3); border-bottom: 1px solid var(--color-border-muted); }
.welcome-feed__title { font-weight: 600; }
.welcome-feed__sub { font-size: var(--text-xs); color: var(--color-text-secondary); }
.welcome-feed__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.welcome-feed__item { padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border-muted); }
.welcome-feed__item:last-child { padding-bottom: 0; border-bottom: none; }
.welcome-feed__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.welcome-feed__cve { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; }
.welcome-feed__summary { color: var(--color-text-secondary); font-size: var(--text-xs); margin: var(--space-1) 0 0; line-height: 1.5; }
.welcome-feed__empty { color: var(--color-text-secondary); font-size: var(--text-sm); margin: 0; }

.welcome-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-8); }
.welcome-feature { margin-bottom: 0; }
.welcome-feature__icon { font-size: 1.6rem; line-height: 1; margin-bottom: var(--space-2); }
.welcome-feature h3 { margin-top: 0; }
.welcome-feature p { color: var(--color-text-secondary); font-size: var(--text-sm); margin: var(--space-1) 0 0; line-height: 1.5; }

.welcome-stats { margin-bottom: var(--space-8); }

/* --- CVE lookup (cve-lookup-search, F3, Phase 2) --- */
.welcome-lookup { margin-bottom: var(--space-8); }
.welcome-lookup__title { margin: 0 0 var(--space-1); }
.welcome-lookup__hint { color: var(--color-text-secondary); font-size: var(--text-sm); margin: 0 0 var(--space-3); }
.welcome-lookup__result:not(:empty) { margin-top: var(--space-4); }
.cve-lookup-form { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.cve-lookup-form input[type="text"] { flex: 1 1 240px; }
.lookup-result__header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-1); }
.lookup-result__cve { margin: 0; font-family: var(--font-mono); }
.lookup-result__dates { color: var(--color-text-secondary); font-size: var(--text-xs); margin: 0 0 var(--space-3); }
.lookup-mitigations { margin-top: var(--space-3); }
.lookup-mitigations ul { margin: var(--space-1) 0 0 1.2em; }
.lookup-quota { color: var(--color-text-secondary); font-size: var(--text-sm); margin-top: var(--space-3); }
.lookup-error { color: var(--color-danger); font-size: var(--text-sm); }
.lookup-limit { color: var(--color-text-secondary); }
.lookup-chat { margin-top: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg); display: flex; flex-direction: column; max-height: 360px; }
.lookup-chat .chat-header { font-weight: 600; font-size: var(--text-sm); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border-muted); }

/* Subtle entrance + hover — disabled under prefers-reduced-motion */
@keyframes welcome-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.welcome-animate { animation: welcome-fade-up 0.5s ease both; }
.welcome-features.welcome-animate { animation-delay: 0.08s; }
.welcome-stats.welcome-animate { animation-delay: 0.16s; }
.welcome-cta .btn-primary, .welcome-cta .btn { transition: transform 0.12s, background 0.12s; }
.welcome-cta .btn-primary:hover, .welcome-cta .btn:hover { transform: translateY(-1px); }
@media (max-width: 760px) {
  .welcome-hero { grid-template-columns: 1fr; gap: var(--space-6); margin-bottom: var(--space-8); }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-animate { animation: none; }
  .welcome-cta .btn-primary:hover, .welcome-cta .btn:hover { transform: none; }
}
.btn-danger { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }
.btn-danger:hover { background: #a40e26; }
.btn-sm { font-size: var(--text-xs); padding: var(--space-1) var(--space-2); }

input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="number"], textarea, select { font-family: var(--font-sans); font-size: var(--text-sm); padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text); line-height: 1.5; transition: border-color 0.15s, box-shadow 0.15s; outline: none; }
input:focus, textarea:focus, select:focus { border-color: var(--color-link); box-shadow: 0 0 0 3px rgba(9,105,218,0.15); }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.stat-box { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); text-align: center; }
.stat-box .stat-value { font-size: 2rem; font-weight: 700; color: var(--color-text); line-height: 1; }
.stat-box .stat-label { font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: var(--space-1); text-transform: uppercase; letter-spacing: 0.05em; }
.stat-box.stat-danger .stat-value { color: var(--color-danger); }
.stat-box.stat-warning .stat-value { color: #bf8700; }
.stat-box.stat-success .stat-value { color: var(--color-accent); }
.stat-sub { margin-top: var(--space-2); display: flex; gap: var(--space-1); justify-content: center; flex-wrap: wrap; }
.active-toggle { color: var(--color-text); }

.badge { display: inline-block; font-size: var(--text-xs); font-weight: 500; padding: 0 var(--space-2); border-radius: 999px; line-height: 1.5; }
.badge-green { background: var(--color-success-bg); color: var(--color-success-text); }
.badge-red { background: var(--color-danger-bg); color: var(--color-danger); }
.badge-yellow { background: var(--color-warning-bg); color: var(--color-warning-text); }

h1 { font-size: var(--text-2xl); font-weight: 600; margin: 0 0 var(--space-3); }
h2 { font-size: var(--text-xl); font-weight: 600; margin: var(--space-6) 0 var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border-muted); }
h3 { font-size: var(--text-base); font-weight: 600; margin: var(--space-4) 0 var(--space-1); }
code { font-family: var(--font-mono); font-size: 0.85em; background: var(--color-bg); padding: 0.1em 0.3em; border-radius: 3px; }

.theme-toggle { background: none; border: 1px solid rgba(255,255,255,0.2); color: var(--color-header-text); cursor: pointer; font-size: var(--text-base); padding: var(--space-1) var(--space-2); border-radius: var(--radius); transition: all 0.12s; }
.theme-toggle:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.3); }

/* Dark theme */
[data-theme="dark"] {
  --color-header: #161b22;
  --color-bg: #0d1117;
  --color-surface: #161b22;
  --color-border: #30363d;
  --color-border-muted: #21262d;
  --color-text: #e6edf3;
  --color-text-secondary: #8b949e;
  --color-link: #58a6ff;
  --color-danger-bg: #49020233;
  --color-success-bg: #04260f33;
  --color-warning-bg: #341a0033;
  --color-info-bg: #041d3333;
}

[data-theme="dark"] .card { border-color: var(--color-border); }
[data-theme="dark"] table td { border-color: var(--color-border-muted); }
[data-theme="dark"] tr:hover td { background: #1c2128; }
[data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { background: #0d1117; color: var(--color-text); border-color: var(--color-border); }
[data-theme="dark"] button, [data-theme="dark"] .btn { background: #21262d; color: var(--color-text); }
[data-theme="dark"] button:hover, [data-theme="dark"] .btn:hover { background: #30363d; }
[data-theme="dark"] code { background: #161b22; }

/* --- Survey page --- */
.survey-toolbar { background: var(--color-bg); border: 1px solid var(--color-border); padding: var(--space-3); margin-bottom: var(--space-3); border-radius: var(--radius); }
.survey-fieldset { margin-bottom: 2em; border: 1px solid var(--color-border); padding: var(--space-3); border-radius: var(--radius); background: var(--color-surface); }
.survey-fieldset legend { color: var(--color-text); font-weight: 600; padding: 0 0.5em; }
.survey-fieldset input[type="radio"] { accent-color: var(--color-accent); }
.survey-desc { background: var(--color-info-bg); border-left: 3px solid #58a6ff; padding: 0.5em 1em; margin: 0.5em 0; font-size: 0.95em; color: var(--color-text); border-radius: 0 var(--radius) var(--radius) 0; }
.survey-ai-summary { background: var(--color-info-bg); border-left: 3px solid #8957e5; padding: 0.5em 1em; margin: 0.5em 0; font-size: 0.95em; color: var(--color-text); border-radius: 0 var(--radius) var(--radius) 0; }
.survey-cost { font-size: 0.85em; color: var(--color-text-secondary); margin: 0.3em 0; }
.survey-generating { color: var(--color-text-secondary); font-style: italic; margin: 0.5em 0; }
.survey-error { color: var(--color-danger); margin: 0.5em 0; }

/* Survey risk chat (survey-risk-chat) — right-hand panel beside each finding's answers. */
.finding-cols { display: flex; gap: var(--space-4); align-items: flex-start; }
.finding-main { flex: 1 1 60%; min-width: 0; }
.finding-chat { flex: 1 1 40%; min-width: 0; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg); display: flex; flex-direction: column; max-height: 420px; }
.finding-chat .chat-header { font-weight: 600; font-size: var(--text-sm); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border-muted); }
.chat-transcript { flex: 1 1 auto; overflow-y: auto; padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); min-height: 120px; }
.chat-empty { color: var(--color-text-secondary); font-size: var(--text-sm); font-style: italic; margin: 0; }
.chat-turn { display: flex; flex-direction: column; gap: 2px; }
.chat-turn--user { align-items: flex-end; }
.chat-turn .chat-role { font-size: var(--text-xs); color: var(--color-text-secondary); }
.chat-bubble { font-size: var(--text-sm); padding: var(--space-2) var(--space-3); border-radius: var(--radius); max-width: 90%; white-space: pre-wrap; word-wrap: break-word; }
.chat-turn--user .chat-bubble { background: var(--color-accent); color: #fff; }
.chat-turn--assistant .chat-bubble { background: var(--color-surface); border: 1px solid var(--color-border-muted); }
.chat-form { display: flex; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-top: 1px solid var(--color-border-muted); }
.chat-input { flex: 1 1 auto; min-width: 0; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius); font: inherit; font-size: var(--text-sm); }
.chat-send { flex: 0 0 auto; }

@media (max-width: 767px) {
  .finding-cols { flex-direction: column; }
  .finding-chat { width: 100%; }
}
.survey-badge { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 0.8em; font-weight: 500; }
.survey-badge-fallback { background: #674d00; color: #ffc107; }

/* Fixed chat sidebar — stays in place while main content scrolls (survey-risk-chat). */
.chat-sidebar {
  position: fixed; top: 52px; right: 0;
  width: 380px; height: calc(100vh - 52px);
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  display: flex; flex-direction: column;
  z-index: 40;
  box-shadow: -2px 0 8px rgba(0,0,0,0.08);
  transition: transform 0.2s;
}
/* Leave a fixed strip (header + toggle button) visible when collapsed, instead of a bare
   pixel offset that could cut the reopen button off entirely on a given width. */
.chat-sidebar--collapsed { transform: translateX(calc(100% - 44px)); }
.chat-sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  font-weight: 600; font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-border-muted);
  background: var(--color-bg);
}
.chat-sidebar-toggle {
  border: none; background: none; cursor: pointer;
  font-size: var(--text-xs); color: var(--color-text-secondary);
  padding: 2px 6px;
}
.chat-sidebar-body { flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; }
.chat-finding-picker {
  width: 100%; padding: var(--space-2) var(--space-3);
  border: none; border-bottom: 1px solid var(--color-border-muted);
  background: var(--color-surface); font: inherit; font-size: var(--text-sm);
}
.chat-sidebar .chat-transcript { flex: 1 1 auto; min-height: 0; }
.chat-sidebar .chat-form { flex: 0 0 auto; }

/* Leave room for the sidebar on wide pages so content isn't hidden behind it. */
.app-main--wide { max-width: calc(100% - 400px); margin-right: 380px; }

@media (max-width: 900px) {
  .chat-sidebar { width: 320px; }
  .chat-sidebar--collapsed { transform: translateX(calc(100% - 44px)); }
  .app-main--wide { max-width: 100%; margin-right: 320px; }
}
@media (max-width: 767px) {
  .chat-sidebar { width: 100%; height: 45vh; top: auto; bottom: 0; border-left: none; border-top: 1px solid var(--color-border); }
  .chat-sidebar--collapsed { transform: translateY(calc(100% - 44px)); }
  .chat-sidebar-toggle { transform: rotate(-90deg); }
  .app-main--wide { margin-right: 0; max-width: 100%; }
}
/* Collapse the fixed chat sidebar instantly (no slide) when the user prefers reduced motion.
   Placed after the .chat-sidebar definition above so source-order wins the cascade tie. */
@media (prefers-reduced-motion: reduce) {
  .chat-sidebar { transition: none; }
}
.survey-badge-ai { background: #163c23; color: #3fb950; }
.survey-model-label { color: var(--color-text-secondary); font-size: 0.8em; }
.survey-stale-marker { background: #341a00; border: 1px solid #674d00; padding: 0.4em 0.8em; margin-bottom: 0.5em; border-radius: var(--radius); font-size: 0.9em; color: var(--color-text); }
.survey-reconfirm-msg { margin-left: 0.5em; font-size: 0.85em; color: #3fb950; }
.survey-save-btn { margin-top: var(--space-3); }

/* --- Enrichment display (survey/report) --- */
.enrich-fetched-date { color: var(--color-text-secondary); font-size: 0.8em; }
.enrich-detail { background: var(--color-success-bg); border-left: 3px solid #3fb950; padding: 0.5em 1em; margin: 0.5em 0; font-size: 0.95em; color: var(--color-text); border-radius: 0 var(--radius) var(--radius) 0; }
.enrich-detail code { background: var(--color-bg); }
.enrich-fallback { background: var(--color-warning-bg); border-left: 3px solid #d29922; padding: 0.5em 1em; margin: 0.5em 0; font-size: 0.9em; color: var(--color-text); border-radius: 0 var(--radius) var(--radius) 0; }
.enrich-fallback .scan-desc { margin-top: 0.3em; }
.enrich-fallback .refresh-wrap { margin-top: 0.3em; }
.enrich-badge { font-size: 0.9em; }

/* --- Source provenance section (provenance-raw-data-view) --- */
.provenance-section { margin-top: var(--space-4); }
.provenance-switcher { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.provenance-switcher__link { padding: 0.2em 0.7em; border-radius: 999px; border: 1px solid var(--color-border); font-size: var(--text-sm); }
.provenance-switcher__active { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }
.provenance-meta { color: var(--color-text-secondary); font-size: var(--text-sm); margin: 0.3em 0; }
.provenance-fallback-note { color: var(--color-warning-text); }
/* Attribution is a credit line, not a caveat -- muted like .provenance-meta, not warning-colored. */
.provenance-attribution-note { color: var(--color-text-secondary); font-size: var(--text-sm); margin: 0.3em 0; font-style: italic; }
.provenance-error { background: var(--color-danger-bg); color: var(--color-danger); padding: 0.5em 1em; border-radius: var(--radius); font-size: 0.9em; }
.provenance-filter { width: 100%; max-width: 24em; margin-bottom: var(--space-2); }
.provenance-table th { text-align: left; white-space: nowrap; width: 1%; padding-right: var(--space-3); vertical-align: top; font-family: var(--font-mono); font-size: 0.85em; }
.provenance-table td pre, .provenance-raw-text { white-space: pre-wrap; word-break: break-word; font-family: var(--font-mono); font-size: 0.85em; margin: 0; }
.provenance-empty { color: var(--color-text-secondary); font-style: italic; }

/* --- Provenance Catalog cells (provenance-catalog-view) --- */
.provenance-table td.provenance-cell { font-family: var(--font-mono); font-size: 0.85em; max-width: 22em; }
.provenance-cell--expandable { cursor: pointer; }
.provenance-cell--expandable:hover { background: rgba(127, 127, 127, 0.12); }
.provenance-cell--expanded { white-space: pre-wrap; word-break: break-word; max-width: none; cursor: zoom-out; }
/* Truncated/full are two pre-rendered sibling spans (see provenance_catalog.html); only one is
   shown at a time -- no text is swapped in via JS, so links inside .provenance-cell__full stay
   real, clickable <a> tags rather than inert innerHTML-escaped text. */
.provenance-cell__full { display: none; }
.provenance-cell--expanded .provenance-cell__truncated { display: none; }
.provenance-cell--expanded .provenance-cell__full { display: inline; }
.provenance-cell a { color: inherit; text-decoration: underline; }

/* Dashboard charts (improvements.md #1) — inline SVG / CSS bars, no JS chart lib. */
.chart-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-bottom: var(--space-4); }
.chart-card { margin-bottom: 0; }
.chart-pie-row { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.pie { width: 140px; height: 140px; flex-shrink: 0; }
.chart-legend { list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); display: flex; flex-direction: column; gap: var(--space-1); }
.chart-legend li { display: flex; align-items: center; gap: var(--space-2); }
.chart-legend .swatch { width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; }
.chart-empty { color: var(--color-text-secondary); font-size: var(--text-sm); margin: 0; }
.bar-chart { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }

.line-chart { width: 100%; height: 150px; }
.line-chart polyline { stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.line-chart circle { stroke: none; }
.line-chart text { font-size: 6px; fill: var(--color-text-secondary); }
.line-success { stroke: var(--color-accent); }
.line-nodata { stroke: #bf8700; }
.line-error { stroke: var(--color-danger); }
.dot-success { fill: var(--color-accent); }
.dot-nodata { fill: #bf8700; }
.dot-error { fill: var(--color-danger); }
.chart-legend--inline { flex-direction: row; gap: var(--space-3); margin: var(--space-2) 0 0; justify-content: center; }
.swatch-success { background: var(--color-accent); }
.swatch-nodata { background: #bf8700; }
.swatch-error { background: var(--color-danger); }
.chart-summary { color: var(--color-text-secondary); font-size: var(--text-xs); text-align: center; margin: var(--space-1) 0 0; }
.bar-chart li { display: grid; grid-template-columns: 5rem 1fr 2.5rem; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.bar-chart .bar-label { color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-chart .bar-track { background: var(--color-border-muted); border-radius: 999px; height: 10px; overflow: hidden; }
.bar-chart .bar-fill { display: block; height: 100%; background: var(--color-accent); border-radius: 999px; min-width: 2px; }
.bar-chart .bar-fill--accent { background: #54aeff; }
.bar-chart .bar-count { text-align: right; font-variant-numeric: tabular-nums; }
.demo-tag { font-size: 0.5em; vertical-align: middle; background: var(--color-warning-bg); color: var(--color-warning-text); padding: 0.15em 0.5em; border-radius: 999px; font-weight: 600; }

/* Auth pages (login/register) — F1 social-auth-registration redesign */
.auth-main { max-width: 420px; }
.auth-card { margin: var(--space-10) auto 0; }
.auth-card h1 { margin: 0 0 var(--space-2); font-size: var(--text-2xl); }
.auth-card__subtitle { color: var(--color-text-secondary); font-size: var(--text-sm); margin: 0 0 var(--space-6); }
.auth-field { margin-bottom: var(--space-4); }
.auth-field label { display: block; font-weight: 500; margin-bottom: var(--space-1); font-size: var(--text-sm); }
.auth-field input { width: 100%; }
.auth-field .helptext { display: block; color: var(--color-text-secondary); font-size: var(--text-xs); margin-top: var(--space-1); }
.auth-field .errorlist { list-style: none; margin: var(--space-1) 0 0; padding: 0; color: var(--color-danger); font-size: var(--text-xs); }
.auth-consent { display: flex; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-1); font-size: var(--text-sm); }
.auth-consent input { margin-top: 3px; }
.auth-submit { width: 100%; margin-top: var(--space-4); }
.auth-divider { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-secondary); font-size: var(--text-xs); margin: var(--space-6) 0; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--color-border-muted); }
.btn-google { display: flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; background: var(--color-surface); color: #3c4043; border: 1px solid var(--color-border); font-weight: 500; }
.btn-google:hover { background: #f8f9fa; }
.auth-google-consent { color: var(--color-text-secondary); font-size: var(--text-xs); text-align: center; margin-top: var(--space-3); }
.auth-footer { text-align: center; font-size: var(--text-sm); margin-top: var(--space-5); }
/* Page footer: links inherit the footer's secondary gray (theme-proof) instead of link
   blue; underline kept for affordance. */
.app-footer { text-align: center; padding: var(--space-4); color: var(--color-text-secondary); font-size: var(--text-xs); border-top: 1px solid var(--color-border-muted); margin-top: var(--space-8); }
.app-footer a { color: inherit; }
[data-theme="dark"] .btn-google { color: var(--color-text); }
[data-theme="dark"] .btn-google:hover { background: #21262d; }

@media (max-width: 767px) {
  .app-header { flex-wrap: wrap; height: auto; padding: var(--space-2) var(--space-3); gap: var(--space-2); }
  .app-header nav { order: 3; width: 100%; overflow-x: auto; }
  .app-main { margin: var(--space-3) auto; padding: 0 var(--space-3); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .chart-grid { grid-template-columns: 1fr; }
}