/* ==========================================================================
 * fb-nav.css — FB-parity mobile bottom nav (2026-09-24, per Fabian).
 * Icon-only, FB dark bar (#1c1e21), rounded-line icons, red 9+ badge.
 * Loaded directly (not minified) via layouts/user-no-nav.blade.php with
 * ?v=20260924t. Mobile-only: the include sits inside d-block d-md-none.
 * ========================================================================== */

.mobile-bottom-nav.fb-nav {
    background: #1c1e21;
    border-top: 1px solid rgba(255, 255, 255, 0.09) !important;
    height: calc(var(--tt-tabbar-h, 64px) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mobile-bottom-nav.fb-nav .fb-nav-inner {
    height: 100%;
}

.mobile-bottom-nav.fb-nav .fb-nav-tab {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #b0b3b8;
    text-decoration: none;
}

.mobile-bottom-nav.fb-nav .fb-nav-tab:hover,
.mobile-bottom-nav.fb-nav .fb-nav-tab:focus {
    color: #e4e6eb;
    text-decoration: none;
}

.mobile-bottom-nav.fb-nav .fb-nav-tab.active {
    color: #2d88ff; /* FB dark-mode primary */
}

.mobile-bottom-nav.fb-nav .fb-nav-tab:focus-visible {
    outline: 2px solid #2d88ff;
    outline-offset: -2px;
}

/* Icon sizing — same 1em wrapper contract as ionicons, slightly larger. */
.mobile-bottom-nav.fb-nav .fb-nav-tab .ion-icon-wrapper {
    font-size: 27px;
}

.mobile-bottom-nav.fb-nav .fb-nav-icon {
    position: relative;
    line-height: 1;
}

/* FB-style red unread badge, capped at 9+. */
.mobile-bottom-nav.fb-nav .fb-nav-badge {
    position: absolute;
    top: -7px;
    right: -13px;
    min-width: 20px;
    height: 20px;
    padding: 5px 5px 0;
    border-radius: 999px;
    background: #e41e3f;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

/* Profile avatar tab. */
.mobile-bottom-nav.fb-nav .fb-nav-avatar img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    display: block;
}

.mobile-bottom-nav.fb-nav .fb-nav-tab.active .fb-nav-avatar img {
    box-shadow: 0 0 0 2px #2d88ff;
}