gomuks/web/src/ui/rightpanel/RightPanel.css

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;

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

	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 {
	display: flex;
	flex-direction: column;

	> div.member {
		display: flex;
		align-items: center;
		gap: .5rem;
		cursor: var(--clickable-cursor);

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

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

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

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