style: apply interaction polish and mobile spacing

frontend/src/components/ChatThread.tsx

@@ -43,7 +43,7 @@ export function ChatThread({ messages, isLoading, onExampleClick }: Props) {
               key={query}
               type="button"
               onClick={() => onExampleClick(query)}
-              className="rounded-[10px] bg-[#1a1a1a] px-3.5 py-3 text-left text-[13px] leading-5 text-white/60 transition-colors hover:bg-[#222222] hover:text-white/80"
+              className="rounded-[10px] bg-[#1a1a1a] px-3.5 py-3 text-left text-[13px] leading-5 text-white/60 transition-[background-color,color,transform] duration-150 ease-out hover:bg-[#222222] hover:text-white/80 active:scale-[0.97]"
             >
               {query}
             </button>

frontend/src/components/Header.tsx

@@ -25,7 +25,7 @@ export function Header({ onNewConversation: _onNewConversation, onMenuClick }: P
               type="button"
               onClick={onMenuClick}
               aria-label="Open menu"
-              className="grid h-8 w-8 place-items-center rounded-[6px] text-zinc-400 transition-[background-color,color,transform] duration-150 ease-out hover:bg-white/5 hover:text-white/70 active:scale-95 lg:hidden"
+              className="grid h-8 w-8 place-items-center rounded-[6px] text-zinc-400 transition-[background-color,color,transform] duration-150 ease-out hover:bg-white/5 hover:text-white/70 active:scale-[0.97] lg:hidden"
             >
               <MenuIcon />
             </button>

frontend/src/components/MessageBubble.tsx

@@ -77,7 +77,7 @@ export function MessageBubble({ message }: Props) {
                 href={href}
                 target="_blank"
                 rel="noreferrer"
-                className="font-medium text-[#4f98a3] underline decoration-[#4f98a3]/40 underline-offset-4 hover:text-[#72bdc6]"
+                className="inline-block font-medium text-[#4f98a3] underline decoration-[#4f98a3]/40 underline-offset-4 transition-[color,transform] duration-150 ease-out hover:text-[#72bdc6] active:scale-[0.97]"
               >
                 {children}
               </a>

frontend/src/components/MobileDrawer.tsx

@@ -19,13 +19,7 @@ export function MobileDrawer({ isOpen, onClose, onNewConversation }: Props) {
         className={`fixed inset-y-0 left-0 z-[70] w-[280px] bg-[#141414] shadow-2xl transition-transform duration-300 ease-out ${isOpen ? 'translate-x-0' : '-translate-x-full'}`}
       >
         <div className="flex h-16 items-center border-b border-white/5 px-6">
-          <img
-            src={logo.src}
-            alt="CivicSetu Logo"
-            width={28}
-            height={28}
-            className="rounded-sm"
-          />
+          <img src={logo.src} alt="CivicSetu Logo" width={28} height={28} className="rounded-sm" />
         </div>
 
         <div className="flex h-[calc(100%-4rem)] flex-col p-4">

frontend/src/components/graph/ContextPill.tsx

@@ -15,7 +15,7 @@ export function ContextPill({ sectionId, docName, jurisdiction, onRemove }: Prop
       </span>
       <button
         onClick={onRemove}
-        className="text-white/30 transition-colors hover:text-white/70 active:scale-95"
+        className="text-white/30 transition-[color,transform] duration-150 ease-out hover:text-white/70 active:scale-[0.97]"
         aria-label="Remove section context"
         type="button"
       >

frontend/src/components/graph/NodeInfoCard.tsx

@@ -47,7 +47,7 @@ export function NodeInfoCard({
           </div>
           <button
             onClick={onClose}
-            className="text-white/30 transition-colors hover:text-white/70 active:scale-95"
+            className="text-white/30 transition-[color,transform] duration-150 ease-out hover:text-white/70 active:scale-[0.97]"
             aria-label="Close section summary"
             type="button"
           >
@@ -92,7 +92,7 @@ export function NodeInfoCard({
       <div className="border-t border-white/[0.05] px-3 py-3">
         <button
           onClick={() => onChatAboutSection(node.section_id, node.title, node.doc_name, node.jurisdiction)}
-          className="w-full border border-white/[0.09] bg-white/[0.03] px-3 py-2 text-[11px] font-medium text-white/70 transition-[background-color,border-color,transform] duration-150 ease-out hover:border-[#4f98a3]/50 hover:bg-white/[0.06] hover:text-white active:scale-[0.98]"
+          className="w-full border border-white/[0.09] bg-white/[0.03] px-3 py-2 text-[11px] font-medium text-white/70 transition-[background-color,border-color,transform] duration-150 ease-out hover:border-[#4f98a3]/50 hover:bg-white/[0.06] hover:text-white active:scale-[0.97]"
           type="button"
         >
           Chat about this section

frontend/src/components/graph/SectionDrawer.tsx

@@ -32,7 +32,7 @@ export function SectionDrawer({
       `}
       aria-hidden={!isOpen}
     >
-      <div className="h-1.5 w-12 shrink-0 self-center rounded-full bg-zinc-800 my-3 lg:hidden" />
+      <div className="my-3 h-1.5 w-12 shrink-0 self-center rounded-full bg-zinc-800 lg:hidden" />
       {content ? (
         <header className="flex shrink-0 items-start justify-between gap-3 border-b border-white/[0.06] px-4 py-3">
           <div className="min-w-0 flex-1">
@@ -85,7 +85,7 @@ export function SectionDrawer({
             {[0, 1, 2].map(i => (
               <span
                 key={i}
-                className="h-1.5 w-1.5 rounded-full bg-white/20 animate-pulse"
+                className="h-1.5 w-1.5 animate-pulse rounded-full bg-white/20"
                 style={{ animationDelay: `${i * 150}ms` }}
               />
             ))}
@@ -132,7 +132,7 @@ export function SectionDrawer({
           </div>
 
           <footer className="flex shrink-0 flex-col gap-4 border-t border-white/[0.06] px-4 py-3 max-lg:pb-24 lg:flex-row lg:items-center lg:gap-3 lg:py-2.5">
-            <div className="flex items-center gap-3 min-w-0 flex-1">
+            <div className="flex min-w-0 flex-1 items-center gap-3">
               <span className="shrink-0 font-mono text-[9px] uppercase tracking-[0.14em] text-white/25 lg:hidden">Related</span>
               <div className="ledger-scroll flex min-w-0 flex-1 gap-1.5 overflow-x-auto">
                 {content.connected_sections.slice(0, 10).map((section, index) => (
@@ -152,14 +152,13 @@ export function SectionDrawer({
             </div>
 
             <button
-              onClick={() =>
-                onChatAboutSection(content.section_id, content.title, content.doc_name, content.jurisdiction)
-              }
+              onClick={() => onChatAboutSection(content.section_id, content.title, content.doc_name, content.jurisdiction)}
               className="flex w-full items-center justify-between border border-[#4f98a3]/35 bg-[#4f98a3]/10 px-4 py-3 text-[13px] font-medium text-[#9ed4dc] transition-[background-color,border-color,transform] duration-150 ease-out hover:border-[#4f98a3]/70 hover:bg-[#4f98a3]/16 active:scale-[0.97] lg:w-auto lg:px-3 lg:py-1.5 lg:text-[11px]"
               type="button"
             >
               <span>Chat about this section</span>
-              <svg suppressHydrationWarning xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 -960 960 960" width="18px" fill="#e3e3e3"><path d="M630-444H192v-72h438L429-717l51-51 288 288-288 288-51-51 201-201Z"/></svg>            </button>
+              <svg suppressHydrationWarning xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 -960 960 960" width="18px" fill="#e3e3e3"><path d="M630-444H192v-72h438L429-717l51-51 288 288-288 288-51-51 201-201Z"/></svg>
+            </button>
           </footer>
         </>
       ) : null}