@import '~@capillarytech/cap-ui-library/styles/_variables.scss';

.shell-lock-screen-android .main-screen-preview .wechatMsgContainer{
  position: absolute;
  left: 53.5%;
  top:28%;
  background: white;
  width: 19.5%;
  text-align: left;
  height: fit-content;
  border-radius: 0.285rem;
}

.shell-lock-screen-android .lock-screen-preview{
  .wechat-android-sender-id{
    position: absolute;
    top: 46%;
    font-size: 10px;
    left: 28%;
  }
  .wechat-android-title{
    position: absolute;
    top: 49%;
    font-size: 10px;
    left: 28%;
    color: #5e6c84;
  }
  .wechat-android-action-buttons{
    position: absolute;
    left: 28%;
    top: 53%;
    font-size: 10px;
    color: #3861ca;
    font-weight: 500;
  }
  .wechat-ios-sender-id{
    position: absolute;
    top: 44%;
    font-size: 10px;
    left: 28.5%;
  }
  .wechat-ios-title{
    position: absolute;
    top: 47%;
    font-size: 10px;
    left: 28.5%;
    color: #5e6c84;
  }
  .wechat-ios-action-reply{
    position: absolute;
    left: 35%;
    top: 59%;
    font-size: 12px;
    color: #3861ca;
    font-weight: 500;
  }
  .wechat-ios-action-cancel{
    position: absolute;
    left: 34.5%;
    top: 66%;
    font-size: 12px;
    color: #3861ca;
    font-weight: 500;
  }
}

.wechatMsgContainer{
    position: absolute;
    left: 30%;
    top: 20%;
    background: white;
    width: 40%;
    text-align: left;
    height: fit-content;
    border-radius: $CAP_SPACE_04;
    .richmedia-template {
        .richmedia-image-container {
          width: 100%;
          height: 102px;
          position: relative;
          img {
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
          }
        }
        .name-container-with-abstract {
          padding: $CAP_SPACE_12;
          height: 68px;
        }
        .name-container {
          position: absolute;
          bottom: 0px;
          height: 44px;
          padding-top: 16px;
          padding-left: 12px;
          color: $CAP_WHITE;
          opacity: 0.7;
          width: 100%;
          background-image: linear-gradient(to top,black 0% ,transparent 100%);
        }
        .additional-richmedia-container {
          display: flex;
          justify-content: space-between;
          margin: 8px;
          padding-bottom: 8px;
          img {
            border-radius: 4px;
          }
        }
        .additional-richmedia-container:not(:last-child) {
            border-bottom: 1px solid #dfe2e7;
          }
        div {
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }
}
.wechatMsgContainerOutbound{
    position: absolute;
    left: 35%;
    top: 20%;
    background: white;
    width: 30%;
    text-align: left;
}
.wechatMsgContainerCardLayout {
    position: absolute;
    left: 20%;
    top: 20%;
    background: white;
    width: 60%;
    text-align: left;
}
.overflow-handle-preview {
    overflow-y: auto;
}
.overflow-handle-preview-outbound {
    height: 330px;
    overflow-y: auto;
}
.preview-overflow-wrap-fields {
    text-overflow: ellipsis;
    overflow: hidden;
    overflow-wrap: break-word;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-align: left;
    width: 200px;
  }