/* Экран звонка: субтитры, закрытое превью «Фото» и три кнопки управления «Пауза · Завершить · Фото»
   (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;
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  animation: call-cap-in 280ms var(--ease) backwards;
  transition: opacity 400ms ease;
}
.call__cap:not(:last-child) { opacity: 0.62; }
.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: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 { min-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;
}
.call__ctl-btn {
  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);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.call__ctl-btn .icon { width: 26px; height: 26px; }
.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-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) { background: rgba(255, 255, 255, 0.16); }
  .call__ctl-btn.is-on:hover:not(:disabled) { background: var(--text); }
  .call__ctl-btn--end:hover:not(:disabled) { background: var(--red); filter: brightness(1.1); }
}