Apply liquid glass to pantry view

index.html

@@ -383,11 +383,68 @@
             font-size: 0.54rem;
             line-height: 0.72rem;
         }
+        #recipe-grid > .recipe-catalog-card {
+            background: rgba(var(--surface-rgb), 0.7) !important;
+            background-image: none !important;
+            border: 1px solid rgba(255, 255, 255, 0.34) !important;
+            border-radius: 1.08rem !important;
+            box-shadow:
+                0 1px 2px rgba(var(--overlay-rgb), 0.06),
+                0 8px 18px rgba(var(--overlay-rgb), 0.08) !important;
+            backdrop-filter: blur(14px) saturate(140%);
+            -webkit-backdrop-filter: blur(14px) saturate(140%);
+        }
+        .dark #recipe-grid > .recipe-catalog-card {
+            background: rgba(var(--surface-rgb), 0.62) !important;
+            border-color: rgba(255, 255, 255, 0.1) !important;
+            box-shadow:
+                0 1px 2px rgba(0, 0, 0, 0.22),
+                0 10px 24px rgba(0, 0, 0, 0.26) !important;
+        }
+        #recipe-grid > .recipe-catalog-card .recipe-browser-card-media {
+            height: 5.45rem;
+            background: rgb(var(--skeleton-rgb)) !important;
+        }
+        #recipe-grid > .recipe-catalog-card .recipe-browser-card-body {
+            padding: 0.62rem;
+        }
+        #recipe-grid > .recipe-catalog-card .recipe-browser-card-title {
+            min-height: 2.64rem;
+            margin-bottom: 0.5rem;
+            font-size: 0.68rem;
+            font-weight: 650 !important;
+            line-height: 0.88rem;
+            color: rgb(var(--text-emphasis-rgb)) !important;
+        }
+        #recipe-grid > .recipe-catalog-card .recipe-browser-card-meta {
+            margin-bottom: 0;
+            padding-top: 0.1rem;
+            color: rgb(var(--text-muted-rgb)) !important;
+        }
+        #recipe-grid > .recipe-catalog-card .recipe-browser-card-meta i {
+            color: rgb(var(--text-dim-rgb)) !important;
+        }
+        #recipe-grid > .recipe-catalog-card > div:first-child::after {
+            display: none;
+        }
+        #recipe-grid > .recipe-catalog-card:active {
+            transform: scale(0.985);
+        }
         #recipe-grid > *:hover,
         #planner-picker-grid > *:hover {
             transform: translateY(-2px);
             box-shadow: none !important;
         }
+        #recipe-grid > .recipe-catalog-card:hover {
+            box-shadow:
+                0 2px 4px rgba(var(--overlay-rgb), 0.08),
+                0 12px 24px rgba(var(--overlay-rgb), 0.12) !important;
+        }
+        .dark #recipe-grid > .recipe-catalog-card:hover {
+            box-shadow:
+                0 2px 4px rgba(0, 0, 0, 0.24),
+                0 14px 30px rgba(0, 0, 0, 0.34) !important;
+        }
         #recipe-grid > * img,
         #planner-picker-grid > * img {
             transition: transform 240ms ease;
@@ -405,38 +462,200 @@
             background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(var(--app-bg-rgb), 0.5) 92%);
             pointer-events: none;
         }
-        #recipe-topbar #recipe-search-shell {
+        #recipe-search-shell,
-            min-height: 0;
+        #pantry-search-shell {
-            width: 100%;
-            margin-inline: 0;
             isolation: auto;
         }
-        #recipe-topbar #recipe-search-shell::after {
+        #recipe-search-shell::after,
+        #pantry-search-shell::after {
             display: none;
         }
-        #recipe-topbar #recipe-search-shell,
+        #recipe-bottom-controls,
-        #recipe-topbar #recipe-search-shell:focus-within {
+        #recipe-bottom-default-actions,
-            background: rgb(var(--sunken-rgb)) !important;
+        #pantry-bottom-controls {
-            border: 1px solid rgb(var(--border-input-rgb)) !important;
+            bottom: calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)) !important;
-            backdrop-filter: none;
+            height: var(--recipe-control-size, 3.05rem) !important;
-            -webkit-backdrop-filter: none;
-        }
-        #recipe-topbar #recipe-search-input {
-            appearance: none;
-            -webkit-appearance: none;
             background: transparent !important;
             border: none !important;
             box-shadow: none !important;
+            backdrop-filter: none !important;
+            -webkit-backdrop-filter: none !important;
+            transition: opacity 160ms ease;
+        }
+        html.is-nav-menu-open #recipe-bottom-controls,
+        html.is-nav-menu-open #pantry-bottom-controls {
+            opacity: 0;
+            pointer-events: none;
+        }
+        html.is-nav-menu-open #recipe-bottom-controls *,
+        html.is-nav-menu-open #pantry-bottom-controls * {
+            pointer-events: none !important;
+        }
+        #recipe-search-shell.recipe-search-field,
+        #recipe-search-shell.recipe-search-field:focus-within,
+        #pantry-search-shell.recipe-search-field,
+        #pantry-search-shell.recipe-search-field:focus-within {
+            position: absolute !important;
+            left: calc(var(--catalog-menu-left, 1rem) + var(--catalog-menu-width, 3.72rem) + 0.5rem);
+            right: var(--catalog-search-right, calc(1rem + var(--recipe-control-size, 3.05rem) + 0.5rem));
+            bottom: 0;
+            min-width: 0;
+            height: var(--recipe-control-size, 3.05rem);
+            border-radius: 999px;
+            background: rgba(255, 255, 255, 0.2) !important;
+            border: 1px solid rgba(255, 255, 255, 0.32) !important;
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.6),
+                inset 0 -1px 0 rgba(var(--overlay-rgb), 0.06),
+                0 8px 20px rgba(var(--overlay-rgb), 0.14),
+                0 18px 38px rgba(var(--overlay-rgb), 0.18) !important;
+            backdrop-filter: blur(28px) saturate(180%);
+            -webkit-backdrop-filter: blur(28px) saturate(180%);
+        }
+        .dark #recipe-search-shell.recipe-search-field,
+        .dark #recipe-search-shell.recipe-search-field:focus-within,
+        .dark #pantry-search-shell.recipe-search-field,
+        .dark #pantry-search-shell.recipe-search-field:focus-within {
+            background: rgba(255, 255, 255, 0.04) !important;
+            border: 1px solid rgba(255, 255, 255, 0.12) !important;
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.24),
+                inset 0 -1px 0 rgba(0, 0, 0, 0.22),
+                0 10px 24px rgba(0, 0, 0, 0.3),
+                0 24px 54px rgba(0, 0, 0, 0.38) !important;
+        }
+        #recipe-search-input,
+        #pantry-search-input {
+            appearance: none;
+            -webkit-appearance: none;
+            background: transparent !important;
+            background-color: transparent !important;
+            background-image: none !important;
+            border: none !important;
+            border-radius: 0 !important;
+            box-shadow: none !important;
+            backdrop-filter: none !important;
+            -webkit-backdrop-filter: none !important;
             color: rgb(var(--text-body-rgb)) !important;
             caret-color: rgb(var(--text-body-rgb));
+            padding: 0 !important;
         }
-        #recipe-topbar #recipe-search-input::placeholder {
+        #recipe-search-input::-webkit-search-cancel-button,
+        #recipe-search-input::-webkit-search-decoration,
+        #recipe-search-input::-webkit-search-results-button,
+        #recipe-search-input::-webkit-search-results-decoration,
+        #pantry-search-input::-webkit-search-cancel-button,
+        #pantry-search-input::-webkit-search-decoration,
+        #pantry-search-input::-webkit-search-results-button,
+        #pantry-search-input::-webkit-search-results-decoration {
+            display: none;
+        }
+        #recipe-search-input::placeholder,
+        #pantry-search-input::placeholder {
             color: rgb(var(--text-dim-rgb)) !important;
             opacity: 1;
         }
-        #recipe-topbar #recipe-filter-btn {
+        #recipe-search-close,
+        #recipe-search-close:hover,
+        #recipe-search-close:focus,
+        #recipe-search-close:focus-visible,
+        #recipe-search-close:active,
+        #pantry-search-close,
+        #pantry-search-close:hover,
+        #pantry-search-close:focus,
+        #pantry-search-close:focus-visible,
+        #pantry-search-close:active {
+            appearance: none;
+            -webkit-appearance: none;
+            background: transparent !important;
+            background-color: transparent !important;
+            background-image: none !important;
+            border: none !important;
+            box-shadow: none !important;
+            backdrop-filter: none !important;
+            -webkit-backdrop-filter: none !important;
+            outline: none;
+        }
+        #main-view .recipe-glass-btn,
+        #pantry-view .recipe-glass-btn,
+        #app-bottom-nav .recipe-nav-toggle {
+            position: relative;
+            border: 1px solid rgba(255, 255, 255, 0.32) !important;
+            background: rgba(255, 255, 255, 0.2) !important;
+            background-image: none !important;
+            color: rgb(var(--text-body-rgb));
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.6),
+                inset 0 -1px 0 rgba(var(--overlay-rgb), 0.06),
+                0 8px 20px rgba(var(--overlay-rgb), 0.14),
+                0 18px 38px rgba(var(--overlay-rgb), 0.18) !important;
+            backdrop-filter: blur(28px) saturate(180%);
+            -webkit-backdrop-filter: blur(28px) saturate(180%);
+        }
+        .dark #main-view .recipe-glass-btn,
+        .dark #pantry-view .recipe-glass-btn,
+        .dark #app-bottom-nav .recipe-nav-toggle {
+            border: 1px solid rgba(255, 255, 255, 0.12) !important;
+            background: rgba(255, 255, 255, 0.04) !important;
+            background-image: none !important;
+            color: rgb(var(--text-body-rgb));
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.24),
+                inset 0 -1px 0 rgba(0, 0, 0, 0.22),
+                0 10px 24px rgba(0, 0, 0, 0.3),
+                0 24px 54px rgba(0, 0, 0, 0.38) !important;
+        }
+        #main-view .recipe-glass-btn:hover,
+        #pantry-view .recipe-glass-btn:hover,
+        #app-bottom-nav .recipe-nav-toggle:hover {
+            background: rgba(var(--overlay-rgb), 0.1) !important;
+            color: rgb(var(--text-emphasis-rgb));
+            transform: translateY(-1px);
+        }
+        .dark #main-view .recipe-glass-btn:hover,
+        .dark #pantry-view .recipe-glass-btn:hover,
+        .dark #app-bottom-nav .recipe-nav-toggle:hover {
+            background: rgba(255, 255, 255, 0.09) !important;
+        }
+        #main-view #recipe-search-shell.recipe-search-field:hover,
+        #pantry-view #pantry-search-shell.recipe-search-field:hover {
+            transform: none;
+        }
+        #recipe-filter-btn,
+        #pantry-filter-bottom-btn {
             border-radius: 999px;
         }
+        #main-view #recipe-filter-btn.recipe-bottom-action,
+        #pantry-view #pantry-filter-bottom-btn.recipe-bottom-action {
+            border-radius: 999px;
+        }
+        #main-view #recipe-filter-wrap,
+        #pantry-view #pantry-filter-bottom-wrap {
+            left: var(--catalog-filter-left, calc(100vw - 4.05rem)) !important;
+            right: auto !important;
+            bottom: 0;
+        }
+        #main-view .recipe-bottom-action,
+        #pantry-view .recipe-bottom-action {
+            width: var(--recipe-control-size, 3.05rem);
+            height: var(--recipe-control-size, 3.05rem);
+            border-radius: 999px;
+            font-size: 0.95rem;
+        }
+        #main-view .recipe-bottom-action i,
+        #pantry-view .recipe-bottom-action i {
+            font-size: 0.95rem;
+            line-height: 1;
+        }
+        .dark #pantry-filter-popover {
+            background: rgba(var(--app-bg-rgb), 0.82) !important;
+            border: 1px solid rgba(255, 255, 255, 0.12) !important;
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.24),
+                inset 0 -1px 0 rgba(0, 0, 0, 0.22),
+                0 10px 24px rgba(0, 0, 0, 0.36),
+                0 26px 60px rgba(0, 0, 0, 0.46) !important;
+        }
         #planner-picker-search-shell {
             min-height: 3rem;
             width: min(calc(100% - 0.5rem), 22.4rem);
@@ -573,8 +792,7 @@
             font-weight: 400;
             letter-spacing: -0.02em;
         }
-        #planner-picker-search::placeholder,
+        #planner-picker-search::placeholder {
-        #pantry-search::placeholder {
             color: rgba(var(--text-body-soft-rgb), 0.72) !important;
             opacity: 1;
         }
@@ -620,24 +838,109 @@
             inset-inline: 0;
             bottom: 0;
             z-index: 30;
+            --dock-width: min(calc(100% - 2.4rem), 24.5rem);
+            --dock-pad: 0.42rem;
+            --dock-gap: 0.06rem;
+            --dock-radius: 999px;
+            --recipe-dock-width: var(--dock-width);
+            --recipe-collapsed-dock-width: 3.05rem;
+            --recipe-collapsed-dock-height: 3.05rem;
+            --recipe-collapsed-dock-radius: 999px;
+            --recipe-toggle-size: calc(var(--recipe-collapsed-dock-width) - (var(--dock-pad) * 2));
             display: flex;
             justify-content: center;
             padding: 0 0.85rem calc(1.58rem + env(safe-area-inset-bottom));
             pointer-events: none;
+            transition: opacity 260ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
+        }
+        #app-bottom-nav .recipe-nav-toggle {
+            display: none;
+            position: absolute;
+            top: var(--dock-pad);
+            bottom: var(--dock-pad);
+            left: var(--dock-pad);
+            width: var(--recipe-toggle-size);
+            height: auto;
+            margin: 0;
+            padding: 0;
+            border-radius: 999px;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.95rem;
+            pointer-events: auto;
+            cursor: pointer;
+            z-index: 2;
+            transition:
+                transform 220ms ease,
+                color 160ms ease,
+                background-color 160ms ease,
+                box-shadow 180ms ease,
+                opacity 280ms ease;
+        }
+        #app-bottom-nav.is-collapsed-tab:not(.is-nav-menu-open):not(.is-nav-collapsing) .recipe-nav-toggle {
+            display: inline-flex;
+            opacity: 1;
+            transform: translateY(0) scale(1);
+        }
+        #app-bottom-nav.is-collapsed-tab.is-nav-collapsing .recipe-nav-toggle {
+            display: inline-flex;
+            opacity: 1;
+            transform: translateY(0) scale(1);
+            pointer-events: none;
+        }
+        #app-bottom-nav.is-collapsed-tab .recipe-nav-toggle {
+            background: transparent !important;
+            border-color: transparent !important;
+            box-shadow: none !important;
+            backdrop-filter: none;
+            -webkit-backdrop-filter: none;
+        }
+        #app-bottom-nav.is-collapsed-tab:not(.is-nav-menu-open) .bottom-dock {
+            width: var(--recipe-collapsed-dock-width);
+            height: var(--recipe-collapsed-dock-height);
+            border-radius: var(--recipe-collapsed-dock-radius);
+            opacity: 1;
+            transform: translate(
+                calc((var(--recipe-collapsed-dock-width) - var(--recipe-dock-width)) / 2),
+                calc(var(--recipe-controls-lift, 0px) * -1)
+            );
+            pointer-events: auto;
+        }
+        #app-bottom-nav.is-collapsed-tab.is-nav-collapsing:not(.is-nav-menu-open) .bottom-dock {
+            opacity: 1;
+            pointer-events: auto;
+        }
+        #app-bottom-nav.is-collapsed-tab.is-nav-menu-open .recipe-nav-toggle {
+            opacity: 0;
+            transform: translateY(0) scale(0.98);
+            pointer-events: none;
+        }
+        #app-bottom-nav.is-collapsed-tab.is-nav-collapsing .recipe-nav-toggle {
+            opacity: 1;
+            transform: translateY(0) scale(1);
+            pointer-events: none;
+        }
+        #app-bottom-nav.is-collapsed-tab.is-nav-menu-open .bottom-dock {
+            opacity: 1;
+            width: var(--recipe-dock-width);
+            transform: translateY(0);
+            pointer-events: auto;
         }
         #app-bottom-nav .bottom-dock {
             position: relative;
             box-sizing: border-box;
-            width: min(calc(100% - 2.4rem), 24.5rem);
+            width: var(--dock-width);
             height: 3.72rem;
             display: grid;
             grid-template-columns: repeat(4, minmax(0, 1fr));
             align-items: stretch;
-            gap: 0.06rem;
+            gap: var(--dock-gap);
-            padding: 0.42rem;
+            padding: var(--dock-pad);
-            border-radius: 1.68rem;
+            border-radius: var(--dock-radius);
             background: rgba(255, 255, 255, 0.2);
+            background-image: none;
             border: 1px solid rgba(255, 255, 255, 0.32);
+            overflow: hidden;
             backdrop-filter: blur(28px) saturate(180%);
             -webkit-backdrop-filter: blur(28px) saturate(180%);
             box-shadow:
@@ -646,9 +949,17 @@
                 0 8px 20px rgba(var(--overlay-rgb), 0.16),
                 0 22px 52px rgba(var(--overlay-rgb), 0.24);
             pointer-events: auto;
+            transform-origin: left center;
+            transition:
+                opacity 220ms ease,
+                width 540ms cubic-bezier(0.16, 1, 0.3, 1),
+                height 540ms cubic-bezier(0.16, 1, 0.3, 1),
+                border-radius 540ms cubic-bezier(0.16, 1, 0.3, 1),
+                transform 540ms cubic-bezier(0.16, 1, 0.3, 1);
         }
         .dark #app-bottom-nav .bottom-dock {
             background: rgba(255, 255, 255, 0.04);
+            background-image: none;
             border: 1px solid rgba(255, 255, 255, 0.12);
             box-shadow:
                 inset 0 1px 0 rgba(255, 255, 255, 0.24),
@@ -662,6 +973,17 @@
             display: flex;
             align-items: center;
             justify-content: center;
+            opacity: 1;
+            transition: opacity 140ms ease;
+        }
+        #app-bottom-nav.is-collapsed-tab:not(.is-nav-menu-open) .nav-slot {
+            opacity: 0;
+            pointer-events: none;
+        }
+        #app-bottom-nav.is-collapsed-tab.is-nav-collapsing .nav-slot {
+            opacity: 0;
+            transition: none;
+            pointer-events: none;
         }
         #app-bottom-nav .nav-tab,
         #app-bottom-nav .nav-action {
@@ -674,7 +996,7 @@
             height: 2.18rem;
             margin: 0;
             padding: 0;
-            border-radius: 1.35rem;
+            border-radius: 999px;
             display: inline-flex;
             align-items: center;
             justify-content: center;
@@ -731,7 +1053,7 @@
             padding: 0.34rem 0.28rem 0.3rem;
             color: rgb(var(--text-primary-rgb));
             background: rgba(var(--overlay-rgb), 0.38) !important;
-            border-radius: 1.05rem;
+            border-radius: 999px;
             box-shadow:
                 inset 0 1px 0 rgba(255, 255, 255, 0.08),
                 inset 0 -1px 0 rgba(var(--overlay-rgb), 0.18) !important;
@@ -762,25 +1084,32 @@
         @media (max-width: 380px) {
             #app-bottom-nav {
                 padding-inline: 0.7rem;
+                --dock-width: min(calc(100% - 1.6rem), 22.5rem);
+                --dock-pad: 0.38rem;
+                --dock-gap: 0.05rem;
+                --dock-radius: 999px;
+                --recipe-collapsed-dock-width: 2.95rem;
+                --recipe-collapsed-dock-height: 2.95rem;
+                --recipe-collapsed-dock-radius: 999px;
             }
             #app-bottom-nav .bottom-dock {
-                width: min(calc(100% - 1.6rem), 22.5rem);
+                width: var(--dock-width);
                 height: 3.48rem;
-                gap: 0.05rem;
+                gap: var(--dock-gap);
-                padding: 0.38rem;
+                padding: var(--dock-pad);
-                border-radius: 1.56rem;
+                border-radius: var(--dock-radius);
             }
             #app-bottom-nav .nav-tab,
             #app-bottom-nav .nav-action {
                 width: 2.02rem;
                 height: 2.02rem;
-                border-radius: 1.28rem;
+                border-radius: 999px;
             }
             #app-bottom-nav .nav-tab.is-active {
                 width: min(100%, 4.4rem);
                 height: 2.65rem;
                 padding: 0.3rem 0.22rem 0.27rem;
-                border-radius: 0.96rem;
+                border-radius: 999px;
             }
             #app-bottom-nav .nav-label {
                 font-size: 0.56rem;

js/ui/bottomNav.js

@@ -1,7 +1,10 @@
 export function getBottomNavHTML() {
     return `
     <nav id="app-bottom-nav" aria-label="Główna nawigacja">
-        <div class="bottom-dock">
+        <div id="app-bottom-nav-dock" class="bottom-dock">
+            <button type="button" id="recipe-nav-toggle" class="recipe-nav-toggle" aria-label="Otwórz menu" aria-expanded="false" aria-controls="app-bottom-nav-dock">
+                <i id="recipe-nav-toggle-icon" class="fas fa-book-open" aria-hidden="true"></i>
+            </button>
             <div class="nav-slot">
                 <button type="button" data-tab="planner" id="nav-planner" class="nav-tab is-active" aria-label="Planer" aria-current="page">
                     <i class="far fa-calendar-alt" aria-hidden="true"></i>
@@ -10,7 +13,7 @@ export function getBottomNavHTML() {
             </div>
             <div class="nav-slot">
                 <button type="button" data-tab="recipes" id="nav-recipes" class="nav-tab" aria-label="Katalog">
-                    <i class="fas fa-search" aria-hidden="true"></i>
+                    <i class="fas fa-book-open" aria-hidden="true"></i>
                     <span class="nav-label">Katalog</span>
                 </button>
             </div>
@@ -40,12 +43,102 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
     if (!main || !planner || !pantry || !shopping || !nav) return;
 
     const TABS = ['recipes', 'planner', 'pantry', 'shopping'];
+    const COLLAPSED_TABS = new Set(['recipes', 'pantry']);
+    const COLLAPSED_TAB_ICON = { recipes: 'fa-book-open', pantry: 'fa-warehouse' };
+    const COLLAPSED_TAB_LABEL = { recipes: 'Otwórz menu katalogu', pantry: 'Otwórz menu spiżarni' };
+    let isRecipeMenuOpen = false;
+    let previousTab = 'planner';
+    let collapseTimer = null;
+
+    const syncRecipeNavMetrics = () => {
+        const rootFontSize = parseFloat(window.getComputedStyle(document.documentElement).fontSize) || 16;
+        const navStyles = window.getComputedStyle(nav);
+        const navPadLeft = parseFloat(navStyles.paddingLeft) || 0;
+        const navPadRight = parseFloat(navStyles.paddingRight) || 0;
+        const navContentWidth = nav.clientWidth - navPadLeft - navPadRight;
+        const isCompact = window.matchMedia('(max-width: 380px)').matches;
+        const dockInset = (isCompact ? 1.6 : 2.4) * rootFontSize;
+        const dockMax = (isCompact ? 22.5 : 24.5) * rootFontSize;
+        const dockWidth = Math.min(navContentWidth - dockInset, dockMax);
+        if (dockWidth <= 0) return;
+
+        const padLeft = (isCompact ? 0.38 : 0.42) * rootFontSize;
+        const padRight = (isCompact ? 0.38 : 0.42) * rootFontSize;
+        const columnGap = (isCompact ? 0.05 : 0.06) * rootFontSize;
+        const dockLeft = navPadLeft + ((navContentWidth - dockWidth) / 2);
+        const controlSize = (isCompact ? 2.95 : 3.05) * rootFontSize;
+        const expandedDockHeight = (isCompact ? 3.48 : 3.72) * rootFontSize;
+        const controlGap = 0.5 * rootFontSize;
+        const controlsLift = Math.max(0, (expandedDockHeight - controlSize) / 2);
+        const collapsedDockWidth = controlSize;
+        const collapsedSlotWidth = Math.max(32, collapsedDockWidth - padLeft - padRight);
+        const filterLeft = Math.max(
+            dockLeft + collapsedDockWidth + controlGap,
+            dockLeft + dockWidth - padRight - controlSize,
+        );
+        const searchRight = Math.max(16, nav.clientWidth - filterLeft + controlGap);
+
+        nav.style.setProperty('--recipe-dock-width', `${dockWidth}px`);
+        nav.style.setProperty('--recipe-collapsed-dock-width', `${collapsedDockWidth}px`);
+        nav.style.setProperty('--recipe-toggle-size', `${collapsedSlotWidth}px`);
+        document.documentElement.style.setProperty('--catalog-menu-left', `${dockLeft}px`);
+        document.documentElement.style.setProperty('--catalog-menu-width', `${collapsedDockWidth}px`);
+        document.documentElement.style.setProperty('--catalog-filter-left', `${filterLeft}px`);
+        document.documentElement.style.setProperty('--catalog-search-right', `${searchRight}px`);
+        document.documentElement.style.setProperty('--recipe-control-size', `${controlSize}px`);
+        document.documentElement.style.setProperty('--recipe-controls-lift', `${controlsLift}px`);
+    };
+
+    const updateToggleForTab = (tab) => {
+        const icon = document.getElementById('recipe-nav-toggle-icon');
+        const button = document.getElementById('recipe-nav-toggle');
+        const nextIcon = COLLAPSED_TAB_ICON[tab];
+        if (icon && nextIcon) {
+            icon.className = `fas ${nextIcon}`;
+        }
+        if (button && COLLAPSED_TAB_LABEL[tab]) {
+            button.setAttribute('aria-label', COLLAPSED_TAB_LABEL[tab]);
+        }
+    };
+
+    const setRecipeMenuOpen = (open) => {
+        syncRecipeNavMetrics();
+        window.clearTimeout(collapseTimer);
+        isRecipeMenuOpen = open;
+        nav.classList.remove('is-nav-collapsing');
+        nav.classList.toggle('is-nav-menu-open', open);
+        document.documentElement.classList.toggle('is-nav-menu-open', open);
+        document.getElementById('recipe-nav-toggle')?.setAttribute('aria-expanded', open ? 'true' : 'false');
+    };
 
     const apply = (tab) => {
+        const wasCollapsedTab = COLLAPSED_TABS.has(previousTab);
+        const isCollapsedTab = COLLAPSED_TABS.has(tab);
         main.classList.toggle('hidden', tab !== 'recipes');
         planner.classList.toggle('hidden', tab !== 'planner');
         pantry.classList.toggle('hidden', tab !== 'pantry');
         shopping.classList.toggle('hidden', tab !== 'shopping');
+        nav.classList.toggle('is-collapsed-tab', isCollapsedTab);
+        updateToggleForTab(tab);
+        syncRecipeNavMetrics();
+        setRecipeMenuOpen(false);
+
+        if (isCollapsedTab && (!wasCollapsedTab || tab !== previousTab)) {
+            nav.classList.add('is-nav-menu-open', 'is-nav-collapsing');
+            document.documentElement.classList.add('is-nav-menu-open');
+            document.getElementById('recipe-nav-toggle')?.setAttribute('aria-expanded', 'false');
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    requestAnimationFrame(() => {
+                        nav.classList.remove('is-nav-menu-open');
+                        document.documentElement.classList.remove('is-nav-menu-open');
+                        collapseTimer = window.setTimeout(() => {
+                            nav.classList.remove('is-nav-collapsing');
+                        }, 500);
+                    });
+                });
+            });
+        }
 
         if (tab === 'pantry' && typeof refreshPantry === 'function') refreshPantry();
         if (tab === 'shopping' && typeof refreshShoppingList === 'function') refreshShoppingList();
@@ -60,17 +153,47 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
                 else btn.removeAttribute('aria-current');
             }
         });
+
+        window.dispatchEvent(new CustomEvent('app-tab-change', { detail: { tab } }));
+        previousTab = tab;
     };
 
     nav.addEventListener('click', (e) => {
+        const toggle = e.target.closest('#recipe-nav-toggle');
+        if (toggle) {
+            e.stopPropagation();
+            setRecipeMenuOpen(!isRecipeMenuOpen);
+            window.closeRecipeSearch?.();
+            window.closePantrySearch?.();
+            window.closePantryFilter?.();
+            window.closeFilters?.();
+            return;
+        }
+
         const btn = e.target.closest('.nav-tab[data-tab]');
         if (!btn || btn.hasAttribute('disabled')) return;
         const tab = btn.getAttribute('data-tab');
         if (TABS.includes(tab)) apply(tab);
     });
 
+    document.addEventListener('click', (e) => {
+        if (!isRecipeMenuOpen || !nav.classList.contains('is-collapsed-tab')) return;
+        if (e.composedPath().includes(nav)) return;
+        setRecipeMenuOpen(false);
+    });
+
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && isRecipeMenuOpen) setRecipeMenuOpen(false);
+    });
+
+    window.addEventListener('resize', syncRecipeNavMetrics);
+
     apply('planner');
 
+    window.switchAppTab = (tab) => {
+        if (TABS.includes(tab)) apply(tab);
+    };
+
     window.refreshStockViews = () => {
         if (typeof refreshPantry === 'function') refreshPantry();
     };

js/ui/filterPopover.js

@@ -0,0 +1,67 @@
+const STYLE_ID = 'filter-popover-liquid-styles';
+
+export function ensureFilterPopoverStyles() {
+    if (typeof document === 'undefined') return;
+    if (document.getElementById(STYLE_ID)) return;
+    const style = document.createElement('style');
+    style.id = STYLE_ID;
+    style.textContent = `
+        .filter-liquid-surface {
+            --filter-liquid-panel-bg: rgba(var(--app-bg-rgb), 0.78);
+            --filter-liquid-border: rgba(255, 255, 255, 0.32);
+            --filter-liquid-chip-bg: rgba(var(--surface-rgb), 0.55);
+            --filter-liquid-chip-active-bg: rgba(255, 255, 255, 0.95);
+            --filter-liquid-chip-active-border: rgba(255, 255, 255, 0.6);
+            --filter-liquid-track-bg: rgba(var(--overlay-rgb), 0.16);
+            --filter-liquid-accent-bg: rgba(255, 255, 255, 0.72);
+            --filter-liquid-text-active: rgb(var(--text-emphasis-rgb));
+            --filter-liquid-text-secondary: rgb(var(--text-body-soft-rgb));
+            --filter-liquid-text-muted: rgb(var(--text-muted-rgb));
+            --filter-liquid-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.6),
+                inset 0 -1px 0 rgba(var(--overlay-rgb), 0.06),
+                0 8px 20px rgba(var(--overlay-rgb), 0.16),
+                0 22px 52px rgba(var(--overlay-rgb), 0.24);
+        }
+
+        .dark .filter-liquid-surface {
+            --filter-liquid-panel-bg: rgba(var(--app-bg-rgb), 0.82);
+            --filter-liquid-border: rgba(255, 255, 255, 0.12);
+            --filter-liquid-chip-bg: rgba(255, 255, 255, 0.06);
+            --filter-liquid-chip-active-bg: rgba(255, 255, 255, 0.3);
+            --filter-liquid-chip-active-border: rgba(255, 255, 255, 0.38);
+            --filter-liquid-track-bg: rgba(255, 255, 255, 0.1);
+            --filter-liquid-accent-bg: rgba(255, 255, 255, 0.32);
+            --filter-liquid-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.24),
+                inset 0 -1px 0 rgba(0, 0, 0, 0.22),
+                0 10px 24px rgba(0, 0, 0, 0.36),
+                0 26px 60px rgba(0, 0, 0, 0.46);
+        }
+
+        .filter-liquid-panel {
+            isolation: isolate;
+            background: var(--filter-liquid-panel-bg) !important;
+            background-image: none !important;
+            border: 1px solid var(--filter-liquid-border) !important;
+            box-shadow: var(--filter-liquid-shadow) !important;
+            backdrop-filter: blur(28px) saturate(180%);
+            -webkit-backdrop-filter: blur(28px) saturate(180%);
+        }
+    `;
+    document.head.appendChild(style);
+}
+
+ensureFilterPopoverStyles();
+
+export function filterChipStyle(active) {
+    const background = active ? 'var(--filter-liquid-chip-active-bg)' : 'var(--filter-liquid-chip-bg)';
+    const color = active ? 'var(--filter-liquid-text-active)' : 'var(--filter-liquid-text-secondary)';
+    const borderRule = active
+        ? 'border:1px solid var(--filter-liquid-chip-active-border);'
+        : 'border:1px solid transparent;';
+    const shadow = active
+        ? 'box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 6px rgba(var(--overlay-rgb),0.18);'
+        : 'box-shadow:none;';
+    return `background:${background}; ${borderRule} color:${color}; ${shadow}`;
+}

js/views/Filter.js

@@ -1,24 +1,27 @@
-import { RECIPES } from '../data/catalog.js?v=9';
+import { RECIPES, CATEGORY_LABELS } from '../data/catalog.js?v=9';
 import { MEAL_SLOTS } from '../planner/mealSlots.js';
 import { applyFilters, getFilterState } from './RecipeList.js';
+import { ensureFilterPopoverStyles, filterChipStyle } from '../ui/filterPopover.js?v=1';
+
+const PANTRY_CATEGORY_ORDER = ['pieczywo', 'nabial', 'mieso_ryby', 'warzywa', 'owoce', 'suche', 'przyprawy', 'inne'];
+const PANTRY_SECTION_FILTERS = [
+    { id: 'shortfalls', label: 'Potrzebne' },
+    { id: 'sufficient', label: 'W spiżarni' },
+    { id: 'notPlanned', label: 'Poza planem' },
+];
 
 const FILTER_PANEL_TRANSITION = 'opacity 180ms ease, transform 180ms ease';
-const FILTER_SURFACE = 'rgb(var(--sunken-rgb))';
+const FILTER_TEXT_MUTED = 'var(--filter-liquid-text-muted)';
-const FILTER_SURFACE_SOFT = 'rgb(var(--app-bg-rgb))';
+const FILTER_TEXT_ACTIVE = 'var(--filter-liquid-text-active)';
-const FILTER_BORDER = 'rgb(var(--border-input-rgb))';
+const FILTER_TRACK = 'var(--filter-liquid-track-bg)';
-const FILTER_CHIP_ACTIVE_BG = 'rgb(var(--card-rgb))';
+const FILTER_TRACK_FILL = 'var(--filter-liquid-accent-bg)';
-const FILTER_TEXT_SECONDARY = 'rgb(var(--text-body-soft-rgb))';
-const FILTER_TEXT_MUTED = 'rgb(var(--text-muted-rgb))';
-const FILTER_TEXT_ACTIVE = 'rgb(var(--text-emphasis-rgb))';
-const FILTER_TRACK = 'rgb(var(--card-rgb))';
-const FILTER_TRACK_FILL = 'rgba(var(--border-input-rgb), 0.58)';
 const PREP_TIME_MIN = 5;
 const PREP_TIME_MAX = 120;
 const PREP_TIME_STEP = 5;
 const PREP_TIME_MIN_GAP = PREP_TIME_STEP;
 const FILTER_CONTEXTS = {
     recipes: {
-        anchorShellId: 'recipe-topbar',
+        anchorShellId: 'recipe-bottom-controls',
         buttonId: 'recipe-filter-btn',
         getState: () => getFilterState(),
         applyState: (nextState) => applyFilters(nextState),
@@ -61,6 +64,15 @@ export function getFilterHTML() {
             pointer-events: auto;
         }
 
+        #filter-panel::before {
+            display: none;
+        }
+
+        #filter-panel > * {
+            position: relative;
+            z-index: 1;
+        }
+
         #filter-view .prep-time-range-track,
         #filter-view .prep-time-range-fill {
             border-radius: 9999px;
@@ -71,15 +83,27 @@ export function getFilterHTML() {
             width: 1rem;
             height: 1rem;
             border-radius: 9999px;
-            border: 1px solid rgba(var(--text-emphasis-rgb),0.16);
+            border: 1px solid rgba(255,255,255,0.34);
-            background: ${FILTER_TRACK_FILL};
+            background: rgba(var(--surface-rgb),0.42);
-            box-shadow: 0 0 0 1px rgba(var(--overlay-rgb),0.12);
+            box-shadow:
+                inset 0 1px 0 rgba(255,255,255,0.42),
+                0 0 0 1px rgba(var(--overlay-rgb),0.1),
+                0 4px 10px rgba(var(--overlay-rgb),0.18);
             touch-action: none;
             outline: none;
         }
+
+        .dark #filter-view .prep-time-range-handle {
+            border-color: rgba(255,255,255,0.18);
+            background: rgba(255,255,255,0.26);
+            box-shadow:
+                inset 0 1px 0 rgba(255,255,255,0.24),
+                0 0 0 1px rgba(0,0,0,0.22),
+                0 4px 12px rgba(0,0,0,0.34);
+        }
     </style>
-    <div id="filter-view" class="absolute inset-0 z-[70] hidden opacity-0 transition-opacity duration-150" style="pointer-events:none; background:transparent !important; background-image:none !important;" aria-hidden="true">
+    <div id="filter-view" class="filter-liquid-surface absolute inset-0 z-[70] hidden opacity-0 transition-opacity duration-150" style="pointer-events:none; background:transparent !important; background-image:none !important;" aria-hidden="true">
-        <div id="filter-panel" class="absolute flex flex-col overflow-hidden rounded-[1.35rem]" style="background:${FILTER_SURFACE} !important; background-image:none !important; border:1px solid ${FILTER_BORDER} !important; opacity:0; transform:translateY(-0.5rem) scale(0.98); transform-origin:top center; transition:${FILTER_PANEL_TRANSITION}; box-shadow:var(--shadow-shell); width:min(calc(100% - 1.5rem), 22rem);">
+        <div id="filter-panel" class="filter-liquid-panel absolute flex flex-col overflow-hidden rounded-[1.35rem]" style="opacity:0; transform:translateY(0.65rem) scale(0.98); transform-origin:bottom center; transition:${FILTER_PANEL_TRANSITION}; width:min(calc(100% - 1.5rem), 22rem);">
             <div class="shrink-0 px-3 pt-3 pb-2 flex items-center justify-between gap-3">
                 <p class="text-[11px] font-semibold leading-none" style="color:${FILTER_TEXT_ACTIVE};">Filtry</p>
                 <button id="filter-clear-btn" type="button" class="h-8 px-2 rounded-full text-[11px] font-semibold transition-colors" style="background:transparent; border:none; color:${FILTER_TEXT_MUTED};">Wyczyść</button>
@@ -174,16 +198,6 @@ function formatTimeRangeSummary(minMinutes, maxMinutes) {
     return `${formatTimeValue(minMinutes)} - ${formatTimeValue(maxMinutes)}`;
 }
 
-function getChipStyle(active) {
-    const background = active ? FILTER_CHIP_ACTIVE_BG : FILTER_SURFACE_SOFT;
-    const color = active ? FILTER_TEXT_ACTIVE : FILTER_TEXT_SECONDARY;
-    const borderRule = active ? `border:1px solid ${FILTER_BORDER};` : 'border:none;';
-    const shadow = active
-        ? 'box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), 0 0 0 1px rgba(var(--overlay-rgb),0.08);'
-        : '';
-    return `background:${background}; ${borderRule} color:${color}; ${shadow}`;
-}
-
 function clampTimeValue(value) {
     return Math.min(Math.max(value, PREP_TIME_MIN), PREP_TIME_MAX);
 }
@@ -197,6 +211,12 @@ function getSliderPercent(value) {
     return ((value - PREP_TIME_MIN) / (PREP_TIME_MAX - PREP_TIME_MIN)) * 100;
 }
 
+function getClosedPanelTransform(panel) {
+    return panel?.dataset.placement === 'below'
+        ? 'translateY(-0.5rem) scale(0.98)'
+        : 'translateY(0.65rem) scale(0.98)';
+}
+
 function setActiveTimeHandle(activeHandle) {
     const minHandle = document.getElementById('prep-time-min-handle');
     const maxHandle = document.getElementById('prep-time-max-handle');
@@ -244,19 +264,33 @@ function positionFilterPanel() {
 
     const viewRect = view.getBoundingClientRect();
     const anchorRect = (searchShell || button).getBoundingClientRect();
-    const gap = 8;
+    const isRecipeContext = activeFilterContext === 'recipes';
+    const gap = isRecipeContext ? 12 : 8;
     const margin = 12;
-    const width = Math.min(anchorRect.width, viewRect.width - margin * 2);
+    const maxPanelWidth = isRecipeContext ? 352 : anchorRect.width;
-    const top = Math.max(margin, anchorRect.bottom - viewRect.top + gap);
+    const width = Math.min(maxPanelWidth, viewRect.width - margin * 2);
-    const left = Math.max(
+    const spaceBelow = viewRect.bottom - anchorRect.bottom - margin;
-        margin,
+    const preferredMaxHeight = Math.min(420, viewRect.height - margin * 2);
-        Math.min(anchorRect.left - viewRect.left, viewRect.width - width - margin),
+    const spaceAbove = anchorRect.top - viewRect.top - gap - margin;
-    );
+    const opensUpward = isRecipeContext || (spaceBelow < 260 && anchorRect.top - viewRect.top > spaceBelow);
-    const maxHeight = Math.max(220, viewRect.height - top - margin);
+    const maxHeight = opensUpward
-
+        ? Math.max(220, Math.min(preferredMaxHeight, spaceAbove))
+        : Math.max(220, viewRect.height - Math.max(margin, anchorRect.bottom - viewRect.top + gap) - margin);
+    const leftBase = isRecipeContext
+        ? (viewRect.width - width) / 2
+        : anchorRect.left - viewRect.left;
+    const left = Math.max(margin, Math.min(leftBase, viewRect.width - width - margin));
     panel.style.width = `${width}px`;
     panel.style.left = `${left}px`;
-    panel.style.top = `${top}px`;
+    panel.style.transformOrigin = opensUpward ? 'bottom center' : 'top center';
+    panel.dataset.placement = opensUpward ? 'above' : 'below';
+    if (opensUpward) {
+        panel.style.top = 'auto';
+        panel.style.bottom = `${Math.max(margin, viewRect.bottom - anchorRect.top + gap)}px`;
+    } else {
+        panel.style.top = `${Math.max(margin, anchorRect.bottom - viewRect.top + gap)}px`;
+        panel.style.bottom = 'auto';
+    }
     panel.style.maxHeight = `${maxHeight}px`;
     if (body) body.style.maxHeight = `${maxHeight - 56}px`;
 }
@@ -276,6 +310,7 @@ function showFilterPanel() {
     view.style.pointerEvents = 'auto';
     view.setAttribute('aria-hidden', 'false');
     positionFilterPanel();
+    panel.style.transform = getClosedPanelTransform(panel);
     setRecipeAreaBlur(true);
 
     syncPanelCount();
@@ -296,7 +331,7 @@ function hideFilterPanel() {
     view.style.pointerEvents = 'none';
     view.setAttribute('aria-hidden', 'true');
     panel.style.opacity = '0';
-    panel.style.transform = 'translateY(-0.5rem) scale(0.98)';
+    panel.style.transform = getClosedPanelTransform(panel);
     setRecipeAreaBlur(false);
     syncPanelCount();
 
@@ -315,7 +350,7 @@ function renderSlotChips() {
 
     wrap.innerHTML = MEAL_SLOTS.map((slot) => {
         const active = localSlots.includes(slot.id);
-        return `<button type="button" data-filter-slot="${escapeHtml(slot.id)}" class="px-3 py-2 rounded-full text-[11px] font-semibold transition-colors" style="${getChipStyle(active)}">${escapeHtml(slot.label)}</button>`;
+        return `<button type="button" data-filter-slot="${escapeHtml(slot.id)}" class="px-3 py-2 rounded-full text-[11px] font-semibold transition-colors" style="${filterChipStyle(active)}">${escapeHtml(slot.label)}</button>`;
     }).join('');
 
     wrap.querySelectorAll('[data-filter-slot]').forEach((btn) => {
@@ -337,7 +372,7 @@ function renderTagChips() {
     const allTags = collectAllTags();
     wrap.innerHTML = allTags.map((tag) => {
         const active = localTags.includes(tag.toLowerCase());
-        return `<button type="button" data-filter-tag="${escapeHtml(tag)}" class="px-3 py-2 rounded-full text-[11px] font-semibold transition-colors" style="${getChipStyle(active)}">${escapeHtml(tag)}</button>`;
+        return `<button type="button" data-filter-tag="${escapeHtml(tag)}" class="px-3 py-2 rounded-full text-[11px] font-semibold transition-colors" style="${filterChipStyle(active)}">${escapeHtml(tag)}</button>`;
     }).join('');
 
     wrap.querySelectorAll('[data-filter-tag]').forEach((btn) => {
@@ -373,10 +408,17 @@ function syncPanelCount() {
 
     if (button) {
         const highlight = isFilterPanelOpen() || count > 0;
-        button.style.setProperty('background', highlight ? 'rgb(var(--sunken-rgb))' : 'rgb(var(--card-rgb))', 'important');
+        const isRecipeGlassButton = buttonId === 'recipe-filter-btn';
+        if (isRecipeGlassButton) {
+            button.style.removeProperty('background');
+            button.style.removeProperty('border-color');
+            button.style.removeProperty('color');
+        } else {
+            button.style.setProperty('background', highlight ? 'rgba(var(--overlay-rgb), 0.12)' : 'rgb(var(--card-rgb))', 'important');
             button.style.setProperty('border-color', highlight ? 'rgb(var(--border-input-rgb))' : 'rgb(var(--border-card-rgb))', 'important');
             button.style.setProperty('color', highlight ? 'rgb(var(--text-emphasis-rgb))' : 'rgb(var(--text-body-rgb))', 'important');
         }
+    }
 
     const badge = button?.querySelector('[id$="-filter-count"]');
     if (!badge) return;
@@ -397,6 +439,7 @@ function syncLiveFilters() {
 }
 
 export function setupFilter() {
+    ensureFilterPopoverStyles();
     const rangeTrack = document.getElementById('prep-time-range-fill')?.parentElement;
     const minHandle = document.getElementById('prep-time-min-handle');
     const maxHandle = document.getElementById('prep-time-max-handle');

js/views/Pantry.js

@@ -16,6 +16,7 @@ import {
     syncCalendarPopoverVisibility,
 } from '../ui/calendarPopover.js';
 import { createIngredientCardController, getIngredientCardHTML } from '../ui/ingredientCard.js?v=20260417-116';
+import { ensureFilterPopoverStyles, filterChipStyle } from '../ui/filterPopover.js?v=1';
 
 /* ── helpers ── */
 
@@ -50,16 +51,6 @@ function getActivePantryFilterCount() {
     return pantryFilters.categories.length + pantryFilters.sections.length;
 }
 
-function filterChipStyle(active) {
-    const background = active ? 'rgb(var(--card-rgb))' : 'rgb(var(--app-bg-rgb))';
-    const color = active ? 'rgb(var(--text-emphasis-rgb))' : 'rgb(var(--text-body-soft-rgb))';
-    const borderRule = active ? 'border:1px solid rgb(var(--border-input-rgb));' : 'border:none;';
-    const shadow = active
-        ? 'box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), 0 0 0 1px rgba(var(--overlay-rgb),0.08);'
-        : '';
-    return `background:${background}; ${borderRule} color:${color}; ${shadow}`;
-}
-
 const CATEGORY_ICONS = {
     pieczywo: 'fa-bread-slice',
     nabial: 'fa-cheese',
@@ -101,7 +92,6 @@ const PANTRY_CALENDAR_THEME = {
 
 let ingredientCard = null;
 let horizonEndDate = addDays(startOfDay(new Date()), DEFAULT_HORIZON_DAYS - 1);
-let isSearchExpanded = false;
 let isCalendarOpen = false;
 let isFilterOpen = false;
 let calendarMonthAnchor = startOfMonth(horizonEndDate);
@@ -170,54 +160,23 @@ export function getPantryHTML() {
     return `
     <div id="pantry-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden z-10" style="background:rgb(var(--app-bg-rgb)) !important;">
 
-        <!-- ── floating top bar ── -->
+        <!-- ── floating top bar (calendar only) ── -->
         <div id="pantry-topbar-outer" class="pointer-events-none absolute inset-x-0 top-0 z-[12] px-4 pt-4 pb-4" style="background:rgb(var(--app-bg-rgb)) !important; border:none !important;">
             <div class="pointer-events-auto relative z-[1] w-full">
                 <div id="pantry-topbar" class="relative min-h-12">
-                    <div id="pantry-default-row" class="flex min-h-12 items-center justify-end gap-2 transition-all duration-200" style="opacity:1; transform:translateY(0) scale(1);">
+                    <div id="pantry-default-row" class="flex min-h-12 items-center justify-end gap-2">
                         <div id="pantry-horizon-wrap" class="relative shrink">
                             <button type="button" id="pantry-horizon-compact" class="min-w-0 max-w-[12rem] h-10 rounded-full flex items-center gap-1.5 px-2.5 transition-all" style="background:rgb(var(--card-rgb)) !important; border:1px solid rgb(var(--border-card-rgb)) !important; box-shadow:var(--shadow-shell) !important;">
                                 <span id="pantry-horizon-compact-label" class="min-w-0 flex-1 text-left text-[13px] font-normal truncate" style="color:rgb(var(--text-body-rgb));"></span>
                                 <i id="pantry-horizon-chevron" class="fas fa-chevron-down text-[10px] shrink-0 transition-transform duration-200" style="color:rgb(var(--text-dim-rgb));"></i>
                             </button>
                         </div>
-
-                        <div id="pantry-filter-wrap" class="relative shrink-0">
-                            <button type="button" id="pantry-filter-toggle" class="relative w-11 h-11 rounded-full shrink-0 flex items-center justify-center transition-all duration-200" style="background:rgb(var(--card-rgb)); border:1px solid rgb(var(--border-card-rgb)); box-shadow:var(--shadow-shell); color:rgb(var(--text-body-rgb));">
-                                <i class="fas fa-sliders-h text-[12px]"></i>
-                                <span id="pantry-filter-count" class="hidden absolute -top-1 -right-1 min-w-[1.1rem] h-[1.1rem] px-1 rounded-full text-[9px] font-bold leading-none items-center justify-center" style="background:rgb(var(--sunken-rgb)); border:1px solid rgb(var(--border-input-rgb)); color:rgb(var(--text-emphasis-rgb));"></span>
-                            </button>
-
-                            <div id="pantry-filter-popover" class="absolute right-0 top-full mt-2 w-[19rem] max-w-[calc(100vw-2rem)] rounded-[1.35rem] px-3 py-3 transition-all duration-200 pointer-events-none" style="background:rgb(var(--sunken-rgb)) !important; border:1px solid rgb(var(--border-input-rgb)) !important; box-shadow:var(--shadow-shell) !important; opacity:0; transform:translateY(-6px) scale(0.98);">
-                                <div class="flex items-center justify-between gap-3 px-0.5 pb-3">
-                                    <p class="text-[11px] font-semibold leading-none" style="color:rgb(var(--text-emphasis-rgb));">Filtry</p>
-                                    <button type="button" id="pantry-filter-clear" class="h-8 px-2 rounded-full text-[11px] font-semibold transition-colors" style="background:transparent; border:none; color:rgb(var(--text-muted-rgb));">
-                                        Wyczyść
-                                    </button>
                     </div>
-                                <div id="pantry-filter-panel-body" class="space-y-4"></div>
-                            </div>
-                        </div>
-
-                        <button type="button" id="pantry-search-toggle" class="w-11 h-11 rounded-full shrink-0 flex items-center justify-center transition-all duration-200" style="background:rgb(var(--card-rgb)) !important; border:1px solid rgb(var(--border-card-rgb)) !important; box-shadow:var(--shadow-shell) !important; color:rgb(var(--text-body-rgb));">
-                            <i class="fas fa-search text-[13px]"></i>
-                        </button>
-                    </div>
-
 
                     ${createCalendarPopoverHTML({
         id: 'pantry-calendar-popover',
         calendarHTML: createSwipePopoverCalendarHTML({ idPrefix: 'pantry-cal' }),
     })}
-
-                    <div id="pantry-search-shell" class="absolute inset-0 flex items-center gap-2 rounded-full px-3 transition-all duration-200 pointer-events-none" style="background:rgb(var(--sunken-rgb)) !important; border:1px solid rgb(var(--border-input-rgb)) !important; box-shadow:var(--shadow-shell) !important; opacity:0; transform:translateY(-2px) scale(0.98);">
-                        <i class="fas fa-search text-[13px] shrink-0" style="color:rgb(var(--text-dim-rgb));"></i>
-                        <input type="search" id="pantry-search" autocomplete="off" placeholder="Szukaj w spiżarni…"
-                            class="flex-1 min-w-0 h-full bg-transparent outline-none text-[15px] leading-none py-0" style="background:transparent !important; border:none !important; box-shadow:none !important; color:rgb(var(--text-body-rgb)); margin:0;">
-                        <button type="button" id="pantry-search-close" class="w-8 h-8 rounded-full shrink-0 flex items-center justify-center transition-colors" style="background:rgb(var(--card-soft-rgb)); border:none; color:rgb(var(--text-dim-rgb));">
-                            <i class="fas fa-xmark text-[13px]"></i>
-                        </button>
-                    </div>
                 </div>
             </div>
         </div>
@@ -226,6 +185,35 @@ export function getPantryHTML() {
         <div id="pantry-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pt-[5.35rem] pb-24" style="background:rgb(var(--app-bg-rgb)) !important;">
             <div id="pantry-board"></div>
         </div>
+
+        <!-- ── floating bottom controls (search + filter) ── -->
+        <div id="pantry-filter-popover" class="filter-liquid-surface filter-liquid-panel absolute z-[25] pointer-events-none rounded-[1.35rem] px-3 pt-3 pb-3 transition-all duration-200" style="left:50%; width:min(calc(100% - 1.5rem), 22rem); transform:translateX(-50%) translateY(0.5rem) scale(0.98); transform-origin:bottom center; bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem) + var(--recipe-control-size, 3.05rem) + 0.75rem); opacity:0;">
+            <div class="flex items-center justify-between gap-3 px-0.5 pb-2">
+                <p class="text-[11px] font-semibold leading-none" style="color:rgb(var(--text-emphasis-rgb));">Filtry</p>
+                <button type="button" id="pantry-filter-clear" class="h-8 px-2 rounded-full text-[11px] font-semibold transition-colors" style="background:transparent; border:none; color:rgb(var(--text-muted-rgb));">
+                    Wyczyść
+                </button>
+            </div>
+            <div id="pantry-filter-panel-body" class="space-y-4"></div>
+        </div>
+
+        <div id="pantry-bottom-controls" class="pointer-events-none absolute inset-x-0 z-[24] h-[3.05rem]" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)); height:var(--recipe-control-size, 3.05rem); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
+            <div id="pantry-search-shell" class="recipe-glass-btn recipe-search-field pointer-events-auto absolute bottom-0 flex items-center gap-2 px-3">
+                <i class="fas fa-search shrink-0" aria-hidden="true"></i>
+                <input type="search" id="pantry-search-input" autocomplete="off" placeholder="Szukaj w spiżarni…"
+                    class="flex-1 min-w-0 h-full bg-transparent outline-none text-[15px] leading-none py-0" style="appearance:none; -webkit-appearance:none; background:transparent !important; background-color:transparent !important; background-image:none !important; border:none !important; border-radius:0 !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; color:rgb(var(--text-body-rgb)); margin:0; padding:0 !important;">
+                <button type="button" id="pantry-search-close" class="w-8 h-8 rounded-full shrink-0 flex items-center justify-center transition-colors" style="appearance:none; -webkit-appearance:none; background:transparent !important; background-color:transparent !important; background-image:none !important; border:none !important; color:rgb(var(--text-dim-rgb)); box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
+                    <i class="fas fa-xmark text-[13px]"></i>
+                </button>
+            </div>
+
+            <div id="pantry-filter-bottom-wrap" class="pointer-events-auto absolute bottom-0 right-4">
+                <button type="button" id="pantry-filter-bottom-btn" class="recipe-glass-btn recipe-bottom-action relative flex items-center justify-center transition-all duration-200" aria-label="Otwórz filtry">
+                    <i class="fas fa-sliders-h" aria-hidden="true"></i>
+                    <span id="pantry-filter-count" class="hidden absolute -top-1 -right-1 min-w-[1.1rem] h-[1.1rem] px-1 rounded-full text-[9px] font-bold leading-none items-center justify-center" style="background:rgba(var(--text-emphasis-rgb),0.86); background-image:none !important; border:1px solid rgba(255,255,255,0.42); color:rgb(var(--app-bg-rgb)); box-shadow:0 2px 6px rgba(var(--overlay-rgb),0.22);"></span>
+                </button>
+            </div>
+        </div>
     </div>
     ${getIngredientCardHTML({ idBase: 'pv2-card' })}`;
 }
@@ -235,11 +223,8 @@ export function getPantryHTML() {
 function syncHorizonUI() {
     ensureValidHorizonDate();
 
-    const defaultRow = document.getElementById('pantry-default-row');
-    const searchShell = document.getElementById('pantry-search-shell');
     const popover = document.getElementById('pantry-calendar-popover');
     const filterPopover = document.getElementById('pantry-filter-popover');
-    const filterToggle = document.getElementById('pantry-filter-toggle');
     const filterCount = document.getElementById('pantry-filter-count');
     const compactLabel = document.getElementById('pantry-horizon-compact-label');
     const compactPill = document.getElementById('pantry-horizon-compact');
@@ -247,35 +232,22 @@ function syncHorizonUI() {
 
     if (compactLabel) compactLabel.textContent = formatHorizonLabel(horizonEndDate);
 
-    const showCalendar = isCalendarOpen && !isSearchExpanded;
-    const showDefault = !isSearchExpanded;
-    const showFilter = isFilterOpen && showDefault;
     const activeFilterCount = getActivePantryFilterCount();
 
-    if (defaultRow) {
-        defaultRow.style.opacity = showDefault ? '1' : '0';
-        defaultRow.style.transform = showDefault ? 'translateY(0) scale(1)' : 'translateY(-2px) scale(0.98)';
-        defaultRow.style.pointerEvents = showDefault ? 'auto' : 'none';
-    }
-
     syncCalendarPopoverVisibility({
         popup: popover,
-        isOpen: showCalendar,
+        isOpen: isCalendarOpen,
         chevron,
         trigger: compactPill,
         triggerImportant: true,
     });
 
     if (filterPopover) {
-        filterPopover.style.opacity = showFilter ? '1' : '0';
+        filterPopover.style.opacity = isFilterOpen ? '1' : '0';
-        filterPopover.style.transform = showFilter ? 'translateY(0) scale(1)' : 'translateY(-6px) scale(0.98)';
+        filterPopover.style.transform = isFilterOpen
-        filterPopover.style.pointerEvents = showFilter ? 'auto' : 'none';
+            ? 'translateX(-50%) translateY(0) scale(1)'
-    }
+            : 'translateX(-50%) translateY(0.5rem) scale(0.98)';
-    if (filterToggle) {
+        filterPopover.style.pointerEvents = isFilterOpen ? 'auto' : 'none';
-        const isActive = showFilter || hasActivePantryFilters();
-        filterToggle.style.setProperty('background', isActive ? 'rgb(var(--sunken-rgb))' : 'rgb(var(--card-rgb))', 'important');
-        filterToggle.style.setProperty('border-color', isActive ? 'rgb(var(--border-input-rgb))' : 'rgb(var(--border-card-rgb))', 'important');
-        filterToggle.style.setProperty('color', isActive ? 'rgb(var(--text-emphasis-rgb))' : 'rgb(var(--text-body-rgb))', 'important');
     }
     if (filterCount) {
         filterCount.textContent = String(activeFilterCount);
@@ -283,12 +255,6 @@ function syncHorizonUI() {
         filterCount.classList.toggle('flex', activeFilterCount > 0);
     }
 
-    if (searchShell) {
-        searchShell.style.opacity = isSearchExpanded ? '1' : '0';
-        searchShell.style.transform = isSearchExpanded ? 'translateY(0) scale(1)' : 'translateY(-2px) scale(0.98)';
-        searchShell.style.pointerEvents = isSearchExpanded ? 'auto' : 'none';
-    }
-
     renderCalendarPopover();
     renderFilterPopover();
 }
@@ -377,28 +343,16 @@ function renderFilterPopover() {
     `;
 }
 
-function closeSearch() {
+function clearSearchInput() {
-    const input = document.getElementById('pantry-search');
+    const input = document.getElementById('pantry-search-input');
     const hadQuery = Boolean(input?.value);
     if (input) {
         input.value = '';
         input.blur();
     }
-    isSearchExpanded = false;
-    syncHorizonUI();
     if (hadQuery) renderBoard();
 }
 
-function openSearch() {
-    isSearchExpanded = true;
-    isCalendarOpen = false;
-    isFilterOpen = false;
-    syncHorizonUI();
-    window.requestAnimationFrame(() => {
-        document.getElementById('pantry-search')?.focus();
-    });
-}
-
 function closeCalendar() {
     if (!isCalendarOpen) return;
     isCalendarOpen = false;
@@ -409,7 +363,6 @@ function closeCalendar() {
 function openCalendar() {
     ensureValidHorizonDate();
     calendarMonthAnchor = startOfMonth(horizonEndDate);
-    isSearchExpanded = false;
     isFilterOpen = false;
     isCalendarOpen = true;
     syncHorizonUI();
@@ -427,8 +380,8 @@ function closeFilter() {
 
 function toggleFilterPanel() {
     isCalendarOpen = false;
-    isSearchExpanded = false;
     isFilterOpen = !isFilterOpen;
+    document.getElementById('pantry-search-input')?.blur();
     syncHorizonUI();
 }
 
@@ -592,7 +545,7 @@ function renderBoard() {
     const root = document.getElementById('pantry-board');
     if (!root) return;
 
-    const q = document.getElementById('pantry-search')?.value || '';
+    const q = document.getElementById('pantry-search-input')?.value || '';
     const hasFilters = hasActivePantryFilters();
     const { shortfalls, sufficient, notPlanned } = classifyIngredients(q);
 
@@ -671,6 +624,8 @@ export function refreshPantry() {
 }
 
 export function setupPantry() {
+    ensureFilterPopoverStyles();
+
     if (!ingredientCard) {
         ingredientCard = createIngredientCardController({ idBase: 'pv2-card', defaultSourceNote: 'Ze spiżarni' });
         ingredientCard.bind();
@@ -692,13 +647,17 @@ export function setupPantry() {
     }
 
     // Search
-    document.getElementById('pantry-search')?.addEventListener('input', () => renderBoard());
+    document.getElementById('pantry-search-input')?.addEventListener('input', () => renderBoard());
-    document.getElementById('pantry-search')?.addEventListener('keydown', (event) => {
+    document.getElementById('pantry-search-input')?.addEventListener('keydown', (event) => {
-        if (event.key === 'Escape') closeSearch();
+        if (event.key !== 'Escape') return;
+        if (event.target.value) clearSearchInput();
+        else event.target.blur();
+    });
+    document.getElementById('pantry-search-close')?.addEventListener('click', () => clearSearchInput());
+    document.getElementById('pantry-filter-bottom-btn')?.addEventListener('click', (event) => {
+        event.stopPropagation();
+        toggleFilterPanel();
     });
-    document.getElementById('pantry-search-toggle')?.addEventListener('click', () => openSearch());
-    document.getElementById('pantry-search-close')?.addEventListener('click', () => closeSearch());
-    document.getElementById('pantry-filter-toggle')?.addEventListener('click', () => toggleFilterPanel());
     document.getElementById('pantry-filter-clear')?.addEventListener('click', (event) => {
         event.stopPropagation();
         pantryFilters = { categories: [], sections: [] };
@@ -750,10 +709,25 @@ export function setupPantry() {
             if (isCalendarOpen && !target.closest('#pantry-horizon-wrap, #pantry-horizon-compact')) {
                 closeCalendar();
             }
-            if (isFilterOpen && !target.closest('#pantry-filter-wrap')) {
+            if (isFilterOpen && !target.closest('#pantry-filter-popover, #pantry-filter-bottom-btn')) {
                 closeFilter();
             }
         });
+        document.addEventListener('keydown', (event) => {
+            if (event.key !== 'Escape') return;
+            if (isFilterOpen) closeFilter();
+        });
+        window.addEventListener('app-tab-change', () => {
+            document.getElementById('pantry-search-input')?.blur();
+            closeFilter();
+            closeCalendar();
+        });
+        window.closePantrySearch = () => {
+            document.getElementById('pantry-search-input')?.blur();
+        };
+        window.closePantryFilter = () => {
+            closeFilter();
+        };
     }
 
     window.refreshPantry = refreshPantry;

js/views/RecipeList.js

@@ -12,7 +12,6 @@ let filterState = {
     maxMinutes: DEFAULT_MAX_MINUTES,
 };
 
-let isSearchExpanded = false;
 let recipeListDocListenersBound = false;
 
 function matchesFilters(recipe) {
@@ -51,21 +50,8 @@ function syncRecipeScrollShadow() {
 }
 
 function syncRecipeTopbarUI() {
-    const defaultRow = document.getElementById('recipe-default-row');
     const searchShell = document.getElementById('recipe-search-shell');
-
-    const showSearch = isSearchExpanded;
-
-    if (defaultRow) {
-        defaultRow.style.opacity = showSearch ? '0' : '1';
-        defaultRow.style.transform = showSearch ? 'translateY(-2px) scale(0.98)' : 'translateY(0) scale(1)';
-        defaultRow.style.pointerEvents = showSearch ? 'none' : 'auto';
-    }
-
     if (searchShell) {
-        searchShell.style.opacity = showSearch ? '1' : '0';
-        searchShell.style.transform = showSearch ? 'translateY(0) scale(1)' : 'translateY(-2px) scale(0.98)';
-        searchShell.style.pointerEvents = showSearch ? 'auto' : 'none';
         searchShell.style.boxShadow = 'var(--shadow-shell)';
     }
 }
@@ -78,20 +64,10 @@ function closeSearch() {
         input.blur();
     }
     filterState.query = '';
-    isSearchExpanded = false;
     syncRecipeTopbarUI();
     if (hadQuery) renderGrid();
 }
 
-function openSearch() {
-    isSearchExpanded = true;
-    window.closeFilters?.();
-    syncRecipeTopbarUI();
-    window.requestAnimationFrame(() => {
-        document.getElementById('recipe-search-input')?.focus();
-    });
-}
-
 function renderGrid() {
     const grid = document.getElementById('recipe-grid');
     const emptyState = document.getElementById('recipe-empty-state');
@@ -102,7 +78,7 @@ function renderGrid() {
         emptyStateEl: emptyState,
         recipes: getFilteredRecipes(),
         showSlotLabels: false,
-        cardClassName: 'recipe-list-card',
+        cardClassName: 'recipe-list-card recipe-catalog-card',
     });
     syncRecipeTopbarUI();
     requestAnimationFrame(syncRecipeScrollShadow);
@@ -111,44 +87,32 @@ function renderGrid() {
 export function getRecipeListHTML() {
     return `
     <div id="main-view" class="flex flex-col h-full absolute inset-0 bg-[rgb(var(--app-bg-rgb))] z-10" style="background:rgb(var(--app-bg-rgb)) !important;">
-        <div id="recipe-top-bar" class="pointer-events-none absolute inset-x-0 top-0 z-[12] px-4 pt-4 pb-4" style="background:rgb(var(--app-bg-rgb)) !important; border:none !important;">
-            <div class="pointer-events-auto relative z-[1] w-full">
-                <div id="recipe-topbar" class="relative min-h-12">
-
-                    <div id="recipe-default-row" class="flex min-h-12 items-center justify-end gap-2 transition-all duration-200" style="opacity:1; transform:translateY(0) scale(1);">
-                        <div id="recipe-filter-wrap" class="relative shrink-0">
-                            <button type="button" id="recipe-filter-btn" class="relative w-11 h-11 rounded-full shrink-0 flex items-center justify-center transition-all duration-200" style="background:rgb(var(--card-rgb)); border:1px solid rgb(var(--border-card-rgb)); box-shadow:var(--shadow-shell); color:rgb(var(--text-body-rgb));" aria-label="Otwórz filtry">
-                                <i class="fas fa-sliders-h text-[12px]" aria-hidden="true"></i>
-                                <span id="recipe-filter-count" class="hidden absolute -top-1 -right-1 min-w-[1.1rem] h-[1.1rem] px-1 rounded-full text-[9px] font-bold leading-none items-center justify-center" style="background:rgb(var(--sunken-rgb)); border:1px solid rgb(var(--border-input-rgb)); color:rgb(var(--text-emphasis-rgb));"></span>
-                            </button>
-                        </div>
-
-                        <button type="button" id="recipe-search-toggle" class="w-11 h-11 rounded-full shrink-0 flex items-center justify-center transition-all duration-200" style="background:rgb(var(--card-rgb)) !important; border:1px solid rgb(var(--border-card-rgb)) !important; box-shadow:var(--shadow-shell) !important; color:rgb(var(--text-body-rgb));" aria-label="Szukaj">
-                            <i class="fas fa-search text-[13px]" aria-hidden="true"></i>
-                        </button>
-                    </div>
-
-                    <div id="recipe-search-shell" class="absolute inset-0 flex items-center gap-2 rounded-full px-3 transition-all duration-200 pointer-events-none" style="background:rgb(var(--sunken-rgb)) !important; border:1px solid rgb(var(--border-input-rgb)) !important; box-shadow:var(--shadow-shell) !important; opacity:0; transform:translateY(-2px) scale(0.98);">
-                        <i class="fas fa-search text-[13px] shrink-0" style="color:rgb(var(--text-dim-rgb));"></i>
-                        <input type="search" id="recipe-search-input" autocomplete="off" placeholder="Szukaj przepisów…"
-                            class="flex-1 min-w-0 h-full bg-transparent outline-none text-[15px] leading-none py-0" style="background:transparent !important; border:none !important; box-shadow:none !important; color:rgb(var(--text-body-rgb)); margin:0;">
-                        <button type="button" id="recipe-search-close" class="w-8 h-8 rounded-full shrink-0 flex items-center justify-center transition-colors" style="background:rgb(var(--card-soft-rgb)); border:none; color:rgb(var(--text-dim-rgb));">
-                            <i class="fas fa-xmark text-[13px]"></i>
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-
         ${getRecipeGridSectionHTML({
         scrollId: 'recipe-scroll',
         gridId: 'recipe-grid',
         emptyStateId: 'recipe-empty-state',
-        scrollClassName: 'relative flex-1 overflow-y-auto px-4 pt-[5.35rem] pb-24 bg-[rgb(var(--app-bg-rgb))]',
+        scrollClassName: 'relative flex-1 overflow-y-auto px-4 pt-4 pb-24 bg-[rgb(var(--app-bg-rgb))]',
         gridClassName: 'grid grid-cols-3 gap-2 bg-[rgb(var(--app-bg-rgb))]',
         emptyTitle: 'Brak wyników',
         emptyMessage: 'Zmień kryteria wyszukiwania lub filtry',
     })}
+        <div id="recipe-bottom-controls" class="pointer-events-none absolute inset-x-0 z-[24] h-[3.05rem]" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)); height:var(--recipe-control-size, 3.05rem); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
+            <div id="recipe-search-shell" class="recipe-glass-btn recipe-search-field pointer-events-auto absolute bottom-0 flex items-center gap-2 px-3">
+                <i class="fas fa-search shrink-0" aria-hidden="true"></i>
+                <input type="search" id="recipe-search-input" autocomplete="off" placeholder="Szukaj przepisów…"
+                    class="flex-1 min-w-0 h-full bg-transparent outline-none text-[15px] leading-none py-0" style="appearance:none; -webkit-appearance:none; background:transparent !important; background-color:transparent !important; background-image:none !important; border:none !important; border-radius:0 !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; color:rgb(var(--text-body-rgb)); margin:0; padding:0 !important;">
+                <button type="button" id="recipe-search-close" class="w-8 h-8 rounded-full shrink-0 flex items-center justify-center transition-colors" style="appearance:none; -webkit-appearance:none; background:transparent !important; background-color:transparent !important; background-image:none !important; border:none !important; color:rgb(var(--text-dim-rgb)); box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
+                    <i class="fas fa-xmark text-[13px]"></i>
+                </button>
+            </div>
+
+            <div id="recipe-filter-wrap" class="pointer-events-auto absolute bottom-0 right-4">
+                <button type="button" id="recipe-filter-btn" class="recipe-glass-btn recipe-bottom-action relative flex items-center justify-center transition-all duration-200" aria-label="Otwórz filtry">
+                    <i class="fas fa-sliders-h" aria-hidden="true"></i>
+                    <span id="recipe-filter-count" class="hidden absolute -top-1 -right-1 min-w-[1.1rem] h-[1.1rem] px-1 rounded-full text-[9px] font-bold leading-none items-center justify-center" style="background:rgba(var(--text-emphasis-rgb),0.86); background-image:none !important; border:1px solid rgba(255,255,255,0.42); color:rgb(var(--app-bg-rgb)); box-shadow:0 2px 6px rgba(var(--overlay-rgb),0.22);"></span>
+                </button>
+            </div>
+        </div>
     </div>
     `;
 }
@@ -178,18 +142,15 @@ export function setupRecipeList() {
         renderGrid();
     });
     document.getElementById('recipe-search-input')?.addEventListener('keydown', (e) => {
-        if (e.key === 'Escape') closeSearch();
+        if (e.key !== 'Escape') return;
+        if (e.target.value) closeSearch();
+        else e.target.blur();
     });
 
-    document.getElementById('recipe-search-toggle')?.addEventListener('click', () => openSearch());
     document.getElementById('recipe-search-close')?.addEventListener('click', () => closeSearch());
-
     document.getElementById('recipe-filter-btn')?.addEventListener('click', (e) => {
         e.stopPropagation();
-        if (isSearchExpanded) {
+        document.getElementById('recipe-search-input')?.blur();
-            isSearchExpanded = false;
-            syncRecipeTopbarUI();
-        }
         window.openFilters?.('recipes');
     });
 
@@ -200,24 +161,22 @@ export function setupRecipeList() {
         if (recipeId) window.openRecipeDetail?.(recipeId);
     });
 
-    const recipeScroll = document.getElementById('recipe-scroll');
-    const recipeTopBar = document.getElementById('recipe-top-bar');
-    if (recipeScroll && recipeTopBar) {
-        const shadow = document.createElement('div');
-        shadow.style.cssText = 'position:absolute;left:0;right:0;bottom:-8px;height:8px;background:linear-gradient(to bottom,rgba(var(--overlay-rgb),0.25),transparent);opacity:0;transition:opacity 0.2s;pointer-events:none;';
-        recipeTopBar.appendChild(shadow);
-        recipeScroll.addEventListener('scroll', () => {
-            shadow.style.opacity = recipeScroll.scrollTop > 2 ? '1' : '0';
-        });
-    }
-
     if (!recipeListDocListenersBound) {
         recipeListDocListenersBound = true;
         document.addEventListener('keydown', (e) => {
-            if (e.key !== 'Escape' || !isSearchExpanded) return;
+            const isRecipeViewVisible = !document.getElementById('main-view')?.classList.contains('hidden');
-            if (!document.getElementById('main-view')?.classList.contains('hidden')) {
+            if (e.key !== 'Escape') return;
-                closeSearch();
+            if (isRecipeViewVisible) {
+                document.getElementById('recipe-search-input')?.blur();
             }
         });
+
+        window.addEventListener('app-tab-change', () => {
+            document.getElementById('recipe-search-input')?.blur();
+        });
+
+        window.closeRecipeSearch = () => {
+            document.getElementById('recipe-search-input')?.blur();
+        };
     }
 }