*, *::before, *::after { box-sizing: border-box; }

/* ── Prevent horizontal overflow globally ── */
body { overflow-x: hidden; }

@media (max-width: 640px) {

    /* ── Reduce heavy padding on outer wrappers ── */
    .api-layout,
    .tool-layout,
    .tool-wrapper,
    .page-wrapper {
        flex-direction: column !important;
        padding: 16px !important;
        gap: 14px !important;
    }

    /* ── Sidebars / history panels go full width ── */
    .history,
    .tool-sidebar,
    .sidebar,
    .panel-left,
    .panel-right {
        width: 100% !important;
        min-width: 0 !important;
        border-right: none !important;
        border-left: none !important;
        border-bottom: 1px solid #1f2937 !important;
    }

    /* ── Flex rows that should stack ── */
    .form-row,
    .input-row,
    .action-row,
    .flex-row {
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* ── Full-width inputs, selects, textareas ── */
    input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
    textarea,
    select {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ── Tabs wrap and stretch evenly ── */
    .tabs {
        flex-wrap: wrap !important;
    }
    .tab {
        flex: 1 !important;
        text-align: center !important;
        font-size: 13px !important;
    }

    /* ── Tables scroll horizontally instead of squishing ── */
    table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    /* ── Card/grid layouts → single column ── */
    .cards,
    .tool-grid,
    [class*="grid-"] {
        grid-template-columns: 1fr !important;
    }

    /* ── Result/output boxes: wrap long strings ── */
    pre,
    .result,
    .output,
    .tool-output,
    #response {
        white-space: pre-wrap !important;
        word-break: break-word !important;
        overflow-x: auto !important;
        max-width: 100% !important;
    }

    /* ── Buttons: auto width so they don't stretch unless you want them to ── */
    button {
        white-space: nowrap;
    }

    /* ── Modals / overlays fill screen ── */
    .modal-box {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        margin: 0 !important;
    }
}