/**
 * AIからの回答ブロック - フロント
 * 「AIがしゃべっている」吹き出し・アシスタント風デザイン
 */

.wp-block-aisaba-response-box {
	--response-border: 1px solid rgba(123, 104, 184, 0.35);
	--response-bg: rgba(247, 245, 252, 0.95);
	--response-text: var(--aisaba-color-text, #2F3E46);
	--response-label-bg: linear-gradient(135deg, rgba(123, 104, 184, 0.2) 0%, rgba(107, 158, 212, 0.15) 100%);
	--response-label-text: #5a4a7a;
	--response-accent: #7B68B8;
	--response-radius: 12px;
	--response-radius-sm: 8px;

	position: relative;
	margin: 1.5rem 0;
	padding: 0;
	background: var(--response-bg);
	color: var(--response-text);
	border: var(--response-border);
	border-radius: var(--response-radius);
	box-shadow:
		0 2px 12px rgba(123, 104, 184, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.8);
	overflow: hidden;
	font-family: var(--aisaba-font-sans, "Quicksand", "Noto Sans JP", sans-serif);
}

/* 左端の「AI発話」アクセント - 吹き出しのしっぽ風・グラデーション */
.wp-block-aisaba-response-box::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 5px;
	background: linear-gradient(
		180deg,
		var(--response-accent) 0%,
		rgba(107, 158, 212, 0.7) 100%
	);
	border-radius: var(--response-radius-sm) 0 0 var(--response-radius-sm);
}

/* ヘッダー: ラベル（AIからの回答）＋ アイコン */
.wp-block-aisaba-response-box__header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem 0.5rem 1.25rem;
	margin-left: 5px;
	background: var(--response-label-bg);
	border-bottom: 1px solid rgba(123, 104, 184, 0.15);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--response-label-text);
}

.wp-block-aisaba-response-box__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	font-size: 0.5rem;
	line-height: 1;
	color: var(--response-accent);
	opacity: 0.9;
}

.wp-block-aisaba-response-box__label {
	display: inline-flex;
	align-items: center;
}

/* 本文エリア - 会話文として読みやすい余白 */
.wp-block-aisaba-response-box__content {
	padding: 1.125rem 1.25rem 1.125rem 1.5rem;
	margin-left: 5px;
	font-size: 0.9375rem;
	line-height: 1.75;
	white-space: pre-wrap;
	word-break: break-word;
}

.wp-block-aisaba-response-box__content p {
	margin: 0 0 0.75em;
}

.wp-block-aisaba-response-box__content p:last-child {
	margin-bottom: 0;
}

.wp-block-aisaba-response-box.alignwide {
	max-width: var(--aisaba-max-width, 1200px);
}

.wp-block-aisaba-response-box.alignfull {
	max-width: none;
}