/* Fuc color overrides for the shared XB launcher. */
:root[data-fuc-support-palette] {
  --fuc-launcher-fill: #6200ee;
  --fuc-launcher-hover: #5000d1;
  --fuc-launcher-focus-ring: rgba(98, 0, 238, .5);
  --xb-support-launcher-shadow-color: #6658dc;
}

:root[data-fuc-support-palette='cyan'] {
  --fuc-launcher-fill: #5ed2c0;
  --fuc-launcher-hover: #64d4c2;
  --fuc-launcher-focus-ring: rgba(136, 126, 242, .5);
  --xb-support-launcher-shadow-color: #087e71;
}

:root[data-color='dark'][data-fuc-support-palette] {
  --fuc-launcher-fill: #7367f0;
  --fuc-launcher-hover: #5344ed;
  --fuc-launcher-focus-ring: rgba(136, 126, 242, .5);
}

:root[data-fuc-support-palette] #cw-bubble-holder > button.woot-widget-bubble {
  background-color: var(--fuc-launcher-fill) !important;
  border: 0;
  outline: none !important;
}

@media (hover: hover) {
  :root[data-fuc-support-palette] #cw-bubble-holder > button.woot-widget-bubble:hover {
    background-color: var(--fuc-launcher-hover) !important;
  }
}

:root[data-fuc-support-palette] #cw-bubble-holder > button.woot-widget-bubble:active {
  background-color: var(--fuc-launcher-hover) !important;
}

:root[data-fuc-support-palette]:not([data-fuc-support-input='pointer']) #cw-bubble-holder > button.woot-widget-bubble:focus-visible {
  box-shadow: 0 0 0 .2rem var(--fuc-launcher-focus-ring) !important;
}

:root[data-fuc-support-palette] body[data-native-mode='user']:has(> #cw-bubble-holder .woot-widget--expanded.woot-elements--right) > #app > .footer {
  padding-inline-end: min(160px, 44vw);
}

/* Keep SDK controls in stable layers. Its .woot--hide otherwise sends them
   behind the page and below the viewport before the exit animation finishes.
   Keep support above content and below business modals. */
:root[data-fuc-support-palette] body > .woot-widget-holder {
  z-index: 1000 !important;
  transition: opacity .2s ease, transform .2s ease !important;
}

:root[data-fuc-support-palette] #cw-bubble-holder > button.woot-widget-bubble {
  z-index: 1001 !important;
  top: auto !important;
  bottom: calc(var(--xb-support-bottom-gap, 24px) + env(safe-area-inset-bottom, 0px)) !important;
  transition: opacity .15s ease, transform .2s ease, background-color .15s ease !important;
}

:root[data-fuc-support-palette] #cw-bubble-holder > .woot-elements--right {
  right: calc(20px + env(safe-area-inset-right, 0px));
}

/* Hidden controls must never catch clicks during rapid open/close reversals. */
:root[data-fuc-support-palette] body > .woot-widget-holder.woot--hide,
:root[data-fuc-support-palette] #cw-bubble-holder > button.woot--hide {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* On short screens the public widget can reach the fixed navigation (1030). */
:root[data-fuc-support-palette] body[data-native-mode='home'] > .woot-widget-holder:not(.has-unread-view) {
  z-index: 1035 !important;
}

@media (min-width: 668px) {
  :root[data-fuc-support-palette] body > .woot-widget-holder {
    top: auto !important;
    bottom: calc(var(--xb-support-bottom-gap, 24px) + var(--xb-support-button-height, 48px) + var(--xb-support-panel-gap, 12px) + env(safe-area-inset-bottom, 0px)) !important;
    min-height: 0 !important;
    max-height: min(640px, calc(100vh - 100px - env(safe-area-inset-bottom, 0px))) !important;
    max-height: min(640px, calc(100dvh - 100px - env(safe-area-inset-bottom, 0px))) !important;
    max-width: calc(100vw - 40px);
  }

  :root[data-fuc-support-palette] body > .woot-widget-holder.woot-elements--right {
    right: calc(20px + env(safe-area-inset-right, 0px));
  }
}

/* The SDK includes 667px in both mobile and desktop rules. Choose one layout. */
@media (max-width: 667px) {
  :root[data-fuc-support-palette] body > .woot-widget-holder:not(.has-unread-view) {
    z-index: 1035 !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0;
  }

  :root[data-fuc-support-palette] body > .woot-widget-holder.has-unread-view {
    top: auto !important;
    bottom: 84px !important;
  }

  :root[data-fuc-support-palette] #cw-bubble-holder > button.woot--close {
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* Target the actual controls, not only their parent: SDK visibility rules on
   children can override inherited visibility while a menu/modal is open. */
:root[data-fuc-support-palette] body[data-native-mode='user']:is(.modal-open, .menu-open) > .woot-widget-holder,
:root[data-fuc-support-palette] body[data-native-mode='user']:is(.modal-open, .menu-open) > #cw-bubble-holder > button {
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
  :root[data-fuc-support-palette] body > .woot-widget-holder,
  :root[data-fuc-support-palette] #cw-bubble-holder > button.woot-widget-bubble {
    transition: none !important;
  }
}