.history {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	height: 100%;
}

.prompts {
	margin-top: auto;
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

button {
	background-color: var(--background);
	border: 1px solid var(--accent);
	color: var(--secondary);
	text-align: left;
	padding: 1rem;
	border-radius: 1rem;
	cursor: pointer;
	line-height: 1.3;
}

button:hover {
	background-color: var(--accent);
}

.message {
	background-color: var(--accent);
	padding: 0.75rem 1.25rem;
	border-radius: 1.5rem;
	width: fit-content;
}

.user {
	margin-left: auto;
}

.bot {
	display: flex;
	gap: 0.5rem;
}

@media (min-width: 700px) {
	.prompts {
		grid-template-columns: 1fr 1fr;
	}
}

main {
	padding-bottom: var(--aside-height);
}

form {
	position: sticky;
	bottom: var(--aside-height);
	background-color: var(--background);
	display: flex;
	align-items: center;
	width: 100%;
	max-width: var(--app-width);
	padding: 1rem 1.5rem;
	padding-bottom: 0;
}

@media (min-width: 700px) {
	main {
		padding-bottom: 0;
	}
	form {
		bottom: 0;
		padding: 1rem 1.5rem;
	}
}

input {
	padding: 0.5rem 1rem;
	height: 2.5rem;
	width: 100%;
	border: 1px solid var(--accent);
	border: none;
	border-radius: 999px;
	background-color: var(--accent);
	color: var(--primary);
	outline: none;
}