@layer pages {
    @media (max-width: 1100px) {
        .workspace-shell {
            grid-template-columns: 240px minmax(0, 1fr);
        }

        .inspector {
            display: none;
        }

        .compact-quota {
            display: flex;
        }
    }

    @media (max-width: 760px) {
        .workspace-shell {
            grid-template-columns: 1fr;
            height: auto;
            min-height: 100vh;
            overflow: auto;
        }

        .session-rail {
            border-width: 0 0 1px 0;
        }

        .session-list {
            grid-auto-flow: column;
            grid-auto-columns: minmax(180px, 1fr);
            overflow-x: auto;
        }

        .chat-pane {
            min-height: 720px;
        }

        .topbar,
        .oauth-panel {
            align-items: stretch;
            flex-direction: column;
        }

        .topbar-actions {
            flex-wrap: wrap;
            width: 100%;
        }

        .compact-quota {
            width: 100%;
        }

        .user-identity {
            order: 4;
            width: 100%;
            max-width: 100%;
        }

        .model-select {
            flex: 1.4 1 0;
        }

        .effort-picker {
            flex: 0.8 1 0;
        }

        .effort-trigger {
            width: 100%;
            max-width: none;
        }

        .effort-panel {
            width: min(300px, calc(100vw - 32px));
        }

        .oauth-panel .primary-button,
        .device-flow {
            width: 100%;
        }

        .device-flow {
            min-width: 0;
        }

        .project-picker strong {
            max-width: 100%;
        }

        .message.user,
        .message.assistant {
            width: 100%;
            max-width: 100%;
        }

        .message-attachments {
            grid-template-columns: 1fr;
            min-width: 0;
        }

        .composer-actions,
        .composer-leading-actions {
            align-items: stretch;
            flex-direction: column;
        }

        .composer-actions .send-button,
        .composer-actions .secondary-button {
            width: 100%;
            justify-content: center;
        }

        .active-run-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .auth-panel {
            padding: 22px 18px;
        }

        .admin-header {
            align-items: flex-start;
            flex-direction: column;
        }

        .admin-content {
            grid-template-columns: 1fr;
        }

        .policy-grid,
        .mode-options,
        .token-create-grid {
            grid-template-columns: 1fr;
        }

        .token-reveal {
            grid-template-columns: 1fr;
        }
    }
}