/* v9 widgets rendered in v9-2 card style — used by Section 2 (#askSection .ask-art)
   and Section 3 (.board-widgets). Unique .art-* class names, on-brand violet. */

/* grid: every dashboard widget is a uniform half-width cell — never full-span,
   so a big KPI number can't float across a 740px card and break the grid. */
#askSection .ask-art .art-card.art-w12 { grid-column: auto; }


#askSection .ask-art {
  display: block; position: relative;   /* gated preview: crop the content under a gradient + CTA (no scroll) */
  height: 620px; overflow: hidden;   /* fixed — must equal .ask-chat height so the two columns never differ */
}
/* gradient mask + "open" CTA pinned to the bottom of the dashboard (mirrors Section 3's board gate) */
#askSection .ask-art .ask-gate { position: absolute; left: 0; right: 0; bottom: 0; height: 138px; background: linear-gradient(to bottom, transparent 0%, var(--paper-cream, #f5f3ee) 72%); pointer-events: none; z-index: 2; }
#askSection .ask-art .ask-open { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 8px; background: var(--paper-snow, #fff); color: var(--violet-ink, #5B21B6); border-radius: 999px; padding: 12px 24px; font: 700 13.5px var(--font-sans, sans-serif); white-space: nowrap; text-decoration: none; box-shadow: 0 14px 32px -12px rgba(20,17,13,0.4); transition: background .15s ease, color .15s ease; }
#askSection .ask-art .ask-open:hover { background: var(--violet, #7C63F5); color: #fff; }
#askSection .ask-art .ask-open svg { width: 15px; height: 15px; }
#askSection .ask-chat { min-height: 0; }

#askSection .ask-art .dash-inner { column-count: 2; column-gap: 14px; }                 /* pre-balance state (used only to measure) */
#askSection .ask-art .dash-inner.dash-flex { display: flex; column-count: initial; gap: 14px; align-items: flex-start; }  /* JS-balanced masonry columns */
#askSection .ask-art .dash-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
#askSection .ask-art .art-card { break-inside: avoid; -webkit-column-break-inside: avoid; width: 100%; margin: 0 0 14px; }
#askSection .ask-art .dash-col .art-card { margin: 0; }
/* Denser dashboard cards so more widgets read cleanly in the compact pane */
#askSection .ask-art .art-card { padding: 14px 16px; }
/* Stack the card header so the title gets the full card width and wraps to 1–2
   clean lines (instead of one-word-per-line); subtitle sits below, clamped to 1 line. */
#askSection .ask-art .art-card .art-h { display: block; margin-bottom: 10px; }
#askSection .ask-art .art-card .art-h .t { display: block; font-size: 13.5px; line-height: 1.25; }
#askSection .ask-art .art-card .art-h .s { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; margin-top: 3px; max-width: 100%; }
#askSection .ask-art .art-card .art-big { margin: 2px 0 7px; }
#askSection .ask-art .art-card .art-cap { text-align: left; margin-top: 9px; font-size: 11.5px; }
#askSection .ask-art .art-card .score-row { padding: 7px 0; }
#askSection .ask-art .art-card .score-row .sl { font-size: 12.5px; }
#askSection .ask-art .art-card .score-row .sv { font-size: 15px; }
.art-card .art-cap { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
.art-card.art-w { min-width: 0; overflow: hidden; }
.art-card.art-w .art-big { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.05; }

/* statgrid → 2x2 mini stats */
.art-statgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-top: 4px; }
.art-statgrid .art-stat { min-width: 0; }
.art-statgrid .asl { font: 600 10.5px var(--font-sans, sans-serif); color: var(--ink-subtle, #94a3b8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.art-statgrid .asv { font: 800 17px var(--font-sans, sans-serif); color: var(--ink, #0f172a); margin: 1px 0; }
.art-statgrid .asd { font: 700 10.5px var(--font-sans, sans-serif); }
.art-statgrid .asd.up { color: #0d9488; } .art-statgrid .asd.down { color: #dc2626; }

/* funnel */
.art-funnel { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.art-funnel .afn { display: flex; align-items: center; gap: 9px; font: 600 12px var(--font-sans, sans-serif); }
.art-funnel .afl { flex: 0 0 40%; color: var(--ink-muted, #475569); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.art-funnel .aft { flex: 1; height: 12px; border-radius: 4px; background: rgba(130,104,255,.10); overflow: hidden; }
.art-funnel .aft i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #9A85FF, #7C63F5); }
.art-funnel .afv { flex: 0 0 auto; font-weight: 700; color: var(--ink, #0f172a); }

/* donut + legend */
.art-donut { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.art-donut svg { flex: 0 0 96px; width: 96px; height: 96px; }
.art-donut .adc { font: 800 15px var(--font-sans, sans-serif); fill: var(--ink, #0f172a); }
.art-donut .adcl { font: 700 6px var(--font-sans, sans-serif); fill: var(--ink-subtle, #94a3b8); letter-spacing: .04em; }
.adleg { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; }
.adleg .adl { display: flex; align-items: center; gap: 6px; font: 600 11px var(--font-sans, sans-serif); color: var(--ink-muted, #475569); min-width: 0; }
.adleg .adk { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }
.adleg .adn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.art-donut .adleg { flex-direction: column; flex: 1; gap: 5px; margin-top: 0; }

/* multiline / trend / slope / stackedarea */
.art-multiline { display: block; width: 100%; height: 60px; margin: 6px 0 4px; }

/* marimekko */
.art-marimekko { display: flex; align-items: flex-end; gap: 5px; height: 116px; margin-top: 6px; }
.art-marimekko .amk { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.art-marimekko .amkbar { display: flex; flex-direction: column-reverse; height: 96px; border-radius: 4px; overflow: hidden; background: rgba(130,104,255,.08); }
.art-marimekko .amkbar i { display: block; width: 100%; }
.art-marimekko .amkl { font: 600 10px var(--font-sans, sans-serif); color: var(--ink-subtle, #94a3b8); text-align: center; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* heatmap + cohort grid */
.art-heat { margin-top: 6px; font: 600 10.5px var(--font-sans, sans-serif); }
.art-heat .ahmrow { display: flex; gap: 4px; margin-bottom: 4px; align-items: center; }
.art-heat .ahml { flex: 0 0 34%; color: var(--ink-muted, #475569); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.art-heat .ahmc { flex: 1; text-align: center; color: var(--ink-subtle, #94a3b8); }
.art-heat .ahmcell { flex: 1; text-align: center; color: #1e1640; border-radius: 4px; padding: 5px 0; font-weight: 700; }
.art-heat .ahmhead .ahmcell { background: none; }

/* quadrant / scatter */
.art-quad { position: relative; height: 116px; margin-top: 6px; border-left: 1.5px solid rgba(70,50,120,.18); border-bottom: 1.5px solid rgba(70,50,120,.18); background: linear-gradient(rgba(130,104,255,.04), rgba(130,104,255,.04)); }
.art-quad .aqd { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #7C63F5; transform: translate(-50%, 50%); box-shadow: 0 0 0 3px rgba(124,99,245,.16); }
.art-quad .aqx, .art-quad .aqy { position: absolute; font: 600 9px var(--font-sans, sans-serif); color: var(--ink-subtle, #94a3b8); }
.art-quad .aqx { bottom: -16px; right: 0; } .art-quad .aqy { top: -2px; left: 2px; }

/* boxplot */
.art-box { display: flex; flex-direction: column; gap: 9px; margin-top: 6px; }
.art-box .abx { display: flex; align-items: center; gap: 9px; font: 600 11px var(--font-sans, sans-serif); }
.art-box .abxl { flex: 0 0 30%; color: var(--ink-muted, #475569); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.art-box .abxt { position: relative; flex: 1; height: 14px; }
.art-box .abxw { position: absolute; top: 50%; height: 2px; background: rgba(124,99,245,.35); transform: translateY(-50%); }
.art-box .abxbox { position: absolute; top: 2px; height: 10px; border-radius: 3px; background: rgba(124,99,245,.30); }
.art-box .abxm { position: absolute; top: 0; width: 2px; height: 14px; background: #6D28D9; }

/* waterfall */
.art-wf { display: flex; align-items: flex-end; gap: 5px; height: 116px; margin-top: 6px; }
.art-wf .awf { flex: 1; display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.art-wf .awt { position: relative; height: 96px; }
.art-wf .awb { position: absolute; left: 12%; width: 76%; border-radius: 2px; }
.art-wf .awb.start { background: #7C63F5; } .art-wf .awb.up { background: #0d9488; } .art-wf .awb.down { background: #e879a6; }
.art-wf .awl { font: 600 9px var(--font-sans, sans-serif); color: var(--ink-subtle, #94a3b8); text-align: center; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* radar */
.art-radar { display: flex; justify-content: center; margin-top: 4px; }
.art-radar svg { width: 150px; height: 138px; }

/* timeline (compact list) */
.atlist { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.atlist .atli { display: flex; gap: 10px; font: 600 11.5px var(--font-sans, sans-serif); }
.atlist .att { flex: 0 0 42px; color: var(--violet); font-weight: 700; }
.atlist .atx { color: var(--ink-muted, #475569); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* bullets target tick on .art-bar */
.art-bar .abt { position: relative; }
.art-bar .abtick { position: absolute; top: -2px; width: 2px; height: 11px; background: #6D28D9; border-radius: 1px; }

/* Section 3 — v9 widgets inside the agent board */
/* board-main is a 1.5fr/1fr grid in the base CSS but now holds only #boardWidgets —
   force it full-width so the widgets fill the whole board (no empty right column). */
.agent-board .board-main { grid-template-columns: 1fr; }
.board-widgets { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* odd widget count (3): let the last one span both columns so there's no empty cell */
.board-widgets .art-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.board-widgets .art-card { background: #fff; min-width: 0; overflow: hidden; }
.board-widgets .art-card .art-big { font-size: clamp(22px, 1.9vw, 30px); line-height: 1.05; }
@media (max-width: 760px) { .board-widgets { grid-template-columns: 1fr; } }

/* ===== v9 per-industry categorical widget palette (charts get v9's colors; page accent stays violet) ===== */
#askSection .ask-art, .agent-board { --c1:#6E3BFF;--c2:#B5287C;--c3:#1B737F;--c4:#E0A138;--c5:#4182DD;--c6:#27AF82;--pos:#15703A;--neg:#C62828; }
body[data-industry="ecom"]   #askSection .ask-art, body[data-industry="ecom"]   .agent-board { --c1:#047857;--c2:#1B6D83;--c3:#713AC7;--c4:#DE9822;--c5:#DC5899;--c6:#80BA28; }
body[data-industry="retail"] #askSection .ask-art, body[data-industry="retail"] .agent-board { --c1:#B11226;--c2:#1A727A;--c3:#454694;--c4:#DC9E2C;--c5:#D25A8C;--c6:#43A66D; }
body[data-industry="cpg"]    #askSection .ask-art, body[data-industry="cpg"]    .agent-board { --c1:#C8102E;--c2:#25507F;--c3:#156458;--c4:#DB9B23;--c5:#6C4996;--c6:#E07BA8; }
body[data-industry="fnb"]    #askSection .ask-art, body[data-industry="fnb"]    .agent-board { --c1:#E2562E;--c2:#2C5190;--c3:#1B6D83;--c4:#DE9822;--c5:#C93979;--c6:#814CDB; }
body[data-industry="hc"]     #askSection .ask-art, body[data-industry="hc"]     .agent-board { --c1:#0B6E7C;--c2:#343785;--c3:#B43D6D;--c4:#D19817;--c5:#53BAA0;--c6:#7F5CC8; }
body[data-industry="ent"]    #askSection .ask-art, body[data-industry="ent"]    .agent-board { --c1:#C10A3B;--c2:#713AC7;--c3:#1B6D83;--c4:#E0A138;--c5:#E77FB5;--c6:#148864; }
body[data-industry="gaming"] #askSection .ask-art, body[data-industry="gaming"] .agent-board { --c1:#C8138A;--c2:#713AC7;--c3:#1B7383;--c4:#DE9D2B;--c5:#1E9A66;--c6:#4E86E3; }
body[data-industry="edu"]    #askSection .ask-art, body[data-industry="edu"]    .agent-board { --c1:#1D4ED8;--c2:#814CDB;--c3:#1B6D83;--c4:#D38717;--c5:#C93979;--c6:#148864; }
body[data-industry="agency"] #askSection .ask-art, body[data-industry="agency"] .agent-board { --c1:#C0431D;--c2:#2E6EA3;--c3:#166F59;--c4:#D59E3A;--c5:#7E66BA;--c6:#D4758F; }
body[data-industry="other"]  #askSection .ask-art, body[data-industry="other"]  .agent-board { --c1:#6E3BFF;--c2:#B5287C;--c3:#1B737F;--c4:#E0A138;--c5:#4182DD;--c6:#27AF82; }

/* viz elements adopt each card's --wc (its palette color) */
#askSection .ask-art .art-bar .abt i, .agent-board .art-bar .abt i { background: var(--wc, #7C63F5); }
#askSection .ask-art .art-funnel .aft i, .agent-board .art-funnel .aft i { background: var(--wc, #7C63F5); }
#askSection .ask-art .art-bar .abtick, .agent-board .art-bar .abtick { background: var(--wc, #6D28D9); }
.art-card .art-quad .aqd { background: var(--wc, #7C63F5); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wc, #7C63F5) 16%, transparent); }
.art-card .art-box .abxw { background: color-mix(in srgb, var(--wc, #7C63F5) 34%, transparent); }
.art-card .art-box .abxbox { background: color-mix(in srgb, var(--wc, #7C63F5) 30%, transparent); }
.art-card .art-box .abxm { background: var(--wc, #6D28D9); }
.art-card .art-wf .awb.start { background: var(--wc, #7C63F5); }
.art-card .art-wf .awb.up { background: var(--pos, #15703A); }
.art-card .art-wf .awb.down { background: var(--neg, #C62828); }

/* ===== Section 3 board widgets: give them the same structure + polish as Section 2
   (the .art-bar/.art-delta/.art-spark + header-stack rules were #askSection-scoped only). ===== */
.art-card .art-bar { display: flex; align-items: center; gap: 10px; padding: 6px 0; font: 600 12px var(--font-sans, sans-serif); }
.art-card .art-bar .abl { flex: 0 0 42%; color: var(--ink-muted, #475569); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.art-card .art-bar .abt { position: relative; flex: 1; height: 7px; border-radius: 99px; background: rgba(130,104,255,.14); overflow: hidden; }
.art-card .art-bar .abt i { display: block; height: 100%; border-radius: 99px; }
.art-card .art-bar .abv { flex: 0 0 auto; color: var(--ink, #0f172a); font-weight: 700; }
.art-card .art-delta { display: inline-block; margin: 2px 0 8px; font: 700 12px var(--font-sans, sans-serif); }
.art-card .art-delta.up { color: var(--pos, #15703A); }
.art-card .art-delta.down { color: var(--neg, #C62828); }
.art-card .art-spark { display: block; width: 100%; height: 42px; margin: 6px 0 8px; }
.board-widgets .art-card { padding: 14px 16px; }
.board-widgets .art-card .art-h { display: block; margin-bottom: 10px; }
.board-widgets .art-card .art-h .t { display: block; font-size: 13.5px; line-height: 1.25; }
.board-widgets .art-card .art-h .s { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; margin-top: 3px; max-width: 100%; }
.board-widgets .art-card .art-big { margin: 2px 0 7px; }
.board-widgets .art-card .art-cap { text-align: left; margin-top: 9px; font-size: 11.5px; }
.board-widgets .art-card .score-row { padding: 7px 0; }

/* No widget subheadings — cleaner, title-only cards (both sections) */
#askSection .ask-art .art-card .art-h .s, .board-widgets .art-card .art-h .s { display: none; }
#askSection .ask-art .art-card .art-h, .board-widgets .art-card .art-h { margin-bottom: 8px; }


/* While a run is in flight, keep the gate + CTA hidden until widgets resolve. */
#askSection.ask-busy .ask-open, #askSection.ask-busy .ask-gate { opacity: 0; pointer-events: none; }

/* Prompt submit — the user bubble pops in as if just sent. */
@keyframes askPop { 0% { opacity: 0; transform: translateY(7px) scale(.985); } 100% { opacity: 1; transform: none; } }
#askSection .msg-user.pop { animation: askPop .34s cubic-bezier(.2,.7,.2,1); }

/* Agent thinking — bouncing dots + rotating status line. */
#askSection .ask-thinking { display: flex; align-items: center; gap: 10px; min-height: 20px; margin-bottom: 6px; }
#askSection .ask-thinking .td { display: inline-flex; gap: 4px; }
#askSection .ask-thinking .td i { width: 6px; height: 6px; border-radius: 50%; background: var(--violet, #7C63F5); opacity: .35; animation: askDot 1s infinite ease-in-out; }
#askSection .ask-thinking .td i:nth-child(2) { animation-delay: .15s; }
#askSection .ask-thinking .td i:nth-child(3) { animation-delay: .3s; }
@keyframes askDot { 0%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
#askSection .ask-thinking .ts { font: 600 12.5px var(--font-app, var(--font-sans, sans-serif)); color: var(--violet-ink, #5B21B6); letter-spacing: .01em; }

/* Streaming answer — blinking caret while tokens arrive. */
#askSection .msg-agent p.streaming::after { content: '▍'; display: inline-block; margin-left: 1px; color: var(--violet, #7C63F5); animation: askCaret .9s steps(1) infinite; }
@keyframes askCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* Live-read + suggestions fade under JS opacity control. */
#askSection .live-read, #askSection .sugg { transition: opacity .3s ease; }

/* Widget resolve — each card fades/rises in; gate + CTA fade last. */
#askSection .ask-art .art-card.w-init { opacity: 0; transform: translateY(9px); }
#askSection .ask-art .art-card.w-in { opacity: 1; transform: none; transition: opacity .34s ease, transform .34s cubic-bezier(.2,.7,.2,1); }
#askSection .ask-art .ask-gate, #askSection .ask-art .ask-open { transition: opacity .32s ease; }

/* Loading skeletons (shimmer sweep). Heights ~fill the 620px pane. */
#askSection .ask-art .ask-skel { background: var(--paper-snow, #fff); border: 1px solid var(--paper-edge, rgba(20,17,13,.08)); border-radius: 12px; padding: 16px 16px 18px; position: relative; overflow: hidden; }
#askSection .ask-art .dash-col .ask-skel { margin: 0; }
#askSection .ask-art .ask-skel.sk-sm { min-height: 132px; }
#askSection .ask-art .ask-skel.sk-md { min-height: 190px; }
#askSection .ask-art .ask-skel.sk-lg { min-height: 250px; }
#askSection .ask-art .ask-skel .sk-h { width: 56%; height: 11px; border-radius: 6px; background: rgba(20,17,13,.10); margin-bottom: 16px; }
#askSection .ask-art .ask-skel .sk-l { width: 100%; height: 8px; border-radius: 5px; background: rgba(20,17,13,.07); margin: 9px 0; }
#askSection .ask-art .ask-skel .sk-l.w80 { width: 80%; }
#askSection .ask-art .ask-skel .sk-chart { margin-top: 16px; height: 78px; border-radius: 8px; background: rgba(124,99,245,.09); }
#askSection .ask-art .ask-skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%); animation: askShimmer 1.25s infinite; }
@keyframes askShimmer { 100% { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  #askSection .ask-skel::after, #askSection .ask-thinking .td i, #askSection .msg-agent p.streaming::after { animation: none !important; }
  #askSection .ask-art .art-card.w-init { opacity: 1; transform: none; }
}