/* Definições de cor */
:root {
    --themeColor: #79D7BE6f;
}

/* Seleção customizada */
::-moz-selection {
    color: white;
    background: var(--themeColor);
}
::selection {
    color: white;
    background: var(--themeColor);
}
/* versão mobile */
#topPanel {
    margin: 0;
    padding: 0;
    height: 150px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    border-radius: 28px;
    border: solid 2px var(--themeColor);
    position: sticky;
}
#logo {
    width: 75px;
    height: 75px;
}
#searchBar {
    width: calc(100% - 75px);
    height: 75px;
}
#searchInput {
    display: none;
    width: calc(100% - 95px);
    margin: 0;
}
#searchButton {
    margin: 0;
}
.active > #searchInput {
    display: inline-block;
}
.active > #searchButton {
    float: none;
}

#searchPanel {
    display: none;
    position: absolute;
    background-color: var(--backgroundColor);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    margin: 0;
    left: 0;
    right: 0;
    top: 150px;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: scroll;
}

#searchPanel.active {
    display: block;
}

#searchPanel.active ~ #lateralPanel {
    display: none;
}

#apps {
    width: 75px;
    height: 75px;
}

#mainDiv {
    position: fixed;
    top: 100px;
    right: 0;
    bottom: 100px;
    width: 100%;
    margin: 0;
}
#titlePanel {
    margin: 0;
    height: 75px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
#curPanel {
     overflow-x: hidden;
     overflow-y: scroll;
     height: calc(100% - 75px);
     width: 100%;
}
#msgPanel {
    position: fixed;
    height: 10%;
    width: 100%;
    right: 0;
    bottom: 80px;
    display: none;
    border: solid 2px var(--themeColor);
    border-radius: 50px;
    background-color: var(--backgroundColor);
}
#msgInput, #fileInput {
    height: 100%;
    width: 100%;
    margin: auto 0;
    border: none;
    border-radius: 50px;
}

#selectionPanel {
    position: fixed;
    height: 40%;
    width: 100%;
    right: 0;
    bottom: 80px;
    display: none;
}

/********* Mensagens e postagens *********/
/**** Mensagens                       ****/
/* date -> Marcação de mudança de data   */
/* you  -> Você quem enviou a mensagem   */
/* him  -> Outra pessoa enviou a mensagem*/
/* Classes adicionais para you e him     */
/* selected -> Selecionada para editar   */
/* pending -> Mensagem a ser enviada     */
/* retry   -> Problema ao enviar, tentar */
/* novamente                             */
/**** Postagens                       ****/
/*****************************************/

.message-row {
    margin: 10px;
    /*width: 100%;*/
    clear: both;
}
.you {
    border-radius: 28px 28px 0 28px;
    background-color: #4DA1A9;
    color: white;
    float: right;
    padding: 10px;
    overflow: hidden;
    max-width: 100%;
}
.him {
    border-radius: 28px 28px 28px 0;
    background-color: #79D7BE;
    color: black;
    float: left;
    padding: 10px;
    overflow: hidden;
    max-width: 100%;
}
.date {
    float: none;
    border-radius: 50px;
    background-color: #79D7BE6f;
    text-align: center;
    padding: 10px;
    overflow: hidden;
    max-width: 100%;
}
.selected {
    border: solid 5px #2E5077;
}
.pending {
    opacity: 0.5;
}
.retry {
    border: solid 2px var(--themeColor);
}
.retry:after {
    content: "";
    background-image: url("/assets/get/?i=noInternet&p=%230B409C&s=%23FFE867");
    background-size: cover;
    display: inline-block;
    width: 40px;
    height: 40px;
}
.retry:hover:after {
    background-image: url("/assets/get/?i=Atualizar&p=%230B409C&s=%23FFE867");
}
.mention {
    color: var(--themeColor);
    cursor: pointer;
}
.you .mention  {
    color: #FFE867;
}
.container img:nth-child(2) {
    max-width: 20px;
    max-height: 20%;
    float: none;
    margin-right: 0px;
}
/* GIF do Tenor */
img[alt="GIF do Tenor"] {
    max-width: 200px;
    max-height: 100%;
    float: none;
}
/* Online e Offline */
.online, .offline {
    display: inline-block;
    border-radius: 50%;
    width: 10px;
    height: 10px;
}
.online {
    background-color: green;
}
.offline {
    background-color: red;
}

/************ Classes de titlePanel ************/
/* [vazio] -> Somente titulo                   */
/* .msg -> inclui botao de informacao (mainDiv)*/
/* .edit -> Opcoes ao selecionar uma mensagem  */
/* ou postagem (apagar, compartilhar, editar)  */
/***********************************************/
#infoButton {
    display: none;
    float: right;
    height: 100%;
    width: 15%;
    padding: 0px;
}
#editSelect {
    display: none;
    height: 100%;
    width: 100%;
}
.msg #infoButton {
    display: block;
}
.msg #curTitle {
    width: 85%;
}

.edit #curTitle, .edit #infoButton {
    display: none;
}
.edit #editSelect {
    display: block;
}
/********* Classes de editSelect *********/
/* .himOpt -> Mostra opções que podem ser*/
/* usadas quando outra pessoa enviou     */
/* aquela mensagem ou postagem           */
/* (Sem apagar, editar; com info.usuario)*/
/* .youOpt -> Mostra opções que podem ser*/
/* usadas quando você enviou aquela      */
/* mensagem ou postagem                  */
/* (Com apagar, editar; sem info.usuario)*/
/*****************************************/
#editSelect.himOpt button.youOpt, #editSelect.youOpt button.himOpt {
    display: none;
}
#editSelect.himOpt button.himOpt, #editSelect.youOpt button.youOpt {
    display: block;
}
#editSelect.himOpt button {
    width: 25%;
}
#editSelect.youOpt button {
    width: 20%;
}



/********* Classes de mainDiv *********/
/* [vazio] -> Somente painel principal  */
/* (Sem campo de envio de mensagem)     */
/* .msg -> Campo de envio de mensagem   */
/* .sel -> Campo de envio de mensagem   */
/* com painel de selecao aberto         */
/****************************************/
.msg #curPanel {
     height: calc(90% - 75px);
}

.msg #msgPanel, .sel #msgPanel {
    display: inline-flex;
}

.sel #curPanel {
    height: calc(50% - 75px);
}

.sel #msgPanel {
    bottom: calc(40% + 80px);
}

.sel #selectionPanel {
    display: block;
}

@media only screen and (min-width: 768px) {
    /* Versão desktop */
    #searchPanel {
        top: 75px;
    }
    #topPanel {
        height: 75px;
        width: 100%;
    }
    #searchBar {
        width: 300px;
    }
    #logo, #searchBar, #apps {
        height: 75px;
    }
    #seletor {
        width: calc(100% - 375px);
    }
    .hide #mainDiv {
        /*top: 0;*/
        bottom: 0;
        width: calc(100% - 80px);
    }
    #mainDiv {
        /*top: 0;*/
        bottom: 0;
        width: calc(100% - 400px);
    }
    
    .hide #msgPanel {
        /*top: 0;*/
        bottom: 0;
        width: calc(100% - 80px);
    }
    #msgPanel {
        /*top: 0;*/
        bottom: 0;
        width: calc(100% - 400px);
    }
    .sel #msgPanel {
        bottom: 40%;
    }
    
    .hide #selectionPanel {
        /*top: 0;*/
        bottom: 0;
        width: calc(100% - 80px);
    }
    #selectionPanel {
        /*top: 0;*/
        bottom: 0;
        width: calc(100% - 400px);
    }
    #morePanel {
        top: 75px;
        border-radius: 0 28px 28px 0;
    }
}