/* Webby chat widget. Shared engine styles; each site sets its own colors in the --wb-* tokens. */
.wb-root{
  --wb-accent:#37BAF1;      /* header band, launcher ring */
  --wb-accent-ink:#1D2127;  /* text on the accent band */
  --wb-user:#337AB7;        /* visitor bubbles */
  --wb-user-ink:#FFFFFF;
  --wb-bot:#F2F2F2;         /* Webby bubbles */
  --wb-ink:#2E353E;         /* body text */
  --wb-muted:#5C636B;
  --wb-link:#0077B3;
  --wb-send:#FB0202;        /* primary button */
  --wb-send-hover:#D50202;
  --wb-avatar-bg:#E8F6FD;
  --wb-panel:#FFFFFF;
  --wb-line:#E3E6EA;
  --wb-radius:14px;
  --wb-font:"Open Sans",Arial,sans-serif;
  position:fixed; right:20px; bottom:20px; z-index:2147483000;
  font-family:var(--wb-font); color:var(--wb-ink); font-size:15px; line-height:1.5;
}
.wb-root *,.wb-root *::before,.wb-root *::after{box-sizing:border-box}
.wb-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Avatar */
.wb-av{display:block;position:relative;border-radius:50%;background:var(--wb-avatar-bg);overflow:hidden;flex:none}
.wb-av svg,.wb-av img{display:block;width:100%;height:100%}
.wb-av img{object-fit:cover}
.wb-fig *{transform-box:view-box}
.wb-fig .wb-head{transform-origin:52px 52px}
.wb-fig .wb-bob{transform-origin:52px 100px}
.wb-fig .wb-arm-wave{opacity:0;transform-origin:71px 62px}

/* Launcher */
.wb-launcher{all:unset;cursor:pointer;display:block;position:relative;width:66px;height:66px;border-radius:50%;
  box-shadow:0 6px 18px rgba(0,0,0,.18),0 0 0 3px var(--wb-accent);background:var(--wb-avatar-bg);transition:transform .2s ease}
.wb-launcher:hover{transform:translateY(-2px) scale(1.04)}
.wb-launcher:focus-visible{outline:3px solid var(--wb-link);outline-offset:4px}
.wb-launcher .wb-av{width:100%;height:100%}
.wb-dot{position:absolute;right:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#3DBE4B;border:2px solid #fff}
.wb-ring{position:absolute;inset:-3px;border-radius:50%;pointer-events:none;opacity:0}
.wb-root[data-open="true"] .wb-launcher{transform:scale(.9)}

/* Nudge bubble */
.wb-nudge{position:absolute;right:6px;bottom:84px;width:max-content;max-width:230px;background:#fff;color:var(--wb-ink);
  border-radius:14px 14px 4px 14px;padding:10px 34px 10px 14px;font-size:14px;box-shadow:0 6px 20px rgba(0,0,0,.15);
  opacity:0;transform:translateY(8px) scale(.96);transform-origin:100% 100%;pointer-events:none;transition:opacity .25s,transform .25s}
.wb-nudge.is-on{opacity:1;transform:none;pointer-events:auto}
.wb-nudge button{all:unset;cursor:pointer;position:absolute;right:8px;top:6px;width:22px;height:22px;text-align:center;line-height:22px;color:var(--wb-muted);border-radius:50%}
.wb-nudge button:focus-visible{outline:2px solid var(--wb-link)}
.wb-nudge-open{all:unset;cursor:pointer}

/* Panel */
.wb-panel{position:absolute;right:0;bottom:84px;width:min(380px,calc(100vw - 32px));height:min(580px,calc(100vh - 120px));
  display:flex;flex-direction:column;background:var(--wb-panel);border-radius:var(--wb-radius);overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.22);transform-origin:100% 100%;animation:wbIn .28s cubic-bezier(.2,.9,.3,1.2)}
.wb-panel[hidden]{display:none}
.wb-head{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 14px;background:var(--wb-accent);color:var(--wb-accent-ink)}
.wb-head .wb-av{width:48px;height:48px;background:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.7)}
.wb-title{font-weight:700;font-size:17px;line-height:1.2}
.wb-sub{font-size:12.5px;line-height:1.3}
.wb-head-text{flex:1;min-width:0}
.wb-iconbtn{all:unset;cursor:pointer;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--wb-accent-ink)}
.wb-iconbtn:hover{background:rgba(255,255,255,.35)}
.wb-iconbtn:focus-visible{outline:2px solid var(--wb-accent-ink)}
.wb-log{flex:1;overflow-y:auto;padding:16px 14px 8px;display:flex;flex-direction:column;gap:8px;scroll-behavior:smooth}
.wb-msg{max-width:85%;padding:9px 13px;border-radius:16px;white-space:normal;overflow-wrap:anywhere;animation:wbPop .22s ease-out}
.wb-msg a{color:var(--wb-link);text-decoration:underline}
.wb-msg.wb-bot{align-self:flex-start;background:var(--wb-bot);border-bottom-left-radius:5px}
.wb-msg.wb-user{align-self:flex-end;background:var(--wb-user);color:var(--wb-user-ink);border-bottom-right-radius:5px}
.wb-msg.wb-user a{color:var(--wb-user-ink)}
.wb-msg.wb-note{align-self:center;background:transparent;color:var(--wb-muted);font-size:12.5px;padding:2px 8px;text-align:center}
.wb-typing{display:inline-flex;gap:4px;padding:12px 14px}
.wb-typing i{width:7px;height:7px;border-radius:50%;background:#9AA1A8;animation:wbDot 1.1s infinite ease-in-out}
.wb-typing i:nth-child(2){animation-delay:.15s}.wb-typing i:nth-child(3){animation-delay:.3s}
.wb-chips{display:flex;flex-wrap:wrap;gap:6px;padding:4px 14px 8px}
.wb-chip{all:unset;cursor:pointer;font-size:13.5px;padding:6px 12px;border-radius:999px;border:1.5px solid var(--wb-link);color:var(--wb-link);background:#fff;transition:background .15s,transform .15s}
.wb-chip:hover{background:#EEF7FC;transform:translateY(-1px)}
.wb-chip:focus-visible{outline:2px solid var(--wb-link);outline-offset:2px}
.wb-form{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;border-top:1px solid var(--wb-line)}
.wb-form textarea{flex:1;resize:none;border:1.5px solid var(--wb-line);border-radius:12px;padding:9px 12px;font:inherit;font-size:15px;color:var(--wb-ink);max-height:110px;min-height:42px;background:#fff}
.wb-form textarea:focus{outline:none;border-color:var(--wb-accent);box-shadow:0 0 0 3px rgba(55,186,241,.25)}
.wb-send{all:unset;cursor:pointer;width:42px;height:42px;border-radius:12px;background:var(--wb-send);color:#fff;display:grid;place-items:center;transition:background .15s,transform .15s}
.wb-send:hover{background:var(--wb-send-hover)}
.wb-send:active{transform:scale(.94)}
.wb-send:focus-visible{outline:3px solid var(--wb-link);outline-offset:2px}
.wb-send[disabled]{opacity:.5;cursor:default}
.wb-foot{font-size:11.5px;color:var(--wb-muted);padding:0 14px 10px;line-height:1.4}
.wb-foot a{color:var(--wb-link)}

/* Sparkles when a request is saved */
.wb-spark{position:absolute;width:7px;height:7px;border-radius:50%;pointer-events:none;opacity:0}

/* ---------- Webby's moments of delight ---------- */
@keyframes wbIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
@keyframes wbPop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes wbDot{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-4px);opacity:1}}
@keyframes wbBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6px)}}
@keyframes wbTilt{0%,84%,100%{transform:rotate(0)}88%{transform:rotate(-9deg)}93%{transform:rotate(6deg)}97%{transform:rotate(-2deg)}}
@keyframes wbWave{from{transform:rotate(-14deg)}to{transform:rotate(16deg)}}
@keyframes wbHop{0%,100%{transform:translateY(0)}30%{transform:translateY(-7px) scaleY(1.03)}55%{transform:translateY(0) scaleY(.96)}75%{transform:translateY(-2px)}}
@keyframes wbThink{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes wbRing{0%{opacity:.7;box-shadow:0 0 0 0 rgba(55,186,241,.6)}100%{opacity:0;box-shadow:0 0 0 18px rgba(55,186,241,0)}}
@keyframes wbSpark{0%{opacity:1;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1)}}
@keyframes wbImgTilt{0%,84%,100%{transform:rotate(0)}88%{transform:rotate(-6deg)}93%{transform:rotate(4deg)}}

/* idle life: a gentle float and a curious head tilt now and then */
.wb-fig .wb-bob{animation:wbBob 3.4s ease-in-out infinite}
.wb-fig .wb-head{animation:wbTilt 8s ease-in-out infinite}
.wb-launcher .wb-fig .wb-head{animation-delay:2s}
.wb-av img{animation:wbImgTilt 8s ease-in-out infinite;transform-origin:50% 90%}
/* says hi: waves when the chat opens or a request is saved */
.wb-av.is-waving .wb-arm-rest{opacity:0}
.wb-av.is-waving .wb-arm-wave{opacity:1;animation:wbWave .32s ease-in-out 6 alternate}
.wb-av.is-hopping .wb-bob,.wb-av.is-hopping img{animation:wbHop .65s ease-out 1}
/* thinking while a reply is on the way */
.wb-av.is-thinking .wb-head,.wb-av.is-thinking img{animation:wbThink 1.1s ease-in-out infinite}
/* leans in while the visitor types */
.wb-av.is-curious .wb-head{animation:none;transform:rotate(-8deg);transition:transform .3s}
.wb-ring.is-on{animation:wbRing 1.4s ease-out 2}
.wb-spark.is-on{animation:wbSpark .8s ease-out forwards}

@media (max-width:480px){
  .wb-root{right:14px;bottom:14px}
  .wb-root[data-open="true"]{inset:0}
  .wb-root[data-open="true"] .wb-launcher{display:none}
  .wb-root[data-open="true"] .wb-panel{position:fixed;inset:0;width:100%;height:100%;border-radius:0}
}
@media (prefers-reduced-motion:reduce){
  .wb-root *,.wb-root *::before,.wb-root *::after{animation:none!important;transition:none!important}
  .wb-av.is-waving .wb-arm-rest{opacity:1}
  .wb-av.is-waving .wb-arm-wave{opacity:0}
  .wb-log{scroll-behavior:auto}
}