fix styles

public/style.css

@@ -65,11 +65,38 @@ body {
   position: relative; z-index: 10;
 }
 #server-name {
-  padding: 14px 16px; font-weight: 700; font-size: 15px;
+  padding: 14px 10px 14px 16px; font-weight: 700; font-size: 15px;
   border-bottom: 1px solid rgba(0,0,0,.25); box-shadow: 0 1px 0 rgba(0,0,0,.06);
   display: flex; align-items: center; gap: 8px;
 }
 #server-logo, #mobile-logo { border-radius: 6px; flex-shrink: 0; }
+.server-name-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.icon-btn {
+  background: transparent; border: none; color: var(--text-2); cursor: pointer;
+  width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center;
+  flex-shrink: 0; padding: 0; transition: background .12s, color .12s;
+}
+.icon-btn .material-symbols-outlined { font-size: 18px; }
+.icon-btn:hover { background: var(--bg-3); color: var(--text-0); }
+
+/* sidebar drag-to-resize handle */
+#sidebar-resizer {
+  position: absolute; top: 0; right: -3px; width: 6px; height: 100%;
+  cursor: col-resize; z-index: 15; background: transparent;
+}
+#sidebar-resizer:hover, #sidebar-resizer.dragging { background: var(--brand); opacity: .5; }
+body.sidebar-collapsed #sidebar { display: none; }
+
+/* floating button to bring the sidebar back once collapsed */
+#btn-sidebar-expand {
+  display: none; position: absolute; top: 12px; left: 12px; z-index: 20;
+  background: var(--bg-1); border: 1px solid var(--bg-4); color: var(--text-1);
+  width: 32px; height: 32px; border-radius: 6px; cursor: pointer; place-items: center;
+  box-shadow: 0 2px 6px rgba(0,0,0,.35);
+}
+#btn-sidebar-expand .material-symbols-outlined { font-size: 18px; }
+#btn-sidebar-expand:hover { background: var(--bg-3); color: var(--text-0); }
+body.sidebar-collapsed #btn-sidebar-expand { display: grid; }
 .poc-tag {
   font-size: 10px; background: var(--yellow); color: #000; border-radius: 4px;
   padding: 1px 5px; vertical-align: 2px; margin-left: 6px; font-weight: 800;
@@ -92,10 +119,27 @@ body {
 
 #user-panel {
   margin-top: auto; background: var(--bg-0); padding: 8px;
-  display: flex; align-items: center; justify-content: space-between; gap: 6px;
-  min-height: 52px;
+  display: flex; flex-direction: column; gap: 6px;
 }
-.me { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
+
+/* row 1: available tools */
+.user-buttons {
+  display: flex; align-items: center; justify-content: center; gap: 4px;
+  padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.06);
+}
+.ctl {
+  background: transparent; border: none; color: var(--text-1); font-size: 15px;
+  width: 34px; height: 30px; border-radius: 6px; cursor: pointer; position: relative;
+  display: grid; place-items: center; padding: 0; transition: background .12s, color .12s;
+}
+.ctl .material-symbols-outlined { font-size: 19px; }
+.ctl:hover { background: var(--bg-3); color: var(--text-0); }
+.ctl.off { color: var(--red); }
+.ctl:disabled { opacity: .35; cursor: not-allowed; }
+.ctl.active { color: var(--green); }
+
+/* row 2: user info + help */
+.me { display: flex; align-items: center; gap: 8px; min-width: 0; }
 .me-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; overflow: hidden; }
 #nick {
   background: transparent; border: none; color: var(--text-0); font: inherit;
@@ -116,17 +160,7 @@ body {
 #voice-status {
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
-.user-buttons { display: flex; gap: 2px; flex-shrink: 0; }
-.ctl {
-  background: transparent; border: none; color: var(--text-1); font-size: 15px;
-  width: 28px; height: 28px; border-radius: 6px; cursor: pointer; position: relative;
-  display: grid; place-items: center; padding: 0;
-}
-.ctl .material-symbols-outlined { font-size: 20px; }
-.ctl:hover { background: var(--bg-3); color: var(--text-0); }
-.ctl.off { color: var(--red); }
-.ctl:disabled { opacity: .35; cursor: not-allowed; }
-.ctl.active { color: var(--green); }
+.help-ctl { flex-shrink: 0; color: var(--text-2); }
 
 /* main */
 #main { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; height: 100%; }
@@ -281,6 +315,13 @@ body {
 }
 
 /* spatial plane */
+#spatial-resizer {
+  height: 6px; flex-shrink: 0; cursor: row-resize; background: transparent; position: relative;
+}
+#spatial-resizer::after {
+  content: ''; position: absolute; left: 0; right: 0; top: 2px; height: 2px;
+}
+#spatial-resizer:hover, #spatial-resizer.dragging { background: var(--brand); opacity: .5; }
 #spatial-wrap {
   height: 34vh; min-height: 220px; background: var(--bg-1);
   border-top: 1px solid rgba(0,0,0,.35); display: flex; flex-direction: column;
@@ -547,6 +588,10 @@ code { font-family: ui-monospace, monospace; font-size: 12px; }
     transform: translateX(-100%); transition: transform .2s ease; box-shadow: 8px 0 24px rgba(0,0,0,.5);
   }
   #sidebar.open { transform: translateX(0); }
+  /* desktop sidebar collapse/resize is irrelevant here — the drawer always exists,
+     it's just toggled on/off screen via .open */
+  body.sidebar-collapsed #sidebar { display: flex; }
+  #sidebar-resizer, #spatial-resizer, #btn-sidebar-expand, #btn-sidebar-collapse { display: none !important; }
 
   #main { width: 100%; padding-bottom: 64px; } /* room for the fixed bottom controls */
   #stage { padding: 10px; gap: 10px; }