// 病例训练会话页 — 核心页面 多智能体协作
// 移动端 + 桌面端

const SessionMobile = ({ onNav }) => {
  const [step, setStep] = React.useState(1);
  const [showAgents, setShowAgents] = React.useState(false);
  const [input, setInput] = React.useState('');

  const messages = [
    { from: 'sys', text: '病例已加载 · 32 岁女性 · 右下后牙自发痛 3 天' },
    { from: 'patient', name: '虚拟患者 · 王女士', text: '医生你好,我这右下边的牙最近三天疼得厉害,晚上痛醒好几次,冷热刺激更难受。' },
    { from: 'me', text: '请问疼痛是持续性的还是一阵一阵的?有没有放射到耳朵或者太阳穴?' },
    { from: 'patient', name: '虚拟患者 · 王女士', text: '一阵一阵的,有时候会放射到右边耳朵下面。咬东西的时候特别疼,不敢用这边吃饭。' },
    { from: 'agent', agent: '小研究员', icon: 'microscope', text: '已为你检索到 2 篇 2024 高质量文献:咬合痛 + 自发痛 + 夜间加重 → 急性根尖周炎可能性 ↑', refs: ['Endod J 2024', 'JADA 2024'] },
    { from: 'me', text: '我希望先看看口内检查与影像。' },
    { from: 'sys', kind: 'asset', text: '已调出:口内照片 · 根尖片 · 牙髓活力测试结果' },
  ];

  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: 'var(--ink-50)' }}>
      <MobileTopBar
        title="急性根尖周炎"
        subtitle="32岁女性 · 步骤 3/7"
        left={<Icon name="arrowLeft" size={20} onClick={() => onNav('training')}/>}
        right={<Icon name="more" size={20}/>}
      />
      {/* 协作智能体栏 */}
      <div style={{
        padding: '10px 14px', background: 'white', borderBottom: '1px solid var(--border)',
        display: 'flex', alignItems: 'center', gap: 8, overflowX: 'auto',
      }} className="mh-scroll">
        {[
          { name: '虚拟患者', icon: 'user', status: 'active', tone: 'amber' },
          { name: '导师', icon: 'graduationCap', status: 'idle', tone: 'blue' },
          { name: '小研究员', icon: 'microscope', status: 'pending', tone: 'teal' },
          { name: '考官', icon: 'shield', status: 'idle', tone: 'ink' },
        ].map((a, i) => (
          <div key={i} style={{
            flexShrink: 0, padding: '4px 9px 4px 4px', borderRadius: 999,
            background: 'var(--ink-100)', display: 'flex', alignItems: 'center', gap: 6,
          }}>
            <div style={{
              width: 22, height: 22, borderRadius: '50%',
              background: a.tone === 'amber' ? 'var(--amber-100)' : a.tone === 'blue' ? 'var(--blue-100)' : a.tone === 'teal' ? 'var(--teal-100)' : 'var(--ink-200)',
              color: a.tone === 'amber' ? 'var(--amber-700)' : a.tone === 'blue' ? 'var(--blue-700)' : a.tone === 'teal' ? 'var(--teal-700)' : 'var(--ink-700)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon name={a.icon} size={12}/>
            </div>
            <span style={{ fontSize: 11, fontWeight: 500 }}>{a.name}</span>
            <AgentDot status={a.status}/>
          </div>
        ))}
      </div>

      {/* 消息流 */}
      <div className="mh-scroll" style={{ flex: 1, overflowY: 'auto', padding: '14px 14px 4px', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {messages.map((m, i) => {
          if (m.from === 'sys') {
            if (m.kind === 'asset') {
              return (
                <div key={i} className="mh-card" style={{ padding: 12 }}>
                  <div style={{ fontSize: 10.5, color: 'var(--ink-500)', marginBottom: 8, display: 'flex', alignItems: 'center', gap: 4 }}>
                    <Icon name="paperclip" size={11}/>系统调取病例资料
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                    <ImagePlaceholder height={70} label="口内照" tone="dark" icon="image"/>
                    <ImagePlaceholder height={70} label="根尖片" tone="dark" icon="layers"/>
                  </div>
                  <div style={{ marginTop: 8, padding: 8, background: 'var(--ink-100)', borderRadius: 8, fontSize: 11 }}>
                    <div style={{ fontWeight: 600, marginBottom: 4 }}>牙髓活力测试 · #46</div>
                    <div style={{ color: 'var(--ink-700)', lineHeight: 1.6 }}>冷诊:剧烈疼痛,延迟缓解 · 热诊:加重 · 叩诊:(++) · 松动:I°</div>
                  </div>
                </div>
              );
            }
            return (
              <div key={i} style={{ alignSelf: 'center', fontSize: 11, color: 'var(--ink-500)', padding: '4px 12px', background: 'var(--ink-100)', borderRadius: 999 }}>{m.text}</div>
            );
          }
          if (m.from === 'me') {
            return (
              <div key={i} style={{ alignSelf: 'flex-end', maxWidth: '78%' }}>
                <div style={{
                  background: 'var(--blue-500)', color: 'white',
                  padding: '8px 12px', borderRadius: '14px 14px 4px 14px',
                  fontSize: 13, lineHeight: 1.55,
                }}>{m.text}</div>
              </div>
            );
          }
          if (m.from === 'patient') {
            return (
              <div key={i} style={{ display: 'flex', gap: 8, maxWidth: '85%' }}>
                <Avatar name="王" size={28} color="linear-gradient(135deg, #efbb6e, #d68a2b)"/>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 10.5, color: 'var(--ink-500)', marginBottom: 3 }}>{m.name}</div>
                  <div style={{
                    background: 'white', border: '1px solid var(--border)',
                    padding: '8px 12px', borderRadius: '4px 14px 14px 14px',
                    fontSize: 13, lineHeight: 1.55,
                  }}>{m.text}</div>
                </div>
              </div>
            );
          }
          if (m.from === 'agent') {
            return (
              <div key={i} style={{ display: 'flex', gap: 8, maxWidth: '90%' }}>
                <div style={{ width: 28, height: 28, borderRadius: '50%', background: 'var(--teal-100)', color: 'var(--teal-700)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <Icon name={m.icon} size={14}/>
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 10.5, color: 'var(--teal-700)', marginBottom: 3, fontWeight: 600 }}>{m.agent}</div>
                  <div style={{
                    background: 'var(--teal-50)', border: '1px solid var(--teal-100)',
                    padding: '8px 12px', borderRadius: '4px 14px 14px 14px',
                    fontSize: 12.5, lineHeight: 1.55, color: 'var(--ink-800)',
                  }}>
                    {m.text}
                    {m.refs && (
                      <div style={{ display: 'flex', gap: 4, marginTop: 6, flexWrap: 'wrap' }}>
                        {m.refs.map((r, j) => <span key={j} className="mh-chip" style={{ fontSize: 10, background: 'white', border: '1px solid var(--teal-100)', color: 'var(--teal-700)' }}>{r}</span>)}
                      </div>
                    )}
                  </div>
                </div>
              </div>
            );
          }
        })}

        {/* 幻觉拦截示例 */}
        <div style={{
          padding: 10, background: 'var(--red-50)', border: '1px solid var(--red-100)',
          borderRadius: 10, display: 'flex', gap: 8,
        }}>
          <Icon name="warning" size={14} color="var(--red-500)"/>
          <div style={{ flex: 1, fontSize: 11.5, color: 'var(--red-700)', lineHeight: 1.55 }}>
            <strong>幻觉拦截</strong>:你提到「该患者牙髓已坏死」,但活力测试为<strong>剧烈反应</strong>,与牙髓坏死矛盾。请重新确认。
          </div>
        </div>
      </div>

      {/* 步骤进度 + 输入 */}
      <div style={{ background: 'white', borderTop: '1px solid var(--border)', padding: '10px 14px 12px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginBottom: 10 }}>
          {['采集', '检查', '诊断', '鉴别', '处方', '医嘱', '小结'].map((s, i) => {
            const cur = i === 2;
            const done = i < 2;
            return (
              <React.Fragment key={i}>
                <div style={{
                  flex: 1, height: 3, borderRadius: 2,
                  background: done ? 'var(--blue-500)' : cur ? 'var(--blue-300)' : 'var(--ink-200)',
                }}/>
              </React.Fragment>
            );
          })}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <button style={{ width: 32, height: 32, border: 'none', background: 'var(--ink-100)', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon name="paperclip" size={15} color="var(--ink-700)"/>
          </button>
          <input className="mh-input" placeholder="给出你的诊断或下一步…" style={{ flex: 1 }}/>
          <button style={{ width: 32, height: 32, border: 'none', background: 'var(--blue-500)', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>
            <Icon name="send" size={15} color="white"/>
          </button>
        </div>
      </div>
    </div>
  );
};

const SessionDesktop = ({ onNav }) => {
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', background: 'var(--ink-50)', minWidth: 0 }}>
      <DesktopTopBar
        title="急性根尖周炎"
        breadcrumb="病例训练场 · 牙体牙髓"
        right={
          <>
            <button className="mh-btn mh-btn-ghost"><Icon name="bookmark" size={14}/>收藏</button>
            <button className="mh-btn mh-btn-secondary"><Icon name="flag" size={14}/>提交诊断</button>
          </>
        }
      />
      <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '260px 1fr 320px', gap: 0, minHeight: 0 }}>
        {/* 左:病例侧栏 */}
        <aside className="mh-scroll" style={{ background: 'white', borderRight: '1px solid var(--border)', overflowY: 'auto', padding: 16 }}>
          <div style={{ fontSize: 10.5, color: 'var(--ink-500)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600 }}>主诉</div>
          <div style={{ fontSize: 12.5, marginTop: 4, lineHeight: 1.6 }}>右下后牙自发痛 3 天,夜间加重,影响睡眠</div>

          <div style={{ marginTop: 14, fontSize: 10.5, color: 'var(--ink-500)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600 }}>基本信息</div>
          <div style={{ marginTop: 6, fontSize: 11.5, lineHeight: 1.9 }}>
            <div>女 · 32 岁 · 教师</div>
            <div>无系统疾病史</div>
            <div>过敏史:磺胺类</div>
          </div>

          <hr className="mh-divider" style={{ margin: '14px 0' }}/>
          <div style={{ fontSize: 10.5, color: 'var(--ink-500)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600 }}>已采集资料</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 8 }}>
            {[
              { i: 'image', t: '口内照片 · 6 张', d: '已查看' },
              { i: 'layers', t: '根尖片 #46', d: '已查看' },
              { i: 'pulse', t: '牙髓活力测试', d: '已查看' },
              { i: 'fileText', t: '冷热诊记录', d: '已查看' },
              { i: 'eye', t: '全景片', d: '未查看', dim: true },
            ].map((a, i) => (
              <div key={i} style={{ display: 'flex', gap: 8, alignItems: 'center', padding: 6, borderRadius: 6, background: a.dim ? 'transparent' : 'var(--blue-50)' }}>
                <Icon name={a.i} size={14} color={a.dim ? 'var(--ink-400)' : 'var(--blue-600)'}/>
                <span style={{ flex: 1, fontSize: 12, color: a.dim ? 'var(--ink-500)' : 'var(--ink-800)' }}>{a.t}</span>
                <span style={{ fontSize: 10, color: 'var(--ink-500)' }}>{a.d}</span>
              </div>
            ))}
          </div>

          <hr className="mh-divider" style={{ margin: '14px 0' }}/>
          <div style={{ fontSize: 10.5, color: 'var(--ink-500)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600, marginBottom: 8 }}>训练目标</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {[
              { t: '完成结构化问诊', done: true },
              { t: '影像与活力测试解读', done: true },
              { t: '给出主要诊断', done: false, cur: true },
              { t: '至少 2 项鉴别诊断', done: false },
              { t: '处方与急诊处理', done: false },
            ].map((g, i) => (
              <div key={i} style={{ display: 'flex', gap: 8, alignItems: 'center', fontSize: 11.5 }}>
                <div style={{
                  width: 14, height: 14, borderRadius: '50%',
                  background: g.done ? 'var(--teal-500)' : g.cur ? 'var(--blue-500)' : 'transparent',
                  border: g.done || g.cur ? 'none' : '1.5px solid var(--ink-300)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  {g.done && <Icon name="check" size={9} color="white" strokeWidth={3}/>}
                  {g.cur && <span style={{ width: 4, height: 4, borderRadius: '50%', background: 'white' }}/>}
                </div>
                <span style={{ color: g.done ? 'var(--ink-500)' : 'var(--ink-800)', textDecoration: g.done ? 'line-through' : 'none', flex: 1 }}>{g.t}</span>
              </div>
            ))}
          </div>
        </aside>

        {/* 中:对话主区 */}
        <section style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
          {/* 智能体协作栏 */}
          <div style={{
            padding: '10px 18px', background: 'white', borderBottom: '1px solid var(--border)',
            display: 'flex', alignItems: 'center', gap: 16,
          }}>
            <span style={{ fontSize: 11, color: 'var(--ink-500)', fontWeight: 600 }}>协作智能体</span>
            {[
              { name: '虚拟患者', icon: 'user', status: 'active', tone: 'amber', sub: '王女士 · 32y' },
              { name: '导师', icon: 'graduationCap', status: 'idle', tone: 'blue', sub: '观察中' },
              { name: '小研究员', icon: 'microscope', status: 'pending', tone: 'teal', sub: '检索中' },
              { name: '考官', icon: 'shield', status: 'idle', tone: 'ink', sub: '评分中' },
            ].map((a, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <div style={{
                  width: 26, height: 26, borderRadius: '50%',
                  background: a.tone === 'amber' ? 'var(--amber-100)' : a.tone === 'blue' ? 'var(--blue-100)' : a.tone === 'teal' ? 'var(--teal-100)' : 'var(--ink-200)',
                  color: a.tone === 'amber' ? 'var(--amber-700)' : a.tone === 'blue' ? 'var(--blue-700)' : a.tone === 'teal' ? 'var(--teal-700)' : 'var(--ink-700)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <Icon name={a.icon} size={14}/>
                </div>
                <div>
                  <div style={{ fontSize: 12, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 5 }}>
                    {a.name}<AgentDot status={a.status}/>
                  </div>
                  <div style={{ fontSize: 10, color: 'var(--ink-500)' }}>{a.sub}</div>
                </div>
              </div>
            ))}
            <div style={{ flex: 1 }}/>
            <button className="mh-btn mh-btn-ghost mh-btn-sm"><Icon name="plus" size={11}/>添加</button>
          </div>

          {/* 消息流 */}
          <div className="mh-scroll" style={{ flex: 1, overflowY: 'auto', padding: '20px 32px', display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div style={{ alignSelf: 'center', fontSize: 11, color: 'var(--ink-500)', padding: '4px 14px', background: 'white', border: '1px solid var(--border)', borderRadius: 999 }}>
              病例已加载 · 14:32 开始
            </div>
            {/* 患者 */}
            <div style={{ display: 'flex', gap: 12, maxWidth: 620 }}>
              <Avatar name="王" size={32} color="linear-gradient(135deg, #efbb6e, #d68a2b)"/>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 11, color: 'var(--ink-500)', marginBottom: 4 }}>虚拟患者 · 王女士</div>
                <div style={{ background: 'white', border: '1px solid var(--border)', padding: '10px 14px', borderRadius: '4px 12px 12px 12px', fontSize: 13.5, lineHeight: 1.65 }}>
                  医生你好,我这右下边的牙最近三天疼得厉害,晚上痛醒好几次,冷热刺激更难受。
                </div>
              </div>
            </div>

            {/* 我 */}
            <div style={{ alignSelf: 'flex-end', maxWidth: 620 }}>
              <div style={{ background: 'var(--blue-500)', color: 'white', padding: '10px 14px', borderRadius: '12px 12px 4px 12px', fontSize: 13.5, lineHeight: 1.65 }}>
                请问疼痛是持续性还是阵发性?有没有放射到耳朵或太阳穴?既往这颗牙是否做过修复?
              </div>
            </div>

            <div style={{ display: 'flex', gap: 12, maxWidth: 620 }}>
              <Avatar name="王" size={32} color="linear-gradient(135deg, #efbb6e, #d68a2b)"/>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 11, color: 'var(--ink-500)', marginBottom: 4 }}>虚拟患者 · 王女士</div>
                <div style={{ background: 'white', border: '1px solid var(--border)', padding: '10px 14px', borderRadius: '4px 12px 12px 12px', fontSize: 13.5, lineHeight: 1.65 }}>
                  阵发性的,会放射到右耳下方。咬东西特别疼,半年前那颗牙补过一次。
                </div>
              </div>
            </div>

            {/* 小研究员 */}
            <div style={{ display: 'flex', gap: 12, maxWidth: 660 }}>
              <div style={{ width: 32, height: 32, borderRadius: '50%', background: 'var(--teal-100)', color: 'var(--teal-700)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name="microscope" size={16}/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 11, color: 'var(--teal-700)', fontWeight: 600, marginBottom: 4 }}>小研究员 · 文献支持</div>
                <div style={{ background: 'var(--teal-50)', border: '1px solid var(--teal-100)', padding: '10px 14px', borderRadius: '4px 12px 12px 12px', fontSize: 13, lineHeight: 1.65, color: 'var(--ink-800)' }}>
                  根据你目前的问诊,关键词「自发痛+咬合痛+夜间加重+既往修复」最匹配 <strong>急性根尖周炎</strong>。已为你检索到 2 篇 2024 高质量文献,要打开吗?
                  <div style={{ display: 'flex', gap: 6, marginTop: 8 }}>
                    <span className="mh-chip" style={{ fontSize: 10.5, background: 'white', border: '1px solid var(--teal-100)', color: 'var(--teal-700)' }}>Endod J 2024</span>
                    <span className="mh-chip" style={{ fontSize: 10.5, background: 'white', border: '1px solid var(--teal-100)', color: 'var(--teal-700)' }}>JADA 2024</span>
                  </div>
                </div>
              </div>
            </div>

            {/* 资料调取卡 */}
            <div className="mh-card" style={{ padding: 14, maxWidth: 660, alignSelf: 'flex-start' }}>
              <div style={{ fontSize: 11, color: 'var(--ink-500)', marginBottom: 10, display: 'flex', alignItems: 'center', gap: 4 }}>
                <Icon name="paperclip" size={11}/>系统调取 · 病例资料
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
                <ImagePlaceholder height={92} label="口内照" tone="dark" icon="image"/>
                <ImagePlaceholder height={92} label="根尖片 #46" tone="dark" icon="layers"/>
                <ImagePlaceholder height={92} label="全景片" tone="dark" icon="eye"/>
              </div>
              <div style={{ marginTop: 10, padding: 10, background: 'var(--ink-100)', borderRadius: 8, fontSize: 12, lineHeight: 1.7 }}>
                <strong>牙髓活力测试 · #46:</strong>冷诊剧烈疼痛延迟缓解 · 热诊加重 · 叩诊(++) · 松动 I° · 牙龈轻度红肿
              </div>
            </div>

            {/* 幻觉拦截 */}
            <div style={{ alignSelf: 'flex-end', maxWidth: 620 }}>
              <div style={{ background: 'var(--blue-500)', color: 'white', padding: '10px 14px', borderRadius: '12px 12px 4px 12px', fontSize: 13.5, lineHeight: 1.65 }}>
                我倾向于诊断为牙髓坏死,准备开髓引流。
              </div>
            </div>
            <div style={{ maxWidth: 660, padding: 12, background: 'var(--red-50)', border: '1px solid var(--red-100)', borderRadius: 12, display: 'flex', gap: 10 }}>
              <div style={{ width: 26, height: 26, borderRadius: '50%', background: 'var(--red-100)', color: 'var(--red-700)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <Icon name="warning" size={14}/>
              </div>
              <div style={{ flex: 1, fontSize: 12.5, color: 'var(--red-700)', lineHeight: 1.6 }}>
                <strong>导师拦截 · 思维偏差</strong><br/>
                活力测试为<strong>剧烈反应延迟缓解</strong>,与「牙髓坏死」矛盾。建议重新考虑诊断方向(急性牙髓炎 vs 急性根尖周炎),并对照《牙体牙髓病学》第 5 章诊断流程。
                <div style={{ display: 'flex', gap: 6, marginTop: 8 }}>
                  <button className="mh-btn mh-btn-sm" style={{ background: 'white', color: 'var(--red-700)', border: '1px solid var(--red-100)' }}>查看诊断流程</button>
                  <button className="mh-btn mh-btn-sm" style={{ background: 'var(--red-500)', color: 'white' }}>修正我的判断</button>
                </div>
              </div>
            </div>
          </div>

          {/* 输入栏 */}
          <div style={{ background: 'white', borderTop: '1px solid var(--border)', padding: '12px 24px 16px' }}>
            {/* 步骤进度 */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              {['采集', '检查', '诊断', '鉴别', '处方', '医嘱', '小结'].map((s, i) => {
                const cur = i === 2; const done = i < 2;
                return (
                  <React.Fragment key={i}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                      <div style={{
                        width: 18, height: 18, borderRadius: '50%',
                        background: done ? 'var(--blue-500)' : cur ? 'white' : 'var(--ink-150)',
                        border: cur ? '2px solid var(--blue-500)' : 'none',
                        display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white',
                      }}>
                        {done && <Icon name="check" size={10} strokeWidth={3}/>}
                        {cur && <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--blue-500)' }}/>}
                      </div>
                      <span style={{ fontSize: 11, color: cur ? 'var(--blue-700)' : 'var(--ink-600)', fontWeight: cur ? 600 : 400 }}>{s}</span>
                    </div>
                    {i < 6 && <div style={{ flex: 1, height: 1, background: done ? 'var(--blue-300)' : 'var(--ink-200)' }}/>}
                  </React.Fragment>
                );
              })}
            </div>
            <div style={{
              border: '1px solid var(--border)', borderRadius: 12, padding: 10,
              display: 'flex', flexDirection: 'column', gap: 8,
            }}>
              <textarea placeholder="给出你的主要诊断,以及至少 2 项鉴别诊断与依据…" style={{
                border: 'none', outline: 'none', resize: 'none',
                fontSize: 13, fontFamily: 'inherit', padding: 4, height: 56,
                background: 'transparent',
              }}/>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <button className="mh-btn mh-btn-ghost mh-btn-sm"><Icon name="paperclip" size={13}/>资料</button>
                <button className="mh-btn mh-btn-ghost mh-btn-sm"><Icon name="image" size={13}/>影像</button>
                <button className="mh-btn mh-btn-ghost mh-btn-sm"><Icon name="mic" size={13}/>语音</button>
                <button className="mh-btn mh-btn-ghost mh-btn-sm"><Icon name="lightbulb" size={13}/>提示</button>
                <div style={{ flex: 1 }}/>
                <button onClick={() => onNav('report')} className="mh-btn mh-btn-secondary mh-btn-sm">暂存</button>
                <button className="mh-btn mh-btn-primary mh-btn-sm">
                  发送 <Icon name="send" size={11}/>
                </button>
              </div>
            </div>
          </div>
        </section>

        {/* 右:实时评估 + 文献 */}
        <aside className="mh-scroll" style={{ background: 'white', borderLeft: '1px solid var(--border)', overflowY: 'auto', padding: 16 }}>
          <div style={{ fontSize: 10.5, color: 'var(--ink-500)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600 }}>实时评估</div>
          <div style={{ marginTop: 8, padding: 12, background: 'var(--blue-50)', borderRadius: 10 }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
              <span style={{ fontSize: 24, fontWeight: 700, color: 'var(--blue-700)' }}>78</span>
              <span style={{ fontSize: 11, color: 'var(--ink-500)' }}>/100 · 良好</span>
            </div>
            <div style={{ marginTop: 8, display: 'flex', flexDirection: 'column', gap: 6 }}>
              {[
                { l: '问诊完整性', v: 88 },
                { l: '检查决策', v: 82 },
                { l: '诊断准确', v: 60 },
                { l: '循证支持', v: 75 },
              ].map((p, i) => (
                <div key={i}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10.5, marginBottom: 3 }}>
                    <span style={{ color: 'var(--ink-700)' }}>{p.l}</span>
                    <strong>{p.v}</strong>
                  </div>
                  <div className="mh-progress" style={{ height: 4 }}>
                    <div className="mh-progress-fill" style={{ width: p.v + '%' }}/>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <hr className="mh-divider" style={{ margin: '14px 0' }}/>
          <div style={{ fontSize: 10.5, color: 'var(--ink-500)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600 }}>文献支持</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 8 }}>
            {[
              { t: 'Diagnosis of Apical Periodontitis: A Systematic Review', src: 'Endod J · 2024', tag: 'IF 5.4' },
              { t: '急性根尖周炎临床路径(中华口腔)', src: '中华口腔 · 2023', tag: '指南' },
            ].map((p, i) => (
              <div key={i} style={{ padding: 10, border: '1px solid var(--border)', borderRadius: 8 }}>
                <div style={{ fontSize: 12, fontWeight: 500, lineHeight: 1.5 }}>{p.t}</div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 6 }}>
                  <span style={{ fontSize: 10.5, color: 'var(--ink-500)' }}>{p.src}</span>
                  <span className="mh-chip mh-chip-blue" style={{ fontSize: 9.5 }}>{p.tag}</span>
                </div>
              </div>
            ))}
          </div>

          <hr className="mh-divider" style={{ margin: '14px 0' }}/>
          <div style={{ fontSize: 10.5, color: 'var(--ink-500)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600 }}>导师笔记</div>
          <div style={{ marginTop: 8, padding: 10, background: 'var(--amber-50)', border: '1px solid var(--amber-100)', borderRadius: 8, fontSize: 11.5, color: 'var(--amber-700)', lineHeight: 1.6 }}>
            <strong>提示</strong>:鉴别诊断时记得排除非牙源性面痛(三叉神经痛)、邻牙的牵涉痛。
          </div>
        </aside>
      </div>
    </div>
  );
};

Object.assign(window, { SessionMobile, SessionDesktop });