.callToolPanel, .toolCallInfoPanel {
margin: 0 auto;
padding: 1rem;
border: 1px solid #ddd;
border-radius: 4px;
}
.callToolPanel + .callToolPanel,
.toolCallInfoPanel + .callToolPanel,
.callToolPanel + .toolCallInfoPanel,
.toolCallInfoPanel + .toolCallInfoPanel {
margin-top: 1rem;
}
.callToolPanel {
max-width: 480px;
}
.callToolPanel form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.callToolPanel label {
display: flex;
flex-direction: column;
gap: 0.25rem;
font-weight: 600;
}
.callToolPanel select,
.callToolPanel textarea {
padding: 0.5rem;
border: 1px solid #ccc;
border-radius: 4px;
font-size: inherit;
}
.toolSelect {
font-family: monospace;
}
.toolInput {
min-height: 6rem;
font-family: monospace;
resize: vertical;
}
.toolInput[aria-invalid="true"] {
background-color: #fdd;
}
.callToolPanel button {
align-self: center;
min-width: 200px;
padding: 0.75rem 1.5rem;
border: none;
border-radius: 4px;
background-color: #1e3a5f;
font-size: inherit;
font-weight: 600;
color: white;
cursor: pointer;
}
.callToolPanel button:hover:not(:disabled) {
background-color: #2d4a7c;
}
.callToolPanel button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.toolCallInfoPanel {
display: flex;
gap: 1rem;
animation: slideDown 0.3s ease-out;
}
@keyframes slideDown {
from { opacity: 0; transform: translateY(-12px); }
}
.inputInfoPanel {
display: flex;
flex: 3;
flex-direction: column;
gap: 0.5rem;
min-width: 0;
}
.inputInfoPanel h2 {
display: flex;
flex-direction: column;
margin: 0;
font-size: 1.5rem;
position: relative;
}
.toolName {
font-family: monospace;
}
.closeButton {
position: absolute;
top: 0;
right: 0;
width: 1.5rem;
height: 1.5rem;
padding: 0;
border: none;
border-radius: 4px;
background: #e0e0e0;
font-size: 1.25rem;
line-height: 1;
color: #666;
cursor: pointer;
}
.closeButton:hover {
background: #d0d0d0;
color: #333;
}
.outputInfoPanel {
flex: 4;
min-width: 0;
}
.jsonBlock {
flex-grow: 1;
min-height: 0;
margin: 0;
padding: 1rem;
border-radius: 4px;
background-color: #f5f5f5;
overflow: auto;
}
.appIframePanel {
min-height: 200px;
}
.appIframePanel iframe {
width: 100%;
height: 600px;
box-sizing: border-box;
border: 3px dashed #888;
border-radius: 4px;
}
.error {
padding: 1.5rem;
background-color: #ddd;
color: #d00;
}