/* Shared layout for the Chatwoot launcher. Colors are supplied by the widget or theme. */
:root {
  --xb-support-button-height: 48px;
  --xb-support-bottom-gap: 24px;
  --xb-support-panel-gap: 12px;
}

#cw-bubble-holder > button.woot-widget-bubble {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--xb-support-launcher-shadow-color, #0f172a) 32%, transparent);
}

#cw-bubble-holder > .woot--close {
  width: var(--xb-support-button-height) !important;
  height: var(--xb-support-button-height) !important;
}

/* Center the SDK's native 24px strokes in the smaller circle. */
#cw-bubble-holder > .woot--close::before,
#cw-bubble-holder > .woot--close::after {
  left: 50%;
  top: calc(50% - 12px);
}

@media (min-width: 668px) {
  #cw-bubble-holder > .woot-widget-bubble:not(.woot--hide) {
    bottom: var(--xb-support-bottom-gap);
  }

  body > .woot-widget-holder.woot-elements--right:not(.woot--hide) {
    bottom: calc(var(--xb-support-bottom-gap) + var(--xb-support-button-height) + var(--xb-support-panel-gap));
  }
}

#cw-bubble-holder .woot-widget--expanded #woot-widget-bubble-icon {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.8 11.2a7.4 7.4 0 0 1-7.4 7.4H8.8l-5.6 2.2 1.5-4.7a7.4 7.4 0 0 1 5.9-12.3h2.8a7.4 7.4 0 0 1 7.4 7.4Z' transform='translate(24 0) scale(-1 1)' fill='none' stroke='white' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cg fill='white'%3E%3Ccircle cx='8' cy='11.2' r='1.1'/%3E%3Ccircle cx='12' cy='11.2' r='1.1'/%3E%3Ccircle cx='16' cy='11.2' r='1.1'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

#cw-bubble-holder .woot-widget--expanded #woot-widget-bubble-icon > path {
  visibility: hidden;
}

#cw-bubble-holder #woot-widget--expanded__text {
  font-family: "Nunito", "Segoe UI", arial;
  font-size: 15.4px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: .01rem;
}