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

chat-title {height: 50px;display: flex;align-items: center;border-bottom-width: 1px;position: relative;z-index: 1;}
chat-title h3 {font-size: 16px;flex: 1;padding: 0 10px;}
chat-title input {flex: 1;min-width: 0;}
chat-title x.ico-close {background: var(--red) !important;color: white;display: none;}
chat-sider {width: 240px;display: flex;flex-direction: column;border-right-width: 1px;}
chat-sider hop {position: static;}
chat-sider hop-cont {width: 100%;}
chat-sider hop-cont a {border-radius: 0 !important;}

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

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;}
chat-message li {padding: 10px 70px;position: relative;overflow: hidden;}
chat-message li .avatar {position: absolute;left: 0;top: 0;margin: 10px;}
chat-message li cite {display: block;margin-bottom: 5px;color: var(--ccc);}
chat-message li aside {background-color: var(--f7);border-radius: 0 10px 10px 10px;padding: 10px;display: inline-block;}
chat-message li.mine {}
chat-message li.mine .avatar {left: auto;right: 0;}
chat-message li.mine cite {text-align: right;}
chat-message li.mine aside {border-radius: 10px 0 10px 10px;float: right;}

chat-tool {height: 50px;position: relative;}
chat-tool > a {float: left;position: relative;}
chat-tool > a 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;}
chat-control aside {height: 100%;padding: 0 70px 0 10px;overflow: auto;-webkit-user-modify: read-write;}
chat-control aside * {-webkit-user-modify: read-only;}
chat-control .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;}
    chat aside video {max-width: 3rem;}
    chat a[download] {border-radius: .05rem;padding-right: .2rem;}
    chat a[download] .ico-file {width: .7rem;height: .7rem;}

    chat-title {height: .7rem;}
    chat-title h3 {font-size: .22rem;padding: 0 .1rem;}
    chat-title x.ico-close {display: block;}
    chat-sider {width: 100%;height: 100%;border-right-width: 0;}
    chat-list li a {padding: .15rem;}
    chat-list li .avatar {margin-right: .1rem;}

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

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

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