/* ==========================================================================
   チャットサポートBOT（フローティングウィジェット）
   iframe-default-main-delivery を元にサイト用へ調整。
   ・「ページの上部へ戻るボタン」(.pagetop / 右下 20px, 高さ60px) と
     重ならないよう、アイコンをその上に配置。
   ・チャット画面は縦に長くなり過ぎないよう、最大高さを制限。
   ========================================================================== */

@scope (.chatbot-fixed-container) {
	:scope {
		position: fixed;
		right: 20px;
		/* pagetopボタン（下から20px、高さ60px）の上に隙間を空けて配置 */
		bottom: 96px;
		z-index: 998; /* pagetop(z-index:99)より手前、メニュー等よりは奥 */
		text-align: right;
		box-sizing: border-box;
	}

	.trigger-image {
		display: block;
		cursor: pointer;
		width: 176px;
		height: 58px;
		margin-left: auto;
		transition: transform 0.2s ease;
	}
	.trigger-image:hover {
		transform: scale(1.03);
	}
	.trigger-image svg {
		display: block;
		width: 100%;
		height: 100%;
	}

	.chatbot-container {
		display: none;
		width: 380px;
		max-height: 480px;   /* 縦に長くなりすぎないよう上限を設定 */
		height: 55vh;        /* 画面の高さに応じて可変、はみ出し防止 */
		position: relative;
		transition: all 0.2s ease;
		box-shadow: 0 4px 24px rgba(0,0,0,0.18);
		border-radius: 10px;
	}

	.chatbot-header {
		border-radius: 10px 10px 0 0;
		position: absolute;
		top: -40px;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 40px;
		background-color: #0277BD;
	}

	.close-button {
		margin: 0;
		width: 148px;
		height: 24px;
		font-size: 12px;
		color: white;
		background-color: transparent;
		cursor: pointer;
		border: none;
		position: absolute;
		right: 10px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 6px;
	}

	.chatbot-content {
		border-radius: 0 0 10px 10px;
		width: 100%;
		height: 100%;
		border: none;
		background: #fff;
	}

	.expand-button {
		position: absolute;
		left: 10px;
		top: 7.5px;
		width: 24px;
		height: 24px;
		background-color: transparent;
		border: none;
		cursor: pointer;
		transform: scaleX(-1);
	}
	.expand-button span,
	.close-button span {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.chatbot-container.expanded {
		width: 60vw;
		height: calc(100vh - 140px);
		max-height: 100%;
	}

	/* ---------------- スマホ表示（800px以下）---------------- */
	@media screen and (max-width: 800px) {
		:scope {
			right: 16px;
			bottom: 92px; /* スマホ版pagetopボタン(下20px/高さ60px)の上に配置 */
		}

		.trigger-image {
			width: 132px;
			height: 44px;
		}

		.chatbot-container {
			width: calc(100vw - 24px);
			max-width: 380px;
			height: 65vh;
			max-height: 65vh;
		}

		.chatbot-container.expanded {
			width: calc(100vw - 24px);
			height: calc(100vh - 120px);
		}
	}
}