/* ═══════════════════════════════════════════════════
   NOTIFICATION FIX — Final z-index & stacking fix
   ═══════════════════════════════════════════════════ */

/* Wrap needs high z-index */
.notif-wrap {
  position: relative !important;
  z-index: 9500 !important;
}

/* Panel: fixed positioning escapes ALL stacking contexts */
#notif-panel {
  position: fixed !important;
  top: 58px !important;
  right: auto !important;
  left: 12px !important;
  width: 400px !important;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100vh - 72px) !important;
  z-index: 10000 !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08) !important;
  background: var(--bg2) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
[dir="ltr"] #notif-panel {
  left: auto !important;
  right: 12px !important;
}
[data-theme="light"] #notif-panel {
  box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.06) !important;
  background: #fff !important;
}

/* Ensure show works */
#notif-panel.show {
  display: block !important;
}

/* Force content behind panel */
.tabs, .stats-bar, .panel, .panel.active {
  z-index: auto !important;
}

/* Mobile */
@media (max-width: 768px) {
  #notif-panel {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    top: 52px !important;
    max-height: calc(100vh - 64px) !important;
  }
  [dir="ltr"] #notif-panel {
    right: 8px !important;
    left: 8px !important;
  }
}