div.room-view {
	grid-area: roomview;
	overflow: hidden;
	height: 100%;
	display: grid;
	outline: none;
	grid-template:
		"header" 3.5rem
		"messageview" 1fr
		"autocomplete" 0
		"input" auto
		"typing" auto
		/ 1fr;
	contain: strict;

	&.preview {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	> div.room-view-error {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}
}

div#mobile-event-menu-container {
	grid-area: header;
	overflow: hidden;
	border-bottom: 1px solid var(--border-color);

	&:empty {
		display: none;
	}

	&:not(:empty) + div.room-header {
		display: none;
	}
}