/* AZRA unified bottom dock (Phase 2) — styles BOTH #bottomnav (community) and .hxm-bar (hub).
   Pop-Noir pill: active item expands into a capsule with its label; capsule slides with a spring.
   Capsule position comes from CSS vars (--dx/--dw) set by azra-dock.js on ::before, so innerHTML re-renders can't wipe it. */
:root{--az-dock-h:64px;--az-dock-gap:12px}
@media(max-width:1020px){
  #bottomnav.az-dock,.hxm-bar.az-dock{
    position:fixed!important;z-index:70;inset:auto 12px calc(var(--az-dock-gap) + env(safe-area-inset-bottom)) 12px!important;
    height:var(--az-dock-h)!important;padding:6px!important;margin-inline:auto;max-width:460px;width:auto;
    display:flex!important;align-items:center;justify-content:space-between;gap:2px!important;
    background:var(--az-dock-bg,rgba(13,13,15,.86))!important;border:1px solid var(--az-dock-line,rgba(255,255,255,.1))!important;border-radius:999px!important;
    -webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
    box-shadow:0 10px 34px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);
    transform:translate3d(0,0,0);transition:transform var(--az-dur-3,320ms) var(--az-ease,cubic-bezier(.2,.8,.2,1)),opacity var(--az-dur-2,200ms);isolation:isolate}
  #bottomnav.az-dock::before,.hxm-bar.az-dock::before{
    content:"";position:absolute;z-index:-1;top:6px;bottom:6px;left:0;width:var(--dw,0px);border-radius:999px;
    background:var(--az-dock-active,#fff);opacity:var(--dop,0);
    transform:translate3d(var(--dx,0px),0,0);
    transition:transform var(--az-dur-3,320ms) var(--az-spring,cubic-bezier(.34,1.4,.5,1)),width var(--az-dur-3,320ms) var(--az-spring,cubic-bezier(.34,1.4,.5,1)),opacity var(--az-dur-2,200ms)}
  #bottomnav.az-dock.is-hidden,.hxm-bar.az-dock.is-hidden{transform:translate3d(0,calc(100% + 28px),0);opacity:0;pointer-events:none}
  /* items */
  #bottomnav.az-dock>button,.hxm-bar.az-dock>*{
    all:unset;box-sizing:border-box;position:relative;display:flex!important;flex-direction:row!important;align-items:center;justify-content:center;gap:0;
    flex:1 1 0;min-width:48px;height:48px!important;padding:0 10px;border-radius:999px;color:var(--az-dock-mut,#a4a4a9);
    font:700 12.5px/1 var(--az-font-ui,inherit);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;
    transition:flex-grow var(--az-dur-3,320ms) var(--az-spring,cubic-bezier(.34,1.4,.5,1)),color var(--az-dur-2,200ms)}
  #bottomnav.az-dock>button svg,.hxm-bar.az-dock>* svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  /* labels hidden unless active (community: bare text node is wrapped by JS into .az-dl; hub: <span>) */
  #bottomnav.az-dock .az-dl,.hxm-bar.az-dock>*>span{max-width:0;overflow:hidden;opacity:0;margin-inline-start:0;
    transition:max-width var(--az-dur-3,320ms) var(--az-ease),opacity var(--az-dur-2,200ms),margin var(--az-dur-3,320ms) var(--az-ease)}
  #bottomnav.az-dock>button.active,.hxm-bar.az-dock>.on{flex-grow:2.2;color:var(--az-dock-on-active,#000)!important}
  #bottomnav.az-dock>button.active .az-dl,.hxm-bar.az-dock>.on>span{max-width:90px;opacity:1;margin-inline-start:7px}
  #bottomnav.az-dock>button.active svg,.hxm-bar.az-dock>.on svg{filter:none!important;animation:az-dock-bounce var(--az-dur-4,520ms) var(--az-spring,cubic-bezier(.34,1.4,.5,1))}
  @keyframes az-dock-bounce{0%{transform:scale(.7)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
  #bottomnav.az-dock>button:active,.hxm-bar.az-dock>*:active{transform:scale(.94);background:none!important}
  #bottomnav.az-dock>button:focus-visible,.hxm-bar.az-dock>*:focus-visible{outline:2px solid var(--az-primary,#FFD500);outline-offset:1px}
  /* raised yellow Create */
  #bottomnav.az-dock>.plus{flex:0 0 52px;width:52px;min-width:52px;height:52px!important;margin-top:-14px;padding:0;border-radius:50%;
    background:var(--az-primary,#FFD500)!important;color:var(--az-on-primary,#000)!important;box-shadow:0 8px 24px rgba(255,213,0,.4),0 0 0 5px var(--az-dock-ring,#000)}
  #bottomnav.az-dock>.plus:active{transform:scale(.9)}
  /* badges pop */
  #bottomnav.az-dock .cnt{position:absolute;top:3px;inset-inline-end:6px;inset-inline-start:auto;animation:az-dock-pop var(--az-dur-3,320ms) var(--az-spring,cubic-bezier(.34,1.4,.5,1))}
  @keyframes az-dock-pop{from{transform:scale(0)}to{transform:scale(1)}}
  /* space + overlays */
  .layout{padding-bottom:calc(var(--az-dock-h) + 48px + env(safe-area-inset-bottom))!important}
  .toasts,#toasts{bottom:calc(var(--az-dock-h) + 28px + env(safe-area-inset-bottom))!important}
  body.azra-messages-thread-open #bottomnav,body.azra-media-feed-open #bottomnav,body.az-kbd-open #bottomnav,body.hxm-lock .hxm-bar{display:none!important}
}
html[data-theme=light]{--az-dock-bg:rgba(255,255,255,.88);--az-dock-line:rgba(0,0,0,.08);--az-dock-active:#0b0b0c;--az-dock-on-active:#fff;--az-dock-mut:#6b6760;--az-dock-ring:#F7F3EE}
html[data-theme=light] #bottomnav.az-dock,html[data-theme=light] .hxm-bar.az-dock{box-shadow:0 10px 30px rgba(40,30,10,.16),inset 0 1px 0 #fff}
html[data-theme=light] #bottomnav.az-dock>.plus{color:#000!important}
html[dir=rtl] #bottomnav.az-dock,html[lang=fa] #bottomnav.az-dock{direction:rtl}
@media(prefers-reduced-motion:reduce){#bottomnav.az-dock,#bottomnav.az-dock::before,.hxm-bar.az-dock,.hxm-bar.az-dock::before,#bottomnav.az-dock *{transition-duration:.01ms!important;animation:none!important}}
html[data-motion=reduce] #bottomnav.az-dock,html[data-motion=reduce] #bottomnav.az-dock::before,html[data-motion=reduce] .hxm-bar.az-dock::before,html[data-motion=reduce] #bottomnav.az-dock *{transition-duration:.01ms!important;animation:none!important}
@media(min-width:901px){.hxm-bar.az-dock{display:none!important}}