/* 自定义工具类 */

.message-enter {
    animation: message-enter 0.3s ease-out forwards;
}
.message-leave {
    animation: message-leave 0.3s ease-in forwards;
}
.modal-enter {
    animation: modal-enter 0.3s ease-out forwards;
}
.modal-mask {
    background-color: rgba(0, 0, 0, 0.5);
}

/* 动画定义 */
@keyframes message-enter {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes message-leave {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-10px); }
}

@keyframes modal-enter {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* 组件容器样式 */
#message-container {
  position: fixed;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 28rem;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

#modal-container {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
}