/* Helper buddy extras: tip/ask bubbles, the AI power-up, the "Give…" tray. Loaded with buddy.css. */
.helpbot-say.rich { pointer-events: auto; max-width: 260px; white-space: normal; }
.helpbot-say .say-text { display: block; }
.helpbot-say .say-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.helpbot-say .say-actions button, .helpbot-say .say-ask button {
  font: 600 11px var(--mono, ui-monospace, monospace); padding: 4px 9px; border-radius: 99px; cursor: pointer;
  border: 1px solid rgba(10, 10, 10, .25); background: #0a0a0a; color: #f1ede4;
}
.helpbot-say .say-actions button:last-child { background: transparent; color: #0a0a0a; }
.helpbot-say .say-ask { display: flex; gap: 5px; margin-top: 7px; }
.helpbot-say .say-ask input {
  flex: 1; min-width: 0; font: 12px var(--mono, ui-monospace, monospace); padding: 4px 8px; border-radius: 8px;
  border: 1px solid rgba(10, 10, 10, .3); background: #fff; color: #0a0a0a;
}

/* AI power-up: a soft glow and orbiting sparkles; the brain hat is drawn in the SVG */
.helpbot.is-powered::before {
  content: ""; position: absolute; left: 50%; bottom: 14px; width: 130px; height: 120px; margin-left: -65px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(231, 239, 255, .45), rgba(92, 200, 255, .18) 60%, transparent);
  animation: buddy-aura 1.8s ease-in-out infinite alternate; pointer-events: none;
}
.helpbot.is-powered .m-led { animation: buddy-blink .8s steps(2) infinite; }
@keyframes buddy-aura { from { transform: scale(.92); opacity: .7; } to { transform: scale(1.08); opacity: 1; } }
@keyframes buddy-blink { 50% { opacity: .2; } }

/* the "Give…" tray (shown in the HUD while he's mad) */
.sh-give { display: grid; gap: 6px; }
.sh-give[hidden] { display: none; }
.sh-give-l { justify-self: start; padding: 2px 0; border: 0; background: none; color: #ff8fa3; font: inherit; cursor: pointer; }
.sh-give-l:focus-visible { outline: 2px solid var(--tlbx); outline-offset: 2px; }
.sh-give-body { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding-top: 8px; border-top: 1px solid rgba(241, 237, 228, .15); }
.sh-give-body[hidden] { display: none; }
.sh-item {
  position: relative; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 1px solid rgba(241, 237, 228, .18);
  background: rgba(241, 237, 228, .06); font-size: 16px; line-height: 1; cursor: grab; touch-action: none; overflow: hidden;
}
.sh-mk {
  height: 30px; padding: 0 9px; border-radius: 15px; border: 1px solid rgba(255, 143, 163, .45); background: rgba(255, 143, 163, .1);
  color: #ffc2cc; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.sh-mk:disabled { cursor: default; opacity: .45; }
.sh-item[hidden] { display: none; }
.sh-item:disabled { cursor: default; opacity: .45; }
.sh-item::after { content: ""; position: absolute; inset: 0; background: rgba(10, 10, 10, .6); transform-origin: bottom; transform: scaleY(var(--cd, 0)); }

/* treats placed on the page */
.helpbot-treat {
  position: absolute; font-size: 22px; line-height: 1; transform: translate(-50%, -100%); pointer-events: none;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .45)); animation: buddy-wobble 1.4s ease-in-out infinite;
}
/* a candy made with "Make candy": drawn on a canvas, dragged onto him */
.helpbot-candy {
  position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; pointer-events: auto; cursor: grab; touch-action: none;
  background: center / contain no-repeat; font-size: 30px; line-height: 40px; text-align: center;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .4));
}
.helpbot-candy.grabbing { cursor: grabbing; }
.helpbot-candy:focus-visible { outline: 2px dashed var(--tlbx, #e7efff); outline-offset: 3px; }
@keyframes buddy-wobble { 0%, 100% { rotate: -6deg; } 50% { rotate: 6deg; } }
.m-face { transition: opacity .25s; }

@media (prefers-reduced-motion: reduce) {
  .helpbot.is-powered::before, .helpbot.is-powered .m-led, .helpbot-treat { animation: none; }
}