/* ============================================================
   Lafa · faithful pill component · lafa-pill.css
   AUTHORED (not fully generated). Consumes the pill tokens from
   themes.css (--pill-*), which ARE generated from the app
   (FloatingPillController.swift + SignalDots). When the app pill
   changes, re-run the generator and these values update; the
   keyframe LOGIC below is hand-authored to match the app motion.

   Source of truth for motion:
     FloatingPillController.swift · SignalDots (14 bars, listening
     envelope, transcribing traveling wave) + lafaDrawDoneFlourish
     (done checkmark easeOutBack + comet).

   Usage (web imports this after themes.css):
     <div class="lafa-pill" data-phase="listening">
       <span class="lafa-pill__signal">
         <i></i>×14
         <svg class="lafa-pill__check" viewBox="0 0 70 24"><path d="M 29.5 12.5 L 33.6 16.4 L 41.2 7.4"/></svg>
       </span>
       <span class="lafa-pill__label">Slušam</span>
       <span class="lafa-pill__badge" data-kind="timer">0:04</span>
     </div>
   The 14 <i> bars + the done <svg> checkmark BOTH live inside __signal
   (the svg is absolutely positioned over the 70×24 signal zone).
   Add data-variant="agent" for the purple agent pill.
   ============================================================ */

.lafa-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--pill-gap);
  width: var(--pill-w);
  height: var(--pill-h);
  padding: 0 var(--pill-pad-x);
  box-sizing: border-box;
  border-radius: var(--pill-r);
  background: var(--pill-fill);
  border: var(--pill-border-w) solid
    color-mix(in srgb, var(--pill-c-listening) calc(var(--pill-border-op) * 100%), rgba(255,255,255,0.16));
  box-shadow:
    0 var(--pill-glow-y) var(--pill-glow-r)
      rgba(var(--pc-glow-rgb, var(--pill-c-transcribing-rgb)), var(--pill-glow-op)),
    0 10px 28px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.06);
  color: #fff;
  font-family: var(--font-display, -apple-system, system-ui, sans-serif);
  --pc: var(--pill-c-listening);
}

/* Per-phase accent (drives bar color + glow). */
.lafa-pill[data-phase="listening"]     { --pc: var(--pill-c-listening); }
.lafa-pill[data-phase="transcribing"]  { --pc: var(--pill-c-transcribing); --pc-glow-rgb: var(--pill-c-transcribing-rgb); }
.lafa-pill[data-phase="pasting"]        { --pc: var(--pill-c-pasting); --pc-glow-rgb: var(--pill-c-transcribing-rgb); }
.lafa-pill[data-phase="done"]           { --pc: var(--pill-c-done); --pc-glow-rgb: var(--pill-c-done-rgb); }
.lafa-pill[data-phase="confirmingCancel"] { --pc: var(--pill-c-cancel); }
.lafa-pill[data-phase="error"]          { --pc: var(--pill-c-error); }
.lafa-pill[data-variant="agent"]        { --pc: var(--pill-c-agent); --pc-glow-rgb: var(--pill-c-agent-rgb); }
.lafa-pill[data-variant="agent"][data-phase="done"] { --pc: var(--pill-c-agent); }

/* Expanded two-line format (detail line under the title). */
.lafa-pill.is-expanded {
  height: var(--pill-h-expanded);
  border-radius: var(--pill-r-expanded);
  align-items: flex-start;
  padding-top: 10px;
  flex-wrap: wrap;
}

/* ---- signal (14 bars in a 70×24 zone) ---- */
.lafa-pill__signal {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pill-bar-gap);
  width: var(--pill-sig-w);
  height: var(--pill-sig-h);
  flex: 0 0 auto;
}
.lafa-pill__signal i {
  display: block;
  width: var(--pill-bar-w);
  height: 4px;
  border-radius: calc(var(--pill-bar-w) / 2);
  background: var(--pc);
  transform-origin: center;
}

/* Per-bar constants (envelope for listening, delay for the traveling wave,
   silhouette height for pasting). Generated for barCount = 14. */
.lafa-pill__signal i:nth-child(1){--env:0.550;--tw-delay:0.000s;--paste-h:7px;}
.lafa-pill__signal i:nth-child(2){--env:0.619;--tw-delay:-0.091s;--paste-h:7px;}
.lafa-pill__signal i:nth-child(3){--env:0.688;--tw-delay:-0.182s;--paste-h:8px;}
.lafa-pill__signal i:nth-child(4){--env:0.758;--tw-delay:-0.273s;--paste-h:9px;}
.lafa-pill__signal i:nth-child(5){--env:0.827;--tw-delay:-0.364s;--paste-h:10px;}
.lafa-pill__signal i:nth-child(6){--env:0.896;--tw-delay:-0.455s;--paste-h:10px;}
.lafa-pill__signal i:nth-child(7){--env:0.965;--tw-delay:-0.546s;--paste-h:10px;}
.lafa-pill__signal i:nth-child(8){--env:0.965;--tw-delay:-0.636s;--paste-h:10px;}
.lafa-pill__signal i:nth-child(9){--env:0.896;--tw-delay:-0.727s;--paste-h:9px;}
.lafa-pill__signal i:nth-child(10){--env:0.827;--tw-delay:-0.818s;--paste-h:8px;}
.lafa-pill__signal i:nth-child(11){--env:0.758;--tw-delay:-0.909s;--paste-h:7px;}
.lafa-pill__signal i:nth-child(12){--env:0.688;--tw-delay:-1.000s;--paste-h:7px;}
.lafa-pill__signal i:nth-child(13){--env:0.619;--tw-delay:-1.091s;--paste-h:7px;}
.lafa-pill__signal i:nth-child(14){--env:0.550;--tw-delay:-1.182s;--paste-h:7px;}

/* LISTENING - symmetric envelope (center bars taller), gentle breathing.
   App: height = min(24, 4 + level*20*envelope); envelope = 1 - |i-c|/c*0.45.
   Idle web has no live level, so we breathe each bar to its envelope peak with
   staggered timing for an organic, voice-like glide. */
.lafa-pill[data-phase="listening"] .lafa-pill__signal i {
  --peak: calc(var(--pill-listen-base, 4px) + var(--pill-listen-gain, 20px) * var(--env));
  animation: lafa-pill-listen 1.15s ease-in-out infinite;
  animation-delay: calc(var(--tw-delay) * 0.7);
  opacity: 0.84;
}
@keyframes lafa-pill-listen {
  0%, 100% { height: calc(5px + (var(--peak) - 5px) * 0.28); }
  50%      { height: var(--peak); }
}

/* TRANSCRIBING - traveling wave. App: head = (t*speed) mod period; a bump
   sweeps L→R; height 5→23px, opacity 0.24→0.96 as the head passes each bar.
   Full sweep = period/speed = --pill-tw-cycle. Negative per-bar delay places
   each bar at a different phase so the bump travels. */
.lafa-pill[data-phase="transcribing"] .lafa-pill__signal i,
.lafa-pill[data-phase="pasting"] .lafa-pill__signal i {
  animation: lafa-pill-wave var(--pill-tw-cycle) linear infinite;
  animation-delay: var(--tw-delay);
}
@keyframes lafa-pill-wave {
  0%   { height: var(--pill-tw-h-base); opacity: var(--pill-tw-op-base); }
  12%  { height: calc(var(--pill-tw-h-base) + var(--pill-tw-h-gain)); opacity: calc(var(--pill-tw-op-base) + var(--pill-tw-op-gain)); }
  26%  { height: var(--pill-tw-h-base); opacity: var(--pill-tw-op-base); }
  100% { height: var(--pill-tw-h-base); opacity: var(--pill-tw-op-base); }
}

/* PASTING - app uses a calm center-bumped silhouette (fixed heights) in the
   paste color, no traveling sweep. Override the wave with the static shape
   plus a soft overall breathe. */
.lafa-pill[data-phase="pasting"] .lafa-pill__signal i {
  animation: lafa-pill-paste 1.4s ease-in-out infinite;
  animation-delay: 0s;
  height: var(--paste-h);
  opacity: 0.86;
}
@keyframes lafa-pill-paste {
  0%, 100% { opacity: 0.62; }
  50%      { opacity: 0.96; }
}

/* DONE - hide the bars, draw the centered green checkmark stroke that scales
   in with easeOutBack over --pill-done-in, plus comet dots shooting outward.
   App: lafaDrawDoneFlourish → lafaCheckmark(scale: easeOutBack) + signals comet. */
.lafa-pill[data-phase="done"] .lafa-pill__signal i { opacity: 0; }
.lafa-pill__check {
  position: absolute;
  inset: 0;
  width: var(--pill-sig-w);
  height: var(--pill-sig-h);
  display: none;
  overflow: visible;
}
.lafa-pill[data-phase="done"] .lafa-pill__check { display: block; }
.lafa-pill__check path {
  stroke: var(--pc);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: lafa-pill-check var(--pill-done-in) var(--pill-ease-out-back) forwards;
}
@keyframes lafa-pill-check {
  0%   { transform: scale(0.1); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
/* Comet dots (approximation of the signals flourish trail). */
.lafa-pill__check::before,
.lafa-pill__check::after {
  content: "";
  position: absolute;
  top: calc(50% - 1.5px);
  left: calc(50% - 1.5px);
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--pc);
  opacity: 0;
  animation: lafa-pill-comet var(--pill-done-comet-dur) ease-out var(--pill-done-comet-start) forwards;
}
.lafa-pill__check::after { animation-name: lafa-pill-comet-r; }
@keyframes lafa-pill-comet {
  0%   { opacity: 0.9; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(-26px) scale(0.4); }
}
@keyframes lafa-pill-comet-r {
  0%   { opacity: 0.9; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(26px) scale(0.4); }
}

/* ---- label + trailing badge ---- */
.lafa-pill__label {
  font-size: var(--pill-label-size);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lafa-pill__spacer { flex: 1 1 auto; }
.lafa-pill__badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.64);
}
.lafa-pill__badge[data-kind="timer"] {
  min-width: 42px;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.52);
  background: transparent;
}

/* ---- compact (signal-only) format ---- */
.lafa-pill.is-compact {
  width: var(--pill-compact-w);
  height: var(--pill-compact-h);
  border-radius: var(--pill-compact-r);
  padding: 0;
  justify-content: center;
  gap: 0;
}
.lafa-pill.is-compact .lafa-pill__label,
.lafa-pill.is-compact .lafa-pill__badge { display: none; }

/* ---- accessibility: honor reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .lafa-pill__signal i,
  .lafa-pill__check path,
  .lafa-pill__check::before,
  .lafa-pill__check::after {
    animation: none !important;
  }
  /* settle into a readable static state */
  .lafa-pill[data-phase="listening"] .lafa-pill__signal i { height: var(--peak); opacity: 0.8; }
  .lafa-pill[data-phase="transcribing"] .lafa-pill__signal i,
  .lafa-pill[data-phase="pasting"] .lafa-pill__signal i { height: var(--paste-h); opacity: 0.7; }
  .lafa-pill[data-phase="done"] .lafa-pill__check path { transform: scale(1); opacity: 1; }
}