/* Website chat bubble (assets/js/webchat.js). Draws from the site's own
   tokens, so it follows the theme and dark mode. */
.wchat{--wc-b:calc(20px + env(safe-area-inset-bottom,0px));--wc-r:calc(20px + env(safe-area-inset-right,0px));
  position:fixed;right:var(--wc-r);bottom:var(--wc-b);z-index:230;font-family:var(--font-body,system-ui,sans-serif);}
html.app-mode .wchat{--wc-b:calc(96px + env(safe-area-inset-bottom,0px));}

.wchat__fab{position:relative;width:60px;height:60px;border:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  background:var(--navy,#0d2541);color:var(--snow,#f9fafd);box-shadow:0 6px 16px -6px rgba(13,37,65,.5),0 1px 3px rgba(13,37,65,.2);
  transition:transform .25s var(--ease-out,ease),box-shadow .25s ease,background .2s;}
html.dark .wchat__fab{background:var(--cyan,#2ba7c9);color:#04121f;}
.wchat__fab:hover{transform:translateY(-2px);box-shadow:0 9px 20px -7px rgba(13,37,65,.55),0 1px 3px rgba(13,37,65,.2);}
.wchat__fab:active{transform:scale(.96);}
.wchat__fab:focus-visible{outline:3px solid var(--cyan,#0092b7);outline-offset:3px;}
.wchat__fab > svg,.wchat__fabx{transition:transform .3s var(--ease-out,ease),opacity .2s;}
.wchat__fabx{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:rotate(-60deg);}
.wchat.is-open .wchat__fab > svg{opacity:0;transform:rotate(60deg) scale(.6);}
.wchat.is-open .wchat__fabx{opacity:1;transform:none;}
.wchat__dot{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;box-sizing:border-box;
  background:var(--cyan,#0092b7);color:#fff;font:700 11px/20px var(--font-body,system-ui,sans-serif);box-shadow:0 0 0 2px var(--paper,#f9fafd);}
.wchat__dot[hidden]{display:none;}

.wchat__panel{position:absolute;right:0;bottom:74px;width:min(370px,calc(100vw - 32px));height:min(540px,calc(100dvh - 140px));
  display:flex;flex-direction:column;overflow:hidden;border-radius:22px;background:var(--card,#fff);color:var(--ink,#0d2541);
  border:1px solid var(--line,rgba(13,37,65,.12));box-shadow:var(--shadow-lg,0 28px 70px rgba(13,37,65,.22));
  transform-origin:calc(100% - 30px) calc(100% + 40px);animation:wchatIn .32s var(--ease-out,ease);}
.wchat__panel[hidden]{display:none;}
@keyframes wchatIn{from{opacity:0;transform:translateY(10px) scale(.96);}}

.wchat__head{display:flex;align-items:center;gap:12px;padding:16px 14px 16px 18px;background:var(--navy,#0d2541);color:var(--snow,#f9fafd);}
html.dark .wchat__head{background:var(--cream-2,#09192c);color:var(--ink,#fbfcfd);border-bottom:1px solid var(--line,#2e3a49);}
.wchat__av{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--cyan,#0092b7);color:#fff;
  font:italic 400 1.35rem/1 var(--font-serif,Georgia,serif);}
.wchat__who{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.wchat__who strong{font-weight:600;font-size:.98rem;letter-spacing:.01em;}
.wchat__who span{font-size:.76rem;opacity:.75;}
.wchat__close{flex:none;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer;display:grid;place-items:center;opacity:.8;}
.wchat__close:hover{opacity:1;background:rgba(255,255,255,.12);}

.wchat__list{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:18px 14px 8px;display:flex;flex-direction:column;gap:8px;
  background:var(--cream,#f3f5f9);}
.wchat__m{max-width:84%;display:flex;flex-direction:column;gap:3px;}
.wchat__m p{margin:0;padding:10px 13px;border-radius:18px;font-size:.9rem;line-height:1.45;overflow-wrap:anywhere;}
.wchat__m p a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.wchat__m time{font-size:.68rem;color:var(--muted,#6b7486);padding:0 6px;}
.wchat__m--a{align-self:flex-start;}
.wchat__m--a p{background:var(--card,#fff);color:var(--ink,#0d2541);border:1px solid var(--line,rgba(13,37,65,.1));border-bottom-left-radius:6px;}
.wchat__m--v{align-self:flex-end;align-items:flex-end;}
.wchat__m--v p{background:var(--navy,#0d2541);color:var(--snow,#f9fafd);border-bottom-right-radius:6px;}
html.dark .wchat__m--v p{background:var(--cyan,#2ba7c9);color:#04121f;}
.wchat__m.is-pending p{opacity:.6;}
.wchat__m--greet p{border-bottom-left-radius:18px;}
.wchat__sys{margin:6px auto 2px;max-width:88%;text-align:center;font-size:.76rem;line-height:1.45;color:var(--muted,#6b7486);}

.wchat__form{padding:10px 12px calc(12px + env(safe-area-inset-bottom,0px) * 0);border-top:1px solid var(--line,rgba(13,37,65,.1));background:var(--card,#fff);
  display:flex;flex-direction:column;gap:8px;}
.wchat__ident{display:grid;grid-template-columns:1fr;gap:6px;}
.wchat__ident[hidden]{display:none;}
.wchat__ident input,.wchat__row textarea{width:100%;box-sizing:border-box;font:inherit;font-size:16px;color:var(--ink,#0d2541);
  background:var(--cream,#f3f5f9);border:1px solid transparent;border-radius:12px;padding:9px 12px;outline:none;transition:border-color .2s,background .2s;}
.wchat__ident input:focus,.wchat__row textarea:focus{border-color:var(--cyan,#0092b7);background:var(--card,#fff);}
.wchat__hp{position:absolute !important;left:-9999px !important;width:1px !important;height:1px !important;opacity:0 !important;}
.wchat__row{display:flex;align-items:flex-end;gap:8px;}
.wchat__row textarea{resize:none;min-height:42px;max-height:132px;line-height:1.4;}
.wchat__send{flex:none;width:42px;height:42px;border:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  background:var(--cyan,#0092b7);color:#fff;transition:transform .15s,background .2s;}
.wchat__send:hover{background:var(--cyan-deep,#0a6e8f);}
.wchat__send:active{transform:scale(.94);}
.wchat__err{margin:0;font-size:.78rem;color:#b3261e;}
.wchat__err[hidden]{display:none;}

@media (max-width:520px){
  .wchat{--wc-r:calc(16px + env(safe-area-inset-right,0px));}
  .wchat__fab{width:56px;height:56px;}
  .wchat.is-open{left:0;right:0;bottom:0;}
  .wchat.is-open .wchat__fab{display:none;}
  .wchat__panel{position:fixed;left:0;right:0;bottom:0;width:auto;height:min(88dvh,640px);border-radius:22px 22px 0 0;border-bottom:0;
    padding-bottom:env(safe-area-inset-bottom,0px);background:var(--card,#fff);}
}
/* A little wiggle now and then to say it's there (see webchat.js). */
/* No fill-mode: once it has wiggled the button goes back to being a plain
   element. Holding the last frame kept it on its own layer, and Safari clipped
   its shadow to that layer's edge. */
.wchat__fab.is-wiggle{animation:wchatWiggle .9s var(--ease-out,ease);}
@keyframes wchatWiggle{
  0%{transform:rotate(0) scale(1);}
  12%{transform:rotate(-14deg) scale(1.08);}
  26%{transform:rotate(12deg) scale(1.08);}
  40%{transform:rotate(-9deg) scale(1.05);}
  54%{transform:rotate(6deg) scale(1.03);}
  68%{transform:rotate(-3deg) scale(1.01);}
  100%{transform:rotate(0) scale(1);}
}
@media (prefers-reduced-motion:reduce){.wchat__panel{animation:none;}.wchat__fab.is-wiggle{animation:none;}.wchat__fab,.wchat__fab > svg,.wchat__fabx{transition:none;}}
@media print{.wchat{display:none;}}
/* Out of the way while the mobile menu is open. */
body.menu-open .wchat{opacity:0;pointer-events:none;transition:opacity .2s;}
