/* ══════════════════════════════════════════════════
   Dark Toast — non-blocking slide-down notification
   Matches status-modal design system
   ══════════════════════════════════════════════════ */

.dt-toast {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  z-index: 100000;
  width: min(94%, 480px);
  padding: 14px 18px 14px 16px;
  border-radius: 0 0 16px 16px;
  font-family: 'Outfit', 'Cairo', sans-serif;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  opacity: 0;
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  /* Dark surface */
  background: #252249;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-top: none;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.2);
}

[dir="rtl"] .dt-toast {
  font-family: 'Cairo', 'Outfit', sans-serif;
}

.dt-toast.dt--visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ── Leaving animation ── */
.dt-toast.dt--leaving {
  transform: translateX(-50%) translateY(-100%);
  opacity: 0;
}

/* ── Icon ring ── */
.dt-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dt-icon svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* ── Message text ── */
.dt-text {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: #F1F0F7;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

/* ── Close X ── */
.dt-close {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease;
}

.dt-close:hover {
  background: rgba(255, 255, 255, 0.12);
}

.dt-close svg {
  width: 12px;
  height: 12px;
  stroke: #9896B8;
  stroke-width: 2.5;
  stroke-linecap: round;
  fill: none;
}

/* ── Progress bar ── */
.dt-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 0 0 16px 16px;
  transition: width linear;
}

/* ── Variant: error (rose) ── */
.dt-toast.dt--error .dt-icon {
  background: rgba(244, 63, 94, 0.12);
}

.dt-toast.dt--error .dt-icon svg {
  stroke: #F43F5E;
}

.dt-toast.dt--error .dt-progress {
  background: #F43F5E;
}

/* ── Variant: success (emerald) ── */
.dt-toast.dt--success .dt-icon {
  background: rgba(16, 185, 129, 0.12);
}

.dt-toast.dt--success .dt-icon svg {
  stroke: #10B981;
}

.dt-toast.dt--success .dt-progress {
  background: #10B981;
}

/* ── Variant: warning (amber) ── */
.dt-toast.dt--warning .dt-icon {
  background: rgba(245, 158, 11, 0.12);
}

.dt-toast.dt--warning .dt-icon svg {
  stroke: #F59E0B;
}

.dt-toast.dt--warning .dt-progress {
  background: #F59E0B;
}

/* ── Variant: info (purple/brand) ── */
.dt-toast.dt--info .dt-icon {
  background: rgba(109, 74, 232, 0.12);
}

.dt-toast.dt--info .dt-icon svg {
  stroke: #6D4AE8;
}

.dt-toast.dt--info .dt-progress {
  background: #6D4AE8;
}

/* ── Safe area for notched devices ── */
@supports (padding-top: env(safe-area-inset-top)) {
  .dt-toast {
    padding-top: calc(14px + env(safe-area-inset-top));
  }
}