/* Run board (request lanes) and answer cards. Tokens come from copilot.css. */
:root { --answer-neg:#a8492f; --answer-neg-bg:#f7ebe5; --answer-neg-line:#ecd2c7; --answer-pos:#4f7f39; }

.message.bot-msg.answer-live { background:transparent; padding:0; border:0; box-shadow:none; max-width:100%; width:100%; }
.answer-num { font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }
.is-neg { color:var(--answer-neg); }

/* ---------- run board ---------- */
.run-board { margin:0 0 10px; }
.run-board__head { display:flex; align-items:center; gap:8px; width:100%; padding:7px 10px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--muted); font-size:11.5px; text-align:left; cursor:default; }
.run-board.is-done:not(.is-compact) .run-board__head { cursor:pointer; }
.run-board.is-done:not(.is-compact) .run-board__head:hover { border-color:var(--brand-500); }
.run-board__title { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.run-board__timer { font-variant-numeric:tabular-nums; font-size:10.5px; }
.run-board__pulse { width:8px; height:8px; flex:none; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 #74a55788; animation:run-pulse 1.2s infinite; }
.run-board.is-done .run-board__pulse { animation:none; background:var(--accent); width:14px; height:14px; display:grid; place-items:center; }
.run-board.is-done .run-board__pulse::after { content:""; width:5px; height:3px; border:1.6px solid #fff; border-top:0; border-right:0; transform:rotate(-45deg) translate(0,-1px); }
.run-board.is-done.has-failure .run-board__pulse { background:var(--signal); }
.run-board.is-done.has-failure .run-board__pulse::after { content:"!"; width:auto; height:auto; border:0; transform:none; color:#fff; font:700 9px/1 system-ui; }
@keyframes run-pulse { 70% { box-shadow:0 0 0 7px #74a55700; } 100% { box-shadow:0 0 0 0 #74a55700; } }

.run-board__lanes { display:grid; grid-template-columns:minmax(0,1fr); gap:7px; margin-top:7px; }
.run-board.is-done:not(.is-open) .run-board__lanes { display:none; }
.run-lane { min-width:0; background:#fff; border:1px solid var(--line); border-radius:12px; padding:9px 11px; }
.run-lane.is-entering { animation:run-enter 260ms var(--motion-out) both; }
@keyframes run-enter { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.run-lane__top { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink); }
.run-lane__q { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.run-lane__ms { font-size:10.5px; color:var(--muted); font-variant-numeric:tabular-nums; min-width:3.2em; text-align:right; }
.run-chip { font-size:10px; font-weight:550; padding:1px 7px; border-radius:999px; background:var(--brand-100); color:var(--brand-900); border:1px solid var(--brand-300); white-space:nowrap; }
.run-lane__stages { display:flex; align-items:center; margin-top:8px; min-width:0; }
.run-stage { display:flex; align-items:center; gap:5px; font-size:10.5px; color:var(--muted); white-space:nowrap; transition:color 200ms; }
.run-stage[data-state="active"], .run-stage[data-state="done"] { color:var(--ink); }
.run-stage[data-state="skipped"] { opacity:.45; }
.run-stage[data-state="failed"] { color:var(--signal); }
.run-dot { width:14px; height:14px; flex:none; border-radius:50%; border:1.5px solid var(--brand-300); background:#fff; display:grid; place-items:center; transition:background 200ms,border-color 200ms; }
.run-stage[data-state="active"] .run-dot { border-color:var(--accent); border-top-color:transparent; animation:run-spin .7s linear infinite; }
.run-stage[data-state="done"] .run-dot { background:var(--accent); border-color:var(--accent); animation:run-pop 260ms var(--motion-out); }
.run-stage[data-state="done"] .run-dot::after { content:""; width:5px; height:3px; border:1.6px solid #fff; border-top:0; border-right:0; transform:rotate(-45deg) translate(0,-1px); }
.run-stage[data-state="failed"] .run-dot { background:var(--signal); border-color:var(--signal); }
.run-stage[data-state="failed"] .run-dot::after { content:"!"; color:#fff; font:700 9px/1 system-ui; }
@keyframes run-spin { to { transform:rotate(360deg); } }
@keyframes run-pop { from { transform:scale(.6); } to { transform:scale(1); } }
.run-bar { flex:1; min-width:12px; height:2px; margin:0 6px; background:var(--line); position:relative; overflow:hidden; border-radius:1px; }
.run-bar i { position:absolute; inset:0; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform 380ms var(--motion-out); }
.run-bar.is-filled i { transform:scaleX(1); }
.run-bar.is-flowing::after { content:""; position:absolute; top:0; bottom:0; left:0; width:40%; background:linear-gradient(90deg,transparent,var(--accent),transparent); animation:run-flow 1s linear infinite; }
@keyframes run-flow { from { transform:translateX(-100%); } to { transform:translateX(250%); } }
.run-lane__records { font-size:10.5px; color:var(--brand-900); font-variant-numeric:tabular-nums; white-space:nowrap; }
.run-lane__records:empty { display:none; }
.run-lane__note { font-size:10.5px; color:var(--signal); }
.run-lane__note:empty { display:none; }
.run-lane__note.is-activity { color:var(--muted); }
.run-lane.is-failed { border-color:#e6cfaa; background:#fffaf2; }

/* ---------- answer cards ---------- */
.answer-cards { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
.answer-card { min-width:0; background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px 13px; }
.answer-card.is-entering { animation:run-enter 280ms var(--motion-out) both; }
.answer-card.is-entering + .answer-card.is-entering { animation-delay:60ms; }
.answer-card__head { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:550; color:var(--ink); margin-bottom:9px; }
.answer-card__n { width:18px; height:18px; flex:none; border-radius:6px; background:var(--brand-100); color:var(--brand-900); display:grid; place-items:center; font-size:10px; font-weight:650; }
.answer-card__q { flex:1; min-width:0; }
.answer-card__period { margin-left:auto; font-size:10px; font-weight:400; color:var(--muted); white-space:nowrap; }
.answer-card__numbers:empty { display:none; }
.answer-card__aside { margin:8px 0 0; font-size:11px; color:var(--muted); }
.answer-card__note { margin:8px 0 0; padding:6px 9px; font-size:10.5px; line-height:1.45; color:#7a5a1f; background:#fdf6e9; border:1px solid #efdfbf; border-radius:8px; }
.answer-card__note::before { content:"Data note \00b7\00a0"; font-weight:600; }
.answer-card__prose { font-size:13px; line-height:1.65; color:#33452b; }
.answer-card__prose:empty { display:none; }
.answer-card__numbers:not(:empty) + .answer-card__prose { margin-top:10px; }
.answer-card__prose > :first-child { margin-top:0; }
/* The opening sentence is the card's takeaway. */
.answer-card__prose > p:first-child { font-size:14.5px; line-height:1.5; font-weight:550; color:var(--ink); letter-spacing:-.1px; }
.answer-card__prose > :last-child { margin-bottom:0; }
/* A draft being checked against the data is dimmed; the checked text fades in over it. */
.answer-card__prose { transition:opacity 160ms ease; }
.answer-card__prose.is-checking { opacity:.55; }
.answer-card__prose.is-swapping { opacity:0; }
/* A notice in place of an answer, and a part that could not be answered: a warning, not a headline. */
.answer-card__notice { margin:10px 0 0; padding:6px 9px; font-size:12px; line-height:1.5; color:#7a5a1f; background:#fdf6e9; border:1px solid #efdfbf; border-radius:8px; }
.answer-card__notice[hidden] { display:none; }
.answer-card__numbers:empty + .answer-card__figures:empty + .answer-card__prose:empty + .answer-card__notice { margin-top:0; }
.answer-card.is-failed { border-color:#e6cfaa; background:#fffaf2; }
.answer-card.is-failed .answer-card__prose { color:#7a5a1f; font-size:12px; line-height:1.55; }
.answer-card.is-failed .answer-card__prose > p:first-child { font-size:12px; line-height:1.55; font-weight:400; color:#7a5a1f; letter-spacing:0; }
.answer-card.is-failed .answer-card__prose > p:first-child::before { content:"!"; display:inline-grid; place-items:center; width:14px; height:14px; margin-right:6px; border-radius:50%; background:var(--signal); color:#fff; font:700 9px/1 system-ui; vertical-align:1px; }
.answer-card__follow:empty { display:none; }
.answer-follow { margin-top:10px; display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--brand-900); background:var(--brand-100); border:1px solid var(--brand-300); border-radius:8px; padding:5px 10px; cursor:pointer; text-align:left; transition:background 140ms,border-color 140ms,transform 140ms var(--motion-out); }
.answer-follow::after { content:"\2192"; transition:transform 140ms var(--motion-out); }
.answer-follow:hover { background:var(--brand-200); border-color:var(--brand-500); }
.answer-follow:hover::after { transform:translateX(2px); }
.answer-follow:active { transform:scale(.98); }

.answer-tiles { display:grid; grid-template-columns:repeat(var(--tiles,3),minmax(0,1fr)); gap:6px; margin-bottom:10px; }
.answer-tiles[data-count="2"] { --tiles:2; }
.answer-tiles[data-count="4"] { --tiles:4; }
@media (max-width:520px) { .answer-tiles[data-count="4"] { --tiles:2; } }
.answer-tile { background:var(--paper); border:1px solid var(--line); border-radius:9px; padding:6px 8px; min-width:0; container-type:inline-size; }
.answer-tile small { display:block; font-size:9.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* A number never breaks inside: in a narrow tile it shrinks to fit (about 10 characters across the tile). */
.answer-tile b { display:inline-block; font-size:min(14px, 14.5cqi); font-weight:600; color:var(--ink); white-space:nowrap; }
.answer-tile__unit { margin-left:4px; font-size:9.5px; color:var(--muted); }
.answer-tile.is-key.is-neg { background:var(--answer-neg-bg); border-color:var(--answer-neg-line); }
.answer-tile.is-key.is-neg b { color:var(--answer-neg); }
.answer-tile.is-key.is-pos { background:var(--brand-100); border-color:var(--brand-300); }
.answer-tile.is-key.is-pos b { color:var(--answer-pos); }

.answer-chart svg { display:block; width:100%; height:auto; overflow:visible; }
.answer-zero { stroke:var(--brand-300); stroke-width:1; stroke-dasharray:3 3; }
.answer-bar { fill:var(--brand-500); }
.answer-bar.is-neg { fill:var(--answer-neg); }
.answer-bar.is-pos { fill:var(--accent); }
.answer-bar.is-total-neg { fill:#7a3622; }
.answer-bar.is-total-pos { fill:var(--answer-pos); }
.answer-bar.is-flat { fill:var(--brand-500); }
.is-animated .answer-bar { transform-box:fill-box; transform-origin:bottom; animation:answer-grow 550ms var(--motion-out) both; }
.is-animated .answer-bar.grows-down { transform-origin:top; }
@keyframes answer-grow { from { transform:scaleY(0); } to { transform:scaleY(1); } }
.answer-waterfall__labels { display:grid; grid-template-columns:repeat(4,1fr); margin-top:4px; text-align:center; }
.answer-waterfall__labels b { display:block; font-size:10.5px; font-weight:550; color:var(--ink); }
.answer-waterfall__labels b.is-neg { color:var(--answer-neg); }
.answer-waterfall__labels small { font-size:9.5px; color:var(--muted); }

.answer-line { fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.answer-line.is-neg { stroke:var(--answer-neg); }
.is-animated .answer-line { stroke-dasharray:1; stroke-dashoffset:1; animation:answer-draw 550ms var(--motion-out) 150ms forwards; }
@keyframes answer-draw { to { stroke-dashoffset:0; } }
.answer-dot { fill:var(--accent); }
.answer-dot.is-neg { fill:var(--answer-neg); }
.is-animated .answer-dot { opacity:0; animation:answer-fade 160ms 650ms forwards; }
@keyframes answer-fade { to { opacity:1; } }
.answer-chart__caption { font-size:9.5px; color:var(--muted); margin-bottom:2px; }
.answer-rows { margin-top:6px; font-size:11px; }
.answer-row { display:grid; grid-template-columns:74px minmax(0,1fr) 40px 62px; gap:6px; padding:5px 0; border-top:1px solid var(--line); align-items:center; }
.answer-row > span:nth-child(2) { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.answer-row > span:nth-child(3), .answer-row > span:nth-child(4) { text-align:right; }
.answer-row.is-head { border-top:0; padding-top:0; font-size:9.5px; color:var(--muted); }
.is-animated .answer-row:not(.is-head) { animation:run-enter 300ms var(--motion-out) both; }
.answer-rows__more { padding-top:5px; border-top:1px solid var(--line); font-size:10.5px; color:var(--muted); }

.answer-series__names { display:grid; margin-top:3px; font-size:9.5px; color:var(--muted); text-align:center; }
.answer-series__names span { min-width:0; overflow:hidden; white-space:nowrap; }
.answer-series__names span.is-marked { color:var(--ink); font-weight:600; }
.answer-series__axis { display:flex; justify-content:space-between; font-size:9.5px; color:var(--muted); margin-top:3px; }
.answer-ranking { display:grid; gap:5px; }
.answer-rank { display:grid; grid-template-columns:minmax(56px,auto) 1fr auto; gap:8px; align-items:center; font-size:11px; }
.answer-rank b { font-weight:550; }
.answer-rank__track { height:8px; border-radius:4px; background:var(--brand-100); overflow:hidden; }
.answer-rank__bar { display:block; height:100%; border-radius:4px; background:var(--accent); transform-origin:left; }
.answer-rank__bar.is-neg { background:var(--answer-neg); }
.is-animated .answer-rank__bar { animation:answer-grow-x 550ms var(--motion-out) both; }
@keyframes answer-grow-x { from { transform:scaleX(0); } to { transform:scaleX(1); } }
/* Rows, ranks and tiles land one after another (35-50ms apart) rather than all at once. */
.is-animated .answer-row:nth-child(3) { animation-delay:35ms; }
.is-animated .answer-row:nth-child(4) { animation-delay:70ms; }
.is-animated .answer-row:nth-child(5) { animation-delay:105ms; }
.is-animated .answer-row:nth-child(6) { animation-delay:140ms; }
.is-animated .answer-row:nth-child(n+7) { animation-delay:175ms; }
.is-animated .answer-rank:nth-child(2) .answer-rank__bar { animation-delay:50ms; }
.is-animated .answer-rank:nth-child(3) .answer-rank__bar { animation-delay:100ms; }
.is-animated .answer-rank:nth-child(4) .answer-rank__bar { animation-delay:150ms; }
.is-animated .answer-rank:nth-child(n+5) .answer-rank__bar { animation-delay:200ms; }
.is-animated .answer-tile { animation:run-enter 240ms var(--motion-out) backwards; }
.is-animated .answer-tile:nth-child(2) { animation-delay:40ms; }
.is-animated .answer-tile:nth-child(3) { animation-delay:80ms; }
.is-animated .answer-tile:nth-child(n+4) { animation-delay:120ms; }

@media (prefers-reduced-motion: reduce) {
  .run-board *, .answer-cards * { animation:none !important; transition:none !important; }
  .answer-line { stroke-dashoffset:0 !important; }
  .answer-dot { opacity:1 !important; }
}

/* ---------- figures Gemini chose ---------- */
.answer-card.has-figures .answer-card__numbers > .answer-chart { display:none; }
.answer-card__figures:empty { display:none; }
.answer-card__figures { display:grid; gap:12px; }
.answer-card__numbers:not(:empty) + .answer-card__figures { margin-top:2px; }
.answer-card__figures + .answer-card__prose { margin-top:10px; }
.answer-figure { margin:0; min-width:0; }
.answer-figure__title { font-size:11.5px; font-weight:600; color:var(--ink); margin-bottom:6px; }
.answer-figure__caption { margin:6px 0 0; font-size:11px; line-height:1.5; color:var(--muted); }
.answer-figure__marks { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.answer-figure__mark { display:inline-flex; gap:6px; align-items:baseline; font-size:10.5px; color:var(--muted); background:var(--paper); border:1px solid var(--line); border-radius:7px; padding:2px 7px; }
.answer-figure__mark b { font-weight:600; color:var(--ink); }
.answer-figure__mark b.is-neg { color:var(--answer-neg); }
.answer-figure .answer-tiles { margin-bottom:0; }
.answer-bar.is-highlight { stroke:var(--ink); stroke-width:1.5; }
.answer-dot.is-highlight { stroke:#fff; stroke-width:1.5; }
.answer-ref { stroke:var(--signal); stroke-width:1; stroke-dasharray:4 3; }
.answer-ref__label { font-size:8.5px; fill:var(--signal); font-family:inherit; paint-order:stroke; stroke:#fff; stroke-width:3px; stroke-linejoin:round; }
.answer-rank.is-highlight .answer-rank__login { font-weight:650; color:var(--ink); }
.answer-rank.is-highlight .answer-rank__bar { box-shadow:inset 0 0 0 1.5px var(--ink); }