fix(frontend): raise dark contrast, expand hit areas, and surface input limits

Dark muted surfaces missed WCAG AA; action and tertiary tokens plus a 32-pair contract close that. Hit targets, remaining-count, and Enter-to-send follow the interaction audit without changing visual sizes.

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/components/character-remaining.tsx

@@ -0,0 +1,31 @@
+import {
+  characterRemainingAnnouncement,
+  characterRemainingLabel,
+  characterRemainingVisible,
+} from "@/lib/character-remaining";
+
+export function CharacterRemaining({
+  id,
+  length,
+  maxLength,
+}: {
+  id: string;
+  length: number;
+  maxLength: number;
+}) {
+  if (!characterRemainingVisible(length, maxLength)) return null;
+  const remaining = maxLength - length;
+  const atLimit = remaining <= 0;
+  return (
+    <span
+      id={id}
+      className="character-remaining"
+      data-limit={atLimit ? "true" : undefined}
+      aria-live="polite"
+      aria-atomic="true"
+    >
+      <span aria-hidden="true">{characterRemainingLabel(remaining, maxLength)}</span>
+      <span className="sr-only">{characterRemainingAnnouncement(remaining, maxLength)}</span>
+    </span>
+  );
+}