#toast.reef-toast,
p#toast.reef-toast {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  z-index: 10200;
  transform: translate(-50%, 16px);
  margin: 0;
  padding: 0;
  max-width: min(440px, calc(100vw - 32px));
  border-radius: 14px;
  font: 600 14px/1.45 Manrope, sans-serif;
  letter-spacing: 0.01em;
  text-align: left;
  color: #e8f2f6;
  background: #0a3548f0;
  border: 1px solid #ffffff24;
  box-shadow: 0 12px 40px #00131c55, 0 0 0 1px #ffffff0a inset;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.28s ease,
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.28s;
}

#toast.reef-toast .reef-toast__inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px 12px 14px;
}

#toast.reef-toast .reef-toast__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin-top: 1px;
  border-radius: 10px;
  background: #ffffff14;
  color: var(--mint, #6adfc4);
}

#toast.reef-toast .reef-toast__icon .icon {
  width: 17px;
  height: 17px;
  margin: 0 !important;
  flex: 0 0 17px;
  stroke-width: 2;
}

#toast.reef-toast .reef-toast__text {
  flex: 1;
  min-width: 0;
  padding-top: 5px;
  line-height: 1.45;
}

#toast.reef-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

#toast.reef-toast.is-leaving {
  opacity: 0;
  transform: translate(-50%, 10px);
}

#toast.reef-toast--success .reef-toast__icon {
  background: color-mix(in srgb, var(--mint, #6adfc4) 22%, transparent);
  color: #9ef0dc;
}

#toast.reef-toast--success {
  background: color-mix(in srgb, #124c43 88%, #0a3548);
  border-color: color-mix(in srgb, var(--mint, #6adfc4) 45%, #ffffff30);
  color: #d4fff2;
}

#toast.reef-toast--error .reef-toast__icon {
  background: #ffffff18;
  color: #ffc9c9;
}

#toast.reef-toast--error {
  background: color-mix(in srgb, #612b34 90%, #0a3548);
  border-color: #e8989c55;
  color: #ffe8e8;
}

[data-theme='light'] #toast.reef-toast {
  background: #075faef2;
  color: #fff;
  border-color: #ffffff40;
  box-shadow: 0 10px 32px #00336a2e;
}

[data-theme='light'] #toast.reef-toast .reef-toast__icon {
  background: #ffffff22;
  color: #fff;
}

[data-theme='light'] #toast.reef-toast--success {
  background: #0a6b3af0;
  border-color: #8fd4a888;
}

[data-theme='light'] #toast.reef-toast--success .reef-toast__icon {
  background: #ffffff28;
}

[data-theme='light'] #toast.reef-toast--error {
  background: #8b3035f0;
  border-color: #e8b4b888;
}

@media (prefers-reduced-motion: reduce) {
  #toast.reef-toast,
  #toast.reef-toast.is-visible,
  #toast.reef-toast.is-leaving {
    transition: opacity 0.15s ease;
    transform: translate(-50%, 0);
  }
}

#logs .log-dive-entry.is-removing {
  opacity: 0;
  transform: translateX(10px);
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  overflow: hidden;
  border-bottom-color: transparent;
  pointer-events: none;
  transition:
    opacity 0.26s ease,
    transform 0.26s ease,
    max-height 0.32s ease,
    padding 0.32s ease,
    margin 0.32s ease,
    border-color 0.26s ease;
}

@media (prefers-reduced-motion: reduce) {
  #logs .log-dive-entry.is-removing {
    transition: opacity 0.12s ease;
    transform: none;
    max-height: none;
  }
}