apps/desktop/src/renderer/styles/settings/models.css

/* ---- Enabled models: flat connection list. Each connection is one
 * top-level row (logo · name + provider · status chip · chevron), sorted
 * strictly in bridge.list() order. The Item primitive carries the row
 * chrome (media / content / actions, hover + selected fills); this file
 * only owns the scroll container, the hairline between rows, and the
 * disabled dimming. Status tone lives on the Chip primitive, the default
 * marker on the Chip `accent` variant — no bespoke status/tag CSS here. */
.connectionList {
  max-height: 360px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.connectionRow {
  border-radius: var(--radius-control);
}

.connectionList li + li .connectionRow {
  border-top: var(--border-width-hairline) solid oklch(from var(--foreground) l c h / 0.06);
}

/* The default-connection selected wash rides the Item `selected` prop
   (data-selected → --state-selected-bg), one selected-row implementation
   across the app. */

.connectionRow[data-disabled="true"] {
  opacity: var(--opacity-muted);
}

.catalogPillTabs,
.settingsSurface[data-modal="true"] .catalogPillTabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.catalogPillTabs strong {
  font-size: var(--font-size-ui);
  font-weight: var(--font-weight-bold);
}

.providerMarketGrid,
.settingsSurface[data-modal="true"] .providerMarketGrid {
  grid-template-columns: 1fr;
  overflow: auto;
}

.providerCatalogRow {
  border-radius: var(--radius-control);
}

.providerMarketGrid .providerCatalogRow + .providerCatalogRow,
.providerOAuthGrid .providerCatalogRow + .providerCatalogRow {
  border-top: var(--border-width-hairline) solid oklch(from var(--foreground) l c h / 0.06);
}

/* Logo plates match the enabled list (compact 32px) so the page reads as
 * one column of provider rows top to bottom. */
.providerCatalogRow .providerLogo {
  width: 32px;
  height: 32px;
  /* No radius here: --radius-plate is a ratio, so the size change alone
     keeps this plate the same shape as the 44px one. Restating a fixed
     px would re-introduce the size drift PR-UI-13 removed. */
}

/* Gated providers carry a real trailing state badge in ItemActions (not an
 * absolute ::after), tinted by the gate reason. The row itself is a plain
 * div Item with no render prop, so it is inert — the provider-surface gate
 * never lets a gated provider read as clickable. The state badge is now the
 * Chip primitive (info = unavailable, warning = experimental); tone→alpha
 * lives in chip.tsx, so no bespoke .is-state tint rules remain here. */

/* PR-UI-13 (@yuejing 2026-05-22): ProviderLogo size normalization.
 *
 * Audit §3.8 — "OnboardingHero (compact) 跟 ProvidersPanel (default)
 * 大小不同，底图比例感觉不统一". Root cause: the compact override
 * only resized width/height/border-radius, but inherited the default
 * `0 8px 16px` drop shadow — at 32px the shadow extends ~25% beyond
 * the icon, visually drifting from the default size. Border-radius
 * ratios also drifted (29.5% default vs 31.25% compact vs 33% micro).
 *
 * Fix: pin a single ~27-28% border-radius ratio across all three
 * sizes (md / sm / xs) and scale the drop shadow proportionally.
 * Inner SVG keeps the existing 72% ratio so brand marks read the
 * same at every size.
 *
 * 2026-07-27: that ratio is now carried by --radius-plate (27%), not
 * by a per-size px value. The tier convergence had rewritten both
 * sizes to --radius-surface, which silently reverted this fix —
 * 8px reads 18.2% at 44px and 25% at 32px, the exact drift the audit
 * above was raising. A percentage is scale-invariant, so the compact
 * override no longer needs to restate the radius at all.
 */
/* Neutral, theme-aware plate. Provider identity now comes from the
   official brand mark (provider-brand-marks.tsx), so the plate stays a
   quiet foreground wash in both light and dark — no per-provider tints. */
.providerLogo {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-plate);
  background: var(--foreground-5);
  color: var(--foreground);
  box-shadow: inset 0 0 0 1px oklch(from var(--foreground) l c h / 0.06);
}

.providerLogo[data-compact="true"] {
  width: 32px;
  height: 32px;
}

/* Color marks keep their own fill. Inline monochrome SVGs inherit the plate
   color; external monochrome assets use a mask because `<img>` documents do
   not inherit `currentColor`. */
.providerLogo svg,
.providerLogo img,
.providerLogo .providerAssetMask {
  width: 64%;
  height: 64%;
  display: block;
}

.providerAssetMask {
  background: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}