/* Экран голосового звонка: размытый аватар во весь экран, персонаж крупно в неоновом кольце,
   цвет свечения — по состоянию (data-state), ореол — по громкости микрофона (--level 0..1).
   Телефон — во всю высоту; планшет и десктоп — центрированная сцена, фон на весь экран.
   Размеры — от доступной высоты сцены (container queries), а не от высоты вебвью: в fullscreen
   часть вебвью занята кнопками Telegram и полосой «домой», а vh их не учитывает. */

@import url("./call-controls.css");
@import url("./call-summary.css");

/* Цвет состояния плавно перетекает (где @property не поддерживается — просто сменится) */
@property --tint {
  syntax: "<color>";
  inherits: true;
  initial-value: #8b5cf6;
}

.call {
  --level: 0;
  --tint: var(--violet);
  position: relative;
  isolation: isolate;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  transition: --tint 700ms ease;
}
.call[data-state="talking"] { --tint: var(--pink); }
.call[data-state="listening"],
.call[data-state="user-speaking"] { --tint: var(--green); }
.call[data-state="paused"],
.call[data-state="ended"] { --tint: var(--muted-2); }

/* ---------- Фон ---------- */
.call__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); pointer-events: none; }
.call__bg-img {
  position: absolute;
  inset: -15%;
  width: 130%;
  height: 130%;
  max-width: none;
  object-fit: cover;
  filter: blur(48px) saturate(1.5);
  opacity: 0.55;
}
.call__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(11, 10, 20, 0.35), rgba(11, 10, 20, 0.62) 45%, rgba(11, 10, 20, 0.94) 80%, var(--bg));
}
.call__bg-tint {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(48% 30% at 50% 36%, var(--tint), transparent 74%);
  opacity: 0.3;
}

/* ---------- Сцена: шапка → герой (всё свободное место) → субтитры и кнопки ---------- */
.call__stage {
  position: relative;
  width: 100%;
  height: 100%;
  /* Высокий экран (планшет): сцена не растягивается, а стоит по центру */
  max-height: 880px;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: calc(var(--sat) + 12px) var(--gutter) calc(var(--sab) + 18px);
  /* Высота контента сцены = доступная высота: по ней ступени ниже и высота субтитров */
  container: call-stage / size;
}

/* Шапка: таймер «● 01:09» и маленький переключатель субтитров слева, кошелёк «⚡10 · 💎0 +» справа (как у Luna) */
/* Свой слой: невидимые зоны касания (субтитры, кошелёк) выходят за шапку, и герой ниже их не перекрывает */
.call__head { position: relative; z-index: 1; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; }
.call__head-lead { display: flex; align-items: center; gap: 6px; min-width: 0; }
.call__pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 13px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: var(--glass-bg-media);
  border: 1px solid var(--line-2);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  transition: border-color var(--t), color var(--t);
}
.call__live i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); }
.call.is-live .call__live i {
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(45, 212, 160, 0.22);
  animation: blink 1.8s ease-in-out infinite;
}
/* Пометка «ИИ» (components/aiBadge.js): скромная пилюля рядом с таймером — собеседник виртуальный персонаж */
.call__ai {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--glass-bg-media);
  border: 1px solid var(--line-2);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
}
/* Субтитры: маленькая иконка в шапке (зона касания 46 px); выключены — приглушена */
.call__subs {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: var(--glass-bg-media);
  border: 1px solid var(--line-2);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
/* Зона касания 46 px (от рамки внутрь 32 + 2 × 7): ровно 44 на краю не всегда ловит палец (и аудит эмулятора с шагом 2 px) */
.call__subs::before { content: ""; position: absolute; inset: -7px; }
.call__subs .icon { width: 16px; height: 16px; }
.call__subs.is-on { color: var(--text); border-color: rgba(255, 45, 120, 0.45); }
/* Кошелёк в шапке — стекло поверх размытого фона, как в ленте. Компактный бейдж при однозначном числе («⚡6»)
   сужал часть ⚡ до 39 px — на звонке и экране завершения часть не уже 44 px (К7, цель пальца) */
.call__head .wallet-badge { flex: 0 0 auto; }
.call .wallet-badge--sm .wallet-badge__part { min-width: 44px; }
/* Под итогом шапка звонка не нужна: у экрана завершения свой кошелёк */
.call.has-summary .call__head { visibility: hidden; }

/* ---------- Герой: аватар, имя, сценарий, состояние ----------
   Занимает всё, что осталось между шапкой и низом; кольцо — от размера героя (cq), а не от вебвью.
   safe center: не влезло — прижимается к верху, а не уходит за него. */
.call__hero {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  gap: 4px;
  padding: 8px 0;
  text-align: center;
  container-type: size;
}
.call__name {
  flex: 0 0 auto;
  max-width: 100%;
  margin-top: 12px;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.15;
  /* Одна строка: длинное имя — с многоточием (целиком — в title) */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.call__scenario {
  flex: 0 0 auto;
  max-width: 100%;
  min-height: 18px;
  font-size: 13px;
  line-height: 18px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Кольцо: не шире 66% героя и оставляет 132 px под имя, сценарий и плашку состояния (ступени ниже — меньше) */
.call__orb {
  --orb: clamp(112px, min(62vw, 30vh), 300px); /* браузер без container queries */
  position: relative;
  width: var(--orb);
  height: var(--orb);
  flex: 0 0 auto;
  transition: width var(--t-slow) var(--ease), height var(--t-slow) var(--ease);
}
@supports (container-type: size) {
  .call__orb { --orb: clamp(72px, min(66cqw, 100cqh - 132px), 300px); }
}
.call__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 4px;
  background: conic-gradient(from 200deg, var(--pink), var(--violet-2), var(--violet), var(--pink));
  transform: scale(calc(1 + var(--level) * 0.05));
  transition: transform 90ms linear, filter 400ms ease;
}
.call__avatar { width: 100%; height: 100%; border-radius: 50%; border: 4px solid var(--bg); }
.call__initial {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: calc(var(--orb) * 0.34);
  font-weight: 800;
  color: var(--text);
  background: var(--grad-diag);
}

/* Свечение за кольцом: цвет состояния, сила — громкость */
.call__aura {
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--tint), transparent);
  opacity: calc(0.3 + var(--level) * 0.5);
  transform: scale(calc(0.92 + var(--level) * 0.28));
  transition: transform 90ms linear, opacity 90ms linear;
  pointer-events: none;
}
/* Волны от кольца: персонаж говорит */
.call__wave {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--tint);
  opacity: 0;
  pointer-events: none;
}
.call[data-state="talking"] .call__wave { animation: call-wave 2.4s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; }
.call[data-state="talking"] .call__wave--2 { animation-delay: 0.8s; }
.call[data-state="talking"] .call__wave--3 { animation-delay: 1.6s; }
.call[data-state="talking"] .call__ring { animation: call-breathe 1.8s ease-in-out infinite; }
.call[data-state="talking"] .call__aura { animation: call-aura 1.8s ease-in-out infinite; }
/* Пользователь говорит: волна следует за громкостью */
.call[data-state="user-speaking"] .call__wave {
  opacity: calc(var(--level) * 0.85);
  transform: scale(calc(1.04 + var(--level) * 0.2));
  transition: transform 90ms linear, opacity 90ms linear;
}
.call[data-state="user-speaking"] .call__wave--2,
.call[data-state="user-speaking"] .call__wave--3 { display: none; }

/* Бегущая дуга: соединяем / думает */
.call__spin {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 58%, var(--tint) 88%, var(--text) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  opacity: 0;
  transition: opacity var(--t);
  pointer-events: none;
}
.call[data-state="connecting"] .call__spin { opacity: 1; animation: spin 1.8s linear infinite; }
.call[data-state="thinking"] .call__spin { opacity: 1; animation: spin 0.9s linear infinite; }

/* Микрофон выключен: значок на аватаре (по размеру кольца), кольцо приглушено */
.call__mic-off {
  position: absolute;
  right: 4%;
  bottom: 4%;
  width: clamp(32px, calc(var(--orb) * 0.24), 46px);
  height: clamp(32px, calc(var(--orb) * 0.24), 46px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--text);
  color: var(--bg);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.call__mic-off .icon { width: 48%; height: 48%; }
/* Пауза пользователя выключает микрофон (session.pause) — значок на кольце */
.call.is-paused .call__mic-off { opacity: 1; transform: none; }
.call[data-state="paused"] .call__ring { filter: saturate(0.3) brightness(0.9); }
/* Пауза пользователя: дуга ожидания не крутится, волн нет — звонок явно «стоит» */
.call.is-paused .call__wave, .call.is-paused .call__spin { animation: none; opacity: 0; }
.call[data-state="ended"] .call__ring { filter: grayscale(0.85) brightness(0.75); }

/* Плашка состояния: эквалайзер/точки + текст */
.call__state {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  max-width: 100%;
  margin-top: 6px;
  padding: 0 16px 0 14px;
  border-radius: var(--r-pill);
  background: rgba(11, 10, 20, 0.45);
  border: 1px solid var(--line-2);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
}
.call__status { font-size: 15px; font-weight: 700; }
.call__viz { display: inline-flex; align-items: center; gap: 3px; height: 18px; }
.call__viz i {
  --k: 0.55;
  width: 3px;
  height: 4px;
  border-radius: 2px;
  background: var(--tint);
  transition: height 90ms linear;
}
.call__viz i:nth-child(2), .call__viz i:nth-child(4) { --k: 0.8; }
.call__viz i:nth-child(3) { --k: 1; }
.call[data-state="listening"] .call__viz i,
.call[data-state="user-speaking"] .call__viz i { height: calc(4px + var(--level) * 14px * var(--k)); }
.call[data-state="talking"] .call__viz i { animation: call-eq 0.9s ease-in-out infinite; animation-delay: calc(var(--i) * -170ms); }
.call[data-state="thinking"] .call__viz i,
.call[data-state="connecting"] .call__viz i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  animation: bounce-dot 1.1s ease-in-out infinite;
  animation-delay: calc(var(--i) * 150ms);
}
.call[data-state="thinking"] .call__viz i:nth-child(n+4),
.call[data-state="connecting"] .call__viz i:nth-child(n+4) { display: none; }
.call[data-state="idle"] .call__viz,
.call[data-state="paused"] .call__viz,
.call[data-state="ended"] .call__viz { display: none; }

/* ---------- Анимации ---------- */
@keyframes call-wave {
  0% { transform: scale(1); opacity: 0.75; }
  100% { transform: scale(1.42); opacity: 0; }
}
@keyframes call-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}
@keyframes call-aura {
  0%, 100% { opacity: 0.32; transform: scale(0.95); }
  50% { opacity: 0.6; transform: scale(1.08); }
}
@keyframes call-eq {
  0%, 100% { height: 4px; }
  50% { height: 17px; }
}
@keyframes call-cap-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes call-cta {
  0%, 100% { box-shadow: 0 8px 28px rgba(255, 45, 120, 0.35); }
  50% { box-shadow: 0 8px 40px rgba(255, 45, 120, 0.65); }
}

/* ---------- Планшет и десктоп: крупнее, сцена по центру ---------- */
@media (min-width: 600px) {
  .call__name { font-size: 34px; }
  .call__controls { gap: 34px; }
}
@media (min-width: 1024px) {
  .call__stage { max-width: 620px; padding-top: 20px; }
  .call__bg-tint { background: radial-gradient(34% 34% at 50% 36%, var(--tint), transparent 74%); }
}

/* ---------- Невысокая сцена (доступная высота, без зон Telegram и системы) ----------
   ≤ 600: iPhone SE, Telegram Desktop; ≤ 520: Android маленький. Кольцо сжимается само (cq выше). */
@container call-stage (max-height: 600px) {
  .call__orb { --orb: clamp(72px, min(66cqw, 100cqh - 122px), 300px); }
  .call__name { margin-top: 10px; font-size: 24px; }
  .call__state { min-height: 34px; margin-top: 4px; }
  .call__bottom { gap: 10px; }
  .call__ctl-btn { width: 56px; height: 56px; }
  .call__ctl-btn--end { width: 68px; height: 68px; }
}
@container call-stage (max-height: 520px) {
  .call__orb { --orb: clamp(72px, min(66cqw, 100cqh - 117px), 300px); }
  .call__name { margin-top: 8px; font-size: 22px; }
  .call__ctl { gap: 6px; }
  .call__ctl-btn { width: 52px; height: 52px; }
  .call__ctl-btn--end { width: 64px; height: 64px; }
}