Update public/css/sidebar.css

public/css/sidebar.css

@@ -142,6 +142,7 @@
   flex-shrink: 0;
   padding: 8px;
   border-top: 1px solid var(--sidebar-border);
+  overflow: hidden;
 }
 
 .account-section {
@@ -152,6 +153,9 @@
 
 .sidebar.collapsed .account-section {
   flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
 }
 
 .sidebar.expanded .account-section {
@@ -166,17 +170,36 @@
   color: #111;
   font-size: 13px;
   font-weight: 600;
-  transition: opacity var(--transition);
   white-space: nowrap;
   overflow: hidden;
   opacity: 0;
   pointer-events: none;
   transition: opacity var(--transition);
+  display: none;
 }
 
 .sidebar.expanded .btn-signin {
   opacity: 1;
   pointer-events: auto;
+  display: block;
+}
+
+/* Collapsed sign-in icon */
+.btn-signin-icon {
+  display: none;
+  width: 34px; height: 34px;
+  border-radius: 50%;
+  background: var(--yellow);
+  color: #111;
+  align-items: center; justify-content: center;
+  flex-shrink: 0;
+  transition: opacity var(--transition);
+}
+.sidebar.collapsed .btn-signin-icon {
+  display: flex;
+}
+.sidebar.expanded .btn-signin-icon {
+  display: none;
 }
 
 .user-profile-btn {
@@ -187,6 +210,14 @@
 }
 .user-profile-btn:hover { background: var(--bg-hover); }
 
+.sidebar.collapsed .user-profile-btn {
+  flex: none;
+  width: 36px; height: 36px;
+  justify-content: center;
+  padding: 0;
+  border-radius: 50%;
+}
+
 .user-avatar {
   width: 30px; height: 30px; border-radius: 50%;
   background: var(--blue);
@@ -243,4 +274,4 @@
 .context-item.danger { color: #f07070; }
 .context-item.warning { color: var(--yellow); }
 .context-item svg { flex-shrink: 0; color: var(--text-dim); }
-.context-item.danger svg { color: #f07070; }
+.context-item.danger svg { color: #f07070; }