.moji-container[data-v-76e2ed74] {
	position: fixed;
	left: 0;
	top: 0;
	display: flex;
	flex-direction: column;
	width: 376px;
	height: 327px;
	padding: 12px 5px;
	background: var(--elevation-high-background);
	box-shadow: var(--elevation-high-shadow);
	border-radius: 12px;
	animation: fadeIn-76e2ed74 .2s;
	overflow: scroll;
	z-index: 10000
}

.tab-name[data-v-76e2ed74] {
	padding-left: 10px;
	font-size: 12px;
	line-height: 17px
}

.tab-content[data-v-76e2ed74] {
	display: flex;
	flex-wrap: wrap
}

.item[data-v-76e2ed74] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	flex: 0 0 52px;
	cursor: pointer;
	border-radius: 8px;
	transition: all .2s
}

.item[data-v-76e2ed74]:hover {
	background: $olor-active-background
}

img[data-v-76e2ed74] {
	max-width: 32px;
	max-height: 32px
}

.hover-moji[data-v-76e2ed74] {
	position: fixed;
	left: 0;
	top: 0;
	width: 72px;
	height: 88px;
	background: var(--color-background);
	border-radius: 8px;
	display: none;
	filter: var(--elevation-high-shadow-filter);
	z-index: 10000;
	transition: all .2s;
	pointer-events: none
}

.hover-moji img[data-v-76e2ed74] {
	max-width: 48px;
	max-height: 48px;
	display: flex;
	margin: 8px auto
}

.triangle[data-v-76e2ed74] {
	display: block;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-top: 6px solid var(--color-border);
	position: absolute;
	left: 30px;
	top: 88px
}

.hover-name[data-v-76e2ed74] {
	width: 48px;
	font-size: 12px;
	line-height: 16px;
	text-align: center;
	color: var(--color-primary-label);
	margin: auto
}

@keyframes fadeIn-76e2ed74 {
	0% {
		opacity: 0;
		transform: translate(-19px, -100%)
	}

	to {
		opacity: 1;
		transform: translate(-19px, calc(-100% - 20px))
	}
}

.mention-select-container[data-v-6f26535c] {
	position: absolute;
	width: 376px;
	height: 160px;
	padding: 20px 16px;
	background: var(--elevation-high-background);
	box-shadow: var(--elevation-high-shadow);
	border-radius: 12px;
	overflow: auto;
	display: none
}

.mention-select-container.new[data-v-6f26535c] {
	width: 250px;
	position: fixed;
	padding: 4px;
	left: 0;
	top: 0
}

.mention-select-container.active[data-v-6f26535c] {
	z-index: 99;
	opacity: 1;
	transform: translate(-19px, calc(-100% - 10px));
	animation: mention-show-6f26535c .2s;
	display: block
}

.mention-select-container.close[data-v-6f26535c] {
	opacity: 0;
	z-index: -1;
	transform: translate(-19px, -100%);
	animation: mention-hide-6f26535c .2s
}

[data-v-6f26535c] .mention-container ul {
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	height: 128px
}

[data-v-6f26535c] .mention-container li {
	list-style: none;
	margin: 0 0 20px 2px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: column;
	width: 67px;
	height: 74px;
	flex: 0 0 auto;
	cursor: pointer
}

[data-v-6f26535c] .mention-container li:first-child,
[data-v-6f26535c] .mention-container li:nth-child(6n) {
	margin-left: 0
}

[data-v-6f26535c] .mention-container li .name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 67px;
	font-size: 12px;
	line-height: 18px;
	text-align: center;
	color: var(--color-primary-label)
}

[data-v-6f26535c] .mention-container li img {
	width: 40px;
	height: 40px;
	border-radius: 50%
}

[data-v-6f26535c] .mention-container-new ul {
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	height: 128px
}

[data-v-6f26535c] .mention-container-new li {
	margin: 0;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 8px;
	width: 100%;
	height: 40px;
	flex: 0 0 auto;
	cursor: pointer
}

[data-v-6f26535c] .mention-container-new li:hover {
	opacity: .8
}

[data-v-6f26535c] .mention-container-new li .name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 14px;
	line-height: 18px;
	text-align: center;
	color: var(--color-primary-label)
}

[data-v-6f26535c] .mention-container-new li img {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	margin-right: 8px
}

@keyframes mention-show-6f26535c {
	0% {
		opacity: 0;
		z-index: -1;
		transform: translate(-19px, -100%);
		display: block
	}

	to {
		z-index: 99;
		opacity: 1;
		transform: translate(-19px, calc(-100% - 10px))
	}
}

@keyframes mention-hide-6f26535c {
	0% {
		z-index: 99;
		opacity: 1;
		transform: translate(-19px, calc(-100% - 10px));
		display: block
	}

	to {
		opacity: 0;
		z-index: -1;
		transform: translate(-19px, -100%)
	}
}

.content-input[data-v-6f26535c] {
	cursor: text;
	caret-color: var(--color-blue);
	margin: 0;
	width: 100%;
	min-height: 40px;
	max-height: 100px;
	background-color: var(--color-active-background);
	border: none;
	border-radius: 4px;
	padding: 9px 16px;
	border-radius: 20px;
	outline: none;
	overflow-y: auto;
	text-rendering: optimizeLegibility;
	word-break: break-all;
	white-space: break-spaces;
	font-size: 16px;
	line-height: 22px;
	color: var(--color-primary-label)
}

.content-input[data-v-6f26535c] a {
	color: var(--color-link)
}

.emoji-area[data-v-38d7fbd6] {
	padding-right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	justify-content: space-evenly;
	height: 40px;
	width: 120px
}

.emoji-area .click-area[data-v-38d7fbd6] {
	width: 40px;
	height: 40px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center
}

.emoji-area .click-area .emoji[data-v-38d7fbd6] {
	height: 20px;
	width: 20px
}

.not-active[data-v-45df98c5] {
	cursor: text;
	width: 100%;
	padding-left: 8px
}

.not-active .inner[data-v-45df98c5] {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	justify-content: flex-start;
	color: var(--color-tertiary-label);
	font-size: 14px
}

.not-active .inner .icon[data-v-45df98c5] {
	margin-right: 6px;
	width: 24px;
	height: 24px;
	border-radius: 12px;
	overflow: hidden;
	color: var(--color-quaternary-label)
}

.engage-bar[data-v-7cfb7c92] {
	position: relative
}

.engage-bar .reply-content[data-v-7cfb7c92] {
	margin-bottom: 12px;
	padding: 0 16px;
	line-height: 16px
}

.engage-bar .reply-content .reply[data-v-7cfb7c92] {
	color: var(--color-tertiary-label);
	font-size: 14px
}

.engage-bar .reply-content .content[data-v-7cfb7c92] {
	color: var(--color-secondary-label);
	font-size: 14px;
	width: 100%;
	margin-top: 4px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.engage-bar .input-box[data-v-7cfb7c92] {
	display: flex;
	align-items: center;
	margin-bottom: 16px;
	transition: all .2s
}

.engage-bar .input-box .content-edit[data-v-7cfb7c92] {
	flex: 1;
	position: relative;
	min-width: 70px
}

.engage-bar .input-box .content-edit .inner-when-not-active[data-v-7cfb7c92] {
	position: absolute;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	left: 0;
	top: 0
}

.engage-bar .input-box .content-edit .recent-emoji[data-v-7cfb7c92] {
	position: absolute;
	right: 0;
	top: 0
}

.engage-bar .input-box .interact-container[data-v-7cfb7c92] {
	width: auto;
	margin-right: 0;
	transition: all .2s;
	opacity: 1
}

.engage-bar .bottom[data-v-7cfb7c92] {
	overflow: hidden;
	transition: all .2s;
	height: 0;
	opacity: 0
}

.engage-bar .bottom .bottom-inner[data-v-7cfb7c92] {
	width: 100%;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	justify-content: space-between
}

.engage-bar .bottom .bottom-inner .left-icon-area[data-v-7cfb7c92] {
	display: flex;
	align-items: center;
	justify-content: center
}

.engage-bar .bottom .bottom-inner .left-icon-area svg[data-v-7cfb7c92] {
	padding: 10px;
	cursor: pointer;
	width: 40px;
	height: 40px
}

.engage-bar .bottom .bottom-inner .left-icon-area .icon[data-v-7cfb7c92] {
	color: var(--color-secondary-label);
	width: 40px;
	height: 40px;
	border-radius: 20px
}

.engage-bar .bottom .bottom-inner .left-icon-area .icon[data-v-7cfb7c92]:hover {
	color: var(--color-primary-label);
	background: var(--color-active-background)
}

.engage-bar .bottom .bottom-inner .right-btn-area[data-v-7cfb7c92] {
	display: flex;
	align-items: center;
	justify-content: center
}

.engage-bar .bottom .bottom-inner .right-btn-area .btn[data-v-7cfb7c92] {
	margin-left: 8px;
	width: 64px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	border-radius: 44px;
	font-size: 16px;
	font-weight: 600
}

.engage-bar .bottom .bottom-inner .right-btn-area .btn.submit[data-v-7cfb7c92] {
	color: var(--color-white);
	font-weight: 600;
	background: var(--color-blue)
}

.engage-bar .bottom .bottom-inner .right-btn-area .btn.cancel[data-v-7cfb7c92] {
	border: 1px solid var(--color-border);
	color: var(--color-secondary-label)
}

.engage-bar .bottom .bottom-inner .right-btn-area .btn.cancel[data-v-7cfb7c92]:hover {
	background: var(--color-active-background);
	color: var(--color-primary-label)
}

.engage-bar .bottom .bottom-inner .right-btn-area .btn[disabled][data-v-7cfb7c92] {
	opacity: .5
}

.engage-bar.active .interact-container[data-v-7cfb7c92] {
	margin-right: var(--0f1b7edd);
	visibility: hidden;
	opacity: 0
}

.engage-bar.active .bottom[data-v-7cfb7c92] {
	height: 56px;
	opacity: 1
}

.engage-bar.active .input-box[data-v-7cfb7c92] {
	margin-bottom: 8px
}

.fade-enter-active[data-v-7cfb7c92] {
	transition: all .3s
}

.fade-enter-from[data-v-7cfb7c92],
.fade-leave-to[data-v-7cfb7c92] {
	opacity: 0
}}