/* =========================
   フッター高さ変数
========================= */
:root{
    --footer-height: 70px;
}

/* =========================
   本文がフッターに隠れないように
========================= */
body{
    padding-bottom:
        calc(
            var(--footer-height)
            + env(safe-area-inset-bottom)
            + 20px
        );
}

/* =========================
   📌 フッター本体
========================= */
.feed-footer{
    position: fixed;

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

    width: 100%;

    height:
        calc(
            var(--footer-height)
            + env(safe-area-inset-bottom)
        );

    padding-bottom: env(safe-area-inset-bottom);

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(15,15,22,0.82);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border-top:
        1px solid rgba(255,255,255,0.08);

    box-shadow:
        0 -6px 30px rgba(0,0,0,0.35);

    z-index: 1000000;
}

/* =========================
   左右エリア
========================= */
.left-tools,
.right-tools{
    position: absolute;

    top: 50%;
    transform: translateY(-50%);

    display: flex;
    align-items: center;

    gap: 14px;
}

.left-tools{
    left: 18px;
}

.right-tools{
    right: 18px;
}

/* =========================
   アイコンボタン
========================= */
.footer-tool{
    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 18px;

    text-decoration: none;

    color: rgba(255,255,255,0.94);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.14),
            rgba(255,255,255,0.05)
        );

    border:
        1px solid rgba(255,255,255,0.08);

    box-shadow:
        0 4px 18px rgba(0,0,0,0.25);

    transition:
        transform .15s ease,
        background .15s ease;
}

/* SVG */
.footer-tool svg{
    width: 24px;
    height: 24px;

    stroke: currentColor;
}

/* hover */
.footer-tool:hover{
    transform: translateY(-2px);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.18),
            rgba(255,255,255,0.08)
        );
}

/* active */
.footer-tool:active{
    transform: scale(0.92);
}

/* =========================
   LIVEボタン
========================= */
.live-btn{
    background:
        linear-gradient(
            145deg,
            rgba(255,0,90,0.25),
            rgba(255,0,90,0.10)
        );

    box-shadow:
        0 0 20px rgba(255,0,90,0.25);
}

/* =========================
   中央FAB
========================= */
.fab{
    width: 68px;
    height: 68px;

    border-radius: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;

    color: white;
    font-size: 38px;

    background:
        linear-gradient(
            135deg,
            #ff2d75,
            #ff6b81
        );

    border:
        2px solid rgba(255,255,255,0.9);

    box-shadow:
        0 10px 28px rgba(255,45,117,0.35);

    transform: translateY(-20px);

    transition: 0.18s ease;

    z-index: 100000;
}

/* hover */
.fab:hover{
    transform:
        translateY(-24px)
        scale(1.03);
}

/* active */
.fab:active{
    transform:
        translateY(-20px)
        scale(0.92);
}

/* =========================
   スマホ最適化
========================= */
@media (max-width: 480px){

    .footer-tool{
        width: 48px;
        height: 48px;
    }

    .footer-tool svg{
        width: 22px;
        height: 22px;
    }

    .fab{
        width: 64px;
        height: 64px;
        font-size: 34px;
    }

    .left-tools{
        left: 12px;
        gap: 10px;
    }

    .right-tools{
        right: 12px;
        gap: 10px;
    }
}