button.sonos-launcher {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 9000;
  display: inline-flex;
  min-width: 112px;
  min-height: 68px;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  padding: 5px 14px 5px 6px;
  border: 1px solid var(--hs-line, var(--line));
  border-radius: 18px;
  background: var(--hs-surface-1, #080808);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.34);
  color: var(--hs-text, var(--text));
  isolation: isolate;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    transform var(--hs-duration-fast, 160ms) var(--hs-ease-standard, ease),
    border-color var(--hs-duration-fast, 160ms) var(--hs-ease-standard, ease),
    background-color var(--hs-duration-fast, 160ms) var(--hs-ease-standard, ease),
    opacity var(--hs-duration-fast, 160ms) var(--hs-ease-standard, ease),
    visibility 0s linear 0s;
}

button.sonos-launcher:hover {
  border-color: var(--hs-brand-line, var(--accent-line));
  background: var(--hs-surface-2, #101010);
  transform: translateY(-2px);
}

button.sonos-launcher:focus-visible {
  border-color: var(--hs-brand-500, var(--accent));
  outline: 2px solid var(--hs-brand-500, var(--accent));
  outline-offset: 3px;
}

.sonos-launcher-character {
  position: relative;
  width: 54px;
  min-width: 54px;
  height: 58px;
  overflow: visible;
}

.sonos-launcher-animation,
.sonos-launcher-static {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sonos-launcher-animation .sonos-character-fallback,
.sonos-launcher-animation .sonos-character-video,
.sonos-launcher-animation .sonos-character-webp,
.sonos-launcher-static {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/*
 * Im Floating Launcher verwenden wir bewusst nicht das
 * globale 512x783-Fallback. Das statische Launcher-Bild
 * stammt aus derselben 144x144-Idle-Canvas.
 */
.sonos-launcher-animation .sonos-character-fallback {
  visibility: hidden;
}

.sonos-launcher-animation .sonos-character-video,
.sonos-launcher-animation .sonos-character-webp {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.sonos-launcher-static {
  pointer-events: none;
  opacity: 1;
}

.sonos-launcher-animation.is-animated .sonos-character-video,
.sonos-launcher-animation.is-animated .sonos-character-webp {
  opacity: 1;
}

.sonos-launcher-animation.is-animated + .sonos-launcher-static {
  opacity: 0;
}

.sonos-launcher-label {
  display: block;
  padding-right: 1px;
  font-size: 13px;
  line-height: 1;
  font-weight: var(--hs-weight-semibold, 600);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

body.sonos-support-open .sonos-launcher {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    transform var(--hs-duration-fast, 160ms) var(--hs-ease-standard, ease),
    opacity var(--hs-duration-fast, 160ms) var(--hs-ease-standard, ease),
    visibility 0s linear var(--hs-duration-fast, 160ms);
}

@media (max-width: 700px) {
  button.sonos-launcher {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    min-width: 62px;
    width: 62px;
    min-height: 62px;
    height: 62px;
    justify-content: center;
    padding: 3px;
    border-radius: 17px;
  }

  .sonos-launcher-character {
    width: 54px;
    min-width: 54px;
    height: 56px;
  }

  .sonos-launcher-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  button.sonos-launcher {
    transition: none;
  }

  button.sonos-launcher:hover,
  body.sonos-support-open .sonos-launcher {
    transform: none;
  }
}