body {
	display: flex;
	margin: 0;
	height: 100vh;
	font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif
}

#sidebar {
	order: 1;

	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	padding: 0;

	width: 16rem;
	overflow: hidden;

	color: #ddd;
	background-color: #333;
}

#sidebar h2 {
	font-size: small;
	color: #ddd;
	background-color: #111;

	margin: 0;
	padding: 0.3em 0.4em;
}

#conversations {
	order: 1;
	flex: 1;
}

#sidebar ul {
	display: flex;
	flex-direction: column;
	padding: 0;
	margin: 0.3em 0.3em;
}

#sidebar ul li {
	display: block;
}

#sidebar ul li a {
	display: block;
	border: none;
	border-radius: 0.5em;
	padding: 0.3em;
	color: white;
	text-decoration: none;
}

#sidebar ul li a:hover {
	background-color: #555;
}

#sidebar ul li.selected a {
	color: black;
	background-color: #ccc;
}

#invite {
	order: 2;
}

#peers {
	order: 3;
}

#peers h2 {
	display: flex;
	justify-content: space-between;
}

#peers .collapse-icon {
	height: 1.8ex;
	margin-right: 0.6em;
	align-self: center;
}

#peers.collapsed .collapse-icon {
	transform: rotate(-90deg);
}

#peers #peer_list {
	max-height: 100%;
}

#peers.collapsed #peer_list {
	max-height: 0;
	overflow: hidden;
}

#self {
	border-top: solid thin black;
	order: 4;
}

.selected-content {
	display: none;
	order: 2;
	flex: 1;
	padding: 0;
	flex-direction: column;

	background-color: white;
}

body[data-selected=conversation] #conversation {
	display: flex;
}

body[data-selected=peer] #peer_details {
	display: flex;
}

body[data-selected=self] #account_details {
	display: flex;
}

.selected-content h2 {
	margin: 0;
	padding: 0.3em;
	border-bottom: solid thin black;
	font-size: medium;
	background-color: #eee;
}

#conversation #msg_list {
	display: flex;
	flex-direction: column;
	flex: 1;
	overflow-y: scroll;
}

#conversation ul {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: flex-end;
	padding: 0.5em;
	margin: 0;
	font-size: small;
}

#conversation ul li {
	display: flex;
	flex-direction: row;
}

#conversation ul li .msg-time {
	font-size: x-small;
	width: 4em;
	flex-shrink: 0;
	margin: 0.3em;
	color: #222;
	align-self: flex-end;
}

#conversation ul li.sent .msg-time {
	order: 1;
	text-align: right;
}

#conversation ul li.received .msg-time {
	order: 3;
	text-align: left;
}

#conversation ul li .msg-from {
	display: none;
}

#conversation ul li .msg-text {
	order: 2;
	font-size: small;
	border: solid thin black;
	border-radius: 0.8em;
	margin: 0.2em;
	padding: 0.3em 0.6em;
}

#conversation ul li.sent .msg-text {
	color: white;
	background-color: #444;
	border-color: #222;
}

#conversation ul li.received .msg-text {
	color: black;
	background-color: #ddd;
	border-color: #999;
}

#conversation #msg_form {
	display: flex;
	padding: 0.5em;
}

#conversation #msg_form #msg_text {
	flex: 1;
	border-radius: 0.7em;
	margin: 0.2em 0.3em;
	padding: 0.4em;
}

#conversation #msg_form button {
	border-radius: 0.7em;
	padding: 0 0.3em;
	margin: 0.2em 0;
}


#peer_details .content {
	padding: 0.5em;
}

#peer_details .label {
	font-weight: bold;
}

#peer_details #peer_address_value {
	overflow-wrap: anywhere;
}

#peer_details #peer_ref {
	font-size: smaller;
	color: #444;
}

#peer_details #peer_ref_value {
	overflow-wrap: anywhere;
}

#peer_details #peer_dm {
	display: block;
	margin: 1.5em 0;
}

#peer_details #peer_dm #peer_dm_link {
	border: thin solid black;
	border-radius: 0.5em;
	padding: 0.3em 1em;
	color: white;
	background-color: #444;
	text-decoration: none;
}

#peer_details #peer_dm #peer_dm_link:hover {
	background-color: #606060;
}


#account_details .content {
	padding: 0.5em;
}

#account_details .content div {
	margin: 0.5em 0;
}

#account_details .notice {
	font-size: smaller;
	color: #666;
}

#account_details .label {
	font-weight: bold;
}

#account_details #self_ref {
	font-size: smaller;
	color: #444;
}

#account_details #self_ref_value {
	overflow-wrap: anywhere;
}


#init-message {
	padding: 1em;
}

#init-message.wasm-available .requirements {
	display: none;
}

#init-message .no-wasm {
	display: none;
}

#init-message.javascript-enabled:not(.wasm-available) .no-wasm {
	display: block;
}

#init-message .loading-progress {
	display: none;
}

#init-message.wasm-available .loading-progress {
	display: block;
}


#experimental_warning {
	position: absolute;
	box-sizing: border-box;
	width: 100vw;
	bottom: 0;
	padding: 1em;

	align-items: center;
	background-color: #ffdd60;
	display: flex;

	color: #a00000;
	border: solid medium #a00000;
}

#experimental_warning .text {
	order: 1;
	flex-grow: 1;
}

#experimental_warning .close-button {
	order: 2;
	flex-grow: 0;
	height: 4ex;
	width: 4ex;
	display: block;
	color: #a00000;
}

#experimental_warning .close-button:hover {
	order: 2;
	flex-grow: 0;
	height: 4ex;
	width: 4ex;
	display: block;
	color: #d03030;
}