/* wpForo VNN Listen Mini */
.wpfvlm, .wpfvlm * { box-sizing: border-box; }
.wpfvlm {
    width: 100%;
    max-width: 100%;
    margin: 0 0 15px;
    background: #f3f1f1;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    font-size: 13px;
    color: #444;
}

.wpfvlm-now {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    padding: 6px 14px;
    font-size: 12px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    border-bottom: 1px solid #e2dede;
}
.wpfvlm-select {
    flex: 0 0 auto;
    max-width: 200px;
    background: #fff;
    color: #7a1515;
    border: 1px solid #b9b0b0;
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 12px;
    height: auto;
    line-height: 1.3;
}
.wpfvlm-np-label { color: #888; flex: 0 0 auto; }
.wpfvlm-np-count { color: #888; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.wpfvlm-np-title { color: #7a1515; font-weight: 600; overflow: hidden; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.wpfvlm-np-text { display: inline-block; white-space: nowrap; }
.wpfvlm-np-text.wpfvlm-scroll { animation: wpfvlm-tick var(--dur, 8s) linear infinite alternate; }
@keyframes wpfvlm-tick { 0%, 15% { transform: translateX(0); } 85%, 100% { transform: translateX(var(--shift, 0)); } }
@media (prefers-reduced-motion: reduce) {
    .wpfvlm-np-title { text-overflow: ellipsis; }
    .wpfvlm-np-text.wpfvlm-scroll { animation: none; }
}

.wpfvlm-now .wpfvlm-pop { width: 22px; height: 22px; }
html.wpfvlm-popout-page, html.wpfvlm-popout-page body { margin: 0; padding: 0; background: #f3f1f1; }
html.wpfvlm-popout-page .wpfvlm { margin: 0; border: 0; border-radius: 0; }

.wpfvlm-controls {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px 10px;
    background: #f3f1f1;
}
#wpfvlm .wpfvlm-controls { padding: 7px 14px 10px !important; height: auto; overflow: visible; }

.wpfvlm-btn {
    background: #444;
    border: 1px solid #2b2b2b;
    color: #fff;
    cursor: pointer;
    border-radius: 4px;
    width: 26px;
    height: 26px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
}
#wpfvlm .wpfvlm-btn,
#wpfvlm .wpfvlm-btn:hover,
#wpfvlm .wpfvlm-btn:focus,
#wpfvlm .wpfvlm-btn.wpfvlm-on { color: #fff !important; text-shadow: none; }
.wpfvlm-btn:hover { background: #2b2b2b; border-color: #111; }
.wpfvlm-btn.wpfvlm-on { background: #2b2b2b; border-color: #7a1515; color: #fff; }

.wpfvlm-seek, .wpfvlm-vol {
    position: relative;
    height: 26px;
    background: #fff;
    border: 1px solid #c9c0c0;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
    touch-action: none;
}
#wpfvlm .wpfvlm-seek { flex: 1 1 0; min-width: 40px; width: auto; }
#wpfvlm .wpfvlm-vol  { flex: 0 0 100px; width: 100px; min-width: 0; }
.wpfvlm-seek-dot, .wpfvlm-vol-dot {
    position: absolute;
    display: block;
    top: calc(50% - 6.5px);
    width: 13px;
    height: 13px;
    margin: 0 0 0 -6.5px;
    padding: 0;
    border-radius: 50%;
    pointer-events: none;
}
.wpfvlm-seek-dot { background: #7a1515; left: 14px; }
.wpfvlm-vol-dot  { background: #555; left: calc(8px + (100% - 16px) * 0.85); }

.wpfvlm-time {
    flex-shrink: 0;
    font-size: 11px;
    color: #666;
    font-variant-numeric: tabular-nums;
    min-width: 75px;
    text-align: center;
}
.wpfvlm-vol-icon { flex-shrink: 0; color: #7a1515; font-size: 14px; }

@media (max-width: 600px) {
    .wpfvlm-vol, .wpfvlm-vol-icon { display: none; }
    .wpfvlm-select { max-width: 120px; }
}

/* ── Transcript panel (smaller than the Listen page one) ── */
.wpfvlm-trbtn { width: auto; padding: 0 8px; font-size: 11px; height: 22px; white-space: nowrap; }
.wpfvlm-trbtn[hidden], .wpfvlm-tr[hidden] { display: none !important; }
.wpfvlm-tr { background: #fff; border-top: 1px solid #e2dede; }
.wpfvlm-tr-head { display: flex; align-items: center; gap: 6px; padding: 5px 14px; background: #f3f1f1; font-size: 11px; color: #666; }
.wpfvlm-tr-q { flex: 1 1 120px; min-width: 80px; height: 22px; background: #fff; color: #444; border: 1px solid #c9c0c0; border-radius: 4px; padding: 0 6px; font-size: 11px; box-shadow: none; }
.wpfvlm-tr-count { color: #888; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wpfvlm-tr-head button { background: #444; border: 1px solid #2b2b2b; color: #fff; border-radius: 4px; width: 22px; height: 22px; font-size: 9px; padding: 0; cursor: pointer; line-height: 1; }
.wpfvlm-tr-head button:hover { background: #2b2b2b; }
.wpfvlm-tr-fl { display: flex; align-items: center; gap: 3px; cursor: pointer; user-select: none; white-space: nowrap; }
.wpfvlm-tr-body { position: relative; max-height: 150px; overflow-y: auto; padding: 6px 14px 8px; color: #444; font-size: 12px; line-height: 1.6; scrollbar-width: thin; }
.wpfvlm-seg { margin: 0 0 6px; padding: 0; }
.wpfvlm-ts { display: inline-block; min-width: 36px; margin-right: 4px; color: #999; font-size: 10px; font-variant-numeric: tabular-nums; cursor: pointer; text-decoration: none; }
.wpfvlm-ts:hover { color: #7a1515; }
.wpfvlm-spk { margin-right: 4px; color: #7a1515; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.wpfvlm-w { cursor: pointer; border-radius: 2px; }
.wpfvlm-w:hover { background: #e9e4e4; }
.wpfvlm-w.wpfvlm-hit { background: #f1d98a; color: #222; }
.wpfvlm-w.wpfvlm-hit-cur { outline: 2px solid #7a1515; }
.wpfvlm-w.wpfvlm-cur { background: #7a1515; color: #fff; }
/* pop-out: transcript fills the window */
html.wpfvlm-popout-page .wpfvlm-tr-body { max-height: calc(100vh - 140px); font-size: 13px; }
html.wpfvlm-popout-page body { font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif; }