/* 日本語向けフォント（OS標準のゴシック体を優先） */
:root {
  --chatbot-open-top-gap: 70px;
  --chatbot-font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;
}

/* ===== 共通 ===== */
.chatbot-container,
.chatbot-container * {
  font-family: var(--chatbot-font-family) !important;
}

.chatbot-container {
  z-index: 1;
}

.chatbot-title,
.chatbot-title * {
  color: #333 !important;
}

.chatbot-goods-info-item blockquote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.chatbot-goods-info-item p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* ===== PC（801px以上） ===== */
@media screen and (min-width: 801px) {
  body.footer_fixed_ .chatbot-container {
    bottom: 80px !important;
    overflow: visible !important;
  }

  /* 閉じているときだけ従来の max-height を適用 */
  body.footer_fixed_ .chatbot-container:not(.is-open) {
    max-height: calc(100vh - 420px) !important;
  }

  .chatbot-title,
  .chatbot-title * {
    font-size: 14px;
  }

  .chatbot-container:not(.is-open) .chatbot-header {
    padding: 45px 15px 8px;
    font-size: 14px;
  }

  /* --- 開いたとき: 幅400px固定 / 上余白は top+bottom で確保（max-height は使わない） --- */
  .chatbot-container.is-open {
    display: flex !important;
    flex-direction: column !important;
    width: 400px !important;
    max-width: 400px !important;
    min-width: 400px !important;
    top: var(--chatbot-open-top-gap) !important;
    bottom: 0 !important;
    height: auto !important;
    max-height: none !important;
    transform: translateY(0) !important;
    overflow: hidden !important;
  }

  body.footer_fixed_ .chatbot-container.is-open {
    bottom: 80px !important;
    max-height: none !important;
  }

  .chatbot-container.is-open .chatbot-header {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
  }

  .chatbot-container.is-open .chatbot-frame {
    width: 400px !important;
    max-width: 400px !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .chatbot-container.is-open .chatbot-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
  }

  /* サジェスト・フッターは高さを潰さない（flex-shrink 防止） */
  .chatbot-container.is-open .floating-buttons-container,
  .chatbot-container.is-open .suggested-questions-container,
  .chatbot-container.is-open .chatbot-footer,
  .chatbot-container.is-open .chatbot-powered-by {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
  }
}

/* ===== スマホ（800px以下） ===== */
@media screen and (max-width: 800px) {
  .chatbot-container {
    bottom: 50px !important;
  }

  .chatbot-title,
  .chatbot-title * {
    font-size: 11px;
  }

  .chatbot-container:not(.is-open) .chatbot-header {
    background-position: top 11px center !important;
  }

  /* 開いたとき: 上余白は top+bottom で確保 */
  .chatbot-container.is-open {
    display: flex !important;
    flex-direction: column !important;
    top: var(--chatbot-open-top-gap) !important;
    bottom: 50px !important;
    height: auto !important;
    max-height: none !important;
    transform: translateY(0) !important;
    overflow: hidden !important;
  }

  body.footer_fixed_ .chatbot-container.is-open {
    bottom: 50px !important;
    max-height: none !important;
  }

  .chatbot-container.is-open .chatbot-header {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
  }

  .chatbot-container.is-open .chatbot-frame {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .chatbot-container.is-open .chatbot-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
  }

  .chatbot-container.is-open .floating-buttons-container,
  .chatbot-container.is-open .suggested-questions-container,
  .chatbot-container.is-open .chatbot-footer,
  .chatbot-container.is-open .chatbot-powered-by {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
  }
}