タイピングインジケータ付きコメント欄

<div class="d06-11-04-wrap">
          <ul class="d06-11-04-list">
            <li><span class="d06-11-04-name">みさき</span><p>この記事、保存しました!</p></li>
          </ul>
          <div class="d06-11-04-status"><span class="d06-11-04-dots"><i></i><i></i><i></i></span><span class="d06-11-04-status-text"></span></div>
          <form class="d06-11-04-form">
            <textarea class="d06-11-04-input" rows="1" placeholder="コメントを入力…"></textarea>
            <button class="d06-11-04-send" type="submit">送信</button>
          </form>
        </div>

.d06-11-04-wrap{width:100%;max-width:260px;display:flex;flex-direction:column;gap:8px}
        .d06-11-04-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:80px;overflow-y:auto}
        .d06-11-04-list li{background:#f1f5f9;border-radius:10px;padding:6px 10px}
        .d06-11-04-list li.d06-11-04-in{animation:d1304rise .35s ease}
        @keyframes d1304rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
        .d06-11-04-name{display:block;font-size:11px;font-weight:700;color:#374151}
        .d06-11-04-list p{margin:2px 0 0;font-size:12px;color:#4b5563}
        .d06-11-04-status{display:flex;align-items:center;gap:6px;font-size:11px;color:#9ca3af;min-height:16px;opacity:0;transition:opacity .25s ease}
        .d06-11-04-status.d06-11-04-show{opacity:1}
        .d06-11-04-dots{display:inline-flex;gap:3px}
        .d06-11-04-dots i{width:5px;height:5px;border-radius:50%;background:#9ca3af;display:inline-block;animation:d1304blink 1.2s ease-in-out infinite}
        .d06-11-04-dots i:nth-child(2){animation-delay:.2s}
        .d06-11-04-dots i:nth-child(3){animation-delay:.4s}
        @keyframes d1304blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
        .d06-11-04-form{display:flex;gap:6px;align-items:flex-end}
        .d06-11-04-input{flex:1;min-width:0;border:1px solid #e5e7eb;border-radius:10px;padding:6px 10px;font-size:12px;resize:none;font-family:inherit}
        .d06-11-04-send{border:none;background:#6366f1;color:#fff;border-radius:999px;padding:7px 14px;font-size:12px;cursor:pointer}

(function(){
          var article = document.currentScript.closest('article');
          var root = article.querySelector('.d06-11-04');
          var list = root.querySelector('.d06-11-04-list');
          var status = root.querySelector('.d06-11-04-status');
          var statusText = root.querySelector('.d06-11-04-status-text');
          var form = root.querySelector('.d06-11-04-form');
          var input = root.querySelector('.d06-11-04-input');
          var typingTimer = null;

          function showOtherTyping(){
            statusText.textContent = 'みさきさんが入力中…';
            status.classList.add('d06-11-04-show');
            setTimeout(function(){
              status.classList.remove('d06-11-04-show');
              var li = document.createElement('li');
              li.className = 'd06-11-04-in';
              li.innerHTML = '<span class="d06-11-04-name">みさき</span><p>この方法、私も試してみます!</p>';
              list.appendChild(li);
            }, 2200);
          }
          setTimeout(showOtherTyping, 1400);

          input.addEventListener('input', function(){
            statusText.textContent = '自分が入力中…';
            status.classList.add('d06-11-04-show');
            clearTimeout(typingTimer);
            typingTimer = setTimeout(function(){ status.classList.remove('d06-11-04-show'); }, 1200);
          });

          form.addEventListener('submit', function(e){
            e.preventDefault();
            var text = input.value.trim();
            clearTimeout(typingTimer);
            status.classList.remove('d06-11-04-show');
            if(!text){ return; }
            var li = document.createElement('li');
            li.className = 'd06-11-04-in';
            li.innerHTML = '<span class="d06-11-04-name">あなた</span><p></p>';
            li.querySelector('p').textContent = text;
            list.appendChild(li);
            list.scrollTop = list.scrollHeight;
            input.value = '';
          });
        })();