#chats {
	#placeholder {
		content: 'Find chats in groups.';
		color: var(--label);
		display: flex;
		flex-direction: column;
		gap: var(--spacing);
		width: 100%;
		height: calc(var(--body) - var(--header) - var(--footer) - var(--inset-bottom));
		justify-content: space-around;
		align-items: center;

		p {
			text-align: center;
			line-height: 1.5;
		}
	}
}

.unread * {
	font-weight: bold !important;
	color: currentColor !important;
}

.chat {
	display: flex;
	width: 100%;
	max-width: var(--mobile-width);
	margin: 0 auto;
	align-items: center;
	gap: 1ch;
	padding: var(--spacing) var(--spacing2);
	color: var(--color);
	border-bottom: var(--border);
	&:last-child {border-bottom: 0}

	a {
		color: var(--color);
	}

	div {
		overflow: hidden;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.name {
		font-weight: bold;
		overflow-x: clip;
		flex: 1;
		min-width: 0;
	}

	.status {
		width: 100%;
	}

	.header-line {
		display: flex;
		gap: var(--spacing);
		align-items: center;
	}

	.text, .time {
		font-size: 0.9em;
		color: var(--label);
	}
}