/* QuantWing adaptive navigation. One five-button DOM changes geometry only: desktop rail, mobile bottom dock. Viewer nodes and bot lifecycle stay untouched. */ :root { --qw-desktop-rail-w: 236px; --qw-desktop-rail-z: 11020; --qw-titlebar-h: 44px; --qw-floating-glass-background: color-mix(in srgb, var(--qw-glass-surface, #152337) 35%, transparent); --qw-floating-glass-filter: blur(24px) saturate(160%); /* 2026-09-16：70 -> 50。站長「縮扁一點 太高了」。50 是 LINE TODAY 的實測值 （原圖 1170x2532 = iPhone @3x，量到 150 實際 px / 3 = 50 CSS px）。 ⭐ 這個變數另外三處在算內容區 padding-bottom（:438 :441 與 quantum-flight.css:1064） ⇒ 改這一個，四處一起跟上，⛔ 不要各改各的。 */ --qw-mobile-dock-h: 68px; --qw-mobile-dock-bottom: max(14px, calc(env(safe-area-inset-bottom, 0px) - 10px)); /* ⭐ 2026-09-16 新增，因為「dock 內距」這一個數字被**四處**各自手抄： .tabs 的 padding、.tab 的 height、.tab 的 border-radius、.qw-tab-indicator 的 top/left/width/height/radius。上一輪只改了容器高度，其餘三處留在舊算式上 ⇒ 按鈕戳出藥丸、選中膠囊整個歪掉，而 CSS 一個字都不報錯。 ⛔ 這四處以後一律從這兩個變數算，不准再寫死。 */ --qw-dock-pad: 4px; --qw-dock-item-h: calc(var(--qw-mobile-dock-h) - 2 * var(--qw-dock-pad)); --qw-dock-press-duration: 176ms; --qw-dock-release-duration: 600ms; --qw-dock-spring: cubic-bezier(.2, 1.35, .3, 1); } .window-drag-strip { display: none; } /* ⭐ 標題列保留高度只屬於桌面殼（2026-09-14，站長：「上方不要被Logo 狀態佔空間」）。 ⛔ --qw-titlebar-h 原本宣告在**裸 :root** 上、沒有任何宿主條件 ⇒ 網頁版每一頁的內容 都被 #appShell 的 padding-top 往下推 44px，而那 44px 裡**什麼都沒有**： 真正會畫在那裡的 .window-drag-strip 只在 html[data-host="tauri"] 下 display:block （E1：1440×900 逐點 elementFromPoint 掃 y=2..38，回傳全是純背景的 div#appShell）。 ⚠ 只改變數、⛔ 不動 :45 那條 padding-top —— 桌面殼那邊拖曳條與三顆視窗鈕都寫 height: var(--qw-titlebar-h, 44px)，它們全在 html[data-host="tauri"] 前綴下， 拿到的仍是 44px ⇒ 桌面殼一個像素都不會變（已跑負對照）。 ⓘ 特異性 (0,1,1) > :root 的 (0,0,1)，⛔ 不靠載入順序硬撐。 */ html:not([data-host="tauri"]) { --qw-titlebar-h: 0px; } /* ---- 「總覽」＝四宮格，選中時填實（站長 2026-09-15 推翻 09-14 的商標版）---- 逐字原話：「網站和桌面板你那樣設計更醜了，還是弄回去原本的總攬圖案 / Logo和QuantWing 放一起才好看」 ＋「總攬的 Logo 選中 沒有圖案變化 補上 自己想怎改」。 ⛔ 這裡原本有一整段（35 行）把總覽那一格特殊化：fill:currentColor / stroke:none / 選中時 scale(1.08) ＋ mask-image:none。它存在的唯一理由是「那一格放的是實心商標， 不能套隔壁四顆的線稿→填滿」。圖示退回四宮格之後，那個理由整段消失 ⇒ 已刪， ⛔ 不是「順手精簡」。（memory: a_rule_whose_reason_is_already_satisfied_is_not_a_blocker） ⚠ 順帶被那段掩蓋掉的缺陷：手機 dock 的 .tab 本來就是 color:var(--text)（本檔 :324 一帶）， ⇒ 未選中已經是最亮色、選中無處可亮，而商標只靠「亮度＋放大 8%」表達狀態 ⇒ 手機上等於**完全沒有變化**（桌面 rail 才有 --muted→--text 的提亮）。那就是站長說的 「選中 沒有圖案變化」。四宮格改用形狀（空心→實心）表達，兩個平台都看得到。 ⓘ 為什麼這一條**刻意不包在 media query 裡**：站長對「選中要有變化」的要求同時涵蓋手機與桌面， 而形狀變化在兩邊都成立 ⇒ 這是唯一一條有意跨平台的宣告。本輪其他改動（隱藏文字、收窄 dock） 全部關在 @media (max-width: 760px) 內。 ⓘ 特異性：共用的手機選中態是 body:not(.auth-locked) .app-header .tab.active svg ＝ (0,4,2)， 這條加了 [data-tab] 是 (0,5,2) ⇒ 兩邊都贏，⛔ 不是靠載入順序硬撐。 ⚠ 為什麼要把 stroke 關掉（共用那條寫 stroke-width:2.6）：四宮格上下兩塊在 24 座標系只隔 3 單位， 兩邊各加粗 1.3 之後剩 0.4 單位（26px 下約 0.43px）⇒ 四塊會黏成一坨、讀不出是儀表板。 它是**封閉**路徑，光靠 fill 就填得滿，不需要 stroke 補（隔壁四顆有開放路徑才需要）。 */ body:not(.auth-locked) .app-header .tab[data-tab="dashboard"].active svg { fill: currentColor; stroke: none; stroke-width: 0; } /* Caption controls are fixed to the viewport. Only the mobile nav may scale; its header must never establish a transformed/filter containing block. */ body:not(.auth-locked) .app-header { /* The ancestor owns stacking: children cannot escape fullscreen main. */ z-index: var(--qw-desktop-rail-z); pointer-events: none; transform: none; filter: none; perspective: none; contain: none; will-change: auto; -webkit-backdrop-filter: none; backdrop-filter: none; } body:not(.auth-locked) .app-header :is(.tabs, .header-status, .window-controls, .window-drag-region) { pointer-events: auto; } /* 登入／阻擋畫面也保留同一條無框拖曳面；三顆按鈕仍是 no-drag。 */ html[data-host="tauri"] body.auth-locked .window-drag-region { display: block; position: fixed; inset: 0 138px auto 0; z-index: 11990; height: var(--qw-titlebar-h); border-bottom: 0; background: transparent; -webkit-app-region: drag; user-select: none; } @media (min-width: 761px) { body:not(.auth-locked) .ai-chat-card.is-presentation-fullscreen { left: var(--qw-desktop-rail-w); min-height: 0 !important; } body:not(.auth-locked) #appShell { box-sizing: border-box; min-height: 100dvh; padding-left: var(--qw-desktop-rail-w); padding-top: var(--qw-titlebar-h); } body:not(.auth-locked) .app-header { position: fixed; inset: 0 auto 0 0; z-index: var(--qw-desktop-rail-z, 9000); box-sizing: border-box; width: var(--qw-desktop-rail-w); min-height: 100dvh; flex-direction: column; align-items: stretch; gap: 0; padding: 0 16px 20px; border-right: 1px solid color-mix(in srgb, var(--muted) 18%, transparent); border-bottom: 0; background: transparent; box-shadow: none; /* A backdrop-filter on the header would become the containing block for the fixed native window controls and pull them into the rail. */ backdrop-filter: none; } body:not(.auth-locked) .app-header::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: rgba(8, 16, 29, .94); } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { body:not(.auth-locked) .app-header::before { background: var(--qw-floating-glass-background); -webkit-backdrop-filter: var(--qw-floating-glass-filter); backdrop-filter: var(--qw-floating-glass-filter); } } body:not(.auth-locked) .app-header .brand { width: 100%; /* 收掉 46px 的商標圖之後，這一塊只剩產品名一行 ⇒ 104px 會留一大片空白。 站長反覆要求的就是「上方不要被 Logo 狀態佔空間」⇒ 一併把高度收回來。 */ height: 56px; min-width: 0; flex: 0 0 56px; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 10px 2px 0; pointer-events: none; } /* ⭐ 站長 2026-09-15：「Logo和QuantWing 放一起才好看」⇒ 商標回到產品名旁邊。 ⛔ 09-14 收掉它的理由是「商標已經是 rail 第一格的圖示，同一欄出現兩次」—— 總覽退回四宮格之後**那個重複不存在了**，所以這裡收掉的理由也消失。 ⚠ 這不牴觸站長講過兩次的「上方不要被Logo 狀態佔空間」：那句話要的是**垂直空間**， 而 .brand 的 height:56px 一個像素都沒動（見上一條規則），商標是**橫向**擺在產品名左邊。 手機（≤760px）那邊 .brand 整塊仍然 display:none，完全不受這條影響。 ⚠ 必須寫死 width/height，而且**必須帶 #appShell**：quantum-flight.css:939 有一條 `#appShell .brand-logo` 把它訂成 56x56。那條是 (1,0,1)，而 `body:not(.auth-locked) .app-header .brand-logo` 只有 (0,3,1) —— **id 贏過任何數量的 class** ⇒ 不加 #appShell 的話這裡寫幾 px 都沒用，實測仍是 56x56（46px 的內容區裝 56px ⇒ 溢出）。 ⛔ 這不是「載入順序」問題，adaptive-navigation.css 本來就排在 quantum-flight.css 前面， 但就算排到後面，同樣輸給 id。加 #appShell 之後是 (1,3,1) ⇒ 兩邊都贏。 ⚠ 我第一版的註解寫「這一段沒有任何 .brand-logo 尺寸規則」——**那句是錯的**， 是實際渲染量到 56x56 才發現。留著這行當教訓：⛔ 別把「我 grep 過的檔」當成「全部的檔」。 */ body:not(.auth-locked) #appShell .app-header .brand-logo { display: block; flex: 0 0 34px; width: 34px; height: 34px; } body:not(.auth-locked) .app-header .brand-text { display: flex; align-items: center; justify-content: center; gap: 0; padding-block: 2px; } body:not(.auth-locked) .app-header .brand strong { display: block; color: var(--text); /* The rail clips horizontal labels while expanding. A full line box must still contain descenders such as QuantWing's g at every display scale. */ font: 700 24px/1.3 "Segoe UI Variable", "Segoe UI", sans-serif; letter-spacing: -.03em; } body:not(.auth-locked) .app-header .tabs { display: flex; width: 100%; height: auto; flex: 0 0 auto; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 0 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } body:not(.auth-locked) .app-header .tab { width: 100%; min-width: 0; height: 56px; min-height: 56px; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: 1fr; justify-items: start; gap: 14px; padding: 0 16px; border-color: transparent; border-radius: 14px; color: var(--muted); background: transparent; box-shadow: none; font-size: 18px; font-weight: 600; letter-spacing: 0; } body:not(.auth-locked) .app-header .tab svg { width: 24px; height: 24px; } body:not(.auth-locked) .app-header .tab:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); transform: translateX(2px); } body:not(.auth-locked) .app-header .tab.active { color: var(--text); border-color: color-mix(in srgb, var(--accent) 20%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 3px 0 var(--accent), inset 0 1px rgb(255 255 255 / 6%); } body:not(.auth-locked) .app-header .header-status { width: 100%; margin-top: auto; flex-direction: column; gap: 10px; } body:not(.auth-locked) .app-header .header-update-badge, body:not(.auth-locked) .app-header .system-status { box-sizing: border-box; width: 100%; min-width: 0; min-height: 56px; justify-content: flex-start; padding: 10px 16px; white-space: normal; } body:not(.auth-locked) .app-header .header-update-badge { font-size: 15px; line-height: 1.4; } body:not(.auth-locked) .app-header .header-update-badge::before { margin-right: 0; font-size: 14px; } body:not(.auth-locked) .app-header .header-update-badge { gap: 10px; } body:not(.auth-locked) .app-header .system-status { gap: 10px; font-size: 16px; line-height: 1.4; } body:not(.auth-locked) .app-header .system-status-text { min-width: 0; max-width: none; overflow-wrap: anywhere; white-space: normal; } /* 2026-10-18 根治：面板以前用 left:calc(100% + 12px) 跟著 rail 寬度走，而面板又是 rail 的 子元素 ⇒ 游標移到面板＝hover rail ⇒ rail 展開 ⇒ 面板被推走 ⇒ 游標離開 ⇒ rail 收起 ⇒ 面板回來， 形成每秒數次的開關迴圈。 ⭐ 2026-10-18 第二輪（站長：「收回來後就不會再外移出去，畫面很奇怪」）：主流側欄的彈出面板 ＝面板開著時側欄「釘住」展開（:has(.system-status-panel:not([hidden]))），面板固定貼在 「展開寬度」外側 ⇒ 位置只有一個、不隨游標移動，也就不可能再形成迴圈；關閉面板才回到 hover 行為。 */ body:not(.auth-locked) .app-header .system-status-panel { position: fixed; top: auto; right: auto; bottom: 16px; left: calc(var(--qw-desktop-rail-expanded-w, var(--qw-desktop-rail-w)) + 12px); } /* Windows keeps a discoverable drag region beside its caption buttons. This strip is the same app surface as the rail, separated only by hairlines. */ html[data-host="tauri"] body:not(.auth-locked) .window-drag-strip { display: block; position: fixed; inset: 0 138px auto 0; /* The rail must receive hover over its logo. This transparent strip used to cover the upper half of the brand at z=11990 and steal the hit. */ z-index: calc(var(--qw-desktop-rail-z, 9000) - 1); height: var(--qw-titlebar-h); border-bottom: 0; background: transparent; -webkit-app-region: drag; user-select: none; } /* 頂列空間由 appShell 統一保留；2x2 的 main 全高規則不再能把它覆寫掉。 */ } @media (min-width: 761px) and (max-width: 1100px) { :root { --qw-desktop-rail-w: 204px; } body:not(.auth-locked) .app-header { padding-inline: 12px; } body:not(.auth-locked) .app-header .brand { gap: 8px; padding-inline: 0; } /* ⛔ 這裡原本還有一條 .brand-logo { width:40px; height:40px; flex-basis:40px }。 商標圖已在上面的 761px 區塊 display:none（站長「頂欄那顆收掉」）⇒ 那條是死碼， 留著會讓下一個讀的人以為窄桌面還有一顆 40px 的品牌圖。已刪。 */ body:not(.auth-locked) .app-header .tab { padding-inline: 12px; gap: 10px; } } @media (max-width: 760px) { body:not(.auth-locked) #appShell { padding-left: 0; } body:not(.auth-locked) .app-header { /* Keep fixed descendants anchored to the viewport, not this header. */ backdrop-filter: none; } html[data-host="tauri"] body:not(.auth-locked) .app-header .header-status { margin-right: 126px; } body:not(.auth-locked) .app-header .tabs { position: fixed; isolation: isolate; /* ⭐ 站長 2026-09-15：「常駐按紐左右間距太遠 拉近一點」。 ⛔ 原本是左右各留 12px 再 repeat(5, 1fr) 撐滿整條螢幕 ⇒ 那不是「間距設太大」， 是**根本沒有間距設定**：五格把所有剩餘空間平分掉，圖示中心距隨螢幕寬線性拉開 （改動前實測：375px=68.1px／414px=76.0px／760px=145.2px，而圖示本身只有 26px）。 ⇒ 改成內容寬的浮動藥丸置中：格寬鎖 54px、中心距恆為 56px，與螢幕寬**脫鉤**。 ⓘ left/right 同時為 0 加 margin-inline:auto 就是置中，⛔ 不用 transform —— 這條 .tabs 的 transform 已經被「按住整條縮放」佔用（:has(.tab:active) 那條 transform:scale(1.02)）， 再塞 translateX 會被那條整條覆蓋掉，而 CSS 一個字都不會報錯。 ⚠ 用 minmax(0, 54px) 不是寫死 54px：極窄機器碰到 max-width 時五格還能一起縮， 而膠囊的等分算式是跟著 .tabs **實際**寬度算的 ⇒ 縮了仍然逐格對齊。 ⚠ safe-area 的左右 inset 在直式是 0；藥丸只有 290px，橫放時離邊緣還很遠 ⇒ 這裡用 固定的 24px 邊距就夠，不必再把 env() 串進 max-width（那個 calc 少數引擎會整條丟掉）。 */ left: 0; right: 0; margin-inline: auto; width: max-content; max-width: calc(100% - 24px); /* 2026-09-16：54 -> 66。站長「且太窄了 弄寬」。 ⚠ 這不是推翻 09-15 那次「間距拉近」——那次治的是「格寬隨螢幕寬線性拉開」， 鎖成固定值是對的；這次只是把那個固定值調到 LINE 的比例。 算式：5*66 + 4*2(gap) + 2*6(padding) = 350，對上 LINE 實測的 346。 */ grid-template-columns: repeat(5, minmax(0, 66px)); height: var(--qw-mobile-dock-h); /* 2026-09-16：站長「位置放低點」。⛔ 原式在 iPhone 上其實是 34px（safe-area 值）， 比 LINE 實測的 26.7px 還**高** —— max(10, 34) 取的永遠是 safe-area 那半。 改成從 safe-area 扣 10px：iPhone 得 max(14, 24)=24px，貼近 LINE； 沒有 safe-area 的機器得 14px，仍離得開螢幕邊。 */ bottom: var(--qw-mobile-dock-bottom); gap: 2px; /* 2026-09-16 二修：6 -> 3。與 .tab 的高度算式是**同一條**約束： 按鈕高 = dock 高 - 2*padding。padding 6px 時按鈕只剩 44-6=44... 實際是 50-12=38px， 低於 Apple HIG 的 44px 觸控下限；收到 3px 才讓按鈕正好 44px。 ⛔ 改這個值必須同時看 .tab 的 height calc，否則兩者又會各自漂移（本輪的根因就是這個）。 */ padding: var(--qw-dock-pad); overflow: visible; border: 0; /* = 高的一半 ⇒ 全藥丸。Material 3 FloatingToolbarTokens 的 ContainerShape 也是 CornerFull。 ⚠ 高度改了這裡要跟著改，否則藥丸會變成圓角矩形。 */ border-radius: calc(var(--qw-mobile-dock-h) / 2); background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transform-origin: center; transition: transform var(--qw-dock-release-duration) var(--qw-dock-spring); } /* One glass layer, borrowed from the verified TranslationAI mobile dock. The nav/text stays opaque and the stars remain visible beneath the tint. */ body:not(.auth-locked) .app-header .tabs::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none; background: color-mix(in srgb, var(--qw-glass-surface, #152337) 92%, transparent); border: 1px solid color-mix(in srgb, var(--muted) 45%, transparent); /* 2026-09-14：這兩個數字原本是 0 0 24px rgb(0 0 0 / 5%) + inset 白 45%，跟著上面那句 "borrowed from the TranslationAI mobile dock" 一起搬過來的 —— 而那是一組**亮色**參數。 深色底上 5% 的黑投影等於沒有（看不出 dock 浮在內容之上），45% 的白內光則亮到像一條高光管。 ⛔ 這不是主題切換的問題：本專案只有一套深色（全庫 0 個 data-theme／prefers-color-scheme）， 所以沒有任何機制會替它換回來，只能就地改對。 */ /* 2026-09-16：站長「還要有 邊緣殘影效果」。加的是兩條內緣線＋一層近距投影： 頂緣高光讓玻璃有厚度、底緣微光收邊、近距投影讓它真的浮在內容之上。 ⛔ 刻意不用 SVG feDisplacementMap 做「真折射」：WebKit Bug 245510 自 2022 年 NEW 至今未修，Safari 根本不畫，而 CSS.supports 對它回 true ⇒ 會靜默沒效果。 */ box-shadow: 0 10px 28px rgb(0 0 0 / 38%), 0 2px 6px rgb(0 0 0 / 22%), inset 0 1px 0 rgb(255 255 255 / 22%), inset 0 -1px 0 rgb(255 255 255 / 8%); } /* Edge sheen is a paint-only layer. Keep the backdrop blur on ::before alone so Safari and low-power mobile GPUs do not sample a nested backdrop root. */ body:not(.auth-locked) .app-header .tabs::after { content: ""; position: absolute; z-index: -1; inset: 1px; border-radius: inherit; pointer-events: none; border: 1px solid rgb(230 250 255 / 28%); background: linear-gradient(112deg, rgb(210 244 255 / 12%) 0%, transparent 27%, transparent 70%, rgb(147 222 255 / 10%) 100%); box-shadow: inset 2px 2px 4px rgb(255 255 255 / 13%), inset -2px -2px 5px rgb(74 170 211 / 12%); } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { body:not(.auth-locked) .app-header .tabs::before { /* 單一半透明玻璃層：保留後方色彩，僅模糊細節；不疊亮度濾鏡或整體 opacity。 */ background: var(--qw-floating-glass-background); -webkit-backdrop-filter: var(--qw-floating-glass-filter); backdrop-filter: var(--qw-floating-glass-filter); } } body:not(.auth-locked) .app-header .tabs:has(.tab:active) { /* 收小（原 1.043）：現在被按那一顆自己會壓下去，整條再放大那麼多就會蓋過它。 */ transform: scale(1.045); transition-duration: var(--qw-dock-press-duration); } body:not(.auth-locked) .app-header .tab { /* ⛔ 2026-09-16 二修：原本是寫死的 58px，而它跟容器的 70px 是**手動對上的** （70 - 2*6 = 58）。上一輪把容器改成 50px 時這裡沒跟著改 ⇒ 按鈕比藥丸高 20px、 配上 overflow:visible 直接戳出玻璃外面，站長看到的「還是差很多」就是這個。 ⇒ 改成從 --qw-mobile-dock-h 算，兩者從此不可能各自漂移。 50 - 2*3 = 44px，正好是 Apple HIG 的觸控下限（比原本的 38px 可用高度大）。 */ height: var(--qw-dock-item-h); min-height: 0; /* ⛔ 原本是 `28px auto` 兩列（圖示上、文字下）＋ gap:3px。文字藏起來之後那個 auto 列 會塌成 0、但 gap 還在 ⇒ 內容比可用高度矮 3px 並整體偏上一點點。 ⇒ 直接收成單列、gap 歸零，圖示由 styles.css 的 place-items:center 置中。 */ grid-template-rows: 1fr; align-content: stretch; gap: 0; padding: 3px; border: 1px solid transparent; /* = 按鈕高的一半 ⇒ 全藥丸。⛔ 同樣改成算的，理由同上面那段。 */ border-radius: calc(var(--qw-dock-item-h) / 2); color: var(--text); background: transparent; box-shadow: none; font-size: clamp(13px, 3.2vw, 14.5px); font-weight: 600; line-height: 1.1; letter-spacing: 0; -webkit-tap-highlight-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; transition: color 160ms ease, background 160ms ease, border-color 160ms ease; } body:not(.auth-locked) .app-header .tab svg { width: 26px; height: 26px; } /* ⭐ 站長 2026-09-15：「改成 只有圖案 不要文字 只有該頁面 標題有文字」。 ⛔ 用 display:none **不刪 DOM**： 是 test/web-shell-navigation.test.js 的取材錨點 （它比對五顆的文字是不是「總覽/工作台/Webhook/API/設定」），刪掉那條測試會紅， 而且刪了就再也沒有東西釘住「導覽文字與頁內標題一致」。 ⚠ 無障礙**沒有**退化：五顆