/* tts-reader.css
   自動生成: 読み上げ機能用の共通スタイル。全HTMLから共通で読み込まれます。 */
:root { --tts-bar-h: 44px; }
.tts-sentence { transition: background-color 0.15s ease, box-shadow 0.15s ease; }
.tts-sentence.tts-active {
  background-color: rgba(255, 224, 102, 0.65);
  box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.5);
  border-radius: 3px;
}
#tts-controls {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  background: rgba(30, 30, 30, 0.92);
  color: #fff;
  padding: 8px 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: sans-serif;
  font-size: 13px;
  z-index: 999999;
  writing-mode: horizontal-tb;
}
/* このサイト固有の縦書きページャー(#content-wrapper)がある場合、
   下部の#page-bar(44px)は元々考慮済みだが、上部に追加した本バーの分は
   考慮されていないため、本文エリアの上端と高さをバーの実測高さ
   (--tts-bar-h, JS側で動的に設定)ぶんだけ調整する。
   #content-wrapper が存在しないページではこのルールは単に無視される。 */
#content-wrapper {
  top: var(--tts-bar-h) !important;
  height: calc(100vh - 44px - var(--tts-bar-h)) !important;
}
@supports (height: 100dvh) {
  #content-wrapper {
    height: calc(100dvh - 44px - var(--tts-bar-h) - env(safe-area-inset-bottom, 0px)) !important;
  }
}
/* 左右のページ送りボタンも、縮んだ本文エリアの縦方向中央に合わせ直す */
.nav-btn {
  top: calc(50vh - 22px + var(--tts-bar-h) / 2) !important;
}
#tts-controls button {
  background: #444;
  color: #fff;
  border: 1px solid #666;
  border-radius: 4px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
}
#tts-controls button:hover { background: #555; }
#tts-controls button:disabled { opacity: 0.4; cursor: default; }
#tts-controls select, #tts-controls input[type=range] {
  font-size: 12px;
}
#tts-controls label { display: flex; align-items: center; gap: 4px; white-space: nowrap; }