/* Email do usuário */
#usuarioInfo {
  color: white;                   /* Texto branco */
  font-weight: 900;               /* Texto bem negrito */
  font-size: 18px;                /* Tamanho da fonte */
  margin-left: 20px;              /* Espaço à esquerda */
}

/* Botão "Sair" */
header button { 
  background: transparent;          /* Fundo vermelho */
  color: #fff;                  /* Texto branco */
  border: 1px solid #ff4d4d;    /* Borda vermelha para destacar */ 
  padding: 8px 16px;              /* Espaçamento interno */
  border-radius: 4px;             /* Cantos arredondados */
  cursor: pointer;                /* Cursor de mãozinha */
  font-weight: 900;               /* Texto em negrito */
  font-size: 16px;                /* Tamanho da fonte */
  width: 100px;                   /* Largura fixa */
  text-align: center;             /* Centraliza texto */
  margin-right: 20px;             /* Espaço à direita */
}

/* Lista de mensagens */
#listaMensagens {
  margin-top: 20px;               /* Espaço acima */
  width: 800px;                   /* Largura padrão */
  max-width: 95%;                 /* Ajusta em telas menores */
  background: #fff;               /* Fundo branco */
  padding: 20px;                  /* Espaçamento interno */
  border-radius: 8px;             /* Cantos arredondados */
  box-shadow: 0 2px 6px rgba(0,0,0,0.2); /* Sombra leve */
  box-sizing: border-box;         /* Inclui padding/borda no cálculo da largura */
}

.mensagem-item {
  display: flex;                  /* Layout flexível */
  justify-content: space-between; /* Espaço entre texto e botão */
  align-items: center;            /* Alinha verticalmente */
  padding: 8px;                   /* Espaçamento interno */
  border-bottom: 1px solid #eee;  /* Linha divisória */
}

/* Texto da mensagem */
.mensagem-item span {
  word-wrap: break-word;          /* Quebra palavras longas */
  overflow-wrap: break-word;      /* Compatibilidade extra */
  white-space: pre-wrap;          /* Mantém quebras de linha */
  flex: 1;                        /* Ocupa espaço flexível */
  margin-right: 15px;             /* Espaço à direita */
  display: block;                 /* Ocupa linha inteira */
  max-width: calc(100% - 120px);  /* Reserva espaço para botão */
}

/* Botão delete */
.btn-delete {
  background: #ff4d4d;            /* Fundo vermelho */
  border: none;                   /* Sem borda */
  font-size: 22px;                /* Tamanho do emoji */
  cursor: pointer;                /* Cursor de mãozinha */
  padding: 4px;                   /* Espaço interno mínimo */
  border-radius: 4px;             /* Cantos arredondados */
  width: auto !important;         /* Largura automática */
  min-width: unset !important;    /* Remove largura mínima herdada */
  max-width: fit-content;         /* Ajusta ao conteúdo */
  text-align: center;             /* Centraliza emoji */
  flex-shrink: 0;                 /* Impede compressão pelo flexbox */
}

.btn-delete:hover {
  color: #e60000;                 /* Emoji fica vermelho escuro ao passar o mouse */
}