#AI-teacher {
  flex-grow: 1;
  height: 82%;
  padding: 0 25px;
  position: relative;

  box-sizing: border-box;

  color: #fff;

  background: #252527;
}
#AI-teacher .content {
  height: 75%;
  overflow-y: auto;
  padding-right: 15px;
  padding-top: 30px;

  box-sizing: border-box;
}

#AI-teacher .ask-preset {
  color: #30A1F1;
  line-height: 27px;
  cursor: pointer;
}
/* 滚动条样式 */
#AI-teacher .content::-webkit-scrollbar {
  width: 5px;
}

#AI-teacher .content::-webkit-scrollbar-track {
  background-color: black;
}

#AI-teacher .content::-webkit-scrollbar-thumb {
  background: #4e4e4e;
  border-radius: 25px;

}

#AI-teacher .send-btn-wrap {
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: calc(100% - 20px);
  display: flex;
  align-items: end;

}
#AI-teacher .send-btn-wrap .action-wrap {
  position: absolute;
  right: 11px;
  bottom: 10px;

  display: flex;

}
#AI-teacher .img-wrap {
  padding: 7px;
  background: #4A4A4A;
  cursor: pointer;
  margin-right: 11px;
  border-radius: 4px;
}

#AI-teacher .img-wrap:hover {
  background: #343232;
}

#AI-teacher .send-btn-wrap img {
  width: 17px;
  height: 17px;

}

#AI-teacher .layui-textarea {
  margin-right: 10px;
  background: transparent ;
  border: 1px solid #404040;
  color: #fff;

  overflow: hidden;

  min-height: 125px;
  font-size: 16px;
  line-height: 25px;
}

#AI-teacher .layui-textarea:focus {
  border-color: #737373 !important;
}
#AI-teacher .question-wrap {
  width: 100%;
  text-align: right;
  margin: 25px 0;
}
#AI-teacher .question {
  padding: 5px 8px;
  font-size: 16px;

  background: #3B3D3E;
  border-radius: 3px;

  display: inline-block;
  line-height: 25px;
}

#AI-teacher .name-wrap {
  font-size: 16px;
  font-weight: 500;
  color: #E7E7E7;

  margin-bottom: 5px;

  display: flex;
  align-items: center;
}

#AI-teacher .name-wrap img {
  width: 10%;
  height: 10%;

  margin-right: 7px;
  border-radius: 50%;
}

#AI-teacher .answer {
  font-size: 16px;
  color: #C2C5CA;

  margin: 0 10%;
  padding-left: 7px;
  line-height: 25px;
}

#AI-teacher .answer.prest {
  font-size: 14px;
  line-height: 22px;
}


/* 兼容Markedown 样式 */
#AI-teacher p{
  margin: 15px 0;

}

#AI-teacher li {
  /* list-style: decimal inside; */
  margin: 0 15px
}


/* 跳动音符 */
.music {
  width: 30px;
  height: 30px;


  display: flex;
  justify-content: center;
  align-items: center;

  cursor: pointer;
  box-sizing: border-box;
}

.item-wrap {
  display: flex;
  align-items: center;
}

.item {
  position: absolute;
  width: 2px;
  border-radius: 20%;
  background: linear-gradient(180deg, rgba(0, 112, 192, 0.8706) 0%, #83C9F4 100%);

}

.music .one {
  height: 7px;
  transform: translateX(-10px);
  animation: radius-animation .5s ease;
}

.music .two {
  height: 10px;
  transform: translateX(-5px);
  animation: radius-animation .8s ease;
}

.music .three {
  height: 7px;
  transform: translateX(0);
  animation: radius-animation .9s ease;
}

.music .four {
  height: 10px;
  transform: translateX(5px);
  animation: radius-animation .9s ease;
}

.music .five {
  height: 12px;
  transform: translateX(10px);
  animation: radius-animation .3s ease;
}

@keyframes radius-animation {
  100% {
    height: 18px;
    border-radius: 20%;
    filter: contrast(2);
  }
}

.music .item {
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-direction: alternate;
  -webkit-animation-direction: alternate;
}