/* ============================================================
   css/ai.css — AIまわりの見た目（2026年11月5日）
   ------------------------------------------------------------
   このファイルは、「AIの結果」カード・AIの設定画面・
   AIが考えている間の「待っています」画面の見た目のファイルです。
   ============================================================ */

/* ---------- 待っています（lib/dom.js の busy） ---------- */
.busy { position: fixed; inset: 0; z-index: 60; background: rgba(43, 33, 26, 0.35); display: grid; place-items: center; padding: 16px; }   /* AIが考えている間、画面全体をうすく暗くする */
.busy__box { background: var(--surface); border-radius: var(--radius); padding: 20px 22px; display: flex; align-items: center; gap: 14px; max-width: 340px; box-shadow: 0 10px 30px rgba(0,0,0,.18); }   /* 真ん中の白い箱 */
.busy__spinner { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--hall); animation: busy-spin 0.9s linear infinite; }   /* くるくる回る輪 */
.busy__text { font-weight: 700; line-height: 1.5; }   /* 「考えています」の文字 */
@keyframes busy-spin { to { transform: rotate(360deg); } }   /* 輪を1回転させる動き */
@media (prefers-reduced-motion: reduce) { .busy__spinner { animation-duration: 3s; } }   /* 動きを減らす設定の人には、ゆっくり回す */

/* ---------- 「AIの結果」カード（components/ai-result.js） ---------- */
.ai-result { border: 2px solid var(--line); display: flex; flex-direction: column; gap: 10px; }   /* AIの結果のカード */
.ai-result.is-ok { border-color: var(--ok); }   /* 問題なしなら緑の枠 */
.ai-result.is-ng { border-color: var(--danger); }   /* 問題ありなら赤の枠 */
.ai-result__head { display: flex; align-items: center; gap: 8px; }   /* カードの上の行 */
.ai-result__head .card__title { margin: 0; }   /* 見出しの余白をなくす */
.ai-result__close { margin-left: auto; min-width: var(--tap); }   /* 閉じるボタンを右はしに */
.ai-result__big { display: flex; gap: 12px; align-items: center; }   /* 大きい結果の行 */
.ai-result__big strong { font-size: 18px; }   /* 結果の文字を大きく */
/* 大きな ✓ と ! の丸 */
.ai-result__mark { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 22px; font-weight: 800; color: #fff; background: var(--danger); }   /* 丸い印（✓ や !） */
.is-ok .ai-result__mark { background: var(--ok); }   /* 問題なしなら緑の丸 */
/* 数字の箱が並ぶ所（スマホでは2列） */
.ai-result__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; }   /* 数字の小さい箱を並べる */
.ai-stat { background: var(--surface-2); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }   /* 数字の箱 */
.ai-stat strong { font-size: 17px; }   /* 箱の中の数字 */
.ai-stat--ng strong { color: var(--danger); }   /* だめな数字は赤 */
.ai-stat--ok strong { color: var(--ok); }   /* よい数字は緑 */
.ai-result__say { background: #E7F1FB; color: #1C4680; border-radius: 10px; padding: 10px 12px; line-height: 1.6; }   /* AIのひとことの吹き出し（青） */
.ai-result__say strong { display: block; font-size: 13px; }   /* 吹き出しの見出し */
.ai-result__more { border-top: 1px solid var(--line); padding-top: 8px; }   /* 「くわしく見る」の部分 */
.ai-result__more summary { cursor: pointer; font-weight: 700; min-height: 32px; display: flex; align-items: center; gap: 6px; list-style: none; }   /* 「くわしく見る」の押す所 */
.ai-result__more summary::-webkit-details-marker { display: none; }   /* Safari の三角の印を消す */
/* 開く・閉じるの三角（開いたら下向き） */
.ai-result__more summary::before { content: "▸"; color: var(--ink-3); transition: transform .15s; }   /* 自分で付けた ▸ の印 */
.ai-result__more[open] summary::before { transform: rotate(90deg); }   /* 開いたら ▸ を下向きに */
.ai-result__list { margin: 6px 0 0; padding-left: 20px; line-height: 1.7; }   /* くわしい一覧 */
.ai-result__day { margin-top: 6px; }   /* 日ごとのまとまり */
.ai-result__actions { justify-content: flex-end; }   /* ボタンを右に寄せる */
@media (max-width: 600px) {   /* スマホの幅なら */
  .ai-result__actions .btn { flex: 1 1 100%; }   /* ボタンを横いっぱいに */
}
/* 文の中のリンクのようなボタン（理由の人の名前） */
.link-btn { background: none; border: none; padding: 0; color: var(--hall); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }   /* リンクのような文字のボタン */

/* 右の欄の「AIの理由」 */
.ai-reason { background: #E7F1FB; color: #1C4680; border-radius: 8px; padding: 6px 10px; line-height: 1.5; }   /* AIの理由の小さい吹き出し */
.ai-reason strong { margin-right: 6px; }   /* 理由の見出し */

/* ---------- AIの設定（screens/ai.js） ---------- */
.ai-status__row { display: flex; gap: 12px; align-items: center; }   /* AIの状態の行 */
.ai-status.is-ok .ai-result__mark { background: var(--ok); }   /* つながっていれば緑の丸 */
.mode-list { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }   /* AIの使い方を選ぶボタンを並べる */
.mode-btn[aria-pressed="true"] { border: 2px solid var(--ink); background: var(--surface-2); }   /* 選んでいるボタンは太い枠 */
.mode-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }   /* 入力欄を縦に並べる */
.learn-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }   /* 覚えたことの一覧 */
.learn-list li { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border-radius: 10px; padding: 8px 10px; flex-wrap: wrap; }   /* 覚えたことの1行 */
.learn-list__text { flex: 1 1 180px; }   /* 覚えたことの文 */
.plain-list { margin: 0; padding-left: 20px; line-height: 1.8; }   /* ふつうの箇条書き */
.mode-form .btn { white-space: nowrap; }   /* 「表示」ボタンが2行にならないように */