@charset "UTF-8";
/* 需要放到文件最上面 */
/* 水平间距 */
/* 水平间距 */
/*
 以下变量是默认值，如不需要修改可以不用给下面的变量重新赋值
 */
/* 水平间距 */
.chat-box .chat-tips {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 9;
  background-color: #08979c;
  height: 72rpx;
  line-height: 72rpx;
  color: #fff;
  text-align: center;
  opacity: 0.9;
}
.chat-box .chat-list {
  width: 100%;
  height: auto;
  padding-bottom: 120rpx;
  box-sizing: content-box;
  /* 兼容iPhoneX */
  margin-bottom: 0;
  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
}
.chat-box .chat-list .chat-item {
  display: flex;
  padding: 20rpx 20rpx 0 20rpx;
  align-items: flex-start;
  align-content: flex-start;
  /* 收到的消息 */
  /* 发出的消息 */
}
.chat-box .chat-list .chat-item .avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  border: #fff solid 1px;
}
.chat-box .chat-list .chat-item .content-box {
  flex: 1;
  width: 0;
  display: flex;
}
.chat-box .chat-list .chat-item .image-box {
  border-radius: 16rpx;
}
.chat-box .chat-list .chat-item .image-width {
  width: 280rpx;
  height: 200rpx;
}
.chat-box .chat-list .chat-item .image-height {
  width: 200rpx;
  height: 280rpx;
}
.chat-box .chat-list .chat-item .image-width-height {
  width: 200rpx;
  height: 200rpx;
}
.chat-box .chat-list .chat-item .content {
  padding: 20rpx 30rpx;
  border-radius: 16rpx;
  word-break: break-all;
  line-height: 42rpx;
  position: relative;
  font-weight: 300;
}
.chat-box .chat-list .chat-item.pull .content-box {
  margin-right: 100rpx;
}
.chat-box .chat-list .chat-item.pull .image-box {
  margin-left: 20rpx;
}
.chat-box .chat-list .chat-item.pull .content {
  margin-left: 20rpx;
  background-color: #fff;
}
.chat-box .chat-list .chat-item.push {
  /* 主轴为水平方向，起点在右端。使不修改DOM结构，也能改变元素排列顺序 */
  flex-direction: row-reverse;
}
.chat-box .chat-list .chat-item.push .content-box {
  flex-direction: row-reverse;
  margin-left: 100rpx;
}
.chat-box .chat-list .chat-item.push .image-box {
  margin-right: 20rpx;
}
.chat-box .chat-list .chat-item.push .content {
  margin-right: 20rpx;
  background-color: #08979c;
  color: #fff;
  box-shadow: 0px 1px 12px rgba(3, 3, 3, 0.08);
}
.chat-box .chat-submit {
  position: fixed;
  left: 0;
  width: 100%;
  bottom: 0;
  height: 100rpx;
  z-index: 2;
  background-color: #fff;
  box-shadow: 0px 2px 10px rgba(3, 3, 3, 0.1);
  /* 兼容iPhoneX */
  padding-bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  align-items: center;
}
.chat-box .chat-submit .message-content {
  flex: 1;
  margin: 0 30rpx;
  border: 1px solid #d9d9d9;
  border-radius: 68rpx;
  height: 68rpx;
  padding: 0 20rpx;
}
.chat-box .chat-submit .message-placeholder {
  color: #8c8c8c;
  font-weight: 300;
}
.chat-box .chat-submit .send-button {
  width: 68rpx;
  height: 68rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-box .chat-submit .send-button.send-image {
  border: 1px solid #d9d9d9;
  margin-right: 20rpx;
}
.chat-box .chat-submit .send-button.send-submit {
  background: #08979c;
  margin-right: 30rpx;
}