@layer bt-facebook-conversations {
	.bt-facebook-conversation {
		--bt-facebook-line: color-mix(in oklch, var(--wp--preset--color--contrast) 14%, var(--wp--preset--color--canvas));
		--bt-facebook-blue: oklch(60% 0.22 258);
		--bt-facebook-action: color-mix(in oklch, var(--wp--preset--color--contrast) 56%, var(--wp--preset--color--canvas));
		container-type: inline-size;
		margin-block-start: var(--wp--preset--spacing--70);
		padding-block: clamp(2.25rem, 7cqi, 4rem);
		border-block: 1px solid color-mix(in oklch, var(--wp--preset--color--accent) 24%, transparent);
		content-visibility: auto;
		contain-intrinsic-size: auto 64rem;
	}

	.bt-facebook-conversation__header {
		max-inline-size: 38rem;
		margin-inline: auto;
		text-align: center;
	}

	.bt-facebook-conversation__header h2 {
		margin-block: 0.35rem 0.75rem;
		font-family: var(--wp--preset--font-family--display);
		font-size: clamp(1.8rem, 7cqi, 2.8rem);
		font-weight: 400;
		line-height: 1.2;
		text-wrap: balance;
	}

	.bt-facebook-conversation__header > :last-child {
		margin-block-end: 0;
		color: var(--wp--preset--color--muted);
		line-height: 1.55;
		text-wrap: pretty;
	}

	.bt-facebook-conversation__header::after {
		content: "";
		display: block;
		inline-size: 1px;
		block-size: clamp(1.5rem, 3.5cqi, 2.25rem);
		margin: 1.15rem auto 0;
		background: color-mix(in oklch, var(--wp--preset--color--accent) 46%, transparent);
	}

	.bt-facebook-conversation__eyebrow {
		display: flex;
		align-items: center;
		gap: 0.38rem;
		inline-size: fit-content;
		margin: 0 auto;
		color: var(--wp--preset--color--accent);
		font-family: var(--wp--preset--font-family--ui);
		font-size: var(--wp--preset--font-size--small);
		font-weight: 700;
		letter-spacing: 0.1em;
		line-height: 1.3;
		text-transform: uppercase;
	}

	.bt-facebook-mark {
		inline-size: 0.9rem;
		block-size: 0.9rem;
		fill: var(--bt-facebook-blue);
	}

	.bt-facebook-conversation__body {
		display: grid;
		align-items: start;
		gap: clamp(1.75rem, 5cqi, 3.5rem);
		margin-block-start: 0.85rem;
	}

	.bt-facebook-conversation__panel-label {
		display: flex;
		align-items: center;
		gap: 0.7rem;
		margin: 0 0 0.85rem;
		color: var(--wp--preset--color--accent);
		font-family: var(--wp--preset--font-family--ui);
		font-size: var(--wp--preset--font-size--small);
		font-weight: 700;
		letter-spacing: 0.1em;
		line-height: 1.3;
		text-transform: uppercase;
	}

	.bt-facebook-conversation__panel-label::after {
		content: "";
		flex: 1;
		block-size: 1px;
		background: var(--bt-facebook-line);
	}

	.bt-facebook-conversation__embed {
		inline-size: min(100%, 16.6875rem);
		margin: 0 auto;
	}

	.bt-facebook-conversation__embed--post {
		inline-size: min(100%, 31.25rem);
	}

	.bt-facebook-conversation__frame {
		display: block;
		inline-size: 100%;
		block-size: auto;
		aspect-ratio: var(--bt-facebook-frame-ratio);
		border: 0;
		background: var(--wp--preset--color--base);
	}

	.bt-facebook-conversation__discussion {
		inline-size: 100%;
		max-inline-size: 42rem;
		margin-inline: auto;
	}

	.bt-facebook-conversation__thread {
		display: grid;
		gap: clamp(0.75rem, 2.5cqi, 1.15rem);
		max-inline-size: none;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.bt-facebook-conversation__thread .bt-facebook-conversation__thread {
		gap: 0.65rem;
		max-inline-size: none;
		margin-block-start: 0.65rem;
		padding-inline-start: clamp(0.85rem, 4cqi, 1.5rem);
		border-inline-start: 1px solid var(--bt-facebook-line);
	}

	.bt-facebook-conversation__thread > li {
		min-inline-size: 0;
	}

	.bt-facebook-conversation__thread[data-depth="3"] .bt-facebook-conversation__thread {
		padding-inline-start: 0;
		border-inline-start: 0;
	}

	.bt-facebook-comment {
		display: grid;
		grid-template-columns: 2.25rem minmax(0, 1fr);
		gap: 0.75rem;
		margin: 0;
		padding-block: 0.5rem;
	}

	.bt-facebook-comment:not(:has(> .bt-facebook-comment__avatar)) {
		grid-template-columns: minmax(0, 1fr);
	}

	.bt-facebook-comment__avatar {
		inline-size: 2.25rem;
		block-size: 2.25rem;
		border-radius: 50%;
		object-fit: cover;
	}

	.bt-facebook-comment__body { min-inline-size: 0; }

	.bt-facebook-comment__identity {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0.3rem 0.6rem;
		font-family: var(--wp--preset--font-family--ui);
		font-size: 1rem;
		font-weight: 700;
		line-height: 1.4;
	}

	.bt-facebook-comment__date {
		color: var(--wp--preset--color--muted);
		font-size: 0.85rem;
		font-weight: 400;
	}

	.bt-facebook-comment__attachments {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		margin-block-start: 0.65rem;
	}

	.bt-facebook-comment__attachments img {
		display: block;
		max-inline-size: 100%;
		inline-size: auto;
		max-block-size: 16rem;
		border-radius: 0.65rem;
	}

	.bt-facebook-comment__attachments a { max-inline-size: 100%; }

	.bt-facebook-conversation__thread .bt-facebook-conversation__thread .bt-facebook-comment {
		border-inline-start: 0;
	}

	.bt-facebook-comment__content {
		max-inline-size: 56ch;
		margin: 0;
		font-family: var(--wp--preset--font-family--ui);
		font-size: 1.0625rem;
		line-height: 1.5;
		overflow-wrap: anywhere;
		white-space: pre-wrap;
		text-wrap: pretty;
	}

	.bt-facebook-comment__meta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		gap: 0.4rem 0.85rem;
		margin-block: 0.3rem -0.55rem;
		color: var(--bt-facebook-action);
		font-family: var(--wp--preset--font-family--ui);
		font-size: 0.78rem;
		font-variant-numeric: tabular-nums;
		letter-spacing: 0.035em;
		line-height: 1.2;
	}

	.bt-facebook-comment__details,
	.bt-facebook-comment__reactions {
		display: inline-flex;
		align-items: center;
		gap: 0.65rem;
	}

	.bt-facebook-comment__reactions {
		gap: 0.25rem;
	}

	.bt-facebook-comment__engagement {
		display: flex;
		gap: 0.1rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.bt-facebook-comment__action {
		display: grid;
		place-items: center;
		inline-size: 2.75rem;
		block-size: 2.75rem;
		padding: 0.75rem;
		border: 1px solid transparent;
		border-radius: 50%;
		color: var(--bt-facebook-action);
		text-decoration: none;
		touch-action: manipulation;
		transition: background-color 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out;
	}

	.bt-facebook-comment__action:is(:hover, :focus-visible) {
		border-color: color-mix(in oklch, var(--bt-facebook-blue) 38%, transparent);
		background: color-mix(in oklch, var(--bt-facebook-blue) 9%, transparent);
		color: var(--bt-facebook-blue);
	}

	.bt-facebook-comment__action svg {
		display: block;
		inline-size: 100%;
		block-size: 100%;
		fill: currentColor;
	}

	.bt-facebook-comment__like-mark {
		inline-size: 0.88rem;
		block-size: 0.88rem;
		fill: var(--bt-facebook-blue);
	}

	.bt-facebook-comment__meta data {
		color: inherit;
	}

	.bt-facebook-conversation__unavailable {
		max-inline-size: 42rem;
		margin: var(--wp--preset--spacing--50) auto 0;
		padding: var(--wp--preset--spacing--40);
		border: 1px solid var(--bt-facebook-line);
		background: color-mix(in oklch, var(--wp--preset--color--base) 72%, var(--wp--preset--color--canvas));
		text-align: center;
	}

	.bt-facebook-conversation__actions {
		display: flex;
		justify-content: center;
		margin-block-start: clamp(1.25rem, 3cqi, 2rem);
	}

	.bt-facebook-conversation__join {
		display: inline-grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		justify-content: center;
		gap: 0.75rem;
		min-block-size: 2.75rem;
		padding-block: 0.7rem;
		padding-inline: 1.15rem;
		border: 1px solid var(--wp--preset--color--link);
		background: transparent;
		color: var(--wp--preset--color--link);
		font-family: var(--wp--preset--font-family--ui);
		font-size: 0.95rem;
		font-weight: 700;
		line-height: 1.3;
		text-align: center;
		text-decoration: none;
		touch-action: manipulation;
		transition: background-color 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out;
	}

	.bt-facebook-conversation__join:is(:hover, :focus-visible) {
		background: color-mix(in oklch, var(--wp--preset--color--link) 7%, transparent);
	}

	.bt-facebook-conversation__join .bt-facebook-mark {
		inline-size: 1.15rem;
		block-size: 1.15rem;
		fill: #1877f2;
	}

	.bt-facebook-conversation__join-arrow {
		inline-size: 1.5rem;
		block-size: 1.5rem;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.5;
	}

	.bt-facebook-conversation :where(a):focus-visible {
		outline: 2px solid var(--wp--preset--color--accent);
		outline-offset: 3px;
	}

	@container (inline-size < 32rem) {
		.bt-facebook-conversation__thread .bt-facebook-conversation__thread {
			padding-inline-start: 0.75rem;
		}

		.bt-facebook-conversation__join {
			inline-size: 100%;
		}
	}

	@container (inline-size >= 44rem) {
		.bt-facebook-conversation__body--reel {
			grid-template-columns: 16.6875rem minmax(0, 1fr);
		}

		.bt-facebook-conversation__body--reel .bt-facebook-conversation__embed,
		.bt-facebook-conversation__body--reel .bt-facebook-conversation__discussion {
			margin-inline: 0;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.bt-facebook-comment__action,
		.bt-facebook-conversation__join {
			transition: none;
		}
	}
}

/*
 * Olga's article rhythm is unlayered, so this integration exception must be
 * unlayered too. Keep the conversation title compact without changing other
 * article headings.
 */
.wp-block-post-content .bt-facebook-conversation__header > h2 {
	margin-block: 0.35rem 0.75rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.8rem, 7cqi, 2.8rem);
	font-weight: 400;
	line-height: 1.2;
	text-wrap: balance;
}

.wp-block-post-content .bt-facebook-conversation__embed {
	margin-block: 0;
	margin-inline: auto;
}

.wp-block-post-content .bt-facebook-conversation__discussion > h3 {
	margin-block: 0 0.85rem;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.3;
}

/* The theme's unlayered article link styles must not recolor author names. */
.wp-block-post-content .bt-facebook-comment__identity > a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.wp-block-post-content .bt-facebook-comment__identity > a:hover {
	text-decoration: underline;
}
.wp-block-post-content .bt-facebook-comment__body > p {
	margin-block: 0.15rem 0;
}

/* Inline mentions retain the article link color, with a distinct name weight. */
@layer bt-facebook-conversations {
	.bt-facebook-comment__mention {
		font-weight: 700;
		text-decoration: underline;
		text-underline-offset: 0.15em;
	}
}