/* message.css - 消息提示组件样式 */
/* 消息容器：中间上方定位，自动创建，无需页面手动写 */
.message-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  z-index: 9999; /* 确保层级最高，不被遮挡 */
}

/* 消息盒子基础样式 */
.message-box {
  padding: 12px;
  margin-bottom: 10px;
  border-radius: 4px;
  color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(-10px);
  opacity: 0;
  will-change: transform, opacity;
}

/* 显示动画 */
.message-box.show {
  transform: translateY(0);
  opacity: 1;
}

/* 不同类型颜色 */
.message-box.success {
  background-color: #f0f9eb;
  color: #70c645;
}
.message-box.warning {
  background-color: #fdf6ec;
  color: #eaaf56;
}
.message-box.error {
  background-color: #fef0f0;
  color: #f89191;
}
.message-box.info {
  background-color: #909399;
}

/* 消息内容与图标 */
.message-content {
  display: flex;
  align-items: center;
}
.message-icon {
  margin-right: 8px;
  font-size: 18px;
}