コメント投稿ポップ演出

<div class="d06-04-07-wrap">
          <ul class="d06-04-07-list">
            <li>素敵な投稿ですね!</li>
          </ul>
          <div class="d06-04-07-form">
            <input class="d06-04-07-input" type="text" placeholder="コメントを入力" />
            <button class="d06-04-07-send" type="button">送信</button>
          </div>
        </div>

.d06-04-07-wrap { width:100%; max-width:230px; display:flex; flex-direction:column; gap:8px; }
        .d06-04-07-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; max-height:96px; overflow:hidden; }
        .d06-04-07-list li { background:#f1f5f9; border-radius:10px; padding:6px 10px; font-size:12px; color:#374151; }
        .d06-04-07-list li.d06-04-07-in { animation:d537rise .35s ease; }
        @keyframes d537rise { from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0);} }
        .d06-04-07-form { display:flex; gap:6px; }
        .d06-04-07-input { flex:1; min-width:0; border:1px solid #e5e7eb; border-radius:999px; padding:6px 10px; font-size:12px; }
        .d06-04-07-send { border:none; background:#3b82f6; color:#fff; border-radius:999px; padding:6px 12px; font-size:12px; cursor:pointer; }

(function(){
          var article = document.currentScript.closest('article');
          var root = article.querySelector('.d06-04-07');
          var list = root.querySelector('.d06-04-07-list');
          var input = root.querySelector('.d06-04-07-input');
          var send = root.querySelector('.d06-04-07-send');
          function post(){
            var text = input.value.trim() || 'いいね!';
            var li = document.createElement('li');
            li.textContent = text;
            li.className = 'd06-04-07-in';
            list.appendChild(li);
            while(list.children.length > 4){ list.removeChild(list.firstChild); }
            input.value = '';
          }
          send.addEventListener('click', post);
          input.addEventListener('keydown', function(e){ if(e.key === 'Enter'){ post(); } });
        })();