.bx-im-message-audio__container {
	position: relative;
	padding: 9px 12px 0 14px;
}

.bx-im-message-audio__header {
	padding-bottom: 6px;
}

.bx-im-message-audio__message-status-container {
	position: absolute;
	right: 9px;
	bottom: 8px;
}

.bx-im-message-audio__default-message-container {
	padding:
		0
		var(--im-message-base__padding-right_body)
		var(--im-message-base__padding-bottom_body)
		var(--im-message-base__padding-left_body)
	;
	margin-top: 8px;
}

.bx-im-message-audio__reaction-list-container {
	display: flex;
	justify-content: flex-end;
	margin-top: 4px;
}

.--opponent .bx-im-message-audio__reaction-list-container {
	justify-content: flex-start;
}

.bx-im-message-base-file__container {
	position: relative;
	padding: 9px 10px 6px 14px;
	max-width: 285px;
	overflow: hidden;
}

/*
 * A reply quote outside the bubble widens it (quote max-width is 460px). The card, time and
 * download button must follow that width, so the base 285px cap is lifted to the quote limit.
 */
.bx-im-message-base__content-main > .bx-im-message-quote ~ .bx-im-message-base__body .bx-im-message-base-file__container {
	max-width: 460px;
}

.bx-im-message-base-file__container > .bx-im-message-quote {
	margin-top: 4px;
	margin-bottom: 12px;
}

.bx-im-message-base-file__author-title {
	padding-bottom: 6px;
}

.bx-im-message-file-collection__container {
	position: relative;
	padding: 8px 12px 6px;
	max-width: 285px;
}

/*
 * A reply quote outside the bubble widens it (quote max-width is 460px). The cards, time and
 * download buttons must follow that width, so the base 285px cap is lifted to the quote limit.
 */
.bx-im-message-base__content-main > .bx-im-message-quote ~ .bx-im-message-base__body .bx-im-message-file-collection__container {
	max-width: 460px;
}

.bx-im-message-file-collection__container > .bx-im-message-quote {
	margin-top: 4px;
	margin-bottom: 12px;
}

.--has-error .bx-im-message-file-collection__container .bx-im-progress-bar__container {
	display: none;
}

.bx-im-message-file-collection__author-title {
	padding-bottom: 6px;
}

.bx-im-message-file-collection__items {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bx-im-message-file-collection__default-content {
	margin-top: 16px;
}

.bx-im-message-media-content__container {
	position: relative;
}

.bx-im-message-media-content__single-video {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	border-radius: 6px;
}

.bx-im-message-media-content__single-image {
	display: flex;
	width: 100%;
	justify-content: center;
}

.bx-im-message-media-content__status-container {
	position: absolute;
	right: 6px;
	bottom: 6px;
	z-index: 20;
}

.bx-im-message-image__container {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: inherit;
}

.bx-im-message-media-content__container::after {
	display: block;
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	border-radius: 4px;
	transition: all 200ms ease;
	pointer-events: none;
	z-index: 10;
}

.--has-error .bx-im-message-image__container:not(.--has-text) .bx-im-message-media-content__container::after {
	background-color: rgba(255, 232, 232, .9);
	pointer-events: auto;
}

.--has-error .bx-im-message-image__container .bx-im-progress-bar__container {
	display: none;
}

.bx-im-message-image__header {
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	padding: 10px 19px 10px 14px;
}

.bx-im-message-image__bottom-container {
	padding: var(--im-message-base__padding_body);
}

/*
 * The outside quote must not set the column width (its own cap is 460px) — a narrow vertical
 * image would visually fall apart from a wide quote above it. Zero intrinsic width excludes
 * the quote from the column sizing, min-width stretches it back to the media width.
 */
.bx-im-message-base__content-main > .bx-im-message-quote.bx-im-message-image__quote {
	width: 0;
	min-width: 100%;
}

.bx-im-message-image__container > .bx-im-message-quote {
	padding-right: var(--im-message-base__padding-right_body);
	padding-left: var(--im-message-base__padding-left_body);
	margin-top: 0;
	margin-bottom: 12px;
}

/* External reaction list */
.bx-im-message-image__reaction-list-container {
	display: flex;
	justify-content: flex-end;
}

.bx-im-message-base__wrap.--opponent .bx-im-message-image__reaction-list-container,
.bx-im-content-chat__container.--left-align .bx-im-message-image__reaction-list-container {
	justify-content: flex-start;
}

.bx-im-message-image__reaction-list-container > .bx-im-reaction-list__container {
	margin-top: 4px;
}

/* End external reaction list */

.fade-enter-active, .fade-leave-active {
	transition: opacity 0.1s ease;
}
.fade-enter-from, .fade-leave-to {
	opacity: 0;
}

.bx-im-video-note__container {
	position: relative;
}

.bx-im-video-note__header_container {
	margin-bottom: 4px;
}

.bx-im-video-note__status_container {
	position: absolute;
	bottom: 0;
	left: 202px;
}

.bx-im-video-note__comments-panel {
	position: absolute;
	right: -11px;
	bottom: 28px;
}

/* External reaction list */
.bx-im-video-note__reaction-list-container {
	display: flex;
	justify-content: flex-end;
}

.bx-im-message-base__wrap.--opponent .bx-im-video-note__reaction-list-container,
.bx-im-content-chat__container.--left-align .bx-im-video-note__reaction-list-container {
	justify-content: flex-start;
}

.bx-im-video-note__reaction-list-container > .bx-im-reaction-list__container {
	margin-top: 8px;
}
/* End external reaction list */

.bx-im-transcribed-video-note-note__container {
	padding: 9px 12px 0 14px;
}

.bx-im-transcribed-video-note__header {
	padding-bottom: 6px;
}

.bx-im-transcribed-video-note__default-message-container {
	padding:
		0
		var(--im-message-base__padding-right_body)
		var(--im-message-base__padding-bottom_body)
		var(--im-message-base__padding-left_body)
;
	margin-top: 8px;
}