/* =====================================================
   Reports — theme tokens (Travel Lens-inspired)
   Grayscale base, teal accent, rounded 8px, Inter.
   Tuned for legibility: 16px UI, 17.5px prose, 1.75 line-height.
===================================================== */

:root {
  /* Neutrals — HSL from Travel Lens */
  --background:        #ffffff;
  --foreground:        #0a0a0a;
  --muted:             #f5f5f5;
  --muted-foreground:  #525252;       /* bumped darker than #737373 for AA contrast */
  --border:            #e5e5e5;
  --border-strong:     #d4d4d4;
  --card:              #ffffff;
  --card-shadow:       0 1px 2px rgba(10, 10, 10, 0.04),
                       0 1px 1px rgba(10, 10, 10, 0.03);
  --card-shadow-hover: 0 4px 16px rgba(10, 10, 10, 0.06),
                       0 2px 4px rgba(10, 10, 10, 0.04);

  /* Brand — teal from Travel Lens, darkened for AA contrast on white */
  --accent:            #0e8a84;       /* text-grade teal (contrast >= 4.5:1) */
  --accent-bright:     #20b2aa;       /* decorative teal (borders, glows) */
  --accent-soft:       #e6f7f5;       /* tinted bg */
  --accent-ring:       rgba(32, 178, 170, 0.35);

  /* Status */
  --danger:            #b91c1c;
  --danger-soft:       #fef2f2;

  /* Geometry */
  --radius:            0.5rem;        /* 8px */
  --radius-sm:         0.375rem;      /* 6px */
  --radius-lg:         0.75rem;       /* 12px */

  /* Type */
  --font-sans:         "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                       Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:         "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
                       Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --fs-base:           16px;
  --fs-ui:             0.9375rem;     /* 15px for dense UI like meta chips */
  --fs-prose:          1.0938rem;     /* ~17.5px */
  --lh-ui:             1.55;
  --lh-prose:          1.75;
}

/* =====================================================
   Reset-ish & base
===================================================== */

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

html {
  font-size: var(--fs-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-feature-settings: "cv11", "ss01", "ss03", "tnum";  /* Inter: better 1lI, single-story a */
  font-weight: 400;
  line-height: var(--lh-ui);
  color: var(--foreground);
  background: var(--background);
  min-height: 100vh;
}

a {
  color: var(--accent);
  text-decoration: none;
  text-underline-offset: 2px;
  transition: color 120ms ease;
}
a:hover { text-decoration: underline; }

button { font-family: inherit; }

::selection { background: var(--accent-soft); color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* =====================================================
   Layout
===================================================== */

.shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem 4rem;
}

/* Report view: use more of the viewport so the TOC + content can breathe. */
.layout-wide .shell {
  max-width: 1440px;
  padding-left: 2rem;
  padding-right: 2rem;
}
@media (min-width: 1600px) {
  .layout-wide .shell { max-width: 1520px; }
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0 1.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--foreground);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}
.brand:hover { text-decoration: none; }

.brand-mark {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent-bright), var(--accent));
  display: grid; place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.8125rem;
  box-shadow: 0 2px 6px var(--accent-ring);
}

.topnav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--fs-ui);
}
.topnav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--muted-foreground);
  font-weight: 500;
  transition: color 120ms ease, background 120ms ease;
}
.topnav-link:hover {
  color: var(--foreground);
  background: var(--muted);
  text-decoration: none;
}
.topnav-ask {
  color: var(--accent);
  background: var(--accent-soft);
}
.topnav-ask:hover { color: #fff; background: var(--accent); }

/* =====================================================
   Cards & buttons
===================================================== */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  min-height: 40px;
  font-size: var(--fs-ui);
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease,
              box-shadow 120ms ease, transform 60ms ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--foreground);
  color: var(--background);
  border-color: var(--foreground);
}
.btn-primary:hover { background: #262626; text-decoration: none; }

.btn-accent {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-accent:hover { background: #0a6f6a; text-decoration: none; }

.btn-ghost {
  background: transparent;
  color: var(--foreground);
  border-color: var(--border);
}
.btn-ghost:hover { background: var(--muted); text-decoration: none; }

.btn-sm { min-height: 32px; padding: 0.3125rem 0.75rem; font-size: 0.8125rem; }

.icon { width: 16px; height: 16px; flex: none; }

/* =====================================================
   Index page
===================================================== */

.hero-title {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 0.375rem;
}
.hero-sub {
  color: var(--muted-foreground);
  font-size: 1.0625rem;
  margin: 0 0 1.5rem;
}

.uploader {
  padding: 1.5rem;
}

.dropzone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 2.25rem 1.5rem;
  text-align: center;
  background: #fafafa;
  transition: background 120ms ease, border-color 120ms ease;
  cursor: pointer;
}
.dropzone:hover,
.dropzone.is-drag {
  border-color: var(--accent-bright);
  background: var(--accent-soft);
}
.dropzone-icon {
  width: 40px; height: 40px;
  margin: 0 auto 0.75rem;
  color: var(--accent);
}
.dropzone-title {
  font-weight: 500;
  font-size: 1.0625rem;
  margin: 0 0 0.25rem;
}
.dropzone-sub {
  color: var(--muted-foreground);
  font-size: var(--fs-ui);
  margin: 0;
}
.dropzone input[type=file] { display: none; }

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 2.5rem 0 1rem;
}
.section-head h2 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.search {
  position: relative;
  flex: 1;
  max-width: 320px;
}
.search input {
  width: 100%;
  padding: 0.5rem 0.875rem 0.5rem 2.25rem;
  min-height: 40px;
  font-size: var(--fs-ui);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--background);
  color: var(--foreground);
  font-family: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.search input:focus {
  outline: none;
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.search svg {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-foreground);
  width: 16px;
  height: 16px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.report-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.125rem 1.25rem 1rem;
  text-decoration: none;
  color: var(--foreground);
  transition: box-shadow 160ms ease, transform 160ms ease, border-color 160ms ease;
}
.report-card:hover {
  box-shadow: var(--card-shadow-hover);
  border-color: var(--border-strong);
  transform: translateY(-1px);
  text-decoration: none;
}
.report-card h3 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.report-card .meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  margin-top: auto;
}
.report-card .slug {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted-foreground);
  word-break: break-all;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.badge-md        { background: var(--accent-soft); color: var(--accent); }
.badge-html      { background: #fff4e6; color: #9a5a00; }
.badge-pending   { background: #eef2ff; color: #4338ca; }
.badge-failed    { background: var(--danger-soft); color: var(--danger); }

/* Tag chips — on index filter rail, on cards, on report view */
.tag-rail {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin: -0.5rem 0 1.25rem;
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: var(--muted);
  color: var(--foreground);
  font-size: 0.8125rem;
  font-weight: 500;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.tag-chip:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-ring);
  text-decoration: none;
}
.tag-chip.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.tag-chip .tag-count {
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
  opacity: 0.75;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(10,10,10,0.06);
}
.tag-chip.is-active .tag-count { background: rgba(255,255,255,0.18); opacity: 1; }
.tag-chip-clear { color: var(--muted-foreground); font-weight: 400; }
.tag-chip-sm {
  padding: 1px 8px; font-size: 0.6875rem; pointer-events: none;
  background: #f5f5f5; color: var(--muted-foreground);
}

/* Card-level summary + snippet + tags */
.card-head {
  display: flex; align-items: center; gap: 0.5rem;
  flex-wrap: wrap;
}
.card-date { font-size: 0.75rem; margin-left: auto; }
.card-summary,
.card-snippet {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted-foreground);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-snippet mark {
  background: #fff6c4;
  color: var(--foreground);
  padding: 0 2px;
  border-radius: 2px;
}
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

/* Report-view summary + tags */
.report-summary {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--muted-foreground);
  margin: 0 0 0.875rem;
  max-width: 74ch;
}
.report-tags {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin-top: 0.875rem;
}

.empty {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--muted-foreground);
}
.empty h3 { color: var(--foreground); margin: 0 0 0.5rem; font-weight: 600; }

/* =====================================================
   Report view
===================================================== */

.report-header {
  margin-bottom: 1.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.crumbs {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin-bottom: 0.625rem;
}
.crumbs a { color: var(--muted-foreground); }
.crumbs a:hover { color: var(--foreground); }

.report-title {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 0.75rem;
}

.report-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  color: var(--muted-foreground);
  font-size: var(--fs-ui);
  margin-bottom: 1rem;
}
.report-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; }
.report-meta code {
  font-family: var(--font-mono);
  background: var(--muted);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.8125rem;
  color: var(--foreground);
}

.report-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* HTML reports render inside an iframe so the uploader's own CSS survives. */
.report-frame-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--muted);
  box-shadow: var(--card-shadow);
}
.report-frame {
  display: block;
  width: 100%;
  height: calc(100vh - 240px);
  min-height: 640px;
  border: 0;
  background: #fff;
}

.report-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 960px) {
  .report-body.has-toc {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 3rem;
  }
}

.toc {
  font-size: 0.875rem;
  max-height: calc(100vh - 3rem);
  overflow: auto;
}
.toc nav { display: flex; flex-direction: column; }
@media (min-width: 960px) {
  .toc {
    position: sticky;
    top: 1.5rem;
    border-right: 1px solid var(--border);
    padding-right: 1rem;
  }
}
.toc .toc-label {
  text-transform: uppercase;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--muted-foreground);
  margin-bottom: 0.625rem;
}
.toc a {
  display: block;
  padding: 0.25rem 0;
  color: var(--muted-foreground);
  line-height: 1.45;
}
.toc a:hover { color: var(--accent); text-decoration: none; }
.toc .lvl-3 { padding-left: 0.875rem; font-size: 0.8125rem; }
.toc .lvl-4 { padding-left: 1.75rem; font-size: 0.8125rem; }

/* =====================================================
   Prose (rendered report body)
===================================================== */

.prose {
  font-size: var(--fs-prose);
  line-height: var(--lh-prose);
  color: #1a1a1a;
  word-wrap: break-word;
}
/* Cap line-length on text elements (readability); tables / code / images
   are free to fill the full column width. */
.prose > p,
.prose > ul,
.prose > ol,
.prose > dl,
.prose > blockquote,
.prose > h1,
.prose > h2,
.prose > h3,
.prose > h4,
.prose > h5,
.prose > h6,
.prose > .admonition {
  max-width: 74ch;
}
.prose > * + * { margin-top: 1.15em; }
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  color: var(--foreground);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-top: 2em;
  margin-bottom: 0.6em;
  scroll-margin-top: 1rem;
}
.prose h1 { font-size: 1.75em; letter-spacing: -0.02em; }
.prose h2 { font-size: 1.4em; padding-bottom: 0.35em; border-bottom: 1px solid var(--border); }
.prose h3 { font-size: 1.175em; }
.prose h4 { font-size: 1.05em; }
.prose h1:first-child, .prose h2:first-child, .prose h3:first-child { margin-top: 0; }

.prose p { margin: 0; }
.prose p + p { margin-top: 1em; }

.prose a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(14, 138, 132, 0.3); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--accent); }

.prose strong { font-weight: 600; color: var(--foreground); }
.prose em { font-style: italic; }

.prose ul, .prose ol { padding-left: 1.5em; margin: 0; }
.prose li { margin: 0.35em 0; }
.prose li > ul, .prose li > ol { margin-top: 0.35em; }

.prose blockquote {
  border-left: 3px solid var(--accent-bright);
  padding: 0.25em 0 0.25em 1.125em;
  color: var(--muted-foreground);
  background: var(--accent-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 0;
}
.prose blockquote p { margin: 0.35em 0; }

.prose hr { border: 0; border-top: 1px solid var(--border); margin: 2em 0; }

.prose code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--muted);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.prose pre {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.6;
  background: #0f1115;
  color: #e6e9ef;
  padding: 1rem 1.125rem;
  border-radius: var(--radius);
  overflow-x: auto;
  border: 1px solid #1e2230;
}
.prose pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  border: 0;
  font-size: inherit;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
  margin: 0.5em 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.prose th, .prose td {
  text-align: left;
  padding: 0.625em 0.875em;
  border-bottom: 1px solid var(--border);
}
.prose th {
  background: var(--muted);
  font-weight: 600;
  color: var(--foreground);
}
.prose tr:last-child td { border-bottom: 0; }
.prose tbody tr:hover { background: #fafafa; }

.prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.prose h2 a.headerlink,
.prose h3 a.headerlink,
.prose h4 a.headerlink {
  color: var(--border-strong);
  text-decoration: none;
  margin-left: 0.35em;
  opacity: 0;
  transition: opacity 120ms ease;
}
.prose h2:hover a.headerlink,
.prose h3:hover a.headerlink,
.prose h4:hover a.headerlink { opacity: 1; }

/* Admonitions */
.prose .admonition {
  border-radius: var(--radius-sm);
  padding: 0.875em 1.125em;
  border: 1px solid var(--border);
  background: var(--muted);
}
.prose .admonition-title {
  font-weight: 600;
  margin: 0 0 0.35em;
  text-transform: uppercase;
  font-size: 0.75em;
  letter-spacing: 0.06em;
  color: var(--accent);
}

/* =====================================================
   Pygments — light-on-dark (matches .prose pre) to land on #0f1115
===================================================== */

.codehilite .c, .codehilite .cm, .codehilite .cp, .codehilite .c1, .codehilite .cs { color: #7b8597; font-style: italic; }
.codehilite .k, .codehilite .kd, .codehilite .kn, .codehilite .kp, .codehilite .kr, .codehilite .kt { color: #c792ea; }
.codehilite .s, .codehilite .s1, .codehilite .s2, .codehilite .se, .codehilite .sb, .codehilite .sd { color: #c3e88d; }
.codehilite .n  { color: #e6e9ef; }
.codehilite .na { color: #82aaff; }
.codehilite .nb, .codehilite .bp { color: #82aaff; }
.codehilite .nc, .codehilite .nn, .codehilite .ne { color: #ffcb6b; }
.codehilite .nf, .codehilite .fm { color: #82aaff; }
.codehilite .nt { color: #f07178; }
.codehilite .nv, .codehilite .vi { color: #f78c6c; }
.codehilite .mi, .codehilite .mf, .codehilite .mh, .codehilite .mo { color: #f78c6c; }
.codehilite .o, .codehilite .ow { color: #89ddff; }
.codehilite .p  { color: #89ddff; }
.codehilite .gh, .codehilite .gu { color: #82aaff; font-weight: bold; }
.codehilite .gi { color: #c3e88d; }
.codehilite .gd { color: #f07178; }
.codehilite .err { color: #f07178; }

/* =====================================================
   Misc
===================================================== */

.muted { color: var(--muted-foreground); }
.mono  { font-family: var(--font-mono); font-size: 0.9em; }
.footer {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer code { font-family: var(--font-mono); background: var(--muted); padding: 2px 6px; border-radius: 4px; }

/* =====================================================
   Ask (RAG) page
===================================================== */

.ask { max-width: 900px; margin: 0 auto; }
.ask-head { text-align: center; margin-bottom: 1.75rem; }
.ask-head .hero-title { font-size: 2.25rem; }
.ask-head .hero-sub { font-size: 1.0625rem; }

.ask-form {
  padding: 1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.ask-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem 0.375rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.ask-field:focus-within {
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.ask-icon { width: 20px; height: 20px; color: var(--accent); flex: none; }
.ask-field input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 1.0625rem;
  font-family: inherit;
  padding: 0.625rem 0;
  min-width: 0;
  color: var(--foreground);
}
.ask-samples {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
  font-size: 0.8125rem;
}
.ask-samples .sample {
  background: var(--muted);
  border: 1px solid var(--border);
  color: var(--foreground);
  padding: 3px 10px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.ask-samples .sample:hover {
  background: var(--accent-soft);
  border-color: var(--accent-ring);
  color: var(--accent);
}

.ask-error {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--danger-soft);
  border-color: #fecaca;
  color: var(--danger);
}

.ask-answer {
  margin-top: 1.5rem;
  padding: 1.5rem 1.75rem;
}
.ask-answer-body {
  font-size: var(--fs-prose);
  line-height: var(--lh-prose);
  color: #1a1a1a;
}
.ask-answer-body > * + * { margin-top: 0.9em; }
.ask-answer-body p { margin: 0; }
.ask-answer-body ul { padding-left: 1.4em; margin: 0; }
.ask-answer-body li { margin: 0.3em 0; }
.ask-answer-body code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--muted);
  padding: 0.12em 0.4em;
  border-radius: 4px;
}

.cite {
  display: inline-block;
  line-height: 1;
  font-size: 0.7em;
  vertical-align: super;
  margin-left: 2px;
}
.cite a {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  font-size: 11px;
  line-height: 1.3;
}
.cite a:hover { background: var(--accent); color: #fff; text-decoration: none; }

.ask-meta {
  margin-top: 1.25rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
}
.ask-meta code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  background: var(--muted);
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--foreground);
}

.ask-citations {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fafafa;
}
.ask-citations h3 {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-foreground);
}
.ask-citations ol {
  margin: 0;
  padding-left: 1.5rem;
  font-size: var(--fs-ui);
  line-height: 1.65;
}
.ask-citations li code {
  font-family: var(--font-mono);
  font-size: 0.75em;
  margin-left: 0.5em;
}

.ask-all-sources {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.ask-all-sources summary { cursor: pointer; padding: 0.35rem 0; }
.ask-all-sources ul { margin: 0.5rem 0 0; padding-left: 1.25rem; }

.toast {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  padding: 0.75rem 1rem;
  background: var(--foreground);
  color: var(--background);
  border-radius: var(--radius);
  font-size: var(--fs-ui);
  box-shadow: 0 10px 30px rgba(10,10,10,0.25);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
  z-index: 50;
}
.toast.show { opacity: 1; transform: translateY(0); }