*,
*::before,
*::after {
  box-sizing: border-box;
}

:root,
[data-theme="light"] {
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-2: #eef1f6;
  --text: #1a1d26;
  --muted: #6b7280;
  --border: #e2e8f0;
  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --danger: #dc2626;
  --shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
  --os-chrome-top: clamp(1.75rem, 4vw, 2.25rem);
  --os-comm-collapsed: clamp(3rem, 6vw, 3.75rem);
  --os-comm-expanded: clamp(280px, 34vw, 380px);
  --os-comm-width: var(--os-comm-expanded);
  --os-viewport-h: calc(100dvh - var(--os-chrome-top));
  --os-touch-edge: 1.5rem;
  --os-narrow-w: min(90vw, 960px);
}

[data-theme="dark"] {
  --bg: #0f1117;
  --surface: #1a1f2e;
  --surface-2: #242936;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --border: #2d3548;
  --accent: #818cf8;
  --accent-hover: #a5b4fc;
  --danger: #f87171;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  overflow: hidden;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
}

.app-root {
  width: 100%;
  height: 100%;
  min-height: 100dvh;
}

/* Auth */
.auth-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1.5rem;
  background: linear-gradient(145deg, var(--bg), color-mix(in srgb, var(--accent) 12%, var(--bg)));
}

.auth-card {
  width: min(420px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: var(--shadow);
}

.auth-title {
  margin: 0 0 1.5rem;
  font-size: 1.5rem;
}

.auth-brand {
  margin: 0 0 0.35rem;
  font-size: clamp(1.35rem, 3vw, 1.65rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: center;
}

.auth-card-standalone {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.auth-card-standalone .boot-auth-card {
  border: none;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

/* Boot screen — 对齐老版启动页 */
.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
    ellipse 80% 60% at 50% 40%,
    #111827 0%,
    #0a0e17 70%
  );
  color: #e5e7eb;
}

.boot-glow {
  position: absolute;
  width: min(480px, 70vw);
  height: min(480px, 70vw);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--accent) 35%, transparent) 0%,
    transparent 70%
  );
  opacity: 0.35;
  animation: boot-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes boot-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.28;
  }
  50% {
    transform: scale(1.04);
    opacity: 0.42;
  }
}

.boot-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 3vh, 1.5rem);
  width: min(420px, 90vw);
  padding: clamp(0.75rem, 2vw, 1rem);
}

.boot-logo {
  font-size: clamp(1.75rem, 5vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  background: linear-gradient(135deg, #e0e7ff, #a5f3fc, #c4b5fd);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.boot-sub {
  margin: 0;
  font-size: clamp(0.72rem, 1.8vw, 0.85rem);
  color: #9ca3af;
  letter-spacing: 0.2em;
}

.boot-progress-wrap {
  display: flex;
  align-items: center;
  gap: clamp(0.55rem, 2vw, 0.75rem);
  width: 100%;
}

.boot-progress-track {
  flex: 1;
  height: clamp(3px, 0.6vw, 4px);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
}

.boot-progress-bar {
  width: 100%;
  height: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--accent), #60a5fa);
  transition: transform 0.22s ease;
}

.boot-progress-label {
  font-size: clamp(0.68rem, 1.6vw, 0.78rem);
  color: #9ca3af;
  min-width: clamp(2rem, 6vw, 2.5rem);
  text-align: right;
}

.boot-auth-card {
  width: 100%;
  margin-top: clamp(0.35rem, 1.5vh, 0.65rem);
  padding: clamp(0.85rem, 2.5vw, 1.1rem);
  border-radius: clamp(10px, 2vw, 14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(17, 24, 39, 0.72);
  backdrop-filter: blur(16px);
}

.boot-auth-tabs {
  display: flex;
  gap: clamp(0.35rem, 1.2vw, 0.5rem);
  margin-bottom: clamp(0.55rem, 1.8vw, 0.75rem);
}

.boot-auth-tab {
  flex: 1;
  padding: clamp(0.45rem, 1.2vw, 0.55rem);
  border-radius: clamp(8px, 1.5vw, 10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #9ca3af;
  font-size: clamp(0.72rem, 1.6vw, 0.82rem);
  cursor: pointer;
}

.boot-auth-tab.active {
  color: #e5e7eb;
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.boot-auth-hint {
  margin: 0 0 clamp(0.55rem, 1.5vw, 0.75rem);
  font-size: clamp(0.68rem, 1.5vw, 0.78rem);
  color: #9ca3af;
  line-height: 1.45;
}

.boot-auth-card .field span {
  color: #cbd5e1;
}

.boot-auth-card .field input {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: #f3f4f6;
}

.boot-auth-submit {
  width: 100%;
  margin-top: 0.35rem;
}

.boot-auth-cli {
  width: 100%;
  margin-top: 0.45rem;
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(14, 165, 233, 0.12);
  color: #bae6fd;
}

.boot-auth-cli:hover:not(:disabled) {
  background: rgba(14, 165, 233, 0.22);
  border-color: rgba(56, 189, 248, 0.55);
}

.boot-auth-remember {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: fit-content;
  margin-top: clamp(0.4rem, 1.2vw, 0.6rem);
  font-size: clamp(0.7rem, 1.5vw, 0.8rem);
  color: #cbd5e1;
  cursor: pointer;
  user-select: none;
}

.boot-auth-remember input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: #38bdf8;
  cursor: pointer;
}

.boot-auth-card .demo-enter {
  width: 100%;
  margin-top: 0.45rem;
}

.boot-auth-lang {
  margin-top: clamp(0.75rem, 2vw, 1rem);
  padding-top: clamp(0.65rem, 1.8vw, 0.85rem);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.boot-auth-lang-label {
  margin: 0 0 0.45rem;
  font-size: clamp(0.65rem, 1.4vw, 0.75rem);
  color: #9ca3af;
  text-align: center;
}

.boot-auth-lang-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.3rem, 1vw, 0.45rem);
}

.boot-auth-lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(2rem, 5vw, 2.35rem);
  height: clamp(2rem, 5vw, 2.35rem);
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
}

.boot-auth-lang-btn:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.boot-auth-lang-btn.active {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}

.boot-auth-lang-flag {
  font-size: clamp(0.62rem, 1.5vw, 0.72rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  color: #e5e7eb;
}

.boot-auth-version {
  margin-top: clamp(0.75rem, 2vw, 1rem);
  padding-top: clamp(0.65rem, 1.8vw, 0.85rem);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}

.boot-auth-version-label {
  margin: 0 0 0.35rem;
  font-size: clamp(0.65rem, 1.4vw, 0.75rem);
  color: #9ca3af;
}

.boot-auth-version-value {
  margin: 0;
  font-size: clamp(0.78rem, 1.8vw, 0.9rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #e5e7eb;
}

.boot-auth-version-row {
  margin: 0.15rem 0;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: clamp(0.35rem, 1vw, 0.6rem);
}

.boot-auth-version-row .boot-auth-version-value {
  font-weight: 600;
}

.boot-auth-version-date {
  font-size: clamp(0.62rem, 1.3vw, 0.72rem);
  color: #9ca3af;
  letter-spacing: 0.02em;
}

.boot-auth-version-more {
  display: inline-block;
  margin: 0.4rem 0 0;
  font-size: clamp(0.65rem, 1.4vw, 0.75rem);
  color: #9ca3af;
  text-decoration: none;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.15s ease;
}

.boot-auth-version-more:hover,
.boot-auth-version-more:focus-visible {
  color: #e5e7eb;
  text-decoration: underline;
}

.boot-auth-server {
  margin-top: clamp(0.75rem, 2vw, 1rem);
  padding-top: clamp(0.65rem, 1.8vw, 0.85rem);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.boot-auth-server-label {
  margin: 0 0 0.45rem;
  font-size: clamp(0.65rem, 1.4vw, 0.75rem);
  color: #9ca3af;
  text-align: center;
}

.boot-auth-server-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.35rem, 1vw, 0.5rem);
}

.boot-auth-server-btn {
  padding: clamp(0.35rem, 1vw, 0.5rem) clamp(0.55rem, 1.6vw, 0.75rem);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #e5e7eb;
  font-size: clamp(0.68rem, 1.5vw, 0.78rem);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
}

.boot-auth-server-btn:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.boot-auth-server-btn.active {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}

.boot-auth-server-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.boot-auth-server-hint {
  margin: 0.45rem 0 0;
  font-size: clamp(0.62rem, 1.3vw, 0.72rem);
  text-align: center;
}

.auth-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 3vw, 1.5rem);
  background: rgba(6, 8, 16, 0.55);
  backdrop-filter: blur(8px);
}

.auth-modal-window {
  width: min(420px, 100%);
  max-height: min(90vh, 640px);
  overflow: auto;
  border-radius: clamp(12px, 2vw, 16px);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  color: var(--text);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}

.auth-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: clamp(0.75rem, 2vw, 1rem) clamp(0.85rem, 2.5vw, 1.1rem) 0;
}

.auth-modal-header strong {
  font-size: clamp(0.92rem, 2vw, 1.05rem);
}

.auth-modal-close {
  width: 1.85rem;
  height: 1.85rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.auth-modal-close:hover {
  background: color-mix(in srgb, var(--text) 10%, transparent);
}

.auth-modal-window .boot-auth-card {
  margin-top: 0;
  border: none;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

.auth-modal-window .boot-auth-tab {
  color: color-mix(in srgb, var(--text) 70%, transparent);
  border-color: var(--border);
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

.auth-modal-window .boot-auth-tab.active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.auth-modal-window .boot-auth-hint,
.auth-modal-window .boot-auth-card .field span {
  color: color-mix(in srgb, var(--text) 72%, transparent);
}

.auth-modal-window .boot-auth-card .field input {
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  border-color: var(--border);
}

.cli-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2rem);
  background: radial-gradient(ellipse at 50% 0%, rgba(14, 165, 233, 0.12), transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(99, 102, 241, 0.1), transparent 50%),
    #0b0f17;
}

.cli-card {
  width: min(640px, 100%);
  padding: clamp(1rem, 3vw, 1.5rem);
  border-radius: clamp(12px, 2vw, 16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

.cli-header {
  margin-bottom: 0.85rem;
  text-align: center;
}

.cli-brand {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  color: #38bdf8;
  text-transform: uppercase;
}

.cli-title {
  margin: 0.35rem 0 0.25rem;
  font-size: clamp(1.05rem, 2.5vw, 1.25rem);
  font-weight: 600;
  color: #f3f4f6;
}

.cli-hint {
  margin: 0;
  font-size: clamp(0.72rem, 1.6vw, 0.82rem);
  color: #9ca3af;
  line-height: 1.5;
}

.cli-terminal {
  margin: 0.85rem 0 1rem;
  max-height: min(42vh, 320px);
  overflow: auto;
  border-radius: 10px;
  border: 1px solid rgba(34, 197, 94, 0.22);
  background: #020617;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.35);
}

.cli-log {
  margin: 0;
  padding: 0.85rem 1rem;
  font-family: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
  font-size: clamp(0.68rem, 1.5vw, 0.78rem);
  line-height: 1.55;
  color: #86efac;
  white-space: pre-wrap;
  word-break: break-word;
}

.cli-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.cli-actions .btn {
  min-width: clamp(7rem, 28vw, 9rem);
}

.cli-enter {
  flex: 1 1 auto;
}

.cli-logout {
  flex: 1 1 auto;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.field span {
  font-size: 0.875rem;
  color: var(--muted);
}

input {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.95rem;
}

input:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-color: var(--accent);
}

select,
textarea {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
}

select:focus,
textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-color: var(--accent);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.btn:hover {
  border-color: var(--accent);
}

.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  width: 100%;
  margin-top: 0.5rem;
}

.btn.primary:hover {
  background: var(--accent-hover);
}

.btn.link {
  border: none;
  background: none;
  color: var(--accent);
  width: 100%;
  margin-top: 0.75rem;
}

.demo-enter {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-color: transparent;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.demo-enter:hover {
  filter: brightness(1.08);
}

.btn.danger {
  border-color: var(--danger);
  color: var(--danger);
}

.btn.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.error-text {
  color: var(--danger);
  font-size: 0.875rem;
}

.muted {
  color: var(--muted);
  font-size: 0.875rem;
}

/* Desktop shell — single main screen + edge chrome */
.desktop-root {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--text);
  background: transparent;
}

/* 浅色主题：正常白底、深色字，与全局 light 变量一致 */
.app-root[data-theme="light"] .desktop-root {
  background: transparent;
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-2: #eef1f6;
  --text: #1a1d26;
  --muted: #6b7280;
  --border: #e2e8f0;
  --shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
  --chrome-glass: rgba(255, 255, 255, 0.1);
  --chrome-glass-sidebar: rgba(255, 255, 255, 0.14);
  --chrome-text: #1a1d26;
  --chrome-text-muted: #6b7280;
  --chrome-border: rgba(15, 23, 42, 0.1);
}

/* 深色主题：深色底、浅色字 */
.app-root[data-theme="dark"] .desktop-root {
  background: transparent;
  --bg: rgba(12, 16, 28, 0.92);
  --surface: rgba(18, 24, 42, 0.88);
  --surface-2: rgba(26, 34, 58, 0.84);
  --text: #eef1f6;
  --muted: rgba(238, 241, 246, 0.72);
  --border: rgba(255, 255, 255, 0.14);
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.38);
  --chrome-glass: rgba(14, 20, 36, 0.1);
  --chrome-glass-sidebar: rgba(14, 20, 36, 0.12);
  --chrome-text: #eef1f6;
  --chrome-text-muted: rgba(238, 241, 246, 0.72);
  --chrome-border: rgba(255, 255, 255, 0.14);
}

.app-root[data-theme="light"][data-wallpaper="mos-default"] .desktop-root .desktop-wallpaper {
  background:
    radial-gradient(ellipse 85% 65% at 50% 35%, color-mix(in srgb, #6366f1 16%, transparent), transparent 72%),
    radial-gradient(circle at 18% 78%, color-mix(in srgb, #3b82f6 10%, transparent), transparent 48%),
    linear-gradient(155deg, #eef2f8 0%, #f8fafc 42%, #e2e8f0 100%);
}

.app-root[data-theme="light"] .desktop-root .comm-rail {
  background: rgba(255, 255, 255, 0.35);
}

.app-root[data-theme="light"] .desktop-root .settings-shade {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.12);
}

.app-root[data-theme="light"] .desktop-root .settings-desktop-dismiss,
.app-root[data-theme="dark"] .desktop-root .settings-desktop-dismiss {
  background: rgba(6, 8, 16, 0.42);
}

.app-root[data-theme="light"] .desktop-root .comm-content-pane {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: -8px 0 32px rgba(15, 23, 42, 0.08);
}

/* 状态栏 / 任务栏：半透明 + 模糊（对齐老版 web shell） */
.desktop-root .os-statusbar,
.desktop-root .os-dock {
  color: var(--chrome-text);
  border-color: var(--chrome-border);
}

.desktop-root .os-statusbar {
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.desktop-root .os-dock {
  background: var(--chrome-glass);
  backdrop-filter: blur(24px) saturate(1.35);
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
}

.desktop-root .comm-sidebar,
.desktop-root .comm-sidebar-topbar,
.desktop-root .comm-list-panel,
.desktop-root .comm-reveal-tab {
  background: var(--chrome-glass-sidebar);
  color: var(--chrome-text);
  border-color: var(--chrome-border);
}

.desktop-root .comm-rail {
  background: rgba(8, 10, 20, 0.16);
  border-right-color: var(--chrome-border);
}

.desktop-root .os-status-time,
.desktop-root .os-logo,
.desktop-root .comm-sidebar-topbar strong,
.desktop-root .dock-label,
.desktop-root .dock-empty,
.desktop-root .dock-item {
  color: var(--text);
}

.desktop-root .dock-empty {
  color: var(--muted);
}
.desktop-root .comm-session-meta strong {
  color: var(--chrome-text);
}

.desktop-root .status-chip,
.desktop-root .os-user,
.desktop-root .comm-tool-btn,
.desktop-root .comm-session-meta .muted,
.desktop-root .dock-empty,
.desktop-root .comm-list-hint,
.desktop-root .comm-list-panel .muted,
.desktop-root .comm-list-panel .error-text {
  color: var(--chrome-text-muted);
}

.desktop-root .comm-tool-btn.active,
.desktop-root .comm-tool-btn:hover,
.desktop-root .comm-rail-btn {
  color: var(--chrome-text-muted);
}

.desktop-root .comm-rail-btn.active,
.desktop-root .comm-rail-btn:hover {
  color: var(--chrome-text);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}

.desktop-root .comm-session-item:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.desktop-root .comm-session-item.active {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
}

.desktop-root .comm-content-pane {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--text);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
}

.desktop-root .comm-content-header,
.desktop-root .comm-content-footer {
  border-color: var(--chrome-border);
}

.desktop-root .comm-reveal-tab:hover {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--chrome-text);
}

.desktop-root .status-icon-btn {
  color: var(--chrome-text-muted);
}

.desktop-root .status-icon-btn:hover {
  color: var(--chrome-text);
}

.desktop-root .comm-list-panel input,
.desktop-root .comm-list-panel .btn,
.desktop-root .comm-content-footer input,
.desktop-root .comm-content-footer .btn,
.desktop-root .comm-content-footer select {
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
  border-color: var(--border);
  color: var(--text);
}

.desktop-root .comm-list-panel input::placeholder,
.desktop-root .comm-content-footer input::placeholder {
  color: var(--muted);
}

/* 设置下拉面板：全局继承桌面语义色 */
.desktop-root .settings-shade {
  background: rgba(14, 18, 32, 0.96);
  backdrop-filter: blur(28px) saturate(1.25);
  -webkit-backdrop-filter: blur(28px) saturate(1.25);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

.desktop-root .settings-shade-header,
.desktop-root .settings-tab-nav {
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
  color: var(--text);
}

.desktop-root .settings-shade-header button {
  color: var(--muted);
}

.desktop-root .settings-shade-body .setting-card,
.desktop-root .settings-tab-content .setting-card {
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border-color: var(--border);
  color: var(--text);
  box-shadow: none;
}

.desktop-root .settings-shade-body .setting-card h3,
.desktop-root .settings-shade-body .setting-card label,
.desktop-root .settings-shade-body .setting-card p,
.desktop-root .settings-shade-body .setting-card span {
  color: var(--text);
}

.desktop-root .settings-shade-body .setting-card .muted,
.desktop-root .shell-style-option .muted,
.desktop-root .screen-subtitle,
.desktop-root .pref-eyebrow {
  color: var(--muted);
}

.desktop-root .settings-tab-btn {
  background: color-mix(in srgb, var(--surface-2) 45%, transparent);
  border-color: var(--border);
  color: var(--muted);
}

.desktop-root .settings-tab-btn.active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
  font-weight: 600;
}

.desktop-root .system-pref-hero,
.desktop-root .pref-card,
.desktop-root .stat-card,
.desktop-root .cap-card,
.desktop-root .hero-card,
.desktop-root .account-card {
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  border-color: var(--border);
  color: var(--text);
}

.desktop-root .artifact-card,
.desktop-root .message-bubble .card-text,
.desktop-root .log-message {
  color: var(--text);
}

.desktop-root .overview-panel {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid var(--border);
  color: var(--text);
  backdrop-filter: blur(22px);
}

.desktop-root .app-overlay-panel {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--border);
  color: var(--text);
  backdrop-filter: blur(22px);
}

.desktop-root .floating-window {
  color: var(--text);
}

.os-statusbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300;
  min-height: var(--os-chrome-top);
  height: var(--os-chrome-top);
  overflow: visible;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 clamp(0.55rem, 2vw, 0.75rem);
  border-bottom: 1px solid var(--chrome-border);
  font-size: clamp(0.68rem, 1.6vw, 0.78rem);
  touch-action: manipulation;
  cursor: default;
}

.os-status-left,
.os-status-right {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.os-status-left {
  grid-column: 1;
  justify-self: start;
}

.os-status-right {
  grid-column: 3;
  justify-self: end;
}

.status-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 1.75rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--chrome-text-muted);
  cursor: pointer;
  position: relative;
  font-size: 0.9rem;
  padding: 0;
  transition: background 0.12s ease, color 0.12s ease;
}

.status-icon-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--chrome-text);
}

.boot-guest-hint {
  margin: 0.6rem 0 0;
  font-size: clamp(0.78rem, 1.6vw, 0.88rem);
  color: color-mix(in srgb, var(--accent) 70%, var(--text));
  text-align: center;
}

.status-login-btn {
  display: inline-flex;
  align-items: center;
  height: 1.75rem;
  padding: 0 0.65rem;
  border: 1px solid color-mix(in srgb, var(--chrome-text) 28%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #60a5fa) 22%, transparent);
  color: var(--chrome-text);
  font-size: clamp(0.68rem, 1.5vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.status-login-btn:hover {
  background: color-mix(in srgb, var(--accent, #60a5fa) 38%, transparent);
  border-color: color-mix(in srgb, var(--accent, #60a5fa) 55%, transparent);
}

.status-clock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 2px 8px;
  border-radius: 6px;
  line-height: 1.15;
  cursor: default;
}

.status-clock time {
  font-size: 0.8rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--chrome-text);
}

.status-clock span {
  font-size: 0.65rem;
  color: var(--chrome-text-muted);
}

.settings-shade {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 10%;
  right: 10%;
  max-height: min(72vh, calc(100vh - var(--os-chrome-top) - 3rem));
  z-index: 320;
  padding: 0.85rem clamp(0.75rem, 2vw, 1.25rem) 1rem;
  border-radius: 0 0 clamp(14px, 2vw, 18px) clamp(14px, 2vw, 18px);
  background: transparent;
  border: none;
  overflow: auto;
}

.settings-shade-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
  padding: 0.35rem 0.5rem;
  border-radius: clamp(10px, 1.5vw, 14px);
  background: color-mix(in srgb, var(--surface) 28%, transparent);
  backdrop-filter: blur(10px);
}

.settings-shade-header strong {
  font-size: clamp(0.82rem, 2vw, 0.95rem);
}

.settings-shade-header button {
  border: 0;
  background: transparent;
  font-size: 1.25rem;
  cursor: pointer;
  color: var(--muted);
}

.settings-shade-body .screen-inner {
  max-width: none;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.settings-shade-body .setting-card {
  background: color-mix(in srgb, var(--surface) 32%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--border) 35%, transparent);
  box-shadow: none;
}

.settings-shade-body .update-banner {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  backdrop-filter: blur(8px);
}

.settings-tab-layout {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.settings-tab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.25rem, 1vw, 0.45rem);
  padding: clamp(0.35rem, 1vw, 0.5rem);
  border-radius: clamp(10px, 1.5vw, 14px);
  background: color-mix(in srgb, var(--surface) 28%, transparent);
  backdrop-filter: blur(10px);
}

.settings-tab-btn {
  padding: clamp(0.35rem, 1.2vw, 0.5rem) clamp(0.55rem, 1.8vw, 0.85rem);
  border: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
  border-radius: clamp(8px, 1.2vw, 10px);
  background: color-mix(in srgb, var(--surface) 20%, transparent);
  color: var(--text);
  font-size: clamp(0.72rem, 1.6vw, 0.85rem);
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s, border-color 0.15s;
}

.settings-tab-btn:hover {
  background: color-mix(in srgb, var(--surface) 40%, transparent);
}

.settings-tab-btn.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  font-weight: 600;
}

.settings-tab-content {
  min-height: clamp(8rem, 24vh, 14rem);
}

.settings-tab-content .setting-card {
  margin: 0;
}

.settings-tab-content .logout-btn {
  margin-top: 1rem;
}

.desktop-wallpaper {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.main-shell {
  position: fixed;
  top: var(--os-chrome-top);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  overflow: hidden;
}

.comm-window-panel {
  display: flex;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.comm-window-side {
  display: flex;
  min-width: 0;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

/* 有会话时联系栏默认更宽，避免被对话/交互挤没；桌面可拖拽改宽 */
.comm-window-panel.has-conversation .comm-window-side {
  flex: 0 0 18.75rem;
  min-width: 16rem;
  max-width: 35rem;
}

.comm-window-panel.has-actions .comm-window-side {
  flex: 0 0 18.75rem;
  min-width: 16rem;
  max-width: 35rem;
}

.comm-window-conversation {
  flex: 1 1 auto;
  min-width: 15rem;
  display: flex;
  flex-direction: column;
  border-left: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  overflow: hidden;
}

.comm-window-panel.has-actions .comm-window-conversation {
  flex: 1 1 auto;
  min-width: 15rem;
}

/* 第四栏「交互」面板 */
.comm-window-actions {
  flex: 0 0 17.5rem;
  min-width: 14rem;
  max-width: 35rem;
  display: flex;
  flex-direction: column;
  border-left: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  overflow: hidden;
}

@media (max-width: 900px) {
  .comm-window-actions {
    min-width: 14rem;
  }
}

.comm-col-splitter {
  flex: 0 0 6px;
  width: 6px;
  cursor: col-resize;
  touch-action: none;
  position: relative;
  z-index: 3;
  background: transparent;
  align-self: stretch;
}

.comm-col-splitter::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2px;
  width: 2px;
  background: color-mix(in srgb, var(--border) 55%, transparent);
}

.comm-col-splitter:hover::after,
.comm-col-splitter.dragging::after {
  left: 1px;
  width: 4px;
  background: var(--accent, #3b82f6);
}

.comm-action-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.comm-action-header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: clamp(0.55rem, 1.6vw, 0.75rem) clamp(0.65rem, 1.8vw, 0.85rem) 0.35rem;
  flex-shrink: 0;
}

.comm-action-header.hidden,
.comm-action-ref.hidden {
  display: none;
}

.comm-phone-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.3rem 0.45rem;
  box-sizing: border-box;
}

.comm-phone-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.05rem;
  border: 0;
  background: transparent;
  color: var(--accent, #0ea5e9);
  font-size: 0.9rem;
  line-height: 1.2;
  cursor: pointer;
  padding: 0.4rem 0.15rem;
  flex: 0 1 34%;
  max-width: 34%;
  min-width: 0;
}

.comm-phone-nav-back {
  justify-content: flex-start;
}

.comm-phone-nav-forward {
  justify-content: flex-end;
}

.comm-phone-nav.disabled,
.comm-phone-nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.comm-phone-nav-chevron {
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1;
}

.comm-phone-bar-title {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comm-phone-nav-spacer {
  flex: 0 1 34%;
  max-width: 34%;
}

.comm-phone-nav span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comm-action-header .comm-session-avatar {
  flex-shrink: 0;
  width: clamp(2rem, 4vw, 2.35rem);
  height: clamp(2rem, 4vw, 2.35rem);
  min-width: clamp(2rem, 4vw, 2.35rem);
  min-height: clamp(2rem, 4vw, 2.35rem);
  font-size: clamp(0.85rem, 2vw, 1rem);
  border-radius: 10px;
}

.comm-action-header-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.comm-action-name {
  font-size: clamp(0.85rem, 2vw, 0.96rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comm-action-header-sub {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: clamp(0.62rem, 1.4vw, 0.7rem);
}

.comm-action-kind-badge {
  padding: 0.08rem 0.4rem;
  border-radius: 999px;
  font-size: clamp(0.58rem, 1.3vw, 0.66rem);
  line-height: 1.4;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

.comm-action-close {
  border: 0;
  background: transparent;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: 0.15rem 0.35rem;
  flex-shrink: 0;
}

.comm-action-close:hover {
  color: var(--text);
}

.comm-action-ref {
  margin: 0;
  padding: 0 clamp(0.65rem, 1.8vw, 0.85rem) 0.45rem;
  font-size: clamp(0.58rem, 1.3vw, 0.66rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  flex-shrink: 0;
}

.comm-action-tabs {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem clamp(0.65rem, 1.8vw, 0.85rem);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
  flex-shrink: 0;
}

.comm-action-tab {
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 8px;
  padding: 0.28rem 0.7rem;
  font-size: clamp(0.72rem, 1.6vw, 0.8rem);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.comm-action-tab:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.comm-action-tab.active {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  font-weight: 600;
}

.comm-action-scroll.hidden {
  display: none;
}

.comm-action-tab-placeholder {
  margin: 0;
  padding: 0.75rem 0.15rem;
  font-size: clamp(0.72rem, 1.6vw, 0.8rem);
}

.comm-action-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(0.55rem, 1.6vw, 0.75rem) clamp(0.65rem, 1.8vw, 0.85rem);
}

.comm-action-section {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.comm-action-section-title {
  margin: 0;
  font-size: clamp(0.62rem, 1.4vw, 0.7rem);
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.comm-action-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.comm-action-metric {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.5rem 0.55rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}

.comm-action-metric-icon {
  font-size: 0.95rem;
  line-height: 1;
}

.comm-action-metric-label {
  font-size: clamp(0.56rem, 1.3vw, 0.64rem);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comm-action-metric-value {
  font-size: clamp(0.78rem, 1.8vw, 0.9rem);
  font-weight: 600;
}

.comm-action-metric-bar {
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 65%, transparent);
  overflow: hidden;
}

.comm-action-metric-bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.3s;
}

.comm-action-ops {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.comm-action-op {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.65rem 0.4rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.comm-action-op:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.comm-action-op:active:not(:disabled) {
  transform: scale(0.97);
}

.comm-action-op:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.comm-action-op-icon {
  font-size: 1.15rem;
  line-height: 1;
}

.comm-action-op-label {
  font-size: clamp(0.6rem, 1.4vw, 0.68rem);
  color: var(--text);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.comm-action-ai {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.6rem 0.65rem;
  border-radius: 12px;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.comm-action-ai-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: clamp(0.72rem, 1.6vw, 0.8rem);
}

.comm-action-ai p {
  margin: 0;
  font-size: clamp(0.6rem, 1.4vw, 0.68rem);
}

.comm-shortcut-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
}

.comm-shortcut {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  aspect-ratio: 1;
  padding: 0.35rem 0.2rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  cursor: pointer;
  min-width: 0;
}

.comm-shortcut:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.comm-shortcut:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.comm-shortcut-icon {
  font-size: 1.15rem;
  line-height: 1;
}

.comm-shortcut-label {
  font-size: clamp(0.52rem, 1.2vw, 0.6rem);
  color: var(--text);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.comm-action-profile {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.55rem 0.6rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}

.comm-action-profile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: clamp(0.68rem, 1.5vw, 0.76rem);
}

.comm-kind-tag {
  flex-shrink: 0;
  padding: 0.04rem 0.32rem;
  border-radius: 999px;
  font-size: 0.58rem;
  line-height: 1.4;
  color: var(--muted);
  background: color-mix(in srgb, var(--border) 35%, transparent);
}

/* ---- interaction bar: Cli / Gui / Log panels ---- */

.comm-action-cli-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.comm-action-cli-panel.hidden {
  display: none;
}

.comm-action-cli-terminal {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #1a1b26;
  border-radius: 10px;
  margin: clamp(0.45rem, 1.2vw, 0.6rem);
  overflow: hidden;
}

.comm-action-cli-status {
  margin: 0;
  padding: 0.4rem 0.55rem;
  font-size: clamp(0.68rem, 1.5vw, 0.76rem);
}

.comm-action-cli-xterm {
  flex: 1;
  min-height: 250px;
  padding: 0.35rem 0.45rem;
  overflow: hidden;
}

.comm-action-gui-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: clamp(0.55rem, 1.6vw, 0.75rem) clamp(0.65rem, 1.8vw, 0.85rem);
}

.comm-action-gui-panel.hidden {
  display: none;
}

.comm-action-gui-launch {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;
}

.comm-action-gui-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 1.2rem 1.5rem;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--text);
  font-size: clamp(0.78rem, 1.8vw, 0.9rem);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.comm-action-gui-btn:hover {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

.comm-action-gui-btn:active {
  transform: scale(0.97);
}

.comm-action-gui-btn-icon {
  font-size: 2rem;
  line-height: 1;
}

.comm-action-log-section {
  gap: 0.3rem;
}

.comm-action-log-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

.comm-action-log-refresh {
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  background: transparent;
  color: var(--muted);
  border-radius: 8px;
  width: 1.6rem;
  height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.comm-action-log-refresh:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--text);
}

.comm-action-log-refresh:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.comm-action-log-viewer {
  margin: 0;
  padding: 0.5rem 0.55rem;
  background: #1a1b26;
  color: #a9b1d6;
  border-radius: 8px;
  font-family: "Cascadia Code", "JetBrains Mono", "Fira Code", monospace;
  font-size: clamp(0.58rem, 1.3vw, 0.66rem);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 280px;
  overflow: auto;
}

.comm-action-log-viewer.error-text {
  color: #f7768e;
}

.comm-action-log-trunc {
  color: #565f89;
  font-style: italic;
}

.comm-action-metric-value.has-data {
  color: var(--text);
}

.comm-action-app-status {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0;
}

.comm-action-app-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: clamp(0.6rem, 1.4vw, 0.68rem);
  font-weight: 600;
}

.comm-action-app-badge.running {
  background: color-mix(in srgb, #22c55e 15%, transparent);
  color: #22c55e;
  border: 1px solid color-mix(in srgb, #22c55e 30%, transparent);
}

.comm-action-app-badge.stopped {
  background: color-mix(in srgb, var(--border) 30%, transparent);
  color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}

.comm-action-op-note {
  font-size: clamp(0.5rem, 1.2vw, 0.58rem);
  margin-top: 0.1rem;
}


.comm-window-conversation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: clamp(0.5rem, 1.5vw, 0.7rem) clamp(0.65rem, 1.8vw, 0.85rem);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  flex-shrink: 0;
}

.comm-window-conversation-title {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.comm-window-conversation-title strong {
  font-size: clamp(0.85rem, 2vw, 0.98rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comm-window-conversation-title .muted {
  font-size: clamp(0.62rem, 1.4vw, 0.7rem);
}

.comm-window-conversation-close {
  border: 0;
  background: transparent;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: 0.15rem 0.35rem;
  flex-shrink: 0;
}

.comm-window-conversation .comm-content-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: clamp(0.55rem, 1.6vw, 0.75rem);
}

.comm-window-conversation .comm-content-footer {
  flex-shrink: 0;
}

.comm-window-settings-detail {
  flex: 1 1 62%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  overflow: hidden;
}

.comm-settings-detail-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: clamp(0.55rem, 1.6vw, 0.75rem);
}

.comm-settings-detail-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.comm-settings-detail-hint {
  margin: 0;
  font-size: 0.8rem;
}

.comm-settings-detail-body .ai-model-panel {
  gap: 0.75rem;
}

.comm-settings-detail-body .ai-form-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
}

.comm-window-rail {
  width: clamp(2.75rem, 5vw, 3.25rem);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.45rem 0.35rem;
  border-right: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  background: rgba(8, 10, 20, 0.12);
}

.comm-window-list {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.comm-window-list .comm-list-panel {
  flex: 1;
  min-height: 0;
  height: 100%;
}

.floating-window-body .comm-window-panel {
  margin: 0;
  border-radius: 0;
}

.floating-window-body .comm-list-panel {
  padding: 0.35rem 0.45rem 0.55rem;
}

.comm-sidebar-wrap {
  position: relative;
  min-width: 0;
  height: 100%;
  z-index: 120;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.main-shell.comm-hide-manual:not(.comm-peek) .comm-sidebar-wrap,
.main-shell.comm-hide-auto:not(.comm-peek) .comm-sidebar-wrap {
  position: fixed;
  left: 0;
  top: var(--os-chrome-top);
  bottom: 0;
  width: var(--os-comm-expanded);
  max-width: min(88vw, var(--os-comm-expanded));
  transform: translateX(-100%);
  pointer-events: none;
}

.main-shell.comm-hide-manual.comm-peek .comm-sidebar-wrap,
.main-shell.comm-hide-auto.comm-peek .comm-sidebar-wrap {
  position: fixed;
  left: 0;
  top: var(--os-chrome-top);
  bottom: 0;
  width: var(--os-comm-expanded);
  max-width: min(88vw, var(--os-comm-expanded));
  transform: translateX(0);
  pointer-events: auto;
  box-shadow: 8px 0 32px rgba(0, 0, 0, 0.28);
}

.comm-reveal-tab {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 125;
  width: clamp(0.65rem, 1.5vw, 0.85rem);
  padding: clamp(0.85rem, 2vh, 1.1rem) 0;
  border: 0;
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  border-left: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1;
}

.comm-reveal-tab:hover {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  color: var(--text);
}

.comm-rail-hide-group {
  display: none;
}

.comm-sidebar-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  font-size: 0.82rem;
  flex-shrink: 0;
}

.comm-sidebar-tools {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
}

.comm-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(1.65rem, 3.5vw, 1.85rem);
  height: clamp(1.65rem, 3.5vw, 1.85rem);
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: var(--muted);
  padding: 0;
}

.comm-tool-btn.active,
.comm-tool-btn:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--text);
}

.comm-tool-btn .comm-hide-icon {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 8px;
  border: 1px dashed color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--bg) 60%, transparent);
}

.comm-tool-btn.active .comm-hide-icon {
  border-style: solid;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.comm-hide-manual::after {
  content: "◧";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0.72rem;
}

.comm-hide-auto::after {
  content: "◔";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0.72rem;
}

.comm-sidebar-body {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.comm-sidebar {
  position: relative;
  z-index: 120;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(18px);
  border-right: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
}

.comm-rail {
  width: clamp(3.3rem, 7vw, 4rem);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0.45rem 0.35rem 0.35rem;
  border-right: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
}

.comm-rail-main {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.comm-rail-footer {
  margin-top: auto;
  padding-top: 0.35rem;
}

.comm-rail-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  border: 0;
  background: transparent;
  border-radius: 10px;
  padding: 0.35rem 0.2rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.comm-rail-btn .app-tile {
  flex: 0 0 auto;
}

.comm-rail-btn:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.comm-rail-btn.active {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.comm-rail-label {
  display: block;
  font-size: 0.56rem;
  line-height: 1.2;
  color: var(--muted);
  text-align: center;
}

.comm-rail-btn.active .comm-rail-label {
  color: var(--text);
  font-weight: 600;
}

.comm-rail .app-tile.app-tile-rail {
  width: clamp(1.75rem, 4vw, 2rem);
  height: clamp(1.75rem, 4vw, 2rem);
  min-width: clamp(1.75rem, 4vw, 2rem);
  min-height: clamp(1.75rem, 4vw, 2rem);
  font-size: clamp(0.72rem, 1.8vw, 0.82rem);
  border-radius: 8px;
}

.comm-list-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0.35rem 0.45rem 0.55rem;
}

.comm-list-hint {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
}

.comm-session-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.comm-session-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.55rem;
  border-radius: 12px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}

.comm-session-item:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.comm-session-item.active {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.comm-session-item.pinned {
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}

.comm-session-item.unread .comm-session-meta strong {
  font-weight: 700;
}

.comm-session-title-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.comm-pin-badge {
  font-size: 0.65rem;
  color: var(--accent);
}

.comm-unread-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #ef4444;
  flex-shrink: 0;
}

.comm-session-actions {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.15s;
}

.comm-session-item:hover .comm-session-actions {
  opacity: 1;
}

.comm-action-btn {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.8rem;
  padding: 0.15rem 0.25rem;
  border-radius: 6px;
}

.comm-action-btn:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text);
}

.comm-list-header {
  padding: 0.45rem 0.35rem 0.35rem;
  font-size: clamp(0.8rem, 1.8vw, 0.9rem);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 35%, transparent);
  margin-bottom: 0.35rem;
}

.comm-list-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0 0.1rem 0.35rem;
}

.comm-filter-btn {
  border: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  font-size: 0.68rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.comm-filter-btn.active,
.comm-filter-btn:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.comm-list-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.comm-contact-groups {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.comm-contact-kind {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.35rem;
}

.comm-directory-groups {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.comm-directory-group {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.comm-directory-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 0.35rem;
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.comm-directory-count {
  font-size: 0.68rem;
  opacity: 0.75;
}

.comm-directory-item {
  cursor: pointer;
}

.comm-presence-dot.comm-presence-online {
  background: #22c55e;
  box-shadow: 0 0 0 2px color-mix(in srgb, #22c55e 25%, transparent);
}

.comm-presence-dot.comm-presence-offline {
  background: #6b7280;
}

.comm-conversation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.4rem 0.65rem;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  min-height: 2.2rem;
}

.comm-conversation-header-main {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  flex: 1;
}

.comm-conversation-title {
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comm-avatar-device { background: linear-gradient(135deg, #0ea5e9, #06b6d4); }
.comm-avatar-app { background: linear-gradient(135deg, #f59e0b, #f97316); }
.comm-avatar-service { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.comm-avatar-ai { background: linear-gradient(135deg, #6366f1, #a855f7); }
.comm-avatar-task { background: linear-gradient(135deg, #10b981, #34d399); }
.comm-avatar-system.comm-avatar-mos {
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  color: #fff;
}

/* 联系列表中固定的 MOS 官方客服联系人项 */
.comm-mos-group {
  margin-bottom: 0.4rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border-subtle, rgba(127, 127, 127, 0.18));
}
.comm-mos-item {
  cursor: pointer;
}
.comm-mos-item .comm-mos-badge {
  margin-left: 0.4rem;
  padding: 0 0.4rem;
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1.4;
  color: #0ea5e9;
  background: color-mix(in srgb, #0ea5e9 16%, transparent);
  border: 1px solid color-mix(in srgb, #0ea5e9 40%, transparent);
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.comm-settings-panel {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.45rem;
}

.comm-settings-panel h4 {
  margin: 0;
  font-size: 0.9rem;
}

.comm-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.8rem;
}

.comm-setting-row select {
  font-size: 0.78rem;
  padding: 0.25rem 0.45rem;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
  color: var(--text);
}

.comm-conversation {
  flex: 1 1 62%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  overflow: hidden;
}

.comm-conversation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: clamp(0.5rem, 1.5vw, 0.7rem) clamp(0.65rem, 1.8vw, 0.85rem);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  flex-shrink: 0;
}

.comm-conversation-header-main {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  flex: 1;
}

.comm-conversation-title {
  font-size: clamp(0.85rem, 2vw, 0.98rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.comm-conversation-close {
  border: 0;
  background: transparent;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: 0.15rem 0.35rem;
  flex-shrink: 0;
  border-radius: 6px;
}

.comm-conversation-close:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.comm-conversation-meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.comm-steward-badge {
  font-size: 0.65rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

.comm-branch-tree {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.35rem 0.25rem;
  margin-bottom: 0.5rem;
  border-left: 2px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.comm-branch-node {
  display: flex;
  flex-direction: column;
}

.comm-branch-row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.4rem;
  border-radius: 6px;
  cursor: pointer;
}

.comm-branch-row:hover {
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}

.comm-branch-toggle {
  width: 1.1rem;
  height: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 0.6rem;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.comm-branch-toggle.disabled {
  visibility: hidden;
}

.comm-branch-toggle.expanded {
  transform: rotate(90deg);
}

.comm-branch-title {
  font-size: 0.78rem;
  color: var(--text);
  user-select: none;
}

.comm-branch-title.active {
  color: var(--accent);
  font-weight: 600;
}

.comm-conversation-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  overflow-x: hidden;
  overflow-anchor: none;
  padding: clamp(0.55rem, 1.6vw, 0.75rem);
  /* 始终保留滚动条占位（overlay 或 thin），避免 hover 时出现/消失导致布局晃动。
     微信式体验：滚动条很细且不占用独立布局空间。 */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.comm-conversation-body::-webkit-scrollbar {
  width: 5px;
}

.comm-conversation-body::-webkit-scrollbar-track {
  background: transparent;
}

.comm-conversation-body::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
}

.comm-conversation-body:hover {
  scrollbar-color: color-mix(in srgb, var(--muted) 35%, transparent) transparent;
}

.comm-conversation-body:hover::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted) 35%, transparent);
}

.comm-conversation-footer {
  flex-shrink: 0;
  padding: clamp(0.5rem, 1.5vw, 0.7rem) clamp(0.65rem, 1.8vw, 0.85rem);
  border-top: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  background: color-mix(in srgb, var(--bg) 35%, transparent);
}

/* ===== 微信式气泡对话 + 置顶卡片流 ===== */
.comm-chat-empty {
  text-align: center;
  margin: auto;
  padding: 2rem 1rem;
  font-size: 0.85rem;
}

/* Inline card row: artifact cards rendered inside the shared chat timeline.
   Cards span full width (richer than a bubble), aligned left regardless of
   sender — the sender is conveyed by the card's own avatar + left border. */
.comm-card-row {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
}

.comm-card-row.mine {
  flex-direction: row-reverse;
}

.comm-card-wrap {
  display: flex;
  flex-direction: column;
  max-width: 80%;
  min-width: 0;
}

.comm-card-row.mine .comm-card-wrap {
  align-items: flex-end;
}

.comm-card-wrap .artifact-card {
  padding: 0.5rem 0.65rem;
  font-size: 0.8rem;
}

.comm-card-wrap .artifact-card header {
  margin-bottom: 0.2rem;
  font-size: 0.68rem;
}

.comm-card-time {
  display: block;
  font-size: 0.6rem;
  margin-top: 0.2rem;
  opacity: 0.6;
  padding: 0 0.2rem;
}

.comm-chat-stream {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
  min-height: 0;
  margin-top: auto;
}

.comm-chat-scroll-anchor {
  flex-shrink: 0;
  width: 100%;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}

.comm-chat-row {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
}

.comm-chat-row.mine {
  flex-direction: row-reverse;
}

.comm-chat-avatar {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #a855f7);
}

.comm-chat-avatar.ai {
  background: linear-gradient(135deg, #ec4899, #f472b6);
}

.comm-chat-avatar.device {
  background: linear-gradient(135deg, #0ea5e9, #22d3ee);
}

.comm-chat-bubble {
  max-width: 72%;
  padding: 0.45rem 0.7rem;
  border-radius: 14px;
  font-size: 0.85rem;
  line-height: 1.45;
  word-break: break-word;
  position: relative;
}

.comm-chat-bubble.mine {
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.comm-chat-bubble.theirs {
  background: color-mix(in srgb, var(--surface-2) 92%, var(--border));
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  border-bottom-left-radius: 4px;
}

.comm-chat-text {
  margin: 0;
}

.comm-chat-bubble-time {
  display: block;
  font-size: 0.6rem;
  margin-top: 0.2rem;
  opacity: 0.6;
}

/* IM bubble attachments: inline image / file carried in the payload. */
.comm-chat-attachment {
  margin-top: 0.3rem;
  border-radius: 8px;
  overflow: hidden;
}
.comm-chat-image img {
  display: block;
  max-width: 100%;
  max-height: 200px;
  object-fit: contain;
  border-radius: 8px;
}
.comm-chat-file {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.5rem;
  background: color-mix(in srgb, var(--border) 50%, transparent);
  border-radius: 8px;
  font-size: 0.75rem;
}
.comm-chat-bubble.mine .comm-chat-file {
  background: color-mix(in srgb, #fff 20%, transparent);
}
.comm-chat-file-icon {
  font-size: 0.9rem;
}

/* ===== 微信式输入区：工具栏 + textarea + 发送 ===== */
.comm-chat-composer {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  position: relative;
}

.comm-chat-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  position: relative;
}

.comm-chat-toolbar-left,
.comm-chat-toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  position: relative;
  min-width: 0;
}

.comm-chat-toolbar-right {
  flex: 1;
  justify-content: flex-end;
}

.comm-chat-tool {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(1.85rem, 4.2vw, 2.1rem);
  height: clamp(1.85rem, 4.2vw, 2.1rem);
  border: 0;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  color: var(--muted);
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
  position: relative;
}

.comm-chat-tool:hover,
.comm-chat-tool.active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text);
}

.comm-chat-tool-icon {
  font-size: 1.15rem;
  line-height: 1;
}

.comm-chat-model-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  max-width: min(100%, 18rem);
  min-width: 0;
  padding: 0.28rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  color: var(--text);
  font-size: clamp(0.7rem, 1.6vw, 0.78rem);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.comm-chat-model-btn:hover,
.comm-chat-model-btn.active {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.comm-chat-model-provider {
  color: var(--muted);
  flex-shrink: 0;
}

.comm-chat-model-sep {
  color: var(--muted);
  opacity: 0.7;
}

.comm-chat-model-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-weight: 600;
}

.comm-chat-model-caret {
  color: var(--muted);
  font-size: 0.7rem;
  flex-shrink: 0;
}

.comm-model-popover {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.45rem);
  width: min(360px, 88vw);
  max-height: min(280px, 42vh);
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  z-index: 24;
  overflow: hidden;
}

.comm-model-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  font-size: 0.78rem;
}

.comm-model-clear {
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 0.72rem;
  cursor: pointer;
  padding: 0.15rem 0.35rem;
  border-radius: 6px;
}

.comm-model-clear:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.comm-model-popover-body {
  display: grid;
  grid-template-columns: minmax(5.5rem, 34%) 1fr;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.comm-model-providers,
.comm-model-models {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.4rem;
  overflow-y: auto;
  max-height: min(230px, 36vh);
}

.comm-model-providers {
  border-right: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  background: color-mix(in srgb, var(--bg) 40%, transparent);
}

.comm-model-provider,
.comm-model-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  border-radius: 8px;
  padding: 0.45rem 0.5rem;
  cursor: pointer;
  color: var(--text);
  transition: background 0.12s;
}

.comm-model-provider {
  font-size: 0.78rem;
  font-weight: 600;
}

.comm-model-provider:hover,
.comm-model-option:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.comm-model-provider.active,
.comm-model-option.active {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.comm-model-option-name {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
}

.comm-model-option-id {
  font-size: 0.68rem;
  color: var(--muted);
  word-break: break-all;
}

.comm-model-option-badge {
  margin-top: 0.15rem;
  font-size: 0.62rem;
  padding: 0.08rem 0.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}

.comm-model-empty {
  margin: 0.5rem;
  font-size: 0.75rem;
}

.comm-chat-input-row {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}

.comm-chat-input {
  flex: 1;
  min-height: 2.35rem;
  max-height: 8.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: clamp(0.82rem, 1.8vw, 0.9rem);
  line-height: 1.45;
  resize: none;
  font-family: inherit;
  overflow-y: auto;
  box-sizing: border-box;
}

.comm-chat-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}

.comm-chat-input::placeholder {
  color: var(--muted);
}

.comm-chat-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.comm-chat-hint {
  font-size: clamp(0.65rem, 1.5vw, 0.72rem);
  color: var(--muted);
  min-width: 0;
}

.comm-chat-send {
  flex-shrink: 0;
  padding: 0.45rem 1.15rem;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  white-space: nowrap;
  min-height: 2.1rem;
}

.comm-chat-send:hover {
  background: var(--accent-hover);
}

.comm-chat-send:active {
  opacity: 0.8;
}

.comm-chat-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.comm-chat-pending-file {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.55rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}

.comm-chat-pending-thumb {
  width: clamp(2.2rem, 6vw, 2.8rem);
  height: clamp(2.2rem, 6vw, 2.8rem);
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.comm-chat-pending-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.comm-chat-pending-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
}

.comm-chat-pending-remove {
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 55%, transparent);
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
}

.comm-chat-pending-remove:hover {
  background: color-mix(in srgb, #ef4444 18%, transparent);
  color: #ef4444;
}

/* 表情选择面板 */
.comm-emoji-popover {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.4rem);
  width: min(260px, 80vw);
  max-width: 260px;
  padding: 0.55rem;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.2rem;
  z-index: 20;
}

.comm-emoji-popover button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  padding: 0.3rem;
  font-size: 1.1rem;
  line-height: 1;
  transition: background 0.12s;
}

.comm-emoji-popover button:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.comm-hidden-file-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 767px) {
  .comm-model-popover {
    width: min(320px, 92vw);
  }

  .comm-model-popover-body {
    grid-template-columns: 1fr;
  }

  .comm-model-providers {
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
    flex-direction: row;
    flex-wrap: wrap;
    max-height: none;
  }

  .comm-model-provider {
    width: auto;
  }

  .comm-chat-hint {
    display: none;
  }
}

.comm-session-avatar {
  position: relative;
  width: clamp(2rem, 4.5vw, 2.35rem);
  height: clamp(2rem, 4.5vw, 2.35rem);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 0.82rem;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #818cf8);
}

.comm-avatar-collab {
  background: linear-gradient(135deg, #059669, #34d399);
}

.comm-avatar-device {
  background: linear-gradient(135deg, #0ea5e9, #38bdf8);
}

.comm-avatar-app {
  background: linear-gradient(135deg, #8b5cf6, #c084fc);
}

.comm-avatar-service {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.comm-avatar-ai {
  background: linear-gradient(135deg, #ec4899, #f472b6);
}

.comm-presence-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--muted);
}

.comm-presence-dot.comm-presence-device-online,
.comm-presence-dot.comm-presence-app-online,
.comm-presence-dot.comm-presence-ai-online,
.comm-presence-dot.comm-presence-person-online,
.comm-presence-dot.comm-presence-service-online {
  background: #22c55e;
  box-shadow: 0 0 0 2px color-mix(in srgb, #22c55e 25%, transparent);
}

.comm-presence-dot.comm-presence-device-idle,
.comm-presence-dot.comm-presence-app-idle,
.comm-presence-dot.comm-presence-ai-idle,
.comm-presence-dot.comm-presence-person-idle,
.comm-presence-dot.comm-presence-service-idle {
  background: #f59e0b;
}

.comm-presence-dot.comm-presence-device-busy,
.comm-presence-dot.comm-presence-app-busy,
.comm-presence-dot.comm-presence-ai-busy,
.comm-presence-dot.comm-presence-person-busy,
.comm-presence-dot.comm-presence-service-busy {
  background: #ef4444;
}

.comm-session-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.comm-session-meta strong {
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comm-session-meta .muted {
  font-size: 0.68rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comm-list-compose {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
}

.comm-content-pane {
  position: absolute;
  inset: 0;
  z-index: 185;
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(20px);
  pointer-events: auto;
}

.main-workspace.comm-chat-open .window-stage {
  /* 通讯会话内容已移入通讯浮窗内部双栏，不再淡化主工作区 */
  opacity: 1;
  pointer-events: auto;
}

.comm-content-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: clamp(0.65rem, 2vw, 0.85rem) clamp(0.85rem, 2.5vw, 1.1rem);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  flex-shrink: 0;
}

.comm-content-header h2 {
  margin: 0;
  font-size: clamp(0.95rem, 2.2vw, 1.1rem);
}

.comm-content-header p {
  margin: 0.15rem 0 0;
}

.comm-content-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.comm-content-close {
  border: 0;
  background: transparent;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: 0.15rem 0.35rem;
}

.comm-content-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: clamp(0.65rem, 2vw, 0.85rem);
}

.comm-content-footer {
  flex-shrink: 0;
  padding: clamp(0.55rem, 1.8vw, 0.75rem) clamp(0.85rem, 2.5vw, 1.1rem);
  border-top: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  background: color-mix(in srgb, var(--bg) 35%, transparent);
}

.comm-sidebar.collapsed .comm-list-panel {
  display: none;
}

.comm-rail-btn.active,
.comm-rail-btn:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--text);
}

.comm-rail-icon {
  width: clamp(1.75rem, 4vw, 2rem);
  height: clamp(1.75rem, 4vw, 2rem);
  border-radius: 10px;
}

.comm-icon-contact { background: linear-gradient(135deg, #6366f1, #818cf8); }
.comm-icon-conversation { background: linear-gradient(135deg, #9333ea, #c084fc); }
.comm-icon-collab { background: linear-gradient(135deg, #059669, #34d399); }
.comm-icon-ai { background: linear-gradient(135deg, #0891b2, #22d3ee); }

.comm-rail-toggle {
  display: none;
}

.comm-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.comm-panel-header {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  font-size: 0.82rem;
}

.comm-panel-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.comm-sidebar .screen-inner {
  max-width: none;
  margin: 0;
  padding: 0.65rem;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.comm-sidebar .sub-tabs {
  flex-wrap: wrap;
  gap: 0.25rem;
}

.comm-sidebar .comm-grid {
  grid-template-columns: 1fr;
  gap: 0.65rem;
}

.comm-sidebar .messages-panel {
  min-height: clamp(180px, 28vh, 320px);
}

.main-workspace {
  position: relative;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

.main-workspace.settings-open > :not(.settings-desktop-dismiss):not(.comm-content-pane) {
  pointer-events: none;
  opacity: 0.28;
  filter: blur(3px);
}

.settings-desktop-dismiss {
  position: absolute;
  inset: 0;
  z-index: 190;
  background: rgba(6, 8, 16, 0.42);
  cursor: default;
  pointer-events: auto;
}

.app-overlay {
  position: absolute;
  inset: 0;
  z-index: 180;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: clamp(0.5rem, 2vw, 1rem);
}

.app-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 18, 0.45);
}

.app-overlay-panel {
  position: relative;
  z-index: 1;
  width: min(960px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
}

.app-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
}

.app-overlay-close {
  border: 0;
  background: transparent;
  font-size: 1.25rem;
  cursor: pointer;
  color: var(--muted);
}

.app-overlay-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0.75rem;
}

.app-overlay-body .screen-inner {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.overview-overlay {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 3vw, 1.5rem);
}

.overview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 16, 0.62);
  backdrop-filter: blur(8px);
}

.overview-panel {
  position: relative;
  z-index: 1;
  width: min(920px, 100%);
  max-height: min(86vh, calc(100vh - var(--os-chrome-top) - 2rem));
  overflow: auto;
  padding: clamp(0.85rem, 2.5vw, 1.25rem);
  border-radius: 22px;
}

.overview-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.overview-header h2 {
  margin: 0 0 0.25rem;
  font-size: clamp(1.1rem, 2.8vw, 1.35rem);
}

.overview-header button {
  border: 0;
  background: transparent;
  font-size: 1.35rem;
  cursor: pointer;
  color: var(--muted);
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(120px, 22vw, 160px), 1fr));
  gap: clamp(0.55rem, 2vw, 0.85rem);
}

.overview-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  cursor: pointer;
  text-align: left;
  transition: transform 0.15s, border-color 0.15s;
}

.overview-tile:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}

.overview-icon {
  width: clamp(2.25rem, 5vw, 2.75rem);
  height: clamp(2.25rem, 5vw, 2.75rem);
  border-radius: 12px;
}

.launcher-home { background: linear-gradient(135deg, #6366f1, #818cf8); }

.overview-section {
  margin-top: 1.25rem;
}

.overview-section h3 {
  margin: 0 0 0.55rem;
  font-size: 0.92rem;
}

.resource-center-panel.overview-panel {
  width: min(var(--os-narrow-w), calc(100vw - clamp(1rem, 4vw, 2rem)));
  height: min(78vh, calc(100vh - var(--os-chrome-top) - clamp(4.5rem, 14vh, 6.5rem)));
  max-height: min(78vh, calc(100vh - var(--os-chrome-top) - clamp(4.5rem, 14vh, 6.5rem)));
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-radius: clamp(16px, 2.5vw, 22px);
  background: color-mix(in srgb, var(--surface-2) 94%, transparent);
}

.resource-center-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: clamp(0.75rem, 2vw, 1rem) clamp(0.85rem, 2.5vw, 1.15rem) clamp(0.65rem, 1.5vw, 0.85rem);
}

.resource-center-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex: 0 0 auto;
  margin-bottom: clamp(0.55rem, 1.5vw, 0.75rem);
}

.resource-center-header h2 {
  margin: 0;
  font-size: clamp(0.95rem, 2.4vw, 1.1rem);
  font-weight: 600;
}

.resource-center-close {
  border: 0;
  background: transparent;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: 0.15rem 0.35rem;
}

.resource-center-panel .resource-center-tabs {
  flex: 0 0 auto;
  margin-bottom: clamp(0.55rem, 1.5vw, 0.75rem);
}

.rc-search-wrap {
  flex: 0 0 auto;
  display: block;
  margin-bottom: clamp(0.55rem, 1.5vw, 0.75rem);
}

.rc-search {
  width: 100%;
  padding: clamp(0.55rem, 1.5vw, 0.7rem) clamp(0.85rem, 2vw, 1rem);
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  color: var(--text);
  font-size: clamp(0.78rem, 1.8vw, 0.88rem);
}

.rc-search::placeholder {
  color: var(--muted);
}

.resource-center-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding-right: clamp(0.15rem, 0.5vw, 0.35rem);
  scrollbar-gutter: stable;
}

.rc-section {
  margin-bottom: clamp(1rem, 2.5vw, 1.35rem);
}

.rc-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: clamp(0.55rem, 1.5vw, 0.7rem);
}

.rc-section-head h3 {
  margin: 0;
  font-size: clamp(0.72rem, 1.6vw, 0.8rem);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.rc-section-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.rc-section-tool {
  font-size: clamp(0.68rem, 1.5vw, 0.75rem);
}

.rc-section-empty {
  margin: 0;
  padding: 0.35rem 0;
  font-size: clamp(0.75rem, 1.7vw, 0.82rem);
}

.rc-app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(4.25rem, 11vw, 5.25rem), 1fr));
  gap: clamp(0.55rem, 1.8vw, 0.85rem);
}

.rc-app-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.25rem, 0.8vw, 0.35rem);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--text);
  text-align: center;
  min-width: 0;
}

.rc-app-icon:disabled {
  cursor: default;
  opacity: 0.55;
}

.rc-app-icon-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(2.75rem, 7vw, 3.35rem);
  height: clamp(2.75rem, 7vw, 3.35rem);
  border-radius: clamp(12px, 2vw, 14px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

.rc-app-icon-glyph {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

/* Real app icon (lazy-loaded data URL). Fills the tile, rounded to match. */
.rc-app-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}

.rc-app-icon-label {
  display: block;
  width: 100%;
  font-size: clamp(0.62rem, 1.4vw, 0.72rem);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rc-app-icon-sublabel {
  display: block;
  width: 100%;
  font-size: clamp(0.58rem, 1.2vw, 0.65rem);
  line-height: 1.2;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rc-app-icon-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: clamp(0.85rem, 2vw, 1rem);
  height: clamp(0.85rem, 2vw, 1rem);
  border-radius: 4px;
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  border: 2px solid color-mix(in srgb, var(--surface-2) 90%, transparent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.rc-app-icon-badge.rc-device-badge::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: center / 62% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M4 5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v11H4V5zm0 13h16v1a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-1z'/%3E%3C/svg%3E");
}

.rc-app-icon-tile.rc-online .rc-device-badge {
  background: linear-gradient(135deg, #059669, #34d399);
}

/* Tiny top-right badge on app tiles identifying which device the app
   belongs to (≤4 chars, truncated by the Rust helper). pointer-events off
   so clicks pass through to the tile. */
.rc-app-device-tag {
  position: absolute;
  top: -5px;
  right: -5px;
  padding: 0.05rem 0.28rem;
  font-size: clamp(0.5rem, 1vw, 0.58rem);
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  border-radius: 5px;
  background: linear-gradient(135deg, #334155, #64748b);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
}

/* Device-chip rename/delete context menu (shares .app-context-menu shell). */
.device-chip-context-menu {
  min-width: 9rem;
}

.device-chip-context-menu .dcm-item.danger {
  color: #ef4444;
}

.dcm-rename-form {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.3rem 0.2rem;
}

.dcm-rename-input {
  width: 100%;
  min-width: 8.5rem;
}

.dcm-rename-actions {
  display: flex;
  gap: 0.4rem;
}

.dcm-error {
  display: block;
  font-size: 0.68rem;
  color: #ef4444;
  padding: 0 0.2rem 0.25rem;
}

.device-chip-menu-dot {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.rc-hue-app { background: linear-gradient(145deg, #ea580c, #f97316); }
.rc-hue-ai { background: linear-gradient(145deg, #7c3aed, #a78bfa); }
.rc-hue-container { background: linear-gradient(145deg, #0d9488, #2dd4bf); }
.rc-hue-folder { background: linear-gradient(145deg, #2563eb, #60a5fa); }
.rc-hue-compute { background: linear-gradient(145deg, #db2777, #f472b6); }
.rc-hue-service { background: linear-gradient(145deg, #4f46e5, #818cf8); }
.rc-hue-remote { background: linear-gradient(145deg, #475569, #94a3b8); }
.rc-hue-device { background: linear-gradient(145deg, #334155, #64748b); }
.rc-hue-default { background: linear-gradient(145deg, #6366f1, #818cf8); }

.rc-app-icon:hover:not(:disabled) .rc-app-icon-tile {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.rc-app-icon-tile {
  transition: transform 0.15s, filter 0.15s;
}

.rc-hue-add { background: linear-gradient(145deg, #059669, #34d399); }
.rc-hue-desktop { background: linear-gradient(145deg, #2563eb, #60a5fa); }
.rc-hue-terminal { background: linear-gradient(145deg, #7c3aed, #a78bfa); }

.rc-add-app-tile {
  display: flex;
  flex-direction: column;
}

.rc-add-app-btn {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
}

.rc-add-app-form {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.4rem;
  background: var(--card-bg, #1e293b);
  border-radius: 0.6rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

.rc-add-app-input {
  width: 100%;
  padding: 0.3rem 0.4rem;
  border-radius: 0.35rem;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(15, 23, 42, 0.5);
  color: inherit;
  font-size: clamp(0.7rem, 1.6vw, 0.78rem);
}

.rc-add-app-error {
  color: #f87171;
  font-size: clamp(0.68rem, 1.5vw, 0.74rem);
}

.rc-section-add .form-block {
  margin-top: 0.75rem;
}

.resource-center-panel .form-block {
  margin-top: 0.75rem;
}

.overview-task-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.overview-task {
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  border-radius: 999px;
  padding: 0.4rem 0.75rem;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  cursor: pointer;
  font-size: 0.82rem;
}

.task-dock {
  bottom: clamp(0.5rem, 1.5vh, 0.85rem);
  padding-bottom: 0;
}

.dock-overview {
  background: linear-gradient(135deg, #475569, #94a3b8);
}

.main-workspace .resource-drop-zone {
  left: auto;
  right: clamp(0.75rem, 2vw, 1.25rem);
  bottom: clamp(0.75rem, 2vh, 1.25rem);
  transform: none;
  width: clamp(10rem, 22vw, 14rem);
  z-index: 90;
}

/* ===== MOS 五档自适应布局（见 doc/design/mos-layout-tiers.md） ===== */
.desktop-root {
  container-type: inline-size;
  container-name: mos-desktop;
}

.app-root {
  --os-type-scale: 1;
  --os-layout-density: 1;
}

.app-root[data-layout-tier="micro"] {
  --os-type-scale: 0.92;
  --os-layout-density: 0.85;
  --os-chrome-top: clamp(1.35rem, 5vw, 1.65rem);
}

.app-root[data-layout-tier="mobile"] {
  --os-type-scale: 0.96;
  --os-layout-density: 0.92;
}

.app-root[data-layout-tier="pad"] {
  --os-type-scale: 1;
  --os-layout-density: 0.96;
}

.app-root[data-layout-tier="desk"] {
  --os-type-scale: 1;
  --os-layout-density: 1;
}

.app-root[data-layout-tier="wall"] {
  --os-type-scale: 1.12;
  --os-layout-density: 1.08;
  --os-chrome-top: clamp(2rem, 2.5vw, 2.75rem);
}

/* micro：极简状态栏 + 单卡片窗口 */
.app-root[data-layout-tier="micro"] .status-icon-btn,
.app-root[data-layout-tier="micro"] .status-clock span {
  display: none;
}

.app-root[data-layout-tier="micro"] .floating-window:not(.focused) {
  opacity: 0;
  pointer-events: none;
}

.app-root[data-layout-tier="micro"] .floating-window.focused {
  z-index: 100 !important;
}

/* mobile：隐藏状态栏低优先级 + 底部 Dock 图标模式 */
.app-root[data-layout-tier="mobile"] .status-icon-btn {
  display: none;
}

.app-root[data-layout-tier="mobile"] .floating-window:not(.focused) {
  opacity: 0.35;
  pointer-events: none;
}

.app-root[data-layout-tier="mobile"] .floating-window.focused {
  z-index: 100 !important;
}

/* pad/mobile/micro：Dock 图标模式 */
.app-root[data-layout-tier="micro"] .dock-label,
.app-root[data-layout-tier="mobile"] .dock-label,
.app-root[data-layout-tier="pad"] .dock-label {
  display: none;
}

.app-root[data-layout-tier="micro"] .os-dock,
.app-root[data-layout-tier="mobile"] .os-dock,
.app-root[data-layout-tier="pad"] .os-dock {
  gap: clamp(0.25rem, 1vw, 0.45rem);
  padding-inline: clamp(0.35rem, 1.2vw, 0.65rem);
}

/* pad 及以下：通讯栏图标轨 */
.app-root[data-layout-tier="micro"] .comm-window-rail .comm-rail-label,
.app-root[data-layout-tier="mobile"] .comm-window-rail .comm-rail-label,
.app-root[data-layout-tier="pad"] .comm-window-rail .comm-rail-label {
  display: none;
}

.app-root[data-layout-tier="micro"] .comm-window-panel,
.app-root[data-layout-tier="mobile"] .comm-window-panel {
  flex-direction: column;
}

.app-root[data-layout-tier="micro"] .comm-window-conversation,
.app-root[data-layout-tier="mobile"] .comm-window-conversation,
.app-root[data-layout-tier="micro"] .comm-window-settings-detail,
.app-root[data-layout-tier="mobile"] .comm-window-settings-detail {
  border-left: none;
  border-top: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
}

/* 桌面图标密度 */
/* 磁贴固定 20vw：与 desktop_icons.rs 手机网格（起点 4%、列距 24%）
   配合，保证整组图标左右离屏幕边缘等距。 */
.app-root[data-layout-tier="micro"] .ds-icon,
.app-root[data-layout-tier="mobile"] .ds-icon {
  width: 20vw;
  max-width: none;
  touch-action: none;
}

.app-root[data-layout-tier="micro"] .ds-icon-label,
.app-root[data-layout-tier="mobile"] .ds-icon-label {
  max-width: 18vw;
  font-size: clamp(0.6rem, 2.6vw, 0.68rem);
}

.app-root[data-layout-tier="micro"] .floating-window,
.app-root[data-layout-tier="mobile"] .floating-window {
  min-width: 0;
  min-height: 0;
}

.app-root[data-layout-tier="micro"] .floating-titlebar,
.app-root[data-layout-tier="mobile"] .floating-titlebar {
  touch-action: none;
  cursor: grab;
}

.app-root[data-layout-tier="micro"] .overview-grid,
.app-root[data-layout-tier="mobile"] .overview-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app-root[data-layout-tier="pad"] .overview-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* wall：看板密度 + 大字号 */
.app-root[data-layout-tier="wall"] {
  font-size: calc(1rem * var(--os-type-scale));
}

.app-root[data-layout-tier="wall"] .overview-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.85rem, 1.4vw, 1.25rem);
}

.app-root[data-layout-tier="wall"] .resource-center-panel.overview-panel {
  width: min(72vw, 1400px);
  height: min(78vh, calc(100vh - var(--os-chrome-top) - 5rem));
  max-height: min(78vh, calc(100vh - var(--os-chrome-top) - 5rem));
}

.app-root[data-layout-tier="wall"] .floating-window-body {
  font-size: calc(0.92rem * var(--os-type-scale));
}

.app-root[data-layout-tier="desk"] .resource-center-panel.overview-panel {
  width: min(960px, calc(100vw - 3rem));
  height: min(720px, calc(100vh - var(--os-chrome-top) - 6rem));
  max-height: min(720px, calc(100vh - var(--os-chrome-top) - 6rem));
}

.app-root[data-layout-tier="pad"] .comm-sidebar.expanded {
  --os-comm-width: min(88vw, var(--os-comm-expanded));
}

/* ===== 手机全屏窗口 + 窄屏排版 ===== */
.app-root[data-phone="1"] {
  --os-chrome-top: calc(clamp(1.45rem, 5vw, 1.75rem) + env(safe-area-inset-top, 0px));
}

.app-root[data-phone="1"] .window-ctrl-maximize,
.app-root[data-phone="1"] .floating-resize-handle {
  display: none;
}

.app-root[data-phone="1"] .floating-window {
  min-width: 0;
  min-height: 0;
}

.app-root[data-phone="1"] .floating-window.maximized {
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
}

.app-root[data-phone="1"] .floating-window.maximized .floating-titlebar {
  min-height: var(--os-chrome-top);
  padding-top: max(0.3rem, env(safe-area-inset-top, 0px));
  padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
  padding-right: max(0.5rem, env(safe-area-inset-right, 0px));
}

.app-root[data-phone="1"] .window-ctrl {
  width: 1.85rem;
  height: 1.85rem;
  min-width: 1.85rem;
}

.app-root[data-phone="1"] .window-ctrl-glyph {
  font-size: 0.85rem;
}

.app-root[data-phone="1"] .os-status-left,
.app-root[data-phone="1"] .os-status-right {
  min-width: 0;
  gap: 0.35rem;
}

/* 手机：登录按钮收窄，时钟压成一行，避免撑出固定高度的状态栏 */
.app-root[data-phone="1"] .status-login-btn {
  height: auto;
  padding: 0.15rem 0.55rem;
  font-size: 0.7rem;
  line-height: 1.15;
}

.app-root[data-phone="1"] .status-clock {
  flex-direction: row;
  align-items: baseline;
  gap: 0.3rem;
  padding: 2px 4px;
  white-space: nowrap;
}

.app-root[data-phone="1"] .status-clock time {
  font-size: 0.75rem;
}

.app-root[data-phone="1"] .status-clock span {
  font-size: 0.62rem;
}

.app-root[data-phone="1"] .os-statusbar {
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: max(0.55rem, env(safe-area-inset-left, 0px));
  padding-right: max(0.55rem, env(safe-area-inset-right, 0px));
}

.app-root[data-phone="1"] .os-dock-touch {
  bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

.app-root[data-phone="1"] .os-dock {
  max-width: min(100%, calc(100vw - 1rem));
}

.app-root[data-phone="1"] .app-overlay {
  padding: 0;
}

.app-root[data-phone="1"] .app-overlay-panel {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  border-radius: 0;
}

.app-root[data-phone="1"] .auth-shell {
  align-items: flex-start;
  overflow: auto;
  padding: max(1rem, env(safe-area-inset-top, 0px))
    max(0.85rem, env(safe-area-inset-right, 0px))
    max(1rem, env(safe-area-inset-bottom, 0px))
    max(0.85rem, env(safe-area-inset-left, 0px));
}

.app-root[data-phone="1"] .auth-card {
  padding: 1.15rem 1rem;
  border-radius: 14px;
}

.app-root[data-phone="1"] .boot-content {
  width: min(420px, 100%);
}

.app-root[data-phone="1"] .tabs {
  flex-wrap: wrap;
  gap: 0.35rem;
}

.app-root[data-phone="1"] .tab {
  padding: 0.42rem 0.7rem;
  font-size: 0.78rem;
}

.app-root[data-phone="1"] .resource-card {
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
}

.app-root[data-phone="1"] .device-panel-head {
  flex-direction: column;
  align-items: stretch;
}

.app-root[data-phone="1"] .stat-row {
  flex-wrap: wrap;
}

.app-root[data-phone="1"] .stat-card {
  flex: 1 1 42%;
  min-width: 7.5rem;
}

.app-root[data-phone="1"] .sync-source-table {
  min-width: 36rem;
}

.app-root[data-phone="1"] .sync-three-column,
.app-root[data-phone="1"] .admin-table-wrap,
.app-root[data-phone="1"] .device-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 手机通讯台：微信式单栏。开始只显示菜单+联系；点开后对话/交互全屏。 */
.app-root[data-phone="1"] .comm-window-panel,
.app-root[data-phone="1"] .comm-window-panel.has-conversation,
.app-root[data-phone="1"] .comm-window-panel.has-actions {
  flex-direction: row;
}

.app-root[data-phone="1"] .comm-window-panel .comm-window-side,
.app-root[data-phone="1"] .comm-window-panel.has-conversation .comm-window-side,
.app-root[data-phone="1"] .comm-window-panel.has-actions .comm-window-side,
.app-root[data-phone="1"] .comm-window-conversation,
.app-root[data-phone="1"] .comm-window-settings-detail,
.app-root[data-phone="1"] .comm-window-actions {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  max-height: none;
  height: 100%;
  border-left: none;
  border-top: none;
}

.app-root[data-phone="1"] .comm-window-panel[data-phone-pane="list"] .comm-window-conversation,
.app-root[data-phone="1"] .comm-window-panel[data-phone-pane="list"] .comm-window-settings-detail,
.app-root[data-phone="1"] .comm-window-panel[data-phone-pane="list"] .comm-window-actions,
.app-root[data-phone="1"] .comm-window-panel[data-phone-pane="conversation"] .comm-window-side,
.app-root[data-phone="1"] .comm-window-panel[data-phone-pane="conversation"] .comm-window-actions,
.app-root[data-phone="1"] .comm-window-panel[data-phone-pane="interact"] .comm-window-side,
.app-root[data-phone="1"] .comm-window-panel[data-phone-pane="interact"] .comm-window-conversation,
.app-root[data-phone="1"] .comm-window-panel[data-phone-pane="interact"] .comm-window-settings-detail {
  display: none;
}

.app-root[data-phone="1"] .comm-col-splitter {
  display: none !important;
}

.app-root[data-phone="1"] .comm-conversation {
  flex: 1;
  height: 100%;
  border-left: none;
}

.app-root[data-phone="1"] .comm-conversation-header,
.app-root[data-phone="1"] .comm-window-conversation-header {
  padding: 0;
  min-height: 0;
}

.app-root[data-phone="1"] .comm-action-header,
.app-root[data-phone="1"] .comm-action-ref {
  display: none;
}

.app-root[data-phone="1"] .system-pref-hero {
  flex-direction: column;
  align-items: flex-start;
}

.app-root[data-phone="1"] .pref-orb {
  display: none;
}

.app-root[data-phone="1"] .setting-grid,
.app-root[data-phone="1"] .system-pref-grid {
  grid-template-columns: minmax(0, 1fr);
}

.app-root[data-phone="1"] .settings-tab-nav {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.app-root[data-phone="1"] .settings-tab-nav::-webkit-scrollbar {
  display: none;
}

.app-root[data-phone="1"] .settings-tab-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.app-root[data-phone="1"] .floating-window-body {
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* 手机端：背景宽度跟随内容（fit-content），不再钳死 55% 宽。
   状态栏与最右侧无边框按钮保持一行（nowrap），不换行。 */
.app-root[data-phone="1"] .remote-titlebar-chrome {
  max-width: none;
  flex-wrap: nowrap;
  justify-content: center;
  overflow-x: visible;
}

.app-root[data-phone="1"] .form-inline .btn,
.app-root[data-phone="1"] .form-inline button {
  flex: 1 1 auto;
}

.app-root[data-phone="1"] .ds-icon-label {
  max-width: 22vw;
  white-space: normal;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.app-root[data-phone="1"] .share-guest-card {
  max-width: 100%;
}

.os-status-left,
.os-status-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 8rem;
}

.os-status-right {
  justify-content: flex-end;
}

.os-logo {
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--accent);
}

.os-status-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
}

.os-status-center {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--text);
}

.os-user,
.os-event-state {
  color: var(--muted);
}

.os-event-state {
  padding-left: 0.45rem;
  border: 0;
  border-left: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.viewport {
  position: fixed;
  top: var(--os-chrome-top);
  left: 0;
  width: 100vw;
  height: var(--os-viewport-h);
  overflow: hidden;
}

.plane {
  display: grid;
  grid-template-columns: 100vw 100vw 100vw;
  grid-template-rows: var(--os-viewport-h) var(--os-viewport-h) var(--os-viewport-h);
  width: 300vw;
  height: calc(var(--os-viewport-h) * 3);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.screen {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: var(--os-viewport-h);
  padding: 0;
}

/* Spatial layout: setting↑ communication← interaction workspace→ resource↓ */
.screen-setting {
  grid-column: 2;
  grid-row: 1;
}

.screen-communication {
  grid-column: 1;
  grid-row: 2;
}

.screen-interaction {
  grid-column: 2;
  grid-row: 2;
}

.screen-workspace {
  grid-column: 3;
  grid-row: 2;
}

.screen-resource {
  grid-column: 2;
  grid-row: 3;
}

.screen-wallpaper {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.wall-interaction {
  background:
    radial-gradient(ellipse 90% 70% at 50% 35%, color-mix(in srgb, #6366f1 35%, transparent), transparent 72%),
    radial-gradient(circle at 18% 78%, color-mix(in srgb, #3b82f6 22%, transparent), transparent 48%),
    radial-gradient(circle at 82% 22%, color-mix(in srgb, #ec4899 16%, transparent), transparent 42%),
    linear-gradient(155deg, #141828 0%, #1a2240 38%, #101428 100%);
}

.app-root[data-wallpaper="mos-default"] .desktop-root .desktop-wallpaper {
  background:
    radial-gradient(ellipse 90% 70% at 50% 35%, color-mix(in srgb, #6366f1 35%, transparent), transparent 72%),
    radial-gradient(circle at 18% 78%, color-mix(in srgb, #3b82f6 22%, transparent), transparent 48%),
    radial-gradient(circle at 82% 22%, color-mix(in srgb, #ec4899 16%, transparent), transparent 42%),
    linear-gradient(155deg, #141828 0%, #1a2240 38%, #101428 100%);
}

.app-root[data-wallpaper="ubuntu-purple"] .desktop-root .desktop-wallpaper {
  background: linear-gradient(135deg, #2c001e 0%, #5e2750 45%, #77216f 100%);
}

.app-root[data-wallpaper="aurora"] .desktop-root .desktop-wallpaper {
  background:
    radial-gradient(ellipse 70% 50% at 20% 30%, rgba(56, 189, 248, 0.35) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 60%, rgba(167, 139, 250, 0.3) 0%, transparent 55%),
    linear-gradient(160deg, #0f172a 0%, #1e293b 50%, #0c1222 100%);
}

.app-root[data-wallpaper="elegant"] .desktop-root .desktop-wallpaper {
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(251, 146, 60, 0.45) 0%, transparent 55%),
    linear-gradient(180deg, #1e1b4b 0%, #312e81 35%, #7c2d12 100%);
}

.app-root[data-wallpaper="forest"] .desktop-root .desktop-wallpaper {
  background:
    radial-gradient(ellipse 90% 70% at 40% 20%, rgba(52, 211, 153, 0.2) 0%, transparent 50%),
    linear-gradient(165deg, #022c22 0%, #064e3b 40%, #14532d 100%);
}

.app-root[data-wallpaper="minimal-light"] .desktop-root .desktop-wallpaper {
  background: linear-gradient(145deg, #dbeafe 0%, #e0e7ff 40%, #f0fdf4 100%);
}

.app-root[data-wallpaper="custom"] .desktop-root .desktop-wallpaper {
  background-color: #0a0e17;
}

.wall-communication {
  background:
    radial-gradient(ellipse 75% 55% at 62% 28%, color-mix(in srgb, #a855f7 28%, transparent), transparent),
    radial-gradient(circle at 12% 72%, color-mix(in srgb, #6366f1 14%, transparent), transparent 45%),
    linear-gradient(145deg, #120a22 0%, #241538 52%, #0c0818 100%);
}

.wall-resource {
  background:
    radial-gradient(ellipse 65% 55% at 38% 58%, color-mix(in srgb, #22c55e 24%, transparent), transparent),
    radial-gradient(circle at 78% 18%, color-mix(in srgb, #14b8a6 16%, transparent), transparent 40%),
    linear-gradient(160deg, #081612 0%, #123222 50%, #060e0a 100%);
}

.wall-setting {
  background:
    radial-gradient(ellipse 60% 50% at 50% 18%, color-mix(in srgb, var(--accent) 24%, transparent), transparent),
    radial-gradient(circle at 80% 70%, color-mix(in srgb, #64748b 14%, transparent), transparent 42%),
    linear-gradient(180deg, #141420 0%, #0c0c16 100%);
}

.wall-workspace {
  background:
    radial-gradient(ellipse 70% 58% at 72% 48%, color-mix(in srgb, #eab308 22%, transparent), transparent),
    radial-gradient(circle at 20% 30%, color-mix(in srgb, #f97316 14%, transparent), transparent 40%),
    linear-gradient(135deg, #181208 0%, #2a2210 50%, #0c0a06 100%);
}

/* Spatial dock — floating, does not reserve layout space */
.os-dock-touch {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0.85rem;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  pointer-events: none;
  touch-action: manipulation;
}

.os-dock {
  pointer-events: auto;
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  max-width: min(920px, 92vw);
  padding: 0.45rem 0.7rem;
  background: color-mix(in srgb, var(--surface) 68%, transparent);
  backdrop-filter: blur(22px) saturate(1.35);
  border: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  border-radius: 20px;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.42),
    0 4px 12px rgba(0, 0, 0, 0.22);
}

.dock-windows {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.dock-windows::-webkit-scrollbar {
  display: none;
}

.dock-empty {
  font-size: 0.78rem;
  color: var(--muted);
  padding: 0.35rem 0.5rem;
  white-space: nowrap;
}

.dock-setting-btn {
  flex-shrink: 0;
}

.dock-window.backgrounded {
  opacity: 0.55;
}

.dock-window.minimized {
  opacity: 1;
}

.dock-window.backgrounded .dock-icon {
  transform: scale(0.92);
}

.dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.45rem 0.6rem;
  min-height: 3.25rem;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 12px;
  transition: transform 0.15s, background 0.15s, opacity 0.15s;
  min-width: 3.75rem;
  touch-action: manipulation;
}

.dock-item:hover {
  transform: translateY(-4px) scale(1.05);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.dock-item.active {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.dock-item.active .dock-icon,
.dock-item.active .app-tile-dock {
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 50%, transparent);
}

/* 磁贴图标 — 对齐旧版 dist/web appTile（Unicode glyph + 渐变底） */
.app-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 22%;
  color: #fff;
  font-weight: 700;
  line-height: 1;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.app-tile-dock {
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1rem;
  border-radius: 10px;
}

.app-tile-rail {
  width: clamp(1.75rem, 4vw, 2rem);
  height: clamp(1.75rem, 4vw, 2rem);
  min-width: clamp(1.75rem, 4vw, 2rem);
  min-height: clamp(1.75rem, 4vw, 2rem);
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  font-size: clamp(0.72rem, 1.8vw, 0.82rem);
  border-radius: 8px;
}

.app-tile-rc {
  width: 100%;
  height: 100%;
  font-size: clamp(1.1rem, 3vw, 1.35rem);
  border-radius: 22%;
}

/* 桌面图标磁贴 — 对齐老版 appTile.lg */
.app-tile-lg {
  width: clamp(3rem, 7vw, 3.5rem);
  height: clamp(3rem, 7vw, 3.5rem);
  font-size: clamp(1.15rem, 2.8vw, 1.375rem);
  border-radius: 22%;
  filter: saturate(1.12) brightness(1.04);
}

.dock-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 80%, var(--accent));
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.dock-home { background: linear-gradient(135deg, #6366f1, #818cf8); }
.dock-comm,
.launcher-comm { background: linear-gradient(135deg, #9333ea, #c084fc); }
.dock-resource,
.launcher-resource { background: linear-gradient(135deg, #059669, #34d399); }
.dock-setting,
.launcher-setting { background: linear-gradient(135deg, #475569, #94a3b8); }
.dock-workspace,
.launcher-workspace { background: linear-gradient(135deg, #d97706, #fbbf24); }

.dock-label {
  font-size: 0.62rem;
  color: var(--muted);
  max-width: 4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Pan edges — touch zones for adjacent screens */
.pan-edge {
  position: absolute;
  z-index: 150;
  border: none;
  background: color-mix(in srgb, var(--surface) 28%, transparent);
  backdrop-filter: blur(8px);
  color: var(--muted);
  cursor: pointer;
  opacity: 0.72;
  transition: opacity 0.2s, background 0.2s;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}

.pan-edge:hover,
.screen:hover .pan-edge,
.pan-edge:focus-visible {
  opacity: 1;
}

.pan-edge:hover,
.pan-edge:focus-visible {
  background: color-mix(in srgb, var(--accent) 24%, transparent);
  color: var(--text);
}

.pan-up {
  top: 0;
  left: calc(var(--os-touch-edge) * 2);
  right: calc(var(--os-touch-edge) * 2);
  height: var(--os-touch-edge);
  border-radius: 0 0 14px 14px;
}

.pan-down {
  bottom: 0;
  left: calc(var(--os-touch-edge) * 2);
  right: calc(var(--os-touch-edge) * 2);
  height: var(--os-touch-edge);
  border-radius: 14px 14px 0 0;
}

.pan-left {
  left: 0;
  top: calc(var(--os-touch-edge) * 1.5);
  bottom: calc(var(--os-touch-edge) * 1.5);
  width: var(--os-touch-edge);
  border-radius: 0 14px 14px 0;
}

.pan-right {
  right: 0;
  top: calc(var(--os-touch-edge) * 1.5);
  bottom: calc(var(--os-touch-edge) * 1.5);
  width: var(--os-touch-edge);
  border-radius: 14px 0 0 14px;
}

.pan-edge-label {
  display: block;
  padding: 0.25rem;
}

/* Full-screen panel for directional screens — narrow centered column */
.screen-panel {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: stretch;
  overflow: hidden;
  padding: 0.85rem 5vw;
  background: transparent;
}

.screen-panel .screen-inner {
  width: 100%;
  max-width: var(--os-narrow-w);
  flex: 1;
  overflow: auto;
  margin: 0 auto;
  padding: 1rem 1.1rem 1.25rem;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(18px) saturate(1.15);
  border: 1px solid color-mix(in srgb, var(--border) 52%, transparent);
  border-radius: 22px;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.2);
}

.screen-panel .comm-grid {
  grid-template-columns: 1fr;
}

.screen-resource .resource-drop-zone {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  bottom: 1.25rem;
  width: min(15rem, calc(var(--os-narrow-w) - 2rem));
}

/* Interaction — clean home desktop */
.desktop-home {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.window-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

/* Shared floating-window stack (remote + ordinary MOS windows).
   Default z-index peers with the old window-stage (20): focus only changes
   each window's own z-index (40 / 80). Maximized bumps the whole stack above
   the status bar (300) and dock (200). */
.window-immersive-layer {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

.window-immersive-layer.has-maximized {
  z-index: 400;
}

.window-immersive-layer.hidden {
  display: none;
}

.window-immersive-layer .floating-window {
  pointer-events: auto;
}

.window-immersive-layer .floating-window.maximized .floating-titlebar {
  min-height: var(--os-chrome-top);
  padding-inline: clamp(0.65rem, 2vw, 0.85rem);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}

.window-immersive-layer .window-chrome-controls {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

.os-window-controls {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
  position: relative;
  z-index: 3;
  pointer-events: auto;
}

.os-dot {
  width: 0.75rem;
  height: 0.75rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.os-dot-red { background: #ff5f57; }
.os-dot-yellow { background: #febc2e; }
.os-dot-green { background: #28c840; }

.os-window-controls .os-dot:hover {
  filter: brightness(0.85);
}

.os-window-title {
  flex: 1;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  min-width: 0;
  max-width: 10em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 统一标题栏：远程窗口（remote-session-window）与普通窗口使用同一份
   .os-window-title 样式 —— 标题文字正常显示，不再单独隐藏。 */

.os-window-home {
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--accent);
  font-size: 0.75rem;
  cursor: pointer;
  flex-shrink: 0;
}

.os-window-home:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.glass-panel {
  padding: 1rem 1.15rem;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 50%, transparent);
  backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
}

.glass-panel h3 {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.floating-window {
  position: absolute;
  min-width: 360px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 58%, transparent);
  border-radius: 14px;
  backdrop-filter: blur(24px) saturate(1.2);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  pointer-events: auto;
  opacity: 0.92;
  transition: opacity 0.18s, transform 0.18s, box-shadow 0.18s;
}

.floating-window.focused {
  opacity: 1;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.55);
}

/* 拖拽时禁用过渡动画，提升层级 */
.floating-window.dragging {
  transition: none !important;
  z-index: 120 !important;
  user-select: none;
}

/* 拖拽期间屏蔽远程 iframe / 视频的指针事件：moonlight iframe 内部会对
   <video> setPointerCapture，抢走标题栏的 pointer capture 后 pointerup
   被派发进 iframe 文档、不冒泡到父 window，拖拽会话无法结束，窗口
   永远跟着光标（此前只能刷新页面恢复）。事件全部经由标题栏 capture
   元素派发，子元素禁不禁点不影响 move/up 的送达。 */
.floating-window.dragging * {
  pointer-events: none !important;
}

/* 无边框窗口模式（游戏式）：隐藏标题栏，内容区（flex:1）自动填满。
   悬浮栏仍在内容区顶部，可随时点 ⛶/⤢ 退出。 */
.floating-window.borderless .floating-titlebar {
  display: none;
}

.floating-window.maximized {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  z-index: 1 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}

/* 隐藏态必须压过 .maximized（手机端最小化/切后台的窗口保持全屏几何
   淡出，不再先跳回半尺寸小窗造成“半透明残影悬空在屏幕中间”）。
   规则必须放在 .maximized 之后：两者特异性相同，靠源顺序取胜。 */
.floating-window.backgrounded,
.floating-window.minimized {
  pointer-events: none !important;
  opacity: 0 !important;
  transform: translateY(24px) scale(0.96) !important;
}

.floating-window.maximized .floating-titlebar {
  flex-shrink: 0;
}

.floating-window.maximized .floating-titlebar-drag {
  cursor: default;
}

.floating-window.maximized .floating-window-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.floating-window.maximized .floating-resize-handle {
  display: none;
}

.app-root[data-layout-tier="micro"] .floating-window.maximized,
.app-root[data-layout-tier="mobile"] .floating-window.maximized,
.app-root[data-phone="1"] .floating-window.maximized {
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
}

.floating-titlebar {
  display: flex;
  align-items: center;
  gap: 0.18rem;
  padding: 0.16rem 0.32rem;
  background: color-mix(in srgb, var(--bg) 45%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  flex-shrink: 0;
  user-select: none;
  cursor: grab;
  touch-action: none;
}

.floating-titlebar:active {
  cursor: grabbing;
}

.remote-titlebar-chrome {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 0.08rem;
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

/* Floating overlay bar inside the remote window body (top). Holds the whole
   status row (直连/中继 … 延迟 … 串流就绪 … 全屏) that used to live in the
   titlebar. Frosted-glass "dock" material (translucent surface + heavy blur +
   raised shadow + hairline edge), only as wide as its content, centered;
   click the bar background to collapse/expand, chips keep working. */
.remote-floating-bar {
  position: absolute;
  top: 0.22rem;
  left: 50%;
  transform: translateX(-50%);
  width: fit-content;
  max-width: calc(100% - 0.4rem);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.06rem;
  padding: 0.12rem 0.28rem;
  background: color-mix(in srgb, var(--bg, #1f2937) 58%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--border, #475569) 50%, transparent);
  border-radius: 0.55rem;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent);
  user-select: none;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  overflow: hidden;
  transition: padding 0.18s ease;
}

.remote-floating-bar .remote-titlebar-chrome {
  flex: 0 1 auto;
  min-width: 0;
  /* 背景宽度跟随内容：按钮少了之后一行放得下，状态栏不换行。 */
  flex-wrap: nowrap;
  justify-content: center;
  overflow: visible;
}

.remote-floating-bar-collapsed {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  flex: 0 1 auto;
  min-width: 0;
}

/* Expanded: hide the collapsed summary. */
.remote-floating-bar:not(.collapsed) .remote-floating-bar-collapsed {
  display: none;
}

/* Collapsed: hide the full chip row, shrink to a thin centered handle. */
.remote-floating-bar.collapsed {
  max-height: 0.95rem;
  padding: 0.04rem 0.42rem;
}

.remote-floating-bar.collapsed .remote-titlebar-chrome {
  display: none;
}

/* Maximized (fullscreen): still centered + content-width, just nudge down. */
.floating-window.maximized .remote-floating-bar {
  top: 0.18rem;
}

.remote-titlebar-status {
  flex-shrink: 1;
  min-width: 0;
  max-width: min(8rem, 22vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.58rem;
  line-height: 1.15;
  padding: 0.02rem 0.18rem;
  border-radius: 0.2rem;
}

.remote-titlebar-status.err {
  color: #fecaca;
  background: color-mix(in srgb, #dc2626 55%, transparent);
}

.remote-titlebar-status.warn {
  color: #fde68a;
  background: color-mix(in srgb, #b45309 45%, transparent);
}

.remote-titlebar-status.ok {
  color: #bbf7d0;
  background: color-mix(in srgb, #15803d 45%, transparent);
}

.remote-titlebar-metric {
  display: inline-flex;
  align-items: baseline;
  flex-shrink: 0;
  font-size: 0.56rem;
  color: color-mix(in srgb, var(--text, #e5e7eb) 85%, transparent);
  padding: 0 0.04rem;
  white-space: nowrap;
  border-radius: 0.2rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.remote-titlebar-ping {
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.remote-titlebar-metric.ok {
  color: #4ade80;
}
.remote-titlebar-metric.warn {
  color: #facc15;
}
.remote-titlebar-metric.bad {
  color: #f87171;
}
.remote-titlebar-metric.crit {
  color: #000;
  background: #e5e5e5;
}

.remote-titlebar-mode-label {
  color: var(--muted);
  font-size: 0.58rem;
  flex-shrink: 0;
  margin-left: 0.04rem;
}

.remote-titlebar-mode-select {
  background: color-mix(in srgb, var(--bg) 70%, #1f2937);
  /* Closed select shows current gear in green */
  color: #86efac;
  border: 1px solid color-mix(in srgb, var(--border) 55%, #374151);
  border-radius: 0.2rem;
  padding: 0.02rem 0.12rem;
  font-size: 0.58rem;
  max-width: min(6.5rem, 22vw);
  line-height: 1.2;
}

/* Dropdown list: white = selectable; green = current active gear */
.remote-titlebar-mode-select option,
.remote-titlebar-mode-select option.remote-opt-choice {
  color: #ffffff;
  background: #1f2937;
}

.remote-titlebar-mode-select option:checked,
.remote-titlebar-mode-select option[selected],
.remote-titlebar-mode-select option.remote-opt-active {
  color: #86efac;
  background: color-mix(in srgb, #15803d 55%, #111827);
  font-weight: 600;
}

.remote-titlebar-chip {
  flex-shrink: 0;
  min-height: 0.95rem;
  padding: 0 0.14rem;
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius: 0.2rem;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  color: #ffffff;
  font-size: 0.58rem;
  cursor: pointer;
  line-height: 1.15;
  white-space: nowrap;
}

.remote-titlebar-chip:hover,
.remote-titlebar-chip:focus-visible {
  background: color-mix(in srgb, var(--bg) 75%, #334155);
}

.remote-titlebar-chip.active {
  color: #86efac;
  border-color: color-mix(in srgb, #15803d 60%, var(--border));
  background: color-mix(in srgb, #15803d 35%, transparent);
}

.remote-titlebar-chip.remote-titlebar-collapse {
  padding: 0 0.1rem;
  min-width: 1.1rem;
  text-align: center;
  line-height: 1.0;
}

.remote-titlebar-chip.remote-titlebar-no-bg {
  background: transparent !important;
  border-color: transparent !important;
}

.remote-titlebar-chip.remote-titlebar-no-bg:hover,
.remote-titlebar-chip.remote-titlebar-no-bg:focus-visible {
  background: color-mix(in srgb, var(--bg) 55%, transparent) !important;
  border-color: color-mix(in srgb, var(--border) 55%, transparent) !important;
}

.remote-floating-bar-collapsed .collapsed-glyph {
  color: #ffffff;
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.1rem 0.2rem;
}

.remote-soft-keyboard-input {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  opacity: 0.01;
  border: 0;
  padding: 0;
  margin: 0;
  z-index: 0;
}

.remote-titlebar-fit-btn {
  flex-shrink: 0;
  min-height: 1.2rem;
  padding: 0 0.35rem;
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius: 0.2rem;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  color: var(--text, #e5e7eb);
  font-size: 0.62rem;
  cursor: pointer;
  line-height: 1;
}

.remote-titlebar-fit-btn:hover,
.remote-titlebar-fit-btn:focus-visible {
  background: color-mix(in srgb, var(--bg) 75%, #334155);
}

.remote-input-error-toast {
  position: absolute;
  bottom: clamp(0.5rem, 2vh, 1rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 0.8vw, 0.4rem);
  padding: clamp(0.25rem, 0.8vw, 0.4rem) clamp(0.5rem, 1.5vw, 0.75rem);
  background: rgba(220, 38, 38, 0.92);
  color: #fff;
  border-radius: clamp(0.25rem, 0.8vw, 0.375rem);
  font-size: clamp(0.65rem, 1.6vw, 0.78rem);
  z-index: 50;
  pointer-events: none;
  animation: remote-input-error-fade 3s ease-out forwards;
}

.device-app-remote-panel > .remote-input-error-toast {
  bottom: clamp(0.5rem, 2vh, 1rem);
  z-index: 60;
}

.remote-input-error-mark {
  font-weight: 700;
  font-size: clamp(0.7rem, 1.8vw, 0.85rem);
}

@keyframes remote-input-error-fade {
  0% { opacity: 0; transform: translateX(-50%) translateY(8px); }
  15% { opacity: 1; transform: translateX(-50%) translateY(0); }
  85% { opacity: 1; }
  100% { opacity: 0; }
}

.app-root[data-layout-tier="micro"] .remote-titlebar-mode-label,
.app-root[data-layout-tier="mobile"] .remote-titlebar-mode-label {
  display: none;
}

.floating-titlebar-drag {
  flex: 0 0 auto;
  min-width: 0;
  max-width: 10.5em;
  display: flex;
  align-items: center;
  cursor: inherit;
}

/* Keep real controls usable; gaps elsewhere still drag the window. */
.floating-titlebar .window-chrome-controls,
.floating-titlebar .remote-titlebar-chip,
.floating-titlebar .remote-titlebar-mode-select,
.floating-titlebar .remote-titlebar-mode-label,
.floating-titlebar button,
.floating-titlebar select {
  cursor: pointer;
  touch-action: manipulation;
}

.window-chrome-controls {
  display: flex;
  align-items: center;
  gap: 0.05rem;
  flex-shrink: 0;
  margin-left: auto;
}

.window-ctrl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.8rem;
  height: 1.2rem;
  min-width: 0.8rem;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}

.window-ctrl-glyph {
  display: block;
  font-size: 0.55rem;
  line-height: 1;
  font-weight: 600;
  color: inherit;
}

/* ∨ ∧ ⤡ 在多数字体里比 ‹ › ↻ 大一圈，单独压小以视觉对齐 */
.window-ctrl-glyph-compact {
  font-size: 0.42rem;
  font-weight: 700;
}

.window-ctrl-inert {
  cursor: default;
  pointer-events: none;
}

.window-ctrl-inert:hover {
  background: transparent;
  color: var(--muted);
}

.window-ctrl:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.window-ctrl:hover:not(:disabled) {
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  color: var(--text);
}

.window-ctrl-close {
  position: relative;
}

.window-ctrl-close-x {
  transition: color 0.12s, background 0.05s linear;
}

.window-ctrl-close-solid .window-ctrl-close-x,
.window-ctrl-close:hover:not(:disabled) .window-ctrl-close-x {
  color: #fff;
}

.window-ctrl-close:hover:not(:disabled) {
  background: #e81123;
}

.window-ctrl-close-solid {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.window-ctrl-close-solid .window-ctrl-close-x {
  background: var(--accent);
  border-color: var(--accent);
}

.floating-titlebar .window-chrome-controls {
  cursor: default;
  flex-shrink: 0;
  margin-left: auto;
  z-index: 2;
}

.floating-resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  z-index: 5;
  background:
    linear-gradient(
      135deg,
      transparent 0%,
      transparent 55%,
      color-mix(in srgb, var(--text) 55%, transparent) 56%,
      color-mix(in srgb, var(--text) 55%, transparent) 60%,
      transparent 61%,
      transparent 70%,
      color-mix(in srgb, var(--text) 55%, transparent) 71%,
      color-mix(in srgb, var(--text) 55%, transparent) 75%,
      transparent 76%,
      transparent 85%,
      color-mix(in srgb, var(--text) 55%, transparent) 86%,
      color-mix(in srgb, var(--text) 55%, transparent) 90%,
      transparent 91%
    );
}

.os-dot-red {
  border: none;
  cursor: pointer;
}

.os-dot-yellow,
.os-dot-green {
  border: none;
  cursor: pointer;
}

.window-meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  flex: 1;
}

.window-address {
  max-width: min(280px, 30vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 50%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  color: var(--muted);
}

.window-chip,
.window-state-label {
  font-size: 0.72rem;
  color: var(--muted);
  padding: 0.15rem 0.45rem;
  border: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  border-radius: 999px;
  white-space: nowrap;
}

.window-layout-controls {
  display: flex;
  align-items: center;
  gap: 0.12rem;
  padding: 0 0.25rem;
  position: relative;
  z-index: 3;
  pointer-events: auto;
}

.window-layout-controls button {
  width: 1.35rem;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  border-radius: 5px;
  background: color-mix(in srgb, var(--bg) 35%, transparent);
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1;
  cursor: pointer;
}

.window-layout-controls button:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

.quality-good {
  color: #22c55e;
  border-color: color-mix(in srgb, #22c55e 35%, transparent);
}

.floating-window-body {
  flex: 1;
  overflow: auto;
  padding: 0.75rem;
  position: relative;
}

.floating-window-body:has(.comm-window-panel) {
  padding: 0;
  overflow: hidden;
  min-height: 0;
}

.floating-window-body:has(.floating-window-body-pane) {
  padding: 0;
  overflow: hidden;
}

/* Remote app windows (DeviceAppPanel) mount without the body-pane wrapper
   the desktop remote uses. Zero the body padding so the streamed frame runs
   edge-to-edge with the window chrome, matching the desktop remote. */
.floating-window-body:has(.device-app-remote-panel) {
  padding: 0;
  overflow: hidden;
}

.floating-window-body-pane-remote {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.floating-window-body-pane-remote .device-remote-standalone-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.floating-window-body-pane-remote .device-app-remote-panel {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

.floating-window-body-pane {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.floating-window-body-pane-resource {
  /* 资源中心 shell 自带 padding 与滚动区 */
}

.floating-window-body-pane-setting {
  overflow: auto;
  padding: clamp(0.65rem, 1.8vw, 0.85rem);
}

.floating-window-body .screen-inner {
  max-width: none;
  margin: 0;
}

.task-strip {
  position: absolute;
  left: 50%;
  bottom: 0.25rem;
  transform: translateX(-50%);
  z-index: 120;
  display: flex;
  gap: 0.35rem;
  padding: 0.35rem 0.55rem;
  max-width: min(70vw, 720px);
  overflow-x: auto;
  background: color-mix(in srgb, var(--surface) 42%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  border-radius: 999px;
  backdrop-filter: blur(14px);
}

.task-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 0.75rem;
  cursor: pointer;
  white-space: nowrap;
}

.task-pill.active,
.task-pill:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.task-pill.backgrounded {
  color: var(--muted);
  border-style: dashed;
}

.task-badge {
  font-size: 0.65rem;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.task-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
}

.task-strip-empty {
  padding: 0.25rem 0.5rem;
  color: var(--muted);
  font-size: 0.72rem;
}

.screen-setting { grid-column: 2; grid-row: 1; }
.screen-communication { grid-column: 1; grid-row: 2; }
.screen-interaction { grid-column: 2; grid-row: 2; }
.screen-workspace { grid-column: 3; grid-row: 2; }
.screen-resource { grid-column: 2; grid-row: 3; }

.screen-inner {
  max-width: none;
  margin: 0;
}

.screen-inner h2 {
  margin: 0 0 1rem;
  font-size: 1.75rem;
}

.screen-inner h3 {
  margin: 1rem 0 0.5rem;
  font-size: 1.1rem;
}

.greeting {
  font-size: 1.25rem;
  margin: 0.5rem 0;
}

.cap-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}

.cap-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.cap-key {
  font-weight: 600;
  flex: 1 1 140px;
}

/* Communication */
.comm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
}

.item-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem;
  max-height: 180px;
  overflow-y: auto;
}

.item-list li {
  padding: 0.5rem 0.65rem;
  border-radius: 6px;
  margin-bottom: 0.25rem;
}

.item-list.selectable li {
  cursor: pointer;
}

.item-list.selectable li:hover,
.item-list.selectable li.active {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.form-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.form-inline input {
  flex: 1 1 120px;
}

.messages-panel {
  grid-column: 1 / -1;
}

.message-stream {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow-y: auto;
  margin-bottom: 0.75rem;
}

.im-panel {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, transparent), color-mix(in srgb, var(--surface-2) 74%, transparent));
}

.im-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.im-toolbar h3,
.im-toolbar p {
  margin: 0;
}

.im-status-dot {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #22c55e;
  font-size: 0.78rem;
}

.im-status-dot::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
}

.message-stream .artifact-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  border-left-width: 1px;
}

.message-avatar {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), #8b5cf6);
  color: white;
  font-weight: 800;
}

.message-bubble header {
  font-size: 0.78rem;
  color: var(--accent);
}

.quick-artifacts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0.75rem 0 0.5rem;
}

.quick-template-hint {
  color: var(--muted);
  font-size: 0.78rem;
  margin-right: 0.2rem;
}

.quick-artifacts button {
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
  color: var(--muted);
  padding: 0.35rem 0.65rem;
  cursor: pointer;
}

.quick-artifacts button.active,
.quick-artifacts button:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.im-composer input {
  flex: 1;
}

.artifact-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem 1rem;
}

.artifact-card header {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.artifact-risk {
  font-size: 0.6rem;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  text-transform: uppercase;
  font-weight: 600;
  background: color-mix(in srgb, var(--muted) 15%, transparent);
  color: var(--text);
}

.artifact-risk-low {
  background: color-mix(in srgb, #22c55e 18%, transparent);
  color: #15803d;
}

.artifact-risk-medium {
  background: color-mix(in srgb, #f59e0b 18%, transparent);
  color: #b45309;
}

.artifact-risk-high {
  background: color-mix(in srgb, #ef4444 18%, transparent);
  color: #b91c1c;
}

.artifact-card footer {
  margin-top: 0.5rem;
  font-size: 0.75rem;
}

/* Resource */
.tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.tab {
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
  color: var(--text);
}

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

.resource-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: grid;
  gap: 0.5rem;
}

.resource-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.device-panel {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.device-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.device-panel-head h3 {
  margin: 0 0 0.2rem;
}

.device-panel-head p {
  margin: 0;
}

.device-subtabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.device-subtabs .tab {
  padding-inline: 0.9rem;
}

.device-table-wrap {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.device-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.72rem;
}

.device-table th,
.device-table td {
  padding: 0.42rem 0.45rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.device-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--surface) 92%, var(--bg));
  font-weight: 600;
}

.device-table tbody tr:hover {
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.device-table tbody tr.device-offline {
  opacity: 0.76;
}

.device-name-btn {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.device-name-btn:hover {
  color: var(--accent);
}

.device-cell-mono {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.7rem;
  color: var(--muted);
  word-break: break-all;
}

/* device name inline edit */
.device-name-cell {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.device-name-input {
  width: 7rem;
  padding: 0.2rem 0.35rem;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.72rem;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3rem;
  height: 1.3rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.7rem;
  cursor: pointer;
  line-height: 1;
}

.btn-icon:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.device-edit-icon {
  opacity: 0;
  transition: opacity 0.15s;
}

.device-table tbody tr:hover .device-edit-icon {
  opacity: 1;
}

/* device power cell */
.device-usage-cell {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  line-height: 1.35;
}

.device-power-cell {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.btn-sm {
  padding: 0.15rem 0.4rem;
  font-size: 0.68rem;
}

.device-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.14rem 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  color: var(--muted);
  white-space: nowrap;
}

.device-pill.online {
  background: color-mix(in srgb, #10b981 12%, var(--surface));
  color: #059669;
}

.device-route-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.45rem;
  border-radius: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  color: var(--muted);
}

.device-route-badge.ok {
  background: color-mix(in srgb, #10b981 14%, var(--surface));
  color: #047857;
}

.device-route-badge.warn {
  background: color-mix(in srgb, #f59e0b 16%, var(--surface));
  color: #b45309;
}

.device-route-badge.muted {
  opacity: 0.7;
}

.device-empty {
  margin: 0;
  padding: 0.35rem 0;
}

.resource-drop-zone {
  position: absolute;
  right: 6vw;
  bottom: 8vh;
  z-index: 30;
  width: 15rem;
  min-height: 7rem;
  display: grid;
  gap: 0.3rem;
  justify-items: start;
  padding: 1rem;
  border: 1px dashed color-mix(in srgb, #34d399 70%, transparent);
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 52%, transparent);
  color: var(--text);
  box-shadow: 0 24px 70px rgba(16, 185, 129, 0.18);
  backdrop-filter: blur(18px);
  cursor: pointer;
}

.resource-drop-zone span:last-child {
  color: var(--muted);
  font-size: 0.8rem;
  text-align: left;
}

.drop-orb,
.resource-inbox-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 14px;
  background: radial-gradient(circle at 30% 20%, #d1fae5, #10b981 45%, #064e3b);
  box-shadow: 0 0 22px rgba(52, 211, 153, 0.5);
}

.resource-inbox {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem;
  margin: 0.8rem 0;
  border-radius: 18px;
}

.form-block {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.form-block.draft-active {
  border-color: color-mix(in srgb, #34d399 65%, var(--border));
  box-shadow: 0 18px 50px rgba(16, 185, 129, 0.14);
}

.placeholder-note {
  padding: 1.5rem;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--muted);
}

/* Setting */
.setting-section {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.meta-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1rem;
}

.toggle-row {
  display: flex;
  gap: 0.5rem;
}

/* Workspace */
.workspace-canvas {
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--surface);
  border: 2px dashed var(--border);
  border-radius: 16px;
  text-align: center;
  color: var(--muted);
}

/* Sub-tabs (communication) */
.sub-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.sub-tab {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  color: var(--text);
  font-size: 0.8rem;
}

.sub-tab.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

/* Wallet / orders */
.wallet-panel .wallet-balance {
  font-size: 1.25rem;
  margin: 0.5rem 0;
}

.wallet-panel .wallet-balance strong {
  color: var(--accent);
  margin-left: 0.35rem;
}

.order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.confirm-dialog {
  margin: 0.75rem 0;
  padding: 0.75rem 1rem;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* Wallet top-up: QR code, redirect, client-secret stages */
.wallet-topup { margin: 0.75rem 0 1rem; }
.wallet-topup .topup-input {
  flex: 1 1 8rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.9rem;
  min-width: 0;
}
.wallet-topup-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin: 0.75rem 0;
}
.wallet-qr-img {
  width: clamp(11rem, 26vw, 16rem);
  height: clamp(11rem, 26vw, 16rem);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  object-fit: contain;
}
.wallet-topup-redirect {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0.75rem 0;
}
.wallet-topup-redirect .btn { width: auto; margin-top: 0; }
.pref-wallet .item-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  align-items: baseline;
}

/* Admin payment provider config */
.admin-payment-new-btn { margin: 0.75rem 0; width: auto; }
.payment-config-form { margin-top: 0.75rem; }
.payment-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.75rem;
}
.payment-config-field { margin-bottom: 0; }
.payment-config-textarea {
  width: 100%;
  min-height: 5rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.82rem;
  line-height: 1.4;
  resize: vertical;
  word-break: break-all;
}
.payment-config-field span { font-size: 0.8rem; }

/* Resource devices & share */
.subsection {
  margin: 1rem 0;
}

.subsection h3 {
  margin-bottom: 0.5rem;
}

.device-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.device-status {
  font-size: 0.8rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.share-form select {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.95rem;
  width: 100%;
}

.perm-fieldset {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 0.75rem 0;
}

.perm-fieldset legend {
  font-size: 0.875rem;
  color: var(--muted);
  padding: 0 0.35rem;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
}

.token-display {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.token-field {
  font-family: ui-monospace, monospace;
  font-size: 0.85rem;
  width: 100%;
}

/* Settings update banner & admin */
.update-banner {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border: 1px solid var(--accent);
  border-radius: 10px;
}

.update-link {
  color: var(--accent);
  font-weight: 600;
}

.admin-section h4 {
  margin: 0.75rem 0 0.5rem;
  font-size: 0.95rem;
}

.admin-table-wrap {
  overflow-x: auto;
  margin-bottom: 0.75rem;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.admin-table th,
.admin-table td {
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  text-align: left;
}

.admin-table th {
  background: var(--bg);
  font-weight: 600;
}

.badge {
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 15%, var(--surface));
}

.perm-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.5rem 0 1rem;
}

.perm-row label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
}

.token-box {
  margin-top: 1rem;
  padding: 0.75rem;
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 8px;
  word-break: break-all;
}

.wallet-balance {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--accent);
}

.artifact-card.artifact-confirm {
  border-left: 3px solid var(--accent);
}

.artifact-card.artifact-error {
  border-left: 3px solid var(--danger);
}

.artifact-card.artifact-task {
  border-left: 3px solid color-mix(in srgb, var(--accent) 60%, var(--text));
}

.artifact-card.artifact-web {
  border-left: 3px solid color-mix(in srgb, var(--accent) 40%, #3b82f6);
}

.artifact-card.artifact-app,
.artifact-card.artifact-resource {
  border-left: 3px solid color-mix(in srgb, var(--accent) 50%, #22c55e);
}

.artifact-card.artifact-payment,
.artifact-card.artifact-order {
  border-left: 3px solid color-mix(in srgb, var(--accent) 50%, #eab308);
}

.artifact-card.artifact-file,
.artifact-card.artifact-form {
  border-left: 3px solid var(--border);
}

.artifact-card.artifact-im {
  border-left: 3px solid color-mix(in srgb, var(--accent) 40%, #a855f7);
}

/* ── sender avatars ──────────────────────────────────────────── */
.message-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(28px, 3.5vw, 36px);
  height: clamp(28px, 3.5vw, 36px);
  border-radius: 50%;
  background: var(--border);
  color: var(--text);
  font-size: clamp(11px, 1.2vw, 14px);
  font-weight: 600;
  flex-shrink: 0;
}
.message-avatar-human { background: color-mix(in srgb, #a855f7 70%, var(--bg)); color: #fff; }
.message-avatar-ai     { background: color-mix(in srgb, #3b82f6 75%, var(--bg)); color: #fff; }
.message-avatar-device { background: color-mix(in srgb, #22c55e 70%, var(--bg)); color: #fff; }
.message-avatar-system { background: var(--border); color: var(--text); }

/* ── status card body ────────────────────────────────────────── */
.status-card .status-metrics {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.35rem 0 0.25rem;
}
.status-metric {
  display: grid;
  grid-template-columns: clamp(40px, 6vw, 64px) 1fr clamp(32px, 5vw, 48px);
  align-items: center;
  gap: 0.5rem;
}
.status-metric-label {
  font-size: clamp(10px, 1.1vw, 12px);
  color: var(--text);
  opacity: 0.75;
  text-transform: uppercase;
}
.status-metric-track {
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
}
.status-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.status-bar-cpu  { background: #ef4444; }
.status-bar-mem  { background: #f59e0b; }
.status-bar-disk { background: #3b82f6; }
.status-metric-value {
  font-size: clamp(10px, 1.1vw, 12px);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.status-live {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: clamp(10px, 1.1vw, 12px);
  color: #22c55e;
  margin-top: 0.25rem;
}
.status-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  animation: status-pulse 1.4s ease-in-out infinite;
}
@keyframes status-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.8); }
}

/* ── task card body ──────────────────────────────────────────── */
.task-card .task-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.4rem 0;
}
.task-progress-track {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: var(--border);
  overflow: hidden;
}
.task-progress-bar {
  height: 100%;
  border-radius: 4px;
  background: var(--accent);
  transition: width 0.4s ease;
}
.task-progress-value {
  font-size: clamp(11px, 1.2vw, 13px);
  font-variant-numeric: tabular-nums;
  min-width: 2.5em;
  text-align: right;
}
.task-card .task-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: clamp(10px, 1.1vw, 12px);
  flex-wrap: wrap;
}
.task-assignee-label,
.task-assignee {
  opacity: 0.75;
}
.task-status {
  padding: 0.1em 0.5em;
  border-radius: 999px;
  font-weight: 600;
}
.task-status-pending { background: color-mix(in srgb, #f59e0b 20%, var(--bg)); color: #b45309; }
.task-status-running { background: color-mix(in srgb, #3b82f6 20%, var(--bg)); color: #2563eb; }
.task-status-done    { background: color-mix(in srgb, #22c55e 20%, var(--bg)); color: #15803d; }
.task-status-failed  { background: color-mix(in srgb, var(--danger) 20%, var(--bg)); color: var(--danger); }

/* ── confirm card body ───────────────────────────────────────── */
.confirm-card .confirm-text {
  font-weight: 500;
  margin-bottom: 0.4rem;
}
.confirm-impact,
.confirm-rollback {
  display: flex;
  gap: 0.5rem;
  font-size: clamp(11px, 1.2vw, 13px);
  margin: 0.2rem 0;
}
.confirm-impact-label,
.confirm-rollback-label {
  opacity: 0.6;
  flex-shrink: 0;
}
.confirm-reversible {
  font-size: clamp(10px, 1.1vw, 12px);
  opacity: 0.7;
  margin: 0.2rem 0;
}
.confirm-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.confirm-action-approve,
.confirm-action-reject {
  flex: 1;
  padding: 0.4em 0.8em;
  border-radius: 6px;
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: clamp(12px, 1.3vw, 14px);
  transition: background 0.15s, border-color 0.15s;
}
.confirm-action-approve {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.confirm-action-approve:hover { filter: brightness(1.1); }
.confirm-action-reject {
  background: transparent;
  color: var(--text);
}
.confirm-action-reject:hover { background: var(--border); }

/* ── form card body ──────────────────────────────────────────── */
.form-card .form-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(120px, 18vw, 180px), 1fr));
  gap: 0.4rem;
  margin-top: 0.3rem;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.35em 0.5em;
  background: var(--border);
  border-radius: 6px;
}
.form-field-label {
  font-size: clamp(9px, 1vw, 11px);
  opacity: 0.6;
  text-transform: uppercase;
}
.form-field-value {
  font-size: clamp(12px, 1.3vw, 14px);
  font-weight: 500;
}

/* ── order card body ─────────────────────────────────────────── */
.order-card .order-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: clamp(11px, 1.2vw, 13px);
  padding: 0.2rem 0;
  border-bottom: 1px solid var(--border);
}
.order-card .order-row:last-child { border-bottom: none; }
.order-label { opacity: 0.6; }
.order-amount { font-weight: 600; color: #eab308; }

/* ── payment card body ───────────────────────────────────────── */
.payment-card .payment-amount-row,
.payment-card .payment-method-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: clamp(11px, 1.2vw, 13px);
  padding: 0.2rem 0;
}
.payment-amount {
  font-size: clamp(14px, 1.6vw, 18px);
  font-weight: 700;
  color: #eab308;
}
.payment-action {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.5em 0.8em;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font-size: clamp(12px, 1.3vw, 14px);
  transition: filter 0.15s;
}
.payment-action:hover { filter: brightness(1.1); }

/* ── im card body ────────────────────────────────────────────── */
.im-card .im-text {
  font-size: clamp(13px, 1.4vw, 15px);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.im-card .im-channel {
  font-size: clamp(9px, 1vw, 11px);
  opacity: 0.5;
  margin-top: 0.25rem;
}

.share-guest-card {
  max-width: 28rem;
}

.share-guest-card code {
  word-break: break-all;
}

/* M10 UI polish */
.screen-header {
  margin-bottom: 1.25rem;
}

.screen-subtitle {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.screen-badge {
  display: none;
}

.auth-brand {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent);
}

.hero-card,
.account-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  margin-bottom: 1rem;
}

.avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
}

.avatar-lg {
  width: 3.25rem;
  height: 3.25rem;
  font-size: 1.25rem;
}

.account-name {
  margin: 0;
  font-weight: 600;
  font-size: clamp(0.9rem, 1.8vw, 1rem);
  line-height: 1.2;
}

.account-card-meta {
  min-width: 0;
  flex: 1 1 auto;
}

.account-id {
  margin: 0.1rem 0 0;
  font-size: clamp(0.7rem, 1.4vw, 0.78rem);
  word-break: break-all;
}

.account-compact {
  display: flex;
  flex-direction: column;
  gap: clamp(0.55rem, 1.4vw, 0.75rem);
}

.account-compact-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: clamp(0.55rem, 1.6vw, 0.9rem);
  align-items: start;
  padding-bottom: clamp(0.45rem, 1.2vw, 0.65rem);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.account-compact-row:last-child,
.pref-account .subscription-panel {
  border-bottom: none;
  padding-bottom: 0;
}

.account-compact-label {
  margin: 0;
  padding-top: clamp(0.35rem, 1vw, 0.45rem);
  color: var(--muted);
  font-size: clamp(0.75rem, 1.5vw, 0.85rem);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.account-compact-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.4rem, 1.1vw, 0.55rem);
}

.account-compact-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.45rem, 1.3vw, 0.7rem);
}

.account-compact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-left: auto;
}

.account-compact-actions .btn {
  padding: 0.35rem 0.65rem;
  font-size: clamp(0.72rem, 1.5vw, 0.8rem);
}

.account-compact-edit,
.account-contact-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
  gap: 0.4rem;
  align-items: center;
}

.account-compact-edit .btn,
.account-contact-row .btn {
  width: auto;
  justify-self: start;
  padding: 0.4rem 0.75rem;
  font-size: clamp(0.72rem, 1.5vw, 0.8rem);
  white-space: nowrap;
}

.account-compact-edit input,
.account-contact-row input,
.account-contact-row select {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0.45rem 0.6rem;
  font-size: clamp(0.78rem, 1.5vw, 0.88rem);
}

.account-form-notice {
  margin: 0;
  grid-column: 1 / -1;
  font-size: clamp(0.72rem, 1.4vw, 0.8rem);
  color: color-mix(in srgb, var(--accent) 80%, var(--text));
}

/* 设置页「切换账号」：本机记住的账号列表（类似 IM 最近账号） */
.account-switch-list {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--border);
}

.account-switch-empty {
  margin: 0;
  font-size: clamp(0.72rem, 1.4vw, 0.8rem);
  color: var(--muted);
}

.account-switch-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
}

.account-switch-avatar {
  width: 2rem;
  height: 2rem;
  font-size: 0.9rem;
}

.account-switch-name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  font-weight: 600;
  font-size: clamp(0.78rem, 1.6vw, 0.88rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-switch-badge {
  font-style: normal;
  flex-shrink: 0;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  font-size: clamp(0.62rem, 1.2vw, 0.7rem);
  font-weight: 600;
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  color: var(--accent);
}

.account-switch-item .account-switch-use {
  margin-left: auto;
  white-space: nowrap;
  padding: 0.3rem 0.6rem;
  font-size: clamp(0.7rem, 1.5vw, 0.8rem);
}

.account-switch-forget {
  flex-shrink: 0;
  padding: 0.3rem 0.6rem;
  font-size: clamp(0.85rem, 1.6vw, 1rem);
  line-height: 1;
  color: var(--muted);
}

.account-switch-add {
  align-self: flex-start;
}

.account-contact-notice {
  grid-column: 1 / -1;
}

.pref-account .logout-btn {
  margin-top: clamp(0.65rem, 1.5vw, 0.9rem);
}

/* Language row shares the compact account layout. */
.account-compact-lang {
  align-items: center;
}

.account-compact-lang .boot-auth-lang {
  display: contents;
}

.account-compact-lang .boot-auth-lang-label {
  margin: 0;
  padding-top: clamp(0.35rem, 1vw, 0.45rem);
  text-align: start;
  color: var(--muted);
  font-size: clamp(0.75rem, 1.5vw, 0.85rem);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.account-compact-lang .boot-auth-lang-row {
  justify-content: flex-start;
  min-width: 0;
}

.account-compact-lang .boot-auth-lang-btn {
  width: clamp(1.7rem, 4vw, 2rem);
  height: clamp(1.7rem, 4vw, 2rem);
  border-color: var(--border);
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 80%, transparent);
}

.account-compact-lang .boot-auth-lang-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.account-compact-lang .boot-auth-lang-flag {
  color: var(--text);
  font-size: clamp(0.58rem, 1.3vw, 0.68rem);
}

.pref-account .subscription-panel {
  margin-top: 0;
  margin-bottom: 0;
}

.pref-account .subscription-status {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.pref-account .subscription-status-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  font-size: clamp(0.78rem, 1.5vw, 0.88rem);
}

.pref-account .subscription-status .row.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.pref-account .subscription-status .btn {
  padding: 0.35rem 0.65rem;
  font-size: clamp(0.72rem, 1.5vw, 0.8rem);
}

.pref-account .plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: 0.45rem;
}

.pref-account .plan-card {
  padding: clamp(0.55rem, 1.3vw, 0.7rem);
  border: 1px solid var(--border);
  border-radius: clamp(8px, 1.2vw, 10px);
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 70%, transparent);
}

.pref-account .plan-name {
  font-size: clamp(0.82rem, 1.6vw, 0.92rem);
  font-weight: 600;
}

.pref-account .plan-period,
.pref-account .plan-desc {
  margin: 0.15rem 0 0;
  font-size: clamp(0.7rem, 1.4vw, 0.78rem);
  color: var(--muted);
}

.pref-account .plan-price {
  margin: 0.25rem 0 0.4rem;
  font-size: clamp(0.85rem, 1.7vw, 0.95rem);
  font-weight: 600;
}

.pref-account .plan-card .btn {
  width: 100%;
  padding: 0.35rem 0.55rem;
  font-size: clamp(0.72rem, 1.5vw, 0.8rem);
}

@media (max-width: 767px) {
  .account-compact-row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .account-compact-lang .boot-auth-lang {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
  }

  .account-compact-actions {
    margin-left: 0;
    width: 100%;
  }
}

.setting-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.setting-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow);
}

.setting-card-wide {
  grid-column: 1 / -1;
}

.setting-card h3 {
  margin-top: 0;
}

.system-pref-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem;
  border-radius: 22px;
  margin-bottom: 1rem;
  background: radial-gradient(circle at 80% 20%, rgba(96, 165, 250, 0.25), transparent 34%), color-mix(in srgb, var(--surface) 78%, transparent);
}

.pref-eyebrow {
  display: inline-block;
  color: var(--accent);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.25rem;
}

.pref-orb {
  width: 4rem;
  height: 4rem;
  border-radius: 1.4rem;
  background: conic-gradient(from 120deg, var(--accent), #8b5cf6, #22c55e, var(--accent));
  box-shadow: 0 18px 60px rgba(96, 165, 250, 0.24);
}

.system-pref-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.pref-card {
  position: relative;
  overflow: hidden;
}

.pref-card::after {
  content: "";
  position: absolute;
  inset: auto -20% -45% auto;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.pref-card-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  margin-bottom: 0.6rem;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.logout-btn {
  margin-top: 0.5rem;
}

.stat-row {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.stat-card {
  flex: 1;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: center;
}

.stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
}

.stat-label {
  font-size: 0.8rem;
  color: var(--muted);
}

.cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.65rem;
}

.cap-card {
  padding: 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  opacity: 0.85;
}

.cap-card.cap-on {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  opacity: 1;
}

.workspace-canvas {
  min-height: 320px;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 16px;
}

.flow-canvas {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  background:
    radial-gradient(circle at 20% 20%, rgba(245, 158, 11, 0.16), transparent 32%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 90%, transparent), color-mix(in srgb, var(--surface-2) 80%, transparent));
}

.flow-toolbar,
.flow-inspector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem;
  border-radius: 16px;
}

.flow-toolbar p,
.flow-inspector p,
.flow-inspector h3 {
  margin: 0;
}

.flow-board {
  position: relative;
  min-height: 240px;
}

.flow-node {
  position: absolute;
  width: 10.5rem;
  min-height: 5.4rem;
  display: grid;
  gap: 0.35rem;
  text-align: left;
  padding: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--text);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
  cursor: pointer;
}

.flow-node.active {
  border-color: color-mix(in srgb, var(--accent) 65%, transparent);
  box-shadow: 0 24px 70px rgba(245, 158, 11, 0.22);
}

.flow-node small {
  color: var(--muted);
}

.node-input { left: 2%; top: 42%; }
.node-agent { left: 28%; top: 18%; }
.node-resource { left: 52%; top: 48%; }
.node-output { right: 3%; top: 20%; }

.node-port {
  position: absolute;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--accent);
  top: 50%;
}

.node-in { left: -0.35rem; }
.node-out { right: -0.35rem; }

.flow-line {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.75;
  transform-origin: left center;
}

.line-1 { left: 16%; top: 50%; width: 18%; transform: rotate(-18deg); }
.line-2 { left: 40%; top: 42%; width: 18%; transform: rotate(20deg); }
.line-3 { left: 66%; top: 48%; width: 16%; transform: rotate(-25deg); }

.flow-inspector {
  align-items: flex-start;
  flex-direction: column;
}

.flow-status {
  display: flex;
  gap: 0.45rem;
}

.flow-status span {
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--muted);
  font-size: 0.78rem;
}

.flow-run-log {
  width: 100%;
  padding-top: 0.75rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
}

.flow-run-log p {
  margin-top: 0.25rem;
}

.workspace-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.workspace-tile {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  font-size: 0.9rem;
  color: var(--muted);
}

.workspace-tile-add {
  border-style: dashed;
  cursor: pointer;
}

.workspace-hint {
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}

.admin-panel {
  margin-top: 0.5rem;
}

.admin-tabs {
  margin-bottom: 1rem;
}

.admin-status {
  color: var(--accent);
  font-size: 0.875rem;
  margin: 0 0 0.75rem;
}

.admin-form {
  margin-top: 1rem;
}

.admin-form h4 {
  margin: 0 0 0.75rem;
}

.admin-locale-add {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.admin-locale-add-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}

.admin-locale-add-row .field {
  flex: 1 1 10rem;
  min-width: 8rem;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}

.form-grid select {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
}

.table-scroll {
  overflow-x: auto;
}

/* Sync panels: the outer .setting-card is the only visible box.
   Inner panels keep their layout spacing but drop redundant borders/backgrounds. */
.sync-settings-panel,
.sync-source-list-panel {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.sync-webdav-form {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.desktop-root .sync-settings-panel,
.desktop-root .sync-source-list-panel,
.desktop-root .sync-webdav-form {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* 三栏布局:同步方式 / 添加同步桶 / 同步内容 */
.sync-three-column {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sync-three-column > .setting-card,
.sync-three-column > .panel {
  margin: 0;
}

.sync-content-panel .sync-content-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1rem;
  margin-top: 0.5rem;
}

.sync-content-panel .sync-content-grid .perm-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.sync-webdav-form-inner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (max-width: 540px) {
  .sync-content-panel .sync-content-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.sync-source-table {
  min-width: 58rem;
}

.sync-source-table th,
.sync-source-table td {
  vertical-align: top;
}

.sync-source-table .interval-input {
  width: 5.5rem;
  max-width: 100%;
}

.sync-status-stack {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 12rem;
  max-width: 20rem;
}

.sync-status-error {
  color: var(--danger);
  font-size: 0.8rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.sync-webdav-form {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

/* 第二栏:默认收起,点击按钮展开;表单紧凑三列网格减少页面占用。 */
.sync-webdav-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.5rem;
}

.sync-webdav-caret {
  font-size: 0.75rem;
  color: var(--muted);
}

.sync-webdav-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.4rem 0.75rem;
}

.sync-webdav-grid .field,
.sync-webdav-grid input {
  min-width: 0;
  width: 100%;
}

.sync-webdav-grid .field span {
  font-size: 0.75rem;
  color: var(--muted);
}

.sync-webdav-grid input {
  box-sizing: border-box;
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
}

.sync-form-actions {
  flex-wrap: wrap;
}

.sync-form-actions .btn {
  min-width: 5.5rem;
}

.sync-form-status {
  overflow-wrap: anywhere;
}

.sync-test-result {
  display: block;
  width: 100%;
  max-width: 18rem;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.sync-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-width: 15rem;
}

.sync-action-stack {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 15rem;
}

.sync-action-buttons-secondary .btn {
  flex: 1 1 auto;
}

@media (min-width: 760px) {
  .sync-webdav-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

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

.admin-cap-list li {
  cursor: pointer;
}

.btn-sm {
  padding: 0.3rem 0.55rem;
  font-size: 0.8rem;
}

.admin-tab-pane.hidden {
  display: none;
}

.admin-table .inline-cell {
  width: 100%;
  min-width: 4.5rem;
  box-sizing: border-box;
}

.admin-version-toolbar {
  margin-bottom: 0.75rem;
}

.admin-version-table .admin-version-actions {
  white-space: nowrap;
}

.admin-version-table .admin-version-actions .btn {
  margin-right: 0.35rem;
}

.admin-version-row.editing td {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.admin-version-detail-row td {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  padding-top: 0.35rem;
  padding-bottom: 0.75rem;
}

.admin-version-detail-grid {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  margin-bottom: 0.65rem;
}

.admin-version-download-preview input[readonly] {
  opacity: 0.85;
}

.admin-version-footer {
  margin-top: 0.75rem;
}

.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(7rem, 18vw, 10rem), 1fr));
  gap: clamp(0.5rem, 1.5vw, 0.85rem);
  margin-bottom: clamp(0.75rem, 2vw, 1rem);
}

.admin-stat-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: clamp(0.65rem, 1.5vw, 0.85rem);
  border: 1px solid var(--border);
  border-radius: clamp(0.5rem, 1vw, 0.65rem);
  background: var(--panel);
}

.admin-stat-card strong {
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
}

.admin-stat-card span {
  font-size: clamp(0.75rem, 1.8vw, 0.85rem);
  color: var(--muted);
}

.admin-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.25rem, 0.8vw, 0.4rem);
}

.admin-confirm-box {
  border-color: var(--danger, #c44);
}

.admin-modal-root {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 3vw, 1.5rem);
}

.admin-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background: rgba(8, 10, 18, 0.52);
  backdrop-filter: blur(6px);
}

.admin-modal-panel {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  max-height: min(90vh, 720px);
  overflow: auto;
}

.admin-table .admin-col-sticky {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--panel);
  box-shadow: 1px 0 0 var(--border);
}

.admin-table thead .admin-col-sticky {
  z-index: 2;
}

.admin-tier-detail-toolbar {
  margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem);
}

.admin-tier-detail {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.5vw, 0.75rem);
}

.admin-capability-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(12rem, 20vw, 18rem), 1fr));
  gap: clamp(0.75rem, 1.5vw, 1rem);
  margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem);
}

.admin-capability-group {
  border: 1px solid var(--border, #d0d7de);
  border-radius: 0.5rem;
  padding: clamp(0.5rem, 1vw, 0.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.admin-capability-group h5 {
  margin: 0 0 0.25rem;
  font-size: clamp(0.7rem, 1vw, 0.8rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #656d76);
}

.admin-capability-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.25rem;
  cursor: pointer;
  border-radius: 0.25rem;
}

.admin-capability-toggle:hover {
  background: var(--hover-bg, rgba(0, 0, 0, 0.04));
}

.admin-capability-toggle input[type="checkbox"] {
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
  cursor: pointer;
}

.admin-capability-label {
  flex: 1;
  font-size: clamp(0.78rem, 1.1vw, 0.85rem);
  user-select: none;
}

.admin-capability-quota {
  flex-shrink: 0;
  font-size: 0.7rem;
  padding: 0.05rem 0.35rem;
  border-radius: 0.75rem;
  background: var(--badge-bg, #eaeef2);
  color: var(--text-muted, #656d76);
}

.admin-capability-save-bar {
  margin-top: clamp(0.25rem, 0.8vw, 0.5rem);
}

.admin-audit-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-audit-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border);
  font-size: clamp(0.8rem, 1.8vw, 0.875rem);
}

.admin-audit-kind {
  color: var(--accent);
  font-family: var(--mono, monospace);
}

.admin-audit-full li {
  flex-direction: column;
  align-items: flex-start;
}

.admin-cell-muted {
  color: var(--muted);
  font-size: clamp(0.75rem, 1.6vw, 0.82rem);
}

.admin-list-meta {
  margin: 0 0 0.5rem;
}

.admin-pagination {
  margin-top: 0.75rem;
  align-items: center;
  gap: clamp(0.5rem, 1.5vw, 0.75rem);
}

.btn.danger,
.btn-sm.danger {
  border-color: var(--danger, #c44);
  color: var(--danger, #c44);
}

.btn.danger:hover,
.btn-sm.danger:hover {
  background: color-mix(in srgb, var(--danger, #c44) 12%, transparent);
}

.form-inline select {
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}

.object-window-panel {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
  overflow: auto;
}

.object-window-header h2 {
  margin: 0 0 0.25rem;
}

.device-summary,
.device-file-browser {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.device-summary-row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.35rem, 1.2vw, 0.65rem);
  padding: clamp(0.4rem, 1vw, 0.55rem) clamp(0.55rem, 1.4vw, 0.75rem);
  border-radius: 0.55rem;
  background: rgba(15, 23, 42, 0.35);
  border: 1px solid rgba(148, 163, 184, 0.18);
  font-size: clamp(0.72rem, 1.6vw, 0.82rem);
  line-height: 1.35;
}

.device-summary-name {
  font-weight: 600;
  white-space: nowrap;
}

.device-summary-sep {
  opacity: 0.35;
  user-select: none;
}

.device-summary-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  white-space: nowrap;
}

.device-summary-key {
  opacity: 0.72;
}

.device-summary-val {
  font-variant-numeric: tabular-nums;
}

.device-summary-row .device-pill {
  margin-left: auto;
}

.device-panel-tabs {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.device-terminal-panel {
  flex: 1 1 auto;
  min-height: 0;
}

.device-terminal-panel .device-app-l1-terminal {
  min-height: clamp(12rem, 45vh, 28rem);
  border-radius: 0.35rem;
}

.device-tool {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.device-tool-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.device-tool-head h3,
.device-list-block h4 {
  margin: 0;
}

.device-tool-actions {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.device-remote-embed-wrap {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  flex: 1 1 auto;
}

.object-window-panel.device-remote-window-fill {
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.object-window-panel.device-remote-window-fill .device-remote-embed-wrap {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

.device-remote-embed-wrap .device-remote-embed {
  border: none;
  border-radius: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  flex: 1 1 auto;
  height: 100%;
}

.device-remote-embed-wrap .device-remote-embed .remote-mode-bar {
  display: none;
}

.remote-mode-bar {
  display: flex;
  align-items: center;
  gap: clamp(0.35rem, 1vw, 0.5rem);
  flex-wrap: nowrap;
  padding: clamp(0.2rem, 0.6vw, 0.35rem) clamp(0.4rem, 1.2vw, 0.5rem);
  background: #111827;
  border-bottom: 1px solid #1f2937;
  font-size: clamp(0.7rem, 1.8vw, 0.75rem);
  min-height: 0;
}

.remote-mode-picker {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 0.8vw, 0.4rem);
  flex: 0 1 auto;
  min-width: 0;
}

.remote-mode-label {
  color: #9ca3af;
  flex-shrink: 0;
}

.remote-mode-select {
  background: #1f2937;
  color: #e5e7eb;
  border: 1px solid #374151;
  border-radius: clamp(0.2rem, 0.6vw, 0.25rem);
  padding: clamp(0.15rem, 0.5vw, 0.2rem) clamp(0.3rem, 0.9vw, 0.4rem);
  font-size: inherit;
  max-width: min(12rem, 40vw);
}

.remote-mode-detail {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: clamp(0.15rem, 0.5vw, 0.25rem);
  z-index: 120;
  min-width: min(28rem, 92vw);
  max-width: min(36rem, 96vw);
  padding: clamp(0.35rem, 1vw, 0.5rem) clamp(0.45rem, 1.2vw, 0.6rem);
  background: rgba(17, 24, 39, 0.97);
  border: 1px solid #374151;
  border-radius: clamp(0.25rem, 0.8vw, 0.4rem);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  flex-direction: column;
  gap: 0.2rem;
}

.remote-mode-picker:hover .remote-mode-detail,
.remote-mode-picker:focus-within .remote-mode-detail,
.remote-mode-picker.peek .remote-mode-detail {
  display: flex;
}

.remote-mode-detail-line {
  margin: 0;
  color: #9ca3af;
  font-size: clamp(0.65rem, 1.6vw, 0.7rem);
  line-height: 1.45;
  word-break: break-word;
}

.remote-mode-detail-line .ok {
  color: #4ade80;
}

.remote-mode-detail-line .warn {
  color: #fbbf24;
}

.remote-mode-detail-line .err {
  color: #f87171;
}

.remote-mode-detail-line.muted {
  color: #6b7280;
}

.remote-mode-detail-line.err-srv {
  color: #f87171;
}

.device-remote-embed-wrap .device-remote-embed .device-app-remote-frame-wrap {
  min-height: 0;
}

/* Remote fill: picture fills the MOS remote window, not OS fullscreen. */
.device-remote-embed.device-remote-embed-fill {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  border-radius: 0;
}

.device-remote-embed-fill .remote-mode-bar,
.device-remote-embed-fill .device-app-remote-toolbar {
  display: none !important;
}

.device-remote-embed-fill .device-app-http-frame {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

.device-remote-embed-fill .device-app-remote-frame-wrap {
  flex: 1 1 auto;
  min-height: 0 !important;
  max-height: none !important;
  height: 100%;
}

.device-remote-embed-fill .device-app-path-steps {
  display: none !important;
}

.remote-mode-bar .remote-fill-btn {
  margin-left: auto;
  flex-shrink: 0;
  min-width: clamp(1.75rem, 4vw, 2.25rem);
  padding: clamp(0.15rem, 0.5vw, 0.35rem) clamp(0.35rem, 1vw, 0.55rem);
  font-size: clamp(0.85rem, 2vw, 1rem);
  line-height: 1;
}

.remote-fill-exit-btn {
  position: absolute;
  top: clamp(0.35rem, 1vw, 0.55rem);
  right: clamp(0.35rem, 1vw, 0.55rem);
  z-index: 60;
  min-width: clamp(1.75rem, 4vw, 2.25rem);
  padding: clamp(0.15rem, 0.5vw, 0.35rem) clamp(0.35rem, 1vw, 0.55rem);
  font-size: clamp(0.85rem, 2vw, 1rem);
  line-height: 1;
  border-radius: clamp(0.2rem, 0.6vw, 0.3rem);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.55);
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  opacity: 0.45;
}

.remote-fill-exit-btn:hover,
.remote-fill-exit-btn:focus-visible {
  opacity: 1;
  background: rgba(0, 0, 0, 0.78);
}

.device-remote-desktop {
  min-height: 0;
}

.device-remote-actions {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.device-remote-live-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--text-muted, #9aa0a6);
  cursor: pointer;
}

.device-remote-hint {
  margin: 0;
  font-size: 0.85rem;
}

.device-remote-surface {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  border-radius: clamp(0.35rem, 1vw, 0.6rem);
  min-height: clamp(12rem, 40vh, 28rem);
  overflow: hidden;
}

.device-remote-placeholder {
  margin: 0;
  padding: 1rem;
  text-align: center;
}

.device-remote-surface .device-app-remote-frame {
  max-width: 100%;
  max-height: clamp(12rem, 40vh, 28rem);
  object-fit: contain;
  cursor: crosshair;
}

.device-form-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: end;
}

.device-dual-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.device-app-icon {
  cursor: pointer;
}

.device-app-remote-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-height: 0;
  height: 100%;
}

.device-app-remote-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.device-app-remote-actions {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.device-app-remote-surface {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--border) 36%, transparent);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

/* L2.1-8: the live frame container fills the panel height so the remote image
   is laid across the whole window (commercial full-window view). The
   frame-wrap inside grows to fill, and the <img> fits within it preserving
   aspect (max-width/height:100%) so click mapping stays exact (img element
   == image content, no object-fit letterbox math needed). */
.device-app-http-frame {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  overflow: hidden;
  position: relative; /* L2.1-9: anchor for the commercial loading/error overlay */
}

/* ---- L2.1-9 commercial remote view (default) vs debug-remote (?debugRemote=1) ----
   Commercial: only titlebar + remote frame + minimal overlay. All debug chrome
   (toolbar / stats / status bar / debug log / info line) hidden via CSS so the
   remote image fills the window content area. debug-remote reveals everything. */
.device-app-remote-panel.commercial-remote {
  padding: 0;
  gap: 0;
  background: #000;
}
.device-app-remote-panel.commercial-remote .object-window-header {
  display: none !important; /* L2.1-10 P0-1: 商业模式内容区不显示 app 名/lnk 路径
                              (浮窗 floating-titlebar 已显示标题) */
}
.device-app-remote-panel.commercial-remote .device-app-remote-toolbar,
.device-app-remote-panel.commercial-remote .device-app-http-stats,
.device-app-remote-panel.commercial-remote .device-app-status-bar,
.device-app-remote-panel.commercial-remote .device-app-http-debug,
.device-app-remote-panel.commercial-remote .device-app-http-info,
.device-app-remote-panel.commercial-remote .device-app-http-frame > p.muted,
.device-app-remote-panel.commercial-remote .device-app-remote-placeholder,
.device-app-remote-panel.commercial-remote p.token-box {
  display: none !important;
}
/* Live connection-step timeline (path_steps). Visible even in commercial
   mode so the user sees where time is spent (click -> launch -> window ->
   first frame). */
.device-app-path-steps {
  margin: 0;
  padding: 0 0 0 18px;
  font-size: 11px;
  line-height: 1.5;
  list-style: decimal;
}
.device-app-path-steps li.pending { color: #ffcc55; }
.device-app-path-steps li.ok { color: #66dd66; }
.device-app-path-steps .device-app-path-title {
  font-size: 11px;
  color: #aaa;
  margin-top: 4px;
  border-top: 1px dashed #444;
  padding-top: 2px;
}
.device-app-remote-panel.commercial-remote .device-app-http-frame {
  gap: 0;
  border-radius: 0;
  background: #000;
}
.device-app-remote-panel.commercial-remote .device-app-remote-frame-wrap {
  background: #000;
}
.device-app-remote-panel.commercial-remote .device-app-remote-frame {
  cursor: pointer; /* commercial: pointer cursor, not crosshair */
  touch-action: none;
}

/* Remote app (HWND-bound): show the full window, letterbox if needed. */
.device-app-remote-panel.commercial-remote.device-app-bound {
  background: #141418;
}
.device-app-remote-panel.commercial-remote.device-app-bound .device-app-remote-frame-wrap,
.device-app-remote-panel.commercial-remote.device-app-bound .device-app-remote-touch-surface,
.device-app-remote-panel.commercial-remote.device-app-bound .device-app-http-frame {
  background: #141418;
}
.device-app-remote-panel.commercial-remote.device-app-bound .device-app-remote-frame,
.device-app-remote-panel.commercial-remote.device-app-bound video.device-app-remote-frame {
  object-fit: contain !important;
}

/* Remote desktop (full virtual screen): fill the MOS window. */
.device-app-remote-panel.commercial-remote.device-remote-desktop .device-app-remote-frame,
.device-app-remote-panel.commercial-remote.device-remote-desktop video.device-app-remote-frame {
  object-fit: cover !important;
}

.device-app-remote-panel.device-app-sub-window.commercial-remote .remote-mode-bar,
.device-app-remote-panel.device-app-sub-window .object-window-header {
  display: none !important;
}

/* L1 CLI terminal — xterm.js fills the whole content area below the mode bar.
   The container must have explicit height (flex:1 + min-height:0) so FitAddon
   can measure pixels and compute cols/rows. xterm's own CSS (.xterm) is loaded
   from CDN; here we only make the host div behave as a full-bleed flex child. */
.device-app-l1-terminal {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  background: #000;
  position: relative;
  overflow: hidden;
}

/* L5 Moonlight: iframe must own the panel. The legacy remote-surface
   placeholder used to sit beside it and squeeze the stream into a strip. */
.device-app-l5-moonlight {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  background: #0b0e14;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  container-type: size;
}
.device-app-l5-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  opacity: 0;
}
.device-app-l5-silent {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  background: #000;
}
.device-app-l5-moonlight.portrait-view .device-app-l5-iframe {
  inset: auto;
  width: 100cqh;
  height: 100cqw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center center;
}
.stream-progress-track {
  width: 100%;
  max-width: 360px;
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
}
.stream-progress-bar {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), #60a5fa);
  transition: width 0.4s ease;
}
.stream-progress-value {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: #9ca3af;
  min-width: 2.5em;
  text-align: right;
}
.device-app-l1-terminal > div {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}
.device-app-l1-terminal .xterm {
  height: 100%;
  padding: 6px;
  box-sizing: border-box;
}
.device-app-l1-terminal .xterm-viewport {
  background: #000 !important;
}

/* Commercial loading / error overlay. Covers the viewport until the first
   frame loads; shows a friendly error (never 0x0 / HTTP 500). */
.device-app-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.95rem;
  pointer-events: none;
}
.device-app-overlay > p {
  margin: 0;
  padding: 0 1rem;
  text-align: center;
}
.device-app-overlay-error {
  color: rgba(255, 178, 178, 0.95);
}

.device-app-remote-frame {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: crosshair;
  user-select: none;
  touch-action: none;
  -webkit-touch-callout: none;
}

.device-app-remote-panel.commercial-remote .device-app-remote-frame-wrap,
.device-app-remote-panel.commercial-remote .device-app-remote-touch-surface,
.device-app-remote-panel.device-remote-embed .device-app-remote-frame-wrap {
  border-radius: 0;
  border: none;
  background: #000;
  min-height: 0;
  flex: 1 1 auto;
  height: 100%;
}

.device-app-remote-panel.commercial-remote .remote-mode-bar {
  display: none !important;
}

.device-app-remote-panel.device-remote-standalone.commercial-remote .object-window-header {
  display: none !important;
}

.remote-mode-status-inline {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(0.62rem, 1.5vw, 0.72rem);
  color: #fde68a;
  padding: 0 0.25rem;
}

.remote-mode-status-inline:empty {
  display: none;
}

.device-app-remote-panel.device-remote-standalone.commercial-remote .device-app-http-frame {
  flex: 1 1 auto;
  min-height: 0;
}

.device-app-remote-panel.device-remote-standalone.commercial-remote .device-app-remote-frame-wrap {
  flex: 1 1 auto;
  min-height: 0;
}

.device-app-remote-panel.device-remote-standalone.commercial-remote .device-app-remote-frame,
.device-app-remote-panel.device-remote-standalone.commercial-remote video.device-app-remote-frame {
  object-fit: cover !important;
}

.device-app-remote-touch-surface {
  touch-action: none;
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  overflow: hidden;
}

.device-app-remote-frame-wrap {
  container-type: size;
}

.device-app-remote-frame-wrap.portrait-view {
  overflow: hidden;
}

.remote-view-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.remote-virt-cursor {
  position: absolute;
  width: clamp(0.55rem, 1.6vw, 0.85rem);
  height: clamp(0.55rem, 1.6vw, 0.85rem);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.75), 0 0 6px rgba(0, 0, 0, 0.45);
  background: rgba(255, 80, 60, 0.7);
  pointer-events: none;
  z-index: 6;
  will-change: left, top;
}

.remote-pointer-hud-container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  pointer-events: none;
}

.remote-pointer-hud {
  position: absolute;
  left: 50%;
  bottom: clamp(0.45rem, 2vh, 0.85rem);
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.25rem, 1.2vw, 0.4rem);
  max-width: min(96%, 28rem);
  padding: clamp(0.3rem, 1.2vw, 0.45rem);
  border-radius: 0.65rem;
  background: color-mix(in srgb, #111 78%, transparent);
  border: 1px solid color-mix(in srgb, #fff 18%, transparent);
  backdrop-filter: blur(8px);
  pointer-events: auto;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.remote-pointer-hud-container.hud-collapsed .remote-pointer-hud {
  opacity: 0;
  transform: translateX(-50%) translateY(110%);
  pointer-events: none;
  visibility: hidden;
}

.remote-pointer-hud-btn {
  min-width: clamp(2.2rem, 9vw, 2.8rem);
  min-height: clamp(2rem, 7vw, 2.4rem);
  padding: 0 clamp(0.35rem, 1.5vw, 0.55rem);
  border: 1px solid color-mix(in srgb, #fff 22%, transparent);
  border-radius: 0.45rem;
  background: color-mix(in srgb, #2a2a2a 88%, transparent);
  color: #f2f2f2;
  font-size: clamp(0.7rem, 2.6vw, 0.82rem);
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.remote-pointer-hud-btn.active {
  background: color-mix(in srgb, #3d7eff 70%, #1a1a1a);
  border-color: color-mix(in srgb, #8eb6ff 55%, transparent);
}

.remote-pointer-hud-collapse {
  min-width: clamp(1.8rem, 6vw, 2.2rem);
  opacity: 0.7;
}

.remote-pointer-hud-dock-tab {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) translateY(100%);
  display: none;
  align-items: center;
  justify-content: center;
  gap: clamp(0.2rem, 1vw, 0.35rem);
  min-width: clamp(5.5rem, 28vw, 9rem);
  min-height: clamp(1.75rem, 5.5vw, 2.15rem);
  padding: clamp(0.25rem, 1vw, 0.4rem) clamp(0.55rem, 2vw, 0.85rem);
  border-radius: 0.55rem 0.55rem 0 0;
  pointer-events: auto;
  opacity: 0.92;
  z-index: 31;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.remote-pointer-hud-container.hud-collapsed .remote-pointer-hud-dock-tab {
  display: inline-flex;
  transform: translateX(-50%) translateY(0);
}

.remote-pointer-hud-dock-tab:hover {
  opacity: 1;
}

.remote-pointer-hud-dock-tab-icon {
  font-size: clamp(0.75rem, 2.4vw, 0.9rem);
  line-height: 1;
}

.remote-pointer-hud-dock-tab-label {
  font-size: clamp(0.62rem, 2vw, 0.74rem);
  line-height: 1.1;
  white-space: nowrap;
}

.device-app-remote-panel.commercial-remote .remote-pointer-hud {
  display: flex !important;
}

.device-app-remote-panel.commercial-remote .remote-pointer-hud-container.hud-collapsed .remote-pointer-hud {
  display: flex !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.device-app-remote-panel.commercial-remote .remote-pointer-hud-container.hud-collapsed .remote-pointer-hud-dock-tab {
  display: inline-flex !important;
}

.device-app-remote-touch-surface .device-app-remote-frame {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.device-app-remote-placeholder {
  padding: 1rem;
  text-align: center;
}

.device-app-icon-grid {
  margin-top: 0.35rem;
}

.device-app-panel {
  margin-top: 0.75rem;
}

.device-select-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.device-select-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.85rem;
}

.device-select-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

/* OS icon inside device-select-chip: a 14px glyph rendered via CSS mask so it
   inherits the chip's text color (white when active, var(--text) otherwise).
   Each data-platform value gets its own SVG mask. */
.device-os-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: no-repeat center / contain;
  mask: no-repeat center / contain;
}

.device-os-icon[data-platform="windows"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5.1 9.5 4.3V11H3V5.1zM3 12.9H9.5V19.7L3 18.9V12.9zM10.5 4.2 21 3V11H10.5V4.2zM10.5 12.9H21V21L10.5 19.8V12.9z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5.1 9.5 4.3V11H3V5.1zM3 12.9H9.5V19.7L3 18.9V12.9zM10.5 4.2 21 3V11H10.5V4.2zM10.5 12.9H21V21L10.5 19.8V12.9z'/%3E%3C/svg%3E");
}

.device-os-icon[data-platform="linux"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c-1.8 0-3 1.4-3 3.3 0 1 .4 1.9 1 2.4-1.8 1-3 3-3 5.8 0 2.6 1 4.8 2.4 5.8.5.4 1 .7 2.6.7s2.1-.3 2.6-.7c1.4-1 2.4-3.2 2.4-5.8 0-2.8-1.2-4.8-3-5.8.6-.5 1-1.4 1-2.4C15 3.4 13.8 2 12 2z'/%3E%3Ccircle cx='10.3' cy='5.5' r='.9' fill='%23000'/%3E%3Ccircle cx='13.7' cy='5.5' r='.9' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c-1.8 0-3 1.4-3 3.3 0 1 .4 1.9 1 2.4-1.8 1-3 3-3 5.8 0 2.6 1 4.8 2.4 5.8.5.4 1 .7 2.6.7s2.1-.3 2.6-.7c1.4-1 2.4-3.2 2.4-5.8 0-2.8-1.2-4.8-3-5.8.6-.5 1-1.4 1-2.4C15 3.4 13.8 2 12 2z'/%3E%3Ccircle cx='10.3' cy='5.5' r='.9' fill='%23000'/%3E%3Ccircle cx='13.7' cy='5.5' r='.9' fill='%23000'/%3E%3C/svg%3E");
}

.device-os-icon[data-platform="android"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 10a6 6 0 0 1 12 0v6H6z M4.5 11v4M19.5 11v4' stroke='%23000' stroke-width='1.8' stroke-linecap='round' fill='none'/%3E%3Cpath d='M8 6 6.5 4M16 6l1.5-2' stroke='%23000' stroke-width='1.8' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 10a6 6 0 0 1 12 0v6H6z M4.5 11v4M19.5 11v4' stroke='%23000' stroke-width='1.8' stroke-linecap='round' fill='none'/%3E%3Cpath d='M8 6 6.5 4M16 6l1.5-2' stroke='%23000' stroke-width='1.8' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}

.device-os-icon[data-platform="macos"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 13c0-2.2-1.7-3.5-3.4-3.5-1 0-1.7.5-2.6.5s-1.6-.5-2.6-.5c-2.2 0-3.9 1.6-3.9 3.6 0 2.6 1.7 5.4 3.9 5.4 1 0 1.5-.5 2.6-.5s1.6.5 2.6.5c2.2 0 3.9-2.8 3.9-5.4 0-.3 0-.6-.1-1zM14.5 8c.5-1 1.5-1.6 2.6-1.6.2 1.2-.3 2.3-1.1 3-.7.7-1.7 1-2.7.8-.2-1.2.2-2.2 1.2-2.8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 13c0-2.2-1.7-3.5-3.4-3.5-1 0-1.7.5-2.6.5s-1.6-.5-2.6-.5c-2.2 0-3.9 1.6-3.9 3.6 0 2.6 1.7 5.4 3.9 5.4 1 0 1.5-.5 2.6-.5s1.6.5 2.6.5c2.2 0 3.9-2.8 3.9-5.4 0-.3 0-.6-.1-1zM14.5 8c.5-1 1.5-1.6 2.6-1.6.2 1.2-.3 2.3-1.1 3-.7.7-1.7 1-2.7.8-.2-1.2.2-2.2 1.2-2.8z'/%3E%3C/svg%3E");
}

.device-os-icon[data-platform="web"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 0c-2.5 2-4 5-4 10s1.5 8 4 10m0-20c2.5 2 4 5 4 10s-1.5 8-4 10M2 12h20' stroke='%23000' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 0c-2.5 2-4 5-4 10s1.5 8 4 10m0-20c2.5 2 4 5 4 10s-1.5 8-4 10M2 12h20' stroke='%23000' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
}

.device-os-icon[data-platform="other"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='4' width='16' height='16' rx='2' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='4' width='16' height='16' rx='2' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
}

.device-app-summary {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-start;
}

/* When the fetch/sync button is present it sits immediately to the left of the
   "常用应用" summary text, clustered at the start of the row (not pushed to the
   far edges by the default space-between). The app grid renders full-width
   below this row, not inside it. */
.device-app-summary:has(.device-apps-fetch-btn) {
  justify-content: flex-start;
  align-items: center;
}

.device-apps-fetch-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.device-apps-manual-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.manual-app-form {
  margin: 0.5rem 0;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel, rgba(255, 255, 255, 0.04));
}
.manual-app-form h4 {
  margin: 0 0 0.5rem;
}
.manual-app-form .field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}
.manual-app-form .field > span {
  font-size: 0.8rem;
  opacity: 0.7;
}

/* Right-click "add to desktop" mini menu — rendered at the app root so it
   escapes any transformed ancestor (e.g. floating windows) and fixes to the
   viewport at the pointer position. */
.app-context-menu {
  position: fixed;
  z-index: 9000;
  pointer-events: auto;
  min-width: 9rem;
  padding: 0.25rem;
  background: var(--panel, #fff);
  border: 1px solid var(--border, #ddd);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.app-context-menu .dcm-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0.4rem 0.65rem;
  border-radius: 6px;
  cursor: pointer;
  color: inherit;
}
.app-context-menu .dcm-item:hover {
  background: rgba(127, 127, 127, 0.15);
}

/* Remote-app icon shown on the desktop (matches the resource-page tile size). */
.ds-icon-img {
  width: clamp(3rem, 7vw, 3.5rem);
  height: clamp(3rem, 7vw, 3.5rem);
  object-fit: contain;
  border-radius: 22%;
  display: block;
}

.device-app-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 0.55rem;
}

.device-app-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.65rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--border) 36%, transparent);
  border-radius: 10px;
  min-width: 0;
}

.device-app-card strong,
.device-app-card .muted,
.device-app-source {
  overflow: hidden;
  text-overflow: ellipsis;
}

.device-app-card .muted {
  white-space: nowrap;
}

.device-app-source {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--text);
  font-size: 0.75rem;
  white-space: nowrap;
}

.device-list-block {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}

.device-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.device-list li,
.device-running-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.5rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--border) 36%, transparent);
  border-radius: 10px;
}

.device-app-list-item {
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.device-app-list-item:hover {
  background: color-mix(in srgb, var(--accent, #4a90d9) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent, #4a90d9) 40%, transparent);
}

.device-running-item > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.device-running-item .muted,
.device-list .muted {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-summary-note,
.device-file-empty,
.device-file-truncated {
  margin: 0;
}

.device-summary-meta {
  grid-template-columns: minmax(4rem, auto) minmax(0, 1fr);
}

.device-file-browser {
  padding-top: 0.35rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
}

.device-file-browser-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.device-file-browser-head h3 {
  margin: 0;
  font-size: 0.95rem;
}

.device-file-browser-head p {
  margin: 0.15rem 0 0;
}

.my-devices-panel .my-devices-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.my-devices-back {
  flex-shrink: 0;
}

.my-devices-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.5rem;
}

.my-devices-list li {
  flex-direction: column;
  align-items: stretch;
}

.my-devices-device-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.my-devices-device-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.my-devices-device-name {
  font-weight: 600;
}

.my-devices-device-meta {
  font-size: 0.85em;
}

.my-devices-unavailable {
  margin: 0.15rem 0 0;
  font-size: 0.85em;
}

.device-file-browser-actions {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.device-file-table-wrap {
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  border-radius: 10px;
}

.device-file-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  min-width: 0;
}

.device-file-table th,
.device-file-table td {
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 32%, transparent);
  text-align: left;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-file-table th {
  font-size: 0.75rem;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.device-file-table tbody tr:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.device-file-table tbody tr.device-file-dir {
  cursor: pointer;
}

.device-file-entry-btn {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.device-file-entry-btn:hover {
  color: var(--accent);
}

.object-window-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1rem;
  margin: 0;
}

.object-window-meta dt {
  font-weight: 600;
  color: var(--muted);
}

.object-window-meta dd {
  margin: 0;
}

.object-window-event {
  padding: 0.75rem 1rem;
}

/* ---- Device file browser: Explorer UI ---- */

/* Address / path bar - Windows Explorer style address bar.
   Left-aligned, each segment is a clickable button. */
.device-file-pathbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.1rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--bg) 70%, var(--surface));
  margin-bottom: 0.4rem;
  font-size: 0.82rem;
  min-height: 2rem;
}

.device-file-path-item {
  border: 0;
  background: transparent;
  padding: 0.15rem 0.4rem;
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  border-radius: 4px;
  white-space: nowrap;
}

.device-file-path-item:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}

.device-file-path-sep {
  color: var(--muted);
  user-select: none;
  margin: 0 0.05rem;
  opacity: 0.6;
}

/* Legacy breadcrumb (kept for backwards compat, unused now) */
.device-file-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.15rem;
  padding: 0.35rem 0.1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  margin-bottom: 0.4rem;
  font-size: 0.82rem;
}

.device-file-crumb {
  border: 0;
  background: transparent;
  padding: 0.15rem 0.35rem;
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  border-radius: 4px;
}

.device-file-crumb:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}

.device-file-crumb.active {
  color: var(--muted);
  cursor: default;
}

.device-file-crumb.active:hover {
  background: transparent;
}

.device-file-crumb-sep {
  color: var(--muted);
  user-select: none;
  margin: 0 0.05rem;
}

/* Utility: visually hidden but available to screen readers */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.device-file-toolbar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0.45rem 0;
}

.device-file-toolbar .btn {
  font-size: 0.8rem;
  padding: 0.3rem 0.55rem;
}

/* View switcher (Icons / List / Details) */
.device-file-view-switcher {
  display: flex;
  gap: 0.15rem;
  margin-left: 0.3rem;
}

.device-file-view-btn {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  transition: background 0.12s, border-color 0.12s;
}

.device-file-view-btn:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: var(--accent);
}

.device-file-view-btn.active {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-color: var(--accent);
  color: var(--accent);
}

.device-file-search {
  margin-left: auto;
  width: clamp(120px, 22vw, 200px);
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.8rem;
}

.device-file-search:focus {
  outline: none;
  border-color: var(--accent);
}

/* Sortable column headers */
.device-file-table th.sortable {
  cursor: pointer;
  user-select: none;
}

.device-file-table th.sortable:hover {
  color: var(--accent);
}

.device-file-table th.sort-asc::after {
  content: " ▲";
  font-size: 0.65rem;
  color: var(--muted);
}

.device-file-table th.sort-desc::after {
  content: " ▼";
  font-size: 0.65rem;
  color: var(--muted);
}

/* Selected rows */
.device-file-table tbody tr.selected {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.device-file-table tbody tr.selected:hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}

.device-file-table tbody tr.device-file-rename-row:hover {
  background: transparent;
}

/* Inline rename input */
.device-file-rename-input {
  width: 100%;
  padding: 0.15rem 0.3rem;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
}

.device-file-rename-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* New folder inline row */
.device-file-newfolder-input {
  width: 100%;
  padding: 0.15rem 0.3rem;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
}

/* File type icon */
.device-file-icon {
  display: inline-block;
  width: 1.2rem;
  text-align: center;
  margin-right: 0.3rem;
  font-size: 0.95em;
  line-height: 1;
}

.device-file-name-cell {
  display: flex;
  align-items: center;
  gap: 0;
}

.device-file-name-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Status bar */
.device-file-statusbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--muted);
  padding-top: 0.4rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 35%, transparent);
  margin-top: 0.4rem;
}

.device-file-statusbar .muted-sep {
  opacity: 0.5;
}

.device-file-statusbar .device-file-status-msg {
  margin-left: auto;
  color: var(--text);
}

.device-file-statusbar .device-file-status-msg.error {
  color: #ef4444;
}

.device-file-statusbar .device-file-status-msg.success {
  color: #22c55e;
}

/* Context menu (reuses desktop-context-menu visual style, scoped) */
.device-file-context-menu {
  position: fixed;
  z-index: 500;
  min-width: 10rem;
  padding: 0.3rem;
  border-radius: 10px;
  background: rgba(17, 24, 39, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
  animation: ds-fade-in 0.12s ease;
}

.device-file-context-menu .dcm-item {
  display: block;
  width: 100%;
  padding: 0.45rem 0.7rem;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.78rem;
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
}

.device-file-context-menu .dcm-item:hover {
  background: var(--accent, #6366f1);
  color: #fff;
}

.device-file-context-menu .dcm-item.danger {
  color: #f87171;
}

.device-file-context-menu .dcm-item.danger:hover {
  background: #dc2626;
  color: #fff;
}

.device-file-context-menu .dcm-sep {
  height: 1px;
  margin: 0.2rem 0;
  background: rgba(255, 255, 255, 0.1);
}

/* Confirm dialog (inline, reuses confirm-dialog pattern) */
.device-file-confirm {
  margin: 0.75rem 0;
  padding: 0.75rem 1rem;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.device-file-confirm p {
  margin: 0;
  flex: 1;
  min-width: 0;
}

/* Table keyboard focus */
.device-file-table-wrap:focus {
  outline: none;
}

.device-file-table-wrap:focus-within {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

/* ---- Icons view (Windows Explorer "Extra large/medium icons" style) ---- */
/* Grid of tiles: large icon on top, label underneath, centered. */
.device-file-view-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: 0.35rem 0.25rem;
  padding: 0.5rem 0.3rem;
  align-content: start;
}

.device-file-icon-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25rem;
  padding: 0.5rem 0.3rem;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: default;
  user-select: none;
  text-align: center;
  min-width: 0;
  transition: background 0.1s, border-color 0.1s;
}

.device-file-icon-tile:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.device-file-icon-tile.selected {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

.device-file-icon-tile.renaming {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: var(--accent);
}

/* Large icon glyph for tiles */
.device-file-icon-large {
  font-size: 2.2rem;
  line-height: 1;
  margin: 0;
  width: auto;
  text-align: center;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

/* Real icon image rendered inside an exe icon span. */
.device-file-exe-img {
  display: inline-block;
  width: 1.1rem;
  height: 1.1rem;
  object-fit: contain;
  vertical-align: middle;
}

/* In Icons (large-tile) view, the exe icon image is bigger. */
.device-file-icon-large .device-file-exe-img {
  width: 2.4rem;
  height: 2.4rem;
}

/* Label under the icon: clamp to ~2 lines, centered, truncated */
.device-file-icon-label {
  font-size: 0.78rem;
  line-height: 1.2;
  color: var(--text);
  word-break: break-word;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
}

.device-file-icon-tile.selected .device-file-icon-label {
  color: var(--accent);
}

/* Inline rename input inside an icon tile */
.device-file-rename-input.icon-rename {
  width: 100%;
  max-width: 5rem;
  text-align: center;
  font-size: 0.78rem;
  padding: 0.1rem 0.2rem;
}

/* Aggregate "My Computer" drive grid — Windows「此电脑」layout:
   group header + wide horizontal drive tiles with capacity bars. */
.my-devices-group-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.4rem 0.1rem 0.1rem;
}

.my-devices-group-caret {
  color: var(--accent);
  font-size: 0.7rem;
  line-height: 1;
}

.my-devices-group-header h4 {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted, #6b7280);
}

.my-drives-grid {
  grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
  gap: 0.45rem;
  padding: 0.55rem 0.1rem 0.75rem;
}

/* Horizontal This-PC tile: glyph left, text block right. */
.my-drive-tile {
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 0.8rem;
  padding: 0.65rem 0.8rem;
  cursor: pointer;
  background: transparent;
}

.my-drive-tile:hover {
  border-color: color-mix(in srgb, var(--border, #d0d7de) 80%, transparent);
}

.my-drive-tile .device-file-icon-label {
  font-size: 0.92rem;
  font-weight: 600;
  -webkit-line-clamp: 1;
}

.my-drive-meta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.22rem;
  min-width: 0;
  flex: 1;
}

.my-drive-device {
  font-size: 0.68rem;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Capacity bar + "{free} free of {total}" caption (This-PC drive style). */
.my-drive-cap {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 0.15rem;
  min-width: 0;
}

.my-drive-cap-bar {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--muted, #9ca3af) 25%, transparent);
  overflow: hidden;
}

.my-drive-cap-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
  min-width: 3px;
}

/* Almost-full volume: Windows turns the bar red past ~90% used. */
.my-drive-cap-fill.low {
  background: #d13438;
}

.my-drive-cap-text {
  font-size: 0.68rem;
  color: var(--muted, #9ca3af);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Windows-style hard-drive glyph (inline SVG, theme-aware, no white bg) */
.my-drive-glyph {
  display: block;
  margin: 0;
  flex-shrink: 0;
}

.my-drive-top {
  fill: currentColor;
  opacity: 0.45;
}

.my-drive-body {
  fill: currentColor;
  opacity: 0.8;
}

.my-drive-slot {
  fill: var(--bg);
  opacity: 0.9;
}

.my-drive-led {
  fill: var(--accent);
}

.my-drive-tile:hover .my-drive-led {
  fill: var(--accent);
  filter: drop-shadow(0 0 3px var(--accent));
}


/* ---- List view (Windows Explorer "List" style) ---- */
/* Compact name+icon pairs flowing into multiple columns. */
.device-file-view-list {
  column-width: 14rem;
  column-gap: 0.75rem;
  padding: 0.4rem 0.3rem;
}

.device-file-list-row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.35rem;
  border-radius: 5px;
  cursor: default;
  user-select: none;
  break-inside: avoid;
  margin-bottom: 0.05rem;
  min-width: 0;
  transition: background 0.1s;
}

.device-file-list-row:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.device-file-list-row.selected {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.device-file-list-row.renaming {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.device-file-list-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
  color: var(--text);
}

.device-file-list-row.selected .device-file-list-label {
  color: var(--accent);
}

/* Keep the rename input compact in list view */
.device-file-list-row .device-file-rename-input {
  flex: 1;
  min-width: 0;
}

/* Details view: keep table layout but ensure consistent scrolling */
.device-file-view-details {
  width: 100%;
}

/* Settings - shell style picker */
.shell-style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(140px, 28vw, 180px), 1fr));
  gap: clamp(0.55rem, 2vw, 0.85rem);
  margin-top: 0.65rem;
}

.shell-style-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, transform 0.15s;
}

.shell-style-option:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
}

.shell-style-option.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}

.shell-style-option strong {
  font-size: 0.88rem;
}

.shell-style-option .muted {
  font-size: 0.72rem;
  line-height: 1.35;
}

.shell-preview {
  width: 100%;
  height: clamp(3.5rem, 10vw, 4.25rem);
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  position: relative;
  overflow: hidden;
}

.shell-preview-mac {
  background: linear-gradient(180deg, #e8e8ed 0 28%, #6366f1 28% 72%, rgba(255, 255, 255, 0.75) 72%);
}

.shell-preview-mac::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.35rem;
  transform: translateX(-50%);
  width: 42%;
  height: 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
}

.shell-preview-ubuntu {
  background: linear-gradient(180deg, #3d3846 0 26%, #e95420 26% 68%, #f6f5f4 68%);
}

.shell-preview-ubuntu::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.3rem;
  transform: translateX(-50%);
  width: 48%;
  height: 0.5rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 -2px 0 #c7431a;
}

.shell-preview-windows {
  background: linear-gradient(180deg, #0078d4 0 24%, #0078d4 24% 68%, #f3f3f3 68%);
}

.shell-preview-windows::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.65rem;
  background: rgba(255, 255, 255, 0.92);
  border-top: 1px solid #c8c8c8;
}

[data-theme="dark"] .shell-preview-mac {
  background: linear-gradient(180deg, #2a2a2e 0 28%, #6366f1 28% 72%, rgba(20, 20, 28, 0.9) 72%);
}

[data-theme="dark"] .shell-preview-ubuntu {
  background: linear-gradient(180deg, #1a1418 0 26%, #e95420 26% 68%, #241f22 68%);
}

[data-theme="dark"] .shell-preview-windows {
  background: linear-gradient(180deg, #005a9e 0 24%, #005a9e 24% 68%, #1f1f1f 68%);
}

.setting-subheading {
  margin: 1.1rem 0 0.35rem;
  font-size: clamp(0.82rem, 2vw, 0.95rem);
}

.wallpaper-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(5.5rem, 18vw, 7rem), 1fr));
  gap: clamp(0.45rem, 1.5vw, 0.65rem);
  margin-top: 0.55rem;
}

.wallpaper-option {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  padding: clamp(0.45rem, 1.2vw, 0.6rem);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius: clamp(10px, 1.5vw, 12px);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  cursor: pointer;
  text-align: center;
  font-size: clamp(0.68rem, 1.5vw, 0.78rem);
  transition: border-color 0.15s, transform 0.15s;
}

.wallpaper-option:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
}

.wallpaper-option.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent);
}

.wallpaper-preview {
  width: 100%;
  height: clamp(3.25rem, 9vw, 4rem);
  border-radius: clamp(8px, 1.2vw, 10px);
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}

.wallpaper-preview-mos-default {
  background:
    radial-gradient(ellipse 90% 70% at 50% 35%, color-mix(in srgb, #6366f1 35%, transparent), transparent 72%),
    linear-gradient(155deg, #141828 0%, #1a2240 38%, #101428 100%);
}

.wallpaper-preview-ubuntu-purple {
  background: linear-gradient(135deg, #2c001e 0%, #5e2750 45%, #77216f 100%);
}

.wallpaper-preview-aurora {
  background:
    radial-gradient(ellipse 70% 50% at 20% 30%, rgba(56, 189, 248, 0.35) 0%, transparent 60%),
    linear-gradient(160deg, #0f172a 0%, #1e293b 50%, #0c1222 100%);
}

.wallpaper-preview-elegant {
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(251, 146, 60, 0.45) 0%, transparent 55%),
    linear-gradient(180deg, #1e1b4b 0%, #312e81 35%, #7c2d12 100%);
}

.wallpaper-preview-forest {
  background:
    radial-gradient(ellipse 90% 70% at 40% 20%, rgba(52, 211, 153, 0.2) 0%, transparent 50%),
    linear-gradient(165deg, #022c22 0%, #064e3b 40%, #14532d 100%);
}

.wallpaper-preview-minimal-light {
  background: linear-gradient(145deg, #dbeafe 0%, #e0e7ff 40%, #f0fdf4 100%);
}

.wallpaper-preview-custom {
  background-color: color-mix(in srgb, var(--surface) 80%, transparent);
}

.wallpaper-option-wrap {
  position: relative;
}

.wallpaper-remove-btn {
  position: absolute;
  top: clamp(0.2rem, 0.8vw, 0.35rem);
  right: clamp(0.2rem, 0.8vw, 0.35rem);
  width: clamp(1.25rem, 3vw, 1.5rem);
  height: clamp(1.25rem, 3vw, 1.5rem);
  border: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 88%, #000 12%);
  color: var(--text);
  font-size: clamp(0.85rem, 2vw, 1rem);
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
}

.wallpaper-remove-btn:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--danger, #ef4444) 75%, var(--surface) 25%);
  color: #fff;
}

.wallpaper-upload-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.45rem, 1.5vw, 0.75rem);
  margin-top: clamp(0.65rem, 2vw, 0.9rem);
}

.wallpaper-upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wallpaper-upload-notice {
  margin-top: 0.45rem;
  font-size: clamp(0.72rem, 1.6vw, 0.82rem);
  color: var(--accent);
}

/* —— Shell chrome: layout + glass tint (desktop 保持 90% 透明) —— */

[data-shell] .os-statusbar,
[data-shell] .comm-sidebar,
[data-shell] .comm-sidebar-topbar,
[data-shell] .comm-rail,
[data-shell] .comm-list-panel,
[data-shell] .comm-reveal-tab,
[data-shell] .os-dock {
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}

.app-root[data-shell="mac"] .desktop-root {
  --accent: #6366f1;
  --accent-hover: #4f46e5;
}

.app-root[data-theme="dark"][data-shell="mac"] .desktop-root {
  --chrome-glass: rgba(28, 28, 32, 0.1);
  --chrome-glass-sidebar: rgba(28, 28, 32, 0.12);
}

.app-root[data-theme="light"][data-shell="mac"] .desktop-root {
  --chrome-glass: rgba(255, 255, 255, 0.12);
  --chrome-glass-sidebar: rgba(248, 248, 252, 0.18);
}

.app-root[data-shell="ubuntu"] .desktop-root {
  --accent: #e95420;
  --accent-hover: #c7431a;
}

.app-root[data-theme="dark"][data-shell="ubuntu"] .desktop-root {
  --chrome-glass: rgba(44, 0, 30, 0.1);
  --chrome-glass-sidebar: rgba(44, 0, 30, 0.13);
}

.app-root[data-theme="light"][data-shell="ubuntu"] .desktop-root {
  --chrome-glass: rgba(255, 252, 250, 0.12);
  --chrome-glass-sidebar: rgba(255, 248, 244, 0.18);
}

.app-root[data-shell="windows"] .desktop-root {
  --accent: #0078d4;
  --accent-hover: #106ebe;
}

.app-root[data-theme="dark"][data-shell="windows"] .desktop-root {
  --chrome-glass: rgba(16, 32, 52, 0.1);
  --chrome-glass-sidebar: rgba(16, 32, 52, 0.12);
}

.app-root[data-theme="light"][data-shell="windows"] .desktop-root {
  --chrome-glass: rgba(248, 250, 255, 0.12);
  --chrome-glass-sidebar: rgba(240, 246, 255, 0.18);
}

/* macOS layout */
[data-shell="mac"] .os-statusbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  justify-content: stretch;
}

[data-shell="mac"] .os-status-left {
  position: static;
  justify-self: start;
}

[data-shell="mac"] .os-status-center {
  justify-self: center;
}

[data-shell="mac"] .os-status-right {
  position: static;
  justify-self: end;
}

[data-shell="mac"] .os-dock-touch {
  bottom: clamp(0.65rem, 2vh, 0.85rem);
}

.app-root[data-shell="mac"] .desktop-root .os-dock {
  border-radius: clamp(16px, 3vw, 20px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

[data-shell="mac"] .floating-window {
  border-radius: clamp(10px, 2vw, 14px);
}

[data-shell="mac"] .floating-titlebar {
  justify-content: flex-start;
}

[data-shell="mac"] .os-window-controls {
  order: -1;
}

/* Ubuntu accents */
.app-root[data-shell="ubuntu"] .desktop-root .os-statusbar {
  border-bottom: 2px solid rgba(233, 84, 32, 0.55);
}

.app-root[data-shell="ubuntu"] .desktop-root .os-status-dot {
  background: #e95420;
  box-shadow: 0 0 6px #e95420;
}

.app-root[data-shell="ubuntu"] .desktop-root .os-logo {
  color: #e95420;
}

.app-root[data-shell="ubuntu"] .desktop-root .comm-rail {
  background: rgba(44, 0, 30, 0.22);
  border-right-color: rgba(233, 84, 32, 0.45);
}

.app-root[data-shell="ubuntu"] .desktop-root .os-dock {
  border-bottom: 3px solid rgba(233, 84, 32, 0.65);
  border-radius: clamp(12px, 2.5vw, 16px);
}

.app-root[data-shell="ubuntu"] .desktop-root .comm-reveal-tab {
  border-color: rgba(233, 84, 32, 0.55);
}

[data-shell="ubuntu"] .floating-window {
  border-radius: clamp(8px, 1.5vw, 12px);
}

[data-shell="ubuntu"] .os-window-controls {
  order: 10;
  margin-left: auto;
}

[data-shell="ubuntu"] .os-dot {
  border-radius: 50%;
}

/* Windows layout */
.app-root[data-shell="windows"] .desktop-root .os-logo {
  color: #60cdff;
}

.app-root[data-shell="windows"] .desktop-root .comm-reveal-tab {
  background: rgba(0, 120, 212, 0.35);
  border-color: rgba(0, 120, 212, 0.55);
}

[data-shell="windows"] .os-dock-touch {
  bottom: 0;
  padding-bottom: 0;
}

[data-shell="windows"] .task-dock {
  bottom: 0;
}

.app-root[data-shell="windows"] .desktop-root .os-dock {
  width: 100%;
  max-width: 100%;
  padding: clamp(0.35rem, 1.2vh, 0.5rem) clamp(0.5rem, 2vw, 0.85rem);
  justify-content: flex-start;
  border-radius: 0;
  border-top: 1px solid var(--chrome-border);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.28);
}

[data-shell="windows"] .dock-item {
  min-height: clamp(2.5rem, 6vh, 3rem);
  min-width: clamp(2.75rem, 6vw, 3.25rem);
  border-radius: 6px;
}

[data-shell="windows"] .dock-item:hover {
  transform: none;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

[data-shell="windows"] .dock-icon {
  border-radius: 6px;
}

[data-shell="windows"] .floating-window {
  border-radius: clamp(6px, 1vw, 8px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

[data-shell="windows"] .floating-titlebar {
  background: rgba(14, 20, 36, 0.35);
}

[data-shell="windows"] .os-window-controls {
  order: 10;
  margin-left: auto;
  gap: 0;
}

[data-shell="windows"] .os-dot {
  width: clamp(2rem, 4.5vw, 2.45rem);
  height: 100%;
  min-height: 1.75rem;
  border-radius: 0;
  margin: -0.5rem 0;
}

[data-shell="windows"] .os-dot-red {
  background: #c42b1c;
}

[data-shell="windows"] .os-dot-yellow {
  background: #c19c00;
}

[data-shell="windows"] .os-dot-green {
  background: #107c10;
}

[data-shell="windows"] .os-dot-red:hover {
  background: #e81123;
}

/* ===== 桌面图标层 / 右键菜单 / 抖动模式 ===== */
.desktop-surface {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: auto;
}

/* 桌面图标：自由摆放 — 对齐老版 deskIcon（左上角锚点，88px 宽） */
.ds-icon {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: clamp(4.5rem, 9vw, 5.5rem);
  max-width: 88px;
  padding: 8px 4px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s ease;
}
.ds-icon:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--chrome-border, rgba(255, 255, 255, 0.1));
}
.ds-icon.dragging { z-index: 60; cursor: grabbing; }
.ds-icon-tile-wrap {
  position: relative;
  display: inline-flex;
}
.ds-icon-label {
  font-size: clamp(0.65rem, 1.2vw, 0.72rem);
  color: var(--text-soft, rgba(255, 255, 255, 0.92));
  text-align: center;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* 抖动（编辑）模式 */
.desktop-surface.jiggle .ds-icon {
  animation: ds-jiggle 0.4s ease-in-out infinite;
  pointer-events: auto;
}
.desktop-surface.jiggle .ds-icon:hover { background: transparent; border-color: transparent; }
/* 拖动中暂停抖动 */
.desktop-surface.jiggle .ds-icon.dragging {
  animation: none;
  z-index: 60;
  cursor: grabbing;
}
@keyframes ds-jiggle {
  0%, 100% { transform: rotate(-1.5deg); }
  50% { transform: rotate(1.5deg); }
}
.ds-icon-delete {
  position: absolute;
  top: -0.4rem;
  right: -0.4rem;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  border: none;
  background: #ef4444;
  color: #fff;
  font-size: 0.7rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.ds-icon-delete:hover { background: #dc2626; }

.ds-jiggle-hint {
  position: fixed;
  bottom: calc(var(--os-chrome-bottom, 5rem) + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.85);
  color: #fff;
  font-size: 0.72rem;
  backdrop-filter: blur(8px);
  z-index: 320;
  pointer-events: none;
  animation: ds-fade-in 0.2s ease;
}

.ds-jiggle-save {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.55rem 1.4rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(17, 24, 39, 0.88);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  z-index: 330;
  cursor: pointer;
  pointer-events: auto;
  animation: ds-fade-in 0.2s ease;
}
.ds-jiggle-save:hover {
  background: rgba(30, 41, 59, 0.95);
  border-color: rgba(255, 255, 255, 0.35);
}
@keyframes ds-fade-in {
  from { opacity: 0; transform: translate(-50%, 6px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* 桌面右键菜单 */
.desktop-context-menu {
  position: absolute;
  z-index: 400;
  min-width: 9rem;
  padding: 0.3rem;
  border-radius: 10px;
  background: rgba(17, 24, 39, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
  transform: translate(0, 0);
  animation: ds-fade-in 0.12s ease;
}
.dcm-item {
  display: block;
  width: 100%;
  padding: 0.45rem 0.7rem;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.78rem;
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
}
.dcm-item:hover { background: var(--accent, #6366f1); color: #fff; }

/* 任务栏图标抖动 + 操作按钮 */
.os-dock.jiggle .dock-user-item {
  animation: ds-jiggle-dock 0.4s ease-in-out infinite;
}
@keyframes ds-jiggle-dock {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}
.dock-user-item.jiggle { pointer-events: auto; }
.dock-icon-tile-wrap {
  position: relative;
  display: inline-flex;
}
.dock-icon-del,
.dock-icon-todesk {
  position: absolute;
  top: -0.5rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: none;
  color: #fff;
  font-size: 0.72rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  z-index: 5;
}
.dock-icon-del { right: -0.5rem; background: #ef4444; }
.dock-icon-del:hover { background: #dc2626; }
.dock-icon-todesk { left: -0.5rem; background: #3b82f6; }
.dock-icon-todesk:hover { background: #2563eb; }

.dock-jiggle-done {
  margin-left: 0.4rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 0.72rem;
  cursor: pointer;
  align-self: center;
}
.dock-jiggle-done:hover { background: rgba(255, 255, 255, 0.2); }

.dock-user-icons { margin-left: 0.3rem; }

/* ===== Dock 显隐控制（栏内底部空心下三角收起 / 同位置上三角展开） ===== */
.os-dock-touch.task-dock {
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.28s ease;
}

.dock-cluster {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  max-width: 100%;
}
[data-shell="windows"] .dock-cluster {
  width: 100%;
}

/* 收起态：dock 主体下缩消失 */
.os-dock-touch.task-dock.dock-collapsed .os-dock {
  transform: translateY(140%);
  opacity: 0;
  pointer-events: none;
}
.os-dock-touch.task-dock .os-dock,
.desktop-root .os-dock-touch.task-dock .os-dock {
  position: relative;
  /* 底部只留三角自身高度，让图标名称刚好贴到三角顶边，不额外撑高 */
  padding-bottom: clamp(0.55rem, 1.1vh, 0.7rem);
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.28s ease;
}

/* 共用按钮：透明、无方框 */
.dock-toggle-btn {
  margin: 0;
  padding: 0.1rem 0.45rem;
  border: none;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: color-mix(in srgb, var(--chrome-text, #fff) 72%, transparent);
  font-size: clamp(0.55rem, 1vw, 0.72rem);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.18s ease, transform 0.18s ease, opacity 0.2s ease;
}
.dock-toggle-btn:hover {
  color: color-mix(in srgb, var(--chrome-text, #fff) 100%, transparent);
}
.dock-toggle-btn:active {
  transform: scale(0.92);
}

/* dock 栏内部底部正中：尖角顶住底边横条，顶边刚好贴图标名称 */
.dock-toggle-inside {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 6;
  height: auto;
  padding: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 1px;
  line-height: 1;
}
.dock-toggle-inside:active {
  transform: translateX(-50%) scale(0.92);
}

/* 空心三角字符 */
.dock-toggle-tri {
  display: block;
  font-weight: 400;
  line-height: 1;
  font-size: clamp(0.5rem, 0.9vw, 0.62rem);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

/* 收起后：上三角出现在同一底部正中位置（相对 dock-cluster，与栏内三角同位） */
.dock-toggle-reveal {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 7;
  opacity: 0;
  pointer-events: none;
  height: auto;
  padding: 0;
  padding-bottom: 1px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-size: inherit;
}
.dock-collapsed .dock-toggle-reveal {
  opacity: 1;
  pointer-events: auto;
}
.dock-collapsed .dock-cluster {
  min-height: 0;
}
.dock-toggle-reveal:active {
  transform: translateX(-50%) scale(0.92);
}


/* ===== AI 模型配置面板（设置页 / 通讯台设置栏） ===== */
.ai-model-panel {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0.4rem;
}

.ai-model-panel .muted {
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 0;
}

.steward-perm-panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.steward-mode-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0;
}

.steward-mode-row .muted {
  font-size: 0.85rem;
  margin-right: 0.25rem;
}

.steward-perm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.5rem;
  margin: 0.25rem 0;
}

.steward-perm-grid .perm-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.85rem;
  cursor: pointer;
}

.ai-model-status {
  margin: 0;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  font-size: 0.78rem;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

.ai-model-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ai-model-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.6rem 0.75rem;
  background: color-mix(in srgb, var(--bg) 92%, var(--border));
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: border-color 0.15s ease;
}

.ai-model-card.is-default {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent) inset;
}

.ai-model-card.disabled {
  opacity: 0.65;
}

.ai-model-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.ai-model-card-head strong {
  font-size: 0.88rem;
  display: block;
}

.ai-model-card-head .muted {
  font-size: 0.74rem;
}

.ai-model-card-flags {
  display: flex;
  gap: 0.3rem;
  flex-shrink: 0;
}

.ai-model-flag {
  font-size: 0.68rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  white-space: nowrap;
}

.ai-model-flag.default {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.ai-model-flag.disabled {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}

.ai-model-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.76rem;
}

.ai-model-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}

.ai-model-row .muted {
  font-size: 0.72rem;
}

.ai-model-row code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.74rem;
  background: color-mix(in srgb, var(--border) 35%, transparent);
  padding: 0.05rem 0.35rem;
  border-radius: 6px;
  word-break: break-all;
}

.ai-model-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.1rem;
}

.ai-model-form {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.2rem;
}

.ai-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 0.6rem;
}

.ai-form-grid .field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.76rem;
}

.ai-form-grid .field > span {
  color: var(--muted);
  font-size: 0.74rem;
}

.ai-form-grid .field-wide {
  grid-column: 1 / -1;
}

.ai-form-grid input,
.ai-form-grid select {
  padding: 0.3rem 0.45rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.8rem;
}

.ai-form-toggles {
  align-items: center;
  gap: 1rem;
  font-size: 0.78rem;
}

/* 通讯台设置栏内嵌的 AI 模型面板：收紧间距以适配窄列 */
.comm-setting-ai-models .ai-model-panel {
  gap: 0.5rem;
  margin-top: 0.3rem;
}

.comm-setting-ai-models .ai-form-grid {
  grid-template-columns: 1fr;
}

.comm-setting-ai-models .ai-model-card-body {
  font-size: 0.72rem;
}

@media (max-width: 520px) {
  .ai-form-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== LLM 供应商面板（设置 > 大模型） ===== */
.llm-provider-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.llm-panel-hint {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
}

.llm-provider-actions {
  display: flex;
  gap: 0.5rem;
}

.llm-provider-actions .btn {
  width: auto;
  margin: 0;
}

/* 供应商列表 */
.llm-provider-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.llm-provider-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
  background: color-mix(in srgb, var(--bg) 92%, var(--border));
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: border-color 0.15s ease;
}

.llm-provider-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.llm-provider-card-title {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.llm-provider-card-title strong {
  font-size: 0.9rem;
  font-weight: 600;
}

.llm-provider-card-title .muted {
  font-size: 0.74rem;
}

.llm-provider-card-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.35rem;
}

.llm-provider-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* 模型列表 */
.llm-model-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.llm-model-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--border) 18%, transparent);
  font-size: 0.78rem;
}

.llm-model-row.disabled {
  opacity: 0.55;
}

.llm-model-row.is-default {
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.llm-edit-existing-models {
  margin-bottom: 0.35rem;
}

.llm-form-model-row-new {
  border: 1px dashed color-mix(in srgb, var(--accent) 35%, var(--border));
}

.llm-model-row-main {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  min-width: 0;
}

.llm-model-row-main strong {
  font-size: 0.82rem;
  font-weight: 600;
}

.llm-model-row-main code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.74rem;
  background: color-mix(in srgb, var(--border) 35%, transparent);
  padding: 0.05rem 0.35rem;
  border-radius: 6px;
}

.llm-model-row-main .muted {
  font-size: 0.72rem;
}

.llm-model-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  flex-shrink: 0;
}

.llm-model-row-actions .btn {
  width: auto;
  margin: 0;
}

/* 供应商表单 */
.llm-provider-form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 96%, var(--border));
}

.llm-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.55rem 0.65rem;
}

.llm-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.llm-form-field label {
  font-size: 0.74rem;
  color: var(--muted);
  font-weight: 500;
}

.llm-form-field input,
.llm-form-field select {
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.8rem;
  width: 100%;
  box-sizing: border-box;
}

.llm-form-field input:focus,
.llm-form-field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* 模型子表单 */
.llm-form-models {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.llm-form-models-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.llm-form-models-head strong {
  font-size: 0.82rem;
  font-weight: 600;
}

.llm-form-model-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--border) 12%, transparent);
}

.llm-form-model-main {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.llm-form-model-name,
.llm-form-model-row input,
.llm-form-model-row select {
  padding: 0.3rem 0.45rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.78rem;
  min-width: 0;
  box-sizing: border-box;
}

.llm-form-model-name {
  width: 100%;
}

.llm-form-model-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.llm-form-model-meta input {
  width: 4rem;
  flex: none;
}

.llm-form-model-meta select {
  width: 5rem;
  flex: none;
}

/* 模型 ID 输入框下拉菜单 */
.llm-model-input-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
}

.llm-model-input-wrap .llm-model-id-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.llm-model-fetch-btn {
  width: auto !important;
  margin: 0 !important;
  padding: 0.3rem 0.55rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 0;
  flex-shrink: 0;
  min-width: 2rem;
}

.llm-model-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 80;
  max-height: 12rem;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  margin-top: 2px;
}

.llm-model-dropdown-hint {
  padding: 0.45rem 0.55rem;
  font-size: 0.76rem;
}

.llm-model-dropdown-item {
  padding: 0.35rem 0.5rem;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.12s;
}

.llm-model-dropdown-item:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}

.llm-provider-card.is-editing {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent) inset;
}

.llm-provider-edit-form {
  margin-bottom: 0.35rem;
}

.llm-form-field-wide {
  grid-column: 1 / -1;
}

.llm-edit-add-model {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  cursor: pointer;
  margin: 0;
}

.llm-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.2rem;
}

.llm-form-actions .btn {
  width: auto;
  margin: 0;
}

/* 通讯台设置栏内嵌的 LLM 面板 */
.comm-settings-detail-body .llm-provider-panel {
  gap: 0.65rem;
}

.comm-settings-detail-body .llm-form-grid {
  grid-template-columns: 1fr;
}

.comm-settings-detail-body .llm-provider-actions .btn {
  width: auto;
  margin: 0;
}

/* RTL overrides for right-to-left locales (currently ar-SA). */
html[dir="rtl"] .boot-auth-tabs { flex-direction: row-reverse; }
html[dir="rtl"] .boot-auth-lang-row { flex-direction: row-reverse; }
html[dir="rtl"] .boot-auth-card,
html[dir="rtl"] .boot-auth-card .field span,
html[dir="rtl"] .boot-auth-hint,
html[dir="rtl"] .boot-auth-lang-label,
html[dir="rtl"] .error-text {
  text-align: right;
}
html[dir="rtl"] .boot-auth-card .field input {
  text-align: right;
  direction: rtl;
}

/* ── 第 0 步：三类对象会话根 mock 预览 ───────────────────────────────────
   仅用于视觉确认，不接真实数据流。容器、标签、对象顶栏、卡片流。 */

.comm-mock-preview {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(0.6rem, 1.2vw, 1rem);
  height: 100%;
  overflow-y: auto;
}

.comm-mock-intro strong {
  font-size: 0.95rem;
}

.comm-mock-intro .muted {
  font-size: 0.78rem;
  margin-top: 0.25rem;
}

.comm-mock-tabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.comm-mock-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.comm-mock-tab:hover {
  border-color: var(--accent);
}

.comm-mock-tab.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.comm-mock-tab-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  color: var(--muted);
}

.comm-mock-tab-name {
  font-size: 0.85rem;
  font-weight: 600;
}

.comm-mock-body {
  flex: 1;
  min-height: 0;
}

.comm-mock-root {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.comm-mock-root-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.comm-mock-object-avatar {
  width: clamp(28px, 3vw, 36px);
  height: clamp(28px, 3vw, 36px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}

.comm-mock-object-person { background: #a855f7; }
.comm-mock-object-device { background: #3b82f6; }
.comm-mock-object-app    { background: #22c55e; }

.comm-mock-root-title {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
  min-width: 0;
}

.comm-mock-root-title strong {
  font-size: 0.95rem;
}

.comm-mock-presence {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  color: var(--muted);
}

.comm-presence-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.comm-presence-person-online { background: #22c55e; }
.comm-presence-device-online { background: #22c55e; }
.comm-presence-app-online    { background: #22c55e; }

.comm-mock-steward {
  font-size: 0.68rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--text);
  white-space: nowrap;
}

.comm-mock-card-flow {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* AI 来源卡片用更明显的左边框色，区分人类消息 */
.comm-mock-card-flow .artifact-card .message-bubble:has(.artifact-risk) {
  border-left: 3px solid var(--accent);
}

/* mock 预览容器撑满会话内容区 */
.comm-window-mock .comm-conversation,
.comm-window-mock .comm-conversation-body {
  display: none;
}

.comm-window-mock {
  display: flex;
  flex-direction: column;
}

.comm-window-mock .comm-mock-preview {
  flex: 1;
}

/* Version badge - bottom-right corner of desktop */
/* 与 Dock 同一水平带内贴右下角（bottom 基准与 .os-dock-touch 一致），
   高度不超过 Dock 顶边 */
.version-badge {
  position: fixed;
  bottom: calc(max(0.5rem, env(safe-area-inset-bottom, 0px)) + 0.7rem);
  right: clamp(8px, 1.5vw, 16px);
  z-index: 2147483646;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.version-badge-text {
  font-size: clamp(10px, 1.2vw, 12px);
  color: color-mix(in srgb, var(--muted) 50%, transparent);
  font-family: "SF Mono", "Cascadia Code", "Consolas", monospace;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}

/* --- Subscription panel --- */
.subscription-panel {
  margin-top: 1.2rem;
}

/* Brief highlight after the account panel's 会员订阅 button scrolls here. */
.subscription-panel.flash-highlight {
  animation: subscription-flash 1.6s ease-out;
}

@keyframes subscription-flash {
  0% {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent);
    border-color: var(--accent);
  }
  100% {
    box-shadow: 0 0 0 3px transparent;
  }
}


.subscription-panel .status-text {
  margin: 0.4rem 0;
  color: var(--accent);
  font-size: 0.9rem;
}

.subscription-status {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0.6rem 0 1rem;
  padding: 0.8rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

.subscription-status .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 0.9rem;
}

.subscription-status .row .label {
  color: var(--muted);
}

.subscription-status .row .value {
  font-weight: 600;
}

.subscription-status .row.actions {
  margin-top: 0.4rem;
  gap: 0.6rem;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
  gap: 0.8rem;
  margin-top: 0.6rem;
}

.plan-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.9rem;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
}

.plan-card .plan-name {
  font-weight: 700;
  font-size: 1rem;
}

.plan-card .plan-period {
  color: var(--muted);
  font-size: 0.8rem;
}

.plan-card .plan-price {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--accent);
}

.plan-card .plan-desc {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0;
}

.plan-card .btn {
  margin-top: 0.4rem;
}

/* --- Marketplace panel --- */
.marketplace-panel {
  margin-top: 1.2rem;
}

.marketplace-search {
  display: flex;
  gap: 0.6rem;
  margin: 0.8rem 0;
  flex-wrap: wrap;
}

.marketplace-search input {
  flex: 1 1 clamp(180px, 40%, 360px);
  min-width: 0;
  padding: 0.45rem 0.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  color: var(--text);
}

.marketplace-search select {
  padding: 0.45rem 0.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  color: var(--text);
}

.marketplace-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 0.8rem;
  margin-top: 0.6rem;
}

.marketplace-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.marketplace-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}

.marketplace-card-title {
  font-weight: 600;
  color: var(--text);
}

.marketplace-card-price {
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}

.marketplace-card-meta {
  display: flex;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--muted);
  flex-wrap: wrap;
}

.marketplace-card-desc {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text);
  opacity: 0.85;
}

.marketplace-card-btn {
  margin-top: auto;
  padding: 0.4rem 0.8rem;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 0.4rem;
  cursor: pointer;
  font-weight: 600;
}

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

.marketplace-error {
  color: var(--danger);
  padding: 0.4rem 0;
  font-size: 0.85rem;
}

.marketplace-success {
  color: var(--accent);
  padding: 0.4rem 0;
  font-size: 0.85rem;
}

.marketplace-total,
.marketplace-empty {
  margin-top: 0.8rem;
  color: var(--muted);
  font-size: 0.85rem;
}

/* --- Leases panel --- */
.leases-panel {
  margin-top: 1.6rem;
}

.leases-scope {
  display: flex;
  gap: 0.5rem;
  margin: 0.6rem 0;
}

.leases-scope button {
  padding: 0.35rem 0.8rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  color: var(--text);
  cursor: pointer;
}

.leases-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.4rem;
}

.lease-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.7rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.lease-card-row {
  display: flex;
  gap: 0.6rem;
  font-size: 0.85rem;
}

.lease-card-label {
  color: var(--muted);
  min-width: 4rem;
}

.lease-card code {
  font-size: 0.8rem;
  word-break: break-all;
}

.lease-status {
  padding: 0.1rem 0.45rem;
  border-radius: 0.3rem;
  font-size: 0.78rem;
}

.lease-status-active {
  background: rgba(34, 197, 94, 0.18);
  color: rgb(34, 197, 94);
}

.lease-status-expired,
.lease-status-revoked {
  background: rgba(148, 163, 184, 0.2);
  color: var(--muted);
}

.lease-revoke-btn {
  align-self: flex-start;
  margin-top: 0.3rem;
  padding: 0.3rem 0.7rem;
  background: var(--danger);
  color: #fff;
  border: none;
  border-radius: 0.4rem;
  cursor: pointer;
  font-size: 0.8rem;
}

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

/* --- AI billing panel --- */
.ai-billing-panel {
  margin-top: 1.6rem;
}

.ai-billing-error {
  color: var(--danger);
  padding: 0.4rem 0;
  font-size: 0.85rem;
}

.ai-quota-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.8rem;
  margin: 0.6rem 0 1rem;
}

.ai-quota-bar {
  width: 100%;
  height: 0.6rem;
  background: var(--bg);
  border-radius: 0.3rem;
  overflow: hidden;
  margin: 0.4rem 0;
}

.ai-quota-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.3s ease;
}

.ai-quota-text {
  font-size: 0.85rem;
  color: var(--muted);
}

.ai-summary-section,
.ai-detail-section {
  margin-top: 1rem;
}

.ai-summary-section h4,
.ai-detail-section h4 {
  margin: 0 0 0.4rem;
}

.ai-summary-table,
.ai-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.ai-summary-table th,
.ai-summary-table td,
.ai-detail-table th,
.ai-detail-table td {
  padding: 0.4rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.ai-summary-table th,
.ai-detail-table th {
  color: var(--muted);
  font-weight: 600;
}

.ai-billing-type {
  padding: 0.1rem 0.4rem;
  border-radius: 0.3rem;
  font-size: 0.78rem;
}

.ai-billing-type-free_quota {
  background: rgba(34, 197, 94, 0.18);
  color: rgb(34, 197, 94);
}

.ai-billing-type-paid {
  background: rgba(59, 130, 246, 0.18);
  color: rgb(59, 130, 246);
}

.ai-detail-pager {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.ai-detail-pager button {
  padding: 0.3rem 0.7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  color: var(--text);
  cursor: pointer;
}

.ai-detail-pager button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- AI pricing admin --- */
.ai-pricing-admin {
  padding: 0.5rem 0;
}

.ai-pricing-admin h3 {
  margin: 0 0 0.6rem;
}

.ai-pricing-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.8rem;
  margin-bottom: 1rem;
}

.ai-pricing-form .form-row {
  display: flex;
  gap: 0.8rem;
  margin: 0.4rem 0;
  flex-wrap: wrap;
}

.ai-pricing-form label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.8rem;
  color: var(--muted);
  flex: 1 1 200px;
}

.ai-pricing-form input {
  padding: 0.4rem 0.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  color: var(--text);
}

.checkbox-label {
  flex-direction: row !important;
  align-items: center;
  gap: 0.4rem !important;
}

.ai-pricing-form .form-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.ai-pricing-form .form-actions button {
  padding: 0.4rem 0.9rem;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 0.4rem;
  cursor: pointer;
  font-weight: 600;
}

.ai-pricing-form .form-actions button:nth-child(2) {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}

.ai-pricing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.ai-pricing-table th,
.ai-pricing-table td {
  padding: 0.35rem 0.4rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.ai-pricing-table th {
  color: var(--muted);
  font-weight: 600;
}

.ai-pricing-actions {
  display: flex;
  gap: 0.3rem;
}

.ai-pricing-actions button {
  padding: 0.2rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.3rem;
  color: var(--text);
  cursor: pointer;
  font-size: 0.78rem;
}

.ai-pricing-actions button.danger {
  color: var(--danger);
  border-color: var(--danger);
}

.admin-error {
  color: var(--danger);
  padding: 0.4rem 0;
  font-size: 0.85rem;
}

.admin-success {
  color: var(--accent);
  padding: 0.4rem 0;
  font-size: 0.85rem;
}

/* --- Compliance panels --- */
.compliance-panel,
.compliance-admin {
  margin-top: 1.2rem;
}

.compliance-tabs {
  display: flex;
  gap: 0.5rem;
  margin: 0.6rem 0;
  flex-wrap: wrap;
}

.compliance-tabs button {
  padding: 0.4rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  color: var(--text);
  cursor: pointer;
}

.compliance-tabs button.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.compliance-error {
  color: var(--danger);
  padding: 0.4rem 0;
  font-size: 0.85rem;
}

.compliance-success {
  color: var(--accent);
  padding: 0.4rem 0;
  font-size: 0.85rem;
}

.comply-section {
  margin-top: 0.6rem;
}

.kyc-status {
  padding: 0.8rem;
  border-radius: 0.5rem;
  margin: 0.4rem 0;
}

.kyc-status.approved {
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.kyc-status.pending {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.kyc-status.rejected {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.kyc-form,
.invoice-form,
.data-req-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.8rem;
  margin-bottom: 1rem;
}

.kyc-form label,
.invoice-form label,
.data-req-form label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0.4rem 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.kyc-form input,
.invoice-form input,
.data-req-form input,
.kyc-form select,
.invoice-form select,
.data-req-form textarea,
.data-req-form select {
  padding: 0.4rem 0.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  color: var(--text);
}

.data-req-form textarea {
  min-height: 3rem;
  resize: vertical;
}

.kyc-form button,
.invoice-form button,
.data-req-form button {
  margin-top: 0.6rem;
  padding: 0.4rem 0.9rem;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 0.4rem;
  cursor: pointer;
  font-weight: 600;
}

.kyc-form button:disabled,
.invoice-form button:disabled,
.data-req-form button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.compliance-table,
.admin-compliance-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.compliance-table th,
.compliance-table td,
.admin-compliance-table th,
.admin-compliance-table td {
  padding: 0.4rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

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

.compliance-review-form {
  display: flex;
  gap: 0.5rem;
  margin: 0.6rem 0;
  flex-wrap: wrap;
  align-items: center;
}

.compliance-review-form input,
.compliance-review-form select {
  padding: 0.35rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  color: var(--text);
}

.compliance-review-form input:first-child {
  flex: 1 1 200px;
  min-width: 0;
}

.compliance-review-form button {
  padding: 0.35rem 0.8rem;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 0.4rem;
  cursor: pointer;
  font-weight: 600;
}

.admin-compliance-table .col-id {
  font-family: monospace;
  font-size: 0.75rem;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-compliance-table button {
  padding: 0.2rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.3rem;
  color: var(--text);
  cursor: pointer;
  font-size: 0.78rem;
  margin-right: 0.3rem;
}

.admin-compliance-table button.danger {
  color: var(--danger);
  border-color: var(--danger);
}

/* --- Notification center --- */
.notification-center {
  margin-top: 1.2rem;
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}

.notification-actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.85rem;
}

.notification-unread {
  font-weight: 600;
  color: var(--accent);
}

.notification-filter {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  color: var(--muted);
}

.notification-actions button {
  padding: 0.3rem 0.7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  color: var(--text);
  cursor: pointer;
}

.notification-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.notification-error {
  color: var(--danger);
  padding: 0.4rem 0;
  font-size: 0.85rem;
}

.notification-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.notification-empty {
  color: var(--muted);
  padding: 1rem 0;
  text-align: center;
}

.notification-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--muted);
  border-radius: 0.4rem;
  padding: 0.6rem 0.8rem;
}

.notification-level-info {
  border-left-color: rgb(59, 130, 246);
}

.notification-level-success {
  border-left-color: rgb(34, 197, 94);
}

.notification-level-warning {
  border-left-color: rgb(245, 158, 11);
}

.notification-level-danger {
  border-left-color: rgb(239, 68, 68);
}

.notification-unread-row {
  background: rgba(59, 130, 246, 0.06);
}

.notification-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}

.notification-title {
  font-weight: 600;
  color: var(--text);
}

.notification-time {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
}

.notification-body {
  margin: 0.3rem 0 0;
  font-size: 0.85rem;
  color: var(--text);
  opacity: 0.85;
}

.notification-link {
  display: inline-block;
  margin-top: 0.3rem;
  font-size: 0.82rem;
  color: var(--accent);
}

.notification-read-btn {
  margin-top: 0.4rem;
  padding: 0.2rem 0.6rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0.3rem;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.78rem;
}

/* --- Ops dashboard --- */
.ops-dashboard {
  padding: 0.5rem 0;
}

.ops-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
  gap: 0.6rem;
  margin: 0.6rem 0 1rem;
}

.ops-metric-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.6rem 0.8rem;
}

.ops-metric-label {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 0.2rem;
}

.ops-metric-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent);
}

.ops-broadcast {
  margin: 1rem 0;
}

.ops-broadcast-form {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-top: 0.4rem;
}

.ops-broadcast-form label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.78rem;
  color: var(--muted);
  flex: 1 1 160px;
}

.ops-broadcast-form input,
.ops-broadcast-form select {
  padding: 0.4rem 0.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  color: var(--text);
}

.ops-broadcast-form button {
  padding: 0.45rem 0.9rem;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 0.4rem;
  cursor: pointer;
  font-weight: 600;
  height: 2rem;
}

.ops-events-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  margin-top: 0.4rem;
}

.ops-events-table th,
.ops-events-table td {
  padding: 0.35rem 0.4rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.ops-events-table th {
  color: var(--muted);
  font-weight: 600;
}

.ops-event-payload code {
  font-size: 0.72rem;
  word-break: break-all;
  color: var(--muted);
}