アバター状態

あなたは熟練のフロントエンドエンジニアです。私のWebサイトに「アバター状態」の効果を追加してください。

# 追加してほしい効果
アバター状態（バッジ & アバター）
アバターの右下にオンライン・離席中・取り込み中を示す小さな光のインジケータを添えたステータス表示。オンラインのみ光が脈動し、稼働中であることを伝えます。

# 追加する場所
👉【ここに対象箇所を記入：例「トップのヒーローセクション」「お問い合わせボタン」「記事カードの一覧」など】

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- アバター状態: 右下のインジケータでオンライン/離席中/取り込み中を表現。オンラインは光が脈動する -->
<ul class="avatar-list" aria-label="メンバーのオンライン状態">
  <li class="avatar-item">
    <span class="avatar-frame">
      <span class="avatar avatar--a" aria-hidden="true">田</span>
      <span class="status-dot status-dot--online" role="img" aria-label="オンライン"></span>
    </span>
    <p class="avatar-item__name">田中</p>
    <p class="avatar-item__state avatar-item__state--online">オンライン</p>
  </li>
  <li class="avatar-item">
    <span class="avatar-frame">
      <span class="avatar avatar--b" aria-hidden="true">佐</span>
      <span class="status-dot status-dot--away" role="img" aria-label="離席中"></span>
    </span>
    <p class="avatar-item__name">佐藤</p>
    <p class="avatar-item__state avatar-item__state--away">離席中</p>
  </li>
  <li class="avatar-item">
    <span class="avatar-frame">
      <span class="avatar avatar--c" aria-hidden="true">鈴</span>
      <span class="status-dot status-dot--busy" role="img" aria-label="取り込み中"></span>
    </span>
    <p class="avatar-item__name">鈴木</p>
    <p class="avatar-item__state avatar-item__state--busy">取り込み中</p>
  </li>
</ul>

【CSS】
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  font-family: "Segoe UI", system-ui, sans-serif;
  background: linear-gradient(160deg, #12161f 0%, #1b2130 55%, #232b3d 100%);
}

.avatar-list {
  list-style: none;
  margin: 0;
  padding: 30px 34px;
  display: flex;
  gap: 30px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .6);
}

.avatar-item {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.avatar-frame {
  position: relative;
  display: inline-flex;
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .5);
}
.avatar--a { background: linear-gradient(155deg, #60a5fa, #2563eb); }
.avatar--b { background: linear-gradient(155deg, #fbbf24, #d97706); }
.avatar--c { background: linear-gradient(155deg, #f472b6, #db2777); }

/* 状態インジケータ: アバターの縁を切り抜くようにパネル色の縁取りをつける */
.status-dot {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid #1b2130;
}

.status-dot--online {
  background: #22c55e;
  --pulse-color: rgba(34, 197, 94, .55);
  animation: dot-pulse 1.8s ease-out infinite;
}
.status-dot--away { background: #f59e0b; }

/* 取り込み中: Do-Not-Disturbの慣習に合わせ、白い横棒を重ねる */
.status-dot--busy {
  background: #ef4444;
}
.status-dot--busy::after {
  content: '';
  position: absolute;
  left: 3px;
  right: 3px;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: #fff;
  border-radius: 2px;
}

.avatar-item__name {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #e2e8f0;
}
.avatar-item__state {
  margin: 0;
  font-size: 11.5px;
  color: rgba(226, 232, 240, .6);
}
.avatar-item__state--online { color: #4ade80; }
.avatar-item__state--away { color: #fbbf24; }
.avatar-item__state--busy { color: #f87171; }

@keyframes dot-pulse {
  0%   { box-shadow: 0 0 0 0 var(--pulse-color, transparent); }
  70%  { box-shadow: 0 0 0 6px rgba(0, 0, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .status-dot--online { animation: none !important; }
}

@media (max-width: 480px) {
  .avatar-list { gap: 18px; padding: 24px 20px; }
}

【JavaScript】
// アバター状態: CSSのみの静的な演出のため、JSでの操作は不要。

# 外部ライブラリ
なし（追加ライブラリ不要）

# 守ってほしいこと
- 既存のHTML構造・レイアウト・デザインを壊さないこと。必要に応じてクラス名・色・サイズを私のサイトに合わせて調整してよい。
- クラス名やidが既存と衝突しないよう、必要なら接頭辞で名前空間を分けること。
- レスポンシブ対応と prefers-reduced-motion への配慮を入れること。
- 私のサイトのフレームワーク（React / Vue / 素のHTML など）に合わせて実装すること。不明な場合は素のHTML/CSS/JSで提示し、組み込み手順も説明すること。
- 変更後の確認手順も簡潔に教えてください。