/* Black and White Theme with Blue Accent */
     :root {
        --primary: #FFFFFF;
        --secondary: #E7E9EA;
        --dark: #000000;
        --gray-dark: #16181C;
        --gray-medium: #2F3336;
        --gray-light: #71767B;
        --heading-blue: #2563eb;
    }

    body {
        background: #000000 !important;
        min-height: 100vh;
    }
    
    /* Ensure complete black background */
    html {
        background: #000000 !important;
    }

    /* Custom scrollbar */
    ::-webkit-scrollbar {
        width: 0px;
        height: 0px;
    }
    ::-webkit-scrollbar-track {
        background: #000000;
    }
    ::-webkit-scrollbar-thumb {
        background: transparent;
    }

    /* Hide scrollbar for all elements */
    * {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    /* Left Sidebar Styles */
    .left-sidebar {
        position: fixed;
        left: 0;
        top: 64px;
        width: 380px;
        height: calc(100vh - 64px);
        background: #000000;
        border-right: 1px solid #1a1a1a;
        overflow-y: auto;
    }

    /* Main container */
    main {
        position: relative;
    }
    
    /* Center Feed Styles - properly centered between sidebars */
    .center-feed {
        max-width: 700px;
        width: 700px;
        min-height: calc(100vh - 64px);
        position: relative;
        overflow: visible;
        margin-left: 380px;
        margin-right: 420px;
    }
    
    /* Center the feed properly - account for sidebars and center in remaining space */
    @media (min-width: 1500px) {
        .center-feed {
            margin-left: calc(380px + ((100vw - 380px - 420px - 700px) / 2));
            margin-right: auto;
        }
    }
    
    /* For very wide screens, ensure proper centering */
    @media (min-width: 1920px) {
        .center-feed {
            margin-left: calc((100vw - 700px) / 2);
            margin-right: auto;
        }
    }
    
    /* Ensure Stories section and headings are never hidden */
    .center-feed h2,
    .center-feed h3,
    .center-feed section {
        overflow: visible;
        word-wrap: break-word;
    }
    
    /* Ensure sidebars have proper stacking - they should be above content */
    .left-sidebar {
        z-index: 10;
    }
    
    .right-sidebar {
        z-index: 10;
    }

    /* Right Sidebar (Ads) Styles */
    .right-sidebar {
        position: fixed;
        right: 0;
        top: 64px;
        width: 420px;
        height: calc(100vh - 64px);
        background: #000000;
        border-left: 1px solid #1a1a1a;
        overflow-y: auto;
    }

    /* Medium screens - adjust layout to prevent overlap */
    @media (min-width: 1025px) and (max-width: 1500px) {
        .center-feed {
            margin-left: 380px;
            margin-right: 20px;
            width: calc(100vw - 400px);
            max-width: calc(100vw - 400px);
        }
        .right-sidebar {
            display: none;
        }
    }
    
    /* Mobile responsive */
    @media (max-width: 1024px) {
        .left-sidebar,
        .right-sidebar {
            display: none;
        }
        .center-feed {
            margin-left: 0;
            margin-right: 0;
            width: 100%;
            max-width: 100%;
        }
    }

    /* Hide scrollbar for certain elements */
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }
    .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* Mobile Sponsors Section */
    .mobile-sponsors {
        display: none;
    }

    /* Mobile Logo Header */
    .mobile-logo-header {
        display: none;
        position: relative;
        margin-top: -40px!important;
    }

    @media (max-width: 1024px) {
        .mobile-sponsors {
            display: block;
        }
        .mobile-logo-header {
            display: flex;
        }
    }

    /* Gradient text */
    .gradient-text {
        color: #2563eb;
    }
    
    /* Headings */
    h1, h2, h3, h4, h5, h6 {
        color: #2563eb;
    }

    /* Card hover effect - removed transform to prevent flickering */
    .post-card {
        transition: box-shadow 0.3s ease;
        will-change: auto;
    }
    .post-card:hover {
        box-shadow: 0 10px 25px rgba(255, 255, 255, 0.05);
    }
    
    /* Post cards should allow embedded content to show fully */
    .post-card {
        overflow: visible !important;
    }
    
    /* Only clip border radius on card itself, not content */
    .post-card {
        border-radius: 1rem;
    }
    
    /* Ensure embedded content wrapper doesn't clip */
    .post-card .embedded-content {
        overflow: visible !important;
        width: 100%;
        position: relative;
    }
    
    .post-card .embedded-content > * {
        overflow: visible !important;
    }

    /* Glow effect */
    .glow-border {
        border: 1px solid #1a1a1a;
    }

    .glow-border:hover {
        border-color: rgba(255, 255, 255, 0.2);
    }

    /* Card styles */
    .card-dark {
        background: #0a0a0a;
        border: 1px solid #1a1a1a;
    }

    /* Embedded Content Styles - Show post only, shorter height */
    .embedded-content {
        max-width: 100%;
        width: 100%;
        overflow: hidden !important;
        position: relative;
        height: auto;
        max-height: 500px !important;
        contain: layout;
    }

    .embedded-content iframe {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        max-height: 500px !important;
        border-radius: 8px;
        display: block;
        border: none;
        overflow: hidden !important;
    }

    .embedded-content blockquote {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto !important;
        min-width: auto !important;
        height: auto;
        max-height: 500px !important;
        overflow: hidden !important;
    }

    .embedded-content .instagram-media {
        max-width: 100% !important;
        min-width: auto !important;
        width: 100% !important;
        margin: 0 auto !important;
        height: auto;
        max-height: 450px !important;
        min-height: 400px;
        overflow: hidden !important;
        contain: layout style;
    }

    /* Instagram embed - Show post only, hide comments */

    .embedded-content .instagram-media-rendered {
        max-width: 100% !important;
        width: 100% !important;
        height: auto;
        max-height: 450px !important;
        overflow: hidden !important;
    }

    .embedded-content .instagram-media iframe {
        height: 450px !important;
        max-height: 450px !important;
        min-height: 400px;
        overflow: hidden !important;
    }
    
    /* Instagram Reels - limit height to show post only */
    .embedded-content .instagram-media[data-instgrm-permalink*="/reel/"] {
        max-height: 500px !important;
        min-height: 450px;
        overflow: hidden !important;
    }
    
    .embedded-content .instagram-media[data-instgrm-permalink*="/reel/"] iframe {
        height: 500px !important;
        max-height: 500px !important;
        min-height: 450px;
        overflow: hidden !important;
    }

    /* Twitter embed - Show post only, hide replies and comments */
    .embedded-content .twitter-tweet {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto !important;
        height: 350px !important;
        max-height: 350px !important;
        min-height: 300px;
        overflow: hidden !important;
    }

    .embedded-content .twitter-tweet-rendered {
        max-width: 100% !important;
        width: 100% !important;
        height: 350px !important;
        max-height: 350px !important;
        min-height: 300px;
        overflow: hidden !important;
    }
    
    /* Twitter/X embed iframe - limit height to show post only */
    .embedded-content iframe[src*="twitter.com"],
    .embedded-content iframe[src*="x.com"] {
        width: 100% !important;
        max-width: 100% !important;
        height: 350px !important;
        min-height: 300px !important;
        max-height: 350px !important;
        overflow: hidden !important;
    }
    
    /* Hide comment/reply sections in Twitter embeds */
    .embedded-content .twitter-tweet [data-testid*="reply"],
    .embedded-content .twitter-tweet [data-testid*="conversation"],
    .embedded-content .twitter-tweet-rendered [data-testid*="reply"],
    .embedded-content .twitter-tweet-rendered [data-testid*="conversation"],
    .embedded-content .twitter-tweet [class*="ThreadedConversation"],
    .embedded-content .twitter-tweet-rendered [class*="ThreadedConversation"] {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        max-height: 0 !important;
    }

    /* YouTube embed */
    .embedded-content iframe[src*="youtube.com"],
    .embedded-content iframe[src*="youtu.be"] {
        aspect-ratio: 16 / 9;
        height: auto !important;
        width: 100% !important;
        max-height: none !important;
    }

    /* Facebook embed - Show complete post with comments */
    .embedded-content iframe[src*="facebook.com"] {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
    }

    /* Reddit embed - Show complete thread */
    .embedded-content iframe[src*="reddit.com"],
    .embedded-content .reddit-embed-bq {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
    }

    /* TikTok embed - Show complete post */
    .embedded-content blockquote[class*="tiktok"] {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto !important;
        height: auto !important;
        max-height: none !important;
    }

    /* Responsive embedded content - maintain height limits */
    @media (max-width: 768px) {
        .embedded-content iframe,
        .embedded-content .instagram-media,
        .embedded-content blockquote {
            max-height: 450px !important;
            overflow: hidden !important;
        }
    }

    /* Ensure no extra width on container and limit height */
    .embedded-content > * {
        max-width: 100% !important;
        width: 100% !important;
        max-height: 500px !important;
        overflow: hidden !important;
    }

    /* Limit embedded content height to show post only - shorter heights */
    .embedded-content,
    .embedded-content blockquote {
        max-height: 500px !important;
        overflow: hidden !important;
    }

    /* Aggressively hide comment sections in embedded content */
    .embedded-content [class*="comment"],
    .embedded-content [class*="Comment"],
    .embedded-content [data-testid*="comment"],
    .embedded-content [data-testid*="Comment"],
    .embedded-content [id*="comment"],
    .embedded-content [id*="Comment"],
    .embedded-content [class*="reply"],
    .embedded-content [class*="Reply"],
    .embedded-content [data-testid*="reply"],
    .embedded-content [data-testid*="Reply"],
    .embedded-content [class*="thread"],
    .embedded-content [class*="Thread"],
    .embedded-content [class*="conversation"],
    .embedded-content [class*="Conversation"],
    .embedded-content [class*="replies"],
    .embedded-content [class*="Replies"],
    .embedded-content [aria-label*="comment"],
    .embedded-content [aria-label*="Comment"],
    .embedded-content [aria-label*="reply"],
    .embedded-content [aria-label*="Reply"],
    /* Instagram comment selectors */
    .embedded-content [class*="X7jCj"],
    .embedded-content [data-testid="comments"],
    /* Twitter/X comment selectors */
    .embedded-content [data-testid="tweetText"],
    .embedded-content div[style*="padding-top"][style*="padding-bottom"]:not(:first-child) {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        max-height: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* Hide any element after the main post content */
    .embedded-content > *:nth-child(n+2) {
        display: none !important;
    }
    
    /* Hide scrollable areas that might contain comments */
    .embedded-content [style*="overflow"],
    .embedded-content [style*="scroll"],
    .embedded-content [class*="scroll"] {
        overflow: hidden !important;
        max-height: 500px !important;
    }
    
    /* Specifically target Twitter/X text elements */
    .embedded-content [dir="auto"],
    .embedded-content [data-testid*="tweet"],
    .embedded-content [data-testid*="Text"],
    .embedded-content .tweet-text,
    .embedded-content .twitter-tweet-text {
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        line-height: 1.5 !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
        display: block !important;
    }

    /* Override any inline styles that limit height */
    .embedded-content [style*="max-height"],
    .embedded-content [style*="height"] {
        height: auto !important;
        max-height: none !important;
    }
    
    /* Target Instagram's padding divs that might restrict height */
    .embedded-content .instagram-media > div,
    .embedded-content .instagram-media > div > div {
        height: auto !important;
        max-height: none !important;
        padding: 0 !important;
    }
    
    /* Ensure Instagram iframe container doesn't crop */
    .embedded-content .instagram-media > div[style*="padding"] {
        padding: 0 !important;
        height: auto !important;
    }
    
    /* Force all nested divs to show full height */
    .embedded-content div[style] {
        max-height: none !important;
    }