feat(web): implement responsive modal pattern for mobile-friendly NPC chat

- Add hybrid modal/page navigation based on screen size (1024px breakpoint)
- Desktop (>1024px): Uses modal overlays for quick interactions
- Mobile (≤1024px): Navigates to dedicated full pages for better UX
- Extract shared NPC chat content into reusable partial template
- Add responsive navigation JavaScript (responsive-modals.js)
- Create dedicated NPC chat page route with back button navigation
- Add mobile-optimized CSS with sticky header and chat input
- Fix HTMX indicator errors by using htmx-indicator class pattern
- Document responsive modal pattern for future features

Addresses mobile UX issues: cramped space, nested scrolling, keyboard conflicts,
and lack of native back button support in modals.

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

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

public_web/static/css/play.css

@@ -1699,6 +1699,26 @@
     font-style: italic;
 }
 
+/* HTMX Loading Indicator */
+.history-loading {
+    text-align: center;
+    color: var(--text-muted);
+    font-size: 0.875rem;
+    padding: 1rem 0;
+    font-style: italic;
+    display: none;
+}
+
+/* Show loading indicator when HTMX is making a request */
+.htmx-indicator.htmx-request .history-loading {
+    display: block;
+}
+
+/* Hide other content while loading */
+.htmx-indicator.htmx-request > *:not(.history-loading) {
+    opacity: 0.5;
+}
+
 /* Responsive NPC Modal */
 @media (max-width: 700px) {
     .npc-modal-body {
@@ -1805,3 +1825,152 @@
 .chat-history::-webkit-scrollbar-thumb:hover {
     background: var(--text-muted);
 }
+
+/* ===== NPC CHAT DEDICATED PAGE ===== */
+/* Mobile-friendly full page view for NPC conversations */
+
+.npc-chat-page {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background: var(--bg-secondary);
+}
+
+/* Page Header with Back Button */
+.npc-chat-header {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem;
+    background: var(--bg-primary);
+    border-bottom: 2px solid var(--play-border);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+}
+
+.npc-chat-back-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    background: var(--bg-input);
+    color: var(--text-primary);
+    text-decoration: none;
+    border-radius: 4px;
+    border: 1px solid var(--play-border);
+    font-family: var(--font-heading);
+    font-size: 0.9rem;
+    transition: all 0.2s ease;
+}
+
+.npc-chat-back-btn:hover {
+    background: var(--bg-tertiary);
+    border-color: var(--accent-gold);
+    color: var(--accent-gold);
+}
+
+.npc-chat-back-btn svg {
+    width: 20px;
+    height: 20px;
+}
+
+.npc-chat-title {
+    flex: 1;
+    margin: 0;
+    font-family: var(--font-heading);
+    font-size: 1.5rem;
+    color: var(--accent-gold);
+}
+
+/* Chat Container - Full Height Layout */
+.npc-chat-page .npc-chat-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    padding: 1rem;
+    gap: 1rem;
+    overflow: hidden;
+}
+
+/* Responsive Layout for NPC Chat Content */
+/* Desktop: 3-column grid */
+@media (min-width: 1025px) {
+    .npc-chat-page .npc-chat-container {
+        display: grid;
+        grid-template-columns: 250px 1fr 300px;
+        gap: 1.5rem;
+        max-width: 1400px;
+        margin: 0 auto;
+        width: 100%;
+    }
+}
+
+/* Mobile: Stacked layout */
+@media (max-width: 1024px) {
+    .npc-chat-page .npc-chat-container {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    /* Compact profile on mobile */
+    .npc-chat-page .npc-profile {
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: flex-start;
+        gap: 1rem;
+    }
+
+    .npc-chat-page .npc-portrait {
+        width: 80px;
+        height: 80px;
+        flex-shrink: 0;
+    }
+
+    .npc-chat-page .npc-profile-info {
+        flex: 1;
+        min-width: 150px;
+    }
+
+    .npc-chat-page .npc-relationship,
+    .npc-chat-page .npc-profile-tags,
+    .npc-chat-page .npc-interaction-stats {
+        width: 100%;
+    }
+
+    /* Conversation takes most of the vertical space */
+    .npc-chat-page .npc-conversation {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        min-height: 400px;
+    }
+
+    /* History panel is collapsible on mobile */
+    .npc-chat-page .npc-history-panel {
+        max-height: 200px;
+        overflow-y: auto;
+        border-top: 1px solid var(--play-border);
+        padding-top: 1rem;
+    }
+}
+
+/* Ensure chat history fills available space on page */
+.npc-chat-page .chat-history {
+    flex: 1;
+    overflow-y: auto;
+    min-height: 300px;
+}
+
+/* Fix chat input to bottom on mobile */
+@media (max-width: 1024px) {
+    .npc-chat-page .chat-input-form {
+        position: sticky;
+        bottom: 0;
+        background: var(--bg-secondary);
+        padding: 0.75rem 0;
+        border-top: 1px solid var(--play-border);
+        margin-top: 0.5rem;
+    }
+}