{{-- SUBSTITUA APENAS O ITEM "Amigos" NO MENU MEU PERFIL POR ESTE BLOCO --}}

<style>
.profile-dropdown-submenu{position:relative}.profile-dropdown-submenu-toggle{min-height:34px!important;padding:8px 10px!important;border-radius:10px!important;color:#e5edff!important;background:transparent!important;border:1px solid transparent!important;display:flex!important;align-items:center!important;justify-content:space-between!important;font-size:12px!important;font-weight:800!important}.profile-dropdown-submenu-toggle:hover,.profile-dropdown-submenu.open .profile-dropdown-submenu-toggle{background:linear-gradient(135deg,rgba(59,130,246,.14),rgba(34,197,94,.08))!important;border-color:rgba(255,255,255,.07)!important}.profile-dropdown-icon{width:18px;height:18px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;background:rgba(59,130,246,.14);color:#60a5fa;font-size:10px}.profile-dropdown-submenu-menu{display:none;margin:5px 0 3px 24px;padding:5px;border-radius:12px;background:rgba(15,23,42,.78);border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}.profile-dropdown-submenu.open .profile-dropdown-submenu-menu{display:grid;gap:4px}.profile-dropdown-subitem{min-height:30px;padding:6px 9px;border-radius:9px;color:#cbd5e1!important;text-decoration:none!important;display:flex;align-items:center;gap:7px;font-size:12px;font-weight:800}.profile-dropdown-subitem:hover{background:rgba(255,255,255,.06);color:#fff!important}.profile-status-dot{font-size:10px;line-height:1}.profile-status-dot.online{color:#22c55e}.profile-status-dot.offline{color:#94a3b8}
</style>

<div class="profile-dropdown-submenu" id="friendsSubmenu">
    <button type="button" class="profile-dropdown-item profile-dropdown-submenu-toggle" id="friendsSubmenuToggle" style="width:100%; text-align:left; cursor:pointer;">
        <span style="display:flex; align-items:center; gap:8px; min-width:0;">
            <span class="profile-dropdown-icon">◉</span>
            <span>Amigos</span>
        </span>
        <span style="opacity:.75; font-size:11px;">▸</span>
    </button>

    <div class="profile-dropdown-submenu-menu">
        <a href="{{ route('friends.index') }}#collapseOnline" class="profile-dropdown-subitem">
            <span class="profile-status-dot online">●</span>
            <span>Online</span>
        </a>

        <a href="{{ route('friends.index') }}#collapseOffline" class="profile-dropdown-subitem">
            <span class="profile-status-dot offline">●</span>
            <span>Offline</span>
        </a>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const toggle = document.getElementById('friendsSubmenuToggle');
    const submenu = document.getElementById('friendsSubmenu');

    if (toggle && submenu && !toggle.dataset.kruxFriendsBound) {
        toggle.dataset.kruxFriendsBound = '1';
        toggle.addEventListener('click', function (e) {
            e.preventDefault();
            e.stopPropagation();
            submenu.classList.toggle('open');
        });
    }
});
</script>