/* ═══════════════════════════════════════════════════════════════
   TPP Voice Reader — voice-reader.css  v1.4
   Merriweather · 4px radius · Full-width · All-device responsive
   High specificity to override SmartMag / theme button resets
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;1,300&display=swap');

/* ── Design tokens (scoped to wrapper) ──────────────────────── */
.tpp-vr-wrap {
  /* Brand — overridden by wp_head inline style if colour changes */
  --tpp-blue:      #0A4FB3;
  --tpp-dark:      #083D8C;
  --tpp-red:       #D32F2F;
  --tpp-red-dark:  #B71C1C;
  --tpp-rgb:       10, 79, 179;
  --tpp-light:     #E8F0FB;
  --tpp-divider:   #C5D8F5;
  --tpp-muted:     #5A6478;
  --tpp-white:     #FFFFFF;
  --tpp-font:      'Merriweather', Georgia, 'Times New Roman', serif;
  --tpp-radius:    4px;
  --tpp-ease:      cubic-bezier(.4, 0, .2, 1);
  --tpp-shadow:    0 2px 14px rgba(10,79,179,.10), 0 1px 4px rgba(0,0,0,.05);
  --tpp-shadow-lg: 0 6px 32px rgba(10,79,179,.15), 0 2px 8px rgba(0,0,0,.07);

  /* Fluid type scale — clamp(min, preferred, max) */
  --tpp-fs-label:  clamp(11px, 1.8vw, 14px);
  --tpp-fs-sub:    clamp(9px,  1.3vw, 11px);
  --tpp-fs-panel:  clamp(10px, 1.5vw, 12px);
  --tpp-fs-speed:  clamp(10px, 1.4vw, 12px);
  --tpp-fs-time:   clamp(10px, 1.4vw, 12px);

  /* Fluid sizes */
  --tpp-btn-h:     clamp(44px, 5vw, 52px);
  --tpp-play-sz:   clamp(38px, 5vw, 48px);
  --tpp-spd-pad:   clamp(.3rem, .8vw, .45rem) clamp(.6rem, 1.5vw, 1rem);
  --tpp-panel-pad: clamp(1rem, 3vw, 1.5rem);
}

/* ── Universal box-model reset inside wrapper ────────────────── */
.tpp-vr-wrap,
.tpp-vr-wrap * {
  box-sizing:  border-box !important;
  font-family: var(--tpp-font) !important;
}

/* ── Wrapper ─────────────────────────────────────────────────── */
.tpp-vr-wrap {
  display:    block !important;
  width:      100% !important;
  max-width:  100% !important;
  margin:     0 0 clamp(1.2rem, 3vw, 1.75rem) 0 !important;
  padding:    0 !important;
  background: transparent !important;
  border:     none !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   TRIGGER BUTTON
   ═══════════════════════════════════════════════════════════════ */
.tpp-vr-wrap .tpp-vr-pill {
  display:         flex !important;
  align-items:     center !important;
  gap:             clamp(.6rem, 2vw, 1rem) !important;
  width:           100% !important;
  min-height:      var(--tpp-btn-h) !important;
  background:      var(--tpp-white) !important;
  border:          1.5px solid var(--tpp-blue) !important;
  border-radius:   var(--tpp-radius) !important;
  padding:         clamp(.5rem,1.5vw,.7rem) clamp(1rem,3vw,1.5rem) clamp(.5rem,1.5vw,.7rem) clamp(.75rem,2vw,1.1rem) !important;
  cursor:          pointer !important;
  box-shadow:      var(--tpp-shadow) !important;
  position:        relative !important;
  overflow:        hidden !important;
  text-align:      left !important;
  line-height:     1 !important;
  transition:      background .2s var(--tpp-ease),
                   box-shadow  .2s var(--tpp-ease) !important;
  /* Reset common theme button overrides */
  appearance:          none !important;
  -webkit-appearance:  none !important;
  outline:             none !important;
  text-transform:      none !important;
  letter-spacing:      normal !important;
  color:               inherit !important;
  vertical-align:      middle !important;
}

.tpp-vr-wrap .tpp-vr-pill:hover {
  background:  var(--tpp-light) !important;
  box-shadow:  var(--tpp-shadow-lg) !important;
}

/* Left accent bar */
.tpp-vr-wrap .tpp-vr-pill::after {
  content:          '' !important;
  position:         absolute !important;
  left:0; top:0; bottom:0 !important;
  width:            4px !important;
  background:       var(--tpp-blue) !important;
  transform:        scaleY(0) !important;
  transform-origin: center !important;
  transition:       transform .2s var(--tpp-ease) !important;
  border-radius:    0 2px 2px 0 !important;
}
.tpp-vr-wrap .tpp-vr-pill:hover::after,
.tpp-vr-wrap.panel-open .tpp-vr-pill::after {
  transform: scaleY(1) !important;
}

/* Panel open → pill bottom fuses into panel */
.tpp-vr-wrap.panel-open .tpp-vr-pill {
  border-bottom-color: var(--tpp-light) !important;
  border-radius:       var(--tpp-radius) var(--tpp-radius) 0 0 !important;
  background:          var(--tpp-light) !important;
  box-shadow:          none !important;
}

/* ── Play/pause disc ─────────────────────────────────────────── */
.tpp-vr-wrap .tpp-vr-pill-icon {
  width:           clamp(30px, 4.5vw, 36px) !important;
  height:          clamp(30px, 4.5vw, 36px) !important;
  min-width:       clamp(30px, 4.5vw, 36px) !important;
  background:      var(--tpp-red) !important;
  border-radius:   50% !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  flex-shrink:     0 !important;
  border:          none !important;
  padding:         0 !important;
  box-shadow:      none !important;
  transition:      background .18s var(--tpp-ease),
                   transform  .18s var(--tpp-ease) !important;
}
.tpp-vr-wrap .tpp-vr-pill:hover .tpp-vr-pill-icon,
.tpp-vr-wrap.panel-open .tpp-vr-pill .tpp-vr-pill-icon {
  background: var(--tpp-red-dark) !important;
  transform:  scale(1.05) !important;
}
.tpp-vr-wrap .tpp-vr-pill-icon svg { display: block !important; }

/* ── Text labels ─────────────────────────────────────────────── */
.tpp-vr-wrap .tpp-vr-pill-text {
  display:        flex !important;
  flex-direction: column !important;
  gap:            clamp(2px, .4vw, 4px) !important;
  flex:           1 !important;
  min-width:      0 !important;
}

.tpp-vr-wrap .tpp-vr-pill-label {
  font-size:      var(--tpp-fs-label) !important;
  font-weight:    700 !important;
  color:          var(--tpp-blue) !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  line-height:    1.2 !important;
  display:        block !important;
  white-space:    nowrap !important;
}

.tpp-vr-wrap .tpp-vr-pill-sub {
  font-size:   var(--tpp-fs-sub) !important;
  font-weight: 300 !important;
  font-style:  italic !important;
  color:       var(--tpp-muted) !important;
  line-height: 1.2 !important;
  display:     block !important;
}

/* ── Soundwave bars ──────────────────────────────────────────── */
.tpp-vr-wrap .tpp-vr-wave {
  display:     flex !important;
  align-items: center !important;
  gap:         clamp(2px, .4vw, 3.5px) !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
  padding:     0 !important;
}

.tpp-vr-wrap .tpp-vr-wave span {
  display:       block !important;
  width:         clamp(2px, .4vw, 3px) !important;
  background:    var(--tpp-blue) !important;
  border-radius: 2px !important;
  opacity:       .25 !important;
  transition:    opacity .2s !important;
  padding:       0 !important;
  margin:        0 !important;
}
.tpp-vr-wrap .tpp-vr-wave span:nth-child(1) { height: clamp( 5px, .9vw,  7px) !important; }
.tpp-vr-wrap .tpp-vr-wave span:nth-child(2) { height: clamp( 9px, 1.4vw, 12px) !important; }
.tpp-vr-wrap .tpp-vr-wave span:nth-child(3) { height: clamp(13px, 2vw,   17px) !important; }
.tpp-vr-wrap .tpp-vr-wave span:nth-child(4) { height: clamp( 9px, 1.4vw, 12px) !important; }
.tpp-vr-wrap .tpp-vr-wave span:nth-child(5) { height: clamp( 5px, .9vw,  7px) !important; }

.tpp-vr-wrap .tpp-vr-pill:hover .tpp-vr-wave span { opacity: .6 !important; }

/* Wave animation */
@keyframes tpp-bar {
  0%, 100% { transform: scaleY(1); }
  50%       { transform: scaleY(2.2); }
}
.tpp-vr-wrap.is-playing .tpp-vr-wave span                  { opacity: 1 !important; }
.tpp-vr-wrap.is-playing .tpp-vr-wave span:nth-child(1)     { animation: tpp-bar .5s ease-in-out infinite 0s    !important; }
.tpp-vr-wrap.is-playing .tpp-vr-wave span:nth-child(2)     { animation: tpp-bar .5s ease-in-out infinite .07s  !important; }
.tpp-vr-wrap.is-playing .tpp-vr-wave span:nth-child(3)     { animation: tpp-bar .5s ease-in-out infinite .14s  !important; }
.tpp-vr-wrap.is-playing .tpp-vr-wave span:nth-child(4)     { animation: tpp-bar .5s ease-in-out infinite .07s  !important; }
.tpp-vr-wrap.is-playing .tpp-vr-wave span:nth-child(5)     { animation: tpp-bar .5s ease-in-out infinite 0s    !important; }

/* ═══════════════════════════════════════════════════════════════
   AUDIO PANEL  (.tpp-vr-panel.is-open)
   ═══════════════════════════════════════════════════════════════ */
.tpp-vr-wrap .tpp-vr-panel {
  display:        none;
  flex-direction: column !important;
  gap:            clamp(.9rem, 2.5vw, 1.3rem) !important;
  width:          100% !important;
  max-width:      100% !important;
  background:     var(--tpp-white) !important;
  border:         1.5px solid var(--tpp-blue) !important;
  border-top:     none !important;
  border-radius:  0 0 var(--tpp-radius) var(--tpp-radius) !important;
  box-shadow:     var(--tpp-shadow-lg) !important;
  padding:        var(--tpp-panel-pad) !important;
  position:       relative !important;
  overflow:       hidden !important;
}

/* Blue gradient top rule */
.tpp-vr-wrap .tpp-vr-panel::before {
  content:    '' !important;
  position:   absolute !important;
  top:0; left:0; right:0 !important;
  height:     3px !important;
  background: linear-gradient(90deg, var(--tpp-blue) 0%, #4A9CF6 100%) !important;
}

.tpp-vr-wrap .tpp-vr-panel.is-open {
  display:   flex !important;
  animation: tpp-panel-in .25s var(--tpp-ease) both !important;
}

@keyframes tpp-panel-in {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Panel header ────────────────────────────────────────────── */
.tpp-vr-wrap .tpp-vr-panel-head {
  display:         flex !important;
  align-items:     center !important;
  justify-content: space-between !important;
}

.tpp-vr-wrap .tpp-vr-panel-title {
  display:     flex !important;
  align-items: center !important;
  gap:         clamp(.4rem, 1vw, .65rem) !important;
}

.tpp-vr-wrap .tpp-vr-panel-icon {
  width:           clamp(26px, 4vw, 32px) !important;
  height:          clamp(26px, 4vw, 32px) !important;
  min-width:       clamp(26px, 4vw, 32px) !important;
  background:      var(--tpp-light) !important;
  border-radius:   4px !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  flex-shrink:     0 !important;
  border:          none !important;
  padding:         0 !important;
  box-shadow:      none !important;
}

.tpp-vr-wrap .tpp-vr-panel-lbl {
  font-size:      clamp(9px, 1.3vw, 11px) !important;
  font-weight:    700 !important;
  color:          var(--tpp-blue) !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

/* ── Close button ────────────────────────────────────────────── */
.tpp-vr-wrap .tpp-vr-close {
  width:               clamp(28px, 4vw, 34px) !important;
  height:              clamp(28px, 4vw, 34px) !important;
  min-width:           clamp(28px, 4vw, 34px) !important;
  border:              1.5px solid var(--tpp-divider) !important;
  background:          var(--tpp-white) !important;
  border-radius:       4px !important;
  display:             flex !important;
  align-items:         center !important;
  justify-content:     center !important;
  cursor:              pointer !important;
  color:               var(--tpp-muted) !important;
  padding:             0 !important;
  box-shadow:          none !important;
  appearance:          none !important;
  -webkit-appearance:  none !important;
  outline:             none !important;
  transition:          background .15s, color .15s, border-color .15s !important;
  flex-shrink:         0 !important;
}
.tpp-vr-wrap .tpp-vr-close:hover {
  background:   var(--tpp-light) !important;
  color:        var(--tpp-blue) !important;
  border-color: var(--tpp-blue) !important;
}

/* ── Play + progress ─────────────────────────────────────────── */
.tpp-vr-wrap .tpp-vr-controls {
  display:     flex !important;
  align-items: center !important;
  gap:         clamp(.75rem, 2.5vw, 1.2rem) !important;
}

.tpp-vr-wrap .tpp-vr-btn-play {
  width:               var(--tpp-play-sz) !important;
  height:              var(--tpp-play-sz) !important;
  min-width:           var(--tpp-play-sz) !important;
  border-radius:       50% !important;
  background:          var(--tpp-red) !important;
  border:              none !important;
  cursor:              pointer !important;
  display:             flex !important;
  align-items:         center !important;
  justify-content:     center !important;
  flex-shrink:         0 !important;
  box-shadow:          0 3px 14px rgba(211,47,47,.35) !important;
  appearance:          none !important;
  -webkit-appearance:  none !important;
  outline:             none !important;
  padding:             0 !important;
  transition:          background .18s var(--tpp-ease),
                       transform  .15s var(--tpp-ease) !important;
}
.tpp-vr-wrap .tpp-vr-btn-play:hover  { background:var(--tpp-red-dark) !important; transform:scale(1.07) !important; }
.tpp-vr-wrap .tpp-vr-btn-play:active { transform:scale(.92) !important; }
.tpp-vr-wrap .tpp-vr-btn-play svg    { display:block !important; }

/* Progress column */
.tpp-vr-wrap .tpp-vr-time-col {
  flex:           1 !important;
  display:        flex !important;
  flex-direction: column !important;
  gap:            clamp(.35rem, 1vw, .55rem) !important;
  min-width:      0 !important;
}

/* Track */
.tpp-vr-wrap .tpp-vr-track {
  width:         100% !important;
  height:        5px !important;
  background:    var(--tpp-divider) !important;
  border-radius: 3px !important;
  cursor:        pointer !important;
  position:      relative !important;
  overflow:      visible !important;
  display:       block !important;
  box-sizing:    border-box !important;
}

/* Enlarged invisible touch/click target via ::before */
.tpp-vr-wrap .tpp-vr-track::before {
  content:  '' !important;
  position: absolute !important;
  top:      -10px !important;
  bottom:   -10px !important;
  left:     0 !important;
  right:    0 !important;
}

.tpp-vr-wrap .tpp-vr-fill {
  position:      absolute !important;
  top:           0 !important;
  left:          0 !important;
  height:        5px !important;
  width:         0 !important;
  background:    linear-gradient(90deg, var(--tpp-blue) 0%, #4A9CF6 100%) !important;
  border-radius: 3px !important;
  transition:    width .6s ease-out !important;
  display:       block !important;
}

/* Scrubber dot */
.tpp-vr-wrap .tpp-vr-fill::after {
  content:       '' !important;
  position:      absolute !important;
  right:         -7px !important;
  top:           50% !important;
  transform:     translateY(-50%) !important;
  width:         14px !important;
  height:        14px !important;
  background:    var(--tpp-white) !important;
  border:        2.5px solid var(--tpp-blue) !important;
  border-radius: 50% !important;
  box-shadow:    0 1px 6px rgba(10,79,179,.25) !important;
  transition:    transform .12s var(--tpp-ease) !important;
  z-index:       2 !important;
}
.tpp-vr-wrap .tpp-vr-track:hover .tpp-vr-fill::after {
  transform: translateY(-50%) scale(1.35) !important;
}

/* Time labels */
.tpp-vr-wrap .tpp-vr-times {
  display:         flex !important;
  justify-content: space-between !important;
  align-items:     center !important;
}

.tpp-vr-wrap .tpp-vr-cur,
.tpp-vr-wrap .tpp-vr-total {
  font-size:            var(--tpp-fs-time) !important;
  font-weight:          300 !important;
  color:                var(--tpp-muted) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing:       .03em !important;
}
.tpp-vr-wrap .tpp-vr-cur {
  color:       var(--tpp-blue) !important;
  font-weight: 700 !important;
}

/* ── Speed row ───────────────────────────────────────────────── */
.tpp-vr-wrap .tpp-vr-speed-row {
  display:     flex !important;
  align-items: center !important;
  flex-wrap:   wrap !important;
  gap:         clamp(.35rem, 1vw, .55rem) !important;
  border-top:  1.5px solid var(--tpp-divider) !important;
  padding-top: clamp(.75rem, 2vw, 1rem) !important;
}

.tpp-vr-wrap .tpp-vr-speed-lbl {
  font-size:      var(--tpp-fs-speed) !important;
  font-weight:    700 !important;
  color:          var(--tpp-muted) !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  flex-shrink:    0 !important;
  margin-right:   .2rem !important;
}

.tpp-vr-wrap .tpp-vr-spd {
  font-size:           var(--tpp-fs-speed) !important;
  font-weight:         400 !important;
  color:               var(--tpp-muted) !important;
  border:              1.5px solid var(--tpp-divider) !important;
  background:          var(--tpp-white) !important;
  border-radius:       3px !important;
  padding:             var(--tpp-spd-pad) !important;
  cursor:              pointer !important;
  min-width:           clamp(38px, 6vw, 52px) !important;
  text-align:          center !important;
  line-height:         1.3 !important;
  transition:          all .15s var(--tpp-ease) !important;
  appearance:          none !important;
  -webkit-appearance:  none !important;
  outline:             none !important;
  box-shadow:          none !important;
  white-space:         nowrap !important;
}
.tpp-vr-wrap .tpp-vr-spd:hover {
  border-color: var(--tpp-blue) !important;
  color:        var(--tpp-blue) !important;
  background:   var(--tpp-light) !important;
}
.tpp-vr-wrap .tpp-vr-spd.active {
  background:   var(--tpp-blue) !important;
  border-color: var(--tpp-blue) !important;
  color:        var(--tpp-white) !important;
  font-weight:  700 !important;
  box-shadow:   0 2px 8px rgba(10,79,179,.22) !important;
}

/* ── Notice — live progress / paused / finished / error ─────── */
.tpp-vr-wrap .tpp-vr-notice {
  font-size:      clamp(10px, 1.4vw, 12px) !important;
  font-weight:    400 !important;
  font-style:     italic !important;
  line-height:    1.55 !important;
  border-radius:  4px !important;
  padding:        .45rem .9rem !important;
  margin:         0 !important;
  transition:     background .3s, color .3s, border-color .3s !important;
  border:         1px solid #FCD34D !important;
  color:          #92400E !important;
  background:     #FFF7ED !important;
}

/* ═══════════════════════════════════════════════════════════════
   BREAKPOINTS
   (clamp() handles most scaling; these handle layout shifts)
   ═══════════════════════════════════════════════════════════════ */

/* Tablet — 481px to 768px */
@media (min-width: 481px) and (max-width: 768px) {
  .tpp-vr-wrap {
    --tpp-play-sz:   44px;
    --tpp-btn-h:     50px;
    --tpp-panel-pad: 1.1rem;
  }
  /* Speed row: allow wrapping on tablet so buttons don't overflow */
  .tpp-vr-wrap .tpp-vr-speed-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .tpp-vr-wrap .tpp-vr-spd {
    min-width: 46px !important;
    padding: .3rem .65rem !important;
  }
}

/* Mobile — 480px and below */
@media (max-width: 480px) {
  .tpp-vr-wrap {
    --tpp-btn-h:     48px;
    --tpp-play-sz:   42px;
    --tpp-spd-pad:   .3rem .5rem;
    --tpp-panel-pad: .9rem;
  }

  /* Pill: keep label on one line, shrink sub-label */
  .tpp-vr-wrap .tpp-vr-pill {
    padding: .5rem .85rem .5rem .75rem !important;
    gap: 8px !important;
  }
  .tpp-vr-wrap .tpp-vr-pill-label {
    font-size: 11px !important;
    white-space: nowrap !important;
  }
  .tpp-vr-wrap .tpp-vr-pill-sub {
    font-size: 9px !important;
  }

  /* Panel controls: more breathing room for touch */
  .tpp-vr-wrap .tpp-vr-controls {
    gap: 10px !important;
  }

  /* Speed row: wrap to 2 rows on mobile */
  .tpp-vr-wrap .tpp-vr-speed-row {
    flex-wrap: wrap !important;
    gap: 5px !important;
    row-gap: 6px !important;
  }
  .tpp-vr-wrap .tpp-vr-spd {
    min-width: 44px !important;
    font-size: 11px !important;
    padding: .28rem .55rem !important;
  }

  /* Status badge: shorten text to save space */
  .tpp-vr-wrap .tpp-vr-status {
    font-size: 9px !important;
    padding: .15rem .4rem !important;
  }

  /* Highlight: slightly lighter on mobile for readability on small screens */
  .tpp-hl-active {
    background: rgba(var(--tpp-rgb, 10, 79, 179), 0.07) !important;
  }

  @media (max-width: 360px) {
    .tpp-vr-wrap .tpp-vr-pill-sub { display: none !important; }
    .tpp-vr-wrap .tpp-vr-wave     { display: none !important; }
    .tpp-vr-wrap .tpp-vr-status   { display: none !important; }
  }
}

/* Large desktop — 1200px+ */
@media (min-width: 1200px) {
  .tpp-vr-wrap {
    --tpp-btn-h:    54px;
    --tpp-play-sz:  50px;
    --tpp-fs-label: 14px;
    --tpp-fs-sub:   11px;
    --tpp-fs-panel: 12px;
    --tpp-fs-speed: 12px;
    --tpp-fs-time:  12px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   STATUS BADGE on the pill trigger button
   ═══════════════════════════════════════════════════════════════ */

/* Badge pill */
.tpp-vr-wrap .tpp-vr-status {
  display:        inline-flex !important;
  align-items:    center !important;
  font-size:      clamp(9px, 1.2vw, 11px) !important;
  font-weight:    700 !important;
  font-style:     normal !important;
  letter-spacing: .06em !important;
  white-space:    nowrap !important;
  border-radius:  3px !important;
  padding:        .18rem .55rem !important;
  margin-left:    .1rem !important;
  transition:     background .2s, color .2s !important;
  /* default — hidden via JS */
}

/* ● Playing  — blue */
.tpp-vr-wrap.status-playing .tpp-vr-status {
  background:  var(--tpp-blue) !important;
  color:       var(--tpp-white) !important;
  border:      none !important;
  box-shadow:  0 1px 6px rgba(10,79,179,.30) !important;
}

/* ⏸ Paused — outlined amber */
.tpp-vr-wrap.status-paused .tpp-vr-status {
  background:  #FFF7ED !important;
  color:       #92400E !important;
  border:      1.5px solid #FCD34D !important;
  box-shadow:  none !important;
}

/* ✓ Finished — green */
.tpp-vr-wrap.status-finished .tpp-vr-status {
  background:  #ECFDF5 !important;
  color:       #065F46 !important;
  border:      1.5px solid #6EE7B7 !important;
  box-shadow:  none !important;
}

/* Playing dot pulse animation */
@keyframes tpp-dot-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}
.tpp-vr-wrap.status-playing .tpp-vr-status {
  animation: tpp-dot-pulse 1.4s ease-in-out infinite !important;
}

/* ── When playing: pill border turns blue, sub-label changes colour */
.tpp-vr-wrap.status-playing .tpp-vr-pill {
  border-color: var(--tpp-blue) !important;
  background:   var(--tpp-light) !important;
}

.tpp-vr-wrap.status-playing .tpp-vr-pill-sub {
  color: var(--tpp-blue) !important;
  font-style: normal !important;
}

.tpp-vr-wrap.status-paused .tpp-vr-pill-sub {
  color: #92400E !important;
}

.tpp-vr-wrap.status-finished .tpp-vr-pill-sub {
  color: #065F46 !important;
}

/* ── Progress bar — disable fill transition while dragging ─────── */
.tpp-vr-wrap.is-dragging .tpp-vr-fill {
  transition: none !important;
}

/* ── Scrubber larger touch target on mobile ────────────────────── */
@media (max-width: 480px) {
  .tpp-vr-wrap .tpp-vr-track {
    height: 6px !important;
  }
  .tpp-vr-wrap .tpp-vr-fill {
    height: 6px !important;
  }
  .tpp-vr-wrap .tpp-vr-track::before {
    top:    -12px !important;
    bottom: -12px !important;
  }
  .tpp-vr-wrap .tpp-vr-fill::after {
    width:  16px !important;
    height: 16px !important;
    right:  -8px !important;
  }
  @media (max-width: 380px) {
    .tpp-vr-wrap .tpp-vr-wave { display: none !important; }
  }
}

/* ═══════════════════════════════════════════════════════════════
   SENTENCE HIGHLIGHT  (TPP Voice Reader v2.1)
   Only animates background + box-shadow — GPU-composited, zero layout reflow.
   ═══════════════════════════════════════════════════════════════ */

.tpp-hl-active {
  background:    rgba(var(--tpp-rgb, 10, 79, 179), 0.09) !important;
  box-shadow:    inset 3px 0 0 var(--tpp-blue, #0A4FB3) !important;
  border-radius: 2px !important;
  padding-left:  10px !important;
  margin-left:   -10px !important;
  transition:    background 0.25s ease-out,
                 box-shadow  0.25s ease-out !important;
  will-change:   background, box-shadow !important;
}

/* Smooth fade-out when highlight leaves a paragraph */
p, h1, h2, h3, h4, h5, h6, li, blockquote {
  transition: background 0.35s ease-out, box-shadow 0.35s ease-out;
}