/* Страница персонажа: «живой» портрет на весь первый экран → стеклянная панель у его низа (имя, лайк,
   коротко о себе, «Написать / Позвонить») → вкладки сразу под ней, видны на первом экране над полосой «домой».
   Телефон (< 720): портрет и панель — одна ячейка сетки высотой в первый экран (--char-hero-h): панель прижата
   к низу и растёт вверх, поэтому кнопки на первом экране при любой длине имени. При прокрутке вкладки липнут
   к верху (в одной строке с маленьким аватаром), снизу — .dock «Написать / Позвонить».
   От 720: две колонки — портрет слева «липнет», справа всё остальное.
   Лайк, кнопки, липкая зона, нижняя панель — в character-bar.css; разделы (сценарии, цены, галерея) — в character-panes.css. */
@import url("./character-bar.css");
@import url("./character-panes.css");

.char {
  --char-tabs-h: 56px;                                              /* строка вкладок */
  --char-mini-h: var(--sat);                                        /* полоса над вкладками при прокрутке (телефон) */
  --char-hero-h: calc(var(--app-h) - var(--sab) - var(--char-tabs-h)); /* первый экран: портрет + панель, под ними вкладки */
  position: relative;
  isolation: isolate;
  min-height: 100%;
  padding-bottom: var(--sab);
}
.char.is-compact { padding-bottom: 0; } /* внизу .dock со своим отступом под «домой» */

/* Размытый отсвет портрета позади страницы */
.char-ambient {
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: min(160vh, 1400px);
  overflow: hidden;
  pointer-events: none;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
}
.char-ambient__img { width: 100%; height: 100%; object-fit: cover; filter: blur(64px) saturate(1.6); transform: scale(1.25); }

/* ---------- Раскладка телефона: портрет и панель в одной ячейке ---------- */
.char-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
.char-main { display: contents; }
.char-aside { grid-area: 1 / 1; position: relative; min-height: var(--char-hero-h); }
.char-info { grid-area: 1 / 1; align-self: end; position: relative; z-index: 2; }
.char-sentinel { grid-row: 2; }
.char-sticky { grid-row: 3; }
.char-panes { grid-row: 4; }

/* ---------- Верхняя плашка поверх портрета: «Назад» (вне Telegram) и баланс ---------- */
.char-top {
  position: absolute;
  z-index: 5;
  top: calc(var(--sat) + 10px);
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.char-top > * { pointer-events: auto; }
.char-back {
  flex: 0 0 auto;
  width: var(--tap);
  height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: var(--glass-bg-media);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
}
.char-back .icon { width: 20px; height: 20px; }
.char-back:active { transform: scale(0.94); }

/* ---------- Портрет ---------- */
.char-media { position: absolute; inset: 0; overflow: hidden; background-color: var(--card); }
/* Низ портрета растворяется в отсвете позади страницы — без ступеньки на границе с вкладками */
.char-aside .char-media {
  -webkit-mask-image: linear-gradient(180deg, #000 70%, rgba(0, 0, 0, 0.7) 88%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 70%, rgba(0, 0, 0, 0.7) 88%, transparent 100%);
}
.char-aside .char-media:not(.skeleton) { background-color: transparent; }
.char-media.skeleton { border-radius: 0; }
.char-media__live { position: absolute; inset: 0; }
.char-media__live .live-avatar__img,
.char-media__live .live-avatar__video { object-position: 50% 22%; }
/* Вертикальный кадр 2:3 «почти в полный рост» (cardImage): голова у верха кадра — если экран шире 2:3,
   лишнее режется снизу (там колени под панелью), а не сверху */
.char-media.is-frame .live-avatar__img,
.char-media.is-frame .live-avatar__video { object-position: 50% 0%; }
/* Fullscreen (телефон): голова у верха кадра попала бы под статус-бар и кнопки Telegram — кадр начинается
   под ними, сверху мягко растворяется в отсвете страницы (полоса кнопок — на размытом фоне того же кадра) */
@media (max-width: 719px) {
  .is-fullscreen .char-media.is-frame .char-media__live {
    top: var(--sat);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40px);
    mask-image: linear-gradient(180deg, transparent 0, #000 40px);
  }
}
.char-media__ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 96px;
  background: var(--grad-soft);
}
.char-media.is-generating .char-media__ph { animation: blink 2.4s ease-in-out infinite; }
.char-media__state {
  position: absolute;
  z-index: 2;
  top: 34%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  transform: translate(-50%, -50%);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
}
/* Затемнение сверху (кнопки читаются) и снизу (под стеклянной панелью) */
.char-media__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11, 10, 20, 0.45) 0%, rgba(11, 10, 20, 0) 14%),
    linear-gradient(180deg, rgba(11, 10, 20, 0) 55%, rgba(11, 10, 20, 0.45) 80%, rgba(11, 10, 20, 0.7) 100%);
}

/* ---------- Стеклянная панель: у низа портрета, сверху оставляет место под баланс ---------- */
.char-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: calc(var(--sat) + 68px) 10px 8px;
  padding: 14px;
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(22, 19, 38, 0.5), rgba(22, 19, 38, 0.8));
  border: 1px solid var(--glass-border);
  box-shadow: var(--elev-3), var(--inner-hi);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  animation: rise-in var(--t-slow) var(--ease-out) both;
}
.char-info__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.char-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: var(--fw-bold);
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--glass-border);
  white-space: nowrap;
}
.char-chip .icon { width: 14px; height: 14px; }
.char-chip--mine { color: var(--focus); background: rgba(139, 92, 246, 0.16); border-color: rgba(139, 92, 246, 0.4); }

.char-info__head { display: flex; align-items: center; gap: 10px; }
/* Имя: размер подбирает hero.js fitName (не больше 2 строк, без переноса посреди слова); .text-name — К8 */
.char-info__name {
  flex: 1;
  min-width: 0;
  font-size: 28px;
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
}
.char-info__name.is-measuring { overflow-wrap: normal; -webkit-hyphens: manual; hyphens: manual; }
.char-info__age { font-weight: var(--fw-bold); color: rgba(242, 240, 255, 0.6); white-space: nowrap; }

.char-info__bio-wrap { display: flex; flex-direction: column; align-items: flex-start; }
.char-info__bio {
  font-size: 14.5px;
  line-height: var(--lh-base);
  color: var(--text-2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  user-select: text;
  -webkit-user-select: text;
}
.char-info__bio.is-open { display: block; -webkit-line-clamp: unset; line-clamp: none; }
.char-info__more {
  min-width: var(--tap); /* «Ещё» короче зоны касания — добираем шириной */
  min-height: var(--tap);
  margin: -8px 0 -12px;
  padding: 0 12px 0 0;
  text-align: left;
  font-size: var(--fs-sm);
  font-weight: var(--fw-heavy);
  color: var(--focus);
}
.char-info__state { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--amber); }
.char-info__state.is-error { color: var(--red); }

/* Теги — под ценами на вкладке «Сценарии» (character-panes.css), на первом экране их нет */
.char-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  white-space: nowrap;
}

/* ---------- Скелетон: те же блоки ---------- */
.char.is-loading .char-info { animation: none; }
.char-skel-like { flex: 0 0 auto; width: 46px; height: 46px; margin: 0 1px; border-radius: var(--r-pill); } /* = сердце .char-like--stacked */
.char-skel-btn { flex: 1; height: 52px; border-radius: var(--r-pill); }
.char-skel-tabs { flex: 1; height: 46px; border-radius: var(--r-pill); }

/* Низкие экраны (Android маленький, iPhone SE): панель плотнее — портрета видно больше */
.h-short .char-info,
.h-compact .char-info { gap: 8px; padding: 12px; }
.h-short .char-info__name { font-size: 25px; }
.h-short .char-info__bio { font-size: 14px; }

/* ---------- Две колонки: планшет и десктоп ---------- */
@media (min-width: 720px) {
  .char {
    --char-mini-h: calc(var(--sat) + 64px);
    padding: calc(var(--sat) + 16px) var(--gutter) calc(var(--sab) + 40px);
  }
  .char.is-compact { padding-bottom: calc(var(--sab) + 40px); }
  .char-ambient { opacity: 0.4; }
  .char-layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 24px;
    align-items: start;
    max-width: 1120px;
    margin: 0 auto;
  }
  .char-main { display: block; grid-column: 2; grid-row: 1; }
  .char-aside { grid-area: auto; grid-column: 1; grid-row: 1; position: sticky; top: calc(var(--sat) + 16px); min-height: 0; }
  .char-info { grid-area: auto; align-self: auto; margin: 0; padding: 20px; gap: 14px; }
  .char-top { top: 12px; left: 12px; right: 12px; }
  .char-media {
    position: relative;
    inset: auto;
    aspect-ratio: 3 / 4;
    max-height: calc(var(--app-h) - var(--sat) - 32px);
    border-radius: var(--r-xl);
    border: 1px solid var(--line-2);
    box-shadow: var(--elev-3);
  }
  .char-media.skeleton { border-radius: var(--r-xl); }
  /* Вертикальный кадр — колонка его пропорций 2:3: персонаж целиком, без обрезки */
  .char-media.is-frame { aspect-ratio: 2 / 3; }
  .char-aside .char-media { -webkit-mask-image: none; mask-image: none; }
  .char-aside .char-media:not(.skeleton) { background-color: var(--card); }
  .char-media__shade { background: linear-gradient(180deg, rgba(11, 10, 20, 0.4) 0%, rgba(11, 10, 20, 0) 18%, rgba(11, 10, 20, 0) 62%, rgba(11, 10, 20, 0.4) 100%); }
  .char-info__name { font-size: 34px; }
  .char-info__bio { -webkit-line-clamp: 4; line-clamp: 4; font-size: var(--fs-base); }
}
@media (min-width: 1024px) {
  .char-layout { gap: 36px; }
  .char-media { aspect-ratio: 4 / 5; }
  .char-info { padding: 24px; }
  .char-info__name { font-size: var(--fs-3xl); }
}