/* "Ask Peppy" call-out (core/askpeppy.js): a speech bubble in the top row of every page, beside the
   Peppy logo, plus the flying logo clone. Brand: cream bubble, black ink outline, Fredoka, orange
   accent. Sits in the net bar row only (above every page's content), never over the menu. */

.askp-anchor{position:relative;height:0;z-index:25}
.askp-anchor.hidden,.net-bar.off + .askp-anchor{display:none}
.askp{position:absolute;left:14px;bottom:-4px;display:flex;align-items:center;gap:8px;animation:askp-bob 3.2s ease-in-out 1.2s infinite}
.askp-wrap{position:relative;display:flex}

.askp-bubble{position:relative;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 6px 0 12px;border:2px solid #0E0B0F;border-radius:999px;background:#FFF7EE;color:#0E0B0F;font-family:var(--display,'Fredoka',sans-serif);font-size:13px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;box-shadow:0 2px 0 #0E0B0F;transform-origin:0 50%;transition:transform .15s ease,box-shadow .15s ease}
/* the tail points left, at the Peppy logo */
.askp-bubble::before{content:"";position:absolute;left:-6px;top:50%;width:9px;height:9px;margin-top:-5px;background:#FFF7EE;border-left:2px solid #0E0B0F;border-bottom:2px solid #0E0B0F;border-radius:0 0 0 2px;transform:rotate(45deg)}
.askp-cta{display:inline-block;padding:4px 9px;border-radius:999px;background:#FB8B23;color:#0E0B0F;font-weight:700}
.askp-bubble:hover{transform:translateY(-1px);box-shadow:0 3px 0 #0E0B0F}
.askp-bubble:active{transform:translateY(1px);box-shadow:0 1px 0 #0E0B0F}
.askp-bubble:focus-visible,.askp-x:focus-visible,.askp-face:focus-visible{outline:2px solid #FB8B23;outline-offset:3px}

.askp-x{position:absolute;top:-6px;right:-8px;width:18px;height:18px;display:grid;place-items:center;padding:0;border:2px solid #0E0B0F;border-radius:50%;background:#FFF7EE;color:#0E0B0F;cursor:pointer}
.askp-x::after{content:"";position:absolute;inset:-8px}
.askp-x:hover{background:#FB8B23}

/* phones: no sidebar, so a small Peppy face stands in for the logo; two short lines */
.askp-face{display:none;width:30px;height:30px;padding:0;border:2px solid #0E0B0F;border-radius:50%;background:#FFF7EE;overflow:hidden;cursor:pointer;flex:none}
.askp-face img{width:100%;height:100%;object-fit:cover;display:block}

.askp-pop .askp-bubble{animation:askp-in .5s cubic-bezier(.3,1.45,.5,1) .35s backwards}
.askp-pop .askp-face{animation:askp-face .45s cubic-bezier(.3,1.45,.5,1) .2s backwards}
.askp-out .askp-bubble,.askp-out .askp-face,.askp-out .askp-x{opacity:0;transform:scale(.7);transition:opacity .18s ease,transform .18s ease}

/* the Peppy logo in the sidebar opens Ask Peppy */
img.askp-logo{cursor:pointer}
img.askp-logo:focus-visible{outline:2px solid #FB8B23;outline-offset:3px;border-radius:50%}
img.askp-away{opacity:0!important}

@keyframes askp-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes askp-in{0%{opacity:0;transform:translateX(-6px) scale(.55)}100%{opacity:1;transform:none}}
@keyframes askp-face{0%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:none}}

@media (max-width:860px){
  /* centred on the net bar row (the anchor sits at its bottom): y 4 to 44, the page starts at 50 */
  .askp{left:12px;top:-30px;bottom:auto;gap:7px}
  .askp-face{display:block}
  .askp-bubble{flex-direction:column;align-items:flex-start;gap:2px;height:auto;padding:4px 13px 4px 10px;border-radius:13px;font-size:11px}
  .askp-cta{padding:2px 7px}
  .askp-x{top:50%;right:-9px;margin-top:-9px}
}

@media (prefers-reduced-motion:reduce){
  .askp,.askp-pop .askp-bubble,.askp-pop .askp-face{animation:none}
  .askp-bubble,.askp-out .askp-bubble,.askp-out .askp-face,.askp-out .askp-x{transition:none}
}
@media print{.askp-anchor,.askp-fly{display:none!important}}

/* ---- Peppy with his call-center headset (flight clone + Ask Peppy page avatar) ---- */
.askp-peppy{position:relative;display:block;width:var(--askp-size,72px);height:var(--askp-size,72px);flex:none}
.askp-peppy > img{display:block;width:100%;height:100%;object-fit:contain}
.askp-headset,.askp-sparks{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.askp-sparks{opacity:0}
.askp-fly{position:fixed;left:0;top:0;z-index:150;pointer-events:none;transform-origin:50% 50%;will-change:transform,opacity}
.askp-fly .askp-peppy{width:100%;height:100%}
.askp-fly .askp-headset{opacity:0}

/* the page avatar: Peppy + "How may I help?" */
.askp-avatar{display:inline-flex;align-items:center;gap:14px;max-width:100%}
.askp-say{position:relative;display:inline-block;padding:8px 14px;border:2px solid #0E0B0F;border-radius:16px;background:#FFF7EE;color:#0E0B0F;font-family:var(--display,'Fredoka',sans-serif);font-size:16px;font-weight:600;line-height:1.15;white-space:nowrap;box-shadow:0 2px 0 #0E0B0F;transform-origin:0 50%}
.askp-say::before{content:"";position:absolute;left:-7px;top:50%;width:10px;height:10px;margin-top:-6px;background:#FFF7EE;border-left:2px solid #0E0B0F;border-bottom:2px solid #0E0B0F;border-radius:0 0 0 2px;transform:rotate(45deg)}
.askp-avatar.askp-await .askp-peppy,.askp-avatar.askp-await .askp-say{opacity:0}
/* the bubble's pop and settle run from core/askpeppy.js (Web Animations), so a list re-render that
   moves the avatar never restarts them */
/* welcome card: the avatar takes the old sparkle icon's place; phone list: shown on phones only */
.sup-welcome .askp-avatar{margin:2px 0 2px}
.askp-avatar.sup-list-peppy{display:none}
@media (max-width:860px){
  .askp-avatar.sup-list-peppy{display:inline-flex;margin:2px 0 12px}
  .askp-say{font-size:14.5px;padding:7px 12px}
}