/* ============================================================
   NOVAUTILS — tools/microphone-test/microphone-test.css
   ============================================================ */

.mic-layout { display: flex; flex-direction: column; gap: 16px; }

/* ── Permission prompt ── */
.mic-prompt {
  display: flex; flex-direction: column; align-items: center;
  gap: 18px; padding: 60px 20px; text-align: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.mic-prompt-icon { font-size: 3.5rem; }
.mic-prompt-title { font-size: 1.5rem; font-weight: 800; color: var(--text); letter-spacing: -0.03em; }
.mic-prompt-sub { font-size: 0.92rem; color: var(--text-dim); max-width: 420px; line-height: 1.6; }

.mic-start-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 28px;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  color: #fff; font-family: var(--font-head);
  font-size: 0.95rem; font-weight: 700;
  border-radius: var(--radius-sm); border: none; cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
  box-shadow: 0 4px 20px rgba(79,140,255,0.3);
}
.mic-start-btn:hover { opacity: 0.9; transform: translateY(-1px); }

.mic-error {
  display: flex; align-items: center; gap: 8px;
  color: var(--red); font-size: 0.85rem;
  background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.25);
  border-radius: var(--radius-sm); padding: 10px 16px;
}

/* ── Active state ── */
.mic-active { display: flex; flex-direction: column; gap: 14px; }

.mic-status-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 20px;
}
.mic-status-indicator {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.85rem; font-weight: 700; color: var(--green);
}
.mic-live-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 8px var(--green);
  animation: pulse 1.5s ease-in-out infinite;
}
.mic-device {
  font-family: var(--font-mono); font-size: 0.75rem;
  color: var(--text-dimmer); flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mic-stop-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  background: rgba(248,113,113,0.12); border: 1px solid rgba(248,113,113,0.3);
  color: var(--red); font-family: var(--font-head);
  font-size: 0.82rem; font-weight: 700;
  border-radius: var(--radius-sm); cursor: pointer;
  transition: background 0.2s;
}
.mic-stop-btn:hover { background: rgba(248,113,113,0.22); }

/* ── Card ── */
.mic-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px;
}
.mic-card-label {
  font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-dim); margin-bottom: 14px;
}

/* Volume meter */
.mic-volume-wrap {
  display: flex; align-items: center; gap: 14px; margin-bottom: 8px;
}
.mic-volume-bar-wrap {
  flex: 1; height: 18px; background: var(--bg3);
  border-radius: 9px; overflow: hidden;
}
.mic-volume-fill {
  height: 100%; width: 0%; border-radius: 9px;
  background: linear-gradient(90deg, var(--green) 0%, #4ade80 60%, var(--yellow) 80%, var(--red) 100%);
  transition: width 0.05s linear;
}
.mic-volume-val {
  font-family: var(--font-mono); font-size: 0.85rem;
  color: var(--text); min-width: 55px; text-align: right;
}
.mic-volume-labels {
  display: flex; justify-content: space-between;
  font-size: 0.62rem; color: var(--text-dimmer);
}

/* Waveform canvas */
.mic-waveform {
  width: 100%; height: 120px; display: block;
  border-radius: var(--radius-sm);
  background: var(--bg3);
}

/* Spectrum canvas */
.mic-spectrum {
  width: 100%; height: 100px; display: block;
  border-radius: var(--radius-sm);
  background: var(--bg3); margin-bottom: 8px;
}
.mic-freq-labels {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-dimmer);
}

/* Stats row */
.mic-stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.mic-stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; text-align: center;
}
.mic-stat-label { font-size: 0.62rem; font-weight: 700; color: var(--text-dimmer); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
.mic-stat-val { font-family: var(--font-mono); font-size: 1rem; font-weight: 500; color: var(--text); }
.mic-stat-val.green { color: var(--green); }

/* ── Responsive ── */
@media (max-width: 600px) {
  .mic-stats-row { grid-template-columns: repeat(2, 1fr); }
}