コンパクトチャットプレビューリスト(通知一覧風)

<ul class="list">
          <li>
            <span class="av a1">N</span>
            <div class="body"><span class="name">中村</span><span class="last">了解です、進めておきます。</span></div>
            <span class="badge">2</span>
          </li>
          <li>
            <span class="av a2">S</span>
            <div class="body"><span class="name">鈴木チーム</span><span class="last">議事録を共有しました。</span></div>
          </li>
          <li>
            <span class="av a3">Y</span>
            <div class="body"><span class="name">山田</span><span class="last">ありがとうございました！</span></div>
          </li>
        </ul>

.d10-10-10 .list{ width:100%; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
        .d10-10-10 .list li{ display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:8px; background:#f8f9fb; }
        .d10-10-10 .av{ width:28px; height:28px; border-radius:50%; flex:none; color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
        .d10-10-10 .a1{ background:#6366f1; }
        .d10-10-10 .a2{ background:#f59e0b; }
        .d10-10-10 .a3{ background:#ef4444; }
        .d10-10-10 .body{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
        .d10-10-10 .name{ font-size:11.5px; font-weight:700; color:#333; }
        .d10-10-10 .last{ font-size:10.5px; color:#9ca3af; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .d10-10-10 .badge{ background:#ef4444; color:#fff; font-size:10px; font-weight:700; border-radius:9px; min-width:16px; height:16px; display:flex; align-items:center; justify-content:center; padding:0 4px; }