コメント投稿リアルタイム追加演出

<div class="d06-11-01-wrap">
          <ul class="d06-11-01-list">
            <li class="d06-11-01-item"><span class="d06-11-01-avatar" style="background:linear-gradient(135deg,#6366f1,#8b5cf6)">A</span><div class="d06-11-01-body"><span class="d06-11-01-name">あかり</span><p>素敵な記事でした!</p></div></li>
            <li class="d06-11-01-item"><span class="d06-11-01-avatar" style="background:linear-gradient(135deg,#f59e0b,#ef4444)">K</span><div class="d06-11-01-body"><span class="d06-11-01-name">健太</span><p>参考になります。</p></div></li>
          </ul>
          <form class="d06-11-01-form">
            <input class="d06-11-01-input" type="text" placeholder="コメントを入力…" />
            <button class="d06-11-01-send" type="submit">投稿</button>
          </form>
        </div>

.d06-11-01-wrap{width:100%;max-width:260px;display:flex;flex-direction:column;gap:10px}
        .d06-11-01-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:150px;overflow-y:auto}
        .d06-11-01-item{display:flex;gap:8px;align-items:flex-start}
        .d06-11-01-item.d06-11-01-in{animation:d1301rise .35s ease}
        @keyframes d1301rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
        .d06-11-01-avatar{flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700}
        .d06-11-01-body{background:#f1f5f9;border-radius:10px;padding:6px 10px;flex:1}
        .d06-11-01-name{display:block;font-size:11px;font-weight:700;color:#374151}
        .d06-11-01-body p{margin:2px 0 0;font-size:12px;color:#4b5563}
        .d06-11-01-form{display:flex;gap:6px}
        .d06-11-01-input{flex:1;min-width:0;border:1px solid #e5e7eb;border-radius:999px;padding:6px 10px;font-size:12px}
        .d06-11-01-send{border:none;background:#6366f1;color:#fff;border-radius:999px;padding:6px 14px;font-size:12px;cursor:pointer}

(function(){
          var article = document.currentScript.closest('article');
          var root = article.querySelector('.d06-11-01');
          var list = root.querySelector('.d06-11-01-list');
          var form = root.querySelector('.d06-11-01-form');
          var input = root.querySelector('.d06-11-01-input');
          var names = ['ゆか','たかし','みほ','しゅん'];
          var colors = ['linear-gradient(135deg,#10b981,#22c55e)','linear-gradient(135deg,#3b82f6,#06b6d4)','linear-gradient(135deg,#ec4899,#f43f5e)'];
          var i = 0;
          form.addEventListener('submit', function(e){
            e.preventDefault();
            var text = input.value.trim();
            if(!text){ return; }
            var name = names[i % names.length];
            var color = colors[i % colors.length];
            i++;
            var li = document.createElement('li');
            li.className = 'd06-11-01-item d06-11-01-in';
            li.innerHTML = '<span class="d06-11-01-avatar" style="background:'+color+'">'+name.charAt(0)+'</span><div class="d06-11-01-body"><span class="d06-11-01-name">'+name+'</span><p></p></div>';
            li.querySelector('p').textContent = text;
            list.appendChild(li);
            list.scrollTop = list.scrollHeight;
            input.value = '';
          });
        })();