/* ===== DZEN · СВЕТЛАЯ ТЕМА v2 =====
   Аптекарская точность (Oura) + сочность (Drinkit) + данные (Whoop) + журнальная типографика.
   Токены выведены из ресёрча: тёплые нейтрали, тень тонирована чернилами, шкала 4/8,
   тайминги 120/200/320, easing ease-out на появление. */
:root{
  /* нейтрали — тёплые, ни одного холодного серого */
  --bg:#F7F3EA; --card:#FFFDF8; --surface2:#F1EBDC;
  --tx:#23221E; --tx2:rgba(35,34,30,.66); --tx3:rgba(35,34,30,.45);
  --line:#E7DFCD; --line-strong:#D8CDB4;
  /* акцент — единственный */
  --acc:#A8C96B; --acc-d:#4F6B28; --acc-tint:#EDF2DC; --acc-deep:#3E551F;
  --soft:var(--acc-tint);
  /* тени: тонированы чернилами, чем больше blur — тем ниже плотность */
  --sh-1:0 1px 2px rgba(35,34,30,.05);
  --sh-2:0 2px 4px rgba(35,34,30,.06), 0 10px 24px rgba(35,34,30,.05);
  --sh-3:0 4px 8px rgba(35,34,30,.08), 0 16px 32px rgba(35,34,30,.07);
  --cardsh:var(--sh-2);
  /* формы */
  --btnr:26px; --r:26px; --r-sm:16px;
  --btn:#23221E; --btntx:#FBF9F4; --btnsh:var(--sh-3);
  --thumb:#FFFDF8; --thumbline:#23221E; --canline:#23221E;
  --leakbg:#F8E9E2;
  --veil:linear-gradient(180deg,rgba(20,19,15,.04) 0%,rgba(20,19,15,.02) 42%,rgba(20,19,15,.52) 100%);
  --dispf:'Inter',sans-serif; --dispw:800; --h2w:750;
  /* движение */
  --t-fast:120ms; --t-def:200ms; --t-slow:320ms;
  --e-out:cubic-bezier(0,0,.2,1); --e-in-out:cubic-bezier(.4,0,.2,1);
  --e-spring:cubic-bezier(.34,1.3,.64,1);
}

/* бумажная фактура: тонкое зерно кодом (SVG-шум), не картинка — не пикселится и ничего не грузит */
body{background:var(--bg)}
.app{background:var(--bg);position:relative}
.app::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.app>*{position:relative;z-index:2}

/* ---------- типографика: журнальная строгость ---------- */
h1.display{letter-spacing:-.03em;line-height:1.02}
h2{letter-spacing:-.022em;line-height:1.16}
.sub{font-size:15.5px;line-height:1.6;color:var(--tx2)}
.small{letter-spacing:.01em}
.tiny{letter-spacing:.02em}
.eyebrow{letter-spacing:.1em;color:var(--acc-d);font-weight:700;font-size:11px}
.brandline{
  font-family:'Inter',sans-serif;font-style:normal;font-weight:800;
  letter-spacing:.2em;font-size:11.5px;text-transform:uppercase;
}
/* все числа — табличные, чтобы не «прыгали» */
.bignum,.ring-num,.q-value,.fval,.sld-ends,.stat-num,.streak-pill{font-variant-numeric:lining-nums tabular-nums}
.bignum{font-family:'Inter',sans-serif;font-weight:250;letter-spacing:-.05em;font-size:clamp(88px,26vw,132px)}

/* ---------- кнопки: пилюля + физика нажатия ---------- */
.btn{border-radius:var(--btnr);letter-spacing:.01em;font-weight:700;
  transition:transform var(--t-fast) var(--e-out),background-color var(--t-def) var(--e-out),box-shadow var(--t-def) var(--e-out)}
.btn:active{transform:scale(.97)}
.btn-pri{background:var(--btn);color:var(--btntx);box-shadow:var(--sh-3)}
.btn-sec{background:var(--acc-tint);color:var(--acc-deep);box-shadow:none}
.btn-ghost{color:var(--tx2)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--acc)}

/* ---------- карточки: мягкая глубина, тёплая граница ---------- */
.card{border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--sh-2);background:var(--card);padding:18px 18px 20px}
.card-title{letter-spacing:.1em;font-size:11px;font-weight:800;color:var(--tx3)}

/* ---------- ЧАТ ---------- */
.chat-head{
  background:rgba(255,253,248,.82);backdrop-filter:saturate(1.5) blur(18px);
  -webkit-backdrop-filter:saturate(1.5) blur(18px);
  border:0;box-shadow:0 1px 0 rgba(35,34,30,.06);padding:12px 16px;
}
.chat-ava{width:42px;height:42px;border-radius:14px;box-shadow:var(--sh-1);background:var(--acc-tint)}
.chat-head-name{font-size:15px;font-weight:750;letter-spacing:-.01em}
.chat-head-st{font-size:11.5px;letter-spacing:.02em;color:var(--tx3);display:flex;align-items:center;gap:5px}
.chat-head-st::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 0 3px var(--acc-tint);animation:live 2.4s ease-in-out infinite}
@keyframes live{0%,100%{opacity:1}50%{opacity:.45}}
.chip-ic{background:transparent;border:1px solid var(--line);color:var(--tx2);border-radius:13px;
  width:40px;height:40px;font-size:16px;transition:all var(--t-fast) var(--e-out)}
.chip-ic:active{transform:scale(.94);background:var(--acc-tint);border-color:var(--acc)}

.chat-scroll{padding:18px 14px 10px;gap:9px}
.msg{
  font-size:15.5px;line-height:1.55;padding:12px 16px;letter-spacing:.002em;
  animation:msgIn var(--t-def) var(--e-spring);
  text-wrap:pretty;
}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.msg.bot{
  background:var(--card);border:0;box-shadow:var(--sh-1);
  border-radius:20px 20px 20px 6px;color:var(--tx);
}
.msg.me{
  background:var(--acc);color:#1E2A0C;font-weight:600;
  border-radius:20px 20px 6px 20px;box-shadow:0 2px 10px rgba(126,160,72,.28);
}
.typing{background:var(--card);border:0;box-shadow:var(--sh-1);border-radius:20px 20px 20px 6px;padding:15px 18px}
.typing i{width:6px;height:6px;background:var(--acc-d);opacity:.5;
  animation:tp 1.1s cubic-bezier(.4,0,.2,1) infinite}
@keyframes tp{0%,65%,100%{transform:none;opacity:.35}30%{transform:translateY(-5px) scale(1.15);opacity:1}}

.chips{padding:4px 14px 8px;gap:8px}
.chip{
  border:1.5px solid var(--line-strong);background:var(--card);color:var(--tx);
  border-radius:999px;padding:11px 17px;font-size:14.5px;font-weight:650;letter-spacing:.005em;
  box-shadow:var(--sh-1);transition:all var(--t-fast) var(--e-out);min-height:44px;
}
.chip:active{transform:scale(.96);background:var(--acc);border-color:var(--acc);color:#1E2A0C}

.chat-input{
  background:rgba(255,253,248,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:0;box-shadow:0 -2px 16px rgba(35,34,30,.05);padding:10px 12px calc(14px + env(safe-area-inset-bottom));
}
.chat-input input{
  border:1.5px solid var(--line);background:var(--bg);border-radius:24px;
  padding:13px 18px;font-size:15.5px;transition:border-color var(--t-def) var(--e-out),box-shadow var(--t-def) var(--e-out);
}
.chat-input:focus-within input{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-tint)}
.chat-mic{
  width:56px;height:56px;font-size:25px;background:var(--acc);color:#1E2A0C;
  box-shadow:0 4px 14px rgba(126,160,72,.32);transition:all var(--t-fast) var(--e-out);
}
.chat-mic:active{transform:scale(.94)}
.chat-mic.attract{animation:micPulse 2.4s var(--e-out) infinite}
@keyframes micPulse{0%{box-shadow:0 4px 14px rgba(126,160,72,.32),0 0 0 0 rgba(168,201,107,.5)}
  70%{box-shadow:0 4px 14px rgba(126,160,72,.32),0 0 0 16px rgba(168,201,107,0)}
  100%{box-shadow:0 4px 14px rgba(126,160,72,.32),0 0 0 0 rgba(168,201,107,0)}}
.chat-mic.listening{background:#C0563E;color:#FBF9F4;box-shadow:0 4px 16px rgba(192,86,62,.4)}
.chat-send{background:var(--btn);color:var(--btntx);box-shadow:var(--sh-2);transition:all var(--t-fast) var(--e-out)}
.chat-send:active{transform:scale(.94)}

/* карточка-достижение в ленте */
.msg img.msg-img{border-radius:16px;box-shadow:var(--sh-2)}

/* полка привычек в чате */
.chat-shelf .poster{border-radius:20px;box-shadow:var(--sh-2);transition:transform var(--t-def) var(--e-spring)}
.chat-shelf .poster:active{transform:scale(.97)}
.poster-title{font-family:'Inter',sans-serif;font-weight:750;font-size:17px;letter-spacing:-.015em}

/* ---------- сводка «как Whoop»: кольца и статистика ---------- */
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:2px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:12px 10px;text-align:center;box-shadow:var(--sh-1)}
.stat-num{font-size:26px;font-weight:250;line-height:1.05;letter-spacing:-.03em}
.stat-lab{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx3);margin-top:3px;font-weight:600}

/* ползунок */
.sld-track{background:var(--surface2)}
.sld input::-webkit-slider-thumb{box-shadow:var(--sh-2);border-width:2.5px}
.can-viz svg{filter:drop-shadow(0 6px 14px rgba(35,34,30,.1))}

/* ---------- уважение к настройкам ---------- */
@media (prefers-reduced-motion:reduce){
  .chat-head-st::before,.chat-mic.attract{animation:none}
}