/* ═══════════════════════════════════════════════════════════
   task_card.css — Evolving Task Card
   ONE component for the entire pipeline lifecycle.
   Replaces 8+ separate chat messages.
   ═══════════════════════════════════════════════════════════ */

.tc {
  background: var(--surface2, #18181b);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .3s;
}
.tc--done { border-color: rgba(163,255,71,.12); }

/* ── Header ── */
.tc__head {
  display: flex; gap: 8px; align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  animation: tcFadeIn .4s ease both;
}
.tc__thumb { width: 48px; aspect-ratio: 16/9; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.tc__info { flex: 1; min-width: 0; }
.tc__title { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc__meta { font-size: 9px; color: var(--muted); font-family: var(--mono); display: flex; gap: 6px; margin-top: 2px; }
.tc__lang { color: var(--accent); font-weight: 600; }
.tc__badge {
  font-size: 8px; font-weight: 700; font-family: var(--mono);
  padding: 2px 7px; border-radius: 6px;
  display: flex; align-items: center; gap: 3px;
  flex-shrink: 0; background: rgba(255,255,255,.05);
}
.tc__badge--completed { color: var(--accent); background: rgba(163,255,71,.08); }
.tc__badge--error { color: var(--error, #ef4444); background: rgba(239,68,68,.08); }
.tc__dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }

/* ── Pipeline ── */
.tc__pipe { padding: 10px 12px 8px; }
.tc__steps { display: flex; gap: 3px; margin-bottom: 6px; }
.tc__step { flex: 1; }
.tc__bar { height: 3px; border-radius: 2px; transition: all .4s; overflow: hidden; position: relative; }
.tc__bar--done { background: var(--accent); box-shadow: 0 0 4px var(--accent); }
.tc__bar--active,.tc__bar--running { background: rgba(163,255,71,.3); }
.tc__bar--active::after,.tc__bar--running::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: tcShimmer 1.5s infinite;
}
.tc__bar--pending { background: rgba(255,255,255,.06); }
.tc__slbl { font-size: 6px; font-weight: 700; text-align: center; margin-top: 3px; text-transform: uppercase; letter-spacing: .05em; display: flex; justify-content: center; gap: 2px; }
.tc__slbl--done { color: var(--accent); }
.tc__slbl--active,.tc__slbl--running { color: var(--text); }
.tc__slbl--pending { color: var(--subtle, #52525b); }
.tc__st { font-weight: 400; opacity: .6; }
.tc__total { height: 2px; border-radius: 1px; background: rgba(255,255,255,.05); overflow: hidden; }
.tc__fill { height: 100%; border-radius: 1px; background: linear-gradient(90deg, rgba(163,255,71,.4), var(--accent)); box-shadow: 0 0 6px var(--accent); transition: width .5s ease; }
.tc__msg { font-size: 9px; color: var(--muted); display: flex; align-items: center; gap: 4px; margin-top: 4px; min-height: 14px; }
.tc__pulse { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); animation: tcPulse 1.2s ease infinite; flex-shrink: 0; }

/* ── Section containers ── */
.tc__section { padding: 6px 12px; border-top: 1px solid var(--border); animation: tcFadeIn .3s ease both; }

/* ── Transcript ── */
.tc__transcript { font-size: 10px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.tc__preview { font-size: 9px; color: var(--subtle); font-style: italic; margin-top: 3px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tc__preview::before { content: '\201C'; }
.tc__preview::after { content: '\2026\201D'; }

/* ── Stat line (heatmap, etc.) ── */
.tc__stat-line { font-size: 10px; color: var(--muted); display: flex; align-items: center; gap: 5px; padding: 5px 12px; }

/* ── Segments ── */
.tc__segs-head { font-size: 9px; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.tc__scored { color: var(--accent); margin-left: auto; font-size: 8px; }
.tc__segs { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.tc__segs::-webkit-scrollbar { height: 0; }
.tc__segs--shuffle { animation: tcShuffle 1.5s ease; }
.tc__seg { position: relative; flex-shrink: 0; width: 42px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); transition: all .2s; animation: tcSegIn .25s ease both; }
.tc__seg--on { border-color: var(--accent); box-shadow: 0 0 6px rgba(163,255,71,.15); }
.tc__seg--off { opacity: .5; }
.tc__seg img { width: 100%; aspect-ratio: 9/16; object-fit: cover; display: block; }
.tc__seg-ph { width: 100%; aspect-ratio: 9/16; background: var(--surface3); display: grid; place-items: center; font-size: 7px; color: var(--muted); font-family: var(--mono); }
.tc__seg-r { position: absolute; top: 2px; left: 3px; font-size: 7px; font-weight: 800; color: var(--accent); }
.tc__seg-s { position: absolute; bottom: 2px; right: 3px; font-size: 8px; font-weight: 700; color: var(--text); font-family: var(--mono); animation: tcScoreIn .3s ease both; }

/* ── Candidate nodes ── */
.tc__nodes { display: flex; flex-direction: column; gap: 2px; }
.tc__node { display: flex; gap: 5px; align-items: center; padding: 4px 5px; border-left: 2px solid var(--accent); background: var(--surface3); border-radius: 0 5px 5px 0; font-size: 9px; animation: tcNodeIn .3s ease both; }
.tc__node--on { border-left-color: var(--success, #10b981); box-shadow: 0 0 6px rgba(16,185,129,.1); }
.tc__node-ph { width: 24px; height: 14px; background: var(--surface2); border-radius: 2px; display: grid; place-items: center; font-size: 7px; color: var(--muted); font-family: var(--mono); flex-shrink: 0; }
.tc__node-info { flex: 1; min-width: 0; }
.tc__node-time { font-size: 8px; color: var(--muted); font-family: var(--mono); }
.tc__node-text { font-size: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc__node-score { font-size: 9px; font-weight: 700; font-family: var(--mono); color: var(--muted); flex-shrink: 0; }
.tc__node-score--on { color: var(--accent); }
.tc__nodes-more { font-size: 8px; color: var(--subtle); text-align: center; padding: 3px; }

/* ── Funnel ── */
.tc__funnel { display: flex; gap: 10px; font-size: 10px; color: var(--muted); flex-wrap: wrap; padding: 6px 12px; }
.tc__funnel-ok { color: var(--success, #10b981); }
.tc__funnel-dim { color: var(--subtle); }
.tc__funnel-model { opacity: .4; font-family: var(--mono); font-size: 9px; }

/* ── Clips ── */
.tc__clips { border-top: 1px solid var(--border); }
.tc__clips-head { padding: 8px 12px 4px; font-size: 11px; font-weight: 700; }
.tc__clips-ok { color: var(--accent); display: flex; align-items: center; gap: 4px; }
.tc__clips-wip { color: var(--muted); }
.tc__clip {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; cursor: pointer;
  border-top: 1px solid var(--border);
  transition: background .15s;
  animation: tcSlideUp .3s ease both;
}
.tc__clip:first-of-type { border-top: none; }
.tc__clip:hover { background: rgba(255,255,255,.03); }
.tc__clip--done { }

/* Clip thumbnail */
.tc__clip-thumb { width: 38px; height: 52px; border-radius: 7px; overflow: hidden; flex-shrink: 0; border: 1.5px solid var(--border); position: relative; }
.tc__clip--done .tc__clip-thumb { border-color: rgba(163,255,71,.15); }
.tc__clip-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tc__clip-wip { width: 100%; height: 100%; background: var(--surface3); display: grid; place-items: center; }
.tc__clip-wip { display: flex; gap: 2px; align-items: flex-end; justify-content: center; height: 100%; padding-bottom: 12px; }
.tc__clip-wip span { width: 3px; background: var(--accent); border-radius: 1px; animation: tcWipBar .7s ease infinite alternate; }
.tc__clip-wip span:nth-child(1) { height: 6px; animation-delay: 0s; }
.tc__clip-wip span:nth-child(2) { height: 10px; animation-delay: .1s; }
.tc__clip-wip span:nth-child(3) { height: 14px; animation-delay: .2s; }
.tc__clip-wip span:nth-child(4) { height: 8px; animation-delay: .3s; }
.tc__clip-wip span:nth-child(5) { height: 12px; animation-delay: .4s; }

.tc__clip-body { flex: 1; min-width: 0; }
.tc__clip-title { font-size: 10px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc__clip--done .tc__clip-title { font-weight: 700; }
.tc__clip-meta { font-size: 8px; color: var(--muted); display: flex; gap: 5px; margin-top: 2px; }
.tc__clip-score { font-family: var(--mono); font-weight: 700; }
.tc__clip--done .tc__clip-score { color: var(--accent); }
.tc__clip-hook { color: var(--accent); }
.tc__clip-badge { color: var(--accent); font-weight: 600; }
.tc__clip-detail { font-size: 7px; color: var(--subtle); font-family: var(--mono); display: flex; gap: 6px; margin-top: 2px; }

/* ── Timing ── */
.tc__timing { padding: 5px 12px; border-top: 1px solid var(--border); font-size: 8px; color: var(--subtle); font-family: var(--mono); }

/* ── Animations ── */
@keyframes tcFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes tcSlideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tcShimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
@keyframes tcPulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes tcShuffle { 0% { opacity: .4; } 50% { opacity: .7; } 100% { opacity: 1; } }
@keyframes tcSegIn { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@keyframes tcScoreIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tcNodeIn { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: translateX(0); } }
@keyframes tcWipBar { 0% { transform: scaleY(.5); } 100% { transform: scaleY(1.3); } }