.chat-room{
  width: 100%;
  height: 100vh;
  background-color: #fff;
}
.chat-room .header{
  width: 100%;
  height: 100rpx;
  background-color: #fff;
  padding-top: 60rpx;
  text-align:center;
  line-height: 100rpx;
  font-size: 16px;
  color: #333;
  letter-spacing: 2px;
}
.chat-room .room{
  position: absolute;
  left: 0;
  right: 0;
  top:20rpx;
  bottom: 100rpx;
  padding: 0 5px 20px 5px;
  background-color: #f5f5f5;
  box-sizing: border-box;
}
.chat-room.black,.chat-room.black .room{
	background-color: #000;
}
.chat-room .room .item{
  text-align: right;
  padding-top: 30upx;
  position: relative;
  padding-right: 100upx;
  padding-left: 0;
  position: relative;
  margin-top: 20upx;
 /* #ifdef H5 */
 	padding-right: 120upx; 
 /* #endif */   
}
.chat-room .room .item.lf{
  text-align: left;
  padding-right:0;
  padding-left: 100upx;   
   /* #ifdef H5 */
   	padding-left: 120upx; 
   /* #endif */   
}
.chat-room .room .item::after{
	content: "";
	position: absolute;
	top: 40upx;
	width: 0;
	height: 0;
	border-style: solid dashed dashed;
	border-color: #fff transparent transparent;
	overflow: hidden;
	border-width: 10px;
	right:100upx;
   /* #ifdef H5 */
   	 right:120upx;
   /* #endif */ 	
}
.chat-room .room .item.lf::after{
   border-color: #98E165 transparent transparent;
   left:100upx;
   right: unset;
   /* #ifdef H5 */
   	 left:120upx;
   /* #endif */ 
}
.chat-room .room .item .name{
  width: 100rpx;
  height: 100rpx;
  text-align: left;
  line-height: 100rpx;
  font-size: 14px;
  display: inline-block;
}
.chat-room .room .item .avatar{
  width: 100rpx;
 /* #ifdef H5 */
	 width: 120rpx;
 /* #endif */ 
  text-align: left;
  font-size: 14px;
  display: inline-block;
/*  border-radius: 50%; */
  overflow: hidden;
  text-align: center;
}
.chat-room .room .item .avatar{
  position: absolute;
  top: 15upx;
  right: 4upx;	
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.chat-room .room .item .avatar .avatar-tag{
  width: 60rpx;
  height: 60rpx;
  display: block;
}
.chat-room .room .item .avatar .username{
	width: 100%;
	font-size: 20upx;
	line-height: 1;
	padding-top: 10upx;
	display: -webkit-box; 
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1; 
	overflow: hidden;	
}

.chat-room .room .item.lf .avatar{
	left: 0;
	right: unset;
}
.chat-room .room .item .msgbox{
  display: inline-block;
  max-width:540upx;
  border:1px solid #eaeaea;
  background-color: #fff;
  font-size: 14px;
  padding:16upx;
  border-radius: 4px;
  margin-right: 7px;
  word-break: break-all;
  text-align: left;
}
.chat-room .room .item.lf .msgbox{
  background-color: #a0e75a;
  color: #333;
  letter-spacing: 1px;
  margin:0 0 0 7px;
}
.chat-room .send{
  width: 100%;
/*  height: 110rpx; */
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding:10upx 20upx;
  z-index: 999;
  background-color: #fff;
}
.sendInput{
  width: 460rpx;
  border: 1px solid #ccc;
  border-radius: 2px;
  padding:10rpx 14rpx;
}
.chat-room .send .sendBt{
	width: 150upx;
	background-color: #3384ff;
	color: #fff;
}
.chat-room.black .send .sendInput{
	color: #fff;
}
.chat-room .send .moreHandle{
	width: 60rpx;
	height: 60rpx;
	padding: 0;
	border-radius: 50%;
	line-height: 60rpx;
	text-align: center;
	border:1px solid #ccc;
	margin: 0;
	margin:0 40rpx 5rpx 0;
	color: #888888;
}