/* The chat launcher, its message preview and the guided brief window (9 Oct 2026). Loaded last on every page.
   The dot peeks out from behind the launcher, happy, on hover; the window reads as a conversation with quick replies. */
.chat-widget{--ch-ink:#141416;--ch-soft:#5b6064;--ch-ground:#f6f6f3;--ch-pop:cubic-bezier(.34,1.56,.64,1);--ch-out:cubic-bezier(.16,1,.3,1);
  position:fixed;z-index:60;right:calc(22px + env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;align-items:flex-end;gap:14px;pointer-events:none;transition:opacity .25s,visibility .25s;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}

/* the launcher: a black disc with a chat bubble whose three dots are the process inks */
.chat-launcher{pointer-events:auto;position:relative;display:block;width:60px;height:60px;min-height:0;padding:0;margin:0;border:0;border-radius:50%;
  background:none;color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.cl-disc{position:absolute;inset:0;z-index:1;border-radius:50%;background:var(--ch-ink);
  box-shadow:0 14px 30px -10px rgba(20,20,22,.55),0 2px 6px rgba(20,20,22,.18);transition:transform .45s var(--ch-pop),box-shadow .3s}
.cl-ic{position:absolute;z-index:2;left:50%;top:50%;width:32px;height:32px;margin:-16px 0 0 -16px;transition:opacity .2s,transform .4s var(--ch-pop)}
.cl-ic-close{opacity:0;transform:rotate(-90deg) scale(.6)}
.chat-launcher:focus-visible{outline:none}
.chat-launcher:focus-visible .cl-disc{box-shadow:0 0 0 3px #fff,0 0 0 5.5px var(--ch-ink),0 14px 30px -10px rgba(20,20,22,.55)}
.chat-launcher:active .cl-disc{transform:scale(.94)}

/* the dot behind the disc: hidden, then up and happy on hover or keyboard focus */
.cl-peek{position:absolute;z-index:0;left:50%;bottom:49px;width:58px;pointer-events:none;opacity:0;
  transform:translate(-50%,44px) scale(.5) rotate(10deg);transform-origin:50% 100%;transition:transform .5s var(--ch-pop),opacity .18s}
.cl-peek img{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 8px rgba(20,22,24,.18))}
@media (hover:hover){
  .chat-launcher:hover .cl-disc{transform:scale(1.06)}
  .chat-launcher:hover .cl-peek{opacity:1;transform:translate(-54%,0) scale(1) rotate(-8deg);transition-delay:.04s}
  .chat-launcher:hover .cl-peek img{animation:cl-joy .9s .35s var(--ch-out) 1 both}
  .chat-launcher:hover .cl-tip{opacity:1;transform:translate(0,-50%)}
}
.chat-launcher:focus-visible .cl-peek{opacity:1;transform:translate(-54%,0) scale(1) rotate(-8deg)}
.chat-launcher:focus-visible .cl-tip{opacity:1;transform:translate(0,-50%)}
@keyframes cl-joy{0%{transform:none}35%{transform:translateY(-5px) rotate(4deg)}70%{transform:translateY(0) rotate(-2deg)}100%{transform:none}}

/* the hover label */
.cl-tip{position:absolute;z-index:3;right:74px;top:50%;padding:10px 15px;border-radius:999px;background:#fff;color:var(--ch-ink);white-space:nowrap;
  font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.2;pointer-events:none;opacity:0;transform:translate(10px,-50%);
  box-shadow:0 10px 26px -10px rgba(20,22,24,.4),0 0 0 1px rgba(20,22,24,.06);transition:opacity .2s,transform .35s var(--ch-out)}

/* the unread badge, set with the message preview and cleared when the chat opens */
.cl-badge{position:absolute;z-index:3;top:-3px;right:-3px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#E5007E;color:#fff;
  border:2.5px solid #fff;font:700 11px/17px Inter,system-ui,sans-serif;text-align:center;transform:scale(0);transition:transform .45s var(--ch-pop)}
.chat-widget.has-unread .cl-badge{transform:scale(1)}

/* open: the bubble turns into a chevron, the extras step aside */
.chat-widget.is-open .cl-ic-chat{opacity:0;transform:rotate(90deg) scale(.6)}
.chat-widget.is-open .cl-ic-close{opacity:1;transform:none}
.chat-widget.is-open .cl-tip,.chat-widget.has-hi .cl-tip{opacity:0!important;transform:translate(10px,-50%)!important}
.chat-widget.is-open .cl-peek{opacity:0!important;transform:translate(-50%,44px) scale(.5)!important}
.chat-widget.is-open .cl-badge{transform:scale(0)}

/* the message preview, typed in once per visit */
.chat-teaser{position:relative;max-width:min(316px,calc(100vw - 32px));pointer-events:none;visibility:hidden;opacity:0;
  transform:translateY(12px) scale(.94);transform-origin:100% 100%;transition:opacity .25s,transform .5s var(--ch-pop),visibility 0s .5s}
.chat-widget.has-hi:not(.is-open) .chat-teaser{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition:opacity .25s,transform .5s var(--ch-pop),visibility 0s}
.ct-open{display:flex;align-items:flex-start;gap:12px;width:100%;min-height:0;margin:0;padding:14px 18px 14px 14px;border:0;border-radius:22px 22px 6px 22px;
  background:#fff;color:var(--ch-ink);text-align:left;cursor:pointer;font:inherit;
  box-shadow:0 22px 44px -18px rgba(20,22,24,.42),0 0 0 1px rgba(20,22,24,.06);transition:transform .3s var(--ch-out),box-shadow .3s}
.ct-open:hover{transform:translateY(-2px);box-shadow:0 26px 50px -18px rgba(20,22,24,.46),0 0 0 1px rgba(20,22,24,.08)}
.ct-avatar{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#e3f3fb;overflow:hidden}
.ct-avatar img{display:block;width:38px;height:auto;margin-top:4px}
.ct-msg{display:flex;flex-direction:column;min-width:0;padding-top:1px}
.ct-name{font-size:12px;font-weight:600;letter-spacing:.01em;color:var(--ch-soft);margin-bottom:5px}
.ct-text{font-size:15px;line-height:1.45;color:#33393a}
.ct-text b{display:block;font-weight:600;color:var(--ch-ink);letter-spacing:-.01em}
.ct-typing{display:none;gap:5px;align-items:center;height:22px}
.ct-typing i,.cm-typing i{width:7px;height:7px;border-radius:50%;background:#19AAE3}
.ct-typing i:nth-child(2),.cm-typing i:nth-child(2){background:#E5007E}
.ct-typing i:nth-child(3),.cm-typing i:nth-child(3){background:#FBCB05}
.chat-widget.has-hi:not(.is-typed) .ct-typing{display:flex}
.chat-widget.has-hi:not(.is-typed) .ct-text{display:none}
.chat-widget.has-hi:not(.is-typed) .ct-typing i{animation:ch-dot .9s ease-in-out 1 both}
.ct-typing i:nth-child(2),.cm-typing i:nth-child(2){animation-delay:.15s!important}
.ct-typing i:nth-child(3),.cm-typing i:nth-child(3){animation-delay:.3s!important}
.chat-widget.is-typed .ct-text{animation:ch-in .4s var(--ch-out) both}
@keyframes ch-dot{0%,100%{transform:none;opacity:.55}40%{transform:translateY(-5px);opacity:1}}
@keyframes ch-in{from{opacity:0;transform:translateY(6px)}}
.ct-close{position:absolute;top:-11px;left:-11px;display:grid;place-items:center;width:30px;height:30px;min-height:0;padding:0;border:0;border-radius:50%;
  background:#fff;color:var(--ch-ink);cursor:pointer;box-shadow:0 6px 16px -6px rgba(20,22,24,.4),0 0 0 1px rgba(20,22,24,.08)}
.ct-close svg{width:15px;height:15px}
.ct-close:hover{background:var(--ch-ink);color:#fff}

/* the window */
.chat-panel{--ch-ink:#141416;--ch-soft:#5b6064;--ch-pop:cubic-bezier(.34,1.56,.64,1);--ch-out:cubic-bezier(.16,1,.3,1);
  position:fixed;inset:auto calc(22px + env(safe-area-inset-right,0px)) calc(94px + env(safe-area-inset-bottom,0px)) auto;margin:0;padding:0;
  width:384px;max-width:calc(100vw - 32px);height:min(640px,calc(100dvh - 126px));border:0;border-radius:24px;overflow:hidden;
  background:#fff;color:var(--ch-ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  box-shadow:0 44px 90px -30px rgba(20,22,24,.5),0 0 0 1px rgba(20,22,24,.07)}
.chat-panel[open]{display:flex;flex-direction:column;transform-origin:100% 100%;animation:cp-in .5s var(--ch-pop) both}
.chat-panel::backdrop{background:rgba(20,20,22,.1)}
@keyframes cp-in{from{opacity:0;transform:translateY(18px) scale(.92)}}
.cp-head{flex:none;display:flex;align-items:center;gap:12px;padding:14px 10px 14px 16px;background:var(--ch-ink);color:#fff}
.cp-avatar{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#e3f3fb;overflow:hidden}
.cp-avatar img{display:block;width:40px;height:auto;margin-top:5px}
.cp-who{flex:1;min-width:0}
.cp-who strong{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.cp-who span{display:flex;align-items:center;gap:7px;margin-top:2px;font-size:12.5px;color:rgba(255,255,255,.74)}
.cp-btn{flex:none;display:grid;place-items:center;width:40px;height:40px;min-height:0;padding:0;border:0;border-radius:50%;background:transparent;color:#fff;cursor:pointer;transition:background .2s}
.cp-btn svg{width:20px;height:20px}
.cp-btn:hover{background:rgba(255,255,255,.13)}
.cp-btn:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.cp-progress{flex:none;height:3px;background:#e8eae6}
.cp-progress span{display:block;height:100%;width:0;background:#19AAE3;transition:width .5s var(--ch-out)}
.cp-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:10px;padding:20px 16px 18px;background:#f6f6f3}
.cp-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.cp-foot{flex:none;display:flex;align-items:center;gap:12px;padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px));border-top:1px solid #eceeea;background:#fff;font-size:12.5px;color:var(--ch-soft)}
.cp-foot span{flex:1;min-width:0}
.cp-foot a{color:var(--ch-soft);text-decoration:underline;text-underline-offset:3px;padding:8px 0}
.cp-back{min-height:36px;padding:0 14px;border:1px solid #d9dcd6;border-radius:999px;background:#fff;color:var(--ch-ink);font:500 13px/1 Inter,system-ui,sans-serif;cursor:pointer}
.cp-back:hover{border-color:var(--ch-ink)}
.cp-back[hidden]{display:none}

/* messages */
.cm{display:flex;align-items:flex-end;gap:8px;max-width:100%}
.cm-av{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#e3f3fb;overflow:hidden}
.cm-av img{display:block;width:26px;height:auto;margin-top:4px}
.cm-bot:has(+ .cm-bot) .cm-av{visibility:hidden}
.cp-body.is-typing .cm-typing .cm-av{visibility:visible}
.cm-b{max-width:84%;padding:11px 14px;font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.cm-bot .cm-b{background:#fff;color:var(--ch-ink);border-radius:18px 18px 18px 6px;box-shadow:0 0 0 1px rgba(20,22,24,.06),0 1px 2px rgba(20,22,24,.05)}
.cm-me{justify-content:flex-end}
.cm-me .cm-b{background:var(--ch-ink);color:#fff;border-radius:18px 18px 6px 18px}
.cm-typing .cm-b{display:flex;gap:5px;align-items:center;padding:14px 15px}
.cm-typing i{animation:ch-dot .9s ease-in-out infinite both}
.cp-body:not(.is-typing) .cm-typing,.cp-body.is-typing .cm-new{display:none}
.cm-new{animation:ch-in .45s var(--ch-out) both}
.cm-chips{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin:4px 0 0 36px}
.cm-chips button{min-height:40px;padding:9px 15px;border:1.5px solid var(--ch-ink);border-radius:999px;background:#fff;color:var(--ch-ink);
  font:500 14.5px/1.2 Inter,system-ui,sans-serif;text-align:left;cursor:pointer;transition:background .2s,color .2s,transform .25s var(--ch-out)}
.cm-chips button:hover{background:var(--ch-ink);color:#fff}
.cm-chips button:active{transform:scale(.97)}
.cm-chips button:focus-visible,.cm-copy:focus-visible,.cm-send:focus-visible{outline:2px solid #19AAE3;outline-offset:2px}
.cm-chips .cm-skip{border-color:#c9ccc6;color:var(--ch-soft)}
.cm-chips .cm-skip:hover{border-color:var(--ch-ink);background:#fff;color:var(--ch-ink)}
.cm-compose{display:flex;align-items:flex-end;gap:8px;margin:4px 0 0 36px;padding:6px 6px 6px 14px;border-radius:20px;background:#fff;box-shadow:0 0 0 1.5px var(--ch-ink)}
.cm-compose textarea{flex:1;min-width:0;min-height:44px;max-height:132px;margin:0;padding:10px 0;border:0;outline:0;resize:none;background:transparent;color:var(--ch-ink);font:15px/1.45 Inter,system-ui,sans-serif}
.cm-compose textarea::placeholder{color:#7b8084}
.cm-send{flex:none;display:grid;place-items:center;width:40px;height:40px;min-height:0;padding:0;border:0;border-radius:50%;background:var(--ch-ink);color:#fff;cursor:pointer;transition:transform .25s var(--ch-pop)}
.cm-send svg{width:20px;height:20px}
.cm-send:hover{transform:scale(1.07)}
.cm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cm-hint{margin:2px 0 0 36px;font-size:12.5px;line-height:1.5;color:var(--ch-soft)}
.cm-card{margin:2px 0 0 36px;padding:14px 16px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(20,22,24,.08)}
.cm-card strong{display:block;margin-bottom:6px;font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ch-soft)}
.cm-card p{margin:0;font-size:14px;line-height:1.6;color:#33393a}
.cm-actions{display:grid;gap:8px;margin:4px 0 0 36px}
.cm-actions .cm-book{justify-content:center;width:100%;margin:0}
.cm-copy{min-height:44px;padding:0 16px;border:1.5px solid var(--ch-ink);border-radius:999px;background:#fff;color:var(--ch-ink);font:500 15px/1 Inter,system-ui,sans-serif;cursor:pointer}
.cm-copy:hover{background:var(--ch-ink);color:#fff}
.cm-email{justify-self:center;padding:10px 0;color:var(--ch-ink);font-size:14px;font-weight:500;text-decoration:underline;text-underline-offset:4px}
.cm-status{margin:0 0 0 36px;font-size:13px;color:#3f7f1d}
.cm-status:empty{display:none}

/* phones: a smaller launcher in the corner; the window becomes a sheet from the bottom */
@media (max-width:760px),(max-height:500px){
  .chat-widget{right:calc(12px + env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));gap:12px}
  .chat-launcher{width:54px;height:54px}
  .cl-ic{width:29px;height:29px;margin:-14.5px 0 0 -14.5px}
  .cl-peek{width:52px;bottom:44px}
}
@media (max-width:760px){
  .chat-panel{inset:auto 0 0 0;width:100%;max-width:none;height:min(88dvh,700px);border-radius:24px 24px 0 0;transform-origin:50% 100%}
  .chat-panel[open]{animation-name:cp-up;animation-timing-function:var(--ch-out);animation-duration:.45s}
  @keyframes cp-up{from{transform:translateY(100%)}}
  body:has(.cookie-notice:not([hidden])) .chat-widget{opacity:0;visibility:hidden}
}
@media (max-height:500px){.chat-panel{inset:8px calc(8px + env(safe-area-inset-right,0px)) 8px auto;height:auto;max-height:calc(100dvh - 16px)}}
@media (hover:none){.cl-tip{display:none}}
/* the Academy hides it at the top of the page on a phone, as before */
@media (max-width:760px),(max-height:500px){.guide-page .site-nav:not(.is-scrolled) ~ .chat-widget{opacity:0;visibility:hidden}}

/* still: no motion at all, final states only */
@media (prefers-reduced-motion:reduce){
  .chat-widget *,.chat-panel,.chat-panel *{animation:none!important;transition:none!important}
}
html[data-motion="paused"] .chat-widget *,html[data-motion="paused"] .chat-panel,html[data-motion="paused"] .chat-panel *{animation:none!important;transition:none!important}
@media print{.chat-widget,.chat-panel{display:none!important}}