/* web-console/css/style.css — 极简样式（通知列表 + 视频区 + 状态色） */

:root {
  --bg: #0f1419;
  --panel: #1a212b;
  --panel-2: #222b38;
  --text: #e6edf3;
  --muted: #8b98a5;
  --primary: #2f81f7;
  --danger: #f85149;
  --ok: #3fb950;
  --warn: #d29922;
  --border: #2d3744;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
    'Microsoft YaHei', sans-serif;
  font-size: 14px;
}

/* ------------------------------- 顶部状态条 ------------------------------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.brand {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.status {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

.status--on {
  background: rgba(63, 185, 80, 0.15);
  color: var(--ok);
}

.status--off {
  background: rgba(248, 81, 73, 0.15);
  color: var(--danger);
}

.status--reconnect {
  background: rgba(210, 153, 34, 0.15);
  color: var(--warn);
}

/* ------------------------------ 全局状态提示 ------------------------------ */
.global-status {
  min-height: 20px;
  padding: 6px 20px;
  font-size: 13px;
  color: var(--muted);
}

.global-status.is-error {
  color: var(--danger);
}

.global-status.is-info {
  color: var(--primary);
}

/* --------------------------------- 视图切换 -------------------------------- */
.view {
  display: none;
  padding: 20px;
}

.view--active {
  display: block;
}

/* ------------------------------ 通知中心头部 ------------------------------ */
.notify-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.notify-head h2 {
  margin: 0;
  font-size: 18px;
}

.notify-tools {
  display: flex;
  gap: 8px;
  align-items: center;
}

.id-input {
  width: 140px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 14px;
  letter-spacing: 2px;
  text-align: center;
}

.id-input:focus {
  outline: none;
  border-color: var(--primary);
}

/* -------------------------------- 按钮 ----------------------------------- */
.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.btn:hover {
  opacity: 0.85;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn--primary {
  background: var(--primary);
  color: #fff;
}

.btn--danger {
  background: var(--danger);
  color: #fff;
}

/* ------------------------------ 申请列表 -------------------------------- */
.request-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.request-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.request-item.is-new {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(47, 129, 247, 0.25);
  animation: flash 1.2s ease;
}

@keyframes flash {
  0% {
    background: rgba(47, 129, 247, 0.18);
  }
  100% {
    background: var(--panel);
  }
}

.req-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.req-alias {
  font-size: 15px;
  font-weight: 600;
}

.req-note {
  font-size: 13px;
  color: var(--muted);
}

.req-sub {
  font-size: 12px;
  color: var(--muted);
}

.req-timer {
  font-variant-numeric: tabular-nums;
  color: var(--warn);
}

.req-timer.is-expired {
  color: var(--danger);
}

.req-actions {
  flex-shrink: 0;
}

.empty-hint {
  margin-top: 20px;
  color: var(--muted);
  text-align: center;
}

/* --------------------------- 历史记录 Tab ------------------------------ */
.history-tabs {
  display: flex;
  gap: 8px;
  margin: 4px 0 16px;
}

.tab-btn {
  padding: 7px 18px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tab-btn:hover {
  color: var(--text);
  border-color: var(--primary);
}

.tab-btn.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* --------------------------- 历史记录表格 ------------------------------ */
.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--panel);
  border-radius: 8px;
  overflow: hidden;
}

.history-table th,
.history-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.history-table thead th {
  background: var(--panel-2);
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
}

.history-table tbody tr:hover {
  background: var(--panel-2);
}

.history-table td.col-time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

.badge.ok {
  background: rgba(63, 185, 80, 0.15);
  color: var(--ok);
}

.badge.warn {
  background: rgba(210, 153, 34, 0.15);
  color: var(--warn);
}

.badge.muted {
  background: rgba(139, 152, 165, 0.15);
  color: var(--muted);
}

/* ------------------------------ 会话视图 -------------------------------- */
.session-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 16px;
}

/* ---------------- 顶栏会话状态胶囊（2026-09-11） ----------------
 * 连接 ID + 状态短文案常驻顶栏；完整信息（连接 ID / 状态 / 网络提示）
 * 悬浮在 title 提示中，不再占用会话页布局空间。 */
.session-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 320px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--border, rgba(125, 125, 125, 0.25));
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  cursor: default;
}

.session-chip-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}

.session-chip-dot.is-ok {
  background: var(--ok, #3fb950);
}

.session-chip-dot.is-busy {
  background: #d29922;
}

.session-chip-dot.is-err {
  background: var(--danger, #f85149);
}

.session-chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------- 视频区 --------------------------------- */
.video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.remote-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  cursor: crosshair;
  touch-action: none;
}

/* 全屏时视频容器铺满屏幕 */
.video-wrap:fullscreen {
  width: 100vw;
  height: 100vh;
  border-radius: 0;
  border: none;
}

.video-wrap:fullscreen .remote-video {
  cursor: crosshair;
}

.video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 15px;
  pointer-events: none;
}

.video-placeholder.is-hidden {
  display: none;
}

/* ------------------------------ 顶部栏右侧 ------------------------------ */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 顶栏全局全屏切换按钮（2026-09-11）：与整体风格一致的面板小按钮，
 * 图标随状态切换（⛶ 进入 / ❐ 退出）；移动端放大到 40px 触控目标。 */
.page-fs-btn {
  flex: none;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 17px;
  line-height: 1;
  color: inherit;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.page-fs-btn:hover {
  border-color: #58a6ff;
}

.page-fs-btn.is-on {
  background: rgba(88, 166, 255, 0.15);
  border-color: #58a6ff;
}

.page-fs-btn:active {
  transform: scale(0.94);
}

@media (max-width: 640px) {
  .page-fs-btn {
    width: 40px;
    height: 40px;
    font-size: 19px;
  }
}

/* 顶栏右侧的控制台版本徽标 */
.console-version {
  font-size: 12px;
  color: #06b6d4;
  padding: 3px 10px;
  border: 1px solid rgba(6, 182, 212, .45);
  border-radius: 10px;
  white-space: nowrap;
  letter-spacing: .3px;
}

/* 登录页：控制台版本（青色，区别于被控端灰色版本） */
.login-version-tag--console { color: #06b6d4; }
.login-version-tag--console.is-ready { opacity: 1; }

.user-area {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-name {
  font-size: 13px;
  color: var(--muted);
}

.btn--small {
  padding: 5px 12px;
  font-size: 13px;
}

/* ------------------------------ 移动端软键盘 ------------------------------ */
.soft-keyboard {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 8px 12px;
  background: rgba(15, 20, 25, 0.92);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(4px);
}

.soft-keyboard.is-hidden {
  display: none;
}

.sk-row {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.sk-row--ctrl {
  margin-top: 2px;
}

.sk-key {
  flex: 1 1 0;
  min-width: 0;
  padding: 12px 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 13px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: background 0.1s ease;
}

.sk-key:active {
  background: var(--primary);
  color: #fff;
}

.sk-key--wide {
  flex: 2 1 0;
}

.sk-key.is-active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.btn-admin {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
}

/* ------------------------------ 登录遮罩 -------------------------------- */
.login-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.72);
  z-index: 1000;
}

.login-overlay.is-open {
  display: flex;
}

.login-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 320px;
  padding: 32px 28px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.login-brand {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}

.login-sub {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  margin-top: -6px;
}

.login-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 14px;
}

.login-input:focus {
  outline: none;
  border-color: var(--primary);
}

.login-btn {
  width: 100%;
}

.login-error {
  display: none;
  font-size: 13px;
  color: var(--danger);
  text-align: center;
  min-height: 16px;
}

/* 登录卡片底部的「下载被控端」入口（客户无需登录即可获取） */
.login-version-tag {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.4;
  color: #8b97a7;
  text-align: center;
  word-break: break-all;
  opacity: 0;
  transition: opacity .2s ease;
}
.login-version-tag.is-ready { opacity: 1; }
.login-version-tag:hover { color: #c3ccd9; }
.login-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.login-download {
  display: block;
  text-align: center;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--primary);
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.login-download:hover {
  border-color: var(--primary);
  color: #5fa1ff;
}

/* ------------------------------ 用户管理弹窗 ---------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.72);
  z-index: 1100;
}

.modal-overlay.is-open {
  display: flex;
}

.modal {
  width: 560px;
  max-width: 92vw;
  max-height: 86vh;
  overflow: auto;
  padding: 20px 24px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.modal-title {
  font-size: 16px;
  font-weight: 600;
}

.modal-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
}

/* -------------------------- 客户已付款提醒弹窗 -------------------------- */
.paid-notify-modal .modal {
  width: 420px;
  max-width: 92vw;
  text-align: center;
}

.paid-notify-body {
  padding: 6px 4px 4px;
}

.paid-notify-icon {
  font-size: 44px;
  line-height: 1;
  margin-bottom: 12px;
}

.paid-notify-text {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.paid-notify-sub {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

.paid-notify-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}

.paid-notify-actions .btn {
  min-width: 150px;
}

.admin-error {
  display: none;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--danger);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

/* 发票记录弹窗宽度自适应（2026-09-11）：不再沿用 .modal 固定 560px，
 * 随表格内容撑开（max-content），并限定上下限避免过宽/过窄。 */
.modal.admin-modal {
  width: max-content;
  min-width: min(640px, 92vw);
  max-width: min(1080px, 94vw);
}

/* 长内容列（邮箱/税号/订单号）截断省略，防止个别超长值把弹窗撑到上限 */
.admin-table .ia-email,
.admin-table .ia-tax,
.admin-table .ia-order {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 发票队列可点击行（2026-09-11）：整行 hover 提示可点，点行开详情弹窗 */
.ia-row {
  cursor: pointer;
}

.ia-row:hover td {
  background: rgba(88, 166, 255, 0.08);
}

/* 发票记录筛选行（2026-09-11 开票记录回查）：状态切换 待开具/已开具/全部 */
.invoice-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 10px;
  font-size: 13px;
}

.invoice-filter-label {
  color: var(--muted);
}

.invoice-filter {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-2);
  color: inherit;
  font-size: 13px;
}

.invoice-filter-tip {
  font-size: 12px;
}

/* 发票详情弹窗：两列 dl 网格，dt 灰色标签 / dd 内容 */
.invoice-detail-list {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px 14px;
  margin: 0;
  padding: 6px 4px 2px;
  font-size: 13px;
}

.invoice-detail-list dt {
  color: var(--muted);
}

.invoice-detail-list dd {
  margin: 0;
  word-break: break-all;
}


.admin-table th,
.admin-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.admin-table th {
  color: var(--muted);
  font-weight: 500;
}

.ua-state.is-disabled {
  color: var(--danger);
}

.ua-actions {
  display: flex;
  gap: 6px;
}

.admin-create {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.admin-create h4 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
}

.admin-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.admin-form .login-input {
  width: auto;
  flex: 1 1 140px;
}

/* ------------------------------ 修改密码弹窗 ---------------------------- */
.pw-error {
  display: none;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--danger);
}

.pw-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pw-form .login-input {
  width: 100%;
}

/* 编辑设备信息弹窗字段 */
.field-label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 4px;
}

.device-edit-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 6px;
}

/* ------------------------------ 计费模块（M1） --------------------------- */
.hidden {
  display: none !important;
}

.is-hidden {
  display: none !important;
}

.btn--paid {
  background: var(--warn);
  color: #1a1205;
}

/* 收到被控端「已付款」申请后，高亮确认收款按钮 */
.btn--paid.is-urgent {
  animation: paid-pulse 1.1s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(210, 153, 34, 0.6);
}

@keyframes paid-pulse {
  0% { box-shadow: 0 0 0 0 rgba(210, 153, 34, 0.6); }
  70% { box-shadow: 0 0 0 10px rgba(210, 153, 34, 0); }
  100% { box-shadow: 0 0 0 0 rgba(210, 153, 34, 0); }
}

/* 会话级计费状态条（视频区上方） */
.billing-info {
  margin-bottom: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  background: var(--panel);
  border: 1px solid var(--border);
}

.billing-info.is-ok {
  background: rgba(63, 185, 80, 0.12);
  border-color: rgba(63, 185, 80, 0.4);
  color: var(--ok);
}

.billing-info.is-warn {
  background: rgba(210, 153, 34, 0.12);
  border-color: rgba(210, 153, 34, 0.4);
  color: var(--warn);
}

/* 弹窗内的计费表单 */
.billing-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.radio-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}

.amount-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.amount-label {
  color: var(--muted);
}

.bm-amount {
  width: 160px;
}

.bm-amount:disabled {
  opacity: 0.5;
}

.bm-amount-cents {
  font-size: 13px;
}

.bm-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.billing-error {
  display: none;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--danger);
}

/* 结算面板内容 */
.settle-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settle-info .row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 14px;
}

.settle-info .row .k {
  color: var(--muted);
}

.settle-info .row .v {
  font-weight: 600;
  word-break: break-all;
  text-align: right;
}

.banner {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
}

.banner-ok {
  background: rgba(63, 185, 80, 0.12);
  color: var(--ok);
}

.banner-err {
  background: rgba(248, 81, 73, 0.12);
  color: var(--danger);
}

.qr-hint {
  font-size: 13px;
  color: var(--muted);
}

/* 计费配置表单 */
.billing-config-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.billing-config-form fieldset {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.billing-config-form legend {
  padding: 0 6px;
  font-size: 13px;
  color: var(--muted);
}

.billing-config-form .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.billing-config-form .field label {
  font-size: 12px;
  color: var(--muted);
}

.billing-config-form .cfg-field {
  width: 100%;
}

/* 配置项中文帮助说明 */
.billing-config-form .cfg-help {
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
  opacity: 0.85;
  margin-top: -1px;
}

/* 图片上传：输入框 + 上传按钮 一行 */
.billing-config-form .img-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.billing-config-form .img-row .cfg-field {
  flex: 1;
}
.billing-config-form .img-row .cfg-upload {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* 上传后的图片预览 */
.billing-config-form .cfg-img-preview {
  max-width: 160px;
  max-height: 160px;
  margin-top: 4px;
  border-radius: 8px;
  border: 1px solid var(--border);
  display: block;
}

/* 配置教程折叠区 */
.billing-config-form .cfg-tutorial {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--panel) 60%, transparent);
}
.billing-config-form .cfg-tutorial summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--primary);
  font-weight: 600;
  user-select: none;
}
.billing-config-form .cfg-tutorial-body {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text);
}
.billing-config-form .cfg-tutorial-body p {
  margin: 0 0 6px;
}
.billing-config-form .cfg-tutorial-body .muted {
  color: var(--muted);
  font-size: 11px;
}

.billing-config-modal .modal {
  width: 620px;
}

/* ------------------------------ 实时沟通面板 ------------------------------ */
/* 悬浮在屏幕右下角：不占用视频区高度、不随页面滚动，随时可与被控端沟通。
   z-index 低于登录遮罩(1000)与弹窗(1100)，避免盖住关键交互。
   ⚠ 关键：position:fixed 元素若同时存在 top 与 bottom（或 left 与 right），
   浏览器会把它上下（左右）拉伸撑满 —— 这正是"聊天窗粘连底边"的根因。
   因此默认只用 bottom/right 锚右下角；一旦拖拽切到 left/top 定位，
   JS 必须同步把 bottom/right 置为 auto（见 session-view.js 的 _toChatFloating）。
   ⚠ 关键二：四边安全边距统一为 16px（此处 bottom/right、拖拽夹紧边界
   session-view.js 的 CHAT_EDGE_MARGIN、以及下面的 max-height 各留 16*2），
   保证拖到极限处面板仍明显悬浮，不会被视口下沿吸附/截断。三处须同步修改。
   ⚠ 关键三：尺寸/边界一律用「不含滚动条」的参照系。100vw、100vh、
   window.innerWidth/innerHeight 都**包含**竖直滚动条宽度（Win 下约 15px），
   而 fixed 元素的布局参照系（以及 right/bottom 偏移、clientWidth/clientHeight）
   是不含滚动条的初始包含块。两者混用会让右边距被滚动条吃掉（实测只剩 1px）。
   故此处用 100%（fixed 元素的百分比按初始包含块解析 == clientWidth/Height），
   JS 侧对应使用 document.documentElement.clientWidth/clientHeight
   （见 session-view.js 的 getViewportSize）。 */
.chat-panel {
  position: fixed;
  bottom: 16px;
  right: 16px;
  left: auto;
  top: auto;
  transform: none;
  z-index: 900;
  width: min(420px, calc(100% - 32px));
  /* 内容自适应高度：绝不因锚定被拉伸 */
  height: auto;
  max-height: calc(100% - 32px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 12px;
  /* 半透明 + 毛玻璃效果：鼠标可拖拽标题栏移动位置 */
  background: rgba(26, 33, 43, 0.68);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

/* 拖拽定位态：由 JS 添加。用 !important 兜底，杜绝任何来源的 bottom/right
   再次与 left/top 形成双锚定把面板拉长贴边。 */
.chat-panel.chat-panel--floating {
  bottom: auto !important;
  right: auto !important;
}

/* 拖拽进行中：禁止文字选中、光标变 grabbing */
.chat-panel.dragging {
  user-select: none;
  -webkit-user-select: none;
  /* 触屏拖拽时不让页面跟着滚动/回弹 */
  touch-action: none;
}

.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* 标题栏不参与收缩，保证拖拽手柄始终可见 */
  flex: 0 0 auto;
  padding: 8px 12px;
  background: rgba(34, 43, 56, 0.7);
  border-bottom: 1px solid var(--border);
  /* 标题栏即拖拽手柄 */
  cursor: move;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.chat-panel.dragging .chat-head {
  cursor: grabbing;
}

.chat-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* 聊天头部右侧按钮组（收费 / 系统信息 / 键盘 / 全屏 / 断开 / 收起），与标题分居两端 */
.chat-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  /* 按钮增至 6 个：窄面板下允许换行，避免把标题挤出标题栏 */
  flex-wrap: wrap;
  justify-content: flex-end;
}

.chat-log {
  max-height: min(38vh, 240px);
  min-height: 80px;
  /* flex 容器内允许收缩，避免小窗口下把面板顶出视口 */
  flex: 1 1 auto;
  overflow-y: auto;
  /* 保留消息中的换行（配合 .chat-line 的 pre-wrap） */
  white-space: pre-wrap;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  line-height: 1.5;
}

.chat-line {
  padding: 5px 9px;
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  width: fit-content;
  max-width: 85%;
  /* 消息内的 \n 原样换行（textContent 已保留字符，靠 pre-wrap 呈现多行） */
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* 通道未就绪时缓冲待补发的本端消息 */
.chat-line--pending {
  opacity: 0.65;
  border: 1px dashed var(--warn);
}

.chat-line--me {
  align-self: flex-end;
  background: rgba(47, 129, 247, 0.18);
  color: #cfe2ff;
}

.chat-line--peer {
  align-self: flex-start;
  background: var(--panel-2);
}

.chat-input-row {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
}

.chat-input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 14px;
}

.chat-input:focus {
  outline: none;
  border-color: var(--primary);
}

/* 聊天窗头部的「确认收款」副本：紧凑尺寸与 btn--small 同规格，避免撑高标题栏 */
#btn-chat-confirm-paid {
  padding: 5px 12px;
  font-size: 13px;
}

/* ------------------- 常用短语下拉面板（2026-09-10） ------------------- */
/* 绝对定位于输入行上方；.chat-panel 为 position:fixed，天然作为包含块。 */
.chat-phrases-pop {
  position: absolute;
  right: 12px;
  bottom: 64px;
  width: min(360px, calc(100% - 24px));
  max-height: 260px;
  overflow-y: auto;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  /* 面板内部层级：高于聊天内容与 resize 手柄（z-index:3） */
  z-index: 10;
  display: flex;
  flex-direction: column;
}

.chat-phrases-pop.is-hidden,
/* 收起态输入行整体隐藏，短语面板一并隐藏 */
.chat-panel--collapsed .chat-phrases-pop {
  display: none;
}

.chat-phrase-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.chat-phrase-item:last-child {
  border-bottom: 0;
}

.chat-phrase-item:hover {
  background: rgba(47, 129, 247, 0.12);
}

.chat-phrase-text {
  flex: 1 1 auto;
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  word-break: break-all;
}

/* 「发送」小按钮：复用 .btn--small 的视觉密度，固定在行尾 */
.chat-phrase-send {
  flex: 0 0 auto;
}

/* ---- 短语分组与自定义短语管理（2026-09-10） ---- */

/* 组标题（「常用」/「我的短语」）：小字 muted */
.chat-phrases-group-title {
  padding: 6px 10px 4px;
  font-size: 12px;
  color: var(--muted);
  user-select: none;
}

/* 自定义短语行尾「编辑 / 删除」小按钮：最小样式，密度与 .btn--small 一致 */
.chat-phrase-op {
  flex: 0 0 auto;
  padding: 2px 6px;
  font-size: 12px;
  color: var(--muted);
}

.chat-phrase-op:hover {
  color: var(--text);
}

.chat-phrase-op--danger {
  color: #e5534b;
}

.chat-phrase-op--danger:hover {
  color: #ff6b63;
}

/* 「我的短语」空态占位 */
.chat-phrase-empty {
  padding: 6px 10px;
  font-size: 12px;
  color: var(--muted);
}

/* 底部「+ 添加短语」行：虚线按钮，展开后变为内联输入框 + 保存/取消 */
.chat-phrase-add {
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-phrase-add-btn {
  width: 100%;
  padding: 6px 8px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  cursor: pointer;
}

.chat-phrase-add-btn:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--primary);
}

.chat-phrase-add-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* 内联输入框（添加 / 编辑共用）：校验失败红边 */
.chat-phrase-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
}

.chat-phrase-input:focus {
  outline: none;
  border-color: var(--primary);
}

.chat-phrase-input.is-invalid {
  border-color: #e5534b;
}

/* 校验 / 上限提示行：默认隐藏，由 JS 控制显隐 */
.chat-phrase-hint {
  padding: 0 10px 7px;
  font-size: 12px;
  color: var(--muted);
}

.chat-phrase-hint.is-error {
  color: #e5534b;
}

/* ---- 锁屏辅助条：发送 Ctrl+Alt+Del（2026-09-10） ---- */
/* 位于聊天标题栏与聊天记录之间，仅 secure-desktop 期间展示 */
.chat-sas-assist {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(47, 129, 247, 0.08);
}

.chat-sas-assist-tip {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
  word-break: break-all;
}

/* 面板收起态（仅显示「展开」按钮）时辅助条一并隐藏 */
.chat-panel--collapsed .chat-sas-assist {
  display: none;
}

.chat-panel--collapsed .chat-log,
.chat-panel--collapsed .chat-input-row {
  display: none;
}

/* 收起态 = 仅显示一个「展开」按钮：隐藏标题文字与其余操作按钮，
   只保留 #btn-chat-toggle（文字为「展开」），宽度自适应尽量小。 */
.chat-panel--collapsed .chat-title,
.chat-panel--collapsed .chat-head-actions > *:not(#btn-chat-toggle) {
  display: none;
}

/* 收起后只留标题条，宽度自适应，尽量少遮挡画面。
   ⚠ 必须 !important：JS 侧 resize 记忆会写 inline style.width，
   不加 important 会让收起态仍按展开宽度渲染。 */
.chat-panel--collapsed {
  width: auto !important;
}

/* 收起态标题栏居中收纳单个「展开」按钮 */
.chat-panel--collapsed .chat-head {
  justify-content: center;
  padding: 6px 10px;
  gap: 0;
}

/* ------------------- 右下角 resize 手柄（拖拽调宽） ------------------- */
/* 自绘斜纹手柄，绝对定位在面板右下角；面板 overflow:hidden 已裁齐圆角。 */
.chat-resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  z-index: 3;
  /* 斜纹视觉：两条对角短线 */
  background:
    linear-gradient(135deg, transparent 0 46%, var(--border) 46% 54%, transparent 54% 66%,
      var(--border) 66% 74%, transparent 74% 100%);
  opacity: 0.65;
  transition: opacity 0.15s ease;
}

.chat-resize-handle:hover,
.chat-panel.resizing .chat-resize-handle {
  opacity: 1;
}

/* 调宽进行中：禁止文字选中，触屏不触发页面滚动 */
.chat-panel.resizing {
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

/* 收起态不显示 resize 手柄（宽度固定 auto，无宽度可调） */
.chat-panel--collapsed .chat-resize-handle {
  display: none;
}

/* ------------------- 收起态未读小红点 ------------------- */
/* 收起时收到新运营消息：给「展开」按钮挂一个小红点，展开后由 JS 清除。 */
#btn-chat-toggle.chat-badge {
  position: relative;
}

#btn-chat-toggle.chat-badge::after {
  content: '';
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e5484d;
  box-shadow: 0 0 0 2px rgba(26, 33, 43, 0.9);
}
/* ======================= 需求 B · 双指缩放（T01/T02） ======================= */
/* 变换载体是 <video> 本身：transform-origin: 0 0 让坐标逆变换公式退化为
   u*s + tx（见 js/zoom.js 文件头）。wrap 保持 overflow:hidden 作为裁剪视口。 */
.remote-video {
  transform-origin: 0 0;
  will-change: transform;
}

/* 缩放态：wrap 作为手势面，必须 touch-action:none，否则触屏双指会被浏览器
   解释为页面滚动/缩放。 */
.video-wrap {
  touch-action: none;
}

.video-wrap.is-zoomed .remote-video {
  cursor: grab;
}

/* --------------------------- 缩放工具条 --------------------------- */
.zoom-bar {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 8px;
  background: rgba(15, 20, 25, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  z-index: 20;
  user-select: none;
  -webkit-user-select: none;
}

.zoom-btn {
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  line-height: 1;
  padding: 6px 9px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}

.zoom-btn:hover {
  background: rgba(47, 129, 247, 0.22);
}

.zoom-btn--icon {
  min-width: 26px;
  font-size: 15px;
  font-weight: 700;
  padding: 5px 0;
}

.zoom-btn--pct {
  min-width: 46px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: #5fa1ff;
  font-weight: 600;
}

/* ------------------------ 首次使用引导气泡 ------------------------ */
.zoom-tip {
  position: absolute;
  left: 50%;
  bottom: 52px;
  transform: translateX(-50%);
  max-width: min(420px, calc(100% - 24px));
  padding: 7px 12px;
  border-radius: 8px;
  background: rgba(47, 129, 247, 0.92);
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  z-index: 21;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.zoom-tip.is-hidden {
  display: none;
}

/* ================== 需求 C · 系统信息面板（T04/T05） ================== */
.mon-panel {
  position: fixed;
  top: 64px;
  right: 16px;
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 96px);
  display: flex;
  flex-direction: column;
  background: rgba(26, 33, 43, 0.94);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
  color: var(--text);
  font-size: 13px;
  z-index: 60;
  overflow: hidden;
}

.mon-panel.is-hidden {
  display: none;
}

.mon-panel.is-collapsed .mon-body {
  display: none;
}

/* 收起态只剩标题条：JS 记忆的内联 width/height/max-height 必须让位
   （!important 优先级高于内联样式），否则收起后仍占一大块空面板 */
.mon-panel.is-collapsed {
  height: auto !important;
  max-height: none !important;
}

/* ---------------- 右下角尺寸手柄（拖拽调宽 + 高） ----------------
   独立浮层态：.mon-panel 自身 position:fixed，手柄锚定面板右下角；
   内嵌态：面板已改 position:relative，同样锚定面板自身右下角。
   视觉与 .chat-resize-handle 同款斜纹。 */
.mon-resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  z-index: 5;
  /* 斜纹视觉：两条对角短线 */
  background:
    linear-gradient(135deg, transparent 0 46%, var(--border) 46% 54%, transparent 54% 66%,
      var(--border) 66% 74%, transparent 74% 100%);
  opacity: 0.65;
  transition: opacity 0.15s ease;
}

.mon-resize-handle:hover,
.mon-panel.sizing .mon-resize-handle {
  opacity: 1;
}

/* 调尺寸进行中：禁止文字选中，触屏不触发页面滚动 */
.mon-panel.sizing {
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

/* 收起态不显示尺寸手柄（无内容可调） */
.mon-panel.is-collapsed .mon-resize-handle {
  display: none;
}

/* ---------------- 全屏态（2026-09-10） ----------------
   铺满视口。全套 !important：位置/尺寸记忆（拖拽写入的内联
   top/left/width/height/max-height）与收起态的 height:auto !important
   都必须让位。z-index 取 1000：高于聊天面板（900）与常规浮层（60）。
   ⚠ 必须放在 .mon-panel.is-collapsed 规则之后：两条同为 (0,2,0)，
   后写者胜——全屏优先于收起的高度让位。 */
.mon-panel.is-fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  border-radius: 0;
  z-index: 1000;
}

/* 全屏态隐藏尺寸手柄（无尺寸可调） */
.mon-panel.is-fullscreen .mon-resize-handle {
  display: none;
}

/* ---------------- 集成进聊天悬浮窗时的局部覆盖（2026-09-10） ----------------
   「系统信息」已由独立悬浮面板改为挂载在 #chat-panel 内的 #chat-sysinfo-host。
   默认 .mon-panel 是 position:fixed（top:64px; right:16px）的独立浮层，
   直接放进聊天窗会脱离文档流飞回右上角，故针对宿主容器做局部覆盖：
   改回流式布局、宽度撑满聊天窗、限高内部滚动，去掉浮层阴影与圆角。 */
.chat-sysinfo-host .mon-panel {
  position: static;
  top: auto;
  right: auto;
  width: 100%;
  /* 聊天窗仅 420px 宽，限高避免 520px 的面板把窗口撑出视口 */
  max-height: 260px;
  z-index: auto;
  border-radius: 0;
  /* 只保留上边框作为与聊天记录的分隔线 */
  border-top: 1px solid var(--border);
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  box-shadow: none;
  /* 在 flex 纵向的聊天窗内不参与拉伸 */
  flex: 0 0 auto;
}

/* 进程页签表格在窄容器内收敛高度：内部滚动，不撑破聊天窗 */
.chat-sysinfo-host .mon-proc-wrap {
  /* 2026-09-10 修复「进程列表高度不自适应」：去掉 80px/150px 双重卡死，
     改为随面板剩余高度弹性伸缩（flex 链：.mon-body(flex col, overflow:hidden)
     → .mon-pane.is-active(flex col, min-height:0) → 本元素 flex:1 1 auto），
     内部 overflow-y:auto 自行滚动 */
  min-height: 0;
  flex: 1 1 auto;
  max-height: none;
}

/* 聊天窗收起时，系统信息区一并隐藏（与 .chat-log / .chat-input-row 同款处理） */
.chat-panel--collapsed .chat-sysinfo-host {
  display: none;
}

.mon-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 8px 12px;
  background: var(--primary);
  color: #fff;
  /* Fix2：头部可拖拽移动面板（含移动端触摸拖动），按钮除外 */
  touch-action: none;
  cursor: move;
  user-select: none;
  -webkit-user-select: none;
}

.mon-head button {
  cursor: pointer;
}

.mon-title {
  font-weight: 600;
}

.mon-agent-ver {
  font-size: 11px;
  opacity: 0.85;
  background: rgba(255, 255, 255, 0.16);
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mon-head-actions {
  margin-left: auto;
  display: flex;
  gap: 4px;
}

.mon-icon-btn {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 4px;
}

.mon-icon-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.mon-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.mon-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 10px 0;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--border);
}

.mon-tab {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
}

.mon-tab:hover {
  color: var(--text);
}

.mon-tab.is-active {
  background: var(--panel-2);
  color: var(--text);
  font-weight: 600;
}

.mon-pane {
  display: none;
  flex-direction: column;
  min-height: 0;
  padding: 10px 12px 12px;
}

.mon-pane.is-active {
  display: flex;
}

/* ---------------------------- 三态容器 ---------------------------- */
.mon-state {
  flex: 0 0 auto;
}

.mon-state:empty {
  display: none;
}

.mon-state-title {
  margin: 6px 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.mon-state-sub {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--muted);
  word-break: break-all;
}

.mon-state-tip {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
  opacity: 0.85;
}

/* 骨架屏（检测中） */
.mon-skel {
  background: linear-gradient(90deg, var(--panel-2) 25%, #2c3746 37%, var(--panel-2) 63%);
  background-size: 400% 100%;
  animation: mon-skel-shine 1.4s ease infinite;
  border-radius: 4px;
}

.mon-skel--line {
  height: 12px;
  margin: 8px 0;
}

@keyframes mon-skel-shine {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ---------------------------- 概览页签 ---------------------------- */
.mon-static {
  overflow-y: auto;
  min-height: 0;
}

.mon-kv {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mon-kv-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 12.5px;
  line-height: 1.6;
}

.mon-kv-row dt {
  flex: 0 0 76px;
  color: var(--muted);
  font-size: 12px;
}

.mon-kv-row dd {
  margin: 0;
  flex: 1 1 auto;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.mon-unavail {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--muted);
}

.mon-unavail summary {
  cursor: pointer;
}

.mon-unavail ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

/* ---------------------------- 实时页签 ---------------------------- */
.mon-perf,
.mon-temp {
  overflow-y: auto;
  min-height: 0;
}

.mon-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

.mon-metric {
  padding: 8px 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.mon-metric-label {
  font-size: 11.5px;
  color: var(--muted);
}

.mon-metric-value {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.mon-metric-sub {
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
}

.mon-bar {
  margin-top: 6px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.mon-bar > i {
  display: block;
  height: 100%;
  background: var(--primary);
  border-radius: 999px;
  transition: width 0.25s linear;
}

/* ----------------------------- 温度区块 ----------------------------- */
.mon-temp-block {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
}

.mon-temp-title {
  font-size: 11.5px;
  color: var(--muted);
  margin-bottom: 6px;
}

.mon-temp-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 3px 0;
  font-size: 12.5px;
}

.mon-temp-label {
  flex: 0 0 72px;
  color: var(--muted);
  font-size: 12px;
}

.mon-temp-val {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mon-temp-hint {
  flex: 1 1 auto;
  font-size: 11px;
  color: var(--muted);
  text-align: right;
  overflow-wrap: anywhere;
}

/* 温度不可用：整块灰显，绝不显示 0℃ */
.mon-temp-item.is-muted {
  opacity: 0.62;
}

.mon-temp-item.is-muted .mon-temp-val {
  font-weight: 500;
  color: var(--muted);
}

/* ---------------------------- 进程页签 ---------------------------- */
.mon-proc-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-bottom: 6px;
}

.mon-proc-search {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 13px;
}

.mon-proc-search:focus {
  outline: none;
  border-color: var(--primary);
}

.mon-proc-auto {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.mon-proc-auto input {
  margin: 0;
}

.mon-proc-pause {
  flex: 0 0 auto;
  margin-bottom: 6px;
  padding: 5px 9px;
  border-radius: 6px;
  background: rgba(210, 153, 34, 0.14);
  color: var(--warn);
  font-size: 11.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mon-proc-pause.is-hidden {
  display: none;
}

.mon-proc-resume {
  border: 0;
  background: transparent;
  color: var(--primary);
  font-size: 11.5px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.mon-proc-wrap {
  flex: 1 1 auto;
  min-height: 120px;
  /* 2026-09-10：去掉 46vh 封顶——弹出/全屏态下随外框（.mon-body 的
     flex + overflow:hidden）自适应吃满剩余高度，不再受视口比例硬限 */
  max-height: none;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.mon-proc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.mon-proc-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.mon-proc-table thead th.is-sortable {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.mon-proc-table thead th.is-sorted {
  color: var(--text);
}

.mon-sort {
  font-size: 9px;
}

.mon-proc-row td {
  padding: 4px 8px;
  border-bottom: 1px solid rgba(45, 55, 68, 0.6);
  vertical-align: middle;
}

/* 500 行滚动流畅：行级 content-visibility 让视口外行跳过渲染 */
.mon-proc-row {
  content-visibility: auto;
  contain-intrinsic-size: auto 28px;
}

.mon-proc-row:hover td {
  background: rgba(47, 129, 247, 0.08);
}

.mon-proc-row.is-protected {
  opacity: 0.55;
}

.mon-td-name {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mon-td-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mon-td-user {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}

.mon-td-act {
  text-align: right;
  white-space: nowrap;
}

.mon-proc-foot {
  flex: 0 0 auto;
  padding-top: 6px;
  font-size: 11.5px;
  color: var(--muted);
}

.mon-proc-foot .is-error {
  color: var(--danger);
}

.btn--tiny {
  padding: 3px 9px;
  font-size: 12px;
  border-radius: 5px;
}

/* --------------------- 结束进程二次确认弹窗 --------------------- */
.mon-confirm-modal .modal {
  width: 460px;
  max-width: 92vw;
}

.mon-confirm-body {
  font-size: 13px;
  line-height: 1.7;
}

.mon-confirm-lead {
  margin: 0 0 8px;
}

.mon-confirm-meta {
  margin: 0 0 10px;
  padding: 10px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mon-confirm-meta > div {
  display: flex;
  gap: 10px;
}

.mon-confirm-meta dt {
  flex: 0 0 72px;
  color: var(--muted);
  font-size: 12px;
}

.mon-confirm-meta dd {
  margin: 0;
  word-break: break-all;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.mon-confirm-warn {
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(210, 153, 34, 0.14);
  color: var(--warn);
  font-size: 12.5px;
}

.mon-confirm-note {
  margin: 0;
  font-size: 11.5px;
  color: var(--muted);
}

.mon-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

/* ------------------ 聊天未读提示（A6 贴底跟随） ------------------ */
.chat-unread {
  display: block;
  width: calc(100% - 24px);
  margin: 0 12px 6px;
  padding: 5px 10px;
  border: 1px solid var(--warn);
  border-radius: 999px;
  background: rgba(210, 153, 34, 0.16);
  color: var(--warn);
  font-size: 12px;
  cursor: pointer;
  text-align: center;
}

.chat-unread:hover {
  background: rgba(210, 153, 34, 0.26);
}

.chat-unread.is-hidden {
  display: none;
}