@media screen and (max-width: 640px) {
    .ai3d-page {
        --ai3d-stage-gap: 8px;
        --ai3d-sidebar-width: 168px;
        padding: var(--ai3d-stage-gap);
    }

    .ai3d-shell {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .ai3d-left {
        position: relative;
        top: auto;
        width: 100%;
        min-width: 0;
        max-width: none;
        flex: none;
        height: auto;
        min-height: 0;
        max-height: none;
        overflow-y: visible;
        overflow-x: hidden;
        align-self: stretch;
        scrollbar-gutter: auto;
        padding: 8px 8px 10px;
        border-radius: 18px;
    }

    .ai3d-right {
        align-self: stretch;
        width: 100%;
        min-width: 0;
        flex: none;
        height: auto;
        min-height: 0;
        max-height: none;
        padding: 6px;
        border-radius: 18px;
        overflow: hidden;
    }

    .ai3d-preview-wrap {
        padding: 6px;
        border-radius: 18px;
    }

    .ai3d-right-toolbar {
        position: static !important;
        order: 2;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100% !important;
        max-width: none !important;
        margin-top: 10px;
    }

    .ai3d-debug-stl-btn {
        min-height: 44px;
        padding: 0 10px;
        border-radius: 12px;
        font-size: 14px;
    }

    .ai3d-render-mode-control {
        min-width: 0;
        width: 100%;
        border-radius: 12px;
    }

    .ai3d-render-mode-control::after {
        right: 10px;
        width: 6px;
        height: 6px;
    }

    .ai3d-render-mode-select {
        min-height: 44px;
        padding: 0 28px 0 10px;
        border-radius: 12px;
        font-size: 14px;
    }

    .ai3d-workbench-view-actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-width: 0;
        width: 100%;
        gap: 8px;
    }

    .ai3d-workbench-view-btn {
        min-height: 44px;
        padding: 0 10px;
        border-radius: 12px;
        font-size: 14px;
    }

    .ai3d-turntable-duration-popover {
        top: calc(100% + 8px);
        width: min(208px, calc(100vw - 20px));
        padding: 12px;
        border-radius: 16px;
        gap: 8px;
    }

    .ai3d-turntable-duration-field {
        min-height: 40px;
        border-radius: 12px;
    }

    .ai3d-turntable-duration-input {
        font-size: 14px;
    }

    .ai3d-right-dock {
        position: static;
        width: 100%;
        max-width: none;
        margin-top: 10px;
        padding-top: 0;
    }

    .ai3d-history-sidebar {
        width: 100%;
        max-height: 320px;
    }

    .ai3d-right-card {
        width: 100%;
        padding: 0;
    }

    .ai3d-right-card--format .ai3d-format-dropdown,
    .ai3d-right-card--format .ai3d-format-trigger {
        width: 100%;
    }

    .ai3d-right-card--format .ai3d-format-trigger {
        min-height: 44px;
        padding: 0 12px;
        gap: 6px;
        border-radius: 12px;
    }

    .ai3d-right-card--format .ai3d-format-trigger-text {
        font-size: 14px;
        letter-spacing: 0.04em;
    }

    .ai3d-format-menu {
        width: 112px;
        padding: 8px;
        gap: 4px;
        border-radius: 12px;
    }

    .ai3d-format-option {
        min-height: 44px;
        padding: 0 8px;
        border-radius: 10px;
        font-size: 14px;
    }

    .ai3d-preview-stage--workbench-only .ai3d-preview-stage-topbar {
        padding-bottom: 8px;
    }

    .ai3d-preview-stage--workbench-only .ai3d-preview-stage-viewport--single {
        order: 1;
        min-height: 360px;
        min-height: clamp(360px, 58vh, 560px);
        border-radius: 16px;
    }
}