/*
  主体
*/
#simple-chat{
  font-size: 16px;

  --primary: #f74a49;
  --primary-dark: #b93636;
  --shadow: 0 .25em .5em rgba(0, 0, 0, .1), 0 0 .5em rgba(0, 0, 0, .1);
}

#simple-chat a{
  cursor: pointer;
  color: var(--primary);
}

#simple-chat p:not(:last-child){
  margin-bottom: 1em;
}

#simple-chat input, #simple-chat button{
  margin: 0;
  padding: 0;

  font: inherit;
}

#simple-chat input{
  background: none;
  border-radius: 1em;
  padding: .5em .75em;
  border: 1px solid #ccc;
  outline: none !important;
}

#simple-chat button{
  color: #fff;
  cursor: pointer;
  border-radius: 1em;
  padding: .5em .75em;
  vertical-align: middle;
  background: transparent;
  border: 1px solid transparent;
  transition: background .2s ease;
}

#simple-chat button:disabled{
  opacity: .5;
  cursor: not-allowed;
}

#simple-chat button.red{
  color: #fff;
  background: var(--primary);
}
#simple-chat button.red:active{
  background: var(--primary-dark);
}

#simple-chat .chat-body{
  z-index: 6;
  right: 1em;
  bottom: 5em;
  position: fixed;

  color: #555;
  width: 20em;
  height: 80vh;
  font-size: 16px;
  overflow: hidden;
  max-height: 35em;
  border-radius: 1em;
  background: #fff;
  box-shadow: var(--shadow);
  
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  transform-origin: right bottom;
  transition: opacity .2s, visibility .2s, transform .2s;
}
#simple-chat .chat-body:not(.active){
    opacity: 0;
    visibility: hidden;
    transform: scale(.8);
}

#simple-chat .chat-login{
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 6em 1em;
  text-align: center;
  position: absolute;
  background: rgba(255, 255, 255, .95);
}

#simple-chat .chat-login .form-group{
  display: flex;
}
#simple-chat .chat-login .form-group input{
  flex: 1;
  min-width: 0;
  margin-right: .5em;
}

#simple-chat .chat-title{
  padding: .75em;
  text-align: center;

  color: #fff;
  background: var(--primary);
  box-shadow: var(--shadow);
}

#simple-chat .chat-title .avatar{
  left: .75em;

  margin: 0;
  padding: 0;
}

#simple-chat .chat-title .avatar img{
  width: 1.5em;
  height: 1.5em;
  object-fit: cover;
  border-radius: 3em;
  border: 2px solid #fff;
  top: -2px;
  position: relative;
}

#simple-chat .chat-title .avatar, #simple-chat .chat-title .logout{
  top: .75em;
  position: absolute;
}

#simple-chat .chat-title .logout{
  right: .75em;
  padding: 0;
  line-height: 1.25;
}

#simple-chat .chat-title .logout svg{
  width: 1em;
  fill: currentColor;
}

/* 
  消息列表
*/
#simple-chat .chat-list{
  flex: 1 1 auto;
  padding: .75em;
  overflow: hidden auto;
  position: relative;
}

#simple-chat .chat-list a{
  color: inherit;
  text-decoration: 1px dashed underline;
  text-underline-offset: 2px;
}

#simple-chat .chat-list .message-item{
  clear: both;
  float: left;
  padding: .75em;
  word-break: break-all;
  border-radius: .5em .5em .5em 0;
  background: rgba(0, 0, 0, .1);

  font-size: smaller;
  margin-left: 3em;
  position: relative;
  margin-bottom: 2em;

  transform: scale(0);
  transform-origin: 0 0;
  animation: bounce 500ms linear both;
}

#simple-chat .chat-list .message-item .timestamp{
  left: 1em;
  bottom: -2.5em;
  position: absolute;
  
  color: #aaa;
  font-size: 9px;
  user-select: none;
  white-space: nowrap;
}
#simple-chat .chat-list .message-item.personal .timestamp{
  left: unset;
  right: 1em;
}

#simple-chat .chat-list .message-item::before{
  content: "";
  left: 0;
  bottom: -.5em;
  position: absolute;
  border-top: .5em solid rgba(0, 0, 0, .1);
  border-right: .5em solid transparent;
}

#simple-chat .chat-list .message-item .avatar{
  z-index: 1;
  left: -3em;
  bottom: -2em;
  position: absolute;

  margin: 0;
  padding: 0;
}

#simple-chat .chat-list .message-item .avatar img{
  width: 2.5em;
  height: 2.5em;
  border-radius: 2em;
  border: 2px solid rgba(255, 255, 255, .24);
}

#simple-chat .chat-list .message-item.personal{
  float: right;
  color: #fff;
  background: var(--primary);
  border-radius: .5em .5em 0 .5em;
}

#simple-chat .chat-list .message-item.personal::before{
  left: auto;
  right: 0;
  border-right: none;
  border-left: .5em solid transparent;
  border-top: .5em solid var(--primary);
}

#simple-chat .chat-list .message-item:last-child{
  margin-bottom: 3em;
}

#simple-chat .chat-list .message-item.loading::before{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "";
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  z-index: 2;
  margin-top: 4px;
  animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
  border: none;
  animation-delay: 0.15s;
}

#simple-chat .chat-list .message-item.loading span{
  display: block;
  font-size: 0;
  width: 20px;
  height: 10px;
  position: relative;
}

#simple-chat .chat-list .message-item.loading span::before{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "";
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  z-index: 2;
  margin-top: 4px;
  animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
  margin-left: -7px;
}

#simple-chat .chat-list .message-item.loading span::after{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "";
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  z-index: 2;
  margin-top: 4px;
  animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
  margin-left: 7px;
  animation-delay: 0.3s;
}

#simple-chat .chat-ask-product{
  left: 1em;
  right: 1em;
  bottom: 7em;
  z-index: 1;
  padding: 1em;
  line-height: 2;
  text-align: center;
  border-radius: 1em;
  position: absolute;
  background: #f5f5f5;
}

#simple-chat .chat-ask-product + .chat-list{
  margin-bottom: 9em;
}

.chat-reply{
  padding: 1em;
  position: relative;
  box-shadow: var(--shadow);
}

.chat-reply .reply-input{
  border: none;
  resize: none;
  text-indent: 0;
  background: none;
  outline: none !important;

  margin: 0;
  padding: 0;

  width: calc(100% - 4.5em);
  height: auto;
}

.chat-reply .reply-input:focus:-webkit-placeholder{
  color: transparent;
}

.chat-reply .reply-submit{
  top: -1em;
  right: 1em;
  position: absolute;

  line-height: 1;
}

/* 
   触发按钮
*/
#simple-chat .chat-toggle{
  z-index: 6;
  right: 1em;
  bottom: 1em;
  position: fixed;

  cursor: pointer;
  user-select: none;

  width: 3em;
  height: 3em;
  border-radius: 2em;
  background: #fff center/60% no-repeat;
  box-shadow: var(--shadow);
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAzMDAgMzAwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMDAgMzAwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0UwNDEzRDt9PC9zdHlsZT48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjA2LjEsMjg1LjVjLTIuNyw2LjUtOSwxMC44LTE2LjEsMTAuOGMtNy4xLDAtMTMuNC00LjItMTYuMS0xMC43Yy0yLjctNi41LTEuMi0xNCwzLjctMTljNS01LDEyLjUtNi41LDE5LTMuOGM0LjEsMS43LDcuMyw0LjksOS4xLDguOWMyNy0yMC4yLDQyLjgtNTIuMSw0Mi41LTg1LjhjMC01OC4xLTQ0LjUtMTA0LjctOTkuMy0xMDQuN3MtOTguNyw0Ni42LTk4LjcsMTA0LjdjMCwxMi4xLDIsMjQsNS44LDM1LjVjMS4xLDMtMC40LDYuMy0zLjQsNy40Yy0zLDEuMS02LjMtMC4zLTcuNS0zLjNjLTEuMS0zLjQtMS45LTYuOC0yLjYtMTAuM2MtMTEuNS0xLjEtMjAuNC0xMC41LTIxLTIyYy0wLjYtMTEuNSw3LjMtMjEuNywxOC42LTI0YzcuMy01Ni41LDUzLjMtOTkuOCwxMDguNy05OS44YzU1LjQsMCwxMDEuOCw0My4zLDEwOS42LDk5LjNjMTEuMywyLjMsMTkuMiwxMi41LDE4LjYsMjRjLTAuNiwxMS41LTkuNSwyMC44LTIxLDIyQzI0OS40LDI0My45LDIzMS40LDI2OS4zLDIwNi4xLDI4NS41TDIwNi4xLDI4NS41eiBNMjA2LjEsMjg1LjUiLz48Zz48Zz48ZWxsaXBzZSB0cmFuc2Zvcm09Im1hdHJpeCgwLjkyNTEgLTAuMzc5NyAwLjM3OTcgMC45MjUxIC0xNi4yNDE3IDQ3LjM4NzEpIiBjbGFzcz0ic3QwIiBjeD0iMTEyIiBjeT0iNjQuOSIgcng9IjIxLjEiIHJ5PSI2NS42Ii8+PC9nPjxnPjxlbGxpcHNlIHRyYW5zZm9ybT0ibWF0cml4KDAuMzc5NyAtMC45MjUxIDAuOTI1MSAwLjM3OTcgNTMuMDk1OSAyMDguOTI3MykiIGNsYXNzPSJzdDAiIGN4PSIxODIuMyIgY3k9IjY0LjkiIHJ4PSI2NS42IiByeT0iMjEuMSIvPjwvZz48Zz48Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSIxNDguOCIgY3k9IjE4MC43IiByPSI3NiIvPjwvZz48Zz48Zz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTk2LjEsMTY4Yy0wLjMsMi4xLTUuMSw0LjEtNC44LDYuMWMwLjMsMiw1LjUsMi41LDYuNCw0LjNjMC45LDEuOC0xLjcsNi4zLTAuMyw3LjdjMS40LDEuNCw1LjktMS4yLDcuNy0wLjNjMS44LDAuOSwyLjIsNi4xLDQuMyw2LjRjMi4xLDAuMyw0LjEtNC41LDYuMS00LjhjMi0wLjMsNS41LDMuNiw3LjMsMi43YzEuOC0wLjksMC42LTYsMi4xLTcuNGMxLjQtMS40LDYuNS0wLjMsNy40LTIuMWMwLjktMS44LTMtNS4yLTIuNy03LjJjMC4zLTIuMSw1LjEtNC4xLDQuOC02LjFjLTAuMy0yLTUuNS0yLjUtNi40LTQuM2MtMC45LTEuOCwxLjctNi4zLDAuMy03LjdjLTEuNC0xLjQtNS45LDEuMi03LjcsMC4zYy0xLjgtMC45LTIuMi02LjEtNC4zLTYuNGMtMi4xLTAuMy00LjEsNC41LTYuMSw0LjhjLTIsMC4zLTUuNS0zLjYtNy4zLTIuN2MtMS44LDAuOS0wLjYsNi0yLjEsNy40Yy0xLjQsMS40LTYuNSwwLjMtNy40LDIuMUMxOTIuNSwxNjIuNiwxOTYuNCwxNjYsMTk2LjEsMTY4eiIvPjwvZz48Zz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNNjguMiwxNzMuOGMwLjQsMi4xLTMuNCw1LjYtMi41LDcuM2MxLDEuOCw2LDAuNSw3LjUsMS45YzEuNSwxLjQsMC41LDYuNSwyLjMsNy40YzEuOCwwLjksNS4xLTMuMiw3LjItMi45YzIsMC4zLDQuMiw1LDYuMiw0LjZjMi4xLTAuNCwyLjQtNS42LDQuMS02LjVjMS44LTEsNi4zLDEuNSw3LjcsMC4xYzEuNC0xLjUtMS40LTUuOS0wLjUtNy43YzAuOS0xLjgsNi0yLjQsNi4zLTQuNWMwLjMtMi00LjYtMy45LTUtNS45Yy0wLjQtMi4xLDMuNC01LjYsMi41LTcuM2MtMS0xLjgtNi0wLjUtNy41LTEuOWMtMS41LTEuNC0wLjUtNi41LTIuMy03LjRjLTEuOC0wLjktNS4xLDMuMi03LjIsMi45Yy0yLTAuMy00LjItNS02LjItNC42Yy0yLjEsMC40LTIuNCw1LjYtNC4xLDYuNWMtMS44LDEtNi4zLTEuNS03LjctMC4xYy0xLjQsMS41LDEuNCw1LjksMC41LDcuN2MtMC45LDEuOC02LDIuNC02LjMsNC41QzYzLDE2OS45LDY3LjgsMTcxLjgsNjguMiwxNzMuOHoiLz48L2c+PC9nPjwvZz48L3N2Zz4=);
}

/* 
  特殊优化
*/
#simple-chat.go-left .chat-body{
  transform-origin: left bottom;
}
#simple-chat.go-left .chat-body, #simple-chat.go-left .chat-toggle{
  left: 1em;
  right: unset;
}

/*
  动画
*/
@keyframes bounce{
  0%{
    transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  4.7%{
    transform: matrix3d(0.45, 0, 0, 0, 0, 0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  9.41%{
    transform: matrix3d(0.883, 0, 0, 0, 0, 0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  14.11%{
    transform: matrix3d(1.141, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  18.72%{
    transform: matrix3d(1.212, 0, 0, 0, 0, 1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  24.32%{
    transform: matrix3d(1.151, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  29.93%{
    transform: matrix3d(1.048, 0, 0, 0, 0, 1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  35.54%{
    transform: matrix3d(0.979, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  41.04%{
    transform: matrix3d(0.961, 0, 0, 0, 0, 0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  52.15%{
    transform: matrix3d(0.991, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  63.26%{
    transform: matrix3d(1.007, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  85.49%{
    transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  100%{
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}

@keyframes ball{
  from{
    transform: translateY(0) scaleY(0.8);
  }

  to{
    transform: translateY(-10px);
  }
}