/* ==========================================================================
   LcVoice — Modul CSS voice note ala WhatsApp (Live Chat Support)
   Dipakai bersama oleh chat pengguna (partials/live-chat-fab) dan admin.
   Selektor override diprefiks `.lc-vn-bubble` / `.lc-rec` agar aman terhadap
   CSS chat yang sudah ada.
   ========================================================================== */

/* ===== LC Voice Note — WhatsApp style ===== */
.lc-vn-bubble, .lc-rec {
  --wa-font: "Segoe UI","Helvetica Neue",Helvetica,"Lucida Grande",Arial,Ubuntu,Cantarell,sans-serif;
}

/* ---------- Bubble (tema gelap = default) ---------- */
.lc-vn-bubble {
  /* token masuk */
  --vn-bg: #202c33; --vn-meta: #8696a0; --vn-icon: #8696a0;
  --vn-wave-off: rgba(134,150,160,.45); --vn-wave-on: #c5ced3; --vn-dot: #e9edef;
  --vn-mic: #00a884; --vn-mic-played: #53bdeb; --vn-quote: #06cf9c;
  --vn-avatar-bg: #6a7175; --vn-avatar-fg: #d1d7db; --vn-text: #e9edef;

  position: relative; box-sizing: border-box;
  width: var(--vn-w, 240px); max-width: 100%;
  padding: 6px 7px 6px 6px;
  background: var(--vn-bg); color: var(--vn-text);
  border-radius: 7.5px; box-shadow: 0 1px .5px rgba(11,20,26,.13);
  font: 14.2px/19px var(--wa-font);
}
.lc-vn-bubble--out {
  --vn-bg: #005c4b; --vn-meta: rgba(233,237,239,.6); --vn-icon: rgba(233,237,239,.6);
  --vn-wave-off: rgba(233,237,239,.35); --vn-wave-on: rgba(233,237,239,.92); --vn-dot: #e9edef;
  --vn-mic: rgba(233,237,239,.6);
}
.lc-vn-bubble--in  { border-top-left-radius: 0; }
.lc-vn-bubble--out { border-top-right-radius: 0; }
.lc-vn-bubble::before { content: ""; position: absolute; top: 0; width: 8px; height: 13px; background: var(--vn-bg); }
.lc-vn-bubble--in::before  { left: -8px;  clip-path: polygon(100% 0, 0 0, 100% 100%); }
.lc-vn-bubble--out::before { right: -8px; clip-path: polygon(0 0, 100% 0, 0 100%); }

.lc-vn-quote {
  margin: 0 0 6px; padding: 4px 8px; border-radius: 6px; border-left: 4px solid var(--vn-quote);
  background: rgba(0,0,0,.2); color: var(--vn-meta); font-size: 12px; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lc-vn-mount { min-height: 52px; }

/* ---------- Tema terang: beri class .lc-vn-light pada kontainer chat, sinkron dengan toggle tema situs ---------- */
.lc-vn-light .lc-vn-bubble {
  --vn-bg: #ffffff; --vn-meta: #667781; --vn-icon: #667781;
  --vn-wave-off: rgba(102,119,129,.3); --vn-wave-on: #667781; --vn-dot: #667781;
  --vn-avatar-bg: #dfe5e7; --vn-avatar-fg: #ffffff; --vn-text: #111b21;
}
.lc-vn-light .lc-vn-bubble--out {
  --vn-bg: #d9fdd3; --vn-wave-off: rgba(17,27,33,.2); --vn-wave-on: rgba(17,27,33,.55); --vn-mic: #667781;
}
.lc-vn-light .lc-vn-quote { background: rgba(11,20,26,.06); }

/* ---------- Pemutar ---------- */
.lc-vn { display: grid; column-gap: 6px; align-items: center; }
.lc-vn--in  { grid-template-columns: 34px 34px minmax(0,1fr); grid-template-areas: "lead play track" ". . dur"; }
.lc-vn--out { grid-template-columns: 34px minmax(0,1fr) 34px; grid-template-areas: "play track lead" ". dur ."; }

.lc-vn__lead { grid-area: lead; position: relative; width: 34px; height: 34px; }
.lc-vn__avatar { display: block; width: 34px; height: 34px; border-radius: 50%; background: var(--vn-avatar-bg); overflow: hidden; }
.lc-vn__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lc-vn__avatar svg { width: 100%; height: 100%; fill: var(--vn-avatar-fg); }
.lc-vn__mic { position: absolute; bottom: -3px; width: 16px; height: 16px; color: var(--vn-mic); filter: drop-shadow(0 0 1px rgba(0,0,0,.35)); }
.lc-vn--in  .lc-vn__mic { right: -6px; }
.lc-vn--out .lc-vn__mic { left: -6px; }
.lc-vn__mic svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.lc-vn.is-played .lc-vn__mic { color: var(--vn-mic-played); }

.lc-vn__speed {
  position: absolute; inset: 0; display: none; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(11,20,26,.35); color: #fff; font: 600 12px/1 var(--wa-font);
}
.lc-vn.is-active .lc-vn__speed { display: block; }
.lc-vn.is-active .lc-vn__avatar, .lc-vn.is-active .lc-vn__mic { visibility: hidden; }

.lc-vn__play {
  grid-area: play; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--vn-icon); cursor: pointer; display: grid; place-items: center;
}
.lc-vn__play svg { width: 34px; height: 34px; fill: currentColor; }
.lc-vn__play:focus-visible, .lc-vn__wave:focus-visible { outline: 2px solid #53bdeb; outline-offset: 1px; }
.lc-vn.is-loading .lc-vn__play { opacity: .5; }
.lc-vn.is-error .lc-vn__play { color: #f15c6d; }

.lc-vn__track { grid-area: track; position: relative; height: 26px; display: flex; align-items: center; min-width: 0; touch-action: none; }
.lc-vn__wave { position: relative; flex: 1; height: 100%; cursor: pointer; outline: none; }
.lc-vn__bars { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; }
.lc-vn__bars i { flex: 0 0 2px; width: 2px; height: var(--h, 8px); border-radius: 1px; background: var(--vn-wave-off); }
.lc-vn__bars--on i { background: var(--vn-wave-on); }
.lc-vn__bars--on { clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0); }
.lc-vn__dot {
  position: absolute; top: 50%; left: var(--p, 0%); width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: var(--vn-dot); box-shadow: 0 1px 2px rgba(0,0,0,.35); pointer-events: none;
}
.lc-vn__dur { grid-area: dur; margin-top: 1px; font-size: 11px; line-height: 15px; color: var(--vn-meta); font-variant-numeric: tabular-nums; }

/* ---------- Jam + centang, tombol menu pesan ---------- */
.lc-vn-meta { position: absolute; right: 7px; bottom: 4px; display: flex; align-items: center; gap: 3px; font-size: 11px; line-height: 15px; color: var(--vn-meta); user-select: none; }
.lc-vn-tick { width: 16px; height: 11px; }
.lc-vn-tick.is-read { color: #53bdeb; }

.lc-vn-menu-btn {
  position: absolute; top: 2px; right: 3px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--vn-bg); color: var(--vn-meta); cursor: pointer;
  opacity: 0; transition: opacity .12s;
}
.lc-vn-menu-btn svg { width: 18px; height: 18px; }
.lc-vn-bubble:hover .lc-vn-menu-btn, .lc-vn-menu-btn:focus-visible { opacity: 1; }
@media (hover: none) { .lc-vn-menu-btn { display: none; } } /* perangkat sentuh: pakai long-press milik chat */

/* ---------- Bar rekam ---------- */
.lc-rec { --rec-text: #e9edef; --rec-icon: #8696a0; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px; }
.lc-vn-light .lc-rec { --rec-text: #111b21; --rec-icon: #667781; }
.lc-rec:not([hidden]) { display: flex; }
.lc-rec[hidden] { display: none; }
.lc-rec button { width: 40px; height: 40px; flex-shrink: 0; border: 0; border-radius: 50%; background: transparent; color: var(--rec-icon); cursor: pointer; display: grid; place-items: center; }
.lc-rec button svg { width: 24px; height: 24px; fill: currentColor; }
.lc-rec .lc-rec__trash:hover { color: var(--rec-text); }
.lc-rec .lc-rec__pause { color: #f15c6d; }
.lc-rec .lc-rec__send { background: #00a884; color: #fff; }
.lc-rec .lc-rec__send:hover { background: #06cf9c; }
.lc-rec__status { display: flex; align-items: center; gap: 8px; min-width: 58px; }
.lc-rec__dot { width: 10px; height: 10px; border-radius: 50%; background: #f15c6d; animation: lcvnPulse 1.2s ease-in-out infinite; }
.lc-rec.is-paused .lc-rec__dot { animation: none; opacity: .5; }
.lc-rec__time { font: 15px/20px var(--wa-font); font-variant-numeric: tabular-nums; color: var(--rec-text); }
.lc-rec__level { flex: 1; min-width: 0; height: 32px; display: flex; align-items: center; justify-content: flex-end; gap: 2px; overflow: hidden; }
.lc-rec__level i { flex: 0 0 2px; width: 2px; height: 3px; border-radius: 1px; background: var(--rec-icon); }
.lc-rec .ic-resume { display: none; }
.lc-rec.is-paused .ic-resume { display: block; }
.lc-rec.is-paused .ic-pause { display: none; }
@keyframes lcvnPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.8); } }