// UBP sub-page: Personal Research Manager.
// Mendeley-like 3-pane workspace — organize, AI search, summarize, cite,
// push references on-chain when needed (provenance + dPID anchor).

function PRMRail({ active }) {
  return (
    <>
      <div style={{ padding: '0 16px 14px', borderBottom: `1px solid ${UB.rule2}`, marginBottom: 14 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <div style={{ width: 28, height: 28, background: UB.ink, color: UB.paper, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: UB.serif, fontSize: 16 }}>M</div>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontWeight: 600, fontSize: 12, lineHeight: 1.1 }}>M. Harriot</div>
            <div style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.06em' }}>UBID·0x7a91…3fc2</div>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 4 }}>
          <Tag tone="accent">TIS 85.8</Tag>
          <Tag>1,418 REFS</Tag>
        </div>
      </div>
      <NavGroup label="Workspace">
        <NavItem icon={Icon.home} label="Overview" />
        <NavItem icon={Icon.user} label="TRID Profile" />
        <NavItem icon={Icon.doc} label="Papers & Drafts" badge="14" />
        <NavItem icon={Icon.book} label="Research Manager" badge="218" active={active === 'manager'} />
        <NavItem icon={Icon.flask} label="Active Research" badge="6" />
      </NavGroup>
      <NavGroup label="Connected">
        <NavItem icon={Icon.book} label="Open Labbook" />
        <NavItem icon={Icon.doc} label="Publication" />
        <NavItem icon={Icon.cpu} label="Compute" />
        <NavItem icon={Icon.storage} label="Storage Hosting" active={active === 'host'} />
      </NavGroup>
      <NavGroup label="Account">
        <NavItem icon={Icon.cube} label="Wallet" />
        <NavItem icon={Icon.cog} label="Settings" />
      </NavGroup>
    </>);

}

// ───────────────────────────────────────────── PERSONAL RESEARCH MANAGER ─────
function ResearchManagerDapp() {
  // Collections (folders)
  const collections = [
  { k: 'astro-sleep', label: 'Astrocytes · sleep', n: 84, active: true },
  { k: 'glia-hetero', label: 'Glia heterogeneity', n: 56 },
  { k: 'repro', label: 'Reproducibility & methods', n: 38 },
  { k: 'open-imaging', label: 'Open imaging tooling', n: 62 },
  { k: 'reviews', label: 'Reviews · 2025 cycle', n: 14, badge: 'reviewing' },
  { k: 'patent', label: 'Patent prior-art · H-3', n: 22, badge: 'IP' }];


  const smart = [
  ['Unread · last 30d', 22],
  ['Cited by my drafts', 412],
  ['Annotated', 218],
  ['Watch-list authors', 36],
  ['Conflicting findings', 8]];


  // Papers in current collection (Astrocytes · sleep)
  const papers = [
  {
    sel: true,
    pin: true,
    type: 'UB',
    onchain: true,
    title: 'Astrocytic gating of slow-wave sleep across cortical depth',
    authors: 'Harriot M., Singh L., Okafor R., +4',
    venue: 'UB-Chain · dPID·a92f.04',
    year: 2025,
    cited: 12,
    anno: 18,
    tags: ['#astrocyte', '#sleep'],
    flag: 'YOUR PAPER'
  },
  {
    sel: false,
    type: 'PDF',
    onchain: false,
    title: 'Sleep depth from astrocyte calcium dynamics — RIKEN replication',
    authors: 'Yamamoto K., Tanaka H., Mori J.',
    venue: 'Nature Neuroscience 28(4)',
    year: 2025,
    cited: 2, anno: 14,
    tags: ['#replication'],
    flag: 'REPLICATES YOU'
  },
  {
    sel: false,
    type: 'bioRxiv',
    onchain: false,
    title: 'Glia heterogeneity beyond morphology: a single-cell atlas v2',
    authors: 'Singh L. +6 · OpenGlia Consortium',
    venue: 'bioRxiv 2024.11.08.621442',
    year: 2024,
    cited: 4, anno: 11,
    tags: ['#single-cell']
  },
  {
    sel: false,
    type: 'arXiv',
    onchain: false,
    title: 'Sparse decoding of cortical dynamics with scaled-attention transformers',
    authors: 'Patel A., Mehta R.',
    venue: 'arXiv:2503.18112',
    year: 2025,
    cited: 0, anno: 0,
    tags: ['#methods', '#ml'],
    flag: 'SUGGESTED'
  },
  {
    sel: false,
    type: 'PDF',
    onchain: false,
    title: 'A reproducibility-weighted citation index for neuroimaging',
    authors: 'Lin C., Harriot M.',
    venue: 'Cell Reports Methods · 5(11)',
    year: 2024,
    cited: 6, anno: 22,
    tags: ['#review']
  },
  {
    sel: false,
    type: 'PDF',
    onchain: false,
    title: 'Negative result: μ-glia ablation does not impair LTP recall',
    authors: 'Yamamoto K., Mori J.',
    venue: 'eLife 14:e98821',
    year: 2025,
    cited: 0, anno: 0,
    tags: ['#negative-result'],
    flag: 'CONFLICTS'
  },
  {
    sel: false,
    type: 'UB',
    onchain: true,
    title: 'Open-source 2-photon rig: BoM v3 + reproducible build',
    authors: 'Harriot M., Mwangi A.',
    venue: 'UB-Chain · dPID·56dd.01',
    year: 2024,
    cited: 8, anno: 5,
    tags: ['#tooling']
  },
  {
    sel: false,
    type: 'DOI',
    onchain: false,
    title: 'Astrocyte Ca²⁺ waves and cortical state transitions',
    authors: 'Pereira M., Doust J., Lin Z.',
    venue: 'Neuron 113(8) · 2025',
    year: 2025,
    cited: 1, anno: 6,
    tags: ['#astrocyte', '#methods']
  }];


  const inkOk = UB.ok || '#3b8c3b';
  const inkBad = UB.bad || '#b6362a';
  const inkWarn = UB.warn || '#b8761d';

  return (
    <Dapp>
      <ChromeBar dapp="PERSONAL" code="UBP / RESEARCH·MANAGER" />
      <Layout rail={<PRMRail active="manager" />}>
        <PageHead
          eyebrow={<><span style={{ marginRight: 8 }}>UBP · Research manager</span><Tag tone="accent">MENDELEY-COMPATIBLE</Tag></>}
          title="My research manager"
          sub="Organize references, ask the AI twin, draft citations, and push to chain on demand. 1,418 references · 14 collections · 218 annotated."
          actions={<>
            <Btn small icon={Icon.search}>Add by DOI / arXiv / dPID</Btn>
            <Btn small icon={Icon.plus}>Import .bib / .ris</Btn>
            <Btn small primary icon={Icon.shield}>Push selection on-chain</Btn>
          </>} />
        

        {/* Top utility strip — search + AI ask */}
        <div style={{ padding: '14px 24px 0', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 12 }}>
          <div style={{ border: `1px solid ${UB.rule2}`, background: '#fff', display: 'flex', alignItems: 'center', height: 38, padding: '0 12px', gap: 10 }}>
            <span style={{ color: UB.ink3 }}>{Icon.search}</span>
            <span style={{ fontFamily: UB.mono, fontSize: 11, color: UB.ink3, letterSpacing: '0.08em' }}>QUERY</span>
            <span style={{ color: UB.ink, fontSize: "9px" }}>astrocyte AND ("slow-wave" OR "delta") year:&gt;=2024</span>
            <span style={{ flex: 1 }} />
            <Tag>FULL-TEXT</Tag>
            <Tag tone="ok">SEMANTIC</Tag>
            <Tag>MY CITATIONS</Tag>
          </div>
          <div style={{ border: `1px solid ${UB.ink}`, background: UB.ink, color: UB.paper, display: 'flex', alignItems: 'center', height: 38, padding: '0 12px', gap: 10 }}>
            <span style={{ width: 6, height: 6, background: UB.accent, borderRadius: '50%' }} />
            <span style={{ fontFamily: UB.mono, fontSize: 10, letterSpacing: '0.14em', color: UB.paperDeep }}>ASK YOUR LIBRARY</span>
            <span style={{ flex: 1 }} />
            <span style={{ fontFamily: UB.mono, fontSize: 11, color: '#fff' }}>"Where do RIKEN's depth profiles disagree with mine?"</span>
            <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.paperDeep }}>⏎</span>
          </div>
        </div>

        {/* Three-pane Mendeley-style workspace */}
        <div style={{ flex: 1, padding: 16, display: 'grid', gridTemplateColumns: '210px minmax(0, 1fr) 360px', gap: 14, minHeight: 0 }}>

          {/* ─── Left: collections + smart folders ─── */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, minHeight: 0 }}>
            <Card title="Collections" code="14" pad={false}>
              {collections.map((c, i, arr) =>
              <div key={c.k} style={{
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                padding: '8px 12px', fontSize: 11,
                borderBottom: i < arr.length - 1 ? `1px solid ${UB.rule3}` : 'none',
                background: c.active ? UB.accentDim : 'transparent',
                borderLeft: c.active ? `2px solid ${UB.accent}` : '2px solid transparent'
              }}>
                  <div style={{ minWidth: 0, display: 'flex', alignItems: 'center', gap: 8 }}>
                    <span style={{ color: c.active ? UB.ink : UB.ink3 }}>{Icon.book}</span>
                    <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.label}</span>
                  </div>
                  <span style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3 }}>{c.n}</span>
                </div>
              )}
              <div style={{ padding: '8px 12px', fontFamily: UB.mono, fontSize: 10, color: UB.ink3, borderTop: `1px solid ${UB.rule2}`, display: 'flex', alignItems: 'center', gap: 6 }}>
                <span>+</span><span>NEW COLLECTION</span>
              </div>
            </Card>

            <Card title="Smart folders" code="AUTO" pad={false}>
              {smart.map((s, i, arr) =>
              <div key={s[0]} style={{
                display: 'flex', justifyContent: 'space-between', padding: '7px 12px',
                fontSize: 11, borderBottom: i < arr.length - 1 ? `1px solid ${UB.rule3}` : 'none'
              }}>
                  <span style={{ color: UB.ink2 }}>{s[0]}</span>
                  <span style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3 }}>{s[1]}</span>
                </div>
              )}
            </Card>

            <Card title="Storage" code="LOCAL + CHAIN" pad={false}>
              <div style={{ padding: '10px 12px', borderBottom: `1px solid ${UB.rule3}` }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.08em', marginBottom: 4 }}>
                  <span>LOCAL CACHE</span><span>4.2 / 16 GB</span>
                </div>
                <div style={{ height: 4, background: UB.paperDeep }}>
                  <div style={{ width: '26%', height: '100%', background: UB.ink }} />
                </div>
              </div>
              <div style={{ padding: '10px 12px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.08em', marginBottom: 4 }}>
                  <span>ON-CHAIN PINS</span><span>218 refs</span>
                </div>
                <div style={{ height: 4, background: UB.paperDeep }}>
                  <div style={{ width: '15%', height: '100%', background: UB.accent }} />
                </div>
                <div style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3, marginTop: 6, lineHeight: 1.4 }}>
                  pinned to 8 nodes · 0.0042 UBR / mo
                </div>
              </div>
            </Card>
          </div>

          {/* ─── Center: paper list ─── */}
          <Card title="Astrocytes · sleep" code="84 · SORT NEWEST" pad={false} style={{ minHeight: 0, display: 'flex', flexDirection: 'column' }}>
            {/* Filter bar */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '10px 14px', borderBottom: `1px solid ${UB.rule2}`, background: UB.paperDeep, fontSize: 11 }}>
              <input type="checkbox" defaultChecked style={{ accentColor: UB.ink }} />
              <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3, letterSpacing: '0.08em' }}>1 OF 84 SELECTED</span>
              <span style={{ flex: 1 }} />
              <Tag>YEAR</Tag><Tag>AUTHOR</Tag><Tag tone="accent">RELEVANCE</Tag><Tag>UNREAD</Tag>
              <span style={{ width: 1, height: 14, background: UB.rule2, margin: '0 4px' }} />
              <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>⊞ list</span>
              <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>▦ table</span>
            </div>

            {/* Paper rows */}
            <div style={{ flex: 1, overflow: 'auto' }}>
              {papers.map((p, i) =>
              <div key={i} style={{
                display: 'grid',
                gridTemplateColumns: '20px 14px 1fr auto',
                gap: 10,
                padding: '11px 14px',
                borderBottom: `1px solid ${UB.rule3}`,
                background: p.sel ? UB.accentDim : 'transparent',
                borderLeft: p.sel ? `2px solid ${UB.accent}` : '2px solid transparent',
                alignItems: 'flex-start'
              }}>
                  <input type="checkbox" defaultChecked={p.sel} style={{ accentColor: UB.ink, marginTop: 2 }} />
                  <span style={{ color: p.pin ? UB.accent : UB.ink4, fontSize: 12, marginTop: 1 }}>★</span>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 12.5, fontWeight: 500, marginBottom: 2, color: UB.ink }}>{p.title}</div>
                    <div style={{ fontSize: 11, color: UB.ink2, marginBottom: 4 }}>{p.authors} · <span style={{ color: UB.ink3 }}>{p.venue} · {p.year}</span></div>
                    <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', alignItems: 'center' }}>
                      <span style={{ fontFamily: UB.mono, fontSize: 9, padding: '1px 5px', background: p.type === 'UB' ? UB.ink : UB.paperDeep, color: p.type === 'UB' ? UB.paper : UB.ink3, letterSpacing: '0.08em' }}>{p.type}</span>
                      {p.onchain && <Tag tone="accent">ON-CHAIN</Tag>}
                      {p.flag === 'YOUR PAPER' && <Tag tone="ok">YOUR PAPER</Tag>}
                      {p.flag === 'REPLICATES YOU' && <Tag tone="ok">REPLICATES YOU</Tag>}
                      {p.flag === 'CONFLICTS' && <Tag tone="bad">CONFLICTS</Tag>}
                      {p.flag === 'SUGGESTED' && <Tag tone="info">AI SUGGESTED</Tag>}
                      {p.tags.map((t) =>
                    <span key={t} style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3 }}>{t}</span>
                    )}
                    </div>
                  </div>
                  <div style={{ textAlign: 'right', fontFamily: UB.mono, fontSize: 10, color: UB.ink3, lineHeight: 1.4, whiteSpace: 'nowrap' }}>
                    {p.anno > 0 && <div>✎ {p.anno}</div>}
                    {p.cited > 0 && <div>cite·{p.cited}</div>}
                  </div>
                </div>
              )}
            </div>

            {/* Bottom batch action bar — appears when selection */}
            <div style={{ padding: '10px 14px', borderTop: `1px solid ${UB.rule2}`, background: UB.ink, color: UB.paper, display: 'flex', alignItems: 'center', gap: 10, fontFamily: UB.mono, fontSize: 11 }}>
              <span style={{ letterSpacing: '0.08em', color: UB.paperDeep }}>1 SELECTED ·</span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '3px 8px', border: '1px solid #444' }}>↗ MOVE</span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '3px 8px', border: '1px solid #444' }}># TAG</span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '3px 8px', border: '1px solid #444' }}>✎ ANNOTATE</span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '3px 8px', border: '1px solid #444' }}>⌥ CITE INTO DRAFT</span>
              <span style={{ flex: 1 }} />
              <span style={{ display: 'flex', alignItems: 'center', gap: 5, padding: '4px 10px', background: UB.accent, color: UB.ink, fontWeight: 600 }}>
                ⛓ PUSH ON-CHAIN
              </span>
            </div>
          </Card>

          {/* ─── Right: details + AI assistant + on-chain panel ─── */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, minHeight: 0 }}>
            {/* Selected paper detail */}
            <Card title="Selected reference" code="DETAILS">
              <div style={{ fontFamily: UB.serif, fontSize: 16, lineHeight: 1.25, marginBottom: 6 }}>
                Astrocytic gating of slow-wave sleep across cortical depth
              </div>
              <div style={{ fontSize: 11, color: UB.ink2, marginBottom: 8 }}>
                Harriot M., Singh L., Okafor R., Mwangi A., Patel S., Lin C., Tanaka H. (+1)
              </div>
              <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap', marginBottom: 12 }}>
                <Tag tone="accent">ON-CHAIN</Tag>
                <Tag tone="ok">YOUR PAPER</Tag>
                <Tag>OPEN ACCESS</Tag>
                <Tag>PEER-REVIEWED</Tag>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginBottom: 12 }}>
                <Stat label="dPID" value="a92f.04" sub="UB-Chain" />
                <Stat label="Citations" value="12" sub="↑3 this month" />
                <Stat label="Annotations" value="18" sub="6 highlighted" />
                <Stat label="Reproductions" value="2 / 3" sub="RIKEN · Czech" />
              </div>
              <div style={{ borderTop: `1px solid ${UB.rule3}`, paddingTop: 10, fontSize: 11, color: UB.ink2, lineHeight: 1.5 }}>
                <span style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.1em', display: 'block', marginBottom: 4 }}>ABSTRACT (TRUNCATED)</span>
                Slow-wave sleep is shaped by depth-specific astrocytic Ca²⁺ dynamics. Using simultaneous 2-photon imaging and laminar fEPSP recording across V1, we show that layer 5 astrocytes…
                <span style={{ display: 'block', marginTop: 6, color: UB.ink3, fontFamily: UB.mono, fontSize: 10 }}>+ open full reader</span>
              </div>
            </Card>

            {/* AI assistant */}
            <Card title="AI research assistant" code="TWIN · v3" dark>
              <div style={{ fontSize: 11, color: UB.paperDeep, lineHeight: 1.55, marginBottom: 10 }}>
                I read this paper plus 3 related (RIKEN, Pereira, Lin). Here's what I found:
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8, fontSize: 11 }}>
                <div style={{ borderLeft: `2px solid ${UB.accent}`, paddingLeft: 10 }}>
                  <div style={{ fontFamily: UB.mono, fontSize: 9, color: '#aaa', letterSpacing: '0.1em', marginBottom: 2 }}>SUMMARY · 3 BULLETS</div>
                  <div style={{ color: '#eee' }}>L5 astrocytes show 0.4 Hz Ca²⁺ waves locked to slow-oscillation up-states; depth gradient is monotonic 2→6.</div>
                </div>
                <div style={{ borderLeft: `2px solid ${inkWarn}`, paddingLeft: 10 }}>
                  <div style={{ fontFamily: UB.mono, fontSize: 9, color: '#aaa', letterSpacing: '0.1em', marginBottom: 2 }}>CONFLICTS</div>
                  <div style={{ color: '#eee' }}>Yamamoto 2025 (eLife) reports no LTP impairment after μ-glia ablation — possibly cell-type rather than activity disagreement.</div>
                </div>
                <div style={{ borderLeft: `2px solid ${inkOk}`, paddingLeft: 10 }}>
                  <div style={{ fontFamily: UB.mono, fontSize: 9, color: '#aaa', letterSpacing: '0.1em', marginBottom: 2 }}>CITES YOU 12×</div>
                  <div style={{ color: '#eee' }}>Pereira 2025 builds on your slow-wave figure 3 (dPID·a92f.04 / fig3).</div>
                </div>
              </div>
              <div style={{ display: 'flex', gap: 6, marginTop: 12, flexWrap: 'wrap' }}>
                <span style={{ fontSize: 10, padding: '3px 8px', border: '1px solid #444', color: '#fff', fontFamily: UB.mono, letterSpacing: '0.06em' }}>EXPLAIN FIG 3</span>
                <span style={{ fontSize: 10, padding: '3px 8px', border: '1px solid #444', color: '#fff', fontFamily: UB.mono, letterSpacing: '0.06em' }}>FIND REPLICATIONS</span>
                <span style={{ fontSize: 10, padding: '3px 8px', border: '1px solid #444', color: '#fff', fontFamily: UB.mono, letterSpacing: '0.06em' }}>DRAFT INTRO ¶</span>
                <span style={{ fontSize: 10, padding: '3px 8px', background: UB.accent, color: UB.ink, fontFamily: UB.mono, letterSpacing: '0.06em', fontWeight: 600 }}>+ ASK</span>
              </div>
            </Card>

            {/* On-chain provenance / push */}
            <Card title="Push to chain" code="WHEN REQUIRED" pad={false}>
              <div style={{ padding: '12px 14px', borderBottom: `1px solid ${UB.rule3}`, fontSize: 11, color: UB.ink2, lineHeight: 1.5 }}>
                Anchor this reference (or your selection) to UB-Chain so its hash, your annotations, and the citation context are independently verifiable when you submit, review, or file IP.
              </div>
              <div style={{ padding: '10px 14px', borderBottom: `1px solid ${UB.rule3}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div>
                  <div style={{ fontSize: 11, fontWeight: 500 }}>Already pinned</div>
                  <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>dPID·a92f.04 · 8 nodes</div>
                </div>
                <Tag tone="ok">ANCHORED</Tag>
              </div>
              <div style={{ padding: '10px 14px', borderBottom: `1px solid ${UB.rule3}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div>
                  <div style={{ fontSize: 11, fontWeight: 500 }}>Annotations (18)</div>
                  <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>private · co-signed by lab keys</div>
                </div>
                <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.accent }}>+ ANCHOR · 0.0008 UBR</span>
              </div>
              <div style={{ padding: '10px 14px', borderBottom: `1px solid ${UB.rule3}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div>
                  <div style={{ fontSize: 11, fontWeight: 500 }}>Cite-bundle for draft NB-219</div>
                  <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>42 refs · BibTeX + dPIDs</div>
                </div>
                <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.accent }}>+ PUSH · 0.0094 UBR</span>
              </div>
              <div style={{ padding: '10px 14px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: UB.paperDeep }}>
                <div style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.08em' }}>EVERYTHING · 218 ITEMS</div>
                <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>EST 0.0420 UBR</span>
              </div>
            </Card>

            {/* Citation styles */}
            <Card title="Cite this" code="ONE-CLICK">
              <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap', marginBottom: 10 }}>
                {['APA 7', 'IEEE', 'Nature', 'Cell', 'BibTeX', 'RIS', 'CSL-JSON', 'dPID-only'].map((s, i) =>
                <span key={s} style={{
                  fontSize: 10, padding: '3px 8px',
                  background: i === 0 ? UB.ink : UB.paperDeep,
                  color: i === 0 ? UB.paper : UB.ink2,
                  fontFamily: UB.mono, letterSpacing: '0.04em'
                }}>{s}</span>
                )}
              </div>
              <div style={{ background: UB.paperDeep, padding: '10px 12px', fontFamily: UB.mono, fontSize: 11, color: UB.ink2, lineHeight: 1.55, borderLeft: `2px solid ${UB.accent}` }}>
                Harriot, M., Singh, L., Okafor, R., Mwangi, A., Patel, S., Lin, C., Tanaka, H., &amp; Adeyemi, B. (2025). <em>Astrocytic gating of slow-wave sleep across cortical depth.</em> UB-Chain dPID·a92f.04. <span style={{ color: UB.accent }}>https://ub.chain/p/a92f.04</span>
              </div>
              <div style={{ marginTop: 8, display: 'flex', justifyContent: 'space-between', fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>
                <span>Copy · Drag-to-Overleaf · Push to draft NB-219</span>
                <span style={{ color: UB.accent }}>↗ COPY</span>
              </div>
            </Card>
          </div>

        </div>
      </Layout>
    </Dapp>);

}

window.ResearchManagerDapp = ResearchManagerDapp;
window.PRMRail = PRMRail;