website/canvas.html

@@ -136,25 +136,19 @@
 				color: white;
 			}
 
-			/* Collapse/expand toggle — small pill at bottom of toolbar */
+			/* Collapse/expand toggle */
 			#toolbar-collapse {
-				padding: 4px 0 !important;
+				padding: 7px 8px !important;
 				background: transparent !important;
-				font-size: 11px !important;
+				font-size: 16px !important;
 				line-height: 1;
-				opacity: 0.4;
+				opacity: 0.6;
 				transition: opacity 0.2s;
-				text-align: center;
-				letter-spacing: 2px;
-				color: #94a3b8;
-				order: 999; /* always last */
-				margin-top: auto;
 			}
 
 			#toolbar-collapse:hover {
 				opacity: 1;
 				background: #f1f5f9 !important;
-				color: #0f172a;
 			}
 
 			#toolbar.collapsed .toolbar-group,
@@ -168,12 +162,6 @@
 				overflow: visible;
 			}
 
-			#toolbar.collapsed #toolbar-collapse {
-				opacity: 0.7;
-				font-size: 14px !important;
-				padding: 4px 6px !important;
-			}
-
 			#community-info {
 				position: fixed;
 				top: 72px;
@@ -619,6 +607,8 @@
 		</div>
 
 		<div id="toolbar">
+			<button id="toolbar-collapse" title="Minimize toolbar">▲</button>
+
 			<div class="toolbar-group">
 				<button class="toolbar-group-toggle">✏️ Draw</button>
 				<div class="toolbar-dropdown">
@@ -742,8 +732,6 @@
 					<button id="reset-view" title="Reset View">⟳ Reset View</button>
 				</div>
 			</div>
-
-			<button id="toolbar-collapse" title="Minimize toolbar">···</button>
 		</div>
 
 		<div id="memory-panel">
@@ -2214,7 +2202,7 @@
 			const collapseBtn = document.getElementById("toolbar-collapse");
 			collapseBtn.addEventListener("click", () => {
 				const isCollapsed = toolbarEl.classList.toggle("collapsed");
-				collapseBtn.textContent = isCollapsed ? "▶" : "···";
+				collapseBtn.textContent = isCollapsed ? "▼" : "▲";
 				collapseBtn.title = isCollapsed ? "Expand toolbar" : "Minimize toolbar";
 			});