Center Gear panels over the full stage

CHANGELOG.md

@@ -16,6 +16,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ### Changed
 
+- Gear drawers (**Appearance**, **Voice**, **Camera & Lighting**, and **Settings**) now open as rounded, centred, full-stage panels instead of narrow right-edge strips, giving each surface the same visual weight as the avatar stage.
 - README Animations sample uses compressed `AVATAR_31_speak.gif` (lip-sync / speak loop) instead of the older default-loop clip.
 - Settings section **Motion** is now **Animation hotkeys** (same `motionDeck` settings). The Add-animation picker and the deck list keep the mouse wheel until they hit the end of their own scroll, then the Settings drawer scrolls again.
 - **Voice panel and docs spell out capture status and privacy.** Gear → **Voice** shows plain-language status (`Starting capture…`, `Capturing (local)`, …) instead of raw tokens, keeps a local-only privacy note next to the source picker, and turns permission failures into actionable copy (with a desktop button into system privacy settings on Windows/macOS). [Audio sources](docs/voice/audio-sources.md) expands permissions troubleshooting and a short “what stays local” section; the README privacy line matches. (#12)

avatar/src/components/ui/GlassDrawer.jsx

@@ -35,7 +35,7 @@ export function GlassDrawer({ open, panelId, onClose, drawerRef, children }) {
   return (
     <aside
       ref={drawerRef}
-      className={`glass-drawer ${open ? 'glass-drawer--open' : ''}`}
+      className={`glass-drawer glass-drawer--stage ${open ? 'glass-drawer--open' : ''}`}
       aria-hidden={!open}
     >
       <div className="glass-drawer__header">

avatar/src/styles/app.css

@@ -599,6 +599,22 @@
   transform: translateX(0);
 }
 
+/* Every command panel covers the stage from the centre and keeps the soft
+   floating-panel shape, without depending on space beyond the desktop window. */
+.glass-drawer--stage {
+  right: 50%;
+  bottom: 0;
+  width: 100%;
+  border: 1px solid rgba(255, 255, 255, 0.82);
+  border-radius: 18px;
+  box-shadow: 0 10px 32px rgba(100, 80, 150, 0.18);
+  overflow: hidden;
+}
+
+.glass-drawer--stage.glass-drawer--open {
+  transform: translateX(50%);
+}
+
 .glass-drawer__header {
   display: flex;
   align-items: center;

docs/using-the-app.md

@@ -94,6 +94,8 @@ Loudness drives the green intensity while capturing; silence eases back to mint.
 | **Settings** | Overlay mode, Snap to screen, **Directories**, **Animation hotkeys**, **Agents**, **VRoid Hub**, **System** (reset / config path) |
 | **Close** | Quit the companion window (desktop) |
 
+**Appearance**, **Voice**, **Camera & Lighting**, and **Settings** open as rounded panels centred over the full avatar stage. Their content scrolls inside the panel when it is taller than the available space.
+
 <p align="center">
   <img src="screenshots/20-gear-main.png" alt="Main gear menu" height="240" />
   <img src="screenshots/21-gear-animations.png" alt="Animations submenu" height="240" />