/* "Neue Unterhaltung" dialog of the unified legacy chat (pc-chat-new-conversation):
   one modal, two screens — contacts (search + "Neue Gruppe" + list) and the group form.
   Rows reuse the pchat_overview_row_icon avatar so contacts look like the list rows. */

/* the modal's own min-width (800px) sizes screen 1; the user selector's fixed 1200px columns widen screen 2.
   Flex chain modal → mid → screen so the screen takes exactly the height the modal has left
   (title, close bar) instead of guessing it from 80vh — otherwise the sticky Erstellen bar is clipped. */
.rd-chatnew-dialog .modal_dialog_mid {
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 0;
}

.rd-chatnew-dialog .modal_dialog_top_title {
	padding: 0 var(--rd-spacing-md) var(--rd-spacing-sm);
	font-size: var(--rd-fontsize-6);
}

/* the dialog owns its buttons — hide the empty modal button bar */
.rd-chatnew-dialog .modal_dialog_bottom {
	display: none;
}

/* the custom element sits between the mid and .rd-chatnew — it must be the flex item, not an inline box */
.rd-chatnew-dialog pc-chat-new-conversation,
.rd-chatnew {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

.rd-chatnew-list,
.rd-chatnew-groupscreen {
	min-height: 0;
}

/* screen 1 keeps a comfortable height even with few contacts */
.rd-chatnew:not(.rd-chatnew-groupscreen) {
	min-height: 24em;
}

.rd-chatnew-search {
	padding: var(--rd-spacing-sm) var(--rd-spacing-md);
	border-bottom: var(--rd-borderwidth-border-default) solid var(--cl-light-grey);
}

.rd-chatnew-search input {
	width: 100%;
	box-sizing: border-box;
}

.rd-chatnew-list {
	overflow-y: auto;
	padding: var(--rd-spacing-sm) 0;
}

.rd-chatnew-row {
	display: flex;
	align-items: center;
	gap: var(--rd-spacing-sm);
	padding: var(--rd-spacing-x-sm) var(--rd-spacing-md);
	color: var(--rd-font-dark);
	text-decoration: none;
}

.rd-chatnew-row:hover,
.rd-chatnew-row:focus-visible {
	background: var(--cl-light-blue);
	outline: none;
}

.rd-chatnew-row .pchat_overview_row_iconwrap {
	flex: 0 0 auto;
	width: auto;
}

.rd-chatnew-row-name {
	min-width: 0;
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: var(--rd-fontweights-open-sans-1);
}

.rd-chatnew-row-action .rd-chatnew-row-name {
	color: var(--rd-secondary-active);
}

.rd-chatnew-section {
	padding: var(--rd-spacing-md) var(--rd-spacing-md) var(--rd-spacing-x-sm);
	font-size: var(--rd-fontsize-3);
	font-weight: var(--rd-fontweights-open-sans-1);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cl-blue-grey);
}

.rd-chatnew-empty,
.rd-chatnew-error {
	padding: var(--rd-spacing-lg) var(--rd-spacing-md);
	text-align: center;
	color: var(--cl-blue-grey);
}

.rd-chatnew-error {
	padding-block: var(--rd-spacing-sm);
	color: var(--rd-primary-active);
}

/* screen 2 */
.rd-chatnew-groupscreen {
	padding: 0 var(--rd-spacing-md) var(--rd-spacing-md);
	overflow-y: auto;
}

.rd-chatnew-header {
	display: flex;
	align-items: center;
	gap: var(--rd-spacing-sm);
	padding: var(--rd-spacing-sm) 0;
}

.rd-chatnew-back {
	width: 24px;
	height: 24px;
}

.rd-chatnew-back::before {
	background-color: var(--rd-secondary-active);
}

.rd-chatnew-title {
	font-weight: var(--rd-fontweights-open-sans-1);
	font-size: var(--rd-fontsize-6);
}

/* the embedded pc-form-fields brings its dialog padding — align its fields with the header instead */
.rd-chatnew-groupscreen .formfields {
	border: none;
	padding: 0;
	grid-gap: 0 !important;
}

/* the form (user selector) is taller than the dialog — keep the buttons visible while it scrolls */
.rd-chatnew-actions {
	position: sticky;
	bottom: 0;
	display: flex;
	justify-content: flex-end;
	gap: var(--rd-spacing-sm);
	padding: var(--rd-spacing-md) 0 var(--rd-spacing-sm);
	background: var(--rd-font-light);
}

/* messengerV4 UUI flow */
.uui_ground pc-chat-new-conversation {
	display: block;
	width: 100%;
}

.uui_ground:has(pc-chat-new-conversation) uui-modal {
	--uui-modal-max-inline-size: var(--uui-width-lg);
}

.uui_ground:has(pc-chat-new-conversation) [data-uui-component="modal"][type="horizontal"][breakpoint="desktop"] .uui-modal__root {
	max-inline-size: var(--uui-modal-max-inline-size) !important;
}

.uui_ground:has(pc-chat-new-conversation) .uui-modal__body {
	width: 100%;
	padding-block-end: var(--uui-spacing-3xl) !important;
}

.uui_ground .rd-chatnew {
	min-height: 0;
	font-family: var(--uui-font-family);
	color: var(--uui-text-primary);
}

.uui_ground .rd-chatnew-intro {
	margin: 0 0 var(--uui-spacing-xl);
	font-size: var(--uui-text-sm-font-size);
	line-height: var(--uui-text-sm-line-height);
	color: var(--uui-text-tertiary);
}

.uui_ground .rd-chatnew-audience-grid {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	height: min(var(--uui-width-sm), calc(100dvh - var(--uui-spacing-11xl) - var(--uui-spacing-10xl)));
	min-height: min(var(--uui-width-xxs), calc(100dvh - var(--uui-spacing-11xl) - var(--uui-spacing-10xl)));
	border: 1px solid var(--uui-border-secondary);
	border-radius: var(--uui-radius-md);
	overflow: hidden;
}

.uui_ground .rd-chatnew-picker {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	padding: var(--uui-spacing-lg);
	border-right: 1px solid var(--uui-border-secondary);
}

.uui_ground .rd-chatnew-picker uui-input-field,
.uui_ground .rd-chatnew-picker .uui-input-field__root,
.uui_ground .rd-chatnew-picker .uui-input-field__input,
.uui_ground .rd-chatnew-name,
.uui_ground .rd-chatnew-name .uui-input-field__root,
.uui_ground .rd-chatnew-name .uui-input-field__input {
	inline-size: 100% !important;
}

.uui_ground .rd-chatnew-picker .uui-input-field__label-wrap {
	display: none !important;
}

.uui_ground .rd-chatnew-tabs {
	display: flex;
	gap: var(--uui-spacing-xs);
	margin-block: var(--uui-spacing-lg) var(--uui-spacing-md);
}

.uui_ground .rd-chatnew-tabs button,
.uui_ground .rd-chatnew-clear,
.uui_ground .rd-chatnew-item,
.uui_ground .rd-chatnew-type-options > button {
	font-family: inherit;
	color: inherit;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.uui_ground .rd-chatnew-tabs button {
	padding: var(--uui-spacing-md) var(--uui-spacing-lg);
	font-size: var(--uui-text-sm-font-size);
	font-weight: var(--uui-font-weight-medium);
	color: var(--uui-text-tertiary);
	border-radius: var(--uui-radius-sm);
}

.uui_ground .rd-chatnew-tabs button[aria-selected="true"] {
	color: var(--uui-text-primary);
	background: var(--uui-bg-secondary);
}

.uui_ground .rd-chatnew-items {
	min-height: 0;
	flex: 1 1 auto;
	overflow-x: hidden;
	overflow-y: auto;
}

.uui_ground .rd-chatnew-items pcu-tree-view {
	display: block;
	min-width: 0;
}

.uui_ground .rd-chatnew-items .uui-tree-view__root {
	min-width: 0;
	inline-size: 100% !important;
}

.uui_ground .rd-chatnew-item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: var(--uui-spacing-lg);
	width: 100%;
	box-sizing: border-box;
	padding: var(--uui-spacing-md);
	text-align: left;
	border-radius: var(--uui-radius-sm);
}

.uui_ground .rd-chatnew-result-section {
	margin-top: var(--uui-spacing-xl);
}

.uui_ground .rd-chatnew-result-section h3 {
	margin: 0 var(--uui-spacing-md) var(--uui-spacing-md);
	font-size: var(--uui-text-xs-font-size);
	font-weight: var(--uui-font-weight-semibold);
	line-height: var(--uui-text-xs-line-height);
	text-transform: uppercase;
	color: var(--uui-text-tertiary);
}

.uui_ground .rd-chatnew-empty {
	padding: var(--uui-spacing-lg) var(--uui-spacing-md);
	font-size: var(--uui-text-sm-font-size);
	color: var(--uui-text-tertiary);
}

.uui_ground .rd-chatnew-item:has(> uui-checkbox) {
	grid-template-columns: minmax(0, 1fr);
}

.uui_ground .rd-chatnew-item uui-checkbox,
.uui_ground .rd-chatnew-item .uui-checkbox__root {
	min-width: 0;
	inline-size: 100% !important;
}

.uui_ground .rd-chatnew-item .uui-checkbox__text-wrap {
	min-width: 0;
}

.uui_ground .rd-chatnew-item .uui-checkbox__label {
	white-space: normal;
	overflow-wrap: anywhere;
}

.uui_ground .rd-chatnew-selected > strong {
	font-size: var(--uui-text-sm-font-size);
}

.uui_ground .rd-chatnew-selected > uui-button {
	display: block;
	margin-top: var(--uui-spacing-xl);
}

.uui_ground .rd-chatnew-audience > .rd-chatnew-name {
	margin-block: 0 var(--uui-spacing-xl);
}

.uui_ground .rd-chatnew-audience:has(> .rd-chatnew-name) .rd-chatnew-audience-grid {
	max-block-size: calc(100dvh - var(--uui-spacing-11xl) - var(--uui-spacing-11xl) - var(--uui-spacing-4xl));
}

.uui_ground .rd-chatnew-checkbox-visual {
	display: grid;
	place-items: center;
	width: var(--uui-spacing-xl);
	height: var(--uui-spacing-xl);
	box-sizing: border-box;
	background: var(--uui-bg-primary);
	border: 1px solid var(--uui-border-primary);
	border-radius: var(--uui-radius-xs);
	pointer-events: none;
}

.uui_ground .rd-chatnew-checkbox-visual[data-selected="true"] {
	background: var(--uui-bg-brand-solid);
	border-color: var(--uui-bg-brand-solid);
}

.uui_ground .rd-chatnew-checkbox-visual[data-selected="true"]::before {
	width: 12px;
	height: 12px;
	content: "";
	background: var(--uui-fg-white);
	mask: var(--uui-icon-url) center / contain no-repeat;
	-webkit-mask: var(--uui-icon-url) center / contain no-repeat;
}

.uui_ground .rd-chatnew-item:hover,
.uui_ground .rd-chatnew-item--selected {
	background: var(--uui-bg-primary_hover);
}

.uui_ground .rd-chatnew-item:disabled {
	cursor: default;
}

.uui_ground .rd-chatnew-item:disabled .rd-chatnew-checkbox-visual[data-selected="true"] {
	opacity: 0.5;
}

.uui_ground .rd-chatnew-item strong,
.uui_ground .rd-chatnew-item small {
	display: block;
}

.uui_ground .rd-chatnew-item strong {
	font-size: var(--uui-text-sm-font-size);
	font-weight: var(--uui-font-weight-medium);
}

.uui_ground .rd-chatnew-audience > .rd-chatnew-items,
.uui_ground .rd-chatnew-selected > .rd-chatnew-items,
.uui_ground .rd-chatnew-audience details > .rd-chatnew-items {
	max-block-size: 14rem;
	flex: none;
}

.uui_ground .rd-chatnew-item:has(> uui-button-utility) {
	grid-template-columns: minmax(0, 1fr) auto;
}

.uui_ground .rd-chatnew-item.rd-chatnew-rule-option {
	grid-template-columns: minmax(0, 1fr) minmax(0, 7rem) auto;
}

.uui_ground .rd-chatnew-rule-option uui-toggle,
.uui_ground .rd-chatnew-rule-option .uui-toggle__root {
	min-inline-size: 0;
	inline-size: 100% !important;
}

.uui_ground .rd-chatnew-skeleton {
	block-size: 3rem;
	background: var(--uui-bg-secondary);
	border-radius: var(--uui-radius-sm);
}

.uui_ground .rd-chatnew-item > span {
	min-inline-size: 0;
	overflow-wrap: anywhere;
}

.uui_ground .rd-chatnew-item small {
	margin-top: var(--uui-spacing-xxs);
	font-size: var(--uui-text-xs-font-size);
	color: var(--uui-text-tertiary);
}

.uui_ground .rd-chatnew-selected {
	min-height: 0;
	padding: var(--uui-spacing-xl);
	background: var(--uui-bg-secondary);
	overflow-y: auto;
}

.uui_ground .rd-chatnew-selected > strong,
.uui_ground .rd-chatnew-selected > span {
	display: block;
}

.uui_ground .rd-chatnew-selected > span {
	margin-top: var(--uui-spacing-xxs);
	font-size: var(--uui-text-xs-font-size);
	color: var(--uui-text-tertiary);
}

.uui_ground .rd-chatnew-selected-tags {
	margin-top: var(--uui-spacing-xl);
}

.uui_ground .rd-chatnew-selected-tags section + section {
	margin-top: var(--uui-spacing-xl);
}

.uui_ground .rd-chatnew-selected-tags section > strong {
	display: block;
	margin-bottom: var(--uui-spacing-md);
	font-size: var(--uui-text-xs-font-size);
	font-weight: var(--uui-font-weight-semibold);
	text-transform: uppercase;
	color: var(--uui-text-tertiary);
}

.uui_ground .rd-chatnew-selected-tags section > div {
	display: flex;
	flex-wrap: wrap;
	gap: var(--uui-spacing-md);
}

.uui_ground .rd-chatnew-selected-tags uui-tag {
	min-width: 0;
	max-width: 100%;
}

.uui_ground .rd-chatnew-selected-tags .uui-tag__root {
	min-width: 0;
	max-width: 100% !important;
}

.uui_ground .rd-chatnew-selected-tags .uui-tag__content {
	min-width: 0;
	overflow: hidden;
}

.uui_ground .rd-chatnew-selected-tags .uui-tag__label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.uui_ground .rd-chatnew-selected-tags .uui-tag__close {
	flex: none;
}

.uui_ground .rd-chatnew-future-members {
	margin-top: var(--uui-spacing-2xl);
	padding-top: var(--uui-spacing-xl);
	border-top: 1px solid var(--uui-border-secondary);
}

.uui_ground .rd-chatnew-future-members uui-toggle,
.uui_ground .rd-chatnew-future-members .uui-toggle__root {
	inline-size: 100% !important;
}

.uui_ground .rd-chatnew-clear {
	margin-top: var(--uui-spacing-xl);
	padding: 0;
	font-size: var(--uui-text-sm-font-size);
	font-weight: var(--uui-font-weight-semibold);
	color: var(--uui-text-secondary);
}

.uui_ground .rd-chatnew-actions {
	position: static;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--uui-spacing-lg);
	margin-top: var(--uui-spacing-3xl);
	padding: var(--uui-spacing-xl) 0 0;
	background: transparent;
	border-top: 1px solid var(--uui-border-secondary);
}

.uui_ground .rd-chatnew-actions uui-button,
.uui_ground .rd-chatnew-actions .uui-button__control {
	inline-size: 100% !important;
}

.uui_ground .rd-chatnew-typescreen {
	min-height: 0;
}

.uui_ground .rd-chatnew-type-options {
	display: grid;
	gap: var(--uui-spacing-md);
}

.uui_ground .rd-chatnew-type-options > button {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: var(--uui-spacing-lg);
	width: 100%;
	padding: var(--uui-spacing-xl);
	text-align: left;
	border: 1px solid var(--uui-border-secondary);
	border-radius: var(--uui-radius-md);
}

.uui_ground .rd-chatnew-type-options > button:hover,
.uui_ground .rd-chatnew-type-options > .rd-chatnew-type--selected {
	background: var(--uui-bg-primary_hover);
	border-color: var(--uui-border-brand);
}

.uui_ground .rd-chatnew-type-options strong,
.uui_ground .rd-chatnew-type-options small {
	display: block;
}

.uui_ground .rd-chatnew-type-options strong {
	font-size: var(--uui-text-md-font-size);
	font-weight: var(--uui-font-weight-semibold);
}

.uui_ground .rd-chatnew-type-options small {
	margin-top: var(--uui-spacing-xs);
	font-size: var(--uui-text-sm-font-size);
	line-height: var(--uui-text-sm-line-height);
	color: var(--uui-text-tertiary);
}

.uui_ground .rd-chatnew-name {
	display: block;
	margin-top: var(--uui-spacing-2xl);
}

.uui_ground .rd-chatnew-email {
	margin-top: var(--uui-spacing-2xl);
	padding: var(--uui-spacing-xl);
	border-radius: var(--uui-radius-md);
	background: var(--uui-bg-secondary);
}

.uui_ground .rd-chatnew-email .uui-checkbox__root,
.uui_ground .rd-chatnew-email .uui-checkbox__text-wrap {
	inline-size: 100% !important;
	min-inline-size: 0;
}

@media (max-width: 640px) {
	.uui_ground:has(pc-chat-new-conversation) uui-modal {
		--uui-modal-max-inline-size: calc(100vw - var(--uui-spacing-4xl));
	}

	.uui_ground .rd-chatnew-audience-grid {
		grid-template-columns: 1fr;
	}

	.uui_ground .rd-chatnew-picker {
		border-right: 0;
		border-bottom: 1px solid var(--uui-border-secondary);
	}

	.uui_ground .rd-chatnew-actions {
		grid-template-columns: 1fr;
	}
}