/* ============================================================
   VROLL -- TikTok/Reels-style video browsing overlay

   All selectors scoped to .vroll-active to avoid contaminating
   feed-view video containers outside fullscreen mode.
   ============================================================ */

/* --- Interaction Buttons Column (right side, TikTok layout) --- */

/* Desktop: nav-up tops at 134px (98px bottom + 36px height) → column starts at 158px (24px gap) */
.vroll-active .vroll-interaction-col {
    position: absolute;
    right: 12px;
    bottom: 158px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    z-index: 20;
    pointer-events: auto;
}

.vroll-active .vroll-interaction-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    padding: 0;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.vroll-active .vroll-interaction-btn .vroll-btn-icon {
    font-size: 28px;
    line-height: 1;
    transition: transform 0.15s ease;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}

.vroll-active .vroll-interaction-btn:active .vroll-btn-icon {
    transform: scale(0.85);
}

.vroll-active .vroll-interaction-btn .vroll-btn-count {
    font-size: 11px;
    font-weight: 600;
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* --- Color states for interaction buttons --- */

.vroll-active .vroll-interaction-btn.vroll-liked .vroll-btn-icon {
    color: #ff2d55;
}

.vroll-active .vroll-interaction-btn.vroll-retweeted .vroll-btn-icon {
    color: #00c853;
}

.vroll-active .vroll-interaction-btn.vroll-bookmarked .vroll-btn-icon {
    color: #ffc107;
}

/* --- Text Overlay (bottom strip with gradient) --- */

.vroll-active .vroll-text-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 60px;
    padding: 48px 16px 14px 16px;
    padding-bottom: max(14px, env(safe-area-inset-bottom, 14px));
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.35) 55%,
        transparent 100%
    );
    z-index: 15;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}

.vroll-active .vroll-text-author {
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 3px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    line-height: 1.2;
}

.vroll-active .vroll-text-body {
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    line-height: 1.4;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

/* --- Expanded Text Overlay (bottom half of screen) --- */

.vroll-active .vroll-text-expanded {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    max-height: calc(60vh - env(safe-area-inset-bottom, 0px)); /* cap on short landscape screens */
    background: rgba(0, 0, 0, 0.88);
    z-index: 25;
    padding: 24px 16px 20px 16px;
    overflow-y: auto;
    color: #fff;
    display: none;
    pointer-events: auto;
    border-top: 1px solid rgba(255,255,255,0.12);
}

.vroll-active .vroll-text-expanded.vroll-visible {
    display: block;
    animation: vrollSlideUp 0.25s ease-out;
}

.vroll-active .vroll-text-expanded .vroll-text-expanded-content {
    font-size: 15px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.vroll-active .vroll-text-expanded .vroll-more-btn {
    display: inline-block;
    margin-top: 16px;
    padding: 10px 20px;
    background: rgba(255,255,255,0.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 24px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
}

.vroll-active .vroll-text-expanded .vroll-more-btn:hover {
    background: rgba(255,255,255,0.2);
}

/* --- Inline Reply Form (slides up from bottom) --- */

/* Forms are position:fixed on document.body (not inside the video container).
   This prevents iOS touch events from bubbling through the container's capture
   handlers, and prevents dvh-shrink from pushing the video when keyboard opens.
   The JS _vrollAttachViewportRepo() updates `bottom` via VisualViewport API
   to keep the form just above the keyboard; the transition makes it smooth.

   Scoped to body.vroll-session-active so these fixed-position, dark-background
   styles never accidentally apply to any other element on the page with these
   class names (e.g. third-party plugins, future templates). The class is added
   to <body> on Vroll enter and removed on Vroll exit. */
body.vroll-session-active .vroll-reply-form,
body.vroll-session-active .vroll-retweet-form {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 2030;
    padding: 16px 16px 20px 16px;
    padding-bottom: max(20px, env(safe-area-inset-bottom, 16px));
    display: none;
    pointer-events: auto;
    border-top: 1px solid rgba(255,255,255,0.15);
    border-radius: 16px 16px 0 0;
    transition: bottom 0.15s ease-out;
}

body.vroll-session-active .vroll-reply-form.vroll-visible,
body.vroll-session-active .vroll-retweet-form.vroll-visible {
    display: block;
    animation: vrollSlideUp 0.25s ease-out;
}

body.vroll-session-active .vroll-reply-input {
    width: 100%;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 10px;
    color: #fff;
    padding: 10px 14px;
    font-size: 14px;
    resize: none;
    min-height: 44px;
    max-height: 120px;
    outline: none;
    transition: border-color 0.15s;
}

body.vroll-session-active .vroll-reply-input:focus {
    border-color: rgba(255,255,255,0.4);
}

body.vroll-session-active .vroll-reply-input::placeholder {
    color: rgba(255,255,255,0.4);
}

body.vroll-session-active .vroll-reply-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

body.vroll-session-active .vroll-reply-char-count {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
}

body.vroll-session-active .vroll-reply-char-count.vroll-over-limit {
    color: #ff2d55;
}

body.vroll-session-active .vroll-reply-submit {
    padding: 9px 22px;
    border-radius: 20px;
    background: var(--bs-primary, #0d6efd);
    color: #fff;
    border: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    transition: opacity 0.15s;
}

body.vroll-session-active .vroll-reply-submit:disabled {
    opacity: 0.5;
    cursor: default;
}

body.vroll-session-active .vroll-reply-close {
    position: absolute;
    top: 4px;
    right: 8px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 24px;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    line-height: 44px;
}

/* --- Animations --- */

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

/* --- Native controls above tap-catcher (z-index:11) so they remain clickable --- */

.vroll-active .video-fullscreen-btn,
.vroll-active .video-nav-btn,
.vroll-active .video-muted-indicator {
    z-index: 12 !important;
}

/* --- Nav arrows stay visible in Vroll mode (desktop mouse/keyboard fallback) --- */

/* --- Mobile adjustments --- */

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    .vroll-active .vroll-interaction-btn .vroll-btn-icon {
        font-size: 32px;
    }

    /* Mobile: nav-up tops at 184px (132px bottom + 52px height) → column starts at 208px (24px gap) */
    .vroll-active .vroll-interaction-col {
        right: 8px;
        bottom: 208px;
        gap: 28px;
    }

    .vroll-active .vroll-text-overlay {
        right: 54px;
    }

    .vroll-active .vroll-text-author {
        font-size: 13px;
    }

    .vroll-active .vroll-text-body {
        font-size: 12px;
    }

    /* Forms on mobile — keep them compact and above safe areas */
    body.vroll-session-active .vroll-reply-form,
    body.vroll-session-active .vroll-retweet-form {
        right: 0;
        padding: 12px 12px 14px 12px;
        padding-bottom: max(14px, env(safe-area-inset-bottom, 12px));
    }

    body.vroll-session-active .vroll-reply-input {
        font-size: 13px;
        padding: 8px 12px;
        min-height: 38px;
        max-height: 90px;
    }

    body.vroll-session-active .vroll-reply-submit {
        font-size: 12px;
        padding: 8px 18px;
    }

    body.vroll-session-active .vroll-reply-close {
        font-size: 20px;
        top: 2px;
        right: 4px;
    }
}

/* --- Extra-small screens (iPhone SE, etc.) --- */

/* Extra-small (iPhone SE): nav-up still at 184px → keep 208px bottom, tighten gap slightly */
@media (max-width: 380px) {
    .vroll-active .vroll-interaction-col {
        gap: 20px;
        bottom: 208px;
    }

    body.vroll-session-active .vroll-reply-form,
    body.vroll-session-active .vroll-retweet-form {
        padding: 10px 10px 12px 10px;
    }

    body.vroll-session-active .vroll-reply-input {
        font-size: 12px;
        min-height: 34px;
    }
}

/* --- Landscape mode adjustments --- */

@media (orientation: landscape) and (max-height: 500px) {
    /* On short landscape viewports the expanded text overlay would cover the entire video;
       cap it to 40% and reduce padding so at least part of the video remains visible. */
    .vroll-active .vroll-text-expanded {
        height: 40%;
        max-height: 40vh;
        padding: 12px 16px 10px 16px;
    }

    /* Tighten interaction column spacing so buttons don't run off screen */
    .vroll-active .vroll-interaction-col {
        gap: 16px;
        bottom: 120px;
    }
}