@bolloon/bolloon-agent 0.1.36 → 0.1.37

package/src/web/style.css

@@ -1,4737 +0,0 @@
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-:root {
-  --bg: #1a1a18;
-  --bg-sidebar: #222220;
-  --bg-main: #1a1a18;
-  --bg-hover: #2a2a26;
-  --bg-active: #333330;
-  --text: #d8d8c8;
-  --text-secondary: #909088;
-  --text-muted: #606058;
-  --accent: #c4d640;
-  --accent-dark: #8a9430;
-  --accent-glow: rgba(196, 214, 64, 0.25);
-  --accent-hover: #d4e650;
-  --user-bg: linear-gradient(135deg, #c4d640 0%, #a4b630 100%);
-  --user-text: #1a1a18;
-  --ai-bg: #222220;
-  --ai-text: #d8d8c8;
-  --border: #3a3a36;
-  --border-light: #4a4a44;
-  --radius: 12px;
-  --radius-sm: 8px;
-  --sidebar-width: 280px;
-  --sidebar-collapsed: 56px;
-  --header-height: 64px;
-  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-
-  /* 语义化状态颜色 */
-  --success: #22c55e;
-  --success-bg: rgba(34, 197, 94, 0.1);
-  --error: #ef4444;
-  --error-bg: rgba(239, 68, 68, 0.1);
-  --warning: #f59e0b;
-  --warning-bg: rgba(245, 158, 11, 0.1);
-  --info: #2196f3;
-  --info-bg: rgba(33, 150, 243, 0.1);
-
-  /* 二级 / 三级面 (次级背景, 嵌套层) — 补全未定义变量, 此前引用处 fallback 到 unset */
-  --bg-secondary: #252522;
-  --bg-tertiary: #2f2f2a;
-  --text-primary: #e8e8e0;
-  --font-mono: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-  --accent-light: #e8f060;
-}
-
-[data-theme="light"] {
-  --bg: #f0f0e8;
-  --bg-sidebar: #e8e8e0;
-  --bg-main: #f0f0e8;
-  --bg-hover: #dcdcd0;
-  --bg-active: #d0d0c0;
-  --text: #2a2a20;
-  --text-secondary: #606058;
-  --text-muted: #909088;
-  --accent: #8a9430;
-  --accent-dark: #6a7420;
-  --accent-glow: rgba(138, 148, 48, 0.2);
-  --accent-hover: #a4b630;
-  --ai-bg: #e8e8e0;
-  --ai-text: #2a2a20;
-  --border: #d0d0c0;
-  --border-light: #c0c0b0;
-
-  /* 二级 / 三级面 — 补全未定义变量 */
-  --bg-secondary: #f5f5ed;
-  --bg-tertiary: #fafaf2;
-  --text-primary: #1a1a18;
-  --font-mono: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-  --accent-light: #c4d240;
-}
-
-body {
-  font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
-  background: var(--bg);
-  color: var(--text);
-  height: 100vh;
-  overflow: hidden;
-}
-
-.app-container {
-  display: flex;
-  width: 100%;
-  height: 100%;
-}
-
-/* Sidebar */
-.sidebar {
-  width: var(--sidebar-width);
-  background: var(--bg-sidebar);
-  border-right: 1px solid var(--border);
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  transition: var(--transition);
-  transform: translateX(0);
-  position: relative;
-  z-index: 100;
-}
-
-.sidebar.collapsed {
-  transform: translateX(calc(-1 * var(--sidebar-width)));
-  position: absolute;
-  height: 100%;
-}
-
-.sidebar-collapsed {
-  width: var(--sidebar-collapsed);
-  background: var(--bg-sidebar);
-  border-right: 1px solid var(--border);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding-top: 16px;
-  gap: 8px;
-  flex-shrink: 0;
-  transition: var(--transition);
-  transform: translateX(0);
-  position: relative;
-  z-index: 99;
-}
-
-.sidebar-collapsed.hidden {
-  transform: translateX(calc(-1 * var(--sidebar-collapsed)));
-  position: absolute;
-  height: 100%;
-}
-
-.expand-btn {
-  width: 40px;
-  height: 40px;
-  border-radius: var(--radius-sm);
-  background: var(--bg-hover);
-  border: 1px solid var(--border);
-  color: var(--text-secondary);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: var(--transition);
-}
-
-.expand-btn:hover {
-  background: var(--bg-active);
-  color: var(--accent);
-  border-color: var(--accent);
-}
-
-.collapsed-channels {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 8px;
-  overflow-y: auto;
-  max-height: calc(100vh - 120px);
-}
-
-.collapsed-channel {
-  width: 40px;
-  height: 40px;
-  border-radius: var(--radius-sm);
-  background: var(--bg-hover);
-  border: 1px solid var(--border);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  cursor: pointer;
-  transition: var(--transition);
-  position: relative;
-}
-
-.collapsed-channel:hover {
-  background: var(--bg-active);
-  border-color: var(--accent);
-}
-
-.collapsed-channel::after {
-  content: attr(data-name);
-  position: absolute;
-  left: 48px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  padding: 4px 8px;
-  border-radius: var(--radius-sm);
-  font-size: 12px;
-  white-space: nowrap;
-  opacity: 0;
-  pointer-events: none;
-  transition: var(--transition);
-}
-
-.collapsed-channel:hover::after {
-  opacity: 1;
-}
-
-.collapsed-channel.active {
-  background: var(--accent);
-  border-color: var(--accent);
-}
-
-/* Sidebar Header */
-.sidebar-header {
-  padding: 16px;
-  border-bottom: 1px solid var(--border);
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.sidebar-toggle {
-  width: 32px;
-  height: 32px;
-  border-radius: var(--radius-sm);
-  background: transparent;
-  border: 1px solid var(--border);
-  color: var(--text-secondary);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: var(--transition);
-}
-
-.sidebar-toggle:hover {
-  background: var(--bg-hover);
-  color: var(--text);
-  border-color: var(--border-light);
-}
-
-.sidebar-brand {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex: 1;
-}
-
-.brand-icon {
-  font-size: 24px;
-  color: var(--accent);
-  filter: drop-shadow(0 0 4px var(--accent-glow));
-}
-
-.brand-text {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--accent);
-  text-shadow: 0 0 8px var(--accent-glow);
-}
-
-.sidebar-action {
-  width: 32px;
-  height: 32px;
-  border-radius: var(--radius-sm);
-  background: transparent;
-  border: 1px solid var(--border);
-  color: var(--text-secondary);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: var(--transition);
-}
-
-.sidebar-action:hover {
-  background: var(--bg-hover);
-  color: var(--accent);
-  border-color: var(--accent);
-}
-
-/* Sidebar Section */
-.sidebar-section {
-  flex: 1 1 0;
-  min-height: 0; /* 关键: flex 子项 min-height 默认 auto, 会撑破 overflow */
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  padding: 16px;
-  position: relative;
-}
-
-/* v3: 本地/远端 flex 比例由 CSS variable 驱动, 拖拽分隔线时改这两个值 */
-.sidebar-section.local-flex { flex: var(--local-flex, 1) 1 0; }
-.sidebar-section.remote-flex { flex: var(--remote-flex, 1) 1 0; transition: flex 0.15s; }
-
-/* v3: 可拖拽分隔线 */
-#sidebar-split-handle {
-  flex: 0 0 auto;
-  height: 6px;
-  cursor: ns-resize;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  background: transparent;
-  user-select: none;
-}
-#sidebar-split-handle:hover { background: var(--bg-hover); }
-#sidebar-split-handle.dragging { background: var(--accent-glow); }
-#sidebar-split-handle .split-handle-grip {
-  width: 32px;
-  height: 3px;
-  border-radius: 2px;
-  background: var(--border-light);
-  pointer-events: none;
-}
-#sidebar-split-handle:hover .split-handle-grip,
-#sidebar-split-handle.dragging .split-handle-grip { background: var(--accent); }
-
-/* v3: 远端区域折叠状态 */
-#remote-agents-section.collapsed .channel-list { display: none; }
-#remote-agents-section.collapsed { flex: 0 0 auto; padding-top: 0; padding-bottom: 0; }
-#remote-agents-section.collapsed .section-header { margin-bottom: 0; }
-#remote-agents-section.collapsed #remote-agents-toggle { transform: rotate(-90deg); }
-
-.section-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 12px;
-  /* sticky 头部: 长列表滚动时, 智能体标题始终可见, 防止用户失去方向感 */
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  padding-bottom: 6px;
-  /* 用伪元素做模糊底色, 让滚动的内容在它下面淡出而不是硬切 */
-}
-
-.section-header::after {
-  content: '';
-  position: absolute;
-  left: -16px;
-  right: -16px;
-  bottom: -6px;
-  height: 18px;
-  background: linear-gradient(to bottom, var(--bg-sidebar), transparent);
-  pointer-events: none;
-  z-index: -1;
-}
-
-.section-title {
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--text-muted);
-}
-
-.section-header {
-  margin-bottom: 8px;
-}
-
-.section-action {
-  width: 100%;
-  height: 36px;
-  border-radius: 10px;
-  background: var(--accent);
-  border: none;
-  color: var(--bg);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  font-size: 13px;
-  font-weight: 600;
-  font-family: inherit;
-  letter-spacing: 0.5px;
-  transition: var(--transition);
-  box-shadow: 0 2px 8px var(--accent-glow);
-}
-
-.section-action svg {
-  width: 16px;
-  height: 16px;
-}
-
-.section-action:hover {
-  background: var(--accent-hover);
-  box-shadow: 0 4px 16px var(--accent-glow);
-  transform: translateY(-1px);
-}
-
-.section-action:active {
-  transform: translateY(0);
-  box-shadow: 0 1px 4px var(--accent-glow);
-}
-
-/* New Channel Form */
-.new-channel-form {
-  margin-bottom: 12px;
-  margin-top: 12px;
-}
-
-.new-channel-form input {
-  width: 100%;
-  padding: 10px 12px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  color: var(--text);
-  font-size: 14px;
-  outline: none;
-  transition: var(--transition);
-}
-
-.new-channel-form input:focus {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-glow);
-}
-
-.new-channel-form input::placeholder {
-  color: var(--text-muted);
-}
-
-/* Channel List */
-.channel-list {
-  list-style: none;
-  flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-  /* 流畅的上下滑动: iOS 弹性滚动 + 桌面惯性滚动 + 边界不外溢 */
-  -webkit-overflow-scrolling: touch;
-  overscroll-behavior: contain;
-  scroll-behavior: smooth;
-  /* contain 让长列表滚动时不影响外层布局, 减少 reflow */
-  contain: strict;
-  /* 重要: gap 在 overflow 容器里会触发滚动跳帧, 用 margin 替代 */
-  display: block;
-  padding: 0;
-  margin: 0;
-}
-
-.channel-list > .agent-group + .agent-group {
-  margin-top: 4px;
-}
-
-.channel-list::-webkit-scrollbar {
-  width: 6px;
-}
-
-.channel-list::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.channel-list::-webkit-scrollbar-thumb {
-  background: var(--border);
-  border-radius: 3px;
-  /* 滚动条 hover 才出现, 默认隐藏, 减少视觉干扰 */
-  opacity: 0;
-  transition: opacity 0.15s ease;
-}
-
-.channel-list:hover::-webkit-scrollbar-thumb,
-.channel-list:focus-within::-webkit-scrollbar-thumb,
-.channel-list.is-scrolling::-webkit-scrollbar-thumb {
-  opacity: 1;
-}
-
-.channel-item {
-  display: flex;
-  align-items: center;
-  padding: 10px 12px;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: var(--transition);
-  gap: 10px;
-}
-
-.channel-item:hover {
-  background: var(--bg-hover);
-}
-
-.channel-item.active {
-  background: var(--bg-active);
-  border: 1px solid var(--border-light);
-}
-
-.channel-item.active .channel-name {
-  color: var(--accent);
-  font-weight: 500;
-}
-
-/* 2026-06-16: P2P 远端 header 紧凑变体 + mini 按钮 (替代 HTML L66-74 内联) */
-.section-header.is-compact {
-  margin-bottom: 8px;
-  padding-bottom: 0;
-  position: static;
-}
-.section-header.is-compact::after {
-  display: none;
-}
-.section-header.is-clickable {
-  cursor: pointer;
-  user-select: none;
-  transition: background 0.15s;
-}
-.section-header.is-clickable:hover {
-  background: var(--bg-hover);
-}
-.section-header-row {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-.section-header-row .section-title {
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--text-muted);
-}
-.section-header-actions {
-  display: flex;
-  gap: 4px;
-}
-.sidebar-mini-btn {
-  background: transparent;
-  border: 1px solid var(--border);
-  color: var(--text-secondary);
-  cursor: pointer;
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-size: 11px;
-  line-height: 1;
-  transition: var(--transition);
-}
-.sidebar-mini-btn:hover {
-  background: var(--bg-hover);
-  color: var(--text-primary);
-  border-color: var(--border-light);
-}
-.sidebar-empty-hint {
-  color: var(--text-muted);
-  font-size: 11px;
-  padding: 8px 4px;
-  text-align: center;
-  list-style: none;
-}
-
-.channel-icon {
-  width: 28px;
-  height: 28px;
-  border-radius: 8px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  flex-shrink: 0;
-}
-
-.channel-item.active .channel-icon {
-  background: var(--accent);
-  border-color: var(--accent);
-}
-
-.channel-name {
-  flex: 1;
-  font-size: 14px;
-  color: var(--text);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.agent-session-count {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 18px;
-  height: 18px;
-  padding: 0 5px;
-  margin-left: 4px;
-  border-radius: 9px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  color: var(--text-muted);
-  font-size: 11px;
-  font-weight: 500;
-  flex-shrink: 0;
-}
-
-.agent-current-session {
-  flex: 0 1 auto;
-  margin-left: 4px;
-  padding: 0 6px;
-  font-size: 11px;
-  color: var(--text-muted);
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 9px;
-  height: 18px;
-  line-height: 16px;
-  max-width: 100px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex-shrink: 1;
-}
-
-.agent-row.active .agent-current-session {
-  color: var(--accent);
-  border-color: var(--border-light);
-  background: var(--bg-hover);
-}
-
-.channel-delete {
-  width: 24px;
-  height: 24px;
-  border-radius: 6px;
-  background: transparent;
-  border: none;
-  color: var(--text-muted);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0.45;
-  transition: var(--transition);
-  font-size: 16px;
-}
-
-.channel-item:hover .channel-delete,
-.agent-row:hover .channel-delete {
-  opacity: 1;
-}
-
-.channel-delete:hover {
-  background: var(--error-bg);
-  color: var(--error);
-}
-
-/* Agent group (formerly channel-item — kept classname for back-compat) */
-.agent-group {
-  display: flex;
-  flex-direction: column;
-  border-radius: var(--radius-sm);
-  overflow: hidden;
-}
-
-.agent-row {
-  display: flex;
-  align-items: center;
-  padding: 10px 12px;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: var(--transition);
-  gap: 10px;
-}
-
-.agent-row:hover {
-  background: var(--bg-hover);
-}
-
-.agent-row.active {
-  background: var(--bg-active);
-  border: 1px solid var(--border-light);
-}
-
-.agent-row.active .channel-name {
-  color: var(--accent);
-  font-weight: 500;
-}
-
-.agent-caret {
-  width: 14px;
-  height: 14px;
-  color: var(--text-muted);
-  transition: transform 0.18s ease;
-  flex-shrink: 0;
-}
-
-.agent-group.expanded .agent-caret {
-  transform: rotate(90deg);
-}
-
-/* ⚡ 自动工具徽章 + 当前会话名: 折叠时不显示, 只在展开时可见.
-   配置 (钱包/工具) 按钮保留在行上, 用户随时能进 modal. */
-.agent-group:not(.expanded) .agent-tools-badge,
-.agent-group:not(.expanded) .agent-current-session {
-  display: none !important;
-}
-
-.agent-new-session {
-  /* 已废弃: 新建会话按钮迁移到 session 列表顶部, 见 .session-new-item */
-  display: none;
-}
-
-/* Session list nested under each agent */
-.session-list {
-  list-style: none;
-  margin: 0 0 4px 0;
-  padding: 0 0 0 28px;
-  display: none;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.agent-group.expanded .session-list {
-  display: flex;
-}
-
-.session-item {
-  display: flex;
-  align-items: center;
-  padding: 6px 10px;
-  border-radius: 5px;
-  cursor: pointer;
-  transition: var(--transition);
-  gap: 8px;
-  position: relative;
-}
-
-.session-item::before {
-  content: '';
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--text-muted);
-  flex-shrink: 0;
-  transition: var(--transition);
-}
-
-.session-item:hover {
-  background: var(--bg-hover);
-}
-
-.session-item:hover::before {
-  background: var(--text-secondary);
-}
-
-.session-item.active {
-  background: var(--bg-active);
-}
-
-.session-item.active::before {
-  background: var(--accent);
-  box-shadow: 0 0 4px var(--accent-glow);
-}
-
-.session-item.active .session-name {
-  color: var(--accent);
-  font-weight: 500;
-}
-
-/* "新建会话" 入口, 固定在 session 列表最前面, 始终可见 */
-.session-new-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 10px;
-  margin-bottom: 2px;
-  border-radius: 5px;
-  cursor: pointer;
-  font-size: 12px;
-  color: var(--text-secondary);
-  background: transparent;
-  border: 1px dashed var(--border-light);
-  transition: var(--transition);
-  user-select: none;
-}
-
-.session-new-item:hover {
-  background: var(--accent);
-  color: var(--bg);
-  border-color: var(--accent);
-  border-style: solid;
-}
-
-.session-new-item:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 1px;
-}
-
-.session-new-item svg {
-  width: 12px;
-  height: 12px;
-  flex-shrink: 0;
-}
-
-.session-name {
-  flex: 1;
-  font-size: 13px;
-  color: var(--text);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.session-delete {
-  width: 18px;
-  height: 18px;
-  border-radius: 4px;
-  background: transparent;
-  border: none;
-  color: var(--text-muted);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0;
-  transition: var(--transition);
-  font-size: 12px;
-  line-height: 1;
-}
-
-.session-item:hover .session-delete {
-  opacity: 1;
-}
-
-.session-delete:hover {
-  background: var(--error-bg);
-  color: var(--error);
-}
-
-/* Sidebar Footer */
-.sidebar-footer {
-  padding: 16px;
-  border-top: 1px solid var(--border);
-}
-
-.agent-status {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 12px;
-  color: var(--text-secondary);
-}
-
-.status-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--accent);
-  box-shadow: 0 0 6px var(--accent-glow);
-  animation: pulse 2s infinite;
-}
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
-}
-
-/* Main */
-.main {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  overflow: hidden;
-  background: var(--bg-main);
-}
-
-/* Header */
-.header {
-  height: var(--header-height);
-  padding: 0 24px;
-  border-bottom: 1px solid var(--border);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-shrink: 0;
-  background: var(--bg-sidebar);
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-.channel-indicator {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background: var(--accent);
-  box-shadow: 0 0 12px var(--accent-glow);
-}
-
-.header h1 {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--text);
-}
-
-.header-right {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.theme-toggle {
-  width: 40px;
-  height: 40px;
-  border-radius: var(--radius-sm);
-  background: var(--bg);
-  border: 1px solid var(--border);
-  color: var(--text-secondary);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: var(--transition);
-}
-
-.header-action {
-  width: 40px;
-  height: 40px;
-  border-radius: var(--radius-sm);
-  background: var(--bg);
-  border: 1px solid var(--border);
-  color: var(--text-secondary);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: var(--transition);
-}
-
-.header-action:hover {
-  background: var(--bg-hover);
-  color: var(--accent);
-  border-color: var(--accent);
-}
-
-.theme-toggle:hover {
-  background: var(--bg-hover);
-  color: var(--accent);
-  border-color: var(--accent);
-}
-
-[data-theme="dark"] .sun-icon { display: block; }
-[data-theme="dark"] .moon-icon { display: none; }
-[data-theme="light"] .sun-icon { display: none; }
-[data-theme="light"] .moon-icon { display: block; }
-
-/* Messages */
-.messages {
-  flex: 1;
-  overflow-y: auto;
-  padding: 24px;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.messages::-webkit-scrollbar {
-  width: 6px;
-}
-
-.messages::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.messages::-webkit-scrollbar-thumb {
-  background: var(--border);
-  border-radius: 3px;
-}
-
-/* Channel messages container */
-.channel-messages {
-  display: none;
-  flex: 1;
-  overflow-y: auto;
-  padding: 24px;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.channel-messages.active,
-.channel-messages:not([style*="display: none"]) {
-  display: flex;
-}
-
-.message {
-  display: flex;
-  flex-direction: column;
-  max-width: 85%;
-  animation: messageIn 0.3s ease-out;
-}
-
-@keyframes messageIn {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.message-user {
-  align-self: flex-end;
-}
-
-.message-ai {
-  align-self: flex-start;
-}
-
-.bubble {
-  padding: 14px 18px;
-  border-radius: var(--radius);
-  line-height: 1.7;
-  /* 2026-06-16: pre-wrap 改为 pre-line — 保留换行, 但折叠 token 间的多余空格.
-     pre-wrap 模式下 marked 输出里 "\n\n" 之外的 token 边界空格被原样保留,
-     视觉上字符间隔过大. pre-line 保持段落结构 (换行生效), 不再放大空格.
-     重要: .bubble pre 子元素走 pre-wrap (见 .bubble pre), 代码块缩进不受影响. */
-  white-space: pre-line;
-  word-break: break-word;
-  font-size: 15px;
-}
-
-.bubble-user {
-  background: var(--user-bg);
-  color: var(--user-text);
-  border-bottom-right-radius: 4px;
-  box-shadow: 3px 3px 0px var(--accent-dark);
-}
-
-.bubble-ai {
-  background: var(--ai-bg);
-  color: var(--ai-text);
-  border: 1px solid var(--border);
-  border-bottom-left-radius: 4px;
-}
-
-/* System / Error 变体 — 2026-06-16 补全, 之前 system/error 走 addMessage 缺样式
-   - system: 信息提示感, 左色条
-   - error: 错误提示, 红边 */
-.bubble-system {
-  background: var(--bg-secondary);
-  border-left: 3px solid var(--accent-dark);
-  color: var(--text);
-}
-.bubble-error {
-  background: #3a2a2a;
-  border: 1px solid var(--error);
-  border-left: 3px solid var(--error);
-  color: #f0d0d0;
-}
-
-.message-header {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--accent);
-  margin-bottom: 8px;
-  padding: 0 4px;
-}
-
-.environment-details {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 11px;
-  color: var(--text-secondary);
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  padding: 8px 12px;
-  margin-bottom: 10px;
-  white-space: pre-wrap;
-  overflow-x: auto;
-}
-
-.env-container {
-  margin-bottom: 8px;
-}
-
-.env-toggle {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 11px;
-  color: var(--text-muted);
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  padding: 4px 10px;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  margin-bottom: 6px;
-  transition: var(--transition);
-}
-
-.env-toggle:hover {
-  border-color: var(--accent);
-  color: var(--text-secondary);
-}
-
-.env-arrow {
-  font-size: 10px;
-  transition: transform 0.2s;
-}
-
-.env-container .environment-details {
-  margin-bottom: 0;
-}
-
-.env-container .environment-details pre {
-  margin: 0;
-  white-space: pre-wrap;
-  word-break: break-all;
-}
-
-/* Thinking Process (思维链) */
-.think-container {
-  margin-bottom: 10px;
-}
-
-.think-toggle {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 11px;
-  color: var(--text-muted);
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  padding: 4px 10px;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  margin-bottom: 6px;
-  transition: var(--transition);
-}
-
-.think-toggle:hover {
-  border-color: var(--accent);
-  color: var(--text-secondary);
-}
-
-.think-arrow {
-  font-size: 10px;
-  transition: transform 0.2s;
-}
-
-.think-content {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 11px;
-  color: var(--text-secondary);
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  padding: 8px 12px;
-  margin-bottom: 10px;
-  white-space: pre-wrap;
-  overflow-x: auto;
-}
-
-.think-content pre {
-  margin: 0;
-  white-space: pre-wrap;
-  word-break: break-all;
-}
-
-.time {
-  font-size: 11px;
-  color: var(--text-muted);
-  margin-top: 6px;
-  padding: 0 4px;
-}
-
-.message-user .time {
-  text-align: right;
-}
-
-/* Message Actions (消息操作按钮) */
-.message-actions {
-  display: flex;
-  gap: 6px;
-  margin-top: 8px;
-  padding: 0 4px;
-}
-
-.message-user .message-actions {
-  justify-content: flex-end;
-}
-
-.action-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 10px;
-  font-size: 11px;
-  font-family: 'JetBrains Mono', monospace;
-  color: var(--text-muted);
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: var(--transition);
-}
-
-.action-btn:hover {
-  color: var(--accent);
-  border-color: var(--accent);
-  background: var(--bg-secondary);
-}
-
-.action-btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.copy-btn:hover {
-  color: var(--success);
-  border-color: var(--success);
-}
-
-.regenerate-btn:hover {
-  color: var(--info);
-  border-color: var(--info);
-}
-
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-.spin {
-  animation: spin 1s linear infinite;
-}
-
-/* Markdown Styles */
-.bubble h1, .bubble h2, .bubble h3, .bubble h4, .bubble h5, .bubble h6 {
-  margin-top: 16px;
-  margin-bottom: 8px;
-  font-weight: 600;
-}
-
-.bubble h1 { font-size: 1.5em; }
-.bubble h2 { font-size: 1.3em; }
-.bubble h3 { font-size: 1.15em; }
-
-.bubble p {
-  margin: 8px 0;
-}
-
-.bubble ul, .bubble ol {
-  margin: 8px 0;
-  padding-left: 24px;
-}
-
-.bubble li {
-  margin: 4px 0;
-}
-
-.bubble code {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 0.9em;
-  background: var(--bg);
-  padding: 2px 6px;
-  border-radius: 4px;
-}
-
-.bubble pre {
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  padding: 12px;
-  margin: 10px 0;
-  overflow-x: auto;
-}
-
-.bubble pre code {
-  background: none;
-  padding: 0;
-}
-
-.bubble blockquote {
-  border-left: 3px solid var(--accent);
-  margin: 10px 0;
-  padding-left: 12px;
-  color: var(--text-secondary);
-}
-
-.bubble table {
-  border-collapse: collapse;
-  margin: 10px 0;
-  width: 100%;
-}
-
-.bubble th, .bubble td {
-  border: 1px solid var(--border);
-  padding: 8px 12px;
-  text-align: left;
-}
-
-.bubble th {
-  background: var(--bg);
-  font-weight: 600;
-}
-
-.bubble a {
-  color: var(--accent);
-  text-decoration: none;
-}
-
-.bubble a:hover {
-  text-decoration: underline;
-}
-
-.bubble img {
-  max-width: 100%;
-  border-radius: var(--radius-sm);
-}
-/* User Command Display - inside message div */
-.message-user .user-command-display {
-  background: linear-gradient(135deg, var(--bg) 0%, var(--bg-tertiary) 100%);
-  border-left: 3px solid var(--accent);
-  border-radius: var(--radius-sm);
-  padding: 10px 14px;
-  margin: 0;
-  animation: slideIn 0.3s ease;
-}
-
-.message-user .user-command-display .command-prompt {
-  display: flex;
-  align-items: flex-start;
-  gap: 10px;
-}
-
-.message-user .user-command-display .prompt-icon {
-  color: var(--accent);
-  font-size: 18px;
-  font-weight: bold;
-  line-height: 1.4;
-}
-
-.message-user .user-command-display .prompt-text {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 13px;
-  color: var(--text-primary);
-  background: var(--bg);
-  padding: 6px 10px;
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--border);
-  white-space: pre-wrap;
-  word-break: break-word;
-  margin: 0;
-}
-
-@keyframes slideIn {
-  from { opacity: 0; transform: translateY(-10px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-/* Typing Indicator */
-.typing {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 12px 16px;
-}
-
-.typing-spinner {
-  width: 18px;
-  height: 18px;
-  border: 2px solid var(--border);
-  border-top-color: var(--accent);
-  border-right-color: var(--accent-dark);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-.typing-text {
-  color: var(--text-secondary);
-  font-size: 14px;
-}
-
-/* Streaming Indicator */
-.streaming-content {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.streaming-content::before {
-  content: '';
-  width: 6px;
-  height: 6px;
-  background: var(--accent);
-  border-radius: 50%;
-  animation: streamPulse 1s ease-in-out infinite;
-  box-shadow: 0 0 8px var(--accent-glow);
-}
-
-@keyframes streamPulse {
-  0%, 100% { opacity: 0.4; transform: scale(0.8); }
-  50% { opacity: 1; transform: scale(1.2); }
-}
-
-/* Agent status bar (sits between .messages and .input-area) */
-.agent-status {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 24px;
-  background: linear-gradient(
-    180deg,
-    transparent 0%,
-    var(--accent-glow) 100%
-  );
-  border-top: 1px solid var(--border);
-  font-size: 13px;
-  color: var(--text-secondary);
-  font-family: 'JetBrains Mono', monospace;
-  letter-spacing: 0.3px;
-  animation: statusFadeIn 0.3s ease-out;
-  min-height: 36px;
-}
-
-.agent-status[hidden] {
-  display: none;
-}
-
-@keyframes statusFadeIn {
-  from { opacity: 0; transform: translateY(4px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-
-.agent-status-spinner {
-  display: inline-block;
-  width: 14px;
-  height: 14px;
-  border: 2px solid var(--border-light);
-  border-top-color: var(--accent);
-  border-right-color: var(--accent-hover);
-  border-radius: 50%;
-  animation: spin 0.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
-  will-change: transform;
-  flex-shrink: 0;
-}
-
-.agent-status-icon {
-  font-size: 14px;
-  flex-shrink: 0;
-  /* 默认不显示, 仅在切换为"执行"状态时显示 */
-  display: none;
-}
-
-.agent-status[data-mode="executing"] .agent-status-spinner { display: none; }
-.agent-status[data-mode="executing"] .agent-status-icon { display: inline-block; }
-.agent-status[data-mode="executing"] .agent-status-icon { animation: pulseGlow 1.4s ease-in-out infinite; }
-
-.agent-status-text {
-  flex: 1;
-  background: linear-gradient(
-    90deg,
-    var(--text-secondary) 0%,
-    var(--accent) 50%,
-    var(--text-secondary) 100%
-  );
-  background-size: 200% 100%;
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
-  -webkit-text-fill-color: transparent;
-  animation: textShimmer 2.4s linear infinite;
-}
-
-@keyframes textShimmer {
-  0%   { background-position: 200% 0; }
-  100% { background-position: -200% 0; }
-}
-
-@keyframes pulseGlow {
-  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px var(--accent-glow)); }
-  50%      { transform: scale(1.15); filter: drop-shadow(0 0 6px var(--accent)); }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .agent-status-spinner,
-  .agent-status-text,
-  .agent-status-icon,
-  .agent-status {
-    animation: none;
-  }
-  .agent-status-text {
-    color: var(--text-secondary);
-    -webkit-text-fill-color: var(--text-secondary);
-  }
-}
-
-/* Input Area */
-.input-area {
-  padding: 20px 24px;
-  border-top: 1px solid var(--border);
-  background: var(--bg-sidebar);
-  flex-shrink: 0;
-}
-
-/* 2026-06-16: 循环 status bar — 三态机 (loading / error / done)
-   loading: spinner + 描述文本
-   error:   🔴 提示 + 「重试」按钮 → POST /api/loop/retry
-   done:    ✓ 提示 + 「检查」按钮 → GET /api/loop/inspect (弹 modal 看循环产出)
-   不再显示循环计数, 不再显示百分比. */
-.loop-status-bar {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 8px 24px;
-  background: var(--bg-tertiary);
-  border-top: 1px solid var(--border);
-  font-size: 12px;
-  color: var(--text-secondary);
-  flex-shrink: 0;
-  transition: opacity 0.2s ease, max-height 0.2s ease, background 0.2s ease;
-  max-height: 60px;
-  overflow: hidden;
-}
-.loop-status-bar[hidden] {
-  display: none !important;
-}
-.loop-status-bar[data-tone="warn"] {
-  background: rgba(245, 158, 11, 0.12);
-  color: var(--warning, #f59e0b);
-  border-top-color: rgba(245, 158, 11, 0.35);
-}
-.loop-status-bar[data-state="error"] {
-  background: rgba(239, 68, 68, 0.12);
-  color: var(--error, #ef4444);
-  border-top-color: rgba(239, 68, 68, 0.35);
-  animation: loop-status-shake 0.4s ease-out;
-}
-.loop-status-bar[data-state="retrying"] {
-  background: rgba(245, 158, 11, 0.12);
-  color: var(--warning, #f59e0b);
-  border-top-color: rgba(245, 158, 11, 0.35);
-}
-.loop-status-bar[data-state="done"] {
-  background: rgba(34, 197, 94, 0.12);
-  color: var(--success, #22c55e);
-  border-top-color: rgba(34, 197, 94, 0.35);
-  animation: loop-status-fade-in 0.3s ease-out;
-}
-@keyframes loop-status-shake {
-  0%, 100% { transform: translateX(0); }
-  25% { transform: translateX(-3px); }
-  75% { transform: translateX(3px); }
-}
-@keyframes loop-status-fade-in {
-  from { opacity: 0; transform: translateY(4px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-.loop-status-spinner {
-  display: inline-block;
-  width: 14px;
-  height: 14px;
-  border: 2px solid currentColor;
-  border-right-color: transparent;
-  border-radius: 50%;
-  animation: loop-status-spin 0.7s linear infinite;
-  flex-shrink: 0;
-  opacity: 0.85;
-}
-.loop-status-bar[data-state="done"] .loop-status-spinner {
-  animation: none;
-  border-right-color: currentColor;
-  opacity: 1;
-}
-.loop-status-icon {
-  display: none;
-  font-size: 14px;
-  flex-shrink: 0;
-  line-height: 1;
-}
-.loop-status-bar[data-state="done"] .loop-status-icon::before { content: '✓'; }
-.loop-status-bar[data-state="done"] .loop-status-icon {
-  display: inline-block;
-}
-.loop-status-retry {
-  flex-shrink: 0;
-  font-size: 11px;
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-  padding: 2px 8px;
-  background: rgba(245, 158, 11, 0.2);
-  border-radius: 3px;
-  letter-spacing: 0.3px;
-}
-@keyframes loop-status-spin {
-  to { transform: rotate(360deg); }
-}
-.loop-status-text {
-  flex: 1;
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.loop-status-action {
-  flex-shrink: 0;
-  padding: 4px 12px;
-  font-size: 12px;
-  font-weight: 600;
-  border: 1px solid currentColor;
-  border-radius: 4px;
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  transition: background 0.15s ease, transform 0.1s ease;
-}
-.loop-status-action:hover {
-  background: currentColor;
-  color: var(--bg);
-}
-.loop-status-action:active {
-  transform: scale(0.96);
-}
-.loop-status-action:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.input-wrapper {
-  display: flex;
-  gap: 12px;
-  max-width: 900px;
-  margin: 0 auto;
-}
-
-#input {
-  flex: 1;
-  padding: 14px 18px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  color: var(--text);
-  font-size: 15px;
-  outline: none;
-  transition: var(--transition);
-  font-family: inherit;
-}
-
-#input:focus {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-glow);
-}
-
-#input::placeholder {
-  color: var(--text-muted);
-}
-
-.send-btn {
-  width: 48px;
-  height: 48px;
-  border-radius: var(--radius);
-  background: var(--accent);
-  border: none;
-  color: white;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: var(--transition);
-  flex-shrink: 0;
-}
-
-.send-btn:hover {
-  background: var(--accent-hover);
-  transform: scale(1.05);
-}
-
-.send-btn:active {
-  transform: scale(0.95);
-}
-
-/* 2026-06-15: 流式期间切到 abort 状态 — 红色边框 + 终止图标 */
-.send-btn[data-state="abort"] {
-  background: var(--bg-main);
-  border: 1.5px solid var(--warning);
-  color: var(--warning);
-}
-.send-btn[data-state="abort"]:hover {
-  background: color-mix(in srgb, var(--warning) 12%, var(--bg-main));
-  transform: scale(1.05);
-}
-.send-btn[data-state="aborting"] {
-  background: var(--bg-main);
-  border: 1.5px solid var(--warning);
-  color: var(--warning);
-  opacity: 0.7;
-  cursor: wait;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-  .sidebar {
-    position: absolute;
-    height: 100%;
-    z-index: 200;
-  }
-
-  .sidebar.collapsed {
-    transform: translateX(calc(-1 * var(--sidebar-width)));
-  }
-
-  .sidebar-collapsed {
-    display: none;
-  }
-
-  .message {
-    max-width: 95%;
-  }
-}
-
-/* Modal */
-.modal {
-  display: none;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.7);
-  z-index: 1000;
-  align-items: center;
-  justify-content: center;
-}
-
-.modal.active {
-  display: flex;
-}
-
-/* 2026-06-16: Judgment Modal tabs (替换 HTML L233-258 内联) */
-.judgment-tab-bar {
-  display: flex;
-  border-bottom: 1px solid var(--border);
-  margin-top: 20px;
-}
-.judgment-tab {
-  flex: 1;
-  padding: 10px 12px;
-  background: transparent;
-  border: none;
-  border-bottom: 2px solid transparent;
-  color: var(--text-secondary);
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: var(--transition);
-}
-.judgment-tab:hover {
-  background: var(--bg-hover);
-  color: var(--text-primary);
-}
-.judgment-tab.active {
-  color: var(--accent-hover);
-  border-bottom-color: var(--accent-hover);
-}
-.judgment-tab .tab-channel-name {
-  font-weight: normal;
-  color: var(--text-muted);
-}
-.judgment-status-bar {
-  display: flex;
-  gap: 6px;
-  margin-top: 10px;
-  font-size: 12px;
-  align-items: center;
-}
-.judgment-status-bar .label {
-  color: var(--text-muted);
-}
-.judgment-status-tab {
-  background: var(--bg-hover);
-  color: var(--text-secondary);
-  border: none;
-  padding: 3px 10px;
-  border-radius: 3px;
-  cursor: pointer;
-  font-size: 11px;
-  transition: var(--transition);
-}
-.judgment-status-tab:hover {
-  background: var(--bg-active);
-  color: var(--text-primary);
-}
-.judgment-status-tab.active {
-  background: var(--accent);
-  color: var(--bg);
-}
-.judgment-form-row {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-.judgment-form-row label {
-  margin: 0;
-}
-.judgment-form-row label + label {
-  margin-left: 16px;
-}
-.judgment-list-header {
-  margin-top: 16px;
-  font-size: 14px;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-.judgment-list-actions {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-left: auto;
-  font-size: 12px;
-  font-weight: normal;
-}
-.judgment-select-all-label {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  cursor: pointer;
-  color: var(--text-muted);
-}
-.judgment-bulk-delete {
-  background: transparent;
-  border: 1px solid var(--error);
-  color: var(--error);
-  padding: 1px 8px;
-  border-radius: 3px;
-  cursor: pointer;
-  font-size: 11px;
-  opacity: 0.5;
-}
-.judgment-bulk-delete:not(:disabled):hover {
-  opacity: 1;
-  background: var(--error-bg);
-}
-.judgment-bulk-delete:disabled {
-  cursor: not-allowed;
-}
-.judgment-error {
-  color: var(--error);
-  display: none;
-}
-.judgment-list {
-  max-height: 420px;
-  overflow-y: auto;
-}
-
-.modal-content {
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  width: 90%;
-  max-width: 500px;
-  max-height: 80vh;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.modal-content.modal-p2p-wide {
-  max-width: 650px;
-}
-
-.modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 20px;
-  border-bottom: 1px solid var(--border);
-}
-
-.modal-header h2 {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 600;
-}
-
-.modal-close {
-  background: none;
-  border: none;
-  font-size: 24px;
-  color: var(--text-secondary);
-  cursor: pointer;
-  padding: 0;
-  line-height: 1;
-}
-
-.modal-close:hover {
-  color: var(--text);
-}
-
-.modal-body {
-  padding: 20px;
-  overflow-y: auto;
-  flex: 1;
-}
-
-/* P2P Section */
-.p2p-section {
-  margin-bottom: 24px;
-}
-
-.p2p-section:last-child {
-  margin-bottom: 0;
-}
-
-.p2p-section h3 {
-  margin: 0 0 12px 0;
-  font-size: 14px;
-  color: var(--text-secondary);
-  font-weight: 500;
-}
-
-.p2p-identity {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 12px;
-}
-
-.p2p-identity-info {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.p2p-label {
-  font-size: 12px;
-  color: var(--text-secondary);
-}
-
-.p2p-value {
-  font-size: 12px;
-  color: var(--text);
-  word-break: break-all;
-}
-
-/* Task Queue */
-.task-badge {
-  position: absolute;
-  top: -4px;
-  right: -4px;
-  background: var(--accent);
-  color: var(--bg);
-  font-size: 10px;
-  font-weight: 600;
-  padding: 2px 6px;
-  border-radius: 10px;
-  min-width: 18px;
-  text-align: center;
-}
-
-.task-toolbar {
-  display: flex;
-  gap: 12px;
-  margin-bottom: 16px;
-}
-
-.task-list {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.task-empty {
-  text-align: center;
-  color: var(--text-secondary);
-  padding: 40px 20px;
-}
-
-/* ============================================ */
-/* Wallet Manager                               */
-/* ============================================ */
-.wallet-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  max-height: 320px;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-  overscroll-behavior: contain;
-  contain: strict;
-  margin-top: 8px;
-}
-
-.wallet-empty {
-  text-align: center;
-  color: var(--text-secondary);
-  padding: 24px 16px;
-  font-size: 13px;
-  border: 1px dashed var(--border);
-  border-radius: var(--radius);
-}
-
-.wallet-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 12px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  transition: var(--transition);
-}
-
-.wallet-row:hover {
-  border-color: var(--accent);
-}
-
-.wallet-row.is-active {
-  border-color: var(--accent);
-  background: var(--accent-glow);
-}
-
-.wallet-row .wallet-chain {
-  font-size: 10px;
-  font-weight: 700;
-  padding: 2px 6px;
-  border-radius: 4px;
-  background: var(--bg);
-  color: var(--text-muted);
-  letter-spacing: 0.5px;
-  flex-shrink: 0;
-}
-
-.wallet-row.is-active .wallet-chain {
-  background: var(--accent);
-  color: var(--bg);
-}
-
-.wallet-row .wallet-info {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.wallet-row .wallet-agent {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--text-primary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.wallet-row .wallet-address {
-  font-family: var(--font-mono);
-  font-size: 11px;
-  color: var(--text-muted);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.wallet-row .wallet-actions {
-  display: flex;
-  gap: 4px;
-  flex-shrink: 0;
-}
-
-.wallet-row .wallet-mini-btn {
-  width: 26px;
-  height: 26px;
-  border-radius: 6px;
-  background: transparent;
-  border: 1px solid var(--border);
-  color: var(--text-muted);
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  transition: var(--transition);
-}
-
-.wallet-row .wallet-mini-btn:hover {
-  background: var(--accent);
-  color: var(--bg);
-  border-color: var(--accent);
-}
-
-.task-item {
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  padding: 16px;
-  cursor: pointer;
-  transition: var(--transition);
-}
-
-.task-item:hover {
-  border-color: var(--accent);
-}
-
-.task-item.running {
-  border-color: var(--accent);
-  background: var(--bg-hover);
-}
-
-.task-item.completed {
-  opacity: 0.7;
-}
-
-.task-item-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 8px;
-}
-
-.task-item-title {
-  font-weight: 500;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.task-item-status {
-  font-size: 12px;
-  padding: 2px 8px;
-  border-radius: 4px;
-  background: var(--bg-tertiary);
-  color: var(--text-secondary);
-}
-
-.task-item-status.pending { background: var(--bg-active); color: var(--text-secondary); }
-.task-item-status.running { background: var(--accent); color: var(--bg); }
-.task-item-status.completed { background: var(--success); color: var(--bg); }
-.task-item-status.failed { background: var(--error); color: white; }
-.task-item-status.paused { background: var(--warning); color: var(--bg); }
-
-.task-item-progress {
-  height: 4px;
-  background: var(--bg-tertiary);
-  border-radius: 2px;
-  overflow: hidden;
-  margin: 8px 0;
-}
-
-.task-item-progress-bar {
-  height: 100%;
-  background: var(--accent);
-  transition: width 0.3s;
-}
-
-.task-item-steps {
-  margin-top: 8px;
-  padding-left: 16px;
-  border-left: 2px solid var(--border);
-}
-
-.task-item-step {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 4px 0;
-  font-size: 13px;
-  color: var(--text-secondary);
-}
-
-.task-item-step.completed { color: var(--success); }
-.task-item-step.running { color: var(--accent); }
-.task-item-step.failed { color: var(--error); }
-
-.task-item-actions {
-  display: flex;
-  gap: 8px;
-  margin-top: 12px;
-}
-
-.task-item-desc {
-  font-size: 13px;
-  color: var(--text-secondary);
-  margin-bottom: 8px;
-}
-
-.modal-wide .modal-content {
-  max-width: 700px;
-}
-
-.form-group textarea {
-  width: 100%;
-  padding: 10px 12px;
-  background: var(--bg-primary);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  color: var(--text-primary);
-  font-size: 14px;
-  font-family: inherit;
-  resize: vertical;
-}
-
-.form-group textarea:focus {
-  outline: none;
-  border-color: var(--accent);
-}
-
-.btn-group {
-  display: flex;
-  gap: 12px;
-  margin-top: 16px;
-}
-
-.btn-group .btn {
-  flex: 1;
-}
-
-.p2p-value.mono {
-  font-family: var(--font-mono);
-}
-
-.btn-small {
-  padding: 6px;
-  background: var(--bg-hover);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  color: var(--text-secondary);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.btn-small:hover {
-  background: var(--bg-active);
-  color: var(--accent);
-  border-color: var(--accent);
-}
-
-.btn-primary, .btn-secondary {
-  padding: 8px 16px;
-  border-radius: var(--radius-sm);
-  font-size: 14px;
-  cursor: pointer;
-  transition: var(--transition);
-  white-space: nowrap;
-}
-
-.btn-primary {
-  background: var(--accent);
-  border: 1px solid var(--accent);
-  color: white;
-}
-
-.btn-primary:hover {
-  background: var(--accent-hover);
-}
-
-.btn-secondary {
-  background: var(--bg-hover);
-  border: 1px solid var(--border);
-  color: var(--text);
-}
-
-.btn-secondary:hover {
-  background: var(--bg-active);
-  border-color: var(--accent);
-}
-
-.p2p-connect {
-  display: flex;
-  gap: 8px;
-}
-
-.p2p-connect input {
-  flex: 1;
-  padding: 8px 12px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  color: var(--text);
-  font-size: 14px;
-}
-
-.p2p-connect input:focus {
-  outline: none;
-  border-color: var(--accent);
-}
-
-.p2p-connect input::placeholder {
-  color: var(--text-secondary);
-}
-
-.p2p-peers-list, .p2p-channels-list {
-  max-height: 200px;
-  overflow-y: auto;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-}
-
-.p2p-empty {
-  padding: 20px;
-  text-align: center;
-  color: var(--text-secondary);
-  font-size: 14px;
-}
-
-.p2p-peer-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 12px;
-  border-bottom: 1px solid var(--border);
-}
-
-.p2p-peer-item:last-child {
-  border-bottom: none;
-}
-
-.p2p-peer-info {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.p2p-peer-id {
-  font-size: 12px;
-  font-family: var(--font-mono);
-  color: var(--text);
-}
-
-.p2p-peer-status {
-  font-size: 11px;
-  color: var(--text-secondary);
-}
-
-.p2p-peer-status.online {
-  color: var(--success);
-}
-
-.p2p-channel-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 12px;
-  border-bottom: 1px solid var(--border);
-  cursor: pointer;
-  transition: var(--transition);
-}
-
-.p2p-channel-item:last-child {
-  border-bottom: none;
-}
-
-.p2p-channel-item:hover {
-  background: var(--bg-hover);
-}
-
-.p2p-channel-item.active {
-  background: var(--bg-active);
-  border-left: 3px solid var(--accent);
-}
-
-.p2p-channel-info {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-}
-
-.p2p-channel-name {
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.p2p-channel-did {
-  font-size: 10px;
-  font-family: var(--font-mono);
-  color: var(--text-secondary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.p2p-channel-cid {
-  font-size: 9px;
-  font-family: var(--font-mono);
-  color: var(--accent);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.p2p-channel-icon {
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-}
-
-.p2p-channel-name {
-  flex: 1;
-  font-size: 14px;
-}
-
-.p2p-channel-action {
-  color: var(--text-secondary);
-  font-size: 12px;
-}
-
-.p2p-channel-action:hover {
-  color: var(--accent);
-}
-
-/* ==================== API Config Page (Simplified) ==================== */
-
-.api-config-page {
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 24px;
-}
-
-.page-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 24px;
-}
-
-.page-title-group {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-.page-title-group h1 {
-  font-size: 24px;
-  font-weight: 600;
-  color: var(--text);
-}
-
-.config-count-badge {
-  padding: 4px 12px;
-  background: var(--accent-glow);
-  border: 1px solid var(--accent);
-  border-radius: 20px;
-  font-size: 12px;
-  color: var(--accent);
-}
-
-.back-link {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  color: var(--text-muted);
-  text-decoration: none;
-  font-size: 14px;
-  transition: color 0.2s;
-}
-
-.back-link:hover {
-  color: var(--accent);
-}
-
-.provider-grid {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-/* Provider Card */
-.provider-card {
-  background: var(--bg-sidebar);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 16px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.provider-card:hover {
-  border-color: var(--accent);
-  background: var(--bg-hover);
-}
-
-.provider-card.active {
-  border-color: var(--accent);
-  background: linear-gradient(135deg, var(--bg-hover) 0%, var(--bg-sidebar) 100%);
-}
-
-.provider-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 12px;
-}
-
-.provider-icon {
-  width: 44px;
-  height: 44px;
-  border-radius: 10px;
-  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 20px;
-  font-weight: bold;
-  color: var(--bg);
-  flex-shrink: 0;
-}
-
-.provider-info {
-  flex: 1;
-}
-
-.provider-name {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--text);
-  margin-bottom: 4px;
-}
-
-.provider-desc {
-  font-size: 12px;
-  color: var(--text-muted);
-}
-
-.status-badge {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 10px;
-  border-radius: 20px;
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.status-badge .status-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-}
-
-.status-accent {
-  background: var(--accent-glow);
-  color: var(--accent);
-}
-
-.status-accent .status-dot {
-  background: var(--accent);
-  animation: pulse 2s infinite;
-}
-
-.status-green {
-  background: var(--success-bg);
-  color: var(--success);
-}
-
-.status-green .status-dot {
-  background: var(--success);
-}
-
-.status-yellow {
-  background: var(--warning-bg);
-  color: var(--warning);
-}
-
-.status-yellow .status-dot {
-  background: var(--warning);
-}
-
-.status-muted {
-  background: var(--bg-active);
-  color: var(--text-muted);
-}
-
-.status-muted .status-dot {
-  background: var(--text-muted);
-}
-
-.provider-footer {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding-top: 12px;
-  border-top: 1px solid var(--border);
-  font-size: 13px;
-  color: var(--text-secondary);
-}
-
-.config-status {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.status-icon {
-  font-size: 14px;
-}
-
-.status-icon.configured {
-  color: var(--success);
-}
-
-.status-icon.not-configured {
-  color: var(--text-muted);
-}
-
-.model-info {
-  color: var(--text-muted);
-}
-
-.arrow-indicator {
-  margin-left: auto;
-  font-size: 20px;
-  color: var(--text-muted);
-}
-
-/* Loading State */
-.loading-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 80px 20px;
-  gap: 16px;
-}
-
-.loading-state p {
-  font-size: 16px;
-  color: var(--text-secondary);
-}
-
-.loading-hint {
-  font-size: 14px !important;
-  color: var(--text-muted) !important;
-}
-
-/* Error State */
-.error-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 80px 20px;
-  gap: 16px;
-}
-
-.error-icon {
-  font-size: 48px;
-}
-
-.error-message {
-  font-size: 14px;
-  color: var(--text-muted);
-}
-
-.retry-btn {
-  padding: 10px 24px;
-  background: var(--accent);
-  color: var(--bg);
-  border: none;
-  border-radius: var(--radius-sm);
-  font-size: 14px;
-  cursor: pointer;
-  transition: opacity 0.2s;
-}
-
-.retry-btn:hover {
-  opacity: 0.9;
-}
-
-/* Modal Overlay */
-.modal-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.7);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  padding: 20px;
-}
-
-.modal-box {
-  background: var(--bg-sidebar);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  width: 100%;
-  max-width: 480px;
-  max-height: 90vh;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 20px;
-  border-bottom: 1px solid var(--border);
-}
-
-.modal-title-group {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.modal-icon {
-  width: 40px;
-  height: 40px;
-  border-radius: 10px;
-  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 18px;
-  font-weight: bold;
-  color: var(--bg);
-}
-
-.modal-header h2 {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--text);
-  margin-bottom: 4px;
-}
-
-.modal-subtitle {
-  font-size: 12px;
-  color: var(--text-muted);
-}
-
-.modal-close {
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
-  background: var(--bg-active);
-  border: 1px solid var(--border);
-  color: var(--text-muted);
-  font-size: 20px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s;
-}
-
-.modal-close:hover {
-  background: var(--error-bg);
-  border-color: var(--error);
-  color: var(--error);
-}
-
-.modal-form {
-  padding: 20px;
-  overflow-y: auto;
-}
-
-.form-group {
-  margin-bottom: 20px;
-}
-
-.form-group label {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--text-secondary);
-  margin-bottom: 8px;
-}
-
-.label-icon {
-  font-size: 16px;
-}
-
-.configured-tag {
-  margin-left: auto;
-  padding: 2px 8px;
-  background: var(--success-bg);
-  color: var(--success);
-  border-radius: 10px;
-  font-size: 11px;
-  font-weight: normal;
-}
-
-.form-group input {
-  width: 100%;
-  padding: 12px 14px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  color: var(--text);
-  font-size: 14px;
-  transition: border-color 0.2s;
-}
-
-.form-group input:focus {
-  outline: none;
-  border-color: var(--accent);
-}
-
-.form-group input::placeholder {
-  color: var(--text-muted);
-}
-
-.form-hint {
-  font-size: 12px;
-  color: var(--text-muted);
-  margin-top: 6px;
-}
-
-.form-row {
-  display: flex;
-  gap: 12px;
-}
-
-.form-row .form-group {
-  flex: 1;
-}
-
-.form-group-small {
-  max-width: 100px;
-}
-
-.test-btn {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 16px;
-  background: transparent;
-  border: 1px solid var(--accent);
-  border-radius: var(--radius-sm);
-  color: var(--accent);
-  font-size: 14px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.test-btn:hover:not(:disabled) {
-  background: var(--accent-glow);
-}
-
-.test-btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.spinner {
-  width: 16px;
-  height: 16px;
-  border: 2px solid var(--border);
-  border-top-color: var(--accent);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-.test-result {
-  margin-top: 12px;
-  padding: 12px;
-  border-radius: var(--radius-sm);
-  font-size: 14px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.test-success {
-  background: var(--success-bg);
-  color: var(--success);
-}
-
-.test-error {
-  background: var(--error-bg);
-  color: var(--error);
-}
-
-.result-icon {
-  font-size: 16px;
-}
-
-.form-actions {
-  display: flex;
-  gap: 12px;
-  margin-top: 24px;
-}
-
-.btn-cancel,
-.btn-save {
-  flex: 1;
-  padding: 12px;
-  border-radius: var(--radius-sm);
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.btn-cancel {
-  background: var(--bg-active);
-  border: 1px solid var(--border);
-  color: var(--text);
-}
-
-.btn-cancel:hover {
-  border-color: var(--text-muted);
-}
-
-.btn-save {
-  background: var(--accent);
-  border: none;
-  color: var(--bg);
-}
-
-.btn-save:hover {
-  opacity: 0.9;
-}
-  background: var(--bg-sidebar);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  padding: 12px;
-  margin-bottom: 12px;
-}
-
-.iroh-status-item {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  padding: 4px 0;
-}
-
-.iroh-status-item .label {
-  font-size: 12px;
-  color: var(--text-secondary);
-  min-width: 70px;
-}
-
-.iroh-status-item .value {
-  font-size: 12px;
-  color: var(--text);
-  word-break: break-all;
-}
-
-.iroh-status-item .value.mono {
-  font-family: var(--font-mono);
-}
-
-.status-loading {
-  color: var(--warning);
-}
-
-.status-success {
-  color: var(--success);
-}
-
-.status-error {
-  color: var(--error);
-}
-
-.p2p-hint {
-  font-size: 12px;
-  color: var(--text-secondary);
-  margin-bottom: 12px;
-}
-
-.p2p-identity-box {
-  background: var(--bg-sidebar);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  padding: 12px;
-  margin-bottom: 12px;
-}
-
-.identity-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 0;
-}
-
-.identity-label {
-  font-size: 12px;
-  color: var(--text-secondary);
-  min-width: 60px;
-}
-
-.identity-value {
-  flex: 1;
-  font-size: 11px;
-  font-family: var(--font-mono);
-  color: var(--accent);
-  background: var(--bg);
-  padding: 4px 8px;
-  border-radius: 4px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.copy-btn-small {
-  padding: 4px 8px;
-  background: var(--bg-hover);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  color: var(--text-secondary);
-  font-size: 11px;
-  cursor: pointer;
-  transition: var(--transition);
-}
-
-.copy-btn-small:hover {
-  background: var(--accent);
-  color: var(--bg);
-  border-color: var(--accent);
-}
-
-.p2p-connect-form {
-  display: flex;
-  gap: 8px;
-}
-
-.p2p-connect-form input {
-  flex: 1;
-  padding: 10px 12px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  color: var(--text);
-  font-size: 14px;
-  font-family: var(--font-mono);
-}
-
-.p2p-connect-form input:focus {
-  outline: none;
-  border-color: var(--accent);
-}
-
-.p2p-connect-form input::placeholder {
-  color: var(--text-secondary);
-  font-family: inherit;
-}
-
-.connect-result {
-  margin-top: 8px;
-  padding: 8px;
-  border-radius: var(--radius-sm);
-  font-size: 13px;
-}
-
-.connect-result.success {
-  background: var(--success-bg);
-  color: var(--success);
-}
-
-.connect-result.error {
-  background: var(--error-bg);
-  color: var(--error);
-}
-
-.peers-list {
-  max-height: 180px;
-  overflow-y: auto;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  background: var(--bg-sidebar);
-}
-
-.peer-empty {
-  padding: 24px;
-  text-align: center;
-  color: var(--text-secondary);
-  font-size: 13px;
-}
-
-.p2p-messages-list {
-  max-height: 200px;
-  overflow-y: auto;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  background: var(--bg-sidebar);
-}
-
-.msg-empty {
-  padding: 24px;
-  text-align: center;
-  color: var(--text-secondary);
-  font-size: 13px;
-}
-
-.p2p-msg-item {
-  padding: 10px 12px;
-  border-bottom: 1px solid var(--border);
-}
-
-.p2p-msg-item:last-child {
-  border-bottom: none;
-}
-
-.p2p-msg-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 4px;
-}
-
-.p2p-msg-from {
-  font-size: 11px;
-  color: var(--accent);
-  font-family: var(--font-mono);
-}
-
-.p2p-msg-time {
-  font-size: 10px;
-  color: var(--text-muted);
-}
-
-.p2p-msg-content {
-  font-size: 12px;
-  color: var(--text);
-  word-break: break-word;
-}
-
-/* ==================== API Config Page ==================== */
-.api-config-page {
-  max-width: 900px;
-  margin: 0 auto;
-  padding: 24px;
-  min-height: 100vh;
-}
-
-/* Standalone api-config page: enable page-level scrolling.
-   Default body has overflow:hidden (for app shell with sidebar). */
-body:has(> .api-config-page) {
-  height: auto;
-  min-height: 100vh;
-  overflow-y: auto;
-}
-
-/* Tab switcher */
-.api-tabs {
-  display: flex;
-  gap: 4px;
-  border-bottom: 1px solid var(--border);
-  margin-bottom: 24px;
-}
-
-.api-tab {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 20px;
-  background: transparent;
-  border: none;
-  border-bottom: 2px solid transparent;
-  color: var(--text-muted);
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.api-tab:hover {
-  color: var(--text);
-}
-
-.api-tab.active {
-  color: var(--accent);
-  border-bottom-color: var(--accent);
-}
-
-.api-tab-icon {
-  font-size: 16px;
-}
-
-.api-panel {
-  animation: fadeIn 0.2s ease;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(4px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-.video-intro {
-  background: var(--bg-sidebar);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 12px 16px;
-  margin-bottom: 16px;
-  color: var(--text-muted);
-  font-size: 13px;
-  line-height: 1.6;
-}
-
-.video-intro p {
-  margin: 0;
-}
-
-.provider-docs {
-  display: inline-block;
-  margin-top: 4px;
-  font-size: 12px;
-  color: var(--accent);
-  text-decoration: none;
-  opacity: 0.8;
-}
-
-.provider-docs:hover {
-  opacity: 1;
-  text-decoration: underline;
-}
-
-.loading-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 48px;
-  color: var(--text-secondary);
-  gap: 16px;
-}
-
-.loading-spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid var(--border);
-  border-top-color: var(--accent);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  will-change: transform;
-}
-
-.error-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 48px;
-  color: var(--text-secondary);
-  gap: 16px;
-}
-
-.error-icon {
-  font-size: 48px;
-}
-
-.error-message {
-  font-size: 16px;
-  color: var(--text-secondary);
-}
-
-/* API Config Hint on main page */
-.api-config-hint {
-  position: fixed;
-  top: 80px;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px 20px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--accent);
-  border-radius: var(--radius);
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-  z-index: 1000;
-  animation: slideDown 0.3s ease;
-}
-
-@keyframes slideDown {
-  from { opacity: 0; transform: translateX(-50%) translateY(-20px); }
-  to { opacity: 1; transform: translateX(-50%) translateY(0); }
-}
-
-.hint-icon {
-  font-size: 24px;
-}
-
-.hint-text {
-  font-size: 14px;
-  line-height: 1.5;
-  color: var(--text-secondary);
-}
-
-.hint-text strong {
-  color: var(--accent);
-}
-
-.hint-btn {
-  padding: 8px 16px;
-  background: var(--accent);
-  color: var(--bg-primary);
-  border: none;
-  border-radius: 6px;
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: opacity 0.2s;
-}
-
-.hint-btn:hover {
-  opacity: 0.9;
-}
-
-/* ============================================
-   P2P Network Modal Styles
-   ============================================ */
-
-/* P2P Tabs */
-.p2p-tabs {
-  display: flex;
-  gap: 4px;
-  margin-bottom: 20px;
-  border-bottom: 1px solid var(--border);
-  padding-bottom: 8px;
-}
-
-.p2p-tab {
-  padding: 8px 16px;
-  background: transparent;
-  border: none;
-  border-radius: var(--radius) var(--radius) 0 0;
-  color: var(--text-secondary);
-  font-size: 14px;
-  cursor: pointer;
-  transition: all 0.2s;
-  position: relative;
-}
-
-.p2p-tab:hover {
-  color: var(--text-primary);
-  background: var(--bg-hover);
-}
-
-.p2p-tab.active {
-  color: var(--accent);
-  background: var(--bg-secondary);
-}
-
-.p2p-tab.active::after {
-  content: '';
-  position: absolute;
-  bottom: -9px;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: var(--accent);
-}
-
-.unread-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 18px;
-  height: 18px;
-  padding: 0 5px;
-  background: var(--error);
-  color: white;
-  border-radius: 9px;
-  font-size: 11px;
-  font-weight: 600;
-}
-
-/* P2P Tab Content */
-.p2p-tab-content {
-  display: none;
-  animation: fadeIn 0.2s ease;
-}
-
-.p2p-tab-content.active {
-  display: block;
-}
-
-/* P2P Identity Card */
-.p2p-identity-card {
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 20px;
-  margin-bottom: 16px;
-}
-
-.identity-status {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 16px;
-}
-
-.status-indicator {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: var(--text-muted);
-}
-
-.status-indicator.online {
-  background: var(--success);
-  box-shadow: 0 0 8px var(--success);
-}
-
-.status-indicator.connecting {
-  background: var(--warning);
-  animation: pulse 1s infinite;
-}
-
-.status-indicator.offline {
-  background: var(--text-muted);
-}
-
-.identity-info {
-  margin-bottom: 16px;
-}
-
-.info-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 0;
-  border-bottom: 1px solid var(--border);
-}
-
-.info-row:last-child {
-  border-bottom: none;
-}
-
-.info-label {
-  min-width: 80px;
-  color: var(--text-secondary);
-  font-size: 13px;
-}
-
-.info-value {
-  flex: 1;
-  font-size: 13px;
-  word-break: break-all;
-}
-
-.mono {
-  font-family: var(--font-mono);
-}
-
-.copy-btn {
-  padding: 4px 8px;
-  background: var(--bg-hover);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 12px;
-  transition: all 0.2s;
-}
-
-.copy-btn:hover {
-  background: var(--accent);
-  color: var(--bg-primary);
-}
-
-/* Share Panel */
-.p2p-share-panel {
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 16px;
-  margin-bottom: 16px;
-}
-
-.p2p-share-panel h4 {
-  margin-bottom: 12px;
-  color: var(--text-primary);
-}
-
-.share-actions {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.share-link-box {
-  margin-top: 12px;
-}
-
-.share-link-box input {
-  flex: 1;
-  padding: 10px 12px;
-  background: var(--bg-primary);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  color: var(--text-primary);
-  font-family: var(--font-mono);
-  font-size: 12px;
-}
-
-.qr-hint {
-  margin-top: 12px;
-  color: var(--text-secondary);
-  font-size: 13px;
-}
-
-/* P2P Connect Section */
-.p2p-connect-section {
-  margin-bottom: 20px;
-}
-
-.p2p-connect-form {
-  display: flex;
-  gap: 8px;
-  margin-top: 12px;
-}
-
-.p2p-connect-form input {
-  flex: 1;
-  padding: 12px 16px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  color: var(--text-primary);
-  font-size: 14px;
-}
-
-.p2p-connect-form input:focus {
-  outline: none;
-  border-color: var(--accent);
-}
-
-.p2p-connect-form .btn-primary {
-  padding: 12px 20px;
-  white-space: nowrap;
-}
-
-/* Connect Progress */
-.connect-progress {
-  margin-top: 16px;
-  padding: 16px;
-  background: var(--bg-secondary);
-  border-radius: var(--radius);
-}
-
-.progress-bar {
-  height: 6px;
-  background: var(--bg-hover);
-  border-radius: 3px;
-  overflow: hidden;
-  margin-bottom: 8px;
-}
-
-.progress-fill {
-  height: 100%;
-  background: linear-gradient(90deg, var(--accent), var(--accent-light));
-  border-radius: 3px;
-  transition: width 0.3s ease;
-  width: 0%;
-}
-
-.progress-text {
-  color: var(--text-secondary);
-  font-size: 13px;
-}
-
-.connect-result {
-  margin-top: 12px;
-  padding: 12px;
-  border-radius: var(--radius);
-  font-size: 14px;
-}
-
-.connect-result.success {
-  background: rgba(34, 197, 94, 0.1);
-  border: 1px solid var(--success);
-  color: var(--success);
-}
-
-.connect-result.error {
-  background: rgba(239, 68, 68, 0.1);
-  border: 1px solid var(--error);
-  color: var(--error);
-}
-
-.connect-result.warning {
-  background: rgba(234, 179, 8, 0.1);
-  border: 1px solid var(--warning);
-  color: var(--warning);
-}
-
-/* Quick Connect */
-.p2p-quick-connect {
-  margin-top: 24px;
-}
-
-.p2p-quick-connect h4 {
-  margin-bottom: 12px;
-  color: var(--text-secondary);
-  font-size: 13px;
-}
-
-.quick-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.quick-empty {
-  color: var(--text-muted);
-  font-size: 13px;
-  padding: 16px;
-  text-align: center;
-}
-
-.quick-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.quick-item:hover {
-  border-color: var(--accent);
-  background: var(--bg-hover);
-}
-
-.quick-item-icon {
-  font-size: 20px;
-}
-
-.quick-item-info {
-  flex: 1;
-}
-
-.quick-item-name {
-  font-weight: 500;
-  margin-bottom: 2px;
-}
-
-.quick-item-meta {
-  font-size: 12px;
-  color: var(--text-secondary);
-}
-
-.quick-item-status {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 12px;
-}
-
-.quick-item-status .dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-}
-
-.quick-item-status .dot.online { background: var(--success); }
-.quick-item-status .dot.offline { background: var(--text-muted); }
-
-/* History List */
-.p2p-history-toolbar {
-  margin-bottom: 12px;
-}
-
-.history-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.history-empty {
-  color: var(--text-muted);
-  font-size: 13px;
-  padding: 32px;
-  text-align: center;
-}
-
-.history-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.history-item:hover {
-  border-color: var(--accent);
-}
-
-.history-item.pinned {
-  border-left: 3px solid var(--accent);
-}
-
-.history-item-icon {
-  font-size: 24px;
-}
-
-.history-item-info {
-  flex: 1;
-}
-
-.history-item-name {
-  font-weight: 500;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.history-item-name .pin-icon {
-  font-size: 12px;
-  color: var(--accent);
-}
-
-.history-item-meta {
-  font-size: 12px;
-  color: var(--text-secondary);
-  display: flex;
-  gap: 12px;
-}
-
-.history-item-actions {
-  display: flex;
-  gap: 8px;
-}
-
-.history-item-actions button {
-  padding: 6px 12px;
-  font-size: 12px;
-}
-
-/* Peers Section */
-.p2p-peers-section {
-  margin-top: 24px;
-  padding-top: 16px;
-  border-top: 1px solid var(--border);
-}
-
-.p2p-peers-section h4 {
-  margin-bottom: 12px;
-  color: var(--text-secondary);
-  font-size: 13px;
-}
-
-.peers-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.peer-empty {
-  color: var(--text-muted);
-  font-size: 13px;
-  padding: 16px;
-  text-align: center;
-}
-
-.peer-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-}
-
-.peer-status {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.peer-status .dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-}
-
-.peer-status .dot.online {
-  background: var(--success);
-  box-shadow: 0 0 6px var(--success);
-}
-
-.peer-status .dot.offline {
-  background: var(--text-muted);
-}
-
-.peer-status .dot.connecting {
-  background: var(--warning);
-  animation: pulse 1s infinite;
-}
-
-.peer-info {
-  flex: 1;
-}
-
-.peer-name {
-  font-weight: 500;
-  margin-bottom: 2px;
-}
-
-.peer-meta {
-  font-size: 12px;
-  color: var(--text-secondary);
-}
-
-.peer-actions {
-  display: flex;
-  gap: 8px;
-}
-
-.peer-actions button {
-  padding: 6px 12px;
-  font-size: 12px;
-}
-
-/* Messages Section */
-.p2p-messages-toolbar {
-  margin-bottom: 12px;
-  display: flex;
-  justify-content: flex-end;
-}
-
-.messages-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  max-height: 400px;
-  overflow-y: auto;
-}
-
-.messages-empty {
-  color: var(--text-muted);
-  font-size: 13px;
-  padding: 32px;
-  text-align: center;
-}
-
-.message-item {
-  padding: 12px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-}
-
-.message-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 8px;
-}
-
-.message-sender {
-  font-weight: 500;
-}
-
-.message-time {
-  font-size: 12px;
-  color: var(--text-secondary);
-}
-
-.message-content {
-  font-size: 14px;
-  line-height: 1.5;
-}
-
-.message-unread {
-  border-left: 3px solid var(--accent);
-}
-
-/* Offline Queue */
-.offline-queue {
-  margin-top: 20px;
-  padding: 16px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--warning);
-  border-radius: var(--radius);
-}
-
-.offline-queue h4 {
-  color: var(--warning);
-  margin-bottom: 12px;
-}
-
-.queue-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.queue-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px;
-  background: var(--bg-hover);
-  border-radius: var(--radius);
-  font-size: 13px;
-}
-
-.queue-item-content {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.queue-item-status {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.queue-item-status .retry-count {
-  background: var(--warning);
-  color: var(--bg-primary);
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-size: 11px;
-}
-
-.queue-item-status .status-pending {
-  color: var(--warning);
-}
-
-.queue-item-status .status-failed {
-  color: var(--error);
-}
-
-.queue-retry-btn {
-  padding: 4px 8px;
-  font-size: 12px;
-  background: var(--accent);
-  color: var(--bg-primary);
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-/* Persistent Peers Section */
-.persistent-peers-section {
-  margin: 16px 0;
-  padding: 12px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-}
-
-.persistent-peers-section h4 {
-  margin-bottom: 12px;
-  font-size: 14px;
-  color: var(--text);
-}
-
-.persistent-peer-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  margin-bottom: 8px;
-  background: var(--bg-primary);
-  transition: var(--transition);
-}
-
-.persistent-peer-item:last-child {
-  margin-bottom: 0;
-}
-
-.persistent-peer-item.connected {
-  border-color: var(--success);
-  background: rgba(76, 175, 80, 0.05);
-}
-
-.persistent-peer-item.disconnected {
-  opacity: 0.8;
-}
-
-.persistent-peer-item.reconnecting {
-  border-color: var(--warning);
-  animation: pulse 2s infinite;
-}
-
-.peer-status-indicator {
-  flex-shrink: 0;
-}
-
-.peer-status-indicator .dot {
-  display: block;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-}
-
-.peer-status-indicator .dot.online {
-  background: var(--success);
-  box-shadow: 0 0 6px var(--success);
-}
-
-.peer-status-indicator .dot.offline {
-  background: var(--text-muted);
-}
-
-.auto-badge {
-  display: inline-block;
-  padding: 2px 6px;
-  font-size: 10px;
-  background: var(--accent);
-  color: var(--bg-primary);
-  border-radius: 4px;
-  margin-left: 6px;
-}
-
-.peer-info .peer-name {
-  display: flex;
-  align-items: center;
-  font-weight: 500;
-}
-
-.peer-info .peer-meta {
-  font-size: 12px;
-  color: var(--text-secondary);
-  display: flex;
-  gap: 12px;
-  margin-top: 4px;
-}
-
-.btn-danger {
-  background: var(--error);
-  color: white;
-}
-
-.btn-danger:hover {
-  background: #c62828;
-}
-
-/* Modal Small */
-.modal-sm {
-  max-width: 300px !important;
-}
-
-/* Toast */
-.toast {
-  position: fixed;
-  bottom: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-  padding: 12px 24px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--accent);
-  border-radius: var(--radius);
-  color: var(--text-primary);
-  font-size: 14px;
-  z-index: 9999;
-  animation: toastFade 2s ease forwards;
-}
-
-@keyframes toastFade {
-  0% { opacity: 0; transform: translateX(-50%) translateY(20px); }
-  10% { opacity: 1; transform: translateX(-50%) translateY(0); }
-  80% { opacity: 1; }
-  100% { opacity: 0; }
-}
-
-/* ============================================ */
-/* Catalog: section header `+` button, badges   */
-/* ============================================ */
-
-.section-header-action {
-  width: 22px;
-  height: 22px;
-  border-radius: 6px;
-  background: transparent;
-  border: 1px solid var(--border);
-  color: var(--text-muted);
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  transition: var(--transition);
-}
-
-.section-header-action:hover {
-  background: var(--accent);
-  color: var(--bg);
-  border-color: var(--accent);
-}
-
-.agent-row .agent-wallet-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 10px;
-  font-weight: 600;
-  padding: 1px 5px;
-  border-radius: 4px;
-  background: var(--accent-glow);
-  color: var(--accent);
-  border: 1px solid var(--accent);
-  letter-spacing: 0.3px;
-  margin-left: 4px;
-  flex-shrink: 0;
-}
-
-.agent-row .agent-tools-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 10px;
-  font-weight: 600;
-  padding: 1px 5px;
-  border-radius: 4px;
-  background: rgba(80, 200, 120, 0.12);
-  color: rgb(80, 200, 120);
-  border: 1px solid rgba(80, 200, 120, 0.4);
-  margin-left: 4px;
-  flex-shrink: 0;
-}
-
-.agent-row .agent-row-meta {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin-left: auto;
-  flex-shrink: 0;
-}
-
-.agent-row .agent-config-btn {
-  width: 22px;
-  height: 22px;
-  border-radius: 6px;
-  background: transparent;
-  border: 1px solid var(--border);
-  color: var(--text-muted);
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  opacity: 0;
-  transition: var(--transition);
-  margin-left: 4px;
-}
-
-.agent-row:hover .agent-config-btn {
-  opacity: 1;
-}
-
-.agent-row .agent-config-btn:hover {
-  background: var(--accent);
-  color: var(--bg);
-  border-color: var(--accent);
-}
-
-/* Form hints and info blocks in modals */
-.form-hint {
-  display: block;
-  margin-top: 4px;
-  color: var(--text-muted);
-  font-size: 11px;
-  line-height: 1.4;
-}
-
-.form-info {
-  margin-top: 8px;
-  padding: 10px 12px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  font-size: 12px;
-  color: var(--text-secondary);
-  word-break: break-all;
-}
-
-.form-info code {
-  font-family: var(--font-mono);
-  color: var(--accent);
-  background: var(--bg);
-  padding: 1px 4px;
-  border-radius: 3px;
-}
-
-.checkbox-label {
-  display: flex !important;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-  user-select: none;
-  font-size: 13px;
-  color: var(--text-secondary);
-}
-
-.checkbox-label input[type="checkbox"] {
-  width: 16px;
-  height: 16px;
-  cursor: pointer;
-  accent-color: var(--accent);
-}
-
-/* ============================================================
- * 2026-06-10: 远程聊天 modal — 完全对齐本地聊天风格
- * 用 CSS 变量, 字体继承全局 JetBrains Mono, 支持深/浅色主题切换
- * ============================================================ */
-.remote-chat-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.55);
-  z-index: 10002;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.remote-chat-shell {
-  background: var(--bg-main);
-  color: var(--text);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  width: 720px;
-  max-width: 92vw;
-  height: 80vh;
-  max-height: 80vh;
-  display: flex;
-  flex-direction: column;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
-  font-family: inherit;
-}
-.remote-chat-header {
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--border);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  background: var(--bg-sidebar);
-  border-radius: 8px 8px 0 0;
-}
-.remote-chat-title {
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--text);
-}
-.remote-chat-meta {
-  font-size: 11px;
-  color: var(--text-muted);
-  margin-top: 2px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.remote-chat-btn-secondary {
-  background: var(--bg-hover);
-  border: 1px solid var(--border);
-  color: var(--text-secondary);
-  cursor: pointer;
-  padding: 4px 10px;
-  border-radius: 4px;
-  font-size: 11px;
-  font-family: inherit;
-}
-.remote-chat-btn-secondary:hover {
-  background: var(--bg-active);
-  color: var(--text);
-}
-.remote-chat-btn-close {
-  background: none;
-  border: none;
-  font-size: 20px;
-  color: var(--text-muted);
-  cursor: pointer;
-  padding: 0 8px;
-  line-height: 1;
-}
-.remote-chat-btn-close:hover {
-  color: var(--text);
-}
-.remote-chat-thinking {
-  padding: 8px 16px;
-  background: var(--bg-hover);
-  color: var(--text-secondary);
-  font-size: 12px;
-  border-bottom: 1px solid var(--border);
-}
-.remote-chat-log {
-  flex: 1;
-  overflow-y: auto;
-  padding: 12px 16px;
-  background: var(--bg-main);
-}
-.remote-chat-input-row {
-  padding: 10px 12px;
-  border-top: 1px solid var(--border);
-  display: flex;
-  gap: 6px;
-  background: var(--bg-sidebar);
-  border-radius: 0 0 8px 8px;
-}
-.remote-chat-input {
-  flex: 1;
-  padding: 8px 10px;
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  font-size: 13px;
-  background: var(--bg-main);
-  color: var(--text);
-  font-family: inherit;
-}
-.remote-chat-input:focus {
-  outline: none;
-  border-color: var(--accent, #a4b630);
-}
-.remote-chat-btn-send {
-  padding: 8px 14px;
-  background: var(--user-bg);
-  color: var(--user-text);
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 13px;
-  font-weight: 600;
-  font-family: inherit;
-}
-.remote-chat-btn-send:hover:not(:disabled) {
-  filter: brightness(1.1);
-}
-.remote-chat-btn-send:disabled {
-  opacity: 0.5;
-  cursor: wait;
-}
-.remote-chat-sysmsg {
-  margin: 6px 0;
-  padding: 6px 10px;
-  border-radius: 4px;
-  font-size: 11px;
-  text-align: center;
-  border: 1px solid var(--border);
-}
-.remote-chat-sysmsg-info {
-  background: var(--bg-hover);
-  color: var(--text-secondary);
-}
-.remote-chat-sysmsg-warn {
-  background: var(--bg-hover);
-  color: var(--text);
-  border-color: var(--border-light);
-}
-.remote-chat-sysmsg-error {
-  background: rgba(220, 38, 38, 0.12);
-  color: #fca5a5;
-  border-color: rgba(220, 38, 38, 0.3);
-}
-.remote-chat-judgments {
-  margin: 0 0 8px;
-  padding: 8px 10px;
-  background: var(--bg-hover);
-  border-left: 3px solid var(--accent, #a4b630);
-  border-radius: 4px;
-  font-size: 12px;
-}
-.remote-chat-judgments-title {
-  font-weight: 600;
-  color: var(--text);
-  margin-bottom: 4px;
-}
-.remote-chat-judgment-item {
-  margin: 3px 0;
-  padding-left: 8px;
-  color: var(--text);
-}
-.remote-chat-judgment-tag {
-  color: var(--text-muted);
-  font-size: 10px;
-}
-.remote-chat-judgment-reason {
-  color: var(--text-secondary);
-  font-size: 11px;
-}
-.remote-chat-judgments-foot {
-  margin-top: 6px;
-  color: var(--text-muted);
-  font-size: 11px;
-}
-
-/* ============================================================
- * 2026-06-10: 好友申请 modal — 对齐本地风格 + CSS 变量
- * ============================================================ */
-.friend-req-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.55);
-  z-index: 10004;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.friend-req-shell {
-  background: var(--bg-main);
-  color: var(--text);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  width: 460px;
-  max-width: 92vw;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
-  font-family: inherit;
-}
-.friend-req-header {
-  padding: 14px 18px;
-  border-bottom: 1px solid var(--border);
-  background: var(--bg-sidebar);
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  border-radius: 8px 8px 0 0;
-}
-.friend-req-title {
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--text);
-}
-.friend-req-meta {
-  font-size: 11px;
-  color: var(--text-muted);
-  margin-top: 2px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.friend-req-body {
-  padding: 14px 18px;
-  font-size: 13px;
-  color: var(--text);
-  line-height: 1.5;
-}
-.friend-req-actions {
-  padding: 10px 18px;
-  border-top: 1px solid var(--border);
-  display: flex;
-  gap: 8px;
-  justify-content: flex-end;
-  background: var(--bg-sidebar);
-  border-radius: 0 0 8px 8px;
-}
-.friend-req-btn-deny {
-  padding: 6px 14px;
-  background: var(--bg-hover);
-  color: var(--text-secondary);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 13px;
-  font-family: inherit;
-}
-.friend-req-btn-deny:hover {
-  background: var(--bg-active);
-  color: var(--text);
-}
-.friend-req-btn-accept {
-  padding: 6px 14px;
-  background: var(--user-bg);
-  color: var(--user-text);
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 13px;
-  font-weight: 600;
-  font-family: inherit;
-}
-.friend-req-btn-accept:hover {
-  filter: brightness(1.1);
-}
-
-/* ============================================================
- * 2026-06-10: Toast 入场动画 (simple-toast 用 — 实际用 toastFade @ L3992, toast-in 是死代码)
- * ============================================================ */
-
-/* ============================================================
- * 2026-06-10: P2P peer-group 可折叠 — 复用 #remote-agents-section.collapsed 模式
- * peer header 加 .peer-caret, 点击切 .remote-peer-group.collapsed
- * 折叠后隐藏 .remote-peer-channels, caret 旋转 -90deg
- * ============================================================ */
-.remote-peer-group .peer-caret {
-  display: inline-block;
-  font-size: 10px;
-  color: var(--text-muted);
-  transition: transform 0.15s ease;
-  user-select: none;
-  width: 12px;
-  text-align: center;
-}
-.remote-peer-group.collapsed .peer-caret {
-  transform: rotate(-90deg);
-}
-.remote-peer-group.collapsed > .remote-peer-channels {
-  display: none;
-}
-.remote-peer-group .remote-peer-header {
-  /* 让 caret 单独成可点区域时不撑破 header */
-  user-select: none;
-}
-
-/* ============================================================
- * 2026-06-11: 分享 channel modal (P2P peer 分享) — 用 friend-req-shell 风格
- * ============================================================ */
-.share-modal-shell {
-  width: 520px;
-  max-height: 80vh;
-}
-.share-modal-hint {
-  padding: 8px 18px;
-  font-size: 12px;
-  color: var(--text-muted);
-  background: var(--bg-sidebar);
-  border-bottom: 1px solid var(--border);
-}
-.share-modal-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 4px 18px;
-  max-height: 50vh;
-}
-.share-modal-empty {
-  color: var(--text-muted);
-  padding: 20px;
-  text-align: center;
-}
-.share-modal-row {
-  display: flex;
-  align-items: flex-start;
-  gap: 10px;
-  padding: 8px 4px;
-  cursor: pointer;
-  border-bottom: 1px solid var(--border);
-  font-family: inherit;
-}
-.share-modal-row:hover {
-  background: var(--bg-hover);
-}
-.share-modal-cb {
-  margin-top: 4px;
-  cursor: pointer;
-  width: 16px;
-  height: 16px;
-  accent-color: var(--accent);
-}
-.share-modal-row-info {
-  flex: 1;
-  min-width: 0;
-}
-.share-modal-row-name {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--text);
-}
-.share-modal-row-meta {
-  font-size: 10px;
-  color: var(--text-muted);
-  margin-top: 2px;
-  font-family: 'JetBrains Mono', monospace;
-}
-
-/* ============================================================================
- * 2026-06-15: step-timeline — 气泡内 4 状态步骤条
- *   摘要条 (折叠态) + 详情区 (展开态) 共用同一份 steps: Step[] 数据
- *   状态: idle ○ / active ● / done 🟢 / error 🔴
- * ========================================================================== */
-
-.step-timeline {
-  margin: 8px 0 4px 0;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  background: var(--bg-hover);
-  font-size: 12px;
-  color: var(--text);
-  overflow: hidden;
-}
-
-.step-timeline-summary {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 6px 10px;
-  cursor: pointer;
-  user-select: none;
-  transition: background 0.15s;
-}
-.step-timeline-summary:hover { background: var(--bg-main); }
-
-.step-timeline-title {
-  font-weight: 500;
-  color: var(--text-secondary);
-  white-space: nowrap;
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 11px;
-}
-
-.step-timeline-dots {
-  display: flex;
-  gap: 4px;
-  align-items: center;
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-}
-
-.step-dot {
-  display: inline-block;
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: var(--text-muted);
-  flex-shrink: 0;
-  transition: background 0.2s, box-shadow 0.2s;
-}
-.step-dot[data-status="active"] {
-  background: var(--accent);
-  box-shadow: 0 0 0 0 var(--accent);
-  animation: step-dot-pulse 1.4s infinite;
-}
-.step-dot[data-status="done"]   { background: var(--success); }
-.step-dot[data-status="error"]  { background: var(--warning); }
-
-@keyframes step-dot-pulse {
-  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); }
-  70%  { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 0%, transparent); }
-  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
-}
-
-.step-timeline-arrow {
-  font-size: 10px;
-  color: var(--text-muted);
-  transition: transform 0.2s;
-  flex-shrink: 0;
-}
-
-.step-timeline-body {
-  max-height: 0;
-  overflow: hidden;
-  transition: max-height 0.3s ease-in-out;
-  border-top: 1px solid transparent;
-}
-.step-timeline:not([data-empty]) .step-timeline-body {
-  /* 内容存在时给 body 一个合理上限, 避免长任务撑爆 */
-  max-height: 320px;
-  overflow-y: auto;
-  border-top-color: var(--border);
-}
-
-.step-timeline-list {
-  list-style: none;
-  margin: 0;
-  padding: 6px 10px 8px 24px;
-  position: relative;
-}
-/* 详情区垂直时间轴线 */
-.step-timeline-list::before {
-  content: '';
-  position: absolute;
-  left: 14px;
-  top: 12px;
-  bottom: 12px;
-  width: 1px;
-  background: var(--border);
-}
-
-.step-timeline-node {
-  position: relative;
-  padding: 4px 0;
-  font-size: 12px;
-  line-height: 1.5;
-  color: var(--text-secondary);
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-}
-.step-timeline-node:last-child { padding-bottom: 2px; }
-
-.step-timeline-marker {
-  position: absolute;
-  left: -18px;
-  top: 9px;
-  width: 9px;
-  height: 9px;
-  border-radius: 50%;
-  background: var(--text-muted);
-  border: 2px solid var(--bg-hover);
-  box-shadow: 0 0 0 1px var(--border);
-  flex-shrink: 0;
-  transition: background 0.2s, box-shadow 0.2s;
-}
-.step-timeline-node[data-status="active"] .step-timeline-marker {
-  background: var(--accent);
-  box-shadow: 0 0 0 1px var(--accent);
-  animation: step-dot-pulse 1.4s infinite;
-}
-.step-timeline-node[data-status="done"]  .step-timeline-marker { background: var(--success); box-shadow: 0 0 0 1px var(--success); }
-.step-timeline-node[data-status="error"] .step-timeline-marker { background: var(--warning); box-shadow: 0 0 0 1px var(--warning); }
-
-.step-timeline-label {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 11px;
-  color: var(--text);
-  flex-shrink: 0;
-}
-.step-timeline-node[data-status="error"] .step-timeline-label { color: var(--warning); }
-.step-timeline-node[data-status="done"]  .step-timeline-label { color: var(--success); }
-
-.step-timeline-args {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 10px;
-  color: var(--text-muted);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex: 1;
-  min-width: 0;
-}
-
-.step-timeline-more {
-  list-style: none;
-  padding: 4px 0 4px 0;
-  margin: 0;
-  font-size: 11px;
-  color: var(--accent);
-  cursor: pointer;
-  user-select: none;
-  font-family: 'JetBrains Mono', monospace;
-}
-.step-timeline-more:hover { text-decoration: underline; }
-