/* Hark-style shell: round + button, Home | Chat | Guides pill, avatar, frosted card feed, white/pale-blue chat. */
.hk-legacy{display:none!important}
/* Until hark.js has built the Sky shell (it sets data-hk on #app), the old static markup stays hidden: no Classic flash on open or reload. */
#app:not([data-hk]){visibility:hidden}
:root{--hk-ink:#1d1d1f;--hk-mut:#5d6675;--hk-card:rgba(238,244,251,.86);--hk-tile:rgba(255,255,255,.78);--hk-ease:cubic-bezier(.22,.9,.28,1)}
.hk-top{display:flex!important;align-items:center;gap:10px;justify-content:space-between;max-width:640px;width:100%;margin:0 auto;padding:max(12px,env(safe-area-inset-top)) 14px 8px!important;background:transparent!important;border:0!important;position:relative;z-index:3}
.hk-round,.hk-av{flex:none;width:46px;height:46px;border-radius:50%!important;display:grid;place-items:center;padding:0;border:0;cursor:pointer;transition:transform .18s var(--hk-ease),background .2s}
.hk-round{background:rgba(255,255,255,.7)}
.hk-av{background:#f5a35c;color:#1d1d1f}
:root[data-style="sky"] .top.hk-top .hk-round,:root[data-style="sky"] .top.hk-top .hk-round *{color:var(--hk-ink);stroke:var(--hk-ink)}
:root[data-style="sky"] .top.hk-top .hk-av,:root[data-style="sky"] .top.hk-top .hk-av *{color:#fff;stroke:#fff}
.hk-round:hover{background:rgba(255,255,255,.8)}
.hk-round:active,.hk-av:active{transform:scale(.92)}
.hk-seg{position:relative;flex:1;max-width:310px;height:46px;padding:4px;border-radius:999px;display:grid;grid-template-columns:repeat(3,1fr);background:rgba(110,135,175,.4);margin:0 auto;min-width:0}
.hk-thumb{position:absolute;top:4px;bottom:4px;left:0;width:var(--w,33%);border-radius:999px;background:#111;transform:translateX(var(--x,0px));transition:transform .45s var(--hk-ease),width .45s var(--hk-ease);will-change:transform;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.hk-tab{position:relative;z-index:1;min-width:0;overflow:hidden;white-space:nowrap;text-align:center;background:none;border:0;border-radius:999px!important;font:600 clamp(13px,3.7vw,15px)/1 var(--sans);cursor:pointer;padding:0 4px;transition:color .25s,transform .15s}
:root[data-style="sky"] .top.hk-top .hk-tab{color:rgba(29,29,31,.72)}
:root[data-style="sky"] .top.hk-top .hk-tab.on{color:#fff}
.hk-tab:active{transform:scale(.94)}

.app[data-hk]{position:relative}
.app[data-tab="home"]>.chat,.app[data-tab="home"]>.dock,.app[data-tab="guides"]>.chat,.app[data-tab="guides"]>.dock{display:none!important}
.app:not([data-tab="home"])>.hk-home,.app:not([data-tab="guides"])>.hk-guides,.app[data-tab="chat"]>.hk-float{display:none}
.app .foryou{display:none!important}
:root[data-style] .app[data-tab="chat"]>.chat{flex:1 1 auto!important;overflow-y:auto!important}
:root[data-style] .app[data-tab="chat"]>.dock{order:0!important}
:root[data-style="sky"] .app[data-tab="chat"] .hello{padding:12vh 0 3vh}

/* the whole screen is the scroller, so the wheel and trackpad work everywhere; the content keeps a 640px column in the middle */
.hk-pane{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;width:100%;max-width:none;margin:0;padding:6px max(14px,calc((100% - 612px) / 2)) 110px;display:flex;flex-direction:column;gap:14px;color:var(--hk-ink);--ink:var(--hk-ink);--mut:var(--hk-mut);scrollbar-width:thin}
.hk-pane.fresh>*{animation:hkrise .55s var(--hk-ease) both;animation-delay:var(--d,0ms)}
.hk-pane.in-r{animation:hkInR .42s var(--hk-ease) both}.hk-pane.in-l{animation:hkInL .42s var(--hk-ease) both}
.app>.chat.in-r,.app>.dock.in-r{animation:hkInR .42s var(--hk-ease) both}.app>.chat.in-l,.app>.dock.in-l{animation:hkInL .42s var(--hk-ease) both}
@keyframes hkrise{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
@keyframes hkInR{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:none}}
@keyframes hkInL{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:none}}
.hk-h1{margin:6px 6px 0;font:500 38px/1.05 var(--serif);letter-spacing:-.03em;color:#fff;text-shadow:0 2px 22px rgba(20,40,80,.25)}
.hk-h2{margin:10px 8px -4px;font:600 16px var(--sans);color:#fff;text-shadow:0 1px 12px rgba(20,40,80,.3)}

.hk-card{background:var(--hk-card);border-radius:40px;padding:24px 22px;display:flex;flex-direction:column;gap:14px;color:var(--hk-ink);transition:transform .25s var(--hk-ease)}
.hk-card h2{margin:0;font:600 19px var(--sans);letter-spacing:-.01em}
.hk-card p{margin:0;color:var(--hk-mut);font-size:16px;line-height:1.45}
.hk-card.hk-flush{padding:6px 8px;gap:0}
.hk-logo{font:500 46px/1 var(--serif);letter-spacing:-.04em;text-transform:lowercase}
.hk-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hk-wide{display:flex;align-items:center;justify-content:center;min-height:56px;padding:0 16px;border:0;border-radius:22px!important;font:600 16px var(--sans);cursor:pointer;background:#fff;color:#1d1d1f!important;transition:transform .18s var(--hk-ease),filter .2s}
.hk-wide.dark{background:#111;color:#fff!important}.hk-wide.light{background:#fff}
.hk-wide:hover,.hk-tile:hover,.hk-svc:hover,.hk-row:hover{filter:brightness(.97)}
.hk-wide:active,.hk-tile:active,.hk-row:active,.hk-svc:active,.hk-float:active{transform:scale(.97)}
.hk-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hk-tile{display:flex;flex-direction:column;gap:8px;align-items:flex-start;text-align:left;padding:16px;border:0;border-radius:24px!important;background:var(--hk-tile);cursor:pointer;color:var(--hk-ink);transition:transform .18s var(--hk-ease),filter .2s}
.hk-tile small{font-size:14px;color:var(--hk-mut)}.hk-tile b{font:600 30px/1 var(--sans);letter-spacing:-.02em}
.hk-list{display:flex;flex-direction:column}
.hk-row{display:flex;align-items:center;gap:12px;padding:14px 4px;border:0;border-top:1px solid rgba(60,80,120,.14);border-radius:0!important;background:none;text-align:left;color:var(--hk-ink);cursor:pointer;transition:transform .18s var(--hk-ease)}
.hk-row:first-child{border-top:0}
.hk-v{flex:none;font:600 13px var(--sans);padding:6px 12px;border-radius:999px;background:#111;color:#fff}
.hk-t{flex:1;min-width:0;font-size:15.5px;line-height:1.35}
.hk-row svg,.hk-svc>svg{flex:none;color:var(--hk-mut);opacity:.7}
.hk-stack{display:flex}
.hk-circ{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--hk-ink);border:3px solid var(--hk-card)}
.hk-stack .hk-circ+.hk-circ{margin-left:-12px}
.hk-svc{display:flex;align-items:center;gap:14px;width:100%;padding:12px 10px;border:0;border-top:1px solid rgba(60,80,120,.14);border-radius:0!important;background:none;color:var(--hk-ink);text-align:left;cursor:pointer;transition:transform .18s var(--hk-ease)}
.hk-svc:first-child{border-top:0}
.hk-svc .hk-circ{border:0;background:#fff}
.hk-st{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.hk-st b{font:600 16px var(--sans)}.hk-st small{font-size:13.5px;color:var(--hk-mut);line-height:1.3}

.hk-float{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));width:min(360px,calc(100% - 32px));height:56px;margin-left:calc(min(360px,100% - 32px)/-2);display:flex;align-items:center;gap:12px;padding:0 22px;border:0;border-radius:999px!important;background:rgba(255,255,255,.94);box-shadow:0 8px 28px rgba(30,60,110,.2);color:var(--hk-mut);font:500 16px var(--sans);cursor:pointer;z-index:4;animation:hkrise .6s .25s var(--hk-ease) both;transition:transform .18s var(--hk-ease)}
.hk-float svg{color:var(--hk-ink)}

/* chat bubbles: white assistant, pale-blue you */
:root[data-style="sky"] .msg.botrow .bot{background:rgba(255,255,255,.96);color:#1d1d1f;border-radius:30px;padding:14px 20px;--ink:#1d1d1f;--mut:#5d6675;--line:rgba(0,0,0,.1);box-shadow:0 1px 0 rgba(255,255,255,.4)}
:root[data-style="sky"] .msg.botrow .bot a{color:#0b57c9}
:root[data-style="sky"] .msg.botrow .bot:has(.err,.sheet,.pack,.g-card,.vault){background:transparent;padding:0;box-shadow:none}
:root[data-style="sky"] body .msg.me .bubble-me{background:rgba(196,216,242,.78)!important;color:#1d1d1f!important;border:0!important;border-radius:30px!important;padding:13px 20px}
:root[data-style="sky"] .bubble-me a{color:#0b57c9}
.msg.me{animation:hkpop .4s var(--hk-ease) both;transform-origin:bottom right}.msg.botrow{animation:hkrise .5s var(--hk-ease) both}
@keyframes hkpop{from{opacity:0;transform:translateY(12px) scale(.92)}to{opacity:1;transform:none}}

/* profile + search pages */
.hk-prof{margin:6px 0 4px}
.hk-spacer{height:90px}
.hk-search-pill{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));width:min(360px,calc(100% - 32px));margin-left:calc(min(360px,100% - 32px)/-2);height:56px;display:flex;align-items:center;gap:12px;padding:0 22px;border:0;border-radius:999px!important;background:rgba(255,255,255,.94);box-shadow:0 8px 28px rgba(30,60,110,.2);color:var(--hk-mut);font:500 16px var(--sans);cursor:pointer;z-index:5}
.hk-search-pill svg{color:var(--hk-ink)}
.hk-sw{position:absolute;inset:0;display:flex;flex-direction:column;animation:hkrise .4s var(--hk-ease) both}
.hk-sb{flex:1;min-height:0;overflow-y:auto;padding:calc(env(safe-area-inset-top) + 70px) 16px 12px;display:flex;flex-direction:column;max-width:640px;width:100%;margin:0 auto}
.hk-hint{margin:auto;text-align:center;color:#4a5568;font-size:17px}
.hk-sbar{display:flex;gap:10px;align-items:center;padding:8px 14px max(16px,env(safe-area-inset-bottom));max-width:640px;width:100%;margin:0 auto}
.hk-sfield{flex:1;display:flex;align-items:center;gap:10px;height:52px;padding:0 20px;border-radius:999px;background:rgba(255,255,255,.9);color:var(--hk-mut)}
.hk-sfield input{flex:1;min-width:0;border:0;outline:0;background:none;font:400 17px var(--sans);color:var(--hk-ink)}
@media (prefers-reduced-motion:reduce){.hk-pane>*,.hk-float,.hk-sw,.msg{animation:none!important}.hk-thumb{transition:none}}
:root[data-style="sky"][data-sky="night"] .top.hk-top .hk-tab{color:rgba(255,255,255,.78)}
:root[data-style="sky"][data-sky="night"] .top.hk-top .hk-seg{background:rgba(255,255,255,.16)}
:root[data-style="sky"][data-sky="night"] .top.hk-top .hk-thumb{background:#fff}
:root[data-style="sky"][data-sky="night"] .top.hk-top .hk-tab.on{color:#111}
:root[data-style="sky"][data-sky="night"] .top.hk-top .hk-round{background:rgba(255,255,255,.18)}
:root[data-style="sky"][data-sky="night"] .top.hk-top .hk-round,:root[data-style="sky"][data-sky="night"] .top.hk-top .hk-round *{color:#fff;stroke:#fff}
:root[data-style="sky"][data-sky="night"] .hk-card{--hk-card:rgba(30,46,82,.72);--hk-tile:rgba(255,255,255,.1);--hk-ink:#f2f5fb;--hk-mut:#aebbd2;color:#f2f5fb}
:root[data-style="sky"][data-sky="night"] .hk-wide.light,:root[data-style="sky"][data-sky="night"] .hk-circ{color:#1d1d1f}
:root[data-style="sky"][data-sky="night"] .hk-v,:root[data-style="sky"][data-sky="night"] .hk-wide.dark{background:#fff;color:#111}
:root[data-style="sky"][data-sky="night"] .hk-wide.light{background:rgba(255,255,255,.92)}
:root[data-style="sky"][data-sky="night"] .hk-card .hk-row,:root[data-style="sky"][data-sky="night"] .hk-card .hk-svc{border-color:rgba(255,255,255,.12)}
:root[data-style="sky"][data-sky="night"] .hk-hint{color:#c9d4e8}
body.screen-open .app{visibility:hidden}
:root[data-style="sky"]:not([data-sky="night"]) .app[data-tab="chat"] .trust{color:#4d586a!important;opacity:1!important}
.top.hk-top{max-width:640px!important;box-sizing:border-box}

/* home: greeting, ask pill, quick start grid */
.hk-hello h1{margin:0;font:500 clamp(34px,10vw,46px)/1.05 var(--serif);letter-spacing:-.035em}
.hk-ask{display:flex;align-items:center;gap:12px;height:56px;padding:0 20px;border:0;border-radius:999px!important;background:#fff;color:#5d6675;font:500 16px var(--sans);cursor:pointer;text-align:left;transition:transform .18s var(--hk-ease)}
.hk-ask span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hk-ask svg{flex:none;color:#1d1d1f}
.hk-ask:active,.hk-q:active{transform:scale(.97)}
.hk-qs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.hk-q{display:flex;align-items:center;gap:12px;padding:12px;border:0;border-radius:24px!important;background:var(--hk-tile);color:var(--hk-ink);font:600 15px/1.2 var(--sans);text-align:left;cursor:pointer;transition:transform .18s var(--hk-ease),filter .2s}
.hk-q:hover{filter:brightness(.97)}.hk-q .hk-circ{width:42px;height:42px;border:0;flex:none;background:#fff;color:#1d1d1f}
.hk-card:hover{transform:translateY(-2px)}
:root[data-style="sky"][data-sky="night"] .hk-ask{background:rgba(255,255,255,.94)}
:root[data-style="sky"][data-sky="night"] .hk-q .hk-circ{color:#1d1d1f}

/* chat: steady layout with or without the keyboard */
:root[data-style="sky"] .app[data-tab="chat"] .hello{padding:5vh 0 2vh;gap:6px}
:root[data-style="sky"] .app[data-tab="chat"] .hello h1{font-size:clamp(30px,8.5vw,44px)}
:root[data-style] .app[data-tab="chat"]>.dock{background:none!important}
.app:has(textarea:focus) .trust{display:none}
@media (max-height:520px){:root[data-style="sky"] .app[data-tab="chat"] .hello p{display:none}}

/* language list: the search bar no longer lets rows show through; chosen row is clear in every phase */
:root[data-style="sky"] .search-w{position:sticky;top:0;z-index:3;background:var(--glass)!important;}
:root[data-style="sky"] .langs{overflow:visible;margin-top:10px}
:root[data-style="sky"] .lang.on{background:rgba(255,255,255,.92)!important;--ink:#1d1d1f;--mut:#5b6472;color:#1d1d1f}
:root[data-style="sky"] .lang.on .l-dot{background:#111;border-color:#111;color:#fff}

/* more motion */
/* one motion per open: the screen fades in, and its contents rise from the top, in order (no sliding column on top) */
#screen .sc-col{animation:none!important}
#screen.swap .sc-col>*{animation:hkrise .5s var(--hk-ease) both}
#screen.swap .sc-col>*:nth-child(2){animation-delay:.04s}#screen.swap .sc-col>*:nth-child(3){animation-delay:.08s}#screen.swap .sc-col>*:nth-child(4){animation-delay:.12s}#screen.swap .sc-col>*:nth-child(5){animation-delay:.16s}#screen.swap .sc-col>*:nth-child(n+6){animation-delay:.2s}
.hk-sbar{animation:hkBar .6s var(--hk-ease) both}
@keyframes hkBar{from{opacity:0;transform:translateY(-34vh) scale(.88);filter:blur(6px)}60%{filter:blur(0)}to{opacity:1;transform:none}}
.chips .chip{animation:hkrise .45s var(--hk-ease) both}
/* rows inside a card rise with the card: no second motion on each row */
.hk-av:active{animation:hkpulse .4s}
@keyframes hkpulse{50%{transform:scale(.88)}}
.hk-tab:not(.on):hover{color:#000}
.app[data-tab="home"]>.hk-float{display:none}
/* the language list scrolls inside itself; its rows stay square so the corners never show a gap */
:root[data-style="sky"] .langs{border-radius:22px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
:root[data-style="sky"] .lang{border-radius:0!important}
:root[data-style="sky"] .lang.on{border-radius:0!important}

/* ---- round 3 ---- */
.hk-float{display:none!important}
:root[data-style="sky"] .hk-sbar .hk-round,:root[data-style="sky"] .hk-sbar .hk-round *{color:#1d1d1f;stroke:#1d1d1f;background-color:transparent}
:root[data-style="sky"] .hk-sbar .hk-round{background:rgba(255,255,255,.92)}
:root[data-style="sky"] .hk-sbar .hk-round *{background:none}
.hk-fadebar{position:fixed;left:0;right:0;bottom:0;height:120px;pointer-events:none;z-index:4;background:linear-gradient(to top,var(--sk-c,#dfe8ef) 22%,transparent)}
.hk-sw .hk-h2{margin-top:0}
.hk-sb{justify-content:flex-start}
.hk-wide.dark{color:#fff!important}
:root[data-style="sky"][data-sky="night"] .hk-card .hk-wide.dark{background:#fff;color:#111!important}
.hk-prof{--hk-card:rgba(240,246,252,.82)}.hk-prof .hk-logo{font:600 44px/1 var(--sans);letter-spacing:-.03em}
:root[data-style="sky"][data-sky="night"] .hk-prof{--hk-card:rgba(30,46,82,.8)}

/* home: airy, the sky shows through */
.hk-hello{display:flex;flex-direction:column;gap:12px;padding:22px 8px 6px;color:#fff}
.hk-hello h1{margin:0;font:500 clamp(40px,12vw,54px)/1.02 var(--serif);letter-spacing:-.04em;color:#fff;text-shadow:0 2px 26px rgba(20,50,100,.3)}
.hk-hello p{color:rgba(255,255,255,.94);font-size:17px;text-shadow:0 1px 14px rgba(20,50,100,.3);margin:0}
.hk-hello .hk-ask{margin-top:8px;box-shadow:0 8px 26px rgba(30,60,110,.16)}
.hk-pane{--hk-card:rgba(240,246,252,.78)}
:root[data-style="sky"][data-sky="night"] .hk-pane{--hk-card:rgba(30,46,82,.7)}
.hk-strip{display:flex;flex-direction:column;gap:12px}
.hk-strip .hk-h2{margin:0 8px;font-size:17px}
.hk-rail{display:flex;gap:14px;overflow-x:auto;padding:4px 8px 8px;margin:0 -14px;padding-left:22px;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain}
.hk-rail::-webkit-scrollbar{display:none}
.hk-rq{flex:none;width:78px;display:flex;flex-direction:column;align-items:center;gap:8px;border:0;background:none;padding:0;cursor:pointer;scroll-snap-align:start;color:#fff;font:600 12.5px/1.2 var(--sans);text-align:center;text-shadow:0 1px 10px rgba(20,50,100,.4);animation:none;transition:transform .2s var(--hk-ease)}
.hk-rq:active{transform:scale(.9)}
.hk-rq .hk-circ{width:64px;height:64px;border:0;background:rgba(255,255,255,.94);color:#1d1d1f;box-shadow:0 6px 18px rgba(30,60,110,.18);transition:transform .25s var(--hk-ease)}
.hk-rq:hover .hk-circ{transform:translateY(-3px)}
@keyframes hkpop2{from{opacity:0;transform:translateX(26px) scale(.8)}to{opacity:1;transform:none}}
.hk-skel{height:46px;border-radius:16px;margin:8px 0;background:linear-gradient(100deg,rgba(255,255,255,.35) 30%,rgba(255,255,255,.8) 50%,rgba(255,255,255,.35) 70%) 0/220% 100%;animation:hkshim 1.2s linear infinite}
@keyframes hkshim{to{background-position:-220% 0}}

/* sky: painted clouds, grain, slow drift */
:root[data-style="sky"] body::before{background:radial-gradient(58% 17% at 22% 16%,rgba(255,255,255,.5),transparent 72%),radial-gradient(52% 14% at 82% 30%,rgba(255,255,255,.4),transparent 72%),radial-gradient(68% 16% at 28% 55%,rgba(255,255,255,.36),transparent 74%),radial-gradient(56% 15% at 86% 78%,rgba(255,255,255,.34),transparent 72%),radial-gradient(46% 12% at 14% 90%,rgba(255,255,255,.3),transparent 72%)!important;animation:hkdrift 38s ease-in-out infinite alternate;will-change:transform}
:root[data-style="sky"][data-sky="night"] body::before{opacity:.28}
@keyframes hkdrift{from{transform:translate3d(-4%,0,0)}to{transform:translate3d(4%,-2%,0)}}
:root[data-style="sky"] body::after{display:block!important;content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.16;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* chat composer: small and floating at rest, wide when you type */
:root[data-style] .app[data-tab="chat"]>.dock{padding:6px 34px max(28px,env(safe-area-inset-bottom));transition:padding .4s var(--hk-ease)}
:root[data-style] .app[data-tab="chat"]:has(textarea:focus)>.dock{padding:6px 12px max(10px,env(safe-area-inset-bottom))}
.app[data-tab="chat"] .composer{transition:box-shadow .35s var(--hk-ease),transform .35s var(--hk-ease),background .3s}
.app[data-tab="chat"] .composer:not(:focus-within){transform:scale(.985)}
.composer textarea{order:1}.attach-wrap{order:2}#micBtn{order:3}.composer .send{order:4}
.attach-wrap .pop{left:auto!important;right:0!important}
.composer .send:not(:disabled){animation:hkpop .35s var(--hk-ease) both}
#screen.on{animation:hkScreen .42s var(--hk-ease) both}
@keyframes hkScreen{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}

/* ---- round 4 ---- */
:root{--hk-spring:cubic-bezier(.34,1.45,.5,1)}
html,body{overflow-x:hidden;overscroll-behavior-x:none}
.app{overflow-x:hidden;touch-action:pan-y}
.hk-pane{overflow-x:hidden}.hk-rail{touch-action:pan-x pan-y}
.hk-thumb{transition:transform .5s var(--hk-spring),width .5s var(--hk-spring)}
/* corner button: plus / magnifier / X morph */
.hk-round{position:relative}
.hk-round .hk-i{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:rotate(-90deg) scale(.3);transition:opacity .25s,transform .45s var(--hk-spring);pointer-events:none}
.hk-round[data-m="plus"] .hk-i.plus,.hk-round[data-m="search"] .hk-i.search,.hk-round[data-m="x"] .hk-i.x{opacity:1;transform:none}
.hk-round[data-m="x"] .hk-i.search,.hk-round[data-m="x"] .hk-i.plus{transform:rotate(90deg) scale(.3)}
/* search panel */
.hk-sp{position:absolute;left:0;right:0;bottom:0;top:calc(env(safe-area-inset-top) + 70px);z-index:2;display:flex;flex-direction:column;opacity:0;transform:translateY(16px) scale(.99);pointer-events:none;transition:opacity .3s,transform .4s var(--hk-ease)}
.app[data-search] .hk-sp{opacity:1;transform:none;pointer-events:auto}
.app>.hk-pane,.app>.chat,.app>.dock{transition:opacity .25s}
.app[data-search]>.hk-pane,.app[data-search]>.chat,.app[data-search]>.dock{opacity:0;pointer-events:none}
.hk-sb{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:6px max(14px,calc((100% - 612px) / 2)) 20px;display:flex;flex-direction:column;max-width:none;width:100%;margin:0;justify-content:flex-start;scrollbar-width:thin}
.hk-big{margin:4px 8px 12px;font:600 30px/1.1 var(--sans);letter-spacing:-.03em;color:#fff;text-shadow:0 2px 18px rgba(20,50,100,.3)}
.hk-sbar{display:block;padding:8px 14px max(16px,env(safe-area-inset-bottom));max-width:640px;width:100%;margin:0 auto;animation:none}
.hk-sfield{width:100%;box-sizing:border-box}
.hk-sb .hk-svc{animation:hkrise .45s var(--d,0ms) var(--hk-ease) both}
.hk-hint{margin:auto}
/* home rail */
.hk-rail{margin:0 -14px;padding:4px 22px 12px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 34px),transparent)}
.hk-rq .hk-circ{width:60px;height:60px}.hk-rq{width:74px}
/* composer */
.hk-sbar{animation:none}
.trust{display:none!important}
.hello-trust{max-width:320px;margin:10px auto 0!important;font-size:13px!important;line-height:1.4;opacity:.85}
.composer textarea::placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.composer textarea{min-width:0}
.composer .send,#micBtn{transition:opacity .22s,transform .38s var(--hk-spring),width .32s var(--hk-ease),margin .3s,padding .3s;overflow:hidden}
.composer:has(textarea:placeholder-shown) .send{opacity:0;transform:scale(.3) rotate(-70deg);width:0!important;min-width:0;margin:0;padding:0;border:0;pointer-events:none}
.composer:not(:has(textarea:placeholder-shown)) #micBtn{opacity:0;transform:scale(.3) rotate(70deg);width:0!important;min-width:0;margin:0;padding:0;pointer-events:none}
.composer-wrap:has(#rec:not([hidden])) .composer .send{opacity:1;transform:none;width:auto!important;pointer-events:auto}
:root[data-style] .app[data-tab="chat"]>.dock{transition:padding .5s var(--hk-spring)}
.app[data-tab="chat"] .composer{transition:box-shadow .4s var(--hk-ease),transform .5s var(--hk-spring),background .3s}
.app[data-tab="chat"] .composer:focus-within{transform:translateY(-3px) scale(1.01);animation:hkring .8s ease-out}
@keyframes hkring{0%{box-shadow:0 0 0 0 rgba(255,255,255,.75)}100%{box-shadow:0 0 0 16px rgba(255,255,255,0)}}
.app>.dock.in-r,.app>.dock.in-l{animation:hkDock .55s var(--hk-spring) both}
@keyframes hkDock{from{opacity:0;transform:translateY(46px) scale(.96)}to{opacity:1;transform:none}}
/* every screen opens and closes */
#screen{opacity:0;transform:none;transition:opacity .22s ease}
#screen.on{opacity:1;transform:none;animation:none}
.dd-pop{transition:opacity .2s,transform .3s var(--hk-ease)}
.hk-rail{padding-left:34px!important;padding-right:44px!important}
.app[data-search] .composer,.app[data-search] .hk-comp,.app[data-search] form.composer{opacity:0!important;pointer-events:none!important;transition:opacity .2s}
.app[data-search] .composer-wrap{opacity:0!important;pointer-events:none!important;transition:opacity .2s}
.hk-rail{scroll-padding-left:34px;scroll-padding-right:44px}
.app[data-search] main.chat{opacity:0!important;pointer-events:none;transition:opacity .2s}.app main.chat{transition:opacity .25s}
/* fields: no black outline, tidy multi-line box */
input:focus,input:focus-visible,select:focus,select:focus-visible,textarea:focus,textarea:focus-visible,.field-i:focus,.field-i:focus-visible{outline:none!important}
textarea.field-i,:root[data-style] textarea.field-i{border-radius:20px!important;padding:14px 18px;min-height:96px;line-height:1.5;display:block;width:100%;box-sizing:border-box;resize:none;overflow:auto;-webkit-appearance:none;appearance:none}
.search-w input,.search-w input:focus{outline:none;box-shadow:none}
html body #screen textarea.field-i,html body textarea.field-i{border-radius:20px!important}


/* ---- the other pages match the shell: white pill buttons, round back button, the same title weight ---- */
:root[data-style="sky"] .btn.pri,:root[data-style="sky"] .btn.xl,:root[data-style="sky"] .lk-acts .btn.pri,:root[data-style="sky"] .rm-acts .btn.pri{background:#fff!important;border-color:#fff!important;color:var(--hk-ink)!important;box-shadow:0 8px 24px rgba(10,30,70,.22)!important}
:root[data-style="sky"] .btn.pri:hover,:root[data-style="sky"] .btn.xl:hover{filter:none;opacity:.94}
:root[data-style="sky"] .sc-head .sc-back{width:46px;height:46px;flex:none;border:0;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;padding:0;box-shadow:0 2px 10px rgba(10,30,70,.18);transition:transform .18s var(--hk-ease),background .2s}
:root[data-style="sky"] .sc-head .sc-back:hover{background:#f2f2f4}
:root[data-style="sky"] .sc-head .sc-back:active{transform:scale(.92)}
:root[data-style="sky"] .sc-head .sc-back svg{stroke:#000!important}
:root[data-style="sky"] .sc-head .sc-back svg path{stroke:#000!important}
:root[data-style="sky"] .sc-big h1{font-weight:500}

/* ---- search: an opaque panel; nothing from the tabs shows behind it ---- */
.hk-sp{background:transparent}
.app[data-search]>.hk-pane,.app[data-search]>.chat,.app[data-search]>.dock{display:none!important}

/* ---- no white ring on fields, chat boxes or selects when you tap them ---- */
input:focus,input:focus-visible,textarea:focus,textarea:focus-visible,select:focus,select:focus-visible,
.field-i:focus,.field-i:focus-visible,.search-w:focus-within,.composer:focus-within,.dd-btn:focus,.dd-btn:focus-visible,.dd-q:focus{outline:none!important}
.composer:focus-within,.search-w:focus-within,.field-i:focus,.field-i:focus-visible,.dd-btn:focus-visible{border-color:var(--line)!important}
:root[data-style="sky"] .composer,:root[data-style="sky"] .composer:focus-within,:root[data-style="sky"] .search-w:focus-within,:root[data-style="sky"] .field-i:focus{border-color:rgba(255,255,255,.14)!important;box-shadow:var(--shadow)!important}
.field-i:focus,.field-i:focus-visible,.dd-btn:focus-visible,.dd-q:focus{box-shadow:none!important}

/* ---- reminders: open and close with motion ---- */
@keyframes rmOpen{from{opacity:0;transform:translateY(-8px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
@keyframes rmClose{from{opacity:1;transform:none;clip-path:inset(0 0 0 0)}to{opacity:0;transform:translateY(-8px);clip-path:inset(0 0 100% 0)}}
.rm-body{animation:rmOpen .32s var(--hk-ease,ease) both;transform-origin:top}
.rm-item.closing .rm-body{animation:rmClose .2s ease-in both;pointer-events:none}
.rm-item .rm-chev{transition:transform .28s var(--hk-ease,ease)}
.rm-item.open .rm-chev{transform:rotate(90deg)}
.rm-head{transition:background .2s ease}
@media (prefers-reduced-motion:reduce){.rm-body,.rm-item.closing .rm-body{animation-duration:.01s}}

/* ---- invite a friend (wallet) ---- */
.grp-box.invite{padding:16px 18px}
.invite-link{margin:10px 0 12px;font-size:14px;word-break:break-all;color:var(--ink)}