.audio-preview-dock {
  position: fixed;
  right: clamp(12px, 2vw, 28px);
  bottom: clamp(12px, 2vw, 28px);
  z-index: 160;
  display: grid;
  grid-template-columns: 42px minmax(150px, 1fr) minmax(110px, 220px) auto 32px;
  align-items: center;
  gap: 11px;
  width: min(620px, calc(100vw - 24px));
  min-height: 64px;
  padding: 9px 11px;
  border: 1px solid var(--theme-tube-dim);
  border-radius: var(--theme-radius-frame);
  color: var(--theme-text);
  background: color-mix(in srgb, var(--theme-surface-raised) 94%, transparent);
  box-shadow: var(--theme-glow), var(--theme-glow);
  backdrop-filter: blur(14px);
}

.audio-preview-dock[hidden] { display: none; }
.audio-preview-toggle,
.audio-preview-close { display: grid; place-items: center; padding: 0; border: 1px solid var(--theme-tube-unlit); color: var(--theme-text); cursor: var(--beatori-cursor-pointer, pointer); background: var(--theme-surface); }
.audio-preview-toggle { width: 42px; height: 42px; border-radius: 50%; background: var(--theme-gradient-rim); }
.audio-preview-close { width: 32px; height: 32px; border-radius: var(--theme-radius-sm); }
.audio-preview-copy { display: grid; min-width: 0; gap: 3px; }
.audio-preview-copy strong,
.audio-preview-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audio-preview-copy strong { font-size: .76rem; }
.audio-preview-copy small { color: var(--theme-text-muted); font-size: 0.75rem; }
.audio-preview-dock input[type="range"] { width: 100%; accent-color: var(--theme-primary-bright); }
.audio-preview-dock time { color: var(--theme-text-muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 620px) {
  .audio-preview-dock { left: 12px; grid-template-columns: 38px minmax(0, 1fr) 32px; width: auto; }
  .audio-preview-toggle { width: 38px; height: 38px; }
  .audio-preview-dock input[type="range"] { grid-column: 1 / -1; grid-row: 2; }
  .audio-preview-dock time { display: none; }
}