SpardaPrime

Изменил немного стили

.from-me {
       position: relative;
       display: none; // добавил свойство
       padding: 10px 20px;
       color: white;
       background: #0b93f6;
       border-radius: 25px;
       float: right;
  }

 .loud {
       display: block; // добавил свойство
       animation-duration: 1.5s;
       animation-fill-mode: both;
       animation-timing-function: ease-in-out;
       transform-origin: center center;
       animation-name: loud;
  }
.content {
  width: 100%; // и тут у тебя ошибка widht
  height: 500px
}

javascrpt код по которому при прокрутке до конца страницы выскакивает блок

const sms = document.querySelector('.from-me');
    
const scrollHeight = Math.max(
    document.body.scrollHeight, document.documentElement.scrollHeight,
    document.body.offsetHeight, document.documentElement.offsetHeight,
    document.body.clientHeight, document.documentElement.clientHeight
  );

  document.addEventListener('scroll',()=>{
    window.pageYOffset+document.documentElement.clientHeight===scrollHeight&&sms.classList.add('loud');
  })

MutationObserver тебе в помощь , суть такова:

const someElement = document.getElementById('some-element'); // элемент за которым следить

const callback = ()=>{
const otherElement = document.getElementById('other-el');
otherElement .style.display='none';
 }  // делаешь что тебе нужно с другим элементом

const observe = new MutationObserver(callback);//вызываем класс с колбеком

observe.observe(someElement ,{ // вешаешь слушатель , указываешь за каким элементом следить и обьект за какими изменениями следить
    attributes: true,
    childList: true,
    subtree: true
})