/* ===== 测速结果反馈卡片（有帮助/没帮助） ===== */
.feedback-section {
  width: 100%;
  background: var(--bg-secondary);
  border: 0.5px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  margin-bottom: 4px;
}

.feedback-header {
  padding: 12px 16px;
  border-bottom: 0.5px solid var(--separator);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.feedback-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.feedback-title svg {
  color: var(--accent-purple);
}

.feedback-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 三个分项行（延迟/下载/上传）的纵向间距由 .feedback-items 容器控制 */
.feedback-items {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.feedback-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.feedback-item-label {
  font-size: 12px;
  color: var(--text-muted);
  flex: 1;
  min-width: 0;
}

.feedback-vote {
  display: flex;
  gap: 10px;
}

.feedback-vote-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-size: 12px;
  font-family: inherit;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  border: 0.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}

.feedback-vote-btn:hover {
  border-color: var(--accent-blue);
  color: var(--text-primary);
}

.feedback-vote-btn.active-helpful {
  background: color-mix(in srgb, var(--accent-green) 15%, transparent);
  border-color: var(--accent-green);
  color: var(--accent-green);
}

.feedback-vote-btn.active-not {
  background: color-mix(in srgb, var(--accent-red) 15%, transparent);
  border-color: var(--accent-red);
  color: var(--accent-red);
}

.feedback-vote-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.feedback-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}

.feedback-status {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

.feedback-status.success {
  color: var(--accent-green);
}

.feedback-status.error {
  color: var(--accent-red);
}

.feedback-submit-btn {
  min-width: 96px;
}

/* ===== 反馈交互动效 ===== */

/* 投票选中：图标弹性弹动（多段过冲 + 回弹缓动，幅度更明显），按钮整体同步轻微放大 */
@keyframes fb-vote-pop {
  0%   { transform: scale(1) rotate(0deg); }
  25%  { transform: scale(1.5) rotate(-16deg); }
  45%  { transform: scale(0.82) rotate(7deg); }
  65%  { transform: scale(1.18) rotate(-4deg); }
  82%  { transform: scale(0.95) rotate(2deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes fb-vote-btn-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.feedback-vote-btn.active-helpful svg,
.feedback-vote-btn.active-not svg {
  animation: fb-vote-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.feedback-vote-btn.active-helpful,
.feedback-vote-btn.active-not {
  animation: fb-vote-btn-pop 0.4s ease;
}

/* 提交成功：卡片淡出 + 上浮 + 高度顺滑收起。
   高度用 JS 钉住真实起始值再过渡 height→0（height:auto 无法过渡，
   也避免 max-height 从大值收缩时「前半段不动、末尾猛收」的生硬感）。 */
.feedback-section {
  transition:
    opacity 0.3s ease,
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    margin-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.feedback-section.feedback-leaving {
  opacity: 0;
  transform: translateY(-8px);
  margin-bottom: 0;
  pointer-events: none;
}

/* 尊重系统「减少动态效果」：退化为瞬时切换 */
@media (prefers-reduced-motion: reduce) {
  .feedback-vote-btn.active-helpful,
  .feedback-vote-btn.active-not,
  .feedback-vote-btn.active-helpful svg,
  .feedback-vote-btn.active-not svg {
    animation: none;
  }
  .feedback-section {
    transition: none;
  }
}