@import url(./layout-mobile.css);

.container {
    height: 100%;
    box-sizing: border-box;

    min-width: 600px;
}

.chats-container {
    height: 100%;
    box-sizing: border-box;
    float: left;

    min-width: 285px;
    max-width: 360px;
    width: 30%;

    border-right: 1px solid #e1e1e1;
}

#chats-header {
    height: 60px;
    box-sizing: border-box;
}

#chats-finder {
    height: calc(100% - 60px);
    box-sizing: border-box;
}

.search-box {
    box-sizing: border-box;
}

.chats {
    box-sizing: border-box;
    display: block;
}

.search-result {
    border: 2px solid violet;
    box-sizing: border-box;
    display: none;
}

.messenger-container {
    box-sizing: border-box;
    /* Create Block Formating Context */
    overflow: auto;

    height: 100%;
}

.messenger-header-container {
    box-sizing: border-box;
    height: 60px;
}

#messenger-menu {
    box-sizing: border-box;

    float: right;
    height: calc(100% - 60px);
    max-width: 380px;
    width: 35%;
    min-width: 220px;
    overflow-y: overlay;
}

#conversation-container {
    box-sizing: border-box;

    /* Create Block Formating Context */
    overflow: auto;
    height: calc(100% - 60px - 52px);
}

.messenger-composer {
    box-sizing: border-box;
    height: 52px;
}