@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');
:root{
  --bg:#f6f7fb;--card:#fff;--card2:#f1f2f8;--line:#e7e8f0;
  --text:#14152b;--muted:#7b7f99;--accent:#4f5bff;--accent-soft:#eef0ff;
  --good:#12b886;--bad:#ef4565;--warn:#f59f00;
  --shadow:0 1px 2px rgba(20,21,43,.04),0 8px 24px -12px rgba(20,21,43,.12);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);
  font:15px/1.5 'Manrope',-apple-system,Roboto,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
#app{max-width:520px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top)}
.screen{flex:1;padding:18px 18px 104px;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
h1{font-weight:700;font-size:26px;line-height:1.2;margin:6px 0 4px;letter-spacing:-.6px}
h2{font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:28px 0 12px}
.sub{color:var(--muted);margin:0 0 16px}
.row{display:flex;gap:12px;align-items:center}
.top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600}
.streak{color:var(--warn)}
.glass{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.i.s{width:16px;height:16px}

/* приветствие и цель дня */
.hello{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.hello h1 span{color:var(--accent)}
.ring{position:relative;width:64px;height:64px;flex:none}
.ring svg{transform:rotate(-90deg);width:64px;height:64px}
.ring svg circle:first-child{stroke:var(--line)}
.ring div{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-weight:700;font-size:14px;line-height:1.05}
.ring small{display:block;font-size:9px;color:var(--muted);font-weight:600}
.xp{height:4px;border-radius:4px;background:var(--line);overflow:hidden;margin-top:16px}
.xp i{display:block;height:100%;background:var(--accent);border-radius:4px;transition:width .6s}
.xpl{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:6px;font-weight:500}

/* карточка собеседника */
.hero .row .btn{padding:10px 13px;font-size:13px}
.hero{border-radius:24px;margin-top:20px;background:var(--card);box-shadow:var(--shadow);border:1px solid var(--line);
  overflow:hidden;display:grid;grid-template-columns:1fr 120px;min-height:170px}
.hero .txt{padding:20px;display:flex;flex-direction:column;justify-content:space-between;gap:12px}
.hero .txt b{font-weight:700;font-size:20px;letter-spacing:-.3px}
.hero .txt span{font-size:13px;color:var(--muted)}
.hero .pic{position:relative;mask-image:linear-gradient(to right,transparent,#000 30%);-webkit-mask-image:linear-gradient(to right,transparent,#000 30%)}
.hero .pic svg{display:none}
.hero .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:14px;
  padding:11px 16px;font-weight:600;font-size:14px;background:var(--accent);color:#fff;transition:transform .12s}
.btn:active{transform:scale(.97)}
.btn.white{box-shadow:0 8px 18px -8px #4f5bffaa}
.glassbtn{background:var(--accent-soft)!important;color:var(--accent)!important}
.btn.ghost{background:var(--card2);color:var(--text)}
.btn.full{width:100%}

/* сценарии */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{border-radius:18px;padding:14px;text-align:left;
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:var(--card)!important;border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .15s}
.tile:active{transform:scale(.97)}
.tile .ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;margin-bottom:10px;flex:none}
.tile b{font-weight:600;font-size:14px;line-height:1.3}
.tile small{color:var(--muted);font-size:12px;line-height:1.35}

/* персонажи */
.chars{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.char{border-radius:20px;padding:8px 8px 12px;text-align:left;transition:transform .15s,box-shadow .2s}
.char:active{transform:scale(.98)}
.char.sel{box-shadow:0 0 0 2px var(--accent),var(--shadow)}
.char .av{width:100%;aspect-ratio:1;border-radius:14px;overflow:hidden;margin-bottom:10px;position:relative}
.char.sel .av::after{content:"✓";position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700}
.char b{display:block;font-weight:600;font-size:15px;padding:0 4px}
.char small{color:var(--muted);font-size:12px;padding:0 4px;display:block}
.tag{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;margin:8px 4px 0}
.tag.friend{background:#e6f8f1;color:var(--good)}
.tag.strict{background:#fdecef;color:var(--bad)}
.tag.coach{background:#fff4e0;color:var(--warn)}
.seg{display:flex;border-radius:14px;padding:4px;gap:2px}
.seg button{flex:1;padding:8px 0;border-radius:10px;font-weight:600;color:var(--muted);font-size:14px}
.seg button.on{background:var(--accent);color:#fff}

/* списки */
.modes{display:grid;gap:10px}
.mode{display:flex;gap:14px;align-items:center;border-radius:18px;padding:14px;text-align:left}
.mode .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none}
.mode b{display:block;font-weight:600}.mode small{color:var(--muted)}
.mode .go{margin-left:auto;color:var(--muted)}

/* чат */
.chat{display:flex;flex-direction:column;height:100dvh;max-width:520px;margin:0 auto;width:100%;background:var(--bg)}
.chat-head{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--card);border-bottom:1px solid var(--line)}
.chat-head .av{width:42px;height:42px;border-radius:50%;overflow:hidden;flex:none;position:relative}
.chat-head b{display:block;font-weight:600}.chat-head small{color:var(--good);font-weight:500;font-size:12px}
.callbtn{margin-left:auto;width:40px;height:40px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.ai-row{display:flex;gap:8px;align-items:flex-end;align-self:flex-start;max-width:88%;animation:pop .25s ease}
.ai-row .av{width:28px;height:28px;border-radius:50%;overflow:hidden;flex:none;position:relative}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.m{padding:10px 14px;border-radius:18px}
.m.ai{background:var(--card);border:1px solid var(--line);border-bottom-left-radius:6px;white-space:normal}
.m.me{background:var(--accent);color:#fff;border-bottom-right-radius:6px;align-self:flex-end;max-width:82%;white-space:pre-wrap;animation:pop .25s}
.m .tools{display:flex;gap:14px;margin-top:6px;font-size:12px}
.m .tools button{color:var(--muted);padding:0;font-weight:600;display:inline-flex;align-items:center;gap:4px}
.fix{align-self:flex-end;max-width:85%;background:#e9f9f2;border:1px solid #bfeedb;border-radius:14px;padding:9px 13px;font-size:14px;animation:pop .25s}
.fix b{color:var(--good)}
.fix del{color:var(--bad);opacity:.8}
.tr{color:var(--muted);font-size:13px;margin-top:4px;font-style:italic}
.typing{align-self:flex-start;display:flex;gap:4px;padding:13px 15px;border-radius:18px;background:var(--card);border:1px solid var(--line)}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:dot 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{transform:translateY(-4px);opacity:.4}}
.composer{display:flex;gap:8px;padding:10px 12px calc(12px + env(safe-area-inset-bottom));align-items:flex-end;background:var(--card);border-top:1px solid var(--line)}
.composer textarea{flex:1;resize:none;background:var(--card2);border:1px solid transparent;color:var(--text);
  border-radius:18px;padding:11px 14px;font:inherit;max-height:120px;outline:none}
.composer textarea:focus{border-color:var(--accent)}
.mic{width:50px;height:50px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none;box-shadow:0 8px 18px -8px #4f5bffaa}
.mic.rec{animation:pulse 1.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 #4f5bff88}100%{box-shadow:0 0 0 16px #4f5bff00}}
.send{width:44px;height:44px;border-radius:50%;background:var(--card2);flex:none;align-self:center;color:var(--accent);display:grid;place-items:center}
.hints{display:flex;gap:6px;overflow-x:auto;padding:8px 12px 0;background:var(--card);scrollbar-width:none}
.hints button{white-space:nowrap;font-size:12px;padding:6px 12px;border-radius:999px;background:var(--card2);color:var(--text);font-weight:500}
.wave{display:none;align-items:center;justify-content:center;gap:4px;height:44px;flex:1}
.wave i{width:3px;border-radius:3px;background:var(--accent);animation:wv .9s ease-in-out infinite}
.wave i:nth-child(odd){animation-delay:.2s}.wave i:nth-child(3n){animation-delay:.4s}
@keyframes wv{0%,100%{height:6px}50%{height:30px}}
.composer.rec textarea,.composer.rec .send{display:none}.composer.rec .wave{display:flex}

/* карточки и прогресс */
.flash{border-radius:24px;padding:30px 20px;text-align:center;min-height:220px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.flash .big{font-weight:600;font-size:21px;line-height:1.35}
.grade{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.grade.c .btn:nth-child(1){background:#fdecef;color:var(--bad)}.grade.c .btn:nth-child(2){background:#fff4e0;color:var(--warn)}.grade.c .btn:nth-child(3){background:#e6f8f1;color:var(--good)}
.score{font-weight:700;font-size:48px;color:var(--accent)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{border-radius:18px;padding:14px 8px;text-align:center}
.stat b{font-weight:700;font-size:22px;display:block}.stat small{color:var(--muted);font-size:12px}

/* нижнее меню */
.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:520px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.nav>div{display:flex;width:100%}
.nav button{flex:1;padding:9px 0 10px;font-size:11px;font-weight:600;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:3px}
.nav button.on{color:var(--accent)}
.back{width:36px;height:36px;border-radius:50%;background:var(--card2);display:grid;place-items:center}
.err{background:#fdecef;border:1px solid #f8c6d0;color:var(--bad);border-radius:12px;padding:8px 12px;font-size:13px;align-self:center}
.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.av svg{width:100%;height:100%;display:block}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:9}
.confetti i{position:absolute;top:-10px;width:8px;height:12px;border-radius:2px;animation:fall 1.6s ease-in forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg);opacity:.6}}

/* видеозвонок */
.call{position:fixed;inset:0;max-width:520px;margin:0 auto;overflow:hidden;background:#0d0e1a;color:#fff}
.stage{position:absolute;inset:0}
.face,.vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;transition:opacity .3s}
.vid{opacity:0}
.face{transform-origin:50% 35%;animation:breathe 6s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1.03)}50%{transform:scale(1.05) translateY(-3px)}}
.shade{position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.45),transparent 20%,transparent 55%,rgba(0,0,0,.8) 88%)}
.call-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:12px;padding:calc(14px + env(safe-area-inset-top)) 16px}
.call-top .back{background:rgba(255,255,255,.18);color:#fff;backdrop-filter:blur(10px)}
.call-top .who b{display:block;font-weight:600;font-size:17px}.call-top .who small{color:#9ff0cf;font-weight:500;font-size:12px}
.call-top .pill{margin-left:auto;background:rgba(255,255,255,.16);border:0;color:#fff;backdrop-filter:blur(10px)}
.call-bottom{position:absolute;left:0;right:0;bottom:0;padding:0 18px calc(22px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px}
.subs{font-weight:600;font-size:19px;line-height:1.4;text-shadow:0 1px 10px rgba(0,0,0,.6);min-height:52px}
.subs span{opacity:.6;transition:opacity .15s}.subs span.said{opacity:1}.subs .me{opacity:.9;font-weight:500;font-size:16px;color:#dfe2ff}
.turn{font-size:13px;color:#cfd3ff;min-height:18px;text-align:center}
.call .fix{align-self:flex-start;background:rgba(18,184,134,.18);border-color:rgba(159,240,207,.4);color:#fff;backdrop-filter:blur(10px)}
.call .fix b{color:#9ff0cf}.call .fix del{color:#ffb3c1}
.bars{display:flex;justify-content:center;align-items:center;gap:3px;height:28px;opacity:0;transition:opacity .2s}
.bars i{width:3px;height:5px;border-radius:3px;background:#fff}
.call[data-mode=talk] .bars,.call[data-mode=listen] .bars{opacity:1}
.call[data-mode=talk] .bars i,.call[data-mode=listen] .bars i{animation:wv .8s ease-in-out infinite}
.call[data-mode=listen] .bars i{background:#a5adff}
.bars i:nth-child(3n){animation-delay:.15s!important}.bars i:nth-child(4n){animation-delay:.3s!important}.bars i:nth-child(5n){animation-delay:.45s!important}
.call[data-mode=think] .subs::after{content:" • • •";opacity:.7}
.ctrls{display:flex;justify-content:center;align-items:center;gap:28px;margin-top:4px}
.cbtn{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(12px);color:#fff;display:grid;place-items:center}
.cbtn.big{width:70px;height:70px;background:#fff;color:var(--accent)}
.cbtn.big .i{width:28px;height:28px}
.cbtn.big.rec{animation:pulse 1.2s infinite;background:var(--accent);color:#fff}
.cbtn.red{background:#ef4565}
.chatbtn{width:42px;height:42px;padding:0!important;border-radius:50%!important;flex:none}

/* подвал с логотипом PROSCO */
.foot{margin-top:36px;padding:22px 0 8px;border-top:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.foot img{height:14px;width:auto;filter:brightness(0);opacity:.75;transition:opacity .2s}
.foot a:hover img{opacity:1}
.foot span{font-size:12px;color:var(--muted)}
.foot span a{color:var(--muted)}
.foot .howto{font-size:13px;font-weight:600;color:var(--accent);text-decoration:none;padding:8px 14px;border-radius:999px;background:var(--accent-soft)}