/* ============================================================
 * 91AI Design System (zz-design.css)
 * 配色理念：纸感白 + 墨黑 + 克制蓝
 *  - 主操作 = 墨黑 #202124（与首页按钮语言一致）
 *  - 品牌蓝 #2563eb 只做点缀（链接/聚焦/高亮），不做大面积填充
 *  - 层级用表面色阶与阴影表达，不用实线边框堆叠
 * 动画理念（Emil 规则）：
 *  - 只动 transform/opacity；进场 ease-out 强曲线；UI 不超 300ms
 *  - 永不 scale(0)；按钮按压 scale(0.97)；hover 仅限精确指针
 * ============================================================ */
:root {
  /* 色板 */
  --zz-ink: #202124;
  --zz-text: #202124;
  --zz-text-2: #4b5563;
  --zz-text-3: #737475;
  --zz-text-4: #9ca3af;
  --zz-bg: #f3f3f2;
  --zz-surface: #ffffff;
  --zz-surface-2: #fafaf9;
  --zz-input-bg: #f7f7f6;
  --zz-border: #e6e6e3;
  --zz-border-2: #d4d4d8;
  --zz-accent: #2563eb;
  --zz-accent-hover: #1d4ed8;
  --zz-accent-soft: #eff6ff;
  --zz-accent-border: #bfdbfe;
  --zz-success: #059669;
  --zz-success-soft: #ecfdf5;
  --zz-warning: #d97706;
  --zz-warning-soft: #fffbeb;
  --zz-danger: #dc2626;
  --zz-danger-soft: #fef2f2;
  --zz-info: #475569;
  --zz-info-soft: #f8fafc;
  /* 阴影（半透明阴影代替边框堆叠） */
  --zz-shadow-sm: 0 1px 2px rgba(32,33,36,.05), 0 1px 1px rgba(32,33,36,.03);
  --zz-shadow-md: 0 2px 4px rgba(32,33,36,.04), 0 12px 24px -6px rgba(32,33,36,.10);
  --zz-shadow-lg: 0 8px 16px rgba(32,33,36,.06), 0 24px 48px -12px rgba(32,33,36,.18);
  /* 圆角 */
  --zz-r-sm: 8px;
  --zz-r-md: 12px;
  --zz-r-lg: 16px;
  --zz-r-xl: 20px;
  /* 动效（标准曲线，内置缓动太弱） */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --t-fast: 125ms;
  --t-press: 140ms;
  --t-mid: 200ms;
  --t-slow: 300ms;
}

/* ---------- 基础：移动端基线 ---------- */
input, textarea, select {
  font-size: 16px; /* 防 iOS 聚焦缩放（用修因代替禁缩放） */
  -webkit-text-size-adjust: 100%;
}
button, [role="button"], a {
  touch-action: manipulation; /* 消除点击延迟 */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
::selection { background: rgba(37,99,235,.18); }

/* ---------- 通用按压反馈（任何可点元素） ---------- */
:where(button, .zz-pressable, [role="button"], .m-chip, .rk-copy, .models-copy-btn, .models-card-detail, .console-menu-item, .console-bell-btn, .console-avatar-btn, .m-foption, .m-sort-btn, .m-page-nav-btn, .m-page-size-btn, .m-filter-apply, .m-filter-reset, .hm-tablist-btn, .console-notice-type-btn, .console-avatar-item, .console-notice-close, .rk-tab, .rn-tab) {
  transition: transform var(--t-press) var(--ease-out),
              background-color var(--t-mid) var(--ease-out),
              color var(--t-mid) var(--ease-out),
              border-color var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out);
}
:where(button:not(:disabled), .zz-pressable, [role="button"]:not(:disabled)):active {
  transform: scale(0.97);
}

/* ---------- hover 仅限精确指针（触屏不假悬停） ---------- */
/* 各页面的 :hover 规则保持原样（多数是颜色，可接受）；
   涉及 transform 的 hover 在页面内已加 @media 门控或本就轻微 */

/* ---------- 卡片 ---------- */
.zz-card {
  background: var(--zz-surface);
  border: 1px solid var(--zz-border);
  border-radius: var(--zz-r-lg);
  box-shadow: var(--zz-shadow-sm);
}

/* ---------- 按钮 ---------- */
.zz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  padding: 0 20px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: transform var(--t-press) var(--ease-out),
              background-color var(--t-mid) var(--ease-out),
              border-color var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out);
}
.zz-btn:active { transform: scale(0.97); }
.zz-btn-primary {
  background: var(--zz-ink);
  color: #fff;
  border-color: var(--zz-ink);
}
.zz-btn-primary:hover { background: #000; }
.zz-btn-accent {
  background: var(--zz-accent);
  color: #fff;
  border-color: var(--zz-accent);
}
.zz-btn-accent:hover { background: var(--zz-accent-hover); }
.zz-btn-ghost {
  background: var(--zz-surface);
  color: var(--zz-text);
  border-color: var(--zz-border-2);
}
.zz-btn-ghost:hover { background: var(--zz-surface-2); }
.zz-btn-danger {
  background: var(--zz-danger-soft);
  color: var(--zz-danger);
  border-color: transparent;
}
.zz-btn-sm { height: 34px; padding: 0 14px; font-size: 13px; border-radius: 8px; }
.zz-btn[disabled], .zz-btn:disabled { opacity: .5; pointer-events: none; }

/* ---------- 输入框 ---------- */
.zz-input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--zz-border);
  border-radius: 10px;
  background: var(--zz-input-bg);
  color: var(--zz-text);
  font-size: 16px;
  font-family: inherit;
  transition: border-color var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out),
              background-color var(--t-mid) var(--ease-out);
}
.zz-input::placeholder { color: var(--zz-text-4); }
.zz-input:focus {
  outline: none;
  border-color: var(--zz-accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

/* ---------- 标签 Tag ---------- */
.zz-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}
.zz-tag-success { background: var(--zz-success-soft); color: var(--zz-success); }
.zz-tag-warning { background: var(--zz-warning-soft); color: var(--zz-warning); }
.zz-tag-danger  { background: var(--zz-danger-soft);  color: var(--zz-danger); }
.zz-tag-info    { background: var(--zz-info-soft);    color: var(--zz-info); }
.zz-tag-accent  { background: var(--zz-accent-soft);  color: var(--zz-accent); }
.zz-tag-dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------- 弹窗（从触发源/中心，永不 scale(0)） ---------- */
/* 从触发源弹出（popover 类：锚定元素） */
.zz-pop-enter-active,
.zz-pop-leave-active {
  transition: opacity var(--t-mid) var(--ease-out),
              transform var(--t-mid) var(--ease-out);
}
.zz-pop-enter-from,
.zz-pop-leave-to {
  opacity: 0;
  transform: scale(0.95);
}
/* modal（居中，豁免 origin 规则） */
.zz-modal-enter-active,
.zz-modal-leave-active {
  transition: opacity var(--t-mid) var(--ease-out),
              transform var(--t-mid) var(--ease-out);
}
.zz-modal-enter-from,
.zz-modal-leave-to {
  opacity: 0;
  transform: scale(0.96);
}
.zz-backdrop-enter-active,
.zz-backdrop-leave-active {
  transition: opacity var(--t-slow) var(--ease-out);
}
.zz-backdrop-enter-from,
.zz-backdrop-leave-to { opacity: 0; }
/* 底部抽屉（iOS 曲线） */
.zz-sheet-enter-active,
.zz-sheet-leave-active {
  transition: transform 320ms var(--ease-drawer);
}
.zz-sheet-enter-from,
.zz-sheet-leave-to { transform: translateY(100%); }

/* ---------- 内容淡入（防闪现/切换桥梁，短且不阻塞） ---------- */
@keyframes zzFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.zz-fade-in { animation: zzFadeIn 240ms var(--ease-out) both; }
/* 列表 stagger：每项 45ms，装饰性不阻塞交互 */
.zz-stagger > * {
  animation: zzFadeIn 260ms var(--ease-out) both;
}
.zz-stagger > *:nth-child(1)  { animation-delay: 0ms; }
.zz-stagger > *:nth-child(2)  { animation-delay: 45ms; }
.zz-stagger > *:nth-child(3)  { animation-delay: 90ms; }
.zz-stagger > *:nth-child(4)  { animation-delay: 135ms; }
.zz-stagger > *:nth-child(5)  { animation-delay: 180ms; }
.zz-stagger > *:nth-child(6)  { animation-delay: 225ms; }
.zz-stagger > *:nth-child(7)  { animation-delay: 270ms; }
.zz-stagger > *:nth-child(8)  { animation-delay: 315ms; }
.zz-stagger > *:nth-child(n+9) { animation-delay: 360ms; }

/* ---------- 未读红点呼吸（提示而非骚扰） ---------- */
@keyframes zzDotPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.25); }
}
.zz-dot-pulse { animation: zzDotPulse 2.4s var(--ease-in-out) infinite; }

/* ---------- 加载 spinner（快转 = 感知快） ---------- */
@keyframes zzSpin { to { transform: rotate(360deg); } }
.zz-spinner {
  width: 26px; height: 26px;
  border: 2.5px solid var(--zz-border);
  border-top-color: var(--zz-accent);
  border-radius: 50%;
  animation: zzSpin .7s linear infinite;
}

/* ---------- 无障碍降级（减动感 = 更温和，不是零） ---------- */
@media (prefers-reduced-motion: reduce) {
  :where(button, .zz-pressable, [role="button"]) { transition: none; }
  :where(button):active { transform: none; }
  .zz-fade-in, .zz-stagger > * { animation-duration: 1ms; }
  .zz-pop-enter-active, .zz-pop-leave-active,
  .zz-modal-enter-active, .zz-modal-leave-active,
  .zz-sheet-enter-active, .zz-sheet-leave-active {
    transition: opacity 120ms ease;
  }
  .zz-pop-enter-from, .zz-pop-leave-to,
  .zz-modal-enter-from, .zz-modal-leave-to { transform: none; }
  .zz-sheet-enter-from, .zz-sheet-leave-to { transform: none; }
  .zz-dot-pulse { animation: none; }
}