@sensiblestats/widget-react 0.16.0 → 0.17.0

package/dist/index.js

@@ -2,6 +2,18 @@
 import { useEffect as useEffect6, useMemo as useMemo2, useRef as useRef3 } from "react";
 import { StatsWidgetClient } from "@sensiblestats/widget-sdk";
 
+// src/kickoff.ts
+function formatBettingKickoff(kickoffUtc, ui, locale, now = /* @__PURE__ */ new Date()) {
+  const at = new Date(kickoffUtc);
+  const intlLocale = locale === "tr" ? "tr-TR" : "en-GB";
+  const time = new Intl.DateTimeFormat(intlLocale, { hour: "2-digit", minute: "2-digit" }).format(at);
+  const atLocalDate = new Date(at.getFullYear(), at.getMonth(), at.getDate());
+  const nowLocalDate = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const dayDiff = Math.round((atLocalDate.getTime() - nowLocalDate.getTime()) / 864e5);
+  const dayLabel = dayDiff === 0 ? ui.today : dayDiff === 1 ? ui.tomorrow : new Intl.DateTimeFormat(intlLocale, { weekday: "short", day: "numeric", month: "short" }).format(at);
+  return { dayLabel, time };
+}
+
 // src/i18n.ts
 var STRINGS = {
   en: {
@@ -56,7 +68,10 @@ var STRINGS = {
     slipPriceNotAccepted: (from, to) => `Price moved to ${to} (was ${from}). Tap to add.`,
     slipLoginRequired: "Sign in to add to your slip",
     slipSuspended: "Market suspended",
-    slipFailed: "Couldn't add to slip. Try again."
+    slipFailed: "Couldn't add to slip. Try again.",
+    today: "Today",
+    tomorrow: "Tomorrow",
+    bettingKickoff: (kickoffUtc, now) => formatBettingKickoff(kickoffUtc, STRINGS.en, "en", now)
   },
   tr: {
     launcherLabel: "SensibleStats ile sohbet et",
@@ -110,7 +125,10 @@ var STRINGS = {
     slipPriceNotAccepted: (from, to) => `Oran ${to} oldu (\xF6nceki ${from}). Eklemek i\xE7in dokunun.`,
     slipLoginRequired: "Kupona eklemek i\xE7in giri\u015F yap\u0131n",
     slipSuspended: "Bu market ask\u0131ya al\u0131nd\u0131",
-    slipFailed: "Kupona eklenemedi. Tekrar deneyin."
+    slipFailed: "Kupona eklenemedi. Tekrar deneyin.",
+    today: "Bug\xFCn",
+    tomorrow: "Yar\u0131n",
+    bettingKickoff: (kickoffUtc, now) => formatBettingKickoff(kickoffUtc, STRINGS.tr, "tr", now)
   }
 };
 function resolveLocaleStrings(locale) {
@@ -177,7 +195,10 @@ function normalizeUi(cfg) {
     slipPriceNotAccepted: strings.slipPriceNotAccepted,
     slipLoginRequired: strings.slipLoginRequired,
     slipSuspended: strings.slipSuspended,
-    slipFailed: strings.slipFailed
+    slipFailed: strings.slipFailed,
+    today: strings.today,
+    tomorrow: strings.tomorrow,
+    bettingKickoff: strings.bettingKickoff
   };
 }
 function toClientOptions(cfg) {
@@ -366,7 +387,13 @@ function toInsightVM(insight) {
     oddsDecimal: typeof oddsValue === "number" && Number.isFinite(oddsValue) ? oddsValue : void 0,
     quotedAtUtc: str(insight.odds?.quotedAtUtc),
     previousOdds: previous !== void 0 && direction !== void 0 ? previous.toFixed(2) : void 0,
-    movementDirection: previous !== void 0 && direction !== void 0 ? direction : void 0
+    movementDirection: previous !== void 0 && direction !== void 0 ? direction : void 0,
+    homeTeamName: home,
+    awayTeamName: away,
+    homeCrest: str(insight.homeTeamImagePath),
+    awayCrest: str(insight.awayTeamImagePath),
+    competitionCrest: str(insight.competitionImagePath),
+    kickoffUtc: str(insight.kickoffUtc)
   };
 }
 function toSlipSelection(vm, conversationId) {
@@ -941,7 +968,7 @@ function OddsMovementBadge({
 }
 
 // src/components/BettingInsightList.tsx
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function StatRows2({ stats }) {
   return /* @__PURE__ */ jsx10("div", { className: "ss-w-bi-rows", children: stats.map((s) => /* @__PURE__ */ jsxs7("div", { className: "ss-w-bi-row", children: [
     /* @__PURE__ */ jsx10("span", { className: "ss-w-bi-row-lbl", children: s.label }),
@@ -956,10 +983,21 @@ function ScopedStats({ scopes }) {
     /* @__PURE__ */ jsx10(StatRows2, { stats: current.stats }, current.key)
   ] });
 }
+function hasStatsContent(it) {
+  return !!it.scopes && it.scopes.length >= 2 || it.stats.length > 0;
+}
+function initials2(name) {
+  return (name ?? "").trim().slice(0, 1).toUpperCase() || "?";
+}
+function Crest2({ url, name, kind }) {
+  const cls = kind === "comp" ? "ss-w-bi-comp-logo" : "ss-w-bi-crest";
+  if (url) return /* @__PURE__ */ jsx10("span", { className: cls, style: { backgroundImage: `url(${url})` }, "aria-hidden": "true" });
+  return /* @__PURE__ */ jsx10("span", { className: `${cls} ss-w-bi-crest-mono`, "aria-hidden": "true", children: initials2(name) });
+}
 function StatsDisclosure({ it, ui }) {
   const [open, setOpen] = useState3(false);
   const hasScopes = !!it.scopes && it.scopes.length >= 2;
-  const hasStats = hasScopes || it.stats.length > 0;
+  const hasStats = hasStatsContent(it);
   if (!hasStats) return null;
   return /* @__PURE__ */ jsxs7("div", { className: "ss-w-bi-stats", children: [
     /* @__PURE__ */ jsxs7(
@@ -980,24 +1018,42 @@ function StatsDisclosure({ it, ui }) {
 }
 function InsightCard({ it, ui, slip }) {
   const live = it.isLive || it.phase === "live";
+  const kickoff = it.kickoffUtc && ui?.bettingKickoff ? ui.bettingKickoff(it.kickoffUtc) : void 0;
+  const hasNamedTeams = !!it.homeTeamName && !!it.awayTeamName;
+  const showHeader = !!it.competition || live || !!kickoff;
+  const showReason = !!it.text || hasStatsContent(it);
   return /* @__PURE__ */ jsxs7("div", { className: "ss-w-binsight", children: [
-    live || it.isMarketFloor ? /* @__PURE__ */ jsxs7("div", { className: "ss-w-bi-status", children: [
-      live ? /* @__PURE__ */ jsxs7("span", { className: "ss-w-bi-live", children: [
-        /* @__PURE__ */ jsx10("span", { className: "ss-w-bi-live-dot", "aria-hidden": "true" }),
-        ui?.liveLabel ?? "Live"
-      ] }) : null,
-      it.isMarketFloor ? /* @__PURE__ */ jsx10("span", { className: "ss-w-bi-floor", children: ui?.marketFloorLabel ?? "Market price \xB7 not a value pick" }) : null
-    ] }) : null,
-    /* @__PURE__ */ jsxs7("div", { className: "ss-w-bi-head", children: [
-      /* @__PURE__ */ jsxs7("span", { className: "ss-w-bi-mkt", children: [
-        /* @__PURE__ */ jsx10("span", { className: "ss-w-bi-market", children: it.market }),
-        it.selection ? /* @__PURE__ */ jsx10("span", { className: "ss-w-bi-sel", children: it.selection }) : null,
-        it.fixture || it.competition ? /* @__PURE__ */ jsxs7("span", { className: "ss-w-bi-match", children: [
-          it.fixture ? /* @__PURE__ */ jsx10("span", { className: "ss-w-bi-fixture", children: it.fixture }) : null,
-          it.competition ? /* @__PURE__ */ jsx10("span", { className: "ss-w-bi-comp", children: it.competition }) : null
+    showHeader ? /* @__PURE__ */ jsxs7("div", { className: "ss-w-bi-header", children: [
+      /* @__PURE__ */ jsx10("span", { className: "ss-w-bi-header-left", children: it.competition ? /* @__PURE__ */ jsxs7(Fragment, { children: [
+        /* @__PURE__ */ jsx10(Crest2, { kind: "comp", url: it.competitionCrest, name: it.competition }),
+        /* @__PURE__ */ jsx10("span", { className: "ss-w-bi-comp", children: it.competition })
+      ] }) : null }),
+      /* @__PURE__ */ jsxs7("span", { className: "ss-w-bi-header-right", children: [
+        live ? /* @__PURE__ */ jsxs7("span", { className: "ss-w-bi-live", children: [
+          /* @__PURE__ */ jsx10("span", { className: "ss-w-bi-live-dot", "aria-hidden": "true" }),
+          ui?.liveLabel ?? "Live"
+        ] }) : null,
+        kickoff ? /* @__PURE__ */ jsxs7("span", { className: "ss-w-bi-kick", children: [
+          kickoff.dayLabel,
+          " ",
+          kickoff.time
         ] }) : null
-      ] }),
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ jsxs7("div", { className: "ss-w-bi-body", children: [
+      /* @__PURE__ */ jsx10("div", { className: "ss-w-bi-fixture", children: hasNamedTeams ? /* @__PURE__ */ jsxs7(Fragment, { children: [
+        /* @__PURE__ */ jsx10(Crest2, { kind: "team", url: it.homeCrest, name: it.homeTeamName }),
+        /* @__PURE__ */ jsx10("span", { className: "ss-w-bi-team", children: it.homeTeamName }),
+        /* @__PURE__ */ jsx10("span", { className: "ss-w-bi-vs", "aria-hidden": "true", children: "vs" }),
+        /* @__PURE__ */ jsx10("span", { className: "ss-w-bi-team", children: it.awayTeamName }),
+        /* @__PURE__ */ jsx10(Crest2, { kind: "team", url: it.awayCrest, name: it.awayTeamName })
+      ] }) : it.fixture ? /* @__PURE__ */ jsx10("span", { className: "ss-w-bi-fixture-txt", children: it.fixture }) : null }),
       /* @__PURE__ */ jsxs7("div", { className: "ss-w-bi-action", children: [
+        /* @__PURE__ */ jsxs7("span", { className: "ss-w-bi-mkt", children: [
+          /* @__PURE__ */ jsx10("span", { className: "ss-w-bi-market", children: it.market }),
+          it.selection ? /* @__PURE__ */ jsx10("span", { className: "ss-w-bi-sel", children: it.selection }) : null
+        ] }),
+        it.isMarketFloor ? /* @__PURE__ */ jsx10("span", { className: "ss-w-bi-floor", children: ui?.marketFloorLabel ?? "Market price \xB7 not a value pick" }) : null,
         it.odds ? /* @__PURE__ */ jsxs7("span", { className: "ss-w-bi-odds", children: [
           /* @__PURE__ */ jsx10("span", { className: "ss-w-bi-odds-cap", children: ui?.oddsLabel ?? "Odds" }),
           /* @__PURE__ */ jsx10("b", { children: it.odds }),
@@ -1007,8 +1063,13 @@ function InsightCard({ it, ui, slip }) {
         /* @__PURE__ */ jsx10(AddToSlipButton, { it, slip, ui })
       ] })
     ] }),
-    it.text ? /* @__PURE__ */ jsx10("p", { className: "ss-w-bi-text", children: it.text }) : null,
-    /* @__PURE__ */ jsx10(StatsDisclosure, { it, ui }),
+    showReason ? /* @__PURE__ */ jsxs7("div", { className: "ss-w-bi-reason", children: [
+      /* @__PURE__ */ jsx10("span", { className: "ss-w-bi-chart", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsxs7("div", { className: "ss-w-bi-reason-body", children: [
+        it.text ? /* @__PURE__ */ jsx10("p", { className: "ss-w-bi-text", children: it.text }) : null,
+        /* @__PURE__ */ jsx10(StatsDisclosure, { it, ui })
+      ] })
+    ] }) : null,
     it.disclaimer ? /* @__PURE__ */ jsx10("p", { className: "ss-w-bi-disc", children: it.disclaimer }) : null
   ] });
 }
@@ -1058,7 +1119,7 @@ function MarketOddsCardList({ cards, ui, slip }) {
 }
 
 // src/components/OddsMovementCard.tsx
-import { Fragment, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 function directionWord(vm, ui) {
   if (vm.direction === "shortened") return ui?.oddsShortened ?? "shortened";
   if (vm.direction === "drifted") return ui?.oddsDrifted ?? "drifted";
@@ -1094,7 +1155,7 @@ function OddsMovementCard({ vm, ui }) {
           ] }, g.price)),
           /* @__PURE__ */ jsx12("path", { className: "ss-w-om-line", d: vm.geometry.path, fill: "none" }),
           vm.geometry.markers.map((m, i) => /* @__PURE__ */ jsx12("circle", { className: "ss-w-om-dot", cx: m.x, cy: m.y, r: 2.5 }, i)),
-          ui?.chartTimeLabel ? /* @__PURE__ */ jsxs9(Fragment, { children: [
+          ui?.chartTimeLabel ? /* @__PURE__ */ jsxs9(Fragment2, { children: [
             /* @__PURE__ */ jsx12("text", { className: "ss-w-om-xlab", x: 40, y: CHART_VIEW_H - 8, textAnchor: "start", children: ui.chartTimeLabel(vm.geometry.startMs) }),
             /* @__PURE__ */ jsx12("text", { className: "ss-w-om-xlab", x: CHART_VIEW_W - 8, y: CHART_VIEW_H - 8, textAnchor: "end", children: ui.chartTimeLabel(vm.geometry.endMs) })
           ] }) : /* @__PURE__ */ jsx12("text", { className: "ss-w-om-xlab", x: 40, y: CHART_VIEW_H - 8, children: ui?.movementWindow ? ui.movementWindow(vm.windowHours) : `Last ${vm.windowHours}h` })
@@ -1125,12 +1186,12 @@ function OddsMovementCardList({ cards, ui }) {
 }
 
 // src/components/ActionButtons.tsx
-import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 function ActionButtons({ actions, loading, disabled, onAct }) {
   if (actions.length === 0 && !loading) return null;
   return /* @__PURE__ */ jsxs10("div", { className: "ss-w-actions", children: [
     actions.map((a, i) => /* @__PURE__ */ jsx13("button", { type: "button", className: "ss-w-abtn", disabled, onClick: () => onAct(a), children: a.label }, `${a.label}-${i}`)),
-    actions.length === 0 && loading ? /* @__PURE__ */ jsxs10(Fragment2, { children: [
+    actions.length === 0 && loading ? /* @__PURE__ */ jsxs10(Fragment3, { children: [
       /* @__PURE__ */ jsx13("span", { className: "ss-w-abtn-shimmer" }),
       /* @__PURE__ */ jsx13("span", { className: "ss-w-abtn-shimmer" })
     ] }) : null
@@ -1196,13 +1257,13 @@ function GreetingHeaderBlock({ block }) {
 // src/components/club-dashboard/FixtureHeroBlock.tsx
 import { useState as useState5 } from "react";
 import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
-function initials2(name) {
+function initials3(name) {
   return name.split(/\s+/).filter(Boolean).slice(0, 2).map((w) => w[0].toUpperCase()).join("");
 }
-function Crest2({ url, name }) {
+function Crest3({ url, name }) {
   const [broken, setBroken] = useState5(false);
   if (!url || broken) {
-    return /* @__PURE__ */ jsx17("span", { className: "ss-w-cdash-crest ss-w-cdash-crest--fallback", "aria-hidden": "true", children: initials2(name) });
+    return /* @__PURE__ */ jsx17("span", { className: "ss-w-cdash-crest ss-w-cdash-crest--fallback", "aria-hidden": "true", children: initials3(name) });
   }
   return /* @__PURE__ */ jsx17("img", { className: "ss-w-cdash-crest", src: url, alt: "", "aria-hidden": "true", onError: () => setBroken(true) });
 }
@@ -1213,11 +1274,11 @@ function FixtureHeroBlock({
 }) {
   return /* @__PURE__ */ jsxs14("div", { className: "ss-w-cdash-fixture", children: [
     /* @__PURE__ */ jsxs14("div", { className: "ss-w-cdash-tie", children: [
-      /* @__PURE__ */ jsx17(Crest2, { url: block.homeCrestUrl, name: block.homeName }),
+      /* @__PURE__ */ jsx17(Crest3, { url: block.homeCrestUrl, name: block.homeName }),
       /* @__PURE__ */ jsx17("span", { className: "ss-w-cdash-team", children: block.homeName }),
       /* @__PURE__ */ jsx17("span", { className: "ss-w-cdash-vs", children: "v" }),
       /* @__PURE__ */ jsx17("span", { className: "ss-w-cdash-team", children: block.awayName }),
-      /* @__PURE__ */ jsx17(Crest2, { url: block.awayCrestUrl, name: block.awayName })
+      /* @__PURE__ */ jsx17(Crest3, { url: block.awayCrestUrl, name: block.awayName })
     ] }),
     /* @__PURE__ */ jsxs14("div", { className: "ss-w-cdash-fixture-meta", children: [
       /* @__PURE__ */ jsx17("span", { className: "ss-w-cdash-kickoff", children: ui.clubKickoff(block.kickoffUnix * 1e3) }),
@@ -1611,26 +1672,51 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 
 /* betting insights */
 .ss-w-binsights { display: flex; flex-direction: column; gap: 7px; }
-.ss-w-binsight { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; border-left: 3px solid var(--ss-w-accent); padding: 9px 11px; display: flex; flex-direction: column; gap: 6px; }
-.ss-w-bi-status { display: flex; align-items: center; gap: 6px; min-width: 0; }
-.ss-w-bi-fixture { font-size: 11px; color: var(--ss-w-ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.ss-w-bi-comp { font-size: 10.5px; color: var(--ss-w-faint); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ss-w-binsight { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; border-left: 3px solid var(--ss-w-accent); padding: 9px 11px; display: flex; flex-direction: column; gap: 8px; }
+
+/* row 1: competition logo + name on the left, live badge + kickoff on the right */
+.ss-w-bi-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding-bottom: 7px; border-bottom: 1px solid var(--ss-w-line); }
+.ss-w-bi-header-left { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
+.ss-w-bi-header-right { display: inline-flex; align-items: center; gap: 8px; flex: none; }
+.ss-w-bi-comp { font-size: 10.5px; color: var(--ss-w-faint); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ss-w-bi-kick { font-size: 10.5px; font-weight: 600; color: var(--ss-w-faint); white-space: nowrap; flex: none; }
 .ss-w-bi-live { font-size: 8.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: #c0392b; border-radius: 4px; padding: 1px 5px; display: inline-flex; align-items: center; gap: 4px; flex: none; }
 .ss-w-bi-live-dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; }
-.ss-w-bi-floor { font-size: 8.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ss-w-faint); background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 4px; padding: 1px 5px; display: inline-flex; align-items: center; flex: none; }
-.ss-w-bi-head { display: flex; align-items: flex-start; gap: 10px; }
-.ss-w-bi-mkt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
-.ss-w-bi-market { font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--ss-w-ink); }
-.ss-w-bi-sel { font-size: 12px; line-height: 1.3; color: var(--ss-w-faint); }
-.ss-w-bi-match { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin-top: 5px; }
-.ss-w-bi-action { margin-left: auto; flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
+.ss-w-bi-floor { font-size: 8.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ss-w-faint); background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 4px; padding: 1px 5px; display: inline-flex; align-items: center; align-self: flex-start; flex: none; }
+
+/* crests -- CSS background-image on a span, never <img> (matches .ss-w-ecard-crest precedent) */
+.ss-w-bi-comp-logo { width: 15px; height: 15px; flex: none; display: block; border-radius: 50%; background-size: contain; background-repeat: no-repeat; background-position: center; }
+.ss-w-bi-crest { width: 22px; height: 22px; flex: none; display: block; border-radius: 50%; background-size: contain; background-repeat: no-repeat; background-position: center; background-color: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); }
+.ss-w-bi-crest-mono { display: grid; place-items: center; font-size: 9px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 16%, var(--ss-w-panel)); }
+
+/* row 2: crest-flanked fixture on the left, boxed action panel on the right */
+.ss-w-bi-body { display: flex; align-items: center; gap: 10px; }
+.ss-w-bi-fixture { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; font-size: 12px; font-weight: 650; color: var(--ss-w-ink); }
+.ss-w-bi-team { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ss-w-bi-vs { font-size: 10px; font-weight: 600; color: var(--ss-w-faint); flex: none; }
+.ss-w-bi-fixture-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ss-w-bi-action { margin-left: auto; flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 6px; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 12px; padding: 8px 10px; }
 .ss-w-bi-action .ss-w-slip > button { flex: 1; text-align: center; }
 /* The action column is narrow; let its toast size to its own text and anchor to the card's right edge instead of being clipped to the button width. */
 .ss-w-bi-action .ss-w-toast { left: auto; right: 0; width: max-content; max-width: 210px; white-space: normal; }
+.ss-w-bi-mkt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.ss-w-bi-market { font-size: 13.5px; font-weight: 700; line-height: 1.25; color: var(--ss-w-ink); }
+.ss-w-bi-sel { font-size: 11.5px; line-height: 1.3; color: var(--ss-w-faint); }
 .ss-w-bi-odds { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1px; background: color-mix(in srgb, var(--ss-w-accent) 12%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-line)); border-radius: 10px; padding: 4px 11px; min-width: 62px; }
 .ss-w-bi-odds-cap { font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ss-w-faint); }
 .ss-w-bi-odds b { font-size: 19px; font-family: ui-monospace, monospace; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ss-w-accent); line-height: 1.1; }
 .ss-w-bi-book { font-size: 9.5px; color: var(--ss-w-faint); }
+
+/* row 3: bar-chart glyph + reasoning prose + stats-expander chevron, in a subtle strip */
+.ss-w-bi-reason { display: flex; align-items: flex-start; gap: 8px; background: var(--ss-w-bubble); border-radius: 10px; padding: 8px 10px; }
+.ss-w-bi-chart { flex: none; width: 13px; height: 12px; margin-top: 2px; opacity: .55;
+  background:
+    linear-gradient(var(--ss-w-accent), var(--ss-w-accent)) left / 3px 55% no-repeat,
+    linear-gradient(var(--ss-w-accent), var(--ss-w-accent)) center / 3px 100% no-repeat,
+    linear-gradient(var(--ss-w-accent), var(--ss-w-accent)) right / 3px 75% no-repeat;
+  background-position: left bottom, center bottom, right bottom;
+}
+.ss-w-bi-reason-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
 .ss-w-bi-text { font-size: 12px; line-height: 1.45; color: var(--ss-w-ink); }
 .ss-w-bi-stats { display: flex; flex-direction: column; gap: 8px; }
 .ss-w-bi-toggle { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; background: none; border: none; color: var(--ss-w-accent); font: inherit; font-size: 11.5px; font-weight: 600; padding: 2px 0; cursor: pointer; }