스트리밍 응답

<div class="chat">
  <div class="bubble user">이번 분기 매출 요약해줘</div>
  <div class="bubble ai"><span id="txt"></span><span class="caret">▍</span></div>
</div>

.chat{width:min(280px,92%);display:grid;gap:8px}
.bubble{padding:9px 12px;border-radius:12px;font-size:12px;line-height:1.55;max-width:92%}
.bubble.user{justify-self:end;background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.bubble.ai{justify-self:start;background:var(--surface);border:1px solid var(--line);color:var(--fg);border-bottom-left-radius:4px}
.caret{display:inline-block;color:var(--accent);animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}

const full = '3분기 매출은 전 분기 대비 상승했고, 특히 구독 갱신 비중이 늘었어요. 신규 유입보다 재구매가 더 크게 기여했습니다.';
const el = document.getElementById('txt');
let i = 0, timer = null;
function step() {
  el.textContent = full.slice(0, i);
  i++;
  if (i <= full.length) { timer = setTimeout(step, 26 + Math.random() * 30); }
  else { timer = setTimeout(() => { i = 0; el.textContent = ''; step(); }, 1800); }
}
step();