/* "Meldungen" in the thread pane (pc-chat-moderation-feed): report cards, no composer. */

.rd-messenger-report-feed {
	display: flex;
	flex-direction: column;
	gap: var(--uui-spacing-lg);
	overflow-y: auto;
}

/* anchored to the bottom like a thread; an auto margin (not justify-content: flex-end) keeps the
   oldest cards scrollable once the feed overflows */
.rd-messenger-report-feed > :first-child {
	margin-block-start: auto;
}

.rd-messenger-report-feed__list {
	display: grid;
	gap: var(--uui-spacing-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rd-messenger-report-feed > uui-button {
	align-self: flex-start;
}

.rd-messenger-report-feed__skeleton {
	display: grid;
	gap: var(--uui-spacing-lg);
	max-inline-size: var(--uui-width-lg);
}

.rd-messenger-report-feed__skeleton .rd-skeleton-block {
	min-height: var(--uui-spacing-10xl);
}

.rd-messenger-report-feed__error {
	display: grid;
	justify-items: start;
	gap: var(--uui-spacing-md);
	color: var(--uui-text-error-primary);
}

.rd-messenger-report-card {
	display: grid;
	justify-items: start;
	gap: var(--uui-spacing-md);
	max-inline-size: var(--uui-width-lg);
	padding: var(--uui-spacing-xl);
	background: var(--uui-bg-primary);
	border: 1px solid var(--uui-border-primary);
	border-radius: var(--uui-radius-lg);
	overflow-wrap: anywhere;
}

/* decided reports step back; the status line keeps the decision on record */
.rd-messenger-report-card--decided {
	opacity: 0.75;
}

.rd-messenger-report-card__head {
	display: grid;
	gap: var(--uui-spacing-xxs);
}

.rd-messenger-report-card__head strong {
	color: var(--uui-text-primary);
	font-size: var(--uui-text-sm-font-size);
	line-height: var(--uui-text-sm-line-height);
	font-weight: var(--uui-font-weight-semibold);
}

.rd-messenger-report-card__head span,
.rd-messenger-report-card__decision {
	color: var(--uui-text-tertiary);
	font-size: var(--uui-text-xs-font-size);
	line-height: var(--uui-text-xs-line-height);
}

.rd-messenger-report-card__quote {
	display: grid;
	gap: var(--uui-spacing-xxs);
	inline-size: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: var(--uui-spacing-md) var(--uui-spacing-lg);
	background: var(--uui-bg-secondary);
	border-radius: var(--uui-radius-md);
}

.rd-messenger-report-card__quote span {
	color: var(--uui-text-tertiary);
	font-size: var(--uui-text-xs-font-size);
	line-height: var(--uui-text-xs-line-height);
}

.rd-messenger-report-card__quote p {
	margin: 0;
	color: var(--uui-text-secondary);
	font-size: var(--uui-text-sm-font-size);
	line-height: var(--uui-text-sm-line-height);
	white-space: pre-wrap;
}

.rd-messenger-report-card__decision {
	margin: 0;
	font-weight: var(--uui-font-weight-semibold);
}

.rd-messenger-report-feed__footer {
	grid-row: 3;
	margin: 0;
	padding: var(--uui-spacing-xl) var(--uui-spacing-3xl) var(--uui-spacing-2xl);
	background: var(--uui-bg-primary);
	border-top: 1px solid var(--uui-border-secondary);
	color: var(--uui-text-tertiary);
	font-size: var(--uui-text-sm-font-size);
	line-height: var(--uui-text-sm-line-height);
	text-align: center;
}