/* ==========================================================
   20-components.css  通用组件
   ========================================================== */

/* ---------- 导航栏 ---------- */
.nav {
  flex: 0 0 var(--h-nav);
  height: var(--h-nav);
  display: flex; align-items: center;
  padding: 0 var(--s3);
  background: rgba(247,248,250,.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
  position: relative; z-index: 20;
}
.nav.scrolled { border-bottom-color: var(--c-line); }
.nav-title {
  flex: 1 1 auto; min-width: 0;
  text-align: center;
  font-size: var(--f-md); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0 var(--s2);
}
.nav-side { flex: 0 0 auto; min-width: 44px; display: flex; align-items: center; gap: 2px; }
.nav-side.right { justify-content: flex-end; }
.nav-btn {
  height: 36px; min-width: 36px; padding: 0 var(--s2);
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  border-radius: var(--r-md);
  color: var(--c-primary); font-size: var(--f-bd);
  transition: background .15s, transform .1s;
}
.nav-btn:active { background: var(--c-primary-w); transform: scale(.94); }
.nav-btn.plain { color: var(--c-text-2); }
.nav-btn.danger { color: var(--c-danger); }

/* Large title */
.ltitle { padding: var(--s2) 0 var(--s4); }
.ltitle h1 { font-size: var(--f-xl); font-weight: 600; letter-spacing: -.5px; line-height: 1.25; }
.ltitle .sub { margin-top: 3px; font-size: var(--f-sm); color: var(--c-text-2); }

/* ---------- Tabbar ---------- */
#tabbar {
  flex: 0 0 var(--h-tab);
  height: var(--h-tab);
  display: flex;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--c-line);
  position: relative; z-index: 25;
}
#tabbar.hidden { display: none; }
.tab-item {
  flex: 1 1 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  color: var(--c-text-3); font-size: var(--f-xs);
  padding-top: 6px;
  transition: color .15s;
  position: relative;
}
.tab-item.on { color: var(--c-primary); }
.tab-item:active { opacity: .6; }
.tab-item svg { width: 23px; height: 23px; }
.tab-dot {
  position: absolute; top: 5px; left: 50%; margin-left: 7px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--r-full);
  background: var(--c-danger); color: #fff;
  font-size: 10px; line-height: 16px; font-weight: 600;
  text-align: center;
}

/* ---------- FAB ---------- */
#fab {
  position: absolute;
  right: 18px; bottom: 18px;
  width: 54px; height: 54px;
  border-radius: var(--r-full);
  background: var(--c-primary);
  box-shadow: 0 6px 18px rgba(75,99,240,.36);
  display: flex; align-items: center; justify-content: center;
  color: #fff; z-index: 22;
  transition: transform .14s var(--ease), opacity .18s;
}
#fab:active { transform: scale(.9); }
#fab.hidden { opacity: 0; pointer-events: none; transform: scale(.7); }
#fab svg { width: 26px; height: 26px; }

/* ---------- 卡片 ---------- */
.card {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  padding: var(--s4);
  box-shadow: var(--sh-1);
  border: 1px solid var(--c-line);
}
.card + .card { margin-top: var(--s3); }
.card.tap { transition: transform .12s var(--ease), box-shadow .15s; }
.card.tap:active { transform: scale(.985); box-shadow: var(--sh-2); }
.card.flat { box-shadow: none; }
.card.tight { padding: var(--s3); }

.card-list { display: flex; flex-direction: column; gap: var(--s3); }

/* 分组标题 */
.sec-title {
  display: flex; align-items: center; gap: var(--s2);
  margin: var(--s6) 0 var(--s3);
  font-size: var(--f-sm); font-weight: 600; color: var(--c-text-2);
  letter-spacing: .3px;
}
.sec-title:first-child { margin-top: var(--s2); }
.sec-title .bar { width: 3px; height: 13px; border-radius: 2px; background: var(--c-primary); }
.sec-title .cnt { color: var(--c-text-3); font-weight: 400; }
.sec-title .act { margin-left: auto; color: var(--c-primary); font-weight: 400; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 44px; padding: 0 var(--s5);
  border-radius: var(--r-md);
  background: var(--c-primary); color: #fff;
  font-size: var(--f-bd); font-weight: 500;
  transition: transform .1s, opacity .15s, background .15s;
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; pointer-events: none; }
.btn.block { width: 100%; }
.btn.sm { height: 34px; padding: 0 var(--s3); font-size: var(--f-sm); border-radius: var(--r-sm); }
.btn.xs { height: 28px; padding: 0 10px; font-size: var(--f-xs); border-radius: var(--r-sm); gap:4px; }
.btn.lg { height: 50px; font-size: var(--f-md); border-radius: var(--r-lg); }
.btn.ghost { background: var(--c-primary-w); color: var(--c-primary); }
.btn.line  { background: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-line-2); }
.btn.plain { background: var(--c-surface-2); color: var(--c-text-2); }
.btn.ai    { background: var(--c-ai); }
.btn.ai-ghost { background: var(--c-ai-w); color: var(--c-ai); }
.btn.ok    { background: var(--c-success); }
.btn.warn-ghost { background: var(--c-warn-w); color: var(--c-warn); }
.btn.danger-ghost { background: var(--c-danger-w); color: var(--c-danger); }
.btn svg { width: 15px; height: 15px; flex: 0 0 auto; }
.btn.xs svg { width: 13px; height: 13px; }

.btn-row { display: flex; gap: var(--s2); }
.btn-row .btn { flex: 1 1 0; }

/* ---------- 徽章 / 标签 ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 3px;
  height: 21px; padding: 0 7px;
  border-radius: var(--r-sm);
  font-size: var(--f-xs); font-weight: 500;
  background: var(--c-surface-2); color: var(--c-text-2);
  white-space: nowrap;
}
.tag.pri  { background: var(--c-primary-w); color: var(--c-primary); }
.tag.ai   { background: var(--c-ai-w);      color: var(--c-ai); }
.tag.ok   { background: var(--c-success-w);  color: var(--c-success); }
.tag.warn { background: var(--c-warn-w);     color: var(--c-warn); }
.tag.dg   { background: var(--c-danger-w);   color: var(--c-danger); }
.tag.line { background: transparent; border: 1px solid var(--c-line-2); color: var(--c-text-3); }
.tag svg { width: 11px; height: 11px; }

.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-line-2); flex: 0 0 auto; }
.dot.on   { background: var(--c-success); }
.dot.pend { background: var(--c-warn); }

.tags { display: flex; flex-wrap: wrap; gap: 5px; }

/* ---------- 环形进度 ---------- */
.ring {
  position: relative; flex: 0 0 auto;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.ring::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--rc, var(--c-primary)) calc(var(--p,0) * 1%), var(--c-surface-3) 0);
}
.ring::after {
  content: ''; position: absolute; inset: 4px; border-radius: 50%;
  background: var(--c-surface);
}
.ring-txt {
  position: relative; z-index: 1;
  font-size: var(--f-xs); font-weight: 600; color: var(--c-text-2);
  letter-spacing: -.3px;
}
.ring.lg { width: 62px; height: 62px; }
.ring.lg::after { inset: 5px; }
.ring.lg .ring-txt { font-size: var(--f-sm); }
.ring.sm { width: 34px; height: 34px; }
.ring.sm::after { inset: 3px; }
.ring.sm .ring-txt { font-size: 10px; }

/* 线性进度 */
.bar-wrap { height: 6px; border-radius: 3px; background: var(--c-surface-3); overflow: hidden; }
.bar-wrap > i { display: block; height: 100%; border-radius: 3px; background: var(--c-primary); transition: width .45s var(--ease); }
.bar-wrap.ok > i { background: var(--c-success); }

/* ---------- 输入 ---------- */
.field-in, .ta {
  width: 100%;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 11px var(--s3);
  font-size: var(--f-bd);
  line-height: 1.6;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
  -webkit-appearance: none;
}
.field-in:focus, .ta:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-w);
}
.ta { resize: none; min-height: 92px; display: block; }
.ta.tall { min-height: 180px; }
.ta.xtall { min-height: 260px; }
.field-in::placeholder, .ta::placeholder { color: var(--c-text-4); }

.in-label { font-size: var(--f-sm); font-weight: 600; color: var(--c-text-2); margin-bottom: 6px; }
.in-hint  { font-size: var(--f-xs); color: var(--c-text-3); margin-top: 5px; line-height: 1.5; }
.in-group + .in-group { margin-top: var(--s4); }
.in-count { font-size: var(--f-xs); color: var(--c-text-3); text-align: right; margin-top: 4px; }

/* 选择器 chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  height: 32px; padding: 0 var(--s3);
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: var(--r-full);
  background: var(--c-surface); border: 1px solid var(--c-line-2);
  font-size: var(--f-sm); color: var(--c-text-2);
  transition: all .15s;
}
.chip.on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; font-weight: 500; }
.chip:active { transform: scale(.95); }
.chip.ai.on { background: var(--c-ai); border-color: var(--c-ai); }

/* 分段控制器 */
.seg {
  display: flex; padding: 3px; gap: 2px;
  background: var(--c-surface-2); border-radius: var(--r-md);
}
.seg-item {
  flex: 1 1 0; height: 34px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  border-radius: 7px;
  font-size: var(--f-sm); color: var(--c-text-2);
  transition: all .18s var(--ease);
}
.seg-item.on { background: var(--c-surface); color: var(--c-text); font-weight: 600; box-shadow: var(--sh-1); }

/* 复选 */
.cbox {
  width: 21px; height: 21px; flex: 0 0 auto;
  border-radius: 6px; border: 1.5px solid var(--c-line-2);
  background: var(--c-surface);
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.cbox.on { background: var(--c-primary); border-color: var(--c-primary); }
.cbox svg { width: 13px; height: 13px; color: #fff; opacity: 0; transition: opacity .12s; }
.cbox.on svg { opacity: 1; }
.cbox.ai.on { background: var(--c-ai); border-color: var(--c-ai); }

/* ---------- 列表行 ---------- */
.lrow {
  display: flex; align-items: center; gap: var(--s3);
  padding: 13px var(--s4);
  background: var(--c-surface);
  transition: background .12s;
}
.lrow:active { background: var(--c-surface-2); }
.lgroup { background: var(--c-surface); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--c-line); }
.lgroup .lrow + .lrow { border-top: 1px solid var(--c-line); }
.chev { flex: 0 0 auto; color: var(--c-text-4); width: 16px; height: 16px; }

/* ---------- 空状态 ---------- */
.empty {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: var(--s7) var(--s5);
}
.empty .ico { margin-bottom: var(--s4); opacity: .9; }
.empty h3 { font-size: var(--f-md); font-weight: 600; margin-bottom: 6px; }
.empty p { font-size: var(--f-sm); color: var(--c-text-2); line-height: 1.65; max-width: 270px; }
.empty .acts { margin-top: var(--s5); display: flex; flex-direction: column; gap: var(--s2); width: 100%; max-width: 260px; }

/* 虚线占位 */
.dashed {
  border: 1.5px dashed var(--c-line-2);
  border-radius: var(--r-lg);
  padding: var(--s4);
  background: rgba(255,255,255,.5);
}
.dashed.ai { border-color: var(--c-ai-w2); background: rgba(241,237,254,.4); }

/* ---------- Sheet ---------- */
#mask {
  position: absolute; inset: 0; z-index: 50;
  background: rgba(16,24,43,.42);
  opacity: 0; pointer-events: none;
  transition: opacity .26s var(--ease);
}
#mask.on { opacity: 1; pointer-events: auto; }

#sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 51;
  background: var(--c-surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  transform: translateY(101%);
  transition: transform .3s var(--ease);
  max-height: 86%;
  display: flex; flex-direction: column;
  box-shadow: var(--sh-4);
}
#sheet.on { transform: translateY(0); }
.sheet-head {
  flex: 0 0 auto; padding: var(--s4) var(--s4) var(--s3);
  display: flex; align-items: center; gap: var(--s3);
  border-bottom: 1px solid var(--c-line);
}
.sheet-head .grab {
  position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 4px; border-radius: 2px; background: var(--c-line-2);
}
.sheet-title { font-size: var(--f-md); font-weight: 600; flex: 1 1 auto; min-width: 0; }
.sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--s4); }
.sheet-body::-webkit-scrollbar { width: 0; }
.sheet-foot { flex: 0 0 auto; padding: var(--s3) var(--s4) var(--s5); border-top: 1px solid var(--c-line); }
@media (min-width: 640px) { .sheet-foot { padding-bottom: var(--s7); } #sheet { max-height: 80%; } }

.sheet-opt {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s2);
  border-radius: var(--r-md);
  transition: background .12s;
}
.sheet-opt:active { background: var(--c-surface-2); }
.sheet-opt .oi {
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
}
.sheet-opt .oi svg { width: 20px; height: 20px; }

/* ---------- Toast ---------- */
#toast-wrap {
  position: absolute; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center;
  padding: var(--s3) var(--s4) 0;
  pointer-events: none;
}
@media (min-width: 640px) { #toast-wrap { padding-top: 50px; } }
.toast {
  max-width: 100%;
  display: flex; align-items: center; gap: var(--s3);
  padding: 10px var(--s3) 10px var(--s4);
  border-radius: var(--r-full);
  background: rgba(16,24,43,.94);
  color: #fff; font-size: var(--f-sm);
  box-shadow: var(--sh-3);
  animation: toastIn .3s var(--ease) both;
  pointer-events: auto;
}
.toast.out { animation: toastOut .24s var(--ease) both; }
.toast .undo {
  color: #8FA3FF; font-weight: 600; white-space: nowrap;
  padding: 2px 8px; margin-left: 2px;
}
@keyframes toastIn  { from { opacity:0; transform: translateY(-16px) scale(.94);} to { opacity:1; transform:none;} }
@keyframes toastOut { to { opacity:0; transform: translateY(-10px) scale(.96);} }

/* ---------- 骨架屏 ---------- */
.sk { border-radius: var(--r-sm); background: var(--c-surface-2); overflow: hidden; position: relative; }
.sk::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  animation: shimmer 1.25s infinite;
}
@keyframes shimmer { 0% { transform: translateX(-100%);} 100% { transform: translateX(100%);} }
.sk-line { height: 13px; margin-bottom: 9px; }
.sk-line:last-child { margin-bottom: 0; }
.sk-lines .sk-line:nth-child(1) { width: 100%; }
.sk-lines .sk-line:nth-child(2) { width: 92%; }
.sk-lines .sk-line:nth-child(3) { width: 66%; }

/* AI 思考中 */
.thinking {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--f-sm); color: var(--c-ai);
}
.thinking .dots { display: flex; gap: 3px; }
.thinking .dots i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--c-ai);
  animation: bounce 1.1s infinite;
}
.thinking .dots i:nth-child(2) { animation-delay: .16s; }
.thinking .dots i:nth-child(3) { animation-delay: .32s; }
@keyframes bounce { 0%,60%,100% { opacity:.28; transform: translateY(0);} 30% { opacity:1; transform: translateY(-4px);} }

/* 打字机光标 */
.tw-cursor {
  display: inline-block; width: 2px; height: 1em;
  background: var(--c-ai); margin-left: 1px;
  vertical-align: -.15em;
  animation: blink .85s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- AI 产出块 ---------- */
.ai-block {
  border-left: 3px solid var(--c-ai);
  background: var(--c-ai-w);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--s3) var(--s3) var(--s3) var(--s3);
}
.ai-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--f-xs); font-weight: 600; color: var(--c-ai);
}
.ai-badge svg { width: 12px; height: 12px; }

/* 缺口提示 */
.gap-block {
  border: 1px dashed var(--c-warn);
  background: var(--c-warn-w);
  border-radius: var(--r-md);
  padding: var(--s3);
  font-size: var(--f-sm); color: #96620E;
  line-height: 1.6;
}
.gap-block .gt { font-weight: 600; color: var(--c-warn); display: flex; align-items: center; gap: 5px; margin-bottom: 3px; }
.gap-block .gt svg { width: 13px; height: 13px; }

/* 引用原文 */
.quote {
  border-left: 2px solid var(--c-line-2);
  padding-left: var(--s3);
  font-size: var(--f-sm); color: var(--c-text-2);
  line-height: 1.6;
}
mark {
  background: #FFF2C7; color: inherit;
  padding: 1px 2px; border-radius: 3px;
}
mark.ai { background: var(--c-ai-w2); }
mark.ok { background: #CFF0E3; }

/* 指标胶囊 */
.metric {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 3px 9px; border-radius: var(--r-sm);
  background: var(--c-surface-2);
  font-size: var(--f-sm);
}
.metric .mn { color: var(--c-text-2); font-size: var(--f-xs); }
.metric .mv { font-weight: 600; font-variant-numeric: tabular-nums; }
.metric .md { font-size: var(--f-xs); font-weight: 600; color: var(--c-success); }
.metric .md.down { color: var(--c-danger); }

/* 顶部提示条 */
#warnbar {
  flex: 0 0 auto;
  padding: 7px var(--s4);
  background: var(--c-warn-w);
  color: #8A5A08;
  font-size: var(--f-xs);
  display: none;
  text-align: center;
  border-bottom: 1px solid rgba(229,149,27,.25);
}
#warnbar.on { display: block; }