RWD:直版改直向堆疊讓辦公室區域最大化

摘要：
直版/窄螢幕時辦公室改為滿寬顯示並鎖定 1200:700 比例,側邊面板移到下方;
另新增面板收合按鈕,桌面版也能全畫面看辦公室。

根本原因：
原本任何螢幕都是「辦公室 + 300px 側欄」左右排,SVG 以 meet 等比縮放,
直版視窗寬度受限時上下大量留白,辦公室被壓得很小。

影響：
直版(手機/平板)辦公室寬度從約一半提升到 100%;
窄橫版維持左右排但側欄縮為 232px;桌面版行為不變,多一顆 ⊞ 收合鈕。

修法：
- styles.css:orientation: portrait 時 main-row 改 column,
  floorplan-wrap 用 aspect-ratio 1200/7 00 撐滿寬度,不再靠 flex 留白;
  ≤900px 壓縮 header(隱藏圖例/副標、按鈕縮小、允許換行)
- store 新增 panelOpen/togglePanel,App 據此條件渲染 SidePanel

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/components/HeaderBar.tsx

@@ -14,6 +14,7 @@ export function HeaderBar() {
   const setTheme = useOfficeStore((s) => s.setTheme);
   const mode = useOfficeStore((s) => s.mode);
   const agentCount = useOfficeStore((s) => s.agents.size);
+  const panelOpen = useOfficeStore((s) => s.panelOpen);
 
   const isLive = mode === "live";
 
@@ -65,6 +66,13 @@ export function HeaderBar() {
         <button className="btn" onClick={() => setTheme(theme === "light" ? "dark" : "light")} title="切換主題">
           {theme === "light" ? "🌙" : "☀️"}
         </button>
+        <button
+          className="btn"
+          onClick={() => useOfficeStore.getState().togglePanel()}
+          title={panelOpen ? "收合面板,放大辦公室" : "展開面板"}
+        >
+          {panelOpen ? "⊞" : "⊟"}
+        </button>
       </div>
     </header>
   );