/* squircle.css — что делать с формой углов там, где браузер не понимает corner-shape.

   ЗАЧЕМ ЭТОТ ФАЙЛ ВООБЩЕ. corner-shape — свойство совсем свежее (в Chrome оно с 139-й версии).
   Браузер постарше не ругается на него, а МОЛЧА выбрасывает: суперэллипс превращается в обычное
   скругление, а переключатель «Форма углов» перестаёт что-либо менять. Человек видит выбранный
   «Суперэллипс» и не тот результат и идёт чинить настройки. Настройки исправны — читать значение
   некому.

   ПОЧЕМУ ЗДЕСЬ БОЛЬШЕ НЕТ МАСОК. Первая попытка подменяла форму маской-суперэллипсом. Мысль была
   верной, результат — нет: то, что получалось, читалось не как фирменная форма, а как «квадрат,
   которому не до конца скруглили углы». Хуже обеих честных крайностей. Плюс маска не бесплатна:
   она вешает свой слой на каждый элемент, которому применена, и платить за это пришлось бы ровно
   тем слабым устройствам, ради которых всё и затевалось.

   ЧТО ВМЕСТО. Честная круглая форма. Не «почти суперэллипс», а другая форма, выбранная нарочно:
   круг — самостоятельное решение и выглядит законченным, а недоделанный суперэллипс выглядит
   поломкой. Приложение на старом браузере становится чуть другим на вид — и это правильнее, чем
   притворяться, что оно такое же.

   Стоит это НИЧЕГО: одни радиусы, ни одной маски, ни одного лишнего слоя. И включается только по
   html.no-corner-shape, который ставит js/call.js по CSS.supports, — браузер, умеющий форму сам,
   этот файл не замечает. */

/* Общий радиус пузырей и всего, что от него считается (--bub-radius читают 19 мест в вёрстке —
   пузыри, карточки, поля, кнопки). Одна строка делает круглее сразу всё, что должно округлиться
   вместе, и ничего не ломает: это ровно тот рычаг, который для радиуса и заведён.
   Множитель 1.7, а не «в круг»: пузырь в три строки, скруглённый по половине высоты, превращается
   в капсулу и перестаёт читаться как пузырь. Круглым должно стать короткое, а не всё подряд. */
html.no-corner-shape{ --bub-radius:24px }

/* ---- Короткое и мелкое — в полный круг ----
   Пилюли шапки, значки, чипы, кнопки: у них высота мала, и полукруглый торец для них — родная
   форма, а не компромисс. Именно они бросаются в глаза первыми, и именно они выглядели
   «квадратно-круглыми». */
html.no-corner-shape .headseg,
html.no-corner-shape #closeness-badge,
html.no-corner-shape #msg-search,
html.no-corner-shape .day-chip button,
html.no-corner-shape .jump-down,
html.no-corner-shape #pin-bar,
html.no-corner-shape #pin-count,
html.no-corner-shape .composer-pill,
html.no-corner-shape #call-mobbar .cb-pill,
html.no-corner-shape #messages .call-chip{
  border-radius:999px;
}

/* Круглые кнопки — настоящим кругом. С corner-shape они были скруглёнными квадратами и это
   задумано; без него честнее круг, чем квадрат с большими углами. */
html.no-corner-shape #send-btn,
html.no-corner-shape #rec-btn,
html.no-corner-shape .call-btn,
html.no-corner-shape .ring-btn,
html.no-corner-shape .x-btn,
html.no-corner-shape #head-search-btn,
html.no-corner-shape .back-btn{
  border-radius:50%;
}

/* Аватарки — кружками. Они квадратные, поэтому 50% даёт ровный круг, и это самая заметная деталь
   из всех: с неё и начался разговор. */
html.no-corner-shape .avatar,
html.no-corner-shape .deskavatar,
html.no-corner-shape .head-avatar,
html.no-corner-shape .call-avatar,
html.no-corner-shape .av-img{
  border-radius:50% !important;
}

/* Крупные поверхности — мягче, но не капсулой: у карточки и модального листа своя высота, и
   полный круг превратил бы их в таблетку. */
html.no-corner-shape .glass-card,
html.no-corner-shape .modal-sheet,
html.no-corner-shape .media-frame,
html.no-corner-shape #call-overlay .call-card,
html.no-corner-shape #call-overlay .call-actions,
html.no-corner-shape #call-overlay .call-local{
  border-radius:26px;
}

/* Опознавательный знак для приборной панели: по нему видно, что лист правда доехал и применился.
   На вид не влияет ничем. */
html.no-corner-shape{ --squircle-fallback:1 }

/* Значок близости: где формы нет — полный круг, как всё короткое выше. Оболочка и цветной кружок
   внутри должны округлиться ВМЕСТЕ, иначе получится круг внутри квадрата — ровно то «квадратно-
   круглое», от которого и уходим. */
html.no-corner-shape #closeness-badge,
html.no-corner-shape #closeness-badge::after{ border-radius:50% }