/* ─── 梅や 業者向け鶏肉卸部門 FAQ チャット（明るい白基調・梅や深緑 #005e41）─── */
/* reflex-lab chatbot をベースに、梅やLPのクリーンな配色へ最適化 */

:root{
  --rfx-green:#005e41; --rfx-green-d:#00432f; --rfx-tint:#eef6f1; --rfx-tint2:#e4f1ea;
  --rfx-ink:#201d1b; --rfx-sub:#6e6661; --rfx-line:#e6e0da;
}

/* FAB（右端・縦位置中央：下部のコンバージョンボタンと被らない） */
.rfx-chat-fab{
  position:fixed; right:1.5rem; top:calc(50% - 30px); bottom:auto;
  width:60px; height:60px; border-radius:50%;
  background:linear-gradient(135deg,#00694a,#00432f); color:#fff; border:none;
  box-shadow:0 10px 26px rgba(0,67,47,.34), 0 2px 6px rgba(0,0,0,.18);
  cursor:pointer; z-index:9000; display:flex; align-items:center; justify-content:center;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s; font:inherit; padding:0;
}
.rfx-chat-fab:hover{ transform:translateY(-2px) scale(1.04); box-shadow:0 14px 30px rgba(0,67,47,.42),0 4px 10px rgba(0,0,0,.2); }
.rfx-chat-fab:focus-visible{ outline:2px solid #00694a; outline-offset:3px; }
.rfx-chat-fab svg{ width:26px; height:26px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.rfx-chat-fab-badge{
  position:absolute; top:-5px; right:-5px; background:#fff; color:#005e41;
  font-size:.64rem; font-weight:800; padding:.16rem .42rem; border-radius:999px;
  letter-spacing:.08em; pointer-events:none; border:1.5px solid #005e41; line-height:1;
}
@media (max-width:760px){ .rfx-chat-fab{ right:1rem; top:calc(50% - 27px); bottom:auto; width:54px; height:54px; } }

/* パネル本体（FABの左・縦位置中央で展開） */
.rfx-chat-panel{
  position:fixed; right:calc(1.5rem + 60px + 14px); top:50%; bottom:auto; margin-top:max(-330px,-42vh);
  width:384px; max-width:calc(100vw - 6.5rem); height:84vh; max-height:660px;
  background:#fff; border:1px solid var(--rfx-line); border-radius:16px;
  box-shadow:0 24px 64px rgba(40,30,25,.22), 0 6px 16px rgba(40,30,25,.12);
  display:flex; flex-direction:column; z-index:9001; overflow:hidden;
  opacity:0; transform:translateX(12px) scale(.98); transform-origin:center right;
  pointer-events:none; transition:opacity .22s ease, transform .22s cubic-bezier(.2,.7,.2,1);
}
.rfx-chat-panel.is-open{ opacity:1; transform:translateX(0) scale(1); pointer-events:auto; }
@media (max-width:760px){
  .rfx-chat-panel{ right:.75rem; left:.75rem; top:.75rem; bottom:.75rem; margin-top:0; width:auto; max-width:none; height:auto; max-height:none; }
}

/* ヘッダー（梅や深緑） */
.rfx-chat-head{
  padding:1rem 1.1rem .95rem; background:linear-gradient(135deg,#00694a,#00432f);
  display:flex; align-items:center; gap:.7rem;
}
.rfx-chat-icon{ width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rfx-chat-icon svg{ width:18px; height:18px; }
.rfx-chat-title{ flex:1; min-width:0; }
.rfx-chat-name{ font-size:.98rem; font-weight:700; color:#fff; line-height:1.25; word-break:keep-all; }
.rfx-chat-sub{ font-size:.74rem; color:rgba(255,255,255,.72); margin-top:.2rem; letter-spacing:.04em; }
.rfx-chat-reset,.rfx-chat-close{
  background:transparent; border:0; color:rgba(255,255,255,.7); font:inherit; cursor:pointer;
  padding:.4rem; border-radius:6px; display:flex; align-items:center; justify-content:center;
  /* 指で押せる大きさを確保する。アイコン自体の見た目は変えない */
  min-width:46px; min-height:46px;
}
.rfx-chat-reset:hover,.rfx-chat-close:hover{ background:rgba(255,255,255,.16); color:#fff; }
.rfx-chat-reset svg{ width:16px; height:16px; stroke:currentColor; fill:none; }
.rfx-chat-close svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; }

/* 会話ログ */
.rfx-chat-log{
  flex:1; min-height:0; overflow-y:auto; padding:1.1rem 1.1rem .6rem; background:#faf7f3;
  scrollbar-width:thin; scrollbar-color:rgba(0,0,0,.18) transparent;
  display:flex; flex-direction:column; gap:.55rem;
}
.rfx-chat-log::-webkit-scrollbar{ width:6px; }
.rfx-chat-log::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.15); border-radius:3px; }

/* 選択肢領域（下部固定） */
.rfx-chat-options{
  border-top:1px solid var(--rfx-line); padding:.75rem 1rem .85rem; background:#fff;
  max-height:70%; overflow-y:auto; display:flex; flex-direction:column; gap:.5rem;
}
.rfx-chat-options:empty{ display:none; }
.rfx-chat-options::-webkit-scrollbar{ width:6px; }
.rfx-chat-options::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.15); border-radius:3px; }

/* メッセージ行 */
.rfx-msg{ display:flex; gap:.5rem; align-items:flex-end; animation:rfxFadeIn .28s ease; }
@keyframes rfxFadeIn{ from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:translateY(0);} }
.rfx-msg-bot{ justify-content:flex-start; }
.rfx-msg-user{ justify-content:flex-end; }
.rfx-msg-avatar{
  width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,#00694a,#00432f);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-bottom:2px;
}
.rfx-msg-avatar svg{ width:14px; height:14px; }
.rfx-msg-bubble{ font-size:.94rem; line-height:1.7; padding:.72rem .95rem; border-radius:14px; max-width:82%; word-break:break-word; line-break:strict; }
.rfx-msg-bot .rfx-msg-bubble{ background:#fff; border:1px solid var(--rfx-line); border-bottom-left-radius:4px; color:var(--rfx-ink); box-shadow:0 1px 2px rgba(40,30,25,.04); }
.rfx-msg-user .rfx-msg-bubble{ background:var(--rfx-green); border:1px solid var(--rfx-green); border-bottom-right-radius:4px; color:#fff; font-weight:600; }

/* typing */
.rfx-typing-dots{ display:inline-flex; gap:4px; align-items:center; padding:.15rem 0; }
.rfx-typing-dots span{ display:inline-block; width:6px; height:6px; border-radius:50%; background:rgba(0,94,65,.5); animation:rfxTyping 1.1s infinite ease-in-out; }
.rfx-typing-dots span:nth-child(2){ animation-delay:.15s; }
.rfx-typing-dots span:nth-child(3){ animation-delay:.3s; }
@keyframes rfxTyping{ 0%,60%,100%{transform:translateY(0);opacity:.4;} 30%{transform:translateY(-3px);opacity:1;} }

/* bot 吹き出し内の回答HTML */
.rfx-msg-bot .rfx-msg-bubble p{ margin:0 0 .55em; }
.rfx-msg-bot .rfx-msg-bubble p:last-child{ margin-bottom:0; }
.rfx-msg-bot .rfx-msg-bubble ul,.rfx-msg-bot .rfx-msg-bubble ol{ padding-left:1.2em; margin:0 0 .55em; }
.rfx-msg-bot .rfx-msg-bubble li{ margin-bottom:.28em; line-height:1.75; }
.rfx-msg-bot .rfx-msg-bubble strong{ color:var(--rfx-green-d); font-weight:800; }
.rfx-msg-bot .rfx-msg-bubble a{ color:var(--rfx-green); text-decoration:underline; text-decoration-color:rgba(0,94,65,.4); font-weight:700; }
.rfx-msg-bot .rfx-msg-bubble a:hover{ text-decoration-color:var(--rfx-green); }
.rfx-answer-links{ margin-top:.7rem; padding-top:.55rem; border-top:1px solid var(--rfx-line); display:flex; flex-wrap:wrap; gap:.4rem; }
.rfx-answer-links a{
  display:inline-flex; align-items:center; padding:.3rem .75rem; background:var(--rfx-tint);
  border:1px solid #bfdccd; border-radius:999px; color:var(--rfx-green) !important; font-size:.78rem;
  text-decoration:none !important; font-weight:700;
}
.rfx-answer-links a:hover{ background:var(--rfx-tint2); border-color:var(--rfx-green); }

/* 大ボタン */
.rfx-big-btn{
  display:flex; align-items:center; gap:.7rem; padding:.8rem .95rem; background:#fff;
  border:1.5px solid var(--rfx-line); border-radius:12px; color:var(--rfx-ink); font:inherit;
  font-size:.96rem; font-weight:700; text-align:left; cursor:pointer; width:100%;
  transition:all .18s; line-height:1.45;
}
.rfx-big-btn:hover,.rfx-big-btn:focus-visible{ background:var(--rfx-tint); border-color:var(--rfx-green); transform:translateX(2px); outline:none; }
.rfx-big-btn:active{ transform:translateX(2px) scale(.99); }
.rfx-big-btn.is-primary{ background:var(--rfx-green); border-color:var(--rfx-green); color:#fff; }
.rfx-big-btn.is-primary:hover{ background:var(--rfx-green-d); border-color:var(--rfx-green-d); }
.rfx-big-icon{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; flex-shrink:0; color:var(--rfx-green); }
.rfx-big-icon svg{ width:22px; height:22px; display:block; }
.rfx-big-text{ flex:1; min-width:0; line-break:strict; }
.rfx-big-arrow{ color:#b8afa8; font-size:1.05rem; flex-shrink:0; transition:color .18s; }
.rfx-big-btn:hover .rfx-big-arrow{ color:var(--rfx-green); }
.rfx-big-btn.is-primary .rfx-big-arrow,.rfx-big-btn.is-primary .rfx-big-icon{ color:rgba(255,255,255,.85); }

/* テキストリンク（戻る/もっと見る） */
.rfx-text-link{
  background:transparent; border:0; color:var(--rfx-green); font:inherit; font-size:.88rem;
  text-align:center; cursor:pointer; padding:.7rem 0; text-decoration:underline; text-decoration-color:rgba(0,94,65,.35); font-weight:600;
}
.rfx-text-link:hover{ text-decoration-color:var(--rfx-green); }

/* 検索 */
.rfx-search-wrap{ margin:.2rem 0 .6rem; }
.rfx-search-input{
  width:100%; padding:.72rem .9rem; background:#faf7f3; border:1.5px solid var(--rfx-line);
  border-radius:10px; color:var(--rfx-ink); font:inherit; font-size:.94rem; -webkit-appearance:none;
}
.rfx-search-input::placeholder{ color:#a49c95; }
.rfx-search-input:focus{ outline:none; border-color:var(--rfx-green); background:#fff; }
.rfx-search-sub{ font-size:.76rem; color:var(--rfx-sub); margin:.3rem 0 .5rem; }

/* カテゴリ折りたたみ */
.rfx-cat-group{ border-top:1px solid var(--rfx-line); padding:.3rem 0; }
.rfx-cat-group:first-of-type{ border-top:0; }
.rfx-cat-group summary{
  cursor:pointer; padding:.65rem .2rem; font-size:.9rem; font-weight:800; color:var(--rfx-green-d);
  list-style:none; display:flex; justify-content:space-between; align-items:center;
}
.rfx-cat-group summary::-webkit-details-marker{ display:none; }
.rfx-cat-group summary::after{ content:'▾'; color:#b8afa8; font-size:.78rem; }
.rfx-cat-group[open] summary::after{ content:'▴'; }

/* 質問リスト */
.rfx-q-list{ display:flex; flex-direction:column; }
.rfx-q-item{
  text-align:left; background:transparent; border:0; border-top:1px solid var(--rfx-line);
  color:var(--rfx-ink); font:inherit; font-size:.9rem; padding:.72rem .2rem; cursor:pointer;
  display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; line-height:1.55;
}
.rfx-q-item:first-child{ border-top:0; }
.rfx-q-item:hover{ color:var(--rfx-green); }
.rfx-q-arrow{ color:#b8afa8; flex-shrink:0; font-size:.85em; }
.rfx-q-item:hover .rfx-q-arrow{ color:var(--rfx-green); }

/* ヒットなし */
.rfx-chat-none{ padding:1.2rem .5rem; text-align:center; font-size:.92rem; color:var(--rfx-sub); line-height:1.85; }
.rfx-chat-none strong{ color:var(--rfx-green-d); }
.rfx-chat-none-cta,.rfx-after-cta,[data-rfx-cta]{
  display:inline-flex; align-items:center; justify-content:center; min-height:44px;
  margin-top:.8rem; padding:.75rem 1.3rem; background:var(--rfx-green);
  color:#fff; text-decoration:none; border-radius:999px; font-size:.9rem; font-weight:700;
}
.rfx-chat-none-cta:hover,.rfx-after-cta:hover{ background:var(--rfx-green-d); color:#fff; }

/* フッター */
.rfx-chat-foot{
  padding:.75rem 1.1rem; border-top:1px solid var(--rfx-line); background:#faf7f3;
  font-size:.8rem; color:var(--rfx-sub); display:flex; justify-content:space-between; align-items:center; gap:.6rem;
}
.rfx-chat-foot a{ color:var(--rfx-green); text-decoration:none; font-weight:800; }
.rfx-chat-foot a:hover{ text-decoration:underline; }
/* ピル型のCTAは白抜き。上の a 指定に負けて緑地に緑文字になるのを防ぐ */
.rfx-chat-foot a[data-rfx-cta]{ color:#fff; flex-shrink:0; margin-top:0; padding:.6rem 1.1rem; }
.rfx-chat-foot a[data-rfx-cta]:hover{ color:#fff; background:var(--rfx-green-d); text-decoration:none; }
.rfx-chat-foot span{ min-width:0; }

@media (prefers-reduced-motion: reduce){
  .rfx-chat-fab,.rfx-chat-panel,.rfx-msg,.rfx-typing-dots span{ transition:none !important; animation:none !important; }
}

/* 狭い画面では見出しを一段小さく。「部／門」のような割れを防ぐ */
@media (max-width:760px){
  .rfx-chat-name{ font-size:.92rem; }
}