/* ═══════════════════════════════════════════════════════════════════════
   NOTIF DRAWER — финальный мобильный стиль (Variant B + правки пользователя).
   Popup в правом верхнем углу под колокольчиком (как Telegram).
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* ─── Контейнер: компактный popup в правом верхнем углу ─── */
  .notif-drawer {
    position: fixed !important;
    top: 60px !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    width: 300px !important;
    max-width: calc(100vw - 20px) !important;
    max-height: 65vh !important;       /* чуть больше вертикально */
    min-height: 180px;                  /* чтобы не схлопывался при empty */
    border-radius: 14px !important;
    border: 1px solid var(--border) !important;
    background: var(--bg2) !important;
    box-shadow: 0 16px 50px rgba(0,0,0,0.65) !important;
    transform: translateY(-10px) scale(0.96) !important;
    opacity: 0 !important;
    pointer-events: none;
    overflow-y: auto;
    transform-origin: top right;
    transition: transform 0.22s, opacity 0.18s;
    z-index: 200;
  }
  .notif-drawer.open {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
    pointer-events: auto;
  }

  /* ─── Header: заголовок слева, крестик справа (в одной строке) ─── */
  .notif-drawer .notif-drawer-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    padding: 14px 16px !important;
    gap: 12px;
  }
  .notif-drawer .notif-drawer-header h3 {
    font-size: 16px !important;
    margin: 0 !important;
    flex: 1;
  }
  .notif-drawer .notif-drawer-header .icon-btn {
    margin-left: auto !important;
    flex-shrink: 0;
  }

  /* ─── Empty state: убираем колокольчик-иконку, оставляем только текст ─── */
  .notif-drawer .notif-drawer-empty .ndi-icon {
    display: none !important;
  }
  .notif-drawer .notif-drawer-empty {
    padding: 24px 16px !important;
    text-align: center;
    color: var(--text3);
    font-size: 14px;
  }
}