#haxel-chatbot {
  --hc-bg: #0f172a;
  --hc-open-bg: #111827;
  --hc-muted: #cbd5e1;
  --hc-text: #f8fafc;
  --hc-accent: #2563eb;
  --hc-accent-rgb: 37, 99, 235;
  --hc-accent-12: #2563eb1f;
  --hc-accent-15: #2563eb26;
  --hc-accent-18: #2563eb2e;
  --hc-accent-20: #2563eb33;
  --hc-accent-22: #2563eb38;
  --hc-accent-28: #2563eb47;
  --hc-accent-30: #2563eb4d;
  --hc-accent-35: #2563eb59;
  --hc-accent-40: #2563eb66;
  --hc-accent-50: #2563eb80;
  --hc-accent-55: #2563eb8c;
  --hc-accent-60: #2563eb99;
  --hc-accent-65: #2563eba6;
  --hc-accent-95: #2563ebf2;
  --hc-input-bg: #0b1220;
  --hc-open-border-width: 1px;
  --hc-msg-border-width: 1px;
  --hc-panel-width: 370px;
  --hc-panel-height: 520px;
  --hc-open-font-size: 14px;
  --hc-open-pad-y: 10px;
  --hc-open-pad-x: 18px;
  --hc-msg-font-size: 14px;
  --hc-msg-pad-y: 9px;
  --hc-msg-pad-x: 12px;
  --hc-panel-anim-dur: 300ms;
  --hc-msg-anim-dur: 240ms;
  --hc-btn-anim-dur: 180ms;
  --hc-typing-anim-dur: 900ms;
  --hc-attn-anim-dur: 2200ms;
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 9999;
  font: 500 13.5px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}

#haxel-chatbot[data-anim-speed="slow"] {
  --hc-panel-anim-dur: 430ms;
  --hc-msg-anim-dur: 340ms;
  --hc-btn-anim-dur: 260ms;
  --hc-typing-anim-dur: 1250ms;
}

#haxel-chatbot[data-anim-speed="fast"] {
  --hc-panel-anim-dur: 210ms;
  --hc-msg-anim-dur: 160ms;
  --hc-btn-anim-dur: 120ms;
  --hc-typing-anim-dur: 700ms;
}

#haxel-chatbot[data-anim-attention-speed="very_slow"] {
  --hc-attn-anim-dur: 3400ms;
}

#haxel-chatbot[data-anim-attention-speed="slow"] {
  --hc-attn-anim-dur: 2800ms;
}

#haxel-chatbot[data-anim-attention-speed="fast"] {
  --hc-attn-anim-dur: 1700ms;
}

#haxel-chatbot[data-anim-attention-speed="very_fast"] {
  --hc-attn-anim-dur: 1200ms;
}

#haxel-chatbot .chat-open {
  border: var(--hc-open-border-width) solid var(--hc-accent-40);
  background: var(--hc-open-bg);
  color: var(--hc-text);
  border-radius: 999px;
  padding: var(--hc-open-pad-y) var(--hc-open-pad-x);
  cursor: pointer;
  box-shadow: 0 2px 12px var(--hc-accent-18);
  transition: border-color 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
  transform-origin: center;
  will-change: transform, box-shadow, filter, opacity;
  font-size: var(--hc-open-font-size);
  line-height: 1.2;
}

#haxel-chatbot .chat-open:hover {
  border-color: var(--hc-accent-60);
  box-shadow: 0 2px 18px var(--hc-accent-28);
}

#haxel-chatbot .chat-attention-note {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  max-width: min(270px, calc(100vw - 44px));
  padding: 0.42rem 0.62rem;
  border-radius: 10px;
  border: 1px solid var(--hc-accent-35);
  background: var(--hc-bg);
  color: var(--hc-text);
  font-size: 0.78rem;
  line-height: 1.3;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.32);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) scale(0.98);
}

#haxel-chatbot .chat-attention-note.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: hcNoticeIn 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

#haxel-chatbot[data-anim-attention="pulse"] .chat-open {
  animation: hcAttentionPulse var(--hc-attn-anim-dur) ease-in-out infinite;
}

#haxel-chatbot[data-anim-attention="heartbeat"] .chat-open {
  animation: hcAttentionHeartbeat var(--hc-attn-anim-dur) ease-in-out infinite;
}

#haxel-chatbot[data-anim-attention="bounce"] .chat-open {
  animation: hcAttentionBounce var(--hc-attn-anim-dur) cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

#haxel-chatbot[data-anim-attention="bob"] .chat-open {
  animation: hcAttentionBob var(--hc-attn-anim-dur) ease-in-out infinite;
}

#haxel-chatbot[data-anim-attention="wiggle"] .chat-open {
  animation: hcAttentionWiggle var(--hc-attn-anim-dur) ease-in-out infinite;
}

#haxel-chatbot[data-anim-attention="shake"] .chat-open {
  animation: hcAttentionShake var(--hc-attn-anim-dur) ease-in-out infinite;
}

#haxel-chatbot[data-anim-attention="tada"] .chat-open {
  animation: hcAttentionTada var(--hc-attn-anim-dur) ease-in-out infinite;
}

#haxel-chatbot[data-anim-attention="swing"] .chat-open {
  animation: hcAttentionSwing var(--hc-attn-anim-dur) ease-in-out infinite;
}

#haxel-chatbot[data-anim-attention="jello"] .chat-open {
  animation: hcAttentionJello var(--hc-attn-anim-dur) ease-in-out infinite;
}

#haxel-chatbot[data-anim-attention="rubber_band"] .chat-open {
  animation: hcAttentionRubberBand var(--hc-attn-anim-dur) ease-in-out infinite;
}

#haxel-chatbot[data-anim-attention="glow"] .chat-open {
  animation: hcAttentionGlow var(--hc-attn-anim-dur) ease-in-out infinite;
}

#haxel-chatbot[data-anim-attention="breathe"] .chat-open {
  animation: hcAttentionBreathe var(--hc-attn-anim-dur) ease-in-out infinite;
}

#haxel-chatbot[data-anim-attention="pop"] .chat-open {
  animation: hcAttentionPop var(--hc-attn-anim-dur) ease-in-out infinite;
}

#haxel-chatbot[data-anim-attention="float"] .chat-open {
  animation: hcAttentionFloat var(--hc-attn-anim-dur) ease-in-out infinite;
}

#haxel-chatbot[data-anim-attention="rotate"] .chat-open {
  animation: hcAttentionRotate var(--hc-attn-anim-dur) ease-in-out infinite;
}

#haxel-chatbot[data-anim-attention="tilt"] .chat-open {
  animation: hcAttentionTilt var(--hc-attn-anim-dur) ease-in-out infinite;
}

#haxel-chatbot[data-anim-attention="flash"] .chat-open {
  animation: hcAttentionFlash var(--hc-attn-anim-dur) ease-in-out infinite;
}

#haxel-chatbot[data-anim-attention="shimmer"] .chat-open {
  background-image: linear-gradient(120deg, var(--hc-open-bg) 0%, var(--hc-open-bg) 35%, var(--hc-accent-30) 50%, var(--hc-open-bg) 65%, var(--hc-open-bg) 100%);
  background-size: 220% 100%;
  animation: hcAttentionShimmer var(--hc-attn-anim-dur) ease-in-out infinite;
}

#haxel-chatbot[data-anim-attention="orbit"] .chat-open {
  animation: hcAttentionOrbit var(--hc-attn-anim-dur) linear infinite;
}

#haxel-chatbot[data-anim-attention="ping"] .chat-open {
  animation: hcAttentionPing var(--hc-attn-anim-dur) ease-out infinite;
}

#haxel-chatbot[data-anim-attention="wave"] .chat-open {
  animation: hcAttentionWave var(--hc-attn-anim-dur) ease-in-out infinite;
}

#haxel-chatbot[data-anim-attention="none"] .chat-open {
  animation: none;
}

@keyframes hcNoticeIn {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes hcAttentionPulse {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.07); }
}

@keyframes hcAttentionHeartbeat {
  0%, 100% { transform: scale(1); }
  20% { transform: scale(1.08); }
  34% { transform: scale(1); }
  45% { transform: scale(1.11); }
  60% { transform: scale(1); }
}

@keyframes hcAttentionBounce {
  0%, 100% { transform: translateY(0); }
  22% { transform: translateY(-8px); }
  36% { transform: translateY(0); }
  48% { transform: translateY(-4px); }
}

@keyframes hcAttentionBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes hcAttentionWiggle {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(3deg); }
  35% { transform: rotate(-3deg); }
  50% { transform: rotate(2deg); }
  65% { transform: rotate(-1deg); }
}

@keyframes hcAttentionShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  35% { transform: translateX(3px); }
  50% { transform: translateX(-2px); }
  65% { transform: translateX(2px); }
}

@keyframes hcAttentionTada {
  0%, 100% { transform: scale(1) rotate(0deg); }
  20% { transform: scale(0.96) rotate(-2deg); }
  35% { transform: scale(1.08) rotate(2deg); }
  50% { transform: scale(1.02) rotate(-1deg); }
}

@keyframes hcAttentionSwing {
  0%, 100% { transform: rotate(0deg); }
  22% { transform: rotate(7deg); }
  36% { transform: rotate(-5deg); }
  50% { transform: rotate(3deg); }
  62% { transform: rotate(-2deg); }
}

@keyframes hcAttentionJello {
  0%, 100% { transform: skew(0deg, 0deg); }
  20% { transform: skew(-7deg, -2deg); }
  34% { transform: skew(5deg, 1deg); }
  46% { transform: skew(-3deg, -1deg); }
}

@keyframes hcAttentionRubberBand {
  0%, 100% { transform: scale3d(1, 1, 1); }
  22% { transform: scale3d(1.12, 0.89, 1); }
  34% { transform: scale3d(0.9, 1.1, 1); }
  46% { transform: scale3d(1.04, 0.96, 1); }
}

@keyframes hcAttentionGlow {
  0%, 100% { box-shadow: 0 2px 12px var(--hc-accent-18); }
  50% { box-shadow: 0 0 0 2px var(--hc-accent-35), 0 0 24px var(--hc-accent-55); }
}

@keyframes hcAttentionBreathe {
  0%, 100% { transform: scale(1); filter: saturate(1); }
  50% { transform: scale(1.05); filter: saturate(1.22); }
}

@keyframes hcAttentionPop {
  0%, 100% { transform: scale(1); }
  26% { transform: scale(1.12); }
  36% { transform: scale(0.98); }
}

@keyframes hcAttentionFloat {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-5px); }
  60% { transform: translateY(-2px); }
}

@keyframes hcAttentionRotate {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
  75% { transform: rotate(-2deg); }
}

@keyframes hcAttentionTilt {
  0%, 100% { transform: perspective(900px) rotateX(0deg); }
  50% { transform: perspective(900px) rotateX(14deg); }
}

@keyframes hcAttentionFlash {
  0%, 100% { opacity: 1; }
  40% { opacity: 0.58; }
  60% { opacity: 1; }
}

@keyframes hcAttentionShimmer {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}

@keyframes hcAttentionOrbit {
  0%, 100% { box-shadow: 0 0 0 0 var(--hc-accent-30), 0 2px 12px var(--hc-accent-18); }
  25% { box-shadow: 6px -1px 0 0 var(--hc-accent-30), 0 2px 12px var(--hc-accent-18); }
  50% { box-shadow: 0 -6px 0 0 var(--hc-accent-30), 0 2px 12px var(--hc-accent-18); }
  75% { box-shadow: -6px -1px 0 0 var(--hc-accent-30), 0 2px 12px var(--hc-accent-18); }
}

@keyframes hcAttentionPing {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 var(--hc-accent-35), 0 2px 12px var(--hc-accent-18); }
  45% { transform: scale(1.03); box-shadow: 0 0 0 10px transparent, 0 2px 12px var(--hc-accent-18); }
}

@keyframes hcAttentionWave {
  0%, 100% { transform: rotate(0deg); }
  18% { transform: rotate(6deg); }
  30% { transform: rotate(-5deg); }
  42% { transform: rotate(4deg); }
  54% { transform: rotate(-2deg); }
}

#haxel-chatbot .chat-panel {
  width: min(var(--hc-panel-width), calc(100vw - 28px));
  height: min(var(--hc-panel-height), calc(100vh - 80px));
  max-width: calc(100vw - 28px);
  max-height: calc(100vh - 80px);
  min-width: min(280px, calc(100vw - 28px));
  min-height: min(320px, calc(100vh - 80px));
  display: flex;
  flex-direction: column;
  background: var(--hc-bg);
  border: 1px solid var(--hc-accent-35);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
  transform-origin: right bottom;
  resize: both;
}

#haxel-chatbot .chat-panel[hidden] {
  display: none !important;
}

#haxel-chatbot .chat-panel.is-opening {
  animation: hcPanelSlideFade var(--hc-panel-anim-dur) cubic-bezier(0.22, 1, 0.36, 1);
}

#haxel-chatbot[data-anim-panel="zoom"] .chat-panel.is-opening {
  animation-name: hcPanelZoom;
}

#haxel-chatbot[data-anim-panel="flip"] .chat-panel.is-opening {
  animation-name: hcPanelFlip;
}

#haxel-chatbot[data-anim-panel="drop"] .chat-panel.is-opening {
  animation-name: hcPanelDrop;
}

#haxel-chatbot[data-anim-panel="bounce"] .chat-panel.is-opening {
  animation-name: hcPanelBounce;
}

#haxel-chatbot[data-anim-panel="none"] .chat-panel.is-opening {
  animation: none;
}

@keyframes hcPanelSlideFade {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes hcPanelZoom {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes hcPanelFlip {
  from { opacity: 0; transform: perspective(900px) rotateX(18deg) scale(0.96); }
  to { opacity: 1; transform: perspective(900px) rotateX(0deg) scale(1); }
}

@keyframes hcPanelDrop {
  from { opacity: 0; transform: translateY(-16px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes hcPanelBounce {
  0% { opacity: 0; transform: translateY(16px) scale(0.95); }
  62% { opacity: 1; transform: translateY(-3px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

#haxel-chatbot .chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--hc-accent-20);
  color: var(--hc-text);
  flex-shrink: 0;
}

#haxel-chatbot .chat-close {
  background: transparent;
  border: 1px solid var(--hc-accent-30);
  color: var(--hc-text);
  border-radius: 999px;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
  font-size: 0.8rem;
}

#haxel-chatbot .chat-body {
  padding: 0.75rem 0.85rem;
  color: var(--hc-muted);
  overflow-y: auto;
  flex: 1;
  scroll-behavior: smooth;
}

#haxel-chatbot .cb-msg {
  max-width: 88%;
  padding: var(--hc-msg-pad-y) var(--hc-msg-pad-x);
  border-radius: 14px;
  margin-bottom: 0.4rem;
  word-wrap: break-word;
  animation: hcMsgFadeUp var(--hc-msg-anim-dur) ease both;
  font-size: var(--hc-msg-font-size);
  line-height: 1.45;
}

#haxel-chatbot[data-anim-message="slide_left"] .cb-msg {
  animation-name: hcMsgSlideLeft;
}

#haxel-chatbot[data-anim-message="slide_right"] .cb-msg {
  animation-name: hcMsgSlideRight;
}

#haxel-chatbot[data-anim-message="pop"] .cb-msg {
  animation-name: hcMsgPop;
}

#haxel-chatbot[data-anim-message="blur_up"] .cb-msg {
  animation-name: hcMsgBlurUp;
}

#haxel-chatbot[data-anim-message="none"] .cb-msg {
  animation: none;
}

@keyframes hcMsgFadeUp {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hcMsgSlideLeft {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes hcMsgSlideRight {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes hcMsgPop {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes hcMsgBlurUp {
  from { opacity: 0; transform: translateY(6px); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

#haxel-chatbot .cb-bot {
  background: var(--hc-accent-12);
  border: var(--hc-msg-border-width) solid var(--hc-accent-18);
  color: var(--hc-text);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

#haxel-chatbot .cb-bot a {
  color: var(--hc-accent);
  text-decoration: underline;
}

#haxel-chatbot .cb-user {
  background: var(--hc-accent-28);
  border: var(--hc-msg-border-width) solid var(--hc-accent-35);
  color: var(--hc-text);
  margin-left: auto;
  border-bottom-right-radius: 4px;
  text-align: right;
}

#haxel-chatbot .cb-typing {
  display: flex;
  gap: 4px;
  padding: 0.55rem 0.75rem;
  margin-bottom: 0.4rem;
}

#haxel-chatbot .cb-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hc-accent-50);
}

#haxel-chatbot .cb-typing[data-typing-style="dots"] span {
  animation: cbDot var(--hc-typing-anim-dur) ease-in-out infinite;
}

#haxel-chatbot .cb-typing[data-typing-style="pulse"] span {
  animation: hcTypingPulse var(--hc-typing-anim-dur) ease-in-out infinite;
}

#haxel-chatbot .cb-typing[data-typing-style="wave"] span {
  animation: hcTypingWave var(--hc-typing-anim-dur) ease-in-out infinite;
}

#haxel-chatbot .cb-typing[data-typing-style="none"] span {
  animation: none;
  opacity: 0.75;
}

#haxel-chatbot .cb-typing span:nth-child(2) { animation-delay: 0.15s; }
#haxel-chatbot .cb-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes cbDot {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.85); }
  40% { opacity: 1; transform: scale(1.1); }
}

@keyframes hcTypingPulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}

@keyframes hcTypingWave {
  0%, 100% { transform: translateY(0); opacity: 0.35; }
  50% { transform: translateY(-3px); opacity: 1; }
}

#haxel-chatbot .cb-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.5rem 0 0.4rem;
  animation: hcMsgFadeUp var(--hc-msg-anim-dur) ease both;
}

#haxel-chatbot .cb-chip {
  background: transparent;
  border: 1px solid var(--hc-accent-35);
  color: var(--hc-text);
  border-radius: 999px;
  padding: 0.35rem 0.65rem;
  cursor: pointer;
  font-size: 0.82rem;
  transition: background var(--hc-btn-anim-dur), border-color var(--hc-btn-anim-dur);
}

#haxel-chatbot .cb-chip:hover {
  background: var(--hc-accent-15);
  border-color: var(--hc-accent-55);
}

#haxel-chatbot .cb-typeprompt {
  margin: 0.15rem 0 0.3rem;
  animation: hcMsgFadeUp var(--hc-msg-anim-dur) ease both;
}

#haxel-chatbot .cb-typelink {
  background: none;
  border: none;
  color: var(--hc-accent-65);
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--hc-btn-anim-dur);
}

#haxel-chatbot .cb-typelink:hover {
  color: var(--hc-accent-95);
}

#haxel-chatbot .cb-form-wrap {
  margin: 0.5rem 0 0.3rem;
  animation: hcMsgFadeUp var(--hc-msg-anim-dur) ease both;
}

#haxel-chatbot .cb-form {
  display: grid;
  gap: 0.4rem;
}

#haxel-chatbot .cb-form input,
#haxel-chatbot .cb-form textarea {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: var(--hc-input-bg);
  color: var(--hc-text);
  font: inherit;
}

#haxel-chatbot .cb-form textarea {
  min-height: 60px;
  resize: vertical;
}

#haxel-chatbot .cb-form input:focus,
#haxel-chatbot .cb-form textarea:focus {
  outline: none;
  border-color: var(--hc-accent-50);
}

#haxel-chatbot .cb-send {
  border: none;
  background: var(--hc-accent);
  color: #ffffff;
  border-radius: 999px;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  transition: opacity var(--hc-btn-anim-dur), transform var(--hc-btn-anim-dur), box-shadow var(--hc-btn-anim-dur);
}

#haxel-chatbot .cb-send:hover {
  opacity: 0.88;
}

#haxel-chatbot .cb-send:disabled {
  opacity: 0.5;
  cursor: default;
}

#haxel-chatbot .cb-status {
  font-size: 0.78rem;
  color: var(--hc-muted);
  min-height: 1.1em;
}

#haxel-chatbot .cb-anim-btn {
  position: relative;
  overflow: hidden;
  transform-origin: center;
  transition:
    transform var(--hc-btn-anim-dur) ease,
    box-shadow var(--hc-btn-anim-dur) ease,
    filter var(--hc-btn-anim-dur) ease;
  -webkit-tap-highlight-color: transparent;
}

#haxel-chatbot .cb-anim-btn::before,
#haxel-chatbot .cb-anim-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

#haxel-chatbot .cb-anim-btn::before {
  opacity: 0;
}

#haxel-chatbot .cb-anim-btn::after {
  opacity: 0;
  transform: scale(0);
}

#haxel-chatbot[data-anim-button-hover="lift"] .cb-anim-btn:hover {
  transform: translateY(-2px);
}

#haxel-chatbot[data-anim-button-hover="glow"] .cb-anim-btn:hover {
  box-shadow: 0 0 0 1px var(--hc-accent-35), 0 8px 18px var(--hc-accent-22);
}

#haxel-chatbot[data-anim-button-hover="pulse"] .cb-anim-btn:hover {
  animation: hcBtnPulse calc(var(--hc-btn-anim-dur) * 5) ease-in-out infinite;
}

#haxel-chatbot[data-anim-button-hover="shimmer"] .cb-anim-btn::before {
  background: linear-gradient(120deg, transparent 10%, rgba(255, 255, 255, 0.35) 45%, transparent 80%);
  transform: translateX(-130%);
}

#haxel-chatbot[data-anim-button-hover="shimmer"] .cb-anim-btn:hover::before {
  opacity: 1;
  transform: translateX(130%);
  transition: transform calc(var(--hc-btn-anim-dur) * 3) ease;
}

#haxel-chatbot[data-anim-button-hover="wobble"] .cb-anim-btn:hover {
  animation: hcBtnWobble calc(var(--hc-btn-anim-dur) * 2) ease;
}

#haxel-chatbot[data-anim-button-click="press"] .cb-anim-btn:active {
  transform: scale(0.97);
}

#haxel-chatbot[data-anim-button-click="bounce"] .cb-anim-btn:active {
  animation: hcBtnBounce calc(var(--hc-btn-anim-dur) * 2) ease;
}

#haxel-chatbot[data-anim-button-click="pop"] .cb-anim-btn:active {
  animation: hcBtnPop calc(var(--hc-btn-anim-dur) * 1.5) ease;
}

#haxel-chatbot[data-anim-button-click="ripple"] .cb-anim-btn::after {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 70%);
}

#haxel-chatbot[data-anim-button-click="ripple"] .cb-anim-btn:active::after {
  opacity: 1;
  transform: scale(1.8);
  transition: opacity calc(var(--hc-btn-anim-dur) * 2) ease, transform calc(var(--hc-btn-anim-dur) * 2) ease;
}

#haxel-chatbot[data-anim-button-click="shake"] .cb-anim-btn:active {
  animation: hcBtnShake calc(var(--hc-btn-anim-dur) * 1.8) ease;
}

@keyframes hcBtnPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

@keyframes hcBtnWobble {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(2deg); }
  50% { transform: rotate(-2deg); }
  75% { transform: rotate(1deg); }
  100% { transform: rotate(0deg); }
}

@keyframes hcBtnBounce {
  0% { transform: scale(1); }
  40% { transform: scale(0.92); }
  100% { transform: scale(1); }
}

@keyframes hcBtnPop {
  0% { transform: scale(1); }
  35% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes hcBtnShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  50% { transform: translateX(2px); }
  75% { transform: translateX(-1px); }
}

@media (prefers-reduced-motion: reduce) {
  #haxel-chatbot *,
  #haxel-chatbot *::before,
  #haxel-chatbot *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}