/* HTNS r97 — compact header menu. Removes helper descriptions and restores the tighter menu proportions. */
#mainApp .app-menu-panel{
  min-width:238px !important;
  width:min(76vw,268px) !important;
  max-width:268px !important;
  padding:7px !important;
  border-radius:18px !important;
}
#mainApp .app-menu-item{
  min-height:58px !important;
  gap:10px !important;
  padding:9px 10px !important;
  border-radius:14px !important;
}
#mainApp .app-menu-item + .app-menu-item{margin-top:3px !important;}
#mainApp .app-menu-item-icon{
  width:38px !important;
  height:38px !important;
  flex:0 0 38px !important;
  border-radius:12px !important;
}
#mainApp .app-menu-item-icon svg{width:21px !important;height:21px !important;}
#mainApp .app-menu-item-copy{gap:0 !important;}
#mainApp .app-menu-item-title{
  font-size:15px !important;
  line-height:1.15 !important;
  font-weight:850 !important;
  white-space:nowrap !important;
}
#mainApp .app-menu-item-sub{display:none !important;}
#mainApp .app-menu-item-value{
  margin-left:auto !important;
  padding:5px 9px !important;
  font-size:11px !important;
  line-height:1 !important;
}
#mainApp .app-menu-item#btnTopMenuBell.has-notif::after{
  top:12px !important;
  right:12px !important;
  width:8px !important;
  height:8px !important;
}
@media(max-width:480px){
  #mainApp .app-menu-panel{
    min-width:228px !important;
    width:min(72vw,255px) !important;
    max-width:255px !important;
  }
  #mainApp .app-menu-item{min-height:54px !important;padding:8px 9px !important;gap:9px !important;}
  #mainApp .app-menu-item-icon{width:36px !important;height:36px !important;flex-basis:36px !important;}
  #mainApp .app-menu-item-title{font-size:14px !important;}
}

/* Chat is a permanent header action, immediately before Menu. */
html.htns-theme-v234 body #mainApp #topMenuWrap{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  flex:0 0 auto !important;
  flex-wrap:nowrap !important;
  gap:8px !important;
}
html.htns-theme-v234 body #mainApp #topMenuWrap > :is(#htnsChatHandle,#btnTopMenuToggle){
  position:relative !important;
  inset:auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 44px !important;
  width:44px !important;
  min-width:44px !important;
  max-width:44px !important;
  height:44px !important;
  min-height:44px !important;
  max-height:44px !important;
  margin:0 !important;
  padding:0 !important;
  gap:0 !important;
  border:1px solid #CFE0EE !important;
  border-radius:13px !important;
  background:linear-gradient(145deg,#FFFFFF,#EAF5FE) !important;
  color:#2379AF !important;
  box-shadow:0 1px 2px rgb(26 67 103 / 5%) !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}
html.htns-theme-v234 body #mainApp #topMenuWrap #htnsChatHandle{
  display:none !important;
  z-index:auto !important;
  transform:none !important;
  animation:none !important;
  transition:background-color .15s ease,border-color .15s ease !important;
  will-change:auto !important;
  touch-action:manipulation !important;
  cursor:pointer !important;
}
html.htns-theme-v234 body #mainApp #topMenuWrap #htnsChatHandle.chat-visible{
  display:inline-flex !important;
}
html.htns-theme-v234 body #mainApp #topMenuWrap #htnsChatHandle::before,
html.htns-theme-v234 body #mainApp #topMenuWrap #htnsChatHandle::after{
  content:none !important;
  display:none !important;
}
html.htns-theme-v234 body #mainApp #topMenuWrap > :is(#htnsChatHandle,#btnTopMenuToggle) svg{
  display:block !important;
  flex:0 0 22px !important;
  width:22px !important;
  height:22px !important;
  margin:0 !important;
  color:inherit !important;
}
html.htns-theme-v234 body #mainApp #topMenuWrap #htnsChatHandle svg{
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.9 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}
html.htns-theme-v234 body #mainApp #topMenuWrap #htnsChatBadge{
  top:-4px !important;
  right:-4px !important;
  min-width:18px !important;
  height:18px !important;
  padding:0 4px !important;
  border:2px solid #FFFFFF !important;
  border-radius:99px !important;
  background:#CA4764 !important;
  color:#FFFFFF !important;
  font-size:9px !important;
  font-weight:800 !important;
  line-height:1 !important;
  pointer-events:none !important;
}
html.htns-theme-v234 body #mainApp #topMenuWrap #btnTopMenuToggle.has-notif::after{
  top:6px !important;
  right:6px !important;
  width:7px !important;
  height:7px !important;
  box-shadow:0 0 0 2px #FFFFFF !important;
}
html.htns-theme-v234 body #mainApp #topMenuWrap > :is(#htnsChatHandle,#btnTopMenuToggle):focus-visible{
  outline:2px solid #2379AF !important;
  outline-offset:3px !important;
}
@media (hover:hover){
  html.htns-theme-v234 body #mainApp #topMenuWrap > :is(#htnsChatHandle,#btnTopMenuToggle):hover{
    background:#E6F3FD !important;
    border-color:#9FC9E5 !important;
  }
}
html.htns-theme-v234[data-theme="dark"] body #mainApp #topMenuWrap > :is(#htnsChatHandle,#btnTopMenuToggle){
  background:#17334D !important;
  border-color:#426580 !important;
  color:#B4DCFA !important;
}
html.htns-theme-v234[data-theme="dark"] body #mainApp #topMenuWrap #htnsChatBadge{
  border-color:#17334D !important;
}
/* The dialog and backdrop cover the header's existing menu stacking layer. */
html body #htnsChatBackdrop{z-index:2147482400 !important;}
html body #htnsChatDrawer{z-index:2147482500 !important;}
/* The status badge no longer needs to reserve space for a floating chat icon. */
html.htns-theme-v234 body:has(#mainApp #topMenuWrap #htnsChatHandle) #syncStatus{
  right:calc(10px + env(safe-area-inset-right)) !important;
  max-width:calc(100vw - 20px - env(safe-area-inset-right)) !important;
}
@media (prefers-reduced-motion:reduce){
  html.htns-theme-v234 body #mainApp #topMenuWrap #htnsChatHandle{transition:none !important;}
}

/* The existing unread-notification state lights up the visible Menu button.
   Its halo and icon animate without moving the button or its touch target. */
html.htns-theme-v234 body #mainApp #topMenuWrap #btnTopMenuToggle.has-notif{
  --menu-notification-halo:rgba(44,151,230,.42);
  --menu-notification-ring:rgba(44,151,230,.3);
  border-color:#66B7EC !important;
  background:linear-gradient(145deg,#F2FBFF,#D7EFFF) !important;
  color:#0969AD !important;
  box-shadow:0 0 0 2px rgba(61,158,227,.12),0 0 15px rgba(45,147,223,.2) !important;
}
html.htns-theme-v234 body #mainApp #topMenuWrap #btnTopMenuToggle.has-notif::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:-2px !important;
  border:1.5px solid var(--menu-notification-ring) !important;
  border-radius:inherit !important;
  background:transparent !important;
  box-shadow:0 0 15px var(--menu-notification-halo) !important;
  pointer-events:none !important;
  opacity:.4;
  animation:htns-menu-notification-glow 2.6s ease-in-out infinite !important;
}
html.htns-theme-v234 body #mainApp #topMenuWrap #btnTopMenuToggle.has-notif > svg{
  animation:htns-menu-notification-nudge 2.6s ease-in-out infinite !important;
}
@keyframes htns-menu-notification-glow{
  0%,100%{opacity:.3;transform:scale(.98);}
  45%{opacity:.85;transform:scale(1.09);}
}
@keyframes htns-menu-notification-nudge{
  0%,60%,100%{transform:translateY(0);}
  22%{transform:translateY(-2px);}
  38%{transform:translateY(1px);}
}
/* Keep the alert lit while the menu is open, without distracting motion. */
html.htns-theme-v234 body #mainApp #topMenuWrap #btnTopMenuToggle.has-notif[aria-expanded="true"]::before,
html.htns-theme-v234 body #mainApp #topMenuWrap #btnTopMenuToggle.has-notif[aria-expanded="true"] > svg{
  animation:none !important;
}
html.htns-theme-v234[data-theme="dark"] body #mainApp #topMenuWrap #btnTopMenuToggle.has-notif{
  --menu-notification-halo:rgba(86,184,255,.48);
  --menu-notification-ring:rgba(107,195,255,.46);
  border-color:#62B6EE !important;
  background:linear-gradient(145deg,#214E72,#173B5B) !important;
  color:#C3E7FF !important;
  box-shadow:0 0 0 2px rgba(89,178,239,.14),0 0 18px rgba(59,160,235,.24) !important;
}
@media (prefers-reduced-motion:reduce){
  html.htns-theme-v234 body #mainApp #topMenuWrap #btnTopMenuToggle.has-notif::before,
  html.htns-theme-v234 body #mainApp #topMenuWrap #btnTopMenuToggle.has-notif > svg{
    animation:none !important;
  }
}
@media (forced-colors:active){
  html.htns-theme-v234 body #mainApp #topMenuWrap #btnTopMenuToggle.has-notif{
    outline:2px solid Highlight !important;
    outline-offset:2px !important;
  }
  html.htns-theme-v234 body #mainApp #topMenuWrap #btnTopMenuToggle.has-notif::before{
    display:none !important;
  }
}