@jacksontian/kite-server 0.4.0 → 0.5.0

package/web/style.css

@@ -0,0 +1,486 @@
+/**
+ * Kite 控制台单页应用样式（视觉层像素级对齐 mwt：同一套色板/尺寸/组件样式，见 .mwt-src 参照）：
+ * 移动端与 PC 端共用一份 HTML，触屏差异（按键工具条等）用媒体查询
+ */
+
+:root {
+  --radius: 6px;
+  --radius-sm: 4px;
+  --transition: 150ms ease;
+}
+
+/* mwt 色板（dark）：--bg/--panel/--line 等旧名保留给业务语义（状态色/表单），组件外观走 mwt 变量 */
+[data-theme="dark"], :root:not([data-theme]) {
+  --bg-primary: #0c0e14;
+  --bg-secondary: #151824;
+  --bg-tertiary: #1c2035;
+  --bg-toolbar: #121520;
+  --bg-hover: #252a3d;
+  --bg-active: #2d3352;
+  --accent: #6c8cff;
+  --accent-hover: #8aa4ff;
+  --shortcut-terminal-accent: #6c8cff;
+  --shortcut-navigation-accent: #48c7a6;
+  --shortcut-window-accent: #c587ff;
+  --text-primary: #d4d8e8;
+  --text-secondary: #9aa3bc;
+  --text-dim: #6f788f;
+  --border: #252a3d;
+  --pane-border-idle: #1e2333;
+  --danger: #e05560;
+  --danger-hover: #ff6b76;
+  --terminal-bg: #0a0c12;
+  --pane-header: #141725;
+}
+
+[data-theme="light"] {
+  --bg-primary: #f0f2f5;
+  --bg-secondary: #e4e7ec;
+  --bg-tertiary: #d8dce4;
+  --bg-toolbar: #ffffff;
+  --bg-hover: #dde0e8;
+  --bg-active: #cdd2de;
+  --accent: #4a6cf7;
+  --accent-hover: #3955d4;
+  --shortcut-terminal-accent: #4a6cf7;
+  --shortcut-navigation-accent: #1f9d7a;
+  --shortcut-window-accent: #8c5cf6;
+  --text-primary: #1a1d2e;
+  --text-secondary: #5a6178;
+  --text-dim: #9098b0;
+  --border: #d0d5e0;
+  --pane-border-idle: #c5cad6;
+  --danger: #d43d4e;
+  --danger-hover: #c02838;
+  --terminal-bg: #ffffff;
+  --pane-header: #f5f6f9;
+}
+
+/* 业务状态色（与 mwt 无关的既有语义，保持不变） */
+:root {
+  --bg: var(--bg-primary); --panel: var(--bg-secondary); --line: var(--border);
+  --text: var(--text-primary); --dim: var(--text-secondary);
+  --ok: #22c55e; --err: #ef4444; --warn: #f59e0b;
+  --term-bg: var(--terminal-bg);
+  --head: var(--pane-header);
+}
+:root[data-theme="light"] { --ok: #16a34a; --err: #dc2626; --warn: #d97706; }
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+html, body {
+  height: 100%;
+  overflow: hidden;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "PingFang SC", sans-serif;
+  font-size: 13px;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  height: 100dvh;
+}
+
+/* ---------- 单页骨架：topbar 吸顶（mwt #toolbar：42px、bg-toolbar、1px 底边） ---------- */
+#topbar {
+  flex: none; position: relative;
+  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
+  min-height: 42px; padding: 4px 12px;
+  padding-top: max(4px, env(safe-area-inset-top));
+  background: var(--bg-toolbar); border-bottom: 1px solid var(--border);
+  gap: 8px;
+}
+.tb-left, .tb-right {
+  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; flex: 1;
+}
+.tb-right { justify-content: flex-end; gap: 4px; }
+
+#hd-logo { width: 16px; height: 16px; flex: none; }
+#hd-title { font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--text-primary); margin-right: 4px; }
+
+/* 新建会话：mwt #btn-new-terminal（accent 实心、白字、+ 图标） */
+#hdr-new-session {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 5px 14px; background: var(--accent); color: #fff;
+  border: none; border-radius: var(--radius);
+  font-size: 12px; font-weight: 500; cursor: pointer;
+  transition: background var(--transition); white-space: nowrap;
+}
+#hdr-new-session:hover { background: var(--accent-hover); }
+#hdr-new-session:disabled { opacity: .5; cursor: default; }
+#hdr-new-session .ic { width: 12px; height: 12px; }
+
+/* Worker 状态簇：Worker 下拉 + 在线状态 + 连接通道 合并为一个胶囊（mwt 分段容器样式） */
+#worker-cluster {
+  display: inline-flex; align-items: stretch; min-width: 0; height: 30px;
+  background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius);
+  overflow: hidden;
+}
+#worker-cluster:focus-within { border-color: var(--accent); }
+#worker-cluster > * + * { border-left: 1px solid var(--border); }
+#hdr-worker {
+  width: auto; max-width: min(24vw, 140px); height: 100%; font-size: 12px; padding: 0 6px; cursor: pointer;
+  background: transparent; color: var(--text-secondary); border: none;
+  white-space: nowrap; text-overflow: ellipsis;
+}
+#hdr-worker:hover { background: var(--bg-hover); color: var(--text-primary); }
+#hdr-worker:focus { outline: none; }
+#worker-status, #conn-mode {
+  display: inline-flex; align-items: center; padding: 0 6px;
+  color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+#worker-status { font-size: 12px; max-width: min(22vw, 100px); }
+#conn-mode { font-size: 11px; max-width: 12vw; }
+#conn-mode.realtime, #worker-status.online { color: var(--ok); }
+#conn-mode.polling { color: var(--warn); }
+#worker-status.offline { color: var(--err); }
+
+/* 项目目录下拉 + 右上角图标钮：mwt 工具条按钮（30px、bg-secondary、1px 边、圆角 6） */
+#hdr-project, #hdr-theme, #hdr-fullscreen, #hdr-settings {
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+  height: 30px; padding: 0 8px;
+  background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius);
+  color: var(--text-secondary); font-size: 12px; cursor: pointer;
+  transition: all var(--transition); white-space: nowrap;
+}
+#hdr-theme { width: 30px; padding: 0; }
+#hdr-project { width: auto; max-width: 40vw; text-overflow: ellipsis; }
+#hdr-project:disabled { opacity: .5; cursor: default; }
+#hdr-project:hover:not(:disabled), #hdr-theme:hover, #hdr-fullscreen:hover, #hdr-settings:hover {
+  background: var(--bg-hover); color: var(--text-primary);
+}
+#hdr-project:focus, #hdr-theme:focus, #hdr-fullscreen:focus, #hdr-settings:focus {
+  outline: none; border-color: var(--accent);
+}
+
+/* 终端布局切换器：mwt .layout-switcher（分段组，活动段 bg-active + accent 字） */
+#term-layout-btns {
+  display: inline-flex; align-items: stretch;
+  background: var(--bg-secondary); border-radius: var(--radius); border: 1px solid var(--border);
+  overflow: hidden;
+}
+#term-layout-btns button {
+  display: flex; align-items: center; justify-content: center; gap: 5px;
+  padding: 5px 10px; background: transparent; color: var(--text-secondary);
+  border: none; font-size: 12px; cursor: pointer;
+  transition: all var(--transition); white-space: nowrap;
+}
+#term-layout-btns button:not(:last-child) { border-right: 1px solid var(--border); }
+#term-layout-btns button:hover { background: var(--bg-hover); color: var(--text-primary); }
+#term-layout-btns button.active { background: var(--bg-active); color: var(--accent); }
+#term-layout-btns .ic { width: 16px; height: 16px; flex-shrink: 0; }
+
+/* ---------- 会话 tab 条：仅「标签页」布局且有会话时显示（mwt #tab-bar：34px、bg-toolbar、1px 底边） ---------- */
+#tabs {
+  flex: none; display: flex; align-items: flex-end;
+  height: 34px; padding: 0 8px;
+  background: var(--bg-toolbar); border-bottom: 1px solid var(--border);
+}
+#tab-list {
+  flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 2px;
+  overflow-x: auto;
+}
+#tab-list::-webkit-scrollbar { height: 2px; }
+#tab-list::-webkit-scrollbar-thumb { background: var(--text-dim); border-radius: 1px; }
+
+.term-tab {
+  display: flex; align-items: center; gap: 8px;
+  padding: 6px 14px;
+  background: var(--bg-secondary); color: var(--text-secondary);
+  border: 1px solid var(--border); border-bottom: none;
+  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+  font-size: 12px; cursor: pointer; transition: all var(--transition);
+  white-space: nowrap; min-width: 0; max-width: 180px; flex: none; user-select: none;
+}
+.term-tab:hover { background: var(--bg-hover); color: var(--text-primary); }
+.term-tab.active { background: var(--terminal-bg); color: var(--accent); border-color: var(--border); }
+.term-tab .tt-title { overflow: hidden; text-overflow: ellipsis; }
+.term-tab.pending { color: var(--warn); }
+.term-tab.pending.active { color: var(--warn); }
+.term-tab.ended { opacity: .6; }
+/* 活动圆点：新输出标记（mwt 活动点为 accent 色 + 呼吸动画） */
+.term-tab .tt-dot {
+  flex: none; width: 6px; height: 6px; border-radius: 50%;
+  background: var(--accent); display: none;
+}
+.term-tab.dirty .tt-dot { display: block; animation: activity-pulse 1.2s ease-in-out infinite; }
+.term-tab .tt-close {
+  display: flex; align-items: center; justify-content: center;
+  width: 16px; height: 16px; flex: none; border: none; background: none; padding: 0;
+  border-radius: var(--radius-sm); color: var(--text-dim); font-size: 14px; line-height: 1;
+  cursor: pointer; transition: all var(--transition);
+}
+.term-tab .tt-close:hover { background: var(--danger); color: #fff; }
+
+@keyframes activity-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.2; }
+}
+
+/* ---------- 工作台 ---------- */
+#content { flex: 1; min-height: 0; display: flex; flex-direction: column; }
+#view-main {
+  flex: 1; min-height: 0; display: flex; flex-direction: column;
+  position: relative; background: var(--bg-primary); overflow: hidden;
+}
+#workspace { flex: 1; min-height: 0; display: flex; flex-direction: column; }
+
+/* 终端容器：mwt #terminal-container（2px 缝隙，窗格自带 1px 边） */
+#term-body { flex: 1; min-height: 0; position: relative; background: var(--bg-primary); }
+#term-body.tiled {
+  display: grid; gap: 2px; padding: 2px;
+  grid-auto-rows: minmax(0, 1fr);
+}
+#term-body.tiled[data-layout='grid'] { grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
+#term-body.tiled[data-layout='columns'] {
+  grid-auto-flow: column;
+  grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr));
+}
+#term-body.tiled[data-layout='rows'] { grid-template-columns: minmax(0, 1fr); }
+
+/* 终端窗格：mwt .terminal-pane（1px 闲边、圆角 4、聚焦段 accent 边 + 外圈光） */
+.term-pane {
+  position: absolute; inset: 0; display: none; flex-direction: column;
+  background: var(--terminal-bg); overflow: hidden;
+}
+.term-pane.active { display: flex; }
+.term-pane.minimized { display: none !important; }
+#term-body.tiled .term-pane {
+  position: relative; inset: auto; display: flex; min-width: 0; min-height: 0;
+  border: 1px solid var(--pane-border-idle); border-radius: var(--radius-sm);
+  transition: border-color var(--transition), box-shadow var(--transition);
+}
+#term-body.tiled .term-pane.active {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
+  z-index: 1;
+}
+#term-body.tiled .term-pane.active .tp-head {
+  background: color-mix(in srgb, var(--accent) 12%, var(--pane-header));
+  border-bottom-color: color-mix(in srgb, var(--accent) 35%, var(--border));
+}
+#term-body.tiled .term-pane.active .tp-title { color: var(--text-primary); font-weight: 500; }
+
+#term-body.maxed .term-pane:not(.maxed) { display: none !important; }
+#term-body.maxed .term-pane.maxed { display: flex; position: absolute; inset: 0; min-height: 0; }
+#term-body.maxed.tiled .term-pane.maxed { border: none; border-radius: 0; }
+
+/* 标签页布局：窗格无框无角（mwt .layout-tabs），头部整条隐藏（标题/关闭由 tab 条承接） */
+#term-body[data-layout='tabs'] .term-pane { border-radius: 0; border: none; box-shadow: none; }
+#term-body[data-layout='tabs'] .term-pane.active { box-shadow: inset 0 0 0 1px var(--accent); }
+#term-body[data-layout='tabs'] .tp-head { display: none; }
+
+/* 窗格头部：mwt .pane-header（28px、pane-header 底、1px 底边） */
+.tp-head {
+  display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px;
+  background: var(--pane-header); border-bottom: 1px solid var(--border);
+  flex: none; user-select: none;
+  transition: background var(--transition), border-color var(--transition);
+}
+.tp-title {
+  font-size: 11px; color: var(--text-secondary);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30%;
+  transition: color var(--transition), font-weight var(--transition);
+}
+.tp-status { flex: 1; font-size: 11px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tp-min, .tp-max, .tp-close {
+  display: flex; align-items: center; justify-content: center;
+  width: 18px; height: 18px; flex: none; padding: 0;
+  background: transparent; border: none; border-radius: var(--radius-sm);
+  color: var(--text-dim); font-size: 13px; line-height: 1; cursor: pointer;
+  transition: all var(--transition);
+}
+.tp-min:hover, .tp-max:hover { background: var(--bg-hover); color: var(--text-primary); }
+.tp-close { font-size: 14px; }
+.tp-close:hover { background: var(--danger); color: #fff; }
+.tp-cancel {
+  flex: none; font-size: 11px; padding: 1px 8px; border-radius: var(--radius-sm); cursor: pointer;
+  background: none; color: var(--warn); border: 1px solid var(--warn);
+}
+.tp-cancel:hover { background: color-mix(in srgb, var(--warn) 12%, transparent); }
+.tp-cancel:disabled { opacity: .5; cursor: default; }
+/* 终端正文：mwt .terminal-body（4px 内边距） */
+.tp-term { flex: 1; min-height: 0; padding: 4px; }
+.tp-term .xterm { height: 100%; }
+/* xterm 视口底色与主题一致，避免 vendor 默认 #000 与画布色差 */
+.tp-term .xterm-viewport { overflow-y: auto !important; background-color: var(--terminal-bg) !important; }
+
+/* 空态：mwt #empty-state（logo + 应用名 + 快捷键列表 + 操作按钮） */
+#term-empty {
+  position: absolute; inset: 0; z-index: 10;
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: 20px; color: var(--text-secondary); background: var(--bg-primary);
+}
+#term-empty .empty-state-logo { display: flex; }
+#term-empty .empty-state-logo img, #term-empty .empty-state-logo svg { width: 40px; height: 40px; }
+.empty-state-app-name { font-size: 16px; font-weight: 600; opacity: 0.7; letter-spacing: 0.5px; }
+.empty-state-shortcuts, .empty-state-layouts {
+  display: flex; flex-direction: column; gap: 6px; min-width: 260px;
+}
+.empty-state-section {
+  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
+  opacity: 0.5; margin-bottom: 2px;
+}
+.empty-state-row {
+  display: flex; justify-content: space-between; align-items: center;
+  font-size: 13px; opacity: 0.75; position: relative; padding-left: 14px;
+  --shortcut-accent: var(--shortcut-terminal-accent);
+}
+.empty-state-row::before {
+  content: ''; position: absolute; left: 0; top: 50%;
+  width: 6px; height: 6px; border-radius: 999px; transform: translateY(-50%);
+  background: color-mix(in srgb, var(--shortcut-accent) 80%, white);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--shortcut-accent) 16%, transparent);
+}
+.empty-state-row[data-shortcut-kind="navigation"] { --shortcut-accent: var(--shortcut-navigation-accent); }
+.empty-state-row[data-shortcut-kind="window"] { --shortcut-accent: var(--shortcut-window-accent); }
+.empty-state-row kbd {
+  font-family: inherit; font-size: 11px;
+  color: color-mix(in srgb, var(--shortcut-accent) 48%, var(--text-primary));
+  background: color-mix(in srgb, var(--shortcut-accent) 12%, var(--bg-secondary));
+  border: 1px solid color-mix(in srgb, var(--shortcut-accent) 28%, var(--border));
+  border-radius: 999px; padding: 2px 8px; opacity: 0.9;
+  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--shortcut-accent) 20%, transparent);
+}
+.empty-state-layout-list { font-size: 13px; opacity: 0.75; }
+.empty-state-actions {
+  display: flex; align-items: center; justify-content: center; gap: 10px;
+  margin-top: 8px; flex-wrap: wrap;
+}
+#empty-new-session {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 6px 16px; font-size: 13px;
+  background: var(--bg-secondary); color: var(--text-primary);
+  border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;
+}
+#empty-new-session:hover { background: var(--bg-hover); }
+
+/* 触屏按键工具条（手机无物理键盘）：仅 (pointer: coarse) 显示 */
+#term-bar { display: none; align-items: center; gap: 6px; padding: 8px; background: var(--bg-toolbar); border-top: 1px solid var(--border); }
+#term-bar button {
+  min-width: 44px; padding: 9px 0; font-size: 13px; border-radius: var(--radius);
+  background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border);
+}
+#term-bar-status { flex: 1; font-size: 11px; color: var(--text-dim); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* 手机键盘代理：藏在屏幕外承接击键 */
+#term-input { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; opacity: .01; border: none; }
+
+/* ---------- 页面级状态栏：mwt #statusbar（22px、bg-toolbar、1px 顶边、11px dim 字） ---------- */
+#status-bar {
+  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  height: calc(22px + env(safe-area-inset-bottom));
+  padding: 0 12px env(safe-area-inset-bottom);
+  background: var(--bg-toolbar); border-top: 1px solid var(--border);
+  font-size: 11px; color: var(--text-dim); user-select: none; white-space: nowrap;
+}
+.sb-left, .sb-right { display: flex; align-items: center; gap: 12px; min-width: 0; }
+.sb-left { flex: 1; }
+#tf-active { overflow: hidden; text-overflow: ellipsis; }
+#tf-hints { overflow: hidden; text-overflow: ellipsis; }
+
+/* 最小化栏：mwt #minimized-bar（停靠图标：bg-tertiary、1px 边、圆角 4、11px 字，活动点亮 accent） */
+#minimized-bar { display: flex; align-items: center; gap: 4px; }
+.min-icon {
+  display: flex; align-items: center; gap: 4px; padding: 1px 6px;
+  background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: var(--radius-sm);
+  font-size: 11px; color: var(--text-secondary); cursor: pointer;
+  white-space: nowrap; flex-shrink: 0;
+}
+.min-icon:hover { background: var(--bg-hover); color: var(--text-primary); }
+.min-icon.dirty { border-color: var(--accent); }
+.min-icon .mi-title { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
+.min-icon .mi-dot {
+  display: none; width: 6px; height: 6px; border-radius: 50%;
+  background: var(--accent); flex-shrink: 0;
+}
+.min-icon.dirty .mi-dot { display: block; }
+#min-restore-all {
+  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
+  width: 16px; height: 16px; padding: 0;
+  background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm);
+  color: var(--text-secondary); cursor: pointer;
+}
+#min-restore-all:hover { background: var(--bg-hover); color: var(--text-primary); }
+
+/* 明文 HTTP 部署的风险提示（仅非 localhost 的 http: 环境显示） */
+#http-warn {
+  flex: none;
+  background: color-mix(in srgb, var(--danger) 12%, transparent);
+  border: 1px solid var(--danger); color: var(--danger);
+  border-radius: var(--radius); padding: 8px 12px; font-size: 12px; line-height: 1.6; margin: 8px 12px 0;
+}
+
+/* 设置下拉面板（topbar「设置」入口）：mwt 弹层/模态风格 */
+#settings-pop {
+  position: absolute; right: 12px; top: calc(100% + 4px); z-index: 1000;
+  width: 320px; max-width: calc(100vw - 24px);
+  background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius);
+  padding: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.25);
+}
+#settings-pop label { margin-top: 0; }
+#secret-state { font-size: 12px; color: var(--ok); margin-top: 8px; }
+.secret-row { display: flex; gap: 8px; margin-top: 4px; }
+.secret-row input { flex: 1; }
+#btn-eye {
+  flex: none; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius);
+  background: var(--bg-tertiary); color: var(--text-secondary); font-size: 12px; cursor: pointer;
+}
+#btn-eye:hover { background: var(--bg-hover); color: var(--text-primary); }
+#btn-eye.on { color: var(--accent); border-color: var(--accent); }
+
+label { display: block; font-size: 12px; color: var(--text-secondary); margin: 10px 0 4px; }
+input, textarea, select {
+  width: 100%; background: var(--bg-tertiary); color: var(--text-primary);
+  border: 1px solid var(--border); border-radius: var(--radius-sm);
+  padding: 8px 10px; font-size: 13px; font-family: inherit;
+}
+input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }
+
+/* 滚动条：mwt 同款（8px、dim 滑块） */
+::-webkit-scrollbar { width: 8px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--text-dim); border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }
+
+#toast {
+  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%);
+  background: rgba(0,0,0,.8); color: #fff; padding: 8px 16px; border-radius: var(--radius);
+  font-size: 13px; opacity: 0; transition: opacity .2s; pointer-events: none;
+}
+.hidden { display: none !important; }
+
+/* 图标：内联 SVG sprite（自包含，不走 CDN），currentColor 随按钮文字变色 */
+.ic { width: 14px; height: 14px; flex: none; }
+#topbar button, .secret-row button { display: inline-flex; align-items: center; gap: 5px; }
+
+/* ---------- PC（宽屏 + 精确指针）：留白放宽 ---------- */
+@media (min-width: 768px) and (pointer: fine) {
+  #topbar { padding-left: 16px; padding-right: 16px; }
+  #tabs { padding-left: 12px; padding-right: 12px; }
+  label { margin: 12px 0 5px; }
+  #http-warn { padding: 10px 14px; margin: 8px 16px 0; }
+  #btn-eye { padding: 0 14px; }
+  #toast { padding: 9px 18px; }
+}
+
+/* ---------- 触屏（手机/平板）：按键工具条上场，快捷键提示让位 ---------- */
+@media (pointer: coarse) {
+  #term-bar { display: flex; }
+  #tf-hints { display: none; }
+}
+
+/* ---------- 中等宽度（<1536px）：topbar 太挤——品牌文字与布局按钮文字让位（图标+tooltip 保留），
+   保住左区控件（含「新建会话」）整行排下 ---------- */
+@media (max-width: 1535px) {
+  #hd-title { display: none; }
+  #term-layout-btns button { padding: 5px 8px; }
+  #term-layout-btns button .bl { display: none; }
+}
+
+/* ---------- 窄屏：状态栏收紧间距 ---------- */
+@media (max-width: 640px) {
+  #status-bar { padding-left: 8px; padding-right: 8px; gap: 8px; }
+  .sb-left, .sb-right { gap: 8px; }
+}