/**
 * File:          /pwa/css/voice-library.css
 * Version:       0.2.0
 * Last Modified: 2026-10-27 10:13 PM ET
 * Changes:       0.2.0 review fix: use the theme's inverted text/surface pair
 *                for the playing button and Your voice badge; retain tap feedback.
 *                0.2.0 clearer sample states, tap feedback and ownership badges.
 *                NEW — Admin > Voice Library page styles (approved mockup),
 *                375 px first, theme variables only for surfaces and text.
 */
.vl { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 24px; min-width: 0; }
.vl-sr { position: absolute; left: -9999px; }
.vl-sync { height: 44px; border-radius: 12px; border: 0; background: var(--text-primary); color: var(--bg-primary); font-size: 15px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; white-space: nowrap; width: 100%; }
.vl-sync:disabled { opacity: .6; cursor: progress; }
.vl-result:empty { display: none; }
.vl-result { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.vl-result-line { color: var(--text-secondary); overflow-wrap: anywhere; }
.vl-result-line.vl-error { color: var(--danger); }
.vl-result-line.vl-skipped { color: var(--warning); }
.vl-note { color: var(--text-tertiary); }
.vl-last { font-size: 12px; color: var(--text-secondary); text-align: center; overflow-wrap: anywhere; }
.vl-search { height: 38px; border-radius: 10px; background: var(--bg-secondary); display: flex; align-items: center; gap: 8px; padding: 0 10px; color: var(--text-secondary); }
.vl-search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--text-primary); font-size: 15px; }
.vl-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.vl-chip { height: 30px; padding: 0 12px; border-radius: 999px; border: .5px solid var(--border-primary); background: var(--bg-secondary); color: var(--text-primary);
  font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.vl-chip[aria-pressed="true"] { background: var(--text-primary); color: var(--bg-primary); }
.vl-list { min-width: 0; }
.vl-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: .5px solid var(--border-primary); min-width: 0; }
.vl-off .vl-body { opacity: .5; }
.vl-play { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; border: 0; background: var(--bg-secondary); color: var(--text-primary);
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .12s ease, background-color .12s ease, color .12s ease; touch-action: manipulation; }
.vl-play:active { transform: scale(.9); }
.vl-play.vl-playing { background: var(--text-primary); color: var(--bg-primary); }
.vl-spinner { width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: vl-spin .7s linear infinite; }
@keyframes vl-spin { to { transform: rotate(360deg); } }
.vl-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; background: none; border: 0; padding: 0; text-align: left; color: inherit; cursor: pointer; font: inherit; }
.vl-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.vl-name { font-size: 16px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.vl-pill { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.vl-badge { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.vl-your-voice { background: var(--text-primary); color: var(--bg-primary); }
.vl-call-voice { background: var(--bg-tertiary); color: var(--text-secondary); }
.vl-meta { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vl-switch { width: 44px; height: 26px; border-radius: 13px; border: 0; padding: 0; background: var(--bg-tertiary); position: relative; flex-shrink: 0; cursor: pointer; }
.vl-switch[aria-checked="true"] { background: #33c773; }
.vl-knob { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: left .15s; }
.vl-switch[aria-checked="true"] .vl-knob { left: 20px; }
.vl-detail { padding: 0 0 12px 46px; display: flex; flex-direction: column; gap: 6px; }
.vl-hint { font-size: 12px; color: var(--text-secondary); }
.vl-preview-error { padding: 0 8px 8px 46px; font-size: 12px; overflow-wrap: anywhere; }
.vl-id { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); overflow-wrap: anywhere; }
.vl-label { font-size: 12px; color: var(--text-secondary); }
.vl-seg { display: flex; gap: 4px; }
.vl-seg-btn { flex: 1; min-height: 32px; border-radius: 8px; border: .5px solid var(--border-primary); background: var(--bg-secondary); color: var(--text-primary);
  font-size: 13px; cursor: pointer; white-space: nowrap; }
.vl-seg-btn[aria-checked="true"] { background: var(--text-primary); color: var(--bg-primary); font-weight: 600; }
.vl-empty { padding: 16px; font-size: 13px; color: var(--text-secondary); text-align: center; }
.vl-error { color: var(--danger); }
/* === END OF FILE (FILENAME: /pwa/css/voice-library.css) === */