/* ═══════════════════════════════════════
   チャットボット（HP・LP共用。js/chatbot.js のクラス名に合わせる）
   ═══════════════════════════════════════ */
:root { --c-navy: #13294B; --c-navy-dark: #0B1B33; --c-yellow: #F2B705; --c-yellow-dark: #C99600; --c-sub: #5B6676; --c-gray: #F2F4F7; --c-border: #DDE2E8; }
/* ──────────── チャットボット（js/chatbot.js のクラス名に合わせる） ──────────── */
.chatbot { position: fixed; right: 20px; bottom: 20px; z-index: 60; }
.chatbot-toggle {
  cursor: pointer; border: 0; border-radius: 999px; background: var(--c-navy); color: #FFFFFF;
  font-size: 15px; font-weight: 700; padding: 16px 26px; border-bottom: 4px solid var(--c-navy-dark);
}
.chatbot.open .chatbot-toggle { display: none; }
.chatbot-window {
  display: none; flex-direction: column; width: min(390px, calc(100vw - 32px)); height: min(620px, calc(100vh - 110px));
  background: #FFFFFF; border-radius: 14px; overflow: hidden; border: 1px solid var(--c-border);
}
.chatbot.open .chatbot-window { display: flex; }
.chatbot-header { display: flex; justify-content: space-between; align-items: center; background: var(--c-navy); color: #FFFFFF; padding: 12px 14px; }
.chatbot-header-info { display: flex; gap: 10px; align-items: center; }
.chatbot-header-avatar { width: 18px; }
.chatbot-header-name { font-size: 15px; font-weight: 900; line-height: 1.4; }
.chatbot-header-status { font-size: 12px; color: rgba(255, 255, 255, .75); line-height: 1.4; }
.chatbot-close { cursor: pointer; background: none; border: 1px solid rgba(255, 255, 255, .5); color: #FFFFFF; font-size: 13px; padding: 4px 10px; border-radius: 6px; }
.chatbot-body { flex: 1; overflow-y: auto; padding: 14px; background: var(--c-gray); display: flex; flex-direction: column; gap: 10px; }
.chat-msg { max-width: 88%; font-size: 15px; line-height: 1.7; padding: 10px 14px; border-radius: 12px; }
.chat-msg-bot { background: #FFFFFF; align-self: flex-start; border-top-left-radius: 4px; }
.chat-msg-user { background: var(--c-navy); color: #FFFFFF; align-self: flex-end; border-top-right-radius: 4px; }
.chat-options { display: flex; flex-direction: column; gap: 8px; }
.chat-option-btn {
  cursor: pointer; text-align: left; font-size: 15.5px; font-weight: 700; color: var(--c-navy);
  background: #FFFFFF; border: 2px solid var(--c-navy); border-radius: 10px; padding: 12px 14px;
}
.chat-option-btn:hover { background: #EEF2F7; }
.chat-options-big .chat-option-btn { font-size: 18px; padding: 18px 16px; text-align: center; }
.chat-options-big .chat-option-btn:first-child { background: var(--c-navy); color: #FFFFFF; }
.chat-options-big .chat-option-btn:nth-child(2) { background: var(--c-yellow); border-color: var(--c-yellow); }
.chat-quote { background: #FFFFFF; border: 2px solid var(--c-yellow); border-radius: 12px; padding: 14px 16px; }
.chat-quote-label { font-size: 13px; color: var(--c-sub); }
.chat-quote-amount { font-size: 30px; font-weight: 900; color: var(--c-navy); line-height: 1.3; font-variant-numeric: tabular-nums; }
.chat-quote-note { font-size: 12px; color: var(--c-sub); line-height: 1.7; }
.chat-form { background: #FFFFFF; padding: 14px; border-radius: 12px; display: grid; gap: 10px; }
.chat-form-row label { display: block; font-size: 13px; font-weight: 700; }
.chat-form-row input, .chat-form-row textarea, .chat-input {
  width: 100%; font: inherit; font-size: 16px; border: 2px solid var(--c-border); border-radius: 8px; background: #FFFFFF; padding: 10px 12px;
}
.chat-form-row input:focus, .chat-input:focus { outline: none; border-color: var(--c-navy); }
.chat-form-error { font-size: 13px; color: #B3261E; }
.chat-form-submit, .chat-input-send, .chat-input-back {
  cursor: pointer; font-size: 16px; font-weight: 700; border: 0; border-radius: 8px; background: var(--c-yellow); color: var(--c-navy); padding: 14px; border-bottom: 4px solid var(--c-yellow-dark);
}
.chat-input-send, .chat-input-back { font-size: 14px; padding: 10px 12px; }
.chat-input-back { background: #FFFFFF; border: 2px solid var(--c-border); }
.chat-input-wrap { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: end; }
.chat-input:disabled { opacity: .6; }
.chat-typing span { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--c-sub); animation: typing 1s infinite; }
.chat-typing span:nth-child(2) { animation-delay: .2s; }
.chat-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes typing { 50% { opacity: .2; } }
.chatbot-footer { padding: 10px 14px; border-top: 1px solid var(--c-border); }
.chatbot-tel-link { font-size: 12.5px; color: var(--c-sub); }
.chatbot-tel-link a { font-size: 15px; font-weight: 900; color: var(--c-navy); text-decoration: none; }


/* スマホ：チャットは画面下の固定ボタンから開くので、丸いボタンは出さない */
@media (max-width: 767px) {
  .chatbot-toggle { display: none; }
  .chatbot { right: 0; bottom: 0; left: 0; }
  .chatbot-window { width: 100%; height: calc(100dvh - 60px); border-radius: 14px 14px 0 0; }
}