/* Chat bubble (assets/help/chat-bubble.js): Sofia as a chat head while a conversation is in progress. Positioned with
   `translate` (set by the script); `transform`/`scale` animations run on the inner face so they never fight the drag. */
.vcb { position: fixed; left: 0; top: 0; z-index: 45; width: 62px; height: 62px; padding: 0; border: 0; border-radius: 50%; background: none;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.vcb[hidden] { display: none; }
.vcb.is-snap { transition: translate .42s cubic-bezier(.34, 1.4, .64, 1); }
.vcb.is-drag { cursor: grabbing; }
.vcb:focus { outline: none; }
.vcb:focus-visible .vcb-face { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--lemon, #ffcf3f), 0 0 0 10px var(--sea-3, #1683bd), 0 14px 26px -8px rgba(11, 34, 54, .55); }
.vcb-face { position: absolute; inset: 0; display: block; border-radius: 50%;
  background: radial-gradient(circle at 50% 28%, var(--lemon-2, #ffe27a), var(--lemon, #ffcf3f) 72%);
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--lemon, #ffcf3f), 0 14px 26px -8px rgba(11, 34, 54, .55);
  transition: transform .2s cubic-bezier(.2, .7, .2, 1), box-shadow .2s; }
.vcb-face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 9%; pointer-events: none; }
.vcb:hover .vcb-face { transform: scale(1.05); }
.vcb.is-drag .vcb-face { transform: scale(1.1); box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--lemon, #ffcf3f), 0 22px 34px -10px rgba(11, 34, 54, .6); }
.vcb.is-hot .vcb-face { transform: scale(.86); box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--coral, #ff7a59), 0 10px 20px -8px rgba(11, 34, 54, .5); }
.vcb-badge { position: absolute; top: -6px; right: -6px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; display: grid; place-items: center;
  background: var(--coral, #ff7a59); color: #fff; font: 700 .8rem/1 var(--display, system-ui, sans-serif); box-shadow: 0 0 0 2.5px #fff, 0 3px 8px rgba(11, 34, 54, .3); }
.vcb.is-left .vcb-badge { right: auto; left: -6px; }
.vcb-badge[hidden] { display: none; }

/* appear, new reply, hidden */
.vcb.is-in .vcb-face { animation: vcb-in .5s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes vcb-in { from { transform: scale(.2); opacity: 0; } }
.vcb.is-bump .vcb-face { animation: vcb-bump .9s cubic-bezier(.3, .7, .4, 1) both; }
.vcb.is-bump .vcb-face::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; box-shadow: 0 0 0 3px var(--lemon, #ffcf3f); animation: vcb-ring .9s ease-out both; pointer-events: none; }
@keyframes vcb-bump { 0% { transform: none; } 18% { transform: translateY(-12px) scale(1.06); } 36% { transform: translateY(0) scale(.97, 1.03); } 52% { transform: translateY(-5px); } 68%, 100% { transform: none; } }
@keyframes vcb-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.55); opacity: 0; } }
.vcb.is-gone .vcb-face { animation: vcb-gone .36s cubic-bezier(.5, 0, .75, 0) both; }
@keyframes vcb-gone { to { transform: scale(.15); opacity: 0; } }

/* hide target, bottom centre, only while dragging */
.vcb-target { position: fixed; left: 0; right: 0; bottom: 0; z-index: 44; height: calc(190px + env(safe-area-inset-bottom)); pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; padding-bottom: calc(26px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(8, 48, 74, 0), rgba(8, 48, 74, .5)); opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
.vcb-target.is-on { opacity: 1; visibility: visible; transition: opacity .2s; }
.vcb-target b { font: 600 .9rem/1 var(--display, system-ui, sans-serif); color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); letter-spacing: .02em; }
.vcb-target-ring { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: #fff;
  background: rgba(8, 48, 74, .62); box-shadow: inset 0 0 0 2.5px rgba(255, 255, 255, .85); backdrop-filter: blur(6px);
  transform: translateY(16px) scale(.8); transition: transform .28s cubic-bezier(.34, 1.56, .64, 1), background .15s; }
.vcb-target-ring svg { width: 26px; height: 26px; }
.vcb-target.is-on .vcb-target-ring { transform: none; }
.vcb-target.is-hot .vcb-target-ring { transform: scale(1.22); background: var(--coral, #ff7a59); }
.vcb-target.is-gulp .vcb-target-ring { animation: vcb-gulp .38s ease-out both; }
@keyframes vcb-gulp { 0% { transform: scale(1.22); } 45% { transform: scale(1.38); } 100% { transform: scale(.8); opacity: 0; } }

.vcb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.vcb-safe { position: fixed; left: 0; top: 0; width: 0; height: 0; visibility: hidden; pointer-events: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
/* The panel is open: the bubble is hidden by the script; keep the target away too */
html.vc-open .vcb-target { display: none; }

@media (prefers-reduced-motion: reduce) {
  .vcb.is-snap { transition: none; }
  .vcb-face, .vcb-target, .vcb-target-ring { transition: none; }
  .vcb.is-in .vcb-face, .vcb.is-bump .vcb-face, .vcb.is-bump .vcb-face::after, .vcb.is-gone .vcb-face, .vcb-target.is-gulp .vcb-target-ring { animation: none; }
}