/* JOBIX_V168_NOTIFICATION_ALERT_CENTER
   Replaces the old wide/awkward bell with a compact hover/click alert center.
   Visual + interaction layer only. No SMS/Twilio/tenant routing changes. */
:root{
  --jx168-right: 18px;
  --jx168-top: 16px;
  --jx168-blue: #2563eb;
  --jx168-ink: #0f172a;
  --jx168-muted: #64748b;
  --jx168-border: #dbe7f4;
  --jx168-shadow: 0 22px 70px rgba(15,23,42,.22);
}

/* Hide older v165/v166/v167 notification widgets so the new alert center is the only visible control. */
#jx165-bell-root,
#jx165-bell,
#jx165-panel,
#jobixTenantBell,
.jbx-bell,
.jobix-notification-bell,
[data-jobix-notification-bell],
.jbx-bell-dropdown{
  display:none!important;
  pointer-events:none!important;
  visibility:hidden!important;
}

#jx168-alert-root{
  position:fixed!important;
  top:var(--jx168-top)!important;
  right:var(--jx168-right)!important;
  z-index:2147483000!important;
  font-family:Inter,Arial,system-ui,sans-serif!important;
  color:var(--jx168-ink)!important;
}

#jx168-alert-btn{
  border:1px solid rgba(147,197,253,.75)!important;
  background:linear-gradient(135deg,#0f172a 0%,#172554 100%)!important;
  color:#fff!important;
  border-radius:999px!important;
  height:44px!important;
  min-width:48px!important;
  max-width:245px!important;
  padding:0 10px!important;
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  cursor:pointer!important;
  box-shadow:0 14px 36px rgba(15,23,42,.22)!important;
  outline:none!important;
  user-select:none!important;
  white-space:nowrap!important;
  overflow:hidden!important;
}
#jx168-alert-btn:hover,
#jx168-alert-root.jx168-open #jx168-alert-btn,
#jx168-alert-btn:focus-visible{
  transform:translateY(-1px)!important;
  box-shadow:0 18px 48px rgba(15,23,42,.28)!important;
  border-color:#93c5fd!important;
}

.jx168-icon-wrap{
  position:relative!important;
  width:28px!important;
  height:28px!important;
  flex:0 0 28px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.12)!important;
  display:grid!important;
  place-items:center!important;
}
.jx168-icon{
  display:block!important;
  width:17px!important;
  height:17px!important;
}
.jx168-icon svg{display:block!important;width:17px!important;height:17px!important;fill:#fff!important}
.jx168-pulse{
  position:absolute!important;
  right:2px!important;
  top:2px!important;
  width:8px!important;
  height:8px!important;
  border-radius:999px!important;
  background:#22c55e!important;
  box-shadow:0 0 0 3px rgba(34,197,94,.18)!important;
  display:none!important;
}
#jx168-alert-root.jx168-has-count .jx168-pulse{display:block!important}
.jx168-label{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  line-height:1.05!important;
  overflow:hidden!important;
}
.jx168-label strong{
  display:block!important;
  max-width:145px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:12px!important;
  font-weight:950!important;
  color:#fff!important;
}
.jx168-label span{
  display:block!important;
  max-width:145px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  margin-top:2px!important;
  font-size:10px!important;
  font-weight:850!important;
  color:#bfdbfe!important;
}
.jx168-count{
  flex:0 0 auto!important;
  min-width:22px!important;
  height:22px!important;
  padding:0 6px!important;
  border-radius:999px!important;
  background:#ef4444!important;
  color:#fff!important;
  display:none!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:12px!important;
  font-weight:950!important;
  border:2px solid #fff!important;
}
#jx168-alert-root.jx168-has-count .jx168-count{display:inline-flex!important}

#jx168-panel{
  position:absolute!important;
  top:54px!important;
  right:0!important;
  width:370px!important;
  max-width:calc(100vw - 24px)!important;
  max-height:min(545px,calc(100vh - 88px))!important;
  overflow:hidden!important;
  background:#fff!important;
  border:1px solid var(--jx168-border)!important;
  border-radius:20px!important;
  box-shadow:var(--jx168-shadow)!important;
  opacity:0!important;
  transform:translateY(-6px) scale(.985)!important;
  pointer-events:none!important;
  visibility:hidden!important;
  transition:opacity .12s ease, transform .12s ease, visibility .12s ease!important;
}
#jx168-alert-root.jx168-open #jx168-panel{
  opacity:1!important;
  transform:translateY(0) scale(1)!important;
  pointer-events:auto!important;
  visibility:visible!important;
}
.jx168-head{
  padding:13px 15px!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:12px!important;
  border-bottom:1px solid #e5edf7!important;
  background:linear-gradient(180deg,#f8fbff 0%,#fff 100%)!important;
}
.jx168-head-title{min-width:0!important}
.jx168-head h3{margin:0!important;font-size:15px!important;line-height:1.1!important;color:var(--jx168-ink)!important;font-weight:950!important}
.jx168-head p{margin:4px 0 0!important;font-size:11px!important;line-height:1.25!important;color:var(--jx168-muted)!important;font-weight:750!important;max-width:230px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.jx168-open-all{color:#2563eb!important;font-weight:950!important;text-decoration:none!important;font-size:12px!important;white-space:nowrap!important;padding-top:2px!important}
.jx168-list{
  max-height:min(410px,calc(100vh - 180px))!important;
  overflow:auto!important;
  padding:4px 0!important;
}
.jx168-empty,
.jx168-loading{
  padding:20px 16px!important;
  color:var(--jx168-muted)!important;
  font-weight:750!important;
  line-height:1.35!important;
  font-size:13px!important;
}
.jx168-item{
  display:flex!important;
  gap:10px!important;
  padding:12px 15px!important;
  border-bottom:1px solid #edf3fb!important;
  background:#fff!important;
}
.jx168-item:last-child{border-bottom:0!important}
.jx168-item.unread{background:#f0f7ff!important}
.jx168-item.failed{background:#fff7ed!important}
.jx168-item .dot{
  width:10px!important;height:10px!important;border-radius:999px!important;background:#2563eb!important;flex:0 0 auto!important;margin-top:4px!important;box-shadow:0 0 0 4px rgba(37,99,235,.10)!important;
}
.jx168-item.read .dot{background:#cbd5e1!important;box-shadow:none!important}
.jx168-item.failed .dot{background:#f97316!important;box-shadow:0 0 0 4px rgba(249,115,22,.12)!important}
.jx168-item-body{min-width:0!important;flex:1!important}
.jx168-item-title{font-size:13px!important;line-height:1.22!important;color:var(--jx168-ink)!important;font-weight:950!important;margin:0 0 3px!important;word-break:break-word!important}
.jx168-item-meta{font-size:11px!important;line-height:1.3!important;color:var(--jx168-muted)!important;font-weight:750!important;margin:0 0 5px!important;word-break:break-word!important}
.jx168-item-summary{font-size:13px!important;line-height:1.35!important;color:#334155!important;margin:0 0 9px!important;max-height:54px!important;overflow:hidden!important;word-break:break-word!important;overflow-wrap:anywhere!important}
.jx168-actions{display:flex!important;gap:7px!important;flex-wrap:wrap!important}
.jx168-actions a,
.jx168-actions button{
  border:0!important;border-radius:999px!important;padding:6px 10px!important;background:#e8f0ff!important;color:#1d4ed8!important;font-size:12px!important;font-weight:900!important;text-decoration:none!important;cursor:pointer!important;line-height:1!important;
}
.jx168-actions button{font-family:inherit!important}
.jx168-foot{
  display:flex!important;
  justify-content:space-between!important;
  gap:8px!important;
  padding:11px 15px!important;
  border-top:1px solid #e5edf7!important;
  background:#f8fbff!important;
}
.jx168-foot a{font-size:12px!important;font-weight:950!important;text-decoration:none!important;color:#2563eb!important}
.jx168-foot button{border:0!important;background:transparent!important;color:#2563eb!important;font-weight:950!important;font-size:12px!important;cursor:pointer!important;padding:0!important}

@media(max-width:600px){
  #jx168-alert-root{top:12px!important;right:10px!important}
  #jx168-alert-btn{height:42px!important;max-width:210px!important;padding:0 9px!important}
  .jx168-label strong{max-width:115px!important}
  .jx168-label span{max-width:115px!important}
  #jx168-panel{width:calc(100vw - 20px)!important;right:0!important;top:50px!important;border-radius:18px!important}
  .jx168-head p{max-width:190px!important}
}
@media print{#jx168-alert-root{display:none!important}}