わんちゃんの相談室

解剖

• 起点

  画面右下の便利機能からAI相談へ移動する。

• 開始画面

  100dvhの全画面で、分野（ごはん・栄養／健康・からだ／しつけ・お出かけ／犬の気持ち・行動・2列×2段）→ その分野の相談役2人（寄り添い重視／具体策重視の札・顔写真・AIの札・プロフィールの開閉）の2段で選ぶ。PetSelectorとamberの開始CTAを続け、相談役を選ぶまでCTAは押せない。

• 会話画面

  100dvhの全画面で、相談役の顔写真・名前・肩書き・AIの札、最初の挨拶、履歴、提案、入力、送信、エラーを表示する。分野ごとに「ご利用前のお願い」をタイムラインのカードで出し、同意するまで入力欄をロックする（90日のブランクで再表示）。回答は太字・小見出し・箇条書きだけのMarkdownで描き、注意書きは回答の前に置く。器の高さはvisualViewportに追従し、自動スクロールはメッセージ領域の中に閉じる。

• 安全境界

  AI送信前同意、分野ごとの「ご利用前のお願い」（サーバの送信ゲートでも同じ判定）、回答前の注意書き、緊急時案内、利用上限のお知らせを保持する。

状態

• FAB閉・開

  便利機能の主ボタンと相談メニューを切り替える。

• 開始・読込中

  ペット選択は任意。開始中はspinnerとdisabledを合成する。

• 空会話

  同意前は「ご利用前のお願い」のカードだけを出し入力欄をロックする。同意後は相談役の挨拶と分野ごとの3つのsuggestionを出す。

• 会話・異常

  送信直後の表示、入力中表示、エラー、利用上限のお知らせを同じ面で返す。

仕様値

画面

開始・会話ともh-[100dvh]

可読幅

開始 max 672px / 会話 max 768px

開始CTA

amber-600、h 56px、rounded-2xl

会話色

bg-primary / bg-card

入力

48px以上、最大150px、safe-area対応。Enterは改行・Ctrl/⌘+Enterで送信

FAB

右下固定、amber main action