#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-panel-anim-dur: 300ms;
  --hc-msg-anim-dur: 240ms;
  --hc-btn-anim-dur: 180ms;
  --hc-typing-anim-dur: 900ms;
  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 .chat-open {
  border: 1px solid var(--hc-accent-40);
  background: var(--hc-open-bg);
  color: var(--hc-text);
  border-radius: 999px;
  padding: 0.65rem 1.1rem;
  cursor: pointer;
  box-shadow: 0 2px 12px var(--hc-accent-18);
  transition: border-color 0.2s, box-shadow 0.2s;
}

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

#haxel-chatbot .chat-panel {
  width: min(370px, calc(100vw - 28px));
  max-height: min(520px, 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;
}

#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: 0.55rem 0.75rem;
  border-radius: 14px;
  margin-bottom: 0.4rem;
  word-wrap: break-word;
  animation: hcMsgFadeUp var(--hc-msg-anim-dur) ease both;
}

#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: 1px 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: 1px 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;
  }
}