チャット風会話型ウィザードフォーム

<div class="d04-09-11-wrap">
          <div class="d04-09-11-thread">
            <div class="d04-09-11-msg d04-09-11-bot">ご相談内容を教えてください</div>
          </div>
          <div class="d04-09-11-choices"></div>
        </div>

.d04-09-11-wrap{width:min(280px,100%);display:flex;flex-direction:column;gap:10px}
        .d04-09-11-thread{max-height:150px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding-right:2px}
        .d04-09-11-msg{max-width:85%;padding:8px 12px;border-radius:14px;font-size:12px;line-height:1.5;box-sizing:border-box}
        .d04-09-11-bot{align-self:flex-start;background:#eef2ff;color:#333;border-bottom-left-radius:4px}
        .d04-09-11-user{align-self:flex-end;background:#4a6cf7;color:#fff;border-bottom-right-radius:4px}
        .d04-09-11-choices{display:flex;flex-direction:column;gap:6px}
        .d04-09-11-opt{
          padding:8px 12px;font-size:12px;color:#444;background:#fff;border:2px solid #d5d9e0;
          border-radius:8px;cursor:pointer;text-align:left;transition:border-color .2s,color .2s;font-family:inherit;
        }
        .d04-09-11-opt:hover{border-color:#4a6cf7;color:#4a6cf7}
        .d04-09-11-done{margin:0;font-size:12px;font-weight:700;color:#1c7c4e;text-align:center}

(function(){
        var root=document.getElementById('item-04-09-11');if(!root)return;
        var thread=root.querySelector('.d04-09-11-thread');
        var choicesBox=root.querySelector('.d04-09-11-choices');
        var flow=[
          {opts:[
            {label:'ホームページを作りたい',next:'ご予算の目安を教えてください'},
            {label:'ネットショップを作りたい',next:'ご予算の目安を教えてください'}
          ]},
          {opts:[
            {label:'〜30万円',next:null},
            {label:'30万円〜100万円',next:null}
          ]}
        ];
        var idx=0;
        function addMsg(text,who){
          var d=document.createElement('div');
          d.className='d04-09-11-msg d04-09-11-'+who;
          d.textContent=text;
          thread.appendChild(d);
          thread.scrollTop=thread.scrollHeight;
        }
        function renderChoices(){
          choicesBox.innerHTML='';
          if(idx>=flow.length){
            choicesBox.innerHTML='<p class="d04-09-11-done">ヒアリングが完了しました。担当より折り返しご連絡します。</p>';
            return;
          }
          flow[idx].opts.forEach(function(o){
            var btn=document.createElement('button');
            btn.type='button';
            btn.className='d04-09-11-opt';
            btn.textContent=o.label;
            btn.addEventListener('click',function(){
              addMsg(o.label,'user');
              idx++;
              if(o.next){addMsg(o.next,'bot');}
              renderChoices();
            });
            choicesBox.appendChild(btn);
          });
        }
        renderChoices();
      })();