/* parts.css — サイト固有のスタイル。共通デザイン（style.css）を上書きしたい時と、
   このサイトだけの機能のスタイルをここに書く。

   ⚠ チャットは parts.php が出す機能なので、見た目もここが持つ（style.css には置かない）。
      チャットを使わないサイトは parts.php の関数ごと外せば、このCSSも不要になる。

   ⚠ 回答まわりの意匠は LIVE PORTAL に合わせてある（2026-08-18）。ただし LP の生の色コードは
      使わず、style.css の :root の5色を白に混ぜて作る。LP の緑（emerald）は CPU に無い色みなので、
      「はい」は --blue、「いいえ」は --red に置き換えた。 */

:root {
  --chat-sub:      #7C8088;  /* --text を白地に55%。件数・注記などの補足文字 */
  --chat-line:     #CFD0D3;  /* --text を白地に20%。回答の左に引く縦線 */
  --chat-red-pale: #F9EFED;  /* --red を白地に8%。「いいえ」に触れた時の地 */
}

.chat-fab { position: fixed; right: 24px; bottom: 24px; display: inline-flex; align-items: center; gap: 8px; background: var(--main); color: var(--white); border: none; padding: 14px 20px; border-radius: 999px; font-size: 14px; font-weight: bold; box-shadow: var(--shadow-md); cursor: pointer; }
.chat-fab:hover { opacity: .9; }

/* チャットの埋め込みモーダル（右下ボタンから開く。単独ページは持たない） */
.chat-modal { position: fixed; right: 24px; bottom: 88px; width: min(380px, calc(100vw - 48px)); height: min(560px, calc(100vh - 140px));
  background: var(--white); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; display: flex; flex-direction: column; z-index: 60; }
.chat-modal[hidden] { display: none; }
.chat-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--blue); color: var(--white); font-weight: bold; }
.chat-modal__close { background: none; border: none; color: var(--white); font-size: 20px; line-height: 1; cursor: pointer; }
.chat-modal__frame { flex: 1; width: 100%; border: 0; }

/* チャット埋め込み（/chat/?embed=1・iframe の中身）。
   やり取り部分だけが伸びて、入力欄は下に貼り付いたままにする。 */
/* iframe の中は通常ページの余白・最大幅・グリッドをすべて外して、枠いっぱいに使う */
body.is-chat-embed { background: var(--off-white); }
body.is-chat-embed main { max-width: none; margin: 0; padding: 0; }
body.is-chat-embed .layout { display: block; gap: 0; }
.chat-page { display: flex; flex-direction: column; height: 100vh; }
.chat-page__main { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.chat-page__msg-row { display: flex; }
.chat-page__msg-row--user { justify-content: flex-end; }
.chat-page__bubble { max-width: 85%; background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.75; }
/* 自分の発言はメインカラーで塗って、右に寄せる */
.chat-page__bubble--user { background: var(--main); border-color: var(--main); color: var(--white); }
.chat-page__bubble-text { margin: 0; }
.chat-page__matches-count { margin: 0 0 12px; font-size: 12px; color: var(--chat-sub); }

.chat-page__match { border-bottom: 1px solid var(--border); padding: 8px 0; }
/* 後ろに評価欄が続くので :last-child では当たらない（details だけを見る） */
.chat-page__match:last-of-type { border-bottom: 0; }
/* 開閉の三角は残す（押せる場所だと分かるため）。太字にはせず中太で置く */
.chat-page__match-q { font-size: 14px; font-weight: 500; color: var(--text); cursor: pointer; }
.chat-page__match-category { margin-left: 8px; font-size: 12px; font-weight: normal; color: var(--chat-sub); white-space: nowrap; }
/* 回答は左に縦線を引いて字下げする。質問と回答のかたまりが目で分かれる */
.chat-page__match-answer { margin-top: 12px; padding-left: 20px; border-left: 2px solid var(--chat-line); font-size: 14px; line-height: 1.625; }
.chat-page__no-match-hint { margin: 8px 0 0; font-size: 12px; color: var(--chat-sub); }
.chat-page__inline-link { color: var(--blue); text-decoration: underline; }

/* 考え中の3点 */
.chat-page__bubble--loading { display: flex; gap: 5px; align-items: center; }
.chat-page__typing-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--on-dark-sub); animation: chat-typing 1.2s infinite ease-in-out; }
.chat-page__typing-dot:nth-child(2) { animation-delay: .15s; }
.chat-page__typing-dot:nth-child(3) { animation-delay: .3s; }
@keyframes chat-typing { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chat-page__typing-dot { animation: none; } }

.chat-page__feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12px; }
.chat-page__feedback-label { color: var(--chat-sub); }
/* 丸いボタンは評価と候補の2つ。形・地色・文字サイズは共通で、枠線の色と余白だけ各クラスが持つ */
.chat-page__feedback-btn, .chat-page__suggestion-btn { background: var(--white); border-radius: 999px; font-size: 12px; cursor: pointer; }
.chat-page__feedback-btn { display: inline-flex; align-items: center; gap: 4px; border: 1px solid transparent; padding: 4px 12px; }
/* LP は はい＝緑／いいえ＝赤。CPU に緑は無いので「はい」はメインカラーで受ける */
.chat-page__feedback-btn--yes { border-color: var(--main-pale); color: var(--blue); }
.chat-page__feedback-btn--yes:hover { background: var(--main-pale); }
.chat-page__feedback-btn--no { border-color: var(--chat-red-pale); color: var(--red); }
.chat-page__feedback-btn--no:hover { background: var(--chat-red-pale); }
.chat-page__feedback-result { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12px; color: var(--chat-sub); }
.chat-page__feedback-result--yes { color: var(--blue); }

.chat-page__footer { flex: none; border-top: 1px solid var(--border); background: var(--white); padding: 10px 12px; }
.chat-page__suggestions { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; }
/* ⚠ display を指定した要素は hidden 属性だけでは消えない（UA の [hidden]{display:none} に勝ってしまう） */
.chat-page__suggestions[hidden] { display: none; }
.chat-page__suggestion-btn { flex: none; border: 1px solid var(--border); padding: 5px 12px; color: var(--text); white-space: nowrap; }
.chat-page__suggestion-btn:hover { background: var(--off-white); }
.chat-page__form { display: flex; gap: 8px; }
/* ⚠ 16px を下回らせない。iOS は入力欄が16px未満だとフォーカス時に画面を拡大する */
.chat-page__input { flex: 1; min-width: 0; padding: 10px 14px; border: 1px solid var(--border); border-radius: 999px; font-size: 16px; }
.chat-page__submit-btn { flex: none; background: var(--main); color: var(--white); border: none; border-radius: 999px; padding: 10px 20px; font-size: 14px; font-weight: bold; cursor: pointer; }
.chat-page__submit-btn:disabled { opacity: .5; cursor: default; }

/* 参考リンクは回答と同じ位置まで字下げして、続きに見えるようにする。
   「参考」→ 記事タイトル → 外部リンクのアイコン の順に、1つの文として流す
   （flex にすると長いタイトルが丸ごと次の行へ落ちるので、素の行送りで組む）。 */
.chat-page__match-ref { margin-top: 12px; padding-left: 20px; font-size: 14px; line-height: 1.8; }
.chat-page__match-ref-tag { display: inline-block; margin-right: 8px; background: var(--text); color: var(--white); border-radius: 4px; padding: 2px 8px; font-size: 11px; font-weight: bold; letter-spacing: .025em; }
.chat-page__match-ref-link { color: var(--text); word-break: break-word; }
.chat-page__match-ref-link:hover { text-decoration: underline; }
/* アイコンはタイトルの最後の文字に続ける（折り返しても末尾に付いてくる） */
.chat-page__match-ref-icon { width: 14px; height: 14px; margin-left: 6px; vertical-align: -2px; }