.voice-pill{--vp-slide:0px;--vp-cancel:0;--vp-ease-out:cubic-bezier(.23, 1, .32, 1);isolation:isolate;width:var(--vp-size);height:var(--vp-size);border-radius:var(--vp-radius);color:var(--vp-icon);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none;transition:transform .16s var(--vp-ease-out), color .15s ease;background:0 0;border:0;outline:none;flex:none;place-items:center;margin:0;padding:0;font-family:inherit;display:inline-grid;position:relative}.voice-pill:before{content:"";inset:calc(-1 * var(--vp-hit));position:absolute}.voice-pill[data-state=listening],.voice-pill[data-state=loading]{z-index:1;color:var(--vp-accent)}.voice-pill[data-pressed]{transform:scale(.95)}.voice-pill:focus-visible{outline-offset:4px;outline:2px solid #f6f6f6}.voice-pill:disabled{cursor:default;opacity:.5;pointer-events:none}.voice-pill__capsule{inset:0 0 0 calc(-1 * (var(--vp-reach) + var(--vp-extra)));border:1px solid color-mix(in srgb, var(--vp-icon) 22%, transparent);border-radius:var(--vp-radius);background:var(--vp-bg);clip-path:inset(0 0 0 calc(var(--vp-reach) + var(--vp-extra)) round var(--vp-radius));pointer-events:none;transition:clip-path var(--vp-open) var(--vp-ease-out), background-color .15s ease;position:absolute}@media (hover:hover) and (pointer:fine){.voice-pill[data-state=idle]:not(:disabled):hover .voice-pill__capsule{background:color-mix(in srgb, var(--vp-icon) 10%, var(--vp-bg))}}.voice-pill[data-state=listening] .voice-pill__capsule{clip-path:inset(0 0 round var(--vp-radius))}.voice-pill__time{width:var(--vp-clock-w);box-sizing:border-box;color:var(--vp-accent);font-variant-numeric:tabular-nums;opacity:0;filter:blur(2px);transform:translateX(var(--vp-slide));pointer-events:none;transition:opacity .2s ease, filter .2s ease, transform .24s var(--vp-ease-out);place-items:center;font-size:10px;font-weight:600;line-height:1;display:grid;position:absolute;inset:0 100% 0 auto}.voice-pill[data-state=listening] .voice-pill__time{opacity:calc(1 - var(--vp-cancel));filter:blur()}.voice-pill__wave{top:18%;right:calc(100% + var(--vp-clock-w));width:var(--vp-wave-w);opacity:0;filter:blur(2px);height:64%;transform:translateX(var(--vp-slide));pointer-events:none;transition:opacity .2s ease, filter .2s ease, transform .24s var(--vp-ease-out);position:absolute}.voice-pill[data-state=listening] .voice-pill__wave{opacity:calc(1 - var(--vp-cancel));filter:blur()}.voice-pill__cancel{width:var(--vp-extra);color:var(--vp-accent);opacity:var(--vp-cancel);pointer-events:none;justify-content:center;align-items:center;gap:3px;font-size:10px;font-weight:600;line-height:1;display:inline-flex;position:absolute;inset:0 100% 0 auto}.voice-pill[data-sliding] .voice-pill__time,.voice-pill[data-sliding] .voice-pill__wave,.voice-pill[data-sliding] .voice-pill__glyph{transition-property:opacity,filter}.voice-pill__glyph{width:var(--vp-size);height:var(--vp-size);transform:translateX(var(--vp-slide));transition:transform .24s var(--vp-ease-out);place-items:center;display:grid;position:relative}.voice-pill__glyph>*{transition:opacity .2s ease, filter .2s ease, transform .2s var(--vp-ease-out);grid-area:1/1}.voice-pill__mic{display:inline-flex}.voice-pill__loading{width:calc(var(--vp-size) * .36);height:calc(var(--vp-size) * .36);border:2px solid color-mix(in srgb, currentColor 35%, transparent);opacity:0;border-top-color:currentColor;border-radius:999px;transform:scale(.7)}.voice-pill[data-state=loading] .voice-pill__loading{opacity:1;will-change:transform;animation:.8s linear infinite voice-pill-spin;transform:scale(1)}.voice-pill[data-state=loading] .voice-pill__mic,.voice-pill[data-state=loading] .voice-pill__stop{opacity:0}.voice-pill__stop{width:var(--vp-stop);height:var(--vp-stop);opacity:0;filter:blur(2px);background:currentColor;border-radius:22%;transform:scale(.6)}.voice-pill[data-state=listening] .voice-pill__mic{opacity:0;filter:blur(2px);transform:scale(.7)}.voice-pill[data-state=listening] .voice-pill__stop{opacity:1;filter:blur();transform:scale(1)}.voice-pill[data-input=key] .voice-pill__capsule,.voice-pill[data-input=key] .voice-pill__time,.voice-pill[data-input=key] .voice-pill__glyph>*{transition-duration:0s}@media (prefers-reduced-motion:reduce){.voice-pill{transition:color .15s;transform:none!important}.voice-pill__capsule{transition:background-color .15s}.voice-pill__glyph>*{transition:opacity .2s;filter:none!important;transform:none!important}.voice-pill__time,.voice-pill__wave,.voice-pill__glyph{transition-property:opacity;filter:none!important}}@keyframes voice-pill-spin{0%{transform:rotate(0)scale(1)}to{transform:rotate(360deg)scale(1)}}
