/* Fixed feedback never participates in the page's layout or moves its tools. */
.system-notifications {
  position: fixed;
  top: calc(var(--topbar-height, 56px) + 16px);
  right: 20px;
  z-index: 90;
  display: grid;
  gap: 10px;
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100dvh - var(--topbar-height, 56px) - 32px);
  overflow: auto;
  overscroll-behavior: contain;
  pointer-events: none;
}
.system-notifications:empty { display: none; }
.system-notification {
  --notice-color: var(--theme-link, #93c5fd);
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 15px 12px 15px 16px;
  border: 1px solid var(--theme-border, #334155);
  border-left: 3px solid var(--notice-color);
  border-radius: 13px;
  background: var(--theme-surface, #172033);
  color: var(--theme-text, #f1f5f9);
  box-shadow: 0 8px 28px var(--theme-shadow, #02061744);
  pointer-events: auto;
  animation: notification-arrive 160ms ease-out;
}
.system-notification[data-tone=success] { --notice-color: var(--theme-success, #86efac); }
.system-notification[data-tone=warning] { --notice-color: var(--theme-warning, #facc15); }
.system-notification[data-tone=error] { --notice-color: var(--theme-danger, #fca5a5); }
.system-notification-mark { width: 7px; height: 7px; margin-top: 7px; flex: none; border-radius: 50%; background: var(--notice-color); }
.system-notification p { flex: 1; min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: 14px; line-height: 1.6; }
.system-notification .system-notification-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  margin: -3px -2px -3px 0;
  padding: 5px;
  border: 0;
  border-radius: 7px;
  color: var(--theme-muted, #94a3b8);
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}
.system-notification-close[hidden] { display: none !important; }
.system-notification-close svg { width: 18px; height: 18px; }
.system-notification .system-notification-close:hover { color: var(--theme-text, #f1f5f9); background: var(--theme-hover, #253248); }
.system-notification-close:focus-visible { outline: 2px solid var(--theme-focus, #60a5fa); outline-offset: 2px; }
.guest-screen .system-notifications { top: 20px; }
@keyframes notification-arrive { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@media (max-width: 767px) { .system-notifications { right: 12px; width: calc(100vw - 24px); } }
@media (prefers-reduced-motion: reduce) { .system-notification { animation: none; } }