Presently: Live Status Indicator System that displays a user's current activity.

Build a "Live Status Indicator System" — a CSS + JavaScript module that shows what a user or system is presently doing: "Online," "Typing...," "In a meeting," "Away," or "Offline." The indicator updates in real-time — viewers always know what's presently happening without refreshing the page.

Requirements:
1. Status badge: a `.status-indicator` component — a small colored dot (8px) next to the user's avatar or name. Colors: green = online (presently active), amber = away (idle >5min), red = busy/DND, grey = offline. The dot pulses gently when online (`animation:pulse 2s infinite`).
2. Activity detection: JavaScript tracks user activity via `mousemove`, `keydown`, and `scroll` events (throttled to once per 30s). If no activity for 5 minutes, status changes from "online" to "away." Activity resumes → back to "online." The system always knows what the user is presently doing.
3. Custom status: users can set a custom status message: "In a meeting until 3 PM" or "Focusing — no interruptions." The message appears in a tooltip on hover over the status dot.
4. Status broadcast: on status change, POST to `/api/status` with `{ status, message, timestamp }`. Other users poll `GET /api/status/{userId}` every 30 seconds to see each person's live status.
5. Status in UI: display the status dot on: avatar thumbnails, user lists, chat headers, and team rosters. A team page shows all members with their presently active status — green dots for online, grey for offline.
6. Typing indicator: when a user is presently typing in a chat input, broadcast "typing" status. Show "User is typing..." with animated dots (`.\ .\ .` cycling). Clears 2 seconds after they stop typing.

Starter JS:
```javascript
class StatusTracker {
  constructor(userId) {
    this.userId = userId;
    this.status = 'online';
    this.lastActivity = Date.now();
    this._bindActivityListeners();
    this._startIdleCheck();
  }
  _bindActivityListeners() {
    const update = this._throttle(() => { this.lastActivity = Date.now(); if (this.status === 'away') this.setStatus('online'); }, 30000);
    ['mousemove','keydown','scroll'].forEach(ev => document.addEventListener(ev, update));
  }
  _startIdleCheck() {
    setInterval(() => { if (Date.now() - this.lastActivity > 300000 && this.status === 'online') this.setStatus('away'); }, 60000);
  }
  setStatus(status, message = '') {
    this.status = status;
    fetch('/api/status', { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({ userId:this.userId, status, message }) });
  }
  _throttle(fn, ms) { let last = 0; return (...a) => { if (Date.now()-last>ms){last=Date.now();fn(...a)} }; }
}
```