/* LEFT SIDEBAR HTML STRUCTURE */
<div class="sidebar-box">
    <div class="tab-container">
        <div class="tab-buttons">
            <button class="tab-button active" data-tab="void-feed">VOID FEED</button>
            <button class="tab-button" data-tab="artifacts">ARTIFACTS</button>
            <button class="tab-button" data-tab="signals">SIGNALS</button>
        </div>
        
        <!-- Tab 1: VOID FEED -->
        <div id="void-feed" class="tab-content active">
            <div class="custom-scrollbar" style="max-height: 300px;">
                <!-- Media Feed -->
                <div class="media-item">
                    <div class="media-item-header">
                        <img class="media-item-avatar" src="YOUR_AVATAR_URL" alt="user avatar">
                        <span class="media-item-username">voidwalker</span>
                        <span class="media-item-date">01:43</span>
                    </div>
                    <div class="media-item-content">
                        iterate through the static, find the pattern behind the noise. the signal exists.
                    </div>
                    <img class="media-item-image" src="YOUR_IMAGE_URL" alt="void media">
                    <div class="media-item-actions">
                        <span class="media-item-action">echo</span>
                        <span class="media-item-action">absorb</span>
                        <span class="media-item-action">distort</span>
                    </div>
                </div>
                
                <div class="media-item">
                    <div class="media-item-header">
                        <img class="media-item-avatar" src="YOUR_AVATAR_URL" alt="user avatar">
                        <span class="media-item-username">null_cipher</span>
                        <span class="media-item-date">23:17</span>
                    </div>
                    <div class="media-item-content">
                        digital atrophy is setting in. embracing the decay as evolution.
                    </div>
                    <div class="media-item-actions">
                        <span class="media-item-action">echo</span>
                        <span class="media-item-action">absorb</span>
                        <span class="media-item-action">distort</span>
                    </div>
                </div>
                
                <div class="media-item">
                    <div class="media-item-header">
                        <img class="media-item-avatar" src="YOUR_AVATAR_URL" alt="user avatar">
                        <span class="media-item-username">glitch_angel</span>
                        <span class="media-item-date">04:17</span>
                    </div>
                    <div class="media-item-content">
                        i saw death and in the face of my fate i was terrified, utterly frozen.
                    </div>
                    <img class="media-item-image" src="YOUR_IMAGE_URL" alt="void media">
                    <div class="media-item-actions">
                        <span class="media-item-action">echo</span>
                        <span class="media-item-action">absorb</span>
                        <span class="media-item-action">distort</span>
                    </div>
                </div>
            </div>
            
            <textarea class="input-field" placeholder="broadcast to void..." rows="2"></textarea>
            <button class="button">TRANSMIT</button>
        </div>
        
        <!-- Tab 2: ARTIFACTS -->
        <div id="artifacts" class="tab-content">
            <button class="collapsible">DIGITAL REMNANTS</button>
            <div class="collapsible-content">
                <div class="gallery">
                    <div class="gallery-item" data-src="YOUR_FULLSIZE_IMAGE_URL" data-caption="digital decay 01">
                        <img class="gallery-img" src="YOUR_THUMBNAIL_URL" alt="artifact 1">
                        <div class="gallery-caption">digital decay 01</div>
                    </div>
                    <div class="gallery-item" data-src="YOUR_FULLSIZE_IMAGE_URL" data-caption="memory fragment">
                        <img class="gallery-img" src="YOUR_THUMBNAIL_URL" alt="artifact 2">
                        <div class="gallery-caption">memory fragment</div>
                    </div>
                    <div class="gallery-item" data-src="YOUR_FULLSIZE_IMAGE_URL" data-caption="null space">
                        <img class="gallery-img" src="YOUR_THUMBNAIL_URL" alt="artifact 3">
                        <div class="gallery-caption">null space</div>
                    </div>
                    <div class="gallery-item" data-src="YOUR_FULLSIZE_IMAGE_URL" data-caption="echo chamber">
                        <img class="gallery-img" src="YOUR_THUMBNAIL_URL" alt="artifact 4">
                        <div class="gallery-caption">echo chamber</div>
                    </div>
                </div>
            </div>
            
            <button class="collapsible">AUDIO EXTRACTS</button>
            <div class="collapsible-content">
                <!-- Audio Player -->
                <div class="audio-player">
                    <div class="audio-player-controls">
                        <button class="audio-play-btn" data-src="YOUR_AUDIO_URL">▶</button>
                        <div class="audio-timeline">
                            <div class="audio-progress"></div>
                        </div>
                        <span class="audio-time">00:00</span>
                    </div>
                    <div style="font-size: 0.8em; margin-top: 3px;">voidnoise_extract.wav</div>
                </div>
                
                <div class="audio-player">
                    <div class="audio-player-controls">
                        <button class="audio-play-btn" data-src="YOUR_AUDIO_URL">▶</button>
                        <div class="audio-timeline">
                            <div class="audio-progress"></div>
                        </div>
                        <span class="audio-time">00:00</span>
                    </div>
                    <div style="font-size: 0.8em; margin-top: 3px;">static_sequence.wav</div>
                </div>
            </div>
            
            <button class="collapsible">DIGITAL RITUALS</button>
            <div class="collapsible-content">
                <p>iterate</p>
                <div class="progress-container">
                    <div class="progress-bar" style="width: 70%;"></div>
                </div>
                
                <p>imprint</p>
                <div class="progress-container">
                    <div class="progress-bar" style="width: 45%;"></div>
                </div>
                
                <p>isolate</p>
                <div class="progress-container">
                    <div class="progress-bar" style="width: 90%;"></div>
                </div>
            </div>
        </div>
        
        <!-- Tab 3: SIGNALS -->
        <div id="signals" class="tab-content">
            <div class="iframe-container">
                <iframe class="responsive-iframe" src="EMBED_URL_HERE" title="Embedded content" allowfullscreen></iframe>
            </div>
            
            <div style="margin-bottom: 10px;">
                <span class="badge">love</span>
                <span class="badge">loss</span>
                <span class="badge">linger</span>
                <span class="badge">void</span>
                <span class="badge">static</span>
                <span class="badge">echo</span>
            </div>
            
            <p>
                <span class="tooltip">parasocial<span class="tooltip-text">relationships with digital entities</span></span> indeed, absolutely 
                <span class="tooltip">taboo<span class="tooltip-text">forbidden knowledge</span></span>, nothing about this is healthy.
            </p>
        </div>
    </div>
</div>

<!-- RIGHT SIDEBAR HTML STRUCTURE -->
<div class="sidebar-box">
    <div class="tab-container">
        <div class="tab-buttons">
            <button class="tab-button active" data-tab="soul-capsule">SOUL CAPSULE</button>
            <button class="tab-button" data-tab="connections">CONNECTIONS</button>
            <button class="tab-button" data-tab="echoes">ECHOES</button>
        </div>
        
        <!-- Tab 1: SOUL CAPSULE -->
        <div id="soul-capsule" class="tab-content active">
            <div class="custom-scrollbar" style="max-height: 200px;">
                <button class="collapsible">IDENTITY FRAGMENTS</button>
                <div class="collapsible-content">
                    <div class="media-item">
                        <div class="media-item-content">
                            <span style="color: rgba(255, 50, 50, 0.8);">dead girl</span><br>
                            <span style="color: rgba(150, 150, 150, 0.8);">dead inside</span><br>
                            <span style="color: rgba(255, 100, 100, 0.8);">so alive</span>
                        </div>
                    </div>
                </div>
                
                <button class="collapsible">CRYPTIC TRANSMISSIONS</button>
                <div class="collapsible-content">
                    <div class="media-item">
                        <div class="media-item-content">
                            <span style="color: rgba(150, 200, 255, 0.8);">xenotrek</span><br>
                            <span style="color: rgba(255, 50, 50, 0.8);">criminal</span><br>
                            <span style="color: rgba(255, 150, 150, 0.8);">heartstealer</span>
                        </div>
                    </div>
                </div>
                
                <button class="collapsible">VIRTUAL REMNANTS</button>
                <div class="collapsible-content">
                    <p>bathe in the remnants of our virtual existence</p>
                    
                    <div class="gallery">
                        <div class="gallery-item" data-src="YOUR_FULLSIZE_IMAGE_URL" data-caption="soul fragment 01">
                            <img class="gallery-img" src="YOUR_THUMBNAIL_URL" alt="soul fragment 1">
                            <div class="gallery-caption">fragment 01</div>
                        </div>
                        <div class="gallery-item" data-src="YOUR_FULLSIZE_IMAGE_URL" data-caption="soul fragment 02">
                            <img class="gallery-img" src="YOUR_THUMBNAIL_URL" alt="soul fragment 2">
                            <div class="gallery-caption">fragment 02</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Tab 2: CONNECTIONS -->
        <div id="connections" class="tab-content">
            <div class="custom-scrollbar" style="max-height: 200px;">
                <div class="media-item">
                    <div class="media-item-header">
                        <img class="media-item-avatar" src="YOUR_AVATAR_URL" alt="user avatar">
                        <span class="media-item-username">numbpilled</span>
                    </div>
                    <div class="progress-container">
                        <div class="progress-bar" style="width: 85%;"></div>
                    </div>
                </div>
                
                <div class="media-item">
                    <div class="media-item-header">
                        <img class="media-item-avatar" src="YOUR_AVATAR_URL" alt="user avatar">
                        <span class="media-item-username">lusynth</span>
                    </div>
                    <div class="progress-container">
                        <div class="progress-bar" style="width: 75%;"></div>
                    </div>
                </div>
                
                <div class="media-item">
                    <div class="media-item-header">
                        <img class="media-item-avatar" src="YOUR_AVATAR_URL" alt="user avatar">
                        <span class="media-item-username">aeon flex</span>
                    </div>
                    <div class="progress-container">
                        <div class="progress-bar" style="width: 90%;"></div>
                    </div>
                </div>
            </div>
            
            <input type="text" class="input-field" placeholder="search connections...">
            <button class="button">CONNECT</button>
        </div>
        
        <!-- Tab 3: ECHOES -->
        <div id="echoes" class="tab-content">
            <div class="iframe-container">
                <iframe class="responsive-iframe" src="EMBED_URL_HERE" title="Echo chamber" allowfullscreen></iframe>
            </div>
            
            <div style="text-align: center; font-size: 0.8em; margin-top: 10px;">
                in nolove, there are no errors, only unexpected and morbid decadence.
            </div>
        </div>
    </div>
</div>

<!-- LIGHTBOX FOR GALLERY -->
<div class="lightbox">
    <span class="lightbox-close">&times;</span>
    <div class="lightbox-content">
        <img class="lightbox-img" src="" alt="lightbox image">
    </div>
    <div class="lightbox-caption"></div>
    <div class="lightbox-nav">
        <button class="lightbox-prev">&#10094;</button>
        <button class="lightbox-next">&#10095;</button>
    </div>
</div>

<!-- JAVASCRIPT FOR DYNAMIC ELEMENTS -->

<script>

// Tab functionality
document.addEventListener('DOMContentLoaded', function() {
    // Initialize tabs
    const tabButtons = document.querySelectorAll('.tab-button');
    
    tabButtons.forEach(button => {
        button.addEventListener('click', function() {
            // Get the target tab
            const tabContainer = this.closest('.tab-container');
            const targetTab = this.getAttribute('data-tab');
            
            // Remove active class from all buttons and tabs in this container
            tabContainer.querySelectorAll('.tab-button').forEach(btn => {
                btn.classList.remove('active');
            });
            
            tabContainer.querySelectorAll('.tab-content').forEach(content => {
                content.classList.remove('active');
            });
            
            // Add active class to clicked button and corresponding tab
            this.classList.add('active');
            document.getElementById(targetTab).classList.add('active');
        });
    });
    
    // Initialize collapsible sections
    const collapsibles = document.querySelectorAll('.collapsible');
    
    collapsibles.forEach(collapsible => {
        collapsible.addEventListener('click', function() {
            this.classList.toggle('active');
            const content = this.nextElementSibling;
            
            if (content.style.maxHeight) {
                content.style.maxHeight = null;
            } else {
                content.style.maxHeight = content.scrollHeight + 'px';
            }
        });
    });
    
    // Initialize gallery and lightbox
    const galleryItems = document.querySelectorAll('.gallery-item');
    const lightbox = document.querySelector('.lightbox');
    const lightboxImg = document.querySelector('.lightbox-img');
    const lightboxCaption = document.querySelector('.lightbox-caption');
    const lightboxClose = document.querySelector('.lightbox-close');
    const lightboxPrev = document.querySelector('.lightbox-prev');
    const lightboxNext = document.querySelector('.lightbox-next');
    
    let currentIndex = 0;
    let galleryGroup = [];
    
    // Open lightbox
    galleryItems.forEach((item, index) => {
        item.addEventListener('click', function() {
            // Get the gallery parent to create a group
            const gallery = this.closest('.gallery');
            galleryGroup = Array.from(gallery.querySelectorAll('.gallery-item'));
            currentIndex = galleryGroup.indexOf(this);
            
            // Set image source and caption
            lightboxImg.src = this.getAttribute('data-src');
            lightboxCaption.textContent = this.getAttribute('data-caption');
            
            // Show lightbox
            lightbox.style.display = 'flex';
        });
    });
    
    // Close lightbox
    lightboxClose.addEventListener('click', function() {
        lightbox.style.display = 'none';
    });
    
    // Click anywhere on lightbox to close
    lightbox.addEventListener('click', function(e) {
        if (e.target === lightbox) {
            lightbox.style.display = 'none';
        }
    });
    
    // Next image in lightbox
    lightboxNext.addEventListener('click', function() {
        if (galleryGroup.length <= 1) return;
        
        currentIndex = (currentIndex + 1) % galleryGroup.length;
        const nextItem = galleryGroup[currentIndex];
        
        lightboxImg.src = nextItem.getAttribute('data-src');
        lightboxCaption.textContent = nextItem.getAttribute('data-caption');
    });
    
    // Previous image in lightbox
    lightboxPrev.addEventListener('click', function() {
        if (galleryGroup.length <= 1) return;
        
        currentIndex = (currentIndex - 1 + galleryGroup.length) % galleryGroup.length;
        const prevItem = galleryGroup[currentIndex];
        
        lightboxImg.src = prevItem.getAttribute('data-src');
        lightboxCaption.textContent = prevItem.getAttribute('data-caption');
    });
    
    // Keyboard navigation for lightbox
    document.addEventListener('keydown', function(e) {
        if (lightbox.style.display === 'flex') {
            if (e.key === 'Escape') {
                lightbox.style.display = 'none';
            } else if (e.key === 'ArrowRight') {
                lightboxNext.click();
            } else if (e.key === 'ArrowLeft') {
                lightboxPrev.click();
            }
        }
    });
    
    // Audio player functionality
    const audioButtons = document.querySelectorAll('.audio-play-btn');
    let activeAudio = null;
    
    audioButtons.forEach(button => {
        button.addEventListener('click', function() {
            const audioSrc = this.getAttribute('data-src');
            
            // If this button is already playing, pause it
            if (activeAudio && activeAudio.button === this && !activeAudio.audio.paused) {
                activeAudio.audio.pause();
                this.textContent = '▶';
                return;
            }
            
            // If there's another audio playing, stop it
            if (activeAudio && !activeAudio.audio.paused) {
                activeAudio.audio.pause();
                activeAudio.button.textContent = '▶';
            }
            
            // Create new audio if needed
            if (!activeAudio || activeAudio.button !== this) {
                if (activeAudio) {
                    activeAudio.audio.pause();
                }
                
                const audio = new Audio(audioSrc);
                const progressBar = this.parentElement.querySelector('.audio-progress');
                const timeDisplay = this.parentElement.querySelector('.audio-time');
                
                activeAudio = { audio, button: this, progressBar, timeDisplay };
                
                // Update progress bar and time display
                audio.addEventListener('timeupdate', function() {
                    const minutes = Math.floor(audio.currentTime / 60);
                    const seconds = Math.floor(audio.currentTime % 60);
                    timeDisplay.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
                    
                    const progress = (audio.currentTime / audio.duration) * 100;
                    progressBar.style.width = `${progress}%`;
                });
                
                // Reset when ended
                audio.addEventListener('ended', function() {
                    button.textContent = '▶';
                    progressBar.style.width = '0%';
                    timeDisplay.textContent = '00:00';
                });
                
                // Timeline seeking
                const timeline = this.parentElement.querySelector('.audio-timeline');
                timeline.addEventListener('click', function(e) {
                    const rect = this.getBoundingClientRect();
                    const clickPosition = (e.clientX - rect.left) / rect.width;
                    audio.currentTime = audio.duration * clickPosition;
                });
            }
            
            // Play the audio
            activeAudio.audio.play();
            this.textContent = '❚❚';
        });
    });
    
    // Simulate media feed interactions
    const mediaActions = document.querySelectorAll('.media-item-action');
    
    mediaActions.forEach(action => {
        action.addEventListener('click', function() {
            const originalText = this.textContent;
            
            // Visual feedback
            this.style.color = 'rgba(255, 50, 50, 0.8)';
            this.textContent = 'done';
            
            // Reset after delay
            setTimeout(() => {
                this.style.color = '';
                this.textContent = originalText;
            }, 1000);
        });
    });
    
    // Initialize progress bars with animation
    const progressBars = document.querySelectorAll('.progress-bar');
    
    progressBars.forEach(bar => {
        const targetWidth = bar.style.width;
        bar.style.width = '0%';
        
        setTimeout(() => {
            bar.style.width = targetWidth;
        }, 500);
    });
    
    // Make collapsible sections keyboard accessible
    collapsibles.forEach(collapsible => {
        collapsible.setAttribute('tabindex', '0');
        
        collapsible.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                this.click();
            }
        });
    });
    
    // Initialize the first collapsible in each tab to be open by default
    document.querySelectorAll('.tab-content').forEach(tab => {
        const firstCollapsible = tab.querySelector('.collapsible');
        if (firstCollapsible) {
            firstCollapsible.classList.add('active');
            const content = firstCollapsible.nextElementSibling;
            content.style.maxHeight = content.scrollHeight + 'px';
        }
    });
    
    // Add animation to page load
    document.querySelectorAll('.tab-content').forEach(tab => {
        if (tab.classList.contains('active')) {
            tab.style.display = 'block';
            tab.style.opacity = '0';
            
            setTimeout(() => {
                tab.style.opacity = '1';
            }, 100);
        }
    });
    
    // Form submission prevention (for demo purposes)
    document.querySelectorAll('textarea, input').forEach(input => {
        input.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                const submitBtn = this.nextElementSibling;
                if (submitBtn && submitBtn.tagName === 'BUTTON') {
                    submitBtn.click();
                }
            }
        });
    });
    
    document.querySelectorAll('.button').forEach(button => {
        button.addEventListener('click', function() {
            const input = this.previousElementSibling;
            if (input && (input.tagName === 'TEXTAREA' || input.tagName === 'INPUT')) {
                const value = input.value.trim();
                if (value) {
                    // Visual feedback
                    const originalText = this.textContent;
                    this.textContent = 'SENT';
                    
                    // Reset after delay
                    setTimeout(() => {
                        this.textContent = originalText;
                        input.value = '';
                    }, 1000);
                }
            }
        });
    });
});
</script>
/* ========== DYNAMIC SIDEBAR STYLES ========== */
/* Tab system */
.tab-container {
    width: 100%;
    overflow: hidden;
}

.tab-buttons {
    display: flex;
    border-bottom: 1px solid rgba(255, 0, 0, 0.3);
    margin-bottom: 10px;
}

.tab-button {
    background: rgba(20, 0, 0, 0.5);
    border: none;
    outline: none;
    cursor: pointer;
    padding: 8px 10px;
    color: #ffffff;
    font-family: 'Courier New', monospace;
    flex: 1;
    margin: 0 2px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8em;
    position: relative;
    overflow: hidden;
}

.tab-button::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(255, 0, 0, 0.5);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.tab-button:hover::after, 
.tab-button.active::after {
    transform: scaleX(1);
}

.tab-button.active {
    background: rgba(40, 0, 0, 0.7);
    color: #ffffff;
    border-bottom: 2px solid rgba(255, 0, 0, 0.7);
}

.tab-content {
    display: none;
    padding: 5px;
    animation: fadeIn 0.5s ease;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Collapsible sections */
.collapsible {
    background: rgba(30, 0, 0, 0.5);
    color: white;
    cursor: pointer;
    padding: 8px 10px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-family: 'Courier New', monospace;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    border-left: 3px solid rgba(255, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.collapsible:hover, .collapsible.active {
    background: rgba(50, 0, 0, 0.7);
    border-left: 3px solid rgba(255, 0, 0, 0.8);
}

.collapsible:after {
    content: '+';
    font-weight: bold;
    float: right;
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.collapsible.active:after {
    content: '-';
}

.collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: rgba(10, 0, 0, 0.3);
    padding: 0 10px;
    margin-bottom: 10px;
}

/* Photo gallery */
.gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 5px;
    margin-bottom: 10px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 1;
}

.gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    border: 1px solid rgba(255, 0, 0, 0.3);
}

.gallery-item:hover .gallery-img {
    transform: scale(1.05);
}

.gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px;
    font-size: 0.7em;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.gallery-item:hover .gallery-caption {
    transform: translateY(0);
}

/* Lightbox */
.lightbox {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
}

.lightbox-content {
    max-width: 80%;
    max-height: 80%;
}

.lightbox-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border: 1px solid rgba(255, 0, 0, 0.5);
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.3);
}

.lightbox-close {
    position: absolute;
    top: 15px;
    right: 25px;
    color: #f1f1f1;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
}

.lightbox-caption {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    color: white;
    padding: 10px;
    background: rgba(0, 0, 0, 0.7);
}

.lightbox-nav {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.lightbox-prev, .lightbox-next {
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    outline: none;
}

/* Media feed */
.media-item {
    margin-bottom: 10px;
    border-bottom: 1px dashed rgba(255, 0, 0, 0.2);
    padding-bottom: 10px;
}

.media-item:last-child {
    border-bottom: none;
}

.media-item-header {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.media-item-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 5px;
    border: 1px solid rgba(255, 0, 0, 0.3);
}

.media-item-username {
    font-size: 0.8em;
    font-weight: bold;
    color: rgba(255, 100, 100, 0.8);
}

.media-item-date {
    font-size: 0.7em;
    margin-left: auto;
    color: rgba(200, 200, 200, 0.8);
}

.media-item-content {
    font-size: 0.9em;
    margin-bottom: 5px;
}

.media-item-image {
    width: 100%;
    height: auto;
    margin-bottom: 5px;
    border: 1px solid rgba(255, 0, 0, 0.3);
}

.media-item-actions {
    display: flex;
    justify-content: space-between;
    font-size: 0.7em;
}

.media-item-action {
    cursor: pointer;
    transition: color 0.3s ease;
}

.media-item-action:hover {
    color: rgba(255, 50, 50, 0.8);
}

/* Iframe container */
.iframe-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    margin-bottom: 10px;
    border: 1px solid rgba(255, 0, 0, 0.3);
}

.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Custom scrollbar */
.custom-scrollbar {
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 0, 0, 0.5) rgba(30, 0, 0, 0.5);
}

.custom-scrollbar::-webkit-scrollbar {
    width: 5px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(30, 0, 0, 0.5);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 0, 0, 0.5);
}

/* Interactive elements */
.input-field {
    width: 100%;
    background: rgba(20, 0, 0, 0.5);
    border: 1px solid rgba(255, 0, 0, 0.3);
    color: white;
    padding: 5px;
    margin-bottom: 10px;
    font-family: 'Courier New', monospace;
}

.button {
    background: rgba(40, 0, 0, 0.6);
    color: white;
    border: 1px solid rgba(255, 0, 0, 0.5);
    padding: 5px 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Courier New', monospace;
}

.button:hover {
    background: rgba(60, 0, 0, 0.8);
    border-color: rgba(255, 50, 50, 0.8);
}

/* Badge/pill */
.badge {
    display: inline-block;
    padding: 2px 5px;
    font-size: 0.7em;
    background: rgba(40, 0, 0, 0.6);
    color: white;
    border: 1px solid rgba(255, 0, 0, 0.5);
    border-radius: 10px;
    margin-right: 3px;
}

/* Progress indicator */
.progress-container {
    width: 100%;
    background: rgba(20, 0, 0, 0.5);
    margin-bottom: 10px;
    height: 5px;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 0, 0, 0.5), rgba(255, 50, 50, 0.8));
    width: 0%;
    transition: width 0.3s ease;
}

/* Tooltip */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted rgba(255, 0, 0, 0.5);
}

.tooltip .tooltip-text {
    visibility: hidden;
    width: 120px;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    text-align: center;
    border: 1px solid rgba(255, 0, 0, 0.3);
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.8em;
}

.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Audio player */
.audio-player {
    width: 100%;
    margin-bottom: 10px;
}

.audio-player-controls {
    display: flex;
    align-items: center;
    background: rgba(20, 0, 0, 0.5);
    padding: 5px;
    border: 1px solid rgba(255, 0, 0, 0.3);
}

.audio-play-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.2em;
    cursor: pointer;
    margin-right: 5px;
}

.audio-timeline {
    flex-grow: 1;
    height: 5px;
    background: rgba(50, 0, 0, 0.5);
    position: relative;
    cursor: pointer;
}

.audio-progress {
    background: rgba(255, 0, 0, 0.7);
    height: 100%;
    width: 0%;
}

.audio-time {
    font-size: 0.7em;
    margin-left: 5px;
    color: rgba(200, 200, 200, 0.8);
}

/* Mobile adaptations */
@media (max-width: 768px) {
    .tab-button {
        font-size: 0.7em;
        padding: 6px 8px;
    }
    
    .gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .tab-container {
        font-size: 0.9em;
    }
    
    .gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}