/* ============================================================
 * Longlight - 长光雨滴小站 | 标签 / 徽章 / 状态点 / 上传 / 加载 / 骨架屏
 * components/feedback.css
 * 来源：~README/项目架构.js → 风格.控件
 * ============================================================ */

/* ---- 标签 / 徽章 / 状态点 ---- */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-tag);
  border: var(--border-default);
  font: var(--text-caption);
  letter-spacing: var(--ls-caption);
  color: var(--text-secondary);
  white-space: nowrap;
}

/* 徽章：同标签，背景 #E4EAD9，深绿字 */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-tag);
  border: var(--border-default);
  background: var(--hover-bg);
  color: var(--green-900);
  font: var(--text-caption);
  letter-spacing: var(--ls-caption);
  white-space: nowrap;
}

.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circle);
  flex-shrink: 0;
  background: var(--danger);
  transition: background var(--duration-hover) var(--ease-out);
}
.status-dot.success    { background: var(--success); }
.status-dot.warning    { background: var(--amber-500); }
.status-dot.error      { background: var(--danger); }
/* 终端会话状态 */
.status-dot.logged-in  { background: var(--green-500); }
.status-dot.has-code   { background: var(--success); }

/* ---- 上传区 ---- */
.upload-area {
  min-height: 160px;
  border-radius: var(--radius-card);
  border: var(--border-dashed);
  background: var(--surface-emphasis);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-form-label);
  cursor: pointer;
  transition: border-color var(--duration-hover) var(--ease-out),
              background var(--duration-hover) var(--ease-out);
  padding: var(--space-card);
  text-align: center;
}

.upload-area:hover,
.upload-area.dragover {
  border-color: var(--warm-600);
  border-style: solid;
  background: var(--hover-bg);
}

.upload-area-text { font: var(--text-ui); color: var(--text-secondary); }
.upload-area-hint { font: var(--text-caption); color: var(--text-secondary); opacity: .7; }

/* ---- 加载指示器 ---- */
.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--line);
  border-top-color: var(--green-900);
  border-radius: var(--radius-circle);
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* 三条线加载 */
.spinner-lines {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}
.spinner-lines span {
  width: 3px;
  height: 14px;
  background: var(--green-900);
  border-radius: 0;   /* 风格.圆角：其他为 0 */
  animation: linePulse 1s ease-in-out infinite;
}
.spinner-lines span:nth-child(2) { animation-delay: 0.15s; }
.spinner-lines span:nth-child(3) { animation-delay: 0.3s; }

@keyframes linePulse {
  0%, 100% { transform: scaleY(0.5); opacity: .5; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

/* ---- 骨架屏：背景 #E4EAD9，圆角 2px，透明度 0.6→1，1.6s 循环 ---- */
.skeleton {
  background: var(--hover-bg);
  border-radius: var(--radius-btn);
  animation: skeletonPulse var(--duration-skeleton) ease-in-out infinite;
}

@keyframes skeletonPulse {
  0%, 100% { opacity: .6; }
  50%      { opacity: 1; }
}

.skeleton-text  { height: 14px; margin-bottom: var(--space-icon-text); }
.skeleton-title { height: 20px; margin-bottom: var(--space-input); }
.skeleton-avatar{ width: 40px; height: 40px; border-radius: var(--radius-circle); }
.skeleton-btn   { height: 42px; width: 120px; }