:root{
  --bg:#EEF0F7;
  --surface:#FFFFFF;
  --surface-2:#F7F8FC;
  --ink:#12131A;
  --muted:#697089;
  --line:#E5E8F2;
  --primary:#6D5BFF;
  --primary-700:#4B3FD6;
  --primary-050:#F0EEFF;
  --success:#16B57A;
  --star:#FFB020;
  --wb:#CB11AB;
  --ozon:#005BFF;
  --ym:#E6A700;
  --shadow:0 14px 40px rgba(28,30,60,.10);
  --shadow-sm:0 4px 14px rgba(28,30,60,.07);
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:clamp(15px,1.05vw,25px);}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(109,91,255,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(0,91,255,.07), transparent 60%),
    var(--bg);
  color:var(--ink);
  height:100vh;overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
.app{height:100vh;display:flex;flex-direction:column;padding:1.4rem 1.6rem 1.2rem;gap:1.1rem}

/* ---------- topbar ---------- */
.topbar{display:flex;align-items:center;gap:1.4rem}
.brand{display:flex;align-items:center;gap:.6rem}
.brand .mark{
  width:2.5rem;height:2.5rem;border-radius:.7rem;
  background:linear-gradient(135deg,var(--primary),var(--primary-700));
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:1.05rem;letter-spacing:.02em;
  box-shadow:0 6px 16px rgba(109,91,255,.4);
}
.brand .name{font-weight:800;font-size:1.35rem;letter-spacing:-.01em}
.brand .name span{color:var(--primary)}

.tabs{display:flex;gap:.4rem;margin-left:.4rem}
.tab{padding:.5rem .95rem;border-radius:.65rem;font-weight:600;font-size:.95rem;color:var(--muted)}
.tab.active{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.tab .count{color:var(--primary);font-weight:800;margin-left:.3rem}

.topbar .spacer{flex:1}
.pill{
  display:flex;align-items:center;gap:.5rem;background:var(--surface);
  padding:.55rem .95rem;border-radius:999px;box-shadow:var(--shadow-sm);font-weight:600;font-size:.95rem;
}
.pill .dot{width:.65rem;height:.65rem;border-radius:50%;background:var(--success);box-shadow:0 0 0 0 rgba(22,181,122,.5);animation:beat 1.8s infinite}
@keyframes beat{0%{box-shadow:0 0 0 0 rgba(22,181,122,.45)}70%{box-shadow:0 0 0 .55rem rgba(22,181,122,0)}100%{box-shadow:0 0 0 0 rgba(22,181,122,0)}}
.stat{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}
.stat .num{font-weight:800;font-size:1.5rem;font-variant-numeric:tabular-nums}
.stat .lbl{font-size:.78rem;color:var(--muted);font-weight:600}

/* ---------- grid ---------- */
.grid{flex:1;display:grid;grid-template-columns:.92fr 1.45fr;gap:1.2rem;min-height:0}
.panel{background:var(--surface);border-radius:1.2rem;box-shadow:var(--shadow);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.panel-head{padding:1.05rem 1.25rem;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:.6rem}
.panel-head h2{font-size:1.1rem;font-weight:700}
.panel-head .meta{margin-left:auto;color:var(--muted);font-size:.9rem;font-weight:600}

/* ---------- queue ---------- */
.queue-list{padding:.7rem;overflow:hidden;display:flex;flex-direction:column;gap:.55rem}
.qrow{
  display:flex;gap:.75rem;align-items:flex-start;padding:.8rem .85rem;border-radius:.85rem;
  border:1.5px solid transparent;background:var(--surface-2);transition:all .35s ease;position:relative;
}
.qrow.active{border-color:var(--primary);background:var(--primary-050);box-shadow:0 8px 22px rgba(109,91,255,.16)}
.qrow.done{opacity:.62}
.qrow .mp{flex:none;width:2.3rem;height:2.3rem;border-radius:.6rem;display:grid;place-items:center;font-weight:800;font-size:.72rem;color:#fff}
.mp.wb{background:var(--wb)} .mp.ozon{background:var(--ozon)} .mp.ym{background:var(--ym);color:#1a1400}
.qrow .qbody{flex:1;min-width:0}
.qrow .qtop{display:flex;align-items:center;gap:.5rem}
.qrow .qprod{font-weight:700;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qrow .stars{flex:none;font-size:.85rem;letter-spacing:.04em;color:var(--star)}
.qrow .stars i{color:#D8DCEA;font-style:normal}
.qrow .qtext{color:var(--muted);font-size:.85rem;line-height:1.35;margin-top:.2rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.qrow .qstatus{flex:none;align-self:center;font-size:.82rem;font-weight:700;color:var(--muted)}
.qrow.active .qstatus{color:var(--primary)}
.qrow.done .qstatus{color:var(--success)}

/* ---------- workspace ---------- */
.ws{padding:1.3rem 1.5rem;overflow:hidden;display:flex;flex-direction:column;gap:1.05rem}
.ws-review .head{display:flex;align-items:center;gap:.7rem;margin-bottom:.7rem}
.ws-review .mpbadge{display:flex;align-items:center;gap:.45rem;font-weight:700;font-size:.9rem;padding:.35rem .7rem;border-radius:999px;background:var(--surface-2)}
.ws-review .mpbadge b{width:.7rem;height:.7rem;border-radius:50%;display:inline-block}
.mpc-wb{background:var(--wb)} .mpc-ozon{background:var(--ozon)} .mpc-ym{background:var(--ym)}
.ws-review .prod{font-weight:800;font-size:1.2rem}
.ws-review .author{margin-left:auto;color:var(--muted);font-weight:600;font-size:.95rem;display:flex;align-items:center;gap:.5rem}
.ws-review .bigstars{font-size:1.25rem;color:var(--star);letter-spacing:.05em}
.ws-review .bigstars i{color:#D8DCEA;font-style:normal}
.ws-review .text{font-size:1.18rem;line-height:1.5;color:#262a38;background:var(--surface-2);border-radius:1rem;padding:1.1rem 1.25rem;border-left:4px solid var(--line)}

.ws-reply{flex:1;min-height:0;display:flex;flex-direction:column}
.ws-reply .rhead{display:flex;align-items:center;gap:.6rem;margin-bottom:.55rem}
.ws-reply .rhead .ic{width:1.8rem;height:1.8rem;border-radius:.5rem;background:linear-gradient(135deg,var(--primary),var(--primary-700));display:grid;place-items:center;color:#fff;font-weight:800;font-size:.8rem}
.ws-reply .rhead .lbl{font-weight:700;font-size:1.02rem}
.ws-reply .rhead .pub{margin-left:auto;display:flex;align-items:center;gap:.4rem;color:var(--success);font-weight:700;font-size:.92rem;opacity:0;transform:translateY(4px);transition:.3s}
.ws-reply .rhead .pub.show{opacity:1;transform:none}
.ws-reply .box{
  flex:1;border:2px solid var(--primary);border-radius:1rem;padding:1.1rem 1.25rem;
  font-size:1.18rem;line-height:1.55;background:#fff;box-shadow:0 0 0 4px rgba(109,91,255,.10);
  overflow:hidden;position:relative;
}
.ws-reply .box.idle{border-color:var(--line);box-shadow:none}
#replyText{white-space:pre-wrap}
.caret{display:inline-block;width:.12em;height:1.1em;background:var(--primary);margin-left:1px;vertical-align:-.18em;animation:blink 1s steps(1) infinite}
.caret.hidden{display:none}
@keyframes blink{50%{opacity:0}}

/* ---------- footer tag ---------- */
.footag{position:fixed;left:1.6rem;bottom:1.1rem;display:flex;align-items:center;gap:.55rem;color:var(--muted);font-weight:600;font-size:.9rem;z-index:5}
.footag .mark{width:1.7rem;height:1.7rem;border-radius:.45rem;background:linear-gradient(135deg,var(--primary),var(--primary-700));display:grid;place-items:center;color:#fff;font-weight:800;font-size:.72rem}

/* ---------- ghost cursor ---------- */
.cursor{position:fixed;left:0;top:0;width:1.5rem;height:1.5rem;z-index:60;pointer-events:none;transform:translate(50vw,50vh);transition:transform 1.05s cubic-bezier(.5,.05,.2,1);filter:drop-shadow(0 3px 5px rgba(0,0,0,.25))}
.cursor svg{width:100%;height:100%;display:block}

/* ---------- anime assistant (профиль) ---------- */
/* Разметку девочки см. в js/girl.js */
.agent{position:fixed;right:.6rem;bottom:.4rem;width:clamp(260px,30vw,440px);z-index:55;pointer-events:none}
.agent svg{width:100%;height:auto;display:block;overflow:visible}
.speech{
  position:absolute;left:-1rem;top:-.4rem;transform:translateX(-100%);
  background:#fff;border:1.5px solid var(--line);box-shadow:var(--shadow-sm);
  padding:.5rem .8rem;border-radius:.9rem;font-weight:700;font-size:.85rem;white-space:nowrap;
  opacity:0;transition:.25s;
}
.speech.show{opacity:1}
.speech::after{content:"";position:absolute;right:-7px;bottom:.6rem;width:12px;height:12px;background:#fff;border-right:1.5px solid var(--line);border-bottom:1.5px solid var(--line);transform:rotate(-45deg)}

/* глаз: моргание + взгляд */
.eye{transform-box:fill-box;transform-origin:center;animation:blink-eye 4.2s infinite}
@keyframes blink-eye{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
.pupils{transition:transform .4s ease}
.agent.state-mouse .pupils{transform:translate(3px,2px)}
.agent.state-type .pupils{transform:translate(0,4px)}

/* клавиатура и мышь всегда видны; правая рука переходит между ними */
.fore{transform-box:view-box;transform-origin:202px 150px;transition:transform .55s cubic-bezier(.5,.05,.2,1)}
.agent.state-mouse .fore{transform:rotate(-56deg)}
.hand-l,.hand-r{transform-box:view-box;transform-origin:center}
.agent.state-type .hand-l{animation:tap .32s ease-in-out infinite}
.agent.state-type .hand-r{animation:tap .32s ease-in-out infinite .16s}
@keyframes tap{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* пар от кофе */
.steam{animation:steam 2.6s ease-in-out infinite}
.steam.s2{animation-delay:.9s}
@keyframes steam{0%{opacity:0;transform:translateY(2px) scaleX(1)}35%{opacity:.55}100%{opacity:0;transform:translateY(-12px) scaleX(1.4)}}

/* ---------- анимация прихода/ухода строк очереди ---------- */
.qrow{max-height:7rem;animation:rowin .42s ease}
@keyframes rowin{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.qrow.leaving{animation:rowout .42s ease forwards;pointer-events:none}
@keyframes rowout{to{opacity:0;transform:translateX(-28px);max-height:0;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;border-width:0}}

/* ---------- чип типа (вопрос / чат) ---------- */
.typchip{display:inline-block;font-size:.78rem;font-weight:700;color:var(--primary);background:var(--primary-050);padding:.16rem .6rem;border-radius:999px}
.typchip.q{color:#0a7d5a;background:#e4f7ef}
.typchip.c{color:var(--ozon);background:#e7efff}
.bigstars .typchip{font-size:.9rem}

/* ---------- лёгкое «дыхание» + румянец ---------- */
.figure{animation:floaty 4.6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.blush{animation:blushp 4.6s ease-in-out infinite}
@keyframes blushp{0%,100%{opacity:.5}50%{opacity:.85}}

@media (prefers-reduced-motion:reduce){
  .cursor{transition:transform .6s linear}
  .figure,.steam{animation:none}
}