/* =====================================================================
   Listen / narration — floating launcher + read-along highlight
   ===================================================================== */

.narrator-launch{
  position:fixed;
  right:20px; bottom:20px;
  z-index:9990;
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 10px 7px 8px;
  background:linear-gradient(160deg,#fbf6ea,#f3e8cf);
  border:1px solid rgba(176,140,47,.55);
  border-radius:999px;
  box-shadow:0 8px 22px rgba(31,40,56,.2), 0 2px 6px rgba(31,40,56,.12);
  font-family:"Calibri","Segoe UI",Arial,sans-serif;
}
.narrator-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; flex:0 0 auto;
  border:none; border-radius:50%; cursor:pointer;
  background:linear-gradient(180deg,#8f5a22,#5f3a14); color:#fbf3e3;
  transition:filter .15s ease;
}
.narrator-btn:hover{ filter:brightness(1.08); }
.narrator-btn:focus-visible{ outline:2px solid #1f3556; outline-offset:2px; }
.narrator-play{ width:36px; height:36px; }
.narrator-label{
  font-size:13px; font-weight:700; letter-spacing:.3px; color:#5f4a1d;
  padding-right:4px; min-width:54px; text-align:center;
}
.narrator-stop{
  width:30px; height:30px; display:none;
  background:#e9e2d2; color:#7a3326;
}
.narrator-launch.is-active .narrator-stop{ display:inline-flex; }
.narrator-launch.is-active{ box-shadow:0 8px 26px rgba(143,90,34,.32), 0 2px 6px rgba(31,40,56,.14); }

/* gentle "speaking" pulse on the play button while playing */
.narrator-launch.is-active:not(.is-paused) .narrator-play{
  box-shadow:0 0 0 0 rgba(143,90,34,.5);
  animation:narrator-pulse 1.8s ease-out infinite;
}
@keyframes narrator-pulse{
  0%{ box-shadow:0 0 0 0 rgba(143,90,34,.45); }
  70%{ box-shadow:0 0 0 9px rgba(143,90,34,0); }
  100%{ box-shadow:0 0 0 0 rgba(143,90,34,0); }
}

/* read-along highlight on the paragraph currently being spoken */
.narrating{
  background:linear-gradient(90deg, rgba(176,140,47,.18), rgba(176,140,47,.07));
  box-shadow:-10px 0 0 rgba(176,140,47,.18), inset 3px 0 0 #b08c2f;
  border-radius:3px;
  transition:background .2s ease;
}

/* gear button + voice/speed settings popover */
.narrator-gear{ width:30px; height:30px; background:#e9e2d2; color:#6b531f; }
.narrator-gear:hover{ filter:brightness(0.97); }
.narrator-settings{
  position:absolute; right:0; bottom:calc(100% + 10px);
  width:248px; max-width:78vw; padding:12px 13px;
  background:linear-gradient(160deg,#fbf6ea,#f3e8cf);
  border:1px solid rgba(176,140,47,.55); border-radius:14px;
  box-shadow:0 12px 30px rgba(31,40,56,.24), 0 2px 6px rgba(31,40,56,.12);
  color:#5f4a1d;
}
.narrator-settings[hidden]{ display:none; }
.narrator-set-row{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; }
.narrator-voice-row{ flex-direction:column; align-items:stretch; gap:5px; margin-bottom:11px; }
.narrator-voice{
  width:100%; padding:6px 7px; border:1px solid rgba(176,140,47,.5);
  border-radius:8px; background:#fffdf7; color:#3a2f12;
  font-family:inherit; font-size:12.5px; font-weight:600;
}
.narrator-speed-row{ justify-content:space-between; }
.narrator-speed-btns{ display:flex; gap:5px; }
.narrator-speed-btn{
  border:1px solid rgba(176,140,47,.5); background:#fffdf7; color:#6b531f;
  border-radius:7px; padding:3px 8px; font-family:inherit; font-size:12px;
  font-weight:700; cursor:pointer; transition:background .12s ease, color .12s ease;
}
.narrator-speed-btn:hover{ background:#f6efdc; }
.narrator-speed-btn.is-active{
  background:linear-gradient(180deg,#8f5a22,#5f3a14); color:#fbf3e3; border-color:#5f3a14;
}
.narrator-gear:focus-visible, .narrator-voice:focus-visible, .narrator-speed-btn:focus-visible{
  outline:2px solid #1f3556; outline-offset:2px;
}

/* skip-back / skip-forward a sentence (shown only while active) */
.narrator-skip{ width:28px; height:28px; display:none; background:#e9e2d2; color:#6b531f; }
.narrator-skip:hover{ filter:brightness(0.97); }
.narrator-launch.is-active .narrator-skip{ display:inline-flex; }

/* progress bar, floating just under the pill */
.narrator-progress{
  position:absolute; left:16px; right:16px; bottom:-7px; height:3px;
  background:rgba(95,58,20,.18); border-radius:999px; overflow:hidden;
  opacity:0; transition:opacity .2s ease; pointer-events:none;
}
.narrator-launch.is-active .narrator-progress{ opacity:1; }
.narrator-progress-bar{ height:100%; width:0; background:#8f5a22; border-radius:999px; transition:width .25s ease; }

/* resume chip — appears above the pill when idle with a saved position */
.narrator-resume{
  position:absolute; right:0; bottom:calc(100% + 9px);
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 11px; border:1px solid rgba(176,140,47,.55); border-radius:999px;
  background:linear-gradient(160deg,#fbf6ea,#f3e8cf); color:#5f4a1d;
  font-family:"Calibri","Segoe UI",Arial,sans-serif; font-size:12.5px; font-weight:700;
  cursor:pointer; box-shadow:0 6px 16px rgba(31,40,56,.18); white-space:nowrap;
}
.narrator-resume:hover{ filter:brightness(1.02); }
.narrator-resume[hidden]{ display:none; }

/* voice preview button inside the settings popover */
.narrator-voice-preview{
  margin:-5px 0 11px; align-self:flex-start;
  border:1px solid rgba(176,140,47,.5); background:#fffdf7; color:#6b531f;
  border-radius:7px; padding:4px 10px; font-family:inherit; font-size:12px;
  font-weight:700; cursor:pointer; transition:background .12s ease;
}
.narrator-voice-preview:hover{ background:#f6efdc; }
.narrator-skip:focus-visible, .narrator-resume:focus-visible, .narrator-voice-preview:focus-visible{
  outline:2px solid #1f3556; outline-offset:2px;
}

@media (max-width:560px){
  .narrator-launch{ right:12px; bottom:12px; }
  .narrator-label{ min-width:0; }
}

/* On the Honest Prayer hub the fixed mobile tab bar owns the bottom edge,
   so lift the listen pill above it. The tab bar is hidden ≥880px, where the
   pill returns to its normal corner. */
.narrator-launch.is-prayer{ bottom:calc(5rem + env(safe-area-inset-bottom)); right:14px; }
@media (min-width:880px){ .narrator-launch.is-prayer{ bottom:20px; right:20px; } }

@media print{ .narrator-launch{ display:none; } }