/**
 * 記事内 吹き出し（会話ブロック）スタイル [toeic_say]。
 * 文字ばかりの解説に「一呼吸」を作る。生徒=左／コーチ=右が既定。
 * 共通トークンは記事内でも効くよう再宣言（embed.css と同思想）。
 */

.ts-say {
	--ts-say-fg: #1f2430;
	--ts-say-muted: #6b7280;
	--ts-say-border: #e5e7eb;
	--ts-say-student-bg: #eef2ff; /* 生徒: 淡いブルー */
	--ts-say-student-border: #c7d2fe;
	--ts-say-coach-bg: #f0fdf4;   /* コーチ: 淡いグリーン */
	--ts-say-coach-border: #bbf7d0;

	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 22px 0;
	font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
		"Noto Sans JP", "Segoe UI", Meiryo, sans-serif;
	color: var(--ts-say-fg);
	line-height: 1.7;
}
.ts-say * { box-sizing: border-box; }

/* 右向き（コーチ既定）はアバターを右へ */
.ts-say--right {
	flex-direction: row-reverse;
}

/* アバター */
.ts-say-avatar {
	flex: 0 0 auto;
	width: 72px;
	text-align: center;
}
.ts-say-avatar img {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	background: #f3f4f6; /* 画像未配置時の下地 */
	border: 2px solid var(--ts-say-border);
	display: block;
}
.ts-say-name {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: var(--ts-say-muted);
	white-space: nowrap;
}

/* 吹き出し本体 */
.ts-say-bubble {
	position: relative;
	flex: 1 1 auto;
	max-width: 100%;
	padding: 13px 16px;
	border-radius: 14px;
	border: 1px solid var(--ts-say-border);
	background: #fff;
}
.ts-say-bubble > :first-child { margin-top: 0; }
.ts-say-bubble > :last-child { margin-bottom: 0; }
.ts-say-bubble p { margin: 0 0 8px; }

/* 吹き出しの三角しっぽ（枠線付き=擬似要素2枚で縁取り） */
.ts-say-bubble::before,
.ts-say-bubble::after {
	content: "";
	position: absolute;
	top: 22px;
	width: 0;
	height: 0;
	border: 9px solid transparent;
}
/* 左向き（生徒既定）: しっぽは左 */
.ts-say--left .ts-say-bubble::before {
	left: -18px;
	border-right-color: var(--ts-say-border);
}
.ts-say--left .ts-say-bubble::after {
	left: -16px;
	border-right-color: #fff;
}
/* 右向き（コーチ既定）: しっぽは右 */
.ts-say--right .ts-say-bubble::before {
	right: -18px;
	border-left-color: var(--ts-say-border);
}
.ts-say--right .ts-say-bubble::after {
	right: -16px;
	border-left-color: #fff;
}

/* 役割ごとの色分け（生徒=ブルー／コーチ=グリーン） */
.ts-say--student .ts-say-bubble {
	background: var(--ts-say-student-bg);
	border-color: var(--ts-say-student-border);
}
.ts-say--student.ts-say--left .ts-say-bubble::before { border-right-color: var(--ts-say-student-border); }
.ts-say--student.ts-say--left .ts-say-bubble::after { border-right-color: var(--ts-say-student-bg); }
.ts-say--student.ts-say--right .ts-say-bubble::before { border-left-color: var(--ts-say-student-border); }
.ts-say--student.ts-say--right .ts-say-bubble::after { border-left-color: var(--ts-say-student-bg); }

.ts-say--coach .ts-say-bubble {
	background: var(--ts-say-coach-bg);
	border-color: var(--ts-say-coach-border);
}
.ts-say--coach.ts-say--left .ts-say-bubble::before { border-right-color: var(--ts-say-coach-border); }
.ts-say--coach.ts-say--left .ts-say-bubble::after { border-right-color: var(--ts-say-coach-bg); }
.ts-say--coach.ts-say--right .ts-say-bubble::before { border-left-color: var(--ts-say-coach-border); }
.ts-say--coach.ts-say--right .ts-say-bubble::after { border-left-color: var(--ts-say-coach-bg); }

/* スマホ: アバターを少し小さく */
@media (max-width: 480px) {
	.ts-say { gap: 10px; }
	.ts-say-avatar { width: 56px; }
	.ts-say-avatar img { width: 56px; height: 56px; }
	.ts-say-bubble { padding: 11px 13px; font-size: 15px; }
	.ts-say-bubble::before,
	.ts-say-bubble::after { top: 18px; }
}