/* 오래 걸리는 답의 진행 표시 — 대화 안(.cp). chat_progress.js 가 그린다.
   단계가 있으면(.cp--work) 홈 작업 에이전트(task_agent.css 의 .ta)와 같은 모양 — 값이 같은지는
   tests/js/chat_progress_css.test.js 가 본다. */

/* ── 머리: 생각이면 반짝임 + "생각 중 · N초", 작업이면 파란 구슬 + "작업 중 · N초 ›"(누르면 단계를 접고 편다) ── */
.cp { display: flex; flex-direction: column; padding: 4px 0 2px; font-size: 14px; color: var(--text-color); max-width: 100%; }
.cp__head {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-align: left; cursor: default;
}
.cp__spark { width: 18px; height: 18px; display: inline-block; object-fit: contain; animation: cp-breathe 1.6s ease-in-out infinite; }
.cp--done .cp__spark { animation: none; opacity: .75; }
.cp--fail .cp__spark { animation: none; filter: grayscale(1); opacity: .6; }
.cp__dot { color: var(--text-secondary, #94a3b8); font-weight: 400; }
.cp__time { color: var(--text-secondary, #64748b); font-weight: 500; font-variant-numeric: tabular-nums; }
.cp__dot[hidden], .cp__time[hidden] { display: none; }
.cp__orb, .cp__chev { display: none; }
@keyframes cp-breathe { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1); } }

/* 끝난 뒤: 한 줄로 조용히 */
.cp--done .cp__head { font-weight: 500; color: var(--text-secondary, #64748b); font-size: 13px; }

/* 작업 머리 — .ta__head 와 같다 */
.cp--work .cp__head { padding: 2px 0; cursor: pointer; color: var(--text-secondary, #64748b); font-size: 13.5px; font-weight: 500; }
.cp--work:not(.cp--done) .cp__title { color: var(--text-color); font-weight: 600; }
.cp--work .cp__spark { display: none; }
.cp--work .cp__orb {
  display: inline-block; flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #7cc4ff, #0082FF 70%);
  animation: cp-orb 1.6s ease-in-out infinite;
}
.cp--work.cp--done .cp__orb { animation: none; opacity: .7; }
.cp--work.cp--fail .cp__orb { animation: none; filter: grayscale(1); opacity: .55; }
.cp--work .cp__chev { display: inline-block; transition: transform .15s ease; }
.cp--work .cp__head[aria-expanded="true"] .cp__chev { transform: rotate(90deg); }
@keyframes cp-orb { 0%, 100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1); } }

/* ── 단계 — 상자·바탕 없이 왼쪽 세로선 아래 줄, 오른쪽에 상태(도는 고리·초록 체크). .ta__steps·.ta-step 과 같다 ── */
.cp-tools { list-style: none; margin: 8px 0 4px; padding: 0 0 0 7px; border-left: 2px solid var(--border-color, rgba(148, 163, 184, .35)); display: flex; flex-direction: column; gap: 4px; width: min(100%, 640px); }
.cp-tools[hidden] { display: none; }
.cp-tool {
  display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; box-sizing: border-box;
  padding: 6px 10px; border: 0; border-radius: 8px; background: none;
  color: var(--text-color); font-size: 13.5px;
}
.cp-tool__icon { display: inline-flex; flex: 0 0 auto; color: var(--text-secondary, #64748b); }
.cp-tool__label { flex: 1; min-width: 0; }
.cp-tool__text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 단계 밑 한 줄 — 진행 글("영어로 · 3/12 문단")·서버가 적어 준 한 줄("웹 검색 12건 수집") */
.cp-tool__detail { display: block; margin-top: 2px; color: var(--text-secondary, #64748b); font-size: 12.5px; line-height: 1.4; overflow-wrap: anywhere; }
.cp-tool__detail[hidden] { display: none; }
.cp-tool__state { flex: 0 0 auto; width: 14px; height: 14px; }
.cp-tool--now .cp-tool__icon { color: #0082FF; }
.cp-tool--now .cp-tool__state { border: 2px solid color-mix(in srgb, #0082FF 30%, transparent); border-top-color: #0082FF; border-radius: 50%; animation: cp-spin .8s linear infinite; }
.cp-tool--done .cp-tool__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"); }
.cp-tool--warn .cp-tool__icon { color: #d97706; }
.cp-tool--warn .cp-tool__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"); }
.cp-tool--todo { opacity: .55; }
@keyframes cp-spin { to { transform: rotate(360deg); } }

/* ── 홈 말풍선 줄에 붙일 때 ───────────────────────────────────────
   .summet-msg 는 [아바타][말풍선] 가로 줄이다. 진행 줄을 아바타 옆에 두고
   말풍선은 아래 줄로 내려 아바타 폭만큼 들여쓴다. */
.summet-msg--with-progress { flex-wrap: wrap; }
.summet-msg--with-progress .summet-msg__progress { flex: 1 1 0; min-width: 0; padding-top: 4px; }
.summet-msg--with-progress .summet-msg__bubble {
    flex: 0 0 calc(100% - 40px);
    margin-left: 40px;          /* 아바타 28px + 간격 12px */
    max-width: calc(100% - 40px);
    box-sizing: border-box;
}
.summet-msg--with-progress .summet-msg__bubble[hidden] { display: none !important; }