/* =========================================================
   style.css（全文）
   - フッター（株式会社スズキモータース）を常にページ最下部へ
   - チャットのやり取り欄（chat-body）を広げる
   - 選択肢（ボタン）を1つずつ表示するアニメ付き
   - ✅ 上部ボタン（topic-cell）のホバーを送信ボタンと同じに統一
   - ✅ 表示文字：游ゴシック優先 / 黒→ダークグレー
   ========================================================= */

:root{
  --green: #4CAF50;
  --green-dark: #43A047;

  /* ✅ 黒→ダークグレー */
  --text: #333;
  --muted: #666;

  --bg: #ffffff;
  --bg-soft: #F5FFF5;
  --line: #DDE6DD;

  --shadow: 0 2px 10px rgba(0,0,0,.10);
  --radius: 12px;

  --frame-max: 980px;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }

/* ✅ フッターを最下部にするためのレイアウト */
body{
  margin:0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  /* ✅ 游ゴシック優先 */
  font-family:
    "游ゴシック",
    "Yu Gothic",
    "Yu Gothic UI",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    "Noto Sans JP",
    "Meiryo",
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;

  color: var(--text);
  background: var(--bg);
}

/* ✅ 入力欄・ボタンも游ゴシックへ統一 */
button, input, textarea, select{
  font: inherit;
  color: inherit;
}

/* mainを伸ばして、フッターを押し下げる */
main.container{
  flex: 1;
}

.container{
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: 24px 0 40px;
}

.page-title{
  text-align:center;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 800;
  margin: 8px 0 18px;
  padding-bottom: 10px;
  border-bottom: 3px solid rgba(76,175,80,.25);
}

.notice-simple{
  width: 100%;
  max-width: var(--frame-max);
  margin: 0 auto 18px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
}

/* =========================================================
   上部：お問い合わせの種類
   ========================================================= */
.topic-wrap{
  width: 100%;
  max-width: var(--frame-max);
  margin: 0 auto 16px;

  border: 2px solid var(--green);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  padding: 12px;
}

.topic-bar{
  display:flex;
  width: 100%;
  border-radius: 10px;
  overflow:hidden;
  min-height: 54px;
}

/* ✅ ここが変更点：topic-cell自体に背景色を持たせる */
.topic-cell{
  flex: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  color: #fff;
  font-weight: 800;
  padding: 14px 10px;
  text-align:center;
  border-right: 2px dashed rgba(255,255,255,.55);
  position: relative;
  overflow: hidden;

  cursor: pointer;
  user-select: none;

  /* 送信ボタンと同じ「色が変わるだけ」の動きにする */
  background: var(--green);
  transition: background .18s ease;
}
.topic-cell:last-child{ border-right: none; }

/* ✅ hoverできる端末だけに適用（スマホで暴れない） */
@media (hover: hover) and (pointer: fine){
  .topic-cell:hover{
    background: var(--green-dark); /* ✅ 送信ボタンと同じ */
  }
}

.topic-cell:focus{
  outline: 3px solid rgba(255,255,255,.55);
  outline-offset: -3px;
}

.topic-cell.is-selected{
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.35);
}

.topic-note{
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 2px dashed rgba(76,175,80,.35);
  text-align:center;
  color: var(--muted);
  font-size: 12px;
}

/* =========================================================
   ✅ スマホ：会話が始まったら上部（タイトル/注意/種類ボタン）を折りたたみ
   - チャット欄のスペースを確保し、誤タップも防止
   - JSで body に .chat-started を付与します
   ========================================================= */
@media (max-width: 820px){
  .page-title,
  .notice-simple,
  .topic-wrap{
    overflow: hidden;
    transition:
      max-height .28s ease,
      margin .28s ease,
      padding .28s ease,
      opacity .22s ease,
      transform .22s ease,
      border-width .28s ease;
    will-change: max-height, margin, padding, opacity, transform;
  }

  /* 展開時の目安（max-heightはアニメ用） */
  .page-title{ max-height: 90px; }
  .notice-simple{ max-height: 120px; }
  .topic-wrap{ max-height: 320px; }

  body.chat-started .page-title{
    max-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
  }
  body.chat-started .notice-simple{
    max-height: 0;
    margin: 0 auto;
    padding: 0;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
  }
  body.chat-started .topic-wrap{
    max-height: 0;
    margin: 0 auto;
    padding: 0;
    border: 0;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
  }

  /* ✅ 折りたたみ中はチャット欄を広げる */
  body.chat-started .chat-body{
    height: clamp(520px, 78vh, 920px);
  }

  /* ✅ 上部メニューを再表示するためのトグル */
  .chat-toolbar{ display:none; }
  body.chat-started .chat-toolbar{
    display:flex;
    justify-content:flex-end;
    padding: 8px 10px;
    border-bottom: 2px dashed rgba(76,175,80,.35);
    background:#fff;
  }
  .btn-top-toggle{
    appearance:none;
    border: 1px solid rgba(76,175,80,.55);
    background:#fff;
    color: var(--green-dark);
    font-weight: 800;
    padding: 8px 12px;
    border-radius: 999px;
    cursor:pointer;
  }
  .btn-top-toggle:active{ transform: scale(.98); }
}

/* =========================================================
   チャット
   ========================================================= */
.chat-card{
  width: 100%;
  max-width: var(--frame-max);
  margin: 0 auto;

  border: 2px solid var(--green);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  background: #fff;

  display: flex;
  flex-direction: column;
}

/* ✅ やり取り欄を広げる（大きめ） */
.chat-body{
  height: clamp(420px, 60vh, 760px);

  overflow:auto;
  padding: 14px;
  background: var(--bg-soft);

  border-bottom: 2px dashed rgba(76,175,80,.35);
  outline: 2px dashed rgba(76,175,80,.28);
  outline-offset: -10px;
}

/* メッセージ */
.msg{ display:flex; margin-bottom: 10px; }
.msg--system{ justify-content:flex-start; }
.msg--user{ justify-content:flex-end; }

.msg--pop{
  animation: popIn .18s ease both;
}
@keyframes popIn{
  from{ opacity: 0; transform: translateY(6px); }
  to  { opacity: 1; transform: translateY(0); }
}

.msg__bubble{
  max-width: 80%;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.7;
  border: 1px solid var(--line);
  background: #fff;
  white-space: pre-wrap;
}

.msg--user .msg__bubble{
  border-color: rgba(76,175,80,.45);
  background: rgba(76,175,80,.12);
}

/* ✅ 納期目安の強調表示（約●日間） */
.leadtime-highlight{
  color: #d32f2f;
  font-weight: 800;
}

/* タイピング中：カーソル点滅 */
.msg__bubble.typing::after{
  content: "▍";
  display: inline-block;
  margin-left: 2px;
  color: rgba(67,160,71,.95);
  animation: blinkCursor 1s step-end infinite;
}
@keyframes blinkCursor{
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* =========================================================
   ✅ 待機中：グラデーションスピナー + 「・・・」(順番に薄くなる)
   ========================================================= */
.msg__bubble.waiting{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* 左：回転リング（グラデーション） */
.wait-orb{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  flex: 0 0 auto;
  will-change: transform;

  /* フォールバック（conic-gradient非対応ブラウザ向け） */
  border: 2px solid rgba(76,175,80,.22);
  border-top-color: rgba(67,160,71,.95);

  animation: waitSpin .9s linear infinite;
}

/* conic-gradient 対応ブラウザは“グラデーションリング”に進化 */
@supports (background: conic-gradient(from 0deg, #000, #fff)){
  .wait-orb{
    border: none;
    background: conic-gradient(
      from 0deg,
      rgba(67,160,71,1) 0deg,
      rgba(76,175,80,.75) 55deg,
      rgba(76,175,80,.28) 140deg,
      rgba(67,160,71,0) 235deg,
      rgba(67,160,71,1) 360deg
    );

    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.6px), #000 calc(100% - 2.6px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2.6px), #000 calc(100% - 2.6px));

    filter: drop-shadow(0 0 10px rgba(76,175,80,.22));
  }
}

@keyframes waitSpin{
  to{ transform: rotate(360deg); }
}

/* 右：テキスト + サブ */
.wait-stack{
  display: inline-flex;
  flex-direction: column;
  min-width: 0;
}
.wait-text{
  font-weight: 800;
}
.wait-sub{
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* 「・・・」＝1つずつ薄く→戻る（順番に） */
.wait-ellipsis{
  display: inline-flex;
  margin-left: 6px;
}

.wait-ellipsis span{
  display: inline-block;
  font-weight: 900;
  line-height: 1;

  /* フォールバック */
  color: rgba(67,160,71,.95);

  /* JSフォールバック時も滑らかに */
  transition: opacity .18s ease;

  animation: waitEllip 1.2s ease-in-out infinite;
}
.wait-ellipsis span:nth-child(2){ animation-delay: .2s; }
.wait-ellipsis span:nth-child(3){ animation-delay: .4s; }

/* 文字にも“薄いグラデーション”を入れる（対応ブラウザ向け） */
@supports (-webkit-background-clip: text){
  .wait-ellipsis span{
    background: linear-gradient(180deg, rgba(67,160,71,1), rgba(76,175,80,.35));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

@keyframes waitEllip{
  0%, 100% { opacity: 1; }
  50%      { opacity: .18; }
}

/* 選択肢用のバブルは余白を少し広げる */
.bubble-choices{
  padding: 12px;
}

/* ✅ 選択肢ブロックの説明文 */
.choice-text{
  margin: 0 0 10px;
  font-weight: 800;
}

/* =========================================================
   ✅ チャット内：選択肢（1つずつ表示）
   ========================================================= */
.quick-replies{
  display: grid;
  gap: 10px;
}

.quick-reply{
  font: inherit;
  width: 100%;
  text-align: center;
  cursor: pointer;

  border: 2px solid var(--green);
  background: #fff;
  color: var(--text);
  border-radius: 10px;
  padding: 12px 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.10);

  opacity: 0;
  transform: translateY(10px);
  will-change: transform, opacity;
}

.quick-reply.is-in{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .25s ease, transform .25s ease, background .18s ease, color .18s ease;
}

.quick-reply:hover{
  background: rgba(76,175,80,.10);
}

.quick-reply.is-selected{
  background: var(--green);
  color: #fff;
  box-shadow: 0 10px 22px rgba(76,175,80,.20);
}

/* 入力エリア（白枠を見せる） */
.chat-form{
  display:flex;
  gap: 10px;
  padding: 12px;
  align-items:center;
  background: var(--bg-soft);
}

.chat-input{
  flex: 1;
  height: 44px;
  border: 2px solid #fff;
  background: #fff;
  border-radius: 8px;
  padding: 0 10px;
  outline:none;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

.chat-input:focus{
  border-color: #fff;
  box-shadow:
    0 0 0 4px rgba(76,175,80,.22),
    0 2px 10px rgba(0,0,0,.12);
}

.btn-send{
  height: 44px;
  padding: 0 18px;
  border: none;
  border-radius: 8px;
  background: var(--green);
  color:#fff;
  font-weight: 800;
  cursor:pointer;
  box-shadow: var(--shadow);
  transition: background .18s ease; /* ←ここに合わせた */
}
.btn-send:hover{ background: var(--green-dark); }

/* =========================================================
   ✅ メイン入力欄ロック中（フォーム表示中の誤操作防止）
   - JS側で .chat-form.is-disabled を付与します
   ========================================================= */
.chat-form.is-disabled{
  opacity: .55;
  pointer-events: none; /* ✅ 誤タップ防止 */
}
.chat-input:disabled{
  cursor: not-allowed;
  background: #f3f3f3;
}
.chat-form .btn-send:disabled{
  cursor: not-allowed;
  filter: saturate(.75);
}


/* =========================================================
   ✅ フッター：常に最下部
   ========================================================= */
.footer{
  margin-top: auto;
  background: #333;
  padding: 0;
}

.footer-link{
  display:block;
  width: 100%;
  text-align:center;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: 18px 12px;
  font-size: 12px;
  line-height: 1.7;
}
.footer-link:hover{
  background: #2b2b2b;
  text-decoration: underline;
}

/* スクリーンリーダー用 */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* 表示アニメ（控えめ） */
.reveal{
  opacity:0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal.is-visible{
  opacity:1;
  transform: translateY(0);
}

/* スマホ：チャット欄も広めに（ただし画面が小さいので抑える） */
@media (max-width: 640px){
  .topic-bar{ flex-direction: column; }
  .topic-cell{
    border-right: none;
    border-bottom: 2px dashed rgba(255,255,255,.55);
  }
  .topic-cell:last-child{ border-bottom: none; }

  .chat-body{
    height: clamp(300px, 50vh, 520px);
  }
}

/* 動きが苦手な人向け（CSS側のアニメ停止） */
@media (prefers-reduced-motion: reduce){
  .reveal{ transition: none; }
  .msg--pop{ animation: none; }
  .msg__bubble.typing::after{ animation: none; }

  .quick-reply{
    opacity: 1;
    transform: none;
    transition: none;
  }

  .topic-cell{
    transition: none;
  }

  .btn-send{
    transition: none;
  }
}
/* =========================================================
   ✅ 在庫・納期確認フォーム（チャット内）
   ========================================================= */
.bubble-stock-form{
  padding: 8px;
}

.stock-form{
  display: grid;
  gap: 8px;
}

.stock-row{
  display: grid;
  gap: 4px;
}

.stock-label{
  font-weight: 800;
  font-size: 13px;
}

.stock-input{
  width: 100%;
  height: 44px;
  border: 2px solid #fff;
  background: #fff;
  border-radius: 8px;
  padding: 0 10px;
  outline: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

/* ✅ 品番欄：確認中…（右端） */
.stock-input-wrap{
  position: relative;
  width: 100%;
}

.stock-input-wrap > .stock-input{
  padding-right: 110px; /* 「確認中・・・」分 */
}

.stock-checking{
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;

  font-size: 12px;
  font-weight: 800;
  color: var(--muted);

  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}

.stock-checking.is-on{ opacity: 1; }

/* wait-ellipsis はチャットのAPI待機表示と同じアニメーションを流用 */
.stock-checking .wait-ellipsis{ margin-left: 4px; }


.stock-input:focus{
  border-color: #fff;
  outline: 2px solid rgba(76,175,80,.35);
  outline-offset: 2px;
}

.stock-actions{
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.stock-send{
  width: 100%;
  min-width: 0;
}

.stock-note{
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  color: #b71c1c;
  min-height: 1.2em;
}

.stock-done{
  font-weight: 900;
  line-height: 1.6;
}


/* =========================================================
   ✅ 決済方法変更フォーム（ラジオボタン）
   ========================================================= */
.pay-method-box{
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  border: 2px solid rgba(0,0,0,.12);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);

  opacity: 0;
  transform: translateY(6px);
  transition: opacity .20s ease, transform .20s ease;
}
.pay-method-box.is-in{
  opacity: 1;
  transform: translateY(0);
}

.pay-method-note{
  font-weight: 900;
  font-size: 13px;
  margin: 0 0 10px;
  color: #b71c1c;
}

.pay-radios{
  display: grid;
  gap: 8px;
}

.pay-radio{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
}

.pay-radio input{
  width: 18px;
  height: 18px;
  accent-color: var(--green);
}



/* =========================================================
   ✅ 取付説明書：品番選択フォーム
   ========================================================= */
.manual-box{
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  border: 2px solid rgba(0,0,0,.12);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);

  opacity: 0;
  transform: translateY(6px);
  transition: opacity .20s ease, transform .20s ease;
}
.manual-box.is-in{
  opacity: 1;
  transform: translateY(0);
}

.manual-part-list{
  display: grid;
  gap: 10px;
  margin: 6px 0 10px;
}

.manual-part-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 2px solid rgba(0,0,0,.12);
  background: #fff;
  cursor: pointer;
}
.manual-part-row.is-checked{
  border-color: rgba(46, 125, 50, .6);
  box-shadow: 0 2px 10px rgba(46,125,50,.12);
}

.manual-part-no{
  font-weight: 900;
  font-size: 13px;
  line-height: 1.25;
  word-break: break-all;
}

.manual-part-row input[type="checkbox"]{
  width: 18px;
  height: 18px;
  accent-color: var(--green);
  flex: 0 0 auto;
}

/* 動きが苦手な人向け */
@media (prefers-reduced-motion: reduce){
  .pay-method-box,
  .manual-box{
    transition: none;
    transform: none;
    opacity: 1;
  }
}

/* =========================================================
   ✅ 在庫・納期確認フォーム：送信ボタン調整
   - 横幅を揃えない（自動幅）
   - 文字を中央に
   ========================================================= */
.stock-actions{
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.stock-send{
  width: auto;
  min-width: 120px;
}

/* ボタン内の文字を縦横中央に（通常の送信ボタンも含む） */
.btn-send{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
/* =========================================================
   ✅ ボタン文字を中央に（全体）
   ========================================================= */
.btn-send{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* =========================================================
   ✅ 在庫・納期確認フォーム：送信ボタン（幅は揃えない）
   ========================================================= */
.stock-actions{
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.stock-send{
  width: auto;
  min-width: 120px;
}
/* ✅ メーカー選択（プルダウン） */
.stock-select{
  -webkit-appearance: auto;
  appearance: auto;
}


/* ✅ 商品ID（変更不可） */
.stock-input[readonly]{background:#f6f6f6;}
/* =========================================================
   ✅ 追加: 品番欄まわりの余白が大きくならないように調整
   - スピナー(span)が折り返して空行を作るケースを防止
   ========================================================= */
.stock-row{
  gap: 6px !important;
}
.stock-label{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4;
}
.stock-input-wrap{
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}
.stock-input{
  display: block !important;
  margin: 0 !important;
}
.stock-checking{
  position: absolute !important;
}



/* =========================================================
   ✅ 同一商品IDで複数品番がある場合：右側ふきだし（タイプ選択）
   ========================================================= */
.stock-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

/* 右側は必要な時だけ表示 */
.stock-layout-right{ display: none; }
.stock-layout.has-multi{
  grid-template-columns: minmax(0, 1fr) 280px;
}
.stock-layout.has-multi .stock-layout-right{ display: block; }

@media (max-width: 860px){
  .stock-layout.has-multi{
    grid-template-columns: 1fr;
  }
  .stock-layout-right{
    display: block;
  }
}

/* ふきだし本体 */
.stock-multi-bubble{
  position: relative;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  border: 2px solid rgba(0,0,0,.78);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);

  opacity: 0;
  transform: translateY(6px) scale(.985);
  transition: opacity .18s ease, transform .18s ease;
  transform-origin: left top;
}

.stock-multi-bubble.is-in{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 左向きの矢印（吹き出し） */
.stock-multi-bubble::before{
  content: "";
  position: absolute;
  left: -10px;
  top: 28px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid rgba(0,0,0,.78);
}
.stock-multi-bubble::after{
  content: "";
  position: absolute;
  left: -8px;
  top: 29px;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-right: 9px solid #fff;
}

/* スマホでは矢印を消す（レイアウトが縦になるため） */
@media (max-width: 860px){
  .stock-multi-bubble::before,
  .stock-multi-bubble::after{
    display: none;
  }
}

.stock-multi-title{
  font-weight: 900;
  font-size: 13px;
  margin: 0 0 8px;
}

.stock-multi-list{
  display: grid;
  gap: 8px;
}

.stock-multi-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  opacity: 0;
  transform: translateY(6px);
  transition: opacity .20s ease, transform .20s ease;
}

.stock-multi-row.is-in{
  opacity: 1;
  transform: translateY(0);
}

.stock-multi-partno{
  font-weight: 800;
  font-size: 13px;
  line-height: 1.2;
  word-break: break-all;
}

.stock-multi-btn{
  border: 2px solid var(--green);
  background: #fff;
  color: var(--text);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 900;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

@media (hover: hover) and (pointer: fine){
  .stock-multi-btn:hover{
    background: rgba(76,175,80,.10);
  }
}

.stock-multi-btn:active{
  transform: scale(.98);
}

.stock-multi-btn.is-selected{
  background: var(--green);
  color: #fff;
}

/* 動きが苦手な人向け */
@media (prefers-reduced-motion: reduce){
  .stock-multi-bubble,
  .stock-multi-row,
  .stock-multi-btn{
    transition: none;
  }
}



/* =========================================================
   ✅ 追加修正：品番欄まわりの不自然な余白を解消
   - grid/flex環境によっては空白テキストノードが「行」として扱われるため
   - stock-form/row を通常のブロックフローに固定する
   ========================================================= */
.bubble-stock-form .stock-form{
  display: block !important;
}
.bubble-stock-form .stock-row{
  display: block !important;
  margin: 0 0 8px !important;
}
.bubble-stock-form .stock-row:last-child{
  margin-bottom: 0 !important;
}
.bubble-stock-form .stock-label{
  display: block !important;
  margin: 0 0 3px !important;
}
.bubble-stock-form .stock-input-wrap{
  display: block !important;
}


/* =========================================================
   ✅ 在庫・納期フォーム：コンパクト調整（タイトル以外を詰める）
   ========================================================= */
.bubble-stock-form .stock-input{
  height: 42px;
}


/* =========================================================
   ✅ 在庫・納期フォーム：不自然な余白（改行/インデント）を防ぐ
   - .msg__bubble は pre-wrap なのでフォーム内の改行が空白として出ることがある
   - フォームだけ normal に戻す
   ========================================================= */
.msg__bubble.bubble-stock-form{
  white-space: normal;
  line-height: 1.45;
}
.msg__bubble.bubble-stock-form *{
  white-space: normal;
}

/* =========================================================
   ✅ 「確認中」：枠と同じ緑で、優しく点滅
   ========================================================= */
.stock-checking-text{
  color: var(--green);
  animation: stockCheckingPulse 1.6s ease-in-out infinite;
}
@keyframes stockCheckingPulse{
  0%,100%{ opacity: .55; }
  50%{ opacity: 1; }
}

/* =========================================================
   ✅ 確認中 / ふきだし表示中：送信ボタンを押せない（見た目も分かるように）
   ========================================================= */
.stock-send:disabled,
.stock-send.is-disabled{
  opacity: .55;
  cursor: not-allowed;
  filter: saturate(.75);
}