/* Экран звонка: субтитры, закрытое превью «Фото» и три кнопки управления «Пауза · Завершить · Фото»
   (ECONOMY.md 1.5, скрины Luna 21–23). Подключается из call.css (@import). */

/* ---------- Низ: субтитры, кнопки ---------- */
.call__bottom { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* Субтитры: полоса в пятую часть доступной высоты сцены, прокручивается; свежая реплика — внизу
   (докрутку делает call/view.js). Длинный ответ не режется сверху — начало доступно прокруткой. */
.call__captions {
  flex: 0 0 auto;
  width: 100%;
  height: clamp(96px, 16vh, 160px); /* браузер без container queries */
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
@supports (container-type: size) {
  .call__captions { height: clamp(84px, 20cqh, 200px); } /* cqh — от сцены (.call__stage) */
}
/* Реплики прижаты к низу, пока их мало (margin, а не justify-content: flex-end — иначе верх не прокрутить) */
.call__cap:first-child { margin-top: auto; }
/* Есть что прокрутить вверх — верх полосы гаснет */
.call__captions.is-scrolled {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24px);
  mask-image: linear-gradient(180deg, transparent 0, #000 24px);
}
/* Место под субтитры держится только во время звонка (кольцо не прыгает на первой фразе);
   до звонка, после и при ошибке пустая полоса не отнимает место у кольца и карточки */
.call:not(.is-session) .call__captions:empty,
.call.has-error .call__captions,
.call.is-captions-off .call__captions { display: none; }
.call__cap {
  flex: 0 0 auto;
  max-width: 88%;
  padding: 8px 13px;
  border-radius: 16px;
  font-size: 14.5px;
  line-height: 1.38;
  text-align: left;
  overflow-wrap: anywhere;
  /* Без backdrop-filter: у прокрученной полосы есть маска (.is-scrolled), а маска — граница «стекла»; размытие
     реплик пропадало и возвращалось, когда полоса начинала или переставала прокручиваться (фон и так размыт) */
  animation: call-cap-in 280ms var(--ease) backwards;
  transition: opacity 400ms ease;
}
.call__cap:not(:last-child) { opacity: 0.62; }
/* *Действия* в субтитрах (голос Fish: *смеётся*, *шепчет*) — курсивом, как в чате (chat.css .act) */
.call__cap .act { font-style: italic; color: color-mix(in srgb, var(--violet) 32%, var(--muted)); }
.call__cap .act--line { display: inline; margin: 0; font-size: inherit; }
.call__cap--user .act { color: rgba(255, 255, 255, 0.78); }
.call__cap--bot {
  align-self: flex-start;
  background: rgba(23, 21, 38, 0.74);
  border: 1px solid var(--line-2);
  border-bottom-left-radius: 6px;
  color: var(--text);
  user-select: text;
  -webkit-user-select: text;
}
.call__cap--user {
  align-self: flex-end;
  background: rgba(139, 92, 246, 0.3);
  border: 1px solid rgba(139, 92, 246, 0.42);
  border-bottom-right-radius: 6px;
  color: var(--text);
}
/* Ответ перебили: приглушён, оборван «…» */
.call__cap--cut { color: var(--muted); border-style: dashed; }

/* ---------- Превью «Фото» под субтитрами: закрытая карточка с [Видео] [Ещё раз] или открытая миниатюра ----------
   Карточка меньше, чем в чате: её высота — от высоты сцены (cqh), кольцо сверху сжимается само (call.css). */
.call__media { flex: 0 0 auto; width: 100%; display: flex; align-items: flex-end; gap: 10px; min-height: 0; }
.call__media:empty { display: none; }
.call__media .locked-media__card { width: clamp(84px, 17cqh, 124px); border-radius: 16px; }
.call__media .locked-media__lock { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
.call__media .locked-media__lock .icon { width: 18px; height: 18px; }
.call__media .locked-media__price { min-height: 26px; font-size: 13px; }
.call__media .offer-chip { margin-top: 0; }
.call__thumb {
  position: relative;
  flex: 0 0 auto;
  width: clamp(84px, 17cqh, 124px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--line-2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  animation: rise-in 260ms var(--ease) both;
}
.call__thumb img { width: 100%; height: 100%; object-fit: cover; }
.call__thumb-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(11, 10, 20, 0.5);
}
.call__thumb-play .icon { width: 18px; height: 18px; }
/* Тот же закрытый кадр ещё раз («Фото» или просьба голосом, а прошлый не открыт; call/photo.js): карточка вспыхивает
   розовой рамкой и чуть качается — только transform и opacity, соседи не двигаются */
.call__media > .is-again .locked-media__card,
.call__media > .call__thumb.is-again { animation: call-media-again 700ms var(--ease) 1; }
.call__media > .is-again .locked-media__card::after,
.call__media > .call__thumb.is-again::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px var(--pink);
  opacity: 0;
  pointer-events: none;
  animation: call-media-ring 1.2s ease-out 1;
}
@keyframes call-media-again {
  0%, 100% { transform: none; }
  35% { transform: scale(1.06); }
  70% { transform: scale(0.98); }
}
@keyframes call-media-ring {
  0%, 55% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .call__media > .is-again .locked-media__card,
  .call__media > .call__thumb.is-again { animation: none; }
}
/* Звонок кончился или ещё не начат — карточке не место */
.call:not(.is-session) .call__media { display: none; }
/* Невысокая сцена с карточкой: субтитры ниже, строка сценария прячется — кольцо, имя и состояние остаются на месте */
@container call-stage (max-height: 600px) {
  .call.has-media .call__captions { height: clamp(52px, 12cqh, 120px); }
  .call.has-media .call__scenario { display: none; }
  .call.has-media .call__name { margin-top: 6px; font-size: 20px; }
  .call.has-media .call__state { height: 30px; margin-top: 2px; }
}

.call__gesture {
  min-height: 56px;
  padding: 0 30px;
  font-size: 16px;
  animation: call-cta 2.2s ease-in-out infinite;
}
/* До начала звонка кнопки управления не нужны: главная — «Начать звонок» */
.call__start { width: 100%; max-width: 340px; min-height: 60px; font-size: 17px; }
.call[data-state="idle"] .call__controls { display: none; }

.call__controls {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 26px;
  padding-top: 2px;
}
.call__ctl {
  width: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
/* Наведение мышью (десктоп Telegram, прод 29.09: «Пауза» и «Фото» дёргались, когда водишь по ним) не трогает саму
   «стеклянную» кнопку: ни фон, ни рамку, ни размер, ни filter — подсветка отдельным слоем ::after, меняется только его
   opacity. Слой кнопки закреплён (will-change): наведение и нажатие не поднимают и не опускают его в композитор —
   при дробном масштабе экрана (125–150 %) такой подъём сдвигал иконку на пиксель. Замер — stand hover.mjs. */
.call__ctl-btn {
  position: relative;
  isolation: isolate;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--text);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--line-2);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  will-change: transform;
  transition: transform var(--t-fast) var(--ease);
}
.call__ctl-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast);
}
.call__ctl-btn .icon { width: 26px; height: 26px; }
/* Подпись во всю ширину колонки, текст по центру: «Пауза» → «Продолжить» меняет только текст, рамка подписи на месте */
.call__ctl-label { display: block; width: 100%; text-align: center; }
.call__ctl-btn:active:not(:disabled) { transform: scale(0.92); }
.call__ctl-btn:disabled { opacity: 0.4; }
/* Пауза нажата — кнопка «горит» белым и зовёт продолжить */
.call__ctl-btn.is-on { background: var(--text); color: var(--bg); border-color: transparent; }
.call__ctl-btn.is-on::after { background: rgba(11, 10, 20, 0.08); }
.call__ctl-btn.is-loading { pointer-events: none; }
.call__ctl-btn.is-loading .icon { opacity: 0.35; }
.call__ctl-btn--end {
  width: 76px;
  height: 76px;
  background: var(--red);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 30px rgba(255, 77, 94, 0.5);
}
.call__ctl-btn--end .icon { width: 32px; height: 32px; transform: rotate(135deg); }
@media (hover: hover) and (pointer: fine) {
  .call__ctl-btn:hover:not(:disabled)::after { opacity: 1; }
}