.agent-library { display: grid; grid-template-columns: minmax(195px, .8fr) minmax(0, 1.4fr); margin-top: 28px; border-top: 1px solid #e3eaf4; }
.agent-library-sidebar { min-width: 0; padding: 20px 20px 0 0; border-right: 1px solid #e3eaf4; }
.agent-library input[type="search"], .custom-model-field input { width: 100%; border: 1px solid #dce4f0; border-radius: 5px; background: #fcfdff; min-height: 40px; padding: 10px; font: inherit; font-size: 12px; color: var(--ink); }
.agent-catalog { height: 390px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #cbd8eb transparent; margin-top: 12px; padding-right: 5px; }
.crew-enabled .catalog-agent { display: flex; gap: 10px; align-items: center; width: 100%; min-height: 65px; padding: 11px 9px; background: transparent; border: 1px solid transparent; border-radius: 6px; cursor: pointer; text-align: left; transition: background 160ms, border-color 160ms; }
.catalog-agent:hover { background: #f6f8fd; }
.catalog-agent[aria-pressed="true"] { background: #edf3ff; border-color: #dae6ff; }
.catalog-agent > span:nth-child(2) { min-width: 0; flex: 1; }
.catalog-agent strong { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.catalog-agent small { display: block; color: #6a7d97; font-size: 11px; line-height: 1.4; margin-top: 4px; }
.catalog-agent > img { width: 13px; height: 13px; opacity: .45; }
.catalog-avatar { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 8px; background: #edf2fa; }
.catalog-avatar img { width: 18px; height: 18px; opacity: .7; }
.catalog-avatar.violet { background: #efebfd; }.catalog-avatar.mint { background: #e2f3ee; }.catalog-avatar.blue { background: #e4efff; }.catalog-avatar.rose { background: #f9eaf0; }.catalog-avatar.amber { background: #fcf1d8; }
.agent-detail { min-width: 0; padding: 26px 0 0 28px; }
.agent-detail-heading { display: flex; align-items: center; gap: 12px; }
.agent-detail-heading .catalog-avatar { width: 44px; height: 44px; flex-basis: 44px; }
.agent-detail-heading h4 { font-size: 20px; font-weight: 650; letter-spacing: 0; margin: 0; }
.agent-detail-heading p { font-size: 12px; color: #6c7d97; margin: 4px 0 0; }
.agent-detail-description { font-size: 13px; color: #5c6f89; line-height: 1.7; margin: 18px 0 22px; max-width: 440px; }
.agent-field-label { display: block; font-size: 11px; font-weight: 600; color: #415979; margin: 20px 0 8px; }
.agent-detail select { width: 100%; min-height: 44px; border: 1px solid #dce5f3; border-radius: 5px; background: #fff; padding: 10px 12px; color: var(--ink); font: inherit; font-size: 13px; }
.agent-model-caption { margin: 7px 0 0; font-size: 11px; color: #6f8199; line-height: 1.6; }
.agent-skill-list { display: flex; flex-wrap: wrap; gap: 6px; }
.agent-skill { display: flex; align-items: center; gap: 6px; padding: 8px; border: 1px solid #e1e8f3; border-radius: 5px; color: #4d6283; font-size: 11px; cursor: pointer; min-height: 36px; }
.agent-skill:has(:checked) { background: #f5f8ff; border-color: #d2e0f9; }
.agent-skill input { accent-color: var(--brand-blue); width: 13px; height: 13px; margin: 0; }
.agent-detail-facts { margin: 20px 0 0; }
.agent-detail-facts > div { display: grid; grid-template-columns: 80px 1fr; gap: 10px; padding: 12px 0; border-top: 1px solid #edf0f6; font-size: 12px; line-height: 1.6; }
.agent-detail-facts dt { color: #75859d; }.agent-detail-facts dd { margin: 0; color: #425675; }
.agent-selection-status { font-size: 11px; color: #3a7a63; margin-top: 18px; line-height: 1.6; min-height: 18px; }
.agent-empty { font-size: 12px; line-height: 1.6; color: #6b7a90; margin-top: 20px; }
.agent-library:has(.agent-empty:not([hidden])) .agent-catalog { height: 0; }
.integration-summary { display: flex; align-items: center; gap: 18px; padding: 24px 0; border-block: 1px solid #e4ebf5; margin-top: 26px; }
.integration-summary > strong { color: var(--brand-blue); font-size: 52px; font-weight: 650; line-height: 1; }.integration-summary > strong > span { font-size: 32px; }
.integration-summary b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }.integration-summary div > span { display: block; font-size: 12px; color: #6c7e99; margin-top: 5px; }
.integration-summary > img { width: 28px; height: 28px; margin-left: auto; opacity: .4; }
.own-agent { margin-top: 22px; border-top: 1px solid #e2eaf6; border-bottom: 1px solid #e2eaf6; }
.own-agent summary { display: flex; align-items: center; gap: 11px; min-height: 60px; padding-right: 5px; font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; color: #214b99; }
.own-agent summary::-webkit-details-marker { display: none; }.own-agent summary > img { width: 19px; height: 19px; }.own-agent summary > img:last-child { width: 16px; height: 16px; margin-left: auto; transition: transform 160ms; }.own-agent[open] summary > img:last-child { transform: rotate(45deg); }
.own-agent > div { padding: 0 0 22px 30px; }.own-agent p { font-size: 13px; color: #627693; line-height: 1.7; max-width: 520px; margin: 0 0 13px; }
.own-agent a { display: inline-flex; gap: 6px; align-items: center; min-height: 44px; color: var(--brand-blue); font-size: 13px; }.own-agent a img { width: 15px; height: 15px; }
@media (max-width: 850px) {
  .agent-library { grid-template-columns: 1fr; }.agent-library-sidebar { padding: 16px 0; border-right: 0; border-bottom: 1px solid #e3eaf4; }
  .agent-catalog { display: flex; gap: 7px; height: auto; overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; scroll-snap-type: x proximity; }
  .crew-enabled .catalog-agent { width: 185px; flex: 0 0 185px; scroll-snap-align: start; }.agent-detail { padding: 22px 0 0; }
  .agent-library:has(.agent-empty:not([hidden])) .agent-catalog { display: none; }
}
@media (max-width: 650px) {
  .agent-library { margin-top: 20px; }.agent-library input[type="search"], .custom-model-field input, .agent-detail select { font-size: 16px; }
  .agent-detail-description { font-size: 13px; }.agent-skill { min-height: 44px; }.agent-detail-facts > div { grid-template-columns: 70px 1fr; }
  .integration-summary { gap: 12px; }.integration-summary > strong { font-size: 42px; }.integration-summary > img { display: none; }
  .own-agent summary { font-size: 13px; }.own-agent > div { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .agent-library *, .own-agent * { transition: none !important; } }