.notif_board {
  position: fixed;
  top: 12vh;
  z-index: 200;

  width: clamp(280px, 22vw, 380px);
  max-height: 70vh;

  padding-top: 10px;
  padding-bottom: 10px;

  border: 1px solid #364153;
  background-color: rgb(18, 26, 41);
  border-radius: 15px;

  display: flex;
  flex-direction: column;

  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.notif_board.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ── ШАПКА ── */
.notif_board_header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  color: #99a1af;
  font-size: clamp(12px, 1vw, 15px);
}

/* ── КНОПКИ ФИЛЬТРА ── */
.button_notif {
  display: flex;
  width: 100%;
  height: clamp(28px, 3vh, 36px);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #364153;
}

.button_notif button {
  flex: 1;
  background-color: #1e2939;
  border: none;
  border-right: 1px solid #364153;
  color: #99a1af;
  font-size: clamp(11px, 0.9vw, 13px);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.button_notif button:last-child {
  border-right: none;
}

.button_notif button:hover {
  background-color: #364153;
  color: aliceblue;
}

.button_notif button.active {
  background-color: #1c2e49;
  color: #5082ec;
  border-bottom: 2px solid #5082ec;
}

/* ── СПИСОК ── */
.notif_board_list {
  overflow-y: auto;
  flex: 1;

  background-color: #1e2939;
  border: 1px solid #364153;
  border-radius: 10px;

  margin-top: 10px;
  margin-left: 8px;
  margin-right: 8px;
}

/* Скроллбар */
.notif_board_list::-webkit-scrollbar {
  width: 4px;
}

.notif_board_list::-webkit-scrollbar-track {
  background: #1e2939;
  border-radius: 4px;
}

.notif_board_list::-webkit-scrollbar-thumb {
  background: #364153;
  border-radius: 4px;
}

/* ── ОДНО УВЕДОМЛЕНИЕ ── */
.notification {
  display: flex;
  flex-direction: column;
  gap: 5px;

  padding: clamp(8px, 1.2vh, 14px) clamp(10px, 1.5vw, 16px);
  border-bottom: 1px solid #364153;
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.notification:last-child {
  border-bottom: none;
}

.notification:hover {
  background-color: #16202f;
}

/* ── ССЫЛКА ── */
.notification-sub {
  color: #5082ec;
  font-size: clamp(10px, 0.85vw, 12px);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  transition: color 0.2s ease;
}

.notification-sub:hover {
  color: #93c5ff;
}

/* ── СООБЩЕНИЕ ── */
.notification-message {
  color: aliceblue;
  font-size: clamp(11px, 0.9vw, 13px);
  line-height: 1.4;
}

/* ── ВРЕМЯ ── */
.notification-created_at {
  color: #666e7e;
  font-size: clamp(10px, 0.8vw, 11px);
}

/* ── ПУСТОЕ СОСТОЯНИЕ ── */
.notif_board_empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: clamp(20px, 4vh, 40px);
  color: #666e7e;
  font-size: clamp(12px, 1vw, 14px);
}

.notif_board_empty i {
  font-size: clamp(24px, 3vw, 32px);
}

.notif .notif_indicator {
  position: absolute;
  right: 10px;

}

.notif_indicator {
  opacity: 0;
  display: inline-block;
  border-radius: 50%;
  background-color: #5082ec;
  width: 1vh;
  height: 1vh;
  box-shadow: 0px 0px 5px #1f52b8;
  animation: pulse 2s ease-in-out infinite alternate;
}

.notif_indicator.visible {
  opacity: 1;
}

@keyframes pulse {
    0%   { box-shadow: 0px 0px 5px #1f52b8; }
    50%  { box-shadow: 0px 0px 15px #1f52b8; }
    100% { box-shadow: 0px 0px 5px #1f52b8; }
}

/* ── MOBILE ── */
@media (max-width: 768px) {
  .notif_board {
    right: 8px;
    left: 8px;
    width: auto;
  }
}