/* =========================================================
    BOTTOM NAVIGATION
========================================================= */
.mobile-bottom-nav {
    --blue: #1769ff;
    --blue-dark: #0f58dc;
    --text: #111827;
    --muted: #6b7280;
    --border: #e9edf3;
    --surface: #ffffff;
    --soft: #f5f7fa;
    --nav-height: 64px;

    position: fixed;

    left: 0;
    right: 0;
    bottom: 0px;
    
    min-width: 297px;
    height: var(--bottom-nav-height);

    background: rgba(255, 255, 255, 0.98);
    border-top: 1px solid var(--border);
    display: none;
    align-items: flex-start;
    justify-content: space-around;
    z-index: 9999;

    * {
        box-sizing: border-box;
    }
    
    

    


    /* =========================================================
        STANDARD NAV ITEM
    ========================================================= */
    .mobile-nav-item {
        position: relative;
        width: 20%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        color: var(--muted);
        font-size: 11px;
        font-weight: 500;
        line-height: 1;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.18s ease, transform 0.18s ease;
    }

    .mobile-nav-item:active {
        transform: scale(0.94);
    }

    .mobile-nav-item.active {
        color: var(--blue);
    }

    /* =========================================================
        NAV ICON
    ========================================================= */
    .mobile-nav-icon {
        --width: 25px;
        width: var(--width);
        aspect-ratio: 1/1;
        display: flex;
        align-items: center;
        justify-content: center;

        &.messages {
            width: calc(var(--width) - 2px);
        }

        &.home-icon {
            width: calc(var(--width) - 3px);
        }
    }

    .mobile-nav-icon svg {
        width: 100%;
        aspect-ratio: 1/1;
        display: block;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* =========================================================
        NAV LABEL
    ========================================================= */
    .mobile-nav-label {
        line-height: 1;
        white-space: nowrap;
    }

    /* =========================================================
        CREATE / SKAPA
    ========================================================= */
    .mobile-create-item {
        position: relative;
        width: 20%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        color: var(--text);
        font-size: 10px;
        font-weight: 600;
        -webkit-tap-highlight-color: transparent;
    }

    /* =========================================================
        CREATE BUTTON
    ========================================================= */
    .mobile-create-button {
        width: 41px;
        aspect-ratio: 1 / 1;
        border-radius: 10px;
        border: 4px solid #ffffff;
        background: var(--blue);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        cursor: pointer;
        transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
        background: #3d3d3e;
        
    }

    .mobile-create-button svg {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7px;
        stroke-linecap: round;
    }

    .mobile-create-button:active {
        background: var(--blue-dark);
        transform: scale(0.92);
        box-shadow: 0 3px 10px rgba(23, 105, 255, 0.20);
    }

    .mobile-create-label {
        line-height: 1;
    }
}