/* 音声プレーヤーの追従バー(画面下に常駐)。audio-player.js とセットで使う */

.miniplayer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: rgba(255, 255, 255, .97);
  border-top: 1px solid #e2e8f0;
  box-shadow: 0 -3px 14px rgba(15, 23, 42, .10);
  padding: .45rem .7rem calc(.45rem + env(safe-area-inset-bottom, 0px));
  transform: translateY(115%);
  transition: transform .18s ease-out;
  z-index: 50;
}
.miniplayer.show { transform: translateY(0); }

/* 再生位置バー(指でドラッグできるよう、当たり判定を広く取る) */
.miniplayer .mp-seek {
  padding: .5rem 0 .55rem;      /* 見た目より広い当たり判定 */
  margin: -.35rem 0 0;
  cursor: pointer;
  touch-action: none;            /* ドラッグ中にページが動かないように */
}
.miniplayer .mp-progress {
  position: relative;
  height: 5px; background: #e9edf3; border-radius: 3px;
}
.miniplayer .mp-bar {
  height: 100%; width: 0; background: var(--accent, #d61c59);
  border-radius: 3px; transition: width .15s linear;
}
.miniplayer .mp-knob {
  position: absolute; top: 50%; left: 0;
  width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px;
  background: #fff; border: 3px solid var(--accent, #d61c59); border-radius: 50%;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .3);
  transition: left .15s linear, transform .1s;
}
.miniplayer .mp-seek.dragging .mp-bar,
.miniplayer .mp-seek.dragging .mp-knob { transition: none; }
.miniplayer .mp-seek.dragging .mp-knob { transform: scale(1.25); }

.miniplayer .mp-row {
  display: flex; align-items: center; gap: .4rem;
  max-width: 760px; margin: 0 auto;
}

.miniplayer .mp-btn {
  flex: none;
  min-width: 3.1rem; height: 2.5rem;
  border: 1px solid #cbd5e1; border-radius: 10px; background: #fff;
  font-size: .95rem; font-weight: 700; color: #334155; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: .05rem;
  line-height: 1;
}
.miniplayer .mp-btn small { font-size: .62rem; font-weight: 700; }
.miniplayer .mp-btn.pressed { background: var(--accent, #d61c59); color: #fff; border-color: var(--accent, #d61c59); }
.miniplayer .mp-play {
  min-width: 4.2rem;
  flex-direction: column; gap: .05rem;
  background: var(--accent, #d61c59); color: #fff; border-color: var(--accent, #d61c59);
  font-size: .95rem;
}
.miniplayer .mp-play .mp-label { font-size: .58rem; font-weight: 700; opacity: .95; }
/* 再生中は色を変えて「今止められる」と分かるように */
.miniplayer .mp-play.playing { background: #334155; border-color: #334155; }

/* 速さ切替(コンパクト) */
.miniplayer .mp-speed { display: flex; gap: .2rem; margin-left: auto; }
.miniplayer .mp-speed button {
  min-width: 2.4rem; height: 2.5rem;
  border: 1px solid #cbd5e1; border-radius: 8px; background: #fff;
  font-size: .78rem; font-weight: 700; color: #475569; cursor: pointer;
}
.miniplayer .mp-speed button.on {
  background: var(--accent, #d61c59); color: #fff; border-color: var(--accent, #d61c59);
}

.miniplayer .mp-time {
  flex: none; font-size: .72rem; color: #64748b; min-width: 4.6rem; text-align: right;
  font-variant-numeric: tabular-nums;
}

/* 追従バーが出ているとき、最下部の内容が隠れないように余白を足す */
body.has-mini { padding-bottom: 5.2rem; }

/* 画面が狭いときは時間表示を省く */
@media (max-width: 380px) {
  .miniplayer .mp-time { display: none; }
  .miniplayer .mp-speed { margin-left: .2rem; }
}


/* 英文タップで頭出し(data-t がある場合) */
.seekable { cursor: pointer; border-radius: 6px; padding-left: .35rem; margin-left: -.35rem;
            border-left: 3px solid transparent; transition: background .12s, border-color .12s; }
.seekable:hover { background: #f8fafc; }
.seekable.playing-now { background: #fff7fa; border-left-color: var(--accent, #d61c59); }
body.has-timing .ctrl::after {
  content: "英文をタップすると、そこから聞けます";
  display: block; width: 100%; font-size: .78rem; color: #64748b; margin-top: .3rem;
}