/**
 * toast.css - 全站统一通知样式（v1.0.0）
 * ------------------------------------------------------------
 * 设计基准：经营中心 wxt-toast（深色渐变玻璃）。
 * 结构约定（与 toast.js 配套）：.toast.toast-{type} > .toast-icon + .toast-content + .toast-close
 * 使用方式：所有页面在 <head> 末尾（其他样式之后）同步引入本文件，保证覆盖各页历史 toast 样式。
 */

/* ==================== 容器（底部右侧，全局唯一） ==================== */
#toastContainer,
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  max-width: 400px;
  width: calc(100% - 48px);
  pointer-events: none;
}

/* ==================== 通知卡片 - 深色渐变玻璃 ==================== */
#toastContainer .toast,
.toast-container .toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  line-height: 1.5;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  animation: toastIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: 100%;
  box-sizing: border-box;
}

/* 类型配色：四色渐变（与经营中心 wxt-toast 一致） */
#toastContainer .toast.toast-success,
.toast-container .toast.toast-success {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.95), rgba(5, 150, 105, 0.95));
}
#toastContainer .toast.toast-error,
.toast-container .toast.toast-error {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.95), rgba(220, 38, 38, 0.95));
}
#toastContainer .toast.toast-info,
.toast-container .toast.toast-info {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(37, 99, 235, 0.95));
}
#toastContainer .toast.toast-warning,
.toast-container .toast.toast-warning {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.95), rgba(217, 119, 6, 0.95));
}

/* ==================== 内部结构 ==================== */
#toastContainer .toast-icon,
.toast-container .toast-icon {
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1.4;
}

#toastContainer .toast-content,
.toast-container .toast-content {
  flex: 1;
  min-width: 0;
  word-break: break-word;
  color: #fff;
}
#toastContainer .toast-content small,
.toast-container .toast-content small {
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
}

#toastContainer .toast-close,
.toast-container .toast-close {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  color: #fff;
  opacity: 0.7;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s, background 0.15s;
}
#toastContainer .toast-close:hover,
.toast-container .toast-close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.15);
}

/* 撤销按钮（CompareToast 兼容） */
#toastContainer .toast-undo-btn,
.toast-container .toast-undo-btn {
  margin-left: 10px;
  border: none;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  border-radius: 6px;
  padding: 3px 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: background 0.15s;
  vertical-align: middle;
}
#toastContainer .toast-undo-btn:hover,
.toast-container .toast-undo-btn:hover {
  background: rgba(255, 255, 255, 0.32);
}

/* ==================== 动画（全站统一） ==================== */
@keyframes toastIn {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(24px); }
}

@media (prefers-reduced-motion: reduce) {
  #toastContainer .toast,
  .toast-container .toast {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==================== 移动端适配 ==================== */
@media (max-width: 640px) {
  #toastContainer,
  .toast-container {
    bottom: 16px;
    right: 16px;
    left: 16px;
    width: auto;
    max-width: none;
  }
  #toastContainer .toast,
  .toast-container .toast {
    padding: 11px 14px;
    font-size: 13px;
  }

  #toastContainer .toast-close,
  .toast-container .toast-close {
    box-sizing: border-box;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  #toastContainer .toast-undo-btn,
  .toast-container .toast-undo-btn {
    min-height: 44px;
  }
}