/* =========================================================
    BOTTOM NAVIGATION (DARK VERSION)
========================================================= */
.mobile-bottom-nav {
    --blue: #1769ff;
    --blue-dark: #0f58dc;
    --text: #ffffff;
    --muted: #a1a1aa;
    --border: #27272a;
    --surface: #121212;
    --soft: #18181b;
    --nav-height: 64px;

    position: fixed;

    left: 0;
    right: 0;
    bottom: 0px;

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

    background: #111111;
    border-top: 1px solid var(--border);
    display: none;
    align-items: flex-start;
    justify-content: space-around;
     z-index: 100000;


    * {
        box-sizing: border-box;
    }






    /* =========================================================
        STANDARD NAV ITEM
    ========================================================= */
    .mobile-nav-item {
        position: relative;

        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: #a7a7a7;
        font-size: 10px;
        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: #ffffff;
    }

    /* =========================================================
        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) - 1px);
        }

        &.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.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

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

    /* =========================================================
        CREATE / SKAPA
    ========================================================= */
    .mobile-create-item {
        position: relative;
     
        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: 37px;
        aspect-ratio: 1 / 1;
        border-radius: 10px;
        border: 4px solid var(--surface);
        background: white;
        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;
    }

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

    .mobile-create-button:active {
        background: #3f3f46;
        transform: scale(0.92);
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.40);
    }

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