/* 吹き出し。色は yozora のスキンの変数を使い、ほかのテーマでは控えめな初期色になる。 */
.yozora-bubble { display: flex; align-items: flex-start; gap: 14px; margin: 1.6em 0; }
.yozora-bubble--right { flex-direction: row-reverse; }
.yozora-bubble__who { flex: 0 0 64px; text-align: center; }
.yozora-bubble img.yozora-bubble__icon, .yozora-bubble div.yozora-bubble__icon { display: block; width: 64px; height: 64px; margin: 0 auto 4px; border-radius: 50%; object-fit: cover; border: 2px solid var(--c-line, #e3e6eb); background: var(--c-bg-soft, #f5f6f8); }
.yozora-bubble__name { display: block; font-size: .7rem; line-height: 1.3; color: var(--c-sub, #5c6474); word-break: break-all; }
.yozora-bubble__body {
	position: relative;
	flex: 1;
	min-width: 0;
	padding: .8em 1em;
	border: 1px solid var(--c-line, #e3e6eb);
	border-radius: 12px;
	background: var(--c-bg-soft, #f5f6f8);
	color: var(--c-text, inherit);
	line-height: 1.8;
}
.yozora-bubble__body > :first-child { margin-top: 0; }
.yozora-bubble__body > :last-child { margin-bottom: 0; }
/* 話す：三角のしっぽ（枠線の色→中の色、の2枚重ね） */
.yozora-bubble--talk .yozora-bubble__body::before,
.yozora-bubble--talk .yozora-bubble__body::after { content: ""; position: absolute; top: 20px; border: 9px solid transparent; }
.yozora-bubble--talk.yozora-bubble--left .yozora-bubble__body::before { left: -18px; border-right-color: var(--c-line, #e3e6eb); }
.yozora-bubble--talk.yozora-bubble--left .yozora-bubble__body::after { left: -16px; border-right-color: var(--c-bg-soft, #f5f6f8); }
.yozora-bubble--talk.yozora-bubble--right .yozora-bubble__body::before { right: -18px; border-left-color: var(--c-line, #e3e6eb); }
.yozora-bubble--talk.yozora-bubble--right .yozora-bubble__body::after { right: -16px; border-left-color: var(--c-bg-soft, #f5f6f8); }
/* 考える：丸みを強くし、しっぽは小さな丸2つ */
.yozora-bubble--think .yozora-bubble__body { border-radius: 24px; border-style: dashed; }
.yozora-bubble--think .yozora-bubble__body::before,
.yozora-bubble--think .yozora-bubble__body::after { content: ""; position: absolute; border: 1px dashed var(--c-line, #e3e6eb); border-radius: 50%; background: var(--c-bg-soft, #f5f6f8); }
.yozora-bubble--think .yozora-bubble__body::before { top: 22px; width: 12px; height: 12px; }
.yozora-bubble--think .yozora-bubble__body::after { top: 30px; width: 7px; height: 7px; }
.yozora-bubble--think.yozora-bubble--left .yozora-bubble__body::before { left: -16px; }
.yozora-bubble--think.yozora-bubble--left .yozora-bubble__body::after { left: -26px; }
.yozora-bubble--think.yozora-bubble--right .yozora-bubble__body::before { right: -16px; }
.yozora-bubble--think.yozora-bubble--right .yozora-bubble__body::after { right: -26px; }
@media (max-width: 480px) {
	.yozora-bubble__who { flex-basis: 52px; }
	.yozora-bubble img.yozora-bubble__icon, .yozora-bubble div.yozora-bubble__icon { width: 52px; height: 52px; }
}