// ─────────────────────────────────────────────────────────────────────────
// Variation 2 — "The conversation"
// Intake feels like a thoughtful friend asking, one thing at a time.
// The Health Story unspools in a thread Jordan/Maya can come back to.
// The Action Plan is a set of agreed-upon next steps from that same thread.
// The Care Team Companion is the *practitioner's* view of the conversation,
// so the clinician sees what was actually discussed.
// ─────────────────────────────────────────────────────────────────────────

const convoStyles = `
.cv {
  width: 100%; height: 100%;
  background: #F2EFE9;
  color: var(--bf-text);
  font-family: var(--font-sans);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.cv-bar {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 14px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--bf-border);
  background: #FAFAF7;
  flex-shrink: 0;
}
.cv-bar .who {
  display: flex; align-items: center; gap: 10px;
}
.cv-bar .who .av {
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--c360-teal); color: white;
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px;
  border: 2px solid var(--bf-text);
}
.cv-bar .who .lab { line-height: 1.15; }
.cv-bar .who .lab .nm { font-size: 13px; font-weight: 700; }
.cv-bar .who .lab .role { font-family: var(--font-mono); font-size: 10.5px; color: var(--bf-muted); }
.cv-bar .crumbs {
  display: flex; gap: 4px; font-family: var(--font-mono); font-size: 11px; color: var(--bf-muted);
  justify-content: center;
}
.cv-bar .crumbs .now { color: var(--bf-text); font-weight: 600; }
.cv-bar .actions { display: flex; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--bf-muted); }
.cv-bar .actions .pill {
  padding: 4px 9px; border: 1px solid var(--bf-border); border-radius: 999px;
  background: white; cursor: pointer;
}
.cv-bar .actions .pill.on { background: var(--bf-text); color: white; border-color: var(--bf-text); }

.cv-main {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 1fr 280px;
  overflow: hidden;
}
.cv-thread {
  overflow: hidden;
  display: flex; flex-direction: column;
  position: relative;
}
.cv-thread .stream {
  flex: 1; min-height: 0;
  padding: 22px 30px 16px;
  display: flex; flex-direction: column; gap: 14px;
  overflow: hidden;
}
.cv-thread .session-mark {
  align-self: center;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--bf-muted);
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 14px;
  background: rgba(255,255,255,0.7); border-radius: 999px;
}
.bub {
  max-width: 78%;
  padding: 12px 16px;
  border-radius: 18px;
  font-size: 14px; line-height: 1.55;
  position: relative;
}
.bub.them {
  align-self: flex-start;
  background: white;
  border: 1px solid var(--bf-border);
  border-bottom-left-radius: 6px;
}
.bub.them.note {
  background: var(--c360-teal-ghost);
  border-color: var(--c360-teal);
}
.bub.me {
  align-self: flex-end;
  background: var(--bf-text);
  color: #FAFAFA;
  border-bottom-right-radius: 6px;
}
.bub .from { font-family: var(--font-mono); font-size: 10px; color: var(--bf-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.bub.me .from { color: rgba(255,255,255,0.6); }
.bub b { font-weight: 700; }
.bub em { font-family: var(--font-editorial); font-style: italic; }
.bub.them.long { max-width: 88%; padding: 16px 20px; }
.bub.them.long h4 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; margin: 4px 0 8px; }
.bub.them.long p { margin-bottom: 8px; }
.bub.them.long .leads { display: inline-flex; gap: 4px; margin: 0 2px; vertical-align: middle; }

.chips-tray {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 4px 6px;
}
.chips-tray .opt {
  font-size: 12.5px;
  padding: 7px 12px;
  border: 1.5px solid var(--bf-text);
  background: white;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.15s var(--ease-brand);
}
.chips-tray .opt.on { background: var(--c360-teal); color: white; border-color: var(--c360-teal); }
.chips-tray .opt:hover { background: rgba(0,0,0,0.05); }
.chips-tray .opt.on:hover { background: var(--c360-teal); }

.composer {
  flex-shrink: 0;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--bf-border);
  background: #FAFAF7;
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end;
}
.composer .field {
  border: 1px solid var(--bf-border);
  background: white;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  min-height: 44px;
  color: var(--bf-muted);
  display: flex; align-items: center; gap: 8px;
}
.composer .field .ghost { color: var(--bf-muted); }
.composer .send {
  background: var(--bf-text); color: white;
  border: 1px solid var(--bf-text);
  border-radius: 12px; padding: 0 16px; height: 44px;
  font-weight: 600; font-size: 13px; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
}
.composer .send.disabled { opacity: 0.4; cursor: default; }
.composer .meta { grid-column: 1 / -1; font-family: var(--font-mono); font-size: 10.5px; color: var(--bf-muted); display: flex; justify-content: space-between; }

.cv-side {
  border-left: 1px solid var(--bf-border);
  background: #FAFAF7;
  padding: 18px 18px 16px;
  display: flex; flex-direction: column; gap: 16px;
  overflow: hidden;
}
.cv-side .eyebrow { font-family: var(--font-mono); font-size: 10px; color: var(--bf-muted); letter-spacing: 0.12em; text-transform: uppercase; }
.cv-side .progress-card {
  background: white; border: 1px solid var(--bf-border);
  border-radius: 10px; padding: 12px;
}
.cv-side .progress-card .row {
  display: flex; align-items: center; gap: 8px; padding: 4px 0;
  font-size: 12px;
}
.cv-side .progress-card .row .tick {
  width: 14px; height: 14px; border-radius: 999px;
  background: var(--bf-surface); border: 1px solid var(--bf-border);
  display: grid; place-items: center; font-size: 9px;
  flex-shrink: 0;
}
.cv-side .progress-card .row.done .tick { background: var(--c360-teal); color: white; border-color: var(--c360-teal); }
.cv-side .progress-card .row.now { font-weight: 700; }
.cv-side .progress-card .row.now .tick { border-color: var(--c360-teal); border-width: 2px; }
.cv-side .progress-card .row.todo { color: var(--bf-muted); }

.cv-side .drv-pulse {
  background: white; border: 1px solid var(--bf-border);
  border-radius: 10px; padding: 12px;
}
.cv-side .drv-pulse h5 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--bf-muted); font-weight: 700; margin-bottom: 10px; }
.cv-side .drv-pulse .drv-row { display: grid; grid-template-columns: 32px 1fr 28px; gap: 8px; align-items: center; padding: 4px 0; }
.cv-side .drv-pulse .drv-row .code { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; }
.cv-side .drv-pulse .drv-row .meter { height: 5px; background: var(--bf-surface); border-radius: 3px; overflow: hidden; }
.cv-side .drv-pulse .drv-row .meter i { display: block; height: 100%; border-radius: 3px; }
.cv-side .drv-pulse .drv-row .pct { font-family: var(--font-mono); font-size: 10.5px; color: var(--bf-muted); text-align: right; }

.cv-side .note {
  background: var(--c360-teal); color: white;
  border: 2px solid var(--bf-text);
  box-shadow: var(--shadow-comic-sm);
  padding: 12px 14px; transform: rotate(-1.2deg);
  font-family: var(--font-sans);
}
.cv-side .note .eyebrow { color: rgba(255,255,255,0.7); }
.cv-side .note .quote { font-size: 12.5px; font-weight: 700; line-height: 1.35; margin-top: 6px; }

/* Plan: bubbles with cards inside */
.plan-card {
  background: white;
  border: 1px solid var(--bf-border);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.plan-card .pc-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.plan-card .pc-h .t { font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; }
.plan-card .pc-h .why { font-family: var(--font-mono); font-size: 10px; color: var(--bf-muted); white-space: nowrap; }
.plan-card .pc-c { font-size: 12.5px; color: #4a4a48; line-height: 1.5; }
.plan-card .pc-actions { display: flex; gap: 6px; padding-top: 4px; border-top: 1px dashed var(--bf-border); }
.plan-card .pc-actions .pc-btn {
  flex: 1; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--bf-border);
  background: #FAFAF7; font-size: 11px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.plan-card .pc-actions .pc-btn.primary { background: var(--c360-teal); color: white; border-color: var(--c360-teal); }
.plan-card .pc-actions .pc-btn.primary .glyph { font-size: 12px; }

.tier-strip {
  align-self: center;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px;
  background: white; border: 1px solid var(--bf-border);
  font-weight: 600;
}
.tier-strip.start { background: var(--c360-teal); color: white; border-color: var(--c360-teal); }
.tier-strip.build { background: var(--c360-teal-pale); color: var(--c360-teal); border-color: var(--c360-teal); }

/* CTC view (practitioner-facing) */
.cv-ctc {
  width: 100%; height: 100%;
  background: #FAFAF7;
  display: grid;
  grid-template-columns: 380px 1fr;
  overflow: hidden;
}
.cv-ctc-thread {
  background: #F2EFE9;
  border-right: 1px solid var(--bf-border);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.cv-ctc-thread .hdr { padding: 12px 16px; border-bottom: 1px solid var(--bf-border); background: #FAFAF7; }
.cv-ctc-thread .hdr .lab { font-family: var(--font-mono); font-size: 10px; color: var(--bf-muted); text-transform: uppercase; letter-spacing: 0.1em; }
.cv-ctc-thread .hdr .t { font-size: 14px; font-weight: 700; margin-top: 3px; }
.cv-ctc-thread .body { flex: 1; padding: 14px 16px; overflow: hidden; display: flex; flex-direction: column; gap: 10px; }
.cv-ctc-thread .body .bub { font-size: 12.5px; padding: 9px 12px; max-width: 92%; }
.cv-ctc-thread .body .bub.them .from { font-size: 9.5px; }
.cv-ctc-thread .body .more {
  align-self: center; font-family: var(--font-mono); font-size: 10px; color: var(--bf-muted);
  padding: 6px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.7);
}
.cv-ctc-doc {
  padding: 22px 28px;
  overflow: hidden;
  display: flex; flex-direction: column; gap: 16px;
}
.cv-ctc-doc .doc-hdr {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 16px;
  padding-bottom: 12px; border-bottom: 2px solid var(--bf-text);
}
.cv-ctc-doc .doc-hdr h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.cv-ctc-doc .doc-hdr .sub { font-family: var(--font-mono); font-size: 11px; color: var(--c360-teal); margin-top: 4px; letter-spacing: 0.04em; }
.cv-ctc-doc .doc-hdr .meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--bf-muted); text-align: right; line-height: 1.6; }
.cv-ctc-doc .doc-hdr .meta b { color: var(--bf-text); }
.cv-ctc-doc .syn-bar {
  background: white; border: 1px solid var(--bf-border);
  border-left: 3px solid var(--c360-teal);
  padding: 14px 16px;
  font-size: 13px; line-height: 1.55;
}
.cv-ctc-doc .syn-bar h4 { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--bf-muted); font-weight: 700; margin-bottom: 8px; }
.cv-ctc-doc .syn-bar b { font-weight: 700; }
.cv-ctc-doc .drv-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.cv-ctc-doc .drv-tile {
  background: white; border: 1px solid var(--bf-border); border-radius: 8px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 6px;
  border-top: 3px solid;
}
.cv-ctc-doc .drv-tile .code { font-family: var(--font-mono); font-size: 11px; font-weight: 700; }
.cv-ctc-doc .drv-tile .state { font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; }
.cv-ctc-doc .drv-tile .meter { height: 4px; background: var(--bf-surface); border-radius: 3px; overflow: hidden; margin-top: 2px; }
.cv-ctc-doc .drv-tile .meter i { display: block; height: 100%; }
.cv-ctc-doc .lever-bar {
  background: white; border: 1px solid var(--bf-border);
  border-radius: 8px;
  padding: 12px 14px;
}
.cv-ctc-doc .lever-bar h4 { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--bf-muted); font-weight: 700; margin-bottom: 10px; }
.cv-ctc-doc .lever-bar .row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--bf-border); font-size: 12.5px; }
.cv-ctc-doc .lever-bar .row:last-child { border-bottom: none; }
.cv-ctc-doc .lever-bar .row .lab { font-weight: 600; }
.cv-ctc-doc .lever-bar .row .why { font-family: var(--font-mono); font-size: 10.5px; color: var(--bf-muted); }
.cv-ctc-doc .lever-bar .row .tag {
  font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 7px; border-radius: 3px; background: var(--c360-teal); color: white; font-weight: 600;
}
`;

function CvBar({ persona, current, crumbs }) {
  return (
    <div className="cv-bar">
      <div className="who">
        <div className="av">{persona.name[0]}</div>
        <div className="lab">
          <div className="nm">{persona.name}</div>
          <div className="role">{persona.age} · {persona.pronouns}</div>
        </div>
      </div>
      <div className="crumbs">
        {crumbs.map((c,i) => (
          <React.Fragment key={i}>
            <span className={i === current ? "now" : ""}>{c}</span>
            {i < crumbs.length - 1 && <span>›</span>}
          </React.Fragment>
        ))}
      </div>
      <div className="actions">
        <span className="pill">save</span>
        <span className="pill on">{persona.name === 'Jordan' ? 'L. Maren' : 'D. Park'}</span>
      </div>
    </div>
  );
}

function CvSidePanel({ persona, intakeMode }) {
  const drvMap = window.DRIVERS;
  const sections = ["What matters most", "How your body feels", "Symptoms across systems", "What has shaped your health", "Conditions + history", "What you're hoping for"];
  return (
    <div className="cv-side">
      <div>
        <div className="eyebrow">Today's conversation</div>
        <div style={{fontSize: 12.5, color: 'var(--bf-muted)', marginTop: 6, lineHeight: 1.55}}>
          {intakeMode
            ? "We're about 12 minutes in. No rush. You can step away — everything saves."
            : "Saved to your Health Story. Anything we discuss here can be revisited later."}
        </div>
      </div>

      <div>
        <div className="eyebrow" style={{marginBottom: 8}}>Where we are</div>
        <div className="progress-card">
          {sections.map((s, i) => {
            const cls = i < 2 ? "done" : i === 2 ? "now" : "todo";
            return (
              <div className={"row " + cls} key={i}>
                <span className="tick">{cls === "done" ? "✓" : ""}</span>
                <span>{s}</span>
              </div>
            );
          })}
        </div>
      </div>

      {!intakeMode && (
        <div className="drv-pulse">
          <h5>Driver picture (live)</h5>
          {persona.drivers.map(d => (
            <div className="drv-row" key={d.code}>
              <span className="code" style={{color: `var(--drv-${drvMap[d.code].cls})`}}>{d.code}</span>
              <span className="meter"><i style={{width: `${d.weight*100}%`, background: `var(--drv-${drvMap[d.code].cls})`}}/></span>
              <span className="pct">{Math.round(d.weight*100)}</span>
            </div>
          ))}
        </div>
      )}

      <div className="note">
        <div className="eyebrow">In your own words</div>
        <div className="quote">"{persona.priorities[0]}"</div>
      </div>
    </div>
  );
}

// SCREEN 1 — Intake (conversational)
function CvIntake({ persona, density }) {
  const isJ = persona.id === "jordan";
  return (
    <div className="cv" data-density={density}>
      <CvBar persona={persona} current={0} crumbs={["Intake", "Synthesis", "Health Story", "Action Plan", "Care Team"]} />
      <div className="cv-main">
        <div className="cv-thread">
          <div className="stream">
            <div className="session-mark">Today · {isJ ? "10:42 am" : "2:15 pm"}</div>

            <div className="bub them">
              <div className="from">Lena · your educator</div>
              Welcome, {persona.name}. We've got the basics from your intake form already — what I'd love to do now is fill in the texture in your own words. Sound okay?
            </div>

            <div className="bub me">that works</div>

            <div className="bub them">
              You mentioned three things mattered most to you right now: <b>{persona.priorities[0]}, {persona.priorities[1]},</b> and <b>{persona.priorities[2]}</b>. Did I get those right, or has the order shifted in the last week?
            </div>

            <div className="bub me">order is right. the {isJ ? "fatigue" : "dizziness"} has gotten worse</div>

            <div className="bub them note">
              <div className="from">a quick check-in</div>
              Thanks for telling me. I'm going to ask a few things that get at what your body is doing — they're meant to feel ordinary, not clinical. <em>If a question doesn't fit, just say so and we'll skip it.</em>
            </div>

            <div className="bub them">
              When you wake up in the morning — first ten minutes, before coffee — how does your body feel? Pick whichever fits, or write your own.
            </div>

            <div className="chips-tray">
              <span className="opt on">heavy / weighed down</span>
              <span className="opt on">{isJ ? "stiff & sore" : "head-rushy when I sit up"}</span>
              <span className="opt">already tired</span>
              <span className="opt on">{isJ ? "foggy" : "racing heart"}</span>
              <span className="opt">okay-ish</span>
              <span className="opt">good</span>
            </div>
          </div>

          <div className="composer">
            <div className="field"><span className="ghost">Write back — or pick from above…</span></div>
            <button className="send">Send <span style={{fontFamily:'var(--font-mono)'}}>↵</span></button>
            <div className="meta"><span>auto-saving · end-to-end encrypted</span><span>~12 min in · ~20 min to go</span></div>
          </div>
        </div>
        <CvSidePanel persona={persona} intakeMode={true} />
      </div>
    </div>
  );
}

// SCREEN 2 — Health Story (conversational reveal)
function CvStory({ persona, density, depth }) {
  const isJ = persona.id === "jordan";
  return (
    <div className="cv" data-density={density}>
      <CvBar persona={persona} current={2} crumbs={["Intake", "Synthesis", "Health Story", "Action Plan", "Care Team"]} />
      <div className="cv-main">
        <div className="cv-thread">
          <div className="stream">
            <div className="session-mark">Synthesis · ready to walk through</div>

            <div className="bub them">
              <div className="from">Lena</div>
              I've finished going through what you sent and what we talked about. Want me to walk you through it — or skip to what to do about it?
            </div>

            <div className="bub me">walk me through it</div>

            <div className="bub them long">
              <h4>Here's the picture, in one paragraph.</h4>
              <p>
                {isJ
                  ? <>You came in with three diagnoses and a question nobody had answered: <em>why does it all feel connected?</em> The short version is — your instinct is right. Two drivers are doing most of the work: <span className="leads"><span className="dchip inf"><span className="ddot"/>INF</span><span className="dchip cep"><span className="ddot"/>CEP</span></span>. The autoimmune burden of Hashimoto's and the inflammatory signature of MDD and fibromyalgia all pour into the same cytokine pool, and that pool is what's affecting your mitochondria. <b>That's why the fatigue persists even though your TSH reads normal.</b></>
                  : <>You came in with three names you've been told <em>might</em> be the answer. Here's the integrated picture: your providers are each looking at one expression of <b>one upstream pattern</b>. Two drivers are running the show — <span className="leads"><span className="dchip inf"><span className="ddot"/>INF</span><span className="dchip csr"><span className="ddot"/>CSR</span></span>. Mast cell activation explains the flushes and the GI reactivity. Autonomic dysregulation explains the dizziness, the heart-rate jumps, and a lot of what's being called anxiety.</>
                }
              </p>
            </div>

            <div className="bub me">why was nobody else telling me this</div>

            <div className="bub them">
              The honest answer: your providers are each excellent in their lane, and nobody's job description includes the integration. The endocrinologist watches TSH. The {isJ ? "psychiatrist" : "cardiologist"} watches {isJ ? "mood" : "rhythm"}. The {isJ ? "rheumatologist" : "allergist"} watches {isJ ? "pain" : "reactions"}. The connective story is the gap.
            </div>

            {depth !== "plain" && (
              <div className="bub them">
                If you want, I can show you the mechanism behind each driver — or the evidence — when you're ready. We don't have to do that today.
              </div>
            )}

            <div className="chips-tray">
              <span className="opt">show me the mechanism</span>
              <span className="opt">what does this mean for {isJ ? 'my meds' : 'the EDS workup'}</span>
              <span className="opt">i need a minute</span>
              <span className="opt on">go to what to do →</span>
            </div>
          </div>

          <div className="composer">
            <div className="field"><span className="ghost">Ask anything — or pick a follow-up above…</span></div>
            <button className="send">Send <span style={{fontFamily:'var(--font-mono)'}}>↵</span></button>
            <div className="meta"><span>this whole thread is yours · downloadable any time</span><span>session 2 · 18 min</span></div>
          </div>
        </div>
        <CvSidePanel persona={persona} intakeMode={false} />
      </div>
    </div>
  );
}

// SCREEN 3 — Action Plan (conversational agreements)
function CvPlan({ persona, density }) {
  const ldata = window.LEVERS;
  const starts = persona.levers.filter(l => l.tier === "start");
  const builds = persona.levers.filter(l => l.tier === "build");

  return (
    <div className="cv" data-density={density}>
      <CvBar persona={persona} current={3} crumbs={["Intake", "Synthesis", "Health Story", "Action Plan", "Care Team"]} />
      <div className="cv-main">
        <div className="cv-thread">
          <div className="stream">
            <div className="session-mark">What we agreed on today</div>

            <div className="bub them">
              <div className="from">Lena</div>
              Here's what we landed on. <b>Two things to start with — pick whichever feels easier first.</b> The rest is for later weeks; we'll come back to it together.
            </div>

            <div className="tier-strip start">Start here · this week</div>

            {starts.map(l => (
              <div className="bub them" style={{padding: 0, background: 'transparent', border: 'none', maxWidth: '78%'}} key={l.key}>
                <div className="plan-card">
                  <div className="pc-h">
                    <div className="t">{l.title}</div>
                    <div className="why">{l.why}</div>
                  </div>
                  <div className="pc-c">{l.copy}</div>
                  <div className="pc-actions">
                    <button className="pc-btn primary"><span className="glyph">✓</span> I'll start with this</button>
                    <button className="pc-btn">remind me</button>
                    <button className="pc-btn">why this works</button>
                  </div>
                </div>
              </div>
            ))}

            <div className="bub me">starting with the {persona.id === 'jordan' ? 'sleep one' : 'sodium'}. the other is going to be harder</div>

            <div className="bub them">
              Honest answer welcome. {persona.id === 'jordan' ? "Sleep is also the higher-leverage one for the inflammation that's driving the pain. Smart pick." : "Sodium is the right first move — the other will be easier in a few weeks once you've stabilized."}
            </div>

            <div className="tier-strip build">Build toward · weeks 3–6</div>

            {builds.slice(0, 2).map(l => (
              <div className="bub them" style={{padding: 0, background: 'transparent', border: 'none', maxWidth: '78%'}} key={l.key}>
                <div className="plan-card" style={{opacity: 0.85}}>
                  <div className="pc-h">
                    <div className="t">{l.title}</div>
                    <div className="why">{l.why}</div>
                  </div>
                  <div className="pc-c">{l.copy}</div>
                </div>
              </div>
            ))}

            <div className="chips-tray">
              <span className="opt on">save & finish</span>
              <span className="opt">add a check-in next week</span>
              <span className="opt">share with my care team</span>
            </div>
          </div>

          <div className="composer">
            <div className="field"><span className="ghost">Anything you want to add or change?</span></div>
            <button className="send">Send <span style={{fontFamily:'var(--font-mono)'}}>↵</span></button>
            <div className="meta"><span>this plan belongs to you · update any time</span><span>session 2 · 34 min</span></div>
          </div>
        </div>
        <CvSidePanel persona={persona} intakeMode={false} />
      </div>
    </div>
  );
}

// SCREEN 4 — Care Team Companion (clinical doc + thread context shown)
function CvCtc({ persona, density }) {
  const drvMap = window.DRIVERS;
  return (
    <div className="cv-ctc" data-density={density}>
      <div className="cv-ctc-thread">
        <div className="hdr">
          <div className="lab">Conversation excerpts · context for the clinician</div>
          <div className="t">{persona.name} · {persona.age} · sessions 1–2</div>
        </div>
        <div className="body">
          <div className="bub me">{persona.priorities[0]}</div>
          <div className="bub them"><div className="from">Lena</div>How long has that been the most prominent symptom?</div>
          <div className="bub me">{persona.id === 'jordan' ? "years now. nothing I do touches it" : "since covid, basically. worse the last 6 months"}</div>
          <div className="bub them"><div className="from">Lena</div>And when you say "exhausted" — is it more like {persona.id === 'jordan' ? "your battery is empty, or like your body is heavy?" : "your body is heavy, or your brain shuts down?"}</div>
          <div className="bub me">{persona.id === 'jordan' ? "heavy. like I'm wearing weights" : "both. brain is the worse part"}</div>
          <div className="more">↓ 47 more turns in this session · open full transcript</div>
        </div>
      </div>

      <div className="cv-ctc-doc">
        <div className="doc-hdr">
          <div>
            <h1>Care Team Companion · Clinical</h1>
            <div className="sub">{persona.name}, {persona.age} · {persona.conditions.join(" · ")}</div>
          </div>
          <div className="meta">v1.0 · {persona.id === "jordan" ? "May 21, 2026" : "May 18, 2026"}<br/><b>Reviewed: L. Maren, NBC-HWC</b></div>
        </div>

        <div className="syn-bar">
          <h4>Cross-condition synthesis · one paragraph</h4>
          {persona.id === "jordan"
            ? <>Driver picture is dominated by <b>DRV-INF</b> + <b>DRV-CEP</b>, with secondary <b>DRV-CSR</b> explaining the affective component. Persistent mitochondrial dysfunction independent of TSH normalization (<em>2025 euthyroid Hashimoto's metabolic trial</em>) is the most likely mechanism for refractory fatigue. Recommend coordinating leverage points with psychiatry and endocrinology.</>
            : <>Pattern consistent with documented <b>EDS / POTS / MCAS</b> comorbidity cluster. Mast cell mediators (<b>DRV-INF</b>) + autonomic dysregulation (<b>DRV-CSR</b>) are leads; mitochondrial impairment is downstream. Anxiety component has measurable autonomic basis. Recommend referrals to geneticist (EDS workup) and dysautonomia clinic.</>
          }
        </div>

        <div>
          <h4 style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.1em', color:'var(--bf-muted)', fontWeight:700, marginBottom:8}}>Driver activation</h4>
          <div className="drv-grid">
            {persona.drivers.map(d => {
              const cls = drvMap[d.code].cls;
              return (
                <div className="drv-tile" key={d.code} style={{borderTopColor: `var(--drv-${cls})`}}>
                  <div className="code" style={{color: `var(--drv-${cls})`}}>{d.code}{d.hub ? ' · HUB' : ''}</div>
                  <div className="state">{d.state}</div>
                  <div className="meter"><i style={{width: `${d.weight*100}%`, background: `var(--drv-${cls})`}}/></div>
                </div>
              );
            })}
          </div>
        </div>

        <div className="lever-bar">
          <h4>Lead leverage points (next 4 weeks)</h4>
          {persona.levers.filter(l => l.tier === 'start' || l.tier === 'build').map(l => (
            <div className="row" key={l.key}>
              <span className="tag">{l.tier}</span>
              <span><span className="lab">{l.title}</span></span>
              <span className="why">{l.why}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function injectConvoStyles() {
  if (document.getElementById("convo-styles")) return;
  const el = document.createElement("style");
  el.id = "convo-styles";
  el.textContent = convoStyles;
  document.head.appendChild(el);
}
injectConvoStyles();

Object.assign(window, { CvIntake, CvStory, CvPlan, CvCtc });
