/* ═══════════════════════════════════════════════════════════
   我的音色页面 — V21 Design System
   命名前缀：xx-mv-
   ═══════════════════════════════════════════════════════════ */
@import "../../styles/global.css";

/* ── 页面容器 ──────────────────────────────────────────── */

.xx-mv-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-xl);
}

/* ── 轮询提示 ──────────────────────────────────────────── */

.xx-mv-polling-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 8%, transparent);
  border-radius: var(--radius-md);
  animation: xx-mv-polling-fade 2s ease-in-out infinite;
}

.xx-mv-polling-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-color);
  animation: xx-mv-blink 1.5s ease-in-out infinite;
}

@keyframes xx-mv-polling-fade {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* ── 统计栏 ────────────────────────────────────────────── */

.xx-mv-stats {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm, 12px) var(--space-md);
  background: var(--bg-secondary, #f8fafc);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--text-secondary);
}

.xx-mv-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.xx-mv-stat strong {
  color: var(--text-primary, #1e293b);
  font-weight: 600;
}

.xx-mv-stat-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.xx-mv-stat--ready {
  color: var(--secondary-color);
}

.xx-mv-stat--processing {
  color: var(--accent-color);
}

/* ── 卡片网格 ──────────────────────────────────────────── */

.xx-mv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--space-md);
}

/* ── 卡片 ──────────────────────────────────────────────── */

.xx-mv-card {
  position: relative;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg, 14px);
  padding: var(--space-md, 20px);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.xx-mv-card:hover {
  border-color: var(--color-primary-400, #818cf8);
  box-shadow: 0 4px 20px
    color-mix(in srgb, var(--primary-color, #4f46e5) 8%, transparent);
}

.xx-mv-card--processing {
  border-color: color-mix(in srgb, var(--accent-color) 30%, transparent);
}

.xx-mv-card--failed {
  border-color: color-mix(in srgb, var(--error-color) 25%, transparent);
  opacity: 0.85;
}

/* ── 卡片头部 ──────────────────────────────────────────── */

.xx-mv-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 14px);
  margin-bottom: var(--space-sm, 14px);
}

.xx-mv-card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 20px;
  color: var(--text-inverse, #fff);
  flex-shrink: 0;
  background: linear-gradient(
    135deg,
    var(--secondary-color),
    var(--color-secondary-700, #059669)
  );
}

.xx-mv-card-avatar--processing {
  background: linear-gradient(
    135deg,
    var(--accent-color),
    var(--accent-dark, #d97706)
  );
  animation: xx-mv-pulse 2s ease-in-out infinite;
}

.xx-mv-card-avatar--failed {
  background: linear-gradient(
    135deg,
    var(--color-gray-400, #94a3b8),
    var(--color-gray-500, #64748b)
  );
}

@keyframes xx-mv-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

.xx-mv-card-info {
  flex: 1;
  min-width: 0;
}

.xx-mv-card-name {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 状态标签 ──────────────────────────────────────────── */

.xx-mv-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

.xx-mv-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.xx-mv-status-dot--ready {
  color: var(--secondary-color);
}

.xx-mv-status-dot--processing {
  color: var(--accent-color);
  animation: xx-mv-blink 1.5s ease-in-out infinite;
}

.xx-mv-status-dot--failed {
  color: var(--error-color);
}

@keyframes xx-mv-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/* ── 元信息 ────────────────────────────────────────────── */

.xx-mv-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 12px);
  margin-bottom: var(--space-sm, 14px);
  font-size: 13px;
  color: var(--text-secondary);
}

.xx-mv-card-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ── 进度条 ────────────────────────────────────────────── */

.xx-mv-progress {
  position: relative;
  height: 6px;
  background: var(--bg-tertiary, #f1f5f9);
  border-radius: 3px;
  margin-bottom: var(--space-sm, 14px);
  overflow: hidden;
}

.xx-mv-progress-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}

/* Indeterminate 态：条纹流动动画（后端无 progress 字段） */
.xx-mv-progress--indeterminate {
  background: var(--bg-tertiary, #f1f5f9);
}

.xx-mv-progress--indeterminate .xx-mv-progress-bar {
  width: 100%;
  background: repeating-linear-gradient(
    90deg,
    var(--accent-color) 0%,
    var(--accent-color) 25%,
    var(--secondary-color) 25%,
    var(--secondary-color) 50%,
    var(--accent-color) 50%
  );
  background-size: 60px 100%;
  animation: xx-mv-progress-flow 1.2s linear infinite;
}

@keyframes xx-mv-progress-flow {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 60px 0;
  }
}

.xx-mv-progress--indeterminate .xx-mv-progress-text {
  animation: xx-mv-progress-pulse 1.5s ease-in-out infinite;
}

@keyframes xx-mv-progress-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.xx-mv-progress-text {
  position: absolute;
  right: 0;
  top: -18px;
  font-size: 11px;
  color: var(--accent-color);
  font-weight: 600;
}

/* ── 操作区 ────────────────────────────────────────────── */

.xx-mv-card-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 10px);
  padding-top: var(--space-sm, 12px);
  border-top: 1px solid var(--border-color);
}

.xx-mv-card-actions .xx-btn {
  flex: 1;
}

.xx-mv-card-icon-actions {
  display: flex;
  gap: 4px;
}

.xx-mv-icon-btn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: var(--radius-sm, 8px);
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}

.xx-mv-icon-btn:hover {
  background: var(--bg-secondary, #f8fafc);
  color: var(--text-primary, #1e293b);
}

.xx-mv-icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.xx-mv-icon-btn--danger:hover {
  background: var(--error-soft, #fef2f2);
  color: var(--error-color);
}

/* ── 空状态 ────────────────────────────────────────────── */

.xx-mv-empty {
  margin-top: var(--space-lg, 40px);
  text-align: center;
  padding: 60px var(--space-md, 24px);
  background: var(--bg-card, #fff);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-lg, 14px);
}

.xx-mv-empty-icon {
  font-size: 64px;
  margin-bottom: var(--space-md);
  line-height: 1;
}

.xx-mv-empty-title {
  margin: 0 0 var(--space-sm);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
}

.xx-mv-empty-desc {
  margin: 0 0 var(--space-md, 24px);
  font-size: 14px;
  color: var(--text-secondary);
}

/* ── Toast ─────────────────────────────────────────────── */

.xx-mv-toast-container {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.xx-mv-toast {
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 12px var(--shadow-sm, rgba(0, 0, 0, 0.08));
  animation: xx-mv-toast-in 0.25s ease-out;
  display: flex;
  align-items: center;
  gap: 8px;
}

.xx-mv-toast--success {
  border-color: var(--secondary-color);
  color: var(--secondary-color);
}

.xx-mv-toast--error {
  border-color: var(--error-color);
  color: var(--error-color);
}

@keyframes xx-mv-toast-in {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ── 响应式 ────────────────────────────────────────────── */

@media (max-width: 1200px) {
  .xx-mv-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

@media (max-width: 768px) {
  .xx-mv-grid {
    grid-template-columns: 1fr;
  }

  .xx-mv-stats {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .xx-mv-empty {
    padding: 40px var(--space-md);
  }

  .xx-mv-empty-icon {
    font-size: 48px;
  }
}

@media (max-width: 480px) {
  .xx-mv-card {
    padding: var(--space-sm, 14px);
  }

  .xx-mv-card-avatar {
    width: 40px;
    height: 40px;
    font-size: 17px;
  }

  .xx-mv-card-actions {
    flex-wrap: wrap;
  }
}
