;(function () {
/* ActivityPage — Leveraged Trade sub-app, page 4/4.
   Chronological feed of fills, cancels, deposits, withdrawals, and
   settlements. Sections: Today summary card, Performance card,
   Allocation card (when positions > 0), filter pills, grouped activity
   timeline, and a footer Statements card. Reads exclusively from
   window.TRADE_ACTIVITY (no new sample data) plus live positions for
   the relocated Performance/Allocation cards. */

/* Hardcoded sample equity series for the Performance card — user
   history, not live. Mapped to {time, value} for TVChart. Relocated
   from portfolio-page.jsx alongside the Performance card itself. */
const PERF_SERIES_RAW = [
  '51820','51890','52040','52150','52280','52340','52410','52520',
  '52480','52560','52610','52580','52640','52720','52780','52810',
  '52850','52830','52900','52940','52980','53000','53080','53124',
];

/* Expose for the voice agent's get_equity_curve tool. */
window.PERF_SERIES = PERF_SERIES_RAW.map(function (s) { return Number(s); });

/* Category color map for the allocation donut + legend. Keys match
   sym.cat from trade-data.js. Relocated from portfolio-page.jsx. */
const CATEGORY_META = {
  forex:       { label: 'Forex',       color: '#2E90FA' },
  commodities: { label: 'Commodities', color: '#FAC515' },
  indices:     { label: 'Indices',     color: '#344054' },
  crypto:      { label: 'Crypto',      color: '#5CC6F3' },
  stocks:      { label: 'Stocks',      color: '#00AFAB' },
};

/* PortfolioDonut — 110×110 SVG with 70% inner radius, one wedge per
   category that has open exposure. Uses the shared donutPath helper.
   Relocated from portfolio-page.jsx. */
const PortfolioDonut = ({ slices }) => {
  const cx = 50;
  const cy = 50;
  const rOuter = 44;
  const rInner = rOuter * 0.7;
  /* Single-slice case: a wedge from 0.3° → 359.7° leaves a thin 0.6°
     gap at the top of the donut that reads as a stray cut since there's
     no neighbouring slice on the other side. Render two concentric
     circles instead — outer filled in the slice color, inner punched
     out in white — for a clean ring. */
  if (slices.length === 1) {
    const only = slices[0];
    return (
      <svg width={110} height={110} viewBox="0 0 100 100">
        <circle cx={cx} cy={cy} r={rOuter} fill={only.color} />
        <circle cx={cx} cy={cy} r={rInner} fill="#fff" />
      </svg>
    );
  }
  let cursor = 0;
  const paths = slices.map((s) => {
    const sweep = s.pct * 360;
    const start = cursor + 0.6 / 2;
    const end = cursor + sweep - 0.6 / 2;
    cursor += sweep;
    return (
      <path key={s.id} d={donutPath(cx, cy, rOuter, rInner, start, end)} fill={s.color} />
    );
  });
  return (
    <svg width={110} height={110} viewBox="0 0 100 100">
      {paths}
    </svg>
  );
};

/* ───────── inline SVG icon set (24×24 stroke 2) ─────────
   Each badge has its own colored stroke/bg combo applied in the row
   renderer; the SVG itself is monochrome and recoloured via stroke. */

const IconCheck = ({ color }) => (
  <svg width={24} height={24} viewBox="0 0 24 24" fill="none">
    <circle cx={12} cy={12} r={9} stroke={color} strokeWidth={2}/>
    <path d="M8.5 12.2l2.4 2.4L15.6 9.5" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const IconX = ({ color }) => (
  <svg width={24} height={24} viewBox="0 0 24 24" fill="none">
    <circle cx={12} cy={12} r={9} stroke={color} strokeWidth={2}/>
    <path d="M9 9l6 6M15 9l-6 6" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

/* Deposit — arrow pointing down into a tray. */
const IconDeposit = ({ color }) => (
  <svg width={24} height={24} viewBox="0 0 24 24" fill="none">
    <path d="M12 4v10M8 11l4 4 4-4" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"/>
    <path d="M5 16v3a1 1 0 001 1h12a1 1 0 001-1v-3" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

/* Withdraw — arrow pointing up from a tray. */
const IconWithdraw = ({ color }) => (
  <svg width={24} height={24} viewBox="0 0 24 24" fill="none">
    <path d="M12 20V10M8 13l4-4 4 4" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"/>
    <path d="M5 16v3a1 1 0 001 1h12a1 1 0 001-1v-3" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const IconClock = ({ color }) => (
  <svg width={24} height={24} viewBox="0 0 24 24" fill="none">
    <circle cx={12} cy={12} r={9} stroke={color} strokeWidth={2}/>
    <path d="M12 7v5l3 2" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

/* File-text glyph used by Statements rows. */
const IconFileText = ({ color = '#475467' }) => (
  <svg width={20} height={20} viewBox="0 0 24 24" fill="none">
    <path d="M14 3H7a2 2 0 00-2 2v14a2 2 0 002 2h10a2 2 0 002-2V8l-5-5z" stroke={color} strokeWidth={1.6} strokeLinecap="round" strokeLinejoin="round"/>
    <path d="M14 3v5h5M9 13h6M9 17h4" stroke={color} strokeWidth={1.6} strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

/* Tiny chevron used at the right edge of Statements rows. */
const ChevR = ({ color = '#98A2B3' }) => (
  <svg width={16} height={16} viewBox="0 0 16 16" fill="none">
    <path d="M6 4l4 4-4 4" stroke={color} strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

/* Empty-state glyph — generic "no items" inbox. */
const IconEmpty = ({ color = '#98A2B3' }) => (
  <svg width={28} height={28} viewBox="0 0 24 24" fill="none">
    <path d="M3 13l3-7h12l3 7M3 13v6a1 1 0 001 1h16a1 1 0 001-1v-6M3 13h5l1 2h6l1-2h5" stroke={color} strokeWidth={1.6} strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

/* ───────── kind → badge palette + amount tone ───────── */

/* Per-kind badge bg + stroke colors. Kept here so the row renderer
   stays branchless and the look-up is one map access. */
const KIND_STYLES = {
  fill:     { bg: 'rgba(0,175,171,0.10)', stroke: colors.teal2,  Icon: IconCheck },
  cancel:   { bg: 'rgba(240,68,56,0.10)', stroke: colors.red,    Icon: IconX },
  deposit:  { bg: 'rgba(7,148,85,0.10)',  stroke: colors.green,  Icon: IconDeposit },
  withdraw: { bg: 'rgba(247,144,9,0.12)', stroke: '#F79009',     Icon: IconWithdraw },
  settle:   { bg: 'rgba(102,112,133,0.10)', stroke: colors.muted, Icon: IconClock },
};

/* Map an activity entry's amount string to the right text colour.
   Rules from the brief:
     +$...  → green   (cash inflow / positive close)
     -$...  → red     (charge / withdraw)
     +X lots / +X BTC → ink2 (neutral)
     -X sh  → ink2
     —      → muted2 (cancel placeholder) */
function amountColorFor(amt) {
  if (amt === '—') return colors.muted2;
  if (amt.startsWith('+$')) return colors.green;
  if (amt.startsWith('-$') || amt.startsWith('−$')) return colors.red;
  return colors.ink2;
}

/* ───────── filter logic ─────────
   The "Pending" tab is a stub per the brief — shows cancel rows only,
   relabelled in the UI as "Pending". */
const FILTERS = [
  { id: 'all',     label: 'All' },
  { id: 'trades',  label: 'Trades' },
  { id: 'cash',    label: 'Cash' },
  { id: 'pending', label: 'Pending' },
];

function matchesFilter(kind, filterId) {
  if (filterId === 'all')     return true;
  if (filterId === 'trades')  return kind === 'fill' || kind === 'cancel';
  if (filterId === 'cash')    return kind === 'deposit' || kind === 'withdraw' || kind === 'settle';
  if (filterId === 'pending') return kind === 'cancel';
  return true;
}

/* ───────── sub-components ───────── */

/* Today summary — three equal-flex stat columns inside a single card.
   Receives live, store-derived numbers from ActivityPage so the card
   reacts to opens/closes in real time. */
const TodaySummary = ({ tradesToday, volumeToday, netPLToday }) => {
  const plColor = netPLToday >= 0 ? colors.green : colors.red;

  const stats = [
    { big: String(tradesToday),                                       bigColor: colors.ink, sub: 'Filled today',     label: 'Trades' },
    { big: '$' + Math.round(volumeToday).toLocaleString('en-US'),     bigColor: colors.ink, sub: 'Notional value',   label: 'Volume' },
    { big: window.formatPL(netPLToday),                               bigColor: plColor,    sub: 'Closed positions', label: 'Net P/L' },
  ];

  return (
    <div style={styles.card}>
      <div style={styles.summaryLabel}>Today's activity</div>
      <div style={styles.summaryRow}>
        {stats.map((s, i) => (
          <div key={s.label} style={{ ...styles.summaryCol, ...(i === 0 ? null : { marginLeft: '8px' }) }}>
            <div style={styles.summaryStatLabel}>{s.label}</div>
            <div style={{ ...styles.summaryBig, color: s.bigColor }}>{s.big}</div>
            <div style={styles.summarySub}>{s.sub}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

/* Pill row — local state, exact same teal-soft / outlined pattern as
   the Discover and Trade pages. */
const FilterPills = ({ active, onSelect }) => (
  <div style={styles.pillRow}>
    {FILTERS.map((f) => {
      const on = f.id === active;
      return (
        <button
          key={f.id}
          onClick={() => onSelect(f.id)}
          style={{
            ...styles.btnReset,
            ...styles.pill,
            ...(on ? styles.pillActive : styles.pillIdle),
          }}
        >
          {f.label}
        </button>
      );
    })}
  </div>
);

/* Single timeline row inside a group card. `isLast` removes the
   hairline so the bottom edge of the card stays clean. */
const ActivityRow = ({ entry, isLast }) => {
  const k = KIND_STYLES[entry.kind] || KIND_STYLES.settle;
  const Icon = k.Icon;
  return (
    <div style={{ ...styles.row, ...(isLast ? { borderBottom: 'none' } : null) }}>
      <div style={{ ...styles.badge, backgroundColor: k.bg }}>
        <Icon color={k.stroke}/>
      </div>
      <div style={styles.rowMid}>
        <div style={styles.rowTitle}>{entry.title}</div>
        <div style={styles.rowDetail}>{entry.detail}</div>
      </div>
      <div style={styles.rowRight}>
        <div style={{ ...styles.rowAmount, color: amountColorFor(entry.amt) }}>{entry.amt}</div>
        <div style={styles.rowTime}>{entry.time}</div>
      </div>
    </div>
  );
};

/* One group card per dateLabel. Receives the already-filtered entries. */
const GroupCard = ({ label, entries }) => (
  <div>
    <div style={styles.groupHeader}>{label}</div>
    <div style={styles.card0}>
      {entries.map((e, i) => (
        <ActivityRow key={e.id} entry={e} isLast={i === entries.length - 1}/>
      ))}
    </div>
  </div>
);

/* Empty state — surfaces when no entry across the feed matches the
   current filter. */
const EmptyState = () => (
  <div style={styles.emptyCard}>
    <IconEmpty/>
    <div style={styles.emptyText}>No activity matches that filter</div>
  </div>
);

/* Footer — three inert document rows, file-text icon + label + chev. */
const Statements = () => {
  const items = ['Daily statement', 'Weekly statement', 'Tax document (2024)'];
  return (
    <div>
      <div style={styles.sectionHead}>
        <span style={styles.sectionTitle}>Statements</span>
      </div>
      <div style={styles.card0}>
        {items.map((label, i) => (
          <button
            key={label}
            style={{ ...styles.btnReset, ...styles.stmtRow, ...(i === items.length - 1 ? { borderBottom: 'none' } : null) }}
          >
            <div style={styles.stmtIconWrap}>
              <IconFileText/>
            </div>
            <span style={styles.stmtLabel}>{label}</span>
            <ChevR/>
          </button>
        ))}
      </div>
    </div>
  );
};

/* ───────── page ───────── */

const ActivityPage = () => {
  const [filter, setFilter] = React.useState('all');
  const [range, setRange] = React.useState('1W');

  /* Live "Today's activity" numbers, derived from TradeStore. Open
     positions in this session count as today's trades (no creation
     timestamp on legacy seed data, but positions only exist if the
     user just opened them this session). Closed positions count if
     their closedAt falls on today's calendar date. */
  const positions = window.usePositions();
  const closed = window.useClosedPositions();
  const today = new Date().toDateString();

  /* Performance chart no longer uses TVChart — it's our in-house SVG
     <AreaChart>, which doesn't carry the TradingView attribution badge.
     PERF_SERIES_RAW is kept for now in case we wire it through later;
     the existing <AreaChart> is a decorative fixed-shape sparkline. */

  /* Allocation slices — bucket positions by category, sum |size*open|,
     then percent-normalize. Order follows CATEGORY_META. Same logic as
     when this card lived on portfolio-page.jsx; getSymbol is the static
     lookup so we stay outside hooks rules. */
  const allocationSlices = React.useMemo(() => {
    if (positions.length === 0) return [];
    const buckets = {};
    let total = 0;
    positions.forEach((p) => {
      const meta = window.getSymbol ? window.getSymbol(p.sym) : null;
      const cat = meta && meta.cat;
      if (!cat) return;
      const ex = Math.abs(p.size * p.open);
      buckets[cat] = (buckets[cat] || 0) + ex;
      total += ex;
    });
    return Object.keys(CATEGORY_META)
      .filter((cat) => buckets[cat] > 0)
      .map((cat) => ({
        id: cat,
        label: CATEGORY_META[cat].label,
        color: CATEGORY_META[cat].color,
        pct: total > 0 ? buckets[cat] / total : 0,
      }));
  }, [positions]);

  const openedToday = positions.length;
  const closedTodayList = closed.filter((c) => c.closedAt && new Date(c.closedAt).toDateString() === today);
  const closedToday = closedTodayList.length;
  const tradesToday = openedToday + closedToday;

  const netPLToday = closedTodayList.reduce((s, c) => s + c.realizedPL, 0);

  /* Notional = size × contract × price. Earlier this skipped the
     contract multiplier and read like fractional dollars for forex
     positions; getContractSize gives forex 100k, gold 100, silver 5k,
     etc. — same source of truth as P/L computation. */
  const symbols = window.useTradeStore().state.symbols;
  const contractFor = (symId) => {
    const sym = symbols[symId];
    return window.getContractSize(symId, sym ? sym.cat : null);
  };
  const volumeToday = positions.reduce((s, p) => s + Math.abs(p.size * contractFor(p.sym) * p.open), 0)
                    + closedTodayList.reduce((s, c) => s + Math.abs(c.size * contractFor(c.sym) * c.open), 0);

  /* Convert closed positions into the same shape the timeline renders.
     `kind: 'fill'` re-uses the green check-circle badge. amt is the
     realised P/L formatted via formatPL — '+$N.NN' green, '-$N.NN' red. */
  const closedAsActivity = React.useMemo(() => {
    const yesterday = new Date(Date.now() - 86400000).toDateString();
    return closed.map((c) => {
      const dt = new Date(c.closedAt);
      let dateLabel = 'This week';
      const dtStr = dt.toDateString();
      if (dtStr === today) dateLabel = 'Today';
      else if (dtStr === yesterday) dateLabel = 'Yesterday';
      const closeSide = c.side === 'buy' ? 'sell' : 'buy';
      return {
        id: 'closed-' + c.id,
        kind: 'fill',
        time: dt.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false }),
        dateLabel: dateLabel,
        title: c.sym + ' ' + closeSide + ' ' + c.size + ' lots',
        detail: 'Closed · P/L ' + (window.formatPL ? window.formatPL(c.realizedPL || 0) : '$0.00'),
        amt: window.formatPL ? window.formatPL(c.realizedPL || 0) : '$0.00',
      };
    });
  }, [closed, today]);

  /* Merge live closed positions (newest first) with the static seed
     activity. Live entries appear at the top of their date group. */
  const mergedActivity = React.useMemo(() => {
    return [...closedAsActivity, ...(window.TRADE_ACTIVITY || [])];
  }, [closedAsActivity]);

  /* Group filtered entries by dateLabel preserving array order. Groups
     with zero post-filter rows are dropped. */
  const groups = React.useMemo(() => {
    const order = [];
    const buckets = {};
    for (const a of mergedActivity) {
      if (!matchesFilter(a.kind, filter)) continue;
      if (!(a.dateLabel in buckets)) {
        buckets[a.dateLabel] = [];
        order.push(a.dateLabel);
      }
      buckets[a.dateLabel].push(a);
    }
    return order.map((label) => ({ label, entries: buckets[label] }));
  }, [filter, mergedActivity]);

  const isEmpty = groups.length === 0;

  return (
    <div style={styles.scroll}>
      <div style={styles.body}>
        <TodaySummary tradesToday={tradesToday} volumeToday={volumeToday} netPLToday={netPLToday}/>

        {/* ===== Performance card (relocated from Portfolio) =========== */}
        <div
          style={{
            backgroundColor: '#fff',
            borderRadius: '20px',
            boxShadow: '0px 24px 28px rgba(14, 20, 32, 0.16)',
            padding: '14px 16px',
            display: 'flex',
            flexDirection: 'column',
            gap: '12px',
          }}
        >
          <div
            style={{
              display: 'flex',
              flexDirection: 'row',
              alignItems: 'center',
              justifyContent: 'space-between',
            }}
          >
            <span
              style={{
                fontFamily: 'Gilroy',
                fontWeight: 600,
                fontSize: '16px',
                color: colors.ink,
              }}
            >
              Performance
            </span>
            <div style={{ display: 'flex', flexDirection: 'row', gap: '6px' }}>
              {['1D', '1W', '1M', 'All'].map((r) => {
                const active = range === r;
                return (
                  <button
                    key={r}
                    onClick={() => setRange(r)}
                    style={{
                      border: active ? 'none' : `1px solid ${colors.line}`,
                      background: active ? colors.ink : 'transparent',
                      height: '28px',
                      padding: '0 12px',
                      margin: 0,
                      cursor: 'pointer',
                      borderRadius: '9999px',
                      color: active ? '#fff' : colors.muted2,
                      fontFamily: 'Gilroy',
                      fontWeight: 600,
                      fontSize: '12px',
                      lineHeight: 1,
                    }}
                  >
                    {r}
                  </button>
                );
              })}
            </div>
          </div>

          <div style={{ height: '140px', width: '100%' }}>
            {/* In-house SVG AreaChart — no TradingView badge on data we
               aren't sourcing from TradingView. */}
            <window.AreaChart />
          </div>

          <div
            style={{
              display: 'flex',
              flexDirection: 'row',
              gap: '12px',
            }}
          >
            {[
              { label: 'Total return', value: '+2.51%' },
              { label: 'Best day',     value: '+1.42%' },
              { label: 'Win rate',     value: '64%'    },
            ].map((s) => (
              <div
                key={s.label}
                style={{
                  flex: 1,
                  display: 'flex',
                  flexDirection: 'column',
                  gap: '4px',
                }}
              >
                <span
                  style={{
                    fontFamily: 'Gilroy',
                    fontWeight: 600,
                    fontSize: '16px',
                    color: colors.green,
                    fontVariantNumeric: 'tabular-nums',
                  }}
                >
                  {s.value}
                </span>
                <span
                  style={{
                    fontFamily: 'Inter',
                    fontSize: '11px',
                    color: colors.muted2,
                  }}
                >
                  {s.label}
                </span>
              </div>
            ))}
          </div>
        </div>

        {/* ===== Allocation card (relocated, only when positions > 0) == */}
        {positions.length > 0 && (
          <div>
            <div
              style={{
                display: 'flex',
                flexDirection: 'row',
                alignItems: 'center',
                paddingBottom: '8px',
                paddingLeft: '4px',
                paddingRight: '4px',
              }}
            >
              <span
                style={{
                  flex: 1,
                  fontFamily: 'Gilroy',
                  fontWeight: 600,
                  fontSize: '16px',
                  color: colors.ink,
                }}
              >
                Allocation
              </span>
            </div>
            <div
              style={{
                backgroundColor: '#fff',
                borderRadius: '20px',
                boxShadow: '0px 24px 28px rgba(14, 20, 32, 0.16)',
                padding: '14px 16px',
                display: 'flex',
                flexDirection: 'row',
                alignItems: 'center',
                gap: '20px',
              }}
            >
              <div
                style={{
                  width: '120px',
                  height: '110px',
                  position: 'relative',
                  flexShrink: 0,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
              >
                <PortfolioDonut slices={allocationSlices} />
                <div
                  style={{
                    position: 'absolute',
                    inset: 0,
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'center',
                    justifyContent: 'center',
                    pointerEvents: 'none',
                  }}
                >
                  <span
                    style={{
                      fontFamily: 'Gilroy',
                      fontWeight: 600,
                      fontSize: '13px',
                      color: colors.ink,
                      fontVariantNumeric: 'tabular-nums',
                      lineHeight: 1.1,
                    }}
                  >
                    {positions.length}
                  </span>
                  <span
                    style={{
                      fontFamily: 'Inter',
                      fontSize: '11px',
                      color: colors.muted2,
                      lineHeight: 1.1,
                    }}
                  >
                    positions
                  </span>
                </div>
              </div>
              <div
                style={{
                  flex: 1,
                  display: 'flex',
                  flexDirection: 'column',
                  gap: '10px',
                }}
              >
                {allocationSlices.map((s) => (
                  <div
                    key={s.id}
                    style={{
                      display: 'flex',
                      flexDirection: 'row',
                      alignItems: 'center',
                      gap: '8px',
                    }}
                  >
                    <div
                      style={{
                        width: '8px',
                        height: '8px',
                        borderRadius: '4px',
                        backgroundColor: s.color,
                        flexShrink: 0,
                      }}
                    />
                    <span
                      style={{
                        flex: 1,
                        fontFamily: 'Gilroy',
                        fontWeight: 600,
                        fontSize: '14px',
                        color: colors.ink,
                      }}
                    >
                      {s.label}
                    </span>
                    <span
                      style={{
                        fontFamily: 'Gilroy',
                        fontWeight: 600,
                        fontSize: '14px',
                        color: colors.ink,
                        fontVariantNumeric: 'tabular-nums',
                      }}
                    >
                      {Math.round(s.pct * 100) + '%'}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}

        <FilterPills active={filter} onSelect={setFilter}/>
        {isEmpty
          ? <EmptyState/>
          : groups.map((g) => <GroupCard key={g.label} label={g.label} entries={g.entries}/>)}
        <Statements/>
      </div>
    </div>
  );
};

/* ───────── styles ───────── */

const styles = {
  /* Page wrapper — matches the body wrapper from the agent brief. */
  scroll: {
    flex: 1,
    width: '100%',
    height: '100%',
    overflowY: 'auto',
    WebkitOverflowScrolling: 'touch',
    scrollbarWidth: 'none',
    backgroundColor: colors.bg,
  },
  body: {
    paddingTop: '16px',
    paddingLeft: '20px',
    paddingRight: '20px',
    paddingBottom: '180px',
    display: 'flex',
    flexDirection: 'column',
    gap: '14px',
  },

  /* Generic reset for <button> elements used as tappable rows/pills. */
  btnReset: {
    border: 'none',
    background: 'transparent',
    padding: 0,
    margin: 0,
    cursor: 'pointer',
    font: 'inherit',
    color: 'inherit',
    textAlign: 'inherit',
  },

  /* Standard card — 16h × 14v padding per the brief. */
  card: {
    backgroundColor: colors.white,
    borderRadius: '20px',
    padding: '14px 16px',
    boxShadow: '0px 24px 28px rgba(14, 20, 32, 0.16)',
  },
  /* Card without inner padding — used for row containers so rows can
     stretch edge-to-edge with their own per-row padding. */
  card0: {
    backgroundColor: colors.white,
    borderRadius: '20px',
    boxShadow: '0px 24px 28px rgba(14, 20, 32, 0.16)',
    overflow: 'hidden',
  },

  /* ── Today summary ───────────────────────────────────────────── */
  summaryLabel: {
    fontFamily: 'Gilroy',
    fontWeight: 600,
    fontSize: '13px',
    color: colors.ink2,
    marginBottom: '10px',
  },
  summaryRow: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'flex-start',
  },
  summaryCol: {
    flex: 1,
    display: 'flex',
    flexDirection: 'column',
  },
  summaryStatLabel: {
    fontFamily: 'Inter',
    fontWeight: 500,
    fontSize: '11px',
    color: colors.muted2,
    marginBottom: '4px',
    letterSpacing: '0.2px',
  },
  summaryBig: {
    /* Notional volume can run into the tens of thousands once contract
       sizes are applied — at 22px Gilroy 700 the column overflows and
       crowds the P/L. 17px keeps three columns balanced inside the card
       without truncation. */
    fontFamily: 'Gilroy',
    fontWeight: 700,
    fontSize: '17px',
    lineHeight: '21px',
    fontFeatureSettings: '"tnum"',
  },
  summarySub: {
    fontFamily: 'Inter',
    fontWeight: 400,
    fontSize: '11px',
    color: colors.muted,
    marginTop: '2px',
  },

  /* ── Filter pills ────────────────────────────────────────────── */
  pillRow: {
    display: 'flex',
    flexDirection: 'row',
    gap: '8px',
  },
  pill: {
    borderRadius: '9999px',
    paddingTop: '6px',
    paddingBottom: '6px',
    paddingLeft: '14px',
    paddingRight: '14px',
    fontFamily: 'Gilroy',
    fontWeight: 600,
    fontSize: '13px',
  },
  pillActive: {
    backgroundColor: 'rgba(0,175,171,0.10)',
    color: colors.teal2,
  },
  pillIdle: {
    backgroundColor: colors.white,
    color: colors.ink2,
    border: `1px solid ${colors.line}`,
  },

  /* ── Group header ────────────────────────────────────────────── */
  groupHeader: {
    fontFamily: 'Gilroy',
    fontWeight: 600,
    fontSize: '13px',
    color: colors.muted,
    paddingTop: '8px',
    paddingBottom: '6px',
  },

  /* ── Activity row ────────────────────────────────────────────── */
  row: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    height: '72px',
    paddingLeft: '14px',
    paddingRight: '14px',
    borderBottom: `1px solid ${colors.line}`,
    gap: '12px',
  },
  badge: {
    width: '40px',
    height: '40px',
    borderRadius: '20px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    flexShrink: 0,
  },
  rowMid: {
    flex: 1,
    minWidth: 0,
    display: 'flex',
    flexDirection: 'column',
  },
  rowTitle: {
    fontFamily: 'Gilroy',
    fontWeight: 600,
    fontSize: '14px',
    color: colors.ink,
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
  },
  rowDetail: {
    fontFamily: 'Inter',
    fontWeight: 400,
    fontSize: '12px',
    color: colors.muted,
    marginTop: '2px',
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
  },
  rowRight: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'flex-end',
    flexShrink: 0,
  },
  rowAmount: {
    fontFamily: 'Gilroy',
    fontWeight: 600,
    fontSize: '14px',
    fontFeatureSettings: '"tnum"',
  },
  rowTime: {
    fontFamily: 'Inter',
    fontWeight: 400,
    fontSize: '11px',
    color: colors.muted2,
    marginTop: '2px',
  },

  /* ── Empty state ─────────────────────────────────────────────── */
  emptyCard: {
    backgroundColor: colors.white,
    borderRadius: '20px',
    boxShadow: '0px 24px 28px rgba(14, 20, 32, 0.16)',
    padding: '32px 16px',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    gap: '10px',
  },
  emptyText: {
    fontFamily: 'Inter',
    fontWeight: 400,
    fontSize: '14px',
    color: colors.muted,
    textAlign: 'center',
  },

  /* ── Statements ──────────────────────────────────────────────── */
  sectionHead: {
    paddingTop: '4px',
    paddingBottom: '6px',
  },
  sectionTitle: {
    fontFamily: 'Gilroy',
    fontWeight: 600,
    fontSize: '15px',
    color: colors.ink,
  },
  stmtRow: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    width: '100%',
    height: '56px',
    paddingLeft: '14px',
    paddingRight: '14px',
    borderBottom: `1px solid ${colors.line}`,
    gap: '12px',
  },
  stmtIconWrap: {
    width: '32px',
    height: '32px',
    borderRadius: '10px',
    backgroundColor: '#F2F4F7',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    flexShrink: 0,
  },
  stmtLabel: {
    flex: 1,
    fontFamily: 'Gilroy',
    fontWeight: 600,
    fontSize: '14px',
    color: colors.ink,
  },
};

Object.assign(window, { ActivityPage });
})();