#api-endpoint-tester .record-row {
    grid-template-columns: 110px minmax(0, 1fr);
}

#api-endpoint-tester .record-content,
#api-endpoint-tester .record-type {
    min-width: 0;
    overflow-wrap: anywhere;
}

#api-endpoint-tester .http-note {
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

#api-endpoint-tester .http-copy {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
}

#api-endpoint-tester details > summary {
    cursor: pointer;
}

#api-endpoint-tester .api-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

#api-endpoint-tester .api-controls > div {
    min-width: 0;
}

#api-endpoint-tester .api-controls label {
    display: block;
    margin-bottom: 6px;
}

#api-endpoint-tester textarea {
    box-sizing: border-box;
    display: block;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    line-height: 1.5;
    width: 100%;
    min-height: 100px;
    max-height: 220px;
    resize: vertical;
    font: inherit;
    font-family: monospace;
}

#api-endpoint-tester .api-note {
    color: var(--text-muted);
    margin-block: 0;
}

#api-endpoint-tester pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: var(--tool-output-max-height);
    overflow: auto;
}

@media (max-width: 460px) {
    #api-endpoint-tester .api-controls {
        grid-template-columns: minmax(0, 1fr);
    }
}