/* 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: 12px;
  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: 6px; 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 (min-width: 761px) {
  :root[data-sidebar-collapsed="true"] .app:has(.version-badge:not(.hidden)) { --page-head-height: 94px; }
}
@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: 8px;
  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;
}

/* ⋯ 会话操作菜单（仅窄屏工作台视图出现） */
.kebab-wrap { position: relative; flex: none; }
.kebab-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  width: 168px;
  background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px;
  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: 7px;
  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; }

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

/* ---- 侧栏：固定头尾，只有中间的会话列表滚动 ---- */
.sidebar {
  --side-hover: color-mix(in srgb, var(--text) 5%, transparent);
  --side-active: color-mix(in srgb, var(--amber) 10%, 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: 9px;
  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: 8px;
  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: 8px;
  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: 32px; padding: 0 14px;
  display: flex; align-items: center; justify-content: space-between;
  color: var(--muted); font-size: 11px;
}
.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: 7px;
  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); }
.side-tools { display: flex; align-items: center; gap: 2px; }
.side-tool { flex: none; width: 34px; height: 34px; padding: 0; justify-content: center; }
.side-tool .side-item-label, #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: 6px; 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: 8px;
  margin-top: 6px; padding: 6px 0 0 4px; border-top: 1px solid var(--line);
}
.side-user { margin-left: auto; }
.side-user:hover, .side-user[aria-expanded="true"] { background: transparent; }
.side-user[aria-expanded="true"] { color: var(--amber); }
.side-user-menu {
  position: fixed; z-index: 90; width: 232px; max-width: calc(100vw - 24px);
  padding: 6px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); 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: 4px; background: var(--panel-2); color: var(--muted); font-size: 10px; line-height: 20px; }
.side-logout {
  display: flex; align-items: center; gap: 8px;
  width: 100%; height: 34px; padding: 0 8px;
  border: 0; border-radius: 6px; text-align: left;
  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: 7px; }
.theme-options button {
  flex: none; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 5px; 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 { position: absolute; right: 5px; bottom: 5px; display: flex; }
.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(--amber);
  box-shadow: 0 0 6px color-mix(in srgb, var(--amber) 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: 3px;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  padding: 2px 4px 6px;
}
.session-card {
  flex: none; width: 100%; height: 56px; min-width: 0;
  display: flex; align-items: center; gap: 11px;
  color: var(--text); text-align: left;
  background: transparent; border: 0; border-radius: 8px;
  padding: 0 10px; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.session-card:hover { background: var(--side-hover); }
.session-card.active { background: var(--side-active); box-shadow: inset 3px 0 var(--amber); }
.session-card .agent-avatar { border: 0; background: color-mix(in srgb, var(--brand) 9%, transparent); }
.session-card .agent-avatar .led { border-color: var(--panel); }
.session-card.active .agent-avatar .led { border-color: var(--side-active); }
.sc-body { flex: 1; min-width: 0; }
.sc-name {
  display: block; margin: 0 0 3px;
  font-size: 13px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.session-card.active .sc-name { color: var(--amber); }
.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-sleep {
  color: var(--amber);
  opacity: 0.85;
}

/* ---- 抽屉遮罩：仅窄屏显示 ---- */
.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;
    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: 42px; }
  .side-foot { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .side-collapse { display: none; }
  .side-tool { width: 40px; height: 40px; }
  .theme-options button { width: 36px; height: 40px; }
  .side-logout { height: 44px; }
  .side-user-menu { position: absolute; width: auto; left: 0; right: 0; bottom: calc(100% + 8px); }

}
@media (min-width: 761px) {
  .kebab-wrap { display: none; } /* 桌面端会话操作在工作台头部 */
}
/* 收起偏好在首屏脚本中恢复；窄屏始终展示完整抽屉。 */
@media (min-width: 761px) {
  :root[data-sidebar-collapsed="true"] .sidebar { width: 68px; }
  :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, .sc-body, .conn-text, .session-empty-text) { display: none; }
  :root[data-sidebar-collapsed="true"] .side-create { padding: 16px 12px 12px; }
  :root[data-sidebar-collapsed="true"] .side-new { padding: 0; justify-content: center; }
  :root[data-sidebar-collapsed="true"] .side-sessions { padding: 0 4px; }
  :root[data-sidebar-collapsed="true"] .session-list { padding: 2px 4px 6px; }
  :root[data-sidebar-collapsed="true"] .session-card { height: 46px; padding: 0; justify-content: center; }
  :root[data-sidebar-collapsed="true"] .side-foot { padding-left: 8px; padding-right: 8px; }
  :root[data-sidebar-collapsed="true"] :is(.side-item, .conn-latency) { padding: 0; justify-content: center; }
  :root[data-sidebar-collapsed="true"] .side-tools { flex-direction: column; }
  :root[data-sidebar-collapsed="true"] .conn-latency { flex: none; width: 100%; height: 20px; }
  :root[data-sidebar-collapsed="true"] .side-collapse { margin: 0; width: 36px; height: 36px; }
  :root[data-sidebar-collapsed="true"] .side-collapse svg { transform: rotate(180deg); }
  :root[data-sidebar-collapsed="true"] .side-tool { width: 38px; }
  :root[data-sidebar-collapsed="true"] .side-preferences { flex-direction: column; gap: 2px; padding: 4px 0 0; margin-top: 4px; }
  :root[data-sidebar-collapsed="true"] .side-user { margin-left: 0; }
  :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; }
  :root[data-sidebar-collapsed="true"] .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 (prefers-reduced-motion: reduce) {
  .sidebar, .scrim, .side-new, .side-item, .session-card, .side-collapse svg, .side-user-menu, .side-logout, .theme-options button { transition: none; }
}