/* ═══════════════════════════════════════════════════════════════════
   Voice Note Bubble — self-contained component styles
   ═══════════════════════════════════════════════════════════════════
   Prefix: .vn-  (voice note)
   No shared classes with .bubble-image / .bubble-video / .bubble-doc.

   DOM structure:
     .vn-bubble
       button.vn-play
         span.vn-icon-play   ▶
         span.vn-icon-pause  ❚❚
       .vn-wave  [role=slider]
         .vn-wave-bars        (grey bars)
         .vn-wave-fill        (green overlay, clipped by clip-path)
         .vn-wave-cursor      (draggable dot)
       span.vn-time           0:23
   ═══════════════════════════════════════════════════════════════════ */

.vn-bubble {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 340px;
    min-width: 220px;
    padding: 4px 2px 4px 2px;
    user-select: none;
    -webkit-user-select: none;
}

/* ── Play / pause button ────────────────────────────────────────── */
.vn-play {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    border: none;
    background: #00a884;
    color: #ffffff;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 13px;
    line-height: 1;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.vn-play:hover  { background: #008f72; }
.vn-play:active { transform: scale(0.94); }
.vn-play:disabled {
    background: #b8b8b8;
    cursor: default;
    color: #f0f0f0;
}

.vn-play .vn-icon-play  { display: block; }
.vn-play .vn-icon-pause { display: none; }

.vn-play.vn-is-playing .vn-icon-play  { display: none; }
.vn-play.vn-is-playing .vn-icon-pause { display: block; }

/* ── Waveform ───────────────────────────────────────────────────── */
.vn-wave {
    position: relative;
    flex: 1 1 auto;
    height: 30px;
    min-width: 0;
    cursor: pointer;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.vn-wave-bars {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    pointer-events: none;
}
.vn-wave-bars > span {
    flex: 1 1 auto;
    min-width: 2px;
    border-radius: 1px;
    background: #9d9d9d;
}

.vn-wave-fill {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    pointer-events: none;
    width: 100%;
    /* Hidden by default — revealed from the left by clip-path. */
    clip-path: inset(0 100% 0 0);
}
.vn-wave-fill > span {
    flex: 1 1 auto;
    min-width: 2px;
    border-radius: 1px;
    background: #00a884;
}

.vn-wave-cursor {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #00a884;
    box-shadow: 0 0 0 2px #ffffff;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.vn-wave:hover .vn-wave-cursor {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(0, 168, 132, 0.25);
}

/* ── Time label ─────────────────────────────────────────────────── */
.vn-time {
    flex: 0 0 auto;
    min-width: 36px;
    font-size: 11.5px;
    color: #667781;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .vn-bubble { min-width: 200px; max-width: 260px; }
    .vn-time   { font-size: 11px; min-width: 32px; }
}