/* パネル背景の濃紺2色。ここ2行を変えれば全パネルの地色が一気に変わる。
   （VSCダークモード配色: 濃 #252526 / 明 #333333） */
:root {
  --bg-panel-dark: #252526;
  --bg-panel:      #333333;
  /* グリッドの進捗の線の色（暫定。ここ1行で変える） */
  --grid-progress: #f5c400;
  /* 今の動画の行の色（ツリー・カード）。試し中（はしくん 2026-10-21）: 紫は目立ちすぎるので、もう一つのキーカラーのオレンジ
     （サムネの見た位置の線 #f8b830）を薄く敷く。紫に戻す時は下の 3 行を、地 #4a35b8・線 transparent にする */
  --sel-bg:   rgba(248, 184, 48, 0.22);
  --sel-line: rgba(248, 184, 48, 0.75);
  --sel-fg:   #fff;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #0a0a12;
  color: #e0e0e0;
  /* 画面の文字は選べない（ドラッグやダブルクリックで、ボタンの文字や数字が反転しない）。
     選べるのは、上の今の動画の名前・入力欄・ライセンスの文だけ（下の例外） */
  -webkit-user-select: none;
  user-select: none;
  height: 100vh;
  overflow: hidden;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* ヘッダー */
#header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: var(--bg-panel);
  border-bottom: 1px solid #333;
}

#header button {
  box-sizing: border-box;
  height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  background: #4a35b8;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

#header button:hover {
  background: #5a44d0;
}

/* Folder/File は幅を揃えて professional に（中央寄せの固定幅） */
#header #openFolderBtn,
#header #openFileBtn {
  width: 64px;
  padding: 0;
  justify-content: center;
}

/* 階層のボタン（押すと、今いるフォルダから上の階層の縦のメニュー）と、開くボタン（押すと、フォルダ／動画ファイルを開くメニュー） */
#header #pathBtn,
#header #openBtn {
  background: transparent;
  border: 1px solid #aaa;
  color: #ddd;
  font-size: 13px;
  /* 狭い窓で縮められると、日本語は字と字の間で折れて「階／層」の 2 行になる（英語は単語の途中で折れないので壊れない） */
  white-space: nowrap;
  flex-shrink: 0;
}
#header #pathBtn:disabled {
  opacity: 0.4;
  cursor: default;
}
#header #pathBtn:hover:not(:disabled),
#header #openBtn:hover {
  background: #3a3a3a;
  color: #fff;
}
/* 「開」は線が字の箱の端まで届いて大きく見えるので、1px 小さくして「階層」と見た目を揃える。ボタンの幅は揃えたまま */
#header #openBtn {
  font-size: 12px;
  min-width: 48px;
  justify-content: center;
}

#breadcrumb {
  display: flex;
  /* 文字の下端（ベースライン）で揃える。center だと、英字・記号・日本語で使われる字体が違い、箱の高さが変わって文字が上下にがたつく */
  align-items: baseline;
  gap: 2px;
  color: #888;
  font-size: 13px;
  flex-wrap: wrap;
}

#breadcrumb span {
  cursor: pointer;
  line-height: 18px;   /* 字体が違っても箱の高さを同じにする（#currentFile と同じ値） */
  padding: 2px 4px;
  border-radius: 3px;
}

#breadcrumb span:hover {
  background: #3a3a3a;
  color: #e0e0e0;
}

#breadcrumb .sep {
  cursor: default;
  padding: 0;
}

#breadcrumb .sep:hover {
  background: transparent;
  color: #888;
}

#currentFile,
input,
textarea {
  -webkit-user-select: text;
  user-select: text;
}

#currentFile {
  color: #e0e0e0;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;   /* パンくずの文字と同じ高さの箱にして、縦の位置を揃える */
  padding: 2px 0;
}

#currentFile:not(:empty)::before {
  content: '▶ ';
  color: #7c5cff;
}

/* メインコンテンツ */
#main {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* ツリーパネル（左） */
#treePanel {
  width: 280px;
  min-width: 250px;   /* 一番細い幅＝カードが「サムネの下に名前」に切り替わってすぐの所（app.js の TREE_MIN_WIDTH と同じ値） */
  max-width: 500px;
  flex-shrink: 0;
  background: var(--bg-panel-dark);
  border-right: 1px solid #333;
  display: flex;
  flex-direction: column;
  transition: width 0.2s, min-width 0.2s;
}
/* つまみで幅を動かしている間は、アニメーションを切る（開閉のボタンの時だけ動いて見せる） */
#treePanel.resizing { transition: none; }

#treePanel.collapsed {
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden;
  border-right: none;
}

/* ツリーリサイズハンドル */
#treeResizer {
  width: 6px;
  background: #333;
  cursor: col-resize;
  transition: background 0.2s;
}

#treeResizer:hover,
#treeResizer.resizing {
  background: #7c5cff;
}

#treeResizer.hidden {
  display: none;
}

/* 検索コンテナ */
#searchContainer {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  background: #2b2b2c;   /* ヘッダー（#333）と同じ色だと続いて見えて違和感があった。ツリー（#252526）との間の、少しヘッダー寄り（はしくん 2026-10-15） */
  border-bottom: 1px solid #333;
  gap: 8px;
}

#searchContainer button {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}

#searchContainer button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #e0e0e0;
}

#searchContainer #sortBtn {
  font-size: 15px;
  line-height: 1;
  padding: 4px 6px;
}

#searchBox {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
}

#searchContainer #searchClear {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  padding: 3px 7px;
  font-size: 13px;
  color: #aaa;
}
#searchContainer #searchClear:hover { color: #fff; }

#searchContainer #searchClear.hidden {
  display: none;
}

#searchInput {
  flex: 1;
  min-width: 0;
  padding: 6px 26px 6px 10px;
  background: #0a0a12;
  border: 1px solid #333;
  border-radius: 4px;
  color: #e0e0e0;
  font-size: 12px;
  outline: none;
}

#searchInput:focus {
  border-color: #7c5cff;
}

#searchInput::placeholder {
  color: #666;
}

/* 検索結果の続き（100件ずつ足す）と、一覧を作っている最中の印 */
.tree-more {
  padding: 8px 10px;
  font-size: 12px;
  color: #888;
  text-align: center;
  border-radius: 4px;
}

.tree-more.action {
  cursor: pointer;
}

.tree-more.action:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #e0e0e0;
}

/* 下の階層まで見ても動画が1本も無いフォルダ・壊れていて再生できない動画 */
.tree-item.folder.empty,
.tree-item.video.unsupported,
.tree-item.video.broken {
  opacity: 0.4;
  filter: grayscale(1);
  cursor: default;
}

.tree-item.folder.empty:hover,
.tree-item.video.unsupported:hover,
.tree-item.video.broken:hover {
  background: none;
}

/* フォルダの行の右端: 下の階層まで数えた動画の本数 */
.tree-count {
  margin-left: auto;
  padding-left: 8px;
  flex-shrink: 0;
  color: #888;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* 検索結果のフォルダをその場で開いた時の中身 */
.tree-item.search-result + .tree-children .tree-item {
  font-size: 12px;
}

#treeContainer {
  padding: 10px;
  flex: 1;
  overflow-y: auto;
  /* WEB版にあった overflow-x: hidden が Electron移植時に欠落し、長いファイル名で
     横スクロールバーが出ていた（.grid-container と同じ移植漏れ）。折り返しで吸収する。 */
  overflow-x: hidden;
  /* 左ペインはクリックで選ぶ/開くだけ。テキスト選択（クリック時の青ハイライト）は不要。
     検索入力は別要素(#searchContainer)なので入力は保たれる。 */
  -webkit-user-select: none;
  user-select: none;
}

.tree-item {
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  /* 長いファイル名はペイン幅で折り返して吸収（検索結果だけ折り返す不整合を解消）。
     flexアイテムのテキストを折り返すため min-width:0 が必須。 */
  min-width: 0;
  white-space: normal;
  word-break: break-all;
}

.tree-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* ✨: 右クリックメニューのある所でマウスが止まった時に、ポインターの横に出す印（app.js の sparkleBtn）。
   押すと、右クリックと同じメニューが開く。位置は app.js が入れる */
.sparkle-btn {
  position: fixed;
  z-index: 9500;
  display: none;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 33px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(20, 20, 28, 0.85);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.sparkle-btn.on { display: inline-flex; }
.sparkle-btn:hover { background: rgba(124, 92, 255, 0.55); }

/* 今の動画の行。色は上の :root の --sel-*（元は VamSeek のキーカラーの紫 #4a35b8。ヘッダーの Folder / File のボタンと同じ・はしくん） */
.tree-item.selected {
  background: var(--sel-bg);
  box-shadow: inset 0 0 0 1px var(--sel-line);
  color: var(--sel-fg);
}

/* ヘッダーの再生中の名前を押して出した行（app.js の showPlayingInTree）。少しの間だけ光らせて目を引く */
.tree-item.reveal-flash {
  animation: reveal-flash 1.6s ease-out;
}

@keyframes reveal-flash {
  0%, 30% { box-shadow: inset 0 0 0 2px #f8b830, 0 0 12px rgba(248, 184, 48, 0.8); }
  100%    { box-shadow: inset 0 0 0 1px var(--sel-line), 0 0 0 rgba(248, 184, 48, 0); }
}

/* 再生中の動画が入っているフォルダ（何階層上でも。app.js の markPlayingFolders）: 行は左に紫の線、カードは紫の枠 */
.tree-item.folder.holds-playing { box-shadow: inset 3px 0 0 #7c5cff; color: #c9bbff; }
.tree-item.folder.holds-playing.selected { color: #fff; }
#main.split #treeContainer.cards .tree-item.folder.holds-playing { box-shadow: inset 0 0 0 2px #7c5cff; }

/* ⭐お気に入りの区画（app.js の mountFav）: お気に入りの行を、ツリーの上の端に貼り付けて、スクロールしても流さない（sticky）。
   ツリーの余白（上・左右 10px）まで覆う: 余白のすき間に、下を流れる行が見えないように。地は不透明 */
.fav-zone {
  position: sticky;
  top: -10px;
  z-index: 3;
  margin: -10px -10px 6px;
  padding: 6px 10px 4px;   /* 上は 10px だと検索窓との間が空きすぎた（はしくん 2026-10-15。4px 詰めた） */
  background: var(--bg-panel-dark);
  border-bottom: 1px solid #555;   /* 下のツリーとの境目（地の色に溶けない濃さ） */
}

/* お気に入りの中へ入っている間の中身。左の線と字下げは付けない（上に固定したお気に入りの行で、中に居ると分かる） */
#treeContainer .tree-children.fav-children {
  margin-left: 0;
  padding-left: 0;
  border-left: none;
}

/* 入っていない時は、動画の無いフォルダ（.tree-item.folder.empty）と同じ灰色。文字も ⭐ も。
   入ると文字は白（ほかの行と同じ）に、⭐ は色付きに戻る（色が変わるのは ⭐ だけ） */
.fav-row:not(.expanded) {
  opacity: 0.4;
  filter: grayscale(1);
}

/* お気に入りの行。見た目はフォルダの行と同じ。空の時は薄くする */
.fav-row {
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  min-width: 0;
}

.fav-row::before {
  content: '⭐';
  display: inline-block;
  width: 18px;
  font-size: 14px;
  text-align: center;
  flex-shrink: 0;
}

.fav-row:hover { background: rgba(255, 255, 255, 0.05); }

/* 空の時は押せない（見た目の灰色は、上の「入っていない時」と同じ） */
.fav-row.empty { cursor: default; }

.fav-row.empty:hover { background: none; }

/* 「ツリーで場所を表示」で見せた動画の行（app.js の paintShown）。今の動画の紫と見分けが付く金色。ツリーを押すまで残る */
.tree-item.shown,
.tree-item.shown:hover {
  background: rgba(255, 196, 0, 0.2);
  box-shadow: inset 0 0 0 1px rgba(255, 196, 0, 0.7);
}

/* お気に入りの中の、外で消した・動かした動画 */
.tree-item.video.missing { opacity: 0.4; }

/* お気に入りに入っている動画（ツリー・検索結果）。お気に入りの区画の中は全部がそうなので出さない */
.tree-item.video.is-fav .tree-name::before { content: '⭐'; margin-right: 2px; }
.fav-children .tree-item.video.is-fav .tree-name::before { content: none; }

/* いくつか選んだ動画（Ctrl / Shift＋クリック）。今の動画（紫の地）と見分けが付くように、青い枠と地 */
.tree-item.picked {
  background: rgba(64, 156, 255, 0.22);
  box-shadow: inset 0 0 0 1px rgba(64, 156, 255, 0.75);
}

/* Shift＋クリックで行の文字が選択されないように */
#treeContainer {
  user-select: none;
}

/* v8.x: Chevron方式（Windows Explorer風） */
.tree-item.folder::before {
  content: '📁';
  display: inline-block;
  width: 18px;
  font-size: 14px;
  text-align: center;
  flex-shrink: 0;
  align-self: flex-start;
}

.tree-item.folder.expanded::before {
  content: '📂';
}

.tree-item.video::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  align-self: flex-start;
  /* 2Dシークバーの再生ヘッドアイコン（vam5.70 marker.png）をグレー化して流用 */
  background: url('../assets/play-marker-gray.png') no-repeat center / 14px 14px;
}

/* 戻る・上の階層に戻る・進む。ツリーの幅いっぱいを 1:6:1 に分ける（戻る・進むは細く。はしくん 2026-10-20）。乗せると色が変わる。行く先が無い物はグレー */
#treeNav {
  display: grid;
  grid-template-columns: 1fr 6fr 1fr;
  gap: 4px;
  flex-shrink: 0;
  margin: 8px 10px 0;
}

#treeNav button {
  display: block;
  min-width: 0;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  color: #ccc;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

#treeNav button:hover:not(:disabled) {
  background: rgba(124, 92, 255, 0.35);
  border-color: #7c5cff;
  color: #fff;
}

/* 戻る・進むの三角は文字でなく絵（mask）で、ボタンのまん中に置く。文字（◀▶）は細いボタンからはみ出して … が付き、左へずれていた */
/* 上の階層に戻るは、探索モードの一番細い T（160px）でも 7 文字が切れないように、左右の余白を詰める（中身 84px・ボタン 89px）。
   #treeNav button より強くするため #treeNav を付ける */
#treeNav #treeUpBtn {
  padding-left: 2px;
  padding-right: 2px;
}

#treeNav #treeBackBtn,
#treeNav #treeFwdBtn {
  position: relative;
  padding-left: 0;
  padding-right: 0;
}

#treeBackBtn::before,
#treeFwdBtn::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 10px;
  margin: -5px 0 0 -4px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M8 0v10L0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

#treeFwdBtn::before {
  transform: scaleX(-1);
}

#treeNav button:disabled {
  color: #555;
  cursor: default;
}

/* 上のフォルダへ戻った直後、出てきたフォルダの行に少しの間だけ付く目印 */
.tree-item.came-from {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

/* 方向キーの枠（app.js の makeTreeKeys。列モードのツリーと探索モードの T）。選んだ色のラインだけが先に動き、開くと塗りも揃う（.selected と同じ姿）。
   キーの行き先がグリッドへ戻っても姿は変えない */
#treeContainer:focus, #folderTree:focus { outline: none; }
#treeContainer .tree-item.kb-cursor, #folderTree .tree-item.kb-cursor { box-shadow: inset 0 0 0 1px var(--sel-line); }
#treeContainer .tree-item.kb-cursor.expanded, #folderTree .tree-item.kb-cursor.expanded { background: var(--sel-bg); color: var(--sel-fg); }
/* キーで動かしている間（ツリーにフォーカスがある間）は、今のフォルダの行のラインを消して塗りだけにする（ラインは枠の1本だけ） */
#treeContainer:focus .tree-item.folder.selected:not(.kb-cursor), #folderTree:focus .tree-item.folder.selected:not(.kb-cursor) { box-shadow: none; }

/* 開いたフォルダの中身。左に縦線を引いて字下げする（どこまでがそのフォルダの中身かが、スクロールのどこに居ても分かる。
   線が終わる所が、そのフォルダの終わり。2段、3段と開くと線も2本、3本と並ぶ） */
.tree-children {
  margin-left: 10px;   /* フォルダの行の左の余白と同じ＝線が、フォルダの絵の左端の真下に来る */
  padding-left: 10px;
  border-left: 2px solid rgba(255, 255, 255, 0.22);
}

/* サムネ付きの表示は、絵と名前の幅を取りたいので、線から中身までを詰める */
#treeContainer.cards .tree-children {
  padding-left: 4px;
}

/* 検索結果 */
.tree-item.search-result {
  padding-left: 10px;
  font-size: 12px;
  word-break: break-all;
  white-space: normal;
  line-height: 1.4;
}

.tree-item.search-result::before {
  flex-shrink: 0;
}

.tree-item.search-result.folder::before {
  content: '📁';
  display: inline-block;
  width: 18px;
  font-size: 14px;
  text-align: center;
}

.tree-item.search-result.video::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: url('../assets/play-marker-gray.png') no-repeat center / 14px 14px;
}

/* カード表示（⚙ → Card View。tree-cards.js）。動画行は常に .tree-thumb と .tree-name の2つに分けてあり、
   カードの時だけサムネ枠を出す */
.tree-thumb { display: none; }
.tree-name { min-width: 0; }

/* カードは階層ぶんの字下げをしない（絵と名前を広く見せる。階層はフォルダの行の字下げで分かる）。
   字下げは renderTree が行ごとに style で付けているので、!important で上書きする */
#treeContainer.cards .tree-item.video {
  align-items: center;
  gap: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px !important;
}

#treeContainer.cards .tree-item.video::before { display: none; }

#treeContainer.cards .tree-item.video .tree-thumb {
  display: block;
  flex-shrink: 0;
  width: 96px;
  height: 70px;
  padding-bottom: 16px;   /* 下は長さの帯。絵は、これを除いた 96x54 の中に収める（下の background-origin） */
  border-radius: 3px;
  background: #15151f top center / auto 100% no-repeat;   /* 高さに合わせる（引き伸ばさない）。16:9 より横長は左右を切り、縦の動画は左右に余白 */
  background-origin: content-box;
  position: relative;
  overflow: hidden;
}

/* 利用者が回した動画（tree-cards.js が data-rot を付ける）: 同じ絵を上に重ねて、回して出す。
   90°・270° は縦横を入れ替えた箱を絵の所（96x54）の真ん中で回す。絵は箱に収める（回した後の向きの比率で収まる。引き伸ばさない） */
#treeContainer.cards .tree-item.video .tree-thumb[data-rot]::before {
  content: '';
  position: absolute;
  left: 48px;
  top: 27px;
  width: 54px;
  height: 96px;
  background-color: #15151f;
  background-image: inherit;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  transform: translate(-50%, -50%) rotate(90deg);
}

#treeContainer.cards .tree-item.video .tree-thumb[data-rot="270"]::before {
  transform: translate(-50%, -50%) rotate(270deg);
}

#treeContainer.cards .tree-item.video .tree-thumb[data-rot="180"]::before {
  width: 96px;
  height: 54px;
  background-size: auto 100%;
  transform: translate(-50%, -50%) rotate(180deg);
}

/* ツリーが細い時（最小の幅の近く）は、カードを縦に並べる: サムネはツリーの幅いっぱい、名前はその下。
   横に並べると、名前が 1 行に数文字しか入らないため。幅はツリー（#treeContainer）の中身の幅で見る */
#treeContainer { container: tree / inline-size; }

@container tree (max-width: 230px) {
  #treeContainer.cards .tree-item.video {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  /* 絵の所（帯を除く）がおよそ 16:9 になる比率。絵は枠に収める（引き伸ばさない） */
  #treeContainer.cards .tree-item.video .tree-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 1.52;
  }

  /* 回した動画: 箱の大きさを枠に対する割合で出す（横並びの時の px の値は、枠が 96 px の時の物） */
  #treeContainer.cards .tree-item.video .tree-thumb[data-rot]::before {
    left: 50%;
    top: calc((100% - 16px) / 2);
    width: 56.25%;
    height: 152%;
  }

  #treeContainer.cards .tree-item.video .tree-thumb[data-rot="180"]::before {
    width: 100%;
    height: calc(100% - 16px);
  }
}

/* カードの中で流す時の <video>（app.js の cardClip）。絵の所（下の帯を除く）に重ねる。流れ出すまでは透明（止まった絵が見えている）。
   押した物は下のカードが受ける: <video> が押されると、mousedown で cardClip が <video> を外すので click が届かず、2 回押さないと開かなかった */
.tree-thumb .tc-clip {
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 16px;
  width: 100%;
  height: calc(100% - 16px);
  object-fit: cover;   /* 縦横比を守って黒帯を出さず、枠いっぱいに埋める（はしくん 2026-10-26。前は contain＋横長だけ cover） */
  background: #15151f;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.tree-thumb .tc-clip.on {
  opacity: 1;
}

/* サムネの下の帯: 動画の長さ（分かるまでは空の帯） */
.tree-time {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16px;
  padding: 0 5px;
  background: #3a3a44;
  color: #fff;
  font-size: 11px;
  line-height: 16px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* どこまで見たか（再生位置の記憶がある動画だけ） */
.tree-progress {
  position: absolute;
  left: 0;
  bottom: 16px;
  height: 3px;
  background: #f8b830;
}

/* まだ見ていない側: グレーの線（サムネは透かさない） */
.tree-progress::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 0;
  width: 100vw;
  height: 100%;
  background: #666;
}

#treeContainer.cards .tree-item.video .tree-thumb.none::after {
  content: '🎞';
  display: flex;
  height: 54px;
  align-items: center;
  justify-content: center;
  opacity: 0.35;
}

#treeContainer.cards .tree-item.video .tree-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  line-height: 1.35;
}

/* プレイヤーパネル（中央） */
#playerPanel {
  position: relative; /* #controlBar オーバーレイの基準 */
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  /* 動画未ロード時の地: モック(artifact 53781dc0)承認のグラデーション */
  background: radial-gradient(120% 90% at 30% 20%, #1d2340 0%, #0d0f1c 55%, #07070d 100%);
  overflow: hidden;
}

#videoPlayer {
  flex: 1;
  background: transparent;   /* 空のときはパネルのグラデーションを見せる */
  width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 利用者が 90°・270° 回した時（app.js の applyRotation）。箱の縦横を入れ替えて、パネルの真ん中で回す。
   --panel-w／--panel-h は app.js がパネルの大きさを入れる */
#videoPlayer.turned {
  position: absolute;
  left: 50%;
  top: 50%;
  flex: none;
  width: var(--panel-h);
  height: var(--panel-w);
  max-height: none;
}

/* 選んだサムネの場面のカバー（app.js の showCover）。動画の上・操作バーの下に重ねる。押下は下の動画へ通す。
   絵が出来るまでは黒（下の絵 → カバー の二段階にしない） */
#pickCover {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000 center / contain no-repeat;   /* 収め方と位置は app.js が動画に合わせる（fitCover・applyPan） */
  pointer-events: none;
  transition: opacity 0.3s ease-out;   /* 再生を押した時のクロスフェード（app.js の COVER_FADE_MS と合わせる） */
}

#pickCover.fade {
  opacity: 0;
}

#playerPanel.clip-mode #pickCover,
#playerPanel:not(.has-video) #pickCover {
  display: none;
}

#playerPanel.has-video #videoPlayer {
  background: #000;   /* 動画ありは黒地（レターボックス帯） */
}

/* 開けない・再生できない時の短い説明。押すと消える。開けなかった物の説明は数秒で薄くなって消える（app.js の fadeNotice） */
#playerNotice {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: min(460px, 80%);
  padding: 14px 20px;
  background: rgba(16, 16, 26, 0.92);
  border: 1px solid #444;
  border-radius: 8px;
  color: #e8e8f0;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  z-index: 4;
  cursor: pointer;
  transition: opacity 0.3s;
}

#playerNotice.fading { opacity: 0; }

/* 初めて起動した時だけ出す案内 */
#welcome {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  width: min(420px, 86%);
  padding: 26px 28px 22px;
  background: rgba(16, 16, 26, 0.94);
  border: 1px solid #444;
  border-radius: 10px;
  color: #e8e8f0;
  text-align: center;
  z-index: 4;
}

#welcomeTitle { font-size: 20px; font-weight: 600; margin-bottom: 10px; }
#welcomeText { font-size: 14px; color: #c8c8d4; margin-bottom: 18px; }
#welcomeHint { font-size: 12px; color: #888; margin-top: 16px; }

#welcomeBtn {
  padding: 9px 22px;
  background: #4a35b8;
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

#welcomeBtn:hover { background: #5b45d0; }

#welcomeClose {
  position: absolute;
  right: 8px;
  top: 8px;
  background: none;
  border: none;
  color: #888;
  font-size: 12px;
  padding: 4px 7px;
  border-radius: 4px;
  cursor: pointer;
}

#welcomeClose:hover { background: rgba(255, 255, 255, 0.1); color: #e0e0e0; }

#welcomeAiBtn {
  margin-top: 18px;
  padding: 7px 14px;
  background: none;
  border: 1px solid #555;
  border-radius: 6px;
  color: #d8d8e4;
  font-size: 13px;
  cursor: pointer;
}

#welcomeAiBtn:hover { border-color: #7c5cff; background: rgba(124, 92, 255, 0.12); }
#welcomeAiHint { font-size: 11px; color: #777; margin-top: 8px; }

.context-menu-divider {
  height: 1px;
  background: #333;
  margin: 4px 0;
}

/* ツリーの動画にマウスを乗せた時の札（絵はツリーの3倍の大きさ＝288×162） */
#hoverCard {
  position: fixed;
  z-index: 9000;
  width: 312px;
  padding: 12px;
  background: rgba(22, 22, 32, 0.97);
  border: 1px solid #444;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
  color: #e0e0e0;
  font-size: 12px;
  line-height: 1.45;
  pointer-events: none;
}

#hoverCard .hc-close { display: none; }

/* 右クリックの「プロパティ」で固定した札: 窓のように掴んで動かせ、上の操作は下へ通さない */
#hoverCard.pinned { pointer-events: auto; cursor: move; user-select: none; }
#hoverCard.pinned .hc-close {
  display: block;
  position: absolute;
  top: 4px;
  right: 6px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.55);
  color: #ddd;
  font-size: 15px;
  line-height: 22px;
  cursor: pointer;
  z-index: 10;
}
#hoverCard.pinned .hc-close:hover { background: #c0392b; color: #fff; }

#hoverCard .hc-thumb {
  width: 288px;
  height: 162px;
  margin-bottom: 8px;
  border-radius: 4px;
  background: #15151f center / contain no-repeat;   /* 引き伸ばさない（縦の動画は高さに合わせて左右に余白） */
}

#hoverCard .hc-name {
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  overflow-wrap: anywhere;
}

#hoverCard .hc-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

#hoverCard .hc-row span { color: #999; flex-shrink: 0; }
#hoverCard .hc-row b { font-weight: 400; text-align: right; white-space: pre-line; }

/* 札の絵の下端: どこまで見たか（ツリーのサムネの線と同じ色） */
#hoverCard .hc-thumb { position: relative; overflow: hidden; z-index: 0; isolation: isolate; }   /* 中の動画を自分の層に閉じ込める（閉じるボタンより上に出ない） */

/* 回してある動画の札: ツリーのカードと同じく、同じ絵を上に重ねて回して出す（app.js が data-rot を付ける） */
#hoverCard .hc-thumb[data-rot]::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 162px;
  height: 288px;
  background-color: #15151f;
  background-image: inherit;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  transform: translate(-50%, -50%) rotate(90deg);
}

#hoverCard .hc-thumb[data-rot="270"]::before {
  transform: translate(-50%, -50%) rotate(270deg);
}

#hoverCard .hc-thumb[data-rot="180"]::before {
  width: 288px;
  height: 162px;
  transform: translate(-50%, -50%) rotate(180deg);
}

/* 札で流す短いクリップ（app.js）。再生が始まったら（.on）止まった絵に重ねて出す */
#hoverCard .hc-clip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #15151f;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;   /* クロスフェードの長さ（app.js の HOVER_LIVE_FADE_MS と合わせる） */
}

#hoverCard .hc-clip.on {
  opacity: 1;
}

/* 流す時に、次の絵を重ねて浮かばせる層（濃さは app.js が変える） */
#hoverCard .hc-fade {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-repeat: no-repeat;
}

#hoverCard .hc-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  background: #f8b830;
}

/* 動き出すまでの待ちのカウントダウン（上端の細い線。app.js が .run を付けると、指定の長さで満タンからゼロへ縮む） */
#hoverCard .hc-count {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  background: #4a35b8;   /* ヘッダーのボタン（Folder / File）と同じ紫 */
  pointer-events: none;
  transition-property: width;
  transition-timing-function: linear;
}

#hoverCard .hc-count.run {
  width: 0;
}

#hoverCard .hc-progress::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 0;
  width: 100vw;
  height: 100%;
  background: #666;
}

/* 動画やフォルダを窓の上に持ってきた時の印（窓全体） */
#dropHint {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 18, 0.6);
  border: 3px dashed #7c5cff;
  pointer-events: none;
}

#dropHint span {
  padding: 12px 26px;
  background: rgba(16, 16, 26, 0.95);
  border-radius: 8px;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}

/* フォーカス時のオレンジ枠（ブラウザ既定のfocus outline）を消す */
#videoPlayer:focus,
#playerPanel:focus,
#playerPanel:focus-within {
  outline: none;
}

/* 右クリックメニュー */
#videoContextMenu {
  position: fixed;
  background: var(--bg-panel);
  border: 1px solid #333;
  border-radius: 4px;
  padding: 4px 0;
  z-index: 1000;
  min-width: 150px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

#videoContextMenu.hidden {
  display: none;
}

.context-menu-item {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 13px;
  color: #e0e0e0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.context-menu-item:hover {
  background: rgba(124, 92, 255, 0.2);
}

.context-menu-item.active::before {
  content: '✓';
  color: #7c5cff;
}

.context-menu-item:not(.active)::before {
  content: '';
  width: 1em;
}

/* 中身を横に開く行（動画の右クリックの「回転」）。乗せるか、押して .open が付くと開く。右に入らない時は .to-left で左へ */
.context-menu-item.has-sub {
  position: relative;
}

.context-menu-item.has-sub::after {
  content: '▸';
  margin-left: auto;
  color: #999;
}

.context-submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: -5px;
  min-width: 130px;
  padding: 4px 0;
  background: var(--bg-panel);
  border: 1px solid #333;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}

.context-menu-item.has-sub:hover > .context-submenu,
.context-menu-item.has-sub.open > .context-submenu {
  display: block;
}

.context-menu-item.has-sub.to-left > .context-submenu {
  left: auto;
  right: 100%;
}

/* リサイズハンドル */
#gridResizer {
  width: 6px;
  background: #333;
  cursor: col-resize;
  transition: background 0.2s;
}

#gridResizer:hover,
#gridResizer.resizing {
  background: #7c5cff;
}

/* 境目がつかめることを示す印（短い横棒3本）。左右のリサイズハンドル共通 */
#treeResizer,
#gridResizer {
  position: relative;
  flex-shrink: 0;   /* グリッドを広げきると、境目が幅 0 まで縮んでつかめなくなる */
  touch-action: none;   /* 指で引いた時に、ページのスクロールにしない（app.js は pointer で受ける） */
}

/* 指で使う画面: 6px の境目は指では当てにくいので、見た目はそのままで、つかめる所だけ両側へ 8px 広げる */
@media (pointer: coarse) {
  #treeResizer,
  #gridResizer { z-index: 5; }
  #treeResizer::before,
  #gridResizer::before {
    content: '';
    position: absolute;
    inset: 0 -8px;
  }
}
@media (pointer: coarse) and (max-width: 1200px) {
  /* 縦並びの時のグリッドの境目は横向きなので、上下へ広げる */
  #gridResizer::before { inset: -8px 0; }
}

#treeResizer::after,
#gridResizer::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 14px;
  transform: translate(-50%, -50%);
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0 2px, transparent 2px 6px);
  pointer-events: none;
}

#treeResizer:hover::after,
#treeResizer.resizing::after,
#gridResizer:hover::after,
#gridResizer.resizing::after {
  background: repeating-linear-gradient(to bottom, #fff 0 2px, transparent 2px 6px);
}

/* グリッドパネル（右） */
#gridPanel {
  width: 500px;   /* app.js の GRID_WIDTH_3COL（3 列の初めの幅）と同じ */
  min-width: 200px;
  max-width: 900px;
  flex-shrink: 0;
  background: var(--bg-panel-dark);
  border-left: 1px solid #333;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: width 0.2s, min-width 0.2s;
}

/* グリッドの右下に重ねる、先頭・1 画面上・1 画面下・末尾（app.js の gridJump）。場所を取らないので、ピッタリの段数は変わらない。右はスクロールバー（8px）を避ける */
#gridJump {
  position: absolute;
  right: 16px;
  bottom: 10px;
  z-index: 6;
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 8px;
  background: rgba(20, 20, 20, 0.85);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
#gridJump.shown { opacity: 1; pointer-events: auto; }
#gridJump button {
  width: 30px;
  height: 30px;
  padding: 3px;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}
#gridJump button:hover { background: rgba(255, 255, 255, 0.14); }
#gridJump img { width: 100%; height: 100%; display: block; }

/* グリッドの絵が埋まっていく進捗:ヘッダーのすぐ下（#main の一番上）に、窓の左右いっぱいで重ねる細い線（場所を取らないので、中身は動かない） */
#gridProgress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease-out;
}

#gridProgress.active {
  opacity: 1;
  transition: none;
}

#gridProgressBar {
  height: 100%;
  width: 0;
  background: var(--grid-progress);
  transition: width 0.25s ease-out;
}

/* 場面ごとのグリッドの割り方を、開く前に作っている間の幕（scene-prescan.js）。窓全体に掛けて、下の画面を押せなくする。
   上の端に左右いっぱいの紫の線（進み具合）、まん中に今の様子と「中止」 */
#scanCover {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  -webkit-user-select: none;
  user-select: none;
}

#scanCover.active {
  display: flex;
}

#scanCoverBar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(124, 92, 255, 0.25);
}

#scanCoverBar > div {
  height: 100%;
  width: 0;
  background: #7c5cff;
  transition: width 0.25s ease-out;
}

#scanCoverBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 20px 28px;
  background: var(--bg-panel);
  border: 1px solid #444;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  color: #e0e0e0;
  font-size: 14px;
}

#scanCoverStop {
  padding: 6px 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid #555;
  border-radius: 4px;
  color: #e0e0e0;
  font-size: 13px;
  cursor: pointer;
}

#scanCoverStop:hover {
  background: rgba(124, 92, 255, 0.35);
  border-color: #7c5cff;
}

#gridPanel.collapsed {
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden;
  border-left: none;
}

#gridControls {
  display: none;
}

/* ============================================================
   自作コントロールバー（組み込みcontrols全面置き換え・2026-08-16）
   オーバーレイ＋自動隠し。デザインはYouTube配列（上段シークバー/下段ボタン行）。
   モック承認済み: artifact 53781dc0 ============================================================ */
#controlBar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 5;
  background: linear-gradient(to top, rgba(6, 6, 12, 0.88) 0%, rgba(6, 6, 12, 0.55) 60%, transparent 100%);
  padding-top: 14px;
  opacity: 1;
  transition: opacity 0.22s;
  -webkit-user-select: none;
  user-select: none;   /* ダブルクリックやドラッグで、ボタンの文字や数字が反転しない */
}

/* 自動隠し: 再生中2.5秒無操作で #playerPanel に .cbar-idle が付く */
#playerPanel.cbar-idle #controlBar {
  opacity: 0;
  pointer-events: none;
}

#playerPanel.cbar-idle,
#playerPanel.cbar-idle #videoPlayer {
  cursor: none;
}

/* ---- シークバー行 ---- */
#seekRow {
  position: relative;
  height: 14px;
  display: flex;
  align-items: center;
  margin: 0 12px;
  cursor: pointer;
}

#seekTrack {
  position: absolute;
  left: 0; right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  transition: height 0.1s;
}

#seekFill {
  position: absolute;
  left: 0;
  height: 3px;
  width: 0%;
  background: #7c5cff;
  border-radius: 2px;
  transition: height 0.1s;
}

#seekThumb {
  position: absolute;
  left: 0%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #9678ff;
  transform: translateX(-50%) scale(0);
  transition: transform 0.1s;
  pointer-events: none;
}

/* 当たり判定を上下5px拡張（見た目は不変）。疑似要素は親のポインタイベントを受ける */
#seekRow::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -5px;
  bottom: -5px;
}

#seekRow:hover #seekTrack, #seekRow:hover #seekFill { height: 5px; }
#seekRow:hover #seekThumb { transform: translateX(-50%) scale(1); }

#seekTip {
  position: absolute;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 6px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: #e0e0e0;
  transform: translateX(-50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s;
}

/* フェーズ2: グリッドの既存サムネ(blobURL)を借りて表示。src未設定時は枠ごと消す */
#seekTipThumb {
  width: 338px;
  max-width: calc(100cqw - 32px);   /* プレーヤーが狭い時はバー幅に収める */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
  display: none;
}

#seekTipThumb[src] { display: block; }

#seekRow:hover #seekTip { opacity: 1; }

/* ---- ボタン行 ---- */
#controlsRow {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 44px;
  padding: 0 8px;
}

.cbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;   /* 行が詰まるとアイコン幅まで縮んで、ボタン同士がくっつく */
  width: 26px;
  height: 34px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #e0e0e0;
  cursor: pointer;
  font-size: 14px;
}

.cbar-btn:hover { background: rgba(255, 255, 255, 0.12); }
.cbar-btn:focus-visible { outline: 2px solid #7c5cff; outline-offset: -2px; }
.cbar-btn svg { width: 18px; height: 18px; fill: currentColor; }

/* 再生まわりは一回り大きく。再生ボタンが主役 */
#prevBtn, #nextBtn { width: 28px; }
#prevBtn svg, #nextBtn svg { width: 22px; height: 22px; }
#playBtn { width: 35px; height: 40px; color: #fff; }
#playBtn svg { width: 30px; height: 30px; }
#nextBtn { margin-right: 2px; }
/* ランダム再生: オンの間は紫のボタンに白抜き（app.js の paintShuffle） */
#shuffleBtn { margin-right: 5px; color: #9a9a9a; }
#shuffleBtn.on { color: #fff; background: #7c5cff; }
#shuffleBtn.on:hover { background: #8f73ff; }

/* プレーヤーが狭い時はボタンを潰さず、音量スライダー → 時刻の順に畳む */
#controlBar { container-type: inline-size; }
@container (max-width: 500px) {
  #volumeSlider, #volumeValue { display: none; }
}
@container (max-width: 380px) {
  #timeLabel { display: none; }
}

.cbar-spacer { flex: 1; }

#volumeControl { display: flex; align-items: center; gap: 8px; padding: 0 6px 0 2px; }

#volumeSlider {
  -webkit-appearance: none;
  appearance: none;
  width: 90px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.25); /* フィルはJSがgradientで上書き */
  cursor: pointer;
}

#volumeSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #e0e0e0;
  border: none;
}

#volumeValue {
  font-size: 11px;
  color: #8a8a96;
  width: 30px;
  font-variant-numeric: tabular-nums;
}

#timeLabel {
  font-size: 12px;
  color: #8a8a96;
  font-variant-numeric: tabular-nums;
  padding: 0 10px;
  user-select: none;
  white-space: nowrap;
}

#timeLabel b { color: #e0e0e0; font-weight: 500; }

#speedBtn {
  width: auto;
  padding: 0 10px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: #8a8a96;
}

#speedBtn:hover { color: #e0e0e0; }
#speedBtn.active { color: #9678ff; }

/* 速度メニュー（videoContextMenuと同じ土台・placeMenuInViewportで配置） */
#speedMenu {
  position: fixed;
  background: var(--bg-panel);
  border: 1px solid #333;
  border-radius: 4px;
  padding: 4px 0;
  z-index: 1000;
  min-width: 90px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

#speedMenu.hidden { display: none; }

/* ============================================================
   切り出しモード（clip-mode.js）。#playerPanel.clip-mode の間だけ #controlBar と入れ替わる。
   通常のシークバーと兼用しない: 範囲のつまみ2つ＋再生位置の線だけの専用バー ============================================================ */
#clipBar {
  display: none;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 5;
  background: linear-gradient(to top, rgba(6, 6, 12, 0.92) 0%, rgba(6, 6, 12, 0.7) 70%, transparent 100%);
  padding-top: 18px;
  container-type: inline-size;
  user-select: none;   /* バーの上のドラッグで文字が選択されると、次のドラッグが文字の掴みになって線が動かなくなる */
}

/* 切り出しバーは隠れないので、通常モードの自動隠し（カーソルを消す）も止める */
#playerPanel.clip-mode,
#playerPanel.clip-mode #videoPlayer { cursor: default; }

#playerPanel.clip-mode #clipBar { display: block; }
#playerPanel.clip-mode #controlBar { display: none; }

/* 再生位置（白い▶）はバーの上に載せる。バーの外に浮かせたら「つまみ」に見えて掴みに行ってしまった。
   範囲は橙の線2本。▶を掴めばシーク、線を掴めば範囲（どちらを掴むかは clip-mode.js が決める） */
#clipRow {
  position: relative;
  height: 24px;
  margin: 0 16px;
  cursor: pointer;
  touch-action: none;
}

#clipTrack {
  position: absolute;
  top: 9px;
  height: 6px;
  border-radius: 3px;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.22);
}

/* 残す所だけ橙（外す所は色が消えて、下の灰色の線が見える）。場面が 2 つ以上の時は、選んでいる場面に白い細枠 */
#clipKeep .clip-keep, #clipKeep .clip-sel {
  position: absolute;
  top: 9px;
  height: 6px;
}
#clipKeep .clip-keep { background: #ffb347; }
#clipKeep .clip-sel { box-sizing: border-box; top: 7px; height: 10px; border: 1px solid rgba(255, 255, 255, 0.7); }
/* グリッドで、出来上がりに入らないマス（外す所。clip-mode.js の paintGridOff） */
#gridContainer .vam-cell.clip-off { opacity: 0.28; filter: grayscale(1); }
#partAddBtn, #partRemoveBtn { width: 26px; height: 30px; color: #fff; font-size: 18px; }

/* ▶の左の辺が今の位置。大きさは clip-mode.js の CLIP_PLAYHEAD と揃える */
#clipPlayhead {
  position: absolute;
  top: 5px;
  z-index: 1;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 12px solid #fff;
  filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000);
  pointer-events: none;
}

/* 始点・終点は 2px の線。つかめる幅は線の左右 14px ずつ・高さは行いっぱい
   （どちらをつかむかは clip-mode.js が距離で決める。ここはカーソルと線の色のため） */
.clip-handle {
  position: absolute;
  top: 0;
  width: 28px;
  height: 24px;
  transform: translateX(-50%);
  cursor: ew-resize;
}

.clip-handle::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 13px;
  width: 2px;
  background: #ffb347;
}

.clip-handle:hover::after, .clip-handle.dragging::after { background: #fff; }

#clipControls {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 8px;
}

#clipPlayBtn { width: 40px; height: 40px; color: #fff; }
#clipPlayBtn svg { width: 30px; height: 30px; }

.clip-set, #clipSaveBtn {
  flex-shrink: 0;
  height: 30px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  color: #8a8a96;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.clip-set b {
  margin-left: 6px;
  color: #e0e0e0;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.clip-set:hover { background: rgba(255, 255, 255, 0.12); }

#clipSaveBtn {
  border-color: #ffb347;
  background: #ffb347;
  color: #1a1a22;
  font-weight: 600;
}

#clipSaveBtn:hover { background: #ffd08a; }
#clipSaveBtn:disabled { opacity: 0.4; cursor: default; background: #ffb347; }

#clipStatus {
  font-size: 12px;
  color: #8a8a96;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding: 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

#clipStatus.link { color: #ffb347; cursor: pointer; text-decoration: underline; }
#clipStatus.error { color: #ff6b6b; }

/* 切り抜く長さ。Start と End の間に置く。ボタンではない（押しても何も起きない）ので枠は付けず、
   ダブルクリックで入力できることは点線の下線で示す */
#clipLength {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 6px;
  font-size: 12px;
  color: #8a8a96;
  white-space: nowrap;
  cursor: text;
}

#clipLength b {
  margin-left: 6px;
  color: #ffb347;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px dashed rgba(255, 179, 71, 0.6);
}

#clipLength input {
  width: 72px;
  height: 22px;
  margin-left: 6px;
  padding: 0 4px;
  border: 1px solid #ffb347;
  border-radius: 4px;
  background: #1a1a22;
  color: #fff;
  font: inherit;
  font-variant-numeric: tabular-nums;
  outline: none;
}

/* プレーヤーが狭い時はボタンを潰さず、状態 → 「Start/Length/End」の文字 → 長さ の順に畳む */
@container (max-width: 600px) { #clipStatus { display: none; } }
@container (max-width: 480px) {
  .clip-word { display: none; }
  .clip-set { padding: 0 6px; }
  .clip-set b, #clipLength b, #clipLength input { margin-left: 0; }
}
@container (max-width: 380px) {
  #clipLength { display: none; }
  #clipControls { gap: 2px; }
  #partAddBtn, #partRemoveBtn { width: 18px; }
}

/* メニューは #playerPanel の中にあるので、自動隠しの cursor:none を継がせない */
#speedMenu,
#videoContextMenu {
  cursor: default;
}

/* v8.x: ⚙ Grid settings button — 右寄せのみ指定。
   見た目（高さ・padding・色・hover）は header アイコントグル統合ルールに集約。 */
#gridModeBtns {
  margin-left: auto;
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

/* 表示メニューを開くボタン（ヘッダーの「表示」） */
#header #gridModeBtns button {
  box-sizing: border-box;
  height: 28px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid #aaa;
  border-radius: 4px;
  color: #ddd;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}

#header #gridModeBtns button:hover {
  background: #3a3a3a;
  color: #fff;
}

#header #gridModeBtns button.active {
  color: #9678ff;
}

/* ボタンの間の区切り（｜）。細い縦の線で描く */
#header #gridModeBtns button { position: relative; }

#header #gridModeBtns button + button { margin-left: 5px; }

#header #gridModeBtns button + button::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: #555;
}

/* 並べ方のボタン（動画を探す・場面を探す・列モード）: 枠なしのアイコン。今の並べ方は白地に黒（反転）。間に区切りは入れない（「表示」との間だけ入る） */
#header #gridModeBtns button.layout-btn {
  width: 30px;
  padding: 4px;
  border-color: transparent;
}
#header #gridModeBtns button.layout-btn + button.layout-btn { margin-left: 6px; }
#header #gridModeBtns button.layout-btn + button.layout-btn::before { display: none; }
#header #gridModeBtns button.layout-btn img { width: 100%; height: 100%; display: block; opacity: 0.7; }
#header #gridModeBtns button.layout-btn:hover img,
#header #gridModeBtns button.layout-btn.active img { opacity: 1; }
#header #gridModeBtns button.layout-btn.active { background: #ddd; }
#header #gridModeBtns button.layout-btn.active img { filter: invert(1); }
#header #gridModeBtns button.layout-btn:disabled { cursor: default; background: transparent; }
#header #gridModeBtns button.layout-btn:disabled img { opacity: 0.25; }

/* Grid settings popup menu */
.grid-settings-menu {
  position: fixed;
  background: var(--bg-panel);
  border: 1px solid #444;
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  z-index: 10000;
  min-width: 200px;
  padding: 4px 0;
  -webkit-user-select: none;
  user-select: none;
}

/* 行間は 2026-10-10 に2割詰めた（項目が増えて縦に長くなったため。1行 約31px → 約25px） */
.grid-settings-section {
  padding: 4px 12px 1px;
  font-size: 11px;
  color: #a8a8a8;   /* 地（#333）とのコントラスト比 約5.3。#666 だと約1.9で読みづらかった（はしくん 2026-10-15）。項目（#e0e0e0）よりは一段暗く、見出しと分かる */
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.grid-settings-item {
  padding: 4px 16px;
  cursor: pointer;
  font-size: 13px;
  color: #e0e0e0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.grid-settings-item:hover {
  background: #2a2a3e;
}

.grid-settings-item.active::before {
  content: '✓';
  color: #b39dff;   /* シークバーと同じ #7c5cff は、地の #333 とのコントラストが 2.9 でうすかった。5.5 に上げる（はしくん 2026-10-24） */
  width: 12px;
  flex-shrink: 0;
}

.grid-settings-item:not(.active)::before {
  content: '';
  width: 12px;
  flex-shrink: 0;
}

/* ⚙ の中の、乗せると横（左）に開く項目（先読みのマーカー位置） */
.grid-settings-item.has-sub { position: relative; }
.grid-settings-item.has-sub::after { content: '◂'; margin-left: auto; color: #999; order: -1; position: absolute; left: 4px; }
.grid-settings-sub {
  display: none;
  position: absolute;
  right: 100%;
  top: -5px;
}
.grid-settings-item.has-sub:hover > .grid-settings-sub { display: block; }

/* 表示メニュー（ヘッダーの「表示」）: 選んでいる物はオレンジ（文字も ✓ も） */
.view-menu .grid-settings-item.active,
.view-menu .grid-settings-item.active::before {
  color: #ffa502;
}

.grid-settings-divider {
  height: 1px;
  background: #4a4a4a;   /* 地と同じ #333 だと見えなかった */
  margin: 3px 0;
}

#gridControls label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

#gridControls select {
  padding: 5px 10px;
  background: var(--bg-panel);
  color: #e0e0e0;
  border: 1px solid #333;
  border-radius: 4px;
  outline: none;
}

#gridContainer {
  flex: 1;
  overflow-y: auto;
  /* overflow-x: hidden がないと、マーカーが最終行の空セル領域へ到達した瞬間に
     グリッド幅がはみ出て横スクロールバーが一瞬出現→レイアウトが揺れてグリッドが微動する
     （WEB版の .grid-container には overflow-x: hidden がある。Electron移植時に欠落）。 */
  overflow-x: hidden;
  padding: 0;
}

/* v8.x: header のアイコントグル群（左端=ツリー開閉 ◀ / 右側=設定⚙・グリッド開閉▶）。
   #header プレフィックスで詳細度を #header button に勝たせ、box-sizing+固定 height で
   font-size 差に関係なく Open Folder ボタンと外形の高さを完全に揃える。 */
#header #treeToggleBtn,
#header #gridToggleBtn,
#header #gridSettingsBtn,
#header #devMergeBtn {
  box-sizing: border-box;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 10px;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
  flex-shrink: 0;
}

#header #treeToggleBtn:hover,
#header #gridToggleBtn:hover,
#header #gridSettingsBtn:hover,
#header #devMergeBtn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #e0e0e0;
}

#header #treeToggleBtn {
  width: 48px;
  padding: 0;
  border: none;
  opacity: 1;
  background: url('../assets/tree-toggle-close.png') center / contain no-repeat transparent;
}

#header #treeToggleBtn.collapsed {
  background-image: url('../assets/tree-toggle-open.png');
}

#header #treeToggleBtn:hover {
  background: url('../assets/tree-toggle-close.png') center / contain no-repeat #3a3a3a;
}

#header #treeToggleBtn.collapsed:hover {
  background-image: url('../assets/tree-toggle-open.png');
}

#header #gridToggleBtn {
  width: 48px;
  padding: 0;
  border: none;
  opacity: 1;
  background: url('../assets/grid-toggle-close.png') center / contain no-repeat transparent;
}

#header #gridToggleBtn.collapsed {
  background-image: url('../assets/grid-toggle-open.png');
}

#header #gridToggleBtn:hover {
  background: url('../assets/grid-toggle-close.png') center / contain no-repeat #3a3a3a;
}

#header #gridToggleBtn.collapsed:hover {
  background-image: url('../assets/grid-toggle-open.png');
}

#header #gridSettingsBtn {
  width: 36px;
  padding: 0;
  border: none;
  color: #ddd;
  font-size: 16px;
}

#header #gridSettingsBtn:hover {
  background: #3a3a3a;
  color: #fff;
}

#gridControls.hidden + #gridToggleBtn {
  margin-left: auto;
}

/* ユーティリティ */
.hidden {
  display: none !important;
}

#gridResizer.hidden {
  display: none;
}

/* スクロールバー */
::-webkit-scrollbar {
  width: 8px;
}

/* 左のツリーだけ半分の幅（はしくん 2026-10-10。カード表示で横が窮屈なので） */
#treeContainer::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: var(--bg-panel);
}

::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* 右のグリッドと左のツリーのつまみ（今どこを見ているか）は、地（#333）に溶け込まないよう少し明るく。目立ちすぎない程度（はしくん） */
#gridContainer::-webkit-scrollbar-thumb,
#treeContainer::-webkit-scrollbar-thumb {
  background: #606060;
}

#gridContainer::-webkit-scrollbar-thumb:hover,
#treeContainer::-webkit-scrollbar-thumb:hover {
  background: #777;
}

/* ===== レスポンシブ対応 ===== */

/* 縦長画面: グリッドを下部に配置 */
/* 1080pモニター縦置き（1080x1920）や一般的な縦型ディスプレイ対応 */
/* 横並びの時、グリッドの欄の高さはいつも自動（縦並びの時に app.js が書き込んだ高さが残っていても効かせない。
   残ると、グリッドが上の 4 割ほどに縮んだままになる） */
/* プレーヤーとグリッドの箱（index.html の #stage）。横並びの時は無いのと同じで、中身が #main の横の並びにそのまま入る */
#stage { display: contents; }

@media (min-width: 1201px) {
  #gridPanel { height: auto !important; }
}

@media (max-width: 1200px) {
  /* 縦並び: ツリーは左に置いたまま（前は上に重ねていた）、右の箱の中で「プレーヤーの下にグリッド」 */
  #stage {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
  }

  #playerPanel {
    flex: 1;
    min-width: 0;
    min-height: 200px;
  }

  #gridResizer {
    width: 100%;
    height: 6px;
    cursor: row-resize;
  }

  /* 縦並びの時は境目が横向きなので、印も横に並べる */
  #gridResizer::after {
    width: 14px;
    height: 4px;
    background: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.2) 0 2px, transparent 2px 6px);
  }

  #gridResizer:hover::after,
  #gridResizer.resizing::after {
    background: repeating-linear-gradient(to right, #fff 0 2px, transparent 2px 6px);
  }

  #gridPanel {
    width: 100% !important;
    max-width: none;
    min-width: 0;
    height: 40%;
    min-height: 150px;
    max-height: 60%;
    border-left: none;
    border-top: 1px solid #333;
  }

  #gridPanel.collapsed {
    height: 0 !important;
    min-height: 0 !important;
    border-top: none;
  }

}

/* スマホの幅の ☰ と、その中身（app.js の placeMobileHeader がボタンとファイル名をここへ移す） */
/* 広い幅では出さない。#header button（display: inline-flex）より強くするため、#header を付ける */
#header #mobileMenuBtn,
#mobileMenu { display: none; }

@media (max-width: 768px) {
  #header #mobileMenuBtn {
    display: inline-flex;
    margin-left: auto;
    background: none;
    color: #ccc;
    font-size: 18px;
    padding: 0 10px;
  }
  #header #mobileMenuBtn:hover { background: rgba(255, 255, 255, 0.1); }
  #mobileMenu.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    position: fixed;
    right: 6px;
    width: min(280px, calc(100vw - 12px));
    box-sizing: border-box;
    padding: 10px;
    background: var(--bg-panel);
    border: 1px solid #444;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
    z-index: 9000;   /* 中のボタンから開くメニュー（.grid-settings-menu の 10000）より下 */
  }
  #mobileMenu #currentFile {
    order: 0;
    flex: none;
    white-space: normal;
    word-break: break-all;
    padding: 0 2px 6px;
    border-bottom: 1px solid #333;
  }
  #mobileMenu #gridModeBtns { margin-left: 0; }
  #header #mobileMenu button,
  #header #mobileMenu #gridModeBtns button {
    width: 100%;
    height: 34px;
    justify-content: flex-start;
    font-size: 13px;
  }
  #mobileMenu #gridModeBtns { display: block; }
  /* 右の開閉は絵なので、メニューでは絵を左に置き、その右に説明を出す */
  #header #mobileMenu #gridToggleBtn,
  #header #mobileMenu #gridToggleBtn:hover {
    background-position: 14px center;
    border: none;
    padding-left: 48px;
  }
  /* ⚙ と ▶ は記号だけなので、横にボタンの説明（i18n.tip が入れる title）を出す */
  #header #mobileMenu #gridSettingsBtn::after,
  #header #mobileMenu #gridToggleBtn::after {
    content: attr(title);
    margin-left: 10px;
    font-size: 13px;
  }
}

/* 狭い画面: モバイル対応 */
@media (max-width: 768px) {
  #header {
    padding: 4px 8px;
    gap: 6px;
    flex-wrap: wrap;
  }

  #header button {
    padding: 4px 8px;
    font-size: 11px;
  }

  #breadcrumb {
    font-size: 11px;
    flex: 1;
    min-width: 100px;
  }

  #currentFile {
    font-size: 11px;
    flex-basis: 100%;
    order: 3;
  }

  /* ツリーを重ねていた頃は 85% の幅で開いていた。今は横に並べるので、ここで幅を広げない（右の箱がつぶれる） */

  #gridPanel {
    height: 35%;
  }

  #gridControls {
    gap: 4px 8px;
  }

  #gridControls label {
    font-size: 11px;
    gap: 4px;
  }

  #gridControls select {
    padding: 3px 6px;
    font-size: 11px;
  }

  #searchContainer {
    padding: 4px 8px;
  }

  #searchInput {
    padding: 4px 8px;
    font-size: 11px;
  }

  .tree-item {
    padding: 5px 8px;
    font-size: 12px;
  }
}

/* 非常に狭い画面 */
@media (max-width: 480px) {
  #gridControls label span {
    display: none;
  }

  #gridPanel {
    height: 30%;
    min-height: 120px;
  }

  #breadcrumb {
    display: none;
  }

  #currentFile {
    flex: 1;
    order: 0;
  }
}

/* =============================================
   V7.5: Critical Cell Overlay Styles
   ============================================= */

/* Base critical cell styling */
.vam-cell.critical {
  position: relative;
}

.vam-cell.critical::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  border: 3px solid;
  box-sizing: border-box;
}

/* Critical level: LOUD (red) */
.vam-cell.critical[data-critical-reason*="loud"]::before {
  border-color: #ff4757;
  box-shadow: inset 0 0 10px rgba(255, 71, 87, 0.3);
}

/* Critical level: FAST (blue) */
.vam-cell.critical[data-critical-reason*="fast"]::before {
  border-color: #3742fa;
  box-shadow: inset 0 0 10px rgba(55, 66, 250, 0.3);
}

/* Critical level: SUDDEN (orange) */
.vam-cell.critical[data-critical-reason*="sudden"]::before {
  border-color: #ffa502;
  box-shadow: inset 0 0 10px rgba(255, 165, 2, 0.3);
}

/* Multi-reason: LOUD + FAST (purple) */
.vam-cell.critical[data-critical-reason*="loud"][data-critical-reason*="fast"]::before {
  border-color: #a55eea;
  box-shadow: inset 0 0 10px rgba(165, 94, 234, 0.3);
}

/* Critical indicator badge */
.vam-cell.critical::after {
  content: attr(data-critical-badge);
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 11;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: bold;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

/* Hide badge if empty */
.vam-cell.critical[data-critical-badge=""]::after {
  display: none;
}

/* v8.x: Context Menu (ファイルツリー右クリック) */
.context-menu {
  position: fixed;
  background: var(--bg-panel);
  border: 1px solid #444;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  z-index: 10000;
  min-width: 180px;
  padding: 4px 0;
}

.context-menu .context-menu-item {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 13px;
  color: #e0e0e0;
  transition: background 0.1s;
  display: block;
}

.context-menu .context-menu-item:hover {
  background: #2a2a3e;
}

.context-menu .context-menu-item.danger {
  color: #ff6b6b;
}

.context-menu .context-menu-item.danger:hover {
  background: #3a2a2e;
}

/* ⚙ メニューの「オープンソース ライセンス」。同梱している他者のソフトの説明と使用許諾の全文を、画面に重ねて出す */
.licenses-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  z-index: 20001;
}

.licenses-box {
  width: min(720px, 90vw);
  max-height: 80vh;
  overflow: auto;
  padding: 16px 20px;
  background: var(--bg-panel);
  border: 1px solid #444;
  border-radius: 6px;
  color: #ccc;
  font: 12px/1.5 Consolas, monospace;
  white-space: pre-wrap;
  -webkit-user-select: text;
  user-select: text;
}

/* 警告の窓（app.js の askConfirm。⚙ の「キャッシュをクリア」） */
.confirm-box {
  width: min(440px, 90vw);
  padding: 18px 20px 14px;
  background: var(--bg-panel);
  border: 1px solid #444;
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6);
  color: #ddd;
  font-size: 13px;
  line-height: 1.6;
}
.confirm-title { margin-bottom: 8px; font-size: 15px; font-weight: 600; color: #f0c040; }
.confirm-title::before { content: '⚠ '; }
.confirm-body { white-space: pre-line; color: #bbb; }
.confirm-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.confirm-buttons button {
  min-width: 88px;
  padding: 6px 14px;
  border: 1px solid #555;
  border-radius: 4px;
  background: #2a2a36;
  color: #ddd;
  cursor: pointer;
}
.confirm-buttons button:hover { background: #363646; }
.confirm-buttons button.danger { background: #a3332a; border-color: #c0392b; color: #fff; }
.confirm-buttons button.danger:hover { background: #c0392b; }
/* 左端に寄せる、閉じないボタン（askConfirm の opts.extra。プライバシーポリシーを開く など） */
.confirm-buttons button.confirm-extra { margin-right: auto; }

/* 先読みプレビュー（preview-strip.js）。プレーヤーの下の帯（.band・その高さぶん動画を縮める）。全画面でも同じ */
#previewStrip {
  display: flex;
  background: #202020;   /* マスの間の線の色。上の辺の区切りと同じ（タイトルバーのグレー） */
  -webkit-user-select: none;
  user-select: none;
}
#previewStrip.band {
  position: relative;
  flex: none;
  width: 100%;
  z-index: 4;
}
/* 上の辺に、マスの間と同じ太さの区切り。色はダークモードのタイトルバーのグレー（黒は強すぎた）。動画の下の端に重ねる。帯の高さは変えない（はしくん 2026-10-18） */
#previewStrip.band::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -2px;   /* preview-strip.js の GAP */
  height: 2px;
  background: #202020;
  pointer-events: none;
}
#previewStrip .ps-view {
  position: relative;
  flex: none;
  overflow: hidden;
  cursor: pointer;
  touch-action: none;
}
/* 動画の全部のマスを一列に並べた列（2 本重ねる）。位置と透明度だけを変えるので、合成の係が動かす（preview-strip.js） */
#previewStrip .ps-cells {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  gap: 2px;   /* preview-strip.js の GAP */
  will-change: transform, opacity;
  pointer-events: none;
}
/* 絵がまだ来ていないマスはグレー。動画の終わりより後は列が無いので、帯の地の色（はしくん 2026-10-17） */
#previewStrip .ps-cell {
  flex: none;
  width: var(--ps-cw);
  background: #3a3a44;
  overflow: hidden;
}
#previewStrip .ps-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
#previewStrip .ps-cell img:not([src]) { visibility: hidden; }
/* 今のマスの、縦線より左（過ぎた分）に重ねるグレーの乗算（preview-strip.js の .ps-dim・はしくん 2026-10-25 試し中）。幅と位置は縦線に合わせて tick が決める。
   --ps-dim が乗算の色（#666666＝60%・#808080＝50%。明るいほど薄くかかる）。2 本の列より上（同じ z-index で後ろに置いた）・マーカーと縦線（.ps-mclip）より下 */
#previewStrip .ps-dim {
  --ps-dim: #666666;   /* 60% のグレー（はしくん 2026-10-25。50% は #808080） */
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  transform-origin: 0 0;   /* 埋まり具合は左を軸にした横の縮め（preview-strip.js の sweep） */
  will-change: transform;
  background: var(--ps-dim);
  mix-blend-mode: multiply;
  z-index: 1;
  pointer-events: none;
}
/* 今のマスは、グリッドと同じ赤い ▶ のシークマーカーを小さくして示す。左・中央は今のマスのまん中に止め、全幅移動は時刻に合わせて進める（はしくん 2026-10-17）。
   ドラッグ中は先読みの中を自由に動く（上下は指に付いてくる・時刻は左右の位置）。離すと元の所に戻る */
#previewStrip .ps-mclip {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
  will-change: transform;
  z-index: 2;   /* 2 本の列（z-index 0・1 を入れ替える）より上 */
}
#previewStrip .ps-marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  pointer-events: none;
  will-change: transform;
}
/* 今のマスの中を時刻に合わせて進む縦線。▶ の下を通る（試作 filmstrip_proto の線・はしくん 2026-10-18） */
#previewStrip .ps-line {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: #000;   /* 黒（白から試し中・はしくん 2026-10-25） */
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);   /* 黒い影（白い線の時と同じ） */
  pointer-events: none;
  will-change: transform;
}
/* 上の ▼・下の ▲ はやめた（縦線を目立たせるために付けていたが、過ぎた分をグレーで埋める .ps-dim で分かるようになった。はしくん 2026-10-25） */
/* 縦線は 1px に細くして残す（隠してみたら、暗い場面でグレーの境が見えなかった。はしくん 2026-10-25） */
#previewStrip .ps-line { width: 1px; margin-left: 0; }
#previewStrip .ps-marker svg { display: block; width: 100%; height: 100%; }
#previewStrip.band .ps-marker { width: 33px; height: 33px; }
#previewStrip.band .ps-view { flex: 1; }
/* 全画面の帯の分だけ、操作バー・カバー・回した動画を上へ */
#playerPanel.strip-band #videoPlayer { min-height: 0; }   /* 動画の元の高さより縮めてよい（無いと帯が画面の外へ押し出された） */
#playerPanel.strip-band #controlBar { bottom: calc(var(--strip-h) + 2px); }   /* 帯の上の区切り（2px）に操作バーの黒が重なって暗くならないよう、その上に出す */
#playerPanel.strip-band #pickCover { bottom: var(--strip-h); }
#playerPanel.strip-band #videoPlayer.turned {
  top: calc((100% - var(--strip-h)) / 2);
  width: calc(var(--panel-h) - var(--strip-h));
}

/* ============================================================
   グリッドを広げた時の配置（split-layout.js が #main に .split を付ける・はしくん 2026-10-19）
     P P P | G      P＝プレーヤー（高さは動画の比率から split-layout.js が決める）
     T S C | G      T＝ツリー（いつもと同じ見た目で、動画の行だけ出さない。検索窓・上の階層に戻る・お気に入りの行もここ）、
                    S＝カードの列数を変える境目、C＝いつものツリー（フォルダの行を隠してカードを並べる）
   ============================================================ */
#folderPanel,
#cardResizer,
#splitFoot { display: none; }

/* F＝T と C の下の線（#splitFoot。再生している動画の長さ・解像度・大きさと、並べ替えの ☰） */
#main.split {
  display: grid;
  grid-template-columns: var(--split-tw) 6px var(--split-cw) 6px auto;
  grid-template-rows: var(--split-ph) minmax(0, 1fr) 28px;
  grid-template-areas:
    "P P P GR G"
    "T S C GR G"
    "F F F GR G";
}
#main.split #splitFoot {
  grid-area: F;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 6px 0 12px;
  background: #2b2b2c;   /* 検索窓の行と同じ色 */
  border-top: 1px solid #333;
  color: #9a9a9a;
  font-size: 12px;
}
/* C の上のタブ（split-tabs.js）。探索モードだけ。検索窓は検索のタブの時だけ出す。T のお気に入りの行は、お気に入りのタブがあるので出さない */
#splitTabs { display: none; }
#main.split #splitTabs {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 36px;
  padding: 0 6px;
  background: #1c1c1d;   /* タブより暗くして、タブの形が浮いて見えるように */
  border-bottom: 1px solid #333;
  flex-shrink: 0;
}
#main.split:not(.tab-search) #searchContainer { display: none; }
#main.split #folderTree .fav-zone { display: none; }
#splitTabs .tab-folders {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
#splitTabs .tab-folders::-webkit-scrollbar { display: none; }
#splitTabs .split-tab {
  height: 28px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border-radius: 6px 6px 0 0;
  color: #9a9a9a;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}
#splitTabs .split-tab {
  position: relative;
  height: 29px;
  margin-bottom: -1px;   /* 下の線に重ねる */
  background: #242425;
  border: 1px solid #2e2e2f;
  border-bottom-color: #333;
  font-size: 12.5px;
  color: #6e6e6e;        /* 開いていないタブは、地に近い暗い字（はしくん 2026-10-25） */
}
#splitTabs .split-tab:hover { background: #2c2c2d; color: #a8a8a8; }
/* 開いているタブ: 明るい地・白い太字・印は橙（ほかのタブは暗い地・暗い字・灰色の印） */
#splitTabs .split-tab.active {
  background: #3c3c3e;
  border-color: #4a4a4c;
  border-bottom-color: #3c3c3e;
  color: #fff;
  font-weight: 600;
}
#splitTabs .tab-folder { flex: 0 1 170px; min-width: 80px; }
#splitTabs .tab-icon { width: 14px; height: 14px; flex-shrink: 0; fill: #5e5e5e; }
#splitTabs .split-tab.active .tab-icon { fill: #f8b830; }
#splitTabs .tab-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#splitTabs .tab-close { width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 3px; color: #888; font-size: 13px; }
#splitTabs .tab-close:hover { background: #4a4a4a; color: #fff; }
#splitTabs .split-tab:not(.active):not(:hover) .tab-close { visibility: hidden; }   /* × は開いているタブと、乗せたタブだけ（並ぶとうるさい） */
#splitTabs .tab-fav, #splitTabs .tab-history, #splitTabs .tab-search { width: 34px; justify-content: center; padding: 0; }
/* 再生履歴の印: 絵（assets/tab-history.png）を型にして、字の色で塗る（ほかのタブの印と同じ濃さ・開いている時は橙） */
#splitTabs .tab-mask {
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("../assets/tab-history.png") center / contain no-repeat;
  mask: url("../assets/tab-history.png") center / contain no-repeat;
}
#splitTabs .tab-history.active .tab-mask { background: #f8b830; }
#splitTabs .tab-star { font-size: 14px; }
#splitTabs .tab-fav.active .tab-star { color: #f8b830; }
#splitTabs .tab-search.active svg { fill: #f8b830; }   /* 開いている時はフォルダ・★ と同じ橙 */
#splitTabs .tab-search svg { width: 16px; height: 16px; fill: currentColor; }
#splitTabs .split-tab.disabled { opacity: 0.35; pointer-events: none; }
/* ドラッグで並べ替え: 掴んだタブは薄く、入る所に橙の縦線 */
#splitTabs .tab-folder.dragging { opacity: 0.4; }
#splitTabs .tab-folder.drop-before { box-shadow: inset 2px 0 0 #f8b830; }
#splitTabs .tab-folder.drop-after { box-shadow: inset -2px 0 0 #f8b830; }

#footMeta { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#splitFoot #sortBtn {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 4px 6px;
}
#splitFoot #sortBtn:hover { color: #ddd; }

#main.split #playerPanel { grid-area: P; min-width: 0; }

/* プレーヤーをグリッドの上に置く（動画の右クリック。split-layout.js が .p-right を付ける）: 左の列は上から下まで T と C */
#main.split.p-right {
  grid-template-areas:
    "T S C GR P"
    "T S C GR G"
    "F F F GR G";
}
#main.split #gridResizer { grid-area: GR; }
#main.split #gridPanel { grid-area: G; }
#main.split #treeResizer { display: none; }
#main.split #treePanel {
  grid-area: C;
  width: auto !important;
  min-width: 0 !important;
  max-width: none;
  border-top: 1px solid #333;
}

#main.split #folderPanel {
  grid-area: T;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg-panel-dark);
  border-top: 1px solid #333;
}

#folderTree {
  flex: 1;
  padding: 10px;   /* いつものツリー（#treeContainer）と同じ。お気に入りの区画（.fav-zone）の負の余白もこれに合わせてある */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-user-select: none;
  user-select: none;
}

#main.split #cardResizer {
  grid-area: S;
  display: block;
  position: relative;
  background: #333;
  cursor: col-resize;
  touch-action: none;
  transition: background 0.2s;
}

#main.split #cardResizer:hover,
#main.split #cardResizer.resizing { background: #7c5cff; }

/* C: 開いたフォルダの中身は出さない（フォルダはカードで出し、押すとその中へ移る。split-layout.js） */
#main.split #treeContainer .tree-children:not(.fav-children),
#main.split #treeContainer .fav-zone { display: none; }

/* カードを、決まった幅（split-layout.js の CARD_W）で横に並べる。C の幅はカードの列数ぶん（split-layout.js） */
#main.split #treeContainer.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--card-w));
  gap: var(--card-gap);
  align-content: start;
}

#main.split #treeContainer.cards { scrollbar-gutter: stable; }

/* 検索のタブで語が空の時: C は空（split-tabs.js の search-empty） */
#main.split.search-empty #treeContainer > * { display: none !important; }

/* カード以外（お気に入りの区画・もっと表示・読み込み中）は、横いっぱいの 1 行 */
#main.split #treeContainer.cards > :not(.tree-item) { grid-column: 1 / -1; }
/* お気に入りの中に入った時: 中身の入れ物は無いのと同じにして、カードを C の並びにそのまま入れる（入れ物の字下げでカードが 1 列減っていた） */
#main.split #treeContainer.cards .fav-children { display: contents; }

/* カードは、サムネの下に名前（ツリーが細い時の並びと同じ） */
#main.split #treeContainer.cards .tree-item.video {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 4px !important;
}

#main.split #treeContainer.cards .tree-item.video .tree-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 1.52;
}

#main.split #treeContainer.cards .tree-item.video .tree-thumb[data-rot]::before {
  left: 50%;
  top: calc((100% - 16px) / 2);
  width: 56.25%;
  height: 152%;
}

#main.split #treeContainer.cards .tree-item.video .tree-thumb[data-rot="180"]::before {
  width: 100%;
  height: calc(100% - 16px);
}

/* C のフォルダのカード: 動画のカードと同じ大きさの枠に、フォルダの絵。名前と本数はその下 */
#main.split #treeContainer.cards .tree-item.folder {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 4px !important;
}

#main.split #treeContainer.cards .tree-item.folder::before,
#main.split #treeContainer.cards .tree-item.folder.expanded::before {
  content: '📁';
  width: 100%;
  aspect-ratio: 1.52;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  font-size: 40px;
  border-radius: 3px;
  background: #15151f;
}

#main.split #treeContainer.cards .tree-item.folder .tree-count {
  margin-left: 0;
  padding-left: 0;
}

/* 埋めた割り方を、つまみで変えた幅で出す時（app.js の applyFitRows）: マスの高さを欄の高さ ÷ 段数にする。絵は上下を切って収まる */
#gridContainer.search { scrollbar-gutter: stable; }   /* 探索モード: スクロールバーの幅をいつも空けておく（app.js の applyLayoutStyles） */

#gridContainer.fit-rows .vam-cell {
  aspect-ratio: auto !important;
  height: var(--fit-cell-h) !important;
}

/* 押せない項目（⚙ の「再生中一列で表示」を、グリッドを広げた時の配置の間） */
.grid-settings-item.disabled,
.grid-settings-subhead.disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* 「表示」メニューの探索モード: 見出し（押せない）と、その下の字下げした 2 つ（動画を探す・場面を探す） */
.grid-settings-subhead {
  padding: 6px 12px 2px;
  color: #ccc;
  font-size: 13px;
  cursor: default;
}

.grid-settings-item.indent { padding-left: 36px; }