v0.3.0

frontend/src/components/Sidebar.css

@@ -1,12 +1,14 @@
 .sidebar {
   width: 320px;
   min-width: 320px;
-  height: 100vh;
+  height: 100%;
+  min-height: 0;
   background: white;
   border-right: 1px solid var(--border);
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  position: relative;
 }
 
 @media (max-width: 767px) {
@@ -17,8 +19,9 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 16px 16px 12px;
+  padding: 14px 16px 12px;
   border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
 }
 
 .sidebar-title {
@@ -28,42 +31,68 @@
   flex: 1;
 }
 
+.sidebar-logo {
+  width: 40px;
+  height: 40px;
+  border-radius: 4px;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+
 .offline-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: #e53935;
+  flex-shrink: 0;
 }
 
-.sidebar-search {
-  padding: 12px 12px 8px;
+/* New Chat bar (desktop) */
+.sidebar-newchat-bar {
+  padding: 10px 12px 6px;
+  flex-shrink: 0;
 }
 
-.search-wrap {
-  position: relative;
+.newchat-btn {
   display: flex;
   align-items: center;
-}
-
-.search-icon {
-  position: absolute;
-  left: 12px;
-  color: var(--text-tertiary);
-  pointer-events: none;
-}
-
-.search-input {
+  gap: 8px;
   width: 100%;
-  padding: 8px 12px 8px 36px;
-  border: none;
+  padding: 9px 16px;
   border-radius: 20px;
-  background: var(--background);
+  background: var(--primary-light);
+  color: var(--primary);
   font-size: 14px;
-  color: var(--text-primary);
-  font-family: var(--font);
+  font-weight: 600;
+  border: 1.5px solid var(--primary);
+  cursor: pointer;
+  transition: background var(--transition), color var(--transition);
 }
-.search-input:focus { outline: none; }
-.search-input::placeholder { color: var(--text-tertiary); }
+.newchat-btn:hover { background: var(--primary); color: white; }
+.newchat-btn:hover svg { stroke: white; }
+
+/* Mobile FAB */
+.newchat-fab {
+  position: absolute;
+  bottom: 80px;
+  right: 16px;
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  background: var(--primary);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
+  z-index: 10;
+  cursor: pointer;
+  transition: background var(--transition), transform 80ms ease;
+  border: none;
+  pointer-events: auto;
+}
+.newchat-fab:hover { transform: scale(1.05); }
+.newchat-fab:active { transform: scale(0.97); }
 
 .groups-list {
   flex: 1;
@@ -88,7 +117,6 @@
   padding: 10px 16px;
   cursor: pointer;
   transition: background var(--transition);
-  border-radius: 0;
 }
 .group-item:hover { background: var(--background); }
 .group-item.active { background: var(--primary-light); }
@@ -131,11 +159,12 @@
   color: var(--text-secondary);
 }
 
-/* Footer */
 .sidebar-footer {
   border-top: 1px solid var(--border);
-  padding: 8px;
+  padding: 12px 8px;
+  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
   position: relative;
+  flex-shrink: 0;
 }
 
 .user-footer-btn {
@@ -179,24 +208,8 @@
 .footer-menu-item.danger { color: var(--error); }
 .footer-menu-item.danger:hover { background: #fce8e6; }
 
-/* App logo in sidebar header */
-.sidebar-logo {
-  width: 56px;
-  height: 56px;
-  border-radius: 4px;
-  object-fit: cover;
-  flex-shrink: 0;
-}
-
-
-/* Unread message indicator */
-.group-item.has-unread {
-  background: var(--primary-light);
-}
-.unread-name {
-  font-weight: 700;
-  color: var(--text-primary) !important;
-}
+.group-item.has-unread { background: var(--primary-light); }
+.unread-name { font-weight: 700; color: var(--text-primary) !important; }
 .badge-unread {
   background: var(--text-secondary);
   color: white;