/* Read details (Figma 19/20) and unread reminder (Figma 21) of the Messenger.
   The side panel reuses the frame of the people panel (ChatAudience.css). */

.rd-chat-receipt-search,
.rd-chat-receipt-search .uui-input-field__root,
.rd-chat-receipt-search .uui-input-field__input {
	display: block;
	inline-size: 100% !important;
}

.rd-chat-receipt .rd-chat-receipt-search {
	margin-bottom: var(--uui-spacing-2xl);
}

.rd-chat-receipt-section + .rd-chat-receipt-section {
	margin-top: var(--uui-spacing-2xl);
}

.rd-chat-receipt-heading {
	display: flex;
	align-items: center;
	gap: var(--uui-spacing-xs);
}

.rd-chat-receipt-heading .uui-icon {
	--uui-icon-size: 14px;
}

.rd-chat-receipt-person {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
}

.rd-chat-receipt-person > div > span {
	white-space: normal;
}

/* large audience dialog */

.rd-chat-receipt-dialog {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--uui-spacing-xl);
	min-inline-size: 0;
}

.rd-chat-receipt-dialog > * {
	min-inline-size: 0;
}

/* Figma draws the tab rail at its 1280px artboard width; in the dialog it takes the body width */
.rd-chat-receipt-dialog .uui-tabs__root {
	inline-size: 100% !important;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.rd-chat-receipt-dialog__subtitle {
	margin: 0;
	font-size: var(--uui-text-sm-font-size);
	line-height: var(--uui-text-sm-line-height);
	color: var(--uui-text-tertiary);
}

.rd-chat-receipt-dialog__progress {
	display: grid;
	gap: var(--uui-spacing-md);
}

.rd-chat-receipt-dialog__progress > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--uui-spacing-md);
}

.rd-chat-receipt-dialog__progress strong {
	font-size: var(--uui-text-lg-font-size);
	line-height: var(--uui-text-lg-line-height);
	font-weight: var(--uui-font-weight-semibold);
	color: var(--uui-text-primary);
}

.rd-chat-receipt-dialog__progress span {
	font-size: var(--uui-text-xs-font-size);
	color: var(--uui-text-tertiary);
}

.rd-chat-receipt-dialog__progress uui-progress-bar {
	display: block;
}

.rd-chat-receipt-dialog__progress .uui-progress-bar__root {
	inline-size: 100% !important;
}

.rd-chat-receipt-groups,
.rd-chat-receipt-list {
	display: grid;
	gap: 1px;
	max-block-size: 40vh;
	overflow-y: auto;
}

.rd-chat-receipt-groups h3 {
	margin: 0;
	padding: var(--uui-spacing-sm) 0 var(--uui-spacing-xxs);
	font-size: var(--uui-text-xs-font-size);
	line-height: var(--uui-text-sm-line-height);
	font-weight: var(--uui-font-weight-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--uui-text-tertiary);
}

.rd-chat-receipt-group__row {
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--uui-spacing-md);
	inline-size: 100%;
	padding: var(--uui-spacing-md);
	border: 0;
	border-radius: var(--uui-radius-sm);
	background: none;
	color: var(--uui-text-tertiary);
	text-align: left;
	cursor: pointer;
}

.rd-chat-receipt-group__row:hover {
	background: var(--uui-bg-primary_hover);
}

.rd-chat-receipt-group__row:focus-visible {
	outline: none;
	box-shadow: var(--uui-focus-ring);
}

.rd-chat-receipt-group__label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--uui-text-sm-font-size);
	line-height: var(--uui-text-sm-line-height);
	font-weight: var(--uui-font-weight-semibold);
}

.rd-chat-receipt-group__people {
	padding-inline-start: var(--uui-spacing-4xl);
}

.rd-chat-receipt-empty {
	margin: 0;
	padding: var(--uui-spacing-md) 0;
	font-size: var(--uui-text-sm-font-size);
	color: var(--uui-text-tertiary);
}

.rd-chat-receipt-groups > uui-button,
.rd-chat-receipt-list > uui-button {
	justify-self: start;
	margin-top: var(--uui-spacing-md);
}

/* reminder confirmation */

.rd-chat-reminder {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--uui-spacing-xl);
	min-inline-size: 0;
	font-size: var(--uui-text-sm-font-size);
	line-height: var(--uui-text-sm-line-height);
	color: var(--uui-text-secondary);
}

.rd-chat-reminder p {
	margin: 0;
}

.rd-chat-reminder__subtitle {
	color: var(--uui-text-tertiary);
}

.rd-chat-reminder__preview {
	display: grid;
	gap: var(--uui-spacing-sm);
	padding: var(--uui-spacing-lg) var(--uui-spacing-xl);
	border-radius: var(--uui-radius-md);
	background: var(--uui-bg-secondary);
}

.rd-chat-reminder__preview-label {
	font-size: var(--uui-text-xs-font-size);
	font-weight: var(--uui-font-weight-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--uui-text-tertiary);
}

.rd-chat-reminder__preview strong {
	font-weight: var(--uui-font-weight-semibold);
	color: var(--uui-text-primary);
}

.rd-chat-reminder uui-checkbox .uui-checkbox__root,
.rd-chat-reminder uui-checkbox .uui-checkbox__text-wrap {
	inline-size: 100% !important;
	min-inline-size: 0;
}

.rd-chat-reminder__window {
	font-size: var(--uui-text-xs-font-size);
	color: var(--uui-text-tertiary);
}

/* without the reminder feature "Schließen" is the only action */
.uui_ground .rd-chat-receipt-dialog .rd-chatnew-actions:has(> uui-button:only-child) {
	grid-template-columns: minmax(0, 1fr);
}