/* ============================================================
 * 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;
}

/* 徽章：同标签，背景 #E0F2EA，深绿字 */
.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;
}

/* 芯片：可携带图标与移除按钮的紧凑条目（如随心记的已选媒体） */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 320px;
  padding: 3px 6px 3px 8px;
  border: var(--border-default);
  border-radius: var(--radius-tag);
  font: var(--text-caption);
  color: var(--text-secondary);
}
.chip svg { width: 13px; height: 13px; flex: none; color: var(--green-700); }
.chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip button {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.chip button:hover { color: var(--danger); }
.chip button svg { width: 11px; height: 11px; color: inherit; }
.chip .chip-size { font: var(--text-caption); color: var(--text-secondary); opacity: .65; }

.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); }
/* 角色配色（普通用户 / VIP / 管理员 / 长光 / 封禁 / 注销；未登录沿用默认 --danger） */
.status-dot.role-user    { background: var(--role-user); }
.status-dot.role-vip     { background: var(--role-vip); }
.status-dot.role-admin   { background: var(--role-admin); }
.status-dot.role-agent   { background: var(--role-agent); }
.status-dot.role-banned  { background: var(--role-banned); }
.status-dot.role-deleted { background: var(--role-deleted); }

/* ---- 上传区 ----
   低矮插槽，对齐全站「细线 + 透明底」的克制风格（原 160px 高的大块虚线框与整体有出入）：
   默认 1px 细线实边、透明底、内容左对齐、文字取品牌深绿；hover 转品牌深绿实线并铺一层极淡绿；
   拖入（.dragover）时边框改虚线，作可投放提示 */
.upload-area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-icon-text);
  padding: 10px var(--space-input);
  border: var(--border-default);
  border-radius: var(--radius-btn);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--duration-hover) var(--ease-out),
              background var(--duration-hover) var(--ease-out);
}

.upload-area:hover,
.upload-area.dragover {
  border-color: var(--green-900);
  background: color-mix(in srgb, var(--green-900) 6%, transparent);
}

.upload-area.dragover { border-style: dashed; }

.upload-area-text { font: var(--text-ui); color: var(--green-900); }
.upload-area-hint { font: var(--text-caption); color: var(--text-secondary); opacity: .7; }
/* 内联图标：由本控件统一约束尺寸（原仅 write 页面私有约束，stars 缺省则 SVG 撑满成巨型图标） */
.upload-area svg { width: 16px; height: 16px; flex: none; color: var(--green-900); }

/* ---- 加载指示器 ---- */
.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; }
}

/* ---- 骨架屏：背景 #E0F2EA，圆角 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; }

/* ============================================================
 * 页内提示条（notice）
 * 常驻于内容流的轻量提示（浮层通知见下方 .toast）：
 * 细线框 + 左侧 2px 状态色条，默认成功（绿），容器加 .is-warn / .is-error 切换；
 * 内部 .status-dot 跟随容器语义着色，页面无需再写状态修饰类。
 * 显隐统一走 hidden 属性（页面模块置 note.hidden = false / true）。
 * 变体：.notice-proj —— 接入页「全息长光」专用外观（无实底，保持背景穿透）
 * 来源：~README/项目架构.js → 风格.控件（原为 access 的 .note 与 me 的 .notice 两处私有实现）
 * ============================================================ */
.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-icon-text);
  padding: 10px var(--space-input);
  border: var(--border-default);
  border-left: 2px solid var(--success);
  border-radius: var(--radius-card);
  background: var(--surface-emphasis);
  font: var(--text-ui);
  color: var(--text-primary);
}

/* .notice 声明了 display:flex，会盖过通用 [hidden] 规则（同特异度、后者优先），故按属性显式覆盖 */
.notice[hidden] { display: none; }

.notice.is-warn  { border-left-color: var(--amber-500); }
.notice.is-error { border-left-color: var(--danger); }

/* 状态点跟随容器语义：默认成功，容器带 .is-warn / .is-error 时同步变色（顶部对齐首行文字） */
.notice .status-dot          { margin-top: 7px; background: var(--success); }
.notice.is-warn  .status-dot { background: var(--amber-500); }
.notice.is-error .status-dot { background: var(--danger); }

/* 投影变体：线框 + 极淡渐变填充，保持背景穿透；颜色一律由令牌组合得到，不引用页面局部变量 */
.notice-proj {
  border: var(--border-soft);
  border-left-width: 2px;
  border-left-color: var(--success);
  border-radius: var(--radius-btn);
  background: color-mix(in srgb, var(--green-900) 7%, transparent);
}

/* ============================================================
 * 页内轻量提示（toast）
 * 基础只含玻璃材质与隐藏态；位置 / 圆角 / 阴影 / 时长由位置变体给出：
 *   .toast--corner  右下角竖排（个人中心，置于容器 .toasts 内）
 *   .toast--top     顶部居中（留言板）
 *   .toast--bottom  底部居中（随心记）
 * 显隐统一为 .is-on；语义 .is-ok / .is-warn / .is-error（左侧色条）、.is-danger（危险描边）
 * 来源：~README/项目架构.js → 风格.控件（原为各页面私有规则，现提升为公共组件）
 * ============================================================ */
.toasts {
  position: fixed;
  right: var(--space-card);
  bottom: var(--space-card);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: var(--space-icon-text);
  pointer-events: none;
}

.toast {
  border: var(--border-glass);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  font: var(--text-ui);
  color: var(--text-primary);
  opacity: 0;
  pointer-events: none;
}
.toast.is-on { opacity: 1; }

/* 右下角竖排：几何由容器 .toasts 决定，此处只定外观与入场位移 */
.toast--corner {
  min-width: 180px;
  max-width: 340px;
  padding: 10px var(--space-input);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-2);
  transform: translateY(6px);
  transition: opacity var(--duration-enter) var(--ease-out),
              transform var(--duration-enter) var(--ease-out);
}
.toast--corner.is-on { transform: none; }

/* 顶部居中：层级 120，高于遮罩 100 与弹窗 101，弹窗内的操作反馈也看得到 */
.toast--top {
  position: fixed;
  left: 50%;
  top: var(--space-card);
  z-index: 120;
  max-width: min(420px, 88vw);
  padding: 10px 16px;
  border-radius: var(--radius-btn);
  box-shadow: var(--shadow-2), var(--glass-highlight);
  transform: translate(-50%, -8px);
  transition: opacity var(--duration-enter) var(--ease-out),
              transform var(--duration-enter) var(--ease-out);
}
.toast--top.is-on { transform: translate(-50%, 0); }

/* 底部居中 */
.toast--bottom {
  position: fixed;
  left: 50%;
  bottom: 40px;
  z-index: 110;
  max-width: min(88vw, 420px);
  padding: 10px 16px;
  border-radius: var(--radius-card);
  box-shadow: var(--glass-highlight), var(--shadow-2);
  transform: translate(-50%, 12px);
  transition: opacity var(--duration-hover) var(--ease-out),
              transform var(--duration-hover) var(--ease-out);
}
.toast--bottom.is-on { transform: translate(-50%, 0); }

/* 语义状态：左侧色条（个人中心）与危险描边（留言板 / 随心记，两页描边深浅不同故分写） */
.toast.is-ok    { border-left: 2px solid var(--success); }
.toast.is-warn  { border-left: 2px solid var(--amber-500); }
.toast.is-error { border-left: 2px solid var(--danger); }
.toast--top.is-danger    { color: var(--danger); border-color: var(--danger); }
.toast--bottom.is-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 55%, transparent); }