/* Weibo voice bar (batch F): a pill with a sound-wave icon and the length, like Weibo's own; it grows with the length. */
.lumos-voice { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 10px; }
.lumos-voice-bar {
    position: relative; display: inline-flex; align-items: center; gap: 10px; overflow: hidden;
    width: var(--voice-width, 140px); max-width: 60%; min-width: 120px; min-height: 44px; padding: 0 16px;
    border: 1px solid #e5e7eb; border-radius: 12px; background: #f7f7f8; color: #111827;
    font: inherit; font-size: 17px; line-height: 1; cursor: pointer; text-align: left;
}
.lumos-voice-bar:hover { background: #f0f0f2; }
.lumos-voice-bar:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.lumos-voice-progress {
    position: absolute; inset: 0 auto 0 0; width: var(--voice-progress, 0%); background: rgba(37, 99, 235, .10);
    pointer-events: none; transition: width .2s linear;
}
.lumos-voice-icon { position: relative; display: inline-block; width: 18px; height: 18px; flex: none; }
.lumos-voice-icon i {
    position: absolute; top: 50%; left: 0; border: 2px solid currentColor; border-color: currentColor currentColor transparent transparent;
    border-radius: 50%; transform: translateY(-50%) rotate(45deg); box-sizing: border-box;
}
.lumos-voice-icon i:nth-child(1) { width: 4px; height: 4px; left: 1px; background: currentColor; border: 0; transform: translateY(-50%); }
.lumos-voice-icon i:nth-child(2) { width: 10px; height: 10px; left: -1px; }
.lumos-voice-icon i:nth-child(3) { width: 16px; height: 16px; left: -4px; }
.lumos-voice-bar[aria-pressed="true"] .lumos-voice-icon i:nth-child(2) { animation: lumos-voice-wave 1s infinite .1s; }
.lumos-voice-bar[aria-pressed="true"] .lumos-voice-icon i:nth-child(3) { animation: lumos-voice-wave 1s infinite .35s; }
@keyframes lumos-voice-wave { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
@media (prefers-reduced-motion: reduce) { .lumos-voice-bar[aria-pressed="true"] .lumos-voice-icon i { animation: none; } }
.lumos-voice-time { position: relative; font-variant-numeric: tabular-nums; }
.lumos-voice-toggle {
    min-height: 32px; padding: 0 6px; border: 0; background: none; color: #2563eb; font: inherit; font-size: 13px; cursor: pointer;
}
.lumos-voice-toggle:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.lumos-voice-text { flex-basis: 100%; margin: 0; padding: 8px 12px; border-radius: 8px; background: #f7f7f8; color: #374151; font-size: 14px; }
.lumos-voice-text[hidden] { display: none; }
/* The theme zeroes the padding of a weibo's paragraphs (.comment .right p, #page_content_wrapper p), which left the
   transcript against its box: these win over both. */
.lumos-voice .lumos-voice-text,
.comment .right .lumos-voice .lumos-voice-text,
#page_content_wrapper .lumos-voice .lumos-voice-text { padding: 10px 14px; line-height: 1.7; }
.lumos-voice-failed .lumos-voice-time::after { content: ' ⚠'; }
@media (max-width: 600px) { .lumos-voice-bar { max-width: 80%; } }