/* =================================================================== * NEXA custom title bar (Antigravity-style, frameless-window chrome) * * Replaces native Windows/macOS title bar in Tauri mode; in plain browser * (`npm run web`) still renders — just hides the window-control buttons * via [data-env="web"] on (set by tauri-window.js). * * Layout: * [2px privacy strip — appears only when mic actively listening] * [36px title bar: brand · current title | mic pill · AI pill · cost · palette · settings · win buttons] * ================================================================== */ /* ---- Privacy strip ------------------------------------------------ */ /* Shows when the user's voice is being actively recorded for STT. * Peripheral cue so the user doesn't have to look at the pill. */ .privacy-strip { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--error) 20%, var(--error) 50%, var(--error) 80%, transparent); z-index: 10000; pointer-events: none; animation: privacy-pulse 1.2s ease-in-out infinite; } @keyframes privacy-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } /* ---- Title bar ---------------------------------------------------- */ .titlebar { /* Fixed 36px strip at top of window; app-shell sits under it 2026-05-14: bg/border/color 全 token 化，跟主題（dark/light/sepia/oled/nord）走 */ display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 8px 0 12px; background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: 12px; user-select: none; -webkit-user-select: none; flex-shrink: 0; position: relative; z-index: 9999; } /* Everything in here is a Tauri drag region by default; * interactive children opt out with data-tauri-drag-region-disabled. */ .titlebar-left, .titlebar-center, .titlebar-right { display: flex; align-items: center; gap: 8px; height: 100%; } .titlebar-center { flex: 1; min-width: 0; /* let child text truncate */ padding: 0 12px; justify-content: flex-start; } /* ---- Brand (left) ------------------------------------------------- */ /* Brand button = clickable home shortcut (replaces the old chat icon * in the left rail). Looks like a label, behaves like a button. */ .tb-brand-btn { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 4px 6px; margin: 0; cursor: pointer; border-radius: 6px; color: inherit; font: inherit; -webkit-app-region: no-drag; app-region: no-drag; } .tb-brand-btn:hover { background: var(--bg-hover); } .tb-brand-btn:active { background: var(--bg-overlay); } .tb-brand-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .tb-brand-logo { width: 20px; height: 20px; border-radius: 5px; object-fit: cover; display: block; flex-shrink: 0; } .tb-brand-name { font-weight: 600; font-size: 12.5px; color: var(--text-primary); letter-spacing: 0.01em; } /* ---- Current conversation title (center) -------------------------- */ .tb-current { color: var(--text-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .tb-current::before { content: "·"; margin-right: 8px; opacity: 0.4; } /* ---- Pills (mic / AI / cost) ------------------------------------- */ .tb-pill { /* pills opt out of drag so clicks work */ -webkit-app-region: no-drag; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 6px; background: var(--bg-elevated); border: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: 11.5px; font-weight: 500; line-height: 1; cursor: pointer; transition: background 120ms, border-color 120ms, color 120ms; white-space: nowrap; } .tb-pill:hover { background: var(--bg-overlay); border-color: var(--border-default); color: var(--text-primary); } .tb-pill-icon { font-size: 12px; line-height: 1; } .tb-pill-label { font-size: 11.5px; } /* ---- Mic dot button (matches composer's wake-dot-mini visual language) -- */ .tb-mic-btn { -webkit-app-region: no-drag; width: 28px; height: 24px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; border-radius: 6px; padding: 0; transition: background 100ms; } .tb-mic-btn:hover { background: var(--bg-hover); } /* Slightly bigger than composer's 6px because the title bar has more * surrounding chrome — needs a bit more weight to register at a glance. */ .tb-mic-dot.wake-dot-mini { width: 9px; height: 9px; } /* ---- AI pill tiers ----------------------------------------------- */ .tb-pill-ai.ai-local { background: rgba(74, 222, 128, 0.12); border-color: rgba(74, 222, 128, 0.28); color: #bbf7d0; } .tb-pill-ai.ai-haiku { background: var(--bg-elevated); border-color: var(--border-subtle); color: var(--text-secondary); } .tb-pill-ai.ai-sonnet { /* tier 識別 = 紫色 bg + border；文字用 --text-primary 保證亮主題可讀 */ background: rgba(139, 127, 217, 0.14); border-color: rgba(139, 127, 217, 0.3); color: var(--text-primary); } .tb-pill-ai.ai-opus { background: rgba(251, 146, 60, 0.14); border-color: rgba(251, 146, 60, 0.3); color: var(--text-primary); } /* ---- Cost pill ---------------------------------------------------- */ .tb-pill-cost { color: var(--text-muted); font-variant-numeric: tabular-nums; } /* ---- Icon buttons (palette, settings) ---------------------------- */ .tb-btn { -webkit-app-region: no-drag; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--text-muted); cursor: pointer; border-radius: 5px; transition: background 120ms, color 120ms; } .tb-btn:hover { background: var(--bg-hover); color: var(--text-primary); } .tb-btn.active { /* 開啟控制的 popover/view 時 — 跟著 --accent 走 */ background: var(--accent-subtle); color: var(--accent); } /* ⏰ 時間 layer 入口（titlebar-right）— 跟左上 LOGO 對稱 * Badge 顯示未完成任務數，跟桌面 rail 的 .rail-badge 同邏輯。 */ .tb-time-btn { position: relative; } .tb-time-badge { position: absolute; top: -2px; right: -2px; min-width: 14px; height: 14px; padding: 0 3px; display: flex; align-items: center; justify-content: center; background: var(--accent, #8b7fd9); color: #fff; border-radius: 7px; font-size: 9px; font-weight: 600; font-family: var(--font-mono, monospace); line-height: 1; pointer-events: none; } /* ---- Title bar popovers (presets / reflog dropdowns) ------------- * In the rail these dropped to the right; in the titlebar they drop * downward, anchored to the button's right edge so they don't run off * the window. Reuses .preset-row / .preset-apply / .preset-meta styles * from style.css for content layout. */ .tb-popover-wrap { position: relative; -webkit-app-region: no-drag; } .tb-popover { position: absolute; top: calc(100% + 6px); right: 0; min-width: 280px; max-width: 360px; max-height: 60vh; overflow-y: auto; background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: 8px; box-shadow: var(--shadow-lg); padding: 8px; z-index: 10001; display: flex; flex-direction: column; gap: 2px; user-select: text; /* let users copy preset names etc. */ } /* When the popover-wrap is right-aligned near the window edge, keep the popover from clipping. The right:0 anchor handles this. */ /* ---- AI model picker (specialized titlebar popover) -------------- */ .tb-pill-caret { font-size: 9px; opacity: 0.6; margin-left: 1px; } .tb-ai-picker { min-width: 320px; padding: 4px; } .tb-ai-section { padding: 6px 4px; } .tb-ai-section + .tb-ai-section { border-top: 1px solid var(--border-subtle); margin-top: 2px; } .tb-ai-section-title { font-size: 10.5px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 8px 6px; } .tb-ai-row { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 8px; width: 100%; padding: 7px 9px; background: transparent; border: 1px solid transparent; border-radius: 6px; color: var(--text-secondary); font-size: 12px; cursor: pointer; text-align: left; transition: background 100ms, border-color 100ms; } .tb-ai-row:hover { background: var(--bg-hover); } .tb-ai-row.active { background: var(--accent-subtle); border-color: var(--accent-ring); color: var(--text-primary); } .tb-ai-row-icon { text-align: center; font-size: 13px; } .tb-ai-row-name { font-weight: 500; } .tb-ai-row-meta { font-size: 10.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; } .tb-ai-hint { font-size: 11.5px; color: var(--text-muted); padding: 4px 9px 6px; line-height: 1.5; } .tb-ai-hint a { color: var(--accent); text-decoration: underline; } .tb-ai-footer { border-top: 1px solid var(--border-subtle); margin-top: 4px; padding: 4px 0 0; display: flex; justify-content: flex-end; } .tb-ai-link { background: transparent; border: 0; color: var(--accent); font-size: 11.5px; padding: 4px 9px; cursor: pointer; border-radius: 4px; } .tb-ai-link:hover { background: var(--accent-subtle); color: var(--accent-hover); } /* ---- Keyboard shortcut cheatsheet (? key opens) ------------------ */ .kbd-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 10500; display: flex; align-items: center; justify-content: center; padding: 32px; } .kbd-modal { width: min(620px, 92vw); max-height: 80vh; background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: 12px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; color: var(--text-primary); } .kbd-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border-subtle); } .kbd-head h3 { margin: 0; font-size: 14px; font-weight: 600; } .kbd-close { width: 26px; height: 26px; background: transparent; border: 0; color: var(--text-muted); cursor: pointer; border-radius: 5px; font-size: 18px; line-height: 1; } .kbd-close:hover { background: var(--bg-hover); color: var(--text-primary); } .kbd-body { padding: 8px 18px 12px; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; } .kbd-section { padding: 8px 0; } .kbd-section h4 { margin: 0 0 8px 0; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .kbd-row { font-size: 12.5px; color: var(--text-secondary); padding: 4px 0; line-height: 1.6; } .kbd-row kbd { display: inline-block; padding: 1px 6px; margin: 0 2px; background: var(--bg-overlay); border: 1px solid var(--border-default); border-radius: 4px; font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 11px; color: var(--text-primary); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3); } .kbd-foot { padding: 10px 18px; border-top: 1px solid var(--border-subtle); font-size: 11px; color: var(--text-muted); text-align: right; } /* Single column on narrow windows */ @media (max-width: 560px) { .kbd-body { grid-template-columns: 1fr; } } /* ═══════ 📐 Tablet title bar 收斂 (760-1099px) ═══════ 平板：bigger than mobile but cost pill 仍佔位置，先把 label 縮小 */ @media (min-width: 761px) and (max-width: 1099px) { .titlebar { padding: 0 8px; } .tb-pill-label { font-size: 10.5px; } .tb-current { font-size: 12px; } /* 還可以放 cost pill，但若窄到剩 800px 再藏 */ } @media (min-width: 761px) and (max-width: 879px) { .tb-pill.tb-pill-cost { display: none; } } /* ═══════ 📱 Mobile title bar 收斂（RWD Day 1, 2026-05-06）═══════ 手機螢幕窄、title bar 9 個 pill 塞不下。隱掉非關鍵： - cost pill（成本顯示） - mic 永遠在的圖示（手機已有 composer 的 mic） - 部分 brand sub-text 保留：logo、AI 模型 picker、keyboard shortcut、settings。 */ @media (max-width: 760px) { /* iPhone notch / status bar：從 status bar 下面開始畫 titlebar */ .titlebar { padding: 0 6px; padding-top: env(safe-area-inset-top, 0); height: calc(36px + env(safe-area-inset-top, 0)); } .tb-pill-label { display: none; } /* 只顯示 icon，省空間 */ .tb-pill { padding: 0 6px; } .tb-mic-btn { display: none; } /* composer 自己有 mic 不重複 */ .tb-pill.tb-pill-cost { display: none; } /* 成本 pill 隱藏（要看去設定） */ .tb-brand-name { font-size: 13px; } .tb-current { padding: 0 6px; font-size: 12px; } /* 觸控目標 ≥ 32px */ .tb-btn { min-width: 32px; min-height: 32px; } } /* ═══════ 📱 Compact ≤ 380px (iPhone SE / mini)：再收一階 ═══════ */ @media (max-width: 380px) { .tb-brand-name { display: none; } /* 只剩 logo 字 */ .tb-current { display: none; } /* 對話標題藏；改在 breadcrumb 看 */ .titlebar-right { gap: 4px; } .titlebar-left { gap: 4px; } .tb-pill { padding: 0 4px; } .tb-btn { min-width: 28px; min-height: 28px; } .tb-btn svg { width: 13px; height: 13px; } } /* ═══════ 📱 Mobile titlebar popovers — fixed 全寬避免被切到 ═══════ 桌面 .tb-popover 用 position:absolute + right:0 對齊觸發按鈕，往左展 320px。手機螢幕 < 360px 時觸發按鈕在右側，popover 左半截會被切到視窗外（user 看不到雲端 / 本機 section）。改成 fixed 定位 + left:8px right:8px 全寬橫展，並從 titlebar 下方 4px 開始。 */ @media (max-width: 760px) { .tb-popover { position: fixed; top: calc(36px + 4px + env(safe-area-inset-top, 0)); left: 8px; right: 8px; min-width: 0; max-width: none; width: auto; max-height: calc(100dvh - 36px - 56px - 16px - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0)); } .tb-ai-picker { min-width: 0; } } /* ---- Window controls (min/max/close) — Tauri only ---------------- */ .tb-win-controls { display: flex; align-items: stretch; height: 100%; margin-left: 4px; } body[data-env="web"] .tb-win-controls { display: none; } .tb-win-btn { -webkit-app-region: no-drag; width: 42px; height: 36px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: #c5c5c5; cursor: pointer; font-size: 11px; transition: background 80ms; } .tb-win-btn svg { width: 10px; height: 10px; opacity: 0.85; } .tb-win-btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } .tb-win-btn.tb-win-close:hover { background: #e81123; color: #fff; } /* ---- macOS-like alternative positioning (left traffic lights) ---- * Not used by default — keep the class for future platform detection. */ body[data-platform="darwin"] .tb-win-controls { order: -1; margin: 0 8px 0 0; } /* ---- Legacy .topbar lives below titlebar; tighten spacing so they * don't visually compete ---------------------------------------- */ .titlebar + .topbar-progress + .app-shell .view .topbar { border-top: none; } /* ---- Viewport compensation --------------------------------------- * style.css 已用 dvh + safe-area 處理 .app-shell 高度（見 style.css 的 * .app-shell 規則）。此處保留更高特異性 selector 以涵蓋 mobile 上 * titlebar 因 safe-area-inset-top 變高的場景：扣 1px border + safe-area。 */ .titlebar ~ .app-shell, .titlebar + .topbar-progress + .app-shell { height: calc(100dvh - 37px - env(safe-area-inset-top, 0px)); }