@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* AIメッセージの表示エリアに改行を反映させる */
.ai-message {
    white-space: pre-wrap; /* これで \n が改行として表示されます */
    line-height: 1.8;      /* 行間を広げて読みやすくします */
    margin-bottom: 20px;   /* 次のメッセージとの間隔を空けます */
}

/* ついでにユーザー側のメッセージも整える場合 */
.user-message {
    white-space: pre-wrap;
    margin-bottom: 15px;
}

/* チャット履歴表示エリアの固定 */
#your-history {
    max-height: 500px;    /* 表示エリアの最大高さ。お好みの高さに調整してください */
    overflow-y: auto;     /* 内容が溢れた場合に垂直スクロールを表示 */
    padding: 15px;        /* 内側の余白 */
    background-color: #f9f9f9; /* 履歴エリアと背景を区別しやすくする（任意） */
    border: 1px solid #ddd;    /* エリアの境界線（任意） */
    border-radius: 8px;   /* 角丸（任意） */
    margin-bottom: 20px;  /* 送信フォームとの間隔 */
    white-space: pre-wrap; /* 改行コードを有効にする */
}

/* メッセージごとの間隔 */
.ai-message, .user-message {
    margin-bottom: 15px;
    line-height: 1.6;
}

/* アイコンとメッセージを横並びにする設定 */
.ai-response-wrapper {
    display: flex !important; /* 横並びを強制 */
    align-items: flex-start;
    margin-bottom: 20px;
    width: 100%;
}

/* アイコン自体の大きさ指定 */
.ai-icon {
    width: 50px !important;   /* アイコンの幅 */
    height: 50px !important;  /* アイコンの高さ */
    border-radius: 50%;       /* 丸くする */
    margin-right: 15px;       /* 右側の余白 */
    flex-shrink: 0;           /* アイコンが潰れないようにする */
    display: block !important;
}

/* メッセージ部分の微調整 */
/* 既存の .ai-message の設定に max-width を追加するとより綺麗になります */
.ai-message {
    white-space: pre-wrap;
    line-height: 1.8;
    margin-bottom: 0px; /* wrapperで制御するため0に */
    flex-grow: 1;      /* 残りの幅をメッセージに使う */
}

/* スクロールバーが表示されるように、固定した高さがあるか再確認 */
#your-history {
    max-height: 500px;
    overflow-y: auto !important; /* 強制的にスクロールを有効にする */
    display: block;
}