/* ==============================================
   MOBILE BOTTOM NAVIGATION
   Modern bottom nav bar for authenticated users
   ============================================== */

:root {
    --bottom-nav-height: 52px;
}

.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Horizontal inset + gap matter now that slots flex to fill the bar. Without
       them the last slot's right edge lands exactly on the viewport edge, which
       clips the rounded corners of the tinted "Go Premium" pill against the bezel
       and butts every slot's tap highlight against its neighbour. */
    padding: 4px 6px;
    gap: 2px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    display: none; /* Hidden by default, shown on mobile */
    align-items: center;
    justify-content: space-around;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transition: all 0.2s ease;
}

/* Lift the nav content above the device's bottom safe area / system nav bar.
   env(safe-area-inset-bottom) covers the iOS home indicator and display
   cutouts. --android-nav-inset-bottom is injected by the Android host because
   an edge-to-edge Android WebView does NOT surface the gesture / 3-button
   navigation bar through env(); it stays 0px on web and iOS. */
.bottom-nav {
    padding-bottom: max(env(safe-area-inset-bottom), var(--android-nav-inset-bottom, 0px), 4px);
}

/* Slots share the bar evenly instead of each claiming a fixed min-width. A fixed
   64px + 24px padding made every slot 88px, so the 5-tab layout (Discover,
   Library, Watch, Connect, You/Go Premium) needed 440px and clipped the last tab
   on EVERY iPhone, including the 430pt Pro Max -- the Watch tab is conditional,
   so enabling Watch in 1.5.0 is what pushed it over. `flex: 1 1 0` + `min-width: 0`
   lets the row divide whatever width exists, so it cannot overflow at 4, 5 or 6
   tabs. min-height stays 44px for the Apple tap-target minimum. */
.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    padding: 6px 4px;
    color: var(--text-secondary, #64748b);
    text-decoration: none;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: all 0.2s ease;
    border-radius: 12px;
    position: relative;
}

.bottom-nav-item i {
    font-size: 22px;
    transition: all 0.2s ease;
}

/* Labels must never widen a slot or wrap to a second line: "Go Premium" is the
   longest and appears in the same slot "You" occupies for paid members. Clipping
   with an ellipsis keeps every slot the same height and the icons on one baseline. */
.bottom-nav-item span {
    opacity: 0.9;
    transition: all 0.2s ease;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Active state */
.bottom-nav-item.active {
    color: var(--primary-color, #00b4ff);
    font-weight: 600;
}

.bottom-nav-item.active i {
    transform: scale(1.1);
}

.bottom-nav-item.active span {
    opacity: 1;
}

/* Hover/tap feedback */
.bottom-nav-item:hover,
.bottom-nav-item:focus {
    background: rgba(0, 180, 255, 0.08);
    outline: none;
}

.bottom-nav-item:active {
    transform: scale(0.95);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .bottom-nav {
        display: flex;
    }

    /* Pad the body so content clears the fixed bottom nav AND the device's
       bottom safe area / system nav bar. env(safe-area-inset-bottom) covers the
       iOS home indicator; --android-nav-inset-bottom is the host-forwarded
       Android nav-bar inset (0px on web/iOS). */
    body {
        padding-bottom: calc(var(--bottom-nav-height, 52px) + max(env(safe-area-inset-bottom), var(--android-nav-inset-bottom, 0px))) !important;
    }
}

/* Extra breathing room on phone-width screens. Raised from 380px to 430px: the old
   value sat BELOW every shipping iPhone width (375 / 390 / 393 / 402 / 430), so it
   never fired on the devices that needed it.

   Padding only. Slot width now comes from flex, and measurement showed the original
   10px label / 22px icon still fits five tabs with no truncation at 375px (the
   narrowest supported iPhone), so this deliberately does NOT shrink type -- doing so
   would have cost every iPhone a smaller label to solve a problem flex already solved. */
@media (max-width: 430px) {
    .bottom-nav-item {
        padding: 4px 2px;
    }
}

/* Dark mode */
body.dark-mode .bottom-nav {
    background: rgba(26, 26, 26, 0.98);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .bottom-nav-item {
    color: var(--text-secondary, #9ca3af);
}

body.dark-mode .bottom-nav-item.active {
    color: var(--primary-color, #00b4ff);
}

body.dark-mode .bottom-nav-item:hover,
body.dark-mode .bottom-nav-item:focus {
    background: rgba(0, 180, 255, 0.12);
}

/* Free-tier "Go Premium" upsell: a quiet purple pill within the tab bar --
   premium accent, visible without shouting. Purple maps to the Premium brand.
   If a shared premium-purple token gets introduced later, swap these literals
   for it. This block must stay AFTER the base .bottom-nav-item :hover / .active
   rules above -- the pro overrides win by source order at equal specificity. */
.bottom-nav-item-pro {
    color: #6d4bd8;
    background: rgba(124, 92, 255, 0.12);
}

.bottom-nav-item-pro.active {
    color: #6d4bd8;
}

.bottom-nav-item-pro:hover,
.bottom-nav-item-pro:focus {
    background: rgba(124, 92, 255, 0.20);
}

body.dark-mode .bottom-nav-item-pro {
    color: #b3a1ff;
    background: rgba(124, 92, 255, 0.20);
}

body.dark-mode .bottom-nav-item-pro:hover,
body.dark-mode .bottom-nav-item-pro:focus {
    background: rgba(124, 92, 255, 0.28);
}

/* Keep the active "Go Premium" pill purple in dark mode. Without this, the pill
   on /upgrade inherits the blue active color from the higher-specificity
   body.dark-mode .bottom-nav-item.active rule. Matches that rule's specificity
   (0,3,0) and wins by source order. */
body.dark-mode .bottom-nav-item-pro.active {
    color: #b3a1ff;
}