/* ============================================================================
   wb-ui · thinking-reasoning（思考态 + 推理文本展开）
   1:1 移植自 aicss.dev ThinkingReasoning.module.css（fetched 2026-08-13）。
   thinking 中：header shimmer「Thinking…」，句子流式浮现（视口 ≤180px 软
   遮罩自动上滚）；done：折叠为「Thought for Ns」可点击展开回看。
   整卡 data-state：running / ok / error（header 染 danger）/ empty。
   与 thinking-state 同源消费 workbench.thinking payload.text（契约 3.C.1）。
   零裸色：--wbui-tr-* + 全局 token。
   ========================================================================== */

.wbui-thinking-reasoning {
  display: flex;
  flex-direction: column;
  width: 360px;                 /* 上游原值 */
  max-width: 100%;
  /* 锚定 header：header(20) + 视口 margin(6) + 视口上限(180) */
  min-height: 206px;
  font-family: var(--wbui-sans);
  animation: wbui-tr-block-in 320ms var(--wbui-ease-smooth) both;
}
.wbui-thinking-reasoning[data-state="empty"] { display: none; }
@keyframes wbui-tr-block-in { from { opacity: 0; } to { opacity: 1; } }

.wbui-tr-header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  min-height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: default;
  font-family: inherit;
}
.wbui-tr-header.is-clickable { cursor: pointer; }

.wbui-tr-label {
  font-size: 13px;
  line-height: 18px;
  font-weight: var(--wbui-fw-medium);
  color: var(--wbui-tr-label);
  letter-spacing: -0.005em;
}
.wbui-tr-verb { color: var(--wbui-tr-verb); }
.wbui-thinking-reasoning[data-state="error"] .wbui-tr-label,
.wbui-thinking-reasoning[data-state="error"] .wbui-tr-verb { color: var(--wbui-danger); }

.wbui-tr-chevron {
  color: var(--wbui-tr-verb);
  transition: transform 280ms var(--wbui-ease-smooth);
  /* 基准路径是向上箭头；折叠态旋转朝下 */
  transform: rotate(180deg);
}
.wbui-tr-header[aria-expanded="true"] .wbui-tr-chevron { transform: rotate(0deg); }

.wbui-tr-collapsible {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 320ms var(--wbui-ease-smooth), opacity 220ms ease;
}
.wbui-tr-collapsible.is-collapsed { grid-template-rows: 0fr; opacity: 0; pointer-events: none; }
.wbui-tr-inner { min-height: 0; overflow: hidden; }

/* 视口：随内容长高到 180px 封顶；thinking 中软遮罩内自动上滚，
   done 展开后原生滚动 */
.wbui-tr-viewport {
  margin-top: 6px;
  overflow: hidden;
  transition: height 360ms var(--wbui-ease-smooth);
}
.wbui-tr-viewport.is-scroll { overflow-y: auto; scrollbar-width: none; }
.wbui-tr-viewport.is-scroll::-webkit-scrollbar { display: none; }

.wbui-tr-stream {
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform 560ms var(--wbui-ease-smooth);
  will-change: transform;
}
.wbui-tr-sentence {
  margin: 0;
  height: 40px;                 /* 2 行 × 20px，上游原值 */
  line-height: 20px;
  font-size: 13px;
  font-weight: var(--wbui-fw-regular);
  color: var(--wbui-tr-sentence);
  letter-spacing: -0.005em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  animation: wbui-tr-sentence-in 420ms var(--wbui-ease-smooth) both;
}
@keyframes wbui-tr-sentence-in { from { opacity: 0; } to { opacity: 1; } }

/* label-shine：亮度谷从右向左扫过（与 thinking-state 同款曲线与断点） */
.wbui-tr-shimmer {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(
    90deg,
    var(--wbui-label-shimmer-ink) 0%, var(--wbui-label-shimmer-ink) 30%,
    var(--wbui-label-shimmer-fade) 45%, var(--wbui-label-shimmer-fade) 55%,
    var(--wbui-label-shimmer-ink) 70%, var(--wbui-label-shimmer-ink) 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: wbui-tr-shine 2.25s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}
@keyframes wbui-tr-shine {
  0%, 18% { background-position: 100% 0; }
  82%, 100% { background-position: 0% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wbui-tr-shimmer {
    animation: none;
    color: var(--wbui-tr-verb);
    -webkit-text-fill-color: currentColor;
    background: none;
  }
  .wbui-tr-sentence, .wbui-thinking-reasoning { animation: none; }
}