Fix: move Vexorium header into ChatApp, restore settings+new-chat visibility

src/components/ChatApp.tsx

@@ -278,11 +278,10 @@ export function ChatApp() {
         <div className="relative">
           <textarea
             ref={textareaRef}
-            className="w-full rounded-xl border border-[#2a2a2a] bg-[#111111] px-4 py-3 pb-11 text-[15px] text-[#f0f0f0] placeholder-[#888888] focus:border-[#c9a84c] focus:outline-none focus:ring-1 focus:ring-[#c9a84c] disabled:opacity-50 resize-none max-h-40 shadow-sm"
-            style={{
-              minHeight: TEXTAREA_MIN_HEIGHT,
-              height: TEXTAREA_MIN_HEIGHT,
-            }}
+            className="w-full rounded-xl px-4 py-3 pb-11 text-[15px] placeholder-[#555] disabled:opacity-50 resize-none max-h-40 shadow-sm focus:outline-none"
+          style={{ border: "1px solid rgba(0,255,255,0.15)", background: "rgba(10,10,28,0.95)", color: "#e0e0f0", minHeight: TEXTAREA_MIN_HEIGHT, height: TEXTAREA_MIN_HEIGHT }}
+          onFocus={e => (e.currentTarget.style.borderColor = "rgba(0,255,255,0.5)")}
+          onBlur={e => (e.currentTarget.style.borderColor = "rgba(0,255,255,0.15)")}
             placeholder={isReady ? "Type a message…" : "Loading model…"}
             value={input}
             onChange={(event) => {
@@ -380,24 +379,26 @@ export function ChatApp() {
   );
 
   return (
-    <div className="flex h-full flex-col bg-[#0a0a0a] text-[#f0f0f0]">
-      <header className="flex-none flex items-center justify-between border-b border-[#2a2a2a] px-6 py-3 h-14">
-        <div className="flex items-center gap-2">
-          <svg
-            height="16"
-            viewBox="0 0 20 20"
-            width="16"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            aria-hidden="true"
+    <div className="flex h-full flex-col text-[#e0e0f0]" style={{ background: "#050515" }}>
+      <header className="flex-none flex items-center justify-between px-6 py-3 h-14" style={{ borderBottom: "1px solid rgba(0,255,255,0.12)", background: "rgba(5,5,21,0.9)" }}>
+        <div className="flex items-center gap-3">
+          <img src="/vexorium_logo.svg" alt="Vexorium" style={{ width: "28px", height: "28px" }} />
+          <span
+            style={{
+              fontFamily: "'Orbitron', sans-serif",
+              fontSize: "13px",
+              fontWeight: 700,
+              letterSpacing: "0.15em",
+              background: "linear-gradient(90deg, #00ffff, #ff00ff)",
+              WebkitBackgroundClip: "text",
+              WebkitTextFillColor: "transparent",
+              backgroundClip: "text",
+              textTransform: "uppercase",
+            }}
           >
-            <path d="M10 1.5 2 6v8l8 4.5 8-4.5V6l-8-4.5Z" fill="#76B900" />
-            <path d="M10 5.1 6 7.4v5.2l4 2.3 4-2.3V7.4l-4-2.3Z" fill="#fff" />
-          </svg>
-          <h1 className="text-base font-semibold text-[#f0f0f0]">
-            {MODEL_CONFIG.label}
-          </h1>
-          <span className="text-base font-semibold text-[#888888]">WebGPU</span>
+            Vexorium
+          </span>
+          <span style={{ color: "rgba(0,255,255,0.35)", fontSize: "12px", fontFamily: "'Exo 2', sans-serif" }}>AI Interviewer · WebGPU</span>
         </div>
         <div className="flex items-center gap-3">
           <button
@@ -412,9 +413,12 @@ export function ChatApp() {
           </button>
           <button
             onClick={clearChat}
-            className={`flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs text-[#888888] hover:text-[#f0f0f0] hover:bg-[#1a1a1a] transition-opacity duration-300 cursor-pointer ${
+            className={`flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs transition-opacity duration-300 cursor-pointer ${
               showNewChat ? "opacity-100" : "opacity-0 pointer-events-none"
             }`}
+            style={{ color: "rgba(0,255,255,0.6)" }}
+            onMouseEnter={e => (e.currentTarget.style.color = "#00ffff")}
+            onMouseLeave={e => (e.currentTarget.style.color = "rgba(0,255,255,0.6)")}
             title="New chat"
           >
             <Plus className="h-3.5 w-3.5" />