feat(header): move quick capture bar into header above tabs with floating options dropdown

frontend/src/App.tsx

@@ -150,15 +150,15 @@ export const App: React.FC = () => {
   return (
     <div className="min-h-screen bg-canvas text-white flex flex-col font-sans selection:bg-accent/30">
       {/* Top Header Bar */}
-      <header className="sticky top-0 z-30 bg-panel/95 backdrop-blur-md border-b border-border">
-        <div className="max-w-6xl mx-auto px-3 sm:px-4 h-12 flex items-center justify-between gap-4">
+      <header className="sticky top-0 z-30 bg-panel/95 backdrop-blur-md border-b border-border shadow-sm">
+        <div className="max-w-6xl mx-auto px-3 sm:px-4 py-2 flex items-center justify-between gap-3 sm:gap-6">
           {/* Logo & Headline */}
           <div
             onClick={() => {
               setActiveTab('triage');
               handleTriggerAddButton();
             }}
-            className="flex items-center gap-2.5 cursor-pointer group select-none"
+            className="flex items-center gap-2.5 cursor-pointer group select-none flex-shrink-0"
           >
             <div className="w-7 h-7 bg-accent text-white flex items-center justify-center">
               <Brain className="w-4 h-4" />
@@ -173,8 +173,16 @@ export const App: React.FC = () => {
             </div>
           </div>
 
-          {/* User Profile Pill matching Template Screen 2 */}
-          <div className="flex items-center gap-2">
+          {/* Quick-Capture Input Bubble directly in Header (above Tabs) */}
+          <div className="flex-1 max-w-xl mx-auto">
+            <InstantCaptureBar
+              onCaptured={handleCaptured}
+              autoFocusTrigger={captureFocusCount}
+            />
+          </div>
+
+          {/* User Profile Pill */}
+          <div className="flex items-center gap-2 flex-shrink-0">
             <button
               onClick={() => {
                 triggerHaptic(10);
@@ -186,7 +194,7 @@ export const App: React.FC = () => {
               <div className="w-6 h-6 rounded-full bg-accent text-white text-[10px] font-bold flex items-center justify-center">
                 {user?.displayName ? user.displayName.slice(0, 1).toUpperCase() : 'U'}
               </div>
-              <span className="max-w-[120px] truncate">{user?.displayName || 'Konto'}</span>
+              <span className="max-w-[120px] truncate hidden sm:inline">{user?.displayName || 'Konto'}</span>
             </button>
           </div>
         </div>
@@ -267,13 +275,7 @@ export const App: React.FC = () => {
 
       {/* Main Container */}
       <main className="flex-1 max-w-6xl w-full mx-auto px-3 sm:px-4 pt-3 pb-6">
-        {/* Instant Capture Section */}
-        <section className="mb-3">
-          <InstantCaptureBar
-            onCaptured={handleCaptured}
-            autoFocusTrigger={captureFocusCount}
-          />
-        </section>
+        {/* Tab View Content */}
 
 
         {/* Tab View Content */}