feat: Workshop interaction layer — chat input, visitor presence, bark display (#40, #41, #42)

Implements the minimum viable conversation loop for Workshop #222:
visitor arrives → sends message → Timmy barks back.

- js/visitor.js: Visitor presence protocol (#41)
  - visitor_entered on load (with device detection: ipad/desktop/mobile)
  - visitor_left on unload or 30s hidden (iPad tab suspend)
  - visitor_message dispatched from chat input
  - visitor_interaction export for future tap-to-interact (#44)
  - Session duration tracking

- js/bark.js: Bark display system (#42)
  - showBark() renders prominent viewport toasts with typing animation
  - Auto-dismiss after display time + typing duration
  - Queue system (max 3 simultaneous, overflow queued)
  - Demo barks in mock mode (Workshop-themed: 222, sovereignty, chain)
  - Barks also logged permanently in chat panel

- index.html: Chat input bar (#40)
  - Terminal-styled input + send button at viewport bottom
  - Enter to send (desktop), button tap (iPad)
  - Safe-area padding for notched devices
  - Chat panel repositioned above input bar
  - Bark container in upper viewport third

- js/websocket.js: New message handlers
  - 'bark' message → showBark() dispatch
  - 'ambient_state' message → placeholder for #43
  - Demo barks start in mock mode

- js/ui.js: appendChatMessage() accepts optional CSS class
  - Visitor messages styled differently from agent messages

Build: 18 modules, 0 errors
Tested: desktop (1280x800) + mobile (390x844) via Playwright

Closes #40, #41, #42
Ref: rockachopa/Timmy-time-dashboard#222, #243

js/ui.js

@@ -65,10 +65,10 @@ export function updateUI({ fps, agentCount, jobCount, connectionState }) {
  * @param {string} message     — message text (HTML-escaped before insertion)
  * @param {string} cssColor    — CSS color string, e.g. '#00ff88'
  */
-export function appendChatMessage(agentLabel, message, cssColor) {
+export function appendChatMessage(agentLabel, message, cssColor, extraClass) {
   const color = escapeAttr(cssColor || '#00ff41');
   const entry = document.createElement('div');
-  entry.className = 'chat-entry';
+  entry.className = 'chat-entry' + (extraClass ? ' ' + extraClass : '');
   entry.innerHTML = `<span class="agent-name" style="color:${color}">${escapeHtml(agentLabel)}</span>: ${escapeHtml(message)}`;
 
   chatEntries.push(entry);