/* EdiX notifications bell — a fixed FAB stacked above the support bubble. RTL-safe via
   inset-inline-end. Mirrors support-bubble.css styling with cyber tokens. */
/* bottom 20px — the support bubble FAB below this slot is decommissioned (support
   lives in /messages now), so the bell takes its place. */
.nt-root { position: fixed; bottom: 20px; inset-inline-end: 20px; z-index: 2147482999; font-family: inherit; }

.nt-fab {
  position: relative; width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--cyber-surface-2, #14141c); color: var(--cyber-accent, #00ff88);
  border: 1px solid var(--cyber-border, rgba(255,255,255,.12));
  box-shadow: 0 4px 18px rgba(0,0,0,.45); transition: transform .12s, filter .12s;
}
.nt-fab .ms { font-size: 26px; }
.nt-fab:hover { filter: brightness(1.12); transform: translateY(-2px); }
.nt-fab:active { transform: translateY(0); }

.nt-badge {
  position: absolute; top: -4px; inset-inline-end: -4px; min-width: 20px; height: 20px;
  padding: 0 5px; border-radius: 10px; background: var(--cyber-danger, #ff2e63); color: #fff;
  font-size: .72rem; font-weight: 800; display: none; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--cyber-bg, #0a0a0f);
}
.nt-badge.show { display: flex; }

.nt-panel {
  position: absolute; bottom: 64px; inset-inline-end: 0; width: 340px; max-width: calc(100vw - 32px);
  max-height: min(70vh, 460px); overflow-y: auto; display: none;
  background: var(--cyber-surface, #101018); color: var(--cyber-fg, #e8e8f0);
  border: 1px solid var(--cyber-border, rgba(255,255,255,.12)); border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.55);
}
.nt-panel.show { display: block; }
.nt-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px; font-weight: 800; letter-spacing: .02em;
  border-bottom: 1px solid var(--cyber-border, rgba(255,255,255,.08));
  position: sticky; top: 0; background: inherit;
}
.nt-list { padding: 6px; }
.nt-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: 10px;
  cursor: pointer; text-decoration: none; color: inherit; transition: background .12s;
}
.nt-item:hover { background: var(--cyber-surface-2, rgba(255,255,255,.05)); }
.nt-item.unread { background: rgba(0, 255, 136, .08); }
.nt-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-weight: 800;
  background: var(--cyber-surface-2, #1c1c26); color: var(--cyber-accent, #00ff88); overflow: hidden; }
.nt-av .ms { font-size: 18px; }   /* EdiX-Team shield on system rows (ticket_reply) */
.nt-body { flex: 1 1 auto; min-width: 0; font-size: .88rem; line-height: 1.35; }
.nt-text { word-wrap: break-word; }
.nt-time { display: block; font-size: .72rem; color: var(--cyber-muted-fg, #889); margin-top: 2px; }
.nt-empty { padding: 22px 14px; text-align: center; color: var(--cyber-muted-fg, #889); font-size: .9rem; }

@media (max-width: 480px) {
  .nt-root { bottom: 14px; inset-inline-end: 14px; }
  .nt-panel { bottom: 60px; width: calc(100vw - 28px); }
}