/* ------------------------------------------------------------------------------
   The notifications nudge — a warm, once-a-week prompt to turn push on, shown
   only while alerts are off. Floats above the bottom dock, centred on desktop
   and a full-width sheet on phones. Withdraws with the rest of the chrome. */
.alerts-nudge {
  position: fixed;
  left: 50%;
  bottom: max(84px, calc(env(safe-area-inset-bottom, 0px) + 84px));
  transform: translateX(-50%);
  z-index: 2147482400;
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}

.alerts-nudge-card {
  pointer-events: auto;
  position: relative;
  padding: 18px 18px 16px;
  border: 1px solid var(--desktop-border);
  border-radius: 18px;
  background: var(--desktop-surface);
  color: var(--desktop-text);
  box-shadow: 0 24px 60px rgba(10, 12, 14, 0.34);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

@media (prefers-reduced-motion: no-preference) {
  .alerts-nudge:not([hidden]) .alerts-nudge-card {
    animation: alerts-nudge-in 320ms cubic-bezier(0.22, 1, 0.36, 1);
  }
}

@keyframes alerts-nudge-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.alerts-nudge-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.alerts-nudge-mark {
  width: 26px;
  height: 26px;
  object-fit: contain;
  border-radius: 7px;
}

.alerts-nudge-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--desktop-muted);
}

.alerts-nudge-title {
  margin: 12px 0 6px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.alerts-nudge-body {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--desktop-muted);
}

.alerts-nudge-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.alerts-nudge-primary {
  flex: 1;
  padding: 9px 14px;
  border: 0;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
  background: linear-gradient(135deg, #00a9bf, #0086ad);
  box-shadow: 0 8px 20px rgba(0, 169, 191, 0.32);
}

.alerts-nudge-primary:disabled {
  opacity: 0.7;
  cursor: default;
}

:root[data-alyssiun-atmosphere="neo"] .alerts-nudge-primary {
  color: #03181d;
  background: linear-gradient(135deg, #00e5ff, #00b8d4);
}

.alerts-nudge-ghost {
  flex: none;
  padding: 9px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--desktop-muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.alerts-nudge-ghost:hover {
  color: var(--desktop-text);
}

.alerts-nudge-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--desktop-muted);
  cursor: pointer;
}

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

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

.alerts-nudge-thanks {
  margin: 12px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: #00a9bf;
}

:root[data-alyssiun-atmosphere="neo"] .alerts-nudge-thanks { color: #00e5ff; }

body[data-spatial-panel-active] .alerts-nudge,
.desktop-shell[data-ui-hidden] .alerts-nudge {
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 640px) {
  .alerts-nudge {
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    width: auto;
  }

  .alerts-nudge-card {
    border-radius: 20px 20px 0 0;
    border-bottom: 0;
    padding-bottom: max(18px, calc(env(safe-area-inset-bottom, 0px) + 14px));
  }

  .alerts-nudge-actions {
    flex-wrap: wrap;
  }

  .alerts-nudge-primary {
    flex: 1 1 100%;
  }

  .alerts-nudge-ghost {
    flex: 1 1 100%;
  }
}