/* ============================================================
 * ui-utils.css — 通用 UI 组件样式
 * 可被多页面/多项目复用的视觉组件
 * 配合 ui-utils.js 中的 API 使用
 * ============================================================ */

/* ---------- 通用动画关键帧 ---------- */
@keyframes ui-fade-in {
  from { opacity: 0; transform: translateY(8px) scale(.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ui-bounce-dots {
  0%, 80%, 100% { transform: scale(.6); opacity: .5; }
  40%           { transform: scale(1);  opacity: 1; }
}
@keyframes ui-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
@keyframes ui-press {
  0%   { transform: scale(1); }
  100% { transform: scale(.85); }
}
@keyframes ui-indicator-grow {
  from { transform: translateX(-50%) scaleX(0); }
  to   { transform: translateX(-50%) scaleX(1); }
}

/* ---------- 页面过渡 ---------- */
.ui-page-fade-enter { display: block !important; animation: ui-fade-in .32s cubic-bezier(.2,.7,.2,1); }

/* ---------- 浮动 Loading 指示器 ---------- */
.ui-float-loading {
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
  background: rgba(10, 19, 39, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 14px 22px;
  border-radius: 12px;
  border: 1px solid rgba(56, 189, 248, .2);
  box-shadow: 0 8px 28px rgba(2, 8, 26, .6);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #9fb3d1;
  animation: ui-fade-in .2s ease-out;
}
.ui-float-loading .ui-dot {
  width: 6px;
  height: 6px;
  background: var(--brand, #1565c0);
  border-radius: 50%;
  animation: ui-bounce-dots 1s infinite ease-in-out;
}
.ui-float-loading .ui-dot:nth-child(2) { animation-delay: .15s; }
.ui-float-loading .ui-dot:nth-child(3) { animation-delay: .3s; }

/* ---------- 全局阻塞 Loading（整屏覆盖） ---------- */
.ui-full-loading {
  position: fixed;
  inset: 0;
  background: rgba(5, 9, 20, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  animation: ui-fade-in .2s ease-out;
}
.ui-full-loading .ui-dots {
  display: flex;
  gap: 8px;
}
.ui-full-loading .ui-dots .ui-dot {
  width: 10px;
  height: 10px;
}
.ui-full-loading .ui-msg {
  font-size: 14px;
  color: #555;
}

/* ---------- 按钮防连点状态 ---------- */
.ui-btn-loading {
  position: relative;
  pointer-events: none;
  opacity: .7;
}
.ui-btn-loading::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  animation: ui-spin .6s linear infinite;
}
@keyframes ui-spin { to { transform: translateY(-50%) rotate(360deg); } }

/* ---------- Toast 通知（增强版） ---------- */
.ui-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, .85);
  color: #fff;
  padding: 10px 22px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 9999;
  display: none;
  backdrop-filter: blur(6px);
  max-width: 80vw;
  text-align: center;
  line-height: 1.5;
}
.ui-toast.show { display: block; animation: ui-fade-in .25s; }
.ui-toast.success { background: rgba(46, 125, 50, .92); }
.ui-toast.error   { background: rgba(198, 40, 40, .92); }
.ui-toast.warn    { background: rgba(230, 126, 34, .95); }