/* ============================================================================
   YAZME · ПЕРСОНЫ · ИСТОРИИ — стили для chat_stories.js   ·   22.10.2026
   Только токены раздела (tokens.css): светлая и тёмная темы и акцент
   пользователя подхватываются сами. Анимации гасятся prefers-reduced-motion.
   ========================================================================= */

/* ─────────── строки меню «Ещё» ─────────── */
.st-row .pv-ic{ color:var(--hero); }
.st-new{
  flex:none; display:inline-flex; align-items:center;
  height:20px; padding:0 8px; border-radius:var(--r-full);
  background:var(--hero-grad); color:#fff;
  font:700 10px/1 var(--f-ui); letter-spacing:.06em; text-transform:uppercase;
  box-shadow:var(--sh-hero);
}
.st-count{
  flex:none; min-width:24px; height:24px; padding:0 7px; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-full); background:var(--s3); color:var(--t1);
  font:600 var(--fs-small)/1 var(--f-num);
}

/* ─────────── общая обёртка шторок ─────────── */
.st-wrap{ display:flex; flex-direction:column; gap:var(--sp4); padding-bottom:var(--sp2); }
.st-wrap .pv-ic{ width:18px; height:18px; }

/* ─────────── «Новая глава»: обложка ─────────── */
.st-hero{ text-align:center; padding-top:var(--sp2); }
.st-hero h3{
  margin:var(--sp3) 0 var(--sp2);
  font:600 var(--fs-title)/var(--lh-tight) var(--f-serif); color:var(--t1);
  text-wrap:balance;
}
.st-hero p{ margin:0 auto; max-width:34em; color:var(--t2); font-size:var(--fs-small); line-height:var(--lh-body); text-wrap:pretty; }

/* Три листа стопкой: верхний — следующая глава. */
.st-art{ position:relative; width:128px; height:96px; margin:0 auto; perspective:600px; }
.st-art i{
  position:absolute; inset:0; border-radius:16px;
  background:var(--s3); border:1px solid var(--hair2);
  box-shadow:var(--sh-md);
}
.st-art i:nth-child(1){ transform:rotate(-9deg) translate(-10px, 4px); opacity:.55; }
.st-art i:nth-child(2){ transform:rotate(6deg) translate(9px, 2px); opacity:.8; }
.st-art i:nth-child(3){
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:var(--hero-grad); border-color:transparent; color:#fff;
  box-shadow:var(--sh-hero), inset 0 1px 0 rgba(255,255,255,.25);
  transform-origin:left center;
  animation:stPage 1.1s var(--e-spring-soft) both;
}
.st-art .k{ font:700 9px/1 var(--f-ui); letter-spacing:.22em; opacity:.85; }
.st-art .n{ font:800 30px/1 var(--f-display); letter-spacing:-.02em; }
.st-art em{
  position:absolute; width:10px; height:10px; border-radius:2px;
  background:var(--mark); transform:rotate(45deg);
  box-shadow:0 0 12px var(--mark);
  animation:stTwinkle 2.4s ease-in-out infinite;
}
.st-art em.s1{ top:-6px; right:-10px; }
.st-art em.s2{ bottom:4px; left:-14px; width:7px; height:7px; animation-delay:.9s; }
.st-art.sm{ width:84px; height:64px; }
.st-art.sm i:nth-child(3){ animation:none; background:var(--s4); box-shadow:var(--sh-md); }

@keyframes stPage{
  0%{ transform:rotateY(-70deg) translateX(-6px); opacity:0; }
  60%{ opacity:1; }
  100%{ transform:rotateY(0) translateX(0); opacity:1; }
}
@keyframes stTwinkle{
  0%, 100%{ opacity:.25; transform:rotate(45deg) scale(.7); }
  50%{ opacity:1; transform:rotate(45deg) scale(1.1); }
}

/* ─────────── варианты «помнит / с нуля» ─────────── */
.st-opts{ display:flex; flex-direction:column; gap:var(--sp2); }
.st-opt{
  display:flex; align-items:center; gap:var(--sp3);
  width:100%; box-sizing:border-box; padding:var(--sp3) var(--sp4);
  border:1.5px solid var(--hair2); border-radius:var(--r-sm);
  background:var(--s1); color:var(--t1);
  font:inherit; text-align:left; cursor:pointer; touch-action:manipulation;
  transition:border-color var(--d-std) var(--e-out), background var(--d-std) var(--e-out), transform var(--d-micro) var(--e-spring-soft);
}
.st-opt:active{ transform:scale(.985); }
.st-opt.on{ border-color:var(--hero); background:var(--hero-lo); }
.st-opt:focus-visible{ outline:var(--focus-w) solid var(--focus); outline-offset:var(--focus-off); }
.st-opt-ic{
  flex:none; width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.st-opt-ic.keep{ background:linear-gradient(135deg, #ff8fb1, #e5486f); box-shadow:0 6px 18px -6px rgba(229,72,111,.6); }
.st-opt-ic.wipe{ background:linear-gradient(135deg, #8fb4ff, #6a5cf0); box-shadow:0 6px 18px -6px rgba(106,92,240,.6); }
.st-opt-ic .pv-ic{ width:20px; height:20px; }
.st-opt-tx{ flex:1; min-width:0; }
.st-opt-tx b{ display:block; font:600 var(--fs-body)/1.3 var(--f-ui); }
.st-opt-tx small{ display:block; margin-top:2px; color:var(--t2); font-size:var(--fs-small); line-height:1.4; }
.st-radio{
  flex:none; width:22px; height:22px; border-radius:50%;
  border:2px solid var(--hair3); box-sizing:border-box;
  transition:border-color var(--d-std) var(--e-out), box-shadow var(--d-std) var(--e-out);
}
.st-opt.on .st-radio{ border-color:var(--hero); box-shadow:inset 0 0 0 4px var(--s1), inset 0 0 0 11px var(--hero); }

/* ─────────── что сохранится, лимит ─────────── */
.st-keeps{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--sp2) var(--sp4); }
.st-keeps li{ display:flex; align-items:center; gap:6px; color:var(--t2); font-size:var(--fs-small); }
.st-keeps .pv-ic{ width:16px; height:16px; color:var(--win); }

.st-note, .st-warn{
  display:flex; align-items:flex-start; gap:var(--sp2);
  margin:0; color:var(--t3); font-size:var(--fs-small); line-height:var(--lh-body);
}
.st-note .pv-ic, .st-warn .pv-ic{ flex:none; width:16px; height:16px; margin-top:2px; }
.st-warn{
  padding:var(--sp3); border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--mark) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--mark) 35%, transparent);
  color:var(--t2);
}
.st-warn b{ color:var(--t1); font-weight:600; }
.st-warn .pv-ic{ color:var(--mark); }
.st-up{
  display:inline-flex; align-items:center; gap:4px; margin-left:2px;
  color:var(--mark); font-weight:600; text-decoration:none; white-space:nowrap;
}
.st-up .pv-ic{ width:14px; height:14px; margin:0; }
.st-up:hover{ text-decoration:underline; }

.st-acts{ display:flex; flex-direction:column; gap:var(--sp2); margin-top:var(--sp1); }
.st-go{ width:100%; min-height:var(--ctl-lg); box-shadow:var(--sh-hero); }
.st-go.busy{ pointer-events:none; }
.st-go.busy .pv-ic{ animation:stSpin 1s linear infinite; }
@keyframes stSpin{ to{ transform:rotate(360deg); } }

/* ─────────── «Прошлые истории» ─────────── */
.st-cur{
  display:flex; align-items:center; gap:var(--sp3);
  padding:var(--sp3) var(--sp4); border-radius:var(--r-sm);
  background:var(--hero-lo); border:1px solid var(--hero-line);
}
.st-cur .grow{ flex:1; min-width:0; }
.st-cur b{ display:block; font:600 var(--fs-body)/1.3 var(--f-ui); color:var(--t1); }
.st-cur small{ display:block; color:var(--t2); font-size:var(--fs-small); }
.st-chip{
  flex:none; padding:4px 8px; border-radius:var(--r-full);
  background:var(--hero); color:var(--on-hero);
  font:700 10px/1 var(--f-ui); letter-spacing:.08em; text-transform:uppercase;
}

.st-list{ display:flex; flex-direction:column; gap:var(--sp3); }
.st-card{
  position:relative; padding:var(--sp4); border-radius:var(--r-sm);
  background:var(--s2); border:1px solid var(--hair2);
  animation:stIn .42s var(--e-out) both; animation-delay:calc(var(--i, 0) * 55ms);
}
.st-card::before{
  /* корешок книги слева — чтобы карточка читалась как «том», а не как пост */
  content:''; position:absolute; left:0; top:12px; bottom:12px; width:3px;
  border-radius:0 3px 3px 0; background:var(--hero-grad); opacity:.8;
}
.st-card-top{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp2); }
.st-no{ font:800 var(--fs-title)/1 var(--f-display); color:var(--t1); letter-spacing:-.01em; }
.st-dates{ color:var(--t3); font-size:var(--fs-small); white-space:nowrap; }
.st-quote{
  margin:var(--sp3) 0; padding-left:var(--sp3);
  border-left:2px solid var(--hair2);
  color:var(--t2); font:italic 400 var(--fs-body)/1.45 var(--f-serif);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.st-quote::before{ content:'«'; } .st-quote::after{ content:'»'; }
.st-card-foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp3); flex-wrap:wrap; }
.st-meta{ color:var(--t3); font-size:var(--fs-small); }
.st-back{ background:var(--s3); color:var(--t1); }
.st-back.confirm{ background:var(--hero); color:var(--on-hero); animation:stPulse 1.2s ease-in-out infinite; }
@keyframes stPulse{ 0%, 100%{ box-shadow:0 0 0 0 var(--hero-line); } 50%{ box-shadow:0 0 0 6px transparent; } }
@keyframes stIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

.st-empty{ text-align:center; padding:var(--sp5) 0 var(--sp2); }
.st-empty p{ margin:var(--sp4) auto 0; max-width:26em; color:var(--t2); font-size:var(--fs-small); line-height:var(--lh-body); }
.st-foot{ margin:0; color:var(--t3); font-size:var(--fs-small); line-height:var(--lh-body); }

/* ─────────── кинематографичный титр перехода ─────────── */
.st-cine{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(60% 45% at 50% 45%, var(--hero-lo), transparent 70%),
    color-mix(in srgb, var(--s0) 94%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .45s var(--e-out), visibility 0s linear .45s;
}
.st-cine.show{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .45s var(--e-out); }
.st-cine.instant{ transition:none; }
.st-cine.out{ opacity:0; transition:opacity .6s var(--e-out); }
.st-cine::before, .st-cine::after{
  /* полосы кадра — сверху и снизу, как в кино */
  content:''; position:absolute; left:0; right:0; height:9vh; background:var(--s0);
  transform:scaleY(0); transition:transform .5s var(--e-out);
}
.st-cine::before{ top:0; transform-origin:top; }
.st-cine::after{ bottom:0; transform-origin:bottom; }
.st-cine.show::before, .st-cine.show::after{ transform:scaleY(1); }
.st-cine-card{ display:flex; flex-direction:column; align-items:center; gap:var(--sp2); padding:0 var(--sp5); text-align:center; }
.st-cine-k{ color:var(--t3); font:700 11px/1 var(--f-ui); letter-spacing:.32em; }
.st-cine-n{
  font:800 clamp(64px, 18vw, 112px)/1 var(--f-display); letter-spacing:-.03em;
  background:var(--hero-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 10px 30px var(--hero-lo));
}
.st-cine-s{ color:var(--t2); font:italic 400 var(--fs-body)/1.4 var(--f-serif); }
.st-cine.show .st-cine-k{ animation:stRise .6s var(--e-out) .05s both; }
.st-cine.show .st-cine-n{ animation:stZoom .8s var(--e-spring-soft) .12s both; }
.st-cine.show .st-cine-s{ animation:stRise .6s var(--e-out) .3s both; }
.st-cine.instant .st-cine-k, .st-cine.instant .st-cine-n, .st-cine.instant .st-cine-s{ animation:none; }
@keyframes stRise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes stZoom{ from{ opacity:0; transform:scale(.82); letter-spacing:.1em; } to{ opacity:1; transform:none; } }

/* ─────────── карточка «что произошло» после перехода ─────────── */
.st-banner{
  position:fixed; z-index:105; left:50%;
  top:calc(var(--sat) + 84px);
  width:min(calc(100vw - 32px), 440px); box-sizing:border-box;
  display:flex; align-items:flex-start; gap:var(--sp3);
  padding:var(--sp4); border-radius:var(--r-md);
  background:var(--glass); -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid var(--hair2); box-shadow:var(--sh-lg);
  transform:translate(-50%, -14px); opacity:0;
  transition:transform .45s var(--e-spring-soft), opacity .3s var(--e-out);
}
.st-banner.show{ transform:translate(-50%, 0); opacity:1; }
.st-banner .grow{ flex:1; min-width:0; }
.st-banner b{ display:block; color:var(--t1); font:600 var(--fs-body)/1.3 var(--f-ui); }
.st-banner p{ margin:4px 0 0; color:var(--t2); font-size:var(--fs-small); line-height:var(--lh-body); }
.st-banner-ic{
  flex:none; width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--hero-grad); color:#fff; box-shadow:var(--sh-hero);
}
.st-banner-ic .pv-ic{ width:20px; height:20px; }
.st-banner-act{
  display:inline-flex; align-items:center; gap:4px; margin-top:var(--sp2); padding:0;
  background:none; border:0; color:var(--hero-hi); font:600 var(--fs-small)/1 var(--f-ui); cursor:pointer;
  min-height:28px;
}
.st-banner-act .pv-ic{ width:14px; height:14px; }
.st-banner-x, .st-tip-x{
  flex:none; width:32px; height:32px; margin:-6px -6px 0 0; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; border-radius:50%; color:var(--t3); cursor:pointer;
}
.st-banner-x .pv-ic, .st-tip-x .pv-ic{ width:16px; height:16px; }

/* ─────────── подсказка «Новое» у имени ─────────── */
.st-tip{
  position:fixed; z-index:104; box-sizing:border-box;
  width:min(calc(100vw - 24px), 320px);
  display:flex; align-items:flex-start; gap:var(--sp3);
  padding:var(--sp3) var(--sp3) var(--sp3) var(--sp3);
  border-radius:var(--r-sm);
  background:var(--s5); border:1px solid var(--hero-line);
  box-shadow:var(--sh-lg), 0 0 0 4px var(--hero-lo);
  opacity:0; transform:translateY(-6px) scale(.98); transform-origin:var(--ax, 50%) top;
  transition:opacity .3s var(--e-out), transform .4s var(--e-spring-soft);
}
.st-tip.show{ opacity:1; transform:none; }
.st-tip::before{
  content:''; position:absolute; top:-7px; left:calc(var(--ax, 50%) - 7px);
  width:12px; height:12px; transform:rotate(45deg);
  background:var(--s5); border-left:1px solid var(--hero-line); border-top:1px solid var(--hero-line);
}
.st-tip-ic{
  flex:none; width:36px; height:36px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:var(--hero-grad); color:#fff;
}
.st-tip-ic .pv-ic{ width:18px; height:18px; animation:stSpin 6s linear infinite; }
.st-tip-main{
  flex:1; min-width:0; padding:0; text-align:left;
  background:none; border:0; color:inherit; font:inherit; cursor:pointer;
}
.st-tip-main .st-new{ margin-bottom:6px; box-shadow:none; }
.st-tip-main b{ display:block; color:var(--t1); font:600 var(--fs-small)/1.35 var(--f-ui); }
.st-tip-main small{ display:block; margin-top:2px; color:var(--t2); font-size:12px; line-height:1.4; }

/* ─────────── меньше движения ─────────── */
@media (prefers-reduced-motion: reduce){
  .st-art i:nth-child(3), .st-art em, .st-card, .st-back.confirm, .st-tip-ic .pv-ic,
  .st-cine.show .st-cine-k, .st-cine.show .st-cine-n, .st-cine.show .st-cine-s{ animation:none !important; }
  .st-cine, .st-cine::before, .st-cine::after, .st-banner, .st-tip, .st-opt{ transition:none !important; }
}