/* 外围桥 PWA · Academic Minimalist（对齐 ../SpiralFramework/页面风格标准.html，token 逐字一致） 规约：色彩是标点符号不是正文；圆角仅 4/12/16px；阴影仅 --c-panel-shadow；零 emoji 零装饰图。 注：--c-danger 为本项目扩展 token（标准四色无断线/拒绝语义），取苹果系统红保持低饱和同族。 主题机制：JS 解析偏好落 （index.html 引导脚本 + src/theme.ts），CSS 只认本属性。 */ :root { --c-bg: #fbfbfd; --c-surface: rgba(255, 255, 255, 0.72); --c-surface-solid: #ffffff; --c-surface-subtle: #f5f5f7; --c-text: #1d1d1f; --c-text-secondary: #86868b; --c-text-tertiary: #c0c0c5; --c-border: rgba(0, 0, 0, 0.05); --c-border-strong: #e5e5ea; --c-divider: #d2d2d7; --c-table-row-border: #e5e5ea; --c-panel-shadow: 0 8px 30px -10px rgba(0,0,0,0.04); --c-accent: #0066cc; --c-accent-bg: rgba(0, 102, 204, 0.06); --c-accent-tag-bg: #e8f1fc; --c-accent-tag-text: #004ea3; --c-accent-border: rgba(0, 102, 204, 0.15); --c-warning: #9a6700; --c-warning-bg: rgba(154, 103, 0, 0.06); --c-warning-tag-bg: #fef3e2; --c-warning-tag-text: #7a5200; --c-warning-border: rgba(154, 103, 0, 0.15); --c-positive: #0a7a35; --c-positive-bg: rgba(10, 122, 53, 0.06); --c-positive-tag-bg: #e8f5ee; --c-positive-tag-text:#076028; --c-positive-border: rgba(10, 122, 53, 0.15); --c-danger: #c7351b; --c-danger-bg: rgba(199, 53, 27, 0.06); --c-danger-border: rgba(199, 53, 27, 0.15); color-scheme: light; } :root[data-theme="dark"] { --c-bg: #000000; --c-surface: rgba(28, 28, 30, 0.72); --c-surface-solid: #1c1c1e; --c-surface-subtle: #1c1c1e; --c-text: #f5f5f7; --c-text-secondary: #98989d; --c-text-tertiary: #48484a; --c-border: rgba(255, 255, 255, 0.08); --c-border-strong: #38383a; --c-divider: #38383a; --c-table-row-border: #2c2c2e; --c-panel-shadow: 0 8px 30px -10px rgba(0,0,0,0.3); --c-accent: #4d9aff; --c-accent-bg: rgba(77, 154, 255, 0.08); --c-accent-tag-bg: rgba(77, 154, 255, 0.15); --c-accent-tag-text: #4d9aff; --c-accent-border: rgba(77, 154, 255, 0.25); --c-warning: #e8a317; --c-warning-bg: rgba(232, 163, 23, 0.08); --c-warning-tag-bg: rgba(232, 163, 23, 0.15); --c-warning-tag-text: #e8a317; --c-warning-border: rgba(232, 163, 23, 0.25); --c-positive: #4ade80; --c-positive-bg: rgba(74, 222, 128, 0.08); --c-positive-tag-bg: rgba(74, 222, 128, 0.15); --c-positive-tag-text:#4ade80; --c-positive-border: rgba(74, 222, 128, 0.25); --c-danger: #ff6b52; --c-danger-bg: rgba(255, 107, 82, 0.08); --c-danger-border: rgba(255, 107, 82, 0.25); color-scheme: dark; } * { box-sizing: border-box; } /* iOS 键盘/滚动根治（v1.2 验收反馈两 bug）： body 固定化 = window 永不可滚——键盘收起后 composer 悬空（iOS 滚 body 不复位）与 「拖整个页面上下移」（window 橡皮筋滚动）两个症状同根，全部滚动收进内层容器。 */ html { height: 100%; overflow: hidden; /* 键盘态 webview 若 pan 越过 body 底边（--app-height 收缩），露出的区域按页面底色渲染， 不再露 webview 裸底（浅色模式下呈纯黑幕——真机验收实证）。与 index.html 内联块同义，改动两处同步。 */ background: var(--c-bg); } body { /* 高度=JS 地面真值（index.html 引导脚本写 --app-height=innerHeight）：CSS 视口单位在 iOS 独立模式按带工具栏小视口计算（100%/dvh/inset:0 三轮全中招），innerHeight 是当前形态 真实可见高度；回退 100% 只存在于 JS 执行前一瞬。固定化=window 永不可滚（键盘/拖拽根治）。 */ position: fixed; top: 0; left: 0; width: 100%; height: var(--app-height, 100%); overflow: hidden; overscroll-behavior: none; margin: 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif; background: var(--c-bg); color: var(--c-text); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .app { display: flex; flex-direction: column; height: 100%; } /* ===== 顶栏（glass · 导航化） ===== */ .topbar { display: flex; align-items: center; gap: 8px; padding: calc(env(safe-area-inset-top) + 10px) 12px 10px; background: var(--c-surface); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--c-border); flex: none; } .nav-start { display: flex; align-items: center; gap: 4px; min-width: 0; } .brand { /* Spiry wordmark：透明底 PNG 的 alpha 即字形，mask 上色随主题（黑字白字同源一图） */ width: 92px; height: 19px; margin-left: 4px; background-color: var(--c-text); -webkit-mask: url("brand/wordmark.png") center / contain no-repeat; mask: url("brand/wordmark.png") center / contain no-repeat; } .topbar .title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* chrome 操作件（返回/齿轮）：低频导航，去强调（P6 层级用光不用色）—— 顶栏唯一带色语义=状态胶囊的点；点按仍有 accent-bg 回应 */ .topbar-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; border-radius: 12px; background: none; color: var(--c-text-tertiary); cursor: pointer; -webkit-tap-highlight-color: transparent; flex: none; } .topbar-btn:active { background: var(--c-accent-bg); } .topbar-btn svg { width: 20px; height: 20px; } /* 状态胶囊：单一语义位（daemon 不可达 > opencode 断开 > 连接中 > 已连接） */ .status-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--c-border); background: var(--c-surface-subtle); border-radius: 999px; padding: 4px 12px 4px 10px; font-size: 13px; font-family: inherit; color: var(--c-text-secondary); cursor: pointer; -webkit-tap-highlight-color: transparent; flex: none; } .pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-text-tertiary); flex: none; } .pill-dot.ok { background: var(--c-positive); } .pill-dot.warn { background: var(--c-warning); } .pill-dot.down { background: var(--c-danger); } /* 胶囊下箭头：可展开的仪器暗示（v1.3 二轮） */ .pill-chevron { display: inline-flex; } .pill-chevron svg { width: 11px; height: 11px; opacity: 0.55; } /* ===== 环境仪表 Popover（v1.3 二轮·冷屋 #62）===== 贾维斯仪器语言：发丝线行分隔、微缩大写标签、等宽读数、系统页脚——零新色零装饰图。 层级：modal 40 之下、toast 之上（toast 提到 50 保证任何时刻可见）。 */ .status-popover { position: fixed; top: calc(env(safe-area-inset-top) + 54px); right: 12px; width: min(320px, calc(100vw - 24px)); background: var(--c-surface-solid); border: 1px solid var(--c-border); border-radius: 16px; box-shadow: var(--c-panel-shadow); z-index: 30; display: none; padding: 6px 0 0; } .status-popover.open { display: block; } .sp-row { display: flex; align-items: center; gap: 10px; padding: 9px 16px; } .sp-row + .sp-row { border-top: 1px solid var(--c-border); } /* 失联前读数：整体压暗，不冒充实时（review-plan 发现③） */ .sp-row.stale { opacity: 0.45; } .sp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .sp-label { font-size: 10px; font-weight: 600; letter-spacing: 0.09em; color: var(--c-text-tertiary); } .sp-sub { font-size: 11px; color: var(--c-text-tertiary); } .sp-value { font-size: 13px; color: var(--c-text); flex: none; } .sp-value.mono { font-family: "SF Mono", "Fira Code", ui-monospace, monospace; } .sp-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; padding: 8px 16px; border-top: 1px solid var(--c-border); font-size: 10px; font-weight: 600; letter-spacing: 0.09em; color: var(--c-text-tertiary); } .sp-footer .mono { font-family: "SF Mono", "Fira Code", ui-monospace, monospace; font-weight: 400; } /* ===== 内容区 ===== */ .content { flex: 1; min-height: 0; display: flex; flex-direction: column; } .home, .settings-page { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 16px 16px calc(env(safe-area-inset-bottom) + 24px); } .section-label { display: flex; align-items: baseline; justify-content: space-between; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-text-secondary); margin: 8px 4px 10px; } /* 仪器计数（v1.3 二轮·贾维斯语言）：两位补零、等宽、弱色——数字是读数不是标题 */ .section-count { font-family: "SF Mono", "Fira Code", ui-monospace, monospace; font-size: 11px; font-weight: 400; letter-spacing: 0.08em; color: var(--c-text-tertiary); } /* 页读数行（v1.3 三轮）：微缩标签+值，与仪表读数同语法——页头概要的仪器形态 */ .page-readout { display: flex; align-items: baseline; justify-content: space-between; padding: 2px 4px 10px; } .page-readout .pr-label { font-size: 10px; font-weight: 600; letter-spacing: 0.09em; color: var(--c-text-tertiary); } .page-readout .pr-value { font-family: "SF Mono", "Fira Code", ui-monospace, monospace; font-size: 12px; color: var(--c-text-secondary); } /* 读数行（v1.3 三轮·仪器语言）：微缩键+值，全应用统一语法（详情页/设置卡/owner 卡共用）； 行距由上下文容器微调，语法本身只有这一处 */ .readout-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 0; } .readout-row + .readout-row { border-top: 1px solid var(--c-border); } .readout-label { font-size: 10px; font-weight: 600; letter-spacing: 0.09em; color: var(--c-text-tertiary); flex: none; } .readout-value { font-size: 13px; color: var(--c-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .readout-value.mono { font-family: "SF Mono", "Fira Code", ui-monospace, monospace; } /* 会话详情元信息读数区（#94 标签列定稿）：PROJECT+目录名与下方 CONTEXT 行同语法同缘—— 左右边缘钉 12px 与 dashboard-bar 完全对齐（侧 padding 归零）；值统一 12px 等宽 （层级用光：目录 secondary/时间 tertiary）；PROJECT 与 CONTEXT 恰同 7 字符→值列垂直齐 */ .meta-readout { padding: 2px 0 3px; } .meta-readout:empty { display: none; } .meta-line { display: flex; align-items: baseline; gap: 8px; padding: 1px 12px; min-width: 0; } .meta-dir { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: "SF Mono", "Fira Code", ui-monospace, monospace; font-size: 12px; color: var(--c-text-secondary); } .meta-time { flex: none; margin-left: auto; /* 无目录时（global 会话）时间独撑一行仍右钉 */ font-family: "SF Mono", "Fira Code", ui-monospace, monospace; font-size: 12px; color: var(--c-text-tertiary); } /* ===== v1.6 会话仪表盘（方案 #83）：收起=仪表行 / 展开=全量 panel，仪器语言 ===== */ /* 收起态仪表行：横排读数（CONTEXT%+黑箱点+双模微标+chevron），与 meta-readout 同贴上沿 */ .dashboard-bar { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 12px; margin: 0; border: none; border-top: 1px solid var(--c-border); background: transparent; font: inherit; text-align: left; -webkit-tap-highlight-color: transparent; } .dashboard-bar:active { background: var(--c-bg-raised); } /* 右侧组（#88）：黑箱点+双模微标+chevron 统一推右缘；dot 不再独自 margin-left:auto */ .dash-side { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; } .dash-side svg { width: 13px; height: 13px; color: var(--c-text-tertiary); /* chevronLeft 转 90°=下箭头（可展开引导）；open 转 -90°=上箭头（可收起） */ transform: rotate(90deg); transition: transform 0.2s ease; } .dashboard-bar.open .dash-side svg { transform: rotate(-90deg); } .dash-label { font-size: 10px; font-weight: 600; letter-spacing: 0.09em; color: var(--c-text-tertiary); flex: none; } .dash-value { font-size: 12px; /* #94：与 meta-dir/meta-time 统一值尺寸（头块三行同格） */ color: var(--c-text-secondary); flex: none; } /* 黑箱状态点（tool-dot 同语义语言）：running 呼吸 / ok 绿 / error 红 / 无灰 / stale 压暗 */ .dash-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--c-text-tertiary); } .dash-dot.running { background: var(--c-accent); animation: working-pulse 1.2s ease-in-out infinite; } .dash-dot.ok { background: var(--c-positive); } .dash-dot.error { background: var(--c-danger); } .dash-dot.stale { background: var(--c-text-tertiary); opacity: 0.45; } /* 双模微标（仅开时显）：大写微标签语言 */ .dash-badge { font-size: 9px; font-weight: 600; letter-spacing: 0.08em; color: var(--c-text-tertiary); border: 1px solid var(--c-border); border-radius: 4px; padding: 1px 5px; flex: none; } /* 断流压暗：组级（读数诚实——数据停更不冒充新鲜） */ .dashboard-bar.dimmed { opacity: 0.45; } .dashboard-panel.dimmed .dash-section + * { opacity: 0.6; } /* 展开 panel：全量读数（readout-row 同语法），贴仪表行下方。 长清单（todo 多项/黑箱历史）独立滚动：panel 是 flex 列内非伸缩块，无上限会把 message-list 挤到 0 且自身被裁（真机反馈 #86）——45vh 试验版被否（真机反馈 #87： 剩 1/4 屏露出背后消息流却读不成，不伦不类）→ 通屏化：82dvh 近满屏（顶部留导航+ 仪表行可见、可点回收），dvh 跟随移动端动态视口、vh 作旧浏览器回退。 滑动锁纵向（真机反馈 #88）：内容无横向伸展，touch-action: pan-y 物理锁死浏览器 只认纵向平移手势（8 向拖拽如拖图=pan 未限定+橡皮筋），overflow-x 兜底裁切 */ .dashboard-panel { padding: 2px 4px 4px; border-top: 1px solid var(--c-border); max-height: 82vh; max-height: 82dvh; overflow-y: auto; overflow-x: hidden; touch-action: pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .dashboard-panel .readout-row { padding: 3px 12px; } .dashboard-panel:empty { display: none; } /* 分组分隔微标（SPIRY / TODO）：section-title 同语言弱化（#88 紧凑：上距 10→6px） */ .dash-section { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; color: var(--c-text-tertiary); padding: 6px 12px 1px; } /* 值内小注（来源/相对时间）：弱化不抢读数 */ .dash-note { font-size: 10px; color: var(--c-text-tertiary); margin-left: 6px; } /* 键值读数行（黑箱展开详情）：等宽、密排（#88 紧凑 3→2px） */ .dash-kv { font-size: 11px; color: var(--c-text-secondary); padding: 2px 12px; word-break: break-word; } .dash-kv.mono { font-family: "SF Mono", "Fira Code", ui-monospace, monospace; } .dash-kv.dash-error { color: var(--c-danger); } /* 黑箱历史行：tool-row 读数语法（点开详情块） */ .dash-history-item .tool-row { margin: 0 8px; } /* todo 清单行：状态符号（等宽）+内容；completed/cancelled 压暗；通屏版行距放宽后 #88 回收 5→4px（紧凑优先） */ .dash-todo-item { display: flex; align-items: baseline; gap: 8px; padding: 4px 12px; font-size: 12px; color: var(--c-text-secondary); } .dash-todo-item .dash-todo-mark { flex: none; color: var(--c-text-tertiary); font-size: 10px; } .dash-todo-item .dash-todo-content { word-break: break-word; } .dash-todo-item.completed .dash-todo-content, .dash-todo-item.cancelled .dash-todo-content { color: var(--c-text-tertiary); text-decoration: line-through; } .dash-todo-item.in_progress .dash-todo-mark { color: var(--c-accent); } /* 设置卡内读数行：与卡内边距协调 */ .settings-card .readout-row { padding: 8px 0; } .warn-label { color: var(--c-warning-tag-text); } /* ===== 首页 · 待响应权限 ===== */ .home-permissions { margin-bottom: 8px; } .home-permissions .card { margin-bottom: 8px; } /* ===== 会话卡 ===== */ .session-card { display: flex; align-items: center; gap: 12px; background: var(--c-surface-solid); border: 1px solid var(--c-border); border-radius: 16px; padding: 12px 14px; margin-bottom: 10px; box-shadow: var(--c-panel-shadow); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color 0.15s ease; } .session-card:active { border-color: var(--c-border-strong); } .avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--c-accent-bg); color: var(--c-accent); display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 600; flex: none; } .avatar.busy { animation: avatar-pulse 1.8s ease-in-out infinite; } @keyframes avatar-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--c-accent-border); } 50% { box-shadow: 0 0 0 5px var(--c-accent-border); } } .session-info { flex: 1; min-width: 0; } .session-title { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .session-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-text-secondary); margin-top: 3px; min-width: 0; } .session-dir { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: "SF Mono", "Fira Code", "Cascadia Code", ui-monospace, monospace; font-size: 11px; color: var(--c-text-tertiary); text-align: right; } .badge { font-size: 12px; font-weight: 500; padding: 1px 8px; border-radius: 4px; flex: none; background: var(--c-surface-subtle); color: var(--c-text-secondary); } .badge.busy { background: var(--c-accent-tag-bg); color: var(--c-accent-tag-text); } /* ===== 通用卡片（权限等） ===== */ .card { background: var(--c-surface-solid); border: 1px solid var(--c-border); border-radius: 16px; padding: 14px 16px; margin-bottom: 10px; box-shadow: var(--c-panel-shadow); } .card.disabled { opacity: 0.4; pointer-events: none; } /* 权限卡：警示色左边条——打断信号，与会话卡明确区分 */ .permission-card { border-left: 3px solid var(--c-warning); } .card-title { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-text-secondary); margin-top: 4px; min-width: 0; } /* ===== 会话详情页（全屏沉浸） ===== */ .detail-page { display: flex; flex-direction: column; flex: 1; min-height: 0; } .message-list { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 8px 0; } .load-earlier { display: block; margin: 4px auto 12px; font-size: 13px; font-family: inherit; color: var(--c-accent); background: none; border: 1px solid var(--c-accent-border); border-radius: 12px; padding: 6px 16px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .message-row { margin: 10px 16px; } .message-header { font-size: 12px; font-weight: 600; color: var(--c-text-secondary); margin-bottom: 4px; } .message-row.user { display: flex; flex-direction: column; align-items: flex-end; } .message-row.user .message-header { display: none; } .message-body { max-width: 85%; font-size: 15px; line-height: 1.65; word-break: break-word; } .message-row.assistant .message-body { max-width: none; } .message-row.user .message-body { background: var(--c-surface-subtle); border-radius: 16px; padding: 8px 14px; } .message-meta { margin-top: 2px; font-size: 11px; color: var(--c-text-tertiary); text-align: right; /* 尾部时间戳：消息右下角（v1.2 验收二轮反馈——头部隔断式反直觉） */ min-height: 0; } .message-row.assistant .message-meta { padding-right: 4px; } /* Markdown 渲染区（GFM 式：段内软换行保留） */ .markdown > *:first-child { margin-top: 0; } .markdown > *:last-child { margin-bottom: 0; } .markdown p { margin: 0 0 0.6em; white-space: pre-wrap; } .markdown h2, .markdown h3, .markdown h4 { margin: 1.2em 0 0.5em; letter-spacing: -0.01em; line-height: 1.35; } .markdown h2 { font-size: 1.2em; } .markdown h3 { font-size: 1.08em; } .markdown h4 { font-size: 1em; } .markdown code { font-family: "SF Mono", "Fira Code", "Cascadia Code", ui-monospace, monospace; font-size: 0.88em; background: var(--c-surface-subtle); border: 1px solid var(--c-border); border-radius: 4px; padding: 0.1em 0.35em; } /* 代码块装备（P1-1）：shell=定位上下文；铭牌=语言读数；COPY=就地回执（COPIED/FAILED 1.5s 复原） */ .markdown .code-shell { position: relative; margin: 0.6em 0; } .markdown .code-shell pre { margin: 0; padding-right: 64px; /* 给 COPY 按钮让位，防长行首行被压 */ } .markdown .code-shell.has-lang pre { padding-top: 26px; /* 铭牌让位：语言读数不压代码首行 */ } .markdown .code-lang { position: absolute; top: 8px; left: 14px; z-index: 1; font-size: 10px; letter-spacing: 0.06em; color: var(--c-text-tertiary); pointer-events: none; /* 铭牌是读数不是交互物 */ } .markdown .code-copy { position: absolute; top: 6px; right: 6px; z-index: 1; padding: 3px 8px; background: var(--c-surface-solid); border: 1px solid var(--c-border); border-radius: 6px; font-size: 10px; letter-spacing: 0.06em; color: var(--c-text-secondary); cursor: pointer; -webkit-tap-highlight-color: transparent; } .markdown .code-copy:active { border-color: var(--c-border-strong); color: var(--c-text); } .markdown pre { margin: 0.6em 0; padding: 12px 14px; background: var(--c-surface-subtle); border: 1px solid var(--c-border); border-radius: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .markdown pre code { background: none; border: none; padding: 0; font-size: 0.85em; line-height: 1.5; white-space: pre; } .markdown a { color: var(--c-accent); text-decoration: none; border-bottom: 1px solid var(--c-accent-border); } .markdown ul, .markdown ol { margin: 0.4em 0; padding-left: 1.4em; } .markdown li { margin: 0.15em 0; } .markdown blockquote { margin: 0.6em 0; padding: 2px 0 2px 12px; border-left: 2px solid var(--c-divider); color: var(--c-text-secondary); } .markdown blockquote .markdown > *:first-child { margin-top: 0; } .markdown blockquote .markdown > *:last-child { margin-bottom: 0; } .markdown .table-wrap { margin: 0.6em 0; overflow-x: auto; -webkit-overflow-scrolling: touch; } .markdown table { border-collapse: collapse; font-size: 0.92em; min-width: 100%; } .markdown th, .markdown td { border: 1px solid var(--c-table-row-border); padding: 6px 10px; text-align: left; vertical-align: top; } .markdown th { font-weight: 600; background: var(--c-surface-subtle); white-space: nowrap; } /* busy 工作指示卡（思考/工具调用的预留骨架位） */ .working-card { margin: 10px 16px; max-width: 200px; display: flex; align-items: center; gap: 8px; color: var(--c-text-secondary); font-size: 13px; } .working-dots { display: inline-flex; gap: 4px; } .working-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--c-text-tertiary); animation: working-pulse 1.2s ease-in-out infinite; } .working-dots span:nth-child(2) { animation-delay: 0.2s; } .working-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes working-pulse { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } } /* ===== 工具遥测读数（长城任务 P0-3a；仪器语言：completed 安静收束 / running 呼吸 / error 唯一浮色） ===== */ .tool-trace { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; } .tool-trace:empty { display: none; } .tool-item { display: flex; flex-direction: column; } .tool-row { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 5px 10px; background: var(--c-surface-subtle); border: 1px solid var(--c-border); border-radius: 8px; font-size: 12px; color: var(--c-text-secondary); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 0.15s ease; } .tool-row:active { background: var(--c-border-strong); } .tool-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--c-text-tertiary); align-self: center; } .tool-dot.pulse { animation: working-pulse 1.2s ease-in-out infinite; } .tool-row.error .tool-dot { background: var(--c-danger); } .tool-row.error { border-color: var(--c-danger-border); } .tool-row.error .tool-detail { color: var(--c-danger); } .tool-name { flex: none; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 11px; } .tool-detail { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--c-text-tertiary); } .tool-duration { flex: none; font-size: 11px; color: var(--c-text-tertiary); } /* 展开态：测量记录（INPUT/OUTPUT 等宽，头注：中点分隔安全） */ .tool-detail-block { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 2px; padding: 8px 10px; background: var(--c-surface-subtle); border: 1px solid var(--c-border); border-radius: 8px; } .tool-io-label { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; color: var(--c-text-tertiary); margin-bottom: 3px; } .tool-io-text { margin: 0; font-size: 12px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; color: var(--c-text-secondary); max-height: 320px; overflow-y: auto; } .tool-io-empty { font-size: 12px; color: var(--c-text-tertiary); } .tool-io-note { font-size: 11px; color: var(--c-text-tertiary); font-style: italic; } /* working-card 工作读数（busy + running 工具证据时） */ .working-card { max-width: 280px; } .working-readout { display: inline-flex; align-items: baseline; gap: 6px; } .working-label { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; color: var(--c-text-tertiary); } .working-readout .mono { font-size: 12px; color: var(--c-text-secondary); } .working-count { font-size: 11px; color: var(--c-text-tertiary); } /* ===== 输入区（glass） ===== */ .composer { display: flex; align-items: flex-end; /* 多行时发送键贴底（单行时与居中等价） */ gap: 8px; /* 底衬=安全区全高（Home 指示条后方），与屏幕下缘吻合（原生 edge-to-edge 形态）； 无指示条机型保底 10px。v1.2 验收十轮：原 +10px 叠加在深色下呈纯黑死区观感 */ padding: 10px 12px max(env(safe-area-inset-bottom), 24px); background: var(--c-surface); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid var(--c-border); flex: none; } /* 键盘态（fit() 挂 keyboard-up 于 html）：Home 指示条已被键盘盖住，底衬收窄到与上沿对称的 10px */ html.keyboard-up .composer { padding-bottom: 10px; } /* 多行输入（P1-2）：16px 防 iOS 聚焦缩放（红线）；自动增高由 JS 拨，超高 40vh 封顶内滚防吃满屏 */ .composer .composer-input { flex: 1; min-width: 0; font-size: 16px; line-height: 1.45; font-family: inherit; padding: 9px 14px; border-radius: 16px; border: 1px solid var(--c-border-strong); background: var(--c-surface-solid); color: var(--c-text); resize: none; overflow-y: auto; max-height: 40vh; -webkit-overflow-scrolling: touch; } .composer .composer-input:focus { outline: none; border-color: var(--c-accent); } .composer-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--c-border-strong); background: var(--c-surface-solid); color: var(--c-text-secondary); cursor: pointer; -webkit-tap-highlight-color: transparent; flex: none; } .composer-toggle.active { color: var(--c-accent); border-color: var(--c-accent-border); background: var(--c-accent-bg); } .composer-toggle svg { width: 20px; height: 20px; } /* 命令触发键（#95）：等宽 / 读数（非图标——点击＝头部补 / ，符号即语义）；字形上沉做光学居中修正 */ .composer-toggle.command-trigger { font-family: "SF Mono", "Fira Code", ui-monospace, monospace; font-size: 17px; font-weight: 600; padding-top: 2px; } /* 主操作按钮=墨色单色（浅色近黑底白字/深色白底黑字，同 toast 规约）—— 蓝色回归纯语义点缀（链接/状态），符合「色彩是标点符号不是正文」（v1.2 验收三轮） */ .composer-send { font-size: 15px; font-weight: 500; font-family: inherit; padding: 10px 18px; border-radius: 16px; border: none; background: var(--c-text); color: var(--c-bg); flex: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .composer-send:disabled, .inline-btn:disabled, .composer-toggle:disabled { opacity: 0.4; pointer-events: none; } /* ===== 命令面板（v1.4）：浮层=实底+浅阴影（modal 同语言），出现即用、无入场动画 ===== */ .composer { position: relative; } .command-palette { position: absolute; left: 12px; right: 12px; bottom: calc(100% + 6px); max-height: 264px; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--c-surface-solid); border: 1px solid var(--c-border-strong); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); z-index: 30; } .command-palette .command-row { display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 10px 14px; border: none; background: none; font-family: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; } .command-palette .command-row.static { color: var(--c-text-tertiary); font-size: 13px; cursor: default; } .command-palette .command-row:not(.static):active { background: var(--c-accent-bg); } .command-palette .command-name { font-size: 14px; color: var(--c-text); flex: none; } .command-palette .command-desc { font-size: 12px; color: var(--c-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* 降级一次性淡提示：composer 上缘细字条（平时安静：说过一次就够） */ .command-hint { position: absolute; left: 14px; bottom: calc(100% + 2px); font-size: 11px; color: var(--c-text-tertiary); z-index: 30; pointer-events: none; } /* 回到底部悬浮钮（图标圆钮） */ .jump-latest { position: absolute; right: 16px; bottom: 12px; width: 40px; height: 40px; display: none; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--c-border-strong); background: var(--c-surface-solid); color: var(--c-text-secondary); box-shadow: var(--c-panel-shadow); cursor: pointer; -webkit-tap-highlight-color: transparent; } .jump-latest.visible { display: inline-flex; } .jump-latest svg { width: 20px; height: 20px; } .message-scroll { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; overscroll-behavior: contain; } .warn-note { font-size: 13px; color: var(--c-warning-tag-text); background: var(--c-warning-bg); border: 1px solid var(--c-warning-border); border-radius: 12px; padding: 6px 12px; margin: 8px 12px 0; flex: none; } /* ===== 权限卡 ===== */ .permission-actions { display: flex; gap: 8px; margin-top: 10px; } .permission-actions .inline-btn { flex: 1; padding: 10px 4px; font-size: 14px; } .inline-btn { font-size: 15px; font-weight: 500; font-family: inherit; padding: 10px 18px; border-radius: 12px; border: none; background: var(--c-text); color: var(--c-bg); cursor: pointer; -webkit-tap-highlight-color: transparent; } .inline-btn.danger { background: var(--c-danger); } .inline-btn.ghost { background: var(--c-surface-subtle); color: var(--c-text); border: 1px solid var(--c-border-strong); } .patterns { font-family: "SF Mono", "Fira Code", "Cascadia Code", ui-monospace, monospace; font-size: 13px; color: var(--c-text-secondary); word-break: break-all; } /* ===== 引导页（body 已固定化，gate 自管滚动） ===== */ .gate { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; width: 100%; max-width: 420px; margin: 0 auto; padding: 22vh 20px 32px; } /* 引导页卷标（v1.3 三轮）：刊物卷标语法——产品名作微缩键，学术风与仪器语法双契合 */ .gate-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; color: var(--c-text-tertiary); margin: 0 0 4px; } .gate h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px; } .gate p { color: var(--c-text-secondary); font-size: 14px; } .gate input { width: 100%; font-size: 16px; font-family: inherit; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--c-border-strong); background: var(--c-surface-solid); color: var(--c-text); margin: 12px 0; } .gate input:focus { outline: none; border-color: var(--c-accent); } .gate-form { display: flex; flex-direction: column; margin-top: 8px; } .gate-form .inline-btn { width: 100%; } /* ===== v2 M1 配对页主路径（方案 §3.1）：wordmark 立门户 + 6 位等宽输入 + 状态行 ===== */ .gate-brand { width: 138px; height: 28px; margin: 2px 0 6px; } .gate-pair-input { width: 100%; font-family: "SF Mono", "Fira Code", ui-monospace, monospace; font-size: 28px; font-weight: 600; letter-spacing: 0.3em; text-indent: 0.3em; /* 抵消尾字符 letter-spacing，居中不失衡 */ text-align: center; text-transform: uppercase; padding: 14px 12px; border-radius: 12px; border: 1px solid var(--c-border-strong); background: var(--c-surface-solid); color: var(--c-text); caret-color: var(--c-accent); margin: 14px 0 2px; } .gate-pair-input:focus { outline: none; border-color: var(--c-accent); } .gate-pair-input[readonly] { opacity: 0.55; /* claim 在飞锁输入：压暗即「处理中」读数 */ } .gate .gate-status { min-height: 18px; margin: 6px 0 0; } .gate .gate-status.danger { color: var(--c-danger); } /* legacy 折叠入口：页底一行小字（迁移期负责人自用；Q4 退役线后随退役删除） */ .gate-legacy { margin-top: 36px; display: flex; flex-direction: column; align-items: center; } .gate-legacy-toggle { background: none; border: none; padding: 4px 8px; font-size: 12px; font-family: inherit; color: var(--c-text-tertiary); text-decoration: underline; text-decoration-color: var(--c-border-strong); text-underline-offset: 3px; cursor: pointer; } .gate-legacy-detail { width: 100%; } .gate-legacy-form { margin-top: 12px; } /* ===== v2 M1 主机切换器（方案 §3.2）：读数非 tab——复用状态胶囊形态，光不加色 ===== */ .host-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--c-border); background: var(--c-surface-subtle); border-radius: 999px; padding: 4px 12px 4px 10px; font-size: 13px; font-family: inherit; color: var(--c-text-secondary); cursor: pointer; -webkit-tap-highlight-color: transparent; flex: none; max-width: 40vw; } .host-pill .pill-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .host-popover { padding: 6px 0; } /* 仪器行是按钮：继承字体与背景，整行点按切换 */ .host-row { width: 100%; background: none; border: none; font-family: inherit; text-align: inherit; cursor: pointer; } /* ===== 设置页 ===== */ .settings-section.settings-card { background: var(--c-surface-solid); border: 1px solid var(--c-border); border-radius: 16px; padding: 4px 16px 16px; margin-bottom: 14px; box-shadow: var(--c-panel-shadow); } .settings-section h2 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: var(--c-text-secondary); margin: 14px 0 4px; } .settings-hint { font-size: 13px; color: var(--c-text-secondary); margin: 8px 0; } .settings-section .inline-btn { margin: 6px 0; } .settings-row input { width: 100%; font-size: 16px; font-family: inherit; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--c-border-strong); background: var(--c-surface-solid); color: var(--c-text); } /* 分段控件（设置页主题选择） */ .segmented { display: flex; margin: 8px 0 4px; padding: 2px; background: var(--c-surface-subtle); border-radius: 12px; font-size: 13px; } .segmented .segment { flex: 1; text-align: center; padding: 7px 0; border-radius: 4px; color: var(--c-text-secondary); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 0.15s ease, background 0.15s ease; } .segmented .segment.active { background: var(--c-surface-solid); color: var(--c-text); font-weight: 500; box-shadow: var(--c-panel-shadow); } .diagnostics { font-family: "SF Mono", "Fira Code", "Cascadia Code", ui-monospace, monospace; font-size: 12px; color: var(--c-text-secondary); white-space: pre-wrap; word-break: break-all; } /* 诊断复制：内容右下角小图标，不与刷新钮贴身（v1.2 验收九轮反馈） */ .diagnostics-box { position: relative; } .diagnostics-box .diagnostics { padding-bottom: 34px; } .copy-btn { position: absolute; right: 0; bottom: 0; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 8px; background: none; color: var(--c-text-secondary); cursor: pointer; -webkit-tap-highlight-color: transparent; } .copy-btn:active { background: var(--c-surface-subtle); } .copy-btn svg { width: 18px; height: 18px; } /* ===== toast ===== */ .toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + 24px); background: var(--c-text); color: var(--c-bg); font-size: 14px; padding: 10px 18px; border-radius: 999px; z-index: 50; /* 任何时刻可见：高于仪表 Popover(30) 与 confirm modal(40) */ max-width: 86%; text-align: center; } .empty-note { text-align: center; color: var(--c-text-secondary); font-size: 14px; padding: 48px 20px; } /* ===== v1.3 工作台 ===== */ .wb-attention { margin-bottom: 8px; } .wb-attention-card { border-radius: 12px; padding: 10px 14px; font-size: 14px; font-weight: 500; margin-bottom: 8px; -webkit-tap-highlight-color: transparent; } .wb-attention-card.warn { background: var(--c-warning-bg); border: 1px solid var(--c-warning-border); color: var(--c-warning-tag-text); } .project-grid { display: grid; /* minmax(0)=轨道可收缩：长目录名不再把双列撑爆屏宽（2026-08-16 真机投诉修复） */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-bottom: 14px; } .project-card { min-width: 0; /* grid 子项收窄，配合下行文字省略 */ background: var(--c-surface-solid); border: 1px solid var(--c-border); border-radius: 16px; padding: 12px 14px; box-shadow: var(--c-panel-shadow); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color 0.15s ease; } .project-card:active { border-color: var(--c-border-strong); } .project-card-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 4px; } .project-name { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .project-card-meta { font-size: 12px; color: var(--c-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .section-label.with-action { justify-content: flex-start; gap: 8px; } /* ===== 关注清单（2026-08-16 正向选择）：区头入口 + 配置面板 ===== */ .section-action { margin-left: auto; font-size: 12px; font-family: inherit; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--c-border-strong); background: var(--c-surface-solid); color: var(--c-text-secondary); cursor: pointer; -webkit-tap-highlight-color: transparent; } .attention-overlay { /* 复用 modal-overlay 遮罩，sheet 贴底呈现 */ display: flex; align-items: flex-end; } .attention-sheet { width: 100%; max-height: 82vh; display: flex; flex-direction: column; background: var(--c-surface); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid var(--c-border-strong); border-radius: 20px 20px 0 0; padding: 16px 16px calc(16px + max(env(safe-area-inset-bottom), 12px)); } .attention-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; } .attention-title { margin: 0; font-size: 16px; font-weight: 600; } .attention-sub { font-size: 12px; color: var(--c-text-tertiary); } .attention-search { font-size: 16px; /* iOS 防聚焦缩放红线 */ font-family: inherit; padding: 9px 14px; border-radius: 12px; border: 1px solid var(--c-border-strong); background: var(--c-surface-solid); color: var(--c-text); margin-bottom: 10px; } .attention-search:focus { outline: none; border-color: var(--c-accent); } .attention-rows { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 4px; } .attention-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid transparent; background: none; font-family: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; } .attention-row.attended { background: var(--c-surface-solid); border-color: var(--c-border-strong); } .attention-dot { flex: none; font-size: 10px; color: var(--c-text-tertiary); } .attention-row.attended .attention-dot { color: var(--c-accent); } .attention-names { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .attention-basename { font-size: 14px; font-weight: 500; color: var(--c-text); } .attention-row:not(.attended) .attention-basename { color: var(--c-text-secondary); } .attention-path { font-size: 11px; color: var(--c-text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .attention-count { flex: none; font-size: 12px; color: var(--c-text-tertiary); } /* ===== v1.3 项目选项卡（会话列表顶部） ===== */ .tabs-bar { display: flex; gap: 6px; overflow-x: auto; margin: 2px 0 10px; -webkit-overflow-scrolling: touch; } .tabs-bar:empty { margin: 0; } .tab { flex: none; font-size: 13px; padding: 5px 14px; border-radius: 999px; background: var(--c-surface-subtle); color: var(--c-text-secondary); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 0.15s ease, background 0.15s ease; } .tab.active { background: var(--c-text); color: var(--c-bg); font-weight: 500; } .group-header { cursor: pointer; } /* ===== v1.3 换血管理卡 ===== */ .admin-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0; } .admin-row-title { font-size: 15px; font-weight: 500; } .admin-row-hint { font-size: 12px; color: var(--c-text-secondary); } .switch { flex: none; width: 46px; height: 28px; border-radius: 999px; border: none; background: var(--c-border-strong); position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.15s ease; } .switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 999px; background: var(--c-surface-solid); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); transition: left 0.15s ease; } .switch.on { background: var(--c-positive); } .switch.on::after { left: 20px; } .switch:disabled { opacity: 0.4; pointer-events: none; } /* ===== v1.3 confirm modal（零 innerHTML、安全默认=取消） ===== */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); display: flex; align-items: center; justify-content: center; z-index: 40; padding: 24px; } .modal-card { background: var(--c-surface-solid); border-radius: 16px; padding: 20px; max-width: 340px; width: 100%; box-shadow: var(--c-panel-shadow); } .modal-title { margin: 0 0 8px; font-size: 17px; } .modal-body { margin: 0 0 16px; font-size: 14px; color: var(--c-text-secondary); } .modal-actions { display: flex; gap: 10px; } .modal-btn { flex: 1; font-size: 15px; font-weight: 500; font-family: inherit; padding: 10px 0; border-radius: 12px; border: none; background: var(--c-surface-subtle); color: var(--c-text); cursor: pointer; -webkit-tap-highlight-color: transparent; } .modal-btn.danger { background: var(--c-danger); color: #ffffff; } /* ===== v1.3 设置页输入框 ===== */ .settings-input { width: 100%; /* 16px 是 iOS 红线（真机验收实证）：15px 聚焦触发系统自动放大且 standalone PWA 不回弹—— 顶部操作区被顶出屏＋webview pan 越界露裸底（黑幕）。gate/composer 输入框均已 16px。 */ font-size: 16px; font-family: inherit; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--c-border-strong); background: var(--c-surface-subtle); color: var(--c-text); margin: 6px 0; } .settings-input:focus { outline: none; border-color: var(--c-accent); background: var(--c-surface-solid); }