@props(['headers'])

<div class="page-header-slider">
    @php
        $firstHeader = $headers->first();
    @endphp
    @if($firstHeader)
    <div class="page-header__top-fixed">
        <div style="display: flex; align-items: center; gap: 12px; pointer-events: auto;">
            @if($firstHeader->show_back_button ?? true)
            <a href="{{ $firstHeader->back_url ?? route('dashboard') }}" class="page-header__back-btn" style="margin-left: 0; margin-right: 0;">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
                </svg>
            </a>
            @endif

            <!-- Brand Logo & Link -->
            <a href="https://ramai.ir" target="_blank" style="display: flex; align-items: center; gap: 8px; text-decoration: none;">
                <div style="width: 36px; height: 36px; border-radius: 50%; overflow: hidden; border: 1.5px solid rgba(255,255,255,0.25); background: #000; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.3);">
                    <img src="{{ asset('assets/images/Ramlogo.jpg') }}" alt="RamLogo" style="width: 100%; height: 100%; object-fit: cover;">
                </div>
                <span style="font-family: 'Vazirmatn', sans-serif; font-weight: 800; font-size: 0.85rem; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.4);">هوش معماری رام</span>
            </a>
        </div>

        <div class="header-actions">
            {{-- 1. Shopping Cart --}}
            @auth
            <a href="{{ route('purchases') }}" class="page-header__icon-btn cart-btn" title="سبد خرید / تراکنش‌ها">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" style="width: 1.25rem; height: 1.25rem;">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
                </svg>
                <span class="cart-badge">0</span>
            </a>
            @endauth

            {{-- 2. Search Panel Trigger --}}
            <div class="search-panel-wrapper">
                <button type="button" class="page-header__icon-btn search-trigger-btn" id="searchTriggerBtn" title="جستجو">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" style="width: 1.25rem; height: 1.25rem;">
                        <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
                    </svg>
                </button>
                <div class="live-search-container" id="liveSearchContainer">
                    <input type="text" class="search-input-field" placeholder="دنبال چی میگردی؟..." id="headerSearchInput">
                    <div class="search-results-list" id="headerSearchResults"></div>
                </div>
            </div>

            {{-- 3. Notification Bell --}}
            @if($firstHeader->show_notification ?? true)
            <div class="notification-panel-wrapper">
                <button type="button" class="page-header__icon-btn bell-btn" id="notificationBtn" title="اعلان‌ها">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" style="width: 1.25rem; height: 1.25rem;">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" />
                    </svg>
                    @if(isset($notifications) && $notifications->count() > 0)
                    <span class="notification-badge">{{ $notifications->count() }}</span>
                    @endif
                </button>
                <div class="live-notification-container" id="liveNotificationContainer">
                    <div class="notification-header">🔔 اعلان‌های من</div>
                    <div class="notification-list">
                        @forelse($notifications ?? [] as $notification)
                            <div class="notification-item">
                                <p class="notification-item__text">{{ $notification->message_text }}</p>
                                <span class="notification-item__time">{{ $notification->created_at ? $notification->created_at->diffForHumans() : '' }}</span>
                            </div>
                        @empty
                            <div class="notification-empty">هیچ اعلانی یافت نشد.</div>
                        @endforelse
                    </div>
                </div>
            </div>
            @endif

            {{-- 4. Get Started / Login --}}
            @guest
            <button type="button" class="page-header__login-btn" id="telegramLoginBtn">
                <span>شروع کنید!</span>
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" style="width: 1.25rem; height: 1.25rem;">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0zM4 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 10.374 21c-2.331 0-4.512-.645-6.374-1.766z" />
                </svg>
            </button>
            @else
            <a href="{{ route('dashboard') }}" class="page-header__login-btn">
                <span>{{ app()->getLocale() == 'fa' ? 'داشبورد' : 'Dashboard' }}</span>
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" style="width: 1.25rem; height: 1.25rem;">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
                </svg>
            </a>
            @endguest

            {{-- 5. Day/Night Theme Toggler --}}
            <button type="button" class="page-header__icon-btn theme-toggle-btn" id="themeToggleBtn" title="تم روز/شب">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" style="width: 1.25rem; height: 1.25rem;">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 0 1 7.5 0z" />
                </svg>
            </button>

            @if($firstHeader->show_language_switcher ?? true)
            <div class="lang-switcher">
                <a href="{{ route('lang.switch', ['locale' => 'fa']) }}" class="lang-btn {{ app()->getLocale() == 'fa' ? 'active' : '' }}">فارسی</a>
                <a href="{{ route('lang.switch', ['locale' => 'en']) }}" class="lang-btn {{ app()->getLocale() == 'en' ? 'active' : '' }}">English</a>
            </div>
            @endif
        </div>
    </div>
    @endif

    @foreach($headers as $index => $header)
    <header class="page-header page-header--large {{ $index === 0 ? 'is-active' : '' }}" 
            data-header-index="{{ $index }}">
        
        {{-- Background Layer --}}
        <div class="page-header__background" style="{{ $header->background_style ?? 'background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);' }}">
            @if($header->has_overlay)
            <div class="page-header__overlay" style="{{ $header->overlay_style }}"></div>
            @endif
        </div>

        {{-- Content Layer --}}
        <div class="page-header__content">
            <div class="page-header__main" style="margin-top: 5rem;">
                @if($header->icon ?? false)
                <div class="page-header__icon-large">
                    {!! $header->icon !!}
                </div>
                @endif
                
                <div class="page-header__text">
                    <h1 class="page-title page-title--large blur-animate-title" 
                        style="color: {{ $header->text_color ?? '#ffffff' }}; display: flex; flex-wrap: wrap;"
                        data-text="{{ $header->title }}"
                        data-animate-by="words"
                        data-delay="150"
                        data-direction="top">
                    </h1>
                    
                    @if($header->subtitle ?? false)
                    <p class="page-subtitle blur-animate-subtitle" 
                       style="color: {{ $header->text_color ?? '#ffffff' }}; opacity: 0.9; display: flex; flex-wrap: wrap;"
                       data-text="{{ $header->subtitle }}"
                       data-animate-by="words"
                       data-delay="100"
                       data-direction="top">
                    </p>
                    @endif
                </div>
            </div>
        </div>
    </header>
    @endforeach

    {{-- Slider Indicators --}}
    @if($headers->count() > 1)
    <div class="header-slider-indicators">
        @foreach($headers as $index => $header)
        <button class="header-slider-indicator {{ $index === 0 ? 'is-active' : '' }}" 
                data-slide-to="{{ $index }}"
                aria-label="Slide {{ $index + 1 }}"></button>
        @endforeach
    </div>
    @endif
</div>

<script src="https://cdn.jsdelivr.net/npm/motion@11.11.13/dist/motion.js"></script>

@if($headers->count() > 1)
<script>
    const SLIDE_INTERVAL = 5000;
    
    function waitForMotion(callback, maxAttempts = 100) {
        let attempts = 0;
        
        const checkInterval = setInterval(() => {
            attempts++;
            
            const motionLib = window.Motion || window.motion || (window.motionOne && window.motionOne.animate);
            
            if (motionLib) {
                clearInterval(checkInterval);
                callback(motionLib);
            } else if (attempts >= maxAttempts) {
                clearInterval(checkInterval);
                console.error('❌ Motion library failed to load');
            }
        }, 50);
    }
    
    document.addEventListener('DOMContentLoaded', function() {
        waitForMotion(function(motionLib) {
            const motion = motionLib;
            
            function buildKeyframes(from, steps) {
                const keys = new Set([
                    ...Object.keys(from),
                    ...steps.flatMap(s => Object.keys(s))
                ]);

                const keyframes = {};
                keys.forEach(k => {
                    keyframes[k] = [from[k], ...steps.map(s => s[k])];
                });
                return keyframes;
            }

            /**
             * تشخیص اینکه متن فارسی هست یا نه
             */
            function isPersianText(text) {
                const persianRegex = /[\u0600-\u06FF]/;
                return persianRegex.test(text);
            }

            class BlurText {
                constructor(element, options = {}) {
                    this.element = element;
                    this.text = options.text || element.dataset.text || '';
                    this.delay = parseInt(options.delay || element.dataset.delay || 200);
                    this.direction = options.direction || element.dataset.direction || 'top';
                    this.stepDuration = options.stepDuration || 0.35;
                    this.easing = options.easing || 'linear';
                    this.onAnimationComplete = options.onAnimationComplete || null;
                    
                    // ⭐ تشخیص خودکار: اگر متن فارسی بود، همیشه word by word
                    let animateBy = options.animateBy || element.dataset.animateBy || 'words';
                    if (isPersianText(this.text)) {
                        animateBy = 'words'; // برای فارسی فقط word by word
                    }
                    this.animateBy = animateBy;
                    
                    this.animated = false;
                    this.init();
                }

                init() {
                    if (!this.text) return;
                    
                    const elements = this.animateBy === 'words' 
                        ? this.text.split(' ') 
                        : this.text.split('');
                    
                    this.element.innerHTML = '';
                    
                    this.spans = elements.map((segment, index) => {
                        const span = document.createElement('span');
                        span.className = 'inline-block';
                        span.style.cssText = 'will-change: transform, filter, opacity; display: inline-block;';
                        span.textContent = segment === ' ' ? '\u00A0' : segment;
                        
                        this.element.appendChild(span);
                        
                        if (this.animateBy === 'words' && index < elements.length - 1) {
                            this.element.appendChild(document.createTextNode('\u00A0'));
                        }
                        
                        return span;
                    });
                }

                getDefaultFrom() {
                    return this.direction === 'top'
                        ? { filter: 'blur(10px)', opacity: 0, y: -50 }
                        : { filter: 'blur(10px)', opacity: 0, y: 50 };
                }

                getDefaultTo() {
                    return [
                        {
                            filter: 'blur(5px)',
                            opacity: 0.5,
                            y: this.direction === 'top' ? 5 : -5
                        },
                        { filter: 'blur(0px)', opacity: 1, y: 0 }
                    ];
                }

                animate() {
                    if (this.animated || !this.spans || this.spans.length === 0) {
                        return;
                    }
                    
                    this.animated = true;
                    
                    const fromSnapshot = this.getDefaultFrom();
                    const toSnapshots = this.getDefaultTo();
                    
                    const animateKeyframes = buildKeyframes(fromSnapshot, toSnapshots);
                    
                    const stepCount = toSnapshots.length + 1;
                    const totalDuration = this.stepDuration * (stepCount - 1);
                    
                    this.spans.forEach((span, index) => {
                        const delayInSeconds = (index * this.delay) / 1000;
                        
                        const animation = motion.animate(span, animateKeyframes, {
                            duration: totalDuration,
                            delay: delayInSeconds,
                            ease: this.easing
                        });
                        
                        if (animation && animation.finished) {
                            animation.finished.then(() => {
                                if (index === this.spans.length - 1 && this.onAnimationComplete) {
                                    this.onAnimationComplete();
                                }
                            });
                        }
                    });
                }

                reset() {
                    this.animated = false;
                    if (this.spans) {
                        this.spans.forEach(span => {
                            span.style.transform = '';
                            span.style.filter = '';
                            span.style.opacity = '';
                        });
                    }
                    this.init();
                }
            }

            const slider = document.querySelector('.page-header-slider');
            if (!slider) return;
            
            const headers = slider.querySelectorAll('.page-header');
            const indicators = slider.querySelectorAll('.header-slider-indicator');
            let currentIndex = 0;
            let intervalId;
            
            const blurTextInstances = Array.from(headers).map(header => {
                const title = header.querySelector('.blur-animate-title');
                const subtitle = header.querySelector('.blur-animate-subtitle');
                
                return {
                    title: title ? new BlurText(title) : null,
                    subtitle: subtitle ? new BlurText(subtitle) : null
                };
            });

            function showSlide(index) {
                headers.forEach((h, i) => {
                    h.classList.remove('is-active');
                    
                    if (i !== index) {
                        if (blurTextInstances[i].title) {
                            blurTextInstances[i].title.reset();
                        }
                        if (blurTextInstances[i].subtitle) {
                            blurTextInstances[i].subtitle.reset();
                        }
                    }
                });
                
                indicators.forEach(i => i.classList.remove('is-active'));

                const activeHeader = headers[index];
                activeHeader.classList.add('is-active');
                indicators[index].classList.add('is-active');
                
                setTimeout(() => {
                    if (blurTextInstances[index].title) {
                        blurTextInstances[index].title.animate();
                    }
                    if (blurTextInstances[index].subtitle) {
                        blurTextInstances[index].subtitle.animate();
                    }
                }, 50);
                
                currentIndex = index;
            }

            function nextSlide() {
                const nextIndex = (currentIndex + 1) % headers.length;
                showSlide(nextIndex);
            }

            function startAutoSlide() {
                intervalId = setInterval(nextSlide, SLIDE_INTERVAL);
            }

            function stopAutoSlide() {
                clearInterval(intervalId);
            }

            indicators.forEach((indicator, index) => {
                indicator.addEventListener('click', () => {
                    showSlide(index);
                    stopAutoSlide();
                    startAutoSlide();
                });
            });

            slider.addEventListener('mouseenter', stopAutoSlide);
            slider.addEventListener('mouseleave', startAutoSlide);

            showSlide(0);
            startAutoSlide();
            
            // Live search
            const searchTriggerBtn = document.getElementById('searchTriggerBtn');
            const liveSearchContainer = document.getElementById('liveSearchContainer');
            const headerSearchInput = document.getElementById('headerSearchInput');
            const headerSearchResults = document.getElementById('headerSearchResults');

            if (searchTriggerBtn && liveSearchContainer) {
                searchTriggerBtn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    liveSearchContainer.classList.toggle('is-active');
                    if (liveSearchContainer.classList.contains('is-active')) {
                        headerSearchInput.focus();
                    }
                });

                document.addEventListener('click', function(e) {
                    if (!liveSearchContainer.contains(e.target) && e.target !== searchTriggerBtn && !searchTriggerBtn.contains(e.target)) {
                        liveSearchContainer.classList.remove('is-active');
                    }
                });

                let searchTimeout;
                headerSearchInput.addEventListener('input', function() {
                    clearTimeout(searchTimeout);
                    const query = this.value.trim();

                    if (query.length < 2) {
                        headerSearchResults.innerHTML = '';
                        return;
                    }

                    searchTimeout = setTimeout(() => {
                        fetch(`/api/search?query=${encodeURIComponent(query)}`)
                            .then(res => res.json())
                            .then(data => {
                                headerSearchResults.innerHTML = '';

                                if (data.folders.length === 0 && data.files.length === 0) {
                                    headerSearchResults.innerHTML = '<div class="no-results-msg">موردی یافت نشد.</div>';
                                    return;
                                }

                                if (data.folders.length > 0) {
                                    headerSearchResults.innerHTML += '<div class="search-section-title">📁 پوشه‌ها</div>';
                                    data.folders.forEach(f => {
                                        headerSearchResults.innerHTML += `
                                            <a href="${f.url}" class="search-result-item">
                                                <span>📁</span>
                                                <span>${f.folder_name}</span>
                                            </a>
                                        `;
                                    });
                                }

                                if (data.files.length > 0) {
                                    headerSearchResults.innerHTML += '<div class="search-section-title">📄 فایل‌ها</div>';
                                    data.files.forEach(f => {
                                        headerSearchResults.innerHTML += `
                                            <a href="${f.url}" class="search-result-item">
                                                <span>📄</span>
                                                <span>${f.file_name}</span>
                                            </a>
                                        `;
                                    });
                                }
                            })
                            .catch(err => {
                                console.error('Search error:', err);
                            });
                    }, 300);
                });
            }

            // Theme Toggle
            const themeToggleBtn = document.getElementById('themeToggleBtn');
            if (themeToggleBtn) {
                themeToggleBtn.addEventListener('click', function() {
                    document.body.classList.toggle('light-theme');
                    const isLight = document.body.classList.contains('light-theme');
                    localStorage.setItem('theme', isLight ? 'light' : 'dark');
                });
                
                if (localStorage.getItem('theme') === 'light') {
                    document.body.classList.add('light-theme');
                }
            }

            // Notification Dropdown Toggle
            const notificationBtn = document.getElementById('notificationBtn');
            const liveNotificationContainer = document.getElementById('liveNotificationContainer');
            if (notificationBtn && liveNotificationContainer) {
                notificationBtn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    liveNotificationContainer.classList.toggle('is-active');
                });

                document.addEventListener('click', function(e) {
                    if (!liveNotificationContainer.contains(e.target) && e.target !== notificationBtn && !notificationBtn.contains(e.target)) {
                        liveNotificationContainer.classList.remove('is-active');
                    }
                });
            }

            // Login Widget Modal
            const telegramLoginBtn = document.getElementById('telegramLoginBtn');
            const telegramLoginModal = document.getElementById('telegramLoginModal');
            const telegramModalClose = document.getElementById('telegramModalClose');

            if (telegramLoginBtn && telegramLoginModal) {
                telegramLoginBtn.addEventListener('click', function() {
                    telegramLoginModal.classList.add('is-active');
                });
                
                if (telegramModalClose) {
                    telegramModalClose.addEventListener('click', function() {
                        telegramLoginModal.classList.remove('is-active');
                    });
                }

                telegramLoginModal.addEventListener('click', function(e) {
                    if (e.target === telegramLoginModal) {
                        telegramLoginModal.classList.remove('is-active');
                    }
                });

                @if(request()->has('login_required'))
                    if (telegramLoginModal) {
                        telegramLoginModal.classList.add('is-active');
                    }
                @endif
            }
            
        });
    });
</script>

<div class="telegram-modal" id="telegramLoginModal">
    <div class="telegram-modal-card">
        <span class="telegram-modal-close" id="telegramModalClose">&times;</span>
        <h3 style="color: #fff; margin-bottom: 1.5rem; font-family: 'Vazirmatn', sans-serif;">ورود با تلگرام</h3>
        <p style="color: #8b949e; font-size: 0.9rem; margin-bottom: 1.5rem; font-family: 'Vazirmatn', sans-serif;">جهت دسترسی به پنل کاربری خود، روی دکمه زیر کلیک کنید:</p>
        
        <div style="display: flex; justify-content: center; margin-bottom: 1rem;">
            <script async src="https://telegram.org/js/telegram-widget.js?22" 
                    data-telegram-login="{{ env('BOT_USERNAME', 'rammehraz_bot') }}" 
                    data-size="large" 
                    data-auth-url="{{ route('auth.telegram.callback') }}" 
                    data-request-access="write"></script>
        </div>
        
        <div style="margin-top: 1rem; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 1rem;">
            <a href="https://t.me/{{ env('BOT_USERNAME', 'rammehraz_bot') }}?start=login" target="_blank" 
               style="display: inline-block; padding: 8px 16px; background: #00eaff; color: #0d1117; border-radius: 8px; font-weight: bold; font-size: 0.85rem; text-decoration: none; font-family: 'Vazirmatn', sans-serif;">
                ⚡️ ورود از طریق ربات تلگرام
            </a>
        </div>
    </div>
</div>

<style>
    .page-header__top-fixed {
        position: absolute;
        top: 2rem;
        left: 2rem;
        right: 2rem;
        z-index: 10;
        display: flex;
        justify-content: space-between;
        align-items: center;
        pointer-events: auto;
    }
    @media (min-width: 768px) {
        .page-header__top-fixed {
            top: 2.5rem;
            left: 2.5rem;
            right: 2.5rem;
        }
    }
    .header-actions {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex-wrap: wrap;
    }
    .page-header__icon-btn, .page-header__login-btn {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.6rem;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        color: #fff;
        cursor: pointer;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        text-decoration: none;
    }
    .page-header__icon-btn:hover {
        background: rgba(255, 255, 255, 0.18);
        border-color: var(--accent-color, #00eaff);
        box-shadow: 0 4px 15px rgba(0, 234, 255, 0.2);
        transform: translateY(-2px);
    }
    .page-header__login-btn {
        padding: 0.6rem 1.2rem;
        background: rgba(224, 242, 254, 0.15);
        color: #e0f2fe;
        border-color: rgba(56, 189, 248, 0.3);
        font-weight: 700;
        gap: 0.5rem;
        cursor: pointer;
    }
    .page-header__login-btn:hover {
        background: rgba(224, 242, 254, 0.3);
        color: #fff;
        border-color: var(--accent-color, #00eaff);
        box-shadow: 0 4px 15px rgba(0, 234, 255, 0.25);
        transform: translateY(-2px);
    }
    .cart-badge {
        position: absolute;
        top: -6px;
        right: -6px;
        background: #7c3aed;
        color: #fff;
        font-size: 0.65rem;
        font-weight: bold;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    }
    
    .search-panel-wrapper {
        position: relative;
    }
    .live-search-container {
        position: absolute;
        top: 100%;
        right: 0;
        width: 320px;
        background: rgba(13, 17, 23, 0.95);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        margin-top: 8px;
        padding: 10px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        z-index: 9999;
        display: none;
    }
    .live-search-container.is-active {
        display: block;
        animation: fadeInUp 0.3s ease;
    }
    .search-input-field {
        width: 100%;
        padding: 8px 12px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        color: #fff;
        font-size: 0.9rem;
        outline: none;
        transition: border-color 0.3s;
    }
    .search-input-field:focus {
        border-color: var(--accent-color, #00eaff);
    }
    .search-results-list {
        margin-top: 10px;
        max-height: 250px;
        overflow-y: auto;
    }
    .search-result-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px;
        border-radius: 6px;
        color: #e6edf3;
        text-decoration: none;
        font-size: 0.85rem;
        transition: background 0.2s;
        text-align: right;
    }
    .search-result-item:hover {
        background: rgba(255, 255, 255, 0.08);
        color: var(--accent-color, #00eaff);
    }
    .search-section-title {
        font-size: 0.75rem;
        color: #8b949e;
        padding: 4px 8px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        margin: 5px 0;
        text-align: right;
    }
    .no-results-msg {
        text-align: center;
        padding: 15px;
        color: #8b949e;
        font-size: 0.85rem;
    }
    .notification-panel-wrapper {
        position: relative;
    }
    .notification-badge {
        position: absolute;
        top: -6px;
        right: -6px;
        background: #ef4444;
        color: #fff;
        font-size: 0.65rem;
        font-weight: bold;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    }
    .live-notification-container {
        position: absolute;
        top: 100%;
        left: 0;
        width: 320px;
        background: rgba(13, 17, 23, 0.95);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        margin-top: 8px;
        padding: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        z-index: 9999;
        display: none;
        text-align: right;
    }
    .live-notification-container.is-active {
        display: block;
        animation: fadeInUp 0.3s ease;
    }
    .notification-header {
        font-weight: bold;
        font-size: 0.95rem;
        color: #fff;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 8px;
        margin-bottom: 10px;
    }
    .notification-list {
        max-height: 250px;
        overflow-y: auto;
    }
    .notification-item {
        padding: 10px 8px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    .notification-item:last-child {
        border-bottom: none;
    }
    .notification-item__text {
        font-size: 0.85rem;
        color: #e6edf3;
        margin: 0 0 5px 0;
        line-height: 1.5;
        white-space: pre-wrap;
    }
    .notification-item__time {
        font-size: 0.75rem;
        color: #8b949e;
    }
    .notification-empty {
        text-align: center;
        padding: 15px;
        color: #8b949e;
        font-size: 0.85rem;
    }

    body.light-theme .live-notification-container {
        background: #ffffff;
        border-color: rgba(0, 0, 0, 0.1);
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
    body.light-theme .notification-header {
        color: #1e293b;
        border-bottom-color: rgba(0, 0, 0, 0.08);
    }
    body.light-theme .notification-item {
        border-bottom-color: rgba(0, 0, 0, 0.04);
    }
    body.light-theme .notification-item__text {
        color: #1e293b;
    }
    body.light-theme .notification-item__time {
        color: #64748b;
    }

    body.light-theme {
        --bg-body: #f8fafc !important;
        --bg-card: rgba(255, 255, 255, 0.7) !important;
        --bg-hover: rgba(59, 130, 246, 0.05) !important;
        --text-main: #1e293b !important;
        --text-muted: #64748b !important;
        --border-color: rgba(0, 0, 0, 0.08) !important;
        --accent-color: #2563eb !important;
    }
    body.light-theme .page-header__icon-btn {
        background: rgba(0, 0, 0, 0.05);
        border-color: rgba(0, 0, 0, 0.08);
        color: #1e293b;
    }
    body.light-theme .page-header__icon-btn:hover {
        background: rgba(0, 0, 0, 0.1);
        border-color: #2563eb;
    }
    body.light-theme .page-header__login-btn {
        background: rgba(37, 99, 235, 0.1);
        color: #1e3a8a;
        border-color: rgba(37, 99, 235, 0.2);
    }
    body.light-theme .page-header__login-btn:hover {
        background: rgba(37, 99, 235, 0.2);
        color: #1e3a8a;
    }
    body.light-theme .live-search-container {
        background: #ffffff;
        border-color: rgba(0, 0, 0, 0.1);
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
    body.light-theme .search-result-item {
        color: #1e293b;
    }
    body.light-theme .search-result-item:hover {
        background: rgba(0, 0, 0, 0.04);
        color: #2563eb;
    }

    .telegram-modal {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 10000;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(10px);
        align-items: center;
        justify-content: center;
        padding: 1rem;
    }
    .telegram-modal.is-active {
        display: flex;
    }
    .telegram-modal-card {
        background: rgba(13, 17, 23, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        padding: 2rem;
        max-width: 400px;
        width: 100%;
        text-align: center;
        box-shadow: 0 20px 45px rgba(0,0,0,0.6);
    }
    body.light-theme .telegram-modal-card {
        background: #ffffff;
        border-color: rgba(0, 0, 0, 0.1);
        box-shadow: 0 20px 45px rgba(0,0,0,0.1);
    }
    .telegram-modal-close {
        cursor: pointer;
        float: left;
        font-size: 1.5rem;
        color: #8b949e;
        transition: color 0.2s;
    }
    .telegram-modal-close:hover {
        color: #fff;
    }
    body.light-theme .telegram-modal-close:hover {
        color: #000;
    }
</style>
@endif