/* ==========================================================================
   シナリオ型チャットボット
   - 配色・フォント・角丸・影・イージングはLP本体の CSS 変数をそのまま使う
   - 新しい色は追加しない（LINE緑 #038030 は既存 #line-side と同一値）
   - 固定要素の配置は index.html の既存要素と衝突しない座標に限定する
       #prog(600) / header(500) / #to-top(480) / #line-side(479) / #cta-bar(470)
     起動ボタン: 481（#to-top の直上）／パネル: 1000（診断モーダル 2000 より下）
   ========================================================================== */

/* ---------- 起動ボタン ---------- */
#chatbot-launcher{
  position:fixed;
  right:1.6rem;
  bottom:5.4rem;              /* #to-top(下26px/高48px)の真上に12pxのクリアランス */
  z-index:481;
  height:56px;
  padding:0 1.15rem 0 .95rem; /* 閉じているときはラベル付きのピル型 */
  border-radius:100px;
  border:none;
  background:var(--green);
  color:var(--white);
  display:flex;
  align-items:center;
  gap:.5rem;
  font-family:'Noto Sans JP',sans-serif;
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
  cursor:none;                /* body{cursor:none} に合わせる（既存要素と同じ扱い） */
  box-shadow:0 6px 20px rgba(45,106,79,.35);
  transition:transform .3s var(--ease-out),box-shadow .3s,background .25s,
             padding .3s var(--ease-out),border-radius .3s var(--ease-out);
}
/* 展開中はラベルを畳んで円形に戻す（閉じるボタンとして機能させる） */
#chatbot-launcher[aria-expanded="true"]{
  width:56px;
  padding:0;
  border-radius:50%;
  justify-content:center;
}
#chatbot-launcher[aria-expanded="true"] .cb-launcher-label{display:none}
.cb-launcher-label{line-height:1}
#chatbot-launcher:hover{
  background:var(--green-dark);
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(45,106,79,.45);
}
#chatbot-launcher:focus-visible{outline:2px solid var(--green-dark);outline-offset:3px}
#chatbot-launcher svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#chatbot-launcher .cb-ico-close{display:none}
#chatbot-launcher[aria-expanded="true"] .cb-ico-open{display:none}
#chatbot-launcher[aria-expanded="true"] .cb-ico-close{display:block}

/* ---------- パネル ---------- */
#chatbot-panel{
  position:fixed;
  right:1.6rem;
  bottom:9.6rem;              /* 起動ボタン(下5.4rem/高56px)の上に余白を確保 */
  top:5.2rem;                 /* header(高64px)の直下まで縦いっぱいに伸ばす */
  z-index:1000;
  width:360px;
  max-width:calc(100vw - 3.2rem);
  min-height:300px;           /* 極端に低い画面でも潰れないようにする */
  background:var(--white);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  font-family:'Noto Sans JP',sans-serif;
}
#chatbot-panel[hidden]{display:none}

/* 開閉アニメーション */
#chatbot-panel{
  opacity:0;
  transform:translateY(12px) scale(.98);
  transform-origin:bottom right;
  transition:opacity .28s var(--ease-out),transform .28s var(--ease-out);
}
#chatbot-panel.is-open{opacity:1;transform:none}

/* ---------- ヘッダー ---------- */
.cb-head{
  flex:0 0 auto;
  background:var(--green-dark);
  color:var(--white);
  padding:.9rem 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
}
.cb-head-title{
  font-family:'Noto Serif JP',serif;
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.02em;
}
.cb-close{
  background:transparent;
  border:none;
  color:var(--white);
  width:32px;
  height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:none;
  transition:background .2s;
}
.cb-close:hover{background:rgba(255,255,255,.16)}
.cb-close:focus-visible{outline:2px solid var(--white);outline-offset:2px}
.cb-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}

/* ---------- メッセージ領域 ---------- */
.cb-body{
  flex:1 1 auto;
  overflow-y:auto;
  overscroll-behavior:contain;   /* 背面へのスクロール波及を防ぐ（Lenisに干渉しない） */
  -webkit-overflow-scrolling:touch;
  background:var(--off-white);
  padding:1rem .9rem;
  display:flex;
  flex-direction:column;
  gap:.7rem;
}

/* 吹き出し共通 */
.cb-msg{
  max-width:86%;
  padding:.7rem .9rem;
  font-size:.86rem;
  line-height:1.85;
  white-space:pre-line;          /* 改行は textContent の \n をそのまま反映 */
  word-break:break-word;
}
/* 金額・期間を行末で分断させない */
.cb-nb{white-space:nowrap}

/* ボット：左・グレー系 */
.cb-msg-bot{
  align-self:flex-start;
  background:var(--gray-light);
  color:var(--text);
  border-radius:2px 12px 12px 12px;
}
/* ユーザー：右・ブランドグリーン */
.cb-msg-user{
  align-self:flex-end;
  background:var(--green);
  color:var(--white);
  border-radius:12px 2px 12px 12px;
  font-weight:500;
}

/* 入力中インジケータ */
.cb-typing{
  align-self:flex-start;
  background:var(--gray-light);
  border-radius:2px 12px 12px 12px;
  padding:.85rem .9rem;
  display:flex;
  gap:5px;
  align-items:center;
}
.cb-typing span{
  width:6px;height:6px;border-radius:50%;
  background:var(--gray);
  animation:cb-blink 1.1s infinite ease-in-out;
}
.cb-typing span:nth-child(2){animation-delay:.18s}
.cb-typing span:nth-child(3){animation-delay:.36s}
@keyframes cb-blink{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

/* ---------- 選択肢 ---------- */
.cb-choices{
  display:flex;
  flex-direction:column;
  gap:.45rem;
  align-self:stretch;
  margin-top:.1rem;
}
.cb-choice{
  width:100%;
  text-align:left;
  background:var(--white);
  color:var(--green-dark);
  border:1px solid var(--gray-mid);
  border-radius:8px;
  padding:.68rem .9rem;
  font-family:inherit;
  font-size:.84rem;
  font-weight:500;
  line-height:1.6;
  cursor:none;
  transition:background .2s,border-color .2s,transform .2s var(--ease-out);
}
.cb-choice:hover:not(:disabled){
  background:var(--green-pale);
  border-color:var(--green);
  transform:translateX(2px);
}
.cb-choice:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.cb-choice:disabled{opacity:.42}

/* LINE CTA（通常の選択肢と区別する強調スタイル・既存 #line-side と同じ緑） */
.cb-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  align-self:stretch;
  background:#038030;
  color:var(--white);
  border-radius:8px;
  padding:.8rem 1rem;
  font-size:.88rem;
  font-weight:700;
  text-decoration:none;
  cursor:none;
  box-shadow:0 4px 14px rgba(3,128,48,.3);
  transition:background .25s,box-shadow .25s,transform .2s var(--ease-out);
}
.cb-cta:hover{background:#026a27;box-shadow:0 8px 20px rgba(3,128,48,.4);transform:translateY(-2px)}
.cb-cta:focus-visible{outline:2px solid var(--green-dark);outline-offset:2px}
.cb-cta svg{width:17px;height:17px;fill:currentColor;flex:0 0 auto}

/* ---------- スマホ：ほぼ全画面 ---------- */
@media(max-width:600px){
  #chatbot-launcher{
    right:1rem;
    bottom:8.4rem;            /* #cta-bar(76px) → #to-top(下80px/高44px) の上に配置 */
    height:50px;
    padding:0 1rem 0 .8rem;
    font-size:.8rem;
    cursor:pointer;           /* 600px以下は body{cursor:auto} に戻るため */
  }
  #chatbot-launcher[aria-expanded="true"]{width:50px;padding:0}
  #chatbot-launcher svg{width:24px;height:24px}

  #chatbot-panel{
    right:0;left:0;top:0;bottom:0;
    width:100%;
    max-width:none;
    height:100dvh;            /* 100vh は使わない（モバイルURLバー対策） */
    border-radius:0;
    transform:translateY(16px);
    transform-origin:center;
  }
  #chatbot-panel.is-open{transform:none}
  .cb-head{padding:1rem 1.1rem;padding-top:calc(1rem + env(safe-area-inset-top))}
  .cb-body{padding:1rem .9rem calc(1rem + env(safe-area-inset-bottom))}
  .cb-msg{max-width:88%}
  .cb-close,.cb-choice,.cb-cta{cursor:pointer}
}

/* ---------- モーション低減 ---------- */
@media(prefers-reduced-motion:reduce){
  #chatbot-panel,#chatbot-launcher,.cb-choice,.cb-cta{transition:none}
  .cb-typing span{animation:none;opacity:.6}
}