imko

subgrid или обычный грид но для дивов display: contents

Ну так в левую колонку кинь просто флекс с растущим элементом с точками
https://codepen.io/herr-imko/pen/bGPVLKV

Ну например сеткой https://codepen.io/herr-imko/pen/NWmQGqy

Ребята зачем nth-childы
https://codepen.io/herr-imko/pen/vYMwaqz

не нужен тут animation, просто транзишон укажи и трансформ на ховер сделай

.chatBg {
    pointer-events: none;
}

А может просто

:last-child {
    margin-bottom: 0;
}

?

Нету

https://developer.mozilla.org/en-US/docs/Web/CSS/s...

100% величина относительно родителя, у родителя высоты тоже своей нет, она не может быть высчитана, переход от 0 к ничему соответственно не может быть плавным. У тебя классический баян должен получиться. Если можно гарантировать что текст не будет выше какой-либо высоты (как в комменте 300 пикселей например) то проще всего менять max-height с нуля до этой величины, а так по хорошему текст надо кинуть в обертку, у нее менять высоту/максимальную высоту с нуля до ее scrollHeight, которая будет равна высоте ее контента - текста. Есть еще хак с grid-template-rows 0fr/1fr но не везде работает

Сделать грид-2 тоже в 4 колонки, а иннеру задать column-span

Добавь ей неподвижную обертку которая будет ловить наведение, а уже сама карточка крутиться будет. Соответственно пока мышка в пределах изначального контура карточки (неподвижной обертки) с карточки не слетит ховер

Кейфреймс
Ну примерно так на наведение уезжают вверх с середины, без наведения приезжают снизу в середину. Разве что еще чуть чуть поковыряться чтоб она при появлении не проигрывалась

Сделать общие ряды, первый блок второй колонки занимает два ряда, второй блок первой тоже, остальные по одному

Область не может быть непрямоугольной