@font-face {
  font-family: 'Gilroy';
  src: url("font/Gilroy-Bold.woff.ttf");
}
@font-face {
  font-family: 'MiSans-Medium';
  src: url(font/MiSans-Medium.ttf);
}
.element::-webkit-scrollbar {
  width: 0 !important;
}
.element {
  -ms-overflow-style: none;
}
element {
  overflow: -moz-scrollbars-none;
}
* {
  margin: 0;
  padding: 0;
}
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}
.clearfix::after {
  clear: both;
}
.app {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.app .prompt {
  display: none;
  position: fixed;
  z-index: 99999999999;
  top: 50%;
  left: 50%;
  width: 88.16425121vw;
  height: 86.95652174vw;
  transform: translate(-50%, -50%);
  text-align: center;
  padding: 0 3.8647343vw;
  background-color: #ffffff;
  border-radius: 3.8647343vw;
}
.app .prompt .prompt-close {
  position: absolute;
  padding: 2.89855072vw;
  right: 1.93236715vw;
  top: 0.96618357vw;
  width: 16px;
  height: 16px;
}
.app .prompt span {
  display: block;
  margin-top: 5.79710145vw;
  font-size: 5.79710145vw;
  line-height: 7.7294686vw;
  font-weight: 700;
}
.app .prompt p {
  margin-top: 1.93236715vw;
  font-size: 3.8647343vw;
}
.app .prompt a {
  float: right;
}
.app .prompt input {
  margin-top: 1.93236715vw;
  margin-left: -1.93236715vw;
  padding-left: 3.8647343vw;
  padding-right: 1.93236715vw;
  width: 92.2705314vw;
  height: 7.7294686vw;
  border-radius: 3.8647343vw;
}
.app .prompt .btn-prompt {
  margin-top: 1.93236715vw;
  margin-left: -1.93236715vw;
  width: 92.2705314vw;
  height: 7.7294686vw;
  border-radius: 3.8647343vw;
}
.app .prompt .btn-copy {
  margin-top: 1.93236715vw;
  margin-left: -1.93236715vw;
  width: 92.2705314vw;
  height: 7.7294686vw;
  border-radius: 3.8647343vw;
}
.app .prompt .btn-clear {
  margin-top: 1.93236715vw;
  margin-left: -1.93236715vw;
  width: 92.2705314vw;
  height: 7.7294686vw;
  border-radius: 3.8647343vw;
}
.app .prompt .btn-close {
  margin-top: 1.93236715vw;
  margin-left: -1.93236715vw;
  width: 92.2705314vw;
  height: 7.7294686vw;
  border-radius: 3.8647343vw;
}
.app .header-wraper {
  position: fixed;
  z-index: 99999999;
  top: 0;
  left: 0;
  background-color: #ffffff;
}
.app .header-wraper .header {
  height: 28.01932367vw;
  color: #F8F8F8;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.app .header-wraper .header .pic {
  margin-left: 16.42512077vw;
}
.app .header-wraper .header .pic .img-pic {
  width: 13.52657005vw;
  height: 13.52657005vw;
}
.app .header-wraper .header .chat-name {
  margin-left: 5.31400966vw;
  margin-right: 34.29951691vw;
  font-family: "Gilroy";
}
.app .header-wraper .header .chat-name .name {
  font-size: 4.83091787vw;
  font-weight: 700;
  line-height: 7.24637681vw;
  color: #202020;
  width: 18.81642512vw;
  height: 7.24637681vw;
}
.app .header-wraper .header .chat-name .status {
  width: 11.89613527vw;
  height: 5.79710145vw;
  color: #2675ec;
  font-family: Gilroy;
  font-size: 3.8647343vw;
  font-weight: 500;
  line-height: 5.79710145vw;
}
.app .header-wraper .header .options {
  margin-right: 6.28019324vw;
  padding: 1.93236715vw;
}
.app .header-wraper .header .options .btn-options {
  width: 5.79710145vw;
  height: 5.79710145vw;
}
.app .content-wraper {
  padding-top: 35.50724638vw;
  background-color: #f8f8f8;
  padding-bottom: 36.95652174vw;
}
.app .content-wraper .content {
  overflow: auto;
  height: 121.49758454vw;
  padding-left: 5.07246377vw;
  padding-right: 4.71014493vw;
}
.app .content-wraper .content .bot-message {
  display: block;
  float: left;
  max-width: 72.46376812vw;
  margin-top: 5.79710145vw;
  background-color: #2675EC;
  padding: 2.41545894vw 6.52173913vw 2.41545894vw 6.52173913vw;
  border-radius: 8.45410628vw 8.45410628vw 8.45410628vw 2.41545894vw;
}
.app .content-wraper .content .bot-message p {
  color: #FFFFFF;
  font-family: "MiSans-Medium";
  font-size: 3.8647343vw;
  font-weight: 500;
  line-height: 1.56;
}
.app .content-wraper .content .me-message {
  display: block;
  float: right;
  max-width: 72.46376812vw;
  margin-top: 9.90338164vw;
  background-color: #F2F2F2;
  padding: 3.8647343vw 3.14009662vw 3.8647343vw 3.14009662vw;
  border-radius: 8.45410628vw 2.41545894vw 8.45410628vw 8.45410628vw;
}
.app .content-wraper .content .me-message p {
  color: #373737;
  font-family: "MiSans-Medium";
  font-size: 3.8647343vw;
  font-weight: 500;
  line-height: 1.56;
}
.app .toolbar {
  position: fixed;
  width: 100%;
  z-index: 99999999;
  bottom: 0;
  left: 0;
  height: 29.22705314vw;
  background-color: #FFFFFF;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.app .toolbar .input {
  margin-left: 3.8647343vw;
}
.app .toolbar .input textarea {
  color: #4e4a4a;
  font-family: "MiSans-Medium";
  font-size: 3.8647343vw;
  font-weight: 500;
  padding: 3.8647343vw 5.79710145vw 3.8647343vw 5.79710145vw;
  width: 73.1884058vw;
  line-height: 1.56;
  border-radius: 3.8647343vw;
  background-color: #F8F9FA;
  resize: none;
  border: none;
  outline: none;
}
.app .toolbar .emoji {
  padding: 1.93236715vw;
  margin-left: 1.93236715vw;
}
.app .toolbar .emoji .btn-emoji {
  width: 5.79710145vw;
  height: 5.79710145vw;
}
.app .toolbar .send {
  padding: 1.93236715vw;
}