/* BIG BUBBLE CHAT v4.5.1 — Mini Bubble Dock refinement */
@media (max-width: 700px) {
    body { padding-bottom: 70px; }

    .mobile-bubble-dock {
        bottom: max(8px, env(safe-area-inset-bottom));
        width: min(calc(100% - 44px), 332px);
        min-height: 54px;
        grid-template-columns: repeat(3, 1fr);
        gap: 3px;
        padding: 4px;
        border-color: rgba(105, 216, 255, .2);
        border-radius: 18px;
        background: linear-gradient(135deg, rgba(3, 19, 49, .97), rgba(10, 39, 83, .96));
        box-shadow: 0 13px 32px rgba(2, 12, 34, .32), inset 0 1px rgba(255, 255, 255, .07);
        animation: miniDockEnter .48s cubic-bezier(.2, .8, .2, 1) both;
    }

    .mobile-bubble-dock::before {
        z-index: 2;
        width: 28px;
        height: 3px;
        top: 4px;
        left: 50%;
        border: 0;
        border-radius: 999px;
        background: linear-gradient(90deg, transparent, #64edf1, transparent);
        box-shadow: 0 0 10px rgba(100, 237, 241, .45);
        transform: translateX(-50%);
        animation: dockLight 3.2s ease-in-out infinite;
    }

    .mobile-bubble-dock::after {
        width: 8px;
        height: 8px;
        right: 9px;
        bottom: auto;
        top: 8px;
        border-color: rgba(111, 233, 245, .3);
        background: rgba(80, 222, 238, .12);
        box-shadow: 0 0 8px rgba(80, 222, 238, .16);
        animation: dockTinyBubble 3.8s ease-in-out infinite;
    }

    .mobile-bubble-dock a,
    .mobile-bubble-dock a[aria-current="page"],
    .mobile-bubble-dock .dock-primary {
        min-height: 46px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1px;
        padding: 4px 3px 2px;
        border: 1px solid transparent;
        border-radius: 14px;
        color: #9cb0cc;
        background: transparent;
        box-shadow: none;
        font-size: 7.5px;
        line-height: 1.1;
        letter-spacing: .01em;
    }

    .mobile-bubble-dock a[aria-current="page"] {
        color: #eaf9ff;
        border-color: rgba(93, 203, 241, .13);
        background: rgba(56, 134, 210, .1);
    }

    .mobile-bubble-dock .dock-primary {
        color: #dffcff;
        border-color: rgba(81, 231, 235, .15);
        background: linear-gradient(135deg, rgba(40, 205, 218, .1), rgba(69, 130, 236, .1));
    }

    .mobile-bubble-dock a i,
    .mobile-bubble-dock .dock-primary i {
        width: 23px;
        height: 23px;
        border-radius: 9px;
        color: #75ebef;
        background: rgba(52, 142, 210, .12);
        box-shadow: none;
        font-size: 12px;
    }

    .mobile-bubble-dock .dock-primary i {
        color: #052544;
        background: linear-gradient(135deg, #73f2e8, #59cafa);
        box-shadow: 0 5px 12px rgba(45, 209, 224, .2);
        animation: dockPrimaryPulse 2.8s ease-in-out infinite;
    }

    .portal-footer.complex-footer { margin-bottom: -70px; padding-bottom: 86px; }
}

@keyframes miniDockEnter {
    from { opacity: 0; transform: translateX(50%) translateY(18px) scale(.96); }
    to { opacity: 1; transform: translateX(50%) translateY(0) scale(1); }
}

@keyframes dockLight {
    0%, 100% { opacity: .45; transform: translateX(-50%) scaleX(.7); }
    50% { opacity: 1; transform: translateX(-50%) scaleX(1.15); }
}

@keyframes dockTinyBubble {
    0%, 100% { opacity: .35; transform: translateY(0) scale(.8); }
    50% { opacity: .8; transform: translateY(-3px) scale(1.1); }
}

@keyframes dockPrimaryPulse {
    0%, 100% { transform: translateY(0); box-shadow: 0 5px 12px rgba(45, 209, 224, .18); }
    50% { transform: translateY(-2px); box-shadow: 0 7px 17px rgba(45, 209, 224, .34); }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-bubble-dock,
    .mobile-bubble-dock::before,
    .mobile-bubble-dock::after,
    .mobile-bubble-dock .dock-primary i { animation: none !important; }
}