/**
 * 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;
  /* A2: 初期幅を 600 → 400 に縮小、HP の主要 CTA を隠さない */
  width: 400px; max-width: calc(100vw - 48px);
  height: 640px; 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;
  /* F1: 全体フォントサイズを底上げ (高齢者・ロービジョン対応) */
  font-size: 16px;
}
.bcw_panel[hidden] { display: none; }
/* A5: パネル展開時の slide-in (200ms ease-out) */
.bcw_panel:not([hidden]) {
  animation: bcw_panel_slide_in 200ms ease-out;
}
@keyframes bcw_panel_slide_in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 最大化モード: 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; }

/* A2: 左端フル高リサイザ — 幅のみ調整するための専用ハンドル
   (既存の左上 nwse-resize は両方向、新ハンドルは横幅のみ ew-resize) */
.bcw_resize_handle_left {
  position: absolute;
  top: 22px; bottom: 0; left: 0;
  width: 6px;
  cursor: ew-resize;
  z-index: 2;
  background: transparent;
  transition: background .15s ease;
}
.bcw_resize_handle_left:hover {
  background: rgba(46,125,50,.25);
}
.bcw_panel_maximized .bcw_resize_handle_left,
.bcw_panel_minimized .bcw_resize_handle_left { display: none; }

/* ヘッダーボタン群 (最大化 + 閉じる) */
.bcw_header_btns {
  display: flex;
  align-items: center;
  gap: 4px;
}
.bcw_maximize,
.bcw_minimize,
.bcw_help_btn {
  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,
.bcw_minimize:hover,
.bcw_help_btn:hover { opacity: 1; background: rgba(255,255,255,.15); }
.bcw_help_btn { font-size: 14px; font-weight: 700; }
/* C-3 (2026-05-27): SVG 切替 — aria-pressed で 2 種の icon を出し分け */
.bcw_maximize .bcw_icon_collapse { display: none; }
.bcw_maximize[aria-pressed="true"] .bcw_icon_expand { display: none; }
.bcw_maximize[aria-pressed="true"] .bcw_icon_collapse { display: inline-block; }
.bcw_maximize { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; }

/* C-5 (2026-05-27): screen reader 専用テキスト (CLAUDE.md (?) ヘルプ規約準拠)
   視覚的には完全に hidden だが accessibility tree には残る (WAI-ARIA 標準) */
.bcw_sr_only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* A4: 最小化状態 — header だけ残してその他を非表示。会話履歴は DOM 保持 */
.bcw_panel_minimized {
  height: auto !important;
  max-height: none !important;
  width: 280px !important;
  min-width: 0 !important;
}
.bcw_panel_minimized .bcw_resize_handle,
.bcw_panel_minimized .bcw_resize_handle_left,
.bcw_panel_minimized .bcw_disclaimer,
.bcw_panel_minimized .bcw_progress,
.bcw_panel_minimized .bcw_privacy,
.bcw_panel_minimized .bcw_messages,
.bcw_panel_minimized .bcw_new_msg_badge,
.bcw_panel_minimized .bcw_starters_sticky_zone,
.bcw_panel_minimized .bcw_quick_sticky_zone,
.bcw_panel_minimized .bcw_form {
  display: none !important;
}
.bcw_panel_minimized .bcw_header { cursor: pointer; }   /* ヘッダークリックで展開 */

.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; }

/* F2: 言語切替ボタン (ヘッダー右端、🌐 + 現在言語コード) */
.bcw_lang {
  background: transparent;
  border: 1px solid rgba(255,255,255,.4);
  color: #fff;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px; font-weight: 600;
  opacity: .85;
  display: inline-flex; align-items: center; gap: 4px;
  transition: opacity .15s ease, background .15s ease;
}
.bcw_lang:hover { opacity: 1; background: rgba(255,255,255,.15); }
.bcw_lang_menu {
  position: absolute;
  top: 56px; right: 90px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  padding: 4px 0;
  z-index: 10;
  min-width: 140px;
}
.bcw_lang_menu[hidden] { display: none; }
.bcw_lang_option {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13px;
  color: #263238;
  background: transparent; border: none;
  width: 100%;
  text-align: left;
}
.bcw_lang_option:hover { background: #e8f5e9; }
.bcw_lang_option_active {
  font-weight: 700;
  color: #2e7d32;
}
.bcw_lang_option_active::after { content: " ✓"; margin-left: auto; }

.bcw_disclaimer {
  background: #e8f5e9;          /* A1: 警告色 → ニュートラル緑 */
  color: #2e7d32;
  font-size: 12px;              /* F1: 11→12px (可読性) */
  padding: 6px 12px;
  border-bottom: 1px solid #c8e6c9;
  /* × ボタン用に flex 化 */
  display: flex; align-items: center; gap: 8px;
  /* (?) 押下時の slide-down / × 押下時の fade-out を CSS transition で表現 */
  overflow: hidden;
  max-height: 80px;
  opacity: 1;
  transition: max-height .28s ease-out, opacity .28s ease-out,
              padding .28s ease-out, border-width .28s ease-out;
}
.bcw_disclaimer_text { flex: 1; min-width: 0; }
.bcw_disclaimer[hidden],
.bcw_privacy[hidden] { display: none !important; }

/* バナー共通: bcw_collapsed クラスで縮小 (アニメーション付き) */
.bcw_disclaimer.bcw_collapsed,
.bcw_progress.bcw_collapsed,
.bcw_privacy.bcw_collapsed {
  max-height: 0 !important;
  opacity: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-bottom-width: 0 !important;
  pointer-events: none;
}

/* (?) 押下時の bounce 演出 ─ 「ぱっと気付ける」表示変化 */
@keyframes bcw_banner_reveal_anim {
  0%   { transform: translateY(-6px); }
  55%  { transform: translateY(3px); }
  100% { transform: translateY(0); }
}
.bcw_banner_reveal { animation: bcw_banner_reveal_anim .35s ease-out; }
/* dismissable バナーの × 共通スタイル */
.bcw_dismiss_btn {
  background: transparent; border: none;
  color: inherit;
  cursor: pointer;
  font-size: 16px; line-height: 1;
  padding: 2px 6px;
  opacity: .5;
  border-radius: 4px;
  flex-shrink: 0;
}
.bcw_dismiss_btn:hover { opacity: 1; background: rgba(0,0,0,.05); }

/* A3: 進捗インジケータ (sticky 帯、disclaimer の直下、デフォルト非表示) */
.bcw_progress {
  display: flex; align-items: center; gap: 2px;
  padding: 8px 10px;
  background: #fafafa;
  border-bottom: 1px solid #e0e0e0;
  font-size: 11px;
  white-space: nowrap;
  /* (?) 押下時アニメ */
  overflow: hidden;
  max-height: 60px;
  opacity: 1;
  transition: max-height .28s ease-out, opacity .28s ease-out,
              padding .28s ease-out, border-width .28s ease-out;
}
.bcw_progress[hidden] { display: none !important; }
.bcw_progress_steps { flex: 1; display: inline-flex; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; }
.bcw_progress_step {
  display: inline-flex; align-items: center; gap: 3px;
  color: #b0bec5;
  font-weight: 500;
  flex-shrink: 0;
}
.bcw_progress_step + .bcw_progress_step::before {
  content: "▸";
  margin: 0 4px;
  color: #cfd8dc;
  font-size: 10px;
}
.bcw_progress_step_done { color: #66bb6a; }
.bcw_progress_step_done::after { content: " ✓"; font-size: 10px; }
.bcw_progress_step_active {
  color: #2e7d32;
  font-weight: 700;
}

/* E1: プライバシー表記 (disclaimer 下に小さな 1 行、デフォルト非表示) */
.bcw_privacy {
  font-size: 10px;
  color: #78909c;
  padding: 4px 12px 6px;
  background: #fafafa;
  border-bottom: 1px solid #eceff1;
  display: flex; align-items: center; gap: 6px;
  justify-content: center;
  /* (?) 押下時アニメ */
  overflow: hidden;
  max-height: 40px;
  opacity: 1;
  transition: max-height .28s ease-out, opacity .28s ease-out,
              padding .28s ease-out, border-width .28s ease-out;
}
.bcw_privacy_text { flex: 1; text-align: center; }
.bcw_privacy a {
  color: #546e7a;
  text-decoration: underline;
}
.bcw_privacy a:hover { color: #2e7d32; }
/* 旧バリアント (警告色) を残しておきたい時の保険 */
.bcw_disclaimer_warn {
  background: #fff8e1;
  color: #6d4c00;
  border-bottom: 1px solid #ffe082;
}

/* ========== メッセージ領域 ========== */
.bcw_messages {
  flex: 1;
  list-style: none;
  margin: 0; padding: 12px;
  overflow-y: auto;
  /* scroll chaining 遮断 — モバイルで端到達後のスワイプが背景 HP に
     伝わってメインがスクロールしてしまう bug 対策 (2026-05-24) */
  overscroll-behavior: contain;
  /* iOS の慣性スクロールを維持 */
  -webkit-overflow-scrolling: touch;
  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 {
  /* B3: ユーザーバブルを淡グレーへ。緑塗りつぶし → 色の役割を分離
     (緑 = AI/めいじろう専有色、ユーザー = 中立的なグレー) */
  background: #f0f0f0;
  color: #263238;
  border: 1px solid #e0e0e0;
  border-bottom-right-radius: 4px;
}
/* Markdown 描画 (assistant のみ)
   wrap > row > bubble の新構造でも当たるよう ancestor を 2 系統許可 */
.bcw_msg_assistant .bcw_bubble strong,
.bcw_msg_assistant_wrap .bcw_bubble strong { font-weight: 700; color: #1b5e20; }
.bcw_msg_assistant .bcw_bubble em,
.bcw_msg_assistant_wrap .bcw_bubble em { font-style: italic; color: #2e7d32; }
.bcw_msg_assistant .bcw_bubble code,
.bcw_msg_assistant_wrap .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,
.bcw_msg_assistant_wrap .bcw_bubble .bcw_md_list {
  /* B5: 箇条書きインデントを軽量化 (1.4em → 1.1em)、行間も少し詰める */
  margin: 4px 0 4px 1.1em;
  padding: 0;
}
.bcw_msg_assistant .bcw_bubble .bcw_md_list li,
.bcw_msg_assistant_wrap .bcw_bubble .bcw_md_list li {
  margin: 1px 0;
  padding-left: 2px;
}

.bcw_msg_assistant .bcw_bubble,
.bcw_msg_assistant_wrap .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;
}

/* F3: 音声読み上げボタン (各 AI バブル右下、🔊) */
.bcw_tts {
  display: inline-flex; align-items: center; gap: 2px;
  background: transparent; border: none;
  color: #78909c;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
  margin-left: 4px;
  border-radius: 8px;
  opacity: .6;
  transition: opacity .15s ease, color .15s ease;
}
.bcw_tts:hover { opacity: 1; color: #2e7d32; }
.bcw_tts_playing {
  color: #c62828 !important;
  opacity: 1 !important;
  animation: bcw_tts_pulse 1s ease-in-out infinite;
}
@keyframes bcw_tts_pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .5; }
}
.bcw_msg_meta {
  display: flex; align-items: center; gap: 2px;
  margin-top: 2px; padding: 0 4px;
}
/* B1: 直前メッセージと 5 分以内 & 同 sender ならタイムスタンプを隠す */
.bcw_time_hidden { display: none; }

/* D1: AI バブル左にめいじろうアバター (🦘 絵文字 fallback、画像があれば差し替え)
   LINE 慣習に合わせた layout:
     wrap (column-flex)
       └ row (flex-direction: row) — avatar (top-left) + bubble
       └ meta_row — timestamp + 🔊、wrap 左端揃え (avatar の真下)
*/
.bcw_msg_assistant_wrap {
  display: flex;
  flex-direction: column !important;  /* 上から row, 下に meta */
  align-items: flex-start;
  gap: 4px;
  align-self: flex-start;
  max-width: 85%;
}
.bcw_msg_assistant_row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;   /* LINE: アバターはバブル最上端と揃える */
  gap: 6px;
  width: 100%;
}
.bcw_msg_avatar {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #81c784, #2e7d32);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  user-select: none;
}
.bcw_msg_avatar_img {
  width: 100%; height: 100%; border-radius: 50%;
  object-fit: cover;
}
.bcw_msg_assistant_wrap .bcw_msg_meta {
  /* LINE 慣習: timestamp は wrap の左端 (= avatar の真下) に揃える。
     row 内の bubble は avatar (32) + gap (6) = 38px インデントしているが、
     meta_row は wrap 直下の sibling なのでオフセット無しで左端から始まる。 */
  padding: 0;
  margin-left: 0;
}

/* ========== タイピングインジケータ ========== */
.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;
}
/* B2: destructive ボタン (誤タップ警戒) — 視認的にトーンを落とし、warning アイコン併設 */
.bcw_hint_btn_destructive {
  border-color: #b0bec5;        /* 控えめなグレー枠で「重要だが慎重に」を示す */
  color: #546e7a;
  background: #fafafa;
}
.bcw_hint_btn_destructive::before {
  content: "⚠ ";                 /* 視覚的な注意マーカー */
  font-size: 12px;
  opacity: .8;
}
.bcw_hint_btn_destructive:hover:not(:disabled) {
  background: #ffebee;
  border-color: #c62828;
  color: #c62828;
}
.bcw_hint_btn:disabled {
  opacity: .5; cursor: not-allowed;
}

/* E3: 会話スターター (初期表示の質問例カード) */
.bcw_starters {
  display: flex; flex-direction: column;
  gap: 6px;
  margin: 4px 0 12px 0;
  padding: 0 4px;
}
.bcw_starters_label {
  font-size: 11px;
  color: #78909c;
  margin-bottom: 2px;
  padding: 0 4px;
}
.bcw_starter {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  padding: 10px 14px;
  font-size: 13px;
  color: #37474f;
  text-align: left;
  cursor: pointer;
  transition: all .15s ease;
  display: flex; align-items: center; gap: 8px;
  line-height: 1.4;
}
.bcw_starter:hover {
  background: #e8f5e9;
  border-color: #81c784;
  transform: translateY(-1px);
}
.bcw_starter_icon {
  flex-shrink: 0;
  font-size: 16px;
}

/* ========== 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; }

/* G1: ミニカレンダー (チャットバブル内に埋め込み、7日カードを横スクロール) */
.bcw_calendar {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 10px;
  margin: 6px 0;
}
.bcw_calendar_label {
  font-size: 11px; color: #78909c;
  margin-bottom: 6px;
}
.bcw_calendar_days {
  display: flex; gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.bcw_calendar_day {
  flex: 0 0 auto;
  min-width: 64px;
  background: #fff;
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  padding: 6px 8px;
  cursor: pointer;
  text-align: center;
  scroll-snap-align: start;
  transition: all .15s ease;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 12px;
}
.bcw_calendar_day:hover:not(:disabled) {
  border-color: #4caf50;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(46,125,50,.15);
}
.bcw_calendar_day_date { font-size: 14px; font-weight: 700; color: #263238; }
.bcw_calendar_day_wday { font-size: 10px; color: #78909c; }
.bcw_calendar_day_status {
  font-size: 11px; font-weight: 700;
  margin-top: 2px;
}
.bcw_calendar_day[data-status="available"] .bcw_calendar_day_status { color: #2e7d32; }
.bcw_calendar_day[data-status="few"]       .bcw_calendar_day_status { color: #ef6c00; }
.bcw_calendar_day[data-status="full"]      { opacity: .4; cursor: not-allowed; }
.bcw_calendar_day[data-status="full"]      .bcw_calendar_day_status { color: #b71c1c; }
.bcw_calendar_day_active {
  border-color: #2e7d32 !important;
  background: #e8f5e9 !important;
  font-weight: 700;
}
.bcw_calendar_day_wday_sun { color: #c62828; }
.bcw_calendar_day_wday_sat { color: #1565c0; }
/* 時間スロット (日付選択後) */
.bcw_calendar_slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #e0e0e0;
}
.bcw_calendar_slot {
  background: #fff;
  border: 1.5px solid #c8e6c9;
  border-radius: 8px;
  padding: 8px 4px;
  font-size: 13px; font-weight: 600;
  color: #2e7d32;
  cursor: pointer;
  text-align: center;
  transition: all .15s ease;
}
.bcw_calendar_slot:hover:not(:disabled) {
  background: #2e7d32;
  color: #fff;
}
.bcw_calendar_slot:disabled {
  opacity: .35;
  cursor: not-allowed;
  background: #fafafa;
  color: #b0bec5;
  border-color: #eceff1;
}

/* よくあるご質問 sticky zone — 初回 welcome 時のみ、入力欄直上に固定表示。
   ユーザーが何か発話したら .innerHTML = '' で撤去 (一度だけ表示)。
   :empty で display:none なので空時は完全に消える (入力欄が直下に密着)。 */
.bcw_starters_sticky_zone {
  background: #fff;
  border-top: 1px solid #f0f0f0;
  box-shadow: inset 0 6px 6px -6px rgba(0,0,0,0.10);
  padding: 8px 12px 4px;
  max-height: 240px;
  overflow-y: auto;
}
.bcw_starters_sticky_zone:empty { display: none; }
/* sticky zone 内の .bcw_starters はベース定義 (598 行) と差別化:
   外周マージンを詰めて入力欄との段差を整える */
.bcw_starters_sticky_zone .bcw_starters {
  margin: 0;
  padding: 0;
}
.bcw_starters_sticky_zone .bcw_starter {
  padding: 8px 12px;
}

/* C4: Quick Reply sticky zone — レガシー。現在は使用していない (インライン描画に移行)。
   :empty で常に display:none、後方互換のため DOM のみ残置。 */
.bcw_quick_sticky_zone {
  background: #fff;
  border-top: 1px solid #f0f0f0;
  padding: 6px 10px 4px;
  max-height: 96px;
  overflow-y: auto;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.bcw_quick_sticky_zone:empty { display: none; }
.bcw_quick_sticky_zone .bcw_hint_btn { font-size: 13px; padding: 6px 12px; }

/* インライン選択肢ボタン — 直前 AI バブルの直下に配置 (チャットボット UX 標準) */
.bcw_msg_buttons {
  padding: 0;
  margin: 0;
}
.bcw_inline_buttons {
  display: flex; flex-wrap: wrap; gap: 8px;
  /* AI アバター幅 (約 40px) + バブル左パディング 分インデントしてバブルと左端を揃える */
  margin: -4px 0 12px 44px;
}
.bcw_inline_buttons .bcw_hint_btn {
  font-size: 13px; padding: 8px 14px;
}
@media (max-width: 480px) {
  .bcw_inline_buttons { margin-left: 40px; }
}

/* ========== 入力エリア ========== */
.bcw_form {
  display: flex; gap: 8px;
  padding: 10px 12px;
  background: #fff;
  border-top: 1px solid #e0e0e0;
  align-items: flex-end;  /* textarea 高さ伸縮時に送信ボタンが下揃え */
}
/* C1: 音声入力 (マイク) ボタン */
.bcw_mic {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 50%; border: 1px solid #cfd8dc;
  background: #fff; color: #546e7a;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
  font-size: 18px;
}
.bcw_mic:hover:not(:disabled) {
  background: #f5f5f5;
  border-color: #4caf50;
  color: #2e7d32;
}
.bcw_mic:active:not(:disabled) { transform: scale(.95); }
.bcw_mic:disabled { opacity: .4; cursor: not-allowed; }
/* 録音中: 赤丸点滅 + ボタン色変更 */
.bcw_mic_recording {
  background: #c62828 !important;
  border-color: #c62828 !important;
  color: #fff !important;
  animation: bcw_mic_pulse 1s ease-in-out infinite;
}
@keyframes bcw_mic_pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(198, 40, 40, .4); }
  50%      { box-shadow: 0 0 0 8px rgba(198, 40, 40, 0); }
}
.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 {
  /* C2: タッチ目標 44×44px を確保 (WCAG 2.1 AA / iOS HIG) */
  width: 44px; height: 44px;
  min-width: 44px; min-height: 44px;
  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; }

/* ========== 「↓ 新しいメッセージ」バッジ (T1-00 / A0) ========== */
/* ユーザーが過去メッセージを読み返している間に新着が来た場合に表示。
   クリックで末尾までジャンプ。auto-scroll で強制的に飛ばさないための救済 UI。 */
.bcw_new_msg_badge {
  position: absolute;
  right: 16px;
  /* 入力フォーム (高さ ~60px) のすぐ上に浮かせる */
  bottom: 76px;
  z-index: 5;
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: #2e7d32;
  color: #fff;
  font-size: 13px; font-weight: 600;
  border: none; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(46, 125, 50, .35);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, background .15s ease;
  pointer-events: none;
}
.bcw_new_msg_badge:hover { background: #1b5e20; }
.bcw_new_msg_badge_visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.bcw_new_msg_badge[hidden] { display: none; }
.bcw_new_msg_arrow {
  display: inline-block;
  font-size: 15px; line-height: 1;
  animation: bcw_new_msg_bounce 1.4s ease-in-out infinite;
}
@keyframes bcw_new_msg_bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

/* ========== スマホ対応 (〜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%;
    /* C-2 (2026-05-27): スマホは没入感優先で完全全画面 (100dvh)
       fallback (古い iOS / Android) */
    height: 100vh; max-height: 100vh;
    /* dvh: iOS 15.4+ / Android Chrome 108+ — ソフトキーボード出現で
       dvh が自動的に縮むため、パネルがキーボードに隠れず追従する */
    height: 100dvh; max-height: 100dvh;
    /* 完全全画面なので角丸は不要 */
    border-radius: 0;
  }
  /* モバイルでは画面いっぱいに開くので maximize / minimize / resize は意味が無い → 隠す
     C-1 (2026-05-27): スマホでは × と _ の機能差が体感できないため _ も隠す */
  .bcw_maximize,
  .bcw_minimize,
  .bcw_resize_handle,
  .bcw_resize_handle_left { display: none !important; }
  /* maximize を解除 (誤発火対策) */
  .bcw_panel_maximized {
    right: 0 !important; left: 0 !important;
    bottom: 0 !important; top: auto !important;
    width: 100% !important; height: 100vh !important;
    max-width: 100% !important; max-height: 100vh !important;
    height: 100dvh !important; max-height: 100dvh !important;
    border-radius: 0 !important;
  }
  /* minimize は下部ヘッダーだけ残す (会話履歴は DOM 保持) */
  .bcw_panel_minimized {
    right: 0 !important; left: 0 !important;
    bottom: 0 !important; top: auto !important;
    width: 100% !important; min-width: 0 !important;
    height: auto !important; max-height: none !important;
    border-radius: 16px 16px 0 0 !important;
  }
  /* C-4 (2026-05-27): WCAG 2.1 AA タッチターゲット 44×44px を全ヘッダーボタンで確保
     min-width/min-height + box-sizing で確実に。padding はその範囲内 */
  .bcw_close,
  .bcw_help_btn,
  .bcw_lang {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .bcw_close { padding: 0 6px; }
  .bcw_help_btn { padding: 4px 8px; }
  .bcw_lang { padding: 4px 10px; }
  /* スマホでは buttbox を コンパクトに */
  .bcw_header { padding: 12px 14px; }
  .bcw_lang { padding: 5px 8px; font-size: 10px; }
}

/* ===== 扉×統合: 閉じる確認ダイアログ (会話中に × を押したとき) ===== */
.bcw_close_dialog {
  position: absolute; inset: 0; z-index: 30;
  background: rgba(0, 0, 0, .45);
  display: flex; align-items: center; justify-content: center;
  border-radius: inherit;
  animation: bcw_cd_fade .15s ease-out;
}
@keyframes bcw_cd_fade { from { opacity: 0; } to { opacity: 1; } }
.bcw_close_dialog_box {
  background: #fff; border-radius: 14px;
  padding: 20px 18px; margin: 16px;
  max-width: 320px; width: 100%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
  display: flex; flex-direction: column; gap: 10px;
}
.bcw_close_dialog_msg {
  margin: 0 0 6px; font-size: 15px; line-height: 1.5; color: #222;
}
.bcw_close_dialog_box button {
  padding: 12px 14px; border-radius: 10px; font-size: 15px; cursor: pointer;
  border: 1px solid transparent; text-align: center; line-height: 1.4;
}
.bcw_cd_keep   { background: #2e7d32; color: #fff; }   /* 既定 (残す) */
.bcw_cd_wipe   { background: #e53935; color: #fff; }   /* 破壊操作は赤で明示 */
.bcw_cd_cancel { background: transparent; color: #555; border-color: #ccc; }
.bcw_close_dialog_box button:hover { filter: brightness(.96); }
.bcw_cd_keep:focus-visible,
.bcw_cd_wipe:focus-visible,
.bcw_cd_cancel:focus-visible { outline: 2px solid #2e7d32; outline-offset: 2px; }

/* =========================================================
   C2: 音声通話ボタン + 通話中オーバーレイ (ハンズフリー)
   ========================================================= */
.bcw_call {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 50%; border: 1px solid #cfd8dc;
  background: #fff; color: #2e7d32;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.bcw_call:hover:not(:disabled) { background: #e8f5e9; border-color: #4caf50; }
.bcw_call:active:not(:disabled) { transform: scale(.95); }
.bcw_call_active {
  background: #2e7d32 !important; border-color: #2e7d32 !important; color: #fff !important;
  animation: bcw_call_pulse 1.4s ease-in-out infinite;
}
@keyframes bcw_call_pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46, 125, 50, .4); }
  50%      { box-shadow: 0 0 0 8px rgba(46, 125, 50, 0); }
}

/* 通話中オーバーレイ: パネル全面を覆う */
.bcw_call_overlay {
  position: absolute; inset: 0;
  z-index: 30;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #1b5e20, #2e7d32 55%, #388e3c);
  color: #fff;
  opacity: 0; transition: opacity .25s ease;
  border-radius: inherit;
}
.bcw_call_overlay_on { opacity: 1; }
/* 通話終了後は確実に消す。display:flex が UA の [hidden] を上書きしてしまい、
   透明なまま背後のパネル (×ボタン等) のクリックを奪う不具合を防ぐ。 */
.bcw_call_overlay[hidden] { display: none !important; }
.bcw_call_card {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; padding: 24px; text-align: center;
}
.bcw_call_avatar {
  width: 84px; height: 84px; border-radius: 50%;
  background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 44px;
  box-shadow: 0 0 0 0 rgba(255,255,255,.35);
}
.bcw_call_speaking .bcw_call_avatar { animation: bcw_call_ring 1.2s ease-out infinite; }
@keyframes bcw_call_ring {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.35); }
  100% { box-shadow: 0 0 0 22px rgba(255,255,255,0); }
}
.bcw_call_title { font-size: 16px; font-weight: 700; opacity: .95; }
.bcw_call_status {
  font-size: 14px; opacity: .9; min-height: 20px;
  max-width: 240px; line-height: 1.4;
}
/* 音声波形インジケータ */
.bcw_call_wave { display: flex; align-items: center; gap: 5px; height: 28px; }
.bcw_call_wave span {
  width: 5px; height: 8px; border-radius: 3px;
  background: rgba(255,255,255,.55);
}
.bcw_call_listening .bcw_call_wave span,
.bcw_call_speaking .bcw_call_wave span {
  animation: bcw_call_bar .9s ease-in-out infinite;
}
.bcw_call_wave span:nth-child(2) { animation-delay: .15s; }
.bcw_call_wave span:nth-child(3) { animation-delay: .30s; }
.bcw_call_wave span:nth-child(4) { animation-delay: .45s; }
.bcw_call_wave span:nth-child(5) { animation-delay: .60s; }
/* 考え中: バーが順番に明滅 + アバターがゆっくり脈動 (固まって見せない) */
.bcw_call_thinking .bcw_call_wave span {
  animation: bcw_call_think 1.1s ease-in-out infinite;
}
.bcw_call_thinking .bcw_call_avatar {
  animation: bcw_call_think_avatar 1.4s ease-in-out infinite;
}
@keyframes bcw_call_think {
  0%, 100% { opacity: .3;  transform: scaleY(.55); }
  50%      { opacity: 1;   transform: scaleY(1.15); }
}
@keyframes bcw_call_think_avatar {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255,255,255,.28); }
  50%      { transform: scale(1.05); box-shadow: 0 0 0 16px rgba(255,255,255,0); }
}
@keyframes bcw_call_bar {
  0%, 100% { height: 8px; }
  50%      { height: 24px; background: #fff; }
}
.bcw_call_end {
  margin-top: 6px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border: none; border-radius: 24px;
  background: #e53935; color: #fff; font-size: 15px; font-weight: 700;
  cursor: pointer; transition: filter .15s ease, transform .1s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.bcw_call_end:hover { filter: brightness(1.05); }
.bcw_call_end:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
  .bcw_call_active, .bcw_call_speaking .bcw_call_avatar,
  .bcw_call_listening .bcw_call_wave span, .bcw_call_speaking .bcw_call_wave span,
  .bcw_call_thinking .bcw_call_wave span, .bcw_call_thinking .bcw_call_avatar {
    animation: none !important;
  }
}

/* =========================================================
   C2: 右下 FAB を 📞WEB通話 + 📅予約 の横並びに
   ========================================================= */
.bcw_fab_group {
  position: fixed;
  right: 24px; bottom: 24px;
  display: flex; align-items: center; gap: 12px;
  z-index: 2147483640;
}
/* group 内では各 FAB は static (group が位置を持つ) */
.bcw_fab_group .bcw_fab { position: static; right: auto; bottom: auto; }
/* 📞WEB通話 FAB: 予約と並ぶピル。通話を促す teal でひと目で区別 */
.bcw_fab_call {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 64px; height: 64px;
  padding: 0 18px 0 16px;
  background: #00897b; 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_call:hover {
  background: #00695c; transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.25);
}
.bcw_fab_call:active { transform: translateY(0); }
/* 狭い画面ではラベルを省いてアイコンのみ (2 ボタンが収まるように) */
@media (max-width: 420px) {
  .bcw_fab_call { min-width: 0; width: 56px; height: 56px; padding: 0; justify-content: center; }
  .bcw_fab_call .bcw_fab_label { display: none; }
  .bcw_fab_group .bcw_fab { min-width: 0; height: 56px; padding: 0 16px; }
}

/* 通話中のウィンドウ最大化 (最大 461 x 905、画面が小さければ画面いっぱい) */
.bcw_panel_call {
  right: 12px !important; bottom: 12px !important;
  top: auto !important; left: auto !important;
  width: min(100vw - 24px, 461px) !important;
  height: min(100vh - 24px, 905px) !important;
  max-width: none !important; max-height: none !important;
}
.bcw_panel_call .bcw_resize_handle,
.bcw_panel_call .bcw_resize_handle_left { display: none; }

/* ============================================================
   ROBOT-525: 感情の旅パネル (📊)
   ============================================================ */
.bcw_emotion_btn {
  background: transparent; border: none; color: #fff;
  font-size: 15px; line-height: 1; cursor: pointer; padding: 4px 8px;
  opacity: .85; border-radius: 4px;
}
.bcw_emotion_btn:hover { opacity: 1; background: rgba(255,255,255,.15); }
.bcw_emotion_btn[aria-pressed="true"] { background: rgba(255,255,255,.22); opacity: 1; }
/* 会話が進んで軌跡が育つと小さなドットで気づかせる */
.bcw_emotion_btn.bcw_emotion_has_data { position: relative; }
.bcw_emotion_btn.bcw_emotion_has_data::after {
  content: ''; position: absolute; top: 3px; right: 4px;
  width: 6px; height: 6px; border-radius: 50%; background: #ffd54f;
}

/* パネル本体: ヘッダー直下から下端まで会話領域を覆う (ヘッダー高さに依存しない flex 方式)。
   .bcw_emotion_open で会話系要素を隠し、この panel を flex:1 で満たす。 */
.bcw_emotion_panel {
  flex: 1 1 auto; min-height: 0; position: relative;
  background: #f4f7f3;
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px 16px;
  animation: bcw_panel_slide_in 180ms ease-out;
}
.bcw_emotion_panel[hidden] { display: none; }
/* 感情タブを開いている間は会話系 UI を隠す (タブ切替の見た目) */
.bcw_panel.bcw_emotion_open .bcw_messages,
.bcw_panel.bcw_emotion_open .bcw_new_msg_badge,
.bcw_panel.bcw_emotion_open .bcw_starters_sticky_zone,
.bcw_panel.bcw_emotion_open .bcw_quick_sticky_zone,
.bcw_panel.bcw_emotion_open .bcw_form,
.bcw_panel.bcw_emotion_open .bcw_disclaimer,
.bcw_panel.bcw_emotion_open .bcw_progress,
.bcw_panel.bcw_emotion_open .bcw_privacy { display: none !important; }
.bcw_emotion_head { display: flex; align-items: center; gap: 8px; }
.bcw_emotion_title { font-weight: 700; font-size: 15px; color: #18231e; }
.bcw_emotion_ref {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: #d99a3f; color: #3a2a10; letter-spacing: .02em;
}
.bcw_emotion_close {
  margin-left: auto; background: transparent; border: none;
  font-size: 20px; line-height: 1; color: #5d6d64; cursor: pointer;
  padding: 2px 8px; border-radius: 6px;
}
.bcw_emotion_close:hover { background: #e8eee7; }
.bcw_emotion_canvas {
  width: 100%; flex: 1 1 auto; min-height: 200px;
  background: #fff; border: 1px solid #dde5de; border-radius: 12px;
}
.bcw_emotion_readout {
  display: flex; align-items: center; gap: 16px;
  background: #fff; border: 1px solid #dde5de; border-radius: 12px; padding: 12px 14px;
}
.bcw_emotion_index { display: flex; align-items: baseline; gap: 3px; }
.bcw_emotion_index_val {
  font-size: 30px; font-weight: 700; color: #10664c;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.bcw_emotion_index small { font-size: 13px; color: #5d6d64; }
.bcw_emotion_index_lab {
  font-size: 11px; color: #5d6d64; letter-spacing: .06em; margin-top: 2px;
}
.bcw_emotion_gauge { display: flex; flex-direction: column; align-items: flex-start; }
.bcw_emotion_delta { display: flex; align-items: center; gap: 8px; font-size: 12px; flex-wrap: wrap; }
.bcw_emotion_ba_start, .bcw_emotion_ba_end {
  padding: 4px 10px; border-radius: 999px; font-size: 11.5px;
}
.bcw_emotion_ba_start { background: #4f86c6; color: #fff; }
.bcw_emotion_ba_end { background: #d99a3f; color: #3a2a10; }
.bcw_emotion_arrow { color: #5d6d64; }
.bcw_emotion_note { font-size: 11.5px; color: #5d6d64; line-height: 1.6; }
.bcw_emotion_empty {
  position: absolute; left: 0; right: 0; top: 120px;
  text-align: center; font-size: 13px; color: #73726c; padding: 0 24px;
}