@mrrocket/sdk 0.13.0 → 0.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/CHANGELOG.md +8 -1
  2. package/README.md +43 -3
  3. package/dist/api-client.d.ts +62 -1
  4. package/dist/api-client.js +28 -1
  5. package/dist/api-client.js.map +1 -1
  6. package/dist/browser/mrrocket-flows.js +11 -2
  7. package/dist/browser/mrrocket-messenger.js +304 -70
  8. package/dist/browser/mrrocket.js +1 -1
  9. package/dist/browser.d.ts +1 -1
  10. package/dist/browser.js +2 -1
  11. package/dist/browser.js.map +1 -1
  12. package/dist/client.d.ts +12 -0
  13. package/dist/client.js +22 -0
  14. package/dist/client.js.map +1 -1
  15. package/dist/context.d.ts +3 -0
  16. package/dist/context.js.map +1 -1
  17. package/dist/core.d.ts +4 -1
  18. package/dist/core.js +1 -1
  19. package/dist/core.js.map +1 -1
  20. package/dist/flows-ui.d.ts +6 -4
  21. package/dist/flows-ui.js +147 -5
  22. package/dist/flows-ui.js.map +1 -1
  23. package/dist/flows.d.ts +51 -1
  24. package/dist/flows.js +62 -21
  25. package/dist/flows.js.map +1 -1
  26. package/dist/index.d.ts +2 -1
  27. package/dist/index.js +4 -0
  28. package/dist/index.js.map +1 -1
  29. package/dist/messenger-ui.d.ts +37 -2
  30. package/dist/messenger-ui.js +597 -109
  31. package/dist/messenger-ui.js.map +1 -1
  32. package/dist/messenger.d.ts +11 -3
  33. package/dist/messenger.js +6 -3
  34. package/dist/messenger.js.map +1 -1
  35. package/dist/paywall.d.ts +123 -0
  36. package/dist/paywall.js +131 -0
  37. package/dist/paywall.js.map +1 -0
  38. package/dist/react-native/index.d.cts +235 -8
  39. package/dist/react-native/index.d.ts +235 -8
  40. package/dist/react-native/index.js +650 -184
  41. package/dist/react-native/index.js.map +1 -1
  42. package/dist/styles-css.d.ts +1 -1
  43. package/dist/styles-css.js +302 -68
  44. package/dist/styles-css.js.map +1 -1
  45. package/package.json +5 -1
@@ -1,11 +1,15 @@
1
1
  // src/styles-css.ts
2
2
  var STYLE_ID = "ckw-styles";
3
3
  var CSS = `
4
- .ckw-root{--ckw-accent:#3f76ff;--ckw-accent-ink:#fff;--ckw-bg:#fff;--ckw-bg2:#f7f7f8;--ckw-bg3:#eeeff1;--ckw-fg:#1c1d20;--ckw-fg2:#5d6068;--ckw-fg3:#8b8e96;--ckw-line:#e4e5e8;--ckw-danger:#d92d20;--ckw-shadow:0 8px 30px rgba(16,18,24,.16);--ckw-card:#fff;--ckw-col:#f5f6f7;--ckw-lift:0 1px 2px rgba(16,18,24,.06),0 0 0 1px rgba(16,18,24,.07);--ckw-raise:0 0 0 1px rgba(16,18,24,.05),0 1px 2px rgba(16,18,24,.05),0 6px 18px rgba(16,18,24,.06);--ckw-float:0 0 0 1px rgba(16,18,24,.06),0 18px 50px rgba(16,18,24,.2);
4
+ .ckw-root{--ckw-accent:#3f76ff;--ckw-accent-ink:#fff;--ckw-bg:#fff;--ckw-bg2:#f7f7f8;--ckw-bg3:#eeeff1;--ckw-fg:#1c1d20;--ckw-fg2:#5d6068;--ckw-fg3:#8b8e96;--ckw-line:#e4e5e8;--ckw-danger:#d92d20;--ckw-shadow:0 8px 30px rgba(16,18,24,.16);--ckw-card:#fff;--ckw-col:#f5f6f7;--ckw-lift:0 1px 2px rgba(16,18,24,.06),0 0 0 1px rgba(16,18,24,.07);--ckw-raise:0 0 0 1px rgba(16,18,24,.05),0 1px 2px rgba(16,18,24,.05),0 6px 18px rgba(16,18,24,.06);--ckw-float:0 0 0 1px rgba(16,18,24,.06),0 18px 50px rgba(16,18,24,.2);--ckw-soft:0 2px 8px rgba(16,18,24,.05),0 18px 48px rgba(16,18,24,.15);
5
5
  font-size:14px;line-height:1.45;font-family:inherit;color:var(--ckw-fg);box-sizing:border-box;-webkit-font-smoothing:antialiased}
6
- .ckw-root[data-theme=dark]{--ckw-bg:#111214;--ckw-bg2:#1a1b1f;--ckw-bg3:#26272c;--ckw-fg:#f1f2f4;--ckw-fg2:#a9acb3;--ckw-fg3:#7a7d86;--ckw-line:#2a2b31;--ckw-shadow:0 8px 30px rgba(0,0,0,.5);--ckw-card:#1b1c20;--ckw-col:#16171a;--ckw-lift:0 0 0 1px rgba(255,255,255,.07);--ckw-raise:0 0 0 1px rgba(255,255,255,.07);--ckw-float:0 0 0 1px rgba(255,255,255,.09),0 18px 50px rgba(0,0,0,.55)}
7
- @media (prefers-color-scheme:dark){.ckw-root[data-theme=auto]{--ckw-bg:#111214;--ckw-bg2:#1a1b1f;--ckw-bg3:#26272c;--ckw-fg:#f1f2f4;--ckw-fg2:#a9acb3;--ckw-fg3:#7a7d86;--ckw-line:#2a2b31;--ckw-shadow:0 8px 30px rgba(0,0,0,.5);--ckw-card:#1b1c20;--ckw-col:#16171a;--ckw-lift:0 0 0 1px rgba(255,255,255,.07);--ckw-raise:0 0 0 1px rgba(255,255,255,.07);--ckw-float:0 0 0 1px rgba(255,255,255,.09),0 18px 50px rgba(0,0,0,.55)}}
6
+ .ckw-root[data-theme=dark]{--ckw-bg:#111214;--ckw-bg2:#1a1b1f;--ckw-bg3:#26272c;--ckw-fg:#f1f2f4;--ckw-fg2:#a9acb3;--ckw-fg3:#7a7d86;--ckw-line:#2a2b31;--ckw-shadow:0 8px 30px rgba(0,0,0,.5);--ckw-card:#1b1c20;--ckw-col:#16171a;--ckw-lift:0 0 0 1px rgba(255,255,255,.07);--ckw-raise:0 0 0 1px rgba(255,255,255,.07);--ckw-float:0 0 0 1px rgba(255,255,255,.09),0 18px 50px rgba(0,0,0,.55);--ckw-soft:0 0 0 1px rgba(255,255,255,.07),0 18px 50px rgba(0,0,0,.55)}
7
+ @media (prefers-color-scheme:dark){.ckw-root[data-theme=auto]{--ckw-bg:#111214;--ckw-bg2:#1a1b1f;--ckw-bg3:#26272c;--ckw-fg:#f1f2f4;--ckw-fg2:#a9acb3;--ckw-fg3:#7a7d86;--ckw-line:#2a2b31;--ckw-shadow:0 8px 30px rgba(0,0,0,.5);--ckw-card:#1b1c20;--ckw-col:#16171a;--ckw-lift:0 0 0 1px rgba(255,255,255,.07);--ckw-raise:0 0 0 1px rgba(255,255,255,.07);--ckw-float:0 0 0 1px rgba(255,255,255,.09),0 18px 50px rgba(0,0,0,.55);--ckw-soft:0 0 0 1px rgba(255,255,255,.07),0 18px 50px rgba(0,0,0,.55)}}
8
8
  .ckw-root *,.ckw-root *::before,.ckw-root *::after{box-sizing:border-box}
9
+ .ckw-root{--ckw-r-panel:22px;--ckw-r-bubble:18px;--ckw-r-tail:6px;--ckw-r-card:16px;--ckw-r-field:20px;--ckw-r-pill:999px;--ckw-r-fab:999px}
10
+ .ckw-root[data-corners=soft]{--ckw-r-panel:14px;--ckw-r-bubble:12px;--ckw-r-tail:4px;--ckw-r-card:10px;--ckw-r-field:10px;--ckw-r-pill:10px;--ckw-r-fab:18px}
11
+ .ckw-root[data-corners=square]{--ckw-r-panel:6px;--ckw-r-bubble:6px;--ckw-r-tail:2px;--ckw-r-card:4px;--ckw-r-field:4px;--ckw-r-pill:4px;--ckw-r-fab:8px}
12
+ .ckw-root[data-font=system]{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
9
13
  :where(.ckw-root) :where(button,input,select,textarea){font:inherit;color:inherit;margin:0}
10
14
  .ckw-root button{cursor:pointer}
11
15
  .ckw-root :focus-visible{outline:2px solid var(--ckw-accent);outline-offset:2px}
@@ -205,47 +209,91 @@ font-size:14px;line-height:1.45;font-family:inherit;color:var(--ckw-fg);box-sizi
205
209
  .ckw-pop .ckw-row{padding:8px 0}
206
210
  .ckw-pop .ckw-form{border:0;padding:0;margin:12px 0 0}
207
211
  @media (max-width:520px){.ckw-pop{left:0!important;right:0!important;bottom:0;width:100%;max-width:100%;border-radius:12px 12px 0 0;max-height:85vh}.ckw-fab{bottom:14px}.ckw-fab[data-pos=bottom-right]{right:14px}.ckw-fab[data-pos=bottom-left]{left:14px}}
208
- /* Messenger (messenger-ui.ts) */
209
- .ckw-msgr-fab{position:fixed;bottom:20px;height:48px;padding:0 18px;gap:8px;font-size:15px;box-shadow:0 2px 4px rgba(16,18,24,.12),0 8px 24px color-mix(in srgb,var(--ckw-accent) 34%,transparent);transition:transform .16s cubic-bezier(.2,.8,.2,1)}
210
- .ckw-msgr-fab:hover{transform:scale(1.05)}
211
- .ckw-msgr-fab:active{transform:scale(.96)}
212
+ /* Messenger (messenger-ui.ts). Motion: one soft ease (.32,.72,0,1) for things that arrive, a quick ease-in for things that leave. */
213
+ .ckw-msgr-fab{position:fixed;bottom:20px;height:52px;padding:0 20px 0 16px;gap:8px;font-size:15px;box-shadow:0 1px 2px rgba(16,18,24,.1),0 6px 20px rgba(16,18,24,.16);transition:transform .3s cubic-bezier(.32,.72,0,1),box-shadow .2s linear}
214
+ .ckw-msgr-fab:hover{transform:scale(1.05);box-shadow:0 1px 2px rgba(16,18,24,.1),0 10px 28px rgba(16,18,24,.2)}
215
+ .ckw-msgr-fab:active{transform:scale(.94);transition-duration:.1s}
212
216
  .ckw-msgr-round{width:56px;height:56px;padding:0;justify-content:center}
213
- .ckw-msgr-fab .ckw-turn{animation:ckw-turn .22s cubic-bezier(.2,.8,.2,1)}
214
- @keyframes ckw-turn{from{opacity:0;transform:rotate(-70deg) scale(.6)}}
215
- .ckw-msgr-count{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--ckw-danger);color:#fff;font-size:11px;font-weight:700;line-height:20px;text-align:center;box-shadow:0 0 0 2px var(--ckw-bg);font-variant-numeric:tabular-nums}
217
+ .ckw-msgr-fab{border-radius:var(--ckw-r-fab)}
218
+ .ckw-msgr-fab-ic{position:relative;display:block;width:20px;height:20px;flex:none}
219
+ .ckw-msgr-round .ckw-msgr-fab-ic{width:27px;height:27px}
220
+ .ckw-msgr-fab .ckw-cut{stroke:var(--ckw-accent)}
221
+ .ckw-msgr-fab-i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:transform .38s cubic-bezier(.32,.72,0,1),opacity .2s linear}
222
+ .ckw-msgr-fab-i .ckw-icon{width:auto;height:auto}
223
+ .ckw-msgr-fab-i[data-i=x],.ckw-msgr-fab[data-open] .ckw-msgr-fab-i[data-i=chat]{opacity:0;transform:rotate(-90deg) scale(.4)}
224
+ .ckw-msgr-fab[data-open] .ckw-msgr-fab-i[data-i=chat]{transform:rotate(90deg) scale(.4)}
225
+ .ckw-msgr-fab[data-open] .ckw-msgr-fab-i[data-i=x]{opacity:1;transform:none}
226
+ .ckw-msgr-fab-i[data-i=x] .ckw-icon{stroke-width:2.2}
227
+ .ckw-msgr-count{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ef4444;color:#fff;font-size:10.5px;font-weight:700;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--ckw-bg);font-variant-numeric:tabular-nums;animation:ckw-badge .4s cubic-bezier(.34,1.56,.64,1)}
228
+ @keyframes ckw-badge{from{transform:scale(0)}}
216
229
  .ckw-msgr-av{width:36px;height:36px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;background:var(--ckw-accent);color:var(--ckw-accent-ink);font-size:15px;font-weight:700;line-height:1}
217
230
  .ckw-msgr-av-sm{width:26px;height:26px;font-size:12px}
218
- .ckw-msgr-preview{position:fixed;z-index:2147483000;bottom:88px;width:320px;max-width:calc(100vw - 32px);animation:ckw-in .22s cubic-bezier(.2,.8,.2,1)}
219
- .ckw-msgr-preview[data-pos=bottom-right]{right:20px}
220
- .ckw-msgr-preview[data-pos=bottom-left]{left:20px}
221
- .ckw-msgr-preview-card{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;padding:14px 16px;border:0;border-radius:18px;background:var(--ckw-bg);box-shadow:var(--ckw-float)}
231
+ .ckw-msgr-online{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ckw-fg2)}
232
+ .ckw-msgr-online::before{content:"";width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px color-mix(in srgb,#22c55e 22%,transparent);flex:none}
233
+ /* Floating cards over the closed launcher: a new answer, the hover teaser */
234
+ .ckw-msgr-preview,.ckw-msgr-teaser{position:fixed;z-index:2147483000;bottom:92px;width:320px;max-width:calc(100vw - 32px);transform-origin:bottom right;animation:ckw-rise .34s cubic-bezier(.32,.72,0,1)}
235
+ .ckw-msgr-preview[data-pos=bottom-right],.ckw-msgr-teaser[data-pos=bottom-right]{right:20px}
236
+ .ckw-msgr-preview[data-pos=bottom-left],.ckw-msgr-teaser[data-pos=bottom-left]{left:20px;transform-origin:bottom left}
237
+ .ckw-msgr-preview[data-out],.ckw-msgr-teaser[data-out]{animation:ckw-sink .16s cubic-bezier(.4,0,1,1) forwards;pointer-events:none}
238
+ @keyframes ckw-rise{from{opacity:0;transform:translateY(10px) scale(.94)}}
239
+ @keyframes ckw-sink{to{opacity:0;transform:translateY(6px) scale(.97)}}
240
+ .ckw-msgr-preview-card{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;padding:14px 40px 14px 16px;border:0;border-radius:calc(var(--ckw-r-card) + 2px);background:var(--ckw-bg);box-shadow:var(--ckw-soft);transition:transform .2s cubic-bezier(.32,.72,0,1)}
241
+ .ckw-msgr-preview-card:hover{transform:translateY(-2px)}
222
242
  .ckw-msgr-preview-main{display:flex;flex-direction:column;gap:2px;min-width:0}
223
243
  .ckw-msgr-preview-who{font-size:12px;font-weight:600;color:var(--ckw-fg3)}
224
244
  .ckw-msgr-preview-text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap;overflow-wrap:anywhere}
225
- .ckw-msgr-preview-x{position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;border:0;background:var(--ckw-bg);color:var(--ckw-fg2);display:flex;align-items:center;justify-content:center;padding:0;box-shadow:var(--ckw-lift)}
226
- .ckw-msgr{bottom:88px;width:400px;height:min(660px,calc(100vh - 108px));max-height:none;border:0;border-radius:20px;box-shadow:var(--ckw-float);animation:ckw-pop .24s cubic-bezier(.2,.8,.2,1);transform-origin:bottom right}
245
+ .ckw-msgr-preview-x{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;border:0;background:transparent;color:var(--ckw-fg3);display:flex;align-items:center;justify-content:center;padding:0;transition:background-color .12s linear,color .12s linear}
246
+ .ckw-msgr-preview-x:hover{background:var(--ckw-bg2);color:var(--ckw-fg)}
247
+ .ckw-msgr-teaser{width:340px;padding:16px;border-radius:calc(var(--ckw-r-card) + 4px);background:var(--ckw-bg);box-shadow:var(--ckw-soft);display:flex;flex-direction:column;gap:14px}
248
+ .ckw-msgr-teaser-top{display:flex;align-items:center;gap:12px}
249
+ .ckw-msgr-teaser-t{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
250
+ .ckw-msgr-teaser-t b{font-size:15px;font-weight:700;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
251
+ .ckw-msgr-teaser-row{display:flex;gap:8px}
252
+ .ckw-msgr-teaser-b{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 14px;border:0;border-radius:var(--ckw-r-pill);background:var(--ckw-bg3);color:var(--ckw-fg);font-size:14px;font-weight:600;white-space:nowrap;transition:transform .2s cubic-bezier(.32,.72,0,1),filter .1s linear}
253
+ .ckw-msgr-teaser-b[data-main]{flex:1.4;background:var(--ckw-accent);color:var(--ckw-accent-ink)}
254
+ .ckw-msgr-teaser-b:hover{filter:brightness(1.06)}
255
+ .ckw-msgr-teaser-b:active{transform:scale(.96)}
256
+ /* The panel */
257
+ .ckw-msgr{bottom:92px;width:400px;height:min(680px,calc(100vh - 112px));max-height:none;border:0;border-radius:var(--ckw-r-panel);box-shadow:var(--ckw-soft);transform-origin:bottom right;animation:ckw-msgr-in .42s cubic-bezier(.32,.72,0,1);transition:width .36s cubic-bezier(.32,.72,0,1),height .36s cubic-bezier(.32,.72,0,1)}
227
258
  .ckw-msgr[data-pos=bottom-left]{transform-origin:bottom left}
228
- @keyframes ckw-pop{from{opacity:0;transform:translateY(12px) scale(.96)}}
229
- .ckw-msgr-head{gap:10px;min-height:60px;padding:12px 12px 12px 16px;border-bottom:1px solid var(--ckw-line)}
230
- .ckw-msgr[data-view=home] .ckw-msgr-head{background:var(--ckw-accent);color:var(--ckw-accent-ink);border-bottom-color:transparent}
231
- .ckw-msgr[data-view=home] .ckw-msgr-av{background:var(--ckw-accent-ink);color:var(--ckw-accent)}
232
- .ckw-msgr[data-view=home] .ckw-msgr-x{color:inherit}
233
- .ckw-msgr[data-view=home] .ckw-msgr-x:hover{background:color-mix(in srgb,var(--ckw-accent-ink) 16%,transparent)}
234
- .ckw-msgr-head-t{flex:1}
235
- .ckw-msgr-x{width:32px;height:32px;padding:0;border-radius:10px}
236
- .ckw-msgr-brand{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:650;min-width:0}
259
+ .ckw-msgr[data-wide]{width:680px;height:calc(100vh - 112px);max-height:860px}
260
+ .ckw-msgr[data-still]{animation:none}
261
+ .ckw-msgr[data-out]{animation:ckw-msgr-out .2s cubic-bezier(.4,0,1,1) forwards;pointer-events:none}
262
+ @keyframes ckw-msgr-in{from{opacity:0;transform:translateY(20px) scale(.9)}}
263
+ @keyframes ckw-msgr-out{to{opacity:0;transform:translateY(14px) scale(.94)}}
264
+ .ckw-msgr-bar{position:relative;z-index:2;display:flex;align-items:center;gap:8px;padding:12px 12px 10px;background:var(--ckw-bg);flex:none;transition:background-color .25s linear,color .25s linear}
265
+ .ckw-msgr-lead,.ckw-msgr-trail{display:flex;align-items:center;gap:2px;flex:1;min-width:0}
266
+ .ckw-msgr-trail{justify-content:flex-end}
267
+ .ckw-msgr-ib{width:34px;height:34px;padding:0;flex:none;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:transparent;color:var(--ckw-fg2);transition:background-color .12s linear,transform .2s cubic-bezier(.32,.72,0,1)}
268
+ .ckw-msgr-ib:hover,.ckw-msgr-ib[aria-expanded=true]{background:var(--ckw-bg3);color:var(--ckw-fg)}
269
+ .ckw-msgr-ib:active{transform:scale(.9)}
270
+ .ckw-msgr-ib[aria-current=page]{color:var(--ckw-fg)}
271
+ .ckw-msgr-x{display:none}
272
+ .ckw-msgr-count-tab{top:-1px;right:-3px;min-width:0;width:8px;height:8px;padding:0;font-size:0;line-height:0;box-shadow:0 0 0 2px var(--ckw-bg)}
273
+ .ckw-msgr-menu{position:absolute;z-index:3;top:52px;right:12px;min-width:200px;padding:6px;border-radius:14px;background:var(--ckw-bg);box-shadow:var(--ckw-float);display:flex;flex-direction:column;transform-origin:top right;animation:ckw-menu-in .2s cubic-bezier(.32,.72,0,1)}
274
+ .ckw-msgr-menu[data-out]{animation:ckw-menu-out .12s cubic-bezier(.4,0,1,1) forwards}
275
+ @keyframes ckw-menu-in{from{opacity:0;transform:translateY(-4px) scale(.94)}}
276
+ @keyframes ckw-menu-out{to{opacity:0;transform:scale(.96)}}
277
+ .ckw-msgr-menu-h{padding:6px 10px 4px;font-size:12px;font-weight:600;color:var(--ckw-fg3)}
278
+ .ckw-msgr-menu-i{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border:0;border-radius:9px;background:none;font-size:14px;text-align:left;color:var(--ckw-fg)}
279
+ .ckw-msgr-menu-i:hover,.ckw-msgr-menu-i:focus-visible{background:var(--ckw-bg2)}
280
+ .ckw-msgr-menu-i .ckw-icon{color:var(--ckw-fg2)}
281
+ .ckw-msgr-body{display:flex;flex-direction:column;gap:12px;background:var(--ckw-bg);padding:4px 16px 16px;overscroll-behavior:contain;scrollbar-width:thin}
282
+ .ckw-msgr-enter>*{animation:ckw-view .3s cubic-bezier(.32,.72,0,1) backwards}
283
+ .ckw-msgr-enter>:nth-child(2){animation-delay:.03s}
284
+ .ckw-msgr-enter>:nth-child(3){animation-delay:.06s}
285
+ .ckw-msgr-enter>:nth-child(n+4){animation-delay:.09s}
286
+ @keyframes ckw-view{from{opacity:0;transform:translateY(8px)}}
287
+ /* Home */
288
+ .ckw-msgr-hero{display:flex;flex-direction:column;gap:6px;padding:10px 4px 8px}
289
+ .ckw-msgr-brand{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ckw-fg2);min-width:0}
237
290
  .ckw-msgr-brand span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
238
- .ckw-msgr-who{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
239
- .ckw-msgr-who-t{display:flex;flex-direction:column;min-width:0;font-weight:400}
240
- .ckw-msgr-who-t b{font-size:15px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
241
- .ckw-msgr-who-t span{font-size:12px;color:var(--ckw-fg3)}
242
- .ckw-msgr-body{display:flex;flex-direction:column;gap:12px;background:var(--ckw-bg2);padding:16px}
243
- .ckw-msgr[data-view=article] .ckw-msgr-body,.ckw-msgr[data-view=messages] .ckw-msgr-body{background:var(--ckw-bg)}
244
- .ckw-msgr-hero{margin:-16px -16px 0;padding:10px 22px 64px;background:var(--ckw-accent);color:var(--ckw-accent-ink)}
245
- .ckw-msgr-hero+*{margin-top:-52px}
246
- .ckw-msgr-hello{margin:0;font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.2;text-wrap:balance;overflow-wrap:anywhere}
247
- .ckw-msgr-card{position:relative;display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px 16px;border:0;border-radius:16px;background:var(--ckw-card);box-shadow:var(--ckw-raise);transition:box-shadow .12s linear}
248
- button.ckw-msgr-card:hover{box-shadow:var(--ckw-raise),0 0 0 1px color-mix(in srgb,var(--ckw-accent) 30%,transparent)}
291
+ .ckw-msgr-hello{margin:14px 0 0;font-size:28px;font-weight:650;letter-spacing:-.03em;line-height:1.12;text-wrap:balance;overflow-wrap:anywhere}
292
+ .ckw-msgr-card{position:relative;display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px 16px;border:0;border-radius:var(--ckw-r-card);background:var(--ckw-bg2);transition:background-color .15s linear,box-shadow .15s linear,transform .25s cubic-bezier(.32,.72,0,1)}
293
+ button.ckw-msgr-card:hover{background:var(--ckw-bg3)}
294
+ .ckw-msgr-card-col .ckw-msgr-search{background:var(--ckw-bg)}
295
+ .ckw-msgr-card .ckw-msgr-art:hover{background:var(--ckw-bg3)}
296
+ button.ckw-msgr-card:active{transform:scale(.985)}
249
297
  .ckw-msgr-card-col{flex-direction:column;align-items:stretch;gap:2px;padding:8px}
250
298
  .ckw-msgr-card-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
251
299
  .ckw-msgr-card-main b{font-size:15px;font-weight:650}
@@ -256,26 +304,40 @@ button.ckw-msgr-card:hover{box-shadow:var(--ckw-raise),0 0 0 1px color-mix(in sr
256
304
  .ckw-msgr-recent-row{display:flex;align-items:center;gap:12px;min-width:0}
257
305
  .ckw-msgr-recent-text{color:var(--ckw-fg);font-size:14px}
258
306
  .ckw-msgr-card .ckw-icon{color:var(--ckw-fg3)}
259
- .ckw-msgr-go{width:34px;height:34px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--ckw-accent) 12%,transparent)}
307
+ .ckw-msgr-go{width:34px;height:34px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--ckw-accent) 12%,transparent);transition:transform .25s cubic-bezier(.32,.72,0,1)}
308
+ button.ckw-msgr-card:hover .ckw-msgr-go{transform:translateX(2px)}
260
309
  .ckw-msgr-card .ckw-msgr-go .ckw-icon{color:var(--ckw-accent)}
261
- .ckw-msgr-badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--ckw-danger);color:#fff;font-size:12px;font-weight:700;line-height:20px;text-align:center}
262
- .ckw-msgr-search{display:flex;align-items:center;gap:8px;height:42px;padding:0 14px;border:0;border-radius:12px;background:var(--ckw-bg2);color:var(--ckw-accent);cursor:text}
263
- .ckw-msgr[data-view=help] .ckw-msgr-search{background:var(--ckw-card);box-shadow:var(--ckw-raise)}
264
- .ckw-msgr-card-col .ckw-msgr-search{margin-bottom:4px}
265
- .ckw-msgr-search-in{flex:1;min-width:0;border:0;background:transparent;outline:none;font-size:14px;font-weight:500;color:var(--ckw-fg)}
310
+ .ckw-msgr-badge{width:8px;height:8px;flex:none;border-radius:50%;background:var(--ckw-danger);font-size:0}
311
+ /* Search */
312
+ .ckw-msgr-search{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;border:1px solid transparent;border-radius:var(--ckw-r-field);background:var(--ckw-bg2);color:var(--ckw-fg3);cursor:text;transition:border-color .15s linear,box-shadow .15s linear,background-color .15s linear}
313
+ .ckw-msgr-card-col .ckw-msgr-search{margin-bottom:4px;height:42px}
314
+ .ckw-msgr-search:focus-within{border-color:var(--ckw-accent);background:var(--ckw-bg);box-shadow:0 0 0 4px color-mix(in srgb,var(--ckw-accent) 16%,transparent);color:var(--ckw-accent)}
315
+ .ckw-msgr-search-in{flex:1;min-width:0;border:0;background:transparent;outline:none;font-size:14.5px;color:var(--ckw-fg)}
266
316
  .ckw-root .ckw-msgr-search-in:focus-visible{outline:none}
267
- .ckw-msgr-search-in::placeholder{color:var(--ckw-fg2)}
268
- .ckw-msgr-search:focus-within{box-shadow:0 0 0 2px color-mix(in srgb,var(--ckw-accent) 45%,transparent)}
269
- .ckw-msgr-art{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:10px 8px;border:0;border-radius:10px;background:transparent;font-size:14px}
317
+ .ckw-msgr-search-in::placeholder{color:var(--ckw-fg3)}
318
+ .ckw-msgr-search-in::-webkit-search-cancel-button{display:none}
319
+ .ckw-msgr-art{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:10px 8px;border:0;border-radius:10px;background:transparent;font-size:14px;transition:background-color .12s linear}
270
320
  .ckw-msgr-art:hover{background:var(--ckw-bg2)}
271
321
  .ckw-msgr-art-t{flex:1;min-width:0}
272
- .ckw-msgr-art .ckw-icon{color:var(--ckw-accent)}
322
+ .ckw-msgr-art .ckw-icon{color:var(--ckw-accent);transition:transform .25s cubic-bezier(.32,.72,0,1)}
323
+ .ckw-msgr-art:hover .ckw-icon{transform:translateX(2px)}
273
324
  .ckw-msgr-skel{height:40px;margin:4px 0 0}
274
- .ckw-msgr-group{display:flex;flex-direction:column;gap:6px}
275
- .ckw-msgr-group-h{margin:4px 2px 0;font-size:12px;font-weight:600;color:var(--ckw-fg3)}
325
+ /* Help */
326
+ .ckw-msgr-help-h{margin:6px 0 2px;text-align:center;font-size:16px;font-weight:700;letter-spacing:-.01em}
327
+ .ckw-msgr-hlist{display:flex;flex-direction:column;margin:0 -8px}
328
+ .ckw-msgr-hrow{display:flex;align-items:center;gap:12px;width:100%;padding:12px;border:0;border-radius:14px;background:transparent;text-align:left;transition:background-color .12s linear}
329
+ .ckw-msgr-hrow+.ckw-msgr-hrow{box-shadow:0 -1px 0 var(--ckw-line)}
330
+ .ckw-msgr-hrow:hover,.ckw-msgr-hrow:hover+.ckw-msgr-hrow{box-shadow:none}
331
+ .ckw-msgr-hrow:hover{background:var(--ckw-bg2)}
332
+ .ckw-msgr-hrow-main{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
333
+ .ckw-msgr-hrow-main b{font-size:14.5px;font-weight:650}
334
+ .ckw-msgr-hrow-sub{font-size:13px;color:var(--ckw-fg2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}
335
+ .ckw-msgr-hrow-meta{font-size:12px;color:var(--ckw-fg3)}
336
+ .ckw-msgr-hrow .ckw-icon{color:var(--ckw-fg3);transition:transform .25s cubic-bezier(.32,.72,0,1),color .12s linear}
337
+ .ckw-msgr-hrow:hover .ckw-icon{color:var(--ckw-fg);transform:translateX(2px)}
276
338
  .ckw-msgr-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:28px 8px;text-align:center;color:var(--ckw-fg2)}
277
339
  .ckw-msgr-empty p{margin:0}
278
- .ckw-msgr-doc{display:flex;flex-direction:column;gap:6px}
340
+ .ckw-msgr-doc{display:flex;flex-direction:column;gap:6px;padding-top:4px}
279
341
  .ckw-msgr-doc-t{margin:0;font-size:20px;font-weight:700;letter-spacing:-.015em;line-height:1.3}
280
342
  .ckw-msgr-doc-c{margin:0;font-size:12px;color:var(--ckw-fg3)}
281
343
  .ckw-msgr-doc-b{margin-top:8px;font-size:14px;line-height:1.6;overflow-wrap:anywhere}
@@ -291,35 +353,207 @@ button.ckw-msgr-card:hover{box-shadow:var(--ckw-raise),0 0 0 1px color-mix(in sr
291
353
  .ckw-msgr-rate{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:8px;padding:12px;border-radius:12px;background:var(--ckw-bg2);font-size:13px;color:var(--ckw-fg2)}
292
354
  .ckw-msgr-rate-b{display:flex;gap:6px}
293
355
  .ckw-msgr-ask{margin-top:6px;width:100%;height:40px;border-radius:12px}
356
+ /* Chat */
294
357
  .ckw-msgr-cite{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:7px 10px;border:1px solid var(--ckw-line);border-radius:12px;background:var(--ckw-bg);font-size:13px;text-align:left}
295
358
  .ckw-msgr-cite .ckw-icon{color:var(--ckw-accent)}
296
359
  .ckw-msgr-cite span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
297
- .ckw-msgr-tabs{display:flex;border-top:1px solid var(--ckw-line);background:var(--ckw-bg);padding:2px 8px}
298
- .ckw-msgr-tab{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0 10px;border:0;background:none;color:var(--ckw-fg3);font-size:12px;font-weight:600;transition:color .1s linear}
299
- .ckw-msgr-tab:hover{color:var(--ckw-fg2)}
300
- .ckw-msgr-tab[aria-current=page]{color:var(--ckw-accent)}
301
- .ckw-msgr-tab .ckw-icon{width:20px;height:20px}
302
- .ckw-msgr-count-tab{top:4px;right:calc(50% - 24px)}
303
- .ckw-msgs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
304
- .ckw-msg{display:flex;flex-direction:column;align-items:flex-start;gap:4px;max-width:82%}
305
- .ckw-msg[data-from=me]{align-self:flex-end;align-items:flex-end}
306
- .ckw-bubble{padding:9px 14px;border-radius:18px 18px 18px 6px;background:var(--ckw-bg3);white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.45;text-wrap:pretty}
307
- .ckw-msg[data-from=me] .ckw-bubble{background:var(--ckw-accent);color:var(--ckw-accent-ink);border-radius:18px 18px 6px 18px}
360
+ .ckw-msgs{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
361
+ .ckw-msg{display:flex;flex-direction:column;align-items:flex-start;gap:4px;max-width:82%;transform-origin:bottom left}
362
+ .ckw-msg[data-from=me]{align-self:flex-end;align-items:flex-end;transform-origin:bottom right}
363
+ .ckw-msg[data-new]{animation:ckw-bub .4s cubic-bezier(.32,.72,0,1)}
364
+ @keyframes ckw-bub{from{opacity:0;transform:translateY(10px) scale(.92)}}
365
+ .ckw-bubble{padding:10px 14px;border-radius:var(--ckw-r-bubble) var(--ckw-r-bubble) var(--ckw-r-bubble) var(--ckw-r-tail);background:var(--ckw-bg3);white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.45;text-wrap:pretty}
366
+ .ckw-msg[data-from=me] .ckw-bubble{background:var(--ckw-accent);color:var(--ckw-accent-ink);border-radius:var(--ckw-r-bubble) var(--ckw-r-bubble) var(--ckw-r-tail) var(--ckw-r-bubble)}
308
367
  .ckw-msg[aria-busy=true] .ckw-bubble{opacity:.7}
309
368
  .ckw-msg-meta{font-size:11px;color:var(--ckw-fg3);font-variant-numeric:tabular-nums;padding:0 6px}
369
+ .ckw-msgr-sugg{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:auto;padding-top:12px}
370
+ .ckw-msgr-sugg-b{max-width:100%;padding:9px 14px;border:0;border-radius:var(--ckw-r-card);background:var(--ckw-bg2);font-size:13.5px;text-align:left;color:var(--ckw-fg);transition:background-color .12s linear,color .12s linear,transform .2s cubic-bezier(.32,.72,0,1)}
371
+ .ckw-msgr-sugg-b:hover{background:var(--ckw-bg3);color:var(--ckw-accent)}
372
+ .ckw-msgr-sugg-b:active{transform:scale(.96)}
373
+ .ckw-msgr-enter .ckw-msgr-sugg-b{animation:ckw-view .34s cubic-bezier(.32,.72,0,1) backwards}
374
+ .ckw-msgr-enter .ckw-msgr-sugg-b:nth-child(2){animation-delay:.12s}
375
+ .ckw-msgr-enter .ckw-msgr-sugg-b:nth-child(3){animation-delay:.18s}
310
376
  .ckw-msgr-note{margin:4px 0 0;text-align:center}
311
- .ckw-msgr-compose{display:flex;flex-direction:column;gap:8px;padding:10px 12px 12px;background:var(--ckw-bg)}
312
- .ckw-msgr-compose .ckw-input{border:0;border-radius:12px;background:var(--ckw-bg2);min-height:38px;padding:8px 14px}
313
- .ckw-msgr-row{display:flex;gap:6px;align-items:flex-end;padding:5px 5px 5px 16px;border:1px solid var(--ckw-line);border-radius:22px;background:var(--ckw-bg);transition:border-color .1s linear}
314
- .ckw-msgr-row:focus-within{border-color:var(--ckw-accent)}
315
- .ckw-msgr-input{flex:1;min-height:32px;max-height:120px;padding:6px 0;border:0;border-radius:0;background:transparent;resize:none;field-sizing:content}
377
+ .ckw-msgr-compose{display:flex;flex-direction:column;gap:8px;padding:4px 14px 14px;background:var(--ckw-bg);flex:none}
378
+ .ckw-msgr-compose .ckw-input{border:0;border-radius:var(--ckw-r-field);background:var(--ckw-bg2);min-height:40px;padding:8px 16px}
379
+ .ckw-root .ckw-msgr-compose .ckw-input:focus-visible{outline:none;background:var(--ckw-bg3)}
380
+ .ckw-msgr-box{display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:12px 8px 8px 16px;border:0;border-radius:calc(var(--ckw-r-card) + 4px);background:var(--ckw-bg2);box-shadow:0 0 0 1px color-mix(in srgb,var(--ckw-line) 70%,transparent);cursor:text;transition:background-color .15s linear,box-shadow .15s linear}
381
+ .ckw-msgr-box:focus-within{background:var(--ckw-bg);box-shadow:0 0 0 1px var(--ckw-line),0 6px 18px rgba(16,18,24,.07)}
382
+ .ckw-msgr-tools{display:flex;align-items:center;gap:2px;margin-left:-8px}
383
+ .ckw-msgr-sp{flex:1}
384
+ .ckw-msgr-input{flex:1;min-width:0;min-height:24px;max-height:140px;padding:2px 8px 2px 0;border:0;border-radius:0;background:transparent;resize:none;field-sizing:content;font-size:14.5px}
316
385
  .ckw-root .ckw-msgr-input:focus-visible{outline:none}
317
- .ckw-msgr-send{width:32px;height:32px;padding:0;flex:none;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:var(--ckw-accent);color:var(--ckw-accent-ink);transition:opacity .1s linear}
386
+ .ckw-msgr-send{width:32px;height:32px;padding:0;flex:none;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:var(--ckw-accent);color:var(--ckw-accent-ink);transition:background-color .15s linear,color .15s linear,transform .25s cubic-bezier(.34,1.56,.64,1)}
387
+ .ckw-msgr-send:not(:disabled):hover{transform:scale(1.08)}
388
+ .ckw-msgr-send:not(:disabled):active{transform:scale(.9)}
318
389
  .ckw-msgr-send:disabled{background:var(--ckw-bg3);color:var(--ckw-fg3);cursor:default}
390
+ /* Files: the paperclip in the field, picked files above it, sent ones in the bubbles, dropping onto the panel */
391
+ .ckw-msgr-compose{position:relative}
392
+ .ckw-msgr-clip{width:32px;height:32px;padding:0;flex:none;display:flex;align-items:center;justify-content:center;border:0;border-radius:calc(var(--ckw-r-field) - 4px);background:transparent;color:var(--ckw-fg3);transition:color .12s linear,background-color .12s linear,transform .2s cubic-bezier(.32,.72,0,1)}
393
+ .ckw-msgr-clip:hover,.ckw-msgr-clip[aria-expanded=true]{color:var(--ckw-fg);background:color-mix(in srgb,var(--ckw-fg) 7%,transparent)}
394
+ .ckw-msgr-clip:active{transform:scale(.9)}
395
+
396
+ .ckw-msgr-amenu{top:auto;bottom:calc(100% - 4px);right:14px;transform-origin:bottom right}
397
+ .ckw-msgr-files{display:flex;flex-wrap:wrap;gap:10px;padding:6px 2px 0}
398
+ .ckw-msgr-file{position:relative;width:56px;height:56px;border-radius:calc(var(--ckw-r-card) - 4px);background:var(--ckw-bg2);box-shadow:0 0 0 1px var(--ckw-line)}
399
+ .ckw-msgr-file img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
400
+ .ckw-msgr-file[aria-busy=true] img,.ckw-msgr-file[aria-busy=true] .ckw-msgr-file-doc{opacity:.45}
401
+ .ckw-msgr-file[aria-busy=true]::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border:2px solid var(--ckw-fg2);border-right-color:transparent;border-radius:50%;animation:ckw-spin .8s linear infinite}
402
+ @keyframes ckw-spin{to{transform:rotate(360deg)}}
403
+ .ckw-msgr-file-doc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:100%;height:100%;padding:4px;color:var(--ckw-fg2);font-size:10px;line-height:1.2}
404
+ .ckw-msgr-file-doc span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
405
+ .ckw-msgr-file-x{position:absolute;top:-7px;right:-7px;width:20px;height:20px;padding:0;display:flex;align-items:center;justify-content:center;border:2px solid var(--ckw-bg);border-radius:50%;background:var(--ckw-fg);color:var(--ckw-bg)}
406
+ .ckw-msgr-file-x .ckw-icon{width:10px;height:10px}
407
+ .ckw-msg-files{display:flex;flex-wrap:wrap;gap:6px;max-width:100%}
408
+ .ckw-msg[data-from=me] .ckw-msg-files{justify-content:flex-end}
409
+ .ckw-msg-img{display:block;overflow:hidden;border-radius:var(--ckw-r-bubble);background:var(--ckw-bg3);box-shadow:0 0 0 1px var(--ckw-line)}
410
+ .ckw-msg-img img{display:block;max-width:220px;max-height:200px;min-width:48px;min-height:48px;object-fit:cover}
411
+ .ckw-msg-files a.ckw-msgr-cite{color:var(--ckw-fg);text-decoration:none}
412
+ .ckw-msgr[data-drop]::after{content:"Drop to attach";position:absolute;inset:8px;z-index:5;display:flex;align-items:center;justify-content:center;border:2px dashed var(--ckw-accent);border-radius:calc(var(--ckw-r-panel) - 6px);background:color-mix(in srgb,var(--ckw-bg) 90%,transparent);color:var(--ckw-fg);font-size:15px;font-weight:600;pointer-events:none}
413
+ /* Powered by */
414
+ .ckw-msgr-powered{flex:none;display:block;padding:2px 0 10px;text-align:center;font-size:11.5px;color:var(--ckw-fg3);text-decoration:none;background:var(--ckw-bg)}
415
+ .ckw-msgr-powered b{font-weight:650;color:var(--ckw-fg2)}
416
+ .ckw-msgr-powered:hover b{color:var(--ckw-fg)}
417
+ .ckw-msgr-compose:has(+.ckw-msgr-powered){padding-bottom:8px}
319
418
  .ckw-msgr-error{margin:0;font-size:12px;color:var(--ckw-danger)}
320
419
  .ckw-msgr .ckw-input[aria-invalid=true]{box-shadow:0 0 0 1px var(--ckw-danger)}
321
- @media (max-width:520px){.ckw-msgr{height:100dvh;bottom:0;border-radius:0}.ckw-msgr-preview{bottom:80px}}
322
- @media (prefers-reduced-motion:reduce){.ckw-msgr,.ckw-msgr-preview,.ckw-msgr-fab .ckw-turn{animation:none}.ckw-msgr-fab{transition:none}}
420
+ /* Bar middle, tab bar, Home's glow and "Ask a question" (Featurebase-like) */
421
+ .ckw-msgr-mid{display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;max-width:62%;flex:none}
422
+ .ckw-msgr-mid b{font-size:15px;font-weight:650;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
423
+ .ckw-msgr-mid-t{display:flex;flex-direction:column;gap:1px;min-width:0;line-height:1.25}
424
+ .ckw-msgr-mid-t .ckw-msgr-online{font-size:11.5px;white-space:nowrap}
425
+ .ckw-msgr-mid-t .ckw-msgr-online::before{width:6px;height:6px;box-shadow:none}
426
+ .ckw-msgr-tabs{flex:none;display:flex;padding:6px 10px 4px;background:var(--ckw-bg);box-shadow:0 -1px 0 color-mix(in srgb,var(--ckw-line) 60%,transparent)}
427
+ .ckw-msgr-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0 4px;border:0;border-radius:12px;background:none;color:var(--ckw-fg3);font-size:12px;font-weight:550;transition:color .15s linear}
428
+ .ckw-msgr-tab:hover{color:var(--ckw-fg2)}
429
+ .ckw-msgr-tab[aria-current=page]{color:var(--ckw-fg)}
430
+ .ckw-msgr-tab-ic{position:relative;display:block;width:22px;height:22px;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
431
+ .ckw-msgr-tab:active .ckw-msgr-tab-ic{transform:scale(.88)}
432
+ .ckw-msgr-tab-ic>.ckw-icon{position:absolute;inset:0;transition:opacity .15s linear,transform .3s cubic-bezier(.34,1.56,.64,1)}
433
+ .ckw-msgr-tab-ic>.ckw-icon+.ckw-icon{opacity:0;transform:scale(.75)}
434
+ .ckw-msgr-tab[aria-current=page] .ckw-msgr-tab-ic>.ckw-icon:first-child{opacity:0}
435
+ .ckw-msgr-tab[aria-current=page] .ckw-msgr-tab-ic>.ckw-icon+.ckw-icon{opacity:1;transform:none}
436
+ .ckw-cut{stroke:var(--ckw-bg)}
437
+ .ckw-root:not([data-header=color]) .ckw-msgr[data-view=home] :is(.ckw-msgr-bar,.ckw-msgr-body){background:transparent}
438
+ .ckw-msgr-askq{display:flex;align-items:center;gap:8px;height:52px;margin:6px 0 4px;padding:0 7px 0 18px;border-radius:var(--ckw-r-field);background:var(--ckw-bg2);box-shadow:0 0 0 1px color-mix(in srgb,var(--ckw-line) 70%,transparent);transition:background-color .15s linear,box-shadow .15s linear}
439
+ .ckw-msgr-askq:focus-within{background:var(--ckw-bg);box-shadow:0 0 0 1px var(--ckw-line),0 6px 18px rgba(16,18,24,.07)}
440
+ .ckw-msgr-askq-in{flex:1;min-width:0;border:0;background:transparent;outline:none;font-size:15px;color:var(--ckw-fg)}
441
+ .ckw-msgr-askq-in::placeholder{color:var(--ckw-fg3)}
442
+ .ckw-root .ckw-msgr-askq-in:focus-visible{outline:none}
443
+ .ckw-msgr-askq .ckw-msgr-send{width:38px;height:38px}
444
+ .ckw-root[data-header=color] .ckw-msgr-askq{background:var(--ckw-card);box-shadow:var(--ckw-raise)}
445
+ /* Home in the accent color (look: header "color"): the bar and the top in the accent, raised cards over its edge */
446
+ .ckw-root[data-header=color] .ckw-msgr[data-view=home] .ckw-msgr-bar{background:var(--ckw-accent);color:var(--ckw-accent-ink)}
447
+ .ckw-root[data-header=color] .ckw-msgr[data-view=home] .ckw-msgr-ib{color:color-mix(in srgb,var(--ckw-accent-ink) 80%,transparent)}
448
+ .ckw-root[data-header=color] .ckw-msgr[data-view=home] .ckw-msgr-ib:hover,.ckw-root[data-header=color] .ckw-msgr[data-view=home] .ckw-msgr-ib[aria-expanded=true]{background:color-mix(in srgb,var(--ckw-accent-ink) 14%,transparent);color:var(--ckw-accent-ink)}
449
+ .ckw-root[data-header=color] .ckw-msgr[data-view=home] .ckw-msgr-body,.ckw-root[data-header=color] .ckw-msgr[data-view=home] .ckw-msgr-powered{background:var(--ckw-bg2)}
450
+ .ckw-root[data-header=color] .ckw-msgr[data-view=home] .ckw-msgr-body{scrollbar-width:none}
451
+ .ckw-root[data-header=color] .ckw-msgr-hero{margin:-4px -16px 0;padding:14px 20px 64px;background:var(--ckw-accent);color:var(--ckw-accent-ink)}
452
+ .ckw-root[data-header=color] .ckw-msgr-hero .ckw-msgr-brand,.ckw-root[data-header=color] .ckw-msgr-hero .ckw-msgr-online{color:color-mix(in srgb,var(--ckw-accent-ink) 82%,transparent)}
453
+ .ckw-root[data-header=color] .ckw-msgr-hero .ckw-msgr-av{background:var(--ckw-accent-ink);color:var(--ckw-accent)}
454
+ .ckw-root[data-header=color] .ckw-msgr-hero+*{margin-top:-58px}
455
+ .ckw-root[data-header=color] .ckw-msgr-card{background:var(--ckw-card);box-shadow:var(--ckw-raise)}
456
+ .ckw-root[data-header=color] button.ckw-msgr-card:hover{background:var(--ckw-card);transform:translateY(-1px)}
457
+ .ckw-root[data-header=color] .ckw-msgr-card-col .ckw-msgr-search{background:var(--ckw-bg2)}
458
+ .ckw-root[data-header=color] .ckw-msgr-card .ckw-msgr-art:hover{background:var(--ckw-bg2)}
459
+ /* Where it sits: a corner, the middle of the top or bottom edge, or the middle of a side; panel and cards open from the launcher */
460
+ .ckw-msgr-fab[data-pos$=left],.ckw-msgr[data-pos$=left],.ckw-msgr-preview[data-pos$=left],.ckw-msgr-teaser[data-pos$=left]{left:20px;right:auto}
461
+ .ckw-msgr-fab[data-pos$=right],.ckw-msgr[data-pos$=right],.ckw-msgr-preview[data-pos$=right],.ckw-msgr-teaser[data-pos$=right]{right:20px;left:auto}
462
+ .ckw-msgr-fab[data-pos$=center],.ckw-msgr[data-pos$=center],.ckw-msgr-preview[data-pos$=center],.ckw-msgr-teaser[data-pos$=center]{left:50%;right:auto;translate:-50% 0}
463
+ .ckw-msgr-fab[data-pos^=top]{top:20px;bottom:auto}
464
+ .ckw-msgr[data-pos^=top],.ckw-msgr-preview[data-pos^=top],.ckw-msgr-teaser[data-pos^=top]{top:92px;bottom:auto}
465
+ .ckw-msgr-fab[data-pos^=middle],.ckw-msgr[data-pos^=middle],.ckw-msgr-preview[data-pos^=middle],.ckw-msgr-teaser[data-pos^=middle]{top:50%;bottom:auto;translate:0 -50%}
466
+ .ckw-msgr[data-pos=middle-left],.ckw-msgr-preview[data-pos=middle-left],.ckw-msgr-teaser[data-pos=middle-left]{left:92px}
467
+ .ckw-msgr[data-pos=middle-right],.ckw-msgr-preview[data-pos=middle-right],.ckw-msgr-teaser[data-pos=middle-right]{right:92px}
468
+ .ckw-msgr[data-pos^=middle]{height:min(680px,calc(100vh - 40px))}
469
+ .ckw-msgr[data-pos=top-right],.ckw-msgr-preview[data-pos=top-right],.ckw-msgr-teaser[data-pos=top-right]{transform-origin:top right}
470
+ .ckw-msgr[data-pos=top-left],.ckw-msgr-preview[data-pos=top-left],.ckw-msgr-teaser[data-pos=top-left]{transform-origin:top left}
471
+ .ckw-msgr[data-pos=top-center],.ckw-msgr-preview[data-pos=top-center],.ckw-msgr-teaser[data-pos=top-center]{transform-origin:top center}
472
+ .ckw-msgr[data-pos=bottom-center],.ckw-msgr-preview[data-pos=bottom-center],.ckw-msgr-teaser[data-pos=bottom-center]{transform-origin:bottom center}
473
+ .ckw-msgr[data-pos=middle-left],.ckw-msgr-preview[data-pos=middle-left],.ckw-msgr-teaser[data-pos=middle-left]{transform-origin:center left}
474
+ .ckw-msgr[data-pos=middle-right],.ckw-msgr-preview[data-pos=middle-right],.ckw-msgr-teaser[data-pos=middle-right]{transform-origin:center right}
475
+ @media (max-width:520px){.ckw-root:not([data-contained]) .ckw-msgr{top:0;translate:none}.ckw-msgr-fab[data-pos$=left]{left:14px}.ckw-msgr-fab[data-pos$=right]{right:14px}.ckw-msgr-fab[data-pos^=top]{top:14px}.ckw-msgr-preview[data-pos^=top],.ckw-msgr-teaser[data-pos^=top]{top:84px}.ckw-msgr-preview[data-pos^=middle],.ckw-msgr-teaser[data-pos^=middle]{top:auto;bottom:20px;left:16px;right:16px;width:auto;translate:none}}
476
+ /* Inside MRRocket's preview: placed in its frame, not the page */
477
+ .ckw-root[data-contained]{position:absolute;inset:0;pointer-events:none;overflow:hidden}
478
+ .ckw-root[data-contained]>*{position:absolute;pointer-events:auto}
479
+ .ckw-root[data-contained] .ckw-msgr{height:min(680px,calc(100% - 112px));max-width:calc(100% - 40px)}
480
+ .ckw-root[data-contained] .ckw-msgr[data-wide]{height:calc(100% - 112px)}
481
+ .ckw-root[data-contained] .ckw-msgr[data-pos^=middle]{height:min(680px,calc(100% - 40px));max-width:calc(100% - 112px)}
482
+ .ckw-root[data-contained] .ckw-msgr-preview[data-pos^=middle],.ckw-root[data-contained] .ckw-msgr-teaser[data-pos^=middle]{max-width:calc(100% - 112px)}
483
+ @media (max-width:520px){.ckw-root:not([data-contained]) .ckw-msgr{width:100%;height:100dvh;bottom:0;border-radius:0;transform-origin:bottom center}.ckw-root:not([data-contained]) .ckw-msgr-x{display:flex}.ckw-msgr-preview,.ckw-msgr-teaser{bottom:84px}}
484
+ @media (prefers-reduced-motion:reduce){.ckw-msgr,.ckw-msgr[data-out],.ckw-msgr-preview,.ckw-msgr-teaser,.ckw-msgr-menu,.ckw-msgr-count,.ckw-msg[data-new],.ckw-msgr-enter>*,.ckw-msgr-enter .ckw-msgr-sugg-b{animation:none}.ckw-msgr-fab,.ckw-msgr-fab-i,.ckw-msgr-tab-ic,.ckw-msgr-tab-ic>.ckw-icon,.ckw-msgr{transition:none}}
485
+ /* The messenger in HeroUI v3's look (heroui.com, its free components): a soft gray ground, white surfaces with a hairline
486
+ shadow, white fields, pill buttons and a pill tab switch, a 2px ring in the accent on focus. Its tokens (--hu-*) map onto
487
+ the widget's own, inside the messenger only, so the other widgets keep theirs. */
488
+ .ckw-root{--hu-bg:#fff;--hu-surface:#f4f4f5;--hu-default:#ececee;--hu-default-hover:#e4e4e7;--hu-segment:#fff;--hu-muted:#71717a;--hu-fg:#18181b;--hu-border:#e4e4e7;--hu-shadow:0 0 0 0 transparent;--hu-lift:0 1px 2px rgba(0,0,0,.08),0 0 1px rgba(0,0,0,.1);--hu-overlay:0 0 0 1px rgba(0,0,0,.05),0 2px 8px rgba(0,0,0,.05),0 18px 40px rgba(0,0,0,.1)}
489
+ .ckw-root[data-theme=dark]{--hu-bg:#111113;--hu-surface:#1c1c1f;--hu-default:#26262a;--hu-default-hover:#2e2e33;--hu-segment:#3a3a40;--hu-muted:#a1a1aa;--hu-fg:#fafafa;--hu-border:#27272a;--hu-shadow:0 0 0 0 transparent;--hu-lift:0 0 0 1px rgba(255,255,255,.06);--hu-overlay:0 0 0 1px rgba(255,255,255,.08),0 18px 40px rgba(0,0,0,.55)}
490
+ @media (prefers-color-scheme:dark){.ckw-root[data-theme=auto]{--hu-bg:#111113;--hu-surface:#1c1c1f;--hu-default:#26262a;--hu-default-hover:#2e2e33;--hu-segment:#3a3a40;--hu-muted:#a1a1aa;--hu-fg:#fafafa;--hu-border:#27272a;--hu-shadow:0 0 0 0 transparent;--hu-lift:0 0 0 1px rgba(255,255,255,.06);--hu-overlay:0 0 0 1px rgba(255,255,255,.08),0 18px 40px rgba(0,0,0,.55)}}
491
+ .ckw-msgr,.ckw-msgr-preview,.ckw-msgr-teaser{--ckw-bg:var(--hu-bg);--ckw-bg2:var(--hu-surface);--ckw-bg3:var(--hu-default);--ckw-card:var(--hu-surface);--ckw-fg:var(--hu-fg);--ckw-fg2:var(--hu-muted);--ckw-fg3:var(--hu-muted);--ckw-line:var(--hu-border);--ckw-soft:var(--hu-overlay);--ckw-raise:var(--hu-shadow)}
492
+ .ckw-root .ckw-msgr-preview-card,.ckw-root .ckw-msgr-teaser{background:var(--hu-surface)}
493
+ .ckw-root .ckw-msgr-card,.ckw-root .ckw-msgr-sugg-b,.ckw-root .ckw-msgr-rate,.ckw-root .ckw-msgr-cite{background:var(--hu-surface);box-shadow:var(--hu-shadow);border:0}
494
+ .ckw-root button.ckw-msgr-card:hover{background:var(--hu-default)}
495
+ .ckw-root .ckw-msgr-card-col{padding:6px}
496
+ .ckw-root .ckw-msgr-card .ckw-msgr-art:hover,.ckw-root .ckw-msgr-hrow:hover{background:var(--hu-default)}
497
+ .ckw-root .ckw-msgr-hrow+.ckw-msgr-hrow{box-shadow:0 -1px 0 var(--hu-border)}
498
+ .ckw-root .ckw-msgr-search,.ckw-root .ckw-msgr-askq,.ckw-root .ckw-msgr-box,.ckw-root .ckw-msgr-compose .ckw-input{background:var(--hu-surface);border:0;box-shadow:var(--hu-shadow)}
499
+ .ckw-root .ckw-msgr-search:focus-within,.ckw-root .ckw-msgr-askq:focus-within,.ckw-root .ckw-msgr-box:focus-within,.ckw-root .ckw-msgr-compose .ckw-input:focus-visible{background:var(--hu-surface);box-shadow:0 0 0 1.5px color-mix(in srgb,var(--ckw-accent) 55%,transparent),0 0 0 5px color-mix(in srgb,var(--ckw-accent) 12%,transparent);color:var(--ckw-fg3)}
500
+ .ckw-root .ckw-msgr-askq{height:48px;border-radius:24px}
501
+ .ckw-root .ckw-msgr-box{border-radius:20px}
502
+ .ckw-root .ckw-msgr-send{border-radius:999px}
503
+ .ckw-root .ckw-msgr-send:disabled{background:var(--hu-default);color:var(--hu-muted)}
504
+ .ckw-root .ckw-msgr-send:not(:disabled):hover{transform:none;filter:brightness(1.08)}
505
+ .ckw-root .ckw-msgr-send:not(:disabled):active{transform:scale(.97)}
506
+ .ckw-root .ckw-bubble{background:var(--hu-surface);box-shadow:var(--hu-shadow)}
507
+ .ckw-root .ckw-msg[data-from=me] .ckw-bubble{box-shadow:none}
508
+ .ckw-root .ckw-msgr-av{background:color-mix(in srgb,var(--ckw-accent) 16%,var(--hu-surface));color:var(--ckw-accent);font-weight:600}
509
+ .ckw-root .ckw-msgr-ib:hover,.ckw-root .ckw-msgr-ib[aria-expanded=true]{background:var(--hu-default)}
510
+ .ckw-root .ckw-msgr-menu{background:var(--hu-surface);box-shadow:var(--hu-overlay);border-radius:16px}
511
+ .ckw-root .ckw-msgr-menu-i{border-radius:10px}
512
+ .ckw-root .ckw-msgr-menu-i:hover,.ckw-root .ckw-msgr-menu-i:focus-visible{background:var(--hu-default)}
513
+ .ckw-root .ckw-msgr .ckw-btn,.ckw-root .ckw-msgr-teaser-b{height:36px;padding:0 16px;border:0;border-radius:999px;background:var(--hu-default);color:var(--hu-fg);font-size:14px;font-weight:500;box-shadow:none;transition:transform .25s cubic-bezier(.32,.72,0,1),background-color .1s linear}
514
+ .ckw-root .ckw-msgr .ckw-btn:hover,.ckw-root .ckw-msgr-teaser-b:hover{background:var(--hu-default-hover);filter:none}
515
+ .ckw-root .ckw-msgr .ckw-btn:active,.ckw-root .ckw-msgr-teaser-b:active{transform:scale(.97)}
516
+ .ckw-root .ckw-msgr .ckw-btn-primary,.ckw-root .ckw-msgr-teaser-b[data-main]{background:var(--ckw-accent);color:var(--ckw-accent-ink)}
517
+ .ckw-root .ckw-msgr .ckw-btn-primary:hover,.ckw-root .ckw-msgr-teaser-b[data-main]:hover{background:var(--ckw-accent);filter:brightness(1.08)}
518
+ .ckw-root .ckw-msgr-sugg-b{border-radius:999px}
519
+ .ckw-root .ckw-msgr-ask{height:40px;border-radius:999px}
520
+ /* Home like Featurebase: the product's icon top left, "Hi, Lukas \u{1F44B}" over the greeting in gray, a silk of the accent
521
+ with drifting dots behind the top right (.ckw-msgr-sky, also drawn by MRRocket's phone preview) */
522
+ .ckw-msgr-logo{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;margin-left:6px}
523
+ .ckw-msgr-logo img{width:28px;height:28px;border-radius:8px;object-fit:contain}
524
+ .ckw-root .ckw-msgr[data-view=home] .ckw-msgr-bar{padding-top:16px}
525
+ .ckw-root .ckw-msgr[data-view=home] .ckw-msgr-body{position:relative;z-index:1;gap:10px;padding-top:0}
526
+ .ckw-root .ckw-msgr-hero.ckw-msgr-hello{display:flex;flex-direction:column;gap:1px;margin:22px 0 10px;padding:0 4px;font-size:25px;font-weight:600;letter-spacing:-.028em;line-height:1.2;color:var(--hu-fg)}
527
+ .ckw-msgr-hello-sub{color:var(--hu-muted);font-weight:500}
528
+ .ckw-msgr-wave{display:inline-block;transform-origin:70% 75%;animation:ckw-wave 2.4s ease-in-out .6s 1 both}
529
+ @keyframes ckw-wave{0%,60%,100%{transform:none}10%,30%{transform:rotate(14deg)}20%{transform:rotate(-8deg)}40%{transform:rotate(-4deg)}50%{transform:rotate(10deg)}}
530
+ .ckw-root .ckw-msgr[data-view=home] .ckw-msgr-askq{margin:0 0 6px}
531
+ .ckw-msgr-sky{position:absolute;z-index:0;top:0;left:0;right:0;height:250px;pointer-events:none;overflow:hidden;border-radius:inherit;-webkit-mask-image:linear-gradient(to bottom,#000 25%,transparent 92%);mask-image:linear-gradient(to bottom,#000 25%,transparent 92%)}
532
+ .ckw-msgr-sky::before{content:"";position:absolute;top:-45%;right:-25%;width:115%;height:135%;background:radial-gradient(36% 40% at 62% 46%,color-mix(in srgb,var(--ckw-accent) 92%,#fff) 0%,transparent 70%),radial-gradient(32% 36% at 86% 24%,color-mix(in srgb,var(--ckw-glow2,var(--ckw-accent)) 70%,#fff) 0%,transparent 72%),radial-gradient(46% 30% at 36% 64%,color-mix(in srgb,var(--ckw-glow3,var(--ckw-glow2,var(--ckw-accent))) 50%,#fff) 0%,transparent 70%);filter:blur(20px);opacity:.75;animation:ckw-silk 16s cubic-bezier(.45,0,.55,1) infinite alternate}
533
+ @keyframes ckw-silk{to{transform:translate(-7%,5%) rotate(8deg) scale(1.08)}}
534
+ .ckw-msgr-sky::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,color-mix(in srgb,var(--ckw-accent) 85%,#fff) .9px,transparent 1.4px);background-size:5px 5px;-webkit-mask-image:linear-gradient(110deg,transparent 0%,#000 18%,transparent 34%,#000 52%,transparent 70%),radial-gradient(70% 85% at 88% 12%,#000 15%,transparent 75%);-webkit-mask-size:220% 100%,100% 100%;-webkit-mask-repeat:repeat-x,no-repeat;-webkit-mask-composite:source-in;mask-image:linear-gradient(110deg,transparent 0%,#000 18%,transparent 34%,#000 52%,transparent 70%),radial-gradient(70% 85% at 88% 12%,#000 15%,transparent 75%);mask-size:220% 100%,100% 100%;mask-repeat:repeat-x,no-repeat;mask-composite:intersect;opacity:.6;animation:ckw-dots 11s linear infinite}
535
+ @keyframes ckw-dots{from{-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0}to{-webkit-mask-position:-220% 0,0 0;mask-position:-220% 0,0 0}}
536
+ .ckw-root[data-theme=dark] .ckw-msgr-sky::before{opacity:.4}
537
+ .ckw-root[data-theme=dark] .ckw-msgr-sky::after{opacity:.4}
538
+ @media (prefers-color-scheme:dark){.ckw-root[data-theme=auto] .ckw-msgr-sky::before{opacity:.4}.ckw-root[data-theme=auto] .ckw-msgr-sky::after{opacity:.4}}
539
+ .ckw-root[data-header=color] .ckw-msgr-sky{display:none}
540
+ @media (prefers-reduced-motion:reduce){.ckw-msgr-sky::before,.ckw-msgr-sky::after,.ckw-msgr-wave{animation:none}}
541
+ /* Home's latest message: one quiet row, the small mark, the words, who and when */
542
+ .ckw-root .ckw-msgr-recent{padding:10px 12px;gap:0}
543
+ .ckw-root .ckw-msgr-recent .ckw-msgr-recent-row{gap:10px}
544
+ .ckw-root .ckw-msgr-recent .ckw-msgr-card-main{gap:1px}
545
+ .ckw-root .ckw-msgr-recent-text{font-size:13.5px;font-weight:500}
546
+ .ckw-root .ckw-msgr-recent .ckw-msgr-card-meta{font-size:11.5px}
547
+ /* The tab switch: HeroUI's Tabs, a gray pill with the current tab on a raised white one */
548
+ .ckw-root .ckw-msgr-tabs{position:relative;z-index:1;margin:2px 12px 8px;padding:4px;gap:0;border-radius:999px;background:var(--hu-surface);box-shadow:none}
549
+ .ckw-root .ckw-msgr-tab{flex-direction:row;justify-content:center;gap:7px;height:36px;padding:0 10px;border-radius:999px;color:var(--hu-muted);font-size:13.5px;font-weight:500;transition:color .15s ease,background-color .15s ease,box-shadow .15s ease,opacity .15s ease}
550
+ .ckw-root .ckw-msgr-tab:not([aria-current=page]):hover{color:var(--hu-muted);opacity:.7}
551
+ .ckw-root .ckw-msgr-tab[aria-current=page]{background:var(--hu-segment);color:var(--hu-fg);box-shadow:var(--hu-lift)}
552
+ .ckw-root .ckw-msgr-tab-ic{width:18px;height:18px}
553
+ .ckw-root .ckw-msgr-tab .ckw-cut{stroke:var(--hu-segment)}
554
+ .ckw-root .ckw-msgr-count-tab{box-shadow:0 0 0 2px var(--hu-default)}
555
+ .ckw-root .ckw-msgr-tab[aria-current=page] .ckw-msgr-count-tab{box-shadow:0 0 0 2px var(--hu-segment)}
556
+ .ckw-root .ckw-msgr-powered{background:var(--hu-bg);padding-top:0}
323
557
  /* Survey */
324
558
  .ckw-survey{position:fixed;z-index:2147483000;left:20px;bottom:20px;width:360px;max-width:calc(100vw - 24px);background:var(--ckw-bg);border:1px solid var(--ckw-line);border-radius:12px;box-shadow:var(--ckw-shadow);padding:14px;animation:ckw-in .2s ease-out}
325
559
  @keyframes ckw-in{from{opacity:0;transform:translateY(8px)}}