.rt-audio-dock,
.rt-audio-dock *,
.rt-audio-dock *::before,
.rt-audio-dock *::after {
  box-sizing: border-box;
}

.rt-audio-dock {
  position: fixed;
  inset-inline-start: 1rem;
  inset-block-end: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 1110;
  isolation: isolate;
  display: grid;
  grid-template-columns: calc(3.22rem - 2px) minmax(0, 12.5rem) 1.25rem;
  gap: .7rem;
  align-content: center;
  align-items: center;
  width: 3.22rem;
  height: 3.22rem;
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, .08);
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  color: var(--rt-text);
  padding: 0;
  box-shadow: 0 18px 46px rgba(17, 24, 39, .14);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition:
    width .34s cubic-bezier(.2, .82, .2, 1),
    box-shadow .22s ease,
    border-color .22s ease,
    transform .22s ease,
    opacity .16s ease;
}

.rt-audio-dock:hover,
.rt-audio-dock:focus-within {
  width: min(18.8rem, calc(100vw - 2rem));
  border-color: rgba(47, 107, 80, .2);
  box-shadow: 0 22px 58px rgba(17, 24, 39, .18);
  transform: translateY(-1px);
}

body.rt-cart-lock .rt-audio-dock,
body.rt-config-lock .rt-audio-dock,
body.rt-order-lock .rt-audio-dock {
  opacity: 0;
  pointer-events: none;
  transform: translateY(.75rem) scale(.96);
}

.rt-audio-toggle {
  position: relative;
  display: inline-grid;
  width: 2.52rem;
  height: 2.52rem;
  align-self: center;
  justify-self: center;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--rt-primary);
  color: #fff;
  padding: 0;
  box-shadow: 0 12px 28px rgba(47, 107, 80, .24);
  cursor: pointer;
  transform-origin: center;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.rt-audio-toggle:hover,
.rt-audio-toggle:focus-visible {
  transform: scale(1.02);
  background: var(--rt-primary-strong);
  box-shadow: 0 16px 34px rgba(47, 107, 80, .28);
  outline: none;
}

.rt-audio-dock.is-starting .rt-audio-toggle {
  animation: rt-audio-start-pop .62s cubic-bezier(.16, 1.18, .28, 1) both;
}

.rt-audio-dock.is-stopping .rt-audio-toggle {
  animation: rt-audio-stop-soft .42s cubic-bezier(.4, 0, .2, 1) both;
}

.rt-audio-dock.is-playing .rt-audio-toggle {
  background: var(--rt-primary-strong);
  box-shadow:
    0 14px 32px rgba(47, 107, 80, .28),
    0 0 0 1px rgba(255, 255, 255, .34) inset;
  animation: rt-audio-playing-nudge 1.45s ease-in-out infinite;
}

.rt-audio-icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: opacity .18s ease, transform .18s ease;
}

.rt-audio-icon svg {
  display: block;
  width: 1.18rem;
  height: 1.18rem;
  overflow: visible;
}

.rt-audio-icon path {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.95;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rt-audio-icon-pause {
  opacity: 0;
  transform: scale(.72) rotate(-8deg);
}

.rt-audio-dock.is-playing .rt-audio-icon-play {
  opacity: 0;
  transform: scale(.72) rotate(8deg);
}

.rt-audio-dock.is-playing .rt-audio-icon-pause {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.rt-audio-copy {
  display: grid;
  min-width: 0;
  max-width: 0;
  gap: .08rem;
  opacity: 0;
  transform: translateX(-.4rem);
  pointer-events: none;
  transition: opacity .22s ease .06s, max-width .3s ease, transform .28s ease;
}

[dir="rtl"] .rt-audio-copy {
  transform: translateX(.4rem);
}

.rt-audio-dock:hover .rt-audio-copy,
.rt-audio-dock:focus-within .rt-audio-copy {
  max-width: 12.5rem;
  opacity: 1;
  transform: translateX(0);
}

.rt-audio-copy span {
  color: var(--rt-muted);
  font-size: .64rem;
  font-weight: 950;
  line-height: 1.2;
}

.rt-audio-copy strong {
  overflow: hidden;
  color: var(--rt-text);
  font-size: .82rem;
  font-weight: 950;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rt-audio-visual {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  width: 0;
  min-width: 0;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .22s ease .08s, width .26s ease, transform .24s ease;
}

.rt-audio-dock:hover .rt-audio-visual,
.rt-audio-dock:focus-within .rt-audio-visual {
  width: 1.15rem;
  opacity: 1;
  transform: scale(1);
}

.rt-audio-visual i {
  display: block;
  width: .17rem;
  height: .42rem;
  border-radius: 999px;
  background: var(--rt-primary);
  opacity: .38;
  transform-origin: bottom;
}

.rt-audio-dock.is-playing .rt-audio-visual i {
  animation: rt-audio-wave .78s ease-in-out infinite;
}

.rt-audio-dock.is-playing .rt-audio-visual i:nth-child(2) {
  animation-delay: .1s;
}

.rt-audio-dock.is-playing .rt-audio-visual i:nth-child(3) {
  animation-delay: .2s;
}

@media (max-width: 640px) {
  .rt-audio-dock {
    inset-inline-start: .82rem;
    inset-block-end: calc(.82rem + env(safe-area-inset-bottom, 0px));
    grid-template-columns: calc(3.06rem - 2px) minmax(0, 11rem) 1rem;
    width: 3.06rem;
    height: 3.06rem;
    padding: 0;
  }

  .rt-audio-dock:hover,
  .rt-audio-dock:focus-within {
    width: min(17rem, calc(100vw - 1.64rem));
  }

  .rt-audio-toggle {
    width: 2.42rem;
    height: 2.42rem;
  }

  .rt-audio-copy strong {
    font-size: .78rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rt-audio-dock,
  .rt-audio-toggle,
  .rt-audio-icon,
  .rt-audio-copy,
  .rt-audio-visual,
  .rt-audio-visual i {
    transition: none !important;
    animation: none !important;
  }
}

@keyframes rt-audio-start-pop {
  0% { transform: scale(.86); filter: brightness(1); }
  42% { transform: scale(1.16); filter: brightness(1.12); }
  70% { transform: scale(.96); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes rt-audio-stop-soft {
  0% { transform: scale(1); filter: brightness(1.05); }
  45% { transform: scale(.88); filter: brightness(.95); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes rt-audio-playing-nudge {
  0%, 100% { transform: scale(1) rotate(0deg); }
  34% { transform: scale(1.035) rotate(-1deg); }
  68% { transform: scale(.99) rotate(1deg); }
}

@keyframes rt-audio-wave {
  0%, 100% { transform: scaleY(.65); opacity: .34; }
  46% { transform: scaleY(1.95); opacity: .9; }
}