/* The "say hello" note: a taped paper card that unfolds from a small round button in the corner. */
.wfc{--wfc-ink:var(--ink,#161616);--wfc-paper:var(--paper,#FBFBF8);--wfc-tan:var(--tangerine,#FF6B35);--wfc-blue:var(--blue,#2B3BFF);
  position:fixed;right:max(18px,env(safe-area-inset-right,0px));bottom:max(18px,env(safe-area-inset-bottom,0px));z-index:48;
  font:16px/1.45 var(--sans,"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif);color:var(--wfc-ink);pointer-events:none}
.wfc>*{pointer-events:auto}
.wfc.away{visibility:hidden}

/* the round button, with the "on air" dot breathing on it */
.wfc-btn{position:relative;display:grid;place-items:center;width:58px;height:58px;margin-left:auto;border-radius:50%;border:2px solid var(--wfc-ink);
  background:var(--wfc-ink);color:var(--wfc-paper);cursor:pointer;box-shadow:3px 3px 0 var(--wfc-tan);padding:0;
  transform:scale(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .2s}
.wfc.ready .wfc-btn{transform:scale(1)}
.wfc.ready .wfc-btn:hover{transform:translate(-2px,-2px) scale(1.04);box-shadow:5px 5px 0 var(--wfc-tan)}
.wfc-btn svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round}
.wfc-dot{position:absolute;top:9px;right:9px;width:12px;height:12px;border-radius:50%;background:var(--wfc-tan);border:2px solid var(--wfc-ink)}
.wfc-btn::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--wfc-tan);opacity:0;pointer-events:none}

/* the note */
.wfc-card{position:absolute;right:0;bottom:76px;width:min(340px,calc(100vw - 36px));padding:20px 20px 16px;background:var(--wfc-paper);
  border:2px solid var(--wfc-ink);border-radius:10px;box-shadow:6px 6px 0 var(--wfc-ink);transform-origin:calc(100% - 29px) calc(100% + 47px);
  opacity:0;transform:translateY(14px) scale(.55) rotate(4deg);transition:opacity .3s ease,transform .55s cubic-bezier(.34,1.4,.64,1)}
.wfc.open .wfc-card{opacity:1;transform:rotate(-1deg)}
.wfc-card::after{content:"";position:absolute;right:22px;bottom:-11px;width:18px;height:18px;background:var(--wfc-paper);
  border:solid var(--wfc-ink);border-width:0 2px 2px 0;transform:rotate(45deg) skew(6deg,6deg)}
.wfc-tape{position:absolute;top:-12px;left:50%;width:84px;height:22px;margin-left:-42px;background:rgba(217,246,107,.85);transform:rotate(-3deg);
  box-shadow:0 1px 0 rgba(0,0,0,.06)}
.wfc-x{position:absolute;top:8px;right:8px;width:32px;height:32px;border:0;border-radius:50%;background:none;color:var(--ink-2,#55534D);
  font:400 24px/1 var(--sans,Arial,sans-serif);cursor:pointer;transition:background .2s,transform .2s}
.wfc-x:hover{background:rgba(0,0,0,.06);transform:rotate(90deg)}
.wfc-who{display:flex;align-items:center;gap:9px;margin-bottom:12px;font-size:14px}
.wfc-who b{font:400 17px/1 var(--serif,Gloock,Georgia,serif)}
.wfc-who small{display:inline-flex;align-items:center;gap:5px;color:var(--ink-2,#55534D);font-size:13px}
.wfc-who small::before{content:"";width:7px;height:7px;border-radius:50%;background:#3bb273;box-shadow:0 0 0 3px rgba(59,178,115,.18)}
.wfc-face{position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--wfc-tan);border:2px solid var(--wfc-ink)}
.wfc-face i{width:10px;height:10px;border-radius:50%;background:var(--wfc-paper)}
.wfc-hi{font:400 25px/1.1 var(--serif,Gloock,Georgia,serif);margin:0 0 8px;padding-right:18px}
.wfc-wave{display:inline-block;transform-origin:70% 80%}
.wfc-body{margin:0 0 14px;color:var(--ink-2,#55534D)}
.wfc-body span{display:inline-block}
.wfc-asks{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.wfc-ask{display:inline-block;padding:8px 12px;border:2px solid var(--wfc-ink);border-radius:999px;background:var(--wfc-paper);text-decoration:none;
  font-size:14px;line-height:1.2;transition:transform .18s,box-shadow .18s,background .18s}
.wfc-ask:hover,.wfc-ask:focus-visible{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--wfc-tan);background:#fff}
.wfc-foot{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px}
.wfc-say{display:inline-block;padding:11px 16px;border-radius:6px;background:var(--wfc-ink);color:var(--wfc-paper);border:2px solid var(--wfc-ink);
  font-weight:700;text-decoration:none;box-shadow:3px 3px 0 var(--wfc-tan);transition:transform .15s,box-shadow .15s}
.wfc-say:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--wfc-tan)}
.wfc-call{font-size:14px;color:var(--ink-2,#55534D)}
.wfc-real{margin:12px 0 0;font:500 19px/1.1 var(--hand,Caveat,"Bradley Hand",cursive);color:var(--wfc-blue);transform:rotate(-1.5deg)}

/* the typing dots, before the words arrive */
.wfc-typing{display:none;gap:5px;width:max-content;padding:12px 14px;border-radius:14px 14px 14px 4px;background:var(--paper-2,#F1F0EA);margin-bottom:6px}
.wfc-typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-2,#55534D)}
.wfc.typing .wfc-typing{display:flex}
.wfc.typing .wfc-msg,.wfc.typing .wfc-asks,.wfc.typing .wfc-foot,.wfc.typing .wfc-real{display:none}

@media (prefers-reduced-motion:no-preference){
  .wfc.ready .wfc-dot{animation:wfc-breathe 2.6s ease-in-out infinite}
  .wfc.arrive .wfc-btn::after{animation:wfc-ripple 1.6s ease-out .3s 2}
  .wfc-typing i{animation:wfc-type 1s ease-in-out infinite}
  .wfc-typing i:nth-child(2){animation-delay:.15s}
  .wfc-typing i:nth-child(3){animation-delay:.3s}
  .wfc.open.first .wfc-hi{animation:wfc-rise .5s cubic-bezier(.2,.8,.2,1) both}
  .wfc.open.first .wfc-wave{animation:wfc-wave 1.6s ease-in-out .35s 1}
  .wfc.open.first .wfc-body span{animation:wfc-word .45s ease-out both;animation-delay:calc(.25s + var(--i) * 28ms)}
  .wfc.open.first .wfc-ask{animation:wfc-pop .45s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(.9s + var(--i) * 110ms)}
  .wfc.open.first .wfc-foot,.wfc.open.first .wfc-real{animation:wfc-rise .5s ease-out 1.3s both}
  .wfc.open.first .wfc-face{animation:wfc-nod 1.2s ease-in-out .2s 1}
}
@keyframes wfc-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
@keyframes wfc-ripple{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
@keyframes wfc-type{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}
@keyframes wfc-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes wfc-word{from{opacity:0;transform:translateY(5px);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
@keyframes wfc-pop{from{opacity:0;transform:translateY(10px) scale(.85)}to{opacity:1;transform:none}}
@keyframes wfc-wave{0%,100%{transform:rotate(0)}15%,45%{transform:rotate(16deg)}30%,60%{transform:rotate(-8deg)}}
@keyframes wfc-nod{0%,100%{transform:none}30%{transform:rotate(-10deg)}60%{transform:rotate(6deg)}}

/* phones: smaller, tucked in, never wider than the space beside the sound button */
@media (max-width:600px){
  .wfc{right:max(12px,env(safe-area-inset-right,0px));bottom:max(12px,env(safe-area-inset-bottom,0px))}
  .wfc-btn{width:50px;height:50px}
  .wfc-btn svg{width:24px;height:24px}
  .wfc-dot{top:6px;right:6px}
  .wfc-card{width:min(310px,calc(100vw - 24px));bottom:66px;padding:16px 16px 12px}
  .wfc-card::after{right:18px}
  .wfc-hi{font-size:21px}
  .wfc-body{font-size:15px;margin-bottom:10px}
  .wfc-ask:nth-child(n+3){display:none}
  .wfc-real{display:none}
}
@media print{.wfc{display:none}}