// bu/v8-cards.jsx — AI補助あり版：右メインの各カード
//  情報順序：確認ポイント → 本人コメント（同じまとまり）→ AIによる補助的な見方 → 詳細情報
const { Icon, Face } = window;
const { P, Q, AreaSpark, DeltaChip } = window.V4;
const { CardB, HeadB, ThreadBody, LTH } = window.V7;
const { C2, IconChip2, ChipIcons, TXT2, CommentBand2 } = window;

const NEXT8 = {
  prev: '案件切り替え後の進め方に慣れているか、キャッチアップの負担が続いていないか、困ったときの相談先が明確になっているか、資格学習の時間を確保できそうかを確認する。',
  cur: '業務時間内に設けた週1回の学習枠が実際に取れているか、次回はそこから話す。あわせて新チームでの相談のしやすさも確認したい。',
};
const DONE8 = {
  date: '2026/06/23', method: '対面 / 個別',
  report: '6月の1on1を実施。案件切り替え後のキャッチアップ状況を確認し、仕事内容満足度の低下について本人の受け止めをヒアリング。資格学習の時間確保のため、週1回の学習枠を業務時間内に設けることを合意。',
  memo: '前回より表情が明るい。学習枠の件は課長にも共有しておくこと。',
  prev: { date: '2026/05/15', method: '対面 / 個別', report: TXT2.report, memo: TXT2.memo },
};

// 見出し内の件数（注意度の色とは競合させず、中立のグレーで件数のみ）
// 見出し右の状態表示：件数（大きく太字）＋注意喚起ラベル（左カードのステータス色と同じ色）
function CheckStat({ state = 'attn', n }) {
  const t = window.V8.S8[state];
  if (state === 'nodata') {
    return (
      <span className="lbl8" style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
        <span style={{ width: 7, height: 7, borderRadius: 7, background: t.fg }}></span>
        <span style={{ fontSize: 13.5, fontWeight: 800, color: t.fg }}>{t.label}</span>
      </span>
    );
  }
  return (
    <span className="lbl8" style={{ display: 'inline-flex', alignItems: 'baseline', gap: 7 }}>
      <span className="tnum" style={{ fontSize: 25, fontWeight: 800, lineHeight: 1, color: t.fg, letterSpacing: '-.01em' }}>{n}</span>
      <span style={{ fontSize: 12.5, fontWeight: 800, color: t.fg }}>件</span>
      {t.label && (
        <>
          <span style={{ fontSize: 13, color: P.ghost, margin: '0 1px' }}>｜</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
            <span style={{ width: 7, height: 7, borderRadius: 7, background: t.fg, transform: 'translateY(-1px)' }}></span>
            <span style={{ fontSize: 13.5, fontWeight: 800, color: t.fg }}>{t.label}</span>
          </span>
        </>
      )}
    </span>
  );
}
function CountTag({ n }) {
  return <span className="tnum lbl8" style={{ fontSize: 11.5, fontWeight: 800, color: P.ink2, background: P.inset, border: `1px solid ${P.line}`, borderRadius: 999, padding: '3px 11px' }}>{n} 件</span>;
}
function CollabTag8() {
  return <span style={{ fontSize: 10, fontWeight: 700, color: P.muted, background: P.inset, border: `1px solid ${P.line}`, borderRadius: 5, padding: '2px 7px', letterSpacing: '.04em', whiteSpace: 'nowrap' }}>collab連携</span>;
}

// 前回からの引継ぎ行：前回の「次回確認したいこと」を確認ポイントの先頭に昇格。灰の○囲みinfo・既定は1行省略
function HandoffRow8({ text, last }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ display: 'flex', alignItems: open ? 'flex-start' : 'center', gap: 14, padding: '13px 0', borderBottom: last ? 'none' : `1px solid ${P.line}` }}>
      <span style={{ width: 30, height: 30, borderRadius: 9, background: '#f0f2f5', color: P.faint, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: open ? 1 : 0 }}>
        <svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><circle cx="8" cy="8" r="6.2" /><path d="M8 7.3v3.4M8 5.2h.01" /></svg>
      </span>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 14.5, fontWeight: 700, color: P.ink, lineHeight: open ? 1.8 : 1.5, textWrap: 'pretty', ...(open ? {} : { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }) }}>{text}</div>
        <button className="tlnk" onClick={() => setOpen((o) => !o)} aria-expanded={open} style={{ fontSize: 11.5, marginTop: open ? 7 : 5 }}>{open ? '折りたたむ' : 'すべて表示'}</button>
      </div>
      <span className="lbl8" style={{ fontSize: 11.5, fontWeight: 700, color: P.faint, letterSpacing: '.03em', whiteSpace: 'nowrap', marginTop: open ? 6 : 0 }}>前回からの引継ぎ</span>
    </div>
  );
}

// 確認ポイント行（案B改の行構造を維持。色は「変化の向き」のみを示す）
function CheckRow8({ item, idx, last }) {
  const border = last ? 'none' : `1px solid ${P.line}`;
  if (item.kind === 'signal') {
    const isDays = item.reason.includes('未実施');
    const positive = /上昇|改善|向上|回復/.test(item.reason);
    const tone = positive ? C2.up : C2.down;
    const bg = positive ? C2.upBg : C2.downBg;
    return (
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '13px 0', borderBottom: border }}>
        <IconChip2 tone={tone} bg={bg}>{isDays ? ChipIcons.calendar : ChipIcons.doc}</IconChip2>
        <span style={{ flex: 1, minWidth: 0, fontSize: 14.5, fontWeight: 700, color: P.ink }}>{item.q}</span>
        {item.src === 'collab' && <CollabTag8 />}
        <span className="tnum" style={{ fontSize: 11.5, fontWeight: 700, color: tone, letterSpacing: '.03em', whiteSpace: 'nowrap' }}>{isDays ? '1on1未実施期間' : item.reason}</span>
      </div>
    );
  }
  const delta = item.cur - item.prev;
  const tone = delta < 0 ? C2.down : C2.up;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '13px 0', borderBottom: border }}>
      <IconChip2 tone={tone} bg={delta < 0 ? C2.downBg : C2.upBg}>{delta < 0 ? ChipIcons.trendDown : ChipIcons.trendUp}</IconChip2>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 15.5, fontWeight: 800, color: P.ink, letterSpacing: '.01em' }}>{item.q}</div>
        <div style={{ fontSize: 11.5, fontWeight: 700, color: tone, letterSpacing: '.03em', marginTop: 4 }}>{item.reason}</div>
      </div>
      <AreaSpark data={item.hist} color={tone} w={84} h={30} id={`v8cp${idx}`} />
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, width: 100, justifyContent: 'flex-end' }}>
        <span className="tnum" style={{ fontSize: 14, color: P.faint, fontWeight: 600 }}>{item.prev}</span>
        <span style={{ color: P.faint, fontSize: 12 }}>→</span>
        <span className="tnum" style={{ fontSize: 27, fontWeight: 800, lineHeight: 1, color: tone }}>{item.cur}</span>
      </div>
      <div style={{ width: 52, display: 'flex', justifyContent: 'flex-end' }}><DeltaChip delta={delta} /></div>
    </div>
  );
}

// 確認ポイントの見出しタブ（D＋I-6 ・ L-1 #2b3446）：カード上辺に乗せる濃色ラベル
const TAB8_BG = '#2b3446';
const TAB8_ON = { attn: '#f0d99a', follow: '#f2b8c2', plain: null, nodata: '#c6ccd6' };
function TabCheck8({ title, state = 'attn', n, nodata = false }) {
  const st = nodata ? 'nodata' : state;
  const t = window.V8.S8[st];
  const accent = TAB8_ON[st];
  return (
    <span style={{ background: TAB8_BG, borderRadius: 12, boxShadow: '0 4px 10px -5px rgba(18,22,30,.3)', display: 'inline-flex', alignItems: 'center', gap: 16, padding: '13px 26px 14px' }}>
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 9 }}>
        <svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true" style={{ display: 'block', flexShrink: 0 }}>
          <path d="M4.4 12.6l5 5L19.8 6.6" stroke="#fff" strokeWidth="2.4" fill="none" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
        <span style={{ fontSize: 16, fontWeight: 800, color: '#fff', letterSpacing: '.1em', whiteSpace: 'nowrap' }}>{title}</span>
      </span>
      {!nodata && <>
        <span style={{ width: 1, height: 19, background: 'rgba(255,255,255,.26)' }}></span>
        <span className="tnum" style={{ display: 'inline-flex', alignItems: 'baseline', gap: 1, color: '#fff' }}>
          <span style={{ fontSize: 20, fontWeight: 800, lineHeight: 1, letterSpacing: '-.01em' }}>{n}</span>
          <span style={{ fontSize: 13, fontWeight: 800 }}>件</span>
        </span>
      </>}
      {t.label && accent && <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
        {!nodata && <span style={{ width: 8, height: 8, borderRadius: 8, background: accent }}></span>}
        <span style={{ fontSize: 14, fontWeight: 800, color: accent, whiteSpace: 'nowrap' }}>{t.label}</span>
      </span>}
    </span>
  );
}

// 本人コメント帯：灰の面に白い吹き出し（確認ポイントと同じまとまりの一次情報）
function CmtBand8({ radius = 15 }) {
  return (
    <div style={{ margin: '4px -30px -20px', padding: '18px 30px 22px', background: P.inset, borderTop: `1px solid ${P.line}`, borderRadius: `0 0 ${radius}px ${radius}px` }}>
      <div style={{ fontSize: 11.5, fontWeight: 700, color: P.faint, letterSpacing: '.08em', marginBottom: 12 }}>本人コメント</div>
      <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
        <Face size={38} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ position: 'relative', background: '#fff', border: `1px solid ${P.line}`, borderRadius: '4px 14px 14px 14px', padding: '16px 20px 16px 22px' }}>
            <span aria-hidden="true" style={{ position: 'absolute', top: 4, left: 8, fontFamily: 'Georgia, serif', fontSize: 30, lineHeight: 1, color: P.ghost, opacity: .55 }}>“</span>
            <p style={{ margin: 0, fontSize: 15, lineHeight: 1.9, color: P.ink, letterSpacing: '.01em' }}>{window.TXT2.comment}</p>
          </div>
          <details style={{ marginTop: 12 }}>
            <summary className="tlnk" style={{ fontSize: 12, display: 'inline-block' }}>前回のコメントを見る</summary>
            <p style={{ margin: '10px 0 0', fontSize: 12.5, lineHeight: 1.8, color: P.muted, paddingLeft: 14, borderLeft: `2px solid ${P.line}` }}>{window.TXT2.commentPrev}</p>
          </details>
        </div>
      </div>
    </div>
  );
}

// N3 連結帯：確認ポイント（＋本人コメント）カードの下端に接続し、その続きとしてAIを置く
const PU8 = { tint: '#f6f5fd', line: '#e6e4f3', fg: '#5f5b9e', soft: '#8b87c0' };
function AiDock8({ nodata = false }) {
  return (
    <div style={{ background: PU8.tint, border: `1px solid ${PU8.line}`, borderTop: `1px solid ${PU8.line}`, borderRadius: '0 0 14px 14px', boxShadow: '0 1px 2px rgba(18,22,30,.05), 0 16px 34px -22px rgba(18,22,30,.26)', padding: '14px 30px 16px' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 2 }}>
        <span style={{ color: PU8.fg, display: 'flex' }}>
          <svg width="13" height="13" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M10 3l1.6 3.9L15.5 8.5l-3.9 1.6L10 14l-1.6-3.9L4.5 8.5l3.9-1.6L10 3z" /><path d="M15.5 13.5l.7 1.7 1.7.7-1.7.7-.7 1.7-.7-1.7-1.7-.7 1.7-.7.7-1.7z" /></svg>
        </span>
        <span className="lbl8" style={{ fontSize: 11.5, fontWeight: 800, color: PU8.fg, letterSpacing: '.1em' }}>AIからの提案</span>
      </div>
      {nodata ? (
        <div style={{ padding: '8px 0 4px' }}>
          <div style={{ fontSize: 13.5, fontWeight: 700, color: P.ink2 }}>根拠が不足しているため、今回は表示していません。</div>
          <div style={{ fontSize: 12.5, color: P.muted, marginTop: 7, lineHeight: 1.8 }}>今回のアンケートが未回答で、比較できる変化がありません。</div>
        </div>
      ) : (
        <div>{AI_VIEWS.map((v, i) => <AiView key={i} v={v} i={i} acc={PU8.soft} link={PU8.fg} />)}</div>
      )}
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 7, marginTop: 12, paddingTop: 11, borderTop: `1px solid ${PU8.line}` }}>
        <span style={{ color: P.ghost, display: 'flex', flexShrink: 0, marginTop: 1 }}>
          <svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M8 2.2l6 11.6H2z" /><path d="M8 6.4v3.2M8 11.5h.01" /></svg>
        </span>
        <span style={{ fontSize: 11, color: P.ghost, lineHeight: 1.7 }}>AIの提案は事実や評価を示すものではないため、根拠となる情報と本人との対話を踏まえてご判断ください。</span>
      </div>
    </div>
  );
}

// 確認ポイント＋本人コメント：概要と一次情報を同じまとまりで扱う（ai時は下端にAI連結帯）
function CheckCard8({ after = false, nodata = false, withComment = true, ai = false, idx = 'b', state = 'attn' }) {
  const items = Q.checkpoints.filter((c) => c.src !== 'collab');
  const t = window.V8.S8[nodata ? 'nodata' : state];
  return (
    <div style={{ position: 'relative', marginTop: 25 }}>
      <div style={{ position: 'absolute', top: -25, left: 0, right: 0, display: 'flex', justifyContent: 'center', pointerEvents: 'none' }}>
        <TabCheck8 title={after ? '1on1前の確認ポイント' : '今回の確認ポイント'} state={state} n={items.length + 1} nodata={nodata} />
      </div>
      <div style={{ background: '#fff', borderRadius: ai ? '16px 16px 0 0' : 16, border: '1.5px solid #dcdfe5', borderBottom: ai ? 'none' : '1.5px solid #dcdfe5', boxShadow: ai ? '0 1px 2px rgba(18,22,30,.05)' : '0 1px 2px rgba(18,22,30,.05), 0 16px 34px -22px rgba(18,22,30,.26)', padding: '44px 30px 20px' }}>
      {nodata ? (
        <div style={{ background: P.inset, border: `1px dashed #d9dde3`, borderRadius: 12, padding: '18px 20px 16px', marginBottom: 4 }}>
          <div style={{ fontSize: 13.5, fontWeight: 700, color: P.ink2 }}>今回のアンケートが未回答のため、確認ポイントは抽出していません。</div>
          <div style={{ marginTop: 13, display: 'flex', flexDirection: 'column', gap: 9 }}>
            {[['今回のアンケート', '未回答（期限 2026/06/25 を 3日超過）'], ['前回1on1', '2026/05/15（39日前）'], ['前回までの回答', 'アンケート詳細で確認できます']].map((r, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
                <span style={{ width: 116, flexShrink: 0, fontSize: 11.5, fontWeight: 700, color: P.faint }}>{r[0]}</span>
                <span className="tnum" style={{ fontSize: 13, fontWeight: 700, color: P.ink2 }}>{r[1]}</span>
              </div>
            ))}
          </div>
        </div>
      ) : (
        <div style={{ marginTop: -4 }}>
          {items.map((c, i) => <CheckRow8 key={i} item={c} idx={`${idx}${i}`} last={false} />)}
          <HandoffRow8 text={NEXT8.prev} last />
        </div>
      )}
      {withComment && <CmtBand8 radius={ai ? 0 : 15} />}
      </div>
      {ai && <AiDock8 nodata={nodata} />}
    </div>
  );
}

// ═ AIによる補助的な見方（事実の後に置く補助領域） ═
const AI_SRC = {
  cp1: { kind: '確認ポイント', name: '仕事内容満足度', body: '5 → 3（大きく低下）　推移 4・4・5・5・3' },
  cp2: { kind: '確認ポイント', name: '自身へのマネジメント', body: '3 → 5（大きく上昇）　推移 3・4・3・3・5' },
  cp3: { kind: '確認ポイント', name: '1on1未実施期間', body: '前回1on1から1か月以上経過（39日）' },
  cm: { kind: '本人コメント', name: '2026/06', body: '案件の切り替えがあり、前半はキャッチアップに時間がかかりました。新しいチームでの進め方にまだ慣れていない部分があります。' },
  rc: { kind: '前回1on1記録', name: '2026/05/15', body: '負荷が高い期間が続いていたためタスクの優先順位を一緒に整理し、朝会での相談枠の活用を合意。' },
};
const AI_VIEWS = [
  { t: '切り替え後の進め方で、負担になっている点を確認する', b: '業務内容そのものより、切り替え直後の進め方に負担が出ている可能性があります。仕事内容満足度の低下と本人コメントが同じ時期を指しているためです。どちらなのかは本人への確認が必要です。', s: ['cp1', 'cm'] },
  { t: '前回相談した仕組みが、現在も機能しているか確認する', b: '自身へのマネジメントが上昇しており、前回整理した相談枠が働いている可能性があります。続けるか見直すかは、本人の実感を聞く必要があります。', s: ['cp2', 'rc'] },
  { t: '直近の変化を聞き、低下が一時的なものか確認する', b: '前回から39日空いているため、今回だけの変動か期間中の出来事の反映かは、この画面の情報では判断できません。', s: ['cp3'] },
];

function SrcChip({ k, onClick }) {
  const s = AI_SRC[k];
  return (
    <button onClick={onClick} style={{ all: 'unset', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 6, background: '#fff', border: `1px solid ${P.line}`, borderRadius: 8, padding: '5px 10px' }}>
      <span className="lbl8" style={{ fontSize: 10, fontWeight: 800, color: P.faint, letterSpacing: '.04em' }}>{s.kind}</span>
      <span style={{ fontSize: 11.5, fontWeight: 700, color: P.ink2, whiteSpace: 'nowrap' }}>{s.name}</span>
    </button>
  );
}
function AiView({ v, i, acc = P.ghost, link }) {
  const [open, setOpen] = React.useState(false);
  const [src, setSrc] = React.useState(false);
  return (
    <div style={{ borderTop: i === 0 ? 'none' : `1px solid ${P.line}` }}>
      <button onClick={() => setOpen((o) => !o)} aria-expanded={open}
        style={{ all: 'unset', cursor: 'pointer', display: 'flex', alignItems: 'flex-start', gap: 11, width: '100%', padding: '13px 0' }}>
        <span style={{ width: 6, height: 6, borderRadius: 6, background: acc, flexShrink: 0, marginTop: 8 }}></span>
        <span style={{ flex: 1, minWidth: 0, fontSize: 14, fontWeight: 700, color: P.ink, lineHeight: 1.45, textWrap: 'pretty' }}>{v.t}</span>
        <span className="lbl8" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, paddingTop: 2 }}>
          <span className="tnum" style={{ fontSize: 11, color: P.faint, fontWeight: 700 }}>根拠 {v.s.length}件</span>
          <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke={P.faint} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .18s ease' }}><path d="M4 6l4 4 4-4" /></svg>
        </span>
      </button>
      {open && (
        <div style={{ padding: '0 0 16px 25px' }}>
          <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.85, color: P.ink2, textWrap: 'pretty' }}>{v.b}</p>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 12, flexWrap: 'wrap' }}>
            <span className="lbl8" style={{ fontSize: 10.5, fontWeight: 800, color: P.faint, letterSpacing: '.08em' }}>根拠</span>
            {v.s.map((k) => <SrcChip key={k} k={k} onClick={() => setSrc(true)} />)}
            <button className="tlnk" onClick={() => setSrc((o) => !o)} style={{ fontSize: 11.5, marginLeft: 2, color: link }}>{src ? '引用を閉じる' : '根拠を見る'}</button>
          </div>
          {src && (
            <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {v.s.map((k) => {
                const s = AI_SRC[k];
                return (
                  <div key={k} style={{ background: P.inset, borderLeft: `2px solid ${P.ghost}`, borderRadius: '0 9px 9px 0', padding: '11px 14px 12px' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 5 }}>
                      <span className="lbl8" style={{ fontSize: 10.5, fontWeight: 800, color: P.faint, letterSpacing: '.06em' }}>{s.kind}</span>
                      <span className="lbl8" style={{ fontSize: 11.5, fontWeight: 700, color: P.ink2 }}>{s.name}</span>
                      <button className="tlnk lbl8" style={{ fontSize: 11, marginLeft: 'auto' }}>該当箇所へ移動 ↑</button>
                    </div>
                    <div className="tnum" style={{ fontSize: 12.5, lineHeight: 1.75, color: P.muted, fontWeight: 600 }}>{s.body}</div>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      )}
    </div>
  );
}
function AiCard8({ nodata = false }) {
  return (
    <CardB pad="18px 30px 18px" style={{ background: '#fcfcfd' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, paddingBottom: 12, borderBottom: `1px solid ${P.line}` }}>
        <span style={{ width: 24, height: 24, borderRadius: 8, background: '#eceef2', color: '#5c6472', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
          <svg width="13" height="13" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M10 3l1.6 3.9L15.5 8.5l-3.9 1.6L10 14l-1.6-3.9L4.5 8.5l3.9-1.6L10 3z" /><path d="M15.5 13.5l.7 1.7 1.7.7-1.7.7-.7 1.7-.7-1.7-1.7-.7 1.7-.7.7-1.7z" /></svg>
        </span>
        <span className="lbl8" style={{ fontSize: 12.5, fontWeight: 700, color: P.faint, letterSpacing: '.12em' }}>AIアシスト</span>
        <span style={{ fontSize: 13, fontWeight: 700, color: P.ink2 }}>対話で意識したい観点</span>
      </div>
      {nodata ? (
        <div style={{ padding: '14px 0 2px' }}>
          <div style={{ fontSize: 13.5, fontWeight: 700, color: P.ink2 }}>根拠が不足しているため、今回は表示していません。</div>
          <div style={{ fontSize: 12.5, color: P.muted, marginTop: 7, lineHeight: 1.8 }}>今回のアンケートが未回答で、比較できる変化がありません。</div>
        </div>
      ) : (
        <div>{AI_VIEWS.map((v, i) => <AiView key={i} v={v} i={i} />)}</div>
      )}
    </CardB>
  );
}

// ═ 次回確認したいこと（実施記録の文脈内） ═
function NextBox({ text, note }) {
  if (!text) return null;
  return (
    <div style={{ background: '#fbfaf6', border: `1px solid #e9e5d8`, borderRadius: 12, padding: '14px 18px 15px' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 7 }}>
        <span className="lbl8" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 11.5, fontWeight: 800, color: '#8a6b12', letterSpacing: '.02em' }}>
          <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M3 8h8M8 4.5l3.5 3.5L8 11.5" /><path d="M13.5 3v10" /></svg>
          次回確認したいこと
        </span>
        {note && <span className="lbl8" style={{ fontSize: 10.5, color: P.faint, fontWeight: 600 }}>{note}</span>}
      </div>
      <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.85, color: P.ink2, whiteSpace: 'pre-wrap', textWrap: 'pretty' }}>{text}</p>
    </div>
  );
}
function MemoBox8({ text }) {
  return (
    <div style={{ background: '#fdf6de', border: '1px solid #efe3b5', borderRadius: 11, padding: '13px 18px 14px' }}>
      <div className="lbl8" style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 11, fontWeight: 700, color: '#9a814a', marginBottom: 6 }}>
        <Icon.lock width="12" height="12" /> 自分用メモ<span style={{ fontWeight: 600, color: '#b3a077' }}>（実施者のみ表示）</span>
      </div>
      <p style={{ margin: 0, fontSize: 12.5, lineHeight: 1.75, color: '#6b5c3a' }}>{text}</p>
    </div>
  );
}
function Toggle8({ open, set, label, right }) {
  return (
    <button onClick={() => set(!open)} aria-expanded={open} style={{ all: 'unset', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, width: '100%' }}>
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 9 }}>
        <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke={P.faint} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ transform: open ? 'rotate(90deg)' : 'none', transition: 'transform .18s ease', flexShrink: 0 }}><path d="M6 4l4 4-4 4" /></svg>
        <span className="lbl8" style={{ fontSize: 12, fontWeight: 700, color: P.muted }}>{label}</span>
      </span>
      {right}
    </button>
  );
}

// 実施前：前回1on1記録（原案・案B改と同じ開閉式カード）
function RecordCardBefore() {
  const [open, setOpen] = React.useState(false);
  return (
    <CardB pad={open ? '24px 30px 26px' : '20px 30px'}>
      <div style={{ marginBottom: open ? 16 : 0 }}>
        <Toggle8 open={open} set={setOpen} label="前回1on1記録" right={<span className="tnum" style={{ fontSize: 12, color: P.ghost }}>2026/05/15 ・ 対面 / 個別</span>} />
        {open && (
          <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 14 }}>
            <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.85, color: P.ink2 }}>{TXT2.report}</p>
            <MemoBox8 text={TXT2.memo} />
          </div>
        )}
      </div>
    </CardB>
  );
}

// 実施後：今回の実施記録（前回記録を内包・過去の確認事項は履歴として残る）
function RecordCardAfter() {
  const [open, setOpen] = React.useState(false);
  return (
    <CardB hero pad="24px 30px 26px">
      <HeadB right={<span className="tnum" style={{ fontSize: 12, color: P.ghost }}>{DONE8.date} ・ {DONE8.method}</span>}><span className="lbl8">今回の実施記録</span></HeadB>
      <p style={{ margin: 0, fontSize: 14, lineHeight: 1.85, color: P.ink2 }}>{DONE8.report}</p>
      <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 13 }}>
        <NextBox text={NEXT8.cur} />
        <MemoBox8 text={DONE8.memo} />
      </div>
      <div style={{ marginTop: 18, paddingTop: 16, borderTop: `1px solid ${P.line}` }}>
        <Toggle8 open={open} set={setOpen} label="前回1on1記録" right={<span className="tnum" style={{ fontSize: 12, color: P.ghost }}>{DONE8.prev.date} ・ {DONE8.prev.method}</span>} />
        {open && (
          <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 13 }}>
            <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.8, color: P.ink2 }}>{DONE8.prev.report}</p>
            <NextBox text={NEXT8.prev} note="この回に記録された内容" />
            <MemoBox8 text={DONE8.prev.memo} />
          </div>
        )}
      </div>
    </CardB>
  );
}

Object.assign(window, { HandoffRow8, CheckRow8, CheckCard8, CheckStat, TabCheck8, AiCard8, AiDock8, CmtBand8, RecordCardBefore, RecordCardAfter, NextBox, MemoBox8, Toggle8, CountTag, NEXT8, DONE8 });