#pn-log {
	display: grid;
	gap: 0.5em;

	padding: 1.5em 1em 1em;
}

.pn-log {
	padding: 1em;

	border-radius: 0.25em;

	background-color: rgb(var(--pn-surface), 0.5);

	opacity: 1;
	transform: scaleY(1);

	transition:
		background-color 0.1s ease,
		opacity 0.2s ease,
		transform 0.2s ease;
}

@starting-style {
	.pn-log {
		opacity: 0;
		transform: scaleY(0.8);
	}
}

.pn-log:hover {
	background-color: rgb(var(--pn-surface), 0.3);

	transition: 0.1s ease;
}

.pn-log-dangerous {
	background-color: rgb(var(--pn-warn), 0.1);
}

.pn-log-dangerous:hover {
	background-color: rgb(var(--pn-warn), 0.2);
}

.pn-dangerous {
	margin-bottom: 4px;

	color: rgb(var(--pn-warn));
	font-weight: bold;
}

.pn-log-sender {
	margin-bottom: 4px;

	font-weight: bold;
}

.pn-log-sender-active {
	color: rgb(var(--pn-blue));
}

#pn-input {
	position: fixed;
	bottom: 0;
	left: 0;

	width: 100%;

	border: none;
	border-radius: 0;

	font-size: larger;

	transition: 0.1s ease;
}