/* ============================================================
   ВОРОНКА ГОСТЯ · 09.2026 (см. funnel.js)
   Подключается только при включённом рубильнике (persona/chat.php), поэтому
   ни один селектор здесь не должен менять вид чата сам по себе: всё висит на
   классах, которые ставит funnel.js.
   ============================================================ */

/* ─── кольцо-счётчик под шапкой ───
   44px, прогресс — conic-gradient цвета раздела поверх еле заметной дорожки,
   внутри тёмный диск с числом. Под шапкой, а не в ней: шапка меряется
   скриптом, и лишний элемент внутри сдвинул бы ленту. */
.yzf-ring{
  position:fixed; z-index:39;
  top:calc(var(--ch-top, 68px) + 6px);
  right:calc(var(--sp3, 12px) + var(--sar, 0px));
  width:44px; height:44px; border-radius:50%;
  background:conic-gradient(var(--hero) var(--p, 0%), rgba(250,249,245,.12) 0);
  display:grid; place-items:center;
  box-shadow:var(--sh-md);
  pointer-events:none;
  transition:opacity var(--d-std, 200ms);
}
.yzf-ring[hidden]{ display:none; }
.yzf-ring::before{
  content:""; position:absolute; inset:3px; border-radius:50%;
  background:rgba(20,18,16,.9);
}
.yzf-ring-n{
  position:relative;
  font:500 11px/1 var(--f-display); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; color:var(--t1);
}
/* осталось три и меньше — число окрашивается в акцент */
.yzf-ring.low .yzf-ring-n{ color:var(--hero); }
.yzf-ring.low{ background:conic-gradient(var(--hero) var(--p, 0%), color-mix(in srgb, var(--hero) 30%, transparent) 0); }

/* ─── реплика «запомни меня» ───
   Как пузырь персонажа, но с волосяной рамкой цвета раздела и мягким
   градиентом: это развилка, а не ещё одна реплика в потоке. */
.ch-msg.ch-nudge .ch-bubble{
  border:1px solid var(--hero-line);
  background:linear-gradient(160deg, color-mix(in srgb, var(--hero) 14%, var(--s2)), var(--s2) 70%);
}
.yzf-nudge-act{
  display:flex; flex-wrap:wrap; gap:var(--sp2);
  margin-top:var(--sp3); padding-top:var(--sp3);
  border-top:1px solid var(--hair2);
  user-select:none; -webkit-user-select:none;
}
.yzf-nudge-btn{
  min-height:var(--ctl-vis, 36px); padding:0 var(--sp4);
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-full); cursor:pointer;
  font:600 var(--fs-small)/1 var(--f-ui);
  background:transparent; border:1px solid var(--hair2); color:var(--t1);
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  transition:transform var(--d-micro) var(--e-spring-soft);
}
.yzf-nudge-btn.main{ background:var(--hero); border-color:var(--hero); color:var(--on-hero); }
.yzf-nudge-btn:active{ transform:scale(.97); }
.yzf-nudge-btn:focus-visible{ outline:var(--focus-w) solid var(--focus); outline-offset:var(--focus-off); }
.ch-msg.yzf-nudge-sys{
  display:block; text-align:center; color:var(--t3);
  font:400 var(--fs-small)/1.3 var(--f-ui);
  margin:calc(-1 * var(--sp2)) 0 var(--sp3);
}

/* ─── шторка входа ─── */
.yzf-veil{
  position:fixed; inset:0; z-index:80;
  background:rgba(0,0,0,.55);
  opacity:0; transition:opacity var(--d-sheet, 280ms) var(--e-spring-soft);
}
.yzf-veil.on{ opacity:1; }
.yzf-veil[hidden]{ display:none; }
.yzf-sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:81;
  max-height:calc(100dvh - 40px); overflow-y:auto; overscroll-behavior:contain;
  padding:var(--sp3) var(--sp4) calc(var(--sp5, 24px) + var(--sab, 0px));
  background:var(--s2); color:var(--t1);
  border-radius:var(--r-lg, 28px) var(--r-lg, 28px) 0 0;
  border-top:1px solid var(--hair2);
  box-shadow:0 -12px 40px -16px rgba(0,0,0,.6);
  transform:translateY(100%);
  transition:transform var(--d-sheet, 280ms) var(--e-spring-soft);
}
.yzf-sheet.on{ transform:translateY(0); }
.yzf-sheet[hidden]{ display:none; }
@media (min-width:640px){
  .yzf-sheet{ left:50%; right:auto; width:440px; transform:translate(-50%, 100%); }
  .yzf-sheet.on{ transform:translate(-50%, 0); }
}
/* пока шторка открыта, страница под ней не прокручивается */
body.yzf-lock{ overflow:hidden; }

.yzf-grip{
  width:36px; height:4px; margin:0 auto var(--sp3);
  border-radius:var(--r-full); background:var(--hair2);
}
.yzf-close{
  position:absolute; top:var(--sp3); right:var(--sp3);
  width:var(--ctl, 44px); height:var(--ctl, 44px);
  display:grid; place-items:center;
  border:0; border-radius:50%; background:transparent; color:var(--t2);
  font:300 26px/1 var(--f-ui); cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.yzf-close:focus-visible{ outline:var(--focus-w) solid var(--focus); outline-offset:var(--focus-off); }
.yzf-eyebrow{
  margin:var(--sp1) var(--ctl, 44px) var(--sp2) 0;
  font:600 var(--fs-over, 11px)/1.3 var(--f-ui);
  letter-spacing:.06em; text-transform:uppercase; color:var(--hero);
}
.yzf-title{
  margin:0 var(--ctl, 44px) var(--sp2) 0;
  font:600 clamp(19px, 5.4vw, 23px)/1.15 var(--f-display);
  letter-spacing:-.02em; color:var(--t1); text-wrap:balance;
}
.yzf-lead{
  margin:0 0 var(--sp4);
  font:400 var(--fs-body)/1.45 var(--f-serif); color:var(--t2);
}
.yzf-stack{ display:flex; flex-direction:column; gap:var(--sp2); }
.yzf-auth{
  display:flex; align-items:center; justify-content:center; gap:var(--sp2);
  width:100%; min-height:52px; padding:0 var(--sp4);
  border-radius:var(--r-full); border:1px solid transparent; cursor:pointer;
  font:600 var(--fs-body)/1 var(--f-ui);
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  transition:transform var(--d-micro) var(--e-spring-soft), opacity var(--d-micro);
}
.yzf-auth:active{ transform:scale(.98); }
.yzf-auth:focus-visible{ outline:var(--focus-w) solid var(--focus); outline-offset:var(--focus-off); }
.yzf-auth[disabled]{ opacity:.42; cursor:not-allowed; transform:none; }
.yzf-auth.vk{ background:#0077ff; color:#fff; }
.yzf-auth.ya{ background:#fff; color:#000; }
.yzf-auth.ghost{ background:transparent; border-color:var(--hair2); color:var(--t1); }
.yzf-ic{ display:inline-grid; place-items:center; width:22px; height:22px; flex:none; }
.yzf-ic svg{ width:22px; height:22px; display:block; }
.yzf-ic.ya{
  width:22px; height:22px; border-radius:50%; background:#fc3f1d; color:#fff;
  font:800 13px/1 var(--f-ui);
}
.yzf-pd{
  display:flex; align-items:flex-start; gap:var(--sp2);
  margin:var(--sp3) 0 0;
  font:400 12px/1.45 var(--f-ui); color:var(--t2); cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.yzf-pd a{ color:var(--hero); text-decoration:none; }
.yzf-pd input{ flex:0 0 20px; width:20px; height:20px; margin:0; accent-color:var(--hero); cursor:pointer; }
.yzf-pd.shake{ animation:yzfShake .4s; }
/* Галочка над кнопками: карточкой, подсвечена, пока не отмечена. */
.yzf-pd{ margin:0 0 var(--sp3); padding:10px 12px; border-radius:14px; color:var(--t1);
  border:1px solid var(--hero-line); background:var(--hero-lo); transition:border-color .2s, background .2s, box-shadow .2s; }
.yzf-pd:not(.need){ border-color:var(--hair); background:transparent; color:var(--t2); }
.yzf-pd.flash{ box-shadow:0 0 0 3px var(--hero-lo); border-color:var(--hero); }
.yzf-auth.need-pd{ opacity:.72; }
@keyframes yzfShake{ 25%{ transform:translateX(-4px); } 75%{ transform:translateX(4px); } }
.yzf-div{ height:1px; margin:var(--sp4) 0; background:var(--hair2); }
.yzf-alt{ margin:0 0 var(--sp3); font:400 var(--fs-small)/1.4 var(--f-ui); color:var(--t2); }
.yzf-similar{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--sp2);
}
.yzf-sim-wait{ grid-column:1 / -1; color:var(--t3); font:400 var(--fs-small)/1.3 var(--f-ui); }
.yzf-sim{
  display:flex; flex-direction:column; align-items:center; gap:var(--sp1);
  min-width:0; padding:var(--sp2) 0; border:0; background:transparent; color:var(--t1);
  border-radius:var(--r-md); cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform var(--d-micro) var(--e-spring-soft);
}
.yzf-sim:active{ transform:scale(.96); }
.yzf-sim:focus-visible{ outline:var(--focus-w) solid var(--focus); outline-offset:var(--focus-off); }
.yzf-sim-av.pv-mono{ width:48px; height:48px; font-size:20px; }
.yzf-sim-av img{ width:100%; height:100%; object-fit:cover; display:block; }
.yzf-sim-name{
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font:600 12px/1.2 var(--f-serif); color:var(--t1);
}
.yzf-sim-left{ font:400 10.5px/1 var(--f-ui); color:var(--t3); font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion:reduce){
  .yzf-veil, .yzf-sheet, .yzf-auth, .yzf-sim, .yzf-nudge-btn, .yzf-ring{ transition:none; }
  .yzf-pd.shake{ animation:none; color:var(--t1); }
}