/* Аудиокнига — компактный плеер в стиле мессенджера (просто и понятно). */
.ba{
  position: sticky; top: 74px; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; margin: -6px 0 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(34,28,20,.94), rgba(24,20,15,.94));
  border: 1px solid rgba(201,163,78,.30);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
}
.ba-play{
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: #1a1206; border: none;
  background: radial-gradient(circle at 35% 30%, #f0d79a, #c9a34e 70%);
  box-shadow: 0 4px 14px rgba(201,163,78,.4);
  transition: transform .12s, box-shadow .2s;
}
.ba-play:hover{ transform: scale(1.05); }
.ba-play:active{ transform: scale(.96); }
.ba-play.is-loading{ opacity: .6; pointer-events: none; }
.ba-ic{ display: block; margin-left: 1px; }
.ba-ic-pause{ margin-left: 0; }

.ba-body{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ba-track{ position: relative; height: 16px; display: flex; align-items: center; }
.ba-track::before{
  content: ''; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  height: 4px; border-radius: 4px; background: rgba(201,163,78,.20);
}
.ba-fill{
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  height: 4px; width: 0; border-radius: 4px; pointer-events: none;
  background: linear-gradient(90deg, #c9a34e, #f0d79a);
}
.ba-seek{
  position: absolute; inset: 0; width: 100%; margin: 0; height: 16px;
  -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
}
.ba-seek::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: #f6e6bd; border: 2px solid #c9a34e; box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.ba-seek::-moz-range-thumb{
  width: 14px; height: 14px; border-radius: 50%;
  background: #f6e6bd; border: 2px solid #c9a34e; box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.ba-meta{ display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 12px; color: #b6a67f; }
.ba-label{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ba-time{ flex: none; font-variant-numeric: tabular-nums; letter-spacing: .02em; }

.ba-rate{
  flex: none; min-width: 40px; height: 32px; padding: 0 8px; border-radius: 16px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: #e8dcc0; font-variant-numeric: tabular-nums;
  background: rgba(201,163,78,.12); border: 1px solid rgba(201,163,78,.30);
  transition: background .2s;
}
.ba-rate:hover{ background: rgba(201,163,78,.22); }

.ba-voices{ flex: none; display: flex; gap: 4px; padding: 3px; border-radius: 18px;
  background: rgba(0,0,0,.25); }
.ba-voice{
  width: 30px; height: 28px; border-radius: 15px; cursor: pointer; font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  color: #b6a67f; background: transparent; border: none; transition: background .2s, color .2s;
}
.ba-voice.is-on{ color: #1a1206; background: linear-gradient(180deg,#f0d79a,#c9a34e); font-weight: 700; }

.ba-exit, .ba-expand{
  flex: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #d8c69a; background: rgba(0,0,0,.28); border: 1px solid rgba(201,163,78,.30);
  transition: background .2s, color .2s;
}
.ba-exit:hover, .ba-expand:hover{ background: rgba(201,163,78,.20); color: #fff; }
body.book-focus .ba-expand{ display: none; }

/* ===== Режим чтения: только текст и плеер, остальное скрыто ===== */
body.book-focus{ overflow: hidden; }
body.book-focus .site-header,
body.book-focus footer.site-shell,
body.book-focus #scroll-nav,
body.book-focus #floating-helper-container,
body.book-focus #soyuznik-panel,
body.book-focus .tm-fab{ display: none !important; }

body.book-focus .book-reader{
  position: fixed; inset: 0; z-index: 50;
  max-width: none; margin: 0; border: none; border-radius: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: max(3.5vh, 1.5rem) clamp(1rem, 8vw, 6rem) 132px;
  background: radial-gradient(120% 80% at 50% 0%, #15100c, #0c0a10 72%) !important;
  /* backdrop-filter делает элемент точкой отсчёта для fixed — снимаем,
     иначе плеер внутри читалки «уплывает» вместе с текстом. */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.book-focus .book-reader > *{ max-width: 40rem; margin-left: auto; margin-right: auto; }

body.book-focus .ba{
  position: fixed; left: 0; right: 0; bottom: 0; top: auto;
  z-index: 60; margin: 0; border-radius: 0; max-width: none;
  border-left: none; border-right: none; border-bottom: none;
  padding: 12px clamp(12px, 5vw, 40px);
  box-shadow: 0 -10px 30px rgba(0,0,0,.5);
}
@media (max-width: 640px){
  body.book-focus .book-reader{ padding: 1rem 1.1rem 168px; }
}

/* Подсветка текущего фрагмента при чтении вслух */
.book-reader .ba-reading{
  background: linear-gradient(90deg, rgba(201,163,78,.16), rgba(201,163,78,.05));
  box-shadow: -12px 0 0 rgba(201,163,78,.16), inset 3px 0 0 #c9a34e;
  border-radius: 4px; transition: background .3s;
}

@media (max-width: 640px){
  .ba{ flex-wrap: wrap; border-radius: 20px; padding: 10px; gap: 10px; }
  .ba-body{ order: 3; flex-basis: 100%; }
  .ba-label{ display: none; }
}
@media (prefers-reduced-motion: reduce){
  .ba-reading{ transition: none; }
}