body {
	font-family: sans-serif;
	margin: 0;
	padding: 0;
	background-color: #f4f7f9; /* 淡灰色背景 */
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
}

#chat-container {
	width: 80%;
	max-width: 600px; /* 限制最大宽度 */
	background-color: #fff; /* 白色容器背景 */
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /*  হালকা ছায়া */
	overflow: hidden; /* 防止内容超出容器 */
	display: flex;
	flex-direction: column;
	padding: 20px;
}

#messages {
	list-style: none;
	padding: 0;
	margin: 0;
	flex-grow: 1; /* 消息区域撑满剩余空间 */
	overflow-y: auto; /* 垂直滚动条，当消息超出时 */
	border-bottom: 1px solid #eee; /* 消息区域底部边框 */
	padding-bottom: 10px;
}

#messages li {
	padding: 8px 10px;
	border-radius: 5px;
	margin-bottom: 5px;
}

#messages li.self-message {
	background-color: #e8f0fe; /* 消息背景色 */
}

#messages li.other-message {
	background-color: #f3f3f3; /* 消息背景色 */
}

#input-area {
	display: flex;
	padding-top: 10px;
}

#message-input {
	flex-grow: 1; /* 输入框撑满剩余空间 */
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px 0 0 5px; /* 左侧圆角 */
	outline: none; /* 移除默认 focus 边框 */
}

#send-button {
	padding: 10px 15px;
	border: none;
	background-color: #007bff; /* 蓝色按钮 */
	color: white;
	border-radius: 0 5px 5px 0; /* 右侧圆角 */
	cursor: pointer;
	transition: background-color 0.3s ease; /* 按钮背景颜色过渡效果 */
}

#send-button:hover {
	background-color: #0056b3; /* 鼠标悬停时按钮颜色变深 */
}

#call-button {
	padding: 18px; /* 稍微小一点的 padding，与 send-button 区分 */
	border: none;
	background-color: #01b847; /* 绿色背景，与 send-button 的蓝色区分 */
	color: white;
	border-radius: 5px; /* 与 send-button 相同的圆角 */
	cursor: pointer;
	margin-left: 5px; /* 与输入框和 send-button 保持间距 */
	transition: background-color 0.3s ease;
	font-size: 0; /* 隐藏文字，使用背景图片或 iconfont */
	position: relative; /* for icon positioning */
}

#call-button:hover {
	background-color: #009137; /* 鼠标悬停时颜色变深 */
}

#call-button::before { /* 使用伪元素添加图标 */
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	background-image: url('call-icon.svg'); /*  替换为你的通话图标路径 */
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#call-button.calling { /* 通话中状态的样式 */
	background-color: #dc3545; /* 红色背景表示通话中/挂断 */
}

#call-button.calling:hover {
	background-color: #c82333; /* 通话中悬停时颜色变深 */
}

#call-button.calling::before { /* 通话中状态的图标 */
	background-image: url('hangup-icon.svg'); /* 替换为你的挂断图标路径 */
}

#callStatus {
    padding: 8px 10px; /* 与消息列表和输入框保持一致的 padding */
    background-color: #f0f0f0; /* 浅灰色背景，与消息背景区分 */
    color: #555; /* 深灰色文字颜色 */
    text-align: center; /* 文本居中显示 */
    font-size: 0.9em; /* 略小的字体大小 */
    border-radius: 0 0 8px 8px; /* 下方圆角，与 chat-container 底部对齐 */
    margin-top: 5px; /* 与输入区域保持一定的距离 */
}