// Floating dictation pill — the Wispr-style overlay shown while recording.
// Dark capsule, animated audio dots, state label. Pure presentation.
function DictationPill({ state = "listening", level = 0.5 }) {
  const dots = [0, 1, 2, 3, 4];
  const label = state === "processing" ? "Processing…" : state === "pasted" ? "Pasted ✓" : null;
  const labelColor = state === "pasted" ? "var(--success-600)" : "rgba(255,255,255,0.75)";
  return (
    <div style={{
      display: "inline-flex", alignItems: "center", gap: 10, padding: label ? "8px 16px 8px 18px" : "8px 18px",
      borderRadius: "var(--radius-pill)", background: "oklch(0.18 0.006 60 / 0.96)",
      boxShadow: "0 10px 30px -10px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.08)",
      border: "1px solid rgba(255,255,255,0.10)",
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 4, height: 22 }}>
        {dots.map((d) => {
          const h = state === "listening" ? 6 + Math.abs(Math.sin((d + 1) * 1.3 + level * 6)) * 13 : 7;
          const isGold = d === 2;
          return (
            <span key={d} style={{
              width: 4, height: h, borderRadius: 2,
              background: state === "pasted" ? "var(--success-600)" : isGold ? "var(--gold-500)" : "var(--oxblood-400)",
              transition: "height 140ms var(--ease-out)",
            }} />
          );
        })}
      </div>
      {label ? <span style={{ font: "500 11px/1 var(--font-mono)", letterSpacing: "0.04em", color: labelColor }}>{label}</span> : null}
    </div>
  );
}

window.RokkorScreens = Object.assign(window.RokkorScreens || {}, { DictationPill });