feat: Add QnA assistant page with interactive streaming chat interface.

Author: a3ro-dev

app/qna/page.tsx

@@ -7,8 +7,8 @@ export const metadata = {
 
 export default function QnAPage() {
     return (
-        <div className="flex flex-col items-center justify-center min-h-[calc(100vh-80px)] w-full py-8 md:py-12 px-4 sm:px-6 lg:px-8 mt-16 sm:mt-20">
-            <div className="w-full max-w-4xl max-h-[90vh]">
+        <div className="flex flex-col items-center justify-start w-full px-0 sm:px-4 lg:px-8 mt-16 sm:mt-20 h-[calc(100dvh-4rem)] sm:h-[calc(100dvh-5rem)]">
+            <div className="w-full max-w-4xl h-full sm:py-6">
                 <QnAChatInterface />
             </div>
         </div>

components/qna-chat-interface.tsx

@@ -267,7 +267,7 @@ export function QnAChatInterface() {
 
 
     return (
-        <div className="flex flex-col h-[calc(100vh-100px)] w-full max-w-4xl mx-auto rounded-3xl overflow-hidden border border-zinc-700/60 bg-zinc-950/70 shadow-2xl backdrop-blur-3xl relative">
+        <div className="flex flex-col h-full w-full max-w-4xl mx-auto rounded-none sm:rounded-3xl overflow-hidden border-0 sm:border border-zinc-700/60 bg-zinc-950/70 shadow-2xl backdrop-blur-3xl relative">
             <div className="flex flex-wrap items-center justify-between gap-3 px-6 pt-5 pb-4 border-b border-zinc-800/80 bg-zinc-900/50 shrink-0">
                 <div className="flex items-center gap-3">
                     <div className="relative flex items-center justify-center w-10 h-10 rounded-full bg-[var(--brand-pink)] shadow-lg shadow-[#e45a92]/40">