feat: align comments redesign with new partials structure

- Re-applied redesign to new partial templates (_comment.html, _reply.html, etc.)
- Preserved HTMX and reactions functionality from v2 update
- Improved spacing and typography across all comment components
- Verified all E2E tests pass with new structure

templates/comments/_reply_form.html

@@ -1,30 +1,46 @@
 {% load static %}
-<div id="reply-form-container-{{ comment.id }}" class="mt-4 pt-4 border-t border-zinc-100 dark:border-zinc-800">
+<div id="reply-form-container-{{ comment.id }}">
+  <h4 class="font-display font-bold text-sm mb-4 uppercase tracking-wider">Reply to {{ comment.author_name }}</h4>
+  
   {% if reply_success_message %}
-  <div class="mb-3 p-2 font-mono text-sm bg-brand-cyan/10 text-brand-cyan border border-brand-cyan/20">{{ reply_success_message }}</div>
-  {% endif %}
-  {% if reply_form_errors %}
-  <div aria-label="Comment form errors" class="mb-3 p-2 font-mono text-sm bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 border border-red-200 dark:border-red-800">
-    {% for field, errors in reply_form_errors.items %}{% for error in errors %}<p>{{ error }}</p>{% endfor %}{% endfor %}
+  <div class="mb-6 p-4 bg-brand-cyan/10 border border-brand-cyan/20 font-mono text-sm text-brand-cyan animate-in fade-in">
+    {{ reply_success_message }}
   </div>
   {% endif %}
+
+  {% if reply_form_errors %}
+  <div aria-label="Comment form errors" class="mb-6 p-4 bg-red-500/10 border border-red-500/20 font-mono text-sm text-red-400 animate-in shake-1">
+    <div class="font-bold mb-2 uppercase tracking-widest text-xs">Errors:</div>
+    <ul class="list-disc list-inside">
+      {% for field, errors in reply_form_errors.items %}
+        {% for error in errors %}<li>{{ error }}</li>{% endfor %}
+      {% endfor %}
+    </ul>
+  </div>
+  {% endif %}
+
   <form method="post" action="{% url 'comment_post' %}"
-    hx-post="{% url 'comment_post' %}" hx-target="#reply-form-container-{{ comment.id }}" hx-swap="outerHTML">
+    hx-post="{% url 'comment_post' %}" hx-target="#reply-form-container-{{ comment.id }}" hx-swap="outerHTML"
+    class="space-y-4">
     {% csrf_token %}
     <input type="hidden" name="article_id" value="{{ page.id }}" />
     <input type="hidden" name="parent_id" value="{{ comment.id }}" />
-    <div class="flex gap-3 mb-3">
-      <input type="text" name="author_name" required placeholder="Your name"
-        class="flex-1 bg-transparent border border-zinc-300 dark:border-zinc-700 px-3 py-2 font-mono text-sm focus:outline-none focus:border-brand-pink focus:shadow-neon-pink transition-colors" />
-      <input type="email" name="author_email" required placeholder="your@email.com"
-        class="flex-1 bg-transparent border border-zinc-300 dark:border-zinc-700 px-3 py-2 font-mono text-sm focus:outline-none focus:border-brand-pink focus:shadow-neon-pink transition-colors" />
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+      <input type="text" name="author_name" required placeholder="Name *"
+        class="bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 px-4 py-2 font-mono text-sm focus:outline-none focus:border-brand-pink focus:ring-1 focus:ring-brand-pink transition-all" />
+      <input type="email" name="author_email" required placeholder="Email *"
+        class="bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 px-4 py-2 font-mono text-sm focus:outline-none focus:border-brand-pink focus:ring-1 focus:ring-brand-pink transition-all" />
     </div>
-    <textarea name="body" required placeholder="Write a reply..." rows="2"
-      class="w-full bg-transparent border border-zinc-300 dark:border-zinc-700 px-3 py-2 font-mono text-sm focus:outline-none focus:border-brand-pink focus:shadow-neon-pink transition-colors mb-3 resize-none"></textarea>
+    <textarea name="body" required placeholder="Your reply..." rows="3"
+      class="w-full bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 px-4 py-2 font-mono text-sm focus:outline-none focus:border-brand-pink focus:ring-1 focus:ring-brand-pink transition-all resize-none"></textarea>
     <input type="text" name="honeypot" hidden />
+    
     {% if turnstile_site_key %}
-    <div class="cf-turnstile mb-3" data-sitekey="{{ turnstile_site_key }}" data-theme="auto" data-size="compact"></div>
+    <div class="cf-turnstile mb-4" data-sitekey="{{ turnstile_site_key }}" data-theme="auto" data-size="flexible"></div>
     {% endif %}
-    <button type="submit" class="px-4 py-2 bg-zinc-200 dark:bg-zinc-800 font-display font-bold text-sm hover:bg-brand-pink hover:text-white transition-colors">Reply</button>
+
+    <div class="flex justify-end gap-3">
+      <button type="submit" data-testid="post-reply-btn" class="px-6 py-2 bg-brand-pink text-white font-display font-bold text-sm shadow-solid-dark hover:-translate-y-0.5 hover:shadow-solid-dark/80 transition-all active:translate-y-0">Post Reply</button>
+    </div>
   </form>
 </div>