/* static/css/mobile-navigation.css */
@import url('./colors.css');

/* ==========================================================================
   Mobile Bottom Navigation Bar
   ========================================================================== */

@media (max-width: 576px) {

    /* Fixed bottom tab bar */
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: #fff;
        border-top: 1px solid var(--bs-gray-200);
        display: flex;
        align-items: stretch;
        justify-content: space-around;
        padding: 4px 0 0;
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
    }

    /* Individual bottom nav items */
    .bottom-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        gap: 2px;
        background: none;
        border: none;
        padding: 6px 0 8px;
        cursor: pointer;
        color: var(--bs-gray-400);
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        transition: color 0.2s ease;
        position: relative;
    }

    .bottom-nav-item i {
        font-size: 20px;
        line-height: 1;
    }

    .bottom-nav-item span {
        font-size: 10px;
        font-weight: 600;
        line-height: 1;
        margin-top: 3px;
        letter-spacing: 0.01em;
    }

    .bottom-nav-item.active {
        color: var(--bs-primary-500, #fe6211);
    }

    .bottom-nav-item:active {
        opacity: 0.7;
    }

    /* Red alert dot — pending account issue (unverified email / incomplete
       onboarding), over the Settings icon in the bottom bar. Mirrors the
       desktop .settings-alert-dot. */
    .mobile-nav-alert-dot {
        position: absolute;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #e5484d;
        border: 1.5px solid var(--bs-white, #fff);
        pointer-events: none;
        z-index: 2;
    }
    .bottom-nav-item .mobile-nav-alert-dot {
        top: 4px;
        left: 50%;
        margin-left: 6px;
    }
    /* ---- Add to home screen (design_handoff_a2hs_banner, 2026-09-06) ----
       The band is the LAST flex child of the app sheet, directly above the
       bottom nav — inside the sheet (it rides its top transition and is
       clipped by its radius), never position:fixed. While it is mounted the
       sheet's tab column flexes instead of the desktop height:100% chain so
       the pane keeps its own scroll and ends exactly above the band. */
    .main-container .tab-container.a2hs-shown {
        overflow: hidden;
    }
    .main-container .tab-container.a2hs-shown .tab-content {
        height: auto;
        flex: 1 1 auto;
        min-height: 0;
    }
    .main-container .tab-container.a2hs-shown .tab-pane {
        height: auto;
        flex: 1 1 auto;
        min-height: 0;
    }
    .a2hs-banner {
        flex: none;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 11px 14px;
        margin-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
        background: #fff7ef;
        border-top: 1px solid #ffd9b8;
        transform: translateY(100%);
        opacity: 0;
        transition: transform 200ms ease, opacity 200ms ease;
    }
    .a2hs-banner.show {
        transform: none;
        opacity: 1;
    }
    .a2hs-banner.a2hs-ios {
        background: #eff8ff;
        border-top-color: #bfe3fb;
    }
    .a2hs-icon {
        width: 34px;
        height: 34px;
        border-radius: 9px;
        flex: none;
    }
    .a2hs-copy {
        flex: 1;
        min-width: 0;
    }
    .a2hs-title {
        font-size: 13px;
        font-weight: 700;
        line-height: 1.35;
        color: #212529;
    }
    .a2hs-sub {
        font-size: 11.5px;
        font-weight: 400;
        color: #8a5a2b;
        margin-top: 1px;
    }
    .a2hs-ios .a2hs-sub {
        color: #0b6ba8;
    }
    .a2hs-cta {
        flex: none;
        position: relative;
        height: 36px;
        padding: 0 14px;
        border: none;
        border-radius: 999px;
        background: #fe6211;
        color: #fff;
        font-family: inherit;
        font-size: 12.5px;
        font-weight: 700;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    /* 44px hit area without growing the pill. */
    .a2hs-cta::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -4px;
        bottom: -4px;
    }
    .a2hs-cta:active {
        background: #e8560c;
    }
    .a2hs-x {
        flex: none;
        width: 44px;
        height: 44px;
        margin: -4px -14px -4px -8px;
        border: none;
        background: transparent;
        color: #b98a5e;
        font-size: 15px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .a2hs-ios .a2hs-x {
        color: #7ba6c4;
    }
    @media (prefers-reduced-motion: reduce) {
        .a2hs-banner { transition: none; }
    }

    /* main-container height set in chat-styles.css accounting for header + bottom nav */

    /* Hide old top pill navigation */
    .mobile-nav-container {
        display: none !important;
    }

    /* Hide original desktop navigation on mobile */
    .nav-tabs {
        display: none;
    }

    .tab-content {
        padding-top: 0;
    }

    .tab-pane {
        animation: bottomNavFadeIn 0.3s ease;
    }

    @keyframes bottomNavFadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* Desktop — hide all mobile elements */
@media (min-width: 577px) {

    .mobile-bottom-nav,
    .mobile-nav-container,
    .mobile-nav-dropdown {
        display: none;
    }
}

/* ============================================================
   Mobile Settings — full-screen grouped list (iOS style)
   per design_handoff_auth_mobile. Replaces the old bottom sheet.
   Built by mobile-navigation.js _createSettingsSheet().
   ============================================================ */
/* Scrim — tap outside the sheet to dismiss (returns to the app). */
.ma-settings {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(33, 37, 41, 0.45);
    display: flex; align-items: flex-end; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity 220ms ease, visibility 220ms ease;
    font-family: inherit;
    -webkit-font-smoothing: antialiased;
}
.ma-settings.show { opacity: 1; visibility: visible; }

/* Bottom sheet — slides up; scrollable; rounded top + grab handle. */
.ma-set-sheet {
    width: 100%; max-width: 520px; max-height: 88vh;
    background: #f8f9fa; border-radius: 24px 24px 0 0;
    display: flex; flex-direction: column; overflow: hidden;
    transform: translateY(100%);
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 -10px 40px rgba(6, 43, 75, 0.18);
}
.ma-settings.show .ma-set-sheet { transform: none; }
@media (prefers-reduced-motion: reduce) {
    .ma-settings, .ma-set-sheet { transition: none; }
}
.ma-set-grab {
    width: 40px; height: 4px; border-radius: 999px; background: #ced4da;
    margin: 10px auto 2px; flex: none;
}
.ma-set-nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 16px 12px; border-bottom: 1px solid #f1f3f5; flex: none;
}
.ma-set-close {
    width: 32px; height: 32px; border: none; background: transparent; cursor: pointer;
    color: #6c757d; font-size: 17px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
}
.ma-set-close:active { background: #f1f3f5; }
.ma-set-title { font-size: 17px; font-weight: 700; color: #212529; }
.ma-set-body { padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }

.ma-set-acct {
    display: flex; align-items: center; gap: 13px;
    background: #fff; border-radius: 16px; padding: 16px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.ma-set-avatar {
    width: 48px; height: 48px; flex: none; border-radius: 50%;
    background: linear-gradient(150deg, #ff914d, #ef4707);
    color: #fff; font-size: 19px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.ma-set-acct-meta { min-width: 0; display: flex; flex-direction: column; }
.ma-set-acct-meta .who { font-size: 11.5px; font-weight: 600; color: #6c757d; }
.ma-set-acct-meta .email { font-size: 15px; font-weight: 700; color: #212529; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ma-set-verify {
    margin-top: 14px; padding: 14px 15px;
    background: #fff9e6; border: 1px solid #f3dd9b; border-radius: 16px;
}
.ma-set-verify .vh { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: #8a5a12; }
.ma-set-verify .vh i { color: #b7791f; font-size: 14px; }
.ma-set-verify p { margin: 6px 0 12px; font-size: 12.5px; line-height: 1.5; color: #946a23; }
.ma-set-verify-btn {
    width: 100%; height: 44px; border-radius: 12px; cursor: pointer;
    background: #fff; border: 1.5px solid #e6c466; color: #8a5a12;
    font-family: inherit; font-size: 13.5px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.ma-set-verify-btn:active { background: #fff3d0; }
.ma-set-verify-btn:disabled { opacity: 0.6; cursor: default; }
.ma-set-verify-status { margin-top: 8px; font-size: 12px; line-height: 1.4; }
.ma-set-verify-status.is-success { color: #1f8a4c; }
.ma-set-verify-status.is-error { color: #c0362c; }

.ma-set-label {
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    color: #adb5bd; padding: 22px 6px 8px;
}
.ma-set-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); }
.ma-set-row {
    width: 100%; display: flex; align-items: center; gap: 13px;
    padding: 14px 15px; border: none; background: #fff; cursor: pointer;
    font-family: inherit; font-size: 15px; font-weight: 600; color: #212529; text-align: left;
    position: relative;
}
.ma-set-row:not(:last-child)::after {
    content: ""; position: absolute; left: 53px; right: 0; bottom: 0; height: 1px; background: #f1f3f5;
}
.ma-set-row:active { background: #f8f9fa; }
.ma-set-row .ic {
    width: 30px; height: 30px; flex: none; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff;
}
.ma-set-row .ic-key { background: #069bf1; }
.ma-set-row .ic-chat { background: #ff914d; }
.ma-set-row .ic-search { background: #6c7a89; }
.ma-set-row .ic-trash { background: #d9534f; }
.ma-set-row .ic-home { background: #fe6211; }
.ma-set-row .ic-out { background: #d9534f; }
.ma-set-row .chev { margin-left: auto; font-size: 13px; color: #adb5bd; }
.ma-set-row.danger { color: #c0362c; }
.ma-set-row.logout { color: #c0362c; justify-content: flex-start; }

/* ============================================================
   Add to home screen — the iOS teaching sheet (and the Chrome-menu
   fallback), built by a2hs.js on the .ma-settings pattern above:
   same scrim, grab handle, 24px radius, #f8f9fa body, 300ms slide.
   Body-mounted (the app sheet is a stacking context).
   ============================================================ */
.ma-a2hs .ma-set-nav {
    display: grid;
    grid-template-columns: 32px 1fr 32px;
    align-items: center;
}
.ma-a2hs .ma-set-title { text-align: center; }
.ma-a2hs .ma-set-body { display: flex; flex-direction: column; gap: 14px; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
/* iOS: leave the pointer pill its own room below the last card. */
.ma-a2hs-ios .ma-set-body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
.a2hs-identity {
    display: flex; align-items: center; gap: 13px;
    background: #fff; border-radius: 16px; padding: 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.a2hs-identity-icon { width: 46px; height: 46px; border-radius: 12px; flex: none; }
.a2hs-identity-name { font-size: 15px; font-weight: 700; color: #212529; }
.a2hs-identity-sub { font-size: 12px; color: #6c757d; margin-top: 2px; }
.a2hs-step {
    display: flex; align-items: center; gap: 13px; padding: 15px;
    position: relative;
}
.a2hs-step:not(:last-child)::after {
    content: ""; position: absolute; left: 53px; right: 0; bottom: 0; height: 1px; background: #f1f3f5;
}
.a2hs-chip {
    width: 26px; height: 26px; flex: none; border-radius: 8px;
    background: #069bf1; color: #fff; font-size: 12.5px; font-weight: 800;
    display: grid; place-items: center;
}
.a2hs-step-label { font-size: 14px; font-weight: 600; color: #212529; flex: 1; line-height: 1.4; }
.a2hs-step-label .a2hs-share { color: #069bf1; margin: 0 3px; }
/* The step people miss: Safari's Share control lives in the BOTTOM bar. */
.a2hs-pointer {
    position: absolute; left: 50%; bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    z-index: 3; pointer-events: none;
}
.a2hs-pointer-pill {
    background: #069bf1; color: #fff; font-size: 11px; font-weight: 700;
    padding: 5px 11px; border-radius: 999px; white-space: nowrap;
    box-shadow: 0 6px 16px rgba(6, 43, 75, 0.35);
}
.a2hs-pointer i { color: #069bf1; font-size: 16px; line-height: 1; }