// Helios — Enhanced Home Screen.
// Combines: today's signal · KPI strip · weekly digest (helios prose) ·
//           pinned reports · recent threads · health rail · ask composer.
// Magenta is reserved for the Send button only (one accent moment).

const HomeScreen = () => (
  <div style={{ flex: 1, display: "flex", flexDirection: "column", minHeight: 0, overflow: "hidden" }}>

    {/* Top bar — workspace context, search, today's date in mono */}
    <div style={homeTopBar}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, flex: 1 }}>
        <span style={crumb}>The Lash Studio</span>
        <span style={crumbDivider}>/</span>
        <span style={crumbActive}>Home</span>
      </div>
      <div style={searchPill}>
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/>
        </svg>
        <span style={{ flex: 1 }}>Find anything…</span>
        <span style={kbd}>⌘K</span>
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
        <button style={iconBtn} aria-label="Notifications">
          <Icons.Bell size={15}/>
          <span style={dotBadge}/>
        </button>
        <div style={avatar}>MK</div>
      </div>
    </div>

    {/* Scroll body */}
    <div style={{ flex: 1, overflow: "auto" }}>
      <div style={{ maxWidth: 1180, margin: "0 auto", padding: "32px 32px 28px", display: "flex", flexDirection: "column", gap: 24 }}>

        {/* ── Greeting ─────────────────────────────────────────── */}
        <header style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 24 }}>
          <div>
            <h1 style={greetTitle}>
              Morning, <span style={greetName}>Mira</span>.
            </h1>
            <p style={greetSub}>
              Here's the week so far — one thing wants your eyes, the rest is calm.
            </p>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <span style={dateMeta}>thu · nov 6 · 09:14</span>
            <div style={segGroup}>
              {["This week", "Month", "Quarter"].map((t, i) => (
                <button key={t} style={seg(i === 0)}>{t}</button>
              ))}
            </div>
          </div>
        </header>

        {/* ── Lead signal — the one thing for today ───────────── */}
        <LeadSignal/>

        {/* ── KPI strip ─────────────────────────────────────────── */}
        <section style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
          {KPIS.map(k => <KpiTile key={k.label} {...k}/>)}
        </section>

        {/* ── Two-up: digest + pinned report ──────────────────── */}
        <section style={{ display: "grid", gridTemplateColumns: "1.35fr 1fr", gap: 16 }}>
          <WeeklyDigest/>
          <PinnedReport/>
        </section>

        {/* ── Recent threads + health ─────────────────────────── */}
        <section style={{ display: "grid", gridTemplateColumns: "1.35fr 1fr", gap: 16 }}>
          <RecentThreads/>
          <HealthRail/>
        </section>

        {/* ── Ask, with "I want to…" starters ─────────────────── */}
        <section style={{ display: "flex", flexDirection: "column", gap: 12, marginTop: 4 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <span style={sectionLabel}>ask helios</span>
            <span style={sectionRule}/>
          </div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
            {STARTERS.map(s => (
              <button key={s.q} style={starterChip}>
                <span style={{ color: "var(--color-text)", fontWeight: 500 }}>I want to</span>
                <span style={{ color: "var(--color-text-secondary)" }}>{s.q}</span>
              </button>
            ))}
          </div>
          <AskComposer variant="primary" placeholder="I want to…"/>
          <p style={disclaim}>Helios can make mistakes · verify important data</p>
        </section>

      </div>
    </div>
  </div>
);

// ── Lead signal ────────────────────────────────────────────────
const LeadSignal = () => (
  <article style={leadOuter}>
    {/* Stacked-paper hint — two thin layers behind the card, no shadow tricks. */}
    <div style={leadStack(2)}/>
    <div style={leadStack(1)}/>

    <div style={leadInner}>
      <div style={leadHead}>
        <span style={leadEyebrow}>
          <span style={leadDot}/>
          attention · 12m ago
        </span>
        <span style={dateMetaInline}>tue 4 nov · 14:00–17:00</span>
      </div>

      <h2 style={leadTitle}>Tuesday afternoon ran 38% under your usual.</h2>

      <p className="prose-chat" style={leadProse}>
        Bookings between <strong>2 PM and 5 PM</strong> dropped to <strong>3</strong>, against a 4-week
        average of <strong>8</strong>. Four cancellations didn't rebook. Most were lash-fill and brow regulars —
        I'd start there before assuming a weather effect.
      </p>

      <div style={leadActions}>
        <button style={leadBtnPrimary}>
          Open the breakdown
          <Icons.ChevronRight size={13}/>
        </button>
        <button style={leadBtnGhost}>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
            <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
            <path d="M15.54 8.46a5 5 0 0 1 0 7.07"/>
          </svg>
          Listen · 0:48
        </button>
        <button style={leadBtnGhost}>Mute today</button>
        <span style={{ flex: 1 }}/>
        <button style={iconGhost} aria-label="Dismiss"><Icons.X size={14}/></button>
      </div>
    </div>
  </article>
);

// ── KPI tile ───────────────────────────────────────────────────
const KpiTile = ({ label, value, delta, prior, pos, spark }) => (
  <div style={kpiCardLocal}>
    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
      <span style={kpiLabel}>{label}</span>
      <span style={deltaPill(pos)}>{delta}</span>
    </div>
    <div style={kpiValueLocal}>{value}</div>
    <Spark values={spark}/>
    <div style={kpiPrior}>vs prior · <span style={{ color: "var(--color-text-secondary)" }}>{prior}</span></div>
  </div>
);

// Sparkline — same visual vocabulary as Reports.
const Spark = ({ values }) => {
  const W = 200, H = 26;
  const max = Math.max(...values), min = Math.min(...values);
  const sx = i => (i / (values.length - 1)) * W;
  const sy = v => H - 2 - ((v - min) / Math.max(1, max - min)) * (H - 4);
  const d = values.map((v, i) => `${i === 0 ? "M" : "L"} ${sx(i).toFixed(1)} ${sy(v).toFixed(1)}`).join(" ");
  const lastX = sx(values.length - 1), lastY = sy(values[values.length - 1]);
  return (
    <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" style={{ display: "block", width: "100%", height: 26 }}>
      <path d={d} fill="none" stroke="var(--color-ink)" strokeWidth="1.25" strokeLinejoin="round"/>
      <circle cx={lastX} cy={lastY} r="2.25" fill="var(--color-ink)"/>
    </svg>
  );
};

// ── Weekly digest — serif prose, generated callout ────────────
const WeeklyDigest = () => (
  <article style={cardLocal}>
    <div style={cardHeadLocal}>
      <div>
        <div style={cardTitleLocal}>This week, briefly</div>
        <div style={cardSubLocal}>helios · auto-summary · 2 min read</div>
      </div>
      <div style={{ display: "flex", gap: 6 }}>
        <button style={iconGhost} aria-label="Listen">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
            <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
            <path d="M15.54 8.46a5 5 0 0 1 0 7.07"/>
          </svg>
        </button>
        <button style={iconGhost} aria-label="Pin"><Icons.Pin size={13}/></button>
      </div>
    </div>

    <p className="prose-chat" style={proseBody}>
      Revenue is <strong>€12,840</strong>, up <strong>12.4%</strong> on last week, mostly
      from lash fills (38% attach on the new add-on). Saturday hit a new daily high
      at <strong>€3,210</strong>. Cancellations are at their lowest since September —
      <strong> 4.8%</strong>.
    </p>
    <p className="prose-chat" style={proseBody}>
      Worth a look: Tuesday afternoon (above) and three returning clients who
      haven't rebooked on their usual cadence.
    </p>

    <div style={digestFooter}>
      <button style={linkInk}>Open full report<Icons.ChevronRight size={12}/></button>
      <span style={dateMetaInline}>refreshed 6m ago</span>
    </div>
  </article>
);

// ── Pinned report — top services mini ─────────────────────────
const PinnedReport = () => (
  <article style={cardLocal}>
    <div style={cardHeadLocal}>
      <div>
        <div style={cardTitleLocal}>Top services</div>
        <div style={cardSubLocal}>by revenue · this week</div>
      </div>
      <span style={pinnedTag}><Icons.Pin size={11}/>pinned</span>
    </div>
    <table style={tblLocal}>
      <thead>
        <tr>
          <th style={thLLocal}>service</th>
          <th style={thRLocal}>bk</th>
          <th style={thRLocal}>rev</th>
          <th style={thRLocal}>Δ</th>
        </tr>
      </thead>
      <tbody>
        {[
          ["Gel manicure",  84, "€3,360", "+8%",  true],
          ["Lash fill",     42, "€2,520", "+24%", true],
          ["Brow shape",    61, "€1,525", "+3%",  true],
          ["Pedicure",      31, "€1,395", "−4%",  false],
          ["Acrylic set",   18, "€1,440", "−11%", false],
        ].map(r => (
          <tr key={r[0]}>
            <td style={tdLLocal}>{r[0]}</td>
            <td style={tdRLocal}>{r[1]}</td>
            <td style={tdRLocal}>{r[2]}</td>
            <td style={tdRLocal}>
              <span style={{ ...deltaPill(r[4]), padding: "1px 6px", fontSize: 10.5 }}>{r[3]}</span>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
    <div style={digestFooter}>
      <button style={linkInk}>Open report<Icons.ChevronRight size={12}/></button>
      <span style={dateMetaInline}>5 of 14 services</span>
    </div>
  </article>
);

// ── Recent threads ────────────────────────────────────────────
const RecentThreads = () => (
  <article style={cardLocal}>
    <div style={cardHeadLocal}>
      <div>
        <div style={cardTitleLocal}>Recent conversations</div>
        <div style={cardSubLocal}>pick up where you left off</div>
      </div>
      <button style={linkMuted}>See all<Icons.ChevronRight size={12}/></button>
    </div>
    <ul style={threadList}>
      {[
        { q: "Why did Tuesday revenue dip?",          when: "12m ago",  meta: "1 chart · 2 follow-ups" },
        { q: "Compare gel vs acrylic margins",        when: "yesterday", meta: "2 charts" },
        { q: "Lash-fill add-on conversion",           when: "2 days ago", meta: "1 table" },
        { q: "How do new clients find us?",           when: "5 days ago", meta: "1 chart" },
      ].map(t => (
        <li key={t.q} style={threadRow}>
          <Icons.MessageCircle size={14} style={{ color: "var(--color-text-muted)", marginTop: 2, flexShrink: 0 }}/>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={threadQ}>{t.q}</div>
            <div style={threadMeta}>{t.meta}</div>
          </div>
          <div style={threadWhen}>{t.when}</div>
          <Icons.ChevronRight size={13} style={{ color: "var(--color-text-muted)" }}/>
        </li>
      ))}
    </ul>
  </article>
);

// ── Health rail — connectors + signals queue ──────────────────
const HealthRail = () => (
  <article style={cardLocal}>
    <div style={cardHeadLocal}>
      <div>
        <div style={cardTitleLocal}>Data &amp; signals</div>
        <div style={cardSubLocal}>what helios is watching</div>
      </div>
      <button style={linkMuted}>Manage<Icons.ChevronRight size={12}/></button>
    </div>

    <div style={healthRow}>
      <div style={healthDot("ok")}/>
      <span style={healthName}>Square</span>
      <span style={healthMeta}>synced 2m ago</span>
    </div>
    <div style={healthRow}>
      <div style={healthDot("ok")}/>
      <span style={healthName}>Stripe</span>
      <span style={healthMeta}>synced 8m ago</span>
    </div>
    <div style={healthRow}>
      <div style={healthDot("syncing")}/>
      <span style={healthName}>Shopify</span>
      <span style={healthMeta}>syncing now…</span>
    </div>
    <div style={healthRow}>
      <div style={healthDot("err")}/>
      <span style={{ ...healthName, color: "var(--color-error-text)" }}>Google Calendar</span>
      <span style={healthMeta}>auth expired</span>
      <button style={healthFix}>Reconnect</button>
    </div>

    <div style={{ borderTop: "1px solid var(--color-border)", marginTop: 6, paddingTop: 12 }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <span style={kpiLabel}>Signals queue</span>
        <span style={dateMetaInline}>3 unread · 2 muted</span>
      </div>
      <div style={{ display: "flex", gap: 6, marginTop: 8 }}>
        <span style={miniSig("warn")}>1 attention</span>
        <span style={miniSig("info")}>2 insights</span>
        <span style={miniSig("ok")}>1 milestone</span>
      </div>
    </div>
  </article>
);

// ── data ──────────────────────────────────────────────────────
const KPIS = [
  { label: "Revenue",     value: "€12,840", delta: "+12.4%", prior: "€11,425", pos: true, spark: [10,12,11,14,13,18,21] },
  { label: "Bookings",    value: "84",      delta: "+6.3%",  prior: "79",      pos: true, spark: [9,10,8,11,12,14,15] },
  { label: "Avg ticket",  value: "€152",    delta: "+5.7%",  prior: "€144",    pos: true, spark: [8,8,9,10,9,11,12] },
  { label: "Cancel rate", value: "4.8%",    delta: "−1.2%",  prior: "6.0%",    pos: true, spark: [12,11,10,11,9,8,7] },
];

const STARTERS = [
  { q: "see which clients haven't rebooked" },
  { q: "compare this week to my best week" },
  { q: "find what changed on Tuesday afternoon" },
  { q: "show staff with the highest add-on rate" },
  { q: "draft a SMS to win-back regulars" },
];

// ── styles ────────────────────────────────────────────────────
const homeTopBar = {
  height: 52, flexShrink: 0,
  display: "flex", alignItems: "center", gap: 14,
  padding: "0 18px",
  borderBottom: "1px solid var(--color-border)",
  background: "var(--color-surface)",
};
const crumb = { fontSize: 12.5, color: "var(--color-text-secondary)", letterSpacing: "-0.005em" };
const crumbDivider = { fontSize: 12, color: "var(--color-text-muted)" };
const crumbActive = { fontSize: 12.5, color: "var(--color-text)", fontWeight: 500, letterSpacing: "-0.005em" };
const searchPill = {
  display: "flex", alignItems: "center", gap: 8,
  width: 360, height: 32,
  background: "var(--color-surface-muted)",
  border: "1px solid var(--color-border)",
  borderRadius: 8, padding: "0 10px",
  color: "var(--color-text-muted)", fontSize: 12.5,
  letterSpacing: "-0.005em",
};
const kbd = {
  fontFamily: "var(--font-mono)", fontSize: 10.5,
  background: "var(--color-surface)", border: "1px solid var(--color-border)",
  padding: "1px 5px", borderRadius: 4, color: "var(--color-text-secondary)",
  fontFeatureSettings: '"tnum" 1',
};
const iconBtn = {
  position: "relative", width: 32, height: 32, borderRadius: 8, border: 0,
  background: "transparent", color: "var(--color-text-secondary)",
  display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer",
};
const dotBadge = {
  position: "absolute", top: 8, right: 9, width: 6, height: 6, borderRadius: 9999,
  background: "var(--color-helios)",
};
const avatar = {
  width: 30, height: 30, borderRadius: 9999,
  background: "var(--color-surface-muted)", border: "1px solid var(--color-border)",
  display: "flex", alignItems: "center", justifyContent: "center",
  fontSize: 11.5, fontWeight: 600, color: "var(--color-text)",
};

// Greeting
const greetTitle = {
  margin: 0, fontFamily: "var(--font-serif)", fontWeight: 500,
  fontSize: 40, lineHeight: "48px", letterSpacing: "-0.025em",
  color: "var(--color-text)",
};
const greetName = { fontStyle: "italic", color: "var(--color-text)" };
const greetSub = {
  margin: "6px 0 0", fontSize: 14, color: "var(--color-text-secondary)",
  letterSpacing: "-0.005em", maxWidth: "60ch",
};
const dateMeta = {
  fontFamily: "var(--font-mono)", fontSize: 11.5, letterSpacing: 0,
  color: "var(--color-text-muted)",
  fontFeatureSettings: '"tnum" 1, "zero" 1',
};
const dateMetaInline = {
  ...dateMeta, fontSize: 11,
};
const segGroup = {
  display: "inline-flex", padding: 3, gap: 2,
  background: "var(--color-surface-muted)", border: "1px solid var(--color-border)",
  borderRadius: 9999,
};
const seg = (active) => ({
  height: 26, padding: "0 12px", borderRadius: 9999, border: 0,
  background: active ? "var(--color-surface)" : "transparent",
  color: active ? "var(--color-text)" : "var(--color-text-secondary)",
  fontSize: 12, fontWeight: active ? 500 : 400, letterSpacing: "-0.005em",
  cursor: "pointer", fontFamily: "var(--font-sans)",
  boxShadow: active ? "var(--shadow-subtle)" : "none",
});

// Lead signal
const leadOuter = { position: "relative" };
const leadStack = (depth) => ({
  position: "absolute",
  inset: `${-4 * depth}px ${8 * depth}px ${4 * depth}px ${-8 * depth}px`,
  background: "var(--color-surface)",
  border: "1px solid var(--color-border)",
  borderRadius: "var(--radius-lg)",
  opacity: 0.55 - depth * 0.18,
  zIndex: 0,
});
const leadInner = {
  position: "relative", zIndex: 1,
  background: "var(--color-surface-strong)",
  border: "1px solid var(--color-border-strong)",
  borderRadius: "var(--radius-lg)",
  padding: "18px 20px 16px",
  boxShadow: "var(--shadow-card)",
  display: "flex", flexDirection: "column", gap: 10,
};
const leadHead = {
  display: "flex", alignItems: "center", justifyContent: "space-between",
};
const leadEyebrow = {
  display: "inline-flex", alignItems: "center", gap: 8,
  fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: 0,
  color: "var(--color-warning-text)",
  fontFeatureSettings: '"tnum" 1, "zero" 1',
};
const leadDot = {
  width: 7, height: 7, borderRadius: 9999,
  background: "var(--color-warning-solid)",
};
const leadTitle = {
  margin: 0, fontFamily: "var(--font-serif)", fontWeight: 500,
  fontSize: 24, lineHeight: "32px", letterSpacing: "-0.02em",
  color: "var(--color-text)",
};
const leadProse = {
  margin: 0, fontFamily: "var(--font-prose)",
  fontSize: 15, lineHeight: "24px",
  color: "var(--color-text)", maxWidth: "62ch",
};
const leadActions = {
  display: "flex", alignItems: "center", gap: 8, marginTop: 4,
};
const leadBtnPrimary = {
  display: "inline-flex", alignItems: "center", gap: 6,
  height: 32, padding: "0 14px", borderRadius: 8, border: 0,
  background: "var(--color-text)", color: "var(--color-bg)",
  fontSize: 13, fontWeight: 500, letterSpacing: "-0.005em",
  cursor: "pointer", fontFamily: "var(--font-sans)",
  boxShadow: "var(--shadow-btn)",
};
const leadBtnGhost = {
  display: "inline-flex", alignItems: "center", gap: 6,
  height: 32, padding: "0 12px", borderRadius: 8,
  background: "transparent", border: "1px solid var(--color-border)",
  color: "var(--color-text-secondary)",
  fontSize: 13, letterSpacing: "-0.005em",
  cursor: "pointer", fontFamily: "var(--font-sans)",
};
const iconGhost = {
  width: 30, height: 30, borderRadius: 8, border: 0,
  background: "transparent", color: "var(--color-text-muted)",
  display: "inline-flex", alignItems: "center", justifyContent: "center",
  cursor: "pointer",
};

// KPI
const kpiCardLocal = {
  background: "var(--color-surface)",
  border: "1px solid var(--color-border)",
  borderRadius: "var(--radius-lg)",
  padding: 14, display: "flex", flexDirection: "column", gap: 8,
};
const kpiLabel = { fontSize: 12, color: "var(--color-text-secondary)", letterSpacing: "-0.005em" };
const kpiValueLocal = {
  fontSize: 26, lineHeight: "32px", fontWeight: 600,
  fontFeatureSettings: '"tnum" 1', letterSpacing: "-0.015em",
  color: "var(--color-text)",
};
const kpiPrior = {
  fontSize: 11, color: "var(--color-text-muted)",
  fontFamily: "var(--font-mono)", letterSpacing: 0,
  borderTop: "1px solid var(--color-border)", paddingTop: 8, marginTop: 2,
  fontFeatureSettings: '"tnum" 1, "zero" 1',
};
const deltaPill = (pos) => ({
  background: pos ? "var(--color-success-bg)" : "var(--color-error-bg)",
  color: pos ? "var(--color-success-text)" : "var(--color-error-text)",
  fontFamily: "var(--font-mono)", fontFeatureSettings: '"tnum" 1, "zero" 1',
  fontSize: 11, fontWeight: 500,
  padding: "2px 7px", borderRadius: 9999, letterSpacing: 0,
});

// Generic card
const cardLocal = {
  background: "var(--color-surface)",
  border: "1px solid var(--color-border)",
  borderRadius: "var(--radius-lg)",
  padding: 18, display: "flex", flexDirection: "column", gap: 12,
};
const cardHeadLocal = { display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 12 };
const cardTitleLocal = { fontSize: 13.5, fontWeight: 600, color: "var(--color-text)", letterSpacing: "-0.005em" };
const cardSubLocal = { fontSize: 11, color: "var(--color-text-muted)", marginTop: 2, fontFamily: "var(--font-mono)", letterSpacing: 0, fontFeatureSettings: '"tnum" 1, "zero" 1' };

// Prose
const proseBody = {
  margin: 0, fontFamily: "var(--font-prose)",
  fontSize: 15, lineHeight: "24px",
  color: "var(--color-text)", maxWidth: "60ch",
};
const digestFooter = {
  display: "flex", alignItems: "center", justifyContent: "space-between",
  marginTop: 4, paddingTop: 10,
  borderTop: "1px solid var(--color-border)",
};
const linkInk = {
  display: "inline-flex", alignItems: "center", gap: 4,
  background: "transparent", border: 0, padding: 0,
  color: "var(--color-ink)", fontSize: 13, fontWeight: 500,
  cursor: "pointer", fontFamily: "var(--font-sans)", letterSpacing: "-0.005em",
  textDecoration: "underline", textDecorationColor: "var(--color-ink-subtle)", textUnderlineOffset: "3px",
};
const linkMuted = {
  display: "inline-flex", alignItems: "center", gap: 2,
  background: "transparent", border: 0, padding: 0,
  color: "var(--color-text-muted)", fontSize: 12,
  cursor: "pointer", fontFamily: "var(--font-sans)",
};

// Pinned report table
const pinnedTag = {
  display: "inline-flex", alignItems: "center", gap: 4,
  fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: 0,
  color: "var(--color-text-muted)",
  fontFeatureSettings: '"tnum" 1, "zero" 1',
};
const tblLocal = { width: "100%", borderCollapse: "collapse", fontSize: 13, fontFeatureSettings: '"tnum" 1' };
const thLLocal = {
  textAlign: "left", fontSize: 11, fontWeight: 400,
  color: "var(--color-text-muted)", letterSpacing: 0, padding: "6px 0",
  borderBottom: "1px solid var(--color-border-strong)",
  fontFamily: "var(--font-mono)", fontFeatureSettings: '"tnum" 1, "zero" 1',
};
const thRLocal = { ...thLLocal, textAlign: "right" };
const tdLLocal = { padding: "8px 0", color: "var(--color-text)", borderBottom: "1px solid var(--color-border)", letterSpacing: "-0.005em" };
const tdRLocal = { ...tdLLocal, textAlign: "right", color: "var(--color-text-secondary)", fontFamily: "var(--font-mono)" };

// Recent threads
const threadList = { listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column" };
const threadRow = {
  display: "flex", alignItems: "flex-start", gap: 10,
  padding: "10px 0",
  borderTop: "1px solid var(--color-border)",
};
const threadQ = { fontSize: 13.5, color: "var(--color-text)", letterSpacing: "-0.005em" };
const threadMeta = { fontSize: 11, color: "var(--color-text-muted)", marginTop: 1, fontFamily: "var(--font-mono)", letterSpacing: 0 };
const threadWhen = {
  fontSize: 11, color: "var(--color-text-muted)",
  fontFamily: "var(--font-mono)", letterSpacing: 0,
  whiteSpace: "nowrap", marginTop: 2,
};

// Health rail
const healthRow = {
  display: "flex", alignItems: "center", gap: 10,
  padding: "8px 0",
};
const healthDot = (state) => ({
  width: 8, height: 8, borderRadius: 9999,
  background: state === "ok" ? "var(--color-success-solid)"
    : state === "syncing" ? "var(--color-ink)"
    : "var(--color-error-solid)",
  animation: state === "syncing" ? "pulseDot 1.4s infinite" : "none",
  flexShrink: 0,
});
const healthName = { fontSize: 13, color: "var(--color-text)", letterSpacing: "-0.005em" };
const healthMeta = {
  fontSize: 11, color: "var(--color-text-muted)",
  fontFamily: "var(--font-mono)", letterSpacing: 0,
  marginLeft: "auto",
  fontFeatureSettings: '"tnum" 1, "zero" 1',
};
const healthFix = {
  border: "1px solid var(--color-border)", background: "var(--color-surface)",
  color: "var(--color-text)", fontSize: 11.5, fontWeight: 500,
  padding: "3px 9px", borderRadius: 6, cursor: "pointer",
  fontFamily: "var(--font-sans)", letterSpacing: "-0.005em",
  marginLeft: 8,
};
const miniSig = (sev) => ({
  display: "inline-flex", alignItems: "center",
  background: sev === "warn" ? "var(--color-warning-bg)" : sev === "info" ? "var(--color-info-bg)" : "var(--color-success-bg)",
  color: sev === "warn" ? "var(--color-warning-text)" : sev === "info" ? "var(--color-info-text)" : "var(--color-success-text)",
  fontFamily: "var(--font-mono)", fontFeatureSettings: '"tnum" 1, "zero" 1',
  fontSize: 11, fontWeight: 500, letterSpacing: 0,
  padding: "2px 8px", borderRadius: 9999,
});

// Section label + starters
const sectionLabel = {
  fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: 0,
  color: "var(--color-text-muted)",
  fontFeatureSettings: '"tnum" 1, "zero" 1',
};
const sectionRule = {
  flex: 1, height: 1, background: "var(--color-border)",
};
const starterChip = {
  display: "inline-flex", alignItems: "center", gap: 5,
  background: "var(--color-surface)",
  border: "1px solid var(--color-border)",
  borderRadius: 9999, padding: "7px 14px",
  fontSize: 13, color: "var(--color-text-secondary)",
  cursor: "pointer", fontFamily: "var(--font-sans)",
  letterSpacing: "-0.005em",
};
const disclaim = {
  margin: 0, fontSize: 11, color: "var(--color-text-muted)",
  fontFamily: "var(--font-mono)", letterSpacing: 0, textAlign: "center",
};

window.HomeScreen = HomeScreen;