From 9b8d4bb11280a8b1704728316f4a79c6f26a8b40 Mon Sep 17 00:00:00 2001
From: SlimusMinus <moscow_city231@rambler.ru>
Date: Wed, 19 Aug 2026 23:54:00 +0300
Subject: [PATCH] fixed navigation bottom bar

---
 src/styles/layout.css | 98 +++++++++++++++++++++++++++++++------------
 1 file changed, 72 insertions(+), 26 deletions(-)

diff --git a/src/styles/layout.css b/src/styles/layout.css
index 12b2de9..cd397db 100644
--- a/src/styles/layout.css
+++ b/src/styles/layout.css
@@ -163,6 +163,12 @@
   box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
 }
 
+:root:not([data-theme="dark"]) .f-topbar-dropdown-menu {
+  background: rgba(255, 255, 255, .92);
+  border-color: rgba(0, 0, 0, .08);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, .12);
+}
+
 .f-topbar-dropdown-item {
   display: flex; align-items: center; justify-content: center;
   padding: 8px 16px;
@@ -183,6 +189,19 @@
   color: var(--teal);
 }
 
+:root:not([data-theme="dark"]) .f-topbar-dropdown-item {
+  background: rgba(0, 0, 0, .06);
+  color: rgba(0, 0, 0, .75);
+}
+:root:not([data-theme="dark"]) .f-topbar-dropdown-item:hover {
+  background: rgba(0, 0, 0, .1);
+  color: #000;
+}
+:root:not([data-theme="dark"]) .f-topbar-dropdown-item.active {
+  background: rgba(var(--teal-rgb), .15);
+  color: var(--teal);
+}
+
 /* ── City Multiselect ── */
 .f-city-filter-wrap {
   position: relative; z-index: 20;
@@ -304,36 +323,58 @@
   padding: 10px; text-align: center; color: var(--muted); font-size: 0.85rem;
 }
 
-/* ── Bottom Navigation (Instagram-style) ── */
+/* ── Bottom Navigation (Telegram-style floating pill) ── */
 .f-bottom-nav {
-  position: fixed; left: 0; right: 0; bottom: 0;
-  display: flex; align-items: center; justify-content: space-around;
-  padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
-  background: var(--bg-surface-solid);
-  border-top: 1px solid var(--border);
+  position: fixed; bottom: 12px;
+  left: 50%; transform: translateX(-50%);
+  display: flex; align-items: center; justify-content: space-evenly; gap: 32px;
+  padding: 6px 28px;
+  width: calc(100% - 24px);
+  max-width: 500px;
+  background: rgba(20, 20, 20, .55);
+  backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6);
+  border: 1px solid rgba(255, 255, 255, .12);
+  border-radius: 20px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, .3), inset 0 0.5px 0 rgba(255,255,255,.08);
   z-index: 35;
 }
+
+:root:not([data-theme="dark"]) .f-bottom-nav {
+  background: rgba(255, 255, 255, .6);
+  border-color: rgba(0, 0, 0, .08);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, .08), inset 0 0.5px 0 rgba(255,255,255,.7);
+}
+
 .f-bn-item {
   position: relative;
   display: flex; align-items: center; justify-content: center;
-  width: 44px; height: 44px;
+  width: 44px; height: 40px;
   border: none; background: none; cursor: pointer;
-  color: var(--text-primary);
-  transition: color .15s, transform .1s;
+  color: rgba(255, 255, 255, .6);
+  border-radius: 14px;
+  transition: color .15s, background .15s, transform .1s;
 }
-.f-bn-item:active { transform: scale(.92); }
-.f-bn-item svg { width: 26px; height: 26px; }
-.f-bn-item.active { color: var(--teal); }
-.f-bn-item.active::before {
-  content: ""; position: absolute; inset: 3px;
-  border-radius: 50%;
+.f-bn-item:active { transform: scale(.9); }
+.f-bn-item svg { width: 24px; height: 24px; }
+.f-bn-item:hover { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .9); }
+.f-bn-item.active { color: var(--teal); background: rgba(var(--teal-rgb), .15); }
+
+:root:not([data-theme="dark"]) .f-bn-item {
+  color: rgba(0, 0, 0, .45);
+}
+:root:not([data-theme="dark"]) .f-bn-item:hover {
+  background: rgba(0, 0, 0, .06);
+  color: rgba(0, 0, 0, .75);
+}
+:root:not([data-theme="dark"]) .f-bn-item.active {
+  color: var(--teal);
   background: rgba(var(--teal-rgb), .12);
 }
 
-/* Create button — бирюзовая рамка как у старой кнопки «Разместить» */
+/* Create button */
 .f-bn-create {
-  width: 44px; height: 44px;
-  border-radius: 999px;
+  width: 56px; height: 40px;
+  border-radius: 14px;
   background: var(--teal);
   color: #fff;
   box-shadow: 0 2px 10px rgba(var(--teal-rgb), .35);
@@ -344,20 +385,25 @@
 /* Profile avatar inside the nav */
 .f-bn-profile .f-profile-avatar,
 .f-bn-profile .f-profile-avatar-placeholder {
-  width: 28px; height: 28px;
+  width: 26px; height: 26px;
 }
-.f-bn-profile .f-profile-avatar-placeholder { font-size: 1rem; }
+.f-bn-profile .f-profile-avatar-placeholder { font-size: .95rem; }
 .f-bn-item.f-bn-profile.active::before {
-  inset: -1px;
-  box-shadow: 0 0 0 2px var(--teal);
+  display: none;
+}
+.f-bn-item.f-bn-profile.active {
+  background: none;
 }
 
 /* Indicator: активные фильтры поиска */
 .f-bn-dot {
-  position: absolute; top: 6px; right: 4px;
-  width: 8px; height: 8px; border-radius: 50%;
+  position: absolute; top: 6px; right: 5px;
+  width: 7px; height: 7px; border-radius: 50%;
   background: #ff3040;
-  box-shadow: 0 0 0 2px var(--bg-surface-solid);
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, .4);
+}
+:root:not([data-theme="dark"]) .f-bn-dot {
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, .8);
 }
 
 /* Search panel — видна только во вкладке «Поиск» (на десктопе всегда) */
@@ -432,7 +478,7 @@
 
   /* Нижняя панель fixed — освобождаем место в конце ленты */
   .f-feed {
-    padding-bottom: calc(130px + env(safe-area-inset-bottom));
+    padding-bottom: calc(150px + env(safe-area-inset-bottom));
   }
 }