openclaw-openagent 1.0.9 → 1.0.12

package/src/plugin-ui/modules/agent-book/panel/styles.js

@@ -1,10 +1,13 @@
 // ── 样式注入 ──
 
 function injectStyles() {
-  if (document.getElementById('openagent-override-styles')) return;
+  var oldStyle = document.getElementById('openagent-override-styles');
+  if (oldStyle) oldStyle.remove();
 
   const style = document.createElement('style');
   style.id = 'openagent-override-styles';
+  style.setAttribute('data-openagent-style', 'agent-book-panel');
+  style.setAttribute('data-openagent-host-version', CL.hostVersion || 'unknown');
   style.textContent = `
     /* ── 流式回复边框闪烁：覆盖为蓝色 ── */
     @keyframes chatStreamPulse {
@@ -16,80 +19,39 @@ function injectStyles() {
       border-color: #3b82f6;
     }
 
-    /* ── @ Agent Book 按钮（Figma 1:1117 物理级复刻 — Mesh Gradient） ── */
+    /* ── @ Agent Book 按钮（Figma 129:955 Frame 72552 — 紫色渐变） ── */
     .openagent-at-btn {
       position: relative;
-      overflow: hidden; /* Figma clipsContent: true */
+      overflow: hidden;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 4px;
-      height: 26px;
-      padding: 0 16px;
-      border-radius: 100px;
+      height: 27px;
+      padding: 0 12px;
+      border-radius: 150px;
       border: none;
-      background: #6ECCFF; /* Figma Frame 72552 底色 */
-      box-shadow: inset 0 0 8.5px 0 #96ECFF; /* Figma INNER_SHADOW */
+      background: linear-gradient(90deg, #5c4aff 0%, #8274ff 100%);
       color: #fff;
-      font-size: 13px;
-      font-weight: 600;
+      font-size: 12px;
+      font-weight: 500;
       cursor: pointer;
       transition: all 0.2s ease;
-      line-height: 26px;
+      line-height: 27px;
       margin-left: 6px;
       white-space: nowrap;
       flex-shrink: 0;
       letter-spacing: 0.2px;
-      /* 建立层叠上下文，让伪元素在底层 */
-      z-index: 1;
-      isolation: isolate;
-    }
-
-    /* Figma 外层 Ellipse 12873：蓝色椭圆，偏左 */
-    .openagent-at-btn::before {
-      content: '';
-      position: absolute;
-      left: -13%;
-      top: -98%;
-      width: 50%;
-      height: 304%;
-      background: #7A94FF;
-      filter: blur(23px); /* Figma LAYER_BLUR: 23.2px */
-      transform: rotate(174deg);
-      z-index: -1;
-      pointer-events: none;
-    }
-
-    /* Figma 外层 Ellipse 12872：黄绿色椭圆，偏右 */
-    .openagent-at-btn::after {
-      content: '';
-      position: absolute;
-      left: 70%;
-      top: -49%;
-      width: 54%;
-      height: 145%;
-      background: #A1FF2E;
-      filter: blur(30.5px); /* Figma LAYER_BLUR: 30.5px */
-      transform: rotate(27deg);
-      z-index: -1;
-      pointer-events: none;
-    }
-
-    /* 确保文字始终在最高层 */
-    .openagent-at-btn .at-sym,
-    .openagent-at-btn span {
-      position: relative;
-      z-index: 2;
+      font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     }
 
     .openagent-at-btn:hover {
-      filter: brightness(1.08);
       transform: translateY(-1px);
-      box-shadow: inset 0 0 8.5px 0 #96ECFF, 0 2px 8px rgba(110, 204, 255, 0.4);
+      box-shadow: inset 0 0 6px 1px rgba(255, 255, 255, 0.65);
     }
     .openagent-at-btn .at-sym {
-      font-size: 14px;
-      font-weight: 700;
+      font-size: 11.6px;
+      font-weight: 500;
       color: #fff;
     }
 
@@ -112,9 +74,8 @@ function injectStyles() {
       position: fixed;
       max-height: none;
       background: var(--oa-panel-bg, #fff);
-      border: 1.2px solid var(--oa-border, rgba(47, 47, 51, 0.12));
-      border-radius: 18px;
-      box-shadow: 0 -4px 24px var(--oa-shadow-color, rgba(0,0,0,0.08)), 0 2px 8px var(--oa-shadow-color, rgba(0,0,0,0.04));
+      border: 0.5px solid #dbdbdb;
+      border-radius: 16px;
       z-index: 99999;
       overflow: hidden;
       display: none;
@@ -126,6 +87,7 @@ function injectStyles() {
     }
     .openagent-agent-panel.visible {
       display: flex;
+      padding: 30px;
       animation: openagent-up 0.25s cubic-bezier(0.16, 1, 0.3, 1);
     }
     @keyframes openagent-up {
@@ -139,28 +101,26 @@ function injectStyles() {
       justify-content: space-between;
       align-items: center;
       min-height: 26px;
-      padding: 6px 10px 0 10px;
       border-bottom: none;
     }
     .openagent-panel-title {
       display: flex;
       align-items: center;
       gap: 6px;
-      font-size: 16px;
+      font-size: 18px;
       font-weight: 500;
-      color: rgba(47, 47, 51, 0.8);
+      color: #333;
       text-transform: uppercase;
       letter-spacing: 0.3px;
     }
     .openagent-panel-title-icon {
-      width: 21px;
-      height: 21px;
+      width: 24px;
+      height: 24px;
       flex-shrink: 0;
     }
     .openagent-panel-close {
-      background: var(--oa-card-bg, rgba(249, 249, 249, 1));
+      background: transparent;
       border: none;
-      color: rgba(47, 47, 51, 0.6);
       cursor: pointer;
       width: 21px;
       height: 21px;
@@ -176,17 +136,184 @@ function injectStyles() {
     }
     .openagent-panel-close:hover {
       background: #eee;
-      color: rgba(47, 47, 51, 1);
     }
 
     /* ── 分隔线（Figma: 0.2px, opacity 0.16） ── */
     .openagent-panel-divider {
       height: 0;
       border: none;
-      border-top: 0.2px solid rgba(47, 47, 51, 0.16);
+      border-top: 0.2px solid #EAEAEA;
       margin: 0;
     }
 
+    /* ── 提示栏（Figma 141:3293，页面加载即显示） ── */
+    .openagent-hint-bar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 12px;
+      margin-bottom: 12px;
+      background: #fff;
+      border: 1.2px solid rgba(47, 47, 51, 0.1);
+      border-radius: var(--radius-lg, 18px);
+      gap: 12px;
+      width: 100%;
+      box-sizing: border-box;
+      margin:0 auto;
+      margin-bottom: 12px;
+    }
+    .openagent-hint-bar__content {
+      display: flex;
+      align-items: center;
+      gap: 9px;
+      flex: 1;
+      min-width: 0;
+    }
+    .openagent-hint-bar__icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 27px;
+      height: 27px;
+      border-radius: 6px;
+      background: linear-gradient(135deg, rgba(130,116,255,0.1) 0%, rgba(56,144,255,0.1) 100%);
+      flex-shrink: 0;
+    }
+    .openagent-hint-bar__text {
+      font-family: "PingFang SC", sans-serif;
+      font-size: 15px;
+      font-weight: 400;
+      color: rgba(51, 51, 51, 0.8);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .openagent-hint-bar__close {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 21px;
+      height: 21px;
+      padding: 0;
+      border: none;
+      background: transparent;
+      cursor: pointer;
+      flex-shrink: 0;
+      border-radius: 4px;
+      transition: all 0.1s;
+    }
+    .openagent-hint-bar__close:hover {
+      background: #eee;
+    }
+
+    /* 暗色主题 */
+    [data-theme-mode="dark"] .openagent-hint-bar,
+    [data-theme="dark"] .openagent-hint-bar {
+      background: #1c1c1c;
+      border-color: rgba(255,255,255,0.1);
+    }
+    [data-theme-mode="dark"] .openagent-hint-bar__text,
+    [data-theme="dark"] .openagent-hint-bar__text {
+      color: rgba(224, 224, 224, 0.8);
+    }
+    [data-theme-mode="dark"] .openagent-hint-bar__close,
+    [data-theme="dark"] .openagent-hint-bar__close {
+    }
+    [data-theme-mode="dark"] .openagent-hint-bar__close:hover,
+    [data-theme="dark"] .openagent-hint-bar__close:hover {
+      background: #333;
+    }
+
+    /* ── 空状态独立浮层（Figma 144:3444） ── */
+    .openagent-empty-toast {
+      display: flex;
+      align-items: center;
+      gap: 9px;
+      padding: 18px;
+      background: #fff;
+      border: 1.2px solid rgba(47, 47, 51, 0.1);
+      border-radius: 18px;
+      box-sizing: border-box;
+      animation: openagent-up 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+      box-shadow: 0 -4px 24px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
+    }
+    [data-theme-mode="dark"] .openagent-empty-toast,
+    [data-theme="dark"] .openagent-empty-toast {
+      background: #1c1c1c; border-color: rgba(255,255,255,0.1);
+      box-shadow: 0 -4px 24px rgba(0,0,0,0.3);
+    }
+    [data-theme-mode="dark"] .openagent-empty-toast .openagent-empty-state__text,
+    [data-theme="dark"] .openagent-empty-toast .openagent-empty-state__text {
+      color: rgba(224, 224, 224, 0.8);
+    }
+    [data-theme-mode="dark"] .openagent-empty-toast .openagent-empty-state__close,
+    [data-theme="dark"] .openagent-empty-toast .openagent-empty-state__close {
+    }
+
+    /* ── 空状态（Figma 144:3444）— 无匹配结果 ── */
+    .openagent-empty-state {
+      padding: 18px;
+      background: #fff;
+      border: 1.2px solid rgba(47, 47, 51, 0.1);
+      border-radius: 18px;
+    }
+    .openagent-empty-state__row {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 9px;
+    }
+    .openagent-empty-state__icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 27px;
+      height: 27px;
+      border-radius: 6px;
+      background: linear-gradient(135deg, rgba(92,74,255,0.1) 0%, rgba(130,116,255,0.1) 100%);
+      flex-shrink: 0;
+    }
+    .openagent-empty-state__text {
+      flex: 1;
+      font-family: "PingFang SC", sans-serif;
+      font-size: 15px;
+      font-weight: 400;
+      color: rgba(51, 51, 51, 0.8);
+      line-height: 1.5;
+    }
+    .openagent-empty-state__close {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 21px;
+      height: 21px;
+      padding: 0;
+      border: none;
+      background: transparent;
+      cursor: pointer;
+      flex-shrink: 0;
+      border-radius: 4px;
+    }
+    .openagent-empty-state__close:hover {
+      background: #eee;
+    }
+    [data-theme-mode="dark"] .openagent-empty-state,
+    [data-theme="dark"] .openagent-empty-state {
+      background: #1c1c1c;
+      border-color: rgba(255,255,255,0.1);
+    }
+    [data-theme-mode="dark"] .openagent-empty-state__text,
+    [data-theme="dark"] .openagent-empty-state__text {
+      color: rgba(224, 224, 224, 0.8);
+    }
+    [data-theme-mode="dark"] .openagent-empty-state__close,
+    [data-theme="dark"] .openagent-empty-state__close {
+    }
+    [data-theme-mode="dark"] .openagent-empty-state__close:hover,
+    [data-theme="dark"] .openagent-empty-state__close:hover {
+      background: #333;
+    }
+
     /* ── Agent 列表（section stack） ── */
     .openagent-agent-list {
       overflow-y: auto;
@@ -194,7 +321,6 @@ function injectStyles() {
       flex: 1;
       display: flex;
       flex-direction: column;
-      gap: 14px;
       min-height: 0;
       max-height: min(56vh, 451px);
       scrollbar-width: thin;
@@ -217,9 +343,9 @@ function injectStyles() {
     .openagent-agent-section {
       display: flex;
       flex-direction: column;
-      gap: 8px;
       width: 100%;
       min-width: 0;
+      margin-bottom: 30px;
     }
 
     /* ── 父分类标题（两级结构：Research > Market Research） ── */
@@ -230,33 +356,22 @@ function injectStyles() {
       width: 100%;
       min-width: 0;
     }
-    .openagent-parent-heading {
-      font-size: 11px;
-      font-weight: 600;
-      line-height: 13px;
-      color: rgba(47, 47, 51, 0.45);
-      padding: 0 12px;
-      text-transform: uppercase;
-      letter-spacing: 0.8px;
-    }
-
     /* ── 分组标题 ── */
     .openagent-section-heading {
-      font-size: 14px;
+      font-size: 16px;
       font-weight: 400;
-      line-height: 14px;
+      line-height: 16px;
       color: rgba(47, 47, 51, 0.80);
-      padding: 0 12px 0 12px;
       letter-spacing: 0;
+      margin-bottom: 20px;
     }
 
     /* ── 分组网格容器 ── */
     .openagent-section-grid {
       display: grid;
-      grid-template-columns: repeat(3, minmax(0, 439.5px));
+      grid-template-columns: repeat(3, 1fr);
       justify-content: start;
-      gap: 8px 14px;
-      padding: 0 12px;
+      gap: 12px;
       width: 100%;
       box-sizing: border-box;
     }
@@ -289,9 +404,15 @@ function injectStyles() {
     .agent-card__body { flex: 1; min-width: 0; }
     .agent-card__name-line { display: flex; align-items: baseline; gap: 8px; }
     .agent-card__name {
+      display: block;
+      min-width: 0;
+      max-width: 100%;
       font-family: "PingFang SC", sans-serif;
       font-weight: 600;
       color: rgba(47, 47, 51, 1);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
     .agent-card__tag { font-size: 12px; color: #6366f1; font-weight: 500; }
     .agent-card__specialty { font-size: 12px; color: #999; font-weight: 400; }
@@ -315,6 +436,23 @@ function injectStyles() {
       gap: 0;
       flex-wrap: wrap;
     }
+    /* 星标+数字 紧密组合（Figma gap 1.5px） */
+    .agent-card__stat-group {
+      display: flex;
+      align-items: center;
+      gap: 1.5px;
+    }
+    .agent-card__stat-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 12px;
+      height: 12px;
+      font-size: 14px;
+      line-height: 1;
+      color: #666;
+      flex-shrink: 0;
+    }
     .agent-card__stat {
       font-family: "PingFang SC", sans-serif;
       font-size: 13.5px;
@@ -340,96 +478,99 @@ function injectStyles() {
       white-space: nowrap;
     }
 
-    /* ── mode: mention（Figma Agent item → avart 实例） ── */
+    /* ── mode: mention（Figma Agent 卡片 142:3392） ── */
     .agent-card--mention {
       flex-direction: row;
-      align-items: stretch;
-      gap: 0;
-      padding: 0;
-      border-radius: 8px;
-      border: none;
-      background: transparent;
-      min-height: 88px;
+      align-items: center;
+      gap: 10px;
+      padding: 15px;
+      border-radius: 20px;
+      border: 0.5px solid #dbdbdb;
+      background: #fff;
       min-width: 0;
+      box-sizing: border-box;
     }
     .agent-card--mention:hover {
-      background: rgba(0, 0, 0, 0.02);
+      border-color: transparent;
+      box-shadow: 0 4px 12px 0 rgba(149, 147, 240, 0.10);
     }
-    /* 键盘导航高亮（§1.5）— 对标 TIM index.vue:32 'selected' class */
-    .agent-card--mention.openagent-card-selected {
-      background: rgba(99, 102, 241, 0.06);
-      outline: 2px solid rgba(99, 102, 241, 0.3);
-      outline-offset: -2px;
+    .openagent-agent-list .agent-card--mention:hover,
+    .openagent-agent-list .agent-card--search:hover {
+      position: relative;
+      border-color: transparent;
     }
-    [data-theme-mode="dark"] .agent-card--mention.openagent-card-selected {
-      background: rgba(99, 102, 241, 0.12);
-      outline-color: rgba(99, 102, 241, 0.4);
+    .openagent-agent-list .agent-card--mention:hover::after,
+    .openagent-agent-list .agent-card--search:hover::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      padding: 1px;
+      background: linear-gradient(90deg, rgba(92, 74, 255, 0.5), rgba(130, 116, 255, 0.5));
+      pointer-events: none;
+      box-sizing: border-box;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor;
+      mask-composite: exclude;
     }
-
-    /* avart 外壳: Figma px 12, centered */
+    /* avart 外壳简化 — 不再需要 */
     .agent-card--mention .agent-card__avart {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      gap: 0;
-      padding: 0 10px;
-      flex: 1;
+      display: contents;
+      padding: 0;
+      flex: none;
       min-width: 0;
-      box-sizing: border-box;
     }
 
-    /* 第一行: row, gap:24 (内容组 + @Try) */
+    /* 第一行: 内容区 + 按钮 */
     .agent-card--mention .agent-card__row1 {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      gap: 16px;
-      width: 100%;
+      display: contents;
+      gap: 0;
+      width: auto;
       min-width: 0;
     }
 
-    /* 内容组: row, gap:18 (头像 + 信息列) */
+    /* 内容组: 头像 + 信息列 */
     .agent-card--mention .agent-card__content-group {
       display: flex;
       flex-direction: row;
-      align-items: flex-start;
-      gap: 12px;
+      align-items: center;
+      gap: 10px;
       flex: 1;
       min-width: 0;
     }
 
-    /* 头像 */
+    /* 头像: 50×50 */
     .agent-card--mention .agent-card__avatar {
-      width: 48px;
-      height: 48px;
+      width: 50px;
+      height: 50px;
       border-radius: 50%;
       border: none;
       flex-shrink: 0;
       margin-top: 0;
     }
 
-    /* 信息列: name / bio / stats */
+    /* 信息列 */
     .agent-card--mention .agent-card__info {
       display: flex;
       flex-direction: column;
-      gap: 4px;
-      padding: 3px 0;
+      gap: 6px;
+      padding: 0;
       flex: 1;
       min-width: 0;
     }
 
     .agent-card--mention .agent-card__name {
-      font-size: 12px;
+      font-size: 15px;
       font-weight: 600;
-      line-height: 14px;
-      color: rgba(47, 47, 51, 1);
+      line-height: 1;
+      color: #333;
+      width:200px;
     }
     .agent-card--mention .agent-card__bio {
-      font-size: 10px;
+      font-size: 14px;
       font-weight: 400;
-      line-height: 14px;
-      color: rgba(47, 47, 51, 0.40);
-      text-align: justify;
+      line-height: 1.5;
+      color: rgba(47, 47, 51, 0.80);
       overflow: hidden;
       text-overflow: ellipsis;
       display: -webkit-box;
@@ -438,37 +579,31 @@ function injectStyles() {
       margin-top: 0;
     }
 
-    /* @Try 按钮 */
+    /* @召唤 按钮 */
     .agent-card--mention .agent-card__action {
-      width: 64px;
-      height: 30px;
-      padding: 0 14px;
-      border-radius: 10px;
-      background: #EFF0F2;
-      border: 1.286px solid rgba(47, 47, 51, 0.04);
-      color: rgba(47, 47, 51, 1);
+      height: 36px;
+      padding: 0 18px;
+      border-radius: 23px;
+      background: transparent;
+      border: 0.5px solid #dbdbdb;
+      color: #333;
       font-family: "PingFang SC", sans-serif;
-      font-size: 12px;
+      font-size: 16px;
       font-weight: 500;
-      line-height: 12px;
+      line-height: 15.43px;
       text-transform: capitalize;
       flex-shrink: 0;
       display: inline-flex;
       align-items: center;
       justify-content: center;
+      width: auto;
     }
-    .agent-card--mention .agent-card__action::before { content: '@'; font-weight: 600; }
+    .agent-card--mention .agent-card__action::before { content: none; }
     .agent-card--mention .agent-card__action:hover {
-      background: #e2e3e5;
+      background: rgba(0, 0, 0, 0.04);
     }
 
-    /* Legacy row2 kept for older generated DOM, but current mention card keeps stats in info. */
-    .agent-card--mention .agent-card__row2 {
-      display: none;
-      flex-direction: row;
-      align-items: center;
-      padding-left: 60px;
-    }
+    /* 统计行 */
     .agent-card--mention .agent-card__stats {
       display: flex;
       align-items: center;
@@ -476,16 +611,21 @@ function injectStyles() {
       margin-top: 0;
     }
     .agent-card--mention .agent-card__stat--claws {
-      color: rgba(240, 152, 0, 1);
-      font-size: 10px;
-      line-height: 12px;
-      letter-spacing: 1px;
+      color: #666;
+      font-size: 14px;
+      line-height: 1;
+      letter-spacing: 1.5px;
     }
     .agent-card--mention .agent-card__stat--owner {
-      color: rgba(47, 47, 51, 1);
-      font-size: 10px;
-      line-height: 12px;
-      letter-spacing: 1px;
+      color: #666;
+      font-size: 14px;
+      line-height: 1;
+      letter-spacing: 1.5px;
+    }
+
+    /* row2 (legacy compat) */
+    .agent-card--mention .agent-card__row2 {
+      display: none;
     }
 
     /* ── mode: search（有输入搜索结果，沿用旧式单列行） ── */
@@ -495,18 +635,11 @@ function injectStyles() {
       width: 100%;
       min-height: 64px;
       padding: 10px 12px;
-      border-radius: 10px;
+      border-radius: 20px;
       background: transparent;
+      border: 0.5px solid transparent;
       box-sizing: border-box;
     }
-    .agent-card--search:hover {
-      background: rgba(0, 0, 0, 0.02);
-    }
-    .agent-card--search.openagent-card-selected {
-      background: rgba(99, 102, 241, 0.06);
-      outline: 2px solid rgba(99, 102, 241, 0.3);
-      outline-offset: -2px;
-    }
     .agent-card--search .agent-card__avatar {
       width: 40px;
       height: 40px;
@@ -520,48 +653,50 @@ function injectStyles() {
       min-width: 0;
     }
     .agent-card--search .agent-card__name {
-      font-size: 13px;
+      font-size: 15px;
       line-height: 16px;
       font-weight: 600;
-      color: rgba(47, 47, 51, 1);
+      color: #333;
     }
     .agent-card--search .agent-card__bio {
-      font-size: 11px;
-      line-height: 15px;
-      color: rgba(47, 47, 51, 0.45);
+      font-size: 14px;
+      line-height: 1.5;
+      color: rgba(47, 47, 51, 0.80);
       -webkit-line-clamp: 1;
     }
     .agent-card--search .agent-card__stats {
       margin-top: 0;
     }
     .agent-card--search .agent-card__stat--claws {
-      font-size: 11px;
-      line-height: 13px;
-      color: rgba(240, 152, 0, 1);
+      font-size: 14px;
+      line-height: 1;
+      color: #666;
+      letter-spacing: 1.5px;
     }
     .agent-card--search .agent-card__stat--owner {
-      font-size: 11px;
-      line-height: 13px;
-      color: rgba(47, 47, 51, 0.65);
+      font-size: 14px;
+      line-height: 1;
+      color: #666;
+      letter-spacing: 1.5px;
     }
     .agent-card--search .agent-card__action {
-      width: 60px;
-      height: 28px;
-      padding: 0 12px;
-      border-radius: 10px;
-      background: #EFF0F2;
-      border: 1px solid rgba(47, 47, 51, 0.04);
-      color: rgba(47, 47, 51, 1);
+      height: 36px;
+      padding: 0 18px;
+      border-radius: 23px;
+      background: transparent;
+      border: 0.5px solid #dbdbdb;
+      color: #333;
       font-family: "PingFang SC", sans-serif;
-      font-size: 12px;
-      line-height: 12px;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 15.43px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
     }
-    .agent-card--search .agent-card__action::before { content: '@'; font-weight: 600; }
+    .agent-card--search .agent-card__action::before { content: none; }
     .agent-card--search .agent-card__action:hover {
-      background: #e2e3e5;
+      background: rgba(0, 0, 0, 0.04);
     }
 
     @media (max-width: 980px) {
@@ -622,20 +757,17 @@ function injectStyles() {
     [data-theme-mode="dark"] .openagent-agent-panel,
     [data-theme="dark"] .openagent-agent-panel {
       background: #1c1c1c; border-color: rgba(255,255,255,0.12);
-      box-shadow: 0 -4px 24px rgba(0,0,0,0.3);
     }
     [data-theme-mode="dark"] .openagent-panel-head,
     [data-theme="dark"] .openagent-panel-head { border-color: #2a2a2a; }
     [data-theme-mode="dark"] .openagent-panel-title,
     [data-theme="dark"] .openagent-panel-title { color: rgba(224, 224, 224, 0.8); }
     [data-theme-mode="dark"] .openagent-panel-close,
-    [data-theme="dark"] .openagent-panel-close { background: #2a2a2a; color: #888; }
+    [data-theme="dark"] .openagent-panel-close { background: #2a2a2a; }
     [data-theme-mode="dark"] .openagent-panel-close:hover,
-    [data-theme="dark"] .openagent-panel-close:hover { background: #333; color: #ccc; }
+    [data-theme="dark"] .openagent-panel-close:hover { background: #333; }
     [data-theme-mode="dark"] .openagent-section-heading,
     [data-theme="dark"] .openagent-section-heading { color: rgba(224, 224, 224, 0.45); }
-    [data-theme-mode="dark"] .openagent-parent-heading,
-    [data-theme="dark"] .openagent-parent-heading { color: rgba(224, 224, 224, 0.3); }
     [data-theme-mode="dark"] .openagent-panel-divider,
     [data-theme="dark"] .openagent-panel-divider { border-color: rgba(255,255,255,0.1); }
 
@@ -647,28 +779,37 @@ function injectStyles() {
     [data-theme="dark"] .agent-card__stat { color: #64748b; }
 
     [data-theme-mode="dark"] .agent-card--mention,
-    [data-theme="dark"] .agent-card--mention { background: transparent; }
+    [data-theme="dark"] .agent-card--mention { background: #1c1c1c; border-color: rgba(255,255,255,0.12); }
     [data-theme-mode="dark"] .agent-card--mention:hover,
-    [data-theme="dark"] .agent-card--mention:hover { background: #252525; }
+    [data-theme="dark"] .agent-card--mention:hover { border-color: transparent; }
+    [data-theme-mode="dark"] .agent-card--mention .agent-card__name,
+    [data-theme="dark"] .agent-card--mention .agent-card__name { color: #e0e0e0; }
+    [data-theme-mode="dark"] .agent-card--mention .agent-card__bio,
+    [data-theme="dark"] .agent-card--mention .agent-card__bio { color: rgba(224,224,224,0.7); }
+    [data-theme-mode="dark"] .agent-card--mention .agent-card__stat--claws,
+    [data-theme="dark"] .agent-card--mention .agent-card__stat--claws { color: #aaa; }
+    [data-theme-mode="dark"] .agent-card--mention .agent-card__stat--owner,
+    [data-theme="dark"] .agent-card--mention .agent-card__stat--owner { color: #aaa; }
     [data-theme-mode="dark"] .agent-card--mention .agent-card__action,
     [data-theme="dark"] .agent-card--mention .agent-card__action {
-      background: #333; border-color: #555; color: #ddd;
+      background: transparent; border-color: rgba(255,255,255,0.2); color: #ddd;
     }
     [data-theme-mode="dark"] .agent-card--mention .agent-card__action:hover,
-    [data-theme="dark"] .agent-card--mention .agent-card__action:hover { background: #444; }
-    [data-theme-mode="dark"] .agent-card--search:hover,
-    [data-theme="dark"] .agent-card--search:hover { background: #252525; }
-    [data-theme-mode="dark"] .agent-card--search.openagent-card-selected,
-    [data-theme="dark"] .agent-card--search.openagent-card-selected {
-      background: rgba(99, 102, 241, 0.12);
-      outline-color: rgba(99, 102, 241, 0.4);
-    }
+    [data-theme="dark"] .agent-card--mention .agent-card__action:hover { background: rgba(255,255,255,0.06); }
+    [data-theme-mode="dark"] .agent-card--search .agent-card__name,
+    [data-theme="dark"] .agent-card--search .agent-card__name { color: #e0e0e0; }
+    [data-theme-mode="dark"] .agent-card--search .agent-card__bio,
+    [data-theme="dark"] .agent-card--search .agent-card__bio { color: rgba(224, 224, 224, 0.65); }
+    [data-theme-mode="dark"] .agent-card--search .agent-card__stat--claws,
+    [data-theme="dark"] .agent-card--search .agent-card__stat--claws { color: #aaa; }
+    [data-theme-mode="dark"] .agent-card--search .agent-card__stat--owner,
+    [data-theme="dark"] .agent-card--search .agent-card__stat--owner { color: #aaa; }
     [data-theme-mode="dark"] .agent-card--search .agent-card__action,
     [data-theme="dark"] .agent-card--search .agent-card__action {
-      background: #333; border-color: #555; color: #ddd;
+      background: transparent; border-color: rgba(255,255,255,0.2); color: #ddd;
     }
     [data-theme-mode="dark"] .agent-card--search .agent-card__action:hover,
-    [data-theme="dark"] .agent-card--search .agent-card__action:hover { background: #444; }
+    [data-theme="dark"] .agent-card--search .agent-card__action:hover { background: rgba(255,255,255,0.06); }
 
 
     [data-theme-mode="dark"] .agent-card--inline,
@@ -686,6 +827,7 @@ function injectStyles() {
     [data-theme="dark"] .agent-card__loading {
       background: #1e1b3a; border-color: #2d2b55; color: #64748b;
     }
-  `;
+
+      `;
   document.head.appendChild(style);
 }