.focus-comments-container {
	display        : flex;
	flex-direction : column;
	max-height     : 500px;
}

.focus-comments-container .comment-list {
	overflow-y       : auto;
	scrollbar-gutter : stable;
	flex             : 1;
	display          : flex;
	flex-direction   : column;
	padding          : 8px 6px .25rem;
	min-height       : 0;
}

.focus-comments-container .comment {
	display        : flex;
	flex-direction : row;
	align-self     : flex-start;
	align-items    : center;
	max-width      : 80%;
	margin         : .1rem .5rem;
	padding        : 0;
	gap            : .4rem;
}

.focus-comments-container .comment.is-mine {
	align-self : flex-end;
}

.focus-comments-container .comment .comment-header,
.focus-comments-container .comment .context {
	background : rgba(240, 113, 56, 0.08);
	word-break : break-word;
	padding    : .4rem .75rem;
}

.focus-comments-container .comment .comment-header {
	border-radius  : 14px 14px 0 0;
	padding-bottom : 0;
	font-size      : .8rem;
}

.focus-comments-container .comment .context {
	border-radius : 0 0 14px 14px;
	padding-top   : .25rem;
}

.focus-comments-container .comment.is-mine .comment-header,
.focus-comments-container .comment.is-mine .context {
	background : rgba(14, 67, 140, 0.1);
	color      : #333;
}

.focus-comments-container .comment.is-mine .context {
	border-bottom-right-radius : 4px;
}

.focus-comments-container .comment .comment-section {
	display        : flex;
	flex-direction : column;
	min-width      : 0;
}

.focus-comments-container .name {
	font-weight : bold;
}

.focus-comments-container .comment .comment-avatar {
	display : none;
}

.focus-comments-container.show-avatars .comment-list .comment {
	align-items : flex-start;
}

.focus-comments-container.show-avatars .comment-list .comment .comment-avatar {
	display         : flex !important;
	align-items     : center;
	justify-content : center;
	width           : 30px;
	height          : 30px;
	border-radius   : 50%;
	background      : #a0aec0;
	color           : white;
	font-size       : 0.7rem;
	font-weight     : bold;
	flex-shrink     : 0;
	align-self      : flex-start;
	margin-top      : .25rem;
}

.focus-comments-container.show-avatars .comment-list .comment.is-mine .comment-avatar {
	display : none !important;
}

.focus-comments-container .comment-list .comment + .comment {
	border-top : none;
}

.focus-comments-container .comment-form {
	flex-shrink : 0;
	padding     : .5rem 10px 8px;
	border-top  : 1px solid gray;
}

.focus-comments-container .comment-form .comment {
	flex-direction : row;
	max-width      : 100%;
	align-self     : stretch;
	gap            : .5rem;
}

.focus-comments-container .comment-form .input-container {
	flex      : 1;
	min-width : 0;
}

.focus-comments-container .comment-form .input-container textarea {
	width         : 100%;
	box-sizing    : border-box;
	resize        : none;
	overflow-y    : auto;
	max-height    : 150px;
	border-radius : 3px;
}

.focus-comments-container .comment-form .submit-container {
	display     : flex;
	align-items : flex-start;
}

.focus-comments-container .new-comment {
	border-radius : 16px;
	padding       : .4rem .75rem;
}

.focus-comments-container .submit-button {
	font-size     : 0;
	min-width     : unset;
	padding       : .45rem .6rem;
	border-radius : .2rem;
}

.focus-comments-container .submit-button::before {
	font-family : FontAwesome;
	content     : "\f1d8";
	font-size   : 1rem;
	color       : currentColor;
}

.focus-comments-container .comment-buttons {
	display : none;
}

[data-can-edit="true"] .focus-comments-container .comment.is-mine .context {
	cursor : pointer;
}

.focus-comments-container .edited {
	font-style : italic;
	color      : #999;
	font-size  : .8em;
}

.focus-comments-container .unread-divider {
	display     : flex;
	align-items : center;
	margin      : .75rem 0;
	gap         : .5rem;
	color       : #888;
	font-size   : .8rem;
}

.focus-comments-container .unread-divider::before,
.focus-comments-container .unread-divider::after {
	content    : '';
	flex       : 1;
	border-top : 1px solid #ccc;
}

.update-modal {
	display    : grid;
	text-align : center;
	margin     : .5rem;
	row-gap    : 1rem;
	padding    : 0.5rem;
	min-width  : 40rem;
	max-width  : 100%;
	min-height : 10rem;
	overflow-y : auto;
}

.update-header {
	font-size   : larger;
	font-weight : bold;
}

.update-modal .edit-comment {
	width     : 100%;
	max-width : 100%;
}