/* GZ Chat Voice Player — shared styles
 *
 * Plan 2026-05-26 Batch 3: WhatsApp-style audio bubble used by all six web
 * chat surfaces (3 customer + 3 super-admin inbox). Pairs with the shared
 * factory at /assets/js/_chat_voice_player.js.
 *
 * The player's outermost class is `.cvp`, which is intentionally short
 * because it appears INSIDE other already-scoped bubble containers
 * (`.lsc-msg__atts`, `.scc-msg__atts`, `.pac-msg__atts`, `.sci-msg__atts`)
 * — those scopes prevent collisions with anything else on the page.
 *
 * Variant matrix (handled via modifier classes, not separate stylesheets):
 *   .cvp--from-customer   — customer-authored bubble (neutral fill)
 *   .cvp--from-staff      — staff-authored bubble (primary-tinted fill)
 *   .cvp--idle / --playing — paint the play/pause icon background
 *   .cvp--error           — failed to load (red-tinted footer)
 *
 * RTL is handled at the container level via `dir="rtl"` on `.cvp`; the
 * bars and play button automatically reflow via logical properties.
 *
 * Dark mode hook: `[data-theme="dark"]` on the document or a parent.
 * Falls back to `body.admin-page.dark-mode` for legacy admin pages.
 */

.cvp {
  --cvp-bar-color:        rgba(var(--text-rgb, 11, 18, 32), 0.35);
  --cvp-bar-played-color: rgba(var(--primary-rgb, 227, 82, 5), 0.95);
  --cvp-btn-bg:           rgba(var(--primary-rgb, 227, 82, 5), 0.12);
  --cvp-btn-bg-hover:     rgba(var(--primary-rgb, 227, 82, 5), 0.22);
  --cvp-btn-fg:           rgb(var(--primary-rgb, 227, 82, 5));
  --cvp-time-color:       var(--muted, #54607a);
  --cvp-surface:          var(--surface-2, #f1f4fa);
  --cvp-border:           rgba(var(--text-rgb, 11, 18, 32), 0.06);

  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: var(--cvp-surface);
  border: 1px solid var(--cvp-border);
  border-radius: 999px;
  min-width: 220px;
  max-width: 360px;
  width: 100%;
  box-sizing: border-box;
  margin-block-start: 4px;
  font-family: inherit;
  /* Force tabular numerals on the readout (mm:ss) even when the rest of
   * the chat uses proportional ones. */
  font-variant-numeric: tabular-nums;
}

/* Staff-authored: primary-tinted played-bar + thin accent ring */
.cvp.cvp--from-staff {
  --cvp-bar-played-color: rgba(var(--primary-rgb, 227, 82, 5), 1);
  box-shadow: 0 0 0 1px rgba(var(--primary-rgb, 227, 82, 5), 0.30);
}

/* Play / pause button */
.cvp__btn {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 0;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--cvp-btn-bg);
  color: var(--cvp-btn-fg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, transform 0.08s ease;
}
.cvp__btn:hover,
.cvp__btn:focus-visible {
  background: var(--cvp-btn-bg-hover);
  outline: none;
}
.cvp__btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 227, 82, 5), 0.30);
}
.cvp__btn:active { transform: scale(0.94); }
.cvp__btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  display: block;
}

/* Waveform container — a flex row of bars. The container itself owns
 * the seek interaction, so the bars are pointer-events: none. */
.cvp__bars {
  flex: 1 1 auto;
  min-width: 0;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  /* Allow the seek interaction to start on top of the bars without
   * scrolling the page on touch. */
  touch-action: none;
  user-select: none;
}
.cvp__bars:focus-visible {
  outline: 2px solid rgba(var(--primary-rgb, 227, 82, 5), 0.55);
  outline-offset: 2px;
  border-radius: 4px;
}

.cvp__bar {
  flex: 1 1 0;
  min-width: 2px;
  max-width: 4px;
  background: var(--cvp-bar-color);
  border-radius: 999px;
  transition: background-color 0.16s ease;
  pointer-events: none;
  /* The height is set inline (in JS) as a percentage. The container
   * height drives the visual scale. */
}

.cvp__bar.cvp--bar-played {
  background: var(--cvp-bar-played-color);
}

/* mm:ss readout */
.cvp__time {
  flex: 0 0 auto;
  font-size: 0.78rem;
  color: var(--cvp-time-color);
  /* The element is also dir="ltr" via HTML to keep the colon stable. */
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  /* In some host pages this would otherwise inherit a translation
   * adapter — but voice timers are technical strings, never translated. */
  white-space: nowrap;
}

/* Hidden <audio> — visually + interactively invisible, but kept in the
 * accessibility tree so assistive tech that prefers the native player
 * can still find the source. */
.cvp__audio {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Error state: dim the readout + tint the border. */
.cvp.cvp--error {
  border-color: rgba(220, 53, 69, 0.55);
}
.cvp.cvp--error .cvp__time {
  color: rgb(220, 53, 69);
}
.cvp.cvp--error .cvp__btn {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Reduced motion: drop the transitions but keep the played-fill */
@media (prefers-reduced-motion: reduce) {
  .cvp__bar,
  .cvp__btn {
    transition: none;
  }
}

/* ─── Dark mode ────────────────────────────────────────────────────── */
[data-theme="dark"] .cvp,
body.admin-page.dark-mode .cvp,
body[data-theme="dark"] .cvp {
  --cvp-bar-color:        rgba(255, 255, 255, 0.30);
  --cvp-btn-bg:           rgba(var(--primary-rgb, 227, 82, 5), 0.20);
  --cvp-btn-bg-hover:     rgba(var(--primary-rgb, 227, 82, 5), 0.32);
  --cvp-surface:          rgba(255, 255, 255, 0.06);
  --cvp-border:           rgba(255, 255, 255, 0.12);
  --cvp-time-color:       rgba(255, 255, 255, 0.78);
}

/* Public-site dark mode (localStorage gz_theme_preference=dark) sets
 * data-theme on the documentElement just like the admin one — covered
 * by the rule above. The :where layer keeps specificity manageable. */

/* ─── Compact bubble fallback for very narrow widgets (panel customer
 *      slide-in widget on mobile pinches to ~280 px) ─────────────────── */
@media (max-width: 380px) {
  .cvp {
    min-width: 200px;
    padding: 5px 10px;
    gap: 8px;
  }
  .cvp__btn {
    width: 30px;
    height: 30px;
  }
  .cvp__btn svg {
    width: 14px;
    height: 14px;
  }
  .cvp__time {
    font-size: 0.74rem;
  }
}