/* =====================================================
   difvisu / watch CSS（完全保持・整形のみ版）

   方針【重要】
   - 元CSSから selector / property を一切削除しない
   - 値の変更・統合・最適化はしない
   - 並び替え + コメント付与のみ
   - 各 selector は 1行表記
   - 同一 selector が複数回出てきても【そのまま残す】

   ＝ 動作は元CSSと同一 ＝
   ===================================================== */

/* =====================================================
   1. 基本スタイル / フォント
   ===================================================== */
h1{color:#fff;font-size:120%}
h2{color:#fff;font-size:120%;}
p{color:#fcfff9;}
a{text-decoration:none;word-break:break-all;color:#a0a0a0;}
a:hover{text-decoration:underline;color:#404040;}
img{border-radius:4px;}
canvas{display:none;}

/* =====================================================
   2. ヘッダー / ロゴ / テキスト系
   ===================================================== */
.logo{width:24px;}f
.logo-link{display:inline-flex;align-items:center;gap:6px;flex:none;width:fit-content;padding:4px 2px;}
#channel-description{white-space:pre-line;}
#about-description{white-space:pre-line;}
#title1{white-space:pre;padding:4px 0 4px 0;color:#e7e7e7;}
#insertText{white-space:pre;margin-right:auto;font-size:20px;color:#e7e7e7;}
.vislabel{display:flex;}

/* === 視聴履歴 / 共通リンク補助 === */
.thumb-link{display:block;width:100%;}
.chh-link{display:inline-flex;align-items:center;}
#watch_header{flex:1;min-width:0;}
.header-inner{display:flex;align-items:center;width:100%;padding:4px 0px 4px 0px;}
.header-left{display:flex;align-items:center;gap:6px;line-height:1;}
#search-box{min-width:0;padding:6px 10px;background:#222;color:#eee;border:1px solid #444;border-radius:4px;outline:none;}
.header-right{flex:0 0 auto;}
.search-area{flex:1;min-width:0;max-width:420px;margin:0 auto;}
.header-left{display:flex;align-items:center;gap:6px;line-height:1;}
.navi-toggle{display:flex;align-items:center;line-height:1;}
.logo-link span{line-height:1;}
/* =====================================================
   3. コピー / 操作系
   ===================================================== */
.video-id-copy{cursor:pointer;color:#4fa3ff;}
.video-id-copy.copied{color:#8cff8c;text-decoration:none;}

/* =====================================================
   4. Video.js / プレイヤー制御（保険指定含む）
   ===================================================== */
.video-js .vjs-tech video{width:100%!important;height:100%!important;object-fit:contain!important;display:block!important;margin:0 auto!important;}
.video-container{position:relative;width:100%;aspect-ratio:16/9;}
.video-js{width:100%!important;height:100%!important;position:relative!important;border-radius:6px;}
.video-js .vjs-tech{width:100%!important;height:100%!important;object-fit:contain!important;border-radius:6px;}
.vjs-time-display{display:inline-block;vertical-align:middle;line-height:1;margin-left:10px;color:white;}
.vjs-playback-rate .vjs-playback-rate-value{font-size:100%;display:grid;align-items:center;}

/* =====================================================
   5. スクロールバー（body + 全体）
   ===================================================== */
body ::-webkit-scrollbar{width:4px;height:4px;}
body ::-webkit-scrollbar-thumb{background:#ff0000;border-radius:5px;}
body ::-webkit-scrollbar-track{background:rgba(0,0,0,0.5);}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:#1f1f1f;border-radius:5px;}
::-webkit-scrollbar-track{background:rgba(0,0,0,0.5);}

/* =====================================================
   6. ポップアップ
   ===================================================== */
.open{cursor:pointer;}
#popup{display:none;}
.overlay{display:none;}
#popup:checked + .overlay{display:block;position:fixed;top:0;left:0;width:100%;height:100vh;background-color:#00000070;}
.window{display:flex;justify-content:center;align-items:center;position:fixed;top:50%;left:50%;width:32%;height:18%;transform:translate(-50%,-50%);background-color:rgba(32,32,32,0.8);padding:8px;border-radius:8px;}
.text{margin:0;font-size:25px;color:#fcfff9;}
.close{position:absolute;top:12px;right:16px;font-size:120%;cursor:pointer;}

/* =====================================================
   7. 汎用ブロック / テキスト
   ===================================================== */
.bodydiv{width:100%;background-color:#202020;padding:4px;border-radius:4px;}
.float{float:left;margin:4px;font-size:80%;background-color:#212121;}
.sideblock{display:block;float:left;}
.flomo{margin:8px;font-size:94%;color:#e7e7e7;}
.flll{margin-right:8px;}
.flomo a{color:#ababab;}
.sidate{margin:0px;font-size:64%;color:#606060;}
.descriptions{display:inline;font-size:80%;color:#fff;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:10;/* ★ ここが行数 */line-clamp:10;overflow:hidden;line-height:1.6em;max-height:calc(1.6em * 10);/* ★ 10行 */}
.descriptions.expanded{max-height:none;}
.descriptions:not(.expanded)::after{content:"";display:block;height:2em;margin-top:-2em;background:linear-gradient(transparent,#212121);}
.descriptions p{margin:4px 0 4px 0;}
.descriptions.expanded{-webkit-line-clamp:unset;line-clamp:unset;display:block;}
.desc-toggle{margin-top:6px;background:none;border:none;color:#4da3ff;cursor:pointer;font-size:0.9em;}
.desc-toggle:hover{text-decoration:underline;}

/* =====================================================
   8. チャンネル / タグ / カテゴリ
   ===================================================== */
.chhname{display:inline;font-size:80%;text-decoration:none;word-break:break-all;color:#bfbfbf;}
.chhname:hover{text-decoration:underline;color:#606060;}
#chhname{margin:0px 0px 0px 4px;}
.chhpass{align-items:center;text-decoration:none;word-break:break-all;color:#bfbfbf;}
.chhpass:hover{text-decoration:underline;color:#606060;}
#chhpass{display:inline-flex;align-items:center;width:fit-content;}
.tag-box{font-size:80%;}
.category-box{font-size:13px;color:#aaa;margin:4px 0;}
.category-box .cat-sep{margin:0 6px;opacity:.6;}
.category-box span:hover{color:#6cf;cursor:pointer;}

/* =====================================================
   9. グリッド / カード
   ===================================================== */
#video-grid, .video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,320px));gap:24px;justify-content:center;}
#tag-grid{display:grid;gap:22px;padding:12px;justify-content:center;}
.video-card{width:100%;color:#fff;border-radius:4px;overflow:hidden;transition:transform .18s ease, box-shadow .18s ease;}
.video-card:hover{transform:translateY(-4px);box-shadow:0 6px 18px rgba(0,0,0,.4);}

/* =====================================================
   10. サムネ / メタ（一覧・履歴 共通）
   ===================================================== */

/* === サムネ：16:9 強制（検証用・最強） === */
.thumb-wrapper{position:relative;width:100%;aspect-ratio:16 / 9;background:#000;overflow:hidden;}
.thumb-wrapper img.thumb{width:100% !important;height:100% !important;object-fit:contain !important;transform:none !important;}
.thumb-wrapper img.thumb{width:100%;height:100%;object-fit:cover;transition:transform .25s ease;}
.thumb-wrapper:hover img.thumb{transform:scale(1.06);}
.thumb{width:100%;height:auto;display:block;border-radius:4px;} /* 視聴履歴用（wrapper無し想定） */
.audio-poster-wrap{position:relative;width:100%;border-radius:4px;} /* music用 - music.htmlより */
.audio-poster{width:100%;display:block;border-radius:4px;} /* music用 - music.htmlより */
.duration{position:absolute;bottom:6px;right:6px;font-size:64%;padding:2px 6px;background:rgba(0,0,0,.75);color:#fff;border-radius:4px;}
.video-meta{display:flex;align-items:flex-start;margin-top:10px;}
.chh-icon{width:36px;height:36px;margin-right:10px;object-fit:cover;border-radius:4px;}
.meta-text{flex:1;}
.meta-text .title{margin:0 0 4px 0;font-size:14px;font-weight:600;line-height:1.4em;color:#fff;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
.meta-text .channel{margin:0;font-size:13px;color:#aaa;}
.meta-text .date{margin:2px 0 0 0;font-size:12px;color:#777;}
.poster-wrap{position:relative;width:100%;aspect-ratio:16 / 9;background:#000;overflow:hidden;}
.poster-wrap img#poster{width:100% !important;height:100% !important;object-fit:contain !important;transform:none !important;}

/* =====================================================
   10.5 サイドバー（Side Item）※重要：一覧とは別レイアウト
   ===================================================== */
.side-item{display:flex;gap:6px;}
.side-thumb-wrapper{position:relative;width:150px;}
.side-thumb{width:100%;border-radius:6px;object-fit:cover;aspect-ratio:16/9;background:#000;}
.side-thumb-wrapper img.side-thumb{width:100% !important;height:100% !important;object-fit:contain !important;transform:none !important;}
.side-duration{position:absolute;right:6px;bottom:10px;background:rgba(0,0,0,.7);color:#fff;padding:2px 6px;border-radius:3px;font-size:64%;}
.side-info{flex:1;min-width:0;}
.side-title{margin:0 0 4px 0;font-size:75%;font-weight:400;color:#fff;line-height:1.3em;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;/* ← 行数 */overflow:hidden;}
.side-title:hover{text-decoration:underline;color:#808080;}
.side-channel{display:inline-flex;align-items:center;width:fit-content;flex:none;margin-top:0px;gap:6px;}
.side-ch-icon{width:24px;height:24px;border-radius:10%;}
.side-ch-name{font-size:70%;text-decoration:none;word-break:break-all;color:#bfbfbf;}
.side-ch-name:hover{text-decoration:underline;color:#606060;}

/* =====================================================
   11. ヘッダー / 検索 / ソート（重要UI）
   ===================================================== */
.logo-link{position:relative;z-index:10;}
#search-results{position:absolute;top:36px;left:0;width:100%;max-height:250px;overflow-y:auto;background:#111;border:1px solid #444;border-radius:4px;display:none;z-index:9999;}
#tag-title{font-size:100%;width:100%;}
#search-title{width:100%;font-size:100%;}
#sort-area{display:flex;justify-content:flex-end;padding:6px 10px;}
.sort-box{background:#222;color:#fff;border:1px solid #444;padding:4px 8px;border-radius:4px;cursor:pointer;}
#tag-title{font-size:100%;}

/* =====================================================
   12. オーバーレイ / ABループ / コントロール
   ===================================================== */
.menu-btn{position:absolute;top:6px;right:6px;cursor:pointer;font-size:20px;color:white;background:rgba(0,0,0,.55);padding:2px 6px;border-radius:6px;user-select:none;z-index:5;}
.menu-btn:hover{background:rgba(0,0,0,.85);}
.seek-overlay-left{position:absolute;top:50%;left:40px;transform:translateY(-50%);font-size:200%;color:white;padding:8px 16px;background:rgba(0,0,0,.2);border-radius:8px;opacity:0;pointer-events:none;z-index:99999;}
.seek-overlay-right{position:absolute;top:50%;right:40px;transform:translateY(-50%);font-size:200%;color:white;padding:8px 16px;background:rgba(0,0,0,.2);border-radius:8px;opacity:0;pointer-events:none;z-index:99999;}
.speed-overlay{position:absolute;top:20px;right:20px;font-size:200%;color:white;padding:8px 16px;background:rgba(0,0,0,.2);border-radius:8px;opacity:0;pointer-events:none;transform:translateY(-10px);z-index:99999;}
.vjs-ab-loop-bar{position:absolute;top:0;height:100%;background:rgba(0,190,255,.5);pointer-events:none;z-index:10;display:none;}
.vjs-controls-hidden .vjs-control-bar{opacity:0!important;visibility:hidden!important;transition:opacity .12s linear;}
.vjs-control-bar{transition:opacity .12s linear;display:flex;align-items:center;font-size:120%;}

.archive-info{margin-top:16px;font-size:12px;opacity:0.85;}
.archive-info summary{cursor:pointer;font-weight:bold;margin-bottom:6px;color:#fff;}
.m3u8-view{background:#111;color:#ccc;padding:10px;border-radius:6px;overflow-x:auto;white-space:pre;font-family:Consolas, monospace;}
.m3u8-view{ max-width:100%; box-sizing:border-box;}
.hls-meta{display:flex;color:#fff;}
.jump-time{color:rgb(79, 163, 255);}
#desc-details{margin-top:8px;}
#desc-details summary{cursor:pointer;font-weight:bold;user-select:none;color:#fff;font-size:80%;}
.meta-row{display:flex;justify-content:space-between;align-items:center;/* ← これが本命 */}
.mode-switch{margin-left:auto;display:flex;gap:6px;}
.mode-btn{padding:2px 8px;font-size:12px;border-radius:6px;background:#222;color:#aaa;text-decoration:none;display:inline-flex;align-items:center;gap:6px;line-height:1;}
.maincontents main > div[style*="justify-content:space-between"]{align-items:center;}
.mode-btn.active{background:#4fa3ff;color:#000;}
.parent-label{color:#fff;font-size:80%;}
.parent-items{display:flex;flex-wrap:wrap;gap:8px;}
#notes{white-space:pre-wrap;color:#fff;font-size:80%;}
.mode-btn .icon{display:inline-flex;align-items:center;transform:translateY(-1px);}
.side-section{width:100%;color:#bfbfbf;font-size:70%;text-align: center;display:none;}
.channel-item{display:flex;align-items:center;gap:8px;padding:6px 8px;cursor:pointer;opacity:0.85;}
.channel-item:hover{opacity:1;background:rgba(255,255,255,0.05);}
.channel-item .count{margin-left:auto;font-size:0.75em;opacity:0.6;}
.channel-item img{width:20px;height:20px;border-radius:4px;}
.channel-item[data-count="0"]{opacity:0.4;}
.channel-item:hover::after{color:#fff;content:attr(data-count) " videos";position:absolute;right:8px;font-size:0.7em;opacity:0.6;}
.count{font-size:13px;color:#fff;}

/* =============================== index 専用：navi + amain レイアウト修正 =============================== */
.indexnaviamain .navi-ch-name{word-break:normal !important;overflow-wrap:break-word;white-space:normal;}
.indexnaviamain .side-section{width:auto;}
.navi-ch-name{font-size:13px;color:#bfbfbf;word-break:normal;/* ★ 1文字分割を止める */overflow-wrap:break-word;/* ★ 日本語は自然改行 */white-space:normal;/* ★ 縦並び防止 */}
.indexnaviamain{display:flex;align-items:flex-start;gap:16px;}

/* 左：チャンネルナビ */
.indexnaviamain > navi{width:16%;flex-shrink:0;position:sticky;height:calc(100vh - 64px);overflow-y:auto;}

/* 右：動画一覧（重要） */
.indexnaviamain > amain{flex:1;/* ★ これが無いと死ぬ */min-width:0;/* ★ Grid 崩壊防止の最重要行 */}

/* grid がちゃんと横に広がるように */
.indexnaviamain #video-grid{width:100%;justify-content:center;/* center をやめる */}
.navi-toggle{background:none;border:none;color:#e7e7e7;font-size:28px;cursor:pointer;}
.navi-toggle{line-height:1;display:flex;align-items:center;}

#channel-nav{padding:8px;}
#watch-navi-overlay{position:fixed;inset:0;z-index:500;display:none;}
#watch-navi-overlay.active{display:block;}
#watch-navi-overlay .overlay-bg{position:absolute;inset:0;background:rgba(0,0,0,0.5);}
#watch-navi-overlay .overlay-panel{position:absolute;left:0;top:0;width:300px;height:calc(100dvh - 40px);background:#181818;overflow-y:auto;padding-top:48px;}

/* =============================== Navi : Categories =============================== */
.navi-categories{margin-top:16px;padding-top:8px;}

/* ---- Group ---- */
.navi-category-group{margin-bottom:10px;}
.navi-category-group-title{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;font-size:13px;font-weight:600;color:#f0f0f0;background:rgba(255,255,255,0.04);border-left:3px solid #4da3ff;}

/* ---- Category item ---- */
.navi-category-item{display:flex;justify-content:space-between;align-items:center;padding:5px 8px 5px 16px;font-size:12px;color:#cfcfcf;cursor:pointer;position:relative;}

/* 階層感を出すためのガイド */
.navi-category-item::before{content:"›";position:absolute;left:6px;color:#666;font-size:12px;}

/* hover */
.navi-category-item:hover{background:rgba(255,255,255,0.06);}

/* ---- 数字（共通） ---- */
.navi-category-group-title .count, .navi-category-item .count{margin-left:auto;font-size:11px;color:#aaa;min-width:32px;text-align:right;}

/* =============================== Navi : Footer =============================== */
.navi-footer{margin-top:14px;padding:10px 6px;font-size:11px;color:#888;text-align:center;}
.navi-footer-sep{border:none;border-top:1px solid #333;margin:8px 0;}
.navi-footer-inner{line-height:1.6;}
.share-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);display:none;z-index:2000;}
.share-overlay.active{display:block;}
.share-window{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:420px;width:calc(100% - 32px);background:#202020;border-radius:12px;padding:12px;}
.share-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.share-title{margin:0;font-size:16px;color:#e7e7e7;}
.share-close{background:none;border:none;color:#ccc;font-size:18px;cursor:pointer;padding:4px;border-radius:6px;}
.share-close:hover{background:rgba(255,255,255,0.08);color:#fff;}
.share-btn{background:none;border:none;display:inline-flex;/* ← 重要 */align-items:center;/* ← 重要 */padding:0;/* ← 重要 */line-height:0;/* ← 決定打 */}
.share-btn img{display:block;}
#shortcut_buttonee{display:flex;/* ← これが本命 */align-items:center;/* ← 行高基準を破壊 */}

.touch-overlay{position:absolute;inset:0;z-index:30;pointer-events:none;}
@media (pointer:coarse){ .touch-overlay{pointer-events:auto;}}

/* UI表示中はジェスチャー無効 */
.touch-overlay { pointer-events:none; }
.touch-ui.playpause { pointer-events:auto; }
.ui-layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.touch-ui.playpause{pointer-events:auto;font-size:64px;color:#fff;opacity:0;transition:opacity .2s;}
.touch-overlay.show-ui .touch-ui.playpause{opacity:1;}
#history-list{ display:grid; grid-template-columns: gap:24px; justify-content:center; padding:12px;}
.channels-video-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:24px;justify-content:center;padding: 12px;}

.preview-box {background:rgba(0,0,0,.0);}
.preview-box { position:absolute; bottom:64px; width:192px; height:108px; border:2px solid #fff; border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,.8); pointer-events:none; display:none; z-index:2; background-color: rgba(0,0,0,1);}
#preview-img { position: relative; width:100%; border-radius:4px; aspect-ratio:16/9; overflow:hidden; object-fit:contain;}

.video-js.vjs-user-inactive .vjs-control-bar { transition: none !important; opacity: 0 !important;}
.video-js.vjs-paused .vjs-control-bar {
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: none !important;
}