overlay.css

:root {
  /* Dark Mode Default */
  --overlay-bg: #1a1a1a;
  --overlay-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  --overlay-wave: #ffffff;
  --overlay-dot: #ef4444;
  --overlay-idle: rgba(255, 255, 255, 0.3);
  --overlay-ready-ring: rgba(255, 255, 255, 0.12);
  --overlay-ready-shadow: rgba(255, 255, 255, 0.08);
  --overlay-ready-text: rgba(255, 255, 255, 0.92);
  /* User-customizable floating pill appearance. */
  --overlay-bg-opacity: 1;
  --overlay-scale: 1;
}

:root[data-theme="light"] {
  --overlay-bg: #ffffff;
  --overlay-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --overlay-wave: #000000;
  --overlay-dot: #ef4444;
  --overlay-idle: rgba(0, 0, 0, 0.25);
  --overlay-ready-ring: rgba(0, 0, 0, 0.1);
  --overlay-ready-shadow: rgba(0, 0, 0, 0.08);
  --overlay-ready-text: rgba(0, 0, 0, 0.82);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
  padding: 0;
}

.overlay-shell {
  width: 100%;
  height: 100%;
  display: flex;
  background: transparent;
  padding: 0;
  overflow: hidden;
  transform: scale(var(--overlay-scale, 1));
  transform-origin: center;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.overlay-pill {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: transparent;
  overflow: hidden;
  contain: paint;
  cursor: grab;
  user-select: none;
  transition: transform 0.1s ease;
}

/* The dark pill backdrop lives on a pseudo-element so the opacity control fades only
   the backdrop, never the wave/loader/idle effects layered above it. */
.overlay-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--overlay-bg);
  box-shadow: var(--overlay-shadow);
  opacity: var(--overlay-bg-opacity, 1);
  transition: opacity 0.2s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  z-index: 0;
}

/* Keep the ready state on the same rounded pill silhouette. A drop shadow here would
   spill past the pill and get clipped by the transparent window into a dark rectangle
   in the corners, so the pill keeps its normal shadow only. */
.overlay-shell[data-feedback='ready'] .overlay-pill::before {
  background: var(--overlay-bg);
  box-shadow: var(--overlay-shadow);
}

.overlay-pill:active {
  transform: scale(0.96);
}

.overlay-shell--dragging .overlay-pill {
  cursor: grabbing;
}

/* Hands-free Dot */
.overlay-badge {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--overlay-dot);
  z-index: 1;
  animation: pulse-badge 0.75s infinite alternate ease-in-out; /* Pulsing twice as fast */
}

/* Containers */
.overlay-wave,
.overlay-loader,
.overlay-glyph,
.overlay-ready-sequence {
  position: relative;
  z-index: 1;
}

/* Idle state glyph */
.overlay-glyph {
  width: 14px;
  height: 4px; /* Whole number */
  border-radius: 2px;
  background: var(--overlay-idle);
  transition: background-color 0.3s ease;
}

/* Audio wave: 11 thin bars, each driven by a slice of the audio spectrum
   (lows on the left, highs on the right). 11 x 2px + 10 x 2px gaps = ~42px,
   so it keeps roughly the same footprint as the previous 5-bar wave. */
.overlay-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px; /* Whole number */
  height: 24px;
}

.overlay-wave span {
  width: 2px; /* Whole number to prevent subpixel rendering issues */
  height: 4px;
  border-radius: 999px;
  background: var(--overlay-wave);
  opacity: 0.4;
  transform-origin: center;
  transition:
    height 90ms linear,
    opacity 90ms linear,
    background-color 0.3s ease;
}

/* Loading state: 11 smaller dots in the same footprint (11 x 2px + 10 x 1px = 32px). */
.overlay-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
}

.overlay-loader span {
  width: 2px; /* Whole number */
  height: 2px; /* Whole number */
  border-radius: 50%;
  background: var(--overlay-wave);
  animation: bounce-dot 0.6s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.8;
}

.overlay-loader span:nth-child(2) { animation-delay: 0.06s; }
.overlay-loader span:nth-child(3) { animation-delay: 0.12s; }
.overlay-loader span:nth-child(4) { animation-delay: 0.18s; }
.overlay-loader span:nth-child(5) { animation-delay: 0.24s; }
.overlay-loader span:nth-child(6) { animation-delay: 0.30s; }
.overlay-loader span:nth-child(7) { animation-delay: 0.36s; }
.overlay-loader span:nth-child(8) { animation-delay: 0.42s; }
.overlay-loader span:nth-child(9) { animation-delay: 0.48s; }
.overlay-loader span:nth-child(10) { animation-delay: 0.54s; }
.overlay-loader span:nth-child(11) { animation-delay: 0.60s; }

.overlay-ready-sequence {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.overlay-ready-label,
.overlay-ready-idle {
  grid-area: 1 / 1;
}

.overlay-ready-label {
  color: var(--overlay-ready-text);
  font-size: 9px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  line-height: 1;
  text-transform: uppercase;
  opacity: 0;
}

.overlay-ready-idle {
  width: 14px;
  height: 4px;
  border-radius: 2px;
  background: var(--overlay-idle);
  opacity: 0;
  transform: scaleX(0.65);
}

.overlay-shell[data-feedback='ready'] .overlay-ready-label {
  animation: ready-label-rise 0.58s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.overlay-shell[data-feedback='ready'] .overlay-ready-idle {
  animation: ready-idle-enter 0.28s ease-out 0.52s forwards;
}

/* Too-short recording feedback: same monospace-caps treatment as the READY label,
   but tighter tracking and a smaller size so longer translations (e.g. "TROPPO
   BREVE") still fit inside the 96px pill. The pill itself does a quick side-to-side
   shake — the universal "nope" gesture — so the rejection reads at a glance. */
.overlay-too-short {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 1;
}

.overlay-too-short-label {
  color: var(--overlay-ready-text);
  font-size: 8px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
}

.overlay-shell[data-feedback='too-short'] .overlay-too-short-label {
  animation: too-short-label 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* The window is exactly pill-sized, so a pure translateX would clip the rounded ends
   at the window edges. A slight scale-down during the shake keeps it fully visible. */
.overlay-shell[data-feedback='too-short'] .overlay-pill {
  animation: too-short-shake 0.45s ease-in-out;
}

.overlay-shell[data-feedback='too-short'] .overlay-glyph {
  display: none !important;
}

/* Error state */
.overlay-shell[data-mode='error'] .overlay-glyph {
  background: var(--overlay-wave);
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.overlay-shell[data-feedback='ready'] .overlay-glyph {
  display: none !important;
}

.hidden {
  display: none !important;
}

@keyframes bounce-dot {
  0% { transform: translateY(2px); opacity: 0.4; }
  100% { transform: translateY(-2.5px); opacity: 1; }
}

@keyframes pulse-badge {
  0% { opacity: 0.4; transform: translateY(-50%) scale(0.9); }
  100% { opacity: 1; transform: translateY(-50%) scale(1.1); }
}

@keyframes ready-label-rise {
  0% {
    opacity: 0;
    transform: translateY(5px) scale(0.92);
  }
  18% {
    opacity: 1;
    transform: translateY(1px) scale(1);
  }
  72% {
    opacity: 1;
    transform: translateY(-3px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-7px) scale(0.98);
  }
}

@keyframes too-short-shake {
  0%,
  100% {
    transform: translateX(0) scale(1);
  }
  12% {
    transform: translateX(-2px) scale(0.95);
  }
  30% {
    transform: translateX(2px) scale(0.95);
  }
  48% {
    transform: translateX(-2px) scale(0.95);
  }
  66% {
    transform: translateX(2px) scale(0.96);
  }
  84% {
    transform: translateX(-1px) scale(0.98);
  }
}

@keyframes too-short-label {
  0% {
    opacity: 0;
    transform: translateY(5px) scale(0.92);
  }
  12% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  78% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
}

@keyframes ready-idle-enter {
  0% {
    opacity: 0;
    transform: scaleX(0.65);
  }
  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}