/* ═══════════════════════════════════════════════════════════
   NOTIFICATIONS  —  Instagram-style panel, toast, badge
   Add a <link> to this file in App.php alongside the other
   stylesheet <link> tags.
   Path on server: library/stylesheets/reusable/notifications.css
═══════════════════════════════════════════════════════════ */

/* ── Badge (count pill on bell / nav icons) ─────────────── */
.notif-badge {
  /* Layout */
  position:        absolute;
  top:             -4px;
  right:           -4px;
  min-width:       18px;
  height:          18px;
  padding:         0 5px;
  box-sizing:      border-box;

  /* Shape */
  border-radius:   99px;

  /* Color & depth */
  background:      var(--red, #e03030);
  box-shadow:
    0 0 0 2px var(--surface, #0d0d1a),   /* crisp white-ring separator */
    0 2px 8px rgba(224, 48, 48, 0.50);    /* red glow for depth        */

  /* Text */
  color:           #fff;
  font-size:       10px;
  font-weight:     800;
  line-height:     18px;
  letter-spacing: -0.02em;
  text-align:      center;
  font-variant-numeric: tabular-nums;

  /* Behaviour */
  pointer-events:  none;
  transform-origin: top right;

  /* Animate in with a spring overshoot */
  transition:
    opacity  .18s ease,
    transform .25s cubic-bezier(.34, 1.56, .64, 1);
}

/* ── Hidden state ────────────────────────────────────────── */
.notif-badge.notif-dot--hidden {
  opacity:   0;
  transform: scale(0.3);
}

/* ── Bell-button specific positioning ────────────────────── */
/* The bell is 36×36px; push the badge just outside the rim */
.notif-bell-btn .notif-badge {
  top:   -5px;
  right: -5px;
}

/* ── Bottom-nav activity icon positioning ────────────────── */
/* Badge sits inside .bn-act-icon which is position:relative  */
.bn-act-icon .notif-badge {
  top:   -4px;
  right: -4px;
}

/* ── Light-theme ring matches surface ────────────────────── */
[data-theme="light"] .notif-badge {
  box-shadow:
    0 0 0 2px var(--surface, #ffffff),
    0 2px 8px rgba(224, 48, 48, 0.35);
}

/* Legacy dot (kept for any callers that only add .notif-dot) */
.notif-dot:not(.notif-badge) {
  position:       absolute;
  top:            4px;
  right:          4px;
  width:          8px;
  height:         8px;
  border-radius:  50%;
  background:     var(--red, #e03030);
  pointer-events: none;
  transition:     opacity .2s;
}
.notif-dot--hidden:not(.notif-badge) { opacity: 0; }


/* ── Backdrop (mobile overlay) ──────────────────────────── */
.notif-backdrop {
  display:    none;
  position:   fixed;
  inset:      0;
  background: rgba(0,0,0,.45);
  z-index:    1099;
  opacity:    0;
  transition: opacity .25s;
}
.notif-backdrop--open {
  display: block;
  opacity: 1;
}


/* ── Panel ───────────────────────────────────────────────── */
.notif-panel {
  position:       fixed;
  z-index:        1100;
  background:     var(--surface, #18171f);
  border:         1px solid var(--border, rgba(255,255,255,.08));
  border-radius:  16px;
  box-shadow:     0 8px 40px rgba(0,0,0,.55);
  display:        flex;
  flex-direction: column;
  overflow:       hidden;

  /* Desktop: dropdown below bell */
  top:         60px;
  right:       16px;
  width:       360px;
  max-height:  520px;

  opacity:    0;
  transform:  translateY(-8px) scale(.97);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}

.notif-panel--open {
  opacity:        1;
  transform:      translateY(0) scale(1);
  pointer-events: auto;
}

/* Mobile: full-width bottom sheet */
@media (max-width: 480px) {
  .notif-panel {
    top:          auto;
    bottom:       64px;   /* above bottom nav */
    left:         0;
    right:        0;
    width:        100%;
    border-radius: 20px 20px 0 0;
    max-height:   72dvh;
    transform:    translateY(20px) scale(.98);
  }
  .notif-panel--open {
    transform: translateY(0) scale(1);
  }
}


/* ── Panel header ────────────────────────────────────────── */
.notif-panel__header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         14px 16px 10px;
  border-bottom:   1px solid var(--border, rgba(255,255,255,.07));
  flex-shrink:     0;
}

.notif-panel__title {
  font-size:   15px;
  font-weight: 700;
  color:       var(--text, #f0eeff);
  margin:      0;
}

.notif-panel__mark-all {
  font-size:   12px;
  font-weight: 600;
  color:       var(--gold, #e8b84b);
  background:  none;
  border:      none;
  cursor:      pointer;
  padding:     4px 6px;
  border-radius: 6px;
  transition:  background .15s;
}
.notif-panel__mark-all:hover {
  background: rgba(232,184,75,.12);
}


/* ── Panel body ──────────────────────────────────────────── */
.notif-panel__body {
  overflow-y:  auto;
  flex:        1 1 auto;
  overscroll-behavior: contain;
}
.notif-panel__body::-webkit-scrollbar { width: 4px; }
.notif-panel__body::-webkit-scrollbar-thumb {
  background:    rgba(255,255,255,.1);
  border-radius: 4px;
}

.notif-panel__empty {
  padding:    40px 20px;
  text-align: center;
  color:      var(--muted, #8884a8);
  font-size:  13px;
}


/* ── Date group label ────────────────────────────────────── */
.notif-group__label {
  padding:     8px 16px 4px;
  font-size:   11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:       var(--muted, #8884a8);
}


/* ── Notification item ───────────────────────────────────── */
.notif-item {
  display:         flex;
  align-items:     flex-start;
  gap:             12px;
  padding:         10px 16px;
  text-decoration: none;
  color:           inherit;
  position:        relative;
  transition:      background .15s;
  cursor:          pointer;
}
.notif-item:hover {
  background: rgba(255,255,255,.04);
}

/* Unread highlight */
.notif-item--unread {
  background: rgba(232,184,75,.06);
}
.notif-item--unread:hover {
  background: rgba(232,184,75,.10);
}

.notif-item__icon {
  font-size:   22px;
  line-height: 1;
  flex-shrink: 0;
  margin-top:  2px;
  width:       32px;
  text-align:  center;
}

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

.notif-item__title {
  font-size:   13px;
  font-weight: 600;
  color:       var(--text, #f0eeff);
  line-height: 1.35;
  white-space: normal;
}

.notif-item__body {
  font-size:    12px;
  color:        var(--muted, #8884a8);
  margin-top:   2px;
  line-height:  1.4;
  display:      -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:     hidden;
  line-clamp:   2; /* Standard property for compatibility */
}

.notif-item__time {
  font-size:  11px;
  color:      var(--muted, #8884a8);
  margin-top: 4px;
}

/* Unread dot (right side) */
.notif-item__dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--gold, #e8b84b);
  flex-shrink:   0;
  margin-top:    6px;
  align-self:    flex-start;
}


/* ── Toast ───────────────────────────────────────────────── */
.notif-toast {
  position:       fixed;
  bottom:         80px;
  left:           50%;
  transform:      translateX(-50%) translateY(20px);
  z-index:        1200;

  display:        flex;
  align-items:    center;
  gap:            10px;

  background:     var(--surface-2, #242234);
  border:         1px solid var(--border, rgba(255,255,255,.1));
  border-radius:  50px;
  padding:        10px 14px 10px 12px;
  box-shadow:     0 4px 24px rgba(0,0,0,.5);

  max-width:      320px;
  width:          max-content;

  opacity:        0;
  pointer-events: none;
  transition:     opacity .3s, transform .3s;
}

.notif-toast--open {
  opacity:        1;
  transform:      translateX(-50%) translateY(0);
  pointer-events: auto;
}

.notif-toast__icon {
  font-size:  18px;
  flex-shrink: 0;
}

.notif-toast__text {
  font-size:   13px;
  font-weight: 600;
  color:       var(--text, #f0eeff);
  flex:        1;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
  max-width:   220px;
}

.notif-toast__close {
  background:  none;
  border:      none;
  color:       var(--muted, #8884a8);
  cursor:      pointer;
  font-size:   13px;
  padding:     2px 4px;
  flex-shrink: 0;
}
.notif-toast__close:hover { color: var(--text, #f0eeff); }


/* ── Push permission prompt banner (after login) ──────────── */
.push-prompt-banner {
  position:       fixed;
  bottom:         20px;
  left:           50%;
  transform:      translateX(-50%) translateY(20px);
  z-index:        1300;
  background:     var(--surface-2, #242234);
  border:         1px solid var(--border, rgba(255,255,255,.1));
  border-radius:  12px;
  box-shadow:     0 8px 32px rgba(0,0,0,.6);
  padding:        12px 16px;
  opacity:        0;
  pointer-events: none;
  transition:     opacity .3s, transform .3s;
}

.push-prompt-banner--visible {
  opacity:        1;
  transform:      translateX(-50%) translateY(0);
  pointer-events: auto;
}

.push-prompt-content {
  display:        flex;
  align-items:    center;
  gap:            12px;
}

.push-prompt-icon {
  font-size:      20px;
  flex-shrink:    0;
}

.push-prompt-text {
  font-size:      13px;
  font-weight:    500;
  color:          var(--text, #f0eeff);
  white-space:    nowrap;
}

.push-prompt-allow {
  background:     var(--gold, #e8b84b);
  color:          #1a1a2e;
  border:         none;
  border-radius:  6px;
  padding:        6px 12px;
  font-size:      12px;
  font-weight:    600;
  cursor:        pointer;
  transition:     background .15s, transform .1s;
  flex-shrink:    0;
}
.push-prompt-allow:hover {
  background:     var(--gold-glow, #f0c860);
  transform:      scale(1.02);
}
.push-prompt-allow:active {
  transform:      scale(.98);
}

.push-prompt-dismiss {
  background:     none;
  border:         none;
  color:          var(--muted, #8884a8);
  font-size:      14px;
  cursor:        pointer;
  padding:        4px;
  line-height:    1;
  transition:     color .15s, background .15s;
  border-radius:  4px;
  flex-shrink:    0;
}
.push-prompt-dismiss:hover {
  color:          var(--text, #f0eeff);
  background:     rgba(255,255,255,.08);
}

/* Mobile: full-width banner */
@media (max-width: 480px) {
  .push-prompt-banner {
    left:         16px;
    right:        16px;
    width:        auto;
    transform:    translateY(20px);
  }
  .push-prompt-banner--visible {
    transform:    translateY(0);
  }
  .push-prompt-text {
    white-space:  normal;
  }
}

/* ── Bell button in topbar ───────────────────────────────── */
.notif-bell-btn {
  position:      relative;
  width:         36px;
  height:        36px;
  border-radius: 50%;
  background:    var(--panel);
  border:        1px solid var(--border);
  display:       grid;
  place-items:   center;
  cursor:        pointer;
  color:         var(--text-2);
  flex-shrink:   0;
  transition:    border-color .18s, color .18s, background .18s;
  -webkit-tap-highlight-color: transparent;
}
.notif-bell-btn:hover {
  border-color: var(--gold-glow);
  color:        var(--gold);
  background:   var(--gold-dim);
}
.notif-bell-btn--ring {
  animation: bell-ring .5s ease-in-out 2;
}
@keyframes bell-ring {
  0%,100% { transform: rotate(0); }
  20%     { transform: rotate(-18deg); }
  50%     { transform: rotate(18deg);  }
  80%     { transform: rotate(-10deg); }
}