feat(api,web): tier-based session limits and daily turn usage display

Backend Changes:
- Add tier-based max_sessions config (free: 1, basic: 2, premium: 3, elite: 5)
- Add DELETE /api/v1/sessions/{id} endpoint for hard session deletion
- Cascade delete chat messages when session is deleted
- Add GET /api/v1/usage endpoint for daily turn limit info
- Replace hardcoded TIER_LIMITS with config-based ai_calls_per_day
- Handle unlimited (-1) tier in rate limiter service

Frontend Changes:
- Add inline session delete buttons with HTMX on character list
- Add usage_display.html component showing remaining daily turns
- Display usage indicator on character list and game play pages
- Page refresh after session deletion to update UI state

Documentation:
- Update API_REFERENCE.md with new endpoints and tier limits
- Update API_TESTING.md with session endpoint examples
- Update SESSION_MANAGEMENT.md with tier-based limits

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

public_web/templates/components/usage_display.html

@@ -0,0 +1,83 @@
+{# Daily Usage Indicator Component
+
+   Required template variables:
+   - remaining: Number of turns remaining (-1 if unlimited)
+   - daily_limit: Daily turn limit (-1 if unlimited)
+   - is_limited: Boolean, true if limit reached
+   - is_unlimited: Boolean, true if user has unlimited turns
+   - reset_time: ISO timestamp of when limit resets (optional)
+#}
+
+<div class="daily-usage-indicator">
+    {% if is_unlimited %}
+        <span class="usage-badge unlimited">
+            <span class="usage-icon">&#9889;</span>
+            <span class="usage-text">Unlimited Turns</span>
+        </span>
+    {% elif is_limited %}
+        <span class="usage-badge limited">
+            <span class="usage-icon">&#9888;</span>
+            <span class="usage-text">Limit Reached</span>
+        </span>
+    {% else %}
+        <span class="usage-badge normal">
+            <span class="usage-icon">&#9201;</span>
+            <span class="usage-count">{{ remaining }}/{{ daily_limit }}</span>
+            <span class="usage-label">turns today</span>
+        </span>
+    {% endif %}
+</div>
+
+<style>
+.daily-usage-indicator {
+    display: inline-flex;
+    align-items: center;
+}
+
+.usage-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.35rem 0.75rem;
+    border-radius: 12px;
+    font-size: var(--text-xs);
+    font-weight: 600;
+    white-space: nowrap;
+}
+
+.usage-badge.normal {
+    background: var(--bg-input);
+    border: 1px solid var(--border-primary);
+    color: var(--text-secondary);
+}
+
+.usage-badge.limited {
+    background: rgba(239, 68, 68, 0.15);
+    border: 1px solid var(--accent-red);
+    color: var(--accent-red);
+}
+
+.usage-badge.unlimited {
+    background: rgba(212, 175, 55, 0.15);
+    border: 1px solid var(--accent-gold);
+    color: var(--accent-gold);
+}
+
+.usage-icon {
+    font-size: 0.9rem;
+}
+
+.usage-count {
+    font-family: var(--font-mono);
+    color: var(--text-primary);
+}
+
+.usage-label {
+    color: var(--text-muted);
+}
+
+.usage-text {
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+</style>