/* ROOT 3.0 beta - consistent, readable in-app notification surfaces.
   Intentionally independent of skins: user notifications must never inherit transparent panels. */
:root{
  --se-notice-bg:#0c1b2d;
  --se-notice-line:rgba(104,185,232,.68);
  --se-notice-fg:#f4faff;
}
html body > .notifyBanner,
html body #voiceSecurityBanner.notifyBanner,
html body #messageBanner.notifyBanner{
  box-sizing:border-box!important;
  position:fixed!important;
  z-index:4600!important;
  top:18px!important;
  left:50%!important;
  width:min(92vw,480px)!important;
  max-width:calc(100vw - 24px)!important;
  max-height:min(58dvh,490px)!important;
  min-width:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  padding:15px 17px!important;
  border:1px solid var(--se-notice-line)!important;
  border-radius:18px!important;
  background:#0c1b2d!important;
  background-image:linear-gradient(140deg,#0d253c 0%,#091524 100%)!important;
  opacity:0;
  color:var(--se-notice-fg)!important;
  text-align:left!important;
  text-shadow:none!important;
  box-shadow:0 18px 50px rgba(0,0,0,.8),inset 0 1px 0 rgba(162,216,255,.12),0 0 14px rgba(25,141,207,.13)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:9px 12px!important;
  align-items:start!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  line-height:1.5!important;
  font-size:14px!important;
}
html body > .notifyBanner.show{opacity:1!important}
html body > .notifyBanner :is(b,span){min-width:0!important;white-space:normal!important;text-shadow:none!important}
html body > .notifyBanner b{
  grid-column:1!important;
  grid-row:1!important;
  color:#f7fbff!important;
  font-size:14px!important;
  font-weight:800!important;
  letter-spacing:.025em!important;
}
html body > .notifyBanner span{
  grid-column:1!important;
  grid-row:2!important;
  color:#d5e6f6!important;
  font-size:13px!important;
  line-height:1.55!important;
}
html body > .notifyBanner button:not(.notifyBannerClose){
  grid-column:2!important;
  grid-row:1/3!important;
  align-self:center!important;
  max-width:100%!important;
  min-height:42px!important;
  padding:9px 12px!important;
  border:1px solid #528ab6!important;
  border-radius:12px!important;
  background:#173956!important;
  color:#ffffff!important;
  font-size:13px!important;
  font-weight:700!important;
  white-space:normal!important;
  cursor:pointer;
}
html body > .notifyBanner .notifyBannerClose{
  grid-column:auto!important;
  grid-row:auto!important;
  width:28px!important;
  height:28px!important;
  border:1px solid #6b93b6!important;
  border-radius:50%!important;
  background:#182e45!important;
  color:white!important;
  font-size:18px!important;
}
html body > .notifyBanner button:focus-visible,
#chatToast:focus-visible{outline:2px solid #6ed2ff!important;outline-offset:2px!important}
/* Simultaneous security and incoming-message banners must not cover each other. */
html body:has(#voiceSecurityBanner.show) > #messageBanner.notifyBanner{
  top:auto!important;
  bottom:calc(104px + env(safe-area-inset-bottom,0px))!important;
  z-index:4590!important;
}
html body > #chatToast.toast,
html body .toast#chatToast{
  box-sizing:border-box!important;
  z-index:6600!important;
  width:max-content!important;
  max-width:min(90vw,500px)!important;
  padding:12px 16px!important;
  border:1px solid rgba(111,193,238,.63)!important;
  border-radius:14px!important;
  background:#102a40!important;
  background-image:none!important;
  color:#f2faff!important;
  font-size:13px!important;
  line-height:1.45!important;
  text-align:center!important;
  text-shadow:none!important;
  box-shadow:0 16px 40px rgba(0,0,0,.7)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  overflow-wrap:anywhere!important;
}
html body > #systemNoticeModal.systemNoticeModal{z-index:6200!important}
html body #systemNoticeModal .systemNoticeWindow,
html body #systemNoticeModal .systemNoticeScroll,
html body #systemUpdateOverlay .androidLiveUpdateCard{
  background-color:#0c1b2d!important;
  background-image:none!important;
  color:#f4faff!important;
  opacity:1!important;
}
html body :is(#systemChatScreen .systemNotification,#notificationHistory .broadcastHistory){
  background:#102237!important;
  border-color:rgba(104,185,232,.45)!important;
  color:#eef7ff!important;
}
@media(max-width:700px){
  html body > .notifyBanner,
  html body #voiceSecurityBanner.notifyBanner,
  html body #messageBanner.notifyBanner{
    top:calc(max(56px,env(safe-area-inset-top,0px)) + 8px)!important;
    width:calc(100vw - 28px)!important;
    max-height:min(49dvh,390px)!important;
    padding:13px 14px!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:8px!important;
  }
  html body > .notifyBanner b{grid-column:1!important;grid-row:1!important}
  html body > .notifyBanner span{grid-column:1!important;grid-row:2!important}
  html body > .notifyBanner button:not(.notifyBannerClose){
    grid-column:1!important;
    grid-row:3!important;
    justify-self:stretch!important;
    min-height:42px!important;
  }
  html body:has(#voiceSecurityBanner.show) > #messageBanner.notifyBanner{
    top:auto!important;
    bottom:calc(96px + env(safe-area-inset-bottom,0px))!important;
  }
  html body > #chatToast.toast{bottom:calc(100px + env(safe-area-inset-bottom,0px))!important}
}
@media(prefers-reduced-motion:reduce){
  html body > .notifyBanner,
  html body > #chatToast.toast{transition:none!important}
}