/* tgsize.css — размеры ленты по донору (телеграм-десктоп). ОТДЕЛЬНЫЙ ФАЙЛ НАРОЧНО.

   Владелец прислал таблицу замеров «у нас / у донора» и попросил подогнать всё разом, но так,
   чтобы можно было откатить. Поэтому это не правки в существующих файлах, а один надстроечный
   лист, который подключается ПОСЛЕДНИМ и только переопределяет числа. Откат = убрать строку
   'css/tgsize.css' из $addonCss в index.php (или удалить файл: is_file там уже проверяется).
   Ни одно правило ниже не заводит новой механики — вся она уже есть в addons.css и components.css,
   здесь только значения.

   Строки таблицы, закрытые здесь, помечены номерами. Чего тут НЕТ и почему — в конце файла. */

/* (1) Высота пузыря в одну строку: 49–50 → ~34. Это не «уменьшить padding», а перенос времени
   В КОНЕЦ ПОСЛЕДНЕЙ СТРОКИ, как у донора: пятнадцать лишних пикселей в каждом пузыре брались от
   того, что подпись стояла своей строкой.
   Механика — float, а не флекс: плавающий элемент встаёт на ту строку, где встретился, то есть на
   последнюю строку текста, а не влезет — уходит вниз сам. Ровно то же поведение у донора.
   :not(:has(.reactions)) — обязательное условие, а не осторожность: пилюли реакций живут в той же
   .mmeta (задумка #193), и уплыви она вправо целиком, они уехали бы вместе со временем. Пузырь с
   реакциями остаётся на прежней раскладке — у донора реакции тоже стоят своей строкой. */
.msgbubble{padding:6px 9px 7px;display:flow-root}
.mtext{display:inline}
.mmeta:not(:has(.reactions)){float:right;display:flex;align-items:center;gap:4px;margin:0 0 0 9px;padding-top:5px}

/* (2) Зазоры: внутри блока 5 → 2, между блоками 5 → 8. Механика (grp-start и сложение gap с
   margin) уже в addons.css — здесь только две цифры: 2 внутри и 2+6=8 между. */
#messages{--msg-gap:2px;--grp-gap:6px}

/* (3) Левое поле до аватарки: 12 → 16. Правый оставляем как был — донор мерился по левому краю. */
#messages{padding-left:16px}

/* (4) Аватарка 28 → 33 и отступ до пузыря 8 → 10.
   !important здесь вынужденный и подписан: размер кружка ставит инлайном сам avatarEl (js/render),
   а инлайну обычным правилом не возразишь. Трогаем ТОЛЬКО кружок в ленте (.deskavatar): в списке
   и в шапке свои размеры, донор про них ничего не говорил. */
.deskavatar{width:33px!important;height:33px!important;font-size:14px!important}
.mline{gap:10px}

/* (5) Воздух вокруг фотографии и плашки даты: 2–5 → 34–45. У донора кадр и дата не стоят в общем
   ритме реплик — вокруг них пауза. Ряду с медиа добавляем её сверху и снизу, плашке дня — свою.
   :has() тут по делу: «ряд, внутри которого есть кадр» — это и есть признак, отдельного класса
   заводить не нужно. */
#messages > .mrow:has(.media-frame, .album-grid){margin-top:20px;margin-bottom:20px}
#messages > .day-chip{margin:34px 0 26px}

/* (6) Плашка даты — по центру КОЛОНКИ СООБЩЕНИЙ, а не всего полотна. У донора она стоит над
   разговором; у нас центрировалась по ширине окна и после переезда ленты влево повисала в пустоте
   справа. Ширину колонки берём ту же, что у строки сообщения (.mline), — тогда центр совпадает
   с центром разговора на любом экране. */
@media not all and (pointer:coarse){
  #messages > .day-chip{justify-content:flex-start}
  #messages > .day-chip button{margin-left:calc(min(78%, 480px) / 2 + 22px);transform:translateX(-50%)}
}

/* (7) Ширина кадра фотографии: 280 → 323. ТОЛЬКО на десктопе, и это прямое указание владельца:
   «на мобиле не должны быть картинки такого размера, как на доноре». Порог — указатель, как у
   всей десктопной раскладки в addons.css. Подпись под кадром идёт за ним: у неё своя ширина,
   иначе шов между кадром и подписью разъедется. */
@media not all and (pointer:coarse){
  .media-frame{width:min(323px,100%);max-width:323px}
  .mcontent > .media-frame:not(.round) + .media-caption{width:min(323px,100%);max-width:323px}
}

/* (8) Рамка вокруг кадра: 2px акцентом → нет. ЭТА СТРОКА СПОРИТ С ЗАДУМКОЙ #195, которую владелец
   заводил сам («рамка цветом пузыря отправителя»), и стоит здесь только потому, что она была в
   присланной таблице. Не понравится — удалить надо ровно эти три строки, остальное не зависит. */
.mmine .mcontent > .media-frame:not(.round),
.mthem .mcontent > .media-frame:not(.round){border:0}

/* ЧЕГО ЗДЕСЬ НЕТ.
   Ширина кадра на телефоне — по прямому указанию владельца остаётся 280.
   Цвет пузыря (у донора светло-зелёный с тёмным текстом, у нас насыщенный акцент с белым) — это
   не размер, а фирменный цвет из пульта оформления; в таблицу он не входил.
   Скругление (у нас ~10 против ~7) — это суперэллипс, то есть фирменная форма, а не промах. */