body {
	display: flex;
	margin: 0;
	height: 100dvh;
	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;
}

#conversations {
	order: 1;
}

#peers {
	order: 2;
}

#self {
	order: 3;
}


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

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

#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;
}


#conversations {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

#conversations_inner {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

#conversation_list {
	overflow-y: auto;
}


#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;
}

.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=create-invite] #create_invite_details {
	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;
}


#create_invite_item a::before {
	content: "+";
	font-size: 120%;
	margin: 0 0.5em 0 0.2em;
}

#create_invite_details {
	overflow: hidden;
}

#create_invite_details .content {
	padding: 0.5em;
}

#create_invite_details #invite_generated:not(.generated) {
	display: none;
}

#create_invite_details #invite_generated_url {
	overflow-wrap: anywhere;
}

#create_invite_details button {
	display: block;
	font-size: large;
	margin: 0.5em 0;

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

#create_invite_details button:hover {
	background-color: #606060;
}

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


#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;
}


#version {
	position: absolute;
	color: #808080;
	right: 0.5em;
	top: 0.1em;
	font-size: x-small;
}


#init-message {
	padding: 1em;
}

#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;
}



.back-button {
	display: none;
}

@media (max-width: 40em) {
	body[data-selected] #sidebar {
		max-width: 0;
	}

	#sidebar {
		width: 100%;
	}

	#sidebar ul li {
		font-size: large;
		margin: 0.1em 0;
	}

	.back-button {
		float: right;
		display: inline-block;
		margin-left: auto;
	}

	#self  {
		order: 1;
	}

	#conversations {
		order: 2;
	}

	#peers {
		order: 3;
	}

	body[data-selected] #version {
		display: none;
	}
}