/**
 * booking_chat_widget.css — クリニックHP向け AIチャット予約ウィジェット
 *
 * 全セレクタに bcw_ プレフィックスを付与してHP本体のCSSと競合回避。
 */

.bcw_root {
  position: fixed;
  right: 0; bottom: 0;
  z-index: 2147483640;  /* 最前面 */
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  color: #263238;
  box-sizing: border-box;
}
.bcw_root *, .bcw_root *::before, .bcw_root *::after { box-sizing: border-box; }

/* ========== フローティングボタン ========== */
.bcw_fab {
  position: fixed;
  right: 24px; bottom: 24px;
  width: auto; min-width: 64px; height: 64px;
  padding: 0 18px 0 16px;
  display: inline-flex; align-items: center; gap: 8px;
  background: #2e7d32;
  color: #fff;
  border: none;
  border-radius: 32px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  font-size: 15px; font-weight: 600;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.bcw_fab:hover {
  background: #1b5e20;
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.25);
}
.bcw_fab:active { transform: translateY(0); }
.bcw_fab_label { white-space: nowrap; }

/* ========== チャットパネル ========== */
.bcw_panel {
  position: fixed;
  right: 24px; bottom: 100px;
  width: 600px; max-width: calc(100vw - 48px);
  height: 720px; max-height: calc(100vh - 140px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.bcw_panel[hidden] { display: none; }

/* 最大化モード: viewport の約 45% 幅 × 88% 高 (ユーザー要望) */
.bcw_panel_maximized {
  right: 24px !important;
  bottom: 24px !important;
  top: auto !important;
  width: min(45vw, 800px) !important;
  height: 88vh !important;
  max-width: none !important;
  max-height: 1000px !important;
}

/* リサイズハンドル (左上、ドラッグでサイズ変更) */
.bcw_resize_handle {
  position: absolute;
  top: 0; left: 0;
  width: 22px; height: 22px;
  cursor: nwse-resize;
  z-index: 2;
  background:
    linear-gradient(135deg,
      transparent 0%, transparent 40%,
      rgba(255,255,255,.6) 40%, rgba(255,255,255,.6) 45%,
      transparent 45%, transparent 55%,
      rgba(255,255,255,.6) 55%, rgba(255,255,255,.6) 60%,
      transparent 60%);
  border-radius: 16px 0 0 0;
  opacity: .7;
  transition: opacity .15s ease, background-color .15s ease;
}
.bcw_resize_handle:hover { opacity: 1; }
.bcw_panel_maximized .bcw_resize_handle { display: none; }

/* ヘッダーボタン群 (最大化 + 閉じる) */
.bcw_header_btns {
  display: flex;
  align-items: center;
  gap: 4px;
}
.bcw_maximize {
  background: transparent; border: none; color: #fff;
  font-size: 18px; line-height: 1;
  cursor: pointer; padding: 4px 8px;
  opacity: .85;
  border-radius: 4px;
}
.bcw_maximize:hover { opacity: 1; background: rgba(255,255,255,.15); }

.bcw_header {
  background: linear-gradient(135deg, #2e7d32, #4caf50);
  color: #fff;
  padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.bcw_header_title { display: flex; align-items: center; gap: 10px; }
.bcw_header_icon { font-size: 28px; }
.bcw_header_clinic { font-size: 15px; font-weight: 600; }
.bcw_header_sub { font-size: 11px; opacity: .85; }
.bcw_close {
  background: transparent; border: none; color: #fff;
  font-size: 28px; line-height: 1; cursor: pointer; padding: 0 6px;
  opacity: .85;
}
.bcw_close:hover { opacity: 1; }

.bcw_disclaimer {
  background: #fff8e1;
  color: #6d4c00;
  font-size: 11px;
  padding: 6px 12px;
  border-bottom: 1px solid #ffe082;
}

/* ========== メッセージ領域 ========== */
.bcw_messages {
  flex: 1;
  list-style: none;
  margin: 0; padding: 12px;
  overflow-y: auto;
  background: #f5f7f5;
  display: flex; flex-direction: column; gap: 8px;
}
.bcw_msg {
  max-width: 85%;
  display: flex; flex-direction: column;
  animation: bcw_fade_in .2s ease;
}
@keyframes bcw_fade_in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.bcw_msg_user { align-self: flex-end; align-items: flex-end; }
.bcw_msg_assistant { align-self: flex-start; align-items: flex-start; }
.bcw_msg_system {
  align-self: center;
  font-size: 12px; color: #78909c;
  background: #eceff1; padding: 6px 12px; border-radius: 12px;
}
.bcw_msg_hint { align-self: stretch; max-width: 100%; }

.bcw_bubble {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.bcw_msg_user .bcw_bubble {
  background: #2e7d32;
  color: #fff;
  border-bottom-right-radius: 4px;
}
/* Markdown 描画 (assistant のみ) */
.bcw_msg_assistant .bcw_bubble strong { font-weight: 700; color: #1b5e20; }
.bcw_msg_assistant .bcw_bubble em { font-style: italic; color: #2e7d32; }
.bcw_msg_assistant .bcw_bubble code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  background: rgba(46,125,50,.10);
  padding: 1px 5px; border-radius: 4px;
}
.bcw_msg_assistant .bcw_bubble .bcw_md_list {
  margin: 4px 0 4px 1.4em;
  padding: 0;
}
.bcw_msg_assistant .bcw_bubble .bcw_md_list li {
  margin: 2px 0;
}

.bcw_msg_assistant .bcw_bubble {
  background: #fff;
  color: #263238;
  border: 1px solid #e0e0e0;
  border-bottom-left-radius: 4px;
}
.bcw_time {
  font-size: 10px; color: #90a4ae;
  margin-top: 2px; padding: 0 4px;
}

/* ========== タイピングインジケータ ========== */
.bcw_msg_typing {
  align-self: flex-start;
  display: inline-flex;
  flex-direction: row;  /* 親 .bcw_msg の column 継承を上書き (dot を横並び) */
  align-items: center;
  gap: 4px;
  background: #fff;
  border: 1px solid #e0e0e0;
  padding: 12px 14px;
  border-radius: 16px;
}
.bcw_typing_dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #90a4ae;
  animation: bcw_typing 1.2s infinite ease-in-out;
}
.bcw_typing_dot:nth-child(2) { animation-delay: .2s; }
.bcw_typing_dot:nth-child(3) { animation-delay: .4s; }
@keyframes bcw_typing {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ========== UI ヒント: ボタン ========== */
.bcw_hints_buttons {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 4px 0 8px 4px;
}
.bcw_hint_btn {
  padding: 8px 14px;
  border-radius: 20px;
  border: 1.5px solid #4caf50;
  background: #fff;
  color: #2e7d32;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: all .15s ease;
}
.bcw_hint_btn:hover:not(:disabled) {
  background: #e8f5e9;
  transform: translateY(-1px);
}
.bcw_hint_btn_primary {
  background: #2e7d32; color: #fff; border-color: #2e7d32;
}
.bcw_hint_btn_primary:hover:not(:disabled) {
  background: #1b5e20; border-color: #1b5e20;
}
.bcw_hint_btn_danger {
  border-color: #c62828; color: #c62828;
}
.bcw_hint_btn_danger:hover:not(:disabled) {
  background: #ffebee;
}
.bcw_hint_btn:disabled {
  opacity: .5; cursor: not-allowed;
}

/* ========== UI ヒント: カード ========== */
.bcw_card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-left: 4px solid #4caf50;
  border-radius: 10px;
  padding: 12px;
  margin: 4px 0;
  font-size: 13px;
}
.bcw_card_title { font-weight: 600; color: #2e7d32; margin-bottom: 4px; }
.bcw_card_subtitle { color: #546e7a; font-size: 12px; margin-bottom: 6px; }
.bcw_card_body { color: #263238; line-height: 1.5; }
.bcw_card_action {
  margin-top: 8px;
  padding: 6px 16px;
  border-radius: 16px;
  border: none;
  background: #2e7d32; color: #fff;
  font-size: 12px; font-weight: 500;
  cursor: pointer;
}
.bcw_card_action:hover:not(:disabled) { background: #1b5e20; }
.bcw_card_action:disabled { opacity: .5; cursor: not-allowed; }

/* ========== UI ヒント: 入力フォーム ========== */
.bcw_inputs_form {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.bcw_input_row { display: flex; flex-direction: column; gap: 4px; }
.bcw_input_label { font-size: 12px; color: #546e7a; }
.bcw_input_field {
  padding: 8px 10px;
  border: 1px solid #cfd8dc;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}
.bcw_input_field:focus {
  outline: none;
  border-color: #4caf50;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, .2);
}
.bcw_inputs_submit {
  margin-top: 4px;
  padding: 10px;
  background: #2e7d32; color: #fff;
  border: none; border-radius: 6px;
  font-size: 14px; font-weight: 500;
  cursor: pointer;
}
.bcw_inputs_submit:hover:not(:disabled) { background: #1b5e20; }
.bcw_inputs_submit:disabled { opacity: .5; }

/* ========== 予約確定バナー ========== */
.bcw_reservation_banner {
  background: linear-gradient(135deg, #43a047, #66bb6a);
  color: #fff;
  padding: 14px;
  border-radius: 10px;
  text-align: center;
  margin: 4px 0;
}
.bcw_reservation_title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.bcw_reservation_body { font-size: 13px; opacity: .95; }

/* ========== フォールバック（電話誘導）バナー ========== */
.bcw_fallback_banner {
  background: #fff3e0;
  border: 1px solid #ffb74d;
  padding: 12px;
  border-radius: 10px;
  margin: 4px 0;
  text-align: center;
}
.bcw_fallback_title { font-size: 13px; color: #e65100; margin-bottom: 8px; }
.bcw_fallback_phone {
  display: inline-block;
  padding: 8px 20px;
  background: #e65100; color: #fff !important;
  text-decoration: none !important;
  border-radius: 24px;
  font-size: 15px; font-weight: 700;
}
.bcw_fallback_phone:hover { background: #bf360c; }

/* ========== 入力エリア ========== */
.bcw_form {
  display: flex; gap: 8px;
  padding: 10px 12px;
  background: #fff;
  border-top: 1px solid #e0e0e0;
  align-items: flex-end;  /* textarea 高さ伸縮時に送信ボタンが下揃え */
}
.bcw_input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #cfd8dc;
  border-radius: 20px;
  font-size: 14px; font-family: inherit;
  outline: none;
  resize: none;      /* textarea のドラッグハンドル非表示 */
  line-height: 1.4;
  min-height: 40px;  /* 1 行時の高さ */
  max-height: 120px; /* 約 5 行で頭打ち */
  overflow-y: auto;
}
.bcw_input:focus {
  border-color: #4caf50;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, .2);
}
.bcw_input:disabled { opacity: .6; }
.bcw_send {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 50%; border: none;
  background: #2e7d32; color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
.bcw_send:hover:not(:disabled) { background: #1b5e20; }
.bcw_send:active:not(:disabled) { transform: scale(.95); }
.bcw_send:disabled { opacity: .5; cursor: not-allowed; }

/* ========== スマホ対応 (〜600px) ========== */
@media (max-width: 600px) {
  .bcw_fab {
    right: 16px; bottom: 16px;
    height: 56px; min-width: 56px;
  }
  .bcw_panel {
    right: 0; bottom: 0; left: 0; top: auto;
    width: 100%; max-width: 100%;
    height: 90vh; max-height: 90vh;
    border-radius: 16px 16px 0 0;
  }
}