Template:ChatBubble/styles.css

.chat-widget {
font-family: Arial, sans-serif;
background-color: transparent; /* 修改背景颜色为透明 */
/*padding: 20px;*/
color: #252525;
}

.chat-widget .chat-container {
display: flex;
flex-direction: column;
max-width: 600px;
margin: 0; /* 修改为默认居左 */
}

.chat-widget .chat-item {
display: flex;
align-items: flex-start; /* 确保头像与气泡顶部对齐 */
margin: 10px 0;
}

.chat-widget .chat-item.left {
flex-direction: row;
}

.chat-widget .chat-item.right {
flex-direction: row-reverse;
}

.chat-widget .chat-bubble {
position: relative;
padding: 8px 12px;
border-radius: 10px;
/*max-width: 70%;*/
 /* margin-top: 25px;确保气泡与头像对齐 */
}
.chat-widget p {
	line-height: 1.2;
}
.chat-widget .chat-bubble.left {
background-color: #e5e5ea; /* 原来的浅灰色 */
}

.chat-widget .chat-bubble.right {
background-color: #007aff;
color: white;
margin-left: 0px;
}

.chat-widget .avatar {
width: 40px;
height: 40px;
border-radius: 50%;
margin: 0 10px;
align-self: flex-start; /* 确保头像与气泡顶部对齐 */
}

.chat-widget-inline-avatar > a > img {
width: 40px;
height: 40px;
border-radius: 50%;
margin: 0 10px;
align-self: flex-start; /* 确保头像与气泡顶部对齐 */
}
.ChatBubble-content {
	max-width: 70%;
	min-width: 0;
}
.ChatBubble-username-font{/* 设置对话角色名字颜色大小等样式 */
	font-size: 13px;
	color: #252525;
}

.ChatBubble-content-user{/* 对话内容对齐，默认左侧对齐 */
	margin:0;
	padding: 0;
}

.ChatBubble-content-user-right {/* 右侧对齐对话内容 */
	text-align: right;
}

.content-left {
	margin: 0;
	background-color: #e5e5ea;
}
.content-right {
	margin: 0;
	max-width: none;
	background-color: #007aff;
	color: white;
	margin-left: 0px;
}