.TUI-message-input-container {
  /* background-color: #F1F1F1; */
  background-color: #fff;
}

.TUI-message-input {
  display: flex;
  position: relative;
  padding-bottom: 16rpx;
  align-items: center;
  margin: 30rpx 32rpx 0;
  /* background-color: #F1F1F1; */
  /* width: 100vw; */
  overflow: scroll;
}

.TUI-commom-function {
  background-color: #fff;
  display: flex;
  flex-wrap: nowrap;
  width: 750rpx;
  padding:8rpx 0 ;
  /* background-color: #F1F1F1; */
  align-items: center;
}

.TUI-commom-function-item {
  display: flex;
  width: 136rpx;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  color: #FFFFFF;
  height: 48rpx;
  margin-left: 16rpx;
  border-radius: 24rpx;
  background-color: #00C8DC;
}

.TUI-commom-function-item:first-child {
  margin-left: 48rpx;
}

.TUI-message-input-functions {
  display: flex;
  align-items: center;
}

.TUI-message-input-main {
  position: relative;

  max-height: 300rpx;
  background: #F2F2F2;
  flex: 1;
  padding: 22rpx 10rpx;
  margin: 0 10rpx;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
}
.audio-main{
  padding:12rpx 10rpx;
}
.recordtime{
  display: flex;
  font-size: 32rpx;
  margin-bottom: 10rpx;
  justify-content: center;
  color:#fff;
}
.TUI-message-input-main-focus {

  max-height: 300rpx;
  flex: 1;
  background: #F2F2F2;
  border-radius: 44rpx;
  margin: 0 10rpx;
  display: flex;
  align-items: center;
}

.textbox {
  position: absolute;
  z-index: 1;
  top: 15rpx;
  left: 35rpx;
  color: #999999;
}

.TUI-message-input-area {
  width: 100%;
  position: relative;
  background-color: transparent;
  max-height: 300rpx;
  /* 最多显示10行 */
  z-index: 2;

  overflow: scroll;
}

.TUI-icon {
  width: 56rpx;
  height: 56rpx;
  margin: 0 16rpx;
}

.TUI-Extensions {
  display: flex;
  flex-wrap: wrap;
  width: 100vw;
  height: 450rpx;
  margin-left: 14rpx;
  margin-right: 14rpx;
}

.TUI-Extension-slot {
  width: 128rpx;
  height: 170rpx;
  margin-left: 26rpx;
  margin-right: 26rpx;
  margin-top: 24rpx;
}

.TUI-Extension-icon {
  width: 128rpx;
  height: 128rpx;
  border-radius: 25%;
}

.TUI-sendMessage-btn {
  display: flex;
  align-items: center;
  margin: 0 8rpx;

}
.sendBtn {
  margin: 0;
  width: 120rpx;
  height: 70rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  color: #fff;
  background: #3CC7C0;
  border-radius: 6rpx
}

.TUI-Emoji-area {
  width: 100vw;
  height: 450rpx;
}

.TUI-Extension-slot-name {
  line-height: 34rpx;
  font-size: 24rpx;
  color: #333333;
  letter-spacing: 0;
  text-align: center;
}

.record-modal {
  height: 300rpx;
  width: 60vw;
  background-color: #000;
  opacity: 0.8;
  position: fixed;
  top: 670rpx;
  z-index: 9999;
  left: 20vw;
  border-radius: 24rpx;
  display: flex;
  flex-direction: column;
}

.record-modal .wrapper {
  display: flex;
  height: 140rpx;
  box-sizing: border-box;
  padding: 8vw;
}

.record-modal .wrapper .modal-loading {
  opacity: 1;
  width: 40rpx;
  height: 16rpx;
  border-radius: 4rpx;
  background-color: #006fff;
  animation: loading 2s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;
}

.modal-title {
  text-align: center;
  color: #fff;
}

@keyframes loading {
  0% {
    transform: translate(0, 0)
  }

  50% {
    transform: translate(30vw, 0);
    background-color: #f5634a;
    width: 40px;
  }

  100% {
    transform: translate(0, 0);
  }
}

.tool {
  display: flex;
  margin: 10rpx 32rpx 0rpx;
  padding-bottom: 20rpx;
}

.toolcell {
  display: flex;

  align-items: center;
}

.toolcell .toolicon {
  width: 40rpx;
  height: 35rpx;
}

.toolcell .name {
  color: #999999;
  font-size: 28rpx;
  margin-left: 20rpx;
}

.toolcell:last-child {
  margin-left: 90rpx;
}
.more {
  width: 120rpx;
  height: 60rpx;
  display: flex;
  margin-right: 32rpx;
  align-items: center;
  justify-content: center;
  background: #F8F8F8;
  color: #353535;
  font-size: 26rpx;
  border-radius: 6rpx;
  border: 1px solid rgba(5, 5, 5, 0.1)
}

.functionbox {
  position: relative;
  display: flex;
  justify-content: flex-end;
  border: 1rpx solid #E7E7E7;
}
.contact {
  position: absolute;
  right: 30rpx;
  font-size: 28rpx;
  display: flex;
  line-height: 60rpx;
  justify-content: center;
  top: -62rpx;
  width: 128rpx;
  height: 66rpx;
  color: #333333;
 
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAABCCAYAAACfHt50AAACV0lEQVR4Xu3XvaoaQRjG8Vl3AxERBYOICAYRUmgK2cUy/Umq3EFuI5eQG8gNpEiRKkXgdKZfvwpTBWGJeECbTSFRIjuGTXGaQHDTTZ7/qU4xg7Pz/Hjfeb3pdHox/MnegJcDCMNQ9gKUP3w2mxkACAsAgHD4+acDAAC0AGUDVADl9GkB4ukDAAC0AHEDAAAAU4CyASqAcvo8AsXTBwAAaAHiBgAAAKYAZQNUAOX0eQSKpw8AANACxA0AAABMAcoGqADK6fMIFE8fAACgBYgbAAAAmAKUDVABlNPnESiePgAAQAsQNwAAADAFKBugAiinzyNQPH0AAIAWIG4AAABgClA2QAVQTp9HoHj6AAAALUDcAAAAwBSgbIAKoJw+j0Dx9AEAAFqAuAEAAIApQNkAFUA5fR6B4ukDAAC0AHED9wCGw+F/fRW+75sgCAp94/l8NtbaQntcW7xarX5PAV9dO3jR8wZB0O33+w8qlcpVW9M0NUmS/LDW3l21weFFnsNnv/rocRzf+L7/odfrVWq12l/37fd7s9ls7qy1L8bj8fLqH3F0oQSAPJvlcjnOsuxTt9t91Gg0/ojrcrmY7XZrdrvdF2PM8yiKvjmaaaFjywDIbyWO4yelUum23W4/brVa9xeV9/okSUyapp993385Go2+F7pFhxdLAchzms/nbWvtbbPZfNrpdEyWZWa9XpvD4fC+XC6/GgwGPx3Os/DR5QDkN7RYLOrW2o/1ev3Z8Xg0p9PpTRiGrz3PuxS+Qcc3SALIM5tMJg+r1eq7/N8oit46nuM/H/8XJ/zgYgJgSv4AAAAASUVORK5CYII=) no-repeat center center;
  background-size: cover;
}
.contactCustom{
  display: flex;
  line-height: 60rpx;
  padding: 0;
  justify-content: center;
  width:100%;
  font-size: 28rpx;
}
