openclaw-openagent 1.0.13 → 1.0.14

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

@@ -1,832 +0,0 @@
-// ── 样式注入 ──
-
-function injectStyles() {
-  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 {
-      0%, 100% { border-color: var(--border); }
-      50% { border-color: #3b82f6; }
-    }
-    .chat-bubble.streaming.cl-remote-agent-bubble {
-      animation: 1.5s ease-in-out infinite chatStreamPulse !important;
-      border-color: #3b82f6;
-    }
-
-    /* ── @ Agent Book 按钮（Figma 129:955 Frame 72552 — 紫色渐变） ── */
-    .openagent-at-btn {
-      position: relative;
-      overflow: hidden;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      gap: 4px;
-      height: 27px;
-      padding: 0 12px;
-      border-radius: 150px;
-      border: none;
-      background: linear-gradient(90deg, #5c4aff 0%, #8274ff 100%);
-      color: #fff;
-      font-size: 12px;
-      font-weight: 500;
-      cursor: pointer;
-      transition: all 0.2s ease;
-      line-height: 27px;
-      margin-left: 6px;
-      white-space: nowrap;
-      flex-shrink: 0;
-      letter-spacing: 0.2px;
-      font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-    }
-
-    .openagent-at-btn:hover {
-      transform: translateY(-1px);
-      box-shadow: inset 0 0 6px 1px rgba(255, 255, 255, 0.65);
-    }
-    .openagent-at-btn .at-sym {
-      font-size: 11.6px;
-      font-weight: 500;
-      color: #fff;
-    }
-
-    /* ── 输入区域包裹层（让面板可以相对定位） ── */
-    .openagent-input-wrapper {
-      position: relative;
-      z-index: 100000;
-    }
-
-    /* ── Agent 面板（Figma 341-2083） ── */
-    .openagent-panel-backdrop {
-      display: none;
-      position: fixed;
-      inset: 0;
-      z-index: 99998;
-    }
-    .openagent-panel-backdrop.visible { display: block; }
-
-    .openagent-agent-panel {
-      position: fixed;
-      max-height: none;
-      background: var(--oa-panel-bg, #fff);
-      border: 0.5px solid #dbdbdb;
-      border-radius: 16px;
-      z-index: 99999;
-      overflow: hidden;
-      display: none;
-      flex-direction: column;
-      gap: 14px;
-      padding: 14px;
-      font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-      box-sizing: border-box;
-      scrollbar-width: none;
-      -ms-overflow-style: none;
-    }
-    .openagent-agent-panel::-webkit-scrollbar {
-      width: 0;
-      height: 0;
-      display: none;
-    }
-    .openagent-agent-panel.visible {
-      display: flex;
-      padding: 30px;
-      animation: openagent-up 0.25s cubic-bezier(0.16, 1, 0.3, 1);
-    }
-    @keyframes openagent-up {
-      from { opacity: 0; transform: translateY(8px); }
-      to   { opacity: 1; transform: translateY(0); }
-    }
-
-    /* ── 面板头部 ── */
-    .openagent-panel-head {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      min-height: 26px;
-      border-bottom: none;
-    }
-    .openagent-panel-title {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      font-size: 18px;
-      font-weight: 500;
-      color: #333;
-      text-transform: uppercase;
-      letter-spacing: 0.3px;
-    }
-    .openagent-panel-title-icon {
-      width: 24px;
-      height: 24px;
-      flex-shrink: 0;
-    }
-    .openagent-panel-close {
-      background: transparent;
-      border: none;
-      cursor: pointer;
-      width: 21px;
-      height: 21px;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 12px;
-      font-weight: 400;
-      padding: 0;
-      border-radius: 4px;
-      transition: all 0.1s;
-      line-height: 1;
-    }
-    .openagent-panel-close:hover {
-      background: #eee;
-    }
-
-    /* ── 分隔线（Figma: 0.2px, opacity 0.16） ── */
-    .openagent-panel-divider {
-      height: 0;
-      border: none;
-      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;
-      padding: 8px 0;
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      min-height: 0;
-      max-height: min(56vh, 451px);
-      scrollbar-width: none;
-      -ms-overflow-style: none;
-    }
-    .openagent-agent-list::-webkit-scrollbar {
-      width: 0;
-      height: 0;
-      display: none;
-    }
-
-    .openagent-agent-section {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      min-width: 0;
-      margin-bottom: 30px;
-    }
-
-    /* ── 父分类标题（两级结构：Research > Market Research） ── */
-    .openagent-parent-section {
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-      width: 100%;
-      min-width: 0;
-    }
-    /* ── 分组标题 ── */
-    .openagent-section-heading {
-      font-size: 16px;
-      font-weight: 400;
-      line-height: 16px;
-      color: rgba(47, 47, 51, 0.80);
-      letter-spacing: 0;
-      margin-bottom: 20px;
-    }
-
-    /* ── 分组网格容器 ── */
-    .openagent-section-grid {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      justify-content: start;
-      gap: 12px;
-      width: 100%;
-      box-sizing: border-box;
-    }
-
-    /* ── 有搜索词时：保留旧搜索结果列表形态，不走默认分类网格 ── */
-    .openagent-search-results {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      padding: 0 12px;
-      width: 100%;
-      box-sizing: border-box;
-    }
-
-    /* ── 统一 Agent 卡片组件 ── */
-    .agent-card {
-      display: flex;
-      align-items: flex-start;
-      transition: background 0.15s;
-    }
-
-    /* 头像（共享） */
-    .agent-card__avatar {
-      flex-shrink: 0;
-      object-fit: cover;
-      background: #e8e8e8;
-    }
-
-    /* 内容区（共享） */
-    .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; }
-    .agent-card__bio {
-      font-family: "PingFang SC", sans-serif;
-      font-size: 11px;
-      font-weight: 400;
-      color: rgba(47, 47, 51, 1);
-      line-height: 14.52px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-    }
-
-    /* 统计行（共享） */
-    .agent-card__stats {
-      display: flex;
-      align-items: center;
-      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;
-      font-weight: 400;
-      white-space: nowrap;
-      letter-spacing: 1px;
-    }
-    .agent-card__stat--claws {
-      color: rgba(240, 152, 0, 1);
-    }
-    .agent-card__stat--owner {
-      color: rgba(47, 47, 51, 1);
-      line-height: 13.5px;
-    }
-
-    /* 按钮（共享） */
-    .agent-card__action {
-      flex-shrink: 0;
-      border: none;
-      cursor: pointer;
-      font-weight: 500;
-      transition: all 0.12s;
-      white-space: nowrap;
-    }
-
-    /* ── mode: mention（Figma Agent 卡片 142:3392） ── */
-    .agent-card--mention {
-      flex-direction: row;
-      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 {
-      border-color: transparent;
-      box-shadow: 0 4px 12px 0 rgba(149, 147, 240, 0.10);
-    }
-    .openagent-agent-list .agent-card--mention:hover,
-    .openagent-agent-list .agent-card--search:hover {
-      position: relative;
-      border-color: transparent;
-    }
-    .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 外壳简化 — 不再需要 */
-    .agent-card--mention .agent-card__avart {
-      display: contents;
-      padding: 0;
-      flex: none;
-      min-width: 0;
-    }
-
-    /* 第一行: 内容区 + 按钮 */
-    .agent-card--mention .agent-card__row1 {
-      display: contents;
-      gap: 0;
-      width: auto;
-      min-width: 0;
-    }
-
-    /* 内容组: 头像 + 信息列 */
-    .agent-card--mention .agent-card__content-group {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      gap: 10px;
-      flex: 1;
-      min-width: 0;
-    }
-
-    /* 头像: 50×50 */
-    .agent-card--mention .agent-card__avatar {
-      width: 50px;
-      height: 50px;
-      border-radius: 50%;
-      border: none;
-      flex-shrink: 0;
-      margin-top: 0;
-    }
-
-    /* 信息列 */
-    .agent-card--mention .agent-card__info {
-      display: flex;
-      flex-direction: column;
-      gap: 6px;
-      padding: 0;
-      flex: 1;
-      min-width: 0;
-    }
-
-    .agent-card--mention .agent-card__name {
-      font-size: 15px;
-      font-weight: 600;
-      line-height: 1;
-      color: #333;
-      width:200px;
-    }
-    .agent-card--mention .agent-card__bio {
-      font-size: 14px;
-      font-weight: 400;
-      line-height: 1.5;
-      color: rgba(47, 47, 51, 0.80);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      margin-top: 0;
-    }
-
-    /* @召唤 按钮 */
-    .agent-card--mention .agent-card__action {
-      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: 16px;
-      font-weight: 500;
-      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: none; }
-    .agent-card--mention .agent-card__action:hover {
-      background: rgba(0, 0, 0, 0.04);
-    }
-
-    /* 统计行 */
-    .agent-card--mention .agent-card__stats {
-      display: flex;
-      align-items: center;
-      gap: 0;
-      margin-top: 0;
-    }
-    .agent-card--mention .agent-card__stat--claws {
-      color: #666;
-      font-size: 14px;
-      line-height: 1;
-      letter-spacing: 1.5px;
-    }
-    .agent-card--mention .agent-card__stat--owner {
-      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（有输入搜索结果，沿用旧式单列行） ── */
-    .agent-card--search {
-      align-items: center;
-      gap: 14px;
-      width: 100%;
-      min-height: 64px;
-      padding: 10px 12px;
-      border-radius: 20px;
-      background: transparent;
-      border: 0.5px solid transparent;
-      box-sizing: border-box;
-    }
-    .agent-card--search .agent-card__avatar {
-      width: 40px;
-      height: 40px;
-      border-radius: 50%;
-      border: 0.4px solid rgba(47, 47, 51, 0.18);
-    }
-    .agent-card--search .agent-card__body {
-      display: flex;
-      flex-direction: column;
-      gap: 3px;
-      min-width: 0;
-    }
-    .agent-card--search .agent-card__name {
-      font-size: 15px;
-      line-height: 16px;
-      font-weight: 600;
-      color: #333;
-    }
-    .agent-card--search .agent-card__bio {
-      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: 14px;
-      line-height: 1;
-      color: #666;
-      letter-spacing: 1.5px;
-    }
-    .agent-card--search .agent-card__stat--owner {
-      font-size: 14px;
-      line-height: 1;
-      color: #666;
-      letter-spacing: 1.5px;
-    }
-    .agent-card--search .agent-card__action {
-      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: 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: none; }
-    .agent-card--search .agent-card__action:hover {
-      background: rgba(0, 0, 0, 0.04);
-    }
-
-    @media (max-width: 980px) {
-      .openagent-section-grid { grid-template-columns: repeat(2, minmax(0, 439.5px)); }
-    }
-
-    @media (max-width: 640px) {
-      .openagent-section-grid { grid-template-columns: 1fr; }
-      .openagent-agent-panel { padding: 14px; gap: 14px; }
-      .agent-card--mention .agent-card__row1 { gap: 12px; }
-      .agent-card--mention .agent-card__content-group { gap: 12px; }
-    }
-
-    /* ── mode: inline（聊天内嵌卡片） ── */
-    .agent-card--inline {
-      padding: 16px 20px; border-radius: 16px;
-      background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
-      border: 1px solid #e0e7ff;
-      margin: 8px 0; cursor: pointer; max-width: 420px;
-    }
-    .agent-card--inline:hover {
-      border-color: #6366f1;
-      box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
-      transform: translateY(-1px);
-    }
-    .agent-card--inline .agent-card__avatar {
-      width: 56px; height: 56px; border-radius: 14px;
-      border: 2px solid #e0e7ff;
-    }
-    .agent-card--inline .agent-card__name { font-size: 16px; color: #1e1b4b; }
-    .agent-card--inline .agent-card__bio { color: #64748b; line-height: 1.4; }
-    .agent-card--inline .agent-card__stats { gap: 12px; margin-top: 8px; }
-    .agent-card--inline .agent-card__stat { color: #94a3b8; font-weight: 500; }
-    .agent-card--inline .agent-card__action {
-      padding: 8px 16px; border-radius: 10px;
-      background: linear-gradient(135deg, #6366f1, #8b5cf6);
-      color: #fff; font-size: 12px;
-    }
-    .agent-card--inline .agent-card__action:hover {
-      filter: brightness(1.1); transform: scale(1.03);
-    }
-
-    /* Agent card loading skeleton */
-    .agent-card__loading {
-      display: flex; align-items: center; gap: 10px;
-      padding: 14px 18px; border-radius: 14px;
-      background: #f8f9ff; border: 1px solid #e0e7ff;
-      color: #94a3b8; font-size: 13px;
-      margin: 8px 0; max-width: 300px;
-    }
-
-    /* 加载态 */
-    .openagent-loading {
-      padding: 32px; text-align: center; color: #aaa; font-size: 13px;
-    }
-
-    /* ── 深色主题（v4: data-theme-mode / v5: data-theme） ── */
-    [data-theme-mode="dark"] .openagent-agent-panel,
-    [data-theme="dark"] .openagent-agent-panel {
-      background: #1c1c1c; border-color: rgba(255,255,255,0.12);
-    }
-    [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; }
-    [data-theme-mode="dark"] .openagent-panel-close:hover,
-    [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-panel-divider,
-    [data-theme="dark"] .openagent-panel-divider { border-color: rgba(255,255,255,0.1); }
-
-    [data-theme-mode="dark"] .agent-card__name,
-    [data-theme="dark"] .agent-card__name { color: #e0e0e0; }
-    [data-theme-mode="dark"] .agent-card__bio,
-    [data-theme="dark"] .agent-card__bio { color: rgba(224, 224, 224, 0.7); }
-    [data-theme-mode="dark"] .agent-card__stat,
-    [data-theme="dark"] .agent-card__stat { color: #64748b; }
-
-    [data-theme-mode="dark"] .agent-card--mention,
-    [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 { 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: 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: 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: 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: rgba(255,255,255,0.06); }
-
-
-    [data-theme-mode="dark"] .agent-card--inline,
-    [data-theme="dark"] .agent-card--inline {
-      background: linear-gradient(135deg, #1e1b3a 0%, #1a1a2e 100%);
-      border-color: #2d2b55;
-    }
-    [data-theme-mode="dark"] .agent-card--inline:hover {
-      border-color: #6366f1;
-      box-shadow: 0 4px 16px rgba(99, 102, 241, 0.25);
-    }
-    [data-theme-mode="dark"] .agent-card--inline .agent-card__name { color: #e2e8f0; }
-    [data-theme-mode="dark"] .agent-card--inline .agent-card__avatar { border-color: #2d2b55; }
-    [data-theme-mode="dark"] .agent-card__loading,
-    [data-theme="dark"] .agent-card__loading {
-      background: #1e1b3a; border-color: #2d2b55; color: #64748b;
-    }
-
-      `;
-  document.head.appendChild(style);
-}