>
    /* ============================================================
       ✅ VIDNEXA WATCH — Glass theme (matches vidnexa-theme.php)
       Uses shared tokens. Light + grey modes both show white text
       on grey glass (body.grey-mode / body.dark-mode).
       ============================================================ */

    /* Thanks (tip) success heart animation. Server-side in this
       nonce'd block on purpose: a JS-injected <style> element carries
       no nonce and the enforced CSP blocks it (leftovers fix 2026-11-06). */
    @keyframes thanksPop{0%{opacity:0;transform:translate(-50%,-50%) scale(0.5)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}100%{opacity:0;transform:translate(-50%,-120%) scale(1)}}

    :root {
      /* Round 3: light-mode page background is solid white, like the
         homepage. Dark mode is untouched: the dark block below still
         overrides --bg. --bg-gradient is cleared so no theme gradient
         can tint the page behind cards. */
      --bg: var(--bg-solid, #ffffff);
      --bg-gradient: none;
      --text: var(--text-primary, #0f172a);
      --card: var(--glass-bg-soft, #f8fafc);
      --muted: var(--text-muted, #64748b);
      --border: var(--glass-border-soft, #e2e8f0);
      --danger: var(--danger, #dc2626);
      --chip: var(--chip-bg, #ffffff);
      --chipText: var(--chip-text, #0f172a);
      --glass: var(--glass-bg-soft, #f8fafc);
      --glassBorder: var(--glass-border, #e2e8f0);
      --glassBlur: var(--glass-blur, 14px);
      --ytDesc: var(--glass-bg, #ffffff);
      --ytDescHover: #f1f5f9;
      --sheetHandle: var(--text-muted, #c9c9c9);
      --brandBlue: var(--accent, #2563eb);
      --accent: var(--vx-brand-accent, #2563eb);
      --accent-light: var(--vx-brand-soft, rgba(37,99,235,.12));
      --mono-bg: #111;
      --mono-text: #fff;
    }

    [data-theme="dark"],
    body.dark-mode {
      --bg: var(--bg-solid, #0f0f0f);
      --text: #f8fafc;
      --card: var(--glass-bg, #212121);
      --muted: var(--text-muted, #a3a3a3);
      --border: var(--glass-border, #333333);
      --danger: #f87171;
      --chip: var(--chip-bg, #2a2a2a);
      --chipText: #f8fafc;
      --glass: var(--glass-bg-strong, #171717);
      --glassBorder: var(--glass-border, #333333);
      --glassBlur: 0px;
      --ytDesc: var(--glass-bg, #212121);
      --ytDescHover: var(--glass-bg-soft, #2a2a2a);
      --sheetHandle: #454545;
      --brandBlue: var(--vx-brand-accent-dark, #60a5fa);
      --accent: var(--vx-brand-accent-dark, #60a5fa);
      --accent-light: var(--vx-brand-soft-dark, rgba(96,165,250,.18));
      --mono-bg: #f8fafc;
      --mono-text: #0f172a;
    }

    /* Dark Grey: the theme's true-grey ramp (was previously lumped
       into the slate dark block above). */
    body.grey-mode {
      --bg: var(--bg-solid, #1e1e1e);
      --text: var(--text-primary, #f2f2f2);
      --card: var(--glass-bg, #2a2a2a);
      --muted: var(--text-muted, #9e9e9e);
      --border: var(--glass-border, #454545);
      --danger: #f87171;
      --chip: var(--chip-bg, #333333);
      --chipText: var(--chip-text, #f2f2f2);
      --glass: var(--glass-bg-strong, #242424);
      --glassBorder: var(--glass-border, #454545);
      --glassBlur: 0px;
      --ytDesc: var(--glass-bg, #2a2a2a);
      --ytDescHover: var(--glass-bg-soft, #333333);
      --sheetHandle: #5c5c5c;
      --brandBlue: var(--vx-brand-accent-dark, #60a5fa);
      --accent: var(--vx-brand-accent-dark, #60a5fa);
      --accent-light: var(--vx-brand-soft-dark, rgba(96,165,250,.18));
      --mono-bg: #f2f2f2;
      --mono-text: #1e1e1e;
    }

    *{box-sizing:border-box}
    body{
      background: var(--bg-gradient, var(--bg));
      background-attachment: fixed;
      background-color: var(--bg);
      color: var(--text);
      font-family:Roboto,Arial,sans-serif;
    }
    a{color:inherit;text-decoration:none}
    .watch-wrap{max-width:1520px;margin:0 auto;padding:0 12px;}
    @media (min-width: 1400px){ .watch-wrap{ max-width:1600px; } }
    @media (min-width: 992px){
      .watch-wrap .row { --bs-gutter-x: 14px; align-items: flex-start; }
      .watch-wrap .col-lg-8 { padding-left: 6px; padding-right: 6px; }
    }
    .player-wrap{
      margin-bottom:12px;background:#000;border-radius:max(0px, calc(var(--vx-radius, 14px) - 8px));overflow:hidden;
      position:relative;aspect-ratio:16/9;
    }
    @media (max-width: 991.98px){
      main.container-fluid.watch-wrap { margin-top:0 !important; }
      .player-bleed {
        margin-left: calc(50% - 50vw);margin-right: calc(50% - 50vw);
        width: 100vw;border-radius: 0 !important;
      }
      .player-wrap {
        position: sticky;top: 0;z-index: 1300;transform: translateZ(0);
        backface-visibility: hidden;contain: paint;aspect-ratio: 16/9 !important;
      }
      /* VX mobile region tightness (2026-10-26): the global CLS reservation
         (#comments { min-height: 200px }) inflates the collapsed comments
         block by ~150px of dead space, and the section's mb-5 leaves a
         48px void above Up Next. YouTube-mobile tight: 8px rhythm. */
      .watch-wrap section.mb-5 { margin-bottom: 8px !important; }
      .watch-wrap #comments.ytc { min-height: 0; }
      .watch-wrap .ytc { margin-top: 8px; }
      html, body { overscroll-behavior-y: contain; }
    }
    #vidnexa-playerx{width:100%;height:100%;display:block;object-fit:contain;background:#000}
    video#vidnexa-playerx{max-height:80vh;object-fit:contain}
    .youtube-iframe{width:100%;height:100%;border:0;position:absolute;top:0;left:0}

    .player-wrap:has(iframe.youtube-iframe) #theaterBtn,
    .player-wrap:has(iframe.youtube-iframe) #fullscreenBtn { display:none !important; }
    .player-wrap:has(iframe.youtube-iframe) { aspect-ratio:16/9; background:#000; }

    #autoplayOverlay{
      position:absolute;right:16px;bottom:16px;background:var(--glass);
      backdrop-filter: none;-webkit-backdrop-filter: none;
      color:#fff;padding:8px 10px;border-radius:12px;display:none;z-index:5;
      font-size:13px;border:1px solid var(--glassBorder);box-shadow: 0 6px 24px rgba(0,0,0,.25);
    }
    #unmuteHint{position:absolute;left:16px;bottom:16px;background:rgba(0,0,0,.65);color:#fff;padding:6px 8px;border-radius:16px;display:none;z-index:5;font-size:12px}
    .preview-watermark{position:absolute;opacity:.7;pointer-events:none;max-width:25%;max-height:25%}
    .wm-top-left{top:8px;left:8px} .wm-top-right{top:8px;right:8px}
    .wm-bottom-left{bottom:8px;left:8px} .wm-bottom-right{bottom:8px;right:8px}
    .meta-top h1{font-size:20px;margin:10px 0 6px;color:var(--text);}
    .meta-top .statline{color:var(--muted);font-size:14px}

    /* Channel row */
    .channel-main-row {
      display: flex;align-items: center;justify-content: space-between;
      flex-wrap: wrap;gap: 12px;margin: 14px 0 12px;
    }
    .channel-left { display: flex;align-items: center;gap: 12px;min-width: 0; }
    .channel-link { display: flex;align-items: center;gap: 12px;min-width: 0;text-decoration: none;color: inherit; }
    .channel-avatar{
      width:48px;height:48px;border-radius:50%;background:#888;flex:0 0 auto;
      background-size:cover;background-position:center;transition:transform .18s ease, opacity .18s ease;
    }
    .channel-link:hover .channel-avatar{transform:scale(1.03);opacity:.96}
    .channel-meta-wrap{min-width:0}
    .channel-name{font-weight:600;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);}
    .channel-name-text{overflow:hidden;text-overflow:ellipsis}
    .channel-subs{font-size:13px;color:var(--muted);margin-top:2px}
    .pro-verified-badge{
      display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
      border-radius:50%;background:var(--brandBlue);color:#fff;flex:0 0 auto;
      box-shadow:0 0 0 1px rgba(0,0,0,.05) inset;position:relative;top:-.5px;
    }
    .pro-verified-badge .material-icons{font-size:13px;line-height:1}
    .subscribe-wrapper { display: flex;gap: 8px;align-items: center; }
    .channel-actions-row { margin-top: 0px;margin-bottom: 14px; }
    .channel-actions { display: flex;flex-wrap: wrap;gap: 8px;overflow-x: auto;max-width: 100%;align-items:center; }
    .channel-actions::-webkit-scrollbar{height:6px}
    .channel-actions::-webkit-scrollbar-thumb{background:#bbb;border-radius:4px}
    .yt-vote-group{
      display:inline-flex;align-items:stretch;background:var(--ytDesc);
      border-radius:18px;overflow:hidden;height:36px;flex-shrink:0;
      border:1px solid var(--border);
    }
    .yt-vote-group .action-btn{
      border:none;background:transparent;border-radius:0;height:36px;
      padding:0 14px;
    }
    .yt-vote-group .action-btn:hover{background:var(--ytDescHover)}
    .yt-vote-sep{width:1px;background:var(--border);margin:8px 0;flex:0 0 1px}
    .action-btn{
      border:none;background:var(--ytDesc);color:var(--text);text-decoration:none;
      border-radius:18px;height:36px;padding:0 14px;display:inline-flex;align-items:center;
      gap:6px;font-size:14px;font-weight:500;white-space:nowrap;cursor:pointer;line-height:1;
      border:1px solid var(--border);
    }
    .action-btn:hover{background:var(--ytDescHover)}
    .action-btn .material-icons{font-size:20px;line-height:1}
    .action-btn.active{background:#e5ecfd;color:#1d4ed8;border-color:#1d4ed8;}
    .like-btn.active{background:#e5ecfd;color:#1d4ed8}
    .like-btn.active .material-icons{color:var(--accent)}
    .dislike-btn.active{background:#fadede;color:#b91c1c}
    .dislike-btn.active .material-icons{color:var(--danger)}
    .vx-act-ic{width:20px;height:20px;flex:0 0 auto;display:block}
    .vx-swap .vx-ic-alt{display:none}
    .vx-swap.active .vx-ic-alt{display:block}
    .vx-swap.active .vx-ic-main{display:none}
    .like-btn .vx-act-ic,.dislike-btn .vx-act-ic{transition:transform .12s ease}
    .like-btn:hover .vx-act-ic,.dislike-btn:hover .vx-act-ic{transform:scale(1.1)}
    .clip-btn .vx-act-ic{color:#c00}
    .save-btn.active{background:#dcf1e4;color:#166534}
    .save-btn.active .material-icons{color:var(--success,#16a34a)}
    .thanks-btn.active{background:#fbf1d3;color:#92400e}
    .report-btn.active{background:#fadede;color:#b91c1c}
    .not-interested-btn.active{background:var(--glass-bg-soft);color:var(--text)}
    .ai-ask-btn.active, .ai-ask-btn.ai-open{background:#e5ecfd;color:#1d4ed8}
    .share-btn.active{background:#e5ecfd;color:#1d4ed8}
    .clip-btn.active{background:#eadff5;color:#7627bb}
    .mobile-live-chat-btn.active{background:#e5ecfd;color:#1d4ed8}

    /* ============================================================
       ✅ FIX: SUBSCRIBE button = RED when subscribed
       ✅ FIX: BELL button = RED when notifications on
       ============================================================ */
    .subscribe-btn{
      border:none;border-radius:18px;padding:0 16px;height:36px;font-weight:600;
      white-space:nowrap;cursor:pointer;font-size:14px;transition:background .15s ease, color .15s ease, border-color .15s ease;
    }
    .subscribe-btn.sub{background:var(--text);color:var(--bg)}
    .subscribe-btn.on{
      background:var(--danger, #dc2626);
      color:#fff;
      border:1px solid var(--danger, #dc2626);
    }
    .subscribe-btn.on:hover{
      background:#b91c1c;
      border-color:#b91c1c;
    }
    .bell-btn{
      border:1px solid var(--border);background:transparent;border-radius:50%;
      width:40px;height:40px;display:flex;align-items:center;justify-content:center;
      color:var(--text);cursor:pointer;transition:background .15s ease, color .15s ease, border-color .15s ease;
    }
    .bell-btn.active,
    .bell-btn[aria-pressed="true"]{
      background:var(--danger, #dc2626);
      color:#fff;
      border-color:var(--danger, #dc2626);
    }
    .bell-btn.active:hover,
    .bell-btn[aria-pressed="true"]:hover{
      background:#b91c1c;
      border-color:#b91c1c;
    }
    .bell-btn[aria-pressed="false"]{
      background:transparent;
      color:var(--muted);
      border-color:var(--border);
    }
    .bell-btn[aria-pressed="false"]:hover{
      background:var(--ytDescHover);
      color:var(--text);
    }
    @media (max-width: 991.98px){
      .channel-main-row{ margin-bottom: 8px; }
      .channel-actions-row{ margin-top: 0; }
      .channel-actions {
        flex-wrap: nowrap;overflow-x: auto;-webkit-overflow-scrolling: touch;
        scrollbar-width: thin;padding-bottom: 4px;
      }
      .channel-actions .action-btn { flex-shrink: 0; }
      .channel-actions::-webkit-scrollbar { height: 4px; }
      .channel-actions::-webkit-scrollbar-track { background: transparent; }
      .channel-actions::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
    }

    /* Owner order 2026-10-31 (desktop): the whole watch action row stays on
       ONE line — the same pills, tightened (padding / gap / icon / type)
       instead of wrapping onto a second line. Nothing removed, nothing
       moved into a menu; below 992px the existing swipe strip is unchanged. */
    @media (min-width: 992px){
      .channel-actions{ flex-wrap: nowrap; gap: 5px; }
      .channel-actions .action-btn{ padding: 0 9px; font-size: 13px; gap: 4px; }
      .channel-actions .action-btn .vx-act-ic{ width: 17px; height: 17px; }
      .channel-actions .action-btn .material-icons{ font-size: 17px; }
      .channel-actions .yt-vote-group .action-btn{ padding: 0 9px; }
    }
    @media (min-width: 992px) and (max-width: 1279.98px){
      .channel-actions{ gap: 3px; }
      .channel-actions .action-btn{ padding: 0 7px; gap: 3px; }
      .channel-actions .action-btn .vx-act-ic{ width: 16px; height: 16px; }
      .channel-actions .yt-vote-group .action-btn{ padding: 0 7px; }
    }

    /* Owner order 2026-11-02: ONE unified watch header row on desktop —
       channel block, the full action set and Subscribe on a single line.
       The actions container now renders inside .channel-main-row, between
       .channel-left and .subscribe-wrapper. Nothing is removed, hidden or
       icon-only: the 992-1599 band only tightens padding / type / icons so
       the whole labeled set fits one line at 1440; at 1280 the group wraps
       to a second line inside the same header block. Below 992px the
       actions take their own full-width line inside the row (orders 1/2/3),
       reproducing the previous two-row mobile arrangement exactly. */
    .channel-actions-row{ margin: 0; min-width: 0; }
    @media (max-width: 991.98px){
      .channel-main-row{ margin-bottom: 14px; gap: 0 12px; }
      .subscribe-wrapper{ order: 2; }
      .channel-actions-row{ order: 3; flex: 0 0 100%; margin-top: 8px; }
    }
    @media (min-width: 992px){
      .channel-main-row{ flex-wrap: nowrap; margin-bottom: 14px; }
      .channel-actions-row{ flex: 1 1 auto; display: flex; }
      .channel-actions{ flex: 1 1 auto; justify-content: center; overflow: visible; }
      .channel-left{ flex: 0 0 auto; }
      .subscribe-wrapper{ flex: 0 0 auto; }
    }
    @media (min-width: 992px) and (max-width: 1599.98px){
      .channel-main-row{ gap: 10px; }
      .channel-left{ gap: 10px; }
      .channel-link{ gap: 10px; }
      .channel-avatar{ width: 42px; height: 42px; }
      .subscribe-btn{ padding: 0 13px; }
      .channel-actions{ flex-wrap: wrap; gap: 3px; }
      .channel-actions .action-btn{ padding: 0 5px; font-size: 12px; gap: 3px; }
      .channel-actions .action-btn .vx-act-ic{ width: 15px; height: 15px; }
      .channel-actions .action-btn .material-icons{ font-size: 15px; }
      .channel-actions .yt-vote-group .action-btn{ padding: 0 5px; }
    }
    @media (min-width: 1600px){
      .channel-actions{ flex-wrap: nowrap; gap: 4px; }
      .channel-actions .action-btn{ padding: 0 7px; }
      .channel-actions .action-btn .vx-act-ic{ width: 16px; height: 16px; }
      .channel-actions .action-btn .material-icons{ font-size: 16px; }
      .channel-actions .yt-vote-group .action-btn{ padding: 0 7px; }
    }

    /* Owner order 2026-11-02 (desktop, >=992px): watch actions are
       ICON-ONLY in the unified header row, YouTube-style — no word
       labels, so the full set (channel block + all actions +
       Subscribe) fits on ONE line at every desktop width. The
       existing professional inline SVG icons are kept unchanged;
       like/dislike keep their counts and their joined segmented
       pill. Each button's name survives as its accessible name and
       as a theme-token tooltip rendered from its aria-label (pure
       CSS, no JS). Handlers, modals, counts and gating untouched.
       Below 992px the labeled mobile swipe strip is unchanged. */
    @media (min-width: 992px){
      .channel-actions{ flex-wrap: nowrap; gap: 6px; }
      .channel-actions .action-btn{
        position: relative; flex: 0 0 auto;
        width: 40px; height: 40px; min-height: 40px; padding: 0; gap: 0;
        border-radius: 50%; justify-content: center;
      }
      .channel-actions .action-btn > span:not(.like-count):not(.dislike-count){ display: none; }
      .channel-actions .action-btn .vx-act-ic{ width: 20px; height: 20px; }
      .channel-actions .action-btn .material-icons{ font-size: 20px; }
      /* Vote pair stays one segmented pill: icons + counts. The
         group's overflow opens up on desktop (end caps move onto
         the buttons) so the buttons' tooltips are not clipped. */
      .channel-actions .yt-vote-group{ overflow: visible; height: 40px; }
      .channel-actions .yt-vote-group .action-btn{
        width: auto; height: 40px; border-radius: 0; gap: 6px;
      }
      .channel-actions .yt-vote-group .like-btn{ padding: 0 10px 0 12px; border-radius: 18px 0 0 18px; }
      .channel-actions .yt-vote-group .dislike-btn{ padding: 0 12px 0 10px; border-radius: 0 18px 18px 0; }
      .channel-actions .like-count,
      .channel-actions .dislike-count{ font-size: 13px; font-weight: 500; }
      /* Tooltip: the button's own aria-label, under the button */
      .channel-actions .action-btn::after{
        content: attr(aria-label);
        position: absolute; left: 50%; top: calc(100% + 8px);
        transform: translateX(-50%) translateY(-2px);
        background: var(--text); color: var(--bg);
        font-size: 12px; font-weight: 500; line-height: 1.25;
        padding: 5px 8px; border-radius: 6px; white-space: nowrap;
        box-shadow: 0 4px 16px rgba(0,0,0,.25);
        opacity: 0; visibility: hidden; pointer-events: none;
        transition: opacity .15s ease, transform .15s ease, visibility .15s;
        z-index: 80;
      }
      .channel-actions .action-btn:hover::after,
      .channel-actions .action-btn:focus-visible::after{
        opacity: 1; visibility: visible;
        transform: translateX(-50%) translateY(0);
      }
    }

    /* Owner order 2026-10-31 (mobile): the comments sheet stops at the
       player's bottom edge so the player stays fully visible above it.
       --watch-player-bottom is measured live from #playerWrap by the
       under-player sheet script (scroll / resize / orientation) — no fixed
       pixel value, so banners stacked above the player are accounted for
       automatically. Page-level override only: the shared comments
       component itself is untouched. */
    @media (max-width: 991.98px){
      #comments .ytc-mobile-collapse.is-open{
        top: var(--watch-player-bottom, 8dvh);
        height: auto;
        max-height: none;
      }
      body .ytc-sheet-backdrop{ top: var(--watch-player-bottom, 0px); }
    }

    /* Description */
    .yt-desc-wrap{margin:10px 0 14px}
    .yt-desc-card{
      background:var(--ytDesc);border-radius:max(0px, calc(var(--vx-radius, 14px) - 2px));padding:12px 14px;cursor:pointer;
      transition:background .18s ease, transform .12s ease;border:1px solid var(--border);user-select:none;
      color:var(--text);
    }
    .yt-desc-card:hover{background:var(--ytDescHover)}
    /* Round 3 (light only): on the white page, sheets/cards stay readable
       through a solid border plus a flat shadow — never translucency or
       blur. Dark mode is excluded by the body selectors. */
    body:not(.grey-mode):not(.dark-mode) .yt-desc-card,
    body:not(.grey-mode):not(.dark-mode) .watch-audio-box {
      box-shadow: 0 1px 3px rgba(15,23,42,.10);
    }
    body:not(.grey-mode):not(.dark-mode) .yt-vote-group {
      border: 1px solid var(--border);
      box-shadow: 0 1px 3px rgba(15,23,42,.08);
    }
    .yt-desc-topline{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;font-weight:600;line-height:1.4;margin-bottom:6px;color:var(--text);}
    .yt-desc-topline .muted-inline{color:var(--muted);font-weight:500}
    .yt-desc-preview{
      font-size:14px;line-height:1.55;color:var(--text);
      display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;
    }
    .yt-desc-expanded{display:none;font-size:14px;line-height:1.62;color:var(--text);white-space:normal;word-break:break-word;margin-top:8px}
    .yt-desc-card.expanded .yt-desc-expanded{display:block}
    .yt-desc-card.expanded .yt-desc-preview{display:none}
    .yt-desc-more{display:inline-block;margin-top:8px;font-size:14px;font-weight:600;color:var(--text)}

    #descSheetBackdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;z-index:1310;opacity:0;transition:opacity .22s ease}
    #descSheet{
      position:fixed;left:0;right:0;bottom:0;background:var(--glass-bg-strong, var(--bg));color:var(--text);
      border-radius:calc(var(--vx-radius, 14px) + 4px) calc(var(--vx-radius, 14px) + 4px) 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.28);
      transform:translateY(105%);transition:transform .28s cubic-bezier(.2,.8,.2,1);
      z-index:1320;max-height:82vh;display:flex;flex-direction:column;overflow:hidden;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border-top:1px solid var(--glassBorder);
    }
    #descSheet.open{transform:translateY(0)}
    #descSheetBackdrop.open{display:block;opacity:1}
    .desc-sheet-handle{width:42px;height:5px;border-radius:999px;background:var(--sheetHandle);margin:10px auto 8px;flex:0 0 auto}
    .desc-sheet-header{display:flex;align-items:center;justify-content:space-between;padding:0 16px 12px;border-bottom:1px solid var(--border);flex:0 0 auto}
    .desc-sheet-header h3{margin:0;font-size:18px;font-weight:700;color:var(--text);}
    .desc-sheet-close{width:38px;height:38px;border:none;background:transparent;color:var(--text);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}
    .desc-sheet-body{overflow:auto;padding:14px 16px 22px;-webkit-overflow-scrolling:touch}
    .desc-sheet-meta{font-size:14px;font-weight:600;margin-bottom:12px;display:flex;flex-wrap:wrap;gap:10px;color:var(--text);}
    .desc-sheet-content{font-size:14px;line-height:1.7;word-break:break-word;color:var(--text);}

    .watch-audio-box{background:var(--ytDesc);border:1px solid var(--border);border-radius:max(0px, calc(var(--vx-radius, 14px) - 6px));padding:10px 12px;margin:-6px 0 16px;font-size:14px;color:var(--text);}
    .watch-audio-box .audio-pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:999px;padding:4px 8px;margin:4px 4px 0 0;background:transparent;color:var(--text)}
    .watch-audio-box .copy-btn{ float:right; margin-top:-2px; }
    .sidebar{position:sticky;top:calc(var(--header-height, 56px) + 16px);padding-left:12px}
    @media (min-width: 992px){
      .col-lg-4.d-lg-block{
        position:sticky;top:calc(var(--header-height, 56px) + 16px);align-self:flex-start;
        height:calc(100vh - 24px);max-height:calc(100vh - 24px);
      }
      .sidebar{
        height:100%;max-height:100%;
        display:flex;flex-direction:column;overflow:hidden;
        padding-left:12px;
      }
      .sidebar .live-chat-panel{flex:0 0 auto;max-height:280px;}
      .sidebar .recs{
        flex:1 1 auto;min-height:0;
        overflow-y:auto;overflow-x:hidden;
        overscroll-behavior:contain;
        padding-right:6px;scrollbar-width:thin;
      }
      .sidebar .recs::-webkit-scrollbar{width:6px}
      .sidebar .recs::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
    }

    /* YouTube-style Playlist Sidebar */
    .playlist-sidebar {
      background: var(--glass-bg-soft, var(--bg));
      border: 1px solid var(--border);
      border-radius: max(0px, calc(var(--vx-radius, 14px) - 2px));
      margin-bottom: 16px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      flex: 0 0 auto;
      max-height: 400px;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      color: var(--text);
    }
    .playlist-sidebar-header {
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--glass-bg-soft, var(--card));
      flex-shrink: 0;
      color: var(--text);
    }
    .playlist-sidebar-header-left {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }
    .playlist-sidebar-header-left .material-icons {
      font-size: 20px;
      color: var(--muted);
    }
    .playlist-sidebar-title {
      font-size: 14px;
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--text);
    }
    .playlist-sidebar-count {
      font-size: 12px;
      color: var(--muted);
    }
    .playlist-sidebar-close {
      background: none;
      border: none;
      color: var(--muted);
      cursor: pointer;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .playlist-sidebar-close:hover {
      background: var(--ytDescHover);
      color: var(--text);
    }
    .playlist-sidebar-videos {
      flex: 1;
      overflow-y: auto;
      min-height: 0;
      max-height: 300px;
    }
    .playlist-video-item {
      display: flex;
      gap: 8px;
      padding: 8px 12px;
      cursor: pointer;
      transition: background 0.15s;
      border-bottom: 1px solid var(--border);
      color: var(--text);
    }
    .playlist-video-item:last-child {
      border-bottom: none;
    }
    .playlist-video-item:hover {
      background: var(--ytDescHover);
    }
    .playlist-video-item.active {
      background: var(--ytDesc);
    }
    .playlist-video-thumb {
      width: 100px;
      aspect-ratio: 16/9;
      border-radius: 6px;
      overflow: hidden;
      background: #000;
      flex-shrink: 0;
      position: relative;
    }
    .playlist-video-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .playlist-video-duration {
      position: absolute;
      bottom: 2px;
      right: 2px;
      background: rgba(0,0,0,0.8);
      color: #fff;
      padding: 1px 4px;
      border-radius: 3px;
      font-size: 10px;
      font-weight: 500;
    }
    .playlist-video-info {
      flex: 1;
      min-width: 0;
    }
    .playlist-video-title {
      font-size: 13px;
      font-weight: 500;
      line-height: 1.3;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      margin-bottom: 2px;
      color: var(--text);
    }
    .playlist-video-channel {
      font-size: 11px;
      color: var(--muted);
    }
    .playlist-video-index {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 500;
      flex-shrink: 0;
    }
    .playlist-video-index.active-index {
      color: var(--brandBlue);
    }

    /* Playlist parity (2026-11-07): header channel line, position
       counter, shuffle/loop controls row, now-playing indicator. */
    .playlist-sidebar-head-main {
      min-width: 0;
    }
    .playlist-sidebar-channel {
      font-size: 12px;
      color: var(--muted);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-top: 1px;
    }
    .playlist-sidebar-controls {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 6px 12px;
      border-bottom: 1px solid var(--border);
      background: var(--glass-bg-soft, var(--card));
      flex-shrink: 0;
    }
    .pl-toggle {
      background: none;
      border: none;
      color: var(--muted);
      cursor: pointer;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }
    .pl-toggle svg {
      width: 20px;
      height: 20px;
      fill: currentColor;
      display: block;
    }
    .pl-toggle:hover {
      background: var(--ytDescHover);
      color: var(--text);
    }
    .pl-toggle.on {
      color: var(--brandBlue);
    }
    .pl-toggle.on:hover {
      color: var(--brandBlue);
    }
    .pl-eq {
      display: none;
      align-items: flex-end;
      gap: 2px;
      height: 12px;
    }
    .pl-eq i {
      display: block;
      width: 3px;
      height: 100%;
      background: var(--brandBlue);
      border-radius: 1px;
      transform-origin: bottom;
      animation: plEqBounce 0.9s ease-in-out infinite;
    }
    .pl-eq i:nth-child(2) { animation-delay: 0.3s; }
    .pl-eq i:nth-child(3) { animation-delay: 0.6s; }
    @keyframes plEqBounce {
      0%, 100% { transform: scaleY(0.35); }
      50% { transform: scaleY(1); }
    }
    .playlist-video-item.active .pl-num {
      display: none;
    }
    .playlist-video-item.active .pl-eq {
      display: inline-flex;
    }
    @media (prefers-reduced-motion: reduce) {
      .pl-eq i { animation: none; transform: scaleY(0.7); }
    }

    /* Mobile playlist */
    .mobile-playlist-sidebar {
      display: none;
      margin: 0 12px 16px;
    }
    @media (max-width: 991.98px) {
      .mobile-playlist-sidebar {
        display: flex;
      }
    }

    /* Desktop sidebar recommended cards */
    .recs .rec-card{
      display:flex;gap:8px;margin:8px 0;position:relative;color:var(--text);
    }
    .recs .rec-thumb-wrapper{
      position:relative;flex:0 0 168px;width:168px;height:94px;
      border-radius:8px;overflow:hidden;background:#222;
    }
    .recs .rec-thumb-wrapper img{
      width:168px;height:94px;object-fit:cover;border-radius:8px;background:#222;display:block;
    }
    .recs .rec-duration,
    .rec-m-thumb .rec-duration{
      position:absolute;bottom:4px;right:4px;background:rgba(0,0,0,.8);color:#fff;
      font-size:11px;font-weight:600;padding:2px 4px;border-radius:4px;
    }
    .recs .rec-chip-members,
    .rec-m-thumb .rec-chip-members{
      position:absolute;top:4px;left:4px;background:rgba(0,0,0,.8);color:#ffd75e;
      font-size:11px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.02em;
    }
    .recs .rec-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;padding-right:22px;}
    .recs .rec-title{
      font-size:14px;font-weight:500;line-height:1.35;color:var(--text);
      display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
      overflow:hidden;margin-bottom:2px;
    }
    .recs .rec-title a{color:inherit;text-decoration:none;}
    .recs .rec-meta-line{
      display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:12px;color:var(--muted);
      white-space:normal;overflow:visible;
    }
    .recs .rec-avatar{width:20px;height:20px;border-radius:50%;overflow:hidden;flex-shrink:0;}
    .recs .rec-avatar img{width:20px;height:20px;border-radius:50%;object-fit:cover;display:block;}
    .recs .rec-channel{
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto;
    }
    .recs .rec-menu-btn{
      position:absolute;top:0;right:0;background:transparent;border:none;color:var(--muted);
      cursor:pointer;padding:4px;border-radius:50%;display:flex;align-items:center;
      justify-content:center;width:28px;height:28px;z-index:5;
    }
    .recs .rec-menu-btn:hover{background:var(--glass-bg-soft);color:var(--text)}

    /* Desktop sidebar: large horizontal cards (owner correction 2026-11-02).
       The original arrangement restored — thumbnail on the left, title and
       channel name beside it — with thumbnails materially larger than the
       old 168x94. The rail/grid is unchanged, so the player keeps its full
       share at every desktop width. Scoped to the desktop aside at
       >=992px: mobile cards are untouched. */
    @media (min-width: 992px){
      .sidebar .recs .rec-card{
        gap:12px;margin:0 0 16px;align-items:flex-start;
      }
      .sidebar .recs .rec-thumb-wrapper{
        flex:0 0 200px;width:200px;height:auto;aspect-ratio:16/9;
        border-radius:10px;
      }
      .sidebar .recs .rec-thumb-wrapper img{
        width:100%;height:100%;object-fit:cover;border-radius:10px;
      }
      .sidebar .recs .rec-info{
        padding:2px 24px 0 0;gap:3px;
      }
      /* Title (owner refinement 2026-11-02): sidebar card titles may
         wrap to TWO lines; anything longer ellipsizes at the end of
         line 2 (standard 2-line clamp, same mechanism as the base
         .recs rule). Meta layout below is unchanged. */
      .sidebar .recs .rec-title{
        font-size:15px;line-height:1.35;margin-bottom:0;
        display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
        white-space:normal;overflow:hidden;text-overflow:ellipsis;
      }
      /* Meta layout (owner correction 2026-11-02): channel name gets its
         OWN line (avatar + full name, no competition), views • time move
         to a second line indented to the name's left edge. The dot that
         separated name from views on the old single line is dropped. */
      .sidebar .recs .rec-meta-line{
        flex-wrap:wrap;white-space:normal;overflow:visible;
        column-gap:5px;row-gap:2px;line-height:1.35;
      }
      .sidebar .recs .rec-channel{flex:1 0 calc(100% - 28px);min-width:0;}
      .sidebar .recs .rec-channel + .rec-dot{display:none;}
      .sidebar .recs .rec-views{margin-left:27px;flex-shrink:0;}
      .sidebar .recs .rec-time,
      .sidebar .recs .rec-dot{flex-shrink:0;}
      .sidebar .recs .rec-avatar{width:22px;height:22px;}
      .sidebar .recs .rec-avatar img{width:22px;height:22px;}
    }
    @media (min-width: 1400px){
      .sidebar .recs .rec-thumb-wrapper{flex-basis:220px;width:220px;}
    }
    @media (min-width: 1700px){
      .sidebar .recs .rec-thumb-wrapper{flex-basis:232px;width:232px;}
    }

    .recs-section-label {
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
      padding: 4px 0 8px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 8px;
    }
    @media (max-width: 768px) {
      /* Section labels (Up next / Related / From this channel) keep a readable
         inset on mobile, where the recommendations column runs edge-to-edge. */
      .recs-section-label { padding-left: 12px; padding-right: 12px; }
    }

    .rec-context-menu{
      position:fixed;background:var(--glass-bg-strong, var(--bg));border:1px solid var(--border);border-radius:12px;
      box-shadow:0 4px 20px rgba(0,0,0,.15);z-index:10000;min-width:220px;padding:6px 0;
      animation:menuFadeIn .15s ease-out;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      color: var(--text);
    }
    @keyframes menuFadeIn { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} }
    .rec-context-menu .menu-item{
      display:flex;align-items:center;gap:12px;padding:10px 16px;cursor:pointer;
      font-size:13px;color:var(--text);transition:background .15s;border:none;
      background:none;width:100%;text-align:left;
    }
    .rec-context-menu .menu-item:hover{background:var(--ytDescHover)}
    .rec-context-menu .menu-item .menu-icon{
      width:20px;height:20px;flex:0 0 20px;display:flex;align-items:center;
      justify-content:center;font-size:14px;
    }
    .rec-context-menu .menu-item .menu-icon svg{display:block;flex:0 0 auto}

    @media (max-width:991px){
      .sidebar{position:static;padding-left:0}
    }

    /* Mobile YouTube-style recs */
    .mobile-recs-edge{
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      width: 100vw;
      padding: 0;
    }
    .rec-m-wrap{
      position:relative;margin:0 0 18px 0;
    }
    .rec-m-card{
      display:block;color:inherit;text-decoration:none;
    }
    .rec-m-thumb{
      position:relative;width:100vw;aspect-ratio:16/9;background:#111;overflow:hidden;border-radius:0;
    }
    .rec-m-thumb img{
      width:100%;height:100%;object-fit:cover;display:block;border-radius:0;
    }
    .rec-m-body{
      display:flex;gap:12px;padding:10px 12px 4px;align-items:flex-start;
    }
    .rec-m-avatar{
      width:36px;height:36px;border-radius:50%;object-fit:cover;flex:0 0 36px;background:#888;
    }
    .rec-m-text{min-width:0;flex:1;padding-right:28px;}
    .rec-m-title{
      font-size:15px;font-weight:600;line-height:1.35;color:var(--text);
      display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
      text-overflow:ellipsis;word-break:break-word;
    }
    .rec-m-meta{
      margin-top:4px;font-size:13px;color:var(--muted);line-height:1.4;
      display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    }
    .rec-m-menu-btn{
      position:absolute;top:auto;right:6px;bottom:auto;
      top: calc(56.25vw + 8px);
      background:transparent;border:none;color:var(--muted);
      cursor:pointer;padding:4px;border-radius:50%;display:flex;align-items:center;
      justify-content:center;width:32px;height:32px;z-index:6;
    }
    .recs .rec-title,
    .recs .rec-title a{
      display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
      overflow:hidden;text-overflow:ellipsis;word-break:break-word;
    }

    /* ===== YouTube-style Live Chat ===== */
    .live-chat-panel {
      background: var(--glass-bg-soft, var(--bg));
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      height: 520px;
      margin-bottom: 16px;
      font-family: Roboto, Arial, sans-serif;
      color: var(--text);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .live-chat-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 4px 0 12px;
      height: 48px;
      border-bottom: 1px solid var(--border);
      background: var(--glass-bg-soft, var(--bg));
      flex-shrink: 0;
      color: var(--text);
    }
    .live-chat-header-left {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 500;
      color: var(--text);
    }
    .live-chat-header-left .live-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #ff0000;
      animation: livePulse 1.6s infinite;
    }
    @keyframes livePulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.35; }
    }
    .live-chat-header-right {
      display: flex;
      align-items: center;
    }
    .chat-icon-btn {
      width: 40px;
      height: 40px;
      border: none;
      background: transparent;
      color: var(--muted);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.15s;
    }
    .chat-icon-btn:hover {
      background: var(--ytDescHover);
      color: var(--text);
    }
    .chat-icon-btn .material-icons {
      font-size: 20px;
    }
    .live-chat-messages {
      flex: 1;
      overflow-y: auto;
      padding: 8px 12px 4px;
      display: flex;
      flex-direction: column;
      gap: 0;
      scrollbar-width: thin;
      color: var(--text);
    }
    .live-chat-messages::-webkit-scrollbar {
      width: 6px;
    }
    .live-chat-messages::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: 3px;
    }
    .live-chat-message {
      padding: 4px 0;
      font-size: 13px;
      line-height: 1.45;
      word-break: break-word;
      position: relative;
      color: var(--text);
    }
    /* Stored-chat fragments (rendered by /api/live-chat.php) shown in
       this page's chat containers — match the native message rhythm. */
    .live-chat-messages .vx-chat-msg {
      padding: 4px 0;
      font-size: 13px;
      line-height: 1.45;
      word-break: break-word;
      color: var(--text);
    }
    .live-chat-message .chat-username {
      font-weight: 600;
      color: var(--text);
      margin-right: 6px;
    }
    .live-chat-message .chat-text {
      color: var(--text);
    }
    .live-chat-message .chat-time {
      font-size: 11px;
      color: var(--muted);
      margin-left: 8px;
      opacity: 0;
      transition: opacity 0.15s;
    }
    .live-chat-message:hover .chat-time {
      opacity: 1;
    }
    .live-chat-message.system .chat-username {
      color: var(--muted);
      font-weight: 500;
    }
    .live-chat-input-area {
      border-top: 1px solid var(--border);
      padding: 8px 12px;
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--glass-bg-soft, var(--bg));
      flex-shrink: 0;
    }
    .live-chat-input-area input {
      flex: 1;
      border: none;
      background: transparent;
      outline: none;
      font-size: 14px;
      color: var(--text);
      padding: 8px 0;
    }
    .live-chat-input-area input::placeholder {
      color: var(--muted);
    }
    .live-chat-input-area .send-btn {
      background: none;
      border: none;
      color: var(--brandBlue);
      cursor: pointer;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .live-chat-input-area .send-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }
    .live-chat-input-area .send-btn .material-icons {
      font-size: 22px;
    }

    .chat-filter-menu {
      position: absolute;
      top: 48px;
      right: 8px;
      background: var(--glass-bg-strong, var(--bg));
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: 0 8px 24px rgba(0,0,0,.18);
      min-width: 200px;
      z-index: 30;
      display: none;
      overflow: hidden;
      color: var(--text);
    }
    .chat-filter-menu.open {
      display: block;
    }
    .chat-filter-item {
      padding: 12px 16px;
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 12px;
      color: var(--text);
    }
    .chat-filter-item:hover {
      background: var(--ytDescHover);
    }
    .chat-filter-item.active {
      background: #e5ecfd;
      color: #1d4ed8;
    }
    .chat-filter-item .material-icons {
      font-size: 20px;
    }

    #liveChatSheetBackdrop {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.45);
      display: none;
      z-index: 1220;
      opacity: 0;
      transition: opacity .22s ease;
    }
    #liveChatSheet {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--glass-bg-strong, var(--bg));
      color: var(--text);
      border-radius: 18px 18px 0 0;
      box-shadow: 0 -12px 40px rgba(0,0,0,.28);
      transform: translateY(105%);
      transition: transform .28s cubic-bezier(.2,.8,.2,1);
      z-index: 1230;
      max-height: 78vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border-top: 1px solid var(--glassBorder);
    }
    #liveChatSheet.open {
      transform: translateY(0);
    }
    #liveChatSheetBackdrop.open {
      display: block;
      opacity: 1;
    }
    .live-chat-sheet-handle {
      width: 42px;
      height: 5px;
      border-radius: 999px;
      background: var(--sheetHandle);
      margin: 10px auto 6px;
      flex: 0 0 auto;
    }

    .mobile-live-chat-btn {
      display: none;
    }
    @media (max-width: 991.98px) {
      .mobile-live-chat-btn {
        display: inline-flex;
      }
      .live-chat-panel {
        display: none !important;
      }
    }

    /* ============================================================
       ✅ SHARE MODAL — always-visible styles
       ============================================================ */
    #shareModalBackdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:none;display:none;z-index:1330;opacity:0;transition:opacity .2s ease}
    #shareModalBackdrop.open{display:block;opacity:1}
    #shareModal{
      position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.95);
      background:var(--glass-bg-strong, var(--bg)); color:var(--text); width:min(560px,92vw);
      border-radius:16px; border:1px solid var(--border);
      box-shadow:0 24px 80px rgba(0,0,0,.5);
      padding:0; display:none; z-index:1340; overflow:hidden;
      transition:transform .25s cubic-bezier(.2,.9,.3,1.2), opacity .2s ease;
      opacity:0;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    #shareModal.open{display:block;transform:translate(-50%,-50%) scale(1);opacity:1}
    #shareModal .share-header{
      display:flex;align-items:center;justify-content:space-between;
      padding:16px 20px;border-bottom:1px solid var(--border);
    }
    #shareModal .share-header h5{margin:0;font-size:18px;font-weight:700;color:var(--text);}
    #shareModal .share-close{
      background:transparent;border:none;color:var(--muted);cursor:pointer;
      width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
      transition:background .15s;
    }
    #shareModal .share-close:hover{background:var(--ytDescHover)}
    #shareModal .share-body{padding:20px}
    #shareModal .share-preview{
      display:flex;gap:12px;padding:12px;background:var(--ytDesc);border-radius:12px;margin-bottom:20px;
    }
    #shareModal .share-preview img{
      width:120px;height:68px;object-fit:cover;border-radius:8px;flex-shrink:0;
    }
    #shareModal .share-preview-info{min-width:0}
    #shareModal .share-preview-title{
      font-weight:600;font-size:14px;line-height:1.4;color:var(--text);
      display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    }
    #shareModal .share-preview-channel{font-size:12px;color:var(--muted);margin-top:4px}
    #shareModal .share-label{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:10px}
    #shareModal .share-grid{
      display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;margin-bottom:20px;
    }
    #shareModal .share-option{
      display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px;
      border-radius:12px;cursor:pointer;transition:background .15s;border:none;background:transparent;color:var(--text);
    }
    #shareModal .share-option:hover{background:var(--ytDescHover)}
    #shareModal .share-option .share-icon{
      width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
      font-size:22px;font-weight:700;color:#fff;flex-shrink:0;
    }
    #shareModal .share-option .share-name{font-size:12px;text-align:center;color:var(--text)}
    #shareModal .share-icon.whatsapp{background:#25D366}
    #shareModal .share-icon.facebook{background:#1877F2}
    #shareModal .share-icon.twitter{background:#000}
    #shareModal .share-icon.reddit{background:#FF4500}
    #shareModal .share-icon.email{background:#EA4335}
    #shareModal .share-icon.copy{background:#6B7280}
    #shareModal .share-icon.more{background:linear-gradient(135deg,#667eea,#764ba2)}
    #shareModal .share-input-row{display:flex;gap:8px}
    #shareModal .share-input-row input{
      flex:1;border:1px solid var(--border);border-radius:10px;padding:10px 14px;
      background:var(--glass-bg-soft, var(--card));color:var(--text);font-size:14px;outline:none;
    }
    #shareModal .share-input-row button{
      border:0;border-radius:10px;padding:10px 18px;background:var(--brandBlue);color:#fff;
      font-weight:600;cursor:pointer;white-space:nowrap;
    }
    #shareModal .share-embed-row input{
      font-size:12.5px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    }
    #shareModal .share-start-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--border);
    }
    #shareModal .share-start-row label {
      font-size: 13px;
      color: var(--text);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    #shareModal .share-start-row input[type="checkbox"] {
      accent-color: var(--brandBlue);
    }
    @media (max-width: 480px){
      #shareModal .share-grid{grid-template-columns:repeat(4,1fr)}
      #shareModal .share-preview img{width:80px;height:45px}
    }
    @media (max-width: 360px){
      #shareModal .share-grid{grid-template-columns:repeat(3,1fr)}
    }

    body.theater-mode .col-lg-8 { max-width:100% !important; }
    body.theater-mode .col-lg-4 { display:none; }
    .clip-banner{background:linear-gradient(135deg,#065fd4,#2563eb);color:#fff;border-radius:10px;padding:12px 14px;margin:10px 0 14px;display:flex;align-items:center;gap:12px;font-size:14px}
    .clip-banner .material-icons{font-size:24px}
    .clip-banner small{opacity:.9;display:block}
    #clipModalBackdrop{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;z-index:1330}
    #clipModal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--glass-bg-strong, var(--bg));color:var(--text);width:min(680px,95vw);border-radius:12px;border:1px solid var(--border);box-shadow:0 16px 48px rgba(0,0,0,.35);padding:0;display:none;z-index:1340;overflow:hidden;backdrop-filter: none;-webkit-backdrop-filter: none;}
    #clipModal .modal-header{padding:16px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center}
    #clipModal .modal-header h5{margin:0;font-size:18px;font-weight:500;color:var(--text);}
    #clipModal .clip-player{padding:0 24px 16px}
    #clipModal video{width:100%;background:#000;border-radius:8px}
    #clipModal .clip-controls{padding:0 24px 24px}
    #clipModal .clip-controls label{font-size:13px;display:block;margin-bottom:6px;color:var(--muted);}
    #clipModal input[type="range"]{accent-color:#c00}
    .clip-btn .material-icons{color:#c00}
    #clipModal .clip-res-select {
      width: 100%;
      padding: 10px 14px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--glass-bg-soft);
      color: var(--text);
      font-size: 14px;
      margin-top: 8px;
    }
    .fullscreen-btn {
      position:absolute;top:12px;right:64px;z-index:20;
      background:rgba(0,0,0,.6);color:#fff;border:none;border-radius:50%;
      width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;
    }
    @media (max-width: 991.98px){ .fullscreen-btn { right: 56px; } }

    /* ============================================================
       ✅ REPORT MODAL
       ============================================================ */
    #reportModalBackdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1330;display:none}
    #reportModal{
      display:none;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
      background:var(--glass-bg-strong,var(--bg));color:var(--text);
      width:min(520px,92vw);border-radius:14px;border:1px solid var(--border);
      box-shadow:0 16px 48px rgba(0,0,0,.35);padding:20px;z-index:1340;
    }
    #reportModal h5{margin:0 0 12px;font-size:18px;font-weight:700;color:var(--text)}
    #reportModal .report-chip{
      display:inline-flex;align-items:center;gap:6px;
      padding:8px 12px;border:1px solid var(--border);border-radius:999px;
      background:var(--glass-bg-soft);color:var(--text);cursor:pointer;font-size:13px;
    }
    #reportModal .report-chip:hover{background:var(--ytDescHover)}

    /* ============================================================
       ✅ THANKS MODAL
       ============================================================ */
    #thanksModalBackdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1330;display:none}
    #thanksModal{
      display:none;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
      background:var(--glass-bg-strong,var(--bg));color:var(--text);
      width:min(440px,92vw);border-radius:16px;border:1px solid var(--border);
      box-shadow:0 16px 48px rgba(0,0,0,.35);padding:24px;z-index:1340;
    }

    /* ============================================================
       ✅ SAVE TO PLAYLIST MODAL
       ============================================================ */
    #savePlaylistBackdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1330;display:none}
    #savePlaylistModal{
      display:none;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
      background:var(--glass-bg-strong,var(--bg));color:var(--text);
      width:min(420px,92vw);border-radius:14px;border:1px solid var(--border);
      box-shadow:0 16px 48px rgba(0,0,0,.35);padding:20px;z-index:1340;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    #savePlaylistModal h5{margin:0 0 16px;font-size:17px;font-weight:700;color:var(--text)}
    #savePlaylistList{max-height:280px;overflow-y:auto;margin-bottom:16px;padding-right:4px}
    #savePlaylistList::-webkit-scrollbar{width:6px}
    #savePlaylistList::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
    .save-playlist-item{
      display:flex;align-items:center;gap:12px;
      padding:10px 12px;border-radius:10px;
      cursor:pointer;transition:background .15s ease;
      color:var(--text);font-size:14px;
    }
    .save-playlist-item:hover{background:var(--ytDescHover)}
    .save-playlist-item input[type="checkbox"]{
      width:18px;height:18px;
      accent-color:var(--brandBlue);
      cursor:pointer;flex-shrink:0;
    }
    .save-playlist-item .playlist-item-name{
      flex:1;min-width:0;
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    }
    .save-playlist-item .playlist-item-count{
      font-size:12px;color:var(--muted);flex-shrink:0;
    }
    .save-playlist-item.is-watchlater{
      background:#e5ecfd;
      font-weight:600;
    }
    .save-playlist-item.is-watchlater .material-icons{
      font-size:18px;color:var(--brandBlue);
    }
    .save-playlist-sep{
      height:1px;background:var(--border);margin:8px 0;
    }
    #newPlaylistName{
      flex:1;padding:10px 14px;border:1px solid var(--border);border-radius:8px;
      background:var(--glass-bg-soft);color:var(--text);font-size:14px;outline:none;
    }
    #newPlaylistName:focus{border-color:var(--brandBlue)}
    #savePlaylistModal .btn-create{
      background:var(--brandBlue);color:#fff;border:0;border-radius:8px;
      padding:0 16px;font-weight:600;cursor:pointer;white-space:nowrap;
    }

    /* ============================================================
       ✅ AI DRAWER
       ============================================================ */
    #aiModalBackdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: none; z-index: 1330; display: none; opacity: 0; transition: opacity 0.2s ease; }
    #aiModal { position: fixed; background: var(--glass-bg-strong, var(--bg)); color: var(--text); box-shadow: -4px 0 24px rgba(0,0,0,0.2); display: flex; flex-direction: column; overflow: hidden; z-index: 1340; transition: transform 0.28s cubic-bezier(0.2,0.9,0.4,1.1); backdrop-filter: none; -webkit-backdrop-filter: none; }
    @media (min-width: 992px) {
      #aiModal { top: 0; right: 0; bottom: 0; width: 420px; transform: translateX(100%); border-left: 1px solid var(--border); }
      #aiModal.ai-drawer-open { transform: translateX(0); }
    }
    @media (max-width: 991.98px) {
      #aiModal { left: 0; right: 0; bottom: 0; max-height: 85vh; border-radius: 20px 20px 0 0; transform: translateY(100%); }
      #aiModal.ai-drawer-open { transform: translateY(0); }
    }
    .ai-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; color: var(--text); }
    .ai-modal-header h4 { margin: 0; font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--text); }
    .ai-modal-header .close-btn { background: transparent; border: none; color: var(--muted); font-size: 28px; cursor: pointer; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background 0.15s; }
    .ai-modal-header .close-btn:hover { background: var(--ytDescHover); }
    .ai-greeting { background: var(--glass-bg-soft, var(--ytDesc)); margin: 16px 20px 0; padding: 14px 16px; border-radius: 16px; font-size: 14px; line-height: 1.5; color: var(--text); }
    .ai-suggestions { margin: 16px 20px; display: flex; flex-wrap: wrap; gap: 10px; }
    .ai-suggestion-chip { background: var(--glass-bg-soft, var(--card)); border: 1px solid var(--border); border-radius: 24px; padding: 8px 14px; font-size: 13px; cursor: pointer; transition: background 0.15s; color: var(--text); }
    .ai-suggestion-chip:hover { background: var(--ytDescHover); }
    .ai-modal-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .ai-chat-area { flex: 1; overflow-y: auto; padding: 16px 20px; background: var(--glass-bg-soft, #f1f3f4); display: flex; flex-direction: column; gap: 12px; min-height: 200px; }
    .ai-modal-scroll { background: var(--glass-bg-soft, #f1f3f4); }
    .ai-chat-bubble { display: flex; width: 100%; animation: fadeInUp 0.25s ease-out; }
    .ai-chat-bubble.user { justify-content: flex-end; }
    .ai-chat-bubble.assistant { justify-content: flex-start; }
    .ai-chat-bubble .bubble-content { background: var(--glass-bg-soft, #ececec); border: 1px solid var(--border); padding: 10px 14px; border-radius: 18px; max-width: 85%; line-height: 1.5; font-size: 14px; word-wrap: break-word; color: var(--text); }
    .ai-chat-bubble.user .bubble-content { background: #e5ecfd; color: var(--text); border: none; }
    .ai-typing-dots { display: flex; align-items: center; gap: 14px; justify-content: flex-start; }
    .ai-typing-dots .dots { display: flex; align-items: center; gap: 4px; padding: 12px 16px; background: var(--glass-bg-soft, var(--bg)); border: 1px solid var(--border); border-radius: 18px; }
    .ai-typing-dots .dots span { width: 8px; height: 8px; background: var(--muted); border-radius: 50%; animation: dotBounce 1.4s infinite ease-in-out both; }
    .ai-typing-dots .dots span:nth-child(1){ animation-delay: -0.32s; }
    .ai-typing-dots .dots span:nth-child(2){ animation-delay: -0.16s; }
    @keyframes dotBounce { 0%,80%,100%{transform:scale(0.6);opacity:0.3} 40%{transform:scale(1);opacity:1} }
    @keyframes fadeInUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
    .ai-input-row { display: flex; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); background: var(--glass-bg-soft, var(--bg)); flex-shrink: 0; }
    .ai-input-row input { flex: 1; padding: 10px 14px; border: 1px solid var(--border); border-radius: 24px; background: var(--glass-bg-soft, var(--card)); color: var(--text); font-size: 14px; outline: none; transition: border 0.15s; }
    .ai-input-row input:focus { border-color: var(--brandBlue); }
    .ai-input-row button { background: var(--brandBlue); color: #fff; border: none; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: opacity 0.2s; }
    .ai-input-row button:disabled { opacity: 0.5; cursor: not-allowed; }
    .ai-input-wrap { border-top: 1px solid var(--border); background: var(--glass-bg-soft, var(--bg)); flex-shrink: 0; }
    .ai-input-wrap .ai-input-row { border-top: 0; }
    .ai-brand-note { margin: 0; padding: 0 20px 2px; font-size: 11px; color: var(--muted); text-align: center; letter-spacing: .01em; }
    .ai-disclaimer { margin: 0; padding: 0 20px 10px; font-size: 10px; color: var(--muted); text-align: center; opacity: .85; }
    .ai-suggestions,
    .ai-followups {
      display: flex;
      flex-wrap: nowrap;
      gap: 8px;
      padding: 8px 16px 10px;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      scroll-snap-type: x proximity;
    }
    .ai-suggestions::-webkit-scrollbar,
    .ai-followups::-webkit-scrollbar { display: none; }
    .ai-suggestion-chip {
      flex: 0 0 auto;
      white-space: nowrap;
      scroll-snap-align: start;
    }
    .ai-followups { padding: 6px 4px 10px; }
    .ai-followups .ai-suggestion-chip { margin: 0; }

    .watch-sheet-x,
    .desc-sheet-close,
    .ai-modal-header .close-btn {
      width: 40px; height: 40px; border: 0; border-radius: 50%;
      background: var(--ytDesc); color: var(--text);
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 26px; line-height: 1; cursor: pointer; flex: 0 0 auto; z-index: 3;
    }
    .watch-sheet-x .material-icons,
    .desc-sheet-close .material-icons { font-size: 22px; }

    /* Mobile bottom sheets (unchanged) */
    @media (max-width: 991.98px) {
      #descSheetBackdrop,
      #liveChatSheetBackdrop,
      #commentsSheetBackdrop,
      #commentSheetBackdrop,
      #commentsDrawerBackdrop,
      #watchCommentsBackdrop,
      .watch-under-player-sheet-backdrop,
      [data-drawer-backdrop],
      .ytc-drawer-backdrop,
      #pxSettingsSheetBackdrop {
        position: fixed !important;
        inset: 0 !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0,0,0,.45) !important;
        display: none;
        opacity: 0;
        transition: opacity .22s ease;
        z-index: 1400 !important;
        touch-action: none;
      }
      #descSheetBackdrop.open,
      #liveChatSheetBackdrop.open,
      #commentsSheetBackdrop.open,
      #commentSheetBackdrop.open,
      #commentsDrawerBackdrop.open,
      #watchCommentsBackdrop.open,
      .watch-under-player-sheet-backdrop.open,
      [data-drawer-backdrop].open,
      .ytc-drawer-backdrop.open,
      #pxSettingsSheetBackdrop.open {
        display: block !important;
        opacity: 1 !important;
      }
      #descSheet,
      #liveChatSheet,
      #commentsSheet,
      #commentSheet,
      #commentsDrawer,
      #commentDrawer,
      .comments-sheet,
      .comment-sheet,
      .comments-drawer,
      .comment-drawer,
      #cmtSheet,
      .cmt-sheet,
      .watch-comment-sheet,
      [data-drawer],
      .ytc-drawer,
      #watchCommentsSheet,
      .watch-comments-sheet {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100vw !important;
        height: auto !important;
        max-height: 85dvh !important;
        background: var(--glass-bg-strong, var(--bg)) !important;
        color: var(--text) !important;
        border-top-left-radius: 18px !important;
        border-top-right-radius: 18px !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        border-top: 1px solid var(--glassBorder, var(--border)) !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        box-shadow: 0 -12px 40px rgba(0,0,0,.28) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transform: translateY(110%) !important;
        transition: transform .28s cubic-bezier(.2,.8,.2,1) !important;
        will-change: transform;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        overscroll-behavior: contain;
        z-index: 1410 !important;
        padding-top: 4px;
        box-sizing: border-box;
      }
      #descSheet.open,
      #liveChatSheet.open,
      #commentsSheet.open,
      #commentSheet.open,
      #commentsDrawer.open,
      #commentDrawer.open,
      .comments-sheet.open,
      .comment-sheet.open,
      .comments-drawer.open,
      .comment-drawer.open,
      #cmtSheet.open,
      .cmt-sheet.open,
      .watch-comment-sheet.open,
      .watch-comment-sheet.show,
      [data-drawer].open,
      .ytc-drawer.open,
      #watchCommentsSheet.open,
      .watch-comments-sheet.open {
        transform: translateY(0) !important;
      }
      #descSheet .desc-sheet-handle,
      #liveChatSheet .live-chat-sheet-handle,
      .ytc-drawer .ytc-drawer-handle,
      #commentsSheet .comments-sheet-handle,
      .watch-comment-sheet .comments-sheet-handle,
      .watch-comment-sheet .ytc-drawer-handle {
        width: 42px;
        height: 5px;
        border-radius: 999px;
        background: var(--sheetHandle);
        margin: 10px auto 6px;
        flex: 0 0 auto;
      }
      #aiModalBackdrop {
        position: fixed !important;
        inset: 0 !important;
        top: 0 !important;
        background: rgba(0,0,0,.55) !important;
        z-index: 1500 !important;
        display: none;
        opacity: 0;
        transition: opacity .2s ease;
      }
      #aiModalBackdrop.open,
      #aiModalBackdrop[style*="display: block"] {
        display: block !important;
        opacity: 1 !important;
      }
      #aiModal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-height: none !important;
        height: 100% !important;
        border-radius: 0 !important;
        transform: translateY(110%);
        z-index: 1510 !important;
        display: flex;
        flex-direction: column;
      }
      #aiModal.ai-drawer-open {
        transform: translateY(0) !important;
      }
      #aiModal .ai-modal-header { flex: 0 0 auto; }
      #aiModal .ai-modal-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
      #aiModal .ai-chat-area { min-height: 0; overflow: visible; flex: none; background: transparent; }
      #aiModal .ai-input-row { flex: 0 0 auto; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
      #pxSettingsSheetBackdrop {
        position: fixed !important;
        inset: 0 !important;
        top: 0 !important;
        display: none;
        z-index: 1440 !important;
        opacity: 0;
        transition: opacity .2s ease;
        background: rgba(0,0,0,.45) !important;
      }
      #pxSettingsSheetBackdrop.open {
        display: block !important;
        opacity: 1 !important;
      }
      #ytMenu.px-settings-sheet {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100vw !important;
        max-height: 82dvh !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column;
        background: var(--glass-bg-strong, var(--bg)) !important;
        color: var(--text) !important;
        border-top-left-radius: 18px !important;
        border-top-right-radius: 18px !important;
        border: 0 !important;
        border-top: 1px solid var(--glassBorder, var(--border)) !important;
        box-shadow: 0 -12px 40px rgba(0,0,0,.28) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        z-index: 1450 !important;
        overflow-y: auto;
        padding: 8px 12px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        transform: translateY(110%);
        transition: transform .28s cubic-bezier(.2,.8,.2,1);
      }
      #ytMenu.px-settings-sheet.show {
        transform: translateY(0) !important;
      }
      #ytMenu.px-settings-sheet .yt-sub {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
      }
      #ytMenu.px-settings-sheet::before {
        content: '';
        display: block;
        width: 42px;
        height: 5px;
        border-radius: 999px;
        background: var(--sheetHandle);
        margin: 6px auto 10px;
        flex: 0 0 auto;
      }
    }

    /* Continue watching */
    #autoplayOverlay {
      display: none;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: 12px;
      animation: autoplayFadeIn 0.3s ease-out;
    }
    #autoplayOverlay.visible {
      display: flex;
    }
    #autoplayOverlay .autoplay-close {
      background: rgba(255,255,255,0.15);
      border: none;
      color: #fff;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 16px;
      line-height: 1;
      padding: 0;
      flex-shrink: 0;
      transition: background 0.15s;
    }
    #autoplayOverlay .autoplay-close:hover {
      background: rgba(255,255,255,0.3);
    }
    @keyframes autoplayFadeIn {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Dark mode action buttons + subscribe + description */
    [data-theme="dark"] .action-btn,
    body.grey-mode .action-btn,
    body.dark-mode .action-btn {
      background: var(--ytDesc);
      color: var(--text);
      border: 1px solid var(--border);
    }
    [data-theme="dark"] .action-btn:hover,
    body.grey-mode .action-btn:hover,
    body.dark-mode .action-btn:hover {
      background: var(--ytDescHover);
    }
    [data-theme="dark"] .yt-vote-group,
    body.grey-mode .yt-vote-group,
    body.dark-mode .yt-vote-group {
      background: var(--ytDesc);
      border: 1px solid var(--border);
    }
    [data-theme="dark"] .subscribe-btn.on,
    body.grey-mode .subscribe-btn.on,
    body.dark-mode .subscribe-btn.on {
      background: var(--danger, #dc2626);
      color: #fff;
      border-color: var(--danger, #dc2626);
    }
    [data-theme="dark"] .bell-btn[aria-pressed="true"],
    body.grey-mode .bell-btn[aria-pressed="true"],
    body.dark-mode .bell-btn[aria-pressed="true"] {
      background: var(--danger, #dc2626);
      color: #fff;
      border-color: var(--danger, #dc2626);
    }
    [data-theme="dark"] .thanks-btn.active,
    body.dark-mode .thanks-btn.active {
      background: #46380d;
      color: #fbbf24;
    }
    body.grey-mode .thanks-btn.active {
      background: #514318;
      color: #fbbf24;
    }
    [data-theme="dark"] .clip-btn.active,
    body.dark-mode .clip-btn.active {
      background: #33174b;
      color: #c4b5fd;
    }
    body.grey-mode .clip-btn.active {
      background: #3d2155;
      color: #c4b5fd;
    }
    [data-theme="dark"] .yt-desc-card,
    body.dark-mode .yt-desc-card {
      /* Solid theme surface (was slate #1e293b + translucent border). */
      background: #212121;
      color: #f8fafc;
      border-color: #333333;
    }
    body.grey-mode .yt-desc-card {
      background: #2a2a2a;
      color: #f2f2f2;
      border-color: #454545;
    }
    [data-theme="dark"] .yt-desc-card:hover,
    body.dark-mode .yt-desc-card:hover {
      background: #2a2a2a;
    }
    body.grey-mode .yt-desc-card:hover {
      background: #333333;
    }

    /* Opaque active states in dark + grey: each value is the exact
       solid colour the former rgba tint produced over its backdrop
       (page bg for standalone buttons, the vote-group/panel surface
       for like/dislike and the live-chat filter). */
    [data-theme="dark"] .action-btn.active,
    body.dark-mode .action-btn.active,
    [data-theme="dark"] .share-btn.active,
    body.dark-mode .share-btn.active,
    [data-theme="dark"] .ai-ask-btn.active,
    body.dark-mode .ai-ask-btn.active,
    [data-theme="dark"] .ai-ask-btn.ai-open,
    body.dark-mode .ai-ask-btn.ai-open,
    [data-theme="dark"] .mobile-live-chat-btn.active,
    body.dark-mode .mobile-live-chat-btn.active {
      background: #1e2a39;
      color: #60a5fa;
      border-color: #60a5fa;
    }
    body.grey-mode .action-btn.active,
    body.grey-mode .share-btn.active,
    body.grey-mode .ai-ask-btn.active,
    body.grey-mode .ai-ask-btn.ai-open,
    body.grey-mode .mobile-live-chat-btn.active {
      background: #2a3646;
      color: #60a5fa;
      border-color: #60a5fa;
    }
    [data-theme="dark"] .like-btn.active,
    body.dark-mode .like-btn.active,
    [data-theme="dark"] .chat-filter-item.active,
    body.dark-mode .chat-filter-item.active {
      background: #2c3948;
      color: #60a5fa;
    }
    body.grey-mode .like-btn.active,
    body.grey-mode .chat-filter-item.active {
      background: #34404f;
      color: #93c5fd;
    }
    [data-theme="dark"] .dislike-btn.active,
    body.dark-mode .dislike-btn.active {
      background: #3d2222;
      color: #f87171;
    }
    body.grey-mode .dislike-btn.active {
      background: #452929;
      color: #f87171;
    }
    [data-theme="dark"] .save-btn.active,
    body.dark-mode .save-btn.active {
      background: #102518;
      color: #4ade80;
    }
    body.grey-mode .save-btn.active {
      background: #1d3225;
      color: #4ade80;
    }
    [data-theme="dark"] .report-btn.active,
    body.dark-mode .report-btn.active {
      background: #2e1212;
      color: #f87171;
    }
    body.grey-mode .report-btn.active {
      background: #3a1f1f;
      color: #f87171;
    }
    [data-theme="dark"] .save-playlist-item.is-watchlater,
    body.dark-mode .save-playlist-item.is-watchlater {
      background: #243140;
    }
    body.grey-mode .save-playlist-item.is-watchlater {
      background: #2f3b4b;
    }
    [data-theme="dark"] .yt-desc-preview,
    [data-theme="dark"] .yt-desc-expanded,
    [data-theme="dark"] .yt-desc-more,
    body.grey-mode .yt-desc-preview,
    body.grey-mode .yt-desc-expanded,
    body.grey-mode .yt-desc-more,
    body.dark-mode .yt-desc-preview,
    body.dark-mode .yt-desc-expanded,
    body.dark-mode .yt-desc-more {
      color: var(--text);
    }
    [data-theme="dark"] .yt-desc-topline,
    body.grey-mode .yt-desc-topline,
    body.dark-mode .yt-desc-topline {
      color: var(--text);
    }

    /* AI drawer */
    .ai-modal-header {
      padding: 14px 18px;
      border-bottom: none !important;
    }
    .ai-modal-header h4 {
      font-size: 16px;
      font-weight: 700;
      gap: 8px;
      color: var(--text);
    }
    .ai-modal-header h4 .material-icons {
      font-size: 20px;
      color: var(--brandBlue);
    }
    .ai-modal-header .close-btn {
      font-size: 22px;
      width: 32px;
      height: 32px;
      color: var(--text);
    }
    .ai-greeting {
      background: transparent;
      margin: 8px 18px 0;
      padding: 8px 0;
      font-size: 14px;
      line-height: 1.5;
      color: var(--muted);
      border-radius: 0;
    }
    .ai-modal-scroll { background: transparent; }
    .ai-chat-area {
      background: transparent;
      padding: 4px 16px 8px;
      gap: 10px;
    }
    .ai-chat-bubble .bubble-content {
      background: var(--glass-bg-soft, #ffffff);
      border: 1px solid var(--border);
      color: var(--text);
      border-radius: 14px;
      padding: 10px 14px;
      font-size: 14px;
      line-height: 1.5;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }
    .ai-chat-bubble.assistant .bubble-content {
      background: var(--glass-bg-soft, #ffffff);
      border: 1px solid var(--border);
      color: var(--text);
    }
    .ai-chat-bubble.user .bubble-content {
      background: #e5ecfd;
      border: 1px solid var(--border);
      color: var(--text);
    }
    .ai-suggestion-chip {
      background: var(--glass-bg-soft, #ffffff);
      border: 1px solid var(--border);
      color: var(--text);
    }
    .ai-suggestion-chip:hover { background: var(--ytDescHover); }
    .ai-typing-dots .dots {
      background: var(--glass-bg-soft, #ffffff);
      border: 1px solid var(--border);
    }
    .ai-input-wrap {
      border-top: none !important;
      background: transparent;
    }
    .ai-input-row {
      border-top: none !important;
      padding: 10px 16px 14px;
      background: transparent;
      gap: 8px;
    }
    .ai-input-row input {
      background: var(--glass-bg-soft, #f5f5f5);
      border: 1px solid var(--border);
      color: var(--text);
      padding: 10px 16px;
      border-radius: 22px;
      font-size: 14px;
    }
    .ai-input-row input:focus {
      background: var(--glass-bg, #ffffff);
      border-color: var(--brandBlue);
    }
    .ai-input-row input::placeholder { color: var(--muted); }
    .ai-input-row button {
      background: var(--brandBlue);
      color: #ffffff;
      width: 40px;
      height: 40px;
    }
    .ai-input-row button:hover:not(:disabled) {
      background: var(--accent-hover, #4338ca);
    }
    .ai-brand-note,
    .ai-disclaimer { display: none; }

    /* Dark AI drawer */
    [data-theme="dark"] #aiModal,
    body.grey-mode #aiModal,
    body.dark-mode #aiModal {
      background: var(--glass-bg-strong);
      color: var(--text);
    }
    [data-theme="dark"] .ai-modal-scroll,
    [data-theme="dark"] .ai-chat-area,
    [data-theme="dark"] .ai-input-wrap,
    [data-theme="dark"] .ai-input-row,
    body.grey-mode .ai-modal-scroll,
    body.grey-mode .ai-chat-area,
    body.grey-mode .ai-input-wrap,
    body.grey-mode .ai-input-row,
    body.dark-mode .ai-modal-scroll,
    body.dark-mode .ai-chat-area,
    body.dark-mode .ai-input-wrap,
    body.dark-mode .ai-input-row {
      background: transparent !important;
    }
    [data-theme="dark"] .ai-chat-bubble .bubble-content,
    body.grey-mode .ai-chat-bubble .bubble-content,
    body.dark-mode .ai-chat-bubble .bubble-content {
      background: var(--glass-bg-soft);
      border-color: var(--border);
      color: var(--text);
    }
    [data-theme="dark"] .ai-chat-bubble.assistant .bubble-content,
    body.grey-mode .ai-chat-bubble.assistant .bubble-content,
    body.dark-mode .ai-chat-bubble.assistant .bubble-content {
      background: var(--glass-bg-soft);
      border-color: var(--border);
      color: var(--text);
    }
    [data-theme="dark"] .ai-chat-bubble.user .bubble-content,
    body.dark-mode .ai-chat-bubble.user .bubble-content {
      background: #243140;
      border-color: var(--border);
      color: var(--text);
    }
    body.grey-mode .ai-chat-bubble.user .bubble-content {
      background: #2f3b4b;
      border-color: var(--border);
      color: var(--text);
    }
    [data-theme="dark"] .ai-suggestion-chip,
    body.grey-mode .ai-suggestion-chip,
    body.dark-mode .ai-suggestion-chip {
      background: var(--glass-bg-soft);
      border-color: var(--border);
      color: var(--text);
    }
    [data-theme="dark"] .ai-suggestion-chip:hover,
    body.grey-mode .ai-suggestion-chip:hover,
    body.dark-mode .ai-suggestion-chip:hover {
      background: var(--ytDescHover);
    }
    [data-theme="dark"] .ai-greeting,
    body.grey-mode .ai-greeting,
    body.dark-mode .ai-greeting {
      color: var(--muted);
    }
    [data-theme="dark"] .ai-input-row input,
    body.grey-mode .ai-input-row input,
    body.dark-mode .ai-input-row input {
      background: var(--glass-bg-soft);
      border-color: var(--border);
      color: var(--text);
    }
    [data-theme="dark"] .ai-input-row input:focus,
    body.grey-mode .ai-input-row input:focus,
    body.dark-mode .ai-input-row input:focus {
      background: var(--glass-bg);
      border-color: var(--brandBlue);
    }
    [data-theme="dark"] .ai-typing-dots .dots,
    body.grey-mode .ai-typing-dots .dots,
    body.dark-mode .ai-typing-dots .dots {
      background: var(--glass-bg-soft);
      border-color: var(--border);
    }

    /* Statistics panel */
    .vn-stats-panel {
      display: none;
      background: var(--glass-bg-soft);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 16px;
      margin: 12px 0;
      font-family: monospace;
      font-size: 12px;
      line-height: 1.7;
      color: var(--text);
      white-space: pre-wrap;
    }
    .vn-stats-panel.visible { display: block; }
    /* Bug-hunt P2 M4: clear the fixed mobile bottom bar (76px + border) on phone widths. */
@media (max-width: 767.98px) {
  body { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
}

    /* ============================================================
       DEGLASS PASS (2026-10-27, owner order): the watch page is
       solid white in light mode and solid dark in dark mode.
       No translucent, frosted or blurred page surfaces.
       This stylesheet ships only with watch.php, so every rule
       below is scoped to the watch page by construction.
       ============================================================ */

    /* Page background: the shared header emits
       body{background:var(--bg-solid)} later in the document, which
       silently overrode this page's own white. Pin the watch page to
       solid white with a higher-specificity, light-only rule. */
    html body:not(.grey-mode):not(.dark-mode) {
      background: #ffffff;
      background-color: #ffffff;
      background-image: none;
    }

    /* No blurred ambient halo behind the player on this page
       (playerx is shared with other pages; the element is only
       suppressed here). */
    .ambient-glow { display: none !important; }

    /* Pre-roll skip pill: solid surface, no backdrop blur
       (overrides the shared player stylesheet from this page only). */
    .playerx-wrapper .vx-preroll-skip {
      background: #0a0a0c;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }

    /* Light mode only: every remaining soft-tint (--glass-bg-soft)
       surface owned by this page becomes solid white. Borders that
       already define these surfaces are unchanged. */
    body:not(.grey-mode):not(.dark-mode) .playlist-sidebar,
    body:not(.grey-mode):not(.dark-mode) .playlist-sidebar-header,
    body:not(.grey-mode):not(.dark-mode) .playlist-sidebar-controls,
    body:not(.grey-mode):not(.dark-mode) .live-chat-panel,
    body:not(.grey-mode):not(.dark-mode) .live-chat-header,
    body:not(.grey-mode):not(.dark-mode) .live-chat-input-area,
    body:not(.grey-mode):not(.dark-mode) #shareModal .share-input-row input,
    body:not(.grey-mode):not(.dark-mode) #clipModal .clip-res-select,
    body:not(.grey-mode):not(.dark-mode) #reportModal .report-chip,
    body:not(.grey-mode):not(.dark-mode) #newPlaylistName,
    body:not(.grey-mode):not(.dark-mode) #aiModal .ai-greeting,
    body:not(.grey-mode):not(.dark-mode) #aiModal .ai-suggestion-chip,
    body:not(.grey-mode):not(.dark-mode) #aiModal .ai-chat-area,
    body:not(.grey-mode):not(.dark-mode) #aiModal .ai-modal-scroll,
    body:not(.grey-mode):not(.dark-mode) #aiModal .ai-chat-bubble .bubble-content,
    body:not(.grey-mode):not(.dark-mode) #aiModal .ai-typing-dots .dots,
    body:not(.grey-mode):not(.dark-mode) #aiModal .ai-input-row,
    body:not(.grey-mode):not(.dark-mode) #aiModal .ai-input-row input {
      background: #ffffff;
    }
    body:not(.grey-mode):not(.dark-mode) #aiModal .ai-greeting {
      border: 1px solid var(--border);
    }
    /* Modal fields whose tint comes from an inline style. */
    body:not(.grey-mode):not(.dark-mode) #reportDetails,
    body:not(.grey-mode):not(.dark-mode) #startTimeInput,
    body:not(.grey-mode):not(.dark-mode) #endTimeInput,
    body:not(.grey-mode):not(.dark-mode) #clipTitleInput {
      background: #ffffff !important;
    }
    /* Comments (shared component, var-level override scoped to this
       page): pills and composer surfaces are solid white in light. */
    body:not(.grey-mode):not(.dark-mode) .ytc {
      --ytc-surface: #ffffff;
      --ytc-surface-2: #ffffff;
      --ytc-pill-bg: #ffffff;
    }

    /* Description card, final word on this page: the shared
       stylesheet (vidnexa-p1.css) still carries an !important slate
       rule for .yt-desc-card. These page-scoped rules outrank it on
       specificity (html body ...) so the card follows the theme ramp
       here without editing the shared file. */
    html body.dark-mode .yt-desc-card,
    html[data-theme="dark"] body .yt-desc-card {
      background: #212121 !important;
      border-color: #333333 !important;
      color: #f8fafc !important;
    }
    html body.grey-mode .yt-desc-card {
      background: #2a2a2a !important;
      border-color: #454545 !important;
      color: #f2f2f2 !important;
    }
    html body.dark-mode .yt-desc-card:hover,
    html[data-theme="dark"] body .yt-desc-card:hover {
      background: #2a2a2a !important;
    }
    html body.grey-mode .yt-desc-card:hover {
      background: #333333 !important;
    }

/* ============================================================
   Vidnexa AI search mode + video cards in the Ask drawer
   (2026-11-08, parity with /ai-assistant): same card geometry as
   the estate card — radius 16, true 16:9 thumbs, duration badge,
   one-line meta with the verified badge glued to the channel
   name; watch theme tokens stand in for the assistant's tokens,
   so all three themes carry over.
   ============================================================ */
.ai-input-wrap{display:flex;flex-direction:column}
.search-pill{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;margin:10px 20px 0;padding:5px 11px 5px 9px;border-radius:999px;background:var(--card);border:1px solid var(--border);color:var(--muted);font-size:12px;font-weight:600;line-height:1.3}
.search-pill[hidden]{display:none}
.search-pill::before{content:'';width:7px;height:7px;border-radius:50%;background:#ff3b5c;flex:none}
@supports (background:color-mix(in srgb,red 10%,transparent)){
  .search-pill{background:color-mix(in srgb,#ff3b5c 8%,var(--card));border-color:color-mix(in srgb,#ff3b5c 32%,transparent);color:var(--text)}
}
#aiSearchModeBtn{background:transparent;color:var(--muted);border:1px solid var(--border);transition:background .15s ease,color .15s ease,border-color .15s ease}
#aiSearchModeBtn svg{width:20px;height:20px}
#aiSearchModeBtn.active{background:color-mix(in srgb,#ff3b5c 14%,transparent);color:#ff3b5c}
.ai-chat-bubble.vxa-host .bubble-content{max-width:100%;flex:1}
.bubble-content .vxa-summary{margin:0}
.bubble-content .vxa-empty{margin:0}
.vxa-cards{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.bubble-content .vxa-card{margin:8px 0}
.vxa-card{position:relative;display:flex;gap:12px;padding:12px;border:1px solid var(--border);border-radius:16px;background:var(--card);color:inherit;align-items:center;cursor:pointer;transition:border-color .15s ease}
.vxa-card:hover{border-color:var(--muted)}
.vxa-thumb{position:relative;flex:none;width:128px;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--glass-bg-soft,var(--bg));display:block}
.vxa-thumb img{width:100%;height:100%;object-fit:cover;display:block;border:0}
.vxa-dur{position:absolute;right:8px;bottom:8px;background:#0f172a;color:#fff;font-size:12px;font-weight:600;line-height:1.25;padding:2px 6px;border-radius:6px}
.vxa-meta{flex:1;min-width:0}
.vxa-title{display:block;text-decoration:none;font-size:16px;font-weight:500;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.vxa-title::after{content:'';position:absolute;inset:0;border-radius:16px}
.vxa-title:focus-visible::after{outline:2px solid var(--muted);outline-offset:-2px}
.vxa-sub{display:flex;align-items:center;gap:6px;font-size:13px;line-height:1.35;color:var(--muted);margin-top:4px;white-space:nowrap;overflow:hidden}
.vxa-chan{display:flex;align-items:center;min-width:0;flex:0 1 auto;color:inherit;text-decoration:none;font-weight:500;position:relative;z-index:1}
.vxa-chan-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
a.vxa-chan:hover{color:var(--text)}
a.vxa-chan:hover .vxa-chan-name{text-decoration:underline}
.vxa-sep{opacity:.7;flex:none}
.vxa-fact{flex:none;white-space:nowrap}
.vxa-verified{display:inline-flex;align-items:center;justify-content:center;flex:none;width:14px;height:14px;margin-left:4px;border-radius:50%;background:#606060;color:#fff;font-size:9px;line-height:1}
.vxa-empty{background:var(--glass-bg-soft,var(--bg));border:1px solid var(--border);border-radius:12px;padding:12px 14px;color:var(--muted);font-size:14px;line-height:1.55}
@media (max-width:560px){
  .vxa-card{flex-direction:column;align-items:stretch;gap:10px}
  .vxa-thumb{width:100%}
  .vxa-meta{flex:none}
}