/* Moral Expansion — Mic UI (shared across tools) */
/* Pairs with /assets/me-mic.js. Requires --paper, --ink, --ink-soft, --rule, --clay, --muted, --serif, --mono CSS variables (defined per page). */

.mic-row { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.55rem; min-height: 28px; flex-wrap: wrap; }
.mic-btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.4rem 0.85rem 0.4rem 0.7rem;
  background: transparent; color: var(--ink-soft);
  border: 1px solid var(--rule); border-radius: 18px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500;
  transition: all 0.15s ease; cursor: pointer;
}
.mic-btn:hover { border-color: var(--ink); color: var(--ink); }
.mic-btn.listening {
  background: var(--clay); color: var(--paper); border-color: var(--clay);
  animation: me-mic-pulse 1.4s ease-in-out infinite;
}
.mic-glyph { width: 12px; height: 14px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.mic-glyph svg { width: 100%; height: 100%; }
.mic-status {
  font-family: var(--serif); font-style: italic; font-size: 0.88rem; color: var(--muted);
  line-height: 1.3; flex: 1 1 100%;
}
.mic-status:empty { display: none; }
.mic-status em { color: var(--clay); font-style: italic; }
.mic-status.live { color: var(--clay); }
.mic-status.error { color: var(--clay); font-style: normal; font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; }

@keyframes me-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(156,78,44,0.45); }
  50% { box-shadow: 0 0 0 8px rgba(156,78,44,0); }
}