.otl-toast-region {
  position: fixed;
  right: 18px;
  bottom: max(
    18px,
    env(safe-area-inset-bottom)
  );
  z-index: 12000;

  display: grid;
  gap: 10px;

  width: min(
    390px,
    calc(100vw - 36px)
  );

  pointer-events: none;
}

.otl-toast {
  --toast-accent: 96, 165, 250;

  display: grid;
  grid-template-columns:
    auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 11px;

  width: 100%;
  padding: 12px 12px 12px 13px;

  border:
    1px solid
    rgba(var(--toast-accent), 0.28);
  border-radius: 12px;

  color: #e2e8f0;

  background:
    radial-gradient(
      circle at 0% 50%,
      rgba(var(--toast-accent), 0.08),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(15, 23, 42, 0.98),
      rgba(8, 15, 29, 0.98)
    );

  box-shadow:
    inset 0 1px 0
      rgba(255, 255, 255, 0.035),
    0 14px 36px
      rgba(0, 0, 0, 0.34),
    0 0 0 1px
      rgba(var(--toast-accent), 0.025);

  pointer-events: auto;

  animation:
    otl-toast-enter
    180ms
    ease-out
    both;
}

.otl-toast--success {
  --toast-accent: 74, 222, 128;
}

.otl-toast--info {
  --toast-accent: 96, 165, 250;
}

.otl-toast--warning {
  --toast-accent: 251, 191, 36;
}

.otl-toast--error {
  --toast-accent: 248, 113, 113;
}

/*
  The multiplication-sign glyph sits slightly low in many system
  fonts. Render it independently so it stays visually centered in
  the circular error icon, including on multi-line toasts.
*/
.otl-toast--error .otl-toast-icon {
  font-size: 0;
}

.otl-toast--error .otl-toast-icon::before {
  content: "×";

  position: absolute;
  inset: 0;

  display: grid;
  place-items: center;

  color: rgb(var(--toast-accent));

  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;

  transform: translateY(-0.75px);
}

.otl-toast.is-leaving {
  animation:
    otl-toast-leave
    140ms
    ease-in
    both;
}

.otl-toast-icon {
  position: relative;

  display: grid;
  place-items: center;

  width: 25px;
  height: 25px;

  margin-top: 0;

  border:
    1px solid
    rgba(var(--toast-accent), 0.30);
  border-radius: 999px;

  color:
    rgb(var(--toast-accent));

  background:
    rgba(var(--toast-accent), 0.09);

  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1;
}

.otl-toast-body {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.otl-toast-message {
  color: #e2e8f0;

  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.48;

  overflow-wrap: anywhere;
}

.otl-toast-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.otl-toast-actions[hidden] {
  display: none;
}

.otl-toast-action {
  padding: 0;

  border: 0;

  color:
    rgb(var(--toast-accent));

  background: transparent;

  cursor: pointer;

  font: inherit;
  font-size: 0.75rem;
  font-weight: 800;
}

.otl-toast-action:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.otl-toast-action:focus-visible,
.otl-toast-close:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.otl-toast-close {
  display: grid;
  place-items: center;

  width: 27px;
  height: 27px;

  margin: -2px -2px 0 0;
  padding: 0;

  border: 0;
  border-radius: 7px;

  color: #64748b;
  background: transparent;

  cursor: pointer;

  font-size: 1rem;
  line-height: 1;

  transition:
    color 140ms ease,
    background 140ms ease;
}

.otl-toast-close:hover {
  color: #cbd5e1;
  background:
    rgba(148, 163, 184, 0.09);
}

@keyframes otl-toast-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes otl-toast-leave {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(4px);
  }
}

@media (max-width: 620px) {
  .otl-toast-region {
    right: 12px;
    bottom: max(
      12px,
      env(safe-area-inset-bottom)
    );

    width:
      calc(100vw - 24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .otl-toast,
  .otl-toast.is-leaving {
    animation: none;
  }

  .otl-toast-close {
    transition: none;
  }
}


/*
  Legacy notification surfaces are retained as compatibility sinks.
  Existing feature code can continue writing to them, while
  notification-router.js transfers those writes into global toasts.

  Persistent status/state UI does not match these selectors.
*/
[id$="message" i],
[id$="notice" i],
[id$="alert" i],
[class*="-message" i][role="status"],
[class*="-message" i][role="alert"],
[class*="-message" i][aria-live],
[class*="-notice" i][role="status"],
[class*="-notice" i][role="alert"],
[class*="-notice" i][aria-live],
[class*="-alert" i][role="status"],
[class*="-alert" i][role="alert"],
[class*="-alert" i][aria-live] {
  display: none !important;
}