1  .agent-selector-overlay {
  2    position: fixed;
  3    top: 0;
  4    left: 0;
  5    right: 0;
  6    bottom: 0;
  7    background: rgba(0, 0, 0, 0.8);
  8    display: flex;
  9    align-items: center;
 10    justify-content: center;
 11    z-index: 1000;
 12    animation: fadeIn 0.2s ease-in;
 13  }
 14  
 15  .agent-selector {
 16    width: 90%;
 17    max-width: 1000px;
 18    max-height: 85vh;
 19    background: #0f0f0f;
 20    border: 2px solid #00FFFF;
 21    border-radius: 12px;
 22    overflow: hidden;
 23    display: flex;
 24    flex-direction: column;
 25    animation: slideUp 0.3s ease-out;
 26  }
 27  
 28  @keyframes slideUp {
 29    from {
 30      transform: translateY(20px);
 31      opacity: 0;
 32    }
 33    to {
 34      transform: translateY(0);
 35      opacity: 1;
 36    }
 37  }
 38  
 39  .selector-header {
 40    background: #1a1a1a;
 41    padding: 1.5rem;
 42    text-align: center;
 43    border-bottom: 2px solid #00FFFF;
 44  }
 45  
 46  .selector-header h2 {
 47    color: #00FFFF;
 48    font-size: 1.5rem;
 49    margin-bottom: 0.5rem;
 50  }
 51  
 52  .selector-subtitle {
 53    color: #94a3b8;
 54    font-size: 0.9rem;
 55  }
 56  
 57  .agent-cards {
 58    flex: 1;
 59    overflow-y: auto;
 60    padding: 1.5rem;
 61    display: grid;
 62    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
 63    gap: 1.5rem;
 64  }
 65  
 66  .agent-cards::-webkit-scrollbar {
 67    width: 8px;
 68  }
 69  
 70  .agent-cards::-webkit-scrollbar-track {
 71    background: #1a1a1a;
 72  }
 73  
 74  .agent-cards::-webkit-scrollbar-thumb {
 75    background: #00FFFF;
 76    border-radius: 4px;
 77  }
 78  
 79  .agent-card {
 80    background: #1a1a1a;
 81    border: 2px solid #3a3a5a;
 82    border-radius: 8px;
 83    padding: 1.25rem;
 84    cursor: pointer;
 85    transition: all 0.3s;
 86  }
 87  
 88  .agent-card:hover {
 89    border-color: #00FFFF;
 90    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
 91    transform: translateY(-2px);
 92  }
 93  
 94  .agent-card.selected {
 95    border-color: #00FFFF;
 96    border-width: 3px;
 97    background: #1a1a2e;
 98    box-shadow: 0 0 30px rgba(0, 255, 255, 0.4);
 99  }
100  
101  .card-header {
102    display: flex;
103    align-items: center;
104    gap: 0.75rem;
105    margin-bottom: 1rem;
106    padding-bottom: 0.75rem;
107    border-bottom: 1px solid #333;
108  }
109  
110  .card-icon {
111    font-size: 2rem;
112  }
113  
114  .card-name {
115    flex: 1;
116    font-size: 1.25rem;
117    font-weight: bold;
118    color: #f1f5f9;
119  }
120  
121  .card-level {
122    padding: 0.25rem 0.75rem;
123    border-radius: 4px;
124    font-size: 0.75rem;
125    font-weight: bold;
126    color: #000;
127  }
128  
129  .card-info {
130    margin-bottom: 0.75rem;
131  }
132  
133  .card-row {
134    display: flex;
135    align-items: center;
136    gap: 0.5rem;
137    font-size: 0.85rem;
138  }
139  
140  .info-label {
141    color: #94a3b8;
142  }
143  
144  .info-value {
145    color: #f1f5f9;
146  }
147  
148  .info-separator {
149    color: #64748b;
150  }
151  
152  .card-personality {
153    display: flex;
154    align-items: flex-start;
155    gap: 0.5rem;
156    margin-bottom: 0.75rem;
157    padding: 0.75rem;
158    background: #151515;
159    border-radius: 6px;
160  }
161  
162  .personality-icon {
163    font-size: 1rem;
164  }
165  
166  .personality-text {
167    flex: 1;
168    color: #cbd5e1;
169    font-size: 0.9rem;
170    font-style: italic;
171    line-height: 1.4;
172  }
173  
174  .card-traits {
175    display: flex;
176    align-items: center;
177    gap: 0.5rem;
178    margin-bottom: 0.75rem;
179    flex-wrap: wrap;
180  }
181  
182  .trait-icon {
183    font-size: 1rem;
184  }
185  
186  .trait-badge {
187    padding: 0.25rem 0.5rem;
188    background: #2a2a3a;
189    border-radius: 4px;
190    font-size: 0.75rem;
191    color: #94a3b8;
192  }
193  
194  .card-specialties {
195    display: flex;
196    align-items: center;
197    gap: 0.5rem;
198    margin-bottom: 0.75rem;
199  }
200  
201  .specialty-icon {
202    font-size: 1rem;
203  }
204  
205  .specialty-text {
206    flex: 1;
207    color: #e2e8f0;
208    font-size: 0.85rem;
209  }
210  
211  .card-capabilities {
212    display: flex;
213    align-items: center;
214    gap: 0.5rem;
215  }
216  
217  .capability-icon {
218    font-size: 1rem;
219  }
220  
221  .capability-text {
222    color: #fbbf24;
223    font-size: 0.85rem;
224    font-weight: 600;
225  }
226  
227  .selector-footer {
228    background: #1a1a1a;
229    color: #64748b;
230    font-size: 0.85rem;
231    padding: 1rem;
232    text-align: center;
233    border-top: 1px solid #333;
234  }
235  
236  @media (max-width: 768px) {
237    .agent-cards {
238      grid-template-columns: 1fr;
239    }
240  }