.ai-agents-workspace { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
#main .ai-workspace-summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px; }
.ai-workspace-summary > div:first-child { min-width: 0; max-width: 650px; }
.ai-eyebrow { display: block; margin-bottom: 8px; color: #6b7280; font-size: 12px; }
.ai-workspace-summary h2 { margin: 0 0 8px; }
.ai-workspace-summary p, .ai-attention p, .ai-agent-routes p, .ai-connection-body > p { color: #6b7280; font-size: 14px; line-height: 22px; }
.ai-workspace-metrics .native-stat { gap: 6px; }
.ai-attention { border: 1px solid #fde68a; background: #fffbeb; padding: 20px; border-radius: 10px; }
.ai-attention p { margin: 8px 0 12px; }
.ai-count { color: #6b7280; font-size: 12px; }
.ai-directory-toolbar { display: flex; gap: 12px; padding: 0 20px 16px; }
.ai-search { display: flex; align-items: center; gap: 8px; flex: 1; max-width: 440px; min-width: 0; padding: 0 12px; border: 1px solid #e5e7eb; border-radius: 10px; color: #9ca3af; }
.ai-search input { width: 100%; min-width: 0; border: 0; min-height: 36px; background: transparent; font: inherit; color: #111827; outline-offset: 0; }
.ai-directory-toolbar select { border: 1px solid #e5e7eb; border-radius: 10px; background: white; padding: 6px 12px; font: inherit; min-height: 36px; color: #374151; }
.ai-agent-row { border-top: 1px solid #e5e7eb; }
.ai-agent-row > summary { display: flex; align-items: center; gap: 12px; padding: 16px 20px; list-style: none; cursor: pointer; }
.ai-agent-row > summary::-webkit-details-marker, .ai-connection-settings > summary::-webkit-details-marker { display: none; }
.ai-agent-row > summary:hover { background: #f9fafb; }
.ai-agent-row > summary:focus-visible, .ai-connection-settings > summary:focus-visible { outline: 2px solid #8b5cf6; outline-offset: -2px; }
.ai-agent-icon { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; background: #f5f3ff; color: #7c3aed; border-radius: 10px; }
.ai-agent-name { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 4px; }
.ai-agent-name strong { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.ai-agent-name small, .ai-updated { font-size: 12px; color: #6b7280; line-height: 18px; overflow-wrap: anywhere; }
.ai-agent-state { display: inline-flex; padding: 3px 8px; border-radius: 6px; background: #f3f4f6; color: #6b7280; font-size: 12px; line-height: 18px; white-space: nowrap; }
.ai-agent-state.in-use { color: #15803d; background: #f0fdf4; }
.ai-agent-chevron { color: #9ca3af; flex-shrink: 0; }
.ai-agent-row[open] .ai-agent-chevron { transform: rotate(90deg); }
.ai-agent-routes { padding: 0 20px 20px 68px; }
.ai-agent-routes > p { margin-bottom: 12px; }
.ai-use-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid #f3f4f6; font-size: 14px; color: #6d28d9; }
.ai-use-link > span { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.ai-use-link svg { flex-shrink: 0; }
.ai-use-link:hover { text-decoration: underline; }
.ai-next-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
#main .ai-next-actions > section { padding: 20px; display: flex; align-items: flex-start; flex-direction: column; }
.ai-next-actions > section > svg { color: #8b5cf6; margin-bottom: 12px; }
#main .ai-next-actions h2 { margin-bottom: 8px; }
.ai-next-actions p { margin-bottom: 16px; }
.ai-next-actions .button { margin-top: auto; }
.ai-connection-settings > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px; cursor: pointer; font-size: 14px; font-weight: 600; list-style: none; }
.ai-connection-body { padding: 0 20px 20px; }
.ai-connection-body > p { margin-bottom: 16px; }
.ai-advanced { margin-top: 20px; padding-top: 16px; border-top: 1px solid #e5e7eb; }
.ai-advanced > summary { color: #6b7280; font-size: 13px; cursor: pointer; margin-bottom: 12px; }
.ai-advanced > .button { margin-top: 12px; }
.ai-agent-directory .native-empty { gap: 10px; }
.ai-agent-directory .native-empty p { max-width: 560px; }
@media(max-width:900px) { .ai-next-actions { grid-template-columns: 1fr; } }
@media(max-width:600px) {
  .ai-agents-workspace { gap: 20px; }
  #main .ai-workspace-summary { align-items: flex-start; flex-direction: column; padding: 16px; gap: 16px; }
  .ai-directory-toolbar { flex-wrap: wrap; padding-inline: 16px; }
  .ai-search { flex-basis: 100%; max-width: none; }
  .ai-agent-row > summary { flex-wrap: wrap; gap: 8px; padding: 16px; }
  .ai-agent-name { flex-basis: calc(100% - 80px); }
  .ai-agent-state { margin-left: 44px; }
  .ai-connection-settings .ai-agent-state { margin-left: 0; }
  .ai-agent-routes { padding: 0 16px 16px; }
  .ai-connection-settings > summary { padding: 16px; }
}

#main .ai-agents-workspace > *, #main .ai-next-actions > .native-panel { margin-top: 0; margin-bottom: 0; }