/**
 * Mobile Buttons
 * Action button row, scrolling behavior, unified button styles
 */

/* Video Action Button Row - Single Horizontally Scrollable Row */
.video-action-rows {
    margin-top: 15px;
    margin-bottom: 15px;
}

.action-button-row {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    padding-bottom: 14px; /* Extra padding for scrollbar visibility */
    align-items: center; /* Use center for consistent alignment */
    overflow-x: scroll !important; /* Changed from auto to scroll to always show scrollbar */
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Ensure all direct children align properly */
.action-button-row > * {
    align-self: center; /* Center each item vertically */
    vertical-align: middle; /* Additional alignment fix */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: translateY(0) !important; /* Reset any transforms */
}

/* Always show scrollbar on all devices - SLIM BUT VISIBLE */
.action-button-row::-webkit-scrollbar {
    height: 6px !important; /* Slim height */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.action-button-row::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.2) !important; /* Visible white track */
    border-radius: 3px;
    margin: 0 5px; /* Add some margin on sides */
}

.action-button-row::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.6) !important; /* Visible white scrollbar thumb */
    border-radius: 3px;
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.2);
}

.action-button-row::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.8) !important; /* Brighter on hover */
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.3);
}

/* Force scrollbar visibility on iOS/Android */
.action-button-row {
    scrollbar-width: thin !important; /* Firefox - thin scrollbar */
    scrollbar-color: rgba(255, 255, 255, 0.6) rgba(255, 255, 255, 0.2) !important; /* Firefox */
    /* Add padding to ensure scrollbar doesn't overlap content */
    padding-bottom: 12px !important;
}

/* iOS specific scrollbar visibility */
@supports (-webkit-touch-callout: none) {
    .action-button-row::-webkit-scrollbar {
        -webkit-appearance: none;
        height: 10px;
        display: block !important;
    }
}

/* Ensure consistent button styling and uniform height */
.action-button-row .videocommon-btn,
.action-button-row .video-action-btn,
.action-button-row .btn {
    white-space: nowrap;
    flex: 0 0 auto;
    min-width: fit-content;
    height: 36px; /* Fixed height for all buttons */
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    line-height: 1;
    box-sizing: border-box;
}

/* Override Bootstrap button sizes to match our height */
.action-button-row .btn-sm {
    height: 36px !important;
    padding: 8px 16px !important;
}

/* Ensure dropdown doesn't break layout */
.action-button-row .dropdown {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 36px; /* Match button height */
    vertical-align: middle;
}

/* Ensure dropdown button matches height and alignment */
.action-button-row .dropdown button {
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    margin: 0 !important;
    line-height: normal !important;
}

/* Fix for specific problematic buttons */
.action-button-row #episodesDropdownBtn,
.action-button-row .usershowchat-btn,
.action-button-row #open-quickpeek {
    position: relative !important;
    top: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: none !important;
}

/* Mobile specific adjustments */
/* Custom always-visible scrollbar for mobile */
.mobile-scroll-indicator {
    display: none;
    position: absolute;
    bottom: 2px;
    left: 10px;
    right: 10px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.scroll-indicator-thumb {
    position: absolute;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 2px;
    min-width: 40px;
    transition: transform 0.1s ease-out;
}

@media (max-width: 767px) {
    .action-button-row {
        padding-bottom: 10px; /* Space for custom scrollbar */
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important; /* IE */
        align-items: baseline !important; /* Use baseline alignment on mobile */
    }

    /* Force all buttons to align to baseline on mobile */
    .action-button-row > * {
        vertical-align: baseline !important;
    }

    /* Show custom scrollbar */
    .mobile-scroll-indicator {
        display: block !important;
    }

    .action-buttons-wrapper {
        padding-bottom: 8px;
    }

    /* Hide native scrollbar on webkit browsers */
    .action-button-row::-webkit-scrollbar {
        display: none !important;
    }

    /* Keep text visible on all mobile screens */
    .action-button-row .video-action-btn span,
    .action-button-row .videocommon-btn span {
        display: inline !important; /* Always show text */
    }

    /* Mobile button height consistency */
    .action-button-row .videocommon-btn,
    .action-button-row .video-action-btn,
    .action-button-row .btn {
        height: 34px !important;
        display: inline-flex;
        align-items: center;
    }

    /* Override the 48% width rule from style.css for screens <= 412px */
    @media (max-width: 412px) {
        .action-button-row .videocommon-btn,
        .action-button-row .video-action-btn,
        .action-button-row .btn {
            width: auto !important;
            padding: 0 6px !important;
            font-size: 12px;
        }
    }

    /* Adjust for smaller screens but maintain height */
    @media (max-width: 360px) {
        .action-button-row .video-action-btn,
        .action-button-row .videocommon-btn,
        .action-button-row .btn {
            height: 32px !important;
            padding: 0 4px !important;
            font-size: 11px; /* Slightly smaller font */
        }

        .action-button-row .video-action-btn span,
        .action-button-row .videocommon-btn span {
            display: inline !important; /* Keep text visible */
        }
    }
}

/* Tablet - still allow scrolling if needed */
@media (min-width: 768px) and (max-width: 1199px) {
    .action-button-row {
        /* Keep horizontal scroll for tablets too */
        overflow-x: auto;
    }
}

/* Large desktop - show all if possible, still allow scroll if needed */
@media (min-width: 1200px) {
    .action-button-row {
        overflow-x: auto;
        /* Will only scroll if content exceeds container width */
    }
}

/* Remove viewers button completely */
#viewers-btn {
    display: none !important;
}

/* Ensure dropdown menu doesn't cause horizontal scroll */
.action-button-row .dropdown-menu {
    position: absolute !important;
    transform: none !important;
}

/* Unified button styles for consistency */
.videocommon-btn,
.video-action-btn,
.user-follow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px; /* Fixed height for consistency */
    padding: 0 16px; /* Horizontal padding only, height controls vertical */
    border-radius: 18px; /* Half of height for perfect pill shape */
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    white-space: nowrap;
    gap: 6px;
    line-height: 1;
    vertical-align: middle;
    box-sizing: border-box;
}

/* Hover effects for all buttons */
.videocommon-btn:hover,
.video-action-btn:hover,
.user-follow-btn:hover:not(.loading) {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
    color: #ffffff;
    text-decoration: none;
}

/* Active/pressed state */
.videocommon-btn:active,
.video-action-btn:active,
.user-follow-btn:active:not(.loading) {
    transform: translateY(0);
    background-color: rgba(255, 255, 255, 0.15);
}

/* QuickPeek button special styling */
.action-button-row .btn-primary {
    background: linear-gradient(90deg, #007bff 0%, #0056b3 100%);
    border: 1px solid #0056b3;
    color: #ffffff;
    font-weight: 600;
    height: 36px !important; /* Match other buttons */
    padding: 0 16px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.action-button-row .btn-primary:hover {
    background: linear-gradient(90deg, #0056b3 0%, #004094 100%);
    border-color: #004094;
}