/* Notification bell and panel. The bell reuses .desktop-display-control so it
   matches the chrome it sits in; only the badge, panel and list are new.
   Electric cyan is the ALYSSIUN energy accent and is spent on exactly one thing
   here: something that is live right now. */

/* Sits immediately left of .desktop-display-controls and carries the same
   chrome. The offset is that toolbar's own width: 40px button + 2 × 5px padding,
   plus an 8px gap. Being outside it is the point — the panel drops from the
   bell's bottom edge, and inside the toolbar that lands on the fullscreen
   button. */
/* The wrapper deliberately sets no z-index and no backdrop-filter: either would
   make it a stacking context and trap the panel underneath the windows. It
   carries position only, so the bell paints at desktop level (the window layer
   at z-index 1 covers it, like the rest of the chrome) while the panel is free
   to rise above every window. All the chrome lives on the button instead. */
.desktop-notifications {
  position: absolute;
  top: max(12px, env(safe-area-inset-top, 0px));
  right: calc(max(12px, env(safe-area-inset-right, 0px)) + 58px);
  display: flex;
}

.notification-bell.desktop-display-control {
  width: 50px;
  height: 50px;
  border: 1px solid var(--desktop-border);
  border-radius: 13px;
  background: var(--desktop-surface);
  box-shadow: 0 9px 24px rgba(26, 29, 28, 0.14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* A focused 3D window owns the view; this chrome withdraws with the rest. */
body[data-spatial-panel-active] .desktop-notifications {
  visibility: hidden;
  pointer-events: none;
}

.desktop-shell[data-ui-hidden] .desktop-notifications {
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 640px) {
  .desktop-notifications {
    top: max(8px, env(safe-area-inset-top, 0px));
    /* 44px control + 10px padding + 8px gap at this breakpoint. */
    right: calc(max(8px, env(safe-area-inset-right, 0px)) + 62px);
  }
}

.notification-bell {
  position: relative;
}

.notification-bell svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notification-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 8px;
  background: #00a9bf;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

:root[data-alyssiun-atmosphere="neo"] .notification-badge {
  background: #00e5ff;
  color: #04161a;
}

/* An author `display` beats the UA's [hidden] { display: none }, so the panel
   needs this explicitly or it can never be dismissed. */
.notification-panel[hidden] {
  display: none;
}

/* Above every window on purpose: a person working inside a maximized app still
   needs to see that an event just went live. Sits just under the dialog tier so
   a modal still wins. */
.notification-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 2147482500;
  width: min(340px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--desktop-border);
  border-radius: 13px;
  background: var(--desktop-surface);
  color: var(--desktop-text);
  box-shadow: var(--desktop-shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.notification-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--desktop-border);
}

.notification-panel-head h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.notification-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.notification-clear {
  border: 0;
  padding: 0;
  background: none;
  color: var(--desktop-muted);
  font-size: 11px;
  cursor: pointer;
}

.notification-clear:hover {
  color: var(--desktop-text);
}

.notification-close {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--desktop-muted);
  cursor: pointer;
}

.notification-close:hover {
  background: var(--desktop-surface-strong);
  color: var(--desktop-text);
}

.notification-close svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.notification-panel-body {
  max-height: min(420px, 60vh);
  overflow-y: auto;
}

/* The toast opens exactly where the panel would, so it reads as the bell opening
   itself. Above every window for the same reason the panel is: a person inside a
   maximized app is precisely who needs telling. */
.desktop-notification-toast {
  position: absolute;
  top: calc(max(12px, env(safe-area-inset-top, 0px)) + 58px);
  right: calc(max(12px, env(safe-area-inset-right, 0px)) + 58px);
  z-index: 2147482500;
  width: min(340px, calc(100vw - 32px));
  border-radius: 13px;
  box-shadow: var(--desktop-shadow);
}

.desktop-notification-toast[hidden] {
  display: none;
}

body[data-spatial-panel-active] .desktop-notification-toast {
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 640px) {
  .desktop-notification-toast {
    top: calc(max(8px, env(safe-area-inset-top, 0px)) + 62px);
    right: calc(max(8px, env(safe-area-inset-right, 0px)) + 62px);
  }
}

/* The toast reuses the card, so give it the panel's surface rather than the
   list's — standing on its own it needs its own ground. */
.desktop-notification-toast .notification-card,
.desktop-notification-toast .notification-item {
  background: var(--desktop-surface);
  border: 1px solid var(--desktop-border);
  border-radius: 13px;
  overflow: hidden;
}

.desktop-notification-toast .notification-item {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: 10px;
  padding: 13px 14px;
}

.notification-toast-close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(10, 12, 14, 0.55);
  color: #ffffff;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.notification-toast-close:hover {
  background: rgba(10, 12, 14, 0.78);
}

.notification-toast-close svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

@media (prefers-reduced-motion: no-preference) {
  .desktop-notification-toast:not([hidden]) {
    animation: notification-toast-in 260ms cubic-bezier(0.22, 1, 0.36, 1);
  }
}

@keyframes notification-toast-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

.notification-empty {
  margin: 0;
  padding: 26px 16px;
  color: var(--desktop-muted);
  font-size: 12.5px;
  text-align: center;
}