/* ==========================================================================
   FlowByAZ - Universal Neumorphic Soft UI Notification & Dialog System
   ========================================================================== */

/* Toast Container (Centered at top) */
.nm-toast-container {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  pointer-events: none;
  max-width: 90vw;
}

/* Neumorphic Toast Pill */
.nm-toast {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #ebf0f7;
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  box-shadow: 10px 10px 26px #cad4e4, -10px -10px 26px #ffffff;
  border-radius: 9999px;
  padding: 10px 22px 10px 14px;
  min-width: 260px;
  max-width: 520px;
  animation: nmToastSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: opacity 0.25s ease, transform 0.25s ease;
  cursor: pointer;
  user-select: none;
}

.nm-toast.nm-toast-hiding {
  opacity: 0;
  transform: translateY(-12px) scale(0.95);
}

@keyframes nmToastSlideIn {
  from {
    opacity: 0;
    transform: translateY(-24px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Toast Icon Badge */
.nm-toast-icon-badge {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  background: #ebf0f7;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 3px 3px 8px #cad4e4, -3px -3px 8px #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

.nm-toast.success .nm-toast-icon-badge {
  background: #dcfce7;
  color: #15803d;
}

.nm-toast.info .nm-toast-icon-badge,
.nm-toast.copy .nm-toast-icon-badge {
  background: #ede9fe;
  color: #7c3aed;
}

.nm-toast.warning .nm-toast-icon-badge {
  background: #fef3c7;
  color: #b45309;
}

.nm-toast.error .nm-toast-icon-badge {
  background: #fee2e2;
  color: #b91c1c;
}

/* Toast Text */
.nm-toast-text {
  flex: 1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
  word-break: break-word;
}

/* Toast Dismiss Button */
.nm-toast-close-btn {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 1.15rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
}

.nm-toast-close-btn:hover {
  color: #e11d48;
}

/* ==========================================================================
   NEUMORPHIC MODAL DIALOG (ALERT / CONFIRM / PROMPT)
   ========================================================================== */
.nm-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.38);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 999999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  animation: nmOverlayFadeIn 0.25s ease forwards;
}

@keyframes nmOverlayFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.nm-dialog-card {
  background: #ebf0f7;
  border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow: 18px 18px 45px #cad4e4, -18px -18px 45px #ffffff;
  border-radius: 28px;
  padding: 34px 36px 30px;
  max-width: 460px;
  width: 100%;
  text-align: center;
  position: relative;
  animation: nmDialogPopIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes nmDialogPopIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(16px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Dialog Icon */
.nm-dialog-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #ebf0f7;
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  box-shadow: 6px 6px 16px #cad4e4, -6px -6px 16px #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.85rem;
}

.nm-dialog-icon.success {
  background: #dcfce7;
  color: #15803d;
}

.nm-dialog-icon.info {
  background: #ede9fe;
  color: #7c3aed;
}

.nm-dialog-icon.warning {
  background: #fef3c7;
  color: #b45309;
}

.nm-dialog-icon.error {
  background: #fee2e2;
  color: #b91c1c;
}

/* Dialog Typography */
.nm-dialog-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1.35rem;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.3px;
  margin-bottom: 10px;
}

.nm-dialog-message {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.94rem;
  font-weight: 500;
  color: #475569;
  line-height: 1.55;
  margin-bottom: 24px;
  word-break: break-word;
}

/* Dialog Prompt Input */
.nm-dialog-input-wrap {
  margin-bottom: 24px;
  text-align: left;
}

.nm-dialog-input {
  width: 100%;
  padding: 13px 18px;
  background: #ebf0f7;
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  border-radius: 14px;
  box-shadow: inset 4px 4px 9px #cad4e4, inset -4px -4px 9px #ffffff;
  color: #0f172a;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  outline: none;
}

.nm-dialog-input:focus {
  box-shadow: inset 5px 5px 11px #cad4e4, inset -5px -5px 11px #ffffff, 0 0 0 2px rgba(124, 58, 237, 0.35);
}

/* Dialog Actions Row */
.nm-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.nm-btn-primary {
  flex: 1;
  padding: 13px 26px;
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  color: #ffffff;
  border: none;
  border-radius: 9999px;
  font-family: inherit;
  font-size: 0.94rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.35);
  transition: all 0.2s ease;
}

.nm-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(124, 58, 237, 0.5);
}

.nm-btn-secondary {
  flex: 1;
  padding: 13px 24px;
  background: #ebf0f7;
  color: #64748b;
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  box-shadow: 4px 4px 10px #cad4e4, -4px -4px 10px #ffffff;
  border-radius: 9999px;
  font-family: inherit;
  font-size: 0.94rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nm-btn-secondary:hover {
  box-shadow: inset 2px 2px 6px #cad4e4, inset -2px -2px 6px #ffffff;
  color: #0f172a;
}