/* Mobile: Keep original below-video layout */
    /* ============================================
       MOBILE LAYOUT - Absolute Position with Spacer
       ============================================ */
    @media (max-width: 767px) {
        /* Remove bottom padding from video-player-left-content column on mobile */
        .video-player-left-content {
            padding-bottom: 0 !important;
            margin-bottom: 0 !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        /* Remove horizontal padding from right content on mobile */
        .video-player-right-content {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
        
        /* Hide desktop elements on mobile */
        .streaming-chat-desktop {
            display: none !important;
        }

        /* Mobile Full-Screen Chat Styles - Hidden on Desktop */
        .mobile-chat-fullscreen {
            display: none !important; /* Hidden by default */
        }

        /* Mobile-only chat styles */
        @media (max-width: 767px) {
            .mobile-chat-fullscreen {
                display: none; /* Can be shown on mobile */
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: #18181b;
                z-index: 99999;
                flex-direction: column;
                transform: translateY(100%);
                transition: transform 0.3s ease-out;
                width: 100%;
                box-sizing: border-box;
            }

            .mobile-chat-fullscreen.active {
                display: flex !important;
                transform: translateY(0);
            }

            /* Calculate height based on video aspect ratio */
            .mobile-chat-fullscreen {
                /* Start below video (16:9 aspect ratio) */
                top: 56.25vw;
                /* For videos in portrait mode, limit max top */
                max-height: calc(100vh - 200px);
            }
        }

        /* Keyboard open adjustments - shrink chat area */
        .mobile-chat-fullscreen.keyboard-visible {
            /* Keep positioned below video but shrink height */
            top: 56.25vw;
            bottom: var(--keyboard-height, 0);
            height: auto;
            overflow: hidden;
        }

        /* Ensure video stays visible and fixed */
        .mobile-chat-active.keyboard-visible .video-player-left-content {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 99998;
            height: var(--video-height, 56.25vw);
            max-height: 40vh; /* Limit video size on small screens */
            background: #000;
        }

        /* Keep video aspect ratio */
        .mobile-chat-active.keyboard-visible .video-listing,
        .mobile-chat-active.keyboard-visible .video-player-area {
            height: 100%;
            width: 100%;
        }

        .mobile-chat-active.keyboard-visible video,
        .mobile-chat-active.keyboard-visible .video-js {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .mobile-chat-fullscreen.keyboard-visible .mobile-chat-header {
            flex-shrink: 0;
            min-height: 40px;
            height: 40px;
        }

        .mobile-chat-fullscreen.keyboard-visible .mobile-chat-body {
            flex: 1;
            min-height: 0;
            overflow: hidden;
            height: calc(var(--viewport-height, 100vh) - 56.25vw - var(--keyboard-height, 0) - 40px - 56px);
        }

        .mobile-chat-fullscreen.keyboard-visible .mobile-fullscreen-messages {
            height: 100%;
            overflow-y: auto;
        }

        .mobile-chat-fullscreen.keyboard-visible .mobile-chat-footer {
            position: sticky;
            bottom: 0;
            flex-shrink: 0;
            background: #1f1f23;
            z-index: 100000;
        }

        @media (orientation: landscape) {
            .mobile-chat-fullscreen {
                top: 40vh; /* Adjust for landscape */
            }

            .mobile-chat-fullscreen.keyboard-visible {
                /* In landscape, video takes less vertical space */
                top: var(--video-height, 30vh);
                height: var(--available-height, calc(100vh - 30vh));
            }

            .mobile-chat-active.keyboard-visible .video-player-left-content {
                max-height: 30vh; /* Smaller video in landscape */
            }
        }

        /* Ensure no horizontal scrolling */
        .mobile-chat-fullscreen * {
            max-width: 100%;
            box-sizing: border-box;
        }

        /* Prevent form from causing overflow */
        #mobile-fullscreen-chat-form {
            width: 100%;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .mobile-chat-header {
            background: #1f1f23;
            border-bottom: 1px solid #3f3f46;
            padding: 8px 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;
            min-height: 40px;
            height: 40px;
        }

        .mobile-chat-title {
            color: #fff;
            font-size: 13px;
            font-weight: 600;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 6px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .mobile-chat-title i {
            font-size: 14px;
        }

        /* Make close button prominent but compact */
        #close-mobile-fullscreen-chat {
            padding: 4px 10px;
            font-size: 12px;
            height: 28px;
            background: rgba(255, 50, 50, 0.2);
            border-color: rgba(255, 50, 50, 0.4);
        }

        #close-mobile-fullscreen-chat:active {
            background: rgba(255, 50, 50, 0.3);
        }

        .mobile-chat-body {
            flex: 1;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .mobile-fullscreen-messages {
            flex: 1;
            overflow-y: auto;
            padding: 8px;
            -webkit-overflow-scrolling: touch;
            background: #18181b; /* Match desktop chat background */
        }

        .mobile-chat-footer {
            background: #1f1f23;
            border-top: 1px solid #3f3f46;
            padding: 8px;
            flex-shrink: 0;
            position: relative;
            width: 100%;
            box-sizing: border-box;
        }

        .mobile-chat-input-group {
            display: flex;
            gap: 6px;
            align-items: center;
            width: 100%;
            box-sizing: border-box;
        }

        .mobile-fullscreen-input {
            flex: 1;
            min-width: 0; /* Prevent overflow */
            background: #2a2a2d;
            border: 1px solid #3f3f46;
            border-radius: 20px;
            color: #fff;
            padding: 8px 14px;
            font-size: 16px; /* Keep 16px to prevent iOS zoom */
            line-height: 1.2;
            outline: none;
            box-sizing: border-box;
            width: 100%;
            height: 36px;
        }

        .mobile-fullscreen-input:focus {
            border-color: #007bff;
            background: #33333a;
        }

        .mobile-chat-send-btn {
            background: #007bff;
            border: none;
            color: #fff;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
            transition: all 0.2s;
            padding: 0;
            min-width: 34px;
        }

        .mobile-chat-send-btn i {
            font-size: 14px;
        }

        .mobile-chat-send-btn:active {
            background: #0056b3;
            transform: scale(0.95);
        }

        .mobile-chat-login-prompt {
            text-align: center;
            color: #888;
            padding: 12px;
            font-size: 13px;
        }

        /* Prevent body scroll when chat is active */
        body.mobile-chat-active {
            overflow: hidden;
            /* Removed position: fixed to match comments modal behavior */
            /* position: fixed causes weird whitish rendering of content behind */
        }

        /* Hide other content when chat is active */
        /* COMMENTED OUT - Let content show behind chat like comments sheet does */
        /*
        .mobile-chat-active .video-action-rows,
        .mobile-chat-active .video-description-content,
        .mobile-chat-active .mobile-comments-section,
        .mobile-chat-active .video-player-comment,
        .mobile-chat-active .related-like-section,
        .mobile-chat-active .video-player-right-content {
            display: none !important;
        }
        */

        /* Ensure video stays visible but fixed */
        /* COMMENTED OUT - Causes weird rendering when showing content behind chat */
        /* This was needed for old approach but breaks layout flow now */
        /*
        .mobile-chat-active .video-player-left-content {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 99998;
            background: #000;
        }
        */

        /* Smooth transitions */
        .mobile-chat-fullscreen {
            transition: top 0.3s ease, height 0.3s ease;
        }

        /* Mobile chat messages - Match desktop styling with compact sizing */
        .mobile-fullscreen-messages .leftchat,
        .mobile-fullscreen-messages .rightchat {
            margin-bottom: 6px;
            font-size: 12px;
            display: flex;
            align-items: flex-start;
        }

        .mobile-fullscreen-messages .leftchat {
            justify-content: flex-start;
        }

        .mobile-fullscreen-messages .rightchat {
            justify-content: flex-end;
        }

        .mobile-fullscreen-messages .chatuserimg {
            flex-shrink: 0;
        }

        .mobile-fullscreen-messages .chatuserimg img {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            object-fit: cover;
        }

        .mobile-fullscreen-messages .chatuser-content {
            max-width: 70%;
        }

        .mobile-fullscreen-messages .chatuser-content p {
            margin: 0;
            padding: 4px 8px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 4px;
            font-size: 13px;
            line-height: 1.3;
            word-wrap: break-word;
        }

        .mobile-fullscreen-messages .rightchat .chatuser-content p {
            background: rgba(0, 123, 255, 0.2);
            border: 1px solid rgba(0, 123, 255, 0.3);
        }

        .mobile-fullscreen-messages .leftchat .chatuser-content p {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* Compact timestamps */
        .mobile-fullscreen-messages .chat-timestamp {
            font-size: 10px !important;
            color: #888;
            opacity: 0.7;
            margin-top: 2px;
            display: block;
        }

        /* Message alignment */
        .mobile-fullscreen-messages .leftchat .chatuserimg {
            margin-right: 6px;
        }

        .mobile-fullscreen-messages .rightchat .chatuserimg {
            margin-left: 6px;
            order: 2;
        }

        .mobile-fullscreen-messages .rightchat .chatuser-content {
            order: 1;
            text-align: right;
        }
        
        .video-player-comment {
            display: none !important;
        }
        
        /* Keep body background and scrolling */
        body {
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            /* Don't override body background */
        }
        
        /* Video wrapper - absolute positioned */
        .video-with-chat-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            height: 56.25vw; /* 16:9 aspect ratio */
            max-height: 35vh; /* Limit to 35% of viewport */
            background: #000;
            z-index: 100;
            display: block !important;
            gap: 0 !important;
            max-width: 100% !important;
        }
        
        /* Video container */
        .video-listing {
            position: relative;
            width: 100%;
            height: 100%;
            background: #000;
            flex: none !important;
            max-width: 100% !important;
        }
        
        /* Video element */
        #myvideo-1,
        .video-js {
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            object-fit: contain;
            background: #000;
        }
        
        /* Override Video.js responsive styles */
        .video-js.vjs-fluid,
        .video-js.vjs-16-9,
        .video-js.vjs-4-3 {
            padding-top: 0 !important;
            height: 100% !important;
        }
        
        /* Spacer element - dynamically matches video height */
        .mobile-video-spacer {
            display: block;
            width: 100%;
            /* Height will be set dynamically by JavaScript - no constraints */
            height: auto;
            min-height: 0;
            max-height: none !important; /* No max-height limit */
            background: transparent !important;
            pointer-events: none;
            visibility: hidden;
            margin: 0 !important;
            padding: 0 !important;
            transition: height 0.3s ease;
        }
        
        /* Main content area after video */
        .video-player-full-content {
            position: relative;
            z-index: 1;
            background: transparent;
            min-height: calc(100vh - 35vh);
        }
        
        .video-player-full-content .container {
            padding: 15px;
            background: transparent;
            max-width: 100%;
        }
        
        /* Content spacing */
        .video-player-top-heading-block {
            padding-top: 8px; /* Reduced from 15px */
            margin-bottom: 8px; /* Reduced from 10px */
        }

        .video-player-top-heading-block h2 {
            font-size: 20px; /* Increased from 16px */
            line-height: 1.3;
            font-weight: 600; /* Make it bolder */
        }
        
        /* Back arrow */
        .fixed-back-arrow {
            position: fixed;
            top: 10px;
            left: 10px;
            z-index: 200;
            background: rgba(0, 0, 0, 0.7);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
        }
        
        .fixed-back-arrow i {
            font-size: 16px;
            color: #fff;
        }
        
        /* Mobile Comments - YouTube Style */
        .mobile-comments-section {
            margin-top: 6px;
            padding: 0; /* Match container width - no horizontal padding */
            margin-bottom: 0;
            display: block !important;
        }
        
        .mobile-comments-wrapper {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 12px;
            overflow: hidden;
            transition: all 0.3s ease;
            margin: 0 5px; /* Same margins as content above */
        }
        
        .mobile-comments-header {
            padding: 12px 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            border-bottom: 1px solid rgba(255, 255, 255, 0.15);
            background: rgba(0, 0, 0, 0.3);
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }
        
        .mobile-comments-header:active {
            background: rgba(255, 255, 255, 0.1);
        }
        
        .mobile-comments-header h6 {
            margin: 0;
            font-size: 14px;
            color: #fff;
            font-weight: 600;
        }
        
        #mobile-comment-count-display {
            background: #007bff;
            color: #fff;
            border-radius: 12px;
            padding: 2px 8px;
            font-size: 11px;
            font-weight: 600;
            margin-left: 8px;
            display: inline-block;
            min-width: 24px;
            text-align: center;
        }
        
        #mobile-comments-chevron {
            color: #fff;
            transition: transform 0.3s ease;
            font-size: 14px;
        }
        
        .mobile-comments-wrapper.expanded #mobile-comments-chevron {
            transform: rotate(180deg);
        }
        
        .mobile-comment-input-wrapper {
            padding: 10px 15px;
            background: rgba(0, 0, 0, 0.2);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .mobile-comment-input {
            width: 100%;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            padding: 10px 15px;
            color: #fff;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .mobile-comment-input:focus {
            outline: none;
            background: rgba(255, 255, 255, 0.15);
            border-color: rgba(255, 255, 255, 0.3);
        }
        
        .mobile-comment-input::placeholder {
            color: rgba(255, 255, 255, 0.6);
        }
        
        /* Comments container */
        .mobile-comments-container {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease;
            background: rgba(0, 0, 0, 0.2);
        }
        
        .mobile-comments-list {
            padding: 15px;
            /* Remove scrolling from this container */
            overflow: visible;
        }
        
        /* Expanded state */
        .mobile-comments-wrapper.expanded .mobile-comments-container {
            max-height: 400px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .mobile-comments-wrapper.expanded {
            background: rgba(255, 255, 255, 0.1);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }
        
        /* Hide duplicate elements in mobile comments */
        .mobile-comments-wrapper.expanded .totalcomment-box,
        .mobile-comments-wrapper.expanded .comment-input-field {
            display: none !important;
        }
        
        /* Remove scrolling from ALL inner containers when in mobile */
        .mobile-comments-wrapper.expanded .comment-container {
            overflow: visible !important;
            max-height: none !important;
            height: auto !important;
        }
        
        /* Remove inline styles that cause scrolling */
        .mobile-comments-container .comment-container[style] {
            overflow: visible !important;
            max-height: none !important;
        }
        
        /* Ensure the Livewire container doesn't scroll */
        .mobile-comments-container > div > div {
            overflow: visible !important;
            max-height: none !important;
        }
        
        .mobile-comments-list .video-user-comment-list {
            padding: 0;
            margin: 0;
        }
        
        .mobile-comments-list .userimg img {
            width: 32px;
            height: 32px;
        }
        
        .mobile-comments-list .comment-text {
            font-size: 13px;
        }
        
        /* Ensure comment actions work on mobile */
        .mobile-comments-list .comment-actions {
            display: flex !important;
            gap: 10px;
        }
        
        .mobile-comments-list .comment-like-btn,
        .mobile-comments-list .comment-dislike-btn,
        .mobile-comments-list .comment-reply-btn {
            cursor: pointer;
            padding: 5px 10px;
            font-size: 12px;
        }
        
        /* Full screen comments overlay */
        .mobile-comments-fullscreen {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #0f0f0f;
            z-index: 2000;
            transform: translateY(100%);
            transition: transform 0.3s ease;
            display: none;
        }
        
        .mobile-comments-fullscreen.active {
            display: block;
            transform: translateY(0);
        }
        
        .mobile-comments-fullscreen-header {
            position: sticky;
            top: 0;
            background: #1a1a1a;
            padding: 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            z-index: 10;
        }
        
        .mobile-comments-fullscreen-content {
            padding: 15px;
            overflow-y: auto;
            height: calc(100vh - 120px);
        }
        
        /* Apply desktop child-comment-list styles to mobile */
        .mobile-comments-wrapper .video-user-comment-list.child-comment-list {
            margin-top: 15px !important;
            padding-left: 35px !important;
            position: relative;
            display: none; /* Hidden by default */
            height: auto !important;
            overflow: visible !important;
            max-height: none !important;
        }
        
        /* Show when has 'show' class */
        .mobile-comments-wrapper .video-user-comment-list.child-comment-list.show {
            display: block !important;
            height: auto !important;
            overflow: visible !important;
            max-height: none !important;
        }
        
        /* Add vertical line for child comments */
        .mobile-comments-wrapper .video-user-comment-list.child-comment-list::before {
            content: '';
            position: absolute;
            left: 15px;
            top: 0;
            bottom: 0;
            width: 2px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 1px;
        }
        
        .mobile-comments-wrapper .video-user-comment-list.child-comment-list li {
            margin-bottom: 15px !important;
            display: list-item !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
        
        /* Smaller profile images for replies */
        .mobile-comments-wrapper .child-comment-list .usercomment-content .userimg img {
            width: 28px !important;
            height: 28px !important;
        }
        
        /* Style the reply section differently */
        .mobile-comments-wrapper .child-comment-list .comment-box {
            background: rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            padding: 8px;
            margin-bottom: 8px;
            display: block !important;
        }
        
        /* Ensure all reply content is visible when shown */
        .mobile-comments-wrapper .child-comment-list.show * {
            visibility: visible !important;
            opacity: 1 !important;
        }
        
        /* Add connection line from parent to child */
        .mobile-comments-wrapper .child-comment-list li:first-child::before {
            content: '';
            position: absolute;
            left: -20px;
            top: 15px;
            width: 20px;
            height: 2px;
            background: rgba(255, 255, 255, 0.1);
        }
    }
    
    .chat-header {
        background: #1f1f23;
        border-bottom: 1px solid #3f3f46;
        padding: 12px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
    }
    
    .chat-title {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .chat-title i {
        color: #007bff;
        font-size: 16px;
    }
    
    .chat-close-btn {
        background: none;
        border: none;
        color: #adadb8;
        font-size: 16px;
        cursor: pointer;
        padding: 4px;
        border-radius: 4px;
        transition: all 0.2s ease;
    }
    
    .chat-close-btn:hover {
        background: #3f3f46;
        color: #fff;
    }
    
    .chat-messages {
        flex: 1;
        overflow: hidden;
        background: #18181b;
    }
    
    .chat-messages .playervideouserchat {
        height: 100%;
        padding: 0;
        margin: 0;
        background: transparent;
        border: none;
        overflow-y: auto;
        padding: 8px 12px;
    }
    
    /* Custom scrollbar for chat */
    .chat-messages .playervideouserchat::-webkit-scrollbar {
        width: 6px;
    }
    
    .chat-messages .playervideouserchat::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .chat-messages .playervideouserchat::-webkit-scrollbar-thumb {
        background: #3f3f46;
        border-radius: 3px;
    }
    
    .chat-messages .playervideouserchat::-webkit-scrollbar-thumb:hover {
        background: #52525b;
    }
    
    .chat-input-area {
        background: #1f1f23;
        border-top: 1px solid #3f3f46;
        padding: 12px;
        flex-shrink: 0;
    }

    /* Only apply absolute positioning to full container chat input */
    .chat-full-container .chat-input-area {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 10000;
    }

    /* Safari-specific sticky input fixes */
    @supports (-webkit-touch-callout: none) {
        /* iOS Safari */
        .chat-full-container {
            position: fixed !important;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            height: 100vh;
            height: -webkit-fill-available;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .chat-full-container .chat-messages {
            flex: 1;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 60px; /* Space for input area */
        }

        .chat-full-container .chat-input-area {
            position: fixed !important;
            bottom: 0 !important;
            left: 0 !important;
            right: 0 !important;
            width: 100% !important;
            z-index: 10001 !important;
            background: #1f1f23 !important;
            border-top: 1px solid #3f3f46 !important;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        /* When keyboard is open on Safari */
        .safari-keyboard-open .chat-full-container {
            height: 100%;
            position: absolute;
        }

        .safari-keyboard-open .chat-input-area {
            position: absolute !important;
            bottom: 0 !important;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
    }
    
    .chat-input-wrapper {
        position: relative;
        display: flex;
        align-items: center;
    }
    
    .chat-input {
        flex: 1;
        background: #18181b;
        border: 1px solid #3f3f46;
        border-radius: 4px;
        color: #fff;
        padding: 8px 12px;
        font-size: 16px;
        transition: border-color 0.2s ease;
    }

    /* Mobile view */
    @media (max-width: 768px) {
        .chat-input {
            font-size: 16px !important; /* Prevent zoom on iOS */
        }
    }
    
    .chat-input:focus {
        outline: none;
        border-color: #007bff;
        background: #1a1a1d;
    }
    
    .chat-input::placeholder {
        color: #adadb8;
    }
    
    .chat-send-btn {
        background: #007bff;
        border: none;
        border-radius: 4px;
        color: #fff;
        padding: 8px 12px;
        margin-left: 8px;
        cursor: pointer;
        font-size: 14px;
        transition: background-color 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .chat-send-btn:hover {
        background: #0056b3;
    }
    
    .chat-send-btn:active {
        transform: translateY(1px);
    }
    
    /* Improved chat message styling for all versions */
    .leftchat,
    .rightchat {
        margin-bottom: 8px;
        font-size: 13px;
    }
    
    .chatuserimg img {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        object-fit: cover;
    }
    
    .chatuser-content p {
        margin: 0;
        padding: 6px 10px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 6px;
        font-size: 16px;
        line-height: 1.4;
        word-wrap: break-word;
    }
    
    .rightchat .chatuser-content p {
        background: rgba(0, 123, 255, 0.2);
        border: 1px solid rgba(0, 123, 255, 0.3);
    }
    
    .leftchat .chatuser-content p {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    /* Mobile Responsive */
    @media (max-width: 767px) {
        .streaming-chat-area {
            margin: 20px 0;
        }
        
        .streaming-chat-container {
            height: 400px;
        }
        
        .video-player-right-content {
            margin-top: 20px;
        }
        
        .chat-input {
            font-size: 16px !important; /* Prevent zoom on iOS */
            padding: 10px 12px;
        }

        /* Keyboard responsive chat styles */
        .soft-keyboard-visible .streaming-chat-container {
            position: fixed !important;
            bottom: 0 !important;
            left: 0 !important;
            right: 0 !important;
            top: 50vh !important;
            z-index: 9999 !important;
        }

        .soft-keyboard-visible .chat-input-area {
            position: sticky !important;
            bottom: 0 !important;
            background: #1f1f23 !important;
            z-index: 10000 !important;
        }
        
        .chat-send-btn {
            padding: 10px 14px;
        }
    }