/* ---------- показ экрана в звонке (js/call.js, раздел «показ экрана») ----------

   У зрителя плашка звонка становится окном с картинкой: ширину задаёт
   скрипт (по соотношению сторон картинки и окну браузера), высота следует
   сама. Остальное — имя, кнопки — остаётся как было, под картинкой. */

/* Стекло с размытием в этом виде выключено. Размывать фон под окном в
   пол-экрана браузер вынужден на каждом сдвиге и каждом шаге растяжения —
   ровно это и превращает перетаскивание в лаг. Подложка плотная, свечение
   «живого стекла» тоже снято: под картинкой оно не видно, а кадры ест. */
.call--screen {
  width: auto; max-width: calc(100vw - 16px);
  gap: 10px; padding: 10px;
  background: var(--surface);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.call--screen::before, .call--screen::after { display: none; }

/* Под картинкой — одна строка: кто показывает слева, кнопки справа,
   компактные. Во всю ширину большой плашки три кнопки вытягивались по
   три сотни точек, а полоса голоса, нарисованная под узкую плашку,
   растягивалась в крупные пятна — её в этом виде нет: о том, что
   собеседник говорит, здесь скажет его голос. Остальное (второй вызов,
   свёрнутая картинка) — строками ниже, во всю ширину. */
.call--screen {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; column-gap: 12px;
}
.call--screen > * { grid-column: 1 / -1; }
.call--screen > .call__screen { grid-row: 1; }
.call--screen > .call__who { grid-row: 2; grid-column: 1; }
.call--screen > .call__actions { grid-row: 2; grid-column: 2; }
.call--screen .call__actions .call__btn { flex: 0 0 48px; width: 48px; height: 38px; }
.call--screen .call__voice { display: none; }
.call.is-resizing { user-select: none; cursor: nwse-resize; }

.call__screen {
  position: relative; overflow: hidden;
  border-radius: calc(var(--r) - 4px);
  background: #000; line-height: 0;
}
.call__screen-video {
  display: block; width: 100%; height: auto;
  /* Запас снизу — под имя и кнопки: картинка не должна выталкивать их за
     край окна, даже пока скрипт ещё не пересчитал ширину. */
  max-height: calc(100vh - 190px);
  object-fit: contain; background: #000;
}

/* Кнопки поверх картинки — в правом верхнем углу, проявляются, когда
   двигают мышью (`is-awake` ставит call.js и снимает через 2,5 с покоя), и
   под мышью в окне.

   **Объёмом, а не цветом** (Роман 06.10.2026: «кнопки еле заметные… выдели
   через тени, не делай цветными, ворвиглазными»). Картинка показа неотличима
   от настоящего экрана, и плоская полупрозрачная кнопка на ней тонула.
   Теперь — тёмное стекло с размытием, светлая кайма и две тени: близкая
   плотная (кнопка «лежит» на картинке) и дальняя мягкая (отрывает её от
   любого фона, светлого и тёмного). */
.call__screen-bar {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: flex; gap: 8px;
  opacity: 0; transition: opacity 180ms var(--ease);
  pointer-events: none;
}
.call__screen:hover .call__screen-bar,
.call__screen.is-awake .call__screen-bar,
.call__screen:focus-within .call__screen-bar { opacity: 1; pointer-events: auto; }
.call__screen-btn {
  height: 36px; min-width: 36px; padding: 0 9px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 10px; cursor: pointer;
  background: rgba(18, 18, 26, .72); color: #fff;
  font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, .55),
    0 10px 28px rgba(0, 0, 0, .45),
    inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: background-color var(--speed), transform 140ms var(--ease), box-shadow 160ms ease;
}
.call__screen-btn:hover {
  background: rgba(30, 30, 42, .86); transform: translateY(-1px);
  box-shadow:
    0 3px 8px rgba(0, 0, 0, .6),
    0 14px 34px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 255, 255, .16);
}
.call__screen-btn:active { transform: translateY(0) scale(.96); }
.call__screen-btn:focus-visible { outline: none; box-shadow: var(--ring); opacity: 1; }
/* Подпись у кнопки — только во весь экран: там это единственная дверь
   обратно, и значка мало. В окне хватает значка с подсказкой. */
.call__screen-btn .call__screen-label { display: none; }
.call__screen:fullscreen .call__screen-btn .call__screen-label { display: inline; }
.call__screen:fullscreen .call__screen-bar { top: 18px; right: 18px; gap: 10px; }
.call__screen:fullscreen .call__screen-btn { height: 42px; min-width: 42px; padding: 0 14px; font-size: 14px; }
/* Во весь экран мышь, стоящая без дела, прячется вместе с кнопками — как в
   любом проигрывателе: картинка целиком, без стрелки посреди таблицы. */
.call__screen:fullscreen { cursor: default; }
.call__screen:fullscreen:not(.is-awake) { cursor: none; }
/* Во весь экран мышь всегда «над» картинкой, а нажатая кнопка держит фокус —
   правила «под мышью» и «в фокусе» не давали бы кнопкам уйти никогда. Там
   решает только движение мыши (`is-awake`). */
.call__screen:fullscreen:not(.is-awake) .call__screen-bar { opacity: 0; pointer-events: none; }

/* Угол растяжения — две косые черты, как у окон в системе. Виден всегда:
   возможность, о которой не догадаться, не пользуются. */
.call__resize {
  position: absolute; right: 0; bottom: 0; z-index: 2;
  width: 20px; height: 20px; cursor: nwse-resize; touch-action: none;
  background:
    linear-gradient(135deg,
      transparent 52%, rgba(255, 255, 255, .6) 52% 58%,
      transparent 58% 70%, rgba(255, 255, 255, .6) 70% 76%, transparent 76%);
}

/* На весь экран — сама картинка, без плашки вокруг. */
.call__screen:fullscreen {
  display: grid; place-items: center; border-radius: 0; background: #000;
}
.call__screen:fullscreen .call__screen-video { width: 100%; height: 100%; max-height: none; }
.call__screen:fullscreen .call__resize { display: none; }

/* Свёрнутая картинка — строкой, с кнопкой вернуть. */
.call__screen-folded {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  font-size: 12.5px; color: var(--text-soft);
}
.call__screen-folded > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call__screen-open {
  margin-left: auto; flex: 0 0 auto;
  border: 0; border-radius: var(--r-sm); cursor: pointer;
  padding: 4px 10px; font-size: 12px; font-weight: 550;
  background: var(--accent); color: var(--on-accent, #fff);
}

/* У показывающего — красная точка, как у записи: экран сейчас видят. */
.call__sharing {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 550; color: var(--red);
}
.call__sharing-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--red);
  animation: call-dot 1.1s ease-in-out infinite;
}
.call__btn--screen.is-on {
  background: var(--accent); color: var(--on-accent, #fff);
}
.call__btn--screen.is-on:hover { background: var(--accent); filter: brightness(1.1); }
@media (prefers-reduced-motion: reduce) {
  .call__sharing-dot { animation: none; }
}