/* Слой Connector: ОКНО ЗВОНКА (задача К10, 2026-08-24).
   Эталон вида - docs/ЭТАЛОН_TELEGRAM.md, раздел «Окно звонка».

   Этот файл грузится и в самом Element, и внутри кадра звонка
   (widgets/element-call/index.html лежит на ТОМ ЖЕ происхождении, поэтому
   врезка Caddy попадает в обе страницы). Все правила ниже опираются
   ТОЛЬКО на наши собственные атрибуты data-conn-*, которые проставляет
   connector-call.js по СТРУКТУРЕ узла. Классы element-call в сборке
   хешированные (_buttons_1qffb_67 и подобные) - они меняются при каждой
   пересборке апстрима, цепляться за них нельзя (правило навыка
   layering-over-foreign-spa). */

/* ------------------------------------------------------------------ */
/* Ряд кнопок управления звонком на узком экране.                       */
/*                                                                      */
/* Живой замер 24.08.2026 на 390px: ряд element-call - flex с
   flex-wrap:nowrap и gap:12px, суммарная ширина 428px в кадре шириной
   390px, то есть от x=-19 до x=409. Итог на экране владельца: слева
   срезана кнопка настроек, СПРАВА СРЕЗАНА КРАСНАЯ КНОПКА «ЗАВЕРШИТЬ
   ЗВОНОК» - самая нужная кнопка в окне звонка уходила за край.

   Лечим двумя честными способами и НИ ОДНОЙ кнопки не прячем:
   1) меньше зазор - шесть кнопок (368px) с зазором 4px укладываются
      в 388px и влезают в 390;
   2) разрешаем перенос - если состав кнопок в другом состоянии звонка
      окажется шире, ряд перенесётся на вторую строку, а не срежется. */
@media (max-width: 480px) {
  [data-conn-callbar="1"] {
    gap: 4px !important;
    row-gap: 6px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}