.site-music-bar {
  --player-bg: rgba(248, 249, 246, 0.94);
  --player-panel: #fffffd;
  --player-ink: #18221b;
  --player-muted: #667069;
  --player-line: rgba(24, 34, 27, 0.13);
  position: sticky;
  top: 74px;
  z-index: 39;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) repeat(5, auto);
  min-height: 68px;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid var(--player-line);
  background: var(--player-bg);
  color: var(--player-ink);
  padding: 10px clamp(22px, 4vw, 58px);
  font-family: "DM Sans", system-ui, sans-serif;
  backdrop-filter: blur(18px);
}

:root[data-theme="dark"] .site-music-bar {
  --player-bg: rgba(24, 32, 25, 0.95);
  --player-panel: #1d261f;
  --player-ink: #f2f5f1;
  --player-muted: #adb7af;
  --player-line: rgba(237, 244, 238, 0.14);
}

.site-music-copy { display: grid; min-width: 0; }
.site-music-copy small { color: var(--player-muted); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.site-music-copy strong { overflow: hidden; font-size: 0.83rem; text-overflow: ellipsis; white-space: nowrap; }
.site-music-timeline { display: grid; min-width: 0; grid-template-columns: auto minmax(48px,1fr) auto; align-items: center; gap: 6px; color: var(--player-muted); font-size: .58rem; font-variant-numeric: tabular-nums; line-height: 1; }
.site-music-timeline input[type="range"] { appearance: none; -webkit-appearance: none; width: 100%; min-height: 14px; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 0; cursor: pointer; }
.site-music-timeline input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: linear-gradient(90deg,#55856d 0 var(--music-progress,0%),var(--player-line) var(--music-progress,0%) 100%); }
.site-music-timeline input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border: 2px solid var(--player-panel); border-radius: 50%; background: #55856d; box-shadow: 0 0 0 1px var(--player-line); }
.site-music-timeline input[type="range"]::-moz-range-track { height: 4px; border-radius: 999px; background: var(--player-line); }
.site-music-timeline input[type="range"]::-moz-range-progress { height: 4px; border-radius: 999px; background: #55856d; }
.site-music-timeline input[type="range"]::-moz-range-thumb { width: 10px; height: 10px; border: 2px solid var(--player-panel); border-radius: 50%; background: #55856d; }
.site-music-timeline input[type="range"]:focus-visible { outline: 2px solid #55856d; outline-offset: 2px; }
.site-music-timeline input[type="range"]:disabled { cursor: default; opacity: .48; }
.site-music-bar select { width: 100%; min-height: 42px; border: 1px solid var(--player-line); border-radius: 11px; background: var(--player-panel); color: var(--player-ink); padding: 0 10px; font: inherit; font-size: 0.76rem; }
.site-music-bar button { display: grid; width: 36px; height: 36px; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--player-ink); cursor: pointer; font: inherit; font-size: 1.25rem; }
.site-music-bar [data-site-music-play] { background: var(--player-ink); color: var(--player-bg); font-size: 0.72rem; }
.site-music-bar [data-site-music-queue] { width: 44px; height: 44px; border: 1px solid var(--player-line); border-radius: 14px; background: var(--player-panel); font-size: 1rem; }
.site-music-bar [data-site-music-queue][aria-expanded="true"] { background: var(--player-ink); color: var(--player-panel); }
.site-music-bar [data-site-music-shuffle] { width: auto; min-width: 76px; border: 1px solid var(--player-line); border-radius: 12px; background: var(--player-panel); padding: 0 12px; font-size: .72rem; font-weight: 800; }
.site-music-bar [data-site-music-shuffle][aria-pressed="true"] { background: var(--player-ink); color: var(--player-panel); }
.site-music-menu { position: absolute; top: calc(100% + 8px); right: clamp(14px, 4vw, 58px); display: grid; width: min(360px, calc(100vw - 28px)); gap: 11px; border: 1px solid var(--player-line); border-radius: 15px; background: var(--player-panel); box-shadow: 0 18px 48px rgba(14, 24, 17, .2); padding: 14px; }
.site-music-menu[hidden] { display: none; }
.site-music-menu label { display: grid; gap: 6px; color: var(--player-muted); font-size: .7rem; font-weight: 750; }
.site-ai-toggle { width: 38px !important; height: 38px !important; border: 1px solid var(--player-line) !important; background: var(--player-panel) !important; font-size: .62rem !important; font-weight: 850 !important; }
.site-ai-toggle[aria-expanded="true"] { background: var(--player-ink) !important; color: var(--player-panel) !important; }
.site-ai-popover { position: absolute; top: calc(100% + 8px); right: clamp(14px, 4vw, 58px); display: grid; width: min(390px, calc(100vw - 28px)); max-height: min(70vh, 620px); gap: 10px; overflow-y: auto; border: 1px solid var(--player-line); border-radius: 15px; background: var(--player-panel); box-shadow: 0 18px 48px rgba(14, 24, 17, .2); padding: 14px; }
.site-ai-popover[hidden],.site-ai-popover form[hidden] { display: none; }
.site-ai-heading { display: flex; align-items: center; justify-content: space-between; }
.site-ai-heading button { width: 30px; height: 30px; color: var(--player-muted); font-size: 1.15rem; }
.site-ai-popover form { display: grid; gap: 9px; }
.site-ai-popover label { color: var(--player-muted); font-size: .7rem; font-weight: 750; }
.site-ai-popover input,.site-ai-popover textarea { width: 100%; border: 1px solid var(--player-line); border-radius: 10px; background: var(--player-bg); color: var(--player-ink); padding: 10px; font: inherit; }
.site-ai-popover input { min-height: 42px; }
.site-ai-popover textarea { min-height: 82px; resize: vertical; }
.site-ai-popover form > button { width: 100%; min-height: 42px; border-radius: 10px; background: var(--player-ink); color: var(--player-panel); font-size: .76rem; font-weight: 800; }
.site-ai-answer { border-top: 1px solid var(--player-line); padding-top: 11px; color: var(--player-ink); font-size: .82rem; line-height: 1.55; white-space: pre-wrap; }
.site-music-bar audio { display: none; }

@media (max-width: 760px) {
  .site-music-bar { top: 74px; grid-template-columns: auto minmax(0, 1fr) repeat(5, auto); gap: 4px; padding-inline: 12px; }
  .site-music-bar [data-site-music-queue] { width: 34px; height: 34px; border-radius: 50%; }
  .site-music-bar [data-site-music-previous],
  .site-music-bar [data-site-music-next] { display: grid; }
}

:root[data-embedded="true"] .site-music-bar { display: none; }

/* Universal button-border contract: every enabled button renders a visible 1px border. */
button:not(:disabled) {
  border-style: solid !important;
  border-width: 1px !important;
}
