// Naviyell — Screens A-06 through A-12 (core app loop) — INTERACTIVE

// ═══════════════════════════════════════════════════════════════════
// A-06 Home
// ═══════════════════════════════════════════════════════════════════
function A06Home() {
  const nav = useNav();
  const { state, patch } = useAppState();
  const now = new Date();
  const dow = ['日', '月', '火', '水', '木', '金', '土'];
  const today = `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日（${dow[now.getDay()]}）`;
  const actions = state.actions || MOCK_ACTIONS;
  const visibleActions = actions.slice(0, 3);
  const toggleAction = (id) => {
    patch({ actions: actions.map((a) => (a.id === id ? { ...a, done: !a.done } : a)) });
  };
  // Time-of-day-aware greeting word + insight card styling
  const user = state.currentUser;
  const displayName =
    state.displayName || user?.user_metadata?.public_username || user?.user_metadata?.full_name || user?.user_metadata?.name || user?.email?.split('@')[0] || '';
  const [hr, setHr] = React.useState(() => new Date().getHours());
  React.useEffect(() => {
    const tick = () => setHr(new Date().getHours());
    // Check every 30s — catches hour boundaries within a minute
    const id = setInterval(tick, 30_000);
    // Also run immediately in case the initial render captured a stale time
    tick();
    return () => clearInterval(id);
  }, []);
  const todPhase = hr >= 5 && hr < 12 ? 'morning' : hr >= 12 && hr < 18 ? 'noon' : 'evening';
  const greeting = todPhase === 'morning' ? 'おはよう' : todPhase === 'noon' ? 'こんにちは' : 'こんばんは';
  // Insight card variants
  const insightStyles = {
    morning: {
      bg: 'linear-gradient(135deg, #F4D9B4 0%, #E8C8A8 100%)',
      labelColor: '#9F5E26',
      bodyColor: '#5C3F1E',
      stars: false,
      glyph: (
        <svg viewBox='0 0 36 36' width='22' height='22'>
          <circle cx='18' cy='20' r='7' fill='#E89A4A' />
          <g stroke='#C97A33' strokeWidth='1.4' strokeLinecap='round'>
            <line x1='18' y1='4' x2='18' y2='8' />
            <line x1='6' y1='20' x2='9' y2='20' />
            <line x1='27' y1='20' x2='30' y2='20' />
            <line x1='9' y1='12' x2='11' y2='14' />
            <line x1='27' y1='12' x2='25' y2='14' />
          </g>
        </svg>
      ),
    },
    noon: {
      bg: `linear-gradient(135deg, ${A.gold100} 0%, #FBEED4 100%)`,
      labelColor: A.gold600,
      bodyColor: '#5C4A1F',
      stars: false,
      glyph: (
        <svg viewBox='0 0 36 36' width='20' height='20'>
          <circle cx='18' cy='18' r='6.5' fill={A.gold500} />
        </svg>
      ),
    },
    evening: {
      bg: `linear-gradient(135deg, ${A.ink700}, ${A.ink900})`,
      labelColor: A.gold100,
      bodyColor: A.white,
      stars: true,
      glyph: <ACMoon size={20} color={A.gold500} />,
    },
  };
  const ins = insightStyles[todPhase];
  return (
    <div className='ac-screen' style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column' }}>
      <div style={{ flex: 1, overflow: 'auto', paddingTop: 56 }} className='ac-scroll'>
        <div style={{ padding: '8px 20px 4px' }}>
          <div style={{ fontSize: 12, color: A.ink500, letterSpacing: 1 }}>{today}</div>
          <h1 className='ac-serif' style={{ margin: '6px 0 0', fontSize: 24, fontWeight: 600, color: A.ink900 }}>
            {greeting}、{displayName}さん
          </h1>
        </div>

        <div style={{ padding: '20px 20px 8px' }}>
          <div
            style={{
              position: 'relative',
              background: ins.bg,
              borderRadius: 18,
              padding: '20px 22px',
              overflow: 'hidden',
              transition: 'background 600ms ease',
            }}>
            {ins.stars && (
              <>
                <ACStar x='80%' y='20%' size={6} />
                <ACStar x='92%' y='60%' size={5} />
              </>
            )}
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              {ins.glyph}
              <span style={{ fontSize: 11, color: ins.labelColor, letterSpacing: 2, fontWeight: 600 }}>今日のひとこと</span>
            </div>
            <p className='ac-serif' style={{ margin: '14px 0 0', fontSize: 17, lineHeight: 1.7, color: ins.bodyColor, fontWeight: 500 }}>
              小さな一歩は振り返れば大きな道
              <br />
              今日の選択を丁寧に
            </p>
          </div>
        </div>

        <div style={{ marginTop: 24 }}>
          <ACSectionHeader title='今日やること' action='すべて見る' onAction={() => nav.go('tracker')} />
          <div style={{ padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 10 }}>
            {visibleActions.map((a) => (
              <ActionRow key={a.id} action={a} onToggle={() => toggleAction(a.id)} />
            ))}
          </div>
        </div>

        <div style={{ marginTop: 28 }}>
          <ACSectionHeader title='次回の予約' />
          <div style={{ padding: '0 20px' }}>
            <div onClick={() => nav.go('status')} style={{ cursor: 'pointer' }}>
              <ACCard padding={16}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <div
                    style={{
                      width: 56,
                      padding: '8px 0',
                      borderRadius: 10,
                      background: A.gold100,
                      textAlign: 'center',
                      flexShrink: 0,
                    }}>
                    <div style={{ fontSize: 10, color: A.gold600, fontWeight: 600 }}>3月</div>
                    <div className='ac-serif' style={{ fontSize: 22, fontWeight: 600, color: A.ink900, lineHeight: 1 }}>
                      26
                    </div>
                    <div style={{ fontSize: 9, color: A.ink500, marginTop: 2 }}>水</div>
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 11, color: A.ink500 }}>14:00 〜 チャット</div>
                    <div
                      style={{
                        fontSize: 14,
                        fontWeight: 600,
                        color: A.ink900,
                        marginTop: 2,
                        whiteSpace: 'nowrap',
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                      }}>
                      キャリアの方向性を一緒に考えます
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 6 }}>
                      <ACAvatar size={20} name='葉' color={A.catMind} />
                      <span style={{ fontSize: 11, color: A.ink500 }}>葉月 凛</span>
                    </div>
                  </div>
                </div>
              </ACCard>
            </div>
          </div>
        </div>

        <div style={{ marginTop: 28, paddingBottom: 20 }}>
          <ACSectionHeader title='あなたへのおすすめ' action='もっと見る' onAction={() => nav.go('browse')} />
          <div style={{ display: 'flex', gap: 12, padding: '0 20px', overflow: 'auto' }} className='ac-scroll'>
            {MOCK_TICKETS.slice(0, 3).map((t, i) => (
              <div
                key={t.id}
                onClick={() => {
                  patch({ selectedTicket: t.id });
                  nav.go('ticket-detail');
                }}
                style={{ cursor: 'pointer' }}>
                <MiniTicket t={t} />
              </div>
            ))}
          </div>
        </div>
      </div>
      <ACTabBar active='home' />
      <Toast />
    </div>
  );
}

function ActionRow({ action, onToggle }) {
  return (
    <div
      onClick={onToggle}
      style={{
        background: A.white,
        borderRadius: 14,
        padding: '14px 14px',
        display: 'flex',
        alignItems: 'center',
        gap: 12,
        border: `1px solid ${A.ink100}`,
        position: 'relative',
        overflow: 'hidden',
        cursor: 'pointer',
        transition: 'all 0.15s',
      }}>
      <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 3, background: action.catColor }} />
      <div
        style={{
          width: 22,
          height: 22,
          borderRadius: 6,
          flexShrink: 0,
          border: `1.5px solid ${action.done ? A.success : A.ink300}`,
          background: action.done ? A.success : 'transparent',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          transition: 'all 0.15s',
        }}>
        {action.done && (
          <svg width='12' height='12' viewBox='0 0 12 12'>
            <path d='M2 6l3 3 5-6' stroke={A.white} strokeWidth='2' fill='none' strokeLinecap='round' strokeLinejoin='round' />
          </svg>
        )}
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div
          style={{
            fontSize: 14,
            color: action.done ? A.ink500 : A.ink900,
            textDecoration: action.done ? 'line-through' : 'none',
            lineHeight: 1.5,
          }}>
          {action.desc}
        </div>
        <div style={{ fontSize: 11, color: A.ink500, marginTop: 4 }}>
          {action.due} · {action.source}
        </div>
      </div>
    </div>
  );
}

function MiniTicket({ t }) {
  const a = MOCK_ANCHORS.find((x) => x.id === t.anchorId);
  return (
    <div
      style={{
        width: 200,
        flexShrink: 0,
        background: A.white,
        borderRadius: 14,
        border: `1px solid ${A.ink100}`,
        overflow: 'hidden',
      }}>
      <div style={{ height: 70, background: `linear-gradient(135deg, ${t.catColor}, ${t.catColor}cc)`, position: 'relative' }}>
        <div
          style={{
            position: 'absolute',
            top: 8,
            left: 10,
            padding: '3px 8px',
            background: 'rgba(255,255,255,0.3)',
            borderRadius: 6,
            fontSize: 9,
            color: A.white,
            fontWeight: 600,
          }}>
          {t.category}
        </div>
      </div>
      <div style={{ padding: 12 }}>
        <div
          className='ac-serif'
          style={{ fontSize: 13, fontWeight: 600, color: A.ink900, lineHeight: 1.4, height: 36, overflow: 'hidden' }}>
          {t.title}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 8 }}>
          <ACAvatar size={18} name={a.name.charAt(0)} color={a.color} />
          <span style={{ fontSize: 10, color: A.ink500, flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
            {a.name}
          </span>
        </div>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginTop: 8 }}>
          <span className='ac-display' style={{ fontSize: 16, fontWeight: 600, color: A.ink900 }}>
            ¥{t.price.toLocaleString()}
          </span>
          <span style={{ fontSize: 10, color: A.gold600, fontWeight: 600 }}>★ {t.rating}</span>
        </div>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════
// A-07 Browse
// ═══════════════════════════════════════════════════════════════════
function A07Browse() {
  const nav = useNav();
  const { patch } = useAppState();
  const cats = ['すべて', '心のアンカー', '体のアンカー', '外見・環境のアンカー', '未来のアンカー', '社会的なアンカー'];
  const [activeCat, setActiveCat] = React.useState(0);
  const [query, setQuery] = React.useState('');

  const filtered = MOCK_TICKETS.filter((t) => {
    if (activeCat !== 0 && t.category !== cats[activeCat]) return false;
    if (query && !t.title.includes(query)) return false;
    return true;
  });

  return (
    <div className='ac-screen' style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column' }}>
      <div style={{ paddingTop: 56, padding: '56px 20px 0' }}>
        <h1 className='ac-serif' style={{ margin: 0, fontSize: 24, fontWeight: 600 }}>
          探す
        </h1>
      </div>

      <div style={{ padding: '16px 20px 12px', display: 'flex', gap: 10 }}>
        <div
          style={{
            flex: 1,
            height: 44,
            background: A.white,
            borderRadius: 12,
            border: `1px solid ${A.ink100}`,
            display: 'flex',
            alignItems: 'center',
            padding: '0 14px',
            gap: 10,
          }}>
          <svg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke={A.ink500} strokeWidth='2'>
            <circle cx='11' cy='11' r='7' />
            <path d='M16.5 16.5L21 21' strokeLinecap='round' />
          </svg>
          <input
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder='相談メニューを探す'
            style={{
              flex: 1,
              border: 'none',
              background: 'transparent',
              fontSize: 14,
              color: A.ink900,
              fontFamily: 'inherit',
              outline: 'none',
            }}
          />
        </div>
        <button
          onClick={() => nav.go('anchors')}
          style={{
            width: 44,
            height: 44,
            borderRadius: 12,
            border: `1px solid ${A.ink100}`,
            background: A.white,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            cursor: 'pointer',
          }}>
          <svg width='18' height='18' viewBox='0 0 24 24' fill='none' stroke={A.ink700} strokeWidth='2'>
            <path d='M3 6h18M6 12h12M10 18h4' strokeLinecap='round' />
          </svg>
        </button>
      </div>

      <div style={{ display: 'flex', gap: 8, padding: '4px 20px 12px', overflow: 'auto' }} className='ac-scroll'>
        {cats.map((c, i) => (
          <ACPill key={c} active={i === activeCat} onClick={() => setActiveCat(i)}>
            {c}
          </ACPill>
        ))}
      </div>

      <div style={{ flex: 1, overflow: 'auto', padding: '4px 20px 20px' }} className='ac-scroll'>
        {filtered.length === 0 ? (
          <div style={{ textAlign: 'center', padding: '40px 0', color: A.ink500, fontSize: 13 }}>該当するチケットがありません</div>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {filtered.map((t) => (
              <div
                key={t.id}
                onClick={() => {
                  patch({ selectedTicket: t.id });
                  nav.go('ticket-detail');
                }}
                style={{ cursor: 'pointer' }}>
                <FullTicketCard t={t} />
              </div>
            ))}
          </div>
        )}
      </div>

      <ACTabBar active='browse' />
    </div>
  );
}

function FullTicketCard({ t }) {
  const a = MOCK_ANCHORS.find((x) => x.id === t.anchorId);
  return (
    <div
      style={{
        background: A.white,
        borderRadius: 16,
        overflow: 'hidden',
        border: `1px solid ${A.ink100}`,
        position: 'relative',
        boxShadow: '0 1px 2px rgba(26,24,50,0.04)',
      }}>
      <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 4, background: t.catColor }} />
      <div style={{ padding: '14px 16px 14px 18px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
          <span style={{ fontSize: 10, color: t.catColor, fontWeight: 600, letterSpacing: 0.5 }}>{t.category}</span>
          <span style={{ width: 3, height: 3, borderRadius: '50%', background: A.ink300 }} />
          <span style={{ fontSize: 10, color: A.ink500 }}>{t.format}</span>
        </div>
        <div className='ac-serif' style={{ fontSize: 16, fontWeight: 600, color: A.ink900, lineHeight: 1.5 }}>
          {t.title}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 10 }}>
          <ACAvatar size={24} name={a.name.charAt(0)} color={a.color} />
          <span style={{ fontSize: 12, color: A.ink700, fontWeight: 500 }}>{a.name}</span>
          <span style={{ fontSize: 11, color: A.ink500 }}>· {a.tagline}</span>
        </div>
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            marginTop: 12,
            paddingTop: 12,
            borderTop: `1px solid ${A.ink100}`,
          }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
            <ACStars rating={t.rating} size={11} />
            <span style={{ fontSize: 11, color: A.ink700, fontWeight: 600, marginLeft: 4 }}>{t.rating}</span>
            <span style={{ fontSize: 10, color: A.ink500 }}>({t.reviewCount})</span>
          </div>
          <span className='ac-display' style={{ fontSize: 18, fontWeight: 600, color: A.ink900 }}>
            ¥{t.price.toLocaleString()}
          </span>
        </div>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════
// A-08 Ticket detail
// ═══════════════════════════════════════════════════════════════════
function A08TicketDetail() {
  const nav = useNav();
  const { state, patch } = useAppState();
  const t = MOCK_TICKETS.find((x) => x.id === state.selectedTicket) || MOCK_TICKETS[0];
  const a = MOCK_ANCHORS.find((x) => x.id === t.anchorId);
  return (
    <div className='ac-screen' style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', position: 'relative' }}>
      <div style={{ flex: 1, overflow: 'auto' }} className='ac-scroll'>
        <div
          style={{
            position: 'relative',
            height: 180,
            background: `linear-gradient(135deg, ${t.catColor}, ${t.catColor}aa)`,
            paddingTop: 56,
          }}>
          <div style={{ position: 'absolute', top: 56, left: 12 }}>
            <ACBack dark />
          </div>
          <ACStar x='80%' y='40%' size={5} opacity={0.4} />
          <ACStar x='20%' y='65%' size={4} opacity={0.3} />
          <div
            style={{
              position: 'absolute',
              bottom: 14,
              left: 20,
              padding: '4px 10px',
              background: 'rgba(255,255,255,0.25)',
              borderRadius: 6,
              fontSize: 11,
              color: A.white,
              fontWeight: 600,
            }}>
            {t.category}
          </div>
        </div>

        <div style={{ padding: '20px 20px 100px' }}>
          <h1 className='ac-serif' style={{ margin: 0, fontSize: 22, fontWeight: 600, color: A.ink900, lineHeight: 1.5 }}>
            {t.title}
          </h1>

          <div
            onClick={() => {
              patch({ selectedAnchor: a.id });
              nav.go('anchor-detail');
            }}
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: 12,
              marginTop: 16,
              padding: 12,
              background: A.paper2,
              borderRadius: 12,
              cursor: 'pointer',
            }}>
            <ACAvatar size={40} name={a.name.charAt(0)} color={a.color} />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 600, color: A.ink900 }}>{a.name}</div>
              <div style={{ fontSize: 11, color: A.ink500 }}>{a.tagline}</div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
              <ACStars rating={a.rating} size={10} />
              <span style={{ fontSize: 11, color: A.ink500, marginTop: 2 }}>{a.sessionCount}件</span>
            </div>
          </div>

          <Section title='内容'>
            <p style={{ margin: 0, fontSize: 14, lineHeight: 1.8, color: A.ink700 }}>{t.desc}</p>
          </Section>

          <Section title='こんな方におすすめ'>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {t.forWhom.map((line, i) => (
                <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                  <svg width='18' height='18' viewBox='0 0 18 18' style={{ flexShrink: 0, marginTop: 2 }}>
                    <circle cx='9' cy='9' r='9' fill={A.gold100} />
                    <path d='M5 9l3 3 5-6' stroke={A.gold600} strokeWidth='2' fill='none' strokeLinecap='round' strokeLinejoin='round' />
                  </svg>
                  <span style={{ fontSize: 14, color: A.ink700, lineHeight: 1.6 }}>{line}</span>
                </div>
              ))}
            </div>
          </Section>

          <Section title='料金'>
            <div
              style={{
                background: A.paper2,
                borderRadius: 12,
                padding: 16,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
              }}>
              <div>
                <div className='ac-display' style={{ fontSize: 28, fontWeight: 600, color: A.ink900 }}>
                  ¥{t.price.toLocaleString()}
                </div>
                <div style={{ fontSize: 11, color: A.ink500, marginTop: 2 }}>{t.durationDesc}</div>
              </div>
              <ACBadge tone='info'>{t.format}</ACBadge>
            </div>
          </Section>

          <Section title='レビュー' action='すべて見る'>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {MOCK_REVIEWS.map((r) => (
                <div key={r.id} style={{ borderBottom: `1px solid ${A.ink100}`, paddingBottom: 12 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
                    <div
                      style={{
                        width: 28,
                        height: 28,
                        borderRadius: '50%',
                        background: A.paper2,
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        fontSize: 12,
                        fontWeight: 600,
                        color: A.ink700,
                      }}>
                      {r.initial}
                    </div>
                    <ACStars rating={r.rating} size={10} />
                    <span style={{ fontSize: 11, color: A.ink500, marginLeft: 'auto' }}>{r.date}</span>
                  </div>
                  <p style={{ margin: 0, fontSize: 13, color: A.ink700, lineHeight: 1.7 }}>{r.text}</p>
                </div>
              ))}
            </div>
          </Section>
        </div>
      </div>

      <ACStickyCTA>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
          <span style={{ fontSize: 12, color: A.ink500 }}>{t.durationDesc}</span>
          <span className='ac-display' style={{ fontSize: 20, fontWeight: 600, color: A.ink900 }}>
            ¥{t.price.toLocaleString()}
          </span>
        </div>
        <ACButton size='lg' onClick={() => nav.go('booking')}>
          予約する
        </ACButton>
      </ACStickyCTA>
    </div>
  );
}

function Section({ title, children, action, onAction }) {
  return (
    <div style={{ marginTop: 24 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 12 }}>
        <h3 className='ac-serif' style={{ margin: 0, fontSize: 16, fontWeight: 600, color: A.ink900 }}>
          {title}
        </h3>
        {action && (
          <button
            onClick={onAction}
            style={{ border: 'none', background: 'transparent', color: A.gold600, fontSize: 12, cursor: 'pointer', fontFamily: 'inherit' }}>
            {action}
          </button>
        )}
      </div>
      {children}
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════
// A-09a Anchor list
// ═══════════════════════════════════════════════════════════════════
function A09AnchorList() {
  const nav = useNav();
  const { patch } = useAppState();
  return (
    <div className='ac-screen' style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column' }}>
      <div style={{ paddingTop: 56, padding: '56px 20px 0' }}>
        <h1 className='ac-serif' style={{ margin: 0, fontSize: 24, fontWeight: 600 }}>
          アンカーを探す
        </h1>
      </div>
      <div style={{ padding: '16px 20px 12px' }}>
        <div
          style={{
            height: 44,
            background: A.white,
            borderRadius: 12,
            border: `1px solid ${A.ink100}`,
            display: 'flex',
            alignItems: 'center',
            padding: '0 14px',
            gap: 10,
          }}>
          <svg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke={A.ink500} strokeWidth='2'>
            <circle cx='11' cy='11' r='7' />
            <path d='M16.5 16.5L21 21' strokeLinecap='round' />
          </svg>
          <span style={{ fontSize: 14, color: A.ink500 }}>名前・専門分野で検索</span>
        </div>
      </div>
      <div style={{ display: 'flex', gap: 8, padding: '4px 20px 12px', overflow: 'auto' }} className='ac-scroll'>
        {['キャリア', '人間関係', 'メンタル', 'スピリチュアル', 'ヘルスケア'].map((c, i) => (
          <ACPill key={c} active={i === 0}>
            {c}
          </ACPill>
        ))}
      </div>
      <div style={{ flex: 1, overflow: 'auto', padding: '4px 20px 20px' }} className='ac-scroll'>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {MOCK_ANCHORS.map((a) => (
            <div
              key={a.id}
              onClick={() => {
                patch({ selectedAnchor: a.id });
                nav.go('anchor-detail');
              }}
              style={{ cursor: 'pointer' }}>
              <AnchorCard a={a} />
            </div>
          ))}
        </div>
      </div>
      <ACTabBar active='anchors' />
    </div>
  );
}

function AnchorCard({ a }) {
  return (
    <div
      style={{
        background: A.white,
        borderRadius: 16,
        padding: 14,
        border: `1px solid ${A.ink100}`,
        display: 'flex',
        gap: 12,
      }}>
      <ACAvatar size={56} name={a.name.charAt(0)} color={a.color} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{ fontSize: 15, fontWeight: 600, color: A.ink900 }}>{a.name}</span>
          {a.verified && (
            <svg width='14' height='14' viewBox='0 0 14 14'>
              <circle cx='7' cy='7' r='7' fill={A.gold500} />
              <path d='M4 7l2 2 4-5' stroke={A.white} strokeWidth='1.5' fill='none' strokeLinecap='round' strokeLinejoin='round' />
            </svg>
          )}
        </div>
        <div style={{ fontSize: 11, color: A.ink500, marginTop: 2 }}>{a.tagline}</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 8 }}>
          <ACStars rating={a.rating} size={10} />
          <span style={{ fontSize: 11, fontWeight: 600, color: A.ink700 }}>{a.rating}</span>
          <span style={{ fontSize: 11, color: A.ink500 }}>· {a.sessionCount}件</span>
        </div>
        <div style={{ display: 'flex', gap: 6, marginTop: 8, flexWrap: 'wrap' }}>
          {a.specialties.map((s) => (
            <span
              key={s}
              style={{ fontSize: 10, padding: '3px 8px', background: A.paper2, color: A.ink700, borderRadius: 6, fontWeight: 500 }}>
              {s}
            </span>
          ))}
        </div>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════
// A-09b Anchor detail
// ═══════════════════════════════════════════════════════════════════
function A09AnchorDetail() {
  const nav = useNav();
  const { state, patch } = useAppState();
  const a = MOCK_ANCHORS.find((x) => x.id === state.selectedAnchor) || MOCK_ANCHORS[0];
  const tickets = MOCK_TICKETS.filter((t) => t.anchorId === a.id);
  return (
    <div className='ac-screen' style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column' }}>
      <div style={{ flex: 1, overflow: 'auto' }} className='ac-scroll'>
        <div
          style={{
            paddingTop: 56,
            padding: '56px 0 24px',
            textAlign: 'center',
            background: `linear-gradient(180deg, ${a.color}22 0%, ${A.paper} 100%)`,
            position: 'relative',
          }}>
          <div style={{ position: 'absolute', top: 56, left: 12 }}>
            <ACBack />
          </div>
          <ACAvatar size={88} name={a.name.charAt(0)} color={a.color} />
          <div style={{ marginTop: 14, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
            <h1 className='ac-serif' style={{ margin: 0, fontSize: 22, fontWeight: 600 }}>
              {a.name}
            </h1>
            {a.verified && (
              <svg width='16' height='16' viewBox='0 0 14 14'>
                <circle cx='7' cy='7' r='7' fill={A.gold500} />
                <path d='M4 7l2 2 4-5' stroke={A.white} strokeWidth='1.5' fill='none' strokeLinecap='round' strokeLinejoin='round' />
              </svg>
            )}
          </div>
          <div style={{ fontSize: 12, color: A.ink500, marginTop: 4 }}>{a.tagline}</div>
          <div
            style={{
              display: 'inline-flex',
              alignItems: 'center',
              gap: 6,
              marginTop: 10,
              padding: '6px 12px',
              background: A.white,
              borderRadius: 18,
              border: `1px solid ${A.ink100}`,
            }}>
            <ACStars rating={a.rating} size={11} />
            <span style={{ fontSize: 12, fontWeight: 600, color: A.ink700 }}>{a.rating}</span>
            <span style={{ fontSize: 11, color: A.ink500 }}>({a.sessionCount}件)</span>
          </div>
        </div>

        <div style={{ padding: '8px 20px 100px' }}>
          <Section title='自己紹介'>
            <p style={{ margin: 0, fontSize: 14, lineHeight: 1.8, color: A.ink700 }}>{a.bio}</p>
          </Section>

          <Section title='対応カテゴリー'>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {a.specialties.map((s) => (
                <span
                  key={s}
                  style={{ padding: '6px 12px', borderRadius: 16, background: A.gold100, color: A.gold600, fontSize: 12, fontWeight: 600 }}>
                  {s}
                </span>
              ))}
            </div>
          </Section>

          <Section title='提供チケット' action='すべて見る'>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {tickets.map((t) => (
                <div
                  key={t.id}
                  onClick={() => {
                    patch({ selectedTicket: t.id });
                    nav.go('ticket-detail');
                  }}
                  style={{ cursor: 'pointer' }}>
                  <FullTicketCard t={t} />
                </div>
              ))}
            </div>
          </Section>
        </div>
      </div>
      <ACStickyCTA>
        <ACButton
          size='lg'
          onClick={() => {
            if (tickets[0]) patch({ selectedTicket: tickets[0].id });
            nav.go('ticket-detail');
          }}>
          この人に相談する
        </ACButton>
      </ACStickyCTA>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════
// A-10 Booking — date + time picker
// ═══════════════════════════════════════════════════════════════════
function A10Booking() {
  const nav = useNav();
  const { state, patch } = useAppState();
  const t = MOCK_TICKETS.find((x) => x.id === state.selectedTicket) || MOCK_TICKETS[0];
  const a = MOCK_ANCHORS.find((x) => x.id === t.anchorId);
  const dates = [
    { d: 24, dow: '月', avail: false },
    { d: 25, dow: '火', avail: true },
    { d: 26, dow: '水', avail: true },
    { d: 27, dow: '木', avail: true },
    { d: 28, dow: '金', avail: false },
    { d: 29, dow: '土', avail: true },
    { d: 30, dow: '日', avail: true },
  ];
  const slots = ['10:00', '11:30', '14:00', '15:30', '17:00', '19:00'];
  const fee = Math.round(t.price * 0.1);
  const sel = state.selectedSlot;

  const [loading, setLoading] = React.useState(false);
  const confirm = () => {
    setLoading(true);
    setTimeout(() => {
      patch({ bookingComplete: true });
      nav.go('status', { replace: true });
    }, 1500);
  };

  return (
    <div className='ac-screen' style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', position: 'relative' }}>
      <ACTopBar leading={<ACBack />} title='予約する' />
      <div style={{ flex: 1, overflow: 'auto', padding: '8px 20px 20px' }} className='ac-scroll'>
        <ACCard padding={14} style={{ marginBottom: 20 }}>
          <div style={{ display: 'flex', gap: 10 }}>
            <div style={{ width: 4, borderRadius: 2, background: t.catColor }} />
            <div style={{ flex: 1 }}>
              <div className='ac-serif' style={{ fontSize: 14, fontWeight: 600, color: A.ink900, lineHeight: 1.5 }}>
                {t.title}
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 6 }}>
                <ACAvatar size={18} name={a.name.charAt(0)} color={a.color} />
                <span style={{ fontSize: 11, color: A.ink500 }}>{a.name}</span>
              </div>
            </div>
          </div>
        </ACCard>

        <Section title='日時を選択'>
          <div style={{ background: A.white, borderRadius: 14, padding: 14, border: `1px solid ${A.ink100}` }}>
            <div style={{ fontSize: 12, color: A.ink500, marginBottom: 10 }}>2025年3月</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4 }}>
              {dates.map((d) => {
                const isSel = d.avail && sel.date === d.d;
                return (
                  <button
                    key={d.d}
                    onClick={() => d.avail && patch({ selectedSlot: { ...sel, date: d.d } })}
                    disabled={!d.avail}
                    style={{
                      textAlign: 'center',
                      padding: '8px 0',
                      borderRadius: 8,
                      border: 'none',
                      cursor: d.avail ? 'pointer' : 'default',
                      background: isSel ? A.gold500 : d.avail ? A.gold100 : 'transparent',
                      opacity: d.avail ? 1 : 0.4,
                      fontFamily: 'inherit',
                      transition: 'all 0.15s',
                    }}>
                    <div style={{ fontSize: 10, color: isSel ? A.white : A.ink500 }}>{d.dow}</div>
                    <div className='ac-display' style={{ fontSize: 16, fontWeight: 600, color: isSel ? A.white : A.ink900 }}>
                      {d.d}
                    </div>
                  </button>
                );
              })}
            </div>
            <div style={{ marginTop: 14, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
              {slots.map((s) => {
                const isSel = sel.time === s;
                return (
                  <button
                    key={s}
                    onClick={() => patch({ selectedSlot: { ...sel, time: s } })}
                    style={{
                      textAlign: 'center',
                      padding: '10px 0',
                      borderRadius: 10,
                      border: `1.5px solid ${isSel ? A.gold500 : A.ink100}`,
                      background: isSel ? A.gold100 : A.white,
                      fontSize: 13,
                      fontWeight: 600,
                      fontFamily: 'inherit',
                      cursor: 'pointer',
                      color: isSel ? A.gold600 : A.ink700,
                      transition: 'all 0.15s',
                    }}>
                    {s}
                  </button>
                );
              })}
            </div>
          </div>
        </Section>

        <Section title='お支払い方法'>
          <div
            style={{
              background: A.white,
              borderRadius: 14,
              padding: 14,
              border: `1.5px solid ${A.gold500}`,
              display: 'flex',
              alignItems: 'center',
              gap: 12,
            }}>
            <div
              style={{
                width: 36,
                height: 24,
                borderRadius: 4,
                background: `linear-gradient(135deg, ${A.ink700}, ${A.ink900})`,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
              }}>
              <span style={{ fontSize: 9, color: A.gold500, fontWeight: 700, letterSpacing: 0.5 }}>VISA</span>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 600 }}>•••• 4242</div>
              <div style={{ fontSize: 10, color: A.ink500 }}>有効期限 12/27</div>
            </div>
            <button
              onClick={() => nav.go('payments')}
              style={{
                border: 'none',
                background: 'transparent',
                color: A.gold600,
                fontSize: 12,
                cursor: 'pointer',
                fontFamily: 'inherit',
              }}>
              変更
            </button>
          </div>
        </Section>

        <Section title='料金'>
          <div style={{ background: A.paper2, borderRadius: 12, padding: 14 }}>
            <Row label='チケット代' val={`¥${t.price.toLocaleString()}`} />
            <Row label='プラットフォーム手数料' val={`¥${fee.toLocaleString()}`} />
            <div style={{ height: 1, background: A.ink100, margin: '10px 0' }} />
            <Row
              label={<span style={{ fontWeight: 600, color: A.ink900 }}>合計</span>}
              val={
                <span className='ac-display' style={{ fontSize: 20, fontWeight: 600 }}>
                  ¥{(t.price + fee).toLocaleString()}
                </span>
              }
            />
          </div>
        </Section>
      </div>

      <ACStickyCTA>
        <ACButton size='lg' onClick={confirm}>
          {sel.date}日 {sel.time}で予約を確定する
        </ACButton>
      </ACStickyCTA>

      {loading && (
        <div
          style={{
            position: 'absolute',
            inset: 0,
            zIndex: 100,
            background: 'linear-gradient(180deg, rgba(26,24,50,0.96), rgba(15,14,34,0.98))',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            animation: 'ac-fade-in 240ms ease both',
          }}>
          <ACMoonLoader label='予約を確定しています...' dark />
        </div>
      )}
    </div>
  );
}

function Row({ label, val }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '4px 0' }}>
      <span style={{ fontSize: 13, color: A.ink700 }}>{label}</span>
      <span style={{ fontSize: 14, color: A.ink900 }}>{val}</span>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════
// A-11 Status — with cancel dialog
// ═══════════════════════════════════════════════════════════════════
function A11Status() {
  const nav = useNav();
  const { state, patch } = useAppState();
  const stepIdx = state.statusStep;
  const labels = ['申込済み', '承認済み', '実施予定', '完了'];
  const steps = labels.map((label, i) => ({
    label,
    done: i < stepIdx,
    current: i === stepIdx,
  }));

  const [showCancel, setShowCancel] = React.useState(false);

  return (
    <div className='ac-screen' style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', position: 'relative' }}>
      <ACTopBar leading={<ACBack />} title='予約状況' />
      <div style={{ flex: 1, overflow: 'auto', padding: '20px 20px 20px' }} className='ac-scroll'>
        <div style={{ background: A.white, borderRadius: 16, padding: '20px 16px', border: `1px solid ${A.ink100}` }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', position: 'relative' }}>
            <div style={{ position: 'absolute', top: 12, left: '12.5%', right: '12.5%', height: 2, background: A.ink100, zIndex: 0 }} />
            <div
              style={{
                position: 'absolute',
                top: 12,
                left: '12.5%',
                width: `${Math.max(0, stepIdx) * 25}%`,
                height: 2,
                background: A.gold500,
                zIndex: 1,
                transition: 'width 0.3s',
              }}
            />
            {steps.map((s, i) => (
              <div key={i} style={{ flex: 1, textAlign: 'center', position: 'relative', zIndex: 2 }}>
                <div
                  style={{
                    width: 24,
                    height: 24,
                    borderRadius: '50%',
                    margin: '0 auto',
                    background: s.done || s.current ? A.gold500 : A.white,
                    border: s.current ? `3px solid ${A.gold100}` : s.done ? 'none' : `1.5px solid ${A.ink300}`,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    transition: 'all 0.3s',
                  }}>
                  {s.done && (
                    <svg width='12' height='12' viewBox='0 0 12 12'>
                      <path d='M2 6l3 3 5-6' stroke={A.white} strokeWidth='2' fill='none' strokeLinecap='round' strokeLinejoin='round' />
                    </svg>
                  )}
                </div>
                <div
                  style={{
                    fontSize: 10,
                    marginTop: 8,
                    color: s.done || s.current ? A.ink900 : A.ink500,
                    fontWeight: s.current ? 600 : 500,
                  }}>
                  {s.label}
                </div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ marginTop: 20, background: A.white, borderRadius: 16, padding: 18, border: `1px solid ${A.ink100}` }}>
          <ACBadge tone='gold'>{labels[stepIdx] || '完了'}</ACBadge>
          <h2 className='ac-serif' style={{ margin: '12px 0 0', fontSize: 18, fontWeight: 600, color: A.ink900, lineHeight: 1.5 }}>
            キャリアの方向性を一緒に考えます
          </h2>
          <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 8 }}>
            <DetailRow icon='cal' label={`3月${state.selectedSlot.date}日 ${state.selectedSlot.time} 〜`} />
            <DetailRow icon='msg' label='チャット形式（3往復まで）' />
            <DetailRow icon='usr' label='葉月 凛 さん' />
          </div>
        </div>

        <div
          style={{
            marginTop: 16,
            background: `linear-gradient(135deg, ${A.gold100}, ${A.gold100}cc)`,
            borderRadius: 14,
            padding: 16,
            textAlign: 'center',
            border: `1px solid ${A.gold500}33`,
          }}>
          <div style={{ fontSize: 11, color: A.gold600, fontWeight: 600, letterSpacing: 1 }}>SESSION STARTS IN</div>
          <div style={{ marginTop: 6, display: 'flex', justifyContent: 'center', gap: 16 }}>
            <Countdown n={1} unit='日' />
            <Countdown n={3} unit='時間' />
            <Countdown n={42} unit='分' />
          </div>
          <button
            onClick={() => nav.go('session')}
            style={{
              marginTop: 14,
              width: '100%',
              height: 44,
              borderRadius: 12,
              border: 'none',
              background: A.gold500,
              color: A.white,
              fontSize: 14,
              fontWeight: 600,
              cursor: 'pointer',
              fontFamily: 'inherit',
            }}>
            セッションルームへ入る
          </button>
        </div>

        <div style={{ marginTop: 24, display: 'flex', flexDirection: 'column', gap: 8 }}>
          <ACButton variant='secondary' size='md' onClick={() => nav.go('messages')}>
            アンカーにメッセージを送る
          </ACButton>
          <button
            onClick={() => setShowCancel(true)}
            style={{
              height: 40,
              border: 'none',
              background: 'transparent',
              color: A.danger,
              fontSize: 13,
              fontWeight: 500,
              cursor: 'pointer',
              fontFamily: 'inherit',
            }}>
            予約をキャンセルする
          </button>
        </div>
      </div>

      {/* Cancel dialog */}
      {showCancel && (
        <div
          onClick={() => setShowCancel(false)}
          style={{
            position: 'absolute',
            inset: 0,
            background: 'rgba(26,24,50,0.5)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            padding: 24,
            animation: 'ac-fade-in 200ms ease both',
            zIndex: 50,
          }}>
          <div
            onClick={(e) => e.stopPropagation()}
            style={{
              width: '100%',
              maxWidth: 320,
              background: A.white,
              borderRadius: 16,
              padding: 24,
              animation: 'ac-toast-in 200ms ease both',
            }}>
            <h3 className='ac-serif' style={{ margin: 0, fontSize: 17, fontWeight: 600, color: A.ink900 }}>
              予約をキャンセルしますか？
            </h3>
            <p style={{ margin: '10px 0 20px', fontSize: 13, color: A.ink500, lineHeight: 1.6 }}>
              24時間以内のキャンセルは50%のキャンセル料が発生します。
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <button
                onClick={() => {
                  setShowCancel(false);
                  patch({ statusStep: 0 });
                  nav.go('home', { replace: true });
                }}
                style={{
                  height: 44,
                  borderRadius: 10,
                  border: 'none',
                  background: A.danger,
                  color: A.white,
                  fontSize: 14,
                  fontWeight: 600,
                  cursor: 'pointer',
                  fontFamily: 'inherit',
                }}>
                キャンセルする
              </button>
              <button
                onClick={() => setShowCancel(false)}
                style={{
                  height: 44,
                  borderRadius: 10,
                  border: `1px solid ${A.ink100}`,
                  background: A.white,
                  color: A.ink700,
                  fontSize: 14,
                  fontWeight: 500,
                  cursor: 'pointer',
                  fontFamily: 'inherit',
                }}>
                戻る
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function DetailRow({ icon, label }) {
  const icons = {
    cal: <path d='M5 5h14v14H5zM5 9h14M9 3v4M15 3v4' stroke={A.ink500} strokeWidth='1.5' fill='none' strokeLinecap='round' />,
    msg: (
      <path
        d='M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-7l-4 3.5V17H6a2 2 0 0 1-2-2V6z'
        stroke={A.ink500}
        strokeWidth='1.5'
        fill='none'
        strokeLinejoin='round'
      />
    ),
    usr: (
      <g>
        <circle cx='12' cy='8' r='4' stroke={A.ink500} strokeWidth='1.5' fill='none' />
        <path d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8' stroke={A.ink500} strokeWidth='1.5' fill='none' strokeLinecap='round' />
      </g>
    ),
  };
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <svg width='16' height='16' viewBox='0 0 24 24'>
        {icons[icon]}
      </svg>
      <span style={{ fontSize: 13, color: A.ink700 }}>{label}</span>
    </div>
  );
}
function Countdown({ n, unit }) {
  return (
    <div>
      <span className='ac-display' style={{ fontSize: 28, fontWeight: 600, color: A.ink900 }}>
        {n}
      </span>
      <span style={{ fontSize: 11, color: A.gold600, marginLeft: 3, fontWeight: 600 }}>{unit}</span>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════
// A-12 Session — working composer
// ═══════════════════════════════════════════════════════════════════
const SESSION_INITIAL = [
  { kind: 'date', text: '3月26日 水曜日' },
  {
    kind: 'msg',
    from: 'anchor',
    text: 'こんにちは、葉月です。本日はよろしくお願いします。\nまずは今お感じのことから、ゆっくり聞かせてください。',
  },
  { kind: 'msg', from: 'anchor', text: '前回お話しいただいた「今の仕事への違和感」、その後どんなふうに変化していますか？' },
  {
    kind: 'msg',
    from: 'user',
    text: 'ありがとうございます。あれから自分の経歴を書き出してみたのですが、続けたい部分と手放したい部分が見えてきた気がします。',
  },
  { kind: 'msg', from: 'user', text: 'ただ、転職に踏み切る勇気がまだ持てません。' },
  {
    kind: 'msg',
    from: 'anchor',
    text: '自分の中で整理が進んでいるのですね。素晴らしい一歩です。\n「踏み切る勇気」の前に、もう少し小さなアクションから始めてみませんか？',
  },
  { kind: 'actions' },
];

function A12Session() {
  const nav = useNav();
  const { state, patch } = useAppState();
  const messages = state.messages || SESSION_INITIAL;
  const [input, setInput] = React.useState('');
  const [typing, setTyping] = React.useState(false);
  const scrollRef = React.useRef(null);

  React.useEffect(() => {
    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
  }, [messages, typing]);

  const send = () => {
    const text = input.trim();
    if (!text) return;
    const newMessages = [...messages, { kind: 'msg', from: 'user', text }];
    patch({ messages: newMessages });
    setInput('');
    // anchor reply after short pause
    setTimeout(() => setTyping(true), 400);
    setTimeout(() => {
      setTyping(false);
      patch({
        messages: [...newMessages, { kind: 'msg', from: 'anchor', text: 'なるほど、よくお話しくださいました。それは大切な気づきですね。' }],
      });
    }, 1800);
  };

  return (
    <div className='ac-screen' style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column' }}>
      <div
        style={{
          paddingTop: 56,
          padding: '56px 14px 12px',
          borderBottom: `1px solid ${A.ink100}`,
          background: A.white,
          display: 'flex',
          alignItems: 'center',
          gap: 10,
        }}>
        <ACBack />
        <ACAvatar size={36} name='葉' color={A.catMind} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <span style={{ fontSize: 14, fontWeight: 600, color: A.ink900 }}>葉月 凛</span>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: A.success }} />
            <span style={{ fontSize: 10, color: A.success, fontWeight: 600 }}>セッション中</span>
          </div>
          <div style={{ fontSize: 10, color: A.ink500, marginTop: 1 }}>残り 32:14</div>
        </div>
        <button
          onClick={() => nav.go('record')}
          style={{ width: 36, height: 36, border: 'none', background: 'transparent', borderRadius: 8, cursor: 'pointer' }}>
          <svg width='20' height='20' viewBox='0 0 24 24' fill='none' stroke={A.ink500} strokeWidth='1.8'>
            <circle cx='12' cy='12' r='9' />
            <path d='M12 8v4M12 16h.01' strokeLinecap='round' />
          </svg>
        </button>
      </div>

      <div
        ref={scrollRef}
        style={{ flex: 1, overflow: 'auto', background: A.paper, padding: '16px 14px', display: 'flex', flexDirection: 'column', gap: 10 }}
        className='ac-scroll'>
        {messages.map((m, i) => {
          if (m.kind === 'date') return <DateMark key={i}>{m.text}</DateMark>;
          if (m.kind === 'actions') return <ActionCardInChat key={i} />;
          return (
            <Bubble key={i} from={m.from}>
              {m.text.split('\n').map((l, j) => (
                <React.Fragment key={j}>
                  {l}
                  {j < m.text.split('\n').length - 1 && <br />}
                </React.Fragment>
              ))}
            </Bubble>
          );
        })}
        {typing && (
          <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
            <div
              style={{
                padding: '12px 16px',
                borderRadius: 18,
                borderBottomLeftRadius: 4,
                background: A.white,
                border: `1px solid ${A.ink100}`,
                display: 'flex',
                gap: 4,
                alignItems: 'center',
              }}>
              {[0, 1, 2].map((i) => (
                <span
                  key={i}
                  style={{
                    width: 6,
                    height: 6,
                    borderRadius: '50%',
                    background: A.ink300,
                    animation: `ac-typing 1.2s ${i * 0.15}s ease-in-out infinite`,
                  }}
                />
              ))}
            </div>
          </div>
        )}
      </div>

      <div
        style={{
          background: A.white,
          borderTop: `1px solid ${A.ink100}`,
          padding: '10px 12px 22px',
          display: 'flex',
          alignItems: 'flex-end',
          gap: 8,
        }}>
        <button style={{ width: 40, height: 40, border: 'none', background: A.paper2, borderRadius: 12, cursor: 'pointer', flexShrink: 0 }}>
          <svg width='18' height='18' viewBox='0 0 24 24' fill='none' stroke={A.ink500} strokeWidth='1.8'>
            <path d='M21 12.5L13.5 20a4 4 0 0 1-5.7-5.7L15.3 6.8a3 3 0 0 1 4.3 4.3L12 18.7' strokeLinecap='round' strokeLinejoin='round' />
          </svg>
        </button>
        <textarea
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === 'Enter' && !e.shiftKey) {
              e.preventDefault();
              send();
            }
          }}
          placeholder='メッセージを入力...'
          rows={1}
          style={{
            flex: 1,
            minHeight: 40,
            maxHeight: 100,
            padding: '10px 14px',
            background: A.paper2,
            borderRadius: 18,
            border: 'none',
            resize: 'none',
            fontSize: 14,
            color: A.ink900,
            fontFamily: 'inherit',
            outline: 'none',
          }}
        />
        <button
          onClick={send}
          disabled={!input.trim()}
          style={{
            width: 40,
            height: 40,
            border: 'none',
            flexShrink: 0,
            background: input.trim() ? A.gold500 : A.ink300,
            borderRadius: '50%',
            cursor: input.trim() ? 'pointer' : 'default',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            transition: 'background 0.15s',
          }}>
          <svg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke={A.white} strokeWidth='2.2'>
            <path d='M5 12l14-7-7 14-2-5-5-2z' strokeLinejoin='round' />
          </svg>
        </button>
      </div>
    </div>
  );
}

if (typeof document !== 'undefined' && !document.getElementById('ac-typing-anim')) {
  const s = document.createElement('style');
  s.id = 'ac-typing-anim';
  s.textContent = `@keyframes ac-typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5 } 30% { transform: translateY(-4px); opacity: 1 } }`;
  document.head.appendChild(s);
}

function Bubble({ from, children }) {
  const isUser = from === 'user';
  return (
    <div style={{ display: 'flex', justifyContent: isUser ? 'flex-end' : 'flex-start' }}>
      <div
        style={{
          maxWidth: '78%',
          padding: '10px 14px',
          borderRadius: 18,
          borderBottomRightRadius: isUser ? 4 : 18,
          borderBottomLeftRadius: isUser ? 18 : 4,
          background: isUser ? A.ink700 : A.white,
          color: isUser ? A.white : A.ink900,
          fontSize: 13.5,
          lineHeight: 1.7,
          border: isUser ? 'none' : `1px solid ${A.ink100}`,
          animation: 'ac-fade-in 240ms ease both',
        }}>
        {children}
      </div>
    </div>
  );
}

function DateMark({ children }) {
  return <div style={{ textAlign: 'center', fontSize: 11, color: A.ink500, padding: '4px 0' }}>{children}</div>;
}

function ActionCardInChat() {
  const nav = useNav();
  const { state, patch } = useAppState();
  const [picked, setPicked] = React.useState({ 0: false, 1: false, 2: false });
  const [added, setAdded] = React.useState(false);
  const items = ['転職エージェント1社のサイトを見てみる', '今の仕事で「続けたい3つ」を書き出す', '今週中に元同僚1人と話す機会を作る'];
  const someChecked = Object.values(picked).some(Boolean);
  const addToTracker = () => {
    const actions = state.actions || MOCK_ACTIONS;
    const newOnes = items
      .map((desc, i) =>
        picked[i]
          ? {
              id: 'session-' + Date.now() + '-' + i,
              desc,
              due: '今週中',
              source: '葉月さんとのセッション',
              catColor: A.catMind,
              done: false,
            }
          : null,
      )
      .filter(Boolean);
    patch({ actions: [...newOnes, ...actions], showAddedToast: true });
    setAdded(true);
  };

  return (
    <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
      <div
        style={{
          maxWidth: '88%',
          background: A.white,
          borderRadius: 16,
          border: `1px solid ${A.ink100}`,
          overflow: 'hidden',
          animation: 'ac-fade-in 320ms ease both',
        }}>
        <div style={{ background: A.gold100, padding: '8px 14px', display: 'flex', alignItems: 'center', gap: 6 }}>
          <ACMoon size={12} color={A.gold600} />
          <span style={{ fontSize: 10, color: A.gold600, fontWeight: 700, letterSpacing: 1 }}>今日のアクション</span>
        </div>
        <div style={{ padding: '12px 14px', display: 'flex', flexDirection: 'column', gap: 10 }}>
          {items.map((act, i) => (
            <button
              key={i}
              onClick={() => !added && setPicked((p) => ({ ...p, [i]: !p[i] }))}
              style={{
                display: 'flex',
                alignItems: 'flex-start',
                gap: 10,
                border: 'none',
                background: 'transparent',
                padding: 0,
                cursor: added ? 'default' : 'pointer',
                fontFamily: 'inherit',
                textAlign: 'left',
              }}>
              <div
                style={{
                  width: 18,
                  height: 18,
                  borderRadius: 5,
                  flexShrink: 0,
                  marginTop: 1,
                  border: `1.5px solid ${picked[i] ? A.gold500 : A.ink300}`,
                  background: picked[i] ? A.gold500 : 'transparent',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  transition: 'all 0.15s',
                }}>
                {picked[i] && (
                  <svg width='11' height='11' viewBox='0 0 12 12'>
                    <path d='M2 6l3 3 5-6' stroke={A.white} strokeWidth='2' fill='none' strokeLinecap='round' strokeLinejoin='round' />
                  </svg>
                )}
              </div>
              <span style={{ fontSize: 13, color: A.ink700, lineHeight: 1.6 }}>{act}</span>
            </button>
          ))}
          {!added ? (
            <button
              onClick={addToTracker}
              disabled={!someChecked}
              style={{
                marginTop: 4,
                height: 36,
                borderRadius: 10,
                border: 'none',
                background: someChecked ? A.gold500 : A.ink300,
                color: A.white,
                fontSize: 12,
                fontWeight: 600,
                cursor: someChecked ? 'pointer' : 'default',
                fontFamily: 'inherit',
                transition: 'background 0.15s',
              }}>
              選択した項目をトラッカーに追加
            </button>
          ) : (
            <div
              style={{
                marginTop: 4,
                padding: '8px 12px',
                background: A.gold100,
                borderRadius: 10,
                fontSize: 11,
                color: A.gold600,
                fontWeight: 600,
                textAlign: 'center',
              }}>
              ✓ 追加済み — トラッカーで確認
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  A06Home,
  A07Browse,
  A08TicketDetail,
  A09AnchorList,
  A09AnchorDetail,
  A10Booking,
  A11Status,
  A12Session,
});