* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Roboto';
    color: white;
    list-style: none;
}

:root {
    --uicol-light: #202C33;
    --uicol-dark: #111B21;
    --uicol-hover: #ffffff19;

    --uicol-light-stroke: #2F3B43;
    --uicol-dark-stroke: #262E34;
    --uicol-contact-stroke: #222D34;

    --uicol-text-light: #8696A0;

    --uicol-highlight: #00A884;
    --uicol-selected: #0A332C;
}

.clickable {
    cursor: pointer;
}

.hoverable:hover{
    background-color: var(--uicol-hover);

}


body {
    height: 100vh;
    width: 100vw;
    display: flex;
}

aside {
    flex-grow: 1;

    display: flex;
    border-right-style: solid;
    border-right-width: 1px;
    border-color: var(--uicol-dark-stroke);
}

/* Menus */

nav {
    width: 60px;
    height: 100%;
    background-color: var(--uicol-light);

    display: flex;
    flex-direction: column;

    padding-block: 10px;
    align-items: center;
    place-content: space-between;

    border-right-style: solid;
    border-right-width: 1px;
    border-color: var(--uicol-light-stroke);
}

ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.nav-item {
    display: flex;
    align-items: center;
    place-content: center;
    cursor: pointer;

    width: 40px;
    height: 40px;
    border-radius: 100%;
}



/* Lista de Contatos */

.contact-list {
    width: 100%;
    background-color: var(--uicol-dark);

    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.contact-list .navigation{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-inline: 24px;

}

.contact-list-header {
    display: flex;
    flex: 0 0 auto;
    justify-content: space-between;
    align-items: center;
    height: 60px;

    width: 100%;
    box-sizing: border-box;

    font-size: 16px;
    color: white;
}

.contactlist-side-buttons {
    display: flex;
    flex-direction: row;
}

.chat-search-bar {
    background-color: var(--uicol-light);
    appearance: none;
    height: 2rem;
    border-radius: 10px;
    display: flex;
    gap: 1rem;
}

.lupa-icon {
    margin-left: 12px;
}

input {
    width: 100%;
    height: 100%;

    background-color: transparent;
    border: none;
    outline: none;
    caret-color: white;

    color: white;
    font-size: 1rem;
    /* Falta tirar o x de Limpar input */
}

.chat-filters {
    display: flex;
    gap: 8px;

    text-align: center;
    color: var(--uicol-text-light);
}

.filter {
    padding-inline: 12px;
    padding-block: 6px;
    background-color: var(--uicol-light);
    border-radius: 15px;
}

.filter.selected {
    background-color: var(--uicol-selected);
    color: var(--uicol-highlight);
}

.archive {
    display: flex;
    flex-direction: row;
    position: relative;
    align-items: center;

    gap: 29px;
    height: 46px;


}

h3 {
    font-weight: 350;

}

.archive p {
    color: var(--uicol-highlight);
    position: absolute;
    right: 0px;
}

/* Contatos */

.contact {
    height: 72px;
    display: flex;
    gap: 16px;
    align-items: center; 
    padding-inline: 24px;
}
.profile-photo{
    width: 50px;
    height: 50px;
}

.chat-details{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;


    padding-block: 14px;    
    border-top-style: solid;
    border-top-width: 1px;
    border-color: var(--uicol-dark-stroke);
}

.contact-header{
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.message-preview{
    color: var(--uicol-text-light);
}



/* Chat */


main {
    flex-grow: 3;
    max-width: 66%;
    display: flex;
    flex-direction: column;
}

.chat-header {
    height: 60px;
    display: flex;
    justify-content: space-between;
    background-color: var(--uicol-light);
}

.chat-body {
    flex-grow: 1;
    background-color: var(--uicol-dark);
}

.chat-footer {
    height: 60px;
    background-color: var(--uicol-light);
}

.contact-info{
    height: 100%;
    padding-inline: 16px;
    padding-block: 9px;

    display: flex;
    align-items: center;
    gap: 16px;
}

.contact-buttons{
    height: 100%;
    padding-inline: 16px;
    padding-block: 9px;

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 30px;

}

.contact-button{
    display: flex;
    align-items: center;
    place-content: center;
    cursor: pointer;
    border-radius: 100%;
}
.contact-button img{
    width: 24px;
    height: 24px;
    width: 100%;
    margin: 4px;
}

/* CHAT BODY */

.chat-body{
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-inline: 72px;
    overflow: auto;
    overflow-x: hidden;
  }

.message{
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    padding-inline: 8px;
    padding-block: 8px;
    max-width: 70%;

}

.message.sent{
    align-self: flex-end;
    background-color: #005C4B;
}

.message.received{
    align-self: flex-start;
    background-color: #202C33;
}

.message-data{
    align-self: flex-end;
    display: flex;
    align-items: center;
    gap: 2px;
    color: rgba(255, 255, 255, 0.60);
}
.message-data span{
    color: #FFF4
}

/* CHAT FOOTER (Para escrever mensagens) */

.chat-footer{
    display: flex;
    padding-block: 11px;
    padding-inline: 16px;
    align-items: center;
    gap: 8px;
}

.attach{
    display: flex;
    gap: 16px;
}

.chat-button{
    width: 30px;
}

.message-box{
    flex-grow: 1;
    background-color: #2A3942;
    border-radius: 4px;
    padding-inline: 16px;
    padding-block: 10px;
}