/* Formsieve AI chat · the closed launcher (loads on chat pages) · 2026-10-07
   Built from the approved step 1 design: docs/website/design-source-2026-10-07/
   (fs-chat.css sections 1–5, 8, 9 for the launcher; FsChatLauncher and FsChatMark inline values).
   The default rules are the still version; every moving rule sits inside
   @media (prefers-reduced-motion: no-preference) under .fs-chat:not([data-motion="reduced"]). */

/* 1 · Tokens (fs-chat.css, unchanged) */
.fs-chat{
  --fs-motion-speed:1;
  --fs-dur-hover:calc(150ms * var(--fs-motion-speed));
  --fs-dur-fade:calc(150ms * var(--fs-motion-speed));
  --fs-dur-press:calc(80ms * var(--fs-motion-speed));
  --fs-dur-release:calc(200ms * var(--fs-motion-speed));
  --fs-dur-item:calc(260ms * var(--fs-motion-speed));
  --fs-dur-open:calc(320ms * var(--fs-motion-speed));
  --fs-dur-close:calc(200ms * var(--fs-motion-speed));
  --fs-dur-enter:calc(350ms * var(--fs-motion-speed));
  --fs-dur-fall:calc(400ms * var(--fs-motion-speed));
  --fs-dur-think:calc(1400ms * var(--fs-motion-speed));
  --fs-stagger:calc(40ms * var(--fs-motion-speed));
  --fs-ease:cubic-bezier(.25,.1,.25,1);
  --fs-ease-in:cubic-bezier(.42,0,1,1);
  --fs-ease-glide:cubic-bezier(.22,1,.36,1);
  --fs-ease-pop:cubic-bezier(.34,1.56,.64,1);
  --fs-ease-control:var(--fs-ease-glide);
  --fs-rise:8px;
  --fs-arrive:-10px;
  --fs-row-rise:6px;
  --fs-slide:24px;
  --fs-from-panel-y:12px;
  --fs-from-panel-scale:.9;
  --fs-from-sheet-y:16px;
  --fs-from-launcher-scale:.8;
  --fs-from-mark-scale:.6;
  --fs-from-dot-scale:0;
  --fs-from-bubble-scale:.96;
  --fs-from-teaser-x:8px;
  --fs-from-teaser-scale:.96;
  --fs-press-scale:.92;
  --fs-slide-max:96px;
  --fs-rise-max:40px;
  --fs-fall:16px;
  font-family:'DM Sans','DM Sans Fallback',sans-serif;color:#150735;
}
.fs-chat-mark[data-s="6"]{--fs-fall:13px}
@media (prefers-reduced-motion: reduce){
  .fs-chat{--fs-rise:0px;--fs-arrive:0px;--fs-row-rise:0px;--fs-slide:0px;--fs-from-panel-y:0px;--fs-from-panel-scale:1;--fs-from-sheet-y:0px;--fs-from-launcher-scale:1;--fs-from-mark-scale:1;--fs-from-dot-scale:1;--fs-from-bubble-scale:1;--fs-from-teaser-x:0px;--fs-from-teaser-scale:1;--fs-slide-max:0px;--fs-rise-max:0px}
}

/* 2 · Keyframes (shared with the panel) */
@keyframes fs-fade-in{from{opacity:0}}
@keyframes fs-fade-out{to{opacity:0}}
@keyframes fs-move{from{opacity:0;translate:var(--fs-from-x,0px) var(--fs-from-y,0px);scale:var(--fs-from-s,1)}}
@keyframes fs-pop{from{opacity:0;scale:var(--fs-from-launcher-scale)}}
@keyframes fs-shadow-out{from{translate:0 0}}
@keyframes fs-fall{from{translate:0 calc(var(--fs-fall) * -1)}}
@keyframes fs-pass{
  0%{opacity:0;scale:var(--fs-from-dot-scale);translate:0 calc(var(--fs-fall) * -1);animation-timing-function:cubic-bezier(.22,1,.36,1)}
  18%{opacity:1;scale:1;translate:0 calc(var(--fs-fall) * -1);animation-timing-function:linear}
  36%{opacity:1;scale:1;translate:0 calc(var(--fs-fall) * -1);animation-timing-function:cubic-bezier(.42,0,1,1)}
  64.571%{opacity:1;scale:1;translate:0 0;animation-timing-function:linear}
  86%{opacity:1;scale:1;translate:0 0;animation-timing-function:cubic-bezier(.42,0,1,1)}
  100%{opacity:0;scale:1;translate:0 0}
}

/* Screen-reader-only text */
.fs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* The mark (FsChatMark): 8 px dots (30 × 35) and 6 px dots (24 × 28), light colourway */
.fs-chat-mark{position:relative;display:block;flex:none;color:#553BFB}
.fs-chat-mark svg{display:block;fill:currentColor}
.fs-chat-mark-8{width:30px;height:35px}
.fs-chat-mark-6{width:24px;height:28px}
.fs-pass{position:absolute;display:block;color:#FA2E9C}
.fs-chat-mark-8 .fs-pass{left:11px;top:27px;width:8px;height:8px}
.fs-chat-mark-6 .fs-pass{left:9px;top:22px;width:6px;height:6px}

/* The dock: bottom right, between the site header (9998) and the off-canvas menu (100000) */
.fs-chat-dock{position:fixed;right:24px;bottom:24px;z-index:9999;display:flex;flex-direction:row-reverse;align-items:flex-end;gap:12px;pointer-events:none}
.fs-chat-dock>*{pointer-events:auto}
.fs-launcher-round,.fs-launcher-pill[hidden],.fs-chat-note[hidden]{display:none !important}
@media (max-width:690px){
  .fs-chat-dock{right:16px;bottom:16px;flex-direction:column-reverse;align-items:flex-end}
  .fs-launcher-pill{display:none !important}
  .fs-launcher-round{display:block !important}
}

/* 3 · Shadow layer, faces, hover, press (M2) */
.fs-shadow{position:absolute;inset:0;border-radius:inherit;background:#150735;pointer-events:none;translate:var(--fs-sh,0px) var(--fs-sh,0px)}
.fs-face{position:relative}
.fs-launcher{--fs-sh:4px;--fs-sh-h:6px}
.fs-ctl{--fs-sh:0px;--fs-sh-h:4px}
.fs-chat .fs-launcher,.fs-chat .fs-ctl{position:relative;margin:0;padding:0;border:0;background:none;box-shadow:none;color:inherit;font:inherit;letter-spacing:normal;text-transform:none;min-width:0;min-height:0;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:999px}
@media (hover:hover) and (pointer:fine){
  .fs-launcher:hover>.fs-shadow,.fs-ctl:hover>.fs-shadow{translate:var(--fs-sh-h) var(--fs-sh-h)}
  .fs-launcher:hover:active>.fs-face{translate:var(--fs-sh-h) var(--fs-sh-h)}
}
.fs-launcher:active>.fs-face,.fs-launcher[data-pressed]>.fs-face{translate:var(--fs-sh) var(--fs-sh)}
.fs-ctl:active>.fs-face,.fs-ctl[data-pressed]>.fs-face{scale:var(--fs-press-scale)}

/* 4 · Focus: the launcher floats over every block colour, so a two-tone ring */
.fs-chat :focus{outline:none}
.fs-chat :focus-visible{outline:3px solid #553BFB;outline-offset:3px}
.fs-chat .fs-on-dark :focus-visible{outline-color:#fff}
.fs-chat .fs-launcher:focus-visible{outline:none}
.fs-launcher:focus-visible>.fs-face{outline:3px solid #150735;outline-offset:2px;box-shadow:0 0 0 2px #fff}
.fs-launcher:focus-visible{opacity:1 !important;scale:1 !important;animation:none !important}

/* The launcher (FsChatLauncher): desktop pill and phone round button */
.fs-chat .fs-launcher{display:block;flex:none}
.fs-launcher-pill>.fs-face{display:flex;align-items:center;gap:10px;height:56px;box-sizing:border-box;padding:0 14px 0 14px;background:#FFFFFF;border:2px solid #150735;border-radius:999px;font-weight:700;font-size:16px;line-height:20px;white-space:nowrap;color:#150735}
.fs-ai-badge{background:#553BFB;color:#FFFFFF;font-size:13px;font-weight:700;letter-spacing:.04em;line-height:16px;padding:3px 8px;border-radius:999px}
.fs-chat .fs-launcher-round{width:56px;height:56px}
.fs-launcher-round>.fs-face{position:relative;display:flex;align-items:center;justify-content:center;width:56px;height:56px;box-sizing:border-box;background:#FFFFFF;border:2px solid #150735;border-radius:999px}
.fs-swap-mark{display:block;margin-top:2px}
.fs-ai-badge-round{position:absolute;left:-10px;top:-9px;border:2px solid #150735;padding:1px 6px}

/* The could-not-load note (M3), in the teaser's place: 300 px, 264 px next to the round launcher */
.fs-chat-note{width:300px;box-sizing:border-box;background:#FFF1F8;border:2px solid #150735;border-radius:20px 20px 6px 20px;box-shadow:4px 4px 0 #150735;padding:12px 16px;font-size:14px;line-height:1.5;text-wrap:pretty}
.fs-chat-note p{margin:0;font-size:14px;line-height:1.5;color:#150735}
.fs-chat-note a{color:#150735;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;overflow-wrap:anywhere}
@media (max-width:690px){.fs-chat-note{width:264px}}

/* C8 · /start/: no floating launcher; an inline text button "Questions? Ask our AI" + "AI" chip, centred under
   the sign-in card (the text-button style of the panel; the 24 px gap above it is Claude-derived) */
.fs-chat-inline-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;margin:24px auto 0;max-width:720px;text-align:center}
.fs-chat .fs-chat-inline{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0;padding:0 4px;border:0;border-radius:0;background:none;box-shadow:none;font-family:'DM Sans','DM Sans Fallback',sans-serif;font-weight:700;font-size:16px;line-height:20px;letter-spacing:normal;text-transform:none;color:#150735;cursor:pointer;transition:color 150ms ease}
.fs-chat-inline-text{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
@media (hover:hover) and (pointer:fine){.fs-chat .fs-chat-inline:hover{color:#553BFB}}
.fs-chat .fs-chat-inline:focus-visible{outline:3px solid #553BFB;outline-offset:3px;border-radius:4px}
.fs-chat-inline-wrap .fs-chat-note{border-radius:20px;text-align:left}

/* 5 · Launcher states (still) */
.fs-launcher{transition:opacity var(--fs-dur-fade) linear}
.fs-launcher[data-state="hidden"],.fs-launcher[data-state="under"]{opacity:0;pointer-events:none}
.fs-launcher[data-enter="1"]{animation:fs-fade-in var(--fs-dur-fade) linear both}
[data-arrive="note"],[data-leave="note"]{animation:fs-fade-in var(--fs-dur-fade) linear both}
[data-leave="note"]{animation-name:fs-fade-out}

/* Space for the launcher, only where it shows (fs-chat-on and fs-chat-page are set only on pages that show the
   chat to this visitor): focused elements scroll clear of it, and the footer's last line clears it.
   104 px desktop (56 + 24 + 24), 88 px phones (design notes, 2026-10-07; Javier's OK 2026-10-08) */
html.fs-chat-on{scroll-padding-bottom:calc(104px + var(--fs-note-h,0px))}
body.fs-site.fs-chat-page .nectar-global-section.nectar_hook_global_section_footer{padding-bottom:104px}
@media (max-width:690px){
  html.fs-chat-on{scroll-padding-bottom:calc(88px + var(--fs-note-h,0px))}
  body.fs-site.fs-chat-page .nectar-global-section.nectar_hook_global_section_footer{padding-bottom:88px}
}

/* 8 · Moving versions (launcher) */
@media (prefers-reduced-motion: no-preference){
  .fs-chat:not([data-motion="reduced"]) .fs-launcher>.fs-shadow,
  .fs-chat:not([data-motion="reduced"]) .fs-ctl>.fs-shadow{transition:translate var(--fs-dur-hover) var(--fs-ease)}
  .fs-chat:not([data-motion="reduced"]) .fs-launcher>.fs-face,
  .fs-chat:not([data-motion="reduced"]) .fs-ctl>.fs-face{transition:translate var(--fs-dur-release) var(--fs-ease-control),scale var(--fs-dur-release) var(--fs-ease-control),background-color var(--fs-dur-release) var(--fs-ease)}
  .fs-chat:not([data-motion="reduced"]) .fs-launcher:active>.fs-face,.fs-chat:not([data-motion="reduced"]) .fs-launcher[data-pressed]>.fs-face,
  .fs-chat:not([data-motion="reduced"]) .fs-ctl:active>.fs-face,.fs-chat:not([data-motion="reduced"]) .fs-ctl[data-pressed]>.fs-face{transition:translate var(--fs-dur-press) var(--fs-ease-glide),scale var(--fs-dur-press) var(--fs-ease-glide),background-color var(--fs-dur-release) var(--fs-ease)}
  /* M1 · entrance: face 0–300 · shadow 240–400 · dot falls 200–600 */
  .fs-chat:not([data-motion="reduced"]) .fs-launcher[data-enter="1"]{animation:fs-pop calc(300ms * var(--fs-motion-speed)) var(--fs-ease-control) both}
  .fs-chat:not([data-motion="reduced"]) .fs-launcher[data-enter="1"]>.fs-shadow{animation:fs-shadow-out calc(160ms * var(--fs-motion-speed)) var(--fs-ease-glide) calc(240ms * var(--fs-motion-speed)) both}
  .fs-chat:not([data-motion="reduced"]) .fs-launcher[data-enter="1"] .fs-pass{animation:fs-fall var(--fs-dur-fall) var(--fs-ease-in) calc(200ms * var(--fs-motion-speed)) both}
  /* M1 hide (off-canvas menu) 150 ms ease-in · return 200 ms glide */
  .fs-chat:not([data-motion="reduced"]) .fs-launcher{transition:opacity calc(200ms * var(--fs-motion-speed)) var(--fs-ease-glide),scale calc(200ms * var(--fs-motion-speed)) var(--fs-ease-control)}
  .fs-chat:not([data-motion="reduced"]) .fs-launcher[data-state="hidden"]{scale:var(--fs-from-launcher-scale);transition:opacity var(--fs-dur-fade) var(--fs-ease-in),scale var(--fs-dur-fade) var(--fs-ease-in)}
  /* M3 · panel in the launcher's place: launcher fades under it in 120 ms (opacity only), scale resets after */
  .fs-chat:not([data-motion="reduced"]) .fs-launcher[data-state="under"]{scale:var(--fs-from-launcher-scale);transition:opacity calc(120ms * var(--fs-motion-speed)) var(--fs-ease-in),scale 0s linear calc(120ms * var(--fs-motion-speed))}
  /* M3 · slow first open: launcher mark plays the working loop, capped at 3 */
  .fs-chat:not([data-motion="reduced"]) .fs-launcher[data-loading] .fs-pass{animation:fs-pass var(--fs-dur-think) 3}
  /* M3 note: 300 ms glide from the launcher's side */
  .fs-chat:not([data-motion="reduced"]) [data-arrive="note"]{--fs-from-x:var(--fs-from-teaser-x);--fs-from-s:var(--fs-from-teaser-scale);transform-origin:100% 100%;animation:fs-move calc(300ms * var(--fs-motion-speed)) var(--fs-ease-glide) both}
}

/* 9 · Windows high contrast */
@media (forced-colors: active){ .fs-shadow{display:none} }