From 26cf12822c4e364322bc2216d2a04d95ec6d60cd Mon Sep 17 00:00:00 2001
From: AUDO <sachiel6484@gmail.com>
Date: Tue, 25 Aug 2026 18:22:12 +0800
Subject: [PATCH] style: center gear panels over the stage

---
 CHANGELOG.md                             |  1 +
 avatar/src/components/ui/GlassDrawer.jsx |  2 +-
 avatar/src/styles/app.css                | 16 ++++++++++++++++
 docs/using-the-app.md                    |  2 ++
 4 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d037a00..ab182de 100644
--- a/CHANGELOG.md
+++ b/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)
diff --git a/avatar/src/components/ui/GlassDrawer.jsx b/avatar/src/components/ui/GlassDrawer.jsx
index 72e96a1..d592054 100644
--- a/avatar/src/components/ui/GlassDrawer.jsx
+++ b/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">
diff --git a/avatar/src/styles/app.css b/avatar/src/styles/app.css
index 70c7ce7..c5c249e 100644
--- a/avatar/src/styles/app.css
+++ b/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;
diff --git a/docs/using-the-app.md b/docs/using-the-app.md
index 1970248..9f2426c 100644
--- a/docs/using-the-app.md
+++ b/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" />