제안 칩

<div class="chat">
  <div class="bubble ai">React와 Vue는 상태 관리 방식이 다릅니다. Vue는 반응형 객체를 기본 제공하고, React는 훅으로 명시적으로 관리해요.</div>
  <div class="chips" id="chips">
    <button class="chip">더 자세히</button>
    <button class="chip">예시 코드로</button>
    <button class="chip">표로 비교</button>
  </div>
</div>

.chat{width:min(300px,94%);display:grid;gap:9px}
.bubble{padding:9px 12px;border-radius:12px;border-bottom-left-radius:4px;background:var(--surface);border:1px solid var(--line);color:var(--fg);font-size:11.5px;line-height:1.55}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--accent);font-size:11px;font-weight:600;cursor:pointer;transition:transform .15s,background .15s}
.chip[data-active]{background:var(--accent);color:#fff;border-color:var(--accent);transform:scale(.96)}

const chips = [...document.querySelectorAll('.chip')];
let i = 0;
function pulse() {
  chips.forEach((c) => c.removeAttribute('data-active'));
  chips[i % chips.length].setAttribute('data-active', '');
  setTimeout(() => chips[i % chips.length].removeAttribute('data-active'), 420);
  i++;
}
pulse();
setInterval(pulse, 1700);