/* Tiliv public header mobile hardening v77
   Root cause: on mobile, profile/avatar images and dropdowns could render before the
   heavy legacy stylesheet won the cascade or while an old cached main.css was active.
   This file is small, versioned and loaded from the shared header so every public page
   gets the same non-wrapping, bounded header. */
#header,
#header *{box-sizing:border-box;}
#header [hidden],
#header .tiliv-header-profile-panel[hidden],
#header .tiliv-header-notification-panel[hidden],
#header .tiliv-mobile-search-sheet[hidden]{display:none!important;}
#header #topbar .brand img,
#header #topbar .tiliv-header-profile-button img,
#header #topbar .tiliv-header-profile-head img{max-width:100%;height:auto;object-fit:contain;}
#header #topbar .tiliv-header-profile-button img{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;max-width:34px!important;max-height:34px!important;object-fit:cover!important;display:block!important;}
#header #topbar .tiliv-header-profile-head img{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;max-width:42px!important;max-height:42px!important;object-fit:cover!important;display:block!important;}
#header #topbar .tiliv-header-profile-panel:not([hidden]),
#header #topbar .tiliv-header-notification-panel:not([hidden]){display:block;}
#header #topbar .tiliv-header-profile-panel,
#header #topbar .tiliv-header-notification-panel{contain:none!important;}
@media (max-width:768px){
  html,body{max-width:100%;overflow-x:hidden;}
  html body #header{position:sticky!important;top:0!important;z-index:10040!important;width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important;min-height:0!important;overflow:visible!important;}
  html body #header #topbar{width:100%!important;max-width:100%!important;min-width:0!important;height:58px!important;min-height:58px!important;max-height:58px!important;display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important;padding:7px 8px!important;margin:0!important;overflow:visible!important;direction:ltr!important;contain:none!important;}
  html body #header #topbar .header-control,
  html body #header #topbar .header-button,
  html body #header #topbar .site-brand{min-width:0!important;max-width:100%!important;flex-wrap:nowrap!important;overflow:visible!important;}
  html body #header #topbar .header-control{order:1!important;flex:0 0 auto!important;width:auto!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:0!important;direction:ltr!important;}
  html body #header #topbar .header-button{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important;width:auto!important;direction:ltr!important;}
  html body #header #topbar .site-brand{order:2!important;flex:0 1 auto!important;margin-left:auto!important;margin-right:0!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:7px!important;direction:rtl!important;}
  html body #header #topbar .brand,
  html body #header #topbar .brand>a{width:108px!important;min-width:108px!important;max-width:108px!important;height:40px!important;min-height:40px!important;max-height:40px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;margin:0!important;padding:0!important;overflow:hidden!important;}
  html body #header #topbar .brand img,
  html body #header #topbar .brand img.d-block,
  html body #header #topbar .site-brand .brand img.d-block{display:block!important;width:108px!important;min-width:108px!important;max-width:108px!important;height:auto!important;max-height:34px!important;object-fit:contain!important;}
  html body #header #topbar .burger-menu{width:40px!important;height:40px!important;min-width:40px!important;max-width:40px!important;flex:0 0 40px!important;margin:0!important;display:inline-grid!important;place-items:center!important;}
  html body #header #topbar .tiliv-header-profile-button{width:40px!important;height:40px!important;min-width:40px!important;max-width:40px!important;min-height:40px!important;max-height:40px!important;display:grid!important;place-items:center!important;padding:0!important;margin:0!important;overflow:visible!important;}
  html body #header #topbar .tiliv-header-profile-button img{width:31px!important;height:31px!important;min-width:31px!important;min-height:31px!important;max-width:31px!important;max-height:31px!important;object-fit:cover!important;border-radius:13px!important;display:block!important;}
  html body #header #topbar .tiliv-header-profile-caret{width:16px!important;height:16px!important;min-width:16px!important;min-height:16px!important;max-width:16px!important;max-height:16px!important;display:grid!important;place-items:center!important;line-height:1!important;}
  html body #header #topbar .tiliv-header-chat-button,
  html body #header #topbar .tiliv-mobile-search-launch{flex:0 0 auto!important;display:inline-grid!important;place-items:center!important;margin:0!important;padding:0!important;overflow:hidden!important;}
  html body #header #topbar .search-inner,
  html body #header #topbar .search-wrapper,
  html body #header #topbar .ajax-search-result,
  html body #header #topbar .btn-darkmode,
  html body #header #topbar .btn-upload,
  html body #header #topbar .tiliv-header-notifications{display:none!important;visibility:hidden!important;pointer-events:none!important;width:0!important;height:0!important;min-width:0!important;min-height:0!important;max-width:0!important;max-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important;}

  html body #header #topbar,
  html body #header #topbar .header-control,
  html body #header #topbar .header-button,
  html body #header #topbar .btn-login,
  html body #header #topbar .tiliv-header-profile,
  html body #header #topbar .tiliv-header-notifications{overflow:visible!important;contain:none!important;}
  html body #header #topbar .tiliv-header-profile-panel:not([hidden]),
  html body #header #topbar .tiliv-header-notification-panel:not([hidden]){display:block!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;}
  html body #header #topbar .tiliv-header-profile-panel,
  html body #header #topbar .tiliv-header-notification-panel{position:fixed!important;top:calc(var(--tiliv-mobile-header-height,58px) + 4px)!important;left:8px!important;right:8px!important;width:auto!important;min-width:0!important;max-width:calc(100vw - 16px)!important;max-height:calc(100svh - var(--tiliv-mobile-header-height,58px) - 16px)!important;overflow:auto!important;z-index:2147482500!important;inset-inline:auto!important;transform:none!important;}
  html body #header #topbar .tiliv-header-profile-head{grid-template-columns:42px minmax(0,1fr)!important;min-width:0!important;}
  html body #header #topbar .tiliv-header-profile-head img{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;max-width:42px!important;max-height:42px!important;object-fit:cover!important;}
  html body #header #topbar .tiliv-header-profile-panel a{min-width:0!important;max-width:100%!important;}
  html body #header #topbar .tiliv-header-profile-panel a span,
  html body #header #topbar .tiliv-header-profile-head b,
  html body #header #topbar .tiliv-header-profile-head small{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
  html body:not(.tiliv-mobile-nav-open) #navbar{display:none!important;height:0!important;max-height:0!important;overflow:hidden!important;}
  html body.tiliv-mobile-nav-open #navbar{position:fixed!important;top:var(--tiliv-mobile-header-height,58px)!important;left:0!important;right:0!important;z-index:2147482000!important;max-height:calc(100svh - var(--tiliv-mobile-header-height,58px))!important;overflow:auto!important;}
}
@media (max-width:390px){
  html body #header #topbar{gap:6px!important;padding-left:7px!important;padding-right:7px!important;}
  html body #header #topbar .header-button{gap:6px!important;}
  html body #header #topbar .brand,
  html body #header #topbar .brand>a{width:102px!important;min-width:102px!important;max-width:102px!important;}
  html body #header #topbar .brand img,
  html body #header #topbar .brand img.d-block{width:102px!important;min-width:102px!important;max-width:102px!important;}
}


/* v80: final mobile cache hardening. Keep header usable even if an old public CSS
   file or bfcache-restored DOM leaves menu/profile panels in a stale state. */
@media (max-width:768px){
  html body #header svg.icon{max-width:24px!important;max-height:24px!important;display:block!important;overflow:visible!important;}
  html body #header #topbar .tiliv-header-profile-panel[hidden],
  html body #header #topbar .tiliv-header-notification-panel[hidden],
  html body #header .tiliv-mobile-search-sheet[hidden]{display:none!important;visibility:hidden!important;pointer-events:none!important;}
  html body #header #topbar .tiliv-header-profile-panel:not([hidden]){display:block!important;}
  html body #header #topbar .tiliv-header-profile-panel{font-size:14px!important;line-height:1.75!important;}
  html body #header #topbar .tiliv-header-profile-panel a{display:flex!important;align-items:center!important;gap:10px!important;height:auto!important;min-height:42px!important;white-space:nowrap!important;}
  html body #header #topbar .tiliv-header-profile-panel a i{flex:0 0 22px!important;width:22px!important;text-align:center!important;}
}

/* v81: mobile side drawer is the hamburger target. Keep it below the sticky
   header, not under it, and isolate it from the Home topic strip (#navbar). */
@media (max-width:768px){
  html body.tiliv-mobile-sidebar-open{overflow:hidden!important;touch-action:none;}
  html body.tiliv-mobile-sidebar-open #tiliv-navbar,
  html body.single.tiliv-mobile-sidebar-open #tiliv-navbar{
    display:block!important;
    position:fixed!important;
    inset-block-start:var(--tiliv-mobile-header-height,58px)!important;
    inset-inline-start:auto!important;
    inset-inline-end:0!important;
    bottom:0!important;
    width:min(350px,86vw)!important;
    max-width:86vw!important;
    height:calc(100dvh - var(--tiliv-mobile-header-height,58px))!important;
    max-height:calc(100dvh - var(--tiliv-mobile-header-height,58px))!important;
    padding:14px 14px max(18px,env(safe-area-inset-bottom))!important;
    z-index:10035!important;
    overflow:hidden!important;
    border-left:1px solid rgba(15,23,42,.10)!important;
    border-top:1px solid rgba(15,23,42,.06)!important;
    box-shadow:-18px 18px 50px rgba(9,16,39,.22)!important;
  }
  html body.tiliv-mobile-sidebar-open #tiliv-navbar .navbar-inner{
    height:100%!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    padding-bottom:max(14px,env(safe-area-inset-bottom))!important;
  }
  html body.tiliv-mobile-sidebar-open #tiliv-navbar .cat-ul{
    max-height:none!important;
    overflow:visible!important;
  }
  html body.tiliv-mobile-sidebar-open #tiliv-navbar .cat-ul:first-child{
    margin-top:0!important;
  }
  html body.tiliv-mobile-sidebar-open #tiliv-navbar .cat-ul li:first-child a{
    margin-top:0!important;
  }
  html body.tiliv-mobile-sidebar-open .tiliv-overlay{
    display:block!important;
    position:fixed!important;
    inset-inline:0!important;
    inset-block-start:var(--tiliv-mobile-header-height,58px)!important;
    height:calc(100dvh - var(--tiliv-mobile-header-height,58px))!important;
    z-index:10020!important;
  }
  html body.tiliv-mobile-sidebar-open #navbar{
    display:none!important;
    height:0!important;
    max-height:0!important;
    overflow:hidden!important;
  }
  html body:not(.tiliv-mobile-sidebar-open) #tiliv-navbar[aria-hidden="true"]{
    display:none!important;
  }
  body.b-dark.tiliv-mobile-sidebar-open #tiliv-navbar{
    background:#181818!important;
    border-color:#2D2D2D!important;
    box-shadow:-18px 18px 50px rgba(0,0,0,.42)!important;
  }
}