@layer bt-x-conversations {
	.bt-x-conversation {
		--bt-x-line: color-mix(in oklch, var(--wp--preset--color--contrast) 14%, var(--wp--preset--color--canvas));
		--bt-x-action: color-mix(in oklch, var(--wp--preset--color--contrast) 56%, var(--wp--preset--color--canvas));
		--bt-x-like: oklch(59.93% 0.2284 16.01);
		--bt-x-repost: oklch(75.49% 0.1705 158.63);
		--bt-x-verified: oklch(67% 0.17 242);
		--bt-x-verified-business: oklch(79% 0.17 89);
		--bt-x-verified-government: oklch(68% 0.03 240);
		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 48rem;
	}

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

	.bt-x-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-x-conversation__header > :last-child {
		margin-block-end: 0;
		color: var(--wp--preset--color--muted);
		line-height: 1.55;
		text-wrap: pretty;
	}

	.bt-x-conversation__eyebrow {
		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-x-conversation__eyebrow {
		display: flex;
		align-items: center;
		gap: 0.36rem;
		inline-size: fit-content;
		margin: 0 auto;
		color: var(--wp--preset--color--accent);
	}

	.bt-x-conversation__eyebrow-logo {
		inline-size: 0.68rem;
		block-size: auto;
		fill: currentColor;
	}

	.bt-x-post {
		position: relative;
		min-inline-size: 0;
	}

	.bt-x-post--root {
		max-inline-size: 42rem;
		margin: var(--wp--preset--spacing--60) auto 0;
		padding-block: 0.9rem 1rem;
		border-block-end: 1px solid var(--bt-x-line);
	}

	.bt-x-post--reply {
		padding-block: 0.8rem;
	}

	.bt-x-post__header {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		gap: 0.65rem;
	}

	.bt-x-post__avatar-link,
	.bt-x-post__avatar {
		display: block;
		inline-size: 2.25rem;
		block-size: 2.25rem;
	}

	.bt-x-post__avatar {
		border-radius: 50%;
		object-fit: cover;
	}

	.bt-x-post__identity {
		display: flex;
		align-items: baseline;
		gap: 0.25rem;
		min-inline-size: 0;
		margin: 0;
		overflow: hidden;
		font-family: var(--wp--preset--font-family--ui);
		font-size: 0.875rem;
		line-height: 1.2;
		white-space: nowrap;
	}

	.bt-x-post__name {
		flex: 0 1 auto;
		min-inline-size: 0;
		overflow: hidden;
		color: var(--wp--preset--color--contrast);
		text-decoration: none;
		text-overflow: ellipsis;
	}

	.bt-x-post__identity strong {
		font-weight: 700;
	}

	.bt-x-post__verified {
		flex: 0 0 auto;
		display: inline-flex;
		inline-size: 1rem;
		block-size: 1rem;
		margin-inline-start: 0.2rem;
		color: var(--bt-x-verified);
		vertical-align: 0.1em;
	}

	.bt-x-post__verified--business {
		color: var(--bt-x-verified-business);
	}

	.bt-x-post__verified--government {
		color: var(--bt-x-verified-government);
	}

	.bt-x-post__verified svg {
		inline-size: 100%;
		block-size: 100%;
		fill: currentColor;
	}

	.bt-x-post__handle {
		flex: 0 1 auto;
		min-inline-size: 0;
		overflow: hidden;
		color: var(--wp--preset--color--muted);
		text-decoration: none;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.bt-x-post__separator,
	.bt-x-post__timestamp,
	.bt-x-post__edited {
		flex: 0 0 auto;
		color: var(--wp--preset--color--muted);
	}

	.bt-x-post__timestamp {
		text-decoration: none;
	}

	.bt-x-post__x-link {
		display: grid;
		place-items: center;
		inline-size: 2.75rem;
		block-size: 2.75rem;
		color: var(--wp--preset--color--contrast);
	}

	.bt-x-post__x-link::after {
		position: absolute;
		inset: 0;
		content: "";
	}

	.bt-x-post__x-link img {
		inline-size: 0.9rem;
		block-size: auto;
	}

	.bt-x-post__content {
		margin-block: 0.45rem 0;
		margin-inline-start: 2.9rem;
		font-family: var(--wp--preset--font-family--body);
		font-size: clamp(1rem, 0.98rem + 0.12cqi, 1.04rem);
		line-height: 1.45;
		overflow-wrap: anywhere;
		white-space: pre-wrap;
		text-wrap: pretty;
	}

	.bt-x-post__content a {
		color: var(--wp--preset--color--link);
		text-decoration-thickness: 1px;
		text-underline-offset: 0.16em;
	}

	.bt-x-post__meta {
		display: flex;
		align-items: center;
		justify-content: space-between;
		inline-size: min(100%, 15rem);
		margin-block-start: 0.25rem;
		margin-inline-start: 2.9rem;
		font-family: var(--wp--preset--font-family--ui);
		font-size: 0.8rem;
		line-height: 1.35;
	}

	.bt-x-post__action {
		display: grid;
		place-items: center;
		inline-size: 2.75rem;
		min-block-size: 2.75rem;
		text-decoration: none;
		touch-action: manipulation;
	}

	.bt-x-post__action--reply:hover svg {
		fill: var(--wp--preset--color--accent);
	}

	.bt-x-post__action--repost:hover svg {
		fill: var(--bt-x-repost);
	}

	.bt-x-post__action--like:hover svg {
		fill: var(--bt-x-like);
	}

	.bt-x-post__action--like:has(.bt-x-post__action-count) {
		grid-auto-flow: column;
		gap: 0.25rem;
		inline-size: auto;
		padding-inline: 0.65rem;
	}

	.bt-x-post__action--like:has(.bt-x-post__action-count) svg {
		fill: var(--bt-x-like);
	}

	.bt-x-post__action-count {
		color: var(--bt-x-like);
		font-variant-numeric: tabular-nums;
		transition: color 180ms ease-out;
	}

	.bt-x-post__action--like:hover .bt-x-post__action-count {
		color: var(--bt-x-like);
	}

	.bt-x-post__action:active {
		opacity: 0.5;
	}

	.bt-x-post :where(.bt-x-post__reply-icon, .bt-x-post__repost-icon, .bt-x-post__like-icon) {
		inline-size: 1.15rem;
		block-size: 1.15rem;
		fill: var(--bt-x-action);
		transition: fill 180ms ease-out;
	}

	.bt-x-post :where(.bt-x-post__avatar-link, .bt-x-post__identity a, .bt-x-post__content a, .bt-x-post__meta a) {
		position: relative;
		z-index: 1;
	}

	.bt-x-conversation__thread {
		max-inline-size: 42rem;
		margin: 0 auto;
		padding: 0;
		list-style: none;
	}

	.bt-x-conversation__thread > li {
		position: relative;
		min-inline-size: 0;
	}

	.bt-x-conversation__thread[data-depth="0"] > li + li {
		border-block-start: 1px solid var(--bt-x-line);
	}

	.bt-x-conversation__thread .bt-x-conversation__thread {
		max-inline-size: none;
		margin: 0;
		padding: 0;
	}

	.bt-x-conversation__thread .bt-x-conversation__thread > li > .bt-x-post::before,
	.bt-x-conversation__thread > li:has(> .bt-x-conversation__thread) > .bt-x-post::after {
		position: absolute;
		inset-inline-start: 1.125rem;
		border-inline-start: 1px solid var(--bt-x-line);
		content: "";
	}

	.bt-x-conversation__thread .bt-x-conversation__thread > li > .bt-x-post::before {
		inset-block-start: 0;
		block-size: 1.925rem;
	}

	.bt-x-conversation__thread > li:has(> .bt-x-conversation__thread) > .bt-x-post::after {
		inset-block: 3.05rem 0;
	}

	.bt-x-conversation__empty,
	.bt-x-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-x-line);
		background: color-mix(in oklch, var(--wp--preset--color--base) 72%, var(--wp--preset--color--canvas));
		text-align: center;
	}

	.bt-x-conversation__actions {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--wp--preset--spacing--30);
		margin-block-start: var(--wp--preset--spacing--60);
	}

	.bt-x-conversation__actions a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-block-size: 2.75rem;
		padding-inline: 1.15rem;
		border: 1px solid var(--wp--preset--color--contrast);
		font-family: var(--wp--preset--font-family--ui);
		font-size: 0.95rem;
		font-weight: 700;
		line-height: 1;
		text-decoration: none;
		transition: background-color 180ms ease-out, color 180ms ease-out, border-color 180ms ease-out;
	}

	.bt-x-conversation__reply {
		gap: 0.42rem;
		background: var(--wp--preset--color--contrast);
		color: var(--wp--preset--color--base);
	}

	.bt-x-conversation__reply-logo {
		inline-size: 0.72rem;
		block-size: auto;
		filter: invert(1);
	}

	.bt-x-conversation__view {
		background: transparent;
		color: var(--wp--preset--color--contrast);
	}

	.bt-x-conversation__actions a:hover {
		border-color: var(--wp--preset--color--accent);
		background: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--base);
	}

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

	@container (inline-size < 32rem) {
		.bt-x-post--root {
			padding-block: 0.8rem 0.9rem;
		}

		.bt-x-post__header {
			gap: 0.55rem;
		}

		.bt-x-post__identity {
			font-size: 0.82rem;
		}

		.bt-x-conversation__actions {
			align-items: stretch;
			flex-direction: column;
		}

		.bt-x-conversation__actions a {
			inline-size: 100%;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.bt-x-post__action svg,
		.bt-x-conversation__actions a {
			transition: none;
		}
	}
}