/* YouTube 同時視聴。スレのヘッダーとレス一覧の間に動画を固定で置く(js/viewer-watch.js)。 */

/* スレ表示は「ヘッダー / レス / 書き込み欄」の3行グリッド。視聴中だけ動画の行を1つ足す。
   ヘッダーの高さは行の指定で決まっていたので、行を auto にする代わりに min-height で保つ */
.thread-view.thread-view.has-watch { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.thread-view.has-watch .thread-header { min-height: 48px; }
.thread-view.chat-mode.has-watch .thread-header { min-height: 42px; }

.watch-button { flex: none; height: 32px; padding: 0 10px; border: 1px solid var(--viewer-border, var(--line)); border-radius: 5px; background: transparent; color: var(--viewer-muted, var(--muted)); font-size: .72rem; line-height: 1; white-space: nowrap; cursor: pointer; }
.watch-button > span + span { margin-left: 5px; }
.watch-button.live { border-color: currentColor; color: var(--accent-text, var(--accent)); font-weight: 600; }
.watch-button.open { border-color: var(--accent-text, var(--accent)); background: var(--accent-text, var(--accent)); color: var(--surface); font-weight: 600; }

.watch-panel { min-width: 0; border-bottom: 1px solid var(--viewer-border, var(--line)); background: var(--surface); }
.watch-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: min(480px, 46dvh); background: #000; }
.watch-panel.compact .watch-stage { max-height: min(150px, 22dvh); }
.watch-player { position: absolute; inset: 0; }
.watch-player > * { display: block; width: 100%; height: 100%; border: 0; }
.watch-overlay { position: absolute; top: 10px; left: 10px; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 20px); }
.watch-unmute { height: 36px; padding: 0 14px; border: 0; border-radius: 18px; background: rgba(255, 255, 255, .94); color: #111; font-size: .8rem; font-weight: 600; cursor: pointer; box-shadow: 0 1px 6px rgba(0, 0, 0, .45); }
.watch-stuck { margin: 0; padding: 8px 12px; border-radius: 18px; background: rgba(0, 0, 0, .78); color: #fff; font-size: .74rem; line-height: 1.4; }

.watch-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 12px; font-size: .72rem; line-height: 1.5; color: var(--viewer-muted, var(--muted)); }
.watch-bar strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.watch-bar .watch-spacer { flex: 1 1 0; min-width: 0; }
.watch-panel button.watch-action { height: 30px; padding: 0 10px; border: 1px solid var(--viewer-border, var(--line)); border-radius: 5px; background: var(--surface); color: var(--text); font-size: .72rem; white-space: nowrap; cursor: pointer; }
.watch-panel button.watch-action:disabled { opacity: .5; cursor: default; }
.watch-panel button.watch-action.primary { border-color: var(--accent-text, var(--accent)); background: var(--accent-text, var(--accent)); color: var(--surface); font-weight: 600; }
.watch-panel button.watch-action.danger { color: var(--danger); }

.watch-start { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 6px 8px; align-items: center; padding: 10px 12px; }
.watch-start label { grid-column: 1 / -1; font-size: .72rem; color: var(--viewer-muted, var(--muted)); }
.watch-start input { min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--viewer-border, var(--line)); border-radius: 5px; background: var(--surface); color: var(--text); font-size: 16px; }
.watch-start .watch-action { height: 36px; }
.watch-start .watch-extra { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.watch-start .watch-hint, .watch-notice { margin: 0; font-size: .72rem; line-height: 1.5; color: var(--viewer-muted, var(--muted)); }
.watch-notice { padding: 0 12px 8px; color: var(--text); }

@media (max-width: 760px) {
    .thread-view.thread-view.has-watch .thread-header { min-height: 44px; }
    .watch-button { padding: 0 8px; }
    .watch-button .watch-button-word { display: none; }
    .watch-bar { padding: 5px 8px; }
    .watch-start { padding: 8px; }
    /* 文字を打っている間は動画を小さくして、レスと入力欄の場所を空ける */
    .app-shell.keyboard-open .watch-stage { max-height: min(120px, 20dvh); }
}

/* 広い画面では、動画を左・レスと書き込み欄を右に並べる(動画の下に積むとレスがほとんど見えなくなる) */
@media (min-width: 1200px) {
    .thread-view.thread-view.has-watch { grid-template-columns: minmax(0, 1fr) minmax(420px, 40%); grid-template-rows: auto minmax(0, 1fr) auto; }
    .thread-view.has-watch > .thread-header { grid-column: 1 / -1; grid-row: 1; }
    .thread-view.has-watch > .watch-panel { grid-column: 1; grid-row: 2 / 4; min-height: 0; overflow-y: auto; border-bottom: 0; border-right: 1px solid var(--viewer-border, var(--line)); }
    .thread-view.has-watch > .response-scroller { grid-column: 2; grid-row: 2; }
    .thread-view.has-watch > :is(.desktop-composer, .chat-composer) { grid-column: 2; grid-row: 3; }
    .thread-view.has-watch .watch-stage { max-height: min(100%, 70dvh); }
    .thread-view.has-watch .watch-panel.compact .watch-stage { max-height: min(220px, 30dvh); }
}

/* 同時視聴中に書いたレスに付く「▶ 12:34」。押すと YouTube をその場面から開く(全員の再生位置は動かさない) */
.watch-time { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid var(--viewer-border, var(--line)); border-radius: 11px; background: var(--surface-2); color: var(--accent-text, var(--accent)); font-size: .72rem; font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; vertical-align: middle; }
.watch-time:hover { background: var(--hover); }

/* 書き込み欄の「▶ 12:34 を付けて送信 ×」 */
.watch-stamp { display: flex; align-items: center; gap: 6px; width: max-content; max-width: 100%; margin: 6px 0 0; padding: 2px 4px 2px 9px; border: 1px solid var(--viewer-border, var(--line)); border-radius: 12px; background: var(--surface-2); color: var(--accent-text, var(--accent)); font-size: .68rem; font-variant-numeric: tabular-nums; }
.watch-stamp button { width: 20px; height: 20px; border-radius: 50%; background: transparent; color: var(--muted); font-size: .8rem; line-height: 1; cursor: pointer; }
.watch-stamp button:hover { background: var(--hover); color: var(--text); }
.chat-composer > .watch-stamp { position: absolute; bottom: 100%; left: 10px; margin: 0 0 6px; box-shadow: 0 2px 8px rgb(0 0 0 / 12%); }

/* スレ立ての「同時視聴スレにする」 */
.composer-sheet .watch-option { display: flex; align-items: flex-start; gap: 8px; margin-top: 9px; color: var(--text); font-weight: 400; cursor: pointer; }
.composer-sheet .watch-option input { width: auto; margin: 2px 0 0; padding: 0; }
.watch-option span { display: grid; gap: 2px; font-size: .74rem; }
.watch-option small { color: var(--muted); font-size: .64rem; }
.desktop-message-column:has(> .watch-stamp) { position: relative; }
.desktop-message-column > .watch-stamp { position: absolute; top: 6px; right: 8px; margin: 0; box-shadow: 0 1px 4px rgb(0 0 0 / 10%); }

/* ストック(次に見る動画)。今の動画が終わると上から順に流れる */
.watch-queue { padding: 4px 12px 8px; border-top: 1px solid var(--viewer-border, var(--line)); }
.watch-queue-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 34px; font-size: .74rem; }
.watch-queue-head small { color: var(--viewer-muted, var(--muted)); font-size: .66rem; }
.watch-queue-head .watch-spacer { flex: 1 1 0; min-width: 0; }
.watch-queue ol { display: grid; gap: 4px; max-height: min(260px, 32dvh); margin: 2px 0 0; padding: 0; overflow-y: auto; list-style: none; }
.watch-queue li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 3px 4px; border-radius: 5px; }
.watch-queue li:first-child { background: var(--surface-2); }
.watch-queue-order { flex: none; width: 1.4em; color: var(--viewer-muted, var(--muted)); font-size: .66rem; text-align: right; font-variant-numeric: tabular-nums; }
.watch-queue img { flex: none; width: 64px; height: 36px; border-radius: 3px; background: #000; object-fit: cover; }
.watch-queue-title { flex: 1 1 auto; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: .72rem; line-height: 1.4; overflow-wrap: anywhere; }
.watch-queue-title small { margin-left: 6px; color: var(--viewer-muted, var(--muted)); font-size: .62rem; }
.watch-panel button.watch-queue-button { flex: none; width: 28px; height: 28px; border: 1px solid var(--viewer-border, var(--line)); border-radius: 5px; background: var(--surface); color: var(--viewer-muted, var(--muted)); font-size: .8rem; cursor: pointer; }
.watch-panel button.watch-queue-button:disabled { opacity: .5; cursor: default; }
.watch-panel.compact .watch-queue ol { display: none; }

/* レスの YouTube リンクの横の「＋ストック」(同時視聴中だけ) */
.watch-stock-add { display: inline-flex; align-items: center; height: 22px; margin: 0 4px; padding: 0 8px; border: 1px solid var(--accent-text, var(--accent)); border-radius: 11px; background: transparent; color: var(--accent-text, var(--accent)); font-size: .68rem; white-space: nowrap; vertical-align: middle; cursor: pointer; }
.watch-stock-add:disabled { border-color: var(--viewer-border, var(--line)); color: var(--viewer-muted, var(--muted)); cursor: default; }

@media (max-width: 760px) {
    .watch-start { grid-template-columns: auto auto auto minmax(0, 1fr); }
    .watch-start input { grid-column: 1 / -1; }
    .watch-queue { padding: 2px 8px 6px; }
    .watch-queue ol { max-height: min(180px, 24dvh); }
}

/* スキップの投票。投票済みは色を付ける(もう一度押すと取り消し) */
.watch-panel button.watch-action.watch-vote { font-variant-numeric: tabular-nums; }
.watch-panel button.watch-action.watch-vote.voted { border-color: var(--accent-text, var(--accent)); color: var(--accent-text, var(--accent)); font-weight: 600; }

/* 動画そのもの(画面全体の層に1つ)。見ているスレでは置き場所(.watch-stage)の上に重ね、位置と大きさは
   js/viewer-watch.js が毎フレーム合わせる。ほかのスレ・一覧では四隅の小窓。ダイアログ(.overlay は 100)より下 */
.watch-float { position: fixed; z-index: 50; background: #000; }
.watch-float.placed { top: 0; left: 0; width: 0; height: 0; }
.watch-float-video { position: relative; width: 100%; height: 100%; }
.watch-float.mini { width: 260px; border: 1px solid var(--viewer-border, var(--line)); border-radius: 8px; overflow: hidden; background: var(--surface); box-shadow: 0 6px 24px rgb(0 0 0 / 28%); }
.watch-float.mini .watch-float-video { height: auto; aspect-ratio: 16 / 9; background: #000; }
.watch-float.mini .watch-overlay { top: 6px; left: 6px; }
.watch-float.mini .watch-unmute { height: 28px; padding: 0 10px; font-size: .7rem; }
.watch-float.mini.corner-tl { top: 108px; left: 16px; }
.watch-float.mini.corner-tr { top: 108px; right: 16px; }
.watch-float.mini.corner-bl { bottom: 16px; left: 16px; }
.watch-float.mini.corner-br { bottom: 16px; right: 16px; }
.watch-float.dragging { transition: none; opacity: .92; }
.watch-float.dragging .watch-float-video { pointer-events: none; }
.watch-mini-bar { display: flex; align-items: center; gap: 4px; height: 34px; padding: 0 4px 0 9px; cursor: grab; touch-action: none; user-select: none; }
.watch-float.dragging .watch-mini-bar { cursor: grabbing; }
.watch-mini-title { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--text); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.watch-mini-bar button { flex: none; height: 26px; padding: 0 8px; border: 1px solid var(--viewer-border, var(--line)); border-radius: 5px; background: var(--surface); color: var(--text); font-size: .68rem; cursor: pointer; }
.watch-mini-bar button[aria-label] { width: 26px; padding: 0; color: var(--viewer-muted, var(--muted)); font-size: .85rem; }

@media (max-width: 760px) {
    /* スマホは小さめ。下はメニューと右下のボタンの上、上はヘッダーとスレのタイトル行の下 */
    .watch-float.mini { width: 200px; }
    .watch-float.mini.corner-tl, .watch-float.mini.corner-tr { top: 100px; }
    .watch-float.mini.corner-bl, .watch-float.mini.corner-br { bottom: calc(80px + env(safe-area-inset-bottom)); }
    .watch-float.mini.corner-tl, .watch-float.mini.corner-bl { left: 8px; }
    .watch-float.mini.corner-tr, .watch-float.mini.corner-br { right: 8px; }
}