/* =====================================================================
   College — Mobile bottom navbar → floating pill (icons only)
   Target : resources/js/spa/apps/mobile/components/layout/ApplicationNavbar.vue
   Method : CSS only. কোনো JS / Vue / build / route / icon পরিবর্তন নেই।
   Rollback: Admin → Code injection → Header code বন্ধ করলেই আগের নেভবার ফিরে আসবে।
   ===================================================================== */

/* ---- 1) Outer fixed layer: কোনো background / border নেই, শুধু ভাসার জায়গা ---- */
div.fixed.bottom-0:has(> .grid.grid-cols-5.h-14){
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 10px) 0;
  pointer-events: none;                 /* pill এর বাইরে পেজ স্ক্রল/ট্যাপ আগের মতোই কাজ করবে */
}

/* ---- 2) The floating pill ---- */
div.fixed.bottom-0:has(> .grid.grid-cols-5.h-14) > .grid.grid-cols-5.h-14{
  pointer-events: auto;
  width: calc(100% - 32px);
  max-width: 420px;
  margin: 0 auto;                       /* পুরোনো mb-safe-bottom এখানে আর লাগে না */
  padding: 6px;
  gap: 0;
  border-radius: 9999px;
  background: var(--color-bg-pr);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .14), 0 0 0 1px var(--color-bord-pr);
}

/* ---- 3) Each item (cell) ---- */
div.fixed.bottom-0:has(> .grid.grid-cols-5.h-14) > .grid.grid-cols-5.h-14 > div{
  min-width: 0;
  border-radius: 9999px;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease;
}

/* Active item → হালকা ধূসর highlight (ছবির "Claude" tab এর মতো) */
div.fixed.bottom-0:has(> .grid.grid-cols-5.h-14) > .grid.grid-cols-5.h-14 > div:has(a.router-link-active){
  background: var(--color-fill-sc);
}

/* ---- 4) Tap area = পুরো cell (আইকন একই থাকে, শুধু ট্যাপ করার জায়গা বড় হয়) ---- */
div.fixed.bottom-0:has(> .grid.grid-cols-5.h-14) > .grid.grid-cols-5.h-14 > div > a,
div.fixed.bottom-0:has(> .grid.grid-cols-5.h-14) > .grid.grid-cols-5.h-14 > div > .relative,
div.fixed.bottom-0:has(> .grid.grid-cols-5.h-14) > .grid.grid-cols-5.h-14 > div > .relative > a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 9999px;
}

div.fixed.bottom-0:has(> .grid.grid-cols-5.h-14) > .grid.grid-cols-5.h-14 > div > button,
div.fixed.bottom-0:has(> .grid.grid-cols-5.h-14) > .grid.grid-cols-5.h-14 > div > a > button,
div.fixed.bottom-0:has(> .grid.grid-cols-5.h-14) > .grid.grid-cols-5.h-14 > div > .relative > a > button{
  width: 100%;
  height: 100%;
  border-radius: 9999px;
}

/* ---- 5) Chat unread badge → আইকনের ডান-উপরের কোণে ---- */
div.fixed.bottom-0:has(> .grid.grid-cols-5.h-14) > .grid.grid-cols-5.h-14 > div > .relative > span.absolute{
  top: 2px;
  right: calc(50% - 16px);
}

/* ---- 6) Toast / upload-progress: আগে navbar এর background এর উপর বসত,
        এখন নিজেরাই ভাসমান card, pill এর ঠিক উপরে ---- */
div.fixed.bottom-0:has(> .grid.grid-cols-5.h-14) > div:not(.grid):not(.hidden){
  pointer-events: auto;
  width: calc(100% - 32px);
  max-width: 420px;
  margin: 0 auto 8px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--color-bg-pr);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .14), 0 0 0 1px var(--color-bord-pr);
}
div.fixed.bottom-0:has(> .grid.grid-cols-5.h-14) > div:not(.grid):not(.hidden) > div:last-child{
  border-bottom: 0;
}

/* ---- 7) পেজের নিচে বাড়তি জায়গা, যাতে শেষ content pill এর পিছনে ঢেকে না যায় ---- */
div.pb-14:has(~ div.fixed.bottom-0 > .grid.grid-cols-5.h-14){
  padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
}