feat: chat reactions

components/chat/quote-card.tsx

@@ -9,10 +9,16 @@
  *
  * The path is always app-relative — the BFF rejects anything else — so this
  * can navigate with the router rather than leaving the app.
+ *
+ * Styling is deliberately bare. This sits INSIDE a chat bubble, which already
+ * supplies the padding, the background and the rounding; giving the quote its
+ * own would draw a second bubble within the first. A left rule and italics are
+ * enough to say "quotation", and every colour is inherited so the same markup
+ * reads correctly on your own primary-coloured bubble and on the muted one
+ * opposite.
  */
 
 import { useRouter } from "next/navigation";
-import { Quote } from "lucide-react";
 import type { Attachment } from "@/lib/chat";
 
 export function QuoteCard({ attachment }: { attachment: Attachment }) {
@@ -25,23 +31,16 @@ export function QuoteCard({ attachment }: { attachment: Attachment }) {
       type="button"
       onClick={() => path && router.push(path)}
       disabled={!path}
-      className="mt-1 block w-full rounded-lg border-l-2 border-primary bg-primary/5 px-3 py-2 text-left transition-colors hover:bg-primary/10 disabled:cursor-default disabled:hover:bg-primary/5"
+      className="block w-full border-l-2 border-current/30 pl-2.5 text-left transition-opacity hover:opacity-80 disabled:cursor-default disabled:hover:opacity-100"
     >
-      <span className="flex items-start gap-2">
-        <Quote className="mt-0.5 size-3.5 shrink-0 text-primary" aria-hidden />
-        <span className="min-w-0 flex-1">
-          {/* The passage is the point, so it leads; the reference follows in
-              the quieter role a citation normally takes. */}
-          <span className="block text-sm italic leading-relaxed text-foreground">
-            {passage}
-          </span>
-          {attachment.title && (
-            <span className="mt-1 block truncate text-xs font-medium text-primary">
-              {attachment.title}
-            </span>
-          )}
+      {/* The passage leads; the citation follows in the quieter role a
+          reference normally takes. */}
+      <span className="block text-sm italic leading-snug">{passage}</span>
+      {attachment.title && (
+        <span className="mt-0.5 block truncate text-xs opacity-70">
+          {attachment.title}
         </span>
-      </span>
+      )}
     </button>
   );
 }