/* shared/status-dot.css — component dot trạng thái DÙNG CHUNG (Story 12.2,
 * Epic 12 frontend state consolidation). Thay 2 bản copy tay trùng giá trị:
 * `.listen-status-dot` (style.css) + `.ask-status-dot` (ask/ask.css — chính
 * comment cũ ở đó tự thú "mirror giá trị .listen-status-dot"). Tên class
 * trạng thái theo shared/status-vocab.js — MỘT vocabulary cho cả 3 màn
 * (badge owner trong owner/owner.css cũng key theo đúng các tên is-* này,
 * chỉ khác cách render — cố ý, Story 11.1).
 *
 * Giá trị GIỮ NGUYÊN từ 2 bản cũ — 12.2 là consolidation, không redesign:
 * màu qua token shared/tokens.css (AD-5). Amber từng hardcode #e3b341 (12.2
 * chưa có token); [V6, review đối kháng 2026-09-07] nay là var(--warn) —
 * IV9 đã gom MỘT hổ phách vào tokens.css, literal ở đây là hổ phách thứ hai
 * sống lại. Mọi trang nạp file này đều nạp tokens.css trước (index.html). */

.status-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0; /* MỚI so với 2 bản cũ (micro-fix cố ý, review 12.2 #2):
                     trong .ask-status-box (row flex) copy dài trên màn hẹp
                     từng bóp dot thành oval/0 — giờ chữ wrap, dot giữ 14px.
                     .listen-player-box là column flex nên no-op. */
}

/* is-idle = tương đương base (muted, đứng yên) — có mặt để vocabulary đủ 5
   trạng thái, slice nào muốn gắn tường minh thay vì để class rỗng đều được. */
.status-dot.is-idle {
  background: var(--muted);
  animation: none;
}

.status-dot.is-connecting {
  background: var(--warn); /* amber — MỘT token cho cả app (IV9 · V6) */
  animation: status-dot-pulse 1.2s ease-in-out infinite;
}

.status-dot.is-live {
  background: var(--success);
  animation: status-dot-pulse 1.6s ease-in-out infinite;
}

.status-dot.is-ended {
  background: var(--muted);
  animation: none;
}

.status-dot.is-lost {
  background: var(--danger);
  animation: none;
}

@keyframes status-dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  /* Phải liệt kê đủ các selector 2-class: media query KHÔNG cộng specificity,
     `.status-dot` trần (0,1,0) thua `.status-dot.is-*` (0,2,0) — bản guard
     cũ ở style.css/ask.css cùng hình dạng này và đều VÔ HIỆU từ đầu (review
     12.2 #3, vá tận gốc khi dựng component chung). */
  .status-dot,
  .status-dot.is-connecting,
  .status-dot.is-live {
    animation: none;
  }
}