/* The help buddy: lifted off the page (3D shadow), always a little alive, movable (buddy-move.js).
   Shared by the platform (#chat-fab) and the website (.hb). */

/* lifted: a darker rim, a near shadow and a soft one further down */
.chat-btn .buddy, .hb-btn .buddy {
  box-shadow: 0 .02em 0 rgba(255,255,255,.25) inset, 0 -.03em .06em rgba(0,0,0,.6) inset,
    0 .05em .08em rgba(0,0,0,.45), 0 .16em .3em rgba(0,0,0,.32), 0 .32em .6em rgba(15,23,42,.28);
  outline: .012em solid rgba(255,255,255,.35); outline-offset: -.012em;
  animation: bm-float 3.4s ease-in-out infinite;
}
/* its shadow on the floor, smaller when it rises */
.chat-btn::after, .hb-btn::after {
  content: ""; display: block !important; position: absolute; left: 14%; right: 14%; bottom: -10px; height: 9px; border: 0 !important;
  border-radius: 50%; background: rgba(15,23,42,.32); filter: blur(5px); inset: auto 14% -10px 14%;
  animation: bm-floor 3.4s ease-in-out infinite; pointer-events: none; z-index: -1;
}
@keyframes bm-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -.05em; } }
@keyframes bm-floor { 0%, 100% { transform: scaleX(1); opacity: .9; } 50% { transform: scaleX(.8); opacity: .6; } }

/* looking to one side, then the other */
.bm-look-l .chat-btn .bd-eyes, .bm-look-l .hb-btn .bd-eyes { transform: translate(-.07em, .01em) !important; transition: transform .35s cubic-bezier(.3,.8,.3,1); }
.bm-look-r .chat-btn .bd-eyes, .bm-look-r .hb-btn .bd-eyes { transform: translate(.06em, -.01em) !important; transition: transform .35s cubic-bezier(.3,.8,.3,1); }
.bm-look-l .chat-btn .bd-ball, .bm-look-l .hb-btn .bd-ball { transform: translate(-.05em, 0); }
.bm-look-r .chat-btn .bd-ball, .bm-look-r .hb-btn .bd-ball { transform: translate(.04em, -.02em); }
.bm-look-l .chat-btn .buddy, .bm-look-l .hb-btn .buddy { rotate: -5deg; transition: rotate .45s cubic-bezier(.3,.8,.3,1); }
.bm-look-r .chat-btn .buddy, .bm-look-r .hb-btn .buddy { rotate: 5deg; transition: rotate .45s cubic-bezier(.3,.8,.3,1); }
.chat-btn .buddy, .hb-btn .buddy { transition: rotate .45s cubic-bezier(.3,.8,.3,1); }

/* picked up with a long press */
.bm-drag .chat-btn, .bm-drag .hb-btn { cursor: grabbing; scale: 1.14; transition: scale .18s; }
.bm-drag .chat-btn .buddy, .bm-drag .hb-btn .buddy { animation: none; box-shadow: 0 .05em .08em rgba(0,0,0,.4), 0 .3em .6em rgba(0,0,0,.35), 0 .55em 1em rgba(15,23,42,.3); }
.bm-drag .chat-btn::after, .bm-drag .hb-btn::after { bottom: -22px; opacity: .45; transform: scaleX(.75); animation: none; }
#chat-fab.bm-drag, .hb.bm-drag { transition: none !important; }

/* moved to its own place: the window opens towards the middle of the screen */
#chat-fab.bm-moved, .hb.bm-moved { transition: none; }
#chat-fab[data-bmv="t"], .hb[data-bmv="t"] { flex-direction: column-reverse; }
#chat-fab[data-bmh="l"], .hb[data-bmh="l"] { align-items: flex-start; }

/* a short line from the buddy */
.bm-say { position: absolute; bottom: calc(100% + 10px); right: 0; max-width: 220px; padding: 8px 12px; border-radius: 14px 14px 4px 14px;
  background: #fff; color: #1f2937; font: 600 13px/1.35 system-ui, sans-serif; white-space: nowrap; box-shadow: 0 8px 24px rgba(15,23,42,.18);
  opacity: 0; transform: translateY(6px) scale(.96); transition: opacity .2s, transform .25s cubic-bezier(.3,.8,.3,1); pointer-events: none; }
.bm-say.on { opacity: 1; transform: none; }
[data-bmh="l"] > .bm-say { right: auto; left: 0; border-radius: 14px 14px 14px 4px; }
[data-bmv="t"] > .bm-say { bottom: auto; top: calc(100% + 10px); }

@media (prefers-reduced-motion: reduce) {
  .chat-btn .buddy, .hb-btn .buddy, .chat-btn::after, .hb-btn::after { animation: none; }
}

/* sent away («largohu»): it waves off and stays hidden */
#chat-fab.bm-gone, .hb.bm-gone { display: none !important; }
.bm-leaving .chat-btn, .bm-leaving .hb-btn { animation: bm-leave .45s cubic-bezier(.5,0,.75,0) forwards !important; }
@keyframes bm-leave { to { transform: translateY(30px) scale(.4); opacity: 0; } }