/* video-dark.css — dark overrides for video-watch elements not covered by main-black-* */

/* Right rail (#video-right, native float:right 300px). Our own ad system can now
   feed it via adFor "video-right" (ExoClick is disabled). Collapse it only when
   it carries NO ad; with an ad it floats and the player fills beside it. */
#page.video-page #video-right:empty { display: none !important; }
/* Our .ad-slot banner uses normal document flow, not ExoClick's absolute-
   positioned image (#video-right img{position:absolute} in main.css) — reset it
   so the banner shows at its natural size inside the rail. */
#page.video-page #video-right .ad-slot img { position: static !important; max-width: 100%; }
/* Player fills the full content width ONLY when the rail is collapsed (no ad).
   With an ad present, let the native BFC (#video-player-bg{overflow:hidden})
   shrink to fill the space beside the 300px float. */
#page.video-page #content:not(:has(#video-right:not(:empty))) #video-player-bg,
#page.video-page #content:not(:has(#video-right:not(:empty))) #html5video { width: 100% !important; max-width: none !important; }

/* ---------------------------------------------------------------------------
   #video-tabs action panels (Comments / Download / Save / Share / Report).
   The scraped main.css styles these for the light skin (panels = #f7f7f7).
   Here we add: the active-tab indicator, dark-theme panel surfaces, and the
   Save-to-playlist dropdown (our own markup, styled to match the card menu).
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   #v-actions in LIGHT theme. We renamed the scraped `.comments` class to
   `.xv-comments` (to disable the scraped comments.js auto-bottom relocation),
   which dropped the source's `.comments` styling; and our build keeps the
   dark (theme-dark) sheets loaded in light mode (only html.light overrides),
   where `#v-actions{color:#fff}` makes labels white-on-white. So here we copy
   the SOURCE's exact rules (main.css = light, main-black = dark) verbatim,
   retargeted to `.xv-comments`, so the bar is pixel-consistent with the source.
   --------------------------------------------------------------------------- */

/* active-tab underline (red, like source comments-active; other tabs use the
   source hover/active border below) */
#video-tabs #v-actions .tabs button.xv-comments.active { border-bottom: 2px solid #de2600; }

/* --- comments button: shared (source base, unchanged across themes) --- */
#video-tabs #v-actions .tabs button.xv-comments { margin-right: auto; position: relative; border-radius: 0; }
#video-tabs #v-actions .tabs button.xv-comments > span:first-child { height: 36px; text-align: center; }
#video-tabs #v-actions .tabs button.xv-comments > span:first-child .icon-f { margin-right: 0; font-size: 24px; }
#video-tabs #v-actions .tabs button.xv-comments > span:first-child .badge { background: #de2600; border-radius: 50%/60%; color: #fff; font-size: 10px; line-height: 9px; min-width: 16px; padding: 3px 3px 2px; position: absolute; top: 0; }

/* --- light theme = source main.css verbatim --- */
html.light #video-tabs #v-actions { color: #000; }
html.light #video-tabs #v-actions .icon-f { color: #a8a8a8; }
html.light #video-tabs #v-actions .tabs button:hover,
html.light #video-tabs #v-actions .tabs button:hover .icon-f { color: #000; }
html.light #video-tabs #v-actions .tabs button:hover { border-bottom: 2px solid #000; }
html.light #video-tabs #v-actions .tabs button.xv-comments { padding-left: 40px; color: #000; }
html.light #video-tabs #v-actions .tabs button.xv-comments > span:first-child { left: 0; position: absolute; top: 0; width: 40px; }
html.light #video-tabs #v-actions .tabs button.xv-comments > span:first-child .badge { right: calc(50% - 18px); left: auto; }

/* --- dark theme = source main-black verbatim --- */
html:not(.light) #video-tabs #v-actions { color: #fff; }
html:not(.light) #video-tabs #v-actions .tabs button.active .icon-f,
html:not(.light) #video-tabs #v-actions .tabs button:hover .icon-f { color: #fff; }
html:not(.light) #video-tabs #v-actions .tabs button:hover { border-bottom-color: #fff; }
html:not(.light) #video-tabs #v-actions .tabs button.xv-comments { padding-left: 6px; color: #fff; }
html:not(.light) #video-tabs #v-actions .tabs button.xv-comments > span:first-child { background: 0 0; color: #fff; position: static; width: auto; }
html:not(.light) #video-tabs #v-actions .tabs button.xv-comments > span:first-child .badge { left: calc(50% + 5px); right: auto; }

/* Copy-link button feedback. */
#video-tabs .copy-link .copy-btn.copied { background: #3fae5a; color: #fff; }

/* Dark-theme panel surfaces (light skin keeps main.css defaults). */
html:not(.light) #video-tabs .tabs .tab { background: #161616; color: #ddd; }
html:not(.light) #video-tabs .tabs .tab .form-control { background: #0d0d0d; color: #eee; border-color: #333; }
html:not(.light) #video-tabs .download-ready a strong { color: #fff; }

/* Save-to-playlist dropdown. */
.xv-save-panel { max-width: 360px; }
.xv-save-list { margin-bottom: 10px; }
.xv-save-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; cursor: pointer; border-radius: 3px; }
.xv-save-item:hover { background: rgba(222,38,0,.12); }
.xv-save-item.is-in { color: #3fae5a; cursor: default; }
.xv-save-item.is-in:hover { background: none; }
.xv-save-check { flex: 0 0 18px; width: 18px; text-align: center; color: #3fae5a; }
.xv-save-empty, .xv-save-loading { padding: 7px 8px; color: #8a8a8a; font-size: 13px; }
.xv-save-new { display: flex; gap: 6px; }
.xv-save-new input { flex: 1 1 auto; }
.report-thanks { padding: 14px 4px; color: #3fae5a; font-weight: 700; }
html:not(.light) .xv-save-item:hover { background: rgba(222,38,0,.18); }

/* Post-a-comment form (Comments tab). */
.comment-post-form { margin: 8px 0 14px; }
.comment-post-form textarea { width: 100%; resize: vertical; min-height: 52px; }
.comment-post-actions { margin-top: 8px; text-align: right; }
html:not(.light) .comment-post-form textarea { background: #0d0d0d; color: #eee; border-color: #333; }