/* ===========================================
   Mobile Bottom Navigation
   Für Safari Mobile und PWA
   =========================================== */

:root {
    --mobile-nav-height: 48px;
    --mobile-nav-safe-area: env(safe-area-inset-bottom, 0px);
}

.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--mobile-nav-height) + var(--mobile-nav-safe-area));
    background: var(--white);
    border-top: 1px solid var(--border-light);
    display: none;
    z-index: 9998;
    box-shadow: var(--shadow-sm);
    padding-bottom: var(--mobile-nav-safe-area);
}

/* Sichtbar auf Mobile (Safari und PWA) */
@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        padding-top: 4px;
    }
}

/* PWA Standalone Mode */
@media all and (display-mode: standalone) {
    .mobile-bottom-nav {
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        padding-top: 4px;
    }
}

/* Fallback für iOS Safari PWA */
body.pwa-standalone .mobile-bottom-nav {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    padding-top: 4px;
}

/* Navigation verstecken wenn Tastatur offen */
body.keyboard-open .mobile-bottom-nav,
.mobile-bottom-nav[style*="display: none"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    transform: translateY(100%) !important;
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--gray-500);
    padding: 3px 4px 6px;
    border-radius: 8px;
    transition: color 0.2s ease, background-color 0.2s ease;
    min-width: 0;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    flex: 1;
    max-width: 120px;
}

.mobile-nav-item:active {
    background-color: rgba(var(--primary-rgb), 0.08);
}

.mobile-nav-item svg {
    width: 20px;
    height: 20px;
    margin-bottom: 2px;
    stroke-width: 2;
    transition: stroke-width 0.2s ease;
}

.mobile-nav-item span {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

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

.mobile-nav-item.active svg {
    stroke-width: 2.5;
}

/* Highlight hinter aktivem Nav-Item (Icon + Text) */
.mobile-nav-item.active::before {
    content: '';
    position: absolute;
    inset: 1px 4px;
    background: var(--primary-color);
    opacity: 0.12;
    border-radius: 8px;
}

.mobile-nav-item.active span {
    font-weight: 700;
}

/* Icon Wrapper für Badge-Positionierung */
.nav-icon-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-icon-wrapper svg {
    width: 20px;
    height: 20px;
    margin-bottom: 2px;
}

/* Notification Badge */
.nav-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    width: 18px;
    height: 18px;
    background: var(--error-color);
    color: var(--text-on-color);
    font-size: 10px;
    font-weight: 600;
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center; justify-content: center; font-variant-numeric: tabular-nums; /* wie .nav-badge-desktop: proportionale Ziffern sitzen im Kreis nicht mittig */
}
.nav-badge:empty, .nav-badge-desktop:empty { display: none; } /* Initial leer statt Inline-Style (Home-/Feed-Nav); JS füllt beim Zählen. Desktop-Variante hier mit, weil livexo-header.css exakt auf der Zeilen-Decke liegt */

/* Kopfleiste (Desktop): Zahl als Eck-Blase statt im Textfluss. Die Zahlen kommen per JS erst nach
   dem ersten Malen und schoben sonst die ganze Navigation samt Bandwechsler zur Seite (bis 96px).
   gap:0: gemessen wurde der Feed-Link (Badge ohne Leerraum davor) in Chrome sonst trotzdem 6px
   breiter. Hier statt in livexo-header.css (Zeilen-Decke); Mobil-Menue bleibt im Fluss. */
@media (min-width: 769px) {
    .nav-badge-desktop { position: absolute; top: -4px; right: -8px; }
    .livexo-header .header-nav .nav-link.nav-link-with-badge { gap: 0; }
}
@media (min-width: 769px) and (max-width: 1024px) { /* dort hat .nav-link nur 0 12px Innenabstand: gleiche Lage zum Text wie breit */
    .nav-badge-desktop { top: -12px; right: -12px; }
}

/* Badge für große Zahlen (10+) */
.nav-badge.large {
    width: 22px;
    height: 18px;
    border-radius: 9px;
    font-size: 9px;
}

/* Body Padding für Content unter der Navigation (ohne Navigation kein Platz) */
@media (max-width: 768px) {
    body:not(.keyboard-open):not(.no-bottom-nav) {
        padding-bottom: calc(var(--mobile-nav-height) + var(--mobile-nav-safe-area));
    }
}

@media all and (display-mode: standalone) {
    body:not(.keyboard-open):not(.no-bottom-nav) {
        padding-bottom: calc(var(--mobile-nav-height) + var(--mobile-nav-safe-area));
    }
}

body.pwa-standalone:not(.keyboard-open):not(.no-bottom-nav) {
    padding-bottom: calc(var(--mobile-nav-height) + var(--mobile-nav-safe-area));
}