/* roundshape.css — кружок перестаёт быть кружком: и запись, и лента показывают его фирменным
   супер-эллипсом (просьба владельца: «не кружочки, а суперэллипсочки»).

   Почему отдельным файлом. Правила о форме кружка лежат в трёх разных местах — размер и радиус в
   css/comp-media.css, обрезка в css/addons.css, превью записи в css/comp-rec.css, — и каждый из
   этих файлов правится своим патчем. Патч несёт файл целиком, поэтому один общий файл-надстройка
   дешевле трёх правок и не спорит с соседями. Подключается списком $addonCss в index.php, то есть
   ПОСЛЕ всех перечисленных: при равной силе селектора выигрывает он. Когда форма кружка переедет
   в comp-media.css по другому поводу, эти правила стоит внести туда, а файл убрать.

   Что здесь происходит по существу. Сама фирменная форма — это border-radius:50% плюс
   corner-shape:superellipse, ровно тот же рецепт, что у аватарок и пузырей. Радиус у кружка уже
   50%, поэтому радиус не трогаем нигде: добавляем только corner-shape. Мешают две вещи, обе
   намеренные и обе снимаются точечно.

   1) Внутри ленты форму гасит `#messages *{corner-shape:round}` из layout.css — правило проекта
      после неверно закрытой #150. Поэтому селекторы здесь нарочно тяжелее звёздочки: id + классы.
   2) Обрезка кадра кружка сделана через clip-path (addons.css, #150), а clip-path про corner-shape
      не знает вовсе: `inset(0 round 50%)` — это эллипс, и он срезал бы у супер-эллипса ровно те
      углы, ради которых он и нужен. Значит у кружка обрезку возвращаем overflow:hidden, который
      corner-shape уважает.
      Это безопасно, и вот почему: #150 ловил СОРВАННЫЙ КЛИП у композитных слоёв внутри кадра, а
      источников таких слоёв у загруженного кружка не осталось — плашкам времени и длительности
      backdrop-filter снял тот же #150 (addons.css), а слой-заглушку .media-blur после показа
      видео снимает visibility:hidden (scrollcalm.css). Пока видео ещё едет, заглушка жива — если
      на тёмном кадре в этот момент мелькнёт прямой уголок, это она, и это единственное место,
      где стоит присмотреться.
      Кадры-НЕкружки не трогаем вовсе: у них clip-path остаётся как был. */

/* Кадр кружка в ленте: обрезка формой, а не эллипсом. */
#messages .media-frame.round{clip-path:none;corner-shape:superellipse(2.6)}
/* Само видео/картинка внутри уже несут border-radius:50% (comp-media.css) — добавляем им форму,
   чтобы кадр был обрезан дважды и одинаково: родителем и самим содержимым. */
#messages .media-frame.round .media-img,
#messages .media-frame.round .media-vid{corner-shape:superellipse(2.6)}
/* Кнопки на кружке — тем же силуэтом (просьба владельца «с кнопкой эллипс»): круглая кнопка
   поверх супер-эллипса читалась бы как деталь из другого набора. Радиус у них свой, 50%. */
#messages .media-frame.round .play-btn,
#messages .media-frame.round .ring-btn{corner-shape:superellipse(2.6)}

/* Превью во время записи — той же формой, чтобы человек видел, каким кружок уйдёт. Оверлей живёт
   вне ленты, форму ему звёздочка из tokens.css и так даёт, но она читает --corner-shape: выбери
   человек в пульте «Круглую», и запись разошлась бы с лентой, где форма прибита. Прибиваем и тут —
   тем же значением, что у пузырей в #messages. */
#round-overlay .ro-frame{corner-shape:superellipse(2.6)}