@compose-market/theme 0.0.91 → 0.0.93

package/dist/agents/styles.d.ts

@@ -1,2 +1,2 @@
-export declare const agentsCss = "/**\n * Compose.Market Agent Card\n * @compose-market/theme/css/agents\n */\n\n.cm-agent-card {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: 0.85rem;\n  border-radius: max(var(--radius, 0.25rem), 0.3rem);\n  border: 1px solid hsl(var(--border) / 0.84);\n  background:\n    linear-gradient(180deg, hsl(var(--card) / 0.96), hsl(var(--card) / 0.78));\n  box-shadow:\n    0 18px 40px hsl(240 30% 2% / 0.24),\n    inset 0 1px 0 hsl(0 0% 100% / 0.04);\n  overflow: hidden;\n}\n\n.cm-agent-card--interactive {\n  transition:\n    transform 180ms ease,\n    border-color 180ms ease,\n    box-shadow 180ms ease;\n}\n\n.cm-agent-card--interactive:hover {\n  transform: translateY(-2px);\n  border-color: hsl(var(--primary) / 0.45);\n  box-shadow:\n    0 18px 36px hsl(240 30% 2% / 0.32),\n    0 0 24px hsl(var(--primary) / 0.14),\n    inset 0 1px 0 hsl(0 0% 100% / 0.05);\n}\n\n.cm-agent-card--running {\n  border-color: hsl(142 71% 45% / 0.48);\n  box-shadow:\n    0 10px 30px hsl(142 71% 45% / 0.08),\n    0 0 24px hsl(142 71% 45% / 0.12),\n    inset 0 1px 0 hsl(0 0% 100% / 0.05);\n}\n\n.cm-agent-card__main {\n  display: grid;\n  gap: 0.9rem;\n  padding: 1rem;\n}\n\n.cm-agent-card__header {\n  display: flex;\n  align-items: flex-start;\n  gap: 1rem;\n}\n\n.cm-agent-card__avatar {\n  width: 3.5rem;\n  height: 3.5rem;\n  border-radius: max(var(--radius, 0.25rem), 0.35rem);\n  border: 1px solid hsl(var(--primary) / 0.28);\n  background:\n    linear-gradient(180deg, hsl(var(--background) / 0.92), hsl(var(--muted) / 0.34));\n  display: grid;\n  place-items: center;\n  flex-shrink: 0;\n  overflow: hidden;\n  box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.08);\n}\n\n.cm-agent-card__avatar-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.cm-agent-card__avatar-fallback {\n  font-family: var(--font-mono), monospace;\n  color: hsl(var(--primary));\n  font-size: 0.88rem;\n  font-weight: 700;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n}\n\n.cm-agent-card__copy {\n  display: grid;\n  gap: 0.5rem;\n  min-width: 0;\n  flex: 1;\n}\n\n.cm-agent-card__title-row {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.6rem;\n}\n\n.cm-agent-card__title {\n  font-family: var(--font-display), sans-serif;\n  font-size: 1.05rem;\n  line-height: 1.1;\n  color: hsl(var(--foreground));\n  min-width: 0;\n}\n\n.cm-agent-card__header-action {\n  margin-left: auto;\n  flex-shrink: 0;\n}\n\n.cm-agent-card__description {\n  color: hsl(var(--muted-foreground));\n  font-size: 0.84rem;\n  line-height: 1.48;\n}\n\n.cm-agent-card__badges,\n.cm-agent-card__tags {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.45rem;\n}\n\n.cm-agent-card__badge,\n.cm-agent-card__tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  min-height: 1.7rem;\n  padding: 0 0.7rem;\n  border-radius: 999px;\n  border: 1px solid hsl(var(--border) / 0.72);\n  background: hsl(var(--muted) / 0.28);\n  color: hsl(var(--muted-foreground));\n  font-family: var(--font-mono), monospace;\n  font-size: 0.64rem;\n  letter-spacing: 0.08em;\n  line-height: 1;\n  text-transform: uppercase;\n}\n\n.cm-agent-card__badge-icon {\n  display: inline-flex;\n  align-items: center;\n}\n\n.cm-agent-card__badge[data-tone=\"cyan\"],\n.cm-agent-card__tag {\n  border-color: hsl(var(--primary) / 0.28);\n  background: hsl(var(--primary) / 0.12);\n  color: hsl(var(--primary));\n}\n\n.cm-agent-card__badge[data-tone=\"green\"] {\n  border-color: hsl(142 71% 45% / 0.28);\n  background: hsl(142 71% 45% / 0.12);\n  color: hsl(142 71% 45%);\n}\n\n.cm-agent-card__badge[data-tone=\"fuchsia\"] {\n  border-color: hsl(292 85% 55% / 0.28);\n  background: hsl(292 85% 55% / 0.12);\n  color: hsl(292 85% 55%);\n}\n\n.cm-agent-card__badge[data-tone=\"warning\"] {\n  border-color: hsl(42 100% 48% / 0.28);\n  background: hsl(42 100% 48% / 0.12);\n  color: hsl(42 100% 48%);\n}\n\n.cm-agent-card__badge[data-tone=\"danger\"] {\n  border-color: hsl(var(--destructive) / 0.28);\n  background: hsl(var(--destructive) / 0.12);\n  color: hsl(var(--destructive));\n}\n\n.cm-agent-card__metrics {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(8.7rem, 1fr));\n  gap: 0.6rem;\n}\n\n.cm-agent-card__metric {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  gap: 0.6rem;\n  align-items: center;\n  padding: 0.72rem 0.8rem;\n  border-radius: var(--radius, 0.25rem);\n  border: 1px solid hsl(var(--border) / 0.65);\n  background: hsl(var(--background) / 0.5);\n}\n\n.cm-agent-card__metric-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: hsl(var(--primary));\n}\n\n.cm-agent-card__metric-copy {\n  display: grid;\n  gap: 0.14rem;\n  min-width: 0;\n}\n\n.cm-agent-card__metric-label,\n.cm-agent-card__focus-label,\n.cm-agent-card__tags-title,\n.cm-agent-card__meta-label {\n  color: hsl(var(--muted-foreground));\n  font-family: var(--font-mono), monospace;\n  font-size: 0.62rem;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n}\n\n.cm-agent-card__metric-value,\n.cm-agent-card__focus-value,\n.cm-agent-card__meta-value {\n  color: hsl(var(--foreground));\n  font-family: var(--font-mono), monospace;\n  font-size: 0.8rem;\n  line-height: 1.2;\n  overflow-wrap: anywhere;\n}\n\n.cm-agent-card__metric[data-tone=\"green\"] .cm-agent-card__metric-icon,\n.cm-agent-card__metric[data-tone=\"green\"] .cm-agent-card__metric-value {\n  color: hsl(142 71% 45%);\n}\n\n.cm-agent-card__metric[data-tone=\"cyan\"] .cm-agent-card__metric-icon,\n.cm-agent-card__metric[data-tone=\"cyan\"] .cm-agent-card__metric-value {\n  color: hsl(var(--primary));\n}\n\n.cm-agent-card__metric[data-tone=\"fuchsia\"] .cm-agent-card__metric-icon,\n.cm-agent-card__metric[data-tone=\"fuchsia\"] .cm-agent-card__metric-value {\n  color: hsl(292 85% 55%);\n}\n\n.cm-agent-card__metric[data-tone=\"warning\"] .cm-agent-card__metric-icon,\n.cm-agent-card__metric[data-tone=\"warning\"] .cm-agent-card__metric-value {\n  color: hsl(42 100% 48%);\n}\n\n.cm-agent-card__metric[data-tone=\"danger\"] .cm-agent-card__metric-icon,\n.cm-agent-card__metric[data-tone=\"danger\"] .cm-agent-card__metric-value {\n  color: hsl(var(--destructive));\n}\n\n.cm-agent-card__focus {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  gap: 0.7rem;\n  align-items: center;\n  padding: 0.85rem 0.95rem;\n  border-radius: var(--radius, 0.25rem);\n  border: 1px solid hsl(var(--border) / 0.72);\n  background:\n    linear-gradient(135deg, hsl(var(--primary) / 0.11), transparent 68%);\n}\n\n.cm-agent-card__focus-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: hsl(var(--primary));\n}\n\n.cm-agent-card__focus-copy,\n.cm-agent-card__tags-block {\n  display: grid;\n  gap: 0.35rem;\n}\n\n.cm-agent-card__meta {\n  display: grid;\n  gap: 0.55rem;\n}\n\n.cm-agent-card__meta-row {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 1rem;\n}\n\n.cm-agent-card__footer {\n  padding-top: 0.9rem;\n  border-top: 1px solid hsl(var(--border) / 0.55);\n}\n\n.cm-agent-card__footer-stack {\n  display: grid;\n  gap: 0.8rem;\n}\n\n.cm-agent-card__endpoint,\n.cm-agent-card__creator {\n  display: grid;\n  gap: 0.45rem;\n}\n\n.cm-agent-card__endpoint-label,\n.cm-agent-card__creator-label {\n  color: hsl(var(--muted-foreground));\n  font-size: 0.68rem;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n}\n\n.cm-agent-card__endpoint-row {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  gap: 0.6rem;\n  align-items: center;\n  padding: 0.65rem 0.75rem;\n  border-radius: var(--radius, 0.25rem);\n  border: 1px solid hsl(var(--border) / 0.65);\n  background: hsl(var(--background) / 0.42);\n}\n\n.cm-agent-card__endpoint-code,\n.cm-agent-card__creator-value {\n  color: hsl(var(--primary));\n  font-family: var(--font-mono), monospace;\n  font-size: 0.78rem;\n  overflow-wrap: anywhere;\n}\n\n.cm-agent-card__creator-value {\n  color: hsl(292 85% 55%);\n}\n\n.cm-agent-card__footer-link {\n  color: hsl(var(--primary));\n  font-size: 0.82rem;\n  font-weight: 600;\n  text-decoration: none;\n}\n\n.cm-agent-card__footer-link:hover {\n  text-decoration: underline;\n}\n\n.cm-agent-card__actions {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.55rem;\n  padding: 1rem 1rem 1rem 0;\n}\n\n.cm-agent-card__action-stack {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.55rem;\n  flex-wrap: wrap;\n}\n\n.cm-agent-card--skeleton {\n  pointer-events: none;\n}\n\n.cm-agent-card__skeleton {\n  border-radius: var(--radius, 0.25rem);\n  background: linear-gradient(90deg, hsl(var(--muted) / 0.55), hsl(var(--muted) / 0.8), hsl(var(--muted) / 0.55));\n  background-size: 220% 100%;\n  animation: cm-agent-card-shimmer 1.6s linear infinite;\n}\n\n.cm-agent-card__skeleton--avatar {\n  width: 3.5rem;\n  height: 3.5rem;\n  border-radius: max(var(--radius, 0.25rem), 0.35rem);\n}\n\n.cm-agent-card__skeleton--title {\n  height: 1.1rem;\n  width: 10rem;\n}\n\n.cm-agent-card__skeleton--line {\n  height: 0.82rem;\n  width: 100%;\n}\n\n.cm-agent-card__skeleton--line.short {\n  width: 76%;\n}\n\n.cm-agent-card__skeleton--metric {\n  min-height: 4.4rem;\n}\n\n.cm-agent-card__skeleton--focus {\n  min-height: 4.3rem;\n}\n\n.cm-agent-card__skeleton--tags {\n  min-height: 5.6rem;\n}\n\n.cm-agent-card__skeleton--footer {\n  min-height: 4.2rem;\n}\n\n@keyframes cm-agent-card-shimmer {\n  0% {\n    background-position: 200% 0;\n  }\n\n  100% {\n    background-position: -200% 0;\n  }\n}\n\n@media (max-width: 720px) {\n  .cm-agent-card__main {\n    gap: 0.65rem;\n    padding: 0.85rem;\n  }\n\n  .cm-agent-card__avatar {\n    width: 2.5rem;\n    height: 2.5rem;\n  }\n\n  .cm-agent-card__title {\n    font-size: 0.92rem;\n  }\n\n  .cm-agent-card__description {\n    font-size: 0.78rem;\n    line-height: 1.4;\n  }\n\n  .cm-agent-card__metrics {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .cm-agent-card__metric {\n    padding: 0.55rem 0.7rem;\n  }\n\n  .cm-agent-card__focus {\n    padding: 0.7rem 0.8rem;\n  }\n\n  .cm-agent-card__badges,\n  .cm-agent-card__tags {\n    gap: 0.3rem;\n  }\n\n  .cm-agent-card__badge,\n  .cm-agent-card__tag {\n    min-height: 1.45rem;\n    padding: 0 0.5rem;\n    font-size: 0.65rem;\n  }\n\n  .cm-agent-card__endpoint-code,\n  .cm-agent-card__creator-value {\n    font-size: 0.68rem;\n  }\n\n  .cm-agent-card__actions {\n    padding: 0 0.85rem 0.85rem;\n    justify-content: flex-end;\n    flex-wrap: wrap;\n  }\n}\n";
+export declare const agentsCss = "/**\n * Compose.Market Agent Card\n * @compose-market/theme/css/agents\n */\n\n.cm-agent-card {\n  container-type: inline-size;\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  width: 100%;\n  max-width: 100%;\n  min-width: 0;\n  gap: 0.85rem;\n  border-radius: 14px;\n  border: 1px solid hsl(var(--primary) / 0.18);\n  background:\n    linear-gradient(145deg, hsl(226 21% 23% / 0.42), hsl(221 50% 9% / 0.32)),\n    radial-gradient(circle at 18% 0%, hsl(var(--primary) / 0.08), transparent 34%),\n    hsl(224 36% 13% / 0.24);\n  box-shadow:\n    0 0 34px hsl(var(--primary) / 0.055),\n    inset 0 1px 0 hsl(0 0% 100% / 0.06);\n  overflow: hidden;\n  backdrop-filter: blur(16px) saturate(1.12);\n}\n\n.cm-agent-card--interactive {\n  transition:\n    transform 180ms ease,\n    border-color 180ms ease,\n    box-shadow 180ms ease;\n}\n\n.cm-agent-card--interactive:hover {\n  transform: translateY(-2px);\n  border-color: hsl(var(--primary) / 0.45);\n  box-shadow:\n    0 18px 36px hsl(240 30% 2% / 0.32),\n    0 0 24px hsl(var(--primary) / 0.14),\n    inset 0 1px 0 hsl(0 0% 100% / 0.05);\n}\n\n.cm-agent-card--running {\n  border-color: hsl(142 71% 45% / 0.48);\n  box-shadow:\n    0 10px 30px hsl(142 71% 45% / 0.08),\n    0 0 24px hsl(142 71% 45% / 0.12),\n    inset 0 1px 0 hsl(0 0% 100% / 0.05);\n}\n\n.cm-agent-card__main {\n  display: grid;\n  gap: 0.9rem;\n  padding: 1rem;\n  min-width: 0;\n  max-width: 100%;\n}\n\n.cm-agent-card__header {\n  display: flex;\n  align-items: flex-start;\n  gap: 1rem;\n  min-width: 0;\n  max-width: 100%;\n}\n\n.cm-agent-card__avatar {\n  width: 3.5rem;\n  height: 3.5rem;\n  border-radius: max(var(--radius, 0.25rem), 0.35rem);\n  border: 1px solid hsl(var(--primary) / 0.28);\n  background:\n    linear-gradient(180deg, hsl(var(--background) / 0.92), hsl(var(--muted) / 0.34));\n  display: grid;\n  place-items: center;\n  flex-shrink: 0;\n  overflow: hidden;\n  box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.08);\n}\n\n.cm-agent-card__avatar-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.cm-agent-card__avatar-fallback {\n  font-family: var(--font-mono), monospace;\n  color: hsl(var(--primary));\n  font-size: 0.88rem;\n  font-weight: 700;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n}\n\n.cm-agent-card__copy {\n  display: grid;\n  gap: 0.5rem;\n  min-width: 0;\n  max-width: 100%;\n  flex: 1;\n}\n\n.cm-agent-card__title-row {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.6rem;\n  min-width: 0;\n  max-width: 100%;\n}\n\n.cm-agent-card__title {\n  font-family: var(--font-display), sans-serif;\n  font-size: 1.05rem;\n  line-height: 1.1;\n  color: hsl(var(--foreground));\n  min-width: 0;\n  max-width: 100%;\n  overflow-wrap: anywhere;\n}\n\n.cm-agent-card__header-action {\n  margin-left: auto;\n  flex-shrink: 0;\n}\n\n.cm-agent-card__description {\n  color: hsl(var(--muted-foreground));\n  font-size: 0.84rem;\n  line-height: 1.48;\n  max-width: 100%;\n  min-width: 0;\n  overflow-wrap: anywhere;\n}\n\n.cm-agent-card__badges,\n.cm-agent-card__tags {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.45rem;\n}\n\n.cm-agent-card__badge,\n.cm-agent-card__tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  min-height: 1.7rem;\n  padding: 0 0.7rem;\n  border-radius: 999px;\n  border: 1px solid hsl(var(--border) / 0.72);\n  background: hsl(var(--muted) / 0.28);\n  color: hsl(var(--muted-foreground));\n  font-family: var(--font-mono), monospace;\n  font-size: 0.64rem;\n  letter-spacing: 0.08em;\n  line-height: 1;\n  text-transform: uppercase;\n}\n\n.cm-agent-card__badge-icon {\n  display: inline-flex;\n  align-items: center;\n}\n\n.cm-agent-card__badge[data-tone=\"cyan\"],\n.cm-agent-card__tag {\n  border-color: hsl(var(--primary) / 0.28);\n  background: hsl(var(--primary) / 0.12);\n  color: hsl(var(--primary));\n}\n\n.cm-agent-card__badge[data-tone=\"green\"] {\n  border-color: hsl(142 71% 45% / 0.28);\n  background: hsl(142 71% 45% / 0.12);\n  color: hsl(142 71% 45%);\n}\n\n.cm-agent-card__badge[data-tone=\"fuchsia\"] {\n  border-color: hsl(292 85% 55% / 0.28);\n  background: hsl(292 85% 55% / 0.12);\n  color: hsl(292 85% 55%);\n}\n\n.cm-agent-card__badge[data-tone=\"warning\"] {\n  border-color: hsl(42 100% 48% / 0.28);\n  background: hsl(42 100% 48% / 0.12);\n  color: hsl(42 100% 48%);\n}\n\n.cm-agent-card__badge[data-tone=\"danger\"] {\n  border-color: hsl(var(--destructive) / 0.28);\n  background: hsl(var(--destructive) / 0.12);\n  color: hsl(var(--destructive));\n}\n\n.cm-agent-card__metrics {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(8.7rem, 1fr));\n  gap: 0.6rem;\n}\n\n.cm-agent-card__metric {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  gap: 0.6rem;\n  align-items: center;\n  padding: 0.72rem 0.8rem;\n  border-radius: var(--radius, 0.25rem);\n  border: 1px solid hsl(var(--border) / 0.65);\n  background: hsl(var(--background) / 0.5);\n}\n\n.cm-agent-card__metric-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: hsl(var(--primary));\n}\n\n.cm-agent-card__metric-copy {\n  display: grid;\n  gap: 0.14rem;\n  min-width: 0;\n}\n\n.cm-agent-card__metric-label,\n.cm-agent-card__focus-label,\n.cm-agent-card__tags-title,\n.cm-agent-card__meta-label {\n  color: hsl(var(--muted-foreground));\n  font-family: var(--font-mono), monospace;\n  font-size: 0.62rem;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n}\n\n.cm-agent-card__metric-value,\n.cm-agent-card__focus-value,\n.cm-agent-card__meta-value {\n  color: hsl(var(--foreground));\n  font-family: var(--font-mono), monospace;\n  font-size: 0.8rem;\n  line-height: 1.2;\n  overflow-wrap: anywhere;\n}\n\n.cm-agent-card__metric[data-tone=\"green\"] .cm-agent-card__metric-icon,\n.cm-agent-card__metric[data-tone=\"green\"] .cm-agent-card__metric-value {\n  color: hsl(142 71% 45%);\n}\n\n.cm-agent-card__metric[data-tone=\"cyan\"] .cm-agent-card__metric-icon,\n.cm-agent-card__metric[data-tone=\"cyan\"] .cm-agent-card__metric-value {\n  color: hsl(var(--primary));\n}\n\n.cm-agent-card__metric[data-tone=\"fuchsia\"] .cm-agent-card__metric-icon,\n.cm-agent-card__metric[data-tone=\"fuchsia\"] .cm-agent-card__metric-value {\n  color: hsl(292 85% 55%);\n}\n\n.cm-agent-card__metric[data-tone=\"warning\"] .cm-agent-card__metric-icon,\n.cm-agent-card__metric[data-tone=\"warning\"] .cm-agent-card__metric-value {\n  color: hsl(42 100% 48%);\n}\n\n.cm-agent-card__metric[data-tone=\"danger\"] .cm-agent-card__metric-icon,\n.cm-agent-card__metric[data-tone=\"danger\"] .cm-agent-card__metric-value {\n  color: hsl(var(--destructive));\n}\n\n.cm-agent-card__focus {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  gap: 0.7rem;\n  align-items: center;\n  padding: 0.85rem 0.95rem;\n  border-radius: var(--radius, 0.25rem);\n  border: 1px solid hsl(var(--border) / 0.72);\n  background:\n    linear-gradient(135deg, hsl(var(--primary) / 0.11), transparent 68%);\n}\n\n.cm-agent-card__focus-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: hsl(var(--primary));\n}\n\n.cm-agent-card__focus-copy,\n.cm-agent-card__tags-block {\n  display: grid;\n  gap: 0.35rem;\n}\n\n.cm-agent-card__meta {\n  display: grid;\n  gap: 0.55rem;\n}\n\n.cm-agent-card__meta-row {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 1rem;\n}\n\n.cm-agent-card__footer {\n  padding-top: 0.9rem;\n  border-top: 1px solid hsl(var(--border) / 0.55);\n}\n\n.cm-agent-card__footer-stack {\n  display: grid;\n  gap: 0.8rem;\n}\n\n.cm-agent-card__endpoint,\n.cm-agent-card__creator {\n  display: grid;\n  gap: 0.45rem;\n}\n\n.cm-agent-card__endpoint-label,\n.cm-agent-card__creator-label {\n  color: hsl(var(--muted-foreground));\n  font-size: 0.68rem;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n}\n\n.cm-agent-card__endpoint-row {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  gap: 0.6rem;\n  align-items: center;\n  padding: 0.65rem 0.75rem;\n  border-radius: var(--radius, 0.25rem);\n  border: 1px solid hsl(var(--border) / 0.65);\n  background: hsl(var(--background) / 0.42);\n}\n\n.cm-agent-card__endpoint-code,\n.cm-agent-card__creator-value {\n  color: hsl(var(--primary));\n  font-family: var(--font-mono), monospace;\n  font-size: 0.78rem;\n  overflow-wrap: anywhere;\n}\n\n.cm-agent-card__creator-value {\n  color: hsl(292 85% 55%);\n}\n\n.cm-agent-card__footer-link {\n  color: hsl(var(--primary));\n  font-size: 0.82rem;\n  font-weight: 600;\n  text-decoration: none;\n}\n\n.cm-agent-card__footer-link:hover {\n  text-decoration: underline;\n}\n\n.cm-agent-card--match-chat {\n  height: 100%;\n  min-height: 0;\n}\n\n.cm-agent-card--match-chat > .cm-agent-card__main {\n  height: 100%;\n  min-height: 0;\n  align-content: start;\n  overflow-y: auto;\n}\n\n.cm-agent-card__metric,\n.cm-agent-card__metric-copy,\n.cm-agent-card__focus,\n.cm-agent-card__focus-copy,\n.cm-agent-card__tags-block,\n.cm-agent-card__footer,\n.cm-agent-card__footer-stack,\n.cm-agent-card__endpoint,\n.cm-agent-card__creator {\n  min-width: 0;\n  max-width: 100%;\n}\n\n.cm-agent-card__metric-value,\n.cm-agent-card__focus-value,\n.cm-agent-card__meta-value,\n.cm-agent-card__endpoint-code,\n.cm-agent-card__creator-value {\n  max-width: 100%;\n  min-width: 0;\n  white-space: normal;\n  overflow-wrap: anywhere;\n  word-break: break-word;\n}\n\n.cm-agent-card__identity {\n  display: grid;\n  gap: 0.32rem;\n  min-width: 0;\n  max-width: 100%;\n}\n\n.cm-agent-card__identity-head {\n  display: flex;\n  align-items: baseline;\n  gap: 0.45rem;\n  min-width: 0;\n  max-width: 100%;\n  flex-wrap: wrap;\n}\n\n.cm-agent-card__identity-name {\n  min-width: 0;\n  max-width: 100%;\n  overflow-wrap: anywhere;\n}\n\n.cm-agent-card__identity-address {\n  color: hsl(var(--muted-foreground));\n  font-family: var(--font-mono), monospace;\n  font-size: 0.68rem;\n  font-weight: 500;\n  line-height: 1.1;\n}\n\n.cm-agent-card__model {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.28rem;\n  width: fit-content;\n  max-width: 100%;\n  padding: 0.16rem 0.44rem;\n  border: 1px solid hsl(var(--primary) / 0.3);\n  border-radius: 999px;\n  background: hsl(var(--primary) / 0.06);\n  color: hsl(var(--foreground));\n  font-family: var(--font-mono), monospace;\n  font-size: 0.66rem;\n  font-weight: 600;\n  line-height: 1.25;\n}\n\n.cm-agent-card__model svg {\n  width: 0.68rem;\n  height: 0.68rem;\n  flex-shrink: 0;\n  color: hsl(var(--primary));\n}\n\n.cm-agent-card__model-name {\n  min-width: 0;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.cm-agent-card__badge,\n.cm-agent-card__tag {\n  max-width: 100%;\n  min-width: 0;\n  height: auto;\n  padding-top: 0.35rem;\n  padding-bottom: 0.35rem;\n  line-height: 1.2;\n  white-space: normal;\n  overflow-wrap: anywhere;\n}\n\n.cm-agent-card__endpoint-row {\n  min-width: 0;\n  max-width: 100%;\n  cursor: pointer;\n  text-align: left;\n}\n\n.cm-agent-card__endpoint-row:focus-visible {\n  outline: 2px solid hsl(var(--primary) / 0.75);\n  outline-offset: 2px;\n}\n\n.cm-agent-card__actions {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.55rem;\n  padding: 1rem 1rem 1rem 0;\n}\n\n.cm-agent-card__action-stack {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.55rem;\n  flex-wrap: wrap;\n}\n\n.cm-agent-card--skeleton {\n  pointer-events: none;\n}\n\n.cm-agent-card__skeleton {\n  border-radius: var(--radius, 0.25rem);\n  background: linear-gradient(90deg, hsl(var(--muted) / 0.55), hsl(var(--muted) / 0.8), hsl(var(--muted) / 0.55));\n  background-size: 220% 100%;\n  animation: cm-agent-card-shimmer 1.6s linear infinite;\n}\n\n.cm-agent-card__skeleton--avatar {\n  width: 3.5rem;\n  height: 3.5rem;\n  border-radius: max(var(--radius, 0.25rem), 0.35rem);\n}\n\n.cm-agent-card__skeleton--title {\n  height: 1.1rem;\n  width: 10rem;\n}\n\n.cm-agent-card__skeleton--line {\n  height: 0.82rem;\n  width: 100%;\n}\n\n.cm-agent-card__skeleton--line.short {\n  width: 76%;\n}\n\n.cm-agent-card__skeleton--metric {\n  min-height: 4.4rem;\n}\n\n.cm-agent-card__skeleton--focus {\n  min-height: 4.3rem;\n}\n\n.cm-agent-card__skeleton--tags {\n  min-height: 5.6rem;\n}\n\n.cm-agent-card__skeleton--footer {\n  min-height: 4.2rem;\n}\n\n@keyframes cm-agent-card-shimmer {\n  0% {\n    background-position: 200% 0;\n  }\n\n  100% {\n    background-position: -200% 0;\n  }\n}\n\n@media (max-width: 720px) {\n  .cm-agent-card__main {\n    gap: 0.65rem;\n    padding: 0.85rem;\n  }\n\n  .cm-agent-card__avatar {\n    width: 2.5rem;\n    height: 2.5rem;\n  }\n\n  .cm-agent-card__title {\n    font-size: 0.92rem;\n  }\n\n  .cm-agent-card__description {\n    font-size: 0.78rem;\n    line-height: 1.4;\n  }\n\n  .cm-agent-card__metrics {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .cm-agent-card__metric {\n    padding: 0.55rem 0.7rem;\n  }\n\n  .cm-agent-card__focus {\n    padding: 0.7rem 0.8rem;\n  }\n\n  .cm-agent-card__badges,\n  .cm-agent-card__tags {\n    gap: 0.3rem;\n  }\n\n  .cm-agent-card__badge,\n  .cm-agent-card__tag {\n    min-height: 1.45rem;\n    padding: 0 0.5rem;\n    font-size: 0.65rem;\n  }\n\n  .cm-agent-card__endpoint-code,\n  .cm-agent-card__creator-value {\n    font-size: 0.68rem;\n  }\n\n  .cm-agent-card__actions {\n    padding: 0 0.85rem 0.85rem;\n    justify-content: flex-end;\n    flex-wrap: wrap;\n  }\n}\n\n@container (max-width: 26rem) {\n  .cm-agent-card__metrics {\n    grid-template-columns: minmax(0, 1fr);\n  }\n\n  .cm-agent-card__header {\n    gap: 0.7rem;\n  }\n\n  .cm-agent-card__avatar {\n    width: 2.75rem;\n    height: 2.75rem;\n  }\n}\n\n@container (max-width: 21rem) {\n  .cm-agent-card__endpoint-row {\n    grid-template-columns: minmax(0, 1fr);\n  }\n}\n";
 //# sourceMappingURL=styles.d.ts.map

package/dist/agents/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/agents/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS,8xUA0drB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/agents/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS,8hbA6nBrB,CAAC"}

package/dist/agents/styles.js

@@ -4,17 +4,24 @@ export const agentsCss = `/**
  */
 
 .cm-agent-card {
+  container-type: inline-size;
   display: grid;
   grid-template-columns: minmax(0, 1fr);
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
   gap: 0.85rem;
-  border-radius: max(var(--radius, 0.25rem), 0.3rem);
-  border: 1px solid hsl(var(--border) / 0.84);
+  border-radius: 14px;
+  border: 1px solid hsl(var(--primary) / 0.18);
   background:
-    linear-gradient(180deg, hsl(var(--card) / 0.96), hsl(var(--card) / 0.78));
+    linear-gradient(145deg, hsl(226 21% 23% / 0.42), hsl(221 50% 9% / 0.32)),
+    radial-gradient(circle at 18% 0%, hsl(var(--primary) / 0.08), transparent 34%),
+    hsl(224 36% 13% / 0.24);
   box-shadow:
-    0 18px 40px hsl(240 30% 2% / 0.24),
-    inset 0 1px 0 hsl(0 0% 100% / 0.04);
+    0 0 34px hsl(var(--primary) / 0.055),
+    inset 0 1px 0 hsl(0 0% 100% / 0.06);
   overflow: hidden;
+  backdrop-filter: blur(16px) saturate(1.12);
 }
 
 .cm-agent-card--interactive {
@@ -45,12 +52,16 @@ export const agentsCss = `/**
   display: grid;
   gap: 0.9rem;
   padding: 1rem;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .cm-agent-card__header {
   display: flex;
   align-items: flex-start;
   gap: 1rem;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .cm-agent-card__avatar {
@@ -86,6 +97,7 @@ export const agentsCss = `/**
   display: grid;
   gap: 0.5rem;
   min-width: 0;
+  max-width: 100%;
   flex: 1;
 }
 
@@ -93,6 +105,8 @@ export const agentsCss = `/**
   display: flex;
   align-items: flex-start;
   gap: 0.6rem;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .cm-agent-card__title {
@@ -101,6 +115,8 @@ export const agentsCss = `/**
   line-height: 1.1;
   color: hsl(var(--foreground));
   min-width: 0;
+  max-width: 100%;
+  overflow-wrap: anywhere;
 }
 
 .cm-agent-card__header-action {
@@ -112,6 +128,9 @@ export const agentsCss = `/**
   color: hsl(var(--muted-foreground));
   font-size: 0.84rem;
   line-height: 1.48;
+  max-width: 100%;
+  min-width: 0;
+  overflow-wrap: anywhere;
 }
 
 .cm-agent-card__badges,
@@ -346,6 +365,129 @@ export const agentsCss = `/**
   text-decoration: underline;
 }
 
+.cm-agent-card--match-chat {
+  height: 100%;
+  min-height: 0;
+}
+
+.cm-agent-card--match-chat > .cm-agent-card__main {
+  height: 100%;
+  min-height: 0;
+  align-content: start;
+  overflow-y: auto;
+}
+
+.cm-agent-card__metric,
+.cm-agent-card__metric-copy,
+.cm-agent-card__focus,
+.cm-agent-card__focus-copy,
+.cm-agent-card__tags-block,
+.cm-agent-card__footer,
+.cm-agent-card__footer-stack,
+.cm-agent-card__endpoint,
+.cm-agent-card__creator {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.cm-agent-card__metric-value,
+.cm-agent-card__focus-value,
+.cm-agent-card__meta-value,
+.cm-agent-card__endpoint-code,
+.cm-agent-card__creator-value {
+  max-width: 100%;
+  min-width: 0;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.cm-agent-card__identity {
+  display: grid;
+  gap: 0.32rem;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.cm-agent-card__identity-head {
+  display: flex;
+  align-items: baseline;
+  gap: 0.45rem;
+  min-width: 0;
+  max-width: 100%;
+  flex-wrap: wrap;
+}
+
+.cm-agent-card__identity-name {
+  min-width: 0;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+}
+
+.cm-agent-card__identity-address {
+  color: hsl(var(--muted-foreground));
+  font-family: var(--font-mono), monospace;
+  font-size: 0.68rem;
+  font-weight: 500;
+  line-height: 1.1;
+}
+
+.cm-agent-card__model {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.28rem;
+  width: fit-content;
+  max-width: 100%;
+  padding: 0.16rem 0.44rem;
+  border: 1px solid hsl(var(--primary) / 0.3);
+  border-radius: 999px;
+  background: hsl(var(--primary) / 0.06);
+  color: hsl(var(--foreground));
+  font-family: var(--font-mono), monospace;
+  font-size: 0.66rem;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.cm-agent-card__model svg {
+  width: 0.68rem;
+  height: 0.68rem;
+  flex-shrink: 0;
+  color: hsl(var(--primary));
+}
+
+.cm-agent-card__model-name {
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cm-agent-card__badge,
+.cm-agent-card__tag {
+  max-width: 100%;
+  min-width: 0;
+  height: auto;
+  padding-top: 0.35rem;
+  padding-bottom: 0.35rem;
+  line-height: 1.2;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.cm-agent-card__endpoint-row {
+  min-width: 0;
+  max-width: 100%;
+  cursor: pointer;
+  text-align: left;
+}
+
+.cm-agent-card__endpoint-row:focus-visible {
+  outline: 2px solid hsl(var(--primary) / 0.75);
+  outline-offset: 2px;
+}
+
 .cm-agent-card__actions {
   display: flex;
   align-items: flex-start;
@@ -472,5 +614,26 @@ export const agentsCss = `/**
     flex-wrap: wrap;
   }
 }
+
+@container (max-width: 26rem) {
+  .cm-agent-card__metrics {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .cm-agent-card__header {
+    gap: 0.7rem;
+  }
+
+  .cm-agent-card__avatar {
+    width: 2.75rem;
+    height: 2.75rem;
+  }
+}
+
+@container (max-width: 21rem) {
+  .cm-agent-card__endpoint-row {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
 `;
 //# sourceMappingURL=styles.js.map

package/dist/agents/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/agents/styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0dxB,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/agents/styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6nBxB,CAAC"}

package/dist/css/agents.css

@@ -4,17 +4,24 @@
  */
 
 .cm-agent-card {
+  container-type: inline-size;
   display: grid;
   grid-template-columns: minmax(0, 1fr);
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
   gap: 0.85rem;
-  border-radius: max(var(--radius, 0.25rem), 0.3rem);
-  border: 1px solid hsl(var(--border) / 0.84);
+  border-radius: 14px;
+  border: 1px solid hsl(var(--primary) / 0.18);
   background:
-    linear-gradient(180deg, hsl(var(--card) / 0.96), hsl(var(--card) / 0.78));
+    linear-gradient(145deg, hsl(226 21% 23% / 0.42), hsl(221 50% 9% / 0.32)),
+    radial-gradient(circle at 18% 0%, hsl(var(--primary) / 0.08), transparent 34%),
+    hsl(224 36% 13% / 0.24);
   box-shadow:
-    0 18px 40px hsl(240 30% 2% / 0.24),
-    inset 0 1px 0 hsl(0 0% 100% / 0.04);
+    0 0 34px hsl(var(--primary) / 0.055),
+    inset 0 1px 0 hsl(0 0% 100% / 0.06);
   overflow: hidden;
+  backdrop-filter: blur(16px) saturate(1.12);
 }
 
 .cm-agent-card--interactive {
@@ -45,12 +52,16 @@
   display: grid;
   gap: 0.9rem;
   padding: 1rem;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .cm-agent-card__header {
   display: flex;
   align-items: flex-start;
   gap: 1rem;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .cm-agent-card__avatar {
@@ -86,6 +97,7 @@
   display: grid;
   gap: 0.5rem;
   min-width: 0;
+  max-width: 100%;
   flex: 1;
 }
 
@@ -93,6 +105,8 @@
   display: flex;
   align-items: flex-start;
   gap: 0.6rem;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .cm-agent-card__title {
@@ -101,6 +115,8 @@
   line-height: 1.1;
   color: hsl(var(--foreground));
   min-width: 0;
+  max-width: 100%;
+  overflow-wrap: anywhere;
 }
 
 .cm-agent-card__header-action {
@@ -112,6 +128,9 @@
   color: hsl(var(--muted-foreground));
   font-size: 0.84rem;
   line-height: 1.48;
+  max-width: 100%;
+  min-width: 0;
+  overflow-wrap: anywhere;
 }
 
 .cm-agent-card__badges,
@@ -346,6 +365,129 @@
   text-decoration: underline;
 }
 
+.cm-agent-card--match-chat {
+  height: 100%;
+  min-height: 0;
+}
+
+.cm-agent-card--match-chat > .cm-agent-card__main {
+  height: 100%;
+  min-height: 0;
+  align-content: start;
+  overflow-y: auto;
+}
+
+.cm-agent-card__metric,
+.cm-agent-card__metric-copy,
+.cm-agent-card__focus,
+.cm-agent-card__focus-copy,
+.cm-agent-card__tags-block,
+.cm-agent-card__footer,
+.cm-agent-card__footer-stack,
+.cm-agent-card__endpoint,
+.cm-agent-card__creator {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.cm-agent-card__metric-value,
+.cm-agent-card__focus-value,
+.cm-agent-card__meta-value,
+.cm-agent-card__endpoint-code,
+.cm-agent-card__creator-value {
+  max-width: 100%;
+  min-width: 0;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.cm-agent-card__identity {
+  display: grid;
+  gap: 0.32rem;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.cm-agent-card__identity-head {
+  display: flex;
+  align-items: baseline;
+  gap: 0.45rem;
+  min-width: 0;
+  max-width: 100%;
+  flex-wrap: wrap;
+}
+
+.cm-agent-card__identity-name {
+  min-width: 0;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+}
+
+.cm-agent-card__identity-address {
+  color: hsl(var(--muted-foreground));
+  font-family: var(--font-mono), monospace;
+  font-size: 0.68rem;
+  font-weight: 500;
+  line-height: 1.1;
+}
+
+.cm-agent-card__model {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.28rem;
+  width: fit-content;
+  max-width: 100%;
+  padding: 0.16rem 0.44rem;
+  border: 1px solid hsl(var(--primary) / 0.3);
+  border-radius: 999px;
+  background: hsl(var(--primary) / 0.06);
+  color: hsl(var(--foreground));
+  font-family: var(--font-mono), monospace;
+  font-size: 0.66rem;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.cm-agent-card__model svg {
+  width: 0.68rem;
+  height: 0.68rem;
+  flex-shrink: 0;
+  color: hsl(var(--primary));
+}
+
+.cm-agent-card__model-name {
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cm-agent-card__badge,
+.cm-agent-card__tag {
+  max-width: 100%;
+  min-width: 0;
+  height: auto;
+  padding-top: 0.35rem;
+  padding-bottom: 0.35rem;
+  line-height: 1.2;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.cm-agent-card__endpoint-row {
+  min-width: 0;
+  max-width: 100%;
+  cursor: pointer;
+  text-align: left;
+}
+
+.cm-agent-card__endpoint-row:focus-visible {
+  outline: 2px solid hsl(var(--primary) / 0.75);
+  outline-offset: 2px;
+}
+
 .cm-agent-card__actions {
   display: flex;
   align-items: flex-start;
@@ -472,3 +614,24 @@
     flex-wrap: wrap;
   }
 }
+
+@container (max-width: 26rem) {
+  .cm-agent-card__metrics {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .cm-agent-card__header {
+    gap: 0.7rem;
+  }
+
+  .cm-agent-card__avatar {
+    width: 2.75rem;
+    height: 2.75rem;
+  }
+}
+
+@container (max-width: 21rem) {
+  .cm-agent-card__endpoint-row {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}