body {
  font-family: Arial, sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
.container {
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 20px;
  padding: 20px;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
.config-section {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.response-section {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
textarea {
  width: 100%;
  min-height: 200px;
  margin: 10px 0;
}
select,
input {
  width: 100%;
  padding: 8px;
  margin: 5px 0;
}
button {
  background: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  background: #0056b3;
}
.model-params {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.top-controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}
.select-group {
  display: flex;
  flex-direction: column;
}
.select-group h3 {
  margin-bottom: 8px;
}
.model-params {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
  background: #f8f9fa;
  padding: 15px;
  border-radius: 4px;
}
.param-group {
  display: flex;
  flex-direction: column;
}
.param-group label {
  margin-bottom: 5px;
  font-weight: bold;
}
.param-group input {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.model-config-group,
.agent-config-group,
.prompt-config-group {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}
.model-config-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.model-params {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.agent-config-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.provider-select,
.model-select,
.param-group,
.agent-select,
.template-select {
  display: flex;
  flex-direction: column;
}
.param-group label {
  margin-bottom: 5px;
  font-weight: bold;
}
.prompt-config-group textarea {
  width: 100%;
  min-height: 150px;
  margin: 10px 0;
}
.subscription-config-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}
.provider-config-group {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}
.select-group {
  display: flex;
  flex-direction: column;
}
.select-group select:disabled {
  background-color: #e9ecef;
  cursor: not-allowed;
}
.model-config-group {
  background: #e9ecef;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}
.subscription-config-group {
  background: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}
.agent-template-prompt-group {
  background: #e9ecef;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}
.provider-config-group {
  background: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}
.select-group select,
.param-group input,
textarea {
  background: white;
  border: 1px solid #ced4da;
  padding: 8px;
  border-radius: 4px;
  width: 100%;
}
.select-group select:disabled {
  background-color: #dee2e6;
  cursor: not-allowed;
}
.agent-config-section {
  background: #d4d9df;
  padding: 25px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #ced4da;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.subscription-selectors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ced4da;
}
.agent-template-selectors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ced4da;
}
.select-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.select-group select {
  padding: 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  background-color: white;
}
.prompt-section textarea {
  width: 100%;
  min-height: 200px;
  padding: 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  background-color: white;
  font-family: monospace;
}
.properties-group {
  background: #d1d5db;
  padding: 25px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #ced4da;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.subscription-group {
  background: #e2e4e9;
  padding: 25px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #ced4da;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.agent-template-selectors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 25px;
}
.subscription-selectors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 25px;
}
.json-config textarea {
  width: 100%;
  min-height: 200px;
  padding: 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  background-color: white;
  font-family: monospace;
}
.json-viewer {
  font-family: monospace;
  font-size: 14px;
  line-height: 1.4;
  width: 100%;
  height: auto;
}
.json-viewer .content {
  height: auto;
  overflow: visible;
}
.json-viewer .collapsible {
  cursor: pointer;
  user-select: none;
}
.json-viewer .collapsible::before {
  content: "▼";
  display: inline-block;
  margin-right: 5px;
  transition: transform 0.2s;
}
.json-viewer .collapsed::before {
  transform: rotate(-90deg);
}
.json-viewer .key {
  color: #2c5282;
  font-weight: bold;
}
.json-viewer .string {
  color: #38a169;
}
.json-viewer .number {
  color: #805ad5;
}
.json-viewer .boolean {
  color: #d69e2e;
}
.json-viewer .null {
  color: #718096;
}
h1,
h2,
h3 {
  margin-bottom: 20px;
}
.main-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}
.form-section {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}
.response-section {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  border-left: 1px solid #eee;
}
.loader {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.loader-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

.spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 0 auto 10px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.query-history {
  position: relative;
  margin-bottom: 20px;
}

.query-input-container {
  display: flex;
  gap: 10px;
}

.query-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  background: white;
  border: 1px solid #ced4da;
  border-radius: 4px;
  display: none;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-top: 4px;
}

.query-dropdown.show {
  display: block;
}

.query-item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.query-item:hover {
  background: #f8f9fa;
}

.query-item:last-child {
  border-bottom: none;
}

.selection-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.agent-selection,
.template-selection {
    flex: 1;
}

/* Add background to all main sections */
.model-config-group,
.selection-row,
.system-prompt-section,
.subscription-group {
    background-color: #f8f9fa;  /* Light gray background */
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

/* Selection row styling */
.selection-row {
    display: flex;
    gap: 20px;
}

.agent-selection,
.template-selection {
    flex: 1;
}

/* System prompt section */
.system-prompt-section {
    width: 100%;
}

#systemPrompt {
    width: 100%;
    min-height: 200px;
    padding: 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    resize: vertical;
}

/* Consistent styling for all sections */
.config-section > div {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

/* Update/add these styles for proper dropdown positioning */
.query-input-container {
    position: relative;  /* Important for dropdown positioning */
    width: 100%;
}

.query-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
}

.query-input-group {
    position: relative;  /* Important for dropdown positioning */
    display: flex;
    align-items: center;
    flex: 1;
    gap: 5px;
}

.query-input {
    flex: 1;
    height: 38px;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 15px;
}

/* Update the dropdown positioning */
.query-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    background: white;
    border: 1px solid #ced4da;
    border-radius: 4px;
    display: none;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-top: 4px;
}

.query-dropdown.show {
    display: block;
}

.query-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

.query-item:hover {
    background: #f8f9fa;
}

.query-item:last-child {
    border-bottom: none;
}

/* History button styling */
.history-button {
    background: white;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 0 12px;
    margin-left: 5px;
    cursor: pointer;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
}

.history-icon {
    font-size: 14px;
    line-height: 1;
    color: #495057;
}

/* Query dropdown styling */
.query-dropdown {
  position: absolute;
  top: 45px;
  left: 0;
  width: calc(100% - 150px);
  max-height: 200px;
  overflow-y: auto;
  background: white;
  border: 1px solid #ced4da;
  border-radius: 4px;
  display: none;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.query-dropdown.show {
  display: block;
}

.query-item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
}

.query-item:hover {
  background: #f8f9fa;
}

.query-item:last-child {
  border-bottom: none;
}

.selection-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.agent-selection,
.template-selection {
    flex: 1;
}

/* Add background to all main sections */
.model-config-group,
.selection-row,
.system-prompt-section,
.subscription-group {
    background-color: #f8f9fa;  /* Light gray background */
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

/* Selection row styling */
.selection-row {
    display: flex;
    gap: 20px;
}

.agent-selection,
.template-selection {
    flex: 1;
}

/* System prompt section */
.system-prompt-section {
    width: 100%;
}

#systemPrompt {
    width: 100%;
    min-height: 200px;
    padding: 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    resize: vertical;
}

/* Consistent styling for all sections */
.config-section > div {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

/* Update/add these styles for proper dropdown positioning */
.query-input-container {
    position: relative;  /* Important for dropdown positioning */
    width: 100%;
}

.query-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
}

.query-input-group {
    position: relative;  /* Important for dropdown positioning */
    display: flex;
    align-items: center;
    flex: 1;
    gap: 5px;
}

.query-input {
    flex: 1;
    height: 38px;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 15px;
}

/* Update the dropdown positioning */
.query-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    background: white;
    border: 1px solid #ced4da;
    border-radius: 4px;
    display: none;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-top: 4px;
}

.query-dropdown.show {
    display: block;
}

.query-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

.query-item:hover {
    background: #f8f9fa;
}

.query-item:last-child {
    border-bottom: none;
}

/* History button styling */
.history-button {
    background: white;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 0 12px;
    margin-left: 5px;
    cursor: pointer;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
}

.history-icon {
    font-size: 14px;
    line-height: 1;
    color: #495057;
}

/* Add styles for the clear history button */
.query-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #dee2e6;
    background: #f8f9fa;
}

.clear-history-button {
    background: #dc3545;
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}

.clear-history-button:hover {
    background: #c82333;
}

.query-history-title {
    font-weight: bold;
    color: #495057;
}

.format-select {
    min-width: 100px;
}

/* Update history button styling */
.history-button {
    background: white;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 0 12px;
    margin-left: 5px;
    cursor: pointer;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
}

/* Update hover state */
.history-button:hover {
    background-color: #f8f9fa;  /* Light gray on hover instead of blue */
    border-color: #ced4da;
}

.history-icon {
    font-size: 18px;  /* Larger arrow */
    line-height: 1;
    color: #495057;
}

/* Adjust query controls layout */
.query-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
}

/* Make query input larger */
.query-input-group {
    position: relative;
    display: flex;
    align-items: center;
    flex: 4;  /* Take up more space */
    gap: 5px;
}

/* Make format select smaller */
.format-select {
    flex: 0 0 80px;  /* Fixed width of 80px */
}

.format-select select {
    width: 100%;
    height: 38px;
    padding: 0 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
}

/* Update query items to show full text */
.query-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    white-space: normal;  /* Allow text to wrap */
    word-break: break-word;  /* Break long words if needed */
    line-height: 1.4;
}

/* Update dropdown width */
.query-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: calc(100% - 43px);  /* Adjust width to account for history button */
    max-height: 300px;  /* Increased height to show more queries */
    overflow-y: auto;
    background: white;
    border: 1px solid #ced4da;
    border-radius: 4px;
    display: none;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-top: 4px;
}

/* Add styles for the new layout */
.format-select-row {
    margin-bottom: 12px;
}

.format-select {
    width: 100px;  /* Fixed width for format select */
}

.format-select select {
    width: 100%;
    height: 38px;
    padding: 0 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
}

/* Update query controls for new layout */
.query-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
}

.query-input-group {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;  /* Take remaining space */
    gap: 4px;  /* Reduced gap between input and history button */
}

.query-input {
    flex: 1;
    height: 38px;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 15px;
}

/* Simplified history button */
.history-button {
    background: white;
    border: 1px solid #ced4da;
    border-radius: 4px;
    width: 24px;  /* Reduced width */
    height: 38px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;  /* Smaller arrow */
    color: #495057;
}

.history-button:hover {
    background-color: #f8f9fa;
    border-color: #ced4da;
}

/* Update dropdown positioning */
.query-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: calc(100% - 28px);  /* Adjusted for smaller button */
    max-height: 300px;
    overflow-y: auto;
    background: white;
    border: 1px solid #ced4da;
    border-radius: 4px;
    display: none;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-top: 4px;
}

/* Test button styling */
.test-button {
    height: 38px;
    padding: 0 16px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
}

/* Update section header styling */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.section-header h3 {
    margin: 0;
}

.format-select {
    display: flex;
    align-items: center;
    gap: 8px;
}

.format-select label {
    font-size: 14px;
    color: #495057;
}

.format-select select {
    width: 100px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: white;
}

/* Container styles */
.container {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 20px;
    padding: 20px;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Card styles */
.config-section {
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Prevent content from spilling out */
}

/* Selection groups */
.select-group {
    margin-bottom: 20px;
}

.select-group h3 {
    margin: 0 0 8px 0;
    white-space: nowrap; /* Prevent title wrapping */
}

/* Model parameters grid */
.model-params {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.param-group {
    display: flex;
    flex-direction: column;
}

.param-group label {
    margin-bottom: 5px;
    white-space: nowrap;
}

/* Form controls */
select, input, textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Test Configuration section */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.section-header h3 {
    margin: 0;
    white-space: nowrap;
}

.format-select {
    display: flex;
    align-items: center;
    gap: 8px;
}

.format-select label {
    font-size: 14px;
    color: #495057;
    white-space: nowrap;
}

.format-select select {
    width: 100px;
}

/* Query input section */
.query-input-container {
    width: 100%;
}

.query-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
}

.query-input-group {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    gap: 4px;
}

.query-input {
    flex: 1;
    height: 38px;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
}

/* History button */
.history-button {
    background: white;
    border: 1px solid #ced4da;
    border-radius: 4px;
    width: 24px;
    height: 38px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
}

.history-button:hover {
    background-color: #f8f9fa;
}

/* Dropdown */
.query-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: calc(100% - 28px);
    max-height: 300px;
    overflow-y: auto;
    background: white;
    border: 1px solid #ced4da;
    border-radius: 4px;
    display: none;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-top: 4px;
}

.query-dropdown.show {
    display: block;
}

/* Submit button */
.test-button {
    height: 38px;
    padding: 0 16px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}

.test-button:hover {
    background: #0056b3;
}

/* Ensure consistent sizing */
* {
    box-sizing: border-box;
}

/* Fix textarea overflow */
textarea {
    resize: vertical;
    max-width: 100%;
}

/* Update heading styles */
h3, .section-title {
    font-size: 16px;  /* Reduced from default size */
    font-weight: 600;  /* Semi-bold instead of bold */
    margin: 0 0 8px 0;
    white-space: nowrap;
    color: #333;
}

/* For the Template Selection title specifically */
.template-selection h3 {
    font-size: 16px;
    line-height: 1.2;
}

/* For System Prompt title */
.system-prompt-section h3 {
    font-size: 16px;
    margin-bottom: 12px;
}

/* Selection groups layout */
.selection-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

/* Ensure consistent spacing */
.select-group {
    margin-bottom: 16px;
}

.select-group h3 {
    margin-bottom: 8px;
}

/* Update all section headings */
h1, h2, h3, 
.section-title {
    font-size: 14px;  /* Even smaller font size */
    font-weight: 600;
    margin: 0 0 8px 0;
    white-space: nowrap;
    color: #333;
    text-transform: uppercase;  /* Optional: makes it look more like a label */
    letter-spacing: 0.5px;      /* Optional: improves readability of uppercase text */
}

/* For specific sections if needed */
.agent-selection h3,
.template-selection h3,
.system-prompt-section h3 {
    font-size: 14px;
    line-height: 1.2;
}

/* Adjust spacing after headers */
.select-group {
    margin-bottom: 16px;
}

.select-group h3 {
    margin-bottom: 6px;  /* Reduced spacing below headers */
}

/* Unified group container */
.agent-config-group {
    background: #f8f9fa;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 20px;
}

/* Selection row for agent and template */
.selection-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

/* Section titles */
.section-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 8px 0;
}

/* System prompt section */
.system-prompt {
    margin-top: 16px;
}

.system-prompt textarea {
    width: 100%;
    min-height: 200px;
    padding: 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-family: monospace;
    resize: vertical;
}

/* Select inputs */
select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: white;
    height: 38px;
}

/* Main container */
.config-group {
    background: #f8f9fa;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 20px;
}

/* First row */
.selection-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.selection-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Second row */
.system-prompt-row {
    margin-top: 16px;
}

/* Common styles */
.section-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 8px 0;
}

select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: white;
    height: 38px;
}

textarea {
    width: 100%;
    min-height: 200px;
    padding: 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-family: monospace;
    resize: vertical;
}

.model-config-group {
    background: #f8f9fa;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    width: 100%;  /* Ensure container takes full width */
}

/* First row styling */
.selection-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.selection-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Second row styling */
.params-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}

.param-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Common styles */
.section-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

select, .param-input {
    width: 100%;
    height: 38px;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: white;
}

.model-config-group {
    background: #f8f9fa;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.config-grid {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.grid-row {
    display: flex;
    width: 100%;
    gap: 16px;
}

.grid-item {
    flex: 1;  /* This makes each item take up equal space */
    min-width: 0;  /* Prevents flex items from overflowing */
}

.section-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

select, .param-input {
    width: 100%;
    height: 38px;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: white;
    box-sizing: border-box;
}

/* Ensure the container expands fully */
.config-section {
    width: 100%;
}

.model-config-container {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
}

.model-config-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
}

.config-item {
    width: 100%;
}

.section-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

select, input {
    width: 100%;
    height: 38px;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: white;
    box-sizing: border-box;
}

.agent-config-container {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
}

.agent-config-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
}

/* Make system prompt span full width */
.agent-config-grid .config-item:last-child {
    grid-column: 1 / -1;  /* Spans all columns */
}

.config-item {
    width: 100%;
}

.section-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

select {
    width: 100%;
    height: 38px;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: white;
    box-sizing: border-box;
}

textarea {
    width: 100%;
    min-height: 200px;
    padding: 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-family: monospace;
    resize: vertical;
    box-sizing: border-box;
}

.agent-header-container {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
}

.agent-header-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
}

.config-item {
    width: 100%;
}

.section-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

select {
    width: 100%;
    height: 38px;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: white;
    box-sizing: border-box;
}

.test-config-container {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
}

.test-config-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.section-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.format-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

.format-selector label {
    font-size: 14px;
    color: #495057;
}

.format-selector select {
    width: 100px;
    height: 38px;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: white;
}

.test-input-row {
    display: flex;
    gap: 8px;
    width: 100%;
}

.test-input {
    flex: 1;
    height: 38px;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 14px;
}

.history-button {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: white;
    cursor: pointer;
}

.submit-button {
    min-width: 80px;
    height: 38px;
    padding: 0 16px;
    background: #0d6efd;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.submit-button:hover {
    background: #0b5ed7;
}

.full-width-select {
  width: 100%;
  box-sizing: border-box;
}

.agent-config-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.config-item {
  width: 100%;
}