/* ═════ Sentos · Экран звонка ═════
   Перенесено из прототипа newfront/call.css без макета
   телефона: в приложении экран занимает окно целиком.
   Свёрнутая плашка, входящий вызов и подробности связи
   дописаны здесь — в прототипе их не было. */

/* ───────────────────────────── Сцена ───────────────────────────── */

/* В прототипе экран лежал внутри макета телефона, поэтому был
   absolute. Здесь он накрывает всё приложение: разговор важнее любой
   переписки, а свернуть его можно плашкой внизу. */
.call-screen {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: contain;
  background: #000;
}

.call-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Видео собеседника прячет и показывает call-ui.js атрибутом hidden.
   В макете это делал его собственный скрипт, поэтому там стояло
   безусловное display: none — и в приложении видео не появлялось
   никогда: снятый hidden правило из стилей не перебивает. */
.call-remote-video {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.call-remote-video:not([hidden]) { display: block; }

.call-portrait {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

/* Фотография собеседника занимает кадр целиком, как в макете. */
.call-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  /* Кадр чуть приглушён: поверх него живут белый текст и кнопки. */
  filter: brightness(0.96);
}

/* Фотографии может не быть — тогда посреди экрана круг с буквой.
   Растянутый на весь кадр, он превращался в огромный овал: у аватара
   скругление в половину размера. */
.call-avatar {
  width: min(44vw, 168px);
  height: min(44vw, 168px);
  font-size: min(17vw, 64px);
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.72);
}

/* Фотография есть — буква не нужна. */
.call-portrait:not(.no-photo) .call-avatar { display: none; }

/* Затемнение сверху и снизу — вместо плашек под текстом */
.call-shade {
  position: absolute;
  inset: auto 0 auto 0;
  pointer-events: none;
}

.call-shade-top {
  top: 0;
  height: 34%;
  max-height: 240px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.42) 40%, rgba(0, 0, 0, 0) 100%);
}

.call-shade-bottom {
  bottom: 0;
  height: 42%;
  max-height: 320px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.36) 46%, rgba(0, 0, 0, 0) 100%);
}

/* ───────────────────────────── Шапка ───────────────────────────── */

.call-top {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  gap: 12px;
  padding: calc(14px + env(safe-area-inset-top)) 16px 0;
}

.call-title {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

.call-title strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "SF Pro Display", "SF Pro Text", sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

.call-title span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.74);
  font-variant-numeric: tabular-nums;
}

/* Круглая стеклянная кнопка шапки. Подложка тёмная, а не белая: кадр
   может быть каким угодно, и светлая заливка на светлом фоне пропадает. */
.call-chip {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(22, 22, 24, 0.46);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.call-chip .icon {
  width: 24px;
  height: 24px;
}

.call-screen .icon,
.call-pill .icon {
  display: block;
  width: 26px;
  height: 26px;
  fill: currentColor;
}

/* Деления связи — те же три палочки, что в текущем экране звонка */
.call-quality {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  padding: 0 0 13px;
  border: 0;
  border-radius: 50%;
  background: rgba(22, 22, 24, 0.46);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.call-quality i {
  width: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.32);
  transition: background-color 200ms ease;
}

.call-quality i:nth-child(1) { height: 7px; }
.call-quality i:nth-child(2) { height: 12px; }
.call-quality i:nth-child(3) { height: 17px; }

.call-quality[data-level="good"] i { background: #4ad07d; }
.call-quality[data-level="poor"] i:nth-child(-n + 2) { background: #f2c14e; }
.call-quality[data-level="bad"] i:nth-child(1) { background: var(--brand-500); }

/* ───────────────── Своё окошко: фронтальная камера ─────────────────

   Окошко появляется мягко и с загрузкой: сначала размытый кадр и
   колечко, потом картинка проясняется — так же, как настоящая камера
   отдаёт первый кадр не мгновенно. Закрывается тем же fade.
   Перетаскивается по всему экрану, разворот камеры — плавный. */

.call-self {
  position: absolute;
  z-index: 4;
  /* Стартовый угол — правый верхний, под шапкой: в левом окошко
     закрыло бы кнопку «свернуть». Отпущенное окно доезжает до
     ближайшего угла, и угол проставляет call-ui.js в data-corner. */
  top: calc(74px + env(safe-area-inset-top));
  right: 14px;
  width: 108px;
  aspect-ratio: 3 / 4;
  border-radius: 22px;
  overflow: hidden;
  background: #16171a;
  cursor: grab;
  touch-action: none;
  /* Safari на iPhone иначе покажет по долгому нажатию своё меню
     «Сохранить изображение» и утащит картинку вместо окошка. */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  opacity: 1;
  transform: translate3d(var(--self-x, 0px), var(--self-y, 0px), 0);
  transition:
    opacity 260ms ease,
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Пока окошко тянут, оно должно идти за пальцем без сглаживания */
.call-self.is-dragging {
  cursor: grabbing;
  transition: opacity 260ms ease;
}

/* Появление и закрытие — одно и то же состояние, только в разные стороны */
.call-self.is-hidden {
  opacity: 0;
}

/* Момент расстановки: окошко встаёт на место без перехода */
.call-self.is-placing {
  transition: none;
}

.call-self-video,
.call-self-freeze,
.call-self-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  pointer-events: none;
  transition:
    filter 260ms ease,
    opacity 420ms ease;
}


/* Кадр ещё не пришёл: размытие и колечко */
.call-self.is-loading .call-self-video,
.call-self.is-loading .call-self-photo {
  filter: blur(12px) brightness(0.7);
  opacity: 0.7;
}

/* Камера меняется: пока новая просыпается, окошко размыто. Держим
   размытие переходом, а не заданной наперёд анимацией: сколько займёт
   смена камеры, заранее не знает никто — на одном телефоне это доля
   секунды, на другом полторы. Снимается размытие тогда же, когда от
   новой камеры приходит первый кадр. */
.call-self.is-flipping .call-self-video,
.call-self.is-flipping .call-self-freeze {
  filter: blur(12px) brightness(0.78);
}

.call-self-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}

.call-self.is-loading .call-self-loader {
  opacity: 1;
  animation: call-self-spin 720ms linear infinite;
}

@keyframes call-self-spin {
  to { transform: rotate(360deg); }
}

.call-self-flip {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.call-self-flip .icon {
  width: 21px;
  height: 21px;
}

/* ───────────────────────────── Кнопки ───────────────────────────── */

.call-actions {
  position: relative;
  z-index: 3;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px calc(30px + env(safe-area-inset-bottom));
  /* Размеры считаем от ширины самой полосы, а не от окна браузера: в
     макете телефона на ПК окно широкое, а полоса узкая, и кнопки
     сплющивались. Единицы cqi доступны только потомкам, поэтому от
     ширины полосы считается размер кнопок, а промежуток фиксирован.
     Первое значение ширины — запасное для старых браузеров. */
  container-type: inline-size;
  gap: 16px;
}

.call-button {
  position: relative;
  flex: none;
  width: 64px;
  height: 64px;
  width: clamp(52px, 17cqi, 64px);
  height: clamp(52px, 17cqi, 64px);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(22, 22, 24, 0.46);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  /* Движение только от нажатия: масштаб и яркость. Заливка и цвет
     иконки просто перетекают вслед за состоянием. */
  transition:
    background-color 220ms ease,
    color 220ms ease,
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 180ms ease;
  /* Цвет зазора вокруг перечёркивающей черты — под цвет заливки кнопки */
  --slash-gap: rgba(16, 16, 18, 0.62);
}

/* Включено — кнопка белая: состояние видно и по форме иконки, и по цвету */
.call-button.is-on {
  background: #fff;
  color: #111111;
}

.call-button.is-danger {
  background: var(--brand-500);
  color: #fff;
  --slash-gap: var(--brand-500);
}

.call-button-icon {
  position: relative;
  display: block;
  width: 27px;
  height: 27px;
}

.call-button-icon .icon {
  width: 100%;
  height: 100%;
}

/* Перечёркивание микрофона и камеры: черта рисуется, а не появляется */
.icon-slash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.icon-slash line {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 23;
  stroke-dashoffset: 23;
  transition: stroke-dashoffset 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.icon-slash-mask {
  stroke: var(--slash-gap);
  stroke-width: 4.6;
}

.icon-slash-line {
  stroke: currentColor;
  stroke-width: 2;
}

.call-button.is-off .icon-slash line {
  stroke-dashoffset: 0;
}

/* Динамик: одна иконка Solar плавно сменяет другую, без поворотов */
.call-button-swap .icon {
  position: absolute;
  inset: 0;
  transition: opacity 200ms ease;
}

.call-button-swap .icon-off { opacity: 0; }
.call-button.is-off .call-button-swap .icon-on { opacity: 0; }
.call-button.is-off .call-button-swap .icon-off { opacity: 1; }

/* Круглые кнопки крупные, и общего продавливания на них почти не видно —
   здесь оно заметнее. */
.call-button.is-pressed:not(:disabled) {
  transform: scale(0.92);
}

.call-chip.is-pressed:not(:disabled),
.call-quality.is-pressed:not(:disabled),
.call-self-flip.is-pressed:not(:disabled) {
  transform: scale(0.9);
}

/* ─────────────────────── Меньше движения ─────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .call-button,
  .call-button-swap .icon,
  .icon-slash line,
  .call-quality i,
  .call-self,
  .call-self-video,
  .call-self-photo {
    transition-duration: 1ms;
  }

  .call-self.is-loading .call-self-loader {
    animation: none;
  }
}

/* ─────────────── Пока идёт разговор ───────────────
   Приложение под экраном звонка не прокручивается: страница остаётся
   на месте, а вернуться к переписке можно, свернув звонок. */

html.call-open { overflow: hidden; }

/* Разговор приходит и уходит растворением: и когда открывается, и
   когда сворачивается в плашку. Раньше экран пропадал разом — на
   телефоне это читалось как сбой, а не как сворачивание. Уход чуть
   короче прихода: ждать исчезновения дольше, чем появления, незачем. */
.call-screen {
  animation: call-screen-in 220ms ease;
}

.call-screen.is-closing {
  pointer-events: none;
  animation: call-screen-out 180ms ease both;
}

@keyframes call-screen-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes call-screen-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Плашка уходит тем же движением, каким пришла, только наоборот. */
.call-pill.is-closing {
  pointer-events: none;
  animation: call-pill-out 180ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Плашка стоит по центру сдвигом на половину своей ширины, поэтому он
   обязан остаться в обоих кадрах: без него она уедет из центра. */
@keyframes call-pill-out {
  from { opacity: 1; transform: translate(-50%, 0); }
  to { opacity: 0; transform: translate(-50%, -10px); }
}

/* Свёрнутый звонок: плашка поверх переписки, нажатие возвращает
   на экран разговора. */
/* Плашка стоит под шапкой переписки, а не внизу экрана: внизу на
   телефоне клавиатура и поле ввода — там её просто не было бы видно,
   а на компьютере она спорила бы с полем ввода. Отступ отсчитан от
   высоты шапки: 60 px на телефоне и 76 px на компьютере вместе с
   полем страницы. */
.call-pill {
  position: fixed;
  z-index: 80;
  left: 50%;
  top: calc(68px + env(safe-area-inset-top));
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  transform: translateX(-50%);
  border-radius: 9999px;
  background: var(--accent-fill);
  color: var(--accent-fill-text);
  font-size: 13px;
  animation: call-pill-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Приходит и уходит сверху — оттуда, где стоит. */
@keyframes call-pill-in {
  from { opacity: 0; transform: translate(-50%, -12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Продавливание у всех кнопок общее — масштаб. Но плашка стоит по
   центру сдвигом на половину своей ширины, и голый scale этот сдвиг
   затирал: от нажатия она уезжала вправо. Повторяем сдвиг здесь. */
.call-pill.is-pressed:not(:disabled) {
  transform: translateX(-50%) scale(0.975);
}

.call-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: call-pill-blink 1.6s ease-in-out infinite;
}

@keyframes call-pill-blink { 50% { opacity: 0.25; } }

.call-pill strong { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ─────────────── Углы своего окошка ───────────────
   Отпущенное окно само доезжает до ближайшего угла: так оно никогда не
   встаёт посреди экрана и не закрывает лицо собеседника. Угол ставит
   call-ui.js, а расстояния держим здесь. */

.call-self[data-corner="top-left"] {
  top: calc(74px + env(safe-area-inset-top));
  left: 14px;
  right: auto;
  bottom: auto;
}

.call-self[data-corner="top-right"] {
  top: calc(74px + env(safe-area-inset-top));
  right: 14px;
  left: auto;
  bottom: auto;
}

.call-self[data-corner="bottom-left"] {
  bottom: calc(128px + env(safe-area-inset-bottom));
  left: 14px;
  top: auto;
  right: auto;
}

.call-self[data-corner="bottom-right"] {
  bottom: calc(128px + env(safe-area-inset-bottom));
  right: 14px;
  top: auto;
  left: auto;
}

/* Стоп-кадр на время смены камеры: без него на мгновение виден чёрный
   прямоугольник, пока новая камера отдаёт первый кадр. */
.call-self-freeze {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Обмен окон: своё видео растягивается на весь экран, а собеседник
   уезжает в окошко. Переключает его call-ui.js по короткому касанию. */
.call-stage.is-swapped ~ .call-self,
.call-stage.is-swapped .call-self {
  inset: 0;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  border-radius: 0;
}

/* ═════ Дописано при переносе ═════ */

/* Своя камера зеркалится: человек привык видеть себя как в зеркале,
   и неотзеркаленное изображение читается как чужое лицо. Задняя
   камера показывается как есть — там зеркалить нечего. */
.call-self.is-mirrored .call-self-video,
.call-self.is-mirrored .call-self-freeze { transform: scaleX(-1); }

/* Пока видео нет, экран занимает портрет: тогда затемнение сверху и
   снизу не нужно — под ним и так тёмный фон. */
.call-screen:not(.is-video) .call-shade { opacity: 0.5; }

.call-screen.is-video .call-portrait { display: none; }

/* Собеседник выключил микрофон: об этом должно быть видно, а не только
   слышно по тишине. */
.call-screen.peer-muted .call-title::after {
  content: "микрофон выключен";
  display: block;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}

/* ═════ Дописано при переносе: чего в макете не было ═════
   В макете звонок был всегда идущим: ни входящего вызова, ни разбора
   связи там не рисовали. Оформление ниже собрано из тех же примитивов —
   тёмное стекло, круглые кнопки, скругления пилюлей. */

/* ─────────────── Входящий вызов ─────────────── */

/* Кнопок здесь две-три, и у каждой подпись: без неё «трубка вниз» и
   «трубка вверх» на маленьком экране легко перепутать. */
.call-incoming {
  gap: 34px;
}

.call-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.call-choice small {
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
}

/* Ответ — зелёный: цвет говорит о действии раньше, чем иконка. Тот же
   зелёный, что у делений связи в шапке, другого в звонке нет. */
.call-button.is-accept {
  background: #4ad07d;
  color: #10221a;
  --slash-gap: #4ad07d;
}

/* ─────────────── Полоса сообщения ─────────────── */

/* Короткая строка под шапкой: «собеседник не отвечает», «связь
   восстанавливается». Живёт поверх кадра, поэтому тёмное стекло. */
/* Сообщения о связи стоят под шапкой и поверх всего: их читают и во
   время разговора, и при свёрнутом звонке. Внизу экрана им не место —
   там клавиатура. */
.call-banner {
  position: fixed;
  z-index: 90;
  left: 50%;
  top: calc(66px + env(safe-area-inset-top));
  max-width: min(88%, 420px);
  padding: 8px 16px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(22, 22, 24, 0.56);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  color: #fff;
  font-size: 13px;
  text-align: center;
  animation: call-banner-in 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Сдвиг на половину ширины держит полосу по центру — он обязан
   остаться в обоих кадрах. */
@keyframes call-banner-in {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.call-banner.is-closing {
  pointer-events: none;
  animation: call-banner-out 180ms ease both;
}

@keyframes call-banner-out {
  from { opacity: 1; transform: translate(-50%, 0); }
  to { opacity: 0; transform: translate(-50%, -8px); }
}

/* Звонок свёрнут — под шапкой уже стоит плашка, полоса встаёт под неё. */
.call-minimized .call-banner { top: calc(116px + env(safe-area-inset-top)); }

@media (min-width: 760px) {
  /* На компьютере к высоте шапки добавляется поле страницы. */
  .call-pill { top: 84px; }
  .call-minimized .call-banner { top: 132px; }
}

/* ─────────────── Что со связью ───────────────

   Открывается нажатием на деления в шапке. Раньше это был голый
   список поверх кадра: строки шли встык, значения не выделялись, и
   читать его было нечем. Теперь это карточка тёмного стекла с теми же
   скруглениями, что у окон, а показатели стоят парами «что : сколько». */

.call-details {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: calc(126px + env(safe-area-inset-bottom));
  width: min(320px, calc(100vw - 32px));
  max-height: min(52dvh, 420px);
  padding: 14px 16px 16px;
  border-radius: 26px;
  background: rgba(20, 20, 22, 0.72);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  color: #fff;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(-50%);
  animation: call-details-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes call-details-in {
  from { opacity: 0; transform: translate(-50%, 10px) scale(0.97); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* Уходит тем же движением обратно, а не пропадает разом. Уход короче
   прихода: ждать исчезновения дольше, чем появления, незачем. */
.call-details.is-closing {
  pointer-events: none;
  animation: call-details-out 180ms ease both;
}

@keyframes call-details-out {
  from { opacity: 1; transform: translate(-50%, 0) scale(1); }
  to { opacity: 0; transform: translate(-50%, 8px) scale(0.97); }
}

.call-details-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.call-details-head strong {
  font-family: "SF Pro Display", "SF Pro Text", sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

/* Крестик здесь мельче, чем в шапке: карточка небольшая, и кнопка в
   42 px забирала бы четверть её ширины. */
.call-details-head .call-chip {
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.call-details-head .call-chip .icon {
  width: 17px;
  height: 17px;
}

/* Название и значение стоят в строку: так их можно читать глазами
   сверху вниз по правому краю, не спотыкаясь о разную длину подписей. */
.call-details dl {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 2px 14px;
  margin: 0;
}

.call-details dt {
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
}

.call-details dd {
  margin: 0;
  text-align: right;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* Показатель вышел за разумное — подкрашиваем его, а не всю строку.
   Имена классов ставит renderDetails() в call-ui.js. */
.call-details dd.is-poor { color: #f2c14e; }
.call-details dd.is-bad { color: var(--brand-500); }

.call-details-hint {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  line-height: 1.4;
}

.call-details-hint:empty {
  display: none;
}