/* SMAU FILE
 * Path: css/smau-notifications.css
 * Owns:
 *   - Notification UI visuals (statusbar dot, toast stack/cards, tray/shade, tray list rows, lock preview, in-app banner baseline)
 *   - Notification surface open/closed mechanics for notify backdrop + notify banner using data-state only
 * Invariants:
 *   - Mechanics truth is data-state ONLY.
 *     - Backdrop truth:
 *         - Open:   [data-state="open"]
 *         - Closed: anything else (including missing attribute)
 *     - Banner truth (canonical in this file):
 *         - Open:   [data-state="compact"] | [data-state="full"]
 *         - Closed: anything else (including missing attribute)
 *   - NO legacy attributes/classes are supported in this file.
 *     - Forbidden: data-variant, .is-*, .hidden, body mechanics classes, etc.
 *   - aria-hidden is mirror-only EXCEPT safety clamp:
 *       - For #notify-backdrop, #notify-banner, and #notify-toast-stack,
 *         aria-hidden="true" must always win (force inert + hidden behavior regardless of data-state)
 *   - Toast stack container must never become a scroll surface; only cards are tappable.
 *   - Tray scroll has exactly one scroller: .notify-shade-scroll (no nested scrolling).
 *   - Closed notification surfaces must be inert and gesture-safe (no dead zones).
 *   - No selector may style outside declared DOM Roots.
 * DOM Roots:
 *   - #notify-dot
 *   - #notify-backdrop, .notify-backdrop
 *   - #notify-banner, .notify-banner
 *   - #notify-toast-stack, .notify-toast-stack
 *   - #notify-list
 *   - #lock-notify, .lock-notify, #screen-lock
 *   - .smau-inapp-notify
 * Touches:
 *   - #notify-backdrop | #notify-toast-stack | #notify-banner | #notify-list | #notify-dot | #lock-notify
 *   - .notify-backdrop | .notify-banner | .notify-toast-stack | .notify-shade-inner | .notify-shade-scroll
 *   - .notify-toast-card | .notify-item | .notify-empty | .lock-notify-* | .smau-inapp-*
 * Exports:
 *   - none
 * Depends:
 *   - Tokens: --smau-color-bad | --os-bad | --smau-sb-offset | --z-notify-backdrop | --z-notify-banner | --z-toast-stack
 *            | --smau-notify-* (optional; all have fallbacks)
 *   - Mirror-only (optional): legacy selectors may exist elsewhere, but this file gates ONLY off:
 *       - #notify-banner[data-state="compact"|"full"]
 *       - #notify-backdrop[data-state="open"]
 * Truth Writes:
 *   - none
 * Allowed:
 *   - Tokenization via CSS vars without appearance change
 *   - Interaction safety fixes inside DOM Roots only
 * No:
 *   - Legacy mechanics (.hidden/.is-*/body classes as mechanics)
 *   - aria-hidden used as mechanics truth (except safety override noted above)
 *   - Style-attribute selectors as mechanics truth
 *   - Gesture-breaking touch-action traps | random z-index escalation
 * Rules:
 *   - Rule 1: If it belongs elsewhere, emit SMAU TODO (don’t implement here).
 *   - Rule 2: Do not truncate. Always output full files.
 *   - Rule 3: Only write selectors under DOM Roots. Outside requires SMAU TODO.
 */

/* ------------------------------------------------------------
 * Local visual tokens
 * ------------------------------------------------------------ */

#notify-dot,
#notify-backdrop,
.notify-backdrop,
#notify-banner,
.notify-banner,
#notify-toast-stack,
.notify-toast-stack,
#notify-list,
#lock-notify,
.lock-notify,
.smau-inapp-notify {
  --smau-notify-ease: cubic-bezier(0.22, 0.84, 0.24, 1);
  --smau-notify-ease-soft: cubic-bezier(0.2, 0.9, 0.15, 1);
  --smau-notify-sheet-highlight: rgba(255, 255, 255, 0.08);
  --smau-notify-sheet-border-strong: rgba(255, 255, 255, 0.08);
  --smau-notify-glass-top: rgba(255, 255, 255, 0.08);
  --smau-notify-glass-bottom: rgba(255, 255, 255, 0.02);
  --smau-notify-shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.36);
  --smau-notify-shadow-mid: 0 18px 48px rgba(0, 0, 0, 0.42);
  --smau-notify-shadow-strong: 0 24px 62px rgba(0, 0, 0, 0.52);
  --smau-notify-divider: rgba(148, 163, 184, 0.1);
  --smau-notify-empty-glow: rgba(99, 102, 241, 0.08);
  --smau-notify-accent-soft: rgba(139, 92, 246, 0.14);
}

/* ------------------------------------------------------------
 * Dot
 * ------------------------------------------------------------ */

#notify-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;

  background:
    radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 38%),
    var(--smau-color-bad, var(--os-bad, #ff4f6b));

  box-shadow:
    0 0 0 2px var(--smau-notify-dot-ring, rgba(2, 6, 23, 0.85)),
    0 0 10px var(--smau-notify-dot-glow, rgba(255, 79, 107, 0.55)),
    0 0 18px rgba(255, 79, 107, 0.24);

  opacity: 1;
  visibility: visible;
  transform: scale(1);

  transition:
    opacity 160ms ease,
    transform 180ms var(--smau-notify-ease),
    visibility 0s linear 0s;
}

#notify-dot[data-state="closed"] {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.82);
  transition:
    opacity 160ms ease,
    transform 180ms var(--smau-notify-ease),
    visibility 0s linear 160ms;
}

#notify-dot[data-sound-mode="silent"] {
  opacity: 0.55;
  filter: saturate(0.85);
}

/* ------------------------------------------------------------
 * Backdrop (tray scrim)
 * Truth: data-state="open" (closed otherwise)
 * Safety: aria-hidden="true" always wins
 * ------------------------------------------------------------ */

#notify-backdrop,
.notify-backdrop {
  position: absolute;
  inset: 0;

  z-index: var(--z-notify-backdrop, 180);

  background:
    radial-gradient(circle at 50% -8%, rgba(99, 102, 241, 0.14), rgba(99, 102, 241, 0) 48%),
    linear-gradient(180deg, rgba(2, 6, 23, 0.18), rgba(0, 0, 0, 0.52));

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity 220ms var(--smau-notify-ease);

  overscroll-behavior: contain;
  -webkit-tap-highlight-color: transparent;

  touch-action: pan-x pan-y pinch-zoom;
}

#notify-backdrop[data-state="open"],
.notify-backdrop[data-state="open"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  touch-action: none;
}

#notify-backdrop[aria-hidden="true"],
.notify-backdrop[aria-hidden="true"] {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  touch-action: pan-x pan-y pinch-zoom !important;
  transition: opacity 220ms var(--smau-notify-ease) !important;
}

/* ------------------------------------------------------------
 * Banner / tray container
 * Truth: data-state="compact"|"full" (closed otherwise)
 * Safety: aria-hidden="true" always wins
 * ------------------------------------------------------------ */

#notify-banner,
.notify-banner {
  position: absolute;
  inset: 0;

  z-index: var(--z-notify-banner, 220);

  padding-top: calc(var(--smau-sb-offset, 30px) + env(safe-area-inset-top));

  pointer-events: none;
  overflow: hidden;

  opacity: 0;
  visibility: hidden;
  transform: translateY(-112%);

  transition:
    transform 320ms var(--smau-notify-ease-soft),
    opacity 220ms var(--smau-notify-ease);

  overscroll-behavior: contain;
  -webkit-tap-highlight-color: transparent;

  touch-action: pan-x pan-y pinch-zoom;
}

#notify-banner[data-state="compact"],
#notify-banner[data-state="full"],
.notify-banner[data-state="compact"],
.notify-banner[data-state="full"] {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;

  pointer-events: auto;
  touch-action: none;
}

#notify-banner[data-state="full"],
.notify-banner[data-state="full"] {
  transition:
    transform 360ms var(--smau-notify-ease-soft),
    opacity 240ms var(--smau-notify-ease);
}

#notify-banner[aria-hidden="true"],
.notify-banner[aria-hidden="true"] {
  transform: translateY(-112%) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  touch-action: pan-x pan-y pinch-zoom !important;

  transition:
    transform 300ms var(--smau-notify-ease-soft),
    opacity 220ms var(--smau-notify-ease) !important;
}

/* ------------------------------------------------------------
 * Tray sheet + scroller (single-scroller rule)
 * ------------------------------------------------------------ */

#notify-banner .notify-shade-inner,
.notify-banner .notify-shade-inner {
  position: relative;

  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    var(
      --smau-notify-sheet-bg,
      linear-gradient(180deg, rgba(15, 23, 42, 0.95), rgba(17, 24, 39, 0.94) 38%, rgba(10, 15, 28, 0.96))
    );

  border-radius: 0 0 var(--smau-notify-sheet-radius, 24px) var(--smau-notify-sheet-radius, 24px);
  padding: var(--smau-notify-sheet-pad, 12px);

  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;

  border: 1px solid var(--smau-notify-sheet-border-strong, rgba(255, 255, 255, 0.08));
  border-top: none;
  box-shadow:
    inset 0 1px 0 var(--smau-notify-sheet-highlight, rgba(255, 255, 255, 0.08)),
    var(--smau-notify-shadow-strong);

  overscroll-behavior: contain;

  pointer-events: auto;
  touch-action: none;

  will-change: transform, opacity;
}

#notify-banner .notify-shade-inner::before,
.notify-banner .notify-shade-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 32%),
    linear-gradient(180deg, var(--smau-notify-glass-top, rgba(255, 255, 255, 0.08)), var(--smau-notify-glass-bottom, rgba(255, 255, 255, 0.02)));
  opacity: 0.9;
}

#notify-banner .notify-shade-inner::after,
.notify-banner .notify-shade-inner::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 54px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 15, 28, 0), rgba(10, 15, 28, 0.24));
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #notify-banner .notify-shade-inner,
  .notify-banner .notify-shade-inner {
    backdrop-filter: blur(var(--smau-notify-sheet-blur, 22px)) saturate(1.15);
    -webkit-backdrop-filter: blur(var(--smau-notify-sheet-blur, 22px)) saturate(1.15);
  }
}

#notify-banner[data-state="compact"] .notify-shade-inner,
.notify-banner[data-state="compact"] .notify-shade-inner {
  max-height: min(52vh, 590px);
}

#notify-banner[data-state="full"] .notify-shade-inner,
.notify-banner[data-state="full"] .notify-shade-inner {
  max-height: min(88vh, 860px);
}

#notify-banner .notify-shade-scroll,
.notify-banner .notify-shade-scroll {
  min-height: 0;
  flex: 1 1 auto;

  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  touch-action: pan-y;
  pointer-events: auto;

  scrollbar-width: none;
  -ms-overflow-style: none;

  padding-bottom: 10px;
}

#notify-banner .notify-shade-scroll::-webkit-scrollbar,
.notify-banner .notify-shade-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

#notify-banner[data-anim="expand"] .notify-shade-inner,
.notify-banner[data-anim="expand"] .notify-shade-inner {
  animation: smauNotifyTrayExpand 300ms var(--smau-notify-ease-soft) both;
}

#notify-banner[data-anim="collapse"] .notify-shade-inner,
.notify-banner[data-anim="collapse"] .notify-shade-inner {
  animation: smauNotifyTrayCollapse 250ms var(--smau-notify-ease) both;
}

@keyframes smauNotifyTrayExpand {
  from {
    transform: translateY(-10px) scale(0.988);
    opacity: 0.92;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes smauNotifyTrayCollapse {
  from {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  to {
    transform: translateY(-6px) scale(0.995);
    opacity: 0.98;
  }
}

/* #notify-list must never be a scroller */
#notify-list {
  display: grid;
  gap: 12px;
  padding: 12px 12px 18px;
  min-height: 0;

  overflow: visible;
  -webkit-overflow-scrolling: auto;
  overscroll-behavior: auto;

  position: relative;
}

#notify-banner[data-state="compact"] #notify-list,
#notify-banner[data-state="full"] #notify-list,
.notify-banner[data-state="compact"] #notify-list,
.notify-banner[data-state="full"] #notify-list {
  touch-action: manipulation;
}

/* ------------------------------------------------------------
 * Toast stack (never scrolls)
 * Toast card truth: data-state="visible"|"floating"|"hiding"
 * Safety: aria-hidden="true" always wins for the stack
 * ------------------------------------------------------------ */

#notify-toast-stack,
.notify-toast-stack {
  position: absolute;
  left: 10px;
  right: 10px;
  top: calc(var(--smau-sb-offset, 30px) + env(safe-area-inset-top) + 10px);

  z-index: var(--z-toast-stack, 240);

  pointer-events: none;

  display: flex;
  flex-direction: column;
  gap: 10px;

  overflow: visible;
  overscroll-behavior: contain;

  touch-action: pan-x pan-y pinch-zoom;
}

#notify-toast-stack[aria-hidden="true"],
.notify-toast-stack[aria-hidden="true"] {
  pointer-events: none !important;
  touch-action: pan-x pan-y pinch-zoom !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

#notify-toast-stack .notify-toast-card,
.notify-toast-stack .notify-toast-card {
  position: relative;

  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  border-radius: var(--smau-notify-toast-radius, 20px);
  padding: var(--smau-notify-toast-pad, 13px 15px);
  margin-top: 0;

  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
    var(--smau-notify-toast-bg, rgba(15, 23, 42, 0.8));

  border: 1px solid var(--smau-notify-toast-border, rgba(148, 163, 184, 0.22));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    var(--smau-notify-shadow-mid);

  opacity: 0;
  transform: translateY(-10px) scale(0.985);

  transition:
    opacity 220ms var(--smau-notify-ease),
    transform 260ms var(--smau-notify-ease-soft),
    border-color 160ms ease,
    background 180ms ease;

  will-change: transform, opacity;
  contain: paint;
}

#notify-toast-stack .notify-toast-card::before,
.notify-toast-stack .notify-toast-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 36%);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #notify-toast-stack .notify-toast-card,
  .notify-toast-stack .notify-toast-card {
    backdrop-filter: blur(var(--smau-notify-toast-blur, 12px)) saturate(1.12);
    -webkit-backdrop-filter: blur(var(--smau-notify-toast-blur, 12px)) saturate(1.12);
  }
}

#notify-toast-stack .notify-toast-card[data-state="visible"],
.notify-toast-stack .notify-toast-card[data-state="visible"] {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#notify-toast-stack .notify-toast-card[data-state="floating"],
.notify-toast-stack .notify-toast-card[data-state="floating"] {
  opacity: 1;
  transform: translateY(2px) scale(1);
}

#notify-toast-stack .notify-toast-card[data-state="hiding"],
.notify-toast-stack .notify-toast-card[data-state="hiding"] {
  opacity: 0;
  transform: translateY(-10px) scale(0.985);
}

#notify-toast-stack .notify-toast-app,
.notify-toast-stack .notify-toast-app {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--smau-notify-toast-app, rgba(148, 163, 184, 0.92));
  margin-bottom: 5px;
}

#notify-toast-stack .notify-toast-title,
.notify-toast-stack .notify-toast-title {
  font-size: 14px;
  font-weight: 780;
  color: var(--smau-notify-toast-title, rgba(241, 245, 249, 0.98));
  line-height: 1.2;
  margin-bottom: 3px;
}

#notify-toast-stack .notify-toast-text,
.notify-toast-stack .notify-toast-text {
  font-size: 13px;
  color: var(--smau-notify-toast-text, rgba(226, 232, 240, 0.88));
  line-height: 1.38;
  max-height: 2.76em;
  overflow: hidden;
}

#notify-toast-stack .notify-toast-actions,
.notify-toast-stack .notify-toast-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

#notify-toast-stack .notify-toast-action,
.notify-toast-stack .notify-toast-action {
  appearance: none;
  -webkit-appearance: none;

  border: 1px solid var(--smau-notify-toast-btn-border, rgba(148, 163, 184, 0.22));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
    var(--smau-notify-toast-btn-bg, rgba(2, 6, 23, 0.38));

  color: var(--smau-notify-toast-btn-text, rgba(241, 245, 249, 0.92));

  border-radius: 999px;
  padding: 7px 12px;

  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;

  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;

  transition:
    transform 120ms ease,
    background 140ms ease,
    border-color 140ms ease,
    opacity 140ms ease,
    box-shadow 160ms ease;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

#notify-toast-stack .notify-toast-action:active,
.notify-toast-stack .notify-toast-action:active {
  transform: scale(0.98);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018)),
    var(--smau-notify-toast-btn-bg-active, rgba(2, 6, 23, 0.52));
  border-color: var(--smau-notify-toast-btn-border-active, rgba(148, 163, 184, 0.3));
}

#notify-toast-stack .notify-toast-action.primary,
.notify-toast-stack .notify-toast-action.primary {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04)),
    var(--smau-notify-toast-btn-primary-bg, rgba(241, 245, 249, 0.12));
  border-color: var(--smau-notify-toast-btn-primary-border, rgba(241, 245, 249, 0.3));
}

#notify-toast-stack .notify-toast-action:focus-visible,
.notify-toast-stack .notify-toast-action:focus-visible {
  outline: var(--smau-notify-focus-ring, 2px solid rgba(241, 245, 249, 0.34));
  outline-offset: 2px;
}

/* ------------------------------------------------------------
 * Tray list rows
 * ------------------------------------------------------------ */

#notify-list .notify-empty {
  position: relative;
  min-height: 68px;

  display: grid;
  place-items: center;

  padding: 18px 14px;
  border-radius: var(--smau-notify-row-radius-sm, 16px);

  background:
    radial-gradient(circle at 50% -10%, var(--smau-notify-empty-glow, rgba(99, 102, 241, 0.08)), rgba(99, 102, 241, 0) 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    var(--smau-notify-empty-bg, rgba(15, 23, 42, 0.35));

  border: 1px solid var(--smau-notify-empty-border, rgba(148, 163, 184, 0.14));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    var(--smau-notify-shadow-soft);

  color: var(--smau-notify-empty-text, rgba(226, 232, 240, 0.78));
  text-align: center;
  font-size: 13px;
  line-height: 1.35;
}

#notify-list .notify-empty::before {
  content: "No notifications";
  display: block;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: inherit;
}

#notify-list .notify-group-header {
  width: 100%;
  text-align: left;

  border-radius: var(--smau-notify-row-radius-md, 18px);
  padding: var(--smau-notify-group-pad, 11px 13px);

  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
    var(--smau-notify-group-bg, rgba(15, 23, 42, 0.38));

  border: 1px solid var(--smau-notify-group-border, rgba(148, 163, 184, 0.14));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 26px rgba(0, 0, 0, 0.2);

  color: var(--smau-notify-group-ink, rgba(241, 245, 249, 0.92));

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  position: relative;
  overflow: hidden;

  transition:
    transform 140ms ease,
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 180ms ease;
}

#notify-list .notify-group-header:active {
  transform: scale(0.995);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.014)),
    var(--smau-notify-group-bg-active, rgba(15, 23, 42, 0.48));
  border-color: var(--smau-notify-group-border-active, rgba(148, 163, 184, 0.18));
}

#notify-list .notify-group-header:focus-visible {
  outline: var(--smau-notify-focus-ring, 2px solid rgba(241, 245, 249, 0.34));
  outline-offset: 2px;
}

#notify-list .notify-group-title {
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--smau-notify-group-title, rgba(226, 232, 240, 0.88));
}

#notify-list .notify-group-count {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;

  min-width: 26px;
  height: 22px;
  padding: 0 8px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
    var(--smau-notify-group-pill-bg, rgba(5, 6, 12, 0.6));
  border: 1px solid var(--smau-notify-group-pill-border, rgba(148, 163, 184, 0.18));
  color: var(--smau-notify-group-pill-text, rgba(241, 245, 249, 0.92));
}

#notify-list .notify-group-header::after {
  content: "";
  width: 8px;
  height: 8px;

  border-right: 2px solid var(--smau-notify-group-caret, rgba(226, 232, 240, 0.65));
  border-bottom: 2px solid var(--smau-notify-group-caret, rgba(226, 232, 240, 0.65));

  transform: rotate(-45deg);
  opacity: 0.8;

  margin-left: 6px;
  flex: 0 0 auto;
  transition: transform 180ms ease, opacity 140ms ease;
}

#notify-list .notify-group-header[aria-expanded="false"]::after {
  transform: rotate(45deg);
  opacity: 0.65;
}

#notify-list .notify-item {
  width: 100%;
  text-align: left;

  border-radius: var(--smau-notify-row-radius-lg, 20px);
  padding: var(--smau-notify-row-pad, 13px 15px);

  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)),
    var(--smau-notify-row-bg, rgba(15, 23, 42, 0.58));

  border: 1px solid var(--smau-notify-row-border, rgba(148, 163, 184, 0.18));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    var(--smau-notify-row-shadow, 0 10px 28px rgba(0, 0, 0, 0.45));

  color: var(--smau-notify-row-ink, rgba(241, 245, 249, 0.96));

  transition:
    transform 140ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;

  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;

  position: relative;
  overflow: hidden;

  will-change: transform, opacity;
  contain: paint;
}

#notify-list .notify-item::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 34%);
  opacity: 0.85;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #notify-list .notify-item {
    backdrop-filter: blur(var(--smau-notify-row-blur, 12px)) saturate(1.08);
    -webkit-backdrop-filter: blur(var(--smau-notify-row-blur, 12px)) saturate(1.08);
  }
}

#notify-list .notify-item:active {
  transform: scale(0.99);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.016)),
    var(--smau-notify-row-bg-active, rgba(15, 23, 42, 0.7));
  border-color: var(--smau-notify-row-border-active, rgba(148, 163, 184, 0.26));
}

#notify-list .notify-item:focus-visible {
  outline: var(--smau-notify-focus-ring, 2px solid rgba(241, 245, 249, 0.38));
  outline-offset: 2px;
}

#notify-list .notify-item[data-notify-app="__system__"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.01)),
    var(--smau-notify-row-bg-system, rgba(15, 23, 42, 0.52));
  border-color: var(--smau-notify-row-border-system, rgba(148, 163, 184, 0.14));
}

#notify-list .notify-item::before {
  content: "Clear";
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;

  padding: 0 14px;
  border-radius: var(--smau-notify-row-radius-lg, 20px);

  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;

  color: var(--smau-notify-clear-text, rgba(241, 245, 249, 0.92));
  background: var(
    --smau-notify-clear-bg,
    linear-gradient(90deg, rgba(239, 68, 68, 0.42), rgba(239, 68, 68, 0.18))
  );

  opacity: 0;

  pointer-events: none;
  z-index: 0;
}

#notify-list .notify-item > * {
  position: relative;
  z-index: 1;
}

#notify-list .notify-item[data-swipe="preview"]::before {
  opacity: 1;
}

#notify-list .notify-item[data-swipe="preview"][data-swipe-dir="left"]::before {
  justify-content: flex-end;
  background: var(
    --smau-notify-clear-bg-reverse,
    linear-gradient(270deg, rgba(239, 68, 68, 0.42), rgba(239, 68, 68, 0.18))
  );
}

#notify-list .notify-item[data-swipe="preview"][data-swipe-dir="right"]::before {
  justify-content: flex-start;
}

#notify-list .notify-item-app {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--smau-notify-row-app, rgba(148, 163, 184, 0.9));
  margin-bottom: 5px;
}

#notify-list .notify-item-title {
  font-size: 14px;
  font-weight: 780;
  color: var(--smau-notify-row-title, rgba(241, 245, 249, 0.98));
  line-height: 1.2;
  margin-bottom: 3px;
}

#notify-list .notify-item-text {
  font-size: 13px;
  color: var(--smau-notify-row-text, rgba(226, 232, 240, 0.86));
  line-height: 1.38;
}

/* Compact mode: clamp body + show +N pill if present */
#notify-banner[data-state="compact"] #notify-list .notify-item-text,
.notify-banner[data-state="compact"] #notify-list .notify-item-text {
  max-height: 2.76em;
  overflow: hidden;
}

#notify-banner[data-state="compact"] #notify-list .notify-item[data-extra],
.notify-banner[data-state="compact"] #notify-list .notify-item[data-extra] {
  padding-right: 56px;
}

#notify-banner[data-state="compact"] #notify-list .notify-item[data-extra]::after,
.notify-banner[data-state="compact"] #notify-list .notify-item[data-extra]::after {
  content: "+" attr(data-extra);
  position: absolute;
  top: 12px;
  right: 12px;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;

  padding: 4px 8px;
  border-radius: 999px;

  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018)),
    var(--smau-notify-row-pill-bg, rgba(5, 6, 12, 0.65));

  border: 1px solid var(--smau-notify-row-pill-border, rgba(148, 163, 184, 0.22));
  color: var(--smau-notify-row-pill-text, rgba(241, 245, 249, 0.92));

  pointer-events: none;
  z-index: 2;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

/* Full mode: slightly roomier */
#notify-banner[data-state="full"] #notify-list,
.notify-banner[data-state="full"] #notify-list {
  gap: 13px;
}

#notify-banner[data-state="full"] #notify-list .notify-item,
.notify-banner[data-state="full"] #notify-list .notify-item {
  padding: var(--smau-notify-row-pad-full, 15px 17px);
  border-radius: var(--smau-notify-row-radius-full, 22px);

  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.014)),
    var(--smau-notify-row-bg-full, rgba(15, 23, 42, 0.64));

  border-color: var(--smau-notify-row-border-full, rgba(148, 163, 184, 0.22));

  transition:
    transform 160ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

#notify-banner[data-state="full"] #notify-list .notify-item-text,
.notify-banner[data-state="full"] #notify-list .notify-item-text {
  max-height: none;
  overflow: visible;
  color: var(--smau-notify-row-text-full, rgba(226, 232, 240, 0.9));
}

/* ------------------------------------------------------------
 * Lock preview (visual)
 * ------------------------------------------------------------ */

#lock-notify,
.lock-notify {
  margin-bottom: 18px;
  color: var(--smau-notify-lock-ink, rgba(255, 255, 255, 0.8));
}

#lock-notify[data-state="has"],
.lock-notify[data-state="has"] {
  color: var(--smau-notify-lock-ink-strong, rgba(255, 255, 255, 0.9));
}

#lock-notify .lock-notify-app,
.lock-notify .lock-notify-app {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--smau-notify-lock-app, rgba(255, 255, 255, 0.55));
}

#lock-notify .lock-notify-text,
.lock-notify .lock-notify-text {
  font-size: 13px;
  color: var(--smau-notify-lock-text, rgba(255, 255, 255, 0.9));
  margin-top: 4px;
}

#screen-lock .lock-notify {
  width: min(92%, 380px);

  border-radius: var(--smau-notify-lock-radius, 20px);
  padding: var(--smau-notify-lock-pad, 13px 15px);

  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.014)),
    var(--smau-notify-lock-bg, rgba(15, 23, 42, 0.62));

  border: 1px solid var(--smau-notify-lock-border, rgba(148, 163, 184, 0.18));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    var(--smau-notify-lock-shadow, 0 10px 30px rgba(0, 0, 0, 0.45));
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #screen-lock .lock-notify {
    backdrop-filter: blur(var(--smau-notify-lock-blur, 12px)) saturate(1.08);
    -webkit-backdrop-filter: blur(var(--smau-notify-lock-blur, 12px)) saturate(1.08);
  }
}

#screen-lock .lock-notify[data-state="has"] {
  border-color: var(--smau-notify-lock-border-strong, rgba(148, 163, 184, 0.26));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.016)),
    var(--smau-notify-lock-bg-strong, rgba(15, 23, 42, 0.7));
}

/* ------------------------------------------------------------
 * In-app banner (visual + data-state open/closed)
 * ------------------------------------------------------------ */

.smau-inapp-notify {
  position: absolute;
  left: 10px;
  right: 10px;
  top: calc(var(--smau-sb-offset, 30px) + env(safe-area-inset-top) + 10px);

  z-index: var(--z-toast-stack, 240);

  border-radius: var(--smau-notify-inapp-radius, 18px);
  padding: var(--smau-notify-inapp-pad, 12px 14px);

  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
    var(
      --smau-notify-inapp-bg,
      linear-gradient(135deg, rgba(30, 41, 59, 0.92) 0%, rgba(15, 23, 42, 0.96) 100%)
    );

  border: 1px solid var(--smau-notify-inapp-border, rgba(71, 85, 105, 0.35));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    var(--smau-notify-inapp-shadow, 0 6px 22px rgba(0, 0, 0, 0.55));

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px) scale(0.988);

  transition:
    opacity 220ms var(--smau-notify-ease),
    transform 280ms var(--smau-notify-ease-soft),
    box-shadow 180ms ease;

  touch-action: pan-x pan-y pinch-zoom;
  -webkit-tap-highlight-color: transparent;

  will-change: transform, opacity;
  contain: paint;
}

.smau-inapp-notify[data-state="open"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);

  transition:
    opacity 220ms var(--smau-notify-ease),
    transform 280ms var(--smau-notify-ease-soft);

  touch-action: manipulation;
}

.smau-inapp-notify .smau-inapp-app {
  font-size: 11px;
  font-weight: 750;
  color: var(--smau-notify-inapp-app, rgba(148, 163, 184, 0.95));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.smau-inapp-notify .smau-inapp-title {
  font-size: 14px;
  font-weight: 760;
  color: var(--smau-notify-inapp-title, rgba(241, 245, 249, 0.98));
  margin-bottom: 3px;
  line-height: 1.25;
}

.smau-inapp-notify .smau-inapp-text {
  font-size: 13px;
  color: var(--smau-notify-inapp-text, rgba(203, 213, 225, 0.95));
  line-height: 1.38;
}

/* ------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  #notify-dot,
  #notify-backdrop,
  .notify-backdrop,
  #notify-banner,
  .notify-banner,
  #notify-toast-stack .notify-toast-card,
  .notify-toast-stack .notify-toast-card,
  #notify-list .notify-item,
  #notify-list .notify-group-header,
  .smau-inapp-notify,
  #notify-toast-stack .notify-toast-action,
  .notify-toast-stack .notify-toast-action {
    transition-duration: 0.001ms !important;
  }

  #notify-banner[data-anim="expand"] .notify-shade-inner,
  .notify-banner[data-anim="expand"] .notify-shade-inner,
  #notify-banner[data-anim="collapse"] .notify-shade-inner,
  .notify-banner[data-anim="collapse"] .notify-shade-inner {
    animation: none !important;
    transform: none !important;
  }
}