/* 協和ハウス チャットボットウィジェット */
:root {
  /* 右端タブ#kwConsultTab(css/main.css)の背景色に合わせたアクセントカラー。
     タブがそのまま広がってチャット窓になる演出のため、色が途中で変わって
     しまわないよう、タブと同じ#a2543aに揃えている(以前は#b12323赤系だった)。 */
  --kw-chat-accent: #a2543a;
  --kw-chat-accent-dark: #82432e;
  --kw-chat-bg: #ffffff;
  --kw-chat-bot-bubble: #fbf6e8;
  --kw-chat-user-bubble: #a2543a;
  --kw-chat-text: #333333;
  --kw-chat-radius: 14px;
}

#kwChatToggle {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--kw-chat-accent);
  color: #fff;
  border: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, background 0.15s ease;
}
#kwChatToggle:hover {
  background: var(--kw-chat-accent-dark);
  transform: scale(1.05);
}

/* スマホ版の丸いチャットボタンの上に乗るマスコット(PC版は#kwConsultWrap側の
   マスコットが表示されるため、こちらは1024px以上で非表示にする) */
#kwChatToggleMascot {
  position: fixed;
  right: 30px;
  bottom: 72px;
  width: 40px;
  height: auto;
  /* #kwChatPanel(z-index:99999)がDOM順で後ろに来るため、同値だとパネルの
     不透明な背景に隠れてしまう。パネルより確実に手前に出す。 */
  z-index: 100000;
  /* クリックできるおまけ演出(widget.js: bindMascotClickJump)があるため
     pointer-eventsは通常のauto(既定値)のまま。丸ボタンと重なる範囲は
     マスコット側が優先してクリックを受け取る。 */
  cursor: pointer;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3));
  /* チャットを開閉した時に送信ボタン付近へ移動させるための、widget.js側からの
     left/top書き換えをアニメーションさせる */
  transition: left .5s ease-in-out, top .5s ease-in-out;
}
@media screen and (min-width: 1024px) {
  #kwChatToggleMascot { display: none; }
}
@media screen and (max-width: 480px) {
  #kwChatToggleMascot { right: 24px; bottom: 66px; }
}
#kwChatToggle svg {
  width: 28px;
  height: 28px;
  fill: #fff;
}

#kwChatPanel {
  position: fixed;
  right: 20px;
  bottom: 92px;
  width: 340px;
  max-width: calc(100vw - 32px);
  height: 480px;
  max-height: calc(100vh - 140px);
  background: var(--kw-chat-bg);
  border-radius: var(--kw-chat-radius);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 99999;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
}
#kwChatPanel.kw-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* PC(1024px以上)は、右端固定タブ(#kwConsultTab、index.html側)がAIチャットの
   入口になる。別のパネルが横からスライドインするのではなく、タブ自体が
   その場で広がって展開したように見せるため、タブと同じ右端位置を基準に
   scale()で拡大するアニメーションにする(transform-origin: right center)。
   展開中はタブ側(#kwConsultWrap)をフェードアウトさせ、「タブがチャット窓に
   変化した」ように見せる(JS側でkw-hiddenクラスを付け外しする)。 */
@media screen and (min-width: 1024px) {
  #kwChatToggle { display: none; }
  #kwChatPanel {
    top: 50%;
    right: 0;
    bottom: auto;
    transform-origin: right center;
    transform: translateY(-50%) scale(.04, .1);
    transition: opacity .3s ease, transform .4s cubic-bezier(.34, 1.15, .64, 1);
  }
  #kwChatPanel.kw-open {
    transform: translateY(-50%) scale(1, 1);
  }
}

/* AIチャット展開中は右端タブ(#kwConsultWrap)をフェードアウトさせる。
   マスコット(#kwConsultMascot)は展開開始と同時にwidget.js側でbody直下へ
   切り離すため、ここでのフェードの影響を受けずに単独で動き続けられる。 */
#kwConsultWrap {
  transition: opacity .25s ease;
}
#kwConsultWrap.kw-hidden {
  opacity: 0;
  pointer-events: none;
}

/* クリックのたびの小さなジャンプ(おまけ演出の着地ジャンプの約1/3の高さ) */
@keyframes kwMascotClickJump {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-21px); }
  100% { transform: translateY(0); }
}

/* ---- おまけ: マスコットを5回クリックしたときの演出 ---- */
/* 着地後に「右手で額の汗を拭う」しぐさを、左右への傾き(体をひねる動き)で表現する。
   マスコットはGIF画像で腕だけを動かすことはできないため、この傾き＋汗の玉が
   飛んでいく演出の組み合わせで「拭った」ように見せている。 */
@keyframes kwMascotWipe {
  0%   { transform: rotate(0deg)   translateX(0); }
  20%  { transform: rotate(-15deg) translateX(-2px); }
  40%  { transform: rotate(11deg)  translateX(2px); }
  60%  { transform: rotate(-9deg)  translateX(-2px); }
  80%  { transform: rotate(5deg)   translateX(1px); }
  100% { transform: rotate(0deg)   translateX(0); }
}

.kw-mascot-sweat {
  position: fixed;
  width: 6px;
  height: 6px;
  background: linear-gradient(150deg, #9ad8fb, #4fa9e8);
  /* 定番の「水滴」CSS: 正方形の1角だけ直角のまま45deg回転させると、
     上が尖り下が丸い雫の形になる */
  border-radius: 50% 50% 50% 0;
  transform: rotate(45deg);
  box-shadow: inset -1px -1px 1px rgba(0, 0, 0, .12);
  z-index: 100001;
  pointer-events: none;
  animation: kwSweatAppear .35s ease-out both;
}
@keyframes kwSweatAppear {
  0%   { opacity: 0; transform: rotate(45deg) scale(.2); }
  100% { opacity: 1; transform: rotate(45deg) scale(1); }
}

/* 拭った瞬間に、汗の玉が重力で下へ落ちながら消える(加速するのでease-in) */
.kw-mascot-sweat.kw-fly {
  animation: kwSweatFly .5s ease-in forwards;
}
@keyframes kwSweatFly {
  0%   { opacity: 1; transform: rotate(45deg) translate(0, 0) scale(1); }
  100% { opacity: 0; transform: rotate(45deg) translate(6px, 26px) scale(.7); }
}

#kwChatHeader {
  background: var(--kw-chat-accent);
  color: #fff;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
#kwChatHeader small {
  display: block;
  font-weight: 400;
  font-size: 11px;
  opacity: 0.85;
  margin-top: 2px;
}
#kwChatClose {
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  opacity: 0.85;
}
#kwChatClose:hover { opacity: 1; }

#kwChatMessages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fafafa;
}

.kw-msg {
  max-width: 84%;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.6;
  word-break: break-word;
  white-space: pre-wrap;
}
.kw-msg-bot {
  align-self: flex-start;
  background: var(--kw-chat-bot-bubble);
  color: var(--kw-chat-text);
  border-bottom-left-radius: 4px;
}
.kw-msg-user {
  align-self: flex-end;
  background: var(--kw-chat-user-bubble);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.kw-msg-error {
  align-self: flex-start;
  background: #fdecea;
  color: #7a2f26;
  border-bottom-left-radius: 4px;
}

/* 現地訪問予約時、氏名・電話番号・住所をチャット上で1問1答形式で聞く代わりに
   表示するミニフォーム(widget.jsのrenderContactForm()が生成) */
.kw-contact-form {
  align-self: stretch;
  max-width: 92%;
  background: #fff;
  border: 1px solid var(--kw-chat-accent);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kw-form-label {
  font-size: 11px;
  color: var(--kw-chat-text);
  opacity: 0.75;
  margin-top: 6px;
}
.kw-form-label:first-child { margin-top: 0; }
.kw-form-input,
.kw-form-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
}
.kw-form-input:focus,
.kw-form-textarea:focus { border-color: var(--kw-chat-accent); }
.kw-form-textarea { resize: vertical; }
.kw-form-error {
  color: #a33;
  font-size: 12px;
  min-height: 14px;
}
.kw-form-submit {
  margin-top: 6px;
  padding: 10px;
  border: none;
  border-radius: 8px;
  background: var(--kw-chat-accent);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.kw-form-submit:hover { background: var(--kw-chat-accent-dark); }
.kw-form-submit:disabled { background: #cfcac2; cursor: not-allowed; }

/* 現地訪問の候補日をボタンで選べるようにするピッカー(widget.jsの
   renderSlotPicker()が生成)。候補外の日程を希望する場合の手入力欄も含む。 */
.kw-slot-picker {
  align-self: stretch;
  max-width: 92%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kw-slot-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kw-slot-btn {
  padding: 9px 12px;
  border: 1px solid var(--kw-chat-accent);
  border-radius: 20px;
  background: #fff;
  color: var(--kw-chat-accent);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.kw-slot-btn:hover { background: var(--kw-chat-accent-soft, #fbf2ee); }
.kw-slot-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.kw-slot-btn.kw-slot-selected {
  background: var(--kw-chat-accent);
  color: #fff;
}
.kw-slot-btn.kw-slot-other {
  border-style: dashed;
  color: var(--kw-chat-text);
  border-color: #ccc;
}
.kw-slot-other-input,
.kw-slot-other-submit { margin-top: 2px; }

#kwChatTyping {
  align-self: flex-start;
  display: none;
  padding: 9px 14px;
  border-radius: 12px;
  background: var(--kw-chat-bot-bubble);
}
#kwChatTyping.kw-visible { display: flex; gap: 4px; }
#kwChatTyping span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9aa39f;
  animation: kwTypingBounce 1.2s infinite ease-in-out;
}
#kwChatTyping span:nth-child(2) { animation-delay: 0.15s; }
#kwChatTyping span:nth-child(3) { animation-delay: 0.3s; }
@keyframes kwTypingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.6; }
  30% { transform: translateY(-4px); opacity: 1; }
}

#kwChatForm {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid #e5e5e5;
  flex-shrink: 0;
  background: #fff;
}
#kwChatInput {
  flex: 1;
  resize: none;
  border: 1px solid #d9d9d9;
  border-radius: 18px;
  padding: 9px 14px;
  font-size: 13.5px;
  line-height: 1.4;
  max-height: 80px;
  font-family: inherit;
  outline: none;
}
#kwChatInput:focus { border-color: var(--kw-chat-accent); }
#kwChatSend {
  background: var(--kw-chat-accent);
  border: none;
  color: #fff;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, opacity 0.15s ease;
}
#kwChatSend:hover { background: var(--kw-chat-accent-dark); }
#kwChatSend:disabled { opacity: 0.5; cursor: not-allowed; }
#kwChatSend svg { width: 16px; height: 16px; fill: #fff; }

@media (max-width: 480px) {
  #kwChatPanel {
    right: 12px;
    left: 12px;
    width: auto;
    bottom: 84px;
  }
  #kwChatToggle { right: 14px; bottom: 14px; }
}