/* ============================================================
   VISUALIZERS — Piano roll, waterfall, empty state, overlays
   ============================================================ */

/* Main content area */
#main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}

/* Empty state */
#empty-state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  z-index: 5;
  background: var(--bg-primary);
}

#empty-state .icon {
  width: 64px;
  height: 64px;
  border: 2px dashed var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--text-muted);
}

#empty-state h2 {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-primary);
}

#empty-state p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-align: center;
  line-height: 1.6;
}

#empty-state.hidden { display: none; }

/* Visualizer panels */
#visualizers {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.viz-panel {
  flex: 1;
  position: relative;
  min-height: 0;
  border-bottom: 1px solid var(--border);
}

.viz-panel.hidden {
  display: none;
}

.viz-panel canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Toast notifications */
#toast-container {
  position: fixed;
  top: var(--sp-4);
  right: var(--sp-4);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.toast {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--text-primary);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  backdrop-filter: blur(10px);
  animation: toast-in 200ms ease forwards;
  max-width: 320px;
}

.toast.error { border-color: var(--accent-secondary); }
.toast.success { border-color: #2ecc71; }
.toast.fade-out { animation: toast-out 200ms ease forwards; }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(30px); }
}

/* Audio context overlay */
#audio-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 13, 15, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  gap: var(--sp-4);
  cursor: pointer;
}

#audio-overlay.hidden { display: none; }

#audio-overlay .circle {
  width: 80px;
  height: 80px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--accent);
  animation: pulse-ring 2s ease infinite;
}

@keyframes pulse-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(76, 201, 240, 0.4); }
  50% { box-shadow: 0 0 0 15px rgba(76, 201, 240, 0); }
}

#audio-overlay p {
  font-size: var(--fs-md);
  color: var(--text-muted);
}

/* Count-in overlay */
#count-in-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 13, 15, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1500;
  pointer-events: none;
}

#count-in-overlay.hidden { display: none; }

#count-in-beat {
  font-size: 8rem;
  font-weight: 700;
  color: var(--accent);
  text-shadow: 0 0 40px rgba(76, 201, 240, 0.6);
  user-select: none;
}

.count-in-pop {
  animation: count-pop 0.3s ease-out;
}

@keyframes count-pop {
  0% { transform: scale(1.6); opacity: 0.5; }
  100% { transform: scale(1); opacity: 1; }
}

/* Loading spinner */
#loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 15, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
  gap: var(--sp-3);
}

#loading-overlay.hidden { display: none; }

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}