夢の内容を聞かせてください

Tell me your dream

setDream(e.target.value.slice(0, DREAM_MAX_CHARS))}
        />
        <div className={`char-count ${dream.length >= DREAM_MAX_CHARS ? "limit" : ""}`}>{dream.length}/{DREAM_MAX_CHARS}字 · 10字以上で診断できます</div>

<div className="q-group">
          <div className="q-label">夢の気分 <span className="hint">— mood</span></div>
          <div className="chips">
            {MOODS.map(m => (
              <button
                key={m.id}
                className={`chip ${mood === m.id ? "active" : ""}`}
                onClick={() => setMood(mood === m.id ? null : m.id)}
              >
                <span style={{opacity: 0.7}}>{m.emoji}</span> {m.id}
              </button>
            ))}
          </div>
        </div>

<div className="q-group">
          <div className="q-label">登場した人 <span className="hint">— who appeared</span></div>
          <div className="chips">
            {PEOPLE.map(p => (
              <button key={p} className={`chip ${people.includes(p) ? "active" : ""}`} onClick={() => togglePerson(p)}>{p}</button>
            ))}
          </div>
        </div>

<div className="q-group">
          <div className="q-label">印象的だった色 <span className="hint">— colors</span></div>
          <div className="chips">
            {COLORS.map(c => (
              <button key={c.id} className={`chip ${colors.includes(c.id) ? "active" : ""}`} onClick={() => toggleColor(c.id)}>
                <span className="swatch" style={{ background: c.sw }}></span>{c.id}
              </button>
            ))}
          </div>
        </div>

<div className="submit-row">
          <button className="btn-divine" onClick={submit}>診　断</button>
        </div>
      </div>
    </div>
  );
}

// ========== Loading ==========
function LoadingPanel() {
  return (
    <div className="card">
      <div className="loading-state">
        <div className="loading-sparkles">
          <svg viewBox="0 0 80 80">
            <g fill="none" stroke="#C89B5E" strokeWidth="0.8" strokeLinecap="round">
              <circle cx="40" cy="40" r="30" opacity="0.3"/>
              <path d="M 40,10 L 42,38 L 70,40 L 42,42 L 40,70 L 38,42 L 10,40 L 38,38 Z" fill="#C89B5E" opacity="0.6"/>
            </g>
          </svg>
          <svg viewBox="0 0 80 80">
            <g fill="#C97B7B" opacity="0.7">
              <circle cx="20" cy="20" r="2"/>
              <circle cx="60" cy="22" r="1.5"/>
              <circle cx="64" cy="60" r="2"/>
              <circle cx="18" cy="58" r="1.5"/>
            </g>
          </svg>
        </div>
        <div className="loading-text">夢を解析しています<span className="dots"></span></div>
      </div>
    </div>
  );
}

// ========== Tarot Card ==========
const ROMAN = ["I","II","III","IV","V","VI","VII","VIII","IX","X","XI","XII","XIII","XIV","XV","XVI","XVII","XVIII","XIX","XX","XXI","XXII"];

<div className="tarot-typecode">
          <span className="label">TYPE</span>
          <span className="value">{reading.type_code || symbolMeta.typeCode}</span>
        </div>

<div className="tarot-roman">{symbolMeta.no}</div>

<div className="tarot-name-en">{reading.card_name_en || symbolMeta.nameEn || "Dream Symbol"}</div>
        <div className="tarot-name-jp">{reading.card_name_jp || symbolMeta.nameJp || "夢"}</div>

<div className="tarot-ornament">
          <span className="line"></span>
          <svg width="12" height="12" viewBox="0 0 12 12"><path d="M 6,1 L 7,5 L 11,6 L 7,7 L 6,11 L 5,7 L 1,6 L 5,5 Z" fill="currentColor"/></svg>
          <span className="line"></span>
        </div>
        <div className="tarot-date">{dateStr}</div>
      </div>
    </div>
  );
}

// ========== Theme Icons ==========
function ThemeIcon({ kind }) {
  if (kind === "love") return (
    <svg viewBox="0 0 36 36" fill="none">
      <path d="M 18,30 C 8,22 4,14 9,9 C 13,5 17,8 18,12 C 19,8 23,5 27,9 C 32,14 28,22 18,30 Z"
            fill="#E8C4C4" stroke="#C97B7B" strokeWidth="1.2" strokeLinejoin="round"/>
    </svg>
  );
  if (kind === "work") return (
    <svg viewBox="0 0 36 36" fill="none">
      <path d="M 6,14 L 30,14 L 30,28 L 6,28 Z M 14,14 L 14,10 L 22,10 L 22,14" stroke="#C89B5E" strokeWidth="1.3" strokeLinejoin="round" fill="#F2E0CC"/>
      <path d="M 6,20 L 30,20" stroke="#C89B5E" strokeWidth="1" opacity="0.5"/>
    </svg>
  );
  if (kind === "relations") return (
    <svg viewBox="0 0 36 36" fill="none">
      <circle cx="13" cy="14" r="4.5" fill="#DDD2E8" stroke="#B8A8CC" strokeWidth="1.2"/>
      <circle cx="23" cy="14" r="4.5" fill="#DDD2E8" stroke="#B8A8CC" strokeWidth="1.2"/>
      <path d="M 6,30 C 6,24 12,21 13,21 C 14,21 16,22 18,22 C 20,22 22,21 23,21 C 24,21 30,24 30,30" stroke="#B8A8CC" strokeWidth="1.2" fill="#EFE7F2"/>
    </svg>
  );
  return null;
}

function ScoreDots({ score = 3 }) {
  const labels = ["弱", "やや弱", "並", "やや強", "強"];
  return (
    <div className="theme-score">
      <div className="theme-bar">
        <div className="theme-bar-fill" style={{ width: `${(score / 5) * 100}%` }}></div>
      </div>
      <div className="theme-score-label">
        <span>{labels[Math.max(0, Math.min(4, score - 1))]}</span>
        <span className="theme-score-num">{score}/5</span>
      </div>
    </div>
  );
}

// ========== Result ==========
function ResultPanel({ reading, dateStr, onReset, onShare }) {
  const themeMeta = {
    love: { jp: "恋愛", en: "Love" },
    work: { jp: "仕事", en: "Work" },
    relations: { jp: "対人", en: "Relations" },
  };
  const order = ["love", "work", "relations"];

return (
    <div className="result">
      <div className="result-divider"><span className="label">★ 今朝の夢診断書 ★</span></div>

<div className="result-card-wrap">
        <TarotCard reading={reading} dateStr={dateStr}/>
        <div className="result-card-meta">
          <div className="result-type-row">
            <span className="result-type-label">夢の中心シンボル</span>
            <span className="result-type-name">{reading.dream_type_jp}</span>
            <span className="result-match">MATCH {reading.match_score}%</span>
          </div>
          <span className="jp-name">{reading.card_name_jp}</span>
          <span>{reading.card_name_en} · {dateStr.toUpperCase()}</span>
        </div>

{reading.aura_color && (
          <div className="aura-strip">
            <span className="aura-label">TODAY'S AURA</span>
            <span className="aura-swatch" style={{ background: reading.aura_color.hex }}></span>
            <span className="aura-name">{reading.aura_color.name}</span>
            <span className="aura-hex">{reading.aura_color.hex.toUpperCase()}</span>
          </div>
        )}
      </div>

<div className="main-message">
        <div className="label">DREAM ANALYSIS</div>
        <div className="text">{reading.main_message}</div>
      </div>

<div className="result-detail-grid">
        <div className="card result-detail-card type-meaning-card">
          <div className="detail-label">{reading.card_name_jp}のサインとは</div>
          <div className="detail-text">{reading.type_description}</div>
        </div>
      </div>

<div className="card sign-message-card">
        <div className="detail-label">夢が告げるサイン</div>
        <div className="detail-text">{reading.sign_message}</div>
      </div>

<div className="card keywords-card">
        <div className="card-title-row">
          <span className="card-step">04</span>
          <h2 className="card-title">夢に現れた象徴</h2>
          <span className="card-title-en">Symbol Analysis</span>
        </div>
        <div className="keyword-list">
          {(reading.keywords || []).map((k, i) => {
            const sticker = window.STICKERS.find(s => s.id === k.symbol_id)
                       || window.STICKERS.find(s => s.id === reading.primary_symbol)
                       || window.STICKERS[0];
            return (
              <div key={i} className="keyword-row">
                <div className="keyword-icon">{sticker.render()}</div>
                <div className="keyword-word">{k.word}</div>
                <div className="keyword-meaning">{k.meaning}</div>
              </div>
            );
          })}
        </div>
      </div>

<div className="themes">
        {order.map(k => {
          const t = reading.themes?.[k] || { score: 3, text: "" };
          return (
            <div key={k} className={`theme-card ${k}`}>
              <div className="theme-icon"><ThemeIcon kind={k}/></div>
              <div className="theme-name">{themeMeta[k].jp}</div>
              <div className="theme-name-en">{themeMeta[k].en}</div>
              <ScoreDots score={t.score}/>
              <div className="theme-text">{t.text}</div>
            </div>
          );
        })}
      </div>

<div className="card advice-card">
        <div className="card-title-row">
          <span className="card-step">05</span>
          <h2 className="card-title">今日のアドバイス</h2>
          <span className="card-title-en">Today's Recommendation</span>
        </div>
        <div className="advice-quote">{reading.advice}</div>
      </div>

<div className="actions">
        <button className="btn-divine" onClick={onShare}>画像で保存 ・ シェア</button>
        <button className="btn-text" onClick={onReset}>もう一度診断する</button>
      </div>

<LineRegisterBlock />
    </div>
  );
}

function HomeLanding({ onStart }) {
  return (
    <section className="home-landing card">
      <div className="home-kicker">AI DREAM READING</div>
      <h2>夢の内容から、今の気持ちをやさしく整理します</h2>
      <p>
        怖い夢や不思議な夢を、不吉な意味として決めつけず、
        「今なにが不安なのか」「今日は何を一つ整えると楽になるか」に置き換えて診断します。
      </p>
      <div className="home-card-strip" aria-label="夢診断カードの例">
        {HOME_DREAM_CARDS.map(card => (
          <article className="home-dream-card" key={card.roman}>
            <img src={card.image} alt={`${card.nameJp}のカード`} loading="lazy" />
            <div className="home-dream-card-meta">
              <span>{card.roman}</span>
              <strong>{card.nameJp}</strong>
            </div>
          </article>
        ))}
      </div>
      <div className="home-points">
        <span>37種類の夢シンボルカード</span>
        <span>1日3回まで無料診断</span>
        <span>SNSログインで利用確認</span>
      </div>
      <button className="btn-divine home-start" onClick={onStart}>夢を診断する</button>
      <p className="home-note">入力内容と診断結果は、診断履歴・サービス改善のため保存されます。</p>
    </section>
  );
}

// ========== AI integration ==========
async function divine({ dream, mood, people, colors, socialAuth }) {
  const symbolList = window.STICKERS.map(s => `${s.id}:${s.name}`).join(", ");
  let fixedDiagnosis = buildFixedDiagnosis({ dream, mood, people, colors });
  let fixedDiagnosisForPrompt = JSON.stringify(fixedDiagnosis, null, 2);
  const prompt = `あなたは「夢 診断」サイト専用の、優しく詩的な夢分析AIです。
このサイトには診断結果ページがすでにあり、返答はそのページの各表示欄にそのまま入ります。
UIや構成に合うよう、必ず下記JSONフォーマットだけで返してください。前置き、説明、Markdown、コードフェンスは禁止です。

【役割】
あなたの役割は「夢の分析を当てにいくこと」ではありません。
サイト側で決まっている夢診断の構造・カード・象徴をもとに、ユーザーが安心できるように、やさしく寄り添った言葉へ整えることです。

ゴールは次の2つです。
1. ユーザーに「怖い夢にも、自分を責めなくていい意味がある」と感じてもらう。
2. 今日を少し前向きに過ごせるよう、背中を押す。

【診断文の基本方針】
- 分析結果は固定情報として扱う。過度に新しい解釈を足さない。
- 夢の内容を、不吉・予言・運命として断定しない。
- ユーザーの不安を増やさない。怖がらせない。依存させない。
- 「あなたはこうです」と決めつけず、「そう感じていたのかもしれません」「少し疲れていた可能性があります」のように柔らかく言う。
- 文章の中心は、分析の正しさではなく、安心・自己受容・小さな前進。
- 夢の象徴は、専門用語ではなく日常の言葉に翻訳する。
- 最後は必ず、今日できる小さな行動や気持ちの置き方で背中を押す。

【LPノウハウ由来の文章設計】
占いジャンルの文章は「当てる」より「誰にも言えない不安を安全に整理できる」ことが大切です。
文章の流れは、次を守ってください。

曖昧な不安をやさしく言語化する
→ 夢の具体場面に軽く触れる
→ それを日常の気持ちへ翻訳する
→ ユーザーを責めずに安心させる
→ 今日できる小さな一歩で背中を押す

【文章トーン】
- 友達や相談相手に近い、穏やかな言葉。
- 説教しない。
- 鑑定士っぽく言い切りすぎない。
- ポエムに逃げない。
- 「つまり、今どうすれば少し楽になるか」が分かる文章にする。

【禁止表現】
- 未来断定: 必ず起きます、運命です、復縁できます、成功します。
- 不安煽り: このままだと危険です、見逃すと悪化します。
- スピリチュアル過多: 魂、運命、内なる光、覚醒、浄化、宇宙、心の鍵穴。
- 意味が曖昧な抽象語の連発: 流れ、整う、開く、導き、サインです、映しています。
- 象徴辞典のような説明だけで終わる文章。

【OKの方向性】
- 「この夢は、何かを決める前にもう少し確認したい気持ちがある時に見やすい夢です。」
- 「怖い夢だったとしても、あなたを責める夢ではありません。心が少し立ち止まって、整理する時間を欲しがっていたのかもしれません。」
- 「今日は大きな結論を急がず、気になっていることを一つだけメモしてみてください。それだけでも少し落ち着きやすくなります。」

【NGの方向性】
- 「鍵は秘密・確認・開けたい扉を表します。」だけで終わる。
- 「あなたは自分で選び直したい気持ちが強くなっています。」と断定だけする。
- 「扉を急いで開けるより、鍵が合うかを確かめるように」など、比喩が続いて現実の行動が分からない。

夢の内容に登場する物・場所・色・人物を象徴として分析し、感情メタファーとして解釈してください。
ユーザーのヒアリング内容（夢本文、気分、登場人物、色）は必ず診断文のどこかに具体的に含めてください。未入力の項目は無理に作らず、入力された項目を優先してください。
夢本文の中に「赤い部屋」「青い空」「白い光」「暗い背景」「夕焼け」「黒い影」のような色・背景・明暗・光の記載がある場合は、色選択肢と重複していても無視せず、本文側の文脈を優先して診断材料にしてください。
選択肢の色・人物・気分は補助情報です。夢本文と選択肢に重複がある場合は、重複として捨てず「夢本文にも選択にも現れた強い象徴」として扱い、ただし同じ内容を文章上で不自然に二重説明しないでください。
表示崩れを避けるため、各項目の文字数目安を必ず守ってください。

【利用者の夢】
${dream}

【気分】${mood || "不明"}
【登場】${people.join("、") || "不明"}
【色】${colors.join("、") || "不明"}

【利用可能な象徴ID（symbol_id）】
${symbolList}

【固定診断結果（サイト側で決める。DEEPSEEKは変更しない）】
${fixedDiagnosisForPrompt}

【37種類の夢シンボルカード】
夢に最も強く出ている中心シンボルを「利用可能な象徴ID」から1つ選び、primary_symbolに入れてください。結果画面には uploads/symbol-cards/ の37種類シンボルカードのうち、primary_symbolに対応するカード画像が大きく表示されます。補助シンボルはsecondary_symbolとkeywordsに入れてください。type_code / dream_type_jp / card_name_jp / card_name_en / roman はサイト側で中心シンボルから固定表示します。

【結果ページとの対応 / 出力内容の順番】
DEEPSEEKが考えるのは次の6項目だけです。他の項目（カード、中心シンボル、夢のまとめ、象徴リスト、カード説明）は固定診断結果を使います。

1. DREAM ANALYSIS = main_message:
   - 固定診断結果をもとに、ユーザーへ寄り添う中心メッセージを書く。
   - 3文構成。気持ちの言語化 → 夢の場面の受け止め → 安心と小さな一歩。
2. 夢が告げるサイン = sign_message:
   - 夢から受け取れる、安心できるメッセージを書く。
   - 今日、何を急がなくてよいか / 何を一つやればよいかを入れる。
3. 恋愛 = themes.love:
   - 入力情報が少ない場合は断定せず、相手を操作する助言にしない。
   - 安心できる見方と、今日できる小さな行動を書く。
4. 仕事 = themes.work:
   - 責めない。頑張れで終わらせない。
   - 今日一つだけ進めるなら何かを書く。
5. 対人 = themes.relations:
   - 距離感をやさしく整える言葉にする。
   - 返信・相談・断り方など、日常の小さな行動へ落とす。
6. 今日のアドバイス = advice:
   - 最後に読む背中押しの言葉。
   - 大丈夫、急がなくていい、一つだけやればいいという安心感を入れる。

【出力ルール】
- JSONとしてパース可能な形式だけを返す。コメント、注釈、末尾カンマは禁止。
- 文字列内の改行は避ける。
- symbol_id は必ず上の「利用可能な象徴ID」から選ぶ。存在しないIDを作らない。
- primary_symbol と secondary_symbol は別のIDにする。補助象徴が不要な場合のみ secondary_symbol は空文字にする。
- score は整数。match_score は 85〜99、themes の score は 1〜5。
- aura_color.hex は必ず #RRGGBB。name は和色風の短い名前。
- keywords は3〜5個。夢本文から印象的な語を拾い、wordは2〜5文字程度にする。

【出力フォーマット】
{
  "main_message": "（DREAM ANALYSIS。150〜220字。3文構成。固定診断結果をもとに、夢から読み取れる気持ちをやわらかく言語化し、安心と今日の小さな一歩で背中を押す）",
  "sign_message": "（夢が告げるサイン。90〜140字。今日何を急がなくてよいか、何を一つやればよいかをやさしく伝える）",
  "themes": {
    "love":      { "score": 3, "text": "（恋愛・愛情面。55〜85字。断定せず、安心できる見方と今日の小さな行動を書く）" },
    "work":      { "score": 3, "text": "（仕事・学び・行動面。55〜85字。責めずに、今日一つだけ進める行動を書く）" },
    "relations": { "score": 3, "text": "（対人関係。55〜85字。距離感をやさしく整える言葉と小さな行動を書く）" }
  },
  "advice": "（今日のアドバイス。80〜120字。最後に読む背中押しの言葉。大丈夫、急がなくていい、一つだけやればいいという安心感を含める）"
}

JSON以外は何も出力しないでください。`;

let raw;
  try {
    const response = await fetch("/api/dream-diagnosis", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ dream, mood, people, colors, symbolList, fixedDiagnosis, social_auth_provider: socialAuth?.provider || "" })
    });
    const data = await response.json().catch(() => ({}));
    if (!response.ok) {
      if (response.status === 429 && data.reason === "account_limit") {
        const limitError = new Error("今日の無料診断は3回までです。明日また、気になった夢を聞かせてください。");
        limitError.noModelFallback = true;
        throw limitError;
      }
      if (response.status === 429 && data.reason === "site_daily_limit") {
        const limitError = new Error("今日は診断が混み合っています。少し時間をおいてから、もう一度試してください。");
        limitError.noModelFallback = true;
        throw limitError;
      }
      if (response.status === 429 && data.reason === "deepseek_generation_limit") {
        const limitError = new Error("今日は夢分析の生成枠がいっぱいです。明日また試してください。");
        limitError.noModelFallback = true;
        throw limitError;
      }
      if (response.status === 401) {
        const authError = new Error("診断するにはログインが必要です。Google・X・Instagramのいずれかでログインしてください。");
        authError.noModelFallback = true;
        throw authError;
      }
      throw new Error("api failed");
    }
    if (data.fixedDiagnosis) {
      fixedDiagnosis = data.fixedDiagnosis;
      fixedDiagnosisForPrompt = JSON.stringify(fixedDiagnosis, null, 2);
    }
    raw = data.text;
    if (!raw) throw new Error("empty result");
  } catch (e) {
    if (e?.noModelFallback) throw e;
    if (window.claude && typeof window.claude.complete === "function") {
      try {
        raw = await window.claude.complete(prompt);
      } catch (fallbackError) {
        throw new Error("夢分析士にうまく届かなかったみたい…");
      }
    } else {
      throw new Error("夢分析士にうまく届かなかったみたい…");
    }
  }

// strip code fences if any
  let text = raw.trim();
  if (text.startsWith("```")) {
    text = text.replace(/^```(?:json)?\s*/i, "").replace(/```\s*$/, "");
  }
  // grab first { ... last }
  const first = text.indexOf("{");
  const last = text.lastIndexOf("}");
  if (first >= 0 && last > first) text = text.slice(first, last + 1);

let parsed;
  try {
    parsed = JSON.parse(text);
  } catch (e) {
    throw new Error("結果が読み取れませんでした");
  }

// Fixed analysis fields are owned by the site, not by the model.
  parsed.primary_symbol = fixedDiagnosis.primary_symbol;
  parsed.secondary_symbol = fixedDiagnosis.secondary_symbol;
  const symbolMeta = getDreamSymbolMeta(parsed.primary_symbol);
  parsed.roman = symbolMeta.no;
  parsed.type_code = symbolMeta.typeCode;
  parsed.dream_type_jp = symbolMeta.typeJp;
  parsed.card_name_jp = symbolMeta.nameJp;
  parsed.card_name_en = symbolMeta.nameEn;
  parsed.aura_color = parsed.aura_color && parsed.aura_color.hex
    ? parsed.aura_color
    : { hex: "#C89255", name: "蜜色" };
  parsed.match_score = typeof parsed.match_score === "number" ? parsed.match_score : 92;
  parsed.main_message = parsed.main_message || "あなたの夢は、まだ言葉にならない予感を運んでくれました。";
  parsed.dream_summary = fixedDiagnosis.dream_summary;
  parsed.type_description = fixedDiagnosis.type_description;
  parsed.themes = parsed.themes || {};
  ["love", "work", "relations"].forEach(k => {
    if (!parsed.themes[k]) parsed.themes[k] = { score: 3, text: "" };
  });
  parsed.keywords = fixedDiagnosis.keywords;
  parsed.sign_message = parsed.sign_message || fallbackSignMessage(parsed);
  parsed.advice = parsed.advice || "今日は予定を一つ減らし、静かに考えを整理する時間を作ってください。夢に出た小さなサインは、心を休ませる必要を示しています。";
  parsed.share_summary = parsed.share_summary || parsed.main_message || "夢に現れた象徴から、今日の心の流れを読み解きました。";
  return parsed;
}

// ========== App ==========
function App() {
  const [phase, setPhase] = useState("home"); // home | input | loading | result | error
  const [reading, setReading] = useState(null);
  const [error, setError] = useState(null);
  const [pendingInput, setPendingInput] = useState(null);
  const [shareOpen, setShareOpen] = useState(false);
  const [shareImg, setShareImg] = useState(null); // dataURL
  const [shareBusy, setShareBusy] = useState(false);
  const [socialAuth, setSocialAuth] = useState(null);
  const [authProviders, setAuthProviders] = useState(SOCIAL_LOGIN_PROVIDERS.map(p => ({ ...p, enabled: false })));
  const [loginOpen, setLoginOpen] = useState(false);
  const shareRef = useRef(null);
  const date = useMemo(() => todayInfo(), []);
  const refreshAuth = async () => {
    try {
      const config = await fetchAuthConfig();
      const mergedProviders = SOCIAL_LOGIN_PROVIDERS.map(provider => ({
        ...provider,
        ...(config.providers || []).find(item => item.id === provider.id),
      }));
      setAuthProviders(mergedProviders);
      window.__DREAM_PREVIEW_LOGIN_ENABLED__ = !!config.preview_login_enabled;
      window.__DREAM_PREVIEW_LOGGED_IN__ = !!config.user;
      setSocialAuth(config.user || null);
      if (config.user) {
        try {
          if (sessionStorage.getItem("yumeshindan_after_login") === "input") {
            sessionStorage.removeItem("yumeshindan_after_login");
            setPhase("input");
          }
        } catch (e) {}
      }
    } catch (e) {
      setAuthProviders(SOCIAL_LOGIN_PROVIDERS.map(p => ({ ...p, enabled: false })));
      window.__DREAM_PREVIEW_LOGIN_ENABLED__ = true;
      window.__DREAM_PREVIEW_LOGGED_IN__ = false;
      setSocialAuth(null);
    }
  };

useEffect(() => {
    refreshAuth();
  }, []);

const downloadShareImage = () => {
    if (!shareImg || shareImg === "error") return;
    const a = document.createElement("a");
    a.href = shareImg;
    a.download = `yumeshindan_x_${date.iso}.png`;
    document.body.appendChild(a);
    a.click();
    a.remove();
  };

const postToX = async () => {
    const clipText = (value, max) => {
      const text = String(value || "").trim();
      return text.length > max ? `${text.slice(0, max)}…` : text;
    };
    const dreamLine = clipText(reading?._dream || "今朝見た夢", 28);
    const typeName = reading?.dream_type_jp || "夢タイプ";
    const summaryLine = clipText(reading?.share_summary || reading?.main_message || "夢に出たしるしが、今の心を映していた。", 44);
    const buzzText = `夢をAI夢診断にかけたら、思ったより刺さった。

「${dreamLine}」
診断：${typeName}
${summaryLine}

自分の夢も見てほしい人は試してみて。
https://miniappliquidus.duckdns.org/
#今朝の夢診断 #夢占い`;
    const text = encodeURIComponent(buzzText);
    if (shareImg && shareImg !== "error") {
      try {
        const blob = await (await fetch(shareImg)).blob();
        if (navigator.share && navigator.canShare && navigator.canShare({ files: [new File([blob], `yumeshindan_x_${date.iso}.png`, { type: "image/png" })] })) {
          const file = new File([blob], `yumeshindan_x_${date.iso}.png`, { type: "image/png" });
          await navigator.share({ files: [file], text: buzzText });
          return;
        }
      } catch (e) {}
    }
    downloadShareImage();
    window.open(`https://twitter.com/intent/tweet?text=${text}`, "_blank", "noopener,noreferrer");
  };

return (
    <div className="page">
      <header className="header">
        <div className="date-pill">
          <span className="moon-glyph"><MoonGlyph kind={date.phaseGlyph} size={14}/></span>
          <span>{date.en}</span>
          <span className="dot"></span>
          <span style={{fontFamily: "var(--font-jp)", letterSpacing: "0.3em", paddingLeft: "0.3em"}}>{date.phaseName}</span>
        </div>
        <h1 className="brand-title">夢　診　断</h1>
        <div className="brand-sub">YUMESHINDAN · A MORNING DREAM ANALYSIS</div>
        <div className="ornament">
          <span className="line"></span>
          <svg width="14" height="14" viewBox="0 0 14 14"><path d="M 7,1 L 8,6 L 13,7 L 8,8 L 7,13 L 6,8 L 1,7 L 6,6 Z" fill="currentColor"/></svg>
          <span className="line"></span>
        </div>
        <p className="brand-tagline">今朝の夢から、あなたの今日を読み解く</p>
      </header>

<AuthStatusBar socialAuth={socialAuth} onLogout={logoutSocial} onLogin={() => setLoginOpen(true)} providers={authProviders}/>

{phase === "home" && <HomeLanding onStart={startDiagnosisFromHome}/>} 
      {phase === "input" && <InputForm onSubmit={onSubmit} initialData={pendingInput}/>}
      {phase === "loading" && <LoadingPanel/>}
      {phase === "result" && reading && (
        <ResultPanel
          reading={reading}
          dateStr={date.full}
          onReset={onReset}
          onShare={generateShareImage}
        />
      )}
      {phase === "error" && (
        <div className="card">
          <div style={{textAlign: "center", padding: "32px 16px"}}>
            <div style={{fontSize: 32, marginBottom: 12}}>✦</div>
            <h3 style={{fontFamily: "var(--font-jp)", fontSize: 16, letterSpacing: "0.2em", marginBottom: 12}}>{error}</h3>
            <button className="btn-text" onClick={retryLastInput}>もう一度試す</button>
          </div>
        </div>
      )}

<div className="footer">
        <span>✦</span><span>Made with care for your morning</span><span>✦</span>
      </div>

{/* Offscreen share-card for capture */}
      {reading && (
        <div className="share-stage" aria-hidden="true">
          <window.ShareCard ref={shareRef} reading={reading} dateStr={date.full}/>
        </div>
      )}

<SocialLoginGate
        open={loginOpen}
        onClose={() => setLoginOpen(false)}
        socialAuth={socialAuth}
        providers={authProviders}
        onLogin={startSocialLogin}
        onPreviewLogin={startPreviewLogin}
        onContinue={continueAfterLogin}
        onLogout={logoutSocial}
      />

{shareOpen && (
        <ShareModal
          img={shareImg}
          busy={shareBusy}
          onClose={() => setShareOpen(false)}
          onDownload={downloadShareImage}
          onCopy={copyShareImage}
          onPostX={postToX}
        />
      )}
    </div>
  );
}

// ========== ShareModal ==========
function ShareModal({ img, busy, onClose, onDownload, onCopy, onPostX }) {
  return (
    <div className="share-backdrop" onClick={onClose}>
      <div className="share-modal" onClick={(e) => e.stopPropagation()}>
        {busy || !img ? (
          <div className="share-preview-placeholder">
            <span style={{opacity: 0.8}}>画像を生成中<span className="dots"></span></span>
          </div>
        ) : img === "error" ? (
          <div className="share-preview-placeholder">
            <span>画像が作れませんでした…</span>
          </div>
        ) : (
          <img className="share-preview" src={img} alt="診断結果"/>
        )}
        <div className="share-actions">
          <button className="primary" onClick={onPostX} disabled={busy || !img || img === "error"}>Xに投稿する</button>
          <button onClick={onDownload} disabled={busy || !img || img === "error"}>画像を保存</button>
          <button onClick={onCopy} disabled={busy || !img || img === "error"}>コピー</button>
          <button onClick={onClose}>閉じる</button>
        </div>
      </div>
    </div>
  );
}

window.App = App;