1  .agent-list-container {
  2    display: flex;
  3    gap: 2rem;
  4    height: 100%;
  5    padding: 1rem;
  6  }
  7  
  8  .agent-list {
  9    flex: 1;
 10    overflow-y: auto;
 11  }
 12  
 13  .agent-list h2 {
 14    margin-bottom: 1rem;
 15    color: #00ffff;
 16  }
 17  
 18  .agents-grid {
 19    display: grid;
 20    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 21    gap: 1rem;
 22  }
 23  
 24  .agent-card {
 25    background: rgba(26, 26, 46, 0.6);
 26    border: 2px solid #3a3a5a;
 27    border-radius: 8px;
 28    padding: 1rem;
 29    cursor: pointer;
 30    transition: all 0.2s ease;
 31  }
 32  
 33  .agent-card:hover {
 34    background: rgba(26, 26, 46, 0.8);
 35    transform: translateY(-2px);
 36    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
 37  }
 38  
 39  .agent-card.selected {
 40    border-width: 3px;
 41    background: rgba(26, 26, 46, 0.9);
 42    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
 43  }
 44  
 45  .agent-card-header {
 46    display: flex;
 47    align-items: center;
 48    gap: 0.5rem;
 49    margin-bottom: 0.5rem;
 50  }
 51  
 52  .agent-icon {
 53    font-size: 1.5rem;
 54  }
 55  
 56  .agent-name {
 57    font-size: 1.1rem;
 58    font-weight: bold;
 59    flex: 1;
 60  }
 61  
 62  .agent-level {
 63    padding: 0.25rem 0.5rem;
 64    border-radius: 4px;
 65    font-size: 0.75rem;
 66    color: white;
 67    font-weight: bold;
 68  }
 69  
 70  .agent-card-body {
 71    margin-top: 0.5rem;
 72  }
 73  
 74  .agent-type {
 75    color: #888;
 76    font-size: 0.9rem;
 77    font-style: italic;
 78  }
 79  
 80  .agent-personality {
 81    color: #b19cd9;
 82    font-size: 0.85rem;
 83    margin-top: 0.25rem;
 84  }
 85  
 86  .agent-details {
 87    flex: 0 0 400px;
 88    background: rgba(26, 26, 46, 0.6);
 89    border: 2px solid #3a3a5a;
 90    border-radius: 8px;
 91    padding: 1.5rem;
 92    overflow-y: auto;
 93  }
 94  
 95  .agent-details h2 {
 96    margin-bottom: 1rem;
 97    color: #00ffff;
 98  }
 99  
100  .agent-details-content {
101    display: flex;
102    flex-direction: column;
103    gap: 1.5rem;
104  }
105  
106  .detail-section h3 {
107    color: #00ffff;
108    margin-bottom: 0.5rem;
109  }
110  
111  .detail-section h4 {
112    color: #4A90E2;
113    margin-bottom: 0.5rem;
114    font-size: 1rem;
115  }
116  
117  .personality-name {
118    color: #b19cd9;
119    font-style: italic;
120    margin-bottom: 0.5rem;
121  }
122  
123  .traits {
124    display: flex;
125    flex-wrap: wrap;
126    gap: 0.5rem;
127  }
128  
129  .trait-tag {
130    background: rgba(0, 255, 255, 0.1);
131    border: 1px solid #00ffff;
132    padding: 0.25rem 0.5rem;
133    border-radius: 4px;
134    font-size: 0.85rem;
135    color: #00ffff;
136  }
137  
138  .detail-section ul {
139    list-style-position: inside;
140    color: #ddd;
141  }
142  
143  .detail-section li {
144    margin-bottom: 0.25rem;
145  }
146  
147  .capability {
148    background: rgba(74, 144, 226, 0.1);
149    border-left: 3px solid #4A90E2;
150    padding: 0.75rem;
151    margin-bottom: 0.5rem;
152    border-radius: 4px;
153  }
154  
155  .capability-tools {
156    margin-top: 0.5rem;
157    font-size: 0.85rem;
158    color: #888;
159  }
160  
161  .metrics-grid {
162    display: grid;
163    grid-template-columns: repeat(2, 1fr);
164    gap: 0.5rem;
165  }
166  
167  .metrics-grid > div {
168    background: rgba(0, 255, 255, 0.05);
169    padding: 0.5rem;
170    border-radius: 4px;
171    text-align: center;
172  }
173  
174  .agent-list-loading,
175  .agent-list-error {
176    padding: 2rem;
177    text-align: center;
178    color: #888;
179  }
180  
181  .agent-list-error {
182    color: #ff6b6b;
183  }