/*
 * Path: /assets/css/viewer.css
 * Filename: viewer.css
 * Purpose: Viewer interface styles — player layout, chat panel, channel switcher, info overlay, mobile responsive.
 */

/* =========================================================
   VIEWER LAYOUT — Full-screen immersive
   ========================================================= */
.viewer-wrapper {
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #000;
}

.viewer-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    min-width: 0;
}

.viewer-side-panel {
    width: 360px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border-left: 1px solid var(--color-border);
    transition: transform var(--transition-slow), width var(--transition-slow);
}

.viewer-side-panel.collapsed {
    width: 0;
    border-left: none;
    overflow: hidden;
}

/* =========================================================
   PLAYER AREA
   ========================================================= */
.player-container {
    flex: 1;
    position: relative;
    background: #000;
    overflow: hidden;
}

.player-iframe-wrapper {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.player-iframe-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Overlay that suppresses YouTube controls */
.player-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    cursor: default;
}

.player-overlay .control-passthrough {
    position: absolute;
    z-index: 3;
    cursor: pointer;
    pointer-events: auto;
}

.player-mute-btn {
    bottom: 80px;
    left: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    transition: all var(--transition-fast);
    backdrop-filter: blur(8px);
}

.player-mute-btn:hover {
    background: rgba(58, 177, 0, 0.4);
    border-color: rgba(58, 177, 0, 0.5);
    box-shadow: var(--shadow-glow);
}

.player-fullscreen-btn {
    bottom: 80px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    transition: all var(--transition-fast);
    backdrop-filter: blur(8px);
}

.player-fullscreen-btn:hover {
    background: rgba(58, 177, 0, 0.4);
    border-color: rgba(58, 177, 0, 0.5);
    box-shadow: var(--shadow-glow);
}

.player-toggle-panel-btn {
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    transition: all var(--transition-fast);
    backdrop-filter: blur(8px);
}

.player-toggle-panel-btn:hover {
    color: #fff;
    background: rgba(58, 177, 0, 0.3);
}

/* =========================================================
   NOW PLAYING BAR
   ========================================================= */
.now-playing-bar {
    position: relative;
    z-index: 10;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0.9rem 1.25rem;
    animation: slideUpBar 0.5s ease forwards;
}

@keyframes slideUpBar {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.np-channel {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.np-channel-logo {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: var(--color-surface-2);
    overflow: hidden;
}

.np-channel-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.np-channel-name {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary);
}

.np-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.np-title {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
}

.np-creator {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.5);
}

.np-creator a {
    color: rgba(255, 255, 255, 0.6);
    transition: color var(--transition-fast);
}

.np-creator a:hover {
    color: var(--color-primary);
}

.np-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.35rem;
}

.np-category {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-dim);
    background: rgba(255, 255, 255, 0.05);
    padding: 0.15em 0.5em;
    border-radius: 3px;
}

.np-time {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.35);
}

.np-next {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.3);
    margin-left: auto;
}

.np-next span {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
}

.np-sponsor {
    margin-top: 0.3rem;
    font-size: 0.7rem;
    color: var(--color-text-dim);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.np-sponsor img {
    width: 16px;
    height: 16px;
    border-radius: 2px;
}

/* =========================================================
   CHANNEL SWITCHER PANEL (inside side panel)
   ========================================================= */
.switcher-header {
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.switcher-header h4 {
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0;
}

.switcher-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

.switcher-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid transparent;
}

.switcher-item:hover {
    background: var(--color-surface-2);
    border-color: var(--color-border);
}

.switcher-item.active {
    background: rgba(58, 177, 0, 0.08);
    border-color: rgba(58, 177, 0, 0.2);
}

.switcher-item-logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--color-surface-3);
    overflow: hidden;
    flex-shrink: 0;
}

.switcher-item-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.switcher-item-info {
    flex: 1;
    min-width: 0;
}

.switcher-item-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 0.15rem;
}

.switcher-item-program {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.switcher-item-viewers {
    flex-shrink: 0;
}

/* =========================================================
   CHAT PANEL
   ========================================================= */
.chat-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--color-border);
    min-height: 0;
}

.chat-header {
    padding: 0.65rem 1.15rem;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.chat-header-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.chat-message {
    animation: chatFadeIn 0.25s ease forwards;
}

@keyframes chatFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.chat-message-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-right: 0.4rem;
}

.chat-message-text {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    word-break: break-word;
    line-height: 1.4;
}

.chat-message-time {
    font-size: 0.65rem;
    color: var(--color-text-dim);
    margin-left: 0.3rem;
}

.chat-input-area {
    padding: 0.75rem;
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
}

.chat-input-wrapper {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

.chat-input {
    flex: 1;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-family: var(--font-ui);
    font-size: 0.8125rem;
    padding: 0.55rem 0.85rem;
    resize: none;
    outline: none;
    max-height: 80px;
    transition: border-color var(--transition-fast);
    line-height: 1.4;
}

.chat-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(58, 177, 0, 0.12);
}

.chat-input::placeholder {
    color: var(--color-text-dim);
}

.chat-send-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--transition-fast);
}

.chat-send-btn:hover {
    background: var(--color-primary-hover);
    box-shadow: var(--shadow-glow);
}

.chat-send-btn:disabled {
    background: var(--color-surface-3);
    color: var(--color-text-dim);
    cursor: not-allowed;
    box-shadow: none;
}

.chat-rate-limit {
    font-size: 0.7rem;
    color: var(--color-danger);
    margin-top: 0.3rem;
    display: none;
}

/* =========================================================
   MOBILE TAP-TO-START OVERLAY
   ========================================================= */
.mobile-start-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: var(--color-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    cursor: pointer;
}

.mobile-start-overlay .start-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(58, 177, 0, 0.15);
    border: 2px solid var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    font-size: 2rem;
    animation: startPulse 2s ease-in-out infinite;
}

@keyframes startPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(58, 177, 0, 0.3); }
    50% { transform: scale(1.05); box-shadow: 0 0 0 20px rgba(58, 177, 0, 0); }
}

.mobile-start-overlay .start-text {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--color-text);
}

.mobile-start-overlay .start-subtext {
    font-size: 0.8rem;
    color: var(--color-text-dim);
}

/* =========================================================
   SPONSOR OVERLAY BUG
   ========================================================= */
.sponsor-bug {
    position: absolute;
    bottom: 100px;
    left: 20px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(0, 0, 0, 0.7);
    padding: 0.35rem 0.65rem;
    border-radius: var(--radius-sm);
    backdrop-filter: blur(6px);
    animation: sponsorFade 10s ease forwards;
    pointer-events: none;
}

.sponsor-bug img {
    width: 18px;
    height: 18px;
    border-radius: 2px;
}

.sponsor-bug span {
    font-size: 0.65rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
}

@keyframes sponsorFade {
    0% { opacity: 0; }
    5% { opacity: 1; }
    85% { opacity: 1; }
    100% { opacity: 0; }
}

/* =========================================================
   FULLSCREEN OVERRIDES
   ========================================================= */
/* We use .is-fullscreen class (set by JS) instead of the :fullscreen
   pseudo-selector because iOS Safari does not support the Fullscreen API
   on arbitrary elements — document.fullscreenElement is always null on iOS.
   The JS toggleFullscreen() sets/removes .is-fullscreen on #viewerWrapper. */

.viewer-wrapper.is-fullscreen .viewer-side-panel {
    display: none !important;
}

/* In fullscreen the now-playing-bar overlays the bottom of the player.
   It starts visible; JS auto-hides after 4s and toggles on tap. */
.viewer-wrapper.is-fullscreen .now-playing-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* viewer-main must be relative so the bar can absolute-position within it */
.viewer-wrapper.is-fullscreen .viewer-main {
    position: relative;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 991.98px) {
    .viewer-side-panel {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 100;
        width: 340px;
        transform: translateX(100%);
        box-shadow: var(--shadow-lg);
    }

    .viewer-side-panel.open {
        transform: translateX(0);
    }

    .viewer-side-panel.collapsed {
        width: 340px;
        transform: translateX(100%);
    }
}

@media (max-width: 575.98px) {
    .viewer-side-panel {
        width: 100%;
    }

    .now-playing-bar {
        padding: 0.7rem 1rem;
    }

    .np-title {
        font-size: 0.875rem;
    }

    .np-meta {
        flex-wrap: wrap;
        row-gap: 0.25rem;
    }

    .np-next {
        margin-left: 0;
        flex-basis: 100%;
    }
}

/* Mobile backdrop */
.side-panel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 99;
    display: none;
}

.side-panel-backdrop.show {
    display: block;
}

/* =========================================================
   ADDENDUM — Progress bar, show modal, floating logo,
               channel nav arrows, category filter, info btn
   ========================================================= */

/* ── Floating Gobuxx logo ─────────────────────────────────── */
.gbx-floating-logo {
    position: fixed;
    top: 14px;
    left: 16px;
    z-index: 200;
    display: flex;
    align-items: center;
    pointer-events: auto;
    text-decoration: none;
    opacity: 0.85;
    transition: opacity var(--transition-fast);
}
.gbx-floating-logo:hover { opacity: 1; }
.gbx-floating-logo img {
    height: 28px;
    width: auto;
    display: block;
}

/* ── Progress bar ─────────────────────────────────────────── */
.gbx-progress-wrap {
    padding: 0 0 0.5rem;
}
.gbx-progress-bar {
    height: 3px;
    background: rgba(255,255,255,0.12);
    border-radius: 99px;
    overflow: hidden;
    cursor: default;
    pointer-events: none;
}
.gbx-progress-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: 99px;
    transition: width 0.8s linear;
    width: 0%;
}
.gbx-progress-times {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.3);
    margin-top: 0.2rem;
    padding: 0 1px;
}

/* ── Info button (now-playing bar) ────────────────────────── */
.np-info-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.45);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0 0.3rem;
    display: inline-flex;
    align-items: center;
    transition: color var(--transition-fast);
    vertical-align: middle;
    flex-shrink: 0;
}
.np-info-btn:hover { color: var(--color-primary); }

/* ── Channel nav arrows ───────────────────────────────────── */
.gbx-ch-nav {
    display: flex;
    gap: 2px;
    margin-left: auto;
}
.gbx-ch-arrow {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-text-muted);
    width: 26px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.7rem;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.gbx-ch-arrow:hover {
    background: var(--color-surface-2);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* PWA: minimum 44x44px touch target on touch/mobile devices (Apple & Google HIG) */
@media (hover: none), (max-width: 991.98px) {
    .gbx-ch-nav {
        gap: 6px;
    }
    .gbx-ch-arrow {
        width: 44px;
        height: 44px;
        font-size: 0.9rem;
    }
}

/* ── Category filter ──────────────────────────────────────── */
.gbx-cat-filter {
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
}
.gbx-cat-select {
    width: 100%;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 0.78rem;
    padding: 0.3rem 0.6rem;
    outline: none;
    cursor: pointer;
}
.gbx-cat-select:focus { border-color: var(--color-primary); }

/* ── Viewer badge in switcher ─────────────────────────────── */
.viewer-badge {
    font-size: 0.7rem;
    color: var(--color-text-dim);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

/* ── Channel watermark (top-right of player) ─────────────────────────────── */
.player-channel-watermark {
    position: absolute;
    top: 20px;
    right: 64px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(6px);
    transition: opacity 0.2s ease, border-color 0.2s ease;
    padding: 4px;
    max-width: 120px;
    height: 40px;
}

.player-channel-watermark:hover {
    opacity: 1 !important;
    border-color: rgba(255,255,255,0.2);
}

.player-channel-watermark img {
    height: 30px;
    width: auto;
    max-width: 110px;
    object-fit: contain;
    display: block;
    border-radius: 4px;
}

.player-channel-watermark .watermark-text {
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 108px;
}

/* Floating logo (top-left, from player.js) should sit ABOVE watermark */
.gbx-floating-logo {
    z-index: 201;
}

/* ── Quality picker ───────────────────────────────────────────────────────── */
.player-quality-btn {
    bottom: 80px;
    left: 76px; /* mute btn is at left:20px + 44px + 12px gap */
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    border: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    transition: all var(--transition-fast);
    backdrop-filter: blur(8px);
    cursor: pointer;
}

.player-quality-btn:hover {
    background: rgba(58,177,0,0.4);
    border-color: rgba(58,177,0,0.5);
    box-shadow: var(--shadow-glow);
}

.player-quality-menu {
    position: absolute;
    bottom: 136px;
    left: 66px;
    z-index: 20;
    background: rgba(12,12,12,0.96);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    padding: 0.4rem 0;
    min-width: 140px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.7);
    backdrop-filter: blur(12px);
    animation: gbxMenuIn 0.15s ease;
}

@keyframes gbxMenuIn {
    from { opacity:0; transform:translateY(6px); }
    to   { opacity:1; transform:translateY(0); }
}

.quality-menu-title {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.3);
    padding: 0.25rem 0.85rem 0.4rem;
}

.quality-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.45rem 0.85rem;
    background: none;
    border: none;
    color: rgba(255,255,255,0.75);
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    text-align: left;
}

.quality-option:hover {
    background: rgba(255,255,255,0.07);
    color: #fff;
}

.quality-option.active {
    color: var(--color-primary);
    font-weight: 600;
}

.quality-option.active i {
    color: var(--color-primary);
    font-size: 0.75rem;
}

.quality-unavailable {
    color: rgba(255,255,255,0.3) !important;
    font-size: 0.75rem !important;
    cursor: default !important;
    padding: 0.5rem 0.85rem !important;
    white-space: normal;
    line-height: 1.4;
}
.quality-unavailable:hover { background: none !important; }

/* ═══════════════════════════════════════════════════════════
   PLAYER OVERLAY — unified tablet/mobile control layout
   The previous rules gave some buttons a mobile override and not
   others (e.g. .player-toggle-panel-btn got a new `top` on mobile
   but .player-channel-watermark never did; .player-quality-btn had
   NO mobile override at all while its neighbors did) — that's what
   caused the top and bottom icon rows to drift out of alignment
   with each other. This block repositions the whole overlay as one
   consistent system for both tablet and mobile, and pulls the
   bottom row down closer to the true bottom edge (respecting the
   safe-area inset) so it doesn't sit in the middle of the video.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    /* ── Top row: channel watermark + panel toggle, same top offset ── */
    .player-channel-watermark,
    .player-toggle-panel-btn {
        top: 12px;
    }
    .player-toggle-panel-btn {
        right: 12px;
        width: 40px;
        height: 40px;
    }
    .player-channel-watermark {
        /* toggle-panel-btn right(12) + width(40) + 8px gap */
        right: 60px;
        height: 40px;
    }

    /* ── Bottom row: mute + quality + fullscreen, same bottom offset,
           pulled close to the real bottom edge instead of floating at
           80px where it used to sit over the video content ── */
    .player-mute-btn,
    .player-quality-btn,
    .player-fullscreen-btn {
        bottom: calc(16px + env(safe-area-inset-bottom));
        width: 40px;
        height: 40px;
    }
    .player-mute-btn { left: 12px; }
    /* mute left(12) + width(40) + 8px gap */
    .player-quality-btn { left: 60px; }
    .player-fullscreen-btn { right: 12px; }

    .player-quality-menu {
        bottom: calc(64px + env(safe-area-inset-bottom));
        left: 12px;
    }
}

@media (max-width: 575.98px) {
    /* Slightly tighter sizing on phones specifically, same alignment rules as above */
    .player-channel-watermark,
    .player-toggle-panel-btn,
    .player-mute-btn,
    .player-quality-btn,
    .player-fullscreen-btn {
        width: 36px;
        height: 36px;
    }
    .player-channel-watermark { max-width: 100px; }
    .player-channel-watermark img { height: 26px; }

    .player-mute-btn { left: 10px; }
    .player-quality-btn { left: 54px; } /* 10 + 36 + 8 */
    .player-fullscreen-btn { right: 10px; }
    .player-channel-watermark { right: 54px; } /* 10 + 36 + 8 */
    .player-toggle-panel-btn { right: 10px; }
}

/* ── Side panel z-index — above floating logo on mobile ─────────────────── */
@media (max-width: 991.98px) {
    .viewer-side-panel {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 85vw;
        max-width: 340px;
        z-index: 300;        /* above .gbx-floating-logo (200) and .gbx-floating-logo (201) */
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: -8px 0 40px rgba(0,0,0,0.6);
    }

    .viewer-side-panel.open {
        transform: translateX(0);
    }

    /* Backdrop sits between player and panel */
    .side-panel-backdrop {
        position: fixed;
        inset: 0;
        z-index: 299;
        background: rgba(0,0,0,0.55);
        backdrop-filter: blur(2px);
        display: none;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .side-panel-backdrop.show {
        display: block;
        opacity: 1;
    }
}

/* ── Fullscreen now-playing bar — mobile landscape compact layout ────────── */
@media (max-width: 900px) and (orientation: landscape) {
    .viewer-wrapper.is-fullscreen .now-playing-bar {
        padding: 0.4rem 0.85rem;
    }
    .viewer-wrapper.is-fullscreen .np-title {
        font-size: 0.8rem;
    }
    .viewer-wrapper.is-fullscreen .np-meta {
        margin-top: 0.15rem;
    }
    .viewer-wrapper.is-fullscreen .np-next,
    .viewer-wrapper.is-fullscreen .np-sponsor {
        display: none;
    }
}

.watch-creator-cta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.6rem;
      padding: 0.55rem 1rem;
      background: rgba(58,177,0,0.06);
      border-top: 1px solid rgba(58,177,0,0.15);
      color: var(--color-primary);
      font-size: 0.78rem;
      font-weight: 500;
      text-decoration: none;
      transition: background 0.15s ease;
      flex-shrink: 0;
  }
  .watch-creator-cta:hover {
      background: rgba(58,177,0,0.12);
      color: var(--color-accent);
      text-decoration: none;
  }
  .watch-creator-cta i {
      font-size: 0.85rem;
      flex-shrink: 0;
  }
  .watch-creator-cta em { font-style: italic; }
  .watch-creator-cta strong { font-weight: 700; }
  @media (max-width: 600px) {
      .watch-creator-cta { font-size: 0.72rem; gap: 0.4rem; }
  }