/* Watch page uses the existing video player, comments, and recommendation links. */
.voicer-watch { --watch-surface: #fff; --watch-line: #dce7f5; --watch-ink: #173150; --watch-muted: #61748c; --watch-soft: #f3f7fd; min-height: 100vh; padding-top: 76px !important; background-color: var(--voicer-canvas) !important; color: var(--watch-ink); font-family: "Voicer Inter", system-ui, sans-serif; }
.voicer-watch *, .voicer-watch *::before, .voicer-watch *::after { box-sizing: border-box; }
.voicer-watch .play-container { width: 100%; max-width: 1320px; margin: 0 auto !important; padding: 20px 20px 90px !important; background: transparent !important; }
.voicer-watch .play-container > .row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 24px; margin: 0; }
.voicer-watch .play-container > .row > .col-md-8, .voicer-watch .play-container > .row > .col-md-4 { width: auto; max-width: none; min-width: 0; margin: 0 !important; padding: 0; }
.voicer-watch .play-video { min-width: 0; overflow: hidden; border: 1px solid var(--watch-line); border-radius: 20px; background: var(--watch-surface); box-shadow: 0 10px 30px rgba(22, 65, 120, .06); }
.voicer-watch #stickydiv { padding: 12px 12px 0; }
.voicer-watch #video-data1 { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 72vh; border: 0 !important; border-radius: 13px !important; background: #080c13; object-fit: contain; }
.voicer-watch .play-video > div:not(#stickydiv) { padding: 18px 22px 24px; }
.voicer-watch .play-video .tags { margin-bottom: 8px; }
.voicer-watch .play-video .tags a { color: #1c67c9 !important; font-size: 13px !important; }
.voicer-watch .play-video h1 { margin: 0 0 14px; color: var(--watch-ink) !important; font-size: clamp(21px, 2.5vw, 28px) !important; line-height: 1.28; letter-spacing: -.03em; font-weight: 800; }
.voicer-watch .play-video .play-video-info { gap: 12px 20px; margin: 0; padding: 0 0 17px; border-bottom: 1px solid var(--watch-line); color: var(--watch-muted) !important; font-size: 13px; }
.voicer-watch .play-video .play-video-info > div:last-child { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.voicer-watch .play-video .play-video-info a { margin: 0; color: var(--watch-muted) !important; font-size: 13px; font-weight: 650; text-decoration: none; }
.voicer-watch .play-video .play-video-info a:hover { color: #1b65c6 !important; }
.voicer-watch .play-video .play-video-info i { color: #6c83a0 !important; }
.voicer-watch .play-video hr { height: 1px; margin: 19px 0; background: var(--watch-line); }
.voicer-watch .publisher { gap: 11px; margin: 0; }
.voicer-watch .publisher > img { flex: 0 0 42px; width: 42px; height: 42px; margin: 0; object-fit: cover; border-radius: 50%; }
.voicer-watch .publisher div p { margin: 0; color: var(--watch-ink) !important; font-size: 14px; line-height: 1.3; }
.voicer-watch .publisher div p a span { color: var(--watch-ink) !important; }
.voicer-watch .publisher div span { color: var(--watch-muted) !important; font-size: 12px; }
.voicer-watch .publisher > a.btn { flex: none; padding: 10px 15px; border-radius: 10px !important; background: #1b62ce !important; color: #fff !important; font-size: 11px; }
.voicer-watch .vid-description { margin: 20px 0; padding: 17px 18px; border: 1px solid var(--watch-line); border-radius: 13px; background: var(--watch-soft); }
.voicer-watch .vid-description p, .voicer-watch .vid-description h4 { color: var(--watch-muted) !important; font-size: 13px; line-height: 1.6; }
.voicer-watch .vid-description a:not(.btn) { color: #236bc8 !important; }
.voicer-watch .vid-description a.btn.bg-blue-dark { background: #1b62ce !important; color: #fff !important; }
.voicer-watch .vid-description a.btn.bg-blue-dark:hover { background: #1553b4 !important; color: #fff !important; }
.voicer-watch .vid-description a.btn.bg-blue-dark:focus-visible { outline: 3px solid #91c2ff; outline-offset: 2px; }
.voicer-watch .add-comment { align-items: center; gap: 11px; margin: 22px 0 6px; }
.voicer-watch .add-comment img { flex: 0 0 36px; width: 36px; height: 36px; margin: 0; object-fit: cover; }
.voicer-watch .add-comment input { min-height: 43px; padding: 9px 13px; border: 1px solid var(--watch-line); border-radius: 10px; background: var(--watch-soft); color: var(--watch-ink) !important; }
.voicer-watch .add-comment input::placeholder { color: #8798ac; }
.voicer-watch .right-sidebar { min-width: 0; }
.voicer-watch__related-title { margin: 2px 0 17px; color: var(--watch-ink) !important; font-size: 19px; font-weight: 800; letter-spacing: -.025em; }
.voicer-watch__filters { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; align-items: center; gap: 7px; margin: 0 0 16px; }
.voicer-watch__filter-arrow { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--watch-line); border-radius: 50%; background: var(--watch-surface); color: #285984; font: 500 25px/1 system-ui, sans-serif; cursor: pointer; }
.voicer-watch__filter-arrow:hover:not(:disabled), .voicer-watch__filter-arrow:focus-visible { border-color: #97bbee; background: #eaf3ff; color: #155bc4; }
.voicer-watch__filter-arrow:disabled { opacity: .38; cursor: default; }
.voicer-watch .right-sidebar .categories { min-width: 0; margin: 0; padding: 0; overflow: hidden; background: transparent !important; }
.voicer-watch .right-sidebar .category-section { align-items: center; gap: 6px; padding: 2px 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.voicer-watch .right-sidebar .category-section::-webkit-scrollbar { display: none; }
.voicer-watch .right-sidebar .category { flex: 0 0 auto; margin: 0 !important; padding: 7px 12px; border: 1px solid var(--watch-line); border-radius: 999px; background: var(--watch-surface); color: var(--watch-muted) !important; font-size: 11px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.voicer-watch .right-sidebar .category:hover, .voicer-watch .right-sidebar .category:focus-visible { border-color: #97bbee; background: #eaf3ff; color: #155bc4 !important; }
.voicer-watch .side-video-list { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 12px; margin: 0 0 11px; padding: 8px; border: 1px solid var(--watch-line); border-radius: 14px; background: var(--watch-surface); }
.voicer-watch .side-video-list .video-thumb-list { position: relative; width: 100%; height: 84px; min-width: 0; }
.voicer-watch .side-video-list .video-thumb-list a, .voicer-watch .side-video-list .video-thumb-list img { display: block; width: 100%; height: 100%; }
.voicer-watch .side-video-list .video-thumb-list img { border-radius: 9px !important; object-fit: cover; }
.voicer-watch .side-video-list .video-thumb-list-duration { right: 6px; bottom: 5px; border-radius: 4px; background: rgba(10, 18, 30, .8); color: #fff !important; font-size: 10px; }
.voicer-watch .side-video-list .vid-info { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.voicer-watch .side-video-list .vid-info > a { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--watch-ink) !important; font-size: 12px; font-weight: 750; line-height: 1.36; text-decoration: none; }
.voicer-watch .side-video-list .vid-info > a:hover { color: #1c67c9 !important; }
.voicer-watch .side-video-list .publisher { gap: 8px; margin-top: 7px !important; }
.voicer-watch .side-video-list .publisher > img { flex: 0 0 24px !important; width: 24px !important; height: 24px !important; margin: 0 !important; border-radius: 50%; }
.voicer-watch .side-video-list .publisher > div { min-width: 0; }
.voicer-watch .side-video-list .publisher a, .voicer-watch .side-video-list .publisher span { display: block; overflow: hidden; color: var(--watch-muted) !important; font-size: 11px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.voicer-watch .side-video-list .publisher a { font-weight: 700; }
.voicer-watch .side-video-list .publisher i { display: none; }
body.theme-dark .voicer-watch { --watch-surface: #1d2b40; --watch-line: #344862; --watch-ink: #ecf4ff; --watch-muted: #adc0d7; --watch-soft: #24354c; background: #111927 !important; }
body.theme-dark .voicer-watch .play-video .tags a, body.theme-dark .voicer-watch .vid-description a:not(.btn) { color: #9bc5ff !important; }
body.theme-dark .voicer-watch .play-video .play-video-info a:hover, body.theme-dark .voicer-watch .side-video-list .vid-info > a:hover { color: #9bc5ff !important; }
body.theme-dark .voicer-watch .right-sidebar .category { background: #263a54; }
body.theme-dark .voicer-watch__filter-arrow { background: #263a54; color: #c7dcf4; }
body.theme-dark .voicer-watch__filter-arrow:hover:not(:disabled), body.theme-dark .voicer-watch .right-sidebar .category:hover { background: #2e4b70; color: #edf5ff !important; }
.voicer-watch #backtotop.voicer-watch__back-to-top { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 99; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 !important; padding: 0 !important; border: 0; border-radius: 50%; background: #1b62ce; color: #fff !important; cursor: pointer; box-shadow: 0 8px 19px rgba(21, 78, 161, .24); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; }
.voicer-watch #backtotop.voicer-watch__back-to-top svg { display: block; width: 22px; height: 22px; color: inherit; }
.voicer-watch #backtotop.voicer-watch__back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.voicer-watch #backtotop.voicer-watch__back-to-top:hover { background: #104fae; }
.voicer-watch #backtotop.voicer-watch__back-to-top:focus-visible { outline: 3px solid #9ac8ff; outline-offset: 3px; }
body.theme-dark .voicer-watch #backtotop.voicer-watch__back-to-top { background: #4388dc; color: #fff; }
@media (max-width: 900px) { .voicer-watch .play-container > .row { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
    .voicer-watch { padding-top: 66px !important; }
    .voicer-watch .play-container { padding: 12px 12px 95px !important; }
    .voicer-watch #stickydiv { padding: 6px 6px 0; }
    .voicer-watch .play-video > div:not(#stickydiv) { padding: 16px 15px 20px; }
    .voicer-watch .play-video .play-video-info > div:last-child { gap: 9px; }
    .voicer-watch .side-video-list { grid-template-columns: 118px minmax(0, 1fr); }
    .voicer-watch .side-video-list .video-thumb-list { height: 75px; }
}