/* ============================================================
   LinkWork AI チャットウィジェット
   他セクションの rem ベース（1rem = 画面幅1280pxで10px）に合わせて統一
   ============================================================ */

/* ── チャットセクション全体 ── */
.home_ai_chat {
  background: linear-gradient(160deg, #1a2e1a 0%, #0f1f0f 100%);
  padding: 4rem 0 5rem; /* 上下の余白をコンパクトに */
  position: relative;
  overflow: hidden;
}

.home_ai_chat::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 80% 50%, rgba(74, 124, 74, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

/* 背景ウォーターマーク（他セクションと同じ手法） */
.home_ai_chat::after {
  content: "AI";
  position: absolute;
  bottom: -2rem;
  right: -2rem;
  font-family: var(--font-en);
  font-size: 22rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.03);
  white-space: nowrap;
  pointer-events: none;
  line-height: 1;
}

.home_ai_chat_inner {
  width: min(118rem, calc(100% - 4rem)); /* 他の home_section と同じ幅 */
  margin: 0 auto;
}

/* ── セクションヘッダ（他セクションの .home_section_head に合わせる） ── */
.home_ai_chat_head {
  text-align: center;
  margin-bottom: 2.5rem; /* コンパクトに */
}

/* キッカーは .home_kicker が直接当たるので上書きだけ */
.home_ai_chat_head .home_kicker {
  color: rgba(255, 255, 255, 0.7);
  border-left-color: rgba(216, 111, 69, 0.7);
  display: inline-block; /* border-left が見えるよう block に */
  font-size: 1.3rem;
}

.home_ai_chat_head h2 {
  font-family: var(--font-title);
  font-size: 3.6rem; /* 少し小さく、画面に収まる */
  font-weight: 600;
  color: #fff;
  margin: 1.2rem 0 1.6rem;
  line-height: 1.3;
  letter-spacing: 0;
}

.home_ai_chat_head p {
  color: rgba(255, 255, 255, 0.65);
  font-size: 1.4rem;
  line-height: 1.9;
  max-width: 60rem;
  margin: 0 auto;
}

/* ── チャットウィンドウ ── */
.chat_window {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2rem;
  /* overflow: hidden を消すことでstickyが効くようにする */
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
}

/* ── チャットヘッダバー ── */
.chat_bar {
  background: linear-gradient(90deg, #2d5a2d, #3d7a3d);
  padding: 2rem 3rem;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  position: sticky;
  top: 0;
  z-index: 100;
  border-top-left-radius: 2rem; /* 親のoverflow:hiddenを外したので丸みを付与 */
  border-top-right-radius: 2rem;
}

.chat_bar_avatar {
  width: 3.2rem;
  height: 3.2rem;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.chat_bar_info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.chat_bar_name {
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
}

.chat_bar_status {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8125rem;
}

.chat_bar_status::before {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  background: #7fff7f;
  border-radius: 50%;
  animation: pulse_dot 2s infinite;
}

@keyframes pulse_dot {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* ── メッセージエリア ── */
.chat_messages {
  /* 入力欄が画面外にはみ出ないように、余裕を持ってマイナス幅をとる */
  height: clamp(30rem, calc(100vh - 38rem), 75rem);
  overflow-y: auto;
  padding: 2.5rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  scroll-behavior: smooth;
}

.chat_messages::-webkit-scrollbar {
  width: 4px;
}
.chat_messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

/* ── メッセージバブル ── */
.chat_msg {
  display: flex;
  gap: 1.2rem;
  animation: msg_in 0.3s ease forwards;
  opacity: 0;
  transform: translateY(8px);
}

@keyframes msg_in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat_msg.ai {
  align-items: flex-start;
}

.chat_msg_icon {
  width: 4rem;
  height: 4rem;
  background: linear-gradient(135deg, #2d5a2d, #4a8a4a);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
  margin-top: 0.4rem;
}

.chat_bubble {
  max-width: 88%; /* 広く */
  padding: 1rem 1.4rem;
  border-radius: 1.8rem;
  font-size: 1rem;
  line-height: 1.75;
  word-break: break-word;
}

/* ユーザーバブルは改行をそのまま表示 */
.chat_msg.user .chat_bubble {
  white-space: pre-wrap;
}

/* AIバブル内のマークダウン要素 */
.chat_msg.ai .chat_bubble p {
  margin: 0 0 0.6em;
}
.chat_msg.ai .chat_bubble p:last-child {
  margin-bottom: 0;
}
.chat_msg.ai .chat_bubble ul,
.chat_msg.ai .chat_bubble ol {
  margin: 0.4em 0 0.6em 1.8em;
  padding: 0;
}
.chat_msg.ai .chat_bubble li {
  margin-bottom: 0.35em;
}
.chat_msg.ai .chat_bubble strong {
  font-weight: 700;
  color: #fff;
}

.chat_bubble_img {
  max-width: 32rem; /* 写真をほどほどのサイズに制限 */
  width: 100%;
  border-radius: 1.2rem;
  margin-top: 1.2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: block;
}

.chat_sources {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 1.4rem;
  padding-top: 1.2rem;
}

.chat_sources_heading {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.75rem;
  font-weight: 700;
}

.chat_source_link {
  color: #a5d6a7;
  display: block;
  font-size: 0.8125rem;
  line-height: 1.6;
  text-decoration: underline;
  text-underline-offset: 0.2rem;
}

.chat_source_link:hover {
  color: #d8f5d8;
}

.chat_msg.ai .chat_bubble {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);
  border-top-left-radius: 4px;
}

.chat_msg.user {
  flex-direction: row-reverse;
}

.chat_msg.user .chat_bubble {
  background: linear-gradient(135deg, #3a7a3a, #4d9a4d);
  color: #fff;
  border-top-right-radius: 4px;
  box-shadow: 0 4px 16px rgba(61, 122, 61, 0.35);
}

/* タイピングアニメーション */
.chat_typing {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 1.4rem 2rem;
}

.chat_typing span {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  animation: typing_bounce 1.2s infinite;
}

.chat_typing span:nth-child(2) {
  animation-delay: 0.2s;
}
.chat_typing span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing_bounce {
  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  40% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

/* ── サジェスト（提案）チップ ── */
.chat_suggestions {
  display: flex;
  gap: 1rem;
  padding: 0 2.4rem 1.6rem;
  overflow-x: auto;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.2);
}

.chat_suggestions::-webkit-scrollbar {
  height: 0;
}

.chat_suggest_btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5rem;
  padding: 0.5rem 1rem;
  color: #fff;
  font-size: 0.875rem;
  font-family: var(--font-ja);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.chat_suggest_btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #7fff7f;
  transform: translateY(-2px);
}

.chat_suggest_btn:active {
  transform: translateY(0);
}

/* ── 入力エリア ── */
.chat_input_area {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2rem 2.4rem;
  display: flex;
  gap: 1.4rem;
  align-items: flex-end;
  background: rgba(0, 0, 0, 0.2);
}

.chat_input {
  flex: 1;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  color: #fff;
  font-size: 1rem;
  font-family: var(--font-ja);
  resize: none;
  min-height: 2.75rem;
  max-height: 10rem;
  outline: none;
  transition:
    border-color 0.2s,
    background 0.2s;
  line-height: 1.6;
}

.chat_input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.chat_input:focus {
  border-color: rgba(100, 180, 100, 0.6);
  background: rgba(255, 255, 255, 0.1);
}

.chat_send_btn {
  width: 5.4rem;
  height: 5.4rem;
  background: linear-gradient(135deg, #3a7a3a, #4d9a4d);
  border: none;
  border-radius: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.15s,
    opacity 0.15s,
    box-shadow 0.15s;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(61, 122, 61, 0.4);
}

.chat_send_btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(61, 122, 61, 0.55);
}

.chat_send_btn:active:not(:disabled) {
  transform: scale(0.95);
}

.chat_send_btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.chat_send_btn svg {
  width: 2rem;
  height: 2rem;
  fill: #fff;
}

/* ── 注意書き ── */
.chat_disclaimer {
  text-align: center;
  margin-top: 2rem;
  max-width: 68rem;
  margin-left: auto;
  margin-right: auto;
  color: rgba(255, 255, 255, 0.35);
  font-size: 1.2rem;
  line-height: 1.9;
}

/* ── レスポンシブ（スマホ専用） ── */
@media (max-width: 600px) {
  /* ヘッダーとチャット以外をすべて非表示 */
  .header,
  .home_hero,
  .home_about,
  .home_bridge,
  .home_services_wrap,
  .service_bridge,
  .home_work,
  .home_flow,
  .home_faq,
  .home_contact,
  .home_footer {
    display: none;
  }

  /* ページ全体スクロールを止める（チャットが全画面を担う） */
  body {
    overflow: hidden;
  }

  /* チャットセクション：画面全体を占有 */
  .home_ai_chat {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* dvh はキーボードが開いたとき縮む → 入力欄がキーボードに隠れない */
    height: 100vh;
    height: 100dvh;
    z-index: 50;
    padding: 0;
    min-height: unset;
    overflow: hidden;
  }

  .home_ai_chat::before,
  .home_ai_chat::after {
    display: none;
  }

  .home_ai_chat_head {
    display: none;
  }

  .home_ai_chat_inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  /* flex で縦積み。メッセージ欄(flex:1)が残り全部を使う */
  .chat_window {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: none;
    overflow: hidden;
  }

  .chat_bar {
    position: static;
    flex-shrink: 0;
    /* ノッチ・Dynamic Island 対応：上に safe area を追加 */
    padding: calc(env(safe-area-inset-top) + 1rem) 1.4rem 1rem;
    border-radius: 0;
    min-height: 5.6rem;
  }

  .chat_bar_avatar {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
  }

  .chat_bar_info {
    gap: 0.8rem;
    flex-wrap: nowrap;
    min-width: 0;
  }

  .chat_bar_name {
    font-size: 0.9375rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .chat_bar_status {
    font-size: 0.75rem;
    white-space: nowrap;
  }

  /* flex:1 + min-height:0 でスクロール可能な領域を作る定石 */
  .chat_messages {
    flex: 1;
    min-height: 0;
    height: auto;
    padding: 1.2rem 1rem;
    gap: 1rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .chat_msg_icon {
    width: 2.8rem;
    height: 2.8rem;
    font-size: 1rem;
    margin-top: 0.2rem;
  }

  .chat_bubble {
    max-width: calc(100vw - 5.6rem);
    font-size: 1rem;
    line-height: 1.65;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
  }

  .chat_msg.user .chat_bubble {
    max-width: calc(100vw - 3.2rem);
  }

  .chat_bubble_img {
    max-width: 100%;
    border-radius: 0.8rem;
  }

  .chat_sources {
    margin-top: 1rem;
    padding-top: 0.9rem;
  }

  .chat_source_link {
    font-size: 0.75rem;
  }

  .chat_suggestions {
    flex-shrink: 0;
    padding: 0.8rem 1rem;
    background: rgba(0, 0, 0, 0.24);
    gap: 0.8rem;
    min-height: 4.4rem;
  }

  .chat_suggest_btn {
    font-size: 0.875rem;
    padding: 0.45rem 0.875rem;
    border-radius: 10rem;
  }

  .chat_input_area {
    flex-shrink: 0;
    padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom));
    gap: 0.8rem;
    background: rgba(0, 0, 0, 0.34);
  }

  /* 16px(=1rem) 以上で iOS の自動ズームが発動しない */
  .chat_input {
    font-size: 1rem;
    padding: 0.625rem 0.875rem;
    min-height: 2.75rem;
    max-height: 8rem;
    border-radius: 0.75rem;
  }

  .chat_send_btn {
    width: 4.2rem;
    height: 4.2rem;
    flex-shrink: 0;
    border-radius: 1rem;
  }

  .chat_send_btn:hover:not(:disabled) {
    transform: none;
  }

  .chat_disclaimer {
    display: none;
  }
}

/* ============================================================
   chat.html 専用（全画面チャットページ）クリーム系ライトテーマ
   body.chat_page に適用。PC・スマホ共通
   ============================================================ */

/* ─── CSS カスタムプロパティ（会社ごとにここだけ変更すれば OK） ─── */
.chat_page {
  --chat-bg: #f8f7f4;
  --chat-bar-bg: #ffffff;
  --chat-border: #e5e2dc;
  --chat-text: #1a1a1a;
  --chat-text-muted: #706d68;
  --chat-ai-bubble: #efede8;
  --chat-user-bubble: #1a1a1a;
  --chat-avatar-bg: #eae7e2;
  --chat-accent: #1a1a1a;
  --chat-accent-hover: #3a3a3c;

  overflow: hidden;
  background: var(--chat-bg);
}

.chat_page .home_ai_chat {
  position: fixed;
  inset: 0;
  padding: 0;
  min-height: unset;
  overflow: hidden;
  background: var(--chat-bg);
}

.chat_page .home_ai_chat::before,
.chat_page .home_ai_chat::after {
  display: none;
}

.chat_page .home_ai_chat_head {
  display: none;
}

.chat_page .home_ai_chat_inner {
  width: 100%;
  height: 100%;
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.chat_page .chat_window {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  border: none;
  box-shadow: none;
  overflow: hidden;
}

/* ─── フローティング戻るボタン（スクロール時に出現） ─── */
.chat_back_float {
  display: none;
}

.chat_page .chat_back_float {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 0.6rem);
  left: 0.8rem;
  width: 2.6rem;
  height: 2.6rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--chat-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.chat_page .chat_back_float svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: var(--chat-text);
}

.chat_page .chat_back_float.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ─── ヘッダーバー ─── */
.chat_page .chat_bar {
  position: static;
  flex-shrink: 0;
  background: var(--chat-bar-bg);
  border-bottom: 1px solid var(--chat-border);
  padding: calc(env(safe-area-inset-top) + 0.6rem) 1.2rem 0.6rem;
  border-radius: 0;
  gap: 1rem;
  will-change: transform, opacity;
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s ease,
    margin-top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 0;
}

/* スクロール中：transform のみで滑らかに退場 */
.chat_page .chat_bar.bar_mini {
  transform: translateY(-120%);
  opacity: 0;
  pointer-events: none;
  margin-top: calc(-1 * (env(safe-area-inset-top) + 4.5rem));
}

.chat_page .chat_bar_avatar {
  background: var(--chat-avatar-bg);
}

.chat_page .chat_bar_info {
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
}

.chat_page .chat_bar_name {
  color: var(--chat-text);
  font-size: 0.9375rem;
  font-weight: 600;
}

.chat_page .chat_bar_status {
  color: var(--chat-text-muted);
  font-size: 0.8125rem;
}

.chat_page .chat_bar_status::before {
  background: #34c759;
}

/* ─── 戻るボタン ─── */
.chat_bar_back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  transition: background 0.2s;
}

.chat_bar_back:hover {
  background: rgba(255, 255, 255, 0.2);
}

.chat_bar_back svg {
  width: 1.8rem;
  height: 1.8rem;
  fill: #fff;
}

.chat_page .chat_bar_back {
  background: #edebe6;
}

.chat_page .chat_bar_back:hover {
  background: #e2ded8;
}

.chat_page .chat_bar_back svg {
  fill: var(--chat-text);
}

/* ─── ウェルカム画面 ─── */
.chat_welcome {
  display: none;
}

.chat_page .chat_welcome {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
  gap: 1.2rem;
  animation: welcome_in 0.5s ease forwards;
}

.chat_page .chat_welcome.hidden {
  display: none;
}

@keyframes welcome_in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat_page .chat_welcome_icon {
  width: 5.6rem;
  height: 5.6rem;
  background: var(--chat-avatar-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  margin-bottom: 0.4rem;
}

.chat_page .chat_welcome_title {
  font-family: var(--font-title);
  font-size: 2rem;
  font-weight: 600;
  color: var(--chat-text);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.chat_page .chat_welcome_sub {
  font-size: 0.9375rem;
  color: var(--chat-text-muted);
  line-height: 1.7;
  max-width: 28rem;
}

/* ─── メッセージエリア ─── */
.chat_page .chat_messages {
  display: none;
  min-height: 0;
  height: auto;
  overscroll-behavior: contain;
  background: var(--chat-bg);
}

.chat_page .chat_messages.active {
  display: flex;
  flex: 1;
  /* メッセージの下に永続的なスクロール余白を確保（最後のメッセージを上部までスクロール可能にする） */
  padding-bottom: 50vh;
}

/* スクロールバー非表示 */
.chat_page .chat_messages {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.chat_page .chat_messages::-webkit-scrollbar {
  width: 0;
}

/* ─── アイコン ─── */
.chat_page .chat_msg_icon {
  width: 3.2rem;
  height: 3.2rem;
  font-size: 1.2rem;
  background: var(--chat-avatar-bg);
}

/* ─── メッセージ間の隙間を詰める ─── */
.chat_page .chat_messages.active {
  gap: 1.2rem;
}

/* AIの返答のあと、次の人間メッセージ前に区切り余白 */
.chat_page .chat_msg.ai + .chat_msg.user {
  margin-top: 1.6rem;
}

/* ─── バブル共通 ─── */
.chat_page .chat_bubble {
  font-size: 0.9375rem;
  padding: 0.75rem 1.1rem;
  border-radius: 1.4rem;
  line-height: 1.65;
}

/* AI は広く */
.chat_page .chat_msg.ai .chat_bubble {
  max-width: 88%;
}

/* ユーザーはChatGPT風のダーク丸バブル */
.chat_page .chat_msg.user .chat_bubble {
  max-width: 65%;
  background: #2e2e2e;
  color: #ffffff;
  border-radius: 1.4rem;
  border-top-right-radius: 4px;
  box-shadow: none;
  padding: 0.75rem 1.1rem;
}

/* ─── AI バブルなし（Claude/ChatGPT方式） ─── */
.chat_page .chat_msg.ai .chat_bubble {
  background: transparent;
  border: none;
  color: var(--chat-text);
  border-radius: 0;
  padding: 0.1rem 0;
  max-width: 92%;
}

.chat_page .chat_msg.ai .chat_bubble strong {
  color: var(--chat-text);
}

/* 空行の<br>を非表示（<p>の余白で十分） */
.chat_page .chat_msg.ai .chat_bubble br {
  display: none;
}

.chat_page .chat_msg.ai .chat_bubble p {
  margin: 0 0 0.45em;
}

.chat_page .chat_msg.ai .chat_bubble p:last-child {
  margin-bottom: 0;
}

/* ─── タイピングドット ─── */
.chat_page .chat_typing {
  padding: 0.4rem 0.5rem;
  gap: 5px;
}

.chat_page .chat_typing span {
  background: rgba(0, 0, 0, 0.25);
}

/* ─── 画像（小さめに） ─── */
.chat_page .chat_bubble_img {
  max-width: 20rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ─── ソース参照 ─── */
.chat_page .chat_sources {
  border-top: 1px solid var(--chat-border);
}

.chat_page .chat_sources_heading {
  color: var(--chat-text-muted);
}

.chat_page .chat_source_link {
  color: #5c6bc0;
}

.chat_page .chat_source_link:hover {
  color: #3949ab;
}

/* ─── サジェストチップ ─── */
.chat_page .chat_suggestions {
  flex-shrink: 0;
  background: var(--chat-bg);
  border-top: 1px solid var(--chat-border);
  padding: 0.75rem 1.6rem;
}

.chat_page .chat_suggest_btn {
  background: #ffffff;
  border: 1px solid var(--chat-border);
  color: var(--chat-text);
  font-size: 0.875rem;
}

.chat_page .chat_suggest_btn:hover {
  background: #f0ede8;
  border-color: #c8c5c0;
  color: var(--chat-text);
  transform: translateY(-1px);
}

/* ─── 入力エリア ─── */
.chat_page .chat_input_area {
  flex-shrink: 0;
  background: var(--chat-bg);
  border-top: 1px solid var(--chat-border);
  padding: 0.875rem 1.4rem calc(0.875rem + env(safe-area-inset-bottom));
  gap: 0.875rem;
}

.chat_page .chat_input {
  background: #ffffff;
  border: 1px solid var(--chat-border);
  color: var(--chat-text);
  border-radius: 1.5rem;
  padding: 0.875rem 1.25rem;
  min-height: 3rem;
}

.chat_page .chat_input::placeholder {
  color: #b0ada8;
}

.chat_page .chat_input:focus {
  border-color: #b0ada8;
  background: #ffffff;
}

/* ─── 送信ボタン ─── */
.chat_page .chat_send_btn {
  width: 3rem;
  height: 3rem;
  background: var(--chat-accent);
  box-shadow: none;
  border-radius: 1rem;
}

.chat_page .chat_send_btn:hover:not(:disabled) {
  background: var(--chat-accent-hover);
  transform: none;
  box-shadow: none;
}

.chat_page .chat_disclaimer {
  display: none;
}

/* ─── 設定ボタン ─── */
.chat_settings_btn {
  display: none;
}

.chat_page .chat_settings_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
  transition: background 0.15s;
}

.chat_page .chat_settings_btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

.chat_page .chat_settings_btn svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: var(--chat-text-muted);
}

/* ─── 設定パネル ─── */
.chat_settings_panel {
  display: none;
}

.chat_page .chat_settings_panel {
  position: fixed;
  top: 3.6rem;
  right: 1rem;
  background: var(--chat-bar-bg);
  border: 1px solid var(--chat-border);
  border-radius: 1rem;
  padding: 0.4rem 0;
  min-width: 15rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 300;
}

.chat_page .chat_settings_panel.open {
  display: block;
}

.chat_setting_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1.2rem;
  font-size: 0.9rem;
  color: var(--chat-text);
  gap: 2rem;
}

/* ─── トグルスイッチ ─── */
.chat_toggle {
  position: relative;
  display: inline-block;
  width: 3rem;
  height: 1.75rem;
  cursor: pointer;
  flex-shrink: 0;
}

.chat_toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.chat_toggle_track {
  position: absolute;
  inset: 0;
  background: #d1d1d6;
  border-radius: 10rem;
  transition: background 0.2s;
}

.chat_toggle_track::after {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.35rem;
  height: 1.35rem;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.chat_toggle input:checked + .chat_toggle_track {
  background: #34c759;
}

.chat_toggle input:checked + .chat_toggle_track::after {
  transform: translateY(-50%) translateX(1.25rem);
}

/* ─── ダークモード ─── */
.chat_page.dark {
  --chat-bg: #1c1c1e;
  --chat-bar-bg: #2c2c2e;
  --chat-border: #3a3a3c;
  --chat-text: #f2f2f7;
  --chat-text-muted: #8e8e93;
  --chat-ai-bubble: #2c2c2e;
  --chat-user-bubble: #3a3a3c;
  --chat-avatar-bg: #3a3a3c;
  --chat-accent: #48484a;
  --chat-accent-hover: #5a5a5c;
}

.chat_page.dark .chat_input {
  background: #3a3a3c;
  border-color: #48484a;
  color: #f2f2f7;
}

.chat_page.dark .chat_input:focus {
  background: #3a3a3c;
  border-color: #636366;
}

.chat_page.dark .chat_input::placeholder {
  color: #636366;
}

.chat_page.dark .chat_suggest_btn {
  background: #2c2c2e;
  border-color: #3a3a3c;
}

.chat_page.dark .chat_suggest_btn:hover {
  background: #3a3a3c;
  border-color: #48484a;
}

.chat_page.dark .chat_msg.user .chat_bubble {
  background: #48484a;
}

.chat_page.dark .chat_bar_back {
  background: #3a3a3c;
}

.chat_page.dark .chat_bar_back:hover {
  background: #48484a;
}

.chat_page.dark .chat_settings_btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.chat_page.dark .chat_back_float {
  background: rgba(44, 44, 46, 0.92);
  border-color: #3a3a3c;
}

/* ─── 画像非表示 ─── */
.chat_page.no_images .chat_bubble_img {
  display: none;
}

/* ─── モバイル補足（ウェルカム画面のサイズ調整） ─── */
@media (max-width: 600px) {
  .chat_page .chat_welcome {
    padding: 2rem 1.5rem;
    gap: 0.875rem;
  }

  .chat_page .chat_welcome_icon {
    width: 4.4rem;
    height: 4.4rem;
    font-size: 1.75rem;
  }

  .chat_page .chat_welcome_title {
    font-size: 1.5rem;
  }

  .chat_page .chat_welcome_sub {
    font-size: 0.875rem;
  }

  .chat_page .chat_suggestions {
    background: var(--chat-bg);
  }

  .chat_page .chat_input_area {
    background: var(--chat-bg);
  }
}