:root {
	/* The desired visual space from the tip of the tail to the next bubble below it */
	--chat-vertical-gap: 2.5rem;
	--chat-tail-height: 1.375rem;
}

.chat-bubble {
	--info-bg: var(--surface-card);
	--info-bubble-color: var(--surface-inverse);
	--info-text-color: var(--text-secondary);
	background: var(--info-bg);
	color: var(--info-text-color);
	padding: 1.25rem 1.25rem 1.75rem 1.25rem;
	position: relative;
	width: 100%;
	box-sizing: border-box;
	/* Remove all individual margins to ensure the row-based grid controls gaps */
}

/* Alignment */
.chat-bubble--left {
	margin-right: auto;
}

.chat-bubble--right {
	margin-left: auto;
}

/* Tail for Left Bubble (bottom-left) */
.chat-bubble--left:after {
	content: '';
	position: absolute;
	left: 2rem;
	bottom: auto;
	top: calc(100% - 0.4375rem);
	width: 2.25rem;
	height: 1.5rem;
	background-color: var(--info-bg);
	-webkit-mask: url("data:image/svg+xml,%3Csvg width='36' height='21' viewBox='0 0 36 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M36 0H3.8147e-06V16.5259C3.8147e-06 19.7207 3.56059 21.6263 6.2188 19.8541L36 0Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg width='36' height='21' viewBox='0 0 36 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M36 0H3.8147e-06V16.5259C3.8147e-06 19.7207 3.56059 21.6263 6.2188 19.8541L36 0Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Tail for Right Bubble (bottom-right) */
.chat-bubble--right:after {
	content: '';
	position: absolute;
	right: 2rem;
	bottom: auto;
	top: calc(100% - 0.4375rem);
	width: 2.25rem;
	height: 1.5rem;
	background-color: var(--info-bg);
	-webkit-mask: url("data:image/svg+xml,%3Csvg width='36' height='21' viewBox='0 0 36 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H36V16.5259C36 19.7207 32.4394 21.6263 29.7812 19.8541L0 0Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg width='36' height='21' viewBox='0 0 36 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H36V16.5259C36 19.7207 32.4394 21.6263 29.7812 19.8541L0 0Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
}
.chat-bubble__content.body-m{
	line-height: 1.3;
	margin-bottom: 0;
	letter-spacing: -1%;
}

/* Desktop layout */
@media only screen and (min-width: 768px) {
	.chat-bubble {
		padding: 2rem 2rem 2.5rem 2rem;
		max-width: calc(100% - 1.75rem);
		margin-bottom: 2.5rem;
		min-height: 0;
		height: auto;
	}
	.parent-chat .chat-bubble {
		margin-bottom: 1.75rem;
	}
}
@media only screen and (max-width: 1023px) {
	.parent-chat .chat-bubble.first-bubble {
		margin-left: 0;
	}
	.parent-chat {
		margin-right: -1rem;
		margin-left: -1rem;
	}
}
/* Mobile layout */
@media only screen and (max-width: 767px) {
	.chat-bubble {
		margin-bottom: 1.25rem;
		padding: 1.5rem;
		padding-bottom: 2rem;
		max-width: calc(100% - 4rem);
	}
	.chat-bubble--right:after,
	.chat-bubble--left:after{
		bottom: auto;
		top: calc(100% - 0.3125rem);
	}
	.parent-chat .chat-bubble {
		max-width: 100%;
	}
}

/* Variations */
.chat-bubble--white {
	--info-bg: var(--color-surface-100);
	--info-text-color: var(--text-secondary);
}

.chat-bubble--fuchsia,
.chat-bubble--accent {
	--info-bg: var(--accent-subtle);
	--info-bubble-color: var(--accent-default);
	--info-text-color: var(--accent-text-secondary);
}

.chat-bubble--apricot {
	--info-bg: var(--color-apricot-700);
	--info-text-color: var(--color-surface-100);
}

.chat-bubble--yellow {
	--info-bg: var(--color-yellow-800);
	--info-text-color: var(--color-surface-100);
}

.chat-bubble--fuchsia.colorful,
.chat-bubble--accent.colorful {
	--info-bg: var(--color-fuchsia-200);
	--info-text-color: var(--color-fuchsia-900);
}

.chat-bubble--azure {
	--info-bg: var(--color-azure-700);
	--info-text-color: var(--color-surface-100);
}
.chat-bubble--blue {
	--info-bg: var(--color-blue-700);
	--info-text-color: var(--color-surface-100);
}
.chat-bubble--green {
	--info-bg: var(--color-green-700);
	--info-text-color: var(--color-surface-100);
}
.chat-bubble--flamingo {
	--info-bg: var(--color-flamingo-700);
	--info-text-color: var(--color-surface-100);
}