chat {height: 100%;display: flex;position: relative;
    ::-webkit-scrollbar {width: 3px;}
    .ico {width: 50px;height: 50px;line-height: 50px;}
    s {width: 50px;height: 50px;display: inline-block;background-size: 90%;vertical-align: middle;cursor: pointer;}
    chat-title .ico:hover,
    chat-tool .ico:hover {background: var(--eee);}
    .avatar {width: 50px;height: 50px;}
    pop img {max-height: 90%;max-width: 90%;}
    aside {word-break: break-all;
        * {white-space: normal;}
        img {max-width: 200px;cursor: pointer;min-width: 50px;min-height: 50px;}
        video {max-width: 300px;}
    }
    a[download] {background-color: var(--orange);display: inline-block;border-radius: 5px;padding-right: 20px;
        .ico-file {width: 50px;height: 50px;background-color: transparent;}
        &:hover .ico-file:before {content: '\e74e';}
    }
}

chat-title {height: 50px;display: flex;align-items: center;border-bottom-width: 1px;position: relative;z-index: 1;
    h3 {font-size: 16px;flex: 1;padding: 0 10px;}
    input {flex: 1;min-width: 0;}
    x.ico-close {background: var(--red) !important;color: white;display: none;}
}

chat-sider {width: 240px;display: flex;flex-direction: column;border-right-width: 1px;
    hop {position: static;
        hop-cont {width: 100%;
            a {border-radius: 0 !important;}
        }
    }
}

chat-list {flex: 1;overflow: auto;
    li {
        a {display: flex;align-items: center;padding: 10px;
            &.disable {filter: grayscale(100%);}
            &.active {background-color: var(--f7);}
            &:hover {background-color: var(--eee);}
        }
        .avatar {margin-right: 5px;}
        h6,
        span {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
        h6 {flex: 1;min-width: 0;}
        span {color: var(--ccc);display: block;}
    }
}

chat-cont {flex: 1;min-width: 0;display: flex;flex-direction: column;background-color: white;position: relative;z-index: 1;
    chat-message {flex: 1;border-bottom-width: 1px;overflow: auto;
        li {padding: 10px 70px;position: relative;overflow: hidden;
            .avatar {position: absolute;left: 0;top: 0;margin: 10px;}
            cite {display: block;margin-bottom: 5px;color: var(--ccc);}
            aside {background-color: var(--f7);border-radius: 0 10px 10px 10px;padding: 10px;display: inline-block;}
            &.mine {
                .avatar {left: auto;right: 0;}
                cite {text-align: right;}
                aside {border-radius: 10px 0 10px 10px;float: right;}
            }
        }
    }
}

chat-tool {height: 50px;position: relative;
    & > a {float: left;position: relative;
        input[type="file"]{position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;}
    }
    chat-tip {position: absolute;bottom: 50px;left: 0;background-color: white;border-width: 1px 0;width: 100%;overflow: auto;padding: 10px;display: none;}
}

chat-control {height: 150px;position: relative;overflow: hidden;
    aside {height: 100%;padding: 0 70px 0 10px;overflow: auto;-webkit-user-modify: read-write;
        * {-webkit-user-modify: read-only;}
    }
    .ico-arrow-enter {margin: 10px;background-color: var(--color);color: white;border-radius: 100%;position: absolute;right: 0;bottom: 0;}
}

@media(max-width:640px){
    chat {display: block;
        chat .ico {width: .7rem;height: .7rem;line-height: .7rem;}
        chat s {width: .6rem;height: .6rem;}
        chat .avatar {width: .6rem;height: .6rem;}
        chat aside {
            img {max-width: 3rem;min-width: .7rem;min-height: .7rem;}
            video {max-width: 3rem;}
        }
        chat a[download] {border-radius: .05rem;padding-right: .2rem;
            .ico-file {width: .7rem;height: .7rem;}
        }
    }

    chat-title {height: .7rem;
        h3 {font-size: .22rem;padding: 0 .1rem;}
        x.ico-close {display: block;}
    }

    chat-sider {width: 100%;height: 100%;border-right-width: 0;}
    chat-list li {
        a {padding: .15rem;}
        .avatar {margin-right: .1rem;}
    }

    chat-cont {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: none;
        chat-message li {padding: .1rem .8rem;
            .avatar {margin: .1rem;}
            cite {margin-bottom: .05rem;}
            aside {border-radius: 0 .1rem .1rem .1rem;padding: .1rem;}
            &.mine aside {border-radius: .1rem 0 .1rem .1rem;}
        }
    }

    chat-tool {height: .7rem;}
    chat-emot {bottom: .7rem;padding: .1rem;}

    chat-control {height: 2rem;
        aside {padding: 0 .9rem 0 .1rem;}
        .ico-arrow-enter {margin: .1rem;}
    }
}