
.inner {
    display: flex;
    justify-content: space-between;
}

.inner.hideConversation {
    & .left {
        display: none;
    }

    & .right {
        width: 100vw;
    }
}

.left {
    position: relative;
    width: 311px;
    box-shadow: inset -1px 0 0 0 #eaedea;

    & .addChat {
        position: absolute;
        right: -20px;
        top: 40px;
        height: 40px;
        width: 40px;
        border-radius: 100%;
        line-height: 40px;
        text-align: center;
        font-size: 20px;
        background: #e1306c;
        box-shadow: 0 0 24px 0 rgba(119, 119, 119, .5);
        cursor: pointer;
        z-index: 9;
    }
}

.right {
    width: calc(100vw - 311px);
}

@media (width <= 800px) {
    .left {
        width: 280px;

        & .addChat {
            right: -15px;
            top: 30px;
            height: 30px;
            width: 30px;
            line-height: 30px;
            font-size: 15px;
        }
    }

    .right {
        width: calc(100vw - 280px);
    }
}
