/* =====================================================================
   MIND LINKER — Notification Center + Bell + in-app alert overlay
   alerts.css 의 .al 다이얼로그를 실제 앱에서 띄우는 레이어.
   ===================================================================== */

/* ---- Bell button + unread badge ---- */
.bell-wrap { position: relative; }
.bell-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  background: var(--coral); color: oklch(99% 0.01 30);
  font: var(--fw-mono) 10px/19px var(--font-mono); text-align: center;
  box-shadow: 0 2px 6px oklch(63.5% 0.166 27.5 / .45), 0 0 0 2px var(--surface);
  pointer-events: none;
}
.icon-btn.bell-on { border-color: var(--green-300); color: var(--green-600); }

/* ---- In-app alert overlay (fixed, centered) ---- */
.al-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: oklch(20.7% 0.03 172.2 / 0.46);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center; padding: 22px;
  animation: alFade .24s ease;
}
.al-overlay.closing { animation: alFade .22s ease reverse forwards; }
@keyframes alFade { from { opacity: 0; } to { opacity: 1; } }
.al-overlay .al { animation: alPop .34s cubic-bezier(.22,.85,.26,1); }
.al-overlay.closing .al { animation: alPopOut .22s ease forwards; }
@keyframes alPop { from { transform: translateY(12px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes alPopOut { to { transform: translateY(8px) scale(.98); opacity: 0; } }

/* ---- Notification Center scrim ---- */
.nc-scrim {
  position: fixed; inset: 0; z-index: 70;
  background: oklch(20.7% 0.03 172.2 / 0.40);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: alFade .24s ease;
}
.nc-scrim.closing { animation: alFade .22s ease reverse forwards; }
@media (min-width: 768px) { .nc-scrim { align-items: flex-start; justify-content: flex-end; padding: 78px 24px 24px; } }

/* ---- Panel ---- */
.nc-panel {
  width: 100%; max-width: 560px;
  background: var(--bg); color: var(--ink-2);
  border-radius: 28px 28px 0 0;
  border: 1px solid var(--line-soft); border-bottom: none;
  box-shadow: var(--sh-3), 0 -10px 50px oklch(25% 0.043 169.2 / 0.28);
  display: flex; flex-direction: column; max-height: 82dvh; overflow: hidden;
  animation: ncUp .36s cubic-bezier(.22,.85,.26,1);
}
.nc-scrim.closing .nc-panel { animation: ncDown .26s cubic-bezier(.5,0,.7,.3) forwards; }
@keyframes ncUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes ncDown { to { transform: translateY(100%); } }
@media (min-width: 768px) {
  .nc-panel {
    width: 400px; border-radius: 24px; border-bottom: 1px solid var(--line-soft);
    max-height: min(640px, 78dvh);
    box-shadow: var(--sh-3), 0 30px 70px oklch(25% 0.043 169.2 / 0.34);
    animation: ncDrop .3s cubic-bezier(.22,.85,.26,1);
    transform-origin: top right;
  }
  .nc-scrim.closing .nc-panel { animation: ncDropOut .22s ease forwards; }
}
@keyframes ncDrop { from { transform: translateY(-10px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ncDropOut { to { transform: translateY(-8px) scale(.98); opacity: 0; } }

.nc-grip { width: 42px; height: 5px; border-radius: 999px; background: var(--line); margin: 11px auto 0; flex: 0 0 auto; }
@media (min-width: 768px) { .nc-grip { display: none; } }

.nc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px; flex: 0 0 auto;
  border-bottom: 1px solid var(--line-soft);
}
.nc-head__l { display: flex; align-items: baseline; gap: 9px; }
.nc-head__title { font: var(--fw-display) 20px/1 var(--font-display); letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.nc-head__count { font: var(--fw-mono) 11px/1 var(--font-mono); color: var(--coral); white-space: nowrap; }
.nc-readall {
  border: none; background: transparent; cursor: pointer; padding: 7px 11px; border-radius: 10px;
  font: var(--fw-strong) 13px/1 var(--font-body); color: var(--green-600); white-space: nowrap; flex: 0 0 auto;
  transition: background .16s;
}
.nc-readall:hover { background: var(--green-50); }
.nc-readall:disabled { color: var(--ink-3); cursor: default; opacity: .5; }
[data-theme="dark"] .nc-readall:hover { background: oklch(40.9% 0.078 164.6 / .3); }

.nc-list { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 4px; }

/* ---- Notification row ---- */
.nc-item {
  display: flex; gap: 13px; align-items: flex-start; text-align: left;
  width: 100%; padding: 13px 12px; border-radius: 16px; border: none; cursor: pointer;
  background: transparent; position: relative;
  transition: background .16s ease;
}
.nc-item:hover { background: var(--surface-2); }
.nc-item--unread { background: color-mix(in srgb, var(--green-50) 70%, transparent); }
.nc-item--unread:hover { background: var(--green-50); }
[data-theme="dark"] .nc-item--unread { background: oklch(40.9% 0.078 164.6 / .22); }
[data-theme="dark"] .nc-item:hover { background: var(--surface-2); }

.nc-ic {
  width: 42px; height: 42px; border-radius: 14px; flex: 0 0 auto;
  display: grid; place-items: center;
}
.nc-ic svg { width: 21px; height: 21px; }
.nc-ic--grad   { background: var(--grad-signature); color: oklch(29.8% 0.055 171.9); }
.nc-ic--teal   { background: var(--teal-100); color: var(--teal-600); }
.nc-ic--cyan   { background: var(--cyan-100); color: var(--cyan-600); }
.nc-ic--green  { background: var(--green-100); color: var(--green-600); }
.nc-ic--danger { background: var(--coral-soft); color: var(--coral); }
[data-theme="dark"] .nc-ic--teal  { background: oklch(38.5% 0.061 203 / .5); color: var(--teal-200); }
[data-theme="dark"] .nc-ic--cyan  { background: oklch(38.8% 0.072 236.1 / .5); color: var(--cyan-200); }
[data-theme="dark"] .nc-ic--green { background: oklch(40.9% 0.078 164.6 / .5); color: var(--green-200); }

.nc-body { flex: 1; min-width: 0; padding-top: 1px; }
.nc-title {
  font: var(--fw-strong) 14.5px/1.3 var(--font-body); color: var(--ink);
  word-break: keep-all; padding-right: 14px;
}
.nc-desc {
  font: var(--fw-body) 13px/1.45 var(--font-body); color: var(--ink-3);
  margin-top: 3px; word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nc-time { font: var(--fw-mono) 10.5px/1 var(--font-mono); color: var(--ink-3); margin-top: 7px; letter-spacing: .02em; }
.nc-dot {
  position: absolute; top: 17px; right: 14px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--coral); flex: 0 0 auto;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral) 22%, transparent);
}

/* ---- Empty state ---- */
.nc-empty { padding: 48px 24px 56px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.nc-empty__seal { width: 60px; height: 60px; border-radius: 20px; display: grid; place-items: center; background: var(--green-100); color: var(--green-500); }
.nc-empty__seal svg { width: 27px; height: 27px; }
.nc-empty__t { font: var(--fw-heading) 16px/1.3 var(--font-display); color: var(--ink); }
.nc-empty__s { font: var(--fw-body) 13.5px/1.5 var(--font-body); color: var(--ink-3); max-width: 26ch; }