投稿直後ハイライト演出コメント

<div class="d06-11-06-wrap">
          <ul class="d06-11-06-list">
            <li class="d06-11-06-item"><div class="d06-11-06-body"><span class="d06-11-06-name">つばさ</span><p>面白い視点ですね。</p></div></li>
          </ul>
          <form class="d06-11-06-form">
            <input class="d06-11-06-input" type="text" placeholder="コメントを入力…" />
            <button class="d06-11-06-send" type="submit">投稿</button>
          </form>
        </div>

.d06-11-06-wrap{width:100%;max-width:260px;display:flex;flex-direction:column;gap:10px}
        .d06-11-06-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:130px;overflow-y:auto}
        .d06-11-06-item.d06-11-06-in{animation:d1306rise .3s ease}
        @keyframes d1306rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
        .d06-11-06-body{background:#f1f5f9;border-radius:10px;padding:6px 10px}
        .d06-11-06-body.d06-11-06-new{animation:d1306fade 2.2s ease forwards}
        @keyframes d1306fade{0%{background:#fde68a}100%{background:#f1f5f9}}
        .d06-11-06-name{display:block;font-size:11px;font-weight:700;color:#374151}
        .d06-11-06-body p{margin:2px 0 0;font-size:12px;color:#4b5563}
        .d06-11-06-form{display:flex;gap:6px}
        .d06-11-06-input{flex:1;min-width:0;border:1px solid #e5e7eb;border-radius:999px;padding:6px 10px;font-size:12px}
        .d06-11-06-send{border:none;background:#f59e0b;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-06');
          var list = root.querySelector('.d06-11-06-list');
          var form = root.querySelector('.d06-11-06-form');
          var input = root.querySelector('.d06-11-06-input');
          form.addEventListener('submit', function(e){
            e.preventDefault();
            var text = input.value.trim();
            if(!text){ return; }
            var li = document.createElement('li');
            li.className = 'd06-11-06-item d06-11-06-in';
            li.innerHTML = '<div class="d06-11-06-body d06-11-06-new"><span class="d06-11-06-name">あなた</span><p></p></div>';
            li.querySelector('p').textContent = text;
            list.appendChild(li);
            list.scrollTop = list.scrollHeight;
            input.value = '';
          });
        })();