@media (max-width: 640px) {
    .gsa-analyzer-shell,
    .gsa-public-message,
    .gsa-panel {
        max-width: 100%;
        border-radius: 0;
    }

    .gsa-phase-menu {
        padding: 8px;
    }

    .gsa-phase-track {
        gap: 5px;
    }

    .gsa-phase-circle {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
        font-size: 11px;
    }

    .gsa-phase-selected-name {
        font-size: 12px;
    }

    .gsa-analyzer-workspace {
        padding: 8px;
    }

    .gsa-menu-scroll {
        padding: 8px;
    }
}

@media (max-width: 380px) {
    .gsa-phase-track {
        gap: 4px;
    }

    .gsa-phase-circle {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
        font-size: 10px;
    }
}

@media (max-width: 640px) {
    .gsa-new-swing-form {
        grid-template-columns: 1fr;
    }

    .gsa-checkbox-row,
    .gsa-action-row,
    .gsa-inline-status {
        grid-column: 1;
    }

    .gsa-action-button {
        flex: 1 1 auto;
    }
}

@media (max-width: 640px) {
    .gsa-video-edit-toolbar .gsa-action-button {
        flex: 1 1 calc(50% - 8px);
    }

    .gsa-video-edit-values {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px 12px;
    }
}

@media (max-width: 640px) {
    .gsa-phase-setting-toolbar .gsa-action-button {
        flex: 1 1 calc(50% - 8px);
    }

    .gsa-phase-setting-heading {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px 10px;
    }

    .gsa-phase-setting-heading > strong {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .gsa-open-swing-heading {
        align-items: stretch;
    }

    .gsa-open-swing-heading .gsa-action-button {
        flex: 0 0 auto;
    }

    .gsa-project-list {
        max-height: 300px;
    }
}


@media (max-width: 640px) {
    .gsa-analysis-toolbar .gsa-action-button {
        flex: 1 1 calc(50% - 8px);
    }

    .gsa-color-swatch {
        width: 38px;
        height: 38px;
    }

    .gsa-line-handle {
        r: 9;
    }
}

@media (max-width: 640px) {
    .gsa-mentor-heading {
        display: grid;
        grid-template-columns: 1fr;
    }

    .gsa-mentor-heading .gsa-action-button,
    .gsa-mentor-card .gsa-action-button {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .gsa-compare-selector {
        grid-template-columns: 1fr;
    }

    .gsa-compare-selector .gsa-sub-menu-title,
    .gsa-compare-selector .gsa-field-help,
    .gsa-compare-selector .gsa-action-row,
    .gsa-compare-selector .gsa-inline-status {
        grid-column: 1;
    }

    .gsa-compare-image-stage {
        width: min(100%, 300px);
    }

    .gsa-compare-active-controls .gsa-action-button {
        flex: 1 1 auto;
    }
}


/* Stage 5-K: keep request actions touch-friendly on narrow screens. */
@media (max-width: 640px) {
    .gsa-pro-analysis-panel .gsa-action-row .gsa-action-button {
        flex: 1 1 140px;
    }
}


/* Stage 5-L: final responsive integration and touch-target stabilization. */
@media (max-width: 640px) {
    .gsa-menu-button,
    .gsa-action-button {
        min-height: 44px;
    }

    .gsa-phase-circle,
    .gsa-compare-phase-button {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .gsa-menu-scroll {
        -webkit-overflow-scrolling: touch;
    }

    .gsa-project-card {
        min-height: 44px;
    }

    .gsa-pro-analysis-comment,
    .gsa-comment-textarea {
        font-size: 16px;
    }
}

@media (max-width: 380px) {
    .gsa-phase-circle,
    .gsa-compare-phase-button {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }
}

/* Stage 7-B-1: finalized device layouts. */
@media (min-width: 768px) and (max-width: 1023px) {
    .gsa-analyzer-shell {
        max-width: 820px;
    }

    .gsa-view-stage {
        width: auto;
        height: min(62vh, 620px);
        max-width: 100%;
        aspect-ratio: 9 / 16;
    }

    .gsa-menu-scroll {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow: visible;
    }

    .gsa-menu-button {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .gsa-analyzer-shell {
        max-width: 100%;
    }

    .gsa-phase-track {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .gsa-phase-item {
        flex: 0 0 auto;
    }

    .gsa-view-stage {
        width: min(100%, 390px);
        height: auto;
        aspect-ratio: 9 / 16;
    }

    .gsa-menu-scroll {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        overflow: visible;
    }

    .gsa-menu-button {
        width: 100%;
        min-width: 0;
        white-space: normal;
    }
}

@media (max-width: 767px) and (orientation: landscape) {
    .gsa-analyzer-workspace {
        padding: 6px 8px;
    }

    .gsa-view-stage {
        width: auto;
        height: min(70vh, 430px);
        max-width: 100%;
        aspect-ratio: 9 / 16;
    }

    .gsa-phase-menu {
        padding-block: 6px;
    }

    .gsa-phase-circle {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }
}

/* Stage 7-B-2: touch-first phase/menu layout. */
@media (min-width: 768px) and (max-width: 1023px) {
    .gsa-phase-track {
        justify-content: center;
        overflow: visible;
    }

    .gsa-menu-scroll {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    .gsa-menu-button {
        min-height: 54px;
        flex-direction: column;
        gap: 4px;
        padding: 7px 5px;
    }

    .gsa-menu-icon {
        width: 23px;
        height: 23px;
        flex-basis: 23px;
    }

    .gsa-menu-label {
        display: block;
    }
}

@media (max-width: 767px) {
    .gsa-phase-menu {
        overflow: hidden;
    }

    .gsa-phase-track {
        justify-content: center;
        gap: 5px;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 2px;
    }

    .gsa-phase-current-name {
        font-size: 12px;
    }

    .gsa-menu-scroll {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 7px;
    }

    .gsa-menu-button {
        min-height: 58px;
        flex-direction: column;
        gap: 4px;
        padding: 7px 4px;
    }

    .gsa-menu-icon {
        width: 22px;
        height: 22px;
        flex-basis: 22px;
    }

    .gsa-menu-label {
        display: block;
        font-size: 10px;
    }
}

@media (max-width: 420px) {
    .gsa-phase-track {
        justify-content: flex-start;
    }
}

@media (max-width: 767px) and (orientation: landscape) {
    .gsa-menu-scroll {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 5px;
        padding-block: 6px;
    }

    .gsa-menu-button {
        min-height: 48px;
        padding: 5px 3px;
    }

    .gsa-menu-icon {
        width: 20px;
        height: 20px;
        flex-basis: 20px;
    }

    .gsa-menu-label {
        font-size: 9px;
    }
}