:root {
--bg-color: #fff;
--bg-color-2: #ddd;
--fg-color: #000;
}
* {
	box-sizing: border-box;
}
html.no-margin > body {
	margin: 0;
}
body {
	color: var(--fg-color);
	background-color: var(--bg-color);
}

html.wrapper > body {
	overflow: hidden;
}
html.wrapper > body > iframe {
	width: 100vw;
	height: 100vh;
	border: none;
}

form > * {
	min-height: 2em;
	height: 98vh; height: calc(100vh - 1em);
}
form > input[type="text"], form > textarea {
	width: 93%; width: calc(100% - 4em);
	resize: none;
}
form > input[type="submit"] {
	width: 3em;
	float: right;
}
/* .on-connection-dropped {
	color: red;
	margin: 0;
	display: none;
} */

.sticky-box {
	position: sticky;
	top: 0;
	z-index: 1;
	background-color: var(--bg-color);
}
.input-frame {
	overflow: auto;
	height: 4em; height: calc(4em + 4px);
	min-height: 4em; min-height: calc(4em + 4px);
	resize: vertical;
	border-bottom: 2px dotted var(--fg-color);
	padding-top: 1em;
	margin-bottom: 1em;
}
.input-frame > iframe {
	width: 100%;
	height: 100%; height: calc(100% - 1em);
	border: none;
}
.message {
	margin: 0;
	padding-left: 1em;
	padding-right: 1em;
	text-align: left;
	background: linear-gradient(to left, var(--bg-color), var(--bg-color-2));
}
.message.from-self {
	text-align: right;
	background: linear-gradient(to left, var(--bg-color-2), var(--bg-color));
}
.message.blue, .message.color-1 {
	background: linear-gradient(to left, var(--bg-color), #ccf);
}
.message.red, .message.color-2 {
	background: linear-gradient(to left, var(--bg-color), #fcc);
}
.message.green, .message.color-3 {
	background: linear-gradient(to left, var(--bg-color), #dfd);
}
.message.purple, .message.color-4 {
	background: linear-gradient(to left, var(--bg-color), #fdf);
}
.message.cyan, .message.color-5 {
	background: linear-gradient(to left, var(--bg-color), #dff);
}
.message.yellow, .message.color-6 {
	background: linear-gradient(to left, var(--bg-color), #ffd);
}
/* .message:last-child { position: sticky; bottom: 0; } */
/* TODO .message:last-child-minus-1 { position: sticky; bottom: 0; } */
.message * {
	max-width: 100%;
	width: auto;
	height: auto;
}
.message p {
	word-break: break-word;
}
.message pre {
	overflow-x: auto;
	padding-bottom: 1em;
}
.message img,
.message video {
	max-height: 80vh; max-height: calc(90vh - 6em);
}
.message > .name {
	display: inline-block;
	padding: 1em;
	padding-bottom: 0;
	font-style: italic;
	font-size: small;
}
#load-target:target {
	display: revert !important;
	padding-top: 1em;
}