html {
    scroll-snap-type: y mandatory !important;
    scroll-behavior: quick !important;
    overflow-x: unset !important;
    overflow-y: inherit !important;
}

body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: unset !important;
    overflow-y: inherit !important;
}

html,
body {
    overflow: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

html::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
}
body::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
}
.dynamic_placeholder {
    padding: 0px !important;
    margin: 0px !important;
}

video::-webkit-media-controls {
    display: none !important;
}

section.watch-section {
    
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
    display: grid !important;
    place-items: center !important;
    
}

.watch-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    width: 100%;
    min-width: 400px;
}
 


.video-wrapper {
    width: 100%;
min-width:100%;

    max-width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    /* border-radius:20px; */
}

.video-wrapper video {
    width: 100%;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    cursor: pointer;
}

.interaction-icons {
    position: absolute;
    top: 65%;
    right: 10px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-align: center;
}

.interaction-icons a {
    color: #fff;
    font-size: 24px;
    text-align: center;
    text-decoration: none;
    z-index: 90;
}

.interaction-icons span {
    font-size: 14px;
    color: #fff;
    line-height: 1;
    margin-top: -18px;
}


/* Full .subscribe-button ruleset lives further down (WATCH BUTTON SYSTEM /
   ── Follow/Subscribe button ──) — this used to be a second, competing
   definition here that always lost to the later !important block, so it
   never actually rendered. Removed rather than left as dead weight. */

.video-description-wrap{
    position: absolute;
    bottom: 5px;
    width: 100%;
 
    padding: 00px;
    color: #fff;
    text-align: left;
    z-index: 10;
}
.video-description {
    margin-top: 5px;
    font-size: 14px;
}

.video-info-area {
    background: rgb(0 0 0 / 14%);
    background: rgb(0 0 0 / 14%);
    position: relative; 
    padding: 5px 10px;
}
span.creator_name {
    margin-left: 5px;
}
.top-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgb(0 0 0 / 0%);
    color: #fff;
}

.top-bar .center-options {
    display: flex;
    gap: 20px;
}

.top-bar a,
.top-bar span {
    color: #fff;
    font-size: 18px;
    text-decoration: none;
}

.top-right-options {
    display: flex;
    align-items: center;
    gap: 15px;
}

.volume-control {
    color: #fff;
    cursor: pointer;
    font-size: 24px;
    position: relative;
    transition: transform 0.15s ease;
}

.volume-control:active {
    transform: scale(0.92);
}

.volume-control.is-muted i {
    opacity: 0.55;
}

.play-pause-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    pointer-events: none;
    align-items: center;
    justify-content: center;
}

.play-pause-overlay i {
    font-size: 40px;
    color: #fff;
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    padding: 18px 18px 18px 22px; /* optical centering for play triangle */
}

.play-pause-overlay i.feather-pause {
    padding: 18px; /* equal padding when showing pause */
}

.seek-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.28);
    cursor: pointer;
    transition: height 0.15s ease;
    /* avoid home-indicator clipping on iOS */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: content-box;
    z-index: 20;
}

.seek-bar:hover,
.seek-bar:active {
    height: 7px;
}

.seek-bar .progress {
    height: 100%;
    background: linear-gradient(to right, #ffffff, #2196f3);
    width: 0;
    border-radius: 0 2px 2px 0;
    transition: width 0.1s linear;
}

/* Buffer indicator (injected by JS) */
.seek-bar .seek-buffer {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.4);
    pointer-events: none;
    border-radius: 2px;
}

/* Seek thumb (injected by JS) */
.seek-bar .seek-thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    transition: width 0.15s ease, height 0.15s ease;
}

.seek-bar:hover .seek-thumb,
.seek-bar:active .seek-thumb {
    width: 16px;
    height: 16px;
}


ul.dropdown-menu.extended.short {
    right: 15px !important;
    left: auto;
    font-size: 14px !important;
}

ul.dropdown-menu.extended.short li a {
    font-size: 14px !important;
}

.scroll-buttons {
    position: absolute;
    top: 30%;
    right: -8px;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.scroll-button {
    width: 30px; /* Adjust width */
    height: 30px; /* Adjust height */
    background-color: rgba(0, 0, 0, 0.5); /* Adjust the background color */
    border-radius: 50%; /* Make it circular */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: small;
}

.scroll-button:before {
    content: "";
    border: solid white;
    border-width: 0 4px 4px 0;
    display: inline-block;
    padding: 6px;
    transform: rotate(45deg);
}

.scroll-button.up {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
.scroll-button.down {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}
.scroll-button.up:before {
    transform: rotate(-135deg);
}

.scroll-button.down:before {
    transform: rotate(45deg);
}

.scroll-button:active {
    background-color: rgba(0, 0, 0, 0.8); /* Darken the button when clicked */
    transform: scale(
    0.9
    ); /* Slightly reduce the size to create a "pressed" effect */
}

.loader {
    border: 4px solid rgba(255, 255, 255, 0.3); /* Light grey */
    border-top: 4px solid white; /* White */
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: sb-spin 1s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.no-more-videos {
    text-align: center;
    margin: 20px 0;
    font-size: 18px;
    color: #666;
}


.bottom-nav {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    background-color: #000;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid #333;
    z-index: 100;
    margin-top: 47px;
}

.bottom-nav .nav-item {
    color: #fff;
    text-align: center;
    font-size: 12px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    transition: transform 0.3s ease, background-color 0.3s ease; /* Smooth transition effect */
    padding: 5px;
    border-radius: 10px;
}

.bottom-nav .nav-item i {
    font-size: 20px;
    transition: transform 0.3s ease; /* Smooth transition effect for icon */
}
.bottom-nav .nav-item i.plus {
    font-size: 24px;
    background: linear-gradient(45deg, #ff0066, #ff9900, #360774); /* Gradient effect */
    -webkit-background-clip: text; /* Clip the background to the text */
    color: transparent; /* Set the text color to transparent to show the gradient */
}
.bottom-nav .nav-item img {
    width: 20px; 
    height: 20px;
    border-radius: 50%;
}
.bottom-nav .nav-item span {
    font-size: 10px;
}

/* Hover and Click Effects */
.bottom-nav .nav-item:hover,
.bottom-nav .nav-item:active {
    background-color: rgba(255, 255, 255, 0.1); /* Change background color on hover/click */
    transform: translateY(-5px); /* Slight lift effect */
}

.bottom-nav .nav-item:hover i,
.bottom-nav .nav-item:active i {
    transform: scale(1.2); /* Slight enlargement of the icon */
}




@media (max-width: 991px) {
    #sidebars {
        width: 30% !important;
    }
}

@media (max-width: 768px) {
    body {
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch !important; /* Enables smooth scrolling on iOS */
      }
       .dynamic_placeholder section.container {
        display: contents !important;
    }
    .watch-container {
        padding: 0;
        height: 100vh;  
        padding-bottom: 47px;
       /* height: calc(var(--vh, 1vh)* 100) !important;*/
        width: -webkit-fill-available;
min-width: 100% !important;
    }
    .bottom-nav {
        display: inline-flex !important;
      
    }
    .video-wrapper {
        max-width: 100%;
        height: -webkit-fill-available;
       
    }
    
    .top-bar {
        padding: 20px !important;
    }
    
    
    
    br.showbreak {
        display: none !important;
    }
    
    
    body {
        margin: 0;
        padding-top: env(safe-area-inset-top) !important;
        padding-right: env(safe-area-inset-right) !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
        padding-left: env(safe-area-inset-left) !important;
        overflow-x: hidden !important;
        background-color: #000;
        box-sizing: border-box !important;
    }

    /* Flexbox for layout */
    .index-main-content {
        display: flex  !important;
        flex-direction: column !important;
        min-height: 100vh !important;
        padding: 0px;
     
      
        }
        ul.dropdown-menu.extended.short {
            right: 0 !important;

            left: auto;
           bottom: 50px !important;
        }
}

.interaction-icons {
    right: 5px;
}

.video-info {
    max-width: 100%;
}

.header_minified,
.scrmiss {
    display: none !important;
}
 


.hashtags,
.mentions{
background:transparent !important;
color:#2196f3 !important;
font-weight:600 !important;

}


/* ====================================================================
 * WT-Phase2 — Dark-mode + finishing touches for the watch player.
 *
 * The video player is already dark by design (black background everywhere
 * on .video-wrapper / .watch-section), so the dark-mode work here is
 * mostly about (a) the surrounding chrome — top bar, sidebar, scroll
 * arrows — and (b) sharpening the contrast on the interaction icons +
 * play/pause overlay when the surrounding page is in dark mode.
 *
 * Slice 36 theme variables (`--sb-*`) are used so the watch chrome
 * inherits the same palette as the rest of the app.
 * ==================================================================== */

/* Interaction icons readability — light shadow regardless of theme. */
.interaction-icons a i {
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
    transition: color .15s, transform .1s;
}
.interaction-icons a:active i { transform: scale(0.92); }
.interaction-icons a.is-active i {
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.interaction-icons a:hover i { transform: scale(1.06); }

/* "Loading more videos…" spinner state — make it visible on dark/light. */
.lmv-loading {
    position: absolute;
    bottom: 16px; left: 50%; transform: translateX(-50%);
    padding: 8px 14px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border-radius: 999px;
    font-size: .82rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 10;
}

/* Empty-state card used when discover/feed returns no videos. */
.wt-empty-state {
    text-align: center;
    color: #aab1c4;
    padding: 60px 20px;
}
.wt-empty-state i { font-size: 56px; opacity: 0.4; display: block; margin-bottom: 14px; }
.wt-empty-state h3 { color: #fff; font-weight: 600; margin: 0 0 6px; font-size: 1.1rem; }
.wt-empty-state p  { margin: 0 0 18px; font-size: 0.9rem; }
.wt-empty-state .btn { padding: 8px 20px; border-radius: 999px; }

/* Top bar / sidebar / scroll arrows pick up the theme palette so the
 * non-player chrome doesn't fight dark mode. */
body.theme-dark .notify-sidebar,
body.theme-dark .notify-sidebar .user-block,
body.theme-dark .notify-sidebar .user-menu-inner {
    background: var(--sb-surface, #1f2330) !important;
    color: var(--sb-text, #e9ecf2);
    border-color: var(--sb-border, #2c3142);
}
body.theme-dark .notify-sidebar .user-block h4,
body.theme-dark .notify-sidebar p,
body.theme-dark .notify-sidebar a {
    color: var(--sb-text, #e9ecf2) !important;
}
body.theme-dark .scroll-button {
    background: rgba(31,35,48,0.6) !important;
    color: var(--sb-text, #e9ecf2) !important;
}

/* Tighter mobile layout under 480px — interaction icons closer to the
 * right edge so they don't drift off-screen on narrow phones. */
@media (max-width: 480px) {
    .interaction-icons {
        right: 6px !important;
        top: 60% !important;
        gap: 12px;
    }
    .interaction-icons a i { font-size: 22px; }
    .interaction-icons span {
        font-size: 11px !important;
        margin-top: 2px;
    }
    .watch-container { min-width: 0 !important; }
    .scroll-button { display: none !important; }  /* phone uses native scroll */
}

/* 380px ultra-narrow fallback. */
@media (max-width: 380px) {
    .interaction-icons a i { font-size: 20px; }
    .interaction-icons span { font-size: 10px !important; }
}

/* =====================================================================
   Watch-Wire-2 — modal polish for upload / comments / tip.
   Theme-aware via the Slice 36 --sb-* CSS variables. All selectors are
   prefixed with .wt- so they never leak outside the watch module.
   ===================================================================== */

/* ----- shared bits ----- */
.wt-modal-stack { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.wt-field-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--sb-text-muted, #888);
    margin: 0 0 6px;
}
.wt-help {
    display: block;
    font-size: 12px;
    color: var(--sb-text-muted, #888);
    margin-top: 6px;
}
.wt-counter {
    display: block;
    font-size: 11px;
    color: var(--sb-text-muted, #888);
    text-align: right;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}
.wt-textarea, .wt-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--sb-border, #e6e6e6);
    border-radius: 8px;
    background-color: var(--sb-bg, #fff);
    color: var(--sb-text, #393a4f);
    font-size: 14px;
    font-family: inherit;
    line-height: 1.4;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.wt-textarea { resize: vertical; min-height: 60px; }
.wt-textarea:focus, .wt-input:focus {
    outline: none;
    border-color: var(--sb-accent, #00c0ef);
    box-shadow: 0 0 0 3px rgba(0,192,239,0.18);
}

/* ----- upload modal ----- */
.wt-up-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px dashed var(--sb-border, #d0d4dd);
    border-radius: 12px;
    padding: 28px 16px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
    background-color: var(--sb-bg, #fafbfc);
}
.wt-up-drop:hover, .wt-up-drop.is-dragover {
    border-color: var(--sb-accent, #00c0ef);
    background-color: rgba(0,192,239,0.05);
}
.wt-up-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.wt-up-icon {
    width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background-color: rgba(0,192,239,0.12);
    color: var(--sb-accent, #00c0ef);
}
.wt-up-icon i { font-size: 22px; }
.wt-up-primary { font-size: 14px; font-weight: 600; color: var(--sb-text, #393a4f); margin: 0; }
.wt-up-secondary { font-size: 12px; color: var(--sb-text-muted, #888); margin: 0; }
.wt-up-filename {
    display: none;
    align-items: center; gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--sb-border, #e6e6e6);
    border-radius: 8px;
    background-color: var(--sb-surface, #fff);
    font-size: 13px;
    margin-top: 8px;
}
.wt-up-filename.is-shown { display: flex; }
.wt-up-filename i.feather-file-text { color: var(--sb-accent, #00c0ef); flex-shrink: 0; }
.wt-up-filename .wt-up-fname {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--sb-text, #393a4f);
}
.wt-up-filename .wt-up-fsize { font-size: 11px; color: var(--sb-text-muted, #888); flex-shrink: 0; }

/* ----- comment rows (rendered server-side by watch/controllers/comments.php
   into .wt-slide-cmt-list — the wrap/scroll/empty/loading/compose/input/send
   variants of this block were an earlier iteration and are dead) ----- */
.wt-cmt-row {
    display: flex;
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--sb-border, rgba(128,128,128,0.12));
    align-items: flex-start;
}
.wt-cmt-row:last-child { border-bottom: none; }
.wt-cmt-avatar {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--sb-surface, #fff);
    box-shadow: 0 0 0 1px var(--sb-border, #e6e6e6);
}
.wt-cmt-body { flex: 1; min-width: 0; }
.wt-cmt-bubble {
    background-color: var(--sb-bg, #f3f4f6);
    border-radius: 14px;
    padding: 8px 12px;
    word-wrap: break-word;
    word-break: break-word;
}
.wt-cmt-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--sb-text, #393a4f);
    text-decoration: none;
    margin-right: 6px;
}
.wt-cmt-name:hover { text-decoration: underline; color: var(--sb-text, #393a4f); }
.wt-cmt-text { font-size: 13.5px; line-height: 1.4; color: var(--sb-text, #393a4f); margin-top: 2px; }
.wt-cmt-meta { font-size: 11px; color: var(--sb-text-muted, #888); margin-top: 4px; padding-left: 12px; }

/* SweetAlert popup hardening — let our padding breathe inside SA2's
   (the video-upload modal is the only remaining SweetAlert2-based panel;
   gifts use the shared gift sheet, assets/js/gifts.js) */
.swal2-popup .wt-modal-stack { margin-top: 8px; }

/* Theme-dark hover tweak for the upload drop zone (bright rgba overlay on dark) */
body.theme-dark .wt-up-drop:hover,
body.theme-dark .wt-up-drop.is-dragover { background-color: rgba(32,200,240,0.08); }

/* Phone breakpoint */
@media (max-width: 480px) {
    .wt-up-drop { padding: 22px 12px; }
}

/* ===== WATCH PAGE — TIME DISPLAY ===== */
.seek-time-display {
    position: absolute;
    bottom: 14px;
    left: 12px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    z-index: 21;
    line-height: 1;
    display: none;
}

@media (max-width: 480px) {
    .seek-time-display {
        font-size: 11px;
        bottom: 12px;
    }
    /* Bump seek bar up above home indicator on mobile */
    .seek-bar {
        bottom: env(safe-area-inset-bottom, 0px);
        margin-bottom: 5px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   WT-REELS — TikTok / Facebook Reels parity overrides
   All rules appended below existing file to minimise merge risk.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Progress bar: 2px, pure white, TikTok style ── */
.seek-bar {
    height: 2px !important;
    background-color: rgba(255,255,255,0.25) !important;
    bottom: 0 !important;
    padding-bottom: 0 !important;
    z-index: 25 !important;
}
.seek-bar:hover,
.seek-bar:active {
    height: 4px !important;
}
.seek-bar .progress {
    background: #ffffff !important;
    border-radius: 0 !important;
    transition: width 0.1s linear;
}
.seek-bar .seek-thumb {
    opacity: 0;
    transition: opacity 0.15s ease, width 0.15s ease, height 0.15s ease;
}
.seek-bar:hover .seek-thumb,
.seek-bar:active .seek-thumb {
    opacity: 1;
    width: 14px !important;
    height: 14px !important;
}
.seek-bar .seek-buffer {
    background: rgba(255,255,255,0.35) !important;
}

/* ── Top bar: gradient for readability over bright video ── */
.top-bar {
    background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, transparent 100%) !important;
    padding: 12px 16px !important;
    z-index: 20;
}
.top-bar a,
.top-bar span,
.top-bar .volume-control {
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.top-bar a img.logo_img {
    height: 28px;
    width: auto;
    filter: brightness(0) invert(1);
}

/* ── Bottom-left info overlay: TikTok gradient ── */
.video-description-wrap {
    bottom: 0 !important;
    left: 0 !important;
    padding: 0 !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4px) !important;
    width: calc(100% - 64px) !important;
    z-index: 15 !important;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.72) 0%,
        rgba(0,0,0,0.45) 45%,
        transparent 100%
    ) !important;
    color: #fff !important;
    pointer-events: none;
}
.video-description-wrap a,
.video-description-wrap button,
.video-description-wrap .gift,
.video-description-wrap .seemore {
    pointer-events: auto;
}
.video-info-area {
    background: transparent !important;
    padding: 10px 14px 14px !important;
}
.video-info-area p,
span.creator_name {
    color: #ffffff !important;
    font-weight: 700;
    font-size: 14px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    margin-top: 5px;
    margin-bottom: 4px;
    line-height: 1.3;
}
.video-description {
    color: #ffffff !important;
    font-size: 13px;
    line-height: 1.45;
    margin-top: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}
.video-description.is-expanded {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}
.video-description .text-blue,
.video-description .seemore {
    color: rgba(255,255,255,0.75) !important;
    font-weight: 600;
}

/* ── Follow/Subscribe button ── */
.subscribe-button {
    background: transparent !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(255,255,255,0.85) !important;
    border-radius: 4px !important;
    padding: 2px 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: background 0.15s ease;
    pointer-events: auto;
}
.subscribe-button:hover,
.subscribe-button:active {
    background: rgba(255,255,255,0.18) !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}
.subscribe-button:active { transform: scale(0.93); }

/* ═══════════════════════════════════════════════════════════════
   WATCH BUTTON SYSTEM
   Every clickable control in the module (panel CTAs, icon buttons,
   share/cup/follow buttons) gets the same motion, press feedback,
   and keyboard-focus treatment so the module reads as one design,
   not a collection of buttons added at different times. Additive —
   layered on top of each control's own existing rules above rather
   than rewriting them, to keep this change low-risk.
   ═══════════════════════════════════════════════════════════════ */

.wt-slide-cmt-close,
.wt-slide-cmt-send,
.wt-share-app,
.wt-share-copy-btn,
.subscribe-button,
.volume-control,
.scroll-button {
    transition: transform 0.15s cubic-bezier(0.4,0,0.2,1),
                opacity 0.15s ease,
                background-color 0.15s ease,
                border-color 0.15s ease,
                box-shadow 0.15s ease;
}

/* Keyboard focus — none of these had a visible focus state before. */
.wt-slide-cmt-close:focus-visible,
.wt-slide-cmt-send:focus-visible,
.wt-share-app:focus-visible,
.wt-share-copy-btn:focus-visible,
.subscribe-button:focus-visible {
    outline: 2px solid var(--sb-accent, #00c0ef);
    outline-offset: 2px;
}

/* Uniform press feedback where a control didn't already define its own. */
.wt-slide-cmt-send:active,
.wt-share-copy-btn:active,
.wt-share-app:active .wt-share-app-icon {
    transform: scale(0.93);
}

/* .wt-slide-cmt-close was a bare glyph with almost no hit area (padding:0 2px
   at font-size 22px ≈ ~26×22px) — give it a real 40px circular tap target
   with a hover/press capsule, without growing the visible glyph. Shared by
   the slide-up panels (comments/share). */
.wt-slide-cmt-close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.wt-slide-cmt-close:hover { background: rgba(128,128,128,0.15); }
.wt-slide-cmt-close:active { transform: scale(0.9); }

/* .wt-slide-cmt-send is disabled while a comment is posting (wtPostComment)
   but had no visual state for it — looked identically clickable. */
.wt-slide-cmt-send:disabled { opacity: 0.5; cursor: not-allowed; }

/* .wt-share-copy-btn touch target */
.wt-share-copy-btn { min-height: 44px; }

/* .scroll-button was 30×30 — bump to the module's 40px icon-button floor
   and rescale the chevron glyph to match. */
.scroll-button { width: 40px; height: 40px; }
.scroll-button:before { padding: 7px; }
.scroll-button:hover { background-color: rgba(0,0,0,0.65); }
body.theme-dark .scroll-button:hover { background: rgba(31,35,48,0.8) !important; }

.volume-control:hover { transform: scale(1.08); }

/* "Load more" comments — was missing any interactive feedback at all. */
.wt-slide-cmt-more {
    min-height: 44px;
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.wt-slide-cmt-more:hover { background: rgba(128,128,128,0.1); }
.wt-slide-cmt-more:active { transform: scale(0.98); }
.wt-slide-cmt-more:focus-visible {
    outline: 2px solid var(--sb-accent, #00c0ef);
    outline-offset: -2px;
}

/* Link-preview dismiss "×" — kept compact (it's a minor action on a small
   card, not a primary CTA) but still gets hover/press/focus feedback. */
.wt-cmt-link-remove {
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.wt-cmt-link-remove:active { transform: scale(0.9); }
.wt-cmt-link-remove:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
    .wt-slide-cmt-close,
    .wt-slide-cmt-send,
    .wt-share-app,
    .wt-share-copy-btn,
    .subscribe-button,
    .volume-control,
    .scroll-button,
    .wt-slide-cmt-more,
    .wt-cmt-link-remove {
        transition: none;
    }
    .wt-slide-cmt-close:active,
    .wt-slide-cmt-send:active,
    .wt-share-copy-btn:active,
    .wt-share-app:active .wt-share-app-icon,
    .subscribe-button:active,
    .volume-control:hover,
    .scroll-button:active,
    .wt-slide-cmt-more:active,
    .wt-cmt-link-remove:active {
        transform: none;
    }
}

/* ── Interaction icons: bottom-anchored right column, TikTok style ── */
.interaction-icons {
    position: absolute !important;
    top: auto !important;
    bottom: 80px !important;
    right: 8px !important;
    width: 52px;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 18px !important;
    z-index: 20;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.interaction-icons > a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    transition: transform 0.12s ease;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
}
.interaction-icons > a i,
.interaction-icons > a .fa {
    font-size: 28px !important;
    color: #ffffff !important;
    display: block;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.interaction-icons > a.is-active i,
.interaction-icons > a.is-active .fa {
    color: #ff3040 !important;
}
.interaction-icons > a.iv-save.is-active i,
.interaction-icons > a.iv-save.is-active .fa {
    color: #f6c800 !important;
}
.interaction-icons > a:active { transform: scale(0.88); }
.interaction-icons > a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
    border-radius: 50%;
}
@media (prefers-reduced-motion: reduce) {
    .interaction-icons > a { transition: none; }
    .interaction-icons > a:active { transform: none; }
}
.interaction-icons > span {
    font-size: 12px !important;
    color: #ffffff !important;
    font-weight: 600;
    line-height: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    margin-top: -14px !important;
    display: block;
    min-width: 44px;
    text-align: center;
}
.interaction-icons > a:first-child img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    border: 2px solid #ffffff !important;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* ── Misc text color fixes ── */
.no-more-videos { color: var(--sb-text-muted) !important; }
.wt-empty-state { color: var(--sb-text-muted) !important; }

/* ── Heart pop animation ── */
@keyframes ivHeartPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.45); }
    70%  { transform: scale(0.88); }
    100% { transform: scale(1); }
}
.interaction-icons .fa.iv-pop {
    animation: ivHeartPop 0.32s ease forwards;
}

/* ═══════════════════════════════════════════════════════════════════════
   COMPREHENSIVE MEDIA QUERIES
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1440px+ large desktop ── */
@media (min-width: 1440px) {
    .interaction-icons > a i,
    .interaction-icons > a .fa { font-size: 30px !important; }
    .interaction-icons > a:first-child img { width: 52px !important; height: 52px !important; }
}

/* ── max-width: 1200px ── */
@media (max-width: 1200px) {
    .interaction-icons > a i,
    .interaction-icons > a .fa { font-size: 27px !important; }
}

/* ── max-width: 991px (tablet landscape) — supplement existing rule ── */
@media (max-width: 991px) {
    .interaction-icons { right: 6px !important; gap: 16px !important; }
    .interaction-icons > a i,
    .interaction-icons > a .fa { font-size: 26px !important; }
}

/* ── max-width: 768px (tablet portrait) — supplement existing rule ── */
@media (max-width: 768px) {
    .video-description-wrap { width: calc(100% - 60px) !important; }
    .interaction-icons {
        right: 4px !important;
        gap: 14px !important;
        bottom: 72px !important;
    }
}

/* ── max-width: 600px (large phone / landscape) — NEW breakpoint ── */
@media (max-width: 600px) {
    .interaction-icons {
        right: 4px !important;
        width: 48px !important;
        gap: 12px !important;
        bottom: 68px !important;
    }
    .interaction-icons > a i,
    .interaction-icons > a .fa { font-size: 24px !important; }
    .interaction-icons > a:first-child img { width: 44px !important; height: 44px !important; }
    .video-description-wrap { width: calc(100% - 56px) !important; }
    /* .video-info-area { padding: 8px 12px 12px !important; } */
    span.creator_name { font-size: 13px; }
    .video-description { font-size: 12px; }
}

/* ── max-width: 480px (phone portrait) — override existing top-% rules ── */
@media (max-width: 480px) {
    .interaction-icons {
        top: auto !important;
        bottom: 66px !important;
        right: 4px !important;
        gap: 10px !important;
        width: 44px !important;
    }
    .interaction-icons > a { min-width: 40px; min-height: 40px; }
    .interaction-icons > a i,
    .interaction-icons > a .fa { font-size: 22px !important; }
    .interaction-icons > span { font-size: 11px !important; margin-top: -12px !important; }
    .interaction-icons > a:first-child img { width: 40px !important; height: 40px !important; }
    .video-description-wrap { width: calc(100% - 52px) !important; }
    .video-description { -webkit-line-clamp: 2; line-clamp: 2; }
    .top-bar { padding: 8px 12px !important; }
    .top-bar a img.logo_img { height: 24px; }
}

/* ── max-width: 380px (ultra-narrow) — override existing rules ── */
@media (max-width: 380px) {
    .interaction-icons {
        bottom: 62px !important;
        right: 2px !important;
        gap: 8px !important;
    }
    .interaction-icons > a i,
    .interaction-icons > a .fa { font-size: 20px !important; }
    .interaction-icons > span { font-size: 10px !important; }
    .interaction-icons > a:first-child img { width: 36px !important; height: 36px !important; }
    .video-description-wrap { width: calc(100% - 46px) !important; }
    .video-info-area { padding: 6px 10px 10px !important; }
}

/* ── Accessibility: respect reduced-motion preference ── */
@media (prefers-reduced-motion: reduce) {
    .interaction-icons .fa.iv-pop { animation: none; }
    .seek-bar,
    .seek-bar .progress,
    .seek-bar .seek-thumb { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   FACEBOOK REELS DESKTOP LAYOUT
   ≥769px: row layout — fixed-width video | icons beside it
   ≤768px: full-width video — icons overlaid (TikTok mobile style)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Desktop: row layout ── */
@media (min-width: 769px) {
    .watch-container {
        flex-direction: row !important;
        align-items: flex-end !important;
        justify-content: center !important;
        gap: 16px !important;
    }

    /* Fixed portrait width — caps at 9:16 ratio of viewport height or 480px */
    .video-wrapper {
        flex: 0 0 auto !important;
        width: min(480px, calc(100vh * 9 / 16)) !important;
        max-width: min(480px, calc(100vh * 9 / 16)) !important;
        min-width: 0 !important;
    }

    /* Description overlay: full width, explicitly absolute within video-wrapper */
    .video-description-wrap {
        position: absolute !important;
        width: calc(100% - 12px) !important;
    }

    /* Interaction icons: static flex column, beside the video */
    .interaction-icons {
        position: static !important;
        top: auto !important;
        bottom: auto !important;
        right: auto !important;
        transform: none !important;
        flex-shrink: 0;
        align-self: flex-end;
        padding-bottom: 100px;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
        width: 56px !important;
    }
}

/* ── Large desktop: slightly wider portrait frame ── */
@media (min-width: 1200px) {
    .video-wrapper {
        width: min(520px, calc(100vh * 9 / 16)) !important;
        max-width: min(520px, calc(100vh * 9 / 16)) !important;
    }
}

/* ── Mobile (≤768px): full-width video with icons overlaid ── */
@media (max-width: 768px) {
    .watch-container {
        flex-direction: column !important;
        position: relative !important;
        align-items: stretch !important;
    }

    /* Video fills full mobile screen width */
    .video-wrapper {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Description overlay: leave gap on right for icon column */
    .video-description-wrap {
        width: calc(100% - 60px) !important;
    }

    /* Icons: back to absolute overlay within .watch-container */
    .interaction-icons {
        position: absolute !important;
        right: 4px !important;
        bottom: 72px !important;
        top: auto !important;
        align-self: auto !important;
        padding-bottom: 0 !important;
        width: 48px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   SLIDE-UP COMMENT PANEL
   ═══════════════════════════════════════════════════════════════ */

.wt-slide-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9998;
    cursor: pointer;
}
.wt-slide-backdrop.is-visible { display: block; }

.wt-slide-cmt-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0;
    overflow: hidden;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    background: var(--sb-surface, #1a1d26);
    border-radius: 20px 20px 0 0;
    transition: height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.35);
}
.wt-slide-cmt-panel.is-open { height: 65vh; }

@media (min-width: 769px) {
    .wt-slide-cmt-panel {
        left: 57%;
        right: auto;
        width: min(520px, 100vw);
        transform: translateX(-50%);
    }
}

.wt-slide-cmt-handle {
    width: 40px;
    height: 4px;
    background: var(--sb-border, rgba(255,255,255,0.18));
    border-radius: 2px;
    margin: 10px auto 6px;
    flex-shrink: 0;
    cursor: grab;
}

.wt-slide-cmt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 16px 10px;
    border-bottom: 1px solid var(--sb-border, rgba(255,255,255,0.1));
    flex-shrink: 0;
}
.wt-slide-cmt-count {
    font-size: 14px;
    font-weight: 700;
    color: var(--sb-text, #ffffff);
}
.wt-slide-cmt-close {
    background: none;
    border: none;
    color: var(--sb-text, #ffffff);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    opacity: 0.75;
}
.wt-slide-cmt-close:hover { opacity: 1; }

.wt-slide-cmt-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px 14px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.wt-slide-cmt-loading {
    display: flex;
    justify-content: center;
    padding: 24px 0;
    color: var(--sb-text-muted, rgba(255,255,255,0.5));
    font-size: 13px;
}

.wt-slide-cmt-more {
    display: block;
    text-align: center;
    padding: 10px;
    font-size: 13px;
    color: var(--sb-accent, #00c0ef);
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
}

.wt-slide-cmt-compose {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
    border-top: 1px solid var(--sb-border, rgba(255,255,255,0.1));
    background: var(--sb-surface, #1a1d26);
    flex-shrink: 0;
}
.wt-slide-cmt-my-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1.5px solid var(--sb-border, rgba(255,255,255,0.15));
}

.wt-slide-cmt-textarea {
    flex: 1;
    background: var(--sb-bg, rgba(255,255,255,0.07));
    border: 1px solid var(--sb-border, rgba(255,255,255,0.12));
    border-radius: 20px;
    color: var(--sb-text, #fff);
    font-size: 14px;
    resize: none;
    min-height: 36px;
    line-height: 1.4;
    padding: 7px 14px;
    outline: none;
}

.wt-slide-cmt-compose .emojionearea {
    flex: 1;
    background: var(--sb-bg, rgba(255,255,255,0.07)) !important;
    border: 1px solid var(--sb-border, rgba(255,255,255,0.12)) !important;
    border-radius: 20px !important;
    min-height: 36px;
    display: flex;
    align-items: center;
    box-shadow: none !important;
}
.wt-slide-cmt-compose .emojionearea-editor {
    color: var(--sb-text, #fff) !important;
    font-size: 14px !important;
    padding: 7px 10px !important;
    min-height: 22px !important;
    outline: none;
}
.wt-slide-cmt-compose .emojionearea-button {
    color: var(--sb-text-muted, rgba(255,255,255,0.5)) !important;
    margin-right: 8px;
}

.wt-slide-cmt-send {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--sb-accent, #00c0ef);
    border: none;
    color: #fff;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.15s ease;
}
.wt-slide-cmt-send:hover { opacity: 0.85; }

body:not(.theme-dark) .wt-slide-cmt-panel {
    background: #ffffff;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
}
body:not(.theme-dark) .wt-slide-cmt-compose { background: #ffffff; }
body:not(.theme-dark) .wt-slide-cmt-header { border-color: #eeeeee; }
body:not(.theme-dark) .wt-slide-cmt-count,
body:not(.theme-dark) .wt-slide-cmt-close { color: #000000; }
body:not(.theme-dark) .wt-slide-cmt-compose .emojionearea {
    background: #f5f5f5 !important;
    border-color: #e0e0e0 !important;
}
body:not(.theme-dark) .wt-slide-cmt-compose .emojionearea-editor { color: #000 !important; }

/* ═══════════════════════════════════════════════════════════════
   SHARE PANEL
   ═══════════════════════════════════════════════════════════════ */

.wt-slide-share-panel.is-open { height: 300px; }

.wt-share-body {
    padding: 16px 14px 20px;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
    overflow-y: auto;
}

.wt-share-apps {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.wt-share-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    color: var(--sb-text, #ffffff);
    font-size: 12px;
    min-width: 60px;
}

.wt-share-app-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    background: var(--sb-border, rgba(255,255,255,0.15));
    transition: opacity 0.15s;
}
.wt-share-app:hover .wt-share-app-icon { opacity: 0.8; }

.wt-share-icon-wa  { background: #25D366; }
.wt-share-icon-fb  { background: #1877F2; }
.wt-share-icon-tw  { background: #1DA1F2; }
.wt-share-icon-tg  { background: #229ED9; }

.wt-share-app-label {
    font-size: 11px;
    color: var(--sb-text-muted, rgba(255,255,255,0.6));
    text-align: center;
}

.wt-share-copy-row {
    display: flex;
    gap: 8px;
    align-items: center;
    background: var(--sb-bg, rgba(255,255,255,0.07));
    border: 1px solid var(--sb-border, rgba(255,255,255,0.12));
    border-radius: 10px;
    padding: 6px 8px 6px 12px;
}

.wt-share-url-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--sb-text, #ffffff);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wt-share-copy-btn {
    flex-shrink: 0;
    background: var(--sb-accent, #00c0ef);
    border: none;
    border-radius: 7px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 5px 14px;
    cursor: pointer;
    transition: opacity 0.15s;
}
.wt-share-copy-btn:hover { opacity: 0.85; }

/* Light mode */
body:not(.theme-dark) .wt-slide-share-panel { background: #ffffff; }
body:not(.theme-dark) .wt-share-app { color: #000000; }
body:not(.theme-dark) .wt-share-app-label { color: rgba(0,0,0,0.55); }
body:not(.theme-dark) .wt-share-copy-row {
    background: #f5f5f5;
    border-color: #e0e0e0;
}
body:not(.theme-dark) .wt-share-url-input { color: #000000; }

/* ═══════════════════════════════════════════════════════════════
   COMMENT PANEL — URL LINK PREVIEW CARD
   ═══════════════════════════════════════════════════════════════ */

.wt-cmt-link-preview-wrap {
    padding: 0 12px;
    flex-shrink: 0;
}

.wt-cmt-link-loading {
    display: flex;
    justify-content: center;
    padding: 8px 0;
    color: var(--sb-text-muted, rgba(255,255,255,0.45));
    font-size: 13px;
}

.wt-cmt-link-card {
    position: relative;
    border-radius: 12px;
    border: 1px solid var(--sb-border, rgba(255,255,255,0.12));
    overflow: hidden;
    margin-bottom: 6px;
    background: var(--sb-bg, rgba(255,255,255,0.06));
}

.wt-cmt-link-remove {
    position: absolute;
    top: 6px;
    right: 8px;
    background: rgba(0,0,0,0.55);
    border: none;
    color: #fff;
    font-size: 13px;
    line-height: 1;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wt-cmt-link-remove:hover { background: rgba(0,0,0,0.8); }

.wt-cmt-link-inner {
    display: flex;
    text-decoration: none;
    align-items: stretch;
    min-height: 72px;
}

.wt-cmt-link-media {
    width: 90px;
    flex-shrink: 0;
    overflow: hidden;
    background: #000;
}
.wt-cmt-link-media img,
.wt-cmt-link-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wt-cmt-link-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 10px 8px 10px;
    min-width: 0;
    border-left: 1px solid var(--sb-border, rgba(255,255,255,0.1));
}

.wt-cmt-link-domain {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sb-text-muted, rgba(255,255,255,0.45));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wt-cmt-link-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--sb-text, #ffffff);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wt-cmt-link-desc {
    font-size: 11px;
    color: var(--sb-text-muted, rgba(255,255,255,0.5));
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Light mode */
body:not(.theme-dark) .wt-cmt-link-card {
    background: #f5f5f5;
    border-color: #e0e0e0;
}
body:not(.theme-dark) .wt-cmt-link-text { border-color: #e0e0e0; }
body:not(.theme-dark) .wt-cmt-link-domain { color: rgba(0,0,0,0.45); }
body:not(.theme-dark) .wt-cmt-link-title { color: #000000; }
body:not(.theme-dark) .wt-cmt-link-desc { color: rgba(0,0,0,0.5); }