/* ==========================================================================
 * 船联汇 VesselNexus — B1 Toast / Notification System
 * ==========================================================================
 * §1. Toast Container & Positions
 * §2. Toast Variants (success / error / warning / info / loading)
 * §3. Toast Anatomy (icon + message + action + close)
 * §4. Enter/Exit Animations
 * §5. Toast with Progress Bar (auto-dismiss)
 * §6. Inline Notification Banners
 *
 * 依赖: vnx-design-tokens.css
 * @package VesselNexus
 * @version 2.3.0
 * ========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════
   §1. TOAST CONTAINER & POSITIONS
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-toast-container {
  position: fixed;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: var(--vnx-space-2);
  max-width: 420px;
  width: 100%;
  pointer-events: none;
}

/* ── Positions ── */
.vnx-toast-container--top-right {
  top: calc(var(--vnx-header-height) + var(--vnx-space-4));
  right: var(--vnx-space-4);
}

.vnx-toast-container--top-left {
  top: calc(var(--vnx-header-height) + var(--vnx-space-4));
  left: var(--vnx-space-4);
}

.vnx-toast-container--top-center {
  top: calc(var(--vnx-header-height) + var(--vnx-space-4));
  left: 50%;
  transform: translateX(-50%);
}

.vnx-toast-container--bottom-right {
  bottom: var(--vnx-space-4);
  right: var(--vnx-space-4);
}

.vnx-toast-container--bottom-left {
  bottom: var(--vnx-space-4);
  left: var(--vnx-space-4);
}

.vnx-toast-container--bottom-center {
  bottom: var(--vnx-space-4);
  left: 50%;
  transform: translateX(-50%);
}

/* ═══════════════════════════════════════════════════════════════════════
   §2. TOAST CARD
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--vnx-space-3);
  padding: var(--vnx-space-4) var(--vnx-space-5);
  background: var(--vnx-surface-card);
  border-radius: var(--vnx-radius-lg);
  box-shadow: var(--vnx-shadow-xl);
  border: 1px solid var(--vnx-border-light);
  pointer-events: auto;
  transform: translateX(120%);
  opacity: 0;
  transition: transform var(--vnx-duration-slow) var(--vnx-ease-spring),
              opacity var(--vnx-duration-fast) var(--vnx-ease-out);
  position: relative;
  overflow: hidden;
}

.vnx-toast--visible {
  transform: translateX(0);
  opacity: 1;
}

.vnx-toast--dismissing {
  transform: translateX(120%);
  opacity: 0;
}

/* ── Left accent border ── */
.vnx-toast::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════
   §3. TOAST VARIANTS
   ═══════════════════════════════════════════════════════════════════════ */

/* Success */
.vnx-toast--success::before { background: var(--vnx-color-success); }
.vnx-toast--success .vnx-toast__icon {
  color: var(--vnx-color-success);
  background: var(--vnx-color-success-bg);
}

/* Error */
.vnx-toast--error::before { background: var(--vnx-color-danger); }
.vnx-toast--error .vnx-toast__icon {
  color: var(--vnx-color-danger);
  background: var(--vnx-color-danger-bg);
}

/* Warning */
.vnx-toast--warning::before { background: var(--vnx-color-warning); }
.vnx-toast--warning .vnx-toast__icon {
  color: var(--vnx-gold-700);
  background: var(--vnx-color-warning-bg);
}

/* Info */
.vnx-toast--info::before { background: var(--vnx-color-info); }
.vnx-toast--info .vnx-toast__icon {
  color: var(--vnx-ocean-600);
  background: var(--vnx-color-info-bg);
}

/* Loading */
.vnx-toast--loading::before { background: var(--vnx-gray-400); }
.vnx-toast--loading .vnx-toast__icon {
  color: var(--vnx-ocean-500);
  background: var(--vnx-ocean-50);
}

/* ═══════════════════════════════════════════════════════════════════════
   §4. TOAST ANATOMY
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-toast__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--vnx-radius-full);
  flex-shrink: 0;
  font-size: 16px;
}

.vnx-toast__body {
  flex: 1;
  min-width: 0;
}

.vnx-toast__title {
  font-family: var(--vnx-font-family-heading);
  font-size: var(--vnx-text-sm);
  font-weight: var(--vnx-font-semibold);
  color: var(--vnx-text-primary);
  margin: 0 0 2px;
  line-height: var(--vnx-leading-snug);
}

.vnx-toast__message {
  font-size: var(--vnx-text-xs);
  color: var(--vnx-text-secondary);
  margin: 0;
  line-height: var(--vnx-leading-normal);
}

.vnx-toast__action {
  display: inline-block;
  margin-top: var(--vnx-space-1);
  font-size: var(--vnx-text-xs);
  font-weight: var(--vnx-font-semibold);
  color: var(--vnx-ocean-500);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.vnx-toast__action:hover {
  color: var(--vnx-ocean-600);
  text-decoration: underline;
}

.vnx-toast__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: var(--vnx-radius-full);
  background: var(--vnx-gray-100);
  color: var(--vnx-text-tertiary);
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--vnx-duration-fast);
}
.vnx-toast__close:hover {
  background: var(--vnx-gray-200);
  color: var(--vnx-text-primary);
}

/* ═══════════════════════════════════════════════════════════════════════
   §5. PROGRESS BAR (auto-dismiss)
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--vnx-gray-200);
  width: 100%;
}

.vnx-toast__progress-bar {
  height: 100%;
  width: 100%;
  transform-origin: left;
  animation: vnx-toast-progress var(--vnx-toast-duration, 5s) linear forwards;
}

.vnx-toast--success .vnx-toast__progress-bar { background: var(--vnx-color-success); }
.vnx-toast--error .vnx-toast__progress-bar   { background: var(--vnx-color-danger); }
.vnx-toast--warning .vnx-toast__progress-bar { background: var(--vnx-color-warning); }
.vnx-toast--info .vnx-toast__progress-bar    { background: var(--vnx-color-info); }

@keyframes vnx-toast-progress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ═══════════════════════════════════════════════════════════════════════
   §6. INLINE NOTIFICATION BANNERS
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--vnx-space-3);
  padding: var(--vnx-space-4) var(--vnx-space-5);
  border-radius: var(--vnx-radius-lg);
  font-size: var(--vnx-text-sm);
  line-height: var(--vnx-leading-normal);
  margin-bottom: var(--vnx-space-4);
}

.vnx-notice__icon {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1.4;
}

.vnx-notice__content {
  flex: 1;
}

.vnx-notice__title {
  font-weight: var(--vnx-font-semibold);
  margin-bottom: 2px;
}

.vnx-notice__dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 0;
  color: inherit;
  opacity: 0.5;
  line-height: 1.4;
}
.vnx-notice__dismiss:hover { opacity: 1; }

/* ── Notice Variants ── */
.vnx-notice--success {
  background: var(--vnx-color-success-bg);
  color: #1a6e3a;
  border: 1px solid rgba(33, 150, 83, 0.2);
}

.vnx-notice--error {
  background: var(--vnx-color-danger-bg);
  color: #a82a2a;
  border: 1px solid rgba(217, 54, 54, 0.2);
}

.vnx-notice--warning {
  background: var(--vnx-color-warning-bg);
  color: #6b4a00;
  border: 1px solid rgba(212, 152, 10, 0.2);
}

.vnx-notice--info {
  background: var(--vnx-color-info-bg);
  color: #1a4d7a;
  border: 1px solid rgba(46, 123, 196, 0.2);
}

.vnx-notice--tip {
  background: var(--vnx-gold-50);
  color: var(--vnx-gold-900);
  border: 1px solid rgba(212, 152, 10, 0.15);
}

/* ═══════════════════════════════════════════════════════════════════════
   §7. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 639px) {
  .vnx-toast-container {
    max-width: calc(100vw - var(--vnx-space-4) * 2);
    left: var(--vnx-space-4);
    right: var(--vnx-space-4);
    transform: none;
  }

  .vnx-toast-container--top-center,
  .vnx-toast-container--bottom-center {
    left: var(--vnx-space-4);
    transform: none;
  }

  .vnx-toast {
    padding: var(--vnx-space-3) var(--vnx-space-4);
  }
}