/*===============================================
Technical AI
アバターチャット画面
===============================================*/

.ai{
	width:100%;

	background-color:#fff;
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
	background-attachment:fixed;

	font-family:
		-apple-system,
		BlinkMacSystemFont,
		"Helvetica Neue",
		"Yu Gothic",
		"YuGothic",
		"Meiryo",
		sans-serif;
}



/*===============================================
メインステージ
背景画像をブラウザ全面に表示
===============================================*/

.technical-ai-stage{

	width:100vw;

	height:100vh;
	min-height:720px;

	position:relative;

	/*
	 * WordPressテーマ側の
	 * コンテンツ幅制限を無視して
	 * ブラウザいっぱいまで広げる
	 */
	left:50%;
	margin-left:-50vw;

	overflow:hidden;

	background:transparent;
}



/*===============================================
アバター
PC

頭側を基準にして、
足側をトリミング
===============================================*/

.technical-ai-avatar-area{
	position:absolute;

	top:70px;
	right:3%;
	bottom:auto;

	width:46%;
	height:calc(100% - 70px);

	z-index:1;

	display:flex;

	justify-content:center;
	align-items:flex-start;

	/*
	 * 大きくした人物画像の
	 * 足側をここで切る
	 */
	overflow:hidden;

	pointer-events:none;
}


.technical-ai-avatar-image{
	display:block;

	width:auto;

	/*
	 * 人物を大きく表示
	 * 必要なら120〜135%程度で調整
	 */
	height:160%;

	/*
	 * 横幅による縮小を防止
	 */
	max-width:none;

	object-fit:contain;

	/*
	 * 頭側を基準
	 */
	object-position:center top;

	transform-origin:center top;

	filter:
		drop-shadow(
			0 12px 18px
			rgba(0,0,0,0.15)
		);

	animation:
		technical-ai-avatar-idle
		6.5s ease-in-out infinite;
}



/*===============================================
アバターの自然な揺らぎ
===============================================*/

@keyframes technical-ai-avatar-idle{

	0%{
		transform:
			translate(0, 0)
			rotate(0deg);
	}

	20%{
		transform:
			translate(2px, -2px)
			rotate(0.12deg);
	}

	40%{
		transform:
			translate(3px, -4px)
			rotate(0.2deg);
	}

	60%{
		transform:
			translate(0, -2px)
			rotate(0deg);
	}

	80%{
		transform:
			translate(-3px, -3px)
			rotate(-0.2deg);
	}

	100%{
		transform:
			translate(0, 0)
			rotate(0deg);
	}
}


/*===============================================
チャット履歴エリア
PC
===============================================*/

.technical-ai-chat-messages{
	position:absolute;

	/*
	 * ヘッダーから少し離す
	 */
	top:80px;

	left:3%;

	width:48%;

	/*
	 * 入力欄と重ならないよう
	 * 下側を確保
	 */
	bottom:290px;

	z-index:3;

	overflow-y:auto;
	overflow-x:hidden;

	padding:
		10px
		18px
		30px
		5px;

	box-sizing:border-box;

	scrollbar-width:thin;

	scroll-behavior:smooth;
    font-size: 15px!important
}



/*===============================================
スクロールバー
===============================================*/

.technical-ai-chat-messages::-webkit-scrollbar{
	width:8px;
}


.technical-ai-chat-messages::-webkit-scrollbar-track{
	background:
		rgba(255,255,255,0.18);

	border-radius:10px;
}


.technical-ai-chat-messages::-webkit-scrollbar-thumb{
	background:
		rgba(40,70,110,0.35);

	border-radius:10px;
}



/*===============================================
AI回答
===============================================*/

.technical-ai-chat-messages .answer{
	width:92%;

	margin:
		0
		auto
		20px
		0;

	position:relative;
}


.technical-ai-chat-messages
.answer
.bubble_answer{

	background:
		rgba(255,255,255,0.80);

	backdrop-filter:blur(8px);
	-webkit-backdrop-filter:blur(8px);

	border:
		1px solid
		rgba(255,255,255,0.75);

	border-radius:
		8px
		18px
		18px
		18px;

	box-shadow:
		0 5px 18px
		rgba(0,0,0,0.10);

	padding:
		18px
		20px;

	box-sizing:border-box;

	color:#222;

	font-size: 15px!important;

	line-height:180%;

	font-weight:500;
}



/*===============================================
ユーザー質問
===============================================*/

.technical-ai-chat-messages .question{
	width:76%;

	margin:
		0
		0
		20px
		auto;

	background:
		rgba(35,74,145,0.82);

	backdrop-filter:blur(7px);
	-webkit-backdrop-filter:blur(7px);

	border:
		1px solid
		rgba(255,255,255,0.35);

	border-radius:
		18px
		8px
		18px
		18px;

	box-shadow:
		0 5px 18px
		rgba(0,0,0,0.10);

	padding:
		16px
		20px;

	box-sizing:border-box;

	color:#fff;

	font-size:14px!important;

	line-height:180%;

	font-weight:500;
}



/*===============================================
時刻
===============================================*/

.technical-ai-chat-messages .time{
	margin-bottom:8px;

	font-size:12px!important;

	line-height:140%;

	font-weight:400;

	color:#666;
}


.technical-ai-chat-messages
.question
.time{
	color:
		rgba(255,255,255,0.75);
}



/*===============================================
メッセージ本文
===============================================*/

.technical-ai-chat-messages
.message_text{

	word-break:break-word;

	overflow-wrap:anywhere;
}



/*===============================================
入力パネル
PC
===============================================*/

.technical-ai-input-panel{
	position:absolute;

	left:50%;
	bottom:28px;

	transform:
		translateX(-50%);

	z-index:10;

	width:820px;
	max-width:88%;

	padding:
		14px
		16px
		14px
		18px;

	box-sizing:border-box;

	background:
		rgba(255,255,255,0.92);

	backdrop-filter:blur(12px);
	-webkit-backdrop-filter:blur(12px);

	border:
		1px solid
		rgba(255,255,255,0.80);

	border-radius:18px;

	box-shadow:
		0 8px 30px
		rgba(0,0,0,0.16);
}



/*===============================================
テキスト入力
===============================================*/

.technical-ai-input-panel textarea{
	display:block;

	width:100%;

	height:60px;
	min-height:60px;

	padding:
		10px
		12px;

	box-sizing:border-box;

	resize:none;

	border:none;

	outline:none;

	background:
		rgba(255,255,255,0.25);

	color:#222;

	font-family:inherit;

	font-size: 15px!important;

	line-height:160%;
}


.technical-ai-input-panel
textarea::placeholder{
	color:#777;
}



/*===============================================
入力欄下部
===============================================*/

.technical-ai-input-panel
.chat_input_bottom{

	display:flex;

	justify-content:flex-end;
	align-items:center;

	margin-top:8px;
}



/*===============================================
送信ボタン
===============================================*/

.technical-ai-input-panel
.chat_send{

	min-width:120px;

	padding:
		10px
		24px;

	border:none;

	border-radius:10px;

	background:#21458f;

	color:#fff;

	font-size: 15px!important;

	font-weight:700;

	cursor:pointer;

	transition:
		background-color 0.2s ease,
		transform 0.2s ease;
}


.technical-ai-input-panel
.chat_send:hover{

	background:#3162b3;

	transform:
		translateY(-1px);
}


.technical-ai-input-panel
.chat_send:disabled{

	opacity:0.55;

	cursor:not-allowed;

	transform:none;
}



/*===============================================
Turnstile
===============================================*/

.technical-ai-turnstile{
	margin-top:8px;
}



/*===============================================
エラー
===============================================*/

.chat_error{
	margin-top:8px;

	color:#c00;

	font-size:13px;

	line-height:160%;

	white-space:pre-line;
}



/*===============================================
AI回答待機中
===============================================*/

.technical-ai-loading
.bubble_answer{

	opacity:0.85;

	color:#555;
}



/*===============================================
AI回答内画像
===============================================*/

.technical-ai-answer-image{
	display:block;

	width:auto;
	max-width:100%;

	height:auto;

	margin:
		15px
		0;

	border-radius:10px;

	border:
		1px solid
		rgba(0,0,0,0.12);

	box-shadow:
		0 3px 12px
		rgba(0,0,0,0.08);

	box-sizing:border-box;
}


.technical-ai-image-link{
	display:block;

	text-decoration:none;
}


.technical-ai-image-link:hover{
	opacity:0.92;
}



/*===============================================
回答内リンク
===============================================*/

.technical-ai-chat-messages a{
	color:#164da8;

	text-decoration:underline;

	word-break:break-all;
}



/*===============================================
問い合わせフォーム
===============================================*/

.ai .box_mail{
	width:1000px;
	max-width:90%;

	margin:50px auto 0 auto;

	padding:30px;

	box-sizing:border-box;

	background:#fff;

	border-radius:15px;

	box-shadow:
		0 4px 20px
		rgba(0,0,0,0.08);
}


.ai .box_mail input[type="text"],
.ai .box_mail input[type="email"],
.ai .box_mail input[type="tel"]{

	display:block;

	width:650px;
	max-width:100%;

	height:42px;

	margin:
		0
		auto
		10px;

	padding:
		0
		12px;

	box-sizing:border-box;

	border:
		1px solid #ccc;
}



/*===============================================
スマートフォン
===============================================*/

@media screen and (max-width:650px){


	/*===========================================
	メインステージ
	===========================================*/

	.technical-ai-stage{
		height:calc(100svh - 65px);
		min-height:850px;
	}



	/*===========================================
	アバター
	スマホ
	===========================================*/

	.technical-ai-avatar-area{

		top:80px;

		right:auto;
		bottom:auto;

		left:50%;

		transform:
			translateX(-40%);

		width:90%;
		height:700px;

		justify-content:center;
		align-items:flex-start;

		overflow:hidden;
	}


	.technical-ai-avatar-image{

		width:auto;

		/*
		 * スマホはPCより少し控えめ
		 */
		height:150%;

		max-width:none;

		object-fit:contain;

		/*
		 * 頭側を基準
		 */
		object-position:center top;

		transform-origin:center top;
	}



	/*===========================================
	チャット履歴
	===========================================*/

	.technical-ai-chat-messages{

		position:absolute;

		top:285px;

		left:4%;

		width:92%;

		bottom:285px;

		padding:
			5px
			5px
			20px;

		box-sizing:border-box;

		overflow-y:auto;
		overflow-x:hidden;

		z-index:3;
	}


	.technical-ai-chat-messages
	.answer{

		width:95%;
	}


	.technical-ai-chat-messages
	.question{

		width:88%;
	}


	.technical-ai-chat-messages
	.answer
	.bubble_answer,

	.technical-ai-chat-messages
	.question{

		padding:
			13px
			15px;

		font-size:14px!important;

		line-height:170%;
	}



	/*===========================================
	入力パネル
	===========================================*/

	.technical-ai-input-panel{

		left:50%;
		bottom:15px;

		transform:
			translateX(-50%);

		width:92%;
		max-width:none;

		padding:
			10px
			12px;

		border-radius:14px;

		z-index:10;
	}



	/*===========================================
	入力欄
	===========================================*/

	.technical-ai-input-panel
	textarea{

		height:65px;
		min-height:65px;

		font-size:14px!important;

		line-height:160%;
	}



	/*===========================================
	入力欄下部
	===========================================*/

	.technical-ai-input-panel
	.chat_input_bottom{

		display:flex;

		justify-content:flex-end;
		align-items:center;

		margin-top:8px;
	}



	/*===========================================
	送信ボタン
	===========================================*/

	.technical-ai-input-panel
	.chat_send{

		width:auto;

		min-width:110px;

		padding:
			10px
			20px;

		font-size:14px!important;
	}



	/*===========================================
	回答画像
	===========================================*/

	.technical-ai-answer-image{

		width:100%;

		max-width:100%;
	}

}