/* ============================================================
   介護相談 メインコンテンツ専用スタイル（チャットUI）
   共通UI（ヘッダー/フッター/ハンバーガー/バナー/contact_box/tel_popup）は common.css。
   このファイルは common.css の後に読み込む（var(--c-*) などトークンを参照）。
   ブレークポイント規約：スマホ ~599 / タブレット 600~1023 / PC 1024~
   ============================================================ */

/* --------------------------------------------------------
   チャットカード（白い箱：メッセージ＋入力欄＋クリア）
   固定高のアプリ型。中でメッセージ領域だけがスクロールする。
   高さはヘッダートークン基準で算出（被り・はみ出し防止）。
   ピンク帯（旧 .bottom-page-header）は廃止し、その分チャットを縦に拡大。
   -------------------------------------------------------- */
.chat-interface {
    margin-top: 0;
}

/* ヘッダー（固定タイトル帯）とチャットカードの間隔。
   .chat-interface への margin-top は親を突き抜けて折りたたまれる（margin collapse）ため、
   折りたたまれない padding-top をセクション側に付けてヘッダー直下の余白を確保する。
   ピンク帯（旧 .bottom-page-header）廃止ぶんをここで補う。 */
.ai-consultation-section.bottom-page-wrap {
    padding-top: 1.5rem;
}

.chat-area-wrap {
    background-color: transparent; 
    overflow: hidden;
    height: calc(100vh - var(--header-h) - 160px);
    min-height: 360px;
    display: flex;
    flex-direction: column;
}

/* メッセージ表示領域（唯一のスクロール領域） */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

/* メッセージ1件：AI＝ロボアイコン＋吹き出し（左）、ユーザー＝吹き出しのみ（右） */
.chat-message {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    animation: fadeInUp 0.3s ease-out;
}

.chat-message.ai-message,
.chat-message.bot-message,
.chat-message.loading {
    justify-content: flex-start;   /* AI＝左 */
}

.chat-message.user-message {
    justify-content: flex-end;     /* ユーザー＝右（アイコン無し） */
}

/* AIロボアイコン（円形） */
.message-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background-color: var(--c-primary);
}

.message-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* AI発話の縦カラム：吹き出し(.message-content)＋コピーボタンを縦に積む。
   幅の上限はこのカラムで持ち、吹き出し自体はカラム幅いっぱいに広がる。 */
.ai-col {
    display: flex;
    flex-direction: column;
    max-width: 80%;
    min-width: 0;
}

/* 吹き出し本体 */
.message-content {
    max-width: 80%;
    padding: 0.9rem 1.1rem;
    border-radius: 16px;
    font-size: 1rem;
    line-height: 1.7;
    word-wrap: break-word;
}

/* AI吹き出しは ai-col の幅いっぱいに（上限は ai-col 側で管理） */
.ai-col .message-content {
    max-width: 100%;
}

/* AI回答＝白背景（実回答は .ai-col で包まれる）。角は全て同じ丸 */
.ai-message .message-content,
.bot-message .message-content {
    background-color: var(--c-chat-ai-bg);
    border: 1px solid var(--c-chat-ai-border);
    color: var(--c-text);
}

/* 初期挨拶＝うす黄色で冒頭だけ目立たせる。
   初期挨拶の吹き出しは .ai-col の外（.ai-message 直下）に置かれ、実回答は .ai-col 内に置かれる
   ため、この構造差で塗り分ける（HTML/JS 変更不要）。 */
.ai-message > .message-content {
    background-color: var(--c-chat-greeting-bg);
    border-color: var(--c-chat-greeting-border);
}

/* ユーザー質問＝薄グレー（ケアプラン作成と同トーン）。枠線も淡く */
.user-message .message-content {
    background-color: var(--c-chat-user-bg);
    border: 1px solid var(--c-chat-user-border);
    color: var(--c-text);
}

/* 挨拶吹き出し（初期メッセージ）の可読性 */
.greeting-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--c-text);
    line-height: 1.5;
}

.greeting-body {
    margin-bottom: 1.5rem;
    line-height: 1.7;
    color: var(--c-text);
}

/* 入力例リスト（タップで入力欄へ転記） */
.example-label {
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--c-text);
}

.example-hint {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--c-text);
    display: inline-block;     /* ラベルとヒントが割れても、ヒント内部では改行させない */
    white-space: nowrap;
}

.example-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.example-list li {
    padding: 0.7rem 1rem;
    margin-bottom: 0.5rem;
    background-color: #ffffff;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.95rem;
    line-height: 1.4;
}

.example-list li:hover {
    background-color: var(--c-chat-greeting-bg);
    border-color: var(--c-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.example-list li::before {
    content: "💬 ";
}

/* AI回答内の見出し・太字をテーマカラー強調 */
.ai-message .message-content .heading {
    font-weight: 700;
    color: var(--c-primary);
    font-size: 1.05em;
}

.ai-message .message-content b {
    color: var(--c-primary);
    font-weight: 700;
}

/* テーマタグ（[[TAG]]→ 薄ピンク背景＋ピンク太字ラベル）。
   まとめ枠（.point-card.has-tag）の見出しとして枠の上部に表示する。 */
.topic-tag {
    display: inline-block;
    background-color: var(--c-accent-pink);
    color: var(--c-primary);
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1.3;
    padding: 0.25rem 0.7rem;
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

/* タグ単独（まとめ枠が続かない場合）は行頭ラベルとして下に余白 */
.topic-tag--solo {
    margin-bottom: 0.4rem;
}

/* 番号付き手順（1. 2. 3. → 番号バッジ付きの行）。各行はブロック表示。
   block 化により行送りされるので、直後の <br> は余分。非表示にして二重改行を防ぐ。 */
.step-line {
    display: block;
    margin: 0.2rem 0;
    padding-left: 0.2rem;
}

.step-line + br {
    display: none;
}

.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.5rem;
    border-radius: 50%;
    background-color: transparent;
    border: 1.5px solid var(--c-text);
    color: var(--c-text);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
    vertical-align: middle;
}

/* AI回答内のポイント（formatAIResponse が [[POINT]] を <div class="point-card"> に変換）
   吹き出しと同じ背景のまま、左の色帯だけで区切る（枠の入れ子をなくしスッキリ）。
   別の見せ方に変えたいときはこの1ブロックだけ差し替えればよい。 */
.point-card {
    margin: 1.1rem 0;   /* 前後に約1行分の空きを確保（JSが隣接<br>を除去するため間隔はここで持つ） */
    padding-left: 0.8rem;
    border-left: 4px solid var(--c-primary);
}

/* タグ見出し付きのまとめ枠：タグを枠の上に置き、本文を左帯で区切る */
.point-card.has-tag {
    border-left: none;
    padding-left: 0;
}

.point-card.has-tag .point-card-body {
    padding-left: 0.8rem;
    border-left: 4px solid var(--c-primary);
}

/* AI回答内の細い区切り線（[[---]]/--- → <hr class="ai-hr">）。
   ━ の重さ・浮きを避け、短めの淡い罫線にする。 */
.ai-hr {
    border: none;
    border-top: 1px solid var(--c-border);
    width: 100%;
    margin: 0.8rem 0;
}

/* コピーボタン（吹き出し枠内の右下・アイコンのみ。本文から1行空けて通常フローで置く。
   回答確定後に JS が .message-content の末尾に追加する） */
.copy-btn {
    margin-left: auto;      /* 右下に寄せる（幅を持つブロックとして右端へ） */
    margin-top: 0.9rem;     /* 本文から約1行分あける */
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: none;
    border-radius: 6px;
    color: #9aa0a6;         /* 淡いグレーで控えめに */
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s, background-color 0.2s, color 0.2s;
}

.copy-btn:hover {
    opacity: 1;
    background-color: var(--c-surface-soft);
    color: var(--c-text);
}

.copy-btn.copied {
    opacity: 1;
    color: var(--c-answer-green-dark);
}

.copy-btn-icon {
    display: inline-flex;
    line-height: 0;
}

.copy-btn-icon svg { display: block; }

/* AI回答内の表（formatAIResponse が <table class="ai-table"> を生成） */
.ai-table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.75rem 0;
    font-size: 0.9rem;
}

.ai-table th,
.ai-table td {
    border: 1px solid var(--c-border);
    padding: 0.5rem 0.7rem;
    text-align: left;
    vertical-align: top;
}

.ai-table th {
    background-color: var(--c-accent-pink);
    color: var(--c-primary);
    font-weight: 700;
}

/* 入力中インジケータ（・・・） */
.typing-indicator {
    display: inline-block;
    color: #999;
    font-size: 1.3rem;
    line-height: 1;
    letter-spacing: 0.2em;
    min-width: 3em;
}

.typing-indicator::after {
    content: '';
    animation: typing-dots 1.4s steps(4, end) infinite;
}

@keyframes typing-dots {
    0%   { content: ''; }
    25%  { content: '・'; }
    50%  { content: '・・'; }
    75%  { content: '・・・'; }
}

/* エラー表示 */
#errorContainer { padding: 0 1.5rem; }

.error-message {
    background-color: #fdecea;
    border: 1px solid #f5c6cb;
    color: #b3261e;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    margin: 0.5rem 0;
}

/* --------------------------------------------------------
   入力エリア（カード下部に固定）
   -------------------------------------------------------- */
.chat-input-area {
    padding: 1rem 1.5rem;
    background-color: var(--c-bg);   /* ページ背景・メッセージ領域と同じグレーに揃えて浮きをなくす */
}

.chat-input-container {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;   /* 入力ボックスと右カラムの高さを揃える */
}

/* 右カラム：送信ボタン（上）と「最初から」ボタン（下）を縦積み。
   入力ボックス(6rem) と 送信(3rem) の高さ差にちょうど「最初から」が収まる。 */
.chat-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex-shrink: 0;
}

.chat-input {
    flex: 1;
    padding: 0.85rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    resize: none;
    min-height: 6.5rem;   /* ちょうど3行分＋わずかな余裕（border-box: 行72px＋padding27px＋border2px≒6.3rem）。入力に応じJSで自動拡張 */
    max-height: 180px;
    font-family: inherit;
    border: 1px solid var(--c-border);
    border-radius: 12px;
    background-color: #ffffff;
}

.chat-input:focus {
    outline: none;
    border-color: var(--c-primary);
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(174, 68, 128, 0.12);
}

.send-btn {
    background-color: var(--c-answer-green);
    border: none;
    border-radius: 12px;
    padding: 0 1.2rem;
    height: 3.4rem;
    min-width: 5.5rem;
    flex-shrink: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: all 0.3s;
}

.send-btn img {
    width: auto;
    height: 1.4rem;
}

.send-btn-label {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

.send-btn:hover {
    background-color: var(--c-answer-green-dark);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.send-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* 「最初から」ボタン（右カラムの送信ボタンの下） */
.chat-actions #clearBtn {
    display: none;          /* JS が履歴ありのとき block にする */
    width: 100%;
    height: 2.5rem;         /* 送信(3.4rem)＋gap(0.6rem)＋この2.5rem＝入力ボックス(6.5rem) */
    background-color: #f5f5f5;
    color: var(--c-text);
    border: 1px solid #ddd;
    padding: 0 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s, color 0.2s;
}

.chat-actions #clearBtn:hover {
    background-color: #e8e8e8;
    color: var(--c-text);
}

/* --------------------------------------------------------
   下部CTA（専門ケアマネジャー相談）
   -------------------------------------------------------- */
.consultation-cta {
    background: var(--c-primary);
    color: #ffffff;
    padding: 2rem;
    border-radius: 20px;
    text-align: center;
    margin-top: 2rem;
    box-shadow: var(--shadow-card);
}

.consultation-cta h3 {
    color: #ffffff;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.consultation-cta p {
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.cta-button {
    background-color: #ffffff;
    border: none;
    padding: 1rem 2rem;
    border-radius: 0.6rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--c-primary);
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.cta-button:hover {
    background-color: var(--c-chat-ai-bg);
}

/* メッセージ表示アニメーション */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* チャットスクロールバー（WebKit） */
.chat-messages::-webkit-scrollbar { width: 6px; }
.chat-messages::-webkit-scrollbar-track { border-radius: 3px; }
.chat-messages::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; }
.chat-messages::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }

/* メインコンテンツ（CTAまで）と下部6バナーの間が空きすぎないよう詰める。
   common.css の .banner_section{margin-top:2rem} と .bottom-page-wrap{padding-bottom:2rem}、
   .consultation-cta{margin-top:2rem} が積層して不自然な隙間になるため、
   このページではバナー上余白と本体下余白を圧縮する。 */
#banner_section { margin-top: 0; }
.ai-consultation-section.bottom-page-wrap { padding-bottom: 1rem; }

/* ========================================================
   PC（1024px~）：右下固定 contact_box との被り回避
   contact_box は右端に固定表示されるため、本体・バナー・ヘッダーの
   .container に右余白（--contactbox-w）を確保し、コンテンツが
   問い合わせボタン群の左端までに収まるようにする。
   （ケアプラン作成 care_plan_styles.css と同手法）
   ======================================================== */
@media (min-width: 1024px) {
    .ai-consultation-section.bottom-page-wrap .container { padding-right: var(--contactbox-w); }
    #banner_section .container { padding-right: var(--contactbox-w); }
    nav .container { padding-right: var(--contactbox-w); }

    /* contact_box を出さないページ（送信完了）は被り回避が不要なので
       ヘッダー・バナーの右余白を通常値に戻す。 */
    .page-no-contactbar nav .container,
    .page-no-contactbar #banner_section .container { padding-right: 20px; }
}

/* ========================================================
   タブレット・スマホ（~1023px）
   下部固定の contact_box 横帯（common.css）と被らないよう、
   カード高さを抑え、入力欄を縦並びにする。
   ======================================================== */
@media (max-width: 1023px) {
    .chat-interface { margin-top: 0; }
    .ai-consultation-section.bottom-page-wrap { padding-top: 1rem; }

    /* ヘッダー(--header-h-sp) ＋ 下部 contact_box バー(--contactbar-h) ＋ 余白を差し引く
       （ピンク帯廃止ぶん余白を圧縮しチャットを縦に拡大） */
    .chat-area-wrap {
        height: calc(100vh - var(--header-h-sp) - var(--contactbar-h) - 50px);
        min-height: 320px;
    }

    .message-content { max-width: 88%; }

    .chat-messages { padding: 1rem; gap: 1rem; }

    /* 入力欄：横並び→縦並び。送信ボタンを横長に */
    .chat-input-area { padding: 0.75rem 1rem; }

    .chat-input-container { flex-direction: column; align-items: stretch; }

    .chat-input { width: 100%; }   /* 高さは基本値(7rem≒3行)を継承 */

    /* タブレット以下：右カラムも全幅にして「入力→送信→最初から」を縦積み */
    .chat-actions { width: 100%; }

    /* 送信ボタンは横幅いっぱいに（アイコン＋「送信」は基本スタイルを継承） */
    .send-btn { width: 100%; }

    .consultation-cta { padding: 1.5rem; }
    .consultation-cta h3 { font-size: 1.3rem; }

    /* CTAと6バナーの間は詰める（PCと同様）。
       下部固定 contact_box バー回避の余白は、バナーの後ろにある footer 側
       （common.css のタブレット footer 下 padding 160px）で確保済みなので、
       ここで CTA-バナー間に contactbar 分の余白を入れると隙間が過大になる。 */
    .ai-consultation-section.bottom-page-wrap { padding-bottom: 1rem; }
    #banner_section { margin-top: 0; }
}

/* ========================================================
   スマホ（~599px）：ヘッダー(--header-h-xs)に合わせ高さ再計算
   ======================================================== */
@media (max-width: 599px) {
    /* 白カードの「枠」を外して白面を画面端まで広げる。
       外側のグレー背景＞白カード＞内側余白という入れ子を1段減らし、
       狭い画面でコンテンツを広く使う。container の左右 padding(20px) を
       相殺し、角丸・影をなくしてグレー背景と一体化させる。 */
    .ai-consultation-section .container { padding-left: 0; padding-right: 0; }

    .chat-area-wrap {
        height: calc(100vh - var(--header-h-xs) - var(--contactbar-h) - 30px);
        min-height: 300px;
        border-radius: 0;
        box-shadow: none;
        margin-top: 0;
    }

    .chat-messages { padding: 0.9rem; }

    /* スマホも入力欄は約3行分（PC/タブレットと同じ 6.5rem）。入力に応じてさらに自動拡張。 */
    .chat-input { min-height: 6.5rem; }

    /* スマホはAI発話を縦並びに（ロボアイコンの「下」に回答エリア）。
       横に並べると吹き出しが狭くなるため、アイコンを上・吹き出しを下に置き
       吹き出しを画面幅いっぱいに使う。ユーザー発話は従来どおり右寄せ。 */
    .chat-message.ai-message,
    .chat-message.bot-message,
    .chat-message.loading {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

    /* AI発話は縦カラム・吹き出しともに画面幅いっぱいに使う */
    .ai-col {
        max-width: 100%;
        width: 100%;
    }

    .ai-message .message-content,
    .bot-message .message-content,
    .loading .message-content {
        max-width: 100%;
    }

    .message-content { max-width: 92%; font-size: 0.95rem; }

    /* CTA は枠付きの箱として残すが、画面端に付かないよう左右余白を戻す */
    .consultation-cta {
        margin: 1.5rem 16px 0;
        padding: 1.2rem;
        border-radius: 14px;
    }
}