/* =============================================================
   Jet Stream Pro — チャットボットフォーム（強化版）
   CSS変数はテーマの variables.css から継承
   ============================================================= */

/* ─── テーマ非依存リセット ──────────────────────────────────── */
.jscb-wrap,
.jscb-wrap * {
  box-sizing: border-box;
}

/* ─── ラッパー ──────────────────────────────────────────────── */
.jscb-wrap {
  --jscb-blue-light: color-mix(in srgb, var(--js-color-primary) 8%, var(--js-color-white));
  font-family:      var(--js-font-base);
  width:            100%;
  max-width:        640px;
  margin-inline:    auto;
  background:       var(--js-color-white);
  border:           1px solid var(--js-color-border);
  border-radius:    var(--js-radius-lg);
  box-shadow:       var(--js-shadow-md, 0 4px 24px rgba(0,0,0,.10));
  overflow:         hidden;
  display:          flex;
  flex-direction:   column;
}

/* ─── チャットログ ──────────────────────────────────────────── */
.jscb-log {
  flex:             1;
  min-height:       260px;
  max-height:       480px;
  overflow-y:       auto;
  padding:          1.25rem 1rem;
  display:          flex;
  flex-direction:   column;
  gap:              0.75rem;
  scroll-behavior:  smooth;

  scrollbar-width:  thin;
  scrollbar-color:  var(--js-color-border) transparent;
}
.jscb-log::-webkit-scrollbar       { width: 4px; }
.jscb-log::-webkit-scrollbar-track { background: transparent; }
.jscb-log::-webkit-scrollbar-thumb { background: var(--js-color-border); border-radius: 2px; }

/* ─── 行（row） ─────────────────────────────────────────────── */
.jscb-row {
  display:    flex;
  align-items: flex-end;
  gap:         0.5rem;
  opacity:     0;
  transform:   translateY(8px);
  transition:  opacity var(--js-transition, 0.25s ease),
               transform var(--js-transition, 0.25s ease);
}

/* 出現アニメーション */
.jscb-row--in {
  opacity:   1;
  transform: translateY(0);
}

/* ボット行: 左揃え */
.jscb-row--bot {
  flex-direction: row;
  align-self:     flex-start;
  max-width:      85%;
}

/* ユーザー行: 右揃え */
.jscb-row--user {
  flex-direction: row-reverse;
  align-self:     flex-end;
  max-width:      75%;
}

/* ─── アバター ──────────────────────────────────────────────── */
.jscb-avatar {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.2rem;
  flex-shrink:    0;
}

.jscb-avatar__img {
  width:         36px;
  height:        36px;
  border-radius: 50%;
  object-fit:    cover;
  border:        2px solid var(--js-color-border);
}

.jscb-avatar__fallback {
  width:            36px;
  height:           36px;
  border-radius:    50%;
  background:       var(--js-color-primary);
  color:            var(--js-color-white);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  font-size:        0.875rem;
  font-weight:      700;
  flex-shrink:      0;
}

.jscb-avatar__name {
  font-size:      0.625rem;
  color:          var(--js-color-gray);
  white-space:    nowrap;
  letter-spacing: 0.02em;
}

/* ─── 吹き出し ──────────────────────────────────────────────── */
.jscb-bubble {
  padding:       0.625rem 0.875rem;
  border-radius: var(--js-radius-lg);
  line-height:   1.7;
  font-size:     0.9375rem;
  word-break:    break-word;
}

/* ボット吹き出し: 左下角のみ小さく */
.jscb-bubble--bot {
  background:                var(--js-color-light);
  color:                     var(--js-color-dark);
  border-bottom-left-radius: 4px;
}

/* ユーザー吹き出し: 右下角のみ小さく */
.jscb-bubble--user {
  background:                 var(--js-color-primary);
  color:                      var(--js-color-white);
  border-bottom-right-radius: 4px;
}

/* ─── 入力中アニメーション（3点ドット） ──────────────────────── */
.jscb-bubble--typing {
  display:     flex;
  align-items: center;
  gap:         4px;
  padding:     0.75rem 1rem;
  min-width:   52px;
}

.jscb-dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    var(--js-color-gray);
  animation:     jscbDotBounce 1.2s infinite ease-in-out;
  flex-shrink:   0;
}
.jscb-dot:nth-child(1) { animation-delay: 0s; }
.jscb-dot:nth-child(2) { animation-delay: 0.2s; }
.jscb-dot:nth-child(3) { animation-delay: 0.4s; }

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

/* ─── 入力エリア ────────────────────────────────────────────── */
.jscb-input-area {
  border-top: 1px solid var(--js-color-border);
  padding:    0.875rem 1rem;
  background: var(--js-color-white);
}

.jscb-input-row {
  display:     flex;
  align-items: stretch;
  gap:         0.5rem;
}

/* 非表示ユーティリティ */
.is-hidden {
  display: none !important;
}

/* ─── テキスト / メール / 電話 入力 ────────────────────────── */
.jscb-text-input,
.jscb-email-input,
.jscb-tel-input {
  flex:        1;
  padding:     0.625rem 0.875rem;
  border:      1.5px solid var(--js-color-border);
  border-radius: var(--js-radius-lg);
  font-family: var(--js-font-base);
  font-size:   0.9375rem;
  color:       var(--js-color-dark);
  background:  var(--js-color-light);
  outline:     none;
  transition:  border-color var(--js-transition, 0.25s ease),
               box-shadow   var(--js-transition, 0.25s ease);
}

.jscb-text-input:focus,
.jscb-email-input:focus,
.jscb-tel-input:focus {
  border-color: var(--js-color-primary);
  box-shadow:   0 0 0 3px color-mix(in srgb, var(--js-color-primary) 15%, transparent);
  background:   var(--js-color-white);
}

/* ─── テキストエリア ─────────────────────────────────────────── */
.jscb-input-row--textarea {
  flex-direction: column;
}

.jscb-textarea-input {
  width:        100%;
  padding:      0.625rem 0.875rem;
  border:       1.5px solid var(--js-color-border);
  border-radius: var(--js-radius-lg);
  font-family:  var(--js-font-base);
  font-size:    0.9375rem;
  color:        var(--js-color-dark);
  background:   var(--js-color-light);
  resize:       vertical;
  outline:      none;
  transition:   border-color var(--js-transition, 0.25s ease),
                box-shadow   var(--js-transition, 0.25s ease);
}

.jscb-textarea-input:focus {
  border-color: var(--js-color-primary);
  box-shadow:   0 0 0 3px color-mix(in srgb, var(--js-color-primary) 15%, transparent);
  background:   var(--js-color-white);
}

/* ─── 送信ボタン ────────────────────────────────────────────── */
.jscb-send-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           42px;
  height:          42px;
  border:          none;
  border-radius:   50%;
  background:      var(--js-color-primary);
  color:           var(--js-color-white);
  cursor:          pointer;
  flex-shrink:     0;
  transition:      background  var(--js-transition, 0.25s ease),
                   transform   var(--js-transition, 0.25s ease);
}

.jscb-send-btn:hover {
  background: color-mix(in srgb, var(--js-color-primary) 80%, #000);
}

.jscb-send-btn:active {
  transform: scale(0.92);
}

/* テキストエリア用: ブロックボタン */
.jscb-send-btn--block {
  width:         100%;
  height:        auto;
  border-radius: var(--js-radius-lg);
  padding:       0.625rem 1.25rem;
  font-family:   var(--js-font-base);
  font-size:     0.9375rem;
  font-weight:   700;
}

/* ─── 選択肢ボタン（select タイプ） ────────────────────────── */
.jscb-input-row--select {
  display: block;
}

.jscb-select-group {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.5rem;
}

.jscb-choice-btn {
  padding:      0.5rem 1rem;
  border:       1.5px solid var(--js-color-border);
  border-radius: var(--js-radius-lg);
  background:   var(--jscb-blue-light, #f0f6ff);
  color:        var(--js-color-dark);
  font-family:  var(--js-font-base);
  font-size:    0.9rem;
  font-weight:  600;
  cursor:       pointer;
  transition:   background  var(--js-transition, 0.25s ease),
                color       var(--js-transition, 0.25s ease),
                border-color var(--js-transition, 0.25s ease),
                transform   var(--js-transition, 0.25s ease);
}

.jscb-choice-btn:hover {
  background:   var(--js-color-primary);
  color:        var(--js-color-white);
  border-color: var(--js-color-primary);
}

.jscb-choice-btn:active {
  transform: scale(0.95);
}

/* ─── 確認カード（review ステップ） ────────────────────────── */
.jscb-bubble--review {
  padding:   0.75rem 1rem;
  max-width: 100%;
}

.jscb-review__title {
  margin:         0 0 0.5rem;
  font-size:      0.75rem;
  font-weight:    700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--js-color-primary);
}

.jscb-review__list {
  margin:                0;
  display:               grid;
  grid-template-columns: auto 1fr;
  gap:                   0.375rem 0.75rem;
  font-size:             0.9rem;
}

.jscb-review__list dt {
  font-weight: 600;
  color:       var(--js-color-dark);
  white-space: nowrap;
}

.jscb-review__list dd {
  margin:     0;
  color:      var(--js-color-dark);
  opacity:    0.8;
  word-break: break-word;
}

/* 送信ボタン（primaryスタイル） */
.jscb-choice-btn--primary {
  background:   var(--js-color-primary);
  color:        var(--js-color-white);
  border-color: var(--js-color-primary);
}

.jscb-choice-btn--primary:hover {
  background:   color-mix(in srgb, var(--js-color-primary) 80%, #000);
  border-color: color-mix(in srgb, var(--js-color-primary) 80%, #000);
  color:        var(--js-color-white);
}

/* ─── フォームステップ ──────────────────────────────────────── */
.jscb-form-step {
  border-top: 1px solid var(--js-color-border);
  padding:    1.25rem 1.25rem 1.5rem;
  background: var(--js-color-light);

  opacity:    0;
  transform:  translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.jscb-form-step--visible {
  opacity:   1;
  transform: translateY(0);
}

/* CF7 / FluentForms の内部スタイル調整 */
.jscb-form-step .wpcf7-form p,
.jscb-form-step .ff-el-group {
  margin-bottom: 0.875rem;
}

.jscb-form-step input[type="text"],
.jscb-form-step input[type="email"],
.jscb-form-step input[type="tel"],
.jscb-form-step input[type="url"],
.jscb-form-step textarea,
.jscb-form-step select {
  width:         100%;
  padding:       0.5rem 0.75rem;
  border:        1.5px solid var(--js-color-border);
  border-radius: var(--js-radius-lg);
  font-family:   var(--js-font-base);
  font-size:     0.9375rem;
  background:    var(--js-color-white);
  color:         var(--js-color-dark);
  transition:    border-color var(--js-transition, 0.25s ease);
}

.jscb-form-step input:focus,
.jscb-form-step textarea:focus,
.jscb-form-step select:focus {
  border-color: var(--js-color-primary);
  outline:      none;
}

.jscb-form-step input[type="submit"],
.jscb-form-step button[type="submit"],
.jscb-form-step .wpcf7-submit,
.jscb-form-step .ff-btn-submit {
  display:      inline-block;
  padding:      0.75rem 2rem;
  background:   var(--js-color-primary);
  color:        var(--js-color-white);
  border:       none;
  border-radius: var(--js-radius-lg);
  font-family:  var(--js-font-base);
  font-size:    1rem;
  font-weight:  700;
  cursor:       pointer;
  transition:   background var(--js-transition, 0.25s ease),
                transform  var(--js-transition, 0.25s ease);
}

.jscb-form-step input[type="submit"]:hover,
.jscb-form-step button[type="submit"]:hover,
.jscb-form-step .wpcf7-submit:hover,
.jscb-form-step .ff-btn-submit:hover {
  background: color-mix(in srgb, var(--js-color-primary) 80%, #000);
}

/* ─── フォールバック案内 ────────────────────────────────────── */
.jscb-fallback {
  text-align: center;
  padding:    0.5rem 0;
}

.jscb-fallback__lead {
  font-size:     0.9375rem;
  color:         var(--js-color-dark);
  margin-bottom: 1rem;
  line-height:   1.8;
}

.jscb-fallback__company {
  font-weight:   700;
  font-size:     1rem;
  margin-bottom: 0.5rem;
}

.jscb-fallback__tel a,
.jscb-fallback__email a {
  color:           var(--js-color-primary);
  font-size:       1.125rem;
  font-weight:     700;
  text-decoration: none;
}

.jscb-fallback__tel a:hover,
.jscb-fallback__email a:hover {
  text-decoration: underline;
}

/* ─── シェイクアニメーション（バリデーションエラー） ────────── */
@keyframes jscbShake {
  0%, 100% { transform: translateX(0);   }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px);  }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px);  }
}

.jscb-shake {
  animation: jscbShake 0.4s ease;
}

/* ─── レスポンシブ ──────────────────────────────────────────── */
@media (max-width: 480px) {
  .jscb-log {
    min-height: 200px;
    max-height: 360px;
  }

  .jscb-bubble {
    font-size: 0.875rem;
  }

  .jscb-row--bot,
  .jscb-row--user {
    max-width: 92%;
  }

  .jscb-avatar__img,
  .jscb-avatar__fallback {
    width:  30px;
    height: 30px;
  }

  .jscb-choice-btn {
    font-size: 0.85rem;
    padding:   0.425rem 0.75rem;
  }
}

/* ─── color-mix フォールバック（古いブラウザ向け） ────────── */
@supports not (background: color-mix(in srgb, red 80%, #000)) {
  .jscb-wrap {
    --jscb-blue-light: #f0f6ff;
  }

  .jscb-send-btn:hover {
    background: var(--js-color-primary);
    opacity: 0.85;
  }

  .jscb-form-step input[type="submit"]:hover,
  .jscb-form-step button[type="submit"]:hover,
  .jscb-form-step .wpcf7-submit:hover,
  .jscb-form-step .ff-btn-submit:hover {
    background: var(--js-color-primary);
    opacity: 0.85;
  }
}