/* 
 * 评分组件样式
 * @Author: '胡澳旗' 'huaoqi@xiangguohe.com'
 * @Date: 2024-07-28
 */

/* 评分组件容器 - 行内版本 */
.rating-row {
	width: 100%;
	background: white;
	padding: 8px 16px; /* 减小上下内边距 */
	display: flex;
	align-items: center; /* 确保垂直居中 */
	justify-content: flex-start; /* 改回flex-start，让元素从左开始排列 */
	border-top: 1px solid #eee;
	animation: fadeIn 0.3s ease;
}

/* 星星评分区域 - 行内版本 */
.rating-stars-row {
	display: flex;
	justify-content: flex-start;
	align-items: center; /* 确保垂直居中 */
	height: 24px; /* 固定高度 */
}

/* 星星项 */
.star-item {
	cursor: pointer;
	margin-right: 5px;
	transition: transform 0.2s;
	position: relative;
	display: flex; /* 添加flex布局 */
	align-items: center; /* 垂直居中 */
}

.star-item:hover {
	transform: scale(1.1);
}

/* 星星图片样式 */
.star-item img.star-image {
	width: 20px;
	height: 20px;
	display: block; /* 确保图片作为块元素处理 */
	vertical-align: middle; /* 图片垂直对齐 */
}

/* 发送按钮 */
.rating-send {
	cursor: pointer;
	margin-left: 10px; /* 恢复固定的左边距 */
	font-size: 14px;
	color: #E51937;
	display: flex;
	align-items: center;
	height: 24px; /* 与星星容器高度一致 */
}

/* 消息中的评分显示 */
.message-rating {
	display: flex;
	margin-top: 5px;
	justify-content: flex-end;
}

.message.bot .message-rating {
	justify-content: flex-start;
}

.rating-star {
	margin: 0 1px;
}

.rating-star img {
	width: 14px;
	height: 14px;
}

/* 消息中显示的星星图片 */
.rating-message-star {
	width: 20px;
	height: 20px;
	margin: 0 2px;
	vertical-align: middle;
}

/* 淡入动画 */
@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}