#fullscreenToggle {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  padding: 5px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
  border-radius: 10px; /* 角丸に */
  overflow: hidden;
}

.mobile #fullscreenToggle {
  width: 50px;
  height: 50px;
}

body.fullscreen-enabled #fullscreenToggle {
  display: block;
}

#fullscreenToggle .icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
}

.mobile #fullscreenToggle .icon {
  top: 10px;
  right: 10px;
}

#fullscreenToggle .icon.on {
  display: none;
}

#fullscreenToggle .icon.off {
  display: block;
}

#fullscreenToggle.enabled .icon.on {
  display: block;
}

#fullscreenToggle.enabled .icon.off {
  display: none;
}

#autorotateToggle {
  display: block;
  position: fixed !important;
  top: 8px !important;
  right: 8px !important;
  width: 40px !important;
  height: 40px !important;
  padding: 5px !important;
  z-index: 14005 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* サイドバー（.scenes）の背景と合わせる（半透明） */
  background: rgba(20,24,30,0.48) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border-radius: 10px !important;
}

.mobile #autorotateToggle {
  width: 50px;
  height: 50px;
}

/* フルスクリーンボタンが有効な場合は被らないよう左にずらす（デスクトップ） */
body.fullscreen-enabled #autorotateToggle {
  right: 48px !important;
}

/* フルスクリーンかつモバイル時の微調整 */
body.fullscreen-enabled.mobile #autorotateToggle {
  right: 58px !important;
  top: 10px !important;
}

#autorotateToggle .icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
}

.mobile #autorotateToggle .icon {
  top: 10px;
  right: 10px;
}

#autorotateToggle .icon.on {
  display: none;
}

#autorotateToggle .icon.off {
  display: block;
}

#autorotateToggle.enabled .icon.on {
  display: block;
}

#autorotateToggle.enabled .icon.off {
  display: none;
}

#sceneListToggle {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  padding: 5px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
  border-radius: 10px; /* 角丸に */
  overflow: hidden;
}

.mobile #sceneListToggle {
  width: 50px;
  height: 50px;
}

#sceneListToggle .text {
  position: absolute;
  top: 5px;
  left: 15px;
  width: 100%;
  line-height: 30px;
}

#sceneListToggle .icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
}

.mobile #sceneListToggle .icon {
  top: 10px;
  right: 10px;
}

#sceneListToggle .icon.on {
  display: none;
}

#sceneListToggle .icon.off {
  display: block;
}

#sceneListToggle.enabled .icon.on {
  display: block;
}

#sceneListToggle.enabled .icon.off {
  display: none;
}

#sceneList {
  position: absolute;
  top: calc(56px + var(--sidebar-top-offset, 0px)); /* タイトルバー高さ + 上余白 */
  left: -220px;
  width: var(--sidebar-width);
  max-height: calc(100% - 56px);
  overflow: visible; /* 親で丸めるので内部スクロールは .scenes に任せる */
  margin-left: 0;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  /* shadow-lg (強) → shadow-md (控えめ) に調整 */
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  -webkit-transition: margin-left 0.5s ease-in-out, top 220ms ease;
  transition: margin-left 0.5s ease-in-out, top 220ms ease;
  background: transparent; /* 背景は内部 .scenes で担う */
  overflow: hidden; /* 角丸をきれいに見せる */
}

.mobile #sceneList {
  top: calc(66px + var(--sidebar-top-offset, 0px)); /* モバイルタイトルバー + 上余白 */
  padding-top: 0; /* 余分な padding を無効化 */
  max-height: calc(100% - 66px);
}

/* 修正: モバイル専用の表示/非表示ルール（他の !important を上書きするため優先度を上げる） */
/* モバイル: 左オフセットを含めてコンテナを完全に画面外に移動する（スリバーが見えないようにする）。
   表示時は左右の余白を保持する。内部 .scenes の max-height はボトムオフセットを考慮して調整する。 */
.mobile #sceneList {
  /* 隠す: 左オフセットを含めて完全に画面外へ移動する（端の隙間が見えないようにする） */
  left: calc(-100% - var(--sidebar-left-offset)) !important;
  right: auto !important;
  transform: none !important;
  -webkit-transform: none !important;
  transition: left 320ms ease !important; /* モバイルでは left ベースのスライドを使う */
  z-index: 14000 !important;               /* トグルの背後、pano の上に配置 */
  /* 幅は左右の安全余白を考慮する */
  width: calc(100% - var(--sidebar-left-offset) - var(--sidebar-right-offset)) !important;
  box-sizing: border-box !important;
  height: 100%;
}

/* 有効時はモバイルパネルを表示領域に収め左右の余白を維持する */
.mobile #sceneList.enabled {
  left: var(--sidebar-left-offset) !important;
  right: var(--sidebar-right-offset) !important;
  transform: none !important;
  -webkit-transform: none !important;
  z-index: 14025 !important; /* 他の固定コントロールより前面に出す */
  width: calc(100% - var(--sidebar-left-offset) - var(--sidebar-right-offset)) !important;
}

/* 小画面で開いたときに内部 .scenes が前面に出て、下部オフセットの上に収まるようにする */
.mobile #sceneList.enabled .scenes {
  z-index: 14030 !important;
  /* タイトルバー高さ（66px）と下部オフセットを考慮して縦スクロール領域を確保する */
  max-height: calc(100vh - 66px - var(--sidebar-bottom-offset) - var(--sidebar-top-offset, 0px)) !important;
}

/* フォールバック／非表示時の内部の高さ制限（閉じているときにオーバーフローが出ないようにする） */
.mobile #sceneList .scenes {
  max-height: calc(100vh - 66px - var(--sidebar-bottom-offset));
  box-sizing: border-box;
  padding-left: env(safe-area-inset-left, 12px);
  padding-right: env(safe-area-inset-right, 12px);
}

/* 小画面向け調整: 内部の幅がインセットコンテナを利用するようにする */
@media (max-width: 520px) {
  #sceneList { width: calc(100% - var(--sidebar-left-offset) - var(--sidebar-right-offset)) !important; }
  #sceneList .scenes { width: 100%; }
}

#sceneList .scenes {
  width: 100%;
  /* ビューポートに基づく max-height を使い、スクロールが安定して動作するようにする */
  max-height: calc(100vh - (56px + var(--sidebar-top-offset, 0px) + var(--sidebar-bottom-offset)));
  /* 背景を titleBar .sceneName と同等の透明度に合わせる（よりモダンで統一感ある見た目） */
  background: linear-gradient(180deg, rgba(20,24,30,0.48) 0%, rgba(20,24,30,0.48) 100%);
  color: #e6eef6;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: none; /* 親で影付け済み */
  border-left: 1px solid rgba(255,255,255,0.03);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background-color 200ms ease;
  /* 下部に指定の余白を確保（safe-area を尊重） */
  padding-bottom: calc(var(--sidebar-bottom-offset) + env(safe-area-inset-bottom, 0px));
}

/* Mobile: シーン最大高さをモバイル用オフセットに合わせて調整 */
.mobile #sceneList {
  /* 幅をインセットして安全表示を確保する */
  width: calc(100% - 12px); /* 少し余白を残す（安全表示） */
  height: 100%;
  /* 非表示状態（他のルールが left を上書きする場合がある） */
  left: calc(-100% - var(--sidebar-left-offset));
  transition: left 320ms ease; /* left ベースでスライドさせる */
  z-index: 14000; /* モバイルで他要素より前面に */
}

/* 明示的な有効状態: モバイルで表示するためにスライドさせる */
.mobile #sceneList.enabled {
  left: var(--sidebar-left-offset) !important;
}

/* 内部パネルがデバイスの safe-area を尊重して左側のコンテンツが切れないようにする */
.mobile #sceneList .scenes {
  max-height: calc(100vh - 60px);
  box-sizing: border-box;
  padding-left: env(safe-area-inset-left, 12px);
  padding-right: env(safe-area-inset-right, 12px);
}

/* 小画面調整: スライドコンテナ内部で .scenes が幅を覆うようにする */
@media (max-width: 520px) {
  #sceneList { width: 100%; } /* container は left で隠す/表示するため、幅はフルにする */
  #sceneList .scenes { width: 100%; }
}

.mobile #sceneList .scene {
  display: block;
  position: relative; /* 擬似要素配置用 */
  width: 100%;
  height: 30px;
}

.mobile #sceneList .scene {
  height: 40px;
}

#sceneList .scene > a {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
  position: relative;       /* 擬似要素を相対位置で配置するため */
  padding-left: 8px;        /* 左寄せにするため小さく */
  box-sizing: border-box;
}

#sceneList .scene .text {
  width: 100%;
  height: 100%;
  padding: 0 12px;          /* 右側に少し余白、左は a の padding で確保 */
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 折り返し対応: サイドバーのテキストが見切れる場合は改行して表示（最大行数は clamp で制御） */
#sceneList .scene .text {
  /* allow wrapping instead of single-line truncation */
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  /* multiline clamp (2 lines by default) */
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;

  /* better breaking for long words/URLs */
  word-break: break-word !important;
  overflow-wrap: anywhere !important;

  /* ensure reasonable line-height and maximum height */
  line-height: 1.2 !important;
  max-height: calc(2 * 1.2em) !important;
}

/* モバイル: 少し行数を増やして読みやすくする */
@media (max-width: 520px) {
  #sceneList .scene .text {
    -webkit-line-clamp: 3 !important;
    max-height: calc(3 * 1.2em) !important;
  }
}

/* ホバー/フォーカス: カーソルが要素またはその子の上にある間、白いアクセントバーを表示し続ける */
.no-touch #sceneList .scene:hover,
#sceneList .scene:focus-within,
#sceneList .scene > a:hover,
#sceneList .scene > a:focus {
  background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  cursor: pointer;
}

/* 左のアクセントバーはアンカーペセudo要素に移し、テキストの隣に表示する。
   ホバー時または現在のシーンのみ表示する。 */
#sceneList .scene > a::before {
  content: "";
  position: absolute;
  left: 6px;               /* テキストのすぐ横に表示（微調整） */
  top: 6px;
  bottom: 6px;
  width: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,0); /* 初期は非表示 */
  transition: background 160ms ease, opacity 160ms ease, transform 160ms ease;
  opacity: 0;
  transform: translateX(-2px);
  pointer-events: none;
}

/* ホバー時は白いバーを表示する */
#sceneList .scene:hover > a::before,
#sceneList .scene:focus-within > a::before,
#sceneList .scene > a:hover::before,
#sceneList .scene > a:focus::before {
  background: rgba(255,255,255,0.34);
  opacity: 1;
  transform: translateX(0);
}

/* 選択中のシーンのみ青系のバーを常時表示する（他行には影響しない） */
#sceneList .scene.current,
#sceneList .scene.current > a {
  background: linear-gradient(90deg, rgba(16,96,170,0.20), rgba(16,96,170,0.08));
  color: #ffffff;
  /* 軽い内側シャドウ */
  box-shadow: inset -4px 0 10px rgba(0,0,0,0.12);
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  transition: background 180ms ease;
}

#sceneList .scene.current > a::before {
  background: #f5b700; /* 黄色（アンバー系） */
  opacity: 1;
  transform: translateX(0);
}

/* スクロールバー: 控えめでモダンなスタイルにする */
#sceneList .scenes::-webkit-scrollbar {
  width: 10px;
}
#sceneList .scenes::-webkit-scrollbar-track {
  background: transparent;
}
#sceneList .scenes::-webkit-scrollbar-thumb {
  /* つまみを濃くして視認性を向上 */
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06));
  border-radius: 8px;
  border: 2px solid rgba(0,0,0,0.08);
}

/* 非 WebKit 環境向けフォールバック: 濃いめの細いスクロールバー色 */
#sceneList .scenes {
  scrollbar-color: rgba(255,255,255,0.14) transparent;
  scrollbar-width: thin;
}

/* シーンが一つしかない場合はシーンリストを非表示にする */
body.single-scene #sceneList, body.single-scene #sceneListToggle {
  display: none;
}

/* ---------- 追加: 行の自動高さと折り返しを確実に有効化する（既存の強いルールを上書き） ---------- */

/* 各シーン行は高さを自動化し、最小高さで見た目を保つ */
#sceneList .scene {
  height: auto !important;
  min-height: 40px !important; /* 見た目を維持 */
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  box-sizing: border-box !important;
}

/* アンカーを上寄せにして複数行を許容する */
#sceneList .scene > a {
  align-items: flex-start !important; /* 中央揃えから先頭揃えへ */
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  height: auto !important;
}

/* テキスト部分: 高さ指定を解除し clamp を有効にする（デフォルト 2 行、モバイル 3 行） */
#sceneList .scene .text {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  white-space: normal !important;
  text-overflow: ellipsis !important;
  line-height: 1.3 !important;
  max-height: calc(2 * 1.3em) !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* デスクトップ: 行のスペースを確保（強い優先度で上書き） */
@media (min-width: 521px) {
  #sceneList .scene {
    min-height: 40px !important;
  }
  #sceneList .scene .text {
    -webkit-line-clamp: 2 !important;
    max-height: calc(2 * 1.3em) !important;
  }
}

/* モバイル: もう一行多めに許容して読みやすくする */
@media (max-width: 520px) {
  #sceneList .scene .text {
    -webkit-line-clamp: 3 !important;
    max-height: calc(3 * 1.3em) !important;
  }
}

/* 擬似要素（アクセントバー）位置の微調整：行が複数行でも上端に合わせる */
#sceneList .scene > a::before {
  top: 10px !important;
  bottom: 10px !important;
}

/* ---------- 最終上書き: 長いシーン名を折り返して複数行表示可能にする ---------- */
/* 既存の強いルールを上書きするためファイル末尾に配置（!important を併用） */

#sceneList .scene {
  height: auto !important;        /* 固定高さを解除 */
  min-height: 40px !important;    /* 見た目は維持 */
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  box-sizing: border-box !important;
}

/* アンカーを縦積みレイアウトにしてテキストが複数行になっても崩れないようにする */
#sceneList .scene > a {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important; /* 上詰めにして複数行を自然に伸ばす */
  justify-content: flex-start !important;
  height: auto !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* テキストは折り返しを許可し、必要なら複数行で表示する（最大3行を目安にする） */
#sceneList .scene .text {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important; /* 必要なら 2 や none に変更可能 */
  overflow: hidden !important;
  white-space: normal !important;
  text-overflow: ellipsis !important;
  line-height: 1.25 !important;
  max-height: calc(3 * 1.25em) !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  padding: 0 12px !important;
}

/* デスクトップ向けに既定は 2 行にしたい場合はここで上書き可能 */
@media (min-width: 521px) {
  #sceneList .scene .text {
    -webkit-line-clamp: 2 !important;
    max-height: calc(2 * 1.25em) !important;
  }
}

/* モバイルではもう少し行数を許容 */
@media (max-width: 520px) {
  #sceneList .scene .text {
    -webkit-line-clamp: 3 !important;
    max-height: calc(3 * 1.25em) !important;
    line-height: 1.3 !important;
  }
}

/* 擬似要素（アクセントバー）の上下位置を複数行に合わせて調整 */
#sceneList .scene > a::before {
  top: 10px !important;
  bottom: 10px !important;
}