/* Russell's transcript: the message bubbles' markdown, the answer layout (key
   points + details), diagrams, charts, the clarifying-questions card and the orbit
   mark's sizes. Shared by the Ask Russell page and the chat widget; the page shell, tray
   and composer stay in their own templates. Uses the soft.css tokens. */

  /* Russell's mark (.orbit, its .orbit .mx/.my/.core animations and keyframes) lives in russell-orbit.css, loaded from base.html; only its sizes stay here. */

  .msg { max-width: 82%; font-size: 15px; line-height: 1.65; position: relative; animation: ar-rise 0.22s ease-out; }
  @keyframes ar-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  /* A fresh answer builds top-down, each block staggered (revealBlocks sets the delay).
     Opacity/transform only, so blocks hold their full size from the start and the
     scroll-to-start measurement is unaffected. Fill is `backwards`, not `both`:
     `both` makes later declarations on the same properties silently lose. */
  .ar-build { animation: ar-build 0.32s cubic-bezier(.2,.7,.2,1) backwards; }
  @keyframes ar-build { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .ar-build { animation: none; } }
  /* Yours: an iMessage bubble with its tail. Russell's: prose beside his mark, no bubble. */
  .msg.user { align-self: flex-end; max-width: 78%; padding: 9px 15px; border-radius: 20px 20px 6px 20px; white-space: pre-wrap;
    background: var(--accent-fill, var(--garnet)); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
  .msg.user::after { content: ""; position: absolute; right: -6px; bottom: 0; width: 16px; height: 20px; background: inherit;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Cpath d='M0 0h10v8c0 7 2 10 6 12-6 .5-12-1-16-4z'/%3E%3C/svg%3E") no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Cpath d='M0 0h10v8c0 7 2 10 6 12-6 .5-12-1-16-4z'/%3E%3C/svg%3E") no-repeat; }
  .msg.assistant { align-self: stretch; max-width: 100%; padding: 3px 0 0 44px; color: var(--label); }
  .msg.assistant > .orbit { position: absolute; left: 0; top: 1px; width: 28px; height: 28px; }
  .msg.assistant p { margin: 0 0 8px; } .msg.assistant p:last-child { margin-bottom: 0; }
  .msg.assistant code { background: var(--wash); border: 1px solid var(--hair); border-radius: 4px; padding: 1px 5px; font-family: var(--mono); font-size: 12px; }
  .msg.assistant pre { background: var(--wash); border: 1px solid var(--hair); border-radius: 8px; padding: 10px 12px; overflow-x: auto; margin: 8px 0; }
  .msg.assistant pre code { background: none; border: none; padding: 0; }
  .msg.assistant table { border-collapse: collapse; margin: 8px 0; font-family: var(--mono); font-size: 12px; display: block; max-width: 100%; overflow-x: auto; }
  .msg.assistant th { background: var(--wash); color: var(--label2, var(--label)); text-align: left; padding: 5px 10px; border: 1px solid var(--hair); text-transform: uppercase; font-size: 10px; letter-spacing: 0.06em; white-space: nowrap; }
  .msg.assistant td { padding: 5px 10px; border: 1px solid var(--hair); }
  .msg.assistant ul, .msg.assistant ol { margin: 4px 0 8px 20px; }
  .msg.assistant h1, .msg.assistant h2, .msg.assistant h3 { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--label2, var(--label)); margin: 10px 0 6px; }
  .msg.assistant a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
  .msg.assistant p.headline { font-size: 14px; font-weight: 600; color: var(--label); margin: 0 0 4px; line-height: 1.5; }
  .key-points .facts { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hair); display: grid; grid-template-columns: max-content 1fr; column-gap: 14px; row-gap: 3px; }
  .key-points .fact-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--label3, var(--label)); align-self: baseline; padding-top: 2px; }
  .key-points .fact-v { font-size: 13.5px; color: var(--label); }
  .key-points .facts + p, .key-points .headline + p { margin-top: 8px; }
  .key-points p:not(.headline) { font-size: 13.5px; color: var(--label2, var(--label)); }
  .details { margin-top: 12px; font-size: 13.5px; color: var(--label2, var(--label)); }
  .details > :first-child { margin-top: 0; }
  /* Diagrams: Mermaid draws the geometry, these rules own the look (theme tokens,
     so light/dark follow the page). Label size stays in the Mermaid config: a CSS
     font change after measurement mis-sizes the boxes. !important beats Mermaid's
     own #id-scoped rules. */
  .diagram-fig { margin: 10px 0 12px; }
  .diagram { overflow-x: auto; }
  .diagram.drawn { padding: 14px 10px 10px; border: 1px solid var(--hair); border-radius: 12px; background: var(--wash); }
  .diagram.drawn svg { display: block; margin: 0 auto; max-width: 100%; height: auto; font-variant-numeric: normal; }
  .diagram svg foreignObject { overflow: visible; }
  .diagram svg .node rect, .diagram svg .node polygon, .diagram svg .node circle, .diagram svg .node path {
    fill: var(--card) !important; stroke: var(--hair2) !important; stroke-width: 1px !important; }
  .diagram svg .nodeLabel, .diagram svg .node .label { color: var(--label) !important; fill: var(--label) !important; }
  /* Edge labels: a card-coloured backing on the text only. Filling the label's
     box or group painted a block far taller than the words. */
  .diagram svg .edgeLabel p { background: var(--card) !important; color: var(--label2, var(--label)) !important; }
  .diagram svg .edgeLabel rect, .diagram svg .edgeLabel .labelBkg { fill: none !important; background: none !important; }
  .diagram svg .cluster rect { fill: var(--card2) !important; stroke: var(--hair) !important; }
  .diagram svg .cluster .nodeLabel, .diagram svg .cluster-label .nodeLabel { color: var(--label2, var(--label)) !important; }
  .diagram svg .flowchart-link { stroke: var(--label3) !important; stroke-width: 1.25px !important; }
  .diagram svg marker path, .diagram svg .arrowheadPath, .diagram svg .arrowMarkerPath { fill: var(--label3) !important; stroke: var(--label3) !important; }
  .diagram svg .node.now rect, .diagram svg .node.now polygon { fill: var(--accent-soft) !important; stroke: var(--accent) !important; stroke-width: 1.5px !important; }
  .diagram svg .node.warn rect, .diagram svg .node.warn polygon { fill: var(--gold-soft, rgba(176,141,60,0.14)) !important; stroke: var(--gold) !important; }
  .diagram svg .node.good rect, .diagram svg .node.good polygon { fill: var(--success-bg) !important; stroke: var(--success-fg) !important; }
  .diagram svg .node.bad rect, .diagram svg .node.bad polygon { fill: var(--danger-bg) !important; stroke: var(--danger-fg) !important; }
  /* Wide diagrams: a fitted preview in the answer, full size behind Expand. */
  .diagram-fig .diagram-actions { display: flex; justify-content: center; }
  .diagram-expand { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; background: none; border: 1px solid var(--hair); border-radius: 999px;
    padding: 3px 11px; cursor: pointer; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.03em; color: var(--label2, var(--label)); }
  .diagram-expand:hover { border-color: var(--accent); color: var(--accent); }
  .diagram.wide { cursor: zoom-in; }
  .diagram-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 24px;
    background: rgba(0, 0, 0, 0.55); }
  .diagram-overlay .panel { position: relative; display: flex; flex-direction: column; max-width: 100%; max-height: 100%; background: var(--card);
    border: 1px solid var(--hair); border-radius: 16px; box-shadow: var(--soft-shadow, 0 18px 50px rgba(0,0,0,0.35)); }
  .diagram-overlay .panel-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--hair); }
  .diagram-overlay .panel-head .cap { flex: 1; font-size: 12.5px; color: var(--label2, var(--label)); }
  .diagram-overlay .panel-head .diagram-expand { margin-top: 0; }
  .diagram-overlay .panel-body { overflow: auto; padding: 16px; }
  .diagram-overlay .diagram.drawn { cursor: default; }
  .diagram-overlay .diagram.drawn svg { max-width: none; }
  @media (max-width: 640px) { .diagram-overlay { padding: 8px; } }
  .diagram-fig figcaption, .chart-fig figcaption { margin: 8px 2px 0; font-size: 12px; line-height: 1.45; color: var(--label2, var(--label)); text-align: center; }
  /* Charts: Chart.js draws into the canvas; these rules own the box. hydrateCharts
     reads its colours from the same tokens, so light and dark follow the page. The
     numbers table under the caption is the accessible, no-script version of the data. */
  .chart-fig { margin: 10px 0 12px; }
  .chart { position: relative; box-sizing: border-box; height: 260px; padding: 12px 12px 8px;
    border: 1px solid var(--hair); border-radius: 12px; background: var(--wash); }
  .chart.round { height: 300px; }
  .chart canvas { display: block; }
  .chart-fig.chart-fallback .chart { display: none; }
  .chart-data { margin-top: 6px; }
  .chart-data summary { list-style: none; width: max-content; margin: 0 auto; cursor: pointer; font-family: var(--mono); font-size: 10.5px;
    letter-spacing: 0.03em; color: var(--label2, var(--label)); }
  .chart-data summary::-webkit-details-marker { display: none; }
  .chart-data summary:hover { color: var(--accent); }
  .chart-data td:not(:first-child) { text-align: right; }
  .chart-fig .diagram-actions { display: flex; justify-content: center; }
  .diagram-overlay .chart.chart-wide { width: 1100px; max-width: none; height: 420px; }

  /* ── clarifying questions ── */
  .clarify-card { border: 1px solid var(--hair); border-radius: 12px; padding: 12px 14px; margin-top: 8px; background: var(--wash); position: relative; }
  .clarify-lead { font-size: 12px; color: var(--label3, var(--label)); margin-bottom: 4px; }
  .clarify-q { font-size: 13.5px; margin: 8px 0 5px; }
  .clarify-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
  .clarify-opt { font-size: 12.5px; padding: 5px 11px; border: 1px solid var(--hair); border-radius: 999px; background: var(--card); cursor: pointer; color: var(--label); }
  .clarify-opt.on { border-color: var(--accent); color: var(--accent); }
  .clarify-other { font-size: 12.5px; padding: 5px 9px; border: 1px solid var(--hair); border-radius: 8px; min-width: 160px; background: var(--card); color: var(--label); }
  .clarify-actions { display: flex; gap: 8px; margin-top: 10px; }