/* Bottom tab bar for the installed app (hidden in a normal browser tab). Static: no motion. */
.app-tabbar{display:none}
@media (display-mode: standalone){
  .app-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;align-items:flex-end;padding:6px 6px calc(8px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid rgba(18,49,58,.08);border-radius:20px 20px 0 0;box-shadow:0 -4px 18px rgba(18,49,58,.07)}
  body:has(.app-tabbar){padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .app-tab{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0 2px;color:#7c9096;font-size:10.5px;font-weight:600;letter-spacing:.01em;text-decoration:none;-webkit-tap-highlight-color:transparent}
  .app-tab-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px}
  .app-tab svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .app-tab.is-active{color:#116b75}
  .app-tab.is-active svg{stroke-width:2}
  .app-tab.is-active .app-tab-label{font-weight:700}
  /* Middle tab: icon in a circle using the site colour */
  .app-tab.is-center .app-tab-icon{width:54px;height:54px;margin-top:-26px;border-radius:50%;background:#2dafbd;color:#fff;box-shadow:0 5px 14px rgba(45,175,189,.45),0 0 0 4px #f4fafa}
  .app-tab.is-center svg{width:27px;height:27px;stroke:#fff;stroke-width:1.9}
  .app-tab.is-center{color:#7c9096}.app-tab.is-center.is-active{color:#116b75}
  .dark .app-tabbar{background:rgba(22,37,42,.96);border-top-color:rgba(255,255,255,.08)}
  .dark .app-tab{color:#8ea3a8}
  .dark .app-tab.is-active,.dark .app-tab.is-center.is-active{color:#8fe0e8}
  .dark .app-tab.is-center .app-tab-icon{box-shadow:0 5px 14px rgba(45,175,189,.35),0 0 0 4px #101c20}
  /* The install banner sits above the tab bar */
  body:has(.app-tabbar) .tilawa-install{bottom:calc(84px + env(safe-area-inset-bottom))}
}