/* =========================================================
   スタートAI サポートナビ（選択式チャットボット）
   スタイルシート
   ---------------------------------------------------------
   配色・寸法は「デザイン仕様_チャットボット.md」（甘露寺蜜璃）に準拠。
   色や大きさを変えたいときは、下の変数だけを書き換えれば
   全体に反映されます。
   ※本文とボタンのコントラストは全項目 WCAG AA（4.5:1）以上を確認済み。
     色を変えるときはコントラスト比を必ず確認してください。
   ========================================================= */

.saibot,
.saibot *,
.saibot *::before,
.saibot *::after {
  box-sizing: border-box;
}

.saibot {
  /* ===== 配色：ブルー系（2026-08-05 まりこさんのご要望で水色〜青へ変更） =====
     コントラスト比は全項目 WCAG AA を計算のうえ決定しています。
     色を変えるときは必ず比率を再確認してください。 */
  --sai-brand:        #2BA3DE;  /* 主色（明）：文字を乗せない面のみ */
  --sai-brand-mid:    #0D79B6;  /* 主色（中）：枠線・シェブロン 白地に 4.74:1 */
  --sai-brand-dark:   #0A5C8E;  /* 主色（濃）：ヘッダー地・起動ボタン 白文字 7.16:1 */
  --sai-brand-soft:   #E9F5FC;  /* 主色（淡）：hover地・アバター下地 */
  --sai-brand-soft2:  #C9E6F7;  /* 主色（淡濃）：押下時の地 */
  --sai-accent:       #F06E6E;  /* 差し色コーラル：未読バッジ（青の補色） */

  --sai-bg:           #FFFFFF;  /* 白面：吹き出し・選択肢の地 */
  --sai-bg-sub:       #F5FAFD;  /* 会話エリア背景：ごく淡い水色 */
  --sai-text:         #2D2A28;  /* 本文 13.56:1 */
  --sai-text-sub:     #6B625C;  /* 補助 5.66:1 */
  --sai-line:         #DCE7EE;  /* 罫線（※選択肢の枠には使わない） */
  --sai-bot-bubble:   #FFFFFF;
  --sai-user-bubble:  #1F6DB8;  /* 白文字で 5.33:1 */
  --sai-user-text:    #FFFFFF;
  --sai-link:         #1A63A8;  /* 6.19:1 */
  --sai-focus:        #1A63A8;  /* フォーカスリング 5.96:1 */
  --sai-disabled-bg:  #F5F2EE;

  /* ===== 文字 ===== */
  --sai-font: system-ui, -apple-system, "Segoe UI",
              "Hiragino Kaku Gothic ProN", "Hiragino Sans",
              "Yu Gothic UI", "Yu Gothic", "Meiryo", sans-serif;
  /* 2026-08-06 まりこさんのご要望で、はみ出し対策として本文とボタンをさらに一段小さく
     しました（14px。これ以下にすると読みづらくなるため、ここが下限です） */
  --sai-fs-body:  14px;   /* 本文 */
  --sai-fs-btn:   14px;   /* 選択肢ボタン */
  --sai-fs-head:  17px;   /* ヘッダータイトル */
  --sai-fs-sub:   12px;   /* 補助テキスト */
  --sai-lh:       1.75;   /* 日本語は1.7以上を確保 */
  --sai-lh-btn:   1.45;
  --sai-ls:       0.02em; /* 字間 */
  --sai-fw-btn:   700;

  /* ===== 寸法 ===== */
  --sai-launcher:   72px;  /* 起動ボタン直径 */
  --sai-offset:     24px;  /* 右下からの距離 */
  --sai-width:     400px;  /* パネル幅（1行の文字数を増やして折り返しを減らす） */
  --sai-height:    660px;  /* パネル高さ（回答を読む面を広げる） */
  --sai-radius:     20px;  /* パネル角丸 */
  --sai-radius-bub: 16px;  /* 吹き出し角丸 */
  --sai-radius-btn: 12px;  /* 選択肢角丸 */
  --sai-header-h:   56px;  /* ヘッダー高さ */
  /* 2026-08-05 回答を読む面積を広げるため、ボタンを小さくしました。
     指で押せる最低寸法 44px は守っています。 */
  --sai-btn-h:      44px;  /* 選択肢 最低高さ（44px以上を厳守） */
  --sai-btn-gap:    8px;   /* 選択肢どうしの隙間 */
  --sai-btn-pad:    10px 36px 10px 14px;
  --sai-pad-x:      14px;  /* 会話エリア左右padding */
  --sai-pad-y:      16px;
  --sai-msg-gap:    12px;  /* メッセージ間 */
  --sai-avatar:     36px;  /* 会話内アバター */
  --sai-avatar-hd:  40px;  /* ヘッダーアバター */

  /* ===== 影（黒ではなく紺系で水色の地に馴染ませる） ===== */
  --sai-shadow: 0 16px 48px rgba(10, 60, 95, 0.22),
                0 2px 8px  rgba(10, 60, 95, 0.12);
  --sai-shadow-launcher: 0 6px 20px rgba(10, 60, 95, 0.30);
  --sai-shadow-btn:       0 2px 0 rgba(10, 60, 95, 0.10);
  --sai-shadow-btn-hover: 0 4px 0 rgba(10, 60, 95, 0.16);

  /* ===== モーション ===== */
  --sai-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --sai-ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --sai-dur-open:   240ms;
  --sai-dur-close:  180ms;
  --sai-dur-msg:    240ms;
  --sai-dur-hover:  160ms;
  --sai-stagger:     60ms;  /* 選択肢を順に出す間隔 */

  /* ===== 重なり順 ===== */
  --sai-z: 2147483000;

  position: fixed;
  right: var(--sai-offset);
  bottom: var(--sai-offset);
  z-index: var(--sai-z);
  font-family: var(--sai-font);
  color: var(--sai-text);
  font-size: var(--sai-fs-body);
  line-height: var(--sai-lh);
  letter-spacing: var(--sai-ls);
  -webkit-font-smoothing: antialiased;
}

/* =============== 起動ボタン =============== */
.saibot__launcher-wrap { position: relative; }

/* 丸い起動ボタン。スタピオンをまるごと収める（2026-08-05 まりこさんのご要望） */
.saibot__launcher {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  width: var(--sai-launcher);
  height: var(--sai-launcher);
  border: 3px solid var(--sai-brand-dark);
  border-radius: 50%;
  background: var(--sai-brand-soft);   /* スタピオンは白いので淡い下地を敷く */
  color: #fff;
  font-family: inherit;
  font-size: var(--sai-fs-btn);
  font-weight: 700;
  letter-spacing: var(--sai-ls);
  cursor: pointer;
  overflow: visible;
  box-shadow: var(--sai-shadow-launcher);
  transition: transform var(--sai-dur-hover) var(--sai-ease-out),
              border-color var(--sai-dur-hover) ease;
}
.saibot__launcher:hover  { border-color: #084A72; transform: translateY(-2px); }
.saibot__launcher:active { transform: translateY(0); }

/* ボタンの文言は、丸ボタンの左に出る吹き出し（ツールチップ）にする。
   読み上げソフト用の名前は button の aria-label で持っているので情報は失われません。 */
.saibot__launcher > span {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--sai-brand-dark);
  color: #fff;
  font-size: 15px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  box-shadow: var(--sai-shadow-launcher);
  transition: opacity var(--sai-dur-hover) ease,
              transform var(--sai-dur-hover) var(--sai-ease-out);
}
.saibot__launcher:hover > span,
.saibot__launcher:focus-visible > span {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.saibot__launcher-icon {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 28px;
  flex: 0 0 auto;
  overflow: hidden;
}
.saibot__launcher-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 未読を示す小さな丸（初回のみ） */
.saibot__dot {
  position: absolute;
  top: -2px; right: -2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--sai-accent);
  border: 2px solid #fff;
}

/* =============== パネル =============== */
.saibot__panel {
  position: absolute;
  right: 0;
  bottom: calc(var(--sai-launcher) + 14px);
  width: var(--sai-width);
  height: var(--sai-height);
  /* 200%拡大でも崩れないよう高さを逃がす */
  max-height: calc(100vh - var(--sai-offset) * 2 - var(--sai-launcher) - 14px);
  background: var(--sai-bg);
  border-radius: var(--sai-radius);
  box-shadow: var(--sai-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  opacity: 0;
  transform: translateY(12px) scale(.97);
  pointer-events: none;
  transition: opacity var(--sai-dur-close) var(--sai-ease-in),
              transform var(--sai-dur-close) var(--sai-ease-in);
}
.saibot.is-open .saibot__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition: opacity var(--sai-dur-open) var(--sai-ease-out),
              transform var(--sai-dur-open) var(--sai-ease-out);
}
.saibot.is-open .saibot__launcher-wrap { display: none; }

/* ---- ヘッダー ---- */
.saibot__header {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--sai-header-h);
  padding: 12px 10px 12px 16px;
  background: var(--sai-brand-dark);   /* 白文字 5.06:1 */
  color: #fff;
  flex: 0 0 auto;
}
.saibot__header-avatar {
  width: var(--sai-avatar-hd);
  height: var(--sai-avatar-hd);
  border-radius: 50%;
  background: var(--sai-brand-soft);
  border: 2px solid var(--sai-brand);
  display: grid; place-items: center;
  font-size: 15px; font-weight: 700; color: var(--sai-brand-dark);
  flex: 0 0 auto; overflow: hidden;
}
.saibot__header-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.saibot__header-text { flex: 1 1 auto; min-width: 0; }
.saibot__title {
  font-size: var(--sai-fs-head);
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.saibot__subtitle { font-size: var(--sai-fs-sub); opacity: .92; line-height: 1.4; }
.saibot__iconbtn {
  width: 44px; height: 44px;
  border: none; border-radius: 10px;
  background: transparent; color: #fff;
  font-size: 22px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.saibot__iconbtn:hover { background: rgba(255,255,255,.20); }

/* ---- 会話エリア ---- */
.saibot__log {
  /* 選択肢の高さに上限（下の max-height）を設けているので、
     回答を読む面は必ず一定以上が残ります */
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sai-pad-y) var(--sai-pad-x) 8px;
  background: var(--sai-bg-sub);
  scroll-behavior: smooth;
}
.saibot__row {
  display: flex;
  margin-bottom: var(--sai-msg-gap);
  align-items: flex-end;
  gap: 8px;
}
.saibot__row--bot  { justify-content: flex-start; }
.saibot__row--user { justify-content: flex-end; }

.saibot__avatar {
  width: var(--sai-avatar);
  height: var(--sai-avatar);
  border-radius: 50%;
  background: var(--sai-brand-soft);   /* 白いうさぴょんが背景に溶けないように */
  border: 2px solid var(--sai-brand);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: var(--sai-brand-dark);
  flex: 0 0 auto; overflow: hidden;
}
.saibot__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.saibot__bubble {
  max-width: 86%;   /* 1行に入る文字を増やして折り返しを減らす */
  padding: 11px 14px;
  border-radius: var(--sai-radius-bub);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;  /* URLなど切れ目のない文字列も必ず枠内で折り返す */
  min-width: 0;
  font-size: var(--sai-fs-body);
  line-height: var(--sai-lh);
  animation: saibot-pop var(--sai-dur-msg) var(--sai-ease-out);
}
.saibot__row--bot .saibot__bubble {
  background: var(--sai-bot-bubble);
  border: 1px solid var(--sai-line);
  border-bottom-left-radius: 4px;
}
.saibot__row--user .saibot__bubble {
  background: var(--sai-user-bubble);
  color: var(--sai-user-text);
  border-bottom-right-radius: 4px;
}
@keyframes saibot-pop {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- 参考リンク ---- */
.saibot__links {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 12px;
}
.saibot__link {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 16px;
  min-height: 48px;
  border: 2px solid var(--sai-link);
  border-radius: var(--sai-radius-btn);
  background: var(--sai-bg);
  color: var(--sai-link);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--sai-fs-btn);   /* 本文・選択肢と同じ大きさに統一 */
  line-height: var(--sai-lh-btn);
  overflow-wrap: anywhere;
  min-width: 0;
}
.saibot__link:hover { background: #EAF2FB; }
.saibot__link::after { content: "↗"; font-size: 14px; margin-left: auto; }

/* 未確定項目のしるし（data-debug="true" のときだけ） */
.saibot__todo {
  margin-top: 12px;
  padding: 10px 14px;
  border: 2px dashed var(--sai-brand-mid);
  border-radius: var(--sai-radius-btn);
  background: var(--sai-brand-soft);
  color: #0A5C8E;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

/* ---- 入力中インジケーター ---- */
.saibot__typing { display: inline-flex; gap: 5px; padding: 4px 2px; }
.saibot__typing span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sai-text-sub);
  animation: saibot-blink 1.2s infinite ease-in-out;
}
.saibot__typing span:nth-child(2) { animation-delay: .18s; }
.saibot__typing span:nth-child(3) { animation-delay: .36s; }
@keyframes saibot-blink {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

/* ---- 選択肢エリア ---- */
.saibot__choices {
  /* 選択肢は必ず全部見えるように縮めない（0 0 auto）。
     数が多いときだけ、この上限までに収めて中をスクロールさせる。 */
  flex: 0 0 auto;
  max-height: 44%;
  overflow-y: auto;
  padding: 14px var(--sai-pad-x) 14px;
  background: var(--sai-bg);
  border-top: 1px solid var(--sai-line);
  display: flex;
  flex-direction: column;
  gap: var(--sai-btn-gap);
}
.saibot__choice {
  position: relative;
  width: 100%;
  min-height: var(--sai-btn-h);
  padding: var(--sai-btn-pad);
  border: 2px solid var(--sai-brand-mid);
  border-radius: var(--sai-radius-btn);
  background: var(--sai-bg);
  color: var(--sai-text);
  font-family: inherit;
  font-size: var(--sai-fs-btn);
  font-weight: var(--sai-fw-btn);
  line-height: var(--sai-lh-btn);
  letter-spacing: var(--sai-ls);
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
  box-shadow: var(--sai-shadow-btn);
  transition: background-color var(--sai-dur-hover) ease,
              border-color var(--sai-dur-hover) ease,
              box-shadow var(--sai-dur-hover) ease,
              transform 90ms ease;
  animation: saibot-pop var(--sai-dur-msg) var(--sai-ease-out) both;
}
.saibot__choice:hover {
  background: var(--sai-brand-soft);
  border-color: var(--sai-brand-dark);
  box-shadow: var(--sai-shadow-btn-hover);
}
.saibot__choice:active {
  background: var(--sai-brand-soft2);
  transform: translateY(1px);
  box-shadow: none;
}
.saibot__chev {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sai-brand-mid);
  font-size: 20px;
  font-weight: 700;
}

/* 戻る／最初から の行 */
.saibot__nav { display: flex; gap: 8px; margin-top: 2px; }
.saibot__nav button {
  flex: 1 1 0;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--sai-line);
  border-radius: 10px;
  background: var(--sai-disabled-bg);
  color: var(--sai-text-sub);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.saibot__nav button:hover { background: var(--sai-brand-soft); color: var(--sai-text); }

.saibot__footer {
  flex: 0 0 auto;
  padding: 6px var(--sai-pad-x) 10px;
  background: var(--sai-bg);
  color: var(--sai-text-sub);
  font-size: 12px;
  text-align: center;
}

/* ---- フォーカスリング（キーボード操作の方向け） ---- */
.saibot :focus-visible {
  outline: 3px solid var(--sai-focus);
  outline-offset: 2px;
}

/* =============== スマホ =============== */
/* =============== 大きく表示（全画面ふうに広げる） ===============
   ヘッダーの「⛶」ボタンで切り替えます。長い回答を読むとき用。 */
.saibot.is-max .saibot__panel {
  position: fixed;
  top: 3vh; bottom: 3vh; left: 3vw; right: 3vw;
  width: auto;
  height: auto;
  max-width: 880px;
  max-height: none;
  margin-left: auto;
  margin-right: auto;
  transform-origin: center center;
}
.saibot.is-max .saibot__bubble  { max-width: 74%; }
.saibot.is-max .saibot__choices { max-height: 38%; }

/* =============== スマートフォン（〜600px） =============== */
@media (max-width: 600px) {
  .saibot {
    right: 12px; bottom: 12px;
    --sai-offset: 12px;
    --sai-launcher: 60px;
  }
  .saibot__panel {
    position: fixed;
    right: 0; left: 0; top: 0; bottom: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;   /* アドレスバーの分がずれないように */
    max-height: none;
    border-radius: 0;
    transform-origin: center bottom;
  }
  .saibot__bubble  { max-width: 88%; }
  .saibot__choices { max-height: 46%; }
  /* スマホは元から全画面なので「大きく表示」ボタンは出さない */
  .saibot__maxbtn  { display: none; }
  /* 全画面時は「大きく表示」の指定を打ち消す */
  .saibot.is-max .saibot__panel {
    top: 0; bottom: 0; left: 0; right: 0;
    max-width: none;
  }
}

/* =============== タブレット（601〜1024px：iPad など） =============== */
@media (min-width: 601px) and (max-width: 1024px) {
  .saibot {
    --sai-width:  440px;   /* 画面が広いぶん、少しゆったり */
    --sai-height: 660px;
  }
  .saibot__bubble { max-width: 84%; }
}

/* =============== 画面の高さが低いとき（横向きのスマホ等） =============== */
@media (max-height: 560px) {
  .saibot__choices { max-height: 50%; }
  .saibot { --sai-msg-gap: 8px; --sai-pad-y: 10px; }
}

/* =============== 動きを減らす設定への配慮 =============== */
@media (prefers-reduced-motion: reduce) {
  .saibot__panel,
  .saibot__bubble,
  .saibot__launcher,
  .saibot__choice { transition: none !important; animation: none !important; }
  .saibot__typing span { animation: none !important; opacity: .5; }
  .saibot__log { scroll-behavior: auto; }
}