Upload style.css with huggingface_hub

style.css

@@ -121,13 +121,64 @@ body {
   transform: translateX(-50%);
   width: 90%;
   max-width: 600px;
-  padding: 20px;
   background: rgba(30,30,30,0.9);
   backdrop-filter: blur(30px);
   -webkit-backdrop-filter: blur(30px);
   border-radius: 16px;
   border: 1px solid rgba(255,255,255,0.1);
   z-index: 10;
+  transition: all 0.3s ease;
+}
+
+.controls.collapsed {
+  width: auto;
+  max-width: none;
+  background: rgba(30,30,30,0.7);
+}
+
+.controls.collapsed .controls-content {
+  display: none;
+}
+
+.controls.collapsed .controls-toggle {
+  transform: rotate(180deg);
+}
+
+.controls-toggle {
+  display: none;
+  width: 40px;
+  height: 40px;
+  background: transparent;
+  border: none;
+  color: rgba(255,255,255,0.8);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin: 0 auto;
+  padding: 0;
+}
+
+.controls-toggle:hover {
+  color: white;
+}
+
+.controls-toggle svg {
+  width: 24px;
+  height: 24px;
+}
+
+.controls.collapsed .controls-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+}
+
+.controls:not(.collapsed) .controls-toggle {
+  display: none;
+}
+
+.controls-content {
+  padding: 20px;
 }
 
 .primary-btn {
@@ -398,6 +449,10 @@ body {
     width: calc(100% - 40px);
   }
   
+  .controls.collapsed {
+    width: auto;
+  }
+  
   .live-caption {
     bottom: 20px;
     width: calc(100% - 40px);