/* ============================================================================
   wb-ui · task-list（To-do 待办清单）
   1:1 移植自 aicss.dev TodoList.module.css（fetched 2026-08-13）。
   头部：清单图标（hover 换折叠箭头）/ 进行中饼图 / 完成实心勾 + 滚动计数；
   条目三态：pending（虚线圈灰）/ active（箭头 + 标签 shimmer）/
   done（勾 + 删除线）。整卡 data-state：running / ok / error / empty。
   数据源降级（契约 OQ-3）：无 todo 类 run event，消费 assistant markdown
   的 task-list 语法（- [ ] / - [x]），见 fromMarkdown。零裸色。
   ========================================================================== */

.wbui-task-list {
  font-family: var(--wbui-sans);
  font-size: 13px;
  color: var(--wbui-ink);
  background: var(--wbui-surface);
  border-radius: 8px;           /* 上游原值 */
  padding: 6px 12px 12px;
  box-shadow: var(--wbui-cb-ring);
}
.wbui-task-list[data-state="empty"] { display: none; }

.wbui-todo-head {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--wbui-ink);
  font-size: 13px;
  font-family: inherit;
  min-height: 22px;
}
.wbui-todo-head-icon { position: relative; width: 16px; height: 16px; flex: none; color: var(--wbui-ink-2); }
.wbui-todo-list-icon, .wbui-todo-chevron, .wbui-todo-head-check {
  position: absolute;
  inset: 0;
  margin: auto;
  transition: opacity 140ms ease;
}
.wbui-todo-list-icon, .wbui-todo-chevron { width: 13px; height: 13px; }
/* 实心勾视觉上偏小，按上游放满 16px */
.wbui-todo-head-check { width: 16px; height: 16px; color: var(--wbui-ok); }
.wbui-task-list[data-state="error"] .wbui-todo-head-check { color: var(--wbui-danger); }
.wbui-todo-chevron { opacity: 0; transition: opacity 140ms ease, transform 220ms ease; }
.wbui-todo-head[aria-expanded="false"] .wbui-todo-chevron { transform: rotate(-90deg); }
.wbui-todo-head:hover .wbui-todo-list-icon,
.wbui-todo-head:hover .wbui-todo-head-pie,
.wbui-todo-head:hover .wbui-todo-head-check { opacity: 0; }
.wbui-todo-head:hover .wbui-todo-chevron { opacity: 1; }
.wbui-todo-title { font-weight: var(--wbui-fw-medium); }
.wbui-todo-count { margin-left: auto; color: var(--wbui-ink-2); font-variant-numeric: tabular-nums; }

/* 计数滚动位（上游 RollDigit：旧字上滚出、新字滚入） */
.wbui-roll-count { display: inline-flex; align-items: baseline; }
.wbui-roll-digit { display: inline-block; overflow: hidden; height: 1em; line-height: 1em; }
.wbui-roll-inner { display: flex; flex-direction: column; transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1); }
.wbui-roll-inner span { height: 1em; line-height: 1em; }
.wbui-roll-inner.on { transform: translateY(-1em); }

.wbui-todo-collapsible {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 280ms ease, opacity 200ms ease;
}
.wbui-todo-collapsible.is-collapsed { grid-template-rows: 0fr; opacity: 0; pointer-events: none; }
.wbui-todo-inner { min-height: 0; overflow: hidden; }
.wbui-todo-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 10px 0 0; }

.wbui-todo-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  line-height: 18px;
  color: var(--wbui-ink-2);
  animation: wbui-todo-item-in 360ms ease backwards;
  animation-delay: calc(var(--i, 0) * 50ms);
}
@keyframes wbui-todo-item-in {
  from { opacity: 0; transform: translateY(-7px); }
  to { opacity: 1; transform: translateY(0); }
}
.wbui-todo-icon-wrap { position: relative; width: 16px; height: 16px; flex: none; margin-top: 1px; }
.wbui-todo-icon {
  position: absolute;
  inset: 0;
  width: 16px;
  height: 16px;
  color: var(--wbui-ink-2);
  opacity: 0;
  transition: opacity 320ms ease;
}
.wbui-todo-icon.on { opacity: 1; }
.wbui-todo-icon.strong { color: var(--wbui-ink); }

.wbui-todo-label {
  position: relative;
  font-weight: var(--wbui-fw-regular);
  color: var(--wbui-ink-2);
  transition: color 360ms ease;
}
/* 灰标签与深色 shimmer 交叉淡入（上游 ::before + data-label 方案） */
.wbui-todo-label::before {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--wbui-todo-shimmer-ink) 0%, var(--wbui-todo-shimmer-ink) 30%,
    var(--wbui-todo-shimmer-fade) 45%, var(--wbui-todo-shimmer-fade) 55%,
    var(--wbui-todo-shimmer-ink) 70%, var(--wbui-todo-shimmer-ink) 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  transition: opacity 360ms ease;
  pointer-events: none;
}
.wbui-todo-item.active .wbui-todo-label { color: transparent; }
.wbui-todo-item.active .wbui-todo-label::before {
  opacity: 1;
  animation: wbui-todo-shine 2.25s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}
.wbui-todo-item.done .wbui-todo-label { color: var(--wbui-ink-2); text-decoration: line-through; }
@keyframes wbui-todo-shine {
  0%, 18% { background-position: 100% 0; }
  82%, 100% { background-position: 0% 0; }
}

/* 头部进行中饼图：确定性填充 = 完成数/总数 */
@property --wbui-todo-pie {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}
.wbui-todo-head-pie {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  color: var(--wbui-ink);
  transition: opacity 140ms ease, --wbui-todo-pie 400ms ease;
}
.wbui-todo-head-pie-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: var(--wbui-ink-2); }
.wbui-todo-head-pie::after {
  content: "";
  position: absolute;
  inset: 2.6px;
  border-radius: 50%;
  background: conic-gradient(currentColor var(--wbui-todo-pie, 0%), transparent 0);
}

@media (prefers-reduced-motion: reduce) {
  .wbui-todo-item { animation: none; }
  .wbui-todo-icon, .wbui-todo-label, .wbui-todo-label::before { transition: none; }
  .wbui-todo-item.active .wbui-todo-label::before { animation: none; }
}