/* ============================================================
   ОБЩИЕ ЭКРАНЫ РАЗДЕЛА · ревизия 2026-08
   Витрина, профиль, мои, память, настройка. Все значения — из tokens.css.
   ============================================================ */

/* Низ страницы не должен упираться в плавающее меню сайта и в липкие кнопки.
   --nav-gap меряет скрипт по факту: у гостя меню нет вовсе. */
.sc-page{ padding-top:var(--sp6); padding-bottom:calc(var(--nav-gap) + var(--sp8)); }
.sc-head{ margin-bottom:var(--sp6); }
.sc-head .pv-over{ display:block; margin-bottom:var(--sp3); }
.sc-lead{ margin:var(--sp3) 0 0; max-width:calc(var(--col) * .8); text-wrap:pretty; }

.sc-meter{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp4);
  padding:var(--sp3) var(--sp4); margin-bottom:var(--sp4);
  background:var(--s1); border:1px solid var(--hair); border-radius:var(--r-md);
}
.sc-meter .pv-bar{ flex:1; max-width:180px; }
.sc-fact{ color:var(--t1); font-size:var(--fs-body); margin-top:var(--sp1); overflow-wrap:anywhere; }
.sc-actions{ display:flex; flex-direction:column; gap:var(--sp3); align-items:stretch; margin-top:var(--sp5); }
.sc-empty{ text-align:center; }
.sc-empty .pv-hand{ margin-top:var(--sp3); }
.sc-upsell{ margin-top:var(--sp5); }
.sc-upsell .pv-over{ display:block; color:var(--mark); margin-bottom:var(--sp2); }
.sc-upsell .pv-btn{ margin-top:var(--sp3); }

/* ============ ШАПКА ВИТРИНЫ ============ */
.hd-bar{
  display:flex; align-items:flex-start; gap:var(--sp3);
  padding:calc(var(--sp5) + var(--sat)) 0 var(--sp2);
}
.hd-bar .grow{ flex:1; min-width:0; }
.hd-title{ font:700 var(--fs-hero)/var(--lh-tight) var(--f-serif); margin:0; }
.hd-sub{ margin-top:var(--sp1); }
.hd-free{
  display:flex; align-items:center; justify-content:center; gap:var(--sp2);
  margin:var(--sp3) auto 0; max-width:34ch;
  color:var(--t3); font-size:var(--fs-small); text-align:center;
}
/* иконка не должна отрываться в левый край, когда текст переносится */
.hd-free .pv-ic{ flex:none; color:var(--hero); align-self:center; }
.hd-free span{ text-wrap:balance; }

/* Две кнопки под заголовком стояли вплотную: у блока не было базового
   правила вовсе, только десктопное. На телефоне это читалось как одна
   слипшаяся деталь. */
.hd-cta{ display:flex; flex-direction:column; gap:var(--sp3); }

/* Иконки-дубли в заголовке — только на большом экране. На телефоне их работу
   делает ряд круглых значков ниже, а рядом с «Персоны» они отжимали подзаголовок
   на вторую строку и ломали шапку. */
.hd-bar .pv-iconbtn{ display:none; }

.hd-tools{
  display:flex; align-items:center; gap:var(--sp2);
  padding:var(--sp4) 0 var(--sp2);
}
.hd-search{
  flex:1; min-width:0;
  display:flex; align-items:center; gap:var(--sp2);
  min-height:var(--ctl); padding:0 var(--sp3) 0 var(--sp4); box-sizing:border-box;
  background:var(--s1); border:1px solid var(--hair); border-radius:var(--r-full);
  color:var(--t3);
}
.hd-search:focus-within{ border-color:var(--hero); }
.hd-search .pv-ic{ flex:none; }
.hd-search input{
  flex:1; border:0; outline:none; background:none; color:var(--t1);
  /* 16px минимум — иначе iOS зумит страницу при фокусе в поиске */
  font:500 max(16px, var(--fs-small))/1 var(--f-ui); min-width:0;
  padding:var(--sp3) 0;
}
.hd-search input::placeholder{ color:var(--t3); }
.hd-search input::-webkit-search-cancel-button{ display:none; }
.hd-search-x{
  position:relative; flex:none;
  width:var(--sp6); height:var(--sp6); display:grid; place-items:center;
  border:0; background:transparent; color:var(--t3); cursor:pointer; border-radius:var(--r-full);
}
.hd-search-x::after{ content:''; position:absolute; left:50%; top:50%; width:var(--ctl); height:var(--ctl); transform:translate(-50%,-50%); }
.hd-search-x[hidden]{ display:none; }

/* Круглая кнопка в панели инструментов. Нужна только в полноэкранном режиме
   колоды, где большой кнопке «Собрать своего» места нет. */
/* Ряд виден на телефоне всегда. Раньше значки показывались только в
   полноэкранной колоде — и стоило уйти в список (поиск, категория), как
   исчезали все пять, включая сам поиск: закрыть панель было нечем. */
.hd-mini{
  position:relative; flex:none;
  width:var(--ctl); height:var(--ctl);
  display:grid; place-items:center;
  border-radius:var(--r-full);
  background:var(--s2); border:1px solid var(--hair);
  color:var(--t2); text-decoration:none;
  transition:transform var(--d-micro) var(--e-spring-soft), color var(--d-micro) var(--e-effect);
  -webkit-tap-highlight-color:transparent;
}
.hd-mini:active{ transform:scale(.92); color:var(--hero); }
.hd-mini:focus-visible{ outline:var(--focus-w) solid var(--focus); outline-offset:var(--focus-off); }
.hd-mini[hidden]{ display:none !important; }
.hd-mini.on{ color:var(--hero); border-color:var(--hero-line); background:var(--hero-lo); }

/* ============================================================
   ПОИСК И КАТЕГОРИИ

   Поиск свёрнут в значок: поле занимало всю ширину ряда ради того, чем
   пользуются раз в десять заходов. Панель под рядом — и поле, и категории,
   ради которых поиск чаще всего и открывают.
   ============================================================ */
.hd-find{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp2);
  padding-top:var(--sp3);
}
.hd-find.pv-hidden{ display:none !important; }
.hd-find .hd-search{ flex:1; min-width:0; }
.hd-find-x{
  flex:none; width:var(--ctl); height:var(--ctl);
  display:grid; place-items:center; cursor:pointer;
  background:none; border:0; color:var(--t3);
  -webkit-tap-highlight-color:transparent;
}
.hd-find-x:active{ transform:scale(.92); }

/* Категории — сеткой, а не рядом с прокруткой: ряд прячет половину плиток
   за краем, и человек не знает, что там ещё есть. Здесь их восемь, они
   помещаются целиком и читаются одним взглядом. */
.hd-cats{
  flex:1 0 100%;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--sp2);
  padding-top:var(--sp1);
}
.hd-cat{
  display:flex; flex-direction:column; align-items:center; gap:var(--sp1);
  padding:var(--sp3) var(--sp1);
  border-radius:var(--r-md);
  background:var(--s2); border:1px solid var(--hair);
  color:var(--t2); cursor:pointer; text-align:center;
  transition:transform var(--d-micro) var(--e-spring-soft), border-color var(--d-micro) var(--e-effect);
  -webkit-tap-highlight-color:transparent;
}
.hd-cat:active{ transform:scale(.95); }
@media (hover:hover){ .hd-cat:hover{ border-color:var(--hair2); color:var(--t1); } }
.hd-cat:focus-visible{ outline:var(--focus-w) solid var(--focus); outline-offset:var(--focus-off); }
.hd-cat.on{ background:var(--hero-lo); border-color:var(--hero-line); color:var(--hero); }
.hd-cat-ic{ display:grid; place-items:center; }
.hd-cat-ic .pv-ic{ width:22px; height:22px; }
.hd-cat b{ font:600 var(--fs-over)/1.2 var(--f-ui); text-wrap:balance; }
/* Сколько персонажей за вкладкой. Цифра приглушена намеренно: она отвечает
   на вопрос «есть ли там вообще кто-нибудь», а не соревнуется с названием. */
.hd-cat-n{
  font:600 11px/1 var(--f-ui); font-style:normal;
  color:var(--t3, var(--t2)); opacity:.62; letter-spacing:.02em;
}
.hd-cat.on .hd-cat-n{ opacity:.85; }

/* Кубок Язми Спора. Золото берём из общего токена сайта (--mark), а не своим
   значением: своё в светлой теме даст жёлтое пятно вместо награды.
   Свечение слабое и без анимации — кнопка у поиска не должна мигать. */
.hd-mini.gold{
  color:var(--mark);
  border-color:color-mix(in srgb, var(--mark) 40%, transparent);
  background:
    radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--mark) 20%, transparent), transparent 72%),
    var(--s2);
  box-shadow:0 2px 10px color-mix(in srgb, var(--mark) 20%, transparent);
}
.hd-mini.gold:active{ color:var(--mark); }

/* Три отличия от обычного чат-бота. Показываем только на большом экране
   в режиме колоды — там слева остаётся свободное место (см. .hd-stage). */
.hd-why{ display:none; list-style:none; margin:0; padding:0; }
.hd-why li{
  display:flex; align-items:flex-start; gap:var(--sp3);
  padding:var(--sp4) 0;
  color:var(--t2); font-size:var(--fs-small); line-height:var(--lh-body);
  text-wrap:pretty;
}
.hd-why li + li{ border-top:1px solid var(--hair); }
.hd-why .pv-ic{ flex:none; color:var(--hero); margin-top:2px; }
.hd-why b{ color:var(--t1); font-weight:600; }

/* ============ ВИТРИНА: КОЛОДА ============ */
.dk-wrap{ position:relative; padding:0 var(--sp4); }
.dk-wrap.pv-hidden{ display:none !important; }
.dk-deck{
  position:relative;
  height:clamp(400px, calc(100dvh - 340px), 560px);
  margin:var(--sp3) 0 0;
}
@media (min-width: 700px){ .dk-deck{ height:520px; } }
.dk-card{
  position:absolute; inset:0; box-sizing:border-box;
  background:linear-gradient(170deg, var(--s2) 0%, var(--s0) 100%);
  border:1px solid var(--hair2); border-radius:var(--r-md);
  padding:var(--sp6) var(--sp5) var(--sp5);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  touch-action:none; user-select:none; -webkit-user-select:none;
  will-change:transform; overflow:hidden;
}
.dk-card:focus-visible{ outline:var(--focus-w) solid var(--focus); outline-offset:var(--focus-off); }
.dk-card::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 40% at 50% 0%, var(--hero-lo), transparent 62%); opacity:.5;
}
.dk-card.under{ transform:scale(.94) translateY(var(--sp5)); opacity:.5; }
.dk-card.done{ justify-content:center; }
.dk-card > *{ position:relative; z-index:1; }
.dk-card .pv-over{ margin-bottom:var(--sp4); }
.dk-card .pv-mono{ margin-bottom:var(--sp4); }
.dk-name{ font:700 var(--fs-hero)/var(--lh-tight) var(--f-serif); margin:0 0 var(--sp2); color:var(--t1); text-wrap:balance; }
.dk-tagline{ color:var(--t2); margin:0; max-width:calc(var(--col) * .7); text-wrap:pretty; }
/* Свободную высоту карточки отдаём НАД описанием: сверху лицо и имя, снизу —
   кто это, прямо над кнопкой «Поговорить». Раньше низ держали только
   метрики, и посреди карточки зияла пустота. */
.dk-about{
  margin:auto 0 0; color:var(--t2);
  font-size:var(--fs-small); line-height:var(--lh-body);
  max-width:calc(var(--col) * .8); text-wrap:pretty;
  /* длинное описание не должно выдавливать теги и метрики за край карточки */
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;
}
.dk-tags{ display:flex; gap:var(--sp2); flex-wrap:wrap; justify-content:center; margin-top:var(--sp3); }
.dk-meta{
  display:flex; gap:var(--sp4); flex-wrap:wrap; justify-content:center;
  margin-top:var(--sp4); padding-top:0;
  color:var(--t3); font-size:var(--fs-small);
}
/* если реплики нет, низ карточки держит первый из оставшихся блоков */
/* если описания нет, низ карточки держит первый из оставшихся блоков */
.dk-tagline + .dk-tags, .dk-tagline + .dk-meta,
.dk-name + .dk-tags, .dk-name + .dk-meta{ margin-top:auto; }
.dk-meta b{ font-family:var(--f-num); font-weight:600; color:var(--t2); }
.dk-done-acts{ display:flex; flex-direction:column; gap:var(--sp3); margin-top:var(--sp5); width:100%; max-width:280px; }
.dk-done-acts .pv-btn{ width:100%; }

/* штампы поверх карточки */
.dk-stamp{
  position:absolute; top:var(--sp6); z-index:2; opacity:0;
  padding:var(--sp2) var(--sp4); border:2.5px solid; border-radius:var(--r-sm);
  font:800 var(--fs-body)/1 var(--f-num); letter-spacing:.05em;
}
.dk-stamp.yes{ left:var(--sp5); color:var(--win); border-color:var(--win); transform:rotate(-12deg); }
.dk-stamp.no{ right:var(--sp5); color:var(--lose); border-color:var(--lose); transform:rotate(12deg); }
.dk-stamp.talk{ left:50%; top:38%; color:var(--hero); border-color:var(--hero); transform:translateX(-50%) rotate(-6deg); }

/* кнопки под колодой */
.sw-btns{
  display:flex; justify-content:center; align-items:center; gap:var(--sp3);
  padding:var(--sp5) 0 var(--sp2);
}
.sw-btns[hidden]{ display:none; }
.swb{
  position:relative;
  width:56px; height:56px; flex:none; border-radius:var(--r-full);
  border:1px solid var(--hair2); background:var(--s2); color:var(--t2);
  display:grid; place-items:center; cursor:pointer;
  transition:transform var(--d-micro) var(--e-spring-soft), background var(--d-micro) var(--e-effect), opacity var(--d-micro) var(--e-effect);
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.swb:active:not(:disabled){ transform:scale(.9); }
.swb:disabled{ opacity:.3; cursor:not-allowed; }
/* display:grid/inline-flex перебивает UA-правило [hidden]{display:none} —
   без этой строки кнопки колоды не прятались, когда карточки кончились */
.swb[hidden]{ display:none !important; }
.swb:focus-visible{ outline:var(--focus-w) solid var(--focus); outline-offset:var(--focus-off); }
.swb svg{ width:24px; height:24px; }
.swb.mini{ width:var(--ctl); height:var(--ctl); }
.swb.mini svg{ width:18px; height:18px; }
.swb.like{ background:var(--s3); border-color:var(--hair3); color:var(--hero); }
/* «Поговорить» — главное действие витрины, поэтому оно единственное с заливкой и подписью */
.swb.talk{
  width:auto; min-width:0; height:var(--ctl-lg); padding:0 var(--sp5);
  display:inline-flex; gap:var(--sp2);
  background:var(--hero); border-color:var(--hero); color:var(--on-hero);
  font:700 var(--fs-body)/1 var(--f-ui);
}
.swb.talk svg{ width:20px; height:20px; }
.sw-hint{
  text-align:center; font:500 var(--fs-hand)/1 var(--f-hand); color:var(--t3);
  padding-bottom:var(--sp3); margin:0;
}
.sw-hint[hidden]{ display:none; }
.dk-count{
  text-align:center; color:var(--t3);
  font:600 var(--fs-over)/1 var(--f-num); letter-spacing:var(--ls-over); text-transform:uppercase;
  padding:var(--sp3) 0 var(--sp2);   /* иначе счётчик прилипал к нижней грани карточки */
}

/* ============ НИЖНЯЯ ПАНЕЛЬ ДЕЙСТВИЙ ============ */
.dk-dock{ position:relative; }
.dk-dock.pv-hidden{ display:none !important; }

/* совпадение */
.pn-match{
  position:fixed; inset:0; z-index:90; display:none; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:var(--sp7) var(--sp5);
  background:color-mix(in srgb, var(--s0) 94%, transparent);
}
@supports (backdrop-filter: blur(1px)){
  .pn-match{ backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
}
@media (prefers-reduced-transparency: reduce){
  .pn-match{ background:var(--s0); backdrop-filter:none; -webkit-backdrop-filter:none; }
}
.pn-match.show{ display:flex; }
.pn-match[hidden]{ display:none; }
.pn-match .pv-over{ color:var(--mark); margin-bottom:var(--sp4); }
.pn-match .pv-mono{ animation:pnMatchPop var(--d-spring) var(--e-bounce); }
@keyframes pnMatchPop{ from{ transform:scale(.8); opacity:0; } }
.pn-match h2{ font:700 var(--fs-hero)/var(--lh-tight) var(--f-serif); margin:var(--sp4) 0 var(--sp2); }
.pn-match .msg{
  background:var(--s2); border:1px solid var(--hair);
  border-radius:var(--r-md) var(--r-md) var(--r-md) var(--r-xs);
  padding:var(--sp3) var(--sp4); font-size:var(--fs-body); text-align:left;
  max-width:calc(var(--col) * .7); margin:var(--sp5) 0 var(--sp6);
  max-height:36dvh; overflow:auto;
}
.pn-match .pv-btn{ width:100%; max-width:calc(var(--col) * .6); }
.pn-match .pv-btn + .pv-btn{ margin-top:var(--sp3); }

/* ============ ВИТРИНА: СЕТКА ============ */
.gr-grid{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:var(--sp3); padding:var(--sp4) 0 var(--sp5);
}
@media (min-width: 560px){ .gr-grid{ grid-template-columns:repeat(3, 1fr); } }
.gr-card{
  background:var(--s2); border:1px solid var(--hair); border-radius:var(--r-md);
  padding:var(--sp5) var(--sp4) var(--sp4);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--sp2);
  transition:transform var(--d-micro) var(--e-spring-soft), border-color var(--d-micro) var(--e-effect);
}
@media (hover:hover){ .gr-card:hover{ border-color:var(--hair2); } }
.gr-face{
  display:flex; flex-direction:column; align-items:center; gap:var(--sp2);
  text-decoration:none; color:inherit; width:100%;
}
.gr-face:active{ transform:scale(.98); }
.gr-name{ font:600 var(--fs-body)/var(--lh-tight) var(--f-serif); color:var(--t1); }
.gr-line{
  color:var(--t3); font-size:var(--fs-small); line-height:1.35;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  min-height:calc(var(--fs-small) * 1.35 * 2);
}
.gr-meta{
  display:flex; gap:var(--sp3); flex-wrap:wrap; justify-content:center;
  color:var(--t3); font-size:var(--fs-over); min-height:var(--sp4);
}
.gr-meta b{ font-family:var(--f-num); color:var(--t2); }
.gr-card .pv-btn{ margin-top:var(--sp2); }
.gr-more{ padding-bottom:var(--sp7); }
/* Низ сетки. Плавающее меню сайта висит поверх страницы, и последний ряд
   карточек уходил под него вместе с кнопкой «Поговорить» — то есть ровно
   с тем, ради чего карточку и открывают. --nav-gap уже меряет высоту меню
   по факту, остаётся оставить запас. */
.gr-grid{ padding-bottom:calc(var(--nav-gap) + var(--sp5)); }
.gr-more{ padding-bottom:calc(var(--nav-gap) + var(--sp7)); }
/* Портрет в карточке был мельче подписи под ним: в сетке из двух колонок
   именно лицо решает, задержится человек или пролистает. */
.gr-face .pv-mono{ width:78px; height:78px; }
@media (min-width: 560px){ .gr-face .pv-mono{ width:88px; height:88px; } }
.gr-face .pv-mono img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }

/* ============ ПРОФИЛЬ ПЕРСОНЫ ============ */
.pf-hero{ text-align:center; padding:var(--sp7) 0 var(--sp5); }
.pf-hero .pv-mono{ margin:0 auto var(--sp5); }
.pf-name{ font:700 var(--fs-hero)/var(--lh-tight) var(--f-serif); margin:0 0 var(--sp2); color:var(--t1); text-wrap:balance; }
.pf-tagline{ color:var(--t2); margin:0 auto; max-width:calc(var(--col) * .75); text-wrap:pretty; }
.pf-hero-text{ min-width:0; }
.pf-tags{ display:flex; gap:var(--sp2); flex-wrap:wrap; justify-content:center; margin-top:var(--sp4); }
/* Полоса счётчиков (.pf-stats / .pf-stat) снята 06.09.2026 вместе с плитками
   «Разговоров / В друзьях / Наговорили» — см. persona/profile.php, yzdock:stats. */
.pf-section{ margin-top:var(--sp6); }
.pf-section .pv-title{ margin-bottom:var(--sp3); }

/* ---------- «Кто это»: четыре строки и «Читать далее» ----------
   Ширину держит мера строки, а не колонка: на ПК левая колонка почти 700px,
   и био растягивалось в строки по сто с лишним знаков — на такой длине глаз
   не находит начало следующей.

   Свёрнутое состояние — класс .cut, снимает его скрытый чекбокс, стоящий в
   разметке ПЕРЕД абзацем. Поэтому весь переключатель живёт в css и работает
   с выключенными скриптами; -webkit-line-clamp понимают все живые браузеры,
   Firefox — с 68-й версии. */
.pf-bio{ color:var(--t2); text-wrap:pretty; max-width:64ch; }
.pf-bio.cut{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4;
  overflow:hidden;
}
.pf-bio-t:checked ~ .pf-bio.cut{ display:block; overflow:visible; -webkit-line-clamp:unset; }
/* Подпись, а не кнопка-плашка: она стоит сразу под текстом и не должна
   спорить с ним за внимание. Высоту нажатия набирает padding. */
.pf-more{
  display:inline-block; margin-top:var(--sp1); padding:var(--sp3) 0;
  font:600 var(--fs-small)/1 var(--f-ui); color:var(--hero);
  cursor:pointer; user-select:none; -webkit-user-select:none;
}
.pf-more[hidden]{ display:none; }
.pf-more:active{ opacity:.6; }
.pf-more .b{ display:none; }
.pf-bio-t:checked ~ .pf-more .a{ display:none; }
.pf-bio-t:checked ~ .pf-more .b{ display:inline; }
/* Чекбокс невидим, но фокусируем с клавиатуры — рамку рисуем на подписи,
   иначе Tab уводит фокус в никуда. */
.pf-bio-t:focus-visible ~ .pf-more{
  outline:2px solid var(--hero); outline-offset:4px; border-radius:var(--r-sm, 8px);
}
/* Липкие «Поговорить / В друзья / Поделиться». Стояли на bottom:0 — и на
   телефоне ровно под ними висело плавающее меню сайта, закрывая вторую
   строку кнопок. Поднимаем на замеренный запас. */
.pf-cta{
  position:sticky; bottom:max(var(--nav-gap), var(--sab)); z-index:20;
  display:flex; flex-direction:column; gap:var(--sp3); align-items:center;
  margin-top:var(--sp7);
  padding:var(--sp5) 0 var(--sp3);
  /* Фон был полупрозрачным, и текст страницы просвечивал сквозь панель:
     читалось не как «кнопки поверх», а как «абзац обрезали на полуслове».
     Низ панели теперь полностью непрозрачный, мягкое растворение — только
     в верхних 40%. */
  background:linear-gradient(to top, var(--s0) 0, var(--s0) 58%, rgba(0,0,0,0) 100%);
}
/* Страница не должна заканчиваться ровно под липкой панелью: последним
   абзацам нужен запас, иначе до них физически нельзя доскроллить. */
.pf-layout{ padding-bottom:var(--sp6); }
@media (max-width: 899px){
  .pf-cta{ gap:var(--sp2); padding:var(--sp4) 0 var(--sp2); }
}
.pf-cta .pv-btn{ width:100%; max-width:calc(var(--col) * .7); }
.pf-cta-row{ display:flex; gap:var(--sp3); width:100%; max-width:calc(var(--col) * .7); }
/* Ровно пополам: flex-basis:0 вместо auto, иначе ширину задаёт длина подписи
   и «Поделиться» получалась заметно шире «В друзья». */
.pf-cta-row .pv-btn{ flex:1 1 0; min-width:0; }
.pf-byline{ margin-top:var(--sp3); color:var(--t3); font-size:var(--fs-small); text-align:center; }

/* ============ МОИ ПЕРСОНАЖИ ============ */
.mn-row{ align-items:center; }
.mn-row .pv-top-name{ font-size:var(--fs-body); }
.mn-counters{ color:var(--t3); font-size:var(--fs-small); margin-top:var(--sp1); }
.mn-counters b{ font-family:var(--f-num); font-weight:600; color:var(--t2); }
/* шкала должна занимать свободное место строки: при flex:1 внутри
   схлопнутого контейнера она получала нулевую ширину и была не видна */
.mn-quota{ display:flex; align-items:center; gap:var(--sp3); flex:1; justify-content:flex-end; }
.mn-quota .pv-bar{ flex:1; min-width:72px; max-width:160px; }

/* ============ НАСТРОЙКА ============ */
.ed-form{ display:flex; flex-direction:column; }
/* Липкая кнопка сохранения: без собственной подложки под ней просвечивал
   текст следующего поля, и надпись «Сохранить» читалась поверх абзаца. */
.ed-save-wrap{
  position:sticky; z-index:20;
  bottom:max(var(--nav-gap), var(--sab)); margin-top:var(--sp5);
  padding:var(--sp4) 0;
  background:linear-gradient(to top, var(--s0) 68%, transparent);
}
.ed-save{ width:100%; }
.ed-note{ margin:var(--sp2) 0 var(--sp6); text-wrap:pretty; }
.ed-toggle{ display:flex; align-items:center; gap:var(--sp4); }
.ed-toggle .grow{ flex:1; min-width:0; }
.ed-preview{
  margin-top:var(--sp3); padding:var(--sp4);
  background:var(--s1); border:1px solid var(--hair); border-radius:var(--r-md);
  border-bottom-left-radius:var(--r-xs);
  color:var(--t1); font-size:var(--fs-small); line-height:var(--lh-body);
  white-space:pre-wrap;
}
.ed-dirty{
  position:sticky; bottom:calc(max(var(--nav-gap), var(--sab)) + var(--ctl-lg) + var(--sp5)); z-index:19;
  text-align:center; font:600 var(--fs-over)/1 var(--f-ui);
  letter-spacing:var(--ls-over); text-transform:uppercase; color:var(--mark);
  padding-bottom:var(--sp2);
}
.ed-dirty[hidden]{ display:none; }

@media (prefers-reduced-motion: reduce){
  .gr-card, .gr-face, .dk-card, .swb{ transition:none !important; }
  .gr-face:active, .swb:active{ transform:none; }
  .pn-match .pv-mono{ animation:none; }
}


/* ============================================================
   ДЕСКТОП · ВИТРИНА, ПРОФИЛЬ, СПИСКИ
   Главная поломка была здесь: у .dk-wrap не было max-width, и на 1440px
   карточка колоды растягивалась во всю ширину, а шапка и фильтры сидели
   в колонке 660px — два разных выравнивания на одном экране.
   ============================================================ */
@media (min-width: 900px){
  /* Витрина работает в широкой раскладке, чтение — в узкой. */
  .pv-shell.wide{ max-width:var(--wide); }

  .hd-bar{
    align-items:center;
    padding-top:var(--sp7);
    gap:var(--sp5);
  }
  .hd-title{ font-size:var(--fs-hero); }

  /* Главная кнопка на десктопе не должна быть шириной с экран */
  .hd-cta{
    display:flex; align-items:center; gap:var(--sp4);
    flex-wrap:wrap; margin-top:var(--sp2);
  }
  .hd-cta .pv-btn.wide{ width:auto; min-width:280px; }
  .hd-free{ margin:0; text-align:left; justify-content:flex-start; max-width:none; }

  /* Панель управления в одну строку: поиск, вид, фильтры, сортировка */
  .hd-tools{ padding-top:var(--sp6); }
  .hd-search{ max-width:360px; }
  .hd-bar .pv-iconbtn{ display:grid; }
  /* Круглые значки тут дублируют шапку — кроме поиска: его в шапке нет,
     и без него панель с категориями стала бы недостижимой. */
  .hd-mini{ display:none; }
  .hd-mini#hdSearchBtn{ display:grid; }

  /* видно только рядом с колодой: в режиме сетки место занято карточками */
  .hd-stage:not(.one-col) .hd-why{ display:block; margin-top:var(--sp5); max-width:52ch; }

  /* ---- Сцена в две колонки ----
     Раньше заголовок, кнопка, поиск и фильтры занимали 344px по вертикали,
     а колода начиналась под ними и высотой 600px — вместе 944px при экране
     900. Карточка и кнопки уезжали за нижний край: «плывёт» на ПК было
     именно про это. Теперь шапка и колода стоят рядом и помещаются вместе. */
  .hd-stage{
    display:grid; grid-template-columns:minmax(0,1fr) 460px;
    gap:var(--sp8); align-items:start;
    max-width:var(--wide); margin:0 auto; padding:var(--sp3) var(--sp5) 0;
  }
  .hd-stage > .pv-shell{ max-width:none; padding:0; }
  /* В режиме сетки колоды нет — шапка занимает всю ширину */
  .hd-stage.one-col{ grid-template-columns:minmax(0,1fr); }
  .hd-stage.one-col > .pv-shell{ max-width:var(--wide); }

  /* Колода — размером с карточку, а не с монитор */
  .dk-wrap{
    max-width:460px; margin:0; padding:0;
    display:flex; flex-direction:column;
    /* верхний край колоды примерно на высоте заголовка, поэтому вычитаем
       её же отступ сверху — так низ кнопок остаётся в пределах экрана */
    height:calc(100svh - var(--sp8));
    max-height:760px;
    position:sticky; top:var(--sp5);
  }
  .dk-deck{ flex:1 1 auto; height:auto; min-height:320px; margin-top:0; }
  .dk-count, .sw-btns, .sw-hint{ flex:none; }
  .dk-card{ padding:var(--sp7) var(--sp6) var(--sp6); }

  /* Сетка — главный вид на большом экране */
  .gr-grid{ grid-template-columns:repeat(4, 1fr); gap:var(--sp4); padding-top:var(--sp5); }
  .gr-card{ padding:var(--sp6) var(--sp5) var(--sp5); }

  /* Профиль: портрет и факты слева, действия — липкой карточкой справа */
  .pf-layout{
    display:grid; grid-template-columns:minmax(0,1fr) 320px;
    gap:var(--sp8); align-items:start;
  }
  .pf-hero{ text-align:left; padding-top:var(--sp7); display:flex; gap:var(--sp6); align-items:center; }
  .pf-hero .pv-mono{ margin:0; }
  .pf-hero-text{ min-width:0; }
  .pf-tagline{ margin:0; }
  .pf-tags{ justify-content:flex-start; }
  .pf-cta{
    position:sticky; top:var(--sp7); bottom:auto;
    background:var(--s2); border:1px solid var(--hair); border-radius:var(--r-md);
    box-shadow:var(--sh-sm);
    padding:var(--sp5); margin:var(--sp7) 0 0;
  }
  .pf-cta .pv-btn, .pf-cta-row{ max-width:none; }
  /* В узкой колонке две кнопки в ряд пришлось бы обрезать многоточием —
     ставим их друг под другом, все три по одной ширине. */
  .pf-cta-row{ flex-direction:column; }

  /* Формы не должны растягиваться на всю ширину — читать неудобно */
  .ed-form, .sc-page > .sc-head, .sc-page > #memList,
  .sc-page > .sc-meter, .sc-page > .sc-actions{ max-width:var(--col); }
}

@media (min-width: 1280px){
  .gr-grid{ grid-template-columns:repeat(5, 1fr); }
}


/* ============================================================
   ТЕЛЕФОН · КОЛОДА ЗАНИМАЕТ ВЕСЬ ЭКРАН

   Пока карточка стояла в потоке страницы, она проигрывала всегда: сверху
   заголовок и фильтры, снизу плавающее меню сайта. Замер на живом сайте
   (541×785) показал итог: колода уходила под меню, кнопки «мимо / поговорить
   / в друзья» начинались на 821 — за нижним краем экрана. Плюс страница
   скроллилась, и карточка дёргалась вместе с ней.

   Теперь на телефоне режим колоды — это отдельный экран, а не кусок страницы:
   карточка на весь экран, страница не скроллится вовсе (дёргаться нечему),
   а управление лежит сверху и снизу стеклом поверх карточки. В режиме сетки
   всё возвращается к обычной прокручиваемой странице.

   Высоты в svh, а не dvh: svh — «маленький» экран, с раскрытой панелью
   браузера. Он не меняется, когда панель прячется при скролле, поэтому
   карточка не дышит и всегда помещается целиком.
   ============================================================ */
@media (max-width: 899px){

  /* ---------- общий для обоих режимов ---------- */
  .dk-deck{ height:auto; min-height:300px; }

  /* Кнопки не должны наезжать друг на друга на узких экранах: «Поговорить»
     умеет сжиматься, круглые — нет, а подпись при нехватке места прячется. */
  .sw-btns{ gap:var(--sp2); padding-left:var(--sp3); padding-right:var(--sp3); }
  .swb.talk{ flex:0 1 auto; min-width:0; padding:0 var(--sp4); }
  .swb.talk span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  @media (max-width: 359px){
    .swb.talk span{ display:none; }
    .swb.talk{ width:var(--ctl-lg); padding:0; }
  }

  /* ---------- режим колоды: полный экран ---------- */
  body.pn-deck{ overflow:hidden; height:100svh; }
  /* страница под карточкой не скроллится — значит и дёргаться нечему */
  html.pn-deck{ overflow:hidden; }

  body.pn-deck .hd-stage{
    position:fixed; left:0; right:0; top:0;
    height:100vh; height:100svh;
    z-index:70;                      /* ниже тостов и шторок раздела */
  }

  /* Всё, что не помещается в экран карточки, на этом экране лишнее.
     Заголовок остаётся в разметке для поиска, но уводится с глаз. */
  body.pn-deck .hd-bar,
  body.pn-deck .hd-cta,
  body.pn-deck .hd-why{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip-path:inset(50%); white-space:nowrap; padding:0; margin:0;
  }

  /* ---------- стекло сверху ---------- */
  body.pn-deck > .hd-stage > .pv-shell{
    position:absolute; left:0; right:0; top:0; z-index:2;
    max-width:none;
    padding:calc(var(--sp2) + var(--sat)) var(--sp3) var(--sp2);
    /* Стекло: подложка полупрозрачная, карточка просвечивает и размывается
       под ней. Светлая линия сверху и тёмная снизу — то, что делает панель
       стеклом, а не просто прямоугольником другого цвета. */
    background:color-mix(in srgb, var(--s0) 58%, transparent);
    box-shadow:inset 0 1px 0 color-mix(in srgb, var(--t1) 10%, transparent),
               0 1px 0 var(--hair);
  }
  /* Ряд действий: пять круглых кнопок вместо поля во всю ширину.
     Раскладываем их по краям, чтобы поиск справа попадал под большой палец. */
  body.pn-deck .hd-tools{ padding:0; justify-content:space-between; }
  body.pn-deck .hd-search{ background:var(--s2); }
  body.pn-deck .hd-mini{ display:grid; }
  /* Панель поиска в полноэкранной колоде — часть стеклянной шапки, поэтому
     её высота обязана попасть в --dk-top: за это отвечает remeasure() в JS. */
  body.pn-deck .hd-find{ padding-bottom:var(--sp2); }

  /* ---------- карточка ---------- */
  body.pn-deck .dk-wrap{
    position:absolute; inset:0; z-index:1;
    padding:0; max-width:none;
  }
  body.pn-deck .dk-deck{
    position:absolute; inset:0;
    margin:0; min-height:0;
  }
  /* На весь экран карточке не нужна рамка вокруг пустоты — она сама и есть
     экран. Отступы сверху и снизу равны высоте стеклянных панелей: их меряет
     скрипт (--dk-top / --dk-bot), потому что высота зависит от чипов,
     безопасных зон и от того, есть ли у человека меню сайта. */
  body.pn-deck .dk-card{
    border-radius:0; border:0;
    padding:calc(var(--dk-top, 104px) + var(--sp4)) var(--sp5) calc(var(--dk-bot, 150px) + var(--sp3));
    background:linear-gradient(175deg, var(--s2) 0%, var(--s0) 62%);
  }
  body.pn-deck .dk-card.under{ transform:scale(.96); }
  body.pn-deck .dk-about{ -webkit-line-clamp:7; }
  body.pn-deck .dk-stamp{ top:calc(var(--dk-top, 104px) + var(--sp4)); }
  /* Второй auto-отступ, сверху: свободная высота делится поровну над лицом
     и над репликой. Иначе лицо липло к стеклу, а между ним и репликой зияла
     дыра во весь рост. Экран «Пока всё» центрируется сам — его не трогаем. */
  body.pn-deck .dk-card:not(.done) > .pv-over{ margin-top:auto; }
  /* на весь экран лицо может быть крупнее — оно тут главный герой */
  body.pn-deck .dk-card .pv-mono.lg{
    width:112px; height:112px; font-size:calc(112px * .42);
  }

  /* ---------- стекло снизу ---------- */
  /* --dk-gap — запас под плавающее меню сайта. Меряет скрипт витрины в том же
     проходе, что и высоту панели: разнесённые замеры расходились, и панель
     наезжала на карточку. */
  body.pn-deck .dk-dock{
    position:absolute; left:0; right:0; bottom:0; z-index:2;
    padding-bottom:var(--dk-gap, 88px);
    background:linear-gradient(to top, var(--s0) 55%, transparent);
  }
  body.pn-deck .dk-count{ padding-top:var(--sp2); }
  body.pn-deck .sw-hint{ padding-bottom:var(--sp2); }
  /* Круглые кнопки поверх карточки — матовое стекло. «Поговорить» остаётся
     плотной: главное действие не должно быть полупрозрачным. */
  body.pn-deck .swb{
    background:color-mix(in srgb, var(--s3) 62%, transparent);
    border-color:var(--hair2);
  }
  body.pn-deck .swb.like{ background:color-mix(in srgb, var(--s4) 62%, transparent); }
  body.pn-deck .swb.talk{ background:var(--hero); box-shadow:var(--sh-hero); }
}

/* Полупрозрачность — только там, где браузер умеет размывать фон. Без
   размытия стекло превращается в мутное пятно поверх текста, поэтому
   запасной вариант — плотная подложка. */
@supports (backdrop-filter: blur(1px)){
  @media (max-width: 899px){
    body.pn-deck > .hd-stage > .pv-shell{
      backdrop-filter:blur(22px) saturate(160%);
      -webkit-backdrop-filter:blur(22px) saturate(160%);
    }
    body.pn-deck .swb{
      backdrop-filter:blur(14px) saturate(140%);
      -webkit-backdrop-filter:blur(14px) saturate(140%);
    }
  }
}
/* Без размытия полупрозрачность превращается в мутное пятно поверх текста —
   тогда честнее плотная подложка. */
@media (prefers-reduced-transparency: reduce){
  body.pn-deck > .hd-stage > .pv-shell{
    background:var(--s0); backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  body.pn-deck .swb{
    background:var(--s2); backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  body.pn-deck .swb.like{ background:var(--s3); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   SEO-2026: подзаголовок в H1, крошки, похожие персонажи, FAQ   yzseo:css
   ───────────────────────────────────────────────────────────────────────────
   Подзаголовок ОБЯЗАН быть видимым. Спрятать текст, который показываешь
   роботу, — это клоакинг, за него снимают позиции. Здесь он просто мельче
   и тише основного имени.
   ═══════════════════════════════════════════════════════════════════════════ */
.pf-h1sub{display:block;font-size:13px;font-weight:500;letter-spacing:0;
  margin-top:5px;line-height:1.35;color:var(--pv-tx2,#a8a096)}

.pf-crumbs{padding:12px 0 2px;font-size:13px;color:var(--pv-tx3,#6f675c)}
.pf-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:0;margin:0}
.pf-crumbs li{display:flex;align-items:center;gap:6px}
.pf-crumbs li+li:before{content:"›";color:var(--pv-tx3,#6f675c)}
.pf-crumbs a{color:var(--pv-tx2,#a8a096);text-decoration:none}
.pf-crumbs a:hover{color:var(--pv-acc,#d97757)}
/* ---------- строка крошек и кнопка «Ещё» ----------      yzhdr 06.09.2026
   Полосы .pv-top на этой странице больше нет (её место заняла общая шапка
   сайта), и «Ещё» переехало сюда. Крошки занимают всю свободную ширину и
   переносятся на вторую строку сами; кнопка прижата к правому краю и по
   вертикали стоит по ПЕРВОЙ строке крошек, а не по центру блока — иначе на
   длинной цепочке она уезжает вниз и повисает в пустоте. */
.pf-crumbrow{ display:flex; align-items:flex-start; gap:var(--sp3); }
.pf-crumbrow .pf-crumbs{ flex:1 1 auto; min-width:0; }
.pf-crumbrow .pf-crumb-more{ flex:none; margin-left:auto; margin-top:var(--sp1); }

.pf-same{margin-top:22px}
.pf-same-grid{list-style:none;display:grid;gap:10px;padding:0;margin:12px 0 0;
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.pf-same-grid a{display:block;text-align:center;text-decoration:none;color:inherit}
/* width/height у картинки заданы в разметке, aspect-ratio держит квадрат:
   место под лицо занимается до загрузки, страница не прыгает (CLS). */
.pf-same-grid img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  border-radius:14px;background:var(--pv-bg2,#1b1917);display:block}
.pf-same-grid span{display:block;margin-top:6px;font-size:12.5px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.pf-faq{margin-top:26px}
.pf-faq h2{font-size:17px;font-weight:750;margin-bottom:10px}
.pf-faq details{border:1px solid var(--pv-line,#2e2a26);border-radius:12px;
  background:var(--pv-bg2,#1b1917);padding:11px 14px;margin-bottom:8px}
.pf-faq summary{cursor:pointer;list-style:none;font-weight:650;font-size:14.5px}
.pf-faq summary::-webkit-details-marker{display:none}
.pf-faq summary h3{display:inline;font-size:inherit;font-weight:inherit;margin:0}
.pf-faq summary:after{content:"+";float:right;color:var(--pv-acc,#d97757);font-weight:700}
.pf-faq details[open] summary:after{content:"−"}
.pf-faq p{color:var(--pv-tx2,#a8a096);font-size:14px;padding-top:8px;margin:0}

.pf-updown{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 34px}
.pf-updown a{background:var(--pv-bg2,#1b1917);border:1px solid var(--pv-line,#2e2a26);
  border-radius:999px;padding:7px 14px;font-size:13.5px;text-decoration:none;
  color:var(--pv-tx2,#a8a096)}
.pf-updown a:hover{border-color:var(--pv-acc,#d97757);color:var(--pv-tx,#f2eee8)}
/* ═══════════════════════════════════════════════════════════════════════════
   ПРОФИЛЬ ГОСТЯ: ЖИВАЯ СТРОКА, ПРИВЕТСТВИЕ, ДОК ВВОДА          yzdock 2026-08
   ───────────────────────────────────────────────────────────────────────────
   Всё ниже относится к странице персонажа и появляется только у гостя, кроме
   .pf-live — она показывается всем. Ни один селектор не переопределяет
   существующие: имена новые, .pf-cta не тронут.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---------- строка активности ----------
   Точка серая и неподвижная по умолчанию. Зелёной и пульсирующей она
   становится ТОЛЬКО от класса .pulse, который ставится в единственном
   состоянии — «прямо сейчас». Это контракт, а не оформление: как только
   точка замигает под словом «за неделю», верить ей будет нельзя. */
.pf-live{
  display:flex; align-items:center; justify-content:center; gap:var(--sp2);
  margin:0 0 var(--sp5);
  color:var(--t2); font-size:var(--fs-small);
}
.pf-live-dot{
  width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--t3);
}
.pf-live.pulse{ color:var(--t2); }
.pf-live.pulse .pf-live-dot{
  background:var(--win);
  animation:pfLivePulse 2.4s ease-out infinite;
}
@keyframes pfLivePulse{
  0%   { box-shadow:0 0 0 0 color-mix(in srgb, var(--win) 55%, transparent); }
  70%  { box-shadow:0 0 0 7px transparent; }
  100% { box-shadow:0 0 0 0 transparent; }
}


/* ---------- ДОК ----------
   Единственное поле ввода на странице. Липнет ко дну и едет за человеком,
   поэтому второе поле наверху не нужно: его роль играет положение.
   Подложка непрозрачна снизу и растворяется только вверху — иначе сквозь
   ряд заготовок просвечивают карточки, и он читается как ошибка отрисовки. */
.pf-dock{
  position:sticky; bottom:max(0px, var(--sab)); z-index:20;
  margin-top:var(--sp7);
  padding:0 0 var(--sp3);
  background:linear-gradient(to top, var(--s0) 0, var(--s0) 84%, rgba(0,0,0,0) 100%);
}
.pf-qa{
  display:flex; gap:var(--sp2); overflow-x:auto; scrollbar-width:none;
  padding:var(--sp4) var(--sp1) var(--sp3);
  margin:0 calc(var(--sp1) * -1);
}
.pf-qa::-webkit-scrollbar{ display:none; }
.pf-qa[hidden]{ display:none; }
.pf-q{
  flex:none; white-space:nowrap; cursor:pointer;
  min-height:var(--ctl-vis); padding:0 var(--sp4);
  background:transparent; color:var(--hero);
  border:1px dashed var(--hero-line); border-radius:var(--r-full);
  font:500 var(--fs-small)/1 var(--f-ui);
  transition:background var(--d-micro) var(--e-effect),
             border-style var(--d-micro) var(--e-effect),
             transform var(--d-micro) var(--e-spring-soft);
}
.pf-q:hover, .pf-q:focus-visible{ background:var(--hero-lo); border-style:solid; }
.pf-q.on{ background:var(--hero-lo); border-style:solid; color:var(--t1); }

.pf-dock-row{
  display:flex; align-items:center; gap:var(--sp2);
  background:var(--s1); border:1px solid var(--hair2);
  border-radius:var(--r-full);
  padding:var(--sp1) var(--sp1) var(--sp1) var(--sp5);
  transition:border-color var(--d-std) var(--e-effect),
             box-shadow var(--d-std) var(--e-effect);
}
.pf-dock-row:focus-within{
  border-color:var(--hero-line);
  box-shadow:0 0 0 3px var(--hero-lo);
}
.pf-dock-row input{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  color:var(--t1); font:400 var(--fs-body)/1 var(--f-ui);
  /* 16px на iOS обязателен: при меньшем кегле Safari зумит страницу на
     фокусе, и человек попадает в чат уже с уехавшей вёрсткой. */
  font-size:max(16px, var(--fs-body));
  padding:var(--sp3) 0;
}
.pf-dock-row input::placeholder{ color:var(--t3); }
.pf-send{
  width:var(--ctl-vis); height:var(--ctl-vis); flex:none;
  display:grid; place-items:center; cursor:pointer;
  border:0; border-radius:50%;
  background:var(--hero); color:var(--on-hero);
  transition:transform var(--d-micro) var(--e-spring),
             box-shadow var(--d-std) var(--e-effect);
}
/* Хит-зона до 44px по WCAG, визуальный размер остаётся прежним. */
.pf-send::after{
  content:""; position:absolute; inset:50% auto auto 50%;
  width:var(--ctl); height:var(--ctl); transform:translate(-50%, -50%);
}
.pf-send{ position:relative; }
.pf-send:active{ transform:scale(.9); }
.pf-dock-note{
  text-align:center; margin:var(--sp3) 0 0;
  color:var(--t3); font-size:var(--fs-small);
}

/* ---------- подмигивание ----------
   Один короткий такт, не бесконечная анимация. Ставится классом на 900 мс и
   снимается скриптом; повторяется максимум три раза за жизнь страницы. */
.pf-dock.wink .pf-dock-row{
  border-color:var(--hero);
  box-shadow:0 0 0 4px var(--hero-lo);
}
.pf-dock.wink .pf-send{ box-shadow:var(--sh-hero); }
.pf-dock.wink .pf-qa{ animation:pfNudge .62s var(--e-spring); }
.pf-dock.wink .pf-q:first-child{ transform:translateY(-3px); }
@keyframes pfNudge{
  0%   { transform:translateX(0); }
  26%  { transform:translateX(9px); }
  58%  { transform:translateX(-3px); }
  100% { transform:translateX(0); }
}
@media (prefers-reduced-motion: reduce){
  .pf-live.pulse .pf-live-dot{ animation:none; }
  .pf-dock.wink .pf-qa{ animation:none; }
  .pf-dock.wink .pf-q:first-child{ transform:none; }
}

/* На большом экране док не растягивается на всю ширину колонки: поле ввода
   длиной в экран ноутбука выглядит как форма поиска, а не как реплика. */
@media (min-width: 900px){
  .pf-dock{ max-width:calc(var(--col) * .8); }
  .pf-live{ justify-content:flex-start; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ПАНЕЛЬ ВВОДА НА БОЛЬШОМ ЭКРАНЕ                          yzdock:desktop
   ───────────────────────────────────────────────────────────────────────────
   На телефоне панель липнет ко дну — там это очевидно и работает. На ПК
   .pf-layout раскладывается в две колонки (см. выше: minmax(0,1fr) 320px), и
   панель уезжает в правую. Приклеенная к низу и прозрачная, она повисала в
   пустом углу: ряд заготовок обрезался краем колонки, поля не было видно, и
   на вопрос «где здесь чат» страница не отвечала вовсе.

   На ПК она обязана быть КАРТОЧКОЙ — ровно такой же, как .pf-cta у вошедшего:
   липкой сверху, с фоном, рамкой и заголовком. Заголовок здесь не украшение:
   на телефоне панель прижата к низу экрана и видна целиком, а на ПК она
   уезжает в правую колонку и обязана назвать себя сама. (Приветствие с
   припиской «ответь ему» стояло над ней до 06.09.2026 — снято.)
   ═══════════════════════════════════════════════════════════════════════════ */
.pf-dock-t{ display:none; }

@media (min-width: 900px){
  .pf-dock{
    position:sticky; top:var(--sp7); bottom:auto;
    background:var(--s2); border:1px solid var(--hair); border-radius:var(--r-md);
    box-shadow:var(--sh-sm);
    padding:var(--sp5); margin:var(--sp7) 0 0;
    max-width:none;
  }
  .pf-dock-t{
    display:block; margin:0 0 var(--sp4);
    font:700 var(--fs-title)/1.2 var(--f-serif); color:var(--t1);
  }
  /* Колонка узкая: заготовки переносятся, а не уезжают в горизонтальную
     прокрутку. Скрытая прокрутка на мыши — это спрятанный контент: на
     телефоне её выдаёт палец, на ПК ничто. */
  .pf-qa{
    flex-wrap:wrap; overflow:visible; margin:0; padding:0 0 var(--sp4);
  }
  .pf-q{ white-space:normal; text-align:left; padding:var(--sp2) var(--sp4); min-height:0; }
  .pf-dock-row{ padding:var(--sp1) var(--sp1) var(--sp1) var(--sp4); }
  .pf-dock-note{ margin-top:var(--sp3); }
  /* Строка активности в левой колонке выравнивается по тексту, а не по центру */
  .pf-live{ justify-content:flex-start; margin-top:0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   СТРОКИ ШТОРКИ «ЕЩЁ»                                       yzdock:sheet
   ───────────────────────────────────────────────────────────────────────────
   Шторку профиля рисует его собственный скрипт классами .ch-sheet-row, а сам
   класс объявлен ТОЛЬКО в chat.css — лист, который profile.php не подключает
   (pnHead принимает один файл, и он занят screens.css). В итоге на странице
   персонажа шторка «Ещё» показывала две ссылки подряд без отступов, слипшиеся
   в одну строку, и системную серую кнопку жалобы.

   Дефект жил здесь до правки дока и к ней отношения не имеет — но виден он
   именно на этой странице, поэтому чиним тут же. Стили повторяют chat.css,
   а не наследуют его: тащить 76 КБ ради трёх правил незачем.
   ═══════════════════════════════════════════════════════════════════════════ */
.pv-sheet .ch-sheet-row{
  display:flex; align-items:center; gap:var(--sp3); width:100%;
  min-height:var(--ctl); padding:var(--sp3) var(--sp4);
  margin:0 0 var(--sp2);
  background:var(--s1); border:1px solid var(--hair); border-radius:var(--r-sm);
  color:var(--t1); font:500 var(--fs-body)/1.3 var(--f-ui); text-align:left;
  text-decoration:none; cursor:pointer;
  transition:background var(--d-micro) var(--e-effect),
             border-color var(--d-micro) var(--e-effect);
}
.pv-sheet .ch-sheet-row:last-child{ margin-bottom:0; }
.pv-sheet .ch-sheet-row:hover,
.pv-sheet .ch-sheet-row:focus-visible{ background:var(--s3); border-color:var(--hair2); }
.pv-sheet .ch-sheet-row .grow{ flex:1; min-width:0; }
/* Опасное действие отличается цветом, но не кричит: жалоба — это нормальный
   пункт меню, а не кнопка самоуничтожения. */
.pv-sheet .ch-sheet-row.danger{ color:var(--lose); }
.pv-sheet .ch-sheet-row.danger:hover{
  border-color:color-mix(in srgb, var(--lose) 45%, transparent);
}
/* Стрелка справа: строка ведёт куда-то, и это должно быть видно до нажатия. */
.pv-sheet a.ch-sheet-row::after{
  content:"›"; flex:none; color:var(--t3); font-size:var(--fs-title); line-height:1;
}