/* ============================================================
   v6 Now-Playing badge — transport-bar indicator of audible clip
   ============================================================
   Sits to the right of the master meter. Shows:
     - "▶ SONG · Verse 2 · bar 3/8" while playing in song mode
     - "▶ LOOP · Pattern A" while looping a single pattern
     - "Follow" toggle button to enable/disable auto-edit-switch
*/

@layer v6-components {

  .v6-now-playing {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 28px;
    padding: 0 8px 0 10px;
    margin-left: 8px;
    background: linear-gradient(180deg,
      rgba(139, 92, 246, 0.10) 0%,
      rgba(139, 92, 246, 0.04) 100%);
    border: 1px solid rgba(139, 92, 246, 0.30);
    border-radius: var(--radius-md, 6px);
    color: var(--text-primary, #fafafa);
    font-family: var(--font-sans, system-ui);
    font-size: 11px;
    line-height: 1;
    max-width: 280px;
    overflow: hidden;
    white-space: nowrap;
  }
  .v6-now-playing[hidden] {
    display: none !important;
  }
  .v6-now-playing--stopped {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--v6-border, rgba(255, 255, 255, 0.10));
  }

  /* Pulsing green dot when audio is playing */
  .v6-now-playing__pulse {
    width: 7px;
    height: 7px;
    background: var(--accent-success, #22c55e);
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.7);
    animation: v6-np-pulse 1.2s ease-in-out infinite;
  }
  @keyframes v6-np-pulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50%      { opacity: 1.0; transform: scale(1.25); }
  }
  .v6-now-playing--stopped .v6-now-playing__pulse {
    background: var(--text-muted, #71717a);
    box-shadow: none;
    animation: none;
    opacity: 0.4;
  }

  /* Label: kind + name + position. The label is the one flex child allowed
     to shrink, so a long "name · bar 3/8 ▸ next" ends in an ellipsis instead
     of being hard-clipped mid-word by the pill's max-width. */
  .v6-now-playing__label {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }
  .v6-now-playing__kind {
    font-family: var(--font-mono, monospace);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--accent-primary, #8b5cf6);
    flex-shrink: 0;
  }
  .v6-now-playing__kind[data-state="paused"],
  .v6-now-playing__kind[data-state="stopped"] {
    color: var(--text-muted, #71717a);
  }
  .v6-now-playing__name {
    font-weight: 600;
    color: var(--text-primary, #fafafa);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 130px;
  }
  .v6-now-playing__pos {
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    color: var(--text-secondary, #a1a1aa);
    font-weight: 500;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* The screen-reader line: the whole sentence in one node, so it is not read
     as three fragments with the ▶/■ glyphs announced as punctuation. Visually
     hidden rather than display:none — a hidden live region is never announced. */
  .v6-now-playing__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Follow toggle */
  .v6-now-playing__follow {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 8px;
    margin-left: 4px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--v6-border, rgba(255, 255, 255, 0.08));
    border-radius: 999px;
    color: var(--text-muted, #71717a);
    font-family: var(--font-sans, system-ui);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    flex-shrink: 0;
    transition:
      background var(--duration-fast, 120ms),
      border-color var(--duration-fast, 120ms),
      color var(--duration-fast, 120ms);
  }
  .v6-now-playing__follow:hover {
    background: rgba(139, 92, 246, 0.15);
    color: var(--accent-primary, #8b5cf6);
  }
  .v6-now-playing__follow--on {
    background: rgba(139, 92, 246, 0.25);
    border-color: var(--accent-primary, #8b5cf6);
    color: #ffffff;
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.30);
  }
  .v6-now-playing__follow--on .v6-icon {
    color: #ffffff;
  }
  .v6-now-playing__follow .v6-icon {
    width: 11px;
    height: 11px;
    color: var(--text-muted, #71717a);
  }
  .v6-now-playing__follow-label {
    line-height: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    .v6-now-playing__pulse { animation: none; }
  }
}