@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap');

:root {
  --bx-purple: #2B0539;
  --bx-pink: #e5087e;
  --bx-pink-hover: #c4066d;
  --bx-border: #e0d6f0;
  --bx-bg: #f7f3fc;
}

/* Reset for the widget to prevent site overrides */
.bx-host,
.bx-host * {
  box-sizing: border-box !important;
  margin: 0;
  padding: 0;
  border: none;
  font-family: 'DM Sans', Arial, sans-serif !important;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Suppress unwanted pseudo-elements from site-wide styles */
.bx-host button::before,
.bx-host button::after,
.bx-host a::before,
.bx-host a::after,
.bx-host .bx-btn-primary::before,
.bx-host .bx-btn-primary::after,
.bx-host .bx-btn-sec::before,
.bx-host .bx-btn-sec::after,
.bx-host .bx-fab::before,
.bx-host .bx-fab::after {
  display: none !important;
  content: none !important;
}

.bx-host {
  position: fixed !important;
  bottom: 28px !important;
  right: 28px !important;
  z-index: 999999 !important;
  /* Extremely high z-index */
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 12px !important;
}

.bx-host .bx-panel {
  width: 364px !important;
  background: #fff !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 40px rgba(44, 10, 80, 0.18), 0 2px 8px rgba(44, 10, 80, 0.08) !important;
  overflow: hidden !important;
  transform-origin: bottom right !important;
  animation: bxIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
  display: block !important;
}

.bx-host .bx-panel[hidden] {
  display: none !important;
}

@keyframes bxIn {
  from {
    opacity: 0;
    transform: scale(0.85) translateY(12px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.bx-host .bx-header {
  background: var(--bx-purple) !important;
  padding: 16px 18px !important;
}

.bx-host .bx-header-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 10px !important;
}

.bx-host .bx-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 2px solid rgba(255, 255, 255, 0.25) !important;
  flex-shrink: 0 !important;
}

.bx-host .bx-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}

.bx-host .bx-dismiss {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid #ffffff36 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  font-size: 15px !important;
  line-height: 30px !important;
  text-align: center !important;
  padding: 0 !important;
  margin: -5px !important;
  display: block !important;
}

.bx-host .bx-dismiss:hover {
  background: var(--bx-pink) !important;
  color: #fff !important;
}

.bx-host .bx-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin: 0 0 1px !important;
  display: block !important;
}

.bx-host .bx-role {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.92) !important;
  margin: 0 !important;
  display: block !important;
}

.bx-host .bx-msg {
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px 10px 10px 3px !important;
  padding: 10px 13px !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.92) !important;
  line-height: 1.5 !important;
  display: block !important;
}

.bx-host .bx-view {
  display: none !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 14px 16px 16px !important;
}

.bx-host .bx-view.active {
  display: flex !important;
}

.bx-host .bx-btn-primary {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 12px 16px !important;
  background: var(--bx-pink) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background 0.15s !important;
}

.bx-host .bx-btn-primary:hover {
  background: var(--bx-pink-hover) !important;
}

.bx-host .bx-btn-sec {
  display: block !important;
  width: 100% !important;
  padding: 10px 16px !important;
  background: transparent !important;
  color: var(--bx-purple) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  border: 1.5px solid var(--bx-border) !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: border-color 0.15s, background 0.15s !important;
}

.bx-host .bx-btn-sec:hover {
  border-color: var(--bx-purple) !important;
  background: var(--bx-bg) !important;
}

.bx-host .bx-contact-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.bx-host .bx-contact-list li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.bx-host .bx-opt {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  border: 1.5px solid var(--bx-border) !important;
  text-decoration: none !important;
  background: #fff !important;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s !important;
}

.bx-host .bx-opt:hover,
.bx-host .bx-opt:focus-visible {
  border-color: var(--bx-pink) !important;
  background: var(--bx-bg) !important;
  box-shadow: 0 0 0 1px rgba(229, 8, 126, 0.18) !important;
}

.bx-host .bx-opt-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  background: #f4eafa !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.bx-host .bx-opt-label strong {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--bx-purple) !important;
  display: block !important;
  line-height: 1.2 !important;
}

.bx-host .bx-opt-label span {
  font-size: 11px !important;
  color: #4f4068 !important;
  display: block !important;
}

.bx-host .bx-back {
  background: none !important;
  border: none !important;
  color: #4f4068 !important;
  font-size: 12px !important;
  cursor: pointer !important;
  padding: 0 0 2px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.bx-host .bx-back:hover {
  color: var(--bx-purple) !important;
}

.bx-host .bx-wrap {
  position: relative !important;
  padding-bottom: 22px !important;
}

.bx-host .bx-fab {
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  position: relative !important;
  box-shadow: 0 4px 20px rgba(229, 8, 126, 0.4), 0 2px 8px rgba(44, 10, 80, 0.3) !important;
  transition: transform 0.15s !important;
  overflow: visible !important;
  background: none !important;
  display: block !important;
}

.bx-host .bx-fab:hover {
  transform: scale(1.06) !important;
}

.bx-host .bx-fab img {
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  position: relative !important;
  z-index: 1 !important;
  border: 3px solid #fff !important;
}

.bx-host .bx-pulse {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  background: var(--bx-pink) !important;
  opacity: 0;

  animation: bxpulse 2.5s ease-out infinite !important;
  pointer-events: none !important;
  display: block !important;
  visibility: visible !important;
  z-index: 0 !important;
}

.bx-host .bx-pulse:nth-child(2) {
  animation-delay: 0.8s !important;
}

@keyframes bxpulse {
  0% {
    transform: scale(1);
    opacity: 0.35;
  }

  100% {
    transform: scale(1.65);
    opacity: 0;
  }
}

.bx-host .bx-label {
  position: absolute !important;
  bottom: -2px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  color: #42276d !important;
  white-space: nowrap !important;
}

/* Accessibility: Focus styles */
.bx-host .bx-btn-primary:focus-visible,
.bx-host .bx-btn-sec:focus-visible,
.bx-host .bx-opt:focus-visible,
.bx-host .bx-fab:focus-visible,
.bx-host .bx-dismiss:focus-visible,
.bx-host .bx-back:focus-visible {
  outline: 3px solid var(--bx-pink) !important;
  outline-offset: 2px !important;
}

.bx-host .bx-dismiss:focus-visible {
  outline-color: #fff !important;
}

@media (max-width: 480px) {
  .bx-host {
    bottom: 16px !important;
    right: 16px !important;
  }

  .bx-host .bx-panel {
    width: calc(100vw - 32px) !important;
  }
}