:root {
	--density-far: 1rem;
	--density-close: 0.5rem;
}

body {
	display: grid;
	grid-template-rows: auto 1fr;
	height: 100vh;
	overflow: hidden;
}

.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--density-far);
	background: #f0e0e0;

	nav {
		display: flex;
		align-items: center;
		gap: var(--density-far);
	}
}

main {
	overflow: hidden;
	padding: var(--density-far);
}

main:has(.program-layout) {
	padding: 0;
}

.program-layout {
	display: grid;
	grid-template-columns: 200px 1fr;
	height: 100%;
	overflow: hidden;

	&.has-thread {
		grid-template-columns: 200px 1fr 300px;
	}

	.room-sidebar {
		padding: var(--density-far);
		overflow-y: auto;
		background: #f5f0d0;
	}

	.room-main {
		display: grid;
		grid-template-rows: auto 1fr auto;
		overflow: hidden;
		background: #e8e0f0;

		h1 {
			padding: var(--density-far);
		}

		.messages {
			overflow-y: auto;
			padding: var(--density-far);
			background: #dde8f8;
			min-height: 0;
			display: flex;
			flex-direction: column;

			&::before {
				content: '';
				flex: 1;
			}
		}

		.message-form {
			display: flex;
			gap: var(--density-far);
			padding: var(--density-far);
			background: #d0ddf0;

			input[type="text"] {
				flex: 1;
			}
		}
	}

	.thread-panel {
		display: grid;
		grid-template-rows: auto auto 1fr auto;
		overflow: hidden;
		background: #d8f0d8;

		.thread-replies {
			overflow-y: auto;
			padding: var(--density-far);
			min-height: 0;
			display: flex;
			flex-direction: column;

			&::before {
				content: '';
				flex: 1;
			}
		}

		.thread-parent {
			padding: var(--density-far);
		}

		.thread-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: var(--density-far);
		}

		.message-form {
			display: flex;
			gap: var(--density-far);
			padding: var(--density-far);
			background: #c0e0c0;

			input[type="text"] {
				flex: 1;
			}
		}
	}
}