div.right-panel {
	border-left: 1px solid var(--border-color);
	display: flex;
	flex-direction: column;
	overflow: hidden;

	> div.right-panel-header {
		height: 3.5rem;
		border-bottom: 1px solid var(--border-color);
		box-sizing: border-box;
		display: flex;
		align-items: center;
		vertical-align: center;
		padding: 0 .25rem;
		justify-content: space-between;

		div.left-side {
			display: flex;
			align-items: center;
		}

		div.panel-name {
			margin-left: .25rem;
			font-weight: bold;
		}

		button {
			height: 2.5rem;
			width: 2.5rem;
		}
	}

	> div.right-panel-content {
		flex: 1;
		overflow: auto;
	}
}

div.right-panel-content.pinned-messages {
	padding: .5rem;
	display: flex;
	flex-direction: column-reverse;

	> div.pinned-event:not(:first-child) {
		border-bottom: 1px solid var(--border-color);
		padding-bottom: .5rem;
	}

	> div.empty {
		margin: auto;
	}
}

div.right-panel-content.user {
	display: flex;
	flex-direction: column;
	padding: 1rem;

	div.avatar-container {
		width: calc((var(--right-panel-width) - 4rem));
		height: calc((var(--right-panel-width) - 4rem));
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 1rem;
		flex-shrink: 0;
		margin: 0 auto;

		> img {
			width: 100%;
			height: 100%;
		}
	}

	div.displayname {
		font-size: 1.5rem;
		font-weight: bold;
		text-align: center;
	}

	div.userid {
		text-align: center;
		font-family: var(--monospace-font-stack);
	}

	div.userid, div.displayname {
		/* Ensure names aren't too long */
		display: -webkit-box;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
		word-break: break-word;
	}

	hr {
		width: 100%;
		opacity: .2;
	}

	p {
		margin: .5rem 0;
	}

	h4 {
		margin: 0 0 .5rem;
	}

	h5 {
		margin: 0 0 .25rem;
	}

	button.show-more {
		width: 100%;
		padding: .25rem 1rem;
	}

	.user-info-loader {
		display: flex !important;
		justify-content: center;
	}

	p.verified-message {
		display: flex;
		gap: .25rem;
		font-weight: bold;

		&.verified {
			color: var(--primary-color-dark);
		}
		&.tofu-broken {
			color: darkorange;
		}
	}

	div.devices > details > summary > h4 {
		display: inline-block;
	}

	button.action {
		padding: .5rem 1rem;
		width: 100%;
		gap: .25rem;
		justify-content: left;
	}

	div.devices > details > ul {
		list-style-type: none;
		padding: 0;
		margin: 0;
		gap: .25rem;
		display: flex;
		flex-direction: column;

		li.device {
			display: flex;
			align-items: center;
			gap: .25rem;

			> .icon-wrapper {
				height: 1.5rem;
				width: 1.5rem;

				&.trust-blacklisted, &.trust-unverified.has-master-key {
					color: var(--error-color);
				}

				&.trust-cross-signed-untrusted, &.trust-unverified.no-master-key {
					color: darkorange;
				}

				&.trust-verified, &.trust-cross-signed-verified {
					color: var(--primary-color);
				}

				&.trust-cross-signed-tofu {
					color: var(--primary-color-dark);
				}
			}
		}
	}

	div.errors {
		display: flex;
		flex-direction: column;
		gap: .5rem;

		> div.error {
			display: flex;
			gap: .25rem;

			> p {
				margin: 0;
			}

			> div.icon {
				margin-top: .125rem;
				color: var(--error-color);
				flex-shrink: 0;
			}
		}
	}
}

div.right-panel-content.members {
	overflow: hidden;

	> input.member-filter {
		border: none;
		outline: none;
		padding: 1rem;
		border-bottom: 1px solid var(--border-color);
		width: 100%;
		box-sizing: border-box;
	}

	> div.member-list {
		display: flex;
		flex-direction: column;
		overflow: auto;

		> div.member {
			display: grid;
			column-gap: .5rem;
			cursor: var(--clickable-cursor);

			content-visibility: auto;
			contain-intrinsic-height: 3rem;
			height: 3rem;
			padding: .25rem;
			align-items: center;

			grid-template:
				"avatar  displayname" 3rem
				/ 2.5rem 1fr;

			&:hover {
				grid-template:
					"avatar  displayname" auto
					"avatar  userid"      auto
					/ 2.5rem 1fr;

				> div.user-id {
					display: block;
					align-self: start;
				}

				> div.displayname {
					align-self: end;
				}
			}

			> div.displayname, > div.user-id {
				overflow: hidden;
				text-wrap: nowrap;
				text-overflow: ellipsis;
				user-select: none;
			}

			> div.displayname {
				grid-area: displayname;
			}

			> img.avatar {
				grid-area: avatar;
			}

			> div.user-id {
				grid-area: userid;
				font-family: var(--monospace-font-stack);
				font-size: .75rem;
				opacity: .7;
				display: none;
			}

			&:hover, &:focus {
				background-color: var(--light-hover-color);
			}
		}

		> button {
			border-radius: 0;
			padding: .5rem;
		}
	}
}