.message { @include text-common; position: relative; }
.message {
	.text { user-select: text !important; }
	.label.small { display: inline-block; @include text-small; color: var(--color-text-secondary); }
	.label.small.withText { margin: 0px 0px 0px 4px; }

	.flex { display: flex; flex-direction: row; gap: 0px 8px; align-items: stretch; }

	> .flex > .side.left { flex-shrink: 0; width: 40px; display: flex; align-items: flex-end; }
	> .flex > .side.left {
		.iconObject { display: none; }
	}

	> .flex > .side.right { display: flex; flex-direction: column; padding: 12px 16px; border-radius: 20px; background: var(--color-shape-tertiary); position: relative; }

	.icon.reactionAdd { width: 20px; height: 20px; background-image: url('~img/icon/chat/buttons/reaction0.svg'); }
	.icon.reactionAdd:hover, .icon.reactionAdd.hover { background-image: url('~img/icon/chat/buttons/reaction1.svg'); }

	> .flex > .controls { flex-shrink: 0; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 0px 8px; opacity: 0; transition: opacity $transitionCommon; }
	> .flex > .controls {
		.icon { width: 20px; height: 20px; }
		.icon.messageReply { background-image: url('~img/icon/chat/buttons/reply0.svg'); }
		.icon.messageReply:hover, .icon.messageReply.hover { background-image: url('~img/icon/chat/buttons/reply1.svg'); }

		.icon.more { background-image: url('~img/icon/menu/action/more0.svg'); }
		.icon.more:hover, .icon.more.hover { background-image: url('~img/icon/menu/action/more1.svg'); }
	}

	.reply { 
		padding: 8px 8px 8px 12px; margin: 4px 0px; border-radius: 12px; background: #e3e3e3; position: relative; overflow: hidden;
		display: flex; align-items: center; gap: 0px 8px;
	}
	.reply::before { 
		content: ''; display: block; position: absolute; top: 0px; left: 0px; width: 4px; height: 100%;	background-color: var(--color-text-secondary); 
	}
	.reply {
		> .icon, > .iconObject { flex-shrink: 0; width: 32px; height: 32px; }
		> .iconObject:not(.noBg, .isParticipant) { border-radius: 4px !important; background-color: var(--color-shape-highlight-medium) !important; }

		.icon.isMultiple { background-image: url('~img/icon/chat/attachment/multiple.svg'); }

		.textWrapper { width: 100%; @include text-small; display: flex; flex-direction: column; overflow: hidden; }
		.name { font-weight: 500; }
		.text { @include clamp1; }
	}

	.attachments {
		.attachment {
			.icon.remove { display: none; }
		}
	}

	.author { display: none; align-items: center; gap: 0px 8px; }
	.author {
		.name, .time { @include text-overflow-nw; }

		.name { font-weight: 500; }
		.time { @include text-small; color: var(--color-text-secondary); }
	}
	.author * { user-select: text !important; }

	.expand { display: none; align-items: center; gap: 0px 8px; @include text-small; font-weight: 500; color: var(--color-text-secondary); margin-top: 4px; }
	.expand::after { content: ''; display: block; width: 8px; height: 8px; background: url('~img/arrow/button/grey.svg'); }

	.sub { @include text-small; color: var(--color-text-secondary); display: none; }
	.sub {
		.item:hover { color: var(--color-text-primary); }
	}

	.reactions { padding: 12px 0px 0px 0px; display: flex; flex-wrap: wrap; flex-direction: row; gap: 8px; align-items: center; }
	.reactions {
		.reaction { 
			display: flex; flex-direction: row; border-radius: 14px; gap: 0px 4px; align-items: center; @include text-small; font-weight: 500; 
			background-color: var(--color-shape-highlight-medium); padding: 4px 6px; flex-shrink: 0;
		}
		.reaction:hover { background-color: var(--color-shape-highlight-dark); }
		.reaction {
			.count { min-width: 18px; text-align: center; }
		}

		.reaction.isSelf { box-shadow: 0px 0px 0px 1px inset var(--color-system-accent-125); background-color: var(--color-system-accent-25); }
	}

	.newMessages { display: none; justify-content: center; position: absolute; bottom: -9px; left: 0px;  width: 100%; }
	.newMessages {
		.label { @include text-small; padding: 0px 12px; font-weight: 500; background: var(--color-bg-primary); color: var(--color-text-secondary); }
	}
}

.message.isSelf {
	> .flex { flex-direction: row-reverse; }
	> .flex {
		> .side.right { background: #e5f8d6; }
		> .controls { flex-direction: row-reverse; }
	}

	.reply { background-color: #c5efa3; }
	.reply::before { background-color: #4dae00; }
}

.message.canExpand {
	.expand { display: flex; }
	.text { @include clamp; -webkit-line-clamp: 10; }
}
.message.canExpand.isExpanded {
	.text { -webkit-line-clamp: unset; }
	.reply {
		.text { @include clamp; -webkit-line-clamp: 10; }
	}
	.expand::after { transform: rotateZ(180deg); margin-top: 2px; }
}
.message:hover, .message.hover {
	.controls { opacity: 1; }
}

.message:first-child { margin-top: 0px; }

.message.isFirst { margin: 12px 0px 0px 0px; }
.message.isFirst {
	.author { display: flex; }
	> .flex > .side.right {  min-width: 164px; }
}

.message.isFirst, .message.withText {
	.attachments { padding: 8px 0px 0px 0px;  }
}

.message.isLast {
	> .flex > .side.left {
		.iconObject { display: block; }
	}
}

.message.isNew:not(:last-child) { position: relative; padding-bottom: 25px; margin-bottom: 6px; border-bottom: 1px solid var(--color-shape-tertiary); }
.message.isNew {
	.newMessages { display: flex; }
}
.message.isNew:last-child {
	.newMessages { display: none; }
}
