/* notifications.css — notification bell + panel.
   Moved out of notifications.js, which used to inject it at startup. */

#notifBellBtn { display:none; }
#notifBellBtn:hover { background:rgba(25,55,140,0.08) !important; }
#notifBellBtn:active { transform:scale(0.94); }
@keyframes notifBadgePop { from{transform:scale(0)} to{transform:scale(1)} }
#notificationsBadge { animation: notifBadgePop 0.25s cubic-bezier(.34,1.56,.64,1); }

/* ── Desktop (>600px): slide-in from right ── */
#notificationsPanel {
  position:fixed; top:0; right:-420px; width:380px; height:100dvh;
  background:#fff; box-shadow:-4px 0 32px rgba(0,0,0,0.14);
  z-index:99998; display:flex; flex-direction:column;
  transition:right 0.32s cubic-bezier(.4,0,.2,1); overflow:hidden;
}
#notificationsPanel.notif-panel-open { right:0; }

/* ── Mobile (≤600px): bottom sheet ── */
@media (max-width:600px) {
  #notificationsPanel {
    top:auto; right:0; bottom:-100dvh; left:0;
    width:100%; height:88dvh; max-height:88dvh;
    border-radius:20px 20px 0 0;
    box-shadow:0 -6px 32px rgba(0,0,0,0.18);
    transition:bottom 0.34s cubic-bezier(.4,0,.2,1);
  }
  #notificationsPanel.notif-panel-open { bottom:0; right:0; }
  .notif-panel-header {
    position:relative; padding-top:24px !important;
  }
  .notif-panel-header::before {
    content:''; display:block; position:absolute;
    top:10px; left:50%; transform:translateX(-50%);
    width:40px; height:4px; border-radius:4px; background:#e0e0e0;
  }
}

.notif-panel-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 18px 14px; border-bottom:1.5px solid #f0f0f0;
  background:#fff; flex-shrink:0;
}
.notif-panel-title { font-size:1.05rem; font-weight:800; color:#1a1a2e; letter-spacing:-0.02em; }
.notif-panel-actions { display:flex; align-items:center; gap:6px; }
.notif-panel-action-btn {
  background:none; border:none; cursor:pointer; font-size:12px; font-weight:600;
  color:#19378C; padding:5px 10px; border-radius:8px; transition:background 0.15s;
}
.notif-panel-action-btn:hover { background:#eef1f9; }
.notif-panel-clear-btn { color:#c0392b; }
.notif-panel-clear-btn:hover { background:#fdecea; }
.notif-close-btn {
  background:none; border:none; cursor:pointer; width:34px; height:34px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#888; transition:background 0.15s;
}
.notif-close-btn:hover { background:#f5f5f5; color:#333; }

#notificationsContainer {
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain; padding:8px 0;
}
.notif-date-group {
  font-size:11px; font-weight:700; color:#aaa; letter-spacing:0.06em;
  text-transform:uppercase; padding:10px 18px 4px;
}
.notif-item {
  display:flex; align-items:flex-start; gap:12px; padding:12px 18px;
  cursor:pointer; transition:background 0.15s;
}
.notif-item:hover  { background:#f9fafb; }
.notif-item:active { background:#f0f2f9; }
.notif-item-unread { background:#f4f6ff; }
.notif-item-unread:hover { background:#ebeffa; }

/* ── Swipe-to-delete ── */
.notif-item-swipe {
  position:relative; border-bottom:1px solid #f8f8f8; overflow:hidden;
}
.notif-swipe-delete-bg {
  position:absolute; inset:0; display:flex; align-items:stretch;
  justify-content:flex-end; background:#e74c3c;
  /* Same reasoning as the chat list: a full-bleed red panel painted
     under every row will show through any pixel the white content
     layer doesn't cover, which is what put a red line between rows
     during scrolling. Nothing painted at rest, nothing to leak. */
  visibility:hidden;
}
.notif-item-swipe.notif-row-swiping .notif-swipe-delete-bg,
.notif-item-swipe.notif-row-open    .notif-swipe-delete-bg { visibility:visible; }
.notif-swipe-delete-btn {
  width:84px; border:none; background:none; color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.notif-swipe-delete-btn:active { background:rgba(0,0,0,0.12); }
.notif-swipe-delete-btn .material-symbols-rounded { font-size:22px; }
.notif-swipe-content {
  position:relative; background:#fff; touch-action:pan-y;
  transition:transform 0.22s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.notif-swipe-content.notif-swiping { transition:none; }

.notif-icon-wrap {
  width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.notif-icon-wrap .material-symbols-rounded { font-size:20px; }
.notif-icon-green  { background:#e9f7ef; color:#1e8449; }
.notif-icon-purple { background:#f4ecf7; color:#8e44ad; }
.notif-icon-red    { background:#fdecea; color:#c0392b; }
.notif-icon-blue   { background:#ebf5fb; color:#2e86c1; }
.notif-icon-orange { background:#fef5e7; color:#d68910; }
.notif-icon-grey   { background:#f0f0f0; color:#888; }

.notif-body-wrap { flex:1; min-width:0; }
.notif-title-row { display:flex; align-items:center; gap:6px; margin-bottom:2px; }
.notif-title { font-size:13.5px; font-weight:700; color:#1a1a2e; line-height:1.35; }
.notif-body-text {
  font-size:12.5px; color:#555; line-height:1.4; margin-bottom:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.notif-time { font-size:11px; color:#aaa; font-weight:500; }
.notif-unread-dot { width:7px; height:7px; background:#19378C; border-radius:50%; flex-shrink:0; }

.notif-empty-state {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:4rem 2rem; gap:12px; text-align:center;
}
.notif-empty-icon { font-size:52px; opacity:0.3; color:#ccc; display:block; }
.notif-empty-state p { font-size:14px; font-weight:500; color:#bbb; }

.notif-push-prompt {
  display:flex; align-items:center; gap:10px; margin:10px 14px 4px;
  background:linear-gradient(135deg,#eef1f9,#dce4f9);
  border:1.5px solid #c5d2f0; border-radius:14px; padding:12px 12px 12px 14px;
  animation:notifSlideDown 0.3s ease;
}
@keyframes notifSlideDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.notif-push-icon { font-size:22px; color:#19378C; flex-shrink:0; }
.notif-push-text { flex:1; display:flex; flex-direction:column; gap:2px; }
.notif-push-text strong { font-size:13px; font-weight:700; color:#1a1a2e; }
.notif-push-text span   { font-size:12px; color:#555; line-height:1.35; }
.notif-push-btn {
  background:#19378C; color:#fff; border:none; border-radius:10px;
  padding:7px 14px; font-size:12.5px; font-weight:700; cursor:pointer;
  white-space:nowrap; flex-shrink:0; transition:background 0.15s;
}
.notif-push-btn:hover  { background:#1a2e7a; }
.notif-push-dismiss { background:none; border:none; cursor:pointer; color:#aaa; font-size:16px; padding:2px; }
.notif-push-dismiss:hover { color:#555; }

/* ── Landing toast (shown on app load, independent of the bell panel) ── */
.notif-landing-prompt {
  position:fixed; left:50%; bottom:24px; z-index:99996;
  display:flex; align-items:center; gap:12px;
  max-width:400px; width:calc(100% - 32px);
  background:#fff; border:1.5px solid #e2e6f5; border-radius:16px;
  box-shadow:0 10px 34px rgba(0,0,0,0.16);
  padding:14px 16px;
  opacity:0; pointer-events:none;
  transform:translateX(-50%) translateY(16px);
  transition:opacity 0.3s ease, transform 0.3s ease;
}
.notif-landing-prompt.notif-landing-open {
  opacity:1; pointer-events:all; transform:translateX(-50%) translateY(0);
}
.notif-landing-actions {
  display:flex; flex-direction:column; align-items:stretch; gap:6px; flex-shrink:0;
}
.notif-landing-dismiss-text {
  background:none; border:none; cursor:pointer; color:#888;
  font-size:11.5px; font-weight:600; padding:2px;
}
.notif-landing-dismiss-text:hover { color:#444; }
@supports (padding-bottom:env(safe-area-inset-bottom)) {
  .notif-landing-prompt { bottom:calc(24px + env(safe-area-inset-bottom)); }
}
@media (max-width:600px) {
  .notif-landing-prompt { bottom:calc(16px + env(safe-area-inset-bottom)); }
}

#notifBackdrop {
  position:fixed; inset:0; background:rgba(0,0,0,0.3); z-index:99997;
  opacity:0; transition:opacity 0.28s ease; pointer-events:none;
}
#notifBackdrop.notif-backdrop-open { opacity:1; pointer-events:all; }

@supports (padding-bottom:env(safe-area-inset-bottom)) {
  #notificationsPanel { padding-bottom:env(safe-area-inset-bottom); }
}
/* Ensure container scrolls to bottom of content on mobile */
@media (max-width:600px) {
  #notificationsContainer {
    padding-bottom:calc(16px + env(safe-area-inset-bottom));
  }
}