/* shell：登录页 + 应用外壳（顶栏 / 侧栏 / 抽屉 / 主区视图切换）。 */

/* ---- 登录：牛皮纸点阵衬底 + 盒仔迎宾 ---- */
.login {
  height: 100vh;
  height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  background-image: radial-gradient(color-mix(in srgb, var(--amber) 7%, transparent) 1px, transparent 1.4px);
  background-size: 26px 26px;
}
.login-card {
  width: min(380px, 90vw);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: calc(12px * var(--radius-scale));
  padding: 30px 32px 34px;
  display: flex; flex-direction: column; gap: 14px;
  text-align: center;
}
.mascot-login { width: 138px; margin: 0 auto; }
.login-card .wordmark { justify-content: center; }
.login-hint { color: var(--muted); margin: 0; font-size: 13px; }
.login-error { color: var(--red); margin: 0; font-size: 13px; }
.login-field { position: relative; }
.login-field input { width: 100%; min-height: 44px; padding-left: 38px; }
.login-field-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none;
}
.login-password input { padding-right: 46px; }
.login-password-toggle {
  position: absolute; right: 0; top: 0; bottom: 0; width: 44px;
  padding: 0; border: 0; border-radius: calc(6px * var(--radius-scale)); background: transparent; color: var(--muted);
}
.login-password-toggle:hover { color: var(--amber); }
.login-password-toggle:focus-visible { outline-offset: -3px; }

/* ---- 外壳：顶栏（仅窄屏）+ 侧栏 + 主区 ---- */
.app {
  --page-head-height: 68px;
  display: flex; flex-direction: column;
  height: 100vh;
  height: 100dvh; /* iOS 地址栏伸缩时保持底部输入区可见 */
  /* 兜底：外壳是定高应用，任何内部溢出都不许把整个文档撑出窗口滚动条
   * （clip 不产生新的滚动容器；fixed 定位的面板/弹层不受影响） */
  overflow: clip;
}
/* 页面标题栏与侧栏的版本入口保持等高；收起侧栏时版本入口隐藏，高度不跟着变，
 * 展开/收起不会让主区标题栏上下跳。 */
.app:has(.version-badge:not(.hidden)) { --page-head-height: 76px; }
@media (max-height: 600px) {
  .app { --page-head-height: 52px; }
}

.topbar {
  display: none;
  flex: none;
  align-items: center; gap: 10px;
  padding: 9px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.menu-btn {
  width: 36px; height: 36px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel-2);
  border: 1px solid var(--line); border-radius: calc(8px * var(--radius-scale));
  color: var(--text); padding: 0;
  font-size: 17px; line-height: 1;
}
.menu-btn svg { display: block; }
.tb-title {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 8px;
}
.tb-ico { display: inline-flex; flex: none; }
.topbar-title {
  font-weight: 600; font-size: 14.5px;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ⋯ 操作菜单的外观：窄屏顶栏、工作台头部、列表行共用（弹层由 js/menu.js 生成） */
.kebab-wrap { position: relative; flex: none; }
.kebab-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  width: 168px;
  background: var(--panel-solid);
  border: 1px solid var(--line); border-radius: calc(10px * var(--radius-scale));
  padding: 5px;
  box-shadow: var(--shadow-lg);
}
.kebab-menu button {
  display: flex; align-items: center; gap: 9px;
  width: 100%; text-align: left;
  background: none; border: none; border-radius: calc(7px * var(--radius-scale));
  color: var(--text); font-size: 13.5px;
  padding: 9px 11px;
}
.kebab-menu button:hover { background: var(--panel-2); }
.kebab-menu button:disabled { color: var(--muted); opacity: 0.55; cursor: not-allowed; }
.kebab-menu button.danger { color: var(--red); }
.kebab-menu .sep { height: 1px; background: var(--line); margin: 4px 6px; }
/* 图标槽位：固定宽度让三行文字左边缘对齐，图标由 sessions.js 注入 */
.kebab-menu .glyph {
  flex: none; width: 18px;
  display: inline-flex; align-items: center; justify-content: center;
}
.kebab-menu .glyph svg { display: block; }
/* js/menu.js 的通用「⋯」弹层：挂在 body 上 fixed 定位，坐标由脚本写入 */
.kebab-menu.menu-pop {
  position: fixed; right: auto; z-index: 140;
  width: auto; min-width: 168px; max-width: calc(100vw - 16px);
}
.kebab-menu.menu-pop button { white-space: nowrap; }
@media (pointer: coarse) {
  .kebab-menu.menu-pop button { min-height: 40px; }
}

.shell { flex: 1; min-height: 0; display: flex; }

/* ---- 侧栏：固定头尾，只有中间的会话列表滚动 ---- */
:root[data-theme="light"] .sidebar {
  --session-active-bg: var(--panel-2);
  --session-active-line: var(--line);
}
.sidebar {
  --side-hover: color-mix(in srgb, var(--text) 5%, transparent);
  --side-active: color-mix(in srgb, var(--amber) 10%, var(--panel));
  /* 选中的空间行：暗色下 --panel-2 与侧栏底几乎同色，改用文字色混出更亮的底和描边 */
  --session-active-bg: color-mix(in srgb, var(--text) 11%, var(--panel));
  --session-active-line: color-mix(in srgb, var(--text) 24%, var(--panel));
  width: 260px; min-height: 0; flex: none;
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: width 0.2s ease;
}
.side-head {
  height: var(--page-head-height); flex: none;
  display: flex; align-items: center; gap: 8px;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
}
.side-brand {
  min-width: 0; gap: 10px;
  background: none; border: none; padding: 0;
  text-align: left; cursor: pointer;
  font-size: 15px; font-weight: 600; letter-spacing: 0.1em;
}
.side-brand:hover { color: var(--text-hi); }
.side-brand-name { white-space: nowrap; }
.side-mark {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border-radius: calc(9px * var(--radius-scale));
  background: color-mix(in srgb, var(--amber) 9%, transparent);
}
.side-brand .mark { width: 24px; height: 24px; margin: 0; }
.side-close {
  display: none; align-items: center; justify-content: center;
  margin-left: auto; width: 36px; height: 36px; flex: none;
  padding: 0; border: 0; border-radius: calc(8px * var(--radius-scale));
  color: var(--muted); background: transparent;
}
.side-close:hover { color: var(--text); background: var(--side-hover); }
.side-create { flex: none; padding: 16px 12px 12px; }
.side-new {
  width: 100%; height: 40px;
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  padding: 0 12px; border: 1px solid var(--amber-dim); border-radius: calc(8px * var(--radius-scale));
  color: var(--amber); background: var(--side-active);
  font-size: 13px; font-weight: 600; white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.side-new svg { flex: none; }
.side-new:hover { background: color-mix(in srgb, var(--amber) 17%, var(--panel)); border-color: var(--amber); }
.side-sessions {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  padding: 0 8px;
}
/* 计数紧跟标题；按基线对齐，等宽数字才不会比中文标题显得上浮 */
.side-section-head {
  flex: none; height: 28px; padding: 5px 14px 0;
  display: flex; align-items: baseline; gap: 6px;
  color: var(--muted); font-size: 11px; line-height: 18px;
}
/* 搜索框 + 状态筛选同一行；搜索框前置放大镜，外框画在 label 上，点图标也能聚焦输入 */
.session-filters { flex: none; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 6px; padding: 0 4px 6px; }
.session-search {
  display: flex; align-items: center; gap: 6px;
  min-width: 0; height: 32px; padding: 0 8px;
  color: var(--muted); background: var(--field);
  border: 1px solid var(--line); border-radius: calc(6px * var(--radius-scale));
  cursor: text; transition: border-color 140ms ease;
}
.session-search:hover { border-color: color-mix(in srgb, var(--muted) 60%, var(--line)); }
.session-search:focus-within { border-color: var(--amber-dim); outline: 2px solid var(--amber); outline-offset: 1px; }
.session-search .ui-icon { flex: none; }
.session-search input { flex: 1; width: 100%; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; font-size: 12px; line-height: 30px; }
.session-search input:focus-visible { outline: none; }
.session-filter-row { display: flex; align-items: center; gap: 4px; max-width: 112px; }
.session-filter-row :is(select, .select-trigger) { flex: 1; width: 74px; min-width: 0; min-height: 32px; font-size: 12px; }
.session-filter-row .select-trigger { gap: 6px; padding: 0 8px 0 10px; border-radius: calc(6px * var(--radius-scale)); line-height: 30px; }
.session-filter-row button { flex: none; min-height: 32px; }
.session-search-open.side-item { display: none; }
.side-label { font-size: 11px; letter-spacing: 0.06em; }
.side-count { font-family: var(--mono); font-size: 10px; }
.side-foot { position: relative; flex: none; padding: 8px 12px 12px; }
.side-nav {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 0 0; border-top: 1px solid var(--line);
}
.side-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; height: 38px; min-width: 0; text-align: left;
  background: none; border: 0; border-radius: calc(7px * var(--radius-scale));
  color: var(--muted); padding: 0 12px; font-size: 13px;
  transition: color 0.15s ease, background 0.15s ease;
}
.side-item-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-item:hover { color: var(--text); background: var(--side-hover); }
.side-item.active {
  color: var(--amber); background: var(--side-active);
  box-shadow: inset 3px 0 var(--amber);
}
/* 用户弹层中的余额与账号信息、退出操作一起展示。 */
.my-quota { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px; margin-bottom: 4px; }
.mq-label { font-size: 12px; color: var(--muted); }
.mq-num { font-size: 13px; color: var(--text); }
.my-quota .mq-num.empty { color: var(--red); font-weight: 600; }
#btn-usagelog.quota-blocked > .glyph { color: var(--red); }
/* 管理入口两列带字；收起侧栏时变成一列图标（见下方 data-sidebar-collapsed 规则） */
.side-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.side-tool { height: 34px; padding: 0 8px; gap: 8px; font-size: 12.5px; }
#tunnel-text { display: none; }
.side-tool.active { box-shadow: none; }
.side-collapse {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 28px; height: 32px; margin-left: auto;
  border: 0; border-radius: calc(6px * var(--radius-scale)); padding: 0;
  background: transparent; color: var(--muted);
}
.side-collapse:hover { background: var(--side-hover); color: var(--text); }
.side-collapse svg { display: block; transition: transform 0.2s ease; }
.sidebar :is(button, [tabindex]):focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
.side-item .glyph {
  flex: none; width: 18px;
  display: inline-flex; align-items: center; justify-content: center;
}
.side-item .glyph svg { display: block; }

/* 底栏左侧主题、右侧头像；用户信息与退出放在头像弹层中。 */
.side-preferences {
  position: relative; display: flex; align-items: center; gap: 6px;
  margin-top: 6px; padding: 6px 0 0; border-top: 1px solid var(--line);
}
/* 用户按钮：头像 + 用户名 + 余额，占满主题切换左侧的空间 */
.side-user { flex: 1; width: auto; height: 40px; padding: 0 8px; min-width: 0; }
.side-user[aria-expanded="true"] { color: var(--text); background: var(--side-hover); }
.side-user-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.side-user-label { color: var(--text); font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.side-user-quota { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.side-user-quota.empty { color: var(--red); }
.side-user-conn { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 8px 4px; }
.side-user-conn .conn-latency { flex: none; padding: 0; height: 28px; font-size: 12px; }
.side-user-menu {
  position: fixed; z-index: 90; width: 248px; max-width: calc(100vw - 24px);
  padding: 6px; border: 1px solid var(--line); border-radius: calc(10px * var(--radius-scale));
  background: var(--panel-solid); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(4px);
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.side-user-menu.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.side-user-info {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 8px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line);
}
.side-user-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; line-height: 20px; overflow-wrap: anywhere; }
.side-user-role { flex: none; padding: 0 6px; border-radius: calc(4px * var(--radius-scale)); background: var(--panel-2); color: var(--muted); font-size: 10px; line-height: 20px; }
/* 退出登录靠右，与上面各行右侧的数值、当前选择对齐 */
.side-logout {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  width: 100%; height: 34px; padding: 0 8px;
  border: 0; border-radius: calc(6px * var(--radius-scale)); text-align: right;
  background: transparent; color: var(--muted); font-size: 12px;
  transition: color 0.15s ease, background 0.15s ease;
}
.side-logout .glyph { display: flex; flex: none; }
.side-logout:hover { color: var(--red); background: var(--side-hover); }
.theme-options { display: flex; flex: none; gap: 2px; padding: 2px; background: var(--panel-2); border-radius: calc(7px * var(--radius-scale)); }
.theme-options button {
  flex: none; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: calc(5px * var(--radius-scale)); background: transparent;
  color: var(--muted);
  transition: color 0.15s ease, background 0.15s ease;
}
.theme-options button:hover { color: var(--text); }
.theme-options button.active { background: var(--panel); color: var(--amber); box-shadow: var(--shadow-sm); }
.theme-options .glyph { display: flex; }
.side-preferences svg.ic-theme { display: none; width: 15px; height: 15px; }
.theme-options [data-theme-option="system"] svg.ic-system,
.theme-options [data-theme-option="light"] svg.ic-sun,
.theme-options [data-theme-option="dark"] svg.ic-moon,
:root[data-theme-mode="system"] .side-theme-cycle svg.ic-system,
:root[data-theme-mode="light"] .side-theme-cycle svg.ic-sun,
:root[data-theme-mode="dark"] .side-theme-cycle svg.ic-moon { display: block; }
.side-theme-cycle { display: none; }

/* ---- 内网隧道入口：右侧状态灯 + 文案（在线时点亮） ---- */
#btn-tunnel { position: relative; }
.tunnel-state { display: flex; margin-left: auto; }
.tunnel-state .t-dot { width: 5px; height: 5px; box-shadow: 0 0 0 2px var(--panel); }
.t-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line);
  flex: none;
}
.t-dot.on,
.t-dot.good {
  background: var(--green);
  box-shadow: 0 0 6px color-mix(in srgb, var(--green) 55%, transparent);
}
.t-dot.warn {
  background: var(--warn);
  box-shadow: 0 0 6px color-mix(in srgb, var(--warn) 55%, transparent);
}
.t-dot.bad {
  background: var(--red);
  box-shadow: 0 0 6px color-mix(in srgb, var(--red) 55%, transparent);
}

/* ---- 连接延迟：到服务器的往返延迟，绿/黄/红三档（状态灯 + 读数） ---- */
.conn-latency {
  display: flex; align-items: center; gap: 8px;
  flex: 1; min-width: 0; height: 34px; padding: 0 10px;
  font-size: 10px; color: var(--muted);
}
.conn-latency .t-dot { width: 6px; height: 6px; box-shadow: none; }
.conn-latency .conn-text { color: var(--muted); white-space: nowrap; }

/* ---- 会话列表：定高行，列表在剩余空间内独立滚动 ---- */
.session-list {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  padding: 2px 4px 6px;
}
/* 与桌面版同一套行样式：裸 Agent 图标 + 名称/账号两行 + 行尾状态圆点；选中是浅底加细框。
 * 头像瓦片与角灯只在收起侧栏时出现（见下方 collapsed 规则）。 */
.session-card {
  position: relative;
  flex: none; width: 100%; height: 44px; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  color: var(--text); text-align: left;
  background: transparent; border: 1px solid transparent; border-radius: calc(6px * var(--radius-scale));
  padding: 0 9px; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.session-card:hover { background: var(--side-hover); }
.session-card.active { background: var(--session-active-bg); border-color: var(--session-active-line); }
/* 新出现的空间：底色从强调色淡回原样（shell.ts 的 newCard），只从 from 写起，终点就是当前底色 */
.session-card.flash { animation: card-flash 1.2s var(--ease-out); }
@keyframes card-flash { from { background-color: color-mix(in srgb, var(--accent) 26%, transparent); } }
.session-card .agent-avatar { width: 20px; height: 20px; border: 0; border-radius: 0; background: none; }
.session-card .agent-avatar .led { display: none; border-color: var(--panel); }
.session-card.active .agent-avatar .led { border-color: var(--session-active-bg); }
.sc-body { flex: 1; min-width: 0; line-height: 1.35; }
.sc-name {
  display: block; margin: 0 0 1px;
  font-size: 13px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.session-card .meta {
  display: block; font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.session-empty { margin: 10px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.session-empty-icon { display: none; }

/* 运行状态：账号后的文字与行尾圆点同色。运行中=绿，休眠=警告黄（空闲自动停机，
 * 与手动停止区分开），已停止只有灰点、不写文字。 */
.sc-state.run { color: var(--green); }
.sc-state.idle { color: var(--warn); }
.sc-dot { flex: none; width: 6px; height: 6px; margin-right: 2px; border-radius: 50%; background: var(--muted); }
.sc-dot.run { background: var(--green); }
.sc-dot.idle { background: var(--warn); }
.sc-initial { display: none; }

/* ---- 抽屉遮罩：仅窄屏显示 ---- */
.scrim {
  display: none;
  position: fixed; inset: 0; z-index: 40;
  background: var(--scrim);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.view { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ---- 窄屏 ---- */
@media (max-width: 760px) {
  .topbar { display: flex; }
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 50;
    width: min(300px, 84vw);
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    background: var(--panel-solid); /* 抽屉压在正文上 */
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: translateX(0); }
  .scrim { display: block; }
  .scrim:not(.show) { pointer-events: none; }
  .scrim.show { opacity: 1; }

  .side-close { display: inline-flex; }
  .side-head { padding: 0 16px; }
  .side-item { height: 40px; }
  .side-foot { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .side-collapse { display: none; }
  .side-tool { height: 40px; }
  .side-user { height: 40px; }
  .theme-options button { width: 34px; height: 34px; }
  .side-logout { height: 40px; }
  .side-user-menu { position: absolute; width: auto; left: 0; right: 0; bottom: calc(100% + 8px); }

}
@media (min-width: 761px) {
  .kebab-wrap { display: none; } /* 桌面端会话操作在工作台头部 */
}
/* 收起偏好在首屏脚本中恢复；窄屏始终展示完整抽屉。
 * 窄栏是一条居中的图标列：新建、搜索、空间头像、管理入口、用户与主题都用同一个
 * --rail-item 见方，不再各自撑满不同宽度。版本入口收起时不显示（见 updates.css）。 */
@media (min-width: 761px) {
  :root[data-sidebar-collapsed="true"] .sidebar { width: 68px; --rail-item: 36px; }
  :root[data-sidebar-collapsed="true"] .side-head { padding: 0; justify-content: center; }
  :root[data-sidebar-collapsed="true"] :is(.side-brand, .side-item-label, .side-section-head, .session-filters, .sc-body, .session-empty-text) { display: none; }
  :root[data-sidebar-collapsed="true"] .side-collapse { margin: 0; width: var(--rail-item); height: var(--rail-item); border-radius: calc(8px * var(--radius-scale)); }
  :root[data-sidebar-collapsed="true"] .side-collapse svg { transform: rotate(180deg); }
  :root[data-sidebar-collapsed="true"] .side-create { display: flex; justify-content: center; padding: 14px 0 8px; }
  :root[data-sidebar-collapsed="true"] .side-new { width: var(--rail-item); height: var(--rail-item); min-height: 0; padding: 0; justify-content: center; border-radius: calc(9px * var(--radius-scale)); }
  :root[data-sidebar-collapsed="true"] .session-search-open {
    display: flex; flex: none; align-self: center; justify-content: center;
    width: var(--rail-item); height: var(--rail-item); padding: 0; margin-bottom: 6px; border-radius: calc(8px * var(--radius-scale));
  }
  /* 有筛选条件时放大镜染琥珀提示「列表已过滤」；见方按钮上不画左侧竖条 */
  :root[data-sidebar-collapsed="true"] .session-search-open.active { box-shadow: none; }
  :root[data-sidebar-collapsed="true"] .side-sessions { padding: 0; }
  :root[data-sidebar-collapsed="true"] .session-list { gap: 2px; padding: 2px 0 6px; scrollbar-width: none; }
  /* 68px 的窄栏里滚动条会把头像挤偏；滚轮与触控板照常能滚 */
  :root[data-sidebar-collapsed="true"] .session-list::-webkit-scrollbar { display: none; }
  /* 整行仍是点按区域，但不画底和框：悬停、选中都落在头像瓦片本身，避免「框里套框」。
   * 选中 = 品牌色描边环 + 贴栏左缘的指示条。 */
  :root[data-sidebar-collapsed="true"] .session-card {
    height: 44px; padding: 0; justify-content: center;
    background: none; border: 0; border-radius: 0;
  }
  :root[data-sidebar-collapsed="true"] .session-card::before {
    content: ""; position: absolute; left: 0; top: 50%;
    width: 3px; height: 18px; margin-top: -9px; border-radius: 0 calc(3px * var(--radius-scale)) calc(3px * var(--radius-scale)) 0;
    background: color-mix(in srgb, var(--text) 55%, var(--panel)); opacity: 0; transform: scaleY(0.4);
    transition: opacity 0.15s ease, transform 0.15s ease;
  }
  :root[data-sidebar-collapsed="true"] .session-card.active::before { opacity: 1; transform: none; }
  :root[data-sidebar-collapsed="true"] .session-card .agent-avatar {
    width: var(--rail-item); height: var(--rail-item); border-radius: calc(10px * var(--radius-scale));
    background: color-mix(in srgb, var(--brand) 10%, var(--panel));
    transition: background 0.15s ease, box-shadow 0.15s ease;
  }
  :root[data-sidebar-collapsed="true"] .session-card:hover .agent-avatar { background: color-mix(in srgb, var(--brand) 17%, var(--panel)); }
  :root[data-sidebar-collapsed="true"] .session-card.active .agent-avatar {
    background: color-mix(in srgb, var(--brand) 16%, var(--panel));
    box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px color-mix(in srgb, var(--brand) 75%, var(--panel));
  }
  :root[data-sidebar-collapsed="true"] .session-card:focus-visible { outline: none; }
  :root[data-sidebar-collapsed="true"] .session-card:focus-visible .agent-avatar { outline: 2px solid var(--amber); outline-offset: 5px; }
  /* 角灯：运行中绿、休眠黄，已停止不亮灯、首字变淡。窄栏里不做呼吸光晕，
   * 那圈半透明的扩散在小尺寸上只会糊成一团灰边。外圈与侧栏同色，像从瓦片上挖出来。 */
  :root[data-sidebar-collapsed="true"] .session-card .agent-avatar .led {
    display: block; right: -3px; bottom: -3px; width: 10px; height: 10px;
    border: 2px solid var(--panel); background: var(--muted); animation: none; box-shadow: none;
  }
  :root[data-sidebar-collapsed="true"] .session-card.st-run .agent-avatar .led { background: var(--green); }
  :root[data-sidebar-collapsed="true"] .session-card.st-idle .agent-avatar .led { background: var(--warn); }
  :root[data-sidebar-collapsed="true"] .session-card.st-off .agent-avatar .led { display: none; }
  :root[data-sidebar-collapsed="true"] .sc-dot { display: none; }
  :root[data-sidebar-collapsed="true"] .session-card .agent-ico { display: none; }
  :root[data-sidebar-collapsed="true"] .sc-initial {
    display: block; font-size: 14px; font-weight: 600; line-height: 1; color: var(--brand);
  }
  :root[data-sidebar-collapsed="true"] .session-card.st-off .sc-initial { opacity: 0.55; }
  :root[data-sidebar-collapsed="true"] .side-foot { padding-left: 8px; padding-right: 8px; }
  :root[data-sidebar-collapsed="true"] .side-item { padding: 0; justify-content: center; }
  :root[data-sidebar-collapsed="true"] .side-tools { grid-template-columns: 1fr; justify-items: center; }
  :root[data-sidebar-collapsed="true"] :is(.side-tool, .side-user) { flex: none; width: var(--rail-item); height: var(--rail-item); border-radius: calc(8px * var(--radius-scale)); }
  :root[data-sidebar-collapsed="true"] .tunnel-state { position: absolute; right: 6px; bottom: 6px; margin: 0; }
  :root[data-sidebar-collapsed="true"] .side-preferences { flex-direction: column; gap: 2px; padding: 6px 0 0; margin-top: 6px; }
  :root[data-sidebar-collapsed="true"] .theme-options { display: none; }
  :root[data-sidebar-collapsed="true"] .side-theme-cycle { display: flex; }
  :root[data-sidebar-collapsed="true"] .session-empty { margin: 12px auto; }
  :root[data-sidebar-collapsed="true"] .session-empty-icon { display: block; }
}
/* 短窗口保留固定菜单，并尽量给会话留下可用高度。 */
@media (max-height: 600px) {
  .side-head { height: 52px; }
  .side-create { padding-top: 8px; padding-bottom: 6px; }
  .side-section-head { height: 26px; }
  .side-foot { padding-top: 4px; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  .side-nav { padding: 4px 0; }
  .side-item { height: 32px; }
}
@media (min-width: 761px) and (max-height: 600px) {
  :root[data-sidebar-collapsed="true"] .sidebar { --rail-item: 32px; }
  :root[data-sidebar-collapsed="true"] .side-create { padding-top: 8px; padding-bottom: 6px; }
  :root[data-sidebar-collapsed="true"] .session-card { height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .session-card.flash { animation: none; }
  .sidebar, .scrim, .side-new, .side-item, .session-card, .session-card::before, .session-card .agent-avatar, .side-collapse svg, .side-user-menu, .side-logout, .theme-options button { transition: none; }
}

/* Local language preference: shared with the standard select control. */
.language-control { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; color: var(--muted); font-size: 12px; }
.language-control > span { flex-shrink: 0; }
.language-control select, .language-control .select-trigger { width: 150px; min-width: 0; }
.language-control .select-trigger { min-height: 32px; padding: 5px 10px; gap: 8px; font-size: 12px; line-height: 18px; }
.login-language { align-self: center; margin-top: 2px; }
@media (pointer: coarse) { .language-control .select-trigger { min-height: 34px; } }
/* 用户弹层里的语言、风格（pref-picker.ts）：与余额、连接延迟同样一行，右侧是当前选择
 * 加向右箭头；展开时箭头转向上，全部选项在这一行上方弹出（窗口太矮时改到下方）。 */
.pref-picker { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; padding: 2px 4px 2px 8px; }
.pref-picker-title { flex: none; font-size: 12px; color: var(--muted); }
.pref-trigger {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: 30px; padding: 0 4px 0 8px;
  border: 0; border-radius: calc(6px * var(--radius-scale));
  background: transparent; color: var(--amber); font-size: 12px; font-weight: 500;
  transition: background 0.15s ease;
}
.pref-current { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pref-trigger svg { flex: none; color: var(--muted); transition: transform 0.16s ease, color 0.15s ease; }
.pref-trigger:hover, .pref-trigger[aria-expanded="true"] { background: var(--panel-2); }
.pref-trigger:hover svg, .pref-trigger[aria-expanded="true"] svg { color: var(--text); }
.pref-trigger[aria-expanded="true"] svg { transform: rotate(-90deg); }
.pref-picker.below .pref-trigger[aria-expanded="true"] svg { transform: rotate(90deg); }
.pref-menu {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 4px); z-index: 2;
  display: flex; flex-direction: column; gap: 2px; padding: 4px;
  border: 1px solid var(--line); border-radius: calc(8px * var(--radius-scale));
  background: var(--panel-solid); box-shadow: var(--shadow-lg);
  --pref-from: 4px;
  transition: opacity var(--dur-fast) var(--ease-out), translate var(--dur-fast) var(--ease-out), display var(--dur-fast) allow-discrete;
}
.pref-picker.below .pref-menu { top: calc(100% + 4px); bottom: auto; --pref-from: -4px; }
/* 加上全站 / 个人主题后可能很长：限高滚动，菜单项不被压扁 */
.pref-menu { max-height: min(60vh, 440px); overflow-y: auto; overscroll-behavior: contain; }
.pref-menu > * { flex: none; }
.pref-menu-group { padding: 8px 8px 2px; font-size: 11px; color: var(--muted); letter-spacing: .02em; }
.pref-menu-sep { height: 1px; margin: 3px 4px; background: var(--line); }
.pref-menu-action svg { flex: none; color: var(--muted); }
.pref-menu-action:is(:hover, :focus-visible) svg { color: var(--text); }
/* 收起时多留一个过渡时长再 display:none（普通元素的离散过渡各浏览器都有，不像顶层弹层要 overlay） */
.pref-menu[hidden] { display: none; opacity: 0; translate: 0 var(--pref-from); pointer-events: none; transition-timing-function: var(--ease-in); }
@starting-style { .pref-menu:not([hidden]) { opacity: 0; translate: 0 var(--pref-from); } }
/* 鼠标从箭头跨过空隙进菜单时仍算在这一行里 */
.pref-picker.open::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 6px; }
.pref-picker.open.below::before { top: 100%; bottom: auto; }
.pref-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 32px; padding: 5px 8px;
  border: 0; border-radius: calc(6px * var(--radius-scale)); text-align: left;
  background: transparent; color: var(--muted); font-size: 12px;
}
.pref-menu-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pref-menu-item:is(:hover, :focus-visible) { color: var(--text); background: var(--panel-2); }
.pref-menu-item.active { color: var(--text); font-weight: 600; background: color-mix(in srgb, var(--amber) 12%, transparent); }
.pref-menu-check { flex: none; color: var(--amber); visibility: hidden; }
.pref-menu-item.active .pref-menu-check { visibility: visible; }
/* 风格色卡：色值见 skins.css 的 --swatch-*，菜单里放大一号 */
.pref-swatch {
  flex: none; width: 12px; height: 12px; border-radius: calc(3px * var(--radius-scale));
  background: var(--swatch, var(--panel-2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 18%, transparent);
}
.pref-swatch[hidden] { display: none; }
.pref-menu-item .pref-swatch { width: 18px; height: 18px; border-radius: calc(4px * var(--radius-scale)); }
@media (pointer: coarse) {
  .pref-trigger { height: 36px; }
  .pref-menu-item { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .pref-trigger svg { transition: none; }
}
html[lang="en"] .side-tools { grid-template-columns: 1fr; }

@media (max-width: 760px) {
  /* 触屏抽屉：点按区域略放大；输入框字号 16px，避免 iOS 聚焦时自动放大页面 */
  .session-search { height: 36px; }
  .session-search input { font-size: 16px; line-height: 34px; }
  .session-filter-row :is(select, .select-trigger) { min-height: 36px; font-size: 14px; line-height: 34px; }
  .session-filter-row button { min-height: 36px; }
  .session-card { height: 44px; }
}