apps/desktop/src/renderer/styles/settings/web-search.css

/* Settings → Web Search (联网搜索) live-query result list.
   Relocated from tool-stream.css — issue #546 PR1 (zero visual change). */
/* ────────────────────────────────────────────────────────────────
   PR-WEB-SEARCH-TAVILY-0: Settings → 联网搜索 live-query result list.
   Plain-text rows only (title + source + snippet); never markdown,
   never HTML.
   ──────────────────────────────────────────────────────────────── */
.settingsWebSearchControlCluster,
.settingsWebSearchSearchControls {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2-5);
}

.settingsWebSearchStatusCluster {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.settingsWebSearchStatusCluster small {
  font: var(--maka-text-code);
  color: var(--muted-foreground);
  white-space: nowrap;
}

.settingsWebSearchDisabledReason {
  font: var(--maka-text-body);
  color: var(--muted-foreground);
  text-align: right;
  /* #1364: the hint names an env var (TAVILY_API_KEY) — an unbreakable token
     wider than the whole content column at the 480px window floor. */
  overflow-wrap: anywhere;
}
.settingsWebSearchResults {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
    display: grid;
    gap: var(--space-2-5);
  }
.settingsWebSearchResult {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-2-5) var(--space-3);
    border: var(--border-width-hairline) solid var(--foreground-10);
    border-radius: var(--radius-surface);
    background: var(--foreground-3);
  }
.settingsWebSearchResult a {
    font: var(--maka-text-heading-4);
    color: var(--foreground);
    text-decoration: none;
    /* #1364: Tavily titles are sometimes a bare URL — one unbreakable token
       that widened the whole page (~585px of overflow at the 480px window
       floor) because a grid item's min-content floor propagates upward. */
    overflow-wrap: anywhere;
  }
.settingsWebSearchResult a:hover {
    text-decoration: underline;
  }

.settingsWebSearchResult a:focus-visible {
    text-decoration: underline;
  }
.settingsWebSearchResult small {
    font: var(--maka-text-supporting);
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    /* #1364: the source is a hostname — one unbreakable token, and long ones
       (raw.githubusercontent.com) widened the page at the 480px floor. */
    overflow-wrap: anywhere;
  }
.settingsWebSearchResult p {
    font: var(--maka-text-body);
    margin: 0;
    color: var(--foreground-secondary);
    white-space: pre-wrap;
    word-break: break-word;
  }

@media (max-width: 720px) {
  .settingsWebSearchControlCluster,
  .settingsWebSearchSearchControls,
    .settingsWebSearchStatusCluster {
    justify-content: flex-start;
    margin-left: 0;
  }

  /* #1364: the mono timestamp ("最近一次测试：…") keeps `nowrap` on wide
     layouts, but at the 480px window floor its ~169px intrinsic width was the
     single widest thing on the page and dragged the whole card into overflow.
     The cluster already wraps between items; in the narrow layout the items
     themselves may wrap too. */
  .settingsWebSearchStatusCluster small {
    white-space: normal;
  }

    .settingsWebSearchDisabledReason {
    text-align: left;
  }
}