:root {
	/* 画像 */
	--balloon-img-size: 60px;
	--balloon-person-width: 80px;

	/* 余白 */
	--balloon-gap: 16px;

	/* 吹き出し本体（デフォルト） */
	--balloon-bg: #f5f5f5;
	--balloon-border-color: transparent;
	--balloon-radius: 8px;
	--balloon-padding: 20px 24px;
	--balloon-line-height: 1.8;
	--balloon-color: #333;

	/* ラベル */
	--balloon-label-color: #888;
	--balloon-label-font-size: 11px;

	/* 心の声（デフォルト） */
	--balloon-thought-bg: #fafafa;
	--balloon-thought-border-color: #ccc;

	/* 先生側 */
	--balloon-doctor-bg: #f4e9ef;
	--balloon-doctor-border-color: #c286a8;

	/* 患者側 */
	--balloon-patient-bg: #e8f3ec;
	--balloon-patient-border-color: #7bb393;
}

/* --- 全体ラッパー --- */
.balloon {
	display: flex;
	align-items: flex-start;
	gap: var(--balloon-gap);
	max-width: 720px;
	padding-right: calc(var(--balloon-person-width) + var(--balloon-gap));
	padding-bottom: 20px;
}

.balloon+.balloon {
	/* margin-top: var(--balloon-gap); */
}

/* --- 人物エリア（画像＋ラベル） --- */
.balloon__person {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	width: var(--balloon-person-width);
}

.balloon__img {
	width: var(--balloon-img-size);
	height: auto;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
}

.balloon__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.balloon__label {
	margin-top: 6px;
	font-size: var(--balloon-label-font-size);
	line-height: 1.45;
	text-align: center;
	color: var(--balloon-label-color);
	word-break: keep-all;
}

/* --- 吹き出し本体 --- */
.balloon__body {
	position: relative;
	background: var(--balloon-bg);
	border: 1px solid var(--balloon-border-color);
	border-radius: var(--balloon-radius);
	padding: var(--balloon-padding);
	line-height: var(--balloon-line-height);
	color: var(--balloon-color);
	min-width: 0;
}

.balloon__body p {
	margin-top: 0;
	padding-bottom: 0;
}

/* 三角：枠線色（下レイヤー） */
.balloon__body::after {
	content: "";
	position: absolute;
	top: 17px;
	left: -11px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 9px 11px 9px 0;
	border-color: transparent var(--balloon-border-color) transparent transparent;
}

/* 三角：背景色（上レイヤー） */
.balloon__body::before {
	content: "";
	position: absolute;
	top: 18px;
	left: -10px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 10px 8px 0;
	border-color: transparent var(--balloon-bg) transparent transparent;
	z-index: 1;
}

/* --- 右パターン --- */
.balloon--right {
	flex-direction: row-reverse;
	padding-right: 0;
	padding-left: calc(var(--balloon-person-width) + var(--balloon-gap));
}

.balloon--right .balloon__body::after {
	left: auto;
	right: -11px;
	border-width: 9px 0 9px 11px;
	border-color: transparent transparent transparent var(--balloon-border-color);
}

.balloon--right .balloon__body::before {
	left: auto;
	right: -10px;
	border-width: 8px 0 8px 10px;
	border-color: transparent transparent transparent var(--balloon-bg);
}

/* ========================================
   先生側
   ======================================== */
.balloon--doctor {
	--balloon-bg: var(--balloon-doctor-bg);
	--balloon-border-color: var(--balloon-doctor-border-color);
	--balloon-thought-bg: var(--balloon-doctor-bg);
	--balloon-thought-border-color: var(--balloon-doctor-border-color);
}

/* ========================================
   患者側
   ======================================== */
.balloon--patient {
	--balloon-bg: var(--balloon-patient-bg);
	--balloon-border-color: var(--balloon-patient-border-color);
	--balloon-thought-bg: var(--balloon-patient-bg);
	--balloon-thought-border-color: var(--balloon-patient-border-color);
}

/* --- 心の声パターン --- */
.balloon--thought .balloon__body {
	background: var(--balloon-thought-bg);
	border: 2px dotted var(--balloon-thought-border-color);
}

.balloon--thought .balloon__body::before {
	width: 8px;
	height: auto;
	aspect-ratio: 1;
	border: none;
	border-radius: 50%;
	background: var(--balloon-thought-border-color);
	top: 22px;
	left: -16px;
}

.balloon--thought .balloon__body::after {
	content: "";
	position: absolute;
	width: 5px;
	height: auto;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--balloon-thought-border-color);
	top: 30px;
	left: -24px;
	border: 0;
}

/* 心の声 + 右パターン */
.balloon--thought.balloon--right .balloon__body::before {
	left: auto;
	right: -16px;
}

.balloon--thought.balloon--right .balloon__body::after {
	left: auto;
	right: -24px;
}

/* --- SP --- */
@media (max-width: 767px) {
	:root {
		--balloon-img-size: 42px;
		--balloon-person-width: 56px;
		--balloon-gap: 12px;
		--balloon-label-font-size: 10px;
		--balloon-radius: 6px;
		--balloon-padding: 10px 12px;
	}

	.balloon,
	.balloon--right {
		padding-inline: 0;
	}

	.balloon__body::after {
		top: 11px;
		left: -9px;
		border-width: 7px 9px 7px 0;
	}

	.balloon__body::before {
		top: 12px;
		left: -8px;
		border-width: 6px 8px 6px 0;
	}

	.balloon--right .balloon__body::after {
		left: auto;
		right: -9px;
		border-width: 7px 0 7px 9px;
		border-color: transparent transparent transparent var(--balloon-border-color);
	}

	.balloon--right .balloon__body::before {
		left: auto;
		right: -8px;
		border-width: 6px 0 6px 8px;
		border-color: transparent transparent transparent var(--balloon-bg);
	}

	.balloon--thought .balloon__body::before {
		border: none;
		width: 6px;
		height: auto;
		aspect-ratio: 1;
		top: 16px;
		left: -13px;
	}

	.balloon--thought .balloon__body::after {
		width: 4px;
		height: auto;
		aspect-ratio: 1;
		top: 22px;
		left: -20px;
	}

	.balloon--thought.balloon--right .balloon__body::before {
		left: auto;
		right: -13px;
	}

	.balloon--thought.balloon--right .balloon__body::after {
		left: auto;
		right: -20px;
	}
}