/* Экран перед звонком: строка заголовка с кошельком → аватар в неоновом кольце на размытом фоне → выбор сценария →
   низ (.dock): чипы цен «⚡1 ход · 💎5 фото · 💎50 видео», «Начать звонок», подсказка про микрофон (ECONOMY.md 1.5).
   Телефон — одна колонка в доступную высоту: кольцо и карточки сценариев делят место, низ закреплён со сплошным фоном;
   планшет — та же колонка по центру; десктоп — две колонки.
   Ступени по высоте — классы каркаса html.h-compact / html.h-short (доступная высота без зон Telegram, К5),
   размер кольца — от --app-usable-h. Fullscreen: заголовок в полосе кнопок Telegram, кошелёк — строкой под ней (К1). */

@import url("./precall-picker.css");

.precall {
  position: relative;
  isolation: isolate;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: var(--sat);
}

/* ---------- Атмосферный фон: размытый аватар + неоновые пятна ---------- */
.precall__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.precall__bg-img {
  position: absolute;
  inset: -12%;
  width: 124%;
  height: 124%;
  max-width: none;
  object-fit: cover;
  filter: blur(44px) saturate(1.5);
  opacity: 0.5;
}
.precall__bg::before, .precall__bg::after { content: ""; position: absolute; inset: 0; }
.precall__bg::before {
  background:
    radial-gradient(38% 26% at 50% 20%, rgba(255, 45, 120, 0.22), transparent 70%),
    radial-gradient(50% 40% at 100% 60%, rgba(139, 92, 246, 0.2), transparent 70%);
}
.precall__bg::after {
  background: linear-gradient(180deg, rgba(11, 10, 20, 0.2) 0%, rgba(11, 10, 20, 0.55) 42%, var(--bg) 86%);
}

/* ---------- Заголовок: тихая строка, кошелёк «⚡10 · 💎0 +» справа ----------
   Три колонки: заголовок по центру, пока кошелёк узкий; широкий кошелёк («⚡157/200 · 💎1 250 +») сдвигает его
   влево, но не накрывает. На героя кошелёк не ложится: кольцо по центру, а кошелёк бывает шире половины экрана. */
.precall__top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 10px;
  min-height: 44px;
  padding: 0 var(--gutter);
}
.precall__title {
  grid-column: 2;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.precall__wallet { grid-column: 3; justify-self: end; display: flex; }
/* Однозначное число («⚡3») не сужает часть бейджа меньше 44 px (К7) */
.precall__wallet .wallet-badge--sm .wallet-badge__part { min-width: 44px; }
/* Fullscreen: заголовок — в полосе кнопок Telegram (между «Закрыть» и «⌄ ⋯»); кошелёк туда не помещается
   (360 px − кнопки Telegram) — своя строка под полосой, справа */
html.is-fullscreen .precall { padding-top: var(--sat-sys, var(--sat)); }
html.is-fullscreen .precall__top {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--sat-tg, 46px) auto;
  padding: 0;
}
html.is-fullscreen .precall__title {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  text-align: center;
  padding-inline: max(var(--tg-band-l, 116px), var(--tg-band-r, 96px));
}
html.is-fullscreen .precall__wallet { grid-column: 1; grid-row: 2; padding: 2px var(--gutter) 0; }

/* ---------- Раскладка ---------- */
.precall__body {
  flex: 1;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.precall__panel { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* ---------- Герой: кольцо и имя ---------- */
.precall__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px var(--gutter) 0;
  text-align: center;
}
/* Имя в одну строку (узор .name-age каркаса): длинное — с многоточием, возраст всегда виден */
.precall__name {
  display: flex;
  justify-content: center;
  align-items: baseline;
  min-width: 0;
  max-width: 100%;
  margin-top: 12px;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.15;
  white-space: nowrap;
}
.precall__name .name-age__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.precall__age { flex: 0 0 auto; margin-left: 0.3em; color: var(--muted); font-weight: 700; }
.precall__name-skel { width: 160px; height: 1.15em; border-radius: 8px; }

/* Аватар в неоновом кольце, ореол «дышит». Размер — ~пятая часть доступной высоты */
.pc-orb {
  --orb: clamp(88px, calc(var(--app-usable-h, var(--app-h)) * 0.21), 164px);
  position: relative;
  width: var(--orb);
  height: var(--orb);
  flex: 0 0 auto;
}
.pc-orb__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 4px;
  background: conic-gradient(from 200deg, var(--pink), var(--violet-2), var(--violet), var(--pink));
  box-shadow: 0 0 36px rgba(255, 45, 120, 0.45), 0 0 90px rgba(139, 92, 246, 0.32);
}
.pc-orb__ring.skeleton { box-shadow: none; }
.pc-orb__avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid var(--bg);
}
.pc-orb__initial {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: calc(var(--orb) * 0.34);
  font-weight: 800;
  color: #fff;
  background: var(--grad-diag);
}
.pc-orb__halo {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 45, 120, 0.45);
  opacity: 0;
  animation: pc-halo 3.4s var(--ease) infinite;
  pointer-events: none;
}
.pc-orb__halo--2 { border-color: rgba(139, 92, 246, 0.5); animation-delay: 1.7s; }
@keyframes pc-halo {
  0% { transform: scale(0.94); opacity: 0.9; }
  100% { transform: scale(1.22); opacity: 0; }
}

/* Кольцо для других экранов — прежний вид */
.ring {
  position: relative;
  width: 136px;
  height: 136px;
  border-radius: 50%;
  padding: 4px;
  background: var(--grad);
  box-shadow: 0 0 34px rgba(255, 45, 120, 0.45), 0 0 60px rgba(139, 92, 246, 0.3);
}
.ring img, .ring .avatar-fallback {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--bg);
  font-size: 44px;
}
.ring.skeleton { box-shadow: none; }
html.h-compact .ring, html.h-short .ring { width: 104px; height: 104px; }
html.h-compact .ring img, html.h-compact .ring .avatar-fallback,
html.h-short .ring img, html.h-short .ring .avatar-fallback { font-size: 34px; }

/* ---------- Закреплённый низ (.dock каркаса): тариф и баланс, кнопка, подсказка ----------
   Сплошной фон без прозрачного затухания: прокручиваемые карточки не просвечивают и не прячутся под «дымкой».
   Липкость и фон продублированы на случай старого каркаса без .dock. */
.precall__actions {
  position: sticky;
  bottom: 0;
  z-index: 4;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px var(--gutter) calc(var(--sab) + 12px);
  background: var(--bg);
  box-shadow: 0 -1px 0 var(--line);
}

/* Чипы цен звонка по центру (как у Luna: ⚡ за ход, 💎 за фото и видео — минут не обещаем) */
.pc-costs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-height: 32px;
}
.pc-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 11px 0 9px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
}
.pc-chip b { font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.pc-chip__icon { display: inline-flex; }
.pc-chip__icon .icon { width: 13px; height: 13px; }
.pc-chip--energy .pc-chip__icon { color: var(--amber); }
.pc-chip--gems .pc-chip__icon { color: var(--gem); }
/* С планом: «⚡ не тратится · осталось 57 из 200 сегодня» */
.pc-costs__plan { font-size: 12.5px; font-weight: 700; text-align: center; color: var(--green); }
.pc-costs__plan[hidden] { display: none; }

/* Размер — крупный CTA дизайн-системы (.btn--lg, 56 px) */
.precall__cta {
  position: relative;
  overflow: hidden;
  gap: 12px;
  font-weight: 800;
  box-shadow: 0 12px 34px rgba(255, 45, 120, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
/* Блик пробегает по кнопке — зовёт нажать */
.precall__cta::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -45%;
  width: 36%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: skewX(-18deg);
  animation: pc-sheen 4s ease-in-out 1.2s infinite;
  pointer-events: none;
}
.precall__cta:disabled { box-shadow: none; }
.precall__cta:disabled::after,
.precall__cta.is-loading::after { display: none; }
.precall__cta-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.2);
}
.precall__cta-icon .icon { width: 18px; height: 18px; animation: pc-wiggle 2.8s ease-in-out infinite; }
.precall__cta:disabled .precall__cta-icon .icon { animation: none; }
@keyframes pc-sheen {
  0%, 50% { left: -45%; }
  100% { left: 130%; }
}
@keyframes pc-wiggle {
  0%, 62%, 100% { transform: rotate(0); }
  66%, 74%, 82% { transform: rotate(-14deg); }
  70%, 78%, 86% { transform: rotate(14deg); }
}

.precall__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted-2);
}
.precall__hint .icon { width: 15px; height: 15px; }
.precall__hint.is-warn { color: var(--amber); }

/* Скелетон: счётчик сценариев — только место */
.precall.is-loading .scn-picker__count { color: transparent; }

/* ---------- Невысокие экраны (доступная высота): iPhone SE — h-compact, Android маленький — h-short ---------- */
html.h-compact .precall__hero { padding-top: 0; }
html.h-compact .precall__name { margin-top: 10px; font-size: 24px; }
html.h-compact .precall__cta { min-height: 52px; }
/* Android маленький: строка заголовка остаётся (в ней кошелёк; 44 px — зона касания бейджа не уходит за верх),
   отступ героя меньше, подсказка про микрофон — только если это предупреждение */
html.h-short .precall__hero { padding-top: 2px; }
html.h-short .precall__name { margin-top: 8px; font-size: 22px; }
html.h-short .precall__actions { gap: 6px; padding-top: 8px; }
html.h-short .precall__cta { min-height: 48px; }
html.h-short .precall__hint:not(.is-warn) { display: none; }

/* ---------- Планшет: колонка по центру, крупнее аватар ---------- */
@media (min-width: 600px) {
  .precall__body { justify-content: center; }
  .precall__panel { flex: 0 0 auto; }
  /* Колонка по центру и всё влезает: низ без своей плашки фона — не «коробка» посреди размытого фона */
  .precall__actions { margin-top: 8px; background: none; box-shadow: none; }
  .pc-orb { --orb: 210px; }
  .precall__name { font-size: 34px; }
}

/* ---------- Десктоп: герой слева, выбор и кнопка справа ---------- */
@media (min-width: 1024px) {
  .precall__top { max-width: 1120px; width: 100%; margin: 0 auto; padding-top: 8px; }
  .precall__body {
    max-width: 1120px;
    flex-direction: row;
    align-items: center;
    gap: 40px;
    padding: 0 var(--gutter) 24px;
  }
  .precall__hero { flex: 0 0 380px; padding: 0; }
  .pc-orb { --orb: 260px; }
  .precall__name { font-size: 38px; }
  .precall__panel {
    flex: 1;
    align-self: center;
    padding: 6px 0 4px;
    border-radius: var(--r-xl);
    background: rgba(23, 21, 38, 0.55);
    border: 1px solid var(--line);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    box-shadow: var(--elev-2), var(--inner-hi);
  }
  .precall__actions { position: static; background: none; box-shadow: none; padding: 8px 20px 18px; }
}

/* Мышь: отклик на наведение (карточки сценариев — в precall-picker.css) */
@media (hover: hover) and (pointer: fine) {
  .precall__cta:hover:not(:disabled) { filter: brightness(1.08); }
}