/* states.css — 空态/加载/错误/过期/部分（会话流 + 浮窗内） */

/* —— 会话流空态（首屏 hero）—— */
.feed-empty { min-height: calc(100vh - 360px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; animation: mg-fade .4s var(--ease) both; }
.feed-empty .hero {
  font-size: 30px; font-weight: var(--fw-extrabold); letter-spacing: -.02em; line-height: var(--lh-tight);
  background: linear-gradient(120deg, var(--ink), #3a4048); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.feed-empty .hero .g { background: linear-gradient(120deg, var(--green-d), var(--green)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.feed-empty .sub { margin-top: var(--sp-6); color: var(--ink-2); max-width: 440px; line-height: var(--lh-relaxed); }
.feed-empty .picks { margin-top: var(--sp-8); display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }
.feed-empty .pick { height: 34px; padding: 0 var(--sp-6); border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--bg); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-2); transition: background .15s, border-color .15s, color .15s; }
.feed-empty .pick:hover { background: var(--green-soft); border-color: #CFEAD9; color: var(--green-d); }

/* —— 通用占位（浮窗内）—— */
.state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--sp-10) var(--sp-7); min-height: 320px; animation: mg-fade .3s var(--ease) both; }
.state .ico { width: 56px; height: 56px; border-radius: var(--r-xl); display: grid; place-items: center; margin-bottom: var(--sp-6); background: var(--soft); color: var(--ink-3); font-size: 24px; }
.state .ico.red { background: var(--red-soft); color: var(--red); }
.state .ico.amber { background: var(--amber-soft); color: var(--amber); }
.state .st-title { font-size: var(--fs-xl); font-weight: var(--fw-extrabold); letter-spacing: -.01em; }
.state .st-desc { margin-top: var(--sp-3); color: var(--ink-2); max-width: 360px; line-height: var(--lh-relaxed); }
.state .st-actions { margin-top: var(--sp-7); display: flex; gap: var(--sp-4); }

/* —— 浮窗内：生成中 —— */
.gen-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--sp-10); min-height: 360px; }
.gen-orbit { position: relative; width: 76px; height: 76px; margin-bottom: var(--sp-7); }
.gen-orbit .ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--green-soft); border-top-color: var(--green); animation: mg-spin 1s linear infinite; }
.gen-orbit .core { position: absolute; inset: 22px; border-radius: 50%; background: var(--green-soft); display: grid; place-items: center; color: var(--green-d); font-weight: var(--fw-extrabold); }
.gen-title { font-size: var(--fs-xl); font-weight: var(--fw-extrabold); letter-spacing: -.01em; }
.gen-sub { margin-top: var(--sp-3); color: var(--ink-2); }
.gen-steps { margin-top: var(--sp-7); display: flex; align-items: center; gap: var(--sp-3); }
.gen-step { display: flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--ink-3); font-weight: var(--fw-semibold); }
.gen-step .b { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.gen-step.active .b { background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.gen-step.done { color: var(--ink-2); }
.gen-step.done .b { background: var(--green); }
.gen-step .arr { color: var(--line); }

/* —— 假进度条（生成中卡片 + 浮窗）：0→99 三分钟，到 99 停住 —— */
.gen-progress { width: 100%; max-width: 240px; margin: var(--sp-6) auto 0; }
.gen-state .gen-progress { margin-top: var(--sp-7); }
.gen-progress-track { height: 6px; border-radius: var(--r-pill); background: rgba(11,168,74,.16); overflow: hidden; }
.gen-progress-fill { height: 100%; width: 0%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--green), var(--green-d)); transition: width .9s linear; }
.gen-progress-pct { margin-top: var(--sp-3); text-align: center; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* —— 部分数据 / 图降级 —— */
.partial-note { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-7); padding: var(--sp-4) var(--sp-6); background: var(--amber-soft); border: 1px solid #F4D9BF; color: #9A5A1E; border-radius: var(--r-lg); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.chart-fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); padding: var(--sp-10); background: var(--soft); border: 1px dashed var(--line); border-radius: var(--r-xl); color: var(--ink-3); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }

/* —— 骨架（浮窗内）—— */
.skeleton { border-radius: var(--r-sm); background: linear-gradient(90deg, var(--soft) 25%, #EFF2F5 37%, var(--soft) 63%); background-size: 480px 100%; animation: mg-shimmer 1.4s linear infinite; }
.skel-report .skeleton { margin-bottom: var(--sp-7); width: 100%; height: 13px; }
.skel-title { height: 28px; width: 60%; margin-bottom: var(--sp-9); }
.skel-thumb { height: 200px; border-radius: var(--r-lg); margin-bottom: var(--sp-9); }
.skel-w-60 { width: 60%; } .skel-w-90 { width: 90%; } .skel-w-75 { width: 75%; } .skel-w-40 { width: 40%; }