---

<div class="scrollable-ref h-[46.6rem] -mx-3 overflow-y-auto
            [&::-webkit-scrollbar]:w-0 [&::-webkit-scrollbar]:bg-transparent
            [&_.simplebar-content]:p-0
            [&_.simplebar-track.simplebar-vertical]:w-[10px]
            [&_.simplebar-track.simplebar-vertical]:mr-0.5
            [&_.simplebar-track.simplebar-vertical_.simplebar-scrollbar]:before:bg-slate-400/20"
     data-simplebar="init">
  <div class="simplebar-wrapper" style="margin: 0px;">
    <div class="simplebar-height-auto-observer-wrapper">
      <div class="simplebar-height-auto-observer"></div>
    </div>
    <div class="simplebar-mask">
      <div class="simplebar-offset" style="right: 0px; bottom: 0px;">
        <div class="simplebar-content-wrapper" style="height: 100%; overflow: hidden;">
          <div class="simplebar-content" style="padding: 0px;">
            <!-- Вот сюда добавляем flex-col-reverse -->
            <div class="flex flex-col-reverse">
              <!-- сообщения в обычном порядке (старые → новые) -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>