:root {
  --music-bg: rgba(255, 253, 249, .94);
  --music-text: #17242a;
  --music-muted: #6b7c80;
  --music-accent: #66856d;
  --music-soft: rgba(102, 133, 109, .12);
  --music-line: rgba(79, 104, 91, .14);
  --music-shadow: 0 18px 54px rgba(35, 53, 47, .18);
}

[data-theme='dark'] {
  --music-bg: rgba(36, 51, 45, .96);
  --music-text: #edf2ed;
  --music-muted: #aabbb1;
  --music-accent: #9ab7a2;
  --music-soft: rgba(154, 183, 162, .14);
  --music-line: rgba(224, 236, 229, .14);
  --music-shadow: 0 22px 62px rgba(3, 8, 6, .38);
}

html[data-personal-desktop] body,
html[data-personal-inner] body { padding-bottom: calc(156px + env(safe-area-inset-bottom)); }
html.music-dock-minimized body { padding-bottom: calc(98px + env(safe-area-inset-bottom)); }
html.music-dock-closed body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

.music-dock {
  position: fixed;
  z-index: 70;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 18px;
  width: min(430px, calc(100vw - 32px));
  padding: 18px;
  overflow: visible;
  border: 1px solid var(--music-line);
  border-radius: 28px;
  color: var(--music-text);
  background: var(--music-bg);
  box-shadow: var(--music-shadow);
  backdrop-filter: blur(22px) saturate(120%);
  transition: width .2s ease, transform .2s ease, opacity .2s ease;
}

.music-dock header,
.music-source-tabs,
.music-queue { grid-column: 1 / -1; }
.music-dock header,
.music-dock-actions,
.music-source-tabs,
.music-controls,
.music-dock-settings { display: flex; align-items: center; }
.music-dock header { justify-content: space-between; font-size: .78rem; font-weight: 700; }
.music-dock-actions,
.music-controls,
.music-dock-settings { gap: 6px; }
.music-dock button { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px; border: 0; border-radius: 999px; color: inherit; background: transparent; cursor: pointer; }
.music-dock button:hover,
.music-dock button:focus-visible { background: var(--music-soft); transform: translateY(-2px); }
.music-source-tabs { gap: 6px; overflow-x: auto; scrollbar-width: none; }
.music-source-tabs button { flex: 0 0 auto; color: var(--music-muted); font-size: .72rem; }
.music-source-tabs button[aria-selected='true'] { color: var(--music-text); background: var(--music-soft); }
.music-now-playing { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 13px; min-width: 0; }
.music-cover,
.music-now-playing img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; box-shadow: 0 10px 22px rgba(38, 54, 48, .15); }
.music-now-playing > div { display: grid; align-content: center; min-width: 0; }
.music-now-playing span,
.music-now-playing small,
.music-now-playing p { color: var(--music-muted); font-size: .68rem; }
.music-now-playing strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-now-playing p { margin: 4px 0 0; }
.music-controls { align-self: center; }
.music-controls [data-music-action='toggle'] { color: white; background: var(--music-accent); }
.music-dock-settings { grid-column: 1 / -1; justify-content: flex-end; }
.music-dock-settings .music-volume { width: 92px; height: 4px; accent-color: var(--music-accent); cursor: pointer; }
.music-dock-settings [data-music-action='mode'].is-active { color: #fff; background: var(--music-accent); }
.music-dock .music-expand { display: none; }
.music-queue { width: min(340px, calc(100vw - 24px)); max-height: 118px; overflow: auto; border-top: 1px solid var(--music-line); }
.music-queue > p { margin: 10px 0 5px; color: var(--music-muted); font-size: .68rem; }
.music-queue ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.music-queue li { display: flex; justify-content: space-between; gap: 12px; font-size: .72rem; }
.music-queue li > span { display: grid; }
.music-queue li.is-unavailable { opacity: .48; }
.music-queue li.is-unavailable strong { text-decoration: line-through; text-decoration-thickness: 1px; }
.music-track-attribution { justify-items: end; color: var(--music-muted); }
.music-audio { display: none; }
.music-dock .music-restore { display: none; }
.music-dock.is-minimized { grid-template-columns: 58px auto auto; align-items: center; width: 218px; padding: 12px; }
.music-dock.is-minimized > :not(.music-now-playing):not(.music-controls):not(.music-audio):not(.music-restore):not(.music-expand),
.music-dock.is-minimized .music-now-playing > div { display: none; }
.music-dock.is-minimized .music-now-playing { display: block; }
.music-dock.is-minimized .music-cover { width: 58px; height: 58px; }
.music-dock.is-minimized .music-controls [data-music-action='previous'],
.music-dock.is-minimized .music-controls [data-music-action='next'] { display: none; }
.music-dock.is-minimized .music-expand { display: inline-grid; }
.music-dock.is-closed { width: 52px; height: 52px; padding: 0; border-radius: 50%; }
.music-dock.is-closed > :not(.music-restore) { display: none; }
.music-dock.is-closed .music-restore { display: inline-grid; width: 52px; height: 52px; }
.music-restore img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); }
.music-dock.is-playing .music-restore img { animation: music-record-spin 8s linear infinite; }
.music-dock.is-playing .music-cover { animation: music-record-spin 12s linear infinite; }

.music-summary { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: center; min-width: 0; padding: 14px 18px; border: 1px solid var(--music-line); border-radius: 28px; color: var(--music-text); background: var(--music-bg); box-shadow: var(--music-shadow); }
.music-summary > img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; }
.music-summary-copy { display: grid; min-width: 0; }
.music-summary-copy > span,
.music-summary-copy > small { color: var(--music-muted); font-size: .68rem; }
.music-summary-copy > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-summary-controls { display: flex; gap: 4px; margin-top: 7px; }
.music-summary-controls button { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; color: inherit; background: var(--music-soft); cursor: pointer; transition: transform .18s ease, background .18s ease; }
.music-summary-controls button:hover,
.music-summary-controls button:focus-visible { background: color-mix(in srgb, var(--music-accent) 18%, transparent); transform: translateY(-2px); }

@keyframes music-record-spin { to { transform: rotate(1turn); } }

@media (min-width: 1280px) {
  .music-dock {
    left: max(20px, env(safe-area-inset-left));
    right: max(20px, env(safe-area-inset-right));
    grid-template-columns: minmax(200px, 260px) auto minmax(120px, 1fr) minmax(180px, 260px) auto auto;
    align-items: center;
    width: auto;
    height: 128px;
    max-width: none;
    padding: 10px 18px;
  }

  .music-dock header,
  .music-source-tabs,
  .music-queue,
  .music-dock-settings { grid-column: auto; }
  .music-now-playing { grid-column: 1; grid-row: 1; }
  .music-controls { grid-column: 2; grid-row: 1; }
  .music-source-tabs { grid-column: 3; grid-row: 1; }
  .music-queue { grid-column: 4; grid-row: 1; }
  .music-dock-settings { grid-column: 5; grid-row: 1; }
  .music-dock header { grid-column: 6; grid-row: 1; }
  .music-dock header > span { display: none; }
  .music-dock header { gap: 8px; }
  .music-source-tabs { flex-direction: column; align-items: stretch; gap: 2px; }
  .music-source-tabs button { justify-content: start; min-height: 25px; height: 25px; padding: 0 10px; text-align: left; }
  .music-now-playing { grid-template-columns: 54px minmax(0, 1fr); }
  .music-cover,
  .music-now-playing img { width: 54px; height: 54px; }
  .music-dock-settings { justify-content: center; }
  .music-queue {
    width: auto;
    max-height: 82px;
    padding-left: 16px;
    border-top: 0;
    border-left: 1px solid var(--music-line);
  }
  .music-queue > p { margin-top: 0; }

  .music-dock.is-minimized,
  .music-dock.is-closed {
    left: auto;
  }
}

@media (max-width: 600px) {
  html[data-personal-desktop] body,
  html[data-personal-inner] body { padding-bottom: calc(116px + env(safe-area-inset-bottom)); }
  html.music-dock-minimized body,
  html.music-dock-closed body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .music-dock { left: 12px; right: 12px; bottom: max(10px, env(safe-area-inset-bottom)); width: auto; max-width: calc(100vw - 24px); grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'sources actions' 'now controls'; gap: 8px 10px; padding: 12px; border-radius: 22px; }
  .music-dock header { display: contents; }
  .music-dock header > span,
  .music-queue { display: none; }
  .music-dock-actions { grid-area: actions; justify-self: end; }
  .music-source-tabs { grid-area: sources; grid-column: auto; min-width: 0; }
  .music-now-playing { grid-area: now; grid-template-columns: 54px minmax(0, 1fr); }
  .music-controls { grid-area: controls; }
  .music-cover,
  .music-now-playing img { width: 54px; height: 54px; }
  .music-dock-settings { display: none; }
  .music-dock.is-minimized { left: auto; width: 142px; }
  .music-dock.is-minimized > :not(.music-restore) { display: none; }
  .music-dock.is-minimized .music-restore { display: inline-grid; width: 52px; height: 52px; }
  .music-summary { grid-template-columns: 60px minmax(0, 1fr); padding: 12px; }
  .music-summary > img { width: 60px; height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .music-dock,
  .music-dock * { animation: none !important; transition-duration: .001ms !important; }

  .music-dock button:hover,
  .music-dock button:focus-visible,
  .music-summary-controls button:hover,
  .music-summary-controls button:focus-visible { transform: none !important; }
}