Split index.css into eighteen section files

`frontend/src/index.css` held 2865 lines. It is now an import list, and each
section is its own file under `frontend/src/styles/`.

The order is unchanged. Two comments in the file already recorded that the
cascade depends on it: several selectors in the tome section win only because
they come after the base card rules, and the 720px query overrides the whole
desktop design. The built CSS bundle is byte-identical before and after, at
56686 bytes.

The plan asked for each `@media` block to move next to the rules it overrides.
That is not done, and should not be. Moving a rule past a later rule of equal
specificity changes which one wins, and there is no frontend test that would
catch it. The 720px block is now `responsive.css`, imported last.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014Dix4oGV3njgWRdu7P9t6r

frontend/src/styles/chat.css

@@ -0,0 +1,97 @@
+/* ---------- AI Chat (power users) ----------
+   A plain chat scratchpad, styled as a transcript rather than as the story
+   page: UI font, role labels, and a sticky composer at the bottom. */
+
+.chat-page {
+  max-width: 820px;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: var(--kb-inset, 0px); /* see .play-page */
+}
+.chat-meta {
+  font-size: 0.78rem;
+  margin: -10px 0 16px;
+  word-break: break-word;
+}
+.chat-options {
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 14px 16px 4px;
+  margin-bottom: 18px;
+  background: var(--bg-panel);
+}
+
+.chat-transcript { flex: 1; display: flex; flex-direction: column; gap: 16px; padding-bottom: 20px; }
+
+.chat-msg {
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 10px 14px 12px;
+  background: var(--bg-panel);
+}
+.chat-msg.user { border-left: 3px solid var(--player); background: var(--bg-input); }
+.chat-msg.assistant { border-left: 3px solid var(--accent-dim); }
+.chat-msg-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 6px;
+  font-size: 0.72rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+.chat-msg .chat-role { color: var(--accent-dim); font-weight: 600; }
+.chat-msg.user .chat-role { color: var(--player); }
+.chat-model-tag { text-transform: none; letter-spacing: 0; font-size: 0.74rem; }
+.chat-msg-actions {
+  margin-left: auto;
+  display: flex;
+  gap: 12px;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+.chat-msg:hover .chat-msg-actions, .chat-msg:focus-within .chat-msg-actions { opacity: 1; }
+.chat-msg-body {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  line-height: 1.6;
+  font-size: 0.95rem;
+}
+.chat-msg .cursor {
+  color: var(--accent-bright);
+  text-shadow: 0 0 8px var(--accent-glow);
+  animation: blink 1s steps(1) infinite;
+}
+
+/* Same collapsed thinking block as the story page, re-scoped for the transcript. */
+.chat-msg .reasoning { margin: 0 0 8px; font-size: 0.82rem; line-height: 1.5; color: var(--text-dim); }
+.chat-msg .reasoning summary { cursor: pointer; user-select: none; opacity: 0.8; }
+.chat-msg .reasoning summary:hover { opacity: 1; }
+.chat-msg .reasoning .reasoning-text {
+  margin-top: 6px;
+  padding: 8px 12px;
+  border-left: 2px solid var(--border);
+  white-space: pre-wrap;
+  opacity: 0.85;
+  max-height: 260px;
+  overflow-y: auto;
+}
+
+.chat-composer {
+  position: sticky;
+  bottom: var(--kb-inset, 0px); /* clears the on-screen keyboard — see .play-controls */
+  display: flex;
+  gap: 10px;
+  align-items: flex-end;
+  padding: 14px 0;
+  background: linear-gradient(to top, var(--bg) 55%, transparent);
+}
+.chat-composer textarea {
+  flex: 1;
+  min-height: 44px;
+  max-height: 220px;
+  resize: none;
+  overflow-y: auto;
+}
+.chat-composer button { flex: none; height: 40px; }
+