/* Importando a fonte "Inter" do Google Fonts para ser usada no documento */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");

/* Resetando margens, preenchimentos e caixas para todos os elementos e definindo a fonte padrão como "Inter" */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
}

/* Definindo o tamanho base da fonte como 16 pixels */
:root {
    font-size: 16px;
}

/* Estilos gerais do corpo do documento */
body {
    background: url("../images/background.jpg"); /* Imagem de fundo */
    color: #f2f2f2; /* Cor do texto */
}

/* Estilizando o contêiner principal para centralizar seu conteúdo */
.container {
    width: 100%;
    height: 100dvh; /* Altura igual à altura da janela de visualização */
    display: flex;
    align-items: center;
    justify-content: center;
}

/*------------ Estilos do formulário de login ------------*/
.login {
    width: 100%;
    max-width: 330px;
    background-color: rgba(33, 33, 33, 0.8); /* Cor de fundo do formulário */
    border-radius: 5px;
    padding: 20px;
}

.login > h2 {
    text-align: center; /* Alinhamento centralizado para o título */
    font-weight: 600; /* Peso da fonte */
    font-size: 1.5rem; /* Tamanho da fonte */
    margin-bottom: 20px; /* Margem inferior */
}

.login__form {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espaçamento entre os elementos do formulário */
}
 /* Estilos para a entrada de texto do formulário de login */
.login__input {
    border: none;
    padding: 15px;
    font-size: 0.85rem;
    font-weight: 600;
    background-color: rgba(18, 18, 18, 0.8);
    color: #f2f2f2;
    outline: none;
    border-radius: 5px;
}

.login__input:focus {
    outline: 2px solid #f2f2f2;
}
 /* Estilos para o botão de login */
.login__button {
    border: none;
    padding: 15px;
    border-radius: 5px;
    font-size: 0.85rem;
    font-weight: 700;
    background-color: #ddd;
    cursor: pointer;
    color: #121212;
}

.login__button:hover {
    background-color: #fff;
}
/*------------ Estilos do chat ------------*/
/* Estilos gerais do contêiner do chat */
.chat {
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    justify-content: space-between;
}
/* Estilos para a área de mensagens do chat */
.chat__messages {
    flex-grow: 1;
    padding: 30px 30px 90px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
/* Estilos para o formulário de envio de mensagens */
.chat__form {
    background-color: #191919;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}
/*------------ Estilos para a entrada de texto do chat ------------*/
/* Estilos para a entrada de texto do chat */
.chat__input {
    border: none;
    padding: 15px;
    border-radius: 8px;
    flex-grow: 1;
    background-color: #212121;
    outline: none;
    color: #f2f2f2;
    font-size: 1rem;
}
/*------------ Estilos para o botão de envio de mensagens ------------*/

/* Estilos para o botão de envio de mensagens */
.chat__button {
    border: none;
    background: none;
    color: #f2f2f2;
    cursor: pointer;
}
.chat__button > span {
    font-size: 1.8rem;
}

/*------------ Estilos para as mensagens do chat ------------*/

/* Estilos para cada mensagem */
.chat__messages > div {
    padding: 10px;
    width: 100%;
    max-width: 250px;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 15px;
    line-height: 22px;
}
/*------------ Estilos específicos para mensagens enviadas pelo usuário ------------*/

/* Estilos para mensagens enviadas pelo próprio usuário */
.message--self {
    background-color: rgba(33, 33, 33, 0.8);
    color: #fff;
    border-radius: 10px 10px 0 10px;
    align-self: flex-end;
}

/*------------ Estilos específicos para mensagens enviadas por outros usuários ------------*/

/* Estilos para mensagens enviadas por outros usuários */
.message--other {
    background-color: rgba(201, 201, 201, 0.8);
    color: #000000;
    border-radius: 0 10px 10px 10px;
    align-self: flex-start;
}

.message--self > span,
.message--other > span {
    display: block;
    margin-bottom: 4px;
}
/*------------ Estilos para o horário das mensagens ------------*/

/* Estilos para o horário das mensagens do usuário */
.message--time--self {
    margin-top: 5px;
    font-weight: 700;
    color: rgb(175, 175, 175);
    text-align: end;
}
/* Estilos para o horário das mensagens do usuário */
.message--sender {
    margin-bottom: 15px;
    font-weight: 700;
    color: cadetblue;
}
/* Estilos para o horário das mensagens de outros usuários */
.message--time--other {
    display: block;
    margin-top: 5px;
    font-weight: 700;
    color: rgb(41, 41, 41);
    text-align: start;
}
/* Estilos para notificações */
.notification {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding: 10px;
    margin: 10px auto;
    max-width: 80%;
    color: white;
    font-weight: bold;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Estilos para o botão de upload de arquivo */
.chat__file-upload {
    border: none;
    background: none;
    color: #f2f2f2;
    cursor: pointer;
}
.chat__file-upload > span {
    font-size: 1.8rem;
}

/* Estilos para ocultar o input de arquivo */
#file-upload {
    display: none;
}
.image-preview-container {
    position: relative;
    height: 0;
    overflow: hidden;
    padding-top: 50px; /* Altura da barra de preview */
}

.image-preview {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 100px; /* Largura máxima do preview */
    max-height: 50px; /* Altura máxima do preview */
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: #fff;
}
/* CSS para as mensagens de imagem */
.message img {
    max-width: 200px; /* Defina o tamanho máximo da largura da imagem */
    max-height: 200px; /* Defina o tamanho máximo da altura da imagem */
    display: block; /* Para centralizar a imagem */
    margin: 0 auto; /* Para centralizar a imagem */
    border-radius: 8px; /* Defina um raio de borda para arredondar as bordas */
}
/* Estilo para o botão de exclusão da imagem */
.delete-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 0;
    width: 24px;
    height: 24px;
}

/* Estilo para o ícone do botão de exclusão */
.delete-button svg {
    width: 100%;
    height: 100%;
}

/* Estilo para alterar a cor do ícone do botão de exclusão */
.delete-button svg path {
    fill: #fff; /* Cor do ícone */
}

/* Estilo para o botão de exclusão ao passar o mouse sobre ele */
.delete-button:hover {
    background-color: rgba(255, 255, 255, 0.3); /* Cor de fundo com transparência */
    border-radius: 50%; /* Forma circular */
}
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.zoomed-image {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    cursor: pointer;
    position: relative; /* Permitir posicionamento absoluto do botão de fechar */
}

.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    z-index: 99999;
}
/* Adicione ao seu arquivo CSS */

/* Estilos para o contador de usuários */
.chat__sidebar {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px; /* Ajuste conforme necessário */
    height: 100%;
    background-color: #f5f5f5;
    border-left: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
}

.chat__user-count {
    font-weight: bold;
    margin-bottom: 10px;
}

/* Estilos para o pop-up de usuários */
.user-popup {
    position: absolute;
    top: 30px; /* Posição ajustável */
    right: -10px; /* Posição ajustável */
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    display: none; /* Inicialmente oculto */
    z-index: 999; /* Para ficar por cima do restante */
}
.mention-icon-container-self {
    float: left;
    margin-top: -10px;
    margin-right: 5px;
}
.mention-icon-container-other {
    float: right;
    margin-top: -10px;
    margin-right: 5px;
}