/* -------------------------------------------------- */
/* Charioot Public Chat Widget Styles
/* -------------------------------------------------- */

:root {
	--charioot-theme-color: #0073aa;
}

/* チャット開始アイコン（バブル） */
#charioot-bubble {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 60px;
	height: 60px;
	background-color: var(--charioot-theme-color);
	border-radius: 50%;
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
	cursor: pointer;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	transition: transform 0.2s ease-in-out;
}

#charioot-bubble:hover {
	transform: scale(1.1);
}

/* チャットウィンドウ全体 (非表示の時のスタイル) */
#charioot-window {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 450px;
    max-width: 90vw;
    height: 77%;
    max-height: 80vh;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    z-index: 10000;
    display: flex; /* displayは常にflexにしておく */
    flex-direction: column;
    overflow: hidden;

    /* ▼▼▼ アニメーション用の設定 ▼▼▼ */
    opacity: 0; /* 最初は透明 */
    transform: translateY(20px); /* 最初は20px下にずらす */
    visibility: hidden; /* 操作もできないように隠す */
    transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0.3s; /* 変化を0.3秒でアニメーション */
}

/* 表示用のクラスが付いた時のスタイル */
#charioot-window.is-visible {
    opacity: 1; /* 不透明にする */
    transform: translateY(0); /* 元の位置に戻す */
    visibility: visible; /* 表示して操作可能にする */
}
/* ヘッダー部分 */
#charioot-header {
	background-color: var(--charioot-theme-color);
	color: white;
	padding: 3px 15px;
	font-weight: bold;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* (これ以降のCSSは変更ありません) */
#charioot-close-btn {
	background: none;
	border: none;
	color: white;
	font-size: 24px;
	cursor: pointer;
    padding: 7px;;
}



/* public/css/charioot-public.css の末尾に追記 */

/* --- クイックリプライのボタンスタイル統一 --- */

/* aタグとbuttonタグに共通のスタイルを適用 */
.charioot-quick-replies a,
.charioot-quick-replies button {
    background-color: #fff;
    color: var(--charioot-theme-color, #0073aa);
    border: 1px solid var(--charioot-theme-color, #0073aa);
    border-radius: 20px;
    padding-left: 16px;
    padding-right: 16px;
    margin: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    display: inline-block; /* aタグをボタンのように見せるため */
    text-decoration: none; /* aタグの下線を消す */
    transition: background-color 0.2s, color 0.2s;
}

/* ホバー時のスタイルも統一 */
.charioot-quick-replies a:hover,
.charioot-quick-replies button:hover {
    background-color: var(--charioot-theme-color, #0073aa);
    color: #fff;
}



/* メッセージ表示エリア */
#charioot-messages {
	flex-grow: 1;
	padding: 15px;
	overflow-y: auto;
	background-color: #f9f9f9;
	display: flex; /* ▼▼▼【重要】ここから変更 ▼▼▼ */
	flex-direction: column;
}

/* 1行ごとのメッセージコンテナ（アバターと吹き出しを内包） */
.charioot-message-row {
	display: flex;
	align-items: flex-end; /* アバターと吹き出しの下端を揃える */
	margin-bottom: 10px;
	max-width: 85%;
}

/* アバターのスタイル */
.charioot-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0; /* 縮まないようにする */
}
.charioot-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* メッセージの吹き出し本体 */
.charioot-message-content {
	padding: 10px 15px;
	border-radius: 18px;
	line-height: 1.4;
	word-wrap: break-word; /* 長い単語を折り返す */
}




.charioot-message-row,
.charioot-message-content {
    box-sizing: content-box;
}


/* AIからのメッセージ（左寄せ） */

.charioot-message-row.ai {
    align-self: start;
    flex-direction: row-reverse;
    animation: pop-in-animation 0.4s ease-out forwards;
}

.charioot-message-row.ai .charioot-avatar {
	margin-right: 10px;
}
.charioot-message-row.ai .charioot-message-content {
	background-color: #e9e9eb;
	color: #000;
	border-bottom-left-radius: 4px;
}


/* ユーザーからのメッセージ（右寄せ） */
.charioot-message-row.user {
	align-self: flex-end;
}
.charioot-message-row.user .charioot-avatar {
	margin-left: 10px;
}
.charioot-message-row.user .charioot-message-content {
	background-color: var(--charioot-theme-color);
	border-bottom-right-radius: 4px;
    color: var(--charioot-bubble-text-color, #FFFFFF); /* ← この行を修正 */
}

#charioot-input-form {
	display: flex;
	padding: 10px;
	border-top: 1px solid #e0e0e0;
}

#charioot-input {
	flex-grow: 1;
	border: 1px solid #ccc;
	border-radius: 20px;
	padding: 10px 15px;
	font-size: 16px;
    color: var(--charioot-input-text-color, #333333); /* ← この行を追加 */
}

/* 入力欄フォーカス時のスタイルをカスタマイズ */
#charioot-input:focus {
    outline: none; /* デフォルトの枠線を消す */
    border-color: #0073aa; /* 枠線の色をテーマカラーに変更 */
    box-shadow: 0 0 5px rgba(0, 115, 170, 0.5); /* ほのかに光る効果を追加 */
}

#charioot-send-btn {
	background-color: var(--charioot-theme-color);
	border: none;
	color: white;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	margin-left: 10px;
	cursor: pointer;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
    padding: 0 15px;
}
#charioot-send-btn svg{
    width: 16px;
    height: 16px;
    position: absolute;
    fill: #FFFFFF;
}



/* 参考リンク用のスタイル */
/* コンテナ全体 */
.charioot-message-extra {
    padding: 5px 15px 10px 15px;
    clear: both;
}

/* 「参考リンク:」のテキスト */
.charioot-message-extra p {
    font-size: 11px;
    color: #6c757d;
    margin: 5px 0 8px 2px;
    font-weight: bold;
}

/* ul要素のリセット */
.charioot-message-extra ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px; /* カード間のスペース */
}

/* li要素は不要なためリセット */
.charioot-message-extra li {
    margin: 0;
}

/* a要素 (カード本体のスタイル) */
.charioot-message-extra a {
    display: flex; /* アイコンとテキストを横並びにする */
    align-items: center;
    padding: 10px 12px;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    background-color: #fff;
    text-decoration: none;
    color: #212529;
    font-size: 13px;
    line-height: 1.4;
    transition: background-color 0.2s, border-color 0.2s;

    /* ▼▼▼ 長文タイトルを省略（トリミング）する設定 ▼▼▼ */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ホバー時のスタイル */
.charioot-message-extra a:hover {
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

/* リンクアイコンの追加 */
.charioot-message-extra a::before {
    content: '\1F4C4';
    margin-right: 8px;
    font-size: 16px;
}

/* クイックリプライ用のスタイル */
.charioot-quick-replies {
	padding: 0 10px 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
.charioot-quick-replies button {
	background-color: #fff;
	border: 1px solid var(--charioot-theme-color);
	color: var(--charioot-theme-color);
	padding: 5px 10px;
	border-radius: 15px;
	cursor: pointer;
	font-size: 13px;
}
.charioot-quick-replies button:hover {
	background-color: #f0f0f0;
}


.charioot-message.user {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}
.charioot-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    margin-left: 8px;
    order: 2; /* アイコンを右側に */
}
.charioot-avatar img {
    width: 100%;
    height: 100%;
}
.charioot-message-content {
    order: 1; /* メッセージを左側に */
    background-color: #dcf8c6; /* ユーザーのメッセージ色 */
    padding: 8px 12px;
    border-radius: 10px;
    /* max-width: 80%; */
}


.charioot-message-content iframe{
    width: 385px;
    max-width: 400px;
}

.charioot-message-content ul,
.charioot-message-content ol{
    margin-left: 1em;
}

/* LINEログイン誘導ボタンのスタイル */
.charioot-line-login-prompt-button {
    display: inline-block;
    padding: 10px 20px !important;
    font-size: 15px !important;
    font-weight: bold;
    color: #fff !important;
    background-color: #06C755 !important; /* LINEのブランドカラー */
    border: none;
    border-radius: 8px !important;
    cursor: pointer;
    text-align: center;
    text-decoration: none !important;
    transition: background-color 0.2s;
}
.charioot-line-login-prompt-button:hover {
    background-color: #05b04a !important;
}


/* --- ヘッダーボタンのレイアウト修正 --- */

#charioot-header {
    /* 既存のスタイルに加えて、gapを追加して要素間のスペースを確保 */
    gap: 8px;
}

/* ボタンを内包する新しいdivのスタイル */
#charioot-header-buttons {
    /* このコンテナ自体はflexアイテムとして振る舞い、マージンで右に寄せる */
    margin-left: auto;
    /* 内部のアイテム（ボタンやアバター）を中央揃えにする */
    display: flex;
    align-items: center;
    gap: 8px; /* アバターとログアウトボタンの間のスペース */
}

/* ヘッダー内の全てのボタンの共通スタイル */
#charioot-header-buttons button {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white; /* SVGアイコンの色に影響 */
}

/* LINEログインボタン内の画像サイズ */
#charioot-header-buttons #charioot-line-login-btn img {
    width: 28px;
    height: 28px;
    vertical-align: middle;
}

/* ログイン後のアバター画像のスタイル */
#charioot-header-buttons #charioot-header-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}



@keyframes peek-animation {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-10px) scale(1.1); }
}


@keyframes pop-in-animation {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    80% {
        transform: scale(1.05);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

#charioot-bubble.animate-peek {
    animation: peek-animation 0.6s ease-in-out;
}


/* 管理者からのメッセージ行の基本設定（AIと同じ左寄せ） */
.charioot-message-row.admin {
	align-self: flex-start;
	flex-direction: row;
	animation: pop-in-animation 0.4s ease-out forwards;
}

/* 管理者のアバターアイコンの右側の余白 */
.charioot-message-row.admin .charioot-avatar {
	margin-right: 10px;
}

/* 管理者の吹き出しのスタイル（背景色を緑に設定） */
.charioot-message-row.admin .charioot-message-content {
	background-color: #e2f0d9; /* 落ち着いた緑色 */
	color: #000;
	border-bottom-left-radius: 4px;
}


/* --- reCAPTCHA有効時の位置調整 --- */
.charioot-recaptcha-active #charioot-bubble {
    right: 85px; /* 右からの距離を広げてバッジを避ける */
    bottom: 15px;
}




/* --- 注釈文のスタイル --- */
#charioot-disclaimer {
    padding: 10px 1.5em;
    font-size: 12px;
    line-height: 1.5;
    color: #555;
    text-align: left;
    background-color: #ECD4D5;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

#charioot-disclaimer a {
    color: #555;
    text-decoration: underline;
}

#charioot-disclaimer a:hover {
    color: #000;
}


/* アイコン切り替え時のアニメーション効果 */
#charioot-bubble {
    transition: opacity 0.15s ease-in-out, transform 0.2s ease-in-out;
}

#charioot-bubble.is-changing {
    opacity: 0;
    transform: scale(0.8); /* 少し小さくして切り替わる演出 */
}

/* 呼び出しアイコン内のアバター画像用のスタイル（既存） */
#charioot-bubble .charioot-bubble-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    padding: 4px;
    box-sizing: border-box;
}



/* --- カルーセル表示用のスタイル --- */
.charioot-carousel-container {
    padding: 10px 0;
    /* overflow: hidden; */
}
.charioot-carousel-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 15px; /* スクロールバーのための余白 */
    margin-left: 15px;
}
.charioot-carousel-track::-webkit-scrollbar {
    height: 8px;
}
.charioot-carousel-track::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}
.charioot-carousel-card {
    flex: 0 0 70%;
    max-width: 240px;
    margin-right: 10px;
    scroll-snap-align: start;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
}
.charioot-carousel-image {
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    position: relative;
    background-color: #f0f0f0;
}
.charioot-carousel-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.charioot-carousel-text-content {
    padding: 12px;
    flex-grow: 1;
}
.charioot-carousel-text-content strong {
    font-size: 15px;
    color: #333;
    display: block;
    margin-bottom: 4px;
}
.charioot-carousel-text-content p {
    font-size: 13px;
    color: #666;
    margin: 0;
    line-height: 1.5;
}
.charioot-carousel-button-wrap {
    padding: 0 12px 12px;
}
.charioot-carousel-button {
    display: block;
    width: 100%;
    padding: 8px;
    text-align: center;
    border: 1px solid var(--charioot-theme-color, #0073aa);
    color: var(--charioot-theme-color, #0073aa);
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    transition: background-color 0.2s, color 0.2s;
}
.charioot-carousel-button:hover {
    background-color: var(--charioot-theme-color, #0073aa);
    color: #fff;
}


/* ===============================================
   ボタンの共通スタイル
=============================================== */

/* クイックリプライとカルーセルボタンの基本スタイル */
#charioot-quick-replies button,
.charioot-carousel-button {
    /* ★★★ 色の指定 ★★★ */
    background-color: var(--charioot-theme-color, #0073aa) !important;
    color: var(--charioot-bubble-text-color, #FFFFFF) !important;

    /* --- 見た目の調整 --- */
    border: none;
    border-radius: 20px; /* 角を丸くする */
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none; /* リンクの場合の下線を消す */
    display: inline-block;
    transition: opacity 0.2s ease;
}

/* ボタンにマウスカーソルを合わせた時の効果 */
#charioot-quick-replies button:hover,
.charioot-carousel-button:hover {
    opacity: 0.85;
}


/* ===============================================
   各ボタンのレイアウト調整
=============================================== */

/* クイックリプライのコンテナ */
#charioot-quick-replies {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* ボタン同士の間隔 */
    justify-content: flex-end; /* ボタンを右寄せに配置 */
    padding: 5px 10px 10px;
}

/* カルーセルボタンのラッパー */
.charioot-carousel-button-wrap {
    padding: 0 15px 15px;
    margin-top: auto; /* ボタンをカードの下部に固定 */
}

/* カルーセルボタンは常に横幅いっぱいに広げる */
.charioot-carousel-button {
    width: 100%;
    box-sizing: border-box; /* paddingを含めて幅を100%に */
    text-align: center;
}



/* --- 管理者メッセージのスタイルを追加 --- */

/* adminメッセージ行全体を右寄せに */
.charioot-message-row.admin {
    justify-content: flex-end;
}

/* adminメッセージの要素の並び順を逆（アバターが右）に */
.charioot-message-row.admin .charioot-avatar,
.charioot-message-row.assistant .charioot-avatar
{
    order: 1;
}
.charioot-message-row.admin .charioot-message-content,
.charioot-message-row.assistant .charioot-message-content
{
    order: 2;
}

/* adminメッセージの吹き出しの色をテーマ色に */
.charioot-message-row.admin .charioot-message-content {
    background-color: var(--charioot-theme-color);
    color: var(--charioot-bubble-text-color);
}

/* --- スマホ表示用の設定 (画面いっぱいに表示) --- */
@media (max-width: 768px) {
	#charioot-window {
		/* 位置を画面の四隅に固定し、全体に広げる */
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;

		/* サイズを100%に設定 */
		width: 100%;
		height: 100%;
		max-width: 100%;
		max-height: 100%;

		/* 画面いっぱいに表示するため角丸をなくす */
		border-radius: 0;
	}
}
