/* =================================================================
   1. チャット全体の枠組み（レスポンシブ対応）
   ================================================================= */
#gfc-container {
    width: 100%;
    max-width: 700px; /* 縦長感を和らげるため、少しだけ横幅を広げました */
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    font-family: sans-serif;
    box-sizing: border-box;
}

/* スマホでは隙間を小さくして画面を有効活用 */
@media screen and (max-width: 480px) {
    #gfc-container {
        padding: 12px;
        margin: 10px auto;
    }
}

/* チャットのログ表示エリア */
#gfc-chat-log {
    height: 500px; /* 少し高さを広げてスクロールしやすくしました */
    overflow-y: auto;
    border: 1px solid #f0f0f0;
    padding: 15px;
    background: #fdfbf7; /* 占いっぽい落ち着いた背景色 */
    margin-bottom: 15px;
    border-radius: 8px;
}

/* =================================================================
   2. 吹き出し（チャットメッセージ）の設定
   ================================================================= */
/* 共通設定 */
.gfc-message {
    margin-bottom: 20px;
    padding: 14px 18px;
    border-radius: 18px;
    line-height: 1.6;
    font-size: 15px;
    word-break: break-word; /* break-allから適切に折り返すよう変更 */
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}

/* 👤 ユーザー（右側・青系） */
.gfc-role-user {
    background-color: #e1f5fe;
    color: #0277bd;
    margin-left: auto;
    text-align: left;
    max-width: 85%; /* スマホで窮屈にならないよう少し広げました */
}

/* 🔮 AI・占い師（左側・クリーム・ブラウン系）※競合を排除し完全リッチ化 */
.gfc-role-model {
    background-color: #faf6f0 !important; /* 占いらしい温かみのあるクリーム色の背景 */
    color: #3e2723 !important;           /* 文字色は目に優しい深みのあるブラウン */
    line-height: 1.8 !important;          /* 行間を広げて文字を読みやすくする */
    font-size: 15px !important;           /* スマホでも小さすぎない文字サイズ */
    padding: 20px !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(93, 64, 55, 0.05) !important;
    margin-right: auto;
    max-width: 90%; /* 長文をゆったり読めるように横幅を広く確保 */
}

/* AIが作った見出し（H3やH4、または太字の行）をカードの区切りのように見せる */
.gfc-role-model br + strong,
.gfc-role-model h3,
.gfc-role-model h4 {
    display: block;
    margin-top: 25px !important;
    margin-bottom: 10px !important;
    color: #5d4037 !important;           /* 見出しの色 */
    font-size: 17px !important;           /* 見出しを少し大きく */
    border-left: 4px solid #7b1fa2;     /* 左側にアクセントとしてパープルの線を引く */
    padding-left: 10px !important;
    letter-spacing: 0.05em;
}

/* 最初の見出しの上の余白を詰める */
.gfc-role-model br + strong:first-of-type,
.gfc-role-model h3:first-of-type {
    margin-top: 5px !important;
}

/* 箇条書きや重要な点（「・」や「-」）の行間と余白 */
.gfc-role-model ul, 
.gfc-role-model ol {
    padding-left: 20px !important;
    margin: 10px 0 !important;
}

.gfc-role-model li {
    margin-bottom: 8px !important;
}

/* =================================================================
   3. 下部入力エリア
   ================================================================= */
#gfc-chat-input-area {
    display: flex;
    gap: 10px;
}

#gfc-user-message {
    flex: 1;
    height: 60px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    resize: none;
    font-size: 14px;
}

#gfc-send-message {
    padding: 0 20px;
    background: #7b1fa2; /* 占い師ボタンに合わせたパープル */
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.2s ease;
}

#gfc-send-message:hover {
    background: #4a148c;
}

/* =================================================================
   4. 鑑定開始ボタン（大画面・スマホ両対応）
   ================================================================= */
#gfc-submit-birthday {
    display: block;
    width: 100%;                  /* 横幅いっぱいに広げる（スマホで押しやすい） */
    max-width: 320px;             /* パソコンで広がりすぎないように制限 */
    margin: 30px auto 10px auto;  /* ボタンの上下に余裕を持たせ、中央に配置 */
    padding: 15px 25px;           /* ボタンの内側の余白を広げて大きくする */
    font-size: 18px;              /* 文字を大きく太くする */
    font-weight: bold;
    color: #ffffff;               /* 文字色は白 */
    background: linear-gradient(135deg, #7b1fa2, #4a148c); /* 高級感のある深いパープルのグラデーション */
    border: none;                 /* 外枠の線を消す */
    border-radius: 30px;          /* 角を丸くして洗練されたボタンにする */
    box-shadow: 0 4px 15px rgba(123, 31, 162, 0.3); /* ほんのり立体感を出す影 */
    cursor: pointer;
    transition: all 0.3s ease;    /* マウスを乗せたときの動きを滑らかに */
}

#gfc-submit-birthday:hover {
    background: linear-gradient(135deg, #8e24aa, #5e35b1); /* 少し明るい色に変化 */
    transform: translateY(-2px);  /* ほんの少し上に浮き上がる */
    box-shadow: 0 6px 20px rgba(123, 31, 162, 0.4); /* 影を強くして浮遊感を出す */
}

#gfc-submit-birthday:active {
    transform: translateY(1px);   /* 押し込まれたような動き */
    box-shadow: 0 2px 10px rgba(123, 31, 162, 0.3);
}

/* =================================================================
   5. ローディング（スピナー・アニメーション）
   ================================================================= */
/* 2重にあった定義を1つに統合 */
#gfc-loading {
    text-align: center;
    padding: 30px 10px;
    color: #5d4037; /* 文字色（茶系） */
    font-size: 15px;
    font-weight: bold;
    margin-top: 10px;
}

/* ぐるぐる回るCSSスピナーの本体 */
.gfc-spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto 15px auto; /* 中央配置と文字との余白 */
    border: 4px solid #f3e5f5; /* スピナーの背景色（薄いパープル） */
    border-top: 4px solid #7b1fa2; /* 回転する部分の色（濃いパープル） */
    border-radius: 50%; /* 丸くする */
    animation: gfc-spin 1s linear infinite; /* 1秒で1回転、無限ループ */
}

@keyframes gfc-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ふわふわ点滅 */
#gfc-loading-text {
    animation: gfc-pulse 1.5s ease-in-out infinite;
}

@keyframes gfc-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}
/* 予測質問ボタンのホバーエフェクト */
.gfc-suggest-btn:hover {
    background-color: #faf7f2 !important; /* 薄いベージュに */
    border-color: #736151 !important;     /* 枠線を少し濃く */
    transform: translateY(-1px);          /* ほんの少し浮き上がらせる */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
/* AIに関する免責事項のスタイル */
.gfc-ai-disclaimer {
    font-size: 11px;
    color: #a0aec0; /* 主張しすぎない上品な薄いグレー */
    text-align: center;
    margin-top: 8px;
    letter-spacing: 0.03em;
}
/* 「占えること」エリア全体のテキストの行間を詰める */
h2 + p, 
ul {
    line-height: 1.4 !important; /* 行と行の間を少し狭くします（標準は1.6〜1.8） */
}

/* 段落（pタグ）の上下の無駄な隙間を削る */
p {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}

/* 箇条書き（ulタグ）全体の上下の余白を詰める */
ul {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    padding-left: 20px !important;
}

/* 箇条書きの各項目（liタグ）の間隔を詰める */
li {
    margin-bottom: 2px !important; /* 項目ごとの隙間を最小限に */
}

/* 箇条書きの中にある段落（pタグ）の余白を完全にゼロにする（これが広がっている一番の原因です） */
li p {
    margin: 0 !important;
    display: inline; /* 文字列として横並びに扱い、上下のブロック隙間を消します */
}