.sc4-secure-audio-wrap {
  width: 100%;
}

/* -------- Abrasive UI (default) -------- */

.sc4-sa-ui-abrasive {
  position: relative;
  padding: 14px 14px 12px;
  border-radius: 16px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}

.sc4-sa-ui-abrasive:before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(255,0,0,0.18), 0 0 22px rgba(255,0,0,0.06);
}

.sc4-sa-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.sc4-sa-title {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc4-sa-status {
  font-size: 12px;
  color: rgba(255,255,255,0.60);
  min-height: 16px;
}

.sc4-sa-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sc4-sa-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.30);
  color: rgba(255,255,255,0.92);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  user-select: none;
}

.sc4-sa-btn:hover {
  border-color: rgba(255,0,0,0.35);
  box-shadow: 0 0 0 1px rgba(255,0,0,0.22), 0 10px 24px rgba(0,0,0,0.35);
}

.sc4-sa-btn:active {
  transform: translateY(1px);
}

.sc4-sa-icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  position: relative;
}

/* Play icon (triangle) */
.sc4-sa-icon-play:before {
  content: '';
  position: absolute;
  left: 6px;
  top: 3px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid rgba(255,0,0,0.95);
}

/* Pause icon (two bars) */
.sc4-sa-icon-pause:before,
.sc4-sa-icon-pause:after {
  content: '';
  position: absolute;
  top: 3px;
  width: 4px;
  height: 12px;
  border-radius: 1px;
  background: rgba(255,0,0,0.95);
}
.sc4-sa-icon-pause:before { left: 5px; }
.sc4-sa-icon-pause:after { left: 11px; }

/* Volume icon */
.sc4-sa-icon-vol:before {
  content: '';
  position: absolute;
  left: 1px;
  top: 6px;
  width: 6px;
  height: 6px;
  background: rgba(255,255,255,0.85);
  border-radius: 1px;
}
.sc4-sa-icon-vol:after {
  content: '';
  position: absolute;
  left: 7px;
  top: 4px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid rgba(255,255,255,0.85);
}

/* Muted icon (slash) */
.sc4-sa-icon-mute:before {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 14px;
  height: 2px;
  background: rgba(255,0,0,0.85);
  transform: rotate(-45deg);
  transform-origin: left center;
  border-radius: 2px;
}

/* Scrubber */
.sc4-sa-scrub {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sc4-sa-range {
  width: 100%;
  accent-color: rgba(255,0,0,0.85);
}

.sc4-sa-time {
  font-size: 12px;
  color: rgba(255,255,255,0.70);
  display: flex;
  gap: 6px;
}

.sc4-sa-vol {
  width: 92px;
  accent-color: rgba(255,0,0,0.65);
}

/* Toggle play/pause icon visibility based on state */
.sc4-sa-ui-abrasive[data-state="paused"] .sc4-sa-icon-pause { display: none; }
.sc4-sa-ui-abrasive[data-state="paused"] .sc4-sa-icon-play { display: inline-block; }
.sc4-sa-ui-abrasive[data-state="playing"] .sc4-sa-icon-play { display: none; }
.sc4-sa-ui-abrasive[data-state="playing"] .sc4-sa-icon-pause { display: inline-block; }

/* Toggle mute icon visibility */
.sc4-sa-ui-abrasive[data-muted="1"] .sc4-sa-icon-vol { display: none; }
.sc4-sa-ui-abrasive[data-muted="1"] .sc4-sa-icon-mute { display: inline-block; }
.sc4-sa-ui-abrasive[data-muted="0"] .sc4-sa-icon-mute { display: none; }

/* Hide the actual <audio> element when custom UI is used */
.sc4-sa-ui-abrasive > audio { display: none; }

/* Compact variant */
.sc4-sa-compact .sc4-sa-header { margin-bottom: 8px; }
.sc4-sa-compact .sc4-sa-vol { width: 72px; }

/* -------- Native UI wrapper (if ui="native") -------- */
.sc4-sa-ui-native audio { width: 100%; height: 42px; }

/* Cosmetic waveform (dancing bars while playing; not real audio amplitude) */
.sc4-sa-waveform {
  position: relative;
  height: 44px;
  margin: 12px 0 10px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.35);
}

.sc4-sa-waveform-bars {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 10px 12px;
}

.sc4-sa-waveform-bars .sc4-sa-bar {
  flex: 1;
  min-width: 2px;
  border-radius: 2px;
  height: calc(var(--h, 50) * 1%);
  background: rgba(255, 255, 255, 0.22);
  transform-origin: bottom;
  transform: scaleY(0.25);
  will-change: transform, opacity;
}

/* Animate only while playing (Engine JS already toggles data-state on the root). */
.sc4-sa-ui-abrasive[data-state="playing"] .sc4-sa-waveform-bars .sc4-sa-bar {
  animation-name: sc4_sa_wave_dance;
  animation-duration: var(--t, 1100ms);
  animation-delay: var(--d, 0ms);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes sc4_sa_wave_dance {
  0%, 100% { transform: scaleY(0.25); opacity: 0.55; }
  50% { transform: scaleY(1.05); opacity: 1; }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .sc4-sa-ui-abrasive[data-state="playing"] .sc4-sa-waveform-bars .sc4-sa-bar {
    animation: none;
    transform: scaleY(0.55);
    opacity: 0.85;
  }
}