diff --git a/markitect/document_manager.py b/markitect/document_manager.py
index 36f2c761..34e52504 100644
--- a/markitect/document_manager.py
+++ b/markitect/document_manager.py
@@ -416,6 +416,11 @@ class DocumentManager:
             right: 0;
         }
 
+        .markitect-control-panel.expanded .markitect-control-ribbon {
+            opacity: 0;
+            pointer-events: none;
+        }
+
         /* Control ribbon - always visible */
         .markitect-control-ribbon {
             position: absolute;
@@ -431,7 +436,9 @@ class DocumentManager:
             justify-content: center;
             color: white;
             font-size: 18px;
-            transition: all 0.3s ease;
+            transition: all 0.3s ease, opacity 0.3s ease;
+            opacity: 1;
+            pointer-events: auto;
         }
 
         .markitect-control-ribbon:hover {