:root{--bg:#fbf7f0;--card:#ffffff;--ink:#1c2a24;--muted:#56655c;--line:#e6dfd1;--green:#1f4d3a;--green-2:#e8f0e4;--terra:#b8502a;--sand:#f3ece0;--ease:cubic-bezier(.22,1,.36,1);--scroll-b:-80px;--scroll-c:-214px}*{box-sizing:border-box;margin:0;padding:0}html,body{width:390px;height:844px;overflow:hidden;background:var(--bg)}body{font:400 15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink)}.app{position:relative;width:390px;height:844px;overflow:hidden;background:var(--bg)}.status{height:44px;padding:14px 26px 0;display:flex;justify-content:space-between;font-weight:600;font-size:15px}.bar{height:56px;display:flex;align-items:center;gap:8px;padding:0 16px;border-bottom:1px solid var(--line)}.bar .ttl{flex:1}.bar h1{font:600 19px/1.1 Georgia,"Times New Roman",serif}.bar p{font-size:12px;color:var(--muted);margin-top:2px}.strip{position:relative;z-index:2;margin:12px 16px 0;padding:10px 12px;display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 6px 16px -10px rgba(31,77,58,.35)}.sd{flex:1;position:relative}.sd small{display:block;font-size:12px;color:var(--muted)}.sd b{display:block;position:relative;font-size:16px;font-weight:650;height:22px}.sd b span,.pill span{position:absolute;left:0;top:0;white-space:nowrap}.d2,.p2{opacity:0}.pill{position:relative;width:64px;height:26px;border-radius:13px;background:var(--sand);font-size:12px;font-weight:600;text-align:center;color:#6a4a12}.pill span{left:0;right:0;line-height:26px}.pill .p2{background:var(--green-2);color:var(--green);border-radius:13px}.chat{position:relative;margin-top:4px;height:476px;overflow:hidden}.chat::before,.chat::after{content:"";position:absolute;left:0;right:0;z-index:1;height:14px;pointer-events:none}.chat::before{top:0;background:linear-gradient(var(--bg),rgba(251,247,240,0))}.chat::after{bottom:0;background:linear-gradient(rgba(251,247,240,0),var(--bg))}.thread{padding:16px 16px 24px;display:flex;flex-direction:column;gap:14px;will-change:transform}.row{display:flex;gap:8px;align-items:flex-start}.row.u{justify-content:flex-end}.av{flex:none;width:28px;height:28px;border-radius:50%;background:var(--green);color:#f6e7c4;display:grid;place-items:center}.bub{max-width:296px;padding:10px 13px;border-radius:16px 16px 16px 5px;background:var(--card);border:1px solid var(--line)}.bub p{font-size:15px}.u .bub{background:var(--green);border-color:var(--green);color:#fff;border-radius:16px 16px 5px 16px}.chip{display:inline-block;margin-bottom:5px;padding:1px 8px;border-radius:10px;border:1px solid #b9d0bf;background:var(--green-2);color:var(--green);font-size:11px;font-weight:700;letter-spacing:.02em}.reply{position:relative}.dots{position:absolute;left:0;top:0;opacity:0}.dots .bub{display:flex;gap:5px;padding:14px 14px}.dots i{width:7px;height:7px;border-radius:50%;background:var(--muted);opacity:.3}.card{margin:9px 0 10px;padding:9px 11px;display:flex;justify-content:space-between;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:11px;font-size:13px}.card b{display:block;font-size:13.5px}.card span{display:block;white-space:nowrap;color:var(--muted);font-size:12px}.card .rt{text-align:right}.btns{display:flex;gap:8px}.btn{position:relative;isolation:isolate;overflow:hidden;padding:8px 12px;border-radius:10px;border:1px solid var(--line);font-size:13.5px;font-weight:600;background:var(--card)}.btn.pri{background:var(--green);border-color:var(--green);color:#fff}.press{position:absolute;z-index:-1;inset:0;background:var(--terra);opacity:0}.days{display:flex;gap:8px;margin-top:8px}.day{position:relative;overflow:hidden;width:82px;padding:8px 6px;text-align:center;border:1px solid var(--line);border-radius:11px;background:var(--bg)}.day b,.day small{display:block}.day b{font-size:15px}.day small{font-size:11px;color:var(--muted)}.day .on{position:absolute;inset:0;padding:8px 6px;background:var(--green);color:#fff;opacity:0}.day .on small{color:#d4e4d9}.ok{display:flex;gap:9px;align-items:flex-start;border-color:#b9d0bf;background:#f3f8f1}.tick{flex:none;margin-top:1px}.late{opacity:0}.sugg{position:absolute;left:0;right:0;top:652px;padding:0 16px;display:flex;gap:7px;white-space:nowrap}.sugg span{padding:6px 11px;border-radius:15px;border:1px solid #c9d8cd;background:var(--card);color:var(--green);font-size:13px;font-weight:600}.composer{position:absolute;left:0;right:0;top:692px;padding:0 16px;display:flex;gap:8px;align-items:center}.field{position:relative;flex:1;height:44px;border-radius:22px;border:1px solid #cfc6b4;background:var(--card);overflow:hidden}.field span{position:absolute;left:16px;top:0;line-height:42px;font-size:15px;white-space:nowrap}.ph{color:#6c7a71}.typed{left:0;right:0;padding-left:16px;background:var(--card);clip-path:inset(0 100% 0 0)}.send{flex:none;width:44px;height:44px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center}.note{position:absolute;left:0;right:0;top:744px;text-align:center;font-size:11.5px;color:var(--muted)}.tabs{position:absolute;left:0;right:0;bottom:0;height:80px;padding:8px 12px 0;display:flex;justify-content:space-around;border-top:1px solid var(--line);background:var(--card)}.tabs span{width:70px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:600;color:#6a766e}.tabs .on{color:var(--green)}html.is-done .late{opacity:1}html.is-done .thread{transform:translateY(var(--scroll-c))}html.is-done .typed,html.is-done .sugg{opacity:0}html.is-done .d1,html.is-done .p1{opacity:0}html.is-done .d2,html.is-done .p2{opacity:1}html.is-done .day .on{opacity:1}@media (prefers-reduced-motion:no-preference){html.is-playing .ph{animation:ph-out 100ms linear both}html.is-playing .typed{animation:type 650ms 150ms linear both}html.is-playing.s2 .typed{animation:sent 160ms linear both}html.is-playing.s2 .ph{animation:ph-in 240ms 100ms linear both}html.is-playing.s2 .send{animation:tap 320ms var(--ease) both}html.is-playing.s2 .sugg{animation:gone 200ms linear both}html.is-playing.s2 .m-user{animation:rise 460ms var(--ease) both}html.is-playing.s3 .dots{animation:appear 220ms linear both}html.is-playing.s3 .dots i{animation:pulse 300ms linear both}html.is-playing.s3 .dots i:nth-child(2){animation-delay:120ms}html.is-playing.s3 .dots i:nth-child(3){animation-delay:240ms}html.is-playing.s4 .dots{animation:appear-out 140ms linear both}html.is-playing.s4 .m-reply{animation:rise 480ms var(--ease) both}html.is-playing.s4 .r-card{animation:rise 400ms 150ms var(--ease) both}html.is-playing.s4 .r-btn{animation:rise 400ms 300ms var(--ease) both}html.is-playing.s5 .press{animation:flash 560ms linear both}html.is-playing.s6 .m-pick{animation:rise 460ms var(--ease) both}html.is-playing.s6 .day{animation:rise 340ms var(--ease) both}html.is-playing.s6 .k2{animation-delay:80ms}html.is-playing.s6 .k3{animation-delay:160ms}html.is-playing.s6 .thread{transform:translateY(var(--scroll-b));transition:transform 700ms cubic-bezier(.65,0,.35,1)}html.is-playing.s7 .day .on{animation:appear 240ms linear both}html.is-playing.s7 .m-done{animation:rise 460ms 220ms var(--ease) both}html.is-playing.s7 .tk{animation:draw 300ms 480ms linear both}html.is-playing.s7 .d1,html.is-playing.s7 .p1{animation:gone 240ms linear both}html.is-playing.s7 .d2,html.is-playing.s7 .p2{animation:appear 300ms 140ms linear both}html.is-playing.s7 .thread{transform:translateY(var(--scroll-c));transition:transform 700ms 100ms cubic-bezier(.65,0,.35,1)}}@keyframes ph-out{to{opacity:0}}@keyframes ph-in{from{opacity:0}to{opacity:1}}@keyframes type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes sent{from{opacity:1;clip-path:inset(0 0 0 0)}to{opacity:0;clip-path:inset(0 0 0 0)}}@keyframes tap{0%,100%{scale:1}40%{scale:.88}}@keyframes gone{from{opacity:1}to{opacity:0}}@keyframes appear{from{opacity:0}to{opacity:1}}@keyframes appear-out{from{opacity:1}to{opacity:0}}@keyframes rise{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}@keyframes flash{0%,100%{opacity:0}35%{opacity:1}65%{opacity:1}}@keyframes draw{from{stroke-dashoffset:14}to{stroke-dashoffset:0}}.dl{text-align:center;font-size:12px;color:var(--muted);margin:-2px 0 -2px}