/* ══════════════════════════════════════════
   NOTIFICATIONS POPUP
══════════════════════════════════════════ */

.notif-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.notif-popup {
  pointer-events: all;
  position: absolute; top: 54px; right: 200px;
  width: 360px; max-height: calc(100vh - 80px);
  background: rgba(10,15,24,.98);
  border: 1px solid var(--steel-hi);
  box-shadow: 0 8px 48px rgba(0,0,0,.7), 0 0 0 1px rgba(200,162,39,.08);
  display: flex; flex-direction: column; overflow: hidden;
  animation: ms-slide-in .2s cubic-bezier(.16,1,.3,1);
  clip-path: polygon(12px 0%,100% 0%,100% calc(100% - 12px),calc(100% - 12px) 100%,0% 100%,0% 12px);
}

/* Хедер */
.notif-hdr {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px; background: rgba(14,21,32,.8); border-bottom: 1px solid var(--steel-hi);
  position: relative;
}

.notif-hdr::after {
  content:''; position:absolute; bottom:-1px; left:0; width:40%; height:1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.notif-hdr-left  { display:flex; align-items:center; gap:8px; }

.notif-hdr-right { display:flex; align-items:center; gap:8px; }

.notif-title {
  font-family: 'Rajdhani', sans-serif; font-size:11px; font-weight:700;
  color: var(--gold); letter-spacing:3px; text-transform:uppercase;
}

.notif-count-badge {
  background: var(--red); color:#fff;
  font-family: 'Share Tech Mono', monospace; font-size:9px;
  width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 0 8px rgba(224,64,64,.6);
  animation: pulse 2s infinite;
}

.notif-mark-all {
  background:none; border:none; font-size:9px; color:var(--teal);
  letter-spacing:1px; transition:color var(--transition);
}

.notif-mark-all:hover { color:var(--gold); }

.notif-close {
  background:none; border:none; color:var(--txt-lo); font-size:14px; padding:2px 4px;
  transition:color var(--transition);
}

.notif-close:hover { color:var(--red); }

/* Фильтры */
.notif-filters {
  flex-shrink:0; display:flex; gap:4px; padding:8px 10px;
  border-bottom:1px solid var(--steel-hi); background:rgba(8,12,20,.5);
  flex-wrap:wrap;
}

.notif-filter {
  padding:3px 10px; font-family:'Share Tech Mono',monospace; font-size:8px;
  background:rgba(42,53,69,.4); border:1px solid var(--steel-hi); color:var(--txt-lo);
  letter-spacing:1px; transition:all var(--transition);
}

.notif-filter.on  { background:rgba(200,162,39,.12); border-color:rgba(200,162,39,.4); color:var(--gold); }

.notif-filter:hover:not(.on) { border-color:var(--teal); color:var(--teal); }

/* Список */
.notif-list {
  flex:1; overflow-y:auto;
}

.notif-empty {
  padding:32px; text-align:center;
  font-family:'Share Tech Mono',monospace; font-size:10px; color:var(--txt-lo);
}

.notif-item {
  display:flex; align-items:flex-start; gap:10px;
  padding:11px 14px; border-bottom:1px solid rgba(42,53,69,.4);
  transition:background var(--transition); position:relative;
}

.notif-item.unread { background:rgba(200,162,39,.04); }

.notif-item.unread::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--gold);
}

.notif-item.clickable { cursor:pointer; }

.notif-item.clickable:hover { background:rgba(42,53,69,.35); }

.notif-icon {
  flex-shrink:0; width:34px; height:34px; border-radius:6px;
  display:flex; align-items:center; justify-content:center; font-size:15px;
}

.notif-content { flex:1; min-width:0; }

.notif-item-title { font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:700; color:var(--txt-hi); letter-spacing:.3px; margin-bottom:2px; }

.notif-item-body  { font-size:10px; color:var(--txt-lo); line-height:1.5; }

.notif-meta { flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; gap:5px; padding-top:2px; }

.notif-time { font-family:'Share Tech Mono',monospace; font-size:8px; color:var(--txt-lo); }

.notif-dot  { width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 5px var(--gold); }

/* Футер */
.notif-footer {
  flex-shrink:0; padding:8px 14px; border-top:1px solid var(--steel-hi);
  background:rgba(8,12,20,.6); display:flex; justify-content:flex-end;
}

.notif-clear {
  background:none; border:none; font-size:9px; color:rgba(224,64,64,.5);
  letter-spacing:1px; transition:color var(--transition);
}

.notif-clear:hover { color:var(--red); }

/* Кнопка колокольчика в топбаре */
.tb-bell-btn {
  position:relative; display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; cursor:pointer; font-size:16px; color:var(--txt-lo);
  border:1px solid transparent; border-radius:4px; transition:all var(--transition);
}

.tb-bell-btn:hover { color:var(--gold); border-color:rgba(200,162,39,.3); background:rgba(200,162,39,.08); }

.tb-bell-btn.active { color:var(--gold); }

.tb-bell-badge {
  position:absolute; top:-3px; right:-3px;
  min-width:16px; height:16px; border-radius:8px;
  background:var(--red); color:#fff;
  font-family:'Share Tech Mono',monospace; font-size:8px;
  display:flex; align-items:center; justify-content:center;
  padding:0 3px; border:1px solid var(--bg2);
  box-shadow:0 0 6px rgba(224,64,64,.7);
  animation:pulse 2s infinite;
}
}
/* ── Дополнения ── */
.notif-body       { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.notif-item-time  { font-size: 9px; color: var(--txt-lo); margin-top: 2px; font-family: 'Share Tech Mono', monospace; }
.notif-loading    { padding: 24px; text-align: center; color: var(--txt-lo); font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: 2px; }