/*
 * AI案内 段2: 写真の相談（func-ai-soudan.php が読み込む）。2026-10-02・判断台帳 R-210
 * 🔴 ここ以外の部品に効かせない。セレクタは必ず #eg48-ag-panel から始め、相談の部品（.sd-*）だけに当てる。
 *    段1の見た目（ai-guide.css）は上書きしない。例外は2つ: 選択肢の並べ方（中央そろえ・下の「選択肢の並べ方」）と、
 *    相談の文字の欄に入力している間だけパネルの高さと下の帯を変えること（下の「文字の欄に入力している間」。.sd-typing が付いている間だけ効く）。
 *    このファイルは試験表示（?eg48_aiguide=1）のときだけ読まれるので、試験表示なしの段1は変わらない。
 * 🔴 同意のチェックは見える・押せる（opacity:0 の全幅などにしない。2026-08-08 予約フォームの事故）。
 */
/* 段1の「#eg48-ag-panel .ag-choices button」（白地の丸ボタン）より強くするため .ag-choices button.sd-* と書く */
#eg48-ag-panel .sd-start,#eg48-ag-panel .ag-choices button.sd-next,#eg48-ag-panel .ag-choices button.sd-send{display:block;width:100%;margin-top:8px;border:0;border-radius:22px;
  background:#1a8fd1;color:#fff;font-weight:bold;font-size:15px;padding:11px;cursor:pointer;line-height:1.3}

/* 選択肢の並べ方: 全部の段（段1の窓／ドア・県・市区町村、相談の中の選択肢）で中央そろえ（R-214）。段1の左の字下げ（48px）はやめる */
#eg48-ag-panel .ag-log .ag-choices{padding-left:0}
/* 中で地方・グループごとに分けた並び（県・市区町村）も同じく中央に。地方名も中央 */
#eg48-ag-panel .ag-log .ag-choices,#eg48-ag-panel .ag-log .ag-region,#eg48-ag-panel .ag-log .ag-group{justify-content:center}
#eg48-ag-panel .ag-log .ag-region-name{text-align:center}

/* 入口の枠（R-214 の最後の行・案1）。最初の画面・「分からない・その他」の後・最後の画面の3か所で同じ見た目。文言は ai-soudan.js の CARD
   白地に細いオレンジの枠・影なし・中央そろえ。ボタンは白地にオレンジの線（塗りにしない。目立たせすぎない） */
#eg48-ag-panel .sd-card{margin:18px 0 12px;border:1.5px solid #f0a040;border-radius:16px;background:#fff;padding:14px 14px 16px;text-align:center}
#eg48-ag-panel .sd-card-h{margin:0 0 4px;font-size:15px;font-weight:bold;color:#333;line-height:1.4}
#eg48-ag-panel .sd-card-sub{margin:0 0 12px;font-size:12.5px;color:#555;line-height:1.5}
#eg48-ag-panel .sd-card-sub span{display:inline-block}
#eg48-ag-panel .sd-card .sd-start{display:flex;align-items:center;justify-content:center;gap:8px;width:auto;min-width:70%;margin:0 auto;
  background:#fff;color:#d96a00;border:2px solid #e07a10;font-size:16px;padding:10px 16px;border-radius:28px}
#eg48-ag-panel .sd-card .sd-start:active{background:#fff3e6}
#eg48-ag-panel .sd-cam{width:26px;height:26px;flex:none}
#eg48-ag-panel .sd-cam-body{fill:#d96a00}
#eg48-ag-panel .sd-cam-lens{fill:#fff;stroke:#e06a00;stroke-width:2}
/* 最後の画面では白くまの返事の吹き出しの中に入る（一文 → 枠 → 業者さんのリンク）。吹き出しは幅が狭いので余白だけ詰める */
#eg48-ag-panel .ag-bb .sd-card{margin:10px 0 2px;padding:12px 8px 14px}
/* 写真の相談の間は、入った所より後ろの段1の部品を隠す（ai-soudan.js の hideAfter。戻ると外す） */
#eg48-ag-panel .ag-log>.sd-hide{display:none}

#eg48-ag-panel .ag-choices button.sd-next:disabled,#eg48-ag-panel .ag-choices button.sd-send:disabled{opacity:.45;cursor:default}
#eg48-ag-panel .ag-choices.sd-photo,#eg48-ag-panel .ag-choices.sd-form{display:block}

/* 写真を選ぶ: 押せるのはラベル全体。ファイルの欄そのものは見えない所に置く（ラベルを押すと開く） */
#eg48-ag-panel .sd-pick{position:relative;display:block;border:2px dashed #1a8fd1;border-radius:12px;background:#fff;color:#1a8fd1;
  text-align:center;font-weight:bold;padding:14px;cursor:pointer}
#eg48-ag-panel .sd-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
#eg48-ag-panel .sd-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
#eg48-ag-panel .sd-list:empty{display:none}
#eg48-ag-panel .sd-fig{position:relative;margin:0;width:84px;height:84px}
#eg48-ag-panel .sd-fig img{width:84px;height:84px;object-fit:cover;border-radius:10px;display:block}
#eg48-ag-panel .ag-choices .sd-fig button.sd-del{position:absolute;top:-6px;right:-6px;width:26px;height:26px;border-radius:50%;border:0;padding:0;
  background:#555;color:#fff;font:bold 12px/26px sans-serif;cursor:pointer}
#eg48-ag-panel .sd-thumbs{display:flex;gap:6px;padding:6px}
#eg48-ag-panel .sd-thumbs img{width:64px;height:64px;object-fit:cover;border-radius:8px;display:block}

/* 文字の欄 */
#eg48-ag-panel .sd-text,#eg48-ag-panel .sd-email,#eg48-ag-panel .sd-nick{display:block;width:100%;box-sizing:border-box;border:1.5px solid #b9d3e6;border-radius:10px;
  background:#fff;padding:10px;font-size:16px;line-height:1.5;color:#222}
#eg48-ag-panel .sd-text{resize:vertical;min-height:96px}

/* 文字の欄に入力している間（スマホの幅だけ。PC の窓は変えない）。.sd-typing の付け外しと変数は ai-soudan.js の syncTyping() の1か所
   下の帯（ひとつ戻る／はじめから）を隠し、パネルをキーボードを除いた見える範囲（--sd-vv-top / --sd-vv-h）に合わせる。
   変数が無いとき（visualViewport が無い端末）は今までどおり全画面。iPhone はキーボードが開いても全画面のパネルが縮まないため（2026-10-03 社長が実機で確認） */
@media (max-width:767px){
  #eg48-ag-panel.sd-typing{top:var(--sd-vv-top,0px);bottom:auto;height:var(--sd-vv-h,100%)}
  #eg48-ag-panel.sd-typing .ag-foot{display:none}
}

/* 同意（見える・押せる。チェックは22pxの実物）
   🔴 テーマが入力欄に appearance:none を当てていて、そのままだとチェックの四角が描かれず「中心を指すと自分が返るのに目に見えない」
      状態になる（2026-10-02 実測。押せば入るが人には見えない）。ブラウザ本来のチェックに戻す */
#eg48-ag-panel .sd-agree{display:flex;gap:10px;align-items:flex-start;background:#fff7e6;border:1.5px solid #f0b060;border-radius:10px;
  padding:12px;font-size:13.5px;line-height:1.6;cursor:pointer;color:#333}
#eg48-ag-panel .sd-agree input[type=checkbox]{-webkit-appearance:checkbox !important;appearance:auto !important;flex:none;width:22px;height:22px;margin:1px 0 0;
  opacity:1;position:static;cursor:pointer;accent-color:#1a8fd1}

/* 機械の投稿を弾く見えない欄（人には見えない・押せない） */
#eg48-ag-panel .sd-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

#eg48-ag-panel .sd-err{margin:8px 0 0;color:#c0392b;font-size:13px;font-weight:bold}
#eg48-ag-panel .sd-note{margin:6px 0 0;color:#555;font-size:12.5px}
#eg48-ag-panel .sd-done{margin:4px 0 12px 48px;border:2px solid #2bb3a3;border-radius:12px;background:#fff;padding:12px 14px}
#eg48-ag-panel .sd-done p{margin:0}
#eg48-ag-panel .sd-done p+p{margin-top:4px;font-size:13px;color:#444}
#eg48-ag-panel .sd-id{color:#1f9a8b;font-size:18px;letter-spacing:.03em;white-space:nowrap}

/* 押して選ぶ項目（R-212。定義は func-soudan-choices.php）。選んだボタンは色を変え、aria-pressed でも分かるようにする */
#eg48-ag-panel .sd-details .sd-group{margin:0 0 10px}
#eg48-ag-panel .sd-details .sd-glabel{margin:0 0 4px;font-size:13px;font-weight:bold;color:#444}
#eg48-ag-panel .sd-opts{display:flex;flex-wrap:wrap;gap:6px}
#eg48-ag-panel .ag-choices .sd-opts button,#eg48-ag-panel .ag-choices.sd-opts button{margin:0}
#eg48-ag-panel .ag-choices button.sd-on{background:#1a8fd1;border-color:#1a8fd1;color:#fff}
#eg48-ag-panel .sd-maker{display:block;width:100%;box-sizing:border-box;border:1.5px solid #b9d3e6;border-radius:10px;background:#fff;padding:8px 10px;font-size:16px;color:#222}

/* 写真の欄の下: 撮る前の注意と、写真が撮れない方の行き先 */
#eg48-ag-panel .sd-caution,#eg48-ag-panel .sd-nophoto{margin:8px 0 0;font-size:12.5px;color:#555;line-height:1.6}
#eg48-ag-panel .sd-nophoto a{color:#1a8fd1;text-decoration:underline}