@php
    $skinbaseCanUseSession = ($skinbaseCanUseSession ?? false) === true;
    $skinbaseToolbarUser = $skinbaseCanUseSession ? Auth::user() : null;
    $skinbaseToolbarCanAuth = $skinbaseToolbarUser !== null;
@endphp

<header id="nova-toolbar" class="fixed inset-x-0 top-0 z-50 h-16 bg-black/40 backdrop-blur border-b border-white/10">
    <div class="mx-auto w-full h-full px-3 sm:px-4 flex items-center gap-2 sm:gap-3">

        <!-- Mobile hamburger -->
        <button id="btnSidebar"
            type="button"
            data-mobile-toggle
            class="lg:hidden inline-flex items-center justify-center w-10 h-10 rounded-lg hover:bg-white/5"
            aria-label="Open menu"
            aria-controls="mobileMenu"
            aria-expanded="false">
            <svg data-mobile-icon-hamburger class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M4 6h16M4 12h16M4 18h16" />
            </svg>
            <svg data-mobile-icon-close class="hidden w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M6 6l12 12M18 6L6 18" />
            </svg>
        </button>

        <!-- Logo -->
        <a href="/" class="flex items-center gap-2 pr-2 shrink-0">
            <img src="https://cdn.skinbase.org/images/sb_logo_full.webp" alt="" width="104" height="36" class="h-9 w-auto rounded-sm shadow-sm object-contain">
            <span class="sr-only">Skinbase.org</span>
        </a>

        <!-- Desktop left nav: Discover · Explore · Groups · Creators · Community -->
        @php
            $toolbarContentTypes = collect($toolbarContentTypes ?? []);
            $toolbarContentTypeSlugs = $toolbarContentTypes
                ->pluck('slug')
                ->filter()
                ->map(fn ($slug) => strtolower((string) $slug))
                ->values()
                ->all();
            $toolbarContentTypeIcons = [
                'photography' => 'fa-camera',
                'wallpapers' => 'fa-desktop',
                'skins' => 'fa-layer-group',
                'digital-art' => 'fa-palette',
                'other' => 'fa-folder-open',
            ];
            $toolbarActiveCampaign = $toolbarActiveCampaign ?? null;
            $navSection = match(true) {
                request()->is('discover', 'discover/*')                                                    => 'discover',
                request()->is('worlds', 'worlds/*')                                                        => 'discover',
                request()->is(...array_merge(['browse', 'tags', 'tags/*'], $toolbarContentTypeSlugs))      => 'browse',
                request()->is('groups', 'groups/*')                                                        => 'groups',
                request()->is('creators', 'creators/*', 'stories', 'stories/*', 'following', 'leaderboard') => 'creators',
                request()->is('forum', 'forum/*', 'news', 'news/*')                                       => 'community',
                default => null,
            };
        @endphp
        <nav class="hidden lg:flex items-center gap-1 text-sm text-soft" aria-label="Main navigation">

            {{-- DISCOVER --}}
            <div class="relative">
                <button class="inline-flex items-center gap-1 px-3 py-2 rounded-lg transition-colors {{ $navSection === 'discover' ? 'text-white bg-white/10' : 'hover:text-white hover:bg-white/5' }}"
                    data-dd="discover"
                    {{ $navSection === 'discover' ? 'aria-current=page' : '' }}>
                    Discover
                    <svg class="w-4 h-4 opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6" /></svg>
                </button>
                <div id="dd-discover" class="dd-menu absolute left-0 mt-1 w-56 rounded-xl bg-panel border border-panel shadow-sb overflow-hidden">
                    <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/discover/trending">
                        <i class="fa-solid fa-fire w-4 text-center text-sb-muted"></i>Trending
                    </a>
                    <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/discover/rising">
                        <i class="fa-solid fa-rocket w-4 text-center text-sb-muted"></i>Rising
                    </a>
                    <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/discover/fresh">
                        <i class="fa-solid fa-bolt w-4 text-center text-sb-muted"></i>Fresh
                    </a>
                    <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/discover/top-rated">
                        <i class="fa-solid fa-medal w-4 text-center text-sb-muted"></i>Top Rated
                    </a>
                    <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/discover/most-downloaded">
                        <i class="fa-solid fa-download w-4 text-center text-sb-muted"></i>Most Downloaded
                    </a>
                    <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="{{ route('downloads.today') }}">
                        <i class="fa-solid fa-arrow-down-short-wide w-4 text-center text-sb-muted"></i>Today Downloads
                    </a>
                    <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/discover/on-this-day">
                        <i class="fa-solid fa-calendar-day w-4 text-center text-sb-muted"></i>On This Day
                    </a>
                    <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="{{ route('worlds.index') }}">
                        <i class="fa-solid fa-globe w-4 text-center text-sb-muted"></i>Worlds
                    </a>
                    @if($toolbarActiveCampaign)
                    <a class="flex items-center gap-3 px-4 py-2.5 text-sm border-t border-white/5 bg-white/[0.02] hover:bg-white/5" href="{{ $toolbarActiveCampaign['url'] }}">
                        <i class="fa-solid fa-bolt w-4 text-center text-emerald-300"></i>
                        <span>
                            <span class="block text-[11px] uppercase tracking-[0.16em] text-emerald-200/75">{{ $toolbarActiveCampaign['campaign_label'] }}</span>
                            <span class="block text-white">{{ \Illuminate\Support\Str::limit($toolbarActiveCampaign['title'], 24) }}</span>
                        </span>
                    </a>
                    @endif
                    @if($skinbaseToolbarCanAuth)
                    <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="{{ route('discover.for-you') }}">
                        <i class="fa-solid fa-wand-magic-sparkles w-4 text-center"></i>For You
                    </a>
                    @endif
                </div>
            </div>

            {{-- BROWSE --}}
            <div class="relative">
                <button class="inline-flex items-center gap-1 px-3 py-2 rounded-lg transition-colors {{ $navSection === 'browse' ? 'text-white bg-white/10' : 'hover:text-white hover:bg-white/5' }}"
                    data-dd="browse"
                    {{ $navSection === 'browse' ? 'aria-current=page' : '' }}>
                    Explore
                    <svg class="w-4 h-4 opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6" /></svg>
                </button>
                <div id="dd-browse" class="dd-menu absolute left-0 mt-1 w-56 rounded-xl bg-panel border border-panel shadow-sb overflow-hidden">
                    <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/explore">
                        <i class="fa-solid fa-border-all w-4 text-center text-sb-muted"></i>All Artworks
                    </a>
                    @foreach($toolbarContentTypes as $contentType)
                    @php
                        $contentTypeSlug = strtolower((string) $contentType->slug);
                        $contentTypeIcon = $toolbarContentTypeIcons[$contentTypeSlug] ?? 'fa-folder-open';
                    @endphp
                    <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/{{ $contentTypeSlug }}">
                        <i class="fa-solid {{ $contentTypeIcon }} w-4 text-center text-sb-muted"></i>{{ $contentType->name }}
                    </a>
                    @endforeach
                    <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="{{ route('categories.index') }}">
                        <i class="fa-solid fa-folder-open w-4 text-center text-sb-muted"></i>Categories
                    </a>
                    <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/tags">
                        <i class="fa-solid fa-tags w-4 text-center text-sb-muted"></i>Tags
                    </a>
                </div>
            </div>

            <div class="relative">
                <button class="inline-flex items-center gap-1 px-3 py-2 rounded-lg transition-colors {{ $navSection === 'groups' ? 'text-white bg-white/10' : 'hover:text-white hover:bg-white/5' }}"
                    data-dd="groups"
                    {{ $navSection === 'groups' ? 'aria-current=page' : '' }}>
                    Groups
                    <svg class="w-4 h-4 opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6" /></svg>
                </button>
                <div id="dd-groups" class="dd-menu absolute left-0 mt-1 w-64 rounded-xl bg-panel border border-panel shadow-sb overflow-hidden">
                    <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/groups">
                        <i class="fa-solid fa-people-group w-4 text-center text-sb-muted"></i>Browse Groups
                    </a>
                    <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/groups?surface=featured">
                        <i class="fa-solid fa-star w-4 text-center text-sb-muted"></i>Featured Groups
                    </a>
                    <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/groups?surface=recruiting">
                        <i class="fa-solid fa-user-plus w-4 text-center text-sb-muted"></i>Recruiting Now
                    </a>
                    <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/groups?surface=new_rising">
                        <i class="fa-solid fa-arrow-trend-up w-4 text-center text-sb-muted"></i>New & Rising
                    </a>
                    <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/leaderboard?type=groups&period=monthly">
                        <i class="fa-solid fa-trophy w-4 text-center text-sb-muted"></i>Group Leaderboard
                    </a>
                </div>
            </div>

            {{-- CREATORS --}}
            <div class="relative">
                <button class="inline-flex items-center gap-1 px-3 py-2 rounded-lg transition-colors {{ $navSection === 'creators' ? 'text-white bg-white/10' : 'hover:text-white hover:bg-white/5' }}"
                    data-dd="creators"
                    {{ $navSection === 'creators' ? 'aria-current=page' : '' }}>
                    Creators
                    <svg class="w-4 h-4 opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6" /></svg>
                </button>
                <div id="dd-creators" class="dd-menu absolute left-0 mt-1 w-56 rounded-xl bg-panel border border-panel shadow-sb overflow-hidden">
                    <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/creators/top">
                        <i class="fa-solid fa-star w-4 text-center text-sb-muted"></i>Top Creators
                    </a>
                    <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/leaderboard">
                        <i class="fa-solid fa-trophy w-4 text-center text-sb-muted"></i>Leaderboard
                    </a>
                    <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/creators/rising">
                        <i class="fa-solid fa-arrow-trend-up w-4 text-center text-sb-muted"></i>Rising Creators
                    </a>
                    <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/stories">
                        <i class="fa-solid fa-microphone w-4 text-center text-sb-muted"></i>Creator Stories
                    </a>
                    @if($skinbaseToolbarCanAuth)
                    <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="{{ route('dashboard.following') }}">
                        <i class="fa-solid fa-user-plus w-4 text-center text-sb-muted"></i>Following
                    </a>
                    @endif
                </div>
            </div>

            {{-- COMMUNITY --}}
            <div class="relative">
                <button class="inline-flex items-center gap-1 px-3 py-2 rounded-lg transition-colors {{ $navSection === 'community' ? 'text-white bg-white/10' : 'hover:text-white hover:bg-white/5' }}"
                    data-dd="community"
                    {{ $navSection === 'community' ? 'aria-current=page' : '' }}>
                    Community
                    <svg class="w-4 h-4 opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6" /></svg>
                </button>
                <div id="dd-community" class="dd-menu absolute left-0 mt-1 w-56 rounded-xl bg-panel border border-panel shadow-sb overflow-hidden">
                    <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="{{ route('community.activity') }}">
                        <i class="fa-solid fa-wave-square w-4 text-center text-sb-muted"></i>Activity Feed
                    </a>
                    @if($skinbaseToolbarCanAuth)
                    <a class="flex items-center justify-between gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="{{ route('dashboard.comments.received') }}">
                        <span class="flex items-center gap-3">
                            <i class="fa-solid fa-inbox w-4 text-center text-sb-muted"></i>Received Comments
                        </span>
                        @if(($receivedCommentsCount ?? 0) > 0)
                        <span class="rounded-full border border-cyan-400/25 bg-cyan-500/10 px-2 py-0.5 text-[11px] font-semibold text-cyan-200">{{ $receivedCommentsCount }}</span>
                        @endif
                    </a>
                    @endif
                    <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/forum">
                        <i class="fa-solid fa-comments w-4 text-center text-sb-muted"></i>Forum
                    </a>
                    <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/news">
                        <i class="fa-solid fa-newspaper w-4 text-center text-sb-muted"></i>News
                    </a>
                </div>
            </div>

        </nav>

        <!-- Search: collapsed pill → expands on click -->
        <div class="flex-1 flex items-center justify-center px-1 sm:px-2 min-w-0">
            <div id="topbar-search-root" class="w-full flex justify-center">
                @if(request()->routeIs('index'))
                    <button
                        type="button"
                        data-search-intent="mobile"
                        aria-label="Open search"
                        class="md:hidden inline-flex items-center justify-center w-10 h-10 rounded-lg text-soft hover:text-white hover:bg-white/5 transition-colors"
                    >
                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z"/>
                        </svg>
                    </button>

                    <div class="hidden md:block w-full" style="max-width: clamp(8.75rem, 8vw + 4rem, 10.5rem);">
                        <button
                            type="button"
                            data-search-intent="desktop"
                            aria-label="Search"
                            class="w-full h-10 flex items-center gap-2.5 px-3.5 rounded-lg bg-white/[0.05] border border-white/[0.09] text-soft hover:bg-white/[0.1] hover:border-white/20 hover:text-white transition-colors"
                        >
                            <svg class="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z"/>
                            </svg>
                            <span class="text-sm flex-1 text-left truncate">Search</span>
                            <kbd class="hidden lg:inline-flex shrink-0 items-center gap-0.5 text-[10px] font-medium px-1.5 py-0.5 rounded-md bg-white/[0.06] border border-white/[0.10] text-white/30">
                                CtrlK
                            </kbd>
                        </button>
                    </div>
                @endif
            </div>
        </div>

        @if($skinbaseToolbarCanAuth)
            <!-- Notification icons -->
            <div class="hidden md:flex items-center gap-0.5 lg:gap-1 text-soft shrink-0">
                <a href="{{ route('dashboard.favorites') }}"
                   class="relative inline-flex w-9 h-9 lg:w-10 lg:h-10 items-center justify-center rounded-lg hover:bg-white/5"
                   title="Favourites">
                    <svg class="w-[18px] h-[18px] lg:w-5 lg:h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M12 21s-7-4.4-9-9a5.5 5.5 0 0 1 9-6 5.5 5.5 0 0 1 9 6c-2 4.6-9 9-9 9z" />
                    </svg>
                    @if(($favCount ?? 0) > 0)
                    <span class="absolute -bottom-1 right-0 text-[10px] lg:text-[11px] tabular-nums px-1 py-0 lg:px-1.5 lg:py-0.5 rounded bg-red-700/70 text-white border border-sb-line">{{ $favCount }}</span>
                    @endif
                </a>

                @php
                    $toolbarMessagesProps = [
                        'initialUnreadCount' => (int) ($msgCount ?? 0),
                        'userId' => (int) ($userId ?? Auth::id() ?? 0),
                        'href' => Route::has('messages.index') ? route('messages.index') : '/messages',
                    ];
                @endphp
                <div id="toolbar-messages-root" data-props='@json($toolbarMessagesProps)'></div>

                <div id="toolbar-notification-root" data-props='@json(['initialUnreadCount' => (int) ($noticeCount ?? 0)])'></div>
            </div>

            <!-- Profile dropdown -->
            <div class="relative">
                <button class="flex items-center gap-2 pl-1.5 sm:pl-2 pr-2 sm:pr-3 h-10 rounded-lg hover:bg-white/5 transition-colors shrink-0" data-dd="user">
                    @php
                        $toolbarUser = Auth::user();
                        $toolbarUserId = (int) ($userId ?? Auth::id() ?? 0);
                        $toolbarAvatarHash = $avatarHash ?? optional($toolbarUser)->profile->avatar_hash ?? null;
                        $toolbarEmailVerified = method_exists($toolbarUser, 'hasVerifiedEmail')
                            ? $toolbarUser->hasVerifiedEmail()
                            : !empty($toolbarUser?->email_verified_at);
                        $toolbarVerificationNoticeRoute = Route::has('verification.notice') ? route('verification.notice') : null;
                        $toolbarVerificationSendRoute = Route::has('verification.send') ? route('verification.send') : null;
                        $toolbarVerificationLinkSent = session('status') === 'verification-link-sent';
                    @endphp
                    <span class="relative shrink-0">
                        <img class="w-7 h-7 rounded-full object-cover ring-1 {{ $toolbarEmailVerified ? 'ring-white/10' : 'ring-amber-400/30' }}"
                            src="{{ \App\Support\AvatarUrl::forUser($toolbarUserId, $toolbarAvatarHash, 64) }}"
                            alt="" />
                        @unless($toolbarEmailVerified)
                        <span class="absolute -right-0.5 -top-0.5 h-2.5 w-2.5 rounded-full bg-amber-400 ring-2 ring-[#0b1220]" aria-hidden="true"></span>
                        @endunless
                    </span>
                    <span class="hidden min-[900px]:inline-block max-w-[8rem] truncate text-sm text-white/90">{{ $displayName ?? 'User' }}</span>
                    @unless($toolbarEmailVerified)
                    <span class="hidden xl:inline-flex items-center rounded-full border border-amber-400/25 bg-amber-500/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-amber-100">Verify email</span>
                    @endunless
                    <svg class="w-4 h-4 opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M6 9l6 6 6-6" />
                    </svg>
                </button>

                <div id="dd-user"
                    class="dd-menu absolute right-0 mt-1 w-64 rounded-xl bg-panel border border-panel shadow-sb overflow-hidden">

                    @php
                        $toolbarUsername = strtolower((string) (Auth::user()->username ?? ''));
                        $routeUpload          = Route::has('upload') ? route('upload') : '/upload';
                        $routeDashboard       = Route::has('dashboard') ? route('dashboard') : '/dashboard';
                        $routeMyArtworks      = Route::has('studio.artworks') ? route('studio.artworks') : '/studio/artworks';
                        $routeModeration      = '/moderation';
                        $routeMyStories       = Route::has('creator.stories.index') ? route('creator.stories.index') : '/creator/stories';
                        $routeWriteStory      = Route::has('creator.stories.create') ? route('creator.stories.create') : '/creator/stories/create';
                        $routeDashboardFavorites = Route::has('dashboard.favorites') ? route('dashboard.favorites') : '/dashboard/favorites';
                        $routeEditProfile        = Route::has('dashboard.profile')
                            ? route('dashboard.profile')
                            : (Route::has('settings') ? route('settings') : '/settings');
                        // Guard: username may be null for OAuth users still in onboarding.
                        $routePublicProfile = $toolbarUsername !== ''
                            ? (Route::has('profile.show') ? route('profile.show', ['username' => $toolbarUsername]) : '/@'.$toolbarUsername)
                            : route('setup.username.create');
                    @endphp

                    @unless($toolbarEmailVerified)
                    <div class="px-3 pt-3 pb-2">
                        <div class="rounded-xl border border-amber-400/20 bg-amber-500/10 px-3 py-3 text-sm text-amber-50">
                            <div class="flex items-start gap-3">
                                <span class="mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-amber-400/15 text-amber-200">
                                    <i class="fa-solid fa-envelope-circle-check text-sm"></i>
                                </span>
                                <div class="min-w-0 flex-1">
                                    <div class="font-semibold text-amber-100">Verify your email</div>
                                    <p class="mt-1 text-xs leading-5 text-amber-100/85">
                                        Confirm <span class="font-medium text-amber-50">{{ $toolbarUser?->email }}</span> to unlock medals and other mature-account actions.
                                    </p>

                                    @if($toolbarVerificationLinkSent)
                                    <div class="mt-2 rounded-lg border border-emerald-400/20 bg-emerald-500/10 px-2.5 py-2 text-[11px] font-medium text-emerald-100">
                                        A fresh verification link was sent to your email.
                                    </div>
                                    @endif

                                    <div class="mt-3 flex flex-wrap gap-2">
                                        @if($toolbarVerificationNoticeRoute)
                                        <a class="inline-flex items-center rounded-lg border border-amber-300/25 bg-white/5 px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.14em] text-amber-50 transition-colors hover:bg-white/10"
                                            href="{{ $toolbarVerificationNoticeRoute }}">
                                            Open verification page
                                        </a>
                                        @endif

                                        @if($toolbarVerificationSendRoute)
                                        <form method="POST" action="{{ $toolbarVerificationSendRoute }}">
                                            @csrf
                                            <button type="submit" class="inline-flex items-center rounded-lg border border-amber-300/25 bg-amber-300/10 px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.14em] text-amber-50 transition-colors hover:bg-amber-300/20">
                                                Resend verification email
                                            </button>
                                        </form>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="border-t border-panel my-1"></div>
                    @endunless

                    <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="{{ $routeUpload }}">
                        <span class="w-6 h-6 rounded-md bg-white/5 inline-flex items-center justify-center shrink-0"><i class="fa-solid fa-upload text-xs text-sb-muted"></i></span>
                        Upload
                    </a>
                    <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="{{ $routeDashboard }}">
                        <span class="w-6 h-6 rounded-md bg-white/5 inline-flex items-center justify-center shrink-0"><i class="fa-solid fa-table-columns text-xs text-sb-muted"></i></span>
                        Dashboard
                    </a>
                    <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/studio/artworks">
                        <span class="w-6 h-6 rounded-md bg-white/5 inline-flex items-center justify-center shrink-0"><i class="fa-solid fa-palette text-xs text-sb-muted"></i></span>
                        Studio
                    </a>
                    @if(in_array(strtolower((string) (Auth::user()->role ?? '')), ['admin', 'moderator'], true))
                    <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="{{ $routeModeration }}">
                        <span class="w-6 h-6 rounded-md bg-white/5 inline-flex items-center justify-center shrink-0"><i class="fa-solid fa-user-shield text-xs text-sb-muted"></i></span>
                        Moderation
                    </a>
                    @endif
                    <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="{{ $routeMyStories }}">
                        <span class="w-6 h-6 rounded-md bg-white/5 inline-flex items-center justify-center shrink-0"><i class="fa-solid fa-book-open text-xs text-sb-muted"></i></span>
                        My Stories
                    </a>
                    <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="{{ $routeDashboardFavorites }}">
                        <span class="w-6 h-6 rounded-md bg-white/5 inline-flex items-center justify-center shrink-0"><i class="fa-solid fa-heart text-xs text-sb-muted"></i></span>
                        My Favorites
                    </a>
                    <a class="flex items-center justify-between gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="{{ route('dashboard.comments.received') }}">
                        <span class="flex items-center gap-3 min-w-0">
                            <span class="w-6 h-6 rounded-md bg-white/5 inline-flex items-center justify-center shrink-0"><i class="fa-solid fa-inbox text-xs text-sb-muted"></i></span>
                            <span>Received Comments</span>
                        </span>
                        @if(($receivedCommentsCount ?? 0) > 0)
                        <span class="rounded-full border border-cyan-400/25 bg-cyan-500/10 px-2 py-0.5 text-[11px] font-semibold text-cyan-200">{{ $receivedCommentsCount }}</span>
                        @endif
                    </a>

                    <div class="border-t border-panel my-1"></div>

                    <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="{{ $routePublicProfile }}">
                        <span class="w-6 h-6 rounded-md bg-white/5 inline-flex items-center justify-center shrink-0"><i class="fa-solid fa-eye text-xs text-sb-muted"></i></span>
                        View Profile
                    </a>
                    <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="{{ $routeEditProfile }}">
                        <span class="w-6 h-6 rounded-md bg-white/5 inline-flex items-center justify-center shrink-0"><i class="fa-solid fa-cog text-xs text-sb-muted"></i></span>
                        Settings
                    </a>

                    <div class="border-t border-panel mt-1 mb-1"></div>
                    <form method="POST" action="{{ route('logout') }}" class="mb-1">
                        @csrf
                        <button type="submit" class="w-full text-left flex items-center gap-3 px-4 py-2 text-sm text-red-400 hover:bg-white/5">
                            <span class="w-6 h-6 rounded-md bg-white/5 inline-flex items-center justify-center shrink-0"><i class="fa-solid fa-sign-out text-xs"></i></span>
                            Logout
                        </button>
                    </form>
                </div>
            </div>
        @else
            <!-- Guest auth toolbar: desktop CTA + secondary sign-in. -->
            <div class="hidden lg:flex items-center gap-4 shrink-0">
                <a href="/register"
                    aria-label="Join Skinbase"
                    class="inline-flex items-center px-4 py-2 rounded-lg bg-gradient-to-r from-indigo-500 to-cyan-500 text-white text-sm font-semibold shadow-sm transition duration-200 ease-out hover:-translate-y-[1px] hover:shadow-[0_0_15px_rgba(99,102,241,0.7)] focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-black/40">
                    Join Skinbase
                </a>
                <a href="/login"
                    aria-label="Sign in"
                    class="text-sm font-medium text-gray-300 transition-colors hover:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-black/40 rounded-md px-1.5 py-1">
                    Sign in
                </a>
            </div>

            <!-- Guest auth on mobile: icon trigger with lightweight dropdown menu. -->
            <details class="relative lg:hidden shrink-0">
                <summary
                    aria-label="Open authentication menu"
                    class="list-none inline-flex items-center justify-center w-10 h-10 rounded-lg text-gray-300 hover:text-white hover:bg-white/5 cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                        <path d="M20 21a8 8 0 1 0-16 0" />
                        <circle cx="12" cy="7" r="4" />
                    </svg>
                </summary>
                <div class="absolute right-0 mt-2 w-48 rounded-xl border border-white/10 bg-black/80 backdrop-blur p-2 shadow-sb">
                    <a href="/register"
                        aria-label="Join Skinbase"
                        class="block px-3 py-2 rounded-lg bg-gradient-to-r from-indigo-500 to-cyan-500 text-white text-sm font-semibold transition duration-200 ease-out hover:shadow-[0_0_12px_rgba(59,130,246,0.6)] focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        Join Skinbase
                    </a>
                    <a href="/login"
                        aria-label="Sign in"
                        class="mt-1 block px-3 py-2 rounded-lg text-sm font-medium text-gray-300 transition-colors hover:text-white hover:bg-white/5 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        Sign in
                    </a>
                </div>
            </details>
        @endif
    </div>
</header>

<!-- MOBILE MENU -->
<div class="hidden fixed inset-x-0 top-16 bottom-0 z-40 overflow-y-auto overscroll-contain bg-nova border-b border-panel p-4 shadow-sb" id="mobileMenu">
    <div class="space-y-0.5 text-sm text-soft">

        @if(! $skinbaseToolbarCanAuth)
        <div class="my-2 border-t border-panel"></div>
        @endif

        <div class="pt-1">
            <button type="button" data-mobile-section-toggle aria-controls="mobileSectionDiscover" aria-expanded="true" class="w-full flex items-center justify-between py-2.5 px-3 rounded-lg text-[11px] font-semibold uppercase tracking-widest text-sb-muted hover:bg-white/5">
                <span>Discover</span>
                <i data-mobile-section-icon class="fa-solid fa-chevron-down text-xs transition-transform rotate-180"></i>
            </button>
            <div id="mobileSectionDiscover" data-mobile-section-panel class="mt-0.5 space-y-0.5">
                <a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/discover/trending"><i class="fa-solid fa-fire w-4 text-center text-sb-muted"></i>Trending</a>
                <a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/discover/rising"><i class="fa-solid fa-rocket w-4 text-center text-sb-muted"></i>Rising</a>
                <a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/discover/fresh"><i class="fa-solid fa-bolt w-4 text-center text-sb-muted"></i>Fresh</a>
                <a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/discover/top-rated"><i class="fa-solid fa-medal w-4 text-center text-sb-muted"></i>Top Rated</a>
                <a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/discover/most-downloaded"><i class="fa-solid fa-download w-4 text-center text-sb-muted"></i>Most Downloaded</a>
                <a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="{{ route('downloads.today') }}"><i class="fa-solid fa-arrow-down-short-wide w-4 text-center text-sb-muted"></i>Today Downloads</a>
                <a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/discover/on-this-day"><i class="fa-solid fa-calendar-day w-4 text-center text-sb-muted"></i>On This Day</a>
                <a class="flex items-center gap-3 py-2.5 px-3 rounded-lg {{ request()->is('worlds', 'worlds/*') ? 'bg-white/10 text-white' : 'hover:bg-white/5' }}" href="{{ route('worlds.index') }}"><i class="fa-solid fa-stars w-4 text-center text-sb-muted"></i>Worlds</a>
                @if($toolbarActiveCampaign)
                <a class="flex items-center gap-3 py-2.5 px-3 rounded-lg border border-emerald-300/10 bg-emerald-400/10 hover:bg-emerald-400/15" href="{{ $toolbarActiveCampaign['url'] }}"><i class="fa-solid fa-bolt w-4 text-center text-emerald-200"></i>{{ \Illuminate\Support\Str::limit($toolbarActiveCampaign['title'], 28) }}</a>
                @endif
            </div>
        </div>

        <div class="pt-1">
            <button type="button" data-mobile-section-toggle aria-controls="mobileSectionBrowse" aria-expanded="false" class="w-full flex items-center justify-between py-2.5 px-3 rounded-lg text-[11px] font-semibold uppercase tracking-widest text-sb-muted hover:bg-white/5">
                <span>Browse</span>
                <i data-mobile-section-icon class="fa-solid fa-chevron-down text-xs transition-transform"></i>
            </button>
            <div id="mobileSectionBrowse" data-mobile-section-panel class="hidden mt-0.5 space-y-0.5">
                <a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/browse"><i class="fa-solid fa-border-all w-4 text-center text-sb-muted"></i>All Artworks</a>
                @foreach($toolbarContentTypes as $contentType)
                @php
                    $contentTypeSlug = strtolower((string) $contentType->slug);
                    $contentTypeIcon = $toolbarContentTypeIcons[$contentTypeSlug] ?? 'fa-folder-open';
                @endphp
                <a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/{{ $contentTypeSlug }}"><i class="fa-solid {{ $contentTypeIcon }} w-4 text-center text-sb-muted"></i>{{ $contentType->name }}</a>
                @endforeach
                <a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/tags"><i class="fa-solid fa-tags w-4 text-center text-sb-muted"></i>Tags</a>
            </div>
        </div>

        <div class="pt-1">
            <button type="button" data-mobile-section-toggle aria-controls="mobileSectionGroups" aria-expanded="false" class="w-full flex items-center justify-between py-2.5 px-3 rounded-lg text-[11px] font-semibold uppercase tracking-widest text-sb-muted hover:bg-white/5">
                <span>Groups</span>
                <i data-mobile-section-icon class="fa-solid fa-chevron-down text-xs transition-transform"></i>
            </button>
            <div id="mobileSectionGroups" data-mobile-section-panel class="hidden mt-0.5 space-y-0.5">
                <a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/groups"><i class="fa-solid fa-people-group w-4 text-center text-sb-muted"></i>Browse Groups</a>
                <a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/groups?surface=featured"><i class="fa-solid fa-star w-4 text-center text-sb-muted"></i>Featured Groups</a>
                <a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/groups?surface=recruiting"><i class="fa-solid fa-user-plus w-4 text-center text-sb-muted"></i>Recruiting Now</a>
                <a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/groups?surface=new_rising"><i class="fa-solid fa-arrow-trend-up w-4 text-center text-sb-muted"></i>New & Rising</a>
                <a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/leaderboard?type=groups&period=monthly"><i class="fa-solid fa-trophy w-4 text-center text-sb-muted"></i>Group Leaderboard</a>
            </div>
        </div>

        <div class="pt-1">
            <button type="button" data-mobile-section-toggle aria-controls="mobileSectionCreators" aria-expanded="false" class="w-full flex items-center justify-between py-2.5 px-3 rounded-lg text-[11px] font-semibold uppercase tracking-widest text-sb-muted hover:bg-white/5">
                <span>Creators</span>
                <i data-mobile-section-icon class="fa-solid fa-chevron-down text-xs transition-transform"></i>
            </button>
            <div id="mobileSectionCreators" data-mobile-section-panel class="hidden mt-0.5 space-y-0.5">
                <a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/creators/top"><i class="fa-solid fa-star w-4 text-center text-sb-muted"></i>Top Creators</a>
                <a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/leaderboard"><i class="fa-solid fa-trophy w-4 text-center text-sb-muted"></i>Leaderboard</a>
                <a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/creators/rising"><i class="fa-solid fa-arrow-trend-up w-4 text-center text-sb-muted"></i>Rising Creators</a>
                <a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/stories"><i class="fa-solid fa-microphone w-4 text-center text-sb-muted"></i>Creator Stories</a>
                @if($skinbaseToolbarCanAuth)
                <a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="{{ route('creator.stories.index') }}"><i class="fa-solid fa-rectangle-list w-4 text-center text-sb-muted"></i>My Stories</a>
                <a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="{{ route('dashboard.following') }}"><i class="fa-solid fa-user-plus w-4 text-center text-sb-muted"></i>Following</a>
                @endif
            </div>
        </div>

        <div class="pt-1">
            <button type="button" data-mobile-section-toggle aria-controls="mobileSectionCommunity" aria-expanded="false" class="w-full flex items-center justify-between py-2.5 px-3 rounded-lg text-[11px] font-semibold uppercase tracking-widest text-sb-muted hover:bg-white/5">
                <span>Community</span>
                <i data-mobile-section-icon class="fa-solid fa-chevron-down text-xs transition-transform"></i>
            </button>
            <div id="mobileSectionCommunity" data-mobile-section-panel class="hidden mt-0.5 space-y-0.5">
                <a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="{{ route('community.activity') }}"><i class="fa-solid fa-wave-square w-4 text-center text-sb-muted"></i>Activity Feed</a>
                @if($skinbaseToolbarCanAuth)
                <a class="flex items-center justify-between gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="{{ route('dashboard.comments.received') }}"><span class="flex items-center gap-3"><i class="fa-solid fa-inbox w-4 text-center text-sb-muted"></i>Received Comments</span>@if(($receivedCommentsCount ?? 0) > 0)<span class="rounded-full border border-cyan-400/25 bg-cyan-500/10 px-2 py-0.5 text-[11px] font-semibold text-cyan-200">{{ $receivedCommentsCount }}</span>@endif</a>
                @endif
                <a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/forum"><i class="fa-solid fa-comments w-4 text-center text-sb-muted"></i>Forum</a>
                <a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/news"><i class="fa-solid fa-newspaper w-4 text-center text-sb-muted"></i>News</a>
            </div>
        </div>

    </div>
</div>
