/* ============================================================
   v6 Record button + armed/recording state
   ============================================================
*/

@layer v6-components {

  .v6-record-btn {
    /* Slot it visually between Stop and the master meter */
    margin-left: 4px;
    color: var(--text-primary, #fafafa);
  }
  .v6-record-btn .v6-icon {
    color: var(--accent-danger, #ef4444);
  }
  .v6-record-btn:hover .v6-icon {
    color: #ff5555;
  }

  /* Armed: pulsing red ring around the icon */
  .v6-record-btn--armed {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.55);
    color: #fff;
  }
  .v6-record-btn--armed .v6-icon {
    color: #ff4d4d;
    animation: v6-record-pulse 1s ease-in-out infinite;
  }

  /* Recording: solid red, breathing glow */
  .v6-record-btn--recording {
    background: var(--accent-danger, #ef4444);
    border-color: var(--accent-danger, #ef4444);
    color: #fff;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5),
                0 0 22px rgba(239, 68, 68, 0.5);
    animation: v6-record-breathe 1.2s ease-in-out infinite;
  }
  .v6-record-btn--recording .v6-icon {
    color: #fff;
    animation: none;
  }

  @keyframes v6-record-pulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%      { opacity: 1.0; transform: scale(1.08); }
  }
  @keyframes v6-record-breathe {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.0),
                           0 0 18px rgba(239, 68, 68, 0.35); }
    50%      { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15),
                           0 0 28px rgba(239, 68, 68, 0.65); }
  }

  /* Highlight the focused track when armed/recording — it's the
     destination for incoming MIDI. */
  body:has(.v6-record-btn--armed) .track[data-v6-focused="true"],
  body:has(.v6-record-btn--recording) .track[data-v6-focused="true"] {
    box-shadow: inset 3px 0 0 0 var(--accent-danger, #ef4444);
  }
  body:has(.v6-record-btn--armed) .track[data-v6-focused="true"]::before {
    background: linear-gradient(180deg,
      var(--accent-danger, #ef4444) 0%,
      var(--accent-warning, #f59e0b) 100%);
  }
  body:has(.v6-record-btn--recording) .track[data-v6-focused="true"]::before {
    background: var(--accent-danger, #ef4444);
    animation: v6-record-pulse 0.8s ease-in-out infinite;
  }

  @media (prefers-reduced-motion: reduce) {
    .v6-record-btn--armed .v6-icon,
    .v6-record-btn--recording,
    body:has(.v6-record-btn--recording) .track[data-v6-focused="true"]::before {
      animation: none !important;
    }
  }
}