@import url("/static/fonts/fonts.css");

:root {
  --bg: #f1ede4;
  --card: #faf8f3;
  --card-2: #efeadf;
  --ink: #131211;
  --ink-2: #5c584f;
  --ink-3: #959083;
  --line: #e4ded1;
  --btn: #131211;
  --btn-ink: #faf8f3;
  --t4: #ff5a36;
  --t4-soft: #ffe2d8;
  --t9: #c3ec34;
  --t9-ring: #9cc414;
  --t9-soft: #eef8cc;
  --ok: #129c4d;
  --ok-soft: #dcf2e2;
  --bad: #e2372c;
  --bad-soft: #fde3df;
  --warn: #c47a00;
  --k: #131211;
  --g: #a8a296;
  --w: #ddd6c6;
  --r: 22px;
  --display: "Unbounded", "Onest", ui-sans-serif, system-ui, sans-serif;
  --font: "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, .9, .25, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d0d0c; --card: #161614; --card-2: #201f1c; --ink: #f3f0e8; --ink-2: #aaa59a; --ink-3: #6f6b63;
    --line: #262522; --btn: #f3f0e8; --btn-ink: #131211; --t9-ring: #c3ec34;
    --t4-soft: #3a1c14; --t9-soft: #28300f; --ok: #35c46f; --ok-soft: #11291a; --bad: #ff5f55; --bad-soft: #351714;
    --warn: #f2ae3a; --k: #f3f0e8; --g: #6f6b63; --w: #3a3935;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--ink); font: 400 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -.01em; }
#app { max-width: 640px; margin: 0 auto; padding: max(20px, env(safe-area-inset-top)) 16px calc(110px + env(safe-area-inset-bottom)); }
.muted { color: var(--ink-2); }
.mt14 { margin-top: 14px; } .mt20 { margin-top: 20px; }

/* ---------- motion */
.rise { opacity: 0; animation: rise .55s var(--ease) forwards; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.page-out { animation: pageOut .16s ease forwards; }
@keyframes pageOut { to { opacity: 0; transform: translateY(-6px); } }
@keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
@keyframes pop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 22px; border: 0;
  border-radius: 16px; background: var(--btn); color: var(--btn-ink); font-weight: 600; font-size: 16px; cursor: pointer;
  transition: transform .15s var(--ease), opacity .2s, background .2s; user-select: none; }
.btn:hover { opacity: .9; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .25; cursor: default; transform: none; }
.btn.ghost { background: var(--card-2); color: var(--ink); }
.btn.ghost:hover { opacity: .8; }
.btn.small { min-height: 40px; padding: 8px 16px; border-radius: 12px; font-size: 14.5px; }
.btn.wide { width: 100%; }
.iconbtn { width: 42px; height: 42px; border: 0; border-radius: 14px; background: var(--card); display: grid; place-items: center;
  cursor: pointer; color: var(--ink-2); transition: transform .15s var(--ease), color .2s; flex: none; }
.iconbtn:hover { color: var(--ink); } .iconbtn:active { transform: scale(.93); }
.iconbtn svg { width: 20px; height: 20px; }

.card { background: var(--card); border-radius: var(--r); padding: 20px; }
.card + .card { margin-top: 12px; }
.eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- logos */
.logo { width: 48px; height: 48px; flex: none; display: block; }
.logo.sm { width: 38px; height: 38px; }
.logo .bg4 { fill: var(--t4); } .logo .bg9 { fill: var(--t9); } .logo .bgapp { fill: var(--ink); }
.logo text { font-family: var(--font); font-weight: 700; fill: #131211; }
.logo .acc { stroke: #131211; stroke-linecap: round; }
.logo .tapp { fill: var(--bg); } .logo .accapp { stroke: var(--t4); stroke-linecap: round; }

/* ---------- login */
.login { min-height: 82dvh; display: grid; place-items: center; text-align: center; }
.login .logo { width: 76px; height: 76px; margin: 0 auto 22px; animation: pop .6s var(--spring) both; }
.login h1 { font-size: 27px; margin-bottom: 6px; }
.pin { display: flex; gap: 10px; justify-content: center; margin: 28px 0 14px; }
.pin input { width: 50px; height: 64px; border: 0; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line);
  text-align: center; font: 600 26px var(--display); color: var(--ink); outline: none; transition: box-shadow .2s, transform .2s var(--spring); }
.pin input:focus { box-shadow: inset 0 0 0 2px var(--ink); transform: translateY(-2px); }
.pin.err { animation: shake .42s; } .pin.err input { box-shadow: inset 0 0 0 2px var(--bad); }
.login .hint { min-height: 22px; color: var(--bad); font-size: 14.5px; }

/* ---------- dashboard */
.top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 4px 4px 18px; }
.top h1 { font-size: clamp(30px, 8vw, 38px); line-height: 1.05; margin-top: 6px; }
.streak { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 14px; color: var(--ink-2); white-space: nowrap; padding-bottom: 4px; }
.streak svg { width: 17px; height: 17px; color: var(--t4); }
.streak.off svg { color: var(--ink-3); }

.plan-big { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
.plan-big b { font: 600 44px/1 var(--display); letter-spacing: -.02em; }
.plan-big span { color: var(--ink-2); font-size: 16px; }
.plan-big.done b { font-size: 26px; line-height: 1.2; }
.plan-big.done svg { width: 26px; height: 26px; color: var(--ok); align-self: center; flex: none; }
.daybar { height: 6px; border-radius: 99px; background: var(--card-2); overflow: hidden; margin: 16px 0 8px; }
.daybar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--ink); transition: width 1s var(--ease) .15s; }
.daybar.ok i { background: var(--ok); }
.plan-sub { font-size: 13.5px; color: var(--ink-3); }
.prows { margin-top: 14px; }
.prow { display: flex; align-items: center; gap: 14px; padding: 14px 0 2px; border-top: 1px solid var(--line); margin-top: 12px; transition: opacity .2s; }
.prow:first-child { border-top: 0; margin-top: 0; }
.prow:hover .go { transform: translateX(3px); color: var(--ink); }
.prow .grow { flex: 1; min-width: 0; }
.prow b { display: block; font-weight: 600; font-size: 16px; line-height: 1.25; }
.prow small { display: block; color: var(--ink-2); font-size: 13.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow small .ok { color: var(--ok); font-weight: 600; }
.prow small .late { color: var(--bad); font-weight: 600; }
.prow .bar { height: 4px; border-radius: 99px; background: var(--card-2); overflow: hidden; margin-top: 9px; }
.prow .bar i { display: block; height: 100%; width: 0; border-radius: inherit; transition: width 1s var(--ease) .2s; }
.prow.t4 .bar i { background: var(--t4); } .prow.t9 .bar i { background: var(--t9-ring); }
.prow .pct { text-align: right; flex: none; }
.prow .pct b { font: 600 20px/1 var(--display); }
.prow .pct small { font-size: 12.5px; margin-top: 4px; }
.prow .pct b small { display: inline; font-size: .6em; margin: 0 0 0 1px; color: inherit; }
.prow .go { color: var(--ink-3); transition: transform .2s var(--ease), color .2s; flex: none; }
.prow .go svg { width: 18px; height: 18px; display: block; }

/* activity chart */
.chart-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; margin-bottom: 18px; }
.chart-head h2 { font-size: 16px; }
.chart-head span { color: var(--ink-3); font-size: 13.5px; }
.bars { display: grid; grid-template-columns: repeat(14, 1fr); gap: 5px; align-items: end; height: 84px; }
.bars .b { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.bars .b i { display: block; height: 0; min-height: 3px; border-radius: 5px; background: var(--card-2); transition: height .9s var(--ease); }
.bars .b.has i { background: var(--ink-3); }
.bars .b.today i { background: var(--ink); }
.bars .b em { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translate(-50%, 4px); font-style: normal; font-size: 11.5px; font-weight: 600;
  background: var(--ink); color: var(--bg); padding: 2px 7px; border-radius: 7px; opacity: 0; pointer-events: none; transition: .15s; white-space: nowrap; z-index: 2; }
.bars .b:hover em { opacity: 1; transform: translate(-50%, 0); }
.bars .b:last-child em { left: auto; right: 0; transform: translateY(4px); }
.bars .b:last-child:hover em { transform: none; }
.days { display: grid; grid-template-columns: repeat(14, 1fr); gap: 5px; margin-top: 8px; font-size: 11px; color: var(--ink-3); text-align: center; }
.days .today { color: var(--ink); font-weight: 700; }

/* task cards */
.task-head { display: flex; align-items: center; gap: 14px; }
.task-head h3 { font-size: 18px; }
.task-head small { display: block; color: var(--ink-2); font-size: 13.5px; margin-top: 2px; }
.cycle { display: flex; align-items: center; gap: 18px; margin: 20px 0 18px; }
.ring { position: relative; width: 92px; height: 92px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.ring .track { fill: none; stroke: var(--card-2); stroke-width: 8; }
.ring .val { fill: none; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 1.2s var(--ease) .1s; }
.ring.t4 .val { stroke: var(--t4); } .ring.t9 .val { stroke: var(--t9-ring); } .ring.ok .val { stroke: var(--ok); } .ring.ink .val { stroke: var(--ink); }
.ring .c { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; text-align: center; }
.ring .c b { font: 600 21px/1 var(--display); }
.ring .c b small { font-size: .6em; margin-left: 1px; }
.ring .c span { display: block; font-size: 11.5px; color: var(--ink-2); margin-top: 3px; }
.cycle .info b { display: block; font: 600 15px var(--display); }
.cycle .info span { display: block; color: var(--ink-2); font-size: 14px; margin-top: 3px; }
.cycle .info span.late { color: var(--bad); } .cycle .info span.soon { color: var(--warn); }
.subrow { display: flex; align-items: center; gap: 12px; padding-top: 14px; margin-top: 16px; border-top: 1px solid var(--line); }
.subrow .ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--card-2); color: var(--ink-3); flex: none; }
.subrow .ic svg { width: 17px; height: 17px; }
.subrow.on .ic { background: var(--ink); color: var(--bg); }
.subrow .grow { flex: 1; min-width: 0; }
.subrow b { display: block; font-weight: 600; font-size: 15px; }
.subrow small { display: block; color: var(--ink-2); font-size: 13px; }
.lists { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; font-size: 13.5px; color: var(--ink-2); }
.lists span { display: inline-flex; align-items: center; gap: 6px; }
.lists b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.lists i { width: 9px; height: 9px; border-radius: 3px; }
.lists .k i { background: var(--k); } .lists .g i { background: var(--g); } .lists .w i { background: var(--w); }

/* ---------- practice */
.play.t4 { --accent: var(--t4); --accent-soft: var(--t4-soft); }
.play.t9 { --accent: var(--t9-ring); --accent-soft: var(--t9-soft); }
.ptop { display: flex; align-items: center; gap: 12px; }
.ptitle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; }
.ptitle .grow { min-width: 0; }
.ptitle b { display: block; font: 600 16px/1.25 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptitle small { display: block; color: var(--ink-2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pprog { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.pprog .bar { flex: 1; height: 6px; border-radius: 99px; background: var(--card); overflow: hidden; }
.pprog .bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width .5s var(--ease); }
.pprog .count { font-size: 13.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pprog .count b { color: var(--ink); font-weight: 600; }

.kbd { position: relative; }
.kbd .tip { position: absolute; right: 0; top: calc(100% + 8px); width: 260px; padding: 12px 14px; border-radius: 14px; background: var(--ink); color: var(--bg);
  font-size: 13.5px; line-height: 1.75; text-align: left; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: .18s var(--ease); z-index: 20; }
.kbd:hover .tip, .kbd.open .tip { opacity: 1; transform: none; }
.tip kbd { display: inline-block; min-width: 22px; padding: 0 6px; border-radius: 6px; background: rgba(127,127,127,.3); font: 600 12px/20px var(--font); text-align: center; margin-right: 4px; }
.tip p { margin: 6px 0 0; opacity: .7; font-size: 12.5px; line-height: 1.4; }

.stage { position: relative; min-height: 58dvh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 24px 0 8px; }
.stage.in { animation: cardIn .36s var(--ease) both; }
.stage.out { animation: cardOut .18s ease-in both; }
@keyframes cardIn { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes cardOut { to { opacity: 0; transform: translateX(-28px); } }
.wordwrap { position: relative; max-width: 100%; }
.word { display: flex; flex-wrap: nowrap; justify-content: center; align-items: baseline; font-family: var(--font); font-weight: 600;
  font-size: 60px; line-height: 1.25; letter-spacing: .01em; white-space: nowrap; }
.word.shake { animation: shake .4s; }
.ch { display: inline-block; }
.sp { display: inline-block; width: .28em; }
.v { position: relative; display: inline-block; border: 0; background: none; padding: 0 .04em; margin: 0; border-radius: .14em; cursor: pointer;
  font: inherit; line-height: inherit; letter-spacing: inherit; color: var(--ink); transition: background .15s, color .15s, transform .18s var(--spring); }
.v:hover { background: var(--card); }
/* the stress mark, set over the vowel; --mt is fitted to the font in JS (x-height) */
.v::after { content: ""; position: absolute; left: 50%; top: var(--mt, .2em); width: .07em; height: .2em; border-radius: .04em; background: currentColor;
  transform: translate(-25%, -100%) rotate(30deg) scaleY(0); transform-origin: 50% 100%; transition: transform .25s var(--spring); }
.v.sel { color: var(--accent); background: var(--accent-soft); }
.v.sel::after, .v.right::after { transform: translate(-25%, -100%) rotate(30deg) scaleY(1); }
.v.right { color: var(--ok); background: var(--ok-soft); animation: bump .45s var(--spring); }
.v.wrong { color: var(--bad); background: none; text-decoration: line-through; text-decoration-thickness: .05em; }
.word.locked .v { cursor: default; }
.word.locked .v:not(.sel):not(.right):hover { background: none; }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.18) translateY(-3px); } 100% { transform: none; } }
.ctx { margin-top: 10px; color: var(--ink-2); font-size: 15.5px; min-height: 24px; }
.gap { display: inline-block; position: relative; min-width: .5em; text-align: center; color: var(--ink); }
.gap::after { content: ""; position: absolute; left: .08em; right: .08em; bottom: .17em; height: 2px; border-radius: 2px; background: var(--ink-3); opacity: .4; }
.gap.right, .gap.miss { color: var(--ok); }
.gap.right { animation: bump .45s var(--spring); }
.gap.right::after, .gap.miss::after { background: var(--ok); opacity: .8; }

.verdict { min-height: 30px; margin-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vd { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16.5px; animation: pop .35s var(--spring) both; }
.vd svg { width: 21px; height: 21px; flex: none; }
.vd.ok { color: var(--ok); } .vd.bad { color: var(--bad); } .vd.doubt { color: var(--warn); }
.vd .w { color: var(--ink); }
.vd .w b { color: var(--ok); font-weight: 700; }
.note { max-width: 460px; color: var(--ink-2); font-size: 14.5px; line-height: 1.45; animation: rise .35s var(--ease) .08s both; }

.burst { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 3; }
.burst i { position: absolute; width: 7px; height: 7px; border-radius: 2px; left: -3.5px; top: -3.5px; animation: fly .62s var(--ease) forwards; }
@keyframes fly { from { opacity: 1; transform: rotate(var(--a)) translateY(-6px) scale(1); } to { opacity: 0; transform: rotate(var(--a)) translateY(var(--d, -48px)) scale(.3); } }

.opts { display: flex; justify-content: center; gap: 12px; margin-top: 28px; width: 100%; }
.opt { position: relative; flex: 0 1 150px; min-height: 76px; border: 0; border-radius: 20px; background: var(--card-2);
  font: 600 32px var(--font); cursor: pointer; transition: transform .16s var(--ease), background .2s, opacity .2s, box-shadow .2s; }
.opt:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -14px rgba(0,0,0,.4); }
.opt:active { transform: scale(.95); }
.opt small { position: absolute; right: 11px; bottom: 7px; font: 500 10px var(--font); color: var(--ink-3); opacity: 0; }
@media (hover: hover) and (pointer: fine) { .opt small { opacity: .4; } }
.opt.right { background: var(--ok-soft); color: var(--ok); animation: bump .45s var(--spring); }
.opt.wrong { background: var(--bad-soft); color: var(--bad); animation: shake .35s; }
.opt.dim { opacity: .35; }
.opts.locked .opt { cursor: default; } .opts.locked .opt:hover { transform: none; box-shadow: none; }

.actions { display: flex; gap: 10px; margin-top: 24px; }
.actions .btn { flex: 1; }
.actions .btn.ghost { flex: 0 1 auto; padding: 12px 20px; }
.actions.center { justify-content: center; }
.stage > .actions { width: 100%; max-width: 440px; }

/* summary */
.summary { text-align: center; padding-top: 5dvh; }
.summary .ring { width: 150px; height: 150px; margin: 0 auto 20px; }
.summary .ring .c b { font-size: 34px; }
.summary h2 { font-size: 24px; }
.summary .lead { color: var(--ink-2); margin-top: 6px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 22px 0 14px; }
.stats div { padding: 14px 8px; border-radius: 16px; background: var(--card); }
.stats b { display: block; font: 600 24px var(--display); }
.stats span { color: var(--ink-2); font-size: 13px; }
.mist { text-align: left; }
.mist h2 { font-size: 16px; margin-bottom: 6px; }
.mist .m { padding: 12px 2px; border-top: 1px solid var(--line); }
.mist .m b { font-weight: 600; font-size: 18px; }
.mist .m i { font-style: normal; color: var(--ink-2); font-size: 13.5px; margin-left: 6px; }
.mist .m span { display: block; color: var(--ink-3); font-size: 13.5px; line-height: 1.4; margin-top: 3px; }
.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 50; }
.confetti i { position: absolute; top: -14px; width: 8px; height: 14px; border-radius: 2px; animation: fall 1.9s cubic-bezier(.3,.6,.4,1) forwards; }
@keyframes fall { to { transform: translate(var(--dx), 105vh) rotate(var(--r)); } }

/* ---------- AI chat */
.fab { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 30;
  display: inline-flex; align-items: center; gap: 9px; height: 52px; padding: 0 20px 0 16px; border: 0; border-radius: 99px;
  background: var(--btn); color: var(--btn-ink); font-weight: 600; font-size: 15px; cursor: pointer;
  box-shadow: 0 12px 30px -12px rgba(0,0,0,.5); transition: transform .35s var(--spring), opacity .25s; }
.fab:hover { transform: translateY(-2px); } .fab:active { transform: scale(.96); }
.fab svg { width: 21px; height: 21px; }
.fab.hide { opacity: 0; pointer-events: none; transform: scale(.6) translateY(10px); }
.chat { position: fixed; z-index: 40; right: 16px; bottom: 16px; width: min(400px, calc(100vw - 32px)); height: min(620px, calc(100dvh - 32px));
  display: flex; flex-direction: column; background: var(--card); border-radius: 24px; box-shadow: 0 0 0 1px var(--line), 0 30px 80px -20px rgba(0,0,0,.5);
  transform-origin: calc(100% - 40px) calc(100% - 26px); visibility: hidden; opacity: 0; transform: scale(.2); pointer-events: none;
  transition: transform .26s cubic-bezier(.5, 0, .75, 0), opacity .2s ease .06s, visibility 0s linear .3s; }
.chat.open { visibility: visible; opacity: 1; transform: none; pointer-events: auto;
  transition: transform .5s cubic-bezier(.2, 1.15, .3, 1), opacity .18s ease, visibility 0s; }
.chat > * { transition: opacity .25s ease .12s; }
.chat:not(.open) > * { opacity: 0; transition-delay: 0s; }
@media (max-width: 560px) {
  .chat { right: 0; bottom: 0; width: 100vw; height: 86dvh; border-radius: 24px 24px 0 0; transform-origin: 50% 100%; transform: translateY(100%); opacity: 1;
    transition: transform .3s cubic-bezier(.5, 0, .75, 0), visibility 0s linear .3s; }
  .chat.open { transition: transform .45s cubic-bezier(.2, 1, .3, 1), visibility 0s; }
  .fab span { display: none; } .fab { padding: 0 15px; }
}
.chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px 16px; border-bottom: 1px solid var(--line); }
.chat-head .av { width: 40px; height: 40px; border-radius: 13px; background: var(--ink); color: var(--bg); display: grid; place-items: center; flex: none; }
.chat-head .av svg { width: 21px; height: 21px; }
.chat-head .grow { flex: 1; min-width: 0; }
.chat-head b { display: block; font: 600 15px var(--display); }
.chat-head small { display: inline-flex; align-items: center; gap: 5px; color: var(--ok); font-size: 12.5px; font-weight: 600; }
.chat-head small svg { width: 14px; height: 14px; }
.chat-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; scroll-behavior: smooth; }
.msg { max-width: 88%; padding: 10px 14px; border-radius: 18px; font-size: 15px; line-height: 1.5; word-wrap: break-word; animation: msgIn .35s var(--ease) both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.msg.me { align-self: flex-end; background: var(--ink); color: var(--bg); border-bottom-right-radius: 6px; white-space: pre-wrap; }
.msg.ai { align-self: flex-start; background: var(--card-2); border-bottom-left-radius: 6px; }
.msg.ai ul { margin: 4px 0; padding-left: 18px; } .msg.ai p { margin: 0 0 6px; } .msg.ai p:last-child { margin: 0; }
.msg.sys { align-self: center; color: var(--ink-3); font-size: 12.5px; padding: 2px 8px; text-align: center; max-width: 100%; background: none; }
.msg.sys b { color: var(--ink-2); font-weight: 600; }
.steps { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.steps:empty { display: none; }
.step { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-3); animation: msgIn .3s var(--ease) both; }
.step svg { width: 14px; height: 14px; flex: none; }
.think { font-size: 14px; font-weight: 500; background: linear-gradient(90deg, var(--ink-3) 0%, var(--ink-3) 35%, var(--ink) 50%, var(--ink-3) 65%, var(--ink-3) 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 1.8s linear infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: var(--ink-2); border-radius: 1px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 16px 10px; }
.chips button { border: 0; border-radius: 99px; padding: 7px 12px; font-size: 13px; background: var(--card-2); cursor: pointer; transition: opacity .15s, transform .15s; }
.chips button:hover { opacity: .75; } .chips button:active { transform: scale(.96); }
.chat-input { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.chat-input textarea { flex: 1; resize: none; border: 0; outline: none; border-radius: 16px; padding: 12px 14px; max-height: 120px; min-height: 46px; height: 46px;
  background: var(--card-2); color: var(--ink); font: 15px/1.4 var(--font); }
.chat-input .send { width: 46px; height: 46px; border: 0; border-radius: 14px; background: var(--ink); color: var(--bg); display: grid; place-items: center; cursor: pointer; flex: none; transition: transform .15s, opacity .2s; }
.chat-input .send:active { transform: scale(.92); } .chat-input .send:disabled { opacity: .3; }
.chat-input .send svg { width: 20px; height: 20px; }

.toast { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; z-index: 60;
  background: var(--ink); color: var(--bg); padding: 11px 18px; border-radius: 14px; font-size: 14.5px; font-weight: 500; transition: .3s var(--ease); pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.boot { height: 60dvh; display: grid; place-items: center; }
.boot::after { content: ""; width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--ink); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.errbox { text-align: center; padding: 28px; }