## Implementation Plan: Fix Poll Option Unresponsiveness on Mobile (Android/Chrome)

### Objective
Resolve the issue where tapping a poll option on Android/Chrome produces no visible response and no vote is registered. The fix addresses two root causes identified in the investigation: (1) the absolutely-positioned `.poll-option-bar` inside the `<button>` creates a hit-test dead zone, and (2) `preventDefault()` in the `pointerdown` handler suppresses the `:active` visual feedback while the async fetch completes.

### Files to Modify
1. **`engagement.css`** – Change the layout of the poll option bar to avoid absolute positioning inside the button.
2. **`PollManager.js`** – Remove `preventDefault()` from the `pointerdown` handler and add immediate optimistic UI feedback (class toggle) so the user sees a visual state change instantly.

### Detailed Changes

#### 1. `engagement.css`
- **Locate** `.poll-option-bar` (likely around line 174, based on investigation).
- **Change** from `position: absolute; inset: 0;` to a pseudo-element approach or background gradient that does not require a positioned child:
  ```css
  /* Before */
  .poll-option-bar {
    position: absolute;
    inset: 0;
    /* other styles */
  }
  /* After */
  .poll-option {
    position: relative;
    /* ensure overflow: hidden is kept or removed? Keep it for bar clip, but now bar is pseudo */
  }
  .poll-option::before {
    content: '';
    position: absolute;
    top: 0; left: 0; height: 100%;
    width: var(--vote-percent);  /* set via JS on update */
    background: /* current bar color */;
    pointer-events: none;  /* ensure clicks pass through */
  }
  ```
  **Important:** The JS that updates the bar width must now set a CSS custom property (e.g., `--vote-percent`) on the `.poll-option` element instead of manipulating an inner child. This avoids breaking existing rendering logic. Alternatively, keep the inner `.poll-option-bar` but change it to use `position: relative; pointer-events: none;` and adjust layout so it does not cover the button’s click area. The simplest robust fix is to remove the absolute child entirely and use the pseudo-element approach.
- **Remove** `overflow: hidden` on `.poll-option` if it is not needed for other content; if needed, ensure the pseudo-element does not get clipped unexpectedly (it is inside the button, so it should be fine).

#### 2. `PollManager.js`
- **Remove** `event.preventDefault()` from the `pointerdown` handler (line 16). This will re-enable the native `:active` pseudo-class on Chrome Android, giving immediate visual feedback.
- **Add** a CSS class `.poll-option--voting` to the button when the vote is initiated (inside the `pointerdown` handler, before the async fetch). This class can, for example, apply a subtle background change or opacity transition. Remove the class when the fetch completes (success or failure).
- **Update** the bar width setter to use CSS custom property as described above, or if using the pseudo-element, recalculate the variable.

#### Additional (non-functional but diagnostic)
- No changes to `click` vs `pointerdown` are needed; the hit-test fix and restored `:active` are sufficient.
- Add a comment noting the mobile-fix reasoning.

### Verification Steps (Definition of Done)
- [ ] Run `pip install -e '.[dev]' -q && make test-unit` – all unit tests pass (existing tests for poll API and any UI tests).
- [ ] Run `pip install -q ruff && ruff check .` – no new lint errors (pre-existing `F401` in `routers/messages.py` is acceptable).
- [ ] Manually verify on an Android device/emulator with Chrome: tapping a poll option immediately shows a visual change (button darkens or background shifts), and after a moment the bar updates to reflect the vote. No dead zones when tapping the center of the option.
- [ ] Check that the existing e2e test `test_poll_builder_hidden_until_add_poll` still passes (if runnable).

### Rollback
If the change causes regression on desktop (unlikely), revert both files. The pseudo-element approach is backward-compatible.