/* Task #813: SINGLE SOURCE OF TRUTH for the mobile bottom tab bar.
   Loaded by the chat homepage (public/index.html) and every standalone
   marketing/legal page (pricing/privacy/terms). The duplicated rules
   that used to live in public/styles.css were deleted so the two could
   never drift again. */

.mobile-bottom-tabs {
    display: none;
}

@media (max-width: 768px) {
    .mobile-bottom-tabs {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 64px;
        /* Task #813: explicit box-sizing so the 64px height includes padding
           identically regardless of which page's global resets are active. */
        box-sizing: border-box;
        /* Task #813: pin the font stack on the bar so labels render at the
           same metrics on every page (legal pages don't load styles.css and
           inherited typography was drifting slightly). */
        font-family: 'Manrope', system-ui, -apple-system, sans-serif;
        background: var(--bg-primary, #0a0a0f);
        /* Task #770: removed divider line between chat input and tab bar. */
        border-top: 0;
        z-index: 10000;
        align-items: center;
        justify-content: space-around;
        padding: 4px 0 env(safe-area-inset-bottom, 8px);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        transition: transform 0.25s ease;
    }

    body.light-mode .mobile-bottom-tabs,
    .light-mode .mobile-bottom-tabs {
        background: rgba(255, 255, 255, 0.95);
        border-top: 0;
    }

    .mobile-bottom-tabs.tabs-hidden {
        transform: translateY(100%);
    }

    .mobile-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        flex: 1;
        height: 100%;
        background: none;
        border: none;
        color: var(--text-secondary, #8b8fa3);
        cursor: pointer;
        transition: color 0.2s ease;
        padding: 0;
        text-decoration: none;
        /* Task #813: explicit box-sizing on each tab too — same reason as
           on the bar itself. */
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-tab.active {
        color: var(--accent-purple, #3AAFD4);
    }

    .mobile-tab svg {
        width: 22px;
        height: 22px;
    }

    .mobile-tab-label {
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.02em;
        /* Task #813: explicit line-height so labels render at identical
           vertical metrics regardless of page-level font inheritance. */
        line-height: 1.2;
    }

    /* Task #719 / #804 / #811: the Chat tab is hidden until the user
       actually sends their first message to DEON. app.js sets
       `body.has-chat` on the chat homepage; on standalone pages
       (pricing/privacy/terms) mobile-bottom-tabs.js mirrors the class
       from the live sessionStorage `deon.guestMessageLog` so the tab
       persists across same-tab navigations but never leaks across
       fresh tab sessions. Brand-new visitors see just Home · Workspace
       · Profile on every page. */
    .mobile-tab[data-tab="chat"] {
        display: none;
    }
    body.has-chat .mobile-tab[data-tab="chat"] {
        display: flex;
    }

    /* Reserve room at the bottom of the page so the fixed bar never
       overlaps the last line of the legal copy. */
    body.has-mobile-bottom-tabs {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 8px));
    }
}

/* Task #770 — median.co WebView (TestFlight / native iOS build) only.
   Bump the bottom-tab icons +35% so they read at native-app size. */
body.median-app .mobile-tab svg {
    width: 30px !important;
    height: 30px !important;
}
body.median-app .mobile-tab-label {
    font-size: 13.5px !important;
}
@media (max-width: 768px) {
    body.median-app .mobile-bottom-tabs {
        height: 78px !important;
    }
    body.median-app.has-mobile-bottom-tabs {
        padding-bottom: calc(78px + env(safe-area-inset-bottom, 8px)) !important;
    }
}