/* ── Hablai Pill styles ─────────────────────
 * Dark pill #111, radio generoso, sombra dramática.
 * Todos los estados comparten la misma base; el ancho anima.
 */

.hablai-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, var(--pill-bg-2), var(--pill-bg));
  color: var(--pill-fg);
  border-radius: 999px;
  padding: 10px 16px;
  box-shadow: var(--shadow-pill);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1;
  height: 44px;
  transition:
    width 420ms var(--ease-spring),
    padding 420ms var(--ease-spring),
    height 420ms var(--ease-spring),
    border-radius 420ms var(--ease-spring);
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

/* Idle: just a dot */
.hablai-pill--idle {
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 999px;
  background: var(--pill-bg);
}
.pill-idle { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.pill-idle-dot {
  width: 8px; height: 8px;
  background: var(--pill-accent);
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(255, 107, 53, 0.7);
  animation: pulse-accent 2.2s var(--ease-inout) infinite;
}

/* Listening */
.hablai-pill--listening { width: 240px; padding: 10px 16px 10px 14px; }
.pill-indicator { display: flex; align-items: center; justify-content: center; }
.pill-indicator-dot {
  width: 8px; height: 8px;
  background: var(--pill-accent);
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(255, 107, 53, 0.8);
  animation: pulse-accent 1.2s var(--ease-inout) infinite;
}

.pill-waveform {
  display: flex;
  align-items: center;
  gap: 2.5px;
  flex: 1;
  height: 24px;
}
.pill-wf-bar {
  width: 2.5px;
  background: linear-gradient(180deg, var(--pill-accent), #ff8a5e);
  border-radius: 2px;
  height: calc(6px + var(--amp, 0.5) * 18px);
  animation: wf-pulse var(--ease-inout) infinite alternate;
  transform-origin: center;
}
@keyframes wf-pulse {
  0% { transform: scaleY(0.35); opacity: 0.55; }
  100% { transform: scaleY(1); opacity: 1; }
}

.pill-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--pill-fg-muted);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
.pill-timer { font-family: var(--font-mono); font-size: 11px; }
.pill-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 6px;
  background: rgba(245, 243, 236, 0.08);
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--pill-fg);
}

/* Polishing */
.hablai-pill--polishing { width: 230px; padding: 10px 16px; }
.pill-spinner { color: var(--pill-accent); display: flex; }
.pill-spinner svg { animation: spin-slow 1s linear infinite; }

.pill-shimmer {
  background: linear-gradient(
    90deg,
    var(--pill-fg-muted) 0%,
    var(--pill-fg) 40%,
    var(--pill-fg-muted) 80%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 1.8s linear infinite;
}

/* Done */
.hablai-pill--done { width: 210px; padding: 10px 16px; }
.pill-check {
  color: #0e1411;
  background: var(--pill-green);
  width: 20px; height: 20px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
}
.pill-label { font-size: 12.5px; color: var(--pill-fg); }
.pill-label strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.pill-dot-sep { margin: 0 6px; color: var(--pill-fg-muted); }
.pill-muted { color: var(--pill-fg-muted); }

/* Subtle top highlight to mimic soft specular */
.hablai-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent 40%);
  pointer-events: none;
}