@import url(message.css);
@import url(message-editor.css);

@font-face {
	font-family: Recursive;
	src: url("../fonts/recursive.woff2");
}

* {
	box-sizing: border-box;
}

:root {
	color-scheme: dark;
}

body {
	margin: 0;
	font-family: Recursive;
	font-variation-settings: "MONO" 1;
	background-color: #000000;

	height: 100vh;

	display: grid;
	grid-template-rows: 1fr min-content;
	grid-template-columns: min(600px, 100%);
	justify-content: center;
	padding: 16px;
	gap: 16px;
}

h1 {
	font-family: Recursive;
	font-variation-settings: "CASL" 1, "MONO" 1;
}

.chat {
	display: flex;
	flex-direction: column;
	background-color: #242424;
	border: 1px solid #5e5c64;

	h1 {
		background-color: #1e1e1e;
		margin: 0;
		padding: 24px;
	}

	.chat__messages {
		flex-grow: 1;
		flex-shrink: 1;
		flex-basis: 0;
		padding: 24px;
		display: flex;
		flex-direction: column;
		gap: 24px;

		overflow-y: auto;
	}

	.chat__options {
		padding: 16px 24px;
	}

	.chat__editor {
		background-color: #1e1e1e;
		padding: 24px;
	}
}

footer {
	summary {
		color: #9a9996;
		user-select: none;
	}
}