.nsb-balloon {
	--nsb-bg: #ffffff;
	--nsb-border: #d9e2ec;
	--nsb-accent: #2f6fb3;
	display: flex;
	align-items: flex-start;
	gap: 18px;
	margin: 1.7em 0;
	max-width: 100%;
}

.nsb-balloon--right {
	flex-direction: row-reverse;
}

.nsb-balloon__person {
	flex: 0 0 100px;
	width: 100px;
	text-align: center;
}

.nsb-balloon__avatar {
	width: 90px;
	height: 90px;
	margin: 0 auto 6px;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #eef4fa;
	border: 3px solid #fff;
	box-shadow: 0 1px 6px rgba(15, 45, 75, .14);
}

.nsb-balloon__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

.nsb-balloon__initial {
	font-weight: 700;
	font-size: 28px;
	color: #254f7c;
	line-height: 1;
}


.nsb-balloon__body {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	max-width: calc(100% - 118px);
	padding: 14px 16px;
	background: var(--nsb-bg);
	border: 1px solid var(--nsb-border);
	border-radius: 14px;
	box-shadow: 0 2px 8px rgba(15, 45, 75, .06);
	color: inherit;
}

.nsb-balloon__body::before,
.nsb-balloon__body::after {
	content: "";
	position: absolute;
	top: 32px;
	width: 0;
	height: 0;
	border-style: solid;
}

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

.nsb-balloon--left .nsb-balloon__body::after {
	left: -9px;
	border-width: 8px 10px 8px 0;
	border-color: transparent var(--nsb-bg) transparent transparent;
	top: 33px;
}

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

.nsb-balloon--right .nsb-balloon__body::after {
	right: -9px;
	border-width: 8px 0 8px 10px;
	border-color: transparent transparent transparent var(--nsb-bg);
	top: 33px;
}

.nsb-balloon__body > :first-child {
	margin-top: 0;
}

.nsb-balloon__body > :last-child {
	margin-bottom: 0;
}

.nsb-balloon--question {
	--nsb-bg: #f6fbff;
	--nsb-border: #b9d7f3;
	--nsb-accent: #2d78bd;
}

.nsb-balloon--point {
	--nsb-bg: #f7fbf6;
	--nsb-border: #c9dec4;
	--nsb-accent: #5b8f50;
}

.nsb-balloon--warning {
	--nsb-bg: #fff9ef;
	--nsb-border: #e7c982;
	--nsb-accent: #c68a18;
}

.nsb-balloon--experience {
	--nsb-bg: #faf8ff;
	--nsb-border: #d5cbea;
	--nsb-accent: #8066b0;
}

.nsb-balloon--question .nsb-balloon__body,
.nsb-balloon--point .nsb-balloon__body,
.nsb-balloon--warning .nsb-balloon__body,
.nsb-balloon--experience .nsb-balloon__body {
	border-top: 3px solid var(--nsb-accent);
}



/* Character identity -------------------------------------------------- */
/* ノベル: 青いリング + 淡い青の吹き出し */
.nsb-balloon--character-novel {
	--nsb-bg: #eef7ff;
	--nsb-border: #9bc9f1;
	--nsb-accent: #4f9fe5;
}

.nsb-balloon--character-novel .nsb-balloon__avatar {
	border-color: #4f9fe5;
	box-shadow: 0 2px 8px rgba(79, 159, 229, .20);
}

/* ルモ: ピンクのリング + 淡いピンクの吹き出し */
.nsb-balloon--character-rumo {
	--nsb-bg: #fff1f5;
	--nsb-border: #efb1c3;
	--nsb-accent: #e9789b;
}

.nsb-balloon--character-rumo .nsb-balloon__avatar {
	border-color: #e9789b;
	box-shadow: 0 2px 8px rgba(233, 120, 155, .20);
}

/* ナビ: 現行の白いリング + 白い吹き出し */
.nsb-balloon--character-navi {
	--nsb-bg: #ffffff;
	--nsb-border: #d9e2ec;
	--nsb-accent: #2f6fb3;
}

.nsb-balloon--character-navi .nsb-balloon__avatar {
	border-color: #ffffff;
}

/* カスタムキャラクターは従来デザインを維持 */
.nsb-balloon--character-custom .nsb-balloon__avatar {
	border-color: #ffffff;
}

@media (max-width: 640px) {
	.nsb-balloon {
		gap: 12px;
		margin: 1.4em 0;
	}

	.nsb-balloon__person {
		flex-basis: 74px;
		width: 74px;
	}

	.nsb-balloon__avatar {
		width: 66px;
		height: 66px;
	}

	.nsb-balloon__initial {
		font-size: 22px;
	}


	.nsb-balloon__body {
		max-width: calc(100% - 86px);
		padding: 12px 13px;
		border-radius: 12px;
	}

	.nsb-balloon__body::before {
		top: 23px;
	}

	.nsb-balloon__body::after {
		top: 24px !important;
	}
}