/* You can add global styles to this file, and also import other style files */
.chat-container {
    margin  : 20px;
    width   : 100%;
    height  : 100%;
    position: relative;

    .chats {
        list-style: none;
        margin    : 0;
        padding   : 5px;
        height    : 100%;
        overflow-y: scroll;

        /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
        &::-webkit-scrollbar {
            width           : 6px;
            height          : 6px;
            background-color: #F5F5F5;
        }

        /*定义滚动条轨道 内阴影+圆角*/
        &::-webkit-scrollbar-track {
            box-shadow      : inset 0 0 6px rgba(0, 0, 0, 0.1);
            border-radius   : 10px;
            background-color: #F5F5F5;
        }

        /*定义滑块 内阴影+圆角*/
        &::-webkit-scrollbar-thumb {
            border-radius   : 10px;
            box-shadow      : inset 0 0 6px rgba(0, 0, 0, .2);
            background-color: #c8c8c8;
        }

        li {
            list-style: none;
            padding   : 5px 0;
            margin    : 10px auto;
            font-size : 12px;

            .avatar {
                height        : 45px;
                width         : 45px;
                border-radius : 50% !important;
                vertical-align: middle;
            }

            .message {
                display : block;
                padding : 5px;
                position: relative;

                .mention-link {
                    background-color: rgba(29, 116, 245, 0.2);
                    padding         : 0 4px 2px;
                    font-weight     : 700;
                    color           : #13679a;
                    border-radius   : var(--border-radius);
                }

                .arrow {
                    display      : block;
                    position     : absolute;
                    top          : 5px;
                    border-top   : 8px solid transparent;
                    border-bottom: 8px solid transparent;
                }

                .name {
                    color      : #3590c1;
                    font-size  : 13px;
                    font-weight: 400;
                }

                .datetime {
                    color      : #333;
                    font-size  : 13px;
                    font-weight: 400;
                }

                .body {
                    display: block;
                }

            }



            &.out {


                .avatar {
                    float      : right;
                    margin-left: 10px;
                }

                .message {
                    border-right: 2px solid #F3565D;
                    margin-right: 65px;
                    background  : #fafafa;
                    text-align  : right;

                    .arrow {
                        right      : -8px;
                        border-left: 8px solid #F3565D;
                    }

                    .name,
                    .datetime {
                        text-align: right;
                    }
                }


            }

            &.in {
                .avatar {
                    float       : left;
                    margin-right: 10px;
                }

                .message {
                    text-align : left;
                    border-left: 2px solid #1BBC9B;
                    margin-left: 65px;
                    background : #fafafa;

                    .arrow {
                        left        : -8px;
                        width       : 0;
                        height      : 0;
                        border-right: 8px solid #1BBC9B;
                    }
                }
            }


        }

        padding-bottom: 10px;

    }

    .footer {
        position  : absolute;
        width     : 100%;
        margin-top: 15px;
    }


}

.message-sender {
    width           : 100%;
    margin-top      : 15px;
    padding         : 10px;
    background-color: #e9eff3;
    overflow        : hidden;

    .input-cont {
        margin-right : 40px;
        border-radius: 0 !important;

        .form-control {
            border          : 1px solid #ddd;
            width           : 100% !important;
            margin-top      : 0;
            background-color: #fff !important;
            outline         : 0 !important;
            box-shadow      : none !important;
            border-radius   : 0 !important;
        }
    }

    .btn-cont {
        margin-top   : -41px;
        position     : relative;
        float        : right;
        width        : 44px;
        border-radius: 0 !important;

        .arrow {
            position          : absolute;
            top               : 17px;
            right             : 43px;
            border-top        : 8px solid transparent;
            border-bottom     : 8px solid transparent;
            border-right      : 8px solid #4d90fe;
            -webkit-box-sizing: border-box;
            -moz-box-sizing   : border-box;
            box-sizing        : border-box;
        }

        .btn {
            margin-top      : 3px;
            line-height     : 1.75;
            color           : #FFF;
            background-color: #3598dc;
            border-color    : #3598dc;
            outline         : 0 !important;
            box-shadow      : none !important;
            display         : inline-block;
            margin-bottom   : 0;
            font-weight     : 400;
            text-align      : center;
            vertical-align  : middle;
            touch-action    : manipulation;
            cursor          : pointer;
            border          : 1px solid transparent;
            white-space     : nowrap;
            padding         : 6px 12px;
            font-size       : 14px;
            user-select     : none;
            background-image: none;
            border-radius   : 0 !important;
            text-shadow     : none;
            text-decoration : none;
        }
    }

    .tool-cont {
        padding-right: 5px;

        a {
            input {
                display: none;
            }
        }

    }

    .message-cont {
        .info {
            color: #e7505a;
        }
    }
}

video {
    width: 60%;
}