/* Music Sync uses the existing Now Playing Island. This file only supplies
   the role-aware controls and the compact queue inside its expanded view. */

#now-playing-island.np-sync {
  display: flex;
  width: min(360px, calc(100vw - 24px));
}

#now-playing-island.np-sync .np-island-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  gap: 2px;
  min-width: 0;
}

#now-playing-island.np-sync .np-island-vote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 38px;
  height: 36px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
#now-playing-island.np-sync .np-island-vote b {
  color: var(--text);
  font-weight: 600;
}
#now-playing-island.np-sync .np-island-vote[aria-pressed="true"] {
  border-color: var(--border-3);
  background: var(--surface-4);
  color: var(--text);
}
#now-playing-island.np-sync .np-island-vote:disabled {
  opacity: .42;
  cursor: default;
}
#now-playing-island.np-sync .np-island-vote:focus-visible,
#now-playing-island.np-sync .np-sync-add:focus-visible,
#now-playing-island.np-sync .np-sync-secondary:focus-visible,
#now-playing-island.np-sync .np-sync-end:focus-visible,
#now-playing-island.np-sync .np-sync-recovery:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

/* Ordinary playback keeps the original stacked Island layout. Sync turns the
   same play button and seek row into one compact transport line. */
.np-sync-transport { display: contents; }
#now-playing-island.np-sync .np-island-expanded {
  align-items: stretch;
  gap: 12px;
  padding: 4px 12px 12px;
}
#now-playing-island.np-sync .np-sync-transport {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
}
#now-playing-island.np-sync .np-island-playpause-lg {
  width: 42px;
  height: 42px;
}
#now-playing-island.np-sync .np-island-seekrow {
  flex: 1;
  min-width: 0;
  gap: 7px;
}
#now-playing-island.np-sync .np-time { min-width: 30px; }
#now-playing-island.np-sync .np-island-goto { display: none !important; }
#now-playing-island.np-sync.np-expanded .np-island-playpause { display: none; }

.np-sync-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.np-sync-queue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 30px;
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.np-sync-add {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--text);
  font-size: 21px;
  font-weight: 400;
  line-height: 1;
  transition: background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.np-sync-add:active { transform: scale(.94); background: var(--surface-4); }
.np-sync-queue-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 148px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  border-top: 1px solid var(--border-1);
}
.np-sync-queue-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 7px 2px;
  border-bottom: 1px solid var(--border-1);
}
.np-sync-queue-meta {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 2px;
}
.np-sync-queue-title {
  overflow: hidden;
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.np-sync-queue-by {
  overflow: hidden;
  color: var(--text-3);
  font-size: var(--fs-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.np-sync-queue-count {
  flex: 0 0 auto;
  color: var(--text-3);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
.np-sync-empty {
  padding: 9px 2px;
  color: var(--text-3);
  font-size: var(--fs-sm);
}
.np-sync-utility {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  padding-top: 7px;
  border-top: 1px solid var(--border-1);
}
.np-sync-secondary,
.np-sync-end,
.np-sync-recovery {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  color: var(--text-2);
  font-size: var(--fs-xs);
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.np-sync-secondary { background: var(--surface-3); color: var(--text); }
.np-sync-end { color: var(--danger); }
.np-sync-recovery-row { display: flex; justify-content: flex-start; }
.np-sync-recovery { background: var(--surface-3); color: var(--text); }

.cb-save-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--success) 35%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--success) 12%, transparent);
  color: var(--success);
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.cb-save-chip.is-done {
  border-color: var(--border-2);
  background: var(--surface-3);
  color: var(--text-2);
  cursor: default;
}

/* The header entry point and picker mode indicator remain unchanged. */
#sync-header-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 5px 12px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--text);
  font-size: var(--fs-xs);
  cursor: pointer;
  flex: 0 0 auto;
}
#sync-header-btn .sync-header-label { white-space: nowrap; }
.cb-panel-mode-banner {
  align-items: center;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border-1);
  color: var(--text-2);
  font-size: var(--fs-xs);
}

@media (hover: hover) and (pointer: fine) {
  #now-playing-island.np-sync .np-island-vote:hover:not(:disabled),
  .np-sync-add:hover,
  .np-sync-secondary:hover,
  .np-sync-recovery:hover { background: var(--surface-4); }
  .np-sync-end:hover { background: var(--surface-3); }
  #sync-header-btn:hover { background: var(--surface-4); }
}

@media (max-width: 420px) {
  #now-playing-island.np-sync .np-island-row { gap: 7px; padding-inline: 7px; }
  #now-playing-island.np-sync .np-island-vote { min-width: 34px; padding-inline: 5px; }
  #now-playing-island.np-sync .np-island-actions { gap: 0; }
  #now-playing-island.np-sync .np-island-subtitle { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .np-island-eq span { animation: none !important; }
  #now-playing-island.np-sync .np-island-vote,
  .np-sync-add,
  .np-sync-secondary,
  .np-sync-end,
  .np-sync-recovery,
  .cb-save-chip { transition: none !important; }
  .np-sync-add:active { transform: none; }
}
.np-sync-panel[hidden],
.np-sync-transport[hidden] { display: none !important; }

/* The source tree's older index.css contains a richer Island morph, but this
   release serves cb.css + sync-island.css. Keep the actual loaded Sync Island
   just as responsive: compact height grows around the expanded controls and
   queue, then retracts cleanly on touch idle/outside tap. */
#now-playing-island.np-sync {
  height: auto;
  min-height: 56px;
  max-height: 56px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  transition:
    opacity var(--dur-quick) var(--ease-out),
    transform var(--dur-med) var(--ease-out),
    max-height 360ms cubic-bezier(0.16, 1, 0.3, 1),
    border-radius 260ms var(--ease-out),
    box-shadow 260ms var(--ease-out);
}
#now-playing-island.np-sync.np-expanded {
  max-height: min(400px, calc(100vh - 100px));
  max-height: min(400px, calc(100dvh - 100px));
  border-radius: var(--radius-xl);
}
#now-playing-island.np-sync .np-island-expanded {
  display: flex !important;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  gap: 0;
  pointer-events: none;
  transition:
    max-height 340ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 150ms var(--ease-out),
    padding 340ms cubic-bezier(0.16, 1, 0.3, 1),
    gap 340ms cubic-bezier(0.16, 1, 0.3, 1);
}
#now-playing-island.np-sync.np-expanded .np-island-expanded {
  max-height: 340px;
  opacity: 1;
  padding: 4px 12px 12px;
  gap: 12px;
  pointer-events: auto;
}

@media (max-width: 420px) {
  #now-playing-island.np-sync.np-expanded {
    max-height: min(420px, calc(100vh - 88px));
    max-height: min(420px, calc(100dvh - 88px));
  }
  #now-playing-island.np-sync.np-expanded .np-island-expanded {
    max-height: 360px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #now-playing-island.np-sync,
  #now-playing-island.np-sync .np-island-expanded {
    transition: opacity 140ms ease !important;
  }
}