// Direction B — additional screens: Chat, Lab results, Treatment plan, Library, Progress logging.

function BChat() {
  return (
    <BScreen>
      <div style={{ display: 'flex', height: '100%' }}>
        <BSidebar active="chat" />
        <main style={{ flex: 1, height: '100%', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
          <BTopbar title="Messages" sub="Secure · HIPAA compliant" search={false} />
          <div style={{ flex: 1, overflow: 'hidden', display: 'grid', gridTemplateColumns: '320px 1fr 280px' }}>
            {/* convo list */}
            <div style={{ borderRight: `1px solid ${B.hair}`, overflow: 'hidden', background: B.surface }}>
              <div style={{ padding: '14px 18px', borderBottom: `1px solid ${B.hair}`, display: 'flex', gap: 8, alignItems: 'center', background: B.bg }}>
                <Icon name="search" size={14} color={B.muted} />
                <span style={{ fontSize: 13, color: B.faint }}>Search messages…</span>
              </div>
              {[
                ['Dr. Amanda Lee', 'Great work logging this week', '10:30 AM', 2, true],
                ['Care team · Lab updates', 'Quest results ready for review', 'Yesterday', 1, false],
                ['Dr. Amanda Lee', 'Reminder: weekly check-in', 'May 28', 0, false],
                ['Pharmacy · YLift', 'Your shipment is on the way', 'May 26', 0, false],
              ].map(([n, m, t, u, active], i) => (
                <div key={i} style={{
                  display: 'flex', gap: 12, padding: '14px 18px',
                  background: active ? B.brandSoft : 'transparent',
                  borderLeft: active ? `3px solid ${B.brand}` : '3px solid transparent',
                  borderBottom: `1px solid ${B.hair}`,
                }}>
                  <Placeholder w={36} h={36} radius={36} tone={i === 1 ? 'cream' : i === 3 ? 'clinical' : 'sage'} label="" />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                      <span style={{ fontSize: 13, fontWeight: u ? 600 : 500 }}>{n}</span>
                      <span style={{ fontSize: 10, color: B.faint, fontFamily: B.mono }}>{t}</span>
                    </div>
                    <div style={{ fontSize: 12, color: B.muted, marginTop: 3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{m}</div>
                  </div>
                  {u ? <span style={{ fontSize: 10, fontFamily: B.mono, padding: '2px 6px', background: B.brand, color: '#fff', borderRadius: 999, alignSelf: 'flex-start' }}>{u}</span> : null}
                </div>
              ))}
            </div>

            {/* thread */}
            <div style={{ display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
              <div style={{ padding: '14px 24px', borderBottom: `1px solid ${B.hair}`, display: 'flex', alignItems: 'center', gap: 12, background: B.surface }}>
                <Placeholder w={40} h={40} radius={40} tone="sage" label="" />
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 14, fontWeight: 600 }}>Dr. Amanda Lee, MD</div>
                  <div style={{ fontSize: 11, color: B.brand, display: 'flex', gap: 4, alignItems: 'center' }}>
                    <span style={{ width: 5, height: 5, borderRadius: 5, background: B.brand }} /> Online · replies &lt; 24 h
                  </div>
                </div>
                <button style={{ background: B.bg, border: `1px solid ${B.hair}`, padding: '6px 10px', borderRadius: 8, fontSize: 12 }}>View profile</button>
              </div>
              <div style={{ flex: 1, overflow: 'hidden', padding: '24px', display: 'flex', flexDirection: 'column', gap: 14, background: B.bg }}>
                <div style={{ textAlign: 'center', fontSize: 11, color: B.faint, fontFamily: B.mono }}>· May 8 · End-to-end encrypted ·</div>
                <Bubble who="them" text="Hi Sarah — I just reviewed your weekly log and lab results from Quest. Your fasting glucose looks excellent." />
                <Bubble who="them" text="Let's hold the semaglutide at 0.5 mg for two more weeks before titrating up. Steady wins this race." />
                <Bubble who="me" text="Sounds good! I've been feeling really steady — no more nausea since week two." />
                <Bubble who="me" text="Quick question — is it okay to skip the B12 shot this week? I'm traveling." />
                <Bubble who="them" text="Absolutely fine. We can shift it by a few days. Safe travels!" />
                <div style={{ textAlign: 'center', fontSize: 11, color: B.faint, fontFamily: B.mono }}>10:30 AM</div>
              </div>
              <div style={{ padding: '14px 24px', borderTop: `1px solid ${B.hair}`, background: B.surface, display: 'flex', gap: 10, alignItems: 'center' }}>
                <button style={{ background: 'transparent', border: 'none', padding: 6 }}><Icon name="paperclip" size={18} color={B.muted} /></button>
                <div style={{ flex: 1, background: B.bg, border: `1px solid ${B.hair}`, borderRadius: 999, padding: '10px 16px', fontSize: 13, color: B.faint }}>Type a secure message…</div>
                <button style={{ background: B.brand, color: '#fff', border: 'none', padding: '10px 14px', borderRadius: 999 }}><Icon name="send" size={14} /></button>
              </div>
            </div>

            {/* sidebar context */}
            <aside style={{ borderLeft: `1px solid ${B.hair}`, padding: 18, background: B.surface, overflow: 'hidden' }}>
              <div style={{ fontSize: 11, color: B.muted, fontFamily: B.mono, letterSpacing: '0.04em', textTransform: 'uppercase' }}>Conversation context</div>
              <div style={{ background: B.brandSoft, borderRadius: 10, padding: 14, marginTop: 10 }}>
                <div style={{ fontSize: 12, fontWeight: 600, color: B.brandDeep }}>Active plan</div>
                <div style={{ fontSize: 12, color: B.muted, marginTop: 4 }}>GLP-1 weight program · day 14 / 84</div>
              </div>
              <div style={{ fontSize: 11, color: B.muted, fontFamily: B.mono, letterSpacing: '0.04em', textTransform: 'uppercase', marginTop: 18 }}>Shared in this thread</div>
              <div style={{ marginTop: 10, display: 'flex', flexDirection: 'column', gap: 8 }}>
                {[['Quest lab results', '04 / 28 · pdf'], ['Weekly check-in', '04 / 27 · log'], ['Plan summary', '04 / 26 · pdf']].map(([n, d], i) => (
                  <div key={i} style={{ display: 'flex', gap: 10, padding: '8px 10px', border: `1px solid ${B.hair}`, borderRadius: 8 }}>
                    <Icon name="clipboard" size={14} color={B.muted} />
                    <div style={{ flex: 1, fontSize: 12 }}>
                      <div style={{ fontWeight: 500 }}>{n}</div>
                      <div style={{ fontSize: 11, color: B.faint }}>{d}</div>
                    </div>
                  </div>
                ))}
              </div>
            </aside>
          </div>
        </main>
      </div>
    </BScreen>
  );
}

function Bubble({ who, text }) {
  const me = who === 'me';
  return (
    <div style={{ display: 'flex', justifyContent: me ? 'flex-end' : 'flex-start' }}>
      <div style={{
        maxWidth: '70%', padding: '10px 14px', borderRadius: 16,
        background: me ? B.brand : B.surface,
        color: me ? '#fff' : B.ink,
        border: me ? 'none' : `1px solid ${B.hair}`,
        fontSize: 13.5, lineHeight: 1.5,
        borderBottomRightRadius: me ? 4 : 16,
        borderBottomLeftRadius: me ? 16 : 4,
      }}>{text}</div>
    </div>
  );
}

// ── Lab results ───────────────────────────────────────────
function BLabs() {
  return (
    <BScreen>
      <div style={{ display: 'flex', height: '100%' }}>
        <BSidebar active="labs" />
        <main style={{ flex: 1, height: '100%', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
          <BTopbar title="Lab results" sub="Quest Diagnostics · ingested 04 / 28 / 2026" />
          <div style={{ flex: 1, overflow: 'hidden', padding: '24px 32px', display: 'grid', gridTemplateColumns: '1fr 320px', gap: 20 }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 18, overflow: 'hidden' }}>
              <section style={{ background: B.surface, border: `1px solid ${B.hair}`, borderRadius: 14, padding: 22 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <div>
                    <div style={{ fontSize: 14, fontWeight: 600 }}>Comprehensive metabolic + lipid panel</div>
                    <div style={{ fontSize: 12, color: B.muted, marginTop: 2 }}>Quest Diagnostics · ordered by Dr. A. Lee · drawn 04 / 26</div>
                  </div>
                  <div style={{ display: 'flex', gap: 8 }}>
                    <button style={{ background: B.bg, border: `1px solid ${B.hair}`, padding: '7px 12px', borderRadius: 8, fontSize: 12 }}>Compare to last</button>
                    <button style={{ background: B.brand, color: '#fff', border: 'none', padding: '7px 12px', borderRadius: 8, fontSize: 12, fontWeight: 500 }}>Download PDF</button>
                  </div>
                </div>
                <div style={{ marginTop: 18, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                  {[['12 of 14', 'in range', B.brand], ['1', 'flagged', B.warn], ['1', 'borderline', '#a88a3a']].map(([v, l, c], i) => (
                    <div key={i} style={{ background: B.bg, padding: '10px 14px', borderRadius: 8, border: `1px solid ${B.hair}` }}>
                      <span style={{ fontSize: 18, fontWeight: 600, color: c }}>{v}</span>
                      <span style={{ fontSize: 12, color: B.muted, marginLeft: 6 }}>{l}</span>
                    </div>
                  ))}
                </div>
              </section>

              <section style={{ background: B.surface, border: `1px solid ${B.hair}`, borderRadius: 14, overflow: 'hidden' }}>
                <div style={{ padding: '12px 18px', borderBottom: `1px solid ${B.hair}`, display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr 90px', fontSize: 11, fontFamily: B.mono, color: B.muted, letterSpacing: '0.04em', textTransform: 'uppercase' }}>
                  <span>Marker</span><span>Result</span><span>Reference</span><span>vs. last</span><span>Status</span>
                </div>
                {[
                  ['HbA1c', '5.4 %', '4.0 – 5.6', '↓ 0.2', 'normal'],
                  ['Fasting glucose', '92 mg / dL', '70 – 99', '↓ 6', 'normal'],
                  ['Total cholesterol', '202 mg / dL', '< 200', '↓ 14', 'borderline'],
                  ['LDL cholesterol', '142 mg / dL', '< 130', '↓ 8', 'flagged'],
                  ['HDL cholesterol', '58 mg / dL', '> 40', '↑ 3', 'normal'],
                  ['Triglycerides', '118 mg / dL', '< 150', '↓ 22', 'normal'],
                  ['eGFR', '94 mL / min', '> 60', '↔', 'normal'],
                  ['ALT', '24 U / L', '7 – 56', '↔', 'normal'],
                  ['TSH', '2.1 mIU / L', '0.4 – 4.0', '↔', 'normal'],
                ].map(([k, v, r, d, s], i) => (
                  <div key={i} style={{ padding: '12px 18px', display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr 90px', alignItems: 'center', borderBottom: i < 8 ? `1px solid ${B.hair}` : 'none', fontSize: 13 }}>
                    <span style={{ fontWeight: 500 }}>{k}</span>
                    <span style={{ fontFamily: B.mono }}>{v}</span>
                    <span style={{ fontFamily: B.mono, fontSize: 12, color: B.muted }}>{r}</span>
                    <span style={{ fontSize: 12, color: d.includes('↓') ? B.brand : B.muted }}>{d}</span>
                    <span style={{
                      fontSize: 10, padding: '3px 8px', borderRadius: 4, textAlign: 'center', fontWeight: 500, textTransform: 'uppercase', letterSpacing: '0.04em',
                      background: s === 'flagged' ? 'rgba(162,91,58,0.1)' : s === 'borderline' ? 'rgba(168,138,58,0.12)' : B.brandSoft,
                      color: s === 'flagged' ? B.warn : s === 'borderline' ? '#866a26' : B.brand,
                    }}>{s}</span>
                  </div>
                ))}
              </section>
            </div>

            <aside style={{ display: 'flex', flexDirection: 'column', gap: 14, overflow: 'hidden' }}>
              <div style={{ background: B.surface, border: `1.5px solid ${B.brand}`, borderRadius: 14, padding: 18 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <Icon name="sparkle" size={14} color={B.brand} />
                  <span style={{ fontSize: 11, fontFamily: B.mono, color: B.brand, letterSpacing: '0.04em', textTransform: 'uppercase' }}>AI summary</span>
                </div>
                <div style={{ fontSize: 14, fontWeight: 600, marginTop: 10, lineHeight: 1.4 }}>Most markers improved or held steady.</div>
                <div style={{ fontSize: 12.5, color: B.muted, marginTop: 8, lineHeight: 1.55 }}>
                  HbA1c dropped 0.2 to 5.4 — solidly in range. LDL is mildly elevated at 142; expect this to improve as weight stabilises.
                </div>
              </div>
              <div style={{ background: B.surface, border: `1px solid ${B.hair}`, borderRadius: 14, padding: 18 }}>
                <div style={{ fontSize: 13, fontWeight: 600 }}>Doctor's note</div>
                <div style={{ fontSize: 12.5, color: B.ink, marginTop: 8, lineHeight: 1.55 }}>
                  "Looks great overall. We'll re-check the lipid panel in 8 weeks. No medication changes needed at this time."
                </div>
                <div style={{ fontSize: 11, color: B.faint, marginTop: 8, fontFamily: B.mono }}>Dr. A. Lee · 04 / 28 · 11:14 AM</div>
              </div>
            </aside>
          </div>
        </main>
      </div>
    </BScreen>
  );
}

// ── Treatment plan ────────────────────────────────────────
function BPlan() {
  return (
    <BScreen>
      <div style={{ display: 'flex', height: '100%' }}>
        <BSidebar active="care" />
        <main style={{ flex: 1, height: '100%', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
          <BTopbar title="Your treatment plan" sub="Personalized by Dr. Amanda Lee · last updated April 26" />
          <div style={{ flex: 1, overflow: 'hidden', padding: '24px 32px', display: 'grid', gridTemplateColumns: '1fr 320px', gap: 20 }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 18, overflow: 'hidden' }}>
              <section style={{ background: B.brand, color: '#fff', borderRadius: 14, padding: 26 }}>
                <div style={{ fontSize: 11, fontFamily: B.mono, color: 'rgba(255,255,255,0.7)', letterSpacing: '0.04em', textTransform: 'uppercase' }}>Treatment track</div>
                <div style={{ fontSize: 28, fontWeight: 600, letterSpacing: '-0.025em', marginTop: 8 }}>GLP-1 Weight Program</div>
                <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.8)', marginTop: 8, maxWidth: 540, lineHeight: 1.5 }}>
                  A medically-supervised 12-week program combining weekly semaglutide injections with B12 + MIC support and structured progress check-ins.
                </div>
                <div style={{ display: 'flex', gap: 24, marginTop: 18 }}>
                  {[['Week', '2 of 12'], ['Started', 'Apr 26 / 26'], ['Next refill', 'May 14']].map(([k, v], i) => (
                    <div key={i}>
                      <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.6)' }}>{k}</div>
                      <div style={{ fontSize: 16, fontWeight: 600, marginTop: 2 }}>{v}</div>
                    </div>
                  ))}
                </div>
              </section>

              <section style={{ background: B.surface, border: `1px solid ${B.hair}`, borderRadius: 14, padding: 22 }}>
                <div style={{ fontSize: 13, fontWeight: 600 }}>Medications</div>
                <div style={{ fontSize: 12, color: B.muted, marginBottom: 14 }}>Shipped directly to your door · auto-refill enabled</div>
                {[
                  ['Semaglutide injection', '0.5 mg / week · subcutaneous', 'Active · 8 doses left', 'Mar 12'],
                  ['B12 + MIC injection', '1× weekly', 'Active · 11 doses left', 'Mar 12'],
                  ['Bloodwork order', 'CMP + lipid panel · 8 weeks', 'Pending lab visit', 'Apr 26'],
                ].map(([n, d, s, st], i) => (
                  <div key={i} style={{ display: 'flex', gap: 14, padding: '14px 0', borderTop: i ? `1px solid ${B.hair}` : 'none', alignItems: 'center' }}>
                    <div style={{ width: 44, height: 44, borderRadius: 10, background: B.brandSoft, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      <Icon name={i === 2 ? 'flask' : 'pill'} size={18} color={B.brand} />
                    </div>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 14, fontWeight: 600 }}>{n}</div>
                      <div style={{ fontSize: 12, color: B.muted, marginTop: 2 }}>{d}</div>
                    </div>
                    <div style={{ textAlign: 'right' }}>
                      <div style={{ fontSize: 12, color: s.startsWith('Active') ? B.brand : B.muted, fontWeight: 500 }}>{s}</div>
                      <div style={{ fontSize: 11, color: B.faint, fontFamily: B.mono, marginTop: 2 }}>started {st}</div>
                    </div>
                  </div>
                ))}
              </section>

              <section style={{ background: B.surface, border: `1px solid ${B.hair}`, borderRadius: 14, padding: 22 }}>
                <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 14 }}>Doctor's notes</div>
                <div style={{ fontSize: 13, color: B.ink, lineHeight: 1.6, padding: 16, background: B.bg, borderRadius: 10, borderLeft: `3px solid ${B.brand}` }}>
                  "Sarah, you're doing great. We're starting at 0.5 mg to minimize GI side effects — we may titrate up to 1.0 mg around week 6 depending on how you tolerate this dose. Aim for ½ a plate of protein at lunch and dinner. Light walks 30 min, 5x / week."
                </div>
                <div style={{ fontSize: 11, color: B.faint, marginTop: 10, fontFamily: B.mono }}>— Dr. Amanda Lee · Apr 26</div>
              </section>
            </div>

            <aside style={{ display: 'flex', flexDirection: 'column', gap: 14, overflow: 'hidden' }}>
              <div style={{ background: B.surface, border: `1px solid ${B.hair}`, borderRadius: 14, padding: 18 }}>
                <div style={{ fontSize: 13, fontWeight: 600 }}>Next shipment</div>
                <div style={{ fontSize: 12, color: B.muted, marginTop: 4 }}>Arriving May 14 · trackable</div>
                <div style={{ marginTop: 14 }}>
                  {['Ordered', 'Filled', 'Shipped', 'Delivered'].map((s, i) => (
                    <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '6px 0' }}>
                      <span style={{ width: 14, height: 14, borderRadius: 14, background: i < 2 ? B.brand : B.bg, border: i === 2 ? `2px solid ${B.brand}` : `1px solid ${B.hair}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                        {i < 2 ? <Icon name="check" size={9} color="#fff" /> : null}
                      </span>
                      <span style={{ fontSize: 12, fontWeight: i < 2 ? 500 : 400, color: i < 2 ? B.ink : B.muted }}>{s}</span>
                      <span style={{ marginLeft: 'auto', fontSize: 11, color: B.faint, fontFamily: B.mono }}>{['May 12', 'May 13', '— —', '— —'][i]}</span>
                    </div>
                  ))}
                </div>
              </div>
              <div style={{ background: B.brandSoft, borderRadius: 14, padding: 16 }}>
                <div style={{ fontSize: 13, fontWeight: 600, color: B.brandDeep }}>Tip from Dr. Lee</div>
                <div style={{ fontSize: 12, color: B.muted, marginTop: 6, lineHeight: 1.55 }}>Inject in your abdomen on the same day each week. Rotate sites to avoid irritation.</div>
                <a style={{ display: 'inline-block', marginTop: 8, fontSize: 12, color: B.brand, fontWeight: 500 }}>How-to video →</a>
              </div>
            </aside>
          </div>
        </main>
      </div>
    </BScreen>
  );
}

// ── Library / Education ───────────────────────────────────
function BLibrary() {
  return (
    <BScreen>
      <div style={{ display: 'flex', height: '100%' }}>
        <BSidebar active="learn" />
        <main style={{ flex: 1, height: '100%', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
          <BTopbar title="Library" sub="Evidence-based reading, AI-summarized for you" />
          <div style={{ flex: 1, overflow: 'hidden', padding: '24px 32px' }}>
            <div style={{ display: 'flex', gap: 8, marginBottom: 20 }}>
              {['All topics', 'GLP-1', 'Nutrition', 'Hormones', 'Peptides', 'Lifestyle', 'Mental health'].map((t, i) => (
                <span key={i} style={{
                  padding: '7px 14px', borderRadius: 999, fontSize: 12,
                  background: i === 0 ? B.brand : B.surface,
                  color: i === 0 ? '#fff' : B.ink,
                  border: i === 0 ? 'none' : `1px solid ${B.hair}`,
                  fontWeight: i === 0 ? 500 : 400,
                }}>{t}</span>
              ))}
            </div>

            <section style={{ background: B.surface, border: `1px solid ${B.hair}`, borderRadius: 14, overflow: 'hidden', marginBottom: 20, display: 'grid', gridTemplateColumns: '1fr 1.2fr' }}>
              <Placeholder h={260} radius={0} tone="sage" label="featured · clinic photography" />
              <div style={{ padding: '28px 32px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                <div style={{ fontSize: 11, color: B.brand, fontFamily: B.mono, letterSpacing: '0.06em', textTransform: 'uppercase' }}>Featured · GLP-1</div>
                <h2 style={{ margin: '8px 0 8px', fontSize: 26, fontWeight: 600, letterSpacing: '-0.02em', lineHeight: 1.2 }}>
                  How semaglutide actually works — beyond the headlines.
                </h2>
                <div style={{ fontSize: 13.5, color: B.muted, lineHeight: 1.55 }}>
                  A clear, plain-language guide to GLP-1 receptor agonists, what to expect week by week, and how to set yourself up for success.
                </div>
                <div style={{ display: 'flex', gap: 10, marginTop: 14, alignItems: 'center', fontSize: 12, color: B.muted }}>
                  <Placeholder w={24} h={24} radius={24} tone="sage" label="" />
                  Reviewed by Dr. R. Patel, MD · 6 min read
                </div>
              </div>
            </section>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 14 }}>
              {[
                ['Nutrition', 'Protein on a GLP-1', '5 min', 'cream'],
                ['Lifestyle', 'Exercise without burnout', '4 min', 'clinical'],
                ['GLP-1', 'Side-effects: what is normal?', '6 min', 'sage'],
                ['Hormones', 'Thyroid 101', '7 min', 'blush'],
                ['Mental health', 'Body image during change', '8 min', 'cream'],
                ['Peptides', 'BPC-157 · evidence review', '9 min', 'sage'],
                ['Lifestyle', 'Sleep and weight', '5 min', 'clinical'],
                ['Nutrition', 'Hydration & electrolytes', '3 min', 'blush'],
              ].map(([cat, t, m, tone], i) => (
                <div key={i} style={{ background: B.surface, border: `1px solid ${B.hair}`, borderRadius: 12, overflow: 'hidden' }}>
                  <Placeholder h={104} radius={0} tone={tone} label={cat.toLowerCase()} />
                  <div style={{ padding: '12px 14px 14px' }}>
                    <div style={{ fontSize: 10, fontFamily: B.mono, color: B.brand, letterSpacing: '0.06em', textTransform: 'uppercase' }}>{cat}</div>
                    <div style={{ fontSize: 13.5, fontWeight: 500, marginTop: 4, lineHeight: 1.3 }}>{t}</div>
                    <div style={{ fontSize: 11, color: B.muted, marginTop: 6, display: 'flex', gap: 6, alignItems: 'center' }}>
                      <Icon name="sparkle" size={10} color={B.brand} /> AI summary · {m}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </main>
      </div>
    </BScreen>
  );
}

Object.assign(window, { BChat, BLabs, BPlan, BLibrary });