/* Read Aloud — floating "Listen to this article" player + read-along highlight.
 * Themed to the AstroAsk palette; theme-aware via the shared CSS variables. */
.ra-bar {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px 7px 8px;
  background: var(--panel, #fff);
  border: 1px solid var(--edge, #e6dcc6);
  border-radius: 50px;
  box-shadow: 0 12px 34px -12px rgba(60, 40, 20, 0.45);
  font-family: 'Inter', system-ui, sans-serif;
  max-width: calc(100vw - 36px);
}
.ra-bar .ra-toggle {
  flex: none;
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: var(--maroon, #7a241a); color: #fff;
  font-size: 17px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background .15s, transform .1s;
}
.ra-bar .ra-toggle:hover { background: var(--maroon-d, #5f1a12); }
.ra-bar .ra-toggle:active { transform: scale(.94); }
.ra-bar .ra-status {
  font-size: .9rem; font-weight: 600; color: var(--ink2, #4a4a55);
  white-space: nowrap; cursor: pointer; padding-right: 4px;
}
.ra-bar .ra-stop {
  flex: none;
  width: 30px; height: 30px;
  border: 1px solid var(--edge, #e6dcc6); border-radius: 50%;
  background: var(--field, #f6eede); color: var(--maroon, #7a241a);
  font-size: 17px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.ra-bar .ra-stop:hover { background: var(--maroon, #7a241a); color: #fff; border-color: var(--maroon, #7a241a); }

/* a soft pulse on the toggle while actively reading */
.ra-bar.ra-active .ra-toggle { animation: ra-pulse 1.6s ease-in-out infinite; }
@keyframes ra-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(122, 36, 26, 0.35); }
  50% { box-shadow: 0 0 0 7px rgba(122, 36, 26, 0); }
}

/* the paragraph currently being read */
.ra-reading {
  background: linear-gradient(transparent 8%, rgba(224, 150, 60, 0.22) 0, rgba(224, 150, 60, 0.22) 92%, transparent 0);
  border-radius: 4px;
  box-shadow: -6px 0 0 rgba(224, 150, 60, 0.5);
  transition: background .2s ease;
}

@media (max-width: 520px) {
  .ra-bar { right: 12px; bottom: 12px; }
  .ra-bar .ra-status { display: none; }  /* icon-only on small phones */
}
@media (prefers-reduced-motion: reduce) {
  .ra-bar.ra-active .ra-toggle { animation: none; }
  .ra-reading { transition: none; }
}
@media print { .ra-bar { display: none; } }