/* ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
   mibl_phone_dock.css — the phone site's bottom bar on the site's other pages (mibl_phone_dock.php), 12 Oct 2026.
   The rules are MIBL_Mobile/_shell.php's own (.mnav, .sheet), scoped under #miblPhoneDock so the page's CSS and these never
   meet. The second half lifts each page's own bottom furniture (NOVA's console and tab bar, Tanin's frame, the live strip,
   the «Mobile version» pill) above the bar, through ONE number: --mibl-dock-h (0 while the keyboard is up).
   ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
html:has(#miblPhoneDock){--mibl-dock-h:calc(60px + env(safe-area-inset-bottom,0px))}
html.mdock-typing:has(#miblPhoneDock){--mibl-dock-h:0px}
html.mdock-typing #miblPhoneDock .mnav{display:none}

/* the box itself: parked at the end of <body> by its script, it holds the page's last screen clear of the bar */
#miblPhoneDock{display:block;height:var(--mibl-dock-h);clear:both;
  --bd:rgba(255,255,255,.10);--cy:#00d4ff;--vi:#a78bfa;--pk:#f472b6;--tx:#eef0ff;--mut:#8a93a8;
  font-family:'Vazirmatn',system-ui,-apple-system,'Segoe UI',Roboto,'Noto Sans Arabic',Tahoma,sans-serif;
  line-height:1.6;color:var(--tx);-webkit-tap-highlight-color:transparent;text-align:start}
#miblPhoneDock *,#miblPhoneDock *::before,#miblPhoneDock *::after{box-sizing:border-box;margin:0;padding:0}
#miblPhoneDock a{color:inherit;text-decoration:none}

/* bottom nav (as _shell.php) */
#miblPhoneDock .mnav{position:fixed;left:0;right:0;bottom:0;z-index:var(--mibl-dock-z,9000);display:flex;min-height:60px;
  padding-bottom:env(safe-area-inset-bottom,0px);background:rgba(9,9,24,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--bd);overflow:hidden}
#miblPhoneDock .mnav a,#miblPhoneDock .mnav button{position:relative;z-index:1;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;
  gap:3px;padding:9px 1px 7px;background:none;border:none;color:var(--mut);font:inherit;font-size:clamp(9.5px,2.8vw,11px);font-weight:700;line-height:1.6;cursor:pointer;
  letter-spacing:normal;text-transform:none;box-shadow:none;border-radius:0;min-height:0;height:auto;width:auto}
#miblPhoneDock .mnav a span:not(.ic),#miblPhoneDock .mnav button span:not(.ic){max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#miblPhoneDock .mnav .ic{font-size:0;line-height:1;display:block}
#miblPhoneDock .mnav .ic svg{width:23px;height:23px;display:block;max-width:none}
#miblPhoneDock .mnav .on{color:var(--cy)}
#miblPhoneDock .mnav .on .ic{filter:drop-shadow(0 0 8px rgba(0,212,255,.5))}
#miblPhoneDock .mnav .on::after{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:24px;height:3px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,var(--cy),var(--vi));box-shadow:0 0 10px rgba(0,212,255,.65)}
#miblPhoneDock .mnav a.nova{color:var(--cy)}
#miblPhoneDock .mnav a.nova .ic{filter:drop-shadow(0 0 8px rgba(0,212,255,.55))}
#miblPhoneDock .mnav a.chat{position:relative}
#miblPhoneDock .mnav .cbadge{position:absolute;top:4px;left:calc(50% + 4px);min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:var(--pk);color:#fff;font-style:normal;font-size:9.5px;font-weight:900;line-height:16px;text-align:center;
  box-shadow:0 0 0 2px #090918;font-variant-numeric:tabular-nums;pointer-events:none}
#miblPhoneDock .mnav .cbadge[hidden]{display:none}
#miblPhoneDock[dir=rtl] .mnav .cbadge{left:auto;right:calc(50% + 4px)}
#miblPhoneDock .mnav a.chat .ic .cw{transform-box:fill-box;transform-origin:center}
#miblPhoneDock .mnav a.chat.ping .ic .cw{animation:mdChatWave 1.1s ease-in-out 4}
#miblPhoneDock .mnav a.chat.ping .ic .cw2{animation-delay:.16s}
#miblPhoneDock .mnav a.chat.ping .ic .cw3{animation-delay:.32s}
@keyframes mdChatWave{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.42)}}
#miblPhoneDock .m-notes{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
#miblPhoneDock .m-note{position:absolute;font-family:'Times New Roman','Vazirmatn',serif;line-height:1;opacity:0;white-space:nowrap;
  text-shadow:0 0 12px currentColor,0 0 4px currentColor}
#miblPhoneDock .m-note.l{animation:mdNoteL linear infinite}
#miblPhoneDock .m-note.r{animation:mdNoteR linear infinite}
@keyframes mdNoteL{0%{left:-8%;opacity:0;transform:translateY(0)}12%{opacity:var(--mo,.18)}50%{transform:translateY(-5px)}88%{opacity:var(--mo,.18)}100%{left:108%;opacity:0;transform:translateY(0)}}
@keyframes mdNoteR{0%{left:108%;opacity:0;transform:translateY(0)}12%{opacity:var(--mo,.18)}50%{transform:translateY(-5px)}88%{opacity:var(--mo,.18)}100%{left:-8%;opacity:0;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){#miblPhoneDock .m-note{animation:none!important;display:none}#miblPhoneDock .mnav a.chat.ping .ic .cw{animation:none}}

/* the More sheet (as _shell.php) — above everything while it is open */
#miblPhoneDock .sheet-bg{position:fixed;inset:0;z-index:2147483000;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .2s}
#miblPhoneDock .sheet-bg.open{opacity:1;pointer-events:auto}
#miblPhoneDock .sheet{position:fixed;left:0;right:0;bottom:0;z-index:2147483001;background:#0d0d22;border-top:1px solid var(--bd);color:var(--tx);
  border-radius:20px 20px 0 0;padding:10px 14px calc(18px + env(safe-area-inset-bottom,0px));transform:translateY(110%);transition:transform .26s cubic-bezier(.16,1,.3,1);
  max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;text-align:start}
#miblPhoneDock .sheet.open{transform:translateY(0)}
#miblPhoneDock .sheet .grab{width:40px;height:4px;border-radius:3px;background:var(--bd);margin:6px auto 12px}
#miblPhoneDock .sheet a,#miblPhoneDock .sheet button.mibl-m-langrow{display:flex;align-items:center;gap:12px;padding:13px 8px;border-radius:11px;
  font-weight:700;font-size:15px;line-height:1.6;color:var(--tx);border-bottom:1px solid rgba(255,255,255,.05)}
#miblPhoneDock .sheet a:last-child{border-bottom:none}
#miblPhoneDock .sheet a .ic,#miblPhoneDock .sheet button .ic{font-size:20px;width:26px;text-align:center;display:flex;align-items:center;justify-content:center;flex:0 0 26px}
#miblPhoneDock .sheet .ic svg{width:20px;height:20px;display:block}
#miblPhoneDock .sheet .ic img{display:block}
#miblPhoneDock .mibl-m-langrow{width:100%;background:none;border:none;border-bottom:1px solid rgba(255,255,255,.05);color:inherit;font-family:inherit;text-align:start;cursor:pointer}
#miblPhoneDock .mibl-m-langrow__cur{margin-inline-start:auto;color:var(--mut);font-weight:600;font-size:13px}

/* ── each page's own bottom furniture, lifted above the bar ──────────────────────────────────────────────────────────── */
/* the «Mobile version» pill (assets/css/mibl_footer.css) and the live strip (mibl_live_bar.php, desktop variant) */
html:has(#miblPhoneDock) .mibl-mobile-switch{bottom:calc(14px + var(--mibl-dock-h))}
html:has(#miblPhoneDock) .mlive:not(.mlive--mobile){bottom:calc(18px + var(--mibl-dock-h))}
/* the floating rail (Aria, Tanin, the bug button: assets/css/assistant_widget.css + fab_hub.css) sat on the bar's «More» tab on pages
   without the phone shell; it rises with the bar through its own variable (PC . mibl-2d's audit, 12 Oct 2026) */
html:has(#miblPhoneDock){--mibl-rail-bottom:calc(18px + var(--mibl-dock-h))}

/* NOVA (members/NOVA_Player.php; members/player.css ≤900px): the console sat at 62px, its own tab bar at 0, the page scrolls in .mn.
   The bar goes UNDER NOVA's drawer (z 50) — it covers the bar while open, as a drawer should. */
html:has(body.nova-app) #miblPhoneDock{--mibl-dock-z:45}
@media (max-width:900px){
  /* 12 Oct 2026, the owner: «احتیاجی نیست در نوا پلیر اون نوار پایین وجود داشته باشه … فقط یک نوار بمونه» — NOVA's own tab bar
     (Radio · Library · Favorites · Playlists · For You) is the same list as its ☰ drawer, so under the dock it goes and the console
     sits straight on the dock: every number below is the old one minus the tab bar's 62px. */
  html:has(#miblPhoneDock) body.nova-app:not(.embed-mode) .mob-tab-bar{display:none!important}
  html:has(#miblPhoneDock) body.nova-app:not(.embed-mode) .bar,
  html:has(#miblPhoneDock) body.nova-app:not(.embed-mode) .bar.mini{bottom:var(--mibl-dock-h)}
  html:has(#miblPhoneDock) body.nova-app:not(.embed-mode) .mn{padding-bottom:calc(198px + var(--mibl-dock-h))}
  html:has(#miblPhoneDock) body.nova-app .nova-eq-drawer{bottom:calc(170px + var(--mibl-dock-h))}
  html:has(#miblPhoneDock) .resume-banner{bottom:calc(184px + var(--mibl-dock-h))}
}

/* Tanin chat (MIBL_Mobile/chat.php, tanin/app.php; members/tanin_app.css): the app frame is a fixed full-screen box — it ends above
   the bar now. The bar sits under Tanin's own drawers and sheets (z 141+), which cover it while open; a call hides it. */
html:has(#app.tanin) #miblPhoneDock{--mibl-dock-z:140}
html:has(#miblPhoneDock) .tanin{bottom:var(--mibl-dock-h);height:auto}
html:has(#miblPhoneDock) #tiCard{bottom:var(--mibl-dock-h)}
html:has(#miblPhoneDock) .tanin ~ .toast,html:has(#miblPhoneDock) #toast{bottom:calc(22px + var(--mibl-dock-h))}
body:has(#callUI.show) #miblPhoneDock{display:none}

/* A wide screen never shows the bar (a desktop window that once opened the phone site carries mibl_m_ui) — and nothing is lifted. */
@media (min-width:901px){
  html:has(#miblPhoneDock){--mibl-dock-h:0px}
  #miblPhoneDock{display:none!important}
}