@import "../../assets/base.scss";

.chat-item {
    width: 100%;
    margin: 36px 0;
    .image-render {
        background-color: #fff !important;
        max-width: 80%;
        img {
         max-width: 80%;
         max-height: 80%;
        }
    }
    .msg-render {
        max-width: 50%;
    }
    .other-file-render {
        font-size: 16px;
        color: $blue;
        text-decoration:none;
        .icon {
            font-size: 20px;
        }
    }
    .msg-render {
        font-size: 14px;
        word-wrap:break-word;
        .shareCard {
            cursor: pointer;
            text-align: center;
          .shareTitle {
              border-bottom: 1px solid #fff;
              padding-bottom: 10px;
          }
          .shareButton {
              padding-top: 10px;
          }
        }
    }
    .userAvatar {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    .otherchat {
        width: 100%;
        position: relative;
        .userAvatar {
            left: 10px;
            cursor: pointer;
        }
        .nt {
            font-size: 14px;
            left: 60px;
            top: -26px;
            position: absolute;
            color: #686868;
            span {
                padding-right: 6px;
            }
            span:nth-child(2) {
                font-size: 10px;
            }
        }
        .msg-render, .image-render, .other-file-render {
            float: left;
            margin-left: 60px;
            padding: 6px 8px;
            background-color: $otherMsgColor;
            border-radius: 6px;
        }
        .image-render img {
             float: left;
        }
    }
    .mychat {
        width: 100%;
        position: relative;
        .userAvatar {
            right: 10px;
        }
        .nt {
            font-size: 14px;
            right:60px;
            top: -26px;
            position: absolute;
            color: #686868;
            span {
                padding-left: 6px;
            }
            span:nth-child(1) {
                font-size: 10px;
            }
        }
        .msg-render, .image-render, .other-file-render {
            float: right;
            margin-right: 60px;
            padding: 6px 8px;
            background-color: $myMsgColor;
            border-radius: 6px;
        }
        .image-render img {
             float: right;
        }
    }
}