.gsa-soundtrack {
  --soundtrack-cyan: #6cf6ff;
  position: fixed;
  z-index: 9995;
  left: max(14px, env(safe-area-inset-left));
  bottom: max(14px, env(safe-area-inset-bottom));
  width: min(340px, calc(100vw - 28px));
  color: #effdff;
  border: 1px solid rgba(108, 246, 255, 0.72);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(4, 22, 39, 0.97), rgba(9, 50, 79, 0.96));
  box-shadow: 0 0 22px rgba(73, 224, 255, 0.24), 0 14px 34px rgba(0, 0, 0, 0.42);
  font-family: inherit;
  overflow: hidden;
}

.gsa-soundtrack-header {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px 8px 14px;
}

.gsa-soundtrack-identity {
  min-width: 0;
  display: grid;
  gap: 2px;
  text-align: left;
}

.gsa-soundtrack-identity strong {
  overflow: hidden;
  color: #fff;
  font-size: 0.92rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gsa-soundtrack-kicker {
  color: var(--soundtrack-cyan);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.gsa-soundtrack-collapse,
.gsa-soundtrack-button {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(108, 246, 255, 0.58);
  border-radius: 9px;
  color: #effdff;
  background: rgba(10, 67, 100, 0.82);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.gsa-soundtrack-collapse:hover,
.gsa-soundtrack-collapse:focus-visible,
.gsa-soundtrack-button:hover,
.gsa-soundtrack-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  background: rgba(18, 97, 139, 0.98);
}

.gsa-soundtrack-panel {
  display: grid;
  gap: 9px;
  padding: 0 14px 13px;
  border-top: 1px solid rgba(108, 246, 255, 0.18);
}

.gsa-soundtrack-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 10px;
}

.gsa-soundtrack-volume {
  display: grid;
  grid-template-columns: auto minmax(90px, 1fr);
  align-items: center;
  gap: 10px;
  color: #d7f9ff;
  font-size: 0.78rem;
  font-weight: 700;
}

.gsa-soundtrack-volume input {
  width: 100%;
  accent-color: var(--soundtrack-cyan);
}

.gsa-soundtrack-status {
  min-height: 1.2em;
  margin: 0;
  color: #c7eaf3;
  font-size: 0.72rem;
  line-height: 1.35;
  text-align: left;
}

.gsa-soundtrack-status[data-tone="focus"],
.gsa-soundtrack-status[data-tone="notice"] {
  color: #ffe49a;
}

.gsa-soundtrack-status[data-tone="blocked"],
.gsa-soundtrack-status[data-tone="error"] {
  color: #ffb8b8;
}

.gsa-soundtrack-status[data-tone="playing"] {
  color: #a8ffcf;
}

.gsa-soundtrack.is-collapsed {
  width: min(260px, calc(100vw - 28px));
}

.gsa-soundtrack.is-collapsed .gsa-soundtrack-panel,
.gsa-soundtrack.is-collapsed .gsa-soundtrack-identity strong {
  display: none;
}

body.gsa-soundtrack-mounted {
  padding-bottom: max(86px, calc(72px + env(safe-area-inset-bottom)));
}

@media (max-width: 480px) {
  .gsa-soundtrack,
  .gsa-soundtrack.is-collapsed {
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    width: auto;
    max-width: none;
  }

  .gsa-soundtrack-header {
    min-height: 48px;
    padding-left: 12px;
  }

  .gsa-soundtrack-panel {
    padding-inline: 12px;
  }

  .gsa-soundtrack-button {
    min-height: 46px;
  }

  body.gsa-soundtrack-mounted {
    padding-bottom: max(82px, calc(70px + env(safe-area-inset-bottom)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .gsa-soundtrack * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}