/* ===================================================================
   若草山焼き公式サイト チャットボット ウィジェット
   すべてのクラス名に .yyb- を付けているため、既存サイトのCSSと衝突しません。
   =================================================================== */

.yyb-root {
  --yyb-ember: #d9532b;
  --yyb-ember-dark: #b23e1c;
  --yyb-night: #1c2438;
  --yyb-night-soft: #2c3652;
  --yyb-bg: #ffffff;
  --yyb-surface: #f5f4f1;
  --yyb-text: #23262e;
  --yyb-text-soft: #6b7180;
  --yyb-border: #e2e0db;
  --yyb-radius: 14px;
  --yyb-shadow: 0 12px 40px rgba(28, 36, 56, .22);

  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP",
               "Yu Gothic Medium", "Meiryo", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--yyb-text);
}

/* ─── 起動ボタン ─────────────────────────────── */

.yyb-launcher {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px 12px 14px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--yyb-ember) 0%, var(--yyb-ember-dark) 100%);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(217, 83, 43, .38);
  transition: transform .18s ease, box-shadow .18s ease;
}

.yyb-launcher:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(217, 83, 43, .46); }
.yyb-launcher:focus-visible { outline: 3px solid #1c2438; outline-offset: 3px; }
.yyb-launcher svg { width: 22px; height: 22px; flex: none; }
.yyb-root.is-open .yyb-launcher { display: none; }

/* ─── 起動ボタンがキャラクターのとき ─────────── */

.yyb-launcher.has-image {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--yyb-ember-dark);
}
.yyb-launcher.has-image:hover { box-shadow: none; }

.yyb-launcher-img {
  width: 112px;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(28, 36, 56, .28));
}

/* 吹き出し風のラベル */
.yyb-launcher.has-image .yyb-launcher-label {
  position: relative;
  padding: 6px 13px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--yyb-border);
  color: var(--yyb-ember-dark);
  font-size: 12.5px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(28, 36, 56, .14);
  white-space: nowrap;
}
.yyb-launcher.has-image .yyb-launcher-label::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -5px;
  width: 9px; height: 9px;
  margin-left: -4px;
  background: #fff;
  border-right: 1px solid var(--yyb-border);
  border-bottom: 1px solid var(--yyb-border);
  transform: rotate(45deg);
}

/* ─── パネル ─────────────────────────────────── */

.yyb-panel {
  display: none;
  flex-direction: column;
  width: 380px;
  height: 560px;
  max-height: calc(100vh - 40px);
  background: var(--yyb-bg);
  border-radius: var(--yyb-radius);
  box-shadow: var(--yyb-shadow);
  overflow: hidden;
}

.yyb-root.is-open .yyb-panel { display: flex; }

.yyb-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 14px 18px;
  background: var(--yyb-night);
  color: #fff;
}

.yyb-header-title { font-weight: 700; font-size: 15px; }
.yyb-header-sub { font-size: 11.5px; color: #b9c0d4; line-height: 1.4; }
.yyb-header-text { flex: 1; min-width: 0; }

.yyb-close {
  flex: none;
  width: 34px; height: 34px;
  border: 0; border-radius: 8px;
  background: rgba(255,255,255,.1);
  color: #fff; cursor: pointer;
  font-size: 18px; line-height: 1;
}
.yyb-close:hover { background: rgba(255,255,255,.2); }
.yyb-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ─── メッセージ ──────────────────────────────── */

.yyb-log {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px;
  background: var(--yyb-surface);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overscroll-behavior: contain;
}

.yyb-msg { max-width: 86%; padding: 11px 14px; border-radius: 14px; white-space: pre-wrap; word-break: break-word; }
.yyb-msg-bot  { align-self: flex-start; background: #fff; border: 1px solid var(--yyb-border); border-bottom-left-radius: 4px; }
.yyb-msg-user { align-self: flex-end; background: var(--yyb-night-soft); color: #fff; border-bottom-right-radius: 4px; }
.yyb-msg-error { align-self: flex-start; background: #fdeeea; border: 1px solid #f2c4b6; color: #9c3116; font-size: 14px; }

.yyb-msg-bot a { color: var(--yyb-ember-dark); text-decoration: underline; word-break: break-all; }
.yyb-msg-bot a:hover { text-decoration: none; }
.yyb-msg-bot a:focus-visible { outline: 2px solid var(--yyb-ember); outline-offset: 2px; }

/* あいさつ文＋イラスト */
.yyb-greet {
  align-self: stretch;
  display: flex;
  flex-direction: row-reverse; /* テキストを左、イラストを右に */
  align-items: flex-end;
  gap: 8px;
}
.yyb-greet-img {
  flex: none;
  width: 96px;
  height: auto;
  margin-bottom: -4px;
}
.yyb-greet .yyb-msg { max-width: none; flex: 1; min-width: 0; }

/* 回答ごとに表示するキャラクターの定型文 */
.yyb-persona {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: -6px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--yyb-text-soft);
}

.yyb-persona-icon {
  flex: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--yyb-border);
  display: grid; place-items: center;
  font-size: 12px;
  overflow: hidden;
}
.yyb-persona-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }

.yyb-typing { align-self: flex-start; display: flex; gap: 5px; padding: 14px 16px; background: #fff; border: 1px solid var(--yyb-border); border-radius: 14px; border-bottom-left-radius: 4px; }
.yyb-typing span { width: 7px; height: 7px; border-radius: 50%; background: #b9bcc4; animation: yyb-bounce 1.2s infinite; }
.yyb-typing span:nth-child(2) { animation-delay: .18s; }
.yyb-typing span:nth-child(3) { animation-delay: .36s; }

@keyframes yyb-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

/* ─── 「他に質問はありますか？」の確認 ───────── */

.yyb-followup {
  align-self: stretch;
  margin-top: 2px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--yyb-border);
  border-radius: 12px;
  text-align: center;
}

.yyb-followup-text {
  margin: 0 0 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--yyb-text);
}

.yyb-followup-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

.yyb-fu-btn {
  padding: 8px 20px;
  border: 1px solid var(--yyb-ember);
  border-radius: 999px;
  background: var(--yyb-ember);
  color: #fff;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.yyb-fu-btn:hover { background: var(--yyb-ember-dark); border-color: var(--yyb-ember-dark); }
.yyb-fu-btn:focus-visible { outline: 2px solid var(--yyb-night); outline-offset: 2px; }

.yyb-fu-btn.is-end {
  background: #fff;
  color: var(--yyb-text-soft);
  border-color: var(--yyb-border);
  font-weight: 400;
}
.yyb-fu-btn.is-end:hover { background: var(--yyb-surface); color: var(--yyb-text); border-color: #d2cec6; }

/* ─── 質問サジェスト ─────────────────────────── */

.yyb-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 16px 12px; background: var(--yyb-surface); }
.yyb-chip {
  padding: 7px 13px;
  border: 1px solid var(--yyb-ember);
  border-radius: 999px;
  background: #fff;
  color: var(--yyb-ember-dark);
  font: inherit; font-size: 13px;
  cursor: pointer;
}
.yyb-chip:hover { background: var(--yyb-ember); color: #fff; }
.yyb-chip:focus-visible { outline: 2px solid var(--yyb-night); outline-offset: 2px; }

/* ─── 入力欄 ─────────────────────────────────── */

.yyb-form { display: flex; gap: 8px; align-items: flex-end; padding: 12px; border-top: 1px solid var(--yyb-border); background: #fff; }

.yyb-input {
  flex: 1;
  min-height: 44px; max-height: 110px;
  padding: 11px 13px;
  border: 1px solid var(--yyb-border);
  border-radius: 10px;
  font: inherit; font-size: 15px;
  resize: none;
  background: #fff; color: var(--yyb-text);
}
.yyb-input:focus { outline: 2px solid var(--yyb-ember); outline-offset: -1px; border-color: var(--yyb-ember); }

.yyb-send {
  flex: none;
  width: 44px; height: 44px;
  border: 0; border-radius: 10px;
  background: var(--yyb-ember);
  color: #fff; cursor: pointer;
  display: grid; place-items: center;
}
.yyb-send:hover:not(:disabled) { background: var(--yyb-ember-dark); }
.yyb-send:disabled { opacity: .45; cursor: default; }
.yyb-send:focus-visible { outline: 2px solid var(--yyb-night); outline-offset: 2px; }
.yyb-send svg { width: 20px; height: 20px; }

.yyb-note { padding: 0 14px 11px; background: #fff; font-size: 11px; color: var(--yyb-text-soft); line-height: 1.5; }

/* ─── 満足度評価（閉じるときに表示） ─────────── */

.yyb-rating {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px 18px 20px;
  background: #fff;
  border-top: 1px solid var(--yyb-border);
  box-shadow: 0 -10px 30px rgba(28, 36, 56, .12);
  text-align: center;
  animation: yyb-slide-up .22s ease;
}

.yyb-rating-title { margin: 0 0 4px; font-weight: 700; font-size: 15px; }
.yyb-rating-sub { margin: 0 0 12px; font-size: 12.5px; color: var(--yyb-text-soft); line-height: 1.6; }

.yyb-stars { display: flex; justify-content: center; gap: 4px; margin-bottom: 12px; }

.yyb-star {
  width: 44px; height: 44px;
  border: 0; border-radius: 8px;
  background: none;
  color: #d8d5cf;
  font-size: 27px; line-height: 1;
  cursor: pointer;
  transition: transform .12s ease, color .12s ease;
}
.yyb-star:hover { transform: scale(1.14); }
.yyb-star.is-on { color: #f0a32c; }
.yyb-star:focus-visible { outline: 2px solid var(--yyb-ember); outline-offset: 1px; }

.yyb-rating-skip {
  border: 0; background: none;
  color: var(--yyb-text-soft);
  font: inherit; font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
  padding: 6px 12px;
}
.yyb-rating-skip:hover { color: var(--yyb-text); }
.yyb-rating-skip:focus-visible { outline: 2px solid var(--yyb-ember); outline-offset: 2px; }

.yyb-rating.is-done .yyb-stars { pointer-events: none; }
.yyb-rating.is-done .yyb-rating-skip { visibility: hidden; }

@keyframes yyb-slide-up { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

.yyb-panel { position: relative; }

/* ─── スマートフォン ─────────────────────────── */

@media (max-width: 480px) {
  /* iPhoneのホームバーやブラウザ下部バーに隠れないよう、セーフエリア分を確保 */
  .yyb-root {
    right: 12px;
    left: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .yyb-launcher { margin-left: auto; }
  .yyb-panel {
    width: 100%;
    height: calc(100vh - 24px);
    height: calc(100dvh - 24px - env(safe-area-inset-bottom, 0px));
  }
  .yyb-launcher-img { width: 88px; }
  .yyb-launcher.has-image .yyb-launcher-label { font-size: 12px; padding: 5px 11px; }
  .yyb-greet-img { width: 82px; }

  /* 注意書きを入力欄の「上」に移し、入力欄を最下部に置く */
  .yyb-note { order: 4; padding: 8px 14px 6px; font-size: 10.5px; }
  .yyb-form { order: 5; }

  /* 入力欄を見つけやすくする */
  .yyb-form {
    padding: 10px 12px 12px;
    box-shadow: 0 -6px 16px rgba(28, 36, 56, .08);
  }
  .yyb-input {
    min-height: 48px;
    background: var(--yyb-surface);
    border-color: #d6d2ca;
    font-size: 16px; /* iOSで自動ズームさせないため16px以上 */
  }
  .yyb-input::placeholder { color: #8b8f99; }
  .yyb-send { width: 48px; height: 48px; }
}

/* ─── 動きを減らす設定への配慮 ───────────────── */

@media (prefers-reduced-motion: reduce) {
  .yyb-launcher, .yyb-typing span, .yyb-rating, .yyb-star { transition: none; animation: none; }
}