main.chat-page {
	padding: var(--space-sm);
	display: grid;
	grid-template-columns: 1fr 14rem;
	gap: var(--space-sm);
	flex-grow: 1;

	.chat-main {
		display: flex;
		flex-direction: column;
		gap: var(--space-sm);
	}

	h1 {
		margin: 0;
		font-size: var(--font-size-lg);
	}

	.chat-log {
		flex-grow: 1;
		margin: 0;
		padding: var(--space-sm);
		list-style: none;
		border: 1px solid var(--color-border);
		background: var(--color-surface);
		overflow-y: auto;
		font-family: var(--font-family-mono);
		font-size: var(--font-size-sm);
	}

	.chat-line {
		word-break: break-word;
	}

	.chat-time {
		color: var(--color-text-muted);
	}

	.chat-user {
		color: var(--color-link);
	}

	.chat-form {
		display: grid;
		grid-template-columns: 1fr min-content;
		gap: var(--space-sm);
	}

	.chat-status {
		margin: 0;
		font-size: var(--font-size-xs);
		color: var(--color-text-muted);
	}

	.chat-sidebar {
		border: 1px solid var(--color-border);
		background: var(--color-surface);
		padding: var(--space-sm);
		min-height: 0;

		h2 {
			margin: 0 0 var(--space-sm) 0;
			font-size: var(--font-size-base);
		}
	}

	.chat-online {
		margin: 0;
		padding: 0;
		list-style: none;
		font-family: var(--font-family-mono);
		font-size: var(--font-size-sm);
	}

	.chat-online-user {
		word-break: break-word;
	}

	.chat-online-empty {
		color: var(--color-text-muted);
	}
}