:root{
  --bg:#04050e; --bg1:#0a0c22;
  --text:#eef0ff; --muted:rgba(238,240,255,.55); --line:rgba(150,160,255,.16);
  --glass:rgba(14,16,38,.6);
  --v:#7c6cff; --c:#4fd8ff;
  --grad:linear-gradient(93deg,#7c6cff 0%,#5c7cff 45%,#4fd8ff 100%);
  --grad-light:linear-gradient(135deg,#c9f1ff,#8f83ff);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html,body{height:100%}
body{
  background:
    radial-gradient(1200px 800px at 70% 18%, rgba(64,40,140,.32), transparent 60%),
    radial-gradient(1000px 700px at 22% 85%, rgba(20,80,140,.26), transparent 60%),
    radial-gradient(ellipse at 50% 45%, var(--bg1), var(--bg) 70%);
  color:var(--text);font-family:'Golos Text',system-ui,sans-serif;font-size:16px;line-height:1.5;
  overflow:hidden;-webkit-font-smoothing:antialiased;
}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
/* единый икон-сет: одна геометрия и вес по всему приложению */
svg.i{width:19px;height:19px;flex:none;display:block;stroke-width:1.7}
.pctl svg.i{width:24px;height:24px}
.pctl.play svg.i{width:30px;height:30px}
.pctl.sm svg.i{width:17px;height:17px}
.pill svg.i{width:15px;height:15px;opacity:.85}
.ibtn svg.i,.chip svg.i{width:16px;height:16px}
.lib-a svg.i{width:17px;height:17px}
.sendbtn svg.i,.roundbtn svg.i{width:18px;height:18px}
.playbig svg.i{width:28px;height:28px}
.pchap svg.i{width:13px;height:13px}
.mini .mgo svg.i{width:16px;height:16px}
.dailychip svg.i{width:17px;height:17px}
.dailychip .go svg.i{width:11px;height:11px}
.iconbtn svg.i{width:17px;height:17px}
textarea,input{font-family:inherit;color:inherit}
.hidden{display:none!important}

#bg3d{position:fixed;inset:0;width:100vw;height:100dvh;z-index:0;display:block}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 92% 72% at 50% 40%,transparent 45%,rgba(2,3,10,.62) 100%)}
.grain{position:fixed;inset:-50%;z-index:40;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 1.2s steps(4) infinite}
@keyframes grainShift{0%{transform:translate(0,0)}25%{transform:translate(-1%,1%)}50%{transform:translate(1%,-1%)}75%{transform:translate(-1%,-1%)}100%{transform:translate(0,0)}}

/* ---------- курсор ---------- */
@media (pointer:fine){
  body{cursor:none}
  body button,body a,body input,body textarea{cursor:none}
  .cursor{position:fixed;z-index:9999;width:7px;height:7px;border-radius:50%;background:#fff;pointer-events:none;transform:translate(-50%,-50%);mix-blend-mode:difference}
  .cursor-ring{position:fixed;z-index:9998;width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);pointer-events:none;transform:translate(-50%,-50%);transition:width .25s,height .25s,border-color .25s;mix-blend-mode:difference}
  .cursor-ring.hov{width:60px;height:60px;border-color:#fff}
}
@media (pointer:coarse){.cursor,.cursor-ring{display:none}}

/* ---------- шапка ---------- */
#topbar{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  padding:18px max(22px,env(safe-area-inset-right)) 10px max(22px,env(safe-area-inset-left))}
.logo{font-family:Unbounded;font-weight:800;font-size:17px;letter-spacing:.16em;display:flex;align-items:center;gap:9px;cursor:pointer}
.logo-mark{width:13px;height:13px;border-radius:50%;background:linear-gradient(135deg,var(--c),var(--v));
  box-shadow:0 0 14px 3px rgba(110,150,255,.6);display:inline-block;animation:markPulse 2.8s ease-in-out infinite}
@keyframes markPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}

/* ---------- мини-плеер (остров сверху, когда история играет вне плеера) ---------- */
.mini{position:fixed;z-index:65;left:50%;top:64px;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;max-width:min(440px,86vw);
  padding:8px 16px 8px 10px;border-radius:99px;overflow:hidden;
  background:var(--glass);border:1px solid rgba(124,108,255,.4);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 10px 36px -10px rgba(0,0,0,.6);
  animation:miniIn .4s cubic-bezier(.2,.7,.2,1) both}
@keyframes miniIn{from{opacity:0;transform:translateX(-50%) translateY(-12px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.mini .mgo{width:34px;height:34px;border-radius:50%;background:var(--grad-light);color:#0b0d1e;
  display:flex;align-items:center;justify-content:center;flex:none;transition:transform .15s}
.mini .mgo:active{transform:scale(.92)}
.mini .mbody{display:flex;align-items:center;gap:10px;min-width:0;flex:1;padding:4px 0;text-align:left}
.mini .mtt{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mini .mst{font-size:10.5px;font-weight:800;letter-spacing:.08em;color:var(--c);text-transform:uppercase;flex:none}
.mini .mbar{position:absolute;left:0;bottom:0;height:2.5px;width:0;background:var(--grad);border-radius:99px}
.topbtns{display:flex;align-items:center;gap:8px}
.iconbtn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:rgba(14,16,38,.5);backdrop-filter:blur(12px);
  font-size:16px;color:var(--muted);transition:.18s;display:flex;align-items:center;justify-content:center}
.iconbtn:hover{color:var(--text);border-color:rgba(238,240,255,.4)}
.uilang{display:flex;gap:1px;border:1px solid var(--line);border-radius:99px;padding:2px;background:rgba(14,16,38,.5);backdrop-filter:blur(12px)}
.uilang button{padding:4px 9px;font-size:11px;font-weight:700;color:var(--muted);border-radius:99px}
.uilang button.active{color:#0b0d1e;background:var(--grad-light)}

/* ---------- прогресс знакомства ---------- */
.qprog{position:fixed;top:0;left:0;right:0;z-index:70;height:3px;background:rgba(255,255,255,.06)}
#qbar{height:100%;width:0;background:var(--grad);transition:width .4s cubic-bezier(.2,.7,.2,1)}

/* ---------- реплика Аури ---------- */
.bubble{position:fixed;z-index:50;left:50%;top:56dvh;transform:translateX(-50%);
  width:max-content;max-width:min(620px,88vw);
  display:flex;align-items:center;gap:12px;padding:13px 22px;border-radius:24px;
  background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 12px 44px -12px rgba(0,0,0,.6);
  font-size:16px;font-weight:500;text-align:center;line-height:1.45;
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1);
}
.bubble.swap{opacity:0;transform:translateX(-50%) translateY(8px)}
.bubble #bubble-text em{font-style:normal;color:var(--c)}
.bubble .eq{display:flex;align-items:center;gap:2.5px;height:15px;flex:none}
.bubble .eq i{width:2.5px;border-radius:2px;background:linear-gradient(180deg,var(--c),var(--v));animation:eq 1s ease-in-out infinite}
.bubble .eq i:nth-child(1){height:35%;animation-delay:0s}
.bubble .eq i:nth-child(2){height:80%;animation-delay:.15s}
.bubble .eq i:nth-child(3){height:55%;animation-delay:.3s}
.bubble .eq i:nth-child(4){height:95%;animation-delay:.45s}
.bubble .eq i:nth-child(5){height:45%;animation-delay:.6s}
@keyframes eq{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}

/* ---------- нижний док ---------- */
.dock{position:fixed;z-index:55;left:50%;bottom:0;transform:translateX(-50%);
  width:min(600px,94vw);
  display:flex;flex-direction:column;gap:10px;align-items:stretch;
  padding:0 0 max(20px,env(safe-area-inset-bottom));
  transition:padding-bottom .25s ease}
/* когда меню закреплено — док живёт над ним */

.dock > *{animation:dockup .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes dockup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* кнопки */
.cta{position:relative;overflow:hidden;background:var(--grad-light);color:#0b0d1e;font-weight:800;font-size:15px;
  padding:14px 28px;border-radius:99px;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s;
  box-shadow:0 8px 34px -8px rgba(124,108,255,.55),inset 0 1px 0 rgba(255,255,255,.7)}
.cta::before{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);transition:left .6s ease}
.cta:hover::before{left:130%}
.cta:hover{transform:translateY(-2px)}
.cta:disabled{opacity:.45;pointer-events:none}
.cta.big{font-family:Unbounded;font-weight:600;font-size:15px;padding:16px 34px}
.ghost{border:1px solid var(--line);border-radius:99px;padding:12px 22px;font-weight:700;color:var(--muted);transition:.18s;background:rgba(14,16,38,.5);backdrop-filter:blur(12px)}
.ghost:hover{color:var(--text);border-color:rgba(238,240,255,.4)}

/* строки дока */
.drow{display:flex;gap:9px;justify-content:center;align-items:center;flex-wrap:wrap}
/* ряд горячих тем: скролл с затуханием по краю вместо грубого обреза */
#home-chips{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}
#home-chips::-webkit-scrollbar{display:none}
#home-chips .chip{flex:none;max-width:none}
.drow.nowrap{flex-wrap:nowrap}

/* чипы-ответы */
.chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:99px;padding:10px 18px;font-size:14.5px;font-weight:600;color:var(--text);
  background:var(--glass);backdrop-filter:blur(14px);transition:.16s;white-space:nowrap}
.chip:hover{border-color:rgba(124,108,255,.65)}
.chip.sel{background:var(--grad-light);color:#0b0d1e;border-color:transparent;box-shadow:0 4px 18px -6px rgba(124,108,255,.7)}
.chip.dim{color:var(--muted);font-weight:500}
.chip.ibk{padding:10px 14px}
.chip .em{margin-right:6px}
/* канон-имя: крупнее пресетов — это имя персонажа, а не прозвище */
.chip.canon{font-family:"Unbounded",sans-serif;font-size:16px;font-weight:600;letter-spacing:.04em;padding:11px 20px}
.chip.canon .cn-h{font-family:"Golos Text",sans-serif;font-size:11px;font-weight:500;letter-spacing:0;opacity:.62;font-style:normal;margin-left:9px}
.chip.canon.sel .cn-h{opacity:.66}

/* поле ввода (одна строка-«команда») */
.inputrow{display:flex;gap:8px;align-items:center;background:var(--glass);border:1px solid var(--line);border-radius:99px;
  padding:6px 6px 6px 20px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 10px 40px -12px rgba(0,0,0,.55)}
.inputrow input,.inputrow textarea{flex:1;background:none;border:none;outline:none;font-size:16px;font-weight:500;min-width:0}
/* большое поле «расскажи о себе»: люди должны писать подробно */
.aboutbox{display:flex;flex-direction:column;gap:10px;background:rgba(16,18,42,.66);border:1px solid rgba(150,160,255,.24);
  border-radius:22px;padding:16px 16px 12px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 12px 44px -12px rgba(0,0,0,.6);transition:border-color .16s}
.aboutbox:focus-within{border-color:rgba(124,108,255,.6);box-shadow:0 12px 46px -12px rgba(124,108,255,.45)}
.bigta{width:100%;background:none;border:none;outline:none;resize:none;color:var(--text);
  font-family:inherit;font-size:16px;font-weight:500;line-height:1.5;min-height:132px;max-height:38dvh}
.bigta::placeholder{color:#5f5f80;line-height:1.5}
.aboutbar{display:flex;align-items:center;gap:12px}
.abt-hint{font-size:12px;color:rgba(238,240,255,.4);font-variant-numeric:tabular-nums}
.abt-go{margin-left:auto;padding:11px 26px;font-size:15px}
.inputrow textarea{resize:none;line-height:1.4;padding:8px 0;max-height:96px}
/* композер главной — главный объект экрана: выше, светлее, с фокус-подсветкой */
.inputrow.big{padding:9px 9px 9px 22px;border-color:rgba(150,160,255,.24);background:rgba(16,18,42,.66)}
.inputrow.big textarea{font-size:16.5px;padding:12px 0;max-height:124px}
.inputrow.big:focus-within{border-color:rgba(124,108,255,.6);box-shadow:0 12px 46px -12px rgba(124,108,255,.45)}
/* на 2+ строках: «пилюля» ломается → карточка, текст на всю ширину, кнопки уходят вниз-вправо */
.inputrow.big.multi{border-radius:24px;flex-wrap:wrap;align-items:center;gap:6px;padding:13px 10px 10px 18px}
.inputrow.big.multi textarea{flex:1 0 100%;padding:2px 4px 4px 0}
.inputrow.big.multi > button:first-of-type{margin-left:auto}
.inputrow input::placeholder,.inputrow textarea::placeholder{color:#5f5f80}
.sendbtn{width:44px;height:44px;border-radius:50%;background:var(--grad-light);color:#0b0d1e;font-size:17px;font-weight:800;
  flex:none;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px -6px rgba(124,108,255,.7);transition:.18s}
.sendbtn:hover{transform:scale(1.06)}
.sendbtn:disabled{opacity:.4}
.roundbtn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);font-size:17px;color:var(--muted);flex:none;
  display:flex;align-items:center;justify-content:center;transition:.16s;background:rgba(255,255,255,.03)}
.roundbtn:hover{color:var(--text)}
.roundbtn.rec{background:#ff3b6b;border-color:#ff3b6b;color:#fff;animation:pulse 1.1s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 #ff3b6b66}50%{box-shadow:0 0 0 12px transparent}}
.roundbtn.busy{pointer-events:none;color:var(--c)}
.roundbtn.busy svg.i{animation:sttSpin 1s linear infinite}
@keyframes sttSpin{to{transform:rotate(360deg)}}

/* пилюли-настройки композера */
.pill{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:99px;padding:8px 14px;font-size:12.5px;font-weight:700;color:var(--muted);
  background:rgba(14,16,38,.5);backdrop-filter:blur(12px);transition:.16s;white-space:nowrap}
.pill:hover{color:var(--text);border-color:rgba(124,108,255,.6)}
.pill b{color:var(--text);font-weight:700;margin-left:5px}
.pills{animation:pillsIn .22s cubic-bezier(.2,.7,.2,1) both}
@keyframes pillsIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* сводка настроек: одна строка вместо пяти пилюль, тап — раскрыть */
.setbar{align-self:center;display:flex;align-items:center;gap:8px;max-width:100%;
  padding:7px 13px;border-radius:99px;border:1px solid transparent;color:var(--muted);
  font-size:12.5px;font-weight:600;transition:.16s}
.setbar:hover{color:var(--text);border-color:var(--line);background:rgba(14,16,38,.5)}
.setbar .sm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.setbar svg.i{width:15px;height:15px;opacity:.75;flex:none}
.setbar svg.i.cv{width:13px;height:13px;transition:transform .2s}
.setbar.open{color:var(--text);border-color:var(--line);background:rgba(14,16,38,.5)}
.setbar.open svg.i.cv{transform:rotate(180deg)}
/* кубик уехал из поля ввода к темам — освободил место под голос */
.chip.dice{padding:10px 12px;color:var(--muted)}
.chip.dice svg.i{width:17px;height:17px}
/* «продолжить вчерашнее» — акцентный чип возврата */
.chip.cont{border-color:rgba(124,108,255,.5);color:#d9d4ff;background:linear-gradient(120deg,rgba(124,108,255,.15),rgba(79,216,255,.06))}
.chip.cont svg.i{color:var(--c)}

/* чип «выпуск дня» */
.dailychip{align-self:center;display:flex;align-items:center;gap:9px;border:1px solid rgba(124,108,255,.45);border-radius:99px;
  padding:8px 8px 8px 15px;font-size:13.5px;font-weight:600;color:#d9d4ff;max-width:100%;
  background:linear-gradient(120deg,rgba(124,108,255,.16),rgba(79,216,255,.08));backdrop-filter:blur(14px);transition:.16s}
.dailychip:hover{border-color:rgba(124,108,255,.8)}
.dailychip .dtxt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dailychip .streak{display:flex;align-items:center;gap:3px;font-weight:800;font-size:12.5px;color:#ffb27a;flex:none}
.dailychip .streak svg.i{width:13px;height:13px}
.dailychip .go{width:28px;height:28px;border-radius:50%;background:var(--grad-light);color:#0b0d1e;display:flex;align-items:center;justify-content:center;font-size:11px;flex:none}

/* ---------- плеер в доке ---------- */
.pcard{background:var(--glass);border:1px solid var(--line);border-radius:26px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 16px 50px -16px rgba(0,0,0,.65);padding:15px 16px;display:flex;flex-direction:column;gap:10px}
.pl-primary{padding:12px 24px;font-size:14px}
.pl-top{display:flex;align-items:baseline;gap:12px;justify-content:space-between}
/* кламп: надиктованная тема бывает абзацем — не даём ей раздуть карточку */
.pl-title{font-family:Unbounded;font-weight:600;font-size:15px;line-height:1.3;flex:1;min-width:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pl-phase{color:var(--c);font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.pl-phase.err{color:#ff6b8a}
.pl-chapters{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.pl-chapters::-webkit-scrollbar{display:none}
.pchap{flex:none;display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:99px;padding:7px 13px;
  font-size:12.5px;color:var(--muted);transition:.15s;background:rgba(255,255,255,.02);max-width:220px}
.pchap span.tt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pchap .cst{display:flex;align-items:center;flex:none;opacity:.8}
.pchap.ready{color:var(--text);cursor:pointer}
.pchap.ready:hover{border-color:rgba(124,108,255,.6)}
.pchap.playing{border-color:var(--c);background:linear-gradient(90deg,rgba(124,108,255,.14),rgba(79,216,255,.07));color:#fff}
/* прослушанная глава — приглушена с зелёной галочкой; текущая (на паузе) — подсвечена */
.pchap.done{color:var(--muted);opacity:.62}
.pchap.done .cst{color:#3ddc97;opacity:1}
.pchap.cur:not(.playing){border-color:rgba(124,108,255,.55);color:var(--text)}
.gen-wave{display:flex;gap:5px;align-items:center;justify-content:center;height:38px}
.gen-wave i{width:4px;height:100%;border-radius:99px;background:var(--grad);transform-origin:center;animation:gw 1.15s ease-in-out infinite}
.gen-wave i:nth-child(1){animation-delay:0s}.gen-wave i:nth-child(2){animation-delay:.12s}
.gen-wave i:nth-child(3){animation-delay:.24s}.gen-wave i:nth-child(4){animation-delay:.36s}
.gen-wave i:nth-child(5){animation-delay:.48s}.gen-wave i:nth-child(6){animation-delay:.6s}
.gen-wave i:nth-child(7){animation-delay:.72s}
@keyframes gw{0%,100%{transform:scaleY(.25);opacity:.5}50%{transform:scaleY(1);opacity:1}}
.pl-transport{display:flex;align-items:center;justify-content:center;gap:13px}
.pctl{font-size:16px;color:var(--muted);transition:.15s;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);flex:none;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.03)}
.pctl:hover{color:var(--text);border-color:rgba(150,160,255,.4)}
.pctl:active{transform:scale(.94)}
/* герой транспорта: игра/пауза — самое большое и самое яркое пятно карточки */
.pctl.play{width:68px;height:68px;background:var(--grad-light);color:#0b0d1e;border:none;
  box-shadow:0 10px 34px -8px rgba(124,108,255,.9), 0 0 0 1px rgba(255,255,255,.12) inset}
.pctl.play:hover{transform:scale(1.05)}
.pctl.sm{width:40px;height:40px;opacity:.75}
.pl-time{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums}
/* кастомный слайдер вместо дефолтного range */
#p-seek{flex:1;-webkit-appearance:none;appearance:none;height:14px;background:transparent;min-width:60px;cursor:pointer}
#p-seek::-webkit-slider-runnable-track{height:4px;border-radius:99px;background:rgba(255,255,255,.12)}
#p-seek::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:linear-gradient(135deg,#c9f1ff,#8f83ff);
  box-shadow:0 0 10px rgba(124,108,255,.8);margin-top:-4.5px}
#p-seek::-moz-range-track{height:4px;border-radius:99px;background:rgba(255,255,255,.12)}
#p-seek::-moz-range-thumb{width:13px;height:13px;border:none;border-radius:50%;background:linear-gradient(135deg,#c9f1ff,#8f83ff);box-shadow:0 0 10px rgba(124,108,255,.8)}
/* главное действие + ряд одинаковых икон-кнопок */
.pl-primary{width:100%;text-align:center}
.pl-icons{display:flex;gap:10px;justify-content:center}
.pl-icons .ibtn{flex:1;max-width:120px;display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 6px;border-radius:16px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);font-size:11px;font-weight:700;transition:.15s;text-decoration:none}
.pl-icons .ibtn:hover{color:var(--text);border-color:rgba(238,240,255,.35)}
.pl-icons .ibtn.disabled{opacity:.4;pointer-events:none}
.pl-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.pl-actions .chip{font-size:13px;padding:8px 15px}
.pl-actions .chip.disabled{opacity:.4;pointer-events:none}

/* баннер LLM */
.banner{border:1px solid #ffb02e55;background:#ffb02e12;color:#ffd48a;border-radius:16px;padding:11px 16px;font-size:13px}

/* ---------- нижнее меню (закреплено, как в нативных апках) ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
  background:rgba(8,9,20,.72);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-top:1px solid var(--line);
  padding:8px max(8px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-right))}
.tabbar .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 0 3px;
  font-size:10.5px;font-weight:700;letter-spacing:.02em;color:var(--muted);transition:color .18s;position:relative}
.tabbar .tab svg.i{width:22px;height:22px;stroke-width:1.6}
.tabbar .tab.active{color:var(--text)}
.tabbar .tab.active svg.i{filter:drop-shadow(0 0 7px rgba(124,108,255,.75))}
.tabbar .tab.active::before{content:"";position:absolute;top:-8px;left:50%;transform:translateX(-50%);
  width:26px;height:3px;border-radius:99px;background:var(--grad)}
.tabbar .tab:active{transform:scale(.94)}

/* ---------- всплывающая панель ---------- */
.sheet-wrap{position:fixed;inset:0;z-index:80}
.tabbar.hidden{display:none}
.sheet-backdrop{position:absolute;inset:0;background:rgba(2,3,10,.55);backdrop-filter:blur(4px);animation:fadein .3s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.sheet{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(600px,100vw);max-height:82dvh;overflow-y:auto;
  background:rgba(12,14,34,.92);border:1px solid var(--line);border-bottom:none;border-radius:28px 28px 0 0;
  backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);
  padding:14px 22px max(26px,env(safe-area-inset-bottom));
  animation:sheetup .4s cubic-bezier(.2,.8,.2,1);
  display:flex;flex-direction:column;gap:14px}
@keyframes sheetup{from{transform:translateX(-50%) translateY(60%);opacity:.4}to{transform:translateX(-50%) translateY(0);opacity:1}}
.sheet .grab{width:40px;height:4px;border-radius:99px;background:rgba(255,255,255,.18);margin:0 auto}
.sheet h3{font-family:Unbounded;font-weight:600;font-size:17px}
.sheet .shint{color:var(--muted);font-size:13.5px;margin-top:-8px}
.sheet .opts{display:flex;flex-wrap:wrap;gap:8px}

/* список историй */
.libcard{display:flex;flex-direction:column;gap:8px;padding:11px 12px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.03);transition:.15s}
.libcard.tap{cursor:pointer}
.libcard.tap:active{transform:scale(.99)}
.lib-row{display:flex;align-items:center;gap:12px}
.libcard:hover{border-color:rgba(124,108,255,.5)}
.lib-prog{display:flex;align-items:center;gap:9px;padding-left:54px}
.lib-prog-bar{flex:1;height:4px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
.lib-prog-bar i{display:block;height:100%;background:var(--grad-light);border-radius:99px;transition:width .3s}
.lib-prog-t{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;flex:none}
.libcard.err{border-color:rgba(255,120,150,.3);background:rgba(255,90,120,.05)}
.libcard.err .lib-info span{color:#ff9db3;white-space:normal}
.lib-play.retry{background:rgba(255,255,255,.06);color:var(--muted);box-shadow:none}
.lib-play{width:42px;height:42px;border-radius:50%;background:var(--grad-light);color:#0b0d1e;font-size:14px;flex:none;display:flex;align-items:center;justify-content:center}
.lib-info{flex:1;min-width:0}
.lib-info b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:1.3}
.lib-info span{display:block;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-a{display:flex;align-items:center;justify-content:center;color:var(--muted);width:38px;height:38px;border-radius:12px;text-decoration:none;flex:none;transition:.15s}
.lib-a.del{margin-left:2px;color:rgba(255,120,150,.55)}
.lib-a.del:hover{color:#ff7896;background:rgba(255,90,120,.12)}
.lib-a:hover{color:var(--text)}
.lib-badge{font-size:10px;font-weight:800;letter-spacing:.06em;padding:3px 8px;border-radius:99px;border:1px solid var(--line);color:var(--muted);flex:none}
.lib-badge.gen{color:#ffd48a;border-color:#ffb02e55}
.lib-badge.prog{color:var(--c);border-color:rgba(79,216,255,.4)}
.lib-badge.done{color:#3ddc97;border-color:rgba(61,220,151,.35);display:flex;align-items:center;padding:3px 6px}
.lib-badge.done svg.i{width:13px;height:13px}
.libcard.listened{opacity:.7}
.libcard.listened b{color:var(--muted)}
/* ряд категорий в библиотеке — не липнет к краям, скроллится */
.catbar{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;margin:2px 0 6px}
.catbar::-webkit-scrollbar{display:none}
.catbar .chip{flex:none;text-transform:capitalize}
.lib-empty{color:var(--muted);text-align:center;padding:30px 0}

/* профиль */
.prow{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--muted);width:100%;text-align:left}
.prow.row-btn{cursor:pointer;transition:.15s}
.prow.row-btn:hover{color:var(--text)}
.prow.row-btn b{display:flex;align-items:center;gap:7px}
.prow svg.i.chev{width:14px;height:14px;opacity:.5;transform:rotate(180deg)}
.prow:last-of-type{border-bottom:none}
.prow b{color:var(--text)}
.bond-bar{height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:8px}
.bond-fill{height:100%;width:0;background:var(--grad);border-radius:99px;transition:width .8s cubic-bezier(.2,.7,.2,1)}
.mini-seg{display:flex;gap:2px;border:1px solid var(--line);border-radius:99px;padding:2px}
.mini-seg button{padding:5px 14px;font-size:12.5px;font-weight:700;color:var(--muted);border-radius:99px;transition:.15s}
.mini-seg button.active{color:#0b0d1e;background:var(--grad-light)}
.mini-seg button.active.hot{color:#fff;background:linear-gradient(100deg,#ff5c7a,#b06cff)}
.adult-tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.04em;color:#ff8fb0;border:1px solid rgba(255,92,122,.5);border-radius:5px;padding:1px 5px;margin-left:6px;vertical-align:middle}
.prow-hint{font-size:12px;color:var(--muted);opacity:.7;line-height:1.4;padding:8px 0 2px;border-bottom:1px solid var(--line)}
.pol-row{border-bottom:none;padding-bottom:4px}
.pol-row b.hot{color:#ff8fb0}
.pol-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;margin:2px 0 4px;
  background:linear-gradient(90deg,#6f7bff,#7c6cff 45%,#ff5c7a);outline:none;cursor:pointer}
.pol-range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.5),0 0 0 3px rgba(124,108,255,.5);cursor:grab;transition:transform .12s}
.pol-range::-webkit-slider-thumb:active{transform:scale(1.12);cursor:grabbing}
.pol-range::-moz-range-thumb{width:22px;height:22px;border:none;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.5),0 0 0 3px rgba(124,108,255,.5);cursor:grab}
.hum-range{background:linear-gradient(90deg,#5b6b8c,#4fd8ff 40%,#ffd166)}
/* плашка фоновой генерации */
.bggen{position:fixed;top:calc(env(safe-area-inset-top,0px) + 58px);left:50%;transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:8px;max-width:88vw;padding:8px 15px;border-radius:99px;font-size:13px;font-weight:600;
  background:rgba(18,20,42,.92);border:1px solid var(--line);backdrop-filter:blur(10px);box-shadow:0 8px 30px -8px rgba(0,0,0,.6);
  animation:bgin .35s cubic-bezier(.2,.9,.3,1.4)}
.bggen.hidden{display:none}
.bggen.ready{cursor:pointer;border-color:rgba(61,220,151,.5);background:rgba(20,44,34,.92)}
.bggen .bg-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.bggen.ready .bg-t{color:#7ff0be}
.bg-dot{width:9px;height:9px;border-radius:50%;background:#7c6cff;box-shadow:0 0 10px #7c6cff;flex:0 0 auto;animation:recpulse 1.1s ease-in-out infinite}
.bggen .bg-check{display:flex;color:#3ddc97;flex:0 0 auto}.bggen .bg-check svg.i{width:16px;height:16px}
@keyframes bgin{from{opacity:0;transform:translateX(-50%) translateY(-8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
/* таймер записи голоса (как в Телеграме) */
.rec-line{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:center}
.rec-dot{width:11px;height:11px;border-radius:50%;background:#ff4d5e;box-shadow:0 0 10px #ff4d5e;flex:0 0 auto;animation:recpulse 1.1s ease-in-out infinite}
.rec-time{font-variant-numeric:tabular-nums;font-weight:800;font-size:18px;letter-spacing:.02em;color:var(--text)}
.rec-hint{color:var(--muted);font-size:13px}
@keyframes recpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

/* пейволл */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.plan{border:1px solid var(--line);border-radius:20px;padding:15px 12px;display:flex;flex-direction:column;gap:4px;position:relative;transition:.15s;background:rgba(255,255,255,.03)}
.plan:hover{transform:translateY(-2px)}
.plan.sel{border-color:var(--c);box-shadow:0 10px 34px -12px rgba(79,216,255,.5);background:linear-gradient(165deg,rgba(124,108,255,.16),rgba(79,216,255,.08))}
.plan .pl-name{font-weight:800;font-size:11.5px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.plan .pl-price{font-family:Unbounded;font-weight:600;font-size:19px}
.plan .pl-per{color:var(--muted);font-size:11.5px}
.plan .pl-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--grad-light);color:#0b0d1e;font-size:9.5px;font-weight:800;letter-spacing:.05em;padding:3px 10px;border-radius:99px;white-space:nowrap}
.pay-feats{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:7px 18px;color:var(--muted);font-size:13px}
.pay-feats li::before{content:"• ";color:var(--c)}
.pay-small{color:var(--muted);font-size:11.5px;opacity:.75;text-align:center}
.pay-later{display:block;width:100%;margin-top:6px;padding:12px;color:var(--muted);font-size:14px;font-weight:600;
  background:none;border:none;border-radius:14px;transition:.15s}
.pay-later:hover{color:var(--text);background:rgba(150,160,255,.06)}

/* приветствие: большая кнопка play */
.playbig{align-self:center;width:74px;height:74px;border-radius:50%;background:var(--grad-light);color:#0b0d1e;font-size:24px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 40px -8px rgba(124,108,255,.8),inset 0 1px 0 rgba(255,255,255,.7);
  transition:.18s;animation:glowp 2.4s infinite}
.playbig:hover{transform:scale(1.06)}
.playbig.pulse{animation:greetpulse 1s infinite}
@keyframes glowp{0%,100%{box-shadow:0 10px 40px -8px rgba(124,108,255,.8)}50%{box-shadow:0 10px 48px -4px rgba(79,216,255,.7)}}
@keyframes greetpulse{0%,100%{transform:scale(1);box-shadow:0 10px 40px -8px rgba(124,108,255,.9)}50%{transform:scale(1.12);box-shadow:0 12px 54px 0 rgba(79,216,255,.95)}}

.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}

button:active,.chip:active,.pill:active,.plan:active{transform:scale(.96)}

@media (max-width:640px){
  .bubble{font-size:14.5px;padding:11px 18px;border-radius:20px}
  .dock{width:100vw;padding-left:12px;padding-right:12px}
  .plans{grid-template-columns:1fr}
  .pay-feats{grid-template-columns:1fr}
  .logo{font-size:15px}
  .pl-title{font-size:13.5px}
}

/* ---------- узкий экран: ключ по aspect (fx.js берёт узкие зоны по camera.aspect < 0.9) ---------- */
@media (max-aspect-ratio:9/10){
  body.has-tabs .tabbar{display:flex}
  body.has-tabs #btn-player,body.has-tabs #btn-tracks,body.has-tabs #btn-prof{display:none!important}
  body.has-tabs .dock{padding-bottom:calc(62px + max(8px,env(safe-area-inset-bottom)))}
  body.has-tabs .sheet{padding-bottom:calc(76px + max(8px,env(safe-area-inset-bottom)));
    max-height:calc(82dvh - 62px)}
  .bubble{top:43dvh}
  body[data-view="intro"] .bubble,
  body[data-view="greeting"] .bubble{top:44dvh}
  body[data-view="player"] .bubble{top:38dvh}
  body[data-view="paywall"] .bubble{top:20dvh}   /* верх шита пейволла — 31dvh: иначе реплика целиком под ним */
  /* клавиатура открыта (iOS панорамирует вьюпорт, верх уезжает): вопрос живёт над доком */
  body.kb .bubble{top:auto;bottom:calc(175px + env(safe-area-inset-bottom));z-index:56}
  body.kb.has-tabs .bubble{bottom:calc(190px + env(safe-area-inset-bottom))}
}

/* ---------- телефон в ландшафте: узкий и низкий вьюпорт ломал раскладку (бабл под доком) ---------- */
@media (orientation:landscape) and (max-height:540px){
  .bubble{top:auto;bottom:calc(96px + env(safe-area-inset-bottom));max-width:min(560px,64vw);font-size:14.5px;padding:10px 18px}
  body[data-view="player"] .bubble,body[data-view="paywall"] .bubble{display:none} /* в плеере/пейволле карточка и так всё говорит */
  .dock{width:min(680px,96vw)}
}

/* ---------- уважаем «уменьшить движение»: гасим фоновую анимацию ---------- */
@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  .logo-mark{animation:none}
  .bubble .eq i,.gen-wave i{animation:none}
  .mini{animation:none}
  *{scroll-behavior:auto}
}