/* DreamerRenderer v2 stylesheet.
 * Theme values arrive as CSS custom properties injected by
 * app/ui/renderer_bridge.py from chat_widget's DARK/LIGHT palettes:
 *   --dr-bg --dr-surface --dr-border --dr-text --dr-dim --dr-faint
 *   --dr-accent --dr-code-bg
 *   --dr-f --dr-f-sm --dr-f-code --dr-f-h1 --dr-f-h2 --dr-f-h3
 * Sentinel: [dreamer-renderer-v2]
 */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--dr-bg);
  color: var(--dr-text);
  font-family: 'Segoe UI', sans-serif;
  font-size: var(--dr-f);
  line-height: 1.7;
  padding: 4px 0;
  overflow: hidden;
}

/* ---- typography ---------------------------------------------------------- */
h1 { font-size: var(--dr-f-h1); font-weight: 600; margin: 18px 0 8px; }
h2 { font-size: var(--dr-f-h2); font-weight: 600; margin: 16px 0 6px;
     padding-bottom: 4px; border-bottom: 1px solid var(--dr-border); }
h3 { font-size: var(--dr-f-h3); font-weight: 600; color: var(--dr-dim); margin: 12px 0 4px; }
h4, h5, h6 { font-size: var(--dr-f); font-weight: 600; color: var(--dr-dim); margin: 10px 0 4px; }
p  { margin: 6px 0; }
a  { color: var(--dr-accent); }
hr { border: none; border-top: 1px solid var(--dr-border); margin: 14px 0; }
ul, ol { margin: 6px 0; padding-left: 26px; }
li { margin: 5px 0; }
li > ul, li > ol { margin: 2px 0; }         /* nested lists — new capability */
strong { font-weight: 650; }
del { color: var(--dr-faint); }

/* ---- code ------------------------------------------------------------------ */
pre {
  background: var(--dr-code-bg);
  border: 1px solid var(--dr-border);
  border-radius: 8px;
  padding: 14px 16px;
  overflow-x: auto;
  font-size: var(--dr-f-code);
  margin: 10px 0;
}
code { font-family: Consolas, monospace; font-size: var(--dr-f-code); }
:not(pre) > code {
  background: var(--dr-code-bg);
  padding: 1px 6px;
  border-radius: 4px;
}

/* ---- tables ------------------------------------------------------------------ */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 12px 0;
  border: 1px solid var(--dr-border);
  border-radius: 8px;
  overflow: hidden;
}
th {
  padding: 10px 16px;
  border-bottom: 1px solid var(--dr-border);
  background: var(--dr-surface);
  color: var(--dr-dim);
  font-size: var(--dr-f-sm);
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}
td { padding: 10px 16px; border-bottom: 1px solid var(--dr-border); }
tbody tr:nth-child(even) { background: rgba(127,127,127,0.06); background: color-mix(in srgb, var(--dr-surface) 45%, transparent); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: rgba(217,146,75,0.07); background: color-mix(in srgb, var(--dr-accent) 7%, transparent); }
.dr-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- inline lucide icons (emoji replacements) --------------------------------- */
.dr-ic {
  width: 1em; height: 1em;
  vertical-align: -0.14em;
  display: inline-block;
  color: var(--dr-accent);
}

/* ---- blockquote / callouts ------------------------------------------------------ */
blockquote {
  border-left: 3px solid var(--dr-accent);
  padding: 2px 0 2px 14px;
  margin: 8px 0;
  color: var(--dr-dim);
}
.dr-callout {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--dr-border);
  border-left: 3px solid var(--dr-accent);
  background: rgba(127,127,127,0.08); background: color-mix(in srgb, var(--dr-surface) 60%, transparent);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 10px 0;
}
.dr-callout-ic { flex: 0 0 auto; padding-top: 2px; }
.dr-callout-ic .dr-ic { width: 1.15em; height: 1.15em; }
.dr-callout-body { flex: 1; }
.dr-callout-body > :first-child { margin-top: 0; }
.dr-callout-body > :last-child { margin-bottom: 0; }
.dr-callout-warning { border-left-color: #e0a25c; }
.dr-callout-warning .dr-callout-ic { color: #e0a25c; }
.dr-callout-success { border-left-color: #7fb069; }
.dr-callout-success .dr-callout-ic { color: #7fb069; }
.dr-callout-danger  { border-left-color: #e07856; }
.dr-callout-danger  .dr-callout-ic { color: #e07856; }
.dr-callout-info .dr-callout-ic,
.dr-callout-tip .dr-callout-ic,
.dr-callout-insight .dr-callout-ic { color: var(--dr-accent); }
/* [neural-knowledge-v1] model knowledge. A muted violet, deliberately
   outside the rust/amber/green/coral palette above so "not retrieved"
   reads as a different KIND of thing and never as a severity level. */
.dr-callout-neural { border-left-color: #8a7fb0; }
.dr-callout-neural .dr-callout-ic { color: #8a7fb0; }
.dr-callout-tag {
  font-size: 0.75em; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: #8a7fb0; margin-bottom: 4px;
}

/* ---- tabs -------------------------------------------------------------------------- */
.dr-tabs {
  border: 1px solid var(--dr-border);
  border-radius: 10px;
  margin: 12px 0;
  overflow: hidden;
}
.dr-tabbar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  background: var(--dr-surface);
  border-bottom: 1px solid var(--dr-border);
  padding: 6px 8px 0;
  position: relative;
}
.dr-tab {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--dr-dim);
  font: inherit;
  font-size: var(--dr-f-sm);
  font-weight: 500;
  padding: 8px 14px 10px;
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  transition: color .15s ease, background .15s ease;
}
.dr-tab:hover { color: var(--dr-text); background: rgba(217,146,75,0.08); background: color-mix(in srgb, var(--dr-accent) 8%, transparent); }
.dr-tab-on {
  color: var(--dr-accent);
  border-bottom-color: var(--dr-accent);
  background: rgba(217,146,75,0.10);
  background: color-mix(in srgb, var(--dr-accent) 10%, transparent);
}
.dr-pane { display: none; padding: 12px 16px; }
.dr-pane-on { display: block; animation: dr-fadein .18s ease; }
.dr-pane > :first-child { margin-top: 0; }
@keyframes dr-fadein { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* ---- KPI cards ----------------------------------------------------------------------- */
.dr-kpi-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px 0;
}
.dr-kpi {
  flex: 1 1 150px;
  min-width: 140px;
  background: var(--dr-surface);
  border: 1px solid var(--dr-border);
  border-radius: 10px;
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}
/* a quiet sheen that sweeps once when the card appears */
.dr-kpi::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(217,146,75,0.10) 50%, transparent 70%);
  background: linear-gradient(105deg, transparent 30%,
              color-mix(in srgb, var(--dr-accent) 10%, transparent) 50%,
              transparent 70%);
  transform: translateX(-120%);
  animation: dr-sweep 1.4s ease .2s 1 forwards;
  pointer-events: none;
}
.dr-kpi-label { color: var(--dr-dim); font-size: var(--dr-f-sm); margin-bottom: 4px; }
.dr-kpi-value { font-size: var(--dr-f-h2); font-weight: 650; letter-spacing: -0.01em;
                font-variant-numeric: tabular-nums; }
.dr-kpi-delta { font-size: var(--dr-f-sm); margin-top: 4px; color: var(--dr-dim);
                display: flex; align-items: center; gap: 4px; }
.dr-kpi-delta .dr-ic { color: inherit; }
/* [computed-chip-v1] provenance chip: platform-computed totals */
.dr-kpi-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px 2px;
  border: 1px solid var(--dr-border);
  border-radius: 999px;
  font-size: calc(var(--dr-f-sm) - 1px);
  line-height: 1.3;
  color: var(--dr-accent);
  background: color-mix(in srgb, var(--dr-accent) 8%, transparent);
  vertical-align: middle;
  letter-spacing: 0.02em;
  cursor: help;
}
.dr-pos { color: #7fb069; }
.dr-neg { color: #e07856; }

/* ---- streaming shimmer ------------------------------------------------------------------ */
.dr-shimmer { position: relative; overflow: hidden; }
.dr-shimmer::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 25%, rgba(217,146,75,0.09) 50%, transparent 75%);
  background: linear-gradient(100deg, transparent 25%,
              color-mix(in srgb, var(--dr-accent) 9%, transparent) 50%,
              transparent 75%);
  transform: translateX(-120%);
  animation: dr-sweep 1.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes dr-sweep { to { transform: translateX(120%); } }

/* ---- media ---------------------------------------------------------------------------------- */
svg { max-width: 100%; height: auto; max-height: 2000px; }  /* [dr-svg-height-guard] */
img { max-width: 100%; border-radius: 8px; }

/* ---- inline svg diagrams (model-emitted, out-of-band extraction) --------- */
.dr-svg {
  margin: 12px 0;
  padding: 10px;
  border: 1px solid var(--dr-border);
  border-radius: 10px;
  background: var(--dr-surface);
  overflow: auto;
  max-height: 680px;  /* [dr-svg-height-guard] cap: tall SVG scrolls, never blows the 16384px GPU texture limit */
}
.dr-svg > svg {
  display: block;
  max-width: 100%;
  height: auto;         /* keeps aspect via viewBox; oversize diagrams scale */
  margin: 0 auto;
}
.dr-svg-pending {
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dr-dim);
  font-size: var(--dr-f-sm);
}

/* ---- truncated-diagram note ---------------------------------------------- */
.dr-svg-note {
  color: var(--dr-dim);
  font-size: var(--dr-f-sm);
  margin: -6px 0 12px;
}

/* ---- v3 presentation blocks [dreamer-renderer-v3] ------------------------ */
/* persona cards */
.dr-persona-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin: 12px 0;
}
.dr-persona {
  border: 1px solid var(--dr-border);
  border-top: 3px solid var(--dr-accent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--dr-surface) 60%, transparent);
  padding: 14px 16px;
}
.dr-persona-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.dr-persona-avatar {
  flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--dr-accent) 22%, transparent);
  color: var(--dr-accent);
  font-weight: 700; letter-spacing: 0.02em;
}
.dr-persona-name { font-weight: 650; }
.dr-persona-tag { color: var(--dr-dim); font-size: var(--dr-f-sm); }
.dr-persona-row { font-size: var(--dr-f-sm); margin: 5px 0; }
.dr-persona-key {
  display: block; color: var(--dr-dim);
  font-size: 0.78em; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; margin-bottom: 1px;
}
.dr-persona-quote {
  color: var(--dr-dim); font-style: italic; font-size: var(--dr-f-sm);
  border-left: 2px solid var(--dr-accent);
  padding-left: 10px; margin: 8px 0 2px;
}

/* comparison matrix */
.dr-matrix { margin: 12px 0; }
.dr-matrix table { margin: 6px 0 0; }
.dr-matrix .dr-mx-attr { font-weight: 600; white-space: nowrap; }
.dr-mx-cell { display: flex; align-items: center; gap: 8px; }
.dr-mx-bar {
  flex: 1 1 60px; min-width: 40px; height: 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--dr-border) 60%, transparent);
  overflow: hidden;
}
.dr-mx-bar i {
  display: block; height: 100%;
  background: var(--dr-accent);
  border-radius: 4px;
}
.dr-mx-cell span { white-space: nowrap; font-size: var(--dr-f-sm); }

/* quadrant map + heatmap svg helpers */
.dr-quad-bg {
  fill: color-mix(in srgb, var(--dr-surface) 55%, transparent);
  stroke: var(--dr-border);
}
.dr-heat-empty {
  fill: none;
  stroke: var(--dr-border);
  stroke-dasharray: 3 3;
}
.dr-heat-val { fill: var(--dr-text); font-size: 12px; }

/* chart chrome + svg text -- [dpr-0014] renderer.js has emitted these
   classes since v3 wave 1 but they were never defined: SVG <text> fell back
   to fill:#000 (invisible on the dark theme) at the 16px UA default (huge in
   the 640-wide viewBox), and grid/axis lines had no stroke at all. Sessions
   dreamer-910/915 chat screenshots (blank quadrant labels, oversized faint
   axis text on the line chart). */
.dr-chart { margin: 12px 0; }
.dr-chart-title { font-weight: 650; margin-bottom: 6px; }
.dr-chart svg { display: block; width: 100%; }
.dr-chart svg text { fill: var(--dr-text); font-size: 12px; }
.dr-axis     { fill: var(--dr-dim); font-size: 12px; }
.dr-val      { fill: var(--dr-text); font-size: 11px; }
.dr-donut-total { fill: var(--dr-text); font-size: 22px; font-weight: 650; }
.dr-grid     { stroke: color-mix(in srgb, var(--dr-border) 60%, transparent); stroke-width: 1; }
.dr-axisline { stroke: var(--dr-border); stroke-width: 1.2; }
.dr-chart-legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px;
  font-size: var(--dr-f-sm); color: var(--dr-dim);
}
.dr-leg { display: inline-flex; align-items: center; gap: 6px; }
.dr-leg-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* section divider */
.dr-divider {
  margin: 22px 0 14px;
  padding: 12px 16px;
  border-left: 4px solid var(--dr-accent);
  border-radius: 6px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--dr-accent) 14%, transparent), transparent 70%);
}
.dr-divider-title { font-size: var(--dr-f-h2); font-weight: 650; letter-spacing: -0.01em; }
.dr-divider-sub { color: var(--dr-dim); font-size: var(--dr-f-sm); margin-top: 2px; }

/* ---- v3 wave 2 [dreamer-renderer-v3] ------------------------------------- */
/* funnel */
.dr-funnel-name { fill: var(--dr-bg); font-size: 13px; font-weight: 650; }
.dr-funnel-val  { fill: var(--dr-bg); font-size: 12px; opacity: 0.85; }

/* gauges */
.dr-gauge-row {
  display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0;
}
.dr-gauge {
  flex: 1 1 160px; max-width: 220px; text-align: center;
  border: 1px solid var(--dr-border); border-radius: 10px;
  background: color-mix(in srgb, var(--dr-surface) 60%, transparent);
  padding: 12px 10px 10px;
}
.dr-gauge svg { width: 100%; max-width: 180px; }
.dr-gauge-track { stroke: color-mix(in srgb, var(--dr-border) 70%, transparent); }
.dr-gauge-num { fill: var(--dr-text); font-size: 24px; font-weight: 650; }
.dr-gauge-max { fill: var(--dr-dim); font-size: 13px; font-weight: 400; }
.dr-gauge-title { font-weight: 600; font-size: var(--dr-f-sm); margin-bottom: 4px; }
.dr-gauge-label { color: var(--dr-dim); font-size: var(--dr-f-sm); margin-top: 2px; }

/* timeline */
.dr-timeline { margin: 12px 0; }
.dr-tl-rail {
  position: relative; margin-left: 8px; padding-left: 22px;
  border-left: 2px solid color-mix(in srgb, var(--dr-accent) 45%, var(--dr-border));
}
.dr-tl-item { position: relative; padding: 6px 0 14px; }
.dr-tl-dot {
  position: absolute; left: -29px; top: 12px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--dr-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dr-accent) 25%, transparent);
}
.dr-tl-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dr-tl-name { font-weight: 650; }
.dr-tl-period {
  font-size: 0.78em; font-weight: 600; letter-spacing: 0.03em;
  color: var(--dr-accent);
  border: 1px solid color-mix(in srgb, var(--dr-accent) 55%, transparent);
  border-radius: 999px; padding: 1px 10px;
}
.dr-tl-desc { color: var(--dr-dim); font-size: var(--dr-f-sm); margin-top: 2px; }

/* scorecard */
.dr-scorecard { margin: 12px 0; }
.dr-sc-row {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--dr-border); border-radius: 10px;
  background: color-mix(in srgb, var(--dr-surface) 60%, transparent);
  padding: 10px 14px; margin: 8px 0;
}
.dr-sc-chip {
  flex: 0 0 auto; min-width: 52px; text-align: center;
  font-weight: 700; font-size: var(--dr-f-sm);
  border-radius: 8px; padding: 6px 8px;
}
.dr-sc-chip.dr-sc-good { color: #7fb069; background: color-mix(in srgb, #7fb069 16%, transparent); }
.dr-sc-chip.dr-sc-mid  { color: #e0a25c; background: color-mix(in srgb, #e0a25c 16%, transparent); }
.dr-sc-chip.dr-sc-low  { color: #e07856; background: color-mix(in srgb, #e07856 16%, transparent); }
.dr-sc-body { flex: 1 1 auto; min-width: 0; }
.dr-sc-name { font-weight: 600; }
.dr-sc-note { color: var(--dr-dim); font-size: var(--dr-f-sm); }
.dr-sc-bar {
  flex: 0 0 120px; height: 8px; border-radius: 4px; overflow: hidden;
  background: color-mix(in srgb, var(--dr-border) 60%, transparent);
}
.dr-sc-bar i { display: block; height: 100%; border-radius: 4px; }
.dr-sc-bar i.dr-sc-good { background: #7fb069; }
.dr-sc-bar i.dr-sc-mid  { background: #e0a25c; }
.dr-sc-bar i.dr-sc-low  { background: #e07856; }

/* ---- :::media -- contact sheet + aspect boxing [dreamer-media-v1] UX-0020 -- */
.dr-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 12px 0;
}
.dr-media-grid.dr-media-n1 { grid-template-columns: minmax(220px, 640px); }
.dr-media {
  background: var(--dr-surface);
  border: 1px solid var(--dr-border);
  border-radius: 10px;
  overflow: hidden;
}
.dr-media-box {
  background: var(--dr-code-bg);
  display: flex; align-items: center; justify-content: center;
  min-height: 72px;
}
.dr-media-box img,
.dr-media-box video {
  display: block; width: 100%; height: auto;
  object-fit: contain;
}
.dr-media-box audio { width: 100%; padding: 14px 10px; }
.dr-media-box [style*="aspect-ratio"] { height: auto; }
.dr-media figcaption {
  padding: 7px 10px;
  font-size: var(--dr-f-sm);
  color: var(--dr-dim);
  border-top: 1px solid var(--dr-border);
  line-height: 1.45;
}
.dr-media-src { color: var(--dr-faint); }