/* Chakri Bondhu Mobile 2.0 — Step 32
 * Mobile-only shell. Does not alter desktop layout.
 */
:root{
    --cbm-primary:#0f5aa6;
    --cbm-primary-dark:#082f63;
    --cbm-text:#0f172a;
    --cbm-muted:#64748b;
    --cbm-border:#e5eaf1;
    --cbm-surface:rgba(255,255,255,.97);
}

@media (max-width:900px){
    body{padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))!important}

    .cb-mobile-app-dock{
        position:fixed;
        left:0;right:0;bottom:0;
        z-index:100001;
        display:grid;
        grid-template-columns:repeat(5,minmax(0,1fr));
        align-items:stretch;
        min-height:70px;
        padding:7px 6px calc(7px + env(safe-area-inset-bottom,0px));
        background:var(--cbm-surface);
        border-top:1px solid var(--cbm-border);
        box-shadow:0 -10px 30px rgba(15,23,42,.08);
        backdrop-filter:blur(16px);
        -webkit-backdrop-filter:blur(16px);
    }

    .cb-mobile-dock-item{
        min-width:0;
        min-height:56px;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:2px;
        border-radius:14px;
        color:var(--cbm-muted);
        font-size:10px;
        font-weight:800;
        text-decoration:none;
        -webkit-tap-highlight-color:transparent;
    }

    .cb-mobile-dock-item:active{transform:scale(.97)}
    .cb-mobile-dock-item.is-active{color:var(--cbm-primary-dark);background:#eef6ff}

    .cb-mobile-dock-icon{font-size:21px;line-height:1.1}

    .cb-bondhu-ai-fab{
        position:fixed;
        right:14px;
        bottom:calc(84px + env(safe-area-inset-bottom,0px));
        z-index:100000;
        display:inline-flex;
        align-items:center;
        gap:7px;
        min-height:42px;
        padding:0 13px;
        border-radius:999px;
        background:linear-gradient(135deg,#082f63,#0f766e);
        color:#fff!important;
        text-decoration:none!important;
        font-size:12px;
        font-weight:900;
        box-shadow:0 12px 26px rgba(8,47,99,.28);
        border:1px solid rgba(255,255,255,.18);
    }

    .cb-bondhu-ai-fab:active{transform:translateY(1px) scale(.98)}

    /* Community already has its own richer mobile dock. */
    .cc-page{padding-bottom:0!important}
    .cc-page .cb-mobile-app-dock,
    .cc-page .cb-bondhu-ai-fab{display:none!important}

    /* Avoid overlapping common sticky/utility elements with the new dock. */
    .cb-page,
    .cb-community-topbar,
    main{scroll-margin-bottom:90px}
}

@media(max-width:390px){
    .cb-mobile-app-dock{padding-left:3px;padding-right:3px}
    .cb-mobile-dock-item{font-size:9px;border-radius:11px}
    .cb-mobile-dock-icon{font-size:19px}
    .cb-bondhu-ai-fab{right:9px;font-size:11px;padding:0 11px}
}


/* =========================================================
   Chakri Bondhu Step 32.1 — Responsive UI Correction
   Mobile-only elements MUST NOT leak into desktop.
   ========================================================= */

/* Global mobile dock is hidden by default. */
.cb-mobile-app-dock,
.cb-bondhu-ai-fab,
.cb-bondhu-ai-fab {
    display: none !important;
}

/* Desktop / large screens: preserve existing desktop navigation. */
@media (min-width: 769px) {
    .cb-mobile-app-dock,
    .cb-bondhu-ai-fab,
    .cb-bondhu-ai-fab,
    [data-cb-mobile-only],
    .cb-mobile-only {
        display: none !important;
    }

    /* Safety: if a mobile-only partial is accidentally rendered,
       keep it out of the desktop visual flow. */
    body .cb-mobile-app-dock {
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        pointer-events: none !important;
    }

    /* The Bondhu AI mobile shortcut must never appear as a stray
       line below the desktop header. */
    body .cb-bondhu-ai-fab,
    body .cb-bondhu-ai-fab {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* Mobile: enable the app dock and floating Bondhu AI entry. */
@media (max-width: 768px) {
    .cb-mobile-app-dock {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 9990 !important;
    }

    .cb-bondhu-ai-fab {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 9991 !important;
    }

    /* Reserve space for fixed bottom navigation. */
    body {
        padding-bottom: max(74px, env(safe-area-inset-bottom)) !important;
    }
}

/* Extra-small phones: avoid crowding. */
@media (max-width: 380px) {
    .cb-mobile-app-dock {
        padding-left: 3px !important;
        padding-right: 3px !important;
    }

    .cb-mobile-app-dock a,
    .cb-mobile-app-dock button {
        min-width: 0 !important;
    }
}


/* =========================================================
   Step 32.3 — Replace legacy per-page mobile quick-action bar
   with the unified 5-item Chakri Bondhu Mobile 2.0 dock.
   ========================================================= */

/* Older homepage/notification pages have their own 4-item
   .cb-mobile-app-bar (Home / Jobs / CV / Login). It must not
   compete with the new unified Mobile 2.0 dock. */
.cb-mobile-app-bar {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

@media (max-width: 768px) {
    .cb-mobile-app-dock {
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .cb-mobile-app-dock .cb-mobile-dock-item {
        display: flex !important;
    }
}