.chat-message {
	display: block;
	position: relative;
	max-width: fit-content;
	font-size: var(--chat--message--font-size);
	margin-block: 1em;
	padding: var(--chat--message--padding);
	border-radius: var(--chat--message--border-radius);
	scroll-margin: 3em;

	.chat-message-actions {
		position: absolute;
		bottom: calc(100% - 0.5em);
		left: 0;
		opacity: 0;
		transform: translateY(-0.25em);
		display: flex;
		gap: 1em;
	}

	&.chat-message-from-user .chat-message-actions {
		left: auto;
		right: 0;
	}

	&:hover .chat-message-actions {
		opacity: 1;
	}

	p {
		line-height: var(--chat--message-line-height);
		word-wrap: break-word;
	}

	+ .chat-message {
		margin-top: var(--chat--message--margin-bottom);
	}

	&.chat-message-from-user + &.chat-message-from-bot,
	&.chat-message-from-bot + &.chat-message-from-user {
		margin-top: var(--chat--spacing);
	}

	&.chat-message-from-bot {
		&:not(.chat-message-transparent) {
			background-color: var(--chat--message--bot--background);
			border: var(--chat--message--bot--border);
		}
		color: var(--chat--message--bot--color);
		border-bottom-left-radius: 0;
	}

	&.chat-message-from-user {
		&:not(.chat-message-transparent) {
			background-color: var(--chat--message--user--background);
			border: var(--chat--message--user--border);
		}
		color: var(--chat--message--user--color);
		margin-left: auto;
		border-bottom-right-radius: 0;
	}

	> .chat-message-markdown {
		display: block;
		box-sizing: border-box;
		font-size: inherit;

		> *:first-child {
			margin-top: 0;
		}

		> *:last-child {
			margin-bottom: 0;
		}

		pre {
			font-family: inherit;
			font-size: inherit;
			margin: 0;
			white-space: pre-wrap;
			box-sizing: border-box;
			padding: var(--chat--spacing);
			background: var(--chat--message--pre--background);
			border-radius: var(--chat--border-radius);
		}
	}

	.chat-message-files {
		display: flex;
		flex-wrap: wrap;
		gap: 0.25em;
		padding-top: 0.5em;
	}

	.chat-message-feedback {
		display: inline-flex;
		gap: 0.25em;
		padding-top: 0.5em;

		.chat-message-feedback-button {
			align-items: center;
			background: transparent;
			border: none;
			border-radius: 999px;
			color: inherit;
			cursor: pointer;
			display: inline-flex;
			height: 28px;
			justify-content: center;
			opacity: 0.7;
			padding: 0.25em;
			transition:
				background-color 0.2s ease,
				opacity 0.2s ease;
			width: 28px;

			&:hover:not(:disabled) {
				opacity: 1;
				background-color: rgba(0, 0, 0, 0.08);
			}

			&.is-active {
				opacity: 1;
				background-color: rgba(0, 0, 0, 0.1);
			}

			&:disabled {
				cursor: not-allowed;
				opacity: 0.4;
			}
		}
	}
}