/* 작업 에이전트에 맡긴 일의 말풍선 — static/js/task_agent.js 가 그린다(.ta).
   머리 줄("작업 중 · 12초" / "5단계로 작업함 · 41초") → 단계(펼치면 코드·출력·출처) → 그림 → 답 → 파일 카드. */

.summet-msg__bubble--task { width: min(100%, 720px); }

.ta { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* ── 머리 ─────────────────────────────────────────────────────────── */
.ta__head {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  padding: 2px 0; border: 0; background: none; cursor: pointer;
  color: var(--text-secondary, #64748b); font: inherit; font-size: 13.5px; font-weight: 500;
}
.ta__spark {
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #7cc4ff, #0082FF 70%);
  animation: ta-breathe 1.6s ease-in-out infinite;
}
.ta--done .ta__spark { animation: none; opacity: .7; }
.ta--failed .ta__spark, .ta--cancelled .ta__spark { animation: none; filter: grayscale(1); opacity: .55; }
.ta--running .ta__label { color: var(--text-color); font-weight: 600; }
.ta__chev { display: inline-block; transition: transform .15s ease; }
.ta__head[aria-expanded="true"] .ta__chev { transform: rotate(90deg); }
@keyframes ta-breathe { 0%, 100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1); } }

/* ── 단계 ─────────────────────────────────────────────────────────── */
.ta__steps { list-style: none; margin: 0; padding: 0 0 0 7px; border-left: 2px solid var(--border-color, rgba(148, 163, 184, .35)); display: flex; flex-direction: column; gap: 4px; }
.ta__steps[hidden] { display: none; }
.ta-step__row {
  display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0;
  padding: 6px 10px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  color: var(--text-color); font: inherit; font-size: 13.5px; text-align: left;
}
.ta-step__row:hover { background: color-mix(in srgb, var(--text-color, #111) 6%, transparent); }
.ta-step__row--plain { cursor: default; }
.ta-step__row--plain:hover { background: none; }
.ta-step__icon { display: inline-flex; flex: 0 0 auto; color: var(--text-secondary, #64748b); }
.ta-step__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-step__state { flex: 0 0 auto; width: 14px; height: 14px; }
.ta-step--running .ta-step__icon { color: #0082FF; }
.ta-step--running .ta-step__state { border: 2px solid color-mix(in srgb, #0082FF 30%, transparent); border-top-color: #0082FF; border-radius: 50%; animation: ta-spin .8s linear infinite; }
.ta-step--done .ta-step__state { background: no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='3'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); }
.ta-step--error .ta-step__state { background: no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f97316' stroke-width='3'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
@keyframes ta-spin { to { transform: rotate(360deg); } }

.ta-step__body { margin: 2px 0 6px 34px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ta-step__body[hidden] { display: none; }
.ta-step__cap { font-size: 12px; font-weight: 600; color: var(--text-secondary, #64748b); }
/* 말풍선의 마크다운 pre 규칙(.summet-msg__bubble--md pre, 다크 테마 포함)보다 앞서야 한다 — 밝은 바탕에 밝은 글자가 됐다. */
.ta pre.ta-step__code, .ta pre.ta-step__out,
[data-theme="dark"] .ta pre.ta-step__code, [data-theme="dark"] .ta pre.ta-step__out {
  margin: 0; padding: 10px 12px; border: 0; border-radius: 8px; max-height: 320px; overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.5;
  white-space: pre; background: #0f1115; color: #e4e4e7;
}
.ta pre.ta-step__out { white-space: pre-wrap; word-break: break-word; }
.ta pre.ta-step__out--err { color: #fdba74; }
.ta-step__link { font-size: 12.5px; color: #0082FF; word-break: break-all; }
.ta-step__sources { margin: 0; padding-left: 18px; font-size: 12.5px; }
.ta-step__sources a { color: #0082FF; text-decoration: none; }
.ta-note { padding: 2px 10px 2px 34px; font-size: 13px; color: var(--text-secondary, #64748b); }

/* ── 그림 ─────────────────────────────────────────────────────────── */
/* 움직이는 그림(Anatomy) — 격리 iframe 하나와 아래 단추 줄. 그림 페이지가 제 바탕을 칠한다. */
.ta__figure { border: 1px solid var(--border-color, rgba(148, 163, 184, .35)); border-radius: 12px; overflow: hidden; }
.ta__figure[hidden] { display: none; }
.ta-figure__frame { display: block; width: 100%; height: 620px; border: 0; background: transparent; }
.ta-figure__frame:fullscreen { height: 100%; background: #111; }
.ta-figure__bar { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--border-color, rgba(148, 163, 184, .35)); }
.ta__gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.ta__gallery[hidden] { display: none; }
.ta-image {
  display: block; min-height: 120px; padding: 0; border-radius: 10px; overflow: hidden; cursor: zoom-in;
  border: 1px solid var(--border-color, rgba(148, 163, 184, .35)); background: #fff;
}
.ta-image img { display: block; width: 100%; height: auto; }
.ta-image--missing { cursor: default; background: var(--surface-color, #f8fafc); }

/* ── 답 ───────────────────────────────────────────────────────────── */
.ta__answer[hidden] { display: none; }

/* ── 파일 카드 ────────────────────────────────────────────────────── */
.ta__files { display: flex; flex-direction: column; gap: 8px; }
.ta__files[hidden] { display: none; }
.ta-file {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--border-color, rgba(148, 163, 184, .35)); background: var(--surface-color, #fff);
}
.ta-file__badge {
  flex: 0 0 auto; min-width: 42px; padding: 6px 6px; border-radius: 8px; text-align: center;
  font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #fff; background: #64748b;
}
.ta-file__badge--pdf { background: #e5484d; }
.ta-file__badge--docx, .ta-file__badge--doc { background: #2b6cde; }
.ta-file__badge--xlsx, .ta-file__badge--xls, .ta-file__badge--csv { background: #1f9d55; }
.ta-file__badge--pptx { background: #e8590c; }
.ta-file__meta { flex: 1; min-width: 0; }
.ta-file__name { font-size: 14px; font-weight: 600; color: var(--text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-file__size { font-size: 12px; color: var(--text-secondary, #64748b); }
.ta-file__btn {
  flex: 0 0 auto; padding: 6px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border-color, rgba(148, 163, 184, .45)); background: none;
  color: var(--text-color); font: inherit; font-size: 13px; font-weight: 500;
}
.ta-file__btn:hover { background: color-mix(in srgb, var(--text-color, #111) 6%, transparent); }
.ta-file__btn:disabled { opacity: .55; cursor: progress; }

@media (max-width: 560px) {
  .ta-file { flex-wrap: wrap; }
  .ta-file__meta { flex-basis: calc(100% - 60px); }
  .ta-step__body { margin-left: 8px; }
}