/ app / src / components / AgentInvoker.css
AgentInvoker.css
  1  .agent-invoker {
  2    background: rgba(26, 26, 46, 0.6);
  3    border: 2px solid #3a3a5a;
  4    border-radius: 8px;
  5    padding: 1.5rem;
  6    margin-top: 1rem;
  7  }
  8  
  9  .agent-invoker h2 {
 10    color: #00ffff;
 11    margin-bottom: 1rem;
 12  }
 13  
 14  .invoke-form {
 15    display: flex;
 16    flex-direction: column;
 17    gap: 1rem;
 18  }
 19  
 20  .form-group {
 21    display: flex;
 22    flex-direction: column;
 23    gap: 0.5rem;
 24  }
 25  
 26  .form-group label {
 27    color: #4A90E2;
 28    font-weight: 500;
 29  }
 30  
 31  .form-group select,
 32  .form-group textarea {
 33    background: rgba(0, 0, 0, 0.3);
 34    border: 1px solid #3a3a5a;
 35    border-radius: 4px;
 36    padding: 0.75rem;
 37    color: #fff;
 38    font-family: inherit;
 39    font-size: 1rem;
 40  }
 41  
 42  .form-group select:focus,
 43  .form-group textarea:focus {
 44    outline: none;
 45    border-color: #00ffff;
 46    box-shadow: 0 0 0 2px rgba(0, 255, 255, 0.1);
 47  }
 48  
 49  .form-group select:disabled,
 50  .form-group textarea:disabled {
 51    opacity: 0.5;
 52    cursor: not-allowed;
 53  }
 54  
 55  .invoke-form button {
 56    background: linear-gradient(135deg, #00ffff, #00aacc);
 57    color: #000;
 58    border: none;
 59    border-radius: 4px;
 60    padding: 0.75rem 1.5rem;
 61    font-weight: bold;
 62    cursor: pointer;
 63    transition: all 0.2s ease;
 64  }
 65  
 66  .invoke-form button:hover:not(:disabled) {
 67    background: linear-gradient(135deg, #00aacc, #007799);
 68    transform: translateY(-1px);
 69    box-shadow: 0 4px 8px rgba(0, 255, 255, 0.3);
 70  }
 71  
 72  .invoke-form button:active:not(:disabled) {
 73    transform: translateY(0);
 74  }
 75  
 76  .invoke-form button:disabled {
 77    opacity: 0.5;
 78    cursor: not-allowed;
 79  }
 80  
 81  .invoke-error {
 82    margin-top: 1rem;
 83    padding: 1rem;
 84    background: rgba(255, 107, 107, 0.1);
 85    border: 1px solid #ff6b6b;
 86    border-radius: 4px;
 87    color: #ff6b6b;
 88  }
 89  
 90  .invoke-result {
 91    margin-top: 1rem;
 92    padding: 1rem;
 93    background: rgba(0, 255, 0, 0.05);
 94    border: 1px solid #00ff00;
 95    border-radius: 4px;
 96  }
 97  
 98  .invoke-result h3 {
 99    color: #00ff00;
100    margin-bottom: 0.5rem;
101  }
102  
103  .invoke-result pre {
104    background: rgba(0, 0, 0, 0.3);
105    padding: 1rem;
106    border-radius: 4px;
107    overflow-x: auto;
108    color: #ddd;
109    font-family: 'Monaco', 'Courier New', monospace;
110    font-size: 0.9rem;
111    white-space: pre-wrap;
112    word-wrap: break-word;
113  }