.bb-rl-messages-content {

	.send-reply {
		margin: 0;
		width: auto;
		justify-content: flex-end;
		align-items: flex-end;
		display: flex;
		height: auto;
		min-height: 0;

		textarea {
			width: 100%;
			border: 0;
		}

		.message-box {
			width: 100%;
			display: none;
		}

		.wp-editor-container {
			border-left: 0;
			border-right: 0;
		}

		.message-metadata {
			display: none;
		}
	}
}

#bp-message-content {
	border: 1px solid var(--bb-rl-border-tertiary-color);
	border-radius: var(--bb-rl-radius-lg);
	margin: var(--bb-rl-space-300);
	padding: 0;

	.medium-editor-element,
	.medium-editor-placeholder {
		color: var(--bb-body-text-color);
		font-size: 14px;
		line-height: 1.5;

		&[contenteditable="true"]:empty:after {
			color: var(--bb-body-text-color);
			content: attr(data-placeholder);
			position: absolute;
			top: 0;
			left: 0;
			padding: var(--bb-rl-space-200) var(--bb-rl-space-300);
			font-style: normal;
			opacity: 0.5;
		}
	}

	.medium-editor-element {

		pre {
			white-space: pre-wrap;
			position: relative;
			z-index: 1;

			p {
				margin-bottom: 0;
			}
		}

		p {
			margin-bottom: 5px;
		}

		ul:not(.medium-editor-toolbar-actions),
		ol:not(.medium-editor-toolbar-actions) {
			margin-bottom: 15px;
			margin-left: 16px;

			li {
				margin: 5px 0;
			}

			li > ol,
			li > ul {
				margin-bottom: 0;
			}
		}
	}

	.medium-editor-element:not(.emojionearea) {
		border: 0;
		min-height: 58px;
		max-height: 120px;
		margin: 0;
		overflow: auto;
		padding: var(--bb-rl-space-200) var(--bb-rl-space-300);
		position: relative;
		outline: none;

		&.medium-editor-placeholder:after {
			left: 0;
			font-size: 14px;
			position: absolute;
			font-style: normal;
			margin: 0;
			padding: var(--bb-rl-space-200) var(--bb-rl-space-300);
			pointer-events: none;
		}
	}

	.medium-editor-placeholder:after {
		color: var(--bb-rl-text-tertiary-color);
	}

	.messages-media-container .dz-button > strong {
		line-height: 1.3;
	}
}

.scrolled--up.focus-in--scroll .send-reply {
	box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.05);
	z-index: 11;
}

#message-form-submit-wrapper,
#message-reply-form-submit-wrapper {
	display: flex;
	align-items: center;
	border-top: 1px solid var(--bb-rl-border-secondary-color);
	border-radius: 0 0 var(--bb-rl-radius-lg) var(--bb-rl-radius-lg);
	margin: 0;
	padding: 12px var(--bb-rl-space-300);
	position: relative;

	.post-elements-buttons-item {
		display: flex;
		margin-right: var(--bb-rl-space-100);

		&.disable {
			pointer-events: none;
			opacity: 0.4;
		}

		.toolbar-button {
			display: flex;
		}

		[class*="bb-icons-"] {
			color: var(--bb-rl-icon-secondary-color);
			font-size: 24px;
		}

		.emojionearea .emojionearea-button {
			border: 0.5px solid transparent;
			padding: var(--bb-rl-space-50);

			&:before {
				content: "\e436";
				color: var(--bb-rl-icon-secondary-color);
				font-family: bb-icons-rl;
				font-size: 24px;
			}

			&.active {
				background-color: var(--bb-rl-background-secondary-hover-color);
				border-color: var(--bb-rl-border-secondary-color);
				border-radius: var(--bb-rl-radius-md);

				&:before {
					color: var(--bb-rl-icon-color);
				}
			}
		}
	}

	.bb-rl-separator {
		display: inline-flex;
		align-self: center;
		width: 1px;
		height: 16px;
		background-color: var(--bb-rl-border-tertiary-color);
		margin: 0 8px 2px -6px;
	}
}

#message-new-submit,
#message-reply-new-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 24px;
	width: 24px;
	cursor: pointer;
	opacity: 0.5;
	pointer-events: none;
	position: relative;
	margin-left: auto;

	&:before {
		display: block;
		content: "\e396";
		color: var(--bb-rl-icon-secondary-color);
		font-family: bb-icons-rl;
		font-size: 24px;
		line-height: 1;
	}
}

#message-new-submit #bp-messages-send,
#message-reply-new-submit #send_reply_button {
	position: absolute;
	inset: 0;
	opacity: 0;
	width: auto;
	min-width: auto;
	margin: 0;
	padding: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

#bp-message-content.focus-in--content #message-new-submit,
#bp-message-content.focus-in--content #message-reply-new-submit {
	opacity: 1;
	pointer-events: auto;
}

#whats-new-formatting-toolbar,
#whats-new-messages-toolbar,
#whats-new-toolbar {
	display: flex;
	align-items: center;

	a.toolbar-button {
		border: 0.5px solid transparent;
		padding: var(--bb-rl-space-50);

		&.active {
			background-color: var(--bb-rl-background-secondary-hover-color);
			border-color: var(--bb-rl-border-secondary-color);
			border-radius: var(--bb-rl-radius-md);

			[class*="bb-icons-"] {
				color: var(--bb-rl-icon-color);
			}
		}
	}
}

#whats-new-formatting-toolbar {

	.emojionearea .emojionearea-picker {
		top: auto;
		bottom: 40px;
		right: 100%;
		left: inherit;
		margin-right: -25px;
	}
}

.bp-send-message-notices {
	margin: var(--bb-rl-space-200) var(--bb-rl-space-300) 0;
}

.bp-messages-notice .bp-user-messages-feedback {
	margin: var(--bb-rl-space-300);

	.bb-rl-notice {
		color: var(--bb-rl-text-secondary-color);
		padding: var(--bb-rl-space-200);
		justify-content: center;
	}
}

.compose .bb-rl-messages-content {
	position: relative;

	.compose-feedback {
		position: absolute;
		top: 145px;
		left: var(--bb-rl-space-300);
		right: var(--bb-rl-space-300);
	}
}

#bp-message-content {

	.medium-editor-toolbar {
		top: -40px;
		left: 15px;
		background-color: transparent;
		visibility: hidden;
		opacity: 0.6;
		z-index: 1;

		&.active {
			visibility: visible;
		}

		&.medium-editor-toolbar-active {
			opacity: 1;
		}

		.medium-editor-action {
			padding: var(--bb-rl-space-50);
			background-color: transparent;
			border-radius: var(--bb-rl-radius-md);
			height: auto;
			min-width: auto;
			margin-right: var(--bb-rl-space-100);
			transition: none;
			border: 0.5px solid transparent;

			b {
				display: flex;
				font-size: 0;
				line-height: 24px;
				height: auto;
				width: auto;

				&:before {
					color: var(--bb-rl-icon-secondary-color);
					font-family: bb-icons-rl;
					font-size: 24px;
				}
			}

			&.medium-editor-button-active {
				background-color: var(--bb-rl-background-secondary-hover-color);
				border-color: var(--bb-rl-border-secondary-color);

				b:before {
					color: var(--bb-rl-icon-color);
				}
			}
		}

		.medium-editor-action-bold b:before {
			content: "\e5be";
		}

		.medium-editor-action-italic b:before {
			content: "\e5c0";
		}

		.medium-editor-action-unorderedlist b:before {
			content: "\e2f2";
		}

		.medium-editor-action-orderedlist b:before {
			content: "\e2f6";
		}

		.medium-editor-action-quote b:before {
			content: "\e660";
		}

		.medium-editor-action-anchor b:before {
			content: "\e2e2";
		}

		.medium-editor-action-pre b:before {
			content: "\e1bc";
		}

		.medium-editor-toolbar-form {
			background-color: transparent;
			border-radius: 0;

			.medium-editor-toolbar-input {
				color: var(--bb-rl-text-color);
				background-color: transparent;
				border: 1px solid var(--bb-rl-border-secondary-color);
				height: 35px;
				border-radius: var(--bb-rl-radius-md);
				padding: var(--bb-rl-space-100) var(--bb-rl-space-200);

				&.isNotValid {
					border-color: var(--bb-rl-border-danger-secondary-color);
				}

				&:focus {
					color: var(--bb-rl-text-color);
				}

				&::-webkit-input-placeholder {
					color: var(--bb-rl-text-color);
				}
			}


			> a {
				font-size: 0;

				&:before {
					content: "\e182";
					color: var(--bb-rl-icon-secondary-color);
					font-family: bb-icons-rl;
					font-size: 22px;
				}

				&.medium-editor-toolbar-save:before {
					content: "\e182";
				}

				&.medium-editor-toolbar-close:before {
					content: "\e4f6";
				}
			}
		}
	}

	#message-form-submit-wrapper,
	#message-reply-form-submit-wrapper {

		&:has(.medium-editor-toolbar.active) {
			margin-top: 40px;
		}
	}
}
