/* "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);
}