Simplify header: clean pill input without card styling

- Remove shadow and extra padding from input
- Smaller, cleaner tokens (badge-md)
- Minimal chips styling (just text links)
- Reduce header height

app/components/navigation/MainNavigation.vue

@@ -2,21 +2,21 @@
   <header class="bg-base-100 shadow-md">
     <!-- Single row: Logo + Search + Icons -->
     <div class="flex items-start px-4 lg:px-6 py-3 gap-4">
-      <!-- Left: Logo (same height as input for alignment) -->
+      <!-- Left: Logo -->
-      <div class="flex items-center flex-shrink-0 py-3">
+      <div class="flex items-center flex-shrink-0 py-2.5">
         <NuxtLink :to="localePath('/')" class="flex items-center gap-2">
           <span class="font-bold text-xl">Optovia</span>
         </NuxtLink>
       </div>
 
       <!-- Center: Search input + chips -->
-      <div class="flex-1 flex flex-col items-center px-4 max-w-2xl mx-auto gap-2">
+      <div class="flex-1 flex flex-col items-center max-w-2xl mx-auto gap-1">
-        <!-- Big rounded input -->
+        <!-- Pill input -->
         <div
-          class="flex items-center gap-3 w-full px-5 py-3 border border-base-300 rounded-full bg-base-100 shadow-md hover:shadow-lg focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20 transition-all cursor-text"
+          class="flex items-center gap-3 w-full px-5 py-2.5 rounded-full border border-base-300 bg-base-100 hover:border-primary focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20 transition-all cursor-text"
           @click="focusInput"
         >
-          <Icon name="lucide:search" size="22" class="text-primary flex-shrink-0" />
+          <Icon name="lucide:search" size="20" class="text-base-content/50 flex-shrink-0" />
 
           <!-- Tokens + input inline -->
           <div class="flex items-center gap-2 flex-wrap flex-1 min-w-0">
@@ -24,17 +24,17 @@
             <div
               v-for="token in activeTokens"
               :key="token.type"
-              class="badge badge-lg gap-1.5 cursor-pointer hover:opacity-80 transition-all flex-shrink-0 text-white"
+              class="badge badge-md gap-1 cursor-pointer hover:opacity-80 transition-all flex-shrink-0 text-white"
               :style="{ backgroundColor: getTokenColor(token.type) }"
               @click.stop="$emit('edit-token', token.type)"
             >
-              <Icon :name="token.icon" size="14" />
+              <Icon :name="token.icon" size="12" />
-              <span class="max-w-28 truncate">{{ token.label }}</span>
+              <span class="max-w-24 truncate text-sm">{{ token.label }}</span>
               <button
                 class="hover:text-error"
                 @click.stop="$emit('remove-token', token.type)"
               >
-                <Icon name="lucide:x" size="14" />
+                <Icon name="lucide:x" size="12" />
               </button>
             </div>
 
@@ -44,31 +44,31 @@
               v-model="localSearchQuery"
               type="text"
               :placeholder="placeholder"
-              class="flex-1 min-w-32 bg-transparent outline-none text-lg"
+              class="flex-1 min-w-32 bg-transparent outline-none"
               @input="$emit('update:search-query', localSearchQuery)"
             />
           </div>
         </div>
 
-        <!-- Chips below input -->
+        <!-- Chips below -->
         <div
           v-if="availableChips.length > 0"
-          class="flex items-center justify-center gap-2"
+          class="flex items-center justify-center gap-1.5"
         >
           <button
             v-for="chip in availableChips"
             :key="chip.type"
-            class="btn btn-xs btn-ghost gap-1"
+            class="text-xs text-base-content/60 hover:text-primary flex items-center gap-0.5 transition-colors"
             @click="$emit('start-select', chip.type)"
           >
-            <Icon name="lucide:plus" size="12" />
+            <Icon name="lucide:plus" size="10" />
             {{ chip.label }}
           </button>
         </div>
       </div>
 
-      <!-- Right: AI + Globe + Team + User (same height as input for alignment) -->
+      <!-- Right: AI + Globe + Team + User -->
-      <div class="flex items-center gap-1 flex-shrink-0 py-3">
+      <div class="flex items-center gap-1 flex-shrink-0 py-2.5">
         <!-- AI Assistant button -->
         <NuxtLink :to="localePath('/clientarea/ai')" class="btn btn-ghost btn-circle btn-sm">
           <Icon name="lucide:bot" size="18" />

app/layouts/topnav.vue

@@ -60,7 +60,7 @@ const {
 } = useCatalogSearch()
 
 // Collapsible header for catalog pages
-const { headerOffset, isCollapsed } = useScrollCollapse(130)
+const { headerOffset, isCollapsed } = useScrollCollapse(100)
 
 // Theme state
 const theme = useState<'cupcake' | 'night'>('theme', () => 'cupcake')
@@ -131,10 +131,10 @@ const headerStyle = computed(() => {
 })
 
 // Main content padding-top to compensate for fixed header
-// 130px = MainNav with search block (input + chips in one block)
+// 100px = MainNav with search (input + chips)
-// 184px = MainNav + SubNav (orders, seller, settings)
+// 154px = MainNav + SubNav (orders, seller, settings)
 const mainStyle = computed(() => ({
-  paddingTop: (isHomePage.value || isCatalogSection.value) ? '130px' : '184px'
+  paddingTop: (isHomePage.value || isCatalogSection.value) ? '100px' : '154px'
 }))
 
 // Provide collapsed state to child components (CatalogPage needs it for map positioning)