リング＋状態インジケータ

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

# 追加してほしい効果
リング＋状態インジケータ（バッジ & アバター）
虹色グラデーションのリングをまとったアバターに、右下でオンライン・離席中・取り込み中を伝える小さな状態ドットを添えました。オンラインだけが静かに脈動します。

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

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- リング+状態インジケータ: グラデーションリングのアバターに稼働状態のドットを添える -->
<ul class="roster" aria-label="メンバーの稼働状況">
  <li class="roster__item">
    <span class="ring">
      <img class="ring__avatar" src="https://picsum.photos/id/64/200/200" alt="つむぎのアバター写真" width="60" height="60">
      <span class="dot dot--online" role="img" aria-label="オンライン"></span>
    </span>
    <p class="roster__name">つむぎ</p>
  </li>
  <li class="roster__item">
    <span class="ring">
      <img class="ring__avatar" src="https://picsum.photos/id/91/200/200" alt="陽菜のアバター写真" width="60" height="60">
      <span class="dot dot--away" role="img" aria-label="離席中"></span>
    </span>
    <p class="roster__name">陽菜</p>
  </li>
  <li class="roster__item">
    <span class="ring">
      <img class="ring__avatar" src="https://picsum.photos/id/1027/200/200" alt="蓮のアバター写真" width="60" height="60">
      <span class="dot dot--busy" role="img" aria-label="取り込み中"></span>
    </span>
    <p class="roster__name">蓮</p>
  </li>
</ul>

【CSS】
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  font-family: "Hiragino Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(circle at 20% 15%, rgba(129, 140, 248, .2) 0%, transparent 42%),
    radial-gradient(circle at 88% 85%, rgba(244, 114, 182, .14) 0%, transparent 46%),
    #14121f;
  color: #ece9f5;
}

.roster {
  list-style: none;
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 28px 32px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 26px 60px -26px rgba(0, 0, 0, .7);
  flex-wrap: wrap;
  justify-content: center;
}

.roster__item {
  display: grid;
  justify-items: center;
  gap: 10px;
}

/* リング: conic-gradientをpaddingで縁取りにして虹色の輪を作る */
.ring {
  position: relative;
  display: inline-flex;
  padding: 3px;
  border-radius: 50%;
  background: conic-gradient(from 220deg, #f472b6, #facc15, #38bdf8, #f472b6);
  transition: transform .3s ease, filter .3s ease;
}
.roster__item:hover .ring {
  transform: scale(1.08);
  filter: brightness(1.15);
}

.ring__avatar {
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #171425;
}

.dot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid #171425;
}

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

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

.roster__name {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(236, 233, 245, .7);
}

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

@media (prefers-reduced-motion: reduce) {
  .dot--online { animation: none !important; }
  .ring { transition: filter .3s ease; }
  .roster__item:hover .ring { transform: none; }
}

@media (max-width: 480px) {
  .roster { gap: 20px; padding: 22px 18px; }
}

【JavaScript】
// リングの発光とドットの脈動はCSSのみで完結するためJSは不要です。

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

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